Feat: Remove "angular2-multiselect" and "ng-multiselect-dropdown" dependency

frontend/_app.module.scss

@@ -1,150 +1,3 @@
-::ng-deep angular2-multiselect {
-  .c-btn {
-    background: #fff;
-    border: 1px solid #ccc;
-    color: #333;
-  }
-
-  .selected-list .c-list {
-    padding-right: 10px;
-  }
-  .selected-list .c-list .c-token {
-    background: #219653;
-  }
-  .selected-list .c-list .c-token .c-label {
-    color: #fff;
-  }
-  .selected-list .c-list .c-token .c-remove svg {
-    fill: #fff;
-  }
-
-  .selected-list .c-angle-down svg,
-  .selected-list .c-angle-up svg {
-    fill: #333;
-  }
-
-  .dropdown-list ul li:hover {
-    background: #f5f5f5;
-  }
-
-  .arrow-up,
-  .arrow-down {
-    border-bottom: 15px solid #fff;
-  }
-
-  .arrow-2 {
-    border-bottom: 15px solid #ccc;
-  }
-
-  .list-area {
-    border: 1px solid #ccc;
-    background: #fff;
-    box-shadow: 0px 1px 5px #959595;
-  }
-
-  .select-all {
-    border-bottom: 1px solid #ccc;
-  }
-
-  .list-filter {
-    border-bottom: 1px solid #ccc;
-  }
-  .list-filter .c-search svg {
-    fill: #888;
-  }
-  .list-filter .c-clear svg {
-    fill: #888;
-  }
-
-  .pure-checkbox input[type="checkbox"]:focus + label:before,
-  .pure-checkbox input[type="checkbox"]:hover + label:before {
-    border-color: #219653;
-    background-color: #f2f2f2;
-  }
-
-  .pure-checkbox input[type="checkbox"] + label {
-    color: #000;
-  }
-
-  ::ng-deep .pure-checkbox input[type="checkbox"] + label:before {
-    color: #219653;
-    border: 1px solid #219653;
-  }
-
-  ::ng-deep .pure-checkbox input[type="checkbox"] + label:after {
-    background-color: #219653;
-  }
-
-  .pure-checkbox input[type="checkbox"]:disabled + label:before {
-    border-color: #cccccc;
-  }
-
-  .pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
-    background-color: #cccccc;
-  }
-
-  .pure-checkbox input[type="checkbox"] + label:after {
-    border-color: #ffffff;
-  }
-
-  .pure-checkbox input[type="radio"]:checked + label:before {
-    background-color: white;
-  }
-
-  .pure-checkbox input[type="checkbox"]:checked + label:before {
-    background: #219653;
-  }
-
-  .single-select-mode .pure-checkbox input[type="checkbox"]:focus + label:before,
-  .single-select-mode .pure-checkbox input[type="checkbox"]:hover + label:before {
-    border-color: #219653;
-    background-color: #f2f2f2;
-  }
-
-  .single-select-mode .pure-checkbox input[type="checkbox"] + label {
-    color: #000;
-  }
-
-  .single-select-mode .pure-checkbox input[type="checkbox"] + label:before {
-    color: transparent !important;
-    border: 0px solid #219653;
-  }
-
-  .single-select-mode .pure-checkbox input[type="checkbox"] + label:after {
-    background-color: transparent !important;
-  }
-
-  .single-select-mode .pure-checkbox input[type="checkbox"]:disabled + label:before {
-    border-color: #cccccc;
-  }
-
-  .single-select-mode .pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
-    background-color: #cccccc;
-  }
-
-  .single-select-mode .pure-checkbox input[type="checkbox"] + label:after {
-    border-color: #219653;
-  }
-
-  .single-select-mode .pure-checkbox input[type="radio"]:checked + label:before {
-    background-color: white;
-  }
-
-  .single-select-mode .pure-checkbox input[type="checkbox"]:checked + label:before {
-    background: none !important;
-  }
-
-  .selected-item {
-    background: #effcf4;
-  }
-
-  .btn-iceblue {
-    background: #219653;
-    border: 1px solid #ccc;
-    color: #fff;
-  }
-}
-
 small.required::after {
   content: "*";
   margin-left: 4px;
@@ -221,35 +74,6 @@ mat-spinner {
   }
 }
 
-::ng-deep ng-multiselect-dropdown span.selected-item.ng-star-inserted {
-  max-width: 90% !important;
-  margin-bottom: 4px;
-}
-
-ng-multiselect-dropdown {
-  border: none !important;
-}
-
-::ng-deep ng-multiselect-dropdown.ng-invalid .multiselect-dropdown {
-  border-left: 5px solid #ff0000 !important;
-}
-
-::ng-deep ng-multiselect-dropdown .multiselect-dropdown .dropdown-btn .selected-item {
-  background: #219653 !important;
-  border: 1px solid #219653 !important;
-}
-
-::ng-deep ng-multiselect-dropdown .dropdown-btn {
-  color: gray;
-  border: 1px solid #ced4da !important;
-  border-radius: 0.2rem !important;
-}
-
-::ng-deep ng-multiselect-dropdown span.selected-item.ng-star-inserted a {
-  font-weight: 600;
-  margin-left: 8px;
-}
-
 fieldset {
   padding: 0.35em 0.625em 0.75em !important;
   border: 1px solid silver !important;

frontend/app/commonComponents/zh-multiselect/zh-multiselect.component.html

@@ -0,0 +1,65 @@
+<small>{{ label }}</small>
+<ng-select class="Multiselect"
+           #zhMultiselect
+           [ngClass]="{'Multiselect--multiple': multiple, 'Multiselect--hightlightValue': hightlightValue}"
+           [items]="values"
+           [bindLabel]="keyLabel"
+           [bindValue]="keyValue"
+           [placeholder]="placeholder"
+           [multiple]="multiple"
+           [clearable]="true"
+           [virtualScroll]="true"
+           [formControl]="parentFormControl"
+           (add)="onChange.emit($event)"
+           (remove)="onDelete.emit($event)"
+           (open)="onOpen.emit($event)"
+           [closeOnSelect]="!multiple"
+           [groupBy]="groupBy"
+           [selectableGroup]="true"
+           [selectableGroupAsModel]="false"
+           >
+    <ng-template ng-header-tmp>
+        <div class="MultiselectHeader">
+            <input type="text"
+                   class="MultiselectHeader__search"
+                   id="inputValidation"
+                   placeholder="Search"
+                   (input)="zhMultiselect.filter($event.target.value)" />
+            <button *ngIf="zhMultiselect.multiple"
+                    class="MultiselectHeader__selectAll"
+                    mat-flat-button
+                    color="#219653"
+                    (click)="selectAllFiltered(zhMultiselect)">
+                Select all
+            </button>
+        </div>
+    </ng-template>
+    <ng-template ng-optgroup-tmp
+                let-item="item"
+                let-item$="item$"
+                let-index="index"
+                class="MultiselectOption">
+        <div class="MultiselectOptionItem">
+            <input class="MultiselectOptionItem__checkbox"
+                id="item-{{index}}"
+                type="checkbox"
+                [ngModel]="item$.selected"
+                [ngModelOptions]="{standalone: true}" />
+            <div class="MultiselectOptionItem__text">{{ item[groupBy] }}</div>
+        </div>
+    </ng-template>
+    <ng-template ng-option-tmp
+                 let-item="item"
+                 let-item$="item$"
+                 let-index="index"
+                 class="MultiselectOption">
+        <div class="MultiselectOptionItem">
+            <input class="MultiselectOptionItem__checkbox"
+                   id="item-{{index}}"
+                   type="checkbox"
+                   [ngModel]="item$.selected"
+                   [ngModelOptions]="{standalone: true}" />
+            <div class="MultiselectOptionItem__text">{{ item[keyLabel] }}</div>
+        </div>
+    </ng-template>
+</ng-select>

frontend/app/commonComponents/zh-multiselect/zh-multiselect.component.scss

@@ -0,0 +1,100 @@
+$primary: #219653;
+$primary-darken: #156035;
+$primary-lighten: #EFFCF4;
+$primary-text: #fff;
+
+$gray-lighten: #F5F5F5;
+$gray-darken: #dcdcdc;
+.Multiselect {
+    color: $primary !important;
+    ::ng-deep .ng-value-container {
+        max-height: 200px;
+        overflow: auto;
+    }
+
+    ::ng-deep &.ng-select-disabled > .ng-select-container {
+        background-color: $gray-darken !important;
+        max-height: 200px;
+    }
+
+    .MultiselectHeader{
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        max-width: 100%;
+        overflow: hidden;
+        max-height: 24px;
+        &__search{
+            &::placeholder {
+                opacity: 0.5;
+            }
+            max-width: 60%;
+            border: none;
+            &:focus {
+                outline: none;
+            }
+        }
+        &__selectAll{
+            white-space: nowrap;
+            max-height: 24px
+        }
+
+    }
+    ::ng-deep .ng-input {
+        opacity: 0 !important;
+    }
+    ::ng-deep .ng-value  {
+        max-width: 90%;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+    &--hightlightValue {
+        ::ng-deep .ng-value  {
+            background-color: $primary !important;
+            color: $primary-text !important;
+        }
+    }
+    // Chip items
+    &--multiple{
+        ::ng-deep .ng-value  {
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: center;
+            .ng-value-icon{
+                align-self: center;
+            }
+            .ng-value-icon:hover{
+                background-color: $primary !important;
+                color: $primary-darken !important;
+            }
+            .ng-value-label{
+                word-wrap: whitespace;
+                white-space: normal;
+            }
+        }
+    }
+
+    // Option
+    ::ng-deep .ng-option:hover,
+    ::ng-deep .ng-option.ng-option-selected:hover {
+        background-color: $gray-lighten !important;
+    }
+    ::ng-deep .ng-option.ng-option-selected {
+        background-color: $primary-lighten !important;
+    }
+
+    .MultiselectOptionItem {
+        display: flex;
+        flex: row nowrap;
+        column-gap: 10px;
+        input[type="checkbox"] {
+            accent-color: $primary !important;
+        }
+
+        &__text {
+            max-width: 80%;
+            word-wrap: break-all;
+            white-space: normal;
+        }
+    }
+}

frontend/app/commonComponents/zh-multiselect/zh-multiselect.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { MultiSelectComponent } from '@geonature_common/form/multiselect/multiselect.component';
+
+@Component({
+  selector: 'zh-multiselect',
+  templateUrl: './zh-multiselect.component.html',
+  styleUrls: ['./zh-multiselect.component.scss'],
+})
+export class ZHMultiSelectComponent extends MultiSelectComponent implements OnInit {
+  /**
+   */
+  @Input() multiple: boolean;
+  @Input() hightlightValue: boolean;
+  @Input() groupBy: string | null;
+  @Input() placeholder: string;
+  @Output() onOpen = new EventEmitter<any>();
+  constructor() {
+    super();
+    this.multiple = true;
+    this.hightlightValue = true;
+    this.groupBy = null;
+    this.placeholder = 'Sélectionner';
+  }
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  public selectAllFiltered(select: any) {
+    for (const item of select.itemsList.filteredItems) {
+      select.select(item);
+    }
+    // close popup
+    select.close();
+  }
+}