@internetarchive/elements 0.2.2 → 0.2.3-alpha-webdev8378.0

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

@@ -0,0 +1,105 @@
+import { LitElement, TemplateResult } from 'lit';
+import type { AdvancedSearchStyle, SearchCategory } from './models.js';
+import '@internetarchive/ia-clearable-text-input';
+import '@internetarchive/ia-dropdown';
+import '../../elements/ia-status-indicator/ia-status-indicator.js';
+export declare class IADropdownSearchBar extends LitElement {
+    /** ID used for the special Advanced Search dropdown option */
+    static readonly ADVANCED_SEARCH_OPTION_ID = "__advanced_search__";
+    /** The query that appears in the search bar */
+    query?: string;
+    /** Dropdown menu options (tab IDs + labels) */
+    categories: SearchCategory[];
+    /** The currently selected dropdown category ID */
+    selectedCategory?: string;
+    /** The base URL for internal navigation within the site */
+    navBaseUrl?: string;
+    /**
+     * Where to display the Advanced Search option:
+     * - `link` (default): as a text link below the search bar
+     * - `dropdown`: as an item at the bottom of the category dropdown
+     * - `none`: hidden entirely
+     */
+    advancedSearchStyle: AdvancedSearchStyle;
+    /** Placeholder text for the search input */
+    placeholder: string;
+    /** Whether to use the mobile layout */
+    useMobileView: boolean;
+    /** Whether to hide the category dropdown to the left of the search bar */
+    hideDropdown: boolean;
+    /** Whether the search button should show its loading state */
+    loading: boolean;
+    private searchInput;
+    /** The effective selected category, falling back to the first in the list. */
+    private get resolvedCategory();
+    render(): TemplateResult;
+    /**
+     * Template for the category dropdown on the left side of the search bar.
+     */
+    private get dropdownTemplate();
+    /**
+     * Template for the main text entry box of the search bar.
+     */
+    private get textBoxTemplate();
+    /**
+     * Template for the "magnifying glass" search button to the right of the search bar.
+     */
+    private get searchButtonTemplate();
+    /**
+     * Converts the `categories` array into the `optionInterface[]` format
+     * expected by `ia-dropdown`.
+     */
+    private get dropdownOptions();
+    /**
+     * Builds the Advanced Search URL using the given query string and the
+     * provided `navBaseUrl`. Returns `undefined` if no `navBaseUrl` is set.
+     */
+    private buildAdvancedSearchUrl;
+    /**
+     * The display label for the currently selected category.
+     */
+    private get selectedCategoryLabel();
+    /**
+     * The current search query with +'s replaced by spaces.
+     */
+    private get spacedQuery();
+    /**
+     * Template for the search links area beneath the search bar
+     * (Advanced Search link and any slotted content).
+     */
+    private get searchLinksTemplate();
+    /**
+     * Template for the "Advanced Search" link, built from `navBaseUrl` and
+     * the current query. Only rendered when `advancedSearchStyle` is `'link'`.
+     */
+    private get advancedSearchTemplate();
+    /**
+     * Handler for when the search bar's clear button is pressed.
+     */
+    private searchFieldCleared;
+    /**
+     * Handler for Enter key or search button click.
+     */
+    private handleSubmit;
+    /**
+     * Handler for when the user selects a category from the dropdown.
+     *
+     * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled
+     * pattern). The parent also binds this property and may re-set it on re-render.
+     */
+    private handleCategorySelected;
+    /**
+     * Navigates the browser to the Advanced Search page with the current query.
+     */
+    private navigateToAdvancedSearch;
+    /**
+     * Handler for clicks on the advanced search link/option
+     */
+    private advancedSearchClicked;
+    /**
+     * Emits a `searchRequested` event with the current query and category.
+     */
+    private emitSearchRequested;
+    static get styles(): import("lit").CSSResult[];
+}
+//# sourceMappingURL=ia-dropdown-search-bar.d.ts.map

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

@@ -0,0 +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,mBAAmB,EACnB,cAAc,EAEf,MAAM,UAAU,CAAC;AAKlB,OAAO,0CAA0C,CAAC;AAClD,OAAO,8BAA8B,CAAC;AACtC,OAAO,uDAAuD,CAAC;AAW/D,qBACa,mBAAoB,SAAQ,UAAU;IACjD,8DAA8D;IAC9D,MAAM,CAAC,QAAQ,CAAC,yBAAyB,yBAAyB;IAElE,+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,2DAA2D;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IAEhD;;;;;OAKG;IACyB,mBAAmB,EAAE,mBAAmB,CAAU;IAE9E,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;IAgBxB;;OAEG;IACH,OAAO,KAAK,gBAAgB,GAkB3B;IAED;;OAEG;IACH,OAAO,KAAK,eAAe,GAe1B;IAED;;OAEG;IACH,OAAO,KAAK,oBAAoB,GAkB/B;IAED;;;OAGG;IACH,OAAO,KAAK,eAAe,GAoB1B;IAED;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAM9B;;OAEG;IACH,OAAO,KAAK,qBAAqB,GAGhC;IAED;;OAEG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED;;;OAGG;IACH,OAAO,KAAK,mBAAmB,GAiB9B;IAED;;;OAGG;IACH,OAAO,KAAK,sBAAsB,GAcjC;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;;;;OAKG;IACH,OAAO,CAAC,sBAAsB;IAwB9B;;OAEG;IACH,OAAO,CAAC,wBAAwB;IAahC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAI7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAW3B,MAAM,KAAK,MAAM,8BA+KhB;CACF"}

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

@@ -0,0 +1,483 @@
+var IADropdownSearchBar_1;
+import { __decorate } from "tslib";
+import { msg } from '@lit/localize';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import themeStyles from '../../themes/theme-styles.js';
+import searchIcon from './search.svg';
+import '@internetarchive/ia-clearable-text-input';
+import '@internetarchive/ia-dropdown';
+import '../../elements/ia-status-indicator/ia-status-indicator.js';
+/**
+ * Event names emitted by this component
+ */
+const Events = {
+    AdvancedSearchClicked: 'advancedSearchClicked',
+    CategoryChanged: 'categoryChanged',
+    SearchRequested: 'searchRequested',
+};
+let IADropdownSearchBar = IADropdownSearchBar_1 = class IADropdownSearchBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Dropdown menu options (tab IDs + labels) */
+        this.categories = [];
+        /**
+         * Where to display the Advanced Search option:
+         * - `link` (default): as a text link below the search bar
+         * - `dropdown`: as an item at the bottom of the category dropdown
+         * - `none`: hidden entirely
+         */
+        this.advancedSearchStyle = 'link';
+        /** Placeholder text for the search input */
+        this.placeholder = msg('Search');
+        /** Whether to use the mobile layout */
+        this.useMobileView = false;
+        /** Whether to hide the category dropdown to the left of the search bar */
+        this.hideDropdown = false;
+        /** Whether the search button should show its loading state */
+        this.loading = false;
+    }
+    /** The effective selected category, falling back to the first in the list. */
+    get resolvedCategory() {
+        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>
+        ${this.searchLinksTemplate}
+      </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.dropdownOptions}
+        @optionSelected=${this.handleCategorySelected}
+      >
+        <span slot="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>
+    `;
+    }
+    /**
+     * 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}
+      >
+        ${this.loading
+            ? html `<ia-status-indicator
+              mode="loading"
+              class="search-button-loading-icon"
+            ></ia-status-indicator>`
+            : html `<img src=${searchIcon} alt="" />`}
+      </button>
+    `;
+    }
+    /**
+     * Converts the `categories` array into the `optionInterface[]` format
+     * expected by `ia-dropdown`.
+     */
+    get dropdownOptions() {
+        const options = this.categories.map((cat) => ({
+            id: cat.id,
+            label: html `<span>${cat.label}</span>`,
+        }));
+        if (this.advancedSearchStyle === 'dropdown' &&
+            this.navBaseUrl !== undefined) {
+            options.push({
+                id: IADropdownSearchBar_1.ADVANCED_SEARCH_OPTION_ID,
+                // Add a separator border above the Advanced Search option
+                label: html `<span style="border-top: 1px solid #999;">
+          ${msg('Go to Advanced Search...')}
+        </span>`,
+            });
+        }
+        return options;
+    }
+    /**
+     * Builds the Advanced Search URL using the given query string and the
+     * provided `navBaseUrl`. Returns `undefined` if no `navBaseUrl` is set.
+     */
+    buildAdvancedSearchUrl(query) {
+        if (this.navBaseUrl === undefined)
+            return undefined;
+        const queryArg = query ? `?q=${encodeURIComponent(query)}` : '';
+        return `${this.navBaseUrl}/advancedsearch.php${queryArg}`;
+    }
+    /**
+     * The display label for the currently selected category.
+     */
+    get selectedCategoryLabel() {
+        const match = this.categories.find((c) => c.id === this.resolvedCategory);
+        return match?.label ?? this.resolvedCategory;
+    }
+    /**
+     * The current search query with +'s replaced by spaces.
+     */
+    get spacedQuery() {
+        return this.query?.replace(/\+/g, ' ') ?? '';
+    }
+    /**
+     * Template for the search links area beneath the search bar
+     * (Advanced Search link and any slotted content).
+     */
+    get searchLinksTemplate() {
+        return html `
+      <div id="search-links-area">
+        <slot name="before-search-links"></slot>
+        <div
+          id="search-links"
+          part="search-links"
+          class=${this.useMobileView ? 'mobile' : nothing}
+        >
+          <slot name="search-links-top"></slot>
+          ${this.advancedSearchTemplate}
+          <div id="search-links-end">
+            <slot name="search-links"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Template for the "Advanced Search" link, built from `navBaseUrl` and
+     * the current query. Only rendered when `advancedSearchStyle` is `'link'`.
+     */
+    get advancedSearchTemplate() {
+        if (this.advancedSearchStyle !== 'link')
+            return nothing;
+        const href = this.buildAdvancedSearchUrl(this.query ?? '');
+        if (!href)
+            return nothing;
+        return html `<a
+      id="advanced-search-link"
+      part="advanced-search-link"
+      href=${href}
+      @click=${this.advancedSearchClicked}
+    >
+      ${msg('Advanced Search')}
+    </a>`;
+    }
+    /**
+     * Handler for when the search bar's clear button is pressed.
+     */
+    searchFieldCleared() {
+        if (this.query) {
+            this.emitSearchRequested();
+        }
+    }
+    /**
+     * Handler for Enter key or search button click.
+     */
+    handleSubmit() {
+        this.emitSearchRequested();
+    }
+    /**
+     * Handler for when the user selects a category from the dropdown.
+     *
+     * Sets `selectedCategory` locally for immediate visual feedback (semi-controlled
+     * pattern). The parent also binds this property and may re-set it on re-render.
+     */
+    handleCategorySelected(e) {
+        const newCategoryId = e.detail.option.id;
+        if (newCategoryId === IADropdownSearchBar_1.ADVANCED_SEARCH_OPTION_ID) {
+            this.navigateToAdvancedSearch();
+            return;
+        }
+        if (newCategoryId === this.resolvedCategory)
+            return;
+        this.selectedCategory = newCategoryId;
+        // On next tick, focus the text input bar (seemingly fails in Safari without the delay)
+        setTimeout(() => this.searchInput.focus());
+        this.dispatchEvent(new CustomEvent(Events.CategoryChanged, {
+            detail: newCategoryId,
+        }));
+    }
+    /**
+     * Navigates the browser to the Advanced Search page with the current query.
+     */
+    navigateToAdvancedSearch() {
+        // Schedule a re-render so ia-dropdown resets its internal selectedOption
+        // back to the real category (in case navigation is delayed or prevented)
+        this.requestUpdate();
+        const query = this.searchInput?.value ?? this.query ?? '';
+        const href = this.buildAdvancedSearchUrl(query);
+        if (!href)
+            return;
+        this.advancedSearchClicked();
+        window.location.href = href;
+    }
+    /**
+     * Handler for clicks on the advanced search link/option
+     */
+    advancedSearchClicked() {
+        this.dispatchEvent(new CustomEvent(Events.AdvancedSearchClicked));
+    }
+    /**
+     * Emits a `searchRequested` event with the current query and category.
+     */
+    emitSearchRequested() {
+        this.dispatchEvent(new CustomEvent(Events.SearchRequested, {
+            detail: {
+                query: this.searchInput.value,
+                category: this.resolvedCategory,
+            },
+        }));
+    }
+    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);
+        margin-bottom: 10px;
+        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: inherit;
+        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;
+      }
+
+      #search-links-area {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        margin-top: 5px;
+        font-size: inherit;
+      }
+
+      #search-links {
+        display: flex;
+        column-gap: 10px;
+        width: 100%;
+      }
+
+      #search-links > a:not(:last-child) {
+        margin-bottom: 2px;
+      }
+
+      #advanced-search-link {
+        margin-left: auto;
+        padding-left: 5px;
+      }
+
+      #search-links-end {
+        display: contents;
+      }
+
+      .mobile #advanced-search-link {
+        margin-left: 0;
+      }
+
+      .mobile #search-links-end {
+        display: flex;
+        margin-left: auto;
+        column-gap: 10px;
+      }
+
+      a:link {
+        text-decoration: none;
+        display: block;
+        flex: 0 1 auto;
+        color: var(--ia-theme-link-color, #4b64ff);
+        white-space: nowrap;
+      }
+
+      a:hover {
+        text-decoration: underline;
+      }
+
+      a:visited {
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+
+      ::slotted(#action-bar-spacing) {
+        --iconLabelGutterWidth: 3px;
+        margin-top: -4px; /* Better icon alignment */
+        height: fit-content;
+      }
+    `;
+        return [themeStyles, ownStyles];
+    }
+};
+/** ID used for the special Advanced Search dropdown option */
+IADropdownSearchBar.ADVANCED_SEARCH_OPTION_ID = '__advanced_search__';
+__decorate([
+    property({ type: String })
+], IADropdownSearchBar.prototype, "query", void 0);
+__decorate([
+    property({ type: Array })
+], IADropdownSearchBar.prototype, "categories", void 0);
+__decorate([
+    property({ type: String })
+], IADropdownSearchBar.prototype, "selectedCategory", void 0);
+__decorate([
+    property({ type: String })
+], IADropdownSearchBar.prototype, "navBaseUrl", void 0);
+__decorate([
+    property({ type: String })
+], IADropdownSearchBar.prototype, "advancedSearchStyle", void 0);
+__decorate([
+    property({ type: String })
+], IADropdownSearchBar.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], IADropdownSearchBar.prototype, "useMobileView", void 0);
+__decorate([
+    property({ type: Boolean })
+], IADropdownSearchBar.prototype, "hideDropdown", void 0);
+__decorate([
+    property({ type: Boolean })
+], IADropdownSearchBar.prototype, "loading", void 0);
+__decorate([
+    query('#search-input')
+], IADropdownSearchBar.prototype, "searchInput", void 0);
+IADropdownSearchBar = IADropdownSearchBar_1 = __decorate([
+    customElement('ia-dropdown-search-bar')
+], IADropdownSearchBar);
+export { IADropdownSearchBar };
+//# sourceMappingURL=ia-dropdown-search-bar.js.map

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

@@ -0,0 +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  AdvancedSearchStyle,\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  AdvancedSearchClicked: 'advancedSearchClicked',\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  /** ID used for the special Advanced Search dropdown option */\r\n  static readonly ADVANCED_SEARCH_OPTION_ID = '__advanced_search__';\r\n\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  /** The base URL for internal navigation within the site */\r\n  @property({ type: String }) navBaseUrl?: string;\r\n\r\n  /**\r\n   * Where to display the Advanced Search option:\r\n   * - `link` (default): as a text link below the search bar\r\n   * - `dropdown`: as an item at the bottom of the category dropdown\r\n   * - `none`: hidden entirely\r\n   */\r\n  @property({ type: String }) advancedSearchStyle: AdvancedSearchStyle = 'link';\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        ${this.searchLinksTemplate}\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.dropdownOptions}\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   * Converts the `categories` array into the `optionInterface[]` format\r\n   * expected by `ia-dropdown`.\r\n   */\r\n  private get dropdownOptions(): optionInterface[] {\r\n    const options: optionInterface[] = this.categories.map((cat) => ({\r\n      id: cat.id,\r\n      label: html`<span>${cat.label}</span>`,\r\n    }));\r\n\r\n    if (\r\n      this.advancedSearchStyle === 'dropdown' &&\r\n      this.navBaseUrl !== undefined\r\n    ) {\r\n      options.push({\r\n        id: IADropdownSearchBar.ADVANCED_SEARCH_OPTION_ID,\r\n        // Add a separator border above the Advanced Search option\r\n        label: html`<span style=\"border-top: 1px solid #999;\">\r\n          ${msg('Go to Advanced Search...')}\r\n        </span>`,\r\n      });\r\n    }\r\n\r\n    return options;\r\n  }\r\n\r\n  /**\r\n   * Builds the Advanced Search URL using the given query string and the\r\n   * provided `navBaseUrl`. Returns `undefined` if no `navBaseUrl` is set.\r\n   */\r\n  private buildAdvancedSearchUrl(query: string): string | undefined {\r\n    if (this.navBaseUrl === undefined) return undefined;\r\n    const queryArg = query ? `?q=${encodeURIComponent(query)}` : '';\r\n    return `${this.navBaseUrl}/advancedsearch.php${queryArg}`;\r\n  }\r\n\r\n  /**\r\n   * The display label for the currently selected category.\r\n   */\r\n  private get selectedCategoryLabel(): string {\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   * Template for the search links area beneath the search bar\r\n   * (Advanced Search link and any slotted content).\r\n   */\r\n  private get searchLinksTemplate(): TemplateResult {\r\n    return html`\r\n      <div id=\"search-links-area\">\r\n        <slot name=\"before-search-links\"></slot>\r\n        <div\r\n          id=\"search-links\"\r\n          part=\"search-links\"\r\n          class=${this.useMobileView ? 'mobile' : nothing}\r\n        >\r\n          <slot name=\"search-links-top\"></slot>\r\n          ${this.advancedSearchTemplate}\r\n          <div id=\"search-links-end\">\r\n            <slot name=\"search-links\"></slot>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Template for the \"Advanced Search\" link, built from `navBaseUrl` and\r\n   * the current query. Only rendered when `advancedSearchStyle` is `'link'`.\r\n   */\r\n  private get advancedSearchTemplate(): TemplateResult | typeof nothing {\r\n    if (this.advancedSearchStyle !== 'link') return nothing;\r\n\r\n    const href = this.buildAdvancedSearchUrl(this.query ?? '');\r\n    if (!href) return nothing;\r\n\r\n    return html`<a\r\n      id=\"advanced-search-link\"\r\n      part=\"advanced-search-link\"\r\n      href=${href}\r\n      @click=${this.advancedSearchClicked}\r\n    >\r\n      ${msg('Advanced Search')}\r\n    </a>`;\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\r\n    if (newCategoryId === IADropdownSearchBar.ADVANCED_SEARCH_OPTION_ID) {\r\n      this.navigateToAdvancedSearch();\r\n      return;\r\n    }\r\n\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   * Navigates the browser to the Advanced Search page with the current query.\r\n   */\r\n  private navigateToAdvancedSearch(): void {\r\n    // Schedule a re-render so ia-dropdown resets its internal selectedOption\r\n    // back to the real category (in case navigation is delayed or prevented)\r\n    this.requestUpdate();\r\n\r\n    const query = this.searchInput?.value ?? this.query ?? '';\r\n    const href = this.buildAdvancedSearchUrl(query);\r\n    if (!href) return;\r\n\r\n    this.advancedSearchClicked();\r\n    window.location.href = href;\r\n  }\r\n\r\n  /**\r\n   * Handler for clicks on the advanced search link/option\r\n   */\r\n  private advancedSearchClicked(): void {\r\n    this.dispatchEvent(new CustomEvent(Events.AdvancedSearchClicked));\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        margin-bottom: 10px;\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: inherit;\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      #search-links-area {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        justify-content: space-between;\r\n        margin-top: 5px;\r\n        font-size: inherit;\r\n      }\r\n\r\n      #search-links {\r\n        display: flex;\r\n        column-gap: 10px;\r\n        width: 100%;\r\n      }\r\n\r\n      #search-links > a:not(:last-child) {\r\n        margin-bottom: 2px;\r\n      }\r\n\r\n      #advanced-search-link {\r\n        margin-left: auto;\r\n        padding-left: 5px;\r\n      }\r\n\r\n      #search-links-end {\r\n        display: contents;\r\n      }\r\n\r\n      .mobile #advanced-search-link {\r\n        margin-left: 0;\r\n      }\r\n\r\n      .mobile #search-links-end {\r\n        display: flex;\r\n        margin-left: auto;\r\n        column-gap: 10px;\r\n      }\r\n\r\n      a:link {\r\n        text-decoration: none;\r\n        display: block;\r\n        flex: 0 1 auto;\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n        white-space: nowrap;\r\n      }\r\n\r\n      a:hover {\r\n        text-decoration: underline;\r\n      }\r\n\r\n      a:visited {\r\n        color: var(--ia-theme-link-color, #4b64ff);\r\n      }\r\n\r\n      ::slotted(#action-bar-spacing) {\r\n        --iconLabelGutterWidth: 3px;\r\n        margin-top: -4px; /* Better icon alignment */\r\n        height: fit-content;\r\n      }\r\n    `;\r\n\r\n    return [themeStyles, ownStyles];\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,23 @@
+/**
+ * A category to include in the dropdown. Consists of an internal `id` string that is
+ * emitted on selection, an a human-readable `label` to display in the dropdown.
+ */
+export type SearchCategory = {
+    id: string;
+    label: string;
+};
+/**
+ * Detail object emitted with `searchRequested` events.
+ */
+export type SearchRequestedDetail = {
+    query: string;
+    category: string;
+};
+/**
+ * Options for where to display Advanced Search:
+ * - `link` (default): as a text link below the search bar
+ * - `dropdown`: as an item at the bottom of the category dropdown
+ * - `none`: hidden entirely
+ */
+export type AdvancedSearchStyle = 'link' | 'dropdown' | 'none';
+//# sourceMappingURL=models.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/models.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=models.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-dropdown-search-bar/models.ts"],"names":[],"mappings":"","sourcesContent":["/**\r\n * A category to include in the dropdown. Consists of an internal `id` string that is\r\n * emitted on selection, an a human-readable `label` to display in the dropdown.\r\n */\r\nexport type SearchCategory = {\r\n  id: string;\r\n  label: string;\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\r\n/**\r\n * Options for where to display Advanced Search:\r\n * - `link` (default): as a text link below the search bar\r\n * - `dropdown`: as an item at the bottom of the category dropdown\r\n * - `none`: hidden entirely\r\n */\r\nexport type AdvancedSearchStyle = 'link' | 'dropdown' | 'none';\r\n"]}