@apipass/inputs 1.0.152 → 1.0.154

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2022/inputs.module.mjs +10 -4
  2. package/esm2022/multiple-select-interpolation/multiple-select-interpolation.component.mjs +189 -0
  3. package/esm2022/public-api.mjs +2 -1
  4. package/fesm2022/apipass-inputs.mjs +195 -14
  5. package/fesm2022/apipass-inputs.mjs.map +1 -1
  6. package/inputs.module.d.ts +28 -26
  7. package/multiple-select-interpolation/multiple-select-interpolation.component.d.ts +47 -0
  8. package/package.json +1 -1
  9. package/public-api.d.ts +1 -0
package/fesm2022/apipass-inputs.mjs CHANGED
@@ -9,9 +9,9 @@ import * as i1 from '@angular/common';
9
9
  import { CommonModule } from '@angular/common';
10
10
  import * as i3 from '@angular/material/form-field';
11
11
  import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
12
- import * as i4 from '@angular/material/input';
12
+ import * as i5 from '@angular/material/input';
13
13
  import { MatInputModule } from '@angular/material/input';
14
- import * as i5 from '@angular/material/select';
14
+ import * as i5$1 from '@angular/material/select';
15
15
  import { MatSelectModule } from '@angular/material/select';
16
16
  import * as i6 from '@angular/material/core';
17
17
  import { MatNativeDateModule } from '@angular/material/core';
@@ -46,6 +46,8 @@ import * as i9 from 'ngx-mask';
46
46
  import { NgxMaskDirective, NgxMaskPipe, provideNgxMask } from 'ngx-mask';
47
47
  export * from 'ngx-mask';
48
48
  import { MatCardModule } from '@angular/material/card';
49
+ import * as i7$3 from '@angular/material/checkbox';
50
+ import { MatCheckboxModule } from '@angular/material/checkbox';
49
51
  import moment$1 from 'moment';
50
52
 
51
53
  class ValueAccessorBase {
@@ -102,7 +104,7 @@ class SelectEnumComponent extends ValueAccessorBase {
102
104
  provide: NG_VALUE_ACCESSOR,
103
105
  useExisting: forwardRef(() => SelectEnumComponent),
104
106
  multi: true
105
- }], 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 });
107
+ }], 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 });
106
108
  }
107
109
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectEnumComponent, decorators: [{
108
110
  type: Component,
@@ -202,7 +204,7 @@ class InputTextComponent extends ValueAccessorBase {
202
204
  provide: NG_VALUE_ACCESSOR,
203
205
  useExisting: forwardRef(() => InputTextComponent),
204
206
  multi: true
205
- }], 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 });
207
+ }], 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 });
206
208
  }
207
209
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputTextComponent, decorators: [{
208
210
  type: Component,
@@ -663,7 +665,7 @@ class MatSelectInfiniteScrollDirective {
663
665
  getSelectItemHeightPx() {
664
666
  return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
665
667
  }
666
- 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 });
668
+ 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 });
667
669
  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 });
668
670
  }
669
671
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
@@ -671,7 +673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
671
673
  args: [{
672
674
  selector: '[msInfiniteScroll]'
673
675
  }]
674
- }], ctorParameters: function () { return [{ type: i5.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
676
+ }], ctorParameters: function () { return [{ type: i5$1.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
675
677
  type: Input
676
678
  }], debounceTime: [{
677
679
  type: Input
@@ -893,7 +895,7 @@ class CustomSelectComponent {
893
895
  provide: NG_VALUE_ACCESSOR,
894
896
  useExisting: forwardRef(() => CustomSelectComponent),
895
897
  multi: true
896
- }], 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" }] });
898
+ }], 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" }] });
897
899
  }
898
900
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CustomSelectComponent, decorators: [{
899
901
  type: Component,
@@ -1445,7 +1447,7 @@ class InputNumberComponent extends ValueAccessorBase {
1445
1447
  provide: NG_VALUE_ACCESSOR,
1446
1448
  useExisting: forwardRef(() => InputNumberComponent),
1447
1449
  multi: true
1448
- }], 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 });
1450
+ }], 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 });
1449
1451
  }
1450
1452
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputNumberComponent, decorators: [{
1451
1453
  type: Component,
@@ -1681,7 +1683,7 @@ class SelectInterpolationComponent {
1681
1683
  provide: NG_VALUE_ACCESSOR,
1682
1684
  useExisting: forwardRef(() => SelectInterpolationComponent),
1683
1685
  multi: true
1684
- }], 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" }] });
1686
+ }], 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" }] });
1685
1687
  }
1686
1688
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectInterpolationComponent, decorators: [{
1687
1689
  type: Component,
@@ -2104,7 +2106,7 @@ class InputDateTimeIntervalComponent {
2104
2106
  provide: NG_VALUE_ACCESSOR,
2105
2107
  useExisting: forwardRef(() => InputDateTimeIntervalComponent),
2106
2108
  multi: true
2107
- }], 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 });
2109
+ }], 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 });
2108
2110
  }
2109
2111
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputDateTimeIntervalComponent, decorators: [{
2110
2112
  type: Component,
@@ -2282,6 +2284,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
2282
2284
  type: Output
2283
2285
  }] } });
2284
2286
 
2287
+ class MultipleSelectInterpolationComponent {
2288
+ sso;
2289
+ innerValue = [];
2290
+ edited = false;
2291
+ scrollStrategy;
2292
+ _triggerRect;
2293
+ selectedItems = [];
2294
+ selectedItemLabels = '';
2295
+ searchText = '';
2296
+ opened = false;
2297
+ disabled = false;
2298
+ items = [];
2299
+ placeHolder = 'Select';
2300
+ findPlaceHolder = 'Find item';
2301
+ onSelect = new EventEmitter();
2302
+ trigger;
2303
+ input;
2304
+ constructor(sso) {
2305
+ this.sso = sso;
2306
+ this.scrollStrategy = this.sso.block();
2307
+ }
2308
+ tabindex = '0';
2309
+ onBlur(target) {
2310
+ if (this.selectedItems.length > 0) {
2311
+ if (this.edited) {
2312
+ this.writeValue(this.selectedItems.map(item => item.id));
2313
+ this.selectedItemLabels = this.selectedItems?.map(item => item.text).join(', ');
2314
+ this.onSelect.next(this.selectedItems);
2315
+ }
2316
+ }
2317
+ else {
2318
+ this.writeValue([]);
2319
+ this.onSelect.next([]);
2320
+ }
2321
+ if (target?.relatedTarget?.classList.contains('search-input-item')) {
2322
+ return;
2323
+ }
2324
+ this.setTriggerRect();
2325
+ }
2326
+ ngAfterViewInit() {
2327
+ setTimeout(() => {
2328
+ this.setInitialState();
2329
+ this.setTriggerRect();
2330
+ }, 300);
2331
+ }
2332
+ setInitialState() {
2333
+ setTimeout(() => {
2334
+ if (this.value && this.items) {
2335
+ this.selectedItems = this.items.filter(item => this.value.includes(item.id));
2336
+ this.selectedItemLabels = this.selectedItems.map(item => item.text).join(', ');
2337
+ }
2338
+ });
2339
+ }
2340
+ setTriggerRect() {
2341
+ setTimeout(() => {
2342
+ this._triggerRect = this.trigger?.nativeElement.getBoundingClientRect();
2343
+ });
2344
+ }
2345
+ toggleSelectItem(event, item) {
2346
+ event.stopPropagation();
2347
+ const index = this.selectedItems.findIndex(selectedItem => selectedItem.id === item.id);
2348
+ if (index === -1) {
2349
+ this.selectedItems.push(item);
2350
+ }
2351
+ else {
2352
+ this.selectedItems.splice(index, 1);
2353
+ }
2354
+ this.selectedItemLabels = this.selectedItems.map(selectedItem => selectedItem.text).join(', ');
2355
+ this.edited = true;
2356
+ this.writeValue(this.selectedItems.map(selectedItem => selectedItem.id));
2357
+ this.onSelect.next(this.selectedItems);
2358
+ }
2359
+ isSelected(item) {
2360
+ return this.selectedItems.some(selectedItem => selectedItem.id === item.id);
2361
+ }
2362
+ keyPress() {
2363
+ this.setTriggerRect();
2364
+ this.opened = false;
2365
+ this.edited = true;
2366
+ this.searchText = '';
2367
+ }
2368
+ clicked($event) {
2369
+ this.setTriggerRect();
2370
+ this.open($event);
2371
+ this.searchText = '';
2372
+ }
2373
+ open($event) {
2374
+ this.opened = true;
2375
+ $event?.stopPropagation();
2376
+ }
2377
+ close($event) {
2378
+ this.opened = false;
2379
+ $event?.stopPropagation();
2380
+ }
2381
+ onTouchedCallback = () => { };
2382
+ onChangeCallback = () => { };
2383
+ get value() {
2384
+ return this.innerValue;
2385
+ }
2386
+ set value(value) {
2387
+ this.innerValue = value;
2388
+ this.onChangeCallback(value);
2389
+ }
2390
+ writeValue(value) {
2391
+ if (value !== this.value) {
2392
+ this.value = value;
2393
+ }
2394
+ }
2395
+ registerOnChange(fn) {
2396
+ this.onChangeCallback = fn;
2397
+ }
2398
+ registerOnTouched(fn) {
2399
+ this.onTouchedCallback = fn;
2400
+ }
2401
+ setDisabledState(isDisabled) {
2402
+ this.disabled = isDisabled;
2403
+ }
2404
+ arrowClick(event) {
2405
+ event.stopPropagation();
2406
+ this.setTriggerRect();
2407
+ if (!this.opened) {
2408
+ this.open(event);
2409
+ this.searchText = '';
2410
+ this.input?.nativeElement.focus();
2411
+ }
2412
+ }
2413
+ onDrop(event) {
2414
+ this.searchText = '';
2415
+ this.edited = true;
2416
+ const droppedItem = new CustomSelectItem(`{{${event.data}}}`, `{{${event.data}}}`);
2417
+ const index = this.selectedItems.findIndex(item => item.id === droppedItem.id);
2418
+ if (index === -1) {
2419
+ this.selectedItems.push(droppedItem);
2420
+ }
2421
+ this.selectedItemLabels = this.selectedItems.map(item => item.text).join(', ');
2422
+ this.onBlur(undefined);
2423
+ }
2424
+ 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 });
2425
+ 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: [{
2426
+ provide: NG_VALUE_ACCESSOR,
2427
+ useExisting: forwardRef(() => MultipleSelectInterpolationComponent),
2428
+ multi: true
2429
+ }], 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" }] });
2430
+ }
2431
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultipleSelectInterpolationComponent, decorators: [{
2432
+ type: Component,
2433
+ args: [{ selector: 'multiple-select-interpolation', providers: [{
2434
+ provide: NG_VALUE_ACCESSOR,
2435
+ useExisting: forwardRef(() => MultipleSelectInterpolationComponent),
2436
+ multi: true
2437
+ }], 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"] }]
2438
+ }], ctorParameters: function () { return [{ type: i1$1.ScrollStrategyOptions }]; }, propDecorators: { disabled: [{
2439
+ type: Input
2440
+ }], items: [{
2441
+ type: Input
2442
+ }], placeHolder: [{
2443
+ type: Input
2444
+ }], findPlaceHolder: [{
2445
+ type: Input
2446
+ }], onSelect: [{
2447
+ type: Output
2448
+ }], trigger: [{
2449
+ type: ViewChild,
2450
+ args: ['trigger']
2451
+ }], input: [{
2452
+ type: ViewChild,
2453
+ args: ['input', { read: ElementRef }]
2454
+ }], tabindex: [{
2455
+ type: HostBinding,
2456
+ args: ['attr.tabindex']
2457
+ }], onBlur: [{
2458
+ type: HostListener,
2459
+ args: ['blur', ['$event.target']]
2460
+ }] } });
2461
+
2285
2462
  class InputsModule {
2286
2463
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2287
2464
  static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, declarations: [MatSelectInfiniteScrollDirective,
@@ -2295,6 +2472,7 @@ class InputsModule {
2295
2472
  InputFileComponent,
2296
2473
  CustomSelectComponent,
2297
2474
  SelectInterpolationComponent,
2475
+ MultipleSelectInterpolationComponent,
2298
2476
  FieldComponent,
2299
2477
  AceEditorComponent,
2300
2478
  AceEditorDirective,
@@ -2320,7 +2498,7 @@ class InputsModule {
2320
2498
  NgScrollbarModule,
2321
2499
  NgxMaskDirective,
2322
2500
  NgxMaskPipe,
2323
- FormsModule], exports: [SelectBoxComponent,
2501
+ MatCheckboxModule], exports: [SelectBoxComponent,
2324
2502
  SelectEnumComponent,
2325
2503
  InputTextComponent,
2326
2504
  InputNumberComponent,
@@ -2330,6 +2508,7 @@ class InputsModule {
2330
2508
  InputFileComponent,
2331
2509
  CustomSelectComponent,
2332
2510
  SelectInterpolationComponent,
2511
+ MultipleSelectInterpolationComponent,
2333
2512
  FieldComponent,
2334
2513
  AceEditorComponent,
2335
2514
  AceEditorDirective,
@@ -2369,7 +2548,7 @@ class InputsModule {
2369
2548
  MatDatepickerModule,
2370
2549
  MatNativeDateModule,
2371
2550
  NgScrollbarModule,
2372
- FormsModule] });
2551
+ MatCheckboxModule] });
2373
2552
  }
2374
2553
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, decorators: [{
2375
2554
  type: NgModule,
@@ -2395,7 +2574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
2395
2574
  NgScrollbarModule,
2396
2575
  NgxMaskDirective,
2397
2576
  NgxMaskPipe,
2398
- FormsModule
2577
+ MatCheckboxModule
2399
2578
  ],
2400
2579
  declarations: [
2401
2580
  MatSelectInfiniteScrollDirective,
@@ -2409,6 +2588,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
2409
2588
  InputFileComponent,
2410
2589
  CustomSelectComponent,
2411
2590
  SelectInterpolationComponent,
2591
+ MultipleSelectInterpolationComponent,
2412
2592
  FieldComponent,
2413
2593
  AceEditorComponent,
2414
2594
  AceEditorDirective,
@@ -2427,6 +2607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
2427
2607
  InputFileComponent,
2428
2608
  CustomSelectComponent,
2429
2609
  SelectInterpolationComponent,
2610
+ MultipleSelectInterpolationComponent,
2430
2611
  FieldComponent,
2431
2612
  AceEditorComponent,
2432
2613
  AceEditorDirective,
@@ -2887,5 +3068,5 @@ class TimeIntervalValueBuilder {
2887
3068
  * Generated bundle index. Do not edit.
2888
3069
  */
2889
3070
 
2890
- 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 };
3071
+ 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 };
2891
3072
  //# sourceMappingURL=apipass-inputs.mjs.map