@getflip/swirl-components-react 0.257.0 → 0.258.0

package/dist/swirl-modal.entry.18fb81cf.js

@@ -1,112 +0,0 @@
-import { r as h, c as t, h as a, H as f, g as p } from "./index.c17b1d20.js";
-import { d as b, 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;--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}.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: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__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: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)}}@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 = _, y = class {
-  constructor(o) {
-    h(this, o), 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 = (e) => {
-      e.code === "Escape" && (e.stopImmediatePropagation(), this.close());
-    }, this.onBackdropClick = () => {
-      this.close();
-    }, this.onCloseButtonClick = () => {
-      this.close();
-    }, this.onPrimaryAction = (e) => {
-      this.primaryAction.emit(e);
-    }, this.onSecondaryAction = (e) => {
-      this.secondaryAction.emit(e);
-    }, this.determineScrollStatus = () => {
-      var r, l, i, n, c, m;
-      const e = ((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);
-      e !== this.scrolled && (this.scrolled = e), 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: (o) => o.shadowRoot
-      }
-    }), this.determineScrollStatus(), queueMicrotask(() => {
-      this.updateCustomFooterStatus(), this.updateCustomHeaderStatus(), this.updateHeaderToolsStatus(), this.updateSecondaryContentStatus();
-    });
-  }
-  componentDidRender() {
-    var o;
-    (o = this.focusTrap) == null || o.updateContainerElements(this.modalEl);
-  }
-  disconnectedCallback() {
-    var o;
-    (o = this.focusTrap) == null || o.deactivate(), this.unlockBodyScroll();
-  }
-  onWindowResize() {
-    this.determineScrollStatus();
-  }
-  async open() {
-    this.isOpen = !0, this.modalOpen.emit(), setTimeout(() => {
-      this.lockBodyScroll(), this.determineScrollStatus();
-    }), setTimeout(() => {
-      this.focusTrap.activate(), this.handleAutoFocus();
-    }, 200);
-  }
-  async close(o) {
-    this.closing || (this.requestModalClose.emit(), !(!this.closable && !o) && (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
-      this.focusTrap.deactivate(), 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 o;
-    (o = this.modalEl.querySelector("input[autofocus]")) == null || o.focus();
-  }
-  lockBodyScroll() {
-    b(this.scrollContainer);
-  }
-  unlockBodyScroll() {
-    u(this.scrollContainer);
-  }
-  render() {
-    const o = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel), e = 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: "80830475953f8fef218dab13b912c06020759747" }, a("section", { key: "fbc3012a761007f53e72b7fc4eabc98549940750", "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: e, onKeyDown: this.onKeyDown, role: "dialog", ref: (d) => this.modalEl = d }, a("div", { key: "2ea890b7199a213255df3fbfeba6197486aaf66e", class: "modal__backdrop", onClick: this.onBackdropClick }), a("div", { key: "56bae9212a07b4c13e60b963b727295102dd58d6", class: "modal__body", style: {
-      "--swirl-modal-max-height": this.maxHeight,
-      "--swirl-modal-height": this.height,
-      maxWidth: this.maxWidth
-    } }, a("header", { key: "220a643d1e7c944f7012c6722617be5645f3233a", class: "modal__custom-header" }, a("slot", { key: "01eaff1abd5aa8002463bc9d3e81a09b2c20045b", name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && a("header", { key: "e804136cc94d11b68424c37b8035b0afaad05d5e", class: "modal__header" }, a("div", { key: "fa5d318bb813fce6a3ce070365973c9fa1fbeb34", class: "modal__header-bar" }, !this.hideCloseButton && a("swirl-button", { key: "9f5ab5de46d9e3654b5c61c926b516a9d6ab1ab7", 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: "c0a0a4b3b6f0995dc7196ae43d35faed024ddf03", as: "h2", class: "modal__heading", level: 3, text: this.label }))), a("div", { key: "043edf4e5474e02099b4ea3c7e9278a987355030", class: "modal__content-container" }, a("div", { key: "2fec2822a619628681a01606bc3eb47abf51c0a0", class: "modal__primary-content" }, a("div", { key: "777e35a204900e5f43f68fbbaaee5e1862818474", class: "modal__header-tools" }, a("slot", { key: "f23f34983053cd0d233f69b75122c27d45c025c2", name: "header-tools" })), a("div", { key: "49f3b4ecb95eb7fb18d32df3811c4a17741f4b5e", class: "modal__content", onScroll: this.determineScrollStatus, ref: (d) => this.scrollContainer = d }, a("slot", { key: "f35360a5a332d61ccc2996e9a875f16ad256cdc0" }))), a("div", { key: "0d52e88c2eba0b744498b95d86a0d332ea7093d3", class: "modal__secondary-content" }, a("slot", { key: "5df06b16d2f7b8058fcec78dd997a2b4fbf5e52e", name: "secondary-content" }))), a("div", { key: "3ac418d5637c8a269715c928c97f171b776f9aca", class: "modal__custom-footer" }, a("slot", { key: "bfb6f79383b9cd56bf2c7a41636fb8af91de27ea", name: "custom-footer" })), o && a("footer", { key: "218fa6e62c106eda8ffc4781738334be7ee813ed", class: "modal__controls" }, a("swirl-button-group", { key: "86b3f6aa7cd1f37c979933be4ad22a80ba119211", wrap: !0 }, this.secondaryActionLabel && a("swirl-button", { key: "9f091b284d756a6c7fd9f6deb97654b5f2b593e1", label: this.secondaryActionLabel, onClick: this.onSecondaryAction }), this.primaryActionLabel && a("swirl-button", { key: "cc4475407ed68c107643aa0902f3250a5db1ba1c", intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))));
-  }
-  get el() {
-    return p(this);
-  }
-};
-y.style = w;
-export {
-  y as swirl_modal
-};