@haiilo/catalyst 0.0.11 → 0.1.0

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

@@ -0,0 +1,43 @@
+class CatIconRegistry {
+  constructor() {
+    this.icons = new Map();
+    // hide constructor
+  }
+  static getInstance() {
+    if (!CatIconRegistry.instance) {
+      CatIconRegistry.instance = new CatIconRegistry();
+    }
+    return CatIconRegistry.instance;
+  }
+  getIcon(name, setName) {
+    return this.icons.get(this.buildName(name, setName));
+  }
+  addIcon(name, data, setName) {
+    this.icons.set(this.buildName(name, setName), data);
+    window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));
+  }
+  addIcons(icons, setName) {
+    Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));
+    window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));
+  }
+  removeIcon(name, setName) {
+    this.icons.delete(this.buildName(name, setName));
+    window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));
+  }
+  removeIcons(names, setName) {
+    names.forEach(name => this.icons.delete(this.buildName(name, setName)));
+    window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));
+  }
+  buildName(name, setName) {
+    return setName ? `${setName}:name` : name;
+  }
+  buildEvent(name, detail) {
+    return new CustomEvent(name, {
+      bubbles: true,
+      composed: true,
+      detail
+    });
+  }
+}
+
+export { CatIconRegistry as C };

package/dist/components/cat-icon.js

@@ -0,0 +1,6 @@
+import { C as CatIcon$1, d as defineCustomElement$1 } from './cat-icon2.js';
+
+const CatIcon = CatIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatIcon, defineCustomElement };

package/dist/components/cat-icon2.js

@@ -0,0 +1,47 @@
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { C as CatIconRegistry } from './cat-icon-registry.js';
+
+const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}: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}";
+
+let CatIcon = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 style() { return catIconCss; }
+};
+CatIcon = /*@__PURE__*/ proxyCustomElement(CatIcon, [1, "cat-icon", {
+    "icon": [1],
+    "size": [1],
+    "a11yLabel": [1, "a11y-label"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-icon":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatIcon);
+      }
+      break;
+  } });
+}
+
+export { CatIcon as C, defineCustomElement as d };

package/dist/components/cat-spinner.js

@@ -0,0 +1,6 @@
+import { C as CatSpinner$1, d as defineCustomElement$1 } from './cat-spinner2.js';
+
+const CatSpinner = CatSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CatSpinner, defineCustomElement };

package/dist/components/cat-spinner2.js

@@ -0,0 +1,40 @@
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
+
+const catSpinnerCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}span{display:inline-flex}svg{fill:none;stroke:currentColor;stroke-dasharray:135px;stroke-dashoffset:95px;stroke-linecap:round;stroke-width:5px;transform-origin:center center;animation:cat-spinner 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;width:1em;height:1em}.cat-spinner-xs svg{font-size:0.75rem}.cat-spinner-s svg{font-size:1rem}.cat-spinner-m svg{font-size:1.25rem}.cat-spinner-l svg{font-size:1.5rem}.cat-spinner-xl svg{font-size:1.75rem}@keyframes cat-spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
+
+let CatSpinner = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The size of the spinner.
+     */
+    this.size = 'm';
+  }
+  render() {
+    return (h("span", { "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
+        [`cat-spinner-${this.size}`]: this.size !== 'inline'
+      } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { cx: "24", cy: "24", r: "21.5" }))));
+  }
+  static get style() { return catSpinnerCss; }
+};
+CatSpinner = /*@__PURE__*/ proxyCustomElement(CatSpinner, [1, "cat-spinner", {
+    "size": [1],
+    "a11yLabel": [1, "a11y-label"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatSpinner);
+      }
+      break;
+  } });
+}
+
+export { CatSpinner as C, defineCustomElement as d };