@internetarchive/elements 0.2.12-webdev8711.0 → 0.2.13-webdev-9022.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- 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 +4 -1
- package/dist/src/elements/ia-dropdown-search-bar/ia-dropdown-search-bar.js.map +1 -1
- package/dist/src/elements/ia-image-viewer/ia-image-viewer.d.ts +142 -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 +508 -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 +27 -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 +157 -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 +49 -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 +225 -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 +97 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.js +588 -0
- package/dist/src/elements/ia-item-navigator/ia-item-navigator.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts +39 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js +249 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-button.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts +55 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js +394 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-menu-slider.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts +20 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js +102 -0
- package/dist/src/elements/ia-item-navigator/ia-itemnav-no-theater-available.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/icons/collapse-sidebar.svg +7 -0
- package/dist/src/elements/ia-item-navigator/icons/ellipses.svg +7 -0
- package/dist/src/elements/ia-item-navigator/icons.d.ts +13 -0
- package/dist/src/elements/ia-item-navigator/icons.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/icons.js +16 -0
- package/dist/src/elements/ia-item-navigator/icons.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts +41 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js +2 -0
- package/dist/src/elements/ia-item-navigator/interfaces/event-interfaces.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts +23 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js +2 -0
- package/dist/src/elements/ia-item-navigator/interfaces/menu-interfaces.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/masked-icon.d.ts +24 -0
- package/dist/src/elements/ia-item-navigator/masked-icon.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/masked-icon.js +30 -0
- package/dist/src/elements/ia-item-navigator/masked-icon.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts +47 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js +352 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-share-panel.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts +22 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js +137 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-sort-files-button.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts +40 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js +217 -0
- package/dist/src/elements/ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/email.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/facebook.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/link.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/list.svg +3 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/pinterest.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/share.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/sort-asc.svg +22 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/sort-desc.svg +21 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/sort-neutral.svg +13 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/tumblr.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/twitter.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/icons/viewable-files.svg +6 -0
- package/dist/src/elements/ia-item-navigator/menus/models.d.ts +17 -0
- package/dist/src/elements/ia-item-navigator/menus/models.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/models.js +2 -0
- package/dist/src/elements/ia-item-navigator/menus/models.js.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.d.ts +16 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.d.ts.map +1 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.js +23 -0
- package/dist/src/elements/ia-item-navigator/menus/share-icons.js.map +1 -0
- 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 +0 -2
- package/dist/src/elements/ia-otp-input/ia-otp-input.js.map +1 -1
- package/dist/src/elements/index.d.ts +5 -0
- package/dist/src/elements/index.d.ts.map +1 -1
- package/dist/src/elements/index.js +5 -0
- package/dist/src/elements/index.js.map +1 -1
- 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 +2 -2
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { maskedIcon } from '../masked-icon.js';
|
|
2
|
+
import shareUrl from './icons/share.svg';
|
|
3
|
+
import twitterUrl from './icons/twitter.svg';
|
|
4
|
+
import facebookUrl from './icons/facebook.svg';
|
|
5
|
+
import tumblrUrl from './icons/tumblr.svg';
|
|
6
|
+
import pinterestUrl from './icons/pinterest.svg';
|
|
7
|
+
import emailUrl from './icons/email.svg';
|
|
8
|
+
import linkUrl from './icons/link.svg';
|
|
9
|
+
/**
|
|
10
|
+
* Icons taken from the `@internetarchive/icon-*` packages (v1.4.1) used by the
|
|
11
|
+
* share panel. They ship as standalone `.svg` files — rather than icon package
|
|
12
|
+
* dependencies or inline templates — so their path data stays out of the JS
|
|
13
|
+
* bundle, and render as CSS-masked spans (see `maskedIcon`) so the panel can
|
|
14
|
+
* still theme them. Icons are decorative, labelled by adjacent text.
|
|
15
|
+
*/
|
|
16
|
+
export const shareIcon = maskedIcon(shareUrl);
|
|
17
|
+
export const twitterIcon = maskedIcon(twitterUrl);
|
|
18
|
+
export const facebookIcon = maskedIcon(facebookUrl);
|
|
19
|
+
export const tumblrIcon = maskedIcon(tumblrUrl);
|
|
20
|
+
export const pinterestIcon = maskedIcon(pinterestUrl);
|
|
21
|
+
export const emailIcon = maskedIcon(emailUrl);
|
|
22
|
+
export const linkIcon = maskedIcon(linkUrl);
|
|
23
|
+
//# sourceMappingURL=share-icons.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"share-icons.js","sourceRoot":"","sources":["../../../../../src/elements/ia-item-navigator/menus/share-icons.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAC/C,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,OAAO,MAAM,kBAAkB,CAAC;AAEvC;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAmB,UAAU,CAAC,QAAQ,CAAC,CAAC;AAE9D,MAAM,CAAC,MAAM,WAAW,GAAmB,UAAU,CAAC,UAAU,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,YAAY,GAAmB,UAAU,CAAC,WAAW,CAAC,CAAC;AAEpE,MAAM,CAAC,MAAM,UAAU,GAAmB,UAAU,CAAC,SAAS,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,aAAa,GAAmB,UAAU,CAAC,YAAY,CAAC,CAAC;AAEtE,MAAM,CAAC,MAAM,SAAS,GAAmB,UAAU,CAAC,QAAQ,CAAC,CAAC;AAE9D,MAAM,CAAC,MAAM,QAAQ,GAAmB,UAAU,CAAC,OAAO,CAAC,CAAC","sourcesContent":["import { type TemplateResult } from 'lit';\nimport { maskedIcon } from '../masked-icon';\n\nimport shareUrl from './icons/share.svg';\nimport twitterUrl from './icons/twitter.svg';\nimport facebookUrl from './icons/facebook.svg';\nimport tumblrUrl from './icons/tumblr.svg';\nimport pinterestUrl from './icons/pinterest.svg';\nimport emailUrl from './icons/email.svg';\nimport linkUrl from './icons/link.svg';\n\n/**\n * Icons taken from the `@internetarchive/icon-*` packages (v1.4.1) used by the\n * share panel. They ship as standalone `.svg` files — rather than icon package\n * dependencies or inline templates — so their path data stays out of the JS\n * bundle, and render as CSS-masked spans (see `maskedIcon`) so the panel can\n * still theme them. Icons are decorative, labelled by adjacent text.\n */\n\nexport const shareIcon: TemplateResult = maskedIcon(shareUrl);\n\nexport const twitterIcon: TemplateResult = maskedIcon(twitterUrl);\n\nexport const facebookIcon: TemplateResult = maskedIcon(facebookUrl);\n\nexport const tumblrIcon: TemplateResult = maskedIcon(tumblrUrl);\n\nexport const pinterestIcon: TemplateResult = maskedIcon(pinterestUrl);\n\nexport const emailIcon: TemplateResult = maskedIcon(emailUrl);\n\nexport const linkIcon: TemplateResult = maskedIcon(linkUrl);\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;AAcb;;;;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;
|
|
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;AAcb;;;;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"}
|
|
@@ -122,8 +122,6 @@ let IAOTPInput = class IAOTPInput extends LitElement {
|
|
|
122
122
|
* Submits the result if enough characters are filled.
|
|
123
123
|
*/
|
|
124
124
|
fillInputs(value) {
|
|
125
|
-
if (typeof value !== 'string')
|
|
126
|
-
value = String(value ?? '');
|
|
127
125
|
if (value === '')
|
|
128
126
|
this.clearInputs();
|
|
129
127
|
const charsToFill = value
|
|
@@ -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 (typeof value !== 'string') value = String(value ?? '');\n\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":"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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,4 +1,9 @@
|
|
|
1
1
|
export * from './ia-button/ia-button.js';
|
|
2
2
|
export * from './ia-combo-box/ia-combo-box.js';
|
|
3
3
|
export * from './ia-dropdown-search-bar/ia-dropdown-search-bar.js';
|
|
4
|
+
export * from './ia-image-viewer/ia-image-viewer.js';
|
|
5
|
+
export * from './ia-item-navigator/ia-item-navigator.js';
|
|
6
|
+
export * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js';
|
|
7
|
+
export * from './ia-item-navigator/menus/ia-itemnav-sort-files-button.js';
|
|
8
|
+
export * from './ia-item-navigator/menus/ia-itemnav-share-panel.js';
|
|
4
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC"}
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
export * from './ia-button/ia-button.js';
|
|
2
2
|
export * from './ia-combo-box/ia-combo-box.js';
|
|
3
3
|
export * from './ia-dropdown-search-bar/ia-dropdown-search-bar.js';
|
|
4
|
+
export * from './ia-image-viewer/ia-image-viewer.js';
|
|
5
|
+
export * from './ia-item-navigator/ia-item-navigator.js';
|
|
6
|
+
export * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js';
|
|
7
|
+
export * from './ia-item-navigator/menus/ia-itemnav-sort-files-button.js';
|
|
8
|
+
export * from './ia-item-navigator/menus/ia-itemnav-share-panel.js';
|
|
4
9
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC","sourcesContent":["export * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC","sourcesContent":["export * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\nexport * from './ia-image-viewer/ia-image-viewer';\nexport * from './ia-item-navigator/ia-item-navigator';\nexport * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel';\nexport * from './ia-item-navigator/menus/ia-itemnav-sort-files-button';\nexport * from './ia-item-navigator/menus/ia-itemnav-share-panel';\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Whether the user has asked the system for reduced motion.
|
|
3
|
+
*
|
|
4
|
+
* Read at the moment an animation would start rather than cached, so changing
|
|
5
|
+
* the system setting takes effect without a reload. CSS handles the purely
|
|
6
|
+
* decorative animations on its own; this is for the places where JavaScript
|
|
7
|
+
* schedules or waits on one.
|
|
8
|
+
*/
|
|
9
|
+
export declare function prefersReducedMotion(): boolean;
|
|
10
|
+
//# sourceMappingURL=prefers-reduced-motion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prefers-reduced-motion.d.ts","sourceRoot":"","sources":["../../../src/util/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAI9C"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Whether the user has asked the system for reduced motion.
|
|
3
|
+
*
|
|
4
|
+
* Read at the moment an animation would start rather than cached, so changing
|
|
5
|
+
* the system setting takes effect without a reload. CSS handles the purely
|
|
6
|
+
* decorative animations on its own; this is for the places where JavaScript
|
|
7
|
+
* schedules or waits on one.
|
|
8
|
+
*/
|
|
9
|
+
export function prefersReducedMotion() {
|
|
10
|
+
return (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);
|
|
11
|
+
}
|
|
12
|
+
//# sourceMappingURL=prefers-reduced-motion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prefers-reduced-motion.js","sourceRoot":"","sources":["../../../src/util/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO,CACL,MAAM,CAAC,UAAU,EAAE,CAAC,kCAAkC,CAAC,CAAC,OAAO,IAAI,KAAK,CACzE,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Whether the user has asked the system for reduced motion.\n *\n * Read at the moment an animation would start rather than cached, so changing\n * the system setting takes effect without a reload. CSS handles the purely\n * decorative animations on its own; this is for the places where JavaScript\n * schedules or waits on one.\n */\nexport function prefersReducedMotion(): boolean {\n return (\n window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@internetarchive/elements",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.13-webdev-9022.0",
|
|
4
4
|
"description": "A web component library from the Internet Archive.",
|
|
5
5
|
"license": "AGPL-3.0-only",
|
|
6
6
|
"types": "./dist/src/elements/index.d.ts",
|
|
7
7
|
"type": "module",
|
|
8
|
-
"packageManager": "pnpm@11.
|
|
8
|
+
"packageManager": "pnpm@11.22.0",
|
|
9
9
|
"engines": {
|
|
10
10
|
"node": ">=24",
|
|
11
11
|
"pnpm": ">=11"
|