@getflip/swirl-components-react 0.200.1 → 0.201.0

package/dist/swirl-modal.entry.171441e8.js

@@ -1,118 +0,0 @@
-import { r as h, c as t, h as a, H as f, g as b } from "./index.3c12ddea.js";
-import { d as p, e as u } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
-import { c as v } from "./index-267776a4.6beb4f4b.js";
-import { c as g } from "./focus-trap.esm-49c9613c.db20abcc.js";
-import "react";
-import "react-dom";
-const _ = `: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-max-width:40rem}@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}.modal[aria-hidden="true"]{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))}@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-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content .modal__body{max-width:64rem}.modal--has-secondary-content:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer) .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% - 24rem);max-height:none;flex-basis:calc(100% - 24rem)}}.modal--has-secondary-content .modal__secondary-content{display:block}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color: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;overflow:hidden;width:100vw;height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.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:3.75rem;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;gap:var(--s-space-16)}}.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)}.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;flex-basis:100%;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;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:24rem;max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%}}.modal__custom-footer{flex-shrink:0}.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}@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)}}`, y = _, w = class {
-  constructor(e) {
-    h(this, e), this.modalClose = t(this, "modalClose", 7), this.modalOpen = t(this, "modalOpen", 7), this.primaryAction = t(this, "primaryAction", 7), this.requestModalClose = t(this, "requestModalClose", 7), this.secondaryAction = t(this, "secondaryAction", 7), this.onKeyDown = (o) => {
-      o.code === "Escape" && (o.stopImmediatePropagation(), this.close());
-    }, this.onBackdropClick = () => {
-      this.close();
-    }, this.onCloseButtonClick = () => {
-      this.close();
-    }, this.onPrimaryAction = (o) => {
-      this.primaryAction.emit(o);
-    }, this.onSecondaryAction = (o) => {
-      this.secondaryAction.emit(o);
-    }, this.determineScrollStatus = () => {
-      var r, l, i, n, c, m;
-      const o = ((r = this.scrollContainer) == null ? void 0 : r.scrollTop) > 0, d = Math.ceil(((l = this.scrollContainer) == null ? void 0 : l.scrollTop) + ((i = this.scrollContainer) == null ? void 0 : i.offsetHeight)) >= ((n = this.scrollContainer) == null ? void 0 : n.scrollHeight), s = ((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), s !== this.scrollable && (this.scrollable = s);
-    }, this.closable = !0, this.closeButtonLabel = "Close modal", this.height = void 0, this.hideCloseButton = void 0, this.hideLabel = void 0, this.label = void 0, this.maxHeight = void 0, this.maxWidth = void 0, this.padded = !0, this.primaryActionLabel = void 0, this.secondaryActionLabel = void 0, this.variant = "default", this.isOpen = !1, this.closing = !1, this.hasCustomHeader = void 0, this.hasCustomFooter = void 0, this.hasHeaderTools = void 0, this.hasSecondaryContent = void 0, this.scrollable = !1, this.scrolled = !1, this.scrolledDown = !1;
-  }
-  componentDidLoad() {
-    this.focusTrap = g(this.modalEl, {
-      allowOutsideClick: !0,
-      tabbableOptions: {
-        getShadowRoot: (e) => e.shadowRoot
-      }
-    }), this.determineScrollStatus(), queueMicrotask(() => {
-      this.updateCustomFooterStatus(), this.updateCustomHeaderStatus(), this.updateHeaderToolsStatus(), this.updateSecondaryContentStatus();
-    });
-  }
-  componentDidRender() {
-    var e;
-    (e = this.focusTrap) == null || e.updateContainerElements(this.modalEl);
-  }
-  disconnectedCallback() {
-    var e;
-    (e = this.focusTrap) == null || e.deactivate(), this.unlockBodyScroll();
-  }
-  onWindowResize() {
-    this.determineScrollStatus();
-  }
-  watchIsOpen() {
-    this.isOpen ? setTimeout(() => {
-      this.focusTrap.activate(), this.handleAutoFocus();
-    }, 200) : this.focusTrap.deactivate();
-  }
-  async open() {
-    this.isOpen = !0, this.modalOpen.emit(), this.lockBodyScroll(), this.determineScrollStatus();
-  }
-  async close(e) {
-    this.closing || (this.requestModalClose.emit(), !(!this.closable && !e) && (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
-      this.isOpen = !1, this.modalClose.emit(), this.closing = !1;
-    }, 150)));
-  }
-  updateCustomFooterStatus() {
-    this.hasCustomFooter = Boolean(this.el.querySelector('[slot="custom-footer"]'));
-  }
-  updateCustomHeaderStatus() {
-    this.hasCustomHeader = Boolean(this.el.querySelector('[slot="custom-header"]'));
-  }
-  updateHeaderToolsStatus() {
-    this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
-  }
-  updateSecondaryContentStatus() {
-    this.hasSecondaryContent = Boolean(this.el.querySelector('[slot="secondary-content"]'));
-  }
-  handleAutoFocus() {
-    var e;
-    (e = this.modalEl.querySelector("input[autofocus]")) == null || e.focus();
-  }
-  lockBodyScroll() {
-    p(this.scrollContainer);
-  }
-  unlockBodyScroll() {
-    u(this.scrollContainer);
-  }
-  render() {
-    const e = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel), o = v("modal", `modal--variant-${this.variant}`, {
-      "modal--closing": this.closing,
-      "modal--has-custom-footer": this.hasCustomFooter,
-      "modal--has-custom-header": this.hasCustomHeader,
-      "modal--has-header-tools": this.hasHeaderTools,
-      "modal--has-secondary-content": this.hasSecondaryContent,
-      "modal--hide-label": this.hideLabel,
-      "modal--padded": this.padded,
-      "modal--scrollable": this.scrollable,
-      "modal--scrolled": this.scrolled,
-      "modal--scrolled-down": this.scrolledDown
-    });
-    return a(f, { key: "d101cece24cb469e6300a88cda41a67281cd2b67" }, a("section", { key: "ebad873d554eb02f4935d21d52e329320d31a47e", "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: o, onKeyDown: this.onKeyDown, role: "dialog", ref: (d) => this.modalEl = d }, a("div", { key: "bf4a0569609c57d8f13c98ea86dc2fa22bb608d8", class: "modal__backdrop", onClick: this.onBackdropClick }), a("div", { key: "d8624f029c1a40a13159ec2f6eb244233a337b9b", class: "modal__body", style: {
-      "--swirl-modal-max-height": this.maxHeight,
-      "--swirl-modal-height": this.height,
-      maxWidth: this.maxWidth
-    } }, a("header", { key: "1bd7f42348ca11ded0c28d5324b6f070949b44c9", class: "modal__custom-header" }, a("slot", { key: "39fbacbcd794a371b898943bce382fee3d86a44b", name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && a("header", { key: "c397f6bc837f3b8eb54615110f5938ed180cfb26", class: "modal__header" }, a("div", { key: "2a2624b81f447f14c4c02528a3cde361a9ce2dcb", class: "modal__header-bar" }, !this.hideCloseButton && a("swirl-button", { key: "eb1a57b60af155cfc640ef2ef0b6ec0e57889c88", 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.hideLabel && a("swirl-heading", { key: "7d5e09b46ed9065e8d21830e4d7fa83687b0b911", as: "h2", class: "modal__heading", level: 3, text: this.label }))), a("div", { key: "a2e87dc146c87c1f900c1692a3d00cc05691d032", class: "modal__content-container" }, a("div", { key: "413163c6bc7bd8057be1bb73e30f0db901d5d9c8", class: "modal__primary-content" }, a("div", { key: "cd9db06581c8286137943e5a2f05d11bc7febe42", class: "modal__header-tools" }, a("slot", { key: "5a92044e76f842523e6e2e74413826d9d32180da", name: "header-tools" })), a("div", { key: "f1eae6dde8e0cb56ec4dd5a92903a5f99738e4cf", class: "modal__content", onScroll: this.determineScrollStatus, ref: (d) => this.scrollContainer = d }, a("slot", { key: "22fe6f164c770c6b61b0c02f0aa8ce0bed9dbf49" }))), a("div", { key: "5bda225a1be3dc0e41a6fba093e430096ca372c3", class: "modal__secondary-content" }, a("slot", { key: "24bbcea293f3f849dfec59a00ba6c78d8d9adfa6", name: "secondary-content" }))), a("div", { key: "1d251bb36ac9267efaff5ebbb4dfbfeceae6b001", class: "modal__custom-footer" }, a("slot", { key: "64bac816af117d2c1ded2e3e2296e5dc3086f1eb", name: "custom-footer" })), e && a("footer", { key: "84941235ca72a66ec1e8e880af177bf67d6264ba", class: "modal__controls" }, a("swirl-button-group", { key: "f5e332e1831b8f168375673cc51f87fd56ef7f97", wrap: !0 }, this.secondaryActionLabel && a("swirl-button", { key: "4c104649ec6bac6f17c1e57ea8b79762490c5da3", label: this.secondaryActionLabel, onClick: this.onSecondaryAction }), this.primaryActionLabel && a("swirl-button", { key: "df096b033de95729cd0c12a70afc17b4afd5dbc0", intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))));
-  }
-  get el() {
-    return b(this);
-  }
-  static get watchers() {
-    return {
-      isOpen: ["watchIsOpen"]
-    };
-  }
-};
-w.style = y;
-export {
-  w as swirl_modal
-};

package/dist/swirl-symbol-roadmap.entry.04b09533.js

@@ -1,17 +0,0 @@
-import { r as t, h as e, F as o } from "./index.3c12ddea.js";
-import { c as a } from "./index-267776a4.6beb4f4b.js";
-import "react";
-import "react-dom";
-const r = ":host{display:inline-flex}", l = r, c = class {
-  constructor(s) {
-    t(this, s), this.size = 24;
-  }
-  render() {
-    const s = this.size === 20 ? 24 : this.size, i = a("swirl-symbol", `swirl-symbol--size-${this.size}`);
-    return e("svg", { key: "f43f25c37f0ac50214ef8267de050b906aaa7d4f", class: i, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${s} ${s}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, e(o, { key: "2c74f8c7118aef0f2d85ec4bc549160338a93ccf" }, e("path", { key: "4d1106e8adb56d4866ffdb562e287afb636b4084", d: "M13 10H18L21 7L18 4H13V2H11V4H4V10H11V12H6L3 15L6 18H11V22H13V18H20V12H13V10ZM6 6H17.17L18.17 7L17.17 8H6V6ZM18 16H6.83L5.83 15L6.83 14H18V16Z", fill: "currentColor" })));
-  }
-};
-c.style = l;
-export {
-  c as swirl_symbol_roadmap
-};

package/dist/swirl-symbol-smartphone.entry.4d149ab6.js

@@ -1,17 +0,0 @@
-import { r as i, h as e, F as o } from "./index.3c12ddea.js";
-import { c as r } from "./index-267776a4.6beb4f4b.js";
-import "react";
-import "react-dom";
-const l = ":host{display:inline-flex}", a = l, c = class {
-  constructor(s) {
-    i(this, s), this.size = 24;
-  }
-  render() {
-    const s = this.size === 20 ? 24 : this.size, t = r("swirl-symbol", `swirl-symbol--size-${this.size}`);
-    return e("svg", { key: "9d2f00d552c0b68c0c1ce40549de61a82d0d4ed4", class: t, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${s} ${s}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, e(o, { key: "bea7f22514bb24b097709fd89bb1b87d38619e37" }, e("path", { key: "6fb6b8a702469ecfef094ee3c489cfe20e8092b2", d: "M17 1.01L7 1C5.9 1 5 1.9 5 3V21C5 22.1 5.9 23 7 23H17C18.1 23 19 22.1 19 21V3C19 1.9 18.1 1.01 17 1.01ZM17 19H7V5H17V19Z", fill: "currentColor" })));
-  }
-};
-c.style = a;
-export {
-  c as swirl_symbol_smartphone
-};

package/dist/swirl-visually-hidden.entry.b237b028.js

@@ -1,15 +0,0 @@
-import { r as e, h as i, H as r } from "./index.3c12ddea.js";
-import "react";
-import "react-dom";
-const d = ".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}", l = d, a = class {
-  constructor(s) {
-    e(this, s);
-  }
-  render() {
-    return i(r, { key: "5e48631c7d971d0acc22f52c4245ae6da98df8d8" }, i("slot", { key: "9bcf2d698a4587f72971245272cb74e7d47f0faf" }));
-  }
-};
-a.style = l;
-export {
-  a as swirl_visually_hidden
-};