npm - @internetarchive/elements - Versions diffs - 0.2.3-alpha-webdev8378.3 → 0.2.3-alpha-webdev8378.5 - Mend

@internetarchive/elements 0.2.3-alpha-webdev8378.3 → 0.2.3-alpha-webdev8378.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

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

@@ -34,11 +34,6 @@ export declare class IADropdownSearchBar extends LitElement {
      * 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();
     /**
      * The display label for the currently selected category.
      */

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

	@@ -1 +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~~;;;OAGG;IACH,OAAO,KAAK,eAAe,GAK1B;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"}
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"}

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

@@ -61,7 +61,7 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
         closeOnBackdropClick
         openViaButton
         .selectedOption=${this.resolvedCategory}
-        .options=${this.dropdownOptions}
+        .options=${this.categories}
         @optionSelected=${this.handleCategorySelected}
       >
         <span slot="dropdown-label">${this.selectedCategoryLabel}</span>
@@ -107,16 +107,6 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
       </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.
      */
@@ -224,7 +214,7 @@ let IADropdownSearchBar = class IADropdownSearchBar extends LitElement {
       #category-dropdown [slot='dropdown-label'] {
         color: var(--ia-theme-primary-text-color, #2c2c2c);
-        font-size: inherit;
+        font-size: 1.4rem;
         font-family: inherit;
         white-space: nowrap;
       }

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

	@@ -1 +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.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"]}
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 {\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"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/elements",
-  "version": "0.2.3-alpha-webdev8378.3",
+  "version": "0.2.3-alpha-webdev8378.5",
   "description": "A web component library from the Internet Archive.",
   "license": "AGPL-3.0-only",
   "types": "./dist/src/elements/index.d.ts",