i-tech-shared-components 1.1.6 → 1.1.8

package/src/lib/components/date-picker/date-picker.component.html

@@ -1,61 +0,0 @@
-<div class="flex_column relative mat-date-range-input" *ngIf="ngControl" [ngClass]="{'check_requirements': submit}">
-  <div class="w-100">
-    <mat-label [ngClass]="{
-        'readonly-color' : ngControl.control.disabled,
-        'invalid-label-color': !!(ngControl.control.errors && submit)
-        }">
-      {{ label | translate }}
-    </mat-label>
-    <span *ngIf="required" class="required-input" [ngClass]="{'readonly-color' : ngControl.control.disabled}">*</span>
-  </div>
-  <mat-form-field appearance="outline" [ngClass]="{'opened_calendar': isOpen}"
-                  [class.readonly-field]="ngControl.control.disabled">
-    <input matInput #inputElement
-           type="text"
-           [formControl]="ngControl.control"
-           [placeholder]="placeholder | translate"
-           dateMask
-           [matDatepicker]="datePicker"
-           [errorStateMatcher]="customErrorStateMatcher"
-           (focus)="focused = true"
-           (click)="datePicker.open();"
-           (dateChange)="emitChange()"
-    >
-
-    <mat-icon *ngIf="iconPrefix"
-              matPrefix
-              [matTooltip]="((iconPrefixTooltip || '') | translate)"
-              [style.color]="iconPrefixColor"
-    >{{ iconPrefix }}
-    </mat-icon>
-
-    <mat-icon *ngIf="iconPrefixSvg"
-              matPrefix
-              [matTooltip]="((iconPrefixTooltip || '') | translate)"
-              [svgIcon]="iconPrefixSvg"
-    ></mat-icon>
-
-    <i-tech-icon-button matSuffix
-                        [iconName]="'date_range'"
-                        [disabled]="ngControl.control.disabled"
-                        (click)="datePicker.open()"
-                        [ngClass]="ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'"
-    ></i-tech-icon-button>
-
-    <mat-datepicker #datePicker (closed)="isOpen = false;clickForFocusOut()"
-                    (opened)="isOpen = true;focused = true"></mat-datepicker>
-
-    <!-- Error Messages -->
-    <mat-error *ngIf="!!(ngControl.control.errors && submit)">
-      {{ ngControl.control | generateErrorMessages : label : defaultPatternKey }}
-    </mat-error>
-
-    <!-- Helper Text -->
-    <mat-hint *ngIf="!(!!(ngControl.control.errors && submit)) && hintText"
-              [ngClass]="{'readonly-color' : ngControl.control.disabled}"
-    >
-      {{ hintText | translate }}
-    </mat-hint>
-
-  </mat-form-field>
-</div>

package/src/lib/components/date-picker/date-picker.component.ts

@@ -1,75 +0,0 @@
-import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
-import {FormControlName, ReactiveFormsModule} from "@angular/forms";
-import { InputService } from '../../services/input.service';
-import {NgClass, NgIf} from "@angular/common";
-import {TranslateModule} from "@ngx-translate/core";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {MatDatepickerModule} from "@angular/material/datepicker";
-import {MatInput} from "@angular/material/input";
-import {MatTooltip} from "@angular/material/tooltip";
-import {MatIconModule} from "@angular/material/icon";
-import {DateMaskDirective} from "../../directives/date-mask.directive";
-import {GenerateErrorMessagesPipe} from "../../pipes/generate-error-messages.pipe";
-import {IconButtonComponent} from "../icon-button/icon-button.component";
-
-@Component({
-    selector: 'i-tech-date-picker',
-    templateUrl: './date-picker.component.html',
-  imports: [
-    NgClass, NgIf,
-    TranslateModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatDatepickerModule,
-    MatInput,
-    MatTooltip,
-    MatIconModule,
-    DateMaskDirective,
-    GenerateErrorMessagesPipe, IconButtonComponent
-  ],
-    standalone: true
-})
-export class DatePickerComponent {
-    @Input() label: string = '';
-    @Input() defaultPatternKey!: string ;
-    @Input() required: boolean = false;
-    @Input() hintText: string = '';
-    @Input() placeholder: string = 'MM/DD/YYYY';
-    @Input() iconPrefix?: string;
-    @Input() iconPrefixSvg?: string;
-    @Input() iconPrefixTooltip?: string;
-    @Input() iconPrefixColor?: string;
-    @Input() iconPrefixVariant?: string;
-    @Input() valueChangeEmit?: boolean;
-
-    @Input() submit: boolean = false;
-    @ViewChild('inputElement') inputElement!: ElementRef;
-    @Output() valueChangeEmitter = new EventEmitter<void>();
-
-    isOpen = false;
-    focused = false;
-
-    ngControl: FormControlName;
-
-    constructor(private inputService: InputService) {
-        this.ngControl = this.inputService.injectNgControl() as FormControlName;
-    }
-
-    emitChange(): void {
-        if (!this.valueChangeEmit) { return; }
-        this.valueChangeEmitter.emit();
-    }
-
-    clickForFocusOut(): void {
-        setTimeout(() => {
-            this.inputElement.nativeElement.focus();
-            this.inputElement.nativeElement.blur();
-        },120)
-    }
-
-    customErrorStateMatcher = {
-        isErrorState: (control: any, form: any): boolean => {
-            return !!(control && control.invalid && this.submit);
-        }
-    };
-}

package/src/lib/components/date-range-datepicker/date-range-datepicker.component.html

@@ -1,44 +0,0 @@
-<div class="flex_column relative mat-date-range-input"
-     [formGroup]="dateRangeForm"
->
-    <div class="w-100">
-        <mat-label>
-            {{(label || '') | translate}}
-        </mat-label>
-    </div>
-    <mat-form-field appearance="outline" [ngClass]="{'opened_calendar': isOpen}">
-        <mat-date-range-input [rangePicker]="picker">
-            <input formControlName="startDate"
-                   [placeholder]=" (placeholder ? placeholder[0] : 'Start Date')"
-                   [title]="key ? key.title :  'Date'"
-                   [attr.data-accessKey]="key ? key.start : 'minStartDate'"
-                   [attr.data-parentKey]="key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'"
-                   matStartDate #min
-                   dateMask
-                   [errorStateMatcher]="customErrorStateMatcher"
-                   [rangeFormControl]="dateRangeForm.controls['startDate']"
-                   (keydown)="keyEventHandler($event,[min.value, max.value || null],min)"
-                   (dateChange)="setDate([min.value, max.value || null],min)">
-            <input formControlName="endDate"
-                   [placeholder]="(placeholder  ? placeholder[1] : 'End Date')"
-                   [title]="key ? key.title :  'Date'"
-                   [attr.data-accessKey]="key ? key.end : 'maxEndDate'"
-                   [attr.data-parentKey]="key ? (key.start + '_' + key.end) : 'minStartDate_maxEndDate'"
-                   matEndDate #max
-                   dateMask
-                   [errorStateMatcher]="customErrorStateMatcher"
-                   [rangeFormControl]="dateRangeForm.controls['endDate']"
-                   (keydown)="keyEventHandler($event,[min.value, max.value || null],max)"
-                   (dateChange)="setDate([min.value, max.value || null],max)">
-        </mat-date-range-input>
-        <i-tech-icon-button matSuffix
-             [iconName]="'cancel'"
-             (buttonClick)="selectionChange.emit([null, null])"
-             class="default-form-icon-color"
-             *ngIf="dateRangeForm.get('startDate')?.value && this.dateRangeForm.get('endDate')?.value"
-        ></i-tech-icon-button>
-        <i-tech-icon-button matSuffix [iconName]="'date_range'" (buttonClick)="picker.open()" class="default-form-icon-color"></i-tech-icon-button>
-        <mat-date-range-picker #picker (closed)="isOpen = false;clickForFocusOut()" (opened)="isOpen = true"></mat-date-range-picker>
-        <mat-hint *ngIf="hintText && !errorMessage">{{hintText}}</mat-hint>
-    </mat-form-field>
-</div>

package/src/lib/components/date-range-datepicker/date-range-datepicker.component.ts

@@ -1,105 +0,0 @@
-import {
-  AfterViewInit,
-  Component, ElementRef,
-  EventEmitter,
-  Input,
-  OnChanges,
-  Output,
-  SimpleChanges,
-  ViewChild
-} from '@angular/core';
-import {MatDatepickerModule, MatDateRangePicker} from "@angular/material/datepicker";
-import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from "@angular/forms";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {NgClass, NgIf} from "@angular/common";
-import {TranslateModule} from "@ngx-translate/core";
-import {IconButtonComponent} from "../icon-button/icon-button.component";
-import {DateMaskDirective} from "../../directives/date-mask.directive";
-
-@Component({
-  selector: 'app-mat-range-datepicker',
-  templateUrl: './date-range-datepicker.component.html',
-  imports: [
-    MatFormFieldModule,
-    ReactiveFormsModule,
-    MatDatepickerModule,
-    NgClass, NgIf,
-    TranslateModule,
-    IconButtonComponent, DateMaskDirective
-  ],
-  standalone: true
-})
-export class DateRangeDatepickerComponent implements OnChanges, AfterViewInit {
-  @Input() label?: string;
-  @Input() placeholder?: Array<string>;
-  @Input() value?: Array<string | null>;
-  @Input() defaultValue?: Array<Date>;
-  @Input() key?: {start: string, end: string, title: string};
-  @Input() submit = false;
-  @Input() clearValue = true;
-  @Input() errorMessage = '';
-  @Input() onePlaceholder?: string;
-  @Input() hintText: string = 'MM/DD/YYYY - MM/DD/YYYY';
-  @Output() resetForm = new EventEmitter<any>();
-  @Output() selectionChange = new EventEmitter<any>();
-  @ViewChild('picker') picker!: MatDateRangePicker<any>;
-  @ViewChild('min') min!: ElementRef;
-  isOpen = false;
-
-  dateRangeForm = new UntypedFormGroup({
-    startDate: new UntypedFormControl('', [Validators.maxLength(10)]),
-    endDate: new UntypedFormControl('', [Validators.maxLength(10)]),
-  });
-
-  ngAfterViewInit(): void {
-    setTimeout(() => {
-      if (this.defaultValue?.length) {
-        this.dateRangeForm.patchValue({
-          startDate: this.defaultValue[0],
-          endDate: this.defaultValue[1]
-        })
-      }
-    })
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    setTimeout(() => {
-      if (changes['value']?.currentValue && !(changes['value'].currentValue[0])) {
-        if (this.picker) {
-          this.dateRangeForm.reset();
-          this.picker.select(null)
-        }
-      } else if (changes['value'] && this.value?.length) {
-        this.dateRangeForm.setValue({
-          startDate: new Date(this.value[0] || ''),
-          endDate: new Date(this.value[1] || '')
-        })
-      }
-    }, 10)
-  }
-
-  clickForFocusOut(): void {
-    setTimeout(() => {
-      this.min.nativeElement.focus();
-      this.min.nativeElement.blur();
-    },120)
-  }
-
-  customErrorStateMatcher = {
-    isErrorState: (control: any, form: any): boolean => {
-      return !!(control && control.invalid && this.submit);
-    }
-  };
-
-  setDate(value: Array<string | null>, element: any): void {
-    this.selectionChange.emit(value);
-    element.blur();
-  }
-
-  keyEventHandler(event: KeyboardEvent,value: Array<string | null>, element: any): void {
-    if (event.code === 'Enter') {
-      this.setDate(value,element)
-    }
-  }
-
-}

package/src/lib/components/icon-button/icon-button.component.html

@@ -1,27 +0,0 @@
-<button
-        *ngIf="['tonal','standard'].includes(type)"
-        mat-icon-button
-        [ngClass]="{small: size === 'small', tonal: type === 'tonal', standard: type === 'standard'}"
-        [matTooltip]="tooltip | translate"
-        [matTooltipDisabled]="!tooltip"
-        [disabled]="disabled || false"
-        (click)="onClick($event)"
->
-    <mat-icon *ngIf="iconSvg" [svgIcon]="iconSvg"></mat-icon>
-    <mat-icon *ngIf="iconName">{{iconName}}</mat-icon>
-</button>
-
-<button
-        *ngIf="type === 'filled'"
-        mat-fab
-        class="filled"
-        [ngClass]="{small: size === 'small'}"
-        [matTooltip]="tooltip | translate"
-        [matTooltipDisabled]="!tooltip"
-        [color]="'primary'"
-        [disabled]="disabled || false"
-        (click)="onClick($event)"
->
-    <mat-icon *ngIf="iconSvg" [svgIcon]="iconSvg"></mat-icon>
-    <mat-icon *ngIf="iconName">{{iconName}}</mat-icon>
-</button>

package/src/lib/components/icon-button/icon-button.component.ts

@@ -1,37 +0,0 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatFabButton, MatIconButton} from "@angular/material/button";
-import {NgClass, NgIf} from "@angular/common";
-import {MatTooltip} from "@angular/material/tooltip";
-import {TranslateModule} from "@ngx-translate/core";
-import {MatIcon} from "@angular/material/icon";
-
-@Component({
-  selector: 'i-tech-icon-button',
-  templateUrl: './icon-button.component.html',
-  styleUrl: './icon-button.component.scss',
-  imports: [
-    MatIconButton,
-    NgClass,
-    MatTooltip,
-    TranslateModule,
-    MatIcon,
-    MatFabButton,
-    NgIf
-  ],
-  standalone: true
-})
-export class IconButtonComponent {
-  @Input() size: 'medium' | 'small' = 'medium';
-  @Input() type: 'standard' | 'filled' | 'tonal' = 'tonal';
-  @Input() iconSvg!: string;
-  @Input() iconName!: string;
-  @Input() tooltip!: string;
-  @Input() disabled!: boolean;
-  @Output() buttonClick = new EventEmitter<void>();
-
-  onClick(event: MouseEvent): void {
-    if (!this.disabled) {
-      this.buttonClick.emit();
-    }
-  }
-}

package/src/lib/components/label/label.component.html

@@ -1,15 +0,0 @@
-<div [class]="iconName || iconSvg ? 'trailing-icon' : ''">
-
-    <mat-chip
-            [class]="'label_' + color"
-            [ngClass]="{bordered: bordered, small: size === 'small'}"
-            [matTooltip]="(tooltip || '') | translate"
-            [disableRipple]="disableRipple"
-    >
-        <div class="flex_align_center flex_gap">
-            <span>{{text | translate}}</span>
-            <mat-icon *ngIf="iconName">{{iconName}}</mat-icon>
-            <mat-icon *ngIf="iconSvg" [svgIcon]="iconSvg"></mat-icon>
-        </div>
-    </mat-chip>
-</div>

package/src/lib/components/label/label.component.ts

@@ -1,33 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {LabelTypeEnum} from "../../interfaces/label-type.enum";
-import {MatChip} from "@angular/material/chips";
-import {MatTooltip} from "@angular/material/tooltip";
-import {NgClass} from "@angular/common";
-import {TranslateModule} from "@ngx-translate/core";
-import {MatIcon} from "@angular/material/icon";
-
-@Component({
-  selector: 'i-tech-label',
-  templateUrl: './label.component.html',
-  styleUrls: [],
-  imports: [
-    MatChip,
-    MatTooltip,
-    NgClass,
-    TranslateModule,
-    MatIcon
-  ],
-  standalone: true
-})
-export class LabelComponent {
-  @Input() color: LabelTypeEnum = LabelTypeEnum.primary;
-  @Input() text!: string;
-  @Input() bordered: boolean = false;
-  @Input() tooltip?:string;
-  @Input() size: 'small' | 'standard' = 'standard';
-  @Input() iconName?: string;
-  @Input() iconSvg?: string;
-  @Input() disableRipple: boolean = false;
-
-
-}

package/src/lib/components/menu/menu.component.html

@@ -1,20 +0,0 @@
-<div class="custom_dropdown_container"
-     [attr.data-name]="dataName"
-     [ngClass]="containerClass"
->
-    <i-tech-button
-            [matMenuTriggerFor]="beforeMenu"
-            [type]="ButtonType.OUTLINE"
-            [fontIcon]="'keyboard_arrow_down'"
-            [text]="(text || '') "
-            (menuOpened)="matMenuState  = true"
-            (menuClosed)="matMenuState  = false"
-            [activated]="matMenuState"
-    ></i-tech-button>
-    <mat-menu #beforeMenu="matMenu" [xPosition]="positionX">
-        <button mat-menu-item *ngFor="let option of menuOptions" (click)="emitEvent.emit(option.value)">
-            <mat-icon *ngIf="option.type" [svgIcon]="DropdownItemIcon[option.type]"></mat-icon>
-            <mat-label class="meu_item_label">{{(option.text || '') | translate}}</mat-label>
-        </button>
-    </mat-menu>
-</div>

package/src/lib/components/menu/menu.component.scss

@@ -1,9 +0,0 @@
-.custom_dropdown_container {
-  app-mat-button {
-    display: inline-block;
-  }
-}
-
-mat-menu {
-  height: max-content;
-}

package/src/lib/components/menu/menu.component.ts

@@ -1,39 +0,0 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
-import {ButtonType} from "../../interfaces/button-types.enum";
-import {DropdownItemIcon, DropdownSelectionType} from "../../interfaces/dropdown-selection.constants";
-import {MatMenu, MatMenuItem, MatMenuTrigger, MenuPositionX} from "@angular/material/menu";
-import {MatIcon} from "@angular/material/icon";
-import {NgClass, NgForOf, NgIf} from "@angular/common";
-import {TranslateModule} from "@ngx-translate/core";
-import {ButtonComponent} from "../button/button.component";
-import {MatLabel} from "@angular/material/form-field";
-
-@Component({
-    selector: "app-menu",
-    standalone: true,
-  imports: [
-    MatMenuTrigger,
-    MatMenu,
-    MatIcon,
-    NgIf,
-    NgForOf,
-    MatMenuItem,
-    TranslateModule,
-    NgClass,
-    ButtonComponent,
-    MatLabel
-  ],
-    templateUrl: "./menu.component.html",
-    styleUrls: ["./menu.component.scss"]
-})
-export class MenuComponent {
-    @Input() text!: string;
-    @Input() dataName!: string;
-    @Input() containerClass!: string;
-    @Input() positionX: MenuPositionX = 'before';
-    @Input() menuOptions: Array<{value: string, text: string, src?: string, class?: string,type?: DropdownSelectionType}> = [];
-    @Output() emitEvent = new EventEmitter<any>();
-    protected readonly ButtonType = ButtonType;
-    protected readonly DropdownItemIcon = DropdownItemIcon;
-    matMenuState = false;
-}

package/src/lib/components/text/text-input.component.html

@@ -1,91 +0,0 @@
-<div *ngIf="inputData && ngControl">
-  <div class="w-100">
-    <mat-label [ngClass]="{
-          'readonly-color' : inputData.readOnly || ngControl.control.disabled,
-          'invalid-label-color': !!(ngControl.control.errors && inputData.submit)
-          }"
-               *ngIf="inputData.label">
-      {{ inputData.label | translate }}
-    </mat-label>
-    <span *ngIf="inputData.required" class="required-input"
-          [ngClass]="{'readonly-color' : inputData.readOnly || ngControl.control.disabled}">*</span>
-  </div>
-  <mat-form-field appearance="outline" class="w-100"
-                  [class.readonly-field]="inputData.readOnly || ngControl.control.disabled"
-  >
-    <!-- Leading Icon -->
-    <mat-icon *ngIf="inputData.iconPrefix"
-              matPrefix
-              [ngClass]="{
-                    'readonly-color' : !inputData.iconPrefixColor && (inputData.readOnly || ngControl.control.disabled),
-                    'default-form-icon-color' : !inputData.iconPrefixColor && !(inputData.readOnly || ngControl.control.disabled)
-                    }"
-              [matTooltip]="((inputData.iconPrefixTooltip || '') | translate)"
-              [style.color]="inputData.iconPrefixColor || null"
-    >{{ inputData.iconPrefix }}
-    </mat-icon>
-
-    <mat-icon *ngIf="inputData.iconPrefixSvg"
-              matPrefix
-              [matTooltip]="((inputData.iconPrefixTooltip || '') | translate)"
-              [svgIcon]="inputData.iconPrefixSvg"
-    ></mat-icon>
-
-    <!-- Input Field -->
-    <input matInput
-           *ngIf="!inputData.textarea"
-           [type]="inputData.type || 'text'"
-           [readonly]="inputData.readOnly"
-           [placeholder]="(inputData.placeholder || '') | translate"
-           [pattern]="inputData.pattern!"
-           [formControl]="ngControl.control"
-           [mask]="inputData.mask || ''"
-           [ngClass]="{'readonly-color readonly-cursor' : inputData.readOnly || ngControl.control.disabled}"
-           [inputMask]="inputData.inputMask!"
-           [errorStateMatcher]="customErrorStateMatcher"
-           (blur)="onFocusOut()"
-    >
-
-    <textarea matInput
-              *ngIf="inputData.textarea"
-              [type]="inputData.type || 'text'"
-              [readonly]="inputData.readOnly"
-              [placeholder]="(inputData.placeholder || '') | translate"
-              [pattern]="inputData.pattern!"
-              [formControl]="ngControl.control"
-              [ngClass]="{'readonly-color' : inputData.readOnly || ngControl.control.disabled}"
-              [errorStateMatcher]="customErrorStateMatcher"
-    ></textarea>
-
-    <!-- Clear Icon -->
-    <i-tech-icon-button
-      *ngIf="inputData.clearable"
-      iconName="cancel"
-      matSuffix
-      [disabled]="inputData.readOnly || ngControl.control.disabled || false"
-      [ngClass]="inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'"
-      (click)="clear()"
-    >
-    </i-tech-icon-button>
-
-    <!-- Trailing Icon -->
-    <i-tech-icon-button
-      *ngIf="inputData.iconSuffix"
-      [iconName]="inputData.iconSuffix"
-      [disabled]="inputData.readOnly || ngControl.control.disabled  || false"
-      [ngClass]="inputData.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'"
-      matSuffix
-    >
-    </i-tech-icon-button>
-
-    <!-- Error Messages -->
-    <mat-error *ngIf="!!(ngControl.control.errors && inputData.submit)">
-      {{ ngControl.control | generateErrorMessages : (inputData.label || '') : inputData.defaultPatternKey }}
-    </mat-error>
-
-    <!-- Helper Text -->
-    <mat-hint *ngIf="!(!!(ngControl.control.errors && inputData.submit)) && inputData.hint">
-      {{ inputData.hint | translate }}
-    </mat-hint>
-  </mat-form-field>
-</div>

package/src/lib/components/text/text-input.component.ts

@@ -1,73 +0,0 @@
-import { Component, EventEmitter, Input, Output} from '@angular/core';
-import {FormControlName, ReactiveFormsModule} from '@angular/forms';
-import { InputService } from '../../services/input.service';
-import {AppInputInterface} from "../../interfaces/app-input.interface";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {TranslateModule} from "@ngx-translate/core";
-import {NgClass, NgIf} from "@angular/common";
-import {MatIcon} from "@angular/material/icon";
-import {MatTooltip} from "@angular/material/tooltip";
-import {MatInput} from "@angular/material/input";
-import {GenerateErrorMessagesPipe} from "../../pipes/generate-error-messages.pipe";
-import {IconButtonComponent} from "../icon-button/icon-button.component";
-import {InputMaskDirective} from "../../directives/input-mask.directive";
-import {NgxMaskDirective} from "ngx-mask";
-
-@Component({
-  selector: 'i-tech-text-input',
-  templateUrl: './text-input.component.html',
-  styleUrls: [],
-  imports: [
-    TranslateModule,
-    NgClass,
-    MatIcon,
-    MatTooltip,
-    MatInput,
-    ReactiveFormsModule,
-    NgIf,
-    GenerateErrorMessagesPipe,
-    IconButtonComponent,
-    InputMaskDirective,
-    NgxMaskDirective,
-    MatFormFieldModule
-  ],
-  standalone: true
-})
-export class TextInputComponent {
-    @Input() set inputData(data: AppInputInterface) {
-        // If submit becomes true, mark the control as touched
-        if (data?.submit && this.ngControl.control) {
-            this.ngControl.control.markAsTouched();
-        }
-        this._inputData = data;
-    }
-    get inputData(): AppInputInterface {
-        return this._inputData;
-    }
-    @Output() focusOutEmitter = new EventEmitter<void>();
-
-    private _inputData!: AppInputInterface;
-    ngControl: FormControlName;
-
-    constructor(private inputService: InputService) {
-        this.ngControl = this.inputService.injectNgControl();
-    }
-
-    onFocusOut(): void {
-        if (this._inputData.focusOutEmit) {
-            this.focusOutEmitter.emit();
-        }
-    }
-
-    clear(): void {
-        if (this.ngControl) {
-            this.ngControl.control.reset();
-        }
-    }
-
-    customErrorStateMatcher = {
-        isErrorState: (control: any, form: any): boolean => {
-            return !!(control && control.invalid && this.inputData?.submit);
-        }
-    };
-}