AAE-44065 Change date picker to match other styles (#11868)

* AAE-44065 Change date picker to match other styles

* Apply Copilot suggestions

lib/process-services-cloud/package.json

@@ -24,6 +24,7 @@
     "@alfresco/js-api": ">=9.4.1",
     "@alfresco/adf-core": ">=8.4.1",
     "@alfresco/adf-content-services": ">=8.4.1",
+    "@mat-datetimepicker/core": ">=12.0.1",
     "@apollo/client": ">=3.7.2",
     "@ngx-translate/core": ">=17.0.0",
     "apollo-angular": ">=4.0.1",

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html

@@ -4,15 +4,17 @@
     [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"
     [class.adf-left-label-input-container]="field.leftLabels"
 >
-    <div *ngIf="field.leftLabels">
+    @if (field.leftLabels) {
-        <label class="adf-label adf-left-label" [attr.for]="field.id"
+        <div>
-            >{{field.name | translate }} ({{field.dateDisplayFormat}})<span
+            <label class="adf-label adf-left-label" [attr.for]="field.id"
-                class="adf-asterisk"
+                >{{field.name | translate }} ({{field.dateDisplayFormat}})<span
-                [style.visibility]="isRequired() ? 'visible' : 'hidden'"
+                    class="adf-asterisk"
-                >*</span
+                    [style.visibility]="isRequired() ? 'visible' : 'hidden'"
-            ></label
+                    >*</span
-        >
+                ></label
-    </div>
+            >
+        </div>
+    }
     <div class="adf-date-widget-container">
         <mat-form-field class="adf-date-widget adf-form-field-input" [class.adf-left-label-input-datepicker]="field.leftLabels">
             @if ( (field.name || field?.required) && !field.leftLabels) {
@@ -23,7 +25,7 @@
             <input
                 matInput
                 class="adf-input"
-                [matDatepicker]="datePicker"
+                [matDatetimepicker]="datetimePicker"
                 [id]="field.id"
                 [formControl]="dateInputControl"
                 [placeholder]="field.placeholder"
@@ -32,11 +34,13 @@
                 [max]="maxDate"
                 [title]="field.tooltip"
             />
-            <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
+            <mat-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly" />
-            <mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
+            <mat-datetimepicker #datetimePicker type="date" [startAt]="startAt" [disabled]="field.readOnly" />
         </mat-form-field>
         <div class="adf-error-messages-container">
-            <error-widget *ngIf="dateInputControl.invalid && dateInputControl.touched" [error]="field.validationSummary" />
+            @if (dateInputControl.invalid && dateInputControl.touched) {
+                <error-widget [error]="field.validationSummary" />
+            }
         </div>
     </div>
 </div>

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.ts

@@ -22,6 +22,8 @@ import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import {
     ADF_DATE_FORMATS,
     AdfDateFnsAdapter,
+    ADF_DATETIME_FORMATS,
+    AdfDateTimeFnsAdapter,
     DateFnsUtils,
     DEFAULT_DATE_FORMAT,
     ErrorMessageModel,
@@ -30,10 +32,9 @@ import {
     WidgetComponent,
     ReactiveFormWidget
 } from '@alfresco/adf-core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
+import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerModule } from '@mat-datetimepicker/core';
 import { addDays, parseISO } from 'date-fns';
 import { FormControl, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms';
-import { NgIf } from '@angular/common';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -41,10 +42,12 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'date-widget',
-    imports: [NgIf, TranslatePipe, MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule, ErrorWidgetComponent],
+    imports: [TranslatePipe, MatFormFieldModule, MatInputModule, MatDatetimepickerModule, ReactiveFormsModule, ErrorWidgetComponent],
     providers: [
         { provide: MAT_DATE_FORMATS, useValue: ADF_DATE_FORMATS },
-        { provide: DateAdapter, useClass: AdfDateFnsAdapter }
+        { provide: DateAdapter, useClass: AdfDateFnsAdapter },
+        { provide: MAT_DATETIME_FORMATS, useValue: ADF_DATETIME_FORMATS },
+        { provide: DatetimeAdapter, useClass: AdfDateTimeFnsAdapter }
     ],
     templateUrl: './date-cloud.widget.html',
     styleUrls: ['./date-cloud.widget.scss'],
@@ -74,6 +77,7 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
 
     private readonly destroyRef = inject(DestroyRef);
     private readonly dateAdapter = inject(DateAdapter);
+    private readonly dateTimeAdapter = inject(DatetimeAdapter);
 
     ngOnInit(): void {
         this.setFormControlValue();
@@ -176,12 +180,14 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
         if (this.field?.dateDisplayFormat) {
             const adapter = this.dateAdapter as AdfDateFnsAdapter;
             adapter.displayFormat = this.field.dateDisplayFormat;
+            const dateTimeAdapter = this.dateTimeAdapter as AdfDateTimeFnsAdapter;
+            dateTimeAdapter.displayFormat = this.field.dateDisplayFormat;
         }
     }
 
     private initStartAt(): void {
         if (this.field?.value) {
-            this.startAt = this.dateAdapter.parse(this.field.value, DEFAULT_DATE_FORMAT);
+            this.startAt = this.dateTimeAdapter.parse(this.field.value, DEFAULT_DATE_FORMAT);
         }
     }
 
@@ -198,14 +204,14 @@ export class DateCloudWidgetComponent extends WidgetComponent implements OnInit,
             this.minDate = null;
             this.field.minValue = null;
         } else {
-            this.minDate = addDays(this.dateAdapter.today(), this.field.minDateRangeValue);
+            this.minDate = addDays(this.dateTimeAdapter.today(), this.field.minDateRangeValue);
             this.field.minValue = DateFnsUtils.formatDate(this.minDate, DEFAULT_DATE_FORMAT);
         }
         if (this.field.maxDateRangeValue === null) {
             this.maxDate = null;
             this.field.maxValue = null;
         } else {
-            this.maxDate = addDays(this.dateAdapter.today(), this.field.maxDateRangeValue);
+            this.maxDate = addDays(this.dateTimeAdapter.today(), this.field.maxDateRangeValue);
             this.field.maxValue = DateFnsUtils.formatDate(this.maxDate, DEFAULT_DATE_FORMAT);
         }
     }