npm - @internetarchive/elements - Versions diffs - 1.1.2-webdev-9192.0 → 1.1.3-l10n-demo.0 - Mend

@internetarchive/elements 1.1.2-webdev-9192.0 → 1.1.3-l10n-demo.0

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

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 { 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"]}
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 { localized, 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')\n@localized()\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. Defaults to \"Search\". /\n @property({ type: String }) placeholder?: string;\n\n /* The accessible name for the input. Defaults to \"Search\". /\n @property({ type: String }) label?: string;\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 ?? msg('Search')}\n placeholder=${this.placeholder ?? msg('Search')}\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-image-viewer/ia-image-viewer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
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,CAyIlC;CACF"}
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,qBAEa,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,CAyIlC;CACF"}

package/dist/src/elements/ia-image-viewer/ia-image-viewer.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { property, query, state } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { keyed } from 'lit/directives/keyed.js';
-import { msg, str } from '@lit/localize';
+import { localized, msg, str } from '@lit/localize';
 import themeStyles from '../../themes/theme-styles.js';
 import { prefersReducedMotion } from '../../util/prefers-reduced-motion.js';
 import { ImageViewerGestures } from './image-viewer-gestures.js';
@@ -521,7 +521,8 @@ __decorate([
     state()
 ], IAImageViewer.prototype, "wrapEdge", void 0);
 IAImageViewer = __decorate([
-    customElement('ia-image-viewer')
+    customElement('ia-image-viewer'),
+    localized()
 ], IAImageViewer);
 export { IAImageViewer };
 //# sourceMappingURL=ia-image-viewer.js.map

package/dist/src/elements/ia-image-viewer/ia-image-viewer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-image-viewer.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-image-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n type CSSResultGroup,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { msg, str } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport { prefersReducedMotion } from '@src/util/prefers-reduced-motion';\nimport { ImageViewerGestures } from './image-viewer-gestures';\nimport type { ImageViewerImage, SlideDirection, WrapEdge } from './models';\nimport type { IAImageViewerSlide } from './ia-imgview-slide';\nimport './ia-imgview-slide';\nimport './ia-imgview-controls';\n\n/** Detail carried by the load and failure events a slide reports. /\ntype SlideImageEvent = CustomEvent<{ image: ImageViewerImage }>;\n\n/\n A swipeable image carousel.\n \n Shows one image at a time from a list, with previous/next buttons, a\n * counter, keyboard arrows, horizontal wheel scrolling and touch swipes.\n * Clicking an image opens it in a new tab.\n \n The viewer holds no opinion about where the images came from: it takes a\n * plain list of names and URLs, and reports the image it lands on through\n * `imageChanged` so a host can mirror that into its own URL or analytics.\n \n @fires imageChanged - The viewer settled on a new image.\n * @fires imageLoaded - An image the viewer showed finished loading.\n * @fires imageLoadFailed - An image the viewer showed could not be loaded.\n * Fires once per image until it loads successfully or the set changes.\n * @fires imageActivated - An image was clicked. Cancelable: preventing it\n * stops the default of opening the image in a new tab.\n /\n@customElement('ia-image-viewer')\nexport class IAImageViewer extends LitElement {\n @property({ type: Array }) images: ImageViewerImage[] = [];\n\n /\n Name of the image to show. Changing it jumps straight to that image\n * without animating. An unknown name shows the first image.\n /\n @property({ type: String }) currentImageName?: string;\n\n /* Read by the gesture controller, which tracks touches against it. /\n @query('.image-area') imageArea?: HTMLElement;\n\n /* Read by the gesture controller, which translates it during a drag. /\n @query('.slide-track') slideTrack?: HTMLElement;\n\n /* Read by the gesture controller to navigate relative to the current image. /\n @state() currentIndex = 0;\n\n @state() private animating = false;\n\n /\n Incremented when an animation is interrupted to force the track element to\n * be recreated via the `keyed()` directive, which guarantees the CSS\n * animation restarts even if the direction is the same.\n /\n @state() private slideGeneration = 0;\n\n /* Which edge just wrapped, if any. Drives the glow indicator. /\n @state() private wrapEdge: WrapEdge \| null = null;\n\n /\n Images already reported as failed, so a broken image isn't counted again\n * every time the viewer passes over it. Navigating back re-fires `error` on\n * the recreated element, and the neighbouring slides staged during an\n * animation or a drag load the same image too, so without this a single\n * broken derivative reports several times a session.\n \n Cleared when the image set changes, which is the point a name stops\n * standing for the same file.\n /\n private reportedFailures = new Set<string>();\n\n private slideTarget: number \| null = null;\n\n private slideDirection: SlideDirection \| null = null;\n\n private gestures = new ImageViewerGestures(this);\n\n get imageCount(): number {\n return this.images.length;\n }\n\n /* The image currently on screen, if there is one. /\n get currentImage(): ImageViewerImage \| undefined {\n return this.images[this.currentIndex];\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('images') \|\| changed.has('currentImageName')) {\n const previous = changed.get('images') as ImageViewerImage[] \| undefined;\n this.currentIndex = this.indexToShow(changed, previous);\n\n this.animating = false;\n this.slideGeneration = 0;\n this.slideTarget = null;\n this.slideDirection = null;\n this.wrapEdge = null;\n this.reportedFailures.clear();\n this.preloadAdjacentImages();\n }\n }\n\n /\n Where to land when the images or the requested name change.\n \n A new `currentImageName` is the host asking for a particular image, so it\n * wins. A new `images` array on its own isn't: a host that builds its list\n * in a getter hands over a fresh array on every render, which says nothing\n * about the images having changed. So the viewer holds its place by name and\n * only goes back to the start when the image it was showing is really gone.\n /\n private indexToShow(\n changed: PropertyValues,\n previousImages: ImageViewerImage[] \| undefined,\n ): number {\n if (changed.has('currentImageName') && this.currentImageName) {\n const requested = this.images.findIndex(\n (image) => image.name === this.currentImageName,\n );\n if (requested >= 0) return requested;\n }\n\n const showing = previousImages?.[this.currentIndex]?.name;\n if (showing) {\n const stillThere = this.images.findIndex(\n (image) => image.name === showing,\n );\n if (stillThere >= 0) return stillThere;\n }\n\n const named = this.currentImageName\n ? this.images.findIndex((image) => image.name === this.currentImageName)\n : -1;\n return named >= 0 ? named : 0;\n }\n\n render(): TemplateResult \| typeof nothing {\n if (this.images.length === 0) return nothing;\n\n const { dragging } = this.gestures;\n const current = this.images[this.currentIndex];\n const showControls = this.images.length > 1;\n\n const trackClasses = {\n 'slide-track': true,\n 'sliding-next':\n this.animating && !dragging && this.slideDirection === 'next',\n 'sliding-prev':\n this.animating && !dragging && this.slideDirection === 'prev',\n dragging,\n };\n\n const prevIndex =\n (this.currentIndex - 1 + this.images.length) % this.images.length;\n const nextIndex = (this.currentIndex + 1) % this.images.length;\n\n const slideTarget =\n this.animating && !dragging && this.slideTarget !== null\n ? this.images[this.slideTarget]\n : null;\n const prevImage = dragging ? this.images[prevIndex] : slideTarget;\n const nextImage = dragging ? this.images[nextIndex] : slideTarget;\n const showPrev =\n dragging \|\| (slideTarget !== null && this.slideDirection === 'prev');\n const showNext =\n dragging \|\| (slideTarget !== null && this.slideDirection === 'next');\n\n const displayIndex =\n this.animating && this.slideTarget !== null\n ? this.slideTarget\n : this.currentIndex;\n\n return html`\n <div class=\"viewer\">\n <div class=\"image-area\">\n ${this.wrapEdge\n ? html`<div\n class=\"wrap-glow ${this.wrapEdge === 'start'\n ? 'glow-start'\n : 'glow-end'}\"\n @animationend=${this.onWrapGlowEnd}\n ></div>`\n : nothing}\n ${keyed(\n this.slideGeneration,\n html`<div\n class=${classMap(trackClasses)}\n @animationend=${this.onSlideEnd}\n @imageLoaded=${this.onImageLoaded}\n @imageFailed=${this.onImageFailed}\n @imageActivated=${this.onImageActivated}\n >\n ${showPrev && prevImage ? this.slideTemplate(prevImage) : nothing}\n ${this.slideTemplate(current)}\n ${showNext && nextImage ? this.slideTemplate(nextImage) : nothing}\n </div>`,\n )}\n </div>\n ${showControls\n ? html`\n <ia-imgview-controls\n .currentIndex=${displayIndex}\n .totalImages=${this.images.length}\n @showPrevious=${this.showPrevious}\n @showNext=${this.showNext}\n ></ia-imgview-controls>\n `\n : nothing}\n ${this.announcementTemplate}\n </div>\n `;\n }\n\n private slideTemplate(image: ImageViewerImage): TemplateResult {\n return html`<ia-imgview-slide .image=${image}></ia-imgview-slide>`;\n }\n\n /\n Announces the image to a screen reader, which otherwise gets nothing when\n * the counter and the picture change under it.\n /\n private get announcementTemplate(): TemplateResult {\n const current = this.images[this.currentIndex];\n const position = msg(\n str`Image ${this.currentIndex + 1} of ${this.images.length}`,\n );\n const label = current?.title ?? current?.name;\n return html`\n <div class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n ${label ? `${position}: ${label}` : position}\n </div>\n `;\n }\n\n /\n Passes a slide's load result on to the host, which is where reporting\n * belongs. The slide's own events stop at this shadow root, so they're\n * re-dispatched rather than allowed to escape.\n /\n private onImageLoaded(e: SlideImageEvent): void {\n // A load that succeeds clears the failure, so an image that breaks again\n // later is reported again rather than swallowed as a repeat.\n this.reportedFailures.delete(e.detail.image.name);\n this.dispatchEvent(\n new CustomEvent('imageLoaded', { detail: { image: e.detail.image } }),\n );\n }\n\n private onImageFailed(e: SlideImageEvent): void {\n const { image } = e.detail;\n if (this.reportedFailures.has(image.name)) return;\n this.reportedFailures.add(image.name);\n this.dispatchEvent(\n new CustomEvent('imageLoadFailed', { detail: { image } }),\n );\n }\n\n /\n Decides whether a click on a slide opens the image.\n \n Two things can stop it: the click is the tail end of a swipe, or the host\n * cancels the event to show the image its own way. The slide's event doesn't\n * cross this shadow root, so it's re-raised here for the host to see, and a\n * veto is passed back down to cancel the click.\n /\n private onImageActivated(e: SlideImageEvent): void {\n if (this.gestures.consumeSwipeTap()) {\n e.preventDefault();\n return;\n }\n const allowed = this.dispatchEvent(\n new CustomEvent('imageActivated', {\n detail: { image: e.detail.image },\n cancelable: true,\n }),\n );\n if (!allowed) e.preventDefault();\n }\n\n /\n Inserts the neighbouring slides around the current one so the touch target\n * element stays in the DOM (avoiding touchcancel). These aren't rendered\n * from the template, so they're marked for the gesture controller to clean\n * up. The dragging class shifts the track to centre on the middle slide.\n /\n insertDragSlides(): void {\n const track = this.slideTrack;\n if (!track) return;\n const prevIdx =\n (this.currentIndex - 1 + this.images.length) % this.images.length;\n const nextIdx = (this.currentIndex + 1) % this.images.length;\n\n track.insertBefore(\n this.createDragSlide(this.images[prevIdx]),\n track.firstChild,\n );\n track.appendChild(this.createDragSlide(this.images[nextIdx]));\n\n track.classList.add('dragging');\n }\n\n removeDragSlides(): void {\n const track = this.slideTrack;\n if (!track) return;\n track.querySelectorAll('[data-drag-slide]').forEach((el) => el.remove());\n track.classList.remove('dragging');\n }\n\n private createDragSlide(image: ImageViewerImage): IAImageViewerSlide {\n const slide = document.createElement(\n 'ia-imgview-slide',\n ) as IAImageViewerSlide;\n slide.image = image;\n slide.dataset.dragSlide = '';\n return slide;\n }\n\n showNext(): void {\n this.settleIfAnimating();\n this.moveTo((this.currentIndex + 1) % this.images.length, 'next');\n }\n\n showPrevious(): void {\n this.settleIfAnimating();\n this.moveTo(\n (this.currentIndex - 1 + this.images.length) % this.images.length,\n 'prev',\n );\n }\n\n /\n Starts the move to another image. With reduced motion there's no animation\n * to wait on, so the move lands immediately: nothing would fire the\n * `animationend` that otherwise commits it.\n /\n private moveTo(target: number, direction: SlideDirection): void {\n const wraps =\n direction === 'next'\n ? this.currentIndex === this.images.length - 1\n : this.currentIndex === 0;\n this.preloadAroundIndex(target);\n\n if (prefersReducedMotion()) {\n this.currentIndex = target;\n this.settleAtCurrentIndex();\n return;\n }\n\n this.slideTarget = target;\n this.slideDirection = direction;\n this.animating = true;\n this.wrapEdge = wraps ? (direction === 'next' ? 'end' : 'start') : null;\n }\n\n /\n Moves to the image a completed drag landed on. The drag has already\n * animated the track there, so this only updates state.\n /\n commitDrag(direction: SlideDirection): void {\n const wraps =\n direction === 'next'\n ? this.currentIndex === this.images.length - 1\n : this.currentIndex === 0;\n const step = direction === 'next' ? 1 : -1;\n this.currentIndex =\n (this.currentIndex + step + this.images.length) % this.images.length;\n if (wraps && !prefersReducedMotion()) {\n this.wrapEdge = direction === 'next' ? 'end' : 'start';\n }\n this.emitImageChanged();\n }\n\n /\n If an animation is in progress, immediately commit its target so the next\n * animation starts from the right position. Bumps the generation key to\n * force the track element to be recreated, which restarts the CSS animation.\n /\n settleIfAnimating(): void {\n if (!this.animating \|\| this.slideTarget === null) return;\n this.currentIndex = this.slideTarget;\n this.slideGeneration++;\n }\n\n private onWrapGlowEnd(): void {\n this.wrapEdge = null;\n }\n\n private onSlideEnd(): void {\n if (this.slideTarget === null) return;\n this.currentIndex = this.slideTarget;\n this.settleAtCurrentIndex();\n }\n\n /* Finishes a move, however it was driven. /\n private settleAtCurrentIndex(): void {\n this.slideTarget = null;\n this.slideDirection = null;\n this.animating = false;\n this.gestures.animationSettled();\n this.emitImageChanged();\n this.preloadAdjacentImages();\n }\n\n private emitImageChanged(): void {\n const image = this.images[this.currentIndex];\n if (!image) return;\n this.dispatchEvent(\n new CustomEvent('imageChanged', {\n detail: { image, index: this.currentIndex },\n }),\n );\n }\n\n /\n Preloads the next and previous images around `currentIndex` so the first\n * navigation feels instant.\n /\n private preloadAdjacentImages(): void {\n this.preloadAroundIndex(this.currentIndex);\n }\n\n /\n Preloads images adjacent to the given index. Called both at rest (around\n * `currentIndex`) and at the start of a move (around the target) so rapid\n * navigation stays ahead of the browser cache.\n \n A preload that fails is deliberately not reported. These requests are\n * speculative and the viewer may never show them, so counting them would\n * inflate the failure rate with images nobody looked at. Navigating to a\n * broken image renders a real slide, whose `error` reports it then.\n /\n preloadAroundIndex(index: number): void {\n if (this.images.length <= 1) return;\n const next = (index + 1) % this.images.length;\n const prev = (index - 1 + this.images.length) % this.images.length;\n for (const idx of [next, prev]) {\n const img = new Image();\n img.src = this.images[idx].url;\n }\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --image-viewer-slide-duration--: var(\n --image-viewer-slide-duration,\n 500ms\n );\n --image-viewer-glow-color--: var(\n --image-viewer-glow-color,\n rgba(255, 255, 255, 0.25)\n );\n /\n * Size and placement are the host's business, set with ordinary CSS\n * on the element. These are only defaults for a host that sets\n * neither; a rule in the outer tree beats them.\n */\n display: block;\n height: 100%;\n margin: 0 auto;\n }\n\n .viewer {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .image-area {\n position: relative;\n flex: 1;\n min-height: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n touch-action: pan-y pinch-zoom;\n }\n\n .wrap-glow {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 100px;\n pointer-events: none;\n z-index: 2;\n animation: glow-fade 700ms ease-out both;\n }\n\n .glow-start {\n left: 0;\n background: linear-gradient(\n to right,\n var(--image-viewer-glow-color--),\n transparent\n );\n }\n\n .glow-end {\n right: 0;\n background: linear-gradient(\n to left,\n var(--image-viewer-glow-color--),\n transparent\n );\n }\n\n @keyframes glow-fade {\n 0% {\n opacity: 0;\n }\n 20% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n .slide-track {\n display: flex;\n width: 100%;\n height: 100%;\n flex-shrink: 0;\n }\n\n @keyframes slide-next {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n }\n\n @keyframes slide-prev {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n }\n\n .slide-track.dragging {\n transform: translateX(-100%);\n }\n\n .slide-track.sliding-next {\n animation: slide-next var(--image-viewer-slide-duration--) ease-in-out\n both;\n }\n\n .slide-track.sliding-prev {\n animation: slide-prev var(--image-viewer-slide-duration--) ease-in-out\n both;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n `,\n ];\n }\n}\n"]}
1	+ {"version":3,"file":"ia-image-viewer.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-image-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n type CSSResultGroup,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { localized, msg, str } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport { prefersReducedMotion } from '@src/util/prefers-reduced-motion';\nimport { ImageViewerGestures } from './image-viewer-gestures';\nimport type { ImageViewerImage, SlideDirection, WrapEdge } from './models';\nimport type { IAImageViewerSlide } from './ia-imgview-slide';\nimport './ia-imgview-slide';\nimport './ia-imgview-controls';\n\n/** Detail carried by the load and failure events a slide reports. /\ntype SlideImageEvent = CustomEvent<{ image: ImageViewerImage }>;\n\n/\n A swipeable image carousel.\n \n Shows one image at a time from a list, with previous/next buttons, a\n * counter, keyboard arrows, horizontal wheel scrolling and touch swipes.\n * Clicking an image opens it in a new tab.\n \n The viewer holds no opinion about where the images came from: it takes a\n * plain list of names and URLs, and reports the image it lands on through\n * `imageChanged` so a host can mirror that into its own URL or analytics.\n \n @fires imageChanged - The viewer settled on a new image.\n * @fires imageLoaded - An image the viewer showed finished loading.\n * @fires imageLoadFailed - An image the viewer showed could not be loaded.\n * Fires once per image until it loads successfully or the set changes.\n * @fires imageActivated - An image was clicked. Cancelable: preventing it\n * stops the default of opening the image in a new tab.\n /\n@customElement('ia-image-viewer')\n@localized()\nexport class IAImageViewer extends LitElement {\n @property({ type: Array }) images: ImageViewerImage[] = [];\n\n /\n Name of the image to show. Changing it jumps straight to that image\n * without animating. An unknown name shows the first image.\n /\n @property({ type: String }) currentImageName?: string;\n\n /* Read by the gesture controller, which tracks touches against it. /\n @query('.image-area') imageArea?: HTMLElement;\n\n /* Read by the gesture controller, which translates it during a drag. /\n @query('.slide-track') slideTrack?: HTMLElement;\n\n /* Read by the gesture controller to navigate relative to the current image. /\n @state() currentIndex = 0;\n\n @state() private animating = false;\n\n /\n Incremented when an animation is interrupted to force the track element to\n * be recreated via the `keyed()` directive, which guarantees the CSS\n * animation restarts even if the direction is the same.\n /\n @state() private slideGeneration = 0;\n\n /* Which edge just wrapped, if any. Drives the glow indicator. /\n @state() private wrapEdge: WrapEdge \| null = null;\n\n /\n Images already reported as failed, so a broken image isn't counted again\n * every time the viewer passes over it. Navigating back re-fires `error` on\n * the recreated element, and the neighbouring slides staged during an\n * animation or a drag load the same image too, so without this a single\n * broken derivative reports several times a session.\n \n Cleared when the image set changes, which is the point a name stops\n * standing for the same file.\n /\n private reportedFailures = new Set<string>();\n\n private slideTarget: number \| null = null;\n\n private slideDirection: SlideDirection \| null = null;\n\n private gestures = new ImageViewerGestures(this);\n\n get imageCount(): number {\n return this.images.length;\n }\n\n /* The image currently on screen, if there is one. /\n get currentImage(): ImageViewerImage \| undefined {\n return this.images[this.currentIndex];\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('images') \|\| changed.has('currentImageName')) {\n const previous = changed.get('images') as ImageViewerImage[] \| undefined;\n this.currentIndex = this.indexToShow(changed, previous);\n\n this.animating = false;\n this.slideGeneration = 0;\n this.slideTarget = null;\n this.slideDirection = null;\n this.wrapEdge = null;\n this.reportedFailures.clear();\n this.preloadAdjacentImages();\n }\n }\n\n /\n Where to land when the images or the requested name change.\n \n A new `currentImageName` is the host asking for a particular image, so it\n * wins. A new `images` array on its own isn't: a host that builds its list\n * in a getter hands over a fresh array on every render, which says nothing\n * about the images having changed. So the viewer holds its place by name and\n * only goes back to the start when the image it was showing is really gone.\n /\n private indexToShow(\n changed: PropertyValues,\n previousImages: ImageViewerImage[] \| undefined,\n ): number {\n if (changed.has('currentImageName') && this.currentImageName) {\n const requested = this.images.findIndex(\n (image) => image.name === this.currentImageName,\n );\n if (requested >= 0) return requested;\n }\n\n const showing = previousImages?.[this.currentIndex]?.name;\n if (showing) {\n const stillThere = this.images.findIndex(\n (image) => image.name === showing,\n );\n if (stillThere >= 0) return stillThere;\n }\n\n const named = this.currentImageName\n ? this.images.findIndex((image) => image.name === this.currentImageName)\n : -1;\n return named >= 0 ? named : 0;\n }\n\n render(): TemplateResult \| typeof nothing {\n if (this.images.length === 0) return nothing;\n\n const { dragging } = this.gestures;\n const current = this.images[this.currentIndex];\n const showControls = this.images.length > 1;\n\n const trackClasses = {\n 'slide-track': true,\n 'sliding-next':\n this.animating && !dragging && this.slideDirection === 'next',\n 'sliding-prev':\n this.animating && !dragging && this.slideDirection === 'prev',\n dragging,\n };\n\n const prevIndex =\n (this.currentIndex - 1 + this.images.length) % this.images.length;\n const nextIndex = (this.currentIndex + 1) % this.images.length;\n\n const slideTarget =\n this.animating && !dragging && this.slideTarget !== null\n ? this.images[this.slideTarget]\n : null;\n const prevImage = dragging ? this.images[prevIndex] : slideTarget;\n const nextImage = dragging ? this.images[nextIndex] : slideTarget;\n const showPrev =\n dragging \|\| (slideTarget !== null && this.slideDirection === 'prev');\n const showNext =\n dragging \|\| (slideTarget !== null && this.slideDirection === 'next');\n\n const displayIndex =\n this.animating && this.slideTarget !== null\n ? this.slideTarget\n : this.currentIndex;\n\n return html`\n <div class=\"viewer\">\n <div class=\"image-area\">\n ${this.wrapEdge\n ? html`<div\n class=\"wrap-glow ${this.wrapEdge === 'start'\n ? 'glow-start'\n : 'glow-end'}\"\n @animationend=${this.onWrapGlowEnd}\n ></div>`\n : nothing}\n ${keyed(\n this.slideGeneration,\n html`<div\n class=${classMap(trackClasses)}\n @animationend=${this.onSlideEnd}\n @imageLoaded=${this.onImageLoaded}\n @imageFailed=${this.onImageFailed}\n @imageActivated=${this.onImageActivated}\n >\n ${showPrev && prevImage ? this.slideTemplate(prevImage) : nothing}\n ${this.slideTemplate(current)}\n ${showNext && nextImage ? this.slideTemplate(nextImage) : nothing}\n </div>`,\n )}\n </div>\n ${showControls\n ? html`\n <ia-imgview-controls\n .currentIndex=${displayIndex}\n .totalImages=${this.images.length}\n @showPrevious=${this.showPrevious}\n @showNext=${this.showNext}\n ></ia-imgview-controls>\n `\n : nothing}\n ${this.announcementTemplate}\n </div>\n `;\n }\n\n private slideTemplate(image: ImageViewerImage): TemplateResult {\n return html`<ia-imgview-slide .image=${image}></ia-imgview-slide>`;\n }\n\n /\n Announces the image to a screen reader, which otherwise gets nothing when\n * the counter and the picture change under it.\n /\n private get announcementTemplate(): TemplateResult {\n const current = this.images[this.currentIndex];\n const position = msg(\n str`Image ${this.currentIndex + 1} of ${this.images.length}`,\n );\n const label = current?.title ?? current?.name;\n return html`\n <div class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n ${label ? `${position}: ${label}` : position}\n </div>\n `;\n }\n\n /\n Passes a slide's load result on to the host, which is where reporting\n * belongs. The slide's own events stop at this shadow root, so they're\n * re-dispatched rather than allowed to escape.\n /\n private onImageLoaded(e: SlideImageEvent): void {\n // A load that succeeds clears the failure, so an image that breaks again\n // later is reported again rather than swallowed as a repeat.\n this.reportedFailures.delete(e.detail.image.name);\n this.dispatchEvent(\n new CustomEvent('imageLoaded', { detail: { image: e.detail.image } }),\n );\n }\n\n private onImageFailed(e: SlideImageEvent): void {\n const { image } = e.detail;\n if (this.reportedFailures.has(image.name)) return;\n this.reportedFailures.add(image.name);\n this.dispatchEvent(\n new CustomEvent('imageLoadFailed', { detail: { image } }),\n );\n }\n\n /\n Decides whether a click on a slide opens the image.\n \n Two things can stop it: the click is the tail end of a swipe, or the host\n * cancels the event to show the image its own way. The slide's event doesn't\n * cross this shadow root, so it's re-raised here for the host to see, and a\n * veto is passed back down to cancel the click.\n /\n private onImageActivated(e: SlideImageEvent): void {\n if (this.gestures.consumeSwipeTap()) {\n e.preventDefault();\n return;\n }\n const allowed = this.dispatchEvent(\n new CustomEvent('imageActivated', {\n detail: { image: e.detail.image },\n cancelable: true,\n }),\n );\n if (!allowed) e.preventDefault();\n }\n\n /\n Inserts the neighbouring slides around the current one so the touch target\n * element stays in the DOM (avoiding touchcancel). These aren't rendered\n * from the template, so they're marked for the gesture controller to clean\n * up. The dragging class shifts the track to centre on the middle slide.\n /\n insertDragSlides(): void {\n const track = this.slideTrack;\n if (!track) return;\n const prevIdx =\n (this.currentIndex - 1 + this.images.length) % this.images.length;\n const nextIdx = (this.currentIndex + 1) % this.images.length;\n\n track.insertBefore(\n this.createDragSlide(this.images[prevIdx]),\n track.firstChild,\n );\n track.appendChild(this.createDragSlide(this.images[nextIdx]));\n\n track.classList.add('dragging');\n }\n\n removeDragSlides(): void {\n const track = this.slideTrack;\n if (!track) return;\n track.querySelectorAll('[data-drag-slide]').forEach((el) => el.remove());\n track.classList.remove('dragging');\n }\n\n private createDragSlide(image: ImageViewerImage): IAImageViewerSlide {\n const slide = document.createElement(\n 'ia-imgview-slide',\n ) as IAImageViewerSlide;\n slide.image = image;\n slide.dataset.dragSlide = '';\n return slide;\n }\n\n showNext(): void {\n this.settleIfAnimating();\n this.moveTo((this.currentIndex + 1) % this.images.length, 'next');\n }\n\n showPrevious(): void {\n this.settleIfAnimating();\n this.moveTo(\n (this.currentIndex - 1 + this.images.length) % this.images.length,\n 'prev',\n );\n }\n\n /\n Starts the move to another image. With reduced motion there's no animation\n * to wait on, so the move lands immediately: nothing would fire the\n * `animationend` that otherwise commits it.\n /\n private moveTo(target: number, direction: SlideDirection): void {\n const wraps =\n direction === 'next'\n ? this.currentIndex === this.images.length - 1\n : this.currentIndex === 0;\n this.preloadAroundIndex(target);\n\n if (prefersReducedMotion()) {\n this.currentIndex = target;\n this.settleAtCurrentIndex();\n return;\n }\n\n this.slideTarget = target;\n this.slideDirection = direction;\n this.animating = true;\n this.wrapEdge = wraps ? (direction === 'next' ? 'end' : 'start') : null;\n }\n\n /\n Moves to the image a completed drag landed on. The drag has already\n * animated the track there, so this only updates state.\n /\n commitDrag(direction: SlideDirection): void {\n const wraps =\n direction === 'next'\n ? this.currentIndex === this.images.length - 1\n : this.currentIndex === 0;\n const step = direction === 'next' ? 1 : -1;\n this.currentIndex =\n (this.currentIndex + step + this.images.length) % this.images.length;\n if (wraps && !prefersReducedMotion()) {\n this.wrapEdge = direction === 'next' ? 'end' : 'start';\n }\n this.emitImageChanged();\n }\n\n /\n If an animation is in progress, immediately commit its target so the next\n * animation starts from the right position. Bumps the generation key to\n * force the track element to be recreated, which restarts the CSS animation.\n /\n settleIfAnimating(): void {\n if (!this.animating \|\| this.slideTarget === null) return;\n this.currentIndex = this.slideTarget;\n this.slideGeneration++;\n }\n\n private onWrapGlowEnd(): void {\n this.wrapEdge = null;\n }\n\n private onSlideEnd(): void {\n if (this.slideTarget === null) return;\n this.currentIndex = this.slideTarget;\n this.settleAtCurrentIndex();\n }\n\n /* Finishes a move, however it was driven. /\n private settleAtCurrentIndex(): void {\n this.slideTarget = null;\n this.slideDirection = null;\n this.animating = false;\n this.gestures.animationSettled();\n this.emitImageChanged();\n this.preloadAdjacentImages();\n }\n\n private emitImageChanged(): void {\n const image = this.images[this.currentIndex];\n if (!image) return;\n this.dispatchEvent(\n new CustomEvent('imageChanged', {\n detail: { image, index: this.currentIndex },\n }),\n );\n }\n\n /\n Preloads the next and previous images around `currentIndex` so the first\n * navigation feels instant.\n /\n private preloadAdjacentImages(): void {\n this.preloadAroundIndex(this.currentIndex);\n }\n\n /\n Preloads images adjacent to the given index. Called both at rest (around\n * `currentIndex`) and at the start of a move (around the target) so rapid\n * navigation stays ahead of the browser cache.\n \n A preload that fails is deliberately not reported. These requests are\n * speculative and the viewer may never show them, so counting them would\n * inflate the failure rate with images nobody looked at. Navigating to a\n * broken image renders a real slide, whose `error` reports it then.\n /\n preloadAroundIndex(index: number): void {\n if (this.images.length <= 1) return;\n const next = (index + 1) % this.images.length;\n const prev = (index - 1 + this.images.length) % this.images.length;\n for (const idx of [next, prev]) {\n const img = new Image();\n img.src = this.images[idx].url;\n }\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --image-viewer-slide-duration--: var(\n --image-viewer-slide-duration,\n 500ms\n );\n --image-viewer-glow-color--: var(\n --image-viewer-glow-color,\n rgba(255, 255, 255, 0.25)\n );\n /\n * Size and placement are the host's business, set with ordinary CSS\n * on the element. These are only defaults for a host that sets\n * neither; a rule in the outer tree beats them.\n */\n display: block;\n height: 100%;\n margin: 0 auto;\n }\n\n .viewer {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .image-area {\n position: relative;\n flex: 1;\n min-height: 0;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n touch-action: pan-y pinch-zoom;\n }\n\n .wrap-glow {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 100px;\n pointer-events: none;\n z-index: 2;\n animation: glow-fade 700ms ease-out both;\n }\n\n .glow-start {\n left: 0;\n background: linear-gradient(\n to right,\n var(--image-viewer-glow-color--),\n transparent\n );\n }\n\n .glow-end {\n right: 0;\n background: linear-gradient(\n to left,\n var(--image-viewer-glow-color--),\n transparent\n );\n }\n\n @keyframes glow-fade {\n 0% {\n opacity: 0;\n }\n 20% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n }\n\n .slide-track {\n display: flex;\n width: 100%;\n height: 100%;\n flex-shrink: 0;\n }\n\n @keyframes slide-next {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n }\n\n @keyframes slide-prev {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n }\n\n .slide-track.dragging {\n transform: translateX(-100%);\n }\n\n .slide-track.sliding-next {\n animation: slide-next var(--image-viewer-slide-duration--) ease-in-out\n both;\n }\n\n .slide-track.sliding-prev {\n animation: slide-prev var(--image-viewer-slide-duration--) ease-in-out\n both;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n overflow: hidden;\n white-space: nowrap;\n clip-path: inset(50%);\n }\n `,\n ];\n }\n}\n"]}

package/dist/src/elements/ia-image-viewer/ia-imgview-controls.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-imgview-controls.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;;;;;;;;;;;;;GAiBG;AACH,~~qBACa~~,qBAAsB,SAAQ,UAAU;IACnD,kEAAkE;IACtC,YAAY,SAAK;IAEjB,WAAW,SAAK;IAE5C,MAAM,IAAI,cAAc;IAwBxB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,MAAM;IAId,MAAM,KAAK,MAAM,IAAI,cAAc,CAyFlC;CACF"}
1	+ {"version":3,"file":"ia-imgview-controls.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAEa,qBAAsB,SAAQ,UAAU;IACnD,kEAAkE;IACtC,YAAY,SAAK;IAEjB,WAAW,SAAK;IAE5C,MAAM,IAAI,cAAc;IAwBxB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,MAAM;IAId,MAAM,KAAK,MAAM,IAAI,cAAc,CAyFlC;CACF"}

package/dist/src/elements/ia-image-viewer/ia-imgview-controls.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import themeStyles from '../../themes/theme-styles.js';
 /**
  * The image viewer's previous / next buttons and the "n / total" counter.
@@ -156,7 +156,8 @@ __decorate([
     property({ type: Number })
 ], IAImageViewerControls.prototype, "totalImages", void 0);
 IAImageViewerControls = __decorate([
-    customElement('ia-imgview-controls')
+    customElement('ia-imgview-controls'),
+    localized()
 ], IAImageViewerControls);
 export { IAImageViewerControls };
 //# sourceMappingURL=ia-imgview-controls.js.map

package/dist/src/elements/ia-image-viewer/ia-imgview-controls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-imgview-controls.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-controls.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,GAEX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;~~AAEpC~~,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;;;;;;;;GAiBG;~~AAEI~~,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QACL,kEAAkE;QACtC,iBAAY,GAAG,CAAC,CAAC;QAEjB,gBAAW,GAAG,CAAC,CAAC;IA4H9C,CAAC;IA1HC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;uBAIQ,GAAG,CAAC,gBAAgB,CAAC;mBACzB,IAAI,CAAC,UAAU;;;;;YAKtB,IAAI,CAAC,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,WAAW;;;;uBAIhC,GAAG,CAAC,YAAY,CAAC;mBACrB,IAAI,CAAC,MAAM;;;;;KAKzB,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC;IACtD,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoFF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA9H6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAkB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAiB;AAJjC,qBAAqB;~~IADjC~~,aAAa,CAAC,qBAAqB,CAAC;~~GACxB~~,qBAAqB,CAgIjC","sourcesContent":["import {\n css,\n type CSSResultGroup,\n html,\n LitElement,\n type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/*\n The image viewer's previous / next buttons and the \"n / total\" counter.\n \n Past the wide breakpoint the buttons position themselves over the image\n * area, which lives in the viewer's shadow root. That works because an\n * absolutely positioned element finds its containing block through the flat\n * tree, so the viewer's frame is still the reference as long as this host\n * stays unpositioned. The breakpoint itself queries this host's own\n * (unnamed) container from `.controls`, a genuine descendant inside this\n * element's own shadow root, rather than a named container on the\n * `ia-image-viewer` ancestor — Safari doesn't reliably resolve a named\n * container query across a shadow-tree boundary, so querying across from\n * here left the wide layout permanently off in Safari. `:host` stays full\n * width the whole time; once the buttons come out of flow, `.controls` only\n * has the counter left to lay out, so switching its `justify-content` to\n * `center` puts the counter in the middle of the image without needing\n * anything to shrink-wrap.\n /\n@customElement('ia-imgview-controls')\nexport class IAImageViewerControls extends LitElement {\n /* Zero-based index of the image being shown, for the counter. */\n @property({ type: Number }) currentIndex = 0;\n\n @property({ type: Number }) totalImages = 0;\n\n render(): TemplateResult {\n return html`\n <div class=\"controls\">\n <button\n class=\"nav-btn prev\"\n aria-label=${msg('Previous image')}\n @click=${this.onPrevious}\n >\n ‹\n </button>\n <div class=\"counter\">\n ${this.currentIndex + 1} / ${this.totalImages}\n </div>\n <button\n class=\"nav-btn next\"\n aria-label=${msg('Next image')}\n @click=${this.onNext}\n >\n ›\n </button>\n </div>\n `;\n }\n\n private onPrevious(): void {\n this.dispatchEvent(new CustomEvent('showPrevious'));\n }\n\n private onNext(): void {\n this.dispatchEvent(new CustomEvent('showNext'));\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --imgview-controls-text-color--: var(\n --image-viewer-text-color,\n var(--true-white)\n );\n\n display: block;\n width: 100%;\n container-type: inline-size;\n }\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.8rem;\n }\n\n .nav-btn {\n width: 40px;\n background: transparent;\n color: var(--imgview-controls-text-color--);\n border: none;\n cursor: pointer;\n font-size: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.5;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\n transition: opacity 0.15s;\n }\n\n .nav-btn:hover {\n opacity: 1;\n }\n\n .nav-btn:focus-visible {\n outline: 2px solid rgba(255, 255, 255, 0.8);\n outline-offset: -2px;\n }\n\n .counter {\n color: var(--imgview-controls-text-color--);\n font-size: 14px;\n font-weight: 200;\n letter-spacing: 0.05em;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .nav-btn {\n transition: none;\n }\n }\n\n @container (min-width: 890px) {\n .controls {\n justify-content: center;\n margin-top: 0;\n }\n\n .nav-btn {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 60px;\n font-size: 60px;\n z-index: 1;\n }\n\n .prev {\n left: 0;\n }\n\n .next {\n right: 0;\n }\n\n .counter {\n margin-top: 0.8rem;\n }\n }\n `,\n ];\n }\n}\n"]}
1	+ {"version":3,"file":"ia-imgview-controls.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-controls.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,GAEX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;;;;;;;;GAiBG;AAGI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QACL,kEAAkE;QACtC,iBAAY,GAAG,CAAC,CAAC;QAEjB,gBAAW,GAAG,CAAC,CAAC;IA4H9C,CAAC;IA1HC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;uBAIQ,GAAG,CAAC,gBAAgB,CAAC;mBACzB,IAAI,CAAC,UAAU;;;;;YAKtB,IAAI,CAAC,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,WAAW;;;;uBAIhC,GAAG,CAAC,YAAY,CAAC;mBACrB,IAAI,CAAC,MAAM;;;;;KAKzB,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC;IACtD,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoFF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA9H6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAkB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAiB;AAJjC,qBAAqB;IAFjC,aAAa,CAAC,qBAAqB,CAAC;IACpC,SAAS,EAAE;GACC,qBAAqB,CAgIjC","sourcesContent":["import {\n css,\n type CSSResultGroup,\n html,\n LitElement,\n type TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { localized, msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/*\n The image viewer's previous / next buttons and the \"n / total\" counter.\n \n Past the wide breakpoint the buttons position themselves over the image\n * area, which lives in the viewer's shadow root. That works because an\n * absolutely positioned element finds its containing block through the flat\n * tree, so the viewer's frame is still the reference as long as this host\n * stays unpositioned. The breakpoint itself queries this host's own\n * (unnamed) container from `.controls`, a genuine descendant inside this\n * element's own shadow root, rather than a named container on the\n * `ia-image-viewer` ancestor — Safari doesn't reliably resolve a named\n * container query across a shadow-tree boundary, so querying across from\n * here left the wide layout permanently off in Safari. `:host` stays full\n * width the whole time; once the buttons come out of flow, `.controls` only\n * has the counter left to lay out, so switching its `justify-content` to\n * `center` puts the counter in the middle of the image without needing\n * anything to shrink-wrap.\n /\n@customElement('ia-imgview-controls')\n@localized()\nexport class IAImageViewerControls extends LitElement {\n /* Zero-based index of the image being shown, for the counter. */\n @property({ type: Number }) currentIndex = 0;\n\n @property({ type: Number }) totalImages = 0;\n\n render(): TemplateResult {\n return html`\n <div class=\"controls\">\n <button\n class=\"nav-btn prev\"\n aria-label=${msg('Previous image')}\n @click=${this.onPrevious}\n >\n ‹\n </button>\n <div class=\"counter\">\n ${this.currentIndex + 1} / ${this.totalImages}\n </div>\n <button\n class=\"nav-btn next\"\n aria-label=${msg('Next image')}\n @click=${this.onNext}\n >\n ›\n </button>\n </div>\n `;\n }\n\n private onPrevious(): void {\n this.dispatchEvent(new CustomEvent('showPrevious'));\n }\n\n private onNext(): void {\n this.dispatchEvent(new CustomEvent('showNext'));\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --imgview-controls-text-color--: var(\n --image-viewer-text-color,\n var(--true-white)\n );\n\n display: block;\n width: 100%;\n container-type: inline-size;\n }\n\n .controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.8rem;\n }\n\n .nav-btn {\n width: 40px;\n background: transparent;\n color: var(--imgview-controls-text-color--);\n border: none;\n cursor: pointer;\n font-size: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.5;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\n transition: opacity 0.15s;\n }\n\n .nav-btn:hover {\n opacity: 1;\n }\n\n .nav-btn:focus-visible {\n outline: 2px solid rgba(255, 255, 255, 0.8);\n outline-offset: -2px;\n }\n\n .counter {\n color: var(--imgview-controls-text-color--);\n font-size: 14px;\n font-weight: 200;\n letter-spacing: 0.05em;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .nav-btn {\n transition: none;\n }\n }\n\n @container (min-width: 890px) {\n .controls {\n justify-content: center;\n margin-top: 0;\n }\n\n .nav-btn {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 60px;\n font-size: 60px;\n z-index: 1;\n }\n\n .prev {\n left: 0;\n }\n\n .next {\n right: 0;\n }\n\n .counter {\n margin-top: 0.8rem;\n }\n }\n `,\n ];\n }\n}\n"]}

package/dist/src/elements/ia-image-viewer/ia-imgview-slide.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-imgview-slide.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-slide.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD;;;;;;;GAOG;AACH,~~qBACa~~,kBAAmB,SAAQ,UAAU;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAE/B,OAAO,CAAC,YAAY,CAAC,CAAmB;IAErD,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,MAAM,CAAS;IAEhC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAOnD,SAAS,CAAC,OAAO,IAAI,IAAI;IAIzB,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAiCzC;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,UAAU,CAIhB;IAEF,OAAO,CAAC,UAAU,CAIhB;IAEF;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAOd;;;;;;;OAOG;IACH,OAAO,CAAC,oBAAoB;IAO5B,MAAM,KAAK,MAAM,IAAI,cAAc,CAiFlC;CACF"}
1	+ {"version":3,"file":"ia-imgview-slide.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-slide.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD;;;;;;;GAOG;AACH,qBAEa,kBAAmB,SAAQ,UAAU;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAE/B,OAAO,CAAC,YAAY,CAAC,CAAmB;IAErD,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,MAAM,CAAS;IAEhC,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAOnD,SAAS,CAAC,OAAO,IAAI,IAAI;IAIzB,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAiCzC;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,UAAU,CAIhB;IAEF,OAAO,CAAC,UAAU,CAIhB;IAEF;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAOd;;;;;;;OAOG;IACH,OAAO,CAAC,oBAAoB;IAO5B,MAAM,KAAK,MAAM,IAAI,cAAc,CAiFlC;CACF"}

package/dist/src/elements/ia-image-viewer/ia-imgview-slide.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { css, html, LitElement, nothing, } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import themeStyles from '../../themes/theme-styles.js';
 /**
  * A single image in the viewer's track.
@@ -208,7 +208,8 @@ __decorate([
     state()
 ], IAImageViewerSlide.prototype, "failed", void 0);
 IAImageViewerSlide = __decorate([
-    customElement('ia-imgview-slide')
+    customElement('ia-imgview-slide'),
+    localized()
 ], IAImageViewerSlide);
 export { IAImageViewerSlide };
 //# sourceMappingURL=ia-imgview-slide.js.map

package/dist/src/elements/ia-image-viewer/ia-imgview-slide.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-imgview-slide.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-slide.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,GAGR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;~~AAEpC~~,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;;;GAOG;~~AAEI~~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~~IAD9B~~,aAAa,CAAC,kBAAkB,CAAC;~~GACrB~~,kBAAkB,CA+L9B","sourcesContent":["import {\n css,\n type CSSResultGroup,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport type { ImageViewerImage } from './models';\n\n/*\n A single image in the viewer's track.\n \n Owns everything about one image: its load state, its failure message, and\n * the link that opens the full-size file. The viewer creates these both from\n * its template and by hand during a drag, so the element works with no\n * per-instance setup beyond its properties.\n /\n@customElement('ia-imgview-slide')\nexport class IAImageViewerSlide extends LitElement {\n @property({ type: Object }) image?: ImageViewerImage;\n\n @query('.main-image') private imageElement?: HTMLImageElement;\n\n @state() private loaded = false;\n\n @state() private failed = false;\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('image')) {\n this.loaded = false;\n this.failed = false;\n }\n }\n\n protected updated(): void {\n this.checkAlreadyResolved();\n }\n\n render(): TemplateResult \| typeof nothing {\n if (!this.image) return nothing;\n\n const imageClasses = { 'main-image': true, loaded: this.loaded };\n const linkClasses = { 'image-link': true, failed: this.failed };\n\n return html`\n <a\n class=${classMap(linkClasses)}\n href=${this.image.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n @click=${this.onClick}\n >\n <img\n class=${classMap(imageClasses)}\n src=${this.image.url}\n alt=${this.image.title ?? this.image.name}\n data-image-name=${this.image.name}\n draggable=\"false\"\n @load=${this.markLoaded}\n @error=${this.markFailed}\n />\n <div class=\"loading-spinner\"></div>\n ${this.failed\n ? html`<p class=\"image-failed\">\n ${msg('This image could not be loaded.')}\n </p>`\n : nothing}\n </a>\n `;\n }\n\n /\n Lets the viewer veto opening the image, which it does when the click is\n * the tail end of a swipe. A host can veto it too, to show the image its own\n * way instead of in a new tab.\n /\n private onClick(e: MouseEvent): void {\n if (!this.image) return;\n const allowed = this.dispatchEvent(\n new CustomEvent('imageActivated', {\n detail: { image: this.image },\n bubbles: true,\n cancelable: true,\n }),\n );\n if (!allowed) e.preventDefault();\n }\n\n private markLoaded = (): void => {\n this.loaded = true;\n this.failed = false;\n this.report('imageLoaded');\n };\n\n private markFailed = (): void => {\n this.loaded = false;\n this.failed = true;\n this.report('imageFailed');\n };\n\n /\n Tells the viewer what happened to this image, so it can pass failures on\n * to the host. Bubbles because the viewer listens on the track, which is\n * also where the slides it creates by hand during a drag end up.\n /\n private report(name: 'imageLoaded' \| 'imageFailed'): void {\n if (!this.image) return;\n this.dispatchEvent(\n new CustomEvent(name, { detail: { image: this.image }, bubbles: true }),\n );\n }\n\n /\n Catches an image that finished before its listeners could fire, because\n * the browser had already resolved the request (from the cache or a\n * preload) by the time the element rendered.\n \n `complete` is true for a failed image as well as a loaded one, so the two\n * are told apart by `naturalWidth`, which stays 0 when the load failed.\n */\n private checkAlreadyResolved(): void {\n const img = this.imageElement;\n if (!img \|\| this.loaded \|\| this.failed \|\| !img.complete) return;\n if (img.naturalWidth > 0) this.markLoaded();\n else this.markFailed();\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --imgview-slide-text-color--: var(\n --image-viewer-text-color,\n var(--true-white)\n );\n\n flex: 0 0 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n\n .image-link {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n cursor: pointer;\n }\n\n .main-image {\n display: block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n opacity: 0;\n transition: opacity 0.2s ease;\n user-select: none;\n }\n\n .main-image.loaded {\n opacity: 1;\n }\n\n .main-image.loaded + .loading-spinner,\n .image-link.failed .loading-spinner {\n display: none;\n }\n\n .loading-spinner {\n position: absolute;\n width: 24px;\n height: 24px;\n border: 2px solid rgba(255, 255, 255, 0.15);\n border-top-color: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .image-failed {\n position: absolute;\n margin: 0;\n padding: 0 1.6rem;\n color: var(--imgview-slide-text-color--);\n font-size: 1.4rem;\n text-align: center;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .loading-spinner {\n animation: none;\n }\n\n .main-image {\n transition: none;\n }\n }\n `,\n ];\n }\n}\n"]}
1	+ {"version":3,"file":"ia-imgview-slide.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-slide.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n type CSSResultGroup,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { localized, msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport type { ImageViewerImage } from './models';\n\n/*\n A single image in the viewer's track.\n \n Owns everything about one image: its load state, its failure message, and\n * the link that opens the full-size file. The viewer creates these both from\n * its template and by hand during a drag, so the element works with no\n * per-instance setup beyond its properties.\n /\n@customElement('ia-imgview-slide')\n@localized()\nexport class IAImageViewerSlide extends LitElement {\n @property({ type: Object }) image?: ImageViewerImage;\n\n @query('.main-image') private imageElement?: HTMLImageElement;\n\n @state() private loaded = false;\n\n @state() private failed = false;\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('image')) {\n this.loaded = false;\n this.failed = false;\n }\n }\n\n protected updated(): void {\n this.checkAlreadyResolved();\n }\n\n render(): TemplateResult \| typeof nothing {\n if (!this.image) return nothing;\n\n const imageClasses = { 'main-image': true, loaded: this.loaded };\n const linkClasses = { 'image-link': true, failed: this.failed };\n\n return html`\n <a\n class=${classMap(linkClasses)}\n href=${this.image.url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n @click=${this.onClick}\n >\n <img\n class=${classMap(imageClasses)}\n src=${this.image.url}\n alt=${this.image.title ?? this.image.name}\n data-image-name=${this.image.name}\n draggable=\"false\"\n @load=${this.markLoaded}\n @error=${this.markFailed}\n />\n <div class=\"loading-spinner\"></div>\n ${this.failed\n ? html`<p class=\"image-failed\">\n ${msg('This image could not be loaded.')}\n </p>`\n : nothing}\n </a>\n `;\n }\n\n /\n Lets the viewer veto opening the image, which it does when the click is\n * the tail end of a swipe. A host can veto it too, to show the image its own\n * way instead of in a new tab.\n /\n private onClick(e: MouseEvent): void {\n if (!this.image) return;\n const allowed = this.dispatchEvent(\n new CustomEvent('imageActivated', {\n detail: { image: this.image },\n bubbles: true,\n cancelable: true,\n }),\n );\n if (!allowed) e.preventDefault();\n }\n\n private markLoaded = (): void => {\n this.loaded = true;\n this.failed = false;\n this.report('imageLoaded');\n };\n\n private markFailed = (): void => {\n this.loaded = false;\n this.failed = true;\n this.report('imageFailed');\n };\n\n /\n Tells the viewer what happened to this image, so it can pass failures on\n * to the host. Bubbles because the viewer listens on the track, which is\n * also where the slides it creates by hand during a drag end up.\n /\n private report(name: 'imageLoaded' \| 'imageFailed'): void {\n if (!this.image) return;\n this.dispatchEvent(\n new CustomEvent(name, { detail: { image: this.image }, bubbles: true }),\n );\n }\n\n /\n Catches an image that finished before its listeners could fire, because\n * the browser had already resolved the request (from the cache or a\n * preload) by the time the element rendered.\n \n `complete` is true for a failed image as well as a loaded one, so the two\n * are told apart by `naturalWidth`, which stays 0 when the load failed.\n */\n private checkAlreadyResolved(): void {\n const img = this.imageElement;\n if (!img \|\| this.loaded \|\| this.failed \|\| !img.complete) return;\n if (img.naturalWidth > 0) this.markLoaded();\n else this.markFailed();\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --imgview-slide-text-color--: var(\n --image-viewer-text-color,\n var(--true-white)\n );\n\n flex: 0 0 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }\n\n .image-link {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n cursor: pointer;\n }\n\n .main-image {\n display: block;\n max-height: 100%;\n max-width: 100%;\n object-fit: contain;\n opacity: 0;\n transition: opacity 0.2s ease;\n user-select: none;\n }\n\n .main-image.loaded {\n opacity: 1;\n }\n\n .main-image.loaded + .loading-spinner,\n .image-link.failed .loading-spinner {\n display: none;\n }\n\n .loading-spinner {\n position: absolute;\n width: 24px;\n height: 24px;\n border: 2px solid rgba(255, 255, 255, 0.15);\n border-top-color: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .image-failed {\n position: absolute;\n margin: 0;\n padding: 0 1.6rem;\n color: var(--imgview-slide-text-color--);\n font-size: 1.4rem;\n text-align: center;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .loading-spinner {\n animation: none;\n }\n\n .main-image {\n transition: none;\n }\n }\n `,\n ];\n }\n}\n"]}

package/dist/src/elements/ia-otp-form/ia-otp-form.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-otp-form.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAGd,cAAc,EACf,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAE3F,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yCAAyC,CAAC;AACjD,OAAO,mCAAmC,CAAC;AAU3C;;GAEG;AACH,~~qBACa~~,SAAU,SAAQ,UAAU;IAGvC,gBAAgB,EAAE,aAAa,CAAW;IAI1C,cAAc,EAAE,OAAO,CAAS;IAIhC,gBAAgB,EAAE,MAAM,CAAK;IAI7B,WAAW,EAAE,OAAO,CAAQ;IAG5B,OAAO,CAAC,QAAQ,CAAc;IAE9B,MAAM,IAAI,cAAc;IAuBxB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAenD,OAAO,KAAK,wBAAwB,GAiBnC;YAGa,sBAAsB;IAUpC,MAAM,KAAK,MAAM,IAAI,cAAc,CA8ClC;CACF"}
1	+ {"version":3,"file":"ia-otp-form.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAGd,cAAc,EACf,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uDAAuD,CAAC;AAE3F,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yCAAyC,CAAC;AACjD,OAAO,mCAAmC,CAAC;AAU3C;;GAEG;AACH,qBAEa,SAAU,SAAQ,UAAU;IAGvC,gBAAgB,EAAE,aAAa,CAAW;IAI1C,cAAc,EAAE,OAAO,CAAS;IAIhC,gBAAgB,EAAE,MAAM,CAAK;IAI7B,WAAW,EAAE,OAAO,CAAQ;IAG5B,OAAO,CAAC,QAAQ,CAAc;IAE9B,MAAM,IAAI,cAAc;IAuBxB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAenD,OAAO,KAAK,wBAAwB,GAiBnC;YAGa,sBAAsB;IAUpC,MAAM,KAAK,MAAM,IAAI,cAAc,CA8ClC;CACF"}

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

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { html, LitElement, css, nothing, } from 'lit';
-import { msg } from '@lit/localize';
+import { localized, msg } from '@lit/localize';
 import { property, query } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 import themeStyles from '../../themes/theme-styles.js';
@@ -152,7 +152,8 @@ __decorate([
     query('ia-otp-input')
 ], IAOTPForm.prototype, "OTPInput", void 0);
 IAOTPForm = __decorate([
-    customElement('ia-otp-form')
+    customElement('ia-otp-form'),
+    localized()
 ], IAOTPForm);
 export { IAOTPForm };
 //# sourceMappingURL=ia-otp-form.js.map

package/dist/src/elements/ia-otp-form/ia-otp-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-otp-form.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EAGV,GAAG,EACH,OAAO,GAER,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;~~AACpC~~,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAKnD,OAAO,uDAAuD,CAAC;AAC/D,OAAO,yCAAyC,CAAC;AACjD,OAAO,mCAAmC,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,GAAG;IACb,gBAAgB,EAAE,kBAAkB;IACpC,aAAa,EAAE,eAAe,EAAE,+BAA+B;CAChE,CAAC;AAEF;;GAEG;~~AAEI~~,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACL,yCAAyC;QAEzC,qBAAgB,GAAkB,OAAO,CAAC;QAE1C,uEAAuE;QAEvE,mBAAc,GAAY,KAAK,CAAC;QAEhC,qDAAqD;QAErD,qBAAgB,GAAW,CAAC,CAAC;QAE7B,qDAAqD;QAErD,gBAAW,GAAY,IAAI,CAAC;IAwH9B,CAAC;IAnHC,MAAM;QACJ,OAAO,IAAI,CAAA;;;sBAGO,IAAI,CAAC,gBAAgB;yBAClB,IAAI,CAAC,WAAW;sBACnB,IAAI,CAAC,gBAAgB,KAAK,SAAS;YAC/C,IAAI,CAAC,gBAAgB,KAAK,SAAS;;;;kBAI3B,IAAI,CAAC,gBAAgB;;;QAG/B,IAAI,CAAC,gBAAgB,KAAK,OAAO;YACjC,CAAC,CAAC,IAAI,CAAA;cACA,GAAG,CAAC,wCAAwC,CAAC;eAC5C;YACP,CAAC,CAAC,OAAO;QACT,IAAI,CAAC,wBAAwB;KAChC,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,OAAuB;QAC1C,IACE,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;YAC/B,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,gBAAgB,KAAK,OAAO,EACjC,CAAC;YACD,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAC;QAClC,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC1E,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAC;QAClC,CAAC;IACH,CAAC;IAED,8CAA8C;IAC9C,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAC,cAAc;YACxB,CAAC,CAAC,IAAI,CAAA;aACC,GAAG,CAAC,aAAa,CAAC;UACrB;YACJ,CAAC,CAAC,IAAI,CAAA;;;;;wBAKY,IAAI,CAAC,gBAAgB,KAAK,SAAS;gBAC/C,IAAI,CAAC,gBAAgB,KAAK,SAAS;qBAC1B,IAAI,CAAC,sBAAsB;;cAElC,GAAG,CAAC,uBAAuB,CAAC;;SAEjC,CAAC;IACR,CAAC;IAED,4CAA4C;IACpC,KAAK,CAAC,sBAAsB;QAClC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,MAAM,CAAC,gBAAgB,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,EAAE,CAAC;IAClC,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyCF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AApIC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACe;AAI1C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACI;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACE;AAI7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACA;AAGpB;IADP,KAAK,CAAC,cAAc,CAAC;2CACQ;AAlBnB,SAAS;~~IADrB~~,aAAa,CAAC,aAAa,CAAC;~~GAChB~~,SAAS,CAuIrB","sourcesContent":["import {\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n css,\n nothing,\n PropertyValues,\n} from 'lit';\nimport { msg } from '@lit/localize';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport themeStyles from '@src/themes/theme-styles';\n\nimport type { IAOTPInput } from '@src/elements/ia-otp-input/ia-otp-input';\nimport type { LoadingStatus } from '@src/elements/ia-status-indicator/ia-status-indicator';\n\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\nimport '@src/elements/ia-otp-input/ia-otp-input';\nimport '@src/elements/ia-button/ia-button';\n\n/*\n Custom events fired by the component\n /\nconst Events = {\n NewCodeRequested: 'newCodeRequested',\n CodeSubmitted: 'codeSubmitted', // Bubbles up from ia-otp-input\n};\n\n/\n Form for entering OTP codes, including success/loading/error states and a request new code button\n /\n@customElement('ia-otp-form')\nexport class IAOTPForm extends LitElement {\n / The state of the validation process /\n @property({ type: String })\n validationStatus: LoadingStatus = 'ready';\n\n / Whether to display a loading indicator instead of the button text /\n @property({ type: Boolean })\n newCodeSending: boolean = false;\n\n / Number of characters to expect for the passcode /\n @property({ type: Number })\n numPasscodeChars: number = 6;\n\n / Whether to restrict entry to numeric characters /\n @property({ type: Boolean })\n numericOnly: boolean = true;\n\n @query('ia-otp-input')\n private OTPInput!: IAOTPInput;\n\n render(): TemplateResult {\n return html`\n <div class=\"input-section\">\n <ia-otp-input\n .numChars=${this.numPasscodeChars}\n ?numericOnly=${this.numericOnly}\n ?disabled=${this.validationStatus === 'loading' \|\|\n this.validationStatus === 'success'}\n ></ia-otp-input>\n <ia-status-indicator\n part=\"status-indicator\"\n .mode=${this.validationStatus}\n ></ia-status-indicator>\n </div>\n ${this.validationStatus === 'error'\n ? html`<p class=\"error-msg\">\n ${msg('The code entered is invalid or expired')}\n </p>`\n : nothing}\n ${this.resendCodeButtonTemplate}\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (\n changed.has('validationStatus') &&\n this.OTPInput &&\n this.validationStatus === 'error'\n ) {\n this.OTPInput.prefillValue = '';\n }\n\n if (changed.has('newCodeSending') && this.newCodeSending && this.OTPInput) {\n this.OTPInput.prefillValue = '';\n }\n }\n\n / The button to display to send a new code /\n private get resendCodeButtonTemplate(): TemplateResult {\n return this.newCodeSending\n ? html`<span part=\"new-code-message\" class=\"new-code-msg\"\n >${msg('Emailing...')}</span\n >`\n : html`\n <ia-button\n mode=\"link\"\n class=\"new-code-btn\"\n part=\"new-code-button\"\n .disabled=${this.validationStatus === 'loading' \|\|\n this.validationStatus === 'success'}\n @click=${this.handleNewCodeRequested}\n >\n ${msg('Email me another code')}\n </ia-button>\n `;\n }\n\n / Emits an event to request the new code /\n private async handleNewCodeRequested(): Promise<void> {\n this.dispatchEvent(\n new CustomEvent(Events.NewCodeRequested, {\n bubbles: true,\n composed: true,\n }),\n );\n this.OTPInput.prefillValue = '';\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --font-size-standard--: var(--font-size-standard);\n --font-size-lg--: var(--font-size-lg);\n --color-success--: var(--color-success);\n --color-danger--: var(--color-danger);\n --link-color--: var(--link-color);\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .input-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n ia-status-indicator {\n --icon-width: calc(var(--font-size-lg--) 1.33);\n }\n\n .error-msg {\n margin-top: 10px;\n font-size: var(--font-size-standard--);\n color: var(--color-danger--);\n margin-bottom: -10px;\n }\n\n .new-code-msg {\n margin-top: 10px;\n font-size: var(--font-size-standard--);\n color: var(--link-color--);\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n `,\n ];\n }\n}\n"]}
1	+ {"version":3,"file":"ia-otp-form.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-form/ia-otp-form.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n css,\n nothing,\n PropertyValues,\n} from 'lit';\nimport { localized, msg } from '@lit/localize';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport themeStyles from '@src/themes/theme-styles';\n\nimport type { IAOTPInput } from '@src/elements/ia-otp-input/ia-otp-input';\nimport type { LoadingStatus } from '@src/elements/ia-status-indicator/ia-status-indicator';\n\nimport '@src/elements/ia-status-indicator/ia-status-indicator';\nimport '@src/elements/ia-otp-input/ia-otp-input';\nimport '@src/elements/ia-button/ia-button';\n\n/*\n Custom events fired by the component\n /\nconst Events = {\n NewCodeRequested: 'newCodeRequested',\n CodeSubmitted: 'codeSubmitted', // Bubbles up from ia-otp-input\n};\n\n/\n Form for entering OTP codes, including success/loading/error states and a request new code button\n /\n@customElement('ia-otp-form')\n@localized()\nexport class IAOTPForm extends LitElement {\n / The state of the validation process /\n @property({ type: String })\n validationStatus: LoadingStatus = 'ready';\n\n / Whether to display a loading indicator instead of the button text /\n @property({ type: Boolean })\n newCodeSending: boolean = false;\n\n / Number of characters to expect for the passcode /\n @property({ type: Number })\n numPasscodeChars: number = 6;\n\n / Whether to restrict entry to numeric characters /\n @property({ type: Boolean })\n numericOnly: boolean = true;\n\n @query('ia-otp-input')\n private OTPInput!: IAOTPInput;\n\n render(): TemplateResult {\n return html`\n <div class=\"input-section\">\n <ia-otp-input\n .numChars=${this.numPasscodeChars}\n ?numericOnly=${this.numericOnly}\n ?disabled=${this.validationStatus === 'loading' \|\|\n this.validationStatus === 'success'}\n ></ia-otp-input>\n <ia-status-indicator\n part=\"status-indicator\"\n .mode=${this.validationStatus}\n ></ia-status-indicator>\n </div>\n ${this.validationStatus === 'error'\n ? html`<p class=\"error-msg\">\n ${msg('The code entered is invalid or expired')}\n </p>`\n : nothing}\n ${this.resendCodeButtonTemplate}\n `;\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (\n changed.has('validationStatus') &&\n this.OTPInput &&\n this.validationStatus === 'error'\n ) {\n this.OTPInput.prefillValue = '';\n }\n\n if (changed.has('newCodeSending') && this.newCodeSending && this.OTPInput) {\n this.OTPInput.prefillValue = '';\n }\n }\n\n / The button to display to send a new code /\n private get resendCodeButtonTemplate(): TemplateResult {\n return this.newCodeSending\n ? html`<span part=\"new-code-message\" class=\"new-code-msg\"\n >${msg('Emailing...')}</span\n >`\n : html`\n <ia-button\n mode=\"link\"\n class=\"new-code-btn\"\n part=\"new-code-button\"\n .disabled=${this.validationStatus === 'loading' \|\|\n this.validationStatus === 'success'}\n @click=${this.handleNewCodeRequested}\n >\n ${msg('Email me another code')}\n </ia-button>\n `;\n }\n\n / Emits an event to request the new code /\n private async handleNewCodeRequested(): Promise<void> {\n this.dispatchEvent(\n new CustomEvent(Events.NewCodeRequested, {\n bubbles: true,\n composed: true,\n }),\n );\n this.OTPInput.prefillValue = '';\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --font-size-standard--: var(--font-size-standard);\n --font-size-lg--: var(--font-size-lg);\n --color-success--: var(--color-success);\n --color-danger--: var(--color-danger);\n --link-color--: var(--link-color);\n\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .input-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 5px;\n }\n\n ia-status-indicator {\n --icon-width: calc(var(--font-size-lg--) 1.33);\n }\n\n .error-msg {\n margin-top: 10px;\n font-size: var(--font-size-standard--);\n color: var(--color-danger--);\n margin-bottom: -10px;\n }\n\n .new-code-msg {\n margin-top: 10px;\n font-size: var(--font-size-standard--);\n color: var(--link-color--);\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n `,\n ];\n }\n}\n"]}

package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-playback-controls.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-playback-controls/ia-playback-controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoCxC;;;;;;GAMG;AACH,~~qBACa~~,kBAAmB,SAAQ,UAAU;IAChD,6CAA6C;IACjB,YAAY,EAAE,YAAY,CAAuB;IAE7E,yDAAyD;IAC7B,YAAY,SAAK;IAE7C,kDAAkD;IACtB,MAAM,SAAK;IAEvC,MAAM,IAAI,cAAc;IAkFxB,OAAO,KAAK,SAAS,GAEpB;IAED;;;;;;;OAOG;IACH,OAAO,KAAK,aAAa,GAExB;IAED,uEAAuE;IACvE,OAAO,KAAK,aAAa,GAExB;IAED;;;;;;;OAOG;IACH,OAAO,KAAK,iBAAiB,GAE5B;IAED;;;;;OAKG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,KAAK,gBAAgB,GAI3B;IAED;;;;;;;OAOG;IACH,OAAO,CAAC,wBAAwB;IAiBhC,wEAAwE;IACxE,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,qBAAqB;IAQ7B,MAAM,KAAK,MAAM,IAAI,cAAc,CAiGlC;CACF"}
1	+ {"version":3,"file":"ia-playback-controls.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-playback-controls/ia-playback-controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAoCxC;;;;;;GAMG;AACH,qBAEa,kBAAmB,SAAQ,UAAU;IAChD,6CAA6C;IACjB,YAAY,EAAE,YAAY,CAAuB;IAE7E,yDAAyD;IAC7B,YAAY,SAAK;IAE7C,kDAAkD;IACtB,MAAM,SAAK;IAEvC,MAAM,IAAI,cAAc;IAkFxB,OAAO,KAAK,SAAS,GAEpB;IAED;;;;;;;OAOG;IACH,OAAO,KAAK,aAAa,GAExB;IAED,uEAAuE;IACvE,OAAO,KAAK,aAAa,GAExB;IAED;;;;;;;OAOG;IACH,OAAO,KAAK,iBAAiB,GAE5B;IAED;;;;;OAKG;IACH,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,KAAK,gBAAgB,GAI3B;IAED;;;;;;;OAOG;IACH,OAAO,CAAC,wBAAwB;IAiBhC,wEAAwE;IACxE,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,qBAAqB;IAQ7B,MAAM,KAAK,MAAM,IAAI,cAAc,CAiGlC;CACF"}

package/dist/src/elements/ia-playback-controls/ia-playback-controls.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
 import { property } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
-import { msg, str } from '@lit/localize';
+import { localized, msg, str } from '@lit/localize';
 import { PlaybackMode } from './models.js';
 import nextSectionIcon from './assets/next-section.js';
 import pauseIcon from './assets/pause.js';
@@ -332,7 +332,8 @@ __decorate([
     property({ type: Number })
 ], IAPlaybackControls.prototype, "volume", void 0);
 IAPlaybackControls = __decorate([
-    customElement('ia-playback-controls')
+    customElement('ia-playback-controls'),
+    localized()
 ], IAPlaybackControls);
 export { IAPlaybackControls };
 //# sourceMappingURL=ia-playback-controls.js.map

package/dist/src/elements/ia-playback-controls/ia-playback-controls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-playback-controls.js","sourceRoot":"","sources":["../../../../src/elements/ia-playback-controls/ia-playback-controls.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;AACzD,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,iBAAiB,MAAM,yBAAyB,CAAC;AACxD,OAAO,mBAAmB,MAAM,2BAA2B,CAAC;AAC5D,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAClD,OAAO,gBAAgB,MAAM,wBAAwB,CAAC;AACtD,OAAO,cAAc,MAAM,sBAAsB,CAAC;AAElD;;GAEG;AACH,MAAM,MAAM,GAAG;IACb,kBAAkB,EAAE,oBAAoB;IACxC,YAAY,EAAE,cAAc;IAC5B,iBAAiB,EAAE,qBAAqB;IACxC,oBAAoB,EAAE,wBAAwB;IAC9C,sBAAsB,EAAE,2BAA2B;IACnD,wBAAwB,EAAE,6BAA6B;IACvD,wBAAwB,EAAE,6BAA6B;CACxD,CAAC;AAEF,qEAAqE;AACrE,MAAM,kBAAkB,GAAG,IAAI,CAAC;AAEhC,4EAA4E;AAC5E,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAC9B,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAE5B,+DAA+D;AAC/D,MAAM,WAAW,GAAG,IAAI,CAAC;AAEzB;;;;;;GAMG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QACL,6CAA6C;QACjB,iBAAY,GAAiB,YAAY,CAAC,MAAM,CAAC;QAE7E,yDAAyD;QAC7B,iBAAY,GAAG,CAAC,CAAC;QAE7C,kDAAkD;QACtB,WAAM,GAAG,CAAC,CAAC;IAwSzC,CAAC;IAtSC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;2BAOY,IAAI,CAAC,iBAAiB;uBAC1B,IAAI,CAAC,wBAAwB;;gBAEpC,iBAAiB;;;;cAInB,IAAI,CAAC,YAAY;;;;;;;uBAOR,GAAG,CAAC,kBAAkB,CAAC;mBAC3B,IAAI,CAAC,uBAAuB;;YAEnC,mBAAmB;;;;;;uBAMR,GAAG,CAAC,uBAAuB,CAAC;mBAChC,IAAI,CAAC,gBAAgB;;YAE5B,UAAU;;;;;uBAKC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;mBAC/C,IAAI,CAAC,qBAAqB;;YAEjC,IAAI,CAAC,mBAAmB;;;;;;uBAMb,GAAG,CAAC,wBAAwB,CAAC;mBACjC,IAAI,CAAC,mBAAmB;;YAE/B,aAAa;;;;;;uBAMF,GAAG,CAAC,cAAc,CAAC;mBACvB,IAAI,CAAC,uBAAuB;;YAEnC,eAAe;;;;;;;;2BAQA,IAAI,CAAC,WAAW;uBACpB,IAAI,CAAC,kBAAkB;;gBAE9B,IAAI,CAAC,gBAAgB;;;;cAIvB,IAAI,CAAC,aAAa;;;;KAI3B,CAAC;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,YAAY,KAAK,YAAY,CAAC,OAAO,CAAC;IACpD,CAAC;IAED;;;;;;;OAOG;IACH,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,uEAAuE;IACvE,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED;;;;;;;OAOG;IACH,IAAY,iBAAiB;QAC3B,OAAO,GAAG,CAAC,GAAG,CAAA,6BAA6B,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IAClE,CAAC;IAED;;;;;OAKG;IACH,IAAY,WAAW;QACrB,OAAO,GAAG,CAAC,GAAG,CAAA,qBAAqB,IAAI,CAAC,aAAa,UAAU,CAAC,CAAC;IACnE,CAAC;IAED,IAAY,mBAAmB;QAC7B,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/C,CAAC;IAED,IAAY,gBAAgB;QAC1B,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC;YAAE,OAAO,cAAc,CAAC;QACnD,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC;YAAE,OAAO,cAAc,CAAC;QACnD,OAAO,gBAAgB,CAAC;IAC1B,CAAC;IAED;;;;;;;OAOG;IACK,wBAAwB;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CACtB,IAAI,CAAC,YAAY,IAAI,iBAAiB,EACtC,iBAAiB,CAClB,CAAC;QACF,IAAI,CAAC,YAAY;YACf,OAAO,IAAI,iBAAiB;gBAC1B,CAAC,CAAC,iBAAiB;gBACnB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,kBAAkB,EAAE,iBAAiB,CAAC,CAAC;QAEhE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAA2B,MAAM,CAAC,kBAAkB,EAAE;YACnE,MAAM,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE;SAC5C,CAAC,CACH,CAAC;IACJ,CAAC;IAED,wEAAwE;IAChE,kBAAkB;QACxB,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,WAAW,EAAE,CAAC,CAAC,CAAC;QAEpE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAqB,MAAM,CAAC,YAAY,EAAE;YACvD,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE;SAChC,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAC1D,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAC7D,CAAC;IAEO,uBAAuB;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACjE,CAAC;IAEO,uBAAuB;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACjE,CAAC;IAEO,qBAAqB;QAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS;YAChC,CAAC,CAAC,YAAY,CAAC,MAAM;YACrB,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC;QAEzB,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FT,CAAC;IACJ,CAAC;CACF,CAAA;AA9S6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkD;AAGjD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAkB;AAGjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAY;AAR5B,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAgT9B","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';\nimport { msg, str } from '@lit/localize';\n\nimport { PlaybackMode } from './models';\n\nimport nextSectionIcon from './assets/next-section';\nimport pauseIcon from './assets/pause';\nimport playIcon from './assets/play';\nimport playbackSpeedIcon from './assets/playback-speed';\nimport previousSectionIcon from './assets/previous-section';\nimport replayIcon from './assets/replay';\nimport skipAheadIcon from './assets/skip-ahead';\nimport volumeFullIcon from './assets/volume-full';\nimport volumeMediumIcon from './assets/volume-medium';\nimport volumeMuteIcon from './assets/volume-mute';\n\n/*\n Event names emitted by this component\n /\nconst Events = {\n PlaybackRateChange: 'playbackRateChange',\n VolumeChange: 'volumeChange',\n BackButtonPressed: 'back-button-pressed',\n ForwardButtonPressed: 'forward-button-pressed',\n PlayPauseButtonPressed: 'play-pause-button-pressed',\n PrevSectionButtonPressed: 'prev-section-button-pressed',\n NextSectionButtonPressed: 'next-section-button-pressed',\n};\n\n/* How much one press of the speed button moves the playback rate /\nconst PLAYBACK_RATE_STEP = 0.25;\n\n/* The rate the speed button wraps back around to once it passes the top /\nconst MIN_PLAYBACK_RATE = 0.5;\nconst MAX_PLAYBACK_RATE = 2;\n\n/* How much one press of the volume button moves the volume /\nconst VOLUME_STEP = 0.25;\n\n/\n The transport controls for a player: play and pause, skip back and forward\n * ten seconds, jump between sections, and cycle the speed and volume.\n \n The element owns no playback itself. It reports presses and lets whatever is\n * playing the audio decide what to do with them.\n /\n@customElement('ia-playback-controls')\nexport class IAPlaybackControls extends LitElement {\n /* Whether the track is playing or paused /\n @property({ type: String }) playbackMode: PlaybackMode = PlaybackMode.paused;\n\n /* Playback speed multiplier, where 1 is normal speed /\n @property({ type: Number }) playbackRate = 1;\n\n /* Playback volume, from 0 (muted) to 1 (full) /\n @property({ type: Number }) volume = 1;\n\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div class=\"vertical-button-stack playback-speed\">\n <div class=\"vertical-button-container\">\n <button\n id=\"playback-rate-btn\"\n class=\"unstyled-button\"\n aria-label=${this.playbackRateLabel}\n @click=${this.handlePlaybackRateChange}\n >\n ${playbackSpeedIcon}\n </button>\n </div>\n <div class=\"vertical-button-value\" aria-hidden=\"true\">\n ${this.playbackRate}x\n </div>\n </div>\n\n <button\n id=\"prev-section-btn\"\n class=\"jump-btn unstyled-button\"\n aria-label=${msg('Previous section')}\n @click=${this.handlePrevSectionButton}\n >\n ${previousSectionIcon}\n </button>\n\n <button\n id=\"back-btn\"\n class=\"jump-btn unstyled-button\"\n aria-label=${msg('Skip back ten seconds')}\n @click=${this.handleBackButton}\n >\n ${replayIcon}\n </button>\n\n <button\n id=\"play-pause-btn\"\n aria-label=${this.isPlaying ? msg('Pause') : msg('Play')}\n @click=${this.handlePlayPauseButton}\n >\n ${this.playPauseButtonIcon}\n </button>\n\n <button\n id=\"forward-btn\"\n class=\"jump-btn unstyled-button\"\n aria-label=${msg('Skip ahead ten seconds')}\n @click=${this.handleForwardButton}\n >\n ${skipAheadIcon}\n </button>\n\n <button\n id=\"next-section-btn\"\n class=\"jump-btn unstyled-button\"\n aria-label=${msg('Next section')}\n @click=${this.handleNextSectionButton}\n >\n ${nextSectionIcon}\n </button>\n\n <div class=\"vertical-button-stack volume\">\n <div class=\"vertical-button-container\">\n <button\n id=\"volume-control-btn\"\n class=\"unstyled-button\"\n aria-label=${this.volumeLabel}\n @click=${this.handleVolumeChange}\n >\n ${this.volumeButtonIcon}\n </button>\n </div>\n <div class=\"vertical-button-value\" aria-hidden=\"true\">\n ${this.volumePercent}%\n </div>\n </div>\n </div>\n `;\n }\n\n private get isPlaying(): boolean {\n return this.playbackMode === PlaybackMode.playing;\n }\n\n /\n The volume held to the 0 to 1 range the controls can represent.\n \n `volume` is a public property, so it can arrive out of range or as\n * something that isn't a number at all. Everything that displays, announces\n * or steps the volume reads it through here, so an impossible value never\n * reaches the screen reader.\n /\n private get clampedVolume(): number {\n return Math.min(Math.max(this.volume \|\| 0, 0), 1);\n }\n\n /* The volume as a whole number, for display and for screen readers /\n private get volumePercent(): number {\n return Math.round(this.clampedVolume 100);\n }\n\n /*\n The accessible name for the speed button.\n \n The rate is left bare rather than followed by a unit like \"times\", because\n * `@lit/localize` has no plural support, so a unit baked into the string\n * reads wrong at 1 and translators have no way to correct it. The visible\n * label beside the button carries the \"x\".\n /\n private get playbackRateLabel(): string {\n return msg(str`Playback speed, currently ${this.playbackRate}`);\n }\n\n /\n The accessible name for the volume button.\n \n \"percent\" is safe to include, unlike a pluralised unit: it reads correctly\n * at every value.\n /\n private get volumeLabel(): string {\n return msg(str`Volume, currently ${this.volumePercent} percent`);\n }\n\n private get playPauseButtonIcon(): TemplateResult {\n return this.isPlaying ? pauseIcon : playIcon;\n }\n\n private get volumeButtonIcon(): TemplateResult {\n if (this.clampedVolume <= 0) return volumeMuteIcon;\n if (this.clampedVolume >= 1) return volumeFullIcon;\n return volumeMediumIcon;\n }\n\n /\n Steps the playback rate up, wrapping back to the slowest once it reaches\n * the fastest.\n \n The rate is clamped on the way in as well as the way out, so a rate set\n * from outside the range lands back on the documented steps rather than\n * drifting off the grid, overshooting the top, or climbing forever.\n /\n private handlePlaybackRateChange(): void {\n const current = Math.max(\n this.playbackRate \|\| MIN_PLAYBACK_RATE,\n MIN_PLAYBACK_RATE,\n );\n this.playbackRate =\n current >= MAX_PLAYBACK_RATE\n ? MIN_PLAYBACK_RATE\n : Math.min(current + PLAYBACK_RATE_STEP, MAX_PLAYBACK_RATE);\n\n this.dispatchEvent(\n new CustomEvent<{ playbackRate: number }>(Events.PlaybackRateChange, {\n detail: { playbackRate: this.playbackRate },\n }),\n );\n }\n\n /* Steps the volume up, wrapping round to muted once it passes full. /\n private handleVolumeChange(): void {\n const current = this.clampedVolume;\n this.volume = current >= 1 ? 0 : Math.min(current + VOLUME_STEP, 1);\n\n this.dispatchEvent(\n new CustomEvent<{ volume: number }>(Events.VolumeChange, {\n detail: { volume: this.volume },\n }),\n );\n }\n\n private handleBackButton(): void {\n this.dispatchEvent(new Event(Events.BackButtonPressed));\n }\n\n private handleForwardButton(): void {\n this.dispatchEvent(new Event(Events.ForwardButtonPressed));\n }\n\n private handlePrevSectionButton(): void {\n this.dispatchEvent(new Event(Events.PrevSectionButtonPressed));\n }\n\n private handleNextSectionButton(): void {\n this.dispatchEvent(new Event(Events.NextSectionButtonPressed));\n }\n\n private handlePlayPauseButton(): void {\n this.playbackMode = this.isPlaying\n ? PlaybackMode.paused\n : PlaybackMode.playing;\n\n this.dispatchEvent(new Event(Events.PlayPauseButtonPressed));\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n --playback-controls-icon-color--: var(\n --ia-theme-playback-controls-icon-color,\n #fff\n );\n --playback-controls-play-icon-color--: var(\n --ia-theme-playback-controls-play-icon-color,\n #333\n );\n --playback-controls-play-button-color--: var(\n --ia-theme-playback-controls-play-button-color,\n #fff\n );\n --playback-controls-play-button-diameter--: var(\n --ia-theme-playback-controls-play-button-diameter,\n 4rem\n );\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n\n .container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: var(--playback-controls-icon-color--);\n width: 100%;\n }\n\n .vertical-button-stack {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .vertical-button-container {\n text-align: center;\n }\n\n .vertical-button-container button,\n .vertical-button-container svg {\n vertical-align: bottom;\n }\n\n .vertical-button-value {\n font-size: 0.7em;\n line-height: 1.4em;\n text-align: center;\n }\n\n #play-pause-btn {\n border-radius: 50%;\n / Buttons are border-box, so the UA's default padding would eat into\n the icon's content box and shrink the glyph relative to the circle\n by a different amount at every diameter. /\n padding: 0;\n height: var(--playback-controls-play-button-diameter--);\n width: var(--playback-controls-play-button-diameter--);\n border: none;\n background-color: var(--playback-controls-play-button-color--);\n color: var(--playback-controls-play-icon-color--);\n vertical-align: middle;\n }\n\n #play-pause-btn:active {\n opacity: 0.75;\n }\n\n #play-pause-btn svg {\n width: 100%;\n height: 100%;\n }\n\n .unstyled-button {\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n / Buttons don't inherit color from their parent, so the icons'\n currentColor needs it passed down explicitly. */\n color: inherit;\n }\n\n button {\n cursor: pointer;\n }\n\n .jump-btn:active {\n opacity: 0.75;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-playback-controls.js","sourceRoot":"","sources":["../../../../src/elements/ia-playback-controls/ia-playback-controls.ts"],"names":[],"mappings":"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","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';\nimport { localized, msg, str } from '@lit/localize';\n\nimport { PlaybackMode } from './models';\n\nimport nextSectionIcon from './assets/next-section';\nimport pauseIcon from './assets/pause';\nimport playIcon from './assets/play';\nimport playbackSpeedIcon from './assets/playback-speed';\nimport previousSectionIcon from './assets/previous-section';\nimport replayIcon from './assets/replay';\nimport skipAheadIcon from './assets/skip-ahead';\nimport volumeFullIcon from './assets/volume-full';\nimport volumeMediumIcon from './assets/volume-medium';\nimport volumeMuteIcon from './assets/volume-mute';\n\n/*\n Event names emitted by this component\n /\nconst Events = {\n PlaybackRateChange: 'playbackRateChange',\n VolumeChange: 'volumeChange',\n BackButtonPressed: 'back-button-pressed',\n ForwardButtonPressed: 'forward-button-pressed',\n PlayPauseButtonPressed: 'play-pause-button-pressed',\n PrevSectionButtonPressed: 'prev-section-button-pressed',\n NextSectionButtonPressed: 'next-section-button-pressed',\n};\n\n/* How much one press of the speed button moves the playback rate /\nconst PLAYBACK_RATE_STEP = 0.25;\n\n/* The rate the speed button wraps back around to once it passes the top /\nconst MIN_PLAYBACK_RATE = 0.5;\nconst MAX_PLAYBACK_RATE = 2;\n\n/* How much one press of the volume button moves the volume /\nconst VOLUME_STEP = 0.25;\n\n/\n The transport controls for a player: play and pause, skip back and forward\n * ten seconds, jump between sections, and cycle the speed and volume.\n \n The element owns no playback itself. It reports presses and lets whatever is\n * playing the audio decide what to do with them.\n /\n@customElement('ia-playback-controls')\n@localized()\nexport class IAPlaybackControls extends LitElement {\n /* Whether the track is playing or paused /\n @property({ type: String }) playbackMode: PlaybackMode = PlaybackMode.paused;\n\n /* Playback speed multiplier, where 1 is normal speed /\n @property({ type: Number }) playbackRate = 1;\n\n /* Playback volume, from 0 (muted) to 1 (full) /\n @property({ type: Number }) volume = 1;\n\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div class=\"vertical-button-stack playback-speed\">\n <div class=\"vertical-button-container\">\n <button\n id=\"playback-rate-btn\"\n class=\"unstyled-button\"\n aria-label=${this.playbackRateLabel}\n @click=${this.handlePlaybackRateChange}\n >\n ${playbackSpeedIcon}\n </button>\n </div>\n <div class=\"vertical-button-value\" aria-hidden=\"true\">\n ${this.playbackRate}x\n </div>\n </div>\n\n <button\n id=\"prev-section-btn\"\n class=\"jump-btn unstyled-button\"\n aria-label=${msg('Previous section')}\n @click=${this.handlePrevSectionButton}\n >\n ${previousSectionIcon}\n </button>\n\n <button\n id=\"back-btn\"\n class=\"jump-btn unstyled-button\"\n aria-label=${msg('Skip back ten seconds')}\n @click=${this.handleBackButton}\n >\n ${replayIcon}\n </button>\n\n <button\n id=\"play-pause-btn\"\n aria-label=${this.isPlaying ? msg('Pause') : msg('Play')}\n @click=${this.handlePlayPauseButton}\n >\n ${this.playPauseButtonIcon}\n </button>\n\n <button\n id=\"forward-btn\"\n class=\"jump-btn unstyled-button\"\n aria-label=${msg('Skip ahead ten seconds')}\n @click=${this.handleForwardButton}\n >\n ${skipAheadIcon}\n </button>\n\n <button\n id=\"next-section-btn\"\n class=\"jump-btn unstyled-button\"\n aria-label=${msg('Next section')}\n @click=${this.handleNextSectionButton}\n >\n ${nextSectionIcon}\n </button>\n\n <div class=\"vertical-button-stack volume\">\n <div class=\"vertical-button-container\">\n <button\n id=\"volume-control-btn\"\n class=\"unstyled-button\"\n aria-label=${this.volumeLabel}\n @click=${this.handleVolumeChange}\n >\n ${this.volumeButtonIcon}\n </button>\n </div>\n <div class=\"vertical-button-value\" aria-hidden=\"true\">\n ${this.volumePercent}%\n </div>\n </div>\n </div>\n `;\n }\n\n private get isPlaying(): boolean {\n return this.playbackMode === PlaybackMode.playing;\n }\n\n /\n The volume held to the 0 to 1 range the controls can represent.\n \n `volume` is a public property, so it can arrive out of range or as\n * something that isn't a number at all. Everything that displays, announces\n * or steps the volume reads it through here, so an impossible value never\n * reaches the screen reader.\n /\n private get clampedVolume(): number {\n return Math.min(Math.max(this.volume \|\| 0, 0), 1);\n }\n\n /* The volume as a whole number, for display and for screen readers /\n private get volumePercent(): number {\n return Math.round(this.clampedVolume 100);\n }\n\n /*\n The accessible name for the speed button.\n \n The rate is left bare rather than followed by a unit like \"times\", because\n * `@lit/localize` has no plural support, so a unit baked into the string\n * reads wrong at 1 and translators have no way to correct it. The visible\n * label beside the button carries the \"x\".\n /\n private get playbackRateLabel(): string {\n return msg(str`Playback speed, currently ${this.playbackRate}`);\n }\n\n /\n The accessible name for the volume button.\n \n \"percent\" is safe to include, unlike a pluralised unit: it reads correctly\n * at every value.\n /\n private get volumeLabel(): string {\n return msg(str`Volume, currently ${this.volumePercent} percent`);\n }\n\n private get playPauseButtonIcon(): TemplateResult {\n return this.isPlaying ? pauseIcon : playIcon;\n }\n\n private get volumeButtonIcon(): TemplateResult {\n if (this.clampedVolume <= 0) return volumeMuteIcon;\n if (this.clampedVolume >= 1) return volumeFullIcon;\n return volumeMediumIcon;\n }\n\n /\n Steps the playback rate up, wrapping back to the slowest once it reaches\n * the fastest.\n \n The rate is clamped on the way in as well as the way out, so a rate set\n * from outside the range lands back on the documented steps rather than\n * drifting off the grid, overshooting the top, or climbing forever.\n /\n private handlePlaybackRateChange(): void {\n const current = Math.max(\n this.playbackRate \|\| MIN_PLAYBACK_RATE,\n MIN_PLAYBACK_RATE,\n );\n this.playbackRate =\n current >= MAX_PLAYBACK_RATE\n ? MIN_PLAYBACK_RATE\n : Math.min(current + PLAYBACK_RATE_STEP, MAX_PLAYBACK_RATE);\n\n this.dispatchEvent(\n new CustomEvent<{ playbackRate: number }>(Events.PlaybackRateChange, {\n detail: { playbackRate: this.playbackRate },\n }),\n );\n }\n\n /* Steps the volume up, wrapping round to muted once it passes full. /\n private handleVolumeChange(): void {\n const current = this.clampedVolume;\n this.volume = current >= 1 ? 0 : Math.min(current + VOLUME_STEP, 1);\n\n this.dispatchEvent(\n new CustomEvent<{ volume: number }>(Events.VolumeChange, {\n detail: { volume: this.volume },\n }),\n );\n }\n\n private handleBackButton(): void {\n this.dispatchEvent(new Event(Events.BackButtonPressed));\n }\n\n private handleForwardButton(): void {\n this.dispatchEvent(new Event(Events.ForwardButtonPressed));\n }\n\n private handlePrevSectionButton(): void {\n this.dispatchEvent(new Event(Events.PrevSectionButtonPressed));\n }\n\n private handleNextSectionButton(): void {\n this.dispatchEvent(new Event(Events.NextSectionButtonPressed));\n }\n\n private handlePlayPauseButton(): void {\n this.playbackMode = this.isPlaying\n ? PlaybackMode.paused\n : PlaybackMode.playing;\n\n this.dispatchEvent(new Event(Events.PlayPauseButtonPressed));\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n --playback-controls-icon-color--: var(\n --ia-theme-playback-controls-icon-color,\n #fff\n );\n --playback-controls-play-icon-color--: var(\n --ia-theme-playback-controls-play-icon-color,\n #333\n );\n --playback-controls-play-button-color--: var(\n --ia-theme-playback-controls-play-button-color,\n #fff\n );\n --playback-controls-play-button-diameter--: var(\n --ia-theme-playback-controls-play-button-diameter,\n 4rem\n );\n\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n }\n\n .container {\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: var(--playback-controls-icon-color--);\n width: 100%;\n }\n\n .vertical-button-stack {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n\n .vertical-button-container {\n text-align: center;\n }\n\n .vertical-button-container button,\n .vertical-button-container svg {\n vertical-align: bottom;\n }\n\n .vertical-button-value {\n font-size: 0.7em;\n line-height: 1.4em;\n text-align: center;\n }\n\n #play-pause-btn {\n border-radius: 50%;\n / Buttons are border-box, so the UA's default padding would eat into\n the icon's content box and shrink the glyph relative to the circle\n by a different amount at every diameter. /\n padding: 0;\n height: var(--playback-controls-play-button-diameter--);\n width: var(--playback-controls-play-button-diameter--);\n border: none;\n background-color: var(--playback-controls-play-button-color--);\n color: var(--playback-controls-play-icon-color--);\n vertical-align: middle;\n }\n\n #play-pause-btn:active {\n opacity: 0.75;\n }\n\n #play-pause-btn svg {\n width: 100%;\n height: 100%;\n }\n\n .unstyled-button {\n background: none;\n border: none;\n margin: 0;\n padding: 0;\n / Buttons don't inherit color from their parent, so the icons'\n currentColor needs it passed down explicitly. */\n color: inherit;\n }\n\n button {\n cursor: pointer;\n }\n\n .jump-btn:active {\n opacity: 0.75;\n }\n `;\n }\n}\n"]}

package/dist/src/elements/ia-radio-player/ia-radio-player.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-radio-player.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-radio-player.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EACV,gBAAgB,EAEjB,MAAM,yCAAyC,CAAC;AAKjD,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGtE,OAAO,iDAAiD,CAAC;AACzD,OAAO,iEAAiE,CAAC;AACzE,OAAO,yDAAyD,CAAC;AACjE,OAAO,+CAA+C,CAAC;AACvD,OAAO,uDAAuD,CAAC;AAC/D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,yDAAyD,CAAC;AACjE,OAAO,8BAA8B,CAAC;AAqCtC;;;;;;GAMG;AACH,~~qBACa~~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"}
1	+ {"version":3,"file":"ia-radio-player.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-radio-player/ia-radio-player.ts"],"names":[],"mappings":"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"}