From fa3df99981f9abfb18adc186c868d8a24316d0b1 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 7 Jun 2021 17:05:27 +0300
Subject: [PATCH] Fixed #1321 - TreeSelect and CascadeSelect material theming
 improvements

---
 public/themes/bootstrap4-dark-blue/theme.css  |  2 +-
 .../themes/bootstrap4-dark-purple/theme.css   |  2 +-
 public/themes/bootstrap4-light-blue/theme.css |  2 +-
 .../themes/bootstrap4-light-purple/theme.css  |  2 +-
 public/themes/md-dark-deeppurple/theme.css    | 93 +++++++++++++++++++
 public/themes/md-dark-indigo/theme.css        | 93 +++++++++++++++++++
 public/themes/md-light-deeppurple/theme.css   | 93 +++++++++++++++++++
 public/themes/md-light-indigo/theme.css       | 93 +++++++++++++++++++
 public/themes/mdc-dark-deeppurple/theme.css   | 93 +++++++++++++++++++
 public/themes/mdc-dark-indigo/theme.css       | 93 +++++++++++++++++++
 public/themes/mdc-light-deeppurple/theme.css  | 93 +++++++++++++++++++
 public/themes/mdc-light-indigo/theme.css      | 93 +++++++++++++++++++
 src/views/floatlabel/FloatLabelDemo.vue       | 50 ++++++++--
 src/views/invalid/InvalidDemo.vue             | 34 ++++++-
 14 files changed, 821 insertions(+), 15 deletions(-)

diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 3046d81b0..d8bdd4fa9 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -2183,7 +2183,7 @@
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
   border: 1px solid #3f4b5b;
-  border-width: 0 0 1px 0;
+  border-width: 1px 0 0 0;
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index cc0a898d6..575182316 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -2183,7 +2183,7 @@
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
   border: 1px solid #3f4b5b;
-  border-width: 0 0 1px 0;
+  border-width: 1px 0 0 0;
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 28f0ba003..6c12e08c2 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -2183,7 +2183,7 @@
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
   border: 1px solid #dee2e6;
-  border-width: 0 0 1px 0;
+  border-width: 1px 0 0 0;
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 41fda70bc..053906a53 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -2183,7 +2183,7 @@
 .p-datatable .p-datatable-tbody > tr > td {
   text-align: left;
   border: 1px solid #dee2e6;
-  border-width: 0 0 1px 0;
+  border-width: 1px 0 0 0;
   padding: 1rem 1rem;
 }
 .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index a737d4d17..10a8ce441 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -5430,6 +5430,11 @@
   background-image: none;
   background: transparent;
 }
+
+.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
 .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
   padding-top: 1.5rem;
   padding-bottom: 0.5rem;
@@ -6124,6 +6129,94 @@
   display: none;
 }
 
+.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-treeselect .p-treeselect-label {
+  border: 0 none;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+}
+
+.p-treeselect-item .p-ink {
+  background-color: rgba(206, 147, 216, 0.16);
+}
+
+.p-input-filled .p-treeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-treeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect .p-treeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
+.p-float-label .p-treeselect-label .p-treeselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+  font-size: 75%;
+}
+.p-input-filled .p-treeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-treeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+
 .p-treetable .p-sortable-column {
   outline: 0 none;
 }
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index c0fde7818..6f56b4182 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -5430,6 +5430,11 @@
   background-image: none;
   background: transparent;
 }
+
+.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
 .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
   padding-top: 1.5rem;
   padding-bottom: 0.5rem;
@@ -6124,6 +6129,94 @@
   display: none;
 }
 
+.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-treeselect .p-treeselect-label {
+  border: 0 none;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+}
+
+.p-treeselect-item .p-ink {
+  background-color: rgba(159, 168, 218, 0.16);
+}
+
+.p-input-filled .p-treeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-treeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect .p-treeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
+.p-float-label .p-treeselect-label .p-treeselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+  font-size: 75%;
+}
+.p-input-filled .p-treeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-treeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+
 .p-treetable .p-sortable-column {
   outline: 0 none;
 }
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index c257a7778..b14b6ae1c 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -5430,6 +5430,11 @@
   background-image: none;
   background: transparent;
 }
+
+.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
 .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
   padding-top: 1.5rem;
   padding-bottom: 0.5rem;
@@ -6124,6 +6129,94 @@
   display: none;
 }
 
+.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-treeselect .p-treeselect-label {
+  border: 0 none;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+}
+
+.p-treeselect-item .p-ink {
+  background-color: rgba(103, 58, 183, 0.16);
+}
+
+.p-input-filled .p-treeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: #f5f5f5 no-repeat;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-treeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: #dcdcdc;
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect .p-treeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
+.p-float-label .p-treeselect-label .p-treeselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+  font-size: 75%;
+}
+.p-input-filled .p-treeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-treeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
+
 .p-treetable .p-sortable-column {
   outline: 0 none;
 }
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index f1bdd0502..901cf2715 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -5430,6 +5430,11 @@
   background-image: none;
   background: transparent;
 }
+
+.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
 .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
   padding-top: 1.5rem;
   padding-bottom: 0.5rem;
@@ -6124,6 +6129,94 @@
   display: none;
 }
 
+.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-treeselect .p-treeselect-label {
+  border: 0 none;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
+}
+
+.p-treeselect-item .p-ink {
+  background-color: rgba(63, 81, 181, 0.16);
+}
+
+.p-input-filled .p-treeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: #f5f5f5 no-repeat;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-treeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: #dcdcdc;
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect .p-treeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
+.p-float-label .p-treeselect-label .p-treeselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+  font-size: 75%;
+}
+.p-input-filled .p-treeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-treeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
+
 .p-treetable .p-sortable-column {
   outline: 0 none;
 }
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index f917fe6a1..6af6e4978 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -5430,6 +5430,11 @@
   background-image: none;
   background: transparent;
 }
+
+.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
 .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
   padding-top: 1.25rem;
   padding-bottom: 0.25rem;
@@ -6124,6 +6129,94 @@
   display: none;
 }
 
+.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-treeselect .p-treeselect-label {
+  border: 0 none;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+}
+
+.p-treeselect-item .p-ink {
+  background-color: rgba(103, 58, 183, 0.16);
+}
+
+.p-input-filled .p-treeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-treeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect .p-treeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
+.p-float-label .p-treeselect-label .p-treeselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+  font-size: 75%;
+}
+.p-input-filled .p-treeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-treeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+
 .p-treetable .p-sortable-column {
   outline: 0 none;
 }
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index b6b284609..3f35ae467 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -5430,6 +5430,11 @@
   background-image: none;
   background: transparent;
 }
+
+.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
 .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
   padding-top: 1.25rem;
   padding-bottom: 0.25rem;
@@ -6124,6 +6129,94 @@
   display: none;
 }
 
+.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-treeselect .p-treeselect-label {
+  border: 0 none;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
+}
+
+.p-treeselect-item .p-ink {
+  background-color: rgba(63, 81, 181, 0.16);
+}
+
+.p-input-filled .p-treeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-treeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect .p-treeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
+.p-float-label .p-treeselect-label .p-treeselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+  font-size: 75%;
+}
+.p-input-filled .p-treeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+
+.p-treeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+
 .p-treetable .p-sortable-column {
   outline: 0 none;
 }
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index b4084361c..77bd4295e 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -5430,6 +5430,11 @@
   background-image: none;
   background: transparent;
 }
+
+.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
 .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
   padding-top: 1.25rem;
   padding-bottom: 0.25rem;
@@ -6124,6 +6129,94 @@
   display: none;
 }
 
+.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-treeselect .p-treeselect-label {
+  border: 0 none;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+}
+
+.p-treeselect-item .p-ink {
+  background-color: rgba(103, 58, 183, 0.16);
+}
+
+.p-input-filled .p-treeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: #f5f5f5 no-repeat;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-treeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: #dcdcdc;
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect .p-treeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
+.p-float-label .p-treeselect-label .p-treeselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+  font-size: 75%;
+}
+.p-input-filled .p-treeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-treeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
+
 .p-treetable .p-sortable-column {
   outline: 0 none;
 }
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 329937b99..0e8fff286 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -5430,6 +5430,11 @@
   background-image: none;
   background: transparent;
 }
+
+.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
 .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
   padding-top: 1.25rem;
   padding-bottom: 0.25rem;
@@ -6124,6 +6129,94 @@
   display: none;
 }
 
+.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-treeselect .p-treeselect-label {
+  border: 0 none;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
+}
+
+.p-treeselect-item .p-ink {
+  background-color: rgba(63, 81, 181, 0.16);
+}
+
+.p-input-filled .p-treeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: #f5f5f5 no-repeat;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-treeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: #dcdcdc;
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-treeselect .p-treeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
+.p-float-label .p-treeselect-label .p-treeselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+  padding-top: 1.25rem;
+  padding-bottom: 0.25rem;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+  font-size: 75%;
+}
+.p-input-filled .p-treeselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+
+.p-treeselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
+}
+
 .p-treetable .p-sortable-column {
   outline: 0 none;
 }
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index 3a65a901f..054a17d83 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -93,8 +93,8 @@
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <span class="p-float-label">
-                            <Textarea id="textarea" v-model="value10" rows="3" />
-                            <label for="textarea">Textarea</label>
+                            <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
+                            <label for="treeselect">TreeSelect</label>
                         </span>
                     </div>
                     <div class="p-field p-col-12 p-md-4">
@@ -103,6 +103,12 @@
                             <label for="password">Password</label>
                         </span>
                     </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <Textarea id="textarea" v-model="value10" rows="3" />
+                            <label for="textarea">Textarea</label>
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -113,6 +119,7 @@
 
 <script>
 import CountryService from '../../service/CountryService';
+import NodeService from '../../service/NodeService';
 
 export default {
     data() {
@@ -140,6 +147,8 @@ export default {
             valueIconLeft: null,
             valueIconRight: null,
             selectedCity: null,
+            nodes: null,
+            selectedNode: null,
             cascadeCountries: [
                 {
                     name: 'Australia',
@@ -306,8 +315,8 @@ export default {
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <span class="p-float-label">
-                        <Textarea id="textarea" v-model="value10" rows="3" />
-                        <label for="textarea">Textarea</label>
+                        <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
+                        <label for="treeselect">TreeSelect</label>
                     </span>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
@@ -316,6 +325,12 @@ export default {
                         <label for="password">Password</label>
                     </span>
                 </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <span class="p-float-label">
+                        <Textarea id="textarea" v-model="value10" rows="3" />
+                        <label for="textarea">Textarea</label>
+                    </span>
+                </div>
             </div>
         </div>
     </div>                    
@@ -323,6 +338,8 @@ export default {
 
 <script>
 import CountryService from './service/CountryService';
+import NodeService from './service/NodeService';
+
 export default {
     data() {
         return {
@@ -349,6 +366,8 @@ export default {
             valueIconLeft: null,
             valueIconRight: null,
             selectedCity: null,
+            nodes: null,
+            selectedNode: null,
             cascadeCountries: [
                 {
                     name: 'Australia',
@@ -428,11 +447,14 @@ export default {
         }
     },
     countryService: null,
+    nodeService: null,
     created() {
         this.countryService = new CountryService();
+        this.nodeService = new NodeService();
     },
     mounted() {
         this.countryService.getCountries().then(data => this.countries = data);
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
     },
     methods: {
         searchCountry(event) {
@@ -541,8 +563,8 @@ export default {
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <span class="p-float-label">
-                        <Textarea id="textarea" v-model="value10" rows="3" />
-                        <label for="textarea">Textarea</label>
+                        <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
+                        <label for="treeselect">TreeSelect</label>
                     </span>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
@@ -551,6 +573,12 @@ export default {
                         <label for="password">Password</label>
                     </span>
                 </div>
+                <div class="p-field p-col-12 p-md-4">
+                    <span class="p-float-label">
+                        <Textarea id="textarea" v-model="value10" rows="3" />
+                        <label for="textarea">Textarea</label>
+                    </span>
+                </div>
             </div>
         </div>
     </div>                    
@@ -559,11 +587,13 @@ export default {
 <script>
 import { ref, onMounted } from 'vue';
 import CountryService from './service/CountryService';
+import NodeService from './service/NodeService';
 
 export default {
     setup() {
         onMounted(() => {
             countryService.value.getCountries().then(data => countries.value = data);
+            nodeService.value.getTreeNodes().then(data => nodes.value = data);
         })
         const countryService = ref(new CountryService());
         const countries = ref();
@@ -589,6 +619,8 @@ export default {
         const valueIconLeft = ref();
         const valueIconRight = ref();
         const selectedCity = ref();
+        const selectedNode = ref();
+        const nodes = ref();
         const cascadeCountries = ref([
             {
                 name: 'Australia',
@@ -680,7 +712,8 @@ export default {
         };
 
         return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4, value5, value6, 
-            value7, value8, value9, value10, value11, valueIconLeft, valueIconRight, selectedCity, cascadeCountries, searchCountry }
+            value7, value8, value9, value10, value11, valueIconLeft, valueIconRight, selectedCity, cascadeCountries, searchCountry,
+            nodes, selectedNode }
     }
 }
 <\\/script>
@@ -690,11 +723,14 @@ export default {
         }
     },
     countryService: null,
+    nodeService: null,
     created() {
         this.countryService = new CountryService();
+        this.nodeService = new NodeService();
     },
     mounted() {
         this.countryService.getCountries().then(data => this.countries = data);
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
     },
     methods: {
         searchCountry(event) {
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index b8c35b58a..2ffa54b14 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -40,11 +40,14 @@
                         <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
                     </div>
                     <div class="p-field p-col-12 p-md-4">
-                        <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
+                        <TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
                     </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -55,6 +58,7 @@
 
 <script>
 import CountryService from '../../service/CountryService';
+import NodeService from '../../service/NodeService';
 
 export default {
     data() {
@@ -79,6 +83,8 @@ export default {
             value9: null,
             value10: null,
             selectedCity: null,
+            nodes: null,
+            selectedNode: null,
             cascadeCountries: [
                 {
                     name: 'Australia',
@@ -191,17 +197,21 @@ export default {
                 <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
             </div>
             <div class="p-field p-col-12 p-md-4">
-                <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
+                <TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
             </div>
             <div class="p-field p-col-12 p-md-4">
                 <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
             </div>
+            <div class="p-field p-col-12 p-md-4">
+                <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
+            </div>
         </div>
     </div>                   
 </template>
 
 <script>
 import CountryService from './service/CountryService';
+import NodeService from './service/NodeService';
 
 export default {
     data() {
@@ -226,6 +236,8 @@ export default {
             value9: null,
             value10: null,
             selectedCity: null,
+            nodes: null,
+            selectedNode: null,
             cascadeCountries: [
                 {
                     name: 'Australia',
@@ -305,11 +317,14 @@ export default {
         }
     },
     countryService: null,
+    nodeService: null,
     created() {
         this.countryService = new CountryService();
+        this.nodeService = new NodeService();
     },
     mounted() {
         this.countryService.getCountries().then(data => this.countries = data);
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
     },
     methods: {
         searchCountry(event) {
@@ -364,22 +379,27 @@ export default {
                 <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
             </div>
             <div class="p-field p-col-12 p-md-4">
-                <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
+                <TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
             </div>
             <div class="p-field p-col-12 p-md-4">
                 <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
             </div>
+            <div class="p-field p-col-12 p-md-4">
+                <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
+            </div>
         </div>
     </div>                   
 </template>
 <script>
 import { ref, onMounted } from 'vue';
 import CountryService from './service/CountryService';
+import NodeService from './service/NodeService';
 
 export default {
     setup() {
         onMounted(() => {
             countryService.value.getCountries().then(data => countries.value = data);
+            nodeService.value.getTreeNodes().then(data => nodes.value = data);
         })
         const countryService = ref(new CountryService());
         const countries = ref();
@@ -402,6 +422,8 @@ export default {
         const value9 = ref();
         const value10 = ref();
         const selectedCity = ref();
+        const selectedNode = ref();
+        const nodes = ref();
         const cascadeCountries = ref([
             {
                 name: 'Australia',
@@ -493,7 +515,8 @@ export default {
         }
 
         return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4, 
-            value5, value6, value7, value8, value9, value10, selectedCity, cascadeCountries, searchCountry }
+            value5, value6, value7, value8, value9, value10, selectedCity, cascadeCountries, searchCountry,
+            nodes, selectedNode  }
 
     }
 }
@@ -504,11 +527,14 @@ export default {
         }
     },
     countryService: null,
+    nodeService: null,
     created() {
         this.countryService = new CountryService();
+        this.nodeService = new NodeService();
     },
     mounted() {
         this.countryService.getCountries().then(data => this.countries = data);
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
     },
     methods: {
         searchCountry(event) {