@internetarchive/collection-browser 4.1.0-alpha-webdev8186.4 → 4.1.0

package/dist/src/sort-filter-bar/sort-filter-bar.js

@@ -62,35 +62,35 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         };
     }
     render() {
-        return html `
-      <div id="container">
-        <section id="sort-bar" aria-label="Sorting options">
-          <slot name="sort-options-left"></slot>
-          <div id="sort-options">
+        return html `
+      <div id="container">
+        <section id="sort-bar" aria-label="Sorting options">
+          <slot name="sort-options-left"></slot>
+          <div id="sort-options">
             ${!this.enableSortOptionsSlot
-            ? html `
-                  <div class="sort-direction-container">
-                    ${this.sortDirectionSelectorTemplate}
-                  </div>
-                  <span class="sort-by-text">${msg('Sort by:')}</span>
-                  <div id="sort-selector-container">
-                    ${this.sortSelectorTemplate}
-                  </div>
+            ? html `
+                  <div class="sort-direction-container">
+                    ${this.sortDirectionSelectorTemplate}
+                  </div>
+                  <span class="sort-by-text">${msg('Sort by:')}</span>
+                  <div id="sort-selector-container">
+                    ${this.sortSelectorTemplate}
+                  </div>
                 `
-            : html `<slot name="sort-options"></slot>`}
-          </div>
-          <slot name="sort-options-right"></slot>
-
+            : html `<slot name="sort-options"></slot>`}
+          </div>
+          <slot name="sort-options-right"></slot>
+
           ${this.suppressDisplayModes
             ? nothing
-            : html `<div id="display-style-selector">
-                ${this.displayOptionTemplate}
-              </div>`}
-        </section>
-
-        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}
-        ${this.alphaBarTemplate}
-      </div>
+            : html `<div id="display-style-selector">
+                ${this.displayOptionTemplate}
+              </div>`}
+        </section>
+
+        ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}
+        ${this.alphaBarTemplate}
+      </div>
     `;
     }
     willUpdate(changed) {
@@ -153,16 +153,16 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         const buttonLabel = this.canChangeSortDirection
             ? msg(str `Change to ${oppositeSortDirectionReadable} sort`)
             : msg('Directions are not available for the current sort option');
-        return html `
-      <button
-        class="sort-direction-selector"
-        title=${buttonLabel}
-        ?disabled=${!this.canChangeSortDirection}
-        @click=${this.handleSortDirectionClicked}
-      >
-        <span class="sr-only">${buttonLabel}</span>
-        ${this.sortDirectionIcon}
-      </button>
+        return html `
+      <button
+        class="sort-direction-selector"
+        title=${buttonLabel}
+        ?disabled=${!this.canChangeSortDirection}
+        @click=${this.handleSortDirectionClicked}
+      >
+        <span class="sr-only">${buttonLabel}</span>
+        ${this.sortDirectionIcon}
+      </button>
     `;
     }
     /** Template to render the sort direction button's icon in the correct current state */
@@ -172,17 +172,17 @@ let SortFilterBar = class SortFilterBar extends LitElement {
             return html `<div class="sort-direction-icon">${sortDisabledIcon}</div>`;
         }
         // For all other sorts, show the ascending/descending direction
-        return html `
-      <div class="sort-direction-icon">
-        ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}
-      </div>
+        return html `
+      <div class="sort-direction-icon">
+        ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}
+      </div>
     `;
     }
     /** The template to render all the sort options in a single dropdown */
     get sortSelectorTemplate() {
         const displayedOptions = Object.values(SORT_OPTIONS).filter(opt => opt.shownInSortBar && this.sortFieldAvailability[opt.field]);
-        return html `
-      <div id="sort-dropdown-container">
+        return html `
+      <div id="sort-dropdown-container">
         ${this.getSortDropdown({
             displayName: SORT_OPTIONS[this.finalizedSortField].displayName,
             id: 'sort-dropdown',
@@ -194,8 +194,8 @@ let SortFilterBar = class SortFilterBar extends LitElement {
                 this.dropdownBackdropVisible = this.sortOptionsDropdown.open;
                 this.sortOptionsDropdown.classList.toggle('open', this.sortOptionsDropdown.open);
             },
-        })}
-      </div>
+        })}
+      </div>
     `;
     }
     /**
@@ -211,40 +211,37 @@ let SortFilterBar = class SortFilterBar extends LitElement {
      * @param options.onDropdownClick A handler for click events on the dropdown
      */
     getSortDropdown(options) {
-        return html `
-      <ia-dropdown
-        id=${options.id}
-        class=${options.selected ? 'selected' : ''}
-        displayCaret
-        closeOnSelect
-        includeSelectedOption
-        .openViaButton=${options.selected}
-        .options=${options.dropdownOptions}
-        .selectedOption=${options.selectedOption ?? ''}
-        @optionSelected=${options.onOptionSelected ?? nothing}
-        @click=${options.onDropdownClick ?? nothing}
-      >
-        <span
-          class="dropdown-label"
-          slot="dropdown-label"
-          data-title=${options.displayName}
-        >
-          ${options.displayName}
-        </span>
-      </ia-dropdown>
+        return html `
+      <ia-dropdown
+        id=${options.id}
+        class=${options.selected ? 'selected' : ''}
+        displayCaret
+        closeOnSelect
+        includeSelectedOption
+        .openViaButton=${options.selected}
+        .options=${options.dropdownOptions}
+        .selectedOption=${options.selectedOption ?? ''}
+        @optionSelected=${options.onOptionSelected ?? nothing}
+        @click=${options.onDropdownClick ?? nothing}
+      >
+        <span
+          class="dropdown-label"
+          slot="dropdown-label"
+          data-title=${options.displayName}
+        >
+          ${options.displayName}
+        </span>
+      </ia-dropdown>
     `;
     }
     /** Generates a single dropdown option object for the given sort field */
     getDropdownOption(sortField) {
         return {
             id: sortField,
-            selectedHandler: () => {
-                this.selectDropdownSortField(sortField);
-            },
-            label: html `
-        <span class="dropdown-option-label">
-          ${SORT_OPTIONS[sortField].displayName}
-        </span>
+            label: html `
+        <span class="dropdown-option-label">
+          ${SORT_OPTIONS[sortField].displayName}
+        </span>
       `,
         };
     }
@@ -266,48 +263,48 @@ let SortFilterBar = class SortFilterBar extends LitElement {
     /** Template for rendering the three display mode options */
     /** Added data-testid for Playwright testing * */
     get displayOptionTemplate() {
-        return html `
-      <ul>
-        <li>
-          <button
-            id="grid-button"
+        return html `
+      <ul>
+        <li>
+          <button
+            id="grid-button"
             @click=${() => {
             this.displayMode = 'grid';
-        }}
-            class=${this.displayMode === 'grid' ? 'active' : ''}
-            title="Tile view"
-            data-testid="grid-button"
-          >
-            ${tileIcon}
-          </button>
-        </li>
-        <li>
-          <button
-            id="list-detail-button"
+        }}
+            class=${this.displayMode === 'grid' ? 'active' : ''}
+            title="Tile view"
+            data-testid="grid-button"
+          >
+            ${tileIcon}
+          </button>
+        </li>
+        <li>
+          <button
+            id="list-detail-button"
             @click=${() => {
             this.displayMode = 'list-detail';
-        }}
-            class=${this.displayMode === 'list-detail' ? 'active' : ''}
-            title="List view"
-            data-testid="list-detail-button"
-          >
-            ${listIcon}
-          </button>
-        </li>
-        <li>
-          <button
-            id="list-compact-button"
+        }}
+            class=${this.displayMode === 'list-detail' ? 'active' : ''}
+            title="List view"
+            data-testid="list-detail-button"
+          >
+            ${listIcon}
+          </button>
+        </li>
+        <li>
+          <button
+            id="list-compact-button"
             @click=${() => {
             this.displayMode = 'list-compact';
-        }}
-            class=${this.displayMode === 'list-compact' ? 'active' : ''}
-            title="Compact list view"
-            data-testid="list-compact-button"
-          >
-            ${compactIcon}
-          </button>
-        </li>
-      </ul>
+        }}
+            class=${this.displayMode === 'list-compact' ? 'active' : ''}
+            title="Compact list view"
+            data-testid="list-compact-button"
+          >
+            ${compactIcon}
+          </button>
+        </li>
+      </ul>
     `;
     }
     /**
@@ -315,12 +312,12 @@ let SortFilterBar = class SortFilterBar extends LitElement {
      * dropdown menu while it is open.
      */
     get dropdownBackdrop() {
-        return html `
-      <div
-        id="sort-selector-backdrop"
-        @keyup=${this.closeDropdown}
-        @click=${this.closeDropdown}
-      ></div>
+        return html `
+      <div
+        id="sort-selector-backdrop"
+        @keyup=${this.closeDropdown}
+        @click=${this.closeDropdown}
+      ></div>
     `;
     }
     /** Closes the sorting dropdown component's menus */
@@ -331,11 +328,6 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         this.sortOptionsDropdown.open = false;
         this.sortOptionsDropdown.classList.remove('open');
     }
-    selectDropdownSortField(sortField) {
-        // When a dropdown sort option is selected, we additionally need to clear the backdrop
-        this.dropdownBackdropVisible = false;
-        this.setSelectedSort(sortField);
-    }
     setSortDirection(sortDirection) {
         this.sortDirection = sortDirection;
         this.emitSortChangedEvent();
@@ -389,19 +381,19 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         return SORT_OPTIONS[this.finalizedSortField].canSetDirection;
     }
     get titleSelectorBar() {
-        return html ` <alpha-bar
-      .selectedLetter=${this.selectedTitleFilter}
-      .letterCounts=${this.prefixFilterCountMap?.title}
-      ariaLandmarkLabel="Filter by title letter"
-      @letterChanged=${this.titleLetterChanged}
+        return html ` <alpha-bar
+      .selectedLetter=${this.selectedTitleFilter}
+      .letterCounts=${this.prefixFilterCountMap?.title}
+      ariaLandmarkLabel="Filter by title letter"
+      @letterChanged=${this.titleLetterChanged}
     ></alpha-bar>`;
     }
     get creatorSelectorBar() {
-        return html ` <alpha-bar
-      .selectedLetter=${this.selectedCreatorFilter}
-      .letterCounts=${this.prefixFilterCountMap?.creator}
-      ariaLandmarkLabel="Filter by creator letter"
-      @letterChanged=${this.creatorLetterChanged}
+        return html ` <alpha-bar
+      .selectedLetter=${this.selectedCreatorFilter}
+      .letterCounts=${this.prefixFilterCountMap?.creator}
+      ariaLandmarkLabel="Filter by creator letter"
+      @letterChanged=${this.creatorLetterChanged}
     ></alpha-bar>`;
     }
     titleLetterChanged(e) {
@@ -443,166 +435,166 @@ let SortFilterBar = class SortFilterBar extends LitElement {
         const disabledIconColor = css `#bbbbbb`;
         return [
             srOnlyStyle,
-            css `
-        #container {
-          position: relative;
-        }
-
-        #sort-bar {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          padding-bottom: 1px;
-          border-bottom: 1px solid #2c2c2c;
-          font-size: 1.4rem;
-        }
-
-        #sort-options {
-          display: flex;
-          align-items: center;
-          flex-grow: 1;
-        }
-
-        ul {
-          list-style: none;
-          display: flex;
-          align-items: center;
-          margin: 0;
-          padding: 0;
-        }
-
-        li {
-          padding: 0;
-        }
-
-        .sort-by-text {
-          margin-right: 5px;
-          font-weight: bold;
-          white-space: nowrap;
-        }
-
-        .sort-direction-container {
-          display: flex;
-          align-self: stretch;
-          flex: 0;
-          margin: 0 3px;
-        }
-
-        .sort-direction-selector {
-          display: flex;
-          justify-content: center;
-          width: 30px;
-          margin: 0 5px 0 0;
-          padding: 7px 8px;
-          max-height: fit-content;
-          border-radius: 5px;
-          background: white;
-          border: 1px solid rgb(25, 72, 128);
-          appearance: none;
-          cursor: pointer;
-        }
-
-        .sort-direction-selector:disabled {
-          cursor: not-allowed;
-          border-color: ${disabledIconColor};
-        }
-
-        .sort-direction-icon {
-          display: flex;
-          align-items: center;
-          background: none;
-          color: inherit;
-          border: none;
-          padding: 0;
-          outline: inherit;
-          width: 12px;
-          height: 12px;
-        }
-
-        .sort-direction-icon > svg {
-          flex: 1;
-        }
-
-        #sort-selector-container {
-          flex: 1;
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-        }
-
-        #sort-dropdown-container {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-        }
-
-        #sort-selector-backdrop {
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100vw;
-          height: 100vh;
-          z-index: 1;
-          background-color: transparent;
-        }
-
-        #display-style-selector {
-          flex: 0;
-        }
-
-        #display-style-selector button {
-          background: none;
-          color: inherit;
-          border: none;
-          appearance: none;
-          cursor: pointer;
-          -webkit-appearance: none;
-          fill: ${disabledIconColor};
-        }
-
-        #display-style-selector button.active {
-          fill: var(--ia-theme-primary-text-color, #2c2c2c);
-        }
-
-        #display-style-selector button svg {
-          width: 24px;
-          height: 24px;
-        }
-
-        ia-dropdown {
-          --dropdownTextColor: white;
-          --dropdownOffsetTop: 0;
-          --dropdownBorderTopWidth: 0;
-          --dropdownBorderTopLeftRadius: 0;
-          --dropdownBorderTopRightRadius: 0;
-          --dropdownWhiteSpace: nowrap;
-          --dropdownListZIndex: 2;
-          --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
-          --dropdownSelectedTextColor: white;
-          --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
-          --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
-          --caretHeight: 9px;
-          --caretWidth: 12px;
-          --caretPadding: 0 5px 0 0;
-        }
-        ia-dropdown.selected .dropdown-label {
-          font-weight: bold;
-        }
-        ia-dropdown.open {
-          z-index: 2;
-        }
-
-        .dropdown-label {
-          display: inline-block;
-          height: 100%;
-          padding-left: 5px;
-          font-size: 1.4rem;
-          font-family: var(--ia-theme-base-font-family);
-          line-height: 2;
-          color: var(--ia-theme-primary-text-color, #2c2c2c);
-          white-space: nowrap;
-          user-select: none;
-        }
+            css `
+        #container {
+          position: relative;
+        }
+
+        #sort-bar {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          padding-bottom: 1px;
+          border-bottom: 1px solid #2c2c2c;
+          font-size: 1.4rem;
+        }
+
+        #sort-options {
+          display: flex;
+          align-items: center;
+          flex-grow: 1;
+        }
+
+        ul {
+          list-style: none;
+          display: flex;
+          align-items: center;
+          margin: 0;
+          padding: 0;
+        }
+
+        li {
+          padding: 0;
+        }
+
+        .sort-by-text {
+          margin-right: 5px;
+          font-weight: bold;
+          white-space: nowrap;
+        }
+
+        .sort-direction-container {
+          display: flex;
+          align-self: stretch;
+          flex: 0;
+          margin: 0 3px;
+        }
+
+        .sort-direction-selector {
+          display: flex;
+          justify-content: center;
+          width: 30px;
+          margin: 0 5px 0 0;
+          padding: 7px 8px;
+          max-height: fit-content;
+          border-radius: 5px;
+          background: white;
+          border: 1px solid rgb(25, 72, 128);
+          appearance: none;
+          cursor: pointer;
+        }
+
+        .sort-direction-selector:disabled {
+          cursor: not-allowed;
+          border-color: ${disabledIconColor};
+        }
+
+        .sort-direction-icon {
+          display: flex;
+          align-items: center;
+          background: none;
+          color: inherit;
+          border: none;
+          padding: 0;
+          outline: inherit;
+          width: 12px;
+          height: 12px;
+        }
+
+        .sort-direction-icon > svg {
+          flex: 1;
+        }
+
+        #sort-selector-container {
+          flex: 1;
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
+        #sort-dropdown-container {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+        }
+
+        #sort-selector-backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          z-index: 1;
+          background-color: transparent;
+        }
+
+        #display-style-selector {
+          flex: 0;
+        }
+
+        #display-style-selector button {
+          background: none;
+          color: inherit;
+          border: none;
+          appearance: none;
+          cursor: pointer;
+          -webkit-appearance: none;
+          fill: ${disabledIconColor};
+        }
+
+        #display-style-selector button.active {
+          fill: var(--ia-theme-primary-text-color, #2c2c2c);
+        }
+
+        #display-style-selector button svg {
+          width: 24px;
+          height: 24px;
+        }
+
+        ia-dropdown {
+          --dropdownTextColor: white;
+          --dropdownOffsetTop: 0;
+          --dropdownBorderTopWidth: 0;
+          --dropdownBorderTopLeftRadius: 0;
+          --dropdownBorderTopRightRadius: 0;
+          --dropdownWhiteSpace: nowrap;
+          --dropdownListZIndex: 2;
+          --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
+          --dropdownSelectedTextColor: white;
+          --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
+          --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
+          --caretHeight: 9px;
+          --caretWidth: 12px;
+          --caretPadding: 0 5px 0 0;
+        }
+        ia-dropdown.selected .dropdown-label {
+          font-weight: bold;
+        }
+        ia-dropdown.open {
+          z-index: 2;
+        }
+
+        .dropdown-label {
+          display: inline-block;
+          height: 100%;
+          padding-left: 5px;
+          font-size: 1.4rem;
+          font-family: var(--ia-theme-base-font-family);
+          line-height: 2;
+          color: var(--ia-theme-primary-text-color, #2c2c2c);
+          white-space: nowrap;
+          user-select: none;
+        }
       `,
         ];
     }