i-tech-shared-components 1.4.32 → 1.4.34

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

@@ -18,7 +18,7 @@ import { MatInput } from '@angular/material/input';
 import { NgxMaskDirective, NgxMaskPipe, NgxMaskService } from 'ngx-mask';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import * as i5 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
+import { MatSelectModule, MatSelect, MatOption, MatLabel as MatLabel$1, MatError as MatError$1, MatFormField } from '@angular/material/select';
 import * as i3$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i4$1 from '@angular/material/menu';
@@ -29,6 +29,7 @@ import { NavigationEnd, RouterLink } from '@angular/router';
 import * as i5$1 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
 import * as i2 from '@angular/common/http';
+import * as libphonenumber from 'google-libphonenumber';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 
 class GenerateErrorMessagesPipe {
@@ -495,7 +496,7 @@ class TextInputComponent {
         return this._inputData?.readOnly || this.ngControl?.control?.disabled || false;
     }
     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\" *ngIf=\"inputData.hideLabel !== true\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : isDisabled,\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' : isDisabled}\">*</span>\n  </div>\n  <mat-form-field appearance=\"outline\" class=\"w-100\"\n                  [class.readonly-field]=\"isDisabled\"\n  >\n    <!-- Leading Icon -->\n    <mat-icon *ngIf=\"inputData.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !inputData.iconPrefixColor && isDisabled,\n                    'default-form-icon-color' : !inputData.iconPrefixColor && !isDisabled\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           [attr.data-testId]=\"inputData.testId\"\n           [mask]=\"inputData.mask || ''\"\n           [ngClass]=\"{'readonly-color readonly-cursor' : isDisabled}\"\n           [inputMask]=\"inputData.inputMask!\"\n           [float]=\"'' + (inputData.float || false)\"\n           [min]=\"('' + inputData.min)\"\n           [max]=\"('' + inputData.max)\"\n           [errorStateMatcher]=\"customErrorStateMatcher\"\n           (blur)=\"onFocusOut()\"\n           (input)=\"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' : isDisabled}\"\n              [errorStateMatcher]=\"customErrorStateMatcher\"\n              (input)=\"onValueChange()\"\n    ></textarea>\n\n    <!-- Clear Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.clearable && hasValue\"\n      iconName=\"cancel\"\n      [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n      class=\"clear-icon-overlay\"\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      [ngClass]=\"isDisabled ? '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      [ngClass]=\"isDisabled ? '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", styles: [".clear-icon-overlay{position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:2!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:24px!important;width:24px!important;height:24px!important;line-height:24px!important;top:2px}:host(.i-tech-text-input) ::ng-deep .mat-mdc-form-field{position:relative}\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", "testId"], 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\" *ngIf=\"inputData.hideLabel !== true\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : isDisabled,\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' : isDisabled}\">*</span>\n  </div>\n  <mat-form-field appearance=\"outline\" class=\"w-100\"\n                  [class.readonly-field]=\"isDisabled\"\n  >\n    <!-- Leading Icon -->\n    <mat-icon *ngIf=\"inputData.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !inputData.iconPrefixColor && isDisabled,\n                    'default-form-icon-color' : !inputData.iconPrefixColor && !isDisabled\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           [attr.data-testId]=\"inputData.testId\"\n           [mask]=\"inputData.mask || ''\"\n           [ngClass]=\"{'readonly-color readonly-cursor' : isDisabled}\"\n           [inputMask]=\"inputData.inputMask!\"\n           [float]=\"'' + (inputData.float || false)\"\n           [min]=\"('' + inputData.min)\"\n           [max]=\"('' + inputData.max)\"\n           [errorStateMatcher]=\"customErrorStateMatcher\"\n           (blur)=\"onFocusOut()\"\n           (input)=\"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' : isDisabled}\"\n              [errorStateMatcher]=\"customErrorStateMatcher\"\n              (input)=\"onValueChange()\"\n    ></textarea>\n\n    <!-- Clear Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.clearable && hasValue\"\n      iconName=\"cancel\"\n      [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n      class=\"clear-icon-overlay\"\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      [ngClass]=\"isDisabled ? '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      [ngClass]=\"isDisabled ? '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", styles: [".clear-icon-overlay{position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:2!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:24px!important;width:24px!important;height:24px!important;line-height:24px!important;top:2px}:host(.i-tech-text-input) ::ng-deep .mat-mdc-form-field{position:relative}\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", "testId"], 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,
@@ -512,7 +513,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\" *ngIf=\"inputData.hideLabel !== true\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : isDisabled,\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' : isDisabled}\">*</span>\n  </div>\n  <mat-form-field appearance=\"outline\" class=\"w-100\"\n                  [class.readonly-field]=\"isDisabled\"\n  >\n    <!-- Leading Icon -->\n    <mat-icon *ngIf=\"inputData.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !inputData.iconPrefixColor && isDisabled,\n                    'default-form-icon-color' : !inputData.iconPrefixColor && !isDisabled\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           [attr.data-testId]=\"inputData.testId\"\n           [mask]=\"inputData.mask || ''\"\n           [ngClass]=\"{'readonly-color readonly-cursor' : isDisabled}\"\n           [inputMask]=\"inputData.inputMask!\"\n           [float]=\"'' + (inputData.float || false)\"\n           [min]=\"('' + inputData.min)\"\n           [max]=\"('' + inputData.max)\"\n           [errorStateMatcher]=\"customErrorStateMatcher\"\n           (blur)=\"onFocusOut()\"\n           (input)=\"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' : isDisabled}\"\n              [errorStateMatcher]=\"customErrorStateMatcher\"\n              (input)=\"onValueChange()\"\n    ></textarea>\n\n    <!-- Clear Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.clearable && hasValue\"\n      iconName=\"cancel\"\n      [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n      class=\"clear-icon-overlay\"\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      [ngClass]=\"isDisabled ? '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      [ngClass]=\"isDisabled ? '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", styles: [".clear-icon-overlay{position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:2!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:24px!important;width:24px!important;height:24px!important;line-height:24px!important;top:2px}:host(.i-tech-text-input) ::ng-deep .mat-mdc-form-field{position:relative}\n"] }]
+                    ], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\n  <div class=\"w-100\" *ngIf=\"inputData.hideLabel !== true\">\n    <mat-label [ngClass]=\"{\n          'readonly-color' : isDisabled,\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' : isDisabled}\">*</span>\n  </div>\n  <mat-form-field appearance=\"outline\" class=\"w-100\"\n                  [class.readonly-field]=\"isDisabled\"\n  >\n    <!-- Leading Icon -->\n    <mat-icon *ngIf=\"inputData.iconPrefix\"\n              matPrefix\n              [ngClass]=\"{\n                    'readonly-color' : !inputData.iconPrefixColor && isDisabled,\n                    'default-form-icon-color' : !inputData.iconPrefixColor && !isDisabled\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           [attr.data-testId]=\"inputData.testId\"\n           [mask]=\"inputData.mask || ''\"\n           [ngClass]=\"{'readonly-color readonly-cursor' : isDisabled}\"\n           [inputMask]=\"inputData.inputMask!\"\n           [float]=\"'' + (inputData.float || false)\"\n           [min]=\"('' + inputData.min)\"\n           [max]=\"('' + inputData.max)\"\n           [errorStateMatcher]=\"customErrorStateMatcher\"\n           (blur)=\"onFocusOut()\"\n           (input)=\"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' : isDisabled}\"\n              [errorStateMatcher]=\"customErrorStateMatcher\"\n              (input)=\"onValueChange()\"\n    ></textarea>\n\n    <!-- Clear Icon -->\n    <i-tech-icon-button\n      *ngIf=\"inputData.clearable && hasValue\"\n      iconName=\"cancel\"\n      [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n      class=\"clear-icon-overlay\"\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      [ngClass]=\"isDisabled ? '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      [ngClass]=\"isDisabled ? '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", styles: [".clear-icon-overlay{position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:2!important;width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;margin:0!important}.clear-icon-overlay ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:24px!important;width:24px!important;height:24px!important;line-height:24px!important;top:2px}:host(.i-tech-text-input) ::ng-deep .mat-mdc-form-field{position:relative}\n"] }]
         }], ctorParameters: () => [{ type: InputService }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['inputElement', { static: true }]
@@ -1764,11 +1765,11 @@ class CompanyImageComponent {
         this.CompaniesEnum = CompaniesEnum;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CompanyImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CompanyImageComponent, isStandalone: true, selector: "i-tech-company-image", inputs: { collapsed: "collapsed", userData: "userData", currentCompany: "currentCompany", platform: "platform" }, ngImport: i0, template: "<div class=\"information pointer\" *ngIf=\"userData\">\n    <div class=\"information_main\">\n        <div class=\"images\">\n            <img alt=\"\" class=\"company_img\" *ngIf=\"currentCompany?.image; else noImageComponent\"\n                 [src]=\"currentCompany.image\"\n                 [matTooltipDisabled]=\"!collapsed\"\n                 matTooltipClass=\"multiline_tooltip_for_profile\"\n                 [matTooltip]=\"(currentCompany?.name || '') + '\\n\\r' + (userData.firstName + ' ' + userData.lastName + '\\n') + (userData.email)\"\n            >\n            <ng-template #noImageComponent>\n                <div class=\"company_img no_image\"\n                     [matTooltipDisabled]=\"!collapsed\"\n                     matTooltipClass=\"multiline_tooltip_for_profile\"\n                     [matTooltip]=\"(currentCompany?.name || '') + '\\n\\r' + (userData.firstName + ' ' + userData.lastName + '\\n') + (userData.email)\"\n                >\n                    {{(currentCompany?.name || '') | slice: 0 : 1 | uppercase}}\n                </div>\n            </ng-template>\n\n            <div class=\"user_img\">\n                {{userData.firstName | slice: 0 : 1 | uppercase}}\n            </div>\n        </div>\n\n        <div class=\"names\">\n            <div class=\"company_name\">{{currentCompany?.name || ''}}</div>\n            <div class=\"user_name\">{{userData.firstName}} {{userData.lastName}}</div>\n        </div>\n\n    </div>\n    <div class=\"time_zone\" *ngIf=\"platform === CompaniesEnum.T3\">\n        {{userData.timeZone?.enumType || ''}}\n    </div>\n</div>\n", styles: [".information .information_main{display:flex;align-items:center}.information .information_main:hover{background-color:#effaf1;outline:4.5px solid #EFFAF1;border-radius:5px}.information .information_main .images{width:max-content;position:relative}.information .information_main .images .company_img{width:40px;height:40px;border-radius:50%;object-fit:cover}.information .information_main .images .company_img:hover{outline:2px solid rgba(0,172,72,.16)}.information .information_main .images .user_img{position:absolute;bottom:0;right:0;border-radius:50%;width:16px;height:16px;border:1px solid #EFFAF1;background-color:#006b1e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px}.information .information_main .images .no_image{display:flex;align-items:center;justify-content:center;background-color:#c0e5c7;color:#006b1e;font-weight:700;font-size:18px;line-height:24px}.information .information_main .names{margin-left:8px;width:110px}.information .information_main .names .company_name{color:#424954;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.information .information_main .names .user_name{color:#424954;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.information .time_zone{margin-top:10px;display:flex;justify-content:center;color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px}::ng-deep .multiline_tooltip_for_profile{white-space:pre-line}::ng-deep .multiline_tooltip_for_profile .mat-mdc-tooltip-surface{text-align:left!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CompanyImageComponent, isStandalone: true, selector: "i-tech-company-image", inputs: { collapsed: "collapsed", userData: "userData", currentCompany: "currentCompany", platform: "platform" }, ngImport: i0, template: "<div class=\"information pointer\" *ngIf=\"userData\"\n     [attr.data-testId]=\"'user_profile_information'\"\n>\n    <div class=\"information_main\">\n        <div class=\"images\">\n            <img alt=\"\" class=\"company_img\" *ngIf=\"currentCompany?.image; else noImageComponent\"\n                 [src]=\"currentCompany.image\"\n                 [matTooltipDisabled]=\"!collapsed\"\n                 matTooltipClass=\"multiline_tooltip_for_profile\"\n                 [matTooltip]=\"(currentCompany?.name || '') + '\\n\\r' + (userData.firstName + ' ' + userData.lastName + '\\n') + (userData.email)\"\n            >\n            <ng-template #noImageComponent>\n                <div class=\"company_img no_image\"\n                     [matTooltipDisabled]=\"!collapsed\"\n                     matTooltipClass=\"multiline_tooltip_for_profile\"\n                     [matTooltip]=\"(currentCompany?.name || '') + '\\n\\r' + (userData.firstName + ' ' + userData.lastName + '\\n') + (userData.email)\"\n                >\n                    {{(currentCompany?.name || '') | slice: 0 : 1 | uppercase}}\n                </div>\n            </ng-template>\n\n            <div class=\"user_img\">\n                {{userData.firstName | slice: 0 : 1 | uppercase}}\n            </div>\n        </div>\n\n        <div class=\"names\">\n            <div class=\"company_name\">{{currentCompany?.name || ''}}</div>\n            <div class=\"user_name\">{{userData.firstName}} {{userData.lastName}}</div>\n        </div>\n\n    </div>\n    <div class=\"time_zone\" *ngIf=\"platform === CompaniesEnum.T3\">\n        {{userData.timeZone?.enumType || ''}}\n    </div>\n</div>\n", styles: [".information .information_main{display:flex;align-items:center}.information .information_main:hover{background-color:#effaf1;outline:4.5px solid #EFFAF1;border-radius:5px}.information .information_main .images{width:max-content;position:relative}.information .information_main .images .company_img{width:40px;height:40px;border-radius:50%;object-fit:cover}.information .information_main .images .company_img:hover{outline:2px solid rgba(0,172,72,.16)}.information .information_main .images .user_img{position:absolute;bottom:0;right:0;border-radius:50%;width:16px;height:16px;border:1px solid #EFFAF1;background-color:#006b1e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px}.information .information_main .images .no_image{display:flex;align-items:center;justify-content:center;background-color:#c0e5c7;color:#006b1e;font-weight:700;font-size:18px;line-height:24px}.information .information_main .names{margin-left:8px;width:110px}.information .information_main .names .company_name{color:#424954;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.information .information_main .names .user_name{color:#424954;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.information .time_zone{margin-top:10px;display:flex;justify-content:center;color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px}::ng-deep .multiline_tooltip_for_profile{white-space:pre-line}::ng-deep .multiline_tooltip_for_profile .mat-mdc-tooltip-surface{text-align:left!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CompanyImageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'i-tech-company-image', imports: [NgIf, UpperCasePipe, SlicePipe, MatTooltipModule], standalone: true, template: "<div class=\"information pointer\" *ngIf=\"userData\">\n    <div class=\"information_main\">\n        <div class=\"images\">\n            <img alt=\"\" class=\"company_img\" *ngIf=\"currentCompany?.image; else noImageComponent\"\n                 [src]=\"currentCompany.image\"\n                 [matTooltipDisabled]=\"!collapsed\"\n                 matTooltipClass=\"multiline_tooltip_for_profile\"\n                 [matTooltip]=\"(currentCompany?.name || '') + '\\n\\r' + (userData.firstName + ' ' + userData.lastName + '\\n') + (userData.email)\"\n            >\n            <ng-template #noImageComponent>\n                <div class=\"company_img no_image\"\n                     [matTooltipDisabled]=\"!collapsed\"\n                     matTooltipClass=\"multiline_tooltip_for_profile\"\n                     [matTooltip]=\"(currentCompany?.name || '') + '\\n\\r' + (userData.firstName + ' ' + userData.lastName + '\\n') + (userData.email)\"\n                >\n                    {{(currentCompany?.name || '') | slice: 0 : 1 | uppercase}}\n                </div>\n            </ng-template>\n\n            <div class=\"user_img\">\n                {{userData.firstName | slice: 0 : 1 | uppercase}}\n            </div>\n        </div>\n\n        <div class=\"names\">\n            <div class=\"company_name\">{{currentCompany?.name || ''}}</div>\n            <div class=\"user_name\">{{userData.firstName}} {{userData.lastName}}</div>\n        </div>\n\n    </div>\n    <div class=\"time_zone\" *ngIf=\"platform === CompaniesEnum.T3\">\n        {{userData.timeZone?.enumType || ''}}\n    </div>\n</div>\n", styles: [".information .information_main{display:flex;align-items:center}.information .information_main:hover{background-color:#effaf1;outline:4.5px solid #EFFAF1;border-radius:5px}.information .information_main .images{width:max-content;position:relative}.information .information_main .images .company_img{width:40px;height:40px;border-radius:50%;object-fit:cover}.information .information_main .images .company_img:hover{outline:2px solid rgba(0,172,72,.16)}.information .information_main .images .user_img{position:absolute;bottom:0;right:0;border-radius:50%;width:16px;height:16px;border:1px solid #EFFAF1;background-color:#006b1e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px}.information .information_main .images .no_image{display:flex;align-items:center;justify-content:center;background-color:#c0e5c7;color:#006b1e;font-weight:700;font-size:18px;line-height:24px}.information .information_main .names{margin-left:8px;width:110px}.information .information_main .names .company_name{color:#424954;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.information .information_main .names .user_name{color:#424954;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.information .time_zone{margin-top:10px;display:flex;justify-content:center;color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px}::ng-deep .multiline_tooltip_for_profile{white-space:pre-line}::ng-deep .multiline_tooltip_for_profile .mat-mdc-tooltip-surface{text-align:left!important}\n"] }]
+            args: [{ selector: 'i-tech-company-image', imports: [NgIf, UpperCasePipe, SlicePipe, MatTooltipModule], standalone: true, template: "<div class=\"information pointer\" *ngIf=\"userData\"\n     [attr.data-testId]=\"'user_profile_information'\"\n>\n    <div class=\"information_main\">\n        <div class=\"images\">\n            <img alt=\"\" class=\"company_img\" *ngIf=\"currentCompany?.image; else noImageComponent\"\n                 [src]=\"currentCompany.image\"\n                 [matTooltipDisabled]=\"!collapsed\"\n                 matTooltipClass=\"multiline_tooltip_for_profile\"\n                 [matTooltip]=\"(currentCompany?.name || '') + '\\n\\r' + (userData.firstName + ' ' + userData.lastName + '\\n') + (userData.email)\"\n            >\n            <ng-template #noImageComponent>\n                <div class=\"company_img no_image\"\n                     [matTooltipDisabled]=\"!collapsed\"\n                     matTooltipClass=\"multiline_tooltip_for_profile\"\n                     [matTooltip]=\"(currentCompany?.name || '') + '\\n\\r' + (userData.firstName + ' ' + userData.lastName + '\\n') + (userData.email)\"\n                >\n                    {{(currentCompany?.name || '') | slice: 0 : 1 | uppercase}}\n                </div>\n            </ng-template>\n\n            <div class=\"user_img\">\n                {{userData.firstName | slice: 0 : 1 | uppercase}}\n            </div>\n        </div>\n\n        <div class=\"names\">\n            <div class=\"company_name\">{{currentCompany?.name || ''}}</div>\n            <div class=\"user_name\">{{userData.firstName}} {{userData.lastName}}</div>\n        </div>\n\n    </div>\n    <div class=\"time_zone\" *ngIf=\"platform === CompaniesEnum.T3\">\n        {{userData.timeZone?.enumType || ''}}\n    </div>\n</div>\n", styles: [".information .information_main{display:flex;align-items:center}.information .information_main:hover{background-color:#effaf1;outline:4.5px solid #EFFAF1;border-radius:5px}.information .information_main .images{width:max-content;position:relative}.information .information_main .images .company_img{width:40px;height:40px;border-radius:50%;object-fit:cover}.information .information_main .images .company_img:hover{outline:2px solid rgba(0,172,72,.16)}.information .information_main .images .user_img{position:absolute;bottom:0;right:0;border-radius:50%;width:16px;height:16px;border:1px solid #EFFAF1;background-color:#006b1e;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px}.information .information_main .images .no_image{display:flex;align-items:center;justify-content:center;background-color:#c0e5c7;color:#006b1e;font-weight:700;font-size:18px;line-height:24px}.information .information_main .names{margin-left:8px;width:110px}.information .information_main .names .company_name{color:#424954;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.information .information_main .names .user_name{color:#424954;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.information .time_zone{margin-top:10px;display:flex;justify-content:center;color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px}::ng-deep .multiline_tooltip_for_profile{white-space:pre-line}::ng-deep .multiline_tooltip_for_profile .mat-mdc-tooltip-surface{text-align:left!important}\n"] }]
         }], propDecorators: { collapsed: [{
                 type: Input
             }], userData: [{
@@ -1962,13 +1963,13 @@ class NewSidebarComponent {
             this.mobileViewSidebarOpened = false;
     }
     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", popupClickEvents: "popupClickEvents", signOutEvent: "signOutEvent", newAuthenticatedResponseEvent: "newAuthenticatedResponseEvent" }, host: { listeners: { "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<div class=\"sidebar\">\n  <div class=\"mobile_sidebar_header\">\n    <i-tech-icon-button class=\"mobile_menu_button\"\n                        [type]=\"'tonal'\"\n                        [size]=\"'medium'\"\n                        [iconName]=\"'menu'\"\n                        (buttonClick)=\"openSidebarMobile()\"\n    ></i-tech-icon-button>\n  </div>\n\n  <div class=\"main_sidebar_wrapper\"\n       (click)=\"handleFullClickOnWrapper($event)\"\n       [class.mobile_opened]=\"mobileViewSidebarOpened\"\n  >\n    <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                 [attr.data-testId]=\"'active-app-' + app.id\"\n              >\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               data-testId=\"back-to-main-sidebar\"\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             [attr.data-testId]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n          >\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 link_badge\" *ngIf=\"link.isNew\">New</div>\n              <i-tech-icon-button class=\"link_badge info\"\n                                  *ngIf=\"link.infoWithTooltipText\"\n                                  [tooltip]=\"link.infoWithTooltipText || ''\"\n                                  [size]=\"'small'\"\n                                  [iconName]=\"'info'\"\n              >\n              </i-tech-icon-button>\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               data-testId=\"manage-account-link\"\n            >\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\n            <div mat-menu-item *ngIf=\"platform === CompaniesEnum.TMT\"\n                 class=\"standard_menu_item\"\n                 (click)=\"emitPopupClicks('NOTIFICATION')\"\n            >\n              Notifications\n            </div>\n\n            <a [href]=\"BottomPopupLinks['addNewOrganization']\"\n               data-testId=\"add-new-organization-link\"\n            >\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                 data-testId=\"open-zendesk-link\"\n            >\n              Help Center\n            </div>\n\n            <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\"\n               data-testId=\"terms-link\"\n            >\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               data-testId=\"privacy-link\"\n            >\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                 data-testId=\"sign-out-button\"\n            >\n              Sign out\n            </div>\n          </mat-menu>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".sidebar .main_sidebar_wrapper{height:100vh}.sidebar .main_sidebar{height:100%;box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;width:190px;position:relative;background-color:#fff;z-index:100}.sidebar .main_sidebar a{text-decoration:none!important}.sidebar .main_sidebar.collapsed{width:80px}.sidebar .main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.sidebar .main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.sidebar .main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.sidebar .main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .link_badge{right:0!important;top:14px!important}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active,.sidebar .main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.sidebar .main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.sidebar .main_sidebar.collapsed::ng-deep .information .names{display:none}.sidebar .main_sidebar .pointer{cursor:pointer}.sidebar .main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.sidebar .main_sidebar--header a{height:40px}.sidebar .main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.sidebar .main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.sidebar .main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.sidebar .main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.sidebar .main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.sidebar .main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.sidebar .main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.sidebar .main_sidebar--content--link .parent_icon{width:24px;height:24px}.sidebar .main_sidebar--content--link .link_badge{position:absolute;right:24px;top:18px;color:#1f4085}.sidebar .main_sidebar--content--link .new{border-radius:8px;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc}.sidebar .main_sidebar--content--link.active,.sidebar .main_sidebar--content--link:hover{background-color:#effaf1}.sidebar .main_sidebar--footer{bottom:0;position:absolute;width:100%}.sidebar .main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.sidebar .main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.sidebar .mobile_sidebar_header{display:none;position:fixed;z-index:999;padding:8px;background-color:#fff;top:0;left:0}@media (max-width: 768px){.sidebar .mobile_sidebar_header{display:block}.sidebar .main_sidebar_wrapper{contain:paint;width:0;height:0;background-color:#00000052;position:fixed;pointer-events:none;z-index:999;top:0;left:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.sidebar .main_sidebar_wrapper>*{transform:translate(-100%);transition:transform .3s ease}.sidebar .main_sidebar_wrapper.mobile_opened{pointer-events:auto;opacity:1;visibility:visible;background-color:#00000052;width:100%;height:100%}.sidebar .main_sidebar_wrapper.mobile_opened>*{transform:translate(0)}}.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", "testId"], 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" }] }); }
+    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", popupClickEvents: "popupClickEvents", signOutEvent: "signOutEvent", newAuthenticatedResponseEvent: "newAuthenticatedResponseEvent" }, host: { listeners: { "window:beforeunload": "canDeactivate()" } }, ngImport: i0, template: "<div class=\"sidebar\">\n  <div class=\"mobile_sidebar_header\">\n    <i-tech-icon-button class=\"mobile_menu_button\"\n                        [type]=\"'tonal'\"\n                        [size]=\"'medium'\"\n                        [iconName]=\"'menu'\"\n                        [testId]=\"'mobile_menu_open_sidebar_button'\"\n                        (buttonClick)=\"openSidebarMobile()\"\n    ></i-tech-icon-button>\n  </div>\n\n  <div class=\"main_sidebar_wrapper\"\n       (click)=\"handleFullClickOnWrapper($event)\"\n       [class.mobile_opened]=\"mobileViewSidebarOpened\"\n  >\n    <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           [attr.data-testId]=\"platform + '_org_logo'\"\n        >\n\n          <img class=\"logo pointer\" alt=\"\"\n               *ngIf=\"isCollapsed\"\n               [attr.data-testId]=\"platform + '_platform_logo_collapsed'\"\n               [src]=\"'/assets/logos/small/' + platform + '.svg'\"\n          >\n\n          <img class=\"logo pointer\" alt=\"\"\n               *ngIf=\"!isCollapsed\"\n               [attr.data-testId]=\"platform + '_platform_logo'\"\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          [testId]=\"'open_apps_list'\"\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                 [attr.data-testId]=\"'active-app-' + app.id\"\n              >\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               data-testId=\"back-to-main-sidebar\"\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             [attr.data-testId]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n          >\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 link_badge\" *ngIf=\"link.isNew\">New</div>\n              <i-tech-icon-button class=\"link_badge info\"\n                                  *ngIf=\"link.infoWithTooltipText\"\n                                  [tooltip]=\"link.infoWithTooltipText || ''\"\n                                  [size]=\"'small'\"\n                                  [iconName]=\"'info'\"\n              >\n              </i-tech-icon-button>\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               data-testId=\"manage-account-link\"\n            >\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              data-testId=\"open_organization_profile_page\"\n            >\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\n            <div mat-menu-item *ngIf=\"platform === CompaniesEnum.TMT\"\n                 class=\"standard_menu_item\"\n                 data-testId=\"open_notifications\"\n                 (click)=\"emitPopupClicks('NOTIFICATION')\"\n            >\n              Notifications\n            </div>\n\n            <a [href]=\"BottomPopupLinks['addNewOrganization']\"\n               data-testId=\"add-new-organization-link\"\n            >\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                     [attr.data-testId]=\"organization.id + '_switch_to_organization'\"\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                 data-testId=\"open-zendesk-link\"\n            >\n              Help Center\n            </div>\n\n            <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\"\n               data-testId=\"terms-link\"\n            >\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               data-testId=\"privacy-link\"\n            >\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                 data-testId=\"sign-out-button\"\n            >\n              Sign out\n            </div>\n          </mat-menu>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".sidebar .main_sidebar_wrapper{height:100vh}.sidebar .main_sidebar{height:100%;box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;width:190px;position:relative;background-color:#fff;z-index:100}.sidebar .main_sidebar a{text-decoration:none!important}.sidebar .main_sidebar.collapsed{width:80px}.sidebar .main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.sidebar .main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.sidebar .main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.sidebar .main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .link_badge{right:0!important;top:14px!important}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active,.sidebar .main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.sidebar .main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.sidebar .main_sidebar.collapsed::ng-deep .information .names{display:none}.sidebar .main_sidebar .pointer{cursor:pointer}.sidebar .main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.sidebar .main_sidebar--header a{height:40px}.sidebar .main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.sidebar .main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.sidebar .main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.sidebar .main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.sidebar .main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.sidebar .main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.sidebar .main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.sidebar .main_sidebar--content--link .parent_icon{width:24px;height:24px}.sidebar .main_sidebar--content--link .link_badge{position:absolute;right:24px;top:18px;color:#1f4085}.sidebar .main_sidebar--content--link .new{border-radius:8px;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc}.sidebar .main_sidebar--content--link.active,.sidebar .main_sidebar--content--link:hover{background-color:#effaf1}.sidebar .main_sidebar--footer{bottom:0;position:absolute;width:100%}.sidebar .main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.sidebar .main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.sidebar .mobile_sidebar_header{display:none;position:fixed;z-index:999;padding:8px;background-color:#fff;top:0;left:0}@media (max-width: 768px){.sidebar .mobile_sidebar_header{display:block}.sidebar .main_sidebar_wrapper{contain:paint;width:0;height:0;background-color:#00000052;position:fixed;pointer-events:none;z-index:999;top:0;left:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.sidebar .main_sidebar_wrapper>*{transform:translate(-100%);transition:transform .3s ease}.sidebar .main_sidebar_wrapper.mobile_opened{pointer-events:auto;opacity:1;visibility:visible;background-color:#00000052;width:100%;height:100%}.sidebar .main_sidebar_wrapper.mobile_opened>*{transform:translate(0)}}.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", "testId"], 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, LowerCasePipe
-                    ], standalone: true, template: "<div class=\"sidebar\">\n  <div class=\"mobile_sidebar_header\">\n    <i-tech-icon-button class=\"mobile_menu_button\"\n                        [type]=\"'tonal'\"\n                        [size]=\"'medium'\"\n                        [iconName]=\"'menu'\"\n                        (buttonClick)=\"openSidebarMobile()\"\n    ></i-tech-icon-button>\n  </div>\n\n  <div class=\"main_sidebar_wrapper\"\n       (click)=\"handleFullClickOnWrapper($event)\"\n       [class.mobile_opened]=\"mobileViewSidebarOpened\"\n  >\n    <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                 [attr.data-testId]=\"'active-app-' + app.id\"\n              >\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               data-testId=\"back-to-main-sidebar\"\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             [attr.data-testId]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n          >\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 link_badge\" *ngIf=\"link.isNew\">New</div>\n              <i-tech-icon-button class=\"link_badge info\"\n                                  *ngIf=\"link.infoWithTooltipText\"\n                                  [tooltip]=\"link.infoWithTooltipText || ''\"\n                                  [size]=\"'small'\"\n                                  [iconName]=\"'info'\"\n              >\n              </i-tech-icon-button>\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               data-testId=\"manage-account-link\"\n            >\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\n            <div mat-menu-item *ngIf=\"platform === CompaniesEnum.TMT\"\n                 class=\"standard_menu_item\"\n                 (click)=\"emitPopupClicks('NOTIFICATION')\"\n            >\n              Notifications\n            </div>\n\n            <a [href]=\"BottomPopupLinks['addNewOrganization']\"\n               data-testId=\"add-new-organization-link\"\n            >\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                 data-testId=\"open-zendesk-link\"\n            >\n              Help Center\n            </div>\n\n            <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\"\n               data-testId=\"terms-link\"\n            >\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               data-testId=\"privacy-link\"\n            >\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                 data-testId=\"sign-out-button\"\n            >\n              Sign out\n            </div>\n          </mat-menu>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".sidebar .main_sidebar_wrapper{height:100vh}.sidebar .main_sidebar{height:100%;box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;width:190px;position:relative;background-color:#fff;z-index:100}.sidebar .main_sidebar a{text-decoration:none!important}.sidebar .main_sidebar.collapsed{width:80px}.sidebar .main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.sidebar .main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.sidebar .main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.sidebar .main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .link_badge{right:0!important;top:14px!important}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active,.sidebar .main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.sidebar .main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.sidebar .main_sidebar.collapsed::ng-deep .information .names{display:none}.sidebar .main_sidebar .pointer{cursor:pointer}.sidebar .main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.sidebar .main_sidebar--header a{height:40px}.sidebar .main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.sidebar .main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.sidebar .main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.sidebar .main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.sidebar .main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.sidebar .main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.sidebar .main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.sidebar .main_sidebar--content--link .parent_icon{width:24px;height:24px}.sidebar .main_sidebar--content--link .link_badge{position:absolute;right:24px;top:18px;color:#1f4085}.sidebar .main_sidebar--content--link .new{border-radius:8px;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc}.sidebar .main_sidebar--content--link.active,.sidebar .main_sidebar--content--link:hover{background-color:#effaf1}.sidebar .main_sidebar--footer{bottom:0;position:absolute;width:100%}.sidebar .main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.sidebar .main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.sidebar .mobile_sidebar_header{display:none;position:fixed;z-index:999;padding:8px;background-color:#fff;top:0;left:0}@media (max-width: 768px){.sidebar .mobile_sidebar_header{display:block}.sidebar .main_sidebar_wrapper{contain:paint;width:0;height:0;background-color:#00000052;position:fixed;pointer-events:none;z-index:999;top:0;left:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.sidebar .main_sidebar_wrapper>*{transform:translate(-100%);transition:transform .3s ease}.sidebar .main_sidebar_wrapper.mobile_opened{pointer-events:auto;opacity:1;visibility:visible;background-color:#00000052;width:100%;height:100%}.sidebar .main_sidebar_wrapper.mobile_opened>*{transform:translate(0)}}.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"] }]
+                    ], standalone: true, template: "<div class=\"sidebar\">\n  <div class=\"mobile_sidebar_header\">\n    <i-tech-icon-button class=\"mobile_menu_button\"\n                        [type]=\"'tonal'\"\n                        [size]=\"'medium'\"\n                        [iconName]=\"'menu'\"\n                        [testId]=\"'mobile_menu_open_sidebar_button'\"\n                        (buttonClick)=\"openSidebarMobile()\"\n    ></i-tech-icon-button>\n  </div>\n\n  <div class=\"main_sidebar_wrapper\"\n       (click)=\"handleFullClickOnWrapper($event)\"\n       [class.mobile_opened]=\"mobileViewSidebarOpened\"\n  >\n    <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           [attr.data-testId]=\"platform + '_org_logo'\"\n        >\n\n          <img class=\"logo pointer\" alt=\"\"\n               *ngIf=\"isCollapsed\"\n               [attr.data-testId]=\"platform + '_platform_logo_collapsed'\"\n               [src]=\"'/assets/logos/small/' + platform + '.svg'\"\n          >\n\n          <img class=\"logo pointer\" alt=\"\"\n               *ngIf=\"!isCollapsed\"\n               [attr.data-testId]=\"platform + '_platform_logo'\"\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          [testId]=\"'open_apps_list'\"\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                 [attr.data-testId]=\"'active-app-' + app.id\"\n              >\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               data-testId=\"back-to-main-sidebar\"\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             [attr.data-testId]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n          >\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 link_badge\" *ngIf=\"link.isNew\">New</div>\n              <i-tech-icon-button class=\"link_badge info\"\n                                  *ngIf=\"link.infoWithTooltipText\"\n                                  [tooltip]=\"link.infoWithTooltipText || ''\"\n                                  [size]=\"'small'\"\n                                  [iconName]=\"'info'\"\n              >\n              </i-tech-icon-button>\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               data-testId=\"manage-account-link\"\n            >\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              data-testId=\"open_organization_profile_page\"\n            >\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\n            <div mat-menu-item *ngIf=\"platform === CompaniesEnum.TMT\"\n                 class=\"standard_menu_item\"\n                 data-testId=\"open_notifications\"\n                 (click)=\"emitPopupClicks('NOTIFICATION')\"\n            >\n              Notifications\n            </div>\n\n            <a [href]=\"BottomPopupLinks['addNewOrganization']\"\n               data-testId=\"add-new-organization-link\"\n            >\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                     [attr.data-testId]=\"organization.id + '_switch_to_organization'\"\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                 data-testId=\"open-zendesk-link\"\n            >\n              Help Center\n            </div>\n\n            <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\"\n               data-testId=\"terms-link\"\n            >\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               data-testId=\"privacy-link\"\n            >\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                 data-testId=\"sign-out-button\"\n            >\n              Sign out\n            </div>\n          </mat-menu>\n        </div>\n      </div>\n    </div>\n  </div>\n\n</div>\n", styles: [".sidebar .main_sidebar_wrapper{height:100vh}.sidebar .main_sidebar{height:100%;box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;width:190px;position:relative;background-color:#fff;z-index:100}.sidebar .main_sidebar a{text-decoration:none!important}.sidebar .main_sidebar.collapsed{width:80px}.sidebar .main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.sidebar .main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.sidebar .main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.sidebar .main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .link_badge{right:0!important;top:14px!important}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active,.sidebar .main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.sidebar .main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.sidebar .main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.sidebar .main_sidebar.collapsed::ng-deep .information .names{display:none}.sidebar .main_sidebar .pointer{cursor:pointer}.sidebar .main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.sidebar .main_sidebar--header a{height:40px}.sidebar .main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.sidebar .main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.sidebar .main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.sidebar .main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.sidebar .main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.sidebar .main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.sidebar .main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.sidebar .main_sidebar--content--link .parent_icon{width:24px;height:24px}.sidebar .main_sidebar--content--link .link_badge{position:absolute;right:24px;top:18px;color:#1f4085}.sidebar .main_sidebar--content--link .new{border-radius:8px;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc}.sidebar .main_sidebar--content--link.active,.sidebar .main_sidebar--content--link:hover{background-color:#effaf1}.sidebar .main_sidebar--footer{bottom:0;position:absolute;width:100%}.sidebar .main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.sidebar .main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.sidebar .mobile_sidebar_header{display:none;position:fixed;z-index:999;padding:8px;background-color:#fff;top:0;left:0}@media (max-width: 768px){.sidebar .mobile_sidebar_header{display:block}.sidebar .main_sidebar_wrapper{contain:paint;width:0;height:0;background-color:#00000052;position:fixed;pointer-events:none;z-index:999;top:0;left:0;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.sidebar .main_sidebar_wrapper>*{transform:translate(-100%);transition:transform .3s ease}.sidebar .main_sidebar_wrapper.mobile_opened{pointer-events:auto;opacity:1;visibility:visible;background-color:#00000052;width:100%;height:100%}.sidebar .main_sidebar_wrapper.mobile_opened>*{transform:translate(0)}}.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']
@@ -2139,12 +2140,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 }]
         }] });
 
-const phoneUtil = PhoneNumberUtil.getInstance();
+const phoneUtil$1 = PhoneNumberUtil.getInstance();
 function formatPhoneNumber(phone) {
     if (!phone)
         return '';
     try {
-        const parsed = phoneUtil.parse(phone);
+        const parsed = phoneUtil$1.parse(phone);
         const countryCode = parsed.getCountryCode();
         const nationalNumber = parsed.getNationalNumber()?.toString() || '';
         if (nationalNumber.length >= 10) {
@@ -2162,6 +2163,175 @@ function formatPhoneNumber(phone) {
     }
 }
 
+const PHONE_LENGTH_MAP = {
+    '+7': 10, '+20': 10, '+27': 9, '+30': 10, '+31': 9, '+32': 9,
+    '+33': 9, '+34': 9, '+36': 9, '+39': 10, '+40': 10, '+41': 9,
+    '+43': 10, '+44': 10, '+45': 8, '+46': 9, '+47': 8, '+48': 9,
+    '+49': 10, '+51': 9, '+52': 10, '+53': 8, '+54': 10, '+55': 11,
+    '+56': 9, '+57': 10, '+58': 10, '+60': 9, '+61': 9, '+62': 10,
+    '+63': 10, '+64': 9, '+65': 8, '+66': 9, '+81': 10, '+82': 10,
+    '+84': 9, '+86': 11, '+90': 10, '+91': 10, '+92': 10, '+93': 9,
+    '+94': 9, '+95': 9, '+98': 10, '+212': 9, '+213': 9, '+216': 8,
+    '+220': 7, '+221': 9, '+234': 10, '+237': 9, '+254': 10, '+255': 9,
+    '+256': 9, '+351': 9, '+352': 9, '+353': 9, '+354': 7, '+355': 9,
+    '+356': 8, '+357': 8, '+358': 9, '+359': 9, '+370': 8, '+371': 8,
+    '+372': 8, '+373': 8, '+374': 8, '+375': 9, '+380': 9, '+381': 9,
+    '+385': 9, '+386': 8, '+420': 9, '+421': 9, '+852': 8, '+853': 8,
+    '+855': 9, '+856': 9, '+880': 10, '+886': 9, '+960': 7, '+961': 8,
+    '+962': 9, '+963': 9, '+964': 10, '+965': 8, '+966': 9, '+967': 9,
+    '+968': 8, '+970': 9, '+971': 9, '+972': 9, '+973': 8, '+974': 8,
+    '+975': 8, '+976': 8, '+977': 10, '+992': 9, '+993': 8, '+994': 9,
+    '+995': 9, '+996': 9, '+998': 9
+};
+
+class PhoneNumberInputComponent {
+    constructor(inputService) {
+        this.inputService = inputService;
+        this.countries = [];
+        this.form = new UntypedFormGroup({
+            code: new UntypedFormControl('+1'),
+            phone: new UntypedFormControl()
+        });
+        this.currentMask = '(000) 000-0000';
+        this.customErrorStateMatcher = {
+            isErrorState: () => {
+                return !!(this.ngControl.control.invalid && this.submit);
+            }
+        };
+        this.phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
+        this.countries = this.phoneUtil.getSupportedCallingCodes();
+        this.ngControl = this.inputService.injectNgControl();
+    }
+    ngOnInit() {
+        this.setDefaultValue();
+        this.form.valueChanges.subscribe((value) => {
+            const currentCode = this.form.get('code')?.value;
+            const phone = value.phone ? value.phone : null;
+            this.ngControl.control.patchValue(phone ? { code: value.code, phone: phone } : null, { emitEvent: false });
+            if (currentCode !== value.code) {
+                this.updateMask();
+            }
+            this.ngControl.control.updateValueAndValidity({ onlySelf: false, emitEvent: true });
+        });
+        this.ngControl.control.valueChanges.subscribe((value) => {
+            this.setDefaultValue(value);
+        });
+        if (this.ngControl.control.disabled) {
+            this.form.disable({ emitEvent: false });
+        }
+        this.updateMask();
+    }
+    updateMask() {
+        const currentCode = this.form.get('code')?.value;
+        const defaultMask = '(000) 000-0000';
+        if (!currentCode) {
+            this.currentMask = defaultMask;
+            return;
+        }
+        if (currentCode === '+1') {
+            this.currentMask = defaultMask;
+            return;
+        }
+        const maxLength = PHONE_LENGTH_MAP[currentCode] || 10;
+        this.currentMask = this.generateMask(maxLength);
+    }
+    generateMask(length) {
+        if (length <= 7)
+            return '(000) 0000';
+        if (length === 8)
+            return '(000) 00-000';
+        if (length === 9)
+            return '(000) 000-000';
+        if (length === 10)
+            return '(000) 000-0000';
+        if (length === 11)
+            return '(000) 0000-0000';
+        return '(000) 0000-00000';
+    }
+    setDefaultValue(initialValue = this.ngControl.control.value) {
+        if (initialValue) {
+            let parsed;
+            if (typeof initialValue === 'string') {
+                parsed = this.parsePhoneNumber(initialValue);
+            }
+            else {
+                parsed = initialValue;
+            }
+            this.form.patchValue({
+                code: parsed.code,
+                phone: parsed.phone
+            }, { emitEvent: false });
+        }
+    }
+    parsePhoneNumber(phoneNumber) {
+        if (!phoneNumber || !phoneNumber.startsWith('+')) {
+            return { code: '+1', phone: phoneNumber };
+        }
+        try {
+            const parsedNumber = this.phoneUtil.parse(phoneNumber);
+            const countryCode = '+' + parsedNumber.getCountryCode();
+            const nationalNumber = parsedNumber.getNationalNumber()?.toString() || '';
+            return {
+                code: countryCode,
+                phone: nationalNumber
+            };
+        }
+        catch (error) {
+            return { code: '+1', phone: phoneNumber };
+        }
+    }
+    getCodeAndValueSeparately() {
+        return this.form.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PhoneNumberInputComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PhoneNumberInputComponent, isStandalone: true, selector: "i-tech-phone-number-input", inputs: { data: "data", submit: "submit" }, ngImport: i0, template: "<div class=\"phone_number_input\"\n    [formGroup]=\"form\"\n    [class.disabled]=\"!!(ngControl.control.disabled)\"\n    data-testId=\"phone-number-element\"\n>\n  <div class=\"flex_align_center\">\n    <mat-label\n      [ngClass]=\"{\n       'invalid-label-color': !!(ngControl.control.errors && submit),\n    }\"\n    >{{(data?.label || '') | translate}}</mat-label>\n    <span *ngIf=\"data.required\" class=\"required-input\">*</span>\n  </div>\n\n  <mat-form-field appearance=\"outline\" class=\"w-100\">\n    <div class=\"flex_center_align_center phoneNumber\">\n      <mat-select [placeholder]=\"'Code'\"\n                  formControlName=\"code\"\n                  [errorStateMatcher]=\"customErrorStateMatcher\"\n                  panelClass=\"custome_panel_phone_number\"\n                  (selectionChange)=\"updateMask()\"\n      >\n        <mat-option *ngFor=\"let code of countries\"\n                    [value]=\"('+' + code)\"\n        >\n          +{{code}}\n        </mat-option>\n      </mat-select>\n      <input [mask]=\"currentMask\"\n             formControlName=\"phone\"\n             matInput\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             type=\"text\"\n             (click)=\"$event.stopPropagation()\"\n             (mousedown)=\"$event.stopPropagation()\"\n      >\n    </div>\n\n    <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\"\n    >\n      {{ (ngControl.control | generateErrorMessages : (data.label || ''): 'pattern') }}\n    </mat-error>\n  </mat-form-field>\n</div>\n\n\n", styles: [".phone_number_input{width:210px;padding-left:3px}.phone_number_input.disabled .required-input,.phone_number_input.disabled mat-label{color:#d7d9de!important}.phone_number_input::ng-deep .mdc-text-field--no-label{padding:0 8px}.phone_number_input .phoneNumber{overflow:hidden}.phone_number_input .phoneNumber input{border:unset;outline:none;width:100%;padding:0;padding-left:8px!important}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select{border-right:1px solid #D7D9DE;padding-right:8px;width:85px!important;outline:none;font-size:16px}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select .mat-mdc-select-value{text-align:center}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select .mat-mdc-select-placeholder{color:#647081!important;font-weight:500!important;font-size:16px!important}\n"], dependencies: [{ kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: FormsModule }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "directive", type: MatError$1, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'i-tech-phone-number-input', standalone: true, imports: [
+                        MatSelect, MatOption, NgForOf, TranslateModule, NgClass, ReactiveFormsModule,
+                        NgIf, NgxMaskDirective, FormsModule, MatLabel$1, MatError$1,
+                        GenerateErrorMessagesPipe, MatFormField, MatInput
+                    ], template: "<div class=\"phone_number_input\"\n    [formGroup]=\"form\"\n    [class.disabled]=\"!!(ngControl.control.disabled)\"\n    data-testId=\"phone-number-element\"\n>\n  <div class=\"flex_align_center\">\n    <mat-label\n      [ngClass]=\"{\n       'invalid-label-color': !!(ngControl.control.errors && submit),\n    }\"\n    >{{(data?.label || '') | translate}}</mat-label>\n    <span *ngIf=\"data.required\" class=\"required-input\">*</span>\n  </div>\n\n  <mat-form-field appearance=\"outline\" class=\"w-100\">\n    <div class=\"flex_center_align_center phoneNumber\">\n      <mat-select [placeholder]=\"'Code'\"\n                  formControlName=\"code\"\n                  [errorStateMatcher]=\"customErrorStateMatcher\"\n                  panelClass=\"custome_panel_phone_number\"\n                  (selectionChange)=\"updateMask()\"\n      >\n        <mat-option *ngFor=\"let code of countries\"\n                    [value]=\"('+' + code)\"\n        >\n          +{{code}}\n        </mat-option>\n      </mat-select>\n      <input [mask]=\"currentMask\"\n             formControlName=\"phone\"\n             matInput\n             [errorStateMatcher]=\"customErrorStateMatcher\"\n             type=\"text\"\n             (click)=\"$event.stopPropagation()\"\n             (mousedown)=\"$event.stopPropagation()\"\n      >\n    </div>\n\n    <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\"\n    >\n      {{ (ngControl.control | generateErrorMessages : (data.label || ''): 'pattern') }}\n    </mat-error>\n  </mat-form-field>\n</div>\n\n\n", styles: [".phone_number_input{width:210px;padding-left:3px}.phone_number_input.disabled .required-input,.phone_number_input.disabled mat-label{color:#d7d9de!important}.phone_number_input::ng-deep .mdc-text-field--no-label{padding:0 8px}.phone_number_input .phoneNumber{overflow:hidden}.phone_number_input .phoneNumber input{border:unset;outline:none;width:100%;padding:0;padding-left:8px!important}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select{border-right:1px solid #D7D9DE;padding-right:8px;width:85px!important;outline:none;font-size:16px}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select .mat-mdc-select-value{text-align:center}.phone_number_input .phoneNumber ::ng-deep .mat-mdc-select .mat-mdc-select-placeholder{color:#647081!important;font-weight:500!important;font-size:16px!important}\n"] }]
+        }], ctorParameters: () => [{ type: InputService }], propDecorators: { data: [{
+                type: Input
+            }], submit: [{
+                type: Input
+            }] } });
+
+const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
+const getRegionCodeForCallingCode = (callingCode) => {
+    const code = Number(callingCode.replace('+', ''));
+    const region = phoneUtil.getRegionCodeForCountryCode(code);
+    return region !== 'ZZ' ? region : null;
+};
+function internationalPhoneValidator() {
+    return (control) => {
+        const phoneValue = control.value;
+        if (!phoneValue || !phoneValue.phone) {
+            return null;
+        }
+        const fullPhoneNumber = phoneValue.code + phoneValue.phone;
+        const currentCode = phoneValue.code;
+        const primaryRegionCode = getRegionCodeForCallingCode(currentCode);
+        try {
+            const phoneNumber = phoneUtil.parse(fullPhoneNumber, primaryRegionCode || 'ZZ');
+            let isValid;
+            if (primaryRegionCode) {
+                isValid = phoneUtil.isPossibleNumber(phoneNumber, primaryRegionCode);
+            }
+            else {
+                isValid = phoneUtil.isValidNumber(phoneNumber);
+            }
+            const codeMatch = phoneNumber.getCountryCode() === Number(currentCode.replace('+', ''));
+            return (isValid && codeMatch) ? null : { phoneNumber: true };
+        }
+        catch (error) {
+            return { phoneNumber: true };
+        }
+    };
+}
+
 /*
  * Public API Surface of shared-components
  */
@@ -2170,5 +2340,5 @@ function formatPhoneNumber(phone) {
  * Generated bundle index. Do not edit.
  */
 
-export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DatePickerComponent, DateRangeDatepickerComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, ProcessedStatusCellRendererComponent, RoleEnum, TextInputComponent, TooltipCellRendererComponent, formatPhoneNumber };
+export { AgGridButtonCellComponent, AgGridFunctionsService, ArrayToStringPipe, AutocompleteSelectComponent, ButtonComponent, ButtonType, ClearValueComponent, CompaniesEnum, DatePickerComponent, DateRangeDatepickerComponent, DateTimePickerComponent, DriverCategories, DriverCategoryEnum, DriverStatus, GenerateErrorMessagesPipe, GetValueByKeyFromObjectPipe, IconButtonComponent, InputMaskDirective, InputService, LabelComponent, LabelTypeEnum, MenuComponent, NewSidebarComponent, ParseDateService, PhoneNumberInputComponent, ProcessedStatusCellRendererComponent, RoleEnum, TextInputComponent, TooltipCellRendererComponent, formatPhoneNumber, internationalPhoneValidator };
 //# sourceMappingURL=i-tech-shared-components.mjs.map