merge angular-17 into dev to upgrade from Angular v16 to v17

src/app/shared/datetime-picker-stub/datetime-picker-stub.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+/* eslint-disable @angular-eslint/component-selector */
+/* eslint-disable @angular-eslint/prefer-standalone */
+@Component({
+  selector: 'ngx-mat-datetime-picker',
+  template: `
+    <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker></mat-datepicker>
+  `,
+  standalone: false
+})
+export class DatetimePickerStubComponent {
+  @Input() enableMeridian: boolean = true;
+}

src/app/shared/form-dialog/formfield/formfield.component.html

@@ -50,14 +50,12 @@
     <mat-label>{{ formfield.label }}</mat-label>
     <input
       matInput
-      [ngxMatDatetimePicker]="datetimePicker"
+      type="datetime-local"
       [min]="formfield.minDate"
       [max]="formfield.maxDate"
       [formControlName]="formfield.controlName"
       [required]="formfield.required"
     />
-    <mat-datepicker-toggle matSuffix [for]="datetimePicker"></mat-datepicker-toggle>
-    <ngx-mat-datetime-picker #datetimePicker [enableMeridian]="true"></ngx-mat-datetime-picker>
     <mat-error *ngIf="form.controls[formfield.controlName].hasError('required')">
       {{ formfield.label }} {{ 'labels.commons.is' | translate }}
       <strong>{{ 'labels.commons.required' | translate }}</strong>

src/app/shared/form-dialog/formfield/model/datepicker-base.ts

@@ -1,13 +1,25 @@
 import { FormfieldBase } from './formfield-base';
 
+interface DatepickerOptions {
+  minDate?: Date;
+  maxDate?: Date;
+  controlType?: string;
+  controlName?: string;
+  label?: string;
+  value?: any;
+  required?: boolean;
+  order?: number;
+  type?: string;
+}
+
 export class DatepickerBase extends FormfieldBase {
   controlType = 'datepicker';
   minDate: Date;
   maxDate: Date;
 
-  constructor(options: {} = {}) {
+  constructor(options: DatepickerOptions = {}) {
     super(options);
-    this.minDate = options['minDate'] || new Date(2000, 0, 1);
-    this.maxDate = options['maxDate'] || new Date();
+    this.minDate = options.minDate || new Date(2000, 0, 1);
+    this.maxDate = options.maxDate || new Date();
   }
 }

src/app/shared/form-dialog/formfield/model/datetimepicker-base.ts

@@ -1,13 +1,29 @@
 import { FormfieldBase } from './formfield-base';
 
+// Define the base options interface based on FormfieldBase requirements
+interface FormfieldBaseOptions {
+  controlType?: string;
+  controlName?: string;
+  label?: string;
+  value?: any;
+  required?: boolean;
+  order?: number;
+}
+
+// Extend the base options for DateTimePicker
+interface DateTimePickerOptions extends FormfieldBaseOptions {
+  minDate?: Date;
+  maxDate?: Date;
+}
+
 export class DateTimepickerBase extends FormfieldBase {
   controlType = 'datetimepicker';
   minDate: Date;
   maxDate: Date;
 
-  constructor(options: {} = {}) {
+  constructor(options: DateTimePickerOptions = {}) {
     super(options);
-    this.minDate = options['minDate'] || new Date(2000, 0, 1);
-    this.maxDate = options['maxDate'] || new Date();
+    this.minDate = options.minDate || new Date(2000, 0, 1);
+    this.maxDate = options.maxDate || new Date();
   }
 }

src/app/shared/form-dialog/formfield/model/input-base.ts

@@ -1,11 +1,25 @@
 import { FormfieldBase } from './formfield-base';
 
+interface InputBaseOptions extends FormfieldBaseOptions {
+  type?: string;
+  [key: string]: any;
+}
+
+interface FormfieldBaseOptions {
+  controlType?: string;
+  controlName?: string;
+  label?: string;
+  value?: any;
+  required?: boolean;
+  order?: number;
+}
+
 export class InputBase extends FormfieldBase {
   controlType = 'input';
   type: string;
 
-  constructor(options: {} = {}) {
+  constructor(options: InputBaseOptions = {}) {
     super(options);
-    this.type = options['type'] || 'text';
+    this.type = options.type || 'text';
   }
 }

src/app/shared/form-dialog/formfield/model/select-base.ts

@@ -1,15 +1,27 @@
 import { FormfieldBase } from './formfield-base';
 
+interface SelectOption {
+  label: string;
+  value: string;
+  data: {}[];
+}
+
+interface SelectBaseOptions {
+  options?: SelectOption;
+  controlType?: string;
+  controlName?: string;
+  label?: string;
+  value?: any;
+  required?: boolean;
+  order?: number;
+}
+
 export class SelectBase extends FormfieldBase {
   controlType = 'select';
-  options: {
-    label: string;
-    value: string;
-    data: {}[];
-  };
+  options: SelectOption;
 
-  constructor(options: {} = {}) {
+  constructor(options: SelectBaseOptions = {}) {
     super(options);
-    this.options = options['options'];
+    this.options = options.options || { label: '', value: '', data: [] };
   }
 }

src/app/shared/shared.module.ts

@@ -36,7 +36,7 @@ import { EntityDatatableTabComponent } from './tabs/entity-datatable-tab/entity-
 import { DatatableSingleRowComponent } from './tabs/entity-datatable-tab/datatable-single-row/datatable-single-row.component';
 import { DatatableMultiRowComponent } from './tabs/entity-datatable-tab/datatable-multi-row/datatable-multi-row.component';
 import { SvgIconComponent } from './svg-icon/svg-icon.component';
-import { NgxMatDatetimePickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
+// import { NgxMatDatetimePickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 import { ViewJournalEntryComponent } from './accounting/view-journal-entry/view-journal-entry.component';
 import { ViewJournalEntryTransactionComponent } from './accounting/view-journal-entry-transaction/view-journal-entry-transaction.component';
 import { AccountNumberComponent } from './account-number/account-number.component';
@@ -51,6 +51,7 @@ import { LongTextComponent } from './long-text/long-text.component';
 import { DropdownComponent } from './dropdown/dropdown.component';
 import { InputAmountComponent } from './input-amount/input-amount.component';
 import { InputPasswordComponent } from './input-password/input-password.component';
+import { DatetimePickerStubComponent } from './datetime-picker-stub/datetime-picker-stub.component'; // import Datetime Picker Stub
 
 /**
  * Shared Module
@@ -65,9 +66,9 @@ import { InputPasswordComponent } from './input-password/input-password.componen
     ReactiveFormsModule,
     TranslateModule,
     PipesModule,
-    DirectivesModule,
-    NgxMatDatetimePickerModule,
-    NgxMatNativeDateModule
+    DirectivesModule
+    // NgxMatDatetimePickerModule,
+    // NgxMatNativeDateModule
   ],
   declarations: [
     FormfieldComponent,
@@ -108,7 +109,9 @@ import { InputPasswordComponent } from './input-password/input-password.componen
     LongTextComponent,
     DropdownComponent,
     InputAmountComponent,
-    InputPasswordComponent
+    InputPasswordComponent,
+    DatetimePickerStubComponent // temporarily added stub for datetime picker
+
   ],
   exports: [
     FileUploadComponent,
@@ -143,7 +146,9 @@ import { InputPasswordComponent } from './input-password/input-password.componen
     ThemeToggleComponent,
     LongTextComponent,
     DropdownComponent,
-    InputAmountComponent
+    InputAmountComponent,
+    DatetimePickerStubComponent // Export stub for datetime picker
+
   ]
 })
 export class SharedModule {}