@haiilo/catalyst 6.0.3 → 6.1.1

package/dist/esm/cat-alert_25.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-636ce8d6.js';
-import { l as loglevel, b as catI18nRegistry, c as createCommonjsModule, a as commonjsGlobal, d as catIconRegistry } from './cat-icon-registry-f15b29d9.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-bac79c60.js';
+import { l as loglevel, b as catI18nRegistry, c as createCommonjsModule, a as commonjsGlobal, d as catIconRegistry } from './cat-icon-registry-fc49b06c.js';
 
 function setAttributeDefault(host, attr, value) {
   if (!host.hostElement.hasAttribute(attr) && value != null) {
@@ -486,9 +486,9 @@ const CatCheckbox = class {
     this.hasSlottedLabel = false;
     this.hasSlottedHint = false;
     this.checked = false;
+    this.indeterminate = false;
     this.disabled = false;
     this.identifier = undefined;
-    this.indeterminate = false;
     this.label = '';
     this.labelHidden = false;
     this.name = undefined;
@@ -502,13 +502,18 @@ const CatCheckbox = class {
   get id() {
     return this.identifier || this._id;
   }
+  onCheckedChange(checked) {
+    this.indeterminate && (this.indeterminate = !checked);
+  }
+  onIndeterminateChange(indeterminate) {
+    this.checked && (this.checked = !indeterminate);
+  }
   componentWillLoad() {
     this.updateResolved();
   }
   componentDidLoad() {
-    if (this.input && this.indeterminate) {
-      this.input.indeterminate = true;
-    }
+    this.onCheckedChange(this.checked);
+    this.onIndeterminateChange(this.indeterminate);
   }
   componentWillRender() {
     this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
@@ -535,10 +540,11 @@ const CatCheckbox = class {
     this.input.blur();
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ...this.nativeAttributes, ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "box-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+    return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ...this.nativeAttributes, 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, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), (this.hint || this.hasSlottedHint) && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "box-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
   }
   onInput() {
     this.checked = this.input.checked;
+    this.indeterminate = this.input.indeterminate;
     this.updateResolved();
     this.catChange.emit(this.resolvedValue);
   }
@@ -552,6 +558,10 @@ const CatCheckbox = class {
     this.resolvedValue = this.value == null ? this.checked : this.checked ? this.value : null;
   }
   get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "checked": ["onCheckedChange"],
+    "indeterminate": ["onIndeterminateChange"]
+  }; }
 };
 CatCheckbox.style = catCheckboxCss;
 
@@ -8578,6 +8588,7 @@ const INIT_STATE = {
   activeSelectionIndex: -1
 };
 let nextUniqueId$4 = 0;
+let nextTagUniqueId = 0;
 const CatSelect = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -8709,7 +8720,8 @@ const CatSelect = class {
       }
     }
     this.hide();
-    if (!this.multiple && this.state.tempSelection?.length) {
+    // Conditionally remove selection if the option was not manually selected through click or enter key press
+    if (!this.multiple && (!this.tags || !this.state.selection?.length) && this.state.tempSelection?.length) {
       this.patchState({
         activeSelectionIndex: -1,
         selection: this.state.tempSelection,
@@ -9112,7 +9124,7 @@ const CatSelect = class {
     if (term.trim().length && !this.isTagSelected(term)) {
       const value = this.value;
       const tags = value?.tags;
-      const tag = { id: `select-${this.id}-tag-${tags ? tags.length : 0}`, name: term };
+      const tag = { id: `select-${this.id}-tag-${tags?.length ? tags?.length + nextTagUniqueId++ : 0}`, name: term };
       this.select({ item: tag, render: { label: tag.name } });
     }
     this.setTransparentCaret();