@haiilo/catalyst 2.4.5 → 2.4.6

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

@@ -4209,6 +4209,7 @@ const CatSelect = class {
     this._id = `cat-input-${nextUniqueId$4++}`;
     this.term$ = new Subject();
     this.more$ = new Subject();
+    this.valueChangedBySelection = false;
     this.state = INIT_STATE;
     this.hasSlottedLabel = false;
     /**
@@ -4255,6 +4256,9 @@ const CatSelect = class {
     this.reset(connector);
     this.resolve();
   }
+  onValueChange() {
+    !this.valueChangedBySelection ? this.resolve() : (this.valueChangedBySelection = false);
+  }
   onStateChange(newState, oldState) {
     var _a;
     const changed = (key) => newState[key] !== oldState[key];
@@ -4265,16 +4269,17 @@ const CatSelect = class {
       }
     }
     if (changed('selection')) {
+      let newValue;
       if (!this.multiple && this.state.selection.length) {
         this.hide();
       }
       const idsSelected = this.state.selection.map(item => item.item.id);
       if (!this.tags) {
         if (this.multiple) {
-          this.value = idsSelected;
+          newValue = idsSelected;
         }
         else {
-          this.value = idsSelected.length ? idsSelected[0] : '';
+          newValue = idsSelected.length ? idsSelected[0] : '';
         }
       }
       else {
@@ -4283,12 +4288,16 @@ const CatSelect = class {
           .filter(item => item.item.id.startsWith(`select-${this.id}-tag`))
           .map(item => item.render.label);
         if (this.multiple) {
-          this.value = { ids, tags };
+          newValue = { ids, tags };
         }
         else {
-          this.value = { id: ids.length ? ids[0] : '', tag: tags.length ? tags[0] : '' };
+          newValue = { id: ids.length ? ids[0] : '', tag: tags.length ? tags[0] : '' };
         }
       }
+      if (!oldState.isResolving) {
+        this.valueChangedBySelection = true;
+        this.value = newValue;
+      }
       this.catChange.emit();
     }
   }
@@ -4759,6 +4768,7 @@ const CatSelect = class {
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {
     "connector": ["onConnectorChange"],
+    "value": ["onValueChange"],
     "state": ["onStateChange"]
   }; }
 };
@@ -4867,8 +4877,9 @@ const CatSelectTest = class {
         description: user.desc
       })
     });
-    (_e = this.singleSelectAvatar) === null || _e === void 0 ? void 0 : _e.connect(Object.assign(Object.assign({}, this.countryConnector), { customId: (item) => item.country }));
+    (_e = this.singleSelectAvatar) === null || _e === void 0 ? void 0 : _e.connect(this.countryConnector);
     (_f = this.singleSelectTagging) === null || _f === void 0 ? void 0 : _f.connect(this.countryConnector);
+    setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
   }
   render() {
     return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-dropdown", { overflow: true, noAutoClose: true }, index.h("cat-button", { slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { slot: "content", style: { width: '400px' } }, index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true, style: { width: '90%' } })))));