feat: datetime picker as form field

projects/components/src/datetime-picker/datetime-picker.component.ts

@@ -1,11 +1,19 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Time, TypedSimpleChanges } from '@hypertrace/common';
 import { InputAppearance } from '../input/input-appearance';
 
 @Component({
   selector: 'ht-datetime-picker',
   styleUrls: ['./datetime-picker.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: DatetimePickerComponent
+    }
+  ],
   template: `
     <div class="datetime-picker">
       <ht-label *ngIf="this.label" [label]="this.label" class="datetime-label"></ht-label>
@@ -21,17 +29,19 @@ import { InputAppearance } from '../input/input-appearance';
         >
         </ht-input>
 
-        <ht-time-picker
-          class="time-selector"
-          [time]="this.time"
-          [showTimeTriggerIcon]="this.showTimeTriggerIcon"
-          (timeChange)="this.onTimeChange($event)"
-        ></ht-time-picker>
+        <ng-container *ngIf="!this.showDateOnly"
+          ><ht-time-picker
+            class="time-selector"
+            [time]="this.time"
+            [showTimeTriggerIcon]="this.showTimeTriggerIcon"
+            (timeChange)="this.onTimeChange($event)"
+          ></ht-time-picker
+        ></ng-container>
       </div>
     </div>
   `
 })
-export class DatetimePickerComponent implements OnChanges {
+export class DatetimePickerComponent implements ControlValueAccessor, OnChanges {
   @Input()
   public label?: string;
 
@@ -41,6 +51,9 @@ export class DatetimePickerComponent implements OnChanges {
   @Input()
   public date?: Date = new Date();
 
+  @Input()
+  public showDateOnly: boolean = false;
+
   @Output()
   public readonly dateChange: EventEmitter<Date> = new EventEmitter();
 
@@ -52,10 +65,30 @@ export class DatetimePickerComponent implements OnChanges {
     }
   }
 
+  private propagateControlValueChange?: (value?: Date) => void;
+  private propagateControlValueChangeOnTouch?: (value?: Date) => void;
+
   public getInputDate(): string {
     return this.date?.toISOString().slice(0, 10) ?? '';
   }
 
+  public writeValue(value?: Date): void {
+    this.date = value;
+  }
+
+  public registerOnChange(onChange: (value?: Date) => void): void {
+    this.propagateControlValueChange = onChange;
+  }
+
+  public registerOnTouched(onTouch: (value?: Date) => void): void {
+    this.propagateControlValueChangeOnTouch = onTouch;
+  }
+
+  private propagateValueChangeToFormControl(value?: Date): void {
+    this.propagateControlValueChange?.(value);
+    this.propagateControlValueChangeOnTouch?.(value);
+  }
+
   private getInputTime(date: Date): Time {
     return new Time(date.getHours(), date.getMinutes());
   }
@@ -67,11 +100,13 @@ export class DatetimePickerComponent implements OnChanges {
     d.setFullYear(Number(yearMonthDay[0]), Number(yearMonthDay[1]) - 1, Number(yearMonthDay[2]));
     this.date = d;
     this.dateChange.emit(d);
+    this.propagateValueChangeToFormControl(d);
   }
 
   public onTimeChange(time: Time): void {
     this.time = time;
     this.date?.setUTCHours(time.hours, time.minutes, time.seconds, time.milliseconds);
     this.dateChange.emit(this.date);
+    this.propagateValueChangeToFormControl(this.date);
   }
 }

projects/components/src/textarea/textarea.component.ts

@@ -1,10 +1,18 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { LoggerService } from '@hypertrace/common';
 
 @Component({
   selector: 'ht-textarea',
   styleUrls: ['./textarea.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: TextareaComponent
+    }
+  ],
   template: `
     <mat-form-field class="fill-container" floatLabel="never">
       <textarea
@@ -20,7 +28,7 @@ import { LoggerService } from '@hypertrace/common';
     </mat-form-field>
   `
 })
-export class TextareaComponent implements OnInit {
+export class TextareaComponent implements ControlValueAccessor, OnInit {
   @Input()
   public placeholder!: string;
 
@@ -45,8 +53,29 @@ export class TextareaComponent implements OnInit {
     }
   }
 
+  private propagateControlValueChange?: (value?: string) => void;
+  private propagateControlValueChangeOnTouch?: (value?: string) => void;
+
   public onValueChange(value: string): void {
     this.value = value;
     this.valueChange.emit(value);
+    this.propagateValueChangeToFormControl(value);
+  }
+
+  public writeValue(value?: string): void {
+    this.value = value;
+  }
+
+  public registerOnChange(onChange: (value?: string) => void): void {
+    this.propagateControlValueChange = onChange;
+  }
+
+  public registerOnTouched(onTouch: (value?: string) => void): void {
+    this.propagateControlValueChangeOnTouch = onTouch;
+  }
+
+  private propagateValueChangeToFormControl(value?: string): void {
+    this.propagateControlValueChange?.(value);
+    this.propagateControlValueChangeOnTouch?.(value);
   }
 }

projects/components/src/time-picker/time-picker.component.scss

@@ -28,6 +28,7 @@
   height: 32px;
   padding: 0 8px;
   cursor: pointer;
+  min-width: 108px;
 
   .trigger-icon {
     padding: 0 8px;
@@ -48,6 +49,7 @@
   background: white;
   overflow: auto;
   max-height: 320px;
+  min-width: 108px;
 
   .popover-item {
     @include list-hover;