@internetarchive/elements 1.1.3-webdev-9240.0 → 1.1.3

package/README.md

@@ -141,7 +141,7 @@ src
     - ia-foobar.test.ts // the element's tests
     - ia-foobar-story.ts // an element that demos your element
 ```
-Export your component in `src/index.ts`
+Consumers import each element by its own subpath (`@internetarchive/elements/ia-button/ia-button`). There's no package root export, so there's no barrel file to update.
 
 ### Naming
 Custom elements all share one global registry, and that registry is shared with every other script on the host page. Give each element a name specific enough that nothing else would plausibly want it.

package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, LitElement, TemplateResult } from 'lit';
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
 export type LoadingStatus = 'ready' | 'loading' | 'success' | 'error';
 /**
  * The mediatype glyphs this element ships. These are *icon* names, which do not
@@ -23,7 +23,22 @@ export declare class IAStatusIndicator extends LitElement {
     mediatype?: MediaTypeIcon;
     hideDots: boolean;
     private hasSlottedIcon;
+    private _outgoingModes;
+    private _canAnimate;
+    private _fadeTimers;
     render(): TemplateResult;
+    /**
+     * One mode's artwork, stacked in the same cell as the other layers so that
+     * a mode change fades between them. At rest only the active layer has
+     * content; an outgoing one is emptied as soon as its fade is over, so the
+     * shadow tree holds a single mode's markup and a single `<title>`.
+     */
+    private layerTemplate;
+    private modeTemplate;
+    willUpdate(changedProps: PropertyValues): void;
+    private stopFadingOut;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
     /**
      * The `ready` state: reserves the indicator's space without drawing, so a
      * consumer's layout doesn't shift once the indicator appears.

package/dist/src/elements/ia-status-indicator/ia-status-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ia-status-indicator.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EAEd,UAAU,EAIV,cAAc,EACf,MAAM,KAAK,CAAC;AAoBb,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GACrB,OAAO,GACP,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,OAAO,GACP,IAAI,GACJ,OAAO,GACP,KAAK,CAAC;AAeV;;;;;;;;GAQG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAEnB,YAAY,SAAqB;IAGjC,YAAY,SAAkB;IAG9B,UAAU,SAAgB;IAG1B,IAAI,EAAE,aAAa,CAAa;IAGhC,SAAS,CAAC,EAAE,aAAa,CAAC;IAGzB,QAAQ,UAAS;IAGrC,OAAO,CAAC,cAAc,CAAS;IAExC,MAAM,IAAI,cAAc;IASxB;;;OAGG;IACH,OAAO,KAAK,mBAAmB,GAE9B;IAED;;;;;OAKG;IACH,OAAO,KAAK,gBAAgB,GAG3B;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAExB;IAED;;;;;;OAMG;IACH,OAAO,KAAK,wBAAwB,GAYnC;IAED,oEAAoE;IACpE,OAAO,KAAK,aAAa,GA4BxB;IAED,8DAA8D;IAC9D,OAAO,KAAK,WAAW,GAoBtB;IAED;;;OAGG;IACH,OAAO,KAAK,qBAAqB,GAKhC;IAED,OAAO,CAAC,oBAAoB;IAK5B,wCAAwC;IACxC,OAAO,KAAK,wBAAwB,GAyBnC;IAED,gCAAgC;IAChC,OAAO,KAAK,sBAAsB,GAkBjC;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CA4HlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"ia-status-indicator.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,cAAc,EAEd,UAAU,EAEV,cAAc,EAGd,cAAc,EACf,MAAM,KAAK,CAAC;AAyBb,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GACrB,OAAO,GACP,YAAY,GACZ,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,UAAU,GACV,OAAO,GACP,IAAI,GACJ,OAAO,GACP,KAAK,CAAC;AAeV;;;;;;;;GAQG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAEnB,YAAY,SAAqB;IAGjC,YAAY,SAAkB;IAG9B,UAAU,SAAgB;IAG1B,IAAI,EAAE,aAAa,CAAa;IAGhC,SAAS,CAAC,EAAE,aAAa,CAAC;IAGzB,QAAQ,UAAS;IAGrC,OAAO,CAAC,cAAc,CAAS;IAG/B,OAAO,CAAC,cAAc,CAAyC;IAG/D,OAAO,CAAC,WAAW,CAAS;IAGrC,OAAO,CAAC,WAAW,CAA2D;IAE9E,MAAM,IAAI,cAAc;IAYxB;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,YAAY;IAapB,UAAU,CAAC,YAAY,EAAE,cAAc,GAAG,IAAI;IAmB9C,OAAO,CAAC,aAAa;IAUrB,YAAY,IAAI,IAAI;IAYpB,oBAAoB,IAAI,IAAI;IAS5B;;;OAGG;IACH,OAAO,KAAK,mBAAmB,GAE9B;IAED;;;;;OAKG;IACH,OAAO,KAAK,gBAAgB,GAG3B;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAExB;IAED;;;;;;OAMG;IACH,OAAO,KAAK,wBAAwB,GAYnC;IAED,oEAAoE;IACpE,OAAO,KAAK,aAAa,GA4BxB;IAED,8DAA8D;IAC9D,OAAO,KAAK,WAAW,GAoBtB;IAED;;;OAGG;IACH,OAAO,KAAK,qBAAqB,GAKhC;IAED,OAAO,CAAC,oBAAoB;IAK5B,wCAAwC;IACxC,OAAO,KAAK,wBAAwB,GAyBnC;IAED,gCAAgC;IAChC,OAAO,KAAK,sBAAsB,GAkBjC;IAED,MAAM,KAAK,MAAM,IAAI,cAAc,CAgKlC;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/src/elements/ia-status-indicator/ia-status-indicator.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, svg, } from 'lit';
+import { css, unsafeCSS, html, LitElement, nothing, svg, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { customElement } from '../../util/custom-element.js';
 import { msg } from '@lit/localize';
-import { choose } from 'lit/directives/choose.js';
 import themeStyles from '../../themes/theme-styles.js';
 import { maskedIcon } from '../../util/masked-icon.js';
 import audioIcon from './icons/audio.svg';
@@ -16,6 +15,10 @@ import textsIcon from './icons/texts.svg';
 import tvIcon from './icons/tv.svg';
 import videoIcon from './icons/video.svg';
 import webIcon from './icons/web.svg';
+/** How long a mode change takes to fade. Drives both the CSS and the timer. */
+const FADE_DURATION_MS = 250;
+/** One layer per mode, always rendered in this order. See render(). */
+const LAYER_ORDER = ['ready', 'loading', 'success', 'error'];
 const MEDIATYPE_ICONS = {
     audio: audioIcon,
     collection: collectionIcon,
@@ -52,14 +55,97 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
         this.hideDots = false;
         /* Whether a consumer has slotted their own center icon */
         this.hasSlottedIcon = false;
+        /* The modes still fading out after a change. More than one when changes overlap. */
+        this._outgoingModes = new Set();
+        /* Set once the first render is done, so the element doesn't fade in on mount */
+        this._canAnimate = false;
+        /* One per outgoing mode, clearing it once its own fade is over */
+        this._fadeTimers = new Map();
     }
     render() {
-        return html `${choose(this.mode, [
-            ['ready', () => this.placeholderTemplate],
-            ['loading', () => this.loadingIndicatorTemplate],
-            ['success', () => this.successIndicatorTemplate],
-            ['error', () => this.errorIndicatorTemplate],
-        ])}`;
+        // Every mode has its own layer element that never moves, whatever order
+        // the changes come in. Moving an element cancels the transition it's in
+        // the middle of, so a layer partway through a fade would snap to its end
+        // value. A layer only has content while it's on screen.
+        return html `
+      <div class="layers ${this._canAnimate ? 'animate' : ''}">
+        ${LAYER_ORDER.map((mode) => this.layerTemplate(mode))}
+      </div>
+    `;
+    }
+    /**
+     * One mode's artwork, stacked in the same cell as the other layers so that
+     * a mode change fades between them. At rest only the active layer has
+     * content; an outgoing one is emptied as soon as its fade is over, so the
+     * shadow tree holds a single mode's markup and a single `<title>`.
+     */
+    layerTemplate(mode) {
+        // `mode` is a public string attribute, so a consumer can hand us anything.
+        // An unrecognised one matches no layer and draws nothing.
+        const isActive = mode === this.mode;
+        const isOutgoing = !isActive && this._outgoingModes.has(mode);
+        const state = isActive ? 'active' : isOutgoing ? 'outgoing' : '';
+        return html `<div
+      class="layer ${state}"
+      aria-hidden=${isActive ? nothing : 'true'}
+    >
+      ${isActive || isOutgoing ? this.modeTemplate(mode) : nothing}
+    </div>`;
+    }
+    modeTemplate(mode) {
+        switch (mode) {
+            case 'ready':
+                return this.placeholderTemplate;
+            case 'loading':
+                return this.loadingIndicatorTemplate;
+            case 'success':
+                return this.successIndicatorTemplate;
+            case 'error':
+                return this.errorIndicatorTemplate;
+        }
+    }
+    willUpdate(changedProps) {
+        if (!changedProps.has('mode'))
+            return;
+        // Hold on to the mode we're leaving so both can be on screen together for
+        // the length of the fade.
+        const previous = changedProps.get('mode');
+        if (previous === undefined || previous === this.mode)
+            return;
+        // The mode coming back in may still be fading out from an earlier change.
+        // Its layer just turns around, so it's no longer outgoing.
+        this.stopFadingOut(this.mode);
+        this._outgoingModes = new Set(this._outgoingModes).add(previous);
+        clearTimeout(this._fadeTimers.get(previous));
+        this._fadeTimers.set(previous, setTimeout(() => this.stopFadingOut(previous), FADE_DURATION_MS));
+    }
+    stopFadingOut(mode) {
+        clearTimeout(this._fadeTimers.get(mode));
+        this._fadeTimers.delete(mode);
+        if (!this._outgoingModes.has(mode))
+            return;
+        const outgoing = new Set(this._outgoingModes);
+        outgoing.delete(mode);
+        this._outgoingModes = outgoing;
+    }
+    firstUpdated() {
+        // Fading applies to mode changes, not to the element appearing. Waiting a
+        // frame is what makes that true: enabling it inline would put the
+        // transition in the element's very first computed style, and it would
+        // fade up from nothing on mount.
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                this._canAnimate = true;
+            });
+        });
+    }
+    disconnectedCallback() {
+        this._fadeTimers.forEach((timer) => clearTimeout(timer));
+        this._fadeTimers.clear();
+        // Nothing reschedules these timers, so leaving the modes set would strand
+        // the outgoing layers on reconnect.
+        this._outgoingModes = new Set();
+        super.disconnectedCallback();
     }
     /**
      * The `ready` state: reserves the indicator's space without drawing, so a
@@ -238,6 +324,36 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
           width: var(--indicator-width--);
         }
 
+        /* Every mode occupies the same cell, so the element keeps one size */
+        .layers {
+          display: grid;
+        }
+
+        .layer {
+          grid-area: 1 / 1;
+          opacity: 0;
+        }
+
+        .animate .layer {
+          transition: opacity ${unsafeCSS(FADE_DURATION_MS)}ms ease-out;
+        }
+
+        .layer.active {
+          opacity: 1;
+        }
+
+        /* A ring on its way out would otherwise keep animating unseen */
+        .layer.outgoing .loading-ring,
+        .layer.outgoing .loading-dots > * {
+          animation-play-state: paused;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .animate .layer {
+            transition: none;
+          }
+        }
+
         .placeholder {
           height: var(--indicator-width--);
         }
@@ -276,6 +392,12 @@ let IAStatusIndicator = class IAStatusIndicator extends LitElement {
           background-color: var(--loading-icon-color--);
         }
 
+        /* Block, so the svg isn't padded out by the line box it would sit in */
+        .success-indicator,
+        .error-indicator {
+          display: block;
+        }
+
         .success-icon {
           fill: var(--success-icon-color--);
         }
@@ -363,6 +485,12 @@ __decorate([
 __decorate([
     state()
 ], IAStatusIndicator.prototype, "hasSlottedIcon", void 0);
+__decorate([
+    state()
+], IAStatusIndicator.prototype, "_outgoingModes", void 0);
+__decorate([
+    state()
+], IAStatusIndicator.prototype, "_canAnimate", void 0);
 IAStatusIndicator = __decorate([
     customElement('ia-status-indicator')
 ], IAStatusIndicator);

package/dist/src/elements/ia-status-indicator/ia-status-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ia-status-indicator.js","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,EACV,OAAO,EACP,GAAG,GAGJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,OAAO,MAAM,iBAAiB,CAAC;AAqBtC,MAAM,eAAe,GAAkC;IACrD,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,cAAc;IAC1B,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,UAAU;IAClB,QAAQ,EAAE,YAAY;IACtB,KAAK,EAAE,SAAS;IAChB,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,OAAO;CACb,CAAC;AAEF;;;;;;;;GAQG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QACL,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC;QAE7D,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1D,qGAAqG;QACzE,eAAU,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;QAEtD,qDAAqD;QACzB,SAAI,GAAkB,SAAS,CAAC;QAK5D,6FAA6F;QAChE,aAAQ,GAAG,KAAK,CAAC;QAE9C,0DAA0D;QACzC,mBAAc,GAAG,KAAK,CAAC;IA4S1C,CAAC;IA1SC,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE;YAC9B,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC;YACzC,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC;YAChD,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC;YAChD,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC;SAC7C,CAAC,EAAE,CAAC;IACP,CAAC;IAED;;;OAGG;IACH,IAAY,mBAAmB;QAC7B,OAAO,IAAI,CAAA,iCAAiC,CAAC;IAC/C,CAAC;IAED;;;;;OAKG;IACH,IAAY,gBAAgB;QAC1B,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,SAAS,CAAC;QACtC,OAAO,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC;IAED,6EAA6E;IAC7E,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;IACxD,CAAC;IAED;;;;;;OAMG;IACH,IAAY,wBAAwB;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACzC,OAAO,IAAI,CAAA;;UAEL,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa;uCACxB,CAAC,aAAa;0CACX,IAAI,CAAC,oBAAoB;cACrD,IAAI,CAAC,qBAAqB;;;;KAInC,CAAC;IACJ,CAAC;IAED,oEAAoE;IACpE,IAAY,aAAa;QACvB,OAAO,GAAG,CAAA;;;;;;;;;;iBAUG,IAAI,CAAC,YAAY;;;;;;;kCAOA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;;;;KAS1D,CAAC;IACJ,CAAC;IAED,8DAA8D;IAC9D,IAAY,WAAW;QACrB,OAAO,GAAG,CAAA;;;;;;;;;iBASG,IAAI,CAAC,YAAY;;;;;;;;;KAS7B,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,IAAY,qBAAqB;QAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAClC,IAAI,CAAC,GAAG;YAAE,OAAO,OAAO,CAAC;QAEzB,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC;IAEO,oBAAoB,CAAC,CAAQ;QACnC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC1E,CAAC;IAED,wCAAwC;IACxC,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,YAAY;;;;;;;;;;;;;KAa7B,CAAC;IACJ,CAAC;IAED,gCAAgC;IAChC,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,UAAU;;;;;;KAM3B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAuHF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AA9T6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAkC;AAGjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA+B;AAG9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA2B;AAG1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAiC;AAGhC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA2B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAkB;AAG7B;IAAhB,KAAK,EAAE;yDAAgC;AApB7B,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAgU7B","sourcesContent":["import {\n  css,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  svg,\n  SVGTemplateResult,\n  TemplateResult,\n} from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg } from '@lit/localize';\nimport { choose } from 'lit/directives/choose.js';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport { maskedIcon } from '@src/util/masked-icon';\n\nimport audioIcon from './icons/audio.svg';\nimport collectionIcon from './icons/collection.svg';\nimport etreeIcon from './icons/etree.svg';\nimport imagesIcon from './icons/images.svg';\nimport searchIcon from './icons/search.svg';\nimport softwareIcon from './icons/software.svg';\nimport textsIcon from './icons/texts.svg';\nimport tvIcon from './icons/tv.svg';\nimport videoIcon from './icons/video.svg';\nimport webIcon from './icons/web.svg';\n\nexport type LoadingStatus = 'ready' | 'loading' | 'success' | 'error';\n\n/**\n * The mediatype glyphs this element ships. These are *icon* names, which do not\n * map one-to-one onto archive.org mediatype values — a consumer holding a\n * `MediaType` translates at its own call site (e.g. `movies` -> `video`).\n */\nexport type MediaTypeIcon =\n  | 'audio'\n  | 'collection'\n  | 'etree'\n  | 'images'\n  | 'search'\n  | 'software'\n  | 'texts'\n  | 'tv'\n  | 'video'\n  | 'web';\n\nconst MEDIATYPE_ICONS: Record<MediaTypeIcon, string> = {\n  audio: audioIcon,\n  collection: collectionIcon,\n  etree: etreeIcon,\n  images: imagesIcon,\n  search: searchIcon,\n  software: softwareIcon,\n  texts: textsIcon,\n  tv: tvIcon,\n  video: videoIcon,\n  web: webIcon,\n};\n\n/**\n * Renders an SVG indicator, which defaults to an animated circular indicator.\n *\n * In `loading` mode the middle of the ring resolves in this order:\n *   1. slotted `icon` content\n *   2. the `mediatype` glyph\n *   3. nothing, when `hideDots` is set\n *   4. three animated dots (the default)\n */\n@customElement('ia-status-indicator')\nexport class IAStatusIndicator extends LitElement {\n  /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) loadingTitle = msg('Loading...');\n\n  /* An optional title to use for the success state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) successTitle = msg('Success');\n\n  /* An optional title to use for the error state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) errorTitle = msg('Error');\n\n  /* The state of the indicator that should be shown */\n  @property({ type: String }) mode: LoadingStatus = 'loading';\n\n  /* An optional mediatype glyph to render in the middle of the loading ring */\n  @property({ type: String }) mediatype?: MediaTypeIcon;\n\n  /* Renders a bare ring, with no dots in the middle. Ignored when a center icon is present. */\n  @property({ type: Boolean }) hideDots = false;\n\n  /* Whether a consumer has slotted their own center icon */\n  @state() private hasSlottedIcon = false;\n\n  render(): TemplateResult {\n    return html`${choose(this.mode, [\n      ['ready', () => this.placeholderTemplate],\n      ['loading', () => this.loadingIndicatorTemplate],\n      ['success', () => this.successIndicatorTemplate],\n      ['error', () => this.errorIndicatorTemplate],\n    ])}`;\n  }\n\n  /**\n   * The `ready` state: reserves the indicator's space without drawing, so a\n   * consumer's layout doesn't shift once the indicator appears.\n   */\n  private get placeholderTemplate(): TemplateResult {\n    return html`<div class=\"placeholder\"></div>`;\n  }\n\n  /**\n   * The asset URL for the current mediatype, if it maps to a glyph we ship.\n   *\n   * Unmapped values (e.g. archive.org's `account` or `data`) resolve to\n   * undefined and degrade to the default dots rather than a broken mask.\n   */\n  private get mediatypeIconUrl(): string | undefined {\n    if (!this.mediatype) return undefined;\n    return MEDIATYPE_ICONS[this.mediatype];\n  }\n\n  /** Whether the middle of the ring is occupied by a glyph rather than dots */\n  private get hasCenterIcon(): boolean {\n    return this.hasSlottedIcon || !!this.mediatypeIconUrl;\n  }\n\n  /**\n   * A circular loading indicator to render when processing.\n   *\n   * Two ring geometries are kept deliberately: the original 120x120 ring is\n   * tuned for the dots, and the roomier 100x100 ring leaves space for a center\n   * glyph. Keeping both means existing consumers see no visual change.\n   */\n  private get loadingIndicatorTemplate(): TemplateResult {\n    const hasCenterIcon = this.hasCenterIcon;\n    return html`\n      <div class=\"indicator\">\n        ${hasCenterIcon ? this.iconRingSvg : this.dottedRingSvg}\n        <span class=\"center\" ?hidden=${!hasCenterIcon}>\n          <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}>\n            ${this.mediatypeIconTemplate}\n          </slot>\n        </span>\n      </div>\n    `;\n  }\n\n  /** The original ring, with the three animated dots in the middle */\n  private get dottedRingSvg(): SVGTemplateResult {\n    return svg`\n      <svg\n        class=\"loading-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.loadingTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"loading-ring\"\n            d=\"M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <g\n            class=\"loading-dots ${this.hideDots ? 'hidden' : ''}\"\n            transform=\"translate(40.000000, 55.000000)\"\n          >\n            <circle id=\"left-dot\" cx=\"5\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"middle-dot\" cx=\"20\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"right-dot\" cx=\"35\" cy=\"5\" r=\"5\"></circle>\n          </g>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** The roomier ring, used when a glyph occupies the middle */\n  private get iconRingSvg(): SVGTemplateResult {\n    return svg`\n      <svg\n        class=\"loading-indicator icon-ring\"\n        viewBox=\"0 0 100 100\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.loadingTitle}</title>\n        <g fill-rule=\"evenodd\">\n          <path\n            class=\"loading-ring\"\n            fill-rule=\"nonzero\"\n            d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n          ></path>\n        </g>\n      </svg>\n    `;\n  }\n\n  /**\n   * The bundled mediatype glyph. `maskedIcon` supplies the mask geometry and\n   * the decorative `aria-hidden`; this component supplies the size and paint.\n   */\n  private get mediatypeIconTemplate(): TemplateResult | typeof nothing {\n    const url = this.mediatypeIconUrl;\n    if (!url) return nothing;\n\n    return maskedIcon(url);\n  }\n\n  private handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasSlottedIcon = slot.assignedNodes({ flatten: false }).length > 0;\n  }\n\n  /** A check mark to render on success */\n  private get successIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"success-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.successTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"success-icon\"\n            d=\"M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <polygon\n            class=\"success-icon\"\n            transform=\"translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) \"\n            points=\"96 85 54 85 54 65 76 64.999 76 -2 96 -2\"\n          ></polygon>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** An \"!\" to render on error */\n  private get errorIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"error-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.errorTitle}</title>\n        <path\n          class=\"error-icon\"\n          d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z\"\n        />\n      </svg>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --indicator-width--: var(--icon-width);\n\n          /* Loading */\n          --loading-ring-color--: var(--primary-text-color);\n          --loading-dot-color--: var(--primary-text-color);\n          --loading-icon-color--: var(--primary-text-color);\n\n          /* Success */\n          --success-icon-color--: var(--color-success);\n\n          /* Error */\n          --error-icon-color--: var(--color-danger);\n\n          display: inline-block;\n          width: var(--indicator-width--);\n        }\n\n        .placeholder {\n          height: var(--indicator-width--);\n        }\n\n        /* Stacks the center glyph over the ring */\n        .indicator {\n          position: relative;\n          display: block;\n        }\n\n        .indicator svg {\n          display: block;\n          width: 100%;\n          height: auto;\n        }\n\n        .center {\n          position: absolute;\n          inset: 0;\n          display: grid;\n          place-items: center;\n        }\n\n        .center[hidden] {\n          display: none;\n        }\n\n        /*\n         * Sized to fit within the icon ring's inner diameter. maskedIcon sets\n         * the mask itself; background-color is what paints the glyph, so it\n         * recolors with the ring.\n         */\n        .ia-icon {\n          width: 50%;\n          height: 50%;\n          background-color: var(--loading-icon-color--);\n        }\n\n        .success-icon {\n          fill: var(--success-icon-color--);\n        }\n\n        .error-icon {\n          fill: var(--error-icon-color--);\n        }\n\n        .loading-ring {\n          fill: var(--loading-ring-color--);\n          animation: rotate 1.3s infinite linear;\n          transform-origin: 50px 50px;\n          transform-box: fill-box;\n        }\n\n        .loading-dots {\n          fill: var(--loading-dot-color--);\n          transition: opacity 0.25s ease-out;\n        }\n\n        .loading-dots.hidden {\n          display: none;\n        }\n\n        .loading-dots > * {\n          opacity: 0;\n          animation: dot 1.3s infinite;\n        }\n\n        .loading-dots #left-dot {\n          animation-delay: 0.2s;\n        }\n\n        .loading-dots #middle-dot {\n          animation-delay: 0.4s;\n        }\n\n        .loading-dots #right-dot {\n          animation-delay: 0.6s;\n        }\n\n        @keyframes rotate {\n          0% {\n            transform: rotate(-360deg);\n          }\n          100% {\n            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */\n            transform: rotate(0deg);\n          }\n        }\n\n        @keyframes dot {\n          0% {\n            opacity: 0;\n          }\n          25% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ia-status-indicator': IAStatusIndicator;\n  }\n}\n"]}
+{"version":3,"file":"ia-status-indicator.js","sourceRoot":"","sources":["../../../../src/elements/ia-status-indicator/ia-status-indicator.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EACH,SAAS,EAET,IAAI,EACJ,UAAU,EACV,OAAO,EAEP,GAAG,GAGJ,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,cAAc,MAAM,wBAAwB,CAAC;AACpD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,YAAY,MAAM,sBAAsB,CAAC;AAChD,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,MAAM,MAAM,gBAAgB,CAAC;AACpC,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,OAAO,MAAM,iBAAiB,CAAC;AAEtC,+EAA+E;AAC/E,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B,uEAAuE;AACvE,MAAM,WAAW,GAAoB,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;AAqB9E,MAAM,eAAe,GAAkC;IACrD,KAAK,EAAE,SAAS;IAChB,UAAU,EAAE,cAAc;IAC1B,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE,UAAU;IAClB,QAAQ,EAAE,YAAY;IACtB,KAAK,EAAE,SAAS;IAChB,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,SAAS;IAChB,GAAG,EAAE,OAAO;CACb,CAAC;AAEF;;;;;;;;GAQG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QACL,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,YAAY,CAAC,CAAC;QAE7D,uGAAuG;QAC3E,iBAAY,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;QAE1D,qGAAqG;QACzE,eAAU,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;QAEtD,qDAAqD;QACzB,SAAI,GAAkB,SAAS,CAAC;QAK5D,6FAA6F;QAChE,aAAQ,GAAG,KAAK,CAAC;QAE9C,0DAA0D;QACzC,mBAAc,GAAG,KAAK,CAAC;QAExC,oFAAoF;QACnE,mBAAc,GAA+B,IAAI,GAAG,EAAE,CAAC;QAExE,gFAAgF;QAC/D,gBAAW,GAAG,KAAK,CAAC;QAErC,kEAAkE;QAC1D,gBAAW,GAAG,IAAI,GAAG,EAAgD,CAAC;IAuahF,CAAC;IAraC,MAAM;QACJ,wEAAwE;QACxE,wEAAwE;QACxE,yEAAyE;QACzE,wDAAwD;QACxD,OAAO,IAAI,CAAA;2BACY,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UAClD,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;;KAExD,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IACK,aAAa,CAAC,IAAmB;QACvC,2EAA2E;QAC3E,0DAA0D;QAC1D,MAAM,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC;QACpC,MAAM,UAAU,GAAG,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC9D,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAEjE,OAAO,IAAI,CAAA;qBACM,KAAK;oBACN,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;QAEvC,QAAQ,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO;WACvD,CAAC;IACV,CAAC;IAEO,YAAY,CAAC,IAAmB;QACtC,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,mBAAmB,CAAC;YAClC,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAC,wBAAwB,CAAC;YACvC,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAC,wBAAwB,CAAC;YACvC,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,sBAAsB,CAAC;QACvC,CAAC;IACH,CAAC;IAED,UAAU,CAAC,YAA4B;QACrC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC;YAAE,OAAO;QACtC,0EAA0E;QAC1E,0BAA0B;QAC1B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,CAAC,MAAM,CAA8B,CAAC;QACvE,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,CAAC,IAAI;YAAE,OAAO;QAE7D,0EAA0E;QAC1E,2DAA2D;QAC3D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAE9B,IAAI,CAAC,cAAc,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACjE,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,WAAW,CAAC,GAAG,CAClB,QAAQ,EACR,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,CACjE,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,IAAmB;QACvC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;QACzC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC;YAAE,OAAO;QAE3C,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC9C,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;IACjC,CAAC;IAED,YAAY;QACV,0EAA0E;QAC1E,kEAAkE;QAClE,sEAAsE;QACtE,iCAAiC;QACjC,qBAAqB,CAAC,GAAG,EAAE;YACzB,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,0EAA0E;QAC1E,oCAAoC;QACpC,IAAI,CAAC,cAAc,GAAG,IAAI,GAAG,EAAE,CAAC;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACH,IAAY,mBAAmB;QAC7B,OAAO,IAAI,CAAA,iCAAiC,CAAC;IAC/C,CAAC;IAED;;;;;OAKG;IACH,IAAY,gBAAgB;QAC1B,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,SAAS,CAAC;QACtC,OAAO,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC;IAED,6EAA6E;IAC7E,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;IACxD,CAAC;IAED;;;;;;OAMG;IACH,IAAY,wBAAwB;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QACzC,OAAO,IAAI,CAAA;;UAEL,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa;uCACxB,CAAC,aAAa;0CACX,IAAI,CAAC,oBAAoB;cACrD,IAAI,CAAC,qBAAqB;;;;KAInC,CAAC;IACJ,CAAC;IAED,oEAAoE;IACpE,IAAY,aAAa;QACvB,OAAO,GAAG,CAAA;;;;;;;;;;iBAUG,IAAI,CAAC,YAAY;;;;;;;kCAOA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;;;;;KAS1D,CAAC;IACJ,CAAC;IAED,8DAA8D;IAC9D,IAAY,WAAW;QACrB,OAAO,GAAG,CAAA;;;;;;;;;iBASG,IAAI,CAAC,YAAY;;;;;;;;;KAS7B,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,IAAY,qBAAqB;QAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAClC,IAAI,CAAC,GAAG;YAAE,OAAO,OAAO,CAAC;QAEzB,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC;IACzB,CAAC;IAEO,oBAAoB,CAAC,CAAQ;QACnC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;QACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IAC1E,CAAC;IAED,wCAAwC;IACxC,IAAY,wBAAwB;QAClC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,YAAY;;;;;;;;;;;;;KAa7B,CAAC;IACJ,CAAC;IAED,gCAAgC;IAChC,IAAY,sBAAsB;QAChC,OAAO,IAAI,CAAA;;;;;;;;;;iBAUE,IAAI,CAAC,UAAU;;;;;;KAM3B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8BuB,SAAS,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6HpD;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAlc6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAkC;AAGjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAA+B;AAG9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAA2B;AAG1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAiC;AAGhC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAA2B;AAGzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAkB;AAG7B;IAAhB,KAAK,EAAE;yDAAgC;AAGvB;IAAhB,KAAK,EAAE;yDAAgE;AAGvD;IAAhB,KAAK,EAAE;sDAA6B;AA1B1B,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAoc7B","sourcesContent":["import {\n  css,\n  unsafeCSS,\n  CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  PropertyValues,\n  svg,\n  SVGTemplateResult,\n  TemplateResult,\n} from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { customElement } from '@src/util/custom-element';\nimport { msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport { maskedIcon } from '@src/util/masked-icon';\n\nimport audioIcon from './icons/audio.svg';\nimport collectionIcon from './icons/collection.svg';\nimport etreeIcon from './icons/etree.svg';\nimport imagesIcon from './icons/images.svg';\nimport searchIcon from './icons/search.svg';\nimport softwareIcon from './icons/software.svg';\nimport textsIcon from './icons/texts.svg';\nimport tvIcon from './icons/tv.svg';\nimport videoIcon from './icons/video.svg';\nimport webIcon from './icons/web.svg';\n\n/** How long a mode change takes to fade. Drives both the CSS and the timer. */\nconst FADE_DURATION_MS = 250;\n\n/** One layer per mode, always rendered in this order. See render(). */\nconst LAYER_ORDER: LoadingStatus[] = ['ready', 'loading', 'success', 'error'];\n\nexport type LoadingStatus = 'ready' | 'loading' | 'success' | 'error';\n\n/**\n * The mediatype glyphs this element ships. These are *icon* names, which do not\n * map one-to-one onto archive.org mediatype values — a consumer holding a\n * `MediaType` translates at its own call site (e.g. `movies` -> `video`).\n */\nexport type MediaTypeIcon =\n  | 'audio'\n  | 'collection'\n  | 'etree'\n  | 'images'\n  | 'search'\n  | 'software'\n  | 'texts'\n  | 'tv'\n  | 'video'\n  | 'web';\n\nconst MEDIATYPE_ICONS: Record<MediaTypeIcon, string> = {\n  audio: audioIcon,\n  collection: collectionIcon,\n  etree: etreeIcon,\n  images: imagesIcon,\n  search: searchIcon,\n  software: softwareIcon,\n  texts: textsIcon,\n  tv: tvIcon,\n  video: videoIcon,\n  web: webIcon,\n};\n\n/**\n * Renders an SVG indicator, which defaults to an animated circular indicator.\n *\n * In `loading` mode the middle of the ring resolves in this order:\n *   1. slotted `icon` content\n *   2. the `mediatype` glyph\n *   3. nothing, when `hideDots` is set\n *   4. three animated dots (the default)\n */\n@customElement('ia-status-indicator')\nexport class IAStatusIndicator extends LitElement {\n  /* An optional title to use for the loading state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) loadingTitle = msg('Loading...');\n\n  /* An optional title to use for the success state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) successTitle = msg('Success');\n\n  /* An optional title to use for the error state of the indicator. Will be used for screen readers. */\n  @property({ type: String }) errorTitle = msg('Error');\n\n  /* The state of the indicator that should be shown */\n  @property({ type: String }) mode: LoadingStatus = 'loading';\n\n  /* An optional mediatype glyph to render in the middle of the loading ring */\n  @property({ type: String }) mediatype?: MediaTypeIcon;\n\n  /* Renders a bare ring, with no dots in the middle. Ignored when a center icon is present. */\n  @property({ type: Boolean }) hideDots = false;\n\n  /* Whether a consumer has slotted their own center icon */\n  @state() private hasSlottedIcon = false;\n\n  /* The modes still fading out after a change. More than one when changes overlap. */\n  @state() private _outgoingModes: ReadonlySet<LoadingStatus> = new Set();\n\n  /* Set once the first render is done, so the element doesn't fade in on mount */\n  @state() private _canAnimate = false;\n\n  /* One per outgoing mode, clearing it once its own fade is over */\n  private _fadeTimers = new Map<LoadingStatus, ReturnType<typeof setTimeout>>();\n\n  render(): TemplateResult {\n    // Every mode has its own layer element that never moves, whatever order\n    // the changes come in. Moving an element cancels the transition it's in\n    // the middle of, so a layer partway through a fade would snap to its end\n    // value. A layer only has content while it's on screen.\n    return html`\n      <div class=\"layers ${this._canAnimate ? 'animate' : ''}\">\n        ${LAYER_ORDER.map((mode) => this.layerTemplate(mode))}\n      </div>\n    `;\n  }\n\n  /**\n   * One mode's artwork, stacked in the same cell as the other layers so that\n   * a mode change fades between them. At rest only the active layer has\n   * content; an outgoing one is emptied as soon as its fade is over, so the\n   * shadow tree holds a single mode's markup and a single `<title>`.\n   */\n  private layerTemplate(mode: LoadingStatus): TemplateResult {\n    // `mode` is a public string attribute, so a consumer can hand us anything.\n    // An unrecognised one matches no layer and draws nothing.\n    const isActive = mode === this.mode;\n    const isOutgoing = !isActive && this._outgoingModes.has(mode);\n    const state = isActive ? 'active' : isOutgoing ? 'outgoing' : '';\n\n    return html`<div\n      class=\"layer ${state}\"\n      aria-hidden=${isActive ? nothing : 'true'}\n    >\n      ${isActive || isOutgoing ? this.modeTemplate(mode) : nothing}\n    </div>`;\n  }\n\n  private modeTemplate(mode: LoadingStatus): TemplateResult {\n    switch (mode) {\n      case 'ready':\n        return this.placeholderTemplate;\n      case 'loading':\n        return this.loadingIndicatorTemplate;\n      case 'success':\n        return this.successIndicatorTemplate;\n      case 'error':\n        return this.errorIndicatorTemplate;\n    }\n  }\n\n  willUpdate(changedProps: PropertyValues): void {\n    if (!changedProps.has('mode')) return;\n    // Hold on to the mode we're leaving so both can be on screen together for\n    // the length of the fade.\n    const previous = changedProps.get('mode') as LoadingStatus | undefined;\n    if (previous === undefined || previous === this.mode) return;\n\n    // The mode coming back in may still be fading out from an earlier change.\n    // Its layer just turns around, so it's no longer outgoing.\n    this.stopFadingOut(this.mode);\n\n    this._outgoingModes = new Set(this._outgoingModes).add(previous);\n    clearTimeout(this._fadeTimers.get(previous));\n    this._fadeTimers.set(\n      previous,\n      setTimeout(() => this.stopFadingOut(previous), FADE_DURATION_MS),\n    );\n  }\n\n  private stopFadingOut(mode: LoadingStatus): void {\n    clearTimeout(this._fadeTimers.get(mode));\n    this._fadeTimers.delete(mode);\n    if (!this._outgoingModes.has(mode)) return;\n\n    const outgoing = new Set(this._outgoingModes);\n    outgoing.delete(mode);\n    this._outgoingModes = outgoing;\n  }\n\n  firstUpdated(): void {\n    // Fading applies to mode changes, not to the element appearing. Waiting a\n    // frame is what makes that true: enabling it inline would put the\n    // transition in the element's very first computed style, and it would\n    // fade up from nothing on mount.\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this._canAnimate = true;\n      });\n    });\n  }\n\n  disconnectedCallback(): void {\n    this._fadeTimers.forEach((timer) => clearTimeout(timer));\n    this._fadeTimers.clear();\n    // Nothing reschedules these timers, so leaving the modes set would strand\n    // the outgoing layers on reconnect.\n    this._outgoingModes = new Set();\n    super.disconnectedCallback();\n  }\n\n  /**\n   * The `ready` state: reserves the indicator's space without drawing, so a\n   * consumer's layout doesn't shift once the indicator appears.\n   */\n  private get placeholderTemplate(): TemplateResult {\n    return html`<div class=\"placeholder\"></div>`;\n  }\n\n  /**\n   * The asset URL for the current mediatype, if it maps to a glyph we ship.\n   *\n   * Unmapped values (e.g. archive.org's `account` or `data`) resolve to\n   * undefined and degrade to the default dots rather than a broken mask.\n   */\n  private get mediatypeIconUrl(): string | undefined {\n    if (!this.mediatype) return undefined;\n    return MEDIATYPE_ICONS[this.mediatype];\n  }\n\n  /** Whether the middle of the ring is occupied by a glyph rather than dots */\n  private get hasCenterIcon(): boolean {\n    return this.hasSlottedIcon || !!this.mediatypeIconUrl;\n  }\n\n  /**\n   * A circular loading indicator to render when processing.\n   *\n   * Two ring geometries are kept deliberately: the original 120x120 ring is\n   * tuned for the dots, and the roomier 100x100 ring leaves space for a center\n   * glyph. Keeping both means existing consumers see no visual change.\n   */\n  private get loadingIndicatorTemplate(): TemplateResult {\n    const hasCenterIcon = this.hasCenterIcon;\n    return html`\n      <div class=\"indicator\">\n        ${hasCenterIcon ? this.iconRingSvg : this.dottedRingSvg}\n        <span class=\"center\" ?hidden=${!hasCenterIcon}>\n          <slot name=\"icon\" @slotchange=${this.handleIconSlotChange}>\n            ${this.mediatypeIconTemplate}\n          </slot>\n        </span>\n      </div>\n    `;\n  }\n\n  /** The original ring, with the three animated dots in the middle */\n  private get dottedRingSvg(): SVGTemplateResult {\n    return svg`\n      <svg\n        class=\"loading-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.loadingTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"loading-ring\"\n            d=\"M60,10 C69.8019971,10 78.9452178,12.8205573 86.6623125,17.6943223 L76.4086287,27.9484118 C71.4880919,25.4243078 65.9103784,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 C96,53.3014663 94.1704984,47.0302355 90.9839104,41.6587228 L101.110332,31.5326452 C106.715332,39.6116982 110,49.4222615 110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <g\n            class=\"loading-dots ${this.hideDots ? 'hidden' : ''}\"\n            transform=\"translate(40.000000, 55.000000)\"\n          >\n            <circle id=\"left-dot\" cx=\"5\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"middle-dot\" cx=\"20\" cy=\"5\" r=\"5\"></circle>\n            <circle id=\"right-dot\" cx=\"35\" cy=\"5\" r=\"5\"></circle>\n          </g>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** The roomier ring, used when a glyph occupies the middle */\n  private get iconRingSvg(): SVGTemplateResult {\n    return svg`\n      <svg\n        class=\"loading-indicator icon-ring\"\n        viewBox=\"0 0 100 100\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.loadingTitle}</title>\n        <g fill-rule=\"evenodd\">\n          <path\n            class=\"loading-ring\"\n            fill-rule=\"nonzero\"\n            d=\"m17.8618849 11.6970233c18.5864635-15.59603144 45.6875867-15.59603102 64.2740497.000001 1.9271446 1.6170806 2.1785128 4.4902567.5614466 6.4174186-1.6170661 1.9271618-4.4902166 2.1785323-6.4173612.5614517-15.1996922-12.75416882-37.3625282-12.75416916-52.5622206-.000001-15.19969387 12.7541707-19.04823077 34.5805019-9.1273354 51.7641499 9.9208955 17.183646 30.7471499 24.7638499 49.3923323 17.9774983 18.6451823-6.7863521 29.7266014-25.9801026 26.2811129-45.5206248-.436848-2.4775114 1.2174186-4.8400696 3.6949079-5.2769215 2.4774893-.4368518 4.8400264 1.2174296 5.2768744 3.694941 4.2132065 23.8945096-9.3373563 47.3649806-32.137028 55.6634567-22.799672 8.2984758-48.2663986-.9707372-60.39785211-21.9832155-12.1314534-21.012481-7.42539173-47.7021198 11.16107351-63.2981544z\"\n          ></path>\n        </g>\n      </svg>\n    `;\n  }\n\n  /**\n   * The bundled mediatype glyph. `maskedIcon` supplies the mask geometry and\n   * the decorative `aria-hidden`; this component supplies the size and paint.\n   */\n  private get mediatypeIconTemplate(): TemplateResult | typeof nothing {\n    const url = this.mediatypeIconUrl;\n    if (!url) return nothing;\n\n    return maskedIcon(url);\n  }\n\n  private handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this.hasSlottedIcon = slot.assignedNodes({ flatten: false }).length > 0;\n  }\n\n  /** A check mark to render on success */\n  private get successIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"success-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.successTitle}</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n          <path\n            class=\"success-icon\"\n            d=\"M60,10 C70.5816709,10 80.3955961,13.2871104 88.4763646,18.8959201 L78.3502633,29.0214223 C72.9767592,25.8315427 66.7022695,24 60,24 C40.117749,24 24,40.117749 24,60 C24,79.882251 40.117749,96 60,96 C79.882251,96 96,79.882251 96,60 L95.995,59.46 L108.327675,47.128668 C109.350926,50.9806166 109.925886,55.015198 109.993301,59.1731586 L110,60 C110,87.6142375 87.6142375,110 60,110 C32.3857625,110 10,87.6142375 10,60 C10,32.3857625 32.3857625,10 60,10 Z\"\n          ></path>\n          <polygon\n            class=\"success-icon\"\n            transform=\"translate(75.000000, 41.500000) rotate(44.000000) translate(-75.000000, -41.500000) \"\n            points=\"96 85 54 85 54 65 76 64.999 76 -2 96 -2\"\n          ></polygon>\n        </g>\n      </svg>\n    `;\n  }\n\n  /** An \"!\" to render on error */\n  private get errorIndicatorTemplate(): TemplateResult {\n    return html`\n      <svg\n        class=\"error-indicator\"\n        viewBox=\"0 0 120 120\"\n        preserveAspectRatio=\"none\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        role=\"status\"\n      >\n        <title>${this.errorTitle}</title>\n        <path\n          class=\"error-icon\"\n          d=\"m56.4612493 8.80450354 41.8901185 75.94632926c1.7706782 2.8433173 2.1150372 5.2623412 1.0330766 7.2570716-1.0819604 1.9947304-3.26978 2.9920956-6.5634587 2.9920956h-85.69973905c-3.29367873 0-5.46954894-.9973652-6.52761065-2.9920956-1.0580617-1.9947304-.70175345-4.4137543 1.06892476-7.2570716l41.89011844-75.12308969c1.8184757-2.84331737 3.9693609-4.37738627 6.4526556-4.60220671s4.6341799 1.03483527 6.4526556 3.77896714zm28.5387507 75.19549646-35.037482-62-34.962518 62zm-31-34.7484359v-10.2515641h-8v10.2515641l2.089172 14.7484359h3.8184713zm-8 19.7484359v8h8v-8z\"\n        />\n      </svg>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --indicator-width--: var(--icon-width);\n\n          /* Loading */\n          --loading-ring-color--: var(--primary-text-color);\n          --loading-dot-color--: var(--primary-text-color);\n          --loading-icon-color--: var(--primary-text-color);\n\n          /* Success */\n          --success-icon-color--: var(--color-success);\n\n          /* Error */\n          --error-icon-color--: var(--color-danger);\n\n          display: inline-block;\n          width: var(--indicator-width--);\n        }\n\n        /* Every mode occupies the same cell, so the element keeps one size */\n        .layers {\n          display: grid;\n        }\n\n        .layer {\n          grid-area: 1 / 1;\n          opacity: 0;\n        }\n\n        .animate .layer {\n          transition: opacity ${unsafeCSS(FADE_DURATION_MS)}ms ease-out;\n        }\n\n        .layer.active {\n          opacity: 1;\n        }\n\n        /* A ring on its way out would otherwise keep animating unseen */\n        .layer.outgoing .loading-ring,\n        .layer.outgoing .loading-dots > * {\n          animation-play-state: paused;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          .animate .layer {\n            transition: none;\n          }\n        }\n\n        .placeholder {\n          height: var(--indicator-width--);\n        }\n\n        /* Stacks the center glyph over the ring */\n        .indicator {\n          position: relative;\n          display: block;\n        }\n\n        .indicator svg {\n          display: block;\n          width: 100%;\n          height: auto;\n        }\n\n        .center {\n          position: absolute;\n          inset: 0;\n          display: grid;\n          place-items: center;\n        }\n\n        .center[hidden] {\n          display: none;\n        }\n\n        /*\n         * Sized to fit within the icon ring's inner diameter. maskedIcon sets\n         * the mask itself; background-color is what paints the glyph, so it\n         * recolors with the ring.\n         */\n        .ia-icon {\n          width: 50%;\n          height: 50%;\n          background-color: var(--loading-icon-color--);\n        }\n\n        /* Block, so the svg isn't padded out by the line box it would sit in */\n        .success-indicator,\n        .error-indicator {\n          display: block;\n        }\n\n        .success-icon {\n          fill: var(--success-icon-color--);\n        }\n\n        .error-icon {\n          fill: var(--error-icon-color--);\n        }\n\n        .loading-ring {\n          fill: var(--loading-ring-color--);\n          animation: rotate 1.3s infinite linear;\n          transform-origin: 50px 50px;\n          transform-box: fill-box;\n        }\n\n        .loading-dots {\n          fill: var(--loading-dot-color--);\n          transition: opacity 0.25s ease-out;\n        }\n\n        .loading-dots.hidden {\n          display: none;\n        }\n\n        .loading-dots > * {\n          opacity: 0;\n          animation: dot 1.3s infinite;\n        }\n\n        .loading-dots #left-dot {\n          animation-delay: 0.2s;\n        }\n\n        .loading-dots #middle-dot {\n          animation-delay: 0.4s;\n        }\n\n        .loading-dots #right-dot {\n          animation-delay: 0.6s;\n        }\n\n        @keyframes rotate {\n          0% {\n            transform: rotate(-360deg);\n          }\n          100% {\n            /* This frame is supposed to be inferred, but Safari doesn't rotate it unless we're explicit */\n            transform: rotate(0deg);\n          }\n        }\n\n        @keyframes dot {\n          0% {\n            opacity: 0;\n          }\n          25% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }\n      `,\n    ];\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ia-status-indicator': IAStatusIndicator;\n  }\n}\n"]}

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@internetarchive/elements",
-  "version": "1.1.3-webdev-9240.0",
+  "version": "1.1.3",
   "description": "A web component library from the Internet Archive.",
   "license": "AGPL-3.0-only",
-  "types": "./dist/src/elements/index.d.ts",
   "type": "module",
   "packageManager": "pnpm@12.4.0",
   "engines": {
@@ -33,14 +32,10 @@
     "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",
     "dayjs": "^1.11.23",
-    "dompurify": "^3.2.5",
     "lit": "^2.8.0 || ^3.3.2",
     "magic-snowflakes": "^7.0.2",
     "tslib": "^2.8.1"
@@ -49,13 +44,11 @@
     "@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",
@@ -76,7 +69,6 @@
     "wireit": "^0.14.12"
   },
   "exports": {
-    ".": "./dist/src/index.js",
     "./*": "./dist/src/elements/*.js",
     "./labs/*": "./dist/src/labs/*.js"
   },

package/dist/src/elements/ia-reviews/assets/delete-icon.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-    <rect width="24" height="24" fill="white"/>
-    <path d="M5 7.5H19L18 21H6L5 7.5Z" stroke="#000000" stroke-linejoin="round"/>
-    <path d="M15.5 9.5L15 19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M12 9.5V19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M8.5 9.5L9 19" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
-    <path d="M16 5H19C20.1046 5 21 5.89543 21 7V7.5H3V7C3 5.89543 3.89543 5 5 5H8M16 5L15 3H9L8 5M16 5H8" stroke="#000000" stroke-linejoin="round"/>
-  </svg>

package/dist/src/elements/ia-reviews/assets/star-basic.svg

@@ -1,6 +0,0 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z"
-    fill="#2C2C2C"
-  />
-</svg>

package/dist/src/elements/ia-reviews/assets/star-selected.svg

@@ -1,8 +0,0 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z"
-    fill="#c2820a"
-    stroke="#c2820a"
-    stroke-width="3px"
-  />
-</svg>

package/dist/src/elements/ia-reviews/assets/star-unselected.svg

@@ -1,8 +0,0 @@
-<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z"
-    fill="#ffffff"
-    stroke="#c2820a"
-    stroke-width="3px"
-  />
-</svg>

package/dist/src/elements/ia-reviews/ia-review-form.d.ts

@@ -1,103 +0,0 @@
-import { LitElement, PropertyValues, CSSResultGroup } from 'lit';
-import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
-import '../../elements/ia-button/ia-button.js';
-import { Review } from '@internetarchive/metadata-service';
-import type { ReviewServiceInterface } from './models.js';
-import './ia-review.js';
-/**
- * Renders a form to edit a given IA review.
- */
-export declare class IAReviewForm extends LitElement {
-    identifier?: string;
-    /** Form submitter's screenname, if applicable. Defaults to "Anonymous". */
-    submitterScreenname?: string;
-    /** Form submitter's itemname, if applicable */
-    submitterItemname?: string;
-    oldReview?: Review;
-    unrecoverableError?: string;
-    maxSubjectLength?: number;
-    maxBodyLength?: number;
-    reviewService?: ReviewServiceInterface;
-    recaptchaManager?: RecaptchaManagerInterface;
-    bypassRecaptcha: boolean;
-    private recaptchaWidget?;
-    private currentStars;
-    private currentSubjectLength;
-    private currentBodyLength;
-    recoverableError?: string;
-    private formError?;
-    private recaptchaUnavailable;
-    private formCanSubmit;
-    submissionInProgress: boolean;
-    private reviewForm;
-    render(): import("lit").TemplateResult<1>;
-    protected willUpdate(changed: PropertyValues): void;
-    /** Error to render instead of form inputs */
-    private get unrecoverableErrorTemplate();
-    /** Error to render next to submit button */
-    private get recoverableErrorTemplate();
-    private get unrecoverableErrorMessage();
-    private get recoverableErrorMessage();
-    private get recaptchaErrorMessage();
-    private get genericErrorMessage();
-    private get recaptchaMessageTemplate();
-    /** Clickable group of stars */
-    private get starsInputTemplate();
-    /** Subject input and character counter */
-    private get subjectInputTemplate();
-    /** Body input and character counter */
-    private get bodyInputTemplate();
-    /** Buttons to render at bottom of form */
-    private get actionButtonsTemplate();
-    /**
-     * Renders a star icon, using its number and the current star rating
-     * to determine whether it should appear selected or not
-     *
-     * @param {number} num The number of the current star
-     * @returns {HTMLTemplateResult} The correct icon, rendered within a button
-     */
-    private renderStar;
-    /**
-     * Sets up ReCaptcha for the form, if possible.
-     *
-     * On failure, replaces form inputs with the ReCaptcha error message.
-     */
-    private setupRecaptcha;
-    /**
-     * Uses DOMpurify to sanitize any error message before render.
-     *
-     * @param {string} errorMsg The error message to be sanitized
-     * @returns {string} The sanitized error message
-     */
-    private sanitizeErrorMsg;
-    /** Handles validation and recaptcha execution on form submission */
-    private handleSubmit;
-    /**
-     * Generates a review object from the submitted review,
-     * for optimistic display on success.
-     *
-     * @returns {Review} The review to display
-     */
-    private generateSubmittedReview;
-    /**
-     * Converts date to string if it is a Date, otherwise
-     * leaves unchanged.
-     */
-    private dateToString;
-    /**
-     * Executes the ReCaptcha challenge for the form.
-     * Attempts form submission on success.
-     * */
-    private getRecaptchaToken;
-    private handleRecaptchaError;
-    private stopSubmission;
-    private cancelReviewEdit;
-    private handleStarClicked;
-    private handleClearBtnClicked;
-    private setStars;
-    private handleSubjectChanged;
-    private handleBodyChanged;
-    private checkSubmissionAllowed;
-    static get styles(): CSSResultGroup;
-}
-//# sourceMappingURL=ia-review-form.d.ts.map

package/dist/src/elements/ia-reviews/ia-review-form.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ia-review-form.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-reviews/ia-review-form.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAGV,cAAc,EACd,cAAc,EACf,MAAM,KAAK,CAAC;AAQb,OAAO,KAAK,EACV,yBAAyB,EAE1B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAK3D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,aAAa,CAAC;AAErB;;GAEG;AACH,qBAEa,YAAa,SAAQ,UAAU;IAEd,UAAU,CAAC,EAAE,MAAM,CAAC;IAEhD,2EAA2E;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAEzD,+CAA+C;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAG3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAG5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,aAAa,CAAC,EAAE,sBAAsB,CAAC;IAGvC,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAG5C,eAAe,EAAE,OAAO,CAAS;IAG9D,OAAO,CAAC,eAAe,CAAC,CAA2B;IAInD,OAAO,CAAC,YAAY,CAAa;IAIjC,OAAO,CAAC,oBAAoB,CAAa;IAIzC,OAAO,CAAC,iBAAiB,CAAa;IAItC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAI1B,OAAO,CAAC,SAAS,CAAC,CAA0B;IAI5C,OAAO,CAAC,oBAAoB,CAAkB;IAI9C,OAAO,CAAC,aAAa,CAAkB;IAIvC,oBAAoB,EAAE,OAAO,CAAS;IAItC,OAAO,CAAC,UAAU,CAAmB;IAErC,MAAM;IAeN,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoCnD,6CAA6C;IAC7C,OAAO,KAAK,0BAA0B,GAYrC;IAED,4CAA4C;IAC5C,OAAO,KAAK,wBAAwB,GAUnC;IAGD,OAAO,KAAK,yBAAyB,GAIpC;IAGD,OAAO,KAAK,uBAAuB,GAWlC;IAGD,OAAO,KAAK,qBAAqB,GAEhC;IAED,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,KAAK,wBAAwB,GAwBnC;IAED,+BAA+B;IAC/B,OAAO,KAAK,kBAAkB,GAuB7B;IAED,0CAA0C;IAC1C,OAAO,KAAK,oBAAoB,GAqC/B;IAED,uCAAuC;IACvC,OAAO,KAAK,iBAAiB,GAoC5B;IAED,0CAA0C;IAC1C,OAAO,KAAK,qBAAqB,GAoBhC;IAED;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IA4BlB;;;;OAIG;YACW,cAAc;IAQ5B;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAIxB,oEAAoE;YACtD,YAAY;IAyD1B;;;;;OAKG;IACH,OAAO,CAAC,uBAAuB;IAoB/B;;;OAGG;IACH,OAAO,CAAC,YAAY;IAKpB;;;SAGK;YACS,iBAAiB;IAgB/B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,sBAAsB;IA2B9B,MAAM,KAAK,MAAM,IAAI,cAAc,CAgJlC;CACF"}