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

Add handleChipRemove for all chip samples

Author: kacheshmarova

samples/inputs/chip/multiple/App.razor

@@ -2,7 +2,7 @@
 
 
 <div class="container sample center size-medium" style="flex-direction: row; gap: 8px">
-    <IgbChip Selectable="true" Removable="true">
+    <IgbChip Selectable="true" Removable="true" RemoveScript="handleChipRemove">
         <span slot="select">
             <IgbIcon @ref="@SelectIconRef" IconName="custom-select" Collection="material" ></IgbIcon>
         </span>

samples/inputs/chip/multiple/wwwroot/events.js

@@ -0,0 +1,5 @@
+function handleChipRemove(event) {
+    const chip = event.target;
+    chip.remove();
+}
+igRegisterScript("handleChipRemove", handleChipRemove, false);

samples/inputs/chip/multiple/wwwroot/index.html

@@ -10,7 +10,7 @@
     <title>Samples | IgniteUI for Blazor | Infragistics</title>
     <base href="/" />
     <link href="https://static.infragistics.com/xplatform/images/browsers/blazor.ico" rel="icon" type="image/x-icon">
-  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css" type="text/css" />
     <link href="https://static.infragistics.com/xplatform/css/samples/blazor.css" rel="stylesheet" />
     <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
 </head>
@@ -25,6 +25,7 @@
     <!-- importing blazor bundle for IG controls: -->
     <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script src="events.js"></script>
 
 </body>
 

samples/inputs/chip/overview/App.razor

@@ -2,7 +2,8 @@
 
 
 <div class="container sample vertical">
-    <IgbChip class="size-medium" Selectable=true Removable=true> Chip
+    <IgbChip class="size-medium" Selectable=true Removable=true RemoveScript="handleChipRemove">
+        Chip
     </IgbChip>
 </div>
 

samples/inputs/chip/overview/wwwroot/events.js

@@ -0,0 +1,5 @@
+function handleChipRemove(event) {
+    const chip = event.target;
+    chip.remove();
+}
+igRegisterScript("handleChipRemove", handleChipRemove, false);

samples/inputs/chip/overview/wwwroot/index.html

@@ -25,6 +25,7 @@
     <!-- importing blazor bundle for IG controls: -->
     <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script src="events.js"></script>
 
 </body>
 

samples/inputs/chip/styling/App.razor

@@ -1,7 +1,8 @@
 @using IgniteUI.Blazor.Controls
 
 <div class="container sample vertical">
-    <IgbChip class="size-medium" Selectable=true Removable=true> Chip
+    <IgbChip class="size-medium" Selectable=true Removable=true RemoveScript="handleChipRemove">
+        Chip
     </IgbChip>
 </div>
 

samples/inputs/chip/styling/wwwroot/events.js

@@ -0,0 +1,5 @@
+function handleChipRemove(event) {
+    const chip = event.target;
+    chip.remove();
+}
+igRegisterScript("handleChipRemove", handleChipRemove, false);

samples/inputs/chip/styling/wwwroot/index.html

@@ -25,6 +25,7 @@
     <!-- importing blazor bundle for IG controls: -->
     <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
+    <script src="events.js"></script>
 
 </body>
 

samples/inputs/chip/variants/App.razor

@@ -2,19 +2,24 @@
 
 
 <div class="container sample center" style="flex-direction: row; gap: 8px">
-    <IgbChip Variant="StyleVariant.Primary" Selectable="true" Removable="true"> Primary
+    <IgbChip Variant="StyleVariant.Primary" Selectable="true" Removable="true" RemoveScript="handleChipRemove">
+        Primary
     </IgbChip>
 
-    <IgbChip Variant="StyleVariant.Info" Selectable="true" Removable="true"> Info
+    <IgbChip Variant="StyleVariant.Info" Selectable="true" Removable="true" RemoveScript="handleChipRemove">
+        Info
     </IgbChip>
 
-    <IgbChip Variant="StyleVariant.Success" Selectable="true" Removable="true"> Success
+    <IgbChip Variant="StyleVariant.Success" Selectable="true" Removable="true" RemoveScript="handleChipRemove">
+        Success
     </IgbChip>
 
-    <IgbChip Variant="StyleVariant.Warning" Selectable="true" Removable="true"> Warning
+    <IgbChip Variant="StyleVariant.Warning" Selectable="true" Removable="true" RemoveScript="handleChipRemove">
+        Warning
     </IgbChip>
 
-    <IgbChip Variant="StyleVariant.Danger" Selectable="true" Removable="true"> Danger
+    <IgbChip Variant="StyleVariant.Danger" Selectable="true" Removable="true" RemoveScript="handleChipRemove">
+        Danger
     </IgbChip>
 </div>