suis 1.6.0 → 1.7.0

package/fesm2022/suis.mjs

@@ -1345,8 +1345,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class SuisSelectSortOptionsPipe {
-    transform(options, optionLabel) {
-        return options.sort((a, b) => a[optionLabel].localeCompare(b[optionLabel]));
+    transform(options, optionLabel, sortOptions) {
+        switch (sortOptions) {
+            case 'asc':
+                return options.sort((a, b) => a[optionLabel].localeCompare(b[optionLabel]));
+            case 'desc':
+                return options.sort((a, b) => b[optionLabel].localeCompare(a[optionLabel]));
+            default:
+                return options;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortOptionsPipe, isStandalone: true, name: "suisSelectSortOptions" }); }
@@ -1470,6 +1477,10 @@ class SuisSelectBase extends SuisInputBase {
          * Options displayed in dropdown list. Type of SuisSelectOption[].
          */
         this.options = [];
+        /**
+         * Defines way of sorting options. Type of SuisSortOptional. By default set to 'asc'.
+         */
+        this.sortOptions = 'asc';
         /**
          * Displays search input above options. By default set to true.
          */
@@ -1525,7 +1536,7 @@ class SuisSelectBase extends SuisInputBase {
         return `${JSON.stringify(option[this.optionValue])}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SuisSelectBase, inputs: { options: "options", search: "search", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder", optionValue: "optionValue", optionLabel: "optionLabel" }, outputs: { searchPhraseChanged: "searchPhraseChanged" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "suisSelectOption", first: true, predicate: SuisSelectOptionDirective, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: SuisSelectBase, inputs: { options: "options", sortOptions: "sortOptions", search: "search", searchPlaceholder: "searchPlaceholder", placeholder: "placeholder", optionValue: "optionValue", optionLabel: "optionLabel" }, outputs: { searchPhraseChanged: "searchPhraseChanged" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "suisSelectOption", first: true, predicate: SuisSelectOptionDirective, descendants: true }], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectBase, decorators: [{
             type: Directive
@@ -1537,6 +1548,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['searchInput', { static: false }]
             }], options: [{
                 type: Input
+            }], sortOptions: [{
+                type: Input
             }], search: [{
                 type: Input
             }], searchPlaceholder: [{
@@ -1605,7 +1618,7 @@ class SuisSelectComponent extends SuisSelectSingleBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisSelectComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n  <suis-select-button\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [clearable]=\"!!(nullable && value)\"\n    [expanded]=\"expanded\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    {{\n      value\n        | suisSelectLabel : options : placeholder : optionValue : optionLabel\n    }}\n  </suis-select-button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions : optionLabel\n          | suisSelectFilterOptions : searchPhrase : optionLabel;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option[optionValue])\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select__list__search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectButtonComponent, selector: "suis-select-button" }, { kind: "pipe", type: SuisSelectLabelPipe, name: "suisSelectLabel" }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n  <suis-select-button\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [clearable]=\"!!(nullable && value)\"\n    [expanded]=\"expanded\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    {{\n      value\n        | suisSelectLabel : options : placeholder : optionValue : optionLabel\n    }}\n  </suis-select-button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions : optionLabel : sortOptions\n          | suisSelectFilterOptions : searchPhrase : optionLabel;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option[optionValue])\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select__list__search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectButtonComponent, selector: "suis-select-button" }, { kind: "pipe", type: SuisSelectLabelPipe, name: "suisSelectLabel" }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectComponent, decorators: [{
             type: Component,
@@ -1625,7 +1638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SuisSelectComponent),
                         },
-                    ], template: "<div class=\"suis-select\">\n  <suis-select-button\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [clearable]=\"!!(nullable && value)\"\n    [expanded]=\"expanded\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    {{\n      value\n        | suisSelectLabel : options : placeholder : optionValue : optionLabel\n    }}\n  </suis-select-button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions : optionLabel\n          | suisSelectFilterOptions : searchPhrase : optionLabel;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option[optionValue])\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select__list__search:focus{outline:none}\n"] }]
+                    ], template: "<div class=\"suis-select\">\n  <suis-select-button\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [clearable]=\"!!(nullable && value)\"\n    [expanded]=\"expanded\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    {{\n      value\n        | suisSelectLabel : options : placeholder : optionValue : optionLabel\n    }}\n  </suis-select-button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions : optionLabel : sortOptions\n          | suisSelectFilterOptions : searchPhrase : optionLabel;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option[optionValue])\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select{position:relative}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select__list__search:focus{outline:none}\n"] }]
         }] });
 
 class SuisSelectGroupOptionComponent {
@@ -1701,8 +1714,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class SuisSelectSortGroupOptionsPipe {
-    transform(options) {
-        return options.sort((a, b) => a.label.localeCompare(b.label));
+    transform(options, sortOptions) {
+        switch (sortOptions) {
+            case 'asc':
+                return options.sort((a, b) => a.label.localeCompare(b.label));
+            case 'desc':
+                return options.sort((a, b) => b.label.localeCompare(a.label));
+            default:
+                return options;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortGroupOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectSortGroupOptionsPipe, isStandalone: true, name: "suisSelectSortGroupOptions" }); }
@@ -1730,7 +1750,7 @@ class SuisSelectGroupComponent extends SuisSelectSingleBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisSelectGroupComponent),
             },
-        ], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-group\">\n  <suis-select-button\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [clearable]=\"!!(nullable && value)\"\n    [expanded]=\"expanded\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    {{\n      value\n        | suisSelectGroupLabel\n          : groupOptions\n          : placeholder\n          : optionValue\n          : optionLabel\n    }}\n  </suis-select-button>\n  <div *ngIf=\"expanded\" class=\"suis-select-group__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-group__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <ng-container\n      *ngFor=\"\n        let group of groupOptions\n          | suisSelectSortGroupOptions\n          | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n      \"\n    >\n      <suis-select-group-option\n        [option]=\"group\"\n        [templateRef]=\"suisSelectGroupOption?.templateRef\"\n      ></suis-select-group-option>\n      <suis-select-option\n        *ngFor=\"\n          let option of group.children\n            | suisSelectSortOptions : optionLabel\n            | suisSelectFilterOptions : searchPhrase : optionLabel;\n          trackBy: optionTrackBy\n        \"\n        [option]=\"option\"\n        [templateRef]=\"suisSelectOption?.templateRef\"\n        [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n        (clicked)=\"onSelect(option[optionValue])\"\n      ></suis-select-option>\n    </ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-group{position:relative}.suis-select-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto;max-height:15.25rem}.suis-select-group__list::-webkit-scrollbar{width:.5rem}.suis-select-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-group__list__search:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectGroupOptionComponent, selector: "suis-select-group-option", inputs: ["option", "templateRef"] }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "pipe", type: SuisSelectFilterGroupOptionsPipe, name: "suisSelectFilterGroupOptions" }, { kind: "pipe", type: SuisSelectGroupLabelPipe, name: "suisSelectGroupLabel" }, { kind: "component", type: SuisSelectButtonComponent, selector: "suis-select-button" }, { kind: "pipe", type: SuisSelectSortGroupOptionsPipe, name: "suisSelectSortGroupOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-group\">\n  <suis-select-button\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [clearable]=\"!!(nullable && value)\"\n    [expanded]=\"expanded\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    {{\n      value\n        | suisSelectGroupLabel\n          : groupOptions\n          : placeholder\n          : optionValue\n          : optionLabel\n    }}\n  </suis-select-button>\n  <div *ngIf=\"expanded\" class=\"suis-select-group__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-group__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <ng-container\n      *ngFor=\"\n        let group of groupOptions\n          | suisSelectSortGroupOptions : sortOptions\n          | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n      \"\n    >\n      <suis-select-group-option\n        [option]=\"group\"\n        [templateRef]=\"suisSelectGroupOption?.templateRef\"\n      ></suis-select-group-option>\n      <suis-select-option\n        *ngFor=\"\n          let option of group.children\n            | suisSelectSortOptions : optionLabel : sortOptions\n            | suisSelectFilterOptions : searchPhrase : optionLabel;\n          trackBy: optionTrackBy\n        \"\n        [option]=\"option\"\n        [optionLabel]=\"optionLabel\"\n        [optionValue]=\"optionValue\"\n        [templateRef]=\"suisSelectOption?.templateRef\"\n        [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n        (clicked)=\"onSelect(option[optionValue])\"\n      ></suis-select-option>\n    </ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-group{position:relative}.suis-select-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto;max-height:15.25rem}.suis-select-group__list::-webkit-scrollbar{width:.5rem}.suis-select-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-group__list__search:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectGroupOptionComponent, selector: "suis-select-group-option", inputs: ["option", "templateRef"] }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "pipe", type: SuisSelectFilterGroupOptionsPipe, name: "suisSelectFilterGroupOptions" }, { kind: "pipe", type: SuisSelectGroupLabelPipe, name: "suisSelectGroupLabel" }, { kind: "component", type: SuisSelectButtonComponent, selector: "suis-select-button" }, { kind: "pipe", type: SuisSelectSortGroupOptionsPipe, name: "suisSelectSortGroupOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectGroupComponent, decorators: [{
             type: Component,
@@ -1752,7 +1772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SuisSelectGroupComponent),
                         },
-                    ], template: "<div class=\"suis-select-group\">\n  <suis-select-button\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [clearable]=\"!!(nullable && value)\"\n    [expanded]=\"expanded\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    {{\n      value\n        | suisSelectGroupLabel\n          : groupOptions\n          : placeholder\n          : optionValue\n          : optionLabel\n    }}\n  </suis-select-button>\n  <div *ngIf=\"expanded\" class=\"suis-select-group__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-group__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <ng-container\n      *ngFor=\"\n        let group of groupOptions\n          | suisSelectSortGroupOptions\n          | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n      \"\n    >\n      <suis-select-group-option\n        [option]=\"group\"\n        [templateRef]=\"suisSelectGroupOption?.templateRef\"\n      ></suis-select-group-option>\n      <suis-select-option\n        *ngFor=\"\n          let option of group.children\n            | suisSelectSortOptions : optionLabel\n            | suisSelectFilterOptions : searchPhrase : optionLabel;\n          trackBy: optionTrackBy\n        \"\n        [option]=\"option\"\n        [templateRef]=\"suisSelectOption?.templateRef\"\n        [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n        (clicked)=\"onSelect(option[optionValue])\"\n      ></suis-select-option>\n    </ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-group{position:relative}.suis-select-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto;max-height:15.25rem}.suis-select-group__list::-webkit-scrollbar{width:.5rem}.suis-select-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-group__list__search:focus{outline:none}\n"] }]
+                    ], template: "<div class=\"suis-select-group\">\n  <suis-select-button\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [clearable]=\"!!(nullable && value)\"\n    [expanded]=\"expanded\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    {{\n      value\n        | suisSelectGroupLabel\n          : groupOptions\n          : placeholder\n          : optionValue\n          : optionLabel\n    }}\n  </suis-select-button>\n  <div *ngIf=\"expanded\" class=\"suis-select-group__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-group__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <ng-container\n      *ngFor=\"\n        let group of groupOptions\n          | suisSelectSortGroupOptions : sortOptions\n          | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n      \"\n    >\n      <suis-select-group-option\n        [option]=\"group\"\n        [templateRef]=\"suisSelectGroupOption?.templateRef\"\n      ></suis-select-group-option>\n      <suis-select-option\n        *ngFor=\"\n          let option of group.children\n            | suisSelectSortOptions : optionLabel : sortOptions\n            | suisSelectFilterOptions : searchPhrase : optionLabel;\n          trackBy: optionTrackBy\n        \"\n        [option]=\"option\"\n        [optionLabel]=\"optionLabel\"\n        [optionValue]=\"optionValue\"\n        [templateRef]=\"suisSelectOption?.templateRef\"\n        [selected]=\"option[optionValue] | suisSelectIsSelected : value\"\n        (clicked)=\"onSelect(option[optionValue])\"\n      ></suis-select-option>\n    </ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-group{position:relative}.suis-select-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto;max-height:15.25rem}.suis-select-group__list::-webkit-scrollbar{width:.5rem}.suis-select-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-group__list__search:focus{outline:none}\n"] }]
         }], propDecorators: { suisSelectGroupOption: [{
                 type: ContentChild,
                 args: [SuisSelectGroupOptionDirective]
@@ -1876,7 +1896,7 @@ class SuisSelectMultiComponent extends SuisSelectMultiBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisSelectMultiComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n  <suis-select-button-multi\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [expanded]=\"expanded\"\n    [clearable]=\"values.length > 0\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    <ng-container *ngIf=\"!values?.length\">\n      {{ placeholder }}\n    </ng-container>\n    <ng-container *ngIf=\"values?.length\">\n      <suis-chip\n        *ngFor=\"\n          let value of values\n            | suisSelectMultiChips : options : optionValue : optionLabel;\n          let index = index\n        \"\n        [removable]=\"true\"\n        [color]=\"chipColor\"\n        [iconColor]=\"chipIconColor\"\n        (remove)=\"onRemove(index)\"\n      >\n        {{ value }}\n      </suis-chip>\n    </ng-container>\n  </suis-select-button-multi>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions : optionLabel\n          | suisSelectFilterOptions : searchPhrase : optionLabel;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n      [checkbox]=\"!duplicate\"\n      (clicked)=\"onSelect(option[optionValue])\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi__list__search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectMultiChipsPipe, name: "suisSelectMultiChips" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "component", type: SuisSelectButtonMultiComponent, selector: "suis-select-button-multi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\n  <suis-select-button-multi\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [expanded]=\"expanded\"\n    [clearable]=\"values.length > 0\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    <ng-container *ngIf=\"!values?.length\">\n      {{ placeholder }}\n    </ng-container>\n    <ng-container *ngIf=\"values?.length\">\n      <suis-chip\n        *ngFor=\"\n          let value of values\n            | suisSelectMultiChips : options : optionValue : optionLabel;\n          let index = index\n        \"\n        [removable]=\"true\"\n        [color]=\"chipColor\"\n        [iconColor]=\"chipIconColor\"\n        (remove)=\"onRemove(index)\"\n      >\n        {{ value }}\n      </suis-chip>\n    </ng-container>\n  </suis-select-button-multi>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions : optionLabel : sortOptions\n          | suisSelectFilterOptions : searchPhrase : optionLabel;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n      [checkbox]=\"!duplicate\"\n      (clicked)=\"onSelect(option[optionValue])\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi__list__search:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectMultiChipsPipe, name: "suisSelectMultiChips" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "component", type: SuisSelectButtonMultiComponent, selector: "suis-select-button-multi" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
             type: Component,
@@ -1897,7 +1917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SuisSelectMultiComponent),
                         },
-                    ], template: "<div class=\"suis-select-multi\">\n  <suis-select-button-multi\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [expanded]=\"expanded\"\n    [clearable]=\"values.length > 0\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    <ng-container *ngIf=\"!values?.length\">\n      {{ placeholder }}\n    </ng-container>\n    <ng-container *ngIf=\"values?.length\">\n      <suis-chip\n        *ngFor=\"\n          let value of values\n            | suisSelectMultiChips : options : optionValue : optionLabel;\n          let index = index\n        \"\n        [removable]=\"true\"\n        [color]=\"chipColor\"\n        [iconColor]=\"chipIconColor\"\n        (remove)=\"onRemove(index)\"\n      >\n        {{ value }}\n      </suis-chip>\n    </ng-container>\n  </suis-select-button-multi>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions : optionLabel\n          | suisSelectFilterOptions : searchPhrase : optionLabel;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n      [checkbox]=\"!duplicate\"\n      (clicked)=\"onSelect(option[optionValue])\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi__list__search:focus{outline:none}\n"] }]
+                    ], template: "<div class=\"suis-select-multi\">\n  <suis-select-button-multi\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [expanded]=\"expanded\"\n    [clearable]=\"values.length > 0\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    <ng-container *ngIf=\"!values?.length\">\n      {{ placeholder }}\n    </ng-container>\n    <ng-container *ngIf=\"values?.length\">\n      <suis-chip\n        *ngFor=\"\n          let value of values\n            | suisSelectMultiChips : options : optionValue : optionLabel;\n          let index = index\n        \"\n        [removable]=\"true\"\n        [color]=\"chipColor\"\n        [iconColor]=\"chipIconColor\"\n        (remove)=\"onRemove(index)\"\n      >\n        {{ value }}\n      </suis-chip>\n    </ng-container>\n  </suis-select-button-multi>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions : optionLabel : sortOptions\n          | suisSelectFilterOptions : searchPhrase : optionLabel;\n        trackBy: optionTrackBy\n      \"\n      [option]=\"option\"\n      [optionLabel]=\"optionLabel\"\n      [optionValue]=\"optionValue\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n      [checkbox]=\"!duplicate\"\n      (clicked)=\"onSelect(option[optionValue])\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi{position:relative}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi__list__search:focus{outline:none}\n"] }]
         }] });
 
 class SuisSelectMultiGroupChipsPipe {
@@ -1938,7 +1958,7 @@ class SuisSelectMultiGroupComponent extends SuisSelectMultiBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
             },
-        ], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi-group\">\n  <suis-select-button-multi\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [expanded]=\"expanded\"\n    [clearable]=\"values.length > 0\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    <ng-container *ngIf=\"!values?.length\">\n      {{ placeholder }}\n    </ng-container>\n    <ng-container *ngIf=\"values?.length\">\n      <suis-chip\n        *ngFor=\"\n          let value of values\n            | suisSelectMultiGroupChips\n              : groupOptions\n              : optionValue\n              : optionLabel;\n          let index = index\n        \"\n        [removable]=\"true\"\n        [color]=\"chipColor\"\n        [iconColor]=\"chipIconColor\"\n        (remove)=\"onRemove(index)\"\n      >\n        {{ value }}\n      </suis-chip>\n    </ng-container>\n  </suis-select-button-multi>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi-group__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi-group__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <ng-container\n      *ngFor=\"\n        let group of groupOptions\n          | suisSelectSortGroupOptions\n          | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n      \"\n    >\n      <suis-select-group-option\n        [option]=\"group\"\n        [templateRef]=\"suisSelectGroupOption?.templateRef\"\n      ></suis-select-group-option>\n      <suis-select-option\n        *ngFor=\"\n          let option of group.children\n            | suisSelectSortOptions : optionLabel\n            | suisSelectFilterOptions : searchPhrase : optionLabel;\n          trackBy: optionTrackBy\n        \"\n        [option]=\"option\"\n        [templateRef]=\"suisSelectOption?.templateRef\"\n        [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n        [checkbox]=\"!duplicate\"\n        (clicked)=\"onSelect(option[optionValue])\"\n      ></suis-select-option>\n    </ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi-group{position:relative}.suis-select-multi-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi-group__list::-webkit-scrollbar{width:.5rem}.suis-select-multi-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi-group__list__search:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectButtonMultiComponent, selector: "suis-select-button-multi" }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectGroupOptionComponent, selector: "suis-select-group-option", inputs: ["option", "templateRef"] }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectMultiGroupChipsPipe, name: "suisSelectMultiGroupChips" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "pipe", type: SuisSelectFilterGroupOptionsPipe, name: "suisSelectFilterGroupOptions" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortGroupOptionsPipe, name: "suisSelectSortGroupOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "suisSelectGroupOption", first: true, predicate: SuisSelectGroupOptionDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi-group\">\n  <suis-select-button-multi\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [expanded]=\"expanded\"\n    [clearable]=\"values.length > 0\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    <ng-container *ngIf=\"!values?.length\">\n      {{ placeholder }}\n    </ng-container>\n    <ng-container *ngIf=\"values?.length\">\n      <suis-chip\n        *ngFor=\"\n          let value of values\n            | suisSelectMultiGroupChips\n              : groupOptions\n              : optionValue\n              : optionLabel;\n          let index = index\n        \"\n        [removable]=\"true\"\n        [color]=\"chipColor\"\n        [iconColor]=\"chipIconColor\"\n        (remove)=\"onRemove(index)\"\n      >\n        {{ value }}\n      </suis-chip>\n    </ng-container>\n  </suis-select-button-multi>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi-group__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi-group__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <ng-container\n      *ngFor=\"\n        let group of groupOptions\n          | suisSelectSortGroupOptions : sortOptions\n          | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n      \"\n    >\n      <suis-select-group-option\n        [option]=\"group\"\n        [templateRef]=\"suisSelectGroupOption?.templateRef\"\n      ></suis-select-group-option>\n      <suis-select-option\n        *ngFor=\"\n          let option of group.children\n            | suisSelectSortOptions : optionLabel : sortOptions\n            | suisSelectFilterOptions : searchPhrase : optionLabel;\n          trackBy: optionTrackBy\n        \"\n        [option]=\"option\"\n        [optionLabel]=\"optionLabel\"\n        [optionValue]=\"optionValue\"\n        [templateRef]=\"suisSelectOption?.templateRef\"\n        [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n        [checkbox]=\"!duplicate\"\n        (clicked)=\"onSelect(option[optionValue])\"\n      ></suis-select-option>\n    </ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi-group{position:relative}.suis-select-multi-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi-group__list::-webkit-scrollbar{width:.5rem}.suis-select-multi-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi-group__list__search:focus{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectButtonMultiComponent, selector: "suis-select-button-multi" }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "optionValue", "optionLabel", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "component", type: SuisSelectGroupOptionComponent, selector: "suis-select-group-option", inputs: ["option", "templateRef"] }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectMultiGroupChipsPipe, name: "suisSelectMultiGroupChips" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }, { kind: "pipe", type: SuisSelectFilterGroupOptionsPipe, name: "suisSelectFilterGroupOptions" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortGroupOptionsPipe, name: "suisSelectSortGroupOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuisSelectMultiGroupComponent, decorators: [{
             type: Component,
@@ -1961,7 +1981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             multi: true,
                             useExisting: forwardRef(() => SuisSelectMultiGroupComponent),
                         },
-                    ], template: "<div class=\"suis-select-multi-group\">\n  <suis-select-button-multi\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [expanded]=\"expanded\"\n    [clearable]=\"values.length > 0\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    <ng-container *ngIf=\"!values?.length\">\n      {{ placeholder }}\n    </ng-container>\n    <ng-container *ngIf=\"values?.length\">\n      <suis-chip\n        *ngFor=\"\n          let value of values\n            | suisSelectMultiGroupChips\n              : groupOptions\n              : optionValue\n              : optionLabel;\n          let index = index\n        \"\n        [removable]=\"true\"\n        [color]=\"chipColor\"\n        [iconColor]=\"chipIconColor\"\n        (remove)=\"onRemove(index)\"\n      >\n        {{ value }}\n      </suis-chip>\n    </ng-container>\n  </suis-select-button-multi>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi-group__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi-group__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <ng-container\n      *ngFor=\"\n        let group of groupOptions\n          | suisSelectSortGroupOptions\n          | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n      \"\n    >\n      <suis-select-group-option\n        [option]=\"group\"\n        [templateRef]=\"suisSelectGroupOption?.templateRef\"\n      ></suis-select-group-option>\n      <suis-select-option\n        *ngFor=\"\n          let option of group.children\n            | suisSelectSortOptions : optionLabel\n            | suisSelectFilterOptions : searchPhrase : optionLabel;\n          trackBy: optionTrackBy\n        \"\n        [option]=\"option\"\n        [templateRef]=\"suisSelectOption?.templateRef\"\n        [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n        [checkbox]=\"!duplicate\"\n        (clicked)=\"onSelect(option[optionValue])\"\n      ></suis-select-option>\n    </ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi-group{position:relative}.suis-select-multi-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi-group__list::-webkit-scrollbar{width:.5rem}.suis-select-multi-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi-group__list__search:focus{outline:none}\n"] }]
+                    ], template: "<div class=\"suis-select-multi-group\">\n  <suis-select-button-multi\n    [invalid]=\"invalid\"\n    [readonly]=\"readonly\"\n    [expanded]=\"expanded\"\n    [clearable]=\"values.length > 0\"\n    (expandedChange)=\"onExpand()\"\n    (cleared)=\"onClear($event)\"\n  >\n    <ng-container *ngIf=\"!values?.length\">\n      {{ placeholder }}\n    </ng-container>\n    <ng-container *ngIf=\"values?.length\">\n      <suis-chip\n        *ngFor=\"\n          let value of values\n            | suisSelectMultiGroupChips\n              : groupOptions\n              : optionValue\n              : optionLabel;\n          let index = index\n        \"\n        [removable]=\"true\"\n        [color]=\"chipColor\"\n        [iconColor]=\"chipIconColor\"\n        (remove)=\"onRemove(index)\"\n      >\n        {{ value }}\n      </suis-chip>\n    </ng-container>\n  </suis-select-button-multi>\n  <div *ngIf=\"expanded\" class=\"suis-select-multi-group__list\">\n    <input\n      #searchInput\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select-multi-group__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <ng-container\n      *ngFor=\"\n        let group of groupOptions\n          | suisSelectSortGroupOptions : sortOptions\n          | suisSelectFilterGroupOptions : searchPhrase : optionLabel\n      \"\n    >\n      <suis-select-group-option\n        [option]=\"group\"\n        [templateRef]=\"suisSelectGroupOption?.templateRef\"\n      ></suis-select-group-option>\n      <suis-select-option\n        *ngFor=\"\n          let option of group.children\n            | suisSelectSortOptions : optionLabel : sortOptions\n            | suisSelectFilterOptions : searchPhrase : optionLabel;\n          trackBy: optionTrackBy\n        \"\n        [option]=\"option\"\n        [optionLabel]=\"optionLabel\"\n        [optionValue]=\"optionValue\"\n        [templateRef]=\"suisSelectOption?.templateRef\"\n        [selected]=\"option[optionValue] | suisSelectMultiIsSelected : values\"\n        [checkbox]=\"!duplicate\"\n        (clicked)=\"onSelect(option[optionValue])\"\n      ></suis-select-option>\n    </ng-container>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:block}.suis-select-multi-group{position:relative}.suis-select-multi-group__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000040;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2.625rem;left:0;max-height:13.375rem;overflow-y:auto}.suis-select-multi-group__list::-webkit-scrollbar{width:.5rem}.suis-select-multi-group__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi-group__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi-group__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}.suis-select-multi-group__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem;font-size:.875rem}.suis-select-multi-group__list__search:focus{outline:none}\n"] }]
         }], propDecorators: { suisSelectGroupOption: [{
                 type: ContentChild,
                 args: [SuisSelectGroupOptionDirective]