BG-888: Bump Angular@21

cspell.json

@@ -1,6 +1,7 @@
 {
     "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
     "version": "0.2",
+    "files": ["**"],
     "ignorePaths": ["node_modules", "**/*.svg"],
     "import": "@cspell/dict-ru_ru/cspell-ext.json",
     "useGitignore": true,
@@ -28,7 +29,6 @@
         "chargebacks",
         "matez",
         "eazy",
-        "msgpack",
         "rreserve",
         "dpan",
         "matv",

package.json

@@ -22,67 +22,69 @@
   ],
   "private": true,
   "dependencies": {
-    "@angular/cdk": "^20.1.4",
-    "@angular/common": "^20.1.0",
-    "@angular/compiler": "^20.1.0",
-    "@angular/core": "^20.1.0",
-    "@angular/forms": "^20.1.0",
-    "@angular/material": "^20.1.4",
-    "@angular/material-date-fns-adapter": "^20.1.4",
-    "@angular/platform-browser": "^20.1.0",
-    "@angular/router": "^20.1.0",
+    "@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",
     "@ngneat/input-mask": "^6.1.0",
     "@tailwindcss/postcss": "^4.1.11",
     "@vality/domain-proto": "^2.0.1-5c25c2e.0",
     "@vality/fistful-proto": "^2.0.1-7c61ac5.0",
     "@vality/machinegun-proto": "^1.0.1-cc2c27c.0",
     "@vality/magista-proto": "^2.0.2-6cafe01.0",
-    "@vality/ng-monaco-editor": "^20.0.0",
     "@vality/repairer-proto": "^2.0.2-1a48729.0",
     "@vality/scrooge-proto": "^0.1.1-42aba67.0",
     "@vality/thrift-ts": "^2.5.1-2b658f2.0",
     "auto-bind": "^5.0.1",
     "date-fns": "^4.1.0",
-    "keycloak-angular": "^20.0.0",
-    "keycloak-js": "^26.2.0",
-    "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.52.2",
-    "postcss": "^8.5.6",
-    "rxjs": "~7.8.0",
-    "short-uuid": "^5.2.0",
-    "tailwindcss": "^4.1.11",
-    "tslib": "^2.3.0",
+    "keycloak-angular": "^21.0.0",
+    "keycloak-js": "^26.2.3",
+    "lodash-es": "^4.17.23",
+    "monaco-editor": "^0.55.1",
+    "ngx-monaco-editor-v2": "^21.1.4",
+    "postcss": "^8.5.8",
+    "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",
-    "zod": "^3.25.76",
-    "zone.js": "~0.15.0"
+    "uuid": "^13.0.0",
+    "zod": "^4.3.6",
+    "zone.js": "~0.16.1"
   },
   "devDependencies": {
-    "@angular/build": "^20.1.5",
-    "@angular/cli": "^20.1.5",
-    "@angular/compiler-cli": "^20.1.0",
+    "@angular/build": "^21.2.3",
+    "@angular/cli": "^21.2.3",
+    "@angular/compiler-cli": "^21.2.5",
     "@cspell/dict-ru_ru": "^2.3.2",
-    "@types/jasmine": "~5.1.0",
+    "@types/jasmine": "~6.0.0",
     "@types/lodash-es": "^4.17.12",
-    "angular-eslint": "^20.1.1",
-    "concurrently": "^9.2.0",
-    "cross-env": "^10.0.0",
-    "cspell": "^9.2.0",
-    "cspell-check-unused-words": "^1.5.3",
-    "eslint": "^9.29.0",
+    "angular-eslint": "^21.3.1",
+    "concurrently": "^9.2.1",
+    "cross-env": "^10.1.0",
+    "cspell": "^9.7.0",
+    "cspell-check-unused-words": "^1.6.0",
+    "eslint": "^9.39.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-paths": "^1.1.0",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "jasmine-core": "~5.8.0",
-    "karma": "~6.4.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "jasmine-core": "~6.1.0",
+    "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
+    "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^20.1.0",
-    "prettier": "^3.6.2",
+    "karma-jasmine-html-reporter": "~2.2.0",
+    "ng-packagr": "^21.2.1",
+    "postcss": "^8.5.8",
+    "prettier": "^3.8.1",
     "prettier-plugin-organize-attributes": "^1.0.0",
-    "typescript": "~5.8.2",
-    "typescript-eslint": "^8.34.1"
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.2"
   }
 }

projects/matez/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vality/matez",
-  "version": "20.1.0",
+  "version": "21.0.0",
   "exports": {
     ".": {
       "sass": "./_index.scss"
@@ -11,29 +11,29 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/cdk": "^20.1.0",
-    "@angular/common": "^20.1.0",
-    "@angular/core": "^20.1.0",
-    "@angular/forms": "^20.1.0",
-    "@angular/material": "^20.1.0",
-    "@angular/material-date-fns-adapter": "^20.1.0",
-    "@angular/router": "^20.1.0",
+    "@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",
-    "lodash-es": "^4.0.0",
-    "rxjs": "^7.0.0",
-    "utility-types": "^3.0.0"
+    "lodash-es": "^4.17.23",
+    "rxjs": "^7.8.0",
+    "utility-types": "^3.11.0"
   },
   "dependencies": {
     "@dinero.js/currencies": "^2.0.0-alpha.14",
-    "@ng-matero/extensions": "^20.2.0",
-    "@s-libs/js-core": "^20.0.0",
+    "@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.0.0",
-    "@s-libs/rxjs-core": "^20.0.0",
+    "@s-libs/ng-core": "^20.2.0",
+    "@s-libs/rxjs-core": "^20.2.0",
     "papaparse": "^5.5.3"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.0.0",
-    "@types/papaparse": "^5.3.16"
+    "@types/lodash-es": "^4.17.0",
+    "@types/papaparse": "^5.5.2"
   }
 }

projects/matez/src/lib/components/select-autocomplete/select-field/select-field.component.html

@@ -21,35 +21,37 @@
         (search)="searchChange.emit($event.term); searchStr = $event.term"
     >
         <ng-template let-index="index" let-item="item" let-item$="item$" ng-optgroup-tmp>
-            <mat-checkbox
-                *ngIf="multiple; else text"
-                [ngModel]="item$.selected"
-                class="checkbox-option"
-                id="item-{{ index }}"
-            >
-                {{ item.type | uppercase }}
-            </mat-checkbox>
-            <ng-template #text>
+            @if (multiple) {
+                <mat-checkbox
+                    [ngModel]="item$.selected"
+                    class="checkbox-option"
+                    id="item-{{ index }}"
+                >
+                    {{ item.type | uppercase }}
+                </mat-checkbox>
+            } @else {
                 {{ item.type | uppercase }}
-            </ng-template>
+            }
         </ng-template>
         <ng-template let-index="index" let-item="item" let-item$="item$" ng-option-tmp>
-            <mat-checkbox
-                *ngIf="multiple; else text"
-                [ngModel]="item$.selected"
-                class="checkbox-option"
-                id="item-{{ index }}"
-            >
+            @if (multiple) {
+                <mat-checkbox
+                    [ngModel]="item$.selected"
+                    class="checkbox-option"
+                    id="item-{{ index }}"
+                >
+                    <ng-container *ngTemplateOutlet="text"></ng-container>
+                </mat-checkbox>
+            } @else {
                 <ng-container *ngTemplateOutlet="text"></ng-container>
-            </mat-checkbox>
+            }
             <ng-template #text>
                 <div class="label">{{ item.label }}</div>
-                <div
-                    *ngIf="item.description"
-                    class="description mat-label-medium text-[var(--mat-sys-outline)]"
-                >
-                    {{ item.description }}
-                </div>
+                @if (item.description) {
+                    <div class="description mat-label-medium text-[var(--mat-sys-outline)]">
+                        {{ item.description }}
+                    </div>
+                }
             </ng-template>
         </ng-template>
     </mtx-select>

projects/matez/src/lib/services/query-params/query-params.service.ts

@@ -39,9 +39,9 @@ export interface QueryParamsNamespace<T extends object> extends BaseQueryParams<
 const NS_PARAM_PREFIX = '__';
 
 @Injectable({ providedIn: 'root' })
-export class QueryParamsService<P extends object = NonNullable<unknown>>
-    implements BaseQueryParams<P>
-{
+export class QueryParamsService<
+    P extends object = NonNullable<unknown>,
+> implements BaseQueryParams<P> {
     private router = inject(Router);
     private route = inject(ActivatedRoute);
     private readonly serializers =

projects/matez/src/lib/utils/async/async-transform.ts

@@ -17,8 +17,7 @@ export abstract class AsyncTransform<
     TValue = unknown,
     TParams extends unknown[] = [],
     TResult = string | null,
-> implements OnDestroy
-{
+> implements OnDestroy {
     protected abstract result$: Observable<TResult>;
 
     protected params$: Observable<[TValue, ...TParams]> = defer(() => this.args$).pipe(

projects/matez/src/lib/utils/component/component-changes.ts

@@ -1,7 +1,9 @@
 import { SimpleChange } from '@angular/core';
 
-export interface ComponentChange<T, P extends keyof T>
-    extends Omit<SimpleChange, 'previousValue' | 'currentValue'> {
+export interface ComponentChange<T, P extends keyof T> extends Omit<
+    SimpleChange,
+    'previousValue' | 'currentValue'
+> {
     previousValue: T[P];
     currentValue: T[P];
 }

projects/ng-thrift/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vality/ng-thrift",
-    "version": "20.1.0",
+    "version": "21.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -9,17 +9,17 @@
         "yaml": "^2.8.1"
     },
     "peerDependencies": {
-        "@angular/common": "^20.1.0",
-        "@angular/core": "^20.1.0",
-        "@angular/forms": "^20.1.0",
-        "@angular/material": "^20.1.0",
-        "@angular/router": "^20.1.0",
+        "@angular/common": "^21.2.0",
+        "@angular/core": "^21.2.5",
+        "@angular/forms": "^21.2.0",
+        "@angular/material": "^21.2.0",
+        "@angular/router": "^21.2.0",
         "@vality/matez": "*",
-        "@vality/ng-monaco-editor": "^20.0.0",
         "@vality/thrift-ts": "*",
-        "lodash-es": "^4.0.0",
-        "monaco-editor": "^0.52.0",
-        "rxjs": "^7.0.0",
-        "utility-types": "^3.0.0"
+        "lodash-es": "^4.17.23",
+        "monaco-editor": "^0.55.1",
+        "ngx-monaco-editor-v2": "^21.1.0",
+        "rxjs": "^7.8.0",
+        "utility-types": "^3.11.0"
     }
 }