@progressive-development/pd-content 1.0.3 → 1.1.1

package/dist/pd-gallery/PdGallery.js

@@ -1,660 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}