Create book/chapter combined chooser component

src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-chapter-combined-chooser/book-chapter-combined-chooser.component.html

@@ -0,0 +1,66 @@
+<ng-container *transloco="let t; read: 'book_chapter_combined_chooser'">
+  <button
+    #trigger="matMenuTrigger"
+    [matMenuTriggerFor]="menu"
+    mat-stroked-button
+    class="menu-trigger"
+    [class.menu-open]="trigger.menuOpen"
+    (menuOpened)="handleMenuOpened()"
+    (menuClosed)="handleMenuClosed()"
+  >
+    <span class="trigger-open-content-wrapper">
+      <input
+        #textInput
+        size="1"
+        (click)="handleTextInputClick($event)"
+        [placeholder]="bookNames.get(book!) + ' ' + chapter"
+        [ngModel]="inputValue$ | async"
+        (ngModelChange)="inputValue$.next($event)"
+        (keydown)="handleTextInputKeydown($event)"
+      />
+      <mat-icon iconPositionEnd>filter_list</mat-icon>
+    </span>
+    <span class="trigger-closed-content-wrapper">
+      {{ bookNames.get(book!) + " " + chapter }}
+      <mat-icon iconPositionEnd>expand_more</mat-icon>
+    </span>
+  </button>
+
+  <mat-menu #menu="matMenu" [class]="overlayPanelClass">
+    <div class="menu-content" (keydown)="handleMenuKeydown($event)">
+      @if (expandedBook$ | async; as expandedBook) {
+        @for (bookItem of filteredBooks$ | async; track bookItem; let bookIndex = $index) {
+          <div
+            class="book-wrapper"
+            (mouseenter)="handleBookMouseEnter(bookIndex)"
+            [class.selected]="expandedBook === bookItem"
+            [class.cursor]="(bookCursor$ | async) === bookIndex"
+          >
+            <button #bookButton class="book" (click)="selectBook($event, bookItem)">
+              {{ bookNames.get(bookItem) }}
+            </button>
+
+            @if (expandedBook === bookItem) {
+              <div class="chapter-display" (click)="$event.stopPropagation()">
+                @for (chapterItem of expandedBookChapters; track chapterItem; let chapterIndex = $index) {
+                  <button
+                    #chapterButton
+                    (click)="selectChapter(chapterItem)"
+                    (mouseenter)="handleChapterMouseEnter(bookIndex, chapterIndex)"
+                    class="chapter"
+                    [class.selected]="book === bookItem && chapter === chapterItem"
+                    [class.cursor]="
+                      (chapterCursor$ | async) === chapterIndex && (bookCursor$ | async) === expandedBookIndex
+                    "
+                  >
+                    {{ chapterItem }}
+                  </button>
+                }
+              </div>
+            }
+          </div>
+        }
+      }
+    </div>
+  </mat-menu>
+</ng-container>

src/SIL.XForge.Scripture/ClientApp/src/app/shared/book-chapter-combined-chooser/book-chapter-combined-chooser.component.scss

@@ -0,0 +1,171 @@
+@use 'sass:color';
+@use 'src/variables' as vars;
+
+$inputTextColor: #64748b;
+$selectedBookTextColor: vars.$blueMedium;
+$accentColor: color.scale($selectedBookTextColor, $lightness: 40%);
+$expandedBookBGColor: color.scale($selectedBookTextColor, $lightness: 95%);
+$selectedChapterBGColor: color.scale($selectedBookTextColor, $lightness: 80%);
+$menuFocusOutlineWidth: 2px;
+$chapterItemDim: 2.5em;
+
+:host {
+  display: inline-block;
+}
+
+button {
+  outline: 0;
+}
+
+.menu-trigger {
+  --mat-outlined-button-pressed-state-layer-opacity: 0;
+  --mat-outlined-button-state-layer-color: transparent;
+
+  &:focus-within {
+    outline: $menuFocusOutlineWidth solid $accentColor;
+  }
+
+  input {
+    font-family: inherit;
+    font-size: inherit;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    width: 100%;
+    color: $inputTextColor;
+    font-weight: 500;
+
+    &::placeholder {
+      color: $inputTextColor;
+      font-weight: 500;
+    }
+  }
+
+  .trigger-open-content-wrapper {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  &.menu-open {
+    .trigger-closed-content-wrapper {
+      visibility: hidden; // Keep space for sizing
+    }
+
+    .trigger-open-content-wrapper {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  mat-icon {
+    font-size: 1.3em;
+    width: 1.3em;
+    height: 1.3em;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.trigger-closed-content-wrapper {
+  visibility: visible;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.book-wrapper {
+  border-radius: 0.3em;
+  overflow: hidden;
+
+  &.selected {
+    background: $expandedBookBGColor;
+
+    &.cursor {
+      background: color.scale($expandedBookBGColor, $lightness: -4%);
+    }
+
+    .book {
+      font-weight: 600;
+      color: $selectedBookTextColor;
+      background-color: inherit;
+      cursor: default;
+    }
+  }
+}
+
+.book {
+  position: relative;
+  display: flex;
+  border: 0;
+  width: 100%;
+  font-size: 0.9em;
+  background-color: transparent;
+  padding: 0.5em 0.5em 0.5em 1.4em;
+
+  &:focus {
+    cursor: pointer;
+    background-color: #ebedf8;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 0.15em;
+    height: calc(100% - 1em);
+    background-color: $accentColor;
+    border-radius: 0.4em;
+    inset-inline-start: 0.7em;
+    top: 0.5em;
+  }
+}
+
+.chapter-display {
+  display: grid;
+
+  // Column count from config, row height is 1fr
+  grid-template-columns: repeat(var(--book-chapter-combined-chooser-column-count), 1fr);
+  grid-template-rows: 1fr;
+  padding: 0 0.5em 0.5em;
+
+  button {
+    border: 0.15em solid transparent;
+    border-radius: 5px;
+    background-color: inherit;
+    color: $selectedBookTextColor;
+    width: $chapterItemDim;
+    height: $chapterItemDim;
+    font-size: 0.8em;
+    font-weight: 300;
+    text-align: center;
+
+    &.selected {
+      background-color: $selectedChapterBGColor;
+      font-weight: 700;
+    }
+
+    &.cursor {
+      cursor: pointer;
+      border-color: $selectedBookTextColor;
+      font-weight: 700;
+    }
+  }
+}
+
+.mat-icon {
+  opacity: 0.5;
+}
+
+::ng-deep {
+  .book-chapter-combined-chooser-menu {
+    max-width: none !important;
+    max-height: 80vh;
+    padding: 0 0.2em;
+    position: relative;
+    top: $menuFocusOutlineWidth; // Push down to show input focus outline
+  }
+}