convert date picker to standalone component

pdb-js/src/app/app.module.ts

@@ -48,7 +48,6 @@ import { MatGridListModule } from "@angular/material/grid-list";
 import { MatCardModule } from "@angular/material/card";
 import { MatBadgeModule } from "@angular/material/badge";
 import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component";
-import { AddTextDialogComponent } from "./dashboard-page/dashboard/add-text-dialog/add-text-dialog.component";
 import { TextWidgetComponent } from "./dashboard-page/dashboard/text-widget/text-widget.component";
 import { AddPlotDialogComponent } from "./dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component";
 import { PlotWidgetComponent } from "./dashboard-page/dashboard/plot-widget/plot-widget.component";
@@ -65,7 +64,6 @@ import { MarkdownModule } from "ngx-markdown";
         MainPageComponent,
         HelpPageComponent,
         UploadPageComponent,
-        DatePickerComponent,
         VisualizationPageComponent,
         YAxisDefinitionComponent,
         QueryAutocompleteComponent,
@@ -79,7 +77,6 @@ import { MarkdownModule } from "ngx-markdown";
         DashboardPageComponent,
         NewDashboardComponent,
         DashboardComponent,
-        AddTextDialogComponent,
         TextWidgetComponent,
         AddPlotDialogComponent,
         PlotWidgetComponent,
@@ -93,6 +90,7 @@ import { MarkdownModule } from "ngx-markdown";
         AppRoutingModule,
         FormsModule,
         ReactiveFormsModule,
+        DatePickerComponent,
         DragDropModule,
         MatAutocompleteModule,
         MatBadgeModule,

pdb-js/src/app/components/datepicker/date-picker.component.ts

@@ -1,3 +1,4 @@
+import { OverlayModule } from "@angular/cdk/overlay";
 import {
   Component,
   EventEmitter,
@@ -8,9 +9,18 @@ import {
 import {
   ControlValueAccessor,
   FormControl,
+  FormsModule,
   NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
   Validators,
 } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MAT_DIALOG_DEFAULT_OPTIONS } from "@angular/material/dialog";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { MatTabsModule } from "@angular/material/tabs";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 
 export type DateType = "QUICK" | "RELATIVE" | "ABSOLUTE";
 
@@ -29,12 +39,27 @@ export class DatePickerChange {
 @Component({
   selector: "app-date-picker",
   templateUrl: "./date-picker.component.html",
+  standalone: true,
+  imports: [
+    BrowserModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatTabsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    OverlayModule
+  ],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => DatePickerComponent),
       multi: true,
     },
+    {
+      provide: MAT_DIALOG_DEFAULT_OPTIONS,
+      useValue: { hasBackdrop: true },
+  }
   ],
 })
 export class DatePickerComponent implements ControlValueAccessor {

pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts

@@ -1,9 +1,28 @@
 import { Component, ElementRef,  Inject,  ViewChild } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MarkdownModule } from 'ngx-markdown';
 
 @Component({
   selector: 'app-add-text-dialog',
-  templateUrl: './add-text-dialog.component.html'
+  templateUrl: './add-text-dialog.component.html',
+  standalone: true,
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MarkdownModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ]
 })
 export class AddTextDialogComponent  {
   text = "";