valitydev · A77AY · Jun 16, 2026 · Jun 5, 2026 · Jun 5, 2026 · Jun 5, 2026
diff --git a/README.md b/README.md
@@ -14,7 +14,6 @@
 ## Installation
 
 1. Add environment and configurations:
-
     - `src/.env`
     - `src/assets/appConfig.json`
     - `src/assets/authConfig.json`

diff --git a/angular.json b/angular.json
@@ -158,5 +158,8 @@
         "@schematics/angular:resolver": {
             "typeSeparator": "."
         }
+    },
+    "cli": {
+        "analytics": false
     }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "start": "ng serve --proxy-config proxy.conf.js --port 8000",
     "stage": "cross-env NODE_ENV=stage ng serve --proxy-config proxy.conf.js --port 8001 --configuration=stage",
-    "fix": "npm run i18n:extract && npm run spell:fix && npm run lint:fix && npm run format:fix && npm run spell:fix",
+    "fix": "npm run i18n:extract && npm run spell:fix && npm run lint:fix && npm run format:fix",
     "build": "ng build && transloco-optimize dist/browser/assets/i18n",
     "test": "ng test",
     "i18n": "transloco-keys-manager find",
@@ -25,74 +25,76 @@
     "check": "concurrently --prefix \"[{command}]\" --prefixColors auto --prefixLength 20 \"npm run format\" \"npm run lint\" \"npm run spell\" \"npm run i18n\""
   },
   "dependencies": {
-    "@angular/animations": "^20.3.20",
-    "@angular/cdk": "~20.2.14",
-    "@angular/common": "^20.3.20",
-    "@angular/compiler": "^20.3.20",
-    "@angular/core": "^20.3.20",
-    "@angular/forms": "^20.3.20",
-    "@angular/material": "~20.2.14",
-    "@angular/material-moment-adapter": "^20.2.14",
-    "@angular/platform-browser": "^20.3.20",
-    "@angular/platform-browser-dynamic": "^20.3.20",
-    "@angular/router": "^20.3.20",
+    "@angular/animations": "^21.2.16",
+    "@angular/cdk": "~21.2.14",
+    "@angular/common": "^21.2.16",
+    "@angular/compiler": "^21.2.16",
+    "@angular/core": "^21.2.16",
+    "@angular/forms": "^21.2.16",
+    "@angular/material": "~21.2.14",
+    "@angular/material-date-fns-adapter": "^21.2.14",
+    "@angular/material-moment-adapter": "^21.2.14",
+    "@angular/platform-browser": "^21.2.16",
+    "@angular/platform-browser-dynamic": "^21.2.16",
+    "@angular/router": "^21.2.16",
     "@jsverse/transloco": "^8.3.0",
-    "@vality/matez": "20.0.1-6413465.0",
-    "@vality/swag-anapi-v2": "2.0.1-4c69a2f.0",
-    "@vality/swag-api-keys-v2": "0.1.3-eb0cff1.0",
-    "@vality/swag-organizations": "1.0.1-67dcada.0",
-    "@vality/swag-payments": "0.1.3-9cbb3b3.0",
-    "@vality/swag-wallets": "0.1.4-20f6c0d.0",
+    "@vality/matez": "^21.0.1-6e5131e.0",
+    "@vality/swag-anapi-v2": "^2.0.1-f5e0f86.0",
+    "@vality/swag-api-keys-v2": "^0.1.3-019c9ca.0",
+    "@vality/swag-organizations": "^1.0.1-a72830b.0",
+    "@vality/swag-payments": "^0.1.3-92bb7f9.0",
+    "@vality/swag-wallets": "^0.1.4-fa83e95.0",
     "apexcharts": "^3.54.1",
+    "date-fns": "^4.4.0",
     "humanize-duration": "^3.19.0",
     "jwt-decode": "^3.1.2",
-    "keycloak-angular": "^20.1.0",
+    "keycloak-angular": "^21.0.0",
     "keycloak-js": "^26.2.3",
     "lodash-es": "^4.18.1",
     "moment": "^2.30.1",
     "ng-apexcharts": "1.7.1",
-    "ng-flex-layout": "^20.0.0",
-    "rxjs": "^7.8.1",
+    "ng-flex-layout": "^21.2.9",
+    "rxjs": "^7.8.2",
     "short-uuid": "^5.2.0",
     "tslib": "^2.4.0",
     "utility-types": "^3.10.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^20.3.25",
-    "@angular-devkit/schematics": "^20.3.25",
-    "@angular-eslint/builder": "^20.7.0",
-    "@angular-eslint/schematics": "^20.7.0",
-    "@angular/build": "^20.3.25",
-    "@angular/cli": "^20.3.25",
-    "@angular/compiler-cli": "^20.3.20",
-    "@angular/language-service": "^20.3.20",
+    "@angular-devkit/core": "^21.2.14",
+    "@angular-devkit/schematics": "^21.2.14",
+    "@angular-eslint/builder": "^21.4.0",
+    "@angular-eslint/schematics": "^21.4.0",
+    "@angular/build": "^21.2.14",
+    "@angular/cli": "^21.2.14",
+    "@angular/compiler-cli": "^21.2.16",
+    "@angular/language-service": "^21.2.16",
     "@jsverse/transloco-keys-manager": "^8.1.0",
     "@jsverse/transloco-optimize": "^8.3.0",
-    "@schematics/angular": "^20.3.25",
+    "@schematics/angular": "^21.2.14",
     "@types/humanize-duration": "^3.18.0",
     "@types/jasmine": "~5.1.4",
     "@types/lodash-es": "^4.17.12",
     "@vality/ng-configs": "0.1.1-pr-423-667df70.0",
-    "angular-eslint": "^20.7.0",
+    "angular-eslint": "^21.4.0",
     "concurrently": "^9.1.0",
     "cross-env": "^7.0.3",
-    "cspell": "^8.17.3",
-    "dotenv": "^16.0.3",
-    "eslint": "^9.20.1",
+    "cspell": "^8.19.4",
+    "dotenv": "^16.6.1",
+    "eslint": "^9.39.4",
     "glob": "^13.0.6",
-    "jasmine-core": "~5.1.1",
+    "jasmine-core": "~5.13.0",
     "jasmine-marbles": "0.9.2",
-    "jsonc-eslint-parser": "^2.4.0",
-    "karma": "~6.4.0",
+    "jsonc-eslint-parser": "^2.4.2",
+    "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",
-    "prettier": "^3.5.1",
+    "karma-jasmine-html-reporter": "~2.2.0",
+    "prettier": "^3.8.3",
     "ts-mockito": "^2.6.1",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.9.2",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.59.3"
+    "typescript-eslint": "^8.60.1"
   }
-}
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -10,56 +10,58 @@
         "
     >
         <div>
-            <div
-                *ngIf="noOrganization$ | async"
-                style="
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    height: 100%;
-                    padding: 24px;
-                "
-            >
-                <mat-card style="max-width: 500px; text-align: center">
-                    <mat-card-content style="padding: 48px 32px">
-                        <h2 class="mat-headline-medium" style="margin: 0 0 16px 0">
-                            {{ t('noOrganization') }}
-                        </h2>
-                        <p class="mat-body-medium" style="margin: 0; color: rgba(0, 0, 0, 0.6)">
-                            {{ t('contactSupport') }}
-                        </p>
-                    </mat-card-content>
-                </mat-card>
-            </div>
-            <ng-container *ngIf="!(noOrganization$ | async)">
-                <dsh-sections *ngIf="bootstrapped$ | async; else spinner"></dsh-sections>
-                <ng-template #spinner>
+            @if (noOrganization$ | async) {
+                <div
+                    style="
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        height: 100%;
+                        padding: 24px;
+                    "
+                >
+                    <mat-card style="max-width: 500px; text-align: center">
+                        <mat-card-content style="padding: 48px 32px">
+                            <h2 class="mat-headline-medium" style="margin: 0 0 16px 0">
+                                {{ t('noOrganization') }}
+                            </h2>
+                            <p class="mat-body-medium" style="margin: 0; color: rgba(0, 0, 0, 0.6)">
+                                {{ t('contactSupport') }}
+                            </p>
+                        </mat-card-content>
+                    </mat-card>
+                </div>
+            }
+            @if (!(noOrganization$ | async)) {
+                @if (bootstrapped$ | async) {
+                    <dsh-sections></dsh-sections>
+                } @else {
                     <div fxFlexAlign="center" fxLayout="row">
                         <dsh-spinner style="margin: auto"></dsh-spinner>
                     </div>
-                </ng-template>
-            </ng-container>
+                }
+            }
         </div>
-        <div *ngIf="isDev" style="display: flex; justify-content: center">
-            <div
-                [matMenuTriggerFor]="menu"
-                class="mat-title-small"
-                style="cursor: pointer; display: flex; gap: 8px; align-items: center"
-            >
-                <dsh-bi icon="globe" size="sm"></dsh-bi>
-                <!-- t(language.en) -->
-                <!-- t(language.ru) -->
-                {{ t('language.' + languageService.active) }}
-            </div>
-            <mat-menu #menu="matMenu">
-                <button
-                    *ngFor="let language of languages"
-                    mat-menu-item
-                    (click)="setLanguage(language)"
+        @if (isDev) {
+            <div style="display: flex; justify-content: center">
+                <div
+                    [matMenuTriggerFor]="menu"
+                    class="mat-title-small"
+                    style="cursor: pointer; display: flex; gap: 8px; align-items: center"
                 >
-                    {{ t('language.' + language) }}
-                </button>
-            </mat-menu>
-        </div>
+                    <dsh-bi icon="globe" size="sm"></dsh-bi>
+                    <!-- t(language.en) -->
+                    <!-- t(language.ru) -->
+                    {{ t('language.' + languageService.active) }}
+                </div>
+                <mat-menu #menu="matMenu">
+                    @for (language of languages; track language) {
+                        <button mat-menu-item (click)="setLanguage(language)">
+                            {{ t('language.' + language) }}
+                        </button>
+                    }
+                </mat-menu>
+            </div>
+        }
     </div>
 </dsh-home>
diff --git a/src/app/auth/types/role-access.ts b/src/app/auth/types/role-access.ts
@@ -8,7 +8,9 @@ export interface RoleAccess {
     availableRoles: RoleId[];
 }
 
-export interface RoleAccessGroup
-    extends Overwrite<RoleAccess, Partial<Pick<RoleAccess, 'availableRoles'>>> {
+export interface RoleAccessGroup extends Overwrite<
+    RoleAccess,
+    Partial<Pick<RoleAccess, 'availableRoles'>>
+> {
     children?: RoleAccess[];
 }
diff --git a/src/app/home/actionbar/components/organizations-list/organizations-list.component.html b/src/app/home/actionbar/components/organizations-list/organizations-list.component.html
@@ -10,20 +10,19 @@
     >
         {{ t('title') }}
     </dsh-menu-item>
-    <dsh-menu-item
-        *ngFor="let org of orgs$ | async"
-        [fragment]="org.id"
-        class="dsh-user-link"
-        routerLink="/organization-section/organizations"
-        (click)="selected.emit()"
-    >
-        {{ org.name }}
-    </dsh-menu-item>
-    <dsh-menu-item
-        *ngIf="!(orgs$ | async)?.length && (isLoading$ | async)"
-        class="dsh-user-link"
-        fxLayoutAlign="center"
-    >
-        <dsh-spinner size="24"></dsh-spinner>
-    </dsh-menu-item>
+    @for (org of orgs$ | async; track org) {
+        <dsh-menu-item
+            [fragment]="org.id"
+            class="dsh-user-link"
+            routerLink="/organization-section/organizations"
+            (click)="selected.emit()"
+        >
+            {{ org.name }}
+        </dsh-menu-item>
+    }
+    @if (!(orgs$ | async)?.length && (isLoading$ | async)) {
+        <dsh-menu-item class="dsh-user-link" fxLayoutAlign="center">
+            <dsh-spinner size="24"></dsh-spinner>
+        </dsh-menu-item>
+    }
 </div>
diff --git a/...onents/select-active-organization-dialog/select-active-organization-dialog.component.html b/...onents/select-active-organization-dialog/select-active-organization-dialog.component.html
@@ -13,15 +13,16 @@
                 fxLayout="column"
                 fxLayoutGap="24px"
             >
-                <mat-radio-button
-                    *ngFor="let organization of organizations$ | async"
-                    [value]="organization"
-                >
-                    {{ organization.name }}
-                </mat-radio-button>
+                @for (organization of organizations$ | async; track organization) {
+                    <mat-radio-button [value]="organization">
+                        {{ organization.name }}
+                    </mat-radio-button>
+                }
             </mat-radio-group>
         </dsh-limited-panel>
-        <dsh-spinner *ngIf="isLoading$ | async" fxFlexAlign="center"></dsh-spinner>
+        @if (isLoading$ | async) {
+            <dsh-spinner fxFlexAlign="center"></dsh-spinner>
+        }
     </div>
     <ng-container dshBaseDialogActions>
         <button

diff --git a/src/app/home/actionbar/components/user-dropdown/user-dropdown.component.html b/src/app/home/actionbar/components/user-dropdown/user-dropdown.component.html
@@ -7,5 +7,7 @@
             size="sm"
         ></dsh-bi>
     </div>
-    <div *ngIf="orgName$ | async" class="mat-body-small organization">{{ orgName$ | async }}</div>
+    @if (orgName$ | async) {
+        <div class="mat-body-small organization">{{ orgName$ | async }}</div>
+    }
 </div>
diff --git a/src/app/home/actionbar/components/user/user.component.html b/src/app/home/actionbar/components/user/user.component.html
@@ -5,23 +5,21 @@
 >
     @if (organization$ | async) {
         <ng-container>
-            <dsh-menu-item
-                *ngIf="activeOrg$ | async as activeOrg"
-                class="mat-title-small"
-                (click)="toActiveOrg(activeOrg.id)"
-                >{{ activeOrg.name }}</dsh-menu-item
-            >
+            @if (activeOrg$ | async; as activeOrg) {
+                <dsh-menu-item class="mat-title-small" (click)="toActiveOrg(activeOrg.id)">{{
+                    activeOrg.name
+                }}</dsh-menu-item>
+            }
             <dsh-menu-item (click)="selectActiveOrg()">{{ t('selectActiveOrg') }}</dsh-menu-item>
             <dsh-menu-item (click)="openOrgList()">{{ t('orgList') }}</dsh-menu-item>
         </ng-container>
         <mat-divider></mat-divider>
     }
     <span class="mat-title-small">{{ username }}</span>
-    <dsh-menu-item
-        *ngFor="let linkConfig of userLinksConfig$ | async"
-        (click)="openBlank(linkConfig.href)"
-    >
-        {{ linkConfig.title }}
-    </dsh-menu-item>
+    @for (linkConfig of userLinksConfig$ | async; track linkConfig) {
+        <dsh-menu-item (click)="openBlank(linkConfig.href)">
+            {{ linkConfig.title }}
+        </dsh-menu-item>
+    }
     <dsh-menu-item (click)="logout()">{{ t('logout') }}</dsh-menu-item>
 </dsh-dropdown-actions>
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -1,9 +1,8 @@
-<div
-    *ngIf="routerNavigationEnd$ | async"
-    style="min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column"
->
-    <ng-container *ngTemplateOutlet="(isXSmallSmall$ | async) ? mobile : laptop"></ng-container>
-</div>
+@if (routerNavigationEnd$ | async) {
+    <div style="min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column">
+        <ng-container *ngTemplateOutlet="(isXSmallSmall$ | async) ? mobile : laptop"></ng-container>
+    </div>
+}
 
 <ng-template #content>
     <ng-content></ng-content>