@corp-products/ui-components 0.0.1

package/src/lib/confirmation-dialog/confirmation-dialog.component.html

@@ -0,0 +1,54 @@
+@if (dynamicDialogConfig.data) {
+  <div>
+    <div class="bg-gray-150 p-4 flex items-center">
+      <div class="flex-grow flex gap-2">
+        @if (dynamicDialogConfig.data.headerIcon) {
+          <i [class]="dynamicDialogConfig.data.headerIcon"></i>
+        }
+
+        <h3 class="m-0 font-bold text-[16px]">
+          {{ dynamicDialogConfig.data.header }}
+        </h3>
+      </div>
+
+      <app-button (click)="close()" icon="font-icon-close" [style]="'secondary'" variant="text"/>
+    </div>
+
+    @if (dynamicDialogConfig.data) {
+      <div class="p-4">
+        @if (dynamicDialogConfig.data.dialogIcon) {
+          <em [class]="dynamicDialogConfig.data.dialogIcon"></em>
+        }
+        <div>
+          {{ dynamicDialogConfig.data.message }}
+        </div>
+        @if (dynamicDialogConfig.data.hint) {
+          <div class="font-bold text-[14px] mt-2">
+            {{ dynamicDialogConfig.data.hint }}
+          </div>
+        }
+      </div>
+    }
+
+    @if (dynamicDialogConfig.data.inputForm) {
+      <app-dynamic-form [dynamicFormData]="dialogFormData"></app-dynamic-form>
+    }
+
+    <div class="p-4 flex gap-3">
+      <app-button
+        [title]="dynamicDialogConfig.data?.confirmLabel || ('actions.confirm' | translate)" class="w-[50%]"
+        [disabled]="!!(dialogFormData && dialogFormData.formGroup?.invalid)"
+        [icon]="dynamicDialogConfig.data.confirmBtnIcon || ''"
+        [iconPos]="dynamicDialogConfig.data.confirmBtnPosition || 'left'"
+        [style]="dynamicDialogConfig.data.confirmBtnStyle ||'primary'"
+        (click)="submit()"/>
+
+      <app-button
+        [title]="dynamicDialogConfig.data?.closeLabel ||  ('actions.cancel' | translate)"
+        class="w-[50%]"
+        [style]="'secondary'"
+        [variant]="'outlined'"
+        (click)="close()"/>
+    </div>
+  </div>
+}

package/src/lib/confirmation-dialog/confirmation-dialog.component.spec.ts

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

package/src/lib/confirmation-dialog/confirmation-dialog.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnDestroy, OnInit, inject } from "@angular/core";
+import { NavigationStart, Router } from "@angular/router";
+import { AvatarModule } from "primeng/avatar";
+import { filter, Subscription } from "rxjs";
+import { AppButtonComponent } from "../app-button/app-button.component";
+import { DialogService, DynamicDialog, DynamicDialogConfig, DynamicDialogRef } from "primeng/dynamicdialog";
+import { DynamicFormComponent } from "../dynamic-form/dynamic-form.component";
+import { DynamicFormData } from "../dynamic-form/dynamic-form.interface";
+import {TranslatePipe} from "@ngx-translate/core";
+
+@Component({
+  selector: "app-confirm-dialog",
+  templateUrl: "./confirmation-dialog.component.html",
+  styleUrls: ["./confirmation-dialog.component.scss"],
+  standalone: true,
+  imports: [AppButtonComponent, AvatarModule, DynamicDialog, DynamicFormComponent, TranslatePipe],
+  providers: [DialogService]
+})
+export class ConfirmationDialogComponent implements OnInit, OnDestroy {
+  router = inject(Router);
+  dialogService = inject(DialogService);
+  dynamicDialogConfig = inject(DynamicDialogConfig);
+  private readonly _ref = inject(DynamicDialogRef);
+  private readonly _subscription = new Subscription();
+  dialogFormData: DynamicFormData;
+
+  ngOnInit() {
+    // closing when navigating back from the browser
+    this._subscription.add(
+      this.router.events.pipe(filter((event) => event instanceof NavigationStart)).subscribe(() => {
+        if (this.dynamicDialogConfig) {
+          this._ref.close();
+        }
+      })
+    );
+    this.dialogFormData = this.dynamicDialogConfig.data?.inputForm;
+  }
+
+  ngOnDestroy(): void {
+    this._subscription.unsubscribe();
+  }
+
+  submit() {
+    const submitData = { submitted: true, data: this.dialogFormData?.formGroup?.value };
+    this._ref.close(this.dynamicDialogConfig.data.inputForm ? submitData : true);
+  }
+
+  close() {
+    this._ref.close();
+  }
+}

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

@@ -0,0 +1,39 @@
+<div class="border-t mx-4 py-2">
+  <form [formGroup]="formGroup">
+    <div class="grid grid-cols-12 gap-x-2">
+      @for (inputName of inputsNames; track $index) {
+        <div
+          [ngClass]="inputsMap[inputName].rowSize === 'half' ? 'col-span-6 md:col-span-6': 'col-span-12 md:col-span-12'">
+          @switch (inputsMap[inputName].fieldType) {
+            @case (fieldType.DATE_PICKER) {
+              <stc-date-picker
+                [minDate]="inputsMap[inputName]?.dateRange?.min"
+                [id]="inputsMap[inputName].inputId"
+                [control]="getFormControl(inputName, formGroup)"
+                [name]="inputName"
+                [label]="inputsMap[inputName].label"
+                [showIcon]="inputsMap[inputName].showIcon || true"
+                [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 || []"/>
+            }
+          }
+        </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>
+</div>

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,29 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormGroup, ReactiveFormsModule } from "@angular/forms";
+import { DynamicFormData, FormFieldTypeEnum, InputsMap } from "./dynamic-form.interface";
+import {DatePickerComponent, FormUtils, SelectButtonComponent, ValidationErrorsPipe} from "../form-components";
+import { TranslateModule } from "@ngx-translate/core";
+
+@Component({
+  selector: "app-dynamic-form",
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, DatePickerComponent, ValidationErrorsPipe, TranslateModule, SelectButtonComponent],
+  templateUrl: "./dynamic-form.component.html",
+  styleUrl: "./dynamic-form.component.scss"
+})
+export class DynamicFormComponent implements OnInit {
+  @Input({ required: true }) dynamicFormData: DynamicFormData;
+  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,56 @@
+import {FormGroup} from "@angular/forms";
+import {LabelValue} from "../form-components";
+
+export type InputType = "text" | "textarea";
+export type InputContentType = "text" | "email" | "password" | "number";
+
+export interface Dropdown<T = unknown> {
+  id?: string;
+  keyValue: T;
+  label: string;
+  hidden?: boolean;
+  disabled?: boolean;
+}
+
+export interface InputsMapData {
+  // General props
+  label: string;
+  rowSize?: "half" | "full";
+  fieldType: FormFieldTypeEnum;
+  inputId?: string;
+
+  // Date
+  dateRange?: DateRangeInterface;
+  isTimeOnly?: boolean;
+  showIcon?: boolean;
+
+  //select button
+  selectButtonOptions?: LabelValue<any>[];
+}
+
+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"
+}

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,24 @@
+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"
+}
+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,53 @@
+import { inject, Injectable } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
+import { InterpolationParameters } from "@ngx-translate/core/lib/translate.service";
+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,3 @@
+export * from "./error-keys.enum";
+export * from "./validation-message.pipe";
+export * from "./form-validation.service";

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,48 @@
+<div class="field flex flex-col gap-2 my-3 relative">
+  @if (label) {
+    <label [for]="inputId">
+      {{ label }}
+      @if (required) {
+        <span [class.text-red-700]="isInvalid">*</span>
+      }
+    </label>
+  }
+  @if (!required) {
+    <span class="absolute top-[6px] left-0 text-[10px] text-gray-400">{{'forms.config.optional' | translate}}</span>
+  }
+  <p-auto-complete
+    (completeMethod)="search($event)"
+    (onSelect)="onSelect($event)"
+    [delay]="delay"
+    [disabled]="disabled"
+    [formControl]="control"
+    [id]="inputId"
+    [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'"
+    [suggestions]="items">
+    <ng-template let-item pTemplate="item">
+      @if (selectedItemTemplate) {
+        <ng-container
+          [ngTemplateOutletContext]="{ $implicit: item }"
+          [ngTemplateOutlet]="selectedItemTemplate"
+        />
+      }
+    </ng-template>
+  </p-auto-complete>
+
+  @if (hint) {
+    <small class="p-mt-1">{{ hint }}</small>
+  }
+  @if (isInvalid && (control.dirty || control.touched)) {
+    <small class="p-error text-red-700">
+      @for (error of control.errors | validationErrors; track error) {
+        {{ error }}<br>
+      }
+    </small>
+  }
+
+</div>

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,48 @@
+import { JsonPipe, NgClass, NgIf, NgTemplateOutlet } from "@angular/common";
+import { Component, EventEmitter, Input, Output, TemplateRef } from "@angular/core";
+import { ReactiveFormsModule } from "@angular/forms";
+import { ValidationErrorsPipe } from "../../@utils/validations/validation-message.pipe";
+import { PrimeTemplate } from "primeng/api";
+import { AutoComplete, AutoCompleteCompleteEvent, AutoCompleteSelectEvent } from "primeng/autocomplete";
+import { BaseInputComponent } from "../base-input.component";
+import {TranslatePipe} from "@ngx-translate/core";
+
+@Component({
+  selector: "stc-auto-complete",
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    AutoComplete,
+    PrimeTemplate,
+    NgIf,
+    NgTemplateOutlet,
+    NgClass,
+    JsonPipe,
+    ValidationErrorsPipe,
+    TranslatePipe
+  ],
+  templateUrl: "./auto-complete.component.html",
+  styleUrl: "./auto-complete.component.scss"
+})
+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;
+
+  constructor() {
+    super();
+  }
+
+  search(event: AutoCompleteCompleteEvent) {
+    this.onSearch.emit(event.query);
+  }
+
+  onSelect(event: AutoCompleteSelectEvent) {
+    this.selectOption.emit(event);
+  }
+}

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

@@ -0,0 +1,41 @@
+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() {
+    this.inputId = `input-${this.name + "-" + Math.random().toString(36).substring(7)}`;
+    this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((v) => {
+      if (v) {
+        this.control.markAsTouched();
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}

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

@@ -0,0 +1,53 @@
+<div class="field flex flex-col gap-2 my-3 relative"  >
+  @if (label) {
+  <label [for]="inputId">
+    {{ label }}
+    @if (required) {
+    <span [class.text-red-700]="isInvalid">*</span>
+    }
+  </label>
+  }
+  @if (!required) {
+  <span class="absolute top-[6px] left-0 text-[10px] text-gray-400">{{'forms.config.optional' | translate}}</span>
+  }
+  <p-datepicker
+    [selectionMode]="selectionMode"
+    [disabled]="disabled"
+    [formControl]="control"
+    [iconDisplay]="'input'"
+    [showClear]="showClear"
+    (onClear)="afterClearDate()"
+    [id]="inputId"
+    [inputStyleClass]="'reset-default-styles ' + (basicInput ? 'basic-style' : '')"
+    [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid }"
+    [placeholder]="placeholder"
+    [showIcon]="showIcon" [styleClass]="'w-full'"
+    appendTo="body"
+    [timeOnly]="isTimeOnly"
+    [hourFormat]="hourFormat"
+    [minDate]="minDate"
+    [maxDate]="maxDate">
+    @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>
+  @if (hint) {
+  <small class="p-mt-1">{{ hint }}</small>
+  }
+  @if (isInvalid && (control.dirty || control.touched)) {
+  <small class="p-error text-red-700">
+    @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,4 @@
+.p-datepicker-clear-icon {
+    @apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;
+}
+

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

@@ -0,0 +1,23 @@
+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();
+  });
+});