i-tech-shared-components 1.4.23 → 1.4.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/fesm2022/i-tech-shared-components.mjs +44 -25
  2. package/fesm2022/i-tech-shared-components.mjs.map +1 -1
  3. package/lib/components/button/button.component.d.ts +2 -2
  4. package/lib/components/date-picker/date-picker.component.d.ts +2 -1
  5. package/lib/components/date-range-datepicker/date-range-datepicker.component.d.ts +2 -1
  6. package/lib/components/icon-button/icon-button.component.d.ts +2 -1
  7. package/lib/components/menu/menu.component.d.ts +2 -1
  8. package/lib/components/new-sidebar/new-sidebar.component.d.ts +2 -0
  9. package/lib/interfaces/app-input.interface.d.ts +1 -0
  10. package/lib/interfaces/autocomplete-configs.interface.d.ts +1 -0
  11. package/lib/interfaces/label-type.enum.d.ts +1 -0
  12. package/package.json +1 -1
  13. package/theme/_label.scss +8 -1
package/fesm2022/i-tech-shared-components.mjs CHANGED
@@ -259,6 +259,7 @@ var LabelTypeEnum;
259
259
  LabelTypeEnum["green"] = "green";
260
260
  LabelTypeEnum["red"] = "red";
261
261
  LabelTypeEnum["neutral"] = "neutral";
262
+ LabelTypeEnum["black"] = "black";
262
263
  LabelTypeEnum["white"] = "white";
263
264
  LabelTypeEnum["gray"] = "gray";
264
265
  LabelTypeEnum["canceled"] = "canceled";
@@ -399,7 +400,7 @@ class IconButtonComponent {
399
400
  }
400
401
  }
401
402
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
402
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: IconButtonComponent, isStandalone: true, selector: "i-tech-icon-button", inputs: { size: "size", type: "type", iconSvg: "iconSvg", iconName: "iconName", tooltip: "tooltip", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n *ngIf=\"['tonal','standard'].includes(type)\"\n mat-icon-button\n [ngClass]=\"{small: size === 'small', tonal: type === 'tonal', standard: type === 'standard'}\"\n [matTooltip]=\"tooltip | translate\"\n [matTooltipDisabled]=\"!tooltip\"\n [disabled]=\"disabled || false\"\n (click)=\"onClick($event)\"\n>\n <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\n <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\n</button>\n\n<button\n *ngIf=\"type === 'filled'\"\n mat-fab\n class=\"filled\"\n [ngClass]=\"{small: size === 'small'}\"\n [matTooltip]=\"tooltip | translate\"\n [matTooltipDisabled]=\"!tooltip\"\n [color]=\"'primary'\"\n [disabled]=\"disabled || false\"\n (click)=\"onClick($event)\"\n>\n <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\n <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
403
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: IconButtonComponent, isStandalone: true, selector: "i-tech-icon-button", inputs: { size: "size", type: "type", iconSvg: "iconSvg", iconName: "iconName", tooltip: "tooltip", disabled: "disabled", testId: "testId" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<button\n *ngIf=\"['tonal','standard'].includes(type)\"\n mat-icon-button\n [ngClass]=\"{small: size === 'small', tonal: type === 'tonal', standard: type === 'standard'}\"\n [matTooltip]=\"tooltip | translate\"\n [matTooltipDisabled]=\"!tooltip\"\n [disabled]=\"disabled || false\"\n (click)=\"onClick($event)\"\n [attr.data-testId]=\"testId\"\n>\n <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\n <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\n</button>\n\n<button\n *ngIf=\"type === 'filled'\"\n mat-fab\n class=\"filled\"\n [ngClass]=\"{small: size === 'small'}\"\n [matTooltip]=\"tooltip | translate\"\n [matTooltipDisabled]=\"!tooltip\"\n [color]=\"'primary'\"\n [attr.data-testId]=\"testId\"\n [disabled]=\"disabled || false\"\n (click)=\"onClick($event)\"\n>\n <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\n <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
403
404
  }
404
405
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: IconButtonComponent, decorators: [{
405
406
  type: Component,
@@ -411,7 +412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
411
412
  MatIcon,
412
413
  MatFabButton,
413
414
  NgIf
414
- ], standalone: true, template: "<button\n *ngIf=\"['tonal','standard'].includes(type)\"\n mat-icon-button\n [ngClass]=\"{small: size === 'small', tonal: type === 'tonal', standard: type === 'standard'}\"\n [matTooltip]=\"tooltip | translate\"\n [matTooltipDisabled]=\"!tooltip\"\n [disabled]=\"disabled || false\"\n (click)=\"onClick($event)\"\n>\n <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\n <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\n</button>\n\n<button\n *ngIf=\"type === 'filled'\"\n mat-fab\n class=\"filled\"\n [ngClass]=\"{small: size === 'small'}\"\n [matTooltip]=\"tooltip | translate\"\n [matTooltipDisabled]=\"!tooltip\"\n [color]=\"'primary'\"\n [disabled]=\"disabled || false\"\n (click)=\"onClick($event)\"\n>\n <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\n <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\n</button>\n" }]
415
+ ], standalone: true, template: "<button\n *ngIf=\"['tonal','standard'].includes(type)\"\n mat-icon-button\n [ngClass]=\"{small: size === 'small', tonal: type === 'tonal', standard: type === 'standard'}\"\n [matTooltip]=\"tooltip | translate\"\n [matTooltipDisabled]=\"!tooltip\"\n [disabled]=\"disabled || false\"\n (click)=\"onClick($event)\"\n [attr.data-testId]=\"testId\"\n>\n <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\n <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\n</button>\n\n<button\n *ngIf=\"type === 'filled'\"\n mat-fab\n class=\"filled\"\n [ngClass]=\"{small: size === 'small'}\"\n [matTooltip]=\"tooltip | translate\"\n [matTooltipDisabled]=\"!tooltip\"\n [color]=\"'primary'\"\n [attr.data-testId]=\"testId\"\n [disabled]=\"disabled || false\"\n (click)=\"onClick($event)\"\n>\n <mat-icon *ngIf=\"iconSvg\" [svgIcon]=\"iconSvg\"></mat-icon>\n <mat-icon *ngIf=\"iconName\">{{iconName}}</mat-icon>\n</button>\n" }]
415
416
  }], propDecorators: { size: [{
416
417
  type: Input
417
418
  }], type: [{
@@ -424,6 +425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
424
425
  type: Input
425
426
  }], disabled: [{
426
427
  type: Input
428
+ }], testId: [{
429
+ type: Input
427
430
  }], buttonClick: [{
428
431
  type: Output
429
432
  }] } });
@@ -492,7 +495,7 @@ class TextInputComponent {
492
495
  return this._inputData?.readOnly || this.ngControl?.control?.disabled || false;
493
496
  }
494
497
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextInputComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
495
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter", valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : 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 [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"], 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"] }] }); }
498
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter", valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : 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"] }] }); }
496
499
  }
497
500
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
498
501
  type: Component,
@@ -509,7 +512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
509
512
  InputMaskDirective,
510
513
  NgxMaskDirective,
511
514
  MatFormFieldModule
512
- ], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\">\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 [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"] }]
515
+ ], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\">\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"] }]
513
516
  }], ctorParameters: () => [{ type: InputService }], propDecorators: { input: [{
514
517
  type: ViewChild,
515
518
  args: ['inputElement', { static: true }]
@@ -533,7 +536,7 @@ class ButtonComponent {
533
536
  /**
534
537
  * Data attribute used for Cypress or other testing frameworks.
535
538
  */
536
- this.data_cy = '';
539
+ this.testId = '';
537
540
  /**
538
541
  * Font icon class for displaying an icon (e.g., Material Icons).
539
542
  */
@@ -586,12 +589,12 @@ class ButtonComponent {
586
589
  }
587
590
  }
588
591
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
589
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ButtonComponent, isStandalone: true, selector: "i-tech-button", inputs: { text: "text", data_cy: "data_cy", fontIcon: "fontIcon", svgIcon: "svgIcon", type: "type", customClass: "customClass", submit: "submit", disabled: "disabled", activated: "activated", color: "color" }, outputs: { buttonClick: "buttonClick" }, providers: [
592
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ButtonComponent, isStandalone: true, selector: "i-tech-button", inputs: { text: "text", testId: "testId", fontIcon: "fontIcon", svgIcon: "svgIcon", type: "type", customClass: "customClass", submit: "submit", disabled: "disabled", activated: "activated", color: "color" }, outputs: { buttonClick: "buttonClick" }, providers: [
590
593
  NgxMaskDirective,
591
594
  NgxMaskPipe,
592
595
  TranslatePipe,
593
596
  TranslateService
594
- ], ngImport: i0, template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n mat-flat-button\n [attr.data-cy]=\"data_cy\"\n [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n [class.activated]=\"activated\"\n [ngClass]=\"(customClass || '')\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span style=\"white-space: nowrap\">{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n mat-button\n [attr.data-cy]=\"data_cy\"\n [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n [class.activated]=\"activated\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.OUTLINE,ButtonType.WARN_OUTLINE].includes(type)\"\n mat-stroked-button\n [attr.data-cy]=\"data_cy\"\n [ngClass]=\"(customClass || '') \"\n [color]=\"type === ButtonType.WARN_OUTLINE ? 'warn' : color\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n [class.activated]=\"activated\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span>{{text | translate}}</span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
597
+ ], ngImport: i0, template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n mat-flat-button\n [attr.data-testId]=\"testId\"\n [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n [class.activated]=\"activated\"\n [ngClass]=\"(customClass || '')\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span style=\"white-space: nowrap\">{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n mat-button\n [attr.data-testId]=\"testId\"\n [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n [class.activated]=\"activated\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.OUTLINE,ButtonType.WARN_OUTLINE].includes(type)\"\n mat-stroked-button\n [attr.data-testId]=\"testId\"\n [ngClass]=\"(customClass || '') \"\n [color]=\"type === ButtonType.WARN_OUTLINE ? 'warn' : color\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n [class.activated]=\"activated\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span>{{text | translate}}</span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
595
598
  }
596
599
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
597
600
  type: Component,
@@ -607,10 +610,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
607
610
  NgxMaskPipe,
608
611
  TranslatePipe,
609
612
  TranslateService
610
- ], template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n mat-flat-button\n [attr.data-cy]=\"data_cy\"\n [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n [class.activated]=\"activated\"\n [ngClass]=\"(customClass || '')\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span style=\"white-space: nowrap\">{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n mat-button\n [attr.data-cy]=\"data_cy\"\n [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n [class.activated]=\"activated\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.OUTLINE,ButtonType.WARN_OUTLINE].includes(type)\"\n mat-stroked-button\n [attr.data-cy]=\"data_cy\"\n [ngClass]=\"(customClass || '') \"\n [color]=\"type === ButtonType.WARN_OUTLINE ? 'warn' : color\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n [class.activated]=\"activated\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span>{{text | translate}}</span>\n</button>\n" }]
613
+ ], template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n mat-flat-button\n [attr.data-testId]=\"testId\"\n [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n [class.activated]=\"activated\"\n [ngClass]=\"(customClass || '')\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span style=\"white-space: nowrap\">{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n mat-button\n [attr.data-testId]=\"testId\"\n [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n [class.activated]=\"activated\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.OUTLINE,ButtonType.WARN_OUTLINE].includes(type)\"\n mat-stroked-button\n [attr.data-testId]=\"testId\"\n [ngClass]=\"(customClass || '') \"\n [color]=\"type === ButtonType.WARN_OUTLINE ? 'warn' : color\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n [class.activated]=\"activated\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span>{{text | translate}}</span>\n</button>\n" }]
611
614
  }], propDecorators: { text: [{
612
615
  type: Input
613
- }], data_cy: [{
616
+ }], testId: [{
614
617
  type: Input
615
618
  }], fontIcon: [{
616
619
  type: Input
@@ -1112,7 +1115,7 @@ class AutocompleteSelectComponent {
1112
1115
  searchInput?.nativeElement?.focus();
1113
1116
  }
1114
1117
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AutocompleteSelectComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
1115
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AutocompleteSelectComponent, isStandalone: true, selector: "i-tech-autocomplete-select", inputs: { className: "className", submitValue: "submitValue", configs: "configs", detectChanges: "detectChanges" }, outputs: { selectionChange: "selectionChange", multiSelectSelectionChange: "multiSelectSelectionChange", emitAction: "emitAction" }, host: { listeners: { "document:visibilitychange": "handleVisibilityChange()" } }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n [ngClass]=\"{\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n 'mat-select-with-search': selectConfig.search,\n 'without-label': selectConfig.hideLabel,\n 'invalid_field': ngControl.control.errors && submitValue,\n 'readonly-field': isDisabled\n }\"\n [matTooltip]=\"(selectConfig.hover && !isDisabled ? ((selectConfig.hover || '') | translate) : '')\"\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n [matTooltipPosition]=\"'above'\"\n *ngIf=\"selectConfig && ngControl\">\n\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submitValue)\n }\">\n {{ selectConfig.label | translate }}\n </mat-label>\n <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n\n\n <!-- Search Input -->\n <div class=\"search-input w-100\"\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || isDisabled }\"\n *ngIf=\"selectConfig.search\"\n >\n <input autocomplete=\"off\"\n id=\"searchInput\"\n type=\"text\"\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\n #searchInput\n [placeholder]=\"(isDisabled || selectConfig.hover) ? '' : 'Search'\"\n (focus)=\"openSelection()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n\n <!-- Search Icon -->\n <span class=\"search-icon\">\n <i-tech-icon-button\n class=\"mr-10\"\n [ngClass]=\"isDisabled ? 'readonly-color'\n : 'default-form-icon-color'\"\n *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\n [iconName]=\"selectConfig.iconPrefix || ''\"\n matPrefix\n >\n </i-tech-icon-button>\n </span>\n </div>\n\n <!-- Placeholder/Selected Value Display -->\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n <div class=\"custom-placeholder\"\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n >\n {{ ((selectConfig.placeholder || '') | translate) }}\n </div>\n <div class=\"custom-placeholder custom-value ellipsis\"\n [ngClass]=\"{\n 'pr-42': selectConfig.iconUrl,\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled)\n }\"\n *ngIf=\"ngControl?.value\"\n >\n {{showingValue}}\n </div>\n </ng-container>\n\n <!-- Custom Icon -->\n <img class=\"left_icon_new pointer\"\n alt=\"Toggle Selection\"\n (click)=\"iconClick(matSelect, searchInput)\"\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n [src]=\"'assets/images/icons/global/' + (ngControl.control.value && selectConfig.activeStateIconUrl ?\n selectConfig.activeStateIconUrl\n : selectConfig.iconUrl)\">\n\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig.search ? focusSearchInput() : null\">\n <!-- Material Select -->\n <mat-select #matSelect=\"matSelect\"\n [panelClass]=\"'autocomplete-transform-panel-location'\"\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n [aria-label]=\"selectConfig.label | translate\"\n [id]=\"selectConfig.filtrationKey || ''\"\n (opened)=\"registerPanelScrollEvent(matSelect)\"\n (openedChange)=\"openedChange($event)\"\n [formControl]=\"ngControl.control\"\n [multiple]=\"selectConfig.multiple\"\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n >\n\n <!-- Loading State -->\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n <div class=\"request_loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n </circle>\n </svg>\n </div>\n </mat-option>\n\n <!-- Options -->\n <ng-container *ngIf=\"data?.length && !pending\">\n <!-- Add New Option -->\n <mat-option *ngIf=\"selectConfig.actions\"\n class=\"pointer add_new\"\n disabled\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n <!--(click)=\"ngControl.control.reset(null);\n matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n </i-tech-button>\n </mat-option>\n\n <!-- Regular Options -->\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n >\n @if (selectConfig.needTranslateOptions) {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n }}\n }@else {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n }}\n }\n <div class=\"sub_value\" *ngIf=\"selectConfig.subValueToShow\">\n {{\n ((selectConfig.subValueToShow | getValueByKeyFromObject\n : item : null : '' ) || '')\n }}\n </div>\n </mat-option>\n </ng-container>\n\n <!-- Custom Text Options -->\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n [disabled]=\"selectConfig.changeText[item].disabled\"\n >\n {{ selectConfig.needTranslateOptions ? (selectConfig.changeText[item].text | translate ) : selectConfig.changeText[item].text}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <!-- Empty State -->\n <ng-container *ngIf=\"!pending && !data.length\">\n <mat-option disabled class=\"empty_selection_state\">\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n <span>{{ 'dropdown_no_items' | translate }}</span>\n <div class=\"mt-10\">\n <i-tech-button\n *ngIf=\"selectConfig?.actions\"\n [type]=\"ButtonType.OUTLINE\"\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n [customClass]=\"'mat-autocomplete-select-button'\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n </i-tech-button>\n </div>\n </div>\n </mat-option>\n </ng-container>\n </mat-select>\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !selectConfig['iconPrefixColor']\n && (isDisabled),\n 'default-form-icon-color' : !selectConfig['iconPrefixColor']\n && !(isDisabled)\n }\"\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n >{{ selectConfig.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n matPrefix\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n ></mat-icon>\n\n <i-tech-icon-button\n *ngIf=\"selectConfig.search && selectConfig.clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"\n $event.stopPropagation();\n $event.preventDefault();\n ngControl.control.reset(null);\n matSelect._onBlur();\n closePanelAndUnsetFocus()\n \"\n >\n </i-tech-icon-button>\n <mat-icon\n matSuffix\n class=\"select-arrow\"\n [class.open]=\"matSelect.panelOpen\"\n [ngClass]=\"{\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled),\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\n }\"\n >\n keyboard_arrow_down\n </mat-icon>\n <!-- Error Message -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n </mat-error>\n </mat-form-field>\n\n <!-- Reset Button -->\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}::ng-deep .request_loading{width:40px;height:40px;background:none}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "data_cy", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "pipe", type: GetValueByKeyFromObjectPipe, name: "getValueByKeyFromObject" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: ClearValueComponent, selector: "i-tech-clear-value", inputs: ["className", "additionalClass"], outputs: ["resetValue"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
1118
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: AutocompleteSelectComponent, isStandalone: true, selector: "i-tech-autocomplete-select", inputs: { className: "className", submitValue: "submitValue", configs: "configs", detectChanges: "detectChanges" }, outputs: { selectionChange: "selectionChange", multiSelectSelectionChange: "multiSelectSelectionChange", emitAction: "emitAction" }, host: { listeners: { "document:visibilitychange": "handleVisibilityChange()" } }, viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "allSelected", first: true, predicate: ["allSelected"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n [ngClass]=\"{\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n 'mat-select-with-search': selectConfig.search,\n 'without-label': selectConfig.hideLabel,\n 'invalid_field': ngControl.control.errors && submitValue,\n 'readonly-field': isDisabled\n }\"\n [matTooltip]=\"(selectConfig.hover && !isDisabled ? ((selectConfig.hover || '') | translate) : '')\"\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n [matTooltipPosition]=\"'above'\"\n *ngIf=\"selectConfig && ngControl\">\n\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submitValue)\n }\">\n {{ selectConfig.label | translate }}\n </mat-label>\n <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n\n\n <!-- Search Input -->\n <div class=\"search-input w-100\"\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || isDisabled }\"\n *ngIf=\"selectConfig.search\"\n >\n <input autocomplete=\"off\"\n id=\"searchInput\"\n type=\"text\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-input'\"\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\n #searchInput\n [placeholder]=\"(isDisabled || selectConfig.hover) ? '' : 'Search'\"\n (focus)=\"openSelection()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n\n <!-- Search Icon -->\n <span class=\"search-icon\">\n <i-tech-icon-button\n class=\"mr-10\"\n [ngClass]=\"isDisabled ? 'readonly-color'\n : 'default-form-icon-color'\"\n *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\n [iconName]=\"selectConfig.iconPrefix || ''\"\n matPrefix\n >\n </i-tech-icon-button>\n </span>\n </div>\n\n <!-- Placeholder/Selected Value Display -->\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n <div class=\"custom-placeholder\"\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n >\n {{ ((selectConfig.placeholder || '') | translate) }}\n </div>\n <div class=\"custom-placeholder custom-value ellipsis\"\n [ngClass]=\"{\n 'pr-42': selectConfig.iconUrl,\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled)\n }\"\n *ngIf=\"ngControl?.value\"\n >\n {{showingValue}}\n </div>\n </ng-container>\n\n <!-- Custom Icon -->\n <img class=\"left_icon_new pointer\"\n alt=\"Toggle Selection\"\n (click)=\"iconClick(matSelect, searchInput)\"\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n [src]=\"'assets/images/icons/global/' + (ngControl.control.value && selectConfig.activeStateIconUrl ?\n selectConfig.activeStateIconUrl\n : selectConfig.iconUrl)\">\n\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig.search ? focusSearchInput() : null\">\n <!-- Material Select -->\n <mat-select #matSelect=\"matSelect\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-select'\"\n [panelClass]=\"'autocomplete-transform-panel-location'\"\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n [aria-label]=\"selectConfig.label | translate\"\n [id]=\"selectConfig.filtrationKey || ''\"\n (opened)=\"registerPanelScrollEvent(matSelect)\"\n (openedChange)=\"openedChange($event)\"\n [formControl]=\"ngControl.control\"\n [multiple]=\"selectConfig.multiple\"\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n >\n\n <!-- Loading State -->\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n <div class=\"request_loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n </circle>\n </svg>\n </div>\n </mat-option>\n\n <!-- Options -->\n <ng-container *ngIf=\"data?.length && !pending\">\n <!-- Add New Option -->\n <mat-option *ngIf=\"selectConfig.actions\"\n class=\"pointer add_new\"\n disabled\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n <!--(click)=\"ngControl.control.reset(null);\n matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n </i-tech-button>\n </mat-option>\n\n <!-- Regular Options -->\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n >\n @if (selectConfig.needTranslateOptions) {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n }}\n }@else {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n }}\n }\n <div class=\"sub_value\" *ngIf=\"selectConfig.subValueToShow\">\n {{\n ((selectConfig.subValueToShow | getValueByKeyFromObject\n : item : null : '' ) || '')\n }}\n </div>\n </mat-option>\n </ng-container>\n\n <!-- Custom Text Options -->\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n [disabled]=\"selectConfig.changeText[item].disabled\"\n >\n {{ selectConfig.needTranslateOptions ? (selectConfig.changeText[item].text | translate ) : selectConfig.changeText[item].text}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <!-- Empty State -->\n <ng-container *ngIf=\"!pending && !data.length\">\n <mat-option disabled class=\"empty_selection_state\">\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n <span>{{ 'dropdown_no_items' | translate }}</span>\n <div class=\"mt-10\">\n <i-tech-button\n *ngIf=\"selectConfig?.actions\"\n [type]=\"ButtonType.OUTLINE\"\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n [customClass]=\"'mat-autocomplete-select-button'\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n </i-tech-button>\n </div>\n </div>\n </mat-option>\n </ng-container>\n </mat-select>\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !selectConfig['iconPrefixColor']\n && (isDisabled),\n 'default-form-icon-color' : !selectConfig['iconPrefixColor']\n && !(isDisabled)\n }\"\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n >{{ selectConfig.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n matPrefix\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n ></mat-icon>\n\n <i-tech-icon-button\n *ngIf=\"selectConfig.search && selectConfig.clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"\n $event.stopPropagation();\n $event.preventDefault();\n ngControl.control.reset(null);\n matSelect._onBlur();\n closePanelAndUnsetFocus()\n \"\n >\n </i-tech-icon-button>\n <mat-icon\n matSuffix\n class=\"select-arrow\"\n [class.open]=\"matSelect.panelOpen\"\n [ngClass]=\"{\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled),\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\n }\"\n >\n keyboard_arrow_down\n </mat-icon>\n <!-- Error Message -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n </mat-error>\n </mat-form-field>\n\n <!-- Reset Button -->\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}::ng-deep .request_loading{width:40px;height:40px;background:none}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled", "testId"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "testId", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "pipe", type: GetValueByKeyFromObjectPipe, name: "getValueByKeyFromObject" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: ClearValueComponent, selector: "i-tech-clear-value", inputs: ["className", "additionalClass"], outputs: ["resetValue"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
1116
1119
  }
1117
1120
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AutocompleteSelectComponent, decorators: [{
1118
1121
  type: Component,
@@ -1132,8 +1135,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1132
1135
  MatIcon,
1133
1136
  GenerateErrorMessagesPipe,
1134
1137
  ClearValueComponent,
1135
- MatFormFieldModule
1136
- ], standalone: true, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n [ngClass]=\"{\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n 'mat-select-with-search': selectConfig.search,\n 'without-label': selectConfig.hideLabel,\n 'invalid_field': ngControl.control.errors && submitValue,\n 'readonly-field': isDisabled\n }\"\n [matTooltip]=\"(selectConfig.hover && !isDisabled ? ((selectConfig.hover || '') | translate) : '')\"\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n [matTooltipPosition]=\"'above'\"\n *ngIf=\"selectConfig && ngControl\">\n\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submitValue)\n }\">\n {{ selectConfig.label | translate }}\n </mat-label>\n <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n\n\n <!-- Search Input -->\n <div class=\"search-input w-100\"\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || isDisabled }\"\n *ngIf=\"selectConfig.search\"\n >\n <input autocomplete=\"off\"\n id=\"searchInput\"\n type=\"text\"\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\n #searchInput\n [placeholder]=\"(isDisabled || selectConfig.hover) ? '' : 'Search'\"\n (focus)=\"openSelection()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n\n <!-- Search Icon -->\n <span class=\"search-icon\">\n <i-tech-icon-button\n class=\"mr-10\"\n [ngClass]=\"isDisabled ? 'readonly-color'\n : 'default-form-icon-color'\"\n *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\n [iconName]=\"selectConfig.iconPrefix || ''\"\n matPrefix\n >\n </i-tech-icon-button>\n </span>\n </div>\n\n <!-- Placeholder/Selected Value Display -->\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n <div class=\"custom-placeholder\"\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n >\n {{ ((selectConfig.placeholder || '') | translate) }}\n </div>\n <div class=\"custom-placeholder custom-value ellipsis\"\n [ngClass]=\"{\n 'pr-42': selectConfig.iconUrl,\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled)\n }\"\n *ngIf=\"ngControl?.value\"\n >\n {{showingValue}}\n </div>\n </ng-container>\n\n <!-- Custom Icon -->\n <img class=\"left_icon_new pointer\"\n alt=\"Toggle Selection\"\n (click)=\"iconClick(matSelect, searchInput)\"\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n [src]=\"'assets/images/icons/global/' + (ngControl.control.value && selectConfig.activeStateIconUrl ?\n selectConfig.activeStateIconUrl\n : selectConfig.iconUrl)\">\n\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig.search ? focusSearchInput() : null\">\n <!-- Material Select -->\n <mat-select #matSelect=\"matSelect\"\n [panelClass]=\"'autocomplete-transform-panel-location'\"\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n [aria-label]=\"selectConfig.label | translate\"\n [id]=\"selectConfig.filtrationKey || ''\"\n (opened)=\"registerPanelScrollEvent(matSelect)\"\n (openedChange)=\"openedChange($event)\"\n [formControl]=\"ngControl.control\"\n [multiple]=\"selectConfig.multiple\"\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n >\n\n <!-- Loading State -->\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n <div class=\"request_loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n </circle>\n </svg>\n </div>\n </mat-option>\n\n <!-- Options -->\n <ng-container *ngIf=\"data?.length && !pending\">\n <!-- Add New Option -->\n <mat-option *ngIf=\"selectConfig.actions\"\n class=\"pointer add_new\"\n disabled\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n <!--(click)=\"ngControl.control.reset(null);\n matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n </i-tech-button>\n </mat-option>\n\n <!-- Regular Options -->\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n >\n @if (selectConfig.needTranslateOptions) {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n }}\n }@else {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n }}\n }\n <div class=\"sub_value\" *ngIf=\"selectConfig.subValueToShow\">\n {{\n ((selectConfig.subValueToShow | getValueByKeyFromObject\n : item : null : '' ) || '')\n }}\n </div>\n </mat-option>\n </ng-container>\n\n <!-- Custom Text Options -->\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n [disabled]=\"selectConfig.changeText[item].disabled\"\n >\n {{ selectConfig.needTranslateOptions ? (selectConfig.changeText[item].text | translate ) : selectConfig.changeText[item].text}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <!-- Empty State -->\n <ng-container *ngIf=\"!pending && !data.length\">\n <mat-option disabled class=\"empty_selection_state\">\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n <span>{{ 'dropdown_no_items' | translate }}</span>\n <div class=\"mt-10\">\n <i-tech-button\n *ngIf=\"selectConfig?.actions\"\n [type]=\"ButtonType.OUTLINE\"\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n [customClass]=\"'mat-autocomplete-select-button'\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n </i-tech-button>\n </div>\n </div>\n </mat-option>\n </ng-container>\n </mat-select>\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !selectConfig['iconPrefixColor']\n && (isDisabled),\n 'default-form-icon-color' : !selectConfig['iconPrefixColor']\n && !(isDisabled)\n }\"\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n >{{ selectConfig.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n matPrefix\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n ></mat-icon>\n\n <i-tech-icon-button\n *ngIf=\"selectConfig.search && selectConfig.clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"\n $event.stopPropagation();\n $event.preventDefault();\n ngControl.control.reset(null);\n matSelect._onBlur();\n closePanelAndUnsetFocus()\n \"\n >\n </i-tech-icon-button>\n <mat-icon\n matSuffix\n class=\"select-arrow\"\n [class.open]=\"matSelect.panelOpen\"\n [ngClass]=\"{\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled),\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\n }\"\n >\n keyboard_arrow_down\n </mat-icon>\n <!-- Error Message -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n </mat-error>\n </mat-form-field>\n\n <!-- Reset Button -->\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}::ng-deep .request_loading{width:40px;height:40px;background:none}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"] }]
1138
+ MatFormFieldModule,
1139
+ MatButton
1140
+ ], standalone: true, template: "<div class=\"new-mat-autocomplete\" id=\"mat_autocomplete\"\n [ngClass]=\"{\n 'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,\n 'mat-select-with-search': selectConfig.search,\n 'without-label': selectConfig.hideLabel,\n 'invalid_field': ngControl.control.errors && submitValue,\n 'readonly-field': isDisabled\n }\"\n [matTooltip]=\"(selectConfig.hover && !isDisabled ? ((selectConfig.hover || '') | translate) : '')\"\n [matTooltipClass]=\"'mat-mdc-tooltip big-td-mat-tooltip'\"\n [matTooltipPosition]=\"'above'\"\n *ngIf=\"selectConfig && ngControl\">\n\n <div class=\"w-100\" *ngIf=\"!selectConfig.hideLabel\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submitValue)\n }\">\n {{ selectConfig.label | translate }}\n </mat-label>\n <span *ngIf=\"selectConfig.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n\n\n <!-- Search Input -->\n <div class=\"search-input w-100\"\n (click)=\"$event.stopPropagation();$event.preventDefault()\"\n [ngClass]=\"{ hide_input_placeholder: showPlaceholder || isDisabled }\"\n *ngIf=\"selectConfig.search\"\n >\n <input autocomplete=\"off\"\n id=\"searchInput\"\n type=\"text\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-input'\"\n [ngClass]=\"{'pr-25': !selectConfig.iconUrl}\"\n #searchInput\n [placeholder]=\"(isDisabled || selectConfig.hover) ? '' : 'Search'\"\n (focus)=\"openSelection()\"\n (keydown)=\"$event.stopPropagation()\"\n (keyup)=\"getDataWithSearch(searchInput.value,$event)\">\n\n <!-- Search Icon -->\n <span class=\"search-icon\">\n <i-tech-icon-button\n class=\"mr-10\"\n [ngClass]=\"isDisabled ? 'readonly-color'\n : 'default-form-icon-color'\"\n *ngIf=\"selectConfig.iconPrefix && !showPlaceholder\"\n [iconName]=\"selectConfig.iconPrefix || ''\"\n matPrefix\n >\n </i-tech-icon-button>\n </span>\n </div>\n\n <!-- Placeholder/Selected Value Display -->\n <ng-container *ngIf=\"showPlaceholder && selectConfig.search\">\n <div class=\"custom-placeholder\"\n *ngIf=\"(!ngControl?.value && !ngControl?.value?.length) ||\n (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n >\n {{ ((selectConfig.placeholder || '') | translate) }}\n </div>\n <div class=\"custom-placeholder custom-value ellipsis\"\n [ngClass]=\"{\n 'pr-42': selectConfig.iconUrl,\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled)\n }\"\n *ngIf=\"ngControl?.value\"\n >\n {{showingValue}}\n </div>\n </ng-container>\n\n <!-- Custom Icon -->\n <img class=\"left_icon_new pointer\"\n alt=\"Toggle Selection\"\n (click)=\"iconClick(matSelect, searchInput)\"\n *ngIf=\"!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)\"\n [src]=\"'assets/images/icons/global/' + (ngControl.control.value && selectConfig.activeStateIconUrl ?\n selectConfig.activeStateIconUrl\n : selectConfig.iconUrl)\">\n\n <mat-form-field appearance=\"outline\" class=\"w-100\" (click)=\"selectConfig.search ? focusSearchInput() : null\">\n <!-- Material Select -->\n <mat-select #matSelect=\"matSelect\"\n [attr.data-testId]=\"selectConfig.testId + '-autocomplete-select'\"\n [panelClass]=\"'autocomplete-transform-panel-location'\"\n [attr.aria-placeholder]=\"(selectConfig.placeholder || '') | translate\"\n [aria-label]=\"selectConfig.label | translate\"\n [id]=\"selectConfig.filtrationKey || ''\"\n (opened)=\"registerPanelScrollEvent(matSelect)\"\n (openedChange)=\"openedChange($event)\"\n [formControl]=\"ngControl.control\"\n [multiple]=\"selectConfig.multiple\"\n (selectionChange)=\"emitSelectionChangeAndClose($event)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [placeholder]=\"(selectConfig.placeholder || '') | translate\"\n >\n\n <!-- Loading State -->\n <mat-option *ngIf=\"pending\" class=\"option_loading relative\">\n <div class=\"request_loading\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n style=\"margin: auto; background: none; display: block; shape-rendering: auto;\" viewBox=\"0 0 100 100\" width=\"40px\" height=\"40px\">\n <circle cx=\"50\" cy=\"50\" fill=\"none\" stroke=\"#00AC47\" stroke-width=\"10\" r=\"35\" stroke-dasharray=\"164.93361431346415 56.97787143782138\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\"\n dur=\"1s\" values=\"0 50 50;360 50 50\" keyTimes=\"0;1\"></animateTransform>\n </circle>\n </svg>\n </div>\n </mat-option>\n\n <!-- Options -->\n <ng-container *ngIf=\"data?.length && !pending\">\n <!-- Add New Option -->\n <mat-option *ngIf=\"selectConfig.actions\"\n class=\"pointer add_new\"\n disabled\n (click)=\"closePanelAndUnsetFocus();addNewItemEvent()\">\n <!--(click)=\"ngControl.control.reset(null);\n matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()\">-->\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \"\n [customClass]=\"'w-100 mat-autocomplete-select-button'\">\n </i-tech-button>\n </mat-option>\n\n <!-- Regular Options -->\n <ng-container *ngIf=\"!selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n >\n @if (selectConfig.needTranslateOptions) {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate\n }}\n }@else {\n {{\n ((selectConfig.valueToShowByKey | getValueByKeyFromObject\n : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '')\n }}\n }\n <div class=\"sub_value\" *ngIf=\"selectConfig.subValueToShow\">\n {{\n ((selectConfig.subValueToShow | getValueByKeyFromObject\n : item : null : '' ) || '')\n }}\n </div>\n </mat-option>\n </ng-container>\n\n <!-- Custom Text Options -->\n <ng-container *ngIf=\"selectConfig?.changeText && data.length\">\n <mat-option *ngFor=\"let item of data\"\n [value]=\"selectConfig.valueByKey | getValueByKeyFromObject : item\"\n (click)=\"optionClick(item)\"\n [disabled]=\"selectConfig.changeText[item].disabled\"\n >\n {{ selectConfig.needTranslateOptions ? (selectConfig.changeText[item].text | translate ) : selectConfig.changeText[item].text}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <!-- Empty State -->\n <ng-container *ngIf=\"!pending && !data.length\">\n <mat-option disabled class=\"empty_selection_state\">\n <div class=\"actions_and_tile add_new flex_column w-100 flex_center_align_center\">\n <span>{{ 'dropdown_no_items' | translate }}</span>\n <div class=\"mt-10\">\n <i-tech-button\n *ngIf=\"selectConfig?.actions\"\n [type]=\"ButtonType.OUTLINE\"\n (buttonClick)=\"closePanelAndUnsetFocus();addNewItemEvent()\"\n [customClass]=\"'mat-autocomplete-select-button'\"\n [fontIcon]=\"'add'\"\n [text]=\"('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) \">\n </i-tech-button>\n </div>\n </div>\n </mat-option>\n </ng-container>\n </mat-select>\n <mat-icon *ngIf=\"selectConfig.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !selectConfig['iconPrefixColor']\n && (isDisabled),\n 'default-form-icon-color' : !selectConfig['iconPrefixColor']\n && !(isDisabled)\n }\"\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n >{{ selectConfig.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"selectConfig['iconPrefixSvg']\"\n matPrefix\n [matTooltip]=\"((selectConfig['iconPrefixTooltip'] || '') | translate)\"\n [svgIcon]=\"selectConfig['iconPrefixSvg'] || ''\"\n ></mat-icon>\n\n <i-tech-icon-button\n *ngIf=\"selectConfig.search && selectConfig.clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"\n $event.stopPropagation();\n $event.preventDefault();\n ngControl.control.reset(null);\n matSelect._onBlur();\n closePanelAndUnsetFocus()\n \"\n >\n </i-tech-icon-button>\n <mat-icon\n matSuffix\n class=\"select-arrow\"\n [class.open]=\"matSelect.panelOpen\"\n [ngClass]=\"{\n 'readonly-color': isDisabled,\n 'default-form-icon-color': !(isDisabled),\n 'mt-8': !!ngControl.control.value && selectConfig.clearable\n }\"\n >\n keyboard_arrow_down\n </mat-icon>\n <!-- Error Message -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submitValue)\">\n {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}\n </mat-error>\n </mat-form-field>\n\n <!-- Reset Button -->\n <i-tech-clear-value *ngIf=\"selectConfig.reset\" (resetValue)=\"resetValue()\"></i-tech-clear-value>\n</div>\n", styles: [".left_icon_new{position:absolute;right:2px;top:1px}::ng-deep .request_loading{width:40px;height:40px;background:none}::ng-deep .request_loading img{position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%)}::ng-deep .mat-mdc-option.add_new{opacity:1!important;pointer-events:auto!important}::ng-deep .mat-mdc-option.add_new .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-option.add_new .mdc-list-item__primary-text{display:inline-block!important;width:100%!important}::ng-deep .mat-mdc-option.add_new span{color:unset!important;font-size:unset!important;margin:unset!important;opacity:1!important}@media (min-width: 1920px) and (max-width: 2500px){.mat-autocomplete{height:90px!important}}\n"] }]
1137
1141
  }], ctorParameters: () => [{ type: InputService }], propDecorators: { matSelect: [{
1138
1142
  type: ViewChild,
1139
1143
  args: ['matSelect']
@@ -1299,7 +1303,7 @@ class DatePickerComponent {
1299
1303
  return this.ngControl?.control?.disabled || false;
1300
1304
  }
1301
1305
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatePickerComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
1302
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatePickerComponent, isStandalone: true, selector: "i-tech-date-picker", inputs: { label: "label", defaultPatternKey: "defaultPatternKey", required: "required", pastDatesDisabled: "pastDatesDisabled", hintText: "hintText", placeholder: "placeholder", iconPrefix: "iconPrefix", iconPrefixSvg: "iconPrefixSvg", iconPrefixTooltip: "iconPrefixTooltip", iconPrefixColor: "iconPrefixColor", iconPrefixVariant: "iconPrefixVariant", valueChangeEmit: "valueChangeEmit", minDate: "minDate", clearable: "clearable", submit: "submit" }, outputs: { valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"flex_column relative mat-date-range-input\" *ngIf=\"ngControl\" [ngClass]=\"{'check_requirements': submit}\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submit)\n }\">\n {{ label | translate }}\n </mat-label>\n <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\"\n [class.readonly-field]=\"isDisabled\">\n <input matInput #inputElement\n type=\"text\"\n [formControl]=\"ngControl.control\"\n [placeholder]=\"placeholder | translate\"\n [min]=\"minDate\"\n dateMask\n [matDatepicker]=\"datePicker\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [matDatepickerFilter]=\"dateFilter\"\n (focus)=\"focused = true\"\n (click)=\"datePicker.open();\"\n (dateChange)=\"emitChange()\"\n >\n\n <mat-icon *ngIf=\"iconPrefix\"\n matPrefix\n [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\n [style.color]=\"iconPrefixColor\"\n >{{ iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"iconPrefixSvg\"\n ></mat-icon>\n\n <app-icon-button\n *ngIf=\"clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"$event.stopPropagation();$event.preventDefault();ngControl.control.reset(null);\"\n >\n </app-icon-button>\n\n <i-tech-icon-button matSuffix\n [iconName]=\"'date_range'\"\n (click)=\"datePicker.open()\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n ></i-tech-icon-button>\n\n <mat-datepicker #datePicker (closed)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true;focused = true\"></mat-datepicker>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\n {{ ngControl.control | generateErrorMessages : label : defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && submit)) && hintText\"\n [ngClass]=\"{'readonly-color' : isDisabled}\"\n >\n {{ hintText | translate }}\n </mat-hint>\n\n </mat-form-field>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }] }); }
1306
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DatePickerComponent, isStandalone: true, selector: "i-tech-date-picker", inputs: { label: "label", defaultPatternKey: "defaultPatternKey", required: "required", pastDatesDisabled: "pastDatesDisabled", hintText: "hintText", placeholder: "placeholder", iconPrefix: "iconPrefix", iconPrefixSvg: "iconPrefixSvg", iconPrefixTooltip: "iconPrefixTooltip", iconPrefixColor: "iconPrefixColor", iconPrefixVariant: "iconPrefixVariant", valueChangeEmit: "valueChangeEmit", minDate: "minDate", clearable: "clearable", testId: "testId", submit: "submit" }, outputs: { valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"flex_column relative mat-date-range-input\" *ngIf=\"ngControl\" [ngClass]=\"{'check_requirements': submit}\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submit)\n }\">\n {{ label | translate }}\n </mat-label>\n <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\"\n [class.readonly-field]=\"isDisabled\">\n <input matInput #inputElement\n type=\"text\"\n [formControl]=\"ngControl.control\"\n [placeholder]=\"placeholder | translate\"\n [min]=\"minDate\"\n dateMask\n [attr.data-testId]=\"'date-range-picker-' + testId\"\n [matDatepicker]=\"datePicker\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [matDatepickerFilter]=\"dateFilter\"\n (focus)=\"focused = true\"\n (click)=\"datePicker.open();\"\n (dateChange)=\"emitChange()\"\n >\n\n <mat-icon *ngIf=\"iconPrefix\"\n matPrefix\n [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\n [style.color]=\"iconPrefixColor\"\n >{{ iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"iconPrefixSvg\"\n ></mat-icon>\n\n <app-icon-button\n *ngIf=\"clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"$event.stopPropagation();$event.preventDefault();ngControl.control.reset(null);\"\n >\n </app-icon-button>\n\n <i-tech-icon-button matSuffix\n [iconName]=\"'date_range'\"\n (click)=\"datePicker.open()\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n ></i-tech-icon-button>\n\n <mat-datepicker #datePicker (closed)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true;focused = true\"></mat-datepicker>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\n {{ ngControl.control | generateErrorMessages : label : defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && submit)) && hintText\"\n [ngClass]=\"{'readonly-color' : isDisabled}\"\n >\n {{ hintText | translate }}\n </mat-hint>\n\n </mat-form-field>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled", "testId"], outputs: ["buttonClick"] }] }); }
1303
1307
  }
1304
1308
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DatePickerComponent, decorators: [{
1305
1309
  type: Component,
@@ -1314,7 +1318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1314
1318
  MatIconModule,
1315
1319
  DateMaskDirective,
1316
1320
  GenerateErrorMessagesPipe, IconButtonComponent
1317
- ], standalone: true, template: "<div class=\"flex_column relative mat-date-range-input\" *ngIf=\"ngControl\" [ngClass]=\"{'check_requirements': submit}\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submit)\n }\">\n {{ label | translate }}\n </mat-label>\n <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\"\n [class.readonly-field]=\"isDisabled\">\n <input matInput #inputElement\n type=\"text\"\n [formControl]=\"ngControl.control\"\n [placeholder]=\"placeholder | translate\"\n [min]=\"minDate\"\n dateMask\n [matDatepicker]=\"datePicker\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [matDatepickerFilter]=\"dateFilter\"\n (focus)=\"focused = true\"\n (click)=\"datePicker.open();\"\n (dateChange)=\"emitChange()\"\n >\n\n <mat-icon *ngIf=\"iconPrefix\"\n matPrefix\n [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\n [style.color]=\"iconPrefixColor\"\n >{{ iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"iconPrefixSvg\"\n ></mat-icon>\n\n <app-icon-button\n *ngIf=\"clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"$event.stopPropagation();$event.preventDefault();ngControl.control.reset(null);\"\n >\n </app-icon-button>\n\n <i-tech-icon-button matSuffix\n [iconName]=\"'date_range'\"\n (click)=\"datePicker.open()\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n ></i-tech-icon-button>\n\n <mat-datepicker #datePicker (closed)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true;focused = true\"></mat-datepicker>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\n {{ ngControl.control | generateErrorMessages : label : defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && submit)) && hintText\"\n [ngClass]=\"{'readonly-color' : isDisabled}\"\n >\n {{ hintText | translate }}\n </mat-hint>\n\n </mat-form-field>\n</div>\n" }]
1321
+ ], standalone: true, template: "<div class=\"flex_column relative mat-date-range-input\" *ngIf=\"ngControl\" [ngClass]=\"{'check_requirements': submit}\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : isDisabled,\n 'invalid-label-color': !!(ngControl.control.errors && submit)\n }\">\n {{ label | translate }}\n </mat-label>\n <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color' : isDisabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\"\n [class.readonly-field]=\"isDisabled\">\n <input matInput #inputElement\n type=\"text\"\n [formControl]=\"ngControl.control\"\n [placeholder]=\"placeholder | translate\"\n [min]=\"minDate\"\n dateMask\n [attr.data-testId]=\"'date-range-picker-' + testId\"\n [matDatepicker]=\"datePicker\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [matDatepickerFilter]=\"dateFilter\"\n (focus)=\"focused = true\"\n (click)=\"datePicker.open();\"\n (dateChange)=\"emitChange()\"\n >\n\n <mat-icon *ngIf=\"iconPrefix\"\n matPrefix\n [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\n [style.color]=\"iconPrefixColor\"\n >{{ iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"iconPrefixSvg\"\n ></mat-icon>\n\n <app-icon-button\n *ngIf=\"clearable && !isDisabled && !!ngControl.control.value\"\n iconName=\"cancel\"\n matSuffix\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"$event.stopPropagation();$event.preventDefault();ngControl.control.reset(null);\"\n >\n </app-icon-button>\n\n <i-tech-icon-button matSuffix\n [iconName]=\"'date_range'\"\n (click)=\"datePicker.open()\"\n [ngClass]=\"isDisabled ? 'readonly-color' : 'default-form-icon-color'\"\n ></i-tech-icon-button>\n\n <mat-datepicker #datePicker (closed)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true;focused = true\"></mat-datepicker>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\n {{ ngControl.control | generateErrorMessages : label : defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && submit)) && hintText\"\n [ngClass]=\"{'readonly-color' : isDisabled}\"\n >\n {{ hintText | translate }}\n </mat-hint>\n\n </mat-form-field>\n</div>\n" }]
1318
1322
  }], ctorParameters: () => [{ type: InputService }], propDecorators: { label: [{
1319
1323
  type: Input
1320
1324
  }], defaultPatternKey: [{
@@ -1343,6 +1347,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1343
1347
  type: Input
1344
1348
  }], clearable: [{
1345
1349
  type: Input
1350
+ }], testId: [{
1351
+ type: Input
1346
1352
  }], submit: [{
1347
1353
  type: Input
1348
1354
  }], inputElement: [{
@@ -1358,6 +1364,7 @@ class DateRangeDatepickerComponent {
1358
1364
  this.clearValue = true;
1359
1365
  this.errorMessage = '';
1360
1366
  this.hintText = 'MM/DD/YYYY - MM/DD/YYYY';
1367
+ this.testId = '';
1361
1368
  this.resetForm = new EventEmitter();
1362
1369
  this.selectionChange = new EventEmitter();
1363
1370
  this.isOpen = false;
@@ -1433,7 +1440,7 @@ class DateRangeDatepickerComponent {
1433
1440
  }
1434
1441
  }
1435
1442
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1436
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateRangeDatepickerComponent, isStandalone: true, selector: "i-tech-mat-range-datepicker", inputs: { label: "label", placeholder: "placeholder", value: "value", defaultValue: "defaultValue", key: "key", submit: "submit", clearValue: "clearValue", errorMessage: "errorMessage", onePlaceholder: "onePlaceholder", hintText: "hintText" }, outputs: { resetForm: "resetForm", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "min", first: true, predicate: ["min"], descendants: true }, { propertyName: "max", first: true, predicate: ["max"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex_column relative mat-date-range-input\"\n [formGroup]=\"dateRangeForm\"\n>\n <div class=\"w-100\" *ngIf=\"label\">\n <mat-label>\n {{ (label || '') | translate }}\n </mat-label>\n </div>\n <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\n <mat-date-range-input [rangePicker]=\"picker\">\n <input formControlName=\"startDate\"\n [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\n [title]=\"key ? key.title : 'Date'\"\n [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\n [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n matStartDate #min\n dateMask\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\n (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\n (dateChange)=\"setDate([min.value, max.value || null],min)\">\n <input formControlName=\"endDate\"\n [placeholder]=\"(placeholder ? placeholder[1] : 'End Date')\"\n [title]=\"key ? key.title : 'Date'\"\n [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\n [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n matEndDate #max\n dateMask\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\n (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\n (dateChange)=\"setDate([min.value, max.value || null],max)\">\n </mat-date-range-input>\n <i-tech-icon-button matSuffix\n [iconName]=\"'cancel'\"\n (buttonClick)=\"setDate([null,null], max)\"\n class=\"default-form-icon-color\"\n *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\n ></i-tech-icon-button>\n <i-tech-icon-button\n matSuffix\n [iconName]=\"'date_range'\"\n (buttonClick)=\"picker.open()\"\n class=\"default-form-icon-color\"\n ></i-tech-icon-button>\n <mat-date-range-picker\n #picker\n (closed)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true\"\n ></mat-date-range-picker>\n <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n </mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }] }); }
1443
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateRangeDatepickerComponent, isStandalone: true, selector: "i-tech-mat-range-datepicker", inputs: { label: "label", placeholder: "placeholder", value: "value", defaultValue: "defaultValue", key: "key", submit: "submit", clearValue: "clearValue", errorMessage: "errorMessage", onePlaceholder: "onePlaceholder", hintText: "hintText", testId: "testId" }, outputs: { resetForm: "resetForm", selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "min", first: true, predicate: ["min"], descendants: true }, { propertyName: "max", first: true, predicate: ["max"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex_column relative mat-date-range-input\"\n [formGroup]=\"dateRangeForm\"\n>\n <div class=\"w-100\" *ngIf=\"label\">\n <mat-label>\n {{ (label || '') | translate }}\n </mat-label>\n </div>\n <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\n <mat-date-range-input [rangePicker]=\"picker\">\n <input formControlName=\"startDate\"\n [attr.data-testId]=\"'date-range-' + testId + '-min-date'\"\n [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\n [title]=\"key ? key.title : 'Date'\"\n [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\n [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n matStartDate #min\n dateMask\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\n (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\n (dateChange)=\"setDate([min.value, max.value || null],min)\">\n <input formControlName=\"endDate\"\n [placeholder]=\"(placeholder ? placeholder[1] : 'End Date')\"\n [title]=\"key ? key.title : 'Date'\"\n [attr.data-testId]=\"'date-range-' + testId + '-end-date'\"\n [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\n [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n matEndDate #max\n dateMask\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\n (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\n (dateChange)=\"setDate([min.value, max.value || null],max)\">\n </mat-date-range-input>\n <i-tech-icon-button matSuffix\n [iconName]=\"'cancel'\"\n (buttonClick)=\"setDate([null,null], max)\"\n class=\"default-form-icon-color\"\n *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\n ></i-tech-icon-button>\n <i-tech-icon-button\n matSuffix\n [iconName]=\"'date_range'\"\n (buttonClick)=\"picker.open()\"\n class=\"default-form-icon-color\"\n ></i-tech-icon-button>\n <mat-date-range-picker\n #picker\n (closed)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true\"\n ></mat-date-range-picker>\n <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n </mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled", "testId"], outputs: ["buttonClick"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }] }); }
1437
1444
  }
1438
1445
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateRangeDatepickerComponent, decorators: [{
1439
1446
  type: Component,
@@ -1444,7 +1451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1444
1451
  NgClass, NgIf,
1445
1452
  TranslateModule,
1446
1453
  IconButtonComponent, DateMaskDirective
1447
- ], standalone: true, template: "<div class=\"flex_column relative mat-date-range-input\"\n [formGroup]=\"dateRangeForm\"\n>\n <div class=\"w-100\" *ngIf=\"label\">\n <mat-label>\n {{ (label || '') | translate }}\n </mat-label>\n </div>\n <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\n <mat-date-range-input [rangePicker]=\"picker\">\n <input formControlName=\"startDate\"\n [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\n [title]=\"key ? key.title : 'Date'\"\n [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\n [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n matStartDate #min\n dateMask\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\n (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\n (dateChange)=\"setDate([min.value, max.value || null],min)\">\n <input formControlName=\"endDate\"\n [placeholder]=\"(placeholder ? placeholder[1] : 'End Date')\"\n [title]=\"key ? key.title : 'Date'\"\n [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\n [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n matEndDate #max\n dateMask\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\n (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\n (dateChange)=\"setDate([min.value, max.value || null],max)\">\n </mat-date-range-input>\n <i-tech-icon-button matSuffix\n [iconName]=\"'cancel'\"\n (buttonClick)=\"setDate([null,null], max)\"\n class=\"default-form-icon-color\"\n *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\n ></i-tech-icon-button>\n <i-tech-icon-button\n matSuffix\n [iconName]=\"'date_range'\"\n (buttonClick)=\"picker.open()\"\n class=\"default-form-icon-color\"\n ></i-tech-icon-button>\n <mat-date-range-picker\n #picker\n (closed)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true\"\n ></mat-date-range-picker>\n <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n </mat-form-field>\n</div>\n" }]
1454
+ ], standalone: true, template: "<div class=\"flex_column relative mat-date-range-input\"\n [formGroup]=\"dateRangeForm\"\n>\n <div class=\"w-100\" *ngIf=\"label\">\n <mat-label>\n {{ (label || '') | translate }}\n </mat-label>\n </div>\n <mat-form-field appearance=\"outline\" [ngClass]=\"{'opened_calendar': isOpen}\">\n <mat-date-range-input [rangePicker]=\"picker\">\n <input formControlName=\"startDate\"\n [attr.data-testId]=\"'date-range-' + testId + '-min-date'\"\n [placeholder]=\" (placeholder ? placeholder[0] : 'Start Date')\"\n [title]=\"key ? key.title : 'Date'\"\n [attr.data-accessKey]=\"key ? key.start : 'minStartDate'\"\n [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n matStartDate #min\n dateMask\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [rangeFormControl]=\"dateRangeForm.controls['startDate']\"\n (keydown)=\"keyEventHandler($event,[min.value, max.value || null],min)\"\n (dateChange)=\"setDate([min.value, max.value || null],min)\">\n <input formControlName=\"endDate\"\n [placeholder]=\"(placeholder ? placeholder[1] : 'End Date')\"\n [title]=\"key ? key.title : 'Date'\"\n [attr.data-testId]=\"'date-range-' + testId + '-end-date'\"\n [attr.data-accessKey]=\"key ? key.end : 'maxEndDate'\"\n [attr.data-parentKey]=\"key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'\"\n matEndDate #max\n dateMask\n [errorStateMatcher]=\"customErrorStateMatcher\"\n [rangeFormControl]=\"dateRangeForm.controls['endDate']\"\n (keydown)=\"keyEventHandler($event,[min.value, max.value || null],max)\"\n (dateChange)=\"setDate([min.value, max.value || null],max)\">\n </mat-date-range-input>\n <i-tech-icon-button matSuffix\n [iconName]=\"'cancel'\"\n (buttonClick)=\"setDate([null,null], max)\"\n class=\"default-form-icon-color\"\n *ngIf=\"dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value\"\n ></i-tech-icon-button>\n <i-tech-icon-button\n matSuffix\n [iconName]=\"'date_range'\"\n (buttonClick)=\"picker.open()\"\n class=\"default-form-icon-color\"\n ></i-tech-icon-button>\n <mat-date-range-picker\n #picker\n (closed)=\"isOpen = false;clickForFocusOut()\"\n (opened)=\"isOpen = true\"\n ></mat-date-range-picker>\n <mat-hint *ngIf=\"hintText && !errorMessage\">{{ hintText }}</mat-hint>\n </mat-form-field>\n</div>\n" }]
1448
1455
  }], propDecorators: { label: [{
1449
1456
  type: Input
1450
1457
  }], placeholder: [{
@@ -1465,6 +1472,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1465
1472
  type: Input
1466
1473
  }], hintText: [{
1467
1474
  type: Input
1475
+ }], testId: [{
1476
+ type: Input
1468
1477
  }], resetForm: [{
1469
1478
  type: Output
1470
1479
  }], selectionChange: [{
@@ -1503,7 +1512,7 @@ class MenuComponent {
1503
1512
  this.matMenuState = false;
1504
1513
  }
1505
1514
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1506
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuComponent, isStandalone: true, selector: "i-tech-menu", inputs: { text: "text", dataName: "dataName", containerClass: "containerClass", icon: "icon", positionX: "positionX", menuOptions: "menuOptions", loading: "loading" }, outputs: { emitEvent: "emitEvent" }, ngImport: i0, template: "<div class=\"custom_dropdown_container\"\n [attr.data-name]=\"dataName\"\n [ngClass]=\"containerClass\"\n>\n <ng-container *ngIf=\"!loading\">\n <i-tech-button\n [matMenuTriggerFor]=\"beforeMenu\"\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n (menuOpened)=\"matMenuState = true\"\n (menuClosed)=\"matMenuState = false\"\n [activated]=\"matMenuState\"\n ></i-tech-button>\n </ng-container>\n\n <ng-container *ngIf=\"loading\">\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n [submit]=\"true\"\n [disabled]=\"true\"\n [activated]=\"false\"\n ></i-tech-button>\n </ng-container>\n\n <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\">\n <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n </button>\n </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"], dependencies: [{ kind: "directive", type: 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: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "data_cy", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }] }); }
1515
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuComponent, isStandalone: true, selector: "i-tech-menu", inputs: { text: "text", dataName: "dataName", containerClass: "containerClass", icon: "icon", positionX: "positionX", testId: "testId", menuOptions: "menuOptions", loading: "loading" }, outputs: { emitEvent: "emitEvent" }, ngImport: i0, template: "<div class=\"custom_dropdown_container\"\n [attr.data-name]=\"dataName\"\n [ngClass]=\"containerClass\"\n>\n <ng-container *ngIf=\"!loading\">\n <i-tech-button\n [matMenuTriggerFor]=\"beforeMenu\"\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n (menuOpened)=\"matMenuState = true\"\n (menuClosed)=\"matMenuState = false\"\n [activated]=\"matMenuState\"\n [attr.data-testId]=\"testId + '_arrow_down'\"\n ></i-tech-button>\n </ng-container>\n\n <ng-container *ngIf=\"loading\">\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n [submit]=\"true\"\n [disabled]=\"true\"\n [activated]=\"false\"\n [attr.data-testId]=\"testId + '_arrow_down'\"\n ></i-tech-button>\n </ng-container>\n\n <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\"\n [attr.data-testId]=\"testId\"\n >\n <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n </button>\n </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"], dependencies: [{ kind: "directive", type: 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: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "i-tech-button", inputs: ["text", "testId", "fontIcon", "svgIcon", "type", "customClass", "submit", "disabled", "activated", "color"], outputs: ["buttonClick"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }] }); }
1507
1516
  }
1508
1517
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuComponent, decorators: [{
1509
1518
  type: Component,
@@ -1518,7 +1527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1518
1527
  NgClass,
1519
1528
  ButtonComponent,
1520
1529
  MatLabel
1521
- ], template: "<div class=\"custom_dropdown_container\"\n [attr.data-name]=\"dataName\"\n [ngClass]=\"containerClass\"\n>\n <ng-container *ngIf=\"!loading\">\n <i-tech-button\n [matMenuTriggerFor]=\"beforeMenu\"\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n (menuOpened)=\"matMenuState = true\"\n (menuClosed)=\"matMenuState = false\"\n [activated]=\"matMenuState\"\n ></i-tech-button>\n </ng-container>\n\n <ng-container *ngIf=\"loading\">\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n [submit]=\"true\"\n [disabled]=\"true\"\n [activated]=\"false\"\n ></i-tech-button>\n </ng-container>\n\n <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\">\n <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n </button>\n </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"] }]
1530
+ ], template: "<div class=\"custom_dropdown_container\"\n [attr.data-name]=\"dataName\"\n [ngClass]=\"containerClass\"\n>\n <ng-container *ngIf=\"!loading\">\n <i-tech-button\n [matMenuTriggerFor]=\"beforeMenu\"\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n (menuOpened)=\"matMenuState = true\"\n (menuClosed)=\"matMenuState = false\"\n [activated]=\"matMenuState\"\n [attr.data-testId]=\"testId + '_arrow_down'\"\n ></i-tech-button>\n </ng-container>\n\n <ng-container *ngIf=\"loading\">\n <i-tech-button\n [type]=\"ButtonType.OUTLINE\"\n [fontIcon]=\"icon || 'keyboard_arrow_down'\"\n [text]=\"(text || '') \"\n [submit]=\"true\"\n [disabled]=\"true\"\n [activated]=\"false\"\n [attr.data-testId]=\"testId + '_arrow_down'\"\n ></i-tech-button>\n </ng-container>\n\n <mat-menu #beforeMenu=\"matMenu\" [xPosition]=\"positionX\"\n [attr.data-testId]=\"testId\"\n >\n <button mat-menu-item *ngFor=\"let option of menuOptions\" (click)=\"emitEvent.emit(option.value)\">\n <mat-icon *ngIf=\"option.type\" [svgIcon]=\"DropdownItemIcon[option.type]\"></mat-icon>\n <mat-label class=\"meu_item_label\">{{(option.text || '') | translate}}</mat-label>\n </button>\n </mat-menu>\n</div>\n", styles: [".custom_dropdown_container i-tech-button{display:inline-block}.custom_dropdown_container .loader-container{display:flex;justify-content:center;align-items:center}mat-menu{height:max-content}\n"] }]
1522
1531
  }], propDecorators: { text: [{
1523
1532
  type: Input
1524
1533
  }], dataName: [{
@@ -1529,6 +1538,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
1529
1538
  type: Input
1530
1539
  }], positionX: [{
1531
1540
  type: Input
1541
+ }], testId: [{
1542
+ type: Input
1532
1543
  }], menuOptions: [{
1533
1544
  type: Input
1534
1545
  }], emitEvent: [{
@@ -1723,13 +1734,13 @@ class DateTimePickerComponent {
1723
1734
  }, 50);
1724
1735
  }
1725
1736
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: InputService }, { token: ParseDateService }], target: i0.ɵɵFactoryTarget.Component }); }
1726
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateTimePickerComponent, isStandalone: true, selector: "i-tech-date-time-picker", inputs: { label: "label", submit: "submit", required: "required", disabled: "disabled" }, outputs: { dateChangeEvent: "dateChangeEvent" }, providers: [ParseDateService], viewQueries: [{ propertyName: "DatePickerElement", first: true, predicate: ["DatePicker"], descendants: true }, { propertyName: "timeInput", first: true, predicate: ["dateElement"], descendants: true }], ngImport: i0, template: "<div class=\"date_time_picker_container relative\"\n *ngIf=\"ngControl?.control\"\n [class.invalid_form]=\"ngControl.control.errors && submit\"\n [class.readonly_field]=\"disabled\"\n>\n <mat-label [ngClass]=\"{\n 'readonly-color': disabled\n }\"\n >{{label | translate}}</mat-label>\n <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color': disabled}\"> *</span>\n\n <div class=\"date_time_picker\"\n [formGroup]=\"form\"\n [ngClass]=\"{'focused': isFocused, 'disabled': disabled}\"\n >\n <input type=\"text\" dateMask class=\"date\"\n placeholder=\"mm/dd/yy\"\n formControlName=\"date\"\n [matDatepicker]=\"DatePicker\"\n [disabled]=\"disabled\"\n (click)=\"!disabled && DatePicker.open()\"\n (focus)=\"onFocus($event)\"\n (focusout)=\"onBlur($event)\"\n >\n <mat-datepicker #DatePicker\n (closed)=\"onDatePickerClosed()\">\n </mat-datepicker>\n <input type=\"time\"\n #dateElement\n class=\"time\"\n formControlName=\"time\"\n [disabled]=\"disabled\"\n (focus)=\"onFocus($event)\"\n (focusout)=\"onBlur($event)\"\n (change)=\"setDateTimeValue()\"\n />\n </div>\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\n {{ngControl.control | generateErrorMessages : (label || '')}}\n </mat-error>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: MatLabel, selector: "mat-label" }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
1737
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DateTimePickerComponent, isStandalone: true, selector: "i-tech-date-time-picker", inputs: { label: "label", submit: "submit", required: "required", disabled: "disabled" }, outputs: { dateChangeEvent: "dateChangeEvent" }, providers: [ParseDateService], viewQueries: [{ propertyName: "DatePickerElement", first: true, predicate: ["DatePicker"], descendants: true }, { propertyName: "timeInput", first: true, predicate: ["dateElement"], descendants: true }], ngImport: i0, template: "<div class=\"date_time_picker_container relative\"\n *ngIf=\"ngControl?.control\"\n [class.invalid_form]=\"ngControl.control.errors && submit\"\n [class.readonly_field]=\"disabled\"\n>\n <mat-label [ngClass]=\"{\n 'readonly-color': disabled\n }\"\n >{{label | translate}}</mat-label>\n <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color': disabled}\"> *</span>\n\n <div class=\"date_time_picker\"\n [formGroup]=\"form\"\n [ngClass]=\"{'focused': isFocused, 'disabled': disabled}\"\n >\n <input type=\"text\" dateMask class=\"date\"\n placeholder=\"mm/dd/yy\"\n formControlName=\"date\"\n [matDatepicker]=\"DatePicker\"\n [attr.data-testId]=\"'date-picker-date'\"\n [disabled]=\"disabled\"\n (click)=\"!disabled && DatePicker.open()\"\n (focus)=\"onFocus($event)\"\n (focusout)=\"onBlur($event)\"\n >\n <mat-datepicker #DatePicker\n (closed)=\"onDatePickerClosed()\">\n </mat-datepicker>\n <input type=\"time\"\n #dateElement\n class=\"time\"\n [attr.data-testId]=\"'date-picker-time'\"\n formControlName=\"time\"\n [disabled]=\"disabled\"\n (focus)=\"onFocus($event)\"\n (focusout)=\"onBlur($event)\"\n (change)=\"setDateTimeValue()\"\n />\n </div>\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\n {{ngControl.control | generateErrorMessages : (label || '')}}\n </mat-error>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: DateMaskDirective, selector: "[dateMask]", inputs: ["maskType", "matDatepicker", "rangeFormControl"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: MatLabel, selector: "mat-label" }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
1727
1738
  }
1728
1739
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DateTimePickerComponent, decorators: [{
1729
1740
  type: Component,
1730
- args: [{ selector: 'i-tech-date-time-picker', imports: [MatDatepickerModule, NgxMaskDirective, DateMaskDirective, TranslateModule,
1731
- FormsModule, NgClass, ReactiveFormsModule, MatLabel, GenerateErrorMessagesPipe, NgIf, MatError
1732
- ], standalone: true, providers: [ParseDateService], template: "<div class=\"date_time_picker_container relative\"\n *ngIf=\"ngControl?.control\"\n [class.invalid_form]=\"ngControl.control.errors && submit\"\n [class.readonly_field]=\"disabled\"\n>\n <mat-label [ngClass]=\"{\n 'readonly-color': disabled\n }\"\n >{{label | translate}}</mat-label>\n <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color': disabled}\"> *</span>\n\n <div class=\"date_time_picker\"\n [formGroup]=\"form\"\n [ngClass]=\"{'focused': isFocused, 'disabled': disabled}\"\n >\n <input type=\"text\" dateMask class=\"date\"\n placeholder=\"mm/dd/yy\"\n formControlName=\"date\"\n [matDatepicker]=\"DatePicker\"\n [disabled]=\"disabled\"\n (click)=\"!disabled && DatePicker.open()\"\n (focus)=\"onFocus($event)\"\n (focusout)=\"onBlur($event)\"\n >\n <mat-datepicker #DatePicker\n (closed)=\"onDatePickerClosed()\">\n </mat-datepicker>\n <input type=\"time\"\n #dateElement\n class=\"time\"\n formControlName=\"time\"\n [disabled]=\"disabled\"\n (focus)=\"onFocus($event)\"\n (focusout)=\"onBlur($event)\"\n (change)=\"setDateTimeValue()\"\n />\n </div>\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\n {{ngControl.control | generateErrorMessages : (label || '')}}\n </mat-error>\n</div>\n" }]
1741
+ args: [{ selector: 'i-tech-date-time-picker', imports: [MatDatepickerModule, DateMaskDirective, TranslateModule,
1742
+ FormsModule, NgClass, ReactiveFormsModule, MatLabel, GenerateErrorMessagesPipe, NgIf, MatError, MatIconButton
1743
+ ], standalone: true, providers: [ParseDateService], template: "<div class=\"date_time_picker_container relative\"\n *ngIf=\"ngControl?.control\"\n [class.invalid_form]=\"ngControl.control.errors && submit\"\n [class.readonly_field]=\"disabled\"\n>\n <mat-label [ngClass]=\"{\n 'readonly-color': disabled\n }\"\n >{{label | translate}}</mat-label>\n <span *ngIf=\"required\" class=\"required-input\" [ngClass]=\"{'readonly-color': disabled}\"> *</span>\n\n <div class=\"date_time_picker\"\n [formGroup]=\"form\"\n [ngClass]=\"{'focused': isFocused, 'disabled': disabled}\"\n >\n <input type=\"text\" dateMask class=\"date\"\n placeholder=\"mm/dd/yy\"\n formControlName=\"date\"\n [matDatepicker]=\"DatePicker\"\n [attr.data-testId]=\"'date-picker-date'\"\n [disabled]=\"disabled\"\n (click)=\"!disabled && DatePicker.open()\"\n (focus)=\"onFocus($event)\"\n (focusout)=\"onBlur($event)\"\n >\n <mat-datepicker #DatePicker\n (closed)=\"onDatePickerClosed()\">\n </mat-datepicker>\n <input type=\"time\"\n #dateElement\n class=\"time\"\n [attr.data-testId]=\"'date-picker-time'\"\n formControlName=\"time\"\n [disabled]=\"disabled\"\n (focus)=\"onFocus($event)\"\n (focusout)=\"onBlur($event)\"\n (change)=\"setDateTimeValue()\"\n />\n </div>\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && submit)\">\n {{ngControl.control | generateErrorMessages : (label || '')}}\n </mat-error>\n</div>\n" }]
1733
1744
  }], ctorParameters: () => [{ type: InputService }, { type: ParseDateService }], propDecorators: { DatePickerElement: [{
1734
1745
  type: ViewChild,
1735
1746
  args: ['DatePicker']
@@ -1792,6 +1803,7 @@ class NewSidebarComponent {
1792
1803
  this.BottomPopupLinks = {};
1793
1804
  this.CompaniesEnum = CompaniesEnum;
1794
1805
  this.accessToNewOrganization = false;
1806
+ this.mobileViewSidebarOpened = false;
1795
1807
  }
1796
1808
  ngAfterViewInit() {
1797
1809
  this.detectActivePage();
@@ -1914,10 +1926,12 @@ class NewSidebarComponent {
1914
1926
  if (link.emitClick) {
1915
1927
  this.linkClickEvent.emit(link);
1916
1928
  }
1929
+ this.mobileViewSidebarOpened = false;
1917
1930
  }
1918
1931
  changeCollapse() {
1919
1932
  this.isCollapsed = !this.isCollapsed;
1920
1933
  this.collapseEvent.emit(this.isCollapsed);
1934
+ this.mobileViewSidebarOpened = false;
1921
1935
  }
1922
1936
  signOut() {
1923
1937
  this.signOutEvent.emit();
@@ -1933,14 +1947,19 @@ class NewSidebarComponent {
1933
1947
  window.open(zendeskUrl);
1934
1948
  });
1935
1949
  }
1950
+ // Mobile Functions
1951
+ openSidebarMobile() {
1952
+ this.isCollapsed = false;
1953
+ this.mobileViewSidebarOpened = !this.mobileViewSidebarOpened;
1954
+ }
1936
1955
  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 }); }
1937
- 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=\"main_sidebar\"\n *ngIf=\"navigationLinks && userData\"\n [class.collapsed]=\"isCollapsed\"\n>\n <div class=\"main_sidebar--header\">\n <a [href]=\"platform === CompaniesEnum.ORGANIZATION ? '/auth/organization' : '/'\">\n\n <img class=\"logo pointer\" alt=\"\"\n *ngIf=\"isCollapsed\"\n [src]=\"'/assets/logos/small/' + platform + '.svg'\"\n >\n\n <img class=\"logo pointer\" alt=\"\"\n *ngIf=\"!isCollapsed\"\n [src]=\"'/assets/logos/full/' + platform + '.svg'\"\n >\n </a>\n <i-tech-icon-button\n *ngIf=\"!isCollapsed\"\n [tooltip]=\"'SLP Tools'\"\n [iconName]=\"'apps'\"\n [matMenuTriggerFor]=\"matMenu\"\n ></i-tech-icon-button>\n\n <mat-menu #matMenu=\"matMenu\" class=\"sidebar_platforms_menu\">\n <ng-container *ngIf=\"activeAndInactivePlatforms['active'].length\">\n <div class=\"menu_title\">\n Active Apps\n </div>\n <ng-container *ngFor=\"let app of activeAndInactivePlatforms['active']\">\n <a [href]=\"AppsUrls[app.id]\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\">\n <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n <span>{{app.name}}</span>\n <img alt=\"\" class=\"ml-auto\" src=\"/assets/selected_organization.svg\"\n *ngIf=\"app.checked\"\n >\n </div>\n </a>\n </ng-container>\n </ng-container>\n\n <div class=\"divider\"\n *ngIf=\"activeAndInactivePlatforms['active'].length && activeAndInactivePlatforms['inactive'].length\"\n ></div>\n\n <ng-container *ngIf=\"activeAndInactivePlatforms['inactive'].length\">\n <div class=\"menu_title\">\n Inactive Apps\n </div>\n <div class=\"standard_menu_item\" *ngFor=\"let app of activeAndInactivePlatforms['inactive']\">\n <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n <span>{{app.name}}</span>\n </div>\n </ng-container>\n\n </mat-menu>\n </div>\n\n <div class=\"main_sidebar--content\">\n <ng-container *ngIf=\"secondLayerLinks.length\">\n <div class=\"main_sidebar--content--toolbar\"\n (click)=\"navigateBack()\"\n >\n <img alt=\"\" src=\"/assets/back.svg\">\n <span>Back</span>\n </div>\n <div class=\"main_sidebar--content--sub_title\">\n Settings\n </div>\n </ng-container>\n\n <ng-container *ngFor=\"let link of (secondLayerLinks.length ? secondLayerLinks : navigationLinks)\">\n <div class=\"divider\" *ngIf=\"link.hasDivider\"></div>\n <a [routerLink]=\"link.emitClick ? null : link.linkTo\">\n <div class=\"main_sidebar--content--link pointer\"\n matRipple\n [class.active]=\"link.pageEnum === activePage || link.pageEnum === secondLayerActivePage\"\n (click)=\"handleLinkClick(link)\"\n [attr.data-testid]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n >\n <div class=\"parent_icon\">\n <img class=\"icon\" alt=\"\"\n [src]=\"'/assets/links/' + platform + '/' + link.image + '.svg'\">\n </div>\n <div class=\"name\">{{link.title | translate}}</div>\n\n <div class=\"new 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 <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 <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION && accessToNewOrganization\"\n class=\"standard_menu_item\"\n >\n Add new organization\n </div>\n </a>\n\n\n <ng-container *ngIf=\"allOrganizations.length > 1\">\n <div class=\"divider\" ></div>\n\n <div class=\"switch\">\n <div class=\"switch_title\">\n Switch Organization\n </div>\n <div mat-menu-item class=\"mat_menu_organization\" (click)=\"switchOrganization(organization)\"\n *ngFor=\"let organization of allOrganizations\"\n >\n <div class=\"organization_item_in_menu\">\n <img alt=\"\" class=\"image\" [src]=\"organization.image\"\n *ngIf=\"organization.image; else NoImage\"\n >\n <ng-template #NoImage>\n <div class=\"image no_image\">\n {{organization.name | slice: 0 : 1 | uppercase}}\n </div>\n </ng-template>\n <span>{{organization.name}}</span>\n </div>\n <img alt=\"\" *ngIf=\"organization.id === currentCompany?.id\"\n class=\"isSelected\" src=\"/assets/selected_organization.svg\" >\n </div>\n </div>\n </ng-container>\n <div class=\"divider\"></div>\n\n <div mat-menu-item class=\"standard_menu_item\" (click)=\"openZendeskPage()\">\n Help Center\n </div>\n\n <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\" >\n Terms And Conditions\n </div>\n </a>\n\n <a [href]=\"BottomPopupLinks['privacy']\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\" >\n Privacy Policy\n </div>\n </a>\n\n\n <div class=\"divider\"></div>\n\n <div mat-menu-item class=\"standard_menu_item\" (click)=\"signOut()\">\n Sign out\n </div>\n </mat-menu>\n </div>\n </div>\n\n</div>\n", styles: [".main_sidebar{box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;height:100vh;width:190px;position:relative;background-color:#fff;z-index:100}.main_sidebar a{text-decoration:none!important}.main_sidebar.collapsed{width:80px}.main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.main_sidebar.collapsed .main_sidebar--content--link .link_badge{right:0!important;top:14px!important}.main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.main_sidebar.collapsed .main_sidebar--content--link.active,.main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.main_sidebar.collapsed::ng-deep .information .names{display:none}.main_sidebar .pointer{cursor:pointer}.main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.main_sidebar--header a{height:40px}.main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.main_sidebar--content--link .parent_icon{width:24px;height:24px}.main_sidebar--content--link .link_badge{position:absolute;right:24px;top:18px;color:#1f4085}.main_sidebar--content--link .new{border-radius:8px;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc}.main_sidebar--content--link.active,.main_sidebar--content--link:hover{background-color:#effaf1}.main_sidebar--footer{bottom:0;position:absolute;width:100%}.main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.divider{border-bottom:1px solid #CAC4D0;margin:8px 0;width:100%}::ng-deep .sidebar_bottom_menu{width:252px}::ng-deep .sidebar_bottom_menu a{text-decoration:none!important;color:#424954!important}::ng-deep .sidebar_bottom_menu .mt-4{margin-top:4px}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_bottom_menu .switch .switch_title{padding:12px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;color:#424954}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item.standard_menu_item{padding:10px 12px!important}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item{color:#424954;font-size:13px;font-weight:500;line-height:20px;letter-spacing:.2px}::ng-deep .sidebar_bottom_menu .top_bar{display:flex;padding:8px 12px 0}::ng-deep .sidebar_bottom_menu .top_bar .information{width:170px}::ng-deep .sidebar_bottom_menu .top_bar .information .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .information .email{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .image{min-width:40px;width:40px;height:40px;object-fit:cover;border-radius:50%;margin-right:8px}::ng-deep .sidebar_bottom_menu .top_bar .no_image{background-color:#008b33;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;line-height:24px}::ng-deep .sidebar_bottom_menu .mat_menu_organization{padding:8px 12px!important}::ng-deep .sidebar_bottom_menu .mat_menu_organization .mat-mdc-menu-item-text{display:flex;justify-content:space-between;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu{display:flex;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .image{width:24px;height:24px;border-radius:50%;margin-right:12px}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .no_image{color:#006b1e;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px;background-color:#c0e5c7}::ng-deep .sidebar_platforms_menu{width:280px}::ng-deep .sidebar_platforms_menu a{text-decoration:none!important}::ng-deep .sidebar_platforms_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_platforms_menu .menu_title{color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;padding:12px}::ng-deep .sidebar_platforms_menu .standard_menu_item{padding:8px 12px!important;display:flex;align-items:center}::ng-deep .sidebar_platforms_menu .standard_menu_item .logo{margin-right:14px}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text{display:flex;align-items:center;font-weight:500;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text .logo{margin-right:14px}::ng-deep .main_sidebar .mat-ripple:not(:empty){transform:unset!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: CompanyImageComponent, selector: "i-tech-company-image", inputs: ["collapsed", "userData", "currentCompany", "platform"] }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i5$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }] }); }
1956
+ 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 [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 <div mat-menu-item class=\"standard_menu_item\">\n <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n <span>{{app.name}}</span>\n <img alt=\"\" class=\"ml-auto\" src=\"/assets/selected_organization.svg\"\n *ngIf=\"app.checked\"\n >\n </div>\n </a>\n </ng-container>\n </ng-container>\n\n <div class=\"divider\"\n *ngIf=\"activeAndInactivePlatforms['active'].length && activeAndInactivePlatforms['inactive'].length\"\n ></div>\n\n <ng-container *ngIf=\"activeAndInactivePlatforms['inactive'].length\">\n <div class=\"menu_title\">\n Inactive Apps\n </div>\n <div class=\"standard_menu_item\" *ngFor=\"let app of activeAndInactivePlatforms['inactive']\">\n <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n <span>{{app.name}}</span>\n </div>\n </ng-container>\n\n </mat-menu>\n </div>\n\n <div class=\"main_sidebar--content\">\n <ng-container *ngIf=\"secondLayerLinks.length\">\n <div class=\"main_sidebar--content--toolbar\"\n (click)=\"navigateBack()\"\n >\n <img alt=\"\" src=\"/assets/back.svg\">\n <span>Back</span>\n </div>\n <div class=\"main_sidebar--content--sub_title\">\n Settings\n </div>\n </ng-container>\n\n <ng-container *ngFor=\"let link of (secondLayerLinks.length ? secondLayerLinks : navigationLinks)\">\n <div class=\"divider\" *ngIf=\"link.hasDivider\"></div>\n <a [routerLink]=\"link.emitClick ? null : link.linkTo\">\n <div class=\"main_sidebar--content--link pointer\"\n matRipple\n [class.active]=\"link.pageEnum === activePage || link.pageEnum === secondLayerActivePage\"\n (click)=\"handleLinkClick(link)\"\n [attr.data-testid]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n >\n <div class=\"parent_icon\">\n <img class=\"icon\" alt=\"\"\n [src]=\"'/assets/links/' + platform + '/' + link.image + '.svg'\">\n </div>\n <div class=\"name\">{{link.title | translate}}</div>\n\n <div class=\"new 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 <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 <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION && accessToNewOrganization\"\n class=\"standard_menu_item\"\n >\n Add new organization\n </div>\n </a>\n\n\n <ng-container *ngIf=\"allOrganizations.length > 1\">\n <div class=\"divider\" ></div>\n\n <div class=\"switch\">\n <div class=\"switch_title\">\n Switch Organization\n </div>\n <div mat-menu-item class=\"mat_menu_organization\" (click)=\"switchOrganization(organization)\"\n *ngFor=\"let organization of allOrganizations\"\n >\n <div class=\"organization_item_in_menu\">\n <img alt=\"\" class=\"image\" [src]=\"organization.image\"\n *ngIf=\"organization.image; else NoImage\"\n >\n <ng-template #NoImage>\n <div class=\"image no_image\">\n {{organization.name | slice: 0 : 1 | uppercase}}\n </div>\n </ng-template>\n <span>{{organization.name}}</span>\n </div>\n <img alt=\"\" *ngIf=\"organization.id === currentCompany?.id\"\n class=\"isSelected\" src=\"/assets/selected_organization.svg\" >\n </div>\n </div>\n </ng-container>\n <div class=\"divider\"></div>\n\n <div mat-menu-item class=\"standard_menu_item\" (click)=\"openZendeskPage()\">\n Help Center\n </div>\n\n <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\" >\n Terms And Conditions\n </div>\n </a>\n\n <a [href]=\"BottomPopupLinks['privacy']\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\" >\n Privacy Policy\n </div>\n </a>\n\n\n <div class=\"divider\"></div>\n\n <div mat-menu-item class=\"standard_menu_item\" (click)=\"signOut()\">\n Sign out\n </div>\n </mat-menu>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", styles: [".sidebar .main_sidebar{box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;height:100vh;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{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.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)}.sidebar .main_sidebar_wrapper>*{transform:translate(-100%);transition:transform .3s ease}}.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" }] }); }
1938
1957
  }
1939
1958
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NewSidebarComponent, decorators: [{
1940
1959
  type: Component,
1941
1960
  args: [{ selector: 'i-tech-sidebar', imports: [NgIf, NgFor, TranslateModule, MatMenu, MatMenuModule, CompanyImageComponent, UpperCasePipe, SlicePipe,
1942
1961
  MatRippleModule, MatTooltipModule, IconButtonComponent, RouterLink, LowerCasePipe
1943
- ], standalone: true, template: "<div class=\"main_sidebar\"\n *ngIf=\"navigationLinks && userData\"\n [class.collapsed]=\"isCollapsed\"\n>\n <div class=\"main_sidebar--header\">\n <a [href]=\"platform === CompaniesEnum.ORGANIZATION ? '/auth/organization' : '/'\">\n\n <img class=\"logo pointer\" alt=\"\"\n *ngIf=\"isCollapsed\"\n [src]=\"'/assets/logos/small/' + platform + '.svg'\"\n >\n\n <img class=\"logo pointer\" alt=\"\"\n *ngIf=\"!isCollapsed\"\n [src]=\"'/assets/logos/full/' + platform + '.svg'\"\n >\n </a>\n <i-tech-icon-button\n *ngIf=\"!isCollapsed\"\n [tooltip]=\"'SLP Tools'\"\n [iconName]=\"'apps'\"\n [matMenuTriggerFor]=\"matMenu\"\n ></i-tech-icon-button>\n\n <mat-menu #matMenu=\"matMenu\" class=\"sidebar_platforms_menu\">\n <ng-container *ngIf=\"activeAndInactivePlatforms['active'].length\">\n <div class=\"menu_title\">\n Active Apps\n </div>\n <ng-container *ngFor=\"let app of activeAndInactivePlatforms['active']\">\n <a [href]=\"AppsUrls[app.id]\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\">\n <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n <span>{{app.name}}</span>\n <img alt=\"\" class=\"ml-auto\" src=\"/assets/selected_organization.svg\"\n *ngIf=\"app.checked\"\n >\n </div>\n </a>\n </ng-container>\n </ng-container>\n\n <div class=\"divider\"\n *ngIf=\"activeAndInactivePlatforms['active'].length && activeAndInactivePlatforms['inactive'].length\"\n ></div>\n\n <ng-container *ngIf=\"activeAndInactivePlatforms['inactive'].length\">\n <div class=\"menu_title\">\n Inactive Apps\n </div>\n <div class=\"standard_menu_item\" *ngFor=\"let app of activeAndInactivePlatforms['inactive']\">\n <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n <span>{{app.name}}</span>\n </div>\n </ng-container>\n\n </mat-menu>\n </div>\n\n <div class=\"main_sidebar--content\">\n <ng-container *ngIf=\"secondLayerLinks.length\">\n <div class=\"main_sidebar--content--toolbar\"\n (click)=\"navigateBack()\"\n >\n <img alt=\"\" src=\"/assets/back.svg\">\n <span>Back</span>\n </div>\n <div class=\"main_sidebar--content--sub_title\">\n Settings\n </div>\n </ng-container>\n\n <ng-container *ngFor=\"let link of (secondLayerLinks.length ? secondLayerLinks : navigationLinks)\">\n <div class=\"divider\" *ngIf=\"link.hasDivider\"></div>\n <a [routerLink]=\"link.emitClick ? null : link.linkTo\">\n <div class=\"main_sidebar--content--link pointer\"\n matRipple\n [class.active]=\"link.pageEnum === activePage || link.pageEnum === secondLayerActivePage\"\n (click)=\"handleLinkClick(link)\"\n [attr.data-testid]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n >\n <div class=\"parent_icon\">\n <img class=\"icon\" alt=\"\"\n [src]=\"'/assets/links/' + platform + '/' + link.image + '.svg'\">\n </div>\n <div class=\"name\">{{link.title | translate}}</div>\n\n <div class=\"new 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 <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 <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION && accessToNewOrganization\"\n class=\"standard_menu_item\"\n >\n Add new organization\n </div>\n </a>\n\n\n <ng-container *ngIf=\"allOrganizations.length > 1\">\n <div class=\"divider\" ></div>\n\n <div class=\"switch\">\n <div class=\"switch_title\">\n Switch Organization\n </div>\n <div mat-menu-item class=\"mat_menu_organization\" (click)=\"switchOrganization(organization)\"\n *ngFor=\"let organization of allOrganizations\"\n >\n <div class=\"organization_item_in_menu\">\n <img alt=\"\" class=\"image\" [src]=\"organization.image\"\n *ngIf=\"organization.image; else NoImage\"\n >\n <ng-template #NoImage>\n <div class=\"image no_image\">\n {{organization.name | slice: 0 : 1 | uppercase}}\n </div>\n </ng-template>\n <span>{{organization.name}}</span>\n </div>\n <img alt=\"\" *ngIf=\"organization.id === currentCompany?.id\"\n class=\"isSelected\" src=\"/assets/selected_organization.svg\" >\n </div>\n </div>\n </ng-container>\n <div class=\"divider\"></div>\n\n <div mat-menu-item class=\"standard_menu_item\" (click)=\"openZendeskPage()\">\n Help Center\n </div>\n\n <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\" >\n Terms And Conditions\n </div>\n </a>\n\n <a [href]=\"BottomPopupLinks['privacy']\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\" >\n Privacy Policy\n </div>\n </a>\n\n\n <div class=\"divider\"></div>\n\n <div mat-menu-item class=\"standard_menu_item\" (click)=\"signOut()\">\n Sign out\n </div>\n </mat-menu>\n </div>\n </div>\n\n</div>\n", styles: [".main_sidebar{box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;height:100vh;width:190px;position:relative;background-color:#fff;z-index:100}.main_sidebar a{text-decoration:none!important}.main_sidebar.collapsed{width:80px}.main_sidebar.collapsed .main_sidebar--content--sub_title{font-size:13px;line-height:20px;padding:4px 16px 0}.main_sidebar.collapsed .main_sidebar--content--toolbar{padding:unset;justify-content:center;margin-top:16px}.main_sidebar.collapsed .main_sidebar--content--toolbar span{display:none}.main_sidebar.collapsed .main_sidebar--header{padding:6px 21.5px}.main_sidebar.collapsed .main_sidebar--content--link{padding:0 0 4px;flex-direction:column;margin-top:12px}.main_sidebar.collapsed .main_sidebar--content--link .divider{display:none}.main_sidebar.collapsed .main_sidebar--content--link .link_badge{right:0!important;top:14px!important}.main_sidebar.collapsed .main_sidebar--content--link .parent_icon{width:56px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:100px}.main_sidebar.collapsed .main_sidebar--content--link .name{font-size:11px;margin-left:unset;font-weight:500;text-align:center;line-height:16px}.main_sidebar.collapsed .main_sidebar--content--link.active,.main_sidebar.collapsed .main_sidebar--content--link:hover{background-color:unset}.main_sidebar.collapsed .main_sidebar--content--link.active .parent_icon,.main_sidebar.collapsed .main_sidebar--content--link:hover .parent_icon{background-color:#00ac4829}.main_sidebar.collapsed .main_sidebar--content--link.active .name{font-weight:600}.main_sidebar.collapsed::ng-deep .information .names{display:none}.main_sidebar .pointer{cursor:pointer}.main_sidebar--header{display:flex;justify-content:space-between;align-items:center;padding:21px 24px 16px 16px}.main_sidebar--header a{height:40px}.main_sidebar--content{height:calc(100% - 220px);overflow-y:auto;overflow-x:hidden}.main_sidebar--content .divider{border-bottom:1px solid #D7D9DE;margin:8px auto;width:calc(100% - 32px)}.main_sidebar--content--sub_title{margin-top:4px;padding:4px 16px;font-weight:700;font-size:16px;line-height:24px;letter-spacing:.1px}.main_sidebar--content--toolbar{cursor:pointer;padding-left:16px;display:flex;align-items:center}.main_sidebar--content--toolbar span{font-weight:700;font-size:13px;line-height:20px;letter-spacing:.1px;color:#647081;margin-left:4px}.main_sidebar--content--link{display:flex;align-items:center;padding:16px 10px 16px 16px;position:relative}.main_sidebar--content--link .name{font-weight:500;font-size:13px;line-height:20px;letter-spacing:.1px;margin-left:12px;color:#424954}.main_sidebar--content--link .parent_icon{width:24px;height:24px}.main_sidebar--content--link .link_badge{position:absolute;right:24px;top:18px;color:#1f4085}.main_sidebar--content--link .new{border-radius:8px;padding:4px;font-weight:700;font-size:11px;line-height:12px;background-color:#dde7fc}.main_sidebar--content--link.active,.main_sidebar--content--link:hover{background-color:#effaf1}.main_sidebar--footer{bottom:0;position:absolute;width:100%}.main_sidebar--footer--toggle{width:100%;position:relative;background-color:#fff;display:flex;justify-content:center}.main_sidebar--footer--profile{width:100%;padding:16px 23px 16px 16px;border-top:1px solid #D7D9DE}.divider{border-bottom:1px solid #CAC4D0;margin:8px 0;width:100%}::ng-deep .sidebar_bottom_menu{width:252px}::ng-deep .sidebar_bottom_menu a{text-decoration:none!important;color:#424954!important}::ng-deep .sidebar_bottom_menu .mt-4{margin-top:4px}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_bottom_menu .switch .switch_title{padding:12px;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;color:#424954}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item.standard_menu_item{padding:10px 12px!important}::ng-deep .sidebar_bottom_menu .mat-mdc-menu-item{color:#424954;font-size:13px;font-weight:500;line-height:20px;letter-spacing:.2px}::ng-deep .sidebar_bottom_menu .top_bar{display:flex;padding:8px 12px 0}::ng-deep .sidebar_bottom_menu .top_bar .information{width:170px}::ng-deep .sidebar_bottom_menu .top_bar .information .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .information .email{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:11px;line-height:16px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_bottom_menu .top_bar .image{min-width:40px;width:40px;height:40px;object-fit:cover;border-radius:50%;margin-right:8px}::ng-deep .sidebar_bottom_menu .top_bar .no_image{background-color:#008b33;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;line-height:24px}::ng-deep .sidebar_bottom_menu .mat_menu_organization{padding:8px 12px!important}::ng-deep .sidebar_bottom_menu .mat_menu_organization .mat-mdc-menu-item-text{display:flex;justify-content:space-between;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu{display:flex;align-items:center}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .image{width:24px;height:24px;border-radius:50%;margin-right:12px}::ng-deep .sidebar_bottom_menu .mat_menu_organization .organization_item_in_menu .no_image{color:#006b1e;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;line-height:16px;background-color:#c0e5c7}::ng-deep .sidebar_platforms_menu{width:280px}::ng-deep .sidebar_platforms_menu a{text-decoration:none!important}::ng-deep .sidebar_platforms_menu .mat-mdc-menu-content{padding:8px 0!important}::ng-deep .sidebar_platforms_menu .menu_title{color:#424954;font-weight:700;font-size:12px;line-height:16px;letter-spacing:.1px;padding:12px}::ng-deep .sidebar_platforms_menu .standard_menu_item{padding:8px 12px!important;display:flex;align-items:center}::ng-deep .sidebar_platforms_menu .standard_menu_item .logo{margin-right:14px}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text{display:flex;align-items:center;font-weight:500;font-size:13px;line-height:20px;letter-spacing:.2px;color:#424954}::ng-deep .sidebar_platforms_menu .standard_menu_item .mat-mdc-menu-item-text .logo{margin-right:14px}::ng-deep .main_sidebar .mat-ripple:not(:empty){transform:unset!important}\n"] }]
1962
+ ], 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 [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 <div mat-menu-item class=\"standard_menu_item\">\n <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n <span>{{app.name}}</span>\n <img alt=\"\" class=\"ml-auto\" src=\"/assets/selected_organization.svg\"\n *ngIf=\"app.checked\"\n >\n </div>\n </a>\n </ng-container>\n </ng-container>\n\n <div class=\"divider\"\n *ngIf=\"activeAndInactivePlatforms['active'].length && activeAndInactivePlatforms['inactive'].length\"\n ></div>\n\n <ng-container *ngIf=\"activeAndInactivePlatforms['inactive'].length\">\n <div class=\"menu_title\">\n Inactive Apps\n </div>\n <div class=\"standard_menu_item\" *ngFor=\"let app of activeAndInactivePlatforms['inactive']\">\n <img alt=\"\" class=\"logo\" [src]=\"'/assets/logos/small/' + app.id + '.svg'\">\n <span>{{app.name}}</span>\n </div>\n </ng-container>\n\n </mat-menu>\n </div>\n\n <div class=\"main_sidebar--content\">\n <ng-container *ngIf=\"secondLayerLinks.length\">\n <div class=\"main_sidebar--content--toolbar\"\n (click)=\"navigateBack()\"\n >\n <img alt=\"\" src=\"/assets/back.svg\">\n <span>Back</span>\n </div>\n <div class=\"main_sidebar--content--sub_title\">\n Settings\n </div>\n </ng-container>\n\n <ng-container *ngFor=\"let link of (secondLayerLinks.length ? secondLayerLinks : navigationLinks)\">\n <div class=\"divider\" *ngIf=\"link.hasDivider\"></div>\n <a [routerLink]=\"link.emitClick ? null : link.linkTo\">\n <div class=\"main_sidebar--content--link pointer\"\n matRipple\n [class.active]=\"link.pageEnum === activePage || link.pageEnum === secondLayerActivePage\"\n (click)=\"handleLinkClick(link)\"\n [attr.data-testid]=\"'sidebar-link-' + (link.linkTo | lowercase)\"\n >\n <div class=\"parent_icon\">\n <img class=\"icon\" alt=\"\"\n [src]=\"'/assets/links/' + platform + '/' + link.image + '.svg'\">\n </div>\n <div class=\"name\">{{link.title | translate}}</div>\n\n <div class=\"new 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 <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 <div mat-menu-item *ngIf=\"platform === CompaniesEnum.ORGANIZATION && accessToNewOrganization\"\n class=\"standard_menu_item\"\n >\n Add new organization\n </div>\n </a>\n\n\n <ng-container *ngIf=\"allOrganizations.length > 1\">\n <div class=\"divider\" ></div>\n\n <div class=\"switch\">\n <div class=\"switch_title\">\n Switch Organization\n </div>\n <div mat-menu-item class=\"mat_menu_organization\" (click)=\"switchOrganization(organization)\"\n *ngFor=\"let organization of allOrganizations\"\n >\n <div class=\"organization_item_in_menu\">\n <img alt=\"\" class=\"image\" [src]=\"organization.image\"\n *ngIf=\"organization.image; else NoImage\"\n >\n <ng-template #NoImage>\n <div class=\"image no_image\">\n {{organization.name | slice: 0 : 1 | uppercase}}\n </div>\n </ng-template>\n <span>{{organization.name}}</span>\n </div>\n <img alt=\"\" *ngIf=\"organization.id === currentCompany?.id\"\n class=\"isSelected\" src=\"/assets/selected_organization.svg\" >\n </div>\n </div>\n </ng-container>\n <div class=\"divider\"></div>\n\n <div mat-menu-item class=\"standard_menu_item\" (click)=\"openZendeskPage()\">\n Help Center\n </div>\n\n <a [href]=\"BottomPopupLinks['terms']\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\" >\n Terms And Conditions\n </div>\n </a>\n\n <a [href]=\"BottomPopupLinks['privacy']\" target=\"_blank\">\n <div mat-menu-item class=\"standard_menu_item\" >\n Privacy Policy\n </div>\n </a>\n\n\n <div class=\"divider\"></div>\n\n <div mat-menu-item class=\"standard_menu_item\" (click)=\"signOut()\">\n Sign out\n </div>\n </mat-menu>\n </div>\n </div>\n </div>\n </div>\n\n</div>\n", styles: [".sidebar .main_sidebar{box-shadow:3px 0 #d7d9de33;border-right:1px solid #D7D9DE;height:100vh;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{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.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)}.sidebar .main_sidebar_wrapper>*{transform:translate(-100%);transition:transform .3s ease}}.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"] }]
1944
1963
  }], ctorParameters: () => [{ type: i1$3.Router }, { type: i2.HttpClient }], propDecorators: { canDeactivate: [{
1945
1964
  type: HostListener,
1946
1965
  args: ['window:beforeunload']
@@ -2021,7 +2040,7 @@ class AgGridButtonCellComponent {
2021
2040
  this.params.onClick(this.params.data);
2022
2041
  }
2023
2042
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AgGridButtonCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2024
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AgGridButtonCellComponent, isStandalone: true, selector: "i-tech-ag-grid-button-cell", ngImport: i0, template: "<i-tech-icon-button\n (click)=\"onClick($event)\"\n [iconName]=\"params.image\"\n>\n</i-tech-icon-button>\n", styles: [""], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }] }); }
2043
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: AgGridButtonCellComponent, isStandalone: true, selector: "i-tech-ag-grid-button-cell", ngImport: i0, template: "<i-tech-icon-button\n (click)=\"onClick($event)\"\n [iconName]=\"params.image\"\n>\n</i-tech-icon-button>\n", styles: [""], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled", "testId"], outputs: ["buttonClick"] }] }); }
2025
2044
  }
2026
2045
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AgGridButtonCellComponent, decorators: [{
2027
2046
  type: Component,