@codex-ts/core-lib 1.0.0

package/src/lib/components/formly/core-formly.module.ts

@@ -0,0 +1,34 @@
+import { NgModule } from '@angular/core';
+import { FormlyModule } from '@ngx-formly/core';
+import { TextInputType } from './types/text-input.type';
+import { SelectType } from './types/select.type';
+import { RadioType } from './types/radio.type';
+import { NumericInputType } from './types/numeric-input.type';
+import { MultiselectType } from './types/multiselect.type';
+import { DateType } from './types/date.type';
+import { CheckboxType } from './types/checkbox.type';
+import { TextareaType } from './types/textarea.type'; // Added import
+import { FormFieldWrapper } from './form-field.wrapper';
+import { FORMLY_TYPES, FORMLY_WRAPPERS } from './formly.constants'; // Added import
+
+@NgModule({
+  imports: [
+    FormlyModule.forRoot({
+      types: [
+        { name: FORMLY_TYPES.TEXT, component: TextInputType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
+        { name: FORMLY_TYPES.NUMBER, component: NumericInputType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
+        { name: FORMLY_TYPES.DATE, component: DateType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
+        { name: FORMLY_TYPES.CHECKBOX, component: CheckboxType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
+        { name: FORMLY_TYPES.RADIO, component: RadioType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
+        { name: FORMLY_TYPES.SELECT, component: SelectType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
+        { name: FORMLY_TYPES.MULTISELECT, component: MultiselectType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] },
+        { name: FORMLY_TYPES.TEXTAREA, component: TextareaType, wrappers: [FORMLY_WRAPPERS.FORM_FIELD] }, // Added textarea type
+      ],
+      wrappers: [
+        { name: FORMLY_WRAPPERS.FORM_FIELD, component: FormFieldWrapper }
+      ]
+    })
+  ],
+  exports: [FormlyModule]
+})
+export class CoreFormlyModule { }

package/src/lib/components/formly/field.interface.ts

@@ -0,0 +1,15 @@
+export interface FormlyFieldProps {
+  label?: string;         // Field label text
+  placeholder?: string;   // Placeholder text for input fields 
+  required?: boolean;     // Whether field is required
+  disabled?: boolean;     // Disabled state
+  description?: string;   // Help/description text
+  validation?: {
+    messages?: { [key: string]: string };
+    rules?: { [key: string]: any };
+  };
+  attributes?: { [key: string]: any };
+  appearance?: 'outlined' | 'filled';
+  size?: 'small' | 'normal' | 'large';
+  tooltip?: string;
+}

package/src/lib/components/formly/form-field.wrapper.ts

@@ -0,0 +1,94 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FieldWrapper, FormlyFieldConfig } from '@ngx-formly/core';
+import { TooltipModule } from 'primeng/tooltip';
+
+interface FormlyValidationMessage {
+  [key: string]: string;
+}
+
+interface FormlyFieldProps {
+  label?: string;
+  required?: boolean;
+  tooltip?: string;
+  description?: string;
+  validation?: {
+    messages?: FormlyValidationMessage;
+  };
+}
+
+@Component({
+  selector: 'formly-wrapper-form-field',
+  standalone: true,
+  imports: [CommonModule, TooltipModule],
+  template: `
+    <div class="field mb-4">
+      <label *ngIf="props.label" [for]="id" class="font-medium">
+        {{ props.label }}
+        <span class="required-star" *ngIf="props.required">*</span>
+        <i *ngIf="props.tooltip" 
+           class="pi pi-info-circle ml-2" 
+           [pTooltip]="props.tooltip">
+        </i>
+      </label>
+      
+      <div [class.p-input-error]="showError">
+        <ng-container #fieldComponent></ng-container>
+      </div>
+      
+      <small *ngIf="props.description" class="block mt-1">
+        {{ props.description }}
+      </small>
+      
+      <small *ngIf="showError" class="p-error block">
+        <i class="pi pi-exclamation-circle mr-2"></i>
+        {{ errorMessage }}
+      </small>
+    </div>
+  `,
+  styles: [`
+    :host ::ng-deep {
+      .required-star {
+        color: var(--red-500);
+        margin-left: 0.25rem;
+      }
+      
+      .p-input-error :where(input, .p-inputtext) {
+        border-color: var(--red-500);
+      }
+
+      .p-input-error :where(input:enabled:focus, .p-inputtext:enabled:focus) {
+        border-color: var(--red-500);
+        box-shadow: 0 0 0 1px var(--red-500);
+      }
+
+      .p-error {
+        color: var(--red-500);
+        margin-top: 0.5rem;
+      }
+
+      small {
+        color: var(--text-color-secondary);
+      }
+    }
+  `]
+})
+export class FormFieldWrapper extends FieldWrapper<FormlyFieldConfig<FormlyFieldProps>> {
+  get errorMessage(): string {
+    if (!this.field.formControl?.errors) {
+      return '';
+    }
+    
+    const firstErrorKey = Object.keys(this.field.formControl.errors)[0];
+    return this.props.validation?.messages?.[firstErrorKey] || 'This field is required';
+  }
+
+  override get showError(): boolean {
+    if (!this.field.formControl) {
+      return false;
+    }
+    
+    const { touched, dirty, invalid } = this.field.formControl;
+    return invalid && (touched || dirty);
+  }
+}

package/src/lib/components/formly/formly.constants.ts

@@ -0,0 +1,14 @@
+export const FORMLY_TYPES = {
+  TEXT: 'text',
+  NUMBER: 'number',
+  DATE: 'date',
+  CHECKBOX: 'checkbox',
+  RADIO: 'radio',
+  SELECT: 'select',
+  MULTISELECT: 'multiselect',
+  TEXTAREA: 'textarea'
+};
+
+export const FORMLY_WRAPPERS = {
+  FORM_FIELD: 'form-field'
+};

package/src/lib/components/formly/primeng-formly.module.ts

@@ -0,0 +1,77 @@
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FormlyModule } from '@ngx-formly/core';
+import { CommonModule } from '@angular/common';
+
+import { InputTextModule } from 'primeng/inputtext';
+import { DropdownModule } from 'primeng/dropdown';
+import { DatePickerModule } from 'primeng/datepicker';
+import { CheckboxModule } from 'primeng/checkbox';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { MultiSelectModule } from 'primeng/multiselect';
+
+import { FormFieldWrapper } from './form-field.wrapper';
+import { TextInputType } from './types/text-input.type';
+import { NumericInputType } from './types/numeric-input.type';
+import { CheckboxType } from './types/checkbox.type';
+import { DateType } from './types/date.type';
+import { RadioType } from './types/radio.type';
+import { SelectType } from './types/select.type';
+import { MultiselectType } from './types/multiselect.type';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        InputTextModule,
+        DropdownModule,
+        DatePickerModule,
+        CheckboxModule,
+        RadioButtonModule,
+        MultiSelectModule,
+        FormlyModule.forRoot({
+            wrappers: [
+                { name: 'form-field', component: FormFieldWrapper }
+            ],
+            types: [
+                {
+                    name: 'text-input',
+                    component: TextInputType,
+                    wrappers: ['form-field']
+                },
+                {
+                    name: 'numeric-input',
+                    component: NumericInputType,
+                    wrappers: ['form-field']
+                },
+                {
+                    name: 'checkbox',
+                    component: CheckboxType,
+                    wrappers: ['form-field']
+                },
+                {
+                    name: 'radio',
+                    component: RadioType,
+                    wrappers: ['form-field']
+                },
+                {
+                    name: 'date',
+                    component: DateType,
+                    wrappers: ['form-field']
+                },
+                {
+                    name: 'select',
+                    component: SelectType,
+                    wrappers: ['form-field']
+                },
+                {
+                    name: 'multiselect',
+                    component: MultiselectType,
+                    wrappers: ['form-field']
+                }
+            ]
+        })
+    ],
+    exports: [FormlyModule]
+})
+export class PrimeNGFormlyModule { }

package/src/lib/components/formly/types/checkbox.type.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType, FormlyModule } from '@ngx-formly/core';
+import { CheckboxModule } from 'primeng/checkbox';
+
+@Component({
+  selector: 'formly-field-checkbox',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormlyModule,
+    CheckboxModule
+  ],
+  template: `
+    <div class="checkbox-container">
+      <p-checkbox
+        [formControl]="$any(formControl)"
+        [formlyAttributes]="field"
+        [binary]="!props['options']"
+        [trueValue]="props['trueValue']"
+        [falseValue]="props['falseValue']">
+        {{props['checkboxLabel'] || ''}}
+      </p-checkbox>
+    </div>
+  `,
+  styles: [`
+    .checkbox-container {
+      display: flex;
+      align-items: center;
+      height: 40px;
+    }
+  `]
+})
+export class CheckboxType extends FieldType {
+  override defaultOptions = {
+    props: {
+      trueValue: true,
+      falseValue: false
+    }
+  };
+}

package/src/lib/components/formly/types/date.type.ts

@@ -0,0 +1,88 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType, FormlyModule } from '@ngx-formly/core';
+import { DatePickerModule } from 'primeng/datepicker';
+import { formatDate } from '@angular/common';
+
+@Component({
+  selector: 'formly-field-date',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormlyModule,
+    DatePickerModule
+  ],
+  template: `
+    <p-datepicker
+      [formControl]="$any(formControl)"
+      [formlyAttributes]="field"
+      [showIcon]="true"
+      [dateFormat]="props['dateFormat'] || 'dd-mm-yy'"
+      [showTime]="props['showTime'] || false"
+      [touchUI]="props['touchUI'] || false"
+      [placeholder]="props['placeholder'] || ''"
+      [minDate]="props['minDate']"
+      [maxDate]="props['maxDate']"
+      [showOnFocus]="false"
+      [todayButtonStyleClass]="'p-button-secondary'"
+      [clearButtonStyleClass]="'p-button-secondary'"
+      styleClass="w-full"
+      (onSelect)="onDateSelect($event)"
+      (onInput)="onDateInput($event)">
+    </p-datepicker>
+  `
+})
+export class DateType extends FieldType {
+  override defaultOptions = {
+    props: {
+      dateFormat: 'dd-mm-yy',
+      showTime: false,
+      touchUI: false,
+      placeholder: '',
+      showButtonBar: true,
+    }
+  };
+
+  onDateSelect(event: Date): void {
+    this.formatAndSetDate(event);
+  }
+
+  onDateInput(event: any): void {
+    const inputValue = event.target.value.trim();
+    if (this.isValidDateInput(inputValue, this.props['dateFormat'] || 'dd-mm-yy')) {
+      const parsedDate = this.parseDate(inputValue, this.props['dateFormat'] || 'dd-mm-yy');
+      if (parsedDate) {
+        this.formatAndSetDate(parsedDate);
+      }
+    } else {
+      this.formControl?.setErrors({ invalidDate: true });
+    }
+  }
+
+  private formatAndSetDate(date: Date): void {
+    if (this.formControl) {
+      const formattedDate = formatDate(date, 'dd-MM-yyyy', 'en-US');
+      this.formControl.setValue(formattedDate);
+    }
+  }
+
+  private parseDate(value: string, format: string): Date | null {
+    const parts = value.split(/[-/]/); // Split by common delimiters
+    if (parts.length === 3) {
+      const [day, month, year] = format === 'dd-mm-yy'
+        ? [parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10)]
+        : [parseInt(parts[1], 10), parseInt(parts[0], 10) - 1, parseInt(parts[2], 10)];
+      return new Date(year, month, day);
+    }
+    return null;
+  }
+
+  private isValidDateInput(value: string, format: string): boolean {
+    const dateRegex = format === 'dd-mm-yy'
+      ? /^\d{2}-\d{2}-\d{4}$/
+      : /^\d{2}\/\d{2}\/\d{4}$/;
+    return dateRegex.test(value);
+  }
+}

package/src/lib/components/formly/types/multiselect.type.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType, FormlyModule } from '@ngx-formly/core';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { Observable, isObservable, of } from 'rxjs';
+
+interface SelectOption {
+  value: any;
+  label: string;
+  [key: string]: any;
+}
+
+@Component({
+  selector: 'formly-field-multiselect',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormlyModule,
+    MultiSelectModule
+  ],
+  template: `
+    <ng-container *ngIf="options$ | async as options">
+      <p-multiSelect
+        [formControl]="$any(formControl)"
+        [formlyAttributes]="field"
+        [options]="options"
+        [optionLabel]="props['optionLabel'] || 'label'"
+        [optionValue]="props['optionValue'] || 'value'"
+        [placeholder]="props['placeholder'] || 'Select'"
+        [filter]="props['filter'] || true"
+        [filterBy]="props['filterBy'] || 'label'"
+        [maxSelectedLabels]="props['maxSelectedLabels'] || 2"
+        [showToggleAll]="props['showToggleAll'] || true"
+        [virtualScroll]="props['virtualScroll'] || false"
+        [display]="props['display'] || 'chip'"
+        styleClass="w-full">
+      </p-multiSelect>
+    </ng-container>
+  `
+})
+export class MultiselectType extends FieldType {
+  get options$(): Observable<SelectOption[]> {
+    const options = this.props['options'];
+    return isObservable(options) ? options : of(options || []);
+  }
+
+  override defaultOptions = {
+    props: {
+      options: [] as SelectOption[],
+      optionLabel: 'label',
+      optionValue: 'value',
+      placeholder: 'Select',
+      filter: false,
+      maxSelectedLabels: 3,
+      showToggleAll: true,
+      virtualScroll: false
+    }
+  };
+}

package/src/lib/components/formly/types/numeric-input.type.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType, FormlyModule } from '@ngx-formly/core';
+import { InputNumberModule } from 'primeng/inputnumber';
+
+@Component({
+  selector: 'formly-field-numeric-input',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormlyModule,
+    InputNumberModule
+  ],
+  template: `
+    <p-inputNumber
+      [formControl]="$any(formControl)"
+      [formlyAttributes]="field"
+      [placeholder]="props['placeholder'] || ''"
+      [min]="props['min'] || 0"
+      [max]="props['max']"
+      [minFractionDigits]="props['minFractionDigits'] || 0"
+      [maxFractionDigits]="props['maxFractionDigits'] || 0"
+      [prefix]="props['prefix'] || ''"
+      [suffix]="props['suffix'] || ''"
+      [useGrouping]="props['useGrouping'] ?? true"
+      [showButtons]="true"
+      class="w-full">
+    </p-inputNumber>
+  `
+})
+export class NumericInputType extends FieldType {
+  override defaultOptions = {
+    props: {
+      min: undefined,
+      max: undefined,
+      minFractionDigits: 0,
+      maxFractionDigits: 0,
+      prefix: '',
+      suffix: '',
+      useGrouping: true
+    }
+  };
+}

package/src/lib/components/formly/types/radio.type.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FormlyModule, FieldType } from '@ngx-formly/core';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { Observable, isObservable, of } from 'rxjs';
+
+interface RadioOption {
+  value: any;
+  label: string;
+}
+
+@Component({
+  selector: 'formly-field-radio',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormlyModule,
+    RadioButtonModule
+  ],
+  template: `
+    <div class="flex flex-column gap-1">
+      <ng-container *ngIf="options$ | async as options">
+        <div *ngFor="let option of options; let i = index" class="flex align-items-center gap-2">
+          <p-radioButton
+            [name]="field.name || ''"
+            [value]="option.value"
+            [formControl]="$any(formControl)"
+            [formlyAttributes]="field"
+            [size]="'small'"
+            [inputId]="field.key + '_' + i">
+          </p-radioButton>
+          <label [for]="field.key + '_' + i" class="p-radio-label cursor-pointer">
+            {{option.label}}
+          </label>
+        </div>
+      </ng-container>
+    </div>
+  `
+})
+export class RadioType extends FieldType {
+  get options$(): Observable<RadioOption[]> {
+    const options = this.props['options'];
+    return isObservable(options) ? options : of(options || []);
+  }
+}

package/src/lib/components/formly/types/select.type.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType, FormlyModule } from '@ngx-formly/core';
+import { SelectModule } from 'primeng/select';
+import { Observable, of, isObservable } from 'rxjs';
+
+interface SelectOption {
+  value: any;
+  label: string;
+  [key: string]: any; // For additional properties
+}
+
+@Component({
+  selector: 'formly-field-select',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormlyModule,
+    SelectModule
+  ],
+  template: `
+    <ng-container *ngIf="options$ | async as options">
+      <p-select
+        [formControl]="$any(formControl)"
+        [formlyAttributes]="field"
+        [options]="options"
+        [virtualScroll]="false"
+        [showClear]="false"
+        [placeholder]="props['placeholder'] || 'Select'"
+        styleClass="w-full">
+      </p-select>
+    </ng-container>
+  `
+})
+export class SelectType extends FieldType {
+  get options$(): Observable<SelectOption[]> {
+    const options = this.props['options'];
+    return isObservable(options) ? options : of(options || []);
+  }
+
+  override defaultOptions = {
+    props: {
+      options: [],
+      optionLabel: 'label',
+      optionValue: 'value',
+      placeholder: 'Select',
+      showClear: false,
+      filter: false,
+      virtualScroll: false
+    }
+  };
+}

package/src/lib/components/formly/types/text-input.type.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType, FormlyModule } from '@ngx-formly/core';
+import { InputTextModule } from 'primeng/inputtext';
+
+@Component({
+  selector: 'formly-field-text-input',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormlyModule,
+    InputTextModule
+  ],
+  template: `
+    <input pInputText
+           [type]="props['type'] || 'text'"
+           [formControl]="$any(formControl)"
+           [formlyAttributes]="field"
+           [placeholder]="props['placeholder'] || ''"
+           [attr.aria-label]="props['label'] || props['placeholder'] || ''"
+           class="w-full"/>
+  `
+})
+export class TextInputType extends FieldType {
+  override defaultOptions = {
+    props: {
+      type: 'text',
+      placeholder: ''
+    }
+  };
+}

package/src/lib/components/formly/types/textarea.type.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FieldType, FormlyModule } from '@ngx-formly/core';
+import { Textarea } from 'primeng/inputtextarea';
+
+@Component({
+  selector: 'formly-field-textarea',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormlyModule,
+    Textarea
+  ],
+  template: `
+    <textarea pInputTextarea
+      [formControl]="$any(formControl)"
+      [formlyAttributes]="field"
+      [rows]="props['rows'] || 3"
+      [cols]="props['cols']"
+      [autoResize]="props['autoResize']"
+      [placeholder]="props['placeholder'] || ''"
+      class="w-full">
+    </textarea>
+  `
+})
+export class TextareaType extends FieldType {
+  override defaultOptions = {
+    props: {
+      rows: 3,
+      cols: undefined,
+      autoResize: true,
+      placeholder: ''
+    }
+  };
+}

package/src/lib/constants/app.constants.ts

@@ -0,0 +1,15 @@
+export class AppConstants {
+    static readonly FORM = {
+        MODE: 'mode',
+        UUID: 'uuid',
+        NEW: 'new'
+    } as const;
+
+    static readonly PAGE_MODE = {
+        CREATE: 'create',
+        EDIT: 'edit',
+        VIEW: 'view'
+    } as const;
+}
+
+export type PageMode = typeof AppConstants.PAGE_MODE[keyof typeof AppConstants.PAGE_MODE];