nexheal-lib 0.0.62 → 0.0.63

package/fesm2022/nexheal-lib.mjs

@@ -2658,8 +2658,7 @@ class MultiselectControl {
         });
         // Initialize filteredOptions to match all options
         this.filteredOptions = [...this.options];
-        // Sync the input display in case selectedItems was set before init
-        this._syncSelectedItemList();
+        this._updateSelectedItemList();
     }
     ngAfterViewChecked() {
         if (this.isDropdownOpen && !this.dropdownInitialized) {
@@ -2678,8 +2677,11 @@ class MultiselectControl {
             // When the parent replaces “options,” we reapply any filtering and “select all” logic
             this.filteredOptions = [...this.options];
             this._recomputeSelectAllState();
-            // Sync input display (selectedItems may already be set from writeValue)
-            this._syncSelectedItemList();
+        }
+        if (changes["selectedItems"] ||
+            changes["optionDisplayProperty"] ||
+            changes["options"]) {
+            this._updateSelectedItemList();
         }
     }
     writeValue(value) {
@@ -2688,7 +2690,7 @@ class MultiselectControl {
             this._isPrimitivePatch = false;
             this._pendingPrimitiveValues = [];
             this.selectedItems = [];
-            this._syncSelectedItemList();
+            this._updateSelectedItemList();
             this.selectAllChecked = false;
             return;
         }
@@ -2699,17 +2701,13 @@ class MultiselectControl {
             this._pendingPrimitiveValues = [...value];
             this._mapPrimitivesToObjects();
             this._recomputeSelectAllState();
-            this._syncSelectedItemList();
             return;
         }
         // CASE B: array of full objects (with `id` or whatever `optionValueProperty` is)
         if (value.length > 0 &&
             typeof value[0] === "object" &&
             value[0][this.optionValueProperty] != null) {
-            // Immediately use the value objects for display
-            this.selectedItems = [...value];
-            this._syncSelectedItemList();
-            // Also set up pending mapping to sync with option references when available
+            // Convert to an array of IDs, then treat exactly like CASE A
             const idArray = value.map((obj) => obj[this.optionValueProperty]);
             this._isPrimitivePatch = true;
             this._pendingPrimitiveValues = idArray;
@@ -2722,7 +2720,7 @@ class MultiselectControl {
         this._isPrimitivePatch = false;
         this._pendingPrimitiveValues = [];
         this.selectedItems = [...value];
-        this._syncSelectedItemList();
+        this._updateSelectedItemList();
         this.onChange(this.selectedItems);
         this._recomputeSelectAllState();
     }
@@ -2735,7 +2733,7 @@ class MultiselectControl {
         // Find matching option‐objects whose ID property is in the pending list
         const matched = this._options.filter((opt) => this._pendingPrimitiveValues.includes(opt[this.optionValueProperty]));
         this.selectedItems = matched;
-        this._syncSelectedItemList();
+        this._updateSelectedItemList();
         // Notify “onChange” with the full‐object selection
         this.onChange(this.selectedItems);
         this._isPrimitivePatch = false;
@@ -2823,13 +2821,13 @@ class MultiselectControl {
             // Remove all filtered options from selection
             this.selectedItems = this.selectedItems.filter((item) => !this.filteredOptions.includes(item));
         }
-        this._syncSelectedItemList();
+        this._updateSelectedItemList();
         this.onChange(this.selectedItems);
         this.optionsSelected.emit(this.selectedItems);
     }
     removeSelectedOption(option) {
         this.selectedItems = this.selectedItems.filter((item) => item !== option);
-        this._syncSelectedItemList();
+        this._updateSelectedItemList();
         this.onChange(this.selectedItems);
         this.onTouched();
         this.optionsSelected.emit(this.selectedItems);
@@ -2841,7 +2839,7 @@ class MultiselectControl {
         else {
             this.selectedItems = [...this.selectedItems, option];
         }
-        this._syncSelectedItemList();
+        this._updateSelectedItemList();
         // Update “select all” checkbox
         this._recomputeSelectAllState();
         // Notify form that selection changed
@@ -2955,7 +2953,7 @@ class MultiselectControl {
     }
     resetSelection() {
         this.selectedItems = [];
-        this._syncSelectedItemList();
+        this._updateSelectedItemList();
         this.onChange([]);
         this.onTouched();
         this.isDropdownOpen = false;
@@ -2966,17 +2964,20 @@ class MultiselectControl {
         this.isDropdownOpen = false;
         this._recomputeSelectAllState();
     }
-    _syncSelectedItemList() {
-        if (this._options && this._options.length > 0 && this.selectedItems.length === this._options.length) {
+    _updateSelectedItemList() {
+        const items = this.selectedItems ?? [];
+        if (this._options && this._options.length > 0 && items.length === this._options.length) {
             this.selectedItemList = "All Items Selected";
         }
         else {
-            this.selectedItemList = (this.selectedItems ?? [])
+            this.selectedItemList = items
                 .map((item) => item?.[this.optionDisplayProperty])
-                .filter((label) => !!label)
+                .filter((label) => label != null && String(label).trim() !== "")
                 .join(", ");
         }
-        this.inputControl.setValue(this.selectedItemList, { emitEvent: false });
+        if (this.inputControl.value !== this.selectedItemList) {
+            this.inputControl.setValue(this.selectedItemList, { emitEvent: false });
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiselectControl, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiselectControl, isStandalone: true, selector: "multiselect-control", inputs: { title: "title", selectedItems: "selectedItems", required: "required", placeholder: "placeholder", customClass: "customClass", clearVal: "clearVal", deFocus: "deFocus", optionValueProperty: "optionValueProperty", inputLoader: "inputLoader", error: "error", errorMessage: "errorMessage", autocomplete: "autocomplete", showSearch: "showSearch", optionDisplayProperty: "optionDisplayProperty", options: "options", readonly: "readonly", disabled: "disabled" }, outputs: { optionsSelected: "optionsSelected", selectionCleared: "selectionCleared", blurEvent: "blurEvent" }, host: { listeners: { "window:keydown": "handleWindowKeydown($event)" } }, providers: [