TECH-12: Angular 22

.github/workflows/main.yaml

@@ -17,6 +17,7 @@ jobs:
       - uses: valitydev/action-frontend/setup-install@v3
         with:
           release: true
+          force: true
       - name: Build
         run: npm run build
       - name: Deploy image

.github/workflows/pr.yaml

@@ -9,6 +9,8 @@ jobs:
     steps:
       - uses: actions/checkout@v6
       - uses: valitydev/action-frontend/setup-install@v3
+        with:
+          force: true
       - name: Check
         run: npm run check
       - name: Build

eslint.config.js

@@ -131,6 +131,7 @@ module.exports = tseslint.config(
             ],
             // Temporarily disabled due to issues with standalone components
             '@angular-eslint/prefer-standalone': 'warn',
+            '@angular-eslint/prefer-on-push-component-change-detection': 'warn',
         },
     },
     {

package.json

@@ -25,68 +25,70 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^21.2.3",
-    "@angular/common": "^21.2.5",
-    "@angular/compiler": "^21.2.5",
-    "@angular/core": "^21.2.5",
-    "@angular/forms": "^21.2.5",
-    "@angular/material": "^21.2.3",
-    "@angular/material-date-fns-adapter": "^21.2.3",
-    "@angular/platform-browser": "^21.2.5",
-    "@angular/router": "^21.2.5",
+    "@angular/cdk": "^22.0.1",
+    "@angular/common": "^22.0.1",
+    "@angular/compiler": "^22.0.1",
+    "@angular/core": "^22.0.1",
+    "@angular/forms": "^22.0.1",
+    "@angular/material": "^22.0.1",
+    "@angular/material-date-fns-adapter": "^22.0.1",
+    "@angular/platform-browser": "^22.0.1",
+    "@angular/router": "^22.0.1",
     "@ngneat/input-mask": "^6.1.0",
-    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/postcss": "^4.3.1",
     "@vality/domain-proto": "^2.0.2-70b59b9.0",
     "@vality/fistful-proto": "^2.0.1-9864622.0",
     "@vality/machinegun-proto": "^1.0.1-273f2f3.0",
     "@vality/magista-proto": "^2.0.2-bd58cea.0",
     "@vality/repairer-proto": "^2.0.2-07b2a51.0",
     "@vality/scrooge-proto": "^0.1.1-eec9e06.0",
     "@vality/thrift-ts": "^2.5.1-2b658f2.0",
-    "date-fns": "^4.1.0",
-    "keycloak-angular": "^21.0.0",
-    "keycloak-js": "^26.2.3",
+    "date-fns": "^4.4.0",
+    "keycloak-angular": "^22.0.0",
+    "keycloak-js": "^26.2.4",
     "lodash-es": "^4.18.1",
     "monaco-editor": "^0.55.1",
     "ngx-monaco-editor-v2": "^21.1.4",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.15",
     "rxjs": "~7.8.2",
     "short-uuid": "^6.0.3",
     "tailwindcss": "^4.2.2",
     "tslib": "^2.8.1",
     "typescript-memoize": "^1.1.1",
     "utility-types": "^3.11.0",
-    "uuid": "^13.0.0",
-    "zod": "^4.3.6",
-    "zone.js": "~0.16.1"
+    "uuid": "^14.0.0",
+    "zod": "^4.4.3",
+    "zone.js": "~0.16.2"
   },
   "devDependencies": {
-    "@angular/build": "^21.2.3",
-    "@angular/cli": "^21.2.3",
-    "@angular/compiler-cli": "^21.2.5",
+    "@angular/build": "^22.0.2",
+    "@angular/cli": "^22.0.2",
+    "@angular/compiler-cli": "^22.0.1",
     "@cspell/dict-ru_ru": "^2.3.2",
+    "@eslint/js": "^10.0.1",
     "@types/jasmine": "~6.0.0",
     "@types/lodash-es": "^4.17.12",
-    "angular-eslint": "^21.3.1",
-    "concurrently": "^9.2.1",
+    "angular-eslint": "^22.0.0",
+    "concurrently": "^10.0.3",
     "cross-env": "^10.1.0",
-    "cspell": "^9.7.0",
+    "cspell": "^10.0.1",
     "cspell-check-unused-words": "^1.6.0",
-    "eslint": "^9.39.4",
+    "eslint": "^10.5.0",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-paths": "^1.1.0",
     "eslint-plugin-unused-imports": "^4.4.1",
-    "jasmine-core": "~6.1.0",
+    "istanbul-lib-instrument": "^6.0.3",
+    "jasmine-core": "~6.3.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.2.0",
-    "ng-packagr": "^21.2.1",
-    "postcss": "^8.5.8",
-    "prettier": "^3.8.1",
+    "ng-packagr": "^22.0.0",
+    "postcss": "^8.5.15",
+    "prettier": "^3.8.4",
     "prettier-plugin-organize-attributes": "^1.0.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.57.2"
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.61.1"
   }
 }

projects/matez/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vality/matez",
-  "version": "21.0.0",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/valitydev/control-center.git"
@@ -15,30 +15,30 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/cdk": "^21.2.0",
-    "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.5",
-    "@angular/forms": "^21.2.0",
-    "@angular/material": "^21.2.0",
-    "@angular/material-date-fns-adapter": "^21.2.0",
-    "@angular/router": "^21.2.0",
-    "date-fns": "^4.1.0",
+    "@angular/cdk": "^22.0.1",
+    "@angular/common": "^22.0.1",
+    "@angular/core": "^22.0.1",
+    "@angular/forms": "^22.0.1",
+    "@angular/material": "^22.0.1",
+    "@angular/material-date-fns-adapter": "^22.0.1",
+    "@angular/router": "^22.0.1",
+    "date-fns": "^4.4.0",
     "lodash-es": "^4.18.1",
-    "rxjs": "^7.8.0",
+    "rxjs": "^7.8.2",
     "utility-types": "^3.11.0"
   },
   "dependencies": {
-    "@ng-matero/extensions": "^21.1.4",
-    "@s-libs/js-core": "^20.2.0",
-    "@s-libs/micro-dash": "^20.0.0",
-    "@s-libs/ng-core": "^20.2.0",
-    "@s-libs/rxjs-core": "^20.2.0",
+    "@ng-matero/extensions": "^21.3.1",
+    "@s-libs/js-core": "^21.0.0",
+    "@s-libs/micro-dash": "^21.0.0",
+    "@s-libs/ng-core": "^21.0.0",
+    "@s-libs/rxjs-core": "^21.0.0",
     "auto-bind": "^5.0.1",
-    "dinero.js": "^2.0.0",
+    "dinero.js": "^2.0.2",
     "papaparse": "^5.5.3"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/papaparse": "^5.5.2"
   }
 }

projects/matez/src/lib/components/cmdk/components/cmdk-button.component.ts

@@ -1,5 +1,5 @@
 import { NgClass } from '@angular/common';
-import { Component, OnInit, inject, input, output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, inject, input, output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
@@ -9,6 +9,7 @@ import { CmdkOption } from '../types/cmdk-option';
 @Component({
     selector: 'v-cmdk-button',
     imports: [MatIconModule, NgClass, MatButtonModule],
+    changeDetection: ChangeDetectionStrategy.Eager,
     template: `
         <button
             class="!text-[var(--mat-sys-outline)] !shadow-[inset_0_2px_4px_0_rgba(0,0,0,0.1),inset_0_2px_2px_0_rgba(0,0,0,0.06)]"

projects/matez/src/lib/components/date-range-field/date-range-field.component.ts

@@ -1,6 +1,6 @@
 import { enGB } from 'date-fns/locale';
 
-import { Component, Input, booleanAttribute, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, booleanAttribute, inject } from '@angular/core';
 import { NonNullableFormBuilder } from '@angular/forms';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
@@ -19,6 +19,7 @@ import { DateRange } from './types/date-range';
         { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
         { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
     ],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class DateRangeFieldComponent extends FormGroupSuperclass<Partial<DateRange>> {

projects/matez/src/lib/components/datetime-field/datetime-field.component.ts

@@ -1,7 +1,7 @@
 import { format, isValid } from 'date-fns';
 import { enGB } from 'date-fns/locale';
 
-import { Component, Input, booleanAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, booleanAttribute } from '@angular/core';
 import { ValidationErrors } from '@angular/forms';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
@@ -24,6 +24,7 @@ import {
         { provide: DateAdapter, useClass: DateFnsAdapter, deps: [MAT_DATE_LOCALE] },
         { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
     ],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class DatetimeFieldComponent extends FormComponentSuperclass<string> {

projects/matez/src/lib/components/dialog/components/dialog-actions/dialog-actions.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     selector: 'v-dialog-actions',
     templateUrl: './dialog-actions.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class DialogActionsComponent {}

projects/matez/src/lib/components/dialog/dialog.component.ts

@@ -1,4 +1,5 @@
 import {
+    ChangeDetectionStrategy,
     Component,
     EventEmitter,
     HostBinding,
@@ -15,6 +16,7 @@ import { DialogResponseStatus } from './types/dialog-response-status';
     selector: 'v-dialog',
     templateUrl: 'dialog.component.html',
     styleUrls: ['dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class DialogComponent implements Progressable {

projects/matez/src/lib/components/error-page/error-page.component.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
     templateUrl: 'error-page.component.html',
     styleUrls: ['error-page.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class ErrorPageComponent {}

projects/matez/src/lib/components/file-upload/file-upload.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+    inject,
+} from '@angular/core';
 
 import { NotifyLogService } from '../../services';
 
@@ -13,6 +20,7 @@ function hasExtension(fileName: string, extensions: string[]) {
     selector: 'v-file-upload',
     templateUrl: './file-upload.component.html',
     styleUrls: ['./file-upload.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class FileUploadComponent {

projects/matez/src/lib/components/filters/components/filters-dialog/filters-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { DialogSuperclass } from '../../../dialog';
 import { FiltersComponent } from '../../filters.component';
@@ -7,6 +7,7 @@ import { FiltersComponent } from '../../filters.component';
     selector: 'v-filters-dialog',
     templateUrl: './filters-dialog.component.html',
     styleUrls: ['./filters-dialog.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class FiltersDialogComponent extends DialogSuperclass<

projects/matez/src/lib/components/filters/components/more-filters-button/more-filters-button.component.ts

@@ -1,11 +1,12 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { FiltersComponent } from '../../filters.component';
 
 @Component({
     selector: 'v-more-filters-button',
     templateUrl: './more-filters-button.component.html',
     styleUrls: ['./more-filters-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class MoreFiltersButtonComponent {

projects/matez/src/lib/components/filters/filters.component.ts

@@ -3,6 +3,7 @@ import { map } from 'rxjs/operators';
 
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import {
+    ChangeDetectionStrategy,
     Component,
     ContentChild,
     ElementRef,
@@ -27,6 +28,7 @@ import { OtherFiltersDirective } from './components/other-filters/other-filters.
     selector: 'v-filters',
     templateUrl: './filters.component.html',
     styleUrls: ['./filters.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class FiltersComponent {

projects/matez/src/lib/components/input-field/input-field.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, booleanAttribute, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, booleanAttribute, input } from '@angular/core';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 import { FormControlSuperclass, createControlProviders } from '../../utils';
@@ -8,6 +8,7 @@ import { FormControlSuperclass, createControlProviders } from '../../utils';
     templateUrl: './input-field.component.html',
     providers: createControlProviders(() => InputFieldComponent),
     styleUrl: 'input-field.component.scss',
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class InputFieldComponent<T> extends FormControlSuperclass<T> {

projects/matez/src/lib/components/list-field/list-field.component.ts

@@ -1,6 +1,6 @@
 import { map, shareReplay } from 'rxjs/operators';
 
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import {
     FormControlSuperclass,
@@ -13,6 +13,7 @@ import {
     selector: 'v-list-field',
     templateUrl: './list-field.component.html',
     providers: createControlProviders(() => ListFieldComponent),
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class ListFieldComponent extends FormControlSuperclass<string[], string> {

projects/matez/src/lib/components/nav/nav.component.ts

@@ -12,6 +12,7 @@ import { Overwrite } from 'utility-types';
 
 import { CommonModule } from '@angular/common';
 import {
+    ChangeDetectionStrategy,
     Component,
     Injector,
     ViewEncapsulation,
@@ -60,6 +61,7 @@ function getActiveLinks(links: BaseLink[], url: string): BaseLink[] {
     styleUrls: ['./nav.component.scss'],
     templateUrl: './nav.component.html',
     imports: [RouterLink, MatButtonModule, MatDividerModule, CommonModule, MatIconModule],
+    changeDetection: ChangeDetectionStrategy.Eager,
     encapsulation: ViewEncapsulation.None,
 })
 export class NavComponent {

projects/matez/src/lib/components/number-range-field/number-range-field.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';
 import { NonNullableFormBuilder } from '@angular/forms';
 
 import { FormGroupSuperclass, createControlProviders } from '../../utils';
@@ -13,6 +13,7 @@ export interface NumberRange {
     templateUrl: './number-range-field.component.html',
     styleUrls: ['./number-range-field.component.scss'],
     providers: createControlProviders(() => NumberRangeFieldComponent),
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false,
 })
 export class NumberRangeFieldComponent extends FormGroupSuperclass<NumberRange> {