From 792637d8faf2c35bd32b2608444670e693258204 Mon Sep 17 00:00:00 2001 From: Blackbaud-SteveBrush Date: Mon, 22 Jan 2024 12:24:02 -0500 Subject: [PATCH 1/2] refactor: move ESLint overrides to .eslintrc-overrides.json --- .eslintrc-overrides.json | 2 ++ .eslintrc.json | 5 +---- .nvmrc | 2 +- apps/e2e/ag-grid-storybook/.eslintrc.json | 4 +++- apps/e2e/ag-grid-storybook/.storybook/manager.ts | 2 +- .../src/app/shared/baseball-players-data.ts | 5 +++-- .../angular-tree-component-storybook/.eslintrc.json | 4 +++- .../.storybook/manager.ts | 2 +- .../src/app/datepicker/datepicker.component.ts | 12 ++++++------ apps/e2e/flyout-storybook/.eslintrc.json | 4 +++- apps/e2e/flyout-storybook/.storybook/manager.ts | 2 +- apps/e2e/lists-storybook/src/polyfills.ts | 1 + .../src/app/autocomplete/autocomplete.component.ts | 2 +- apps/e2e/modals-storybook/.eslintrc.json | 4 +++- apps/e2e/modals-storybook/.storybook/manager.ts | 2 +- apps/e2e/theme-storybook/.eslintrc.json | 4 +++- apps/e2e/theme-storybook/.storybook/manager.ts | 2 +- .../app/switch-controls/switch-controls.component.ts | 10 +++++----- apps/e2e/tiles-storybook/.eslintrc.json | 4 +++- apps/e2e/tiles-storybook/.storybook/manager.ts | 2 +- .../update-9/ag-grid-29/ag-grid-29.schematic.spec.ts | 6 +++--- .../move-page-component.schematic.spec.ts | 12 ++++++++++-- .../packages/src/schematics/utility/json-file.ts | 1 + .../src/workflow/percy-api/percy-api.ts | 2 +- .../src/workflow/verify-e2e/verify-e2e.spec.ts | 2 +- package-lock.json | 10 +++++----- package.json | 4 ++-- 27 files changed, 67 insertions(+), 45 deletions(-) diff --git a/.eslintrc-overrides.json b/.eslintrc-overrides.json index 6d33ecbf71..1c2399dd0b 100644 --- a/.eslintrc-overrides.json +++ b/.eslintrc-overrides.json @@ -5,7 +5,9 @@ "rules": { "@typescript-eslint/ban-types": "warn", "@typescript-eslint/no-empty-function": "warn", + "@typescript-eslint/no-explicit-any": "warn", "@typescript-eslint/no-non-null-assertion": "warn", + "@typescript-eslint/no-unused-vars": "warn", "@typescript-eslint/explicit-function-return-type": "warn", "@typescript-eslint/explicit-member-accessibility": [ "error", diff --git a/.eslintrc.json b/.eslintrc.json index 112d44a60f..560b0f7ca6 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -30,10 +30,7 @@ { "files": ["*.ts", "*.tsx"], "extends": ["plugin:@nx/typescript", "prettier"], - "rules": { - "@typescript-eslint/no-explicit-any": ["warn", {}], - "@typescript-eslint/no-unused-vars": ["warn", {}] - } + "rules": {} }, { "files": ["*.js", "*.jsx"], diff --git a/.nvmrc b/.nvmrc index 02c8b485ed..a9d087399d 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -18.18.0 +18.19.0 diff --git a/apps/e2e/ag-grid-storybook/.eslintrc.json b/apps/e2e/ag-grid-storybook/.eslintrc.json index 8ebcbfd59a..3b1cb3809d 100644 --- a/apps/e2e/ag-grid-storybook/.eslintrc.json +++ b/apps/e2e/ag-grid-storybook/.eslintrc.json @@ -6,7 +6,9 @@ "files": ["*.ts"], "extends": [ "plugin:@nx/angular", - "plugin:@angular-eslint/template/process-inline-templates" + "plugin:@angular-eslint/template/process-inline-templates", + "../../../.eslintrc-overrides.json", + "prettier" ], "rules": { "@angular-eslint/directive-selector": [ diff --git a/apps/e2e/ag-grid-storybook/.storybook/manager.ts b/apps/e2e/ag-grid-storybook/.storybook/manager.ts index b955a6fc63..7db9e198db 100644 --- a/apps/e2e/ag-grid-storybook/.storybook/manager.ts +++ b/apps/e2e/ag-grid-storybook/.storybook/manager.ts @@ -1,2 +1,2 @@ -// eslint-disable-next-line @nx/enforce-module-boundaries +// eslint-disable-next-line @nx/enforce-module-boundaries, no-restricted-syntax export * from '../../../../.storybook/manager'; diff --git a/apps/e2e/ag-grid-storybook/src/app/shared/baseball-players-data.ts b/apps/e2e/ag-grid-storybook/src/app/shared/baseball-players-data.ts index 374d201c7c..b4edfb89e2 100644 --- a/apps/e2e/ag-grid-storybook/src/app/shared/baseball-players-data.ts +++ b/apps/e2e/ag-grid-storybook/src/app/shared/baseball-players-data.ts @@ -1,6 +1,6 @@ import { SkyCellType } from '@skyux/ag-grid'; -import { ColDef } from 'ag-grid-community'; +import { ColDef, ValueFormatterParams } from 'ag-grid-community'; import { InlineHelpComponent } from './inline-help/inline-help.component'; @@ -62,7 +62,8 @@ export const columnDefinitions: ColDef[] = [ headerName, sortable: false, cellClass: 'booleanType', - valueFormatter: (params: any) => (params.value ? 'Yes' : 'No'), + valueFormatter: (params: ValueFormatterParams) => + params.value ? 'Yes' : 'No', })), { field: 'vote%', diff --git a/apps/e2e/angular-tree-component-storybook/.eslintrc.json b/apps/e2e/angular-tree-component-storybook/.eslintrc.json index bf8df14289..17567fe4ab 100644 --- a/apps/e2e/angular-tree-component-storybook/.eslintrc.json +++ b/apps/e2e/angular-tree-component-storybook/.eslintrc.json @@ -24,7 +24,9 @@ }, "extends": [ "plugin:@nx/angular", - "plugin:@angular-eslint/template/process-inline-templates" + "plugin:@angular-eslint/template/process-inline-templates", + "../../../.eslintrc-overrides.json", + "prettier" ] }, { diff --git a/apps/e2e/angular-tree-component-storybook/.storybook/manager.ts b/apps/e2e/angular-tree-component-storybook/.storybook/manager.ts index b955a6fc63..7db9e198db 100644 --- a/apps/e2e/angular-tree-component-storybook/.storybook/manager.ts +++ b/apps/e2e/angular-tree-component-storybook/.storybook/manager.ts @@ -1,2 +1,2 @@ -// eslint-disable-next-line @nx/enforce-module-boundaries +// eslint-disable-next-line @nx/enforce-module-boundaries, no-restricted-syntax export * from '../../../../.storybook/manager'; diff --git a/apps/e2e/datetime-storybook/src/app/datepicker/datepicker.component.ts b/apps/e2e/datetime-storybook/src/app/datepicker/datepicker.component.ts index be4aaeef72..ea21115c1e 100644 --- a/apps/e2e/datetime-storybook/src/app/datepicker/datepicker.component.ts +++ b/apps/e2e/datetime-storybook/src/app/datepicker/datepicker.component.ts @@ -1,4 +1,4 @@ -import { Component, inject } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; import { AbstractControl, FormBuilder, @@ -19,7 +19,7 @@ import { delay, distinctUntilChanged } from 'rxjs/operators'; selector: 'app-datepicker', templateUrl: './datepicker.component.html', }) -export class DatepickerComponent { +export class DatepickerComponent implements OnInit { public dateFormat: string | undefined = undefined; public disabled = false; public minDate: Date | undefined; @@ -29,7 +29,7 @@ export class DatepickerComponent { selectedDate: FormControl; }>; public showCustomDates = false; - public selectedDate: Date | undefined; + public selectedDate: Date | string | undefined; public startingDay: number | undefined; public strict = false; public readonly ready$ = inject(FontLoadingService).ready(); @@ -49,11 +49,11 @@ export class DatepickerComponent { public ngOnInit(): void { this.reactiveDate.statusChanges .pipe(distinctUntilChanged()) - .subscribe((status: any) => { + .subscribe((status) => { console.log('Status changed:', status); }); - this.reactiveDate.valueChanges.subscribe((value: any) => { + this.reactiveDate.valueChanges.subscribe((value) => { console.log('Value changed:', value); }); } @@ -94,7 +94,7 @@ export class DatepickerComponent { public setInvalidValue(): void { this.reactiveDate.setValue('invalid'); - (this.selectedDate as any) = 'invalid'; + this.selectedDate = 'invalid'; } public onToggleCustomDatesClick(): void { diff --git a/apps/e2e/flyout-storybook/.eslintrc.json b/apps/e2e/flyout-storybook/.eslintrc.json index bf8df14289..17567fe4ab 100644 --- a/apps/e2e/flyout-storybook/.eslintrc.json +++ b/apps/e2e/flyout-storybook/.eslintrc.json @@ -24,7 +24,9 @@ }, "extends": [ "plugin:@nx/angular", - "plugin:@angular-eslint/template/process-inline-templates" + "plugin:@angular-eslint/template/process-inline-templates", + "../../../.eslintrc-overrides.json", + "prettier" ] }, { diff --git a/apps/e2e/flyout-storybook/.storybook/manager.ts b/apps/e2e/flyout-storybook/.storybook/manager.ts index b955a6fc63..7db9e198db 100644 --- a/apps/e2e/flyout-storybook/.storybook/manager.ts +++ b/apps/e2e/flyout-storybook/.storybook/manager.ts @@ -1,2 +1,2 @@ -// eslint-disable-next-line @nx/enforce-module-boundaries +// eslint-disable-next-line @nx/enforce-module-boundaries, no-restricted-syntax export * from '../../../../.storybook/manager'; diff --git a/apps/e2e/lists-storybook/src/polyfills.ts b/apps/e2e/lists-storybook/src/polyfills.ts index dd5bf8a5a3..3276424c69 100644 --- a/apps/e2e/lists-storybook/src/polyfills.ts +++ b/apps/e2e/lists-storybook/src/polyfills.ts @@ -56,4 +56,5 @@ import 'zone.js'; // Fix for crossvent "global is not defined" error. The crossvent library // is used by Dragula, which in turn is used by multiple SKY UX components. // See: https://github.com/bevacqua/dragula/issues/602 +// eslint-disable-next-line @typescript-eslint/no-explicit-any (window as any).global = window; diff --git a/apps/e2e/lookup-storybook/src/app/autocomplete/autocomplete.component.ts b/apps/e2e/lookup-storybook/src/app/autocomplete/autocomplete.component.ts index 61cb28880c..7067ffd326 100644 --- a/apps/e2e/lookup-storybook/src/app/autocomplete/autocomplete.component.ts +++ b/apps/e2e/lookup-storybook/src/app/autocomplete/autocomplete.component.ts @@ -7,7 +7,7 @@ import { FontLoadingService } from '@skyux/storybook'; styleUrls: ['./autocomplete.component.scss'], }) export class AutocompleteComponent { - public data: any[] = [ + public data = [ { name: 'Red' }, { name: 'Blue' }, { name: 'Green' }, diff --git a/apps/e2e/modals-storybook/.eslintrc.json b/apps/e2e/modals-storybook/.eslintrc.json index 8ebcbfd59a..3b1cb3809d 100644 --- a/apps/e2e/modals-storybook/.eslintrc.json +++ b/apps/e2e/modals-storybook/.eslintrc.json @@ -6,7 +6,9 @@ "files": ["*.ts"], "extends": [ "plugin:@nx/angular", - "plugin:@angular-eslint/template/process-inline-templates" + "plugin:@angular-eslint/template/process-inline-templates", + "../../../.eslintrc-overrides.json", + "prettier" ], "rules": { "@angular-eslint/directive-selector": [ diff --git a/apps/e2e/modals-storybook/.storybook/manager.ts b/apps/e2e/modals-storybook/.storybook/manager.ts index b955a6fc63..7db9e198db 100644 --- a/apps/e2e/modals-storybook/.storybook/manager.ts +++ b/apps/e2e/modals-storybook/.storybook/manager.ts @@ -1,2 +1,2 @@ -// eslint-disable-next-line @nx/enforce-module-boundaries +// eslint-disable-next-line @nx/enforce-module-boundaries, no-restricted-syntax export * from '../../../../.storybook/manager'; diff --git a/apps/e2e/theme-storybook/.eslintrc.json b/apps/e2e/theme-storybook/.eslintrc.json index 8ebcbfd59a..3b1cb3809d 100644 --- a/apps/e2e/theme-storybook/.eslintrc.json +++ b/apps/e2e/theme-storybook/.eslintrc.json @@ -6,7 +6,9 @@ "files": ["*.ts"], "extends": [ "plugin:@nx/angular", - "plugin:@angular-eslint/template/process-inline-templates" + "plugin:@angular-eslint/template/process-inline-templates", + "../../../.eslintrc-overrides.json", + "prettier" ], "rules": { "@angular-eslint/directive-selector": [ diff --git a/apps/e2e/theme-storybook/.storybook/manager.ts b/apps/e2e/theme-storybook/.storybook/manager.ts index b955a6fc63..7db9e198db 100644 --- a/apps/e2e/theme-storybook/.storybook/manager.ts +++ b/apps/e2e/theme-storybook/.storybook/manager.ts @@ -1,2 +1,2 @@ -// eslint-disable-next-line @nx/enforce-module-boundaries +// eslint-disable-next-line @nx/enforce-module-boundaries, no-restricted-syntax export * from '../../../../.storybook/manager'; diff --git a/apps/e2e/theme-storybook/src/app/switch-controls/switch-controls.component.ts b/apps/e2e/theme-storybook/src/app/switch-controls/switch-controls.component.ts index a722dbd3e7..b5944a6b63 100644 --- a/apps/e2e/theme-storybook/src/app/switch-controls/switch-controls.component.ts +++ b/apps/e2e/theme-storybook/src/app/switch-controls/switch-controls.component.ts @@ -9,14 +9,14 @@ import { FormBuilder, FormGroup } from '@angular/forms'; export class SwitchControlsComponent { public myForm: FormGroup; - public checkboxOptions: any[] = [ + public checkboxOptions = [ { label: 'Checked Checkbox', checked: true, disabled: false }, { label: 'Unchecked Checkbox', checked: false, disabled: false }, { label: 'Disabled Checkbox', checked: false, disabled: true }, { label: 'Disabled Checked Checkbox', checked: true, disabled: true }, ]; - public checkboxIconGroupOptions: any[] = [ + public checkboxIconGroupOptions = [ { label: 'Bold', checked: true, icon: 'bold', disabled: false }, { label: 'Italicized', checked: false, icon: 'italic', disabled: false }, { label: 'Underlined', checked: false, icon: 'underline', disabled: false }, @@ -24,18 +24,18 @@ export class SwitchControlsComponent { { label: 'Outdent', icon: 'outdent', checked: true, disabled: true }, ]; - public radioGroupIconOptions: any[] = [ + public radioGroupIconOptions = [ { name: 'Left align', value: '1', icon: 'align-left', disabled: false }, { name: 'Center align', value: '2', icon: 'align-center', disabled: false }, { name: 'Right align', value: '3', icon: 'align-right', disabled: false }, ]; - public radioGroupIconDisabledOptions: any[] = [ + public radioGroupIconDisabledOptions = [ { name: 'Indent', value: '1', icon: 'indent', disabled: true }, { name: 'Outdent', value: '2', icon: 'outdent', disabled: true }, ]; - public radioOptions: any[] = [ + public radioOptions = [ { name: 'Selected radio button', value: '1', disabled: false }, { name: 'Unselected radio button', value: '2', disabled: false }, { name: 'Disabled radio button', value: '3', disabled: true }, diff --git a/apps/e2e/tiles-storybook/.eslintrc.json b/apps/e2e/tiles-storybook/.eslintrc.json index 8ebcbfd59a..3b1cb3809d 100644 --- a/apps/e2e/tiles-storybook/.eslintrc.json +++ b/apps/e2e/tiles-storybook/.eslintrc.json @@ -6,7 +6,9 @@ "files": ["*.ts"], "extends": [ "plugin:@nx/angular", - "plugin:@angular-eslint/template/process-inline-templates" + "plugin:@angular-eslint/template/process-inline-templates", + "../../../.eslintrc-overrides.json", + "prettier" ], "rules": { "@angular-eslint/directive-selector": [ diff --git a/apps/e2e/tiles-storybook/.storybook/manager.ts b/apps/e2e/tiles-storybook/.storybook/manager.ts index b955a6fc63..7db9e198db 100644 --- a/apps/e2e/tiles-storybook/.storybook/manager.ts +++ b/apps/e2e/tiles-storybook/.storybook/manager.ts @@ -1,2 +1,2 @@ -// eslint-disable-next-line @nx/enforce-module-boundaries +// eslint-disable-next-line @nx/enforce-module-boundaries, no-restricted-syntax export * from '../../../../.storybook/manager'; diff --git a/libs/components/packages/src/schematics/migrations/update-9/ag-grid-29/ag-grid-29.schematic.spec.ts b/libs/components/packages/src/schematics/migrations/update-9/ag-grid-29/ag-grid-29.schematic.spec.ts index 6db382a30e..cc31382488 100644 --- a/libs/components/packages/src/schematics/migrations/update-9/ag-grid-29/ag-grid-29.schematic.spec.ts +++ b/libs/components/packages/src/schematics/migrations/update-9/ag-grid-29/ag-grid-29.schematic.spec.ts @@ -11,10 +11,10 @@ describe('ag-grid-29.schematic', () => { ); async function setupTest( - packageJson: { dependencies?: any } = {}, - build: { options?: any } = {}, + packageJson: { dependencies?: Record } = {}, + build: { options?: { styles: string[] } } = {}, appOrLib: 'application' | 'library' = 'application', - ) { + ): Promise<{ tree: Tree }> { let tree: Tree; if (appOrLib === 'application') { tree = await createTestApp(runner, { projectName: 'test' }); diff --git a/libs/components/packages/src/schematics/migrations/update-9/move-page-component/move-page-component.schematic.spec.ts b/libs/components/packages/src/schematics/migrations/update-9/move-page-component/move-page-component.schematic.spec.ts index 55028fe6ce..9cbc7c6cd8 100644 --- a/libs/components/packages/src/schematics/migrations/update-9/move-page-component/move-page-component.schematic.spec.ts +++ b/libs/components/packages/src/schematics/migrations/update-9/move-page-component/move-page-component.schematic.spec.ts @@ -17,6 +17,10 @@ import { updateWorkspace, } from '../../../utility/workspace'; +type PackageJson = { + dependencies: Record; +}; + describe('MovePageComponentSchematic', () => { const runner = new SchematicTestRunner( 'schematics', @@ -78,7 +82,9 @@ describe('MovePageComponentSchematic', () => { export class CustomModule {}" `); expect( - (result.readJson('package.json') as any).dependencies['@skyux/pages'], + (result.readJson('package.json') as PackageJson).dependencies[ + '@skyux/pages' + ], ).toEqual('0.0.0'); }); @@ -144,7 +150,9 @@ describe('MovePageComponentSchematic', () => { import { AgGridModule } from 'ag-grid-angular';" `); expect( - (result.readJson('package.json') as any).dependencies['@skyux/pages'], + (result.readJson('package.json') as PackageJson).dependencies[ + '@skyux/pages' + ], ).toEqual('0.0.0'); }); diff --git a/libs/components/packages/src/schematics/utility/json-file.ts b/libs/components/packages/src/schematics/utility/json-file.ts index ef9e1232a0..78540ea107 100644 --- a/libs/components/packages/src/schematics/utility/json-file.ts +++ b/libs/components/packages/src/schematics/utility/json-file.ts @@ -44,6 +44,7 @@ export class JsonFile { } } + // eslint-disable-next-line @typescript-eslint/no-explicit-any public get(jsonPath: JsonPath): any { const jsonAstNode = this.#getJsonAst(); if (!jsonAstNode) { diff --git a/libs/sdk/e2e-schematics/src/workflow/percy-api/percy-api.ts b/libs/sdk/e2e-schematics/src/workflow/percy-api/percy-api.ts index 32ca899d0d..4f5b4d4442 100644 --- a/libs/sdk/e2e-schematics/src/workflow/percy-api/percy-api.ts +++ b/libs/sdk/e2e-schematics/src/workflow/percy-api/percy-api.ts @@ -205,7 +205,7 @@ async function getRemovedSnapshots( 'removed snapshots', ).then((response) => response - .filter((snapshot: any) => snapshot.type === 'snapshots') + .filter((snapshot) => snapshot.type === 'snapshots') .map((snapshot: Snapshot) => snapshot.attributes.name) .sort((a: string, b: string) => a.localeCompare(b)), ); diff --git a/libs/sdk/e2e-schematics/src/workflow/verify-e2e/verify-e2e.spec.ts b/libs/sdk/e2e-schematics/src/workflow/verify-e2e/verify-e2e.spec.ts index 01ee09e30e..016d5a4dc4 100644 --- a/libs/sdk/e2e-schematics/src/workflow/verify-e2e/verify-e2e.spec.ts +++ b/libs/sdk/e2e-schematics/src/workflow/verify-e2e/verify-e2e.spec.ts @@ -346,7 +346,7 @@ describe('verify-e2e', () => { 'project-missing', 'project-other', ]; - checkPercyBuild.mockImplementation((...args: any) => + checkPercyBuild.mockImplementation((...args) => Promise.resolve({ project: `${args[0]}`, approved: false, diff --git a/package-lock.json b/package-lock.json index bfaca47559..68181cae2d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -142,8 +142,8 @@ "typescript": "5.1.6" }, "engines": { - "node": "^18.14.2", - "npm": "^9.5.0" + "node": "^18.19.0", + "npm": "^10.2.3" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -155,9 +155,9 @@ } }, "node_modules/@adobe/css-tools": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.1.tgz", - "integrity": "sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==" + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.2.tgz", + "integrity": "sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==" }, "node_modules/@ampproject/remapping": { "version": "2.2.1", diff --git a/package.json b/package.json index aa4d412171..5fc82eef6e 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ "dev:pristine": "skyux-dev pristine-commit" }, "engines": { - "node": "^18.14.2", - "npm": "^9.5.0" + "node": "^18.19.0", + "npm": "^10.2.3" }, "config": { "commitizen": { From acc81b73aa2513170ecd01e1c748f711e1992ed5 Mon Sep 17 00:00:00 2001 From: Blackbaud-SteveBrush Date: Mon, 22 Jan 2024 14:49:44 -0500 Subject: [PATCH 2/2] fix build --- .../src/app/datepicker/datepicker.component.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/e2e/datetime-storybook/src/app/datepicker/datepicker.component.ts b/apps/e2e/datetime-storybook/src/app/datepicker/datepicker.component.ts index ea21115c1e..779fe2f626 100644 --- a/apps/e2e/datetime-storybook/src/app/datepicker/datepicker.component.ts +++ b/apps/e2e/datetime-storybook/src/app/datepicker/datepicker.component.ts @@ -29,7 +29,7 @@ export class DatepickerComponent implements OnInit { selectedDate: FormControl; }>; public showCustomDates = false; - public selectedDate: Date | string | undefined; + public selectedDate: Date | undefined; public startingDay: number | undefined; public strict = false; public readonly ready$ = inject(FontLoadingService).ready(); @@ -94,7 +94,8 @@ export class DatepickerComponent implements OnInit { public setInvalidValue(): void { this.reactiveDate.setValue('invalid'); - this.selectedDate = 'invalid'; + // Calendar works with strings but the API only supports Date or undefined. + this.selectedDate = 'invalid' as unknown as Date; } public onToggleCustomDatesClick(): void {