From d783c2257d3df0b761e047a620ecf87e50848f65 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 3 Jul 2020 11:39:39 +0300
Subject: [PATCH] InputGroup support for FloatLabel

---
 public/themes/arya-blue/theme.css               | 13 ++++++++++---
 public/themes/arya-green/theme.css              | 13 ++++++++++---
 public/themes/arya-orange/theme.css             | 13 ++++++++++---
 public/themes/arya-purple/theme.css             | 13 ++++++++++---
 public/themes/bootstrap4-dark-blue/theme.css    | 13 ++++++++++---
 public/themes/bootstrap4-dark-purple/theme.css  | 13 ++++++++++---
 public/themes/bootstrap4-light-blue/theme.css   | 13 ++++++++++---
 public/themes/bootstrap4-light-purple/theme.css | 13 ++++++++++---
 public/themes/luna-amber/theme.css              | 13 ++++++++++---
 public/themes/luna-blue/theme.css               | 13 ++++++++++---
 public/themes/luna-green/theme.css              | 13 ++++++++++---
 public/themes/luna-pink/theme.css               | 13 ++++++++++---
 public/themes/md-dark-deeppurple/theme.css      | 13 ++++++++++---
 public/themes/md-dark-indigo/theme.css          | 13 ++++++++++---
 public/themes/md-light-deeppurple/theme.css     | 13 ++++++++++---
 public/themes/md-light-indigo/theme.css         | 13 ++++++++++---
 public/themes/mdc-dark-deeppurple/theme.css     | 13 ++++++++++---
 public/themes/mdc-dark-indigo/theme.css         | 13 ++++++++++---
 public/themes/mdc-light-deeppurple/theme.css    | 13 ++++++++++---
 public/themes/mdc-light-indigo/theme.css        | 13 ++++++++++---
 public/themes/nova-accent/theme.css             | 13 ++++++++++---
 public/themes/nova-alt/theme.css                | 13 ++++++++++---
 public/themes/nova-vue/theme.css                | 13 ++++++++++---
 public/themes/nova/theme.css                    | 13 ++++++++++---
 public/themes/rhea/theme.css                    | 13 ++++++++++---
 public/themes/saga-blue/theme.css               | 13 ++++++++++---
 public/themes/saga-green/theme.css              | 13 ++++++++++---
 public/themes/saga-orange/theme.css             | 13 ++++++++++---
 public/themes/saga-purple/theme.css             | 13 ++++++++++---
 public/themes/vela-blue/theme.css               | 13 ++++++++++---
 public/themes/vela-green/theme.css              | 13 ++++++++++---
 public/themes/vela-orange/theme.css             | 13 ++++++++++---
 public/themes/vela-purple/theme.css             | 13 ++++++++++---
 src/components/inputtext/InputText.css          |  6 ++++++
 34 files changed, 336 insertions(+), 99 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 35b96461e..3b867af7d 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #383838;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index dab16f2be..51ec9a67c 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #383838;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 6561465c2..459681a8e 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #383838;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 34bfe6a3b..20ad3315b 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #383838;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index f4721e74c..6f2737e6e 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #3f4b5b;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index d19854030..fd7d78d38 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #3f4b5b;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index dba1db8c3..3bb0cd4b4 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #ced4da;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 0d606569a..7c50ae632 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #ced4da;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 1d6253c3c..4729da179 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #4b4b4b;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 57dd5d8ed..f5237dda6 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #4b4b4b;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index e1fd847d2..b5144cfc5 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #4b4b4b;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 89e2dc56b..0419d355c 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #4b4b4b;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index cc184af82..72df8c0d3 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -661,14 +661,21 @@
   border-right: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 819adeb3b..95ba96f11 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -661,14 +661,21 @@
   border-right: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index e4810c32d..5ea48e770 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -661,14 +661,21 @@
   border-right: 1px solid rgba(0, 0, 0, 0.38);
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 03c26ce81..e6e1825ca 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -661,14 +661,21 @@
   border-right: 1px solid rgba(0, 0, 0, 0.38);
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 3ef2cc6f4..3498b38de 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -661,14 +661,21 @@
   border-right: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 2ad9fb728..d57d382b8 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -661,14 +661,21 @@
   border-right: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 59b4dae12..b182a80ee 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -661,14 +661,21 @@
   border-right: 1px solid rgba(0, 0, 0, 0.38);
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 95aa33c6f..3a064f738 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -661,14 +661,21 @@
   border-right: 1px solid rgba(0, 0, 0, 0.38);
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 793235691..4279103a0 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -637,14 +637,21 @@
   border-right: 1px solid #a6a6a6;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 74db11974..4efa036ef 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #a6a6a6;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 65075008a..62783f45a 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #a6a6a6;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index e2b17981a..dec1398e8 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #a6a6a6;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 6742fb3be..8e95b96a4 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -637,14 +637,21 @@
   border-right: 1px solid #dadada;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index f56702979..c834dba06 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #ced4da;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index d1cb08cbe..33271a298 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #ced4da;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 99e56b49a..54521da6b 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #ced4da;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 6eea817bb..4bbeb3ea6 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #ced4da;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 4361c532c..487a3fb21 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #304562;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index c67220f89..80508b9ad 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #304562;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 172b04ea8..8810a0adc 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #304562;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index eeddcf22b..017981b77 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -641,14 +641,21 @@
   border-right: 1px solid #304562;
 }
 
-.p-inputgroup > .p-component {
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-float-label > .p-component {
   border-radius: 0;
   margin: 0;
 }
-.p-inputgroup > .p-component + .p-inputgroup-addon {
+.p-inputgroup > .p-component + .p-inputgroup-addon,
+.p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
   border-left: 0 none;
 }
-.p-inputgroup > .p-component:focus {
+.p-inputgroup > .p-component:focus,
+.p-inputgroup > .p-float-label > .p-component:focus {
+  z-index: 1;
+}
+.p-inputgroup > .p-component:focus ~ label,
+.p-inputgroup > .p-float-label > .p-component:focus ~ label {
   z-index: 1;
 }
 
diff --git a/src/components/inputtext/InputText.css b/src/components/inputtext/InputText.css
index 3430e1aad..6984d345c 100755
--- a/src/components/inputtext/InputText.css
+++ b/src/components/inputtext/InputText.css
@@ -19,6 +19,12 @@
     justify-content: center;
 }
 
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
 .p-inputgroup .p-inputtext,
 .p-fluid .p-inputgroup .p-inputtext {
     flex: 1 1 auto;