@designsystem-se/af 38.2.0 → 38.2.1-beta.0

package/components/digi-form-select-filter.js

@@ -79,6 +79,10 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
         this.afOnSelect = createEvent(this, "afOnSelect", 7);
         this.afOnQueryChanged = createEvent(this, "afOnQueryChanged", 7);
         this._searchQuery = '';
+        /** True when `value` was set from outside (e.g. Angular CVA) — then value is selection master. */
+        this._valueIsMaster = false;
+        /** Guards internal `value` writes so they don't flip `_valueIsMaster`. */
+        this._updatingValueInternally = false;
         this.isOpen = false;
         this.focusListItemIndex = 0;
         this.focusInList = false;
@@ -112,17 +116,19 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
         this.afFilterButtonAriaDescribedby = undefined;
         this.afErrorMessageIsAlert = true;
     }
-    onValueChanged(value) {
-        const joinedArray = [...value, ...this._selectedItems];
-        const noDuplicates = joinedArray.filter((item, pos) => joinedArray.indexOf(item) === pos);
-        if (noDuplicates && noDuplicates.length > 0) {
-            if (this.afMultipleItems) {
-                this._selectedItems = [...noDuplicates];
-            }
-            else {
-                this._selectedItems = [noDuplicates[0]];
-            }
+    onValueChanged(newValue) {
+        let parsedValue;
+        if (typeof newValue === 'string') {
+            parsedValue = newValue ? JSON.parse(newValue) : [];
+        }
+        else {
+            parsedValue = newValue || [];
+        }
+        if (!this._updatingValueInternally) {
+            this._valueIsMaster = true;
         }
+        this.value = parsedValue;
+        this.syncValueAndSelectedListItems('valueChange');
     }
     handleListItems() {
         if (this.afListItems) {
@@ -138,15 +144,7 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
                 }
                 this.giveItemsValueIfNoneExist();
                 this.sortListAlphabetically();
-                const selectedListItems = this._afListItems.filter((item) => item.selected);
-                if (selectedListItems && selectedListItems.length > 0) {
-                    this._selectedItems = [...selectedListItems];
-                    this.afOnSelect.emit(this._selectedItems);
-                    this.value = this._selectedItems;
-                }
-                else if (this.value && this.value.length > 0) {
-                    this._selectedItems = [...this.value];
-                }
+                this.syncValueAndSelectedListItems('afListItemsChange');
                 this.filterResults();
             }
             catch (e) {
@@ -198,14 +196,58 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
     focusOnElement() {
         this._toggleButton.focus();
     }
-    debounce(func, timeout = 300) {
-        let timer;
-        return (...args) => {
-            clearTimeout(timer);
-            timer = setTimeout(() => {
-                func.apply(this, args);
-            }, timeout);
-        };
+    componentWillLoad() {
+        /* Stencil @Watch does not run for the initial prop value.
+         * Given that Angular Control Value Accessors writeValue often sets `value` before willLoad —
+         * we need to force a value check here with bootstrapInitialValue .*/
+        this.bootstrapInitialValue();
+        this.handleListItems();
+    }
+    bootstrapInitialValue() {
+        if (typeof this.value === 'string') {
+            const parsed = this.value ? JSON.parse(this.value) : [];
+            this._updatingValueInternally = true;
+            this.value = parsed;
+            this._updatingValueInternally = false;
+        }
+        if (Array.isArray(this.value) && this.value.length > 0) {
+            this._valueIsMaster = true;
+        }
+    }
+    /**
+     * Keep `value` and `afListItems[].selected` in sync.
+     * - If `value` was set externally (`_valueIsMaster`), value wins on list updates.
+     * - Otherwise selection is seeded from `afListItems[].selected` (React/vanilla data-as-master).
+     * Does not emit `afOnSelect` — that is reserved for user interaction so Angular Control Value Accessors
+     * does not get feedback loops on prop sync.
+     */
+    syncValueAndSelectedListItems(whereDidTheChangeComeFrom) {
+        if (!this._afListItems) {
+            return;
+        }
+        if (whereDidTheChangeComeFrom === 'afListItemsChange') {
+            if (this._valueIsMaster) {
+                this.applyValueToListItems(this.value);
+            }
+            else {
+                this._selectedItems = this._afListItems.filter((item) => item.selected);
+                this.setValueInternally([...this._selectedItems]);
+            }
+            return;
+        }
+        this.applyValueToListItems(this.value);
+    }
+    applyValueToListItems(value) {
+        const selectedValues = new Set((value !== null && value !== void 0 ? value : []).map((item) => item.value));
+        this._afListItems.forEach((item) => {
+            item.selected = selectedValues.has(item.value);
+        });
+        this._selectedItems = this._afListItems.filter((item) => selectedValues.has(item.value));
+    }
+    setValueInternally(nextValue) {
+        this._updatingValueInternally = true;
+        this.value = nextValue;
+        this._updatingValueInternally = false;
     }
     setClosed(focusToggleButton = false) {
         this.isOpen = false;
@@ -264,9 +306,6 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
         this.setClosed(true);
         this.afOnFilterClosed.emit();
     }
-    componentWillLoad() {
-        this.handleListItems();
-    }
     setFocusItem() {
         const element = this.inputItem(`${this.afId}-select-filter-list`, this.focusListItemIndex);
         if (element) {
@@ -371,16 +410,14 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
     }
     filterResults() {
         if (this._searchQuery && this._searchQuery.length > 0) {
-            this._filteredResult = [
-                ...this._afListItems.filter((item) => {
-                    return item.label
-                        .toLowerCase()
-                        .includes(this._searchQuery.toLowerCase());
-                })
-            ];
+            this._filteredResult = this._afListItems.filter((item) => {
+                return item.label
+                    .toLowerCase()
+                    .includes(this._searchQuery.toLowerCase());
+            });
         }
         else {
-            this._filteredResult = [...this._afListItems];
+            this._filteredResult = this._afListItems;
         }
     }
     inputSearchKeyboardHandler(e) {
@@ -400,7 +437,7 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
     }
     resetSelectItems(close = false) {
         this._selectedItems = [];
-        this.value = [];
+        this.setValueInternally([]);
         this.afOnSelect.emit([]);
         this._searchQuery = '';
         this.filterResults();
@@ -430,7 +467,7 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
             this._selectedItems = [item];
             this.emitFilterClosedEvent();
         }
-        this.value = this._selectedItems;
+        this.setValueInternally([...this._selectedItems]);
         this.afOnSelect.emit(this._selectedItems);
         this.filterResults();
     }
@@ -521,15 +558,15 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
             } }, h("slot", { name: "empty-search-result" })))));
     }
     render() {
-        return (h(Host, { key: '62acc267c182d80703024115c50dddec8413ad3c', tabindex: -1 }, h("div", { key: 'feea697aee9107e7b90792251c7661ff0ada1a98', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '90a45c8dc587e1d236f27b03c0e2f71dc8477b7f', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: '703080c3a43d0d8ccd233560b2287d9127a87a8b', onAfOnEsc: () => this.escHandler() }, h("button", { key: '54498ff1eb5b930a8173c4dfdb950b8a94ba590e', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: '4b913f6134090cb598f7dbc331c290ef655f687e', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: 'ccb42c85db8f9bf3d39fd3864b8c02aacb98c6d9', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: '704782f9bc33016df16c8492b29721723ed591fb', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '83211db95b19280716ee81611a183816fa00b1d0', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: 'a88f7aa3f0923e34b0f8866a936261ecbb0701e6', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
+        return (h(Host, { key: '1a07fd41c8f9ccc1fbd0ca768fd3f87fc719dec4', tabindex: -1 }, h("div", { key: '6492705706e717048243892a3f8b269fa26dc6b9', class: Object.assign({ 'digi-form-select-filter': true }, this.cssModifiers), role: "application", id: `${this.afId}-identifier` }, h("digi-form-label", { key: '99d0e29f7dad712882c0a3c5fd3f468af7dd5c55', afLabel: this.afFilterButtonTextLabel, afFor: `${this.afId}`, afId: `${this.afId}-label`, class: "digi-form-select-filter__label", afDescription: this.afDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("digi-util-keydown-handler", { key: 'a53d9d63b71557554da9442511af10870e345263', onAfOnEsc: () => this.escHandler() }, h("button", { key: '260c22654935d7422d5fc30a47fbd0c37ec00f0c', type: "button", id: `${this.afId}`, class: "digi-form-select-filter__toggle-button", onClick: () => this.toggleDropdown(), ref: (el) => (this._toggleButton = el), "aria-haspopup": "true", "aria-label": this.ariaLabel, "aria-describedby": `${this.afFilterButtonAriaDescribedby} ${this.afId}--validation-message`, "aria-controls": `${this.afId}-dropdown-menu`, "aria-expanded": this.isOpen }, h("div", { key: 'b92a13d75d3e320a39ca99128354178c01c1ff0d', class: Object.assign({ 'digi-form-filter__toggle-button-wrapper': true }, this.cssModifiersToggleButtonWrapper) }, h("digi-icon-check", { key: '37ab06f299d37c36516a7b809472bb300d244c18', class: Object.assign({ 'digi-form-select-filter__toggle-button-indicator': true }, this.cssModifiersToggleButtonIndicator), slot: "icon" }), h("span", { key: 'ca373143f83ab3da2e6579b3a0e1e145a10d2235', class: "digi-form-select-filter__toggle-button-text" }, this.renderButtonLabel)), h("digi-icon-chevron-down", { key: '1a62747454653ceafa650e329301a8975179d75d', class: "digi-form-select-filter__toggle-icon" })), h("div", { key: 'b0cafd4ce8ad8017f60e8fab88417512a6698f20', id: `${this.afId}-dropdown-menu`, tabindex: this.isOpen ? '-1' : undefined, class: {
                 'digi-form-select-filter__dropdown': true,
                 'digi-form-select-filter__dropdown--right': this.afAlignRight,
                 'digi-form-select-filter__dropdown--hidden': !this.isOpen
-            } }, h("fieldset", { key: 'b79878e2277511c2543663776189ba0a42047894' }, h("div", { key: 'a0d832fe7834a55eb92bf48a9182057886d5e82e', class: "digi-form-select-filter__header" }, h("legend", { key: '59acc3f35f85559e958656e00216ad9439448344', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: 'ed1ba547b5c69791779d0127a58dff9c86a48976', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
+            } }, h("fieldset", { key: 'f98295e8e804f93428489daf5844df9854ed6053' }, h("div", { key: 'c614d142260b6eaa0b6ea643b34f135551aaf1ec', class: "digi-form-select-filter__header" }, h("legend", { key: 'f1c94bf0ea6e3745d8965fbe5bfdf0a298d7b4f0', class: "digi-form-select-filter__legend" }, this.afFilterButtonTextLabel), h("digi-form-input", { key: '6def27fd94b52e666c3e8dac4385ddf874f85bd1', afLabel: this.afName, afId: `${this.afId}-search`, afVariation: FormInputVariation.MEDIUM, afType: FormInputType.SEARCH, afValidation: FormInputValidation.NEUTRAL, onAfOnFocus: () => {
                 this.focusListItemIndex = 0;
             }, onAfOnKeyup: (e) => {
                 this.inputSearchKeyboardHandler(e.detail);
-            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: '793751dc225d514f42af1a9ec017b7faa9d363c5', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '57007b01069dee8bfa0154cbe6d35d91f20894fd', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '45d0622dc2e50e8dcba11d21696faa0a6b230516', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
+            }, onAfOnInput: (e) => this.inputSearchInputHandler(e.detail), afValue: this._searchQuery, class: "digi-form-select-filter__search-input", afAriaControls: `${this.afId}-select-filter-list`, afAutocomplete: "off", afAriaAutocomplete: "none" }), this.renderEmptyStateBox()), h("div", { key: 'bcfc446573bb4b8f88aabdde1a8b6da1a6ac51f7', class: "digi-form-select-filter__scroll" }, h("digi-util-keydown-handler", { key: '656253e1dba64d2906ae9b195063300fe5cbd900', onAfOnDown: (e) => this.downHandler(e), onAfOnRight: (e) => this.downHandler(e), onAfOnUp: (e) => this.upHandler(e), onAfOnLeft: (e) => this.upHandler(e), onAfOnHome: (e) => this.homeHandler(e), onAfOnEnd: (e) => this.endHandler(e), onAfOnEnter: (e) => this.enterHandler(e), onAfOnSpace: (e) => this.spaceHandler(e), onAfOnTab: () => this.tabHandler(), onAfOnShiftTab: () => this.shiftHandler() }, h("ul", { key: '4a42a8ee02e3921710aa00826b31558ed1f9a485', class: "digi-form-select-filter__list", "aria-labelledby": `${this.afId}`, id: `${this.afId}-select-filter-list`, role: this.afMultipleItems ? '' : 'radiogroup', "aria-invalid": this.afMultipleItems
                 ? 'false'
                 : this.afValidation ===
                     FormSelectFilterValidation.ERROR
@@ -538,11 +575,11 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
                 ? false
                 : this.afRequired
                     ? 'true'
-                    : 'false' }, this.showNeutralValue && (h("li", { key: '1d1a778273c5ac8f3d30b65048162e47b19f00cd', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
+                    : 'false' }, this.showNeutralValue && (h("li", { key: '40d30a579a332fec15b5c3f38865eacce0a8c2ee', class: "digi-form-select-filter__item", role: "radio", "aria-required": this.afMultipleItems
                 ? 'false'
                 : this.afRequired
                     ? 'true'
-                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: 'aa7ea145f0ad6f125f9df0ba11aaf90d0113c20c', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
+                    : 'false', "aria-checked": this._selectedItems.length === 0 ? 'true' : 'false', onClick: () => this.resetSelectItems(true), tabIndex: 0, "aria-label": this.afFilterButtonText }, this._selectedItems.length === 0 && (h("digi-icon-check", { key: '43f446e70c707681dd1de50e11af511e8c4d060e', class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), this.afFilterButtonText)), this._filteredResult &&
             this._filteredResult.map((item, index) => {
                 return (h("li", { class: "digi-form-select-filter__item", key: index, dir: item.dir, lang: item.lang, "aria-checked": this.isSelected(item.value) ? 'true' : 'false', role: this.afMultipleItems ? 'checkbox' : 'radio', "aria-required": this.afMultipleItems
                         ? 'false'
@@ -558,9 +595,9 @@ const FormSelectFilter = /*@__PURE__*/ proxyCustomElement(class FormSelectFilter
                         : index === 0
                             ? 0
                             : -1 }, this.isSelected(item.value) && (h("digi-icon-check", { class: "digi-form-select-filter__item__icon", "aria-hidden": 'true' })), item.label));
-            }))))), this.afMultipleItems && (h("div", { key: '428fecfda65ca5dab87d15049010462f38bf49f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: 'e8ed222dada0ef4e78d3d66062c7d432e5231671', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: 'd151b5df0a4002633e0966d44d0482183b7ecfe5', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: '207d29e920ec9db9aa2f2ba29bd650453210e8b3', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
+            }))))), this.afMultipleItems && (h("div", { key: 'f94a71fb292baf936c9358e33316f1ee93ce37f3', class: "digi-form-select-filter__footer" }, !this.afHideResetButton && (h("digi-button", { key: '305beb8e5f817d46d5f7b5364e4125c101cbaed5', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.resetSelectItems(), class: "digi-form-select-filter__reset-button" }, this.afResetButtonText)), h("digi-util-keydown-handler", { key: '3bf7f1f1bcd2a4e07fd900ba4b6377decc617cd7', onAfOnUp: () => this.setFocusItem() }, h("digi-button", { key: 'eaa1389239c8b5e93ecac2ed2f6ed09fcda81863', ref: (el) => (this._submitButton = el), "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => {
                 this.setClosed(true);
-            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '514a8e6c957b4293f095b0718139ac47e64648ab', class: "digi-form-select__footer" }, h("div", { key: '3b5ceffdcbf3f1fd4671bc73fdea48a573cd0379', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: 'faab034ee053826ebd82fda81273d0f815b648ec', "af-variation": this.afValidation }, this.afValidationText)))))));
+            }, class: "digi-form-select-filter__submit-button" }, this.afSubmitButtonText)))))), h("div", { key: '213a685ba0d080e873721d526c1517e62f1779be', class: "digi-form-select__footer" }, h("div", { key: '81b470b19af8e472e50a789a6116448b8204359e', "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.showValidation() && (h("digi-form-validation-message", { key: '457f29208d032eb29e7bb94c9db9fb9634866524', "af-variation": this.afValidation }, this.afValidationText)))))));
     }
     get hostElement() { return this; }
     static get watchers() { return {