npm - i-tech-shared-components - Versions diffs - 1.3.3 → 1.3.6 - Mend

i-tech-shared-components 1.3.3 → 1.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

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

@@ -7,7 +7,7 @@ import { NgControl, FormControlName, ReactiveFormsModule, UntypedFormGroup, Unty
 import moment from 'moment';
 import * as momentTimezone from 'moment-timezone';
 import { MatIconButton, MatFabButton, MatButton } from '@angular/material/button';
-import { NgClass, NgIf, NgOptimizedImage, NgFor, NgForOf, UpperCasePipe, SlicePipe, CommonModule } from '@angular/common';
+import { NgClass, NgIf, NgOptimizedImage, NgFor, NgForOf, UpperCasePipe, SlicePipe, LowerCasePipe, CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/material/tooltip';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$1 from '@angular/material/icon';
@@ -462,7 +462,7 @@ class TextInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextInputComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter", valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\n  <div class=\"w-100\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : inputData.readOnly || ngControl.control.disabled,\n          'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n          }\"\n               *ngIf=\"inputData.label\">\n      {{ inputData.label | translate }}\n    </mat-label>\n    <span *ngIf=\"inputData.required\" class=\"required-input\"\n          [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\n  </div>\n  <mat-form-field appearance=\"outline\" class=\"w-100\"\n                  [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\n  >\n    <!-- Leading Icon -->\n    <mat-icon *ngIf=\"inputData.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !inputData.iconPrefixColor &&\n                                        (inputData.readOnly || ngControl.control.disabled),\n                    'default-form-icon-color' : !inputData.iconPrefixColor &&\n                                                !(inputData.readOnly || ngControl.control.disabled)\n                    }\"\n              [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n              [style.color]=\"inputData.iconPrefixColor || null\"\n    >{{ inputData.iconPrefix }}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n              matPrefix\n              [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n              [svgIcon]=\"inputData.iconPrefixSvg\"\n    ></mat-icon>\n\n    <!-- Input Field -->\n    <input matInput #inputElement\n           *ngIf=\"!inputData.textarea\"\n           [type]=\"inputData.type || 'text'\"\n           [readonly]=\"inputData.readOnly\"\n           [placeholder]=\"(inputData.placeholder || '') | translate\"\n           [pattern]=\"inputData.pattern!\"\n           [formControl]=\"ngControl.control\"\n           [mask]=\"inputData.mask || ''\"\n           [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\n           [inputMask]=\"inputData.inputMask!\"\n           [float]=\"'' + (inputData.float || false)\"\n           [min]=\"('' + inputData.min)\"\n           [max]=\"('' + inputData.max)\"\n           [errorStateMatcher]=\"customErrorStateMatcher\"\n           (blur)=\"onFocusOut()\"\n           (keyup)=\"onValueChange()\"\n           (change)=\"onValueChange()\"\n    >\n\n    <textarea matInput\n              *ngIf=\"inputData.textarea\"\n              [type]=\"inputData.type || 'text'\"\n              [readonly]=\"inputData.readOnly\"\n              [placeholder]=\"(inputData.placeholder || '') | translate\"\n              [pattern]=\"inputData.pattern!\"\n              [formControl]=\"ngControl.control\"\n              [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\"\n              [errorStateMatcher]=\"customErrorStateMatcher\"\n              (keyup)=\"onValueChange()\"\n              (change)=\"onValueChange()\"\n    ></textarea>\n\n    <!-- Clear Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.clearable\"\n      iconName=\"cancel\"\n      matSuffix\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"clear()\"\n    >\n    </i-tech-icon-button>\n\n    <i-tech-icon-button\n      *ngIf=\"inputData.type === 'password'\"\n      [iconName]=\"closed ? 'visible' : 'visibility_off'\"\n      matSuffix\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"toggleEye()\"\n    >\n    </i-tech-icon-button>\n\n    <!-- Trailing Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.iconSuffix\"\n      [iconName]=\"inputData.iconSuffix\"\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled  || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      matSuffix\n    >\n    </i-tech-icon-button>\n\n    <!-- Error Messages -->\n    <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n      {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n    </mat-error>\n\n    <!-- Helper Text -->\n    <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n      {{ inputData.hint | translate }}\n    </mat-hint>\n  </mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter", valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\n  <div class=\"w-100\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : inputData.readOnly || ngControl.control.disabled,\n          'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n          }\"\n               *ngIf=\"inputData.label\">\n      {{ inputData.label | translate }}\n    </mat-label>\n    <span *ngIf=\"inputData.required\" class=\"required-input\"\n          [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\n  </div>\n  <mat-form-field appearance=\"outline\" class=\"w-100\"\n                  [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\n  >\n    <!-- Leading Icon -->\n    <mat-icon *ngIf=\"inputData.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !inputData.iconPrefixColor &&\n                                        (inputData.readOnly || ngControl.control.disabled),\n                    'default-form-icon-color' : !inputData.iconPrefixColor &&\n                                                !(inputData.readOnly || ngControl.control.disabled)\n                    }\"\n              [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n              [style.color]=\"inputData.iconPrefixColor || null\"\n    >{{ inputData.iconPrefix }}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n              matPrefix\n              [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n              [svgIcon]=\"inputData.iconPrefixSvg\"\n    ></mat-icon>\n\n    <!-- Input Field -->\n    <input matInput #inputElement\n           *ngIf=\"!inputData.textarea\"\n           [type]=\"inputData.type || 'text'\"\n           [readonly]=\"inputData.readOnly\"\n           [placeholder]=\"(inputData.placeholder || '') | translate\"\n           [pattern]=\"inputData.pattern!\"\n           [formControl]=\"ngControl.control\"\n           [mask]=\"inputData.mask || ''\"\n           [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\n           [inputMask]=\"inputData.inputMask!\"\n           [float]=\"'' + (inputData.float || false)\"\n           [min]=\"('' + inputData.min)\"\n           [max]=\"('' + inputData.max)\"\n           [errorStateMatcher]=\"customErrorStateMatcher\"\n           (blur)=\"onFocusOut()\"\n           (keyup)=\"onValueChange()\"\n           (change)=\"onValueChange()\"\n    >\n\n    <textarea matInput\n              *ngIf=\"inputData.textarea\"\n              [type]=\"inputData.type || 'text'\"\n              [readonly]=\"inputData.readOnly\"\n              [placeholder]=\"(inputData.placeholder || '') | translate\"\n              [pattern]=\"inputData.pattern!\"\n              [formControl]=\"ngControl.control\"\n              [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\"\n              [errorStateMatcher]=\"customErrorStateMatcher\"\n              (keyup)=\"onValueChange()\"\n              (change)=\"onValueChange()\"\n    ></textarea>\n\n    <!-- Clear Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.clearable\"\n      iconName=\"cancel\"\n      matSuffix\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"clear()\"\n    >\n    </i-tech-icon-button>\n\n    <i-tech-icon-button\n      *ngIf=\"inputData.type === 'password'\"\n      [iconName]=\"closed ? 'visible' : 'visibility_off'\"\n      matSuffix\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"toggleEye()\"\n    >\n    </i-tech-icon-button>\n\n    <!-- Trailing Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.iconSuffix\"\n      [iconName]=\"inputData.iconSuffix\"\n      [matTooltip]=\"inputData.iconSuffixTooltip ? (inputData.iconSuffixTooltip | translate) : ''\"\n      [matTooltipPosition]=\"'right'\"\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled  || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      matSuffix\n    >\n    </i-tech-icon-button>\n\n    <!-- Error Messages -->\n    <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n      {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n    </mat-error>\n\n    <!-- Helper Text -->\n    <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n      {{ inputData.hint | translate }}\n    </mat-hint>\n  </mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], 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: "19.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -479,7 +479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         InputMaskDirective,
                         NgxMaskDirective,
                         MatFormFieldModule
-                    ], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\n  <div class=\"w-100\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : inputData.readOnly || ngControl.control.disabled,\n          'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n          }\"\n               *ngIf=\"inputData.label\">\n      {{ inputData.label | translate }}\n    </mat-label>\n    <span *ngIf=\"inputData.required\" class=\"required-input\"\n          [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\n  </div>\n  <mat-form-field appearance=\"outline\" class=\"w-100\"\n                  [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\n  >\n    <!-- Leading Icon -->\n    <mat-icon *ngIf=\"inputData.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !inputData.iconPrefixColor &&\n                                        (inputData.readOnly || ngControl.control.disabled),\n                    'default-form-icon-color' : !inputData.iconPrefixColor &&\n                                                !(inputData.readOnly || ngControl.control.disabled)\n                    }\"\n              [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n              [style.color]=\"inputData.iconPrefixColor || null\"\n    >{{ inputData.iconPrefix }}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n              matPrefix\n              [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n              [svgIcon]=\"inputData.iconPrefixSvg\"\n    ></mat-icon>\n\n    <!-- Input Field -->\n    <input matInput #inputElement\n           *ngIf=\"!inputData.textarea\"\n           [type]=\"inputData.type || 'text'\"\n           [readonly]=\"inputData.readOnly\"\n           [placeholder]=\"(inputData.placeholder || '') | translate\"\n           [pattern]=\"inputData.pattern!\"\n           [formControl]=\"ngControl.control\"\n           [mask]=\"inputData.mask || ''\"\n           [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\n           [inputMask]=\"inputData.inputMask!\"\n           [float]=\"'' + (inputData.float || false)\"\n           [min]=\"('' + inputData.min)\"\n           [max]=\"('' + inputData.max)\"\n           [errorStateMatcher]=\"customErrorStateMatcher\"\n           (blur)=\"onFocusOut()\"\n           (keyup)=\"onValueChange()\"\n           (change)=\"onValueChange()\"\n    >\n\n    <textarea matInput\n              *ngIf=\"inputData.textarea\"\n              [type]=\"inputData.type || 'text'\"\n              [readonly]=\"inputData.readOnly\"\n              [placeholder]=\"(inputData.placeholder || '') | translate\"\n              [pattern]=\"inputData.pattern!\"\n              [formControl]=\"ngControl.control\"\n              [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\"\n              [errorStateMatcher]=\"customErrorStateMatcher\"\n              (keyup)=\"onValueChange()\"\n              (change)=\"onValueChange()\"\n    ></textarea>\n\n    <!-- Clear Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.clearable\"\n      iconName=\"cancel\"\n      matSuffix\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"clear()\"\n    >\n    </i-tech-icon-button>\n\n    <i-tech-icon-button\n      *ngIf=\"inputData.type === 'password'\"\n      [iconName]=\"closed ? 'visible' : 'visibility_off'\"\n      matSuffix\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"toggleEye()\"\n    >\n    </i-tech-icon-button>\n\n    <!-- Trailing Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.iconSuffix\"\n      [iconName]=\"inputData.iconSuffix\"\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled  || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      matSuffix\n    >\n    </i-tech-icon-button>\n\n    <!-- Error Messages -->\n    <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n      {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n    </mat-error>\n\n    <!-- Helper Text -->\n    <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n      {{ inputData.hint | translate }}\n    </mat-hint>\n  </mat-form-field>\n</div>\n" }]
+                    ], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\n  <div class=\"w-100\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : inputData.readOnly || ngControl.control.disabled,\n          'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n          }\"\n               *ngIf=\"inputData.label\">\n      {{ inputData.label | translate }}\n    </mat-label>\n    <span *ngIf=\"inputData.required\" class=\"required-input\"\n          [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\n  </div>\n  <mat-form-field appearance=\"outline\" class=\"w-100\"\n                  [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\n  >\n    <!-- Leading Icon -->\n    <mat-icon *ngIf=\"inputData.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !inputData.iconPrefixColor &&\n                                        (inputData.readOnly || ngControl.control.disabled),\n                    'default-form-icon-color' : !inputData.iconPrefixColor &&\n                                                !(inputData.readOnly || ngControl.control.disabled)\n                    }\"\n              [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n              [style.color]=\"inputData.iconPrefixColor || null\"\n    >{{ inputData.iconPrefix }}\n    </mat-icon>\n\n    <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n              matPrefix\n              [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n              [svgIcon]=\"inputData.iconPrefixSvg\"\n    ></mat-icon>\n\n    <!-- Input Field -->\n    <input matInput #inputElement\n           *ngIf=\"!inputData.textarea\"\n           [type]=\"inputData.type || 'text'\"\n           [readonly]=\"inputData.readOnly\"\n           [placeholder]=\"(inputData.placeholder || '') | translate\"\n           [pattern]=\"inputData.pattern!\"\n           [formControl]=\"ngControl.control\"\n           [mask]=\"inputData.mask || ''\"\n           [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\n           [inputMask]=\"inputData.inputMask!\"\n           [float]=\"'' + (inputData.float || false)\"\n           [min]=\"('' + inputData.min)\"\n           [max]=\"('' + inputData.max)\"\n           [errorStateMatcher]=\"customErrorStateMatcher\"\n           (blur)=\"onFocusOut()\"\n           (keyup)=\"onValueChange()\"\n           (change)=\"onValueChange()\"\n    >\n\n    <textarea matInput\n              *ngIf=\"inputData.textarea\"\n              [type]=\"inputData.type || 'text'\"\n              [readonly]=\"inputData.readOnly\"\n              [placeholder]=\"(inputData.placeholder || '') | translate\"\n              [pattern]=\"inputData.pattern!\"\n              [formControl]=\"ngControl.control\"\n              [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\"\n              [errorStateMatcher]=\"customErrorStateMatcher\"\n              (keyup)=\"onValueChange()\"\n              (change)=\"onValueChange()\"\n    ></textarea>\n\n    <!-- Clear Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.clearable\"\n      iconName=\"cancel\"\n      matSuffix\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"clear()\"\n    >\n    </i-tech-icon-button>\n\n    <i-tech-icon-button\n      *ngIf=\"inputData.type === 'password'\"\n      [iconName]=\"closed ? 'visible' : 'visibility_off'\"\n      matSuffix\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      (click)=\"toggleEye()\"\n    >\n    </i-tech-icon-button>\n\n    <!-- Trailing Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.iconSuffix\"\n      [iconName]=\"inputData.iconSuffix\"\n      [matTooltip]=\"inputData.iconSuffixTooltip ? (inputData.iconSuffixTooltip | translate) : ''\"\n      [matTooltipPosition]=\"'right'\"\n      [disabled]=\"inputData.readOnly || ngControl.control.disabled  || false\"\n      [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n      matSuffix\n    >\n    </i-tech-icon-button>\n\n    <!-- Error Messages -->\n    <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n      {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n    </mat-error>\n\n    <!-- Helper Text -->\n    <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n      {{ inputData.hint | translate }}\n    </mat-hint>\n  </mat-form-field>\n</div>\n" }]
         }], ctorParameters: () => [{ type: InputService }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['inputElement', { static: true }]
@@ -770,8 +770,29 @@ class AutocompleteSelectComponent {
     }
     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]));
+            if (this.ngControl.value && Array.isArray(this.ngControl.value) && this.ngControl.value.length > 0) {
+                // Only add items from current data that aren't already tracked
+                this.ngControl.value.forEach((selectedValue) => {
+                    // Check if we already have this value tracked
+                    const alreadyTracked = this.selectedOptionForMultipleSelection.find(item => {
+                        const itemValue = this.selectConfig.valueByKey ? item[this.selectConfig.valueByKey[0]] : item;
+                        return itemValue === selectedValue;
+                    });
+                    // Only add if not already tracked and exists in current data
+                    if (!alreadyTracked) {
+                        const matchingItem = this.data.find((item) => {
+                            const itemValue = this.selectConfig.valueByKey ? item[this.selectConfig.valueByKey[0]] : item;
+                            return itemValue === selectedValue;
+                        });
+                        if (matchingItem) {
+                            this.selectedOptionForMultipleSelection.push(matchingItem);
+                        }
+                    }
+                });
+                // Update the showing value if we have selections
+                if (this.selectedOptionForMultipleSelection.length > 0) {
+                    this.setShowingValue(this.selectedOptionForMultipleSelection[0]);
+                }
             }
         }
         else {
@@ -810,29 +831,9 @@ class AutocompleteSelectComponent {
             this.matSelect.close();
             return;
         }
-        if (this.searchInput) {
-            if (this.selectConfig.multiple) {
-                this.toggleShowingDataInSelectedOptionsMultipleCase(showingData);
-            }
-            else {
-                this.inputFocusOut();
-            }
-        }
-        this.setShowingValue(showingData);
+        // For multiple selection, let Angular Material handle the selection
         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);
-        }
-        const selectedValues = this.selectedOptionForMultipleSelection.map(item => this.selectConfig.valueByKey ? item[this.selectConfig.valueByKey[0]] : item);
-        this.ngControl.control.setValue(selectedValues);
-    }
     addNewItemEvent() {
         this.isNeededForRecall = true;
         this.emitAction.emit();
@@ -983,7 +984,13 @@ class AutocompleteSelectComponent {
             }
             return;
         }
+        // Panel closed
         this.showPlaceholder = true;
+        // Clear search input ONLY when closing
+        if (this.selectConfig.search && this.searchInput) {
+            this.searchInput.nativeElement.value = '';
+            this.clearTimeoutForSearch();
+        }
     }
     reCallData() {
         // TODO refactor this part
@@ -1008,10 +1015,52 @@ class AutocompleteSelectComponent {
     }
     emitSelectionChangeAndClose(event) {
         if (this.selectConfig.multiple) {
-            // Instead of relying on mat-select's event.value, use our tracked selections
-            const selectedValues = this.selectedOptionForMultipleSelection.map(item => this.selectConfig.valueByKey ? item[this.selectConfig.valueByKey[0]] : item);
-            // Update the form control with our tracked selections
-            this.ngControl.control.setValue(selectedValues);
+            // Get what Angular Material thinks is selected (may be incomplete due to missing options)
+            const materialSelectedValues = event.value || [];
+            // Get the previously selected values that we were tracking
+            const previouslyTrackedValues = this.selectedOptionForMultipleSelection.map(item => this.selectConfig.valueByKey ? item[this.selectConfig.valueByKey[0]] : item);
+            // Find which previously selected values are NOT in the current data (lost due to search)
+            const lostValues = previouslyTrackedValues.filter(value => !this.data.find(item => {
+                const itemValue = this.selectConfig.valueByKey ? item[this.selectConfig.valueByKey[0]] : item;
+                return itemValue === value;
+            }));
+            // Merge: keep lost values + add what Angular Material selected from current data
+            const mergedSelectedValues = [...new Set([...lostValues, ...materialSelectedValues])];
+            // Update Angular Material's form control with the merged selection
+            this.ngControl.control.setValue(mergedSelectedValues, { emitEvent: false });
+            // Now sync our tracking with the complete merged selection
+            const selectedValueSet = new Set(mergedSelectedValues);
+            // Remove any existing selections that are no longer selected
+            this.selectedOptionForMultipleSelection = this.selectedOptionForMultipleSelection.filter(item => {
+                const itemValue = this.selectConfig.valueByKey ? item[this.selectConfig.valueByKey[0]] : item;
+                return selectedValueSet.has(itemValue);
+            });
+            // Add any new selections from current data that aren't already tracked
+            mergedSelectedValues.forEach((selectedValue) => {
+                // Check if we already have this item in our tracking
+                const alreadyTracked = this.selectedOptionForMultipleSelection.find(item => {
+                    const itemValue = this.selectConfig.valueByKey ? item[this.selectConfig.valueByKey[0]] : item;
+                    return itemValue === selectedValue;
+                });
+                // If not tracked yet, try to find it in current data and add it
+                if (!alreadyTracked) {
+                    const matchingItem = this.data.find((item) => {
+                        const itemValue = this.selectConfig.valueByKey ? item[this.selectConfig.valueByKey[0]] : item;
+                        return itemValue === selectedValue;
+                    });
+                    if (matchingItem) {
+                        this.selectedOptionForMultipleSelection.push(matchingItem);
+                    }
+                }
+            });
+            // Update the display values
+            if (this.selectedOptionForMultipleSelection.length > 0) {
+                this.setShowingValue(this.selectedOptionForMultipleSelection[0]);
+            }
+            else {
+                this.showingValue = '';
+                this.multiSelectedValues = [];
+            }
             this.multiSelectSelectionChange.emit(this.multiSelectedValues);
             return;
         }
@@ -1026,7 +1075,7 @@ class AutocompleteSelectComponent {
         searchInput?.nativeElement?.focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AutocompleteSelectComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AutocompleteSelectComponent, isStandalone: true, selector: "i-tech-autocomplete-select", inputs: { className: "className", submitValue: "submitValue", configs: "configs", detectChanges: "detectChanges" }, outputs: { selectionChange: "selectionChange", multiSelectSelectionChange: "multiSelectSelectionChange", 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          <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n               style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n            <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n                                dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n            </circle>\n          </svg>\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:none}::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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.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: "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: "19.2.14", type: AutocompleteSelectComponent, isStandalone: true, selector: "i-tech-autocomplete-select", inputs: { className: "className", submitValue: "submitValue", configs: "configs", detectChanges: "detectChanges" }, outputs: { selectionChange: "selectionChange", multiSelectSelectionChange: "multiSelectSelectionChange", 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           (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          <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n               style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n            <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n                                dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n            </circle>\n          </svg>\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                      (click)=\"optionClick(item)\">\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                      (click)=\"optionClick(item)\"\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:none}::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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.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: "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: "19.2.14", ngImport: i0, type: AutocompleteSelectComponent, decorators: [{
             type: Component,
@@ -1047,7 +1096,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", 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      {{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          <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n               style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n            <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n                                dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n            </circle>\n          </svg>\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:none}::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           (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          <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n               style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n            <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n                                dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n            </circle>\n          </svg>\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                      (click)=\"optionClick(item)\">\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                      (click)=\"optionClick(item)\"\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:none}::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']
@@ -1825,13 +1874,13 @@ class NewSidebarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NewSidebarComponent, deps: [{ token: i1$3.Router }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NewSidebarComponent, isStandalone: true, selector: "i-tech-sidebar", inputs: { platform: "platform", navigationLinks: "navigationLinks", env: "env", userData: "userData" }, outputs: { collapseEvent: "collapseEvent", linkClickEvent: "linkClickEvent", signOutEvent: "signOutEvent", newAuthenticatedResponseEvent: "newAuthenticatedResponseEvent" }, host: { listeners: { "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<div class=\"main_sidebar\"\n     *ngIf=\"navigationLinks && userData\"\n     [class.collapsed]=\"isCollapsed\"\n>\n  <div class=\"main_sidebar--header\">\n    <a [href]=\"platform === CompaniesEnum.ORGANIZATION ? '/auth/organization' : '/'\">\n\n      <img class=\"logo pointer\" alt=\"\"\n           *ngIf=\"isCollapsed\"\n           [src]=\"'/assets/logos/small/' + platform + '.svg'\"\n      >\n\n      <img class=\"logo pointer\" alt=\"\"\n           *ngIf=\"!isCollapsed\"\n           [src]=\"'/assets/logos/full/' + platform + '.svg'\"\n      >\n    </a>\n    <i-tech-icon-button\n      *ngIf=\"!isCollapsed\"\n      [tooltip]=\"'SLP Tools'\"\n      [iconName]=\"'apps'\"\n      [matMenuTriggerFor]=\"matMenu\"\n    ></i-tech-icon-button>\n\n    <mat-menu #matMenu=\"matMenu\" class=\"sidebar_platforms_menu\">\n      <ng-container *ngIf=\"activeAndInactivePlatforms['active'].length\">\n        <div class=\"menu_title\">\n          Active Apps\n        </div>\n        <ng-container  *ngFor=\"let app of activeAndInactivePlatforms['active']\">\n          <a [href]=\"AppsUrls[app.id]\" target=\"_blank\">\n            <div mat-menu-item class=\"standard_menu_item\">\n              <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n              <span>{{app.name}}</span>\n              <img alt=\"\" class=\"ml-auto\" src=\"/assets/selected_organization.svg\"\n                   *ngIf=\"app.checked\"\n              >\n            </div>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div class=\"divider\"\n           *ngIf=\"activeAndInactivePlatforms['active'].length && activeAndInactivePlatforms['inactive'].length\"\n      ></div>\n\n      <ng-container *ngIf=\"activeAndInactivePlatforms['inactive'].length\">\n        <div class=\"menu_title\">\n          Inactive Apps\n        </div>\n        <div class=\"standard_menu_item\" *ngFor=\"let app of activeAndInactivePlatforms['inactive']\">\n          <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n          <span>{{app.name}}</span>\n        </div>\n      </ng-container>\n\n    </mat-menu>\n  </div>\n\n  <div class=\"main_sidebar--content\">\n    <ng-container *ngIf=\"secondLayerLinks.length\">\n      <div class=\"main_sidebar--content--toolbar\"\n           (click)=\"navigateBack()\"\n      >\n        <img alt=\"\" src=\"/assets/back.svg\">\n        <span>Back</span>\n      </div>\n      <div class=\"main_sidebar--content--sub_title\">\n        Settings\n      </div>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of (secondLayerLinks.length ? secondLayerLinks : navigationLinks)\">\n      <div class=\"divider\" *ngIf=\"link.hasDivider\"></div>\n      <a [routerLink]=\"link.emitClick ? null : link.linkTo\">\n        <div class=\"main_sidebar--content--link pointer\"\n             matRipple\n             [class.active]=\"link.pageEnum === activePage || link.pageEnum === secondLayerActivePage\"\n             (click)=\"handleLinkClick(link)\"\n        >\n          <div class=\"parent_icon\">\n            <img class=\"icon\" alt=\"\"\n                 [src]=\"'/assets/links/' + platform + '/' + link.image + '.svg'\">\n          </div>\n          <div class=\"name\">{{link.title | translate}}</div>\n\n          <div class=\"new\" *ngIf=\"link.isNew\">New</div>\n\n        </div>\n      </a>\n    </ng-container>\n\n  </div>\n\n  <div class=\"main_sidebar--footer\" *ngIf=\"userData\">\n    <div class=\"main_sidebar--footer--toggle\"\n    >\n      <i-tech-icon-button\n        [tooltip]=\"isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'\"\n        [iconName]=\"isCollapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left'\"\n        (click)=\"changeCollapse()\"\n      ></i-tech-icon-button>\n\n    </div>\n    <div class=\"main_sidebar--footer--profile\">\n      <i-tech-company-image\n        [matMenuTriggerFor]=\"matMenu\"\n        [collapsed]=\"isCollapsed\"\n        [userData]=\"userData\"\n        [platform]=\"platform\"\n        [currentCompany]=\"currentCompany\"\n      ></i-tech-company-image>\n      <mat-menu #matMenu=\"matMenu\" class=\"sidebar_bottom_menu\">\n        <div class=\"top_bar\">\n          <img class=\"image\" alt=\"\" [src]=\"userData.image\"\n               *ngIf=\"userData.image; else NoImage\"\n          >\n          <ng-template #NoImage>\n            <div class=\"image no_image\">\n              {{userData.firstName | slice: 0 : 1 | uppercase}}\n            </div>\n          </ng-template>\n          <div class=\"information\">\n            <div class=\"name\">{{userData.firstName}} {{userData.lastName}}</div>\n            <div class=\"email\">{{userData.email}}</div>\n          </div>\n        </div>\n        <a [href]=\"BottomPopupLinks['manageAccount']\" target=\"_blank\">\n          <div mat-menu-item *ngIf=\"platform !== CompaniesEnum.ORGANIZATION\" class=\"mt-4 standard_menu_item\"\n          >\n            Account Information\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['accountInformation']\">\n          <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION\" class=\"mt-4 standard_menu_item\"\n          >\n            Account Information\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['addNewOrganization']\">\n          <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION && accessToNewOrganization\"\n               class=\"standard_menu_item\"\n          >\n            Add new organization\n          </div>\n        </a>\n\n\n        <ng-container *ngIf=\"allOrganizations.length > 1\">\n          <div class=\"divider\" ></div>\n\n          <div class=\"switch\">\n            <div class=\"switch_title\">\n              Switch Organization\n            </div>\n            <div mat-menu-item class=\"mat_menu_organization\" (click)=\"switchOrganization(organization)\"\n                 *ngFor=\"let organization of allOrganizations\"\n            >\n              <div class=\"organization_item_in_menu\">\n                <img alt=\"\" class=\"image\" [src]=\"organization.image\"\n                     *ngIf=\"organization.image; else NoImage\"\n                >\n                <ng-template #NoImage>\n                  <div class=\"image no_image\">\n                    {{organization.name | slice: 0 : 1 | uppercase}}\n                  </div>\n                </ng-template>\n                <span>{{organization.name}}</span>\n              </div>\n              <img alt=\"\" *ngIf=\"organization.id === currentCompany?.id\"\n                   class=\"isSelected\" src=\"/assets/selected_organization.svg\" >\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"divider\"></div>\n\n        <div mat-menu-item class=\"standard_menu_item\" (click)=\"openZendeskPage()\">\n          Help Center\n        </div>\n\n        <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\">\n          <div mat-menu-item class=\"standard_menu_item\" >\n            Terms And Conditions\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['privacy']\" target=\"_blank\">\n          <div mat-menu-item class=\"standard_menu_item\" >\n            Privacy Policy\n          </div>\n        </a>\n\n\n        <div class=\"divider\"></div>\n\n        <div mat-menu-item class=\"standard_menu_item\" (click)=\"signOut()\">\n          Sign out\n        </div>\n      </mat-menu>\n    </div>\n  </div>\n\n</div>\n", styles: [".main_sidebar{box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;height:100vh;width:190px;position:relative;background-color:#fff;z-index:100}.main_sidebar a{text-decoration:none!important}.main_sidebar.collapsed{width:80px}.main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.main_sidebar.collapsed .main_sidebar--content--link .new{right:0!important;top:14px!important}.main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.main_sidebar.collapsed .main_sidebar--content--link.active,.main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.main_sidebar.collapsed::ng-deep .information .names{display:none}.main_sidebar .pointer{cursor:pointer}.main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.main_sidebar--header a{height:40px}.main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.main_sidebar--content--link .parent_icon{width:24px;height:24px}.main_sidebar--content--link .new{position:absolute;border-radius:8px;color:#1f4085;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc;right:24px;top:18px}.main_sidebar--content--link.active,.main_sidebar--content--link:hover{background-color:#effaf1}.main_sidebar--footer{bottom:0;position:absolute;width:100%}.main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.divider{border-bottom:1px solid #CAC4D0;margin:8px 0;width:100%}::ng-deep .sidebar_bottom_menu{width:252px}::ng-deep .sidebar_bottom_menu a{text-decoration:none!important;color:#424954!important}::ng-deep .sidebar_bottom_menu .mt-4{margin-top:4px}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_bottom_menu .switch .switch_title{padding:12px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;color:#424954}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item.standard_menu_item{padding:10px 12px!important}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item{color:#424954;font-size:13px;font-weight:500;line-height:20px;letter-spacing:.2px}::ng-deep .sidebar_bottom_menu .top_bar{display:flex;padding:8px 12px 0}::ng-deep .sidebar_bottom_menu .top_bar .information{width:170px}::ng-deep .sidebar_bottom_menu .top_bar .information .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .information .email{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .image{min-width:40px;width:40px;height:40px;object-fit:cover;border-radius:50%;margin-right:8px}::ng-deep .sidebar_bottom_menu .top_bar .no_image{background-color:#008b33;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;line-height:24px}::ng-deep .sidebar_bottom_menu .mat_menu_organization{padding:8px 12px!important}::ng-deep .sidebar_bottom_menu .mat_menu_organization .mat-mdc-menu-item-text{display:flex;justify-content:space-between;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu{display:flex;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .image{width:24px;height:24px;border-radius:50%;margin-right:12px}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .no_image{color:#006b1e;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px;background-color:#c0e5c7}::ng-deep .sidebar_platforms_menu{width:280px}::ng-deep .sidebar_platforms_menu a{text-decoration:none!important}::ng-deep .sidebar_platforms_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_platforms_menu .menu_title{color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;padding:12px}::ng-deep .sidebar_platforms_menu .standard_menu_item{padding:8px 12px!important;display:flex;align-items:center}::ng-deep .sidebar_platforms_menu .standard_menu_item .logo{margin-right:14px}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text{display:flex;align-items:center;font-weight:500;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text .logo{margin-right:14px}::ng-deep .main_sidebar .mat-ripple:not(:empty){transform:unset!important}\n"], dependencies: [{ 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: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: CompanyImageComponent, selector: "i-tech-company-image", inputs: ["collapsed", "userData", "currentCompany", "platform"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NewSidebarComponent, isStandalone: true, selector: "i-tech-sidebar", inputs: { platform: "platform", navigationLinks: "navigationLinks", env: "env", userData: "userData" }, outputs: { collapseEvent: "collapseEvent", linkClickEvent: "linkClickEvent", signOutEvent: "signOutEvent", newAuthenticatedResponseEvent: "newAuthenticatedResponseEvent" }, host: { listeners: { "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<div class=\"main_sidebar\"\n     *ngIf=\"navigationLinks && userData\"\n     [class.collapsed]=\"isCollapsed\"\n>\n  <div class=\"main_sidebar--header\">\n    <a [href]=\"platform === CompaniesEnum.ORGANIZATION ? '/auth/organization' : '/'\">\n\n      <img class=\"logo pointer\" alt=\"\"\n           *ngIf=\"isCollapsed\"\n           [src]=\"'/assets/logos/small/' + platform + '.svg'\"\n      >\n\n      <img class=\"logo pointer\" alt=\"\"\n           *ngIf=\"!isCollapsed\"\n           [src]=\"'/assets/logos/full/' + platform + '.svg'\"\n      >\n    </a>\n    <i-tech-icon-button\n      *ngIf=\"!isCollapsed\"\n      [tooltip]=\"'SLP Tools'\"\n      [iconName]=\"'apps'\"\n      [matMenuTriggerFor]=\"matMenu\"\n    ></i-tech-icon-button>\n\n    <mat-menu #matMenu=\"matMenu\" class=\"sidebar_platforms_menu\">\n      <ng-container *ngIf=\"activeAndInactivePlatforms['active'].length\">\n        <div class=\"menu_title\">\n          Active Apps\n        </div>\n        <ng-container  *ngFor=\"let app of activeAndInactivePlatforms['active']\">\n          <a [href]=\"AppsUrls[app.id]\" target=\"_blank\">\n            <div mat-menu-item class=\"standard_menu_item\">\n              <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n              <span>{{app.name}}</span>\n              <img alt=\"\" class=\"ml-auto\" src=\"/assets/selected_organization.svg\"\n                   *ngIf=\"app.checked\"\n              >\n            </div>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div class=\"divider\"\n           *ngIf=\"activeAndInactivePlatforms['active'].length && activeAndInactivePlatforms['inactive'].length\"\n      ></div>\n\n      <ng-container *ngIf=\"activeAndInactivePlatforms['inactive'].length\">\n        <div class=\"menu_title\">\n          Inactive Apps\n        </div>\n        <div class=\"standard_menu_item\" *ngFor=\"let app of activeAndInactivePlatforms['inactive']\">\n          <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n          <span>{{app.name}}</span>\n        </div>\n      </ng-container>\n\n    </mat-menu>\n  </div>\n\n  <div class=\"main_sidebar--content\">\n    <ng-container *ngIf=\"secondLayerLinks.length\">\n      <div class=\"main_sidebar--content--toolbar\"\n           (click)=\"navigateBack()\"\n      >\n        <img alt=\"\" src=\"/assets/back.svg\">\n        <span>Back</span>\n      </div>\n      <div class=\"main_sidebar--content--sub_title\">\n        Settings\n      </div>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of (secondLayerLinks.length ? secondLayerLinks : navigationLinks)\">\n      <div class=\"divider\" *ngIf=\"link.hasDivider\"></div>\n      <a [routerLink]=\"link.emitClick ? null : link.linkTo\">\n        <div class=\"main_sidebar--content--link pointer\"\n             matRipple\n             [class.active]=\"link.pageEnum === activePage || link.pageEnum === secondLayerActivePage\"\n             (click)=\"handleLinkClick(link)\"\n             [attr.data-testid]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n        >\n          <div class=\"parent_icon\">\n            <img class=\"icon\" alt=\"\"\n                 [src]=\"'/assets/links/' + platform + '/' + link.image + '.svg'\">\n          </div>\n          <div class=\"name\">{{link.title | translate}}</div>\n\n          <div class=\"new\" *ngIf=\"link.isNew\">New</div>\n\n        </div>\n      </a>\n    </ng-container>\n\n  </div>\n\n  <div class=\"main_sidebar--footer\" *ngIf=\"userData\">\n    <div class=\"main_sidebar--footer--toggle\"\n    >\n      <i-tech-icon-button\n        [tooltip]=\"isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'\"\n        [iconName]=\"isCollapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left'\"\n        (click)=\"changeCollapse()\"\n      ></i-tech-icon-button>\n\n    </div>\n    <div class=\"main_sidebar--footer--profile\">\n      <i-tech-company-image\n        [matMenuTriggerFor]=\"matMenu\"\n        [collapsed]=\"isCollapsed\"\n        [userData]=\"userData\"\n        [platform]=\"platform\"\n        [currentCompany]=\"currentCompany\"\n      ></i-tech-company-image>\n      <mat-menu #matMenu=\"matMenu\" class=\"sidebar_bottom_menu\">\n        <div class=\"top_bar\">\n          <img class=\"image\" alt=\"\" [src]=\"userData.image\"\n               *ngIf=\"userData.image; else NoImage\"\n          >\n          <ng-template #NoImage>\n            <div class=\"image no_image\">\n              {{userData.firstName | slice: 0 : 1 | uppercase}}\n            </div>\n          </ng-template>\n          <div class=\"information\">\n            <div class=\"name\">{{userData.firstName}} {{userData.lastName}}</div>\n            <div class=\"email\">{{userData.email}}</div>\n          </div>\n        </div>\n        <a [href]=\"BottomPopupLinks['manageAccount']\" target=\"_blank\">\n          <div mat-menu-item *ngIf=\"platform !== CompaniesEnum.ORGANIZATION\" class=\"mt-4 standard_menu_item\"\n          >\n            Account Information\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['accountInformation']\">\n          <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION\" class=\"mt-4 standard_menu_item\"\n          >\n            Account Information\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['addNewOrganization']\">\n          <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION && accessToNewOrganization\"\n               class=\"standard_menu_item\"\n          >\n            Add new organization\n          </div>\n        </a>\n\n\n        <ng-container *ngIf=\"allOrganizations.length > 1\">\n          <div class=\"divider\" ></div>\n\n          <div class=\"switch\">\n            <div class=\"switch_title\">\n              Switch Organization\n            </div>\n            <div mat-menu-item class=\"mat_menu_organization\" (click)=\"switchOrganization(organization)\"\n                 *ngFor=\"let organization of allOrganizations\"\n            >\n              <div class=\"organization_item_in_menu\">\n                <img alt=\"\" class=\"image\" [src]=\"organization.image\"\n                     *ngIf=\"organization.image; else NoImage\"\n                >\n                <ng-template #NoImage>\n                  <div class=\"image no_image\">\n                    {{organization.name | slice: 0 : 1 | uppercase}}\n                  </div>\n                </ng-template>\n                <span>{{organization.name}}</span>\n              </div>\n              <img alt=\"\" *ngIf=\"organization.id === currentCompany?.id\"\n                   class=\"isSelected\" src=\"/assets/selected_organization.svg\" >\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"divider\"></div>\n\n        <div mat-menu-item class=\"standard_menu_item\" (click)=\"openZendeskPage()\">\n          Help Center\n        </div>\n\n        <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\">\n          <div mat-menu-item class=\"standard_menu_item\" >\n            Terms And Conditions\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['privacy']\" target=\"_blank\">\n          <div mat-menu-item class=\"standard_menu_item\" >\n            Privacy Policy\n          </div>\n        </a>\n\n\n        <div class=\"divider\"></div>\n\n        <div mat-menu-item class=\"standard_menu_item\" (click)=\"signOut()\">\n          Sign out\n        </div>\n      </mat-menu>\n    </div>\n  </div>\n\n</div>\n", styles: [".main_sidebar{box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;height:100vh;width:190px;position:relative;background-color:#fff;z-index:100}.main_sidebar a{text-decoration:none!important}.main_sidebar.collapsed{width:80px}.main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.main_sidebar.collapsed .main_sidebar--content--link .new{right:0!important;top:14px!important}.main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.main_sidebar.collapsed .main_sidebar--content--link.active,.main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.main_sidebar.collapsed::ng-deep .information .names{display:none}.main_sidebar .pointer{cursor:pointer}.main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.main_sidebar--header a{height:40px}.main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.main_sidebar--content--link .parent_icon{width:24px;height:24px}.main_sidebar--content--link .new{position:absolute;border-radius:8px;color:#1f4085;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc;right:24px;top:18px}.main_sidebar--content--link.active,.main_sidebar--content--link:hover{background-color:#effaf1}.main_sidebar--footer{bottom:0;position:absolute;width:100%}.main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.divider{border-bottom:1px solid #CAC4D0;margin:8px 0;width:100%}::ng-deep .sidebar_bottom_menu{width:252px}::ng-deep .sidebar_bottom_menu a{text-decoration:none!important;color:#424954!important}::ng-deep .sidebar_bottom_menu .mt-4{margin-top:4px}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_bottom_menu .switch .switch_title{padding:12px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;color:#424954}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item.standard_menu_item{padding:10px 12px!important}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item{color:#424954;font-size:13px;font-weight:500;line-height:20px;letter-spacing:.2px}::ng-deep .sidebar_bottom_menu .top_bar{display:flex;padding:8px 12px 0}::ng-deep .sidebar_bottom_menu .top_bar .information{width:170px}::ng-deep .sidebar_bottom_menu .top_bar .information .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .information .email{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .image{min-width:40px;width:40px;height:40px;object-fit:cover;border-radius:50%;margin-right:8px}::ng-deep .sidebar_bottom_menu .top_bar .no_image{background-color:#008b33;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;line-height:24px}::ng-deep .sidebar_bottom_menu .mat_menu_organization{padding:8px 12px!important}::ng-deep .sidebar_bottom_menu .mat_menu_organization .mat-mdc-menu-item-text{display:flex;justify-content:space-between;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu{display:flex;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .image{width:24px;height:24px;border-radius:50%;margin-right:12px}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .no_image{color:#006b1e;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px;background-color:#c0e5c7}::ng-deep .sidebar_platforms_menu{width:280px}::ng-deep .sidebar_platforms_menu a{text-decoration:none!important}::ng-deep .sidebar_platforms_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_platforms_menu .menu_title{color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;padding:12px}::ng-deep .sidebar_platforms_menu .standard_menu_item{padding:8px 12px!important;display:flex;align-items:center}::ng-deep .sidebar_platforms_menu .standard_menu_item .logo{margin-right:14px}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text{display:flex;align-items:center;font-weight:500;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text .logo{margin-right:14px}::ng-deep .main_sidebar .mat-ripple:not(:empty){transform:unset!important}\n"], dependencies: [{ 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: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: CompanyImageComponent, selector: "i-tech-company-image", inputs: ["collapsed", "userData", "currentCompany", "platform"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NewSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'i-tech-sidebar', imports: [NgIf, NgFor, TranslateModule, MatMenu, MatMenuModule, CompanyImageComponent, UpperCasePipe, SlicePipe,
-                        MatRippleModule, MatTooltipModule, IconButtonComponent, RouterLink
-                    ], standalone: true, template: "<div class=\"main_sidebar\"\n     *ngIf=\"navigationLinks && userData\"\n     [class.collapsed]=\"isCollapsed\"\n>\n  <div class=\"main_sidebar--header\">\n    <a [href]=\"platform === CompaniesEnum.ORGANIZATION ? '/auth/organization' : '/'\">\n\n      <img class=\"logo pointer\" alt=\"\"\n           *ngIf=\"isCollapsed\"\n           [src]=\"'/assets/logos/small/' + platform + '.svg'\"\n      >\n\n      <img class=\"logo pointer\" alt=\"\"\n           *ngIf=\"!isCollapsed\"\n           [src]=\"'/assets/logos/full/' + platform + '.svg'\"\n      >\n    </a>\n    <i-tech-icon-button\n      *ngIf=\"!isCollapsed\"\n      [tooltip]=\"'SLP Tools'\"\n      [iconName]=\"'apps'\"\n      [matMenuTriggerFor]=\"matMenu\"\n    ></i-tech-icon-button>\n\n    <mat-menu #matMenu=\"matMenu\" class=\"sidebar_platforms_menu\">\n      <ng-container *ngIf=\"activeAndInactivePlatforms['active'].length\">\n        <div class=\"menu_title\">\n          Active Apps\n        </div>\n        <ng-container  *ngFor=\"let app of activeAndInactivePlatforms['active']\">\n          <a [href]=\"AppsUrls[app.id]\" target=\"_blank\">\n            <div mat-menu-item class=\"standard_menu_item\">\n              <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n              <span>{{app.name}}</span>\n              <img alt=\"\" class=\"ml-auto\" src=\"/assets/selected_organization.svg\"\n                   *ngIf=\"app.checked\"\n              >\n            </div>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div class=\"divider\"\n           *ngIf=\"activeAndInactivePlatforms['active'].length && activeAndInactivePlatforms['inactive'].length\"\n      ></div>\n\n      <ng-container *ngIf=\"activeAndInactivePlatforms['inactive'].length\">\n        <div class=\"menu_title\">\n          Inactive Apps\n        </div>\n        <div class=\"standard_menu_item\" *ngFor=\"let app of activeAndInactivePlatforms['inactive']\">\n          <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n          <span>{{app.name}}</span>\n        </div>\n      </ng-container>\n\n    </mat-menu>\n  </div>\n\n  <div class=\"main_sidebar--content\">\n    <ng-container *ngIf=\"secondLayerLinks.length\">\n      <div class=\"main_sidebar--content--toolbar\"\n           (click)=\"navigateBack()\"\n      >\n        <img alt=\"\" src=\"/assets/back.svg\">\n        <span>Back</span>\n      </div>\n      <div class=\"main_sidebar--content--sub_title\">\n        Settings\n      </div>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of (secondLayerLinks.length ? secondLayerLinks : navigationLinks)\">\n      <div class=\"divider\" *ngIf=\"link.hasDivider\"></div>\n      <a [routerLink]=\"link.emitClick ? null : link.linkTo\">\n        <div class=\"main_sidebar--content--link pointer\"\n             matRipple\n             [class.active]=\"link.pageEnum === activePage || link.pageEnum === secondLayerActivePage\"\n             (click)=\"handleLinkClick(link)\"\n        >\n          <div class=\"parent_icon\">\n            <img class=\"icon\" alt=\"\"\n                 [src]=\"'/assets/links/' + platform + '/' + link.image + '.svg'\">\n          </div>\n          <div class=\"name\">{{link.title | translate}}</div>\n\n          <div class=\"new\" *ngIf=\"link.isNew\">New</div>\n\n        </div>\n      </a>\n    </ng-container>\n\n  </div>\n\n  <div class=\"main_sidebar--footer\" *ngIf=\"userData\">\n    <div class=\"main_sidebar--footer--toggle\"\n    >\n      <i-tech-icon-button\n        [tooltip]=\"isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'\"\n        [iconName]=\"isCollapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left'\"\n        (click)=\"changeCollapse()\"\n      ></i-tech-icon-button>\n\n    </div>\n    <div class=\"main_sidebar--footer--profile\">\n      <i-tech-company-image\n        [matMenuTriggerFor]=\"matMenu\"\n        [collapsed]=\"isCollapsed\"\n        [userData]=\"userData\"\n        [platform]=\"platform\"\n        [currentCompany]=\"currentCompany\"\n      ></i-tech-company-image>\n      <mat-menu #matMenu=\"matMenu\" class=\"sidebar_bottom_menu\">\n        <div class=\"top_bar\">\n          <img class=\"image\" alt=\"\" [src]=\"userData.image\"\n               *ngIf=\"userData.image; else NoImage\"\n          >\n          <ng-template #NoImage>\n            <div class=\"image no_image\">\n              {{userData.firstName | slice: 0 : 1 | uppercase}}\n            </div>\n          </ng-template>\n          <div class=\"information\">\n            <div class=\"name\">{{userData.firstName}} {{userData.lastName}}</div>\n            <div class=\"email\">{{userData.email}}</div>\n          </div>\n        </div>\n        <a [href]=\"BottomPopupLinks['manageAccount']\" target=\"_blank\">\n          <div mat-menu-item *ngIf=\"platform !== CompaniesEnum.ORGANIZATION\" class=\"mt-4 standard_menu_item\"\n          >\n            Account Information\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['accountInformation']\">\n          <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION\" class=\"mt-4 standard_menu_item\"\n          >\n            Account Information\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['addNewOrganization']\">\n          <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION && accessToNewOrganization\"\n               class=\"standard_menu_item\"\n          >\n            Add new organization\n          </div>\n        </a>\n\n\n        <ng-container *ngIf=\"allOrganizations.length > 1\">\n          <div class=\"divider\" ></div>\n\n          <div class=\"switch\">\n            <div class=\"switch_title\">\n              Switch Organization\n            </div>\n            <div mat-menu-item class=\"mat_menu_organization\" (click)=\"switchOrganization(organization)\"\n                 *ngFor=\"let organization of allOrganizations\"\n            >\n              <div class=\"organization_item_in_menu\">\n                <img alt=\"\" class=\"image\" [src]=\"organization.image\"\n                     *ngIf=\"organization.image; else NoImage\"\n                >\n                <ng-template #NoImage>\n                  <div class=\"image no_image\">\n                    {{organization.name | slice: 0 : 1 | uppercase}}\n                  </div>\n                </ng-template>\n                <span>{{organization.name}}</span>\n              </div>\n              <img alt=\"\" *ngIf=\"organization.id === currentCompany?.id\"\n                   class=\"isSelected\" src=\"/assets/selected_organization.svg\" >\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"divider\"></div>\n\n        <div mat-menu-item class=\"standard_menu_item\" (click)=\"openZendeskPage()\">\n          Help Center\n        </div>\n\n        <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\">\n          <div mat-menu-item class=\"standard_menu_item\" >\n            Terms And Conditions\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['privacy']\" target=\"_blank\">\n          <div mat-menu-item class=\"standard_menu_item\" >\n            Privacy Policy\n          </div>\n        </a>\n\n\n        <div class=\"divider\"></div>\n\n        <div mat-menu-item class=\"standard_menu_item\" (click)=\"signOut()\">\n          Sign out\n        </div>\n      </mat-menu>\n    </div>\n  </div>\n\n</div>\n", styles: [".main_sidebar{box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;height:100vh;width:190px;position:relative;background-color:#fff;z-index:100}.main_sidebar a{text-decoration:none!important}.main_sidebar.collapsed{width:80px}.main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.main_sidebar.collapsed .main_sidebar--content--link .new{right:0!important;top:14px!important}.main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.main_sidebar.collapsed .main_sidebar--content--link.active,.main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.main_sidebar.collapsed::ng-deep .information .names{display:none}.main_sidebar .pointer{cursor:pointer}.main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.main_sidebar--header a{height:40px}.main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.main_sidebar--content--link .parent_icon{width:24px;height:24px}.main_sidebar--content--link .new{position:absolute;border-radius:8px;color:#1f4085;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc;right:24px;top:18px}.main_sidebar--content--link.active,.main_sidebar--content--link:hover{background-color:#effaf1}.main_sidebar--footer{bottom:0;position:absolute;width:100%}.main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.divider{border-bottom:1px solid #CAC4D0;margin:8px 0;width:100%}::ng-deep .sidebar_bottom_menu{width:252px}::ng-deep .sidebar_bottom_menu a{text-decoration:none!important;color:#424954!important}::ng-deep .sidebar_bottom_menu .mt-4{margin-top:4px}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_bottom_menu .switch .switch_title{padding:12px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;color:#424954}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item.standard_menu_item{padding:10px 12px!important}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item{color:#424954;font-size:13px;font-weight:500;line-height:20px;letter-spacing:.2px}::ng-deep .sidebar_bottom_menu .top_bar{display:flex;padding:8px 12px 0}::ng-deep .sidebar_bottom_menu .top_bar .information{width:170px}::ng-deep .sidebar_bottom_menu .top_bar .information .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .information .email{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .image{min-width:40px;width:40px;height:40px;object-fit:cover;border-radius:50%;margin-right:8px}::ng-deep .sidebar_bottom_menu .top_bar .no_image{background-color:#008b33;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;line-height:24px}::ng-deep .sidebar_bottom_menu .mat_menu_organization{padding:8px 12px!important}::ng-deep .sidebar_bottom_menu .mat_menu_organization .mat-mdc-menu-item-text{display:flex;justify-content:space-between;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu{display:flex;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .image{width:24px;height:24px;border-radius:50%;margin-right:12px}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .no_image{color:#006b1e;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px;background-color:#c0e5c7}::ng-deep .sidebar_platforms_menu{width:280px}::ng-deep .sidebar_platforms_menu a{text-decoration:none!important}::ng-deep .sidebar_platforms_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_platforms_menu .menu_title{color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;padding:12px}::ng-deep .sidebar_platforms_menu .standard_menu_item{padding:8px 12px!important;display:flex;align-items:center}::ng-deep .sidebar_platforms_menu .standard_menu_item .logo{margin-right:14px}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text{display:flex;align-items:center;font-weight:500;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text .logo{margin-right:14px}::ng-deep .main_sidebar .mat-ripple:not(:empty){transform:unset!important}\n"] }]
+                        MatRippleModule, MatTooltipModule, IconButtonComponent, RouterLink, LowerCasePipe
+                    ], standalone: true, template: "<div class=\"main_sidebar\"\n     *ngIf=\"navigationLinks && userData\"\n     [class.collapsed]=\"isCollapsed\"\n>\n  <div class=\"main_sidebar--header\">\n    <a [href]=\"platform === CompaniesEnum.ORGANIZATION ? '/auth/organization' : '/'\">\n\n      <img class=\"logo pointer\" alt=\"\"\n           *ngIf=\"isCollapsed\"\n           [src]=\"'/assets/logos/small/' + platform + '.svg'\"\n      >\n\n      <img class=\"logo pointer\" alt=\"\"\n           *ngIf=\"!isCollapsed\"\n           [src]=\"'/assets/logos/full/' + platform + '.svg'\"\n      >\n    </a>\n    <i-tech-icon-button\n      *ngIf=\"!isCollapsed\"\n      [tooltip]=\"'SLP Tools'\"\n      [iconName]=\"'apps'\"\n      [matMenuTriggerFor]=\"matMenu\"\n    ></i-tech-icon-button>\n\n    <mat-menu #matMenu=\"matMenu\" class=\"sidebar_platforms_menu\">\n      <ng-container *ngIf=\"activeAndInactivePlatforms['active'].length\">\n        <div class=\"menu_title\">\n          Active Apps\n        </div>\n        <ng-container  *ngFor=\"let app of activeAndInactivePlatforms['active']\">\n          <a [href]=\"AppsUrls[app.id]\" target=\"_blank\">\n            <div mat-menu-item class=\"standard_menu_item\">\n              <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n              <span>{{app.name}}</span>\n              <img alt=\"\" class=\"ml-auto\" src=\"/assets/selected_organization.svg\"\n                   *ngIf=\"app.checked\"\n              >\n            </div>\n          </a>\n        </ng-container>\n      </ng-container>\n\n      <div class=\"divider\"\n           *ngIf=\"activeAndInactivePlatforms['active'].length && activeAndInactivePlatforms['inactive'].length\"\n      ></div>\n\n      <ng-container *ngIf=\"activeAndInactivePlatforms['inactive'].length\">\n        <div class=\"menu_title\">\n          Inactive Apps\n        </div>\n        <div class=\"standard_menu_item\" *ngFor=\"let app of activeAndInactivePlatforms['inactive']\">\n          <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n          <span>{{app.name}}</span>\n        </div>\n      </ng-container>\n\n    </mat-menu>\n  </div>\n\n  <div class=\"main_sidebar--content\">\n    <ng-container *ngIf=\"secondLayerLinks.length\">\n      <div class=\"main_sidebar--content--toolbar\"\n           (click)=\"navigateBack()\"\n      >\n        <img alt=\"\" src=\"/assets/back.svg\">\n        <span>Back</span>\n      </div>\n      <div class=\"main_sidebar--content--sub_title\">\n        Settings\n      </div>\n    </ng-container>\n\n    <ng-container *ngFor=\"let link of (secondLayerLinks.length ? secondLayerLinks : navigationLinks)\">\n      <div class=\"divider\" *ngIf=\"link.hasDivider\"></div>\n      <a [routerLink]=\"link.emitClick ? null : link.linkTo\">\n        <div class=\"main_sidebar--content--link pointer\"\n             matRipple\n             [class.active]=\"link.pageEnum === activePage || link.pageEnum === secondLayerActivePage\"\n             (click)=\"handleLinkClick(link)\"\n             [attr.data-testid]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n        >\n          <div class=\"parent_icon\">\n            <img class=\"icon\" alt=\"\"\n                 [src]=\"'/assets/links/' + platform + '/' + link.image + '.svg'\">\n          </div>\n          <div class=\"name\">{{link.title | translate}}</div>\n\n          <div class=\"new\" *ngIf=\"link.isNew\">New</div>\n\n        </div>\n      </a>\n    </ng-container>\n\n  </div>\n\n  <div class=\"main_sidebar--footer\" *ngIf=\"userData\">\n    <div class=\"main_sidebar--footer--toggle\"\n    >\n      <i-tech-icon-button\n        [tooltip]=\"isCollapsed ? 'Expand Sidebar' : 'Collapse Sidebar'\"\n        [iconName]=\"isCollapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left'\"\n        (click)=\"changeCollapse()\"\n      ></i-tech-icon-button>\n\n    </div>\n    <div class=\"main_sidebar--footer--profile\">\n      <i-tech-company-image\n        [matMenuTriggerFor]=\"matMenu\"\n        [collapsed]=\"isCollapsed\"\n        [userData]=\"userData\"\n        [platform]=\"platform\"\n        [currentCompany]=\"currentCompany\"\n      ></i-tech-company-image>\n      <mat-menu #matMenu=\"matMenu\" class=\"sidebar_bottom_menu\">\n        <div class=\"top_bar\">\n          <img class=\"image\" alt=\"\" [src]=\"userData.image\"\n               *ngIf=\"userData.image; else NoImage\"\n          >\n          <ng-template #NoImage>\n            <div class=\"image no_image\">\n              {{userData.firstName | slice: 0 : 1 | uppercase}}\n            </div>\n          </ng-template>\n          <div class=\"information\">\n            <div class=\"name\">{{userData.firstName}} {{userData.lastName}}</div>\n            <div class=\"email\">{{userData.email}}</div>\n          </div>\n        </div>\n        <a [href]=\"BottomPopupLinks['manageAccount']\" target=\"_blank\">\n          <div mat-menu-item *ngIf=\"platform !== CompaniesEnum.ORGANIZATION\" class=\"mt-4 standard_menu_item\"\n          >\n            Account Information\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['accountInformation']\">\n          <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION\" class=\"mt-4 standard_menu_item\"\n          >\n            Account Information\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['addNewOrganization']\">\n          <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION && accessToNewOrganization\"\n               class=\"standard_menu_item\"\n          >\n            Add new organization\n          </div>\n        </a>\n\n\n        <ng-container *ngIf=\"allOrganizations.length > 1\">\n          <div class=\"divider\" ></div>\n\n          <div class=\"switch\">\n            <div class=\"switch_title\">\n              Switch Organization\n            </div>\n            <div mat-menu-item class=\"mat_menu_organization\" (click)=\"switchOrganization(organization)\"\n                 *ngFor=\"let organization of allOrganizations\"\n            >\n              <div class=\"organization_item_in_menu\">\n                <img alt=\"\" class=\"image\" [src]=\"organization.image\"\n                     *ngIf=\"organization.image; else NoImage\"\n                >\n                <ng-template #NoImage>\n                  <div class=\"image no_image\">\n                    {{organization.name | slice: 0 : 1 | uppercase}}\n                  </div>\n                </ng-template>\n                <span>{{organization.name}}</span>\n              </div>\n              <img alt=\"\" *ngIf=\"organization.id === currentCompany?.id\"\n                   class=\"isSelected\" src=\"/assets/selected_organization.svg\" >\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"divider\"></div>\n\n        <div mat-menu-item class=\"standard_menu_item\" (click)=\"openZendeskPage()\">\n          Help Center\n        </div>\n\n        <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\">\n          <div mat-menu-item class=\"standard_menu_item\" >\n            Terms And Conditions\n          </div>\n        </a>\n\n        <a [href]=\"BottomPopupLinks['privacy']\" target=\"_blank\">\n          <div mat-menu-item class=\"standard_menu_item\" >\n            Privacy Policy\n          </div>\n        </a>\n\n\n        <div class=\"divider\"></div>\n\n        <div mat-menu-item class=\"standard_menu_item\" (click)=\"signOut()\">\n          Sign out\n        </div>\n      </mat-menu>\n    </div>\n  </div>\n\n</div>\n", styles: [".main_sidebar{box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;height:100vh;width:190px;position:relative;background-color:#fff;z-index:100}.main_sidebar a{text-decoration:none!important}.main_sidebar.collapsed{width:80px}.main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.main_sidebar.collapsed .main_sidebar--content--link .new{right:0!important;top:14px!important}.main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.main_sidebar.collapsed .main_sidebar--content--link.active,.main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.main_sidebar.collapsed::ng-deep .information .names{display:none}.main_sidebar .pointer{cursor:pointer}.main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.main_sidebar--header a{height:40px}.main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.main_sidebar--content--link .parent_icon{width:24px;height:24px}.main_sidebar--content--link .new{position:absolute;border-radius:8px;color:#1f4085;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc;right:24px;top:18px}.main_sidebar--content--link.active,.main_sidebar--content--link:hover{background-color:#effaf1}.main_sidebar--footer{bottom:0;position:absolute;width:100%}.main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.divider{border-bottom:1px solid #CAC4D0;margin:8px 0;width:100%}::ng-deep .sidebar_bottom_menu{width:252px}::ng-deep .sidebar_bottom_menu a{text-decoration:none!important;color:#424954!important}::ng-deep .sidebar_bottom_menu .mt-4{margin-top:4px}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_bottom_menu .switch .switch_title{padding:12px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;color:#424954}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item.standard_menu_item{padding:10px 12px!important}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item{color:#424954;font-size:13px;font-weight:500;line-height:20px;letter-spacing:.2px}::ng-deep .sidebar_bottom_menu .top_bar{display:flex;padding:8px 12px 0}::ng-deep .sidebar_bottom_menu .top_bar .information{width:170px}::ng-deep .sidebar_bottom_menu .top_bar .information .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .information .email{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .image{min-width:40px;width:40px;height:40px;object-fit:cover;border-radius:50%;margin-right:8px}::ng-deep .sidebar_bottom_menu .top_bar .no_image{background-color:#008b33;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;line-height:24px}::ng-deep .sidebar_bottom_menu .mat_menu_organization{padding:8px 12px!important}::ng-deep .sidebar_bottom_menu .mat_menu_organization .mat-mdc-menu-item-text{display:flex;justify-content:space-between;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu{display:flex;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .image{width:24px;height:24px;border-radius:50%;margin-right:12px}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .no_image{color:#006b1e;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px;background-color:#c0e5c7}::ng-deep .sidebar_platforms_menu{width:280px}::ng-deep .sidebar_platforms_menu a{text-decoration:none!important}::ng-deep .sidebar_platforms_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_platforms_menu .menu_title{color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;padding:12px}::ng-deep .sidebar_platforms_menu .standard_menu_item{padding:8px 12px!important;display:flex;align-items:center}::ng-deep .sidebar_platforms_menu .standard_menu_item .logo{margin-right:14px}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text{display:flex;align-items:center;font-weight:500;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text .logo{margin-right:14px}::ng-deep .main_sidebar .mat-ripple:not(:empty){transform:unset!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.Router }, { type: i2.HttpClient }], propDecorators: { canDeactivate: [{
                 type: HostListener,
                 args: ['window:beforeunload']