@haiilo/catalyst 0.10.8 → 0.13.0

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

@@ -192,6 +192,7 @@ label + p {
 .hint-section ::slotted([slot=hint]) {
   font-size: 0.875rem;
   line-height: 1rem;
+  font-weight: var(--cat-font-weight-body, 400);
   margin: 0;
 }
 
@@ -201,6 +202,7 @@ label + p {
   gap: 0.5rem;
   font-size: 0.9375rem;
   line-height: 1.25rem;
+  font-weight: var(--cat-font-weight-body, 400);
   margin-bottom: 1rem;
 }
 
@@ -230,6 +232,7 @@ label.hidden {
   margin-left: 0.25rem;
   font-size: 0.75rem;
   line-height: 1rem;
+  font-weight: var(--cat-font-weight-body, 400);
   color: rgb(var(--cat-font-color-muted, 105, 118, 135));
 }
 
@@ -238,7 +241,7 @@ label.hidden {
   overflow: hidden;
   font-size: 16px;
 }
-.choices:focus {
+.choices.is-focused, .choices:focus {
   outline: none;
   box-shadow: 0 1px 4px 0 #101d3033;
 }
@@ -247,7 +250,6 @@ label.hidden {
 }
 .choices.is-open {
   overflow: visible;
-  box-shadow: 0 1px 4px 0 #101d3033;
 }
 .choices.is-disabled .choices__inner,
 .choices.is-disabled .choices__input {

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

@@ -1,8 +1,8 @@
-import { Component, Element, Event, h, Host, Method, Prop, Watch, State } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, State, Watch, Listen } from '@stencil/core';
 import Choices from 'choices.js';
-import { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';
 import log from 'loglevel';
 import { CatFormHint } from '../cat-form-hint/cat-form-hint';
+import { CatI18nRegistry } from '../cat-i18n/cat-i18n-registry';
 let nextUniqueId = 0;
 const getOptionTemplate = (data) => {
   var _a;
@@ -29,6 +29,7 @@ export class CatSelect {
   constructor() {
     this.i18n = CatI18nRegistry.getInstance();
     this.id = `cat-select-${nextUniqueId++}`;
+    this.resetItemsOnNextValueChange = true;
     this.hasSlottedLabel = false;
     /**
      * The label for the select.
@@ -45,7 +46,7 @@ export class CatSelect {
     /**
      * The available options for the input.
      */
-    this.choices = [];
+    this.items = [];
     /**
      * Disable the select.
      */
@@ -67,17 +68,41 @@ export class CatSelect {
     /**
      * Enable search for the select.
      */
-    this.noSearch = false;
+    this.search = false;
   }
-  setChoicesHandler(choices) {
-    if (!(choices === null || choices === void 0 ? void 0 : choices.length))
-      return;
-    this.setChoices(choices, 'value', 'label', true);
+  setChoicesHandler(items) {
+    var _a, _b, _c, _d;
+    const isSelected = (item) => { var _a; return (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item.value); };
+    const choices = items.map(item => (Object.assign(Object.assign({}, item), { selected: isSelected(item) })));
+    (_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, 'value', 'label', true);
+    const vItems = ((_b = this.choice) === null || _b === void 0 ? void 0 : _b.getValue()) || [];
+    const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]);
+    const value = this.value || [];
+    const vItemValues = [...value];
+    // remove duplicate items
+    (_c = this.choice) === null || _c === void 0 ? void 0 : _c.unhighlightAll();
+    vItemsArray.forEach(vItem => {
+      var _a;
+      const index = vItemValues.indexOf(vItem.value);
+      if (index > -1) {
+        vItemValues.splice(index, 1);
+      }
+      else {
+        vItem.choiceId = -1; // disconnect item from choice
+        (_a = this.choice) === null || _a === void 0 ? void 0 : _a.highlightItem(vItem, false);
+      }
+    });
+    (_d = this.choice) === null || _d === void 0 ? void 0 : _d.removeHighlightedItems(false);
   }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   setValueHandler(value) {
-    if (this.multiple)
-      return;
-    this.setValue(value || []);
+    var _a, _b;
+    if (this.resetItemsOnNextValueChange) {
+      (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
+    }
+    this.resetItemsOnNextValueChange = true;
+    (_b = this.choice) === null || _b === void 0 ? void 0 : _b.setChoiceByValue(value);
+    this.multiple && this.updateRemoveItemButtonVisibility();
   }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -86,73 +111,46 @@ export class CatSelect {
     }
   }
   componentDidLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     this.init();
     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;
+      const root = attachedInternals.shadowRoot;
+      this.choicesElement = (root === null || root === void 0 ? void 0 : root.querySelector('.choices')) || undefined;
+      this.choiceInner = (root === null || root === void 0 ? void 0 : root.querySelector('.choices__inner')) || undefined;
+      this.choiceDropdown = ((_c = root === null || root === void 0 ? void 0 : root.querySelector('.choices__list--dropdown')) === null || _c === void 0 ? void 0 : _c.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));
+    (_d = this.choicesElement) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.resetFocus.bind(this));
+    (_e = this.choiceInner) === null || _e === void 0 ? void 0 : _e.addEventListener('click', this.showDropdownHandler.bind(this));
+    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('hideDropdown', this.showMultipleFocus.bind(this));
+    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('showDropdown', this.showMultipleFocus.bind(this));
+    (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.resetFocus.bind(this));
+    (_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('change', this.onChange.bind(this));
+    (_k = this.selectElement) === null || _k === void 0 ? void 0 : _k.addEventListener('search', this.onSearch.bind(this));
+    (_l = this.choiceDropdown) === null || _l === void 0 ? void 0 : _l.addEventListener('scroll', this.onScrolledBottom.bind(this));
     if (this.multiple) {
-      (_l = this.selectElement) === null || _l === void 0 ? void 0 : _l.addEventListener('choice', this.onChoice.bind(this));
+      (_m = this.selectElement) === null || _m === void 0 ? void 0 : _m.addEventListener('choice', this.onChoice.bind(this));
       this.createRemoveItemButton();
     }
   }
   disconnectedCallback() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     (_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));
+    (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.resetFocus.bind(this));
+    (_c = this.choiceInner) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.showDropdownHandler.bind(this));
+    (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('hideDropdown', this.showMultipleFocus.bind(this));
+    (_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('showDropdown', this.showMultipleFocus.bind(this));
+    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('removeItem', this.resetFocus.bind(this));
+    (_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('change', this.onChange.bind(this));
+    (_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('search', this.onSearch.bind(this));
+    (_j = this.choiceDropdown) === null || _j === void 0 ? void 0 : _j.removeEventListener('scroll', this.onScrolledBottom.bind(this));
     if (this.multiple) {
-      (_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));
+      (_k = this.removeElement) === null || _k === void 0 ? void 0 : _k.removeEventListener('choice', this.onChoice.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;
+  onBlur(event) {
+    this.catBlur.emit(event);
   }
   render() {
     return (h(Host, null,
@@ -167,16 +165,15 @@ export class CatSelect {
       this.hintSection));
   }
   init() {
-    const value = this.value || [];
+    const component = this; // eslint-disable-line @typescript-eslint/no-this-alias
     const removeItemText = (value) => this.i18n.t('select.removeItem', { value });
     const config = {
       allowHTML: true,
-      items: Array.isArray(value) ? value : [value],
       removeItemButton: true,
       duplicateItemsAllowed: false,
       delimiter: '',
       paste: false,
-      searchEnabled: !this.noSearch,
+      searchEnabled: this.search,
       searchChoices: false,
       position: this.position,
       resetScrollPosition: false,
@@ -191,7 +188,12 @@ export class CatSelect {
       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')
+      customAddItemText: this.i18n.t('select.customAddItem'),
+      callbackOnInit: function () {
+        const choice = this;
+        choice.setChoices(component.items, 'value', 'label', true);
+        choice.setChoiceByValue(component.value);
+      }
     };
     const configSingle = {
       callbackOnCreateTemplates: (strToEl) => {
@@ -257,18 +259,42 @@ export class CatSelect {
     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);
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
     return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
   }
   onChange() {
+    var _a;
+    this.resetItemsOnNextValueChange = false;
+    this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue(true);
+    this.catChange.emit(this.value);
+  }
+  showMultipleFocus() {
     var _a, _b;
-    this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue();
-    this.catChange.emit((_b = this.choice) === null || _b === void 0 ? void 0 : _b.getValue());
-    if (this.multiple) {
-      this.updateRemoveItemButtonVisibility();
+    if (this.multiple && this.isFocused() && !((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.classList.contains('is-focused'))) {
+      (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.classList.add('is-focused');
+    }
+  }
+  resetFocus() {
+    var _a, _b, _c;
+    if (!this.isFocused()) {
+      if (!((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('tabindex'))) {
+        (_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+      }
+      (_c = this.choicesElement) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+  }
+  isFocused() {
+    return document.activeElement === this.hostElement;
+  }
+  onChoice(event) {
+    var _a;
+    const customEvent = event;
+    const choice = customEvent.detail.choice;
+    if (choice.selected) {
+      (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(choice.value);
+      this.onChange();
     }
   }
   onSearch(event) {
@@ -283,20 +309,9 @@ export class CatSelect {
       this.catScrolledBottom.emit();
     }
   }
-  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();
-    }
+    !this.disabled && ((_a = this.choice) === null || _a === void 0 ? void 0 : _a.showDropdown());
   }
   createRemoveItemButton() {
     var _a;
@@ -310,11 +325,10 @@ export class CatSelect {
   }
   updateRemoveItemButtonVisibility() {
     var _a, _b, _c;
-    const items = Array.from((_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue());
-    if (items.length) {
+    if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
       (_b = this.removeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
     }
-    else if (!items.length) {
+    else {
       (_c = this.removeElement) === null || _c === void 0 ? void 0 : _c.setAttribute('hidden', 'true');
     }
   }
@@ -322,6 +336,7 @@ export class CatSelect {
     var _a;
     event.stopPropagation();
     (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
+    this.onChange();
   }
   static get is() { return "cat-select"; }
   static get encapsulation() { return "shadow"; }
@@ -386,16 +401,15 @@ export class CatSelect {
       "reflect": false,
       "defaultValue": "false"
     },
-    "choices": {
+    "items": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "Choice[]",
-        "resolved": "Choice[]",
+        "original": "CatSelectItem[]",
+        "resolved": "CatSelectItem[]",
         "references": {
-          "Choice": {
-            "location": "import",
-            "path": "choices.js"
+          "CatSelectItem": {
+            "location": "local"
           }
         }
       },
@@ -408,23 +422,18 @@ export class CatSelect {
       "defaultValue": "[]"
     },
     "value": {
-      "type": "string",
+      "type": "any",
       "mutable": true,
       "complexType": {
-        "original": "string | string[] | Choice | Choice[]",
-        "resolved": "Choice | Choice[] | string | string[] | undefined",
-        "references": {
-          "Choice": {
-            "location": "import",
-            "path": "choices.js"
-          }
-        }
+        "original": "any",
+        "resolved": "any",
+        "references": {}
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The pre-selected items for the input."
+        "text": "The value of the select."
       },
       "attribute": "value",
       "reflect": false
@@ -501,7 +510,7 @@ export class CatSelect {
       "reflect": false,
       "defaultValue": "'auto'"
     },
-    "noSearch": {
+    "search": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -515,7 +524,7 @@ export class CatSelect {
         "tags": [],
         "text": "Enable search for the select."
       },
-      "attribute": "no-search",
+      "attribute": "search",
       "reflect": false,
       "defaultValue": "false"
     },
@@ -585,113 +594,40 @@ export class CatSelect {
         "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 | undefined, label?: string | undefined, 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>"
-      },
+    }, {
+      "method": "catBlur",
+      "name": "catBlur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "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>"
+        "tags": [],
+        "text": "Emitted when the select loses focus."
       },
-      "docs": {
-        "text": "Clear all choices from select.",
-        "tags": []
-      }
-    },
-    "clearInput": {
       "complexType": {
-        "signature": "() => Promise<this>",
-        "parameters": [],
+        "original": "FocusEvent",
+        "resolved": "FocusEvent",
         "references": {
-          "Promise": {
+          "FocusEvent": {
             "location": "global"
           }
-        },
-        "return": "Promise<this>"
-      },
-      "docs": {
-        "text": "Clear input of any user inputted text.",
-        "tags": []
+        }
       }
-    }
-  }; }
+    }]; }
   static get elementRef() { return "hostElement"; }
   static get watchers() { return [{
-      "propName": "choices",
+      "propName": "items",
       "methodName": "setChoicesHandler"
     }, {
       "propName": "value",
       "methodName": "setValueHandler"
     }]; }
+  static get listeners() { return [{
+      "name": "blur",
+      "method": "onBlur",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }]; }
 }
 //# sourceMappingURL=cat-select.js.map