@haiilo/catalyst 0.2.2 → 0.3.2

package/dist/collection/components/cat-icon/cat-icon.css

@@ -0,0 +1,50 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+span {
+  display: inline-flex;
+}
+
+svg {
+  fill: currentColor;
+  stroke: none;
+  transform-origin: center center;
+  width: 1em;
+  height: 1em;
+}
+
+.cat-icon-xs svg {
+  font-size: 0.75rem;
+}
+
+.cat-icon-s svg {
+  font-size: 1rem;
+}
+
+.cat-icon-m svg {
+  font-size: 1.25rem;
+}
+
+.cat-icon-l svg {
+  font-size: 1.5rem;
+}
+
+.cat-icon-xl svg {
+  font-size: 1.75rem;
+}

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

@@ -0,0 +1,90 @@
+import { Component, h, Prop } from '@stencil/core';
+import { CatIconRegistry } from './cat-icon-registry';
+/**
+ * Icons are used to provide additional meaning or in places where text label
+ * doesn't fit.
+ *
+ * @part icon - The native span element wrapping the SVG icon.
+ */
+export class CatIcon {
+  constructor() {
+    this.iconRegistry = CatIconRegistry.getInstance();
+    /**
+     * The name of the icon.
+     */
+    this.icon = '';
+    /**
+     * The size of the icon.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h("span", { innerHTML: this.iconRegistry.getIcon(this.icon), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
+        [`cat-icon-${this.size}`]: this.size !== 'inline'
+      } }));
+  }
+  static get is() { return "cat-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-icon.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the icon."
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xs' | 's' | 'm' | 'l' | 'xl' | 'inline'",
+        "resolved": "\"inline\" | \"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The size of the icon."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'m'"
+    },
+    "a11yLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Adds accessible label for the icon that is only shown for screen\nreaders. The `aria-hidden` attribute will be set if no label is present."
+      },
+      "attribute": "a11y-label",
+      "reflect": false
+    }
+  }; }
+}
+//# sourceMappingURL=cat-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-icon.js","sourceRoot":"","sources":["../../../src/components/cat-icon/cat-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;;;;GAKG;AAMH,MAAM,OAAO,OAAO;EALpB;IAMmB,iBAAY,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC;IAE9D;;OAEG;IACK,SAAI,GAAG,EAAE,CAAC;IAElB;;OAEG;IACK,SAAI,GAA6C,GAAG,CAAC;GAqB9D;EAbC,MAAM;IACJ,OAAO,CACL,YACE,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,gBACnC,IAAI,CAAC,SAAS,iBACb,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAC3C,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,CAAC,YAAY,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;OAClD,GACK,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { CatIconRegistry } from './cat-icon-registry';\n\n/**\n * Icons are used to provide additional meaning or in places where text label\n * doesn't fit.\n *\n * @part icon - The native span element wrapping the SVG icon.\n */\n@Component({\n  tag: 'cat-icon',\n  styleUrl: 'cat-icon.scss',\n  shadow: true\n})\nexport class CatIcon {\n  private readonly iconRegistry = CatIconRegistry.getInstance();\n\n  /**\n   * The name of the icon.\n   */\n  @Prop() icon = '';\n\n  /**\n   * The size of the icon.\n   */\n  @Prop() size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline' = 'm';\n\n  /**\n   * Adds accessible label for the icon that is only shown for screen\n   * readers. The `aria-hidden` attribute will be set if no label is present.\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  render() {\n    return (\n      <span\n        innerHTML={this.iconRegistry.getIcon(this.icon)}\n        aria-label={this.a11yLabel}\n        aria-hidden={this.a11yLabel ? null : 'true'}\n        part=\"icon\"\n        class={{\n          [`cat-icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"]}

package/dist/collection/components/cat-menu/cat-menu.css

@@ -0,0 +1,33 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.content {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  position: absolute;
+  background: white;
+  display: none;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  min-width: 8rem;
+  max-width: 16rem;
+  min-height: 2rem;
+  max-height: calc(100vh - 48px);
+  box-shadow: 0 1px 4px 0 rgba(16, 29, 48, 0.2);
+  border-radius: 0.25rem;
+}

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

@@ -0,0 +1,186 @@
+import { autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
+import { Component, Event, h, Host, Listen, Prop } from '@stencil/core';
+import * as focusTrap from 'focus-trap';
+import { tabbable } from 'tabbable';
+let nextUniqueId = 0;
+export class CatMenu {
+  constructor() {
+    this.id = nextUniqueId++;
+    /**
+     * The placement of the menu.
+     */
+    this.placement = 'bottom-start';
+  }
+  clickHandler(event) {
+    var _a;
+    // hide menu on button click
+    if (this.content && event.composedPath().includes(this.content)) {
+      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+      this.hide();
+    }
+  }
+  componentDidLoad() {
+    var _a, _b, _c, _d, _e;
+    this.trigger = this.firstTabbable(this.triggerSlot);
+    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
+    (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+    (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
+    (_d = this.content) === null || _d === void 0 ? void 0 : _d.setAttribute('id', this.contentId);
+    if (this.trigger && this.content) {
+      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => this.show());
+      autoUpdate(this.trigger, this.content, () => this.update());
+    }
+    this.keyListener = event => {
+      if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
+        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
+        const activeElement = this.firstTabbable(document.activeElement);
+        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
+        const activeOff = event.key === 'ArrowDown' ? 1 : -1;
+        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
+        targetElements[targetIdx].focus();
+        event.preventDefault();
+      }
+    };
+    document.addEventListener('keydown', this.keyListener);
+  }
+  disconnectedCallback() {
+    if (this.keyListener) {
+      document.removeEventListener('keydown', this.keyListener);
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }),
+      h("div", { class: "content", ref: el => (this.content = el) },
+        h("slot", { name: "content" }))));
+  }
+  get contentId() {
+    return `cat-menu-${this.id}`;
+  }
+  show() {
+    var _a;
+    if (this.content) {
+      this.content.style.display = 'block';
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
+      this.catOpen.emit();
+      this.trap = this.trap
+        ? this.trap.updateContainerElements(this.content)
+        : focusTrap.createFocusTrap(this.content, {
+          tabbableOptions: {
+            getShadowRoot: true
+          },
+          allowOutsideClick: true,
+          clickOutsideDeactivates: event => !this.content || !event.composedPath().includes(this.content),
+          onPostDeactivate: () => this.hide()
+        });
+      this.trap.activate();
+    }
+  }
+  hide() {
+    var _a;
+    if (this.content) {
+      this.content.style.display = '';
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
+      this.catClose.emit();
+    }
+  }
+  update() {
+    if (this.trigger && this.content) {
+      computePosition(this.trigger, this.content, {
+        placement: this.placement,
+        middleware: [offset(CatMenu.OFFSET), flip()]
+      }).then(({ x, y }) => {
+        if (this.content) {
+          Object.assign(this.content.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+        }
+      });
+    }
+  }
+  firstTabbable(container) {
+    return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
+  }
+  static get is() { return "cat-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-menu.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-menu.css"]
+  }; }
+  static get properties() { return {
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Placement",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "@floating-ui/dom"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placement of the menu."
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'bottom-start'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "catOpen",
+      "name": "catOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the menu is opened."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "catClose",
+      "name": "catClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the menu is closed."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "catClick",
+      "method": "clickHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+CatMenu.OFFSET = 4;
+//# sourceMappingURL=cat-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-menu.js","sourceRoot":"","sources":["../../../src/components/cat-menu/cat-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement } from '@floating-ui/dom';\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n  tag: 'cat-menu',\n  styleUrl: 'cat-menu.scss',\n  shadow: true\n})\nexport class CatMenu {\n  private static readonly OFFSET = 4;\n  private readonly id = nextUniqueId++;\n  private triggerSlot?: Element;\n  private trigger?: FocusableElement;\n  private content?: HTMLElement;\n  private trap?: focusTrap.FocusTrap;\n  private keyListener?: (event: KeyboardEvent) => void;\n\n  /**\n   * The placement of the menu.\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  /**\n   * Emitted when the menu is opened.\n   */\n  @Event() catOpen!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the menu is closed.\n   */\n  @Event() catClose!: EventEmitter<FocusEvent>;\n\n  @Listen('catClick')\n  clickHandler(event: CustomEvent<MouseEvent>) {\n    // hide menu on button click\n    if (this.content && event.composedPath().includes(this.content)) {\n      this.trap?.deactivate();\n      this.hide();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.trigger = this.firstTabbable(this.triggerSlot);\n    this.trigger?.setAttribute('aria-haspopup', 'true');\n    this.trigger?.setAttribute('aria-expanded', 'false');\n    this.trigger?.setAttribute('aria-controls', this.contentId);\n    this.content?.setAttribute('id', this.contentId);\n    if (this.trigger && this.content) {\n      this.trigger?.addEventListener('click', () => this.show());\n      autoUpdate(this.trigger, this.content, () => this.update());\n    }\n\n    this.keyListener = event => {\n      if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n        const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n        const activeElement = this.firstTabbable(document.activeElement);\n        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n        const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n        const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n        targetElements[targetIdx].focus();\n        event.preventDefault();\n      }\n    };\n    document.addEventListener('keydown', this.keyListener);\n  }\n\n  disconnectedCallback(): void {\n    if (this.keyListener) {\n      document.removeEventListener('keydown', this.keyListener);\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"trigger\" ref={el => (this.triggerSlot = el)}></slot>\n        <div class=\"content\" ref={el => (this.content = el)}>\n          <slot name=\"content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n\n  private get contentId() {\n    return `cat-menu-${this.id}`;\n  }\n\n  private show() {\n    if (this.content) {\n      this.content.style.display = 'block';\n      this.trigger?.setAttribute('aria-expanded', 'true');\n      this.catOpen.emit();\n      this.trap = this.trap\n        ? this.trap.updateContainerElements(this.content)\n        : focusTrap.createFocusTrap(this.content, {\n            tabbableOptions: {\n              getShadowRoot: true\n            },\n            allowOutsideClick: true,\n            clickOutsideDeactivates: event => !this.content || !event.composedPath().includes(this.content),\n            onPostDeactivate: () => this.hide()\n          });\n      this.trap.activate();\n    }\n  }\n\n  private hide() {\n    if (this.content) {\n      this.content.style.display = '';\n      this.trigger?.setAttribute('aria-expanded', 'false');\n      this.catClose.emit();\n    }\n  }\n\n  private update() {\n    if (this.trigger && this.content) {\n      computePosition(this.trigger, this.content, {\n        placement: this.placement,\n        middleware: [offset(CatMenu.OFFSET), flip()]\n      }).then(({ x, y }) => {\n        if (this.content) {\n          Object.assign(this.content.style, {\n            left: `${x}px`,\n            top: `${y}px`\n          });\n        }\n      });\n    }\n  }\n\n  private firstTabbable(container?: Element | null) {\n    return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();\n  }\n}\n"]}

package/dist/collection/components/cat-scrollable/cat-scrollable.css

@@ -0,0 +1,69 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  overflow: hidden;
+  position: relative;
+  display: flex;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.shadow-bottom, .shadow-right, .shadow-left, .shadow-top {
+  position: absolute;
+  transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.shadow-top {
+  z-index: 2;
+  width: 100%;
+  top: 0;
+}
+
+.shadow-left {
+  z-index: 4;
+  height: 100%;
+  left: 0;
+}
+
+.shadow-right {
+  z-index: 4;
+  height: 100%;
+  right: 0;
+}
+
+.shadow-bottom {
+  z-index: 2;
+  width: 100%;
+  bottom: 0;
+}
+
+.scrollable-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+.scrollable-wrapper.cat-scrollable-top .shadow-top, .scrollable-wrapper.cat-scrollable-bottom .shadow-bottom, .scrollable-wrapper.cat-scrollable-left .shadow-left, .scrollable-wrapper.cat-scrollable-right .shadow-right {
+  box-shadow: 0 0 4px 1px rgba(16, 29, 48, 0.2);
+}
+
+.scrollable-content {
+  overflow: hidden;
+  white-space: nowrap;
+}
+.scrollable-content.scroll-x {
+  overflow-x: auto;
+}
+.scrollable-content.scroll-y {
+  overflow-y: auto;
+}
+.scrollable-content.no-overscroll {
+  overscroll-behavior: contain;
+}