Merge pull request #1099 from IgniteUI/mkirkova/refactor-chip-samples

Add onRemove for all chip samples

Author: kacheshmarova

samples/inputs/chip/multiple/src/index.ts

@@ -5,6 +5,11 @@ defineComponents(IgcIconComponent, IgcChipComponent);
 
 export class ChipMultiple {
   constructor() {
+    const chips = document.querySelectorAll('igc-chip[removable]');
+    chips.forEach(chip => {
+      chip.addEventListener('igcRemove', (e) => this.onRemove(e));
+    });
+
     registerIconFromText(
       'cancel',
       '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
@@ -40,6 +45,11 @@ export class ChipMultiple {
       '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M18,4C16.29,4 15.25,4.33 14.65,4.61C13.88,4.23 13,4 12,4C11,4 10.12,4.23 9.35,4.61C8.75,4.33 7.71,4 6,4C3,4 1,12 1,14C1,14.83 2.32,15.59 4.14,15.9C4.78,18.14 7.8,19.85 11.5,20V15.72C10.91,15.35 10,14.68 10,14C10,13 12,13 12,13C12,13 14,13 14,14C14,14.68 13.09,15.35 12.5,15.72V20C16.2,19.85 19.22,18.14 19.86,15.9C21.68,15.59 23,14.83 23,14C23,12 21,4 18,4M4.15,13.87C3.65,13.75 3.26,13.61 3,13.5C3.25,10.73 5.2,6.4 6.05,6C6.59,6 7,6.06 7.37,6.11C5.27,8.42 4.44,12.04 4.15,13.87M9,12A1,1 0 0,1 8,11C8,10.46 8.45,10 9,10A1,1 0 0,1 10,11C10,11.56 9.55,12 9,12M15,12A1,1 0 0,1 14,11C14,10.46 14.45,10 15,10A1,1 0 0,1 16,11C16,11.56 15.55,12 15,12M19.85,13.87C19.56,12.04 18.73,8.42 16.63,6.11C17,6.06 17.41,6 17.95,6C18.8,6.4 20.75,10.73 21,13.5C20.75,13.61 20.36,13.75 19.85,13.87Z" /> </svg>'
     );
   }
+
+  public onRemove(event: Event) {
+    const chip = event.target as HTMLElement;
+    chip?.remove();
+  }
 }
 
 new ChipMultiple();

samples/inputs/chip/overview/src/index.ts

@@ -5,6 +5,11 @@ defineComponents(IgcIconComponent, IgcChipComponent);
 
 export class ChipOverview {
   constructor() {
+    const chips = document.querySelectorAll('igc-chip[removable]');
+    chips.forEach(chip => {
+      chip.addEventListener('igcRemove', (e) => this.onRemove(e));
+    });
+
     registerIconFromText(
       'cancel',
       '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
@@ -15,6 +20,11 @@ export class ChipOverview {
       '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
     );
   }
+
+  public onRemove(event: Event) {
+    const chip = event.target as HTMLElement;
+    chip?.remove();
+  }
 }
 
 new ChipOverview();

samples/inputs/chip/size/src/index.ts

@@ -6,6 +6,11 @@ defineComponents(IgcIconComponent, IgcChipComponent);
 
 export class ChipSize {
   constructor() {
+    const chips = document.querySelectorAll('igc-chip[removable]');
+    chips.forEach(chip => {
+      chip.addEventListener('igcRemove', (e) => this.onRemove(e));
+    });
+
     registerIconFromText(
       'cancel',
       '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
@@ -16,6 +21,11 @@ export class ChipSize {
       '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
     );
   }
+
+  public onRemove(event: Event) {
+    const chip = event.target as HTMLElement;
+    chip?.remove();
+  }
 }
 
 new ChipSize();

samples/inputs/chip/styling/src/index.ts

@@ -6,6 +6,11 @@ defineComponents(IgcIconComponent, IgcChipComponent);
 
 export class ChipStyling {
   constructor() {
+    const chips = document.querySelectorAll('igc-chip[removable]');
+    chips.forEach(chip => {
+      chip.addEventListener('igcRemove', (e) => this.onRemove(e));
+    });
+
     registerIconFromText(
       'cancel',
       '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
@@ -16,6 +21,11 @@ export class ChipStyling {
       '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
     );
   }
+
+  public onRemove(event: Event) {
+    const chip = event.target as HTMLElement;
+    chip?.remove();
+  }
 }
 
 new ChipStyling();

samples/inputs/chip/variants/src/index.ts

@@ -5,6 +5,11 @@ defineComponents(IgcIconComponent, IgcChipComponent);
 
 export class ChipVariants {
   constructor() {
+    const chips = document.querySelectorAll('igc-chip[removable]');
+    chips.forEach(chip => {
+      chip.addEventListener('igcRemove', (e) => this.onRemove(e));
+    });
+
     registerIconFromText(
       'cancel',
       '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>'
@@ -15,6 +20,11 @@ export class ChipVariants {
       '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
     );
   }
+
+  public onRemove(event: Event) {
+    const chip = event.target as HTMLElement;
+    chip?.remove();
+  }
 }
 
 new ChipVariants();