@haiilo/catalyst 0.9.0 → 0.10.2

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

@@ -74,9 +74,10 @@ export class CatSelect {
       return;
     this.setChoices(choices, 'value', 'label', true);
   }
-  setValueHandles(value) {
-    var _a;
-    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.setValue(value || []);
+  setValueHandler(value) {
+    if (this.multiple)
+      return;
+    this.setValue(value || []);
   }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -85,29 +86,36 @@ export class CatSelect {
     }
   }
   componentDidLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     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));
+    const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
+    if (attachedInternals) {
+      this.choiceInner = ((_c = attachedInternals.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.choices__inner')) || undefined;
+      this.choiceDropdown =
+        ((_e = (_d = attachedInternals.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.choices__list--dropdown')) === null || _e === void 0 ? void 0 : _e.firstElementChild) || undefined;
+    }
+    (_f = this.choiceInner) === null || _f === void 0 ? void 0 : _f.addEventListener('click', this.showDropdownHandler.bind(this));
+    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('addItem', this.onChange.bind(this));
+    (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.onChange.bind(this));
+    (_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('search', this.onSearch.bind(this));
+    (_k = this.choiceDropdown) === null || _k === void 0 ? void 0 : _k.addEventListener('scroll', this.onScrolledBottom.bind(this));
     if (this.multiple) {
-      (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('choice', this.onChoice.bind(this));
+      (_l = this.selectElement) === null || _l === void 0 ? void 0 : _l.addEventListener('choice', this.onChoice.bind(this));
       this.createRemoveItemButton();
     }
   }
   disconnectedCallback() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     (_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));
+    (_f = this.choiceDropdown) === null || _f === void 0 ? void 0 : _f.removeEventListener('scroll', this.onScrolledBottom.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));
+      (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('choice', this.onChoice.bind(this));
+      (_h = this.removeElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));
     }
   }
   /**
@@ -160,6 +168,7 @@ export class CatSelect {
   }
   init() {
     const value = this.value || [];
+    const removeItemText = (value) => this.i18n.t('select.removeItem', { value });
     const config = {
       allowHTML: true,
       items: Array.isArray(value) ? value : [value],
@@ -195,6 +204,10 @@ export class CatSelect {
             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}
+                  <button type="button"
+                    class="${classNames.button}"
+                    aria-label="${removeItemText(data.label)}"
+                    data-button>${removeItemText(data.label)}</button>
               </div>
               `);
           }
@@ -219,6 +232,10 @@ export class CatSelect {
                 ${data.disabled ? 'aria-disabled="true"' : ''}>
                   ${template}
                   ${data.label}
+                  <button type="button"
+                    class="${classNames.button}"
+                    aria-label="${removeItemText(data.label)}"
+                    data-button>${removeItemText(data.label)}</button>
               </div>`);
           },
           choice: function ({ classNames }, data) {
@@ -258,6 +275,14 @@ export class CatSelect {
     const customEvent = event;
     this.catSearch.emit(customEvent.detail.value);
   }
+  onScrolledBottom() {
+    var _a, _b, _c;
+    const scrolledBottom = ((_a = this.choiceDropdown) === null || _a === void 0 ? void 0 : _a.scrollHeight) ===
+      (((_b = this.choiceDropdown) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0) + (((_c = this.choiceDropdown) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0);
+    if (scrolledBottom) {
+      this.catScrolledBottom.emit();
+    }
+  }
   onChoice(event) {
     var _a, _b;
     const customEvent = event;
@@ -545,6 +570,21 @@ export class CatSelect {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "catScrolledBottom",
+      "name": "catScrolledBottom",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when scrolled to the bottom."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "setValue": {
@@ -651,7 +691,7 @@ export class CatSelect {
       "methodName": "setChoicesHandler"
     }, {
       "propName": "value",
-      "methodName": "setValueHandles"
+      "methodName": "setValueHandler"
     }]; }
 }
 //# sourceMappingURL=cat-select.js.map

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

@@ -1 +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, Watch, State } from '@stencil/core';\nimport Choices, { Choice, ClassNames, Group, Item, Options } from 'choices.js';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\nconst getOptionTemplate = (data: Item): string => {\n  if (data.customProperties?.imageUrl) {\n    return `\n    <div class=\"d-flex align-items-center\">\n      <img class=\"choices-option-icon\" 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 * @slot hint - Optional hint element to be displayed with the select.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\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  private readonly id = `cat-select-${nextUniqueId++}`;\n\n  private choice?: Choices;\n  private choiceInner?: Element;\n  private selectElement?: HTMLSelectElement;\n  private removeElement?: HTMLCatButtonElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * The label for the select.\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   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\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({ mutable: true }) value?: string | string[] | Choice | Choice[];\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   * Optional hint text(s) to be displayed with the select.\n   */\n  @Prop() hint?: string | string[];\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  @Watch('choices')\n  setChoicesHandler(choices: Choice[]) {\n    if (!choices?.length) return;\n\n    this.setChoices(choices, 'value', 'label', true);\n  }\n\n  @Watch('value')\n  setValueHandles(value?: string[] | Choice[]) {\n    this.choice?.setValue(value || []);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on select', this);\n    }\n  }\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        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.t('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <select\n          id={this.id}\n          ref={el => (this.selectElement = el)}\n          multiple={this.multiple}\n          disabled={this.disabled}\n        ></select>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private init() {\n    const value = this.value || [];\n    const config = {\n      allowHTML: true,\n      items: Array.isArray(value) ? value : ([value] as string[] | Choice[]),\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 class=\"choices-option-icon\" 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 class=\"choices-option-icon\" 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 get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onChange() {\n    this.value = this.choice?.getValue();\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"]}
+{"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, Watch, State } from '@stencil/core';\nimport Choices, { Choice, ClassNames, Group, Item, Options } from 'choices.js';\nimport { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\nconst getOptionTemplate = (data: Item): string => {\n  if (data.customProperties?.imageUrl) {\n    return `\n    <div class=\"d-flex align-items-center\">\n      <img class=\"choices-option-icon\" 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 * @slot hint - Optional hint element to be displayed with the select.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\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  private readonly id = `cat-select-${nextUniqueId++}`;\n\n  private choice?: Choices;\n  private choiceInner?: Element;\n  private choiceDropdown?: Element;\n  private selectElement?: HTMLSelectElement;\n  private removeElement?: HTMLCatButtonElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * The label for the select.\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   * A value is required or must be check for the form to be submittable.\n   */\n  @Prop() required = false;\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({ mutable: true }) value?: string | string[] | Choice | Choice[];\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   * Optional hint text(s) to be displayed with the select.\n   */\n  @Prop() hint?: string | string[];\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  /**\n   * Emitted when scrolled to the bottom.\n   */\n  @Event() catScrolledBottom!: EventEmitter;\n\n  @Watch('choices')\n  setChoicesHandler(choices: Choice[]) {\n    if (!choices?.length) return;\n\n    this.setChoices(choices, 'value', 'label', true);\n  }\n\n  @Watch('value')\n  setValueHandler(value?: string[] | Choice[]) {\n    if (this.multiple) return;\n\n    this.setValue(value || []);\n  }\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on select', this);\n    }\n  }\n\n  componentDidLoad(): void {\n    this.init();\n    const attachedInternals: ElementInternals | undefined = this.hostElement.attachInternals?.();\n    if (attachedInternals) {\n      this.choiceInner = attachedInternals.shadowRoot?.querySelector('.choices__inner') || undefined;\n      this.choiceDropdown =\n        attachedInternals.shadowRoot?.querySelector('.choices__list--dropdown')?.firstElementChild || undefined;\n    }\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    this.choiceDropdown?.addEventListener('scroll', this.onScrolledBottom.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    this.choiceDropdown?.removeEventListener('scroll', this.onScrolledBottom.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        {(this.hasSlottedLabel || this.label) && (\n          <label htmlFor={this.id} class={{ hidden: this.labelHidden }}>\n            <span part=\"label\">\n              {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n              {!this.required && (\n                <span class=\"input-optional\" aria-hidden=\"true\">\n                  ({this.i18n.t('input.optional')})\n                </span>\n              )}\n            </span>\n          </label>\n        )}\n        <select\n          id={this.id}\n          ref={el => (this.selectElement = el)}\n          multiple={this.multiple}\n          disabled={this.disabled}\n        ></select>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private init() {\n    const value = this.value || [];\n    const removeItemText = (value: string) => this.i18n.t('select.removeItem', { value });\n    const config = {\n      allowHTML: true,\n      items: Array.isArray(value) ? value : ([value] as string[] | Choice[]),\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 class=\"choices-option-icon\" 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                  <button type=\"button\"\n                    class=\"${classNames.button}\"\n                    aria-label=\"${removeItemText(data.label)}\"\n                    data-button>${removeItemText(data.label)}</button>\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 class=\"choices-option-icon\" 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                  <button type=\"button\"\n                    class=\"${classNames.button}\"\n                    aria-label=\"${removeItemText(data.label)}\"\n                    data-button>${removeItemText(data.label)}</button>\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 get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onChange() {\n    this.value = this.choice?.getValue();\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 onScrolledBottom() {\n    const scrolledBottom: boolean =\n      this.choiceDropdown?.scrollHeight ===\n      (this.choiceDropdown?.scrollTop || 0) + (this.choiceDropdown?.clientHeight || 0);\n\n    if (scrolledBottom) {\n      this.catScrolledBottom.emit();\n    }\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/components/cat-toggle/cat-toggle.css

@@ -40,6 +40,10 @@ label {
   cursor: pointer;
 }
 
+.label-left {
+  flex-direction: row-reverse;
+}
+
 input {
   position: absolute !important;
   width: 1px !important;

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

@@ -32,9 +32,13 @@ export class CatToggle {
      */
     this.labelHidden = false;
     /**
-     * Required state of the toggle
+     * Required state of the toggle.
      */
     this.required = false;
+    /**
+     * Whether the label should appear to the left of the toggle.
+     */
+    this.labelLeft = false;
   }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -53,7 +57,7 @@ export class CatToggle {
   }
   render() {
     return (h(Host, null,
-      h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } },
+      h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } },
         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, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }),
         h("span", { class: "toggle", part: "toggle" }),
         h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)),
@@ -183,7 +187,7 @@ export class CatToggle {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Required state of the toggle"
+        "text": "Required state of the toggle."
       },
       "attribute": "required",
       "reflect": false,
@@ -222,6 +226,24 @@ export class CatToggle {
       },
       "attribute": "hint",
       "reflect": false
+    },
+    "labelLeft": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the label should appear to the left of the toggle."
+      },
+      "attribute": "label-left",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -1 +1 @@
-{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly id = `cat-toggle-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the toggle that is visible.\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 toggle\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Sets focus on the toggle. Use this method instead of `toggle.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      <Host>\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            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\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"]}
+{"version":3,"file":"cat-toggle.js","sourceRoot":"","sources":["../../../src/components/cat-toggle/cat-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/**\n * Toggles are graphical interface switches that give user control over a\n * feature or option that can be turned on or off.\n *\n * @slot hint - Optional hint element to be displayed with the toggle.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part toggle - The toggle element.\n * @part label - The label content.\n */\n@Component({\n  tag: 'cat-toggle',\n  styleUrls: ['cat-toggle.scss'],\n  shadow: true\n})\nexport class CatToggle {\n  private readonly id = `cat-toggle-${nextUniqueId++}`;\n  private input!: HTMLInputElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  @State() hasSlottedLabel = false;\n\n  /**\n   * Checked state of the toggle.\n   */\n  @Prop() checked = false;\n\n  /**\n   * Disabled state of the toggle.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The label of the toggle that is visible.\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 toggle.\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the toggle\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Optional hint text(s) to be displayed with the toggle.\n   */\n  @Prop() hint?: string | string[];\n\n  /**\n   * Whether the label should appear to the left of the toggle.\n   */\n  @Prop() labelLeft = false;\n\n  /**\n   * Emitted when the checked status of the toggle is changed.\n   */\n  @Event() catChange!: EventEmitter;\n\n  /**\n   * Emitted when the toggle received focus.\n   */\n  @Event() catFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() catBlur!: EventEmitter<FocusEvent>;\n\n  componentWillRender(): void {\n    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n    if (!this.label && !this.hasSlottedLabel) {\n      log.error('[A11y] Missing ARIA label on toggle', this);\n    }\n  }\n\n  /**\n   * Sets focus on the toggle. Use this method instead of `toggle.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      <Host>\n        <label\n          htmlFor={this.id}\n          class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n        >\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            class=\"form-check-input\"\n            role=\"switch\"\n            onInput={this.onInput.bind(this)}\n            onFocus={this.onFocus.bind(this)}\n            onBlur={this.onBlur.bind(this)}\n          />\n          <span class=\"toggle\" part=\"toggle\"></span>\n          <span class=\"label\" part=\"label\">\n            {(this.hasSlottedLabel && <slot name=\"label\"></slot>) || this.label}\n          </span>\n        </label>\n        {this.hintSection}\n      </Host>\n    );\n  }\n\n  private get hintSection() {\n    const hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n    return (\n      (this.hint || hasSlottedHint) && (\n        <CatFormHint hint={this.hint} slottedHint={hasSlottedHint && <slot name=\"hint\"></slot>} />\n      )\n    );\n  }\n\n  private onInput(event: Event) {\n    this.value = this.input.value;\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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\nexport { NotificationsService } from './components/cat-notification/cat-notification';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,gDAAgD,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';\nexport { CatIconRegistry } from './components/cat-icon/cat-icon-registry';\nexport { NotificationsService } from './components/cat-notification/cat-notification';\nexport { Choice } from 'choices.js';\n"]}

package/dist/collection/scss/_variables.scss

@@ -9,7 +9,7 @@
 
 $cat-head-margin-bottom: cat-token('size.spacing.s');
 $cat-body-margin-bottom: cat-token('size.spacing.m');
-$cat-nav-padding-horizontal: cat-token('size.spacing.m');
+$cat-nav-padding-horizontal: cat-token('size.spacing.l');
 
 // --------
 // -- z-indexes
@@ -28,6 +28,7 @@ $font-fallback-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvet
 $font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
 $cat-link-text-decoration: none;
 $cat-link-text-decoration-hover: underline;
+$cat-button-text-decoration-hover: none;
 $cat-mark-color: cat-token('color.theme.primary.bg', 0.2);
 /* stylelint-enable value-keyword-case */
 

package/dist/collection/scss/core/_typography.scss

@@ -132,13 +132,13 @@ dl {
   }
 }
 
-nav {
-  ol,
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
+nav ol,
+nav ul,
+ol.cat-plain,
+ul.cat-plain {
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 dt {

package/dist/collection/scss/index.scss

@@ -1,26 +1,21 @@
 // -- Reset
-
 @import '~sanitize.css/sanitize.css';
 @import '~sanitize.css/assets.css';
 @import '~sanitize.css/reduce-motion.css';
 
 // -- Vendor
-
 @import '~toastify-js/src/toastify.css';
 
 // -- Fonts
-
 @import 'fonts/fonts-mixins';
 
 // -- Core
-
 @import 'core/base';
 @import 'core/nav';
 @import 'core/toast';
 @import 'core/typography';
 
 // -- Utils
-
 @import 'utils/color';
 @import 'utils/display';
 @import 'utils/elevation';
@@ -31,5 +26,6 @@
 @import 'utils/visibility';
 @import 'utils/ratio';
 
+// -- Includes
 $cat-font-path: 'assets/fonts' !default;
 @include cat-fonts($cat-font-path);

package/dist/components/cat-button2.js

@@ -118,7 +118,7 @@ function createEmptyStyleRule(query) {
   }
 }
 
-const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:underline}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1rem;padding-right:1rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1rem;padding-right:1rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1rem;padding-right:1rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1rem;padding-right:1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1rem;padding-right:1rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
+const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.5rem;padding-right:1.5rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.5rem;padding-right:1.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.5rem;padding-right:1.5rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.5rem;padding-right:1.5rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.5rem;padding-right:1.5rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
 
 const CatButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {