@haiilo/catalyst 2.5.0 → 3.0.1

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

@@ -1,117 +0,0 @@
-import { Component, Element, h, Method, Prop, State } from '@stencil/core';
-import * as focusTrap from 'focus-trap';
-import firstTabbable from '../../utils/first-tabbable';
-export class CatModal {
-  constructor() {
-    this.isVisible = false;
-    /**
-     * The size of the modal.
-     */
-    this.size = 'm';
-  }
-  componentDidLoad() {
-    if (this.modal) {
-      this.trap = focusTrap.createFocusTrap(this.modal, {
-        tabbableOptions: {
-          getShadowRoot: true
-        },
-        initialFocus: firstTabbable(this.closeButton),
-        allowOutsideClick: true,
-        clickOutsideDeactivates: event => !this.modal || !event.composedPath().includes(this.modal),
-        onDeactivate: () => (this.isVisible = false),
-        setReturnFocus: previousActiveElement => previousActiveElement instanceof HTMLElement
-          ? firstTabbable(previousActiveElement)
-          : previousActiveElement
-      });
-    }
-  }
-  componentDidUpdate() {
-    var _a;
-    if (this.isVisible)
-      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.activate();
-    this.updateAccessibility(this.hostElement);
-  }
-  /**
-   * Shows the modal.
-   */
-  async show() {
-    this.isVisible = true;
-  }
-  render() {
-    return (h("div", { "aria-modal": true, role: "dialog", "aria-hidden": !this.isVisible ? 'true' : 'false', class: "modal-wrapper" },
-      h("div", { ref: el => (this.modal = el), class: { modal: true, [`modal-${this.size}`]: Boolean(this.size) } },
-        h("div", { class: "modal-header" },
-          h("cat-button", { ref: el => (this.closeButton = el), icon: "cross-outlined", class: "close-button", size: "s", iconOnly: true, a11yLabel: "close", onCatClick: this.onClick.bind(this) })),
-        h("div", { class: "modal-content" },
-          h("slot", null)))));
-  }
-  onClick() {
-    var _a;
-    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-  }
-  updateAccessibility(element) {
-    if (element.parentElement) {
-      Array.from(element.parentElement.children).forEach(elementSibling => {
-        if (elementSibling !== element) {
-          this.isVisible
-            ? elementSibling.setAttribute('aria-hidden', 'true')
-            : elementSibling.removeAttribute('aria-hidden');
-        }
-      });
-      if (element.parentElement !== document.body) {
-        this.updateAccessibility(element.parentElement);
-      }
-    }
-  }
-  static get is() { return "cat-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["cat-modal.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["cat-modal.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'s' | 'm' | 'l'",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The size of the modal."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'m'"
-    }
-  }; }
-  static get states() { return {
-    "isVisible": {}
-  }; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Shows the modal.",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "hostElement"; }
-}
-//# sourceMappingURL=cat-modal.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"cat-modal.js","sourceRoot":"","sources":["../../../src/components/cat-modal/cat-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport firstTabbable from '../../utils/first-tabbable';\n\n@Component({\n  tag: 'cat-modal',\n  styleUrl: 'cat-modal.scss',\n  shadow: true\n})\nexport class CatModal {\n  private trap?: focusTrap.FocusTrap;\n  private modal?: HTMLElement;\n  private closeButton?: HTMLElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() isVisible = false;\n\n  /**\n   * The size of the modal.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  componentDidLoad(): void {\n    if (this.modal) {\n      this.trap = focusTrap.createFocusTrap(this.modal, {\n        tabbableOptions: {\n          getShadowRoot: true\n        },\n        initialFocus: firstTabbable(this.closeButton),\n        allowOutsideClick: true,\n        clickOutsideDeactivates: event => !this.modal || !event.composedPath().includes(this.modal),\n        onDeactivate: () => (this.isVisible = false),\n        setReturnFocus: previousActiveElement =>\n          previousActiveElement instanceof HTMLElement\n            ? (firstTabbable(previousActiveElement) as HTMLElement)\n            : previousActiveElement\n      });\n    }\n  }\n\n  componentDidUpdate(): void {\n    if (this.isVisible) this.trap?.activate();\n    this.updateAccessibility(this.hostElement);\n  }\n\n  /**\n   * Shows the modal.\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true;\n  }\n\n  render() {\n    return (\n      <div aria-modal role=\"dialog\" aria-hidden={!this.isVisible ? 'true' : 'false'} class=\"modal-wrapper\">\n        <div ref={el => (this.modal = el)} class={{ modal: true, [`modal-${this.size}`]: Boolean(this.size) }}>\n          <div class=\"modal-header\">\n            <cat-button\n              ref={el => (this.closeButton = el)}\n              icon=\"cross-outlined\"\n              class=\"close-button\"\n              size=\"s\"\n              iconOnly\n              a11yLabel=\"close\"\n              onCatClick={this.onClick.bind(this)}\n            ></cat-button>\n          </div>\n          <div class=\"modal-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private onClick() {\n    this.trap?.deactivate();\n  }\n\n  private updateAccessibility(element: HTMLElement) {\n    if (element.parentElement) {\n      Array.from(element.parentElement.children).forEach(elementSibling => {\n        if (elementSibling !== element) {\n          this.isVisible\n            ? elementSibling.setAttribute('aria-hidden', 'true')\n            : elementSibling.removeAttribute('aria-hidden');\n        }\n      });\n\n      if (element.parentElement !== document.body) {\n        this.updateAccessibility(element.parentElement);\n      }\n    }\n  }\n}\n"]}

package/dist/components/cat-modal.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface CatModal extends Components.CatModal, HTMLElement {}
-export const CatModal: {
-  prototype: CatModal;
-  new (): CatModal;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/cat-modal.js

@@ -1,111 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as createFocusTrap } from './focus-trap.esm.js';
-import { f as firstTabbable } from './first-tabbable.js';
-import { d as defineCustomElement$4 } from './cat-button2.js';
-import { d as defineCustomElement$3 } from './cat-icon2.js';
-import { d as defineCustomElement$2 } from './cat-spinner2.js';
-
-const catModalCss = ":host{display:block}:host([hidden]){display:none}.modal-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgb(rgb(var(--cat-bg-backdrop, 0, 0, 0)), var(--cat-opacity-backdrop, 0.6));z-index:2;display:flex}.modal-wrapper[aria-hidden=true]{display:none}.modal{margin:auto;z-index:2;position:relative;background-color:white;border-radius:var(--cat-border-radius-l, 0.5rem);max-width:100%;padding:32px}.modal-header{display:flex;justify-content:end;align-self:stretch}.modal-header .close-button::part(button){box-shadow:unset}.modal-content{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;margin:16px 0}.modal-s{width:400px}.modal-m{width:600px}.modal-l{width:800px}";
-
-const CatModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.isVisible = false;
-    /**
-     * The size of the modal.
-     */
-    this.size = 'm';
-  }
-  componentDidLoad() {
-    if (this.modal) {
-      this.trap = createFocusTrap(this.modal, {
-        tabbableOptions: {
-          getShadowRoot: true
-        },
-        initialFocus: firstTabbable(this.closeButton),
-        allowOutsideClick: true,
-        clickOutsideDeactivates: event => !this.modal || !event.composedPath().includes(this.modal),
-        onDeactivate: () => (this.isVisible = false),
-        setReturnFocus: previousActiveElement => previousActiveElement instanceof HTMLElement
-          ? firstTabbable(previousActiveElement)
-          : previousActiveElement
-      });
-    }
-  }
-  componentDidUpdate() {
-    var _a;
-    if (this.isVisible)
-      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.activate();
-    this.updateAccessibility(this.hostElement);
-  }
-  /**
-   * Shows the modal.
-   */
-  async show() {
-    this.isVisible = true;
-  }
-  render() {
-    return (h("div", { "aria-modal": true, role: "dialog", "aria-hidden": !this.isVisible ? 'true' : 'false', class: "modal-wrapper" }, h("div", { ref: el => (this.modal = el), class: { modal: true, [`modal-${this.size}`]: Boolean(this.size) } }, h("div", { class: "modal-header" }, h("cat-button", { ref: el => (this.closeButton = el), icon: "cross-outlined", class: "close-button", size: "s", iconOnly: true, a11yLabel: "close", onCatClick: this.onClick.bind(this) })), h("div", { class: "modal-content" }, h("slot", null)))));
-  }
-  onClick() {
-    var _a;
-    (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-  }
-  updateAccessibility(element) {
-    if (element.parentElement) {
-      Array.from(element.parentElement.children).forEach(elementSibling => {
-        if (elementSibling !== element) {
-          this.isVisible
-            ? elementSibling.setAttribute('aria-hidden', 'true')
-            : elementSibling.removeAttribute('aria-hidden');
-        }
-      });
-      if (element.parentElement !== document.body) {
-        this.updateAccessibility(element.parentElement);
-      }
-    }
-  }
-  get hostElement() { return this; }
-  static get style() { return catModalCss; }
-}, [1, "cat-modal", {
-    "size": [1],
-    "isVisible": [32],
-    "show": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cat-modal", "cat-button", "cat-icon", "cat-spinner"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cat-modal":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CatModal$1);
-      }
-      break;
-    case "cat-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "cat-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "cat-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const CatModal = CatModal$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { CatModal, defineCustomElement };
-
-//# sourceMappingURL=cat-modal.js.map

package/dist/components/cat-modal.js.map

@@ -1 +0,0 @@
-{"file":"cat-modal.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,0sBAA0sB;;MCSjtBA,UAAQ;EALrB;;;;IAYW,cAAS,GAAG,KAAK,CAAC;;;;IAKnB,SAAI,GAAoB,GAAG,CAAC;GA2ErC;EAzEC,gBAAgB;IACd,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,CAAC,IAAI,GAAGC,eAAyB,CAAC,IAAI,CAAC,KAAK,EAAE;QAChD,eAAe,EAAE;UACf,aAAa,EAAE,IAAI;SACpB;QACD,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC;QAC7C,iBAAiB,EAAE,IAAI;QACvB,uBAAuB,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;QAC3F,YAAY,EAAE,OAAO,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAC5C,cAAc,EAAE,qBAAqB,IACnC,qBAAqB,YAAY,WAAW;YACvC,aAAa,CAAC,qBAAqB,CAAiB;YACrD,qBAAqB;OAC5B,CAAC,CAAC;KACJ;GACF;EAED,kBAAkB;;IAChB,IAAI,IAAI,CAAC,SAAS;MAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,EAAE,CAAC;IAC1C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC5C;;;;EAMD,MAAM,IAAI;IACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAED,MAAM;IACJ,QACE,+BAAgB,IAAI,EAAC,QAAQ,iBAAc,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,EAAE,KAAK,EAAC,eAAe,IAClG,WAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IACnG,WAAK,KAAK,EAAC,cAAc,IACvB,kBACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAClC,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,GAAG,EACR,QAAQ,QACR,SAAS,EAAC,OAAO,EACjB,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GACvB,CACV,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,eAAa,CACT,CACF,CACF,EACN;GACH;EAEO,OAAO;;IACb,MAAA,IAAI,CAAC,IAAI,0CAAE,UAAU,EAAE,CAAC;GACzB;EAEO,mBAAmB,CAAC,OAAoB;IAC9C,IAAI,OAAO,CAAC,aAAa,EAAE;MACzB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,cAAc;QAC/D,IAAI,cAAc,KAAK,OAAO,EAAE;UAC9B,IAAI,CAAC,SAAS;cACV,cAAc,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;cAClD,cAAc,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;SACnD;OACF,CAAC,CAAC;MAEH,IAAI,OAAO,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,EAAE;QAC3C,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;OACjD;KACF;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatModal","focusTrap.createFocusTrap"],"sources":["./src/components/cat-modal/cat-modal.scss?tag=cat-modal&encapsulation=shadow","./src/components/cat-modal/cat-modal.tsx"],"sourcesContent":["@use 'variables' as *;\n@use 'mixins' as *;\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.modal-wrapper {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: rgb(cat-token('color.ui.background.backdrop'), cat-token('opacity.backdrop'));\n  z-index: 2;\n  display: flex;\n\n  &[aria-hidden='true'] {\n    display: none;\n  }\n}\n\n.modal {\n  margin: auto;\n  z-index: 2;\n  position: relative;\n  background-color: cat-token('color.ui.background.body');\n  border-radius: cat-border-radius('l');\n  max-width: 100%;\n  padding: 32px;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: end;\n  align-self: stretch;\n\n  .close-button::part(button) {\n    box-shadow: unset;\n  }\n}\n\n.modal-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: stretch;\n  margin: 16px 0;\n}\n\n@mixin size($size) {\n  .modal-#{$size} {\n    width: cat-token('size.modal.#{$size}');\n  }\n}\n\n@include size('s');\n@include size('m');\n@include size('l');\n","import { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport firstTabbable from '../../utils/first-tabbable';\n\n@Component({\n  tag: 'cat-modal',\n  styleUrl: 'cat-modal.scss',\n  shadow: true\n})\nexport class CatModal {\n  private trap?: focusTrap.FocusTrap;\n  private modal?: HTMLElement;\n  private closeButton?: HTMLElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() isVisible = false;\n\n  /**\n   * The size of the modal.\n   */\n  @Prop() size: 's' | 'm' | 'l' = 'm';\n\n  componentDidLoad(): void {\n    if (this.modal) {\n      this.trap = focusTrap.createFocusTrap(this.modal, {\n        tabbableOptions: {\n          getShadowRoot: true\n        },\n        initialFocus: firstTabbable(this.closeButton),\n        allowOutsideClick: true,\n        clickOutsideDeactivates: event => !this.modal || !event.composedPath().includes(this.modal),\n        onDeactivate: () => (this.isVisible = false),\n        setReturnFocus: previousActiveElement =>\n          previousActiveElement instanceof HTMLElement\n            ? (firstTabbable(previousActiveElement) as HTMLElement)\n            : previousActiveElement\n      });\n    }\n  }\n\n  componentDidUpdate(): void {\n    if (this.isVisible) this.trap?.activate();\n    this.updateAccessibility(this.hostElement);\n  }\n\n  /**\n   * Shows the modal.\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.isVisible = true;\n  }\n\n  render() {\n    return (\n      <div aria-modal role=\"dialog\" aria-hidden={!this.isVisible ? 'true' : 'false'} class=\"modal-wrapper\">\n        <div ref={el => (this.modal = el)} class={{ modal: true, [`modal-${this.size}`]: Boolean(this.size) }}>\n          <div class=\"modal-header\">\n            <cat-button\n              ref={el => (this.closeButton = el)}\n              icon=\"cross-outlined\"\n              class=\"close-button\"\n              size=\"s\"\n              iconOnly\n              a11yLabel=\"close\"\n              onCatClick={this.onClick.bind(this)}\n            ></cat-button>\n          </div>\n          <div class=\"modal-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private onClick() {\n    this.trap?.deactivate();\n  }\n\n  private updateAccessibility(element: HTMLElement) {\n    if (element.parentElement) {\n      Array.from(element.parentElement.children).forEach(elementSibling => {\n        if (elementSibling !== element) {\n          this.isVisible\n            ? elementSibling.setAttribute('aria-hidden', 'true')\n            : elementSibling.removeAttribute('aria-hidden');\n        }\n      });\n\n      if (element.parentElement !== document.body) {\n        this.updateAccessibility(element.parentElement);\n      }\n    }\n  }\n}\n"],"version":3}