diff --git a/pdb-js/src/app/app.component.spec.ts b/pdb-js/src/app/app.component.spec.ts index b018fe6..67b6ee5 100644 --- a/pdb-js/src/app/app.component.spec.ts +++ b/pdb-js/src/app/app.component.spec.ts @@ -5,13 +5,11 @@ import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - imports: [ + imports: [ RouterTestingModule - ], - declarations: [ - AppComponent - ], - }).compileComponents(); + ], + declarations: [AppComponent], +}).compileComponents(); })); it('should create the app', () => { diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index 23cbee7..c1d1221 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -60,34 +60,7 @@ import { ConfirmationDialogComponent } from "./confirmation-dialog/confirmation- import { FocusDirective } from "./focus.directive"; import { MarkdownModule } from "ngx-markdown"; -@NgModule({ declarations: [ - AppComponent, - MainPageComponent, - HelpPageComponent, - UploadPageComponent, - DatePickerComponent, - VisualizationPageComponent, - YAxisDefinitionComponent, - QueryAutocompleteComponent, - LimitByComponent, - PlotDetailsComponent, - PlotViewComponent, - GalleryViewComponent, - GalleryItemView, - GalleryFilterView, - ImageToggleComponent, - DashboardPageComponent, - NewDashboardComponent, - DashboardComponent, - AddTextDialogComponent, - TextWidgetComponent, - AddPlotDialogComponent, - PlotWidgetComponent, - FullScreenPlotDialogComponent, - CustomizableGridComponent, - ConfirmationDialogComponent, - FocusDirective, - ], +@NgModule({ declarations: [AppComponent], bootstrap: [AppComponent], imports: [MarkdownModule.forRoot(), BrowserModule, AppRoutingModule, @@ -112,7 +85,31 @@ import { MarkdownModule } from "ngx-markdown"; MatTableModule, MatTooltipModule, BrowserAnimationsModule, - OverlayModule], providers: [{ + OverlayModule, MainPageComponent, + HelpPageComponent, + UploadPageComponent, + DatePickerComponent, + VisualizationPageComponent, + YAxisDefinitionComponent, + QueryAutocompleteComponent, + LimitByComponent, + PlotDetailsComponent, + PlotViewComponent, + GalleryViewComponent, + GalleryItemView, + GalleryFilterView, + ImageToggleComponent, + DashboardPageComponent, + NewDashboardComponent, + DashboardComponent, + AddTextDialogComponent, + TextWidgetComponent, + AddPlotDialogComponent, + PlotWidgetComponent, + FullScreenPlotDialogComponent, + CustomizableGridComponent, + ConfirmationDialogComponent, + FocusDirective], providers: [{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: true }, }, provideHttpClient(withInterceptorsFromDi())] }) diff --git a/pdb-js/src/app/components/datepicker/date-picker.component.ts b/pdb-js/src/app/components/datepicker/date-picker.component.ts index 3544bd5..74daec3 100644 --- a/pdb-js/src/app/components/datepicker/date-picker.component.ts +++ b/pdb-js/src/app/components/datepicker/date-picker.component.ts @@ -5,12 +5,13 @@ import { Input, Output, } from "@angular/core"; -import { - ControlValueAccessor, - FormControl, - NG_VALUE_ACCESSOR, - Validators, -} from "@angular/forms"; +import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators, FormsModule, ReactiveFormsModule } from "@angular/forms"; +import { MatButton } from "@angular/material/button"; +import { MatTooltip } from "@angular/material/tooltip"; +import { CdkOverlayOrigin, CdkConnectedOverlay } from "@angular/cdk/overlay"; +import { MatTabGroup, MatTab } from "@angular/material/tabs"; +import { MatFormField, MatLabel } from "@angular/material/form-field"; +import { MatInput } from "@angular/material/input"; export type DateType = "QUICK" | "RELATIVE" | "ABSOLUTE"; @@ -27,15 +28,29 @@ export class DatePickerChange { } @Component({ - selector: "app-date-picker", - templateUrl: "./date-picker.component.html", - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => DatePickerComponent), - multi: true, - }, - ], + selector: "app-date-picker", + templateUrl: "./date-picker.component.html", + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DatePickerComponent), + multi: true, + }, + ], + standalone: true, + imports: [ + MatButton, + MatTooltip, + CdkOverlayOrigin, + CdkConnectedOverlay, + MatTabGroup, + MatTab, + MatFormField, + MatLabel, + MatInput, + FormsModule, + ReactiveFormsModule, + ], }) export class DatePickerComponent implements ControlValueAccessor { isOpen = false; diff --git a/pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.spec.ts b/pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.spec.ts index 73d304b..30c93fd 100644 --- a/pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.spec.ts +++ b/pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.spec.ts @@ -8,8 +8,8 @@ describe('ConfirmationDialogComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ConfirmationDialogComponent ] - }) + imports: [ConfirmationDialogComponent] +}) .compileComponents(); fixture = TestBed.createComponent(ConfirmationDialogComponent); diff --git a/pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.ts b/pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.ts index 91bd2df..2b1da03 100644 --- a/pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.ts +++ b/pdb-js/src/app/confirmation-dialog/confirmation-dialog.component.ts @@ -1,9 +1,15 @@ import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog'; +import { NgIf } from '@angular/common'; +import { CdkScrollable } from '@angular/cdk/scrolling'; +import { MatButton } from '@angular/material/button'; +import { FocusDirective } from '../focus.directive'; @Component({ - selector: 'app-confirmation-dialog', - templateUrl: './confirmation-dialog.component.html' + selector: 'app-confirmation-dialog', + templateUrl: './confirmation-dialog.component.html', + standalone: true, + imports: [NgIf, MatDialogTitle, CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose, FocusDirective] }) export class ConfirmationDialogComponent { diff --git a/pdb-js/src/app/customizable-grid/customizable-grid.component.spec.ts b/pdb-js/src/app/customizable-grid/customizable-grid.component.spec.ts index 8e0cda2..e1c9922 100644 --- a/pdb-js/src/app/customizable-grid/customizable-grid.component.spec.ts +++ b/pdb-js/src/app/customizable-grid/customizable-grid.component.spec.ts @@ -8,8 +8,8 @@ describe('CustomizableGridComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ CustomizableGridComponent ] - }) + imports: [CustomizableGridComponent] +}) .compileComponents(); fixture = TestBed.createComponent(CustomizableGridComponent); diff --git a/pdb-js/src/app/customizable-grid/customizable-grid.component.ts b/pdb-js/src/app/customizable-grid/customizable-grid.component.ts index 848a4e8..76ffcfb 100644 --- a/pdb-js/src/app/customizable-grid/customizable-grid.component.ts +++ b/pdb-js/src/app/customizable-grid/customizable-grid.component.ts @@ -1,12 +1,15 @@ import { Component } from '@angular/core'; -import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef} from '@angular/cdk/drag-drop'; +import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef, CdkDropListGroup, CdkDrag } from '@angular/cdk/drag-drop'; import { AfterViewInit } from '@angular/core'; import { ViewChild } from '@angular/core'; +import { NgFor, NgStyle, NgClass } from '@angular/common'; @Component({ - selector: 'app-customizable-grid', - templateUrl: './customizable-grid.component.html' + selector: 'app-customizable-grid', + templateUrl: './customizable-grid.component.html', + standalone: true, + imports: [NgFor, CdkDropListGroup, NgStyle, CdkDropList, CdkDrag, NgClass] }) export class CustomizableGridComponent implements AfterViewInit { @ViewChild(CdkDropList) placeholder!: CdkDropList; diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard-page.component.spec.ts index 6180c3f..43dd141 100644 --- a/pdb-js/src/app/dashboard-page/dashboard-page.component.spec.ts +++ b/pdb-js/src/app/dashboard-page/dashboard-page.component.spec.ts @@ -8,8 +8,8 @@ describe('DashboardPageComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ DashboardPageComponent ] - }) + imports: [DashboardPageComponent] +}) .compileComponents(); fixture = TestBed.createComponent(DashboardPageComponent); diff --git a/pdb-js/src/app/dashboard-page/dashboard-page.component.ts b/pdb-js/src/app/dashboard-page/dashboard-page.component.ts index 9f78b14..b856f3d 100644 --- a/pdb-js/src/app/dashboard-page/dashboard-page.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard-page.component.ts @@ -5,10 +5,17 @@ import { MatSnackBar } from '@angular/material/snack-bar'; import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component'; import { Dashboard, DashboardCreationData, DashboardList, DashboardService } from '../dashboard.service'; import { NewDashboardComponent } from './new-dashboard/new-dashboard.component'; +import { NgIf } from '@angular/common'; +import { MatProgressSpinner } from '@angular/material/progress-spinner'; +import { MatButton, MatIconButton } from '@angular/material/button'; +import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table'; +import { RouterLink } from '@angular/router'; @Component({ - selector: 'app-dashboard-page', - templateUrl: './dashboard-page.component.html' + selector: 'app-dashboard-page', + templateUrl: './dashboard-page.component.html', + standalone: true, + imports: [NgIf, MatProgressSpinner, MatButton, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, RouterLink, MatIconButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow] }) export class DashboardPageComponent implements OnInit { diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts index b159c28..7e2c86d 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.spec.ts @@ -8,8 +8,8 @@ describe('AddPlotDialogComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AddPlotDialogComponent ] - }) + imports: [AddPlotDialogComponent] +}) .compileComponents(); fixture = TestBed.createComponent(AddPlotDialogComponent); diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts index 4ef930e..a4bdb1c 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts @@ -1,11 +1,16 @@ import { AfterViewInit, Component, ElementRef, Inject, ViewChild } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog'; import { PlotConfig } from 'src/app/plot.service'; import { VisualizationPageComponent } from 'src/app/visualization-page/visualization-page.component'; +import { VisualizationPageComponent as VisualizationPageComponent_1 } from '../../../visualization-page/visualization-page.component'; +import { CdkScrollable } from '@angular/cdk/scrolling'; +import { MatButton } from '@angular/material/button'; @Component({ - selector: 'app-add-plot-dialog', - templateUrl: './add-plot-dialog.component.html' + selector: 'app-add-plot-dialog', + templateUrl: './add-plot-dialog.component.html', + standalone: true, + imports: [VisualizationPageComponent_1, CdkScrollable, MatDialogContent, MatDialogActions, MatButton, MatDialogClose] }) export class AddPlotDialogComponent { diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts index ae6a7e6..83e0baa 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.spec.ts @@ -8,8 +8,8 @@ describe('AddTextDialogComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AddTextDialogComponent ] - }) + imports: [AddTextDialogComponent] +}) .compileComponents(); fixture = TestBed.createComponent(AddTextDialogComponent); diff --git a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts index ee32369..c278a00 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts @@ -1,9 +1,18 @@ import { Component, ElementRef, Inject, ViewChild } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog'; +import { CdkScrollable } from '@angular/cdk/scrolling'; +import { MatFormField, MatLabel } from '@angular/material/form-field'; +import { MatInput } from '@angular/material/input'; +import { FormsModule } from '@angular/forms'; +import { FocusDirective } from '../../../focus.directive'; +import { MarkdownComponent } from 'ngx-markdown'; +import { MatButton } from '@angular/material/button'; @Component({ - selector: 'app-add-text-dialog', - templateUrl: './add-text-dialog.component.html' + selector: 'app-add-text-dialog', + templateUrl: './add-text-dialog.component.html', + standalone: true, + imports: [MatDialogTitle, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, FormsModule, FocusDirective, MarkdownComponent, MatDialogActions, MatButton, MatDialogClose] }) export class AddTextDialogComponent { text = ""; diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.spec.ts index 6e4dcd8..d4cd6a8 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.spec.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.spec.ts @@ -8,8 +8,8 @@ describe('DashboardComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ DashboardComponent ] - }) + imports: [DashboardComponent] +}) .compileComponents(); fixture = TestBed.createComponent(DashboardComponent); diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts index 695ec98..56c3280 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts @@ -1,19 +1,27 @@ -import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; +import { CdkDragDrop, moveItemInArray, transferArrayItem, CdkDropListGroup, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop'; import { HttpErrorResponse } from '@angular/common/http'; import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; -import { ActivatedRoute } from '@angular/router'; +import { ActivatedRoute, RouterLink } from '@angular/router'; import { Dashboard, DashboardCreationData, DashboardService, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service'; import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service'; import { NewDashboardComponent } from '../new-dashboard/new-dashboard.component'; import { AddPlotDialogComponent } from './add-plot-dialog/add-plot-dialog.component'; import { AddTextDialogComponent } from './add-text-dialog/add-text-dialog.component'; import { DatePickerChange, DatePickerComponent } from 'src/app/components/datepicker/date-picker.component'; +import { NgIf, NgFor } from '@angular/common'; +import { MatProgressSpinner } from '@angular/material/progress-spinner'; +import { MatButton, MatIconButton } from '@angular/material/button'; +import { DatePickerComponent as DatePickerComponent_1 } from '../../components/datepicker/date-picker.component'; +import { TextWidgetComponent } from './text-widget/text-widget.component'; +import { PlotWidgetComponent } from './plot-widget/plot-widget.component'; @Component({ - selector: 'app-dashboard', - templateUrl: './dashboard.component.html' + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + standalone: true, + imports: [NgIf, MatProgressSpinner, RouterLink, MatButton, DatePickerComponent_1, MatIconButton, CdkDropListGroup, NgFor, CdkDropList, CdkDrag, CdkDragHandle, TextWidgetComponent, PlotWidgetComponent] }) export class DashboardComponent implements OnInit{ diff --git a/pdb-js/src/app/dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component.ts b/pdb-js/src/app/dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component.ts index fbc09f8..63e4eeb 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component.ts @@ -1,9 +1,12 @@ import { Component, Inject } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatDialogRef, MAT_DIALOG_DATA, MatDialogClose } from '@angular/material/dialog'; +import { MatIconButton } from '@angular/material/button'; @Component({ - selector: 'app-full-screen-plot-dialog', - templateUrl: './full-screen-plot-dialog.component.html' + selector: 'app-full-screen-plot-dialog', + templateUrl: './full-screen-plot-dialog.component.html', + standalone: true, + imports: [MatIconButton, MatDialogClose] }) export class FullScreenPlotDialogComponent { diff --git a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts index 11241e2..1ed32f0 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.spec.ts @@ -8,8 +8,8 @@ describe('PlotWidgetComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ PlotWidgetComponent ] - }) + imports: [PlotWidgetComponent] +}) .compileComponents(); fixture = TestBed.createComponent(PlotWidgetComponent); diff --git a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts index c5c414f..6e9f5c1 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts @@ -6,10 +6,14 @@ import { PlotViewComponent } from 'src/app/plot-view/plot-view.component'; import { PlotConfig, PlotResponse, PlotService } from 'src/app/plot.service'; import { AddPlotDialogComponent } from '../add-plot-dialog/add-plot-dialog.component'; import { FullScreenPlotDialogComponent } from '../full-screen-plot-dialog/full-screen-plot-dialog.component'; +import { NgClass, NgIf } from '@angular/common'; +import { MatIconButton, MatButton } from '@angular/material/button'; @Component({ - selector: 'app-plot-widget', - templateUrl: './plot-widget.component.html' + selector: 'app-plot-widget', + templateUrl: './plot-widget.component.html', + standalone: true, + imports: [NgClass, MatIconButton, NgIf, MatButton] }) export class PlotWidgetComponent { @Input("data") diff --git a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts index 1094f0d..f32a7f9 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.spec.ts @@ -8,8 +8,8 @@ describe('TextWidgetComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ TextWidgetComponent ] - }) + imports: [TextWidgetComponent] +}) .compileComponents(); fixture = TestBed.createComponent(TextWidgetComponent); diff --git a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts index e71cfa1..183ab71 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.ts @@ -3,10 +3,14 @@ import { MatDialog } from '@angular/material/dialog'; import { ConfirmationDialogComponent } from 'src/app/confirmation-dialog/confirmation-dialog.component'; import { TextWidget } from 'src/app/dashboard.service'; import { AddTextDialogComponent } from '../add-text-dialog/add-text-dialog.component'; +import { MatIconButton } from '@angular/material/button'; +import { MarkdownComponent } from 'ngx-markdown'; @Component({ - selector: 'app-text-widget', - templateUrl: './text-widget.component.html' + selector: 'app-text-widget', + templateUrl: './text-widget.component.html', + standalone: true, + imports: [MatIconButton, MarkdownComponent] }) export class TextWidgetComponent { @Input() diff --git a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.spec.ts b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.spec.ts index 67bc3b9..8aaee13 100644 --- a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.spec.ts +++ b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.spec.ts @@ -8,8 +8,8 @@ describe('NewDashboardComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ NewDashboardComponent ] - }) + imports: [NewDashboardComponent] +}) .compileComponents(); fixture = TestBed.createComponent(NewDashboardComponent); diff --git a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts index 99661ab..eb42f49 100644 --- a/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts +++ b/pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts @@ -1,11 +1,18 @@ import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core'; -import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; +import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose } from '@angular/material/dialog'; import { DashboardCreationData } from 'src/app/dashboard.service'; -import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'; +import { AbstractControl, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { CdkScrollable } from '@angular/cdk/scrolling'; +import { MatFormField, MatLabel, MatError } from '@angular/material/form-field'; +import { MatInput } from '@angular/material/input'; +import { FocusDirective } from '../../focus.directive'; +import { MatButton } from '@angular/material/button'; @Component({ - selector: 'app-new-dashboard', - templateUrl: './new-dashboard.component.html' + selector: 'app-new-dashboard', + templateUrl: './new-dashboard.component.html', + standalone: true, + imports: [FormsModule, ReactiveFormsModule, MatDialogTitle, CdkScrollable, MatDialogContent, MatFormField, MatLabel, MatInput, FocusDirective, MatError, MatDialogActions, MatButton, MatDialogClose] }) export class NewDashboardComponent implements OnInit { diff --git a/pdb-js/src/app/focus.directive.ts b/pdb-js/src/app/focus.directive.ts index c7c3ab4..57b2676 100644 --- a/pdb-js/src/app/focus.directive.ts +++ b/pdb-js/src/app/focus.directive.ts @@ -1,7 +1,8 @@ import { AfterViewInit, Directive, ElementRef } from '@angular/core'; @Directive({ - selector: '[focus]' + selector: '[focus]', + standalone: true }) export class FocusDirective implements AfterViewInit { diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.spec.ts b/pdb-js/src/app/gallery-view/gallery-view.component.spec.ts index 907795c..6d393ee 100644 --- a/pdb-js/src/app/gallery-view/gallery-view.component.spec.ts +++ b/pdb-js/src/app/gallery-view/gallery-view.component.spec.ts @@ -8,8 +8,8 @@ describe('GalleryViewComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ GalleryViewComponent ] - }) + imports: [GalleryViewComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.ts b/pdb-js/src/app/gallery-view/gallery-view.component.ts index 74d20fb..49bdd3c 100644 --- a/pdb-js/src/app/gallery-view/gallery-view.component.ts +++ b/pdb-js/src/app/gallery-view/gallery-view.component.ts @@ -1,7 +1,19 @@ -import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core'; +import { Component, OnInit, Input, Output, ViewChild, EventEmitter, forwardRef } from '@angular/core'; import { MatSnackBar } from '@angular/material/snack-bar'; import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor, RenderedImages } from '../plot.service'; import { UtilService } from '../utils.service'; +import { NgIf, NgClass, NgFor } from '@angular/common'; +import { MatFormField, MatLabel } from '@angular/material/form-field'; +import { MatSelect } from '@angular/material/select'; +import { MatOption } from '@angular/material/core'; +import { ImageToggleComponent } from '../image-toggle/image-toggle.component'; +import { MatCheckbox } from '@angular/material/checkbox'; +import { FormsModule } from '@angular/forms'; +import { MatProgressBar } from '@angular/material/progress-bar'; +import { MatButton } from '@angular/material/button'; +import { MatTooltip } from '@angular/material/tooltip'; +import { PlotDetailsComponent } from '../plot-details/plot-details.component'; +import { MatInput } from '@angular/material/input'; export class GalleryFilterData { filterBy :string; @@ -17,9 +29,11 @@ export class GalleryFilterData { } @Component({ - selector: 'pdb-gallery-filter-view', - templateUrl: './gallery-filter-view.component.html', - styleUrls: ['./gallery-filter-view.component.scss'] + selector: 'pdb-gallery-filter-view', + templateUrl: './gallery-filter-view.component.html', + styleUrls: ['./gallery-filter-view.component.scss'], + standalone: true, + imports: [MatFormField, MatLabel, MatSelect, MatOption, NgIf, ImageToggleComponent, MatInput, FormsModule] }) export class GalleryFilterView { compareImages = JSON.stringify([ @@ -89,9 +103,11 @@ export class GalleryFilterView { @Component({ - selector: 'pdb-gallery-view', - templateUrl: './gallery-view.component.html', - styleUrls: ['./gallery-view.component.scss'] + selector: 'pdb-gallery-view', + templateUrl: './gallery-view.component.html', + styleUrls: ['./gallery-view.component.scss'], + standalone: true, + imports: [NgIf, MatFormField, MatLabel, MatSelect, MatOption, ImageToggleComponent, GalleryFilterView, MatCheckbox, FormsModule, MatProgressBar, MatButton, MatTooltip, NgClass, NgFor, forwardRef(() => GalleryItemView)] }) export class GalleryViewComponent implements OnInit { @@ -313,9 +329,11 @@ export class GalleryViewComponent implements OnInit { } @Component({ - selector: 'pdb-gallery-item-view', - templateUrl: './gallery-item-view.component.html', - styleUrls: ['./gallery-item-view.component.scss'] + selector: 'pdb-gallery-item-view', + templateUrl: './gallery-item-view.component.html', + styleUrls: ['./gallery-item-view.component.scss'], + standalone: true, + imports: [NgClass, NgIf, PlotDetailsComponent] }) export class GalleryItemView { @Input() diff --git a/pdb-js/src/app/help-page/help-page.component.spec.ts b/pdb-js/src/app/help-page/help-page.component.spec.ts index 286ec44..346837a 100644 --- a/pdb-js/src/app/help-page/help-page.component.spec.ts +++ b/pdb-js/src/app/help-page/help-page.component.spec.ts @@ -8,8 +8,8 @@ describe('HelpPageComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ HelpPageComponent ] - }) + imports: [HelpPageComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/help-page/help-page.component.ts b/pdb-js/src/app/help-page/help-page.component.ts index 70b77e5..b4f8bc0 100644 --- a/pdb-js/src/app/help-page/help-page.component.ts +++ b/pdb-js/src/app/help-page/help-page.component.ts @@ -1,9 +1,10 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'pdb-help-page', - templateUrl: './help-page.component.html', - styleUrls: ['./help-page.component.scss'] + selector: 'pdb-help-page', + templateUrl: './help-page.component.html', + styleUrls: ['./help-page.component.scss'], + standalone: true }) export class HelpPageComponent implements OnInit { diff --git a/pdb-js/src/app/image-toggle/image-toggle.component.spec.ts b/pdb-js/src/app/image-toggle/image-toggle.component.spec.ts index 53ece3e..1ff9da9 100644 --- a/pdb-js/src/app/image-toggle/image-toggle.component.spec.ts +++ b/pdb-js/src/app/image-toggle/image-toggle.component.spec.ts @@ -8,8 +8,8 @@ describe('ImageToggleComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ ImageToggleComponent ] - }) + imports: [ImageToggleComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/image-toggle/image-toggle.component.ts b/pdb-js/src/app/image-toggle/image-toggle.component.ts index 0244684..238b43f 100644 --- a/pdb-js/src/app/image-toggle/image-toggle.component.ts +++ b/pdb-js/src/app/image-toggle/image-toggle.component.ts @@ -1,9 +1,12 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { NgIf } from '@angular/common'; @Component({ - selector: 'pdb-image-toggle', - templateUrl: './image-toggle.component.html', - styleUrls: ['./image-toggle.component.scss'] + selector: 'pdb-image-toggle', + templateUrl: './image-toggle.component.html', + styleUrls: ['./image-toggle.component.scss'], + standalone: true, + imports: [NgIf] }) export class ImageToggleComponent implements OnInit { diff --git a/pdb-js/src/app/limit-by/limit-by.component.spec.ts b/pdb-js/src/app/limit-by/limit-by.component.spec.ts index 8186455..318e6b7 100644 --- a/pdb-js/src/app/limit-by/limit-by.component.spec.ts +++ b/pdb-js/src/app/limit-by/limit-by.component.spec.ts @@ -8,8 +8,8 @@ describe('LimitByComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ LimitByComponent ] - }) + imports: [LimitByComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/limit-by/limit-by.component.ts b/pdb-js/src/app/limit-by/limit-by.component.ts index 2d9d3ba..47a8f22 100644 --- a/pdb-js/src/app/limit-by/limit-by.component.ts +++ b/pdb-js/src/app/limit-by/limit-by.component.ts @@ -1,10 +1,17 @@ import { Component, Input} from '@angular/core'; -import {FormControl} from '@angular/forms'; +import { FormControl, FormsModule } from '@angular/forms'; +import { MatFormField, MatLabel } from '@angular/material/form-field'; +import { MatSelect } from '@angular/material/select'; +import { MatOption } from '@angular/material/core'; +import { NgIf } from '@angular/common'; +import { MatInput } from '@angular/material/input'; @Component({ - selector: 'pdb-limit-by', - templateUrl: './limit-by.component.html', - styleUrls: ['./limit-by.component.scss'] + selector: 'pdb-limit-by', + templateUrl: './limit-by.component.html', + styleUrls: ['./limit-by.component.scss'], + standalone: true, + imports: [MatFormField, MatLabel, MatSelect, MatOption, NgIf, MatInput, FormsModule] }) export class LimitByComponent { diff --git a/pdb-js/src/app/main-page/main-page.component.spec.ts b/pdb-js/src/app/main-page/main-page.component.spec.ts index 4d61b9f..03f3bbe 100644 --- a/pdb-js/src/app/main-page/main-page.component.spec.ts +++ b/pdb-js/src/app/main-page/main-page.component.spec.ts @@ -8,8 +8,8 @@ describe('MainPageComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ MainPageComponent ] - }) + imports: [MainPageComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/main-page/main-page.component.ts b/pdb-js/src/app/main-page/main-page.component.ts index 4f98267..213b12b 100644 --- a/pdb-js/src/app/main-page/main-page.component.ts +++ b/pdb-js/src/app/main-page/main-page.component.ts @@ -1,9 +1,12 @@ import { Component, OnInit } from '@angular/core'; +import { RouterLink } from '@angular/router'; @Component({ - selector: 'pdb-main-page', - templateUrl: './main-page.component.html', - styleUrls: ['./main-page.component.scss'] + selector: 'pdb-main-page', + templateUrl: './main-page.component.html', + styleUrls: ['./main-page.component.scss'], + standalone: true, + imports: [RouterLink] }) export class MainPageComponent implements OnInit { diff --git a/pdb-js/src/app/plot-details/plot-details.component.ts b/pdb-js/src/app/plot-details/plot-details.component.ts index 05403cb..d86e089 100644 --- a/pdb-js/src/app/plot-details/plot-details.component.ts +++ b/pdb-js/src/app/plot-details/plot-details.component.ts @@ -1,11 +1,16 @@ import { Component, Input } from '@angular/core'; import { DashTypeAndColor, PlotResponseStats, DataSeriesStats } from '../plot.service'; import { UtilService } from '../utils.service'; +import { MatRadioGroup, MatRadioButton } from '@angular/material/radio'; +import { FormsModule } from '@angular/forms'; +import { NgFor, NgIf } from '@angular/common'; @Component({ - selector: 'pdb-plot-details', - templateUrl: './plot-details.component.html', - styleUrls: ['./plot-details.component.scss'] + selector: 'pdb-plot-details', + templateUrl: './plot-details.component.html', + styleUrls: ['./plot-details.component.scss'], + standalone: true, + imports: [MatRadioGroup, FormsModule, MatRadioButton, NgFor, NgIf] }) export class PlotDetailsComponent { diff --git a/pdb-js/src/app/plot-view/plot-view.component.spec.ts b/pdb-js/src/app/plot-view/plot-view.component.spec.ts index c6342d4..ca80b4d 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.spec.ts +++ b/pdb-js/src/app/plot-view/plot-view.component.spec.ts @@ -8,8 +8,8 @@ describe('PlotViewComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ PlotViewComponent ] - }) + imports: [PlotViewComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/plot-view/plot-view.component.ts b/pdb-js/src/app/plot-view/plot-view.component.ts index 972dcd7..960ef7a 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.ts +++ b/pdb-js/src/app/plot-view/plot-view.component.ts @@ -8,11 +8,16 @@ import { Overlay } from "@angular/cdk/overlay"; import { DateTime, Duration } from "luxon"; import { DateValue } from '../components/datepicker/date-picker.component'; import { Observable } from 'rxjs'; +import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop'; +import { NgClass, NgFor, NgIf } from '@angular/common'; +import { PlotDetailsComponent } from '../plot-details/plot-details.component'; @Component({ - selector: 'pdb-plot-view', - templateUrl: './plot-view.component.html', - styleUrls: ['./plot-view.component.scss'] + selector: 'pdb-plot-view', + templateUrl: './plot-view.component.html', + styleUrls: ['./plot-view.component.scss'], + standalone: true, + imports: [CdkDrag, NgClass, CdkDragHandle, NgFor, NgIf, PlotDetailsComponent] }) export class PlotViewComponent { diff --git a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.spec.ts b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.spec.ts index 501680f..6145d39 100644 --- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.spec.ts +++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.spec.ts @@ -8,8 +8,8 @@ describe('QueryAutocompleteComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ QueryAutocompleteComponent ] - }) + imports: [QueryAutocompleteComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts index 371161c..805bcc8 100644 --- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts +++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts @@ -1,14 +1,19 @@ import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core'; -import {FormControl, UntypedFormControl} from '@angular/forms'; +import { FormControl, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'; import {Observable} from 'rxjs'; import {startWith, map} from 'rxjs/operators'; -import {MatAutocompleteTrigger } from '@angular/material/autocomplete'; +import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete'; import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } from '../plot.service'; +import { MatInput } from '@angular/material/input'; +import { NgFor, AsyncPipe } from '@angular/common'; +import { MatOption } from '@angular/material/core'; @Component({ - selector: 'pdb-query-autocomplete', - templateUrl: './query-autocomplete.component.html', - styleUrls: ['./query-autocomplete.component.scss'] + selector: 'pdb-query-autocomplete', + templateUrl: './query-autocomplete.component.html', + styleUrls: ['./query-autocomplete.component.scss'], + standalone: true, + imports: [MatInput, FormsModule, MatAutocompleteTrigger, ReactiveFormsModule, MatAutocomplete, NgFor, MatOption, AsyncPipe] }) export class QueryAutocompleteComponent implements OnInit { diff --git a/pdb-js/src/app/upload-page/upload-page.component.spec.ts b/pdb-js/src/app/upload-page/upload-page.component.spec.ts index 7c2c966..34c1a07 100644 --- a/pdb-js/src/app/upload-page/upload-page.component.spec.ts +++ b/pdb-js/src/app/upload-page/upload-page.component.spec.ts @@ -8,8 +8,8 @@ describe('UploadPageComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ UploadPageComponent ] - }) + imports: [UploadPageComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/upload-page/upload-page.component.ts b/pdb-js/src/app/upload-page/upload-page.component.ts index 276c07e..b889588 100644 --- a/pdb-js/src/app/upload-page/upload-page.component.ts +++ b/pdb-js/src/app/upload-page/upload-page.component.ts @@ -1,9 +1,10 @@ import { Component, OnInit } from '@angular/core'; @Component({ - selector: 'pdb-upload-page', - templateUrl: './upload-page.component.html', - styleUrls: ['./upload-page.component.scss'] + selector: 'pdb-upload-page', + templateUrl: './upload-page.component.html', + styleUrls: ['./upload-page.component.scss'], + standalone: true }) export class UploadPageComponent implements OnInit { diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.spec.ts b/pdb-js/src/app/visualization-page/visualization-page.component.spec.ts index 9e4e399..129cfd0 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.spec.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.spec.ts @@ -8,8 +8,8 @@ describe('VisualizationPageComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ VisualizationPageComponent ] - }) + imports: [VisualizationPageComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts index 9402cff..5413565 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -18,7 +18,7 @@ import { Suggestion, TagField, } from "../plot.service"; -import { UntypedFormControl } from "@angular/forms"; +import { UntypedFormControl, FormsModule } from "@angular/forms"; import { MatSnackBar } from "@angular/material/snack-bar"; import { LimitByComponent } from "../limit-by/limit-by.component"; import { YAxisDefinitionComponent } from "../y-axis-definition/y-axis-definition.component"; @@ -34,11 +34,41 @@ import { DatePickerComponent, DateValue, } from "../components/datepicker/date-picker.component"; +import { MatFormField, MatLabel, MatError } from "@angular/material/form-field"; +import { MatSelect } from "@angular/material/select"; +import { NgFor, NgIf } from "@angular/common"; +import { MatOption } from "@angular/material/core"; +import { MatCheckbox } from "@angular/material/checkbox"; +import { MatIconAnchor, MatButton } from "@angular/material/button"; +import { RouterLink } from "@angular/router"; +import { MatTooltip } from "@angular/material/tooltip"; @Component({ - selector: "pdb-visualization-page", - templateUrl: "./visualization-page.component.html", - styleUrls: ["./visualization-page.component.scss"], + selector: "pdb-visualization-page", + templateUrl: "./visualization-page.component.html", + styleUrls: ["./visualization-page.component.scss"], + standalone: true, + imports: [ + QueryAutocompleteComponent, + DatePickerComponent, + MatFormField, + MatLabel, + MatSelect, + FormsModule, + NgFor, + MatOption, + LimitByComponent, + MatCheckbox, + YAxisDefinitionComponent, + NgIf, + MatError, + MatIconAnchor, + RouterLink, + MatButton, + MatTooltip, + PlotViewComponent, + GalleryViewComponent, + ], }) export class VisualizationPageComponent implements OnInit, AfterViewInit { readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS diff --git a/pdb-js/src/app/y-axis-definition/y-axis-definition.component.spec.ts b/pdb-js/src/app/y-axis-definition/y-axis-definition.component.spec.ts index e3d58c9..db11321 100644 --- a/pdb-js/src/app/y-axis-definition/y-axis-definition.component.spec.ts +++ b/pdb-js/src/app/y-axis-definition/y-axis-definition.component.spec.ts @@ -8,8 +8,8 @@ describe('YAxisDefinitionComponent', () => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ - declarations: [ YAxisDefinitionComponent ] - }) + imports: [YAxisDefinitionComponent] +}) .compileComponents(); })); diff --git a/pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts b/pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts index a980a95..dbb65c6 100644 --- a/pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts +++ b/pdb-js/src/app/y-axis-definition/y-axis-definition.component.ts @@ -1,10 +1,18 @@ import { Component, Input } from '@angular/core'; import { YAxisDefinition } from '../plot.service'; +import { MatFormField, MatLabel } from '@angular/material/form-field'; +import { MatSelect } from '@angular/material/select'; +import { MatOption, MatOptgroup } from '@angular/material/core'; +import { NgIf } from '@angular/common'; +import { MatInput } from '@angular/material/input'; +import { FormsModule } from '@angular/forms'; @Component({ - selector: 'pdb-y-axis-definition', - templateUrl: './y-axis-definition.component.html', - styleUrls: ['./y-axis-definition.component.scss'] + selector: 'pdb-y-axis-definition', + templateUrl: './y-axis-definition.component.html', + styleUrls: ['./y-axis-definition.component.scss'], + standalone: true, + imports: [MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, NgIf, MatInput, FormsModule] }) export class YAxisDefinitionComponent {