From 339fa2f9ee3bfdc342f95c3cabc23815024f5d30 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 7 May 2020 12:18:47 +0300
Subject: [PATCH] Fixed #305 - Icons inside InputText

---
 public/themes/luna-amber/theme.css     | 16 ++++++++++
 public/themes/luna-green/theme.css     | 16 ++++++++++
 public/themes/luna-pink/theme.css      | 16 ++++++++++
 public/themes/nova-colored/theme.css   | 16 ++++++++++
 public/themes/nova-dark/theme.css      | 16 ++++++++++
 public/themes/nova-light/theme.css     | 16 ++++++++++
 public/themes/nova-vue/theme.css       | 16 ++++++++++
 public/themes/rhea/theme.css           | 16 ++++++++++
 public/themes/saga-blue/theme.css      | 18 +++++++++++
 public/themes/saga-green/theme.css     | 18 +++++++++++
 public/themes/saga-orange/theme.css    | 18 +++++++++++
 public/themes/saga-purple/theme.css    | 18 +++++++++++
 public/themes/vela-blue/theme.css      | 16 ++++++++++
 public/themes/vela-green/theme.css     | 16 ++++++++++
 public/themes/vela-orange/theme.css    | 16 ++++++++++
 public/themes/vela-purple/theme.css    | 16 ++++++++++
 src/components/inputtext/InputText.css | 12 ++++++++
 src/views/inputtext/InputTextDemo.vue  | 18 +++++++++--
 src/views/inputtext/InputTextDoc.vue   | 41 ++++++++++++++++++++++----
 19 files changed, 327 insertions(+), 8 deletions(-)

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index bae12e574c..a1219a0cf2 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 6061b2cd80..6d6c87880d 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index c7cb7798c0..2507abd226 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 60f5fdbb7f..777346d7b2 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index 767e37a5c1..cb99f1539c 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index 624bd3878a..0ba23db7ec 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 4cfa8cf38a..80ec3ed5eb 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 4ef5a3611c..d19200c159 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #666666;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index bbd9805915..34bf4c6c27 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index f7764984bb..53732624db 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index a1cec3288e..40d553c821 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index c53b806ef2..4f57cf72c8 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 9bd4ab94de..d6e604534b 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 5a32157342..6714616a03 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 30690302c2..50ac6d3717 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 4467f7e6fe..28d0ba272e 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;
diff --git a/src/components/inputtext/InputText.css b/src/components/inputtext/InputText.css
index 9d06e983b7..5e94ab120b 100755
--- a/src/components/inputtext/InputText.css
+++ b/src/components/inputtext/InputText.css
@@ -52,4 +52,16 @@
 .p-float-label .input:-webkit-autofill ~ label {
     top: -20px;
     font-size: 12px;
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+    position: relative;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-right > i {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5em;
 }
\ No newline at end of file
diff --git a/src/views/inputtext/InputTextDemo.vue b/src/views/inputtext/InputTextDemo.vue
index 5d9e3f53f8..df2cbf79c2 100755
--- a/src/views/inputtext/InputTextDemo.vue
+++ b/src/views/inputtext/InputTextDemo.vue
@@ -18,8 +18,20 @@
                 <label for="username">Username</label>
             </span>
 
+            <h3>Left Icon</h3>
+            <span class="p-input-icon-left">
+                <i class="pi pi-search" />
+                <InputText type="text" v-model="value3" placeholder="Search" />
+            </span>
+
+            <h3>Right Icon</h3>
+            <span class="p-input-icon-right">
+                <i class="pi pi-spin pi-spinner" />
+                <InputText type="text" v-model="value4" />
+            </span>
+
             <h3>Disabled</h3>
-            <InputText type="text" v-model="value3" disabled />
+            <InputText type="text" v-model="value5" disabled />
 
              <h3>Invalid</h3>
             <InputText type="text" class="p-error" />
@@ -44,7 +56,9 @@ export default {
         return {
             value1: '',
             value2: '',
-            value3: 'PrimeVue'
+            value3: '',
+            value4: '',
+            value5: 'PrimeVue'
         }
     },
 	components: {
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index 9d624add1c..e71f3cd3c4 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -20,6 +20,21 @@ import InputText from 'primevue/inputtext';
 	&lt;InputText id="username" type="text" v-model="value" /&gt;
 	&lt;label for="username"&gt;Username&lt;/label&gt;
 &lt;/span&gt;
+</CodeHighlight>
+
+                <h3>Icons</h3>
+                <p>An icon can be integrated within an input field by wrapping the input and the icon with an element having either <i>p-input-icon-right</i>
+                or <i>p-input-icon-left</i> class depending on the icon location.</p>
+<CodeHighlight>
+&lt;span class="p-input-icon-left"&gt;
+    &lt;i class="pi pi-search" /&gt;
+    &lt;InputText type="text" v-model="value1" placeholder="Search" /&gt;
+&lt;/span&gt;
+
+&lt;span class="p-input-icon-right"&gt;
+    &lt;i class="pi pi-spin pi-spinner" /&gt;
+    &lt;InputText type="text" v-model="value2" /&gt;
+&lt;/span&gt;
 </CodeHighlight>
 
 				<h3>Properties</h3>
@@ -57,7 +72,7 @@ import InputText from 'primevue/inputtext';
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;h3&gt;Basic&lt;/h3&gt;
+&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
 &lt;InputText type="text" v-model="value1" /&gt;
 &lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
 
@@ -67,10 +82,22 @@ import InputText from 'primevue/inputtext';
     &lt;label for="username"&gt;Username&lt;/label&gt;
 &lt;/span&gt;
 
+&lt;h3&gt;Left Icon&lt;/h3&gt;
+&lt;span class="p-input-icon-left"&gt;
+    &lt;i class="pi pi-search" /&gt;
+    &lt;InputText type="text" v-model="value3" placeholder="Search" /&gt;
+&lt;/span&gt;
+
+&lt;h3&gt;Right Icon&lt;/h3&gt;
+&lt;span class="p-input-icon-right"&gt;
+    &lt;i class="pi pi-spin pi-spinner" /&gt;
+    &lt;InputText type="text" v-model="value4" /&gt;
+&lt;/span&gt;
+
 &lt;h3&gt;Disabled&lt;/h3&gt;
-&lt;InputText type="text" v-model="value3" disabled /&gt;
+&lt;InputText type="text" v-model="value5" disabled /&gt;
 
-&lt;h3&gt;Invalid&lt;/h3&gt;
+    &lt;h3&gt;Invalid&lt;/h3&gt;
 &lt;InputText type="text" class="p-error" /&gt;
 
 &lt;h3&gt;Sizes&lt;/h3&gt;
@@ -86,9 +113,11 @@ import InputText from 'primevue/inputtext';
 export default {
 	data() {
 		return {
-			value1: '',
-			value2: '',
-			value3: 'PrimeVue'
+            value1: '',
+            value2: '',
+            value3: '',
+            value4: '',
+            value5: 'PrimeVue'
 		}
 	}
 }