@getflip/swirl-components 0.11.0 → 0.12.0

package/dist/components/swirl-pagination.js

@@ -0,0 +1,101 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$4 } from './swirl-button2.js';
+import { d as defineCustomElement$3 } from './swirl-icon-expand-more2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
+
+const swirlPaginationCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:0}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-right:var(--s-space-16);border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus:not(:focus-visible){outline:none}.pagination__page-select:focus-visible{outline-color:var(--s-focus-default)}.pagination__page-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}";
+
+const SwirlPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.setPage = createEvent(this, "setPage", 7);
+    this.accessibleNextButtonLabel = "Next page";
+    this.accessiblePrevButtonLabel = "Previous page";
+    this.nextButtonLabel = "Next";
+    this.pageLabel = "out of";
+    this.prevButtonLabel = "Prev";
+    this.pageSelectLabel = "Select a page";
+    this.variant = "default";
+    this.onPrevButtonClick = () => {
+      const prevPage = Math.max(this.page - 1, 1);
+      if (this.page === prevPage) {
+        return;
+      }
+      this.setPage.emit(prevPage);
+    };
+    this.onNextButtonClick = () => {
+      const nextPage = Math.min(this.page + 1, this.pages);
+      if (this.page === nextPage) {
+        return;
+      }
+      this.setPage.emit(nextPage);
+    };
+    this.onSelect = (event) => {
+      const page = +event.target.value;
+      if (this.page === page) {
+        return;
+      }
+      this.setPage.emit(page);
+    };
+  }
+  render() {
+    const hideButtonLabels = this.variant !== "advanced";
+    const showPageLabel = this.variant !== "simple";
+    const showDropDown = this.variant === "advanced";
+    const ariaPageLabel = `${this.page} ${this.pageLabel} ${this.pages}`;
+    const className = classnames("pagination", `pagination--variant-${this.variant}`);
+    return (h(Host, null, h("nav", { "aria-label": this.label, class: className }, h("ul", { class: "pagination__list", part: "pagination__list" }, h("li", { class: "pagination__list-item" }, h("swirl-button", { class: "pagination__prev-button", disabled: this.page <= 1, swirlAriaLabel: this.accessiblePrevButtonLabel, hideLabel: hideButtonLabels, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("span", { class: "pagination__page-select-container" }, h("select", { "aria-label": this.pageSelectLabel, class: "pagination__page-select", onChange: this.onSelect }, new Array(this.pages)
+      .fill(undefined)
+      .map((_, index) => index + 1)
+      .map((page) => (h("option", { selected: this.page === page, value: String(page) }, page)))), h("swirl-icon-expand-more", { "aria-hidden": "true", class: "pagination__page-select-icon", size: 16 })), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { class: "pagination__list-item" }, h("swirl-button", { class: "pagination__next-button", disabled: this.page >= this.pages, swirlAriaLabel: this.accessibleNextButtonLabel, hideLabel: hideButtonLabels, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick }))))));
+  }
+  static get style() { return swirlPaginationCss; }
+}, [1, "swirl-pagination", {
+    "accessibleNextButtonLabel": [1, "accessible-next-button-label"],
+    "accessiblePrevButtonLabel": [1, "accessible-prev-button-label"],
+    "nextButtonLabel": [1, "next-button-label"],
+    "pageLabel": [1, "page-label"],
+    "prevButtonLabel": [1, "prev-button-label"],
+    "label": [1],
+    "page": [2],
+    "pages": [2],
+    "pageSelectLabel": [1, "page-select-label"],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-pagination", "swirl-button", "swirl-icon-expand-more", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-pagination":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlPagination$1);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-icon-expand-more":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlPagination = SwirlPagination$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlPagination, defineCustomElement };

package/dist/components/swirl-pdf-reader.d.ts

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

package/dist/components/swirl-pdf-reader.js

@@ -0,0 +1,274 @@
+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 { i as isMobileViewport } from './utils.js';
+import { d as defineCustomElement$i } from './swirl-button2.js';
+import { d as defineCustomElement$h } from './swirl-file-viewer2.js';
+import { d as defineCustomElement$g } from './swirl-file-viewer-audio2.js';
+import { d as defineCustomElement$f } from './swirl-file-viewer-csv2.js';
+import { d as defineCustomElement$e } from './swirl-file-viewer-image2.js';
+import { d as defineCustomElement$d } from './swirl-file-viewer-pdf2.js';
+import { d as defineCustomElement$c } from './swirl-file-viewer-text2.js';
+import { d as defineCustomElement$b } from './swirl-file-viewer-video2.js';
+import { d as defineCustomElement$a } from './swirl-icon-add2.js';
+import { d as defineCustomElement$9 } from './swirl-icon-error2.js';
+import { d as defineCustomElement$8 } from './swirl-icon-expand-more2.js';
+import { d as defineCustomElement$7 } from './swirl-icon-fullscreen2.js';
+import { d as defineCustomElement$6 } from './swirl-icon-fullscreen-exit2.js';
+import { d as defineCustomElement$5 } from './swirl-icon-remove2.js';
+import { d as defineCustomElement$4 } from './swirl-inline-error2.js';
+import { d as defineCustomElement$3 } from './swirl-spinner2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
+
+const swirlPdfReaderCss = ":host{display:block}:host *{box-sizing:border-box}.pdf-reader{position:fixed;z-index:var(--s-z-40);background-color:var(--s-surface-raised-default);inset:0;touch-action:pan-x pan-y}.pdf-reader[aria-hidden=\"true\"]{display:none}.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:0.15s pdf-reader-fade-in;animation:0.15s pdf-reader-fade-in}@media (prefers-reduced-motion){.pdf-reader:not(.pdf-reader--closing) .pdf-reader__body{-webkit-animation:none;animation:none}}.pdf-reader--closing{-webkit-animation:0.15s pdf-reader-fade-out;animation:0.15s pdf-reader-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.pdf-reader--closing{-webkit-animation:none;animation:none}}.pdf-reader__body{position:relative;width:100%;height:100%}.pdf-reader__header{display:flex;height:4rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-8)}.pdf-reader__header-left,.pdf-reader__header-right{display:flex;flex-grow:1;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__header-left,.pdf-reader__header-right{flex-basis:calc(100 / 3 * 1%);flex-grow:0}}.pdf-reader__header-right{justify-content:flex-end}.pdf-reader__header-center{display:none;flex-grow:1;justify-content:center;align-items:center;gap:var(--s-space-16)}@media (min-width: 768px){.pdf-reader__header-center{display:flex}}.pdf-reader__label{overflow:hidden;flex-grow:1;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis}.pdf-reader__zoom-button-container{display:flex;align-items:center;gap:var(--s-space-8)}.pdf-reader__zoom-button-container>*:not(:last-child){position:relative}.pdf-reader__zoom-button-container>*:not(:last-child):after{position:absolute;top:50%;right:calc(-1 * var(--s-space-4));width:var(--s-border-width-default);height:1.5rem;background-color:var(--s-border-default);content:\"\";transform:translate3d(50%, -50%, 0)}.pdf-reader__zoom-select-container{position:relative}.pdf-reader__zoom-select{display:inline-flex;height:2.5rem;padding-right:var(--s-space-12);padding-right:calc(var(--s-space-8) + 1.5rem + var(--s-space-12));padding-left:var(--s-space-12);justify-content:flex-start;align-items:center;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-sm);color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pdf-reader__zoom-select:focus:not(:focus-visible){outline:none}.pdf-reader__zoom-select:focus-visible{outline-color:var(--s-focus-default)}.pdf-reader__zoom-select-icon{position:absolute;top:50%;right:var(--s-space-8);display:inline-flex;transform:translateY(-50%);pointer-events:none}.pdf-reader__content{width:100%;height:calc(100% - 4rem)}.pdf-reader__mobile-zoom-controls{position:absolute;z-index:1;right:var(--s-space-16);bottom:var(--s-space-32);display:flex;padding-bottom:var(--s-space-4);flex-direction:column;gap:var(--s-space-8)}@media (min-width: 768px){.pdf-reader__mobile-zoom-controls{display:none}}.pdf-reader__mobile-zoom-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}.pdf-reader__mobile-zoom-button:disabled{cursor:default}@-webkit-keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@keyframes pdf-reader-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}@keyframes pdf-reader-fade-out{from{opacity:1}to{opacity:0}}";
+
+const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.autoZoomLabel = "Full width";
+    this.closeButtonLabel = "Close PDF viewer";
+    this.downloadButtonLabel = "Download PDF";
+    this.printButtonLabel = "Print PDF";
+    this.zoomInButtonLabel = "Zoom in";
+    this.zoomOutButtonLabel = "Zoom out";
+    this.zoomSelectLabel = "Select zoom";
+    this.active = false;
+    this.closing = false;
+    this.downloading = false;
+    this.desktopZoomSteps = [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
+    this.mobileZoomSteps = [0.5, 0.75, 1, 1.25, 1.5];
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+    };
+    this.onActivate = (event) => {
+      this.pdfViewer = event.detail;
+      this.lockBodyScroll();
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onPrintButtonClick = () => {
+      this.pdfViewer.print();
+    };
+    this.onDownloadButtonClick = async () => {
+      this.downloading = true;
+      await this.viewer.download();
+      this.downloading = false;
+    };
+    this.onZoomInButtonClick = () => {
+      const currentZoomStepIndex = this.zoomSteps.indexOf(+this.zoom);
+      this.zoom =
+        currentZoomStepIndex === -1
+          ? 1
+          : this.zoomSteps[Math.min(this.zoomSteps.length - 1, currentZoomStepIndex + 1)];
+    };
+    this.onZoomOutButtonClick = () => {
+      const currentZoomStepIndex = this.zoomSteps.indexOf(+this.zoom);
+      this.zoom =
+        currentZoomStepIndex === -1
+          ? 1
+          : this.zoomSteps[Math.max(0, currentZoomStepIndex - 1)];
+    };
+    this.onZoomAutoButtonClick = () => {
+      this.zoom = this.zoom === "auto" ? 1 : "auto";
+    };
+    this.onZoomChange = (event) => {
+      const value = event.target.value;
+      this.zoom = value === "auto" ? value : +value;
+    };
+  }
+  componentWillLoad() {
+    this.updateZoomSteps();
+    this.zoom = isMobileViewport() ? "auto" : 1;
+  }
+  componentDidLoad() {
+    this.modal = new A11yDialog(this.modalEl);
+  }
+  disconnectedCallback() {
+    var _a;
+    this.unlockBodyScroll();
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  onWindowResize() {
+    if (!Boolean(this.pdfViewer)) {
+      return;
+    }
+    this.updateZoomSteps();
+    this.zoom = isMobileViewport() ? "auto" : 1;
+  }
+  /**
+   * Open the reader.
+   */
+  async open() {
+    this.modal.show();
+    this.active = true;
+  }
+  /**
+   * Close the reader.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.closing = false;
+      this.active = false;
+    }, 150);
+  }
+  lockBodyScroll() {
+    const scrollContainer = this.pdfViewer.shadowRoot.querySelector(".file-viewer-pdf__pages");
+    if (Boolean(scrollContainer)) {
+      disableBodyScroll(scrollContainer);
+    }
+  }
+  unlockBodyScroll() {
+    const scrollContainer = this.pdfViewer.shadowRoot.querySelector(".file-viewer-pdf__pages");
+    if (Boolean(scrollContainer)) {
+      enableBodyScroll(scrollContainer);
+    }
+  }
+  updateZoomSteps() {
+    this.zoomSteps = isMobileViewport()
+      ? this.mobileZoomSteps
+      : this.desktopZoomSteps;
+  }
+  render() {
+    const className = classnames("pdf-reader", {
+      "pdf-reader--closing": this.closing,
+    });
+    return (h(Host, null, h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { class: "pdf-reader__body", role: "document" }, h("header", { class: "pdf-reader__header" }, h("span", { class: "pdf-reader__header-left" }, h("swirl-button", { class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { class: "pdf-reader__label" }, this.label)), h("span", { class: "pdf-reader__header-center" }, h("span", { class: "pdf-reader__zoom-button-container" }, h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { class: "pdf-reader__zoom-select-container" }, h("select", { "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { class: "pdf-reader__zoom-select-icon" }))), h("span", { class: "pdf-reader__header-right" }, h("swirl-button", { class: "pdf-reader__print-button", hideLabel: true, icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick }), h("swirl-button", { class: "pdf-reader__download-button", disabled: this.downloading, hideLabel: true, icon: !this.downloading
+        ? "<swirl-icon-download></swirl-icon-download>"
+        : '<swirl-spinner size="s"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick }))), h("div", { class: "pdf-reader__content" }, h("swirl-file-viewer", { active: this.active, file: this.file, onActivate: this.onActivate, ref: (el) => (this.viewer = el), type: "application/pdf", zoom: this.zoom }), h("div", { class: "pdf-reader__mobile-zoom-controls" }, h("button", { "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", null)), h("button", { "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", null))))))));
+  }
+  get el() { return this; }
+  static get style() { return swirlPdfReaderCss; }
+}, [1, "swirl-pdf-reader", {
+    "autoZoomLabel": [1, "auto-zoom-label"],
+    "closeButtonLabel": [1, "close-button-label"],
+    "downloadButtonLabel": [1, "download-button-label"],
+    "file": [1],
+    "label": [1],
+    "printButtonLabel": [1, "print-button-label"],
+    "zoomInButtonLabel": [1, "zoom-in-button-label"],
+    "zoomOutButtonLabel": [1, "zoom-out-button-label"],
+    "zoomSelectLabel": [1, "zoom-select-label"],
+    "active": [32],
+    "closing": [32],
+    "downloading": [32],
+    "zoom": [32],
+    "zoomSteps": [32],
+    "open": [64],
+    "close": [64]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-pdf-reader", "swirl-button", "swirl-file-viewer", "swirl-file-viewer-audio", "swirl-file-viewer-csv", "swirl-file-viewer-image", "swirl-file-viewer-pdf", "swirl-file-viewer-text", "swirl-file-viewer-video", "swirl-icon-add", "swirl-icon-error", "swirl-icon-expand-more", "swirl-icon-fullscreen", "swirl-icon-fullscreen-exit", "swirl-icon-remove", "swirl-inline-error", "swirl-spinner", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-pdf-reader":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlPdfReader$1);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "swirl-file-viewer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "swirl-file-viewer-audio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "swirl-file-viewer-csv":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "swirl-file-viewer-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "swirl-file-viewer-pdf":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "swirl-file-viewer-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "swirl-file-viewer-video":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "swirl-icon-add":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "swirl-icon-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "swirl-icon-expand-more":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "swirl-icon-fullscreen":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "swirl-icon-fullscreen-exit":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "swirl-icon-remove":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "swirl-inline-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlPdfReader = SwirlPdfReader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlPdfReader, defineCustomElement };

package/dist/components/swirl-popover.d.ts

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

package/dist/components/swirl-popover.js

@@ -0,0 +1,6 @@
+import { S as SwirlPopover$1, d as defineCustomElement$1 } from './swirl-popover2.js';
+
+const SwirlPopover = SwirlPopover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlPopover, defineCustomElement };

package/dist/components/swirl-popover2.js

@@ -0,0 +1,252 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as computePosition, a as autoUpdate, o as offset, s as shift, f as flip } from './floating-ui.dom.esm.js';
+import { e as enableBodyScroll, d as disableBodyScroll } from './bodyScrollLock.esm.js';
+import { c as classnames } from './index2.js';
+import { i as isMobileViewport, q as querySelectorAllDeep } from './utils.js';
+
+const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in-xy;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-fade-scale-in-y;animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-sm);-webkit-animation:none;animation:none;box-shadow:var(--s-shadow-level-1)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@-webkit-keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
+
+const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.popoverClose = createEvent(this, "popoverClose", 7);
+    this.popoverOpen = createEvent(this, "popoverOpen", 7);
+    this.animation = "scale-in-xy";
+    this.enableFlip = true;
+    this.offset = 8;
+    this.placement = "bottom-start";
+    this.active = false;
+    this.closing = false;
+    this.toggle = (event) => {
+      event.stopPropagation();
+      if (this.active) {
+        this.close();
+      }
+      else {
+        this.open();
+      }
+    };
+    this.onKeydown = (event) => {
+      if (event.code === "Escape" && this.active) {
+        event.stopPropagation();
+        this.close();
+      }
+    };
+    this.reposition = async () => {
+      const mobile = isMobileViewport();
+      if (!Boolean(this.triggerEl) || !Boolean(this.contentContainer)) {
+        return;
+      }
+      if (mobile) {
+        this.position = undefined;
+        return;
+      }
+      const offsetOptions = typeof this.offset === "number"
+        ? { mainAxis: this.offset, crossAxis: 0 }
+        : { mainAxis: this.offset[0], crossAxis: this.offset[1] };
+      const middleware = this.enableFlip
+        ? [offset(offsetOptions), shift(), flip()]
+        : [offset(offsetOptions), shift()];
+      this.position = await computePosition(this.triggerEl, this.contentContainer, {
+        middleware,
+        placement: this.placement,
+        strategy: "fixed",
+      });
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+  }
+  componentDidLoad() {
+    this.connectTrigger();
+    this.updateFocusableChildren();
+    this.updateTriggerAttributes();
+  }
+  disconnectedCallback() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  onWindowFocusIn(event) {
+    if (!this.active) {
+      return;
+    }
+    const target = event.target;
+    const popoverLostFocus = !this.el.contains(target);
+    if (popoverLostFocus) {
+      this.close();
+    }
+  }
+  onWindowClick(event) {
+    if (!this.active) {
+      return;
+    }
+    const target = event.target;
+    const clickedChild = this.el.contains(target);
+    const clickedShadowChild = event
+      .composedPath()
+      .some((el) => Boolean(el) && el instanceof Node
+      ? this.el.contains(el)
+      : false);
+    const clickedTrigger = event.target === this.triggerEl;
+    if (!clickedChild && !clickedShadowChild && !clickedTrigger) {
+      this.close();
+    }
+  }
+  /**
+   * Close the popover.
+   * @returns
+   */
+  async close() {
+    var _a;
+    if (this.closing || !this.active) {
+      return;
+    }
+    this.popoverClose.emit();
+    if (this.disableAutoUpdate) {
+      this.disableAutoUpdate();
+    }
+    this.closing = true;
+    setTimeout(() => {
+      this.active = false;
+      this.closing = false;
+      this.updateTriggerAttributes();
+    }, 150);
+    this.unlockBodyScroll();
+    (_a = this.getNativeTriggerElement()) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /**
+   * Open the popover.
+   * @returns
+   */
+  async open() {
+    if (this.active) {
+      return;
+    }
+    this.adjustWidth();
+    this.active = true;
+    this.popoverOpen.emit();
+    this.updateFocusableChildren();
+    this.updateTriggerAttributes();
+    requestAnimationFrame(async () => {
+      await this.reposition();
+      if (this.focusableChildren.length > 0) {
+        this.focusableChildren[0].focus();
+      }
+      else {
+        this.contentContainer.focus();
+      }
+      if (this.disableAutoUpdate) {
+        this.disableAutoUpdate();
+      }
+      this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
+      this.scrollContainer.scrollTop = 0;
+      this.lockBodyScroll();
+    });
+  }
+  connectTrigger() {
+    this.triggerEl = querySelectorAllDeep(document.body, `#${this.trigger}`)[0];
+    if (!Boolean(this.triggerEl)) {
+      return;
+    }
+    this.triggerEl.addEventListener("click", (event) => {
+      this.toggle(event);
+    });
+  }
+  getNativeTriggerElement() {
+    var _a, _b, _c;
+    return this.triggerEl.tagName.startsWith("SWIRL-")
+      ? (((_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.children[0]) ||
+        ((_c = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.children[0]) ||
+        this.triggerEl)
+      : this.triggerEl;
+  }
+  updateTriggerAttributes() {
+    if (!Boolean(this.triggerEl)) {
+      return;
+    }
+    const nativeTriggerEl = this.getNativeTriggerElement();
+    nativeTriggerEl.setAttribute("aria-controls", this.popoverId);
+    nativeTriggerEl.setAttribute("aria-expanded", String(this.active));
+    nativeTriggerEl.setAttribute("aria-haspopup", "dialog");
+  }
+  updateFocusableChildren() {
+    this.focusableChildren = querySelectorAllDeep(this.el, '[role="menuitem"], [role="listbox"]');
+  }
+  adjustWidth() {
+    let useContainerWidth = this.useContainerWidth;
+    if ([true, "true"].includes(this.useContainerWidth)) {
+      useContainerWidth = true;
+    }
+    else if ([false, "false"].includes(this.useContainerWidth)) {
+      useContainerWidth = false;
+    }
+    const mobile = !window.matchMedia("(min-width: 768px)").matches;
+    if (Boolean(useContainerWidth) && !mobile) {
+      const container = typeof useContainerWidth === "string"
+        ? this.el.closest(useContainerWidth) || this.el.parentElement
+        : this.el.parentElement;
+      this.contentContainer.style.maxWidth = "none";
+      this.contentContainer.style.width =
+        container.getBoundingClientRect().width + "px";
+    }
+    else {
+      this.contentContainer.style.maxWidth = "";
+      this.contentContainer.style.width = "";
+    }
+  }
+  lockBodyScroll() {
+    const mobile = isMobileViewport();
+    if (!mobile) {
+      return;
+    }
+    disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    var _a, _b;
+    const className = classnames("popover", `popover--animation-${this.animation}`, {
+      "popover--closing": this.closing,
+      "popover--active": this.active,
+      "popover--inactive": !this.active,
+    });
+    return (h(Host, { id: this.popoverId }, h("div", { class: className, onKeyDown: this.onKeydown }, h("div", { "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        top: Boolean(this.position) ? `${(_a = this.position) === null || _a === void 0 ? void 0 : _a.y}px` : "",
+        left: Boolean(this.position) ? `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px` : "",
+      }, tabindex: "-1" }, h("span", { class: "popover__handle" }), h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, h("slot", null))), this.active && (h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+  }
+  get el() { return this; }
+  static get style() { return swirlPopoverCss; }
+}, [1, "swirl-popover", {
+    "animation": [1],
+    "enableFlip": [4, "enable-flip"],
+    "label": [1],
+    "offset": [2],
+    "placement": [1],
+    "popoverId": [1, "popover-id"],
+    "trigger": [1],
+    "useContainerWidth": [8, "use-container-width"],
+    "active": [32],
+    "closing": [32],
+    "position": [32],
+    "close": [64],
+    "open": [64]
+  }, [[8, "focusin", "onWindowFocusIn"], [8, "click", "onWindowClick"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-popover"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-popover":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlPopover);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlPopover as S, defineCustomElement as d };