@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/collection/components/flip-list/flip-list.css

@@ -0,0 +1,59 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.flip-list {
+  line-height: var(--s-line-height-base);
+}
+
+.flip-list ul,
+  .flip-list ol {
+    margin: 0;
+    padding: 0;
+    list-style-position: outside;
+    list-style-type: none;
+  }
+
+.flip-list ul li {
+      padding-left: 1.5rem;
+    }
+
+.flip-list ul li:before {
+        display: inline-block;
+        width: 1.5rem;
+        margin-left: -1.5rem;
+        text-align: center;
+        content: "•";
+      }
+
+.flip-list ol {
+    counter-reset: item;
+  }
+
+.flip-list ol ol {
+      counter-reset: letter;
+    }
+
+.flip-list ol ol li:before {
+          content: counter(letter, lower-alpha) ".";
+          counter-increment: letter;
+        }
+
+.flip-list ol li {
+      padding-left: 1.5rem;
+    }
+
+.flip-list ol li:before {
+        display: inline-block;
+        min-width: 1.5rem;
+        font-variant-numeric: tabular-nums;
+        margin-left: -1.5rem;
+        padding-right: var(--s-space-8);
+        text-align: right;
+        content: counter(item) ".";
+        counter-increment: item;
+      }

package/dist/collection/components/flip-list/flip-list.js

@@ -0,0 +1,22 @@
+import { Component, h, Host } from "@stencil/core";
+export class FlipList {
+  componentDidRender() {
+    const children = Array.from(this.containerEl.children);
+    if (children.some((child) => !["UL", "OL"].includes(child.tagName))) {
+      console.warn("[FlipList] Only ul and ol elements are allowed as direct children of <flip-list />.");
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "flip-list", ref: (el) => (this.containerEl = el) },
+        h("slot", null))));
+  }
+  static get is() { return "flip-list"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-list.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-list.css"]
+  }; }
+}
+//# sourceMappingURL=flip-list.js.map

package/dist/collection/components/flip-list/flip-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-list.js","sourceRoot":"","sources":["../../../../src/components/flip-list/flip-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,QAAQ;EAGnB,kBAAkB;IAChB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAEvD,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE;MACnE,OAAO,CAAC,IAAI,CACV,qFAAqF,CACtF,CAAC;KACH;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACzD,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from \"@stencil/core\";\n\n@Component({\n  shadow: false,\n  styleUrl: \"flip-list.css\",\n  tag: \"flip-list\",\n})\nexport class FlipList {\n  private containerEl: HTMLElement;\n\n  componentDidRender() {\n    const children = Array.from(this.containerEl.children);\n\n    if (children.some((child) => ![\"UL\", \"OL\"].includes(child.tagName))) {\n      console.warn(\n        \"[FlipList] Only ul and ol elements are allowed as direct children of <flip-list />.\"\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flip-list\" ref={(el) => (this.containerEl = el)}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/flip-list/flip-list.stories.js

@@ -0,0 +1,50 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-list.mdx";
+export default {
+  component: "flip-list",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipList",
+};
+const Template = (args) => {
+  const container = document.createElement("flip-stack");
+  container.spacing = "24";
+  const unorderedList = generateStoryElement("flip-list", args);
+  unorderedList.innerHTML = `
+    <ul>
+      <li>Level 1</li>
+      <li>Level 1
+        <ul>
+          <li>Level 2</li>
+          <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+              erat, sed diam voluptua. At vero eos et accusam et.</li>
+        </ul>
+      </li>
+      <li>Level 1</li>
+    </ul>
+  `;
+  const orderedList = generateStoryElement("flip-list", args);
+  orderedList.innerHTML = `
+    <ol>
+      <li>Level 1</li>
+      <li>Level 1
+        <ol>
+          <li>Level 2</li>
+          <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+              erat, sed diam voluptua. At vero eos et accusam et.</li>
+        </ol>
+      </li>
+      <li>Level 1</li>
+    </ol>
+  `;
+  container.append("\n  ", unorderedList, "\n  ", orderedList, "\n");
+  return container;
+};
+export const FlipList = Template.bind({});
+FlipList.args = {};
+//# sourceMappingURL=flip-list.stories.js.map

package/dist/collection/components/flip-list/flip-list.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-list.stories.js","sourceRoot":"","sources":["../../../../src/components/flip-list/flip-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,IAAI,MAAM,iBAAiB,CAAC;AAEnC,eAAe;EACb,SAAS,EAAE,WAAW;EACtB,UAAU,EAAE;IACV,IAAI,EAAE;MACJ,IAAI,EAAE,IAAI;KACX;GACF;EACD,KAAK,EAAE,qBAAqB;CAC7B,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;EACvD,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;EAEzB,MAAM,aAAa,GAAG,oBAAoB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;EAC9D,aAAa,CAAC,SAAS,GAAG;;;;;;;;;;;;;GAazB,CAAC;EAEF,MAAM,WAAW,GAAG,oBAAoB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;EAC5D,WAAW,CAAC,SAAS,GAAG;;;;;;;;;;;;;GAavB,CAAC;EAEF,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;EAEnE,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1C,QAAQ,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { generateStoryElement } from \"../../utils\";\nimport Docs from \"./flip-list.mdx\";\n\nexport default {\n  component: \"flip-list\",\n  parameters: {\n    docs: {\n      page: Docs,\n    },\n  },\n  title: \"Components/FlipList\",\n};\n\nconst Template = (args) => {\n  const container = document.createElement(\"flip-stack\");\n  container.spacing = \"24\";\n\n  const unorderedList = generateStoryElement(\"flip-list\", args);\n  unorderedList.innerHTML = `\n    <ul>\n      <li>Level 1</li>\n      <li>Level 1\n        <ul>\n          <li>Level 2</li>\n          <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam\n              erat, sed diam voluptua. At vero eos et accusam et.</li>\n        </ul>\n      </li>\n      <li>Level 1</li>\n    </ul>\n  `;\n\n  const orderedList = generateStoryElement(\"flip-list\", args);\n  orderedList.innerHTML = `\n    <ol>\n      <li>Level 1</li>\n      <li>Level 1\n        <ol>\n          <li>Level 2</li>\n          <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam\n              nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam\n              erat, sed diam voluptua. At vero eos et accusam et.</li>\n        </ol>\n      </li>\n      <li>Level 1</li>\n    </ol>\n  `;\n\n  container.append(\"\\n  \", unorderedList, \"\\n  \", orderedList, \"\\n\");\n\n  return container;\n};\n\nexport const FlipList = Template.bind({});\n\nFlipList.args = {};\n"]}

package/dist/collection/components/flip-modal/flip-modal.css

@@ -0,0 +1,238 @@
+:host {
+  --flip-ghost-button-background-default: var(--s-surface-overlay-default);
+  --flip-ghost-button-background-hovered: var(--s-surface-overlay-hovered);
+  --flip-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--scrolled .modal__header {
+      border-bottom: 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 {
+  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-xl);
+    box-shadow: 0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)
+}
+  }
+
+.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 {
+    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: none
+}
+  }
+
+.modal__heading {
+  overflow: hidden;
+}
+
+.modal__heading::part(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-32);
+    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;
+  border-top: var(--s-border-width-default) solid var(--s-border-default);
+}
+
+@-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;
+  }
+}

package/dist/collection/components/flip-modal/flip-modal.js

@@ -0,0 +1,260 @@
+import { Component, Event, h, Host, Listen, Method, Prop, State, } from "@stencil/core";
+import A11yDialog from "a11y-dialog";
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
+import classnames from "classnames";
+export class FlipModal {
+  constructor() {
+    this.closeButtonLabel = "Close modal";
+    this.closing = false;
+    this.scrolled = false;
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+    };
+    this.onBackdropClick = () => {
+      this.close();
+    };
+    this.onCloseButtonClick = () => {
+      this.close();
+    };
+    this.onPrimaryAction = (event) => {
+      this.primaryAction.emit(event);
+      this.close();
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+      this.close();
+    };
+    this.determineScrollStatus = () => {
+      var _a;
+      const scrolled = ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.scrollTop) > 0;
+      if (scrolled !== this.scrolled) {
+        this.scrolled = scrolled;
+      }
+    };
+  }
+  componentDidLoad() {
+    this.modal = new A11yDialog(this.modalEl);
+    this.determineScrollStatus();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.modal) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.unlockBodyScroll();
+  }
+  onWindowResize() {
+    this.determineScrollStatus();
+  }
+  /**
+   * Open the modal.
+   */
+  async open() {
+    this.modal.show();
+    this.lockBodyScroll();
+    this.determineScrollStatus();
+  }
+  /**
+   * Close the modal.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    this.unlockBodyScroll();
+    setTimeout(() => {
+      this.modal.hide();
+      this.closing = false;
+    }, 150);
+  }
+  lockBodyScroll() {
+    disableBodyScroll(this.scrollContainer);
+  }
+  unlockBodyScroll() {
+    enableBodyScroll(this.scrollContainer);
+  }
+  render() {
+    const className = classnames("modal", {
+      "modal--closing": this.closing,
+      "modal--scrolled": this.scrolled,
+    });
+    return (h(Host, null,
+      h("section", { "aria-hidden": "true", "aria-label": this.label, class: className, id: "modal", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) },
+        h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }),
+        h("div", { class: "modal__body", role: "document" },
+          h("flip-button", { class: "modal__close-button", hideLabel: true, icon: "<flip-icon-close></flip-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }),
+          h("header", { class: "modal__header" },
+            h("flip-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label })),
+          h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) },
+            h("slot", null)),
+          h("footer", { class: "modal__controls" },
+            h("flip-button-group", { wrap: true },
+              this.secondaryActionLabel && (h("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })),
+              this.primaryActionLabel && (h("flip-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))));
+  }
+  static get is() { return "flip-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-modal.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-modal.css"]
+  }; }
+  static get properties() { return {
+    "closeButtonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "close-button-label",
+      "reflect": false,
+      "defaultValue": "\"Close modal\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "primaryActionLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "primary-action-label",
+      "reflect": false
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "secondary-action-label",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "closing": {},
+    "scrolled": {}
+  }; }
+  static get events() { return [{
+      "method": "primaryAction",
+      "name": "primaryAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "secondaryAction",
+      "name": "secondaryAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "open": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Open the modal.",
+        "tags": []
+      }
+    },
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Close the modal.",
+        "tags": []
+      }
+    }
+  }; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "onWindowResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}
+//# sourceMappingURL=flip-modal.js.map

package/dist/collection/components/flip-modal/flip-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip-modal.js","sourceRoot":"","sources":["../../../../src/components/flip-modal/flip-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,SAAS;EALtB;IAMU,qBAAgB,GAAY,aAAa,CAAC;IAQzC,YAAO,GAAG,KAAK,CAAC;IAChB,aAAQ,GAAG,KAAK,CAAC;IAiD1B,cAAS,GAAG,CAAC,KAAoB,EAAE,EAAE;MACnC,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAChC,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC,CAAC;IAEM,oBAAe,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,KAAiB,EAAE,EAAE;MAChD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;MACjC,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC,CAAC;IAEM,0BAAqB,GAAG,GAAG,EAAE;;MACnC,MAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,eAAe,0CAAE,SAAS,IAAG,CAAC,CAAC;MAErD,IAAI,QAAQ,KAAK,IAAI,CAAC,QAAQ,EAAE;QAC9B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;OAC1B;IACH,CAAC,CAAC;GAyEH;EAlJC,gBAAgB;IACd,IAAI,CAAC,KAAK,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC1C,IAAI,CAAC,qBAAqB,EAAE,CAAC;EAC/B,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,EAAE,CAAC;IACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAGD,cAAc;IACZ,IAAI,CAAC,qBAAqB,EAAE,CAAC;EAC/B,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IAClB,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,qBAAqB,EAAE,CAAC;EAC/B,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,KAAK;IACT,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,OAAO;KACR;IAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAExB,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;MAClB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC,EAAE,GAAG,CAAC,CAAC;EACV,CAAC;EAkCO,cAAc;IACpB,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;EAC1C,CAAC;EAEO,gBAAgB;IACtB,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;EACzC,CAAC;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE;MACpC,gBAAgB,EAAE,IAAI,CAAC,OAAO;MAC9B,iBAAiB,EAAE,IAAI,CAAC,QAAQ;KACjC,CAAC,CAAC;IAEH,OAAO,CACL,EAAC,IAAI;MACH,8BACc,MAAM,gBACN,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,SAAS,EAChB,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAEhC,WAAK,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,GAAQ;QAClE,WAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,UAAU;UACtC,mBACE,KAAK,EAAC,qBAAqB,EAC3B,SAAS,QACT,IAAI,EAAC,qCAAqC,EAC1C,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAC5B,OAAO,EAAE,IAAI,CAAC,kBAAkB,GACnB;UACf,cAAQ,KAAK,EAAC,eAAe;YAC3B,oBACE,EAAE,EAAC,IAAI,EACP,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,IAAI,CAAC,KAAK,GACF,CACT;UACT,WACE,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EACpC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAExC,eAAa,CACT;UACN,cAAQ,KAAK,EAAC,iBAAiB;YAC7B,yBAAmB,IAAI;cACpB,IAAI,CAAC,oBAAoB,IAAI,CAC5B,mBACE,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAChC,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAClB,CAChB;cACA,IAAI,CAAC,kBAAkB,IAAI,CAC1B,mBACE,MAAM,EAAC,SAAS,EAChB,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,OAAO,EAAC,MAAM,GACD,CAChB,CACiB,CACb,CACL,CACE,CACL,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport A11yDialog from \"a11y-dialog\";\nimport { disableBodyScroll, enableBodyScroll } from \"body-scroll-lock\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-modal.css\",\n  tag: \"flip-modal\",\n})\nexport class FlipModal {\n  @Prop() closeButtonLabel?: string = \"Close modal\";\n  @Prop() label!: string;\n  @Prop() primaryActionLabel?: string;\n  @Prop() secondaryActionLabel?: string;\n\n  @Event() primaryAction: EventEmitter<MouseEvent>;\n  @Event() secondaryAction: EventEmitter<MouseEvent>;\n\n  @State() closing = false;\n  @State() scrolled = false;\n\n  private modal: A11yDialog;\n  private modalEl: HTMLElement;\n  private scrollContainer: HTMLElement;\n\n  componentDidLoad() {\n    this.modal = new A11yDialog(this.modalEl);\n    this.determineScrollStatus();\n  }\n\n  disconnectedCallback() {\n    this.modal?.destroy();\n    this.unlockBodyScroll();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Open the modal.\n   */\n  @Method()\n  async open() {\n    this.modal.show();\n    this.lockBodyScroll();\n    this.determineScrollStatus();\n  }\n\n  /**\n   * Close the modal.\n   */\n  @Method()\n  async close() {\n    if (this.closing) {\n      return;\n    }\n\n    this.closing = true;\n    this.unlockBodyScroll();\n\n    setTimeout(() => {\n      this.modal.hide();\n      this.closing = false;\n    }, 150);\n  }\n\n  onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.close();\n    }\n  };\n\n  private onBackdropClick = () => {\n    this.close();\n  };\n\n  private onCloseButtonClick = () => {\n    this.close();\n  };\n\n  private onPrimaryAction = (event: MouseEvent) => {\n    this.primaryAction.emit(event);\n    this.close();\n  };\n\n  private onSecondaryAction = (event: MouseEvent) => {\n    this.secondaryAction.emit(event);\n    this.close();\n  };\n\n  private determineScrollStatus = () => {\n    const scrolled = this.scrollContainer?.scrollTop > 0;\n\n    if (scrolled !== this.scrolled) {\n      this.scrolled = scrolled;\n    }\n  };\n\n  private lockBodyScroll() {\n    disableBodyScroll(this.scrollContainer);\n  }\n\n  private unlockBodyScroll() {\n    enableBodyScroll(this.scrollContainer);\n  }\n\n  render() {\n    const className = classnames(\"modal\", {\n      \"modal--closing\": this.closing,\n      \"modal--scrolled\": this.scrolled,\n    });\n\n    return (\n      <Host>\n        <section\n          aria-hidden=\"true\"\n          aria-label={this.label}\n          class={className}\n          id=\"modal\"\n          onKeyDown={this.onKeyDown}\n          ref={(el) => (this.modalEl = el)}\n        >\n          <div class=\"modal__backdrop\" onClick={this.onBackdropClick}></div>\n          <div class=\"modal__body\" role=\"document\">\n            <flip-button\n              class=\"modal__close-button\"\n              hideLabel\n              icon=\"<flip-icon-close></flip-icon-close>\"\n              label={this.closeButtonLabel}\n              onClick={this.onCloseButtonClick}\n            ></flip-button>\n            <header class=\"modal__header\">\n              <flip-heading\n                as=\"h2\"\n                class=\"modal__heading\"\n                level={3}\n                text={this.label}\n              ></flip-heading>\n            </header>\n            <div\n              class=\"modal__content\"\n              onScroll={this.determineScrollStatus}\n              ref={(el) => (this.scrollContainer = el)}\n            >\n              <slot></slot>\n            </div>\n            <footer class=\"modal__controls\">\n              <flip-button-group wrap>\n                {this.secondaryActionLabel && (\n                  <flip-button\n                    label={this.secondaryActionLabel}\n                    onClick={this.onSecondaryAction}\n                  ></flip-button>\n                )}\n                {this.primaryActionLabel && (\n                  <flip-button\n                    intent=\"primary\"\n                    label={this.primaryActionLabel}\n                    onClick={this.onPrimaryAction}\n                    variant=\"flat\"\n                  ></flip-button>\n                )}\n              </flip-button-group>\n            </footer>\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"]}