npm - @internetarchive/elements - Versions diffs - 0.4.0 → 0.4.2-webdev-9107.0 - Mend

@internetarchive/elements 0.4.0 → 0.4.2-webdev-9107.0

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

Files changed (134) hide show

package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-waveform-progress.js","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/ia-waveform-progress.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,KAAK,EAAE,MAAM,mBAAmB,CAAC;~~AAI1E~~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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type CSSResultGroup,\n type PropertyValues,\n type TemplateResult,\n} from 'lit';\nimport { ~~customElement,~~ property, query, state } from 'lit/decorators.js';\n\nimport type { ZoneOfSilence } from './models';\n\n/*\n Event names emitted by this component\n /\nconst Events = {\n ValueChange: 'valuechange',\n};\n\n/\n Renders a waveform image with a progress fill over it, optionally marking\n * out the stretches of silence.\n \n When `interactive` is set, dragging anywhere across the waveform scrubs, and\n * the element emits `valuechange` with the new percentage.\n /\n@customElement('ia-waveform-progress')\nexport class IAWaveformProgress extends LitElement {\n /* How far through the track playback is, as a percentage (0 to 100) /\n @property({ type: Number }) percentComplete = 0;\n\n /* URL of the waveform image to render /\n @property({ type: String }) waveformUrl = '';\n\n /* Whether dragging across the waveform scrubs the track /\n @property({ type: Boolean }) interactive = false;\n\n /* Stretches of the track with no audio, to mark on the waveform /\n @property({ type: Array }) zonesOfSilence: ZoneOfSilence[] = [];\n\n /\n The percentage actually rendered.\n \n `percentComplete` is driven from outside by whatever is playing the audio,\n * but while the listener is dragging, their position wins. Keeping the two\n * apart is what lets the drag survive the playback updates arriving\n * underneath it.\n /\n @state() private displayedPercent = 0;\n\n private userIsInteracting = false;\n\n @query('.container') private container?: HTMLElement \| null;\n\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div id=\"fill\" style=\"width: ${this.displayedPercent}%\"></div>\n <img class=\"waveform-image\" src=${this.waveformUrl} alt=\"\" />\n ${this.zonesOfSilenceTemplate}\n ${this.interactive ? this.interactionCoverTemplate : nothing}\n </div>\n `;\n }\n\n private get zonesOfSilenceTemplate(): TemplateResult {\n return html`\n ${this.zonesOfSilence.map(\n (zone) => html`\n <div\n class=\"zone-of-silence\"\n style=\"left: ${zone.startPercent}%; width: ${zone.endPercent -\n zone.startPercent}%\"\n ></div>\n `,\n )}\n `;\n }\n\n private get interactionCoverTemplate(): TemplateResult {\n return html`\n <div\n id=\"dragcover\"\n @mousedown=${this.dragStart}\n @mouseup=${this.dragEnd}\n @mouseleave=${this.dragEnd}\n @mousemove=${this.drag}\n @touchstart=${this.dragStart}\n @touchend=${this.dragEnd}\n @touchcancel=${this.dragEnd}\n @touchmove=${this.drag}\n ></div>\n `;\n }\n\n updated(changedProperties: PropertyValues): void {\n if (!changedProperties.has('percentComplete') \|\| this.userIsInteracting) {\n return;\n }\n\n this.displayedPercent = this.percentComplete;\n }\n\n private drag(e: MouseEvent \| TouchEvent): void {\n if (!this.userIsInteracting) return;\n this.updateDisplayedPercent(e);\n }\n\n /\n Only the primary mouse button scrubs.\n \n A right-click would otherwise seek the track on its way to opening the\n * context menu, and the menu swallows the `mouseup`, so the drag would stay\n * latched on afterwards.\n /\n private dragStart(e: MouseEvent \| TouchEvent): void {\n if ('button' in e && e.button !== 0) return;\n\n this.userIsInteracting = true;\n this.updateDisplayedPercent(e);\n }\n\n /\n Ends the drag.\n \n Bound to `touchcancel` as well as `touchend`, because a touch taken over by\n * the system (an incoming call, a browser gesture) never delivers `touchend`,\n * and a drag left latched on would ignore playback updates from then on.\n /\n private dragEnd(): void {\n this.userIsInteracting = false;\n }\n\n private updateDisplayedPercent(e: MouseEvent \| TouchEvent): void {\n const pageX = IAWaveformProgress.pageXFrom(e);\n if (pageX === undefined \|\| !this.container) return;\n\n const bounds = this.container.getBoundingClientRect();\n if (bounds.width === 0) return;\n\n // `pageX` is measured from the document origin, so the container's own\n // viewport position has to be put back into document space before the two\n // can be subtracted.\n const offsetX = pageX - (bounds.left + window.scrollX);\n const percent = (offsetX / bounds.width) 100;\n\n this.displayedPercent = Math.min(Math.max(percent, 0), 100);\n this.dispatchEvent(\n new CustomEvent<{ value: number }>(Events.ValueChange, {\n detail: { value: this.displayedPercent },\n }),\n );\n }\n\n /*\n The horizontal page position of a pointer, from either flavour of event.\n \n A `TouchEvent` carries no `pageX` of its own, so the first touch supplies\n * it. A `touchend` has no touches left to read, which is why this can come\n * back undefined.\n */\n private static pageXFrom(e: MouseEvent \| TouchEvent): number \| undefined {\n if ('touches' in e) return e.touches[0]?.pageX;\n return e.pageX;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n --waveform-fill-color--: var(--ia-theme-waveform-fill-color, #3272b6);\n --waveform-zone-of-silence-color--: var(\n --ia-theme-waveform-zone-of-silence-color,\n #f6e652\n );\n --waveform-side-margin--: var(--ia-theme-waveform-side-margin, 10px);\n\n display: inline-block;\n }\n\n #dragcover {\n width: 100%;\n height: 100%;\n position: absolute;\n touch-action: none;\n }\n\n .container {\n display: block;\n position: relative;\n background-color: white;\n height: 100%;\n margin-left: var(--waveform-side-margin--);\n margin-right: var(--waveform-side-margin--);\n }\n\n .waveform-image {\n width: 100%;\n height: 100%;\n position: absolute;\n }\n\n .zone-of-silence {\n position: absolute;\n top: 0;\n bottom: 0;\n background: linear-gradient(\n #000,\n #000 47%,\n var(--waveform-zone-of-silence-color--) 50%,\n #000 53%,\n #000 100%\n );\n }\n\n #fill {\n position: absolute;\n height: 100%;\n background-color: var(--waveform-fill-color--);\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-waveform-progress.js","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/ia-waveform-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n nothing,\n type CSSResultGroup,\n type PropertyValues,\n type TemplateResult,\n} from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\n\nimport type { ZoneOfSilence } from './models';\n\n/*\n Event names emitted by this component\n /\nconst Events = {\n ValueChange: 'valuechange',\n};\n\n/\n Renders a waveform image with a progress fill over it, optionally marking\n * out the stretches of silence.\n \n When `interactive` is set, dragging anywhere across the waveform scrubs, and\n * the element emits `valuechange` with the new percentage.\n /\n@customElement('ia-waveform-progress')\nexport class IAWaveformProgress extends LitElement {\n /* How far through the track playback is, as a percentage (0 to 100) /\n @property({ type: Number }) percentComplete = 0;\n\n /* URL of the waveform image to render /\n @property({ type: String }) waveformUrl = '';\n\n /* Whether dragging across the waveform scrubs the track /\n @property({ type: Boolean }) interactive = false;\n\n /* Stretches of the track with no audio, to mark on the waveform /\n @property({ type: Array }) zonesOfSilence: ZoneOfSilence[] = [];\n\n /\n The percentage actually rendered.\n \n `percentComplete` is driven from outside by whatever is playing the audio,\n * but while the listener is dragging, their position wins. Keeping the two\n * apart is what lets the drag survive the playback updates arriving\n * underneath it.\n /\n @state() private displayedPercent = 0;\n\n private userIsInteracting = false;\n\n @query('.container') private container?: HTMLElement \| null;\n\n render(): TemplateResult {\n return html`\n <div class=\"container\">\n <div id=\"fill\" style=\"width: ${this.displayedPercent}%\"></div>\n <img class=\"waveform-image\" src=${this.waveformUrl} alt=\"\" />\n ${this.zonesOfSilenceTemplate}\n ${this.interactive ? this.interactionCoverTemplate : nothing}\n </div>\n `;\n }\n\n private get zonesOfSilenceTemplate(): TemplateResult {\n return html`\n ${this.zonesOfSilence.map(\n (zone) => html`\n <div\n class=\"zone-of-silence\"\n style=\"left: ${zone.startPercent}%; width: ${zone.endPercent -\n zone.startPercent}%\"\n ></div>\n `,\n )}\n `;\n }\n\n private get interactionCoverTemplate(): TemplateResult {\n return html`\n <div\n id=\"dragcover\"\n @mousedown=${this.dragStart}\n @mouseup=${this.dragEnd}\n @mouseleave=${this.dragEnd}\n @mousemove=${this.drag}\n @touchstart=${this.dragStart}\n @touchend=${this.dragEnd}\n @touchcancel=${this.dragEnd}\n @touchmove=${this.drag}\n ></div>\n `;\n }\n\n updated(changedProperties: PropertyValues): void {\n if (!changedProperties.has('percentComplete') \|\| this.userIsInteracting) {\n return;\n }\n\n this.displayedPercent = this.percentComplete;\n }\n\n private drag(e: MouseEvent \| TouchEvent): void {\n if (!this.userIsInteracting) return;\n this.updateDisplayedPercent(e);\n }\n\n /\n Only the primary mouse button scrubs.\n \n A right-click would otherwise seek the track on its way to opening the\n * context menu, and the menu swallows the `mouseup`, so the drag would stay\n * latched on afterwards.\n /\n private dragStart(e: MouseEvent \| TouchEvent): void {\n if ('button' in e && e.button !== 0) return;\n\n this.userIsInteracting = true;\n this.updateDisplayedPercent(e);\n }\n\n /\n Ends the drag.\n \n Bound to `touchcancel` as well as `touchend`, because a touch taken over by\n * the system (an incoming call, a browser gesture) never delivers `touchend`,\n * and a drag left latched on would ignore playback updates from then on.\n /\n private dragEnd(): void {\n this.userIsInteracting = false;\n }\n\n private updateDisplayedPercent(e: MouseEvent \| TouchEvent): void {\n const pageX = IAWaveformProgress.pageXFrom(e);\n if (pageX === undefined \|\| !this.container) return;\n\n const bounds = this.container.getBoundingClientRect();\n if (bounds.width === 0) return;\n\n // `pageX` is measured from the document origin, so the container's own\n // viewport position has to be put back into document space before the two\n // can be subtracted.\n const offsetX = pageX - (bounds.left + window.scrollX);\n const percent = (offsetX / bounds.width) 100;\n\n this.displayedPercent = Math.min(Math.max(percent, 0), 100);\n this.dispatchEvent(\n new CustomEvent<{ value: number }>(Events.ValueChange, {\n detail: { value: this.displayedPercent },\n }),\n );\n }\n\n /*\n The horizontal page position of a pointer, from either flavour of event.\n \n A `TouchEvent` carries no `pageX` of its own, so the first touch supplies\n * it. A `touchend` has no touches left to read, which is why this can come\n * back undefined.\n */\n private static pageXFrom(e: MouseEvent \| TouchEvent): number \| undefined {\n if ('touches' in e) return e.touches[0]?.pageX;\n return e.pageX;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n :host {\n --waveform-fill-color--: var(--ia-theme-waveform-fill-color, #3272b6);\n --waveform-zone-of-silence-color--: var(\n --ia-theme-waveform-zone-of-silence-color,\n #f6e652\n );\n --waveform-side-margin--: var(--ia-theme-waveform-side-margin, 10px);\n\n display: inline-block;\n }\n\n #dragcover {\n width: 100%;\n height: 100%;\n position: absolute;\n touch-action: none;\n }\n\n .container {\n display: block;\n position: relative;\n background-color: white;\n height: 100%;\n margin-left: var(--waveform-side-margin--);\n margin-right: var(--waveform-side-margin--);\n }\n\n .waveform-image {\n width: 100%;\n height: 100%;\n position: absolute;\n }\n\n .zone-of-silence {\n position: absolute;\n top: 0;\n bottom: 0;\n background: linear-gradient(\n #000,\n #000 47%,\n var(--waveform-zone-of-silence-color--) 50%,\n #000 53%,\n #000 100%\n );\n }\n\n #fill {\n position: absolute;\n height: 100%;\n background-color: var(--waveform-fill-color--);\n }\n `;\n }\n}\n"]}

package/dist/src/elements/index.d.ts CHANGED Viewed

@@ -24,6 +24,9 @@ export * from './ia-radio-player/search/models.js';
 export * from './ia-radio-player/search/search-handler.js';
 export * from './ia-radio-player/search/search-helper.js';
 export * from './ia-radio-player/search/transcript-index.js';
+export * from './ia-reviews/ia-review.js';
+export * from './ia-reviews/ia-review-form.js';
+export * from './ia-reviews/ia-reviews.js';
 export * from './ia-scrubber-bar/ia-scrubber-bar.js';
 export * from './ia-scrubber-bar/ia-section-marker.js';
 export * from './ia-scrubber-bar/models.js';

package/dist/src/elements/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC"}

package/dist/src/elements/index.js CHANGED Viewed

@@ -24,6 +24,9 @@ export * from './ia-radio-player/search/models.js';
 export * from './ia-radio-player/search/search-handler.js';
 export * from './ia-radio-player/search/search-helper.js';
 export * from './ia-radio-player/search/transcript-index.js';
+export * from './ia-reviews/ia-review.js';
+export * from './ia-reviews/ia-review-form.js';
+export * from './ia-reviews/ia-reviews.js';
 export * from './ia-scrubber-bar/ia-scrubber-bar.js';
 export * from './ia-scrubber-bar/ia-section-marker.js';
 export * from './ia-scrubber-bar/models.js';

package/dist/src/elements/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './ia-audio-element/ia-audio-element';\nexport * from './ia-audio-element/models';\nexport * 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-expandable-search-bar/ia-expandable-search-bar';\nexport * from './ia-expandable-search-bar/ia-quick-search';\nexport * from './ia-expandable-search-bar/models';\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';\nexport * from './ia-playback-controls/ia-playback-controls';\nexport * from './ia-playback-controls/models';\nexport * from './ia-radio-player/ia-radio-player';\nexport * from './ia-radio-player/ia-search-results-switcher';\nexport * from './ia-radio-player/models';\nexport * from './ia-radio-player/search/backends/full-text-search-backend';\nexport * from './ia-radio-player/search/backends/full-text-search-response';\nexport * from './ia-radio-player/search/backends/local-search-backend';\nexport * from './ia-radio-player/search/backends/search-backend';\nexport * from './ia-radio-player/search/models';\nexport * from './ia-radio-player/search/search-handler';\nexport * from './ia-radio-player/search/search-helper';\nexport * from './ia-radio-player/search/transcript-index';\nexport * from './ia-scrubber-bar/ia-scrubber-bar';\nexport * from './ia-scrubber-bar/ia-section-marker';\nexport * from './ia-scrubber-bar/models';\nexport * from './ia-transcript-view/duration-formatter';\nexport * from './ia-transcript-view/ia-transcript-entry';\nexport * from './ia-transcript-view/ia-transcript-view';\nexport * from './ia-transcript-view/models';\nexport * from './ia-waveform-progress/ia-waveform-progress';\nexport * from './ia-waveform-progress/models';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './ia-audio-element/ia-audio-element';\nexport * from './ia-audio-element/models';\nexport * 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-expandable-search-bar/ia-expandable-search-bar';\nexport * from './ia-expandable-search-bar/ia-quick-search';\nexport * from './ia-expandable-search-bar/models';\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';\nexport * from './ia-playback-controls/ia-playback-controls';\nexport * from './ia-playback-controls/models';\nexport * from './ia-radio-player/ia-radio-player';\nexport * from './ia-radio-player/ia-search-results-switcher';\nexport * from './ia-radio-player/models';\nexport * from './ia-radio-player/search/backends/full-text-search-backend';\nexport * from './ia-radio-player/search/backends/full-text-search-response';\nexport * from './ia-radio-player/search/backends/local-search-backend';\nexport * from './ia-radio-player/search/backends/search-backend';\nexport * from './ia-radio-player/search/models';\nexport * from './ia-radio-player/search/search-handler';\nexport * from './ia-radio-player/search/search-helper';\nexport * from './ia-radio-player/search/transcript-index';\nexport * from './ia-reviews/ia-review';\nexport * from './ia-reviews/ia-review-form';\nexport * from './ia-reviews/ia-reviews';\nexport * from './ia-scrubber-bar/ia-scrubber-bar';\nexport * from './ia-scrubber-bar/ia-section-marker';\nexport * from './ia-scrubber-bar/models';\nexport * from './ia-transcript-view/duration-formatter';\nexport * from './ia-transcript-view/ia-transcript-entry';\nexport * from './ia-transcript-view/ia-transcript-view';\nexport * from './ia-transcript-view/models';\nexport * from './ia-waveform-progress/ia-waveform-progress';\nexport * from './ia-waveform-progress/models';\n"]}

package/dist/src/labs/ia-snow/ia-snow.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement, } from 'lit';
 import { property } from 'lit/decorators.js';
-import { customElement } from 'lit/decorators/custom-element.js';
+import { customElement } from '../../util/custom-element.js';
 import { state } from 'lit/decorators/state.js';
 import flakeIcon from './flake.svg';
 import { lazyLoadTemplate, } from '../../util/lazy-load-template.js';

package/dist/src/labs/ia-snow/ia-snow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ia-snow.js","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,IAAI,EACJ,UAAU,GAGX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,~~kCAAkC~~,CAAC;~~AACjE~~,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAKhD,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EACL,gBAAgB,GAEjB,MAAM,8BAA8B,CAAC;AAEtC;;GAEG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAIG,YAAO,GAAG,KAAK,CAAC;IAwF1B,CAAC;IApFC,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,mBAAmB;iBAC3C,SAAS;KACrB,CAAC;IACJ,CAAC;IAES,UAAU,CAAC,kBAAkC;QACrD,IAAI,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,8DAA8D;IAC9D,yEAAyE;IACzE,eAAe;IACf,EAAE;IACF,2EAA2E;IAC3E,yDAAyD;IACzD,IAAY,mBAAmB;QAC7B,OAAO,gBAAgB,CACrB,KAAK,IAAI,EAAE;YACT,MAAM,MAAM,CAAC,mCAAmC,CAAC,CAAC;QACpD,CAAC,EACD,GAAG,EAAE,CAAC,IAAI,CAAA;;mBAEG,GAAG,EAAE;YACZ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;;YAEC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;;OAE1D,CACF,CAAC;IACJ,CAAC;IAED,IAAY,mBAAmB;QAC7B,OAAO,gBAAgB,CACrB,KAAK,IAAI,EAAE;YACT,MAAM,MAAM,CAAC,mCAAmC,CAAC,CAAC;QACpD,CAAC,EACD,GAAG,EAAE,CAAC,IAAI,CAAA;;mBAEG,GAAG,EAAE;YACZ,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;QAC7B,CAAC;;;;OAIJ,CACF,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,YAAY;QACxB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,qEAAqE;YACrE,MAAM,gBAAgB,GAAG,MAAM,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC1D,MAAM,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;YAC5C,IAAI,CAAC,UAAU,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,CAAC;QACD,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;KAMT,CAAC;IACJ,CAAC;CACF,CAAA;AA3F6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAA+B;AAGlD;IADP,KAAK,EAAE;uCACgB;AAJb,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA4FlB","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n type PropertyValues,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '~~lit~~/~~decorators~~/custom-element~~.js~~';\nimport { state } from 'lit/decorators/state.js';\n\nimport type Snowflakes from 'magic-snowflakes';\nimport type { SnowflakesParams } from 'magic-snowflakes';\n\nimport flakeIcon from './flake.svg';\nimport {\n lazyLoadTemplate,\n type LazyLoadedTemplate,\n} from '@src/util/lazy-load-template';\n\n/*\n An element that shows snowflakes to demo the elements library\n */\n@customElement('ia-snow')\nexport class IASnow extends LitElement {\n @property({ type: Object }) snowConfig?: SnowflakesParams;\n\n @state()\n private snowing = false;\n\n private snowflakes?: Snowflakes;\n\n render() {\n return html`\n ${this.startButtonTemplate} ${this.clearButtonTemplate}\n <img src=${flakeIcon} alt=\"Snowflakes icon\" />\n `;\n }\n\n protected willUpdate(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('snowConfig')) {\n this.snowflakes?.destroy();\n this.snowflakes = undefined;\n this.startSnowing();\n }\n }\n\n // Consider lazy loading external templates if they are large,\n // below the fold or not needed immediately. This will reduce the initial\n // bundle size.\n //\n // Note: In this case, ia-button is visible immediately so it's not a great\n // example, but it demonstrates the lazy loading pattern.\n private get startButtonTemplate(): LazyLoadedTemplate {\n return lazyLoadTemplate(\n async () => {\n await import('@src/elements/ia-button/ia-button');\n },\n () => html`\n <ia-button\n @click=${() => {\n if (this.snowing) {\n this.stopSnowing();\n } else {\n this.startSnowing();\n }\n }}\n >\n ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}\n </ia-button>\n `,\n );\n }\n\n private get clearButtonTemplate(): LazyLoadedTemplate {\n return lazyLoadTemplate(\n async () => {\n await import('@src/elements/ia-button/ia-button');\n },\n () => html`\n <ia-button\n @click=${() => {\n this.snowflakes?.destroy();\n }}\n >\n Clear Snowflakes\n </ia-button>\n `,\n );\n }\n\n private async startSnowing() {\n if (!this.snowflakes) {\n // lazy load dependencies when possible to reduce initial bundle size\n const SnowflakesModule = await import('magic-snowflakes');\n const Snowflakes = SnowflakesModule.default;\n this.snowflakes = new Snowflakes(this.snowConfig);\n }\n this.snowflakes?.start();\n this.snowing = true;\n }\n\n private stopSnowing() {\n this.snowflakes?.stop();\n this.snowing = false;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n img {\n width: 16px;\n filter: invert(1);\n vertical-align: middle;\n }\n `;\n }\n}\n"]}
1	+ {"version":3,"file":"ia-snow.js","sourceRoot":"","sources":["../../../../src/labs/ia-snow/ia-snow.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n css,\n html,\n LitElement,\n type CSSResultGroup,\n type PropertyValues,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { state } from 'lit/decorators/state.js';\n\nimport type Snowflakes from 'magic-snowflakes';\nimport type { SnowflakesParams } from 'magic-snowflakes';\n\nimport flakeIcon from './flake.svg';\nimport {\n lazyLoadTemplate,\n type LazyLoadedTemplate,\n} from '@src/util/lazy-load-template';\n\n/*\n An element that shows snowflakes to demo the elements library\n */\n@customElement('ia-snow')\nexport class IASnow extends LitElement {\n @property({ type: Object }) snowConfig?: SnowflakesParams;\n\n @state()\n private snowing = false;\n\n private snowflakes?: Snowflakes;\n\n render() {\n return html`\n ${this.startButtonTemplate} ${this.clearButtonTemplate}\n <img src=${flakeIcon} alt=\"Snowflakes icon\" />\n `;\n }\n\n protected willUpdate(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('snowConfig')) {\n this.snowflakes?.destroy();\n this.snowflakes = undefined;\n this.startSnowing();\n }\n }\n\n // Consider lazy loading external templates if they are large,\n // below the fold or not needed immediately. This will reduce the initial\n // bundle size.\n //\n // Note: In this case, ia-button is visible immediately so it's not a great\n // example, but it demonstrates the lazy loading pattern.\n private get startButtonTemplate(): LazyLoadedTemplate {\n return lazyLoadTemplate(\n async () => {\n await import('@src/elements/ia-button/ia-button');\n },\n () => html`\n <ia-button\n @click=${() => {\n if (this.snowing) {\n this.stopSnowing();\n } else {\n this.startSnowing();\n }\n }}\n >\n ${this.snowing ? 'Stop Snowflakes' : 'Start Snowflakes'}\n </ia-button>\n `,\n );\n }\n\n private get clearButtonTemplate(): LazyLoadedTemplate {\n return lazyLoadTemplate(\n async () => {\n await import('@src/elements/ia-button/ia-button');\n },\n () => html`\n <ia-button\n @click=${() => {\n this.snowflakes?.destroy();\n }}\n >\n Clear Snowflakes\n </ia-button>\n `,\n );\n }\n\n private async startSnowing() {\n if (!this.snowflakes) {\n // lazy load dependencies when possible to reduce initial bundle size\n const SnowflakesModule = await import('magic-snowflakes');\n const Snowflakes = SnowflakesModule.default;\n this.snowflakes = new Snowflakes(this.snowConfig);\n }\n this.snowflakes?.start();\n this.snowing = true;\n }\n\n private stopSnowing() {\n this.snowflakes?.stop();\n this.snowing = false;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n img {\n width: 16px;\n filter: invert(1);\n vertical-align: middle;\n }\n `;\n }\n}\n"]}

package/dist/src/util/custom-element.d.ts ADDED Viewed

@@ -0,0 +1,39 @@
+/**
+ * Allow for custom element classes with private constructors.
+ */
+type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
+/**
+ * Class decorator factory that registers the decorated class as a custom
+ * element, unless something has already claimed the tag name.
+ *
+ * Each element subpath is served to non-bundler consumers as a self-contained
+ * bundle, so a component several elements share, such as
+ * `ia-status-indicator`, is built into every entry point that imports it. A
+ * page pulling in two of those subpaths therefore evaluates two copies of the
+ * shared component and registers the same tag twice. `customElements.define`
+ * throws on the second attempt, and because that happens while the module is
+ * still evaluating it takes down the rest of the bundle with it, so the
+ * element the page actually asked for never registers.
+ *
+ * Skipping a duplicate keeps the first copy registered and lets the rest of
+ * the module finish. The copies are interchangeable: they are built from the
+ * same source, and nothing narrows a shared element by class identity.
+ *
+ * A skip is also how a page ends up on an element it did not mean to use:
+ * load two versions of the package together, or let a host page claim one of
+ * these tag names, and whichever registered first is what the page gets,
+ * which looks like the expected element's behaviour going missing. Nothing
+ * here can tell that apart from a matched-version duplicate, since two builds
+ * of the same element differ in nothing observable at this point, so a skip
+ * warns and leaves the reader to tell the cases apart.
+ *
+ * ```ts
+ * @customElement('ia-example')
+ * class IAExample extends LitElement {}
+ * ```
+ *
+ * @param tagName The tag name to register the element under.
+ */
+export declare function customElement(tagName: string): (classOrTarget: CustomElementClass, context?: ClassDecoratorContext<new () => HTMLElement>) => void;
+export {};
+//# sourceMappingURL=custom-element.d.ts.map

package/dist/src/util/custom-element.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"custom-element.d.ts","sourceRoot":"","sources":["../../../src/util/custom-element.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,KAAK,kBAAkB,GAAG,IAAI,CAAC,OAAO,WAAW,EAAE,KAAK,CAAC,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,IAEzC,eAAe,kBAAkB,EACjC,UAAU,qBAAqB,CAAC,UAAU,WAAW,CAAC,KACrD,IAAI,CAgBR"}

package/dist/src/util/custom-element.js ADDED Viewed

@@ -0,0 +1,50 @@
+/**
+ * Class decorator factory that registers the decorated class as a custom
+ * element, unless something has already claimed the tag name.
+ *
+ * Each element subpath is served to non-bundler consumers as a self-contained
+ * bundle, so a component several elements share, such as
+ * `ia-status-indicator`, is built into every entry point that imports it. A
+ * page pulling in two of those subpaths therefore evaluates two copies of the
+ * shared component and registers the same tag twice. `customElements.define`
+ * throws on the second attempt, and because that happens while the module is
+ * still evaluating it takes down the rest of the bundle with it, so the
+ * element the page actually asked for never registers.
+ *
+ * Skipping a duplicate keeps the first copy registered and lets the rest of
+ * the module finish. The copies are interchangeable: they are built from the
+ * same source, and nothing narrows a shared element by class identity.
+ *
+ * A skip is also how a page ends up on an element it did not mean to use:
+ * load two versions of the package together, or let a host page claim one of
+ * these tag names, and whichever registered first is what the page gets,
+ * which looks like the expected element's behaviour going missing. Nothing
+ * here can tell that apart from a matched-version duplicate, since two builds
+ * of the same element differ in nothing observable at this point, so a skip
+ * warns and leaves the reader to tell the cases apart.
+ *
+ * ```ts
+ * @customElement('ia-example')
+ * class IAExample extends LitElement {}
+ * ```
+ *
+ * @param tagName The tag name to register the element under.
+ */
+export function customElement(tagName) {
+    return (classOrTarget, context) => {
+        const define = () => {
+            if (customElements.get(tagName)) {
+                console.warn(`[elements] <${tagName}> is already registered, so this definition was skipped and whatever registered first stays in use. Harmless when a page loads two element subpaths that share a component. Otherwise look for a second copy of the package, or an unrelated element using the same name.`);
+                return;
+            }
+            customElements.define(tagName, classOrTarget);
+        };
+        // Standard decorators defer registration to an initializer; the legacy
+        // decorators this project compiles with hand over the class directly.
+        if (context)
+            context.addInitializer(define);
+        else
+            define();
+    };
+}
+//# sourceMappingURL=custom-element.js.map

package/dist/src/util/custom-element.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"custom-element.js","sourceRoot":"","sources":["../../../src/util/custom-element.ts"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,aAAa,CAAC,OAAe;IAC3C,OAAO,CACL,aAAiC,EACjC,OAAsD,EAChD,EAAE;QACR,MAAM,MAAM,GAAG,GAAS,EAAE;YACxB,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;gBAChC,OAAO,CAAC,IAAI,CACV,eAAe,OAAO,2QAA2Q,CAClS,CAAC;gBACF,OAAO;YACT,CAAC;YACD,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,aAAyC,CAAC,CAAC;QAC5E,CAAC,CAAC;QAEF,uEAAuE;QACvE,sEAAsE;QACtE,IAAI,OAAO;YAAE,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;;YACvC,MAAM,EAAE,CAAC;IAChB,CAAC,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Allow for custom element classes with private constructors.\n */\ntype CustomElementClass = Omit<typeof HTMLElement, 'new'>;\n\n/**\n * Class decorator factory that registers the decorated class as a custom\n * element, unless something has already claimed the tag name.\n *\n * Each element subpath is served to non-bundler consumers as a self-contained\n * bundle, so a component several elements share, such as\n * `ia-status-indicator`, is built into every entry point that imports it. A\n * page pulling in two of those subpaths therefore evaluates two copies of the\n * shared component and registers the same tag twice. `customElements.define`\n * throws on the second attempt, and because that happens while the module is\n * still evaluating it takes down the rest of the bundle with it, so the\n * element the page actually asked for never registers.\n *\n * Skipping a duplicate keeps the first copy registered and lets the rest of\n * the module finish. The copies are interchangeable: they are built from the\n * same source, and nothing narrows a shared element by class identity.\n *\n * A skip is also how a page ends up on an element it did not mean to use:\n * load two versions of the package together, or let a host page claim one of\n * these tag names, and whichever registered first is what the page gets,\n * which looks like the expected element's behaviour going missing. Nothing\n * here can tell that apart from a matched-version duplicate, since two builds\n * of the same element differ in nothing observable at this point, so a skip\n * warns and leaves the reader to tell the cases apart.\n *\n * ```ts\n * @customElement('ia-example')\n * class IAExample extends LitElement {}\n * ```\n *\n * @param tagName The tag name to register the element under.\n */\nexport function customElement(tagName: string) {\n return (\n classOrTarget: CustomElementClass,\n context?: ClassDecoratorContext<new () => HTMLElement>,\n ): void => {\n const define = (): void => {\n if (customElements.get(tagName)) {\n console.warn(\n `[elements] <${tagName}> is already registered, so this definition was skipped and whatever registered first stays in use. Harmless when a page loads two element subpaths that share a component. Otherwise look for a second copy of the package, or an unrelated element using the same name.`,\n );\n return;\n }\n customElements.define(tagName, classOrTarget as CustomElementConstructor);\n };\n\n // Standard decorators defer registration to an initializer; the legacy\n // decorators this project compiles with hand over the class directly.\n if (context) context.addInitializer(define);\n else define();\n };\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/elements",
-  "version": "0.4.0",
+  "version": "0.4.2-webdev-9107.0",
   "description": "A web component library from the Internet Archive.",
   "license": "AGPL-3.0-only",
   "types": "./dist/src/elements/index.d.ts",
@@ -25,6 +25,7 @@
     "build": "wireit",
     "clean": "wireit",
     "lint": "wireit",
+    "typecheck": "wireit",
     "format": "wireit",
     "circular": "wireit",
     "prepare": "wireit",
@@ -32,9 +33,13 @@
     "ghpages:build": "wireit"
   },
   "dependencies": {
+    "@internetarchive/fetch-handler": "^1.4.0",
     "@internetarchive/ia-clearable-text-input": "^1.1.1",
     "@internetarchive/ia-dropdown": "^2.2.0",
+    "@internetarchive/metadata-service": "^1.0.4",
+    "@internetarchive/recaptcha-manager": "^1.0.0",
     "@lit/localize": "^0.12.2",
+    "dompurify": "^3.2.5",
     "lit": "^2.8.0 || ^3.3.2",
     "magic-snowflakes": "^7.0.2",
     "tslib": "^2.8.1"
@@ -43,11 +48,13 @@
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^9.39.1",
     "@open-wc/testing-helpers": "^3.0.1",
+    "@types/grecaptcha": "^3.0.9",
     "@typescript-eslint/eslint-plugin": "^8.46.4",
     "@typescript-eslint/parser": "^8.46.4",
     "@vitest/browser": "^4.0.8",
     "@vitest/browser-playwright": "^4.0.8",
     "@vitest/coverage-v8": "^4.0.8",
+    "axe-core": "^4.10.2",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-html": "^8.1.3",
@@ -115,6 +122,15 @@
         "build"
       ]
     },
+    "typecheck": {
+      "command": "tsc --noEmit",
+      "files": [
+        "src/**/*.ts",
+        "demo/**/*.ts",
+        "tsconfig.json"
+      ],
+      "output": []
+    },
     "test": {
       "command": "vitest",
       "dependencies": [