@internetarchive/elements 0.3.0 → 0.4.0

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

@@ -0,0 +1,147 @@
+import { type CSSResultGroup, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit';
+import type { ImageViewerImage, SlideDirection } from './models.js';
+import './ia-imgview-slide.js';
+import './ia-imgview-controls.js';
+/**
+ * A swipeable image carousel.
+ *
+ * Shows one image at a time from a list, with previous/next buttons, a
+ * counter, keyboard arrows, horizontal wheel scrolling and touch swipes.
+ * Clicking an image opens it in a new tab.
+ *
+ * The viewer holds no opinion about where the images came from: it takes a
+ * plain list of names and URLs, and reports the image it lands on through
+ * `imageChanged` so a host can mirror that into its own URL or analytics.
+ *
+ * @fires imageChanged - The viewer settled on a new image.
+ * @fires imageLoaded - An image the viewer showed finished loading.
+ * @fires imageLoadFailed - An image the viewer showed could not be loaded.
+ *   Fires once per image until it loads successfully or the set changes.
+ * @fires imageActivated - An image was clicked. Cancelable: preventing it
+ *   stops the default of opening the image in a new tab.
+ */
+export declare class IAImageViewer extends LitElement {
+    images: ImageViewerImage[];
+    /**
+     * Name of the image to show. Changing it jumps straight to that image
+     * without animating. An unknown name shows the first image.
+     */
+    currentImageName?: string;
+    /** Read by the gesture controller, which tracks touches against it. */
+    imageArea?: HTMLElement;
+    /** Read by the gesture controller, which translates it during a drag. */
+    slideTrack?: HTMLElement;
+    /** Read by the gesture controller to navigate relative to the current image. */
+    currentIndex: number;
+    private animating;
+    /**
+     * Incremented when an animation is interrupted to force the track element to
+     * be recreated via the `keyed()` directive, which guarantees the CSS
+     * animation restarts even if the direction is the same.
+     */
+    private slideGeneration;
+    /** Which edge just wrapped, if any. Drives the glow indicator. */
+    private wrapEdge;
+    /**
+     * Images already reported as failed, so a broken image isn't counted again
+     * every time the viewer passes over it. Navigating back re-fires `error` on
+     * the recreated element, and the neighbouring slides staged during an
+     * animation or a drag load the same image too, so without this a single
+     * broken derivative reports several times a session.
+     *
+     * Cleared when the image set changes, which is the point a name stops
+     * standing for the same file.
+     */
+    private reportedFailures;
+    private slideTarget;
+    private slideDirection;
+    private gestures;
+    get imageCount(): number;
+    /** The image currently on screen, if there is one. */
+    get currentImage(): ImageViewerImage | undefined;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Where to land when the images or the requested name change.
+     *
+     * A new `currentImageName` is the host asking for a particular image, so it
+     * wins. A new `images` array on its own isn't: a host that builds its list
+     * in a getter hands over a fresh array on every render, which says nothing
+     * about the images having changed. So the viewer holds its place by name and
+     * only goes back to the start when the image it was showing is really gone.
+     */
+    private indexToShow;
+    render(): TemplateResult | typeof nothing;
+    private slideTemplate;
+    /**
+     * Announces the image to a screen reader, which otherwise gets nothing when
+     * the counter and the picture change under it.
+     */
+    private get announcementTemplate();
+    /**
+     * Passes a slide's load result on to the host, which is where reporting
+     * belongs. The slide's own events stop at this shadow root, so they're
+     * re-dispatched rather than allowed to escape.
+     */
+    private onImageLoaded;
+    private onImageFailed;
+    /**
+     * Decides whether a click on a slide opens the image.
+     *
+     * Two things can stop it: the click is the tail end of a swipe, or the host
+     * cancels the event to show the image its own way. The slide's event doesn't
+     * cross this shadow root, so it's re-raised here for the host to see, and a
+     * veto is passed back down to cancel the click.
+     */
+    private onImageActivated;
+    /**
+     * Inserts the neighbouring slides around the current one so the touch target
+     * element stays in the DOM (avoiding touchcancel). These aren't rendered
+     * from the template, so they're marked for the gesture controller to clean
+     * up. The dragging class shifts the track to centre on the middle slide.
+     */
+    insertDragSlides(): void;
+    removeDragSlides(): void;
+    private createDragSlide;
+    showNext(): void;
+    showPrevious(): void;
+    /**
+     * Starts the move to another image. With reduced motion there's no animation
+     * to wait on, so the move lands immediately: nothing would fire the
+     * `animationend` that otherwise commits it.
+     */
+    private moveTo;
+    /**
+     * Moves to the image a completed drag landed on. The drag has already
+     * animated the track there, so this only updates state.
+     */
+    commitDrag(direction: SlideDirection): void;
+    /**
+     * If an animation is in progress, immediately commit its target so the next
+     * animation starts from the right position. Bumps the generation key to
+     * force the track element to be recreated, which restarts the CSS animation.
+     */
+    settleIfAnimating(): void;
+    private onWrapGlowEnd;
+    private onSlideEnd;
+    /** Finishes a move, however it was driven. */
+    private settleAtCurrentIndex;
+    private emitImageChanged;
+    /**
+     * Preloads the next and previous images around `currentIndex` so the first
+     * navigation feels instant.
+     */
+    private preloadAdjacentImages;
+    /**
+     * Preloads images adjacent to the given index. Called both at rest (around
+     * `currentIndex`) and at the start of a move (around the target) so rapid
+     * navigation stays ahead of the browser cache.
+     *
+     * A preload that fails is deliberately not reported. These requests are
+     * speculative and the viewer may never show them, so counting them would
+     * inflate the failure rate with images nobody looked at. Navigating to a
+     * broken image renders a real slide, whose `error` reports it then.
+     */
+    preloadAroundIndex(index: number): void;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-image-viewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ia-image-viewer.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-image-viewer.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,UAAU,EACV,OAAO,EACP,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AASb,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAY,MAAM,UAAU,CAAC;AAE3E,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAChB,MAAM,EAAE,gBAAgB,EAAE,CAAM;IAE3D;;;OAGG;IACyB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEtD,uEAAuE;IACjD,SAAS,CAAC,EAAE,WAAW,CAAC;IAE9C,yEAAyE;IAClD,UAAU,CAAC,EAAE,WAAW,CAAC;IAEhD,gFAAgF;IACvE,YAAY,SAAK;IAEjB,OAAO,CAAC,SAAS,CAAS;IAEnC;;;;OAIG;IACM,OAAO,CAAC,eAAe,CAAK;IAErC,kEAAkE;IACzD,OAAO,CAAC,QAAQ,CAAyB;IAElD;;;;;;;;;OASG;IACH,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,WAAW,CAAuB;IAE1C,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,QAAQ,CAAiC;IAEjD,IAAI,UAAU,IAAI,MAAM,CAEvB;IAED,sDAAsD;IACtD,IAAI,YAAY,IAAI,gBAAgB,GAAG,SAAS,CAE/C;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAenD;;;;;;;;OAQG;IACH,OAAO,CAAC,WAAW;IAyBnB,MAAM,IAAI,cAAc,GAAG,OAAO,OAAO;IA6EzC,OAAO,CAAC,aAAa;IAIrB;;;OAGG;IACH,OAAO,KAAK,oBAAoB,GAW/B;IAED;;;;OAIG;IACH,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,aAAa;IASrB;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAcxB;;;;;OAKG;IACH,gBAAgB,IAAI,IAAI;IAgBxB,gBAAgB,IAAI,IAAI;IAOxB,OAAO,CAAC,eAAe;IASvB,QAAQ,IAAI,IAAI;IAKhB,YAAY,IAAI,IAAI;IAQpB;;;;OAIG;IACH,OAAO,CAAC,MAAM;IAmBd;;;OAGG;IACH,UAAU,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI;IAc3C;;;;OAIG;IACH,iBAAiB,IAAI,IAAI;IAMzB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,UAAU;IAMlB,8CAA8C;IAC9C,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,gBAAgB;IAUxB;;;OAGG;IACH,OAAO,CAAC,qBAAqB;IAI7B;;;;;;;;;OASG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUvC,MAAM,KAAK,MAAM,IAAI,cAAc,CAgJlC;CACF"}

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

@@ -0,0 +1,533 @@
+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 { keyed } from 'lit/directives/keyed.js';
+import { msg, str } from '@lit/localize';
+import themeStyles from '../../themes/theme-styles.js';
+import { prefersReducedMotion } from '../../util/prefers-reduced-motion.js';
+import { ImageViewerGestures } from './image-viewer-gestures.js';
+import './ia-imgview-slide.js';
+import './ia-imgview-controls.js';
+/**
+ * A swipeable image carousel.
+ *
+ * Shows one image at a time from a list, with previous/next buttons, a
+ * counter, keyboard arrows, horizontal wheel scrolling and touch swipes.
+ * Clicking an image opens it in a new tab.
+ *
+ * The viewer holds no opinion about where the images came from: it takes a
+ * plain list of names and URLs, and reports the image it lands on through
+ * `imageChanged` so a host can mirror that into its own URL or analytics.
+ *
+ * @fires imageChanged - The viewer settled on a new image.
+ * @fires imageLoaded - An image the viewer showed finished loading.
+ * @fires imageLoadFailed - An image the viewer showed could not be loaded.
+ *   Fires once per image until it loads successfully or the set changes.
+ * @fires imageActivated - An image was clicked. Cancelable: preventing it
+ *   stops the default of opening the image in a new tab.
+ */
+let IAImageViewer = class IAImageViewer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.images = [];
+        /** Read by the gesture controller to navigate relative to the current image. */
+        this.currentIndex = 0;
+        this.animating = false;
+        /**
+         * Incremented when an animation is interrupted to force the track element to
+         * be recreated via the `keyed()` directive, which guarantees the CSS
+         * animation restarts even if the direction is the same.
+         */
+        this.slideGeneration = 0;
+        /** Which edge just wrapped, if any. Drives the glow indicator. */
+        this.wrapEdge = null;
+        /**
+         * Images already reported as failed, so a broken image isn't counted again
+         * every time the viewer passes over it. Navigating back re-fires `error` on
+         * the recreated element, and the neighbouring slides staged during an
+         * animation or a drag load the same image too, so without this a single
+         * broken derivative reports several times a session.
+         *
+         * Cleared when the image set changes, which is the point a name stops
+         * standing for the same file.
+         */
+        this.reportedFailures = new Set();
+        this.slideTarget = null;
+        this.slideDirection = null;
+        this.gestures = new ImageViewerGestures(this);
+    }
+    get imageCount() {
+        return this.images.length;
+    }
+    /** The image currently on screen, if there is one. */
+    get currentImage() {
+        return this.images[this.currentIndex];
+    }
+    willUpdate(changed) {
+        if (changed.has('images') || changed.has('currentImageName')) {
+            const previous = changed.get('images');
+            this.currentIndex = this.indexToShow(changed, previous);
+            this.animating = false;
+            this.slideGeneration = 0;
+            this.slideTarget = null;
+            this.slideDirection = null;
+            this.wrapEdge = null;
+            this.reportedFailures.clear();
+            this.preloadAdjacentImages();
+        }
+    }
+    /**
+     * Where to land when the images or the requested name change.
+     *
+     * A new `currentImageName` is the host asking for a particular image, so it
+     * wins. A new `images` array on its own isn't: a host that builds its list
+     * in a getter hands over a fresh array on every render, which says nothing
+     * about the images having changed. So the viewer holds its place by name and
+     * only goes back to the start when the image it was showing is really gone.
+     */
+    indexToShow(changed, previousImages) {
+        if (changed.has('currentImageName') && this.currentImageName) {
+            const requested = this.images.findIndex((image) => image.name === this.currentImageName);
+            if (requested >= 0)
+                return requested;
+        }
+        const showing = previousImages?.[this.currentIndex]?.name;
+        if (showing) {
+            const stillThere = this.images.findIndex((image) => image.name === showing);
+            if (stillThere >= 0)
+                return stillThere;
+        }
+        const named = this.currentImageName
+            ? this.images.findIndex((image) => image.name === this.currentImageName)
+            : -1;
+        return named >= 0 ? named : 0;
+    }
+    render() {
+        if (this.images.length === 0)
+            return nothing;
+        const { dragging } = this.gestures;
+        const current = this.images[this.currentIndex];
+        const showControls = this.images.length > 1;
+        const trackClasses = {
+            'slide-track': true,
+            'sliding-next': this.animating && !dragging && this.slideDirection === 'next',
+            'sliding-prev': this.animating && !dragging && this.slideDirection === 'prev',
+            dragging,
+        };
+        const prevIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
+        const nextIndex = (this.currentIndex + 1) % this.images.length;
+        const slideTarget = this.animating && !dragging && this.slideTarget !== null
+            ? this.images[this.slideTarget]
+            : null;
+        const prevImage = dragging ? this.images[prevIndex] : slideTarget;
+        const nextImage = dragging ? this.images[nextIndex] : slideTarget;
+        const showPrev = dragging || (slideTarget !== null && this.slideDirection === 'prev');
+        const showNext = dragging || (slideTarget !== null && this.slideDirection === 'next');
+        const displayIndex = this.animating && this.slideTarget !== null
+            ? this.slideTarget
+            : this.currentIndex;
+        return html `
+      <div class="viewer">
+        <div class="image-area">
+          ${this.wrapEdge
+            ? html `<div
+                class="wrap-glow ${this.wrapEdge === 'start'
+                ? 'glow-start'
+                : 'glow-end'}"
+                @animationend=${this.onWrapGlowEnd}
+              ></div>`
+            : nothing}
+          ${keyed(this.slideGeneration, html `<div
+              class=${classMap(trackClasses)}
+              @animationend=${this.onSlideEnd}
+              @imageLoaded=${this.onImageLoaded}
+              @imageFailed=${this.onImageFailed}
+              @imageActivated=${this.onImageActivated}
+            >
+              ${showPrev && prevImage ? this.slideTemplate(prevImage) : nothing}
+              ${this.slideTemplate(current)}
+              ${showNext && nextImage ? this.slideTemplate(nextImage) : nothing}
+            </div>`)}
+        </div>
+        ${showControls
+            ? html `
+              <ia-imgview-controls
+                .currentIndex=${displayIndex}
+                .totalImages=${this.images.length}
+                @showPrevious=${this.showPrevious}
+                @showNext=${this.showNext}
+              ></ia-imgview-controls>
+            `
+            : nothing}
+        ${this.announcementTemplate}
+      </div>
+    `;
+    }
+    slideTemplate(image) {
+        return html `<ia-imgview-slide .image=${image}></ia-imgview-slide>`;
+    }
+    /**
+     * Announces the image to a screen reader, which otherwise gets nothing when
+     * the counter and the picture change under it.
+     */
+    get announcementTemplate() {
+        const current = this.images[this.currentIndex];
+        const position = msg(str `Image ${this.currentIndex + 1} of ${this.images.length}`);
+        const label = current?.title ?? current?.name;
+        return html `
+      <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        ${label ? `${position}: ${label}` : position}
+      </div>
+    `;
+    }
+    /**
+     * Passes a slide's load result on to the host, which is where reporting
+     * belongs. The slide's own events stop at this shadow root, so they're
+     * re-dispatched rather than allowed to escape.
+     */
+    onImageLoaded(e) {
+        // A load that succeeds clears the failure, so an image that breaks again
+        // later is reported again rather than swallowed as a repeat.
+        this.reportedFailures.delete(e.detail.image.name);
+        this.dispatchEvent(new CustomEvent('imageLoaded', { detail: { image: e.detail.image } }));
+    }
+    onImageFailed(e) {
+        const { image } = e.detail;
+        if (this.reportedFailures.has(image.name))
+            return;
+        this.reportedFailures.add(image.name);
+        this.dispatchEvent(new CustomEvent('imageLoadFailed', { detail: { image } }));
+    }
+    /**
+     * Decides whether a click on a slide opens the image.
+     *
+     * Two things can stop it: the click is the tail end of a swipe, or the host
+     * cancels the event to show the image its own way. The slide's event doesn't
+     * cross this shadow root, so it's re-raised here for the host to see, and a
+     * veto is passed back down to cancel the click.
+     */
+    onImageActivated(e) {
+        if (this.gestures.consumeSwipeTap()) {
+            e.preventDefault();
+            return;
+        }
+        const allowed = this.dispatchEvent(new CustomEvent('imageActivated', {
+            detail: { image: e.detail.image },
+            cancelable: true,
+        }));
+        if (!allowed)
+            e.preventDefault();
+    }
+    /**
+     * Inserts the neighbouring slides around the current one so the touch target
+     * element stays in the DOM (avoiding touchcancel). These aren't rendered
+     * from the template, so they're marked for the gesture controller to clean
+     * up. The dragging class shifts the track to centre on the middle slide.
+     */
+    insertDragSlides() {
+        const track = this.slideTrack;
+        if (!track)
+            return;
+        const prevIdx = (this.currentIndex - 1 + this.images.length) % this.images.length;
+        const nextIdx = (this.currentIndex + 1) % this.images.length;
+        track.insertBefore(this.createDragSlide(this.images[prevIdx]), track.firstChild);
+        track.appendChild(this.createDragSlide(this.images[nextIdx]));
+        track.classList.add('dragging');
+    }
+    removeDragSlides() {
+        const track = this.slideTrack;
+        if (!track)
+            return;
+        track.querySelectorAll('[data-drag-slide]').forEach((el) => el.remove());
+        track.classList.remove('dragging');
+    }
+    createDragSlide(image) {
+        const slide = document.createElement('ia-imgview-slide');
+        slide.image = image;
+        slide.dataset.dragSlide = '';
+        return slide;
+    }
+    showNext() {
+        this.settleIfAnimating();
+        this.moveTo((this.currentIndex + 1) % this.images.length, 'next');
+    }
+    showPrevious() {
+        this.settleIfAnimating();
+        this.moveTo((this.currentIndex - 1 + this.images.length) % this.images.length, 'prev');
+    }
+    /**
+     * Starts the move to another image. With reduced motion there's no animation
+     * to wait on, so the move lands immediately: nothing would fire the
+     * `animationend` that otherwise commits it.
+     */
+    moveTo(target, direction) {
+        const wraps = direction === 'next'
+            ? this.currentIndex === this.images.length - 1
+            : this.currentIndex === 0;
+        this.preloadAroundIndex(target);
+        if (prefersReducedMotion()) {
+            this.currentIndex = target;
+            this.settleAtCurrentIndex();
+            return;
+        }
+        this.slideTarget = target;
+        this.slideDirection = direction;
+        this.animating = true;
+        this.wrapEdge = wraps ? (direction === 'next' ? 'end' : 'start') : null;
+    }
+    /**
+     * Moves to the image a completed drag landed on. The drag has already
+     * animated the track there, so this only updates state.
+     */
+    commitDrag(direction) {
+        const wraps = direction === 'next'
+            ? this.currentIndex === this.images.length - 1
+            : this.currentIndex === 0;
+        const step = direction === 'next' ? 1 : -1;
+        this.currentIndex =
+            (this.currentIndex + step + this.images.length) % this.images.length;
+        if (wraps && !prefersReducedMotion()) {
+            this.wrapEdge = direction === 'next' ? 'end' : 'start';
+        }
+        this.emitImageChanged();
+    }
+    /**
+     * If an animation is in progress, immediately commit its target so the next
+     * animation starts from the right position. Bumps the generation key to
+     * force the track element to be recreated, which restarts the CSS animation.
+     */
+    settleIfAnimating() {
+        if (!this.animating || this.slideTarget === null)
+            return;
+        this.currentIndex = this.slideTarget;
+        this.slideGeneration++;
+    }
+    onWrapGlowEnd() {
+        this.wrapEdge = null;
+    }
+    onSlideEnd() {
+        if (this.slideTarget === null)
+            return;
+        this.currentIndex = this.slideTarget;
+        this.settleAtCurrentIndex();
+    }
+    /** Finishes a move, however it was driven. */
+    settleAtCurrentIndex() {
+        this.slideTarget = null;
+        this.slideDirection = null;
+        this.animating = false;
+        this.gestures.animationSettled();
+        this.emitImageChanged();
+        this.preloadAdjacentImages();
+    }
+    emitImageChanged() {
+        const image = this.images[this.currentIndex];
+        if (!image)
+            return;
+        this.dispatchEvent(new CustomEvent('imageChanged', {
+            detail: { image, index: this.currentIndex },
+        }));
+    }
+    /**
+     * Preloads the next and previous images around `currentIndex` so the first
+     * navigation feels instant.
+     */
+    preloadAdjacentImages() {
+        this.preloadAroundIndex(this.currentIndex);
+    }
+    /**
+     * Preloads images adjacent to the given index. Called both at rest (around
+     * `currentIndex`) and at the start of a move (around the target) so rapid
+     * navigation stays ahead of the browser cache.
+     *
+     * A preload that fails is deliberately not reported. These requests are
+     * speculative and the viewer may never show them, so counting them would
+     * inflate the failure rate with images nobody looked at. Navigating to a
+     * broken image renders a real slide, whose `error` reports it then.
+     */
+    preloadAroundIndex(index) {
+        if (this.images.length <= 1)
+            return;
+        const next = (index + 1) % this.images.length;
+        const prev = (index - 1 + this.images.length) % this.images.length;
+        for (const idx of [next, prev]) {
+            const img = new Image();
+            img.src = this.images[idx].url;
+        }
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --image-viewer-slide-duration--: var(
+            --image-viewer-slide-duration,
+            500ms
+          );
+          --image-viewer-glow-color--: var(
+            --image-viewer-glow-color,
+            rgba(255, 255, 255, 0.25)
+          );
+          /*
+           * The breakpoint the controls query against. Named so the query in
+           * ia-imgview-controls resolves to this host rather than to whatever
+           * container the consumer happens to have further up.
+           */
+          container: image-viewer / inline-size;
+
+          /*
+           * Size and placement are the host's business, set with ordinary CSS
+           * on the element. These are only defaults for a host that sets
+           * neither; a rule in the outer tree beats them.
+           */
+          display: block;
+          height: 100%;
+          margin: 0 auto;
+        }
+
+        .viewer {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .image-area {
+          position: relative;
+          flex: 1;
+          min-height: 0;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          touch-action: pan-y pinch-zoom;
+        }
+
+        .wrap-glow {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          width: 100px;
+          pointer-events: none;
+          z-index: 2;
+          animation: glow-fade 700ms ease-out both;
+        }
+
+        .glow-start {
+          left: 0;
+          background: linear-gradient(
+            to right,
+            var(--image-viewer-glow-color--),
+            transparent
+          );
+        }
+
+        .glow-end {
+          right: 0;
+          background: linear-gradient(
+            to left,
+            var(--image-viewer-glow-color--),
+            transparent
+          );
+        }
+
+        @keyframes glow-fade {
+          0% {
+            opacity: 0;
+          }
+          20% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }
+
+        .slide-track {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          flex-shrink: 0;
+        }
+
+        @keyframes slide-next {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(-100%);
+          }
+        }
+
+        @keyframes slide-prev {
+          from {
+            transform: translateX(-100%);
+          }
+          to {
+            transform: translateX(0);
+          }
+        }
+
+        .slide-track.dragging {
+          transform: translateX(-100%);
+        }
+
+        .slide-track.sliding-next {
+          animation: slide-next var(--image-viewer-slide-duration--) ease-in-out
+            both;
+        }
+
+        .slide-track.sliding-prev {
+          animation: slide-prev var(--image-viewer-slide-duration--) ease-in-out
+            both;
+        }
+
+        .sr-only {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          border: 0;
+          overflow: hidden;
+          white-space: nowrap;
+          clip-path: inset(50%);
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Array })
+], IAImageViewer.prototype, "images", void 0);
+__decorate([
+    property({ type: String })
+], IAImageViewer.prototype, "currentImageName", void 0);
+__decorate([
+    query('.image-area')
+], IAImageViewer.prototype, "imageArea", void 0);
+__decorate([
+    query('.slide-track')
+], IAImageViewer.prototype, "slideTrack", void 0);
+__decorate([
+    state()
+], IAImageViewer.prototype, "currentIndex", void 0);
+__decorate([
+    state()
+], IAImageViewer.prototype, "animating", void 0);
+__decorate([
+    state()
+], IAImageViewer.prototype, "slideGeneration", void 0);
+__decorate([
+    state()
+], IAImageViewer.prototype, "wrapEdge", void 0);
+IAImageViewer = __decorate([
+    customElement('ia-image-viewer')
+], IAImageViewer);
+export { IAImageViewer };
+//# sourceMappingURL=ia-image-viewer.js.map