chore: bump to angular 14

BREAKING CHANGE: Upgrade to Angular 14

ui-particles-angular/package.json

@@ -19,24 +19,24 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "13.3.12",
-    "@angular/cdk": "13.3.9",
-    "@angular/common": "13.3.12",
-    "@angular/compiler": "13.3.12",
-    "@angular/core": "13.3.12",
-    "@angular/forms": "13.3.12",
-    "@angular/material": "13.3.9",
-    "@angular/platform-browser": "13.3.12",
-    "@angular/platform-browser-dynamic": "13.3.12",
-    "@angular/router": "13.3.12",
+    "@angular/animations": "14.3.0",
+    "@angular/cdk": "14.2.7",
+    "@angular/common": "14.3.0",
+    "@angular/compiler": "14.3.0",
+    "@angular/core": "14.3.0",
+    "@angular/forms": "14.3.0",
+    "@angular/material": "14.2.7",
+    "@angular/platform-browser": "14.3.0",
+    "@angular/platform-browser-dynamic": "14.3.0",
+    "@angular/router": "14.3.0",
     "@asciidoctor/core": "^2.2.5",
     "@fontsource/fira-mono": "4.5.10",
     "@fontsource/golos-ui": "^4.5.3",
     "@fontsource/material-icons": "4.5.4",
     "@gravitee/ui-components": "^3.38.4",
     "@highcharts/map-collection": "^1.1.4",
-    "@ngx-formly/core": "6.1.8",
-    "@ngx-formly/material": "6.1.8",
+    "@ngx-formly/core": "6.2.2",
+    "@ngx-formly/material": "6.2.2",
     "ajv": "^8.12.0",
     "asciidoctor": "^2.2.6",
     "asciidoctor-highlight.js": "^0.4.0",
@@ -54,15 +54,15 @@
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-builders/jest": "13.0.4",
-    "@angular-devkit/build-angular": "13.3.10",
-    "@angular-eslint/builder": "13.5.0",
-    "@angular-eslint/eslint-plugin": "13.5.0",
-    "@angular-eslint/eslint-plugin-template": "13.5.0",
-    "@angular-eslint/schematics": "13.5.0",
-    "@angular-eslint/template-parser": "13.5.0",
-    "@angular/cli": "13.3.10",
-    "@angular/compiler-cli": "13.3.12",
+    "@angular-builders/jest": "14.1.0",
+    "@angular-devkit/build-angular": "14.2.13",
+    "@angular-eslint/builder": "14.3.0",
+    "@angular-eslint/eslint-plugin": "14.3.0",
+    "@angular-eslint/eslint-plugin-template": "14.3.0",
+    "@angular-eslint/schematics": "14.3.0",
+    "@angular-eslint/template-parser": "14.3.0",
+    "@angular/cli": "14.2.13",
+    "@angular/compiler-cli": "14.3.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",

ui-particles-angular/projects/ui-analytics/package.json

@@ -11,8 +11,8 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": "^13.3.0",
-    "@angular/core": "^13.3.0"
+    "@angular/common": "^14.0.0",
+    "@angular/core": "^14.0.0"
   },
   "publishConfig": {
     "access": "public"

ui-particles-angular/projects/ui-particles-angular/package.json

@@ -15,15 +15,15 @@
     "tslib": "2.3.1"
   },
   "peerDependencies": {
-    "@angular/animations": "^13.3.0",
-    "@angular/cdk": "^13.3.0",
-    "@angular/common": "^13.3.0",
-    "@angular/core": "^13.3.0",
-    "@angular/forms": "^13.3.0",
-    "@angular/material": "^13.3.0",
-    "@ngx-formly/core": "^6.1.8",
-    "@ngx-formly/material": "^6.1.8",
-    "asciidoctor": "^2.2.6",
+    "@angular/animations": "^14.0.0",
+    "@angular/cdk": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/material": "^14.0.0",
+    "@ngx-formly/core": "^6.2.2",
+    "@ngx-formly/material": "^6.2.2",
+    "asciidoctor": "^2.2.6 || ^3.0.0",
     "ngx-file-helpers": "^7.0.0",
     "prismjs": "^1.29.0"
   },

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-form-cron/gio-form-cron.component.ts

@@ -19,8 +19,8 @@ import { Component, ElementRef, HostBinding, NgZone, OnDestroy, OnInit, forwardR
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormControl,
-  FormGroup,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -59,7 +59,7 @@ export class GioFormCronComponent implements ControlValueAccessor, OnInit, OnDes
   public hours = [...range(0, 24)];
   public daysOfMonth = [...range(1, 32)];
   public daysOfWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-  public internalFormGroup?: FormGroup;
+  public internalFormGroup?: UntypedFormGroup;
   public value?: string;
   public expressionDescription?: string;
   @HostBinding('class.disabled')
@@ -95,18 +95,18 @@ export class GioFormCronComponent implements ControlValueAccessor, OnInit, OnDes
       this.resizeObserver.observe(this.elRef.nativeElement);
     }
 
-    this.internalFormGroup = new FormGroup({
-      mode: new FormControl(),
-      secondInterval: new FormControl(),
-      minuteInterval: new FormControl(),
-      hourInterval: new FormControl(),
-      dayInterval: new FormControl(),
-      dayOfWeek: new FormControl(),
-      dayOfMonth: new FormControl(),
-
-      hours: new FormControl(),
-      minutes: new FormControl(),
-      customExpression: new FormControl(),
+    this.internalFormGroup = new UntypedFormGroup({
+      mode: new UntypedFormControl(),
+      secondInterval: new UntypedFormControl(),
+      minuteInterval: new UntypedFormControl(),
+      hourInterval: new UntypedFormControl(),
+      dayInterval: new UntypedFormControl(),
+      dayOfWeek: new UntypedFormControl(),
+      dayOfMonth: new UntypedFormControl(),
+
+      hours: new UntypedFormControl(),
+      minutes: new UntypedFormControl(),
+      customExpression: new UntypedFormControl(),
     });
 
     this.isDisabled ? this.internalFormGroup.disable({ emitEvent: false }) : this.internalFormGroup.enable({ emitEvent: false });

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-form-cron/gio-form-cron.module.spec.ts

@@ -17,7 +17,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { GioFormCronHarness } from './gio-form-cron.harness';
@@ -28,7 +28,7 @@ describe('GioFormCronModule', () => {
     template: ` <gio-form-cron [formControl]="testControl"></gio-form-cron> `,
   })
   class TestComponent {
-    public testControl = new FormControl(null);
+    public testControl = new UntypedFormControl(null);
   }
 
   let component: TestComponent;

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-form-cron/gio-form-cron.stories.ts

@@ -18,13 +18,13 @@ import { Story } from '@storybook/angular/dist/ts3.9/client/preview/types-7-0';
 import { action } from '@storybook/addon-actions';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { UntypedFormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { GioFormCronComponent } from './gio-form-cron.component';
 import { GioFormCronModule } from './gio-form-cron.module';
 
 const DefaultRender: Meta['render'] = p => {
-  const control = new FormControl({ value: p.initialValue ?? '', disabled: p.disabled }, p.required ? Validators.required : null);
+  const control = new UntypedFormControl({ value: p.initialValue ?? '', disabled: p.disabled }, p.required ? Validators.required : null);
 
   control.valueChanges.subscribe(v => {
     console.info('Value changed', v);

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-form-file-picker/gio-form-file-picker.component.spec.ts

@@ -17,7 +17,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { UntypedFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 
 import { GioFormFilePickerInputHarness } from './gio-form-file-picker.component.harness';
@@ -47,7 +47,7 @@ export class TestFilePickerInputComponent {
   public multiple = false;
   public accept = '*';
   public ngModelChange: () => void = () => {}; // eslint-disable-line @typescript-eslint/no-empty-function
-  public myForm = new FormBuilder().group({
+  public myForm = new UntypedFormBuilder().group({
     file: [],
     fileRequired: [undefined, Validators.required],
   });

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-form-file-picker/gio-form-file-picker.stories.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 // tslint:disable: no-duplicate-string
-import { FormBuilder, FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { action } from '@storybook/addon-actions';
 import { Meta, moduleMetadata, Story } from '@storybook/angular';
 
@@ -96,7 +96,7 @@ export const WithAccept: Story = () => ({
 WithAccept.storyName = 'accept only images';
 
 export const WithFormGroup: Story = () => {
-  const formGroup = new FormBuilder().group({
+  const formGroup = new UntypedFormBuilder().group({
     files: [],
   });
   formGroup.valueChanges.subscribe(value => {
@@ -130,7 +130,7 @@ export const WithInitValues: Story = () => ({
       ><gio-form-file-picker-label>Images</gio-form-file-picker-label></gio-form-file-picker>
   `,
   props: {
-    formControl: new FormControl(),
+    formControl: new UntypedFormControl(),
     ngModel: [
       ...[
         'https://upload.wikimedia.org/wikipedia/en/thumb/9/99/Gundam.jpg/250px-Gundam.jpg',
@@ -156,7 +156,7 @@ export const DisabledWithInitValues: Story = () => ({
   `,
   props: {
     disabled: true,
-    formControl: new FormControl(),
+    formControl: new UntypedFormControl(),
     ngModel: [
       ...[
         'https://upload.wikimedia.org/wikipedia/en/thumb/9/99/Gundam.jpg/250px-Gundam.jpg',
@@ -171,7 +171,7 @@ export const DisabledWithInitValues: Story = () => ({
 DisabledWithInitValues.storyName = 'disabled with init values';
 
 export const WithFormValidator: Story = () => {
-  const formGroup = new FormBuilder().group({
+  const formGroup = new UntypedFormBuilder().group({
     files: [undefined, Validators.required],
   });
   formGroup.valueChanges.subscribe(value => {
@@ -201,7 +201,7 @@ export const WithFormValidator: Story = () => {
 WithFormValidator.storyName = 'with form validator';
 
 export const WithFormDisabled: Story = () => {
-  const formGroup = new FormBuilder().group({
+  const formGroup = new UntypedFormBuilder().group({
     files: [],
   });
   formGroup.controls.files.disable();
@@ -226,7 +226,7 @@ export const WithFormDisabled: Story = () => {
 WithFormDisabled.storyName = 'with form disabled';
 
 export const WithFormReset: Story = () => {
-  const formGroup = new FormBuilder().group({
+  const formGroup = new UntypedFormBuilder().group({
     files: [],
   });
 

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-form-focus-first-invalid/gio-form-focus-first-invalid.stories.ts

@@ -16,7 +16,7 @@
 import { Meta, moduleMetadata } from '@storybook/angular';
 import { Story } from '@storybook/angular/dist/ts3.9/client/preview/types-7-0';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { UntypedFormControl, UntypedFormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
@@ -52,13 +52,13 @@ export default {
 
 export const Demo: Story = {
   render: () => {
-    const form = new FormGroup({
-      anInput: new FormControl(null, Validators.required),
-      cron: new FormControl(null, Validators.required),
-      aSelect: new FormControl(null, Validators.required),
-      aTextarea: new FormControl(null, Validators.required),
-      aTagsInput: new FormControl(null, Validators.required),
-      aColorInput: new FormControl(null, Validators.required),
+    const form = new UntypedFormGroup({
+      anInput: new UntypedFormControl(null, Validators.required),
+      cron: new UntypedFormControl(null, Validators.required),
+      aSelect: new UntypedFormControl(null, Validators.required),
+      aTextarea: new UntypedFormControl(null, Validators.required),
+      aTagsInput: new UntypedFormControl(null, Validators.required),
+      aColorInput: new UntypedFormControl(null, Validators.required),
     });
 
     return {

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.component.ts

@@ -19,9 +19,9 @@ import { Component, ElementRef, forwardRef, HostBinding, Input, OnInit } from '@
 import {
   AbstractControl,
   ControlValueAccessor,
-  FormArray,
-  FormControl,
-  FormGroup,
+  UntypedFormArray,
+  UntypedFormControl,
+  UntypedFormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   ValidationErrors,
@@ -137,11 +137,11 @@ export class GioFormHeadersComponent implements OnInit, ControlValueAccessor, Va
     valueName: 'value',
   };
 
-  public mainForm: FormGroup;
-  public headersFormArray = new FormArray([
-    new FormGroup({
-      key: new FormControl('', Validators.pattern('^\\S*$')),
-      value: new FormControl(''),
+  public mainForm: UntypedFormGroup;
+  public headersFormArray = new UntypedFormArray([
+    new UntypedFormGroup({
+      key: new UntypedFormControl('', Validators.pattern('^\\S*$')),
+      value: new UntypedFormControl(''),
     }),
   ]);
 
@@ -157,7 +157,7 @@ export class GioFormHeadersComponent implements OnInit, ControlValueAccessor, Va
   private filteredHeaderNames: Observable<string[]>[] = [];
 
   constructor(private readonly fm: FocusMonitor, private readonly elRef: ElementRef) {
-    this.mainForm = new FormGroup({
+    this.mainForm = new UntypedFormGroup({
       headers: this.headersFormArray,
     });
   }
@@ -242,9 +242,9 @@ export class GioFormHeadersComponent implements OnInit, ControlValueAccessor, Va
     // Populate headers array from headers
     this.headers.forEach(({ key, value }, headerIndex) => {
       this.headersFormArray.push(
-        new FormGroup({
+        new UntypedFormGroup({
           key: this.initKeyFormControl(key, headerIndex),
-          value: new FormControl({ value, disabled: this.disabled }),
+          value: new UntypedFormControl({ value, disabled: this.disabled }),
         }),
         {
           emitEvent: false,
@@ -276,7 +276,7 @@ export class GioFormHeadersComponent implements OnInit, ControlValueAccessor, Va
   }
 
   private initKeyFormControl(key: string, headerIndex: number) {
-    const control = new FormControl({ value: key, disabled: this.disabled }, Validators.pattern('^\\S*$'));
+    const control = new UntypedFormControl({ value: key, disabled: this.disabled }, Validators.pattern('^\\S*$'));
     const filteredKeys = control.valueChanges.pipe(
       startWith(''),
       map(value => this._filter(value)),
@@ -296,9 +296,9 @@ export class GioFormHeadersComponent implements OnInit, ControlValueAccessor, Va
     }
 
     this.headersFormArray.push(
-      new FormGroup({
+      new UntypedFormGroup({
         key: this.initKeyFormControl('', this.headersFormArray.length),
-        value: new FormControl(''),
+        value: new UntypedFormControl(''),
       }),
       { emitEvent: false },
     );

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.module.spec.ts

@@ -17,7 +17,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -28,7 +28,7 @@ import { GioFormHeadersModule } from './gio-form-headers.module';
   template: `<gio-form-headers [formControl]="headersControl" [headerFieldMapper]="mapper"></gio-form-headers> `,
 })
 class TestComponent {
-  public headersControl = new FormControl([]);
+  public headersControl = new UntypedFormControl([]);
   public mapper = {
     keyName: 'key',
     valueName: 'value',