@getflip/swirl-components 0.3.1 → 0.5.0

package/dist/components/flip-icon-remove.js

@@ -1,39 +1,6 @@
-import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-
-const flipIconCss = ":host{display:inline-flex}";
-
-const FlipIconRemove$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = 24;
-  }
-  render() {
-    return (h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M4 8.76661C3.78889 8.76661 3.60844 8.6915 3.45866 8.54128C3.30844 8.3915 3.23333 8.21105 3.23333 7.99994C3.23333 7.78883 3.30844 7.60839 3.45866 7.45861C3.60844 7.30839 3.78889 7.23328 4 7.23328H12C12.2111 7.23328 12.3916 7.30839 12.5413 7.45861C12.6916 7.60839 12.7667 7.78883 12.7667 7.99994C12.7667 8.21105 12.6916 8.3915 12.5413 8.54128C12.3916 8.6915 12.2111 8.76661 12 8.76661H4Z", fill: "currentColor" }))), this.size === 24 && (h(Fragment, null, h("path", { d: "M6 13.15C5.68333 13.15 5.41267 13.0373 5.188 12.812C4.96267 12.5873 4.85 12.3166 4.85 12C4.85 11.6833 4.96267 11.4126 5.188 11.188C5.41267 10.9626 5.68333 10.85 6 10.85H18C18.3167 10.85 18.5873 10.9626 18.812 11.188C19.0373 11.4126 19.15 11.6833 19.15 12C19.15 12.3166 19.0373 12.5873 18.812 12.812C18.5873 13.0373 18.3167 13.15 18 13.15H6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7 15.3417C6.63056 15.3417 6.31478 15.2102 6.05267 14.9473C5.78978 14.6852 5.65833 14.3694 5.65833 14C5.65833 13.6305 5.78978 13.3148 6.05267 13.0527C6.31478 12.7898 6.63056 12.6583 7 12.6583H21C21.3694 12.6583 21.6852 12.7898 21.9473 13.0527C22.2102 13.3148 22.3417 13.6305 22.3417 14C22.3417 14.3694 22.2102 14.6852 21.9473 14.9473C21.6852 15.2102 21.3694 15.3417 21 15.3417H7Z", fill: "currentColor" })))));
-  }
-  static get style() { return flipIconCss; }
-}, [1, "flip-icon-remove", {
-    "size": [2]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["flip-icon-remove"];
-  components.forEach(tagName => { switch (tagName) {
-    case "flip-icon-remove":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, FlipIconRemove$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { F as FlipIconRemove$1, d as defineCustomElement$1 } from './flip-icon-remove2.js';
 
 const FlipIconRemove = FlipIconRemove$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconRemove, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-remove.js.map

package/dist/components/flip-icon-remove2.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+
+const flipIconCss = ":host{display:inline-flex}";
+
+const FlipIconRemove = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 24;
+  }
+  render() {
+    return (h("svg", { class: "flip-icon", fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${this.size} ${this.size}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M4 8.76661C3.78889 8.76661 3.60844 8.6915 3.45866 8.54128C3.30844 8.3915 3.23333 8.21105 3.23333 7.99994C3.23333 7.78883 3.30844 7.60839 3.45866 7.45861C3.60844 7.30839 3.78889 7.23328 4 7.23328H12C12.2111 7.23328 12.3916 7.30839 12.5413 7.45861C12.6916 7.60839 12.7667 7.78883 12.7667 7.99994C12.7667 8.21105 12.6916 8.3915 12.5413 8.54128C12.3916 8.6915 12.2111 8.76661 12 8.76661H4Z", fill: "currentColor" }))), this.size === 24 && (h(Fragment, null, h("path", { d: "M6 13.15C5.68333 13.15 5.41267 13.0373 5.188 12.812C4.96267 12.5873 4.85 12.3166 4.85 12C4.85 11.6833 4.96267 11.4126 5.188 11.188C5.41267 10.9626 5.68333 10.85 6 10.85H18C18.3167 10.85 18.5873 10.9626 18.812 11.188C19.0373 11.4126 19.15 11.6833 19.15 12C19.15 12.3166 19.0373 12.5873 18.812 12.812C18.5873 13.0373 18.3167 13.15 18 13.15H6Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M7 15.3417C6.63056 15.3417 6.31478 15.2102 6.05267 14.9473C5.78978 14.6852 5.65833 14.3694 5.65833 14C5.65833 13.6305 5.78978 13.3148 6.05267 13.0527C6.31478 12.7898 6.63056 12.6583 7 12.6583H21C21.3694 12.6583 21.6852 12.7898 21.9473 13.0527C22.2102 13.3148 22.3417 13.6305 22.3417 14C22.3417 14.3694 22.2102 14.6852 21.9473 14.9473C21.6852 15.2102 21.3694 15.3417 21 15.3417H7Z", fill: "currentColor" })))));
+  }
+  static get style() { return flipIconCss; }
+}, [1, "flip-icon-remove", {
+    "size": [2]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-icon-remove"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-icon-remove":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipIconRemove);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipIconRemove as F, defineCustomElement as d };

package/dist/components/flip-icon-search-strong.js

@@ -35,5 +35,3 @@ const FlipIconSearchStrong = FlipIconSearchStrong$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconSearchStrong, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-search-strong.js.map

package/dist/components/flip-icon-search.js

@@ -4,5 +4,3 @@ const FlipIconSearch = FlipIconSearch$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconSearch, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-search.js.map

package/dist/components/flip-icon-search2.js

@@ -32,5 +32,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipIconSearch as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-icon-search2.js.map

package/dist/components/flip-icon-send.js

@@ -35,5 +35,3 @@ const FlipIconSend = FlipIconSend$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconSend, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-send.js.map

package/dist/components/flip-icon-settings.js

@@ -35,5 +35,3 @@ const FlipIconSettings = FlipIconSettings$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconSettings, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-settings.js.map

package/dist/components/flip-icon-time-filled.js

@@ -35,5 +35,3 @@ const FlipIconTimeFilled = FlipIconTimeFilled$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconTimeFilled, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-time-filled.js.map

package/dist/components/flip-icon-time-outlined.js

@@ -35,5 +35,3 @@ const FlipIconTimeOutlined = FlipIconTimeOutlined$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconTimeOutlined, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-time-outlined.js.map

package/dist/components/flip-icon-today.js

@@ -4,5 +4,3 @@ const FlipIconToday = FlipIconToday$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconToday, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-today.js.map

package/dist/components/flip-icon-today2.js

@@ -32,5 +32,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipIconToday as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-icon-today2.js.map

package/dist/components/flip-icon-user-assign.js

@@ -35,5 +35,3 @@ const FlipIconUserAssign = FlipIconUserAssign$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconUserAssign, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-user-assign.js.map

package/dist/components/flip-icon-video-camera.js

@@ -35,5 +35,3 @@ const FlipIconVideoCamera = FlipIconVideoCamera$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconVideoCamera, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-video-camera.js.map

package/dist/components/flip-icon-visibility-off.js

@@ -4,5 +4,3 @@ const FlipIconVisibilityOff = FlipIconVisibilityOff$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconVisibilityOff, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-visibility-off.js.map

package/dist/components/flip-icon-visibility-off2.js

@@ -32,5 +32,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipIconVisibilityOff as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-icon-visibility-off2.js.map

package/dist/components/flip-icon-visibility.js

@@ -4,5 +4,3 @@ const FlipIconVisibility = FlipIconVisibility$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconVisibility, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-visibility.js.map

package/dist/components/flip-icon-visibility2.js

@@ -32,5 +32,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipIconVisibility as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-icon-visibility2.js.map

package/dist/components/flip-icon-warning.js

@@ -35,5 +35,3 @@ const FlipIconWarning = FlipIconWarning$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipIconWarning, defineCustomElement };
-
-//# sourceMappingURL=flip-icon-warning.js.map

package/dist/components/flip-inline-error.js

@@ -4,5 +4,3 @@ const FlipInlineError = FlipInlineError$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipInlineError, defineCustomElement };
-
-//# sourceMappingURL=flip-inline-error.js.map

package/dist/components/flip-inline-error2.js

@@ -42,5 +42,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { FlipInlineError as F, defineCustomElement as d };
-
-//# sourceMappingURL=flip-inline-error2.js.map

package/dist/components/flip-lightbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipLightbox extends Components.FlipLightbox, HTMLElement {}
+export const FlipLightbox: {
+  prototype: FlipLightbox;
+  new (): FlipLightbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-lightbox.js

@@ -0,0 +1,253 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { A as A11yDialog } from './a11y-dialog.esm.js';
+import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
+import { c as classnames } from './index2.js';
+import { q as querySelectorAllDeep } from './utils.js';
+import { d as defineCustomElement$5 } from './flip-icon-arrow-left2.js';
+import { d as defineCustomElement$4 } from './flip-icon-arrow-right2.js';
+import { d as defineCustomElement$3 } from './flip-icon-close2.js';
+import { d as defineCustomElement$2 } from './flip-icon-download2.js';
+
+const flipLightboxCss = ":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}}";
+
+const FlipLightbox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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))))));
+  }
+  get el() { return this; }
+  static get style() { return flipLightboxCss; }
+}, [1, "flip-lightbox", {
+    "closeButtonLabel": [1, "close-button-label"],
+    "downloadButtonLabel": [1, "download-button-label"],
+    "label": [1],
+    "nextSlideButtonLabel": [1, "next-slide-button-label"],
+    "previousSlideButtonLabel": [1, "previous-slide-button-label"],
+    "activeSlideIndex": [32],
+    "closing": [32],
+    "slides": [32],
+    "open": [64],
+    "close": [64],
+    "activateSlide": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-lightbox", "flip-icon-arrow-left", "flip-icon-arrow-right", "flip-icon-close", "flip-icon-download"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-lightbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipLightbox$1);
+      }
+      break;
+    case "flip-icon-arrow-left":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "flip-icon-arrow-right":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "flip-icon-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-icon-download":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipLightbox = FlipLightbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipLightbox, defineCustomElement };

package/dist/components/flip-link.js

@@ -36,5 +36,3 @@ const FlipLink = FlipLink$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipLink, defineCustomElement };
-
-//# sourceMappingURL=flip-link.js.map

package/dist/components/flip-list.js

@@ -37,5 +37,3 @@ const FlipList = FlipList$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipList, defineCustomElement };
-
-//# sourceMappingURL=flip-list.js.map

package/dist/components/flip-modal.js

@@ -7,18 +7,22 @@ import { d as defineCustomElement$4 } from './flip-button-group2.js';
 import { d as defineCustomElement$3 } from './flip-heading2.js';
 import { d as defineCustomElement$2 } from './flip-stack2.js';
 
-const flipModalCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:0.15s modal-backdrop-fade-in;animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:none;animation:none}}.modal:not(.modal--closing) .modal__body{-webkit-animation:0.15s modal-scale-in;animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__body{-webkit-animation:none;animation:none}}.modal--closing{-webkit-animation:0.15s modal-fade-out;animation:0.15s modal-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--closing{-webkit-animation:none;animation:none}}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;width:100vw;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:33.75rem;height:auto;max-height:90vh;border-radius:var(--s-border-radius-xl);box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}}.modal__close-button{position:absolute;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:none}}.modal__heading{overflow:hidden}.modal__heading::part(heading){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16);flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}@media (min-width: 768px){.modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-32);padding-left:var(--s-space-24)}}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end;border-top:var(--s-border-width-default) solid var(--s-border-default)}@-webkit-keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}";
+const flipModalCss = ":host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:0.15s modal-backdrop-fade-in;animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:none;animation:none}}.modal:not(.modal--closing) .modal__body{-webkit-animation:0.15s modal-scale-in;animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__body{-webkit-animation:none;animation:none}}.modal--closing{-webkit-animation:0.15s modal-fade-out;animation:0.15s modal-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--closing{-webkit-animation:none;animation:none}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;width:100vw;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:33.75rem;height:auto;max-height:90vh;border-radius:var(--s-border-radius-base);box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}}.modal__close-button{position:absolute;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{height:4.125rem;padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:none}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16);flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}@media (min-width: 768px){.modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@-webkit-keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}";
 
 const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.modalClose = createEvent(this, "modalClose", 7);
+    this.modalOpen = createEvent(this, "modalOpen", 7);
     this.primaryAction = createEvent(this, "primaryAction", 7);
     this.secondaryAction = createEvent(this, "secondaryAction", 7);
     this.closeButtonLabel = "Close modal";
     this.closing = false;
+    this.scrollable = false;
     this.scrolled = false;
+    this.scrolledDown = false;
     this.onKeyDown = (event) => {
       if (event.code === "Escape") {
         this.close();
@@ -32,18 +36,24 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     this.onPrimaryAction = (event) => {
       this.primaryAction.emit(event);
-      this.close();
     };
     this.onSecondaryAction = (event) => {
       this.secondaryAction.emit(event);
-      this.close();
     };
     this.determineScrollStatus = () => {
-      var _a;
+      var _a, _b, _c, _d, _e, _f;
       const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
+      const scrolledDown = Math.ceil(((_b = this.scrollContainer) === null || _b === void 0 ? void 0 : _b.scrollTop) + ((_c = this.scrollContainer) === null || _c === void 0 ? void 0 : _c.offsetHeight)) >= ((_d = this.scrollContainer) === null || _d === void 0 ? void 0 : _d.scrollHeight);
+      const scrollable = ((_e = this.scrollContainer) === null || _e === void 0 ? void 0 : _e.scrollHeight) > ((_f = this.scrollContainer) === null || _f === void 0 ? void 0 : _f.offsetHeight);
       if (scrolled !== this.scrolled) {
         this.scrolled = scrolled;
       }
+      if (scrolledDown !== this.scrolledDown) {
+        this.scrolledDown = scrolledDown;
+      }
+      if (scrollable !== this.scrollable) {
+        this.scrollable = scrollable;
+      }
     };
   }
   componentDidLoad() {
@@ -63,6 +73,7 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   async open() {
     this.modal.show();
+    this.modalOpen.emit();
     this.lockBodyScroll();
     this.determineScrollStatus();
   }
@@ -77,6 +88,7 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.unlockBodyScroll();
     setTimeout(() => {
       this.modal.hide();
+      this.modalClose.emit();
       this.closing = false;
     }, 150);
   }
@@ -89,7 +101,9 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   render() {
     const className = classnames("modal", {
       "modal--closing": this.closing,
+      "modal--scrollable": this.scrollable,
       "modal--scrolled": this.scrolled,
+      "modal--scrolled-down": this.scrolledDown,
     });
     return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", role: "document" }, h("flip-button", { class: "modal__close-button", hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("header", { class: "modal__header" }, h("flip-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), h("footer", { class: "modal__controls" }, h("flip-button-group", { wrap: true }, this.secondaryActionLabel && (h("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("flip-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
   }
@@ -100,7 +114,9 @@ const FlipModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "primaryActionLabel": [1, "primary-action-label"],
     "secondaryActionLabel": [1, "secondary-action-label"],
     "closing": [32],
+    "scrollable": [32],
     "scrolled": [32],
+    "scrolledDown": [32],
     "open": [64],
     "close": [64]
   }, [[9, "resize", "onWindowResize"]]]);
@@ -143,5 +159,3 @@ const FlipModal = FlipModal$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { FlipModal, defineCustomElement };
-
-//# sourceMappingURL=flip-modal.js.map