@getflip/swirl-components-react 0.16.0 → 0.18.0

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

@@ -1,62 +0,0 @@
-import { r as h, c as i, h as a, H as p } from "./index.771fb0bd.js";
-import { A as b } from "./a11y-dialog.esm-d7a94c8c.bd6ae411.js";
-import { d as f, e as v } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
-import { c as u } from "./index-d280dafb.186cdb0e.js";
-import "react";
-import "react-dom";
-const g = ':host{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.modal[aria-hidden="true"]{display:none}.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:0.15s modal-backdrop-fade-in;animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__backdrop{-webkit-animation:none;animation:none}}.modal:not(.modal--closing) .modal__body{-webkit-animation:0.15s modal-scale-in;animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal:not(.modal--closing) .modal__body{-webkit-animation:none;animation:none}}.modal--closing{-webkit-animation:0.15s modal-fade-out;animation:0.15s modal-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--closing{-webkit-animation:none;animation:none}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal--scrolled .modal__header{border-bottom-color:var(--s-border-default)}}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{position:relative;z-index:var(--s-z-40);display:flex;width:100vw;height:100vh;background-color:var(--s-surface-overlay-default);flex-direction:column}@media (min-width: 768px){.modal__body{width:90vw;max-width:33.75rem;height:auto;max-height:90vh;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}.modal__close-button{position:absolute;top:var(--s-space-8);left:var(--s-space-8)}@media (min-width: 768px){.modal__close-button{top:var(--s-space-16);right:var(--s-space-16);left:auto}}.modal__header{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-8) + 2.5rem + var(--s-space-8));flex-shrink:0;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-16)}@media (min-width: 768px){.modal__header{height:4.125rem;padding-top:var(--s-space-24);padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-8));padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);border-bottom:var(--s-border-width-default) solid transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16);flex-grow:1;line-height:var(--s-line-height-base)}.modal__content ::slotted(*){margin:0}@media (min-width: 768px){.modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}.modal__controls{display:flex;padding-top:var(--s-space-16);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24);flex-shrink:0;justify-content:flex-end}@-webkit-keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}', y = class {
-  constructor(e) {
-    h(this, e), this.modalClose = i(this, "modalClose", 7), this.modalOpen = i(this, "modalOpen", 7), this.primaryAction = i(this, "primaryAction", 7), this.secondaryAction = i(this, "secondaryAction", 7), this.onKeyDown = (o) => {
-      o.code === "Escape" && 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 o, l, s, t, d, r;
-      const n = ((o = this.scrollContainer) === null || o === void 0 ? void 0 : o.scrollTop) > 0, c = Math.ceil(((l = this.scrollContainer) === null || l === void 0 ? void 0 : l.scrollTop) + ((s = this.scrollContainer) === null || s === void 0 ? void 0 : s.offsetHeight)) >= ((t = this.scrollContainer) === null || t === void 0 ? void 0 : t.scrollHeight), m = ((d = this.scrollContainer) === null || d === void 0 ? void 0 : d.scrollHeight) > ((r = this.scrollContainer) === null || r === void 0 ? void 0 : r.offsetHeight);
-      n !== this.scrolled && (this.scrolled = n), c !== this.scrolledDown && (this.scrolledDown = c), m !== this.scrollable && (this.scrollable = m);
-    }, this.closeButtonLabel = "Close modal", this.label = void 0, this.primaryActionLabel = void 0, this.secondaryActionLabel = void 0, this.closing = !1, this.scrollable = !1, this.scrolled = !1, this.scrolledDown = !1;
-  }
-  componentDidLoad() {
-    this.modal = new b(this.modalEl), this.determineScrollStatus();
-  }
-  disconnectedCallback() {
-    var e;
-    (e = this.modal) === null || e === void 0 || e.destroy(), this.unlockBodyScroll();
-  }
-  onWindowResize() {
-    this.determineScrollStatus();
-  }
-  async open() {
-    this.modal.show(), this.modalOpen.emit(), this.lockBodyScroll(), this.determineScrollStatus();
-  }
-  async close() {
-    this.closing || (this.closing = !0, this.unlockBodyScroll(), setTimeout(() => {
-      this.modal.hide(), this.modalClose.emit(), this.closing = !1;
-    }, 150));
-  }
-  lockBodyScroll() {
-    f(this.scrollContainer);
-  }
-  unlockBodyScroll() {
-    v(this.scrollContainer);
-  }
-  render() {
-    const e = u("modal", {
-      "modal--closing": this.closing,
-      "modal--scrollable": this.scrollable,
-      "modal--scrolled": this.scrolled,
-      "modal--scrolled-down": this.scrolledDown
-    });
-    return a(p, null, a("section", { "aria-hidden": "true", "aria-label": this.label, class: e, id: "modal", onKeyDown: this.onKeyDown, ref: (o) => this.modalEl = o }, a("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), a("div", { class: "modal__body", role: "document" }, a("swirl-button", { class: "modal__close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), a("header", { class: "modal__header" }, a("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })), a("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (o) => this.scrollContainer = o }, a("slot", null)), a("footer", { class: "modal__controls" }, a("swirl-button-group", { wrap: !0 }, this.secondaryActionLabel && a("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction }), this.primaryActionLabel && a("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))));
-  }
-};
-y.style = g;
-export {
-  y as swirl_modal
-};