@haiilo/catalyst 0.7.2 → 0.8.0

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

@@ -0,0 +1,528 @@
+import { Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';
+import Choices from 'choices.js';
+import { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';
+const getOptionTemplate = (data) => {
+  var _a;
+  if ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl) {
+    return `
+    <div class="d-flex align-items-center">
+      <img src="${data.customProperties.imageUrl}" style="margin-right: 0.5rem" />
+      ${data.label}
+    </div>
+    `;
+  }
+  return `<cat-checkbox label="${data.label}" checked="${data.selected}"></cat-checkbox>`;
+};
+/**
+ * Select lets user choose one option from an options menu. Consider using
+ * select when you have 6 or more options. Select component supports any content
+ * type.
+ */
+export class CatSelect {
+  constructor() {
+    this.i18n = CatI18nRegistry.getInstance();
+    /**
+     * The available options for the input.
+     */
+    this.choices = [];
+    /**
+     * The pre-selected items for the input.
+     */
+    this.items = [];
+    /**
+     * Disable the select.
+     */
+    this.disabled = false;
+    /**
+     * Enable multiple selection.
+     */
+    this.multiple = false;
+    /**
+     * The placeholder for the select.
+     */
+    this.placeholder = '';
+    /**
+     * Whether the dropdown should appear above `(top)` or below `(bottom)` the
+     * input. By default, if there is not enough space within the window the
+     * dropdown will appear above the input, otherwise below it.
+     */
+    this.position = 'auto';
+    /**
+     * Enable search for the select.
+     */
+    this.noSearch = false;
+  }
+  componentDidLoad() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    this.init();
+    this.choiceInner = ((_c = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a).shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.choices__inner')) || undefined;
+    (_d = this.choiceInner) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.showDropdownHandler.bind(this));
+    (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.addEventListener('addItem', this.onChange.bind(this));
+    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('removeItem', this.onChange.bind(this));
+    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('search', this.onSearch.bind(this));
+    if (this.multiple) {
+      (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('choice', this.onChoice.bind(this));
+      this.createRemoveItemButton();
+    }
+  }
+  disconnectedCallback() {
+    var _a, _b, _c, _d, _e, _f, _g;
+    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.choice = undefined;
+    (_b = this.choiceInner) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.showDropdownHandler.bind(this));
+    (_c = this.selectElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('addItem', this.onChange.bind(this));
+    (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('removeItem', this.onChange.bind(this));
+    (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('search', this.onSearch.bind(this));
+    if (this.multiple) {
+      (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('choice', this.onChoice.bind(this));
+      (_g = this.removeElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));
+    }
+  }
+  /**
+   * Set value of input based on an array of objects or strings. This behaves
+   * exactly the same as passing items via the items option but can be called
+   * after initialisation.
+   */
+  async setValue(args) {
+    var _a;
+    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.setValue(args);
+    return this;
+  }
+  /**
+   * Set choices of select input via an array of objects (or function that
+   * returns array of object or promise of it), a value field name and a label
+   * field name.
+   */
+  async setChoices(choices, value, label, replaceChoices) {
+    var _a;
+    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, value, label, replaceChoices);
+    return this;
+  }
+  /**
+   * Clear all choices from select.
+   */
+  async clearChoices() {
+    var _a;
+    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.clearChoices();
+    return this;
+  }
+  /**
+   * Clear input of any user inputted text.
+   */
+  async clearInput() {
+    var _a;
+    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.clearInput();
+    return this;
+  }
+  render() {
+    return (h(Host, null,
+      h("select", { ref: el => (this.selectElement = el), multiple: this.multiple, disabled: this.disabled })));
+  }
+  init() {
+    const config = {
+      items: this.items,
+      removeItemButton: true,
+      duplicateItemsAllowed: false,
+      delimiter: '',
+      paste: false,
+      searchEnabled: !this.noSearch,
+      searchChoices: false,
+      position: this.position,
+      resetScrollPosition: false,
+      placeholder: !!this.placeholder,
+      placeholderValue: this.placeholder || '',
+      searchPlaceholderValue: this.i18n.t('select.searchPlaceholder'),
+      renderSelectedChoices: 'always',
+      loadingText: this.i18n.t('select.loading'),
+      noResultsText: this.i18n.t('select.noResults'),
+      noChoicesText: this.i18n.t('select.noChoices'),
+      itemSelectText: this.i18n.t('select.selectItem'),
+      addItemText: (value) => this.i18n.t('select.addItem', { value }),
+      maxItemText: (maxItemCount) => this.i18n.t('select.maxItem', { maxItemCount }),
+      uniqueItemText: this.i18n.t('select.uniqueItem'),
+      customAddItemText: this.i18n.t('select.customAddItem')
+    };
+    const configSingle = {
+      callbackOnCreateTemplates: (strToEl) => {
+        return {
+          item: ({ classNames }, data) => {
+            var _a;
+            const template = ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl)
+              ? `<img src="${data.customProperties.imageUrl}" style="margin-right: 0.5rem" />`
+              : '';
+            return strToEl(`
+              <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable} ${data.placeholder ? classNames.placeholder : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
+                  <span>${template}</span> ${data.label}
+              </div>
+              `);
+          }
+        };
+      }
+    };
+    const configMultiple = {
+      callbackOnCreateTemplates: (strToEl) => {
+        const itemSelectText = config.itemSelectText;
+        return {
+          item: ({ classNames }, data) => {
+            var _a;
+            const template = ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl)
+              ? `<img src="${data.customProperties.imageUrl}" style="margin-right: 0.5rem;" />`
+              : '';
+            return strToEl(`<div class="
+                ${classNames.item}
+                ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}
+                ${data.placeholder ? classNames.placeholder : ''}"
+                data-item data-id="${data.id}" data-value="${data.value}"
+                ${data.active ? 'aria-selected="true"' : ''}
+                ${data.disabled ? 'aria-disabled="true"' : ''}>
+                  ${template}
+                  ${data.label}
+              </div>`);
+          },
+          choice: function ({ classNames }, data) {
+            const template = getOptionTemplate(data);
+            const className = `${String(classNames.item)} ${String(classNames.itemChoice)}
+                  ${String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}
+                  ${data.selected ? 'choices__item--selected' : ''}`;
+            return strToEl(`<div class="${className}"
+                data-select-text="${itemSelectText}"
+                data-choice data-id="${String(data.id)}" data-value="${String(data.value)}"
+                ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}
+                ${data.groupId && data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
+                  ${template}
+              </div>`);
+          }
+        };
+      }
+    };
+    const settings = this.multiple
+      ? Object.assign(Object.assign({}, config), configMultiple) : Object.assign(Object.assign({}, config), configSingle);
+    this.choice = new Choices(this.selectElement, settings);
+    this.choice.setChoices(this.choices);
+  }
+  onChange() {
+    var _a;
+    this.catChange.emit((_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue());
+    if (this.multiple) {
+      this.updateRemoveItemButtonVisibility();
+    }
+  }
+  onSearch(event) {
+    const customEvent = event;
+    this.catSearch.emit(customEvent.detail.value);
+  }
+  onChoice(event) {
+    var _a, _b;
+    const customEvent = event;
+    const items = Array.from((_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue());
+    const item = items.find(value => value.choiceId === customEvent.detail.choice.id);
+    if (item) {
+      (_b = this.choice) === null || _b === void 0 ? void 0 : _b._removeItem(item);
+    }
+  }
+  showDropdownHandler() {
+    var _a;
+    if (!this.disabled) {
+      (_a = this.choice) === null || _a === void 0 ? void 0 : _a.showDropdown();
+    }
+  }
+  createRemoveItemButton() {
+    var _a;
+    this.removeElement = document.createElement('cat-button');
+    this.removeElement.icon = 'cross-circle-outlined';
+    this.removeElement.iconOnly = true;
+    this.removeElement.a11yLabel = this.i18n.t('select.removeItem');
+    this.updateRemoveItemButtonVisibility();
+    this.removeElement.addEventListener('click', this.onRemoveItemButtonClick.bind(this));
+    (_a = this.choiceInner) === null || _a === void 0 ? void 0 : _a.appendChild(this.removeElement);
+  }
+  updateRemoveItemButtonVisibility() {
+    var _a, _b, _c;
+    const items = Array.from((_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue());
+    if (items.length) {
+      (_b = this.removeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
+    }
+    else if (!items.length) {
+      (_c = this.removeElement) === null || _c === void 0 ? void 0 : _c.setAttribute('hidden', 'true');
+    }
+  }
+  onRemoveItemButtonClick(event) {
+    var _a;
+    event.stopPropagation();
+    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
+  }
+  static get is() { return "cat-select"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["cat-select.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["cat-select.css"]
+  }; }
+  static get properties() { return {
+    "choices": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Choice[]",
+        "resolved": "Choice[]",
+        "references": {
+          "Choice": {
+            "location": "import",
+            "path": "choices.js"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The available options for the input."
+      },
+      "defaultValue": "[]"
+    },
+    "items": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Choice[] | string[]",
+        "resolved": "Choice[] | string[]",
+        "references": {
+          "Choice": {
+            "location": "import",
+            "path": "choices.js"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The pre-selected items for the input."
+      },
+      "defaultValue": "[]"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable the select."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable multiple selection."
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placeholder for the select."
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'auto' | 'top' | 'bottom'",
+        "resolved": "\"auto\" | \"bottom\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the dropdown should appear above `(top)` or below `(bottom)` the\ninput. By default, if there is not enough space within the window the\ndropdown will appear above the input, otherwise below it."
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "'auto'"
+    },
+    "noSearch": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enable search for the select."
+      },
+      "attribute": "no-search",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "catChange",
+      "name": "catChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the value is changed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "catSearch",
+      "name": "catSearch",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the search is triggered."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "setValue": {
+      "complexType": {
+        "signature": "(args: Array<string> | Array<Item>) => Promise<this>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          },
+          "Item": {
+            "location": "import",
+            "path": "choices.js"
+          }
+        },
+        "return": "Promise<this>"
+      },
+      "docs": {
+        "text": "Set value of input based on an array of objects or strings. This behaves\nexactly the same as passing items via the items option but can be called\nafter initialisation.",
+        "tags": []
+      }
+    },
+    "setChoices": {
+      "complexType": {
+        "signature": "(choices: Array<Choice> | Array<Group>, value: string, label: string, replaceChoices?: boolean | undefined) => Promise<this>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Array": {
+            "location": "global"
+          },
+          "Choice": {
+            "location": "import",
+            "path": "choices.js"
+          },
+          "Group": {
+            "location": "import",
+            "path": "choices.js"
+          }
+        },
+        "return": "Promise<this>"
+      },
+      "docs": {
+        "text": "Set choices of select input via an array of objects (or function that\nreturns array of object or promise of it), a value field name and a label\nfield name.",
+        "tags": []
+      }
+    },
+    "clearChoices": {
+      "complexType": {
+        "signature": "() => Promise<this>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<this>"
+      },
+      "docs": {
+        "text": "Clear all choices from select.",
+        "tags": []
+      }
+    },
+    "clearInput": {
+      "complexType": {
+        "signature": "() => Promise<this>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<this>"
+      },
+      "docs": {
+        "text": "Clear input of any user inputted text.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=cat-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cat-select.js","sourceRoot":"","sources":["../../../src/components/cat-select/cat-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport Choices, { Choice, ClassNames, Group, Item, Options } from 'choices.js';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\n\nconst getOptionTemplate = (data: Item): string => {\n  if (data.customProperties?.imageUrl) {\n    return `\n    <div class=\"d-flex align-items-center\">\n      <img src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />\n      ${data.label}\n    </div>\n    `;\n  }\n  return `<cat-checkbox label=\"${data.label}\" checked=\"${data.selected}\"></cat-checkbox>`;\n};\n\n/**\n * Select lets user choose one option from an options menu. Consider using\n * select when you have 6 or more options. Select component supports any content\n * type.\n */\n@Component({\n  tag: 'cat-select',\n  styleUrl: 'cat-select.scss',\n  shadow: true\n})\nexport class CatSelect {\n  private readonly i18n = CatI18nRegistry.getInstance();\n\n  private choice?: Choices;\n  private choiceInner?: Element;\n  private selectElement?: HTMLSelectElement;\n  private removeElement?: HTMLCatButtonElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  /**\n   * The available options for the input.\n   */\n  @Prop() choices: Choice[] = [];\n\n  /**\n   * The pre-selected items for the input.\n   */\n  @Prop() items: Choice[] | string[] = [];\n\n  /**\n   * Disable the select.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Enable multiple selection.\n   */\n  @Prop() multiple = false;\n\n  /**\n   * The placeholder for the select.\n   */\n  @Prop() placeholder = '';\n\n  /**\n   * Whether the dropdown should appear above `(top)` or below `(bottom)` the\n   * input. By default, if there is not enough space within the window the\n   * dropdown will appear above the input, otherwise below it.\n   */\n  @Prop() position: 'auto' | 'top' | 'bottom' = 'auto';\n\n  /**\n   * Enable search for the select.\n   */\n  @Prop() noSearch = false;\n\n  /**\n   * Emitted when the value is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the search is triggered.\n   */\n  @Event() catSearch!: EventEmitter;\n\n  componentDidLoad(): void {\n    this.init();\n    this.choiceInner = this.hostElement.attachInternals?.().shadowRoot?.querySelector('.choices__inner') || undefined;\n    this.choiceInner?.addEventListener('click', this.showDropdownHandler.bind(this));\n    this.selectElement?.addEventListener('addItem', this.onChange.bind(this));\n    this.selectElement?.addEventListener('removeItem', this.onChange.bind(this));\n    this.selectElement?.addEventListener('search', this.onSearch.bind(this));\n    if (this.multiple) {\n      this.selectElement?.addEventListener('choice', this.onChoice.bind(this));\n      this.createRemoveItemButton();\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.choice?.destroy();\n    this.choice = undefined;\n    this.choiceInner?.removeEventListener('click', this.showDropdownHandler.bind(this));\n    this.selectElement?.removeEventListener('addItem', this.onChange.bind(this));\n    this.selectElement?.removeEventListener('removeItem', this.onChange.bind(this));\n    this.selectElement?.removeEventListener('search', this.onSearch.bind(this));\n    if (this.multiple) {\n      this.selectElement?.removeEventListener('choice', this.onChoice.bind(this));\n      this.removeElement?.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));\n    }\n  }\n\n  /**\n   * Set value of input based on an array of objects or strings. This behaves\n   * exactly the same as passing items via the items option but can be called\n   * after initialisation.\n   */\n  @Method()\n  async setValue(args: Array<string> | Array<Item>) {\n    this.choice?.setValue(args);\n\n    return this;\n  }\n\n  /**\n   * Set choices of select input via an array of objects (or function that\n   * returns array of object or promise of it), a value field name and a label\n   * field name.\n   */\n  @Method()\n  async setChoices(choices: Array<Choice> | Array<Group>, value: string, label: string, replaceChoices?: boolean) {\n    this.choice?.setChoices(choices, value, label, replaceChoices);\n\n    return this;\n  }\n\n  /**\n   * Clear all choices from select.\n   */\n  @Method()\n  async clearChoices() {\n    this.choice?.clearChoices();\n\n    return this;\n  }\n\n  /**\n   * Clear input of any user inputted text.\n   */\n  @Method()\n  async clearInput() {\n    this.choice?.clearInput();\n\n    return this;\n  }\n\n  render() {\n    return (\n      <Host>\n        <select ref={el => (this.selectElement = el)} multiple={this.multiple} disabled={this.disabled}></select>\n      </Host>\n    );\n  }\n\n  private init() {\n    const config = {\n      items: this.items,\n      removeItemButton: true,\n      duplicateItemsAllowed: false,\n      delimiter: '',\n      paste: false,\n      searchEnabled: !this.noSearch,\n      searchChoices: false,\n      position: this.position,\n      resetScrollPosition: false,\n      placeholder: !!this.placeholder,\n      placeholderValue: this.placeholder || '',\n      searchPlaceholderValue: this.i18n.t('select.searchPlaceholder'),\n      renderSelectedChoices: 'always' as 'auto' | 'always',\n      loadingText: this.i18n.t('select.loading'),\n      noResultsText: this.i18n.t('select.noResults'),\n      noChoicesText: this.i18n.t('select.noChoices'),\n      itemSelectText: this.i18n.t('select.selectItem'),\n      addItemText: (value: string) => this.i18n.t('select.addItem', { value }),\n      maxItemText: (maxItemCount: number) => this.i18n.t('select.maxItem', { maxItemCount }),\n      uniqueItemText: this.i18n.t('select.uniqueItem'),\n      customAddItemText: this.i18n.t('select.customAddItem')\n    };\n\n    const configSingle = {\n      callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n        return {\n          item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n            const template = data.customProperties?.imageUrl\n              ? `<img src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem\" />`\n              : '';\n            return strToEl(\n              `\n              <div class=\"${classNames.item} ${\n                data.highlighted ? classNames.highlightedState : classNames.itemSelectable\n              } ${data.placeholder ? classNames.placeholder : ''}\" data-item data-id=\"${data.id}\" data-value=\"${\n                data.value\n              }\" ${data.active ? 'aria-selected=\"true\"' : ''} ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n                  <span>${template}</span> ${data.label}\n              </div>\n              `\n            );\n          }\n        };\n      }\n    };\n\n    const configMultiple = {\n      callbackOnCreateTemplates: (strToEl: (str: string) => HTMLElement) => {\n        const itemSelectText = config.itemSelectText;\n        return {\n          item: ({ classNames }: { classNames: ClassNames }, data: Item) => {\n            const template = data.customProperties?.imageUrl\n              ? `<img src=\"${data.customProperties.imageUrl}\" style=\"margin-right: 0.5rem;\" />`\n              : '';\n            return strToEl(\n              `<div class=\"\n                ${classNames.item}\n                ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}\n                ${data.placeholder ? classNames.placeholder : ''}\"\n                data-item data-id=\"${data.id}\" data-value=\"${data.value}\"\n                ${data.active ? 'aria-selected=\"true\"' : ''}\n                ${data.disabled ? 'aria-disabled=\"true\"' : ''}>\n                  ${template}\n                  ${data.label}\n              </div>`\n            );\n          },\n          choice: function ({ classNames }: { classNames: ClassNames }, data: Item) {\n            const template = getOptionTemplate(data);\n            const className = `${String(classNames.item)} ${String(classNames.itemChoice)}\n                  ${String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}\n                  ${data.selected ? 'choices__item--selected' : ''}`;\n            return strToEl(\n              `<div class=\"${className}\"\n                data-select-text=\"${itemSelectText}\"\n                data-choice data-id=\"${String(data.id)}\" data-value=\"${String(data.value)}\"\n                ${data.disabled ? 'data-choice-disabled aria-disabled=\"true\"' : 'data-choice-selectable'}\n                ${data.groupId && data.groupId > 0 ? 'role=\"treeitem\"' : 'role=\"option\"'}>\n                  ${template}\n              </div>`\n            );\n          }\n        };\n      }\n    };\n\n    const settings: Partial<Options> = this.multiple\n      ? { ...config, ...configMultiple }\n      : { ...config, ...configSingle };\n    this.choice = new Choices(this.selectElement, settings);\n    this.choice.setChoices(this.choices);\n  }\n\n  private onChange() {\n    this.catChange.emit(this.choice?.getValue());\n    if (this.multiple) {\n      this.updateRemoveItemButtonVisibility();\n    }\n  }\n\n  private onSearch(event: Event) {\n    const customEvent = event as CustomEvent<{ value: string }>;\n    this.catSearch.emit(customEvent.detail.value);\n  }\n\n  private onChoice(event: Event) {\n    const customEvent = event as CustomEvent<{ choice: Choice }>;\n    const items = Array.from(this.choice?.getValue() as Item[]);\n    const item = items.find(value => value.choiceId === customEvent.detail.choice.id);\n    if (item) {\n      this.choice?._removeItem(item);\n    }\n  }\n\n  private showDropdownHandler() {\n    if (!this.disabled) {\n      this.choice?.showDropdown();\n    }\n  }\n\n  private createRemoveItemButton() {\n    this.removeElement = document.createElement('cat-button') as HTMLCatButtonElement;\n    this.removeElement.icon = 'cross-circle-outlined';\n    this.removeElement.iconOnly = true;\n    this.removeElement.a11yLabel = this.i18n.t('select.removeItem');\n    this.updateRemoveItemButtonVisibility();\n    this.removeElement.addEventListener('click', this.onRemoveItemButtonClick.bind(this));\n    this.choiceInner?.appendChild(this.removeElement);\n  }\n\n  private updateRemoveItemButtonVisibility() {\n    const items = Array.from(this.choice?.getValue() as Item[]);\n    if (items.length) {\n      this.removeElement?.removeAttribute('hidden');\n    } else if (!items.length) {\n      this.removeElement?.setAttribute('hidden', 'true');\n    }\n  }\n\n  private onRemoveItemButtonClick(event: Event) {\n    event.stopPropagation();\n    this.choice?.removeActiveItems(-1);\n  }\n}\n"]}

package/dist/collection/init.js

@@ -5,7 +5,7 @@ function registerIcons() {
   CatIconRegistry.getInstance().addIcons(ci);
 }
 function registerTranslations() {
-  CatI18nRegistry.getInstance().addMessages('en', {
+  CatI18nRegistry.getInstance().register('en', {
     'input.clear': 'Clear',
     'input.optional': 'Optional'
   });

package/dist/collection/init.js.map

@@ -1 +1 @@
-{"version":3,"file":"init.js","sourceRoot":"","sources":["../src/init.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAE1E,SAAS,aAAa;EACpB,eAAe,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC7C,CAAC;AAED,SAAS,oBAAoB;EAC3B,eAAe,CAAC,WAAW,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE;IAC9C,aAAa,EAAE,OAAO;IACtB,gBAAgB,EAAE,UAAU;GAC7B,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,OAAO;EACZ,aAAa,EAAE,CAAC;EAChB,oBAAoB,EAAE,CAAC;AACzB,CAAC","sourcesContent":["import { ci } from '@haiilo/catalyst-icons';\nimport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nimport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\n\nfunction registerIcons() {\n  CatIconRegistry.getInstance().addIcons(ci);\n}\n\nfunction registerTranslations() {\n  CatI18nRegistry.getInstance().addMessages('en', {\n    'input.clear': 'Clear',\n    'input.optional': 'Optional'\n  });\n}\n\nexport default function () {\n  registerIcons();\n  registerTranslations();\n}\n"]}
+{"version":3,"file":"init.js","sourceRoot":"","sources":["../src/init.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAE1E,SAAS,aAAa;EACpB,eAAe,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC7C,CAAC;AAED,SAAS,oBAAoB;EAC3B,eAAe,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE;IAC3C,aAAa,EAAE,OAAO;IACtB,gBAAgB,EAAE,UAAU;GAC7B,CAAC,CAAC;AACL,CAAC;AAED,MAAM,CAAC,OAAO;EACZ,aAAa,EAAE,CAAC;EAChB,oBAAoB,EAAE,CAAC;AACzB,CAAC","sourcesContent":["import { ci } from '@haiilo/catalyst-icons';\nimport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nimport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\n\nfunction registerIcons() {\n  CatIconRegistry.getInstance().addIcons(ci);\n}\n\nfunction registerTranslations() {\n  CatI18nRegistry.getInstance().register('en', {\n    'input.clear': 'Clear',\n    'input.optional': 'Optional'\n  });\n}\n\nexport default function () {\n  registerIcons();\n  registerTranslations();\n}\n"]}

package/dist/collection/scss/_mixins.scss

@@ -1,4 +1,4 @@
-@forward 'fonts/fonts.mixins';
+@forward 'fonts/fonts-mixins';
 @forward 'utils/disabled.mixins';
 @forward 'utils/elevation.mixins';
 @forward 'utils/media.mixins';

package/dist/collection/scss/_variables.scss

@@ -1,6 +1,8 @@
 @use 'variables.tokens' as *;
 @forward 'variables.tokens';
 
+// DEPRECATED - DO NOT ADD CODE HERE
+
 // --------
 // -- Composits
 // --------

package/dist/collection/scss/{utils → core}/_toast.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixins';
+@use '../variables' as *;
+@use '../mixins' as *;
 
 $-background-color: cat-token('color.base.neutral.0');
 $-text-color: cat-token('color.base.neutral.900');

package/dist/collection/scss/fonts/_fonts-mixins.scss

@@ -0,0 +1,17 @@
+@use 'fonts.mixins.azeret' as *;
+@use 'fonts.mixins.dm' as *;
+@use 'fonts.mixins.lato' as *;
+
+@mixin cat-fonts($path) {
+  @include cat-font-dm-sans($path, 500) {
+    font-display: swap;
+  }
+
+  @include cat-font-lato($path, 300, 400, 500, 700) {
+    font-display: fallback;
+  }
+
+  @include cat-font-azeret($path, 400) {
+    font-display: fallback;
+  }
+}

package/dist/collection/scss/fonts/_fonts.mixins.azeret.scss

@@ -5,7 +5,7 @@
   @if list.index($weights, 400) {
     @font-face {
       font-family: 'Azeret Mono';
-      src: url('#{$path}#{cat-token("asset.font.azeretMono.woff2Regular")}') format('woff2');
+      src: url('#{$path}/#{cat-token("asset.font.azeretMono.woff2Regular")}') format('woff2');
       font-style: normal;
       font-weight: 400;
       @content;