@apipass/inputs 1.0.169 → 1.0.170

package/fesm2022/apipass-inputs.mjs

@@ -104,7 +104,7 @@ class SelectEnumComponent extends ValueAccessorBase {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectEnumComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"apipass-select apipass-select-enum\" appearance=\"outline\" >\r\n  <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n  <mat-select [(ngModel)]=\"value\" [disabled]=\"disabled\" (click)=\"search = ''\" panelClass=\"select-enum-panel\">\r\n    <mat-option class=\"mat-select-input\" *ngIf=\"enabledSearch\" (keydown)=\"onKeyDown($event)\" disabled=\"disabled\">\r\n      <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\r\n        <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\r\n        <input matInput class=\"search-input-item\"\r\n               [(ngModel)]=\"search\"\r\n               aria-autocomplete=\"none\"\r\n               autocomplete=\"off\"\r\n        />\r\n      </mat-form-field>\r\n    </mat-option>\r\n    <mat-option *ngFor=\"let enumData of data | selectEnumFilter: search\" [value]=\"enumData.key\">{{ enumData.value }}</mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [".select-enum-panel .mat-select-input{pointer-events:auto!important}.select-enum-panel .mat-select-input span{width:100%!important;opacity:1!important;margin-top:15px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i7.SelectEnumFilterPipe, name: "selectEnumFilter" }], encapsulation: i0.ViewEncapsulation.None });
+            }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"apipass-select apipass-select-enum\" appearance=\"outline\" >\n  <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n  <mat-select [(ngModel)]=\"value\" [disabled]=\"disabled\" (click)=\"search = ''\" panelClass=\"select-enum-panel\">\n    <mat-option class=\"mat-select-input\" *ngIf=\"enabledSearch\" (keydown)=\"onKeyDown($event)\" disabled=\"disabled\">\n      <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n        <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n        <input matInput class=\"search-input-item\"\n               [(ngModel)]=\"search\"\n               aria-autocomplete=\"none\"\n               autocomplete=\"off\"\n        />\n      </mat-form-field>\n    </mat-option>\n    <mat-option *ngFor=\"let enumData of data | selectEnumFilter: search\" [value]=\"enumData.key\">{{ enumData.value }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".select-enum-panel .mat-select-input{pointer-events:auto!important}.select-enum-panel .mat-select-input span{width:100%!important;opacity:1!important;margin-top:15px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i7.SelectEnumFilterPipe, name: "selectEnumFilter" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectEnumComponent, decorators: [{
             type: Component,
@@ -112,7 +112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectEnumComponent),
                             multi: true
-                        }], encapsulation: ViewEncapsulation.None, template: "<mat-form-field class=\"apipass-select apipass-select-enum\" appearance=\"outline\" >\r\n  <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\r\n  <mat-select [(ngModel)]=\"value\" [disabled]=\"disabled\" (click)=\"search = ''\" panelClass=\"select-enum-panel\">\r\n    <mat-option class=\"mat-select-input\" *ngIf=\"enabledSearch\" (keydown)=\"onKeyDown($event)\" disabled=\"disabled\">\r\n      <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\r\n        <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\r\n        <input matInput class=\"search-input-item\"\r\n               [(ngModel)]=\"search\"\r\n               aria-autocomplete=\"none\"\r\n               autocomplete=\"off\"\r\n        />\r\n      </mat-form-field>\r\n    </mat-option>\r\n    <mat-option *ngFor=\"let enumData of data | selectEnumFilter: search\" [value]=\"enumData.key\">{{ enumData.value }}</mat-option>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: [".select-enum-panel .mat-select-input{pointer-events:auto!important}.select-enum-panel .mat-select-input span{width:100%!important;opacity:1!important;margin-top:15px!important}\n"] }]
+                        }], encapsulation: ViewEncapsulation.None, template: "<mat-form-field class=\"apipass-select apipass-select-enum\" appearance=\"outline\" >\n  <mat-label *ngIf=\"placeholder\">{{placeholder}}</mat-label>\n  <mat-select [(ngModel)]=\"value\" [disabled]=\"disabled\" (click)=\"search = ''\" panelClass=\"select-enum-panel\">\n    <mat-option class=\"mat-select-input\" *ngIf=\"enabledSearch\" (keydown)=\"onKeyDown($event)\" disabled=\"disabled\">\n      <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n        <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n        <input matInput class=\"search-input-item\"\n               [(ngModel)]=\"search\"\n               aria-autocomplete=\"none\"\n               autocomplete=\"off\"\n        />\n      </mat-form-field>\n    </mat-option>\n    <mat-option *ngFor=\"let enumData of data | selectEnumFilter: search\" [value]=\"enumData.key\">{{ enumData.value }}</mat-option>\n  </mat-select>\n</mat-form-field>\n", styles: [".select-enum-panel .mat-select-input{pointer-events:auto!important}.select-enum-panel .mat-select-input span{width:100%!important;opacity:1!important;margin-top:15px!important}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], findPlaceHolder: [{
@@ -204,7 +204,7 @@ class InputTextComponent extends ValueAccessorBase {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputTextComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\r\n  class=\"apipass-input-text\"\r\n  [ngClass]=\"{'apipass-input-text-slim': isSlim(), 'apipass-input-text': isDefault()}\"\r\n  dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\r\n  appearance=\"outline\">\r\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n  <mat-icon class=\"mat-icon-prefix\" [ngClass]=\"{'mat-icon-slim': isSlim()}\" matPrefix *ngIf=\"iconPrefix\" (click)=\"prefixClick()\">{{iconPrefix}}</mat-icon>\r\n  <input [id]=\"getComponentId('input')\" matInput type=\"text\" class=\"input-text\" [ngStyle]=\"{ width: widthInput() + '%' }\" [(ngModel)]=\"value\"\r\n    [disabled]=\"disabled\" [autocomplete]=\"autoComplete\"\r\n    (input)=\"onSearchInput()\" />\r\n  <div *ngIf=\"this.inputOptions.length > 0\" class=\"select-container\"\r\n    [ngStyle]=\"{ width: getSelectWidth() }\" [ngClass]=\"{ 'select-container': isDefault(),\r\n    'select-container-slim':isSlim()}\">\r\n    <mat-form-field [ngClass]=\"{'apipass-input-text-slim': isSlim(), 'apipass-input-text': isDefault()}\">\r\n      <mat-select [id]=\"getComponentId('select')\" [(value)]=\"inputOptionsInitSelected\" (selectionChange)=\"onOptionSelected($event)\">\r\n        <mat-option *ngFor=\"let item of inputOptions\" [value]=\"item.value\">{{item.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n  <mat-icon class=\"mat-icon-suffix\" [ngClass]=\"{'mat-icon-slim': isSlim()}\" matSuffix *ngIf=\"iconSuffix\" (click)=\"suffixClick()\">{{iconSuffix}}</mat-icon>\r\n</mat-form-field>\r\n", styles: [".apipass-input-text,.apipass-input-text-slim{width:100%}.apipass-input-text .mdc-text-field--outlined,.apipass-input-text-slim .mdc-text-field--outlined{padding-right:5px}.apipass-input-text .select-container,.apipass-input-text .select-container-slim,.apipass-input-text-slim .select-container,.apipass-input-text-slim .select-container-slim{position:absolute;right:0;top:50%;transform:translateY(-50%)}.apipass-input-text .select-container .mdc-notched-outline,.apipass-input-text .select-container-slim .mdc-notched-outline,.apipass-input-text-slim .select-container .mdc-notched-outline,.apipass-input-text-slim .select-container-slim .mdc-notched-outline{height:80%;margin-top:5px}.apipass-input-text .select-container .mdc-notched-outline__leading,.apipass-input-text .select-container .mdc-notched-outline__notch,.apipass-input-text .select-container .mdc-notched-outline__trailing,.apipass-input-text .select-container-slim .mdc-notched-outline__leading,.apipass-input-text .select-container-slim .mdc-notched-outline__notch,.apipass-input-text .select-container-slim .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container .mdc-notched-outline__leading,.apipass-input-text-slim .select-container .mdc-notched-outline__notch,.apipass-input-text-slim .select-container .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__leading,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__notch,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__trailing{border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:0!important;height:43px}.apipass-input-text .select-container .mat-mdc-select-value,.apipass-input-text .select-container-slim .mat-mdc-select-value,.apipass-input-text-slim .select-container .mat-mdc-select-value,.apipass-input-text-slim .select-container-slim .mat-mdc-select-value{text-align:left;padding-left:5px}.apipass-input-text .select-container .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text .select-container-slim .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text-slim .select-container .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text-slim .select-container-slim .mdc-text-field--outlined .mdc-notched-outline{margin-top:1px!important}.apipass-input-text .select-container-slim,.apipass-input-text-slim .select-container-slim{top:50%!important}.apipass-input-text .select-container-slim .mdc-notched-outline__leading,.apipass-input-text .select-container-slim .mdc-notched-outline__notch,.apipass-input-text .select-container-slim .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__leading,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__notch,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__trailing{height:29px}.apipass-input-text .mdc-text-field,.apipass-input-text-slim .mdc-text-field{padding:0 5px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }], encapsulation: i0.ViewEncapsulation.None });
+            }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  class=\"apipass-input-text\"\n  [ngClass]=\"{'apipass-input-text-slim': isSlim(), 'apipass-input-text': isDefault()}\"\n  dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\n  appearance=\"outline\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-icon class=\"mat-icon-prefix\" [ngClass]=\"{'mat-icon-slim': isSlim()}\" matPrefix *ngIf=\"iconPrefix\" (click)=\"prefixClick()\">{{iconPrefix}}</mat-icon>\n  <input [id]=\"getComponentId('input')\" matInput type=\"text\" class=\"input-text\" [ngStyle]=\"{ width: widthInput() + '%' }\" [(ngModel)]=\"value\"\n    [disabled]=\"disabled\" [autocomplete]=\"autoComplete\"\n    (input)=\"onSearchInput()\" />\n  <div *ngIf=\"this.inputOptions.length > 0\" class=\"select-container\"\n    [ngStyle]=\"{ width: getSelectWidth() }\" [ngClass]=\"{ 'select-container': isDefault(),\n    'select-container-slim':isSlim()}\">\n    <mat-form-field [ngClass]=\"{'apipass-input-text-slim': isSlim(), 'apipass-input-text': isDefault()}\">\n      <mat-select [id]=\"getComponentId('select')\" [(value)]=\"inputOptionsInitSelected\" (selectionChange)=\"onOptionSelected($event)\">\n        <mat-option *ngFor=\"let item of inputOptions\" [value]=\"item.value\">{{item.title}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <mat-icon class=\"mat-icon-suffix\" [ngClass]=\"{'mat-icon-slim': isSlim()}\" matSuffix *ngIf=\"iconSuffix\" (click)=\"suffixClick()\">{{iconSuffix}}</mat-icon>\n</mat-form-field>\n", styles: [".apipass-input-text,.apipass-input-text-slim{width:100%}.apipass-input-text .mdc-text-field--outlined,.apipass-input-text-slim .mdc-text-field--outlined{padding-right:5px}.apipass-input-text .select-container,.apipass-input-text .select-container-slim,.apipass-input-text-slim .select-container,.apipass-input-text-slim .select-container-slim{position:absolute;right:0;top:50%;transform:translateY(-50%)}.apipass-input-text .select-container .mdc-notched-outline,.apipass-input-text .select-container-slim .mdc-notched-outline,.apipass-input-text-slim .select-container .mdc-notched-outline,.apipass-input-text-slim .select-container-slim .mdc-notched-outline{height:80%;margin-top:5px}.apipass-input-text .select-container .mdc-notched-outline__leading,.apipass-input-text .select-container .mdc-notched-outline__notch,.apipass-input-text .select-container .mdc-notched-outline__trailing,.apipass-input-text .select-container-slim .mdc-notched-outline__leading,.apipass-input-text .select-container-slim .mdc-notched-outline__notch,.apipass-input-text .select-container-slim .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container .mdc-notched-outline__leading,.apipass-input-text-slim .select-container .mdc-notched-outline__notch,.apipass-input-text-slim .select-container .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__leading,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__notch,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__trailing{border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:0!important;height:43px}.apipass-input-text .select-container .mat-mdc-select-value,.apipass-input-text .select-container-slim .mat-mdc-select-value,.apipass-input-text-slim .select-container .mat-mdc-select-value,.apipass-input-text-slim .select-container-slim .mat-mdc-select-value{text-align:left;padding-left:5px}.apipass-input-text .select-container .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text .select-container-slim .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text-slim .select-container .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text-slim .select-container-slim .mdc-text-field--outlined .mdc-notched-outline{margin-top:1px!important}.apipass-input-text .select-container-slim,.apipass-input-text-slim .select-container-slim{top:50%!important}.apipass-input-text .select-container-slim .mdc-notched-outline__leading,.apipass-input-text .select-container-slim .mdc-notched-outline__notch,.apipass-input-text .select-container-slim .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__leading,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__notch,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__trailing{height:29px}.apipass-input-text .mdc-text-field,.apipass-input-text-slim .mdc-text-field{padding:0 5px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
@@ -212,7 +212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputTextComponent),
                             multi: true
-                        }], encapsulation: ViewEncapsulation.None, template: "<mat-form-field\r\n  class=\"apipass-input-text\"\r\n  [ngClass]=\"{'apipass-input-text-slim': isSlim(), 'apipass-input-text': isDefault()}\"\r\n  dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\r\n  appearance=\"outline\">\r\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n  <mat-icon class=\"mat-icon-prefix\" [ngClass]=\"{'mat-icon-slim': isSlim()}\" matPrefix *ngIf=\"iconPrefix\" (click)=\"prefixClick()\">{{iconPrefix}}</mat-icon>\r\n  <input [id]=\"getComponentId('input')\" matInput type=\"text\" class=\"input-text\" [ngStyle]=\"{ width: widthInput() + '%' }\" [(ngModel)]=\"value\"\r\n    [disabled]=\"disabled\" [autocomplete]=\"autoComplete\"\r\n    (input)=\"onSearchInput()\" />\r\n  <div *ngIf=\"this.inputOptions.length > 0\" class=\"select-container\"\r\n    [ngStyle]=\"{ width: getSelectWidth() }\" [ngClass]=\"{ 'select-container': isDefault(),\r\n    'select-container-slim':isSlim()}\">\r\n    <mat-form-field [ngClass]=\"{'apipass-input-text-slim': isSlim(), 'apipass-input-text': isDefault()}\">\r\n      <mat-select [id]=\"getComponentId('select')\" [(value)]=\"inputOptionsInitSelected\" (selectionChange)=\"onOptionSelected($event)\">\r\n        <mat-option *ngFor=\"let item of inputOptions\" [value]=\"item.value\">{{item.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n  </div>\r\n  <mat-icon class=\"mat-icon-suffix\" [ngClass]=\"{'mat-icon-slim': isSlim()}\" matSuffix *ngIf=\"iconSuffix\" (click)=\"suffixClick()\">{{iconSuffix}}</mat-icon>\r\n</mat-form-field>\r\n", styles: [".apipass-input-text,.apipass-input-text-slim{width:100%}.apipass-input-text .mdc-text-field--outlined,.apipass-input-text-slim .mdc-text-field--outlined{padding-right:5px}.apipass-input-text .select-container,.apipass-input-text .select-container-slim,.apipass-input-text-slim .select-container,.apipass-input-text-slim .select-container-slim{position:absolute;right:0;top:50%;transform:translateY(-50%)}.apipass-input-text .select-container .mdc-notched-outline,.apipass-input-text .select-container-slim .mdc-notched-outline,.apipass-input-text-slim .select-container .mdc-notched-outline,.apipass-input-text-slim .select-container-slim .mdc-notched-outline{height:80%;margin-top:5px}.apipass-input-text .select-container .mdc-notched-outline__leading,.apipass-input-text .select-container .mdc-notched-outline__notch,.apipass-input-text .select-container .mdc-notched-outline__trailing,.apipass-input-text .select-container-slim .mdc-notched-outline__leading,.apipass-input-text .select-container-slim .mdc-notched-outline__notch,.apipass-input-text .select-container-slim .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container .mdc-notched-outline__leading,.apipass-input-text-slim .select-container .mdc-notched-outline__notch,.apipass-input-text-slim .select-container .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__leading,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__notch,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__trailing{border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:0!important;height:43px}.apipass-input-text .select-container .mat-mdc-select-value,.apipass-input-text .select-container-slim .mat-mdc-select-value,.apipass-input-text-slim .select-container .mat-mdc-select-value,.apipass-input-text-slim .select-container-slim .mat-mdc-select-value{text-align:left;padding-left:5px}.apipass-input-text .select-container .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text .select-container-slim .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text-slim .select-container .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text-slim .select-container-slim .mdc-text-field--outlined .mdc-notched-outline{margin-top:1px!important}.apipass-input-text .select-container-slim,.apipass-input-text-slim .select-container-slim{top:50%!important}.apipass-input-text .select-container-slim .mdc-notched-outline__leading,.apipass-input-text .select-container-slim .mdc-notched-outline__notch,.apipass-input-text .select-container-slim .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__leading,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__notch,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__trailing{height:29px}.apipass-input-text .mdc-text-field,.apipass-input-text-slim .mdc-text-field{padding:0 5px!important}\n"] }]
+                        }], encapsulation: ViewEncapsulation.None, template: "<mat-form-field\n  class=\"apipass-input-text\"\n  [ngClass]=\"{'apipass-input-text-slim': isSlim(), 'apipass-input-text': isDefault()}\"\n  dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\n  appearance=\"outline\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-icon class=\"mat-icon-prefix\" [ngClass]=\"{'mat-icon-slim': isSlim()}\" matPrefix *ngIf=\"iconPrefix\" (click)=\"prefixClick()\">{{iconPrefix}}</mat-icon>\n  <input [id]=\"getComponentId('input')\" matInput type=\"text\" class=\"input-text\" [ngStyle]=\"{ width: widthInput() + '%' }\" [(ngModel)]=\"value\"\n    [disabled]=\"disabled\" [autocomplete]=\"autoComplete\"\n    (input)=\"onSearchInput()\" />\n  <div *ngIf=\"this.inputOptions.length > 0\" class=\"select-container\"\n    [ngStyle]=\"{ width: getSelectWidth() }\" [ngClass]=\"{ 'select-container': isDefault(),\n    'select-container-slim':isSlim()}\">\n    <mat-form-field [ngClass]=\"{'apipass-input-text-slim': isSlim(), 'apipass-input-text': isDefault()}\">\n      <mat-select [id]=\"getComponentId('select')\" [(value)]=\"inputOptionsInitSelected\" (selectionChange)=\"onOptionSelected($event)\">\n        <mat-option *ngFor=\"let item of inputOptions\" [value]=\"item.value\">{{item.title}}</mat-option>\n      </mat-select>\n    </mat-form-field>\n  </div>\n  <mat-icon class=\"mat-icon-suffix\" [ngClass]=\"{'mat-icon-slim': isSlim()}\" matSuffix *ngIf=\"iconSuffix\" (click)=\"suffixClick()\">{{iconSuffix}}</mat-icon>\n</mat-form-field>\n", styles: [".apipass-input-text,.apipass-input-text-slim{width:100%}.apipass-input-text .mdc-text-field--outlined,.apipass-input-text-slim .mdc-text-field--outlined{padding-right:5px}.apipass-input-text .select-container,.apipass-input-text .select-container-slim,.apipass-input-text-slim .select-container,.apipass-input-text-slim .select-container-slim{position:absolute;right:0;top:50%;transform:translateY(-50%)}.apipass-input-text .select-container .mdc-notched-outline,.apipass-input-text .select-container-slim .mdc-notched-outline,.apipass-input-text-slim .select-container .mdc-notched-outline,.apipass-input-text-slim .select-container-slim .mdc-notched-outline{height:80%;margin-top:5px}.apipass-input-text .select-container .mdc-notched-outline__leading,.apipass-input-text .select-container .mdc-notched-outline__notch,.apipass-input-text .select-container .mdc-notched-outline__trailing,.apipass-input-text .select-container-slim .mdc-notched-outline__leading,.apipass-input-text .select-container-slim .mdc-notched-outline__notch,.apipass-input-text .select-container-slim .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container .mdc-notched-outline__leading,.apipass-input-text-slim .select-container .mdc-notched-outline__notch,.apipass-input-text-slim .select-container .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__leading,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__notch,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__trailing{border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:0!important;height:43px}.apipass-input-text .select-container .mat-mdc-select-value,.apipass-input-text .select-container-slim .mat-mdc-select-value,.apipass-input-text-slim .select-container .mat-mdc-select-value,.apipass-input-text-slim .select-container-slim .mat-mdc-select-value{text-align:left;padding-left:5px}.apipass-input-text .select-container .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text .select-container-slim .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text-slim .select-container .mdc-text-field--outlined .mdc-notched-outline,.apipass-input-text-slim .select-container-slim .mdc-text-field--outlined .mdc-notched-outline{margin-top:1px!important}.apipass-input-text .select-container-slim,.apipass-input-text-slim .select-container-slim{top:50%!important}.apipass-input-text .select-container-slim .mdc-notched-outline__leading,.apipass-input-text .select-container-slim .mdc-notched-outline__notch,.apipass-input-text .select-container-slim .mdc-notched-outline__trailing,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__leading,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__notch,.apipass-input-text-slim .select-container-slim .mdc-notched-outline__trailing{height:29px}.apipass-input-text .mdc-text-field,.apipass-input-text-slim .mdc-text-field{padding:0 5px!important}\n"] }]
         }], propDecorators: { componentId: [{
                 type: Input
             }], label: [{
@@ -296,11 +296,11 @@ class InputAvatarComponent {
         this.onFileChanged.emit({ avatarUrl: this.avatarUrl, avatarFormData: this.avatarFormData });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputAvatarComponent, selector: "input-avatar", inputs: { avatarFormData: "avatarFormData", avatarUrl: "avatarUrl", imageAlt: "imageAlt", imageTitle: "imageTitle", accept: "accept", canRemove: "canRemove", removeTitle: "removeTitle", canUpload: "canUpload", uploadTitle: "uploadTitle", canModify: "canModify", modifyTitle: "modifyTitle", imageBorderRadius: "imageBorderRadius", width: "width", height: "height", iconFontSize: "iconFontSize" }, outputs: { onFileChanged: "onFileChanged" }, ngImport: i0, template: "<div class=\"input-avatar\" [ngStyle]=\"{'width': width, 'height': height}\">\r\n  <img loading=\"lazy\" [src]=\"avatarUrl\" [alt]=\"imageAlt\" [matTooltip]=\"imageTitle\"\r\n       [ngStyle]=\"{'width': width, 'height': 'auto', 'max-height': '100%', 'border-radius': imageBorderRadius}\"/>\r\n  <div class=\"image-backdrop\" *ngIf=\"canAction()\" [ngStyle]=\"{'width': width, 'height': height, 'border-radius': imageBorderRadius}\"></div>\r\n  <div class=\"image-actions\" *ngIf=\"canAction()\" [ngStyle]=\"{'width': width, 'height': height, 'border-radius': imageBorderRadius}\">\r\n    <icon *ngIf=\"!hasImage() && canUpload\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"uploadTitle\"\r\n          (click)=\"actionFile.click(); actionFile.value = '';\"\r\n          [type]=\"'primary'\"\r\n          [name]=\"'fas fa-upload'\"></icon>\r\n    <icon *ngIf=\"hasImage() && canModify\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"modifyTitle\"\r\n          (click)=\"actionFile.click(); actionFile.value = '';\"\r\n          [type]=\"'primary'\"\r\n          [name]=\"'fas fa-pencil-alt'\"></icon>\r\n    <icon *ngIf=\"hasImage() && canRemove\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"removeTitle\"\r\n          (click)=\"removeClick(); actionFile.value = '';\"\r\n          [type]=\"'remove'\"\r\n          [name]=\"'fas fa-trash-alt'\"></icon>\r\n  </div>\r\n  <input #actionFile id=\"action-icon\" type=\"file\" accept=\"{{accept}}\" (change)=\"fileChange($event)\" style=\"display: none;\"/>\r\n</div>\r\n", styles: [".input-avatar{display:flex;align-items:center}.input-avatar .image-backdrop{display:none;position:absolute;background:#FFF;opacity:.6}.input-avatar .image-actions{display:none;position:absolute;justify-content:space-evenly;align-items:center}.input-avatar .image-actions icon{cursor:pointer}.input-avatar:hover .image-backdrop,.input-avatar:hover .image-actions{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IconComponent, selector: "icon", inputs: ["name", "title", "type", "size", "isMaterialIcon", "materialOutline", "routerLinkActive", "routerLink", "link", "target", "isActive"], outputs: ["onClick"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputAvatarComponent, selector: "input-avatar", inputs: { avatarFormData: "avatarFormData", avatarUrl: "avatarUrl", imageAlt: "imageAlt", imageTitle: "imageTitle", accept: "accept", canRemove: "canRemove", removeTitle: "removeTitle", canUpload: "canUpload", uploadTitle: "uploadTitle", canModify: "canModify", modifyTitle: "modifyTitle", imageBorderRadius: "imageBorderRadius", width: "width", height: "height", iconFontSize: "iconFontSize" }, outputs: { onFileChanged: "onFileChanged" }, ngImport: i0, template: "<div class=\"input-avatar\" [ngStyle]=\"{'width': width, 'height': height}\">\n  <img loading=\"lazy\" [src]=\"avatarUrl\" [alt]=\"imageAlt\" [matTooltip]=\"imageTitle\"\n       [ngStyle]=\"{'width': width, 'height': 'auto', 'max-height': '100%', 'border-radius': imageBorderRadius}\"/>\n  <div class=\"image-backdrop\" *ngIf=\"canAction()\" [ngStyle]=\"{'width': width, 'height': height, 'border-radius': imageBorderRadius}\"></div>\n  <div class=\"image-actions\" *ngIf=\"canAction()\" [ngStyle]=\"{'width': width, 'height': height, 'border-radius': imageBorderRadius}\">\n    <icon *ngIf=\"!hasImage() && canUpload\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"uploadTitle\"\n          (click)=\"actionFile.click(); actionFile.value = '';\"\n          [type]=\"'primary'\"\n          [name]=\"'fas fa-upload'\"></icon>\n    <icon *ngIf=\"hasImage() && canModify\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"modifyTitle\"\n          (click)=\"actionFile.click(); actionFile.value = '';\"\n          [type]=\"'primary'\"\n          [name]=\"'fas fa-pencil-alt'\"></icon>\n    <icon *ngIf=\"hasImage() && canRemove\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"removeTitle\"\n          (click)=\"removeClick(); actionFile.value = '';\"\n          [type]=\"'remove'\"\n          [name]=\"'fas fa-trash-alt'\"></icon>\n  </div>\n  <input #actionFile id=\"action-icon\" type=\"file\" accept=\"{{accept}}\" (change)=\"fileChange($event)\" style=\"display: none;\"/>\n</div>\n", styles: [".input-avatar{display:flex;align-items:center}.input-avatar .image-backdrop{display:none;position:absolute;background:#FFF;opacity:.6}.input-avatar .image-actions{display:none;position:absolute;justify-content:space-evenly;align-items:center}.input-avatar .image-actions icon{cursor:pointer}.input-avatar:hover .image-backdrop,.input-avatar:hover .image-actions{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IconComponent, selector: "icon", inputs: ["name", "title", "type", "size", "isMaterialIcon", "materialOutline", "routerLinkActive", "routerLink", "link", "target", "isActive"], outputs: ["onClick"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-avatar', encapsulation: ViewEncapsulation.None, template: "<div class=\"input-avatar\" [ngStyle]=\"{'width': width, 'height': height}\">\r\n  <img loading=\"lazy\" [src]=\"avatarUrl\" [alt]=\"imageAlt\" [matTooltip]=\"imageTitle\"\r\n       [ngStyle]=\"{'width': width, 'height': 'auto', 'max-height': '100%', 'border-radius': imageBorderRadius}\"/>\r\n  <div class=\"image-backdrop\" *ngIf=\"canAction()\" [ngStyle]=\"{'width': width, 'height': height, 'border-radius': imageBorderRadius}\"></div>\r\n  <div class=\"image-actions\" *ngIf=\"canAction()\" [ngStyle]=\"{'width': width, 'height': height, 'border-radius': imageBorderRadius}\">\r\n    <icon *ngIf=\"!hasImage() && canUpload\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"uploadTitle\"\r\n          (click)=\"actionFile.click(); actionFile.value = '';\"\r\n          [type]=\"'primary'\"\r\n          [name]=\"'fas fa-upload'\"></icon>\r\n    <icon *ngIf=\"hasImage() && canModify\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"modifyTitle\"\r\n          (click)=\"actionFile.click(); actionFile.value = '';\"\r\n          [type]=\"'primary'\"\r\n          [name]=\"'fas fa-pencil-alt'\"></icon>\r\n    <icon *ngIf=\"hasImage() && canRemove\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"removeTitle\"\r\n          (click)=\"removeClick(); actionFile.value = '';\"\r\n          [type]=\"'remove'\"\r\n          [name]=\"'fas fa-trash-alt'\"></icon>\r\n  </div>\r\n  <input #actionFile id=\"action-icon\" type=\"file\" accept=\"{{accept}}\" (change)=\"fileChange($event)\" style=\"display: none;\"/>\r\n</div>\r\n", styles: [".input-avatar{display:flex;align-items:center}.input-avatar .image-backdrop{display:none;position:absolute;background:#FFF;opacity:.6}.input-avatar .image-actions{display:none;position:absolute;justify-content:space-evenly;align-items:center}.input-avatar .image-actions icon{cursor:pointer}.input-avatar:hover .image-backdrop,.input-avatar:hover .image-actions{display:flex}\n"] }]
+            args: [{ selector: 'input-avatar', encapsulation: ViewEncapsulation.None, template: "<div class=\"input-avatar\" [ngStyle]=\"{'width': width, 'height': height}\">\n  <img loading=\"lazy\" [src]=\"avatarUrl\" [alt]=\"imageAlt\" [matTooltip]=\"imageTitle\"\n       [ngStyle]=\"{'width': width, 'height': 'auto', 'max-height': '100%', 'border-radius': imageBorderRadius}\"/>\n  <div class=\"image-backdrop\" *ngIf=\"canAction()\" [ngStyle]=\"{'width': width, 'height': height, 'border-radius': imageBorderRadius}\"></div>\n  <div class=\"image-actions\" *ngIf=\"canAction()\" [ngStyle]=\"{'width': width, 'height': height, 'border-radius': imageBorderRadius}\">\n    <icon *ngIf=\"!hasImage() && canUpload\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"uploadTitle\"\n          (click)=\"actionFile.click(); actionFile.value = '';\"\n          [type]=\"'primary'\"\n          [name]=\"'fas fa-upload'\"></icon>\n    <icon *ngIf=\"hasImage() && canModify\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"modifyTitle\"\n          (click)=\"actionFile.click(); actionFile.value = '';\"\n          [type]=\"'primary'\"\n          [name]=\"'fas fa-pencil-alt'\"></icon>\n    <icon *ngIf=\"hasImage() && canRemove\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"removeTitle\"\n          (click)=\"removeClick(); actionFile.value = '';\"\n          [type]=\"'remove'\"\n          [name]=\"'fas fa-trash-alt'\"></icon>\n  </div>\n  <input #actionFile id=\"action-icon\" type=\"file\" accept=\"{{accept}}\" (change)=\"fileChange($event)\" style=\"display: none;\"/>\n</div>\n", styles: [".input-avatar{display:flex;align-items:center}.input-avatar .image-backdrop{display:none;position:absolute;background:#FFF;opacity:.6}.input-avatar .image-actions{display:none;position:absolute;justify-content:space-evenly;align-items:center}.input-avatar .image-actions icon{cursor:pointer}.input-avatar:hover .image-backdrop,.input-avatar:hover .image-actions{display:flex}\n"] }]
         }], propDecorators: { avatarFormData: [{
                 type: Input
             }], avatarUrl: [{
@@ -346,38 +346,38 @@ class FieldComponent {
      */
     state;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: FieldComponent, selector: "app-field", inputs: { label: "label", state: "state" }, ngImport: i0, template: `
-     <div [ngClass]="{'has-error':state && !state.valid && (!state.pristine || state.touched) && state.errors}">
-      <label class="label-text" *ngIf="label">{{ label }}</label>
-
-      <!-- Input, textarea or select -->
-      <ng-content></ng-content>
-
-      <span *ngIf="state && !state.valid && !state.pristine && state.touched && state.errors" class="help-block text-danger">
-        <span *ngIf="state.hasError('required')">Este campo é obrigatório</span>
-        <span *ngIf="!state.hasError('required') && state.hasError('validateEmail')">E-mail inválido</span>
-        <span *ngIf="!state.hasError('required') && state.hasError('minlength')">Tamanho mínimo inválido</span>
-      </span>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: FieldComponent, selector: "app-field", inputs: { label: "label", state: "state" }, ngImport: i0, template: `
+     <div [ngClass]="{'has-error':state && !state.valid && (!state.pristine || state.touched) && state.errors}">
+      <label class="label-text" *ngIf="label">{{ label }}</label>
+
+      <!-- Input, textarea or select -->
+      <ng-content></ng-content>
+
+      <span *ngIf="state && !state.valid && !state.pristine && state.touched && state.errors" class="help-block text-danger">
+        <span *ngIf="state.hasError('required')">Este campo é obrigatório</span>
+        <span *ngIf="!state.hasError('required') && state.hasError('validateEmail')">E-mail inválido</span>
+        <span *ngIf="!state.hasError('required') && state.hasError('minlength')">Tamanho mínimo inválido</span>
+      </span>
+    </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: FieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-field',
-                    template: `
-     <div [ngClass]="{'has-error':state && !state.valid && (!state.pristine || state.touched) && state.errors}">
-      <label class="label-text" *ngIf="label">{{ label }}</label>
-
-      <!-- Input, textarea or select -->
-      <ng-content></ng-content>
-
-      <span *ngIf="state && !state.valid && !state.pristine && state.touched && state.errors" class="help-block text-danger">
-        <span *ngIf="state.hasError('required')">Este campo é obrigatório</span>
-        <span *ngIf="!state.hasError('required') && state.hasError('validateEmail')">E-mail inválido</span>
-        <span *ngIf="!state.hasError('required') && state.hasError('minlength')">Tamanho mínimo inválido</span>
-      </span>
-    </div>
+                    template: `
+     <div [ngClass]="{'has-error':state && !state.valid && (!state.pristine || state.touched) && state.errors}">
+      <label class="label-text" *ngIf="label">{{ label }}</label>
+
+      <!-- Input, textarea or select -->
+      <ng-content></ng-content>
+
+      <span *ngIf="state && !state.valid && !state.pristine && state.touched && state.errors" class="help-block text-danger">
+        <span *ngIf="state.hasError('required')">Este campo é obrigatório</span>
+        <span *ngIf="!state.hasError('required') && state.hasError('validateEmail')">E-mail inválido</span>
+        <span *ngIf="!state.hasError('required') && state.hasError('minlength')">Tamanho mínimo inválido</span>
+      </span>
+    </div>
     `
                 }]
         }], propDecorators: { label: [{
@@ -535,7 +535,7 @@ class SelectBoxComponent extends ValueAccessorBase {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectBoxComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-select #ngSelectComponent\r\n           [(ngModel)]=\"value\"\r\n           [items]=\"visibleItens\"\r\n           [virtualScroll]=\"true\"\r\n           [loading]=\"loading || initializing\"\r\n           [loadingText]=\"loadingText\"\r\n           [placeholder]=\"placeholder\"\r\n           [clearAllText]=\"clearText\"\r\n           [searchable]=\"enabledSearch\"\r\n           [typeToSearchText]=\"searchPlaceHolder\"\r\n           (open)=\"openSelectBox($event)\"\r\n           (close)=\"onClose($event)\"\r\n           (clear)=\"onClear()\"\r\n           [notFoundText]=\"notFoundText\"\r\n           [disabled]=\"disabled\"\r\n           appendTo=\"body\"\r\n           (scroll)=\"onScroll($event)\"\r\n           (scrollToEnd)=\"onScrollToEnd()\"\r\n           (change)=\"onSelectionChange($event)\"\r\n           [typeahead]=\"inputFilter\"\r\n           [ngClass]=\"{'apipass-select-image' : bindImageUrl, 'apipass-select': !bindImageUrl}\"\r\n           [compareWith]=\"compareFn\"\r\n           [bindValue]=\"selectProperty\">\r\n\r\n  <ng-template *ngIf=\"selectProperty && selectedItem && selectedItem[bindKey] && selectedItem[bindValue]\" ng-label-tmp let-item=\"item\">\r\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\"\r\n         *ngIf=\"selectedItem && selectedItem[bindKey] && selectedItem[bindValue] && bindImageUrl\">\r\n      <img loading=\"lazy\"\r\n           [src]=\"selectedItem[bindImageUrl] || './assets/images/no-image.png'\"\r\n           [alt]=\"selectedItem[bindValue]\"\r\n           [matTooltip]=\"selectedItem[bindValue]\"\r\n           style=\"width: auto;max-width: 30px;height: 30px;\"\r\n      />\r\n    </div>\r\n    <span class=\"select-text-element\" *ngIf=\"selectedItem && selectedItem[bindKey] && selectedItem[bindValue]\">{{selectedItem[bindValue]}}</span>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"!selectProperty && value && value[bindKey] && value[bindValue]\" ng-label-tmp let-item=\"item\">\r\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\"\r\n         *ngIf=\"value && value[bindKey] && value[bindValue] && bindImageUrl\">\r\n      <img loading=\"lazy\"\r\n           [src]=\"value[bindImageUrl] || './assets/images/no-image.png'\"\r\n           [alt]=\"value[bindValue]\"\r\n           [matTooltip]=\"value[bindValue]\"\r\n           style=\"width: auto;max-width: 30px;height: 30px;\"\r\n      />\r\n    </div>\r\n    <span class=\"select-text-element\" *ngIf=\"value && value[bindKey] && value[bindValue]\">{{value[bindValue]}}</span>\r\n  </ng-template>\r\n\r\n  <ng-template ng-header-tmp *ngIf=\"this.showAddNewItem\">\r\n    <div class=\"add-new-item-option\" style=\"display: flex; align-items: center; cursor: pointer;\" (click)=\"onAddNewItem()\">\r\n      <icon style=\"margin-right: 5px\" *ngIf=\"addNewItemIcon\" [title]=\"addNewItemText\" [name]=\"addNewItemIcon\" [size]=\"20\"></icon>\r\n      <span class=\"add-new-item-text\" style=\"white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\"\r\n            *ngIf=\"addNewItemText\">{{addNewItemText}}</span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\" *ngIf=\"bindImageUrl\">\r\n      <img loading=\"lazy\"\r\n           [src]=\"item[bindImageUrl] || './assets/images/no-image.png'\"\r\n           [alt]=\"item[bindValue]\"\r\n           [matTooltip]=\"item[bindValue]\"\r\n           style=\"width: auto;max-width: 30px;height: 30px;\"\r\n      />\r\n    </div>\r\n    <span class=\"select-text-element\"\r\n          style=\"white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\">{{item[bindValue]}}</span>\r\n  </ng-template>\r\n\r\n</ng-select>\r\n", styles: [".apipass-select-image.ng-select.ng-select-opened>.ng-select-container,.apipass-select.ng-select.ng-select-opened>.ng-select-container{height:44px;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.apipass-select-image.ng-select-disabled .ng-select-container,.apipass-select.ng-select-disabled .ng-select-container{background-color:#ccc!important;cursor:no-drop!important;color:#777!important}.apipass-select-image.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow,.apipass-select.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow{border-color:#777 transparent transparent!important;color:#777!important;cursor:no-drop!important}.apipass-select-image.ng-select-disabled .ng-select-container .ng-value-container,.apipass-select.ng-select-disabled .ng-select-container .ng-value-container,.apipass-select-image.ng-select-disabled .ng-select-container .ng-value,.apipass-select.ng-select-disabled .ng-select-container .ng-value,.apipass-select-image.ng-select-disabled .ng-select-container .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input,.apipass-select.ng-select-disabled .ng-select-container .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{cursor:no-drop!important}.apipass-select-image .select-text-element,.apipass-select .select-text-element{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-opened>.ng-select-container{border:2px solid var(--color-primary)!important}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #DDD;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--color-primary)!important;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid var(--color-fonts-tertiary);align-items:center!important}.apipass-select .ng-select-container,.apipass-select-image .ng-select-container{min-height:44px}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.apipass-select .ng-select-container .ng-value-container{align-items:center!important;padding-left:10px}.apipass-select .ng-select-container .ng-value-container .ng-value{display:flex!important;align-items:center!important}.apipass-select .ng-select-container .ng-value-container,.apipass-select-image .ng-select-container .ng-value-container{align-items:center!important;padding-left:10px}.apipass-select .ng-select-container .ng-value-container .ng-value,.apipass-select-image .ng-select-container .ng-value-container .ng-value{display:flex!important;align-items:center!important}.apipass-select .ng-select-container .ng-value-container .ng-input,.apipass-select-image .ng-select-container .ng-value-container .ng-input{padding-top:0!important;top:auto!important}.apipass-select .ng-select-container .ng-value-container .ng-input input,.apipass-select-image .ng-select-container .ng-value-container .ng-input input{margin-top:-5px!important;padding-top:17px!important;padding-bottom:17px!important}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#0009}.apipass-select .ng-select-container,.apipass-select-image .ng-select-container{height:44px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6;display:flex!important;align-items:center!important}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#333;background-color:#ebf5ff;border-radius:2px;margin-right:5px;display:flex!important;align-items:center!important}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px;display:flex!important;align-items:center!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#000}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#0009}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#DDD transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #DDD;box-shadow:0 1px #0000000f;left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex!important;align-items:center!important;background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$2.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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: i2$1.IconComponent, selector: "icon", inputs: ["name", "title", "type", "size", "isMaterialIcon", "materialOutline", "routerLinkActive", "routerLink", "link", "target", "isActive"], outputs: ["onClick"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
+            }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: ["ngSelectComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-select #ngSelectComponent\n           [(ngModel)]=\"value\"\n           [items]=\"visibleItens\"\n           [virtualScroll]=\"true\"\n           [loading]=\"loading || initializing\"\n           [loadingText]=\"loadingText\"\n           [placeholder]=\"placeholder\"\n           [clearAllText]=\"clearText\"\n           [searchable]=\"enabledSearch\"\n           [typeToSearchText]=\"searchPlaceHolder\"\n           (open)=\"openSelectBox($event)\"\n           (close)=\"onClose($event)\"\n           (clear)=\"onClear()\"\n           [notFoundText]=\"notFoundText\"\n           [disabled]=\"disabled\"\n           appendTo=\"body\"\n           (scroll)=\"onScroll($event)\"\n           (scrollToEnd)=\"onScrollToEnd()\"\n           (change)=\"onSelectionChange($event)\"\n           [typeahead]=\"inputFilter\"\n           [ngClass]=\"{'apipass-select-image' : bindImageUrl, 'apipass-select': !bindImageUrl}\"\n           [compareWith]=\"compareFn\"\n           [bindValue]=\"selectProperty\">\n\n  <ng-template *ngIf=\"selectProperty && selectedItem && selectedItem[bindKey] && selectedItem[bindValue]\" ng-label-tmp let-item=\"item\">\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\"\n         *ngIf=\"selectedItem && selectedItem[bindKey] && selectedItem[bindValue] && bindImageUrl\">\n      <img loading=\"lazy\"\n           [src]=\"selectedItem[bindImageUrl] || './assets/images/no-image.png'\"\n           [alt]=\"selectedItem[bindValue]\"\n           [matTooltip]=\"selectedItem[bindValue]\"\n           style=\"width: auto;max-width: 30px;height: 30px;\"\n      />\n    </div>\n    <span class=\"select-text-element\" *ngIf=\"selectedItem && selectedItem[bindKey] && selectedItem[bindValue]\">{{selectedItem[bindValue]}}</span>\n  </ng-template>\n\n  <ng-template *ngIf=\"!selectProperty && value && value[bindKey] && value[bindValue]\" ng-label-tmp let-item=\"item\">\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\"\n         *ngIf=\"value && value[bindKey] && value[bindValue] && bindImageUrl\">\n      <img loading=\"lazy\"\n           [src]=\"value[bindImageUrl] || './assets/images/no-image.png'\"\n           [alt]=\"value[bindValue]\"\n           [matTooltip]=\"value[bindValue]\"\n           style=\"width: auto;max-width: 30px;height: 30px;\"\n      />\n    </div>\n    <span class=\"select-text-element\" *ngIf=\"value && value[bindKey] && value[bindValue]\">{{value[bindValue]}}</span>\n  </ng-template>\n\n  <ng-template ng-header-tmp *ngIf=\"this.showAddNewItem\">\n    <div class=\"add-new-item-option\" style=\"display: flex; align-items: center; cursor: pointer;\" (click)=\"onAddNewItem()\">\n      <icon style=\"margin-right: 5px\" *ngIf=\"addNewItemIcon\" [title]=\"addNewItemText\" [name]=\"addNewItemIcon\" [size]=\"20\"></icon>\n      <span class=\"add-new-item-text\" style=\"white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\"\n            *ngIf=\"addNewItemText\">{{addNewItemText}}</span>\n    </div>\n  </ng-template>\n\n  <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\" *ngIf=\"bindImageUrl\">\n      <img loading=\"lazy\"\n           [src]=\"item[bindImageUrl] || './assets/images/no-image.png'\"\n           [alt]=\"item[bindValue]\"\n           [matTooltip]=\"item[bindValue]\"\n           style=\"width: auto;max-width: 30px;height: 30px;\"\n      />\n    </div>\n    <span class=\"select-text-element\"\n          style=\"white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\">{{item[bindValue]}}</span>\n  </ng-template>\n\n</ng-select>\n", styles: [".apipass-select-image.ng-select.ng-select-opened>.ng-select-container,.apipass-select.ng-select.ng-select-opened>.ng-select-container{height:44px;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.apipass-select-image.ng-select-disabled .ng-select-container,.apipass-select.ng-select-disabled .ng-select-container{background-color:#ccc!important;cursor:no-drop!important;color:#777!important}.apipass-select-image.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow,.apipass-select.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow{border-color:#777 transparent transparent!important;color:#777!important;cursor:no-drop!important}.apipass-select-image.ng-select-disabled .ng-select-container .ng-value-container,.apipass-select.ng-select-disabled .ng-select-container .ng-value-container,.apipass-select-image.ng-select-disabled .ng-select-container .ng-value,.apipass-select.ng-select-disabled .ng-select-container .ng-value,.apipass-select-image.ng-select-disabled .ng-select-container .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input,.apipass-select.ng-select-disabled .ng-select-container .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{cursor:no-drop!important}.apipass-select-image .select-text-element,.apipass-select .select-text-element{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-opened>.ng-select-container{border:2px solid var(--color-primary)!important}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #DDD;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--color-primary)!important;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid var(--color-fonts-tertiary);align-items:center!important}.apipass-select .ng-select-container,.apipass-select-image .ng-select-container{min-height:44px}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.apipass-select .ng-select-container .ng-value-container{align-items:center!important;padding-left:10px}.apipass-select .ng-select-container .ng-value-container .ng-value{display:flex!important;align-items:center!important}.apipass-select .ng-select-container .ng-value-container,.apipass-select-image .ng-select-container .ng-value-container{align-items:center!important;padding-left:10px}.apipass-select .ng-select-container .ng-value-container .ng-value,.apipass-select-image .ng-select-container .ng-value-container .ng-value{display:flex!important;align-items:center!important}.apipass-select .ng-select-container .ng-value-container .ng-input,.apipass-select-image .ng-select-container .ng-value-container .ng-input{padding-top:0!important;top:auto!important}.apipass-select .ng-select-container .ng-value-container .ng-input input,.apipass-select-image .ng-select-container .ng-value-container .ng-input input{margin-top:-5px!important;padding-top:17px!important;padding-bottom:17px!important}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#0009}.apipass-select .ng-select-container,.apipass-select-image .ng-select-container{height:44px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6;display:flex!important;align-items:center!important}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#333;background-color:#ebf5ff;border-radius:2px;margin-right:5px;display:flex!important;align-items:center!important}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px;display:flex!important;align-items:center!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#000}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#0009}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#DDD transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #DDD;box-shadow:0 1px #0000000f;left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex!important;align-items:center!important;background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$2.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"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3$2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: i2$1.IconComponent, selector: "icon", inputs: ["name", "title", "type", "size", "isMaterialIcon", "materialOutline", "routerLinkActive", "routerLink", "link", "target", "isActive"], outputs: ["onClick"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectBoxComponent, decorators: [{
             type: Component,
@@ -543,7 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectBoxComponent),
                             multi: true
-                        }], encapsulation: ViewEncapsulation.None, template: "<ng-select #ngSelectComponent\r\n           [(ngModel)]=\"value\"\r\n           [items]=\"visibleItens\"\r\n           [virtualScroll]=\"true\"\r\n           [loading]=\"loading || initializing\"\r\n           [loadingText]=\"loadingText\"\r\n           [placeholder]=\"placeholder\"\r\n           [clearAllText]=\"clearText\"\r\n           [searchable]=\"enabledSearch\"\r\n           [typeToSearchText]=\"searchPlaceHolder\"\r\n           (open)=\"openSelectBox($event)\"\r\n           (close)=\"onClose($event)\"\r\n           (clear)=\"onClear()\"\r\n           [notFoundText]=\"notFoundText\"\r\n           [disabled]=\"disabled\"\r\n           appendTo=\"body\"\r\n           (scroll)=\"onScroll($event)\"\r\n           (scrollToEnd)=\"onScrollToEnd()\"\r\n           (change)=\"onSelectionChange($event)\"\r\n           [typeahead]=\"inputFilter\"\r\n           [ngClass]=\"{'apipass-select-image' : bindImageUrl, 'apipass-select': !bindImageUrl}\"\r\n           [compareWith]=\"compareFn\"\r\n           [bindValue]=\"selectProperty\">\r\n\r\n  <ng-template *ngIf=\"selectProperty && selectedItem && selectedItem[bindKey] && selectedItem[bindValue]\" ng-label-tmp let-item=\"item\">\r\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\"\r\n         *ngIf=\"selectedItem && selectedItem[bindKey] && selectedItem[bindValue] && bindImageUrl\">\r\n      <img loading=\"lazy\"\r\n           [src]=\"selectedItem[bindImageUrl] || './assets/images/no-image.png'\"\r\n           [alt]=\"selectedItem[bindValue]\"\r\n           [matTooltip]=\"selectedItem[bindValue]\"\r\n           style=\"width: auto;max-width: 30px;height: 30px;\"\r\n      />\r\n    </div>\r\n    <span class=\"select-text-element\" *ngIf=\"selectedItem && selectedItem[bindKey] && selectedItem[bindValue]\">{{selectedItem[bindValue]}}</span>\r\n  </ng-template>\r\n\r\n  <ng-template *ngIf=\"!selectProperty && value && value[bindKey] && value[bindValue]\" ng-label-tmp let-item=\"item\">\r\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\"\r\n         *ngIf=\"value && value[bindKey] && value[bindValue] && bindImageUrl\">\r\n      <img loading=\"lazy\"\r\n           [src]=\"value[bindImageUrl] || './assets/images/no-image.png'\"\r\n           [alt]=\"value[bindValue]\"\r\n           [matTooltip]=\"value[bindValue]\"\r\n           style=\"width: auto;max-width: 30px;height: 30px;\"\r\n      />\r\n    </div>\r\n    <span class=\"select-text-element\" *ngIf=\"value && value[bindKey] && value[bindValue]\">{{value[bindValue]}}</span>\r\n  </ng-template>\r\n\r\n  <ng-template ng-header-tmp *ngIf=\"this.showAddNewItem\">\r\n    <div class=\"add-new-item-option\" style=\"display: flex; align-items: center; cursor: pointer;\" (click)=\"onAddNewItem()\">\r\n      <icon style=\"margin-right: 5px\" *ngIf=\"addNewItemIcon\" [title]=\"addNewItemText\" [name]=\"addNewItemIcon\" [size]=\"20\"></icon>\r\n      <span class=\"add-new-item-text\" style=\"white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\"\r\n            *ngIf=\"addNewItemText\">{{addNewItemText}}</span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\r\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\" *ngIf=\"bindImageUrl\">\r\n      <img loading=\"lazy\"\r\n           [src]=\"item[bindImageUrl] || './assets/images/no-image.png'\"\r\n           [alt]=\"item[bindValue]\"\r\n           [matTooltip]=\"item[bindValue]\"\r\n           style=\"width: auto;max-width: 30px;height: 30px;\"\r\n      />\r\n    </div>\r\n    <span class=\"select-text-element\"\r\n          style=\"white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\">{{item[bindValue]}}</span>\r\n  </ng-template>\r\n\r\n</ng-select>\r\n", styles: [".apipass-select-image.ng-select.ng-select-opened>.ng-select-container,.apipass-select.ng-select.ng-select-opened>.ng-select-container{height:44px;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.apipass-select-image.ng-select-disabled .ng-select-container,.apipass-select.ng-select-disabled .ng-select-container{background-color:#ccc!important;cursor:no-drop!important;color:#777!important}.apipass-select-image.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow,.apipass-select.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow{border-color:#777 transparent transparent!important;color:#777!important;cursor:no-drop!important}.apipass-select-image.ng-select-disabled .ng-select-container .ng-value-container,.apipass-select.ng-select-disabled .ng-select-container .ng-value-container,.apipass-select-image.ng-select-disabled .ng-select-container .ng-value,.apipass-select.ng-select-disabled .ng-select-container .ng-value,.apipass-select-image.ng-select-disabled .ng-select-container .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input,.apipass-select.ng-select-disabled .ng-select-container .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{cursor:no-drop!important}.apipass-select-image .select-text-element,.apipass-select .select-text-element{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-opened>.ng-select-container{border:2px solid var(--color-primary)!important}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #DDD;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--color-primary)!important;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid var(--color-fonts-tertiary);align-items:center!important}.apipass-select .ng-select-container,.apipass-select-image .ng-select-container{min-height:44px}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.apipass-select .ng-select-container .ng-value-container{align-items:center!important;padding-left:10px}.apipass-select .ng-select-container .ng-value-container .ng-value{display:flex!important;align-items:center!important}.apipass-select .ng-select-container .ng-value-container,.apipass-select-image .ng-select-container .ng-value-container{align-items:center!important;padding-left:10px}.apipass-select .ng-select-container .ng-value-container .ng-value,.apipass-select-image .ng-select-container .ng-value-container .ng-value{display:flex!important;align-items:center!important}.apipass-select .ng-select-container .ng-value-container .ng-input,.apipass-select-image .ng-select-container .ng-value-container .ng-input{padding-top:0!important;top:auto!important}.apipass-select .ng-select-container .ng-value-container .ng-input input,.apipass-select-image .ng-select-container .ng-value-container .ng-input input{margin-top:-5px!important;padding-top:17px!important;padding-bottom:17px!important}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#0009}.apipass-select .ng-select-container,.apipass-select-image .ng-select-container{height:44px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6;display:flex!important;align-items:center!important}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#333;background-color:#ebf5ff;border-radius:2px;margin-right:5px;display:flex!important;align-items:center!important}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px;display:flex!important;align-items:center!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#000}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#0009}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#DDD transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #DDD;box-shadow:0 1px #0000000f;left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex!important;align-items:center!important;background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}\n"] }]
+                        }], encapsulation: ViewEncapsulation.None, template: "<ng-select #ngSelectComponent\n           [(ngModel)]=\"value\"\n           [items]=\"visibleItens\"\n           [virtualScroll]=\"true\"\n           [loading]=\"loading || initializing\"\n           [loadingText]=\"loadingText\"\n           [placeholder]=\"placeholder\"\n           [clearAllText]=\"clearText\"\n           [searchable]=\"enabledSearch\"\n           [typeToSearchText]=\"searchPlaceHolder\"\n           (open)=\"openSelectBox($event)\"\n           (close)=\"onClose($event)\"\n           (clear)=\"onClear()\"\n           [notFoundText]=\"notFoundText\"\n           [disabled]=\"disabled\"\n           appendTo=\"body\"\n           (scroll)=\"onScroll($event)\"\n           (scrollToEnd)=\"onScrollToEnd()\"\n           (change)=\"onSelectionChange($event)\"\n           [typeahead]=\"inputFilter\"\n           [ngClass]=\"{'apipass-select-image' : bindImageUrl, 'apipass-select': !bindImageUrl}\"\n           [compareWith]=\"compareFn\"\n           [bindValue]=\"selectProperty\">\n\n  <ng-template *ngIf=\"selectProperty && selectedItem && selectedItem[bindKey] && selectedItem[bindValue]\" ng-label-tmp let-item=\"item\">\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\"\n         *ngIf=\"selectedItem && selectedItem[bindKey] && selectedItem[bindValue] && bindImageUrl\">\n      <img loading=\"lazy\"\n           [src]=\"selectedItem[bindImageUrl] || './assets/images/no-image.png'\"\n           [alt]=\"selectedItem[bindValue]\"\n           [matTooltip]=\"selectedItem[bindValue]\"\n           style=\"width: auto;max-width: 30px;height: 30px;\"\n      />\n    </div>\n    <span class=\"select-text-element\" *ngIf=\"selectedItem && selectedItem[bindKey] && selectedItem[bindValue]\">{{selectedItem[bindValue]}}</span>\n  </ng-template>\n\n  <ng-template *ngIf=\"!selectProperty && value && value[bindKey] && value[bindValue]\" ng-label-tmp let-item=\"item\">\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\"\n         *ngIf=\"value && value[bindKey] && value[bindValue] && bindImageUrl\">\n      <img loading=\"lazy\"\n           [src]=\"value[bindImageUrl] || './assets/images/no-image.png'\"\n           [alt]=\"value[bindValue]\"\n           [matTooltip]=\"value[bindValue]\"\n           style=\"width: auto;max-width: 30px;height: 30px;\"\n      />\n    </div>\n    <span class=\"select-text-element\" *ngIf=\"value && value[bindKey] && value[bindValue]\">{{value[bindValue]}}</span>\n  </ng-template>\n\n  <ng-template ng-header-tmp *ngIf=\"this.showAddNewItem\">\n    <div class=\"add-new-item-option\" style=\"display: flex; align-items: center; cursor: pointer;\" (click)=\"onAddNewItem()\">\n      <icon style=\"margin-right: 5px\" *ngIf=\"addNewItemIcon\" [title]=\"addNewItemText\" [name]=\"addNewItemIcon\" [size]=\"20\"></icon>\n      <span class=\"add-new-item-text\" style=\"white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\"\n            *ngIf=\"addNewItemText\">{{addNewItemText}}</span>\n    </div>\n  </ng-template>\n\n  <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\">\n    <div class=\"image\" style=\"width: 30px;height: 30px; margin-right: 10px;\" *ngIf=\"bindImageUrl\">\n      <img loading=\"lazy\"\n           [src]=\"item[bindImageUrl] || './assets/images/no-image.png'\"\n           [alt]=\"item[bindValue]\"\n           [matTooltip]=\"item[bindValue]\"\n           style=\"width: auto;max-width: 30px;height: 30px;\"\n      />\n    </div>\n    <span class=\"select-text-element\"\n          style=\"white-space: nowrap;overflow: hidden;text-overflow: ellipsis;\">{{item[bindValue]}}</span>\n  </ng-template>\n\n</ng-select>\n", styles: [".apipass-select-image.ng-select.ng-select-opened>.ng-select-container,.apipass-select.ng-select.ng-select-opened>.ng-select-container{height:44px;background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.apipass-select-image.ng-select-disabled .ng-select-container,.apipass-select.ng-select-disabled .ng-select-container{background-color:#ccc!important;cursor:no-drop!important;color:#777!important}.apipass-select-image.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow,.apipass-select.ng-select-disabled .ng-select-container .ng-arrow-wrapper .ng-arrow{border-color:#777 transparent transparent!important;color:#777!important;cursor:no-drop!important}.apipass-select-image.ng-select-disabled .ng-select-container .ng-value-container,.apipass-select.ng-select-disabled .ng-select-container .ng-value-container,.apipass-select-image.ng-select-disabled .ng-select-container .ng-value,.apipass-select.ng-select-disabled .ng-select-container .ng-value,.apipass-select-image.ng-select-disabled .ng-select-container .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input,.apipass-select.ng-select-disabled .ng-select-container .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{cursor:no-drop!important}.apipass-select-image .select-text-element,.apipass-select .select-text-element{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-opened>.ng-select-container{border:2px solid var(--color-primary)!important}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #DDD;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--color-primary)!important;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid var(--color-fonts-tertiary);align-items:center!important}.apipass-select .ng-select-container,.apipass-select-image .ng-select-container{min-height:44px}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.apipass-select .ng-select-container .ng-value-container{align-items:center!important;padding-left:10px}.apipass-select .ng-select-container .ng-value-container .ng-value{display:flex!important;align-items:center!important}.apipass-select .ng-select-container .ng-value-container,.apipass-select-image .ng-select-container .ng-value-container{align-items:center!important;padding-left:10px}.apipass-select .ng-select-container .ng-value-container .ng-value,.apipass-select-image .ng-select-container .ng-value-container .ng-value{display:flex!important;align-items:center!important}.apipass-select .ng-select-container .ng-value-container .ng-input,.apipass-select-image .ng-select-container .ng-value-container .ng-input{padding-top:0!important;top:auto!important}.apipass-select .ng-select-container .ng-value-container .ng-input input,.apipass-select-image .ng-select-container .ng-value-container .ng-input input{margin-top:-5px!important;padding-top:17px!important;padding-bottom:17px!important}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#0009}.apipass-select .ng-select-container,.apipass-select-image .ng-select-container{height:44px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6;display:flex!important;align-items:center!important}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#333;background-color:#ebf5ff;border-radius:2px;margin-right:5px;display:flex!important;align-items:center!important}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px;display:flex!important;align-items:center!important}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#000}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#0009}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#DDD transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #DDD;box-shadow:0 1px #0000000f;left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex!important;align-items:center!important;background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}\n"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], searchPlaceHolder: [{
@@ -895,7 +895,7 @@ class CustomSelectComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CustomSelectComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"custom-select-input\" #trigger>\r\n  <mat-form-field\r\n    dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\r\n    cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"clicked()\" class=\"custom-select-component\"\r\n    [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\r\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\r\n    <input matInput #input\r\n           (blur)=\"onBlur($event)\"\r\n           [(ngModel)]=\"value\"\r\n           [ngModelOptions]=\"{standalone: true}\"\r\n           [disabled]=\"disabled\"\r\n           (keyup)=keyPress()\r\n           (click)=\"clicked()\"\r\n           autocomplete=\"off\"\r\n    />\r\n\r\n    <span *ngIf=\"showEditIcon && canEditItem\" class=\"edit-auth-icon\" (click)=\"updateItem($event)\">\r\n      <i class=\"fas fa-pencil-alt\"></i>\r\n    </span>\r\n\r\n    <span *ngIf=\"allowRemove && value\" class=\"remove-icon\" (click)=\"removeClick($event)\">\r\n      <i class=\"fa fa-times\"></i>\r\n    </span>\r\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\r\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\r\n    </span>\r\n  </mat-form-field>\r\n</div>\r\n<div class=\"custom-select-component\">\r\n\r\n  <ng-template cdkConnectedOverlay\r\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\r\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\r\n               (backdropClick)=\"close($event)\"\r\n               (overlayOutsideClick)=\"close($event)\"\r\n               [cdkConnectedOverlayOrigin]=\"origin\"\r\n               [cdkConnectedOverlayOpen]=\"opened\"\r\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\r\n    <ul class=\"ul-ac search-input-item\">\r\n      <li class=\"li-search search-input-item\">\r\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\r\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\r\n          <input matInput class=\"search-input-item\"\r\n                 [(ngModel)]=\"searchText\"\r\n                 (blur)=\"onBlur($event)\"\r\n                 aria-autocomplete=\"none\"\r\n                 autocomplete=\"off\"\r\n          />\r\n        </mat-form-field>\r\n      </li>\r\n\r\n      <li *ngIf=\"allowAddItem\" class=\"li-add\" (mousedown)=\"addItem()\" (click)=\"addItem()\">\r\n        <span class=\"fa fa-plus-circle\"></span>\r\n        <span>{{addItemLabel}}</span>\r\n      </li>\r\n\r\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\r\n          (click)=\"selectItem(i)\"\r\n          (mousedown)=\"selectItem(i)\">\r\n        {{i.text}}\r\n      </li>\r\n\r\n    </ul>\r\n  </ng-template>\r\n</div>\r\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .ul-ac .li-add,.custom-select-input .ul-ac .li-add,.custom-select-component .ul-ac .li-add{border-top:1px solid lightgray}::ng-deep .custom-select-overlay-panel .ul-ac .li-add .fa,.custom-select-input .ul-ac .li-add .fa,.custom-select-component .ul-ac .li-add .fa{padding-right:5px;color:#ff8f17}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .edit-auth-icon i,.custom-select-input .edit-auth-icon i,.custom-select-component .edit-auth-icon i{margin-right:10px;color:var(--color-primary)}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i7.SelectFilterPipe, name: "selectFilter" }] });
+            }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"custom-select-input\" #trigger>\n  <mat-form-field\n    dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\n    cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"clicked()\" class=\"custom-select-component\"\n    [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\n    <input matInput #input\n           (blur)=\"onBlur($event)\"\n           [(ngModel)]=\"value\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [disabled]=\"disabled\"\n           (keyup)=keyPress()\n           (click)=\"clicked()\"\n           autocomplete=\"off\"\n    />\n\n    <span *ngIf=\"showEditIcon && canEditItem\" class=\"edit-auth-icon\" (click)=\"updateItem($event)\">\n      <i class=\"fas fa-pencil-alt\"></i>\n    </span>\n\n    <span *ngIf=\"allowRemove && value\" class=\"remove-icon\" (click)=\"removeClick($event)\">\n      <i class=\"fa fa-times\"></i>\n    </span>\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\n    </span>\n  </mat-form-field>\n</div>\n<div class=\"custom-select-component\">\n\n  <ng-template cdkConnectedOverlay\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n               (backdropClick)=\"close($event)\"\n               (overlayOutsideClick)=\"close($event)\"\n               [cdkConnectedOverlayOrigin]=\"origin\"\n               [cdkConnectedOverlayOpen]=\"opened\"\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\n    <ul class=\"ul-ac search-input-item\">\n      <li class=\"li-search search-input-item\">\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n          <input matInput class=\"search-input-item\"\n                 [(ngModel)]=\"searchText\"\n                 (blur)=\"onBlur($event)\"\n                 aria-autocomplete=\"none\"\n                 autocomplete=\"off\"\n          />\n        </mat-form-field>\n      </li>\n\n      <li *ngIf=\"allowAddItem\" class=\"li-add\" (mousedown)=\"addItem()\" (click)=\"addItem()\">\n        <span class=\"fa fa-plus-circle\"></span>\n        <span>{{addItemLabel}}</span>\n      </li>\n\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          (click)=\"selectItem(i)\"\n          (mousedown)=\"selectItem(i)\">\n        {{i.text}}\n      </li>\n\n    </ul>\n  </ng-template>\n</div>\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .ul-ac .li-add,.custom-select-input .ul-ac .li-add,.custom-select-component .ul-ac .li-add{border-top:1px solid lightgray}::ng-deep .custom-select-overlay-panel .ul-ac .li-add .fa,.custom-select-input .ul-ac .li-add .fa,.custom-select-component .ul-ac .li-add .fa{padding-right:5px;color:#ff8f17}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .edit-auth-icon i,.custom-select-input .edit-auth-icon i,.custom-select-component .edit-auth-icon i{margin-right:10px;color:var(--color-primary)}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i7.SelectFilterPipe, name: "selectFilter" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CustomSelectComponent, decorators: [{
             type: Component,
@@ -903,7 +903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CustomSelectComponent),
                             multi: true
-                        }], template: "<div class=\"custom-select-input\" #trigger>\r\n  <mat-form-field\r\n    dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\r\n    cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"clicked()\" class=\"custom-select-component\"\r\n    [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\r\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\r\n    <input matInput #input\r\n           (blur)=\"onBlur($event)\"\r\n           [(ngModel)]=\"value\"\r\n           [ngModelOptions]=\"{standalone: true}\"\r\n           [disabled]=\"disabled\"\r\n           (keyup)=keyPress()\r\n           (click)=\"clicked()\"\r\n           autocomplete=\"off\"\r\n    />\r\n\r\n    <span *ngIf=\"showEditIcon && canEditItem\" class=\"edit-auth-icon\" (click)=\"updateItem($event)\">\r\n      <i class=\"fas fa-pencil-alt\"></i>\r\n    </span>\r\n\r\n    <span *ngIf=\"allowRemove && value\" class=\"remove-icon\" (click)=\"removeClick($event)\">\r\n      <i class=\"fa fa-times\"></i>\r\n    </span>\r\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\r\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\r\n    </span>\r\n  </mat-form-field>\r\n</div>\r\n<div class=\"custom-select-component\">\r\n\r\n  <ng-template cdkConnectedOverlay\r\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\r\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\r\n               (backdropClick)=\"close($event)\"\r\n               (overlayOutsideClick)=\"close($event)\"\r\n               [cdkConnectedOverlayOrigin]=\"origin\"\r\n               [cdkConnectedOverlayOpen]=\"opened\"\r\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\r\n    <ul class=\"ul-ac search-input-item\">\r\n      <li class=\"li-search search-input-item\">\r\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\r\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\r\n          <input matInput class=\"search-input-item\"\r\n                 [(ngModel)]=\"searchText\"\r\n                 (blur)=\"onBlur($event)\"\r\n                 aria-autocomplete=\"none\"\r\n                 autocomplete=\"off\"\r\n          />\r\n        </mat-form-field>\r\n      </li>\r\n\r\n      <li *ngIf=\"allowAddItem\" class=\"li-add\" (mousedown)=\"addItem()\" (click)=\"addItem()\">\r\n        <span class=\"fa fa-plus-circle\"></span>\r\n        <span>{{addItemLabel}}</span>\r\n      </li>\r\n\r\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\r\n          (click)=\"selectItem(i)\"\r\n          (mousedown)=\"selectItem(i)\">\r\n        {{i.text}}\r\n      </li>\r\n\r\n    </ul>\r\n  </ng-template>\r\n</div>\r\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .ul-ac .li-add,.custom-select-input .ul-ac .li-add,.custom-select-component .ul-ac .li-add{border-top:1px solid lightgray}::ng-deep .custom-select-overlay-panel .ul-ac .li-add .fa,.custom-select-input .ul-ac .li-add .fa,.custom-select-component .ul-ac .li-add .fa{padding-right:5px;color:#ff8f17}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .edit-auth-icon i,.custom-select-input .edit-auth-icon i,.custom-select-component .edit-auth-icon i{margin-right:10px;color:var(--color-primary)}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"] }]
+                        }], template: "<div class=\"custom-select-input\" #trigger>\n  <mat-form-field\n    dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\n    cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" (click)=\"clicked()\" class=\"custom-select-component\"\n    [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\n    <input matInput #input\n           (blur)=\"onBlur($event)\"\n           [(ngModel)]=\"value\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [disabled]=\"disabled\"\n           (keyup)=keyPress()\n           (click)=\"clicked()\"\n           autocomplete=\"off\"\n    />\n\n    <span *ngIf=\"showEditIcon && canEditItem\" class=\"edit-auth-icon\" (click)=\"updateItem($event)\">\n      <i class=\"fas fa-pencil-alt\"></i>\n    </span>\n\n    <span *ngIf=\"allowRemove && value\" class=\"remove-icon\" (click)=\"removeClick($event)\">\n      <i class=\"fa fa-times\"></i>\n    </span>\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\n    </span>\n  </mat-form-field>\n</div>\n<div class=\"custom-select-component\">\n\n  <ng-template cdkConnectedOverlay\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n               (backdropClick)=\"close($event)\"\n               (overlayOutsideClick)=\"close($event)\"\n               [cdkConnectedOverlayOrigin]=\"origin\"\n               [cdkConnectedOverlayOpen]=\"opened\"\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\n    <ul class=\"ul-ac search-input-item\">\n      <li class=\"li-search search-input-item\">\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n          <input matInput class=\"search-input-item\"\n                 [(ngModel)]=\"searchText\"\n                 (blur)=\"onBlur($event)\"\n                 aria-autocomplete=\"none\"\n                 autocomplete=\"off\"\n          />\n        </mat-form-field>\n      </li>\n\n      <li *ngIf=\"allowAddItem\" class=\"li-add\" (mousedown)=\"addItem()\" (click)=\"addItem()\">\n        <span class=\"fa fa-plus-circle\"></span>\n        <span>{{addItemLabel}}</span>\n      </li>\n\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          (click)=\"selectItem(i)\"\n          (mousedown)=\"selectItem(i)\">\n        {{i.text}}\n      </li>\n\n    </ul>\n  </ng-template>\n</div>\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .ul-ac .li-add,.custom-select-input .ul-ac .li-add,.custom-select-component .ul-ac .li-add{border-top:1px solid lightgray}::ng-deep .custom-select-overlay-panel .ul-ac .li-add .fa,.custom-select-input .ul-ac .li-add .fa,.custom-select-component .ul-ac .li-add .fa{padding-right:5px;color:#ff8f17}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .edit-auth-icon i,.custom-select-input .edit-auth-icon i,.custom-select-component .edit-auth-icon i{margin-right:10px;color:var(--color-primary)}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ScrollStrategyOptions }]; }, propDecorators: { items: [{
                 type: Input
             }], disabled: [{
@@ -1013,11 +1013,11 @@ class InputFileComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputFileComponent, selector: "input-file", inputs: { fileFormData: "fileFormData", fileName: "fileName", canRemove: "canRemove", removeTitle: "removeTitle", canUpload: "canUpload", uploadTitle: "uploadTitle", canModify: "canModify", modifyTitle: "modifyTitle", iconFontSize: "iconFontSize", emptyFileLabel: "emptyFileLabel", fileTypes: "fileTypes", allowedExtensions: "allowedExtensions" }, outputs: { onRemoveClick: "onRemoveClick", onFileChanged: "onFileChanged", onInvalidFileType: "onInvalidFileType" }, ngImport: i0, template: "  <input #actionFile id=\"action-icon\" type=\"file\" (change)=\"fileChange($event)\" style=\"display: none;\"/>\r\n  <div class=\"input-file\">\r\n    <div class=\"file-name\" *ngIf=\"fileName || emptyFileLabel\" >\r\n      {{fileName || emptyFileLabel}}\r\n    </div>\r\n    <div class=\"file-actions\">\r\n    <icon *ngIf=\"!hasFile() && canUpload\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"uploadTitle\"\r\n          (click)=\"actionFile.click(); actionFile.value = '';\"\r\n          [type]=\"'primary'\"\r\n          [name]=\"'fas fa-upload'\"></icon>\r\n    <icon *ngIf=\"hasFile() && canModify\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"modifyTitle\"\r\n          (click)=\"actionFile.click(); actionFile.value = '';\"\r\n          [type]=\"'primary'\"\r\n          [name]=\"'fas fa-pencil-alt'\"></icon>\r\n    <icon *ngIf=\"hasFile() && canRemove\"\r\n          class=\"remove-icon\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"removeTitle\"\r\n          (click)=\"removeClick(); actionFile.value = '';\"\r\n          [type]=\"'remove'\"\r\n          [name]=\"'fas fa-trash-alt'\"></icon>\r\n    </div>\r\n  </div>\r\n", styles: [".input-file{width:100%;display:flex;align-items:center;justify-content:space-between}.input-file .file-name{width:100%;color:var(--color-primary);white-space:nowrap}.input-file .file-actions{display:flex;justify-content:flex-end;align-items:center;padding-left:5px}.input-file .file-actions icon{margin-left:10px;cursor:pointer}.input-file .file-actions icon ::ng-deep .remove-icon{color:red!important}.input-file .file-actions icon ::ng-deep .remove-icon i{color:red!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IconComponent, selector: "icon", inputs: ["name", "title", "type", "size", "isMaterialIcon", "materialOutline", "routerLinkActive", "routerLink", "link", "target", "isActive"], outputs: ["onClick"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputFileComponent, selector: "input-file", inputs: { fileFormData: "fileFormData", fileName: "fileName", canRemove: "canRemove", removeTitle: "removeTitle", canUpload: "canUpload", uploadTitle: "uploadTitle", canModify: "canModify", modifyTitle: "modifyTitle", iconFontSize: "iconFontSize", emptyFileLabel: "emptyFileLabel", fileTypes: "fileTypes", allowedExtensions: "allowedExtensions" }, outputs: { onRemoveClick: "onRemoveClick", onFileChanged: "onFileChanged", onInvalidFileType: "onInvalidFileType" }, ngImport: i0, template: "  <input #actionFile id=\"action-icon\" type=\"file\" (change)=\"fileChange($event)\" style=\"display: none;\"/>\n  <div class=\"input-file\">\n    <div class=\"file-name\" *ngIf=\"fileName || emptyFileLabel\" >\n      {{fileName || emptyFileLabel}}\n    </div>\n    <div class=\"file-actions\">\n    <icon *ngIf=\"!hasFile() && canUpload\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"uploadTitle\"\n          (click)=\"actionFile.click(); actionFile.value = '';\"\n          [type]=\"'primary'\"\n          [name]=\"'fas fa-upload'\"></icon>\n    <icon *ngIf=\"hasFile() && canModify\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"modifyTitle\"\n          (click)=\"actionFile.click(); actionFile.value = '';\"\n          [type]=\"'primary'\"\n          [name]=\"'fas fa-pencil-alt'\"></icon>\n    <icon *ngIf=\"hasFile() && canRemove\"\n          class=\"remove-icon\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"removeTitle\"\n          (click)=\"removeClick(); actionFile.value = '';\"\n          [type]=\"'remove'\"\n          [name]=\"'fas fa-trash-alt'\"></icon>\n    </div>\n  </div>\n", styles: [".input-file{width:100%;display:flex;align-items:center;justify-content:space-between}.input-file .file-name{width:100%;color:var(--color-primary);white-space:nowrap}.input-file .file-actions{display:flex;justify-content:flex-end;align-items:center;padding-left:5px}.input-file .file-actions icon{margin-left:10px;cursor:pointer}.input-file .file-actions icon ::ng-deep .remove-icon{color:red!important}.input-file .file-actions icon ::ng-deep .remove-icon i{color:red!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$1.IconComponent, selector: "icon", inputs: ["name", "title", "type", "size", "isMaterialIcon", "materialOutline", "routerLinkActive", "routerLink", "link", "target", "isActive"], outputs: ["onClick"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-file', encapsulation: ViewEncapsulation.None, template: "  <input #actionFile id=\"action-icon\" type=\"file\" (change)=\"fileChange($event)\" style=\"display: none;\"/>\r\n  <div class=\"input-file\">\r\n    <div class=\"file-name\" *ngIf=\"fileName || emptyFileLabel\" >\r\n      {{fileName || emptyFileLabel}}\r\n    </div>\r\n    <div class=\"file-actions\">\r\n    <icon *ngIf=\"!hasFile() && canUpload\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"uploadTitle\"\r\n          (click)=\"actionFile.click(); actionFile.value = '';\"\r\n          [type]=\"'primary'\"\r\n          [name]=\"'fas fa-upload'\"></icon>\r\n    <icon *ngIf=\"hasFile() && canModify\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"modifyTitle\"\r\n          (click)=\"actionFile.click(); actionFile.value = '';\"\r\n          [type]=\"'primary'\"\r\n          [name]=\"'fas fa-pencil-alt'\"></icon>\r\n    <icon *ngIf=\"hasFile() && canRemove\"\r\n          class=\"remove-icon\"\r\n          [ngStyle]=\"{'font-size': iconFontSize}\"\r\n          [title]=\"removeTitle\"\r\n          (click)=\"removeClick(); actionFile.value = '';\"\r\n          [type]=\"'remove'\"\r\n          [name]=\"'fas fa-trash-alt'\"></icon>\r\n    </div>\r\n  </div>\r\n", styles: [".input-file{width:100%;display:flex;align-items:center;justify-content:space-between}.input-file .file-name{width:100%;color:var(--color-primary);white-space:nowrap}.input-file .file-actions{display:flex;justify-content:flex-end;align-items:center;padding-left:5px}.input-file .file-actions icon{margin-left:10px;cursor:pointer}.input-file .file-actions icon ::ng-deep .remove-icon{color:red!important}.input-file .file-actions icon ::ng-deep .remove-icon i{color:red!important}\n"] }]
+            args: [{ selector: 'input-file', encapsulation: ViewEncapsulation.None, template: "  <input #actionFile id=\"action-icon\" type=\"file\" (change)=\"fileChange($event)\" style=\"display: none;\"/>\n  <div class=\"input-file\">\n    <div class=\"file-name\" *ngIf=\"fileName || emptyFileLabel\" >\n      {{fileName || emptyFileLabel}}\n    </div>\n    <div class=\"file-actions\">\n    <icon *ngIf=\"!hasFile() && canUpload\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"uploadTitle\"\n          (click)=\"actionFile.click(); actionFile.value = '';\"\n          [type]=\"'primary'\"\n          [name]=\"'fas fa-upload'\"></icon>\n    <icon *ngIf=\"hasFile() && canModify\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"modifyTitle\"\n          (click)=\"actionFile.click(); actionFile.value = '';\"\n          [type]=\"'primary'\"\n          [name]=\"'fas fa-pencil-alt'\"></icon>\n    <icon *ngIf=\"hasFile() && canRemove\"\n          class=\"remove-icon\"\n          [ngStyle]=\"{'font-size': iconFontSize}\"\n          [title]=\"removeTitle\"\n          (click)=\"removeClick(); actionFile.value = '';\"\n          [type]=\"'remove'\"\n          [name]=\"'fas fa-trash-alt'\"></icon>\n    </div>\n  </div>\n", styles: [".input-file{width:100%;display:flex;align-items:center;justify-content:space-between}.input-file .file-name{width:100%;color:var(--color-primary);white-space:nowrap}.input-file .file-actions{display:flex;justify-content:flex-end;align-items:center;padding-left:5px}.input-file .file-actions icon{margin-left:10px;cursor:pointer}.input-file .file-actions icon ::ng-deep .remove-icon{color:red!important}.input-file .file-actions icon ::ng-deep .remove-icon i{color:red!important}\n"] }]
         }], propDecorators: { fileFormData: [{
                 type: Input
             }], fileName: [{
@@ -1466,7 +1466,7 @@ class InputNumberComponent extends ValueAccessorBase {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputNumberComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"apipass-input-text label-input\" appearance=\"outline\">\r\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n  <mat-icon class=\"mat-icon-prefix\" matPrefix *ngIf=\"iconPrefix\" (click)=\"prefixClick()\">{{iconPrefix}}</mat-icon>\r\n  <input matInput type=\"number\" class=\"input-text\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [autocomplete]=\"autoComplete\" />\r\n  <mat-icon class=\"mat-icon-suffix\" matSuffix *ngIf=\"iconSuffix\" (click)=\"suffixClick()\">{{iconSuffix}}</mat-icon>\r\n</mat-form-field>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
+            }], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"apipass-input-text label-input\" appearance=\"outline\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-icon class=\"mat-icon-prefix\" matPrefix *ngIf=\"iconPrefix\" (click)=\"prefixClick()\">{{iconPrefix}}</mat-icon>\n  <input matInput type=\"number\" class=\"input-text\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [autocomplete]=\"autoComplete\" />\n  <mat-icon class=\"mat-icon-suffix\" matSuffix *ngIf=\"iconSuffix\" (click)=\"suffixClick()\">{{iconSuffix}}</mat-icon>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
@@ -1474,7 +1474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputNumberComponent),
                             multi: true
-                        }], encapsulation: ViewEncapsulation.None, template: "<mat-form-field class=\"apipass-input-text label-input\" appearance=\"outline\">\r\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n  <mat-icon class=\"mat-icon-prefix\" matPrefix *ngIf=\"iconPrefix\" (click)=\"prefixClick()\">{{iconPrefix}}</mat-icon>\r\n  <input matInput type=\"number\" class=\"input-text\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [autocomplete]=\"autoComplete\" />\r\n  <mat-icon class=\"mat-icon-suffix\" matSuffix *ngIf=\"iconSuffix\" (click)=\"suffixClick()\">{{iconSuffix}}</mat-icon>\r\n</mat-form-field>\r\n" }]
+                        }], encapsulation: ViewEncapsulation.None, template: "<mat-form-field class=\"apipass-input-text label-input\" appearance=\"outline\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-icon class=\"mat-icon-prefix\" matPrefix *ngIf=\"iconPrefix\" (click)=\"prefixClick()\">{{iconPrefix}}</mat-icon>\n  <input matInput type=\"number\" class=\"input-text\" [(ngModel)]=\"value\" [disabled]=\"disabled\" [autocomplete]=\"autoComplete\" />\n  <mat-icon class=\"mat-icon-suffix\" matSuffix *ngIf=\"iconSuffix\" (click)=\"suffixClick()\">{{iconSuffix}}</mat-icon>\n</mat-form-field>\n" }]
         }], propDecorators: { label: [{
                 type: Input
             }], disabled: [{
@@ -1514,7 +1514,7 @@ class InputBooleanComponent extends ValueAccessorBase {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputBooleanComponent),
                 multi: true
-            }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-boolean\">\r\n\r\n  <primary-button class=\"btn-true\"\r\n                  [selected]=\"this.value === true\"\r\n                  [label]=\"trueLabel\"\r\n                  [icon]=\"trueIconPrefix\"\r\n                  [suffixIcon]=\"trueIconSuffix\"\r\n                  [btnDisabled]=\"disabled\"\r\n                  (onClick)=\"trueClick()\">\r\n  </primary-button>\r\n\r\n  <primary-button class=\"btn-false\"\r\n                  [selected]=\"this.value === false || this.value === undefined\"\r\n                  [label]=\"falseLabel\"\r\n                  [icon]=\"falseIconPrefix\"\r\n                  [suffixIcon]=\"falseIconSuffix\"\r\n                  [btnDisabled]=\"disabled\"\r\n                  (onClick)=\"falseClick()\">\r\n  </primary-button>\r\n\r\n</div>\r\n", styles: [".input-boolean{width:100%;display:flex;flex-wrap:wrap}.input-boolean primary-button:first-child{margin-right:5px}.input-boolean primary-button button:not(.selected){background:#FFF;color:var(--color-fonts-tertiary);border:1px solid var(--color-fonts-tertiary);cursor:pointer}.input-boolean primary-button button:not(.selected):hover{color:#fff}.input-boolean primary-button button:not(.selected).mat-button-disabled{color:var(--color-fonts-tertiary)!important;pointer-events:none!important;cursor:default!important}.input-boolean primary-button button.selected{color:var(--color-primary);background:#FFF;border:1px solid var(--color-primary);pointer-events:none;cursor:default}.input-boolean primary-button button.selected:hover{color:var(--color-primary);background:#FFF;border:1px solid var(--color-primary)}.input-boolean primary-button button.selected.mat-button-disabled{background:var(--color-fonts-tertiary);color:#fff!important;pointer-events:none!important;cursor:default!important}\n"], dependencies: [{ kind: "component", type: i3$3.PrimaryButtonComponent, selector: "primary-button", inputs: ["label", "btnDisabled", "icon", "suffixIcon", "selected", "btnClass", "size"], outputs: ["onClick"] }], encapsulation: i0.ViewEncapsulation.None });
+            }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-boolean\">\n\n  <primary-button class=\"btn-true\"\n                  [selected]=\"this.value === true\"\n                  [label]=\"trueLabel\"\n                  [icon]=\"trueIconPrefix\"\n                  [suffixIcon]=\"trueIconSuffix\"\n                  [btnDisabled]=\"disabled\"\n                  (onClick)=\"trueClick()\">\n  </primary-button>\n\n  <primary-button class=\"btn-false\"\n                  [selected]=\"this.value === false || this.value === undefined\"\n                  [label]=\"falseLabel\"\n                  [icon]=\"falseIconPrefix\"\n                  [suffixIcon]=\"falseIconSuffix\"\n                  [btnDisabled]=\"disabled\"\n                  (onClick)=\"falseClick()\">\n  </primary-button>\n\n</div>\n", styles: [".input-boolean{width:100%;display:flex;flex-wrap:wrap}.input-boolean primary-button:first-child{margin-right:5px}.input-boolean primary-button button:not(.selected){background:#FFF;color:var(--color-fonts-tertiary);border:1px solid var(--color-fonts-tertiary);cursor:pointer}.input-boolean primary-button button:not(.selected):hover{color:#fff}.input-boolean primary-button button:not(.selected).mat-button-disabled{color:var(--color-fonts-tertiary)!important;pointer-events:none!important;cursor:default!important}.input-boolean primary-button button.selected{color:var(--color-primary);background:#FFF;border:1px solid var(--color-primary);pointer-events:none;cursor:default}.input-boolean primary-button button.selected:hover{color:var(--color-primary);background:#FFF;border:1px solid var(--color-primary)}.input-boolean primary-button button.selected.mat-button-disabled{background:var(--color-fonts-tertiary);color:#fff!important;pointer-events:none!important;cursor:default!important}\n"], dependencies: [{ kind: "component", type: i3$3.PrimaryButtonComponent, selector: "primary-button", inputs: ["label", "btnDisabled", "icon", "suffixIcon", "selected", "btnClass", "size"], outputs: ["onClick"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputBooleanComponent, decorators: [{
             type: Component,
@@ -1522,7 +1522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputBooleanComponent),
                             multi: true
-                        }], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-boolean\">\r\n\r\n  <primary-button class=\"btn-true\"\r\n                  [selected]=\"this.value === true\"\r\n                  [label]=\"trueLabel\"\r\n                  [icon]=\"trueIconPrefix\"\r\n                  [suffixIcon]=\"trueIconSuffix\"\r\n                  [btnDisabled]=\"disabled\"\r\n                  (onClick)=\"trueClick()\">\r\n  </primary-button>\r\n\r\n  <primary-button class=\"btn-false\"\r\n                  [selected]=\"this.value === false || this.value === undefined\"\r\n                  [label]=\"falseLabel\"\r\n                  [icon]=\"falseIconPrefix\"\r\n                  [suffixIcon]=\"falseIconSuffix\"\r\n                  [btnDisabled]=\"disabled\"\r\n                  (onClick)=\"falseClick()\">\r\n  </primary-button>\r\n\r\n</div>\r\n", styles: [".input-boolean{width:100%;display:flex;flex-wrap:wrap}.input-boolean primary-button:first-child{margin-right:5px}.input-boolean primary-button button:not(.selected){background:#FFF;color:var(--color-fonts-tertiary);border:1px solid var(--color-fonts-tertiary);cursor:pointer}.input-boolean primary-button button:not(.selected):hover{color:#fff}.input-boolean primary-button button:not(.selected).mat-button-disabled{color:var(--color-fonts-tertiary)!important;pointer-events:none!important;cursor:default!important}.input-boolean primary-button button.selected{color:var(--color-primary);background:#FFF;border:1px solid var(--color-primary);pointer-events:none;cursor:default}.input-boolean primary-button button.selected:hover{color:var(--color-primary);background:#FFF;border:1px solid var(--color-primary)}.input-boolean primary-button button.selected.mat-button-disabled{background:var(--color-fonts-tertiary);color:#fff!important;pointer-events:none!important;cursor:default!important}\n"] }]
+                        }], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-boolean\">\n\n  <primary-button class=\"btn-true\"\n                  [selected]=\"this.value === true\"\n                  [label]=\"trueLabel\"\n                  [icon]=\"trueIconPrefix\"\n                  [suffixIcon]=\"trueIconSuffix\"\n                  [btnDisabled]=\"disabled\"\n                  (onClick)=\"trueClick()\">\n  </primary-button>\n\n  <primary-button class=\"btn-false\"\n                  [selected]=\"this.value === false || this.value === undefined\"\n                  [label]=\"falseLabel\"\n                  [icon]=\"falseIconPrefix\"\n                  [suffixIcon]=\"falseIconSuffix\"\n                  [btnDisabled]=\"disabled\"\n                  (onClick)=\"falseClick()\">\n  </primary-button>\n\n</div>\n", styles: [".input-boolean{width:100%;display:flex;flex-wrap:wrap}.input-boolean primary-button:first-child{margin-right:5px}.input-boolean primary-button button:not(.selected){background:#FFF;color:var(--color-fonts-tertiary);border:1px solid var(--color-fonts-tertiary);cursor:pointer}.input-boolean primary-button button:not(.selected):hover{color:#fff}.input-boolean primary-button button:not(.selected).mat-button-disabled{color:var(--color-fonts-tertiary)!important;pointer-events:none!important;cursor:default!important}.input-boolean primary-button button.selected{color:var(--color-primary);background:#FFF;border:1px solid var(--color-primary);pointer-events:none;cursor:default}.input-boolean primary-button button.selected:hover{color:var(--color-primary);background:#FFF;border:1px solid var(--color-primary)}.input-boolean primary-button button.selected.mat-button-disabled{background:var(--color-fonts-tertiary);color:#fff!important;pointer-events:none!important;cursor:default!important}\n"] }]
         }], propDecorators: { trueLabel: [{
                 type: Input
             }], trueIconPrefix: [{
@@ -1702,7 +1702,7 @@ class SelectInterpolationComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectInterpolationComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"custom-select-input\" #trigger>\r\n  <mat-form-field\r\n      dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\r\n      cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\r\n      (click)=\"clicked()\" class=\"custom-select-component\"\r\n      [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\r\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\r\n    <input matInput #input\r\n           (blur)=\"onBlur($event)\"\r\n           [(ngModel)]=\"selectedItemLabel\"\r\n           [ngModelOptions]=\"{standalone: true}\"\r\n           [disabled]=\"disabled\"\r\n           (keyup)=keyPress()\r\n           (click)=\"clicked()\"\r\n           autocomplete=\"off\"\r\n    />\r\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\r\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\r\n    </span>\r\n  </mat-form-field>\r\n</div>\r\n<div class=\"custom-select-component\">\r\n\r\n  <ng-template cdkConnectedOverlay\r\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\r\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\r\n               [cdkConnectedOverlayOrigin]=\"origin\"\r\n               (backdropClick)=\"close($event)\"\r\n               (overlayOutsideClick)=\"close($event)\"\r\n               [cdkConnectedOverlayOpen]=\"opened\"\r\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\r\n    <ul class=\"ul-ac\">\r\n      <li class=\"li-search search-input-item\">\r\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\r\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\r\n          <input matInput class=\"search-input-item\"\r\n                 [(ngModel)]=\"searchText\"\r\n                 (blur)=\"onBlur($event)\"\r\n                 aria-autocomplete=\"none\"\r\n                 autocomplete=\"off\"\r\n          />\r\n        </mat-form-field>\r\n      </li>\r\n\r\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\r\n          (click)=\"selectItem(i)\"\r\n          (mousedown)=\"selectItem(i)\">\r\n        {{i.text}}\r\n      </li>\r\n\r\n    </ul>\r\n  </ng-template>\r\n</div>\r\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i7.SelectFilterPipe, name: "selectFilter" }] });
+            }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"custom-select-input\" #trigger>\n  <mat-form-field\n      dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\n      cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\n      (click)=\"clicked()\" class=\"custom-select-component\"\n      [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\n    <input matInput #input\n           (blur)=\"onBlur($event)\"\n           [(ngModel)]=\"selectedItemLabel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [disabled]=\"disabled\"\n           (keyup)=keyPress()\n           (click)=\"clicked()\"\n           autocomplete=\"off\"\n    />\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\n    </span>\n  </mat-form-field>\n</div>\n<div class=\"custom-select-component\">\n\n  <ng-template cdkConnectedOverlay\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n               [cdkConnectedOverlayOrigin]=\"origin\"\n               (backdropClick)=\"close($event)\"\n               (overlayOutsideClick)=\"close($event)\"\n               [cdkConnectedOverlayOpen]=\"opened\"\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\n    <ul class=\"ul-ac\">\n      <li class=\"li-search search-input-item\">\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n          <input matInput class=\"search-input-item\"\n                 [(ngModel)]=\"searchText\"\n                 (blur)=\"onBlur($event)\"\n                 aria-autocomplete=\"none\"\n                 autocomplete=\"off\"\n          />\n        </mat-form-field>\n      </li>\n\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          (click)=\"selectItem(i)\"\n          (mousedown)=\"selectItem(i)\">\n        {{i.text}}\n      </li>\n\n    </ul>\n  </ng-template>\n</div>\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: i7.SelectFilterPipe, name: "selectFilter" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectInterpolationComponent, decorators: [{
             type: Component,
@@ -1710,7 +1710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectInterpolationComponent),
                             multi: true
-                        }], template: "<div class=\"custom-select-input\" #trigger>\r\n  <mat-form-field\r\n      dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\r\n      cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\r\n      (click)=\"clicked()\" class=\"custom-select-component\"\r\n      [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\r\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\r\n    <input matInput #input\r\n           (blur)=\"onBlur($event)\"\r\n           [(ngModel)]=\"selectedItemLabel\"\r\n           [ngModelOptions]=\"{standalone: true}\"\r\n           [disabled]=\"disabled\"\r\n           (keyup)=keyPress()\r\n           (click)=\"clicked()\"\r\n           autocomplete=\"off\"\r\n    />\r\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\r\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\r\n    </span>\r\n  </mat-form-field>\r\n</div>\r\n<div class=\"custom-select-component\">\r\n\r\n  <ng-template cdkConnectedOverlay\r\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\r\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\r\n               [cdkConnectedOverlayOrigin]=\"origin\"\r\n               (backdropClick)=\"close($event)\"\r\n               (overlayOutsideClick)=\"close($event)\"\r\n               [cdkConnectedOverlayOpen]=\"opened\"\r\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\r\n    <ul class=\"ul-ac\">\r\n      <li class=\"li-search search-input-item\">\r\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\r\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\r\n          <input matInput class=\"search-input-item\"\r\n                 [(ngModel)]=\"searchText\"\r\n                 (blur)=\"onBlur($event)\"\r\n                 aria-autocomplete=\"none\"\r\n                 autocomplete=\"off\"\r\n          />\r\n        </mat-form-field>\r\n      </li>\r\n\r\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\r\n          (click)=\"selectItem(i)\"\r\n          (mousedown)=\"selectItem(i)\">\r\n        {{i.text}}\r\n      </li>\r\n\r\n    </ul>\r\n  </ng-template>\r\n</div>\r\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"] }]
+                        }], template: "<div class=\"custom-select-input\" #trigger>\n  <mat-form-field\n      dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDrop($event)\"\n      cdkOverlayOrigin #origin=\"cdkOverlayOrigin\"\n      (click)=\"clicked()\" class=\"custom-select-component\"\n      [ngClass]=\"{'select-open' : opened}\" appearance=\"outline\" autocomplete=\"off\">\n    <mat-label *ngIf=\"placeHolder\">{{placeHolder}}</mat-label>\n    <input matInput #input\n           (blur)=\"onBlur($event)\"\n           [(ngModel)]=\"selectedItemLabel\"\n           [ngModelOptions]=\"{standalone: true}\"\n           [disabled]=\"disabled\"\n           (keyup)=keyPress()\n           (click)=\"clicked()\"\n           autocomplete=\"off\"\n    />\n    <span class=\"open-icon\" (click)=\"arrowClick($event)\">\n        <i class=\"fas\" [ngClass]=\"{'fa-caret-down' : !opened, 'fa-caret-up' : opened}\"></i>\n    </span>\n  </mat-form-field>\n</div>\n<div class=\"custom-select-component\">\n\n  <ng-template cdkConnectedOverlay\n               [cdkConnectedOverlayPanelClass]=\"'custom-select-overlay-panel'\"\n               [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n               [cdkConnectedOverlayOrigin]=\"origin\"\n               (backdropClick)=\"close($event)\"\n               (overlayOutsideClick)=\"close($event)\"\n               [cdkConnectedOverlayOpen]=\"opened\"\n               [cdkConnectedOverlayMinWidth]=\"_triggerRect?.width!\">\n    <ul class=\"ul-ac\">\n      <li class=\"li-search search-input-item\">\n        <mat-form-field class=\"apipass-input-text search-input-item\" appearance=\"outline\">\n          <mat-label *ngIf=\"findPlaceHolder\">{{findPlaceHolder}}</mat-label>\n          <input matInput class=\"search-input-item\"\n                 [(ngModel)]=\"searchText\"\n                 (blur)=\"onBlur($event)\"\n                 aria-autocomplete=\"none\"\n                 autocomplete=\"off\"\n          />\n        </mat-form-field>\n      </li>\n\n      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          (click)=\"selectItem(i)\"\n          (mousedown)=\"selectItem(i)\">\n        {{i.text}}\n      </li>\n\n    </ul>\n  </ng-template>\n</div>\n", styles: [".custom-select-component{width:100%}.custom-select-component mat-form-field{width:100%}.custom-select-component ::ng-deep .mat-mdc-form-field-flex{padding:0!important;height:auto}.custom-select-component ::ng-deep .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;font-size:14px!important;width:100%;display:flex;align-items:center;justify-content:center}.custom-select-component ::ng-deep mat-form-field{height:20px!important}::ng-deep .custom-select-overlay-panel{margin-top:1px;margin-bottom:-5px}::ng-deep .custom-select-overlay-panel,.custom-select-input,.custom-select-component{cursor:pointer}::ng-deep .custom-select-overlay-panel .ul-ac,.custom-select-input .ul-ac,.custom-select-component .ul-ac{max-height:16rem;overflow:auto;background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;padding:0;width:100%;position:relative;margin-top:0}::ng-deep .custom-select-overlay-panel .ul-ac li,.custom-select-input .ul-ac li,.custom-select-component .ul-ac li{text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:10px;font-size:12px}::ng-deep .custom-select-overlay-panel .ul-ac li:hover,.custom-select-input .ul-ac li:hover,.custom-select-component .ul-ac li:hover{background:#bbbcbc}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex,.custom-select-input .ul-ac li .mat-form-field-flex,.custom-select-component .ul-ac li .mat-form-field-flex{height:37px!important}::ng-deep .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input,.custom-select-input .ul-ac li .mat-form-field-flex input,.custom-select-component .ul-ac li .mat-form-field-flex input{height:auto}::ng-deep .custom-select-overlay-panel .selected,.custom-select-input .selected,.custom-select-component .selected{background-color:#898a8a!important}::ng-deep .custom-select-overlay-panel .selected .fa,.custom-select-input .selected .fa,.custom-select-component .selected .fa{color:#fff!important}::ng-deep .custom-select-overlay-panel .remove-icon i,.custom-select-input .remove-icon i,.custom-select-component .remove-icon i{color:red;margin-right:10px}::ng-deep .custom-select-overlay-panel .open-icon,.custom-select-input .open-icon,.custom-select-component .open-icon{cursor:pointer}::ng-deep .custom-select-overlay-panel .open-icon i,.custom-select-input .open-icon i,.custom-select-component .open-icon i{color:#0000008a}::ng-deep .custom-select-overlay-panel .li-search,.custom-select-input .li-search,.custom-select-component .li-search{cursor:default!important;border-bottom:1px solid #CCC!important;height:58px}::ng-deep .custom-select-overlay-panel .li-search:hover,.custom-select-input .li-search:hover,.custom-select-component .li-search:hover{background:#FFF!important}::ng-deep .custom-select-overlay-panel .select-open .mat-form-field-flex,.custom-select-input .select-open .mat-form-field-flex,.custom-select-component .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ScrollStrategyOptions }]; }, propDecorators: { disabled: [{
                 type: Input
             }], items: [{
@@ -1798,11 +1798,11 @@ class InputImageComponent {
         this.inputFile.nativeElement.value = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputImageComponent, selector: "input-image", inputs: { imageFormData: "imageFormData", imageUrl: "imageUrl", imageAlt: "imageAlt", imageTitle: "imageTitle", accept: "accept", canRemove: "canRemove", removeTitle: "removeTitle", canUpload: "canUpload", uploadTitle: "uploadTitle", canModify: "canModify", modifyTitle: "modifyTitle", width: "width", height: "height" }, outputs: { onFileChanged: "onFileChanged" }, viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["actionFile"], descendants: true }], ngImport: i0, template: "<div class=\"input-image\" [ngStyle]=\"{'width': 'calc(' + width + ' + 5px', 'height': 'calc(' + height + ' + 5px'}\">\r\n  <img loading=\"lazy\" [src]=\"imageUrl\" [alt]=\"imageAlt\" [matTooltip]=\"imageTitle\" [ngClass]=\"{'clickable' : canClickOnImage()}\"\r\n       [ngStyle]=\"{'width': width, 'height': 'auto', 'max-height': '100%'}\" (click)=\"imageClick()\"/>\r\n  <input #actionFile id=\"action-icon\" type=\"file\" accept=\"{{accept}}\" (change)=\"fileChange($event)\"\r\n         style=\"display: none;\"/>\r\n</div>\r\n\r\n<div class=\"input-image-actions\" *ngIf=\"canAction()\">\r\n  <primary-button *ngIf=\"!hasImage() && canUpload\"\r\n                  [icon]=\"'upload'\"\r\n                  [label]=\"uploadTitle\"\r\n                  (onClick)=\"editClick()\">\r\n  </primary-button>\r\n  <primary-button *ngIf=\"hasImage() && canModify\"\r\n                  [icon]=\"'edit'\"\r\n                  [label]=\"modifyTitle\"\r\n                  (onClick)=\"editClick()\">\r\n  </primary-button>\r\n  <tertiary-button *ngIf=\"hasImage() && canRemove\"\r\n                   [icon]=\"'delete'\"\r\n                   [label]=\"removeTitle\"\r\n                   (onClick)=\"removeClick(); actionFile.value = ''\">\r\n  </tertiary-button>\r\n</div>\r\n", styles: [".input-image{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid var(--color-primary);border-radius:5px;gap:5px}.input-image .clickable{cursor:pointer}.input-image-actions{margin-top:5px;display:flex;align-items:center;flex-direction:row;gap:5px}.input-image-actions tertiary-button ::ng-deep button{background:#6b0101!important;border:1px solid #500202!important;color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3$3.PrimaryButtonComponent, selector: "primary-button", inputs: ["label", "btnDisabled", "icon", "suffixIcon", "selected", "btnClass", "size"], outputs: ["onClick"] }, { kind: "component", type: i3$3.TertiaryButtonComponent, selector: "tertiary-button", inputs: ["label", "btnDisabled", "icon", "suffixIcon", "selected", "btnClass", "size"], outputs: ["onClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputImageComponent, selector: "input-image", inputs: { imageFormData: "imageFormData", imageUrl: "imageUrl", imageAlt: "imageAlt", imageTitle: "imageTitle", accept: "accept", canRemove: "canRemove", removeTitle: "removeTitle", canUpload: "canUpload", uploadTitle: "uploadTitle", canModify: "canModify", modifyTitle: "modifyTitle", width: "width", height: "height" }, outputs: { onFileChanged: "onFileChanged" }, viewQueries: [{ propertyName: "inputFile", first: true, predicate: ["actionFile"], descendants: true }], ngImport: i0, template: "<div class=\"input-image\" [ngStyle]=\"{'width': 'calc(' + width + ' + 5px', 'height': 'calc(' + height + ' + 5px'}\">\n  <img loading=\"lazy\" [src]=\"imageUrl\" [alt]=\"imageAlt\" [matTooltip]=\"imageTitle\" [ngClass]=\"{'clickable' : canClickOnImage()}\"\n       [ngStyle]=\"{'width': width, 'height': 'auto', 'max-height': '100%'}\" (click)=\"imageClick()\"/>\n  <input #actionFile id=\"action-icon\" type=\"file\" accept=\"{{accept}}\" (change)=\"fileChange($event)\"\n         style=\"display: none;\"/>\n</div>\n\n<div class=\"input-image-actions\" *ngIf=\"canAction()\">\n  <primary-button *ngIf=\"!hasImage() && canUpload\"\n                  [icon]=\"'upload'\"\n                  [label]=\"uploadTitle\"\n                  (onClick)=\"editClick()\">\n  </primary-button>\n  <primary-button *ngIf=\"hasImage() && canModify\"\n                  [icon]=\"'edit'\"\n                  [label]=\"modifyTitle\"\n                  (onClick)=\"editClick()\">\n  </primary-button>\n  <tertiary-button *ngIf=\"hasImage() && canRemove\"\n                   [icon]=\"'delete'\"\n                   [label]=\"removeTitle\"\n                   (onClick)=\"removeClick(); actionFile.value = ''\">\n  </tertiary-button>\n</div>\n", styles: [".input-image{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid var(--color-primary);border-radius:5px;gap:5px}.input-image .clickable{cursor:pointer}.input-image-actions{margin-top:5px;display:flex;align-items:center;flex-direction:row;gap:5px}.input-image-actions tertiary-button ::ng-deep button{background:#6b0101!important;border:1px solid #500202!important;color:#fff!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i3$3.PrimaryButtonComponent, selector: "primary-button", inputs: ["label", "btnDisabled", "icon", "suffixIcon", "selected", "btnClass", "size"], outputs: ["onClick"] }, { kind: "component", type: i3$3.TertiaryButtonComponent, selector: "tertiary-button", inputs: ["label", "btnDisabled", "icon", "suffixIcon", "selected", "btnClass", "size"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-image', template: "<div class=\"input-image\" [ngStyle]=\"{'width': 'calc(' + width + ' + 5px', 'height': 'calc(' + height + ' + 5px'}\">\r\n  <img loading=\"lazy\" [src]=\"imageUrl\" [alt]=\"imageAlt\" [matTooltip]=\"imageTitle\" [ngClass]=\"{'clickable' : canClickOnImage()}\"\r\n       [ngStyle]=\"{'width': width, 'height': 'auto', 'max-height': '100%'}\" (click)=\"imageClick()\"/>\r\n  <input #actionFile id=\"action-icon\" type=\"file\" accept=\"{{accept}}\" (change)=\"fileChange($event)\"\r\n         style=\"display: none;\"/>\r\n</div>\r\n\r\n<div class=\"input-image-actions\" *ngIf=\"canAction()\">\r\n  <primary-button *ngIf=\"!hasImage() && canUpload\"\r\n                  [icon]=\"'upload'\"\r\n                  [label]=\"uploadTitle\"\r\n                  (onClick)=\"editClick()\">\r\n  </primary-button>\r\n  <primary-button *ngIf=\"hasImage() && canModify\"\r\n                  [icon]=\"'edit'\"\r\n                  [label]=\"modifyTitle\"\r\n                  (onClick)=\"editClick()\">\r\n  </primary-button>\r\n  <tertiary-button *ngIf=\"hasImage() && canRemove\"\r\n                   [icon]=\"'delete'\"\r\n                   [label]=\"removeTitle\"\r\n                   (onClick)=\"removeClick(); actionFile.value = ''\">\r\n  </tertiary-button>\r\n</div>\r\n", styles: [".input-image{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid var(--color-primary);border-radius:5px;gap:5px}.input-image .clickable{cursor:pointer}.input-image-actions{margin-top:5px;display:flex;align-items:center;flex-direction:row;gap:5px}.input-image-actions tertiary-button ::ng-deep button{background:#6b0101!important;border:1px solid #500202!important;color:#fff!important}\n"] }]
+            args: [{ selector: 'input-image', template: "<div class=\"input-image\" [ngStyle]=\"{'width': 'calc(' + width + ' + 5px', 'height': 'calc(' + height + ' + 5px'}\">\n  <img loading=\"lazy\" [src]=\"imageUrl\" [alt]=\"imageAlt\" [matTooltip]=\"imageTitle\" [ngClass]=\"{'clickable' : canClickOnImage()}\"\n       [ngStyle]=\"{'width': width, 'height': 'auto', 'max-height': '100%'}\" (click)=\"imageClick()\"/>\n  <input #actionFile id=\"action-icon\" type=\"file\" accept=\"{{accept}}\" (change)=\"fileChange($event)\"\n         style=\"display: none;\"/>\n</div>\n\n<div class=\"input-image-actions\" *ngIf=\"canAction()\">\n  <primary-button *ngIf=\"!hasImage() && canUpload\"\n                  [icon]=\"'upload'\"\n                  [label]=\"uploadTitle\"\n                  (onClick)=\"editClick()\">\n  </primary-button>\n  <primary-button *ngIf=\"hasImage() && canModify\"\n                  [icon]=\"'edit'\"\n                  [label]=\"modifyTitle\"\n                  (onClick)=\"editClick()\">\n  </primary-button>\n  <tertiary-button *ngIf=\"hasImage() && canRemove\"\n                   [icon]=\"'delete'\"\n                   [label]=\"removeTitle\"\n                   (onClick)=\"removeClick(); actionFile.value = ''\">\n  </tertiary-button>\n</div>\n", styles: [".input-image{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid var(--color-primary);border-radius:5px;gap:5px}.input-image .clickable{cursor:pointer}.input-image-actions{margin-top:5px;display:flex;align-items:center;flex-direction:row;gap:5px}.input-image-actions tertiary-button ::ng-deep button{background:#6b0101!important;border:1px solid #500202!important;color:#fff!important}\n"] }]
         }], propDecorators: { imageFormData: [{
                 type: Input
             }], imageUrl: [{
@@ -2125,7 +2125,7 @@ class InputDateTimeIntervalComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputDateTimeIntervalComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "scrollbarRef", first: true, predicate: ["intervalsBar"], descendants: true }], ngImport: i0, template: "<div class=\"input-date-time-interval\">\r\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"clickable\"\r\n                  (click)=\"dropdownOpen ? closeDropdown($event) : openDropDown($event)\">\r\n    <mat-label class=\"mdc-floating-label--float-above\" [innerHTML]=\"label\"></mat-label>\r\n    <span class=\"interval-input\">\r\n      <div matPrefix class=\"period-badget text-primary\" *ngIf=\"value?.interval\">\r\n        <mat-icon>date_range</mat-icon>\r\n        <span class=\"period-text\" [innerHTML]=\"value?.interval?.label\"></span>\r\n      </div>\r\n      <input style=\"display: flex\" class=\"clickable\" matInput [value]=\"getInputText()\" [readonly]=\"true\">\r\n    </span>\r\n    <mat-icon class=\"clickable text-tertiary\" matIconSuffix>{{dropdownOpen ? 'expand_less' : 'expand_more'}}</mat-icon>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayPanelClass]=\"'input-date-time-interval-overlay-panel'\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\r\n             (backdropClick)=\"closeDropdown($event)\"\r\n             (overlayOutsideClick)=\"closeDropdown($event)\"\r\n             [cdkConnectedOverlayOrigin]=\"origin\"\r\n             [cdkConnectedOverlayOpen]=\"dropdownOpen\">\r\n  <div class=\"input-date-time-interval-dropdown\">\r\n    <div class=\"input-options-container\">\r\n      <div class=\"intervals-container\" *ngIf=\"this.intervals\">\r\n        <div class=\"container-text\" *ngIf=\"relativeLabel\">\r\n          <span class=\"relative-text\" [innerHTML]=\"relativeLabel\"></span>\r\n        </div>\r\n        <ng-scrollbar #intervalsBar class=\"date-time-interval-scrollbar\" [visibility]=\"'always'\">\r\n          <div class=\"interval\"\r\n               [id]=\"'apipass-datetime-interval-' + interval.id\"\r\n               (click)=\"selectInterval(interval)\"\r\n               [ngClass]=\"{'interval-selected': isSelected(interval)}\"\r\n               *ngFor=\"let interval of this.intervals\">\r\n            <div class=\"interval-label\">\r\n              <span [innerHTML]=\"interval.label\"></span>\r\n            </div>\r\n            <div class=\"interval-icon\" *ngIf=\"isSelected(interval)\">\r\n              <mat-icon class=\"mat-icon-slim text-secondary\">check</mat-icon>\r\n            </div>\r\n          </div>\r\n        </ng-scrollbar>\r\n      </div>\r\n\r\n      <div class=\"calendar-container\" [ngClass]=\"{'only-calendar': !this.intervals}\">\r\n        <div class=\"container-text\" *ngIf=\"absoluteLabel\">\r\n          <span class=\"absolute-text\" [innerHTML]=\"absoluteLabel\"></span>\r\n        </div>\r\n        <div class=\"picker\">\r\n          <div class=\"picker-fields\" [ngClass]=\"{'picker-only-date': hideTime}\">\r\n            <div class=\"picker-group\">\r\n              <mat-form-field class=\"apipass-input-text-slim\">\r\n                <mat-label [innerHTML]=\"startDateLabel\"></mat-label>\r\n                <input matInput [(ngModel)]=\"selectedStartDate\"\r\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"startDateChanged()\">\r\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\r\n              </mat-form-field>\r\n\r\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\r\n                <mat-label [innerHTML]=\"startTimeLabel\"></mat-label>\r\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedStartTime\">\r\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\r\n              </mat-form-field>\r\n            </div>\r\n            <div class=\"picker-group\">\r\n              <mat-form-field class=\"apipass-input-text-slim\">\r\n                <mat-label [innerHTML]=\"endDateLabel\"></mat-label>\r\n                <input matInput [(ngModel)]=\"selectedEndDate\"\r\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"endDateChanged()\">\r\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\r\n              </mat-form-field>\r\n\r\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\r\n                <mat-label [innerHTML]=\"endTimeLabel\"></mat-label>\r\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedEndTime\">\r\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n          <mat-calendar\r\n            [selected]=\"_selectedDateRange\"\r\n            [maxDate]=\"calendarMaxDate\"\r\n            [minDate]=\"calendarMinDate\"\r\n            (selectedChange)=\"onDateRangeChange($event)\"></mat-calendar>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-date-time-actions\">\r\n      <button class=\"action-button dropdown-cancel-button\" *ngIf=\"cancelLabel\" (click)=\"cancel()\">\r\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"cancelLabel\"></span>\r\n      </button>\r\n      <button class=\"action-button dropdown-apply-button\" *ngIf=\"applyLabel\" (click)=\"apply()\">\r\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"applyLabel\"></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".input-date-time-interval mat-form-field{width:100%}.input-date-time-interval mat-form-field .interval-input{display:flex;flex-wrap:nowrap}.input-date-time-interval mat-form-field .interval-input .period-badget{display:flex;justify-content:space-around;align-items:center;gap:5px;padding:0 10px;margin-top:-1px;margin-left:15px;margin-right:5px;background:#EEE;border-radius:4px;border:1px solid #CCC}.input-date-time-interval mat-form-field .interval-input .period-badget .period-text{white-space:nowrap}.input-date-time-interval mat-form-field .date-value-input{display:flex;justify-content:flex-start;align-items:center;gap:5px}.input-date-time-interval-overlay-panel{margin-bottom:5px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.input-date-time-interval-dropdown{box-sizing:border-box;background:#FFF;border:1px solid #CCC;border-radius:5px;width:450px}@media (max-width: 500px){.input-date-time-interval-dropdown{width:90vw}}.input-date-time-interval-dropdown .input-options-container{display:flex;justify-content:space-between;align-items:flex-start}.input-date-time-interval-dropdown .input-options-container .container-text{font-weight:600;margin-bottom:5px}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container{flex-direction:column}}.input-date-time-interval-dropdown .input-options-container .intervals-container{padding:10px;width:35%;overflow-x:hidden;overflow-y:auto;border-right:1px solid #CCC}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .intervals-container{width:100%;border-right:none}}.input-date-time-interval-dropdown .input-options-container .intervals-container ng-scrollbar{max-height:380px;min-height:380px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval{display:flex;justify-content:space-between;align-items:center;gap:5px;background:#FFF;padding:6px 10px;border-radius:5px;cursor:pointer;font-weight:600;color:var(--color-primary)}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-label{width:100%;height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:13px;display:flex;justify-content:flex-start;align-items:center}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon{width:20px;height:20px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon mat-icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval:hover{background:#CCC}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected .interval-label{width:calc(100% - 25px)}.input-date-time-interval-dropdown .input-options-container .calendar-container{padding:10px 10px 0;width:65%}.input-date-time-interval-dropdown .input-options-container .calendar-container.only-calendar{width:100%}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .calendar-container{width:100%}}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields{display:flex;justify-content:space-between;flex-direction:column;gap:5px;margin-bottom:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields .picker-group{display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date{flex-direction:row}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date .picker-group{width:calc(50% - 5px)}.input-date-time-interval-dropdown .input-date-time-actions{box-sizing:border-box;width:100%;border-top:1px solid #CCC;padding:10px 15px;display:flex;gap:10px;justify-content:center;align-items:center}.input-date-time-interval-dropdown .input-date-time-actions .action-button{display:flex;min-width:105px;padding:5px 15px;gap:5px;overflow:hidden;text-overflow:ellipsis;justify-content:center;align-items:center;font-weight:700;border-radius:10px;cursor:pointer}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button{color:var(--color-primary);border:1px solid var(--color-primary);background:#FFF}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button:hover{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button{color:var(--color-primary);border:1px solid var(--color-secondary);background:var(--color-secondary)}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button:hover{background:var(--color-secondary-hover)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i7$2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i8.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i9.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None });
+            }], viewQueries: [{ propertyName: "scrollbarRef", first: true, predicate: ["intervalsBar"], descendants: true }], ngImport: i0, template: "<div class=\"input-date-time-interval\">\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"clickable\"\n                  (click)=\"dropdownOpen ? closeDropdown($event) : openDropDown($event)\">\n    <mat-label class=\"mdc-floating-label--float-above\" [innerHTML]=\"label\"></mat-label>\n    <span class=\"interval-input\">\n      <div matPrefix class=\"period-badget text-primary\" *ngIf=\"value?.interval\">\n        <mat-icon>date_range</mat-icon>\n        <span class=\"period-text\" [innerHTML]=\"value?.interval?.label\"></span>\n      </div>\n      <input style=\"display: flex\" class=\"clickable\" matInput [value]=\"getInputText()\" [readonly]=\"true\">\n    </span>\n    <mat-icon class=\"clickable text-tertiary\" matIconSuffix>{{dropdownOpen ? 'expand_less' : 'expand_more'}}</mat-icon>\n  </mat-form-field>\n</div>\n\n<ng-template cdkConnectedOverlay\n             [cdkConnectedOverlayPanelClass]=\"'input-date-time-interval-overlay-panel'\"\n             [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n             (backdropClick)=\"closeDropdown($event)\"\n             (overlayOutsideClick)=\"closeDropdown($event)\"\n             [cdkConnectedOverlayOrigin]=\"origin\"\n             [cdkConnectedOverlayOpen]=\"dropdownOpen\">\n  <div class=\"input-date-time-interval-dropdown\">\n    <div class=\"input-options-container\">\n      <div class=\"intervals-container\" *ngIf=\"this.intervals\">\n        <div class=\"container-text\" *ngIf=\"relativeLabel\">\n          <span class=\"relative-text\" [innerHTML]=\"relativeLabel\"></span>\n        </div>\n        <ng-scrollbar #intervalsBar class=\"date-time-interval-scrollbar\" [visibility]=\"'always'\">\n          <div class=\"interval\"\n               [id]=\"'apipass-datetime-interval-' + interval.id\"\n               (click)=\"selectInterval(interval)\"\n               [ngClass]=\"{'interval-selected': isSelected(interval)}\"\n               *ngFor=\"let interval of this.intervals\">\n            <div class=\"interval-label\">\n              <span [innerHTML]=\"interval.label\"></span>\n            </div>\n            <div class=\"interval-icon\" *ngIf=\"isSelected(interval)\">\n              <mat-icon class=\"mat-icon-slim text-secondary\">check</mat-icon>\n            </div>\n          </div>\n        </ng-scrollbar>\n      </div>\n\n      <div class=\"calendar-container\" [ngClass]=\"{'only-calendar': !this.intervals}\">\n        <div class=\"container-text\" *ngIf=\"absoluteLabel\">\n          <span class=\"absolute-text\" [innerHTML]=\"absoluteLabel\"></span>\n        </div>\n        <div class=\"picker\">\n          <div class=\"picker-fields\" [ngClass]=\"{'picker-only-date': hideTime}\">\n            <div class=\"picker-group\">\n              <mat-form-field class=\"apipass-input-text-slim\">\n                <mat-label [innerHTML]=\"startDateLabel\"></mat-label>\n                <input matInput [(ngModel)]=\"selectedStartDate\"\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"startDateChanged()\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\n              </mat-form-field>\n\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\n                <mat-label [innerHTML]=\"startTimeLabel\"></mat-label>\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedStartTime\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\n              </mat-form-field>\n            </div>\n            <div class=\"picker-group\">\n              <mat-form-field class=\"apipass-input-text-slim\">\n                <mat-label [innerHTML]=\"endDateLabel\"></mat-label>\n                <input matInput [(ngModel)]=\"selectedEndDate\"\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"endDateChanged()\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\n              </mat-form-field>\n\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\n                <mat-label [innerHTML]=\"endTimeLabel\"></mat-label>\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedEndTime\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-calendar\n            [selected]=\"_selectedDateRange\"\n            [maxDate]=\"calendarMaxDate\"\n            [minDate]=\"calendarMinDate\"\n            (selectedChange)=\"onDateRangeChange($event)\"></mat-calendar>\n        </div>\n      </div>\n    </div>\n    <div class=\"input-date-time-actions\">\n      <button class=\"action-button dropdown-cancel-button\" *ngIf=\"cancelLabel\" (click)=\"cancel()\">\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"cancelLabel\"></span>\n      </button>\n      <button class=\"action-button dropdown-apply-button\" *ngIf=\"applyLabel\" (click)=\"apply()\">\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"applyLabel\"></span>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".input-date-time-interval mat-form-field{width:100%}.input-date-time-interval mat-form-field .interval-input{display:flex;flex-wrap:nowrap}.input-date-time-interval mat-form-field .interval-input .period-badget{display:flex;justify-content:space-around;align-items:center;gap:5px;padding:0 10px;margin-top:-1px;margin-left:15px;margin-right:5px;background:#EEE;border-radius:4px;border:1px solid #CCC}.input-date-time-interval mat-form-field .interval-input .period-badget .period-text{white-space:nowrap}.input-date-time-interval mat-form-field .date-value-input{display:flex;justify-content:flex-start;align-items:center;gap:5px}.input-date-time-interval-overlay-panel{margin-bottom:5px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.input-date-time-interval-dropdown{box-sizing:border-box;background:#FFF;border:1px solid #CCC;border-radius:5px;width:450px}@media (max-width: 500px){.input-date-time-interval-dropdown{width:90vw}}.input-date-time-interval-dropdown .input-options-container{display:flex;justify-content:space-between;align-items:flex-start}.input-date-time-interval-dropdown .input-options-container .container-text{font-weight:600;margin-bottom:5px}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container{flex-direction:column}}.input-date-time-interval-dropdown .input-options-container .intervals-container{padding:10px;width:35%;overflow-x:hidden;overflow-y:auto;border-right:1px solid #CCC}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .intervals-container{width:100%;border-right:none}}.input-date-time-interval-dropdown .input-options-container .intervals-container ng-scrollbar{max-height:380px;min-height:380px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval{display:flex;justify-content:space-between;align-items:center;gap:5px;background:#FFF;padding:6px 10px;border-radius:5px;cursor:pointer;font-weight:600;color:var(--color-primary)}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-label{width:100%;height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:13px;display:flex;justify-content:flex-start;align-items:center}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon{width:20px;height:20px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon mat-icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval:hover{background:#CCC}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected .interval-label{width:calc(100% - 25px)}.input-date-time-interval-dropdown .input-options-container .calendar-container{padding:10px 10px 0;width:65%}.input-date-time-interval-dropdown .input-options-container .calendar-container.only-calendar{width:100%}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .calendar-container{width:100%}}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields{display:flex;justify-content:space-between;flex-direction:column;gap:5px;margin-bottom:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields .picker-group{display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date{flex-direction:row}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date .picker-group{width:calc(50% - 5px)}.input-date-time-interval-dropdown .input-date-time-actions{box-sizing:border-box;width:100%;border-top:1px solid #CCC;padding:10px 15px;display:flex;gap:10px;justify-content:center;align-items:center}.input-date-time-interval-dropdown .input-date-time-actions .action-button{display:flex;min-width:105px;padding:5px 15px;gap:5px;overflow:hidden;text-overflow:ellipsis;justify-content:center;align-items:center;font-weight:700;border-radius:10px;cursor:pointer}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button{color:var(--color-primary);border:1px solid var(--color-primary);background:#FFF}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button:hover{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button{color:var(--color-primary);border:1px solid var(--color-secondary);background:var(--color-secondary)}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button:hover{background:var(--color-secondary-hover)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: 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.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i7$2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i8.NgScrollbar, selector: "ng-scrollbar", inputs: ["disabled", "sensorDisabled", "pointerEventsDisabled", "viewportPropagateMouseMove", "autoHeightDisabled", "autoWidthDisabled", "viewClass", "trackClass", "thumbClass", "minThumbSize", "trackClickScrollDuration", "pointerEventsMethod", "track", "visibility", "appearance", "position", "sensorDebounce", "scrollAuditTime"], outputs: ["updated"], exportAs: ["ngScrollbar"] }, { kind: "directive", type: i9.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputDateTimeIntervalComponent, decorators: [{
             type: Component,
@@ -2133,7 +2133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => InputDateTimeIntervalComponent),
                             multi: true
-                        }], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-date-time-interval\">\r\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"clickable\"\r\n                  (click)=\"dropdownOpen ? closeDropdown($event) : openDropDown($event)\">\r\n    <mat-label class=\"mdc-floating-label--float-above\" [innerHTML]=\"label\"></mat-label>\r\n    <span class=\"interval-input\">\r\n      <div matPrefix class=\"period-badget text-primary\" *ngIf=\"value?.interval\">\r\n        <mat-icon>date_range</mat-icon>\r\n        <span class=\"period-text\" [innerHTML]=\"value?.interval?.label\"></span>\r\n      </div>\r\n      <input style=\"display: flex\" class=\"clickable\" matInput [value]=\"getInputText()\" [readonly]=\"true\">\r\n    </span>\r\n    <mat-icon class=\"clickable text-tertiary\" matIconSuffix>{{dropdownOpen ? 'expand_less' : 'expand_more'}}</mat-icon>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<ng-template cdkConnectedOverlay\r\n             [cdkConnectedOverlayPanelClass]=\"'input-date-time-interval-overlay-panel'\"\r\n             [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\r\n             (backdropClick)=\"closeDropdown($event)\"\r\n             (overlayOutsideClick)=\"closeDropdown($event)\"\r\n             [cdkConnectedOverlayOrigin]=\"origin\"\r\n             [cdkConnectedOverlayOpen]=\"dropdownOpen\">\r\n  <div class=\"input-date-time-interval-dropdown\">\r\n    <div class=\"input-options-container\">\r\n      <div class=\"intervals-container\" *ngIf=\"this.intervals\">\r\n        <div class=\"container-text\" *ngIf=\"relativeLabel\">\r\n          <span class=\"relative-text\" [innerHTML]=\"relativeLabel\"></span>\r\n        </div>\r\n        <ng-scrollbar #intervalsBar class=\"date-time-interval-scrollbar\" [visibility]=\"'always'\">\r\n          <div class=\"interval\"\r\n               [id]=\"'apipass-datetime-interval-' + interval.id\"\r\n               (click)=\"selectInterval(interval)\"\r\n               [ngClass]=\"{'interval-selected': isSelected(interval)}\"\r\n               *ngFor=\"let interval of this.intervals\">\r\n            <div class=\"interval-label\">\r\n              <span [innerHTML]=\"interval.label\"></span>\r\n            </div>\r\n            <div class=\"interval-icon\" *ngIf=\"isSelected(interval)\">\r\n              <mat-icon class=\"mat-icon-slim text-secondary\">check</mat-icon>\r\n            </div>\r\n          </div>\r\n        </ng-scrollbar>\r\n      </div>\r\n\r\n      <div class=\"calendar-container\" [ngClass]=\"{'only-calendar': !this.intervals}\">\r\n        <div class=\"container-text\" *ngIf=\"absoluteLabel\">\r\n          <span class=\"absolute-text\" [innerHTML]=\"absoluteLabel\"></span>\r\n        </div>\r\n        <div class=\"picker\">\r\n          <div class=\"picker-fields\" [ngClass]=\"{'picker-only-date': hideTime}\">\r\n            <div class=\"picker-group\">\r\n              <mat-form-field class=\"apipass-input-text-slim\">\r\n                <mat-label [innerHTML]=\"startDateLabel\"></mat-label>\r\n                <input matInput [(ngModel)]=\"selectedStartDate\"\r\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"startDateChanged()\">\r\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\r\n              </mat-form-field>\r\n\r\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\r\n                <mat-label [innerHTML]=\"startTimeLabel\"></mat-label>\r\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedStartTime\">\r\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\r\n              </mat-form-field>\r\n            </div>\r\n            <div class=\"picker-group\">\r\n              <mat-form-field class=\"apipass-input-text-slim\">\r\n                <mat-label [innerHTML]=\"endDateLabel\"></mat-label>\r\n                <input matInput [(ngModel)]=\"selectedEndDate\"\r\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"endDateChanged()\">\r\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\r\n              </mat-form-field>\r\n\r\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\r\n                <mat-label [innerHTML]=\"endTimeLabel\"></mat-label>\r\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedEndTime\">\r\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\r\n              </mat-form-field>\r\n            </div>\r\n          </div>\r\n          <mat-calendar\r\n            [selected]=\"_selectedDateRange\"\r\n            [maxDate]=\"calendarMaxDate\"\r\n            [minDate]=\"calendarMinDate\"\r\n            (selectedChange)=\"onDateRangeChange($event)\"></mat-calendar>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"input-date-time-actions\">\r\n      <button class=\"action-button dropdown-cancel-button\" *ngIf=\"cancelLabel\" (click)=\"cancel()\">\r\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"cancelLabel\"></span>\r\n      </button>\r\n      <button class=\"action-button dropdown-apply-button\" *ngIf=\"applyLabel\" (click)=\"apply()\">\r\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"applyLabel\"></span>\r\n      </button>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".input-date-time-interval mat-form-field{width:100%}.input-date-time-interval mat-form-field .interval-input{display:flex;flex-wrap:nowrap}.input-date-time-interval mat-form-field .interval-input .period-badget{display:flex;justify-content:space-around;align-items:center;gap:5px;padding:0 10px;margin-top:-1px;margin-left:15px;margin-right:5px;background:#EEE;border-radius:4px;border:1px solid #CCC}.input-date-time-interval mat-form-field .interval-input .period-badget .period-text{white-space:nowrap}.input-date-time-interval mat-form-field .date-value-input{display:flex;justify-content:flex-start;align-items:center;gap:5px}.input-date-time-interval-overlay-panel{margin-bottom:5px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.input-date-time-interval-dropdown{box-sizing:border-box;background:#FFF;border:1px solid #CCC;border-radius:5px;width:450px}@media (max-width: 500px){.input-date-time-interval-dropdown{width:90vw}}.input-date-time-interval-dropdown .input-options-container{display:flex;justify-content:space-between;align-items:flex-start}.input-date-time-interval-dropdown .input-options-container .container-text{font-weight:600;margin-bottom:5px}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container{flex-direction:column}}.input-date-time-interval-dropdown .input-options-container .intervals-container{padding:10px;width:35%;overflow-x:hidden;overflow-y:auto;border-right:1px solid #CCC}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .intervals-container{width:100%;border-right:none}}.input-date-time-interval-dropdown .input-options-container .intervals-container ng-scrollbar{max-height:380px;min-height:380px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval{display:flex;justify-content:space-between;align-items:center;gap:5px;background:#FFF;padding:6px 10px;border-radius:5px;cursor:pointer;font-weight:600;color:var(--color-primary)}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-label{width:100%;height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:13px;display:flex;justify-content:flex-start;align-items:center}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon{width:20px;height:20px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon mat-icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval:hover{background:#CCC}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected .interval-label{width:calc(100% - 25px)}.input-date-time-interval-dropdown .input-options-container .calendar-container{padding:10px 10px 0;width:65%}.input-date-time-interval-dropdown .input-options-container .calendar-container.only-calendar{width:100%}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .calendar-container{width:100%}}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields{display:flex;justify-content:space-between;flex-direction:column;gap:5px;margin-bottom:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields .picker-group{display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date{flex-direction:row}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date .picker-group{width:calc(50% - 5px)}.input-date-time-interval-dropdown .input-date-time-actions{box-sizing:border-box;width:100%;border-top:1px solid #CCC;padding:10px 15px;display:flex;gap:10px;justify-content:center;align-items:center}.input-date-time-interval-dropdown .input-date-time-actions .action-button{display:flex;min-width:105px;padding:5px 15px;gap:5px;overflow:hidden;text-overflow:ellipsis;justify-content:center;align-items:center;font-weight:700;border-radius:10px;cursor:pointer}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button{color:var(--color-primary);border:1px solid var(--color-primary);background:#FFF}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button:hover{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button{color:var(--color-primary);border:1px solid var(--color-secondary);background:var(--color-secondary)}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button:hover{background:var(--color-secondary-hover)}\n"] }]
+                        }], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-date-time-interval\">\n  <mat-form-field cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"clickable\"\n                  (click)=\"dropdownOpen ? closeDropdown($event) : openDropDown($event)\">\n    <mat-label class=\"mdc-floating-label--float-above\" [innerHTML]=\"label\"></mat-label>\n    <span class=\"interval-input\">\n      <div matPrefix class=\"period-badget text-primary\" *ngIf=\"value?.interval\">\n        <mat-icon>date_range</mat-icon>\n        <span class=\"period-text\" [innerHTML]=\"value?.interval?.label\"></span>\n      </div>\n      <input style=\"display: flex\" class=\"clickable\" matInput [value]=\"getInputText()\" [readonly]=\"true\">\n    </span>\n    <mat-icon class=\"clickable text-tertiary\" matIconSuffix>{{dropdownOpen ? 'expand_less' : 'expand_more'}}</mat-icon>\n  </mat-form-field>\n</div>\n\n<ng-template cdkConnectedOverlay\n             [cdkConnectedOverlayPanelClass]=\"'input-date-time-interval-overlay-panel'\"\n             [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n             (backdropClick)=\"closeDropdown($event)\"\n             (overlayOutsideClick)=\"closeDropdown($event)\"\n             [cdkConnectedOverlayOrigin]=\"origin\"\n             [cdkConnectedOverlayOpen]=\"dropdownOpen\">\n  <div class=\"input-date-time-interval-dropdown\">\n    <div class=\"input-options-container\">\n      <div class=\"intervals-container\" *ngIf=\"this.intervals\">\n        <div class=\"container-text\" *ngIf=\"relativeLabel\">\n          <span class=\"relative-text\" [innerHTML]=\"relativeLabel\"></span>\n        </div>\n        <ng-scrollbar #intervalsBar class=\"date-time-interval-scrollbar\" [visibility]=\"'always'\">\n          <div class=\"interval\"\n               [id]=\"'apipass-datetime-interval-' + interval.id\"\n               (click)=\"selectInterval(interval)\"\n               [ngClass]=\"{'interval-selected': isSelected(interval)}\"\n               *ngFor=\"let interval of this.intervals\">\n            <div class=\"interval-label\">\n              <span [innerHTML]=\"interval.label\"></span>\n            </div>\n            <div class=\"interval-icon\" *ngIf=\"isSelected(interval)\">\n              <mat-icon class=\"mat-icon-slim text-secondary\">check</mat-icon>\n            </div>\n          </div>\n        </ng-scrollbar>\n      </div>\n\n      <div class=\"calendar-container\" [ngClass]=\"{'only-calendar': !this.intervals}\">\n        <div class=\"container-text\" *ngIf=\"absoluteLabel\">\n          <span class=\"absolute-text\" [innerHTML]=\"absoluteLabel\"></span>\n        </div>\n        <div class=\"picker\">\n          <div class=\"picker-fields\" [ngClass]=\"{'picker-only-date': hideTime}\">\n            <div class=\"picker-group\">\n              <mat-form-field class=\"apipass-input-text-slim\">\n                <mat-label [innerHTML]=\"startDateLabel\"></mat-label>\n                <input matInput [(ngModel)]=\"selectedStartDate\"\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"startDateChanged()\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\n              </mat-form-field>\n\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\n                <mat-label [innerHTML]=\"startTimeLabel\"></mat-label>\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedStartTime\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\n              </mat-form-field>\n            </div>\n            <div class=\"picker-group\">\n              <mat-form-field class=\"apipass-input-text-slim\">\n                <mat-label [innerHTML]=\"endDateLabel\"></mat-label>\n                <input matInput [(ngModel)]=\"selectedEndDate\"\n                       [mask]=\"dateMask\" [dropSpecialCharacters]=\"false\" (blur)=\"endDateChanged()\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>date_range</mat-icon>\n              </mat-form-field>\n\n              <mat-form-field class=\"apipass-input-text-slim\" *ngIf=\"!hideTime\">\n                <mat-label [innerHTML]=\"endTimeLabel\"></mat-label>\n                <input matInput [mask]=\"timeMask\" [dropSpecialCharacters]=\"false\" [(ngModel)]=\"selectedEndTime\">\n                <mat-icon class=\"mat-icon-slim text-tertiary\" matIconSuffix>schedule</mat-icon>\n              </mat-form-field>\n            </div>\n          </div>\n          <mat-calendar\n            [selected]=\"_selectedDateRange\"\n            [maxDate]=\"calendarMaxDate\"\n            [minDate]=\"calendarMinDate\"\n            (selectedChange)=\"onDateRangeChange($event)\"></mat-calendar>\n        </div>\n      </div>\n    </div>\n    <div class=\"input-date-time-actions\">\n      <button class=\"action-button dropdown-cancel-button\" *ngIf=\"cancelLabel\" (click)=\"cancel()\">\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"cancelLabel\"></span>\n      </button>\n      <button class=\"action-button dropdown-apply-button\" *ngIf=\"applyLabel\" (click)=\"apply()\">\n        <span class=\"dropdown-cancel-button-text\" [innerHTML]=\"applyLabel\"></span>\n      </button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".input-date-time-interval mat-form-field{width:100%}.input-date-time-interval mat-form-field .interval-input{display:flex;flex-wrap:nowrap}.input-date-time-interval mat-form-field .interval-input .period-badget{display:flex;justify-content:space-around;align-items:center;gap:5px;padding:0 10px;margin-top:-1px;margin-left:15px;margin-right:5px;background:#EEE;border-radius:4px;border:1px solid #CCC}.input-date-time-interval mat-form-field .interval-input .period-badget .period-text{white-space:nowrap}.input-date-time-interval mat-form-field .date-value-input{display:flex;justify-content:flex-start;align-items:center;gap:5px}.input-date-time-interval-overlay-panel{margin-bottom:5px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.input-date-time-interval-dropdown{box-sizing:border-box;background:#FFF;border:1px solid #CCC;border-radius:5px;width:450px}@media (max-width: 500px){.input-date-time-interval-dropdown{width:90vw}}.input-date-time-interval-dropdown .input-options-container{display:flex;justify-content:space-between;align-items:flex-start}.input-date-time-interval-dropdown .input-options-container .container-text{font-weight:600;margin-bottom:5px}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container{flex-direction:column}}.input-date-time-interval-dropdown .input-options-container .intervals-container{padding:10px;width:35%;overflow-x:hidden;overflow-y:auto;border-right:1px solid #CCC}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .intervals-container{width:100%;border-right:none}}.input-date-time-interval-dropdown .input-options-container .intervals-container ng-scrollbar{max-height:380px;min-height:380px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval{display:flex;justify-content:space-between;align-items:center;gap:5px;background:#FFF;padding:6px 10px;border-radius:5px;cursor:pointer;font-weight:600;color:var(--color-primary)}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-label{width:100%;height:20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:13px;display:flex;justify-content:flex-start;align-items:center}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon{width:20px;height:20px}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval .interval-icon mat-icon{width:20px;height:20px;display:flex;justify-content:center;align-items:center;font-size:18px;font-weight:700}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval:hover{background:#CCC}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-options-container .intervals-container .interval.interval-selected .interval-label{width:calc(100% - 25px)}.input-date-time-interval-dropdown .input-options-container .calendar-container{padding:10px 10px 0;width:65%}.input-date-time-interval-dropdown .input-options-container .calendar-container.only-calendar{width:100%}@media (max-width: 500px){.input-date-time-interval-dropdown .input-options-container .calendar-container{width:100%}}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields{display:flex;justify-content:space-between;flex-direction:column;gap:5px;margin-bottom:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields .picker-group{display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:5px}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date{flex-direction:row}.input-date-time-interval-dropdown .input-options-container .calendar-container .picker .picker-fields.picker-only-date .picker-group{width:calc(50% - 5px)}.input-date-time-interval-dropdown .input-date-time-actions{box-sizing:border-box;width:100%;border-top:1px solid #CCC;padding:10px 15px;display:flex;gap:10px;justify-content:center;align-items:center}.input-date-time-interval-dropdown .input-date-time-actions .action-button{display:flex;min-width:105px;padding:5px 15px;gap:5px;overflow:hidden;text-overflow:ellipsis;justify-content:center;align-items:center;font-weight:700;border-radius:10px;cursor:pointer}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button{color:var(--color-primary);border:1px solid var(--color-primary);background:#FFF}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-cancel-button:hover{background:var(--color-primary);color:#fff}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button{color:var(--color-primary);border:1px solid var(--color-secondary);background:var(--color-secondary)}.input-date-time-interval-dropdown .input-date-time-actions .dropdown-apply-button:hover{background:var(--color-secondary-hover)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ScrollStrategyOptions }]; }, propDecorators: { timezone: [{
                 type: Input
             }], dateMask: [{
@@ -2266,11 +2266,11 @@ class KeyValueInputComponent {
         return this.componentId ? `${this.componentId}-${id}-${index}` : `${id}-${index}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: KeyValueInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: KeyValueInputComponent, selector: "key-value-input", inputs: { componentId: "componentId", items: "items", size: "size", keyAttributeName: "keyAttributeName", valueAttributeName: "valueAttributeName", keyLabel: "keyLabel", valueLabel: "valueLabel", removeLabel: "removeLabel", inputOptionsWidthPercentage: "inputOptionsWidthPercentage", inputOptionsDefaultSelected: "inputOptionsDefaultSelected", inputOptions: "inputOptions", blockNewItem: "blockNewItem", blockEditLabel: "blockEditLabel", onDropFn: "onDropFn" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\r\n  <input-text\r\n    [componentId]=\"getComponentId('key', index)\"\r\n    class=\"input-key\"\r\n    [size]=\"size\"\r\n    [label]=\"keyLabel\"\r\n    [inputOptions]=\"inputOptions\"\r\n    [inputOptionsInitSelected]=\"item.type\"\r\n    [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\r\n    [disabled]=\"blockEditLabel\"\r\n    [(ngModel)]=\"item[keyAttributeName]\"\r\n    (optionChanged)=\"inputOptionChanged($event, index)\"\r\n    (onDropEvent)=\"onKeyDrop(item, $event)\">\r\n  </input-text>\r\n  <input-text\r\n    class=\"input-value\"\r\n    [size]=\"size\"\r\n    [label]=\"valueLabel\"\r\n    [(ngModel)]=\"item[valueAttributeName]\"\r\n    (onDropEvent)=\"onValueDrop(item, $event)\">\r\n  </input-text>\r\n  <button class=\"delete-button\" (click)=\"removeItem(index)\" [matTooltip]=\"removeLabel\" type=\"button\">\r\n    <i class=\"far fa-trash-alt fa-lg\"></i>\r\n  </button>\r\n</div>\r\n<div class=\"key-value-item\" *ngIf=\"!blockNewItem\">\r\n  <input-text\r\n    class=\"input-key\"\r\n    [size]=\"size\"\r\n    [label]=\"keyLabel\"\r\n    [inputOptions]=\"inputOptions\"\r\n    [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\r\n    [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\r\n    (input)=\"onKeyPressedTemporaryKeyFn()\"\r\n    (optionChanged)=\"temporaryItemOptionChanged($event)\"\r\n    [(ngModel)]=\"temporaryItem[this.keyAttributeName]\"\r\n    (onDropEvent)=\"onKeyDropTemporaryItem(temporaryItem, $event)\">\r\n  </input-text>\r\n  <input-text\r\n    class=\"input-value\"\r\n    [size]=\"size\"\r\n    [label]=\"valueLabel\"\r\n    [(ngModel)]=\"temporaryItem[this.valueAttributeName]\"\r\n    (onDropEvent)=\"onValueDrop(temporaryItem, $event)\">\r\n  </input-text>\r\n</div>\r\n\r\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--color-fonts-tertiary);border:none!important;background:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: InputTextComponent, selector: "input-text", inputs: ["componentId", "label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged", "onDropEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: KeyValueInputComponent, selector: "key-value-input", inputs: { componentId: "componentId", items: "items", size: "size", keyAttributeName: "keyAttributeName", valueAttributeName: "valueAttributeName", keyLabel: "keyLabel", valueLabel: "valueLabel", removeLabel: "removeLabel", inputOptionsWidthPercentage: "inputOptionsWidthPercentage", inputOptionsDefaultSelected: "inputOptionsDefaultSelected", inputOptions: "inputOptions", blockNewItem: "blockNewItem", blockEditLabel: "blockEditLabel", onDropFn: "onDropFn" }, outputs: { itemsChange: "itemsChange" }, ngImport: i0, template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n  <input-text\n    [componentId]=\"getComponentId('key', index)\"\n    class=\"input-key\"\n    [size]=\"size\"\n    [label]=\"keyLabel\"\n    [inputOptions]=\"inputOptions\"\n    [inputOptionsInitSelected]=\"item.type\"\n    [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n    [disabled]=\"blockEditLabel\"\n    [(ngModel)]=\"item[keyAttributeName]\"\n    (optionChanged)=\"inputOptionChanged($event, index)\"\n    (onDropEvent)=\"onKeyDrop(item, $event)\">\n  </input-text>\n  <input-text\n    class=\"input-value\"\n    [size]=\"size\"\n    [label]=\"valueLabel\"\n    [(ngModel)]=\"item[valueAttributeName]\"\n    (onDropEvent)=\"onValueDrop(item, $event)\">\n  </input-text>\n  <button class=\"delete-button\" (click)=\"removeItem(index)\" [matTooltip]=\"removeLabel\" type=\"button\">\n    <i class=\"far fa-trash-alt fa-lg\"></i>\n  </button>\n</div>\n<div class=\"key-value-item\" *ngIf=\"!blockNewItem\">\n  <input-text\n    class=\"input-key\"\n    [size]=\"size\"\n    [label]=\"keyLabel\"\n    [inputOptions]=\"inputOptions\"\n    [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n    [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n    (input)=\"onKeyPressedTemporaryKeyFn()\"\n    (optionChanged)=\"temporaryItemOptionChanged($event)\"\n    [(ngModel)]=\"temporaryItem[this.keyAttributeName]\"\n    (onDropEvent)=\"onKeyDropTemporaryItem(temporaryItem, $event)\">\n  </input-text>\n  <input-text\n    class=\"input-value\"\n    [size]=\"size\"\n    [label]=\"valueLabel\"\n    [(ngModel)]=\"temporaryItem[this.valueAttributeName]\"\n    (onDropEvent)=\"onValueDrop(temporaryItem, $event)\">\n  </input-text>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--color-fonts-tertiary);border:none!important;background:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: InputTextComponent, selector: "input-text", inputs: ["componentId", "label", "disabled", "iconSuffix", "iconPrefix", "autoComplete", "size", "debounceTime", "widthPercentageInputOptions", "inputOptions", "inputOptionsInitSelected"], outputs: ["suffixIconClick", "prefixIconClick", "onDebounce", "optionChanged", "onDropEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: KeyValueInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'key-value-input', template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\r\n  <input-text\r\n    [componentId]=\"getComponentId('key', index)\"\r\n    class=\"input-key\"\r\n    [size]=\"size\"\r\n    [label]=\"keyLabel\"\r\n    [inputOptions]=\"inputOptions\"\r\n    [inputOptionsInitSelected]=\"item.type\"\r\n    [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\r\n    [disabled]=\"blockEditLabel\"\r\n    [(ngModel)]=\"item[keyAttributeName]\"\r\n    (optionChanged)=\"inputOptionChanged($event, index)\"\r\n    (onDropEvent)=\"onKeyDrop(item, $event)\">\r\n  </input-text>\r\n  <input-text\r\n    class=\"input-value\"\r\n    [size]=\"size\"\r\n    [label]=\"valueLabel\"\r\n    [(ngModel)]=\"item[valueAttributeName]\"\r\n    (onDropEvent)=\"onValueDrop(item, $event)\">\r\n  </input-text>\r\n  <button class=\"delete-button\" (click)=\"removeItem(index)\" [matTooltip]=\"removeLabel\" type=\"button\">\r\n    <i class=\"far fa-trash-alt fa-lg\"></i>\r\n  </button>\r\n</div>\r\n<div class=\"key-value-item\" *ngIf=\"!blockNewItem\">\r\n  <input-text\r\n    class=\"input-key\"\r\n    [size]=\"size\"\r\n    [label]=\"keyLabel\"\r\n    [inputOptions]=\"inputOptions\"\r\n    [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\r\n    [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\r\n    (input)=\"onKeyPressedTemporaryKeyFn()\"\r\n    (optionChanged)=\"temporaryItemOptionChanged($event)\"\r\n    [(ngModel)]=\"temporaryItem[this.keyAttributeName]\"\r\n    (onDropEvent)=\"onKeyDropTemporaryItem(temporaryItem, $event)\">\r\n  </input-text>\r\n  <input-text\r\n    class=\"input-value\"\r\n    [size]=\"size\"\r\n    [label]=\"valueLabel\"\r\n    [(ngModel)]=\"temporaryItem[this.valueAttributeName]\"\r\n    (onDropEvent)=\"onValueDrop(temporaryItem, $event)\">\r\n  </input-text>\r\n</div>\r\n\r\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--color-fonts-tertiary);border:none!important;background:none!important}\n"] }]
+            args: [{ selector: 'key-value-input', template: "<div class=\"key-value-item\" *ngFor=\"let item of items; let index = index\">\n  <input-text\n    [componentId]=\"getComponentId('key', index)\"\n    class=\"input-key\"\n    [size]=\"size\"\n    [label]=\"keyLabel\"\n    [inputOptions]=\"inputOptions\"\n    [inputOptionsInitSelected]=\"item.type\"\n    [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n    [disabled]=\"blockEditLabel\"\n    [(ngModel)]=\"item[keyAttributeName]\"\n    (optionChanged)=\"inputOptionChanged($event, index)\"\n    (onDropEvent)=\"onKeyDrop(item, $event)\">\n  </input-text>\n  <input-text\n    class=\"input-value\"\n    [size]=\"size\"\n    [label]=\"valueLabel\"\n    [(ngModel)]=\"item[valueAttributeName]\"\n    (onDropEvent)=\"onValueDrop(item, $event)\">\n  </input-text>\n  <button class=\"delete-button\" (click)=\"removeItem(index)\" [matTooltip]=\"removeLabel\" type=\"button\">\n    <i class=\"far fa-trash-alt fa-lg\"></i>\n  </button>\n</div>\n<div class=\"key-value-item\" *ngIf=\"!blockNewItem\">\n  <input-text\n    class=\"input-key\"\n    [size]=\"size\"\n    [label]=\"keyLabel\"\n    [inputOptions]=\"inputOptions\"\n    [inputOptionsInitSelected]=\"inputOptionsDefaultSelected\"\n    [widthPercentageInputOptions]=\"inputOptionsWidthPercentage\"\n    (input)=\"onKeyPressedTemporaryKeyFn()\"\n    (optionChanged)=\"temporaryItemOptionChanged($event)\"\n    [(ngModel)]=\"temporaryItem[this.keyAttributeName]\"\n    (onDropEvent)=\"onKeyDropTemporaryItem(temporaryItem, $event)\">\n  </input-text>\n  <input-text\n    class=\"input-value\"\n    [size]=\"size\"\n    [label]=\"valueLabel\"\n    [(ngModel)]=\"temporaryItem[this.valueAttributeName]\"\n    (onDropEvent)=\"onValueDrop(temporaryItem, $event)\">\n  </input-text>\n</div>\n\n", styles: [".key-value-item{display:flex;gap:10px;margin-bottom:10px;width:100%}.key-value-item .input-key{width:50%}.key-value-item .input-key ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .input-value{width:calc(50% - 60px)}.key-value-item .input-value ::ng-deep input{padding-left:10px!important;padding-right:10px!important}.key-value-item .delete-button{display:flex;justify-content:center;align-items:center;cursor:pointer;color:var(--color-fonts-tertiary);border:none!important;background:none!important}\n"] }]
         }], propDecorators: { componentId: [{
                 type: Input
             }], items: [{
@@ -2432,7 +2432,7 @@ class AceEditorInputComponent extends ValueAccessorBase {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AceEditorInputComponent),
                 multi: true
-            }], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ace-editor-input\">\r\n  <div class=\"code-header\">\r\n    <label class=\"info-label bold\">\r\n      <div *ngIf=\"title\">{{ title }}</div>\r\n      <small>{{ description }}</small>\r\n    </label>\r\n    <primary-button [size]=\"'slim'\"\r\n                    [label]=\"'Beautify'\"\r\n                    (onClick)=\"beautify()\">\r\n    </primary-button>\r\n  </div>\r\n  <ace-editor\r\n    #editor\r\n    [(text)]=\"value\"\r\n    [options]=\"{enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, keyboardHandler: 'ace/keyboard/vscode'}\"\r\n    dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDropOnEditor(editor, $event, true)\"\r\n    [mode]=\"mode\"\r\n    [autoUpdateContent]=\"true\"\r\n    class=\"ace-editor\"\r\n  ></ace-editor>\r\n</div>\r\n", styles: [".ace-editor-input{width:100%}.ace-editor-input .ace-editor{height:530px;min-height:200px}.ace-editor-input .code-header{justify-content:space-between;display:flex;width:100%;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "component", type: i3$3.PrimaryButtonComponent, selector: "primary-button", inputs: ["label", "btnDisabled", "icon", "suffixIcon", "selected", "btnClass", "size"], outputs: ["onClick"] }, { kind: "component", type: AceEditorComponent, selector: "ace-editor", inputs: ["style", "options", "readOnly", "theme", "mode", "value", "text", "autoUpdateContent", "durationBeforeCallback"], outputs: ["textChanged", "textChange", "beforeDropEvent", "afterDropEvent"] }], encapsulation: i0.ViewEncapsulation.None });
+            }], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ace-editor-input\">\n  <div class=\"code-header\">\n    <label class=\"info-label bold\">\n      <div *ngIf=\"title\">{{ title }}</div>\n      <small>{{ description }}</small>\n    </label>\n    <primary-button [size]=\"'slim'\"\n                    [label]=\"'Beautify'\"\n                    (onClick)=\"beautify()\">\n    </primary-button>\n  </div>\n  <ace-editor\n    #editor\n    [(text)]=\"value\"\n    [options]=\"{enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, keyboardHandler: 'ace/keyboard/vscode'}\"\n    dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDropOnEditor(editor, $event, true)\"\n    [mode]=\"mode\"\n    [autoUpdateContent]=\"true\"\n    class=\"ace-editor\"\n  ></ace-editor>\n</div>\n", styles: [".ace-editor-input{width:100%}.ace-editor-input .ace-editor{height:530px;min-height:200px}.ace-editor-input .code-header{justify-content:space-between;display:flex;width:100%;margin-bottom:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { kind: "component", type: i3$3.PrimaryButtonComponent, selector: "primary-button", inputs: ["label", "btnDisabled", "icon", "suffixIcon", "selected", "btnClass", "size"], outputs: ["onClick"] }, { kind: "component", type: AceEditorComponent, selector: "ace-editor", inputs: ["style", "options", "readOnly", "theme", "mode", "value", "text", "autoUpdateContent", "durationBeforeCallback"], outputs: ["textChanged", "textChange", "beforeDropEvent", "afterDropEvent"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: AceEditorInputComponent, decorators: [{
             type: Component,
@@ -2440,7 +2440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => AceEditorInputComponent),
                             multi: true
-                        }], encapsulation: ViewEncapsulation.None, template: "<div class=\"ace-editor-input\">\r\n  <div class=\"code-header\">\r\n    <label class=\"info-label bold\">\r\n      <div *ngIf=\"title\">{{ title }}</div>\r\n      <small>{{ description }}</small>\r\n    </label>\r\n    <primary-button [size]=\"'slim'\"\r\n                    [label]=\"'Beautify'\"\r\n                    (onClick)=\"beautify()\">\r\n    </primary-button>\r\n  </div>\r\n  <ace-editor\r\n    #editor\r\n    [(text)]=\"value\"\r\n    [options]=\"{enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, keyboardHandler: 'ace/keyboard/vscode'}\"\r\n    dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDropOnEditor(editor, $event, true)\"\r\n    [mode]=\"mode\"\r\n    [autoUpdateContent]=\"true\"\r\n    class=\"ace-editor\"\r\n  ></ace-editor>\r\n</div>\r\n", styles: [".ace-editor-input{width:100%}.ace-editor-input .ace-editor{height:530px;min-height:200px}.ace-editor-input .code-header{justify-content:space-between;display:flex;width:100%;margin-bottom:5px}\n"] }]
+                        }], encapsulation: ViewEncapsulation.None, template: "<div class=\"ace-editor-input\">\n  <div class=\"code-header\">\n    <label class=\"info-label bold\">\n      <div *ngIf=\"title\">{{ title }}</div>\n      <small>{{ description }}</small>\n    </label>\n    <primary-button [size]=\"'slim'\"\n                    [label]=\"'Beautify'\"\n                    (onClick)=\"beautify()\">\n    </primary-button>\n  </div>\n  <ace-editor\n    #editor\n    [(text)]=\"value\"\n    [options]=\"{enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, keyboardHandler: 'ace/keyboard/vscode'}\"\n    dndDropzone [dndAllowExternal]=\"true\" (dndDrop)=\"onDropOnEditor(editor, $event, true)\"\n    [mode]=\"mode\"\n    [autoUpdateContent]=\"true\"\n    class=\"ace-editor\"\n  ></ace-editor>\n</div>\n", styles: [".ace-editor-input{width:100%}.ace-editor-input .ace-editor{height:530px;min-height:200px}.ace-editor-input .code-header{justify-content:space-between;display:flex;width:100%;margin-bottom:5px}\n"] }]
         }], propDecorators: { editor: [{
                 type: ViewChild,
                 args: ['editor']