@siemens/ix 4.4.0 → 5.1.0

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

@@ -14,58 +14,131 @@ import { addDisposableEventListener, } from "../utils/disposable-event-listener"
 import { makeRef } from "../utils/make-ref";
 import { InputState } from "./input-state";
 import { LogicalFilterOperator } from "./logical-filter-operator";
+import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
 export class CategoryFilter {
-    constructor() {
-        this.ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';
-        this.textInput = makeRef();
-        this.showDropdown = false;
-        this.hasFocus = false;
-        this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;
-        this.inputValue = '';
-        this.category = '';
-        this.filterTokens = [];
-        /**
-         * If true the filter will be in disabled state
-         */
-        this.disabled = false;
-        /**
-         * If true the filter will be in readonly mode
-         */
-        this.readonly = false;
-        /**
-         * In certain use cases some categories may not be available for selection anymore.
-         * To allow proper display of set filters with these categories this ID to label mapping can be populated.
-         *
-         * Configuration object hash used to supply labels to the filter chips in the input field.
-         * Each ID maps to a string representing the label to display.
-         */
-        this.nonSelectableCategories = {};
-        /**
-         * Allows to hide the icon inside the text input.
-         * Defaults to false
-         */
-        this.hideIcon = false;
-        /**
-         * If set to true, prevents that a single category can be set more than once.
-         * An already set category will not appear in the category dropdown if set to true.
-         */
-        this.uniqueCategories = false;
-        /**
-         * i18n
-         */
-        this.labelCategories = 'Categories';
-        /**
-         * i18n label for 'Filter by text'
-         */
-        this.i18nPlainText = 'Filter by text';
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-    }
+    ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';
+    formKeyDownListener;
+    preventDefaultListener;
+    inputKeyDownListener;
+    focusInListener;
+    focusOutListener;
+    inputListener;
+    textInput = makeRef();
+    formElement;
+    isScrollStateDirty;
+    a11yAttributes;
+    hostElement;
+    showDropdown = false;
+    hasFocus = false;
+    categoryLogicalOperator = LogicalFilterOperator.EQUAL;
+    inputValue = '';
+    category = '';
+    filterTokens = [];
+    /**
+     * If true the filter will be in disabled state
+     */
+    disabled = false;
+    /**
+     * If true the filter will be in readonly mode
+     */
+    readonly = false;
+    /**
+     * A set of search criteria to populate the component with.
+     */
+    filterState;
+    /**
+     * Placeholder text to be displayed in an empty input field.
+     */
+    placeholder;
+    /**
+     * Configuration object hash used to populate the dropdown menu for type-ahead and quick selection functionality.
+     * Each ID maps to an object with a label and an array of options to select from.
+     */
+    categories;
+    /**
+     * In certain use cases some categories may not be available for selection anymore.
+     * To allow proper display of set filters with these categories this ID to label mapping can be populated.
+     *
+     * Configuration object hash used to supply labels to the filter chips in the input field.
+     * Each ID maps to a string representing the label to display.
+     */
+    nonSelectableCategories = {};
+    /**
+     * A list of strings that will be supplied as type-ahead suggestions not tied to any categories.
+     */
+    suggestions;
+    /**
+     * The icon next to the actual text input
+     * Defaults to 'search'
+     */
+    icon;
+    /**
+     * Allows to hide the icon inside the text input.
+     * Defaults to false
+     */
+    hideIcon = false;
+    /**
+     * If set categories will always be filtered via the respective logical operator.
+     * Toggling of the operator will not be available to the user.
+     */
+    staticOperator;
+    /**
+     * If set to true, prevents that a single category can be set more than once.
+     * An already set category will not appear in the category dropdown if set to true.
+     */
+    uniqueCategories = false;
+    /**
+     * i18n
+     */
+    labelCategories = 'Categories';
+    /**
+     * i18n label for 'Filter by text'
+     */
+    i18nPlainText = 'Filter by text';
+    /**
+     * ARIA label for the reset button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelResetButton;
+    /**
+     * ARIA label for the operator button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelOperatorButton;
+    /**
+     * ARIA label for the filter input
+     * Will be set as aria-label on the nested HTML input element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelFilterInput;
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Event dispatched whenever a category gets selected in the dropdown
+     */
+    categoryChanged;
+    /**
+     * Event dispatched whenever the text input changes.
+     */
+    inputChanged;
+    /**
+     * Event dispatched whenever the filter state changes.
+     */
+    filterChanged;
+    /**
+     * Event dispatched whenever the filter gets cleared.
+     */
+    filterCleared;
     get dropdown() {
         return this.hostElement.shadowRoot.querySelector('ix-dropdown');
     }
@@ -82,11 +155,10 @@ export class CategoryFilter {
         this.hasFocus = false;
     }
     onInput() {
-        var _a, _b, _c, _d;
-        this.inputValue = (_c = (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : '';
+        this.inputValue = this.textInput?.current?.value ?? '';
         const inputState = new InputState(this.inputValue, this.category);
         this.inputChanged.emit(inputState);
-        if (!((_d = this.dropdown) === null || _d === void 0 ? void 0 : _d.show)) {
+        if (!this.dropdown?.show) {
             this.openDropdown();
         }
     }
@@ -94,7 +166,6 @@ export class CategoryFilter {
         this.a11yAttributes = a11yHostAttributes(this.hostElement);
     }
     componentDidLoad() {
-        var _a;
         setTimeout(() => {
             if (this.filterState !== undefined) {
                 this.setFilterState(this.filterState);
@@ -104,7 +175,7 @@ export class CategoryFilter {
             this.formKeyDownListener = addDisposableEventListener(this.formElement, 'keydown', ((e) => this.handleFormElementKeyDown(e)));
             this.preventDefaultListener = addDisposableEventListener(this.formElement, 'submit', this.preventDefault);
         }
-        if (((_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) == null) {
+        if (this.textInput?.current == null) {
             console.warn('ix-category-filter - unable to add event listeners to native input element');
             return;
         }
@@ -140,11 +211,10 @@ export class CategoryFilter {
         }
     }
     handleFormElementKeyDown(e) {
-        var _a, _b, _c;
         switch (e.code) {
             case 'Enter':
             case 'NumpadEnter':
-                if (!((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains('dropdown-item'))) {
+                if (!document.activeElement?.classList.contains('dropdown-item')) {
                     return;
                 }
                 const token = document.activeElement.getAttribute('data-id');
@@ -154,7 +224,7 @@ export class CategoryFilter {
                 if (this.hasCategorySelection()) {
                     if (this.category !== '') {
                         this.addToken(token, this.category);
-                        (_c = (_b = this.textInput) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
+                        this.textInput?.current?.focus();
                     }
                     else if (document.activeElement.classList.contains('category-item-id')) {
                         this.selectCategory(token);
@@ -180,15 +250,13 @@ export class CategoryFilter {
         }
     }
     focusPreviousItem() {
-        var _a;
-        const sibling = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.previousSibling;
+        const sibling = document.activeElement?.previousSibling;
         if (sibling instanceof HTMLElement) {
             sibling.focus();
         }
     }
     focusNextItem() {
-        var _a;
-        const sibling = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.nextSibling;
+        const sibling = document.activeElement?.nextSibling;
         if (sibling instanceof HTMLElement) {
             sibling.focus();
         }
@@ -202,26 +270,31 @@ export class CategoryFilter {
         return false;
     }
     onArrowDown(e) {
-        var _a;
         const baseSelector = `.category-item-${this.category !== '' ? 'value' : 'id'}`;
         const fallbackSelector = '.category-item';
+        if (!this.dropdown?.show) {
+            this.openDropdown();
+            requestAnimationFrameNoNgZone(() => this.focusElement('.dropdown-item'));
+            e.stopPropagation();
+            e.preventDefault();
+            return;
+        }
         if (this.focusElement(baseSelector)) {
             e.stopPropagation();
             return;
         }
-        if (((_a = this.suggestions) === null || _a === void 0 ? void 0 : _a.length) && this.focusElement(fallbackSelector)) {
+        if (this.suggestions?.length && this.focusElement(fallbackSelector)) {
             e.stopPropagation();
         }
     }
     handleInputElementKeyDown(e) {
-        var _a, _b;
         switch (e.code) {
             case 'ArrowDown': {
                 this.onArrowDown(e);
                 break;
             }
             case 'Backspace':
-                if (((_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.value) !== '') {
+                if (this.textInput?.current?.value !== '') {
                     return;
                 }
                 if (this.category !== '') {
@@ -252,7 +325,6 @@ export class CategoryFilter {
         this.filterChanged.emit(filterState);
     }
     addToken(token, category = this.ID_CUSTOM_FILTER_VALUE, operator = this.categoryLogicalOperator, emitEvent = true) {
-        var _a;
         if (token === undefined || token === null) {
             return;
         }
@@ -265,7 +337,7 @@ export class CategoryFilter {
         }
         const pair = { id: category, value: newToken, operator };
         this.filterTokens = [...this.filterTokens, pair];
-        if ((_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) {
+        if (this.textInput?.current) {
             this.textInput.current.value = '';
         }
         this.inputValue = '';
@@ -292,13 +364,12 @@ export class CategoryFilter {
         return ids;
     }
     selectCategory(category) {
-        var _a, _b, _c;
         this.category = category;
-        if ((_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) {
+        if (this.textInput?.current) {
             this.textInput.current.value = '';
         }
         this.inputValue = '';
-        (_c = (_b = this.textInput) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.focus();
+        this.textInput?.current?.focus();
         this.categoryChanged.emit(category);
     }
     resetFilter(e) {
@@ -357,29 +428,30 @@ export class CategoryFilter {
         }
     }
     getFilterChipLabel(value) {
-        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 = (_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;
+        const label = this.categories?.[value.id]?.label ??
+            this.nonSelectableCategories?.[value.id] ??
+            value.id;
         return `${label} ${operatorString} ${value.value}`;
     }
     getFilteredSuggestions() {
-        var _a, _b;
-        if (!((_a = this.suggestions) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (!this.suggestions?.length) {
             return [];
         }
-        return (_b = this.suggestions) === null || _b === void 0 ? void 0 : _b.filter((value) => this.filterByInput(value)).filter((value) => this.filterDuplicateTokens(value));
+        return this.suggestions
+            ?.filter((value) => this.filterByInput(value))
+            .filter((value) => this.filterDuplicateTokens(value));
     }
     hasCategorySelection() {
         return this.categories !== undefined;
     }
     renderPlainSuggestions() {
         return (h("div", { class: "dropdown-item-container" }, this.getFilteredSuggestions().map((suggestion) => (h("button", { class: "dropdown-item", "data-id": suggestion, onClick: () => {
-                var _a, _b;
                 this.addToken(suggestion);
-                (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
+                this.textInput?.current?.focus();
             }, key: suggestion, title: suggestion }, suggestion)))));
     }
     renderOperatorButton() {
@@ -405,7 +477,7 @@ export class CategoryFilter {
             },
             ariaAttributes: { 'aria-label': this.ariaLabelOperatorButton },
         };
-        return (h(BaseButton, Object.assign({}, params), this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL
+        return (h(BaseButton, { ...params }, this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL
             ? '='
             : '!='));
     }
@@ -420,17 +492,17 @@ export class CategoryFilter {
         return `${operator === LogicalFilterOperator.EQUAL ? '=' : '!='} `;
     }
     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) => {
-                    var _a, _b;
-                    e.preventDefault();
-                    this.addToken(id, this.category);
-                    (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
-                } }, `${this.getFilterOperatorString()} ${id}`)))));
+        return (h("div", { class: "dropdown-item-container" }, this.renderOperatorButton(), h("div", { class: "dropdown-header" }, this.categories[this.category]?.label), this.categories[this.category]?.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();
+                this.addToken(id, this.category);
+                this.textInput?.current?.focus();
+            } }, `${this.getFilterOperatorString()} ${id}`)))));
     }
     renderDropdownContent() {
         if (this.hasCategorySelection()) {
@@ -445,14 +517,13 @@ export class CategoryFilter {
             return this.renderPlainSuggestions();
     }
     renderCategorySelection() {
-        var _a;
-        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" }, (_d = (_c = this.categories) === null || _c === void 0 ? void 0 : _c[id]) === null || _d === void 0 ? void 0 : _d.label));
-        })));
+        return (h("div", { class: "dropdown-item-container" }, this.getCategoryIds()
+            ?.filter((id) => this.categories && this.filterByInput(this.categories[id].label))
+            .filter((id) => this.filterMultiples(id))
+            .map((id) => (h("button", { class: "dropdown-item category-item category-item-id", "data-id": id, title: this.categories?.[id]?.label, key: id, onClick: (e) => {
+                e.preventDefault();
+                this.selectCategory(id);
+            }, tabindex: "0" }, this.categories?.[id]?.label)))));
     }
     getDropdownHeader() {
         if (this.categories !== undefined) {
@@ -466,14 +537,12 @@ export class CategoryFilter {
         return this.i18nPlainText;
     }
     componentDidRender() {
-        var _a, _b;
         if (this.isScrollStateDirty) {
-            (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
+            this.textInput?.current?.scrollIntoView();
             this.isScrollStateDirty = false;
         }
     }
     disconnectedCallback() {
-        var _a;
         if (this.preventDefaultListener) {
             this.preventDefaultListener();
         }
@@ -481,7 +550,7 @@ export class CategoryFilter {
             this.formKeyDownListener();
         }
         if (this.inputKeyDownListener) {
-            (_a = this.inputKeyDownListener) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.inputKeyDownListener?.();
         }
         if (this.focusInListener) {
             this.focusInListener();
@@ -509,23 +578,22 @@ export class CategoryFilter {
         return 'color-primary';
     }
     render() {
-        var _a, _b, _c;
-        return (h(Host, { key: 'c9e7bdba1b9a6c9c368ff11d40ccf41883cc7d6d' }, h("form", { key: '1201a3a234a4c1c49f7897f1461dc9dcc7974c08', ref: (el) => (this.formElement = el) }, h("div", { key: 'f6330fac3e425656ec2e3c1511edd822c091829e', "read-only": this.readonly, class: {
+        return (h(Host, { key: '85dbdb78b8e91f24bd024a7f807981c1be021949' }, h("form", { key: 'c7bbb49d432f280a07decbe120f73d6c797d8cc7', ref: (el) => (this.formElement = el) }, h("div", { key: '0564d4922c264f58cdbd27da56913b09fc7ab9a5', "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: 'dd3ba3a48b05fc1ac46e631c133fc58c0bd8b5bc', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), h("div", { key: 'cb89410ee85d600ba5eb8708f635f1fb7324673d', class: "token-container" }, h("div", { key: 'b8b053df9ef5d6ac9db6a0e0c39d231943f7a96e', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: '3807f9bee30d44bcca3a8aefda6889958f5fa781', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: this.icon ?? iconSearch, size: "16" }), h("div", { key: 'eee8f5b467efe653a186361cd6db76a6a92bdb15', class: "token-container" }, h("div", { key: 'd82c1963974f8213fab1b90473d8f0c883306281', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { 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("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), h("input", Object.assign({ key: 'e589a93dc007d179d555e65fe655bb89d37f9e0a', class: {
+            } }, this.categories[this.category]?.label)), h("input", { key: 'bb6d42b5691fa761ed9f8196edce521e5e5e04aa', class: {
                 'text-input': true,
                 '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.a11yAttributes, { "aria-label": this.ariaLabelFilterInput })))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader(), enableTopLayer: this.enableTopLayer }, this.renderDropdownContent()))));
+            }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder, ...this.a11yAttributes, "aria-label": this.ariaLabelFilterInput }))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: this.textInput?.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader(), enableTopLayer: this.enableTopLayer }, this.renderDropdownContent()))));
     }
     static get is() { return "ix-category-filter"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 export class FilterState {
-    constructor() {
-        this.tokens = [];
-        this.categories = [];
-    }
+    tokens = [];
+    categories = [];
 }

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

@@ -7,6 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 export class InputState {
+    token;
+    category;
     hasCategory() {
         return this.category !== undefined;
     }

package/dist/collection/components/checkbox/checkbox.css

@@ -74,6 +74,14 @@
 :host ::-webkit-scrollbar-corner {
   display: none;
 }
+:host .checkbox-button {
+  height: 1.5rem;
+  width: 1.5rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 :host button {
   all: unset;
   display: inline-flex;
@@ -86,7 +94,6 @@
   height: 1.125rem;
   min-height: 1.125rem;
   max-height: 1.125rem;
-  margin-right: 0.5rem;
 }
 :host button:disabled {
   background-color: var(--theme-checkbox-unchecked--background--disabled);
@@ -102,12 +109,15 @@
 :host label {
   display: flex;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
+  gap: var(--theme-space-0);
   width: 100%;
   height: 100%;
+  cursor: pointer;
 }
-:host ix-typography {
-  margin-top: 0.125rem;
+
+:host(.label-less) ix-typography {
+  display: none;
 }
 
 :host button {