@skyux/lookup 11.16.0 → 11.17.0

package/fesm2022/skyux-lookup.mjs

@@ -3086,10 +3086,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         this.#_selectMode = value;
         this.#updateForSelectMode();
         if (multipleToSingle) {
-            if (this.value && this.value.length > 1) {
+            const value = this.#getValue();
+            if (value?.length > 1) {
                 // The `setTimeout` is needed to avoid a `ExpressionChangedAfterItHasBeenCheckedError` error in template forms.
                 setTimeout(() => {
-                    this.writeValue([this.value[0]]);
+                    this.writeValue([value[0]]);
                     this.#changeDetector.detectChanges();
                 });
             }
@@ -3101,11 +3102,12 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     get tokens() {
         return this.#_tokens;
     }
-    set tokens(value) {
+    set tokens(tokens) {
+        const value = this.#getValue();
         // Collapse the tokens into a single token if the user has selected many options.
-        if (this.enableShowMore && this.value.length > 5) {
+        if (this.enableShowMore && value.length > 5) {
             this.#resourcesService
-                .getString('skyux_lookup_tokens_summary', this.value.length.toString())
+                .getString('skyux_lookup_tokens_summary', value.length.toString())
                 .pipe(take(1))
                 .subscribe((label) => {
                 this.#_tokens = [
@@ -3117,20 +3119,17 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             });
         }
         else {
-            this.#_tokens = value;
+            this.#_tokens = tokens;
             this.#changeDetector.markForCheck();
         }
     }
+    /**
+     * @internal
+     * @deprecated This is exposed for unit tests only; refactor unit tests to
+     * derive the control value a different way.
+     */
     get value() {
-        return this.#_value ? this.#_value : [];
-    }
-    set value(newValue) {
-        this.#_value = newValue;
-        if (!this.#pickerModalOpen()) {
-            this.tokens = this.#parseTokens(newValue);
-        }
-        this.onChange(this.#_value);
-        this.onTouched();
+        return this.#getValue();
     }
     set autocompleteInputDirective(value) {
         this.#_autocompleteInputDirective = value;
@@ -3142,6 +3141,8 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     #idle;
     #markForTokenFocusOnKeyUp;
     #ngUnsubscribe;
+    #notifyChange;
+    #notifyTouched;
     #openNativePicker;
     #openSelectionModal;
     #_required;
@@ -3162,6 +3163,19 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     #resourcesService;
     #selectionModalSvc;
     #windowRef;
+    #getValue() {
+        return this.#_value ? this.#_value : [];
+    }
+    #setValue(newValue, options) {
+        this.#_value = newValue;
+        if (this.selectMode === 'multiple' && !this.#pickerModalOpen()) {
+            this.tokens = this.#parseTokens(newValue);
+        }
+        if (options.emitEvent) {
+            this.#notifyChange?.(this.#_value);
+        }
+        this.#updateForSelectMode();
+    }
     constructor(ngControl, inputBoxHostSvc, themeSvc) {
         super();
         this.inputBoxHostSvc = inputBoxHostSvc;
@@ -3193,11 +3207,6 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         this.#resourcesService = inject(SkyLibResourcesService);
         this.#selectionModalSvc = inject(SkySelectionModalService);
         this.#windowRef = inject(SkyAppWindowRef);
-        // Angular automatically constructs these methods.
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onChange = (value) => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.onTouched = () => { };
         if (ngControl) {
             ngControl.valueAccessor = this;
         }
@@ -3250,16 +3259,15 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         });
     }
     onAutocompleteSelectionChange(change) {
-        /* istanbul ignore else */
         if (change.selectedItem) {
             this.#addToSelected(change.selectedItem);
         }
-        else if (this.selectMode === 'single') {
-            this.writeValue([]);
+        else {
+            this.#setValue([], { emitEvent: true });
         }
     }
     onAutocompleteBlur() {
-        this.onTouched();
+        this.#notifyTouched?.();
     }
     onTokensChange(change) {
         if (!change) {
@@ -3269,14 +3277,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             if (change.length === 0) {
                 this.#focusInput();
             }
-            // NOTE: We do this here instead of just using the `value` setter because we need to use the
-            // set of tokens returned here for the purposes of setting focus (see `onTokensKeyUp`).
-            this.#_value = change.map((token) => {
+            this.tokens = change;
+            const value = change.map((token) => {
                 return token.value;
             });
-            this.tokens = change;
-            this.onChange(this.#_value);
-            this.onTouched();
+            this.#setValue(value, { emitEvent: true });
         }
     }
     onTokensFocusIndexOverRange() {
@@ -3309,14 +3314,13 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     }
     writeValue(value) {
         // Since we are dealing with arrays - clone the array being sent in to ensure we aren't modifying a consumers outer array
-        this.value = value ? value.slice() : [];
-        this.#updateForSelectMode();
+        this.#setValue(value ? value.slice() : [], { emitEvent: false });
     }
     registerOnChange(fn) {
-        this.onChange = fn;
+        this.#notifyChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        this.#notifyTouched = fn;
     }
     // Allows Angular to disable the input.
     setDisabledState(disabled) {
@@ -3417,11 +3421,11 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
             this.showMoreConfig.customPicker.open({
                 items: this.data,
                 initialSearch,
-                initialValue: this.value,
+                initialValue: this.#getValue(),
             });
         }
         else {
-            const initialValue = this.value;
+            const initialValue = this.#getValue();
             if (this.#hasSearchAsync()) {
                 this.#openSelectionModal =
                     this.#createSelectionModalInstance(initialSearch);
@@ -3469,7 +3473,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         }
     }
     #createSelectionModalInstance(initialSearch) {
-        const initialValue = this.value;
+        const initialValue = this.#getValue();
         const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
         if (!modalConfig.itemTemplate) {
             modalConfig.itemTemplate = this.searchResultTemplate;
@@ -3504,7 +3508,7 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         });
     }
     #createNativePickerInstance(initialSearch) {
-        const initialValue = this.value;
+        const initialValue = this.#getValue();
         const modalConfig = this.showMoreConfig?.nativePickerConfig || {};
         if (!modalConfig.itemTemplate) {
             modalConfig.itemTemplate = this.searchResultTemplate;
@@ -3543,21 +3547,22 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
         this.searchAsync.emit(args);
     }
     #addToSelected(item) {
+        const value = this.#getValue();
         let selectedItems;
         if (this.selectMode === 'single') {
             selectedItems = [item];
         }
         else {
-            selectedItems = this.value;
+            selectedItems = value;
             const idProperty = this.idProperty || '';
             // If items have a unique identifier, don't allow the same item to be added twice.
             if (!this.idProperty ||
-                !this.value.some((existingItem) => existingItem[idProperty] === item[idProperty])) {
+                !value.some((existingItem) => existingItem[idProperty] === item[idProperty])) {
                 selectedItems.push(item);
             }
             this.clearSearchText();
         }
-        this.writeValue(selectedItems);
+        this.#setValue(selectedItems, { emitEvent: true });
     }
     #addEventListeners() {
         this.#idle = new Subject();
@@ -3640,8 +3645,9 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
                 }
             }
             if (addItemToValue) {
+                const oldValue = this.#getValue();
                 const newValue = this.selectMode === 'multiple'
-                    ? this.value.concat(args.item)
+                    ? oldValue.concat(args.item)
                     : [args.item];
                 this.writeValue(newValue);
             }
@@ -3663,7 +3669,8 @@ class SkyLookupComponent extends SkyLookupAutocompleteAdapter {
     #updateForSelectMode() {
         if (this.autocompleteInputDirective) {
             if (this.selectMode === 'single') {
-                this.autocompleteInputDirective.value = this.value && this.value[0];
+                const value = this.#getValue();
+                this.autocompleteInputDirective.value = value && value[0];
             }
             else {
                 this.clearSearchText();