@getflip/swirl-components 0.11.0 → 0.12.0

package/dist/cjs/swirl-list.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+
+const swirlListCss = ":host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:\"•\"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) \".\";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) \".\";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentDidRender() {
+    const children = Array.from(this.containerEl.children);
+    if (children.some((child) => !["UL", "OL"].includes(child.tagName))) {
+      console.warn("[SwirlList] Only ul and ol elements are allowed as direct children of <swirl-list />.");
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "swirl-list", ref: (el) => (this.containerEl = el) }, index.h("slot", null))));
+  }
+};
+SwirlList.style = swirlListCss;
+
+exports.swirl_list = SwirlList;

package/dist/cjs/swirl-modal.cjs.entry.js

@@ -0,0 +1,112 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
+const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
+const index$1 = require('./index-e038b0f7.js');
+require('./_commonjsHelpers-a5111d61.js');
+
+const swirlModalCss = ":host{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-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-color: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:var(--s-shadow-level-3)}}.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:var(--s-border-width-default) solid transparent}}.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 SwirlModal = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.modalClose = index.createEvent(this, "modalClose", 7);
+    this.modalOpen = index.createEvent(this, "modalOpen", 7);
+    this.primaryAction = index.createEvent(this, "primaryAction", 7);
+    this.secondaryAction = index.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();
+      }
+    };
+    this.onBackdropClick = () => {
+      this.close();
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onPrimaryAction = (event) => {
+      this.primaryAction.emit(event);
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+    };
+    this.determineScrollStatus = () => {
+      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() {
+    this.modal = new a11yDialog_esm.A11yDialog(this.modalEl);
+    this.determineScrollStatus();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.unlockBodyScroll();
+  }
+  onWindowResize() {
+    this.determineScrollStatus();
+  }
+  /**
+   * Open the modal.
+   */
+  async open() {
+    this.modal.show();
+    this.modalOpen.emit();
+    this.lockBodyScroll();
+    this.determineScrollStatus();
+  }
+  /**
+   * Close the modal.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.modalClose.emit();
+      this.closing = false;
+    }, 150);
+  }
+  lockBodyScroll() {
+    bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    const className = index$1.classnames("modal", {
+      "modal--closing": this.closing,
+      "modal--scrollable": this.scrollable,
+      "modal--scrolled": this.scrolled,
+      "modal--scrolled-down": this.scrolledDown,
+    });
+    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { class: "modal__body", role: "document" }, index.h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("header", { class: "modal__header" }, index.h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })), index.h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", null)), index.h("footer", { class: "modal__controls" }, index.h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
+  }
+};
+SwirlModal.style = swirlModalCss;
+
+exports.swirl_modal = SwirlModal;

package/dist/cjs/swirl-option-list-section.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+
+const swirlOptionListSectionCss = ":host{display:block}:host *{box-sizing:border-box}.option-list-section{background-color:var(--s-surface-overlay-default)}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlOptionListSection = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { "aria-labelledby": "label", class: "option-list-section", role: "group" }, index.h("span", { class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), index.h("div", { class: "option-list-section__items" }, index.h("slot", null)))));
+  }
+};
+SwirlOptionListSection.style = swirlOptionListSectionCss;
+
+exports.swirl_option_list_section = SwirlOptionListSection;

package/dist/cjs/swirl-pagination.cjs.entry.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-e038b0f7.js');
+require('./_commonjsHelpers-a5111d61.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.setPage = index.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 = index$1.classnames("pagination", `pagination--variant-${this.variant}`);
+    return (index.h(index.Host, null, index.h("nav", { "aria-label": this.label, class: className }, index.h("ul", { class: "pagination__list", part: "pagination__list" }, index.h("li", { class: "pagination__list-item" }, index.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 ? (index.h("li", { class: "pagination__list-item" }, index.h("span", null, showDropDown ? (index.h("span", { "aria-current": "page", class: "pagination__advanced-label" }, index.h("span", { class: "pagination__page-select-container" }, index.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) => (index.h("option", { selected: this.page === page, value: String(page) }, page)))), index.h("swirl-icon-expand-more", { "aria-hidden": "true", class: "pagination__page-select-icon", size: 16 })), index.h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages))) : (index.h("span", { "aria-current": "page" }, ariaPageLabel))))) : (index.h("li", { class: "pagination__list-item" }, index.h("swirl-visually-hidden", null, index.h("span", { "aria-current": "page" }, ariaPageLabel)))), index.h("li", { class: "pagination__list-item" }, index.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 }))))));
+  }
+};
+SwirlPagination.style = swirlPaginationCss;
+
+exports.swirl_pagination = SwirlPagination;

package/dist/cjs/swirl-pdf-reader.cjs.entry.js

@@ -0,0 +1,141 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
+const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
+const index$1 = require('./index-e038b0f7.js');
+const utils = require('./utils-9c9476b4.js');
+require('./_commonjsHelpers-a5111d61.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    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 = utils.isMobileViewport() ? "auto" : 1;
+  }
+  componentDidLoad() {
+    this.modal = new a11yDialog_esm.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 = utils.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)) {
+      bodyScrollLock_esm.disableBodyScroll(scrollContainer);
+    }
+  }
+  unlockBodyScroll() {
+    const scrollContainer = this.pdfViewer.shadowRoot.querySelector(".file-viewer-pdf__pages");
+    if (Boolean(scrollContainer)) {
+      bodyScrollLock_esm.enableBodyScroll(scrollContainer);
+    }
+  }
+  updateZoomSteps() {
+    this.zoomSteps = utils.isMobileViewport()
+      ? this.mobileZoomSteps
+      : this.desktopZoomSteps;
+  }
+  render() {
+    const className = index$1.classnames("pdf-reader", {
+      "pdf-reader--closing": this.closing,
+    });
+    return (index.h(index.Host, null, index.h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { class: "pdf-reader__body", role: "document" }, index.h("header", { class: "pdf-reader__header" }, index.h("span", { class: "pdf-reader__header-left" }, index.h("swirl-button", { class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), index.h("span", { class: "pdf-reader__label" }, this.label)), index.h("span", { class: "pdf-reader__header-center" }, index.h("span", { class: "pdf-reader__zoom-button-container" }, index.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 }), index.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 })), index.h("span", { class: "pdf-reader__zoom-select-container" }, index.h("select", { "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, index.h("option", { selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (index.h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), index.h("swirl-icon-expand-more", { class: "pdf-reader__zoom-select-icon" }))), index.h("span", { class: "pdf-reader__header-right" }, index.h("swirl-button", { class: "pdf-reader__print-button", hideLabel: true, icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick }), index.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 }))), index.h("div", { class: "pdf-reader__content" }, index.h("swirl-file-viewer", { active: this.active, file: this.file, onActivate: this.onActivate, ref: (el) => (this.viewer = el), type: "application/pdf", zoom: this.zoom }), index.h("div", { class: "pdf-reader__mobile-zoom-controls" }, index.h("button", { "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (index.h("swirl-icon-fullscreen-exit", null)) : (index.h("swirl-icon-fullscreen", null))), index.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" }, index.h("swirl-icon-add", null)), index.h("button", { "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, index.h("swirl-icon-remove", null))))))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlPdfReader.style = swirlPdfReaderCss;
+
+exports.swirl_pdf_reader = SwirlPdfReader;

package/dist/cjs/swirl-popover.cjs.entry.js

@@ -0,0 +1,227 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-75453e4e.js');
+const bodyScrollLock_esm = require('./bodyScrollLock.esm-f29f1a77.js');
+const index$1 = require('./index-e038b0f7.js');
+const utils = require('./utils-9c9476b4.js');
+require('./_commonjsHelpers-a5111d61.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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.popoverClose = index.createEvent(this, "popoverClose", 7);
+    this.popoverOpen = index.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 = utils.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
+        ? [floatingUi_dom_esm.offset(offsetOptions), floatingUi_dom_esm.shift(), floatingUi_dom_esm.flip()]
+        : [floatingUi_dom_esm.offset(offsetOptions), floatingUi_dom_esm.shift()];
+      this.position = await floatingUi_dom_esm.computePosition(this.triggerEl, this.contentContainer, {
+        middleware,
+        placement: this.placement,
+        strategy: "fixed",
+      });
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+  }
+  componentDidLoad() {
+    this.connectTrigger();
+    this.updateFocusableChildren();
+    this.updateTriggerAttributes();
+  }
+  disconnectedCallback() {
+    bodyScrollLock_esm.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 = floatingUi_dom_esm.autoUpdate(this.triggerEl, this.contentContainer, this.reposition);
+      this.scrollContainer.scrollTop = 0;
+      this.lockBodyScroll();
+    });
+  }
+  connectTrigger() {
+    this.triggerEl = utils.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 = utils.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 = utils.isMobileViewport();
+    if (!mobile) {
+      return;
+    }
+    bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    bodyScrollLock_esm.enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    var _a, _b;
+    const className = index$1.classnames("popover", `popover--animation-${this.animation}`, {
+      "popover--closing": this.closing,
+      "popover--active": this.active,
+      "popover--inactive": !this.active,
+    });
+    return (index.h(index.Host, { id: this.popoverId }, index.h("div", { class: className, onKeyDown: this.onKeydown }, index.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" }, index.h("span", { class: "popover__handle" }), index.h("div", { class: "popover__scroll-container", ref: (el) => (this.scrollContainer = el) }, index.h("slot", null))), this.active && (index.h("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlPopover.style = swirlPopoverCss;
+
+exports.swirl_popover = SwirlPopover;

package/dist/cjs/swirl-progress-indicator.cjs.entry.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-e038b0f7.js');
+require('./_commonjsHelpers-a5111d61.js');
+
+const swirlProgressIndicatorCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-surface-highlight-default);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}";
+
+const SwirlProgressIndicator = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = "m";
+    this.value = 0;
+    this.variant = "bar";
+  }
+  render() {
+    const className = index$1.classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
+    const strokeWidth = this.size === "m" ? 4 : 2;
+    const radius = this.size === "m" ? 20 : 10;
+    const circumference = Math.round(radius * 2 * Math.PI);
+    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
+    return (index.h(index.Host, { class: this.variant }, this.variant === "bar" && (index.h("progress", { "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (index.h("span", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, index.h("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, index.h("circle", { class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), index.h("circle", { class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+  }
+};
+SwirlProgressIndicator.style = swirlProgressIndicatorCss;
+
+exports.swirl_progress_indicator = SwirlProgressIndicator;