From 97e4ebd09d16b7ef7d8c6ce747a111624c648131 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 6 Apr 2023 11:20:34 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For Carousel

---
 api-generator/components/carousel.js  |  8 ++++++++
 components/lib/carousel/Carousel.d.ts |  8 ++++++++
 components/lib/carousel/Carousel.vue  | 14 +++++++++++---
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/api-generator/components/carousel.js b/api-generator/components/carousel.js
index c77580298..ea51532dd 100644
--- a/api-generator/components/carousel.js
+++ b/api-generator/components/carousel.js
@@ -97,6 +97,14 @@ const CarouselSlots = [
     {
         name: 'item',
         description: 'Custom content for the component item.'
+    },
+    {
+        name: 'previcon',
+        description: 'Custom previous icon template.'
+    },
+    {
+        name: 'nexticon',
+        description: 'Custom next icon template.'
     }
 ];
 
diff --git a/components/lib/carousel/Carousel.d.ts b/components/lib/carousel/Carousel.d.ts
index b825bac99..9210bb379 100755
--- a/components/lib/carousel/Carousel.d.ts
+++ b/components/lib/carousel/Carousel.d.ts
@@ -130,6 +130,14 @@ export interface CarouselSlots {
      * Custom footer template.
      */
     footer(): VNode[];
+    /**
+     * Custom previous icon template.
+     */
+    previcon(): VNode[];
+    /**
+     * Custom next icon template.
+     */
+    nexticon(): VNode[];
 }
 
 /**
diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 60592655e..76bd9ccc1 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -15,7 +15,9 @@
                     @click="navBackward"
                     v-bind="prevButtonProps"
                 >
-                    <span :class="['p-carousel-prev-icon pi', { 'pi-chevron-left': !isVertical(), 'pi-chevron-up': isVertical() }]"></span>
+                    <slot name="previcon">
+                        <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" class="p-carousel-next-icon" />
+                    </slot>
                 </button>
 
                 <div class="p-carousel-items-content" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove">
@@ -65,7 +67,9 @@
                     @click="navForward"
                     v-bind="nextButtonProps"
                 >
-                    <span :class="['p-carousel-prev-icon pi', { 'pi-chevron-right': !isVertical(), 'pi-chevron-down': isVertical() }]"></span>
+                    <slot name="nexticon">
+                        <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-carousel-prev-icon" />
+                    </slot>
                 </button>
             </div>
             <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="indicatorsContentClasses" @keydown="onIndicatorKeydown">
@@ -82,7 +86,9 @@
 
 <script>
 import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronLeftIcon from 'primevue/icon/chevronleft';
 import ChevronRightIcon from 'primevue/icon/chevronright';
+import ChevronUpIcon from 'primevue/icon/chevronup';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
@@ -658,7 +664,9 @@ export default {
     },
     components: {
         ChevronRightIcon,
-        ChevronDownIcon
+        ChevronDownIcon,
+        ChevronLeftIcon,
+        ChevronUpIcon
     },
     directives: {
         ripple: Ripple