@siemens/ix 0.0.0-20240419081748 → 0.0.0-20240522073858

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

@@ -209,6 +209,187 @@
   cursor: default;
 }
 
+:host .btn-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-danger, :host .btn-danger.focus, :host .btn-danger:focus-visible {
+  background-color: var(--theme-btn-danger--background);
+  color: var(--theme-btn-danger--color);
+  --ix-button-color: var(--theme-btn-danger--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-danger--border-color);
+  border-style: solid;
+}
+:host .btn-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-danger.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger.selected:not(.disabled):not(:disabled):active, :host .btn-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger:not(.disabled):not(:disabled):hover, :host .btn-danger:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-danger--border-color--hover);
+  background-color: var(--theme-btn-danger--background--hover);
+  color: var(--theme-btn-danger--color--hover);
+}
+:host .btn-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-danger:not(.disabled):not(:disabled):active, :host .btn-danger:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-danger--border-color--active);
+  background-color: var(--theme-btn-danger--background--active);
+  color: var(--theme-btn-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-danger.disabled, :host(.disabled) .btn-danger:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-danger--border-color--disabled);
+  background-color: var(--theme-btn-danger--background--disabled);
+  color: var(--theme-btn-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-danger--color--disabled);
+}
+
+:host .btn-outline-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-outline-danger, :host .btn-outline-danger.focus, :host .btn-outline-danger:focus-visible {
+  background-color: var(--theme-btn-outline-danger--background);
+  color: var(--theme-btn-outline-danger--color);
+  --ix-button-color: var(--theme-btn-outline-danger--color);
+  border-width: var(--theme-btn--border-thickness);
+  border-color: var(--theme-btn-outline-danger--border-color);
+  border-style: solid;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-outline-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active, :host .btn-outline-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):hover, :host .btn-outline-danger:not(.disabled):not(:disabled):hover {
+  border-color: var(--theme-btn-outline-danger--border-color--hover);
+  background-color: var(--theme-btn-outline-danger--background--hover);
+  color: var(--theme-btn-outline-danger--color--hover);
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-outline-danger:not(.disabled):not(:disabled):active, :host .btn-outline-danger:not(.disabled):not(:disabled).active {
+  border-color: var(--theme-btn-outline-danger--border-color--active);
+  background-color: var(--theme-btn-outline-danger--background--active);
+  color: var(--theme-btn-outline-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-outline-danger.disabled, :host(.disabled) .btn-outline-danger:disabled {
+  pointer-events: none;
+  border-color: var(--theme-btn-outline-danger--border-color--disabled);
+  background-color: var(--theme-btn-outline-danger--background--disabled);
+  color: var(--theme-btn-outline-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-outline-danger--color--disabled);
+}
+
+:host .btn-invisible-danger {
+  border-radius: var(--theme-btn--border-radius);
+}
+:host .btn-invisible-danger, :host .btn-invisible-danger.focus, :host .btn-invisible-danger:focus-visible {
+  background-color: var(--theme-btn-invisible-danger--background);
+  color: var(--theme-btn-invisible-danger--color);
+  --ix-button-color: var(--theme-btn-invisible-danger--color);
+  border-color: transparent;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .btn-invisible-danger.selected {
+  background-color: var(--theme-color-ghost--selected);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-color-ghost--selected-hover);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active, :host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-color-ghost--selected-active);
+  color: var(--theme-color-dynamic);
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):hover, :host .btn-invisible-danger:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-btn-invisible-danger--background--hover);
+  color: var(--theme-btn-invisible-danger--color--hover);
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled) {
+  cursor: pointer;
+}
+:host .btn-invisible-danger:not(.disabled):not(:disabled):active, :host .btn-invisible-danger:not(.disabled):not(:disabled).active {
+  background-color: var(--theme-btn-invisible-danger--background--active);
+  color: var(--theme-btn-invisible-danger--color--active);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+}
+:host(.disabled) .btn-invisible-danger.disabled, :host(.disabled) .btn-invisible-danger:disabled {
+  pointer-events: none;
+  background-color: var(--theme-btn-invisible-danger--background--disabled);
+  color: var(--theme-btn-invisible-danger--color--disabled);
+  opacity: 1;
+  --ix-button-color: var(--theme-btn-invisible-danger--color--disabled);
+}
+
 :host .btn-primary {
   border-radius: var(--theme-btn--border-radius);
 }
@@ -999,7 +1180,7 @@ label.label-alignment-left {
   padding: 6px 0px;
 }
 
-input, input:-webkit-autofill {
+input {
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
   font-style: normal;
@@ -1021,9 +1202,18 @@ input, input:-webkit-autofill {
   box-shadow: var(--theme-input--box-shadow);
 }
 input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
-  -webkit-text-fill-color: var(--theme-input--color) !important;
-  border-color: var(--theme-input--border-color) !important;
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+input:-webkit-autofill, input:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
 }
 input::-moz-placeholder {
   color: var(--theme-input-hint--color);
@@ -1032,13 +1222,13 @@ input::placeholder {
   color: var(--theme-input-hint--color);
 }
 input.hover, input:hover {
-  border-color: var(--theme-input--border-color--hover);
+  border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
 input.focus, input:focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus);
+  border-color: var(--theme-input--border-color--focus) !important;
 }
 input:-moz-read-only {
   box-shadow: none;
@@ -1091,7 +1281,7 @@ textarea {
   height: 3.25rem;
   padding: 0.375rem 1.25rem 0.375rem 0.5rem;
 }
-textarea, textarea:-webkit-autofill {
+textarea {
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
   font-style: normal;
@@ -1113,9 +1303,18 @@ textarea, textarea:-webkit-autofill {
   box-shadow: var(--theme-input--box-shadow);
 }
 textarea:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
-  -webkit-text-fill-color: var(--theme-input--color) !important;
-  border-color: var(--theme-input--border-color) !important;
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+textarea:-webkit-autofill, textarea:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
 }
 textarea::-moz-placeholder {
   color: var(--theme-input-hint--color);
@@ -1124,13 +1323,13 @@ textarea::placeholder {
   color: var(--theme-input-hint--color);
 }
 textarea.hover, textarea:hover {
-  border-color: var(--theme-input--border-color--hover);
+  border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
 textarea.focus, textarea:focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus);
+  border-color: var(--theme-input--border-color--focus) !important;
 }
 textarea:-moz-read-only {
   box-shadow: none;
@@ -1283,7 +1482,7 @@ form:not(.was-validated) .valid-feedback {
   max-height: 3.75rem;
   padding: 1px 1.5rem 1px 1.75rem !important;
 }
-:host .input-container:not(.readonly):not(.disabled), :host .input-container:not(.readonly):not(.disabled):-webkit-autofill {
+:host .input-container:not(.readonly):not(.disabled) {
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
   font-style: normal;
@@ -1305,9 +1504,18 @@ form:not(.was-validated) .valid-feedback {
   box-shadow: var(--theme-input--box-shadow);
 }
 :host .input-container:not(.readonly):not(.disabled):-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
-  -webkit-text-fill-color: var(--theme-input--color) !important;
-  border-color: var(--theme-input--border-color) !important;
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container:not(.readonly):not(.disabled):-webkit-autofill, :host .input-container:not(.readonly):not(.disabled):autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
 }
 :host .input-container:not(.readonly):not(.disabled)::-moz-placeholder {
   color: var(--theme-input-hint--color);
@@ -1316,13 +1524,13 @@ form:not(.was-validated) .valid-feedback {
   color: var(--theme-input-hint--color);
 }
 :host .input-container:not(.readonly):not(.disabled).hover, :host .input-container:not(.readonly):not(.disabled):hover {
-  border-color: var(--theme-input--border-color--hover);
+  border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
 :host .input-container:not(.readonly):not(.disabled).focus, :host .input-container:not(.readonly):not(.disabled):focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus);
+  border-color: var(--theme-input--border-color--focus) !important;
 }
 :host .input-container:not(.readonly):not(.disabled):disabled {
   box-shadow: none;
@@ -1342,7 +1550,7 @@ form:not(.was-validated) .valid-feedback {
   color: var(--theme-input--color--disabled);
   border-bottom: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled);
 }
-:host .input-container.readonly, :host .input-container.readonly:-webkit-autofill {
+:host .input-container.readonly {
   font-feature-settings: "clig" off, "liga" off;
   font-family: Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;
   font-style: normal;
@@ -1364,9 +1572,18 @@ form:not(.was-validated) .valid-feedback {
   box-shadow: var(--theme-input--box-shadow);
 }
 :host .input-container.readonly:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 1000px var(--theme-input--background) inset !important;
-  -webkit-text-fill-color: var(--theme-input--color) !important;
-  border-color: var(--theme-input--border-color) !important;
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
+}
+:host .input-container.readonly:-webkit-autofill, :host .input-container.readonly:autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--theme-color-component-info) inset !important;
+  -webkit-text-fill-color: var(--theme-input--color--autofill) !important;
+  background-color: var(--theme-input--background--autofill) !important;
+  border: var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;
+  color: var(--theme-input--color--autofill) !important;
 }
 :host .input-container.readonly::-moz-placeholder {
   color: var(--theme-input-hint--color);
@@ -1375,13 +1592,13 @@ form:not(.was-validated) .valid-feedback {
   color: var(--theme-input-hint--color);
 }
 :host .input-container.readonly.hover, :host .input-container.readonly:hover {
-  border-color: var(--theme-input--border-color--hover);
+  border-color: var(--theme-input--border-color--hover) !important;
   background-color: var(--theme-input--background--hover);
 }
 :host .input-container.readonly.focus, :host .input-container.readonly:focus {
   outline: 1px solid var(--theme-color-focus-bdr);
   outline-offset: var(--theme-input--focus--outline-offset);
-  border-color: var(--theme-input--border-color--focus);
+  border-color: var(--theme-input--border-color--focus) !important;
 }
 :host .input-container.readonly:-moz-read-only {
   box-shadow: none;

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

@@ -29,11 +29,15 @@ export class CategoryFilter {
         this.suggestions = undefined;
         this.icon = 'search';
         this.hideIcon = undefined;
+        this.staticOperator = undefined;
         this.repeatCategories = true;
         this.tmpDisableScrollIntoView = true;
         this.labelCategories = 'Categories';
         this.i18nPlainText = 'Filter by text';
     }
+    get dropdown() {
+        return this.hostElement.shadowRoot.querySelector('ix-dropdown');
+    }
     watchFilterState(newValue) {
         this.setFilterState(newValue);
     }
@@ -56,6 +60,9 @@ export class CategoryFilter {
             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));
     }
@@ -73,7 +80,13 @@ export class CategoryFilter {
         if (this.disabled || this.readonly) {
             return;
         }
-        this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;
+        this.dropdown.show = false;
+    }
+    openDropdown() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.dropdown.show = true;
     }
     handleFormElementKeyDown(e) {
         switch (e.code) {
@@ -195,7 +208,6 @@ export class CategoryFilter {
         if (emitEvent) {
             this.emitFilterEvent();
         }
-        this.closeDropdown();
     }
     removeToken(index) {
         this.filterTokens = this.filterTokens.filter((_, i) => i !== index);
@@ -287,6 +299,9 @@ export class CategoryFilter {
         return (h("div", { class: "dropdown-item-container" }, this.getFilteredSuggestions().map((suggestion) => (h("button", { class: "dropdown-item", "data-id": suggestion, onClick: () => this.addToken(suggestion), key: suggestion, title: suggestion }, suggestion)))));
     }
     renderOperatorButton() {
+        if (this.staticOperator) {
+            return '';
+        }
         const params = {
             type: 'button',
             variant: 'secondary',
@@ -295,7 +310,7 @@ export class CategoryFilter {
             iconOnly: true,
             iconOval: false,
             selected: false,
-            disabled: this.disabled,
+            disabled: this.disabled || this.staticOperator !== undefined,
             loading: false,
             icon: '',
             onClick: (e) => {
@@ -311,12 +326,20 @@ export class CategoryFilter {
             ? '='
             : '!='));
     }
+    getFilterOperatorString() {
+        let operator;
+        if (this.staticOperator !== undefined) {
+            operator = this.staticOperator;
+        }
+        else {
+            operator = this.categoryLogicalOperator;
+        }
+        return `${operator === LogicalFilterOperator.EQUAL ? '=' : '!='} `;
+    }
     renderCategoryValues() {
         var _a, _b;
         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: () => this.addToken(id, this.category) }, `${this.categoryLogicalOperator === LogicalFilterOperator.EQUAL
-                ? '='
-                : '!='} ${id}`)))));
+            _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: () => this.addToken(id, this.category) }, `${this.getFilterOperatorString()} ${id}`)))));
     }
     renderDropdownContent() {
         if (this.hasCategorySelection()) {
@@ -376,19 +399,19 @@ export class CategoryFilter {
     }
     render() {
         var _a;
-        return (h(Host, { key: '0f9a572e6a88a431b40ca329d9205c2178bc1af4' }, h("form", { key: 'ab1d823c5dc0e8b730fbf7ecc9fa0600399b14e1', ref: (el) => (this.formElement = el) }, h("div", { key: '041f20e0c8fbfb9253c771baa556cecb43108959', "read-only": this.readonly, class: {
+        return (h(Host, { key: 'ed593bf02543787202e00fd780a7ed5e1aa70822' }, h("form", { key: '5ca9f28201cc5d6b505cb2c1d61251c8a527a100', ref: (el) => (this.formElement = el) }, h("div", { key: '3ea203f7eb77c54e8c2a76a8a19fd74284de496c', "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: '941c38fef02caf91f76cc226affd9acb144e7bd7', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: 'f01d496f95fbaefab743090ea6543116f8a7b6f5', class: "token-container" }, h("ul", { key: '763b53af79ac6f3dadfc88f5321c18770a12b1d4', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: '18474d20426046a25a00a2d4388709eace1b0de8', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: 'd9da49fe378d75b691704dea0c4dc0eb4140eb31', class: "token-container" }, h("ul", { key: '3ddb28dbe2a41cfaab3e43ac216c97ab6580a2fd', 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: '0c8f637bb0033bb87fce7e48da5d4334ae11a609', class: {
+            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '095e0450f11f61f9a30b8f3e680bbab05c519113', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly ||
                     this.disabled ||
@@ -564,6 +587,32 @@ export class CategoryFilter {
                 "attribute": "hide-icon",
                 "reflect": false
             },
+            "staticOperator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LogicalFilterOperator",
+                    "resolved": "LogicalFilterOperator.EQUAL | LogicalFilterOperator.NOT_EQUAL",
+                    "references": {
+                        "LogicalFilterOperator": {
+                            "location": "import",
+                            "path": "./logical-filter-operator",
+                            "id": "src/components/category-filter/logical-filter-operator.ts::LogicalFilterOperator"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.2.0"
+                        }],
+                    "text": "If set categories will always be filtered via the respective logical operator.\nToggling of the operator will not be available to the user."
+                },
+                "attribute": "static-operator",
+                "reflect": false
+            },
             "repeatCategories": {
                 "type": "boolean",
                 "mutable": false,