@haiilo/catalyst 0.10.8 → 0.11.0

package/dist/catalyst/scss/index.scss

@@ -68,7 +68,7 @@ section {
   padding: 2rem 0;
 
   &:not(:last-of-type) {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 10%);
   }
 
   > h2:not(:first-child),

package/dist/cjs/cat-alert_21.cjs.entry.js

@@ -120,7 +120,7 @@ const CatAvatar = class {
 };
 CatAvatar.style = catAvatarCss;
 
-const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-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);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:0.75rem;min-width:0.75rem;font-size:0.75rem;padding:0rem 0.25rem}.badge-s{height:1rem;min-width:1rem;font-size:0.75rem;padding:0.25rem 0.5rem}.badge-m{height:1.25rem;min-width:1.25rem;font-size:0.75rem;padding:0.5rem 0.75rem}.badge-l{height:1.5rem;min-width:1.5rem;font-size:0.875rem;padding:0.75rem 1rem}.badge-xl{height:1.75rem;min-width:1.75rem;font-size:0.9375rem;padding:1rem 1.25rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
+const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-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);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:1rem;min-width:0.75rem;font-size:12px;padding:0 0.25rem}.badge-s{height:1.5rem;min-width:1rem;font-size:12px;padding:0 0.5rem}.badge-m{height:2rem;min-width:1.25rem;font-size:13px;padding:0 0.75rem}.badge-l{height:2.5rem;min-width:1.5rem;font-size:15px;padding:0 1rem}.badge-xl{height:3rem;min-width:1.75rem;font-size:18px;padding:0 1rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
 
 const CatBadge = class {
   constructor(hostRef) {
@@ -3069,7 +3069,7 @@ const CatModal = class {
 };
 CatModal.style = catModalCss;
 
-const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
+const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
 
 let nextUniqueId$4 = 0;
 const CatRadio = class {
@@ -3188,7 +3188,6 @@ const CatRadioGroup = class {
     this.onValueChanged(this.value);
     this.onDisabledChanged(this.disabled);
     this.onLabelLeftChanged(this.labelLeft);
-    //this.updateTabIndex();
   }
   onKeydown(event) {
     var _a, _b;
@@ -3207,7 +3206,6 @@ const CatRadioGroup = class {
   onInput(event) {
     const catRadioElement = this.catRadioGroup.find(value => value === event.target);
     this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
-    //this.updateTabIndex();
     this.catChange.emit();
   }
   render() {
@@ -12067,6 +12065,7 @@ const CatSelect = class {
     this.catScrolledBottom = index.createEvent(this, "catScrolledBottom", 7);
     this.i18n = catNotification.CatI18nRegistry.getInstance();
     this.id = `cat-select-${nextUniqueId$3++}`;
+    this.resetItemsOnNextValueChange = true;
     this.hasSlottedLabel = false;
     /**
      * The label for the select.
@@ -12083,7 +12082,7 @@ const CatSelect = class {
     /**
      * The available options for the input.
      */
-    this.choices = [];
+    this.items = [];
     /**
      * Disable the select.
      */
@@ -12105,17 +12104,39 @@ const CatSelect = class {
     /**
      * Enable search for the select.
      */
-    this.noSearch = false;
-  }
-  setChoicesHandler(choices) {
-    if (!(choices === null || choices === void 0 ? void 0 : choices.length))
-      return;
-    this.setChoices(choices, 'value', 'label', true);
+    this.search = false;
+  }
+  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 vItemValues = [...this.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);
   }
   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"]');
@@ -12124,88 +12145,48 @@ const CatSelect = class {
     }
   }
   componentDidLoad() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     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;
-    }
-    (_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));
+      const root = attachedInternals.shadowRoot;
+      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;
+    }
+    (_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('change', this.onChange.bind(this));
+    (_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('search', this.onSearch.bind(this));
+    (_g = this.choiceDropdown) === null || _g === void 0 ? void 0 : _g.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));
+      (_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, _h;
+    var _a, _b, _c, _d, _e, _f;
     (_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));
+    (_c = this.selectElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('change', this.onChange.bind(this));
+    (_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('search', this.onSearch.bind(this));
+    (_e = this.choiceDropdown) === null || _e === void 0 ? void 0 : _e.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));
+      (_f = this.removeElement) === null || _f === void 0 ? void 0 : _f.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;
-  }
   render() {
     return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.t('input.optional'), ")"))))), index.h("select", { id: this.id, ref: el => (this.selectElement = el), multiple: this.multiple, disabled: this.disabled }), 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,
@@ -12220,7 +12201,12 @@ const CatSelect = class {
       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) => {
@@ -12286,18 +12272,24 @@ const CatSelect = class {
     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) && (index.h(catFormHint.CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
   }
   onChange() {
-    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();
+    var _a;
+    this.resetItemsOnNextValueChange = false;
+    this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue(true);
+    this.catChange.emit(this.value);
+  }
+  onChoice(event) {
+    var _a;
+    const customEvent = event;
+    const coice = customEvent.detail.choice;
+    if (coice.selected) {
+      (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(coice.value);
+      this.onChange();
     }
   }
   onSearch(event) {
@@ -12312,20 +12304,9 @@ const CatSelect = class {
       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;
@@ -12343,7 +12324,7 @@ const CatSelect = class {
     if (items.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');
     }
   }
@@ -12351,10 +12332,11 @@ const CatSelect = class {
     var _a;
     event.stopPropagation();
     (_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
+    this.updateRemoveItemButtonVisibility();
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
-    "choices": ["setChoicesHandler"],
+    "items": ["setChoicesHandler"],
     "value": ["setValueHandler"]
   }; }
 };