@internetarchive/elements 0.3.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/elements/ia-audio-element/ia-audio-element.d.ts.map +1 -1
- package/dist/src/elements/ia-audio-element/ia-audio-element.js +2 -1
- package/dist/src/elements/ia-audio-element/ia-audio-element.js.map +1 -1
- package/dist/src/elements/ia-button/ia-button.d.ts.map +1 -1
- package/dist/src/elements/ia-button/ia-button.js +2 -1
- package/dist/src/elements/ia-button/ia-button.js.map +1 -1
- package/dist/src/elements/ia-combo-box/ia-combo-box.d.ts.map +1 -1
- package/dist/src/elements/ia-combo-box/ia-combo-box.js +2 -1
- package/dist/src/elements/ia-combo-box/ia-combo-box.js.map +1 -1
- package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.d.ts.map +1 -1
- package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js +2 -1
- package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js.map +1 -1
- package/dist/src/elements/ia-expandable-search-bar/ia-expandable-search-bar.d.ts.map +1 -1
- package/dist/src/elements/ia-expandable-search-bar/ia-expandable-search-bar.js +2 -1
- package/dist/src/elements/ia-expandable-search-bar/ia-expandable-search-bar.js.map +1 -1
- package/dist/src/elements/ia-expandable-search-bar/ia-quick-search.d.ts.map +1 -1
- package/dist/src/elements/ia-expandable-search-bar/ia-quick-search.js +2 -1
- package/dist/src/elements/ia-expandable-search-bar/ia-quick-search.js.map +1 -1
- package/dist/src/elements/ia-image-viewer/ia-image-viewer.d.ts +147 -0
- package/dist/src/elements/ia-image-viewer/ia-image-viewer.d.ts.map +1 -0
- package/dist/src/elements/ia-image-viewer/ia-image-viewer.js +534 -0
- package/dist/src/elements/ia-image-viewer/ia-image-viewer.js.map +1 -0
- package/dist/src/elements/ia-image-viewer/ia-imgview-controls.d.ts +22 -0
- package/dist/src/elements/ia-image-viewer/ia-imgview-controls.d.ts.map +1 -0
- package/dist/src/elements/ia-image-viewer/ia-imgview-controls.js +146 -0
- package/dist/src/elements/ia-image-viewer/ia-imgview-controls.js.map +1 -0
- package/dist/src/elements/ia-image-viewer/ia-imgview-slide.d.ts +44 -0
- package/dist/src/elements/ia-image-viewer/ia-imgview-slide.d.ts.map +1 -0
- package/dist/src/elements/ia-image-viewer/ia-imgview-slide.js +214 -0
- package/dist/src/elements/ia-image-viewer/ia-imgview-slide.js.map +1 -0
- package/dist/src/elements/ia-image-viewer/image-viewer-gestures.d.ts +79 -0
- package/dist/src/elements/ia-image-viewer/image-viewer-gestures.d.ts.map +1 -0
- package/dist/src/elements/ia-image-viewer/image-viewer-gestures.js +254 -0
- package/dist/src/elements/ia-image-viewer/image-viewer-gestures.js.map +1 -0
- package/dist/src/elements/ia-image-viewer/models.d.ts +20 -0
- package/dist/src/elements/ia-image-viewer/models.d.ts.map +1 -0
- package/dist/src/elements/ia-image-viewer/models.js +2 -0
- package/dist/src/elements/ia-image-viewer/models.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.d.ts.map +1 -1
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.js +2 -1
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.js.map +1 -1
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts.map +1 -1
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js +2 -1
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js.map +1 -1
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts.map +1 -1
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js +2 -1
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js.map +1 -1
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts.map +1 -1
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js +2 -1
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js.map +1 -1
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts.map +1 -1
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js +2 -1
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js.map +1 -1
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts.map +1 -1
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js +2 -1
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js.map +1 -1
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts.map +1 -1
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js +2 -1
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js.map +1 -1
- package/dist/src/elements/ia-otp-form/ia-otp-form.d.ts.map +1 -1
- package/dist/src/elements/ia-otp-form/ia-otp-form.js +2 -1
- package/dist/src/elements/ia-otp-form/ia-otp-form.js.map +1 -1
- package/dist/src/elements/ia-otp-input/ia-otp-input.d.ts.map +1 -1
- package/dist/src/elements/ia-otp-input/ia-otp-input.js +2 -1
- package/dist/src/elements/ia-otp-input/ia-otp-input.js.map +1 -1
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.d.ts.map +1 -1
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.js +2 -1
- package/dist/src/elements/ia-playback-controls/ia-playback-controls.js.map +1 -1
- package/dist/src/elements/ia-radio-player/ia-radio-player.d.ts.map +1 -1
- package/dist/src/elements/ia-radio-player/ia-radio-player.js +2 -1
- package/dist/src/elements/ia-radio-player/ia-radio-player.js.map +1 -1
- package/dist/src/elements/ia-radio-player/ia-search-results-switcher.d.ts.map +1 -1
- package/dist/src/elements/ia-radio-player/ia-search-results-switcher.js +2 -1
- package/dist/src/elements/ia-radio-player/ia-search-results-switcher.js.map +1 -1
- package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.d.ts.map +1 -1
- package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.js +2 -1
- package/dist/src/elements/ia-scrubber-bar/ia-scrubber-bar.js.map +1 -1
- package/dist/src/elements/ia-scrubber-bar/ia-section-marker.d.ts.map +1 -1
- package/dist/src/elements/ia-scrubber-bar/ia-section-marker.js +2 -1
- package/dist/src/elements/ia-scrubber-bar/ia-section-marker.js.map +1 -1
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.js +1 -1
- package/dist/src/elements/ia-sr-only-text/ia-sr-only-text.js.map +1 -1
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts.map +1 -1
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.js +2 -1
- package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map +1 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-entry.d.ts.map +1 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-entry.js +2 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-entry.js.map +1 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.d.ts.map +1 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.js +2 -1
- package/dist/src/elements/ia-transcript-view/ia-transcript-view.js.map +1 -1
- package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.d.ts.map +1 -1
- package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.js +2 -1
- package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.js.map +1 -1
- package/dist/src/elements/index.d.ts +1 -0
- package/dist/src/elements/index.d.ts.map +1 -1
- package/dist/src/elements/index.js +1 -0
- package/dist/src/elements/index.js.map +1 -1
- package/dist/src/labs/ia-snow/ia-snow.js +1 -1
- package/dist/src/labs/ia-snow/ia-snow.js.map +1 -1
- package/dist/src/util/custom-element.d.ts +39 -0
- package/dist/src/util/custom-element.d.ts.map +1 -0
- package/dist/src/util/custom-element.js +50 -0
- package/dist/src/util/custom-element.js.map +1 -0
- package/dist/src/util/prefers-reduced-motion.d.ts +10 -0
- package/dist/src/util/prefers-reduced-motion.d.ts.map +1 -0
- package/dist/src/util/prefers-reduced-motion.js +12 -0
- package/dist/src/util/prefers-reduced-motion.js.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-itemnav-menu-slider.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,OAAO,GAIR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAIlC,MAAM,YAAY,GAAG;IACnB,WAAW,EAAE,kBAAkB;IAC/B,UAAU,EAAE,iBAAiB;CAC9B,CAAC;AAEF;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QACsB,UAAK,GAA4B,EAAE,CAAC;QAE/D;;;;WAIG;QACyB,iBAAY,GAAG,EAAE,CAAC;QAElB,uBAAkB,GAEzB,OAAO,CAAC;QAQ7B,mEAAmE;QAC3D,kBAAa,GAAG,IAAI,CAAC;IAgX/B,CAAC;IA9WW,OAAO,CAAC,OAAuB;QACvC,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,YAAY,IAAI,OAAO,CAAC;QACvE,IAAI,YAAY,KAAK,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC7C,IAAI,CAAC,kBAAkB,GAAG,YAAY,CAAC;QACzC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAW,CAAC,CAAC;QACpE,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAED;;;OAGG;IACK,qBAAqB,CAAC,YAAoB;QAChD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;QACtB,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;QAC5C,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,MAAc;QAClC,MAAM,OAAO,GACX,IAAI,CAAC,QAAQ,EAAE,gBAAgB,CAC7B,wBAAwB,CACzB,IAAI,EAAE,CAAC;QACV,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC;IACnE,CAAC;IAED;;;;OAIG;IACH,WAAW;QACT,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QACD,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,EAAE,aAAa,CAClD,wBAAwB,CACzB,CAAC;QACF,CAAC,eAAe,IAAI,IAAI,CAAC,iBAAiB,CAAC,EAAE,KAAK,EAAE,CAAC;IACvD,CAAC;IAED,oDAAoD;IACpD,SAAS;QACP,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,CAAC,WAAW,EAAE;YACxC,MAAM,EAAE,IAAI,CAAC,mBAAmB;SACjC,CAAC,CACH,CAAC;IACJ,CAAC;IAED,uDAAuD;IACvD,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,CAAC,UAAU,EAAE;YACvC,MAAM,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE;SAClC,CAAC,CACH,CAAC;IACJ,CAAC;IAED,sDAAsD;IACtD,aAAa,CAAC,KAAoB;QAChC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ;YAAE,OAAO;QACnC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;IACH,CAAC;IAED,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC;IAClE,CAAC;IAED,YAAY;IAEZ,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CACnB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;oBAGA,IAAI,CAAC,IAAI;qBACR,IAAI,CAAC,KAAK;2BACJ,IAAI,CAAC,WAAW,IAAI,EAAE;wBACzB,IAAI,CAAC,EAAE;wBACP,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,YAAY;0BAC3B,IAAI,CAAC,UAAU,IAAI,KAAK;oBAC9B,IAAI,CAAC,IAAI,IAAI,EAAE;;;OAG5B,CACF,CAAC;IACJ,CAAC;IAED,IAAI,gBAAgB;QAClB,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,mBAAmB,IAAI,EAAE,CAAC;QACxE,sEAAsE;QACtE,wEAAwE;QACxE,wEAAwE;QACxE,MAAM,SAAS,GAAG,IAAI,CAAC,kBAAkB,KAAK,OAAO,CAAC;QACtD,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;QAC7D,MAAM,WAAW,GAAG,SAAS;YAC3B,CAAC,CAAC,IAAI,CAAA,+BAA+B,IAAI,CAAC,kBAAkB,SAAS;YACrE,CAAC,CAAC,OAAO,CAAC;QACZ,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC;QACjE,OAAO,IAAI,CAAA;sBACO,WAAW;;iCAEA,KAAK;wCACE,WAAW;;UAEzC,WAAW;;;uBAGE,UAAU;kBACf,UAAU;mBACT,IAAI,CAAC,UAAU;;YAEtB,mBAAmB;;;KAG1B,CAAC;IACJ,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;;;iBAKE,IAAI,CAAC,SAAS;;UAErB,mBAAmB;;KAExB,CAAC;IACJ,CAAC;IAED,kBAAkB;IAClB,MAAM;QACJ,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;QACtC,OAAO,IAAI,CAAA;mCACoB,IAAI,CAAC,aAAa;;YAEzC,IAAI,CAAC,WAAW;;cAEd,IAAI,CAAC,SAAS;;;;;;6BAMC,IAAI,CAAC,iBAAiB;;;;qBAI9B,CAAC,SAAS;;cAEjB,IAAI,CAAC,gBAAgB;;;kBAGjB,IAAI,CAAC,mBAAmB,EAAE,SAAS,IAAI,OAAO;;;;;;KAM3D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,MAAM,CAAC;QAClC,MAAM,WAAW,GAAG,GAAG,CAAA,oCAAoC,CAAC;QAC5D,MAAM,gBAAgB,GAAG,GAAG,CAAA,0CAA0C,CAAC;QAEvE,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAyDU,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAiFZ,eAAe;;uCAEM,WAAW;;;wBAG1B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCjC;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AApY4B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAqC;AAOnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAEE;AAEF;IAA1B,KAAK,CAAC,UAAU,CAAC;kDAA6B;AAElB;IAA5B,KAAK,CAAC,YAAY,CAAC;qDAAqC;AAElB;IAAtC,KAAK,CAAC,sBAAsB,CAAC;8DAAyC;AAlB5D,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAqY/B","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport { collapseSidebarIcon } from './icons';\nimport './ia-itemnav-menu-button';\nimport type { IAItemNavMenuButton } from './ia-itemnav-menu-button';\nimport { MenuProviderInterface } from './interfaces/menu-interfaces';\n\nconst sliderEvents = {\n closeDrawer: 'menuSliderClosed',\n closePanel: 'menuPanelClosed',\n};\n\n/**\n * The sliding drawer that lists the navigator's menu providers and renders the\n * body of whichever provider is currently selected.\n */\n@customElement('ia-itemnav-menu-slider')\nexport class IAItemNavMenuSlider extends LitElement {\n @property({ type: Array }) menus: MenuProviderInterface[] = [];\n\n /**\n * Which panel is open. The navigator owns this — the slider only reports\n * what the user did and renders whatever comes back, so there is one copy\n * of the state rather than two that have to agree.\n */\n @property({ type: String }) selectedMenu = '';\n\n @property({ type: Object }) selectedMenuAction:\n | TemplateResult\n | typeof nothing = nothing;\n\n @query('.content') private panel?: HTMLElement;\n\n @query('.menu-list') private menuList?: HTMLUListElement;\n\n @query('.menu > button.close') private drawerCloseButton?: HTMLElement;\n\n /** Focus should follow what the user did, not the first render. */\n private isFirstRender = true;\n\n protected updated(changed: PropertyValues): void {\n const actionButton = this.selectedMenuDetails?.actionButton || nothing;\n if (actionButton !== this.selectedMenuAction) {\n this.selectedMenuAction = actionButton;\n }\n\n if (!this.isFirstRender && changed.has('selectedMenu')) {\n this.moveFocusForSelection(changed.get('selectedMenu') as string);\n }\n this.isFirstRender = false;\n }\n\n /**\n * Opening a panel moves focus into it, so it is announced by name; closing\n * hands focus back to the button that opened it.\n */\n private moveFocusForSelection(previousMenu: string): void {\n if (this.selectedMenu) {\n this.panel?.focus();\n } else if (previousMenu) {\n this.menuButtonFor(previousMenu)?.focus();\n }\n }\n\n private menuButtonFor(menuId: string): IAItemNavMenuButton | undefined {\n const buttons =\n this.menuList?.querySelectorAll<IAItemNavMenuButton>(\n 'ia-itemnav-menu-button',\n ) ?? [];\n return [...buttons].find((button) => button.buttonId === menuId);\n }\n\n /**\n * Moves focus into the drawer — the open panel if there is one, otherwise\n * the first thing worth acting on. Exposed so the navigator doesn't have to\n * reach through this component's shadow DOM to place focus.\n */\n focusDrawer(): void {\n if (this.selectedMenu) {\n this.panel?.focus();\n return;\n }\n const firstMenuButton = this.menuList?.querySelector<HTMLElement>(\n 'ia-itemnav-menu-button',\n );\n (firstMenuButton ?? this.drawerCloseButton)?.focus();\n }\n\n /** Asks the navigator to close the whole drawer. */\n closeMenu(): void {\n this.dispatchEvent(\n new CustomEvent(sliderEvents.closeDrawer, {\n detail: this.selectedMenuDetails,\n }),\n );\n }\n\n /** Asks the navigator to close just the open panel. */\n closePanel(): void {\n this.dispatchEvent(\n new CustomEvent(sliderEvents.closePanel, {\n detail: { id: this.selectedMenu },\n }),\n );\n }\n\n /** Escape closes the panel first, then the drawer. */\n handleKeyDown(event: KeyboardEvent): void {\n if (event.key !== 'Escape') return;\n event.preventDefault();\n if (this.selectedMenu) {\n this.closePanel();\n } else {\n this.closeMenu();\n }\n }\n\n get selectedMenuDetails(): MenuProviderInterface | undefined {\n return this.menus.find((menu) => menu.id === this.selectedMenu);\n }\n\n /* render */\n\n get selectedMenuClass(): string {\n return this.selectedMenu ? 'open' : '';\n }\n\n get menuItems(): TemplateResult[] {\n return this.menus.map(\n (menu) => html`\n <li>\n <ia-itemnav-menu-button\n .icon=${menu.icon}\n .label=${menu.label}\n .menuDetails=${menu.menuDetails || ''}\n .buttonId=${menu.id}\n .selected=${menu.id === this.selectedMenu}\n .followable=${menu.followable || false}\n .href=${menu.href || ''}\n ></ia-itemnav-menu-button>\n </li>\n `,\n );\n }\n\n get renderMenuHeader(): TemplateResult {\n const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};\n // `selectedMenuAction` defaults to Lit's `nothing` sentinel, which is\n // truthy — so compare against it explicitly, otherwise the header would\n // always get the secondary-action treatment (and an empty action span).\n const hasAction = this.selectedMenuAction !== nothing;\n const headerClass = hasAction ? 'with-secondary-action' : '';\n const actionBlock = hasAction\n ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n : nothing;\n const closeLabel = label ? `Close ${label}` : 'Close this panel';\n return html`\n <header class=${headerClass}>\n <div class=\"details\">\n <h3 id=\"panel-title\">${label}</h3>\n <span class=\"extra-details\">${menuDetails}</span>\n </div>\n ${actionBlock}\n <button\n class=\"close\"\n aria-label=${closeLabel}\n title=${closeLabel}\n @click=${this.closePanel}\n >\n ${collapseSidebarIcon}\n </button>\n </header>\n `;\n }\n\n get closeButton(): TemplateResult {\n return html`\n <button\n class=\"close\"\n aria-label=\"Close navigation\"\n title=\"Close navigation\"\n @click=${this.closeMenu}\n >\n ${collapseSidebarIcon}\n </button>\n `;\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n const panelOpen = !!this.selectedMenu;\n return html`\n <div class=\"main\" @keydown=${this.handleKeyDown}>\n <div class=\"menu\">\n ${this.closeButton}\n <ul class=\"menu-list\" role=\"list\">\n ${this.menuItems}\n </ul>\n <!-- Closed panels are inert so the tab order and the accessibility\n tree agree with what is on screen; the slide is a consequence\n of the class, not something to wait on. -->\n <div\n class=\"content ${this.selectedMenuClass}\"\n role=\"region\"\n aria-labelledby=\"panel-title\"\n tabindex=\"-1\"\n ?inert=${!panelOpen}\n >\n ${this.renderMenuHeader}\n <section>\n <div class=\"selected-menu\">\n ${this.selectedMenuDetails?.component || nothing}\n </div>\n </section>\n </div>\n </div>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n const menuButtonWidth = css`42px`;\n const sliderWidth = css`var(--item-navigator-menu-width--)`;\n const transitionTiming = css`var(--item-navigator-animation-timing--)`;\n\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-menu-width--: var(\n --item-navigator-menu-width,\n 320px\n );\n --item-navigator-animation-timing--: var(\n --item-navigator-animation-timing,\n 200ms\n );\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-menu-slider-bg--: var(\n --item-navigator-menu-slider-bg,\n #212121\n );\n --item-navigator-active-button-bg--: var(\n --item-navigator-active-button-bg,\n var(--mid-gray)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n /* Every glyph is square, so one knob sizes both axes. */\n --item-navigator-header-icon-size--: var(\n --item-navigator-header-icon-size,\n 2em\n );\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color--)\n );\n\n /* 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n .main {\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n /* The drawer's own slide is owned by the navigator's #menu; this just\n fills it. */\n .menu {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: ${sliderWidth};\n padding: 0.5em 0.5em 0 0;\n box-sizing: border-box;\n font-size: 1.4em;\n color: var(--item-navigator-text-color--);\n background: var(--item-navigator-menu-slider-bg--);\n }\n\n button {\n cursor: pointer;\n }\n\n header {\n margin: 0 0 0.5em 0;\n }\n\n header * {\n margin: 0;\n display: inline-block;\n }\n\n header button {\n cursor: pointer;\n }\n\n header.with-secondary-action .details {\n width: 80%;\n }\n\n header .details {\n font-weight: bold;\n width: 88%;\n }\n\n header .custom-action > *,\n button.close {\n padding: 0;\n background-color: transparent;\n border: 0;\n }\n\n header .custom-action,\n button.close {\n position: absolute;\n }\n\n button.close {\n /* Reset to the base so the header icon (em) doesn't compound\n against .menu's enlarged font-size. */\n font-size: var(--item-navigator-base-font-size--);\n min-width: 38px;\n min-height: 38px;\n display: flex;\n justify-content: center;\n align-items: center;\n right: 0;\n top: 0;\n }\n\n button.close .ia-icon {\n width: var(--item-navigator-header-icon-size--);\n height: var(--item-navigator-header-icon-size--);\n }\n\n /* Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. */\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n /* Host-supplied icons may still be inline svg, so keep theming those\n the original way. */\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: ${menuButtonWidth};\n z-index: 1;\n transform: translateX(calc(${sliderWidth} * -1));\n transition: var(\n --item-navigator-panel-transition--,\n transform ${transitionTiming} ease-out\n );\n background: var(--item-navigator-active-button-bg--);\n border-right: 0.2em solid;\n border-color: var(--item-navigator-border-color--);\n padding: 0.5em 0 0 0.5em;\n display: flex;\n flex-direction: column;\n }\n\n .content.open {\n transform: translateX(0);\n }\n\n .content:focus {\n outline: none;\n }\n\n .menu-list {\n padding: 0;\n margin: 0;\n list-style: none;\n background: var(--item-navigator-menu-slider-bg--);\n }\n\n .menu-list li {\n margin-bottom: 0.2em;\n }\n\n .content > section {\n overflow: auto;\n overscroll-behavior: contain;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-menu-slider': IAItemNavMenuSlider;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ia-itemnav-menu-slider.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-menu-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport themeStyles from '@src/themes/theme-styles';\nimport { collapseSidebarIcon } from './icons';\nimport './ia-itemnav-menu-button';\nimport type { IAItemNavMenuButton } from './ia-itemnav-menu-button';\nimport { MenuProviderInterface } from './interfaces/menu-interfaces';\n\nconst sliderEvents = {\n closeDrawer: 'menuSliderClosed',\n closePanel: 'menuPanelClosed',\n};\n\n/**\n * The sliding drawer that lists the navigator's menu providers and renders the\n * body of whichever provider is currently selected.\n */\n@customElement('ia-itemnav-menu-slider')\nexport class IAItemNavMenuSlider extends LitElement {\n @property({ type: Array }) menus: MenuProviderInterface[] = [];\n\n /**\n * Which panel is open. The navigator owns this — the slider only reports\n * what the user did and renders whatever comes back, so there is one copy\n * of the state rather than two that have to agree.\n */\n @property({ type: String }) selectedMenu = '';\n\n @property({ type: Object }) selectedMenuAction:\n | TemplateResult\n | typeof nothing = nothing;\n\n @query('.content') private panel?: HTMLElement;\n\n @query('.menu-list') private menuList?: HTMLUListElement;\n\n @query('.menu > button.close') private drawerCloseButton?: HTMLElement;\n\n /** Focus should follow what the user did, not the first render. */\n private isFirstRender = true;\n\n protected updated(changed: PropertyValues): void {\n const actionButton = this.selectedMenuDetails?.actionButton || nothing;\n if (actionButton !== this.selectedMenuAction) {\n this.selectedMenuAction = actionButton;\n }\n\n if (!this.isFirstRender && changed.has('selectedMenu')) {\n this.moveFocusForSelection(changed.get('selectedMenu') as string);\n }\n this.isFirstRender = false;\n }\n\n /**\n * Opening a panel moves focus into it, so it is announced by name; closing\n * hands focus back to the button that opened it.\n */\n private moveFocusForSelection(previousMenu: string): void {\n if (this.selectedMenu) {\n this.panel?.focus();\n } else if (previousMenu) {\n this.menuButtonFor(previousMenu)?.focus();\n }\n }\n\n private menuButtonFor(menuId: string): IAItemNavMenuButton | undefined {\n const buttons =\n this.menuList?.querySelectorAll<IAItemNavMenuButton>(\n 'ia-itemnav-menu-button',\n ) ?? [];\n return [...buttons].find((button) => button.buttonId === menuId);\n }\n\n /**\n * Moves focus into the drawer — the open panel if there is one, otherwise\n * the first thing worth acting on. Exposed so the navigator doesn't have to\n * reach through this component's shadow DOM to place focus.\n */\n focusDrawer(): void {\n if (this.selectedMenu) {\n this.panel?.focus();\n return;\n }\n const firstMenuButton = this.menuList?.querySelector<HTMLElement>(\n 'ia-itemnav-menu-button',\n );\n (firstMenuButton ?? this.drawerCloseButton)?.focus();\n }\n\n /** Asks the navigator to close the whole drawer. */\n closeMenu(): void {\n this.dispatchEvent(\n new CustomEvent(sliderEvents.closeDrawer, {\n detail: this.selectedMenuDetails,\n }),\n );\n }\n\n /** Asks the navigator to close just the open panel. */\n closePanel(): void {\n this.dispatchEvent(\n new CustomEvent(sliderEvents.closePanel, {\n detail: { id: this.selectedMenu },\n }),\n );\n }\n\n /** Escape closes the panel first, then the drawer. */\n handleKeyDown(event: KeyboardEvent): void {\n if (event.key !== 'Escape') return;\n event.preventDefault();\n if (this.selectedMenu) {\n this.closePanel();\n } else {\n this.closeMenu();\n }\n }\n\n get selectedMenuDetails(): MenuProviderInterface | undefined {\n return this.menus.find((menu) => menu.id === this.selectedMenu);\n }\n\n /* render */\n\n get selectedMenuClass(): string {\n return this.selectedMenu ? 'open' : '';\n }\n\n get menuItems(): TemplateResult[] {\n return this.menus.map(\n (menu) => html`\n <li>\n <ia-itemnav-menu-button\n .icon=${menu.icon}\n .label=${menu.label}\n .menuDetails=${menu.menuDetails || ''}\n .buttonId=${menu.id}\n .selected=${menu.id === this.selectedMenu}\n .followable=${menu.followable || false}\n .href=${menu.href || ''}\n ></ia-itemnav-menu-button>\n </li>\n `,\n );\n }\n\n get renderMenuHeader(): TemplateResult {\n const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};\n // `selectedMenuAction` defaults to Lit's `nothing` sentinel, which is\n // truthy — so compare against it explicitly, otherwise the header would\n // always get the secondary-action treatment (and an empty action span).\n const hasAction = this.selectedMenuAction !== nothing;\n const headerClass = hasAction ? 'with-secondary-action' : '';\n const actionBlock = hasAction\n ? html`<span class=\"custom-action\">${this.selectedMenuAction}</span>`\n : nothing;\n const closeLabel = label ? `Close ${label}` : 'Close this panel';\n return html`\n <header class=${headerClass}>\n <div class=\"details\">\n <h3 id=\"panel-title\">${label}</h3>\n <span class=\"extra-details\">${menuDetails}</span>\n </div>\n ${actionBlock}\n <button\n class=\"close\"\n aria-label=${closeLabel}\n title=${closeLabel}\n @click=${this.closePanel}\n >\n ${collapseSidebarIcon}\n </button>\n </header>\n `;\n }\n\n get closeButton(): TemplateResult {\n return html`\n <button\n class=\"close\"\n aria-label=\"Close navigation\"\n title=\"Close navigation\"\n @click=${this.closeMenu}\n >\n ${collapseSidebarIcon}\n </button>\n `;\n }\n\n /** @inheritdoc */\n render(): TemplateResult {\n const panelOpen = !!this.selectedMenu;\n return html`\n <div class=\"main\" @keydown=${this.handleKeyDown}>\n <div class=\"menu\">\n ${this.closeButton}\n <ul class=\"menu-list\" role=\"list\">\n ${this.menuItems}\n </ul>\n <!-- Closed panels are inert so the tab order and the accessibility\n tree agree with what is on screen; the slide is a consequence\n of the class, not something to wait on. -->\n <div\n class=\"content ${this.selectedMenuClass}\"\n role=\"region\"\n aria-labelledby=\"panel-title\"\n tabindex=\"-1\"\n ?inert=${!panelOpen}\n >\n ${this.renderMenuHeader}\n <section>\n <div class=\"selected-menu\">\n ${this.selectedMenuDetails?.component || nothing}\n </div>\n </section>\n </div>\n </div>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n const menuButtonWidth = css`42px`;\n const sliderWidth = css`var(--item-navigator-menu-width--)`;\n const transitionTiming = css`var(--item-navigator-animation-timing--)`;\n\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-menu-width--: var(\n --item-navigator-menu-width,\n 320px\n );\n --item-navigator-animation-timing--: var(\n --item-navigator-animation-timing,\n 200ms\n );\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-menu-slider-bg--: var(\n --item-navigator-menu-slider-bg,\n #212121\n );\n --item-navigator-active-button-bg--: var(\n --item-navigator-active-button-bg,\n var(--mid-gray)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n /* Every glyph is square, so one knob sizes both axes. */\n --item-navigator-header-icon-size--: var(\n --item-navigator-header-icon-size,\n 2em\n );\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color--)\n );\n\n /* 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n .main {\n overflow: hidden;\n width: 100%;\n height: 100%;\n }\n\n /* The drawer's own slide is owned by the navigator's #menu; this just\n fills it. */\n .menu {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: ${sliderWidth};\n padding: 0.5em 0.5em 0 0;\n box-sizing: border-box;\n font-size: 1.4em;\n color: var(--item-navigator-text-color--);\n background: var(--item-navigator-menu-slider-bg--);\n }\n\n button {\n cursor: pointer;\n }\n\n header {\n margin: 0 0 0.5em 0;\n }\n\n header * {\n margin: 0;\n display: inline-block;\n }\n\n header button {\n cursor: pointer;\n }\n\n header.with-secondary-action .details {\n width: 80%;\n }\n\n header .details {\n font-weight: bold;\n width: 88%;\n }\n\n header .custom-action > *,\n button.close {\n padding: 0;\n background-color: transparent;\n border: 0;\n }\n\n header .custom-action,\n button.close {\n position: absolute;\n }\n\n button.close {\n /* Reset to the base so the header icon (em) doesn't compound\n against .menu's enlarged font-size. */\n font-size: var(--item-navigator-base-font-size--);\n min-width: 38px;\n min-height: 38px;\n display: flex;\n justify-content: center;\n align-items: center;\n right: 0;\n top: 0;\n }\n\n button.close .ia-icon {\n width: var(--item-navigator-header-icon-size--);\n height: var(--item-navigator-header-icon-size--);\n }\n\n /* Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. */\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n /* Host-supplied icons may still be inline svg, so keep theming those\n the original way. */\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n .content {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: ${menuButtonWidth};\n z-index: 1;\n transform: translateX(calc(${sliderWidth} * -1));\n transition: var(\n --item-navigator-panel-transition--,\n transform ${transitionTiming} ease-out\n );\n background: var(--item-navigator-active-button-bg--);\n border-right: 0.2em solid;\n border-color: var(--item-navigator-border-color--);\n padding: 0.5em 0 0 0.5em;\n display: flex;\n flex-direction: column;\n }\n\n .content.open {\n transform: translateX(0);\n }\n\n .content:focus {\n outline: none;\n }\n\n .menu-list {\n padding: 0;\n margin: 0;\n list-style: none;\n background: var(--item-navigator-menu-slider-bg--);\n }\n\n .menu-list li {\n margin-bottom: 0.2em;\n }\n\n .content > section {\n overflow: auto;\n overscroll-behavior: contain;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-menu-slider': IAItemNavMenuSlider;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-itemnav-no-theater-available.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EACd,cAAc,EAEd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ia-itemnav-no-theater-available.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAEV,cAAc,EACd,cAAc,EAEd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb;;;;GAIG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAM;IAErD,UAAU,IAAI,IAAI;IAQlB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,MAAM,IAAI,cAAc;IAexB,MAAM,KAAK,MAAM,IAAI,cAAc,CAmDlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { LitElement, html, css, } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement } from '../../util/custom-element.js';
|
|
4
5
|
import themeStyles from '../../themes/theme-styles.js';
|
|
5
6
|
/**
|
|
6
7
|
* Placeholder shown in place of the theater when `viewAvailable` is false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-itemnav-no-theater-available.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ia-itemnav-no-theater-available.js","sourceRoot":"","sources":["../../../../src/elements/ia-item-navigator/ia-itemnav-no-theater-available.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;GAIG;AAEI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,UAAU;IAApD;;QACuB,eAAU,GAAY,EAAE,CAAC;IAuFvD,CAAC;IArFC,UAAU;QACR,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAsB,qBAAqB,EAAE;YAC1D,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;SACzB,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;kBASG,IAAI,CAAC,WAAW;;KAE7B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8CF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAvF6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA0B;AAD1C,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,CAAC;GACpC,2BAA2B,CAwFvC","sourcesContent":["import {\n LitElement,\n html,\n TemplateResult,\n PropertyValues,\n css,\n type CSSResultGroup,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Placeholder shown in place of the theater when `viewAvailable` is false,\n * i.e. the item has no files that can be experienced in the browser. Emits\n * `loadingStateUpdated` so the navigator hides its loading spinner.\n */\n@customElement('ia-itemnav-no-theater-available')\nexport class IAItemNavNoTheaterAvailable extends LitElement {\n @property({ type: String }) identifier?: string = '';\n\n emitLoaded(): void {\n this.dispatchEvent(\n new CustomEvent<{ loaded: boolean }>('loadingStateUpdated', {\n detail: { loaded: true },\n }),\n );\n }\n\n updated(changed: PropertyValues): void {\n if (changed.has('identifier')) {\n this.emitLoaded();\n }\n }\n\n get downloadUrl(): string {\n return `/download/${this.identifier}`;\n }\n\n render(): TemplateResult {\n return html`\n <section>\n <h2>THERE IS NO PREVIEW AVAILABLE FOR THIS ITEM</h2>\n <p>\n This item does not appear to have any files that can be experienced on\n Archive.org. <br />\n Please download files in this item to interact with them on your\n computer.\n </p>\n <a href=${this.downloadUrl}>Show all files</a>\n </section>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n color: var(--item-navigator-text-color--);\n text-align: center;\n /* 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n section {\n width: 100%;\n margin: 5%;\n padding: 0 5%;\n }\n\n p {\n font-size: 1.4em;\n }\n\n a {\n color: var(--item-navigator-text-color--);\n background-color: var(--navy-blue);\n min-height: 35px;\n cursor: pointer;\n line-height: normal;\n border-radius: 0.4em;\n text-align: center;\n vertical-align: middle;\n font-size: 1.4em;\n font-family: var(--base-font-family);\n display: inline-block;\n padding: 0.85em 1.2em;\n border: 1px solid var(--lightest-gray);\n white-space: nowrap;\n appearance: auto;\n box-sizing: border-box;\n user-select: none;\n text-decoration: none;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-no-theater-available': IAItemNavNoTheaterAvailable;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-itemnav-share-panel.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ia-itemnav-share-panel.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAIb,OAAO,EACL,SAAS,EAOV,MAAM,eAAe,CAAC;AAEvB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,cAAc,GAAG,MAAM,CAAC;IAC9B,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,qDAAqD;AACrD,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB;;;;;GAKG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACrB,QAAQ,SAAiB;IAEzB,OAAO,SAAM;IAEb,WAAW,SAAM;IAEhB,mBAAmB,UAAS;IAE7B,UAAU,SAAM;IAEjB,cAAc,EAAE,WAAW,EAAE,CAAM;IAElC,IAAI,SAAM;IAET,YAAY,UAAS;IAEtB,aAAa,SAAM;IAE/C,OAAO,CAAC,gBAAgB,CAGpB;IAEJ,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMtC,aAAa,IAAI,IAAI;IA+DrB;;;;OAIG;YACW,eAAe;IAuB7B,IAAI,WAAW,IAAI,MAAM,CAMxB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO,CAG5C;IAED,MAAM,IAAI,cAAc;IAwCxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAwJlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { css, html, LitElement, nothing, } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement } from '../../../util/custom-element.js';
|
|
4
5
|
import themeStyles from '../../../themes/theme-styles.js';
|
|
5
6
|
import { shareIcon, twitterIcon, facebookIcon, tumblrIcon, pinterestIcon, emailIcon, linkIcon, } from './share-icons.js';
|
|
6
7
|
/** Icon for the share menu shortcut / menu entry. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-itemnav-share-panel.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport {\n shareIcon,\n twitterIcon,\n facebookIcon,\n tumblrIcon,\n pinterestIcon,\n emailIcon,\n linkIcon,\n} from './share-icons';\n\ntype ShareOption = {\n name: string;\n icon: TemplateResult | string;\n url: string;\n};\n\n/** Icon for the share menu shortcut / menu entry. */\nexport { shareIcon };\n\n/**\n * The \"share this item\" side panel: social sharing links (Twitter, Facebook,\n * Tumblr, Pinterest, email) plus copyable iframe / bbcode embed snippets.\n * Sharing options are derived from the item identifier/metadata and rebuilt\n * whenever `sharingOptions` is reset to empty.\n */\n@customElement('ia-itemnav-share-panel')\nexport class IAItemNavSharePanel extends LitElement {\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({ type: String }) creator = '';\n\n @property({ type: String }) description = '';\n\n @property({ type: Boolean }) embedOptionsVisible = false;\n\n @property({ type: String }) identifier = '';\n\n @property({ type: Array }) sharingOptions: ShareOption[] = [];\n\n @property({ type: String }) type = '';\n\n @property({ type: Boolean }) renderHeader = false;\n\n @property({ type: String }) fileSubPrefix = '';\n\n private copyNoteTimeouts = new WeakMap<\n Element,\n ReturnType<typeof setTimeout>\n >();\n\n updated(changed: PropertyValues): void {\n if (changed.has('sharingOptions') && !this.sharingOptions.length) {\n this.loadProviders();\n }\n }\n\n loadProviders(): void {\n let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;\n if (this.fileSubPrefix) {\n shareUrl += `/${this.fileSubPrefix}`;\n }\n const shareBlurb = [\n this.description,\n this.creator,\n 'Free Download, Borrow, and Streaming',\n 'Internet Archive',\n ]\n .filter(Boolean)\n .join(' : ');\n\n this.sharingOptions = [\n {\n name: 'Twitter',\n icon: twitterIcon,\n url: `https://twitter.com/intent/tweet?${new URLSearchParams({\n url: shareUrl,\n text: shareBlurb,\n via: 'internetarchive',\n })}`,\n },\n {\n name: 'Facebook',\n icon: facebookIcon,\n url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({\n u: shareUrl,\n })}`,\n },\n {\n name: 'Tumblr',\n icon: tumblrIcon,\n url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams(\n {\n posttype: 'link',\n canonicalUrl: shareUrl,\n title: shareBlurb,\n },\n )}`,\n },\n {\n name: 'Pinterest',\n icon: pinterestIcon,\n url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams(\n {\n url: shareUrl,\n description: shareBlurb,\n },\n )}`,\n },\n {\n name: 'Email',\n icon: emailIcon,\n url: `mailto:?${new URLSearchParams({\n subject: shareBlurb,\n body: shareUrl,\n })}`,\n },\n ];\n }\n\n /**\n * Copies the embed snippet in the clicked `.code` block, preferring the async\n * Clipboard API and falling back to the legacy `execCommand` path for\n * browsers that lack it, then briefly flashes the \"Copied\" note.\n */\n private async copyToClipboard(event: MouseEvent): Promise<void> {\n const currentTarget = event.currentTarget as HTMLElement;\n const textarea = currentTarget.querySelector('textarea');\n const note = currentTarget.querySelector('small');\n if (!textarea || !note) return;\n\n try {\n await navigator.clipboard.writeText(textarea.value);\n } catch {\n // Fallback for browsers without the async Clipboard API.\n textarea.select();\n document.execCommand('copy');\n textarea.blur();\n }\n\n note.classList.add('visible');\n clearTimeout(this.copyNoteTimeouts.get(note));\n this.copyNoteTimeouts.set(\n note,\n setTimeout(() => note.classList.remove('visible'), 4000),\n );\n }\n\n get iframeEmbed(): string {\n return `<iframe\n src=\"https://${this.baseHost}/embed/${this.identifier}\"\n width=\"560\" height=\"384\" frameborder=\"0\"\n webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" allowfullscreen\n ></iframe>`;\n }\n\n get bbcodeEmbed(): string {\n return `[archiveorg ${this.identifier} width=560 height=384 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]`;\n }\n\n get helpURL(): string {\n return `https://${this.baseHost}/help/audio.php?identifier=${this.identifier}`;\n }\n\n get header(): TemplateResult | typeof nothing {\n const header = html`<header><h3>Share this ${this.type}</h3></header>`;\n return this.renderHeader ? header : nothing;\n }\n\n render(): TemplateResult {\n return html`\n ${this.header}\n <div>\n ${this.sharingOptions.map(\n (option) =>\n html`<a class=\"share-option\" href=${option.url} target=\"_blank\">\n ${option.icon} ${option.name}\n </a>`,\n )}\n <details>\n <summary class=\"share-option\">\n ${linkIcon} Get an embeddable link\n </summary>\n <div class=\"embed\">\n <h4>Embed</h4>\n <div class=\"code\" @click=${this.copyToClipboard}>\n <textarea readonly>${this.iframeEmbed}</textarea>\n <small>Copied to clipboard</small>\n </div>\n <h4>\n Embed for wordpress.com hosted blogs and archive.org item\n <description> tags\n </h4>\n <div class=\"code\" @click=${this.copyToClipboard}>\n <textarea readonly>${this.bbcodeEmbed}</textarea>\n <small>Copied to clipboard</small>\n </div>\n <p>\n Want more?\n <a href=${this.helpURL}\n >Advanced embedding details, examples, and help</a\n >!\n </p>\n </div>\n </details>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n /* Icons follow the adjustable text color by default. */\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color--)\n );\n --item-navigator-share-embed-bg--: var(\n --item-navigator-share-embed-bg,\n #151515\n );\n\n display: block;\n height: 100%;\n overflow-y: auto;\n /* 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n color: var(--item-navigator-text-color--);\n box-sizing: border-box;\n }\n\n header {\n display: flex;\n align-items: baseline;\n }\n\n h3 {\n padding: 0;\n margin: 0 1em 0 0;\n font-size: 1.6em;\n }\n\n h4 {\n font-size: 1.4em;\n }\n\n :host > div {\n padding: 1em 0;\n }\n\n .share-option {\n display: block;\n padding: 0.5em 0;\n font-size: 1.6em;\n text-decoration: none;\n color: var(--item-navigator-text-color--);\n cursor: pointer;\n transition: background-color 0.2s;\n border-radius: 6px;\n }\n\n .share-option:hover {\n background-color: rgba(255, 255, 255, 0.05);\n }\n\n .share-option > * {\n display: inline-block;\n padding: 0.2em;\n margin-right: 1em;\n vertical-align: middle;\n border: 1px solid var(--item-navigator-border-color--);\n border-radius: 7px;\n }\n\n .share-option .ia-icon {\n /* Reset to the base so the icon (em) doesn't compound against the\n share-option's enlarged font-size. */\n font-size: var(--item-navigator-base-font-size--);\n width: 2em;\n height: 2em;\n }\n\n /* Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. */\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n /* Host-supplied icons may still be inline svg, so keep theming those\n the original way. */\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n /* Hide the triangle that appears on details tags */\n summary::marker {\n content: '';\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n .embed {\n padding-right: 5px;\n }\n\n .embed a {\n color: var(--item-navigator-text-color--);\n }\n\n .code {\n position: relative;\n }\n\n textarea {\n display: block;\n width: 100%;\n height: 120px;\n padding: 0.8em 1em;\n box-sizing: border-box;\n resize: none;\n cursor: pointer;\n font: normal 1.4em var(--base-font-family);\n color: var(--item-navigator-text-color--);\n background: var(--item-navigator-share-embed-bg--);\n }\n\n small {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3em;\n padding: 0.5em 1em;\n box-sizing: border-box;\n font: normal 1.2em/2em var(--base-font-family);\n color: var(--item-navigator-share-embed-bg--);\n background: var(--item-navigator-text-color--);\n opacity: 0;\n transition: opacity 300ms linear;\n }\n\n small.visible {\n opacity: 1;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-share-panel': IAItemNavSharePanel;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ia-itemnav-share-panel.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport themeStyles from '@src/themes/theme-styles';\nimport {\n shareIcon,\n twitterIcon,\n facebookIcon,\n tumblrIcon,\n pinterestIcon,\n emailIcon,\n linkIcon,\n} from './share-icons';\n\ntype ShareOption = {\n name: string;\n icon: TemplateResult | string;\n url: string;\n};\n\n/** Icon for the share menu shortcut / menu entry. */\nexport { shareIcon };\n\n/**\n * The \"share this item\" side panel: social sharing links (Twitter, Facebook,\n * Tumblr, Pinterest, email) plus copyable iframe / bbcode embed snippets.\n * Sharing options are derived from the item identifier/metadata and rebuilt\n * whenever `sharingOptions` is reset to empty.\n */\n@customElement('ia-itemnav-share-panel')\nexport class IAItemNavSharePanel extends LitElement {\n @property({ type: String }) baseHost = 'archive.org';\n\n @property({ type: String }) creator = '';\n\n @property({ type: String }) description = '';\n\n @property({ type: Boolean }) embedOptionsVisible = false;\n\n @property({ type: String }) identifier = '';\n\n @property({ type: Array }) sharingOptions: ShareOption[] = [];\n\n @property({ type: String }) type = '';\n\n @property({ type: Boolean }) renderHeader = false;\n\n @property({ type: String }) fileSubPrefix = '';\n\n private copyNoteTimeouts = new WeakMap<\n Element,\n ReturnType<typeof setTimeout>\n >();\n\n updated(changed: PropertyValues): void {\n if (changed.has('sharingOptions') && !this.sharingOptions.length) {\n this.loadProviders();\n }\n }\n\n loadProviders(): void {\n let shareUrl = `https://${this.baseHost}/details/${this.identifier}`;\n if (this.fileSubPrefix) {\n shareUrl += `/${this.fileSubPrefix}`;\n }\n const shareBlurb = [\n this.description,\n this.creator,\n 'Free Download, Borrow, and Streaming',\n 'Internet Archive',\n ]\n .filter(Boolean)\n .join(' : ');\n\n this.sharingOptions = [\n {\n name: 'Twitter',\n icon: twitterIcon,\n url: `https://twitter.com/intent/tweet?${new URLSearchParams({\n url: shareUrl,\n text: shareBlurb,\n via: 'internetarchive',\n })}`,\n },\n {\n name: 'Facebook',\n icon: facebookIcon,\n url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({\n u: shareUrl,\n })}`,\n },\n {\n name: 'Tumblr',\n icon: tumblrIcon,\n url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams(\n {\n posttype: 'link',\n canonicalUrl: shareUrl,\n title: shareBlurb,\n },\n )}`,\n },\n {\n name: 'Pinterest',\n icon: pinterestIcon,\n url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams(\n {\n url: shareUrl,\n description: shareBlurb,\n },\n )}`,\n },\n {\n name: 'Email',\n icon: emailIcon,\n url: `mailto:?${new URLSearchParams({\n subject: shareBlurb,\n body: shareUrl,\n })}`,\n },\n ];\n }\n\n /**\n * Copies the embed snippet in the clicked `.code` block, preferring the async\n * Clipboard API and falling back to the legacy `execCommand` path for\n * browsers that lack it, then briefly flashes the \"Copied\" note.\n */\n private async copyToClipboard(event: MouseEvent): Promise<void> {\n const currentTarget = event.currentTarget as HTMLElement;\n const textarea = currentTarget.querySelector('textarea');\n const note = currentTarget.querySelector('small');\n if (!textarea || !note) return;\n\n try {\n await navigator.clipboard.writeText(textarea.value);\n } catch {\n // Fallback for browsers without the async Clipboard API.\n textarea.select();\n document.execCommand('copy');\n textarea.blur();\n }\n\n note.classList.add('visible');\n clearTimeout(this.copyNoteTimeouts.get(note));\n this.copyNoteTimeouts.set(\n note,\n setTimeout(() => note.classList.remove('visible'), 4000),\n );\n }\n\n get iframeEmbed(): string {\n return `<iframe\n src=\"https://${this.baseHost}/embed/${this.identifier}\"\n width=\"560\" height=\"384\" frameborder=\"0\"\n webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" allowfullscreen\n ></iframe>`;\n }\n\n get bbcodeEmbed(): string {\n return `[archiveorg ${this.identifier} width=560 height=384 frameborder=0 webkitallowfullscreen=true mozallowfullscreen=true]`;\n }\n\n get helpURL(): string {\n return `https://${this.baseHost}/help/audio.php?identifier=${this.identifier}`;\n }\n\n get header(): TemplateResult | typeof nothing {\n const header = html`<header><h3>Share this ${this.type}</h3></header>`;\n return this.renderHeader ? header : nothing;\n }\n\n render(): TemplateResult {\n return html`\n ${this.header}\n <div>\n ${this.sharingOptions.map(\n (option) =>\n html`<a class=\"share-option\" href=${option.url} target=\"_blank\">\n ${option.icon} ${option.name}\n </a>`,\n )}\n <details>\n <summary class=\"share-option\">\n ${linkIcon} Get an embeddable link\n </summary>\n <div class=\"embed\">\n <h4>Embed</h4>\n <div class=\"code\" @click=${this.copyToClipboard}>\n <textarea readonly>${this.iframeEmbed}</textarea>\n <small>Copied to clipboard</small>\n </div>\n <h4>\n Embed for wordpress.com hosted blogs and archive.org item\n <description> tags\n </h4>\n <div class=\"code\" @click=${this.copyToClipboard}>\n <textarea readonly>${this.bbcodeEmbed}</textarea>\n <small>Copied to clipboard</small>\n </div>\n <p>\n Want more?\n <a href=${this.helpURL}\n >Advanced embedding details, examples, and help</a\n >!\n </p>\n </div>\n </details>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n /* Icons follow the adjustable text color by default. */\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color--)\n );\n --item-navigator-share-embed-bg--: var(\n --item-navigator-share-embed-bg,\n #151515\n );\n\n display: block;\n height: 100%;\n overflow-y: auto;\n /* 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n color: var(--item-navigator-text-color--);\n box-sizing: border-box;\n }\n\n header {\n display: flex;\n align-items: baseline;\n }\n\n h3 {\n padding: 0;\n margin: 0 1em 0 0;\n font-size: 1.6em;\n }\n\n h4 {\n font-size: 1.4em;\n }\n\n :host > div {\n padding: 1em 0;\n }\n\n .share-option {\n display: block;\n padding: 0.5em 0;\n font-size: 1.6em;\n text-decoration: none;\n color: var(--item-navigator-text-color--);\n cursor: pointer;\n transition: background-color 0.2s;\n border-radius: 6px;\n }\n\n .share-option:hover {\n background-color: rgba(255, 255, 255, 0.05);\n }\n\n .share-option > * {\n display: inline-block;\n padding: 0.2em;\n margin-right: 1em;\n vertical-align: middle;\n border: 1px solid var(--item-navigator-border-color--);\n border-radius: 7px;\n }\n\n .share-option .ia-icon {\n /* Reset to the base so the icon (em) doesn't compound against the\n share-option's enlarged font-size. */\n font-size: var(--item-navigator-base-font-size--);\n width: 2em;\n height: 2em;\n }\n\n /* Our glyphs are masked spans: the mask supplies the shape, this\n supplies the paint. */\n span.ia-icon {\n background-color: var(--item-navigator-icon-color--);\n }\n\n /* Host-supplied icons may still be inline svg, so keep theming those\n the original way. */\n .ia-icon .fill-color {\n fill: var(--item-navigator-icon-color--);\n }\n\n /* Hide the triangle that appears on details tags */\n summary::marker {\n content: '';\n }\n\n summary::-webkit-details-marker {\n display: none;\n }\n\n .embed {\n padding-right: 5px;\n }\n\n .embed a {\n color: var(--item-navigator-text-color--);\n }\n\n .code {\n position: relative;\n }\n\n textarea {\n display: block;\n width: 100%;\n height: 120px;\n padding: 0.8em 1em;\n box-sizing: border-box;\n resize: none;\n cursor: pointer;\n font: normal 1.4em var(--base-font-family);\n color: var(--item-navigator-text-color--);\n background: var(--item-navigator-share-embed-bg--);\n }\n\n small {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 3em;\n padding: 0.5em 1em;\n box-sizing: border-box;\n font: normal 1.2em/2em var(--base-font-family);\n color: var(--item-navigator-share-embed-bg--);\n background: var(--item-navigator-text-color--);\n opacity: 0;\n transition: opacity 300ms linear;\n }\n\n small.visible {\n opacity: 1;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-share-panel': IAItemNavSharePanel;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-itemnav-sort-files-button.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,cAAc,EACf,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ia-itemnav-sort-files-button.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,KAAK,cAAc,EACnB,cAAc,EACf,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAQjE;;;;GAIG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAC3B,WAAW,EAAE,gBAAgB,EAAE,CAAM;IAErC,cAAc,EAAE,gBAAgB,EAAE,CAAM;IAExB,WAAW,EAAE,cAAc,CAC1D;IAEZ,MAAM,IAAI,cAAc;IAIxB,IAAI,UAAU,IAAI,cAAc,CAgC/B;IAED,WAAW,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI;IAsB3C,MAAM,KAAK,MAAM,IAAI,cAAc,CA4ClC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,wBAAwB,CAAC;KAC1D;CACF"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { css, html, LitElement, } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement } from '../../../util/custom-element.js';
|
|
4
5
|
import themeStyles from '../../../themes/theme-styles.js';
|
|
5
6
|
import { maskedIcon } from '../../../util/masked-icon.js';
|
|
6
7
|
import sortAscUrl from './icons/sort-asc.svg';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-itemnav-sort-files-button.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ia-itemnav-sort-files-button.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n TemplateResult,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport themeStyles from '@src/themes/theme-styles';\nimport { maskedIcon } from '@src/util/masked-icon';\nimport sortAscUrl from './icons/sort-asc.svg';\nimport sortDescUrl from './icons/sort-desc.svg';\nimport sortNeutralUrl from './icons/sort-neutral.svg';\nimport type { FileSortOption, ViewableFileInfo } from './models';\n\nconst sortAscIcon = maskedIcon(sortAscUrl);\n\nconst sortDescIcon = maskedIcon(sortDescUrl);\n\nconst sortNeutralIcon = maskedIcon(sortNeutralUrl);\n\n/**\n * A tri-state sort toggle for the viewable-files panel header. Cycles\n * default → title ascending → title descending → default, sorting the supplied\n * file list and emitting `fileListSorted` on each change.\n */\n@customElement('ia-itemnav-sort-files-button')\nexport class IAItemNavSortFilesButton extends LitElement {\n @property({ type: Array }) fileListRaw: ViewableFileInfo[] = [];\n\n @property({ type: Array }) fileListSorted: ViewableFileInfo[] = [];\n\n @property({ type: String, reflect: true }) sortOrderBy: FileSortOption =\n 'default';\n\n render(): TemplateResult {\n return html`<div class=\"sort-multi-file-list\">${this.sortButton}</div>`;\n }\n\n get sortButton(): TemplateResult {\n const sortIcons: Record<FileSortOption, TemplateResult> = {\n default: html`\n <button\n class=\"sort-by neutral-icon\"\n aria-label=\"Sort volumes in initial order\"\n @click=${() => this.sortVolumes('title_asc')}\n >\n ${sortNeutralIcon}\n </button>\n `,\n title_asc: html`\n <button\n class=\"sort-by asc-icon\"\n aria-label=\"Sort volumes in ascending order\"\n @click=${() => this.sortVolumes('title_desc')}\n >\n ${sortAscIcon}\n </button>\n `,\n title_desc: html`\n <button\n class=\"sort-by desc-icon\"\n aria-label=\"Sort volumes in descending order\"\n @click=${() => this.sortVolumes('default')}\n >\n ${sortDescIcon}\n </button>\n `,\n };\n\n return sortIcons[this.sortOrderBy];\n }\n\n sortVolumes(sortType: FileSortOption): void {\n this.sortOrderBy = sortType;\n\n const sortedFiles = [...this.fileListRaw].sort((a, b) => {\n if (sortType === 'title_asc') return a.title.localeCompare(b.title);\n if (sortType === 'title_desc') return b.title.localeCompare(a.title);\n return (a.orig_sort ?? 0) - (b.orig_sort ?? 0);\n });\n\n this.dispatchEvent(\n new CustomEvent('fileListSorted', {\n detail: {\n sortType,\n sortedFiles,\n },\n bubbles: true,\n composed: true,\n }),\n );\n this.fileListSorted = sortedFiles;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n /* Every glyph is square, so one knob sizes both axes. Matches the\n panel header's close button, which sits beside this one. */\n --item-navigator-header-icon-size--: var(\n --item-navigator-header-icon-size,\n 2em\n );\n --item-navigator-icon-color--: var(\n --item-navigator-icon-color,\n var(--item-navigator-text-color, var(--true-white))\n );\n\n /* 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n button.sort-by {\n padding: 0;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n display: inline-flex;\n /* Buttons don't inherit font-size, and the UA default would make the\n em-sized glyph larger than the close button beside it. */\n font: inherit;\n }\n\n /* The glyph is a masked span: the mask supplies the shape, this\n supplies the paint. */\n button.sort-by .ia-icon {\n width: var(--item-navigator-header-icon-size--);\n height: var(--item-navigator-header-icon-size--);\n background-color: var(--item-navigator-icon-color--);\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-sort-files-button': IAItemNavSortFilesButton;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-itemnav-viewable-files-panel.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ia-itemnav-viewable-files-panel.d.ts","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,cAAc,EACd,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjE,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,gBAA+B,CAAC;AAE9D;;;;;GAKG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IAC7B,QAAQ,EAAE,MAAM,CAAiB;IAEjC,WAAW,EAAE,cAAc,CAAa;IAExC,SAAS,EAAE,MAAM,CAAM;IAExB,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAEjB,YAAY,UAAS;IAEjE;;;;;;;OAOG;IACH,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMhD,iBAAiB,IAAI,IAAI;YAOX,gBAAgB;IAS9B,OAAO,CAAC,IAAI,EAAE,gBAAgB,GAAG,MAAM;IAQvC,IAAI,QAAQ,IAAI,cAAc,CAI7B;IAED,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,cAAc;IAmB9C,IAAI,gBAAgB,IAAI,cAAc,CAYrC;IAED,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IAIzC,MAAM,KAAK,MAAM,IAAI,cAAc,CAuGlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,2BAA2B,CAAC;KAChE;CACF"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { css, html, LitElement, nothing, } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement } from '../../../util/custom-element.js';
|
|
4
5
|
import { repeat } from 'lit/directives/repeat.js';
|
|
5
6
|
import themeStyles from '../../../themes/theme-styles.js';
|
|
6
7
|
import { maskedIcon } from '../../../util/masked-icon.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-itemnav-viewable-files-panel.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,EACV,OAAO,GAIR,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ia-itemnav-viewable-files-panel.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type PropertyValues,\n TemplateResult,\n type CSSResultGroup,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { repeat } from 'lit/directives/repeat.js';\nimport themeStyles from '@src/themes/theme-styles';\nimport { maskedIcon } from '@src/util/masked-icon';\nimport viewableFilesUrl from './icons/viewable-files.svg';\nimport type { FileSortOption, ViewableFileInfo } from './models';\n\n/** Icon for the viewable-files menu shortcut / menu entry. */\nexport const viewableFilesIcon = maskedIcon(viewableFilesUrl);\n\n/**\n * The \"viewable files\" side panel: a scrollable list of the item's viewable\n * files/volumes, linking each to its page on the host and highlighting the one\n * matching the current `subPrefix`. Populated by the host via `fileList`\n * (typically re-ordered by an `ia-itemnav-sort-files-button`).\n */\n@customElement('ia-itemnav-viewable-files-panel')\nexport class IAItemNavViewableFilesPanel extends LitElement {\n @property({ type: String }) baseHost: string = 'archive.org';\n\n @property({ type: String }) sortOrderBy: FileSortOption = 'default';\n\n @property({ type: String }) subPrefix: string = '';\n\n @property({ type: Array }) fileList: ViewableFileInfo[] = [];\n\n @property({ type: Boolean, reflect: true }) addSortToUrl = false;\n\n /**\n * Keeps the active file in view whenever the list or the selection changes.\n *\n * Both are needed: hosts commonly build this panel once and hand it a\n * `fileList` afterwards, and the selection can move while the panel stays\n * open. Reacting to the change means there is nothing to wait on — the row\n * exists by the time the update completes.\n */\n protected updated(changed: PropertyValues): void {\n if (changed.has('fileList') || changed.has('subPrefix')) {\n this.revealActiveFile();\n }\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n // Hosts reuse this element across opens, and the scroll container it sits\n // in may have been reset while it was away.\n this.revealActiveFile();\n }\n\n private async revealActiveFile(): Promise<void> {\n await this.updateComplete;\n // `nearest` leaves an already-visible row alone, which is what the\n // Chrome-only `scrollIntoViewIfNeeded` used to buy us.\n this.shadowRoot\n ?.querySelector<HTMLElement>('.content.active')\n ?.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n }\n\n fileUrl(item: ViewableFileInfo): string {\n const baseUrl = `//${this.baseHost}${item.url_path}`;\n if (this.addSortToUrl && this.sortOrderBy !== 'default') {\n return `${baseUrl}?sort=${this.sortOrderBy}`;\n }\n return baseUrl;\n }\n\n get pdfLabel(): TemplateResult {\n return html`<span class=\"pdf-label\"\n ><span class=\"sr-only\">view this</span> PDF</span\n >`;\n }\n\n fileLi(item: ViewableFileInfo): TemplateResult {\n const activeClass = this.subPrefix === item.file_subprefix ? ' active' : '';\n const hrefUrl = this.fileUrl(item);\n const isPdf = (item.file_source ?? '').match(/^[^+]+\\.pdf$/i);\n\n return html`\n <li>\n <div class=\"separator\"></div>\n <div class=\"content${activeClass}\">\n <a href=${hrefUrl}>\n <p class=\"item-title\">\n ${item.title}${isPdf ? this.pdfLabel : nothing}\n </p>\n </a>\n </div>\n </li>\n `;\n }\n\n get fileListTemplate(): TemplateResult {\n const filesDisplay = repeat(\n this.fileList,\n (file) => file?.file_prefix,\n this.fileLi.bind(this),\n );\n return html`\n <ul>\n ${filesDisplay}\n <div class=\"separator\"></div>\n </ul>\n `;\n }\n\n render(): TemplateResult | typeof nothing {\n return this.fileList.length ? this.fileListTemplate : nothing;\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --item-navigator-text-color--: var(\n --item-navigator-text-color,\n var(--true-white)\n );\n --item-navigator-border-color--: var(\n --item-navigator-border-color,\n #4b4b4b\n );\n --item-navigator-active-file-border-color--: var(\n --item-navigator-active-file-border-color,\n #538bc5\n );\n\n display: block;\n overflow-y: auto;\n box-sizing: border-box;\n color: var(--item-navigator-text-color--);\n margin-top: 14px;\n margin-bottom: 2em;\n --active-border-width--: 2px;\n /* 10px base (petabox scale); internal sizing is em against it. */\n --item-navigator-base-font-size--: var(\n --item-navigator-base-font-size,\n 10px\n );\n font-size: var(--item-navigator-base-font-size--);\n }\n\n a {\n color: var(--item-navigator-text-color--);\n text-decoration: none;\n }\n\n ul {\n padding: 0;\n list-style: none;\n margin: var(--active-border-width--) 0.5em 1em 0;\n }\n\n ul > li:first-child .separator {\n display: none;\n }\n\n li {\n cursor: pointer;\n position: relative;\n }\n\n li .content {\n border: var(--active-border-width--) solid transparent;\n padding: 0.2em 0 0.4em 0.2em;\n }\n\n li .content.active {\n border: var(--active-border-width--) solid\n var(--item-navigator-active-file-border-color--);\n }\n\n li.content a {\n display: flex;\n }\n\n .item-title {\n margin-block-start: 0em;\n margin-block-end: 0em;\n font-size: 14px;\n font-weight: bold;\n word-wrap: break-word;\n padding-left: 5px;\n }\n\n .separator {\n background-color: var(--item-navigator-border-color--);\n width: 98%;\n margin: 1px auto;\n height: 1px;\n }\n\n .pdf-label {\n border: 1px solid;\n padding: 2px 5px;\n border-radius: 20px;\n display: inline-block;\n margin-left: 5px;\n font-size: 0.9em;\n }\n\n .pdf-label .sr-only {\n position: absolute;\n clip: rect(1px, 1px, 1px, 1px);\n padding: 0;\n border: 0;\n height: 1px;\n width: 1px;\n overflow: hidden;\n }\n `,\n ];\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ia-itemnav-viewable-files-panel': IAItemNavViewableFilesPanel;\n }\n}\n"]}
|
|
@@ -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;
|
|
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,7 +1,8 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement, css, nothing, } from 'lit';
|
|
3
3
|
import { msg } from '@lit/localize';
|
|
4
|
-
import { property,
|
|
4
|
+
import { property, query } from 'lit/decorators.js';
|
|
5
|
+
import { customElement } from '../../util/custom-element.js';
|
|
5
6
|
import themeStyles from '../../themes/theme-styles.js';
|
|
6
7
|
import '../../elements/ia-status-indicator/ia-status-indicator.js';
|
|
7
8
|
import '../../elements/ia-otp-input/ia-otp-input.js';
|
|
@@ -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,
|
|
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 { 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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-otp-input.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-otp-input/ia-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAEd,cAAc,EACf,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"ia-otp-input.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-otp-input/ia-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,UAAU,EACV,cAAc,EACd,cAAc,EAEd,cAAc,EACf,MAAM,KAAK,CAAC;AAeb;;;;GAIG;AACH,qBACa,UAAW,SAAQ,UAAU;IAGxC,YAAY,CAAC,EAAE,MAAM,CAAC;IAItB,QAAQ,EAAE,OAAO,CAAS;IAI1B,QAAQ,EAAE,MAAM,CAAK;IAIrB,WAAW,EAAE,OAAO,CAAQ;IAI5B,OAAO,CAAC,YAAY,CAAyB;IAI7C,OAAO,CAAC,MAAM,CAAgC;IAE9C,MAAM,IAAI,cAAc;IAmBxB,SAAS,CAAC,YAAY,IAAI,IAAI;IAI9B,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYnD,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,aAAa;IAmCrB;;OAEG;IACH,OAAO,CAAC,WAAW;IAOnB;;;OAGG;IACH,OAAO,CAAC,UAAU;IAuBlB,yDAAyD;IACzD,OAAO,CAAC,WAAW;IAKnB,6DAA6D;IAC7D,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,aAAa;IAUrB,MAAM,KAAK,MAAM,IAAI,cAAc,CA4BlC;CACF"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html, LitElement, css, } from 'lit';
|
|
3
|
-
import { property,
|
|
3
|
+
import { property, queryAll } from 'lit/decorators.js';
|
|
4
|
+
import { customElement } from '../../util/custom-element.js';
|
|
4
5
|
import themeStyles from '../../themes/theme-styles.js';
|
|
5
6
|
/**
|
|
6
7
|
* Custom event options for the component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ia-otp-input.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-input/ia-otp-input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n css,\n PropertyValues,\n} from 'lit';\nimport { property, customElement, queryAll } from 'lit/decorators.js';\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Custom event options for the component\n */\nconst Events = {\n CodeSubmitted: 'codeSubmitted',\n};\n\nconst NUMERIC_REGEX = /^[0-9]+$/;\nconst ALPHANUMERIC_REGEX = /^[a-zA-Z0-9]+$/;\n\n/**\n * Renders an input for OTP entry, which combines a series of separate\n * inputs into one, shifting focus as needed and handling paste and backspace\n * events.\n */\n@customElement('ia-otp-input')\nexport class IAOTPInput extends LitElement {\n /* An optional value to prefill the inputs with */\n @property({ type: String })\n prefillValue?: string;\n\n /* Whether to disable all inputs */\n @property({ type: Boolean })\n disabled: boolean = false;\n\n /* Number of characters to expect for the passcode */\n @property({ type: Number })\n numChars: number = 6;\n\n /* Whether to restrict entry to numeric characters */\n @property({ type: Boolean })\n numericOnly: boolean = true;\n\n /* Regex for allowed characters. Updates based on numeric only */\n @property({ type: Object })\n private allowedChars: RegExp = NUMERIC_REGEX;\n\n /* Array of OTP inputs */\n @queryAll('input')\n private inputs!: NodeListOf<HTMLInputElement>;\n\n render(): TemplateResult {\n return html`\n ${[...Array(this.numChars).keys()].map(\n (i) =>\n html`<input\n id=\"OTP-input-${i}\"\n part=\"input\"\n type=\"text\"\n autocomplete=${i === 0 ? 'one-time-code' : 'off'}\n inputmode=${this.numericOnly ? 'numeric' : 'text'}\n ?disabled=${this.disabled}\n @beforeinput=${this.handleInput}\n @paste=${this.handlePaste}\n @keydown=${this.handleKeydown}\n />`,\n )}\n `;\n }\n\n protected firstUpdated(): void {\n this.inputs[0].focus();\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('numericOnly')) {\n this.allowedChars = this.numericOnly ? NUMERIC_REGEX : ALPHANUMERIC_REGEX;\n }\n\n if (changed.has('prefillValue') && this.prefillValue !== undefined) {\n this.fillInputs(this.prefillValue);\n this.prefillValue = undefined;\n }\n }\n\n /* Shifts forward on input */\n private handleInput(e: InputEvent): void {\n e.preventDefault();\n const input = e.target as HTMLInputElement;\n const addedValue = e.data;\n\n if (!addedValue) return;\n if (addedValue.length > 1) {\n this.fillInputs(addedValue);\n return;\n }\n if (!this.allowedChars.test(addedValue)) return;\n\n input.value = addedValue;\n const next = input.nextElementSibling as HTMLInputElement;\n if (next) next.focus();\n\n this.submitIfInputsFilled();\n }\n\n /* Performs special actions associated with some keys */\n private handleKeydown(e: KeyboardEvent): void {\n const input = e.target as HTMLInputElement;\n const key = e.key;\n const prev = input.previousElementSibling as HTMLInputElement;\n const next = input.nextElementSibling as HTMLInputElement;\n\n switch (key) {\n case 'Backspace':\n case 'Delete':\n e.preventDefault();\n if (prev) prev.focus();\n\n if (input.value === '') {\n prev.value = '';\n break;\n }\n\n input.value = '';\n break;\n case 'Tab':\n input.select();\n break;\n case 'ArrowRight':\n case 'Right':\n e.preventDefault();\n if (next) next.focus();\n break;\n case 'ArrowLeft':\n case 'Left':\n e.preventDefault();\n if (prev) prev.focus();\n break;\n }\n }\n\n /**\n * Transmits pasted data to the input-filling function\n */\n private handlePaste(e: ClipboardEvent): void {\n e.preventDefault();\n\n const pastedText = e.clipboardData?.getData('text');\n if (pastedText) this.fillInputs(pastedText);\n }\n\n /**\n * Fills as many inputs as possible with the specified value, starting from the beginning.\n * Submits the result if enough characters are filled.\n */\n private fillInputs(value: string) {\n if (value === '') this.clearInputs();\n\n const charsToFill = value\n .split('')\n .filter((char) => this.allowedChars.test(char))\n .slice(0, this.numChars);\n\n if (!charsToFill || charsToFill.length === 0) return;\n charsToFill.forEach(\n (char, i) => ((this.inputs[i] as HTMLInputElement).value = char),\n );\n\n if (charsToFill.length === this.numChars) {\n this.triggerSubmit(charsToFill.join(''));\n this.inputs[this.numChars - 1].focus();\n return;\n }\n\n const next = this.inputs[charsToFill.length];\n next.focus();\n }\n\n /** Clears all inputs and returns focus to first input */\n private clearInputs(): void {\n this.inputs.forEach((input) => (input.value = ''));\n this.inputs[0].focus();\n }\n\n /** Checks whether all inputs are filled and submits if so */\n private submitIfInputsFilled(): void {\n const code: string[] = [];\n this.inputs.forEach((input) => {\n if (input.value) code.push(input.value);\n });\n\n if (code.length === this.numChars) this.triggerSubmit(code.join(''));\n }\n\n /* Submits code */\n private triggerSubmit(code: string): void {\n this.dispatchEvent(\n new CustomEvent(Events.CodeSubmitted, {\n detail: this.numericOnly ? code : code.toUpperCase(),\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --primary-text-color--: var(--primary-text-color);\n --font-size-lg--: var(--font-size-lg);\n }\n\n :host {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n gap: 5px;\n }\n\n input {\n color: var(--primary-text-color--);\n font-size: var(--font-size-lg--);\n width: var(--font-size-lg--);\n font-weight: bold;\n height: calc(var(--font-size-lg--) + 1.25rem);\n text-align: center;\n text-transform: uppercase;\n padding: 0;\n }\n `,\n ];\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ia-otp-input.js","sourceRoot":"","sources":["../../../../src/elements/ia-otp-input/ia-otp-input.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EAGV,GAAG,GAEJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,GAAG;IACb,aAAa,EAAE,eAAe;CAC/B,CAAC;AAEF,MAAM,aAAa,GAAG,UAAU,CAAC;AACjC,MAAM,kBAAkB,GAAG,gBAAgB,CAAC;AAE5C;;;;GAIG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAKL,mCAAmC;QAEnC,aAAQ,GAAY,KAAK,CAAC;QAE1B,qDAAqD;QAErD,aAAQ,GAAW,CAAC,CAAC;QAErB,qDAAqD;QAErD,gBAAW,GAAY,IAAI,CAAC;QAE5B,iEAAiE;QAEzD,iBAAY,GAAW,aAAa,CAAC;IA6L/C,CAAC;IAvLC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CACpC,CAAC,CAAC,EAAE,EAAE,CACJ,IAAI,CAAA;4BACc,CAAC;;;2BAGF,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK;wBACpC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;wBACrC,IAAI,CAAC,QAAQ;2BACV,IAAI,CAAC,WAAW;qBACtB,IAAI,CAAC,WAAW;uBACd,IAAI,CAAC,aAAa;aAC5B,CACN;KACF,CAAC;IACJ,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IACzB,CAAC;IAES,UAAU,CAAC,OAAuB;QAC1C,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC;QAC5E,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS,EAAE,CAAC;YACnE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YACnC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAChC,CAAC;IACH,CAAC;IAED,6BAA6B;IACrB,WAAW,CAAC,CAAa;QAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC;QAE1B,IAAI,CAAC,UAAU;YAAE,OAAO;QACxB,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;YAC5B,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC;YAAE,OAAO;QAEhD,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC;QACzB,MAAM,IAAI,GAAG,KAAK,CAAC,kBAAsC,CAAC;QAC1D,IAAI,IAAI;YAAE,IAAI,CAAC,KAAK,EAAE,CAAC;QAEvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,wDAAwD;IAChD,aAAa,CAAC,CAAgB;QACpC,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;QAClB,MAAM,IAAI,GAAG,KAAK,CAAC,sBAA0C,CAAC;QAC9D,MAAM,IAAI,GAAG,KAAK,CAAC,kBAAsC,CAAC;QAE1D,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,WAAW,CAAC;YACjB,KAAK,QAAQ;gBACX,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,IAAI;oBAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gBAEvB,IAAI,KAAK,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;oBACvB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;oBAChB,MAAM;gBACR,CAAC;gBAED,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;gBACjB,MAAM;YACR,KAAK,KAAK;gBACR,KAAK,CAAC,MAAM,EAAE,CAAC;gBACf,MAAM;YACR,KAAK,YAAY,CAAC;YAClB,KAAK,OAAO;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,IAAI;oBAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gBACvB,MAAM;YACR,KAAK,WAAW,CAAC;YACjB,KAAK,MAAM;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,IAAI;oBAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gBACvB,MAAM;QACV,CAAC;IACH,CAAC;IAED;;OAEG;IACK,WAAW,CAAC,CAAiB;QACnC,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,MAAM,UAAU,GAAG,CAAC,CAAC,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,UAAU;YAAE,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAC9C,CAAC;IAED;;;OAGG;IACK,UAAU,CAAC,KAAa;QAC9B,IAAI,KAAK,KAAK,EAAE;YAAE,IAAI,CAAC,WAAW,EAAE,CAAC;QAErC,MAAM,WAAW,GAAG,KAAK;aACtB,KAAK,CAAC,EAAE,CAAC;aACT,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC9C,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE3B,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACrD,WAAW,CAAC,OAAO,CACjB,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAsB,CAAC,KAAK,GAAG,IAAI,CAAC,CACjE,CAAC;QAEF,IAAI,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,QAAQ,EAAE,CAAC;YACzC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;YACzC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YACvC,OAAO;QACT,CAAC;QAED,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAC7C,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,yDAAyD;IACjD,WAAW;QACjB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC;QACnD,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;IACzB,CAAC;IAED,6DAA6D;IACrD,oBAAoB;QAC1B,MAAM,IAAI,GAAa,EAAE,CAAC;QAC1B,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAC5B,IAAI,KAAK,CAAC,KAAK;gBAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;IACvE,CAAC;IAED,kBAAkB;IACV,aAAa,CAAC,IAAY;QAChC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,MAAM,CAAC,aAAa,EAAE;YACpC,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;YACpD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;OAuBF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA7MC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACL;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACF;AAI1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACN;AAIrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACA;AAIpB;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACkB;AAIrC;IADP,QAAQ,CAAC,OAAO,CAAC;0CAC4B;AAvBnC,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAgNtB","sourcesContent":["import {\n html,\n LitElement,\n TemplateResult,\n CSSResultGroup,\n css,\n PropertyValues,\n} from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * Custom event options for the component\n */\nconst Events = {\n CodeSubmitted: 'codeSubmitted',\n};\n\nconst NUMERIC_REGEX = /^[0-9]+$/;\nconst ALPHANUMERIC_REGEX = /^[a-zA-Z0-9]+$/;\n\n/**\n * Renders an input for OTP entry, which combines a series of separate\n * inputs into one, shifting focus as needed and handling paste and backspace\n * events.\n */\n@customElement('ia-otp-input')\nexport class IAOTPInput extends LitElement {\n /* An optional value to prefill the inputs with */\n @property({ type: String })\n prefillValue?: string;\n\n /* Whether to disable all inputs */\n @property({ type: Boolean })\n disabled: boolean = false;\n\n /* Number of characters to expect for the passcode */\n @property({ type: Number })\n numChars: number = 6;\n\n /* Whether to restrict entry to numeric characters */\n @property({ type: Boolean })\n numericOnly: boolean = true;\n\n /* Regex for allowed characters. Updates based on numeric only */\n @property({ type: Object })\n private allowedChars: RegExp = NUMERIC_REGEX;\n\n /* Array of OTP inputs */\n @queryAll('input')\n private inputs!: NodeListOf<HTMLInputElement>;\n\n render(): TemplateResult {\n return html`\n ${[...Array(this.numChars).keys()].map(\n (i) =>\n html`<input\n id=\"OTP-input-${i}\"\n part=\"input\"\n type=\"text\"\n autocomplete=${i === 0 ? 'one-time-code' : 'off'}\n inputmode=${this.numericOnly ? 'numeric' : 'text'}\n ?disabled=${this.disabled}\n @beforeinput=${this.handleInput}\n @paste=${this.handlePaste}\n @keydown=${this.handleKeydown}\n />`,\n )}\n `;\n }\n\n protected firstUpdated(): void {\n this.inputs[0].focus();\n }\n\n protected willUpdate(changed: PropertyValues): void {\n if (changed.has('numericOnly')) {\n this.allowedChars = this.numericOnly ? NUMERIC_REGEX : ALPHANUMERIC_REGEX;\n }\n\n if (changed.has('prefillValue') && this.prefillValue !== undefined) {\n this.fillInputs(this.prefillValue);\n this.prefillValue = undefined;\n }\n }\n\n /* Shifts forward on input */\n private handleInput(e: InputEvent): void {\n e.preventDefault();\n const input = e.target as HTMLInputElement;\n const addedValue = e.data;\n\n if (!addedValue) return;\n if (addedValue.length > 1) {\n this.fillInputs(addedValue);\n return;\n }\n if (!this.allowedChars.test(addedValue)) return;\n\n input.value = addedValue;\n const next = input.nextElementSibling as HTMLInputElement;\n if (next) next.focus();\n\n this.submitIfInputsFilled();\n }\n\n /* Performs special actions associated with some keys */\n private handleKeydown(e: KeyboardEvent): void {\n const input = e.target as HTMLInputElement;\n const key = e.key;\n const prev = input.previousElementSibling as HTMLInputElement;\n const next = input.nextElementSibling as HTMLInputElement;\n\n switch (key) {\n case 'Backspace':\n case 'Delete':\n e.preventDefault();\n if (prev) prev.focus();\n\n if (input.value === '') {\n prev.value = '';\n break;\n }\n\n input.value = '';\n break;\n case 'Tab':\n input.select();\n break;\n case 'ArrowRight':\n case 'Right':\n e.preventDefault();\n if (next) next.focus();\n break;\n case 'ArrowLeft':\n case 'Left':\n e.preventDefault();\n if (prev) prev.focus();\n break;\n }\n }\n\n /**\n * Transmits pasted data to the input-filling function\n */\n private handlePaste(e: ClipboardEvent): void {\n e.preventDefault();\n\n const pastedText = e.clipboardData?.getData('text');\n if (pastedText) this.fillInputs(pastedText);\n }\n\n /**\n * Fills as many inputs as possible with the specified value, starting from the beginning.\n * Submits the result if enough characters are filled.\n */\n private fillInputs(value: string) {\n if (value === '') this.clearInputs();\n\n const charsToFill = value\n .split('')\n .filter((char) => this.allowedChars.test(char))\n .slice(0, this.numChars);\n\n if (!charsToFill || charsToFill.length === 0) return;\n charsToFill.forEach(\n (char, i) => ((this.inputs[i] as HTMLInputElement).value = char),\n );\n\n if (charsToFill.length === this.numChars) {\n this.triggerSubmit(charsToFill.join(''));\n this.inputs[this.numChars - 1].focus();\n return;\n }\n\n const next = this.inputs[charsToFill.length];\n next.focus();\n }\n\n /** Clears all inputs and returns focus to first input */\n private clearInputs(): void {\n this.inputs.forEach((input) => (input.value = ''));\n this.inputs[0].focus();\n }\n\n /** Checks whether all inputs are filled and submits if so */\n private submitIfInputsFilled(): void {\n const code: string[] = [];\n this.inputs.forEach((input) => {\n if (input.value) code.push(input.value);\n });\n\n if (code.length === this.numChars) this.triggerSubmit(code.join(''));\n }\n\n /* Submits code */\n private triggerSubmit(code: string): void {\n this.dispatchEvent(\n new CustomEvent(Events.CodeSubmitted, {\n detail: this.numericOnly ? code : code.toUpperCase(),\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n static get styles(): CSSResultGroup {\n return [\n themeStyles,\n css`\n :host {\n --primary-text-color--: var(--primary-text-color);\n --font-size-lg--: var(--font-size-lg);\n }\n\n :host {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n gap: 5px;\n }\n\n input {\n color: var(--primary-text-color--);\n font-size: var(--font-size-lg--);\n width: var(--font-size-lg--);\n font-weight: bold;\n height: calc(var(--font-size-lg--) + 1.25rem);\n text-align: center;\n text-transform: uppercase;\n padding: 0;\n }\n `,\n ];\n }\n}\n"]}
|
|
@@ -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;
|
|
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,6 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { css, html, LitElement, } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { property } from 'lit/decorators.js';
|
|
4
|
+
import { customElement } from '../../util/custom-element.js';
|
|
4
5
|
import { msg, str } from '@lit/localize';
|
|
5
6
|
import { PlaybackMode } from './models.js';
|
|
6
7
|
import nextSectionIcon from './assets/next-section.js';
|