From a9185a87e7fc82d0080001df3844e82f69e655bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Mon, 10 Apr 2023 22:42:57 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For Chip

---
 api-generator/components/chip.js | 10 +++++++++-
 components/lib/chip/Chip.d.ts    | 15 ++++++++++++++-
 components/lib/chip/Chip.vue     | 13 ++++++++-----
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/api-generator/components/chip.js b/api-generator/components/chip.js
index abf3096df..1f4c4abca 100644
--- a/api-generator/components/chip.js
+++ b/api-generator/components/chip.js
@@ -45,11 +45,19 @@ const ChipEvents = [
     }
 ];
 
+const ChipSlots = [
+    {
+        name: 'removeicon',
+        description: 'Custom remove icon template of chip component.'
+    }
+];
+
 module.exports = {
     chip: {
         name: 'Chip',
         description: 'Chip represents entities using icons, labels and images',
         props: ChipProps,
-        events: ChipEvents
+        events: ChipEvents,
+        slots: ChipSlots
     }
 };
diff --git a/components/lib/chip/Chip.d.ts b/components/lib/chip/Chip.d.ts
index b717e3243..2b8204b13 100644
--- a/components/lib/chip/Chip.d.ts
+++ b/components/lib/chip/Chip.d.ts
@@ -33,7 +33,6 @@ export interface ChipProps {
     removable?: boolean;
     /**
      * Icon of the remove element.
-     * @defaultValue pi pi-times-circle
      */
     removeIcon?: string;
 }
@@ -46,6 +45,20 @@ export interface ChipSlots {
      * Content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom remove icon template of chip component.
+     * @param {Object} scope - remove icon slot's params.
+     */
+    removeicon(scope: {
+        /**
+         * Remove icon click event
+         */
+        click(): void;
+        /**
+         * Remove icon keydown event
+         */
+        keydown(): void;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/chip/Chip.vue b/components/lib/chip/Chip.vue
index 8c15e20a1..b80dcb107 100644
--- a/components/lib/chip/Chip.vue
+++ b/components/lib/chip/Chip.vue
@@ -5,11 +5,14 @@
             <span v-else-if="icon" :class="iconClass"></span>
             <div v-if="label" class="p-chip-text">{{ label }}</div>
         </slot>
-        <span v-if="removable" tabindex="0" :class="removeIconClass" @click="close" @keydown="onKeydown"></span>
+        <slot name="removeicon" :click="close" :keydown="onKeydown">
+            <component v-if="removable" :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown"></component>
+        </slot>
     </div>
 </template>
 
 <script>
+import TimesCircleIcon from 'primevue/icon/timescircle';
 export default {
     name: 'Chip',
     emits: ['remove'],
@@ -32,7 +35,7 @@ export default {
         },
         removeIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         }
     },
     data() {
@@ -62,10 +65,10 @@ export default {
         },
         iconClass() {
             return ['p-chip-icon', this.icon];
-        },
-        removeIconClass() {
-            return ['p-chip-remove-icon', this.removeIcon];
         }
+    },
+    components: {
+        TimesCircleIcon
     }
 };
 </script>