i-tech-shared-components 1.3.92 → 1.3.94

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.
@@ -433,14 +433,6 @@ class TextInputComponent {
433
433
  }
434
434
  };
435
435
  this.ngControl = this.inputService.injectNgControl();
436
- // Subscribe to value changes of the control
437
- if (this.ngControl && this.ngControl.control) {
438
- this.ngControl.control.valueChanges.subscribe(value => {
439
- if (this._inputData?.emitValueChanges) {
440
- this.valueChangeEmitter.emit(value);
441
- }
442
- });
443
- }
444
436
  }
445
437
  onFocusOut() {
446
438
  if (this._inputData.focusOutEmit) {
@@ -449,7 +441,20 @@ class TextInputComponent {
449
441
  }
450
442
  clear() {
451
443
  if (this.ngControl) {
444
+ // Temporarily disable valueChanges emission to prevent emitting the current value
445
+ const originalEmitValueChanges = this._inputData?.emitValueChanges;
446
+ if (this._inputData) {
447
+ this._inputData.emitValueChanges = false;
448
+ }
452
449
  this.ngControl.control.reset();
450
+ // Manually emit null value if emitValueChanges was enabled
451
+ if (originalEmitValueChanges) {
452
+ this.valueChangeEmitter.emit(null);
453
+ }
454
+ // Restore the original emitValueChanges setting
455
+ if (this._inputData) {
456
+ this._inputData.emitValueChanges = originalEmitValueChanges;
457
+ }
453
458
  }
454
459
  }
455
460
  toggleEye() {
@@ -461,8 +466,11 @@ class TextInputComponent {
461
466
  this.valueChangeEmitter.emit(this.ngControl.control.value);
462
467
  }
463
468
  }
469
+ get hasValue() {
470
+ return !!(this.ngControl?.control?.value && this.ngControl.control.value.toString().trim().length > 0);
471
+ }
464
472
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextInputComponent, deps: [{ token: InputService }], target: i0.ɵɵFactoryTarget.Component }); }
465
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter", valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : inputData.readOnly || ngControl.control.disabled,\n 'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n }\"\n *ngIf=\"inputData.label\">\n {{ inputData.label | translate }}\n </mat-label>\n <span *ngIf=\"inputData.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-100\"\n [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\n >\n <!-- Leading Icon -->\n <mat-icon *ngIf=\"inputData.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !inputData.iconPrefixColor &&\n (inputData.readOnly || ngControl.control.disabled),\n 'default-form-icon-color' : !inputData.iconPrefixColor &&\n !(inputData.readOnly || ngControl.control.disabled)\n }\"\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [style.color]=\"inputData.iconPrefixColor || null\"\n >{{ inputData.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"inputData.iconPrefixSvg\"\n ></mat-icon>\n\n <!-- Input Field -->\n <input matInput #inputElement\n *ngIf=\"!inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [mask]=\"inputData.mask || ''\"\n [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\n [inputMask]=\"inputData.inputMask!\"\n [float]=\"'' + (inputData.float || false)\"\n [min]=\"('' + inputData.min)\"\n [max]=\"('' + inputData.max)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (blur)=\"onFocusOut()\"\n (keyup)=\"onValueChange()\"\n (change)=\"onValueChange()\"\n >\n\n <textarea matInput\n *ngIf=\"inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (keyup)=\"onValueChange()\"\n (change)=\"onValueChange()\"\n ></textarea>\n\n <!-- Clear Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.clearable\"\n iconName=\"cancel\"\n matSuffix\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"clear()\"\n >\n </i-tech-icon-button>\n\n <i-tech-icon-button\n *ngIf=\"inputData.type === 'password'\"\n [iconName]=\"closed ? 'visible' : 'visibility_off'\"\n matSuffix\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"toggleEye()\"\n >\n </i-tech-icon-button>\n\n <!-- Trailing Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.iconSuffix\"\n [iconName]=\"inputData.iconSuffix\"\n [matTooltip]=\"inputData.iconSuffixTooltip ? (inputData.iconSuffixTooltip | translate) : ''\"\n [matTooltipPosition]=\"'right'\"\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n matSuffix\n >\n </i-tech-icon-button>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n {{ inputData.hint | translate }}\n </mat-hint>\n </mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: GenerateErrorMessagesPipe, name: "generateErrorMessages" }, { kind: "component", type: IconButtonComponent, selector: "i-tech-icon-button", inputs: ["size", "type", "iconSvg", "iconName", "tooltip", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask", "min", "max", "float"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }] }); }
473
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextInputComponent, isStandalone: true, selector: "i-tech-text-input", inputs: { inputData: "inputData" }, outputs: { focusOutEmitter: "focusOutEmitter", valueChangeEmitter: "valueChangeEmitter" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["inputElement"], descendants: true, static: true }], ngImport: i0, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : inputData.readOnly || ngControl.control.disabled,\n 'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n }\"\n *ngIf=\"inputData.label\">\n {{ inputData.label | translate }}\n </mat-label>\n <span *ngIf=\"inputData.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-100\"\n [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\n >\n <!-- Leading Icon -->\n <mat-icon *ngIf=\"inputData.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !inputData.iconPrefixColor &&\n (inputData.readOnly || ngControl.control.disabled),\n 'default-form-icon-color' : !inputData.iconPrefixColor &&\n !(inputData.readOnly || ngControl.control.disabled)\n }\"\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [style.color]=\"inputData.iconPrefixColor || null\"\n >{{ inputData.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"inputData.iconPrefixSvg\"\n ></mat-icon>\n\n <!-- Input Field -->\n <input matInput #inputElement\n *ngIf=\"!inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [mask]=\"inputData.mask || ''\"\n [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\n [inputMask]=\"inputData.inputMask!\"\n [float]=\"'' + (inputData.float || false)\"\n [min]=\"('' + inputData.min)\"\n [max]=\"('' + inputData.max)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (blur)=\"onFocusOut()\"\n (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' : inputData.readOnly || ngControl.control.disabled}\"\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 [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? '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 [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"toggleEye()\"\n >\n </i-tech-icon-button>\n\n <!-- Trailing Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.iconSuffix\"\n [iconName]=\"inputData.iconSuffix\"\n [matTooltip]=\"inputData.iconSuffixTooltip ? (inputData.iconSuffixTooltip | translate) : ''\"\n [matTooltipPosition]=\"'right'\"\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n matSuffix\n >\n </i-tech-icon-button>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n {{ inputData.hint | translate }}\n </mat-hint>\n </mat-form-field>\n</div>\n", styles: [".clear-icon-overlay{position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:1!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}::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"] }] }); }
466
474
  }
467
475
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
468
476
  type: Component,
@@ -479,7 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
479
487
  InputMaskDirective,
480
488
  NgxMaskDirective,
481
489
  MatFormFieldModule
482
- ], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : inputData.readOnly || ngControl.control.disabled,\n 'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n }\"\n *ngIf=\"inputData.label\">\n {{ inputData.label | translate }}\n </mat-label>\n <span *ngIf=\"inputData.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-100\"\n [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\n >\n <!-- Leading Icon -->\n <mat-icon *ngIf=\"inputData.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !inputData.iconPrefixColor &&\n (inputData.readOnly || ngControl.control.disabled),\n 'default-form-icon-color' : !inputData.iconPrefixColor &&\n !(inputData.readOnly || ngControl.control.disabled)\n }\"\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [style.color]=\"inputData.iconPrefixColor || null\"\n >{{ inputData.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"inputData.iconPrefixSvg\"\n ></mat-icon>\n\n <!-- Input Field -->\n <input matInput #inputElement\n *ngIf=\"!inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [mask]=\"inputData.mask || ''\"\n [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\n [inputMask]=\"inputData.inputMask!\"\n [float]=\"'' + (inputData.float || false)\"\n [min]=\"('' + inputData.min)\"\n [max]=\"('' + inputData.max)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (blur)=\"onFocusOut()\"\n (keyup)=\"onValueChange()\"\n (change)=\"onValueChange()\"\n >\n\n <textarea matInput\n *ngIf=\"inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (keyup)=\"onValueChange()\"\n (change)=\"onValueChange()\"\n ></textarea>\n\n <!-- Clear Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.clearable\"\n iconName=\"cancel\"\n matSuffix\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"clear()\"\n >\n </i-tech-icon-button>\n\n <i-tech-icon-button\n *ngIf=\"inputData.type === 'password'\"\n [iconName]=\"closed ? 'visible' : 'visibility_off'\"\n matSuffix\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"toggleEye()\"\n >\n </i-tech-icon-button>\n\n <!-- Trailing Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.iconSuffix\"\n [iconName]=\"inputData.iconSuffix\"\n [matTooltip]=\"inputData.iconSuffixTooltip ? (inputData.iconSuffixTooltip | translate) : ''\"\n [matTooltipPosition]=\"'right'\"\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n matSuffix\n >\n </i-tech-icon-button>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n {{ inputData.hint | translate }}\n </mat-hint>\n </mat-form-field>\n</div>\n" }]
490
+ ], standalone: true, template: "<div *ngIf=\"inputData && ngControl\">\n <div class=\"w-100\">\n <mat-label [ngClass]=\"{\n 'readonly-color' : inputData.readOnly || ngControl.control.disabled,\n 'invalid-label-color': !!(ngControl.control.errors && inputData.submit)\n }\"\n *ngIf=\"inputData.label\">\n {{ inputData.label | translate }}\n </mat-label>\n <span *ngIf=\"inputData.required\" class=\"required-input\"\n [ngClass]=\"{'readonly-color' : inputData.readOnly || ngControl.control.disabled}\">*</span>\n </div>\n <mat-form-field appearance=\"outline\" class=\"w-100\"\n [class.readonly-field]=\"inputData.readOnly || ngControl.control.disabled\"\n >\n <!-- Leading Icon -->\n <mat-icon *ngIf=\"inputData.iconPrefix\"\n matPrefix\n [ngClass]=\"{\n 'readonly-color' : !inputData.iconPrefixColor &&\n (inputData.readOnly || ngControl.control.disabled),\n 'default-form-icon-color' : !inputData.iconPrefixColor &&\n !(inputData.readOnly || ngControl.control.disabled)\n }\"\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [style.color]=\"inputData.iconPrefixColor || null\"\n >{{ inputData.iconPrefix }}\n </mat-icon>\n\n <mat-icon *ngIf=\"inputData.iconPrefixSvg\"\n matPrefix\n [matTooltip]=\"((inputData.iconPrefixTooltip || '') | translate)\"\n [svgIcon]=\"inputData.iconPrefixSvg\"\n ></mat-icon>\n\n <!-- Input Field -->\n <input matInput #inputElement\n *ngIf=\"!inputData.textarea\"\n [type]=\"inputData.type || 'text'\"\n [readonly]=\"inputData.readOnly\"\n [placeholder]=\"(inputData.placeholder || '') | translate\"\n [pattern]=\"inputData.pattern!\"\n [formControl]=\"ngControl.control\"\n [mask]=\"inputData.mask || ''\"\n [ngClass]=\"{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}\"\n [inputMask]=\"inputData.inputMask!\"\n [float]=\"'' + (inputData.float || false)\"\n [min]=\"('' + inputData.min)\"\n [max]=\"('' + inputData.max)\"\n [errorStateMatcher]=\"customErrorStateMatcher\"\n (blur)=\"onFocusOut()\"\n (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' : inputData.readOnly || ngControl.control.disabled}\"\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 [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? '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 [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n (click)=\"toggleEye()\"\n >\n </i-tech-icon-button>\n\n <!-- Trailing Icon -->\n <i-tech-icon-button\n *ngIf=\"inputData.iconSuffix\"\n [iconName]=\"inputData.iconSuffix\"\n [matTooltip]=\"inputData.iconSuffixTooltip ? (inputData.iconSuffixTooltip | translate) : ''\"\n [matTooltipPosition]=\"'right'\"\n [disabled]=\"inputData.readOnly || ngControl.control.disabled || false\"\n [ngClass]=\"inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'\"\n matSuffix\n >\n </i-tech-icon-button>\n\n <!-- Error Messages -->\n <mat-error *ngIf=\"!!(ngControl.control.errors && inputData.submit)\">\n {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}\n </mat-error>\n\n <!-- Helper Text -->\n <mat-hint *ngIf=\"!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint\">\n {{ inputData.hint | translate }}\n </mat-hint>\n </mat-form-field>\n</div>\n", styles: [".clear-icon-overlay{position:absolute!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;z-index:1!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}::ng-deep .mat-mdc-form-field{position:relative}\n"] }]
483
491
  }], ctorParameters: () => [{ type: InputService }], propDecorators: { input: [{
484
492
  type: ViewChild,
485
493
  args: ['inputElement', { static: true }]
@@ -561,7 +569,7 @@ class ButtonComponent {
561
569
  NgxMaskPipe,
562
570
  TranslatePipe,
563
571
  TranslateService
564
- ], ngImport: i0, template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n mat-flat-button\n [attr.data-cy]=\"data_cy\"\n [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n [class.activated]=\"activated\"\n [ngClass]=\"(customClass || '')\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n mat-button\n [attr.data-cy]=\"data_cy\"\n [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n [class.activated]=\"activated\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.OUTLINE,ButtonType.WARN_OUTLINE].includes(type)\"\n mat-stroked-button\n [attr.data-cy]=\"data_cy\"\n [ngClass]=\"(customClass || '') \"\n [color]=\"type === ButtonType.WARN_OUTLINE ? 'warn' : color\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n [class.activated]=\"activated\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span>{{text | translate}}</span>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] }); }
572
+ ], 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" }] }); }
565
573
  }
566
574
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
567
575
  type: Component,
@@ -577,7 +585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
577
585
  NgxMaskPipe,
578
586
  TranslatePipe,
579
587
  TranslateService
580
- ], template: "<button *ngIf=\"[ButtonType.FILLED,ButtonType.WARNING].includes(type)\"\n mat-flat-button\n [attr.data-cy]=\"data_cy\"\n [color]=\"type === ButtonType.WARNING ? 'warn' : color\"\n [class.activated]=\"activated\"\n [ngClass]=\"(customClass || '')\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.TONAL,ButtonType.TEXT].includes(type)\"\n mat-button\n [attr.data-cy]=\"data_cy\"\n [ngClass]=\"(type === ButtonType.TONAL ? 'tertiary ' : '') + (customClass || '')\"\n [class.activated]=\"activated\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\">{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n\n <span>{{text | translate}}</span>\n</button>\n<button *ngIf=\"[ButtonType.OUTLINE,ButtonType.WARN_OUTLINE].includes(type)\"\n mat-stroked-button\n [attr.data-cy]=\"data_cy\"\n [ngClass]=\"(customClass || '') \"\n [color]=\"type === ButtonType.WARN_OUTLINE ? 'warn' : color\"\n [disabled]=\"disabled || submit\"\n (click)=\"onClick($event)\"\n [class.activated]=\"activated\"\n>\n <span *ngIf=\"submit\" class=\"spinner-overlay\">\n <mat-spinner diameter=\"16\"></mat-spinner>\n </span>\n <mat-icon *ngIf=\"fontIcon && !submit\" >{{fontIcon}}</mat-icon>\n <mat-icon *ngIf=\"svgIcon && !submit\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span>{{text | translate}}</span>\n</button>\n" }]
588
+ ], 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" }]
581
589
  }], propDecorators: { text: [{
582
590
  type: Input
583
591
  }], data_cy: [{