@internetarchive/elements 0.2.3-alpha-webdev8378.2 → 0.2.3

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

@@ -1,319 +0,0 @@
-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 = {
-    CategoryChanged: 'categoryChanged',
-    SearchRequested: 'searchRequested',
-};
-let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** Dropdown menu options (tab IDs + labels) */
-        this.categories = [];
-        /** 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>
-      </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() {
-        return this.categories.map((cat) => ({
-            id: cat.id,
-            label: html `<span>${cat.label}</span>`,
-        }));
-    }
-    /**
-     * 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, ' ') ?? '';
-    }
-    /**
-     * 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 === 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,
-        }));
-    }
-    /**
-     * 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);
-        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;
-      }
-    `;
-        return [themeStyles, ownStyles];
-    }
-};
-__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, "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 = __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

@@ -1 +0,0 @@
-{"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.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    return this.categories.map((cat) => ({\r\n      id: cat.id,\r\n      label: html`<span>${cat.label}</span>`,\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 {\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: 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\r\n    return [themeStyles, ownStyles];\r\n  }\r\n}\r\n"]}

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

@@ -1,16 +0,0 @@
-/**
- * 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;
-};
-//# sourceMappingURL=models.d.ts.map

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

@@ -1 +0,0 @@
-{"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"}

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

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

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

@@ -1 +0,0 @@
-{"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"]}

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

@@ -1,10 +0,0 @@
-<svg
-  viewBox="0 0 100 100"
-  xmlns="http://www.w3.org/2000/svg">
-  <path
-    class="fill-color"
-    d="m17.0555551 41.3194459c0-12.7430552 10.3541664-23.1027772 23.0847216-23.1027772 12.7166664 0 23.0777773 10.359722 23.0777773 23.1027772 0 12.7361108-10.3611109 23.0986106-23.0777773 23.0986106-12.7305552 0-23.0847216-10.3624998-23.0847216-23.0986106zm-17.24305512 0c0 22.2916661 18.04583292 40.3472213 40.32777672 40.3472213 8.9208332 0 17.145833-2.9319449 23.8194439-7.8527776l24.1513883 24.0777771c1.2125 1.1402778 2.8430555 1.8430556 4.6374999 1.8430556 3.7444443 0 6.7805554-3.0361111 6.7805554-6.7791665 0-2.0652778-.9222222-3.9069444-2.3736111-5.1499999l-23.718055-23.7458328c4.4152777-6.4791665 7.0152776-14.3055552 7.0152776-22.7402772 0-22.2791661-18.0458328-40.34861006-40.312499-40.34861006-22.2819438 0-40.32777672 18.06944396-40.32777672 40.34861006z"
-    fill="#2c2c2c"
-    fill-rule="evenodd"
-  />
-</svg>