i-tech-shared-components 1.1.6 → 1.1.8

package/fesm2022/i-tech-shared-components.mjs

@@ -0,0 +1,1149 @@
+import * as i0 from '@angular/core';
+import { Pipe, inject, Injectable, Directive, Input, HostListener, EventEmitter, Component, Output, ViewChild } from '@angular/core';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule, TranslatePipe, TranslateService } from '@ngx-translate/core';
+import * as i3 from '@angular/forms';
+import { NgControl, FormControlName, ReactiveFormsModule, UntypedFormGroup, UntypedFormControl, Validators } from '@angular/forms';
+import { MatIconButton, MatFabButton, MatButton } from '@angular/material/button';
+import { NgClass, NgIf, NgOptimizedImage, NgFor } from '@angular/common';
+import { MatTooltip } from '@angular/material/tooltip';
+import * as i1 from '@angular/material/icon';
+import { MatIcon, MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { NgxMaskDirective, NgxMaskPipe, NgxMaskService } from 'ngx-mask';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import * as i5 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i6 from '@angular/material/core';
+import * as i3$1 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+
+class GenerateErrorMessagesPipe {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    transform(control, label, defaultPatternKey = 'fixed') {
+        if (!control.errors) {
+            return '';
+        }
+        let translateParams;
+        let errorMessageKey = '';
+        const key = (Object.keys(control.errors)[0]);
+        translateParams = { ERROR_KEY: this.translateService.instant(label) || 'Field' };
+        errorMessageKey = (key === 'pattern') ?
+            'errorMessages.pattern.' + defaultPatternKey : 'errorMessages.' + key;
+        return this.translateService.instant(errorMessageKey, translateParams);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GenerateErrorMessagesPipe, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GenerateErrorMessagesPipe, isStandalone: true, name: "generateErrorMessages" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GenerateErrorMessagesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'generateErrorMessages',
+                    standalone: true,
+                    pure: true
+                }]
+        }], ctorParameters: () => [{ type: i2.TranslateService }] });
+
+class ArrayToStringPipe {
+    transform(value) {
+        return (typeof value === 'string') ? value : value.join(',');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArrayToStringPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ArrayToStringPipe, isStandalone: true, name: "arrayToString" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArrayToStringPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'arrayToString',
+                    standalone: true
+                }]
+        }] });
+
+class GetValueByKeyFromObjectPipe {
+    transform(keys, data, withParams = null, withParamSymbol) {
+        if (typeof keys === 'string') {
+            return data[keys];
+        }
+        else {
+            let returnValue = data;
+            keys.forEach((key) => {
+                if (!returnValue) {
+                    return;
+                }
+                returnValue = returnValue[key];
+            });
+            if (withParams) {
+                withParams.forEach((param) => {
+                    let include = data;
+                    if (typeof param === 'object') {
+                        param.forEach((key) => {
+                            include = (include) ? include[key] : null;
+                        });
+                    }
+                    else {
+                        include = include[param];
+                    }
+                    if (include !== undefined && include !== null) {
+                        returnValue += (withParamSymbol ? withParamSymbol : ' ') + include;
+                    }
+                });
+            }
+            return ((returnValue !== "undefined") && (returnValue !== null)) ? returnValue : '---';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetValueByKeyFromObjectPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GetValueByKeyFromObjectPipe, isStandalone: true, name: "getValueByKeyFromObject" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GetValueByKeyFromObjectPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getValueByKeyFromObject',
+                    standalone: true
+                }]
+        }] });
+
+class NoopValueAccessor {
+    writeValue() { }
+    registerOnChange() { }
+    registerOnTouched() { }
+}
+class InputService {
+    injectNgControl() {
+        const ngControl = inject(NgControl, { self: true, optional: true });
+        if (!ngControl)
+            throw new Error('...');
+        if (ngControl instanceof FormControlName) {
+            ngControl.valueAccessor = new NoopValueAccessor();
+            return ngControl;
+        }
+        throw new Error(`...`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Enum representing different types of buttons.
+ */
+var ButtonType;
+(function (ButtonType) {
+    /** A filled button with solid background, typically used for primary actions. */
+    ButtonType["FILLED"] = "FILLED";
+    /** A tonal button with lighter background, used for secondary actions. */
+    ButtonType["TONAL"] = "TONAL";
+    /** An outlined button with a border and no background. */
+    ButtonType["OUTLINE"] = "OUTLINE";
+    /** A text button with no background or border, ideal for minimal UI. */
+    ButtonType["TEXT"] = "TEXT";
+    /** A warning button with special styling to indicate caution or alert actions. */
+    ButtonType["WARNING"] = "WARNING";
+})(ButtonType || (ButtonType = {}));
+
+class InputMaskDirective {
+    set min(value) {
+        this.minimumValue = Number(value);
+    }
+    set max(value) {
+        this.maximumValue = Number(value);
+    }
+    set float(value) {
+        this.isFloat = value === 'true';
+    }
+    onPaste(event) {
+        this.makeValidation(event, true);
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.regexFloat = new RegExp(/^([0-9]*[.])?[0-9]+$/);
+        this.regexOnlyNumbers = new RegExp(/^-?[0-9]+(?:\.[0-9]+)?$/);
+        this.elementRef.nativeElement.addEventListener('keypress', (event) => {
+            this.makeValidation(event);
+        });
+    }
+    makeValidation(event, fromPaste = false) {
+        let value;
+        let newChar;
+        if (!fromPaste) {
+            newChar = String.fromCharCode(event.keyCode);
+            const cursorPos = event.target.selectionStart;
+            const inputText = event.target.value;
+            value = `${inputText.slice(0, cursorPos)}${newChar}${inputText.slice(cursorPos, inputText.length)}`;
+        }
+        else {
+            value = event.clipboardData?.getData('text/plain');
+        }
+        if (this.inputMask === 'number') {
+            return this.checkingForNumbers(value, event, newChar, fromPaste);
+        }
+        else {
+            return this.checkingForTexts(value, event);
+        }
+    }
+    checkingForNumbers(value, event, newChar, fromPaste = false) {
+        if ((isNaN(this.minimumValue) || this.minimumValue < 0) && value === '-') {
+            value = Number('-0');
+        }
+        if (this.isFloat && (newChar === '.')) {
+            value += '0';
+        }
+        if (!this.isFloat && fromPaste && value.includes('.')) {
+            event.preventDefault();
+            return false;
+        }
+        const regex = (this.isFloat) ? this.regexFloat : this.regexOnlyNumbers;
+        if (!regex.test(value) ||
+            (this.minimumValue && value < this.minimumValue) ||
+            (this.maximumValue && value > this.maximumValue)) {
+            event.preventDefault();
+            return false;
+        }
+        return true;
+    }
+    checkingForTexts(value, event) {
+        let regex = new RegExp(/^[A-Za-z0-9]*$/);
+        if (!regex.test(value)) {
+            event.preventDefault();
+            return false;
+        }
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputMaskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: InputMaskDirective, isStandalone: true, selector: "[inputMask]", inputs: { inputMask: "inputMask", min: "min", max: "max", float: "float" }, host: { listeners: { "paste": "onPaste($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputMaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[inputMask]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { inputMask: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], float: [{
+                type: Input
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
+
+class IconButtonComponent {
+    constructor() {
+        this.size = 'medium';
+        this.type = 'tonal';
+        this.buttonClick = new EventEmitter();
+    }
+    onClick(event) {
+        if (!this.disabled) {
+            this.buttonClick.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: IconButtonComponent, isStandalone: true, selector: "i-tech-icon-button", inputs: { size: "size", type: "type", iconSvg: "iconSvg", iconName: "iconName", tooltip: "tooltip", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\r\n        *ngIf=\"['tonal','standard'].includes(type)\"\r\n        mat-icon-button\r\n        [ngClass]=\"{small: size === 'small', tonal: type === 'tonal', standard: type === 'standard'}\"\r\n        [matTooltip]=\"tooltip | translate\"\r\n        [matTooltipDisabled]=\"!tooltip\"\r\n        [disabled]=\"disabled || false\"\r\n        (click)=\"onClick($event)\"\r\n>\r\n    <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\r\n    <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\r\n</button>\r\n\r\n<button\r\n        *ngIf=\"type === 'filled'\"\r\n        mat-fab\r\n        class=\"filled\"\r\n        [ngClass]=\"{small: size === 'small'}\"\r\n        [matTooltip]=\"tooltip | translate\"\r\n        [matTooltipDisabled]=\"!tooltip\"\r\n        [color]=\"'primary'\"\r\n        [disabled]=\"disabled || false\"\r\n        (click)=\"onClick($event)\"\r\n>\r\n    <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\r\n    <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-icon-button', imports: [
+                        MatIconButton,
+                        NgClass,
+                        MatTooltip,
+                        TranslateModule,
+                        MatIcon,
+                        MatFabButton,
+                        NgIf
+                    ], standalone: true, template: "<button\r\n        *ngIf=\"['tonal','standard'].includes(type)\"\r\n        mat-icon-button\r\n        [ngClass]=\"{small: size === 'small', tonal: type === 'tonal', standard: type === 'standard'}\"\r\n        [matTooltip]=\"tooltip | translate\"\r\n        [matTooltipDisabled]=\"!tooltip\"\r\n        [disabled]=\"disabled || false\"\r\n        (click)=\"onClick($event)\"\r\n>\r\n    <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\r\n    <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\r\n</button>\r\n\r\n<button\r\n        *ngIf=\"type === 'filled'\"\r\n        mat-fab\r\n        class=\"filled\"\r\n        [ngClass]=\"{small: size === 'small'}\"\r\n        [matTooltip]=\"tooltip | translate\"\r\n        [matTooltipDisabled]=\"!tooltip\"\r\n        [color]=\"'primary'\"\r\n        [disabled]=\"disabled || false\"\r\n        (click)=\"onClick($event)\"\r\n>\r\n    <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\r\n    <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\r\n</button>\r\n" }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], iconSvg: [{
+                type: Input
+            }], iconName: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class TextInputComponent {
+    set inputData(data) {
+        // If submit becomes true, mark the control as touched
+        if (data?.submit && this.ngControl.control) {
+            this.ngControl.control.markAsTouched();
+        }
+        this._inputData = data;
+    }
+    get inputData() {
+        return this._inputData;
+    }
+    constructor(inputService) {
+        this.inputService = inputService;
+        this.focusOutEmitter = new EventEmitter();
+        this.customErrorStateMatcher = {
+            isErrorState: (control, form) => {
+                return !!(control && control.invalid && this.inputData?.submit);
+            }
+        };
+        this.ngControl = this.inputService.injectNgControl();
+    }
+    onFocusOut() {
+        if (this._inputData.focusOutEmit) {
+            this.focusOutEmitter.emit();
+        }
+    }
+    clear() {
+        if (this.ngControl) {
+            this.ngControl.control.reset();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextInputComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
+    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]=\"{\r\n          'readonly-color' : inputData.readOnly || ngControl.control.disabled,\r\n          'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\r\n          }\"\r\n               *ngIf=\"inputData.label\">\r\n      {{ inputData.label | translate }}\r\n    </mat-label>\r\n    <span *ngIf=\"inputData.required\" class=\"required-input\"\r\n          [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: i2.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-text-input', imports: [
+                        TranslateModule,
+                        NgClass,
+                        MatIcon,
+                        MatTooltip,
+                        MatInput,
+                        ReactiveFormsModule,
+                        NgIf,
+                        GenerateErrorMessagesPipe,
+                        IconButtonComponent,
+                        InputMaskDirective,
+                        NgxMaskDirective,
+                        MatFormFieldModule
+                    ], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\r\n  <div class=\"w-100\">\r\n    <mat-label [ngClass]=\"{\r\n          'readonly-color' : inputData.readOnly || ngControl.control.disabled,\r\n          'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\r\n          }\"\r\n               *ngIf=\"inputData.label\">\r\n      {{ inputData.label | translate }}\r\n    </mat-label>\r\n    <span *ngIf=\"inputData.required\" class=\"required-input\"\r\n          [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" }]
+        }], ctorParameters: () => [{ type: InputService }], propDecorators: { inputData: [{
+                type: Input
+            }], focusOutEmitter: [{
+                type: Output
+            }] } });
+
+/**
+ * A reusable button component with Material Design styling and custom functionality.
+ */
+class ButtonComponent {
+    constructor() {
+        /**
+         * The text displayed inside the button.
+         */
+        this.text = '';
+        /**
+         * Data attribute used for Cypress or other testing frameworks.
+         */
+        this.data_cy = '';
+        /**
+         * Font icon class for displaying an icon (e.g., Material Icons).
+         */
+        this.fontIcon = '';
+        /**
+         * SVG icon name for displaying an SVG icon.
+         */
+        this.svgIcon = '';
+        /**
+         * Defines the type of button (e.g., `FILLED`, `OUTLINED`).
+         */
+        this.type = ButtonType.FILLED;
+        /**
+         * Additional custom classes to style the button.
+         */
+        this.customClass = '';
+        /**
+         * If true, the button acts as a submit button.
+         */
+        this.submit = false;
+        /**
+         * If true, the button is disabled and cannot be clicked.
+         */
+        this.disabled = false;
+        /**
+         * Indicates whether the button is currently activated.
+         */
+        this.activated = false;
+        /**
+         * The color of the button (e.g., `primary`, `warn`).
+         */
+        this.color = 'primary';
+        /**
+         * Emits an event when the button is clicked.
+         */
+        this.buttonClick = new EventEmitter();
+        /**
+         * Enum reference for `ButtonType` to use in templates.
+         */
+        this.ButtonType = ButtonType;
+    }
+    /**
+     * Handles the button click event.
+     *
+     * @param event - The mouse event triggered by clicking the button.
+     */
+    onClick(event) {
+        if (!this.disabled && !this.submit) {
+            this.buttonClick.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "i-tech-button", inputs: { text: "text", data_cy: "data_cy", fontIcon: "fontIcon", svgIcon: "svgIcon", type: "type", customClass: "customClass", submit: "submit", disabled: "disabled", activated: "activated", color: "color" }, outputs: { buttonClick: "buttonClick" }, providers: [
+            NgxMaskDirective,
+            NgxMaskPipe,
+            TranslatePipe,
+            TranslateService
+        ], ngImport: i0, template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\r\n        mat-flat-button\r\n        [attr.data-cy]=\"data_cy\"\r\n        [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\r\n        [class.activated]=\"activated\"\r\n        [ngClass]=\"(customClass || '')\"\r\n        [disabled]=\"disabled || submit\"\r\n        (click)=\"onClick($event)\"\r\n>\r\n        <span *ngIf=\"submit\" class=\"spinner-overlay\">\r\n            <mat-spinner diameter=\"16\"></mat-spinner>\r\n        </span>\r\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\r\n  <span>{{text | translate}}</span>\r\n</button>\r\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\r\n        mat-button\r\n        [attr.data-cy]=\"data_cy\"\r\n        [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\r\n        [class.activated]=\"activated\"\r\n        [disabled]=\"disabled || submit\"\r\n        (click)=\"onClick($event)\"\r\n>\r\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\r\n            <mat-spinner diameter=\"16\"></mat-spinner>\r\n        </span>\r\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\r\n\r\n  <span>{{text | translate}}</span>\r\n</button>\r\n<button *ngIf=\"type === ButtonType.OUTLINE\"\r\n        [color]=\"color\"\r\n        mat-stroked-button\r\n        [attr.data-cy]=\"data_cy\"\r\n        [ngClass]=\"(customClass || '') \"\r\n        [disabled]=\"disabled || submit\"\r\n        (click)=\"onClick($event)\"\r\n        [class.activated]=\"activated\"\r\n>\r\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\r\n            <mat-spinner diameter=\"16\"></mat-spinner>\r\n        </span>\r\n  <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\r\n  <span>{{text | translate}}</span>\r\n</button>\r\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-button', standalone: true, imports: [
+                        MatButton,
+                        NgClass,
+                        MatProgressSpinner,
+                        NgIf,
+                        MatIconModule,
+                        TranslateModule
+                    ], providers: [
+                        NgxMaskDirective,
+                        NgxMaskPipe,
+                        TranslatePipe,
+                        TranslateService
+                    ], template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\r\n        mat-flat-button\r\n        [attr.data-cy]=\"data_cy\"\r\n        [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\r\n        [class.activated]=\"activated\"\r\n        [ngClass]=\"(customClass || '')\"\r\n        [disabled]=\"disabled || submit\"\r\n        (click)=\"onClick($event)\"\r\n>\r\n        <span *ngIf=\"submit\" class=\"spinner-overlay\">\r\n            <mat-spinner diameter=\"16\"></mat-spinner>\r\n        </span>\r\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\r\n  <span>{{text | translate}}</span>\r\n</button>\r\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\r\n        mat-button\r\n        [attr.data-cy]=\"data_cy\"\r\n        [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\r\n        [class.activated]=\"activated\"\r\n        [disabled]=\"disabled || submit\"\r\n        (click)=\"onClick($event)\"\r\n>\r\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\r\n            <mat-spinner diameter=\"16\"></mat-spinner>\r\n        </span>\r\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\r\n\r\n  <span>{{text | translate}}</span>\r\n</button>\r\n<button *ngIf=\"type === ButtonType.OUTLINE\"\r\n        [color]=\"color\"\r\n        mat-stroked-button\r\n        [attr.data-cy]=\"data_cy\"\r\n        [ngClass]=\"(customClass || '') \"\r\n        [disabled]=\"disabled || submit\"\r\n        (click)=\"onClick($event)\"\r\n        [class.activated]=\"activated\"\r\n>\r\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\r\n            <mat-spinner diameter=\"16\"></mat-spinner>\r\n        </span>\r\n  <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\r\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\r\n  <span>{{text | translate}}</span>\r\n</button>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { text: [{
+                type: Input
+            }], data_cy: [{
+                type: Input
+            }], fontIcon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], submit: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], activated: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class ClearValueComponent {
+    constructor() {
+        this.reset = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClearValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ClearValueComponent, isStandalone: true, selector: "i-tech-clear-value", inputs: { className: "className", additionalClass: "additionalClass" }, outputs: { reset: "reset" }, ngImport: i0, template: `<img
+    class="pointer"
+    [ngClass]="className || 'standard'"
+    (click)="reset.emit()"
+    ngSrc="./ic_close.svg"
+    height="24" width="24" alt=""/>`, isInline: true, styles: ["img{position:absolute;width:15px;height:15px}.big{width:25px;height:25px}.range_date{right:-65px;top:15px}.standard{right:-20px;top:40px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ClearValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-clear-value', template: `<img
+    class="pointer"
+    [ngClass]="className || 'standard'"
+    (click)="reset.emit()"
+    ngSrc="./ic_close.svg"
+    height="24" width="24" alt=""/>`, imports: [
+                        NgClass,
+                        NgOptimizedImage
+                    ], standalone: true, styles: ["img{position:absolute;width:15px;height:15px}.big{width:25px;height:25px}.range_date{right:-65px;top:15px}.standard{right:-20px;top:40px}\n"] }]
+        }], propDecorators: { className: [{
+                type: Input
+            }], additionalClass: [{
+                type: Input
+            }], reset: [{
+                type: Output
+            }] } });
+
+class AutocompleteSelectComponent {
+    /**
+     * For working configs.
+     */
+    set configs(data) {
+        this.selectConfig = data;
+        if (!data) {
+            return;
+        }
+        if ((typeof this.selectConfig.paginate) === 'function') {
+            if (this.firstRequest) {
+                return;
+            }
+            this.getData();
+            this.firstRequest = true;
+            return;
+        }
+        this.data = this.selectConfig.paginate;
+        this.findAndSetDefaultValueFromData();
+    }
+    ;
+    handleVisibilityChange() {
+        this.tabVisibility = !document.hidden;
+        if (this.ngControl.control.value) {
+            return;
+        }
+        this.closePanelAndUnsetFocus();
+        if (!document.hidden) {
+            this.isNeededForRecall = true;
+            this.pending = true;
+            setTimeout(() => {
+                this.pending = false;
+            }, 4000);
+        }
+    }
+    constructor(inputService) {
+        this.inputService = inputService;
+        this.selectionChange = new EventEmitter();
+        this.emitAction = new EventEmitter();
+        this.pending = false;
+        this.data = [];
+        this.paginationData = { current: 1, last: 0 };
+        this.firstRequest = false;
+        this.showPlaceholder = true;
+        this.isNeededForRecall = false;
+        this.accessToNextRequest = true;
+        this.disabled = false;
+        this.blockRecallDefaultValueSetter = false;
+        this.requestLoading = false;
+        this.ButtonType = ButtonType;
+        this.customErrorStateMatcher = {
+            isErrorState: (control, form) => {
+                return !!(control && control.invalid && this.submitValue);
+            }
+        };
+        this.ngControl = this.inputService.injectNgControl();
+    }
+    ngOnChanges(changes) {
+        if (changes['selectConfig'] && this.selectConfig) {
+            if ((typeof this.selectConfig.paginate) === 'function') {
+                this.getData();
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.ngControl.control.valueChanges.subscribe((res) => {
+            if (this.data.length && res && !this.blockRecallDefaultValueSetter) {
+                this.findAndSetDefaultValueFromData();
+            }
+        });
+    }
+    hardReload() {
+        this.getData('', true);
+    }
+    /**
+     * Dynamic request for select data.
+     * @param searchText - The input value to search options by.
+     * @param fromSearch - Access for search .
+     * @returns Select data.
+     */
+    getData(searchText, fromSearch) {
+        if (!fromSearch && !this.accessToNextRequest) {
+            return;
+        }
+        if (this.requestLoading) {
+            return;
+        }
+        if (fromSearch) {
+            this.paginationData.current = 1;
+            this.accessToNextRequest = true;
+        }
+        const functionToDo = this.selectConfig.paginate(this.paginationData.current, searchText);
+        this.requestLoading = true;
+        functionToDo?.subscribe((data) => {
+            const dataToAdd = ('content' in data) ? data.content : data;
+            if ('content' in data) {
+                this.accessToNextRequest = !data.last || (data.totalPages > this.paginationData.current);
+            }
+            this.data = (fromSearch || this.selectConfig?.blockPagination) ? dataToAdd : [...this.data, ...dataToAdd];
+            this.pending = false;
+            this.requestLoading = false;
+            if (!dataToAdd.length) {
+                this.paginationData.last = this.paginationData.current;
+                return;
+            }
+            this.paginationData.current += 1;
+            this.paginationData.last += 1;
+            setTimeout(() => {
+                this.findAndSetDefaultValueFromData();
+            }, 10);
+        }, () => {
+            this.pending = false;
+            this.requestLoading = false;
+        });
+    }
+    findAndSetDefaultValueFromData() {
+        if (this.selectConfig.multiple) {
+            if (this.ngControl.value && this.ngControl.value.length == 1) {
+                this.setShowingValue(this.data.find((item) => item.id === this.ngControl.value[0]));
+            }
+        }
+        else {
+            const isDisabled = this.ngControl.disabled;
+            if (isDisabled) {
+                // TODO Remove after migrating all selects
+                // this.ngControl.control.enable();
+                // if (!this.ngControl.value && !this.data.length) {
+                //     this.ngControl.control.disable();
+                //     return;
+                // }
+                // this.setDefaultValue();
+                // this.ngControl.control.disable();
+            }
+            else {
+                if (!this.ngControl.value && !this.data) {
+                    return;
+                }
+                this.setDefaultValue();
+            }
+        }
+    }
+    setDefaultValue() {
+        this.defaultValue = this.data.find((item) => item.id === this.ngControl.value);
+        this.baseData = this.defaultValue;
+        if (!this.defaultValue) {
+            return;
+        }
+        this.selectionChange.emit();
+        this.setShowingValue(this.defaultValue);
+    }
+    optionClick(showingData) {
+        this.baseData = showingData;
+        if (!this.selectConfig.multiple) {
+            this.setShowingValue(showingData);
+            this.matSelect.close();
+            return;
+        }
+        if (this.searchInput) {
+            if (this.selectConfig.multiple) {
+                this.searchInput?.nativeElement?.focus();
+            }
+            else {
+                this.inputFocusOut();
+            }
+        }
+        this.setShowingValue(showingData);
+        this.showPlaceholder = false;
+    }
+    addNewItemEvent() {
+        this.isNeededForRecall = true;
+        this.emitAction.emit();
+    }
+    /**
+     * Filter and show.
+     * @param data - Existing chosen data.
+     */
+    setShowingValue(data) {
+        if (!data) {
+            return;
+        }
+        // TODO refactor this part fully
+        let include = data;
+        let includeOptional = data;
+        if (this.selectConfig.valueToShowByKey) {
+            this.selectConfig.valueToShowByKey.forEach((param) => {
+                if (typeof param === 'object') {
+                    param.forEach((key) => {
+                        include = (include) ? include[key] : null;
+                    });
+                }
+                else {
+                    include = include[param];
+                }
+            });
+            if (this.selectConfig.showFullTextWithOptionalOnSelectedValue) {
+                this.selectConfig.valueToShowByParam?.forEach((param) => {
+                    if (typeof param === 'object') {
+                        param.forEach((key) => {
+                            includeOptional = (includeOptional) ? includeOptional[key] : null;
+                        });
+                    }
+                    else {
+                        includeOptional = includeOptional[param];
+                    }
+                });
+                if (this.selectConfig.valueToShowByParam && typeof includeOptional === 'string') {
+                    include += (this.selectConfig.withParamSymbol || '') + includeOptional;
+                }
+            }
+        }
+        this.showingValue = include;
+        this.blockRecallDefaultValueSetter = true;
+    }
+    /**
+     * Block another events.
+     * @param event - Element click event.
+     */
+    preventDefault(event) {
+        if (!this.selectConfig.multiple) {
+            return;
+        }
+        event.preventDefault();
+    }
+    registerPanelScrollEvent(element) {
+        if (this.selectConfig.paginateOnScroll === false) {
+            return;
+        }
+        const panel = element.panel.nativeElement;
+        panel.addEventListener('scroll', (event) => this.loadDataOnScroll(event));
+    }
+    loadDataOnScroll(event) {
+        const pos = (event.target.scrollTop || event.target.scrollTop) + event.target.offsetHeight;
+        const max = event.target.scrollHeight;
+        if ((pos + 1) >= max) {
+            if (this.paginationData.current === this.paginationData.last || this.selectConfig.blockPagination) {
+                return;
+            }
+            this.getData();
+        }
+    }
+    focusSearchInput() {
+        if (this.selectConfig.search && this.searchInput) {
+            this.searchInput.nativeElement.focus();
+        }
+    }
+    inputFocusOut() {
+        this.isNeededForRecall = !!this.searchInput.nativeElement.value;
+        this.searchInput.nativeElement.value = '';
+        this.showPlaceholder = true;
+        this.clearTimeoutForSearch();
+    }
+    resetValue() {
+        this.selectionChange.emit(null);
+        this.ngControl.reset(null);
+        this.inputFocusOut();
+    }
+    getDataWithSearch(value, event) {
+        this.clearTimeoutForSearch();
+        if (value.length >= 1) {
+            this.searchTimeoutId = setTimeout(() => {
+                this.getData(value, true);
+            }, 800);
+        }
+        else if (value.length <= 1 && event.keyCode === 8) {
+            this.getData(value, true);
+        }
+    }
+    clearTimeoutForSearch() {
+        if (this.searchTimeoutId) {
+            clearTimeout(this.searchTimeoutId);
+            this.searchTimeoutId = 0;
+        }
+    }
+    openSelection() {
+        if (this.selectConfig.disabled || this.ngControl.control.disabled) {
+            return;
+        }
+        this.showPlaceholder ? this.matSelect.open() : this.closePanelAndUnsetFocus();
+        this.showPlaceholder = !this.showPlaceholder;
+        if (!this.showPlaceholder) {
+            this.reCallData();
+        }
+    }
+    closePanelAndUnsetFocus() {
+        this.matSelect.close();
+        if (this.searchInput) {
+            this.searchInput.nativeElement.blur();
+        }
+    }
+    openedChange(event) {
+        if (event) {
+            if (this.isNeededForRecall) {
+                this.reCallData();
+                return;
+            }
+            if (!this.selectConfig.search) {
+                this.pending = false;
+                this.reCallData();
+            }
+            return;
+        }
+        this.showPlaceholder = true;
+    }
+    reCallData() {
+        // TODO refactor this part
+        if (!this.isNeededForRecall) {
+            return;
+        }
+        this.data = [];
+        this.pending = true;
+        this.paginationData = {
+            current: 1,
+            last: 0
+        };
+        this.accessToNextRequest = true;
+        if ((typeof this.selectConfig.paginate) === 'function') {
+            this.getData();
+        }
+        else {
+            this.pending = false;
+            this.data = this.selectConfig.paginate;
+        }
+        this.isNeededForRecall = false;
+    }
+    emitSelectionChangeAndClose(event) {
+        this.selectionChange.emit(event.value);
+        if (this.selectConfig.multiple) {
+            if (!event.value?.length) {
+                this.ngControl.control.reset();
+            }
+            return;
+        }
+        this.matSelect.close();
+    }
+    iconClick(matSelect, searchInput) {
+        matSelect.open();
+        searchInput?.nativeElement?.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteSelectComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
+    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]=\"{\r\n          'readonly-color' : selectConfig.readOnly || ngControl.control.disabled,\r\n          'invalid-label-color': !!(ngControl.control.errors && submitValue)\r\n        }\">\r\n      {{ selectConfig.label | translate }}\r\n    </mat-label>\r\n    <span *ngIf=\"selectConfig.required\" class=\"required-input\"\r\n          [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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-autocomplete-select', imports: [
+                        NgClass,
+                        MatTooltip,
+                        NgIf,
+                        NgFor,
+                        TranslateModule,
+                        IconButtonComponent,
+                        ReactiveFormsModule,
+                        MatSelectModule,
+                        ButtonComponent,
+                        GetValueByKeyFromObjectPipe,
+                        ArrayToStringPipe,
+                        NgOptimizedImage,
+                        MatIcon,
+                        GenerateErrorMessagesPipe,
+                        ClearValueComponent,
+                        MatFormFieldModule
+                    ], 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]=\"{\r\n          'readonly-color' : selectConfig.readOnly || ngControl.control.disabled,\r\n          'invalid-label-color': !!(ngControl.control.errors && submitValue)\r\n        }\">\r\n      {{ selectConfig.label | translate }}\r\n    </mat-label>\r\n    <span *ngIf=\"selectConfig.required\" class=\"required-input\"\r\n          [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"] }]
+        }], ctorParameters: () => [{ type: InputService }], propDecorators: { matSelect: [{
+                type: ViewChild,
+                args: ['matSelect']
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], className: [{
+                type: Input
+            }], submitValue: [{
+                type: Input
+            }], configs: [{
+                type: Input
+            }], detectChanges: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], emitAction: [{
+                type: Output
+            }], allSelected: [{
+                type: ViewChild,
+                args: ['allSelected']
+            }], handleVisibilityChange: [{
+                type: HostListener,
+                args: ['document:visibilitychange']
+            }] } });
+
+class DateMaskDirective {
+    constructor(elementRef, injector) {
+        this.elementRef = elementRef;
+        this.injector = injector;
+        this.expressions = {
+            DMY: 'M0/d0/0000',
+            DM: 'M0/d0'
+        };
+        this.dateRegex = new RegExp(/^\s*(1[012]|0?[1-9])\/(3[01]|[12][0-9]|0?[1-9])\/((?:19|20)\d{2})\s*$/);
+        this.dayMonthRegex = new RegExp(/^\s*(1[012]|0?[1-9])\/(3[01]|[12][0-9]|0?[1-9])$/);
+        this.previousValue = '';
+        this.maskService = this.injector.get(NgxMaskService);
+    }
+    onInput() {
+        let value = this.elementRef.nativeElement.value;
+        if (this.existsZerosInString(value)) {
+            value = this.previousValue;
+        }
+        const maskedValue = this.maskService.applyMask(value, this.maskType === 'DAY_MONTH' ? this.expressions.DM : this.expressions.DMY);
+        if (this.maskType !== 'DAY_MONTH' && !isNaN(new Date(maskedValue).getTime())) {
+            if (this.matDatepicker) {
+                this.matDatepicker.select(new Date(maskedValue));
+            }
+            else if (this.rangeFormControl) {
+                this.rangeFormControl.setValue(new Date(maskedValue));
+            }
+        }
+        if (isNaN(new Date(maskedValue).getTime())) {
+            this.matDatepicker.select(null);
+        }
+        this.elementRef.nativeElement.value = maskedValue || null;
+        this.previousValue = maskedValue || null;
+    }
+    onPaste(event) {
+        const pastedValue = event.clipboardData?.getData('text/plain');
+        if (!pastedValue) {
+            return;
+        }
+        if (this.maskType === 'DAY_MONTH') {
+            if (!this.dayMonthRegex.test(pastedValue)) {
+                event?.preventDefault();
+            }
+        }
+        else {
+            if (!this.dateRegex.test(pastedValue)) {
+                event?.preventDefault();
+            }
+        }
+    }
+    existsZerosInString(date) {
+        const dateToArray = date.split('/');
+        let isValid;
+        if (this.maskType === 'DAY_MONTH') {
+            isValid = !!dateToArray.find((part) => part.includes('00'));
+        }
+        else {
+            if (dateToArray.length < 3) {
+                isValid = !!dateToArray.find((part) => part.includes('00'));
+            }
+            else {
+                isValid = (dateToArray[2][0] == '0') || (+dateToArray[2][0] > 2);
+            }
+        }
+        return isValid;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateMaskDirective, deps: [{ token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DateMaskDirective, isStandalone: true, selector: "[dateMask]", inputs: { maskType: "maskType", matDatepicker: "matDatepicker", rangeFormControl: "rangeFormControl" }, host: { listeners: { "input": "onInput()", "paste": "onPaste($event)" } }, providers: [NgxMaskDirective], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateMaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[dateMask]',
+                    providers: [NgxMaskDirective],
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { maskType: [{
+                type: Input
+            }], matDatepicker: [{
+                type: Input
+            }], rangeFormControl: [{
+                type: Input
+            }], onInput: [{
+                type: HostListener,
+                args: ['input']
+            }], onPaste: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }] } });
+
+class DatePickerComponent {
+    constructor(inputService) {
+        this.inputService = inputService;
+        this.label = '';
+        this.required = false;
+        this.hintText = '';
+        this.placeholder = 'MM/DD/YYYY';
+        this.submit = false;
+        this.valueChangeEmitter = new EventEmitter();
+        this.isOpen = false;
+        this.focused = false;
+        this.customErrorStateMatcher = {
+            isErrorState: (control, form) => {
+                return !!(control && control.invalid && this.submit);
+            }
+        };
+        this.ngControl = this.inputService.injectNgControl();
+    }
+    emitChange() {
+        if (!this.valueChangeEmit) {
+            return;
+        }
+        this.valueChangeEmitter.emit();
+    }
+    clickForFocusOut() {
+        setTimeout(() => {
+            this.inputElement.nativeElement.focus();
+            this.inputElement.nativeElement.blur();
+        }, 120);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "i-tech-date-picker", inputs: { label: "label", defaultPatternKey: "defaultPatternKey", required: "required", hintText: "hintText", placeholder: "placeholder", iconPrefix: "iconPrefix", iconPrefixSvg: "iconPrefixSvg", iconPrefixTooltip: "iconPrefixTooltip", iconPrefixColor: "iconPrefixColor", iconPrefixVariant: "iconPrefixVariant", valueChangeEmit: "valueChangeEmit", submit: "submit" }, outputs: { valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"flex_column relative mat-date-range-input\" *ngIf=\"ngControl\" [ngClass]=\"{'check_requirements': submit}\">\r\n  <div class=\"w-100\">\r\n    <mat-label [ngClass]=\"{\r\n        'readonly-color' : ngControl.control.disabled,\r\n        'invalid-label-color': !!(ngControl.control.errors && submit)\r\n        }\">\r\n      {{ label | translate }}\r\n    </mat-label>\r\n    <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\">*</span>\r\n  </div>\r\n  <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\"\r\n                  [class.readonly-field]=\"ngControl.control.disabled\">\r\n    <input matInput #inputElement\r\n           type=\"text\"\r\n           [formControl]=\"ngControl.control\"\r\n           [placeholder]=\"placeholder | translate\"\r\n           dateMask\r\n           [matDatepicker]=\"datePicker\"\r\n           [errorStateMatcher]=\"customErrorStateMatcher\"\r\n           (focus)=\"focused = true\"\r\n           (click)=\"datePicker.open();\"\r\n           (dateChange)=\"emitChange()\"\r\n    >\r\n\r\n    <mat-icon *ngIf=\"iconPrefix\"\r\n              matPrefix\r\n              [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\r\n              [style.color]=\"iconPrefixColor\"\r\n    >{{ iconPrefix }}\r\n    </mat-icon>\r\n\r\n    <mat-icon *ngIf=\"iconPrefixSvg\"\r\n              matPrefix\r\n              [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\r\n              [svgIcon]=\"iconPrefixSvg\"\r\n    ></mat-icon>\r\n\r\n    <i-tech-icon-button matSuffix\r\n                        [iconName]=\"'date_range'\"\r\n                        [disabled]=\"ngControl.control.disabled\"\r\n                        (click)=\"datePicker.open()\"\r\n                        [ngClass]=\"ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n    ></i-tech-icon-button>\r\n\r\n    <mat-datepicker #datePicker (closed)=\"isOpen = false;clickForFocusOut()\"\r\n                    (opened)=\"isOpen = true;focused = true\"></mat-datepicker>\r\n\r\n    <!-- Error Messages -->\r\n    <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\r\n      {{ ngControl.control | generateErrorMessages : label : defaultPatternKey }}\r\n    </mat-error>\r\n\r\n    <!-- Helper Text -->\r\n    <mat-hint *ngIf=\"!(!!(ngControl.control.errors && submit)) && hintText\"\r\n              [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\"\r\n    >\r\n      {{ hintText | translate }}\r\n    </mat-hint>\r\n\r\n  </mat-form-field>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-date-picker', imports: [
+                        NgClass, NgIf,
+                        TranslateModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatDatepickerModule,
+                        MatInput,
+                        MatTooltip,
+                        MatIconModule,
+                        DateMaskDirective,
+                        GenerateErrorMessagesPipe, IconButtonComponent
+                    ], standalone: true, template: "<div class=\"flex_column relative mat-date-range-input\" *ngIf=\"ngControl\" [ngClass]=\"{'check_requirements': submit}\">\r\n  <div class=\"w-100\">\r\n    <mat-label [ngClass]=\"{\r\n        'readonly-color' : ngControl.control.disabled,\r\n        'invalid-label-color': !!(ngControl.control.errors && submit)\r\n        }\">\r\n      {{ label | translate }}\r\n    </mat-label>\r\n    <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\">*</span>\r\n  </div>\r\n  <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\"\r\n                  [class.readonly-field]=\"ngControl.control.disabled\">\r\n    <input matInput #inputElement\r\n           type=\"text\"\r\n           [formControl]=\"ngControl.control\"\r\n           [placeholder]=\"placeholder | translate\"\r\n           dateMask\r\n           [matDatepicker]=\"datePicker\"\r\n           [errorStateMatcher]=\"customErrorStateMatcher\"\r\n           (focus)=\"focused = true\"\r\n           (click)=\"datePicker.open();\"\r\n           (dateChange)=\"emitChange()\"\r\n    >\r\n\r\n    <mat-icon *ngIf=\"iconPrefix\"\r\n              matPrefix\r\n              [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\r\n              [style.color]=\"iconPrefixColor\"\r\n    >{{ iconPrefix }}\r\n    </mat-icon>\r\n\r\n    <mat-icon *ngIf=\"iconPrefixSvg\"\r\n              matPrefix\r\n              [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\r\n              [svgIcon]=\"iconPrefixSvg\"\r\n    ></mat-icon>\r\n\r\n    <i-tech-icon-button matSuffix\r\n                        [iconName]=\"'date_range'\"\r\n                        [disabled]=\"ngControl.control.disabled\"\r\n                        (click)=\"datePicker.open()\"\r\n                        [ngClass]=\"ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\r\n    ></i-tech-icon-button>\r\n\r\n    <mat-datepicker #datePicker (closed)=\"isOpen = false;clickForFocusOut()\"\r\n                    (opened)=\"isOpen = true;focused = true\"></mat-datepicker>\r\n\r\n    <!-- Error Messages -->\r\n    <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\r\n      {{ ngControl.control | generateErrorMessages : label : defaultPatternKey }}\r\n    </mat-error>\r\n\r\n    <!-- Helper Text -->\r\n    <mat-hint *ngIf=\"!(!!(ngControl.control.errors && submit)) && hintText\"\r\n              [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\"\r\n    >\r\n      {{ hintText | translate }}\r\n    </mat-hint>\r\n\r\n  </mat-form-field>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: InputService }], propDecorators: { label: [{
+                type: Input
+            }], defaultPatternKey: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], hintText: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], iconPrefix: [{
+                type: Input
+            }], iconPrefixSvg: [{
+                type: Input
+            }], iconPrefixTooltip: [{
+                type: Input
+            }], iconPrefixColor: [{
+                type: Input
+            }], iconPrefixVariant: [{
+                type: Input
+            }], valueChangeEmit: [{
+                type: Input
+            }], submit: [{
+                type: Input
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['inputElement']
+            }], valueChangeEmitter: [{
+                type: Output
+            }] } });
+
+class DateRangeDatepickerComponent {
+    constructor() {
+        this.submit = false;
+        this.clearValue = true;
+        this.errorMessage = '';
+        this.hintText = 'MM/DD/YYYY - MM/DD/YYYY';
+        this.resetForm = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.isOpen = false;
+        this.dateRangeForm = new UntypedFormGroup({
+            startDate: new UntypedFormControl('', [Validators.maxLength(10)]),
+            endDate: new UntypedFormControl('', [Validators.maxLength(10)]),
+        });
+        this.customErrorStateMatcher = {
+            isErrorState: (control, form) => {
+                return !!(control && control.invalid && this.submit);
+            }
+        };
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            if (this.defaultValue?.length) {
+                this.dateRangeForm.patchValue({
+                    startDate: this.defaultValue[0],
+                    endDate: this.defaultValue[1]
+                });
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        setTimeout(() => {
+            if (changes['value']?.currentValue && !(changes['value'].currentValue[0])) {
+                if (this.picker) {
+                    this.dateRangeForm.reset();
+                    this.picker.select(null);
+                }
+            }
+            else if (changes['value'] && this.value?.length) {
+                this.dateRangeForm.setValue({
+                    startDate: new Date(this.value[0] || ''),
+                    endDate: new Date(this.value[1] || '')
+                });
+            }
+        }, 10);
+    }
+    clickForFocusOut() {
+        setTimeout(() => {
+            this.min.nativeElement.focus();
+            this.min.nativeElement.blur();
+        }, 120);
+    }
+    setDate(value, element) {
+        this.selectionChange.emit(value);
+        element.blur();
+    }
+    keyEventHandler(event, value, element) {
+        if (event.code === 'Enter') {
+            this.setDate(value, element);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DateRangeDatepickerComponent, isStandalone: true, selector: "app-mat-range-datepicker", inputs: { label: "label", placeholder: "placeholder", value: "value", defaultValue: "defaultValue", key: "key", submit: "submit", clearValue: "clearValue", errorMessage: "errorMessage", onePlaceholder: "onePlaceholder", hintText: "hintText" }, outputs: { resetForm: "resetForm", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "min", first: true, predicate: ["min"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex_column relative mat-date-range-input\"\r\n     [formGroup]=\"dateRangeForm\"\r\n>\r\n    <div class=\"w-100\">\r\n        <mat-label>\r\n            {{(label || '') | translate}}\r\n        </mat-label>\r\n    </div>\r\n    <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\r\n        <mat-date-range-input [rangePicker]=\"picker\">\r\n            <input formControlName=\"startDate\"\r\n                   [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\r\n                   [title]=\"key ? key.title :  'Date'\"\r\n                   [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\r\n                   [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\r\n                   matStartDate #min\r\n                   dateMask\r\n                   [errorStateMatcher]=\"customErrorStateMatcher\"\r\n                   [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\r\n                   (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\r\n                   (dateChange)=\"setDate([min.value, max.value || null],min)\">\r\n            <input formControlName=\"endDate\"\r\n                   [placeholder]=\"(placeholder  ? placeholder[1] : 'End Date')\"\r\n                   [title]=\"key ? key.title :  'Date'\"\r\n                   [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\r\n                   [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\r\n                   matEndDate #max\r\n                   dateMask\r\n                   [errorStateMatcher]=\"customErrorStateMatcher\"\r\n                   [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\r\n                   (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\r\n                   (dateChange)=\"setDate([min.value, max.value || null],max)\">\r\n        </mat-date-range-input>\r\n        <i-tech-icon-button matSuffix\r\n             [iconName]=\"'cancel'\"\r\n             (buttonClick)=\"selectionChange.emit([null, null])\"\r\n             class=\"default-form-icon-color\"\r\n             *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\r\n        ></i-tech-icon-button>\r\n        <i-tech-icon-button matSuffix [iconName]=\"'date_range'\" (buttonClick)=\"picker.open()\" class=\"default-form-icon-color\"></i-tech-icon-button>\r\n        <mat-date-range-picker #picker (closed)=\"isOpen = false;clickForFocusOut()\" (opened)=\"isOpen = true\"></mat-date-range-picker>\r\n        <mat-hint *ngIf=\"hintText && !errorMessage\">{{hintText}}</mat-hint>\r\n    </mat-form-field>\r\n</div>\r\n", dependencies: [{ 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateRangeDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mat-range-datepicker', imports: [
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatDatepickerModule,
+                        NgClass, NgIf,
+                        TranslateModule,
+                        IconButtonComponent, DateMaskDirective
+                    ], standalone: true, template: "<div class=\"flex_column relative mat-date-range-input\"\r\n     [formGroup]=\"dateRangeForm\"\r\n>\r\n    <div class=\"w-100\">\r\n        <mat-label>\r\n            {{(label || '') | translate}}\r\n        </mat-label>\r\n    </div>\r\n    <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\r\n        <mat-date-range-input [rangePicker]=\"picker\">\r\n            <input formControlName=\"startDate\"\r\n                   [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\r\n                   [title]=\"key ? key.title :  'Date'\"\r\n                   [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\r\n                   [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\r\n                   matStartDate #min\r\n                   dateMask\r\n                   [errorStateMatcher]=\"customErrorStateMatcher\"\r\n                   [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\r\n                   (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\r\n                   (dateChange)=\"setDate([min.value, max.value || null],min)\">\r\n            <input formControlName=\"endDate\"\r\n                   [placeholder]=\"(placeholder  ? placeholder[1] : 'End Date')\"\r\n                   [title]=\"key ? key.title :  'Date'\"\r\n                   [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\r\n                   [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\r\n                   matEndDate #max\r\n                   dateMask\r\n                   [errorStateMatcher]=\"customErrorStateMatcher\"\r\n                   [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\r\n                   (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\r\n                   (dateChange)=\"setDate([min.value, max.value || null],max)\">\r\n        </mat-date-range-input>\r\n        <i-tech-icon-button matSuffix\r\n             [iconName]=\"'cancel'\"\r\n             (buttonClick)=\"selectionChange.emit([null, null])\"\r\n             class=\"default-form-icon-color\"\r\n             *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\r\n        ></i-tech-icon-button>\r\n        <i-tech-icon-button matSuffix [iconName]=\"'date_range'\" (buttonClick)=\"picker.open()\" class=\"default-form-icon-color\"></i-tech-icon-button>\r\n        <mat-date-range-picker #picker (closed)=\"isOpen = false;clickForFocusOut()\" (opened)=\"isOpen = true\"></mat-date-range-picker>\r\n        <mat-hint *ngIf=\"hintText && !errorMessage\">{{hintText}}</mat-hint>\r\n    </mat-form-field>\r\n</div>\r\n" }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], defaultValue: [{
+                type: Input
+            }], key: [{
+                type: Input
+            }], submit: [{
+                type: Input
+            }], clearValue: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], onePlaceholder: [{
+                type: Input
+            }], hintText: [{
+                type: Input
+            }], resetForm: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], picker: [{
+                type: ViewChild,
+                args: ['picker']
+            }], min: [{
+                type: ViewChild,
+                args: ['min']
+            }] } });
+
+/*
+ * Public API Surface of shared-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, DatePickerComponent, DateRangeDatepickerComponent, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, TextInputComponent };
+//# sourceMappingURL=i-tech-shared-components.mjs.map