fix(core/chip): new custom event (#441)

siemens · Mar 13, 2023 · f713fbd · f713fbd
1 parent f1f243c
commit f713fbd
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -255,16 +255,20 @@ export class IxChip {
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
-    proxyOutputs(this, this.el, ['close']);
+    proxyOutputs(this, this.el, ['close', 'closeChip']);
   }
 }
 
 
 export declare interface IxChip extends Components.IxChip {
   /**
-   * Fire event if close button is clicked
+   * Fire event if close button is clicked @deprecated Will be removed in 2.0.0. Use `closeChip`
    */
   close: EventEmitter<CustomEvent<any>>;
+  /**
+   * Fire event if close button is clicked @since 1.5.0
+   */
+  closeChip: EventEmitter<CustomEvent<any>>;
 }
 
 

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -1102,7 +1102,27 @@
           "cancelable": true,
           "composed": true,
           "docs": "Fire event if close button is clicked",
-          "docsTags": []
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "Will be removed in 2.0.0. Use `closeChip`"
+            }
+          ],
+          "deprecation": "Will be removed in 2.0.0. Use `closeChip`"
+        },
+        {
+          "event": "closeChip",
+          "detail": "any",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Fire event if close button is clicked",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "1.5.0"
+            }
+          ]
         }
       ],
       "styles": [],

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -2481,8 +2481,14 @@ declare namespace LocalJSX {
         "icon"?: string | undefined;
         /**
           * Fire event if close button is clicked
+          * @deprecated Will be removed in 2.0.0. Use `closeChip`
          */
         "onClose"?: (event: IxChipCustomEvent<any>) => void;
+        /**
+          * Fire event if close button is clicked
+          * @since 1.5.0
+         */
+        "onCloseChip"?: (event: IxChipCustomEvent<any>) => void;
         /**
           * Show chip with outline style
          */

diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx
@@ -71,16 +71,29 @@ export class Chip {
 
   /**
    * Fire event if close button is clicked
+   *
+   *  @deprecated Will be removed in 2.0.0. Use `closeChip`
    */
   @Event() close: EventEmitter;
 
+  /**
+   * Fire event if close button is clicked
+   *
+   * @since 1.5.0
+   */
+  @Event() closeChip: EventEmitter;
+
   private getCloseButton() {
     return (
       <div class="close-button-container">
         <button
           type="button"
           class="btn btn-invisible-secondary btn-icon btn-oval close-button"
-          onClick={(event) => this.close.emit(event)}
+          onClick={(event) => {
+            this.close.emit(event);
+            this.closeChip.emit(event);
+            event.stopPropagation();
+          }}
         >
           {this.variant === 'custom' ? (
             <i

diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
@@ -93,7 +93,8 @@ export const IxChip = /*@__PURE__*/ defineContainer<JSX.IxChip>('ix-chip', undef
   'background',
   'color',
   'outline',
-  'close'
+  'close',
+  'closeChip'
 ]);