@getflip/swirl-components-react 0.449.0 → 0.450.0

package/dist/swirl-modal.entry.244fd918.js

@@ -0,0 +1,194 @@
+import { r as p, c as s, h as e, H as g, g as _ } from "./index.2fce870a.js";
+import { d as h, e as b } from "./bodyScrollLock.esm-B0kNlhKL.c7a66a82.js";
+import { c as f } from "./index-orsBiyT_.fc4357c3.js";
+import { t as u } from "./index.esm-DBTxpXCn.fccbd562.js";
+import "react";
+import "react-dom";
+const v = `:host{display:block}:host *{box-sizing:border-box}.modal{--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);--swirl-resource-list-item-background-default:var(
+    --s-surface-overlay-default
+  );--swirl-resource-list-item-background-hovered:var(
+    --s-surface-overlay-hovered
+  );--swirl-resource-list-item-background-pressed:var(
+    --s-surface-overlay-pressed
+  );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)
+    var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)
+    var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(
+      var(--swirl-modal-max-width) +
+        var(--swirl-modal-max-secondary-content-width)
+    )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(
+      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)
+    )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top: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{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,
+    max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{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:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(
+      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +
+        var(--swirl-modal-max-secondary-content-width)
+    )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}`, w = class {
+  constructor(a) {
+    p(this, a), this.toggleFullscreen = s(this, "toggleFullscreen", 3), this.modalClose = s(this, "modalClose", 3), this.modalOpen = s(this, "modalOpen", 3), this.primaryAction = s(this, "primaryAction", 3), this.requestModalClose = s(this, "requestModalClose", 3), this.secondaryAction = s(this, "secondaryAction", 3), this.sidebarClose = s(this, "sidebarClose", 3), this.toggleDialog = s(this, "toggleDialog", 7), this.closable = !0, this.closeButtonLabel = "Close modal", this.fullscreenEnableButtonLabel = "Full screen", this.fullscreenDisableButtonLabel = "Exit full screen", this.padded = !0, this.variant = "default", this.sidebarPadded = !0, this.sidebarFooterPadded = !0, this.sidebarCloseButtonLabel = "Close sidebar", this.opening = !1, this.isFullscreen = !1, this.isFullscreenTransitioning = !1, this.closing = !1, this.scrollable = !1, this.scrolled = !1, this.scrolledDown = !1, this.sidebarScrolled = !1, this.sidebarScrolledDown = !1, this.sidebarScrollable = !1, this.onKeyDown = (o) => {
+      o.code === "Escape" && (o.stopImmediatePropagation(), o.preventDefault(), this.close());
+    }, this.onClose = () => {
+      this.closing = !1, this.unlockBodyScroll(), this.modalClose.emit();
+    }, this.onToggle = (o) => {
+      this.toggleDialog.emit({
+        newState: o.newState,
+        dialog: this.modalEl
+      });
+    }, this.onBackdropClick = () => {
+      this.close();
+    }, this.onCloseButtonClick = () => {
+      this.close();
+    }, this.onFullscreenButtonClick = () => {
+      this.setFullscreen(!this.isFullscreen);
+    }, this.onSidebarCloseButtonClick = () => {
+      this.hideSidebarContent = !0, this.sidebarClose.emit();
+    }, this.onPrimaryAction = (o) => {
+      this.primaryAction.emit(o);
+    }, this.onSecondaryAction = (o) => {
+      this.secondaryAction.emit(o);
+    }, this.determineScrollStatus = () => {
+      this.determineMainScrollStatus(), this.determineSidebarScrollStatus();
+    }, this.determineMainScrollStatus = () => {
+      var l, r, i, n, c, m;
+      const o = ((l = this.scrollContainer) == null ? void 0 : l.scrollTop) > 0, d = Math.ceil(((r = this.scrollContainer) == null ? void 0 : r.scrollTop) + ((i = this.scrollContainer) == null ? void 0 : i.offsetHeight)) >= ((n = this.scrollContainer) == null ? void 0 : n.scrollHeight), t = ((c = this.scrollContainer) == null ? void 0 : c.scrollHeight) > ((m = this.scrollContainer) == null ? void 0 : m.offsetHeight);
+      o !== this.scrolled && (this.scrolled = o), d !== this.scrolledDown && (this.scrolledDown = d), t !== this.scrollable && (this.scrollable = t);
+    }, this.determineSidebarScrollStatus = () => {
+      var l, r, i, n, c, m;
+      const o = ((l = this.sidebarScrollContainer) == null ? void 0 : l.scrollTop) > 0, d = Math.ceil(((r = this.sidebarScrollContainer) == null ? void 0 : r.scrollTop) + ((i = this.sidebarScrollContainer) == null ? void 0 : i.offsetHeight)) >= ((n = this.sidebarScrollContainer) == null ? void 0 : n.scrollHeight), t = ((c = this.sidebarScrollContainer) == null ? void 0 : c.scrollHeight) > ((m = this.sidebarScrollContainer) == null ? void 0 : m.offsetHeight);
+      o !== this.sidebarScrolled && (this.sidebarScrolled = o), d !== this.sidebarScrolledDown && (this.sidebarScrolledDown = d), t !== this.sidebarScrollable && (this.sidebarScrollable = t);
+    };
+  }
+  componentDidLoad() {
+    this.ensureOpening(), this.setDialogCustomProps(), this.determineScrollStatus(), this.updateCustomFooterStatus(), this.updateCustomHeaderStatus(), this.updateHeaderToolsStatus(), this.updateSecondaryContentStatus(), this.updateSidebarContentStatus(), this.updateSidebarFooterStatus();
+  }
+  disconnectedCallback() {
+    var a, o;
+    (a = this.mutationObserver) == null || a.disconnect(), (o = this.modalEl) != null && o.open && this.modalEl.close(), this.unlockBodyScroll();
+  }
+  onWindowResize() {
+    this.determineScrollStatus();
+  }
+  async open(a) {
+    this.opening = !0, this.temporaryReturnFocusTo = a, this.modalEl && (this.setupMutationObserver(), this.modalEl.showModal(), this.modalOpen.emit(), this.mutationObserver.observe(this.modalEl, {
+      subtree: !0,
+      childList: !0
+    }), this.lockBodyScroll(), this.determineScrollStatus(), setTimeout(() => {
+      this.handleAutoFocus();
+    }, 200));
+  }
+  async close(a) {
+    this.closing || (a || this.requestModalClose.emit(), !(!this.closable && !a) && (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
+      var o;
+      (o = this.mutationObserver) == null || o.disconnect(), this.modalEl.close(), this.customFocusReturn();
+    }, 150)));
+  }
+  async setFullscreen(a) {
+    this.isFullscreen !== a && (this.isFullscreenTransitioning = !0, this.isFullscreen = a, this.toggleFullscreen.emit(this.isFullscreen), setTimeout(() => this.isFullscreenTransitioning = !1, 150));
+  }
+  async getScrollContainer() {
+    return this.scrollContainer;
+  }
+  updateCustomFooterStatus() {
+    this.hasCustomFooter = Boolean(this.el.querySelector(':scope > [slot="custom-footer"]'));
+  }
+  updateCustomHeaderStatus() {
+    this.hasCustomHeader = Boolean(this.el.querySelector(':scope > [slot="custom-header"]'));
+  }
+  updateHeaderToolsStatus() {
+    this.hasHeaderTools = Boolean(this.el.querySelector(':scope > [slot="header-tools"]'));
+  }
+  updateSecondaryContentStatus() {
+    this.hasSecondaryContent = Boolean(this.el.querySelector(':scope > [slot="secondary-content"]'));
+  }
+  updateSidebarContentStatus() {
+    this.hasSidebarContent = Boolean(this.el.querySelector(':scope > [slot="sidebar-content"]'));
+  }
+  updateSidebarFooterStatus() {
+    this.hasSidebarFooter = Boolean(this.el.querySelector(':scope > [slot="sidebar-footer"]'));
+  }
+  handleAutoFocus() {
+    var a;
+    (a = this.el.querySelector("input[autofocus]")) == null || a.focus();
+  }
+  lockBodyScroll() {
+    h(this.scrollContainer), h(this.sidebarScrollContainer);
+  }
+  setupMutationObserver() {
+    this.mutationObserver = new MutationObserver(() => {
+      var a, o;
+      !((a = this.modalEl) != null && a.open) || document.activeElement === document.body && ((o = u(this.modalEl).at(0)) == null || o.focus());
+    });
+  }
+  unlockBodyScroll() {
+    this.scrollContainer && b(this.scrollContainer), this.sidebarScrollContainer && b(this.sidebarScrollContainer);
+  }
+  ensureOpening() {
+    var a;
+    this.opening && !((a = this.modalEl) != null && a.open) && this.open();
+  }
+  setDialogCustomProps() {
+    this.modalEl.setAttribute("closedby", "none");
+  }
+  customFocusReturn() {
+    var t;
+    const a = (t = this.temporaryReturnFocusTo) != null ? t : this.returnFocusTo;
+    if (!a)
+      return;
+    const o = typeof a == "string" ? document.querySelector(a) : a, d = u(o, {
+      includeContainer: !0,
+      getShadowRoot: !0
+    });
+    d.length > 0 && d[0].focus(), this.temporaryReturnFocusTo = void 0;
+  }
+  render() {
+    const a = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel), o = f("modal", `modal--variant-${this.variant}`, {
+      "modal--closing": this.closing,
+      "modal--fullscreen": this.isFullscreen,
+      "modal--fullscreen-transitioning": this.isFullscreenTransitioning,
+      "modal--has-custom-footer": this.hasCustomFooter,
+      "modal--has-custom-header": this.hasCustomHeader,
+      "modal--has-header-tools": this.hasHeaderTools,
+      "modal--has-secondary-content": this.hasSecondaryContent && !this.hideSecondaryContent,
+      "modal--hide-label": this.hideLabel,
+      "modal--padded": this.padded,
+      "modal--scrollable": this.scrollable,
+      "modal--scrolled": this.scrolled,
+      "modal--hide-scrolled-header-border": this.hideScrolledHeaderBorder,
+      "modal--scrolled-down": this.scrolledDown,
+      "modal--hide-secondary-content-borders": this.hideSecondaryContentBorders,
+      "modal--has-sidebar-content": this.hasSidebarContent && !this.hideSidebarContent,
+      "modal--sidebar-padded": this.sidebarPadded,
+      "modal--has-sidebar-footer": this.hasSidebarFooter && this.hasSidebarContent && !this.hideSidebarContent,
+      "modal--sidebar-footer-padded": this.sidebarFooterPadded,
+      "modal--sidebar-scrolled": this.sidebarScrolled,
+      "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
+      "modal--sidebar-scrollable": this.sidebarScrollable
+    });
+    return e(g, { key: "61ffab6a33f8fee6e6a12c4805d94ac8a900dc77" }, e("dialog", { key: "13069fa5bfbd16f34662272f82a30de0aa402df7", "aria-label": this.label, class: o, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (d) => this.modalEl = d }, e("div", { key: "655377a1c2e116d3ad42041d8b38001fd50ad505", class: "modal__backdrop", onClick: this.onBackdropClick }), e("div", { key: "8bab4ab4bebe63c79a8e30b5cb969215ef695dd4", class: "modal__body", part: "modal__body", style: this.isFullscreen ? {} : {
+      "--swirl-modal-max-height": this.maxHeight,
+      "--swirl-modal-height": this.height,
+      minHeight: this.minHeight,
+      maxWidth: this.maxWidth
+    } }, e("aside", { key: "e73a7003c0445e6014d99a843f2a1024fa5dfabd", class: "modal__sidebar" }, this.sidebarLabel && e("header", { key: "2f5caf3be132b3712565fc669b31ad179659f82f", class: f("modal__sidebar-header", {
+      "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton
+    }) }, this.hasSidebarCloseButton && e("swirl-button", { key: "7f80ac736fff2c8c23154b69b4f7ec3849767fc8", hideLabel: !0, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), e("swirl-heading", { key: "4d7f033bc87f4c1695bdd727a2879d641831403b", as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel })), e("div", { key: "ffaeb97210b589d67d7d3c7bf4e7012dc88ac2be", class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (d) => this.sidebarScrollContainer = d }, e("slot", { key: "ec46ede2b5b15e2b875dc79c09f3f20f149bb7fb", name: "sidebar-content" })), e("div", { key: "0b38548f46422f3bae761c1d96de83e8b26ff7fb", class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, e("slot", { key: "22a1e5ce8b7e2e9ffc13cc47f94980e2ba167a5a", name: "sidebar-footer" }))), e("div", { key: "e3832e0c0762d3dbd783947c085d0d71d8132af8", class: "modal__main-content" }, e("header", { key: "579f410f5f5ec72b4417133cec992d63805e560b", class: "modal__custom-header", part: "modal__custom-header" }, e("slot", { key: "01b27a350d01240b31f7324987f9be54a1ee5ce7", name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && e("header", { key: "05bd390544271123a4a88779ad0517d7d3a91087", class: "modal__header" }, e("div", { key: "323781d228352b5e255b12390f1e805f576df850", class: "modal__header-bar" }, !this.hideCloseButton && e("swirl-button", { key: "c6a0ed8bc4570ffb033d02a192dc98a5b2146f2d", class: "modal__close-button", hideLabel: !0, icon: this.variant === "default" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), this.showFullscreenButton && e("swirl-button", { key: "b7e7ce93192ef096f25cf4f5e4bc8f281f8c69af", class: "modal__fullscreen-button", hideLabel: !0, icon: this.isFullscreen ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>" : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen ? this.fullscreenDisableButtonLabel : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick }), !this.hideLabel && e("swirl-heading", { key: "efb34f855b39a80247923792c4222bac3e0858ef", as: "h2", class: "modal__heading", level: 3, text: this.label }))), e("div", { key: "152770903da15057110292671f1c065eb666c18e", class: "modal__content-container", style: {
+      gap: this.contentGap ? `var(--s-space-${this.contentGap})` : void 0
+    } }, e("div", { key: "bbc24ff889924ae2aeb3c86582c0065713991b0f", class: "modal__primary-content", style: {
+      maxWidth: this.primaryContentMaxWidth,
+      flex: this.primaryContentFlex
+    } }, e("div", { key: "7ba9d08b64a0dbf1f53a916546fbd0c7946520dd", class: "modal__header-tools", part: "modal__header-tools" }, e("slot", { key: "355a7aa17905eeb678f1cd1c187cf5cad56bc415", name: "header-tools" })), e("div", { key: "29b5dc1de4c6781241dffb39e08d166dc79d20c9", class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (d) => this.scrollContainer = d }, e("slot", { key: "645ad81ca4d11aa3c73fbac26b3ce2db55ea4be9" }))), e("div", { key: "1fe66b8b37ec68fb76562068cb7bb79321d72058", class: "modal__secondary-content", style: {
+      maxWidth: this.secondaryContentMaxWidth,
+      flex: this.secondaryContentFlex,
+      padding: Boolean(this.secondaryContentPadding) ? `var(--s-space-${this.secondaryContentPadding})` : void 0,
+      paddingBlockEnd: Boolean(this.secondaryContentPaddingBlockEnd) ? `var(--s-space-${this.secondaryContentPaddingBlockEnd})` : void 0,
+      paddingBlockStart: Boolean(this.secondaryContentPaddingBlockStart) ? `var(--s-space-${this.secondaryContentPaddingBlockStart})` : void 0,
+      paddingInlineEnd: Boolean(this.secondaryContentPaddingInlineEnd) ? `var(--s-space-${this.secondaryContentPaddingInlineEnd})` : void 0,
+      paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart) ? `var(--s-space-${this.secondaryContentPaddingInlineStart})` : void 0
+    } }, e("slot", { key: "02f930518ef96d25a2fc21cb9352b82f4522522d", name: "secondary-content" }))), e("div", { key: "16877b33a20910de6cfa4338b8469318bc848893", class: "modal__custom-footer" }, e("slot", { key: "2d3d85fe952d8ed341d3f5c6aa96ce707bd73df2", name: "custom-footer" })), a && e("footer", { key: "50972e539deb065a875b35024f26220d9524a0f9", class: "modal__controls" }, e("swirl-button-group", { key: "9f444d541828d0c1eb1b087c93b0af9c0de5043d", wrap: !0 }, this.secondaryActionLabel && e("swirl-button", { key: "528efbc6b81a46725b8db9fcd955301e55599b3f", label: this.secondaryActionLabel, onClick: this.onSecondaryAction }), this.primaryActionLabel && e("swirl-button", { key: "b4a696203e7e244804e7fcaffce63cd814484cfe", intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
+  }
+  get el() {
+    return _(this);
+  }
+};
+w.style = v;
+export {
+  w as swirl_modal
+};

package/dist/swirl-option-list-section.entry.654dcc20.js

@@ -0,0 +1,15 @@
+import { r as i, h as s, H as t } from "./index.2fce870a.js";
+import "react";
+import "react-dom";
+const e = ":host{display:block;width:100%}:host *{box-sizing:border-box}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);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)}}", o = class {
+  constructor(a) {
+    i(this, a), this.separatorSpacing = "4", this.spacing = "0", this.hasSeparator = !1;
+  }
+  render() {
+    return s(t, { key: "69701e9516422c5fa0d1e31be8c1a4cc9419fcd1" }, this.hasSeparator && s("swirl-separator", { key: "61a2a4f97c0dc7a2f4d4a2d263d2c5e4e8d4ea6c", spacing: this.separatorSpacing }), s("div", { key: "a11111437b220513edc177879875f64b9ae50689", "aria-labelledby": "label", class: "option-list-section", role: "group" }, s("span", { key: "50729f49956a3db60a6bd5cd36db18510bd99b56", class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), s("swirl-stack", { key: "b348a921843f45d231f9ce3b495a00c9a73860b3", spacing: this.spacing, align: "stretch" }, s("slot", { key: "2d12c3f007b6fdbcafe6f294982bbe104fa2a295" }))));
+  }
+};
+o.style = e;
+export {
+  o as swirl_option_list_section
+};

package/dist/swirl-option-list_2.entry.e0de0f24.js

@@ -0,0 +1,291 @@
+import { r as m, c as d, h as o, H as p, g as u } from "./index.2fce870a.js";
+import { S as f } from "./sortable.esm-CMrz6687.dac971cd.js";
+import { l as c, q as h } from "./utils-Dn2SWlGn.dbe5b17a.js";
+import { v as g } from "./v4-DD3477fe.2624487e.js";
+import { c as w } from "./index-orsBiyT_.fc4357c3.js";
+import { D as v } from "./media-query.service-BSiuFyfW.201120cc.js";
+import "react";
+import "react-dom";
+const x = ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}", I = class {
+  constructor(e) {
+    m(this, e), this.itemDrop = d(this, "itemDrop", 7), this.valueChange = d(this, "valueChange", 7), this.allowDeselect = !0, this.assistiveTextItemGrabbed = "Item grabbed. Use arrow keys to move item up or down. Use spacebar to save position.", this.assistiveTextItemMoving = "Current position:", this.assistiveTextItemMoved = "Item moved. New position:", this.selectAllLabel = "Select all", this.value = [], this.selectAllState = !1, this.selectAllValue = g(), this.onClick = (t) => {
+      t.preventDefault();
+      const i = t.target, s = i == null ? void 0 : i.closest("swirl-option-list-item"), l = t.composedPath()[0], n = Boolean(c(l, '[role="option"]'));
+      if (!Boolean(s) || !n) {
+        t.preventDefault();
+        return;
+      }
+      if (s.value === this.selectAllValue)
+        this.selectAllChanged();
+      else {
+        const a = this.items.findIndex((r) => r.value === s.value);
+        this.focusItem(a), this.selectItem(a);
+      }
+    }, this.onKeyDown = (t) => {
+      var i;
+      if (t.code === "ArrowDown")
+        t.preventDefault(), Boolean(this.dragging) ? this.moveDraggedItemDown() : this.focusNextItem();
+      else if (t.code === "ArrowUp")
+        t.preventDefault(), Boolean(this.dragging) ? this.moveDraggedItemUp() : this.focusPreviousItem();
+      else if (t.code === "Space" || t.code === "Enter") {
+        if (!t.target.classList.contains("option-list-item__drag-handle") && Boolean(this.dragging)) {
+          t.preventDefault(), this.stopDrag(this.dragging);
+          return;
+        }
+        const l = t.composedPath()[0], n = Boolean(c(l, '[role="option"]')), a = ((i = l == null ? void 0 : l.closest("swirl-option-list-item")) == null ? void 0 : i.value) === this.selectAllValue;
+        if (!n && !a)
+          return;
+        t.preventDefault(), Boolean(this.dragging) ? this.stopDrag(this.dragging) : a ? this.selectAllChanged() : this.selectFocusedItem();
+      } else
+        t.code === "Home" ? (t.preventDefault(), this.showSelectAll ? this.focusSelectAll() : this.focusItem(0)) : t.code === "End" ? (t.preventDefault(), this.focusItem(this.items.length - 1)) : t.code === "KeyA" && (t.metaKey || t.ctrlKey) && this.multiSelect ? (t.preventDefault(), this.selectAllItems()) : t.code === "Tab" && Boolean(this.dragging) && t.preventDefault();
+    }, this.resetTabIndex = () => {
+      var s, l, n;
+      this.removeItemsTabIndex(), this.focusedItem = void 0;
+      const t = (s = this.items[0]) == null ? void 0 : s.querySelector('[role="option"]');
+      (n = ((l = this.selectAllEl) == null ? void 0 : l.querySelector('[role="option"]')) || t) == null || n.setAttribute("tabIndex", "0");
+    }, this.selectAllChanged = () => {
+      var s, l;
+      if (this.disabled)
+        return;
+      const t = ((s = this.items) == null ? void 0 : s.length) || 0;
+      (((l = this.value) == null ? void 0 : l.length) || 0) === t ? this.updateValue([]) : this.updateValue(this.items.map((n) => n.value));
+    }, this.toggleDrag = (t) => {
+      const i = t.detail;
+      Boolean(this.dragging) ? this.stopDrag(i) : this.startDrag(i);
+    }, this.startDrag = (t) => {
+      this.dragging = t, this.draggingStartIndex = this.getItemIndex(this.dragging), t.setAttribute("dragging", "true");
+      const i = this.getItemIndex(this.dragging);
+      this.focusItem(i), this.assistiveText = this.assistiveTextItemGrabbed;
+    }, this.stopDrag = (t) => {
+      this.dragging = void 0, t.removeAttribute("dragging");
+      const i = this.getActiveItemIndex();
+      this.assistiveText = `${this.assistiveTextItemMoved} ${i + 1}`, this.itemDrop.emit({ item: t, oldIndex: this.draggingStartIndex, newIndex: i }), this.draggingStartIndex = void 0, this.focusItem(i);
+    };
+  }
+  componentDidLoad() {
+    this.updateItems(), this.observeSlotChanges(), this.setItemAllowDragState(), this.setItemDisabledState(), this.setItemContext(), this.syncItemsWithValue(), this.setupDragDrop(), this.setSectionSeparator(), this.setSelectAllState(), this.subscribeToSwirlPopover();
+  }
+  componentDidRender() {
+    this.setupDragDrop();
+  }
+  disconnectedCallback() {
+    var e, t;
+    this.unsubscribeFromSwirlPopover(), (e = this.observer) == null || e.disconnect(), (t = this.sortable) == null || t.destroy();
+  }
+  watchAllowDrag() {
+    this.setItemAllowDragState(), this.setupDragDrop();
+  }
+  watchDisabled() {
+    this.setItemDisabledState();
+  }
+  watchMultiSelect() {
+    this.setItemContext();
+  }
+  watchValue() {
+    this.syncItemsWithValue(), this.setSelectAllState();
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateItems(), this.setItemAllowDragState(), this.setItemDisabledState(), this.setItemContext(), this.syncItemsWithValue(), this.setSelectAllState();
+    }), this.observer.observe(this.listboxEl, { childList: !0, subtree: !0 });
+  }
+  setSelectAllState() {
+    var i, s;
+    const e = ((i = this.items) == null ? void 0 : i.length) || 0, t = ((s = this.value) == null ? void 0 : s.length) || 0;
+    this.selectAllState = e === 0 || t === 0 ? !1 : t === e ? !0 : "indeterminate";
+  }
+  updateItems() {
+    var t;
+    this.items = h(this.el, "swirl-option-list-item").filter((i) => i.value !== this.selectAllValue), !(((t = this.selectAllEl) == null ? void 0 : t.querySelector('[tabindex="0"]')) || this.items.some((i) => i.querySelector('[tabindex="0"]'))) && this.resetTabIndex();
+  }
+  removeItemsTabIndex() {
+    var e, t;
+    (t = (e = this.selectAllEl) == null ? void 0 : e.querySelector('[role="option"]')) == null || t.removeAttribute("tabIndex"), this.items.forEach((i) => {
+      var s;
+      return (s = i.querySelector('[role="option"]')) == null ? void 0 : s.removeAttribute("tabIndex");
+    });
+  }
+  setItemDisabledState() {
+    this.disabled && this.items.forEach((e) => e.disabled = !0);
+  }
+  setItemContext() {
+    this.multiSelect ? this.items.forEach((e) => e.context = "multi-select") : (this.items.forEach((e) => e.context = "single-select"), this.value.length > 1 && this.updateValue([this.value[0]]));
+  }
+  setupDragDrop() {
+    Boolean(this.sortable) && this.sortable.destroy(), this.allowDrag && (this.sortable = f.create(this.listboxEl, {
+      animation: 150,
+      draggable: 'swirl-option-list-item[allow-drag="true"]',
+      dragClass: "option-list-item--drag",
+      handle: ".option-list-item__drag-handle",
+      onEnd: (e) => {
+        this.itemDrop.emit({
+          item: e.item,
+          oldIndex: e.oldIndex,
+          newIndex: e.newIndex
+        });
+      }
+    }));
+  }
+  setItemAllowDragState() {
+    if (this.allowDrag && !this.multiSelect) {
+      console.error("[SwirlOptionList] Drag can only be allowed for multi select lists.");
+      return;
+    }
+    const e = h(this.el, "swirl-option-list-section");
+    if (this.allowDrag && e.length > 0) {
+      console.error("[SwirlOptionList] Drag can only be allowed for lists without sections.");
+      return;
+    }
+    this.allowDrag ? this.items.forEach((t) => {
+      t.setAttribute("allow-drag", "true"), t.addEventListener("toggleDrag", this.toggleDrag);
+    }) : this.items.forEach((t) => {
+      t.removeAttribute("allow-drag"), t.removeEventListener("toggleDrag", this.toggleDrag);
+    });
+  }
+  selectItem(e) {
+    if (this.disabled)
+      return;
+    const t = this.items[e];
+    if (t.disabled)
+      return;
+    const i = this.value.includes(t.value);
+    i && !this.allowDeselect || (this.multiSelect || (this.value = []), i ? this.updateValue(this.value.filter((s) => s !== t.value)) : this.updateValue([...this.value, t.value]));
+  }
+  updateValue(e) {
+    this.value = e, this.valueChange.emit(this.value);
+  }
+  selectFocusedItem() {
+    this.disabled || this.getActiveItemIndex() === -1 || this.selectItem(this.getActiveItemIndex());
+  }
+  selectAllItems() {
+    if (this.disabled)
+      return;
+    this.items.every((t) => this.value.includes(t.value)) ? this.updateValue([]) : this.updateValue(this.items.map((t) => t.value));
+  }
+  syncItemsWithValue() {
+    var e;
+    (e = this.items) == null || e.forEach((t) => t.selected = this.value.includes(t.value));
+  }
+  focusItem(e) {
+    var i;
+    if (this.disabled)
+      return;
+    this.removeItemsTabIndex();
+    const t = (i = this.items[e]) == null ? void 0 : i.querySelector('[role="option"]');
+    !Boolean(t) || (t.setAttribute("tabIndex", "0"), t.focus(), this.focusedItem = t);
+  }
+  focusNextItem() {
+    if (this.disabled)
+      return;
+    const e = this.getActiveItemIndex(), t = Math.min(e + 1, this.items.length - 1);
+    this.focusItem(t);
+  }
+  focusPreviousItem() {
+    const e = this.getActiveItemIndex();
+    if (e <= 0 && this.showSelectAll)
+      this.focusSelectAll();
+    else {
+      const t = Math.max(e - 1, 0);
+      this.focusItem(t);
+    }
+  }
+  focusSelectAll() {
+    var t;
+    const e = (t = this.selectAllEl) == null ? void 0 : t.querySelector('[role="option"]');
+    !e || (this.removeItemsTabIndex(), e.setAttribute("tabIndex", "0"), e.focus(), this.focusedItem = void 0);
+  }
+  getActiveItemIndex() {
+    return Boolean(this.focusedItem) ? this.items.map((e) => e.querySelector('[role="option"]')).findIndex((e) => e === this.focusedItem) : Boolean(this.selectAllEl) ? -1 : 0;
+  }
+  getItemIndex(e) {
+    return this.items.map((t) => t).findIndex((t) => t === e);
+  }
+  moveDraggedItemDown() {
+    const e = this.dragging.nextElementSibling;
+    !Boolean(e) || (e.after(this.dragging), this.updateItems(), this.listboxEl.focus(), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getActiveItemIndex() + 1}`);
+  }
+  moveDraggedItemUp() {
+    const e = this.dragging.previousElementSibling;
+    !Boolean(e) || e === this.selectAllEl || (e.before(this.dragging), this.updateItems(), this.listboxEl.focus(), this.assistiveText = `${this.assistiveTextItemMoving} ${this.getItemIndex(this.dragging) + 1}`);
+  }
+  setSectionSeparator() {
+    if (!this.el)
+      return;
+    Array.from(this.el.querySelectorAll("swirl-option-list-section")).filter((t) => t.isConnected).forEach((t, i) => {
+      var s;
+      i === 0 && ((s = t.previousElementSibling) == null ? void 0 : s.tagName) !== "SWIRL-OPTION-LIST-ITEM" && (t.hasSeparator = !1);
+    });
+  }
+  subscribeToSwirlPopover() {
+    var e;
+    this.swirlPopover = c(this.el, "swirl-popover"), (e = this.swirlPopover) == null || e.addEventListener("popoverClose", this.resetTabIndex);
+  }
+  unsubscribeFromSwirlPopover() {
+    var e;
+    (e = this.swirlPopover) == null || e.removeEventListener("popoverClose", this.resetTabIndex);
+  }
+  render() {
+    const e = this.multiSelect ? "true" : void 0, t = Boolean(this.dragging) ? 0 : void 0, i = this.multiSelect && this.showSelectAll;
+    return o(p, { key: "b271c81c50ff3e1049f6ae67496980797505e7ee" }, o("swirl-visually-hidden", { key: "a849433f1f5f66068aec9316c229070bc0a86d68", role: "alert" }, this.assistiveText), o("div", { key: "2a37a8aeead13ffaad8da91b12593acd701411e2", "aria-label": this.label, "aria-multiselectable": e, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (s) => this.listboxEl = s, role: "listbox", tabIndex: t }, i && o("swirl-option-list-item", { key: "33c78ab70b454f661066e06a0c68511d4f96f404", ref: (s) => this.selectAllEl = s, label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === !0, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue }), o("slot", { key: "eff0a92e1a12bb6947242c5e57750f1f4d221faa", onSlotchange: this.setSectionSeparator })));
+  }
+  get el() {
+    return u(this);
+  }
+  static get watchers() {
+    return {
+      allowDrag: ["watchAllowDrag"],
+      disabled: ["watchDisabled"],
+      multiSelect: ["watchMultiSelect"],
+      value: ["watchValue"]
+    };
+  }
+};
+I.style = x;
+const _ = `.sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item--drag.sc-swirl-option-list-item-h{border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-medium-pressed)}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:transparent;cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-translucent-low-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-low-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),
+    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);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-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);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-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:"";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}`, S = class {
+  constructor(e) {
+    m(this, e), this.toggleDrag = d(this, "toggleDrag", 7), this.context = "single-select", this.dragHandleDescription = "Press spacebar to toggle grab", this.dragHandleLabel = "Move option", this.selected = !1, this.indeterminate = !1, this.swirlAriaRole = "option", this.truncateLabel = !0, this.iconSize = 24, this.elementId = g(), this.mediaQueryUnsubscribe = () => {
+    }, this.onDragHandleKeyDown = (t) => {
+      (t.code === "Space" || t.code === "Enter") && (t.preventDefault(), this.toggleDrag.emit(this.el));
+    }, this.onBlur = () => {
+      this.focused = !1;
+    }, this.onFocus = () => {
+      this.focused = !0;
+    };
+  }
+  componentDidLoad() {
+    this.mediaQueryUnsubscribe = v.subscribe((e) => {
+      this.forceIconProps(e), this.updateIconSize(e);
+    });
+  }
+  disconnectedCallback() {
+    this.mediaQueryUnsubscribe();
+  }
+  forceIconProps(e) {
+    var i;
+    const t = (i = this.iconEl) == null ? void 0 : i.children[0];
+    t == null || t.setAttribute("size", e ? "20" : "24");
+  }
+  updateIconSize(e) {
+    this.iconSize = e ? 20 : 24;
+  }
+  render() {
+    const e = this.disabled ? "true" : void 0, t = this.indeterminate ? void 0 : String(this.selected), i = this.context === "multi-select", s = Boolean(this.icon) && this.context === "single-select", l = Boolean(this.iconBadge), n = this.el.querySelector('[slot="avatar"]'), a = this.selected && this.context === "single-select", r = w("option-list-item", `option-list-item--context-${this.context}`, {
+      "option-list-item--disabled": this.disabled,
+      "option-list-item--draggable": this.allowDrag,
+      "option-list-item--dragging": this.dragging,
+      "option-list-item--selected": this.selected,
+      "option-list-item--indeterminate": this.indeterminate && !this.selected,
+      "option-list-item--show-avatar": n
+    });
+    return o(p, { key: "02293f18ce711fb24b8532295aa9f4d45c566911" }, o("div", { key: "be835093d1496611cef54f6f13181fcbbb7f25aa", "aria-checked": this.swirlAriaRole === "menuitemradio" ? t : void 0, "aria-describedby": Boolean(this.description) ? `option-list-item-${this.elementId}-description` : void 0, "aria-disabled": e, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? t : void 0, class: r, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, s && o("span", { key: "c7614742890b1fa5fa222abe974dcd4fa8c6143f", class: "option-list-item__icon", innerHTML: this.icon, ref: (b) => this.iconEl = b }, l && o("span", { key: "2cd49bbbd6e3aa241353d6aeb7ed333f78a4ef41", class: "option-list-item__icon-badge", innerHTML: this.iconBadge })), i && o("span", { key: "4b7a643317890b7c3654ddf8d383ad0973d711c0", class: "option-list-item__checkbox" }, o("span", { key: "161766550f0a605e216462f21be8557dc9fb6270", class: "option-list-item__checkbox-box" }, this.selected && o("swirl-icon-check-strong", { key: "228a74fac821ff162735251eac9f2a362a217781", class: "option-list-item__checkbox-icon", size: 16 }), !this.selected && this.indeterminate && o("span", { key: "e0d51eb5acf821389633983b5aa3135b1cba0759", class: "option-list-item__checkbox-indeterminate-icon" }))), o("span", { key: "2ba67d47820c475856f4457c28eb001f3a8f9c7b", class: "option-list-item__avatar" }, o("slot", { key: "08e0c07e70dc02d14c38da601e8b8f9e460dfa11", name: "avatar" })), o("span", { key: "c1694cef10bbcc06e3a9516f2af83e0b56d899fa", class: "option-list-item__label-container" }, o("span", { key: "a412d45d82f1977841e9dc9289f1c81f34afc370", class: "option-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" }, id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && o("span", { key: "9efb7fe4f60764c801b837c901cb3a95c5c5ee91", class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description)), a && o("span", { key: "921a292fbe56875283f25066e78724a5ddc10389", class: "option-list-item__selection-icon" }, o("swirl-icon-check-small", { key: "6eea4a17b52637f1d486cbf4963f890ce2a2ed8c", size: this.iconSize }))), this.allowDrag && o("button", { key: "36dc3c233448ab5c7dc67c60bb703904e4cb3777", "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, o("swirl-icon-drag-handle", { key: "cadc1a84934ba28d6a89854b1c5214e89e2737c9", size: this.iconSize })));
+  }
+  get el() {
+    return u(this);
+  }
+};
+S.style = _;
+export {
+  I as swirl_option_list,
+  S as swirl_option_list_item
+};

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

@@ -0,0 +1,38 @@
+import { r as l, c as s, h as e, H as r } from "./index.2fce870a.js";
+import { c as p } from "./index-orsBiyT_.fc4357c3.js";
+import { d as g } from "./utils-Dn2SWlGn.dbe5b17a.js";
+import "react";
+import "react-dom";
+const c = ":host{display:block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}: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}@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)}}.pagination__page-size-selection{display:flex;padding-right:var(--s-space-24);flex-shrink:0;align-items:center;color:var(--s-interactive-primary-default);white-space:nowrap;gap:var(--s-space-8)}.pagination__page-size-select-container{position:relative}.pagination__page-size-select{padding-right:calc(1rem + var(--s-space-4));border:none;color:var(--s-interactive-primary-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-size-select:focus:not(:focus-visible){outline:none}.pagination__page-size-select:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-size-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.pagination__page-size-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}.pagination__page-label{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-input{display:inline-flex;width:3.25rem;padding-top:var(--s-space-8);padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);border:none;border-radius:var(--s-border-radius-sm);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.pagination__page-input:focus:not(:focus-visible){outline:none}.pagination__page-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__page-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", h = class {
+  constructor(n) {
+    l(this, n), this.setPage = s(this, "setPage", 7), this.setPageSize = s(this, "setPageSize", 7), this.firstPageButtonLabel = "First page", this.lastPageButtonLabel = "Last page", this.nextButtonLabel = "Next page", this.pageLabel = "out of", this.pageSelectLabel = "Select a page", this.pageSize = 10, this.pageSizeOptions = [10, 25, 50], this.pageSizeSelectLabel = "Items per page:", this.prevButtonLabel = "Previous page", this.variant = "default", this.onFocusPageInput = (a) => {
+      a.target.select();
+    }, this.onFirstPageButtonClick = () => {
+      this.page !== 1 && this.setPage.emit(1);
+    }, this.onLastPageButtonClick = () => {
+      this.page !== this.pages && this.setPage.emit(this.pages);
+    }, this.onPrevButtonClick = () => {
+      const a = Math.max(this.page - 1, 1);
+      this.page !== a && this.setPage.emit(a);
+    }, this.onNextButtonClick = () => {
+      const a = Math.min(this.page + 1, this.pages);
+      this.page !== a && this.setPage.emit(a);
+    }, this.onPageInput = () => {
+      let a = +this.pageInput.value;
+      isNaN(a) ? (a = this.page, this.pageInput.value = String(a)) : a > this.pages ? (a = this.pages, this.pageInput.value = String(a)) : a < 1 && (a = 1, this.pageInput.value = String(a)), this.page !== a && this.onPageUpdate(a);
+    }, this.onPageUpdate = g((a) => {
+      this.setPage.emit(a);
+    }, 500), this.onPageSizeSelect = (a) => {
+      const t = +a.target.value;
+      this.pageSize !== t && this.setPageSize.emit(t);
+    };
+  }
+  render() {
+    const n = this.variant !== "simple", a = this.variant === "advanced", t = `${this.page.toLocaleString()} ${this.pageLabel} ${this.pages.toLocaleString()}`, o = p("pagination", `pagination--variant-${this.variant}`);
+    return e(r, { key: "2ccf4250a87b4f274887f558eba76db96d2c1f3b" }, e("nav", { key: "257b97e6256a71ccebced637aad885e267bf6a71", "aria-label": this.label, class: o }, e("ul", { key: "abfcfbc4d57831a806265a027035aa23377b0a1f", class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && e("li", { key: "f08bb939fe848b0f548efe2d2a76fda405907a08", class: "pagination__list-item" }, e("label", { key: "394295f455b4e30a016d3c58903cb0c472ce6299", class: "pagination__page-size-selection" }, e("swirl-text", { key: "5b3be12ddfb129010457c5edf37d82fadaa7152e", whiteSpace: "inherit" }, this.pageSizeSelectLabel), e("swirl-stack", { key: "46a9b42cab438479d2a03b70bc98549e476875d3", align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, e("select", { key: "8d3da52b144addbc039c40511ce3dd12c581b6ca", class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((i) => e("option", { key: i, selected: i === this.pageSize, value: i }, i))), e("swirl-icon-expand-more", { key: "3ec322a4dc98be2382300c8dc511672d72d1ee6a", "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 })))), e("li", { key: "6f800ab0eadca268d50725b7ab4ca8211d42656e", class: "pagination__list-item" }, e("swirl-button", { key: "813a5b3e027bd617e327812181e503751e9fcbc7", class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: !0, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), e("li", { key: "7ec89dadc8e672e67b459ac61d48c19d464b8e16", class: "pagination__list-item" }, e("swirl-button", { key: "5c5b7ba3ad4793ffc27099c4d2102064a2b6bbed", class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), n ? e("li", { class: "pagination__list-item  pagination__page-label" }, e("span", null, a ? e("span", { "aria-current": "page", class: "pagination__advanced-label" }, e("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (i) => this.pageInput = i, type: "text", value: this.page }), e("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString())) : e("span", { "aria-current": "page" }, t))) : e("li", { class: "pagination__list-item" }, e("swirl-visually-hidden", null, e("span", { "aria-current": "page" }, t))), e("li", { key: "0714d0fb89a82894253a8feb67cffde158c99110", class: "pagination__list-item" }, e("swirl-button", { key: "03fc131136d67d0db30f1ea090a1d72b5822a156", class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: !0, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), e("li", { key: "33e99c7b5fdc03f2ef124c00136885a6147139b5", class: "pagination__list-item" }, e("swirl-button", { key: "1db085be40a2f0baad6e57e0237a3013a8783408", class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: !0, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick })))));
+  }
+};
+h.style = c;
+export {
+  h as swirl_pagination
+};