@apipass/inputs 1.0.152 → 1.0.153

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 +49 -5
  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 +234 -15
  5. package/fesm2022/apipass-inputs.mjs.map +1 -1
  6. package/inputs.module.d.ts +29 -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
@@ -6,12 +6,12 @@ import { forwardRef, Component, ViewEncapsulation, Input, EventEmitter, Output,
6
6
  import * as i2 from '@angular/forms';
7
7
  import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
8
8
  import * as i1 from '@angular/common';
9
- import { CommonModule } from '@angular/common';
9
+ import { CommonModule, NgForOf } 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,9 @@ 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';
51
+ import { CdkDropList } from '@angular/cdk/drag-drop';
49
52
  import moment$1 from 'moment';
50
53
 
51
54
  class ValueAccessorBase {
@@ -102,7 +105,7 @@ class SelectEnumComponent extends ValueAccessorBase {
102
105
  provide: NG_VALUE_ACCESSOR,
103
106
  useExisting: forwardRef(() => SelectEnumComponent),
104
107
  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 });
108
+ }], 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
109
  }
107
110
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectEnumComponent, decorators: [{
108
111
  type: Component,
@@ -202,7 +205,7 @@ class InputTextComponent extends ValueAccessorBase {
202
205
  provide: NG_VALUE_ACCESSOR,
203
206
  useExisting: forwardRef(() => InputTextComponent),
204
207
  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 });
208
+ }], 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
209
  }
207
210
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputTextComponent, decorators: [{
208
211
  type: Component,
@@ -663,7 +666,7 @@ class MatSelectInfiniteScrollDirective {
663
666
  getSelectItemHeightPx() {
664
667
  return parseFloat(getComputedStyle(this.panel).fontSize) * SELECT_ITEM_HEIGHT_EM;
665
668
  }
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 });
669
+ 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
670
  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
671
  }
669
672
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MatSelectInfiniteScrollDirective, decorators: [{
@@ -671,7 +674,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
671
674
  args: [{
672
675
  selector: '[msInfiniteScroll]'
673
676
  }]
674
- }], ctorParameters: function () { return [{ type: i5.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
677
+ }], ctorParameters: function () { return [{ type: i5$1.MatSelect }, { type: i0.NgZone }]; }, propDecorators: { threshold: [{
675
678
  type: Input
676
679
  }], debounceTime: [{
677
680
  type: Input
@@ -893,7 +896,7 @@ class CustomSelectComponent {
893
896
  provide: NG_VALUE_ACCESSOR,
894
897
  useExisting: forwardRef(() => CustomSelectComponent),
895
898
  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" }] });
899
+ }], 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
900
  }
898
901
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: CustomSelectComponent, decorators: [{
899
902
  type: Component,
@@ -1445,7 +1448,7 @@ class InputNumberComponent extends ValueAccessorBase {
1445
1448
  provide: NG_VALUE_ACCESSOR,
1446
1449
  useExisting: forwardRef(() => InputNumberComponent),
1447
1450
  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 });
1451
+ }], 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
1452
  }
1450
1453
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputNumberComponent, decorators: [{
1451
1454
  type: Component,
@@ -1681,7 +1684,7 @@ class SelectInterpolationComponent {
1681
1684
  provide: NG_VALUE_ACCESSOR,
1682
1685
  useExisting: forwardRef(() => SelectInterpolationComponent),
1683
1686
  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" }] });
1687
+ }], 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
1688
  }
1686
1689
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: SelectInterpolationComponent, decorators: [{
1687
1690
  type: Component,
@@ -2104,7 +2107,7 @@ class InputDateTimeIntervalComponent {
2104
2107
  provide: NG_VALUE_ACCESSOR,
2105
2108
  useExisting: forwardRef(() => InputDateTimeIntervalComponent),
2106
2109
  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 });
2110
+ }], 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
2111
  }
2109
2112
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputDateTimeIntervalComponent, decorators: [{
2110
2113
  type: Component,
@@ -2282,6 +2285,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
2282
2285
  type: Output
2283
2286
  }] } });
2284
2287
 
2288
+ class MultipleSelectInterpolationComponent {
2289
+ sso;
2290
+ innerValue = [];
2291
+ edited = false;
2292
+ scrollStrategy;
2293
+ _triggerRect;
2294
+ selectedItems = [];
2295
+ selectedItemLabels = '';
2296
+ searchText = '';
2297
+ opened = false;
2298
+ disabled = false;
2299
+ items = [];
2300
+ placeHolder = 'Select';
2301
+ findPlaceHolder = 'Find item';
2302
+ onSelect = new EventEmitter();
2303
+ trigger;
2304
+ input;
2305
+ constructor(sso) {
2306
+ this.sso = sso;
2307
+ this.scrollStrategy = this.sso.block();
2308
+ }
2309
+ tabindex = '0';
2310
+ onBlur(target) {
2311
+ if (this.selectedItems.length > 0) {
2312
+ if (this.edited) {
2313
+ this.writeValue(this.selectedItems.map(item => item.id));
2314
+ this.selectedItemLabels = this.selectedItems.map(item => item.text).join(', ');
2315
+ this.onSelect.next(this.selectedItems);
2316
+ }
2317
+ }
2318
+ else {
2319
+ this.writeValue([]);
2320
+ this.onSelect.next([]);
2321
+ }
2322
+ if (target?.relatedTarget?.classList.contains('search-input-item')) {
2323
+ return;
2324
+ }
2325
+ this.setTriggerRect();
2326
+ }
2327
+ ngAfterViewInit() {
2328
+ setTimeout(() => {
2329
+ this.setInitialState();
2330
+ this.setTriggerRect();
2331
+ }, 300);
2332
+ }
2333
+ setInitialState() {
2334
+ setTimeout(() => {
2335
+ if (this.value && this.items) {
2336
+ this.selectedItems = this.items.filter(item => this.value.includes(item.id));
2337
+ this.selectedItemLabels = this.selectedItems.map(item => item.text).join(', ');
2338
+ }
2339
+ });
2340
+ }
2341
+ setTriggerRect() {
2342
+ setTimeout(() => {
2343
+ this._triggerRect = this.trigger?.nativeElement.getBoundingClientRect();
2344
+ });
2345
+ }
2346
+ toggleSelectItem(event, item) {
2347
+ event.stopPropagation();
2348
+ const index = this.selectedItems.findIndex(selectedItem => selectedItem.id === item.id);
2349
+ if (index === -1) {
2350
+ this.selectedItems.push(item);
2351
+ }
2352
+ else {
2353
+ this.selectedItems.splice(index, 1);
2354
+ }
2355
+ this.selectedItemLabels = this.selectedItems.map(selectedItem => selectedItem.text).join(', ');
2356
+ this.edited = true;
2357
+ this.writeValue(this.selectedItems.map(selectedItem => selectedItem.id));
2358
+ this.onSelect.next(this.selectedItems);
2359
+ }
2360
+ isSelected(item) {
2361
+ return this.selectedItems.some(selectedItem => selectedItem.id === item.id);
2362
+ }
2363
+ keyPress() {
2364
+ this.setTriggerRect();
2365
+ this.opened = false;
2366
+ this.edited = true;
2367
+ this.searchText = '';
2368
+ }
2369
+ clicked($event) {
2370
+ this.setTriggerRect();
2371
+ this.open($event);
2372
+ this.searchText = '';
2373
+ }
2374
+ open($event) {
2375
+ this.opened = true;
2376
+ $event?.stopPropagation();
2377
+ }
2378
+ close($event) {
2379
+ this.opened = false;
2380
+ $event?.stopPropagation();
2381
+ }
2382
+ onTouchedCallback = () => { };
2383
+ onChangeCallback = () => { };
2384
+ get value() {
2385
+ return this.innerValue;
2386
+ }
2387
+ set value(value) {
2388
+ this.innerValue = value;
2389
+ this.onChangeCallback(value);
2390
+ }
2391
+ writeValue(value) {
2392
+ if (value !== this.value) {
2393
+ this.value = value;
2394
+ }
2395
+ }
2396
+ registerOnChange(fn) {
2397
+ this.onChangeCallback = fn;
2398
+ }
2399
+ registerOnTouched(fn) {
2400
+ this.onTouchedCallback = fn;
2401
+ }
2402
+ setDisabledState(isDisabled) {
2403
+ this.disabled = isDisabled;
2404
+ }
2405
+ arrowClick(event) {
2406
+ event.stopPropagation();
2407
+ this.setTriggerRect();
2408
+ if (!this.opened) {
2409
+ this.open(event);
2410
+ this.searchText = '';
2411
+ this.input?.nativeElement.focus();
2412
+ }
2413
+ }
2414
+ onDrop(event) {
2415
+ this.searchText = '';
2416
+ this.edited = true;
2417
+ const droppedItem = new CustomSelectItem(`{{${event.data}}}`, `{{${event.data}}}`);
2418
+ const index = this.selectedItems.findIndex(item => item.id === droppedItem.id);
2419
+ if (index === -1) {
2420
+ this.selectedItems.push(droppedItem);
2421
+ }
2422
+ this.selectedItemLabels = this.selectedItems.map(item => item.text).join(', ');
2423
+ this.onBlur(undefined);
2424
+ }
2425
+ 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 });
2426
+ 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: [{
2427
+ provide: NG_VALUE_ACCESSOR,
2428
+ useExisting: forwardRef(() => MultipleSelectInterpolationComponent),
2429
+ multi: true
2430
+ }], 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 [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" }] });
2431
+ }
2432
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: MultipleSelectInterpolationComponent, decorators: [{
2433
+ type: Component,
2434
+ args: [{ selector: 'multiple-select-interpolation', providers: [{
2435
+ provide: NG_VALUE_ACCESSOR,
2436
+ useExisting: forwardRef(() => MultipleSelectInterpolationComponent),
2437
+ multi: true
2438
+ }], 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 [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"] }]
2439
+ }], ctorParameters: function () { return [{ type: i1$1.ScrollStrategyOptions }]; }, propDecorators: { disabled: [{
2440
+ type: Input
2441
+ }], items: [{
2442
+ type: Input
2443
+ }], placeHolder: [{
2444
+ type: Input
2445
+ }], findPlaceHolder: [{
2446
+ type: Input
2447
+ }], onSelect: [{
2448
+ type: Output
2449
+ }], trigger: [{
2450
+ type: ViewChild,
2451
+ args: ['trigger']
2452
+ }], input: [{
2453
+ type: ViewChild,
2454
+ args: ['input', { read: ElementRef }]
2455
+ }], tabindex: [{
2456
+ type: HostBinding,
2457
+ args: ['attr.tabindex']
2458
+ }], onBlur: [{
2459
+ type: HostListener,
2460
+ args: ['blur', ['$event.target']]
2461
+ }] } });
2462
+
2285
2463
  class InputsModule {
2286
2464
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
2287
2465
  static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, declarations: [MatSelectInfiniteScrollDirective,
@@ -2295,6 +2473,7 @@ class InputsModule {
2295
2473
  InputFileComponent,
2296
2474
  CustomSelectComponent,
2297
2475
  SelectInterpolationComponent,
2476
+ MultipleSelectInterpolationComponent,
2298
2477
  FieldComponent,
2299
2478
  AceEditorComponent,
2300
2479
  AceEditorDirective,
@@ -2320,7 +2499,21 @@ class InputsModule {
2320
2499
  NgScrollbarModule,
2321
2500
  NgxMaskDirective,
2322
2501
  NgxMaskPipe,
2323
- FormsModule], exports: [SelectBoxComponent,
2502
+ FormsModule,
2503
+ NgForOf,
2504
+ NgForOf,
2505
+ MatSelectModule,
2506
+ FormsModule,
2507
+ CdkDropList,
2508
+ NgForOf,
2509
+ FormsModule,
2510
+ MatCheckboxModule,
2511
+ NgForOf,
2512
+ FormsModule,
2513
+ MatSelectModule,
2514
+ MatInputModule,
2515
+ MatInputModule,
2516
+ MatInputModule], exports: [SelectBoxComponent,
2324
2517
  SelectEnumComponent,
2325
2518
  InputTextComponent,
2326
2519
  InputNumberComponent,
@@ -2330,6 +2523,7 @@ class InputsModule {
2330
2523
  InputFileComponent,
2331
2524
  CustomSelectComponent,
2332
2525
  SelectInterpolationComponent,
2526
+ MultipleSelectInterpolationComponent,
2333
2527
  FieldComponent,
2334
2528
  AceEditorComponent,
2335
2529
  AceEditorDirective,
@@ -2369,7 +2563,16 @@ class InputsModule {
2369
2563
  MatDatepickerModule,
2370
2564
  MatNativeDateModule,
2371
2565
  NgScrollbarModule,
2372
- FormsModule] });
2566
+ FormsModule,
2567
+ MatSelectModule,
2568
+ FormsModule,
2569
+ FormsModule,
2570
+ MatCheckboxModule,
2571
+ FormsModule,
2572
+ MatSelectModule,
2573
+ MatInputModule,
2574
+ MatInputModule,
2575
+ MatInputModule] });
2373
2576
  }
2374
2577
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputsModule, decorators: [{
2375
2578
  type: NgModule,
@@ -2395,7 +2598,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
2395
2598
  NgScrollbarModule,
2396
2599
  NgxMaskDirective,
2397
2600
  NgxMaskPipe,
2398
- FormsModule
2601
+ FormsModule,
2602
+ NgForOf,
2603
+ NgForOf,
2604
+ MatSelectModule,
2605
+ FormsModule,
2606
+ CdkDropList,
2607
+ NgForOf,
2608
+ FormsModule,
2609
+ MatCheckboxModule,
2610
+ NgForOf,
2611
+ FormsModule,
2612
+ MatSelectModule,
2613
+ MatInputModule,
2614
+ MatInputModule,
2615
+ MatInputModule
2399
2616
  ],
2400
2617
  declarations: [
2401
2618
  MatSelectInfiniteScrollDirective,
@@ -2409,6 +2626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
2409
2626
  InputFileComponent,
2410
2627
  CustomSelectComponent,
2411
2628
  SelectInterpolationComponent,
2629
+ MultipleSelectInterpolationComponent,
2412
2630
  FieldComponent,
2413
2631
  AceEditorComponent,
2414
2632
  AceEditorDirective,
@@ -2427,6 +2645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
2427
2645
  InputFileComponent,
2428
2646
  CustomSelectComponent,
2429
2647
  SelectInterpolationComponent,
2648
+ MultipleSelectInterpolationComponent,
2430
2649
  FieldComponent,
2431
2650
  AceEditorComponent,
2432
2651
  AceEditorDirective,
@@ -2887,5 +3106,5 @@ class TimeIntervalValueBuilder {
2887
3106
  * Generated bundle index. Do not edit.
2888
3107
  */
2889
3108
 
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 };
3109
+ 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
3110
  //# sourceMappingURL=apipass-inputs.mjs.map