From 188fe3655ead29f2474b053f09e55faee893f981 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: Fri, 22 Jul 2022 21:41:34 +0300
Subject: [PATCH] Fixed #2801 - New inputClass and inputStyle properties

---
 api-generator/components/cascadeselect.js     | 32 ++++++++-----
 .../cascadeselect/CascadeSelect.d.ts          | 40 +++++++++-------
 .../cascadeselect/CascadeSelect.vue           | 12 +++--
 src/views/cascadeselect/CascadeSelectDoc.vue  | 48 ++++++++++++++-----
 4 files changed, 86 insertions(+), 46 deletions(-)

diff --git a/api-generator/components/cascadeselect.js b/api-generator/components/cascadeselect.js
index 6578cb2cb..c8920e5e3 100644
--- a/api-generator/components/cascadeselect.js
+++ b/api-generator/components/cascadeselect.js
@@ -59,24 +59,12 @@ const CascadeSelectProps = [
         default: "null",
         description: "Index of the element in tabbing order."
     },
-    {
-        name: "inputId",
-        type: "string",
-        default: "null",
-        description: "Identifier of the underlying input element."
-    },
     {
         name: "appendTo",
         type: "string",
         default: "body",
         description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
     },
-    {
-        name: "panelClass",
-        type: "string",
-        default: "null",
-        description: "Style class of the overlay panel."
-    },
     {
         name: "loading",
         type: "boolean",
@@ -88,7 +76,25 @@ const CascadeSelectProps = [
         type: "string",
         default: "pi pi-spinner pi-spin",
         description: "Icon to display in loading state."
-    }
+    },
+    {
+        name: "inputId",
+        type: "string",
+        default: "null",
+        description: "Identifier of the underlying input element."
+    },
+    {
+        name: "inputClass",
+        type: "any",
+        default: "null",
+        description: "Style class of the input field."
+    },
+    {
+        name: "inputStyle",
+        type: "any",
+        default: "null",
+        description: "Inline style of the input field."
+    },
 ];
 
 const CascadeSelectEvents = [
diff --git a/src/components/cascadeselect/CascadeSelect.d.ts b/src/components/cascadeselect/CascadeSelect.d.ts
index 01a22f31d..9fadddc8b 100644
--- a/src/components/cascadeselect/CascadeSelect.d.ts
+++ b/src/components/cascadeselect/CascadeSelect.d.ts
@@ -70,28 +70,12 @@ export interface CascadeSelectProps {
      * Index of the element in tabbing order.
      */
     tabindex?: string | undefined;
-    /**
-     * Identifier of the underlying input element.
-     */
-    inputId?: string | undefined;
-    /**
-     *
-     */
-    inputProps?: object | undefined;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
      * @see CascadeSelectAppendToType
      * Default value is 'body'.
      */
     appendTo?: CascadeSelectAppendToType;
-    /**
-     * Style class of the overlay panel.
-     */
-    panelClass?: any;
-    /**
-     * 
-     */
-    panelProps?: object | undefined;
     /**
      * Whether the dropdown is in loading state.
      */
@@ -101,6 +85,30 @@ export interface CascadeSelectProps {
      * Default value is 'pi pi-spinner pi-spin'.
      */
     loadingIcon?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: any | undefined;
+    /**
+     *
+     */
+    inputStyle?: any | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputProps?: object | undefined;
+    /**
+     * Style class of the overlay panel.
+     */
+    panelClass?: any;
+    /**
+     * 
+     */
+    panelProps?: object | undefined;
 }
 
 export interface CascadeSelectSlots {
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 31b773bc0..8bb866701 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -1,7 +1,7 @@
 <template>
     <div ref="container" :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="focusInput" role="combobox" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
+            <input ref="focusInput" role="combobox" type="text" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
                 aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="listId" v-bind="inputProps" />
         </div>
         <span :class="labelClass">
@@ -56,14 +56,11 @@ export default {
         placeholder: String,
 		disabled: Boolean,
         dataKey: null,
-        inputId: String,
         tabindex: String,
         appendTo: {
             type: String,
             default: 'body'
         },
-        panelClass: null,
-        panelProps: null,
         loading: {
             type: Boolean,
             default: false
@@ -72,7 +69,12 @@ export default {
             type: String,
             default: 'pi pi-spinner pi-spin'
         },
-        inputProps: null
+        inputId: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
+        panelClass: null,
+        panelProps: null,
     },
     outsideClickListener: null,
     scrollHandler: null,
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index c7ff03fb8..a6e582d8c 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -200,12 +200,6 @@ data() &#123;
                         <td>null</td>
                         <td>Index of the element in tabbing order.</td>
                     </tr>
-                    <tr>
-                        <td>inputId</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Identifier of the underlying input element.</td>
-                    </tr>
                     <tr>
                         <td>appendTo</td>
                         <td>string</td>
@@ -213,12 +207,6 @@ data() &#123;
                         <td>A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body
                         and "self" for the element itself.</td>
                     </tr>
-                    <tr>
-                        <td>panelClass</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Style class of the overlay panel.</td>
-                    </tr>
                     <tr>
                         <td>loading</td>
                         <td>boolean</td>
@@ -230,6 +218,42 @@ data() &#123;
                         <td>string</td>
                         <td>pi pi-spinner pi-spin</td>
                         <td>Icon to display in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>panelProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td></td>
                     </tr>
 				</tbody>
 			</table>