@corp-products/ui-components 3.5.9 → 3.6.1

package/src/lib/dynamic-form/dynamic-form.component.html

@@ -0,0 +1,84 @@
+<form [formGroup]="formGroup" class="dynamic-form">
+  <div class="grid grid-cols-12 gap-x-2">
+    @for (inputName of inputsNames; track $index) {
+    <div [ngClass]="inputsMap[inputName].rowSize">
+      @switch (inputsMap[inputName].fieldType) {
+      @case (fieldType.HIJRI_DATE_PICKER) {
+         <app-dual-calendar [control]="getFormControl(inputName, formGroup)"  ></app-dual-calendar>
+      }
+
+      @case (fieldType.DATE_PICKER) {
+      <stc-date-picker [minDate]="inputsMap[inputName]?.dateRange?.min" [maxDate]="inputsMap[inputName]?.dateRange?.max"
+        [id]="inputsMap[inputName].inputId" [control]="getFormControl(inputName, formGroup)" [name]="inputName"
+        [label]="inputsMap[inputName].label" [placeholder]="inputsMap[inputName].placeholder || ''"
+        [hint]="inputsMap[inputName].hint"
+        [readonly]="inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false"
+        [disabled]="inputsMap[inputName].disabled || false" [variant]="inputsMap[inputName].variant || 'over'"
+        [showIcon]="inputsMap[inputName].showIcon !== false" [isTimeOnly]="inputsMap[inputName].isTimeOnly || false" />
+      }
+      @case (fieldType.SELECT_BUTTON) {
+      <stc-select-button [control]="getFormControl(inputName, formGroup)" [id]="inputsMap[inputName].inputId"
+        [name]="inputName" [label]="inputsMap[inputName].label"
+        [options]="inputsMap[inputName].selectButtonOptions || []"
+        (onChange)="selectButtonChange.emit({ name: inputName, value: $event })" />
+      }
+      @case (fieldType.INPUT) {
+      <stc-input [control]="getFormControl(inputName, formGroup)" [id]="inputsMap[inputName].inputId" [name]="inputName"
+        [label]="inputsMap[inputName].label" [placeholder]="inputsMap[inputName].placeholder || ''"
+        [hint]="inputsMap[inputName].hint"
+        [readonly]="inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false"
+        [disabled]="inputsMap[inputName].disabled || false" [type]="inputsMap[inputName].inputType || 'text'"
+        [contentType]="inputsMap[inputName].contentType || 'text'" [rows]="inputsMap[inputName].rows || 2"
+        [cols]="inputsMap[inputName].cols || 20" [autoResize]="inputsMap[inputName].autoResize ?? false"
+        [prefix]="inputsMap[inputName].prefix || ''" [size]="inputsMap[inputName].size || 'small'"
+        [variant]="inputsMap[inputName].variant || 'over'">
+        @if(inputsMap[inputName].maxLength){
+        <span class="text-xs text-gray-700">
+          {{ (getFormControl(inputName, formGroup).value?.length || 0) }}
+          <span> / {{ inputsMap[inputName].maxLength}}</span>
+        </span>
+        }
+      </stc-input>
+      }
+      @case (fieldType.SELECT) {
+      <stc-select [control]="getFormControl(inputName, formGroup)" [id]="inputsMap[inputName].inputId"
+        [name]="inputName" [label]="inputsMap[inputName].label" [placeholder]="inputsMap[inputName].placeholder || ''"
+        [hint]="inputsMap[inputName].hint"
+        [readonly]="inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false"
+        [disabled]="inputsMap[inputName].disabled || false" [options]="inputsMap[inputName].selectOptions || []"
+        [optionLabel]="inputsMap[inputName].optionLabel || 'label'" [filter]="inputsMap[inputName].filter || false"
+        [multiple]="inputsMap[inputName].multiple || false" [showClear]="inputsMap[inputName].showClear || false"
+        [checkmark]="inputsMap[inputName].checkmark ?? true" [filterBy]="inputsMap[inputName].filterBy || ''"
+        [selectedItemsLabel]="inputsMap[inputName].selectedItemsLabel || ''"
+        [size]="inputsMap[inputName].size || 'small'" [variant]="inputsMap[inputName].variant || 'over'"
+        (change)="selectChange.emit({ name: inputName, event: $event })"/>
+      }
+      @case (fieldType.SWITCH) {
+      <stc-switch [label]="inputsMap[inputName].label" [key]="inputName"
+        [checked]="getFormControl(inputName, formGroup).value"
+        (onChange)="getFormControl(inputName, formGroup).setValue(typeof $event === 'string' ? ($event === 'true') : $event); switchChange.emit({ name: inputName, value: (typeof $event === 'string' ? ($event === 'true') : $event) })" />
+      }
+      @case (fieldType.AUTO_COMPLETE) {
+      <stc-auto-complete [control]="getFormControl(inputName, formGroup)" [id]="inputsMap[inputName].inputId"
+        [name]="inputName" [label]="inputsMap[inputName].label" [placeholder]="inputsMap[inputName].placeholder || ''"
+        [hint]="inputsMap[inputName].hint"
+        [readonly]="inputsMap[inputName].readonly || dynamicFormData.isReadOnlyForm || false"
+        [disabled]="inputsMap[inputName].disabled || false" [items]="inputsMap[inputName].autoCompleteItems || []"
+        [minLengthToSearch]="inputsMap[inputName].minLengthToSearch || 2" [delay]="inputsMap[inputName].delay || 300"
+        (onSearch)="autoCompleteSearch.emit({ name: inputName, query: $event })"
+        (selectOption)="autoCompleteSelect.emit({ name: inputName, event: $event })"
+        [variant]="inputsMap[inputName].variant || 'over'" />
+      }
+      }
+    </div>
+    }
+  </div>
+  <div class="col-span-12">
+    <small class="p-error text-red-700">
+      @for (error of formGroup.errors | validationErrors: dynamicFormData.formValidationErrorsKeys;
+      track error) {
+      {{ error }}
+      }
+    </small>
+  </div>
+</form>

package/src/lib/dynamic-form/dynamic-form.component.spec.ts

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

package/src/lib/dynamic-form/dynamic-form.component.ts

@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter,  Input, OnInit, Output } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  AutoCompleteComponent,
+  DatePickerComponent,
+  FormUtils,
+  InputComponent,
+  SelectButtonComponent,
+  SelectComponent,
+  SwitchComponent,
+  ValidationErrorsPipe,
+} from '../form-components';
+import { DynamicFormData, FormFieldTypeEnum, InputsMap } from './dynamic-form.interface';
+import { DualCalendarComponent } from './../dual-calender/dual-calendar.component';
+
+@Component({
+  selector: 'app-dynamic-form',
+  standalone: true,
+  imports: [
+  CommonModule,
+    ReactiveFormsModule,
+    DatePickerComponent,
+    ValidationErrorsPipe,
+    TranslateModule,
+    SelectButtonComponent,
+    DualCalendarComponent,
+    InputComponent,
+    SelectComponent,
+    AutoCompleteComponent,
+    SwitchComponent,
+  ],
+  templateUrl: './dynamic-form.component.html',
+  styleUrl: './dynamic-form.component.scss',
+})
+export class DynamicFormComponent implements OnInit {
+  @Input({ required: true }) dynamicFormData: DynamicFormData;
+  // Generic field change outputs (optional for consumers)
+  @Output() selectButtonChange = new EventEmitter<{ name: string; value: any }>();
+  @Output() selectChange = new EventEmitter<{ name: string; event: any }>();
+  @Output() switchChange = new EventEmitter<{ name: string; value: boolean }>();
+  @Output() autoCompleteSearch = new EventEmitter<{ name: string; query: string }>();
+  @Output() autoCompleteSelect = new EventEmitter<{ name: string; event: any }>();
+
+  inputsNames: string[] = [];
+  formGroup: FormGroup;
+  inputsMap: InputsMap;
+  readonly fieldType = FormFieldTypeEnum;
+  getFormControl = FormUtils.getFormControl;
+
+  ngOnInit(): void {
+    this.formGroup = this.dynamicFormData?.formGroup as FormGroup;
+    this.inputsMap = this.dynamicFormData?.inputsMap as InputsMap;
+    this.inputsNames = Object.keys(this.inputsMap || {});
+  }
+
+}

package/src/lib/dynamic-form/dynamic-form.interface.ts

@@ -0,0 +1,96 @@
+import { FormGroup } from '@angular/forms';
+import { LabelValue } from '../form-components';
+
+export type InputType = 'text' | 'textarea';
+export type InputContentType = 'text' | 'email' | 'number';
+
+export interface Dropdown<T = unknown> {
+  id?: string;
+  keyValue: T;
+  label: string;
+  labelAr?: string;
+  labelEn?: string;
+  icon?: string;
+  hidden?: boolean;
+  disabled?: boolean;
+}
+
+export interface InputsMapData {
+  // General props
+  label: string;
+  rowSize?: string;
+  fieldType: FormFieldTypeEnum;
+  inputId?: string;
+  placeholder?: string;
+  hint?: string;
+  readonly?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  required?: boolean;
+  maxLength?: number;
+  minlength?: number;
+  // Date
+  dateRange?: DateRangeInterface;
+  isTimeOnly?: boolean;
+  showIcon?: boolean;
+
+  //select button
+  selectButtonOptions?: LabelValue<any>[];
+
+  // Input (text/textarea)
+  inputType?: InputType;
+  contentType?: InputContentType;
+  rows?: number;
+  cols?: number;
+  autoResize?: boolean;
+  prefix?: string;
+  size?: 'small' | 'large';
+  variant?: 'in' | 'over' | 'on';
+
+  // Select dropdown
+  selectOptions?: unknown[]; // Array of objects or primitives
+  optionLabel?: string; // property name to display when options are objects
+  filter?: boolean;
+  multiple?: boolean;
+  showClear?: boolean;
+  checkmark?: boolean;
+  filterBy?: string;
+  selectedItemsLabel?: string;
+
+  // Auto-complete
+  autoCompleteItems?: unknown[];
+  minLengthToSearch?: number;
+  delay?: number;
+}
+
+export interface InputsMap {
+  [key: string]: InputsMapData;
+}
+
+export interface DynamicFormData {
+  isActive?: boolean;
+  formGroup: FormGroup | null;
+  inputsMap: InputsMap | null;
+  title?: string;
+  isReadOnlyForm?: boolean;
+  formValidationErrorsKeys?: string[];
+}
+
+export interface DateRangeInterface {
+  min?: Date | null; // Static range, hard coded
+  max?: Date | null; // Static range, hard coded
+  notBeforeDateInput?: string; // For dynamic date range validation
+  notAfterDateInput?: string; // For dynamic date range validation
+  notBeforeOrSameDateInput?: string;
+  notAfterOrSameDateInput?: string;
+}
+
+export enum FormFieldTypeEnum {
+  DATE_PICKER = 'date-picker',
+  SELECT_BUTTON = 'select-button',
+  INPUT = 'input',
+  SELECT = 'select',
+  SWITCH = 'switch',
+  AUTO_COMPLETE = 'auto-complete',
+  HIJRI_DATE_PICKER = 'hijri-date'
+}

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.html

@@ -0,0 +1,32 @@
+<p-drawer
+  [(visible)]="show"
+  [position]="position"
+  appendTo="body"
+  [closable]="closable"
+  [closeOnEscape]="closeOnEscape"
+  [dismissible]="dismissible"
+  (onHide)="handleClose()"
+  [position]="'left'"
+  [styleClass]="'p-drawer-' + sidebarSize + ' custom-content bg-white ' + styleClass">
+  <ng-template pTemplate="header">
+    <p class="truncate" [pTooltip]="title">{{ title }}</p>
+  </ng-template>
+  <ng-template pTemplate="content">
+    <ng-template #contentContainer></ng-template>
+  </ng-template>
+  <ng-template pTemplate="footer">
+    <div class="flex gap-4 mt-4">
+      <div class="flex-auto">
+        <app-button (click)="handleSubmit()"
+          [icon]="actions?.save?.icon"
+          [iconPos]="actions?.save?.iconPos || 'right'"
+          [styleClass]="(actions?.save?.style || 'danger') + ' w-full'"
+          [label]="actions?.save?.title || ('actions.submit' | translate)"
+          [variant]="actions?.save?.variant"
+          />
+      </div>
+      <app-button (click)="handleClose()" severity="danger" variant="outlined"
+        [label]="actions?.cancel?.title || ('actions.cancel' | translate)" />
+    </div>
+  </ng-template>
+</p-drawer>

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.scss

@@ -0,0 +1,3 @@
+.flex-auto {
+  flex: 1 1 auto;
+}

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.ts

@@ -0,0 +1,82 @@
+import { AppButtonComponent } from './../app-button/app-button.component';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CommonModule } from '@angular/common';
+import {
+  AfterViewInit,
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+  Type,
+  ViewChild,
+  ViewContainerRef
+} from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { DrawerModule } from 'primeng/drawer';
+import { TooltipModule } from "primeng/tooltip";
+import { SidebarV2Actions } from './dynamic-sidebar.config';
+
+@Component({
+  selector: "app-dynamic-sidebar",
+  templateUrl: "./dynamic-sidebar.component.html",
+  styleUrls: ["./dynamic-sidebar.component.scss"],
+  standalone: true,
+  imports: [CommonModule, TranslatePipe, DrawerModule, TooltipModule, AppButtonComponent],
+})
+export class DynamicSidebarComponent implements AfterViewInit, OnDestroy {
+
+  @Input() component!: Type<any>;
+  @Input() data?: any;
+  @Input() title = '';
+  @Input() actions?: SidebarV2Actions;
+  @Input() sidebarSize: 'sm' | 'md' | 'lg' = 'md';
+  @Input() closable = true;
+  @Input() closeOnEscape = true;
+  @Input() dismissible = true;
+  @Input() position: 'left' | 'right' = 'left';
+  @Input() styleClass = '';
+  @Input() disabled = false;
+
+  @Output() closed = new EventEmitter();
+
+  @ViewChild('contentContainer', { read: ViewContainerRef })
+  private contentContainer!: ViewContainerRef;
+
+  private contentRef: any;
+
+  show = true;
+
+  ngAfterViewInit() {
+    this.renderContent();
+  }
+
+  private renderContent() {
+    if (!this.component) return;
+    this.contentContainer.clear();
+    this.contentRef = this.contentContainer.createComponent(this.component);
+    if (this.data) Object.assign(this.contentRef.instance, this.data);
+  }
+
+  handleClose() {
+    if(this.contentRef.instance.close) this.contentRef.instance.close();
+    this.closed.emit(null);
+    this.destroy();
+  }
+
+  handleSubmit() {
+    if(this.data.form) {
+      this.data.form.markAllAsTouched();
+      if(this.data.form.invalid) return;
+    }
+    if(this.contentRef.instance.submit) this.contentRef.instance.submit();
+  }
+
+  private destroy() {
+    this.contentRef?.destroy();
+  }
+
+  ngOnDestroy() {
+    this.destroy();
+  }
+}

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.config.ts

@@ -0,0 +1,31 @@
+import { Type, ViewContainerRef } from "@angular/core";
+import { AppButtonIconPos, AppButtonSeverity, AppButtonSize, AppButtonVariant } from "../app-button";
+
+export interface DynamicSidebarV2Actions {
+  submit: () => void;
+  close: () => void;
+}
+export interface DynamicSidebarV2Config<T = any> {
+  title?: string;
+  component: Type<T>;
+  data?: Partial<T>;
+  size?: 'sm' | 'md' | 'lg';
+  position?: 'left' | 'right';
+  styleClass?: string;
+  viewContainerRef?: ViewContainerRef;
+  actions?: SidebarV2Actions
+}
+
+export interface SidebarActionV2Config {
+  title?: string;
+  icon?: string;
+  size?: AppButtonSize;
+  style?: AppButtonSeverity;
+  iconPos?: AppButtonIconPos;
+  variant?: AppButtonVariant;
+}
+
+export interface SidebarV2Actions {
+  cancel?: SidebarActionV2Config;
+  save?: SidebarActionV2Config;
+}

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.service.ts

@@ -0,0 +1,41 @@
+import { ApplicationRef, ComponentRef, EnvironmentInjector, Injectable, Injector, createComponent, inject } from '@angular/core';
+import { DynamicSidebarComponent } from './dynamic-sidebar.component';
+import { DynamicSidebarV2Config } from './dynamic-sidebar.config';
+
+@Injectable({ providedIn: 'root' })
+export class DynamicSidebarV2Service {
+  private sidebarRef?: ComponentRef<DynamicSidebarComponent>;
+  private readonly appRef = inject(ApplicationRef);
+  private readonly injector = inject(Injector);
+  private readonly envInjector = inject(EnvironmentInjector);
+
+  open<T>(options: DynamicSidebarV2Config<T>) {
+    this.close();
+
+    this.sidebarRef = createComponent(DynamicSidebarComponent, {
+      environmentInjector: this.envInjector,
+      elementInjector: this.injector,
+    });
+
+    const instance = this.sidebarRef.instance;
+    instance.title = options.title ?? '';
+    instance.sidebarSize = options.size ?? 'md';
+    instance.position = options.position ?? 'left';
+    instance.styleClass = options.styleClass ?? '';
+    instance.component = options.component;
+    instance.data = options.data ?? {};
+    instance.actions = options.actions;
+    instance.closed.subscribe(() => this.close());
+
+    this.appRef.attachView(this.sidebarRef.hostView);
+    const domElem = (this.sidebarRef.hostView as any).rootNodes[0] as HTMLElement;
+    document.body.appendChild(domElem);
+  }
+
+  close() {
+    if (this.sidebarRef) {
+      this.sidebarRef.destroy();
+      this.sidebarRef = undefined;
+    }
+  }
+}

package/src/lib/form-components/@utils/form-utils.ts

@@ -0,0 +1,12 @@
+import {FormControl, FormGroup} from "@angular/forms";
+
+export class FormUtils {
+  static getFormControl(controlName: string, form: FormGroup): FormControl {
+    if (!form) throw new Error(`Form is not initialized.`);
+    const formControl = form.get(controlName) as FormControl;
+
+    if (!formControl) throw new Error(`There's no form control with given name. '${controlName}'`);
+
+    return formControl;
+  }
+}

package/src/lib/form-components/@utils/validations/error-keys.enum.ts

@@ -0,0 +1,25 @@
+export enum BasicErrorKeysEnum {
+  required = 'REQUIRED',
+  email = 'EMAIL',
+  pattern = 'PATTERN',
+  invalidArFormat = 'INVALID_AR_FORMAT',
+  invalidLink = 'INVALID_LINK',
+  endDateBeforeStartDate = 'END_DATE_BEFORE_START_DATE',
+  startDateEqualsEndDate = 'START_DATE_EQUALS_END_DATE',
+  endTimeBeforeStartTime = 'END_TIME_BEFORE_START_TIME',
+  startTimeEqualsEndTime = 'START_TIME_EQUALS_END_TIME',
+  integer = 'INTEGER',
+  positiveNumber = 'POSITIVE_NUMBER',
+  fileSelected = 'FILE_SELECTED',
+  default = 'DEFAULT',
+  numbersOnly = 'NUMBERS_ONLY',
+}
+export enum ErrorsWithValuesKeysEnum {
+  minlength = 'MIN_LENGTH',
+  maxlength = 'MAX_LENGTH',
+  min = 'MIN',
+  max = 'MAX',
+  maxSize = 'MAX_SIZE',
+  maxFiles = 'MAX_FILES',
+  allowedTypes = 'ALLOWED_TYPES',
+}

package/src/lib/form-components/@utils/validations/form-validation.service.ts

@@ -0,0 +1,68 @@
+import { inject, Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { InterpolationParameters } from '@ngx-translate/core';
+import { BasicErrorKeysEnum, ErrorsWithValuesKeysEnum } from './error-keys.enum';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FormValidationService {
+  private translate = inject(TranslateService);
+
+  private getTranslation(key: string, interpolateParams?: InterpolationParameters): string {
+    return this.translate.instant(`VALIDATION.${key}`, interpolateParams);
+  }
+
+  getErrorMessage(errorKey: string, errorValue: any): string {
+    if (this.isBasicErrorKey(errorKey)) {
+      return this.getTranslation(BasicErrorKeysEnum[errorKey as keyof typeof BasicErrorKeysEnum]);
+    }
+
+    if (this.isErrorWithValueKey(errorKey)) {
+      return this.getErrorWithValueMessage(
+        errorKey as keyof typeof ErrorsWithValuesKeysEnum,
+        errorValue
+      );
+    }
+
+    return this.getTranslation(BasicErrorKeysEnum.default);
+  }
+
+  // Basic error keys are the keys that don't have any values to interpolate. like required, email, etc.
+  private isBasicErrorKey(key: string): key is keyof typeof BasicErrorKeysEnum {
+    return Object.keys(BasicErrorKeysEnum).includes(key as BasicErrorKeysEnum);
+  }
+
+  // Error keys with values are the keys that have values to interpolate. like minlength, maxlength, etc.
+  private isErrorWithValueKey(key: string): key is keyof typeof ErrorsWithValuesKeysEnum {
+    return Object.keys(ErrorsWithValuesKeysEnum).includes(key as ErrorsWithValuesKeysEnum);
+  }
+
+  private getErrorWithValueMessage(
+    errorKey: keyof typeof ErrorsWithValuesKeysEnum,
+    errorValue: any
+  ): string {
+    const messages: Record<keyof typeof ErrorsWithValuesKeysEnum, (value: any) => string> = {
+      minlength: (val) =>
+        this.getTranslation(ErrorsWithValuesKeysEnum.minlength, {
+          requiredLength: val?.requiredLength,
+          actualLength: val?.actualLength,
+        }),
+      maxlength: (val) =>
+        this.getTranslation(ErrorsWithValuesKeysEnum.maxlength, {
+          requiredLength: val?.requiredLength,
+          actualLength: val?.actualLength,
+        }),
+      min: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.min, { min: val?.min }),
+      max: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.max, { max: val?.max }),
+      maxSize: (val) =>
+        this.getTranslation(ErrorsWithValuesKeysEnum.maxSize, { size: val?.requiredLength }),
+      maxFiles: (val) =>
+        this.getTranslation(ErrorsWithValuesKeysEnum.maxFiles, { size: val?.requiredLength }),
+      allowedTypes: (val) =>
+        this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(', ') }),
+    };
+
+    return messages[errorKey](errorValue);
+  }
+}

package/src/lib/form-components/@utils/validations/index.ts

@@ -0,0 +1,4 @@
+export * from './error-keys.enum';
+export * from './validation-message.pipe';
+export * from './form-validation.service';
+export * from './numbers-only.validator';

package/src/lib/form-components/@utils/validations/numbers-only.validator.ts

@@ -0,0 +1,10 @@
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+
+export function numbersOnlyValidator(control: AbstractControl): ValidationErrors | null {
+  const value = control.value;
+  if (value === null || value === undefined || value === '') {
+    return null;
+  }
+  const isNumbersOnly = /^[0-9]+$/.test(value);
+  return isNumbersOnly ? null : { numbersOnly: true };
+}

package/src/lib/form-components/@utils/validations/validation-message.pipe.ts

@@ -0,0 +1,24 @@
+import { inject, Pipe, PipeTransform } from "@angular/core";
+import { ValidationErrors } from "@angular/forms";
+import { FormValidationService } from "./form-validation.service";
+
+@Pipe({
+  name: "validationErrors",
+  standalone: true,
+  pure: true
+})
+export class ValidationErrorsPipe implements PipeTransform {
+  private formValidationService = inject(FormValidationService);
+
+  // allowed keys here to handle errors in case of cross-validators like startDate and endDate validators,
+  // we pass this custom key to handle the error messages only for the allowed keys
+  transform(errors: ValidationErrors | null, allowedKeys?: string[]): string[] {
+    if (!errors) return [];
+
+    return Object.keys(errors)
+      .filter((errorKey) => !allowedKeys || allowedKeys.includes(errorKey)) // Filter errors if allowedKeys are provided
+      .map((errorKey) => {
+        return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
+      });
+  }
+}

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

@@ -0,0 +1,35 @@
+<div class="field flex flex-col gap-2 my-3 relative">
+  @if (!required) {
+  <span class="absolute top-[6px] left-0 text-[10px] text-gray-400">{{'forms.config.optional' | translate}}</span>
+  }
+  <p-floatlabel [variant]="variant" class="autoComplete">
+    <p-auto-complete (keydown)="onKeyDown($event)"  (onBlur)="onBlur($event)" (completeMethod)="search($event)" (onSelect)="onSelect($event)" [delay]="delay"
+      [disabled]="disabled" [formControl]="control" [id]="inputId" fluid [typeahead]="typeAhead"
+      [inputStyleClass]="'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')"
+      [minLength]="minLengthToSearch" [name]="name" [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid}"
+      [placeholder]="placeholder" [styleClass]="'w-full'" multiple [suggestions]="items">
+      <ng-template let-item pTemplate="item">
+        @if (selectedItemTemplate) {
+        <ng-container [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutlet]="selectedItemTemplate" />
+        }
+      </ng-template>
+    </p-auto-complete>
+    <label [for]="inputId">
+      {{ label }}
+      @if (required) {
+      <span [class.text-required]="isInvalid">*</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/auto-complete/auto-complete.component.scss

@@ -0,0 +1,12 @@
+.text-required {
+  color: red;
+}
+
+.p-error {
+  color: #dc2626;
+}
+.autoComplete{
+ .p-floatlabel-in {
+    height: auto !important;
+ }
+}