@progressive-development/pd-content 1.0.3 → 1.1.1

package/dist/pd-gallery/PdGalleryLightbox.js

@@ -1,530 +0,0 @@
-import { LitElement, css, nothing, html } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import '@progressive-development/pd-dialog/pd-popup';
-
-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 PdGalleryLightbox extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.images = [];
-    this.currentIndex = 0;
-    this.open = false;
-    this._imageLoaded = false;
-    /** @ignore */
-    this._touchStartX = 0;
-    /** @ignore */
-    this._touchStartY = 0;
-    /** @ignore */
-    this._touchDeltaX = 0;
-    this._handleKeyDown = (e) => {
-      if (!this.open) return;
-      switch (e.key) {
-        case "ArrowLeft":
-          e.preventDefault();
-          this._prev();
-          break;
-        case "ArrowRight":
-          e.preventDefault();
-          this._next();
-          break;
-      }
-    };
-  }
-  static {
-    this.styles = [
-      css`
-      :host {
-        display: contents;
-      }
-
-      .lightbox-wrapper {
-        --pd-popup-default-display: none;
-        --pd-popup-modal-padding: 0;
-        --pd-popup-modal-padding-top: 0;
-        --pd-popup-modal-padding-bottom: 0;
-        --pd-popup-content-bg: transparent;
-        --pd-popup-max-width: 100vw;
-        --pd-popup-width: 100%;
-        --pd-popup-modal-slot-max-width: none;
-        --pd-popup-modal-slot-margin: 0;
-        --pd-popup-border-radius: 0;
-        --pd-popup-content-height: 100vh;
-        --pd-popup-modal-bg-rgba: var(
-          --pd-gallery-overlay-bg,
-          rgba(0, 0, 0, 0.92)
-        );
-        --pd-popup-z-index: var(--pd-gallery-lightbox-z, 200);
-        --pd-border-width: 0;
-        --pd-shadow-xl: none;
-      }
-
-      .lightbox {
-        display: flex;
-        flex-direction: column;
-        height: 100vh;
-        width: 100%;
-        position: relative;
-        user-select: none;
-        -webkit-user-select: none;
-      }
-
-      /* Top bar */
-      .lb-top-bar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0.75rem 1rem;
-        color: #fff;
-        font-size: 0.875rem;
-        flex-shrink: 0;
-        z-index: 2;
-      }
-
-      .lb-counter {
-        opacity: 0.8;
-      }
-
-      .lb-close {
-        background: none;
-        border: none;
-        color: #fff;
-        font-size: 1.75rem;
-        cursor: pointer;
-        padding: 0.25rem 0.5rem;
-        line-height: 1;
-        border-radius: 4px;
-        transition: background-color 0.15s ease;
-      }
-
-      .lb-close:hover,
-      .lb-close:focus-visible {
-        background-color: rgba(255, 255, 255, 0.15);
-      }
-
-      .lb-close:focus-visible {
-        outline: 2px solid rgba(255, 255, 255, 0.6);
-        outline-offset: 2px;
-      }
-
-      /* Navigation arrows */
-      .lb-nav {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 2;
-        background: rgba(0, 0, 0, 0.4);
-        border: none;
-        color: #fff;
-        width: var(--pd-gallery-nav-size, 44px);
-        height: var(--pd-gallery-nav-size, 44px);
-        border-radius: 50%;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.25rem;
-        transition: background-color 0.15s ease;
-      }
-
-      .lb-nav:hover {
-        background: rgba(0, 0, 0, 0.6);
-      }
-
-      .lb-nav:focus-visible {
-        outline: 2px solid rgba(255, 255, 255, 0.6);
-        outline-offset: 2px;
-      }
-
-      .lb-nav:disabled {
-        opacity: 0.3;
-        cursor: default;
-      }
-
-      .lb-prev {
-        left: 1rem;
-      }
-
-      .lb-next {
-        right: 1rem;
-      }
-
-      /* Main image area */
-      .lb-main {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        position: relative;
-        min-height: 0;
-        touch-action: pan-y;
-      }
-
-      .lb-main img {
-        max-width: calc(100% - 6rem);
-        max-height: 100%;
-        object-fit: contain;
-        opacity: 0;
-        transition: opacity 0.2s ease;
-      }
-
-      .lb-main img.loaded {
-        opacity: 1;
-      }
-
-      /* Caption */
-      .lb-caption {
-        text-align: center;
-        padding: 0.5rem 1rem;
-        color: var(--pd-gallery-caption-color, #fff);
-        flex-shrink: 0;
-      }
-
-      .lb-caption-title {
-        font-weight: 600;
-        font-size: 0.9375rem;
-      }
-
-      .lb-caption-desc {
-        font-size: 0.8125rem;
-        opacity: 0.75;
-        margin-top: 0.25rem;
-      }
-
-      /* Thumbnail strip */
-      .lb-thumbs {
-        display: flex;
-        gap: 0.5rem;
-        padding: 0.75rem 1rem;
-        overflow-x: auto;
-        justify-content: center;
-        flex-shrink: 0;
-        scrollbar-width: thin;
-        scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-      }
-
-      .lb-thumbs::-webkit-scrollbar {
-        height: 4px;
-      }
-
-      .lb-thumbs::-webkit-scrollbar-thumb {
-        background: rgba(255, 255, 255, 0.3);
-        border-radius: 2px;
-      }
-
-      .lb-thumb {
-        width: var(--pd-gallery-thumb-size, 56px);
-        height: var(--pd-gallery-thumb-size, 56px);
-        flex-shrink: 0;
-        border-radius: 4px;
-        object-fit: cover;
-        cursor: pointer;
-        opacity: 0.5;
-        border: 2px solid transparent;
-        transition:
-          opacity 0.15s ease,
-          border-color 0.15s ease;
-        padding: 0;
-        background: none;
-      }
-
-      .lb-thumb:hover {
-        opacity: 0.8;
-      }
-
-      .lb-thumb:focus-visible {
-        outline: 2px solid rgba(255, 255, 255, 0.6);
-        outline-offset: 2px;
-      }
-
-      .lb-thumb.active {
-        opacity: 1;
-        border-color: var(--pd-gallery-thumb-active-border, #fff);
-      }
-
-      .lb-thumb img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        border-radius: 2px;
-        pointer-events: none;
-      }
-
-      @media (max-width: 768px) {
-        .lb-nav {
-          width: 36px;
-          height: 36px;
-          font-size: 1rem;
-        }
-
-        .lb-prev {
-          left: 0.5rem;
-        }
-
-        .lb-next {
-          right: 0.5rem;
-        }
-
-        .lb-main img {
-          max-width: calc(100% - 4rem);
-        }
-
-        .lb-thumbs {
-          padding: 0.5rem;
-          gap: 0.375rem;
-        }
-
-        .lb-thumb {
-          width: 44px;
-          height: 44px;
-        }
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        .lb-main img {
-          transition: none;
-        }
-
-        .lb-thumb {
-          transition: none;
-        }
-      }
-    `
-    ];
-  }
-  show(index) {
-    if (index >= 0 && index < this.images.length) {
-      this.currentIndex = index;
-      this._imageLoaded = false;
-      this.open = true;
-      this._popup?.showPopup();
-      document.addEventListener("keydown", this._handleKeyDown);
-      this._preloadNeighbors();
-    }
-  }
-  hide() {
-    this.open = false;
-    this._popup?.hidePopup();
-    document.removeEventListener("keydown", this._handleKeyDown);
-    this.dispatchEvent(
-      new CustomEvent("gallery-close", {
-        bubbles: true,
-        composed: true,
-        detail: { index: this.currentIndex }
-      })
-    );
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("keydown", this._handleKeyDown);
-  }
-  render() {
-    if (!this.images.length) return nothing;
-    const current = this.images[this.currentIndex];
-    if (!current) return nothing;
-    const hasPrev = this.currentIndex > 0;
-    const hasNext = this.currentIndex < this.images.length - 1;
-    const showThumbs = this.images.length > 1;
-    return html`
-      <div class="lightbox-wrapper">
-        <pd-popup
-          hideCloseIcon
-          closeByEscape
-          closeByBackdrop
-          blockScroll
-          popupLabel="Image gallery lightbox"
-          @popup-close=${this._onPopupClose}
-        >
-          <div slot="content" class="lightbox">
-            <div class="lb-top-bar">
-              <span class="lb-counter" aria-live="polite">
-                ${this.currentIndex + 1} / ${this.images.length}
-              </span>
-              <button
-                class="lb-close"
-                aria-label="Close lightbox"
-                @click=${this.hide}
-              >
-                &times;
-              </button>
-            </div>
-
-            ${hasPrev ? html`<button
-                  class="lb-nav lb-prev"
-                  aria-label="Previous image"
-                  @click=${this._prev}
-                >
-                  &#8249;
-                </button>` : nothing}
-            ${hasNext ? html`<button
-                  class="lb-nav lb-next"
-                  aria-label="Next image"
-                  @click=${this._next}
-                >
-                  &#8250;
-                </button>` : nothing}
-
-            <div
-              class="lb-main"
-              @touchstart=${this._onTouchStart}
-              @touchmove=${this._onTouchMove}
-              @touchend=${this._onTouchEnd}
-            >
-              <img
-                src=${current.src}
-                alt=${current.alt}
-                srcset=${current.srcset || ""}
-                class=${this._imageLoaded ? "loaded" : ""}
-                @load=${this._onImageLoad}
-                draggable="false"
-              />
-            </div>
-
-            ${current.title || current.description ? html`
-                  <div class="lb-caption">
-                    ${current.title ? html`<div class="lb-caption-title">
-                          ${current.title}
-                        </div>` : nothing}
-                    ${current.description ? html`<div class="lb-caption-desc">
-                          ${current.description}
-                        </div>` : nothing}
-                  </div>
-                ` : nothing}
-            ${showThumbs ? html`
-                  <div
-                    class="lb-thumbs"
-                    role="tablist"
-                    aria-label="Thumbnail navigation"
-                  >
-                    ${this.images.map(
-      (img, i) => html`
-                        <button
-                          class="lb-thumb ${i === this.currentIndex ? "active" : ""}"
-                          role="tab"
-                          aria-selected=${i === this.currentIndex}
-                          aria-label="Image ${i + 1}"
-                          @click=${() => this._goTo(i)}
-                        >
-                          <img
-                            src=${img.thumbnail || img.src}
-                            alt=""
-                            loading="lazy"
-                          />
-                        </button>
-                      `
-    )}
-                  </div>
-                ` : nothing}
-          </div>
-        </pd-popup>
-      </div>
-    `;
-  }
-  _next() {
-    if (this.currentIndex < this.images.length - 1) {
-      this._goTo(this.currentIndex + 1);
-      this._dispatchNavigate("next");
-    }
-  }
-  _prev() {
-    if (this.currentIndex > 0) {
-      this._goTo(this.currentIndex - 1);
-      this._dispatchNavigate("prev");
-    }
-  }
-  _goTo(index) {
-    if (index < 0 || index >= this.images.length) return;
-    this.currentIndex = index;
-    this._imageLoaded = false;
-    this._preloadNeighbors();
-    this._scrollActiveThumb();
-  }
-  _preloadNeighbors() {
-    const indices = [this.currentIndex - 1, this.currentIndex + 1];
-    for (const i of indices) {
-      if (i >= 0 && i < this.images.length) {
-        const img = new Image();
-        img.src = this.images[i].src;
-      }
-    }
-  }
-  _scrollActiveThumb() {
-    requestAnimationFrame(() => {
-      const active = this._thumbsContainer?.querySelector(".lb-thumb.active");
-      active?.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "center"
-      });
-    });
-  }
-  _onImageLoad() {
-    this._imageLoaded = true;
-  }
-  _onPopupClose() {
-    if (this.open) {
-      this.hide();
-    }
-  }
-  _dispatchNavigate(direction) {
-    this.dispatchEvent(
-      new CustomEvent("gallery-navigate", {
-        bubbles: true,
-        composed: true,
-        detail: { index: this.currentIndex, direction }
-      })
-    );
-  }
-  // Touch/swipe handling
-  _onTouchStart(e) {
-    if (e.touches.length !== 1) return;
-    this._touchStartX = e.touches[0].clientX;
-    this._touchStartY = e.touches[0].clientY;
-    this._touchDeltaX = 0;
-  }
-  _onTouchMove(e) {
-    if (e.touches.length !== 1) return;
-    this._touchDeltaX = e.touches[0].clientX - this._touchStartX;
-    const deltaY = Math.abs(e.touches[0].clientY - this._touchStartY);
-    if (Math.abs(this._touchDeltaX) > deltaY) {
-      e.preventDefault();
-    }
-  }
-  _onTouchEnd() {
-    const threshold = 50;
-    if (this._touchDeltaX > threshold) {
-      this._prev();
-    } else if (this._touchDeltaX < -threshold) {
-      this._next();
-    }
-    this._touchDeltaX = 0;
-  }
-}
-__decorateClass([
-  property({ type: Array, attribute: false })
-], PdGalleryLightbox.prototype, "images");
-__decorateClass([
-  property({ type: Number })
-], PdGalleryLightbox.prototype, "currentIndex");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdGalleryLightbox.prototype, "open");
-__decorateClass([
-  state()
-], PdGalleryLightbox.prototype, "_imageLoaded");
-__decorateClass([
-  query("pd-popup")
-], PdGalleryLightbox.prototype, "_popup");
-__decorateClass([
-  query(".lb-thumbs")
-], PdGalleryLightbox.prototype, "_thumbsContainer");
-
-export { PdGalleryLightbox };

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

@@ -1,4 +0,0 @@
-export { PdGallery } from './pd-gallery.js';
-export { PdGalleryLightbox } from './pd-gallery-lightbox.js';
-export type { GalleryImage, GalleryMode, GalleryOpenDetail, GalleryCloseDetail, GalleryNavigateDetail, } from './types.js';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pd-gallery/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,YAAY,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,YAAY,CAAC"}

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

@@ -1,3 +0,0 @@
-import { PdGalleryLightbox } from './PdGalleryLightbox.js';
-export { PdGalleryLightbox };
-//# sourceMappingURL=pd-gallery-lightbox.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pd-gallery-lightbox.d.ts","sourceRoot":"","sources":["../../src/pd-gallery/pd-gallery-lightbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAO3D,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -1,3 +0,0 @@
-import { PdGallery } from './PdGallery.js';
-export { PdGallery };
-//# sourceMappingURL=pd-gallery.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pd-gallery.d.ts","sourceRoot":"","sources":["../../src/pd-gallery/pd-gallery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAO3C,OAAO,EAAE,SAAS,EAAE,CAAC"}

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

@@ -1,23 +0,0 @@
-export interface GalleryImage {
-    src: string;
-    alt: string;
-    title?: string;
-    description?: string;
-    thumbnail?: string;
-    srcset?: string;
-    width?: number;
-    height?: number;
-}
-export type GalleryMode = "grid" | "carousel" | "featured";
-export interface GalleryOpenDetail {
-    index: number;
-    image: GalleryImage;
-}
-export interface GalleryCloseDetail {
-    index: number;
-}
-export interface GalleryNavigateDetail {
-    index: number;
-    direction: "prev" | "next";
-}
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/pd-gallery/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAE3D,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;CAC5B"}

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

@@ -1,2 +0,0 @@
-export * from './pd-gallery/pd-gallery-lightbox'
-export {}

package/dist/pd-gallery-lightbox.js

@@ -1,8 +0,0 @@
-import { PdGalleryLightbox } from './pd-gallery/PdGalleryLightbox.js';
-
-const tag = "pd-gallery-lightbox";
-if (!customElements.get(tag)) {
-  customElements.define(tag, PdGalleryLightbox);
-}
-
-export { PdGalleryLightbox };

package/dist/pd-gallery.d.ts

@@ -1,2 +0,0 @@
-export * from './pd-gallery/pd-gallery'
-export {}

package/dist/pd-gallery.js

@@ -1,8 +0,0 @@
-import { PdGallery } from './pd-gallery/PdGallery.js';
-
-const tag = "pd-gallery";
-if (!customElements.get(tag)) {
-  customElements.define(tag, PdGallery);
-}
-
-export { PdGallery };