add ng-select for templatable select options

- create select-tags component to replace ngx-chips
- create select-options to factorize option selection in forms
- create select-channel to simplify channel selection
- refactor tags validation

3 files changed, 30 insertions, 69 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 30960393f..d2811d24a 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -13,6 +13,7 @@ $assets-path: '../../assets/';
 
 @import './bootstrap';
 @import './primeng-custom';
+@import './ng-select.scss';
 
 [hidden] {
   display: none !important;
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e4c2dffa0..ae2b99a5b 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -807,75 +807,6 @@
   }
 }
 
-@mixin ng2-tags {
-  ::ng-deep {
-    .ng2-tag-input {
-      border: none !important;
-    }
-
-    .ng2-tags-container {
-      display: flex;
-      align-items: center;
-      border: 1px solid #C6C6C6;
-      border-radius: 3px;
-      padding: 5px !important;
-      height: max-content;
-
-      &:focus-within {
-        box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
-      }
-    }
-
-    tag-input-form {
-      input {
-        height: 30px !important;
-        font-size: 12px !important;
-
-        background-color: pvar(--mainBackgroundColor) !important;
-        color: pvar(--mainForegroundColor) !important;
-      }
-    }
-
-    tag {
-      background-color: $grey-background-color !important;
-      color: #000 !important;
-      border-radius: 3px !important;
-      font-size: 12px !important;
-      height: 30px !important;
-      line-height: 30px !important;
-      margin: 0 5px 0 0 !important;
-      cursor: default !important;
-      padding: 0 8px 0 10px !important;
-
-      div {
-        height: 100% !important;
-      }
-    }
-
-    delete-icon {
-      cursor: pointer !important;
-      height: auto !important;
-      vertical-align: middle !important;
-      padding-left: 6px !important;
-
-      svg {
-        position: relative;
-        top: -1px;
-        height: auto !important;
-        vertical-align: middle !important;
-
-        path  {
-          fill: pvar(--greyForegroundColor) !important;
-        }
-      }
-
-      &:hover {
-        transform: none !important;
-      }
-    }
-  }
-}
-
 @mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
   width: 95%;
   border-top: .05rem solid $color;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
new file mode 100644
index 000000000..f836e203c
--- /dev/null
+++ b/client/src/sass/ng-select.scss
@@ -0,0 +1,29 @@
+@import '_variables';
+
+$ng-select-highlight: #f2690d;
+// $ng-select-primary-text: #333 !default;
+// $ng-select-disabled-text: #f9f9f9 !default;
+// $ng-select-border: #ccc !default;
+// $ng-select-border-radius: 4px !default;
+// $ng-select-bg: #ffffff !default;
+// $ng-select-selected: lighten($ng-select-highlight, 46) !default;
+// $ng-select-marke d: lighten($ng-select-highlight, 48) !default;
+$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default;
+$ng-select-height: 30px;
+// $ng-select-value-padding-left: 10px !default;
+// $ng-select-value-font-size: 0.9em !default;
+
+@import "~@ng-select/ng-select/scss/default.theme.scss";
+
+.ng-input {
+  font-size: .9em;
+}
+
+.ng-select {
+  &.ng-select-focused {
+    &:not(.ng-select-opened) > .ng-select-container {
+      border-color: #ccc !important;
+    }
+  }
+}