feat(core/category-filter): enable shadow dom (#724)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Sep 1, 2023 · 01deb3f · 01deb3f
1 parent fb49e96
commit 01deb3f
Show file tree

Hide file tree

Showing 17 changed files with 299 additions and 124 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -321,21 +321,21 @@ export declare interface IxCardTitle extends Components.IxCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['categories', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'initialState', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'repeatCategories', 'suggestions']
+  inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', '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', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'initialState', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'repeatCategories', 'suggestions'],
+  inputs: ['categories', 'disabled', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'readonly', 'repeatCategories', 'suggestions'],
 })
 export class IxCategoryFilter {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['inputChanged', 'filterChanged']);
+    proxyOutputs(this, this.el, ['categoryChanged', 'inputChanged', 'filterChanged']);
   }
 }
 
@@ -344,6 +344,10 @@ import type { InputState as IIxCategoryFilterInputState } from '@siemens/ix';
 import type { FilterState as IIxCategoryFilterFilterState } from '@siemens/ix';
 
 export declare interface IxCategoryFilter extends Components.IxCategoryFilter {
+  /**
+   * Event dispatched whenever the a category gets selected in the dropdown
+   */
+  categoryChanged: EventEmitter<CustomEvent<string>>;
   /**
    * Event dispatched whenever the text input changes.
    */
@@ -792,14 +796,14 @@ export declare interface IxExpandingSearch extends Components.IxExpandingSearch
 
 
 @ProxyCmp({
-  inputs: ['disabled']
+  inputs: ['disabled', 'readonly']
 })
 @Component({
   selector: 'ix-filter-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled'],
+  inputs: ['disabled', 'readonly'],
 })
 export class IxFilterChip {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -1300,20 +1300,22 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
         "ix-icon-button",
         "ix-icon",
         "ix-filter-chip",
-        "ix-dropdown"
+        "ix-dropdown",
+        "ix-spinner"
       ],
       "dependencyGraph": {
         "ix-category-filter": [
           "ix-icon-button",
           "ix-icon",
           "ix-filter-chip",
-          "ix-dropdown"
+          "ix-dropdown",
+          "ix-spinner"
         ],
         "ix-icon-button": [
           "ix-spinner",
@@ -1339,6 +1341,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": false,
+          "docs": "If true the filter will be in disabled state",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "filterState",
           "type": "FilterState",
@@ -1404,27 +1423,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "initialState",
-          "type": "FilterState",
-          "mutable": false,
-          "reflectToAttr": false,
-          "docs": "When set this will initially populate the component with the provided search criteria.\nThis will trigger all input events accordingly.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Will be removed with 2.0.0. Use the member filterState instead."
-            }
-          ],
-          "deprecation": "Will be removed with 2.0.0. Use the member filterState instead.",
-          "values": [
-            {
-              "type": "FilterState"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "labelCategories",
           "type": "string",
@@ -1474,6 +1472,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "readonly",
+          "reflectToAttr": false,
+          "docs": "If true the filter will be in readonly mode",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "repeatCategories",
           "type": "boolean",
@@ -1509,6 +1524,15 @@
       ],
       "methods": [],
       "events": [
+        {
+          "event": "categoryChanged",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event dispatched whenever the a category gets selected in the dropdown",
+          "docsTags": []
+        },
         {
           "event": "filterChanged",
           "detail": "FilterState",
@@ -4117,6 +4141,28 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "readonly",
+          "reflectToAttr": false,
+          "docs": "If true the filter chip will be in readonly mode",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.0.0"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],
@@ -8798,6 +8844,7 @@
         "ix-breadcrumb-item",
         "ix-burger-menu",
         "ix-button",
+        "ix-category-filter",
         "ix-icon-button",
         "ix-icon-toggle-button",
         "ix-modal-loading",
@@ -8816,6 +8863,9 @@
         "ix-button": [
           "ix-spinner"
         ],
+        "ix-category-filter": [
+          "ix-spinner"
+        ],
         "ix-icon-button": [
           "ix-spinner"
         ],

diff --git a/packages/core/scss/legacy/components/_forms.scss b/packages/core/scss/legacy/components/_forms.scss
@@ -159,4 +159,9 @@ input {
   &:disabled {
     color: var(--theme-input--color--disabled);
   }
+
+  &:read-only,
+  &.readonly {
+    cursor: default;
+  }
 }
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -289,6 +289,10 @@ export namespace Components {
       options: string[];
     };
   };
+        /**
+          * If true the filter will be in disabled state
+         */
+        "disabled": boolean;
         /**
           * A set of search criteria to populate the component with.
          */
@@ -305,11 +309,6 @@ export namespace Components {
           * The icon next to the actual text input Defaults to 'search'
          */
         "icon": string;
-        /**
-          * When set this will initially populate the component with the provided search criteria. This will trigger all input events accordingly.
-          * @deprecated Will be removed with 2.0.0. Use the member filterState instead.
-         */
-        "initialState": FilterState;
         /**
           * i18n
          */
@@ -324,6 +323,10 @@ export namespace Components {
           * Placeholder text to be displayed in an empty input field.
          */
         "placeholder": string;
+        /**
+          * If true the filter will be in readonly mode
+         */
+        "readonly": boolean;
         /**
           * 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
          */
@@ -798,6 +801,11 @@ export namespace Components {
           * If true the filter chip will be in disabled state
          */
         "disabled": boolean;
+        /**
+          * If true the filter chip will be in readonly mode
+          * @since 2.0.0
+         */
+        "readonly": boolean;
     }
     interface IxFlipTile {
         /**
@@ -3160,6 +3168,10 @@ declare namespace LocalJSX {
       options: string[];
     };
   };
+        /**
+          * If true the filter will be in disabled state
+         */
+        "disabled"?: boolean;
         /**
           * A set of search criteria to populate the component with.
          */
@@ -3176,11 +3188,6 @@ declare namespace LocalJSX {
           * The icon next to the actual text input Defaults to 'search'
          */
         "icon"?: string;
-        /**
-          * When set this will initially populate the component with the provided search criteria. This will trigger all input events accordingly.
-          * @deprecated Will be removed with 2.0.0. Use the member filterState instead.
-         */
-        "initialState"?: FilterState;
         /**
           * i18n
          */
@@ -3191,6 +3198,10 @@ declare namespace LocalJSX {
         "nonSelectableCategories"?: {
     [id: string]: string;
   };
+        /**
+          * Event dispatched whenever the a category gets selected in the dropdown
+         */
+        "onCategoryChanged"?: (event: IxCategoryFilterCustomEvent<string>) => void;
         /**
           * Event dispatched whenever the filter state changes.
          */
@@ -3203,6 +3214,10 @@ declare namespace LocalJSX {
           * Placeholder text to be displayed in an empty input field.
          */
         "placeholder"?: string;
+        /**
+          * If true the filter will be in readonly mode
+         */
+        "readonly"?: boolean;
         /**
           * 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
          */
@@ -3745,6 +3760,11 @@ declare namespace LocalJSX {
           * Close clicked
          */
         "onCloseClick"?: (event: IxFilterChipCustomEvent<void>) => void;
+        /**
+          * If true the filter chip will be in readonly mode
+          * @since 2.0.0
+         */
+        "readonly"?: boolean;
     }
     interface IxFlipTile {
         /**

diff --git a/packages/core/src/components/button/base-button.tsx b/packages/core/src/components/button/base-button.tsx
@@ -71,7 +71,7 @@ export function BaseButton(props: BaseButtonProps, children) {
   return (
     <button
       {...props.ariaAttributes}
-      onClick={() => (props.onClick ? props.onClick() : undefined)}
+      onClick={(e: Event) => (props.onClick ? props.onClick(e) : undefined)}
       tabindex={props.disabled ? -1 : props.tabIndex ?? 0}
       type={props.type}
       class={{