@corp-products/ui-components 3.5.9 → 3.6.1

package/src/lib/form-components/components/auto-complete/auto-complete.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AutoCompleteComponent } from './auto-complete.component';
+
+describe('AutoCompleteComponent', () => {
+  let component: AutoCompleteComponent;
+  let fixture: ComponentFixture<AutoCompleteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AutoCompleteComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AutoCompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/form-components/components/auto-complete/auto-complete.component.ts

@@ -0,0 +1,82 @@
+import { JsonPipe, NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { Component, EventEmitter, Input, Output, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
+import { PrimeTemplate } from 'primeng/api';
+import {
+  AutoComplete,
+  AutoCompleteCompleteEvent,
+  AutoCompleteSelectEvent,
+} from 'primeng/autocomplete';
+import { FloatLabel } from 'primeng/floatlabel';
+import { ValidationErrorsPipe } from '../../@utils/validations/validation-message.pipe';
+import { BaseInputComponent } from '../base-input.component';
+
+@Component({
+  selector: 'stc-auto-complete',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    AutoComplete,
+    PrimeTemplate,
+    NgIf,
+    NgTemplateOutlet,
+    NgClass,
+    JsonPipe,
+    ValidationErrorsPipe,
+    TranslatePipe,
+    FloatLabel,
+  ],
+  templateUrl: './auto-complete.component.html',
+  styleUrl: './auto-complete.component.scss',
+  encapsulation: ViewEncapsulation.None
+})
+export class AutoCompleteComponent extends BaseInputComponent {
+  @Input() selectedItemTemplate: TemplateRef<unknown> | null = null;
+  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+  @Output() onSearch: EventEmitter<string> = new EventEmitter<string>();
+  @Output() selectOption: EventEmitter<AutoCompleteSelectEvent> =
+    new EventEmitter<AutoCompleteSelectEvent>();
+  @Input() items: any[] = [];
+  @Input() minLengthToSearch = 3;
+  @Input() delay = 300; // default value
+  @Input() basicInput!: boolean;
+  @Input() typeAhead: boolean = false;
+  @Input() variant: 'in' | 'over' | 'on' = 'over';
+
+  constructor() {
+    super();
+  }
+
+  search(event: AutoCompleteCompleteEvent) {
+    this.onSearch.emit(event.query);
+  }
+
+  onSelect(event: AutoCompleteSelectEvent) {
+    this.selectOption.emit(event);
+  }
+
+  onKeyDown(event: KeyboardEvent) {
+    if (!['Enter', 'Tab', ' '].includes(event.key)) return;
+    event.preventDefault();
+    const input = event.target as HTMLInputElement;
+    this.addValueFromInput(input);
+  }
+
+  onBlur(event: Event) {
+    const input = event.target as HTMLInputElement;
+    this.addValueFromInput(input);
+  }
+
+  private addValueFromInput(input: HTMLInputElement) {
+    const value = input.value?.trim();
+    if (!value) return;
+    const current = this.control.value ?? [];
+    if (!current.includes(value)) {
+      this.control.setValue([...current, value]);
+      this.control.markAsDirty();
+    }
+    input.value = '';
+  }
+
+}

package/src/lib/form-components/components/base-input.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+@Component({
+  template: '',
+})
+export abstract class BaseInputComponent implements OnInit, OnDestroy {
+  @Input({ required: true }) control!: FormControl;
+  @Input() name: string = '';
+  @Input() label?: string;
+  @Input() placeholder: string = '';
+  @Input() inputId!: string;
+  @Input() readonly: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() hint?: string;
+
+  protected destroy$ = new Subject<void>();
+
+  get required(): boolean {
+    return this.control.hasValidator(Validators.required);
+  }
+
+  get isInvalid(): boolean {
+    return this.control.invalid && this.control.touched;
+  }
+
+  ngOnInit() {
+
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

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

@@ -0,0 +1,40 @@
+<div class="field flex flex-col gap-2 my-3 relative">
+  <p-floatlabel [variant]="variant">
+    <p-datepicker [selectionMode]="selectionMode" [disabled]="disabled" [formControl]="innerControl"
+      (onSelect)="onDateChange($event)" [iconDisplay]="'input'" [showClear]="showClear" (onClear)="afterClearDate()"
+      [inputId]="inputId" [inputStyleClass]="'reset-default-styles ' + (basicInput ? 'basic-style' : '')"
+      [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid }" [placeholder]="placeholder" [showIcon]="showIcon"
+      [class]="'w-full'" appendTo="body" [timeOnly]="isTimeOnly" [hourFormat]="hourFormat" [minDate]="minDate"
+      [maxDate]="maxDate" panelStyleClass="d-ltr">
+      @if (isTimeOnly) {
+      <ng-template #inputicon let-clickCallBack="clickCallBack">
+        <i class="text-[18px] font-icon-time-clock" (click)="clickCallBack($event)"></i>
+      </ng-template>
+      <ng-template pTemplate="footer">
+        <div class="p-datepicker-buttonbar">
+          <button pButton type="button" class="p-button-text" (click)="selectCurrentTime($event)">الان
+          </button>
+          <button pButton type="button" class="p-button-text" (click)="clearButtonClick($event)"> الغاء</button>
+        </div>
+      </ng-template>
+      }
+    </p-datepicker>
+
+    <label [for]="inputId">
+      {{ label }}
+      @if (required) {
+      <span [class.text-required]="required">*</span>
+      }
+    </label>
+  </p-floatlabel>
+  @if (hint) {
+  <small class="p-mt-1">{{ hint }}</small>
+  }
+  @if (isInvalid && (control.dirty || control.touched)) {
+  <small class="p-error">
+    @for (error of control.errors | validationErrors; track error) {
+    {{ error }}<br>
+    }
+  </small>
+  }
+</div>

package/src/lib/form-components/components/date-picker/date-picker.component.scss

@@ -0,0 +1,32 @@
+.p-datepicker {
+  @apply relative;
+}
+
+.p-datepicker-clear-icon {
+  @apply cursor-pointer absolute top-[50%] left-[13px] text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;
+}
+
+.d-ltr {
+  direction: ltr;
+}
+
+
+.text-required {
+  color: red;
+}
+
+.p-error {
+  color: #dc2626;
+}
+
+stc-date-picker.w-full,
+stc-date-picker.w-full .field,
+stc-date-picker.w-full .p-floatlabel,
+stc-date-picker.w-full .p-datepicker,
+stc-date-picker.w-full .p-inputtext {
+  @apply w-full;
+}
+
+stc-date-picker.w-full .p-datepicker {
+  @apply block;
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DatePickerComponent } from 'nx-BOD-workspace/libs/ui-components/src/lib/form-components/components/date-picker/date-picker.component';
+
+describe('DatePickerComponent', () => {
+  let component: DatePickerComponent;
+  let fixture: ComponentFixture<DatePickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DatePickerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DatePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,81 @@
+import { NgClass } from '@angular/common';
+import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ValidationErrorsPipe } from '../../@utils/validations';
+import { DatePicker, DatePickerModule } from 'primeng/datepicker';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { BaseInputComponent } from '../base-input.component';
+import { formatDate } from '@angular/common';
+
+@Component({
+  selector: 'stc-date-picker',
+  standalone: true,
+  imports: [
+    FormsModule,
+    DatePicker,
+    ReactiveFormsModule,
+    NgClass,
+    DatePickerModule,
+    ValidationErrorsPipe,
+    FloatLabelModule,
+  ],
+  templateUrl: './date-picker.component.html',
+  styleUrl: './date-picker.component.scss',
+  encapsulation: ViewEncapsulation.None,
+})
+export class DatePickerComponent extends BaseInputComponent {
+  @Input() showIcon: boolean = false;
+  @Input() showClear: boolean = false;
+  @Input() basicInput!: boolean;
+  @Input() isTimeOnly: boolean = false;
+  @Input() minDate: Date | undefined | null;
+  @Input() maxDate: Date | undefined | null;
+  @Input() hourFormat: '12' | '24' = '12';
+  nowTime = new Date();
+  @Input() selectionMode: 'single' | 'range' = 'single';
+  @Output() onAfterClearDate = new EventEmitter<void>();
+  @Input() variant: 'in' | 'over' | 'on' = 'over';
+  @Input() withoutTime: boolean = false;
+  innerControl = new FormControl<Date | null>(null);
+
+  constructor() {
+    super();
+  }
+
+  override ngOnInit() {
+    if (typeof this.control?.value === 'string') {
+      const date = new Date(this.control.value);
+      if (date) {
+        this.innerControl.setValue(date, { emitEvent: false });
+      }
+    }
+
+    this.control.valueChanges.subscribe((value) => {
+      if (!value) this.innerControl.reset();
+    });
+  }
+
+  selectCurrentTime(e: any) {
+    if (this.withoutTime) {
+      const d = new Date();
+      this.control.setValue(d.toISOString().split('T')[0]);
+      return;
+    }
+    this.control.setValue(this.nowTime);
+  }
+
+  clearButtonClick(e: any) {
+    this.control.setValue(null);
+  }
+
+  afterClearDate() {
+    this.control.reset();
+    this.onAfterClearDate.emit();
+  }
+
+  onDateChange(value: any) {
+    if (!this.withoutTime || !value) return;
+    const dateOnly = value instanceof Date ? formatDate(value, 'yyyy-MM-dd', 'en-US') : value;
+    this.control.setValue(dateOnly, { emitEvent: true });
+  }
+}

package/src/lib/form-components/components/date-picker/date-picker.validator.ts

@@ -0,0 +1,38 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+
+export const dateRangeValidator =
+  (fromKey: string, toKey: string): ValidatorFn =>
+  (control: AbstractControl): ValidationErrors | null => {
+    const fromControl = control.get?.(fromKey);
+    const toControl = control.get?.(toKey);
+
+    if (!fromControl?.value || !toControl?.value) {
+      return null;
+    }
+
+    const from = new Date(fromControl.value);
+    const to = new Date(toControl.value);
+
+    from.setHours(0, 0, 0, 0);
+    to.setHours(0, 0, 0, 0);
+
+    return from > to ? { invalidDateRange: true } : null;
+  };
+
+export const notFutureDateValidator =
+  (dateKey: string): ValidatorFn =>
+  (control: AbstractControl): ValidationErrors | null => {
+    const dateControl = control.get?.(dateKey);
+
+    if (!dateControl?.value) {
+      return null;
+    }
+
+    const valueDate = new Date(dateControl.value);
+    valueDate.setHours(0, 0, 0, 0);
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    return valueDate > today ? { futureDate: true } : null;
+  };

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

@@ -0,0 +1,80 @@
+<div class="field flex flex-col gap-2 my-3 relative">
+
+  <!-- input text align will be handled according to lang when implemented -->
+
+  @switch (type) {
+  @case ('textarea') {
+  @if (label) {
+  <div class="flex items-center justify-between gap-2">
+    <label [for]="inputId">
+      {{ label }}
+      @if (required) {
+      <span [class.text-required]="required">*</span>
+      }
+      <!-- @else if (!hideOptionalLabel) {
+        <span span class="optional-label">{{'forms.config.optional' | translate}}</span>
+      } -->
+    </label>
+    <ng-content></ng-content>
+  </div>
+  }
+  <textarea [name]="name" [id]="inputId" [formControl]="control" [placeholder]="placeholder" [readonly]="readonly"
+    [disabled]="disabled" pTextarea [rows]="rows" [cols]="cols" [autoResize]="autoResize" [class]="
+        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'
+        "
+    [ngClass]="{'ng-invalid ng-dirty': control.invalid && (control.dirty || control.touched), 'basic-style': basicInput, 'no-style':noStyle}">
+  </textarea>
+  }
+  @case ('withIcon') {
+  <p-iconfield class="filter-input">
+    <p-inputicon>
+      <i [class]="iconClass"></i>
+    </p-inputicon>
+    <input pInputText [id]="inputId" type="text" [placeholder]="placeholder" [formControl]="control" [readonly]="readonly"
+      [class]="
+          'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'"
+      [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}" />
+    @if (canClear && control.value) {
+    <p-inputIcon (click)="clearInput()">
+      <i class="pi pi-times cursor-pointer text-sm text-gray-400 hover:text-gray-600"></i>
+      </p-inputIcon>
+    }
+
+  </p-iconfield>
+  }
+  @default {
+  <p-floatlabel [variant]="variant">
+    <!-- <input pInputText id="value2" [(ngModel)]="value2" [invalid]="!value2" autocomplete="off" /> -->
+    <input [id]="inputId" [type]="'text-float-label'" [formControl]="control" [readonly]="readonly" [pSize]="size"
+      [class]="
+        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'
+        " [disabled]="disabled" [name]="name" pInputText [ngStyle]="{'direction': inputDirection || 'inherit'}"
+      class="w-full"
+      [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid, 'basic-style': basicInput, 'no-style':noStyle}" />
+    <label [for]="inputId">
+      {{ label }}
+      @if (required) {
+      <span [class.text-required]="required">*</span>
+      }
+    </label>
+  </p-floatlabel>
+  @if (prefix) {
+  <span class="absolute top-[40px] font-bold text-[16px] left-[25px]">
+    {{ prefix }}
+  </span>
+  }
+
+
+  }
+  }
+  @if (hint) {
+  <small class="p-mt-1">{{ hint }}</small>
+  }
+  @if (isInvalid && (control.dirty || control.touched)) {
+  <small class="p-error">
+    @for (error of control.errors | validationErrors; track error) {
+    {{ error }}<br>
+    }
+  </small>
+  }
+</div>

package/src/lib/form-components/components/input/input.component.scss

@@ -0,0 +1,46 @@
+textarea {
+  @apply h-auto min-h-[50px] overflow-auto;
+}
+
+
+textarea,
+.p-select, input {
+  border-radius: 0 ;
+  border-color: #DFE0E6 ;
+
+  &:enabled {
+    &:hover {
+      border-color: #DFE0E6 ;
+    }
+  }
+
+  &:not(.p-disabled).p-focus,
+  &:not(.p-disabled).p-focus:hover,
+  &:focus {
+    outline: #DFE0E6 ;
+    border-color: #DFE0E6 ;
+  }
+}
+.p-floatlabel:has(input:focus) label,
+.p-floatlabel:has(input:-webkit-autofill) label,
+.p-floatlabel:has(textarea:focus) label,
+.p-floatlabel:has(.p-inputwrapper-focus) label {
+      color: #687078;
+
+}
+.p-inputtext:enabled:focus {
+  border-color: #DFE0E6 ;
+}
+
+.text-required {
+  color: red;
+}
+
+.p-error {
+  color: #dc2626;
+}
+
+.optional-label {
+  @apply text-[10px] text-gray-400;
+  margin-inline-start: 4px;
+}

package/src/lib/form-components/components/input/input.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { InputComponent } from './input.component';
+
+describe('InputComponent', () => {
+  let component: InputComponent;
+  let fixture: ComponentFixture<InputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InputComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,56 @@
+import { NgClass, NgStyle } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { InputText } from 'primeng/inputtext';
+import { Textarea } from 'primeng/textarea';
+import { ValidationErrorsPipe } from '../../@utils/validations/validation-message.pipe';
+import { BaseInputComponent } from '../base-input.component';
+import { IconField } from 'primeng/iconfield';
+import { InputIcon } from 'primeng/inputicon';
+@Component({
+  selector: 'stc-input',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    InputText,
+    Textarea,
+    ValidationErrorsPipe,
+    NgClass,
+    NgStyle,
+    TranslatePipe,
+    FloatLabelModule,
+    InputIcon,
+    IconField,
+  ],
+  templateUrl: './input.component.html',
+  styleUrl: './input.component.scss',
+})
+export class InputComponent extends BaseInputComponent {
+  @Input() type: 'text' | 'textarea' | 'withIcon' = 'text';
+  @Input() contentType: 'text' | 'email' | 'number' = 'text';
+  @Input() size: 'small' | 'large' = "small";
+  @Input() prefix: string;
+  @Input() rows = 2;
+  @Input() cols = 20;
+  @Input() autoResize = false;
+  @Input() basicInput!: boolean;
+  @Input() noStyle!: boolean;
+  @Input() canClear!: boolean;
+  @Input() hideOptionalLabel: boolean;
+  @Input() inputDirection: 'ltr' | 'rtl' | 'inherit' = 'inherit';
+  @Input() variant: 'in' | 'over' | 'on' = 'over';
+  @Input() defaultColor = '#DFE0E6'
+  @Input() iconClass?: string;
+  @Input() iconPosition: 'left' | 'right' = 'left';
+
+
+  constructor() {
+    super();
+  }
+
+  clearInput() {
+  this.control.reset();
+}
+}

package/src/lib/form-components/components/select/select.component.html

@@ -0,0 +1,123 @@
+<div class="field flex flex-col gap-2 my-3 relative">
+
+  @if(multiple) {
+   <p-floatLabel [variant]="variant">
+
+    <p-multiselect
+    [disabled]="disabled"
+    [filterBy]="filterBy"
+    [filter]="filter"
+    [formControl]="control"
+    [id]="inputId"
+    [name]="name"
+    [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid }"
+    [optionLabel]="optionLabel"
+    [optionValue]="optionValue"
+    [options]="options"
+    [showToggleAll]="false"
+    [placeholder]="placeholder"
+    [emptyMessage]="emptyMessage || ('shared.no_results_found'|translate)"
+    [readonly]="readonly"
+    [showClear]="showClear"
+    (onClear)="onMultiSelectClear()"
+    class="w-full"
+     [size]="size"
+    [selectedItemsLabel]="selectedItemsLabel || ('shared.Items_Selected'| translate: {count: '{0}'})"
+    [class]="
+        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'
+        "
+    (onChange)="onChange($event)"
+    [ngClass]="{ 'basic-style': basicInput }"
+     >
+
+      @if (selectAllLabel) {
+       <ng-template #filter>
+         <p-checkbox
+         binary="true"
+         [(ngModel)]="allSelectd"
+         (onChange)="toggleAll($event)"
+         inputId="toggleAll">
+         </p-checkbox>
+         <span>{{selectAllLabel}}</span>
+       </ng-template>
+      }
+
+      @if(optionTemplate){
+      <ng-template let-item #item>
+        <ng-container [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutlet]="optionTemplate" />
+      </ng-template>
+      }
+
+
+
+
+
+    </p-multiselect>
+    <label [for]="inputId">
+      {{ label }}
+      @if (required) {
+      <span [class.text-required]="required">*</span>
+      }
+    </label>
+
+  </p-floatLabel>
+
+  } @else {
+      <p-floatLabel [variant]="variant">
+    <p-select
+      [dataKey]="dataKey"
+      [checkmark]="checkmark"
+      [disabled]="disabled"
+      [editable]="editable"
+      [filterBy]="filterBy"
+      [filter]="filter"
+      [formControl]="control"
+      [id]="inputId"
+      [name]="name"
+      [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid }"
+      [emptyMessage]="emptyMessage || ('shared.no_results_found'|translate)"
+      [optionLabel]="optionLabel"
+      [optionValue]="optionValue"
+      [options]="options"
+      [placeholder]="placeholder"
+      [readonly]="readonly"
+      [showClear]="showClear"
+       [size]="size"
+      class="w-full"
+      [class]="
+        'w-full border border-[' + defaultColor + '] rounded-none focus:outline-[' + defaultColor + '] focus:border-[' + defaultColor + '] hover:border-[' + defaultColor + '] disabled:opacity-50'
+        "
+      (onChange)="onChange($event)"
+      [ngClass]="{ 'basic-style': basicInput }"
+    >
+
+      @if (optionTemplate) {
+        <ng-template let-item pTemplate="item">
+          <ng-container [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutlet]="optionTemplate" />
+        </ng-template>
+      }
+      @if (selectedItemTemplate) {
+        <ng-template let-item pTemplate="selectedItem">
+          <ng-container [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutlet]="selectedItemTemplate" />
+        </ng-template>
+      }
+    </p-select>
+    <label [for]="inputId">
+      {{ label }}
+      @if (required) {
+      <span [class.text-required]="required">*</span>
+      }
+    </label>
+  </p-floatLabel>
+  }
+
+  @if (hint) {
+  <small class="p-mt-1">{{ hint }}</small>
+  } @if (isInvalid && (control.dirty || control.touched)) {
+  <small class="p-error">
+    @for (error of control.errors | validationErrors; track error) {
+    {{ error }}<br />
+    }
+  </small>
+  }
+</div>