From b28a89d1744f11f65eb42e8424903160871cdb3c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 23 Nov 2023 12:29:16 +0300
Subject: [PATCH 1/2] Fixed #4871 - Calendar: new iconDisplay property

---
 components/lib/calendar/BaseCalendar.vue       |  4 ++++
 components/lib/calendar/Calendar.d.ts          | 15 +++++++++++++++
 components/lib/calendar/Calendar.vue           |  7 ++++++-
 components/lib/calendar/style/CalendarStyle.js |  8 +++++++-
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
index 198c7a3f7..1f0ab3bbe 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/calendar/BaseCalendar.vue
@@ -31,6 +31,10 @@ export default {
             type: Boolean,
             default: false
         },
+        iconDisplay: {
+            type: String,
+            default: 'button'
+        },
         icon: {
             type: String,
             default: undefined
diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
index f2b6eb96e..121f29c90 100755
--- a/components/lib/calendar/Calendar.d.ts
+++ b/components/lib/calendar/Calendar.d.ts
@@ -479,6 +479,11 @@ export interface CalendarProps {
      * @defaultValue false
      */
     showIcon?: boolean | undefined;
+    /**
+     * Icon position of the component. This only applies if the showIcon option is set to true.
+     * @defaultValue 'button'
+     */
+    iconDisplay?: 'button' | 'input' | undefined;
     /**
      * Icon of the calendar button.
      * @deprecated since v3.27.0. Use 'dropdownicon' slot.
@@ -784,6 +789,16 @@ export interface CalendarSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom input icon template.
+     * @param {Object} scope - input icon slot's params.
+     */
+    inputicon(scope: {
+        /**
+         * Style class of the input icon
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom previous icon template.
      * @param {Object} scope - previous icon slot's params.
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 389cc3e67..9adf5717a 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -28,7 +28,7 @@
             v-bind="{ ...inputProps, ...ptm('input') }"
         />
         <CalendarButton
-            v-if="showIcon"
+            v-if="showIcon && iconDisplay === 'button'"
             :class="cx('dropdownButton')"
             :disabled="disabled"
             @click="onButtonClick"
@@ -47,6 +47,11 @@
                 </slot>
             </template>
         </CalendarButton>
+        <template v-else-if="showIcon && iconDisplay === 'input'">
+            <slot name="inputicon" :class="cx('inputIcon')">
+                <component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
+            </slot>
+        </template>
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave" v-bind="ptm('transition')">
                 <div
diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
index 472fb07e3..f3d64eb9c 100644
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/components/lib/calendar/style/CalendarStyle.js
@@ -22,6 +22,10 @@ const css = `
         border-bottom-left-radius: 0;
     }
 
+    .p-calendar .p-datepicker-trigger-icon {
+        cursor: pointer;
+    }
+
     /* Fluid */
     .p-fluid .p-calendar {
         display: flex;
@@ -158,7 +162,8 @@ const classes = {
     root: ({ props, state }) => [
         'p-calendar p-component p-inputwrapper',
         {
-            'p-calendar-w-btn': props.showIcon,
+            'p-calendar-w-btn': props.showIcon && props.iconDisplay === 'button',
+            'p-input-icon-right': props.showIcon && props.iconDisplay === 'input',
             'p-calendar-timeonly': props.timeOnly,
             'p-calendar-disabled': props.disabled,
             'p-inputwrapper-filled': props.modelValue,
@@ -168,6 +173,7 @@ const classes = {
     ],
     input: 'p-inputtext p-component',
     dropdownButton: 'p-datepicker-trigger',
+    inputIcon: 'p-datepicker-trigger-icon',
     panel: ({ instance, props, state }) => [
         'p-datepicker p-component',
         {

From 1100647eee4dbd177a7c1f5726703b66e4dd01a1 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Thu, 23 Nov 2023 09:30:19 +0000
Subject: [PATCH 2/2] Update API doc

---
 doc/common/apidoc/index.json | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 9fdc5fde4..eead57b25 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -7593,6 +7593,14 @@
                             "default": "false",
                             "description": "When enabled, displays a button with icon next to input."
                         },
+                        {
+                            "name": "iconDisplay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"input\" | \"button\"",
+                            "default": "'button'",
+                            "description": "Icon position of the component. This only applies if the showIcon option is set to true."
+                        },
                         {
                             "name": "icon",
                             "optional": true,
@@ -8093,6 +8101,19 @@
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom dropdown icon template."
                         },
+                        {
+                            "name": "inputicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 text-primary-700\">class</span>: <span class=\"text-primary-500\">any</span>, <span class=\"text-primary-300\">// Style class of the input icon</span>\n }",
+                                    "description": "input icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom input icon template."
+                        },
                         {
                             "name": "previousicon",
                             "parameters": [