@internetarchive/elements 0.2.13-webdev-9022.1 → 0.2.13

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

@@ -1,157 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import themeStyles from '../../themes/theme-styles.js';
-/**
- * The image viewer's previous / next buttons and the "n / total" counter.
- *
- * Past the wide breakpoint the buttons position themselves over the image
- * area, which lives in the viewer's shadow root. That works because an
- * absolutely positioned element finds its containing block through the flat
- * tree, so the viewer's frame is still the reference as long as this element's
- * own host box stays unpositioned. The breakpoint queries the `image-viewer`
- * container by name, so it tracks the viewer's width rather than whichever
- * container a consumer happens to have further up the tree.
- */
-let IAImageViewerControls = class IAImageViewerControls extends LitElement {
-    constructor() {
-        super(...arguments);
-        /** Zero-based index of the image being shown, for the counter. */
-        this.currentIndex = 0;
-        this.totalImages = 0;
-    }
-    render() {
-        return html `
-      <button
-        class="nav-btn prev"
-        aria-label=${msg('Previous image')}
-        @click=${this.onPrevious}
-      >
-        &#8249;
-      </button>
-      <div class="counter">${this.currentIndex + 1} / ${this.totalImages}</div>
-      <button
-        class="nav-btn next"
-        aria-label=${msg('Next image')}
-        @click=${this.onNext}
-      >
-        &#8250;
-      </button>
-    `;
-    }
-    onPrevious() {
-        this.dispatchEvent(new CustomEvent('showPrevious'));
-    }
-    onNext() {
-        this.dispatchEvent(new CustomEvent('showNext'));
-    }
-    static get styles() {
-        return [
-            themeStyles,
-            css `
-        :host {
-          --imgview-controls-text-color--: var(
-            --image-viewer-text-color,
-            var(--true-white)
-          );
-          --imgview-controls-btn-width--: var(
-            --image-viewer-nav-button-width,
-            40px
-          );
-          --imgview-controls-btn-width-wide--: var(
-            --image-viewer-nav-button-width-wide,
-            60px
-          );
-          --imgview-controls-focus-color--: var(
-            --image-viewer-focus-outline-color,
-            rgba(255, 255, 255, 0.8)
-          );
-
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          width: 100%;
-          margin-top: 0.8rem;
-        }
-
-        .nav-btn {
-          width: var(--imgview-controls-btn-width--);
-          background: transparent;
-          color: var(--imgview-controls-text-color--);
-          border: none;
-          cursor: pointer;
-          font-size: 30px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          opacity: 0.5;
-          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-          transition: opacity 0.15s;
-        }
-
-        .nav-btn:hover {
-          opacity: 1;
-        }
-
-        .nav-btn:focus-visible {
-          outline: 2px solid var(--imgview-controls-focus-color--);
-          outline-offset: -2px;
-        }
-
-        .counter {
-          color: var(--imgview-controls-text-color--);
-          font-size: 14px;
-          font-weight: 200;
-          letter-spacing: 0.05em;
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-          .nav-btn {
-            transition: none;
-          }
-        }
-
-        @container image-viewer (min-width: 890px) {
-          :host {
-            position: static;
-            width: auto;
-            margin-top: 0;
-          }
-
-          .nav-btn {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            width: var(--imgview-controls-btn-width-wide--);
-            font-size: 60px;
-            z-index: 1;
-          }
-
-          .prev {
-            left: 0;
-          }
-
-          .next {
-            right: 0;
-          }
-
-          .counter {
-            margin-top: 0.8rem;
-          }
-        }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Number })
-], IAImageViewerControls.prototype, "currentIndex", void 0);
-__decorate([
-    property({ type: Number })
-], IAImageViewerControls.prototype, "totalImages", void 0);
-IAImageViewerControls = __decorate([
-    customElement('ia-imgview-controls')
-], IAImageViewerControls);
-export { IAImageViewerControls };
-//# sourceMappingURL=ia-imgview-controls.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ia-imgview-controls.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-controls.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,GAAG,EAEH,IAAI,EACJ,UAAU,GAEX,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;GAUG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QACL,kEAAkE;QACtC,iBAAY,GAAG,CAAC,CAAC;QAEjB,gBAAW,GAAG,CAAC,CAAC;IA+H9C,CAAC;IA7HC,MAAM;QACJ,OAAO,IAAI,CAAA;;;qBAGM,GAAG,CAAC,gBAAgB,CAAC;iBACzB,IAAI,CAAC,UAAU;;;;6BAIH,IAAI,CAAC,YAAY,GAAG,CAAC,MAAM,IAAI,CAAC,WAAW;;;qBAGnD,GAAG,CAAC,YAAY,CAAC;iBACrB,IAAI,CAAC,MAAM;;;;KAIvB,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC;IACtD,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,WAAW;YACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2FF;SACF,CAAC;IACJ,CAAC;CACF,CAAA;AAjI6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAkB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAiB;AAJjC,qBAAqB;IADjC,aAAa,CAAC,qBAAqB,CAAC;GACxB,qBAAqB,CAmIjC","sourcesContent":["import {\n  css,\n  type CSSResultGroup,\n  html,\n  LitElement,\n  type TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { msg } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\n\n/**\n * The image viewer's previous / next buttons and the \"n / total\" counter.\n *\n * Past the wide breakpoint the buttons position themselves over the image\n * area, which lives in the viewer's shadow root. That works because an\n * absolutely positioned element finds its containing block through the flat\n * tree, so the viewer's frame is still the reference as long as this element's\n * own host box stays unpositioned. The breakpoint queries the `image-viewer`\n * container by name, so it tracks the viewer's width rather than whichever\n * container a consumer happens to have further up the tree.\n */\n@customElement('ia-imgview-controls')\nexport class IAImageViewerControls extends LitElement {\n  /** Zero-based index of the image being shown, for the counter. */\n  @property({ type: Number }) currentIndex = 0;\n\n  @property({ type: Number }) totalImages = 0;\n\n  render(): TemplateResult {\n    return html`\n      <button\n        class=\"nav-btn prev\"\n        aria-label=${msg('Previous image')}\n        @click=${this.onPrevious}\n      >\n        &#8249;\n      </button>\n      <div class=\"counter\">${this.currentIndex + 1} / ${this.totalImages}</div>\n      <button\n        class=\"nav-btn next\"\n        aria-label=${msg('Next image')}\n        @click=${this.onNext}\n      >\n        &#8250;\n      </button>\n    `;\n  }\n\n  private onPrevious(): void {\n    this.dispatchEvent(new CustomEvent('showPrevious'));\n  }\n\n  private onNext(): void {\n    this.dispatchEvent(new CustomEvent('showNext'));\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --imgview-controls-text-color--: var(\n            --image-viewer-text-color,\n            var(--true-white)\n          );\n          --imgview-controls-btn-width--: var(\n            --image-viewer-nav-button-width,\n            40px\n          );\n          --imgview-controls-btn-width-wide--: var(\n            --image-viewer-nav-button-width-wide,\n            60px\n          );\n          --imgview-controls-focus-color--: var(\n            --image-viewer-focus-outline-color,\n            rgba(255, 255, 255, 0.8)\n          );\n\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          width: 100%;\n          margin-top: 0.8rem;\n        }\n\n        .nav-btn {\n          width: var(--imgview-controls-btn-width--);\n          background: transparent;\n          color: var(--imgview-controls-text-color--);\n          border: none;\n          cursor: pointer;\n          font-size: 30px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          opacity: 0.5;\n          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);\n          transition: opacity 0.15s;\n        }\n\n        .nav-btn:hover {\n          opacity: 1;\n        }\n\n        .nav-btn:focus-visible {\n          outline: 2px solid var(--imgview-controls-focus-color--);\n          outline-offset: -2px;\n        }\n\n        .counter {\n          color: var(--imgview-controls-text-color--);\n          font-size: 14px;\n          font-weight: 200;\n          letter-spacing: 0.05em;\n        }\n\n        @media (prefers-reduced-motion: reduce) {\n          .nav-btn {\n            transition: none;\n          }\n        }\n\n        @container image-viewer (min-width: 890px) {\n          :host {\n            position: static;\n            width: auto;\n            margin-top: 0;\n          }\n\n          .nav-btn {\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            width: var(--imgview-controls-btn-width-wide--);\n            font-size: 60px;\n            z-index: 1;\n          }\n\n          .prev {\n            left: 0;\n          }\n\n          .next {\n            right: 0;\n          }\n\n          .counter {\n            margin-top: 0.8rem;\n          }\n        }\n      `,\n    ];\n  }\n}\n"]}

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

@@ -1,44 +0,0 @@
-import { type CSSResultGroup, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
-import type { ImageViewerImage } from './models.js';
-/**
- * A single image in the viewer's track.
- *
- * Owns everything about one image: its load state, its failure message, and
- * the link that opens the full-size file. The viewer creates these both from
- * its template and by hand during a drag, so the element works with no
- * per-instance setup beyond its properties.
- */
-export declare class IAImageViewerSlide extends LitElement {
-    image?: ImageViewerImage;
-    private imageElement?;
-    private loaded;
-    private failed;
-    protected willUpdate(changed: PropertyValues): void;
-    protected updated(): void;
-    render(): TemplateResult | typeof nothing;
-    /**
-     * Lets the viewer veto opening the image, which it does when the click is
-     * the tail end of a swipe. A host can veto it too, to show the image its own
-     * way instead of in a new tab.
-     */
-    private onClick;
-    private markLoaded;
-    private markFailed;
-    /**
-     * Tells the viewer what happened to this image, so it can pass failures on
-     * to the host. Bubbles because the viewer listens on the track, which is
-     * also where the slides it creates by hand during a drag end up.
-     */
-    private report;
-    /**
-     * Catches an image that finished before its listeners could fire, because
-     * the browser had already resolved the request (from the cache or a
-     * preload) by the time the element rendered.
-     *
-     * `complete` is true for a failed image as well as a loaded one, so the two
-     * are told apart by `naturalWidth`, which stays 0 when the load failed.
-     */
-    private checkAlreadyResolved;
-    static get styles(): CSSResultGroup;
-}
-//# sourceMappingURL=ia-imgview-slide.d.ts.map

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

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

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

@@ -1,225 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement, nothing, } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { msg } from '@lit/localize';
-import themeStyles from '../../themes/theme-styles.js';
-/**
- * A single image in the viewer's track.
- *
- * Owns everything about one image: its load state, its failure message, and
- * the link that opens the full-size file. The viewer creates these both from
- * its template and by hand during a drag, so the element works with no
- * per-instance setup beyond its properties.
- */
-let IAImageViewerSlide = class IAImageViewerSlide extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.loaded = false;
-        this.failed = false;
-        this.markLoaded = () => {
-            this.loaded = true;
-            this.failed = false;
-            this.report('imageLoaded');
-        };
-        this.markFailed = () => {
-            this.loaded = false;
-            this.failed = true;
-            this.report('imageFailed');
-        };
-    }
-    willUpdate(changed) {
-        if (changed.has('image')) {
-            this.loaded = false;
-            this.failed = false;
-        }
-    }
-    updated() {
-        this.checkAlreadyResolved();
-    }
-    render() {
-        if (!this.image)
-            return nothing;
-        const imageClasses = { 'main-image': true, loaded: this.loaded };
-        const linkClasses = { 'image-link': true, failed: this.failed };
-        return html `
-      <a
-        class=${classMap(linkClasses)}
-        href=${this.image.url}
-        target="_blank"
-        rel="noopener noreferrer"
-        @click=${this.onClick}
-      >
-        <img
-          class=${classMap(imageClasses)}
-          src=${this.image.url}
-          alt=${this.image.title ?? this.image.name}
-          data-image-name=${this.image.name}
-          draggable="false"
-          @load=${this.markLoaded}
-          @error=${this.markFailed}
-        />
-        <div class="loading-spinner"></div>
-        ${this.failed
-            ? html `<p class="image-failed">
-              ${msg('This image could not be loaded.')}
-            </p>`
-            : nothing}
-      </a>
-    `;
-    }
-    /**
-     * Lets the viewer veto opening the image, which it does when the click is
-     * the tail end of a swipe. A host can veto it too, to show the image its own
-     * way instead of in a new tab.
-     */
-    onClick(e) {
-        if (!this.image)
-            return;
-        const allowed = this.dispatchEvent(new CustomEvent('imageActivated', {
-            detail: { image: this.image },
-            bubbles: true,
-            cancelable: true,
-        }));
-        if (!allowed)
-            e.preventDefault();
-    }
-    /**
-     * Tells the viewer what happened to this image, so it can pass failures on
-     * to the host. Bubbles because the viewer listens on the track, which is
-     * also where the slides it creates by hand during a drag end up.
-     */
-    report(name) {
-        if (!this.image)
-            return;
-        this.dispatchEvent(new CustomEvent(name, { detail: { image: this.image }, bubbles: true }));
-    }
-    /**
-     * Catches an image that finished before its listeners could fire, because
-     * the browser had already resolved the request (from the cache or a
-     * preload) by the time the element rendered.
-     *
-     * `complete` is true for a failed image as well as a loaded one, so the two
-     * are told apart by `naturalWidth`, which stays 0 when the load failed.
-     */
-    checkAlreadyResolved() {
-        const img = this.imageElement;
-        if (!img || this.loaded || this.failed || !img.complete)
-            return;
-        if (img.naturalWidth > 0)
-            this.markLoaded();
-        else
-            this.markFailed();
-    }
-    static get styles() {
-        return [
-            themeStyles,
-            css `
-        :host {
-          --imgview-slide-spinner-color--: var(
-            --image-viewer-spinner-color,
-            rgba(255, 255, 255, 0.5)
-          );
-          --imgview-slide-spinner-track-color--: var(
-            --image-viewer-spinner-track-color,
-            rgba(255, 255, 255, 0.15)
-          );
-          --imgview-slide-text-color--: var(
-            --image-viewer-text-color,
-            var(--true-white)
-          );
-          --imgview-slide-fade-duration--: var(
-            --image-viewer-fade-duration,
-            0.2s
-          );
-
-          flex: 0 0 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          position: relative;
-        }
-
-        .image-link {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 100%;
-          cursor: pointer;
-        }
-
-        .main-image {
-          display: block;
-          max-height: 100%;
-          max-width: 100%;
-          object-fit: contain;
-          opacity: 0;
-          transition: opacity var(--imgview-slide-fade-duration--) ease;
-          user-select: none;
-        }
-
-        .main-image.loaded {
-          opacity: 1;
-        }
-
-        .main-image.loaded + .loading-spinner,
-        .image-link.failed .loading-spinner {
-          display: none;
-        }
-
-        .loading-spinner {
-          position: absolute;
-          width: 24px;
-          height: 24px;
-          border: 2px solid var(--imgview-slide-spinner-track-color--);
-          border-top-color: var(--imgview-slide-spinner-color--);
-          border-radius: 50%;
-          animation: spin 0.8s linear infinite;
-        }
-
-        @keyframes spin {
-          to {
-            transform: rotate(360deg);
-          }
-        }
-
-        .image-failed {
-          position: absolute;
-          margin: 0;
-          padding: 0 1.6rem;
-          color: var(--imgview-slide-text-color--);
-          font-size: 1.4rem;
-          text-align: center;
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-          .loading-spinner {
-            animation: none;
-          }
-
-          .main-image {
-            transition: none;
-          }
-        }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: Object })
-], IAImageViewerSlide.prototype, "image", void 0);
-__decorate([
-    query('.main-image')
-], IAImageViewerSlide.prototype, "imageElement", void 0);
-__decorate([
-    state()
-], IAImageViewerSlide.prototype, "loaded", void 0);
-__decorate([
-    state()
-], IAImageViewerSlide.prototype, "failed", void 0);
-IAImageViewerSlide = __decorate([
-    customElement('ia-imgview-slide')
-], IAImageViewerSlide);
-export { IAImageViewerSlide };
-//# sourceMappingURL=ia-imgview-slide.js.map

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

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

package/dist/src/elements/ia-image-viewer/image-viewer-gestures.d.ts

@@ -1,79 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { SlideDirection } from './models.js';
-/** What the gesture controller needs from the viewer it drives. */
-export type ImageViewerGestureHost = ReactiveControllerHost & {
-    readonly imageCount: number;
-    readonly currentIndex: number;
-    /** The element gestures are tracked against, once it has rendered. */
-    readonly imageArea?: HTMLElement;
-    /** The element a drag translates. */
-    readonly slideTrack?: HTMLElement;
-    /** Commits an in-flight slide animation so a new one starts from rest. */
-    settleIfAnimating(): void;
-    showNext(): void;
-    showPrevious(): void;
-    preloadAroundIndex(index: number): void;
-    /** Adds the neighbouring slides a drag reveals on either side. */
-    insertDragSlides(): void;
-    removeDragSlides(): void;
-    /** Advances to the neighbouring image a completed drag landed on. */
-    commitDrag(direction: SlideDirection): void;
-};
-/**
- * Touch, wheel and keyboard navigation for the image viewer.
- *
- * A drag is driven imperatively: it translates the track directly and asks the
- * viewer to insert neighbouring slides by hand, because a re-render mid-gesture
- * would replace the element the touch started on and the browser would fire
- * touchcancel.
- */
-export declare class ImageViewerGestures implements ReactiveController {
-    /** Whether a drag is in progress. The viewer reads this while rendering. */
-    dragging: boolean;
-    private host;
-    /**
-     * The element the touch and wheel listeners are currently on, so they can
-     * follow the image area when it's replaced. A boolean wouldn't: the area is
-     * removed whenever the image list empties, and a later refill renders a
-     * different element.
-     */
-    private listeningTo;
-    private touchStartX;
-    private touchStartY;
-    private touchStartTime;
-    /** Whether the current gesture has locked in as a horizontal swipe */
-    private swiping;
-    /** Set when a swipe completes, so the tap it ends on doesn't open the image */
-    private swipeHandled;
-    private dragOffsetX;
-    private wheelDeltaX;
-    private wheelAnimating;
-    private wheelAnimationEndTime;
-    constructor(host: ImageViewerGestureHost);
-    hostConnected(): void;
-    hostUpdated(): void;
-    hostDisconnected(): void;
-    /**
-     * Whether a swipe just ended on this tap, meaning the click that follows it
-     * should be ignored rather than treated as opening the image.
-     */
-    consumeSwipeTap(): boolean;
-    /** Lets wheel navigation resume once a slide animation has finished. */
-    animationSettled(): void;
-    /**
-     * Points the gesture listeners at the current image area, moving them off
-     * the previous one. The area isn't rendered until there are images to show,
-     * and it's torn down and rebuilt whenever the list empties and refills, so
-     * this runs on every update and re-attaches whenever the element changes.
-     */
-    private attachListeners;
-    private detachListeners;
-    private onTouchStart;
-    private onTouchMove;
-    private onTouchEnd;
-    /** Applies the drag offset to the track during touch gestures. */
-    private applyDragTransform;
-    private onWheel;
-    private onKeydown;
-}
-//# sourceMappingURL=image-viewer-gestures.d.ts.map

package/dist/src/elements/ia-image-viewer/image-viewer-gestures.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-viewer-gestures.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/image-viewer-gestures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAGtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,sBAAsB,GAAG;IAC5D,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAE5B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAE9B,sEAAsE;IACtE,QAAQ,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC;IAEjC,qCAAqC;IACrC,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC;IAElC,0EAA0E;IAC1E,iBAAiB,IAAI,IAAI,CAAC;IAE1B,QAAQ,IAAI,IAAI,CAAC;IAEjB,YAAY,IAAI,IAAI,CAAC;IAErB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAExC,kEAAkE;IAClE,gBAAgB,IAAI,IAAI,CAAC;IAEzB,gBAAgB,IAAI,IAAI,CAAC;IAEzB,qEAAqE;IACrE,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;CAC7C,CAAC;AA0BF;;;;;;;GAOG;AACH,qBAAa,mBAAoB,YAAW,kBAAkB;IAC5D,4EAA4E;IAC5E,QAAQ,UAAS;IAEjB,OAAO,CAAC,IAAI,CAAyB;IAErC;;;;;OAKG;IACH,OAAO,CAAC,WAAW,CAA4B;IAE/C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,cAAc,CAAK;IAE3B,sEAAsE;IACtE,OAAO,CAAC,OAAO,CAAS;IAExB,+EAA+E;IAC/E,OAAO,CAAC,YAAY,CAAS;IAE7B,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,cAAc,CAAS;IAE/B,OAAO,CAAC,qBAAqB,CAAK;gBAEtB,IAAI,EAAE,sBAAsB;IAKxC,aAAa,IAAI,IAAI;IAOrB,WAAW,IAAI,IAAI;IAInB,gBAAgB,IAAI,IAAI;IAKxB;;;OAGG;IACH,eAAe,IAAI,OAAO;IAM1B,wEAAwE;IACxE,gBAAgB,IAAI,IAAI;IAMxB;;;;;OAKG;IACH,OAAO,CAAC,eAAe;IAavB,OAAO,CAAC,eAAe;IAUvB,OAAO,CAAC,YAAY,CASlB;IAEF,OAAO,CAAC,WAAW,CAmBjB;IAEF,OAAO,CAAC,UAAU,CAmFhB;IAEF,kEAAkE;IAClE,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,OAAO,CAyBb;IAEF,OAAO,CAAC,SAAS,CAOf;CACH"}