@oiz/stzh-components 2.11.0-beta1 → 2.11.0

package/dist/collection/components/stzh-gallery/stzh-gallery.e2e.js

@@ -0,0 +1,22 @@
+import { test } from "@playwright/test";
+import { visualDiff } from "../../../.build/test/utils";
+const URL = "components-gallery";
+const STORIES = [
+  "default",
+  "without-carousel",
+  "one-image-no-counter",
+  "grid",
+  "custom",
+];
+test.describe("gallery", () => {
+  STORIES.forEach((storyId) => {
+    test(`story ${storyId} visual diff`, async ({ page }) => {
+      await visualDiff({
+        storyId,
+        page,
+        url: URL
+      });
+    });
+  });
+});
+//# sourceMappingURL=stzh-gallery.e2e.js.map

package/dist/collection/components/stzh-gallery/stzh-gallery.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-gallery.e2e.js","sourceRoot":"","sources":["../../../../src/components/stzh-gallery/stzh-gallery.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAExD,MAAM,GAAG,GAAG,oBAAoB,CAAC;AAEjC,MAAM,OAAO,GAAG;EACd,SAAS;EACT,kBAAkB;EAClB,sBAAsB;EACtB,MAAM;EACN,QAAQ;CACT,CAAC;AAEF,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EAC5B,OAAO,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;IAC1B,IAAI,CAAC,SAAS,OAAO,cAAc,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;MACtD,MAAM,UAAU,CAAC;QACf,OAAO;QACP,IAAI;QACJ,GAAG,EAAE,GAAG;OACT,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from \"@playwright/test\";\nimport { visualDiff } from \"../../../.build/test/utils\";\n\nconst URL = \"components-gallery\";\n\nconst STORIES = [\n  \"default\",\n  \"without-carousel\",\n  \"one-image-no-counter\",\n  \"grid\",\n  \"custom\",\n];\n\ntest.describe(\"gallery\", () => {\n  STORIES.forEach((storyId) => {\n    test(`story ${storyId} visual diff`, async ({ page }) => {\n      await visualDiff({\n        storyId,\n        page,\n        url: URL\n      });\n    });\n  });\n});\n"]}

package/dist/collection/components/stzh-gallery/stzh-gallery.js

@@ -0,0 +1,410 @@
+import { Host, h, Fragment, } from "@stencil/core";
+import PhotoSwipeLightbox from "photoswipe/dist/photoswipe-lightbox.esm.js";
+import PhotoSwipe from "photoswipe/dist/photoswipe.esm.js";
+import PhotoSwipeDynamicCaption from "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js";
+import Close from "./assets/close.svg";
+import AngleLeft from "./assets/angle-left.svg";
+import AngleRight from "./assets/angle-right.svg";
+const CLASS_LIGHTBOX = "stzh-gallery__pswp";
+/**
+ * @slot - Slot for custom content if `variant="custom"` is used, lightbox will query for stzh-figure (this.itemElement) elements
+ */
+export class StzhGallery {
+  constructor() {
+    this.openCurrentCarouselSlide = () => {
+      this.lightbox.loadAndOpen(this.carouselElement.slide);
+    };
+    this.localization = undefined;
+    this.images = [];
+    this.variant = "carousel";
+    this.itemElement = "stzh-figure";
+  }
+  async openLightbox(index = 0) {
+    this.lightbox.loadAndOpen(index);
+  }
+  apploadListener() {
+    // resize if any stencil components are rendered when lightbox is open
+    if (this.lightbox && this.lightbox.pswp && this.lightbox.pswp.isOpen) {
+      this.lightbox.pswp.updateSize(true);
+    }
+  }
+  imagesWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._images = JSON.parse(newValue);
+    }
+    else {
+      this._images = newValue;
+    }
+    this._imagesLightboxDataSource = this._images.map((image, index) => {
+      let captionHtml = "";
+      const { lightboxHtml, heading, headingLightbox, caption, captionLightbox, copyright, hideCounter } = image;
+      if (lightboxHtml) {
+        captionHtml = lightboxHtml;
+      }
+      else if (heading || caption || headingLightbox || captionLightbox || copyright || !hideCounter) {
+        captionHtml = `
+          <div class="pswp__caption-wrapper">
+            <div class="pswp__caption-counter">${!hideCounter ? `${index + 1}/${this._images.length}` : ""}</div>
+            <div class="pswp__caption-text">
+              <div class="pswp__caption-heading">${headingLightbox || heading || ""}</div>
+              <div class="pswp__caption">
+                <span class="pswp__caption-text">${captionLightbox || caption || ""}</span>
+                <span class="pswp__caption-copyright">${copyright || ""}</span>
+              </div>
+            </div>
+          </div>
+        `;
+      }
+      return {
+        w: image.width,
+        h: image.height,
+        msrc: image.src,
+        src: image.srcLightbox || image.src,
+        srcset: image.srcsetLightbox,
+        thumbCropped: true,
+        captionHtml
+      };
+    });
+  }
+  initLightbox() {
+    if (this._images.length === 0) {
+      return;
+    }
+    this.lightbox = new PhotoSwipeLightbox({
+      // appendToEl: this.element,
+      // gallery: this.element, // not needed if we supply dataSource
+      dataSource: this._imagesLightboxDataSource,
+      pswpModule: PhotoSwipe,
+      arrowPrevSVG: AngleLeft,
+      arrowNextSVG: AngleRight,
+      closeSVG: Close,
+      zoom: false,
+      counter: false,
+      bgOpacity: 1,
+      mainClass: CLASS_LIGHTBOX,
+      closeOnVerticalDrag: false,
+      clickToCloseNonZoomable: false,
+      // translations
+      closeTitle: this.localization.closeTitle,
+      zoomTitle: this.localization.zoomTitle,
+      arrowPrevTitle: this.localization.arrowPrevTitle,
+      arrowNextTitle: this.localization.arrowNextTitle,
+      errorMsg: this.localization.errorMsg,
+      indexIndicatorSep: "/",
+      paddingFn: (viewportSize, _itemData, _index) => {
+        var _a, _b, _c, _d;
+        const captionHeight = ((_d = (_c = (_b = (_a = this.lightbox.pswp) === null || _a === void 0 ? void 0 : _a.currSlide) === null || _b === void 0 ? void 0 : _b.dynamicCaption) === null || _c === void 0 ? void 0 : _c.element) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
+        let top = 16;
+        let bottom = 16;
+        let side = 0;
+        if (viewportSize.x >= 800) {
+          top = 24;
+          bottom = 8;
+          side = 8 + 48 + 24;
+        }
+        else if (viewportSize.x >= 1024) {
+          top = 32;
+          bottom = 12;
+          side = 12 + 48 + 32;
+        }
+        else if (viewportSize.x >= 1260) {
+          top = 40;
+          bottom = 16;
+          side = 16 + 48 + 40;
+        }
+        if (captionHeight > 0) {
+          bottom = 0;
+        }
+        return {
+          top,
+          bottom,
+          left: side,
+          right: side,
+        };
+      },
+    });
+    let firstHidden;
+    let lastHidden;
+    const showHiddenDuringAnimation = (slide) => {
+      var _a;
+      (_a = this.carouselActionsElement) === null || _a === void 0 ? void 0 : _a.classList.remove("is-hidden-during-animation");
+      slide === null || slide === void 0 ? void 0 : slide.classList.remove("is-hidden-during-animation");
+    };
+    const hideHiddenDuringAnimation = (slide) => {
+      var _a;
+      (_a = this.carouselActionsElement) === null || _a === void 0 ? void 0 : _a.classList.add("is-hidden-during-animation");
+      slide === null || slide === void 0 ? void 0 : slide.classList.add("is-hidden-during-animation");
+    };
+    const stopPropagation = (event) => {
+      event.stopPropagation();
+    };
+    const updateSize = () => {
+      this.lightbox.pswp.updateSize(true);
+    };
+    const slides = Array.from(this.element.querySelectorAll(this.itemElement));
+    this.lightbox.addFilter("itemData", (itemData, index) => {
+      itemData.element = slides[index];
+      return itemData;
+    });
+    this.lightbox.addFilter('thumbEl', (thumbEl, data, _index) => {
+      var _a;
+      const el = (_a = data.element) === null || _a === void 0 ? void 0 : _a.querySelector('img');
+      if (el) {
+        return el;
+      }
+      return thumbEl;
+    });
+    this.lightbox.addFilter('numItems', () => {
+      return this._images.length;
+    });
+    this.lightbox.on("afterInit", () => {
+      firstHidden = this.lightbox.pswp.currSlide.data.element;
+      lastHidden = this.lightbox.pswp.currSlide.data.element;
+      ;
+      hideHiddenDuringAnimation(firstHidden);
+      if (this._images.length === 1) {
+        this.lightbox.pswp.element.classList.add("pswp--one-image");
+      }
+    });
+    this.lightbox.on("close", () => {
+      // can be null in "single" variant, when not every slide is in carousel or grid
+      if (this.lightbox.pswp.currSlide.data.element) {
+        lastHidden = this.lightbox.pswp.currSlide.data.element;
+      }
+      if (lastHidden !== firstHidden) {
+        showHiddenDuringAnimation(firstHidden);
+        hideHiddenDuringAnimation(lastHidden);
+      }
+    });
+    this.lightbox.on("destroy", () => {
+      showHiddenDuringAnimation(lastHidden);
+    });
+    this.lightbox.on("change", () => {
+      var _a;
+      // update carousel to same slide the lightshow shows
+      (_a = this.carouselElement) === null || _a === void 0 ? void 0 : _a.slideTo(this.lightbox.pswp.currIndex, "auto");
+      // enable scroll for caption div
+      this.lightbox.pswp.currSlide.dynamicCaption.element.addEventListener('scroll', stopPropagation);
+      this.lightbox.pswp.currSlide.dynamicCaption.element.addEventListener('wheel', stopPropagation);
+    });
+    // this.lightbox.addFilter('preventPointerEvent', (preventPointerEvent, originalEvent, pointerType) => {
+    //   // return true to preventDefault pointermove/pointerdown events
+    //   // (also applies to touchmove/mousemove)
+    //   console.log(preventPointerEvent, originalEvent, pointerType);
+    //   return false;
+    // });
+    this.lightbox.on('bindEvents', () => {
+      this.lightbox.pswp.element.addEventListener('stzhClamp', updateSize);
+      this.lightbox.pswp.element.addEventListener('stzhExpand', updateSize);
+      this.lightbox.pswp.element.addEventListener('stzhOpen', updateSize);
+      this.lightbox.pswp.element.addEventListener('stzhOpened', updateSize);
+      this.lightbox.pswp.element.addEventListener('stzhClose', updateSize);
+      this.lightbox.pswp.element.addEventListener('stzhClosed', updateSize);
+    });
+    new PhotoSwipeDynamicCaption(this.lightbox, {
+      type: 'below',
+      captionContent: (slide) => {
+        return slide.data.captionHtml;
+      },
+      mobileLayoutBreakpoint: () => {
+        return window.innerWidth < 800;
+      },
+      // if enabled, the image will always be vertically centered in the remaining space between the caption and the rest of the viewport.
+      // If set to false (default value) - the image will lift up only if the caption does not fit below.
+      // verticallyCenterImage: false,
+      // when the caption x position is less than this value, it'll get class pswp__dynamic-caption--on-hor-edge. You may use it to apply different styling, such as horizontal padding.
+      // horizontalEdgeThreshold: 20
+      // a ratio defines the amount of horizontal empty space before the mobile caption switches to an "overlap" layout. 
+      // For example, if it's set to 0.3 - the caption will start overlapping the image when more than 30% of horizontal space is not occupied by an image. If you set it to 0 - the caption will always overlap. If you set it to 1 - the caption will constantly shift the image (unless it's taller than the viewport).
+      mobileCaptionOverlapRatio: 1
+    });
+    this.lightbox.init();
+  }
+  // componentShouldUpdate(_newValue, _oldValue, prop: string) {
+  //   return ["isOpen"].includes(prop) === false;
+  // }
+  async componentWillLoad() {
+    this.imagesWatcher(this.images);
+    if (!this.localization) {
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "gallery");
+    }
+  }
+  async componentWillUpdate() {
+    if (this.lightbox) {
+      this.lightbox.destroy();
+      this.lightbox = null;
+    }
+  }
+  componentDidRender() {
+    if (!this.lightbox) {
+      this.initLightbox();
+    }
+  }
+  disconnectedCallback() {
+    if (this.lightbox) {
+      this.lightbox.destroy();
+      this.lightbox = null;
+    }
+  }
+  renderFigure(image, index) {
+    const total = this._images.length;
+    return (h("stzh-figure", { class: "stzh-gallery__slide", caption: image.caption, heading: image.heading, counter: !image.hideCounter
+        ? `${index + 1}/${total}`
+        : "" }, h("stzh-ratio", { onClick: (event) => {
+        event.preventDefault();
+        this.openLightbox(index);
+      } }, h("img", { loading: "lazy", src: image.src, alt: (image.alt || this.localization.defaultAlt || '')
+        .replace(/\{current\}/, (index + 1).toString())
+        .replace(/\{total\}/, total.toString()) }), (this.variant === "single" || this.variant === "grid") &&
+      h("stzh-hspace", { class: "stzh-gallery__actions", justify: "end", items: "end", size: "xsmall" }, h("stzh-button", { variant: "secondary", size: "small", icon: "expand", label: this.localization.openLightbox, "icon-only": true, onClick: () => {
+          this.openLightbox(index);
+        } })))));
+  }
+  render() {
+    const classes = {
+      "stzh-gallery": true,
+      [`stzh-gallery--${this.variant}`]: !!this.variant,
+    };
+    return (h(Host, null, h("div", { class: classes }, (this.variant === "single" || this._images.length === 1) &&
+      h(Fragment, null, this.renderFigure(this._images[0], 0)), (this.variant === "grid" && this._images.length > 0) &&
+      h(Fragment, null, this._images.map((image, index) => this.renderFigure(image, index))), (this.variant === "carousel" && this._images.length > 1) &&
+      h("stzh-carousel", { ref: (el) => (this.carouselElement = el) }, h("stzh-ratio", { ref: (el) => (this.carouselActionsElement = el), slot: "actions", class: "stzh-gallery__carousel-actions" }, h("stzh-hspace", { justify: "end", items: "end", size: "xsmall" }, h("stzh-show", { small: true }, h("stzh-buttongroup", null, h("stzh-button", { "data-stzh-carousel-previous": true, variant: "secondary", size: "small", icon: "angle-left", label: this.localization.arrowPrevTitle, "icon-only": true }), h("stzh-button", { "data-stzh-carousel-next": true, variant: "secondary", size: "small", icon: "angle-right", label: this.localization.arrowNextTitle, "icon-only": true }))), h("stzh-button", { variant: "secondary", size: "small", icon: "expand", label: this.localization.openLightbox, "icon-only": true, onClick: this.openCurrentCarouselSlide }))), this._images.map((image, index) => this.renderFigure(image, index))), h("slot", null))));
+  }
+  static get is() { return "stzh-gallery"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-gallery.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-gallery.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhGalleryLocalizedText",
+          "resolved": "StzhLocaleComponent & { closeTitle: string; zoomTitle: string; arrowPrevTitle: string; arrowNextTitle: string; errorMsg: string; defaultAlt: string; openLightbox: string; }",
+          "references": {
+            "StzhGalleryLocalizedText": {
+              "location": "import",
+              "path": "./stzh-gallery.localization",
+              "id": "src/components/stzh-gallery/stzh-gallery.localization.ts::StzhGalleryLocalizedText"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings"
+        }
+      },
+      "images": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhGalleryItem[] | string",
+          "resolved": "StzhGalleryItem[] | string",
+          "references": {
+            "StzhGalleryItem": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhGalleryItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Images in gallery.\nArray of objects that must at least include `width`, `height` and `src` attribute:\n`[{\"width\": 2522, \"height\": 1075, \"src\": \"media/images/example.jpg\"}, {\"width\": 2050, \"height\": 1367, \"src\": \"media/images/example2.jpg\"}]`\n\nPossible other optional properties are:\n`alt`: Alternative image description\n/ `srcLightbox`: `src` for img tag inside lightbox (overwrites `src`)\n/ `srcsetLightbox`: `srcset` for img tag inside lightbox\n/ `copyright`: Copyright inside caption\n/ `heading`: Heading inside caption\n/ `headingLightbox`: Alternative heading for lightbox (overwrites `heading`)\n/ `caption`: Caption\n/ `captionLightbox`: Caption for lightbox (overwrites `caption`)\n/ `lightboxHtml`: Alternative html content for lightbox caption\n/ `hideCounter`: Whether to hide counter"
+        },
+        "attribute": "images",
+        "reflect": false,
+        "defaultValue": "[]"
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"carousel\" | \"single\" | \"grid\" | \"custom\"",
+          "resolved": "\"carousel\" | \"custom\" | \"grid\" | \"single\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant:\n`carousel`: every image is displayed inside a carousel (default mode with more than on picture)\n/ `single`: only one image is shown without carousel functionality (other images only reachable by lightbox)\n/ `grid`: every image is displayed inside a grid\n/ `custom`: nothing is rendered, only lightbox will be initialized, `stzh-figure` (`this.itemElement`) can be slotted in"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "\"carousel\""
+      },
+      "itemElement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Preview item that will be looked up and mapped to images in lightbox."
+        },
+        "attribute": "item-element",
+        "reflect": false,
+        "defaultValue": "\"stzh-figure\""
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "openLightbox": {
+        "complexType": {
+          "signature": "(index?: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "images",
+        "methodName": "imagesWatcher"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "appload",
+        "method": "apploadListener",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=stzh-gallery.js.map

package/dist/collection/components/stzh-gallery/stzh-gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-gallery.js","sourceRoot":"","sources":["../../../../src/components/stzh-gallery/stzh-gallery.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Listen,\n  Prop,\n  Watch,\n  Fragment,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  StzhGalleryItem\n} from \"../../index\";\n\nimport { StzhGalleryLocalizedText } from \"./stzh-gallery.localization\";\n\nimport {  } from \"photoswipe\";\n\nimport PhotoSwipeLightbox from \"photoswipe/dist/photoswipe-lightbox.esm.js\";\nimport PhotoSwipe from \"photoswipe/dist/photoswipe.esm.js\";\nimport PhotoSwipeDynamicCaption from 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.esm.js';\n\nimport Close from \"./assets/close.svg\";\nimport AngleLeft from \"./assets/angle-left.svg\";\nimport AngleRight from \"./assets/angle-right.svg\";\n\nconst CLASS_LIGHTBOX = \"stzh-gallery__pswp\";\n\ntype LightboxDataItem = {\n  w: number\n  h: number\n  msrc: string\n  src: string\n  thumbCropped: boolean\n  captionHtml: string\n};\n\n/**\n * @slot - Slot for custom content if `variant=\"custom\"` is used, lightbox will query for stzh-figure (this.itemElement) elements\n */\n@Component({\n  tag: \"stzh-gallery\",\n  styleUrl: \"stzh-gallery.scss\"\n})\nexport class StzhGallery {\n  /** Translation strings */\n  @Prop() localization: StzhGalleryLocalizedText;\n\n  /**\n   * Images in gallery.\n   * Array of objects that must at least include `width`, `height` and `src` attribute:\n   * `[{\"width\": 2522, \"height\": 1075, \"src\": \"media/images/example.jpg\"}, {\"width\": 2050, \"height\": 1367, \"src\": \"media/images/example2.jpg\"}]`\n   *\n   * Possible other optional properties are:\n   * `alt`: Alternative image description\n   * / `srcLightbox`: `src` for img tag inside lightbox (overwrites `src`)\n   * / `srcsetLightbox`: `srcset` for img tag inside lightbox\n   * / `copyright`: Copyright inside caption\n   * / `heading`: Heading inside caption\n   * / `headingLightbox`: Alternative heading for lightbox (overwrites `heading`)\n   * / `caption`: Caption\n   * / `captionLightbox`: Caption for lightbox (overwrites `caption`)\n   * / `lightboxHtml`: Alternative html content for lightbox caption\n   * / `hideCounter`: Whether to hide counter\n   */\n  @Prop() images: StzhGalleryItem[] | string = [];\n  private _images: StzhGalleryItem[];\n  private _imagesLightboxDataSource: LightboxDataItem[];\n\n  /**\n   * Variant:\n   * `carousel`: every image is displayed inside a carousel (default mode with more than on picture)\n   * / `single`: only one image is shown without carousel functionality (other images only reachable by lightbox)\n   * / `grid`: every image is displayed inside a grid\n   * / `custom`: nothing is rendered, only lightbox will be initialized, `stzh-figure` (`this.itemElement`) can be slotted in\n   */\n  @Prop() variant: \"carousel\" | \"single\" | \"grid\" | \"custom\" = \"carousel\";\n\n  /** Preview item that will be looked up and mapped to images in lightbox. */\n  @Prop() itemElement: string = \"stzh-figure\";\n\n  @Element() element: HTMLStzhGalleryElement;\n\n  @Method()\n  async openLightbox(index: number = 0) {\n    this.lightbox.loadAndOpen(index);\n  }\n\n  @Listen(\"appload\", { target: \"window\" })\n  apploadListener() {\n    // resize if any stencil components are rendered when lightbox is open\n    if (this.lightbox && this.lightbox.pswp && this.lightbox.pswp.isOpen) {\n      this.lightbox.pswp.updateSize(true);\n    }\n  }\n\n  @Watch(\"images\")\n  imagesWatcher(newValue: StzhGalleryItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._images = JSON.parse(newValue);\n    } else {\n      this._images = newValue;\n    }\n\n    this._imagesLightboxDataSource = this._images.map((image, index) => {\n      let captionHtml = \"\";\n\n      const {\n        lightboxHtml,\n        heading,\n        headingLightbox,\n        caption,\n        captionLightbox,\n        copyright,\n        hideCounter\n      } = image;\n\n      if (lightboxHtml) {\n        captionHtml = lightboxHtml;\n      } else if (heading || caption || headingLightbox || captionLightbox || copyright || !hideCounter) {\n        captionHtml = `\n          <div class=\"pswp__caption-wrapper\">\n            <div class=\"pswp__caption-counter\">${!hideCounter ? `${index+1}/${this._images.length}` : \"\"}</div>\n            <div class=\"pswp__caption-text\">\n              <div class=\"pswp__caption-heading\">${headingLightbox || heading || \"\"}</div>\n              <div class=\"pswp__caption\">\n                <span class=\"pswp__caption-text\">${captionLightbox || caption || \"\"}</span>\n                <span class=\"pswp__caption-copyright\">${copyright || \"\"}</span>\n              </div>\n            </div>\n          </div>\n        `;\n      }\n\n      return {\n        w: image.width,\n        h: image.height,\n        msrc: image.src,\n        src: image.srcLightbox || image.src,\n        srcset: image.srcsetLightbox,\n        thumbCropped: true,\n        captionHtml\n      };\n    });\n  }\n\n  private lightbox: any;\n  private carouselElement: HTMLStzhCarouselElement;\n  private carouselActionsElement: HTMLElement;\n\n  private openCurrentCarouselSlide = () => {\n    this.lightbox.loadAndOpen(this.carouselElement.slide);\n  }\n\n  initLightbox() {\n    if (this._images.length === 0) {\n      return;\n    }\n\n    this.lightbox = new PhotoSwipeLightbox({\n      // appendToEl: this.element,\n      // gallery: this.element, // not needed if we supply dataSource\n      dataSource: this._imagesLightboxDataSource,\n      pswpModule: PhotoSwipe,\n      arrowPrevSVG: AngleLeft,\n      arrowNextSVG: AngleRight,\n      closeSVG: Close,\n      zoom: false,\n      counter: false,\n      bgOpacity: 1,\n      mainClass: CLASS_LIGHTBOX,\n      closeOnVerticalDrag: false,\n      clickToCloseNonZoomable: false,\n\n      // translations\n      closeTitle: this.localization.closeTitle,\n      zoomTitle: this.localization.zoomTitle,\n      arrowPrevTitle: this.localization.arrowPrevTitle,\n      arrowNextTitle: this.localization.arrowNextTitle,\n      errorMsg: this.localization.errorMsg,\n      indexIndicatorSep: \"/\",\n\n      paddingFn: (viewportSize, _itemData, _index) => {\n        const captionHeight = this.lightbox.pswp?.currSlide?.dynamicCaption?.element?.offsetHeight || 0;\n\n        let top = 16;\n        let bottom = 16;\n        let side = 0;\n\n        if (viewportSize.x >= 800) {\n          top = 24;\n          bottom = 8;\n          side = 8 + 48 + 24;\n        } else if (viewportSize.x >= 1024) {\n          top = 32;\n          bottom = 12;\n          side = 12 + 48 + 32;\n        } else if (viewportSize.x >= 1260) {\n          top = 40;\n          bottom = 16;\n          side = 16 + 48 + 40;\n        }\n\n        if (captionHeight > 0) {\n          bottom = 0;\n        }\n\n        return {\n          top,\n          bottom,\n          left: side,\n          right: side,\n        };\n      },\n    });\n\n    let firstHidden;\n    let lastHidden;\n\n    const showHiddenDuringAnimation = (slide) => {\n      this.carouselActionsElement?.classList.remove(\"is-hidden-during-animation\");\n      slide?.classList.remove(\"is-hidden-during-animation\");\n    }\n\n    const hideHiddenDuringAnimation = (slide) => {\n      this.carouselActionsElement?.classList.add(\"is-hidden-during-animation\");\n      slide?.classList.add(\"is-hidden-during-animation\");\n    }\n\n    const stopPropagation = (event) => {\n      event.stopPropagation();\n    }\n\n    const updateSize = () => {\n      this.lightbox.pswp.updateSize(true);\n    }\n\n    const slides = Array.from(this.element.querySelectorAll(this.itemElement));\n\n    this.lightbox.addFilter(\"itemData\", (itemData, index: number) => {\n      itemData.element = slides[index];\n      return itemData;\n    });\n\n    this.lightbox.addFilter('thumbEl', (thumbEl, data, _index) => {\n      const el = data.element?.querySelector('img') as HTMLImageElement;\n\n      if (el) {\n        return el;\n      }\n\n      return thumbEl;\n    });\n\n    this.lightbox.addFilter('numItems', () => {\n      return this._images.length;\n    });\n\n    this.lightbox.on(\"afterInit\", () => {\n      firstHidden = this.lightbox.pswp.currSlide.data.element;\n      lastHidden = this.lightbox.pswp.currSlide.data.element;;\n\n      hideHiddenDuringAnimation(firstHidden);\n\n      if (this._images.length === 1) {\n        this.lightbox.pswp.element.classList.add(\"pswp--one-image\");\n      }\n    });\n\n    this.lightbox.on(\"close\", () => {\n      // can be null in \"single\" variant, when not every slide is in carousel or grid\n      if (this.lightbox.pswp.currSlide.data.element) {\n        lastHidden = this.lightbox.pswp.currSlide.data.element;\n      }\n\n      if (lastHidden !== firstHidden) {\n        showHiddenDuringAnimation(firstHidden);\n        hideHiddenDuringAnimation(lastHidden);\n      }\n    });\n\n    this.lightbox.on(\"destroy\", () => {\n      showHiddenDuringAnimation(lastHidden);\n    });\n  \n    this.lightbox.on(\"change\", () => {\n      // update carousel to same slide the lightshow shows\n      this.carouselElement?.slideTo(this.lightbox.pswp.currIndex, \"auto\");\n      // enable scroll for caption div\n      this.lightbox.pswp.currSlide.dynamicCaption.element.addEventListener('scroll', stopPropagation);\n      this.lightbox.pswp.currSlide.dynamicCaption.element.addEventListener('wheel', stopPropagation);\n    });\n\n    // this.lightbox.addFilter('preventPointerEvent', (preventPointerEvent, originalEvent, pointerType) => {\n    //   // return true to preventDefault pointermove/pointerdown events\n    //   // (also applies to touchmove/mousemove)\n    //   console.log(preventPointerEvent, originalEvent, pointerType);\n    //   return false;\n    // });\n    \n    this.lightbox.on('bindEvents', () => {\n      this.lightbox.pswp.element.addEventListener('stzhClamp', updateSize);\n      this.lightbox.pswp.element.addEventListener('stzhExpand', updateSize);\n      this.lightbox.pswp.element.addEventListener('stzhOpen', updateSize);\n      this.lightbox.pswp.element.addEventListener('stzhOpened', updateSize);\n      this.lightbox.pswp.element.addEventListener('stzhClose', updateSize);\n      this.lightbox.pswp.element.addEventListener('stzhClosed', updateSize);\n    });\n\n    new PhotoSwipeDynamicCaption(this.lightbox, {\n      type: 'below',\n      captionContent: (slide) => { // '.stzh-gallery__caption-content'\n        return slide.data.captionHtml;\n      },\n      mobileLayoutBreakpoint: () => {\n        return window.innerWidth < 800;\n      },\n      // if enabled, the image will always be vertically centered in the remaining space between the caption and the rest of the viewport.\n      // If set to false (default value) - the image will lift up only if the caption does not fit below.\n      // verticallyCenterImage: false,\n\n      // when the caption x position is less than this value, it'll get class pswp__dynamic-caption--on-hor-edge. You may use it to apply different styling, such as horizontal padding.\n      // horizontalEdgeThreshold: 20\n\n      // a ratio defines the amount of horizontal empty space before the mobile caption switches to an \"overlap\" layout. \n      // For example, if it's set to 0.3 - the caption will start overlapping the image when more than 30% of horizontal space is not occupied by an image. If you set it to 0 - the caption will always overlap. If you set it to 1 - the caption will constantly shift the image (unless it's taller than the viewport).\n      mobileCaptionOverlapRatio: 1\n    });\n\n    this.lightbox.init();\n  }\n\n  // componentShouldUpdate(_newValue, _oldValue, prop: string) {\n  //   return [\"isOpen\"].includes(prop) === false;\n  // }\n\n  async componentWillLoad() {\n    this.imagesWatcher(this.images);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"gallery\");\n    }\n  }\n\n  async componentWillUpdate() {\n    if (this.lightbox) {\n      this.lightbox.destroy();\n      this.lightbox = null;\n    }\n  }\n\n  componentDidRender() {\n    if (!this.lightbox) {\n      this.initLightbox();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.lightbox) {\n      this.lightbox.destroy();\n      this.lightbox = null;\n    }\n  }\n\n  private renderFigure(image: StzhGalleryItem, index: number): HTMLStzhFigureElement {\n    const total = this._images.length;\n\n    return (\n      <stzh-figure\n        class=\"stzh-gallery__slide\"\n        caption={image.caption}\n        heading={image.heading}\n        counter={!image.hideCounter\n          ? `${index+1}/${total}`\n          : \"\"}\n      >\n        <stzh-ratio\n          onClick={(event) => {\n            event.preventDefault();\n            this.openLightbox(index)\n          }}\n        >\n          <img\n            loading=\"lazy\"\n            src={image.src}\n            alt={\n              (image.alt || this.localization.defaultAlt || '')\n                .replace(/\\{current\\}/, (index + 1).toString())\n                .replace(/\\{total\\}/, total.toString())}\n          />\n\n          {(this.variant === \"single\" || this.variant === \"grid\") &&\n            <stzh-hspace\n              class=\"stzh-gallery__actions\"\n              justify=\"end\"\n              items=\"end\"\n              size=\"xsmall\"\n            >\n              <stzh-button\n                variant=\"secondary\"\n                size=\"small\"\n                icon=\"expand\"\n                label={this.localization.openLightbox}\n                icon-only\n                onClick={() => {\n                  this.openLightbox(index)\n                }}\n              ></stzh-button>\n            </stzh-hspace>\n          }\n        </stzh-ratio>\n      </stzh-figure>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-gallery\": true,\n      [`stzh-gallery--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {(this.variant === \"single\" || this._images.length === 1) &&\n            <Fragment>\n              {this.renderFigure(this._images[0], 0)}\n            </Fragment>\n          }\n\n          {(this.variant === \"grid\" && this._images.length > 0) &&\n            <Fragment>\n              {this._images.map((image, index) => this.renderFigure(image, index))}\n            </Fragment>\n          }\n\n          {(this.variant === \"carousel\" && this._images.length > 1) &&\n            <stzh-carousel ref={(el) => (this.carouselElement = el as HTMLStzhCarouselElement)}>\n              <stzh-ratio\n                ref={(el) => (this.carouselActionsElement = el as HTMLElement)}\n                slot=\"actions\"\n                class=\"stzh-gallery__carousel-actions\"\n              >\n                <stzh-hspace justify=\"end\" items=\"end\" size=\"xsmall\">\n                  <stzh-show small>\n                    <stzh-buttongroup>\n                      <stzh-button\n                        data-stzh-carousel-previous\n                        variant=\"secondary\"\n                        size=\"small\"\n                        icon=\"angle-left\"\n                        label={this.localization.arrowPrevTitle}\n                        icon-only\n                      ></stzh-button>\n                      <stzh-button\n                        data-stzh-carousel-next\n                        variant=\"secondary\"\n                        size=\"small\"\n                        icon=\"angle-right\"\n                        label={this.localization.arrowNextTitle}\n                        icon-only\n                      ></stzh-button>\n                    </stzh-buttongroup>\n                  </stzh-show>\n                  <stzh-button\n                    variant=\"secondary\"\n                    size=\"small\"\n                    icon=\"expand\"\n                    label={this.localization.openLightbox}\n                    icon-only\n                    onClick={this.openCurrentCarouselSlide}\n                  ></stzh-button>\n                </stzh-hspace>\n              </stzh-ratio>\n\n              {this._images.map((image, index) => this.renderFigure(image, index))}\n            </stzh-carousel>\n          }\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-gallery/stzh-gallery.localization.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=stzh-gallery.localization.js.map

package/dist/collection/components/stzh-gallery/stzh-gallery.localization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stzh-gallery.localization.js","sourceRoot":"","sources":["../../../../src/components/stzh-gallery/stzh-gallery.localization.ts"],"names":[],"mappings":"","sourcesContent":["import { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nexport type StzhGalleryLocalizedText = StzhLocaleComponent & {\n  closeTitle: string\n  zoomTitle: string\n  arrowPrevTitle: string\n  arrowNextTitle: string\n  errorMsg: string\n  defaultAlt: string\n  openLightbox: string\n}\n"]}