@progressive-development/pd-content 1.0.1 → 1.0.3

package/dist/pd-gallery/PdGallery.js

@@ -0,0 +1,660 @@
+import { LitElement, css, nothing, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import '../pd-gallery-lightbox.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdGallery extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.images = [];
+    this.mode = "grid";
+    this.columns = 3;
+    this.aspectRatio = "1/1";
+    this.lightbox = true;
+    this.showCaptions = false;
+    this.maxHeight = "";
+    this.autoplay = false;
+    this.autoplayInterval = 5e3;
+    this.loop = true;
+    this.showProgress = true;
+    this._carouselIndex = 0;
+    /** @ignore */
+    this._hovered = false;
+  }
+  static {
+    this.styles = [
+      css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      /* ====================== GRID ====================== */
+
+      .gallery-grid {
+        display: grid;
+        grid-template-columns: repeat(var(--pd-gallery-columns, 3), 1fr);
+        gap: var(--pd-gallery-gap, 0.75rem);
+      }
+
+      .grid-item {
+        position: relative;
+        overflow: hidden;
+        border-radius: var(--pd-gallery-radius, 8px);
+        cursor: pointer;
+        list-style: none;
+      }
+
+      .grid-item:focus-visible {
+        outline: 2px solid var(--pd-default-col, #333);
+        outline-offset: 2px;
+      }
+
+      .grid-item img {
+        width: 100%;
+        aspect-ratio: var(--pd-gallery-aspect-ratio, 1/1);
+        object-fit: cover;
+        display: block;
+        transition: transform 0.25s ease;
+      }
+
+      .grid-item:hover img {
+        transform: scale(var(--pd-gallery-hover-scale, 1.03));
+      }
+
+      .grid-caption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 0.5rem 0.75rem;
+        background: var(--pd-gallery-caption-bg, rgba(0, 0, 0, 0.6));
+        color: #fff;
+        font-size: 0.8125rem;
+        transform: translateY(100%);
+        transition: transform 0.2s ease;
+      }
+
+      .grid-item:hover .grid-caption,
+      .grid-caption.always-visible {
+        transform: translateY(0);
+      }
+
+      /* ===================== CAROUSEL ==================== */
+
+      .gallery-carousel {
+        position: relative;
+        width: 100%;
+      }
+
+      .carousel-track {
+        display: flex;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        scroll-behavior: var(--pd-gallery-carousel-transition, smooth);
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        gap: var(--pd-gallery-gap, 0.75rem);
+      }
+
+      .carousel-track::-webkit-scrollbar {
+        display: none;
+      }
+
+      .carousel-slide {
+        flex: 0 0 100%;
+        scroll-snap-align: center;
+        border-radius: var(--pd-gallery-radius, 8px);
+        overflow: hidden;
+        cursor: pointer;
+      }
+
+      .carousel-slide:focus-visible {
+        outline: 2px solid var(--pd-default-col, #333);
+        outline-offset: 2px;
+      }
+
+      .carousel-slide img {
+        width: 100%;
+        aspect-ratio: var(--pd-gallery-aspect-ratio, 16/9);
+        object-fit: cover;
+        display: block;
+      }
+
+      .carousel-nav {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        background: rgba(255, 255, 255, 0.9);
+        border: none;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.25rem;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        transition:
+          background-color 0.15s ease,
+          opacity 0.15s ease;
+        z-index: 1;
+      }
+
+      .carousel-nav:hover {
+        background: #fff;
+      }
+
+      .carousel-nav:focus-visible {
+        outline: 2px solid var(--pd-default-col, #333);
+        outline-offset: 2px;
+      }
+
+      .carousel-nav:disabled {
+        opacity: 0.3;
+        cursor: default;
+      }
+
+      .carousel-prev {
+        left: 0.75rem;
+      }
+
+      .carousel-next {
+        right: 0.75rem;
+      }
+
+      .carousel-dots {
+        display: flex;
+        justify-content: center;
+        gap: 0.5rem;
+        padding: 0.75rem 0;
+      }
+
+      .carousel-dot {
+        width: var(--pd-gallery-dot-size, 10px);
+        height: var(--pd-gallery-dot-size, 10px);
+        border-radius: 50%;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        background: var(--pd-gallery-dot-color, rgba(0, 0, 0, 0.25));
+        transition: background-color 0.15s ease;
+      }
+
+      .carousel-dot:focus-visible {
+        outline: 2px solid var(--pd-default-col, #333);
+        outline-offset: 2px;
+      }
+
+      .carousel-dot.active {
+        background: var(
+          --pd-gallery-dot-active-color,
+          var(--pd-default-col, #333)
+        );
+      }
+
+      .carousel-caption {
+        text-align: center;
+        padding: 0.5rem 0.75rem 0;
+        font-size: 0.875rem;
+      }
+
+      .carousel-caption-title {
+        font-weight: 600;
+      }
+
+      .carousel-caption-desc {
+        opacity: 0.7;
+        margin-top: 0.125rem;
+      }
+
+      /* ==================== FEATURED ==================== */
+
+      .gallery-featured {
+        position: relative;
+        overflow: hidden;
+        border-radius: var(--pd-gallery-radius, 8px);
+        cursor: pointer;
+      }
+
+      .gallery-featured:focus-visible {
+        outline: 2px solid var(--pd-default-col, #333);
+        outline-offset: 2px;
+      }
+
+      .gallery-featured img {
+        width: 100%;
+        max-height: var(--pd-gallery-featured-max-height, 500px);
+        object-fit: cover;
+        display: block;
+        transition: transform 0.25s ease;
+      }
+
+      .gallery-featured:hover img {
+        transform: scale(var(--pd-gallery-hover-scale, 1.03));
+      }
+
+      .featured-caption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 1rem 1.25rem;
+        background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+        color: #fff;
+      }
+
+      .featured-caption-title {
+        font-size: 1.125rem;
+        font-weight: 600;
+      }
+
+      .featured-caption-desc {
+        font-size: 0.875rem;
+        opacity: 0.85;
+        margin-top: 0.25rem;
+      }
+
+      /* ================= RESPONSIVE ================= */
+
+      @media (max-width: 768px) {
+        .gallery-grid {
+          grid-template-columns: repeat(2, 1fr);
+        }
+
+        .carousel-nav {
+          width: 34px;
+          height: 34px;
+          font-size: 1rem;
+        }
+      }
+
+      @media (max-width: 480px) {
+        .gallery-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .grid-item img,
+        .gallery-featured img {
+          transition: none;
+        }
+
+        .grid-caption {
+          transition: none;
+        }
+
+        .carousel-track {
+          scroll-behavior: auto;
+        }
+
+        .carousel-dot {
+          transition: none;
+        }
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._startAutoplay();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopAutoplay();
+    this._observer?.disconnect();
+  }
+  updated(changed) {
+    if (changed.has("mode") || changed.has("images")) {
+      this._carouselIndex = 0;
+      if (this.mode === "carousel") {
+        this._setupCarouselObserver();
+        this._startAutoplay();
+      } else {
+        this._stopAutoplay();
+        this._observer?.disconnect();
+      }
+    }
+    if (changed.has("columns")) {
+      this.style.setProperty("--pd-gallery-columns", String(this.columns));
+    }
+    if (changed.has("aspectRatio") && this.aspectRatio) {
+      this.style.setProperty("--pd-gallery-aspect-ratio", this.aspectRatio);
+    }
+    if (changed.has("maxHeight") && this.maxHeight) {
+      this.style.setProperty(
+        "--pd-gallery-featured-max-height",
+        this.maxHeight
+      );
+    }
+  }
+  render() {
+    if (!this.images.length) return nothing;
+    return html`
+      ${this._renderMode()}
+      ${this.lightbox ? html`<pd-gallery-lightbox
+            .images=${this.images}
+          ></pd-gallery-lightbox>` : nothing}
+    `;
+  }
+  _renderMode() {
+    switch (this.mode) {
+      case "carousel":
+        return this._renderCarousel();
+      case "featured":
+        return this._renderFeatured();
+      default:
+        return this._renderGrid();
+    }
+  }
+  // ==================== GRID ====================
+  _renderGrid() {
+    return html`
+      <div class="gallery-grid" role="list">
+        ${this.images.map(
+      (img, i) => html`
+            <div
+              class="grid-item"
+              role="listitem"
+              tabindex="0"
+              @click=${() => this._onImageClick(i)}
+              @keydown=${(e) => this._onItemKeyDown(e, i)}
+            >
+              <img
+                src=${img.src}
+                alt=${img.alt}
+                srcset=${img.srcset || ""}
+                loading="lazy"
+                draggable="false"
+              />
+              ${img.title ? html`<div
+                    class="grid-caption ${this.showCaptions ? "always-visible" : ""}"
+                  >
+                    ${img.title}
+                  </div>` : nothing}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  // ================== CAROUSEL ==================
+  _renderCarousel() {
+    const hasPrev = this.loop || this._carouselIndex > 0;
+    const hasNext = this.loop || this._carouselIndex < this.images.length - 1;
+    const current = this.images[this._carouselIndex];
+    return html`
+      <div
+        class="gallery-carousel"
+        @mouseenter=${this._onCarouselEnter}
+        @mouseleave=${this._onCarouselLeave}
+        @focusin=${this._onCarouselEnter}
+        @focusout=${this._onCarouselLeave}
+      >
+        <div class="carousel-track" @keydown=${this._onCarouselKeyDown}>
+          ${this.images.map(
+      (img, i) => html`
+              <div
+                class="carousel-slide"
+                tabindex="0"
+                data-index=${i}
+                @click=${() => this._onImageClick(i)}
+                @keydown=${(e) => this._onItemKeyDown(e, i)}
+              >
+                <img
+                  src=${img.src}
+                  alt=${img.alt}
+                  srcset=${img.srcset || ""}
+                  loading=${i < 2 ? "eager" : "lazy"}
+                  draggable="false"
+                />
+              </div>
+            `
+    )}
+        </div>
+
+        ${this.images.length > 1 ? html`
+              <button
+                class="carousel-nav carousel-prev"
+                ?disabled=${!hasPrev}
+                aria-label="Previous image"
+                @click=${this._carouselPrev}
+              >
+                &#8249;
+              </button>
+              <button
+                class="carousel-nav carousel-next"
+                ?disabled=${!hasNext}
+                aria-label="Next image"
+                @click=${this._carouselNext}
+              >
+                &#8250;
+              </button>
+            ` : nothing}
+        ${this.showCaptions && (current?.title || current?.description) ? html`
+              <div class="carousel-caption">
+                ${current.title ? html`<div class="carousel-caption-title">
+                      ${current.title}
+                    </div>` : nothing}
+                ${current.description ? html`<div class="carousel-caption-desc">
+                      ${current.description}
+                    </div>` : nothing}
+              </div>
+            ` : nothing}
+        ${this.showProgress && this.images.length > 1 ? html`
+              <div
+                class="carousel-dots"
+                role="tablist"
+                aria-label="Carousel navigation"
+              >
+                ${this.images.map(
+      (_, i) => html`
+                    <button
+                      class="carousel-dot ${i === this._carouselIndex ? "active" : ""}"
+                      role="tab"
+                      aria-selected=${i === this._carouselIndex}
+                      aria-label="Image ${i + 1}"
+                      @click=${() => this._carouselGoTo(i)}
+                    ></button>
+                  `
+    )}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+  _setupCarouselObserver() {
+    this._observer?.disconnect();
+    this.updateComplete.then(() => {
+      const track = this._carouselTrack;
+      if (!track) return;
+      this._observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              const index = Number(entry.target.dataset.index);
+              if (!isNaN(index)) {
+                this._carouselIndex = index;
+              }
+            }
+          }
+        },
+        { root: track, threshold: 0.5 }
+      );
+      track.querySelectorAll(".carousel-slide").forEach((slide) => {
+        this._observer.observe(slide);
+      });
+    });
+  }
+  _carouselPrev() {
+    if (this._carouselIndex > 0) {
+      this._carouselScrollTo(this._carouselIndex - 1);
+    } else if (this.loop) {
+      this._carouselScrollTo(this.images.length - 1);
+    }
+  }
+  _carouselNext() {
+    if (this._carouselIndex < this.images.length - 1) {
+      this._carouselScrollTo(this._carouselIndex + 1);
+    } else if (this.loop) {
+      this._carouselScrollTo(0);
+    }
+  }
+  _carouselGoTo(index) {
+    this._carouselScrollTo(index);
+  }
+  _carouselScrollTo(index) {
+    const track = this._carouselTrack;
+    if (!track) return;
+    const slide = track.children[index];
+    if (slide) {
+      slide.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center"
+      });
+    }
+  }
+  _onCarouselKeyDown(e) {
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      this._carouselPrev();
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      this._carouselNext();
+    }
+  }
+  _onCarouselEnter() {
+    this._hovered = true;
+    this._stopAutoplay();
+  }
+  _onCarouselLeave() {
+    this._hovered = false;
+    this._startAutoplay();
+  }
+  // ================== FEATURED ==================
+  _renderFeatured() {
+    const img = this.images[0];
+    if (!img) return nothing;
+    return html`
+      <div
+        class="gallery-featured"
+        tabindex="0"
+        @click=${() => this._onImageClick(0)}
+        @keydown=${(e) => this._onItemKeyDown(e, 0)}
+      >
+        <img
+          src=${img.src}
+          alt=${img.alt}
+          srcset=${img.srcset || ""}
+          draggable="false"
+        />
+        ${img.title || img.description ? html`
+              <div class="featured-caption">
+                ${img.title ? html`<div class="featured-caption-title">${img.title}</div>` : nothing}
+                ${img.description ? html`<div class="featured-caption-desc">
+                      ${img.description}
+                    </div>` : nothing}
+              </div>
+            ` : nothing}
+      </div>
+    `;
+  }
+  // ================== SHARED ==================
+  _onImageClick(index) {
+    const image = this.images[index];
+    if (!image) return;
+    this.dispatchEvent(
+      new CustomEvent("gallery-image-click", {
+        bubbles: true,
+        composed: true,
+        detail: { index, image }
+      })
+    );
+    if (this.lightbox && this._lightbox) {
+      this.dispatchEvent(
+        new CustomEvent("gallery-open", {
+          bubbles: true,
+          composed: true,
+          detail: { index, image }
+        })
+      );
+      this._lightbox.show(index);
+    }
+  }
+  _onItemKeyDown(e, index) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._onImageClick(index);
+    }
+  }
+  // ================== AUTOPLAY ==================
+  _startAutoplay() {
+    this._stopAutoplay();
+    if (this.autoplay && this.mode === "carousel" && !this._hovered) {
+      this._autoplayTimer = setInterval(() => {
+        this._carouselNext();
+      }, this.autoplayInterval);
+    }
+  }
+  _stopAutoplay() {
+    if (this._autoplayTimer) {
+      clearInterval(this._autoplayTimer);
+      this._autoplayTimer = void 0;
+    }
+  }
+}
+__decorateClass([
+  property({ type: Array, attribute: false })
+], PdGallery.prototype, "images");
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdGallery.prototype, "mode");
+__decorateClass([
+  property({ type: Number })
+], PdGallery.prototype, "columns");
+__decorateClass([
+  property({ type: String })
+], PdGallery.prototype, "aspectRatio");
+__decorateClass([
+  property({ type: Boolean })
+], PdGallery.prototype, "lightbox");
+__decorateClass([
+  property({ type: Boolean })
+], PdGallery.prototype, "showCaptions");
+__decorateClass([
+  property({ type: String })
+], PdGallery.prototype, "maxHeight");
+__decorateClass([
+  property({ type: Boolean })
+], PdGallery.prototype, "autoplay");
+__decorateClass([
+  property({ type: Number })
+], PdGallery.prototype, "autoplayInterval");
+__decorateClass([
+  property({ type: Boolean })
+], PdGallery.prototype, "loop");
+__decorateClass([
+  property({ type: Boolean })
+], PdGallery.prototype, "showProgress");
+__decorateClass([
+  state()
+], PdGallery.prototype, "_carouselIndex");
+__decorateClass([
+  query("pd-gallery-lightbox")
+], PdGallery.prototype, "_lightbox");
+__decorateClass([
+  query(".carousel-track")
+], PdGallery.prototype, "_carouselTrack");
+
+export { PdGallery };

package/dist/pd-gallery/PdGalleryLightbox.d.ts

@@ -0,0 +1,53 @@
+import { LitElement, nothing, CSSResultGroup } from 'lit';
+import { GalleryImage } from './types.js';
+/**
+ * Fullscreen lightbox for image galleries. Wraps pd-popup with
+ * keyboard navigation, touch swipe, thumbnail strip, and preloading.
+ *
+ * @tagname pd-gallery-lightbox
+ *
+ * @event gallery-navigate - Fired on prev/next navigation.
+ * @event gallery-close - Fired when lightbox closes.
+ *
+ * @cssprop --pd-gallery-overlay-bg - Lightbox overlay background. Default: `rgba(0,0,0,0.92)`.
+ * @cssprop --pd-gallery-lightbox-z - Z-index for lightbox. Default: `200`.
+ * @cssprop --pd-gallery-thumb-size - Thumbnail size. Default: `56px`.
+ * @cssprop --pd-gallery-thumb-active-border - Active thumbnail border color. Default: `#fff`.
+ * @cssprop --pd-gallery-nav-size - Navigation arrow size. Default: `44px`.
+ * @cssprop --pd-gallery-caption-color - Caption text color. Default: `#fff`.
+ */
+export declare class PdGalleryLightbox extends LitElement {
+    images: GalleryImage[];
+    currentIndex: number;
+    open: boolean;
+    /** @ignore */
+    private _imageLoaded;
+    /** @ignore */
+    private _popup;
+    /** @ignore */
+    private _thumbsContainer;
+    /** @ignore */
+    private _touchStartX;
+    /** @ignore */
+    private _touchStartY;
+    /** @ignore */
+    private _touchDeltaX;
+    static styles: CSSResultGroup;
+    show(index: number): void;
+    hide(): void;
+    disconnectedCallback(): void;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+    private _next;
+    private _prev;
+    private _goTo;
+    private _preloadNeighbors;
+    private _scrollActiveThumb;
+    private _onImageLoad;
+    private _onPopupClose;
+    private _dispatchNavigate;
+    private _handleKeyDown;
+    private _onTouchStart;
+    private _onTouchMove;
+    private _onTouchEnd;
+}
+//# sourceMappingURL=PdGalleryLightbox.d.ts.map

package/dist/pd-gallery/PdGalleryLightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdGalleryLightbox.d.ts","sourceRoot":"","sources":["../../src/pd-gallery/PdGalleryLightbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,6CAA6C,CAAC;AAErD,OAAO,KAAK,EACV,YAAY,EAGb,MAAM,YAAY,CAAC;AAEpB;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,iBAAkB,SAAQ,UAAU;IAE/C,MAAM,EAAE,YAAY,EAAE,CAAM;IAG5B,YAAY,SAAK;IAGjB,IAAI,UAAS;IAEb,cAAc;IAEd,OAAO,CAAC,YAAY,CAAS;IAE7B,cAAc;IAEd,OAAO,CAAC,MAAM,CAGZ;IAEF,cAAc;IAEd,OAAO,CAAC,gBAAgB,CAAe;IAEvC,cAAc;IACd,OAAO,CAAC,YAAY,CAAK;IACzB,cAAc;IACd,OAAO,CAAC,YAAY,CAAK;IACzB,cAAc;IACd,OAAO,CAAC,YAAY,CAAK;IAEzB,OAAgB,MAAM,EAAE,cAAc,CAmQpC;IAEF,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAWzB,IAAI,IAAI,IAAI;IAaH,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAwHf,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc,CAapB;IAGF,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,WAAW;CASpB"}