npm - @internetarchive/elements - Versions diffs - 0.3.0 → 0.4.1 - Mend

@internetarchive/elements 0.3.0 → 0.4.1

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 (109) hide show

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';\nimport {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type { IaDropdown, 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 @query('#category-dropdown')\n private categoryDropdown?: IaDropdown;\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 willUpdate(changed: PropertyValues) {\n // Push new categories down to the inner dropdown immediately, since ia-dropdown\n // mutates its own selected option on interaction which can cause Lit's\n // property-binding diff to miss the change in certain cases.\n if (changed.has('selectedCategory') \|\| changed.has('categories')) {\n const resolved = this.resolvedCategory;\n if (\n this.categoryDropdown &&\n this.categoryDropdown.selectedOption !== resolved\n ) {\n this.categoryDropdown.selectedOption = resolved;\n }\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 / While it would be nice to fall back to ia-dropdown's own default here by making this var\n fall back to \"initial\", older Safari versions don't support that keyword in a var() fallback.\n So instead we just restate ia-dropdown's current default 2 here as the fallback. */\n --dropdown-z-index--: var(--dropdown-z-index, 2);\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 --dropdownListZIndex: var(--dropdown-z-index--);\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"]}
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';\nimport {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport type { IaClearableTextInput } from '@internetarchive/ia-clearable-text-input';\nimport type { IaDropdown, 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 @query('#category-dropdown')\n private categoryDropdown?: IaDropdown;\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 willUpdate(changed: PropertyValues) {\n // Push new categories down to the inner dropdown immediately, since ia-dropdown\n // mutates its own selected option on interaction which can cause Lit's\n // property-binding diff to miss the change in certain cases.\n if (changed.has('selectedCategory') \|\| changed.has('categories')) {\n const resolved = this.resolvedCategory;\n if (\n this.categoryDropdown &&\n this.categoryDropdown.selectedOption !== resolved\n ) {\n this.categoryDropdown.selectedOption = resolved;\n }\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 / While it would be nice to fall back to ia-dropdown's own default here by making this var\n fall back to \"initial\", older Safari versions don't support that keyword in a var() fallback.\n So instead we just restate ia-dropdown's current default 2 here as the fallback. */\n --dropdown-z-index--: var(--dropdown-z-index, 2);\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 --dropdownListZIndex: var(--dropdown-z-index--);\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-expandable-search-bar/ia-expandable-search-bar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-expandable-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-expandable-search-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;~~AAIb~~,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAMjD,OAAO,mBAAmB,CAAC;AAY3B;;GAEG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,+CAA+C;IAClB,MAAM,UAAS;IAE5C,yEAAyE;IAC5C,eAAe,UAAS;IAErD,8BAA8B;IACF,UAAU,SAAM;IAE5C,wDAAwD;IAC7B,aAAa,EAAE,gBAAgB,EAAE,CAAM;IAElE,qCAAqC;IACT,WAAW,SAAiB;IAExD,wCAAwC;IACZ,KAAK,SAAiB;IAE1B,OAAO,CAAC,WAAW,CAAC,CAA0B;IAEtE,MAAM,IAAI,cAAc;IAuDxB;;;;;;;;OAQG;IACH,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMhD;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IAWnB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB,CAAS;IAErC,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,mBAAmB;IAqB3B,OAAO,CAAC,gBAAgB;IAIxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAsKlC;CACF"}
1	+ {"version":3,"file":"ia-expandable-search-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-expandable-search-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAMjD,OAAO,mBAAmB,CAAC;AAY3B;;GAEG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,+CAA+C;IAClB,MAAM,UAAS;IAE5C,yEAAyE;IAC5C,eAAe,UAAS;IAErD,8BAA8B;IACF,UAAU,SAAM;IAE5C,wDAAwD;IAC7B,aAAa,EAAE,gBAAgB,EAAE,CAAM;IAElE,qCAAqC;IACT,WAAW,SAAiB;IAExD,wCAAwC;IACZ,KAAK,SAAiB;IAE1B,OAAO,CAAC,WAAW,CAAC,CAA0B;IAEtE,MAAM,IAAI,cAAc;IAuDxB;;;;;;;;OAQG;IACH,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMhD;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IAWnB;;;;OAIG;IACH,OAAO,CAAC,oBAAoB,CAAS;IAErC,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,mBAAmB;IAqB3B,OAAO,CAAC,gBAAgB;IAIxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAsKlC;CACF"}

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

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
 import { msg } from '@lit/localize';
 import clearResultsIcon from './assets/clear-results.js';
 import disclosureIcon from './assets/disclosure.js';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-expandable-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-expandable-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n type PropertyValues,\n type TemplateResult,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\n\nimport type { QuickSearchEntry } from './models';\n\nimport clearResultsIcon from './assets/clear-results';\nimport disclosureIcon from './assets/disclosure';\nimport magnifyingGlassIcon from './assets/magnifying-glass';\n\nimport './ia-quick-search';\n\n/*\n Event names emitted by this component\n /\nconst Events = {\n InputChange: 'inputchange',\n EnterKeyPressed: 'enterKeyPressed',\n SearchCleared: 'searchCleared',\n QuickSearchSelected: 'quickSearchSelected',\n};\n\n/\n A search bar with a quick search list that expands underneath it.\n /\n@customElement('ia-expandable-search-bar')\nexport class IAExpandableSearchBar extends LitElement {\n /* Whether the quick search list is showing /\n @property({ type: Boolean }) isOpen = false;\n\n /* Whether to offer the disclosure button that opens the quick search /\n @property({ type: Boolean }) showsDisclosure = false;\n\n /* The current search text /\n @property({ type: String }) searchTerm = '';\n\n /* The suggestions to offer in the quick search list /\n @property({ type: Array }) quickSearches: QuickSearchEntry[] = [];\n\n /* Placeholder text for the input /\n @property({ type: String }) placeholder = msg('Search');\n\n /* The accessible name for the input /\n @property({ type: String }) label = msg('Search');\n\n @query('#search-input') private searchInput?: HTMLInputElement \| null;\n\n render(): TemplateResult {\n return html`\n <div\n class=\"container ${this.isOpen ? 'is-open' : ''} ${this.showsDisclosure\n ? 'shows-disclosure'\n : ''}\"\n >\n <div class=\"search-bar ${this.searchTerm === '' ? '' : 'is-searching'}\">\n <div class=\"magnifier-container endcap\">${magnifyingGlassIcon}</div>\n\n <input\n id=\"search-input\"\n type=\"text\"\n aria-label=${this.label}\n placeholder=${this.placeholder}\n .value=${this.searchTerm}\n @input=${this.handleInput}\n @keydown=${this.handleKeyDown}\n @keyup=${this.handleKeyUp}\n />\n\n <div class=\"clear-search-container endcap\">\n <button\n id=\"clear-search-button\"\n type=\"button\"\n aria-label=${msg('Clear search')}\n @click=${this.clearSearch}\n >\n ${clearResultsIcon}\n </button>\n </div>\n\n <div class=\"disclosure-container endcap\">\n <button\n id=\"disclosure-button\"\n type=\"button\"\n aria-label=${msg('Toggle quick search')}\n aria-expanded=${this.isOpen}\n @click=${this.toggleDisclosure}\n >\n ${disclosureIcon}\n </button>\n </div>\n </div>\n\n <div class=\"quick-search\">\n <ia-quick-search\n .quickSearches=${this.quickSearches}\n @searchTermSelected=${this.quickSearchSelected}\n ></ia-quick-search>\n </div>\n </div>\n `;\n }\n\n /\n Forces the field to match `searchTerm`.\n \n Lit's property binding dirty-checks against the value it last committed\n * rather than against the DOM. A consumer that normalises `searchTerm` in\n * its own `inputchange` handler can land back on that committed value, so\n * the binding sees nothing to do and the field keeps whatever the listener\n * typed. Writing it here keeps the two in step.\n /\n updated(changedProperties: PropertyValues): void {\n if (!changedProperties.has('searchTerm') \|\| !this.searchInput) return;\n\n this.searchInput.value = this.searchTerm;\n }\n\n /\n Tracks the input's value.\n \n Bound to `input` rather than `keyup` so that a paste from the mouse menu,\n * autofill, a drag-and-drop and an IME composition all register, and so that\n * arrow keys don't announce a change that never happened.\n /\n private handleInput(): void {\n if (!this.searchInput) return;\n\n this.searchTerm = this.searchInput.value;\n this.dispatchEvent(\n new CustomEvent<{ value: string }>(Events.InputChange, {\n detail: { value: this.searchTerm },\n }),\n );\n }\n\n /\n Whether the Enter now coming up is the same one that went down on the\n * input. Selecting a quick search with the keyboard hands focus back to the\n * input mid-keystroke, so its keyup lands here without a matching keydown.\n /\n private enterWentDownOnInput = false;\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === 'Enter') this.enterWentDownOnInput = true;\n }\n\n private handleKeyUp(e: KeyboardEvent): void {\n if (e.key !== 'Enter') return;\n if (!this.enterWentDownOnInput) return;\n this.enterWentDownOnInput = false;\n\n this.dispatchEvent(\n new CustomEvent<{ value: string }>(Events.EnterKeyPressed, {\n detail: { value: this.searchTerm },\n }),\n );\n }\n\n private clearSearch(): void {\n this.searchTerm = '';\n this.searchInput?.focus();\n this.dispatchEvent(new Event(Events.SearchCleared));\n }\n\n private quickSearchSelected(\n e: CustomEvent<{ searchEntry: QuickSearchEntry }>,\n ): void {\n const quickSearchEntry = e.detail.searchEntry;\n this.searchTerm = quickSearchEntry.displayText;\n\n this.dispatchEvent(\n new CustomEvent<{ quickSearchEntry: QuickSearchEntry }>(\n Events.QuickSearchSelected,\n { detail: { quickSearchEntry } },\n ),\n );\n\n // Closing the list hides the entry that was just activated. Focus has to\n // go somewhere first, or the browser drops it to the body and a keyboard\n // user lands back at the top of the page.\n this.enterWentDownOnInput = false;\n this.searchInput?.focus();\n this.isOpen = false;\n }\n\n private toggleDisclosure(): void {\n this.isOpen = !this.isOpen;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n --search-bar-background-color--: var(\n --ia-theme-search-bar-background-color,\n #000\n );\n --search-bar-text-color--: var(--ia-theme-search-bar-text-color, #fff);\n --search-bar-font-size--: var(--ia-theme-search-bar-font-size, 1em);\n --search-bar-border--: var(\n --ia-theme-search-bar-border,\n 1px solid #fff\n );\n --search-bar-min-width--: var(--ia-theme-search-bar-min-width, 5em);\n --search-bar-max-expansion-height--: var(\n --ia-theme-search-bar-max-expansion-height,\n 150px\n );\n --search-bar-clear-disc-color--: var(\n --ia-theme-search-bar-clear-disc-color,\n #fff\n );\n --search-bar-clear-cross-color--: var(\n --ia-theme-search-bar-clear-cross-color,\n #000\n );\n\n color: var(--search-bar-text-color--);\n }\n\n .container {\n position: relative;\n }\n\n .search-bar {\n display: flex;\n justify-content: flex-start;\n }\n\n .endcap {\n display: flex;\n justify-content: center;\n align-items: center;\n height: calc(var(--search-bar-font-size--) 2);\n border: var(--search-bar-border--);\n padding: 0 calc(var(--search-bar-font-size--) / 2);\n }\n\n .endcap svg {\n height: var(--search-bar-font-size--);\n width: var(--search-bar-font-size--);\n }\n\n .clear-disc {\n fill: var(--search-bar-clear-disc-color--);\n }\n\n .clear-cross {\n stroke: var(--search-bar-clear-cross-color--);\n }\n\n .clear-search-container {\n border-left: 0;\n border-radius: 0 var(--search-bar-font-size--)\n var(--search-bar-font-size--) 0;\n }\n\n .search-bar.is-searching .clear-search-container {\n padding: 0 calc(var(--search-bar-font-size--) / 2) 0 0;\n }\n\n .search-bar.is-searching .clear-search-container button {\n display: block;\n }\n\n .clear-search-container button {\n display: none;\n }\n\n .magnifier-container {\n border-radius: var(--search-bar-font-size--) 0 0\n var(--search-bar-font-size--);\n border-right: 0;\n }\n\n .container.is-open .magnifier-container {\n border-radius: var(--search-bar-font-size--) 0 0 0;\n }\n\n .container.shows-disclosure .clear-search-container {\n border-radius: 0;\n border-right: 0;\n }\n\n .disclosure-container {\n border-radius: 0 var(--search-bar-font-size--)\n var(--search-bar-font-size--) 0;\n display: none;\n }\n\n .container.shows-disclosure .disclosure-container {\n display: flex;\n }\n\n .container.is-open .disclosure-container {\n border-radius: 0 var(--search-bar-font-size--) 0 0;\n }\n\n .disclosure-container button {\n border: 0;\n background: none;\n }\n\n #search-input {\n border-top: var(--search-bar-border--);\n border-bottom: var(--search-bar-border--);\n border-left: 0;\n border-right: 0;\n border-radius: 0;\n background-color: var(--search-bar-background-color--);\n color: var(--search-bar-text-color--);\n padding: 0;\n margin: 0;\n font-size: var(--search-bar-font-size--);\n flex: 1 1 auto;\n min-width: var(--search-bar-min-width--);\n }\n\n #search-input:focus {\n outline: none;\n }\n\n .quick-search {\n border-radius: 0 0 var(--search-bar-font-size--)\n var(--search-bar-font-size--);\n display: none;\n position: absolute;\n left: 0;\n right: 0;\n background-color: var(--search-bar-background-color--);\n z-index: 1;\n max-height: var(--search-bar-max-expansion-height--);\n overflow-y: auto;\n scrollbar-width: none;\n padding: 0 calc(var(--search-bar-font-size--) / 2);\n }\n\n .quick-search::-webkit-scrollbar {\n display: none;\n }\n\n .container.is-open.shows-disclosure .quick-search {\n border: var(--search-bar-border--);\n border-top: 0;\n display: block;\n }\n\n button {\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n color: inherit;\n cursor: pointer;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-expandable-search-bar.js","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-expandable-search-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n type PropertyValues,\n type TemplateResult,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg } from '@lit/localize';\n\nimport type { QuickSearchEntry } from './models';\n\nimport clearResultsIcon from './assets/clear-results';\nimport disclosureIcon from './assets/disclosure';\nimport magnifyingGlassIcon from './assets/magnifying-glass';\n\nimport './ia-quick-search';\n\n/*\n Event names emitted by this component\n /\nconst Events = {\n InputChange: 'inputchange',\n EnterKeyPressed: 'enterKeyPressed',\n SearchCleared: 'searchCleared',\n QuickSearchSelected: 'quickSearchSelected',\n};\n\n/\n A search bar with a quick search list that expands underneath it.\n /\n@customElement('ia-expandable-search-bar')\nexport class IAExpandableSearchBar extends LitElement {\n /* Whether the quick search list is showing /\n @property({ type: Boolean }) isOpen = false;\n\n /* Whether to offer the disclosure button that opens the quick search /\n @property({ type: Boolean }) showsDisclosure = false;\n\n /* The current search text /\n @property({ type: String }) searchTerm = '';\n\n /* The suggestions to offer in the quick search list /\n @property({ type: Array }) quickSearches: QuickSearchEntry[] = [];\n\n /* Placeholder text for the input /\n @property({ type: String }) placeholder = msg('Search');\n\n /* The accessible name for the input /\n @property({ type: String }) label = msg('Search');\n\n @query('#search-input') private searchInput?: HTMLInputElement \| null;\n\n render(): TemplateResult {\n return html`\n <div\n class=\"container ${this.isOpen ? 'is-open' : ''} ${this.showsDisclosure\n ? 'shows-disclosure'\n : ''}\"\n >\n <div class=\"search-bar ${this.searchTerm === '' ? '' : 'is-searching'}\">\n <div class=\"magnifier-container endcap\">${magnifyingGlassIcon}</div>\n\n <input\n id=\"search-input\"\n type=\"text\"\n aria-label=${this.label}\n placeholder=${this.placeholder}\n .value=${this.searchTerm}\n @input=${this.handleInput}\n @keydown=${this.handleKeyDown}\n @keyup=${this.handleKeyUp}\n />\n\n <div class=\"clear-search-container endcap\">\n <button\n id=\"clear-search-button\"\n type=\"button\"\n aria-label=${msg('Clear search')}\n @click=${this.clearSearch}\n >\n ${clearResultsIcon}\n </button>\n </div>\n\n <div class=\"disclosure-container endcap\">\n <button\n id=\"disclosure-button\"\n type=\"button\"\n aria-label=${msg('Toggle quick search')}\n aria-expanded=${this.isOpen}\n @click=${this.toggleDisclosure}\n >\n ${disclosureIcon}\n </button>\n </div>\n </div>\n\n <div class=\"quick-search\">\n <ia-quick-search\n .quickSearches=${this.quickSearches}\n @searchTermSelected=${this.quickSearchSelected}\n ></ia-quick-search>\n </div>\n </div>\n `;\n }\n\n /\n Forces the field to match `searchTerm`.\n \n Lit's property binding dirty-checks against the value it last committed\n * rather than against the DOM. A consumer that normalises `searchTerm` in\n * its own `inputchange` handler can land back on that committed value, so\n * the binding sees nothing to do and the field keeps whatever the listener\n * typed. Writing it here keeps the two in step.\n /\n updated(changedProperties: PropertyValues): void {\n if (!changedProperties.has('searchTerm') \|\| !this.searchInput) return;\n\n this.searchInput.value = this.searchTerm;\n }\n\n /\n Tracks the input's value.\n \n Bound to `input` rather than `keyup` so that a paste from the mouse menu,\n * autofill, a drag-and-drop and an IME composition all register, and so that\n * arrow keys don't announce a change that never happened.\n /\n private handleInput(): void {\n if (!this.searchInput) return;\n\n this.searchTerm = this.searchInput.value;\n this.dispatchEvent(\n new CustomEvent<{ value: string }>(Events.InputChange, {\n detail: { value: this.searchTerm },\n }),\n );\n }\n\n /\n Whether the Enter now coming up is the same one that went down on the\n * input. Selecting a quick search with the keyboard hands focus back to the\n * input mid-keystroke, so its keyup lands here without a matching keydown.\n /\n private enterWentDownOnInput = false;\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === 'Enter') this.enterWentDownOnInput = true;\n }\n\n private handleKeyUp(e: KeyboardEvent): void {\n if (e.key !== 'Enter') return;\n if (!this.enterWentDownOnInput) return;\n this.enterWentDownOnInput = false;\n\n this.dispatchEvent(\n new CustomEvent<{ value: string }>(Events.EnterKeyPressed, {\n detail: { value: this.searchTerm },\n }),\n );\n }\n\n private clearSearch(): void {\n this.searchTerm = '';\n this.searchInput?.focus();\n this.dispatchEvent(new Event(Events.SearchCleared));\n }\n\n private quickSearchSelected(\n e: CustomEvent<{ searchEntry: QuickSearchEntry }>,\n ): void {\n const quickSearchEntry = e.detail.searchEntry;\n this.searchTerm = quickSearchEntry.displayText;\n\n this.dispatchEvent(\n new CustomEvent<{ quickSearchEntry: QuickSearchEntry }>(\n Events.QuickSearchSelected,\n { detail: { quickSearchEntry } },\n ),\n );\n\n // Closing the list hides the entry that was just activated. Focus has to\n // go somewhere first, or the browser drops it to the body and a keyboard\n // user lands back at the top of the page.\n this.enterWentDownOnInput = false;\n this.searchInput?.focus();\n this.isOpen = false;\n }\n\n private toggleDisclosure(): void {\n this.isOpen = !this.isOpen;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n --search-bar-background-color--: var(\n --ia-theme-search-bar-background-color,\n #000\n );\n --search-bar-text-color--: var(--ia-theme-search-bar-text-color, #fff);\n --search-bar-font-size--: var(--ia-theme-search-bar-font-size, 1em);\n --search-bar-border--: var(\n --ia-theme-search-bar-border,\n 1px solid #fff\n );\n --search-bar-min-width--: var(--ia-theme-search-bar-min-width, 5em);\n --search-bar-max-expansion-height--: var(\n --ia-theme-search-bar-max-expansion-height,\n 150px\n );\n --search-bar-clear-disc-color--: var(\n --ia-theme-search-bar-clear-disc-color,\n #fff\n );\n --search-bar-clear-cross-color--: var(\n --ia-theme-search-bar-clear-cross-color,\n #000\n );\n\n color: var(--search-bar-text-color--);\n }\n\n .container {\n position: relative;\n }\n\n .search-bar {\n display: flex;\n justify-content: flex-start;\n }\n\n .endcap {\n display: flex;\n justify-content: center;\n align-items: center;\n height: calc(var(--search-bar-font-size--) 2);\n border: var(--search-bar-border--);\n padding: 0 calc(var(--search-bar-font-size--) / 2);\n }\n\n .endcap svg {\n height: var(--search-bar-font-size--);\n width: var(--search-bar-font-size--);\n }\n\n .clear-disc {\n fill: var(--search-bar-clear-disc-color--);\n }\n\n .clear-cross {\n stroke: var(--search-bar-clear-cross-color--);\n }\n\n .clear-search-container {\n border-left: 0;\n border-radius: 0 var(--search-bar-font-size--)\n var(--search-bar-font-size--) 0;\n }\n\n .search-bar.is-searching .clear-search-container {\n padding: 0 calc(var(--search-bar-font-size--) / 2) 0 0;\n }\n\n .search-bar.is-searching .clear-search-container button {\n display: block;\n }\n\n .clear-search-container button {\n display: none;\n }\n\n .magnifier-container {\n border-radius: var(--search-bar-font-size--) 0 0\n var(--search-bar-font-size--);\n border-right: 0;\n }\n\n .container.is-open .magnifier-container {\n border-radius: var(--search-bar-font-size--) 0 0 0;\n }\n\n .container.shows-disclosure .clear-search-container {\n border-radius: 0;\n border-right: 0;\n }\n\n .disclosure-container {\n border-radius: 0 var(--search-bar-font-size--)\n var(--search-bar-font-size--) 0;\n display: none;\n }\n\n .container.shows-disclosure .disclosure-container {\n display: flex;\n }\n\n .container.is-open .disclosure-container {\n border-radius: 0 var(--search-bar-font-size--) 0 0;\n }\n\n .disclosure-container button {\n border: 0;\n background: none;\n }\n\n #search-input {\n border-top: var(--search-bar-border--);\n border-bottom: var(--search-bar-border--);\n border-left: 0;\n border-right: 0;\n border-radius: 0;\n background-color: var(--search-bar-background-color--);\n color: var(--search-bar-text-color--);\n padding: 0;\n margin: 0;\n font-size: var(--search-bar-font-size--);\n flex: 1 1 auto;\n min-width: var(--search-bar-min-width--);\n }\n\n #search-input:focus {\n outline: none;\n }\n\n .quick-search {\n border-radius: 0 0 var(--search-bar-font-size--)\n var(--search-bar-font-size--);\n display: none;\n position: absolute;\n left: 0;\n right: 0;\n background-color: var(--search-bar-background-color--);\n z-index: 1;\n max-height: var(--search-bar-max-expansion-height--);\n overflow-y: auto;\n scrollbar-width: none;\n padding: 0 calc(var(--search-bar-font-size--) / 2);\n }\n\n .quick-search::-webkit-scrollbar {\n display: none;\n }\n\n .container.is-open.shows-disclosure .quick-search {\n border: var(--search-bar-border--);\n border-top: 0;\n display: block;\n }\n\n button {\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n color: inherit;\n cursor: pointer;\n }\n `;\n }\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-quick-search.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-quick-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;~~AAGb~~,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AASjD;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,2BAA2B;IACA,aAAa,EAAE,gBAAgB,EAAE,CAAM;IAElE,MAAM,IAAI,cAAc;IAoBxB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAmBzB,MAAM,KAAK,MAAM,IAAI,cAAc,CAmDlC;CACF"}
1	+ {"version":3,"file":"ia-quick-search.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-quick-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AASjD;;GAEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,2BAA2B;IACA,aAAa,EAAE,gBAAgB,EAAE,CAAM;IAElE,MAAM,IAAI,cAAc;IAoBxB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAmBzB,MAAM,KAAK,MAAM,IAAI,cAAc,CAmDlC;CACF"}

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

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { customElement } from '../../util/custom-element.js';
 /**
  * Event names emitted by this component
  */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-quick-search.js","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-quick-search.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,~~aAAa~~,EAAE,~~QAAQ~~,EAAE,MAAM,~~mBAAmB~~,CAAC;~~AAI5D~~;;GAEG;AACH,MAAM,MAAM,GAAG;IACb,kBAAkB,EAAE,oBAAoB;CACzC,CAAC;AAEF;;GAEG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,2BAA2B;QACA,kBAAa,GAAuB,EAAE,CAAC;IAmGpE,CAAC;IAjGC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,GAAG,CACtB,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;0CAII,KAAK;yBACtB,IAAI,CAAC,iBAAiB;;kBAE7B,WAAW,CAAC,WAAW;;;WAG9B,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACK,iBAAiB,CAAC,CAAQ;QAChC,MAAM,EAAE,gBAAgB,EAAE,GAAI,CAAC,CAAC,aAA6B,CAAC,OAAO,CAAC;QACtE,IAAI,gBAAgB,KAAK,SAAS;YAAE,OAAO;QAE3C,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC,CAAC;QACvE,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CACb,MAAM,CAAC,kBAAkB,EACzB;YACE,MAAM,EAAE,EAAE,WAAW,EAAE;YACvB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CACF,CACF,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDT,CAAC;IACJ,CAAC;CACF,CAAA;AAnG4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAwC;AAFvD,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAqGzB","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n type TemplateResult,\n} from 'lit';\nimport { ~~customElement,~~ property } from 'lit/decorators.js';\n\nimport type { QuickSearchEntry } from './models';\n\n/*\n Event names emitted by this component\n /\nconst Events = {\n SearchTermSelected: 'searchTermSelected',\n};\n\n/\n The list of suggested searches that drops out of the search bar.\n /\n@customElement('ia-quick-search')\nexport class IAQuickSearch extends LitElement {\n /* The entries to offer /\n @property({ type: Array }) quickSearches: QuickSearchEntry[] = [];\n\n render(): TemplateResult {\n return html`\n <ul>\n ${this.quickSearches.map(\n (quickSearch, index) => html`\n <li>\n <button\n type=\"button\"\n data-quick-search-index=${index}\n @click=${this.selectQuickSearch}\n >\n ${quickSearch.displayText}\n </button>\n </li>\n `,\n )}\n </ul>\n `;\n }\n\n /\n Reads the index off the button and emits the entry that was picked.\n \n Uses `currentTarget` rather than `target`, so the lookup still works if the\n * entry's text ever gains markup of its own for the click to land on.\n /\n private selectQuickSearch(e: Event): void {\n const { quickSearchIndex } = (e.currentTarget as HTMLElement).dataset;\n if (quickSearchIndex === undefined) return;\n\n const searchEntry = this.quickSearches[parseInt(quickSearchIndex, 10)];\n if (!searchEntry) return;\n\n this.dispatchEvent(\n new CustomEvent<{ searchEntry: QuickSearchEntry }>(\n Events.SearchTermSelected,\n {\n detail: { searchEntry },\n bubbles: true,\n composed: true,\n },\n ),\n );\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n --quick-search-list-padding--: var(\n --ia-theme-quick-search-list-padding,\n 0 0 0.5em 0\n );\n --quick-search-list-item-padding--: var(\n --ia-theme-quick-search-list-item-padding,\n 0.5em 0 0 0\n );\n --quick-search-link-color--: var(\n --ia-theme-quick-search-link-color,\n rgb(68, 132, 202)\n );\n --quick-search-link-decoration--: var(\n --ia-theme-quick-search-link-decoration,\n none\n );\n }\n\n ul {\n padding: var(--quick-search-list-padding--);\n margin: 0;\n list-style: none;\n }\n\n ul li {\n padding: var(--quick-search-list-item-padding--);\n margin: 0;\n display: block;\n }\n\n /\n A button rather than a link, since picking an entry runs a search in\n place rather than navigating. Stripped back so it reads as plain text\n while staying focusable and keyboard-operable.\n */\n ul li button {\n display: block;\n width: 100%;\n padding: 0;\n border: none;\n background: none;\n font: inherit;\n text-align: left;\n color: var(--quick-search-link-color--);\n text-decoration: var(--quick-search-link-decoration--);\n cursor: pointer;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-quick-search.js","sourceRoot":"","sources":["../../../../src/elements/ia-expandable-search-bar/ia-quick-search.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAIzD;;GAEG;AACH,MAAM,MAAM,GAAG;IACb,kBAAkB,EAAE,oBAAoB;CACzC,CAAC;AAEF;;GAEG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,2BAA2B;QACA,kBAAa,GAAuB,EAAE,CAAC;IAmGpE,CAAC;IAjGC,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,aAAa,CAAC,GAAG,CACtB,CAAC,WAAW,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;0CAII,KAAK;yBACtB,IAAI,CAAC,iBAAiB;;kBAE7B,WAAW,CAAC,WAAW;;;WAG9B,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACK,iBAAiB,CAAC,CAAQ;QAChC,MAAM,EAAE,gBAAgB,EAAE,GAAI,CAAC,CAAC,aAA6B,CAAC,OAAO,CAAC;QACtE,IAAI,gBAAgB,KAAK,SAAS;YAAE,OAAO;QAE3C,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC,CAAC;QACvE,IAAI,CAAC,WAAW;YAAE,OAAO;QAEzB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CACb,MAAM,CAAC,kBAAkB,EACzB;YACE,MAAM,EAAE,EAAE,WAAW,EAAE;YACvB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CACF,CACF,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDT,CAAC;IACJ,CAAC;CACF,CAAA;AAnG4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;oDAAwC;AAFvD,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAqGzB","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport type { QuickSearchEntry } from './models';\n\n/*\n Event names emitted by this component\n /\nconst Events = {\n SearchTermSelected: 'searchTermSelected',\n};\n\n/\n The list of suggested searches that drops out of the search bar.\n /\n@customElement('ia-quick-search')\nexport class IAQuickSearch extends LitElement {\n /* The entries to offer /\n @property({ type: Array }) quickSearches: QuickSearchEntry[] = [];\n\n render(): TemplateResult {\n return html`\n <ul>\n ${this.quickSearches.map(\n (quickSearch, index) => html`\n <li>\n <button\n type=\"button\"\n data-quick-search-index=${index}\n @click=${this.selectQuickSearch}\n >\n ${quickSearch.displayText}\n </button>\n </li>\n `,\n )}\n </ul>\n `;\n }\n\n /\n Reads the index off the button and emits the entry that was picked.\n \n Uses `currentTarget` rather than `target`, so the lookup still works if the\n * entry's text ever gains markup of its own for the click to land on.\n /\n private selectQuickSearch(e: Event): void {\n const { quickSearchIndex } = (e.currentTarget as HTMLElement).dataset;\n if (quickSearchIndex === undefined) return;\n\n const searchEntry = this.quickSearches[parseInt(quickSearchIndex, 10)];\n if (!searchEntry) return;\n\n this.dispatchEvent(\n new CustomEvent<{ searchEntry: QuickSearchEntry }>(\n Events.SearchTermSelected,\n {\n detail: { searchEntry },\n bubbles: true,\n composed: true,\n },\n ),\n );\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n --quick-search-list-padding--: var(\n --ia-theme-quick-search-list-padding,\n 0 0 0.5em 0\n );\n --quick-search-list-item-padding--: var(\n --ia-theme-quick-search-list-item-padding,\n 0.5em 0 0 0\n );\n --quick-search-link-color--: var(\n --ia-theme-quick-search-link-color,\n rgb(68, 132, 202)\n );\n --quick-search-link-decoration--: var(\n --ia-theme-quick-search-link-decoration,\n none\n );\n }\n\n ul {\n padding: var(--quick-search-list-padding--);\n margin: 0;\n list-style: none;\n }\n\n ul li {\n padding: var(--quick-search-list-item-padding--);\n margin: 0;\n display: block;\n }\n\n /\n A button rather than a link, since picking an entry runs a search in\n place rather than navigating. Stripped back so it reads as plain text\n while staying focusable and keyboard-operable.\n */\n ul li button {\n display: block;\n width: 100%;\n padding: 0;\n border: none;\n background: none;\n font: inherit;\n text-align: left;\n color: var(--quick-search-link-color--);\n text-decoration: var(--quick-search-link-decoration--);\n cursor: pointer;\n }\n `;\n }\n}\n"]}

package/dist/src/elements/ia-image-viewer/ia-image-viewer.d.ts ADDED Viewed

@@ -0,0 +1,147 @@
+import { type CSSResultGroup, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
+import type { ImageViewerImage, SlideDirection } from './models.js';
+import './ia-imgview-slide.js';
+import './ia-imgview-controls.js';
+/**
+ * A swipeable image carousel.
+ *
+ * Shows one image at a time from a list, with previous/next buttons, a
+ * counter, keyboard arrows, horizontal wheel scrolling and touch swipes.
+ * Clicking an image opens it in a new tab.
+ *
+ * The viewer holds no opinion about where the images came from: it takes a
+ * plain list of names and URLs, and reports the image it lands on through
+ * `imageChanged` so a host can mirror that into its own URL or analytics.
+ *
+ * @fires imageChanged - The viewer settled on a new image.
+ * @fires imageLoaded - An image the viewer showed finished loading.
+ * @fires imageLoadFailed - An image the viewer showed could not be loaded.
+ *   Fires once per image until it loads successfully or the set changes.
+ * @fires imageActivated - An image was clicked. Cancelable: preventing it
+ *   stops the default of opening the image in a new tab.
+ */
+export declare class IAImageViewer extends LitElement {
+    images: ImageViewerImage[];
+    /**
+     * Name of the image to show. Changing it jumps straight to that image
+     * without animating. An unknown name shows the first image.
+     */
+    currentImageName?: string;
+    /** Read by the gesture controller, which tracks touches against it. */
+    imageArea?: HTMLElement;
+    /** Read by the gesture controller, which translates it during a drag. */
+    slideTrack?: HTMLElement;
+    /** Read by the gesture controller to navigate relative to the current image. */
+    currentIndex: number;
+    private animating;
+    /**
+     * Incremented when an animation is interrupted to force the track element to
+     * be recreated via the `keyed()` directive, which guarantees the CSS
+     * animation restarts even if the direction is the same.
+     */
+    private slideGeneration;
+    /** Which edge just wrapped, if any. Drives the glow indicator. */
+    private wrapEdge;
+    /**
+     * Images already reported as failed, so a broken image isn't counted again
+     * every time the viewer passes over it. Navigating back re-fires `error` on
+     * the recreated element, and the neighbouring slides staged during an
+     * animation or a drag load the same image too, so without this a single
+     * broken derivative reports several times a session.
+     *
+     * Cleared when the image set changes, which is the point a name stops
+     * standing for the same file.
+     */
+    private reportedFailures;
+    private slideTarget;
+    private slideDirection;
+    private gestures;
+    get imageCount(): number;
+    /** The image currently on screen, if there is one. */
+    get currentImage(): ImageViewerImage | undefined;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Where to land when the images or the requested name change.
+     *
+     * A new `currentImageName` is the host asking for a particular image, so it
+     * wins. A new `images` array on its own isn't: a host that builds its list
+     * in a getter hands over a fresh array on every render, which says nothing
+     * about the images having changed. So the viewer holds its place by name and
+     * only goes back to the start when the image it was showing is really gone.
+     */
+    private indexToShow;
+    render(): TemplateResult | typeof nothing;
+    private slideTemplate;
+    /**
+     * Announces the image to a screen reader, which otherwise gets nothing when
+     * the counter and the picture change under it.
+     */
+    private get announcementTemplate();
+    /**
+     * Passes a slide's load result on to the host, which is where reporting
+     * belongs. The slide's own events stop at this shadow root, so they're
+     * re-dispatched rather than allowed to escape.
+     */
+    private onImageLoaded;
+    private onImageFailed;
+    /**
+     * Decides whether a click on a slide opens the image.
+     *
+     * Two things can stop it: the click is the tail end of a swipe, or the host
+     * cancels the event to show the image its own way. The slide's event doesn't
+     * cross this shadow root, so it's re-raised here for the host to see, and a
+     * veto is passed back down to cancel the click.
+     */
+    private onImageActivated;
+    /**
+     * Inserts the neighbouring slides around the current one so the touch target
+     * element stays in the DOM (avoiding touchcancel). These aren't rendered
+     * from the template, so they're marked for the gesture controller to clean
+     * up. The dragging class shifts the track to centre on the middle slide.
+     */
+    insertDragSlides(): void;
+    removeDragSlides(): void;
+    private createDragSlide;
+    showNext(): void;
+    showPrevious(): void;
+    /**
+     * Starts the move to another image. With reduced motion there's no animation
+     * to wait on, so the move lands immediately: nothing would fire the
+     * `animationend` that otherwise commits it.
+     */
+    private moveTo;
+    /**
+     * Moves to the image a completed drag landed on. The drag has already
+     * animated the track there, so this only updates state.
+     */
+    commitDrag(direction: SlideDirection): void;
+    /**
+     * If an animation is in progress, immediately commit its target so the next
+     * animation starts from the right position. Bumps the generation key to
+     * force the track element to be recreated, which restarts the CSS animation.
+     */
+    settleIfAnimating(): void;
+    private onWrapGlowEnd;
+    private onSlideEnd;
+    /** Finishes a move, however it was driven. */
+    private settleAtCurrentIndex;
+    private emitImageChanged;
+    /**
+     * Preloads the next and previous images around `currentIndex` so the first
+     * navigation feels instant.
+     */
+    private preloadAdjacentImages;
+    /**
+     * Preloads images adjacent to the given index. Called both at rest (around
+     * `currentIndex`) and at the start of a move (around the target) so rapid
+     * navigation stays ahead of the browser cache.
+     *
+     * A preload that fails is deliberately not reported. These requests are
+     * speculative and the viewer may never show them, so counting them would
+     * inflate the failure rate with images nobody looked at. Navigating to a
+     * broken image renders a real slide, whose `error` reports it then.
+     */
+    preloadAroundIndex(index: number): void;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-image-viewer.d.ts.map

package/dist/src/elements/ia-image-viewer/ia-image-viewer.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ia-image-viewer.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-image-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAUb,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAY,MAAM,UAAU,CAAC;AAE3E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAChB,MAAM,EAAE,gBAAgB,EAAE,CAAM;IAE3D;;;OAGG;IACyB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,uEAAuE;IACjD,SAAS,CAAC,EAAE,WAAW,CAAC;IAE9C,yEAAyE;IAClD,UAAU,CAAC,EAAE,WAAW,CAAC;IAEhD,gFAAgF;IACvE,YAAY,SAAK;IAEjB,OAAO,CAAC,SAAS,CAAS;IAEnC;;;;OAIG;IACM,OAAO,CAAC,eAAe,CAAK;IAErC,kEAAkE;IACzD,OAAO,CAAC,QAAQ,CAAyB;IAElD;;;;;;;;;OASG;IACH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,QAAQ,CAAiC;IAEjD,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,sDAAsD;IACtD,IAAI,YAAY,IAAI,gBAAgB,GAAG,SAAS,CAE/C;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAenD;;;;;;;;OAQG;IACH,OAAO,CAAC,WAAW;IAyBnB,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IA6EzC,OAAO,CAAC,aAAa;IAIrB;;;OAGG;IACH,OAAO,KAAK,oBAAoB,GAW/B;IAED;;;;OAIG;IACH,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;IASrB;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAcxB;;;;;OAKG;IACH,gBAAgB,IAAI,IAAI;IAgBxB,gBAAgB,IAAI,IAAI;IAOxB,OAAO,CAAC,eAAe;IASvB,QAAQ,IAAI,IAAI;IAKhB,YAAY,IAAI,IAAI;IAQpB;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAmBd;;;OAGG;IACH,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI;IAc3C;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,UAAU;IAMlB,8CAA8C;IAC9C,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,gBAAgB;IAUxB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAI7B;;;;;;;;;OASG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUvC,MAAM,KAAK,MAAM,IAAI,cAAc,CAgJlC;CACF"}