feat(stark-ui): update Angular from 13.0.0 to 14.0.0

Replace `FormGroup` type to `UntypedFormGroup` and `FormControl` to `UntypedFormControl`

fix test `app-sidebar.component.ts`

packages/stark-ui/package.json

@@ -18,7 +18,7 @@
     "npm": ">=8.19.1"
   },
   "dependencies": {
-    "@angular/material-moment-adapter": "^13.3.9",
+    "@angular/material-moment-adapter": "^14.2.7",
     "@mdi/angular-material": "^4.0.96",
     "@sqltools/formatter": "^1.2.3",
     "@types/nouislider": "^9.0.10",
@@ -32,10 +32,10 @@
     "text-mask-core": "^5.1.2"
   },
   "peerDependencies": {
-    "@angular/animations": "^13.4.0",
-    "@angular/cdk": "^13.3.9",
-    "@angular/forms": "^13.4.0",
-    "@angular/material": "^13.3.9",
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/forms": "^14.3.0",
+    "@angular/material": "^14.2.7",
     "@nationalbankbelgium/stark-core": "0.0.0-PLACEHOLDER-VERSION"
   },
   "scripts": {

packages/stark-ui/src/modules/app-sidebar/components/app-sidebar.component.spec.ts

@@ -62,8 +62,11 @@ describe("AppSidebarComponent", () => {
 		mockBreakPointObserver = jasmine.createSpyObj("BreakPointObserver", ["isMatched", "observe", "ngOnDestroy"]);
 		// add functionality to the `observe` Spy
 		mockBreakPointObserver.observe.and.callFake((value: string | string[]) => {
-			expect([[BREAKPOINT_STRING], BREAKPOINT_STRING]).toContain(value);
-			return _fakeBreakPointObservable;
+			if ((typeof value === "string" && value === BREAKPOINT_STRING) || (Array.isArray(value) && value[0] === BREAKPOINT_STRING)) {
+				// allow to trigger change for the width of the screen.
+				return _fakeBreakPointObservable;
+			}
+			return new Subject<BreakpointState>();
 		});
 	});
 

packages/stark-ui/src/modules/date-picker/components/date-picker.component.spec.ts

@@ -2,7 +2,7 @@
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { By } from "@angular/platform-browser";
 import { Component, ViewChild } from "@angular/core";
-import { FormControl, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
+import { UntypedFormControl, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from "@angular/material/core";
 import { MatDatepickerModule } from "@angular/material/datepicker";
@@ -91,7 +91,7 @@ class TestHostFormControlComponent {
 	@ViewChild(StarkDatePickerComponent, { static: true })
 	public datePickerComponent!: StarkDatePickerComponent;
 
-	public formControl = new FormControl();
+	public formControl = new UntypedFormControl();
 	public pickerId?: string;
 	public pickerName?: string;
 	public dateMask?: StarkDatePickerMaskConfig;
@@ -141,7 +141,7 @@ describe("DatePickerComponent", () => {
 			// re-create component with a form control with "required" validator
 			hostFixture = TestBed.createComponent(TestHostFormControlComponent);
 			hostComponent = hostFixture.componentInstance;
-			hostComponent.formControl = new FormControl(undefined, Validators.required); // initially invalid
+			hostComponent.formControl = new UntypedFormControl(undefined, Validators.required); // initially invalid
 			hostFixture.detectChanges(); // trigger initial data binding
 
 			const formFieldDebugElement = hostFixture.debugElement.query(By.directive(MatFormField));
@@ -162,7 +162,7 @@ describe("DatePickerComponent", () => {
 			// re-create component with a form control with "required" validator
 			hostFixture = TestBed.createComponent(TestHostFormControlComponent);
 			hostComponent = hostFixture.componentInstance;
-			hostComponent.formControl = new FormControl(undefined, Validators.required); // initially invalid
+			hostComponent.formControl = new UntypedFormControl(undefined, Validators.required); // initially invalid
 			hostFixture.detectChanges(); // trigger initial data binding
 
 			const formFieldDebugElement = hostFixture.debugElement.query(By.directive(MatFormField));
@@ -178,7 +178,7 @@ describe("DatePickerComponent", () => {
 			// re-create component with a form control with "required" validator
 			hostFixture = TestBed.createComponent(TestHostFormControlComponent);
 			hostComponent = hostFixture.componentInstance;
-			hostComponent.formControl = new FormControl(undefined, Validators.required); // initially invalid
+			hostComponent.formControl = new UntypedFormControl(undefined, Validators.required); // initially invalid
 			hostFixture.detectChanges(); // trigger initial data binding
 
 			const formFieldDebugElement = hostFixture.debugElement.query(By.directive(MatFormField));

packages/stark-ui/src/modules/date-range-picker/components/date-range-picker.component.spec.ts

@@ -2,7 +2,7 @@
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { Component, EventEmitter, ViewChild } from "@angular/core";
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from "@angular/core/testing";
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, ValidationErrors } from "@angular/forms";
+import { UntypedFormControl, UntypedFormGroup, FormsModule, ReactiveFormsModule, ValidationErrors } from "@angular/forms";
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from "@angular/material/core";
 import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from "@angular/material-moment-adapter";
 import { MatDatepickerModule } from "@angular/material/datepicker";
@@ -41,19 +41,19 @@ describe("DateRangePickerComponent", () => {
 			</stark-date-range-picker>
 		`
 	})
-	class TestFormGroupComponent {
+	class TestUntypedFormGroupComponent {
 		@ViewChild(StarkDateRangePickerComponent, { static: true })
 		public dateRangePicker!: StarkDateRangePickerComponent;
 
-		public formGroup = new FormGroup({
-			startDate: new FormControl(),
-			endDate: new FormControl()
+		public formGroup = new UntypedFormGroup({
+			startDate: new UntypedFormControl(),
+			endDate: new UntypedFormControl()
 		});
 	}
 
 	beforeEach(waitForAsync(() =>
 		TestBed.configureTestingModule({
-			declarations: [StarkDateRangePickerComponent, TestModelComponent, TestFormGroupComponent],
+			declarations: [StarkDateRangePickerComponent, TestModelComponent, TestUntypedFormGroupComponent],
 			imports: [
 				NoopAnimationsModule,
 				MatDatepickerModule,
@@ -335,12 +335,12 @@ describe("DateRangePickerComponent", () => {
 	});
 
 	describe("with formGroup", () => {
-		let hostFixture: ComponentFixture<TestFormGroupComponent>;
-		let hostComponent: TestFormGroupComponent;
+		let hostFixture: ComponentFixture<TestUntypedFormGroupComponent>;
+		let hostComponent: TestUntypedFormGroupComponent;
 		let component: StarkDateRangePickerComponent;
 
 		beforeEach(() => {
-			hostFixture = TestBed.createComponent(TestFormGroupComponent);
+			hostFixture = TestBed.createComponent(TestUntypedFormGroupComponent);
 			hostComponent = hostFixture.componentInstance;
 			component = hostComponent.dateRangePicker;
 			hostFixture.detectChanges();
@@ -414,9 +414,9 @@ describe("DateRangePickerComponent", () => {
 			});
 
 			it("should log an error when the given 'rangeFormGroup' does not contain expected 'startDate' and 'endDate' controls", () => {
-				hostComponent.formGroup = new FormGroup({
-					start: new FormControl(new Date(2019, 0, 1)),
-					end: new FormControl(new Date(2019, 0, 2))
+				hostComponent.formGroup = new UntypedFormGroup({
+					start: new UntypedFormControl(new Date(2019, 0, 1)),
+					end: new UntypedFormControl(new Date(2019, 0, 2))
 				});
 				hostFixture.detectChanges();
 

packages/stark-ui/src/modules/date-range-picker/components/date-range-picker.component.ts

@@ -17,8 +17,8 @@ import {
 import {
 	AbstractControl,
 	ControlValueAccessor,
-	FormControl,
-	FormGroup,
+	UntypedFormControl,
+	UntypedFormGroup,
 	NG_VALUE_ACCESSOR,
 	NgControl,
 	ValidatorFn,
@@ -90,14 +90,14 @@ export class StarkDateRangePickerComponent extends AbstractStarkUiComponent impl
 	 *   </ng-container>
 	 * </stark-date-range-picker>
 	 */
-	public get startDateFormControl(): FormControl {
+	public get startDateFormControl(): UntypedFormControl {
 		return this._startDate;
 	}
 
 	/**
 	 * @ignore
 	 */
-	private _startDate!: FormControl; // will be defined by '_setupFormControls()' called in the constructor
+	private _startDate!: UntypedFormControl; // will be defined by '_setupFormControls()' called in the constructor
 
 	/**
 	 * Label to be displayed in the end datepicker
@@ -187,14 +187,14 @@ export class StarkDateRangePickerComponent extends AbstractStarkUiComponent impl
 	 *   </ng-container>
 	 * </stark-date-range-picker>
 	 */
-	public get endDateFormControl(): FormControl {
+	public get endDateFormControl(): UntypedFormControl {
 		return this._endDate;
 	}
 
 	/**
 	 * @ignore
 	 */
-	private _endDate!: FormControl; // will be defined by '_setupFormControls()' called in the constructor
+	private _endDate!: UntypedFormControl; // will be defined by '_setupFormControls()' called in the constructor
 
 	/**
 	 * Label to be displayed in the end datepicker
@@ -265,9 +265,9 @@ export class StarkDateRangePickerComponent extends AbstractStarkUiComponent impl
 	 * Input to manage both start date and end date.
 	 */
 	@Input()
-	public set rangeFormGroup(val: FormGroup) {
+	public set rangeFormGroup(val: UntypedFormGroup) {
 		const { startDate, endDate } = val.controls;
-		if (!(startDate instanceof FormControl && endDate instanceof FormControl)) {
+		if (!(startDate instanceof UntypedFormControl && endDate instanceof UntypedFormControl)) {
 			this.logger.error(`[${componentName}]: "formGroup" requires a FormControl for startDate and another one for endDate`);
 			return;
 		}
@@ -282,7 +282,7 @@ export class StarkDateRangePickerComponent extends AbstractStarkUiComponent impl
 	/**
 	 * @ignore
 	 */
-	private _formGroup?: FormGroup;
+	private _formGroup?: UntypedFormGroup;
 
 	/**
 	 * Filter function or a string
@@ -513,14 +513,14 @@ export class StarkDateRangePickerComponent extends AbstractStarkUiComponent impl
 				Validators.compose([this.startDateFormControl.validator, this._requiredValidator, this._startBeforeEndValidator])
 			);
 		} else {
-			this._startDate = new FormControl(undefined, [this._requiredValidator, this._startBeforeEndValidator]);
+			this._startDate = new UntypedFormControl(undefined, [this._requiredValidator, this._startBeforeEndValidator]);
 		}
 		if (this.endDateFormControl) {
 			this.endDateFormControl.setValidators(
 				Validators.compose([this.endDateFormControl.validator, this._requiredValidator, this._endAfterStartValidator])
 			);
 		} else {
-			this._endDate = new FormControl(undefined, [this._requiredValidator, this._endAfterStartValidator]);
+			this._endDate = new UntypedFormControl(undefined, [this._requiredValidator, this._endAfterStartValidator]);
 		}
 
 		for (const subscription of this.subs) {

packages/stark-ui/src/modules/date-time-picker/components/date-time-picker.component.spec.ts

@@ -2,7 +2,7 @@
 import { Component, ViewChild } from "@angular/core";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
-import { FormControl, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
+import { UntypedFormControl, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { By } from "@angular/platform-browser";
 import { MatFormField, MatFormFieldModule } from "@angular/material/form-field";
 import { MatInputModule } from "@angular/material/input";
@@ -94,7 +94,7 @@ class TestHostFormControlComponent {
 	@ViewChild(StarkDateTimePickerComponent, { static: true })
 	public dateTimePickerComponent!: StarkDateTimePickerComponent;
 
-	public formControl = new FormControl();
+	public formControl = new UntypedFormControl();
 	public pickerId?: string;
 	public pickerName?: string;
 	public placeholder?: string;
@@ -152,7 +152,7 @@ describe("DateTimePickerComponent", () => {
 			// re-create component with a form control with "required" validator
 			hostFixture = TestBed.createComponent(TestHostFormControlComponent);
 			hostComponent = hostFixture.componentInstance;
-			hostComponent.formControl = new FormControl(undefined, Validators.required); // initially invalid
+			hostComponent.formControl = new UntypedFormControl(undefined, Validators.required); // initially invalid
 			hostFixture.detectChanges(); // trigger initial data binding
 
 			let formFieldDebugElement = hostFixture.debugElement.query(By.directive(MatFormField));
@@ -172,7 +172,7 @@ describe("DateTimePickerComponent", () => {
 			// re-create component with a form control with "required" validator
 			hostFixture = TestBed.createComponent(TestHostFormControlComponent);
 			hostComponent = hostFixture.componentInstance;
-			hostComponent.formControl = new FormControl(undefined, Validators.required); // initially invalid
+			hostComponent.formControl = new UntypedFormControl(undefined, Validators.required); // initially invalid
 			hostFixture.detectChanges(); // trigger initial data binding
 
 			formFieldDebugElement = hostFixture.debugElement.query(By.directive(MatFormField));
@@ -194,7 +194,7 @@ describe("DateTimePickerComponent", () => {
 			// re-create component with a form control with "required" validator
 			hostFixture = TestBed.createComponent(TestHostFormControlComponent);
 			hostComponent = hostFixture.componentInstance;
-			hostComponent.formControl = new FormControl(undefined, Validators.required); // initially invalid
+			hostComponent.formControl = new UntypedFormControl(undefined, Validators.required); // initially invalid
 			hostFixture.detectChanges(); // trigger initial data binding
 
 			const formFieldDebugElement = hostFixture.debugElement.query(By.directive(MatFormField));
@@ -210,7 +210,7 @@ describe("DateTimePickerComponent", () => {
 			// re-create component with a form control with "required" validator
 			hostFixture = TestBed.createComponent(TestHostFormControlComponent);
 			hostComponent = hostFixture.componentInstance;
-			hostComponent.formControl = new FormControl(undefined, Validators.required); // initially invalid
+			hostComponent.formControl = new UntypedFormControl(undefined, Validators.required); // initially invalid
 			hostFixture.detectChanges(); // trigger initial data binding
 
 			const formFieldDebugElement = hostFixture.debugElement.query(By.directive(MatFormField));

packages/stark-ui/src/modules/date-time-picker/components/date-time-picker.component.ts

@@ -20,8 +20,8 @@ import {
 	AbstractControl,
 	ControlValueAccessor,
 	FormBuilder,
-	FormControl,
-	FormGroup,
+	UntypedFormControl,
+	UntypedFormGroup,
 	NG_VALIDATORS,
 	NG_VALUE_ACCESSOR,
 	NgControl,
@@ -445,7 +445,7 @@ export class StarkDateTimePickerComponent
 	/**
 	 * @ignore
 	 */
-	public dateTimeFormGroup: FormGroup;
+	public dateTimeFormGroup: UntypedFormGroup;
 
 	/**
 	 * Angular validator to check whether the component's date is earlier than the given minDate
@@ -531,8 +531,8 @@ export class StarkDateTimePickerComponent
 		super(renderer, elementRef);
 
 		this.dateTimeFormGroup = this._fb.group({
-			date: new FormControl(undefined),
-			time: new FormControl(undefined)
+			date: new UntypedFormControl(undefined),
+			time: new UntypedFormControl(undefined)
 		});
 
 		this._fm.monitor(elementRef, true).subscribe((origin: FocusOrigin) => {

packages/stark-ui/src/modules/dialogs/components/prompt-dialog.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Inject, ViewEncapsulation } from "@angular/core";
-import { FormControl } from "@angular/forms";
+import { UntypedFormControl } from "@angular/forms";
 import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { StarkPromptDialogContent } from "./prompt-dialog-content.intf";
 
@@ -29,7 +29,7 @@ export class StarkPromptDialogComponent {
 	/**
 	 * @ignore
 	 */
-	public formControl: FormControl;
+	public formControl: UntypedFormControl;
 
 	/**
 	 * Class constructor
@@ -41,7 +41,7 @@ export class StarkPromptDialogComponent {
 		public dialogRef: MatDialogRef<StarkPromptDialogComponent, StarkPromptDialogResult>,
 		@Inject(MAT_DIALOG_DATA) public content: StarkPromptDialogContent
 	) {
-		this.formControl = new FormControl(this.content.initialValue);
+		this.formControl = new UntypedFormControl(this.content.initialValue);
 	}
 
 	/**

packages/stark-ui/src/modules/dropdown/components/dropdown.component.spec.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @angular-eslint/component-max-inline-declarations, @angular-eslint/no-lifecycle-call */
 import { Component, DebugElement, ViewChild } from "@angular/core";
-import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { UntypedFormControl, ReactiveFormsModule } from "@angular/forms";
 import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick, waitForAsync } from "@angular/core/testing";
 import { MatOptionModule } from "@angular/material/core";
 import { MatSelectModule } from "@angular/material/select";
@@ -39,7 +39,7 @@ describe("DropdownComponent", () => {
 		public dropdownComponent!: StarkDropdownComponent;
 
 		public dropdownId?: string;
-		public formControl = new FormControl();
+		public formControl = new UntypedFormControl();
 		// public header?: string;
 		public multiSelect?: boolean;
 		public optionIdProperty?: string;

packages/stark-ui/src/modules/generic-search/classes/abstract-search-component.spec.ts

@@ -3,7 +3,7 @@ import { Observable, Observer, of, Subject, Subscriber, TeardownLogic, throwErro
 import { AbstractStarkSearchComponent, StarkGenericSearchService } from "../classes";
 import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
 import { StarkResource } from "@nationalbankbelgium/stark-core";
-import { FormGroup } from "@angular/forms";
+import { UntypedFormGroup } from "@angular/forms";
 import { StarkSearchState } from "../entities";
 import { MockStarkProgressIndicatorService } from "@nationalbankbelgium/stark-ui/testing";
 import Spy = jasmine.Spy;
@@ -153,7 +153,7 @@ describe("AbstractSearchComponent", () => {
 
 	describe("onSearch", () => {
 		it("should call performSearch() passing the working copy if the form is valid", () => {
-			const formMock: FormGroup = <any>{
+			const formMock: UntypedFormGroup = <any>{
 				controls: {},
 				invalid: false
 			};
@@ -167,7 +167,7 @@ describe("AbstractSearchComponent", () => {
 		});
 
 		it("should NOT call performSearch() if the form NOT valid", () => {
-			const formMock: FormGroup = <any>{
+			const formMock: UntypedFormGroup = <any>{
 				controls: {},
 				invalid: true
 			};
@@ -191,7 +191,7 @@ describe("AbstractSearchComponent", () => {
 
 	describe("onReset", () => {
 		it("should call the genericSearchService.resetSearchState() and clear the results$", () => {
-			const formMock: FormGroup = new FormGroup({});
+			const formMock: UntypedFormGroup = new UntypedFormGroup({});
 			component.ngOnInit();
 			component.onReset(formMock);