i-tech-shared-components 1.1.34 → 1.1.36

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

@@ -153,6 +153,8 @@ var ButtonType;
     ButtonType["TEXT"] = "TEXT";
     /** A warning button with special styling to indicate caution or alert actions. */
     ButtonType["WARNING"] = "WARNING";
+    /** A warning outlined button with a border and no background. */
+    ButtonType["WARN_OUTLINE"] = "WARN_OUTLINE";
 })(ButtonType || (ButtonType = {}));
 
 var LabelTypeEnum;
@@ -441,7 +443,7 @@ class ButtonComponent {
             NgxMaskPipe,
             TranslatePipe,
             TranslateService
-        ], ngImport: i0, template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n        mat-flat-button\n        [attr.data-cy]=\"data_cy\"\n        [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n        [class.activated]=\"activated\"\n        [ngClass]=\"(customClass || '')\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n>\n        <span *ngIf=\"submit\" class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n  <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n        mat-button\n        [attr.data-cy]=\"data_cy\"\n        [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n        [class.activated]=\"activated\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n>\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n  <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"type === ButtonType.OUTLINE\"\n        [color]=\"color\"\n        mat-stroked-button\n        [attr.data-cy]=\"data_cy\"\n        [ngClass]=\"(customClass || '') \"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n        [class.activated]=\"activated\"\n>\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n  <span>{{text | translate}}</span>\n</button>\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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n        mat-flat-button\n        [attr.data-cy]=\"data_cy\"\n        [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n        [class.activated]=\"activated\"\n        [ngClass]=\"(customClass || '')\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n>\n        <span *ngIf=\"submit\" class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n  <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n        mat-button\n        [attr.data-cy]=\"data_cy\"\n        [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n        [class.activated]=\"activated\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n>\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n  <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.OUTLINE,ButtonType.WARN_OUTLINE].includes(type)\"\n        mat-stroked-button\n        [attr.data-cy]=\"data_cy\"\n        [ngClass]=\"(customClass || '') \"\n        [color]=\"type === ButtonType.WARN_OUTLINE ? 'warn' : color\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n        [class.activated]=\"activated\"\n>\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n  <span>{{text | translate}}</span>\n</button>\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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -457,7 +459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NgxMaskPipe,
                         TranslatePipe,
                         TranslateService
-                    ], template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n        mat-flat-button\n        [attr.data-cy]=\"data_cy\"\n        [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n        [class.activated]=\"activated\"\n        [ngClass]=\"(customClass || '')\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n>\n        <span *ngIf=\"submit\" class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n  <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n        mat-button\n        [attr.data-cy]=\"data_cy\"\n        [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n        [class.activated]=\"activated\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n>\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n  <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"type === ButtonType.OUTLINE\"\n        [color]=\"color\"\n        mat-stroked-button\n        [attr.data-cy]=\"data_cy\"\n        [ngClass]=\"(customClass || '') \"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n        [class.activated]=\"activated\"\n>\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n  <span>{{text | translate}}</span>\n</button>\n" }]
+                    ], template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n        mat-flat-button\n        [attr.data-cy]=\"data_cy\"\n        [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n        [class.activated]=\"activated\"\n        [ngClass]=\"(customClass || '')\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n>\n        <span *ngIf=\"submit\" class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n  <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n        mat-button\n        [attr.data-cy]=\"data_cy\"\n        [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n        [class.activated]=\"activated\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n>\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n  <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.OUTLINE,ButtonType.WARN_OUTLINE].includes(type)\"\n        mat-stroked-button\n        [attr.data-cy]=\"data_cy\"\n        [ngClass]=\"(customClass || '') \"\n        [color]=\"type === ButtonType.WARN_OUTLINE ? 'warn' : color\"\n        [disabled]=\"disabled || submit\"\n        (click)=\"onClick($event)\"\n        [class.activated]=\"activated\"\n>\n        <span *ngIf=\"submit\"  class=\"spinner-overlay\">\n            <mat-spinner diameter=\"16\"></mat-spinner>\n        </span>\n  <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n  <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n  <span>{{text | translate}}</span>\n</button>\n" }]
         }], propDecorators: { text: [{
                 type: Input
             }], data_cy: [{
@@ -558,6 +560,7 @@ class AutocompleteSelectComponent {
         this.firstRequest = false;
         this.showPlaceholder = true;
         this.isNeededForRecall = false;
+        this.selectedOptionForMultipleSelection = [];
         this.accessToNextRequest = true;
         this.disabled = false;
         this.blockRecallDefaultValueSetter = false;
@@ -675,6 +678,7 @@ class AutocompleteSelectComponent {
         }
         if (this.searchInput) {
             if (this.selectConfig.multiple) {
+                this.toggleShowingDataInSelectedOptionsMultipleCase(showingData);
                 this.searchInput?.nativeElement?.focus();
             }
             else {
@@ -684,6 +688,16 @@ class AutocompleteSelectComponent {
         this.setShowingValue(showingData);
         this.showPlaceholder = false;
     }
+    toggleShowingDataInSelectedOptionsMultipleCase(showingData) {
+        const showingDataByJson = JSON.stringify(showingData);
+        const indexOfExistingOption = this.selectedOptionForMultipleSelection.findIndex((optionValue) => JSON.stringify(optionValue) === showingDataByJson);
+        if (indexOfExistingOption >= 0) {
+            this.selectedOptionForMultipleSelection.splice(indexOfExistingOption, 1);
+        }
+        else {
+            this.selectedOptionForMultipleSelection.push(showingData);
+        }
+    }
     addNewItemEvent() {
         this.isNeededForRecall = true;
         this.emitAction.emit();
@@ -696,7 +710,19 @@ class AutocompleteSelectComponent {
         if (!data) {
             return;
         }
-        // TODO refactor this part fully
+        if (this.selectConfig.multiple && this.selectConfig.search) {
+            const fullText = [];
+            this.selectedOptionForMultipleSelection.forEach((optionData) => {
+                fullText.push(this.collectAndGetSelectionToShowForOneOption(optionData));
+            });
+            this.showingValue = fullText.join(',');
+        }
+        else {
+            this.showingValue = this.collectAndGetSelectionToShowForOneOption(data);
+        }
+        this.blockRecallDefaultValueSetter = true;
+    }
+    collectAndGetSelectionToShowForOneOption(data) {
         let include = data;
         let includeOptional = data;
         if (this.selectConfig.valueToShowByKey) {
@@ -726,8 +752,7 @@ class AutocompleteSelectComponent {
                 }
             }
         }
-        this.showingValue = include;
-        this.blockRecallDefaultValueSetter = true;
+        return include;
     }
     /**
      * Block another events.
@@ -863,7 +888,7 @@ class AutocompleteSelectComponent {
         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: "17.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\"\n     [ngClass]=\"{\n            'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n            'mat-select-with-search': selectConfig.search,\n            'without-label': selectConfig.hideLabel,\n            'invalid_field': ngControl.control.errors && submitValue,\n            'readonly-field': selectConfig.readOnly || ngControl.control.disabled\n         }\"\n     [matTooltip]=\"(selectConfig.hover && !ngControl.control.disabled ? ((selectConfig.hover || '') | translate) : '')\"\n     [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n     [matTooltipPosition]=\"'above'\"\n     *ngIf=\"selectConfig && ngControl\">\n\n  <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : selectConfig.readOnly || ngControl.control.disabled,\n          'invalid-label-color': !!(ngControl.control.errors && submitValue)\n        }\">\n      {{ selectConfig.label | translate }}\n    </mat-label>\n    <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n          [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\">*</span>\n  </div>\n\n\n  <!-- Search Input -->\n  <div class=\"search-input w-100\"\n       (click)=\"$event.stopPropagation();$event.preventDefault()\"\n       [ngClass]=\"{ hide_input_placeholder: showPlaceholder || ngControl.control.disabled }\"\n       *ngIf=\"selectConfig.search\"\n  >\n    <input autocomplete=\"off\"\n           id=\"searchInput\"\n           type=\"text\"\n           [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\n           #searchInput\n           [disabled]=\"ngControl.control.disabled || selectConfig.hover\"\n           [placeholder]=\"(ngControl.control.disabled || selectConfig.hover) ? '' : 'Search'\"\n           (focusout)=\"inputFocusOut()\"\n           (focus)=\"openSelection()\"\n           (keydown)=\"$event.stopPropagation()\"\n           (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n\n    <!-- Search Icon -->\n    <span class=\"search-icon\">\n            <i-tech-icon-button\n              class=\"mr-10\"\n              [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color'\n                                                                              : 'default-form-icon-color'\"\n              *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\n              [iconName]=\"selectConfig.iconPrefix || ''\"\n              [disabled]=\"selectConfig.readOnly || false\"\n              matPrefix\n            >\n            </i-tech-icon-button>\n        </span>\n  </div>\n\n  <!-- Placeholder/Selected Value Display -->\n  <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n    <div class=\"custom-placeholder\"\n         *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\n                 (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n         [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n    >\n      {{ ((selectConfig.placeholder || '') | translate) }}\n    </div>\n    <div class=\"custom-placeholder custom-value ellipsis\"\n         [ngClass]=\"{\n                'pr-42': selectConfig.iconUrl,\n                'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\n                'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled)\n                }\"\n         *ngIf=\"ngControl?.value\"\n    >\n      {{ selectConfig?.multiple ? (ngControl.value | arrayToString) : showingValue }}\n    </div>\n  </ng-container>\n\n  <!-- Custom Icon -->\n  <img class=\"left_icon_new pointer\"\n       alt=\"Toggle Selection\"\n       (click)=\"iconClick(matSelect, searchInput)\"\n       *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n       [src]=\"'assets/images/icons/global/' + (ngControl.control?.value && selectConfig?.activeStateIconUrl ?\n                                                selectConfig.activeStateIconUrl\n                                                : selectConfig.iconUrl)\">\n\n  <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig?.search ? focusSearchInput() : null\">\n    <!-- Material Select -->\n    <mat-select #matSelect=\"matSelect\"\n                [panelClass]=\"'autocomplete-transform-panel-location'\"\n                [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n                [aria-label]=\"selectConfig.label | translate\"\n                [id]=\"selectConfig.filtrationKey || ''\"\n                (opened)=\"registerPanelScrollEvent(matSelect)\"\n                (openedChange)=\"openedChange($event)\"\n                [formControl]=\"ngControl.control\"\n                [multiple]=\"selectConfig.multiple\"\n                (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n                [errorStateMatcher]=\"customErrorStateMatcher\"\n                [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n                [disabled]=\"ngControl.control.disabled\"\n    >\n\n      <!-- Loading State -->\n      <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n        <div class=\"request_loading\">\n          <img ngSrc=\"./loader.svg\" alt=\"\" height=\"200\" width=\"200\"/>\n        </div>\n      </mat-option>\n\n      <!-- Options -->\n      <ng-container *ngIf=\"data?.length && !pending\">\n        <!-- Add New Option -->\n        <mat-option *ngIf=\"selectConfig.actions\"\n                    class=\"pointer add_new\"\n                    disabled\n                    (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n          <!--(click)=\"ngControl.control.reset(null);\n              matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n          <i-tech-button\n            [type]=\"ButtonType.OUTLINE\"\n            [fontIcon]=\"'add'\"\n            [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n            [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n          </i-tech-button>\n        </mat-option>\n\n        <!-- Regular Options -->\n        <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (mouseup)=\"optionClick(item)\"\n                      (mousedown)=\"preventDefault($event)\">\n            @if (selectConfig?.needTranslateOptions) {\n              {{\n                ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n                  : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n              }}\n            }@else {\n              {{\n              ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n                : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n              }}\n            }\n\n          </mat-option>\n        </ng-container>\n\n        <!-- Custom Text Options -->\n        <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (mouseup)=\"optionClick(item)\"\n                      (mousedown)=\"preventDefault($event)\"\n                      [disabled]=\"selectConfig?.changeText[item].disabled\">\n            {{ selectConfig?.needTranslateOptions ? (selectConfig?.changeText[item].text | translate ) : selectConfig?.changeText[item].text}}\n          </mat-option>\n        </ng-container>\n      </ng-container>\n\n      <!-- Empty State -->\n      <ng-container *ngIf=\"!pending && !data.length\">\n        <mat-option disabled class=\"empty_selection_state\">\n          <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n            <span>{{ 'dropdown_no_items' | translate }}</span>\n            <div class=\"mt-10\">\n              <i-tech-button\n                *ngIf=\"selectConfig?.actions\"\n                [type]=\"ButtonType.OUTLINE\"\n                (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n                [customClass]=\"'mat-autocomplete-select-button'\"\n                [fontIcon]=\"'add'\"\n                [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n              </i-tech-button>\n            </div>\n          </div>\n        </mat-option>\n      </ng-container>\n    </mat-select>\n    <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !selectConfig['iconPrefixColor']\n                                        && (selectConfig.readOnly || ngControl.control.disabled),\n                    'default-form-icon-color' : !selectConfig['iconPrefixColor']\n                                        && !(selectConfig.readOnly || ngControl.control.disabled)\n                    }\"\n              [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\n    >{{ selectConfig.iconPrefix }}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n              matPrefix\n              [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\n              [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n    ></mat-icon>\n\n    <i-tech-icon-button\n      *ngIf=\"selectConfig.search && selectConfig.clearable && !ngControl.control.disabled && !!ngControl.control.value\"\n      iconName=\"cancel\"\n      matSuffix\n      [disabled]=\"selectConfig.readOnly || false\"\n      [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"\n        $event.stopPropagation();\n        $event.preventDefault();\n        ngControl.control.reset(null);\n        matSelect._onBlur();\n        closePanelAndUnsetFocus()\n      \"\n    >\n    </i-tech-icon-button>\n    <mat-icon\n      matSuffix\n      class=\"select-arrow\"\n      [class.open]=\"matSelect.panelOpen\"\n      [ngClass]=\"{\n            'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\n            'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled),\n            'mt-8': !!ngControl.control.value && selectConfig.clearable\n         }\"\n    >\n      keyboard_arrow_down\n    </mat-icon>\n    <!-- Error Message -->\n    <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n      {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Reset Button -->\n  <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\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: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "data_cy", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "pipe", type: GetValueByKeyFromObjectPipe, name: "getValueByKeyFromObject" }, { kind: "pipe", type: ArrayToStringPipe, name: "arrayToString" }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: ClearValueComponent, selector: "i-tech-clear-value", inputs: ["className", "additionalClass"], outputs: ["resetValue"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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\"\n     [ngClass]=\"{\n            'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n            'mat-select-with-search': selectConfig.search,\n            'without-label': selectConfig.hideLabel,\n            'invalid_field': ngControl.control.errors && submitValue,\n            'readonly-field': selectConfig.readOnly || ngControl.control.disabled\n         }\"\n     [matTooltip]=\"(selectConfig.hover && !ngControl.control.disabled ? ((selectConfig.hover || '') | translate) : '')\"\n     [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n     [matTooltipPosition]=\"'above'\"\n     *ngIf=\"selectConfig && ngControl\">\n\n  <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : selectConfig.readOnly || ngControl.control.disabled,\n          'invalid-label-color': !!(ngControl.control.errors && submitValue)\n        }\">\n      {{ selectConfig.label | translate }}\n    </mat-label>\n    <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n          [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\">*</span>\n  </div>\n\n\n  <!-- Search Input -->\n  <div class=\"search-input w-100\"\n       (click)=\"$event.stopPropagation();$event.preventDefault()\"\n       [ngClass]=\"{ hide_input_placeholder: showPlaceholder || ngControl.control.disabled }\"\n       *ngIf=\"selectConfig.search\"\n  >\n    <input autocomplete=\"off\"\n           id=\"searchInput\"\n           type=\"text\"\n           [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\n           #searchInput\n           [disabled]=\"ngControl.control.disabled || selectConfig.hover\"\n           [placeholder]=\"(ngControl.control.disabled || selectConfig.hover) ? '' : 'Search'\"\n           (focusout)=\"inputFocusOut()\"\n           (focus)=\"openSelection()\"\n           (keydown)=\"$event.stopPropagation()\"\n           (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n\n    <!-- Search Icon -->\n    <span class=\"search-icon\">\n            <i-tech-icon-button\n              class=\"mr-10\"\n              [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color'\n                                                                              : 'default-form-icon-color'\"\n              *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\n              [iconName]=\"selectConfig.iconPrefix || ''\"\n              [disabled]=\"selectConfig.readOnly || false\"\n              matPrefix\n            >\n            </i-tech-icon-button>\n        </span>\n  </div>\n\n  <!-- Placeholder/Selected Value Display -->\n  <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n    <div class=\"custom-placeholder\"\n         *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\n                 (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n         [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n    >\n      {{ ((selectConfig.placeholder || '') | translate) }}\n    </div>\n    <div class=\"custom-placeholder custom-value ellipsis\"\n         [ngClass]=\"{\n                'pr-42': selectConfig.iconUrl,\n                'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\n                'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled)\n                }\"\n         *ngIf=\"ngControl?.value\"\n    >\n      {{showingValue}}\n    </div>\n  </ng-container>\n\n  <!-- Custom Icon -->\n  <img class=\"left_icon_new pointer\"\n       alt=\"Toggle Selection\"\n       (click)=\"iconClick(matSelect, searchInput)\"\n       *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n       [src]=\"'assets/images/icons/global/' + (ngControl.control?.value && selectConfig?.activeStateIconUrl ?\n                                                selectConfig.activeStateIconUrl\n                                                : selectConfig.iconUrl)\">\n\n  <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig?.search ? focusSearchInput() : null\">\n    <!-- Material Select -->\n    <mat-select #matSelect=\"matSelect\"\n                [panelClass]=\"'autocomplete-transform-panel-location'\"\n                [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n                [aria-label]=\"selectConfig.label | translate\"\n                [id]=\"selectConfig.filtrationKey || ''\"\n                (opened)=\"registerPanelScrollEvent(matSelect)\"\n                (openedChange)=\"openedChange($event)\"\n                [formControl]=\"ngControl.control\"\n                [multiple]=\"selectConfig.multiple\"\n                (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n                [errorStateMatcher]=\"customErrorStateMatcher\"\n                [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n                [disabled]=\"ngControl.control.disabled\"\n    >\n\n      <!-- Loading State -->\n      <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n        <div class=\"request_loading\">\n          <img ngSrc=\"./loader.svg\" alt=\"\" height=\"200\" width=\"200\"/>\n        </div>\n      </mat-option>\n\n      <!-- Options -->\n      <ng-container *ngIf=\"data?.length && !pending\">\n        <!-- Add New Option -->\n        <mat-option *ngIf=\"selectConfig.actions\"\n                    class=\"pointer add_new\"\n                    disabled\n                    (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n          <!--(click)=\"ngControl.control.reset(null);\n              matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n          <i-tech-button\n            [type]=\"ButtonType.OUTLINE\"\n            [fontIcon]=\"'add'\"\n            [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n            [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n          </i-tech-button>\n        </mat-option>\n\n        <!-- Regular Options -->\n        <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (mouseup)=\"optionClick(item)\"\n                      (mousedown)=\"preventDefault($event)\">\n            @if (selectConfig?.needTranslateOptions) {\n            {{\n            ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n              : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n            }}\n            }@else {\n            {{\n            ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n              : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n            }}\n            }\n\n          </mat-option>\n        </ng-container>\n\n        <!-- Custom Text Options -->\n        <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (mouseup)=\"optionClick(item)\"\n                      (mousedown)=\"preventDefault($event)\"\n                      [disabled]=\"selectConfig?.changeText[item].disabled\">\n            {{ selectConfig?.needTranslateOptions ? (selectConfig?.changeText[item].text | translate ) : selectConfig?.changeText[item].text}}\n          </mat-option>\n        </ng-container>\n      </ng-container>\n\n      <!-- Empty State -->\n      <ng-container *ngIf=\"!pending && !data.length\">\n        <mat-option disabled class=\"empty_selection_state\">\n          <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n            <span>{{ 'dropdown_no_items' | translate }}</span>\n            <div class=\"mt-10\">\n              <i-tech-button\n                *ngIf=\"selectConfig?.actions\"\n                [type]=\"ButtonType.OUTLINE\"\n                (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n                [customClass]=\"'mat-autocomplete-select-button'\"\n                [fontIcon]=\"'add'\"\n                [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n              </i-tech-button>\n            </div>\n          </div>\n        </mat-option>\n      </ng-container>\n    </mat-select>\n    <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !selectConfig['iconPrefixColor']\n                                        && (selectConfig.readOnly || ngControl.control.disabled),\n                    'default-form-icon-color' : !selectConfig['iconPrefixColor']\n                                        && !(selectConfig.readOnly || ngControl.control.disabled)\n                    }\"\n              [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\n    >{{ selectConfig.iconPrefix }}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n              matPrefix\n              [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\n              [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n    ></mat-icon>\n\n    <i-tech-icon-button\n      *ngIf=\"selectConfig.search && selectConfig.clearable && !ngControl.control.disabled && !!ngControl.control.value\"\n      iconName=\"cancel\"\n      matSuffix\n      [disabled]=\"selectConfig.readOnly || false\"\n      [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"\n        $event.stopPropagation();\n        $event.preventDefault();\n        ngControl.control.reset(null);\n        matSelect._onBlur();\n        closePanelAndUnsetFocus()\n      \"\n    >\n    </i-tech-icon-button>\n    <mat-icon\n      matSuffix\n      class=\"select-arrow\"\n      [class.open]=\"matSelect.panelOpen\"\n      [ngClass]=\"{\n            'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\n            'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled),\n            'mt-8': !!ngControl.control.value && selectConfig.clearable\n         }\"\n    >\n      keyboard_arrow_down\n    </mat-icon>\n    <!-- Error Message -->\n    <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n      {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Reset Button -->\n  <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\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: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "data_cy", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "pipe", type: GetValueByKeyFromObjectPipe, name: "getValueByKeyFromObject" }, { kind: "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: ["resetValue"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteSelectComponent, decorators: [{
             type: Component,
@@ -884,7 +909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         GenerateErrorMessagesPipe,
                         ClearValueComponent,
                         MatFormFieldModule
-                    ], standalone: true, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n     [ngClass]=\"{\n            'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n            'mat-select-with-search': selectConfig.search,\n            'without-label': selectConfig.hideLabel,\n            'invalid_field': ngControl.control.errors && submitValue,\n            'readonly-field': selectConfig.readOnly || ngControl.control.disabled\n         }\"\n     [matTooltip]=\"(selectConfig.hover && !ngControl.control.disabled ? ((selectConfig.hover || '') | translate) : '')\"\n     [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n     [matTooltipPosition]=\"'above'\"\n     *ngIf=\"selectConfig && ngControl\">\n\n  <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : selectConfig.readOnly || ngControl.control.disabled,\n          'invalid-label-color': !!(ngControl.control.errors && submitValue)\n        }\">\n      {{ selectConfig.label | translate }}\n    </mat-label>\n    <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n          [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\">*</span>\n  </div>\n\n\n  <!-- Search Input -->\n  <div class=\"search-input w-100\"\n       (click)=\"$event.stopPropagation();$event.preventDefault()\"\n       [ngClass]=\"{ hide_input_placeholder: showPlaceholder || ngControl.control.disabled }\"\n       *ngIf=\"selectConfig.search\"\n  >\n    <input autocomplete=\"off\"\n           id=\"searchInput\"\n           type=\"text\"\n           [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\n           #searchInput\n           [disabled]=\"ngControl.control.disabled || selectConfig.hover\"\n           [placeholder]=\"(ngControl.control.disabled || selectConfig.hover) ? '' : 'Search'\"\n           (focusout)=\"inputFocusOut()\"\n           (focus)=\"openSelection()\"\n           (keydown)=\"$event.stopPropagation()\"\n           (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n\n    <!-- Search Icon -->\n    <span class=\"search-icon\">\n            <i-tech-icon-button\n              class=\"mr-10\"\n              [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color'\n                                                                              : 'default-form-icon-color'\"\n              *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\n              [iconName]=\"selectConfig.iconPrefix || ''\"\n              [disabled]=\"selectConfig.readOnly || false\"\n              matPrefix\n            >\n            </i-tech-icon-button>\n        </span>\n  </div>\n\n  <!-- Placeholder/Selected Value Display -->\n  <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n    <div class=\"custom-placeholder\"\n         *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\n                 (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n         [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n    >\n      {{ ((selectConfig.placeholder || '') | translate) }}\n    </div>\n    <div class=\"custom-placeholder custom-value ellipsis\"\n         [ngClass]=\"{\n                'pr-42': selectConfig.iconUrl,\n                'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\n                'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled)\n                }\"\n         *ngIf=\"ngControl?.value\"\n    >\n      {{ selectConfig?.multiple ? (ngControl.value | arrayToString) : showingValue }}\n    </div>\n  </ng-container>\n\n  <!-- Custom Icon -->\n  <img class=\"left_icon_new pointer\"\n       alt=\"Toggle Selection\"\n       (click)=\"iconClick(matSelect, searchInput)\"\n       *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n       [src]=\"'assets/images/icons/global/' + (ngControl.control?.value && selectConfig?.activeStateIconUrl ?\n                                                selectConfig.activeStateIconUrl\n                                                : selectConfig.iconUrl)\">\n\n  <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig?.search ? focusSearchInput() : null\">\n    <!-- Material Select -->\n    <mat-select #matSelect=\"matSelect\"\n                [panelClass]=\"'autocomplete-transform-panel-location'\"\n                [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n                [aria-label]=\"selectConfig.label | translate\"\n                [id]=\"selectConfig.filtrationKey || ''\"\n                (opened)=\"registerPanelScrollEvent(matSelect)\"\n                (openedChange)=\"openedChange($event)\"\n                [formControl]=\"ngControl.control\"\n                [multiple]=\"selectConfig.multiple\"\n                (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n                [errorStateMatcher]=\"customErrorStateMatcher\"\n                [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n                [disabled]=\"ngControl.control.disabled\"\n    >\n\n      <!-- Loading State -->\n      <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n        <div class=\"request_loading\">\n          <img ngSrc=\"./loader.svg\" alt=\"\" height=\"200\" width=\"200\"/>\n        </div>\n      </mat-option>\n\n      <!-- Options -->\n      <ng-container *ngIf=\"data?.length && !pending\">\n        <!-- Add New Option -->\n        <mat-option *ngIf=\"selectConfig.actions\"\n                    class=\"pointer add_new\"\n                    disabled\n                    (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n          <!--(click)=\"ngControl.control.reset(null);\n              matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n          <i-tech-button\n            [type]=\"ButtonType.OUTLINE\"\n            [fontIcon]=\"'add'\"\n            [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n            [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n          </i-tech-button>\n        </mat-option>\n\n        <!-- Regular Options -->\n        <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (mouseup)=\"optionClick(item)\"\n                      (mousedown)=\"preventDefault($event)\">\n            @if (selectConfig?.needTranslateOptions) {\n              {{\n                ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n                  : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n              }}\n            }@else {\n              {{\n              ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n                : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n              }}\n            }\n\n          </mat-option>\n        </ng-container>\n\n        <!-- Custom Text Options -->\n        <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (mouseup)=\"optionClick(item)\"\n                      (mousedown)=\"preventDefault($event)\"\n                      [disabled]=\"selectConfig?.changeText[item].disabled\">\n            {{ selectConfig?.needTranslateOptions ? (selectConfig?.changeText[item].text | translate ) : selectConfig?.changeText[item].text}}\n          </mat-option>\n        </ng-container>\n      </ng-container>\n\n      <!-- Empty State -->\n      <ng-container *ngIf=\"!pending && !data.length\">\n        <mat-option disabled class=\"empty_selection_state\">\n          <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n            <span>{{ 'dropdown_no_items' | translate }}</span>\n            <div class=\"mt-10\">\n              <i-tech-button\n                *ngIf=\"selectConfig?.actions\"\n                [type]=\"ButtonType.OUTLINE\"\n                (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n                [customClass]=\"'mat-autocomplete-select-button'\"\n                [fontIcon]=\"'add'\"\n                [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n              </i-tech-button>\n            </div>\n          </div>\n        </mat-option>\n      </ng-container>\n    </mat-select>\n    <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !selectConfig['iconPrefixColor']\n                                        && (selectConfig.readOnly || ngControl.control.disabled),\n                    'default-form-icon-color' : !selectConfig['iconPrefixColor']\n                                        && !(selectConfig.readOnly || ngControl.control.disabled)\n                    }\"\n              [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\n    >{{ selectConfig.iconPrefix }}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n              matPrefix\n              [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\n              [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n    ></mat-icon>\n\n    <i-tech-icon-button\n      *ngIf=\"selectConfig.search && selectConfig.clearable && !ngControl.control.disabled && !!ngControl.control.value\"\n      iconName=\"cancel\"\n      matSuffix\n      [disabled]=\"selectConfig.readOnly || false\"\n      [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"\n        $event.stopPropagation();\n        $event.preventDefault();\n        ngControl.control.reset(null);\n        matSelect._onBlur();\n        closePanelAndUnsetFocus()\n      \"\n    >\n    </i-tech-icon-button>\n    <mat-icon\n      matSuffix\n      class=\"select-arrow\"\n      [class.open]=\"matSelect.panelOpen\"\n      [ngClass]=\"{\n            'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\n            'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled),\n            'mt-8': !!ngControl.control.value && selectConfig.clearable\n         }\"\n    >\n      keyboard_arrow_down\n    </mat-icon>\n    <!-- Error Message -->\n    <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n      {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Reset Button -->\n  <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\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"] }]
+                    ], standalone: true, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n     [ngClass]=\"{\n            'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n            'mat-select-with-search': selectConfig.search,\n            'without-label': selectConfig.hideLabel,\n            'invalid_field': ngControl.control.errors && submitValue,\n            'readonly-field': selectConfig.readOnly || ngControl.control.disabled\n         }\"\n     [matTooltip]=\"(selectConfig.hover && !ngControl.control.disabled ? ((selectConfig.hover || '') | translate) : '')\"\n     [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n     [matTooltipPosition]=\"'above'\"\n     *ngIf=\"selectConfig && ngControl\">\n\n  <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : selectConfig.readOnly || ngControl.control.disabled,\n          'invalid-label-color': !!(ngControl.control.errors && submitValue)\n        }\">\n      {{ selectConfig.label | translate }}\n    </mat-label>\n    <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n          [ngClass]=\"{'readonly-color' : ngControl.control.disabled}\">*</span>\n  </div>\n\n\n  <!-- Search Input -->\n  <div class=\"search-input w-100\"\n       (click)=\"$event.stopPropagation();$event.preventDefault()\"\n       [ngClass]=\"{ hide_input_placeholder: showPlaceholder || ngControl.control.disabled }\"\n       *ngIf=\"selectConfig.search\"\n  >\n    <input autocomplete=\"off\"\n           id=\"searchInput\"\n           type=\"text\"\n           [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\n           #searchInput\n           [disabled]=\"ngControl.control.disabled || selectConfig.hover\"\n           [placeholder]=\"(ngControl.control.disabled || selectConfig.hover) ? '' : 'Search'\"\n           (focusout)=\"inputFocusOut()\"\n           (focus)=\"openSelection()\"\n           (keydown)=\"$event.stopPropagation()\"\n           (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n\n    <!-- Search Icon -->\n    <span class=\"search-icon\">\n            <i-tech-icon-button\n              class=\"mr-10\"\n              [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color'\n                                                                              : 'default-form-icon-color'\"\n              *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\n              [iconName]=\"selectConfig.iconPrefix || ''\"\n              [disabled]=\"selectConfig.readOnly || false\"\n              matPrefix\n            >\n            </i-tech-icon-button>\n        </span>\n  </div>\n\n  <!-- Placeholder/Selected Value Display -->\n  <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n    <div class=\"custom-placeholder\"\n         *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\n                 (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n         [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n    >\n      {{ ((selectConfig.placeholder || '') | translate) }}\n    </div>\n    <div class=\"custom-placeholder custom-value ellipsis\"\n         [ngClass]=\"{\n                'pr-42': selectConfig.iconUrl,\n                'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\n                'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled)\n                }\"\n         *ngIf=\"ngControl?.value\"\n    >\n      {{showingValue}}\n    </div>\n  </ng-container>\n\n  <!-- Custom Icon -->\n  <img class=\"left_icon_new pointer\"\n       alt=\"Toggle Selection\"\n       (click)=\"iconClick(matSelect, searchInput)\"\n       *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n       [src]=\"'assets/images/icons/global/' + (ngControl.control?.value && selectConfig?.activeStateIconUrl ?\n                                                selectConfig.activeStateIconUrl\n                                                : selectConfig.iconUrl)\">\n\n  <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig?.search ? focusSearchInput() : null\">\n    <!-- Material Select -->\n    <mat-select #matSelect=\"matSelect\"\n                [panelClass]=\"'autocomplete-transform-panel-location'\"\n                [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n                [aria-label]=\"selectConfig.label | translate\"\n                [id]=\"selectConfig.filtrationKey || ''\"\n                (opened)=\"registerPanelScrollEvent(matSelect)\"\n                (openedChange)=\"openedChange($event)\"\n                [formControl]=\"ngControl.control\"\n                [multiple]=\"selectConfig.multiple\"\n                (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n                [errorStateMatcher]=\"customErrorStateMatcher\"\n                [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n                [disabled]=\"ngControl.control.disabled\"\n    >\n\n      <!-- Loading State -->\n      <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n        <div class=\"request_loading\">\n          <img ngSrc=\"./loader.svg\" alt=\"\" height=\"200\" width=\"200\"/>\n        </div>\n      </mat-option>\n\n      <!-- Options -->\n      <ng-container *ngIf=\"data?.length && !pending\">\n        <!-- Add New Option -->\n        <mat-option *ngIf=\"selectConfig.actions\"\n                    class=\"pointer add_new\"\n                    disabled\n                    (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n          <!--(click)=\"ngControl.control.reset(null);\n              matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n          <i-tech-button\n            [type]=\"ButtonType.OUTLINE\"\n            [fontIcon]=\"'add'\"\n            [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n            [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n          </i-tech-button>\n        </mat-option>\n\n        <!-- Regular Options -->\n        <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (mouseup)=\"optionClick(item)\"\n                      (mousedown)=\"preventDefault($event)\">\n            @if (selectConfig?.needTranslateOptions) {\n            {{\n            ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n              : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n            }}\n            }@else {\n            {{\n            ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n              : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n            }}\n            }\n\n          </mat-option>\n        </ng-container>\n\n        <!-- Custom Text Options -->\n        <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n          <mat-option *ngFor=\"let item of data\"\n                      [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n                      (mouseup)=\"optionClick(item)\"\n                      (mousedown)=\"preventDefault($event)\"\n                      [disabled]=\"selectConfig?.changeText[item].disabled\">\n            {{ selectConfig?.needTranslateOptions ? (selectConfig?.changeText[item].text | translate ) : selectConfig?.changeText[item].text}}\n          </mat-option>\n        </ng-container>\n      </ng-container>\n\n      <!-- Empty State -->\n      <ng-container *ngIf=\"!pending && !data.length\">\n        <mat-option disabled class=\"empty_selection_state\">\n          <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n            <span>{{ 'dropdown_no_items' | translate }}</span>\n            <div class=\"mt-10\">\n              <i-tech-button\n                *ngIf=\"selectConfig?.actions\"\n                [type]=\"ButtonType.OUTLINE\"\n                (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n                [customClass]=\"'mat-autocomplete-select-button'\"\n                [fontIcon]=\"'add'\"\n                [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n              </i-tech-button>\n            </div>\n          </div>\n        </mat-option>\n      </ng-container>\n    </mat-select>\n    <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !selectConfig['iconPrefixColor']\n                                        && (selectConfig.readOnly || ngControl.control.disabled),\n                    'default-form-icon-color' : !selectConfig['iconPrefixColor']\n                                        && !(selectConfig.readOnly || ngControl.control.disabled)\n                    }\"\n              [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\n    >{{ selectConfig.iconPrefix }}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n              matPrefix\n              [matTooltip]=\"((selectConfig?.['iconPrefixTooltip'] || '') | translate)\"\n              [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n    ></mat-icon>\n\n    <i-tech-icon-button\n      *ngIf=\"selectConfig.search && selectConfig.clearable && !ngControl.control.disabled && !!ngControl.control.value\"\n      iconName=\"cancel\"\n      matSuffix\n      [disabled]=\"selectConfig.readOnly || false\"\n      [ngClass]=\"selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"\n        $event.stopPropagation();\n        $event.preventDefault();\n        ngControl.control.reset(null);\n        matSelect._onBlur();\n        closePanelAndUnsetFocus()\n      \"\n    >\n    </i-tech-icon-button>\n    <mat-icon\n      matSuffix\n      class=\"select-arrow\"\n      [class.open]=\"matSelect.panelOpen\"\n      [ngClass]=\"{\n            'readonly-color': selectConfig.readOnly || ngControl.control.disabled,\n            'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled),\n            'mt-8': !!ngControl.control.value && selectConfig.clearable\n         }\"\n    >\n      keyboard_arrow_down\n    </mat-icon>\n    <!-- Error Message -->\n    <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n      {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n    </mat-error>\n  </mat-form-field>\n\n  <!-- Reset Button -->\n  <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\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']