@progressio_resources/gravity-design-system 2.5.17 → 2.6.1

package/fesm2022/progressio_resources-gravity-design-system.mjs

@@ -1,16 +1,14 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule, Injectable, inject } from '@angular/core';
+import { Component, Input, Pipe, EventEmitter, Output, ViewChild, HostBinding, HostListener, InjectionToken, Directive, Optional, Inject, NgModule, Injectable, inject } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from 'angular-svg-icon';
 import { AngularSvgIconModule } from 'angular-svg-icon';
 import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbOffcanvas, NgbDatepickerModule, NgbOffcanvasModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i3 from '@ng-select/ng-select';
-import { NgSelectModule } from '@ng-select/ng-select';
-import * as i2$1 from 'angular-svg-icon-preloader';
+import * as i2 from 'angular-svg-icon-preloader';
 import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
 import * as i1$3 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@@ -127,71 +125,257 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class GravityDropdownListComponent {
+/**
+ * filters an array based on searctext
+ */
+class FilterByPipe {
+    transform(array, searchText, keyName) {
+        if (!array || !searchText || !Array.isArray(array)) {
+            return array;
+        }
+        if (typeof array[0] === 'string') {
+            return array.filter((item) => item.toLowerCase().indexOf(searchText.trim().toLowerCase()) > -1);
+        }
+        // filter array, items which match and return true will be
+        // kept, false will be filtered out
+        if (!keyName) {
+            return array.filter((item) => {
+                for (const key in item) {
+                    if (typeof item[key] !== 'object' && item[key].toString().toLowerCase().indexOf(searchText.trim().toLowerCase()) > -1) {
+                        return true;
+                    }
+                }
+                return false;
+            });
+        }
+        else {
+            return array.filter((item) => {
+                if (typeof item[keyName] !== 'object' && item[keyName].toString().toLowerCase().indexOf(searchText.trim().toLowerCase()) > -1) {
+                    return true;
+                }
+                return false;
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FilterByPipe, name: "filterBy" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterByPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filterBy'
+                }]
+        }] });
+
+class GravityCheckboxComponent {
     constructor() {
-        this.selectedItemResponse = new EventEmitter();
+        this.checked = false;
+        this.disabled = false;
+        this.change = new EventEmitter();
+        this.isCheckboxActive = false;
+    }
+    ngAfterViewInit() {
+        this.isCheckboxActive = this.checked;
+        this.change.emit({ value: this.value, checked: this.isCheckboxActive });
+    }
+    ngOnChanges(changes) {
+        if (changes['checked']) {
+            this.isCheckboxActive = changes['checked'].currentValue;
+        }
+    }
+    toggleCheckbox() {
+        if (!this.disabled) {
+            this.isCheckboxActive = !this.isCheckboxActive;
+            this.change.emit({ value: this.value, checked: this.isCheckboxActive });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n  <input [checked]=\"isCheckboxActive\"\n         [disabled]=\"disabled\"\n         [name]=\"name\"\n         [value]=\"value\"\n\n         type=\"checkbox\">\n  <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n    <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n  </span>\n  <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;bottom:0;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;margin:auto 0;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gravity-checkbox', template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n  <input [checked]=\"isCheckboxActive\"\n         [disabled]=\"disabled\"\n         [name]=\"name\"\n         [value]=\"value\"\n\n         type=\"checkbox\">\n  <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n    <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n  </span>\n  <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;bottom:0;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;margin:auto 0;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"] }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+class GravityDropdownListComponent {
+    constructor(filterByPipe) {
+        this.filterByPipe = filterByPipe;
+        this.selectedItemsResponse = new EventEmitter();
+        this.clearable = true;
         this.currentLang = 'en';
-        this.customPlaceholder = "All";
-        this.iconPlacement = "left";
-        this.state = "enabled";
-        this.dropdownOpen = false;
+        this.hasError = false;
+        this.isDisabled = false;
+        this.isReadonly = false;
+        this.multiple = false;
+        this.required = false;
+        // Sizes
+        this.size = 'md';
+        this.width = 'short';
+        this.availableOptions = [];
+        this.dropdownOpened = false;
+        this.searchText = '';
+        this.selectedItems = [];
+    }
+    ngOnChanges(changes) {
+        if (changes['items']?.currentValue) {
+            this.availableOptions = this.items;
+        }
+        if (changes['customValues']?.currentValue) {
+            if (this.multiple) {
+                changes['customValues'].currentValue.forEach((item) => {
+                    if (item) {
+                        let option;
+                        if (this.config) {
+                            option = this.availableOptions.find((availableOption) => availableOption[this.config.value] == item);
+                        }
+                        else {
+                            option = this.availableOptions.find((availableOption) => availableOption == item);
+                        }
+                        if (option) {
+                            let indexOfItem = this.selectedItems.findIndex((availableOption) => availableOption == option);
+                            if (indexOfItem == -1) {
+                                this.selectedItems.push(option);
+                            }
+                        }
+                    }
+                });
+            }
+            else {
+                let item = changes['customValues'].currentValue;
+                if (item) {
+                    let option;
+                    if (this.config) {
+                        option = this.availableOptions.find((availableOption) => availableOption[this.config.value] == item);
+                    }
+                    else {
+                        option = this.availableOptions.find((availableOption) => availableOption == item);
+                    }
+                    if (option) {
+                        let indexOfItem = this.selectedItems.findIndex((availableOption) => availableOption == option);
+                        if (indexOfItem == -1) {
+                            this.selectedItems.push(option);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    getStatus() {
+        if (this.isDisabled) {
+            return 'disabled';
+        }
+        else if (this.isReadonly) {
+            return 'readonly';
+        }
+        else if (this.hasError) {
+            return 'error';
+        }
+        else if (this.dropdownOpened) {
+            return 'open';
+        }
+        else if (this.selectedItems.length > 0) {
+            return 'selected';
+        }
+        else {
+            return 'active';
+        }
     }
-    changeSelectedItem(newSelectedItem) {
-        this.selectedItem = newSelectedItem;
-        this.selectedItemResponse.emit(this.selectedItem);
+    isIconLeftNew() {
+        if (this.iconLeft) {
+            return GravityIconComponent.isNewIcon(this.iconLeft);
+        }
+        return false;
     }
-    clearSelectedItem() {
-        this.ngSelectComponent.clearItem(this.selectedItem);
-        this.changeSelectedItem(undefined);
+    toggleDropdown() {
+        if (!this.isDisabled && !this.isReadonly) {
+            this.dropdownOpened = !this.dropdownOpened;
+            if (!this.dropdownOpened) {
+                if (this.multiple) {
+                    this.selectedItemsResponse.emit(this.selectedItems);
+                }
+                else {
+                    this.selectedItemsResponse.emit(this.selectedItems[0]);
+                }
+                this.searchText = null;
+            }
+        }
     }
-    isNewIcon(iconName) {
-        if (this.iconPlacement == 'left') {
-            return GravityIconComponent.isNewIcon(iconName);
+    selectItem(itemToAdd) {
+        if (this.multiple) {
+            let indexOfItem = this.selectedItems.findIndex((item) => item == itemToAdd);
+            if (indexOfItem == -1) {
+                this.selectedItems.push(itemToAdd);
+            }
+            else {
+                this.selectedItems.splice(indexOfItem, 1);
+            }
         }
         else {
-            return GravityIconComponent.isNewIcon(iconName);
+            this.selectedItems = [itemToAdd];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { currentLang: "currentLang", customPlaceholder: "customPlaceholder", customValue: "customValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconPlacement: "iconPlacement", items: "items", label: "label", ngSelectConfig: "ngSelectConfig", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType" }, outputs: { selectedItemResponse: "response" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n       [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-dropdown-field {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n     [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n  <ng-container *ngIf=\"iconPlacement == 'left'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n  <ng-select [attr.data-cy]=\"cypressTag\"\n             [bindLabel]=\"ngSelectConfig?.bindLabel ? ngSelectConfig.bindLabel : 'name'\"\n             [bindValue]=\"ngSelectConfig?.bindValue ? ngSelectConfig.bindValue : 'id'\"\n             [class.with-icons]=\"iconNames\"\n             [clearable]=\"ngSelectConfig?.clearable\"\n             [items]=\"items\"\n             [placeholder]=\"selectedItem || customValue ? null : customPlaceholder\"\n             [readonly]=\"state == 'readonly' ? true : null\"\n\n             [(ngModel)]=\"customValue\"\n\n             (change)=\"changeSelectedItem($event)\"\n             (clear)=\"clearSelectedItem()\"\n             (close)=\"dropdownOpen = false\"\n             (open)=\"dropdownOpen = true\"\n\n             class=\"hr-label md-regular\"\n             #ngSelectComponent>\n  </ng-select>\n  <ng-container *ngIf=\"iconPlacement == 'right'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n  <gravity-icon class=\"placement-{{iconPlacement}}\" [style.--icon-color]=\"iconColor\" [hoverIcon]=\"false\"\n                [iconName]=\"name\" *ngFor=\"let name of iconNames\"\n                [size]=\"isNewIcon(name) ? null : 'sm'\" [iconSize]=\"isNewIcon(name) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text{font-family:Roboto Flex,sans-serif}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;padding:.5rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select.with-icons{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select:not(.with-icons){width:100%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container div[role=combobox] input{width:88%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"], dependencies: [{ 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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
+    checkIfSelected(itemToFind) {
+        return !!this.selectedItems.find((item) => itemToFind == item);
+    }
+    clearSelection() {
+        this.selectedItems = [];
+    }
+    filterItems() {
+        this.availableOptions = this.filterByPipe.transform(this.items, this.searchText);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListComponent, deps: [{ token: FilterByPipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityDropdownListComponent, selector: "gravity-dropdown-list", inputs: { clearable: "clearable", config: "config", currentLang: "currentLang", customValues: "customValues", cypressTag: "cypressTag", hasError: "hasError", iconLeft: "iconLeft", isDisabled: "isDisabled", isReadonly: "isReadonly", items: "items", label: "label", multiple: "multiple", placeholder: "placeholder", required: "required", supportText: "supportText", size: "size", width: "width" }, outputs: { selectedItemsResponse: "response" }, providers: [FilterByPipe], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n     (click)=\"toggleDropdown()\">\n  <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"\n                *ngIf=\"iconLeft\"></gravity-icon>\n  <p class=\"hr-label {{size}}-regular value\">\n    <ng-container *ngIf=\"selectedItems.length == 0\">\n      {{placeholder ? placeholder : label}}\n    </ng-container>\n    <ng-container *ngIf=\"selectedItems.length > 0\">\n      <ng-container *ngFor=\"let item of selectedItems; let i = index\">\n        {{config ? item[config.label] : item}}{{i != selectedItems.length - 1 ? ',' : ''}}\n      </ng-container>\n    </ng-container>\n  </p>\n  <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n                *ngIf=\"!isReadonly\"></gravity-icon>\n  <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\">\n    <div class=\"search-input\">\n      <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n             [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Limpiar' : 'Search input'}}\">\n      <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                    [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\"></gravity-icon>\n    </div>\n    <div class=\"items\">\n      <div class=\"hr-label item {{size}}-regular pointer\" [class.selected]=\"checkIfSelected(item)\"\n           (click)=\"selectItem(item)\" *ngFor=\"let item of availableOptions\">\n        <gravity-checkbox [checked]=\"checkIfSelected(item)\" *ngIf=\"multiple\">\n          {{config ? item[config.label] : item}}\n        </gravity-checkbox>\n        <ng-container *ngIf=\"!multiple\">{{config ? item[config.label] : item}}</ng-container>\n      </div>\n      <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length == 0\">\n        {{'SHARED.LABELS.no_results' | translate}}\n      </div>\n    </div>\n    <div class=\"dropdown-footer\" *ngIf=\"selectedItems.length > 0\" [class.not-clearable]=\"!clearable\">\n      <p class=\"hr-label pointer sm-regular\" (click)=\"clearSelection()\" *ngIf=\"clearable\">\n        {{currentLang == 'es' ? 'Limpiar' : 'Clear selection'}}\n      </p>\n      <p class=\"hr-label pointer sm-bold\" (click)=\"$event.stopPropagation(); toggleDropdown()\"\n         *ngIf=\"availableOptions.length != 0\">\n        {{currentLang == 'es' ? 'Aplicar' : 'Apply'}}\n      </p>\n    </div>\n  </div>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getStatus() == 'active' && selectedItems.length == 0 && required\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;display:flex;height:var(--text-field-input-field-height);padding:10px 12px;position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.gravity-input-field.sm{--dropdown-items-gap: map-get($spacing-values, xs);--dropdown-items-padding-top: 16px;--dropdown-top-margin: 5px;--text-field-input-field-content: 9px;--text-field-input-field-height: 29px;--text-field-input-field-input: 13px;--icon-margin: 5px;--span-checkmark-height: 14px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--dropdown-items-gap: 12px;--dropdown-items-padding-top: 20px;--dropdown-top-margin: 8px;--text-field-input-field-content: 15px;--text-field-input-field-height: 35px;--text-field-input-field-input: 18px;--icon-margin: 8px;--span-checkmark-height: 16px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width{--text-field-input-field-width: 416px}.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.dropdown-panel{background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;cursor:initial;left:-1px;position:absolute;top:calc(100% + var(--dropdown-top-margin));width:calc(var(--text-field-input-field-width) + 2px);z-index:1}.dropdown-panel .search-input{align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary);display:flex;padding:12px}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{background-color:transparent;border:none;border-radius:0;color:var(--input-text-full-enabled-primary);margin:0;outline:none;padding:0;width:100%}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items{display:flex;flex-direction:column;gap:var(--dropdown-items-gap);max-height:200px;overflow:auto;padding:var(--dropdown-items-padding-top) 12px}.dropdown-panel .items .item{align-items:center;color:var(--label-text-full-enabled-primary);display:flex;padding:4px}.dropdown-panel .items .item:hover:not(.no-results),.dropdown-panel .items .item.selected{background-color:var(--bg-menu-button-hover-primary);color:var(--on-bg-menu-button-active-primary)}.dropdown-panel .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field{padding-left:calc(var(--span-checkmark-width) + var(--span-checkmark-margin))}.dropdown-panel .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{height:var(--span-checkmark-height);min-height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);width:var(--span-checkmark-width)}.dropdown-panel .dropdown-footer{align-items:center;display:flex;justify-content:space-between;padding:12px 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{color:var(--on-bg-button-active-secondary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"], dependencies: [{ 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: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: ["checked", "disabled", "name", "value"], outputs: ["change"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gravity-dropdown-list', template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n       [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n  {{label}}\n  <ng-container *ngIf=\"required\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'readonly'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"state == 'disabled'\">\n    <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n    <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n  </ng-container>\n</label>\n<div class=\"gravity-dropdown-field {{state}}\" [class.empty]=\"!selectedItem && !dropdownOpen\"\n     [class.focused]=\"dropdownOpen\" [class.full-input]=\"customValue || (selectedItem && !dropdownOpen)\">\n  <ng-container *ngIf=\"iconPlacement == 'left'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n  <ng-select [attr.data-cy]=\"cypressTag\"\n             [bindLabel]=\"ngSelectConfig?.bindLabel ? ngSelectConfig.bindLabel : 'name'\"\n             [bindValue]=\"ngSelectConfig?.bindValue ? ngSelectConfig.bindValue : 'id'\"\n             [class.with-icons]=\"iconNames\"\n             [clearable]=\"ngSelectConfig?.clearable\"\n             [items]=\"items\"\n             [placeholder]=\"selectedItem || customValue ? null : customPlaceholder\"\n             [readonly]=\"state == 'readonly' ? true : null\"\n\n             [(ngModel)]=\"customValue\"\n\n             (change)=\"changeSelectedItem($event)\"\n             (clear)=\"clearSelectedItem()\"\n             (close)=\"dropdownOpen = false\"\n             (open)=\"dropdownOpen = true\"\n\n             class=\"hr-label md-regular\"\n             #ngSelectComponent>\n  </ng-select>\n  <ng-container *ngIf=\"iconPlacement == 'right'\">\n    <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n  </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n  {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n  <gravity-icon class=\"placement-{{iconPlacement}}\" [style.--icon-color]=\"iconColor\" [hoverIcon]=\"false\"\n                [iconName]=\"name\" *ngFor=\"let name of iconNames\"\n                [size]=\"isNewIcon(name) ? null : 'sm'\" [iconSize]=\"isNewIcon(name) ? 'md-16' : null\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}body{font-family:Roboto Flex,sans-serif;color:var(--text-primary);leading-trim:both;text-edge:cap;font-style:normal;line-height:normal;font-optical-sizing:auto}.hr-body-text{font-family:Roboto Flex,sans-serif}.hr-body-text.sm-regular{font-size:.75rem;font-weight:400;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.sm-bold{font-size:.75rem;font-weight:650;line-height:1.17525rem;letter-spacing:.01875rem}.hr-body-text.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.hr-body-text{font-size:1rem;font-weight:400;line-height:1.567rem;letter-spacing:.025rem}.hr-body-text.lg-regular{font-size:1.3325rem;font-weight:400;line-height:2.088rem;letter-spacing:.01969rem}.hr-body-text.lg-bold{font-size:1.3325rem;font-weight:700;line-height:1.99106rem;letter-spacing:.01969rem}.hr-title{font-family:Roboto Flex,sans-serif}.hr-title.sm-regular{font-size:1rem;font-weight:420;letter-spacing:.02rem}.hr-title.sm-bold{font-size:1rem;font-weight:731;letter-spacing:.02rem}.hr-title.md-bold{font-size:1.3325rem;font-weight:745;letter-spacing:.02665rem}.hr-title.lg-regular{font-size:1.75rem;font-weight:480;letter-spacing:.02625rem}.hr-title.lg-bold{font-size:1.75rem;font-weight:760}.hr-label,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-family:Roboto Flex,sans-serif}.hr-label.sm-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-regular{font-size:.75rem;font-weight:343;letter-spacing:.01875rem}.hr-label.sm-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.sm-bold{font-size:.75rem;font-weight:730;letter-spacing:.01875rem}.hr-label.md-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{font-size:1rem;font-weight:343;letter-spacing:.03rem}.hr-label.md-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.md-bold{font-size:1rem;font-weight:700;letter-spacing:.03rem}.hr-label.lg-regular,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-regular{font-size:1.75rem;font-weight:343;letter-spacing:.04375rem}.hr-label.lg-bold,.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input.lg-bold{font-size:1.75rem;font-weight:700;letter-spacing:.04375rem}.hr-headline{font-family:Roboto Flex,sans-serif}.hr-headline.sm-bold{font-size:2rem;font-weight:700;letter-spacing:.02rem}.hr-headline.md-bold{font-size:2.375rem;font-weight:700;letter-spacing:.02375rem}.hr-headline.lg-bold{font-size:2.875rem;font-weight:700;letter-spacing:.02875rem}.hr-display{font-family:Roboto Flex,sans-serif}.hr-display.sm-bold{font-size:3.125rem;font-weight:700;letter-spacing:.03125rem}.hr-display.md-bold{font-size:4.1875rem;font-weight:700;letter-spacing:.04188rem}.hr-display.lg-bold{font-size:5.625rem;font-weight:700;letter-spacing:.05625rem}.align-text-center{text-align:center}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-dropdown-field{align-items:center;background-color:var(--text-field-dropdown-field-background-color);border:1px solid var(--text-field-dropdown-field-border-color);border-radius:.625rem;cursor:var(--cursor-type);--cursor-type: pointer;display:flex;padding:.5rem 1rem}.gravity-dropdown-field.readonly{--cursor-type: text}.gravity-dropdown-field.disabled{--cursor-type: initial}.gravity-dropdown-field gravity-icon.placement-left{margin-right:.5rem}.gravity-dropdown-field gravity-icon.placement-right{margin-left:.5rem}.gravity-dropdown-field ng-select.with-icons{width:calc(100% - 1.75rem)}.gravity-dropdown-field ng-select:not(.with-icons){width:100%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container{cursor:var(--cursor-type)!important}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container .ng-value-label{color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container div[role=combobox] input{width:88%}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input{cursor:var(--cursor-type)!important;color:var(--text-field-dropdown-field-input-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-select-container input::placeholder{color:var(--text-field-dropdown-field-placeholder-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-clear-wrapper .ng-clear{color:var(--clear-icon-color)}.gravity-dropdown-field ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{border-color:var(--arrow-color) transparent transparent;border-style:solid;border-width:.3125rem .3125rem .15625rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel{background-color:var(--bg-dropdown-list-primary);border:1px solid var(--outline-dropdown-list-primary);border-radius:.625rem;padding-block:.5rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-dropdown-panel-items{max-height:200px}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option{color:var(--ng-option-color);--ng-option-color: var(--on-bg-dropdown-item-active-primary);padding:.375rem 1rem}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-selected{font-weight:700;--ng-option-color: var(--on-bg-dropdown-item-pressed-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option:not(.ng-option-disabled):hover{background-color:var(--bg-dropdown-item-hover-primary);--ng-option-color: var(--on-bg-dropdown-item-hover-primary)}.gravity-dropdown-field ng-select ::ng-deep ng-dropdown-panel .ng-option.ng-option-disabled{--ng-option-color: var(--on-bg-dropdown-item-disabled-primary)}.gravity-dropdown-field.empty.enabled{--arrow-color: var(--placeholder-empty-enabled-primary);--clear-icon-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-enabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-enabled-primary)}.gravity-dropdown-field.empty.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-dropdown-field.empty.disabled{--arrow-color: var(--placeholder-empty-disabled-primary);--clear-icon-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-dropdown-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-dropdown-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-dropdown-field.full-input.enabled{--arrow-color: var(--input-text-full-enabled-primary);--clear-icon-color: var(--input-text-full-enabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-enabled-primary)}.gravity-dropdown-field.full-input.enabled:hover{--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-dropdown-field.full-input.disabled{--arrow-color: var(--input-text-full-disabled-primary);--clear-icon-color: var(--input-text-full-disabled-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-disabled-primary);--text-field-dropdown-field-input-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-dropdown-field.readonly{--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-border-color: var(--bg-field-full-read-only-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-dropdown-field.focused:not(.readonly){--arrow-color: var(--input-text-full-read-only-primary);--clear-icon-color: var(--input-text-full-read-only-primary);--text-field-dropdown-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-dropdown-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-dropdown-field-input-color: var(--input-text-full-read-only-primary)}\n"] }]
-        }], propDecorators: { selectedItemResponse: [{
+            args: [{ selector: 'gravity-dropdown-list', providers: [FilterByPipe], template: "<label class=\"hr-label sm-bold {{getStatus()}}\" *ngIf=\"label\">\n  {{label}} <span *ngIf=\"required || hasError\">*</span>\n</label>\n<div [attr.data-cy]=\"cypressTag\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n     (click)=\"toggleDropdown()\">\n  <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"\n                *ngIf=\"iconLeft\"></gravity-icon>\n  <p class=\"hr-label {{size}}-regular value\">\n    <ng-container *ngIf=\"selectedItems.length == 0\">\n      {{placeholder ? placeholder : label}}\n    </ng-container>\n    <ng-container *ngIf=\"selectedItems.length > 0\">\n      <ng-container *ngFor=\"let item of selectedItems; let i = index\">\n        {{config ? item[config.label] : item}}{{i != selectedItems.length - 1 ? ',' : ''}}\n      </ng-container>\n    </ng-container>\n  </p>\n  <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"\n                *ngIf=\"!isReadonly\"></gravity-icon>\n  <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\" *ngIf=\"dropdownOpened\">\n    <div class=\"search-input\">\n      <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n      <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n             [(ngModel)]=\"searchText\" placeholder=\"{{currentLang == 'es' ? 'Limpiar' : 'Search input'}}\">\n      <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n                    [iconSize]=\"'sm-12'\" *ngIf=\"searchText?.length > 0\"></gravity-icon>\n    </div>\n    <div class=\"items\">\n      <div class=\"hr-label item {{size}}-regular pointer\" [class.selected]=\"checkIfSelected(item)\"\n           (click)=\"selectItem(item)\" *ngFor=\"let item of availableOptions\">\n        <gravity-checkbox [checked]=\"checkIfSelected(item)\" *ngIf=\"multiple\">\n          {{config ? item[config.label] : item}}\n        </gravity-checkbox>\n        <ng-container *ngIf=\"!multiple\">{{config ? item[config.label] : item}}</ng-container>\n      </div>\n      <div class=\"hr-label item {{size}}-bold no-results\" *ngIf=\"availableOptions.length == 0\">\n        {{'SHARED.LABELS.no_results' | translate}}\n      </div>\n    </div>\n    <div class=\"dropdown-footer\" *ngIf=\"selectedItems.length > 0\" [class.not-clearable]=\"!clearable\">\n      <p class=\"hr-label pointer sm-regular\" (click)=\"clearSelection()\" *ngIf=\"clearable\">\n        {{currentLang == 'es' ? 'Limpiar' : 'Clear selection'}}\n      </p>\n      <p class=\"hr-label pointer sm-bold\" (click)=\"$event.stopPropagation(); toggleDropdown()\"\n         *ngIf=\"availableOptions.length != 0\">\n        {{currentLang == 'es' ? 'Aplicar' : 'Apply'}}\n      </p>\n    </div>\n  </div>\n</div>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\" *ngIf=\"supportText\">\n  <gravity-icon [iconName]=\"'question-circle'\" *ngIf=\"hasError\" [iconSize]=\"'md-16'\"></gravity-icon>\n  {{supportText}}\n</p>\n<p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"\n   *ngIf=\"!supportText && getStatus() == 'active' && selectedItems.length == 0 && required\">\n  {{currentLang == 'es' ? 'Requerido' : 'Required'}}\n</p>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:3rem!important}.gravity-padding-top-xl{padding-top:3rem!important}.gravity-padding-bottom-xl{padding-bottom:3rem!important}.gravity-padding-left-xl{padding-left:3rem!important}.gravity-padding-right-xl{padding-right:3rem!important}.gravity-padding-block-xl{padding-block:3rem!important}.gravity-padding-inline-xl{padding-inline:3rem!important}.gravity-padding-xxl{padding:4rem!important}.gravity-padding-top-xxl{padding-top:4rem!important}.gravity-padding-bottom-xxl{padding-bottom:4rem!important}.gravity-padding-left-xxl{padding-left:4rem!important}.gravity-padding-right-xxl{padding-right:4rem!important}.gravity-padding-block-xxl{padding-block:4rem!important}.gravity-padding-inline-xxl{padding-inline:4rem!important}.gravity-padding-xxxl{padding:6rem!important}.gravity-padding-top-xxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxl{padding-left:6rem!important}.gravity-padding-right-xxxl{padding-right:6rem!important}.gravity-padding-block-xxxl{padding-block:6rem!important}.gravity-padding-inline-xxxl{padding-inline:6rem!important}.gravity-padding-xxxxl{padding:12rem!important}.gravity-padding-top-xxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:3rem!important}.gravity-margin-top-xl{margin-top:3rem!important}.gravity-margin-bottom-xl{margin-bottom:3rem!important}.gravity-margin-left-xl{margin-left:3rem!important}.gravity-margin-right-xl{margin-right:3rem!important}.gravity-margin-block-xl{margin-block:3rem!important}.gravity-margin-inline-xl{margin-inline:3rem!important}.gravity-margin-xxl{margin:4rem!important}.gravity-margin-top-xxl{margin-top:4rem!important}.gravity-margin-bottom-xxl{margin-bottom:4rem!important}.gravity-margin-left-xxl{margin-left:4rem!important}.gravity-margin-right-xxl{margin-right:4rem!important}.gravity-margin-block-xxl{margin-block:4rem!important}.gravity-margin-inline-xxl{margin-inline:4rem!important}.gravity-margin-xxxl{margin:6rem!important}.gravity-margin-top-xxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxl{margin-left:6rem!important}.gravity-margin-right-xxxl{margin-right:6rem!important}.gravity-margin-block-xxxl{margin-block:6rem!important}.gravity-margin-inline-xxxl{margin-inline:6rem!important}.gravity-margin-xxxxl{margin:12rem!important}.gravity-margin-top-xxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;display:flex;height:var(--text-field-input-field-height);padding:10px 12px;position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width)}.gravity-input-field gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left{margin-right:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.gravity-input-field.sm{--dropdown-items-gap: map-get($spacing-values, xs);--dropdown-items-padding-top: 16px;--dropdown-top-margin: 5px;--text-field-input-field-content: 9px;--text-field-input-field-height: 29px;--text-field-input-field-input: 13px;--icon-margin: 5px;--span-checkmark-height: 14px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width{--text-field-input-field-width: 398px}.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--dropdown-items-gap: 12px;--dropdown-items-padding-top: 20px;--dropdown-top-margin: 8px;--text-field-input-field-content: 15px;--text-field-input-field-height: 35px;--text-field-input-field-input: 18px;--icon-margin: 8px;--span-checkmark-height: 16px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width{--text-field-input-field-width: 416px}.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.dropdown-panel{background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;cursor:initial;left:-1px;position:absolute;top:calc(100% + var(--dropdown-top-margin));width:calc(var(--text-field-input-field-width) + 2px);z-index:1}.dropdown-panel .search-input{align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary);display:flex;padding:12px}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{background-color:transparent;border:none;border-radius:0;color:var(--input-text-full-enabled-primary);margin:0;outline:none;padding:0;width:100%}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items{display:flex;flex-direction:column;gap:var(--dropdown-items-gap);max-height:200px;overflow:auto;padding:var(--dropdown-items-padding-top) 12px}.dropdown-panel .items .item{align-items:center;color:var(--label-text-full-enabled-primary);display:flex;padding:4px}.dropdown-panel .items .item:hover:not(.no-results),.dropdown-panel .items .item.selected{background-color:var(--bg-menu-button-hover-primary);color:var(--on-bg-menu-button-active-primary)}.dropdown-panel .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field{padding-left:calc(var(--span-checkmark-width) + var(--span-checkmark-margin))}.dropdown-panel .items .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{height:var(--span-checkmark-height);min-height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);width:var(--span-checkmark-width)}.dropdown-panel .dropdown-footer{align-items:center;display:flex;justify-content:space-between;padding:12px 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{color:var(--on-bg-button-active-secondary)}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--text-field-supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: FilterByPipe }]; }, propDecorators: { selectedItemsResponse: [{
                 type: Output,
                 args: ['response']
-            }], currentLang: [{
+            }], clearable: [{
+                type: Input
+            }], config: [{
                 type: Input
-            }], customPlaceholder: [{
+            }], currentLang: [{
                 type: Input
-            }], customValue: [{
+            }], customValues: [{
                 type: Input
             }], cypressTag: [{
                 type: Input
-            }], iconColor: [{
+            }], hasError: [{
+                type: Input
+            }], iconLeft: [{
                 type: Input
-            }], iconNames: [{
+            }], isDisabled: [{
                 type: Input
-            }], iconPlacement: [{
+            }], isReadonly: [{
                 type: Input
             }], items: [{
                 type: Input
             }], label: [{
                 type: Input
-            }], ngSelectConfig: [{
+            }], multiple: [{
+                type: Input
+            }], placeholder: [{
                 type: Input
             }], required: [{
                 type: Input
-            }], state: [{
+            }], supportText: [{
                 type: Input
-            }], supportTextContent: [{
+            }], size: [{
                 type: Input
-            }], supportTextType: [{
+            }], width: [{
                 type: Input
-            }], ngSelectComponent: [{
-                type: ViewChild,
-                args: ['ngSelectComponent', { static: false }]
             }] } });
 
 class GravityTextFieldComponent {
@@ -1247,46 +1431,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['response']
             }] } });
 
-class GravityCheckboxComponent {
-    constructor() {
-        this.checked = false;
-        this.disabled = false;
-        this.change = new EventEmitter();
-        this.isCheckboxActive = false;
-    }
-    ngAfterViewInit() {
-        this.isCheckboxActive = this.checked;
-        this.change.emit({ value: this.value, checked: this.isCheckboxActive });
-    }
-    ngOnChanges(changes) {
-        if (changes['checked']) {
-            this.isCheckboxActive = changes['checked'].currentValue;
-        }
-    }
-    toggleCheckbox() {
-        if (!this.disabled) {
-            this.isCheckboxActive = !this.isCheckboxActive;
-            this.change.emit({ value: this.value, checked: this.isCheckboxActive });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: { checked: "checked", disabled: "disabled", name: "name", value: "value" }, outputs: { change: "change" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n  <input [checked]=\"isCheckboxActive\"\n         [disabled]=\"disabled\"\n         [name]=\"name\"\n         [value]=\"value\"\n\n         type=\"checkbox\">\n  <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n    <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n  </span>\n  <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;bottom:0;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;margin:auto 0;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'gravity-checkbox', template: "<div class=\"gravity-checkbox-field\" [class.disabled]=\"disabled\">\n  <input [checked]=\"isCheckboxActive\"\n         [disabled]=\"disabled\"\n         [name]=\"name\"\n         [value]=\"value\"\n\n         type=\"checkbox\">\n  <span class=\"checkmark\" (click)=\"toggleCheckbox()\">\n    <gravity-icon [iconName]=\"'check'\" [iconSize]=\"'sm-12'\" *ngIf=\"isCheckboxActive\"></gravity-icon>\n  </span>\n  <ng-content></ng-content>\n</div>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}:host{display:block}.gravity-checkbox-field{-moz-user-select:none;-ms-user-select:none;padding-left:1.5rem;position:relative;user-select:none;-webkit-user-select:none}.gravity-checkbox-field input{position:absolute;opacity:0;height:0;width:0}.gravity-checkbox-field .checkmark{align-items:center;background-color:transparent;border:1px solid var(--outline-checkbox-off-primary);border-radius:.3125rem;bottom:0;cursor:pointer;display:flex;left:0;height:1.25rem;justify-content:center;margin:auto 0;min-height:1.25rem;min-width:1.25rem;position:absolute;top:0;width:1.25rem}.gravity-checkbox-field .checkmark gravity-icon{--icon-color: var(--on-bg-checkbox-on-primary)}.gravity-checkbox-field input:checked~.checkmark{background-color:var(--bg-checkbox-on-primary);border-color:var(--bg-checkbox-on-primary)}.gravity-checkbox-field.disabled .checkmark{background-color:var(--bg-disabled)!important;border-color:var(--bg-disabled)!important;cursor:initial}.gravity-checkbox-field.disabled .checkmark gravity-icon{--icon-color: var(--on-bg-disabled)}\n"] }]
-        }], propDecorators: { checked: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }] } });
-
 class GravityDialogComponent {
     constructor(ngbActiveModal) {
         this.ngbActiveModal = ngbActiveModal;
@@ -2183,13 +2327,13 @@ class GravityDesignSystemModule {
             NodeComponent,
             NodeToggleComponent,
             NodeCheckboxComponent,
-            NodeNameComponent], imports: [i1.AngularSvgIconModule, i2$1.AngularSvgIconPreloaderModule, BsDatepickerModule,
+            NodeNameComponent,
+            FilterByPipe], imports: [i1.AngularSvgIconModule, i2.AngularSvgIconPreloaderModule, BsDatepickerModule,
             CommonModule,
             FormsModule, GravityTooltipModule, NgbDatepickerModule,
             NgbOffcanvasModule,
             NgbProgressbarModule,
             NgbToastModule,
-            NgSelectModule,
             NgxPrettyCheckboxModule,
             ReactiveFormsModule], exports: [GravityAttachFileComponent,
             GravityButtonComponent,
@@ -2220,7 +2364,6 @@ class GravityDesignSystemModule {
             NgbOffcanvasModule,
             NgbProgressbarModule,
             NgbToastModule,
-            NgSelectModule,
             NgxPrettyCheckboxModule,
             ReactiveFormsModule, GravityTooltipModule] }); }
 }
@@ -2248,7 +2391,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NodeComponent,
                         NodeToggleComponent,
                         NodeCheckboxComponent,
-                        NodeNameComponent
+                        NodeNameComponent,
+                        FilterByPipe
                     ],
                     imports: [
                         AngularSvgIconModule.forRoot(),
@@ -2263,7 +2407,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         NgbOffcanvasModule,
                         NgbProgressbarModule,
                         NgbToastModule,
-                        NgSelectModule,
                         NgxPrettyCheckboxModule,
                         ReactiveFormsModule
                     ],