@f-ewald/components 0.5.0 → 0.6.0

package/dist/photo-gallery.js

@@ -0,0 +1,620 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, queryAssignedElements, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { iconChevronLeft, iconChevronRight } from "./icons.js";
+import { tokens } from "./tokens.js";
+const transitionDurationMs = 250;
+const swipeThresholdPx = 40;
+const booleanAttribute = {
+    fromAttribute(value) {
+        return value !== null && value !== "false";
+    },
+};
+/**
+ * Responsive, accessible image carousel composed from declarative
+ * `gallery-item` children.
+ *
+ * @element photo-gallery
+ * @slot - `gallery-item` elements rendered as slides.
+ * @fires slide-change - The active image changed.
+ */
+let PhotoGallery = class PhotoGallery extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Zero-based active image index. */
+        this.currentIndex = 0;
+        /** Autoplay interval in milliseconds. Set to zero to disable autoplay. */
+        this.delay = 0;
+        /** Whether previous and next buttons are shown. */
+        this.showControls = true;
+        /** Whether a current/total counter is shown. */
+        this.showCounter = false;
+        /** Whether clickable slide indicators are shown. */
+        this.showIndicators = false;
+        /** Whether autoplay includes a built-in pause/play control. */
+        this.showAutoplayControl = true;
+        /** Whether autoplay is explicitly paused. */
+        this.paused = false;
+        /** CSS aspect ratio used by the image viewport. */
+        this.aspectRatio = "16 / 9";
+        /** How images fit within the stable viewport. */
+        this.objectFit = "cover";
+        this._previousIndex = null;
+        this._itemsVersion = 0;
+        this._hovered = false;
+        this._focusWithin = false;
+        this._nextChangeReason = null;
+        this._itemsChanged = false;
+        this._renderedIndex = 0;
+        /** Pauses or resumes scheduling when page visibility changes. */
+        this._handleVisibilityChange = () => {
+            this._restartAutoplay();
+        };
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        color: var(--ui-text, #0f172a);
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size, 0.875rem);
+      }
+      .gallery {
+        outline: none;
+      }
+      figure {
+        margin: 0;
+      }
+      .viewport {
+        position: relative;
+        overflow: hidden;
+        aspect-ratio: var(--photo-gallery-aspect-ratio, 16 / 9);
+        border-radius: var(--ui-radius, 0.5rem);
+        background: var(--ui-surface-muted, #f8fafc);
+        touch-action: pan-y;
+        user-select: none;
+      }
+      .gallery:focus-visible .viewport {
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .slides {
+        display: grid;
+        width: 100%;
+        height: 100%;
+      }
+      picture {
+        grid-area: 1 / 1;
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      picture img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: var(--photo-gallery-object-fit, cover);
+      }
+      .entering {
+        z-index: 2;
+        animation: gallery-fade-in 250ms ease both;
+      }
+      .leaving {
+        z-index: 1;
+        pointer-events: none;
+        animation: gallery-fade-out 250ms ease both;
+      }
+      .arrow-controls {
+        position: absolute;
+        z-index: 3;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.5rem;
+        pointer-events: none;
+      }
+      button {
+        border: 0;
+        font: inherit;
+        cursor: pointer;
+      }
+      button:focus-visible {
+        outline: none;
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .arrow-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        padding: 0;
+        color: var(--ui-surface, #fff);
+        background: var(--ui-overlay, rgb(15 23 42 / 0.45));
+        border-radius: 9999px;
+        pointer-events: auto;
+      }
+      .arrow-button:hover {
+        background: color-mix(in srgb, var(--ui-text, #0f172a) 70%, transparent);
+      }
+      figcaption {
+        padding: 0.5rem 0.25rem 0;
+        color: var(--ui-text-muted, #64748b);
+      }
+      .footer {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+        min-height: 2rem;
+        padding-top: 0.5rem;
+      }
+      .counter {
+        color: var(--ui-text-muted, #64748b);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        white-space: nowrap;
+      }
+      .indicators {
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        justify-content: center;
+        gap: 0.375rem;
+      }
+      .indicator {
+        width: 0.625rem;
+        height: 0.625rem;
+        padding: 0;
+        background: var(--ui-border, #e2e8f0);
+        border-radius: 9999px;
+      }
+      .indicator[aria-current="true"] {
+        background: var(--ui-primary, #4f46e5);
+      }
+      .autoplay-button {
+        padding: 0.25rem 0.625rem;
+        color: var(--ui-text, #0f172a);
+        background: var(--ui-surface-muted, #f8fafc);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+        white-space: nowrap;
+      }
+      .autoplay-button:hover {
+        background: var(--ui-surface, #fff);
+      }
+      slot {
+        display: none;
+      }
+      @keyframes gallery-fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+      @keyframes gallery-fade-out {
+        from {
+          opacity: 1;
+        }
+        to {
+          opacity: 0;
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .entering,
+        .leaving {
+          animation: none;
+        }
+      }
+    `,
+    ]; }
+    /** Starts observers and autoplay integration when the element connects. */
+    connectedCallback() {
+        super.connectedCallback();
+        this._metadataObserver ??= new MutationObserver(() => this._handleMetadataChange());
+        this._metadataObserver.observe(this, {
+            attributes: true,
+            attributeFilter: ["alt", "caption", "media", "src", "srcset"],
+            childList: true,
+            subtree: true,
+        });
+        document.addEventListener("visibilitychange", this._handleVisibilityChange);
+    }
+    /** Releases timers and observers when the element disconnects. */
+    disconnectedCallback() {
+        this._clearAutoplay();
+        this._clearTransition();
+        this._metadataObserver?.disconnect();
+        document.removeEventListener("visibilitychange", this._handleVisibilityChange);
+        super.disconnectedCallback();
+    }
+    /** Normalizes external index changes before rendering. */
+    willUpdate(changed) {
+        if (!changed.has("currentIndex"))
+            return;
+        const normalized = this._normalizeIndex(this.currentIndex);
+        if (normalized !== this.currentIndex) {
+            this.currentIndex = normalized;
+        }
+        const previousValue = changed.get("currentIndex");
+        if (previousValue === undefined || this._galleryItems.length === 0) {
+            this._nextChangeReason = null;
+            return;
+        }
+        const previousIndex = this._normalizeIndex(Number(previousValue));
+        if (previousIndex === normalized) {
+            this._nextChangeReason = null;
+            return;
+        }
+        const reason = this._nextChangeReason ?? "programmatic";
+        this._previousIndex = reason === "items" ? null : previousIndex;
+        this._pendingChange = {
+            previousIndex,
+            currentIndex: normalized,
+            item: this._galleryItems[normalized],
+            reason,
+        };
+        this._nextChangeReason = null;
+    }
+    /** Emits completed changes and keeps autoplay synchronized with properties. */
+    updated(changed) {
+        if (this._pendingChange) {
+            this.dispatchEvent(new CustomEvent("slide-change", {
+                bubbles: true,
+                composed: true,
+                detail: this._pendingChange,
+            }));
+            this._pendingChange = undefined;
+            this._scheduleTransitionCleanup();
+        }
+        if (changed.has("currentIndex") || changed.has("delay") || changed.has("paused") || this._itemsChanged) {
+            this._itemsChanged = false;
+            this._restartAutoplay();
+        }
+        this._activeItem = this._galleryItems[this.currentIndex];
+        this._renderedIndex = this.currentIndex;
+    }
+    /** Wraps any requested index into the current item range. */
+    _normalizeIndex(index) {
+        const count = this._galleryItems.length;
+        if (count === 0 || !Number.isFinite(index))
+            return 0;
+        return ((Math.trunc(index) % count) + count) % count;
+    }
+    /** Returns responsive variants declared directly under an item. */
+    _variantsFor(item) {
+        return Array.from(item.children).filter((child) => child.tagName.toLowerCase() === "gallery-item-variant");
+    }
+    /** Changes slides through the shared state and event path. */
+    _goTo(index, reason) {
+        const normalized = this._normalizeIndex(index);
+        if (this._galleryItems.length < 2 || normalized === this.currentIndex) {
+            this._restartAutoplay();
+            return;
+        }
+        this._nextChangeReason = reason;
+        this.currentIndex = normalized;
+    }
+    /** Moves to the previous image. */
+    _showPrevious(reason = "previous") {
+        this._goTo(this.currentIndex - 1, reason);
+    }
+    /** Moves to the next image. */
+    _showNext(reason = "next") {
+        this._goTo(this.currentIndex + 1, reason);
+    }
+    /** Toggles explicit autoplay pause state. */
+    _togglePaused() {
+        this.paused = !this.paused;
+    }
+    /** Clears and conditionally schedules the next autoplay advance. */
+    _restartAutoplay() {
+        this._clearAutoplay();
+        if (!this._canAutoplay())
+            return;
+        this._autoplayTimer = window.setTimeout(() => {
+            this._showNext("autoplay");
+        }, this.delay);
+    }
+    /** Reports whether autoplay may currently schedule a transition. */
+    _canAutoplay() {
+        return (this.delay > 0 &&
+            this._galleryItems.length > 1 &&
+            !this.paused &&
+            !this._hovered &&
+            !this._focusWithin &&
+            !document.hidden);
+    }
+    /** Clears the pending autoplay timeout. */
+    _clearAutoplay() {
+        if (this._autoplayTimer === undefined)
+            return;
+        window.clearTimeout(this._autoplayTimer);
+        this._autoplayTimer = undefined;
+    }
+    /** Removes the outgoing crossfade layer after the animation completes. */
+    _scheduleTransitionCleanup() {
+        this._clearTransition();
+        this._transitionTimer = window.setTimeout(() => {
+            this._previousIndex = null;
+            this._transitionTimer = undefined;
+        }, transitionDurationMs);
+    }
+    /** Clears pending transition cleanup. */
+    _clearTransition() {
+        if (this._transitionTimer === undefined)
+            return;
+        window.clearTimeout(this._transitionTimer);
+        this._transitionTimer = undefined;
+    }
+    /** Refreshes item metadata and clamps the active index after light-DOM changes. */
+    _handleMetadataChange() {
+        this._itemsChanged = true;
+        this._itemsVersion += 1;
+        const preserveActiveItem = this.currentIndex === this._renderedIndex;
+        const preservedIndex = preserveActiveItem && this._activeItem ? this._galleryItems.indexOf(this._activeItem) : -1;
+        const normalized = preservedIndex >= 0 ? preservedIndex : this._normalizeIndex(this.currentIndex);
+        if (normalized === this.currentIndex) {
+            const item = this._galleryItems[normalized];
+            const activeItemRemoved = Boolean(this._activeItem && !this._galleryItems.includes(this._activeItem));
+            if (item && activeItemRemoved) {
+                this._previousIndex = null;
+                this._pendingChange = {
+                    previousIndex: this._renderedIndex,
+                    currentIndex: normalized,
+                    item,
+                    reason: "items",
+                };
+            }
+            return;
+        }
+        this._nextChangeReason = "items";
+        this.currentIndex = normalized;
+    }
+    /** Refreshes item state after the default slot changes. */
+    _handleSlotChange() {
+        this._handleMetadataChange();
+    }
+    /** Temporarily pauses autoplay while the pointer is over the gallery. */
+    _handleMouseEnter() {
+        this._hovered = true;
+        this._restartAutoplay();
+    }
+    /** Resumes autoplay with a fresh delay after hover ends. */
+    _handleMouseLeave() {
+        this._hovered = false;
+        this._restartAutoplay();
+    }
+    /** Temporarily pauses autoplay while focus is inside the gallery. */
+    _handleFocusIn() {
+        this._focusWithin = true;
+        this._restartAutoplay();
+    }
+    /** Resumes autoplay with a fresh delay after focus leaves the gallery. */
+    _handleFocusOut() {
+        queueMicrotask(() => {
+            this._focusWithin = this.matches(":focus-within");
+            this._restartAutoplay();
+        });
+    }
+    /** Handles Left and Right arrow keyboard navigation. */
+    _handleKeyDown(event) {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            this._showPrevious("keyboard");
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            this._showNext("keyboard");
+        }
+    }
+    /** Records the starting point of a primary pointer gesture. */
+    _handlePointerDown(event) {
+        if (!event.isPrimary || event.button !== 0)
+            return;
+        if (event.composedPath().some((target) => target instanceof HTMLButtonElement))
+            return;
+        this._pointerStart = { id: event.pointerId, x: event.clientX, y: event.clientY };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }
+    /** Converts a sufficiently horizontal pointer gesture into navigation. */
+    _handlePointerUp(event) {
+        const start = this._pointerStart;
+        this._pointerStart = undefined;
+        if (!start || start.id !== event.pointerId)
+            return;
+        const deltaX = event.clientX - start.x;
+        const deltaY = event.clientY - start.y;
+        if (Math.abs(deltaX) < swipeThresholdPx || Math.abs(deltaX) <= Math.abs(deltaY))
+            return;
+        event.preventDefault();
+        if (deltaX < 0) {
+            this._showNext("swipe");
+            return;
+        }
+        this._showPrevious("swipe");
+    }
+    /** Cancels an incomplete pointer gesture. */
+    _handlePointerCancel() {
+        this._pointerStart = undefined;
+    }
+    /** Renders one responsive image layer for the crossfade stack. */
+    _renderPicture(index, state) {
+        const item = this._galleryItems[index];
+        if (!item)
+            return nothing;
+        const isPrevious = state === "previous";
+        const transitionClass = this._previousIndex === null ? "" : isPrevious ? "leaving" : "entering";
+        return html `
+      <picture class=${transitionClass} aria-hidden=${isPrevious ? "true" : nothing}>
+        ${this._variantsFor(item)
+            .filter((variant) => variant.srcset)
+            .map((variant) => html `<source media=${ifDefined(variant.media || undefined)} srcset=${variant.srcset} />`)}
+        <img src=${item.src} alt=${isPrevious ? "" : item.alt} draggable="false" />
+      </picture>
+    `;
+    }
+    /** Renders enabled counter, indicator, and autoplay controls. */
+    _renderFooter(itemCount) {
+        const showIndicators = this.showIndicators && itemCount > 1;
+        const showAutoplay = this.showAutoplayControl && this.delay > 0 && itemCount > 1;
+        if (!this.showCounter && !showIndicators && !showAutoplay)
+            return nothing;
+        return html `
+      <div class="footer">
+        ${this.showCounter
+            ? html `<span class="counter">${this.currentIndex + 1} / ${itemCount}</span>`
+            : nothing}
+        ${showIndicators
+            ? html `
+              <div class="indicators" role="group" aria-label="Choose image">
+                ${this._galleryItems.map((_item, index) => html `
+                    <button
+                      class="indicator"
+                      type="button"
+                      aria-label="Show image ${index + 1} of ${itemCount}"
+                      aria-current=${String(index === this.currentIndex)}
+                      @click=${() => this._goTo(index, "indicator")}
+                    ></button>
+                  `)}
+              </div>
+            `
+            : nothing}
+        ${showAutoplay
+            ? html `
+              <button
+                class="autoplay-button"
+                type="button"
+                aria-label=${this.paused ? "Resume slideshow" : "Pause slideshow"}
+                @click=${this._togglePaused}
+              >
+                ${this.paused ? "Play" : "Pause"}
+              </button>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    /** Renders the active image, navigation, caption, and hidden metadata slot. */
+    render() {
+        const itemCount = this._galleryItems.length;
+        const currentItem = this._galleryItems[this.currentIndex];
+        const objectFit = this.objectFit === "contain" ? "contain" : "cover";
+        const viewportStyles = {
+            "--photo-gallery-aspect-ratio": this.aspectRatio.trim() || "16 / 9",
+            "--photo-gallery-object-fit": objectFit,
+        };
+        return html `
+      <div
+        class="gallery"
+        role="region"
+        aria-roledescription="carousel"
+        aria-label="Photo gallery"
+        tabindex="0"
+        @keydown=${this._handleKeyDown}
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}
+      >
+        ${currentItem
+            ? html `
+              <figure>
+                <div
+                  class="viewport"
+                  style=${styleMap(viewportStyles)}
+                  @pointerdown=${this._handlePointerDown}
+                  @pointerup=${this._handlePointerUp}
+                  @pointercancel=${this._handlePointerCancel}
+                >
+                  <div class="slides">
+                    ${this._previousIndex === null
+                ? nothing
+                : this._renderPicture(this._previousIndex, "previous")}
+                    ${this._renderPicture(this.currentIndex, "current")}
+                  </div>
+                  ${this.showControls && itemCount > 1
+                ? html `
+                        <div class="arrow-controls">
+                          <button
+                            class="arrow-button previous"
+                            type="button"
+                            aria-label="Previous image"
+                            @click=${() => this._showPrevious()}
+                          >
+                            ${iconChevronLeft(24)}
+                          </button>
+                          <button
+                            class="arrow-button next"
+                            type="button"
+                            aria-label="Next image"
+                            @click=${() => this._showNext()}
+                          >
+                            ${iconChevronRight(24)}
+                          </button>
+                        </div>
+                      `
+                : nothing}
+                </div>
+                ${currentItem.caption ? html `<figcaption>${currentItem.caption}</figcaption>` : nothing}
+              </figure>
+              ${this._renderFooter(itemCount)}
+            `
+            : nothing}
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number, attribute: "current-index", reflect: true })
+], PhotoGallery.prototype, "currentIndex", void 0);
+__decorate([
+    property({ type: Number })
+], PhotoGallery.prototype, "delay", void 0);
+__decorate([
+    property({ attribute: "show-controls", converter: booleanAttribute })
+], PhotoGallery.prototype, "showControls", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-counter" })
+], PhotoGallery.prototype, "showCounter", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-indicators" })
+], PhotoGallery.prototype, "showIndicators", void 0);
+__decorate([
+    property({ attribute: "show-autoplay-control", converter: booleanAttribute })
+], PhotoGallery.prototype, "showAutoplayControl", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PhotoGallery.prototype, "paused", void 0);
+__decorate([
+    property({ attribute: "aspect-ratio" })
+], PhotoGallery.prototype, "aspectRatio", void 0);
+__decorate([
+    property({ attribute: "object-fit" })
+], PhotoGallery.prototype, "objectFit", void 0);
+__decorate([
+    queryAssignedElements({ selector: "gallery-item" })
+], PhotoGallery.prototype, "_galleryItems", void 0);
+__decorate([
+    state()
+], PhotoGallery.prototype, "_previousIndex", void 0);
+__decorate([
+    state()
+], PhotoGallery.prototype, "_itemsVersion", void 0);
+PhotoGallery = __decorate([
+    customElement("photo-gallery")
+], PhotoGallery);
+export { PhotoGallery };
+//# sourceMappingURL=photo-gallery.js.map