@internetarchive/elements 0.2.3-alpha-webdev8378.7 → 0.2.3-alpha-webdev8378.8

package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-dropdown-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrE,OAAO,KAAK,EACV,cAAc,EAEf,MAAM,UAAU,CAAC;AAKlB,OAAO,0CAA0C,CAAC;AAClD,OAAO,8BAA8B,CAAC;AACtC,OAAO,uDAAuD,CAAC;AAU/D,qBACa,mBAAoB,SAAQ,UAAU;IACjD,+CAA+C;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C,+CAA+C;IACpB,UAAU,EAAE,cAAc,EAAE,CAAM;IAE7D,kDAAkD;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,4CAA4C;IAChB,WAAW,SAAiB;IAExD,uCAAuC;IACV,aAAa,UAAS;IAEnD,0EAA0E;IAC7C,YAAY,UAAS;IAElD,8DAA8D;IACjC,OAAO,UAAS;IAG7C,OAAO,CAAC,WAAW,CAAwB;IAE3C,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAexB;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAkB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;IAED;;OAEG;IACH,OAAO,KAAK,qBAAqB,GAGhC;IAED;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAkB9B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B,MAAM,KAAK,MAAM,8BAmHhB;CACF"}
+{"version":3,"file":"ia-dropdown-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAIrE,OAAO,KAAK,EAAE,cAAc,EAAyB,MAAM,UAAU,CAAC;AAKtE,OAAO,0CAA0C,CAAC;AAClD,OAAO,8BAA8B,CAAC;AACtC,OAAO,uDAAuD,CAAC;AAU/D,qBACa,mBAAoB,SAAQ,UAAU;IACjD,+CAA+C;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IAE3C,+CAA+C;IACpB,UAAU,EAAE,cAAc,EAAE,CAAM;IAE7D,kDAAkD;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,4CAA4C;IAChB,WAAW,SAAiB;IAExD,uCAAuC;IACV,aAAa,UAAS;IAEnD,0EAA0E;IAC7C,YAAY,UAAS;IAElD,8DAA8D;IACjC,OAAO,UAAS;IAG7C,OAAO,CAAC,WAAW,CAAwB;IAE3C,8EAA8E;IAC9E,OAAO,KAAK,gBAAgB,GAE3B;IAED,MAAM,IAAI,cAAc;IAexB;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAoB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;IAED;;OAEG;IACH,OAAO,KAAK,qBAAqB,GAGhC;IAED;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAkB9B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B,MAAM,KAAK,MAAM,8BAmHhB;CACF"}

package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js

@@ -33,78 +33,80 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
         return this.selectedCategory ?? this.categories?.[0]?.id ?? '';
     }
     render() {
-        return html `
-      <div id="container" part="container" role="search">
-        <div
-          id="main-bar"
-          part="main-bar"
-          class=${this.hideDropdown ? 'no-dropdown' : nothing}
-        >
-          ${this.hideDropdown ? nothing : this.dropdownTemplate}
-          ${this.textBoxTemplate} ${this.searchButtonTemplate}
-        </div>
-      </div>
+        return html `
+      <div id="container" part="container" role="search">
+        <div
+          id="main-bar"
+          part="main-bar"
+          class=${this.hideDropdown ? 'no-dropdown' : nothing}
+        >
+          ${this.hideDropdown ? nothing : this.dropdownTemplate}
+          ${this.textBoxTemplate} ${this.searchButtonTemplate}
+        </div>
+      </div>
     `;
     }
     /**
      * Template for the category dropdown on the left side of the search bar.
      */
     get dropdownTemplate() {
-        return html `
-      <ia-dropdown
-        id="category-dropdown"
-        part="category-dropdown"
-        displayCaret
-        includeSelectedOption
-        closeOnSelect
-        closeOnEscape
-        closeOnBackdropClick
-        openViaButton
-        .selectedOption=${this.resolvedCategory}
-        .options=${this.categories}
-        @optionSelected=${this.handleCategorySelected}
-      >
-        <span slot="dropdown-label">${this.selectedCategoryLabel}</span>
-      </ia-dropdown>
+        return html `
+      <ia-dropdown
+        id="category-dropdown"
+        part="category-dropdown"
+        displayCaret
+        includeSelectedOption
+        closeOnSelect
+        closeOnEscape
+        closeOnBackdropClick
+        openViaButton
+        .selectedOption=${this.resolvedCategory}
+        .options=${this.categories}
+        @optionSelected=${this.handleCategorySelected}
+      >
+        <span slot="dropdown-label" part="category-dropdown-label"
+          >${this.selectedCategoryLabel}</span
+        >
+      </ia-dropdown>
     `;
     }
     /**
      * Template for the main text entry box of the search bar.
      */
     get textBoxTemplate() {
-        return html `
-      <ia-clearable-text-input
-        id="search-input"
-        part="search-input"
-        .value=${this.spacedQuery}
-        placeholder=${this.placeholder}
-        clearButtonScreenReaderLabel=${msg('Clear search query')}
-        screenReaderLabel=${msg('Search the Archive. Filters and Advanced Search available below.')}
-        @clear=${this.searchFieldCleared}
-        @submit=${this.handleSubmit}
-      ></ia-clearable-text-input>
+        return html `
+      <ia-clearable-text-input
+        id="search-input"
+        part="search-input"
+        .value=${this.spacedQuery}
+        placeholder=${this.placeholder}
+        clearButtonScreenReaderLabel=${msg('Clear search query')}
+        screenReaderLabel=${msg('Search the Archive. Filters and Advanced Search available below.')}
+        @clear=${this.searchFieldCleared}
+        @submit=${this.handleSubmit}
+      ></ia-clearable-text-input>
     `;
     }
     /**
      * Template for the "magnifying glass" search button to the right of the search bar.
      */
     get searchButtonTemplate() {
-        return html `
-      <button
-        id="search-button"
-        part="search-button"
-        class=${this.loading ? 'loading' : nothing}
-        type="button"
-        aria-label=${msg('Search')}
-        @click=${this.handleSubmit}
-      >
+        return html `
+      <button
+        id="search-button"
+        part="search-button"
+        class=${this.loading ? 'loading' : nothing}
+        type="button"
+        aria-label=${msg('Search')}
+        @click=${this.handleSubmit}
+      >
         ${this.loading
-            ? html `<ia-status-indicator
-              mode="loading"
-              class="search-button-loading-icon"
+            ? html `<ia-status-indicator
+              mode="loading"
+              class="search-button-loading-icon"
             ></ia-status-indicator>`
-            : html `<img src=${searchIcon} alt="" />`}
-      </button>
+            : html `<img src=${searchIcon} alt="" />`}
+      </button>
     `;
     }
     /**
@@ -163,117 +165,117 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
         }));
     }
     static get styles() {
-        const ownStyles = css `
-      :host {
-        --search-bar-height--: var(--search-bar-height, 30px);
-        --search-bar-width--: var(--search-bar-width, 300px);
-        --search-bar-internal-padding--: var(--padding-sm, 5px);
-        --clear-button-offset--: var(--clear-button-offset, 0);
-      }
-
-      #container {
-        display: inline-block;
-        width: var(--search-bar-width--);
-      }
-
-      #main-bar {
-        display: flex;
-        height: var(--search-bar-height--, 30px);
-        flex: 1;
-      }
-
-      #category-dropdown {
-        display: flex;
-        flex-shrink: 0;
-        height: 100%;
-        box-sizing: border-box;
-
-        background-color: #f5f5f7;
-        border: 1px solid #999;
-        border-radius: 5px 0 0 5px;
-
-        --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);
-        --dropdownBgColor: #2c2c2c;
-        --dropdownTextColor: #fff;
-        --dropdownBorderColor: #ddd;
-        --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
-        --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
-        --dropdownHoverTextColor: #fff;
-        --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
-        --dropdownSelectedTextColor: #fff;
-        --dropdownWhiteSpace: nowrap;
-        --dropdownOffsetTop: 2px;
-        --caretHeight: 8px;
-        --caretWidth: 12px;
-        --caretPadding: 0 0 0 5px;
-        --dropdownFontSize: inherit;
-        --dropdownBorderRadius: 4px;
-        --buttonSlotPaddingRight: 0;
-        --dropdownTextAlign: left;
-      }
-
-      #category-dropdown [slot='dropdown-label'] {
-        color: var(--ia-theme-primary-text-color, #2c2c2c);
-        font-size: 1.4rem;
-        font-family: inherit;
-        white-space: nowrap;
-      }
-
-      .no-dropdown #search-input {
-        border-left: 1px solid #999;
-        border-radius: 5px 0 0 5px;
-        overflow: hidden;
-      }
-
-      #search-input {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border-top: 1px solid #999;
-        border-bottom: 1px solid #999;
-        font-size: inherit;
-
-        --input-height: calc(var(--search-bar-height--) - 2px);
-        --input-padding: 0 var(--search-bar-internal-padding--, 5px);
-        --input-background-color: var(
-          --ia-theme-secondary-background-color,
-          #fff
-        );
-        --input-border-radius: 0;
-        --input-border-width: 0;
-        --input-box-shadow: none;
-        --input-focused-box-shadow: none;
-        --input-font-size: auto;
-        --clear-button-top: var(--clear-button-offset--, 0);
-        --clear-button-right: 2px;
-      }
-
-      #search-button {
-        appearance: none;
-        box-sizing: border-box;
-        border-radius: 0 5px 5px 0;
-        background-color: var(--ia-theme-secondary-background-color, #fff);
-        border: 1px solid #999;
-        border-left: 0;
-        padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;
-        min-width: 30px;
-        height: 100%;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-      }
-
-      #search-button img {
-        width: 18px;
-        height: 18px;
-      }
-
-      .search-button-loading-icon {
-        --icon-width: 20px;
-        margin-top: 2px;
-      }
+        const ownStyles = css `
+      :host {
+        --search-bar-height--: var(--search-bar-height, 30px);
+        --search-bar-width--: var(--search-bar-width, 300px);
+        --search-bar-internal-padding--: var(--padding-sm, 5px);
+        --clear-button-offset--: var(--clear-button-offset, 0);
+      }
+
+      #container {
+        display: inline-block;
+        width: var(--search-bar-width--);
+      }
+
+      #main-bar {
+        display: flex;
+        height: var(--search-bar-height--, 30px);
+        flex: 1;
+      }
+
+      #category-dropdown {
+        display: flex;
+        flex-shrink: 0;
+        height: 100%;
+        box-sizing: border-box;
+
+        background-color: #f5f5f7;
+        border: 1px solid #999;
+        border-radius: 5px 0 0 5px;
+
+        --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);
+        --dropdownBgColor: #2c2c2c;
+        --dropdownTextColor: #fff;
+        --dropdownBorderColor: #ddd;
+        --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
+        --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
+        --dropdownHoverTextColor: #fff;
+        --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
+        --dropdownSelectedTextColor: #fff;
+        --dropdownWhiteSpace: nowrap;
+        --dropdownOffsetTop: 2px;
+        --caretHeight: 8px;
+        --caretWidth: 12px;
+        --caretPadding: 0 0 0 5px;
+        --dropdownFontSize: inherit;
+        --dropdownBorderRadius: 4px;
+        --buttonSlotPaddingRight: 0;
+        --dropdownTextAlign: left;
+      }
+
+      #category-dropdown [slot='dropdown-label'] {
+        color: var(--ia-theme-primary-text-color, #2c2c2c);
+        font-size: 1.4rem;
+        font-family: inherit;
+        white-space: nowrap;
+      }
+
+      .no-dropdown #search-input {
+        border-left: 1px solid #999;
+        border-radius: 5px 0 0 5px;
+        overflow: hidden;
+      }
+
+      #search-input {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border-top: 1px solid #999;
+        border-bottom: 1px solid #999;
+        font-size: inherit;
+
+        --input-height: calc(var(--search-bar-height--) - 2px);
+        --input-padding: 0 var(--search-bar-internal-padding--, 5px);
+        --input-background-color: var(
+          --ia-theme-secondary-background-color,
+          #fff
+        );
+        --input-border-radius: 0;
+        --input-border-width: 0;
+        --input-box-shadow: none;
+        --input-focused-box-shadow: none;
+        --input-font-size: auto;
+        --clear-button-top: var(--clear-button-offset--, 0);
+        --clear-button-right: 2px;
+      }
+
+      #search-button {
+        appearance: none;
+        box-sizing: border-box;
+        border-radius: 0 5px 5px 0;
+        background-color: var(--ia-theme-secondary-background-color, #fff);
+        border: 1px solid #999;
+        border-left: 0;
+        padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;
+        min-width: 30px;
+        height: 100%;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      #search-button img {
+        width: 18px;
+        height: 18px;
+      }
+
+      .search-button-loading-icon {
+        --icon-width: 20px;
+        margin-top: 2px;
+      }
     `;
         return [themeStyles, ownStyles];
     }

package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-dropdown-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\r\nimport { css, html, LitElement, nothing, TemplateResult } from 'lit';\r\nimport { customElement, property, query } from 'lit/decorators.js';\r\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\r\nimport type { optionInterface } from '@internetarchive/ia-dropdown';\r\nimport type {\r\n  SearchCategory,\r\n  SearchRequestedDetail,\r\n} from './models';\r\n\r\nimport themeStyles from '@src/themes/theme-styles';\r\nimport searchIcon from './search.svg';\r\n\r\nimport '@internetarchive/ia-clearable-text-input';\r\nimport '@internetarchive/ia-dropdown';\r\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\r\n\r\n/**\r\n * Event names emitted by this component\r\n */\r\nconst Events = {\r\n  CategoryChanged: 'categoryChanged',\r\n  SearchRequested: 'searchRequested',\r\n};\r\n\r\n@customElement('ia-dropdown-search-bar')\r\nexport class IADropdownSearchBar extends LitElement {\r\n  /** The query that appears in the search bar */\r\n  @property({ type: String }) query?: string;\r\n\r\n  /** Dropdown menu options (tab IDs + labels) */\r\n  @property({ type: Array }) categories: SearchCategory[] = [];\r\n\r\n  /** The currently selected dropdown category ID */\r\n  @property({ type: String }) selectedCategory?: string;\r\n\r\n  /** Placeholder text for the search input */\r\n  @property({ type: String }) placeholder = msg('Search');\r\n\r\n  /** Whether to use the mobile layout */\r\n  @property({ type: Boolean }) useMobileView = false;\r\n\r\n  /** Whether to hide the category dropdown to the left of the search bar */\r\n  @property({ type: Boolean }) hideDropdown = false;\r\n\r\n  /** Whether the search button should show its loading state */\r\n  @property({ type: Boolean }) loading = false;\r\n\r\n  @query('#search-input')\r\n  private searchInput!: IaClearableTextInput;\r\n\r\n  /** The effective selected category, falling back to the first in the list. */\r\n  private get resolvedCategory(): string {\r\n    return this.selectedCategory ?? this.categories?.[0]?.id ?? '';\r\n  }\r\n\r\n  render(): TemplateResult {\r\n    return html`\r\n      <div id=\"container\" part=\"container\" role=\"search\">\r\n        <div\r\n          id=\"main-bar\"\r\n          part=\"main-bar\"\r\n          class=${this.hideDropdown ? 'no-dropdown' : nothing}\r\n        >\r\n          ${this.hideDropdown ? nothing : this.dropdownTemplate}\r\n          ${this.textBoxTemplate} ${this.searchButtonTemplate}\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the category dropdown on the left side of the search bar.\r\n   */\r\n  private get dropdownTemplate(): TemplateResult {\r\n    return html`\r\n      <ia-dropdown\r\n        id=\"category-dropdown\"\r\n        part=\"category-dropdown\"\r\n        displayCaret\r\n        includeSelectedOption\r\n        closeOnSelect\r\n        closeOnEscape\r\n        closeOnBackdropClick\r\n        openViaButton\r\n        .selectedOption=${this.resolvedCategory}\r\n        .options=${this.categories}\r\n        @optionSelected=${this.handleCategorySelected}\r\n      >\r\n        <span slot=\"dropdown-label\">${this.selectedCategoryLabel}</span>\r\n      </ia-dropdown>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the main text entry box of the search bar.\r\n   */\r\n  private get textBoxTemplate(): TemplateResult {\r\n    return html`\r\n      <ia-clearable-text-input\r\n        id=\"search-input\"\r\n        part=\"search-input\"\r\n        .value=${this.spacedQuery}\r\n        placeholder=${this.placeholder}\r\n        clearButtonScreenReaderLabel=${msg('Clear search query')}\r\n        screenReaderLabel=${msg(\r\n          'Search the Archive. Filters and Advanced Search available below.',\r\n        )}\r\n        @clear=${this.searchFieldCleared}\r\n        @submit=${this.handleSubmit}\r\n      ></ia-clearable-text-input>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the \"magnifying glass\" search button to the right of the search bar.\r\n   */\r\n  private get searchButtonTemplate(): TemplateResult {\r\n    return html`\r\n      <button\r\n        id=\"search-button\"\r\n        part=\"search-button\"\r\n        class=${this.loading ? 'loading' : nothing}\r\n        type=\"button\"\r\n        aria-label=${msg('Search')}\r\n        @click=${this.handleSubmit}\r\n      >\r\n        ${this.loading\r\n          ? html`<ia-status-indicator\r\n              mode=\"loading\"\r\n              class=\"search-button-loading-icon\"\r\n            ></ia-status-indicator>`\r\n          : html`<img src=${searchIcon} alt=\"\" />`}\r\n      </button>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * The display label for the currently selected category.\r\n   */\r\n  private get selectedCategoryLabel(): string | TemplateResult {\r\n    const match = this.categories.find((c) => c.id === this.resolvedCategory);\r\n    return match?.label ?? this.resolvedCategory;\r\n  }\r\n\r\n  /**\r\n   * The current search query with +'s replaced by spaces.\r\n   */\r\n  private get spacedQuery(): string {\r\n    return this.query?.replace(/\\+/g, ' ') ?? '';\r\n  }\r\n\r\n  /**\r\n   * Handler for when the search bar's clear button is pressed.\r\n   */\r\n  private searchFieldCleared(): void {\r\n    if (this.query) {\r\n      this.emitSearchRequested();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Handler for Enter key or search button click.\r\n   */\r\n  private handleSubmit(): void {\r\n    this.emitSearchRequested();\r\n  }\r\n\r\n  /**\r\n   * Handler for when the user selects a category from the dropdown.\r\n   *\r\n   * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\r\n   * pattern). The parent also binds this property and may re-set it on re-render.\r\n   */\r\n  private handleCategorySelected(\r\n    e: CustomEvent<{ option: optionInterface }>,\r\n  ): void {\r\n    const newCategoryId = e.detail.option.id;\r\n    if (newCategoryId === this.resolvedCategory) return;\r\n\r\n    this.selectedCategory = newCategoryId;\r\n\r\n    // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\r\n    setTimeout(() => this.searchInput.focus());\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<string>(Events.CategoryChanged, {\r\n        detail: newCategoryId,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Emits a `searchRequested` event with the current query and category.\r\n   */\r\n  private emitSearchRequested(): void {\r\n    this.dispatchEvent(\r\n      new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\r\n        detail: {\r\n          query: this.searchInput.value,\r\n          category: this.resolvedCategory,\r\n        },\r\n      }),\r\n    );\r\n  }\r\n\r\n  static get styles() {\r\n    const ownStyles = css`\r\n      :host {\r\n        --search-bar-height--: var(--search-bar-height, 30px);\r\n        --search-bar-width--: var(--search-bar-width, 300px);\r\n        --search-bar-internal-padding--: var(--padding-sm, 5px);\r\n        --clear-button-offset--: var(--clear-button-offset, 0);\r\n      }\r\n\r\n      #container {\r\n        display: inline-block;\r\n        width: var(--search-bar-width--);\r\n      }\r\n\r\n      #main-bar {\r\n        display: flex;\r\n        height: var(--search-bar-height--, 30px);\r\n        flex: 1;\r\n      }\r\n\r\n      #category-dropdown {\r\n        display: flex;\r\n        flex-shrink: 0;\r\n        height: 100%;\r\n        box-sizing: border-box;\r\n\r\n        background-color: #f5f5f7;\r\n        border: 1px solid #999;\r\n        border-radius: 5px 0 0 5px;\r\n\r\n        --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\r\n        --dropdownBgColor: #2c2c2c;\r\n        --dropdownTextColor: #fff;\r\n        --dropdownBorderColor: #ddd;\r\n        --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\r\n        --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\r\n        --dropdownHoverTextColor: #fff;\r\n        --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\r\n        --dropdownSelectedTextColor: #fff;\r\n        --dropdownWhiteSpace: nowrap;\r\n        --dropdownOffsetTop: 2px;\r\n        --caretHeight: 8px;\r\n        --caretWidth: 12px;\r\n        --caretPadding: 0 0 0 5px;\r\n        --dropdownFontSize: inherit;\r\n        --dropdownBorderRadius: 4px;\r\n        --buttonSlotPaddingRight: 0;\r\n        --dropdownTextAlign: left;\r\n      }\r\n\r\n      #category-dropdown [slot='dropdown-label'] {\r\n        color: var(--ia-theme-primary-text-color, #2c2c2c);\r\n        font-size: 1.4rem;\r\n        font-family: inherit;\r\n        white-space: nowrap;\r\n      }\r\n\r\n      .no-dropdown #search-input {\r\n        border-left: 1px solid #999;\r\n        border-radius: 5px 0 0 5px;\r\n        overflow: hidden;\r\n      }\r\n\r\n      #search-input {\r\n        width: 100%;\r\n        height: 100%;\r\n        box-sizing: border-box;\r\n        border-top: 1px solid #999;\r\n        border-bottom: 1px solid #999;\r\n        font-size: inherit;\r\n\r\n        --input-height: calc(var(--search-bar-height--) - 2px);\r\n        --input-padding: 0 var(--search-bar-internal-padding--, 5px);\r\n        --input-background-color: var(\r\n          --ia-theme-secondary-background-color,\r\n          #fff\r\n        );\r\n        --input-border-radius: 0;\r\n        --input-border-width: 0;\r\n        --input-box-shadow: none;\r\n        --input-focused-box-shadow: none;\r\n        --input-font-size: auto;\r\n        --clear-button-top: var(--clear-button-offset--, 0);\r\n        --clear-button-right: 2px;\r\n      }\r\n\r\n      #search-button {\r\n        appearance: none;\r\n        box-sizing: border-box;\r\n        border-radius: 0 5px 5px 0;\r\n        background-color: var(--ia-theme-secondary-background-color, #fff);\r\n        border: 1px solid #999;\r\n        border-left: 0;\r\n        padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\r\n        min-width: 30px;\r\n        height: 100%;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        flex-shrink: 0;\r\n      }\r\n\r\n      #search-button img {\r\n        width: 18px;\r\n        height: 18px;\r\n      }\r\n\r\n      .search-button-loading-icon {\r\n        --icon-width: 20px;\r\n        margin-top: 2px;\r\n      }\r\n    `;\r\n\r\n    return [themeStyles, ownStyles];\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"ia-dropdown-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { msg } from '@lit/localize';\nimport { css, html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type { optionInterface } from '@internetarchive/ia-dropdown';\nimport type { SearchCategory, SearchRequestedDetail } from './models';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport searchIcon from './search.svg';\n\nimport '@internetarchive/ia-clearable-text-input';\nimport '@internetarchive/ia-dropdown';\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  CategoryChanged: 'categoryChanged',\n  SearchRequested: 'searchRequested',\n};\n\n@customElement('ia-dropdown-search-bar')\nexport class IADropdownSearchBar extends LitElement {\n  /** The query that appears in the search bar */\n  @property({ type: String }) query?: string;\n\n  /** Dropdown menu options (tab IDs + labels) */\n  @property({ type: Array }) categories: SearchCategory[] = [];\n\n  /** The currently selected dropdown category ID */\n  @property({ type: String }) selectedCategory?: string;\n\n  /** Placeholder text for the search input */\n  @property({ type: String }) placeholder = msg('Search');\n\n  /** Whether to use the mobile layout */\n  @property({ type: Boolean }) useMobileView = false;\n\n  /** Whether to hide the category dropdown to the left of the search bar */\n  @property({ type: Boolean }) hideDropdown = false;\n\n  /** Whether the search button should show its loading state */\n  @property({ type: Boolean }) loading = false;\n\n  @query('#search-input')\n  private searchInput!: IaClearableTextInput;\n\n  /** The effective selected category, falling back to the first in the list. */\n  private get resolvedCategory(): string {\n    return this.selectedCategory ?? this.categories?.[0]?.id ?? '';\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div id=\"container\" part=\"container\" role=\"search\">\n        <div\n          id=\"main-bar\"\n          part=\"main-bar\"\n          class=${this.hideDropdown ? 'no-dropdown' : nothing}\n        >\n          ${this.hideDropdown ? nothing : this.dropdownTemplate}\n          ${this.textBoxTemplate} ${this.searchButtonTemplate}\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * Template for the category dropdown on the left side of the search bar.\n   */\n  private get dropdownTemplate(): TemplateResult {\n    return html`\n      <ia-dropdown\n        id=\"category-dropdown\"\n        part=\"category-dropdown\"\n        displayCaret\n        includeSelectedOption\n        closeOnSelect\n        closeOnEscape\n        closeOnBackdropClick\n        openViaButton\n        .selectedOption=${this.resolvedCategory}\n        .options=${this.categories}\n        @optionSelected=${this.handleCategorySelected}\n      >\n        <span slot=\"dropdown-label\" part=\"category-dropdown-label\"\n          >${this.selectedCategoryLabel}</span\n        >\n      </ia-dropdown>\n    `;\n  }\n\n  /**\n   * Template for the main text entry box of the search bar.\n   */\n  private get textBoxTemplate(): TemplateResult {\n    return html`\n      <ia-clearable-text-input\n        id=\"search-input\"\n        part=\"search-input\"\n        .value=${this.spacedQuery}\n        placeholder=${this.placeholder}\n        clearButtonScreenReaderLabel=${msg('Clear search query')}\n        screenReaderLabel=${msg(\n          'Search the Archive. Filters and Advanced Search available below.',\n        )}\n        @clear=${this.searchFieldCleared}\n        @submit=${this.handleSubmit}\n      ></ia-clearable-text-input>\n    `;\n  }\n\n  /**\n   * Template for the \"magnifying glass\" search button to the right of the search bar.\n   */\n  private get searchButtonTemplate(): TemplateResult {\n    return html`\n      <button\n        id=\"search-button\"\n        part=\"search-button\"\n        class=${this.loading ? 'loading' : nothing}\n        type=\"button\"\n        aria-label=${msg('Search')}\n        @click=${this.handleSubmit}\n      >\n        ${this.loading\n          ? html`<ia-status-indicator\n              mode=\"loading\"\n              class=\"search-button-loading-icon\"\n            ></ia-status-indicator>`\n          : html`<img src=${searchIcon} alt=\"\" />`}\n      </button>\n    `;\n  }\n\n  /**\n   * The display label for the currently selected category.\n   */\n  private get selectedCategoryLabel(): string | TemplateResult {\n    const match = this.categories.find((c) => c.id === this.resolvedCategory);\n    return match?.label ?? this.resolvedCategory;\n  }\n\n  /**\n   * The current search query with +'s replaced by spaces.\n   */\n  private get spacedQuery(): string {\n    return this.query?.replace(/\\+/g, ' ') ?? '';\n  }\n\n  /**\n   * Handler for when the search bar's clear button is pressed.\n   */\n  private searchFieldCleared(): void {\n    if (this.query) {\n      this.emitSearchRequested();\n    }\n  }\n\n  /**\n   * Handler for Enter key or search button click.\n   */\n  private handleSubmit(): void {\n    this.emitSearchRequested();\n  }\n\n  /**\n   * Handler for when the user selects a category from the dropdown.\n   *\n   * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled\n   * pattern). The parent also binds this property and may re-set it on re-render.\n   */\n  private handleCategorySelected(\n    e: CustomEvent<{ option: optionInterface }>,\n  ): void {\n    const newCategoryId = e.detail.option.id;\n    if (newCategoryId === this.resolvedCategory) return;\n\n    this.selectedCategory = newCategoryId;\n\n    // On next tick, focus the text input bar (seemingly fails in Safari without the delay)\n    setTimeout(() => this.searchInput.focus());\n\n    this.dispatchEvent(\n      new CustomEvent<string>(Events.CategoryChanged, {\n        detail: newCategoryId,\n      }),\n    );\n  }\n\n  /**\n   * Emits a `searchRequested` event with the current query and category.\n   */\n  private emitSearchRequested(): void {\n    this.dispatchEvent(\n      new CustomEvent<SearchRequestedDetail>(Events.SearchRequested, {\n        detail: {\n          query: this.searchInput.value,\n          category: this.resolvedCategory,\n        },\n      }),\n    );\n  }\n\n  static get styles() {\n    const ownStyles = css`\n      :host {\n        --search-bar-height--: var(--search-bar-height, 30px);\n        --search-bar-width--: var(--search-bar-width, 300px);\n        --search-bar-internal-padding--: var(--padding-sm, 5px);\n        --clear-button-offset--: var(--clear-button-offset, 0);\n      }\n\n      #container {\n        display: inline-block;\n        width: var(--search-bar-width--);\n      }\n\n      #main-bar {\n        display: flex;\n        height: var(--search-bar-height--, 30px);\n        flex: 1;\n      }\n\n      #category-dropdown {\n        display: flex;\n        flex-shrink: 0;\n        height: 100%;\n        box-sizing: border-box;\n\n        background-color: #f5f5f7;\n        border: 1px solid #999;\n        border-radius: 5px 0 0 5px;\n\n        --dropdownMainButtonPadding: 0 var(--search-bar-internal-padding--, 5px);\n        --dropdownBgColor: #2c2c2c;\n        --dropdownTextColor: #fff;\n        --dropdownBorderColor: #ddd;\n        --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);\n        --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);\n        --dropdownHoverTextColor: #fff;\n        --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);\n        --dropdownSelectedTextColor: #fff;\n        --dropdownWhiteSpace: nowrap;\n        --dropdownOffsetTop: 2px;\n        --caretHeight: 8px;\n        --caretWidth: 12px;\n        --caretPadding: 0 0 0 5px;\n        --dropdownFontSize: inherit;\n        --dropdownBorderRadius: 4px;\n        --buttonSlotPaddingRight: 0;\n        --dropdownTextAlign: left;\n      }\n\n      #category-dropdown [slot='dropdown-label'] {\n        color: var(--ia-theme-primary-text-color, #2c2c2c);\n        font-size: 1.4rem;\n        font-family: inherit;\n        white-space: nowrap;\n      }\n\n      .no-dropdown #search-input {\n        border-left: 1px solid #999;\n        border-radius: 5px 0 0 5px;\n        overflow: hidden;\n      }\n\n      #search-input {\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border-top: 1px solid #999;\n        border-bottom: 1px solid #999;\n        font-size: inherit;\n\n        --input-height: calc(var(--search-bar-height--) - 2px);\n        --input-padding: 0 var(--search-bar-internal-padding--, 5px);\n        --input-background-color: var(\n          --ia-theme-secondary-background-color,\n          #fff\n        );\n        --input-border-radius: 0;\n        --input-border-width: 0;\n        --input-box-shadow: none;\n        --input-focused-box-shadow: none;\n        --input-font-size: auto;\n        --clear-button-top: var(--clear-button-offset--, 0);\n        --clear-button-right: 2px;\n      }\n\n      #search-button {\n        appearance: none;\n        box-sizing: border-box;\n        border-radius: 0 5px 5px 0;\n        background-color: var(--ia-theme-secondary-background-color, #fff);\n        border: 1px solid #999;\n        border-left: 0;\n        padding: 0 var(--search-bar-internal-padding--, 5px) 0 5px;\n        min-width: 30px;\n        height: 100%;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n      }\n\n      #search-button img {\n        width: 18px;\n        height: 18px;\n      }\n\n      .search-button-loading-icon {\n        --icon-width: 20px;\n        margin-top: 2px;\n      }\n    `;\n\n    return [themeStyles, ownStyles];\n  }\n}\n"]}

package/dist/src/elements/ia-dropdown-search-bar/models.d.ts

@@ -1,4 +1,4 @@
-import { TemplateResult } from "lit";
+import { TemplateResult } from 'lit';
 /**
  * A category to include in the dropdown. Consists of an internal `id` string that is
  * emitted on selection, and a human-readable `label` to display in the dropdown.

package/dist/src/elements/ia-dropdown-search-bar/models.js.map

@@ -1 +1 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/models.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from \"lit\";\r\n\r\n/**\r\n * A category to include in the dropdown. Consists of an internal `id` string that is\r\n * emitted on selection, and a human-readable `label` to display in the dropdown.\r\n */\r\nexport type SearchCategory = {\r\n  id: string;\r\n  label: string | TemplateResult;\r\n};\r\n\r\n/**\r\n * Detail object emitted with `searchRequested` events.\r\n */\r\nexport type SearchRequestedDetail = {\r\n  query: string;\r\n  category: string;\r\n};\r\n"]}
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/models.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\n\n/**\n * A category to include in the dropdown. Consists of an internal `id` string that is\n * emitted on selection, and a human-readable `label` to display in the dropdown.\n */\nexport type SearchCategory = {\n  id: string;\n  label: string | TemplateResult;\n};\n\n/**\n * Detail object emitted with `searchRequested` events.\n */\nexport type SearchRequestedDetail = {\n  query: string;\n  category: string;\n};\n"]}

package/dist/src/elements/ia-otp-form/ia-otp-form.js

@@ -28,25 +28,25 @@ let IAOTPForm = class IAOTPForm extends LitElement {
         this.numericOnly = true;
     }
     render() {
-        return html `
-      <div class="input-section">
-        <ia-otp-input
-          .numChars=${this.numPasscodeChars}
-          ?numericOnly=${this.numericOnly}
+        return html `
+      <div class="input-section">
+        <ia-otp-input
+          .numChars=${this.numPasscodeChars}
+          ?numericOnly=${this.numericOnly}
           ?disabled=${this.validationStatus === 'loading' ||
-            this.validationStatus === 'success'}
-        ></ia-otp-input>
-        <ia-status-indicator
-          part="status-indicator"
-          .mode=${this.validationStatus}
-        ></ia-status-indicator>
-      </div>
+            this.validationStatus === 'success'}
+        ></ia-otp-input>
+        <ia-status-indicator
+          part="status-indicator"
+          .mode=${this.validationStatus}
+        ></ia-status-indicator>
+      </div>
       ${this.validationStatus === 'error'
-            ? html `<p class="error-msg">
-            ${msg('The code entered is invalid or expired')}
+            ? html `<p class="error-msg">
+            ${msg('The code entered is invalid or expired')}
           </p>`
-            : nothing}
-      ${this.resendCodeButtonTemplate}
+            : nothing}
+      ${this.resendCodeButtonTemplate}
     `;
     }
     willUpdate(changed) {
@@ -62,19 +62,19 @@ let IAOTPForm = class IAOTPForm extends LitElement {
     /* The button to display to send a new code */
     get resendCodeButtonTemplate() {
         return this.newCodeSending
-            ? html `<span part="new-code-message" class="new-code-msg"
-          >${msg('Emailing...')}</span
+            ? html `<span part="new-code-message" class="new-code-msg"
+          >${msg('Emailing...')}</span
         >`
-            : html `
-          <button
-            class="new-code-btn link"
-            part="new-code-button"
+            : html `
+          <button
+            class="new-code-btn link"
+            part="new-code-button"
             .disabled=${this.validationStatus === 'loading' ||
-                this.validationStatus === 'success'}
-            @click=${this.handleNewCodeRequested}
-          >
-            ${msg('Email me another code')}
-          </button>
+                this.validationStatus === 'success'}
+            @click=${this.handleNewCodeRequested}
+          >
+            ${msg('Email me another code')}
+          </button>
         `;
     }
     /* Emits an event to request the new code */
@@ -88,67 +88,67 @@ let IAOTPForm = class IAOTPForm extends LitElement {
     static get styles() {
         return [
             themeStyles,
-            css `
-        :host {
-          --font-size-standard--: var(--font-size-standard);
-          --font-size-lg--: var(--font-size-lg);
-          --color-success--: var(--color-success);
-          --color-danger--: var(--color-danger);
-          --link-color--: var(--link-color);
-
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .input-section {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: center;
-          gap: 5px;
-        }
-
-        ia-status-indicator {
-          --icon-width: calc(var(--font-size-lg--) * 1.33);
-        }
-
-        .error-msg {
-          margin-top: 10px;
-          font-size: var(--font-size-standard--);
-          color: var(--color-danger--);
-          margin-bottom: -10px;
-        }
-
-        .new-code-btn {
-          font-family: inherit;
-          font-size: var(--font-size-standard--);
-          display: block;
-          width: fit-content;
-          margin-top: 10px;
-          border: 0;
-          padding: 0;
-          appearance: none;
-          background: none;
-          color: var(--link-color--);
-          text-decoration: none;
-          cursor: pointer;
-        }
-
-        .new-code-btn:hover,
-        .new-code-btn:focus {
-          text-decoration: underline;
-        }
-
-        .new-code-msg {
-          margin-top: 10px;
-          font-size: var(--font-size-standard--);
-          color: var(--link-color--);
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
+            css `
+        :host {
+          --font-size-standard--: var(--font-size-standard);
+          --font-size-lg--: var(--font-size-lg);
+          --color-success--: var(--color-success);
+          --color-danger--: var(--color-danger);
+          --link-color--: var(--link-color);
+
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .input-section {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: 5px;
+        }
+
+        ia-status-indicator {
+          --icon-width: calc(var(--font-size-lg--) * 1.33);
+        }
+
+        .error-msg {
+          margin-top: 10px;
+          font-size: var(--font-size-standard--);
+          color: var(--color-danger--);
+          margin-bottom: -10px;
+        }
+
+        .new-code-btn {
+          font-family: inherit;
+          font-size: var(--font-size-standard--);
+          display: block;
+          width: fit-content;
+          margin-top: 10px;
+          border: 0;
+          padding: 0;
+          appearance: none;
+          background: none;
+          color: var(--link-color--);
+          text-decoration: none;
+          cursor: pointer;
+        }
+
+        .new-code-btn:hover,
+        .new-code-btn:focus {
+          text-decoration: underline;
+        }
+
+        .new-code-msg {
+          margin-top: 10px;
+          font-size: var(--font-size-standard--);
+          color: var(--link-color--);
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
       `,
         ];
     }