@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1522-20241021144048

package/dist/collection/components/category-filter/category-filter.js

@@ -10,15 +10,17 @@ import { h, Host, } from "@stencil/core";
 import { BaseButton } from "../button/base-button";
 import { InputState } from "./input-state";
 import { LogicalFilterOperator } from "./logical-filter-operator";
+import { makeRef } from "../utils/make-ref";
+import { addDisposableEventListener, } from "../utils/disposable-event-listener";
 export class CategoryFilter {
     constructor() {
         this.ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';
-        this.showDropdown = undefined;
-        this.textInput = undefined;
-        this.hasFocus = undefined;
+        this.textInput = makeRef();
+        this.showDropdown = false;
+        this.hasFocus = false;
         this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
-        this.inputValue = undefined;
-        this.category = undefined;
+        this.inputValue = '';
+        this.category = '';
         this.filterTokens = [];
         this.disabled = false;
         this.readonly = false;
@@ -28,7 +30,7 @@ export class CategoryFilter {
         this.nonSelectableCategories = {};
         this.suggestions = undefined;
         this.icon = 'search';
-        this.hideIcon = undefined;
+        this.hideIcon = false;
         this.staticOperator = undefined;
         this.repeatCategories = true;
         this.tmpDisableScrollIntoView = true;
@@ -36,35 +38,49 @@ export class CategoryFilter {
         this.i18nPlainText = 'Filter by text';
     }
     get dropdown() {
-        return this.hostElement.shadowRoot.querySelector('ix-dropdown');
+        var _a;
+        return (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-dropdown');
     }
     watchFilterState(newValue) {
         this.setFilterState(newValue);
     }
+    preventDefault(e) {
+        e.preventDefault();
+    }
+    onFocusIn() {
+        this.hasFocus = true;
+    }
+    onFocusOut() {
+        this.hasFocus = false;
+    }
+    onInput() {
+        var _a, _b, _c;
+        this.inputValue = ((_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.value) || '';
+        const inputState = new InputState(this.inputValue, this.category);
+        this.inputChanged.emit(inputState);
+        if (!((_c = this.dropdown) === null || _c === void 0 ? void 0 : _c.show)) {
+            this.openDropdown();
+        }
+    }
     componentDidLoad() {
-        var _a, _b;
-        if (this.filterState !== undefined) {
-            setTimeout(() => this.setFilterState(this.filterState));
+        var _a;
+        setTimeout(() => {
+            if (this.filterState !== undefined) {
+                this.setFilterState(this.filterState);
+            }
+        });
+        if (this.formElement !== undefined) {
+            this.formKeyDownListener = addDisposableEventListener(this.formElement, 'keydown', () => this.handleFormElementKeyDown);
+            this.preventDefaultListener = addDisposableEventListener(this.formElement, 'submit', this.preventDefault);
         }
-        (_a = this.hostElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', this.handleFormElementKeyDown.bind(this));
-        (_b = this.formElement) === null || _b === void 0 ? void 0 : _b.addEventListener('submit', (e) => e.preventDefault());
-        if (this.textInput == null) {
+        if (((_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) == null) {
             console.warn('ix-category-filter - unable to add event listeners to native input element');
             return;
         }
-        this.textInput.addEventListener('focusin', () => {
-            this.hasFocus = true;
-        });
-        this.textInput.addEventListener('focusout', () => (this.hasFocus = false));
-        this.textInput.addEventListener('input', () => {
-            this.inputValue = this.textInput.value;
-            const inputState = new InputState(this.inputValue, this.category);
-            this.inputChanged.emit(inputState);
-            if (!this.dropdown.show) {
-                this.openDropdown();
-            }
-        });
-        this.textInput.addEventListener('keydown', this.handleInputElementKeyDown.bind(this));
+        this.inputKeyDownListener = addDisposableEventListener(this.textInput.current, 'keydown', () => this.handleInputElementKeyDown);
+        this.focusInListener = addDisposableEventListener(this.textInput.current, 'focusin', () => this.onFocusIn());
+        this.focusOutListener = addDisposableEventListener(this.textInput.current, 'focusout', () => this.onFocusOut());
+        this.inputListener = addDisposableEventListener(this.textInput.current, 'input', () => this.onInput());
     }
     setFilterState(state) {
         this.filterTokens = [];
@@ -80,24 +96,32 @@ export class CategoryFilter {
         if (this.disabled || this.readonly) {
             return;
         }
-        this.dropdown.show = false;
+        if (this.dropdown) {
+            this.dropdown.show = false;
+        }
     }
     openDropdown() {
         if (this.disabled || this.readonly) {
             return;
         }
-        this.dropdown.show = true;
+        if (this.dropdown) {
+            this.dropdown.show = true;
+        }
     }
     handleFormElementKeyDown(e) {
+        var _a;
         switch (e.code) {
             case 'Enter':
             case 'NumpadEnter':
-                if (!document.activeElement.classList.contains('dropdown-item')) {
+                if (!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains('dropdown-item'))) {
                     return;
                 }
                 const token = document.activeElement.getAttribute('data-id');
+                if (token === null) {
+                    break;
+                }
                 if (this.hasCategorySelection()) {
-                    if (this.category !== undefined) {
+                    if (this.category !== '') {
                         this.addToken(token, this.category);
                     }
                     else if (document.activeElement.classList.contains('category-item-id')) {
@@ -124,41 +148,44 @@ export class CategoryFilter {
         }
     }
     focusPreviousItem() {
-        const sibling = document.activeElement.previousSibling;
+        var _a;
+        const sibling = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.previousSibling;
         if (sibling instanceof HTMLElement) {
             sibling.focus();
         }
     }
     focusNextItem() {
-        const sibling = document.activeElement.nextSibling;
+        var _a;
+        const sibling = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.nextSibling;
         if (sibling instanceof HTMLElement) {
             sibling.focus();
         }
     }
     handleInputElementKeyDown(e) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         switch (e.code) {
-            case 'ArrowDown':
-                const selector = `.category-item-${this.category !== undefined ? 'value' : 'id'}`;
-                let item = this.hostElement.shadowRoot.querySelector(selector);
+            case 'ArrowDown': {
+                const selector = `.category-item-${this.category !== '' ? 'value' : 'id'}`;
+                let item = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector);
                 if (item instanceof HTMLElement) {
                     item.focus();
                     e.stopPropagation();
                 }
-                else if ((_a = this.suggestions) === null || _a === void 0 ? void 0 : _a.length) {
-                    item = this.hostElement.shadowRoot.querySelector('.category-item');
+                else if ((_b = this.suggestions) === null || _b === void 0 ? void 0 : _b.length) {
+                    item = (_c = this.hostElement.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.category-item');
                     if (item instanceof HTMLElement) {
                         item.focus();
                         e.stopPropagation();
                     }
                 }
                 break;
+            }
             case 'Backspace':
-                if (this.textInput.value !== '') {
+                if (((_e = (_d = this.textInput) === null || _d === void 0 ? void 0 : _d.current) === null || _e === void 0 ? void 0 : _e.value) !== '') {
                     return;
                 }
-                if (this.category !== undefined) {
-                    this.category = undefined;
+                if (this.category !== '') {
+                    this.category = '';
                     return;
                 }
                 const tokenCount = this.filterTokens.length;
@@ -185,6 +212,7 @@ export class CategoryFilter {
         this.filterChanged.emit(filterState);
     }
     addToken(token, category = this.ID_CUSTOM_FILTER_VALUE, operator = this.categoryLogicalOperator, emitEvent = true) {
+        var _a, _b, _c;
         if (token === undefined || token === null) {
             return;
         }
@@ -197,14 +225,16 @@ export class CategoryFilter {
         }
         const pair = { id: category, value: newToken, operator };
         this.filterTokens = [...this.filterTokens, pair];
-        this.textInput.value = '';
+        if ((_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) {
+            this.textInput.current.value = '';
+        }
         this.inputValue = '';
         this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
-        if (this.category !== undefined) {
-            this.category = undefined;
+        if (this.category !== '') {
+            this.category = '';
         }
         this.isScrollStateDirty = true;
-        this.textInput.focus();
+        (_c = (_b = this.textInput) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
         if (emitEvent) {
             this.emitFilterEvent();
         }
@@ -223,16 +253,23 @@ export class CategoryFilter {
         return ids;
     }
     selectCategory(category) {
+        var _a, _b, _c;
         this.category = category;
-        this.textInput.value = '';
+        if ((_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) {
+            this.textInput.current.value = '';
+        }
         this.inputValue = '';
-        this.textInput.focus();
+        (_c = (_b = this.textInput) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
         this.categoryChanged.emit(category);
     }
     resetFilter(e) {
         e.stopPropagation();
         this.closeDropdown();
         this.filterTokens = [];
+        if (this.category) {
+            this.category = '';
+            this.categoryChanged.emit(undefined);
+        }
         this.emitFilterEvent();
     }
     filterMultiples(value) {
@@ -248,7 +285,7 @@ export class CategoryFilter {
             if (!hasSameValue) {
                 return false;
             }
-            if (this.category !== undefined) {
+            if (this.category !== '') {
                 return this.category === filterToken.id;
             }
             if (filterToken.id) {
@@ -277,12 +314,12 @@ export class CategoryFilter {
         }
     }
     getFilterChipLabel(value) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         if (value.id === this.ID_CUSTOM_FILTER_VALUE) {
             return value.value;
         }
         const operatorString = value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';
-        const label = (_c = (_b = (_a = this.categories[value.id]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.nonSelectableCategories[value.id]) !== null && _c !== void 0 ? _c : value.id;
+        const label = (_e = (_c = (_b = (_a = this.categories) === null || _a === void 0 ? void 0 : _a[value.id]) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : (_d = this.nonSelectableCategories) === null || _d === void 0 ? void 0 : _d[value.id]) !== null && _e !== void 0 ? _e : value.id;
         return `${label} ${operatorString} ${value.value}`;
     }
     getFilteredSuggestions() {
@@ -338,6 +375,9 @@ export class CategoryFilter {
     }
     renderCategoryValues() {
         var _a, _b;
+        if (this.categories === undefined) {
+            return;
+        }
         return (h("div", { class: "dropdown-item-container" }, this.renderOperatorButton(), h("div", { class: "dropdown-header" }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label), (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 :
             _b.options.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value)).map((id) => (h("button", { class: "dropdown-item category-item-value", "data-id": id, title: id, key: id, onClick: (e) => {
                     e.preventDefault();
@@ -346,7 +386,7 @@ export class CategoryFilter {
     }
     renderDropdownContent() {
         if (this.hasCategorySelection()) {
-            if (this.category !== undefined) {
+            if (this.category !== '') {
                 return this.renderCategoryValues();
             }
             else {
@@ -358,18 +398,18 @@ export class CategoryFilter {
     }
     renderCategorySelection() {
         var _a;
-        return (h("div", { class: "dropdown-item-container" }, (_a = this.getCategoryIds()) === null || _a === void 0 ? void 0 : _a.filter((id) => this.filterByInput(this.categories[id].label)).filter((id) => this.filterMultiples(id)).map((id) => {
-            var _a;
-            return (h("button", { class: "dropdown-item category-item category-item-id", "data-id": id, title: this.categories[id].label, key: id, onClick: (e) => {
+        return (h("div", { class: "dropdown-item-container" }, (_a = this.getCategoryIds()) === null || _a === void 0 ? void 0 : _a.filter((id) => this.categories && this.filterByInput(this.categories[id].label)).filter((id) => this.filterMultiples(id)).map((id) => {
+            var _a, _b, _c, _d;
+            return (h("button", { class: "dropdown-item category-item category-item-id", "data-id": id, title: (_b = (_a = this.categories) === null || _a === void 0 ? void 0 : _a[id]) === null || _b === void 0 ? void 0 : _b.label, key: id, onClick: (e) => {
                     e.preventDefault();
                     this.selectCategory(id);
-                }, tabindex: "0" }, (_a = this.categories[id]) === null || _a === void 0 ? void 0 : _a.label));
+                }, tabindex: "0" }, (_d = (_c = this.categories) === null || _c === void 0 ? void 0 : _c[id]) === null || _d === void 0 ? void 0 : _d.label));
         })));
     }
     getDropdownHeader() {
         if (this.categories !== undefined) {
-            if (this.category !== undefined) {
-                return null;
+            if (this.category !== '') {
+                return undefined;
             }
             else {
                 return this.labelCategories;
@@ -378,17 +418,39 @@ export class CategoryFilter {
         return this.i18nPlainText;
     }
     componentDidRender() {
+        var _a, _b;
         if (this.isScrollStateDirty) {
             if (!this.tmpDisableScrollIntoView) {
-                this.textInput.scrollIntoView();
+                (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
             }
             this.isScrollStateDirty = false;
         }
     }
+    disconnectedCallback() {
+        var _a;
+        if (this.preventDefaultListener) {
+            this.preventDefaultListener();
+        }
+        if (this.formKeyDownListener) {
+            this.formKeyDownListener();
+        }
+        if (this.inputKeyDownListener) {
+            (_a = this.inputKeyDownListener) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
+        if (this.focusInListener) {
+            this.focusInListener();
+        }
+        if (this.focusOutListener) {
+            this.focusOutListener();
+        }
+        if (this.inputListener) {
+            this.inputListener();
+        }
+    }
     getResetButton() {
         return (h("ix-icon-button", { onClick: (e) => this.resetFilter(e), class: {
                 'reset-button': true,
-                'hide-reset-button': !this.filterTokens.length && this.category === undefined,
+                'hide-reset-button': !this.filterTokens.length && this.category === '',
             }, ghost: true, oval: true, icon: 'clear', size: "16" }));
     }
     getIconColor() {
@@ -401,25 +463,23 @@ export class CategoryFilter {
         return 'color-primary';
     }
     render() {
-        var _a;
-        return (h(Host, { key: '97bb9bcad06d6a787b844f74a4333c231761d0aa' }, h("form", { key: '8f26df740ee486e72227861241373fdccaed5b83', ref: (el) => (this.formElement = el) }, h("div", { key: '0a15103e3758ef442af9e5cdcb193ccf428ab588', "read-only": this.readonly, class: {
+        var _a, _b;
+        return (h(Host, { key: '117b88e7312b813cef3e5ce68e492e65d6d56712' }, h("form", { key: 'f5d64b9d52dc403cd1e9caf67b91a675dee3224a', ref: (el) => (this.formElement = el) }, h("div", { key: 'd81f396962aee7643f9ced29245a36b795119af8', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: 'bcf843c92c0cb07f4882e154f22beb5b9d585155', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: '8f8873087dd4f858d8c05524fa57e60630e455fa', class: "token-container" }, h("ul", { key: 'ac256e8c54bee74655b96e30f7ff01867185f2b7', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: '5779f4cc334d586173c441de44f3f5696bc6914e', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: '7e0565e27b33d1c2aee4dffbc851a22e4b88afae', class: "token-container" }, h("ul", { key: 'b1f56c791383fea6c9550d805f99808715d09860', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("li", { class: {
                 'category-preview': true,
-                'd-none': this.category === undefined,
-            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '58e035c5bf86c7a4f7cc01e1975a13beaa67ef45', class: {
+                'd-none': this.category === '',
+            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '2899c3527736cae51df874d5cb96a51ac9d1c596', class: {
                 'text-input': true,
-                'hide-placeholder': this.readonly ||
-                    this.disabled ||
-                    this.category !== undefined,
-            }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: (el) => (this.textInput = el), type: "text", placeholder: this.placeholder }))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: this.textInput, trigger: this.hostElement, header: this.getDropdownHeader() }, this.renderDropdownContent()))));
+                'hide-placeholder': this.readonly || this.disabled || this.category !== '',
+            }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_b = this.textInput) === null || _b === void 0 ? void 0 : _b.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader() }, this.renderDropdownContent()))));
     }
     static get is() { return "ix-category-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -486,7 +546,7 @@ export class CategoryFilter {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "A set of search criteria to populate the component with."
@@ -501,7 +561,7 @@ export class CategoryFilter {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Placeholder text to be displayed in an empty input field."
@@ -518,10 +578,10 @@ export class CategoryFilter {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\nEach ID maps to an object with a label and an array of options to select from."
+                    "text": "Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality.\nEach ID maps to an object with a label and an array of options to select from."
                 }
             },
             "nonSelectableCategories": {
@@ -549,10 +609,10 @@ export class CategoryFilter {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A list of strings that will be supplied as typeahead suggestions not tied to any categories."
+                    "text": "A list of strings that will be supplied as type-ahead suggestions not tied to any categories."
                 }
             },
             "icon": {
@@ -588,7 +648,8 @@ export class CategoryFilter {
                     "text": "Allows to hide the icon inside the text input.\nDefaults to false"
                 },
                 "attribute": "hide-icon",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "staticOperator": {
                 "type": "string",
@@ -628,7 +689,7 @@ export class CategoryFilter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If set to true allows that a single category can be set more than once.\nAn already set category will not appear in the category dropdown if set to false.\n\nDefaults to true"
+                    "text": "If set to true, allows that a single category can be set more than once.\nAn already set category will not appear in the category dropdown if set to false.\n\nDefaults to true"
                 },
                 "attribute": "repeat-categories",
                 "reflect": false,
@@ -696,7 +757,6 @@ export class CategoryFilter {
     static get states() {
         return {
             "showDropdown": {},
-            "textInput": {},
             "hasFocus": {},
             "categoryLogicalOperator": {},
             "inputValue": {},
@@ -713,7 +773,7 @@ export class CategoryFilter {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event dispatched whenever the a category gets selected in the dropdown"
+                    "text": "Event dispatched whenever a category gets selected in the dropdown"
                 },
                 "complexType": {
                     "original": "string",