feat(core/categroy-filter): add filter cleared event

packages/angular/src/components.ts

@@ -364,7 +364,7 @@ export class IxCategoryFilter {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['categoryChanged', 'inputChanged', 'filterChanged']);
+    proxyOutputs(this, this.el, ['categoryChanged', 'inputChanged', 'filterChanged', 'filterCleared']);
   }
 }
 
@@ -385,6 +385,10 @@ export declare interface IxCategoryFilter extends Components.IxCategoryFilter {
    * Event dispatched whenever the filter state changes.
    */
   filterChanged: EventEmitter<CustomEvent<IIxCategoryFilterFilterState>>;
+  /**
+   * Event dispatched whenever the filter gets cleared.
+   */
+  filterCleared: EventEmitter<CustomEvent<void>>;
 }
 
 

packages/core/component-doc.json

@@ -2494,6 +2494,20 @@
           "docs": "Event dispatched whenever the filter state changes.",
           "docsTags": []
         },
+        {
+          "event": "filterCleared",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Event dispatched whenever the filter gets cleared.",
+          "docsTags": []
+        },
         {
           "event": "inputChanged",
           "detail": "InputState",

packages/core/src/components.d.ts

@@ -2877,6 +2877,7 @@ declare global {
         "categoryChanged": string;
         "inputChanged": InputState;
         "filterChanged": FilterState;
+        "filterCleared": void;
     }
     interface HTMLIxCategoryFilterElement extends Components.IxCategoryFilter, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIxCategoryFilterElementEventMap>(type: K, listener: (this: HTMLIxCategoryFilterElement, ev: IxCategoryFilterCustomEvent<HTMLIxCategoryFilterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -4493,6 +4494,10 @@ declare namespace LocalJSX {
           * Event dispatched whenever the filter state changes.
          */
         "onFilterChanged"?: (event: IxCategoryFilterCustomEvent<FilterState>) => void;
+        /**
+          * Event dispatched whenever the filter gets cleared.
+         */
+        "onFilterCleared"?: (event: IxCategoryFilterCustomEvent<void>) => void;
         /**
           * Event dispatched whenever the text input changes.
          */

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

@@ -167,6 +167,11 @@ export class CategoryFilter {
    */
   @Event() filterChanged!: EventEmitter<FilterState>;
 
+  /**
+   * Event dispatched whenever the filter gets cleared.
+   */
+  @Event() filterCleared!: EventEmitter<void>;
+
   get dropdown() {
     return this.hostElement.shadowRoot!.querySelector('ix-dropdown');
   }
@@ -213,7 +218,8 @@ export class CategoryFilter {
       this.formKeyDownListener = addDisposableEventListener(
         this.formElement,
         'keydown',
-        () => this.handleFormElementKeyDown
+        ((e: KeyboardEvent) =>
+          this.handleFormElementKeyDown(e)) as EventListener
       );
 
       this.preventDefaultListener = addDisposableEventListener(
@@ -233,7 +239,7 @@ export class CategoryFilter {
     this.inputKeyDownListener = addDisposableEventListener(
       this.textInput.current,
       'keydown',
-      () => this.handleInputElementKeyDown
+      ((e: KeyboardEvent) => this.handleInputElementKeyDown(e)) as EventListener
     );
 
     this.focusInListener = addDisposableEventListener(
@@ -393,7 +399,10 @@ export class CategoryFilter {
 
       case 'Enter':
       case 'NumpadEnter':
-        this.addToken(this.inputValue, this.category);
+        this.addToken(
+          this.inputValue,
+          this.category || this.ID_CUSTOM_FILTER_VALUE
+        );
         e.preventDefault();
         break;
     }
@@ -482,13 +491,20 @@ export class CategoryFilter {
   }
 
   private resetFilter(e: Event) {
+    const { defaultPrevented } = this.filterCleared.emit();
+
+    if (defaultPrevented) {
+      return;
+    }
+
     e.stopPropagation();
     this.closeDropdown();
     this.filterTokens = [];
     if (this.category) {
       this.category = '';
       this.categoryChanged.emit(undefined);
     }
+
     this.emitFilterEvent();
   }
 

packages/core/src/components/category-filter/test/category-filter.ct.ts

@@ -38,6 +38,17 @@ test.describe('category-preview test', () => {
     });
   });
 
+  test('add token', async ({ page }) => {
+    const token = 'Test';
+    await page.waitForSelector('ix-category-filter');
+    const input = await page.locator('input').first();
+    await input.click();
+    await input.fill(token);
+    await page.keyboard.press('Enter');
+    const chip = await page.locator('ix-filter-chip').first();
+    await expect(chip).toContainText(token);
+  });
+
   test('clear category-preview', async ({ page }) => {
     await page.waitForSelector('ix-category-filter');
     await page.locator('input').first().click();

packages/vue/src/components.ts

@@ -237,7 +237,8 @@ export const IxCategoryFilter = /*@__PURE__*/ defineContainer<JSX.IxCategoryFilt
   'i18nPlainText',
   'categoryChanged',
   'inputChanged',
-  'filterChanged'
+  'filterChanged',
+  'filterCleared'
 ]);