@haiilo/catalyst 0.3.2 → 0.5.1

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

@@ -0,0 +1,314 @@
+import { Component, Event, h, Method, Prop } from '@stencil/core';
+import log from 'loglevel';
+let nextUniqueId = 0;
+/**
+ * Checkboxes are used to let a user choose one or more options from a limited
+ * number of options.
+ *
+ * @part checkbox - The checkbox element.
+ * @part label - The label content.
+ */
+export class CatCheckbox {
+  constructor() {
+    this.id = `cat-checkbox-${nextUniqueId++}`;
+    /**
+     * Checked state of the checkbox
+     */
+    this.checked = false;
+    /**
+     * Disabled state of the checkbox
+     */
+    this.disabled = false;
+    /**
+     * Indeterminate state of the checkbox
+     */
+    this.indeterminate = false;
+    /**
+     * Label of the checkbox which is presented in the UI
+     */
+    this.label = '';
+    /**
+     * Visually hide the label, but still show it to assistive technologies like screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Required state of the checkbox
+     */
+    this.required = false;
+  }
+  componentDidLoad() {
+    if (this.input && this.indeterminate) {
+      this.input.indeterminate = true;
+    }
+  }
+  componentWillRender() {
+    if (!this.label) {
+      log.error('[A11y] Missing ARIA label on checkbox', this);
+    }
+  }
+  /**
+   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.
+   *
+   * @param options An optional object providing options to control aspects of
+   * the focusing process.
+   */
+  async setFocus(options) {
+    this.input.focus(options);
+  }
+  render() {
+    return (h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } },
+      h("input", { ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
+      h("span", { class: "box", "aria-hidden": "true", part: "checkbox" },
+        h("svg", { class: "check", viewBox: "0 0 12 10" },
+          h("polyline", { points: "1.5 6 4.5 9 10.5 1" })),
+        h("svg", { class: "dash", viewBox: "0 0 12 10" },
+          h("polyline", { points: "1.5 5 10.5 5" }))),
+      h("span", { class: "label", part: "label" }, this.label)));
+  }
+  onInput(event) {
+    this.catChange.emit(event);
+  }
+  onFocus(event) {
+    this.catFocus.emit(event);
+  }
+  onBlur(event) {
+    this.catBlur.emit(event);
+  }
+  static get is() { return "cat-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-checkbox.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Checked state of the checkbox"
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disabled state of the checkbox"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indeterminate state of the checkbox"
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Label of the checkbox which is presented in the UI"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "labelHidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Visually hide the label, but still show it to assistive technologies like screen readers."
+      },
+      "attribute": "label-hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The name of the input"
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Required state of the checkbox"
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The value of the checkbox"
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "catChange",
+      "name": "catChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the checked status of the checkbox is changed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "catFocus",
+      "name": "catFocus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the checkbox received focus."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "catBlur",
+      "name": "catBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the checkbox loses focus."
+      },
+      "complexType": {
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
+        "references": {
+          "FocusEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "(options?: FocusOptions | undefined) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "options An optional object providing options to control aspects of\nthe focusing process."
+              }],
+            "text": "An optional object providing options to control aspects of\nthe focusing process."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FocusOptions": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.",
+        "tags": [{
+            "name": "param",
+            "text": "options An optional object providing options to control aspects of\nthe focusing process."
+          }]
+      }
+    }
+  }; }
+}
+//# sourceMappingURL=cat-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-checkbox.js","sourceRoot":"","sources":["../../../src/components/cat-checkbox/cat-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop } from '@stencil/core';\nimport log from 'loglevel';\n\nlet nextUniqueId = 0;\n\n/**\n * Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n *\n * @part checkbox - The checkbox element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-checkbox',\n  styleUrls: ['cat-checkbox.scss'],\n  shadow: true\n})\nexport class CatCheckbox {\n  private readonly id = `cat-checkbox-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  /**\n   * Checked state of the checkbox\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the checkbox\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Indeterminate state of the checkbox\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Label of the checkbox which is presented in the UI\n   */\n  @Prop() label = '';\n\n  /**\n   * Visually hide the label, but still show it to assistive technologies like screen readers.\n   */\n  @Prop() labelHidden = false;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Required state of the checkbox\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the checkbox\n   */\n  @Prop() value?: string;\n\n  /**\n   * Emitted when the checked status of the checkbox is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the checkbox received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the checkbox loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentDidLoad() {\n    if (this.input && this.indeterminate) {\n      this.input.indeterminate = true;\n    }\n  }\n\n  componentWillRender(): void {\n    if (!this.label) {\n      log.error('[A11y] Missing ARIA label on checkbox', this);\n    }\n  }\n\n  /**\n   * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.\n   *\n   * @param options An optional object providing options to control aspects of\n   * the focusing process.\n   */\n  @Method()\n  async setFocus(options?: FocusOptions): Promise<void> {\n    this.input.focus(options);\n  }\n\n  render() {\n    return (\n      <label htmlFor={this.id} class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled }}>\n        <input\n          ref={el => (this.input = el as HTMLInputElement)}\n          id={this.id}\n          type=\"checkbox\"\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onInput={this.onInput.bind(this)}\n          onFocus={this.onFocus.bind(this)}\n          onBlur={this.onBlur.bind(this)}\n        />\n        <span class=\"box\" aria-hidden=\"true\" part=\"checkbox\">\n          <svg class=\"check\" viewBox=\"0 0 12 10\">\n            <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n          </svg>\n          <svg class=\"dash\" viewBox=\"0 0 12 10\">\n            <polyline points=\"1.5 5 10.5 5\"></polyline>\n          </svg>\n        </span>\n        <span class=\"label\" part=\"label\">\n          {this.label}\n        </span>\n      </label>\n    );\n  }\n\n  private onInput(event: Event) {\n    this.catChange.emit(event);\n  }\n\n  private onFocus(event: FocusEvent) {\n    this.catFocus.emit(event);\n  }\n\n  private onBlur(event: FocusEvent) {\n    this.catBlur.emit(event);\n  }\n}\n"]}

package/dist/collection/components/cat-i18n/cat-i18n-registry.js

@@ -0,0 +1,70 @@
+import log from 'loglevel';
+export class CatI18nRegistry {
+  constructor() {
+    this.lang = 'en';
+    this.messages = new Map();
+    // hide constructor
+  }
+  static getInstance() {
+    if (!CatI18nRegistry.instance) {
+      CatI18nRegistry.instance = new CatI18nRegistry();
+    }
+    return CatI18nRegistry.instance;
+  }
+  getLanguage() {
+    return this.lang;
+  }
+  setLanguage(lang) {
+    this.lang = lang;
+  }
+  getMessage(key) {
+    var _a;
+    const message = (_a = this.messages.get(this.lang)) === null || _a === void 0 ? void 0 : _a.get(key);
+    if (!message) {
+      log.error(`[CatI18nRegistry] Unknown message for lang ${this.lang}: ${key}`);
+    }
+    return message;
+  }
+  addMessage(lang, key, message) {
+    this.getDict(lang).set(key, message);
+    log.info(`[CatI18nRegistry] Added message for lang ${lang}: ${key}`);
+    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, key }));
+    return this;
+  }
+  addMessages(lang, i18n) {
+    const dict = this.getDict(lang);
+    Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));
+    log.info(`[CatI18nRegistry] Added message for lang ${lang}: ${Object.keys(i18n).concat(', ')}`);
+    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys: Object.keys(i18n) }));
+    return this;
+  }
+  removeMessage(lang, key) {
+    this.getDict(lang).delete(key);
+    log.info(`[CatI18nRegistry] Removed message for lang ${lang}: ${key}`);
+    window.dispatchEvent(this.buildEvent('cat-i18n-removed', { lang, key }));
+    return this;
+  }
+  removeMessages(lang, keys) {
+    const dict = this.getDict(lang);
+    keys.forEach(key => dict.delete(key));
+    log.info(`[CatI18nRegistry] Removed messages for lang ${lang}: ${keys.concat(', ')}`);
+    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys }));
+    return this;
+  }
+  buildEvent(name, detail) {
+    return new CustomEvent(name, {
+      bubbles: true,
+      composed: true,
+      detail
+    });
+  }
+  getDict(lang) {
+    let messages = this.messages.get(lang);
+    if (!messages) {
+      messages = new Map();
+      this.messages.set(lang, messages);
+    }
+    return messages;
+  }
+}
+//# sourceMappingURL=cat-i18n-registry.js.map

package/dist/collection/components/cat-i18n/cat-i18n-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cat-i18n-registry.js","sourceRoot":"","sources":["../../../src/components/cat-i18n/cat-i18n-registry.ts"],"names":[],"mappings":"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","sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n  private static instance: CatI18nRegistry;\n\n  private lang = 'en';\n  private readonly messages: Map<string, Map<string, string>> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatI18nRegistry {\n    if (!CatI18nRegistry.instance) {\n      CatI18nRegistry.instance = new CatI18nRegistry();\n    }\n    return CatI18nRegistry.instance;\n  }\n\n  getLanguage(): string {\n    return this.lang;\n  }\n\n  setLanguage(lang: string): void {\n    this.lang = lang;\n  }\n\n  getMessage(key: string): string | undefined {\n    const message = this.messages.get(this.lang)?.get(key);\n    if (!message) {\n      log.error(`[CatI18nRegistry] Unknown message for lang ${this.lang}: ${key}`);\n    }\n    return message;\n  }\n\n  addMessage(lang: string, key: string, message: string): CatI18nRegistry {\n    this.getDict(lang).set(key, message);\n    log.info(`[CatI18nRegistry] Added message for lang ${lang}: ${key}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, key }));\n    return this;\n  }\n\n  addMessages(lang: string, i18n: { [key: string]: string }): CatI18nRegistry {\n    const dict = this.getDict(lang);\n    Object.entries(i18n).forEach(([key, message]) => dict.set(key, message));\n    log.info(`[CatI18nRegistry] Added message for lang ${lang}: ${Object.keys(i18n).concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys: Object.keys(i18n) }));\n    return this;\n  }\n\n  removeMessage(lang: string, key: string): CatI18nRegistry {\n    this.getDict(lang).delete(key);\n    log.info(`[CatI18nRegistry] Removed message for lang ${lang}: ${key}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-removed', { lang, key }));\n    return this;\n  }\n\n  removeMessages(lang: string, keys: string[]): CatI18nRegistry {\n    const dict = this.getDict(lang);\n    keys.forEach(key => dict.delete(key));\n    log.info(`[CatI18nRegistry] Removed messages for lang ${lang}: ${keys.concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-i18n-added', { lang, keys }));\n    return this;\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n\n  private getDict(lang: string) {\n    let messages = this.messages.get(lang);\n    if (!messages) {\n      messages = new Map();\n      this.messages.set(lang, messages);\n    }\n    return messages;\n  }\n}\n"]}

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

@@ -1,3 +1,4 @@
+import log from 'loglevel';
 export class CatIconRegistry {
   constructor() {
     this.icons = new Map();
@@ -10,23 +11,35 @@ export class CatIconRegistry {
     return CatIconRegistry.instance;
   }
   getIcon(name, setName) {
-    return this.icons.get(this.buildName(name, setName));
+    const icon = this.icons.get(this.buildName(name, setName));
+    if (!icon) {
+      log.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);
+    }
+    return icon;
   }
   addIcon(name, data, setName) {
     this.icons.set(this.buildName(name, setName), data);
+    log.info(`[CatIconRegistry] Added icon${setName ? ` to set ${setName}` : ''}: ${name}`);
     window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));
+    return this;
   }
   addIcons(icons, setName) {
     Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));
+    log.info(`[CatIconRegistry] Added icons${setName ? ` to set ${setName}` : ''}: ${Object.keys(icons).concat(', ')}`);
     window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));
+    return this;
   }
   removeIcon(name, setName) {
     this.icons.delete(this.buildName(name, setName));
+    log.info(`[CatIconRegistry] Removed icon${setName ? ` from set ${setName}` : ''}: ${name}`);
     window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));
+    return this;
   }
   removeIcons(names, setName) {
     names.forEach(name => this.icons.delete(this.buildName(name, setName)));
+    log.info(`[CatIconRegistry] Removed icons${setName ? ` from set ${setName}` : ''}: ${names.concat(', ')}`);
     window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));
+    return this;
   }
   buildName(name, setName) {
     return setName ? `${setName}:name` : name;

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

@@ -1 +1 @@
-{"version":3,"file":"cat-icon-registry.js","sourceRoot":"","sources":["../../../src/components/cat-icon/cat-icon-registry.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,eAAe;EAK1B;IAFiB,UAAK,GAAwB,IAAI,GAAG,EAAE,CAAC;IAGtD,mBAAmB;EACrB,CAAC;EAED,MAAM,CAAC,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;EAClC,CAAC;EAED,OAAO,CAAC,IAAY,EAAE,OAAgB;IACpC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;EACvD,CAAC;EAED,OAAO,CAAC,IAAY,EAAE,IAAY,EAAE,OAAgB;IAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;EAC7E,CAAC;EAED,QAAQ,CAAC,KAAiC,EAAE,OAAgB;IAC1D,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IACrG,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;EACnG,CAAC;EAED,UAAU,CAAC,IAAY,EAAE,OAAgB;IACvC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IACjD,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;EAC/E,CAAC;EAED,WAAW,CAAC,KAAe,EAAE,OAAgB;IAC3C,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACxE,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;EACjF,CAAC;EAEO,SAAS,CAAC,IAAY,EAAE,OAAgB;IAC9C,OAAO,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;EAC5C,CAAC;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;EACL,CAAC;CACF","sourcesContent":["export class CatIconRegistry {\n  private static instance: CatIconRegistry;\n\n  private readonly icons: Map<string, string> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatIconRegistry {\n    if (!CatIconRegistry.instance) {\n      CatIconRegistry.instance = new CatIconRegistry();\n    }\n    return CatIconRegistry.instance;\n  }\n\n  getIcon(name: string, setName?: string): string | undefined {\n    return this.icons.get(this.buildName(name, setName));\n  }\n\n  addIcon(name: string, data: string, setName?: string): void {\n    this.icons.set(this.buildName(name, setName), data);\n    window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));\n  }\n\n  addIcons(icons: { [name: string]: string }, setName?: string): void {\n    Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n    window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));\n  }\n\n  removeIcon(name: string, setName?: string): void {\n    this.icons.delete(this.buildName(name, setName));\n    window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));\n  }\n\n  removeIcons(names: string[], setName?: string): void {\n    names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n    window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));\n  }\n\n  private buildName(name: string, setName?: string) {\n    return setName ? `${setName}:name` : name;\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n}\n"]}
+{"version":3,"file":"cat-icon-registry.js","sourceRoot":"","sources":["../../../src/components/cat-icon/cat-icon-registry.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,UAAU,CAAC;AAE3B,MAAM,OAAO,eAAe;EAK1B;IAFiB,UAAK,GAAwB,IAAI,GAAG,EAAE,CAAC;IAGtD,mBAAmB;EACrB,CAAC;EAED,MAAM,CAAC,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;EAClC,CAAC;EAED,OAAO,CAAC,IAAY,EAAE,OAAgB;IACpC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3D,IAAI,CAAC,IAAI,EAAE;MACT,GAAG,CAAC,KAAK,CAAC,iCAAiC,OAAO,CAAC,CAAC,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;KAC5F;IACD,OAAO,IAAI,CAAC;EACd,CAAC;EAED,OAAO,CAAC,IAAY,EAAE,IAAY,EAAE,OAAgB;IAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;IACpD,GAAG,CAAC,IAAI,CAAC,+BAA+B,OAAO,CAAC,CAAC,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;IACxF,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAC3E,OAAO,IAAI,CAAC;EACd,CAAC;EAED,QAAQ,CAAC,KAAiC,EAAE,OAAgB;IAC1D,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IACrG,GAAG,CAAC,IAAI,CAAC,gCAAgC,OAAO,CAAC,CAAC,CAAC,WAAW,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACpH,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IACjG,OAAO,IAAI,CAAC;EACd,CAAC;EAED,UAAU,CAAC,IAAY,EAAE,OAAgB;IACvC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC;IACjD,GAAG,CAAC,IAAI,CAAC,iCAAiC,OAAO,CAAC,CAAC,CAAC,aAAa,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;IAC5F,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAC7E,OAAO,IAAI,CAAC;EACd,CAAC;EAED,WAAW,CAAC,KAAe,EAAE,OAAgB;IAC3C,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACxE,GAAG,CAAC,IAAI,CAAC,kCAAkC,OAAO,CAAC,CAAC,CAAC,aAAa,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC3G,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,mBAAmB,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAC/E,OAAO,IAAI,CAAC;EACd,CAAC;EAEO,SAAS,CAAC,IAAY,EAAE,OAAgB;IAC9C,OAAO,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;EAC5C,CAAC;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;EACL,CAAC;CACF","sourcesContent":["import log from 'loglevel';\n\nexport class CatIconRegistry {\n  private static instance: CatIconRegistry;\n\n  private readonly icons: Map<string, string> = new Map();\n\n  private constructor() {\n    // hide constructor\n  }\n\n  static getInstance(): CatIconRegistry {\n    if (!CatIconRegistry.instance) {\n      CatIconRegistry.instance = new CatIconRegistry();\n    }\n    return CatIconRegistry.instance;\n  }\n\n  getIcon(name: string, setName?: string): string | undefined {\n    const icon = this.icons.get(this.buildName(name, setName));\n    if (!icon) {\n      log.error(`[CatIconRegistry] Unknown icon${setName ? ` in set ${setName}` : ''}: ${name}`);\n    }\n    return icon;\n  }\n\n  addIcon(name: string, data: string, setName?: string): CatIconRegistry {\n    this.icons.set(this.buildName(name, setName), data);\n    log.info(`[CatIconRegistry] Added icon${setName ? ` to set ${setName}` : ''}: ${name}`);\n    window.dispatchEvent(this.buildEvent('cat-icon-added', { name, setName }));\n    return this;\n  }\n\n  addIcons(icons: { [name: string]: string }, setName?: string): CatIconRegistry {\n    Object.entries(icons).forEach(([name, data]) => this.icons.set(this.buildName(name, setName), data));\n    log.info(`[CatIconRegistry] Added icons${setName ? ` to set ${setName}` : ''}: ${Object.keys(icons).concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-icons-added', { names: Object.keys(icons), setName }));\n    return this;\n  }\n\n  removeIcon(name: string, setName?: string): CatIconRegistry {\n    this.icons.delete(this.buildName(name, setName));\n    log.info(`[CatIconRegistry] Removed icon${setName ? ` from set ${setName}` : ''}: ${name}`);\n    window.dispatchEvent(this.buildEvent('cat-icon-removed', { name, setName }));\n    return this;\n  }\n\n  removeIcons(names: string[], setName?: string): CatIconRegistry {\n    names.forEach(name => this.icons.delete(this.buildName(name, setName)));\n    log.info(`[CatIconRegistry] Removed icons${setName ? ` from set ${setName}` : ''}: ${names.concat(', ')}`);\n    window.dispatchEvent(this.buildEvent('cat-icons-removed', { names, setName }));\n    return this;\n  }\n\n  private buildName(name: string, setName?: string) {\n    return setName ? `${setName}:name` : name;\n  }\n\n  private buildEvent<T>(name: string, detail?: T) {\n    return new CustomEvent(name, {\n      bubbles: true,\n      composed: true,\n      detail\n    });\n  }\n}\n"]}

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

@@ -29,22 +29,22 @@ svg {
   height: 1em;
 }
 
-.cat-icon-xs svg {
+.icon-xs svg {
   font-size: 0.75rem;
 }
 
-.cat-icon-s svg {
+.icon-s svg {
   font-size: 1rem;
 }
 
-.cat-icon-m svg {
+.icon-m svg {
   font-size: 1.25rem;
 }
 
-.cat-icon-l svg {
+.icon-l svg {
   font-size: 1.5rem;
 }
 
-.cat-icon-xl svg {
+.icon-xl svg {
   font-size: 1.75rem;
 }

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

@@ -4,7 +4,7 @@ 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.
+ * @part icon - The span element wrapping the SVG icon.
  */
 export class CatIcon {
   constructor() {
@@ -20,7 +20,8 @@ export class CatIcon {
   }
   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'
+        icon: true,
+        [`icon-${this.size}`]: this.size !== 'inline'
       } }));
   }
   static get is() { return "cat-icon"; }

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

@@ -1 +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"]}
+{"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;GAsB9D;EAdC,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,IAAI,EAAE,IAAI;QACV,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;OAC9C,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 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          icon: true,\n          [`icon-${this.size}`]: this.size !== 'inline'\n        }}\n      ></span>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,131 @@
+/**
+ * Auto-generated file. Do not edit directly.
+ */
+/* stylelint-disable value-keyword-case */
+/* stylelint-enable value-keyword-case */
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  line-height: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.input-wrapper {
+  display: flex;
+  align-items: stretch;
+  gap: 0.5rem;
+  padding: 0 0.75rem;
+  height: 2.5rem;
+  overflow: hidden;
+  background: white;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 1px #d7dbe0;
+  transition: box-shadow 0.13s linear;
+}
+.input-wrapper.input-round {
+  border-radius: 10rem;
+}
+.input-wrapper.input-disabled {
+  background: #f8f8fb;
+  cursor: not-allowed;
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
+}
+.input-wrapper:not(.input-disabled):hover {
+  box-shadow: 0 0 0 2px #d7dbe0;
+}
+.input-wrapper:not(.input-disabled):focus-within {
+  outline: 2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));
+}
+
+label {
+  display: block;
+  align-self: flex-start;
+}
+label.hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.input-optional {
+  margin-left: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
+}
+
+.text-prefix,
+.text-suffix {
+  display: inline-flex;
+  align-items: center;
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* stylelint-enable property-no-vendor-prefix */
+}
+
+.text-prefix {
+  border-right: 1px solid #d7dbe0;
+  padding-right: 0.5rem;
+}
+
+.text-suffix {
+  border-left: 1px solid #d7dbe0;
+  padding-left: 0.5rem;
+}
+
+.icon-prefix,
+.icon-suffix {
+  align-self: center;
+}
+
+.input-inner-wrapper {
+  display: flex;
+  position: relative;
+}
+
+input {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: none;
+}
+.input-disabled input {
+  cursor: not-allowed;
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
+}
+input.has-clearable {
+  padding-right: 2rem;
+}
+input::placeholder {
+  color: rgb(var(--cat-font-color-muted, 105, 118, 135));
+}
+
+.clearable {
+  position: absolute;
+  top: calc(50% - 1rem);
+  right: -0.25rem;
+}
+
+.input-hint {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  margin: 0;
+}