Fixed #1159 - New TreeSelect Component

public/themes/arya-blue/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #ef9a9a;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1462,6 +1458,76 @@
   border-color: #64B5F6;
 }
 
+.p-treeselect {
+  background: #121212;
+  border: 1px solid #383838;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #64B5F6;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
+  border-color: #64B5F6;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #383838;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #ef9a9a;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #383838;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #383838;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
+
 .p-togglebutton.p-button {
   background: #1e1e1e;
   border: 1px solid #383838;

public/themes/arya-green/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #ef9a9a;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1462,6 +1458,76 @@
   border-color: #81C784;
 }
 
+.p-treeselect {
+  background: #121212;
+  border: 1px solid #383838;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #81C784;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
+  border-color: #81C784;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #383838;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #ef9a9a;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #383838;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #383838;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
+
 .p-togglebutton.p-button {
   background: #1e1e1e;
   border: 1px solid #383838;

public/themes/arya-orange/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #ef9a9a;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1462,6 +1458,76 @@
   border-color: #FFD54F;
 }
 
+.p-treeselect {
+  background: #121212;
+  border: 1px solid #383838;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #FFD54F;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
+  border-color: #FFD54F;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #383838;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #ef9a9a;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #383838;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #383838;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
+
 .p-togglebutton.p-button {
   background: #1e1e1e;
   border: 1px solid #383838;

public/themes/arya-purple/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #ef9a9a;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1462,6 +1458,76 @@
   border-color: #BA68C8;
 }
 
+.p-treeselect {
+  background: #121212;
+  border: 1px solid #383838;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #BA68C8;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+  border-color: #BA68C8;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #383838;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #ef9a9a;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #383838;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #383838;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #383838;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #383838;
+}
+
 .p-togglebutton.p-button {
   background: #1e1e1e;
   border: 1px solid #383838;

public/themes/bootstrap4-dark-blue/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.15s;
 }
 
-.p-float-label > label.p-error {
-  color: #f19ea6;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1474,6 +1470,76 @@
   border-color: #56bdff;
 }
 
+.p-treeselect {
+  background: #20262e;
+  border: 1px solid #3f4b5b;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #3f4b5b;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+  border-color: #8dd0ff;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.75rem;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #3f4b5b;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f19ea6;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.75rem;
+}
+
+.p-treeselect-panel {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #3f4b5b;
+  border-radius: 4px;
+  box-shadow: none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1.5rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #3f4b5b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #3f4b5b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #3f4b5b;
+}
+
 .p-togglebutton.p-button {
   background: #6c757d;
   border: 1px solid #6c757d;

public/themes/bootstrap4-dark-purple/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.15s;
 }
 
-.p-float-label > label.p-error {
-  color: #f19ea6;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1474,6 +1470,76 @@
   border-color: #aa70c7;
 }
 
+.p-treeselect {
+  background: #20262e;
+  border: 1px solid #3f4b5b;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #3f4b5b;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.75rem;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #3f4b5b;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f19ea6;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.75rem;
+}
+
+.p-treeselect-panel {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #3f4b5b;
+  border-radius: 4px;
+  box-shadow: none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1.5rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #3f4b5b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #3f4b5b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #3f4b5b;
+}
+
 .p-togglebutton.p-button {
   background: #6c757d;
   border: 1px solid #6c757d;

public/themes/bootstrap4-light-blue/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.15s;
 }
 
-.p-float-label > label.p-error {
-  color: #dc3545;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #495057;
@@ -1474,6 +1470,76 @@
   border-color: #0069d9;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #ced4da;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-color: #007bff;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.75rem;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #6c757d;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #dee2e6;
+  color: #212529;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #495057;
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #dc3545;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.75rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #212529;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-shadow: none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1.5rem;
+  color: #212529;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #efefef;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #efefef;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #efefef;
+}
+
 .p-togglebutton.p-button {
   background: #6c757d;
   border: 1px solid #6c757d;

public/themes/bootstrap4-light-purple/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.15s;
 }
 
-.p-float-label > label.p-error {
-  color: #dc3545;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: #495057;
@@ -1474,6 +1470,76 @@
   border-color: #7a38a7;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #ced4da;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.75rem;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #6c757d;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #dee2e6;
+  color: #212529;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #495057;
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #dc3545;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.75rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #212529;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-shadow: none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1.5rem;
+  color: #212529;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #efefef;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #efefef;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #efefef;
+}
+
 .p-togglebutton.p-button {
   background: #6c757d;
   border: 1px solid #6c757d;

public/themes/fluent-light/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #a4252c;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #605e5c;
@@ -1462,6 +1458,76 @@
   border-color: #005a9e;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #605e5c;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 2px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #323130;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #605e5c;
+  border-color: #0078d4;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #605e5c;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #edebe9;
+  color: #323130;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #605e5c;
+  width: 2.357rem;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #a4252c;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #323130;
+  border: 0 none;
+  border-radius: 2px;
+  box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.75rem 0.5rem;
+  color: #323130;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #faf9f8;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #faf9f8;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #faf9f8;
+}
+
 .p-togglebutton.p-button {
   background: #ffffff;
   border: 1px solid #605e5c;

public/themes/luna-amber/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #e57373;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
@@ -1474,6 +1470,76 @@
   border-color: #FFE082;
 }
 
+.p-treeselect {
+  background: #191919;
+  border: 1px solid #4b4b4b;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #FFE082;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+  border-color: #FFE082;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.429rem 0.429rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #9b9b9b;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #4b4b4b;
+  color: #dedede;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #888888;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #e57373;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
+.p-treeselect-panel {
+  background: #323232;
+  color: #dedede;
+  border: 1px solid #191919;
+  border-radius: 3px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.429rem 0.857rem;
+  color: #dedede;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #4b4b4b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
+
 .p-togglebutton.p-button {
   background: #252525;
   border: 1px solid #252525;

public/themes/luna-blue/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #e57373;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
@@ -1474,6 +1470,76 @@
   border-color: #81D4FA;
 }
 
+.p-treeselect {
+  background: #191919;
+  border: 1px solid #4b4b4b;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #81D4FA;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+  border-color: #81D4FA;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.429rem 0.429rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #9b9b9b;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #4b4b4b;
+  color: #dedede;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #888888;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #e57373;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
+.p-treeselect-panel {
+  background: #323232;
+  color: #dedede;
+  border: 1px solid #191919;
+  border-radius: 3px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.429rem 0.857rem;
+  color: #dedede;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #4b4b4b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
+
 .p-togglebutton.p-button {
   background: #252525;
   border: 1px solid #252525;

public/themes/luna-green/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #e57373;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
@@ -1474,6 +1470,76 @@
   border-color: #C5E1A5;
 }
 
+.p-treeselect {
+  background: #191919;
+  border: 1px solid #4b4b4b;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #C5E1A5;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+  border-color: #C5E1A5;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.429rem 0.429rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #9b9b9b;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #4b4b4b;
+  color: #dedede;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #888888;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #e57373;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
+.p-treeselect-panel {
+  background: #323232;
+  color: #dedede;
+  border: 1px solid #191919;
+  border-radius: 3px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.429rem 0.857rem;
+  color: #dedede;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #4b4b4b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
+
 .p-togglebutton.p-button {
   background: #252525;
   border: 1px solid #252525;

public/themes/luna-pink/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #e57373;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #888888;
@@ -1474,6 +1470,76 @@
   border-color: #F48FB1;
 }
 
+.p-treeselect {
+  background: #191919;
+  border: 1px solid #4b4b4b;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #F48FB1;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+  border-color: #F48FB1;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.429rem 0.429rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #9b9b9b;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #4b4b4b;
+  color: #dedede;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #888888;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #e57373;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
+.p-treeselect-panel {
+  background: #323232;
+  color: #dedede;
+  border: 1px solid #191919;
+  border-radius: 3px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.429rem 0.857rem;
+  color: #dedede;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #4b4b4b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #4b4b4b;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #4b4b4b;
+}
+
 .p-togglebutton.p-button {
   background: #252525;
   border: 1px solid #252525;

public/themes/md-dark-deeppurple/theme.css

@@ -1027,10 +1027,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #f44435;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1482,76 @@
   border-color: 0 none;
 }
 
+.p-treeselect {
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #CE93D8;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 1rem 1rem;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f44435;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.5rem 1rem;
+}
+
+.p-treeselect-panel {
+  background: #2b2b2b;
+  color: rgba(255, 255, 255, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 1rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: rgba(255, 255, 255, 0.06);
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .p-togglebutton.p-button {
   background: #2f2f2f;
   border: 1px solid rgba(255, 255, 255, 0.12);

public/themes/md-dark-indigo/theme.css

@@ -1027,10 +1027,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #f44435;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1482,76 @@
   border-color: 0 none;
 }
 
+.p-treeselect {
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #9FA8DA;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 1rem 1rem;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f44435;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.5rem 1rem;
+}
+
+.p-treeselect-panel {
+  background: #2b2b2b;
+  color: rgba(255, 255, 255, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 1rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: rgba(255, 255, 255, 0.06);
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .p-togglebutton.p-button {
   background: #2f2f2f;
   border: 1px solid rgba(255, 255, 255, 0.12);

public/themes/md-light-deeppurple/theme.css

@@ -1027,10 +1027,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #B00020;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1486,6 +1482,76 @@
   border-color: 0 none;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.38);
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #673AB7;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 1rem 1rem;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #B00020;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.5rem 1rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 1rem 1rem;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f5f5f5;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
+
 .p-togglebutton.p-button {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.12);

public/themes/md-light-indigo/theme.css

@@ -1027,10 +1027,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #B00020;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 1rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1486,6 +1482,76 @@
   border-color: 0 none;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.38);
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 1rem 1rem;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #B00020;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.5rem 1rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 1rem 1rem;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f5f5f5;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
+
 .p-togglebutton.p-button {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.12);

public/themes/mdc-dark-deeppurple/theme.css

@@ -1027,10 +1027,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #f44435;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1482,76 @@
   border-color: 0 none;
 }
 
+.p-treeselect {
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #673AB7;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.75rem 0.75rem;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.375rem 0.75rem;
+  margin-right: 0.5rem;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f44435;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.375rem 0.75rem;
+}
+
+.p-treeselect-panel {
+  background: #2b2b2b;
+  color: rgba(255, 255, 255, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.75rem 0.75rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: rgba(255, 255, 255, 0.06);
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .p-togglebutton.p-button {
   background: #2f2f2f;
   border: 1px solid rgba(255, 255, 255, 0.12);

public/themes/mdc-dark-indigo/theme.css

@@ -1027,10 +1027,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #f44435;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1486,6 +1482,76 @@
   border-color: 0 none;
 }
 
+.p-treeselect {
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.75rem 0.75rem;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.375rem 0.75rem;
+  margin-right: 0.5rem;
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f44435;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.375rem 0.75rem;
+}
+
+.p-treeselect-panel {
+  background: #2b2b2b;
+  color: rgba(255, 255, 255, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.75rem 0.75rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: rgba(255, 255, 255, 0.06);
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
 .p-togglebutton.p-button {
   background: #2f2f2f;
   border: 1px solid rgba(255, 255, 255, 0.12);

public/themes/mdc-light-deeppurple/theme.css

@@ -1027,10 +1027,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #B00020;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1486,6 +1482,76 @@
   border-color: 0 none;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.38);
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #673AB7;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.75rem 0.75rem;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.375rem 0.75rem;
+  margin-right: 0.5rem;
+  background: rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #B00020;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.375rem 0.75rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.75rem 0.75rem;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f5f5f5;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
+
 .p-togglebutton.p-button {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.12);

public/themes/mdc-light-indigo/theme.css

@@ -1027,10 +1027,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #B00020;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.75rem;
   color: rgba(0, 0, 0, 0.6);
@@ -1486,6 +1482,76 @@
   border-color: 0 none;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.38);
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  border-radius: 4px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.75rem 0.75rem;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.375rem 0.75rem;
+  margin-right: 0.5rem;
+  background: rgba(0, 0, 0, 0.12);
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #B00020;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.375rem 0.75rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.75rem 0.75rem;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f5f5f5;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
+
 .p-togglebutton.p-button {
   background: #ffffff;
   border: 1px solid rgba(0, 0, 0, 0.12);

public/themes/nova-accent/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #a80000;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
@@ -1462,6 +1458,76 @@
   border-color: #007ad9;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #a6a6a6;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #212121;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+  border-color: #007ad9;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.429rem 0.429rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #666666;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #c8c8c8;
+  color: #333333;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #848484;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #a80000;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.429rem 0.857rem;
+  color: #333333;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
+
 .p-togglebutton.p-button {
   background: #dadada;
   border: 1px solid #dadada;

public/themes/nova-alt/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #a80000;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
@@ -1474,6 +1470,76 @@
   border-color: #007ad9;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #a6a6a6;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #212121;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+  border-color: #007ad9;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.429rem 0.429rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #666666;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #c8c8c8;
+  color: #333333;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #848484;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #a80000;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.429rem 0.857rem;
+  color: #333333;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
+
 .p-togglebutton.p-button {
   background: #dadada;
   border: 1px solid #dadada;

public/themes/nova-vue/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #a80000;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
@@ -1474,6 +1470,76 @@
   border-color: #41b883;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #a6a6a6;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #212121;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #c2e9d8;
+  border-color: #41b883;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.429rem 0.429rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #666666;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #c8c8c8;
+  color: #333333;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #848484;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #a80000;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.429rem 0.857rem;
+  color: #333333;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
+
 .p-togglebutton.p-button {
   background: #dadada;
   border: 1px solid #dadada;

public/themes/nova/theme.css

@@ -1007,10 +1007,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #a80000;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #848484;
@@ -1474,6 +1470,76 @@
   border-color: #007ad9;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #a6a6a6;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #212121;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+  border-color: #007ad9;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.429rem 0.429rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #666666;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #c8c8c8;
+  color: #333333;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #848484;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #a80000;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #333333;
+  border: 1px solid #c8c8c8;
+  border-radius: 3px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.429rem 0.857rem;
+  color: #333333;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
+
 .p-togglebutton.p-button {
   background: #dadada;
   border: 1px solid #dadada;

public/themes/rhea/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #e7a3a3;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.429rem;
   color: #a6a6a6;
@@ -1462,6 +1458,76 @@
   border-color: #7B95A3;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #dadada;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 2px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #a6a6a6;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #e4e9ec;
+  border-color: #7B95A3;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.429rem 0.429rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #a6a6a6;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.2145rem 0.429rem;
+  margin-right: 0.5rem;
+  background: #dadada;
+  color: #666666;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #a6a6a6;
+  width: 2.357rem;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #e7a3a3;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.2145rem 0.429rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #666666;
+  border: 1px solid #eaeaea;
+  border-radius: 2px;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.429rem 0.857rem;
+  color: #666666;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #f4f4f4;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #f4f4f4;
+}
+
 .p-togglebutton.p-button {
   background: #eaeaea;
   border: 1px solid #eaeaea;

public/themes/saga-blue/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #f44336;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
@@ -1462,6 +1458,76 @@
   border-color: #2196F3;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #2196F3;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #a6d5fa;
+  border-color: #2196F3;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #6c757d;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #dee2e6;
+  color: #495057;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #6c757d;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f44336;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #495057;
+  border: 0 none;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: #495057;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f8f9fa;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #ffffff;
+}
+
 .p-togglebutton.p-button {
   background: #ffffff;
   border: 1px solid #ced4da;

public/themes/saga-green/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #f44336;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
@@ -1462,6 +1458,76 @@
   border-color: #4CAF50;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #4CAF50;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #b7e0b8;
+  border-color: #4CAF50;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #6c757d;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #dee2e6;
+  color: #495057;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #6c757d;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f44336;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #495057;
+  border: 0 none;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: #495057;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f8f9fa;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #ffffff;
+}
+
 .p-togglebutton.p-button {
   background: #ffffff;
   border: 1px solid #ced4da;

public/themes/saga-orange/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #f44336;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
@@ -1462,6 +1458,76 @@
   border-color: #FFC107;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #FFC107;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #ffe69c;
+  border-color: #FFC107;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #6c757d;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #dee2e6;
+  color: #495057;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #6c757d;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f44336;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #495057;
+  border: 0 none;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: #495057;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f8f9fa;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #ffffff;
+}
+
 .p-togglebutton.p-button {
   background: #ffffff;
   border: 1px solid #ced4da;

public/themes/saga-purple/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #f44336;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: #6c757d;
@@ -1462,6 +1458,76 @@
   border-color: #9C27B0;
 }
 
+.p-treeselect {
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #9C27B0;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #df9eea;
+  border-color: #9C27B0;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: #6c757d;
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #dee2e6;
+  color: #495057;
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: #6c757d;
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #f44336;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #ffffff;
+  color: #495057;
+  border: 0 none;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: #495057;
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #f8f9fa;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #f8f9fa;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #ffffff;
+}
+
 .p-togglebutton.p-button {
   background: #ffffff;
   border: 1px solid #ced4da;

public/themes/vela-blue/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #ef9a9a;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1462,6 +1458,76 @@
   border-color: #64B5F6;
 }
 
+.p-treeselect {
+  background: #17212f;
+  border: 1px solid #304562;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #64B5F6;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
+  border-color: #64B5F6;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #304562;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #ef9a9a;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #1f2d40;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #304562;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #304562;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
+
 .p-togglebutton.p-button {
   background: #1f2d40;
   border: 1px solid #304562;

public/themes/vela-green/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #ef9a9a;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1462,6 +1458,76 @@
   border-color: #81C784;
 }
 
+.p-treeselect {
+  background: #17212f;
+  border: 1px solid #304562;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #81C784;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
+  border-color: #81C784;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #304562;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #ef9a9a;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #1f2d40;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #304562;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #304562;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
+
 .p-togglebutton.p-button {
   background: #1f2d40;
   border: 1px solid #304562;

public/themes/vela-orange/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #ef9a9a;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1462,6 +1458,76 @@
   border-color: #FFD54F;
 }
 
+.p-treeselect {
+  background: #17212f;
+  border: 1px solid #304562;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #FFD54F;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
+  border-color: #FFD54F;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #304562;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #ef9a9a;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #1f2d40;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #304562;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #304562;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
+
 .p-togglebutton.p-button {
   background: #1f2d40;
   border: 1px solid #304562;

public/themes/vela-purple/theme.css

@@ -1003,10 +1003,6 @@
   transition-duration: 0.2s;
 }
 
-.p-float-label > label.p-error {
-  color: #ef9a9a;
-}
-
 .p-input-icon-left > i:first-of-type {
   left: 0.5rem;
   color: rgba(255, 255, 255, 0.6);
@@ -1462,6 +1458,76 @@
   border-color: #BA68C8;
 }
 
+.p-treeselect {
+  background: #17212f;
+  border: 1px solid #304562;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  border-radius: 3px;
+}
+.p-treeselect:not(.p-disabled):hover {
+  border-color: #BA68C8;
+}
+.p-treeselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+  border-color: #BA68C8;
+}
+.p-treeselect .p-treeselect-label {
+  padding: 0.5rem 0.5rem;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-treeselect .p-treeselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-treeselect.p-treeselect-chip .p-treeselect-token {
+  padding: 0.25rem 0.5rem;
+  margin-right: 0.5rem;
+  background: #304562;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 16px;
+}
+.p-treeselect .p-treeselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.p-treeselect.p-invalid.p-component {
+  border-color: #ef9a9a;
+}
+
+.p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+  padding: 0.25rem 0.5rem;
+}
+
+.p-treeselect-panel {
+  background: #1f2d40;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #304562;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+  border: 0 none;
+}
+.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+  padding: 0.5rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+
+.p-input-filled .p-treeselect {
+  background: #304562;
+}
+.p-input-filled .p-treeselect:not(.p-disabled):hover {
+  background-color: #304562;
+}
+.p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+  background-color: #304562;
+}
+
 .p-togglebutton.p-button {
   background: #1f2d40;
   border: 1px solid #304562;

rollup.config.js

@@ -25,6 +25,7 @@ let globalDependencies = {
     'primevue/message': 'primevue.message',
     'primevue/dropdown': 'primevue.dropdown',
     'primevue/menu': 'primevue.menu',
+    'primevue/tree': 'primevue.tree',
     '@fullcalendar/core': 'FullCalendar'
 }
 

src/assets/menu/menu.json

@@ -90,8 +90,7 @@
                 },
                 {
                     "name": "Colors",
-                    "to": "/colors",
+                    "to": "/colors"
-                    "badge": "New"
                 },
                 {
                     "name": "SASS API",
@@ -153,8 +152,7 @@
             "children": [
                 {
                     "name": "AutoComplete",
-                    "to": "/autocomplete",
+                    "to": "/autocomplete"
-                    "badge": "New"
                 },
                 {
                     "name": "Calendar",
@@ -178,8 +176,7 @@
                 },
                 {
                     "name": "Dropdown",
-                    "to": "/dropdown",
+                    "to": "/dropdown"
-                    "badge": "New"
                 },
                 {
                     "name": "Editor",
@@ -219,13 +216,11 @@
                 },
                 {
                     "name": "Listbox",
-                    "to": "/listbox",
+                    "to": "/listbox"
-                    "badge": "New"
                 },
                 {
                     "name": "MultiSelect",
-                    "to": "/multiselect",
+                    "to": "/multiselect"
-                    "badge": "New"
                 },
                 {
                     "name": "Password",
@@ -255,6 +250,11 @@
                     "name": "ToggleButton",
                     "to": "/togglebutton"
                 },
+                {
+                    "name": "TreeSelect",
+                    "to": "/treeselect",
+                    "badge": "New"
+                },
                 {
                     "name": "TriStateCheckbox",
                     "to": "/tristatecheckbox"
@@ -281,8 +281,7 @@
             "children": [
                 {
                     "name": "Vuelidate",
-                    "to": "/vuelidate",
+                    "to": "/vuelidate"
-                    "badge": "New"
                 }
             ]
         },
@@ -293,7 +292,6 @@
                 {
                     "name": "DataTable",
                     "meta": ["datatable"],
-                    "badge": "New",
                     "children": [
                         {
                             "name": "Documentation",
@@ -337,8 +335,7 @@
                         },
                         {
                             "name": "Filter",
-                            "to": "/datatable/filter",
+                            "to": "/datatable/filter"
-                            "badge": "New"
                         },
                         {
                             "name": "Selection",
@@ -350,8 +347,7 @@
                         },
                         {
                             "name": "Scroll",
-                            "to": "/datatable/scroll",
+                            "to": "/datatable/scroll"
-                            "badge": "New"
                         },
                         {
                             "name": "FlexScroll",
@@ -387,8 +383,7 @@
                         },
                         {
                             "name": "Responsive",
-                            "to": "/datatable/responsive",
+                            "to": "/datatable/responsive"
-                            "badge": "New"
                         },
                         {
                             "name": "Export",
@@ -414,8 +409,7 @@
                 },
                 {
                     "name": "FilterService",
-                    "to": "/filterservice",
+                    "to": "/filterservice"
-                    "badge": "New"
                 },
                 {
                     "name": "FullCalendar",

src/assets/styles/app/_content.scss

@@ -192,6 +192,12 @@
                 td {
                     padding: 1rem;
                     border-bottom: 1px solid var(--surface-d);
+
+                    &:first-child {
+                        font-family: Courier New,monospace;
+                        font-weight: 700;
+                        color: var(--text-color-secondary);
+                    }
                 }
             }
         }

src/components/dropdown/Dropdown.vue

@@ -2,7 +2,7 @@
     <div ref="container" :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
             <input ref="focusInput" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
-                aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
+                aria-haspopup="true" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
         </div>
         <input v-if="editable" type="text" class="p-dropdown-label p-inputtext" :disabled="disabled" @focus="onFocus" @blur="onBlur" :placeholder="placeholder" :value="editableInputValue" @input="onEditableInput"
             aria-haspopup="listbox" :aria-expanded="overlayVisible">

src/components/multiselect/MultiSelect.vue

@@ -2,7 +2,7 @@
     <div ref="container" :class="containerClass" @click="onClick">
         <div class="p-hidden-accessible">
             <input ref="focusInput" type="text" role="listbox" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
-                aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
+                aria-haspopup="true" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
         </div>
         <div class="p-multiselect-label-container">
             <div :class="labelClass">

src/components/tree/TreeNode.vue

@@ -176,7 +176,7 @@ export default {
             let checkedChildCount = 0;
             let childPartialSelected = false;
 
-            for(let child of this.node.children) {
+            for (let child of this.node.children) {
                 if(_selectionKeys[child.key] && _selectionKeys[child.key].checked)
                     checkedChildCount++;
                 else if(_selectionKeys[child.key] && _selectionKeys[child.key].partialChecked)
@@ -191,10 +191,10 @@ export default {
                     delete _selectionKeys[this.node.key];
                 }
 
-                if(childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
+                if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.node.children.length))
                     _selectionKeys[this.node.key] = {checked: false, partialChecked: true};
                 else
-                    _selectionKeys[this.node.key] = {checked: false, partialChecked: false};
+                    delete _selectionKeys[this.node.key];
             }
 
             this.$emit('checkbox-change', {

src/components/treeselect/TreeSelect.d.ts

@@ -0,0 +1,39 @@
+import { VNode } from 'vue';
+
+interface TreeSelectProps {
+    modelValue?: any;
+    options?: any[];
+    scrollHeight?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    tabindex?: string;
+    inputId?: string;
+    ariaLabelledBy?: string;
+    selectionMode?: string;
+    panelClass?: string;
+    appendTo?: string;
+    emptyMessage?: string;
+    display?: string;
+    metaKeySelection?: boolean;
+}
+
+declare class TreeSelect {
+    $props: TreeSelectProps;
+    $emit(eventName: 'update:modelValue', value: any): this;
+    $emit(eventName: 'change', value: any): this;
+    $emit(eventName: 'before-show'): this;
+    $emit(eventName: 'before-hide'): this;
+    $emit(eventName: 'show'): this;
+    $emit(eventName: 'hide'): this;
+    $emit(eventName: 'node-select', node: any): this;
+    $emit(eventName: 'node-unselect', node: any): this;
+    $emit(eventName: 'node-expand', node: any): this;
+    $emit(eventName: 'node-collapse', node: any): this;
+    $slots: {
+        value: VNode[];
+        header: VNode[];
+        footer: VNode[];
+    }
+}
+
+export default TreeSelect;

src/components/treeselect/TreeSelect.vue

@@ -0,0 +1,410 @@
+<template>
+    <div ref="container" :class="containerClass" @click="onClick">
+        <div class="p-hidden-accessible">
+            <input ref="focusInput" type="text" role="listbox" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
+                aria-haspopup="true" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy"/>
+        </div>
+        <div class="p-treeselect-label-container">
+            <div :class="labelClass">
+                <slot name="value" :value="selectedNodes" :placeholder="placeholder">
+                    <template v-if="display === 'comma'">
+                        {{label || 'empty'}}
+                    </template>
+                    <template v-else-if="display === 'chip'">
+                        <div v-for="node of selectedNodes" class="p-treeselect-token" :key="node.key">
+                            <span class="p-treeselect-token-label">{{node.label}}</span>
+                        </div>
+                        <template v-if="emptyValue">{{placeholder || 'empty'}}</template>
+                    </template>
+                </slot>
+            </div>
+        </div>
+        <div class="p-treeselect-trigger">
+            <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
+        </div>
+        <Teleport :to="appendTo">
+            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
+                <div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="['p-treeselect-panel p-component', panelClass]">
+                    <slot name="header" :value="modelValue" :options="options"></slot>
+                    <div class="p-treeselect-items-wrapper" :style="{'max-height': scrollHeight}">
+                        <TSTree :value="options" :selectionMode="selectionMode" @update:selectionKeys="onSelectionChange" :selectionKeys="modelValue"
+                            :expandedKeys="expandedKeys" @update:expandedKeys="onNodeToggle" :metaKeySelection="metaKeySelection"
+                            @node-expand="$emit('node-expand', $event)" @node-collapse="$emit('node-collapse', $event)"
+                            @node-select="onNodeSelect" @node-unselect="onNodeUnselect" />
+                        <div v-if="emptyOptions" class="p-treeselect-empty-message">
+                            <slot name="empty">{{emptyMessageText}}</slot>
+                        </div>
+                    </div>
+                    <slot name="footer" :value="modelValue" :options="options"></slot>
+                </div>
+            </transition>
+        </Teleport>
+    </div>
+</template>
+
+<script>
+import {ConnectedOverlayScrollHandler,DomHandler} from 'primevue/utils';
+import OverlayEventBus from 'primevue/overlayeventbus';
+import Tree from 'primevue/tree';
+import Ripple from 'primevue/ripple';
+
+export default {
+    emits: ['update:modelValue', 'before-show', 'before-hide', 'change', 'show', 'hide', 'node-select', 'node-unselect', 'node-expand', 'node-collapse'],
+    props: {
+        modelValue: null,
+        options: Array,
+		scrollHeight: {
+			type: String,
+			default: '400px'
+		},
+		placeholder: String,
+		disabled: Boolean,
+        tabindex: String,
+        inputId: String,
+        ariaLabelledBy: null,
+        selectionMode: {
+            type: String,
+            default: 'single'
+        },
+        panelClass: {
+            type: String,
+            default: null
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        emptyMessage: {
+            type: String,
+            default: null
+        },
+        display: {
+            type: String,
+            default: 'comma'
+        },
+        metaKeySelection: {
+            type: Boolean,
+            default: true
+        }
+    },
+    watch: {
+        modelValue() {
+            this.touched = false;
+        }
+    },
+    data() {
+        return {
+            focused: false,
+            overlayVisible: false,
+            expandedKeys: {},
+            touched: false
+        };
+    },
+    outsideClickListener: null,
+    resizeListener: null,
+    scrollHandler: null,
+    overlay: null,
+    beforeUnmount() {
+        this.unbindOutsideClickListener();
+        this.unbindResizeListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+        this.overlay = null;
+    },
+    methods: {
+        show() {
+            this.$emit('before-show');
+            this.overlayVisible = true;
+        },
+        hide() {
+            this.$emit('before-hide');
+            this.overlayVisible = false;
+        },
+        onFocus() {
+            this.focused = true;
+        },
+        onBlur() {
+            this.focused = false;
+        },
+        onClick(event) {
+            if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
+                if (this.overlayVisible)
+                    this.hide();
+                else
+                    this.show();
+
+                this.$refs.focusInput.focus();
+            }
+        },
+        onSelectionChange(keys) {
+            this.$emit('update:modelValue', keys);
+            this.$emit('change', keys);
+        },
+        onNodeSelect(node) {
+            this.$emit('node-select', node);
+
+            if (this.selectionMode === 'single') {
+                this.hide();
+            }
+        },
+        onNodeUnselect(node) {
+            this.$emit('node-select', node);
+        },
+        onNodeToggle(keys) {
+            this.expandedKeys = keys;
+            this.touched = true;
+        },
+        onKeyDown(event) {
+            switch(event.which) {
+                //down
+                case 40:
+                    if (!this.overlayVisible && event.altKey) {
+                        this.show();
+                    }
+                break;
+
+                //space
+                case 32:
+                    if (!this.overlayVisible) {
+                        this.show();
+                        event.preventDefault();
+                    }
+                break;
+
+                //enter and escape
+                case 13:
+                case 27:
+                    if (this.overlayVisible) {
+                        this.hide();
+                        event.preventDefault();
+                    }
+                break;
+
+                //tab
+                case 9:
+                    this.hide();
+                break;
+
+                default:
+                break;
+            }
+        },
+        onOverlayEnter() {
+            this.overlay.style.zIndex = String(DomHandler.generateZIndex());
+            this.alignOverlay();
+            this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
+            this.$emit('show');
+        },
+        onOverlayLeave() {
+            this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
+            this.$emit('hide');
+            this.overlay = null;
+        },
+        alignOverlay() {
+            this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+            DomHandler.absolutePosition(this.overlay, this.$el);
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.overlayVisible && this.isOutsideClicked(event)) {
+                        this.hide();
+                    }
+                };
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible) {
+                        this.hide();
+                    }
+                };
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
+        isOutsideClicked(event) {
+            return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+        },
+        overlayRef(el) {
+            this.overlay = el;
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
+        },
+        searchBranch(node, parentNode, keys, selectedNodes) {
+            if (node) {
+                if (this.isSelected(node, keys)) {
+                    selectedNodes.push(node);
+                    if (parentNode && !this.touched) {
+                        this.expandedKeys[parentNode.key] = true;
+                    }
+                    delete keys[node.key];
+                }
+
+                if (Object.keys(keys).length && node.children) {
+                    for (let childNode of node.children) {
+                        this.searchBranch(childNode, node, keys, selectedNodes);
+                    }
+                }
+            }
+            else {
+                for (let childNode of this.options) {
+                    this.searchBranch(childNode, null, keys, selectedNodes);
+                }
+            }
+        },
+        isSelected(node, keys) {
+            return this.selectionMode === 'checkbox' ? keys[node.key] && keys[node.key].checked : keys[node.key];
+        }
+    },
+    computed: {
+        containerClass() {
+            return [
+                'p-treeselect p-component p-inputwrapper',
+                {
+                    'p-treeselect-chip': this.display === 'chip',
+                    'p-disabled': this.disabled,
+                    'p-focus': this.focused,
+                    'p-inputwrapper-filled': !this.emptyValue,
+                    'p-inputwrapper-focus': this.focused || this.overlayVisible
+                }
+            ];
+        },
+        labelClass() {
+            return [
+                'p-treeselect-label',
+                {
+                    'p-placeholder': this.label === this.placeholder,
+                    'p-treeselect-label-empty': !this.placeholder && this.emptyValue
+                }
+            ];
+        },
+        selectedNodes() {
+            let selectedNodes = [];
+            if (this.modelValue && this.options) {
+                let keys = {...this.modelValue};
+                this.searchBranch(null, null, keys, selectedNodes);
+            }
+
+            return selectedNodes;
+        },
+        label() {
+            let value = this.selectedNodes;
+            return value.length ? value.map(node => node.label).join(', '): this.placeholder;            
+        },
+        emptyMessageText() {
+            return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
+        },
+        emptyValue() {
+            return !this.modelValue || Object.keys(this.modelValue).length === 0;
+        },
+        emptyOptions() {
+            return !this.options || this.options.length === 0;
+        }
+    },
+    components: {
+        'TSTree': Tree
+    },
+    directives: {
+        'ripple': Ripple
+    }
+}
+</script>
+
+<style>
+.p-treeselect {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+}
+
+.p-treeselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.p-treeselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+}
+
+.p-treeselect-label  {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.p-treeselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.p-treeselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-treeselect .p-treeselect-panel {
+    min-width: 100%;
+}
+
+.p-treeselect-panel {
+    position: absolute;
+}
+
+.p-treeselect-items-wrapper {
+    overflow: auto;
+}
+
+.p-fluid .p-treeselect {
+    display: flex;
+}
+</style>

src/components/treeselect/package.json

@@ -0,0 +1,9 @@
+{
+    "main": "./treeselect.cjs.js",
+    "module": "./treeselect.esm.js",
+    "unpkg": "./treeselect.min.js",
+    "types": "./TreeSelect.d.ts",
+    "browser": {
+      "./sfc": "./TreeSelect.vue"
+    }
+  }

src/main.js

@@ -85,6 +85,7 @@ import Textarea from './components/textarea/Textarea';
 import TieredMenu from './components/tieredmenu/TieredMenu';
 import Timeline from './components/timeline/Timeline';
 import Tree from './components/tree/Tree';
+import TreeSelect from './components/treeselect/TreeSelect';
 import TreeTable from './components/treetable/TreeTable';
 import Toast from './components/toast/Toast';
 import ToastService from './components/toastservice/ToastService';
@@ -205,6 +206,7 @@ app.component('Toast', Toast);
 app.component('Toolbar', Toolbar);
 app.component('ToggleButton', ToggleButton);
 app.component('Tree', Tree);
+app.component('TreeSelect', TreeSelect);
 app.component('TreeTable', TreeTable);
 app.component('TriStateCheckbox', TriStateCheckbox);
 app.component('Galleria', Galleria);

src/router/index.js

@@ -706,6 +706,11 @@ const routes = [
         name: 'treefilter',
         component: () => import('../views/tree/TreeFilterDemo.vue')
     },
+    {
+        path: '/treeselect',
+        name: 'treeselect',
+        component: () => import('../views/treeselect/TreeSelectDemo.vue')
+    },
     {
         path: '/treetable',
         name: 'treetable',

src/views/treeselect/TreeSelectDemo.vue

@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>TreeSelect</h1>
+                <p>TreeSelect is a form component to choose from hierarchical data.</p>
+            </div>
+            <AppDemoActions />
+        </div>
+
+        <div class="content-section implementation">
+            <div class="card">
+                <h5>Single</h5>
+                <TreeSelect v-model="selectedNode" :options="nodes" placeholder="Select Item"></TreeSelect>
+
+                <h5>Multiple</h5>
+                <TreeSelect v-model="selectedNodes1" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Items"></TreeSelect>
+
+                <h5>Checkbox</h5>
+                <TreeSelect v-model="selectedNodes2" :options="nodes" display="chip" selectionMode="checkbox"  placeholder="Select Items"></TreeSelect>
+            </div>
+        </div>
+
+        <TreeSelectDoc />
+    </div>
+</template>
+
+<script>
+import NodeService from '../../service/NodeService';
+import TreeSelectDoc from './TreeSelectDoc';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedNode: null,
+            selectedNodes1: null,
+            selectedNodes2: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
+    },
+    components: {
+        'TreeSelectDoc': TreeSelectDoc
+    }
+}
+</script>
+
+<style scoped>
+.p-treeselect {
+    width:19rem;
+}
+
+@media screen and (max-width: 640px) {
+    .p-treeselect {
+        width: 100%;
+    }
+}
+</style>

src/views/treeselect/TreeSelectDoc.vue

@@ -0,0 +1,607 @@
+<template>
+	<AppDoc name="TreeSelectDemo" :sources="sources" github="treeselect/TreeSelectDemo.vue">
+        <h5>Import</h5>
+<pre v-code.script><code>
+import TreeSelect from 'primevue/treeselect';
+
+</code></pre>
+
+        <h5>Getting Started</h5>
+		<p>TreeSelect component requires an array of TreeNode objects as its <i>options</i> and keys of the nodes as its value.</p>
+
+<pre v-code><code>
+&lt;TreeSelect v-model="selectedNodeKey" :options="nodes" placeholder="Select Item" /&gt;
+
+</code></pre>
+
+        <p>In example below, nodes are retrieved from a remote data source.</p>
+
+<pre v-code.script><code>
+import NodeService from '../../service/NodeService';
+
+export default {
+    data() {
+        return {
+            selectedNodeKey: null,
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
+    }
+}
+
+</code></pre>
+
+<pre v-code.script><code>
+import axios from 'axios';
+
+export default class NodeService {
+
+    getTreeNodes() {
+        return axios.get('demo/data/treenodes.json').then(res => res.data.root);
+    }
+
+}
+
+</code></pre>
+
+        <p>The json response sample would be as following.</p>
+<pre v-code.script><code>
+{
+    "root": [
+        {
+            "key": "0",
+            "label": "Documents",
+            "data": "Documents Folder",
+            "icon": "pi pi-fw pi-inbox",
+            "children": [{
+                "key": "0-0",
+                "label": "Work",
+                "data": "Work Folder",
+                "icon": "pi pi-fw pi-cog",
+                "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
+            },
+            {
+                "key": "0-1",
+                "label": "Home",
+                "data": "Home Folder",
+                "icon": "pi pi-fw pi-home",
+                "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
+            }]
+        },
+        {
+            "key": "1",
+            "label": "Events",
+            "data": "Events Folder",
+            "icon": "pi pi-fw pi-calendar",
+            "children": [
+                { "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
+                { "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
+                { "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
+        },
+        {
+            "key": "2",
+            "label": "Movies",
+            "data": "Movies Folder",
+            "icon": "pi pi-fw pi-star",
+            "children": [{
+                "key": "2-0",
+                "icon": "pi pi-fw pi-star",
+                "label": "Al Pacino",
+                "data": "Pacino Movies",
+                "children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
+            },
+            {
+                "key": "2-1",
+                "label": "Robert De Niro",
+                "icon": "pi pi-fw pi-star",
+                "data": "De Niro Movies",
+                "children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
+            }]
+        }
+    ]
+}
+
+</code></pre>
+
+        <h5>TreeNode API utilized by the TreeSelect</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>key</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Mandatory unique key of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>label</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>data</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Data represented by the node.</td>
+                    </tr>
+                    <tr>
+                        <td>type</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Type of the node to match a template.</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Icon of the node to display next to content.</td>
+                    </tr>
+                    <tr>
+                        <td>children</td>
+                        <td>TreeNode[]</td>
+                        <td>null</td>
+                        <td>An array of treenodes as children.</td>
+                    </tr>
+                    <tr>
+                        <td>style</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>styleClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the node.</td>
+                    </tr>
+                    <tr>
+                        <td>selectable</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Whether the node is selectable when selection mode is enabled.</td>
+                    </tr>
+                    <tr>
+                        <td>leaf</td>
+                        <td>boolean</td>
+                        <td>null</td>
+                        <td>Specifies if the node has children. Used in lazy loading.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Selection Mode</h5>
+        <p>TreeSelects offers "single", "multiple" and "checkbox" alternatives for the selection behavior that is defined by the <i>selectionMode</i> option.</p>
+<pre v-code><code>
+&lt;TreeSelect v-model="selectedValue1" :options="nodes" selectionMode="single" placeholder="Select Item" /&gt;
+
+&lt;TreeSelect v-model="selectedValue2" :options="nodes" selectionMode="multiple" placeholder="Select Items" /&gt;
+
+&lt;TreeSelect v-model="selectedValue3" :options="nodes" selectionMode="checkbox" placeholder="Select Items" /&gt;
+
+</code></pre>
+
+        <h5>Value Format</h5>
+        <p>Value passed to and from the TreeSelect via the v-model directive should be a an object with key-value pairs where key is the node key and
+            value is a boolean to indicate selection. On the other hand
+        in "checkbox" mode, instead of a boolean, value should be an object that has "checked" and "partialChecked" properties to represent the checked state of a node. Best way to clarify it is prepopulating a TreeSelect with an existing value.</p>
+
+<pre v-code.script><code>
+data() {
+    return {
+        selectedValue1: {'2-1': true},
+        selectedValue2: {'1-1': true, '0-0-0': true},
+        selectedValue2: {'1': {checked: true, partialChecked: true}, '1-0': {checked: true}}
+        nodes: null
+    }
+},
+</code></pre>
+
+        <h5>Chips Display</h5>
+        <p>A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the <i>display</i> property to visualize the items as tokens.</p>
+<pre v-code><code>
+&lt;TreeSelect v-model="selectedValue" display="chip" :options="nodes" selectionMode="multiple" placeholder="Select Items" /&gt;
+
+</code></pre>
+
+		<h5>Templating</h5>
+		<p>Label of an option is used as the display text of an item by default, for custom content support define a <i>value</i> template that gets the selected nodes as a parameter.
+        In addition <i>header</i>, <i>footer</i> and <i>empty</i> slots are provided for further customization.</p>
+<pre v-code><code><template v-pre>
+&lt;TreeSelect v-model="selectedNodes" :options="nodes" placeholder="Select Items"&gt;
+	&lt;template #value="{value}"&gt;
+		Custom Content
+	&lt;/template&gt;
+&lt;/TreeSelect&gt;
+</template>
+</code></pre>
+
+		<h5>Properties</h5>
+        <p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>modelValue</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Value of the component.</td>
+                    </tr>
+                    <tr>
+                        <td>options</td>
+                        <td>array</td>
+                        <td>null</td>
+                        <td>An array of treenodes.</td>
+                    </tr>
+                    <tr>
+                        <td>scrollHeight</td>
+                        <td>string</td>
+                        <td>200px</td>
+                        <td>Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.</td>
+                    </tr>
+                    <tr>
+                        <td>placeholder</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Label to display when there are no selections.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the component should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>ariaLabelledBy</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                    </tr>
+                    <tr>
+                        <td>selectionMode</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
+                    </tr>
+                    <tr>
+                        <td>panelClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>appendTo</td>
+                        <td>string</td>
+                        <td>body</td>
+                        <td>A valid query selector or an HTMLElement to specify where the overlay gets attached.</td>
+                    </tr>
+                    <tr>
+                        <td>emptyMessage</td>
+                        <td>string</td>
+                        <td>No results found</td>
+                        <td>Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.</td>
+                    </tr>
+                    <tr>
+                        <td>display</td>
+                        <td>string</td>
+                        <td>comma</td>
+                        <td>Defines how the selected items are displayed, valid values are "comma" and "chip".</td>
+                    </tr>
+                     <tr>
+                        <td>metaKeySelection</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
+                            can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
+
+		<h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>event: Selected node keys</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
+                    <tr>
+                        <td>before-show</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>before-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke before the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when the overlay is hidden.</td>
+                    </tr>
+                    <tr>
+                        <td>node-select</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-unselect</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is unselected.</td>
+                    </tr>
+                    <tr>
+                        <td>node-expand</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is expanded.</td>
+                    </tr>
+                    <tr>
+                        <td>node-collapse</td>
+                        <td>node: Node instance</td>
+                        <td>Callback to invoke when a node is collapsed.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <h5>Methods</h5>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Shows the overlay.</td>
+                    </tr>
+                    <tr>
+                        <td>Hide</td>
+                        <td>-</td>
+                        <td>Hides the overlay.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
+
+        <h5>Slots</h5>
+		<div class="doc-tablewrapper">
+            <table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>value</td>
+                        <td>value: Selected nodes <br />
+                            placeholder: Placeholder value</td>
+                    </tr>
+                    <tr>
+                        <td>header</td>
+                        <td>value: Value of the component <br />
+                            options: TreeNode options</td>
+                    </tr>
+                    <tr>
+                        <td>footer</td>
+                        <td>value: Value of the component <br />
+                           options: TreeNode options</td>
+                    </tr>
+                    <tr>
+                        <td>empty</td>
+                        <td>-</td>
+                    </tr>
+				</tbody>
+			</table>
+        </div>
+
+		<h5>Styling</h5>
+		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+		<div class="doc-tablewrapper">
+			<table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Element</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>p-treeselect</td>
+                        <td>Container element.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-label-container</td>
+                        <td>Container of the label to display selected items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-label</td>
+                        <td>Label to display selected items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-trigger</td>
+                        <td>Dropdown button.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-panel</td>
+                        <td>Overlay panel for items.</td>
+                    </tr>
+                    <tr>
+                        <td>p-treeselect-items-wrapper</td>
+                        <td>List container of items.</td>
+                    </tr>
+				</tbody>
+			</table>
+		</div>
+
+		<h5>Dependencies</h5>
+		<p>None.</p>
+    </AppDoc>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            sources: {
+                'options-api': {
+                    tabName: 'Options API Source',
+                    content: `
+<template>
+    <div>
+        <h5>Single</h5>
+        <TreeSelect v-model="selectedNode" :options="nodes" placeholder="Select Item"></TreeSelect>
+
+        <h5>Multiple</h5>
+        <TreeSelect v-model="selectedNodes1" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Items"></TreeSelect>
+
+        <h5>Checkbox</h5>
+        <TreeSelect v-model="selectedNodes2" :options="nodes" display="chip" selectionMode="checkbox"  placeholder="Select Items"></TreeSelect>
+    </div>
+</template>
+
+<script>
+import NodeService from './service/NodeService';
+
+export default {
+    data() {
+        return {
+            nodes: null,
+            selectedNode: null,
+            selectedNodes1: null,
+            selectedNodes2: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.p-treeselect {
+    width:19rem;
+}
+
+@media screen and (max-width: 640px) {
+    .p-treeselect {
+        width: 100%;
+    }
+}
+</style>`
+                },
+                'composition-api': {
+                    tabName: 'Composition API Source',
+                    content: `
+<template>
+    <div>
+        <h5>Single</h5>
+        <TreeSelect v-model="selectedNode" :options="nodes" placeholder="Select Item"></TreeSelect>
+
+        <h5>Multiple</h5>
+        <TreeSelect v-model="selectedNodes1" :options="nodes" selectionMode="multiple" :metaKeySelection="false" placeholder="Select Items"></TreeSelect>
+
+        <h5>Checkbox</h5>
+        <TreeSelect v-model="selectedNodes2" :options="nodes" display="chip" selectionMode="checkbox"  placeholder="Select Items"></TreeSelect>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import NodeService from './service/NodeService';
+
+export default {
+    setup() {
+         onMounted(() => {
+            nodeService.value.getTreeNodes().then(data => options.value = data);
+        });
+
+        const options = ref();
+        const nodeService = ref(new NodeService());
+
+        const selectedNode = ref();
+        const selectedNodes1 = ref();
+        const selectedNodes2 = ref();
+       
+        return { options, selectedNode, selectedNodes1, selectedNodes2 };
+    }
+}
+<\\/script>
+
+<style lang="scss" scoped>
+.p-treeselect {
+    width:19rem;
+}
+
+@media screen and (max-width: 640px) {
+    .p-treeselect {
+        width: 100%;
+    }
+}
+</style>`
+                }
+            }
+        }
+    }
+}
+</script>

vue.config.js

@@ -19,6 +19,7 @@ module.exports = {
                 'primevue/paginator': path.resolve(__dirname, 'src/components/paginator/Paginator.vue'),
                 'primevue/progressbar': path.resolve(__dirname, 'src/components/progressbar/ProgressBar.vue'),
                 'primevue/message': path.resolve(__dirname, 'src/components/message/Message.vue'),
+                'primevue/tree': path.resolve(__dirname, 'src/components/tree/Tree.vue'),
                 'primevue/confirmationeventbus': path.resolve(__dirname, 'src/components/confirmationeventbus/ConfirmationEventBus.js'),
                 'primevue/toasteventbus': path.resolve(__dirname, 'src/components/toasteventbus/ToastEventBus.js'),
                 'primevue/overlayeventbus': path.resolve(__dirname, 'src/components/overlayeventbus/OverlayEventBus.js'),