@apipass/inputs 1.0.154 → 1.0.155

package/fesm2022/apipass-inputs.mjs

@@ -9,9 +9,9 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/form-field';
 import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i5$1 from '@angular/material/select';
+import * as i5 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i6 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
@@ -46,7 +46,6 @@ import * as i9 from 'ngx-mask';
 import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
 export * from 'ngx-mask';
 import { MatCardModule } from '@angular/material/card';
-import * as i7$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import moment$1 from 'moment';
 
@@ -104,7 +103,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\" >\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: i5.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$1.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,
@@ -204,7 +203,7 @@ class InputTextComponent extends ValueAccessorBase {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputTextComponent),
                 multi: true
-            }], 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: i5.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$1.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,
@@ -665,7 +664,7 @@ class MatSelectInfiniteScrollDirective {
     getSelectItemHeightPx() {
         return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i5$1.MatSelect }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MatSelectInfiniteScrollDirective, deps: [{ token: i5.MatSelect }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.2", type: MatSelectInfiniteScrollDirective, selector: "[msInfiniteScroll]", inputs: { threshold: "threshold", debounceTime: "debounceTime", complete: "complete" }, outputs: { infiniteScroll: "infiniteScroll" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
@@ -673,7 +672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             args: [{
                     selector: '[msInfiniteScroll]'
                 }]
-        }], ctorParameters: function () { return [{ type: i5$1.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
+        }], ctorParameters: function () { return [{ type: i5.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
                 type: Input
             }], debounceTime: [{
                 type: Input
@@ -895,7 +894,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>\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: i5.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,
@@ -1447,7 +1446,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\">\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: i5.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,
@@ -1683,7 +1682,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>\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: i5.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,
@@ -2106,7 +2105,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\">\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: i5.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,
@@ -2284,181 +2283,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Output
             }] } });
 
-class MultipleSelectInterpolationComponent {
-    sso;
-    innerValue = [];
-    edited = false;
-    scrollStrategy;
-    _triggerRect;
-    selectedItems = [];
-    selectedItemLabels = '';
-    searchText = '';
-    opened = false;
-    disabled = false;
-    items = [];
-    placeHolder = 'Select';
-    findPlaceHolder = 'Find item';
-    onSelect = new EventEmitter();
-    trigger;
-    input;
-    constructor(sso) {
-        this.sso = sso;
-        this.scrollStrategy = this.sso.block();
-    }
-    tabindex = '0';
-    onBlur(target) {
-        if (this.selectedItems.length > 0) {
-            if (this.edited) {
-                this.writeValue(this.selectedItems.map(item => item.id));
-                this.selectedItemLabels = this.selectedItems?.map(item => item.text).join(', ');
-                this.onSelect.next(this.selectedItems);
-            }
-        }
-        else {
-            this.writeValue([]);
-            this.onSelect.next([]);
-        }
-        if (target?.relatedTarget?.classList.contains('search-input-item')) {
-            return;
-        }
-        this.setTriggerRect();
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.setInitialState();
-            this.setTriggerRect();
-        }, 300);
-    }
-    setInitialState() {
-        setTimeout(() => {
-            if (this.value && this.items) {
-                this.selectedItems = this.items.filter(item => this.value.includes(item.id));
-                this.selectedItemLabels = this.selectedItems.map(item => item.text).join(', ');
-            }
-        });
-    }
-    setTriggerRect() {
-        setTimeout(() => {
-            this._triggerRect = this.trigger?.nativeElement.getBoundingClientRect();
-        });
-    }
-    toggleSelectItem(event, item) {
-        event.stopPropagation();
-        const index = this.selectedItems.findIndex(selectedItem => selectedItem.id === item.id);
-        if (index === -1) {
-            this.selectedItems.push(item);
-        }
-        else {
-            this.selectedItems.splice(index, 1);
-        }
-        this.selectedItemLabels = this.selectedItems.map(selectedItem => selectedItem.text).join(', ');
-        this.edited = true;
-        this.writeValue(this.selectedItems.map(selectedItem => selectedItem.id));
-        this.onSelect.next(this.selectedItems);
-    }
-    isSelected(item) {
-        return this.selectedItems.some(selectedItem => selectedItem.id === item.id);
-    }
-    keyPress() {
-        this.setTriggerRect();
-        this.opened = false;
-        this.edited = true;
-        this.searchText = '';
-    }
-    clicked($event) {
-        this.setTriggerRect();
-        this.open($event);
-        this.searchText = '';
-    }
-    open($event) {
-        this.opened = true;
-        $event?.stopPropagation();
-    }
-    close($event) {
-        this.opened = false;
-        $event?.stopPropagation();
-    }
-    onTouchedCallback = () => { };
-    onChangeCallback = () => { };
-    get value() {
-        return this.innerValue;
-    }
-    set value(value) {
-        this.innerValue = value;
-        this.onChangeCallback(value);
-    }
-    writeValue(value) {
-        if (value !== this.value) {
-            this.value = value;
-        }
-    }
-    registerOnChange(fn) {
-        this.onChangeCallback = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    arrowClick(event) {
-        event.stopPropagation();
-        this.setTriggerRect();
-        if (!this.opened) {
-            this.open(event);
-            this.searchText = '';
-            this.input?.nativeElement.focus();
-        }
-    }
-    onDrop(event) {
-        this.searchText = '';
-        this.edited = true;
-        const droppedItem = new CustomSelectItem(`{{${event.data}}}`, `{{${event.data}}}`);
-        const index = this.selectedItems.findIndex(item => item.id === droppedItem.id);
-        if (index === -1) {
-            this.selectedItems.push(droppedItem);
-        }
-        this.selectedItemLabels = this.selectedItems.map(item => item.text).join(', ');
-        this.onBlur(undefined);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultipleSelectInterpolationComponent, deps: [{ token: i1$1.ScrollStrategyOptions }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: MultipleSelectInterpolationComponent, selector: "multiple-select-interpolation", inputs: { disabled: "disabled", items: "items", placeHolder: "placeHolder", findPlaceHolder: "findPlaceHolder" }, outputs: { onSelect: "onSelect" }, host: { listeners: { "blur": "onBlur($event.target)" }, properties: { "attr.tabindex": "this.tabindex" } }, providers: [{
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => MultipleSelectInterpolationComponent),
-                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>\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           [value]=\"selectedItemLabels\"\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  <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      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          [ngClass]=\"{'selected': isSelected(i)}\"\n          (click)=\"toggleSelectItem($event, i)\">\n        <mat-checkbox [color]=\"'primary'\" [checked]=\"isSelected(i)\" (click)=\"$event.stopPropagation(); toggleSelectItem($event, i)\">\n          {{i.text}}\n        </mat-checkbox>\n      </li>\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{display:flex;align-items:center;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-checkbox,.custom-select-input .ul-ac li .mat-checkbox,.custom-select-component .ul-ac li .mat-checkbox{margin-right:8px}::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 .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: i5.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: "component", type: i7$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i7.SelectFilterPipe, name: "selectFilter" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultipleSelectInterpolationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'multiple-select-interpolation', providers: [{
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => MultipleSelectInterpolationComponent),
-                            multi: true
-                        }], 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           [value]=\"selectedItemLabels\"\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  <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      <li class=\"clickable\" *ngFor=\"let i of items | selectFilter:searchText:'text'\"\n          [ngClass]=\"{'selected': isSelected(i)}\"\n          (click)=\"toggleSelectItem($event, i)\">\n        <mat-checkbox [color]=\"'primary'\" [checked]=\"isSelected(i)\" (click)=\"$event.stopPropagation(); toggleSelectItem($event, i)\">\n          {{i.text}}\n        </mat-checkbox>\n      </li>\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{display:flex;align-items:center;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-checkbox,.custom-select-input .ul-ac li .mat-checkbox,.custom-select-component .ul-ac li .mat-checkbox{margin-right:8px}::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 .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: [{
-                type: Input
-            }], placeHolder: [{
-                type: Input
-            }], findPlaceHolder: [{
-                type: Input
-            }], onSelect: [{
-                type: Output
-            }], trigger: [{
-                type: ViewChild,
-                args: ['trigger']
-            }], input: [{
-                type: ViewChild,
-                args: ['input', { read: ElementRef }]
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur', ['$event.target']]
-            }] } });
-
 class InputsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, declarations: [MatSelectInfiniteScrollDirective,
@@ -2472,7 +2296,6 @@ class InputsModule {
             InputFileComponent,
             CustomSelectComponent,
             SelectInterpolationComponent,
-            MultipleSelectInterpolationComponent,
             FieldComponent,
             AceEditorComponent,
             AceEditorDirective,
@@ -2508,7 +2331,6 @@ class InputsModule {
             InputFileComponent,
             CustomSelectComponent,
             SelectInterpolationComponent,
-            MultipleSelectInterpolationComponent,
             FieldComponent,
             AceEditorComponent,
             AceEditorDirective,
@@ -2588,7 +2410,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         InputFileComponent,
                         CustomSelectComponent,
                         SelectInterpolationComponent,
-                        MultipleSelectInterpolationComponent,
                         FieldComponent,
                         AceEditorComponent,
                         AceEditorDirective,
@@ -2607,7 +2428,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         InputFileComponent,
                         CustomSelectComponent,
                         SelectInterpolationComponent,
-                        MultipleSelectInterpolationComponent,
                         FieldComponent,
                         AceEditorComponent,
                         AceEditorDirective,
@@ -3068,5 +2888,5 @@ class TimeIntervalValueBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { AceEditorComponent, AceEditorDirective, CurrentMonthInterval, CustomSelectComponent, CustomSelectItem, DebouceInputDirective, DefaultIntervalsBuilder, FieldComponent, InputAvatarComponent, InputBooleanComponent, InputDateTimeIntervalComponent, InputFileComponent, InputImageComponent, InputNumberComponent, InputTextComponent, InputsModule, KeyValueInputComponent, LastFiveMinutesInterval, LastHourInterval, LastMinuteInterval, LastMonthInterval, LastOneWeekInterval, LastQuarterInterval, LastTenMinutesInterval, LastThirtyMinutesInterval, LastThreeHoursInterval, LastTwoHoursInterval, LastYearInterval, MultipleSelectInterpolationComponent, SelectBoxComponent, SelectEnumComponent, SelectInterpolationComponent, ThisQuarterInterval, ThisWeekInterval, ThisYearInterval, TimeIntervalValue, TimeIntervalValueBuilder, TimeIntervalsBuilder, TodayInterval, ValueAccessorBase, YesterdayInterval };
+export { AceEditorComponent, AceEditorDirective, CurrentMonthInterval, CustomSelectComponent, CustomSelectItem, DebouceInputDirective, DefaultIntervalsBuilder, FieldComponent, InputAvatarComponent, InputBooleanComponent, InputDateTimeIntervalComponent, InputFileComponent, InputImageComponent, InputNumberComponent, InputTextComponent, InputsModule, KeyValueInputComponent, LastFiveMinutesInterval, LastHourInterval, LastMinuteInterval, LastMonthInterval, LastOneWeekInterval, LastQuarterInterval, LastTenMinutesInterval, LastThirtyMinutesInterval, LastThreeHoursInterval, LastTwoHoursInterval, LastYearInterval, SelectBoxComponent, SelectEnumComponent, SelectInterpolationComponent, ThisQuarterInterval, ThisWeekInterval, ThisYearInterval, TimeIntervalValue, TimeIntervalValueBuilder, TimeIntervalsBuilder, TodayInterval, ValueAccessorBase, YesterdayInterval };
 //# sourceMappingURL=apipass-inputs.mjs.map