feat(core/category-filter): make logical operator optional (#1233)

Co-authored-by: Daniel Leroux <[email protected]>

.changeset/giant-camels-jam.md

@@ -0,0 +1,8 @@
+---
+'@siemens/ix-angular': minor
+'@siemens/ix': minor
+'@siemens/ix-vue': minor
+'@siemens/ix-react': minor
+---
+
+feat(core/category-filter): make logical operator optional

packages/angular/src/components.ts

@@ -344,14 +344,14 @@ export declare interface IxCardTitle extends Components.IxCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'suggestions']
+  inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'staticOperator', 'suggestions']
 })
 @Component({
   selector: 'ix-category-filter',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'suggestions'],
+  inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'staticOperator', 'suggestions'],
 })
 export class IxCategoryFilter {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -2298,6 +2298,41 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "staticOperator",
+          "type": "LogicalFilterOperator.EQUAL | LogicalFilterOperator.NOT_EQUAL",
+          "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"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "static-operator",
+          "reflectToAttr": false,
+          "docs": "If set categories will always be filtered via the respective logical operator.\nToggling of the operator will not be available to the user.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.2.0"
+            }
+          ],
+          "values": [
+            {
+              "type": "LogicalFilterOperator.EQUAL"
+            },
+            {
+              "type": "LogicalFilterOperator.NOT_EQUAL"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "suggestions",
           "type": "string[]",
@@ -17622,6 +17657,11 @@
       "docstring": "",
       "path": "src/components/category-filter/filter-state.ts"
     },
+    "src/components/category-filter/logical-filter-operator.ts::LogicalFilterOperator": {
+      "declaration": "export enum LogicalFilterOperator {\n  EQUAL = 'Equal',\n  NOT_EQUAL = 'Not equal',\n}",
+      "docstring": "",
+      "path": "src/components/category-filter/logical-filter-operator.ts"
+    },
     "src/components/category-filter/input-state.ts::InputState": {
       "declaration": "any",
       "docstring": "",

packages/core/src/components.d.ts

@@ -14,6 +14,7 @@ import { ButtonVariant } from "./components/button/button";
 import { CardVariant } from "./components/card/card";
 import { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion";
 import { FilterState } from "./components/category-filter/filter-state";
+import { LogicalFilterOperator } from "./components/category-filter/logical-filter-operator";
 import { InputState } from "./components/category-filter/input-state";
 import { ColumnSize } from "./components/col/col";
 import { ContentHeaderVariant } from "./components/content-header/content-header";
@@ -53,6 +54,7 @@ export { ButtonVariant } from "./components/button/button";
 export { CardVariant } from "./components/card/card";
 export { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion";
 export { FilterState } from "./components/category-filter/filter-state";
+export { LogicalFilterOperator } from "./components/category-filter/logical-filter-operator";
 export { InputState } from "./components/category-filter/input-state";
 export { ColumnSize } from "./components/col/col";
 export { ContentHeaderVariant } from "./components/content-header/content-header";
@@ -404,6 +406,11 @@ export namespace Components {
           * If set to true allows that a single category can be set more than once. An already set category will not appear in the category dropdown if set to false.  Defaults to true
          */
         "repeatCategories": boolean;
+        /**
+          * If set categories will always be filtered via the respective logical operator. Toggling of the operator will not be available to the user.
+          * @since 2.2.0
+         */
+        "staticOperator"?: LogicalFilterOperator;
         /**
           * A list of strings that will be supplied as typeahead suggestions not tied to any categories.
          */
@@ -4449,6 +4456,11 @@ declare namespace LocalJSX {
           * If set to true allows that a single category can be set more than once. An already set category will not appear in the category dropdown if set to false.  Defaults to true
          */
         "repeatCategories"?: boolean;
+        /**
+          * If set categories will always be filtered via the respective logical operator. Toggling of the operator will not be available to the user.
+          * @since 2.2.0
+         */
+        "staticOperator"?: LogicalFilterOperator;
         /**
           * A list of strings that will be supplied as typeahead suggestions not tied to any categories.
          */

packages/core/src/components/category-filter/category-filter.tsx

@@ -107,6 +107,14 @@ export class CategoryFilter {
    */
   @Prop() hideIcon: boolean;
 
+  /**
+   * If set categories will always be filtered via the respective logical operator.
+   * Toggling of the operator will not be available to the user.
+   *
+   * @since 2.2.0
+   */
+  @Prop() staticOperator?: LogicalFilterOperator;
+
   /**
    * If set to true allows that a single category can be set more than once.
    * An already set category will not appear in the category dropdown if set to false.
@@ -506,6 +514,10 @@ export class CategoryFilter {
   }
 
   private renderOperatorButton() {
+    if (this.staticOperator) {
+      return '';
+    }
+
     const params: BaseButtonProps = {
       type: 'button',
       variant: 'secondary',
@@ -514,7 +526,7 @@ export class CategoryFilter {
       iconOnly: true,
       iconOval: false,
       selected: false,
-      disabled: this.disabled,
+      disabled: this.disabled || this.staticOperator !== undefined,
       loading: false,
       icon: '',
       onClick: (e: Event) => {
@@ -536,6 +548,16 @@ export class CategoryFilter {
     );
   }
 
+  private getFilterOperatorString() {
+    let operator: LogicalFilterOperator;
+    if (this.staticOperator !== undefined) {
+      operator = this.staticOperator;
+    } else {
+      operator = this.categoryLogicalOperator;
+    }
+    return `${operator === LogicalFilterOperator.EQUAL ? '=' : '!='} `;
+  }
+
   private renderCategoryValues() {
     return (
       <div class="dropdown-item-container">
@@ -554,11 +576,7 @@ export class CategoryFilter {
               key={id}
               onClick={() => this.addToken(id, this.category)}
             >
-              {`${
-                this.categoryLogicalOperator === LogicalFilterOperator.EQUAL
-                  ? '='
-                  : '!='
-              } ${id}`}
+              {`${this.getFilterOperatorString()} ${id}`}
             </button>
           ))}
       </div>

packages/core/src/tests/category-filter/category-filter.e2e.ts

@@ -24,4 +24,20 @@ regressionTest.describe('category-filter', () => {
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('category options', async ({ page }) => {
+    await page.goto('category-filter/categories');
+    await page.locator('input').first().click();
+    await page.locator('.category-item').first().click();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('static operator', async ({ page }) => {
+    await page.goto('category-filter/static-operator');
+    await page.locator('input').first().click();
+    await page.locator('.category-item').first().click();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });

packages/core/src/tests/category-filter/static-operator/index.html

@@ -0,0 +1,51 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <ix-category-filter static-operator="equal" placeholder="Filter by.."></ix-category-filter>
+
+    <script type="module">
+      (async () => {
+        await window.customElements.whenDefined('ix-category-filter');
+        const categories = {
+          ID_1: {
+            label: 'Vendor',
+            options: ['Apple', 'MS', 'Siemens'],
+          },
+          ID_2: {
+            label: 'Product',
+            options: ['iPhone X', 'Windows', 'APS'],
+          },
+        };
+        const filterState = {
+          tokens: ['Custom filter text'],
+          categories: [
+            {
+              id: 'ID_1',
+              value: 'IBM',
+              operator: 'Not equal',
+            },
+          ],
+        };
+        const categoryFilters = document.querySelectorAll('ix-category-filter');
+        categoryFilters.forEach((categoryFilter) => {
+          categoryFilter.categories = categories;
+          categoryFilter.filterState = filterState;
+        });
+      })();
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/core/src/tests/select/disabled/index.html

@@ -0,0 +1,25 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+  <title>Stencil Component Starter</title>
+</head>
+
+<body style="padding: 2rem">
+  <ix-select disabled>
+    <ix-select-item label="Item 1" value="1"></ix-select-item>
+    <ix-select-item label="Item 2" value="2"></ix-select-item>
+    <ix-select-item label="Item 3" value="3"></ix-select-item>
+    <ix-select-item label="Item 4" value="4"></ix-select-item>
+  </ix-select>
+  <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+</body>
+
+</html>

packages/vue/src/components.ts

@@ -228,6 +228,7 @@ export const IxCategoryFilter = /*@__PURE__*/ defineContainer<JSX.IxCategoryFilt
   'suggestions',
   'icon',
   'hideIcon',
+  'staticOperator',
   'repeatCategories',
   'tmpDisableScrollIntoView',
   'labelCategories',