i-tech-shared-components 1.0.3 → 1.0.4

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.
@@ -9,11 +9,14 @@ import { NgClass, NgIf, NgOptimizedImage } from '@angular/common';
9
9
  import { MatTooltip } from '@angular/material/tooltip';
10
10
  import * as i1$1 from '@angular/material/icon';
11
11
  import { MatIcon, MatIconModule } from '@angular/material/icon';
12
- import { MatLabel, MatFormField, MatError, MatHint } from '@angular/material/form-field';
12
+ import * as i4 from '@angular/material/form-field';
13
+ import { MatFormFieldModule } from '@angular/material/form-field';
13
14
  import { MatInput } from '@angular/material/input';
14
15
  import { NgxMaskDirective, NgxMaskPipe } from 'ngx-mask';
15
16
  import { MatProgressSpinner } from '@angular/material/progress-spinner';
16
- import { MatLabel as MatLabel$1, MatPrefix, MatFormField as MatFormField$1, MatSelect, MatOption } from '@angular/material/select';
17
+ import * as i5 from '@angular/material/select';
18
+ import { MatSelectModule } from '@angular/material/select';
19
+ import * as i6 from '@angular/material/core';
17
20
 
18
21
  class GenerateErrorMessagesPipe {
19
22
  constructor(translateService) {
@@ -299,15 +302,13 @@ class TextInputComponent {
299
302
  }
300
303
  }
301
304
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextInputComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
302
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter" }, ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\r\n <div class=\"w-100\">\r\n <mat-label [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\" *ngIf=\"inputData.label\">\r\n {{inputData.label | translate}}\r\n </mat-label>\r\n <span *ngIf=\"inputData.required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\"\r\n [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\r\n >\r\n <!-- Leading Icon -->\r\n <mat-icon *ngIf=\"inputData.iconPrefix\"\r\n matPrefix\r\n [ngClass]=\"{\r\n 'readonly-color' : !inputData.iconPrefixColor && (inputData.readOnly || ngControl.control.disabled),\r\n 'default-form-icon-color' : !inputData.iconPrefixColor && !(inputData.readOnly || ngControl.control.disabled)\r\n }\"\r\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\r\n [style.color]=\"inputData.iconPrefixColor || null\"\r\n >{{ inputData.iconPrefix }}\r\n </mat-icon>\r\n\r\n <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\r\n matPrefix\r\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\r\n [svgIcon]=\"inputData.iconPrefixSvg\"\r\n ></mat-icon>\r\n\r\n <!-- Input Field -->\r\n <input matInput\r\n *ngIf=\"!inputData.textarea\"\r\n [type]=\"inputData.type || 'text'\"\r\n [readonly]=\"inputData.readOnly\"\r\n [placeholder]=\"(inputData.placeholder || '') | translate\"\r\n [pattern]=\"inputData.pattern!\"\r\n [formControl]=\"ngControl.control\"\r\n [mask]=\"inputData.mask || ''\"\r\n [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\r\n [inputMask]=\"inputData.inputMask!\"\r\n [errorStateMatcher]=\"customErrorStateMatcher\"\r\n (blur)=\"onFocusOut()\"\r\n >\r\n\r\n <textarea matInput\r\n *ngIf=\"inputData.textarea\"\r\n [type]=\"inputData.type || 'text'\"\r\n [readonly]=\"inputData.readOnly\"\r\n [placeholder]=\"(inputData.placeholder || '') | translate\"\r\n [pattern]=\"inputData.pattern!\"\r\n [formControl]=\"ngControl.control\"\r\n [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\"\r\n [errorStateMatcher]=\"customErrorStateMatcher\"\r\n ></textarea>\r\n\r\n <!-- Clear Icon -->\r\n <i-tech-icon-button\r\n *ngIf=\"inputData.clearable\"\r\n iconName=\"cancel\"\r\n matSuffix\r\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\r\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n (click)=\"clear()\"\r\n >\r\n </i-tech-icon-button>\r\n\r\n <!-- Trailing Icon -->\r\n <i-tech-icon-button\r\n *ngIf=\"inputData.iconSuffix\"\r\n [iconName]=\"inputData.iconSuffix\"\r\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\r\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n matSuffix\r\n >\r\n </i-tech-icon-button>\r\n\r\n <!-- Error Messages -->\r\n <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\r\n {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey}}\r\n </mat-error>\r\n\r\n <!-- Helper Text -->\r\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\r\n {{inputData.hint | translate}}\r\n </mat-hint>\r\n </mat-form-field>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask", "min", "max", "float"] }, { kind: "directive", type: 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"] }] }); }
305
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter" }, ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\r\n <div class=\"w-100\">\r\n <mat-label [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\" *ngIf=\"inputData.label\">\r\n {{inputData.label | translate}}\r\n </mat-label>\r\n <span *ngIf=\"inputData.required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\"\r\n [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\r\n >\r\n <!-- Leading Icon -->\r\n <mat-icon *ngIf=\"inputData.iconPrefix\"\r\n matPrefix\r\n [ngClass]=\"{\r\n 'readonly-color' : !inputData.iconPrefixColor && (inputData.readOnly || ngControl.control.disabled),\r\n 'default-form-icon-color' : !inputData.iconPrefixColor && !(inputData.readOnly || ngControl.control.disabled)\r\n }\"\r\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\r\n [style.color]=\"inputData.iconPrefixColor || null\"\r\n >{{ inputData.iconPrefix }}\r\n </mat-icon>\r\n\r\n <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\r\n matPrefix\r\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\r\n [svgIcon]=\"inputData.iconPrefixSvg\"\r\n ></mat-icon>\r\n\r\n <!-- Input Field -->\r\n <input matInput\r\n *ngIf=\"!inputData.textarea\"\r\n [type]=\"inputData.type || 'text'\"\r\n [readonly]=\"inputData.readOnly\"\r\n [placeholder]=\"(inputData.placeholder || '') | translate\"\r\n [pattern]=\"inputData.pattern!\"\r\n [formControl]=\"ngControl.control\"\r\n [mask]=\"inputData.mask || ''\"\r\n [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\r\n [inputMask]=\"inputData.inputMask!\"\r\n [errorStateMatcher]=\"customErrorStateMatcher\"\r\n (blur)=\"onFocusOut()\"\r\n >\r\n\r\n <textarea matInput\r\n *ngIf=\"inputData.textarea\"\r\n [type]=\"inputData.type || 'text'\"\r\n [readonly]=\"inputData.readOnly\"\r\n [placeholder]=\"(inputData.placeholder || '') | translate\"\r\n [pattern]=\"inputData.pattern!\"\r\n [formControl]=\"ngControl.control\"\r\n [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\"\r\n [errorStateMatcher]=\"customErrorStateMatcher\"\r\n ></textarea>\r\n\r\n <!-- Clear Icon -->\r\n <i-tech-icon-button\r\n *ngIf=\"inputData.clearable\"\r\n iconName=\"cancel\"\r\n matSuffix\r\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\r\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n (click)=\"clear()\"\r\n >\r\n </i-tech-icon-button>\r\n\r\n <!-- Trailing Icon -->\r\n <i-tech-icon-button\r\n *ngIf=\"inputData.iconSuffix\"\r\n [iconName]=\"inputData.iconSuffix\"\r\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\r\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n matSuffix\r\n >\r\n </i-tech-icon-button>\r\n\r\n <!-- Error Messages -->\r\n <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\r\n {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey}}\r\n </mat-error>\r\n\r\n <!-- Helper Text -->\r\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\r\n {{inputData.hint | translate}}\r\n </mat-hint>\r\n </mat-form-field>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask", "min", "max", "float"] }, { kind: "directive", type: 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"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
303
306
  }
304
307
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextInputComponent, decorators: [{
305
308
  type: Component,
306
309
  args: [{ selector: 'i-tech-text-input', imports: [
307
- MatLabel,
308
310
  TranslateModule,
309
311
  NgClass,
310
- MatFormField,
311
312
  MatIcon,
312
313
  MatTooltip,
313
314
  MatInput,
@@ -315,10 +316,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
315
316
  NgIf,
316
317
  GenerateErrorMessagesPipe,
317
318
  IconButtonComponent,
318
- MatError,
319
- MatHint,
320
319
  InputMaskDirective,
321
- NgxMaskDirective
320
+ NgxMaskDirective,
321
+ MatFormFieldModule
322
322
  ], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\r\n <div class=\"w-100\">\r\n <mat-label [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\" *ngIf=\"inputData.label\">\r\n {{inputData.label | translate}}\r\n </mat-label>\r\n <span *ngIf=\"inputData.required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\r\n </div>\r\n <mat-form-field appearance=\"outline\" class=\"w-100\"\r\n [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\r\n >\r\n <!-- Leading Icon -->\r\n <mat-icon *ngIf=\"inputData.iconPrefix\"\r\n matPrefix\r\n [ngClass]=\"{\r\n 'readonly-color' : !inputData.iconPrefixColor && (inputData.readOnly || ngControl.control.disabled),\r\n 'default-form-icon-color' : !inputData.iconPrefixColor && !(inputData.readOnly || ngControl.control.disabled)\r\n }\"\r\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\r\n [style.color]=\"inputData.iconPrefixColor || null\"\r\n >{{ inputData.iconPrefix }}\r\n </mat-icon>\r\n\r\n <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\r\n matPrefix\r\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\r\n [svgIcon]=\"inputData.iconPrefixSvg\"\r\n ></mat-icon>\r\n\r\n <!-- Input Field -->\r\n <input matInput\r\n *ngIf=\"!inputData.textarea\"\r\n [type]=\"inputData.type || 'text'\"\r\n [readonly]=\"inputData.readOnly\"\r\n [placeholder]=\"(inputData.placeholder || '') | translate\"\r\n [pattern]=\"inputData.pattern!\"\r\n [formControl]=\"ngControl.control\"\r\n [mask]=\"inputData.mask || ''\"\r\n [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\r\n [inputMask]=\"inputData.inputMask!\"\r\n [errorStateMatcher]=\"customErrorStateMatcher\"\r\n (blur)=\"onFocusOut()\"\r\n >\r\n\r\n <textarea matInput\r\n *ngIf=\"inputData.textarea\"\r\n [type]=\"inputData.type || 'text'\"\r\n [readonly]=\"inputData.readOnly\"\r\n [placeholder]=\"(inputData.placeholder || '') | translate\"\r\n [pattern]=\"inputData.pattern!\"\r\n [formControl]=\"ngControl.control\"\r\n [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\"\r\n [errorStateMatcher]=\"customErrorStateMatcher\"\r\n ></textarea>\r\n\r\n <!-- Clear Icon -->\r\n <i-tech-icon-button\r\n *ngIf=\"inputData.clearable\"\r\n iconName=\"cancel\"\r\n matSuffix\r\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\r\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n (click)=\"clear()\"\r\n >\r\n </i-tech-icon-button>\r\n\r\n <!-- Trailing Icon -->\r\n <i-tech-icon-button\r\n *ngIf=\"inputData.iconSuffix\"\r\n [iconName]=\"inputData.iconSuffix\"\r\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\r\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n matSuffix\r\n >\r\n </i-tech-icon-button>\r\n\r\n <!-- Error Messages -->\r\n <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\r\n {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey}}\r\n </mat-error>\r\n\r\n <!-- Helper Text -->\r\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\r\n {{inputData.hint | translate}}\r\n </mat-hint>\r\n </mat-form-field>\r\n</div>\r\n" }]
323
323
  }], ctorParameters: () => [{ type: InputService }], propDecorators: { inputData: [{
324
324
  type: Input
@@ -745,7 +745,7 @@ class AutocompleteSelectComponent {
745
745
  searchInput?.nativeElement?.focus();
746
746
  }
747
747
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteSelectComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
748
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteSelectComponent, isStandalone: true, selector: "i-tech-autocomplete-select", inputs: { className: "className", submitValue: "submitValue", configs: "configs", detectChanges: "detectChanges" }, outputs: { selectionChange: "selectionChange", emitAction: "emitAction" }, host: { listeners: { "document:visibilitychange": "handleVisibilityChange()" } }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\r\n [ngClass]=\"{\r\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\r\n 'mat-select-with-search': selectConfig.search,\r\n 'without-label': selectConfig.hideLabel,\r\n 'invalid_field': ngControl.control.errors && submitValue,\r\n 'readonly-field': selectConfig.readOnly || ngControl.control.disabled\r\n }\"\r\n [matTooltip]=\"(selectConfig.hover && !ngControl.control.disabled ? ((selectConfig.hover || '') | translate) : '')\"\r\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\r\n [matTooltipPosition]=\"'above'\"\r\n *ngIf=\"selectConfig && ngControl\">\r\n\r\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\r\n <mat-label [ngClass]=\"{'readonly-color' : selectConfig.readOnly || ngControl.control.disabled}\">\r\n {{ selectConfig.label | translate }}\r\n </mat-label>\r\n <span *ngIf=\"selectConfig.required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\">*</span>\r\n </div>\r\n\r\n\r\n <!-- Search Input -->\r\n <div class=\"search-input w-100\"\r\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\r\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || ngControl.control.disabled }\"\r\n *ngIf=\"selectConfig.search\"\r\n >\r\n <input autocomplete=\"off\"\r\n id=\"searchInput\"\r\n type=\"text\"\r\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\r\n #searchInput\r\n [disabled]=\"ngControl.control.disabled || selectConfig.hover\"\r\n [placeholder]=\"(ngControl.control.disabled || selectConfig.hover) ? '' : 'Search'\"\r\n (focusout)=\"inputFocusOut()\"\r\n (focus)=\"openSelection()\"\r\n (keydown)=\"$event.stopPropagation()\"\r\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\r\n\r\n <!-- Search Icon -->\r\n <span class=\"search-icon\">\r\n <i-tech-icon-button\r\n class=\"mr-10\"\r\n [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\r\n [iconName]=\"selectConfig.iconPrefix || ''\"\r\n [disabled]=\"selectConfig.readOnly || false\"\r\n matPrefix\r\n >\r\n </i-tech-icon-button>\r\n </span>\r\n </div>\r\n\r\n <!-- Placeholder/Selected Value Display -->\r\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\r\n <div class=\"custom-placeholder\"\r\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\r\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\r\n [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n >\r\n {{ ((selectConfig.placeholder || '') | translate) }}\r\n </div>\r\n <div class=\"custom-placeholder custom-value ellipsis\"\r\n [ngClass]=\"{\r\n 'pr-42': selectConfig.iconUrl,\r\n 'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\r\n 'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled)\r\n }\"\r\n *ngIf=\"ngControl?.value\"\r\n >\r\n {{ selectConfig?.multiple ? (ngControl.value | arrayToString) : showingValue }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Custom Icon -->\r\n <img class=\"left_icon_new pointer\"\r\n (click)=\"iconClick(matSelect, searchInput)\"\r\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\r\n [src]=\"'assets/images/icons/global/' + (ngControl.control?.value && selectConfig?.activeStateIconUrl ? selectConfig.activeStateIconUrl : selectConfig.iconUrl)\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig?.search ? focusSearchInput() : null\">\r\n <!-- Material Select -->\r\n <mat-select #matSelect=\"matSelect\"\r\n [panelClass]=\"'autocomplete-transform-panel-location'\"\r\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\r\n [aria-label]=\"selectConfig.label | translate\"\r\n [id]=\"selectConfig.filtrationKey || ''\"\r\n (opened)=\"registerPanelScrollEvent(matSelect)\"\r\n (openedChange)=\"openedChange($event)\"\r\n [formControl]=\"ngControl.control\"\r\n [multiple]=\"selectConfig.multiple\"\r\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\r\n [errorStateMatcher]=\"customErrorStateMatcher\"\r\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\r\n [disabled]=\"ngControl.control.disabled\"\r\n >\r\n\r\n <!-- Loading State -->\r\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\r\n <div class=\"request_loading\">\r\n <img ngSrc=\"./loader.svg\" alt=\"\" height=\"200\" width=\"200\"/>\r\n </div>\r\n </mat-option>\r\n\r\n <!-- Options -->\r\n <ng-container *ngIf=\"data?.length && !pending\">\r\n <!-- Add New Option -->\r\n <mat-option *ngIf=\"selectConfig.actions\"\r\n class=\"pointer add_new\"\r\n disabled\r\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\r\n<!-- (click)=\"ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\r\n <i-tech-button\r\n [type]=\"ButtonType.OUTLINE\"\r\n [fontIcon]=\"'add'\"\r\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\r\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\r\n </i-tech-button>\r\n </mat-option>\r\n\r\n <!-- Regular Options -->\r\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\r\n <mat-option *ngFor=\"let item of data\"\r\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\r\n (mouseup)=\"optionClick(item)\"\r\n (mousedown)=\"preventDefault($event)\">\r\n {{ ((selectConfig.valueToShowByKey | getValueByKeyFromObject : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate }}\r\n </mat-option>\r\n </ng-container>\r\n\r\n <!-- Custom Text Options -->\r\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\r\n <mat-option *ngFor=\"let item of data\"\r\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\r\n (mouseup)=\"optionClick(item)\"\r\n (mousedown)=\"preventDefault($event)\"\r\n [disabled]=\"selectConfig?.changeText[item].disabled\">\r\n {{ selectConfig?.changeText[item].text | translate }}\r\n </mat-option>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Empty State -->\r\n <ng-container *ngIf=\"!pending && !data.length\">\r\n <mat-option disabled class=\"empty_selection_state\">\r\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\r\n <span>{{ 'dropdown_no_items' | translate }}</span>\r\n <div class=\"mt-10\">\r\n <i-tech-button\r\n *ngIf=\"selectConfig?.actions\"\r\n [type]=\"ButtonType.OUTLINE\"\r\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\r\n [customClass]=\"'mat-autocomplete-select-button'\"\r\n [fontIcon]=\"'add'\"\r\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\r\n </i-tech-button>\r\n </div>\r\n </div>\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\r\n matPrefix\r\n [ngClass]=\"{\r\n 'readonly-color' : !selectConfig['iconPrefixColor'] && (selectConfig.readOnly || ngControl.control.disabled),\r\n 'default-form-icon-color' : !selectConfig['iconPrefixColor'] && !(selectConfig.readOnly || ngControl.control.disabled)\r\n }\"\r\n [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\r\n >{{ selectConfig.iconPrefix }}\r\n </mat-icon>\r\n\r\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\r\n matPrefix\r\n [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\r\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\r\n ></mat-icon>\r\n\r\n <i-tech-icon-button\r\n *ngIf=\"selectConfig.search && selectConfig.clearable && !ngControl.control.disabled && !!ngControl.control.value\"\r\n iconName=\"cancel\"\r\n matSuffix\r\n [disabled]=\"selectConfig.readOnly || false\"\r\n [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n (click)=\"$event.stopPropagation();$event.preventDefault();ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus()\"\r\n >\r\n </i-tech-icon-button>\r\n <mat-icon\r\n matSuffix\r\n class=\"select-arrow\"\r\n [class.open]=\"matSelect.panelOpen\"\r\n [ngClass]=\"{\r\n 'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\r\n 'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled),\r\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\r\n }\"\r\n >\r\n keyboard_arrow_down\r\n </mat-icon>\r\n <!-- Error Message -->\r\n <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\r\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey}}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <!-- Reset Button -->\r\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (reset)=\"resetValue()\"></i-tech-clear-value>\r\n</div>\r\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}::ng-deep .request_loading{width:40px;height:40px;background-color:#fff!important}::ng-deep .request_loading:hover{background-color:var(--primary99)!important}::ng-deep .request_loading:focus{background-color:var(--primary99)!important}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "data_cy", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "pipe", type: GetValueByKeyFromObjectPipe, name: "getValueByKeyFromObject" }, { kind: "pipe", type: ArrayToStringPipe, name: "arrayToString" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: ClearValueComponent, selector: "i-tech-clear-value", inputs: ["className", "additionalClass"], outputs: ["reset"] }] }); }
748
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AutocompleteSelectComponent, isStandalone: true, selector: "i-tech-autocomplete-select", inputs: { className: "className", submitValue: "submitValue", configs: "configs", detectChanges: "detectChanges" }, outputs: { selectionChange: "selectionChange", emitAction: "emitAction" }, host: { listeners: { "document:visibilitychange": "handleVisibilityChange()" } }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\r\n [ngClass]=\"{\r\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\r\n 'mat-select-with-search': selectConfig.search,\r\n 'without-label': selectConfig.hideLabel,\r\n 'invalid_field': ngControl.control.errors && submitValue,\r\n 'readonly-field': selectConfig.readOnly || ngControl.control.disabled\r\n }\"\r\n [matTooltip]=\"(selectConfig.hover && !ngControl.control.disabled ? ((selectConfig.hover || '') | translate) : '')\"\r\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\r\n [matTooltipPosition]=\"'above'\"\r\n *ngIf=\"selectConfig && ngControl\">\r\n\r\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\r\n <mat-label [ngClass]=\"{'readonly-color' : selectConfig.readOnly || ngControl.control.disabled}\">\r\n {{ selectConfig.label | translate }}\r\n </mat-label>\r\n <span *ngIf=\"selectConfig.required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\">*</span>\r\n </div>\r\n\r\n\r\n <!-- Search Input -->\r\n <div class=\"search-input w-100\"\r\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\r\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || ngControl.control.disabled }\"\r\n *ngIf=\"selectConfig.search\"\r\n >\r\n <input autocomplete=\"off\"\r\n id=\"searchInput\"\r\n type=\"text\"\r\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\r\n #searchInput\r\n [disabled]=\"ngControl.control.disabled || selectConfig.hover\"\r\n [placeholder]=\"(ngControl.control.disabled || selectConfig.hover) ? '' : 'Search'\"\r\n (focusout)=\"inputFocusOut()\"\r\n (focus)=\"openSelection()\"\r\n (keydown)=\"$event.stopPropagation()\"\r\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\r\n\r\n <!-- Search Icon -->\r\n <span class=\"search-icon\">\r\n <i-tech-icon-button\r\n class=\"mr-10\"\r\n [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\r\n [iconName]=\"selectConfig.iconPrefix || ''\"\r\n [disabled]=\"selectConfig.readOnly || false\"\r\n matPrefix\r\n >\r\n </i-tech-icon-button>\r\n </span>\r\n </div>\r\n\r\n <!-- Placeholder/Selected Value Display -->\r\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\r\n <div class=\"custom-placeholder\"\r\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\r\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\r\n [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n >\r\n {{ ((selectConfig.placeholder || '') | translate) }}\r\n </div>\r\n <div class=\"custom-placeholder custom-value ellipsis\"\r\n [ngClass]=\"{\r\n 'pr-42': selectConfig.iconUrl,\r\n 'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\r\n 'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled)\r\n }\"\r\n *ngIf=\"ngControl?.value\"\r\n >\r\n {{ selectConfig?.multiple ? (ngControl.value | arrayToString) : showingValue }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Custom Icon -->\r\n <img class=\"left_icon_new pointer\"\r\n (click)=\"iconClick(matSelect, searchInput)\"\r\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\r\n [src]=\"'assets/images/icons/global/' + (ngControl.control?.value && selectConfig?.activeStateIconUrl ? selectConfig.activeStateIconUrl : selectConfig.iconUrl)\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig?.search ? focusSearchInput() : null\">\r\n <!-- Material Select -->\r\n <mat-select #matSelect=\"matSelect\"\r\n [panelClass]=\"'autocomplete-transform-panel-location'\"\r\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\r\n [aria-label]=\"selectConfig.label | translate\"\r\n [id]=\"selectConfig.filtrationKey || ''\"\r\n (opened)=\"registerPanelScrollEvent(matSelect)\"\r\n (openedChange)=\"openedChange($event)\"\r\n [formControl]=\"ngControl.control\"\r\n [multiple]=\"selectConfig.multiple\"\r\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\r\n [errorStateMatcher]=\"customErrorStateMatcher\"\r\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\r\n [disabled]=\"ngControl.control.disabled\"\r\n >\r\n\r\n <!-- Loading State -->\r\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\r\n <div class=\"request_loading\">\r\n <img ngSrc=\"./loader.svg\" alt=\"\" height=\"200\" width=\"200\"/>\r\n </div>\r\n </mat-option>\r\n\r\n <!-- Options -->\r\n <ng-container *ngIf=\"data?.length && !pending\">\r\n <!-- Add New Option -->\r\n <mat-option *ngIf=\"selectConfig.actions\"\r\n class=\"pointer add_new\"\r\n disabled\r\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\r\n<!-- (click)=\"ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\r\n <i-tech-button\r\n [type]=\"ButtonType.OUTLINE\"\r\n [fontIcon]=\"'add'\"\r\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\r\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\r\n </i-tech-button>\r\n </mat-option>\r\n\r\n <!-- Regular Options -->\r\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\r\n <mat-option *ngFor=\"let item of data\"\r\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\r\n (mouseup)=\"optionClick(item)\"\r\n (mousedown)=\"preventDefault($event)\">\r\n {{ ((selectConfig.valueToShowByKey | getValueByKeyFromObject : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate }}\r\n </mat-option>\r\n </ng-container>\r\n\r\n <!-- Custom Text Options -->\r\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\r\n <mat-option *ngFor=\"let item of data\"\r\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\r\n (mouseup)=\"optionClick(item)\"\r\n (mousedown)=\"preventDefault($event)\"\r\n [disabled]=\"selectConfig?.changeText[item].disabled\">\r\n {{ selectConfig?.changeText[item].text | translate }}\r\n </mat-option>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Empty State -->\r\n <ng-container *ngIf=\"!pending && !data.length\">\r\n <mat-option disabled class=\"empty_selection_state\">\r\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\r\n <span>{{ 'dropdown_no_items' | translate }}</span>\r\n <div class=\"mt-10\">\r\n <i-tech-button\r\n *ngIf=\"selectConfig?.actions\"\r\n [type]=\"ButtonType.OUTLINE\"\r\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\r\n [customClass]=\"'mat-autocomplete-select-button'\"\r\n [fontIcon]=\"'add'\"\r\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\r\n </i-tech-button>\r\n </div>\r\n </div>\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\r\n matPrefix\r\n [ngClass]=\"{\r\n 'readonly-color' : !selectConfig['iconPrefixColor'] && (selectConfig.readOnly || ngControl.control.disabled),\r\n 'default-form-icon-color' : !selectConfig['iconPrefixColor'] && !(selectConfig.readOnly || ngControl.control.disabled)\r\n }\"\r\n [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\r\n >{{ selectConfig.iconPrefix }}\r\n </mat-icon>\r\n\r\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\r\n matPrefix\r\n [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\r\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\r\n ></mat-icon>\r\n\r\n <i-tech-icon-button\r\n *ngIf=\"selectConfig.search && selectConfig.clearable && !ngControl.control.disabled && !!ngControl.control.value\"\r\n iconName=\"cancel\"\r\n matSuffix\r\n [disabled]=\"selectConfig.readOnly || false\"\r\n [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n (click)=\"$event.stopPropagation();$event.preventDefault();ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus()\"\r\n >\r\n </i-tech-icon-button>\r\n <mat-icon\r\n matSuffix\r\n class=\"select-arrow\"\r\n [class.open]=\"matSelect.panelOpen\"\r\n [ngClass]=\"{\r\n 'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\r\n 'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled),\r\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\r\n }\"\r\n >\r\n keyboard_arrow_down\r\n </mat-icon>\r\n <!-- Error Message -->\r\n <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\r\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey}}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <!-- Reset Button -->\r\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (reset)=\"resetValue()\"></i-tech-clear-value>\r\n</div>\r\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}::ng-deep .request_loading{width:40px;height:40px;background-color:#fff!important}::ng-deep .request_loading:hover{background-color:var(--primary99)!important}::ng-deep .request_loading:focus{background-color:var(--primary99)!important}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "data_cy", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "pipe", type: GetValueByKeyFromObjectPipe, name: "getValueByKeyFromObject" }, { kind: "pipe", type: ArrayToStringPipe, name: "arrayToString" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: ClearValueComponent, selector: "i-tech-clear-value", inputs: ["className", "additionalClass"], outputs: ["reset"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
749
749
  }
750
750
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteSelectComponent, decorators: [{
751
751
  type: Component,
@@ -754,21 +754,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
754
754
  MatTooltip,
755
755
  NgIf,
756
756
  TranslateModule,
757
- MatLabel$1,
758
757
  IconButtonComponent,
759
- MatPrefix,
760
- MatFormField$1,
761
- MatSelect,
762
758
  ReactiveFormsModule,
763
- MatOption,
764
- MatError,
759
+ MatSelectModule,
765
760
  ButtonComponent,
766
761
  GetValueByKeyFromObjectPipe,
767
762
  ArrayToStringPipe,
768
763
  NgOptimizedImage,
769
764
  MatIcon,
770
765
  GenerateErrorMessagesPipe,
771
- ClearValueComponent
766
+ ClearValueComponent,
767
+ MatFormFieldModule
772
768
  ], standalone: true, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\r\n [ngClass]=\"{\r\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\r\n 'mat-select-with-search': selectConfig.search,\r\n 'without-label': selectConfig.hideLabel,\r\n 'invalid_field': ngControl.control.errors && submitValue,\r\n 'readonly-field': selectConfig.readOnly || ngControl.control.disabled\r\n }\"\r\n [matTooltip]=\"(selectConfig.hover && !ngControl.control.disabled ? ((selectConfig.hover || '') | translate) : '')\"\r\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\r\n [matTooltipPosition]=\"'above'\"\r\n *ngIf=\"selectConfig && ngControl\">\r\n\r\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\r\n <mat-label [ngClass]=\"{'readonly-color' : selectConfig.readOnly || ngControl.control.disabled}\">\r\n {{ selectConfig.label | translate }}\r\n </mat-label>\r\n <span *ngIf=\"selectConfig.required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\">*</span>\r\n </div>\r\n\r\n\r\n <!-- Search Input -->\r\n <div class=\"search-input w-100\"\r\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\r\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || ngControl.control.disabled }\"\r\n *ngIf=\"selectConfig.search\"\r\n >\r\n <input autocomplete=\"off\"\r\n id=\"searchInput\"\r\n type=\"text\"\r\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\r\n #searchInput\r\n [disabled]=\"ngControl.control.disabled || selectConfig.hover\"\r\n [placeholder]=\"(ngControl.control.disabled || selectConfig.hover) ? '' : 'Search'\"\r\n (focusout)=\"inputFocusOut()\"\r\n (focus)=\"openSelection()\"\r\n (keydown)=\"$event.stopPropagation()\"\r\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\r\n\r\n <!-- Search Icon -->\r\n <span class=\"search-icon\">\r\n <i-tech-icon-button\r\n class=\"mr-10\"\r\n [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\r\n [iconName]=\"selectConfig.iconPrefix || ''\"\r\n [disabled]=\"selectConfig.readOnly || false\"\r\n matPrefix\r\n >\r\n </i-tech-icon-button>\r\n </span>\r\n </div>\r\n\r\n <!-- Placeholder/Selected Value Display -->\r\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\r\n <div class=\"custom-placeholder\"\r\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\r\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\r\n [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n >\r\n {{ ((selectConfig.placeholder || '') | translate) }}\r\n </div>\r\n <div class=\"custom-placeholder custom-value ellipsis\"\r\n [ngClass]=\"{\r\n 'pr-42': selectConfig.iconUrl,\r\n 'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\r\n 'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled)\r\n }\"\r\n *ngIf=\"ngControl?.value\"\r\n >\r\n {{ selectConfig?.multiple ? (ngControl.value | arrayToString) : showingValue }}\r\n </div>\r\n </ng-container>\r\n\r\n <!-- Custom Icon -->\r\n <img class=\"left_icon_new pointer\"\r\n (click)=\"iconClick(matSelect, searchInput)\"\r\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\r\n [src]=\"'assets/images/icons/global/' + (ngControl.control?.value && selectConfig?.activeStateIconUrl ? selectConfig.activeStateIconUrl : selectConfig.iconUrl)\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig?.search ? focusSearchInput() : null\">\r\n <!-- Material Select -->\r\n <mat-select #matSelect=\"matSelect\"\r\n [panelClass]=\"'autocomplete-transform-panel-location'\"\r\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\r\n [aria-label]=\"selectConfig.label | translate\"\r\n [id]=\"selectConfig.filtrationKey || ''\"\r\n (opened)=\"registerPanelScrollEvent(matSelect)\"\r\n (openedChange)=\"openedChange($event)\"\r\n [formControl]=\"ngControl.control\"\r\n [multiple]=\"selectConfig.multiple\"\r\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\r\n [errorStateMatcher]=\"customErrorStateMatcher\"\r\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\r\n [disabled]=\"ngControl.control.disabled\"\r\n >\r\n\r\n <!-- Loading State -->\r\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\r\n <div class=\"request_loading\">\r\n <img ngSrc=\"./loader.svg\" alt=\"\" height=\"200\" width=\"200\"/>\r\n </div>\r\n </mat-option>\r\n\r\n <!-- Options -->\r\n <ng-container *ngIf=\"data?.length && !pending\">\r\n <!-- Add New Option -->\r\n <mat-option *ngIf=\"selectConfig.actions\"\r\n class=\"pointer add_new\"\r\n disabled\r\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\r\n<!-- (click)=\"ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\r\n <i-tech-button\r\n [type]=\"ButtonType.OUTLINE\"\r\n [fontIcon]=\"'add'\"\r\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\r\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\r\n </i-tech-button>\r\n </mat-option>\r\n\r\n <!-- Regular Options -->\r\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\r\n <mat-option *ngFor=\"let item of data\"\r\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\r\n (mouseup)=\"optionClick(item)\"\r\n (mousedown)=\"preventDefault($event)\">\r\n {{ ((selectConfig.valueToShowByKey | getValueByKeyFromObject : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate }}\r\n </mat-option>\r\n </ng-container>\r\n\r\n <!-- Custom Text Options -->\r\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\r\n <mat-option *ngFor=\"let item of data\"\r\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\r\n (mouseup)=\"optionClick(item)\"\r\n (mousedown)=\"preventDefault($event)\"\r\n [disabled]=\"selectConfig?.changeText[item].disabled\">\r\n {{ selectConfig?.changeText[item].text | translate }}\r\n </mat-option>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- Empty State -->\r\n <ng-container *ngIf=\"!pending && !data.length\">\r\n <mat-option disabled class=\"empty_selection_state\">\r\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\r\n <span>{{ 'dropdown_no_items' | translate }}</span>\r\n <div class=\"mt-10\">\r\n <i-tech-button\r\n *ngIf=\"selectConfig?.actions\"\r\n [type]=\"ButtonType.OUTLINE\"\r\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\r\n [customClass]=\"'mat-autocomplete-select-button'\"\r\n [fontIcon]=\"'add'\"\r\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\r\n </i-tech-button>\r\n </div>\r\n </div>\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\r\n matPrefix\r\n [ngClass]=\"{\r\n 'readonly-color' : !selectConfig['iconPrefixColor'] && (selectConfig.readOnly || ngControl.control.disabled),\r\n 'default-form-icon-color' : !selectConfig['iconPrefixColor'] && !(selectConfig.readOnly || ngControl.control.disabled)\r\n }\"\r\n [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\r\n >{{ selectConfig.iconPrefix }}\r\n </mat-icon>\r\n\r\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\r\n matPrefix\r\n [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\r\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\r\n ></mat-icon>\r\n\r\n <i-tech-icon-button\r\n *ngIf=\"selectConfig.search && selectConfig.clearable && !ngControl.control.disabled && !!ngControl.control.value\"\r\n iconName=\"cancel\"\r\n matSuffix\r\n [disabled]=\"selectConfig.readOnly || false\"\r\n [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n (click)=\"$event.stopPropagation();$event.preventDefault();ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus()\"\r\n >\r\n </i-tech-icon-button>\r\n <mat-icon\r\n matSuffix\r\n class=\"select-arrow\"\r\n [class.open]=\"matSelect.panelOpen\"\r\n [ngClass]=\"{\r\n 'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\r\n 'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled),\r\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\r\n }\"\r\n >\r\n keyboard_arrow_down\r\n </mat-icon>\r\n <!-- Error Message -->\r\n <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\r\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey}}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <!-- Reset Button -->\r\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (reset)=\"resetValue()\"></i-tech-clear-value>\r\n</div>\r\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}::ng-deep .request_loading{width:40px;height:40px;background-color:#fff!important}::ng-deep .request_loading:hover{background-color:var(--primary99)!important}::ng-deep .request_loading:focus{background-color:var(--primary99)!important}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"] }]
773
769
  }], ctorParameters: () => [{ type: InputService }], propDecorators: { matSelect: [{
774
770
  type: ViewChild,