@getflip/swirl-components 0.3.0 → 0.4.0

package/dist/collection/components/flip-form-group/flip-form-group.css

@@ -10,16 +10,20 @@
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: var(--s-space-24);
+  gap: var(--s-space-16);
 }
 
 @media (min-width: 768px) {
 
 .form-group {
-    gap: var(--s-space-32)
+    gap: var(--s-space-24)
 }
   }
 
+.form-group--orientation-horizontal {
+  gap: var(--s-space-16);
+}
+
 @media (min-width: 768px) {
 
 .form-group--orientation-horizontal {

package/dist/collection/components/flip-lightbox/flip-lightbox.css

@@ -0,0 +1,208 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.lightbox {
+  position: fixed;
+  z-index: var(--s-z-40);
+  background-color: rgba(0, 0, 0, 1);
+  inset: 0;
+}
+
+.lightbox[aria-hidden="true"] {
+    display: none;
+  }
+
+@media (min-width: 768px) {
+
+.lightbox {
+    background-color: rgba(0, 0, 0, 0.6)
+}
+  }
+
+.lightbox:not(.lightbox--closing) .lightbox__body {
+    -webkit-animation: 0.15s lightbox-fade-in;
+            animation: 0.15s lightbox-fade-in;
+  }
+
+@media (prefers-reduced-motion) {
+
+.lightbox:not(.lightbox--closing) .lightbox__body {
+      -webkit-animation: none;
+              animation: none
+  }
+    }
+
+.lightbox--closing {
+  -webkit-animation: 0.15s lightbox-fade-out;
+          animation: 0.15s lightbox-fade-out;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion) {
+
+.lightbox--closing {
+    -webkit-animation: none;
+            animation: none
+}
+  }
+
+.lightbox__body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.lightbox__header {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  padding: var(--s-space-12) var(--s-space-16);
+  justify-content: space-between;
+  align-items: flex-start;
+  pointer-events: none;
+}
+
+.lightbox__controls {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  right: 0;
+  left: 0;
+  display: none;
+  padding-right: var(--s-space-16);
+  padding-left: var(--s-space-16);
+  justify-content: space-between;
+  align-items: flex-start;
+  pointer-events: none;
+}
+
+@media (min-width: 768px) {
+
+.lightbox__controls {
+    display: flex
+}
+  }
+
+.lightbox__close-button,
+.lightbox__download-button,
+.lightbox__previous-slide-button,
+.lightbox__next-slide-button {
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 50%;
+  color: var(--s-icon-on-image);
+  background-color: rgba(0, 0, 0, 0.6);
+  cursor: pointer;
+  transition: opacity 0.15s;
+  pointer-events: auto;
+}
+
+.lightbox__close-button:disabled, .lightbox__download-button:disabled, .lightbox__previous-slide-button:disabled, .lightbox__next-slide-button:disabled {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+.lightbox__content {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.lightbox__slides {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.lightbox__slides ::slotted(*) {
+    flex-basis: 100%;
+    flex-shrink: 0;
+    transition: transform 0.3s;
+  }
+
+@media (min-width: 768px) {
+
+.lightbox__slides ::slotted(*) {
+      padding: 4rem 5rem
+  }
+    }
+
+@media (prefers-reduced-motion) {
+
+.lightbox__slides ::slotted(*) {
+      transition: none
+  }
+    }
+
+.lightbox__pagination {
+  position: absolute;
+  bottom: var(--s-space-32);
+  left: 50%;
+  padding: var(--s-space-4) var(--s-space-12);
+  border-radius: var(--s-border-radius-base);
+  color: var(--s-text-on-image);
+  background-color: rgba(0, 0, 0, 0.6);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-base);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+@media (min-width: 768px) {
+
+.lightbox__pagination {
+    display: none
+}
+  }
+
+@-webkit-keyframes lightbox-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes lightbox-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes lightbox-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes lightbox-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/dist/collection/components/flip-lightbox/flip-lightbox.js

@@ -0,0 +1,375 @@
+import { Component, Element, h, Host, Method, Prop, State, } from "@stencil/core";
+import A11yDialog from "a11y-dialog";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import classnames from "classnames";
+import { querySelectorAllDeep } from "../../utils";
+export class FlipLightbox {
+  constructor() {
+    this.closeButtonLabel = "Close modal";
+    this.downloadButtonLabel = "Download active slide content";
+    this.nextSlideButtonLabel = "Next slide";
+    this.previousSlideButtonLabel = "Previous slide";
+    this.activeSlideIndex = 0;
+    this.closing = false;
+    this.dragging = false;
+    this.mediaPlayers = [];
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onDownloadButtonClick = () => {
+      var _a;
+      (_a = this.slides[this.activeSlideIndex]) === null || _a === void 0 ? void 0 : _a.download();
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+      else if (event.code === "ArrowLeft") {
+        this.onPreviousSlideClick();
+      }
+      else if (event.code === "ArrowRight") {
+        this.onNextSlideClick();
+      }
+    };
+    this.onNextSlideClick = () => {
+      this.activateSlide(Math.min(this.slides.length - 1, this.activeSlideIndex + 1));
+    };
+    this.onPreviousSlideClick = () => {
+      this.activateSlide(Math.max(0, this.activeSlideIndex - 1));
+    };
+    this.registerSlides = () => {
+      this.slides = Array.from(this.el.children);
+      this.setSlideAttributes();
+      this.updateMediaPlayers();
+    };
+    this.onPointerDown = (event) => {
+      event.preventDefault();
+      this.dragging = true;
+      this.dragStartPosition =
+        event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;
+      this.slides.forEach((slide) => {
+        slide.style.transition = "none";
+      });
+    };
+    this.onPointerMove = (event) => {
+      if (this.dragging) {
+        event.preventDefault();
+        const deltaX = event instanceof MouseEvent
+          ? event.clientX - this.dragStartPosition
+          : event.touches[0].clientX - this.dragStartPosition;
+        this.slides.forEach((slide) => {
+          const pixelOffset = this.activeSlideIndex * slide.getBoundingClientRect().width;
+          this.dragDelta = deltaX;
+          slide.style.transform = `translate3d(${(-pixelOffset + this.dragDelta) / 16}rem, 0, 0)`;
+        });
+      }
+    };
+    this.onPointerUp = () => {
+      this.dragging = false;
+      this.dragStartPosition = undefined;
+      const dragRatio = this.dragDelta /
+        this.slides[this.activeSlideIndex].getBoundingClientRect().width;
+      this.dragDelta = 0;
+      const shouldMoveToPreviousSlide = dragRatio > 0.2;
+      const shouldMoveToNextSlide = dragRatio < -0.2;
+      this.slides.forEach((slide) => {
+        slide.style.transition = "";
+      });
+      if (shouldMoveToPreviousSlide) {
+        this.onPreviousSlideClick();
+      }
+      else if (shouldMoveToNextSlide) {
+        this.onNextSlideClick();
+      }
+      else {
+        this.resetSlidePositions();
+      }
+    };
+  }
+  componentWillLoad() {
+    this.registerSlides();
+  }
+  componentDidLoad() {
+    this.modal = new A11yDialog(this.modalEl);
+    this.activateSlide(0);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.unlockBodyScroll();
+  }
+  /**
+   * Open the lightbox.
+   */
+  async open() {
+    this.modal.show();
+    this.lockBodyScroll();
+  }
+  /**
+   * Close the lightbox.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.closing = false;
+    }, 150);
+  }
+  /**
+   * Activate a slide.
+   * @param newActiveSlideIndex
+   */
+  async activateSlide(newActiveSlideIndex) {
+    this.dragging = false;
+    this.activeSlideIndex = newActiveSlideIndex;
+    this.slides.forEach((slide, index) => {
+      if (index === this.activeSlideIndex) {
+        slide.removeAttribute("aria-hidden");
+        slide.setAttribute("active", "true");
+      }
+      else if (index === this.activeSlideIndex - 1 ||
+        index === this.activeSlideIndex + 1) {
+        slide.setAttribute("aria-hidden", "true");
+        slide.setAttribute("active", "true");
+      }
+      else {
+        slide.setAttribute("aria-hidden", "true");
+      }
+      slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    });
+    // wait for slide animation before deactivating the slide
+    setTimeout(() => {
+      this.slides.forEach((slide, index) => {
+        if (index !== this.activeSlideIndex &&
+          index !== this.activeSlideIndex - 1 &&
+          index !== this.activeSlideIndex + 1) {
+          slide.setAttribute("active", "false");
+        }
+      });
+    }, 300);
+    this.stopAllMediaPlayers();
+    this.updateMediaPlayers();
+  }
+  setSlideAttributes() {
+    this.slides.forEach((slide) => {
+      slide.setAttribute("active", "false");
+      slide.setAttribute("aria-label", slide.file);
+      slide.setAttribute("aria-roledescription", "slide");
+      slide.setAttribute("role", "group");
+    });
+  }
+  resetSlidePositions() {
+    this.slides.forEach((slide) => {
+      slide.style.transform = `translate3d(-${100 * this.activeSlideIndex}%, 0, 0)`;
+    });
+  }
+  lockBodyScroll() {
+    disableBodyScroll(this.el);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.el);
+  }
+  updateMediaPlayers() {
+    const mediaPlayers = querySelectorAllDeep(this.el, "video");
+    this.mediaPlayers = mediaPlayers;
+  }
+  stopAllMediaPlayers() {
+    this.mediaPlayers.forEach((mediaPlayer) => mediaPlayer.pause());
+  }
+  render() {
+    const showPagination = this.slides.length > 1;
+    const className = classnames("lightbox", {
+      "lightbox--closing": this.closing,
+    });
+    return (h(Host, null,
+      h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "lightbox", onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onKeyDown: this.onKeyDown, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) },
+        h("div", { class: "lightbox__body", role: "document" },
+          h("header", { class: "lightbox__header" },
+            h("button", { "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick },
+              h("flip-icon-close", null)),
+            h("button", { "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick },
+              h("flip-icon-download", null))),
+          h("div", { "aria-roledescription": "carousel", class: "lightbox__content", role: "group" },
+            h("div", { "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides" },
+              h("slot", { onSlotchange: this.registerSlides }))),
+          h("div", { class: "lightbox__controls" },
+            h("button", { "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick },
+              h("flip-icon-arrow-left", null)),
+            h("button", { "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick },
+              h("flip-icon-arrow-right", null))),
+          showPagination && (h("span", { class: "lightbox__pagination" },
+            h("span", { "aria-current": "page" }, this.activeSlideIndex + 1),
+            " /",
+            " ",
+            this.slides.length))))));
+  }
+  static get is() { return "flip-lightbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-lightbox.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-lightbox.css"]
+  }; }
+  static get properties() { return {
+    "closeButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "close-button-label",
+      "reflect": false,
+      "defaultValue": "\"Close modal\""
+    },
+    "downloadButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "download-button-label",
+      "reflect": false,
+      "defaultValue": "\"Download active slide content\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "nextSlideButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "next-slide-button-label",
+      "reflect": false,
+      "defaultValue": "\"Next slide\""
+    },
+    "previousSlideButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "previous-slide-button-label",
+      "reflect": false,
+      "defaultValue": "\"Previous slide\""
+    }
+  }; }
+  static get states() { return {
+    "activeSlideIndex": {},
+    "closing": {},
+    "slides": {}
+  }; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Open the lightbox.",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close the lightbox.",
+        "tags": []
+      }
+    },
+    "activateSlide": {
+      "complexType": {
+        "signature": "(newActiveSlideIndex: number) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "newActiveSlideIndex"
+              }],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Activate a slide.",
+        "tags": [{
+            "name": "param",
+            "text": "newActiveSlideIndex"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=flip-lightbox.js.map

package/dist/collection/components/flip-lightbox/flip-lightbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-lightbox.js","sourceRoot":"","sources":["../../../../src/components/flip-lightbox/flip-lightbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\nimport { querySelectorAllDeep } from \"../../utils\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-lightbox.css\",\n  tag: \"flip-lightbox\",\n})\nexport class FlipLightbox {\n  @Element() el: HTMLElement;\n\n  @Prop() closeButtonLabel?: string = \"Close modal\";\n  @Prop() downloadButtonLabel?: string = \"Download active slide content\";\n  @Prop() label!: string;\n  @Prop() nextSlideButtonLabel?: string = \"Next slide\";\n  @Prop() previousSlideButtonLabel?: string = \"Previous slide\";\n\n  @State() activeSlideIndex: number = 0;\n  @State() closing = false;\n  @State() slides: HTMLFlipFileViewerElement[];\n\n  private dragging: boolean = false;\n  private dragStartPosition: number;\n  private dragDelta: number;\n  private modal: A11yDialog;\n  private modalEl: HTMLElement;\n  private mediaPlayers: (HTMLVideoElement | HTMLAudioElement)[] = [];\n\n  componentWillLoad() {\n    this.registerSlides();\n  }\n\n  componentDidLoad() {\n    this.modal = new A11yDialog(this.modalEl);\n    this.activateSlide(0);\n  }\n\n  disconnectedCallback() {\n    this.modal?.destroy();\n    this.unlockBodyScroll();\n  }\n\n  /**\n   * Open the lightbox.\n   */\n  @Method()\n  async open() {\n    this.modal.show();\n    this.lockBodyScroll();\n  }\n\n  /**\n   * Close the lightbox.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n    this.unlockBodyScroll();\n\n    setTimeout(() => {\n      this.modal.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  /**\n   * Activate a slide.\n   * @param newActiveSlideIndex\n   */\n  @Method()\n  async activateSlide(newActiveSlideIndex: number) {\n    this.dragging = false;\n    this.activeSlideIndex = newActiveSlideIndex;\n\n    this.slides.forEach((slide, index) => {\n      if (index === this.activeSlideIndex) {\n        slide.removeAttribute(\"aria-hidden\");\n        slide.setAttribute(\"active\", \"true\");\n      } else if (\n        index === this.activeSlideIndex - 1 ||\n        index === this.activeSlideIndex + 1\n      ) {\n        slide.setAttribute(\"aria-hidden\", \"true\");\n        slide.setAttribute(\"active\", \"true\");\n      } else {\n        slide.setAttribute(\"aria-hidden\", \"true\");\n      }\n\n      slide.style.transform = `translate3d(-${\n        100 * this.activeSlideIndex\n      }%, 0, 0)`;\n    });\n\n    // wait for slide animation before deactivating the slide\n    setTimeout(() => {\n      this.slides.forEach((slide, index) => {\n        if (\n          index !== this.activeSlideIndex &&\n          index !== this.activeSlideIndex - 1 &&\n          index !== this.activeSlideIndex + 1\n        ) {\n          slide.setAttribute(\"active\", \"false\");\n        }\n      });\n    }, 300);\n\n    this.stopAllMediaPlayers();\n    this.updateMediaPlayers();\n  }\n\n  private setSlideAttributes() {\n    this.slides.forEach((slide) => {\n      slide.setAttribute(\"active\", \"false\");\n      slide.setAttribute(\"aria-label\", slide.file);\n      slide.setAttribute(\"aria-roledescription\", \"slide\");\n      slide.setAttribute(\"role\", \"group\");\n    });\n  }\n\n  private resetSlidePositions() {\n    this.slides.forEach((slide) => {\n      slide.style.transform = `translate3d(-${\n        100 * this.activeSlideIndex\n      }%, 0, 0)`;\n    });\n  }\n\n  private lockBodyScroll() {\n    disableBodyScroll(this.el);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.el);\n  }\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  private onDownloadButtonClick = () => {\n    this.slides[this.activeSlideIndex]?.download();\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    } else if (event.code === \"ArrowLeft\") {\n      this.onPreviousSlideClick();\n    } else if (event.code === \"ArrowRight\") {\n      this.onNextSlideClick();\n    }\n  };\n\n  private onNextSlideClick = () => {\n    this.activateSlide(\n      Math.min(this.slides.length - 1, this.activeSlideIndex + 1)\n    );\n  };\n\n  private onPreviousSlideClick = () => {\n    this.activateSlide(Math.max(0, this.activeSlideIndex - 1));\n  };\n\n  private registerSlides = () => {\n    this.slides = Array.from(this.el.children) as HTMLFlipFileViewerElement[];\n    this.setSlideAttributes();\n    this.updateMediaPlayers();\n  };\n\n  private updateMediaPlayers() {\n    const mediaPlayers = querySelectorAllDeep<\n      HTMLAudioElement | HTMLVideoElement\n    >(this.el, \"video\");\n\n    this.mediaPlayers = mediaPlayers;\n  }\n\n  private stopAllMediaPlayers() {\n    this.mediaPlayers.forEach((mediaPlayer) => mediaPlayer.pause());\n  }\n\n  private onPointerDown = (event: MouseEvent | TouchEvent) => {\n    event.preventDefault();\n\n    this.dragging = true;\n\n    this.dragStartPosition =\n      event instanceof MouseEvent ? event.clientX : event.touches[0].clientX;\n\n    this.slides.forEach((slide) => {\n      slide.style.transition = \"none\";\n    });\n  };\n\n  private onPointerMove = (event: MouseEvent | TouchEvent) => {\n    if (this.dragging) {\n      event.preventDefault();\n\n      const deltaX =\n        event instanceof MouseEvent\n          ? event.clientX - this.dragStartPosition\n          : event.touches[0].clientX - this.dragStartPosition;\n\n      this.slides.forEach((slide) => {\n        const pixelOffset =\n          this.activeSlideIndex * slide.getBoundingClientRect().width;\n\n        this.dragDelta = deltaX;\n\n        slide.style.transform = `translate3d(${\n          (-pixelOffset + this.dragDelta) / 16\n        }rem, 0, 0)`;\n      });\n    }\n  };\n\n  private onPointerUp = () => {\n    this.dragging = false;\n    this.dragStartPosition = undefined;\n\n    const dragRatio =\n      this.dragDelta /\n      this.slides[this.activeSlideIndex].getBoundingClientRect().width;\n\n    this.dragDelta = 0;\n\n    const shouldMoveToPreviousSlide = dragRatio > 0.2;\n    const shouldMoveToNextSlide = dragRatio < -0.2;\n\n    this.slides.forEach((slide) => {\n      slide.style.transition = \"\";\n    });\n\n    if (shouldMoveToPreviousSlide) {\n      this.onPreviousSlideClick();\n    } else if (shouldMoveToNextSlide) {\n      this.onNextSlideClick();\n    } else {\n      this.resetSlidePositions();\n    }\n  };\n\n  render() {\n    const showPagination = this.slides.length > 1;\n\n    const className = classnames(\"lightbox\", {\n      \"lightbox--closing\": this.closing,\n    });\n\n    return (\n      <Host>\n        <section\n          aria-hidden=\"true\"\n          aria-label={this.label}\n          class={className}\n          id=\"lightbox\"\n          onMouseDown={this.onPointerDown}\n          onMouseMove={this.onPointerMove}\n          onMouseOut={this.onPointerUp}\n          onMouseUp={this.onPointerUp}\n          onKeyDown={this.onKeyDown}\n          onTouchEnd={this.onPointerUp}\n          onTouchMove={this.onPointerMove}\n          onTouchStart={this.onPointerDown}\n          ref={(el) => (this.modalEl = el)}\n        >\n          <div class=\"lightbox__body\" role=\"document\">\n            <header class=\"lightbox__header\">\n              <button\n                aria-label={this.closeButtonLabel}\n                class=\"lightbox__close-button\"\n                onClick={this.onCloseButtonClick}\n              >\n                <flip-icon-close></flip-icon-close>\n              </button>\n              <button\n                aria-label={this.downloadButtonLabel}\n                class=\"lightbox__download-button\"\n                onClick={this.onDownloadButtonClick}\n              >\n                <flip-icon-download></flip-icon-download>\n              </button>\n            </header>\n            <div\n              aria-roledescription=\"carousel\"\n              class=\"lightbox__content\"\n              role=\"group\"\n            >\n              <div\n                aria-atomic=\"false\"\n                aria-live=\"polite\"\n                class=\"lightbox__slides\"\n              >\n                <slot onSlotchange={this.registerSlides}></slot>\n              </div>\n            </div>\n            <div class=\"lightbox__controls\">\n              <button\n                aria-label={this.previousSlideButtonLabel}\n                class=\"lightbox__previous-slide-button\"\n                disabled={this.activeSlideIndex === 0}\n                onClick={this.onPreviousSlideClick}\n              >\n                <flip-icon-arrow-left></flip-icon-arrow-left>\n              </button>\n              <button\n                aria-label={this.nextSlideButtonLabel}\n                class=\"lightbox__next-slide-button\"\n                disabled={this.activeSlideIndex === this.slides.length - 1}\n                onClick={this.onNextSlideClick}\n              >\n                <flip-icon-arrow-right></flip-icon-arrow-right>\n              </button>\n            </div>\n            {showPagination && (\n              <span class=\"lightbox__pagination\">\n                <span aria-current=\"page\">{this.activeSlideIndex + 1}</span> /{\" \"}\n                {this.slides.length}\n              </span>\n            )}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-lightbox/flip-lightbox.stories.js

@@ -0,0 +1,44 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-lightbox.mdx";
+export default {
+  component: "flip-lightbox",
+  parameters: {
+    docs: {
+      page: Docs,
+      source: {
+        code: `<flip-lightbox id="lightbox" label="Lightbox">
+  <flip-file-viewer description="Cute dog in a blaket." file="/sample.jpg" type="image/jpeg"></flip-file-viewer>
+  <flip-file-viewer description="Another cute dog in a blanket." file="/sample-2.jpg" type="image/jpeg"></flip-file-viewer>
+  <flip-file-viewer description="Black puppy." file="/sample-3.jpg" type="image/jpeg"></flip-file-viewer>
+  <flip-file-viewer file="/sample.mp4" type="video/mp4"></flip-file-viewer>
+</flip-lightbox>
+
+<script>
+  const lightbox = document.body.querySelector('#lightbox');
+  lightbox.open();
+</script>`,
+      },
+    },
+  },
+  title: "Components/FlipLightbox",
+};
+const Template = (args) => {
+  const container = document.createElement("div");
+  const trigger = document.createElement("flip-button");
+  const element = generateStoryElement("flip-lightbox", args);
+  trigger.label = "Open lightbox";
+  trigger.addEventListener("click", () => element.open());
+  element.innerHTML = `
+    <flip-file-viewer description="Cute dog in a blanket." file="/sample.jpg" type="image/jpeg"></flip-file-viewer>
+    <flip-file-viewer description="Another cute dog in a blanket." file="/sample-2.jpg" type="image/jpeg"></flip-file-viewer>
+    <flip-file-viewer description="Black puppy." file="/sample-3.jpg" type="image/jpeg"></flip-file-viewer>
+    <flip-file-viewer file="/sample.mp4" type="video/mp4"></flip-file-viewer>
+  `;
+  container.append(trigger, element);
+  return container;
+};
+export const FlipLightbox = Template.bind({});
+FlipLightbox.args = {
+  label: "Lightbox",
+};
+//# sourceMappingURL=flip-lightbox.stories.js.map