TD-925: Bump Angular to 18 (#369)

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
-    extends: '@vality/eslint-config',
+    extends: '@vality/eslint-config-ng',
     overrides: [
-        ...require('@vality/eslint-config/configs').angular('cc').overrides,
+        ...require('@vality/eslint-config-ng/configs').angular('cc').overrides,
-        ...require('@vality/eslint-config/configs').importOrder(['@cc/**']).overrides,
+        ...require('@vality/eslint-config-ng/configs').importOrder(['@cc/**']).overrides,
     ],
 };

package.json

@@ -8,7 +8,7 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint --max-warnings=0",
-    "lint:fix": "ng lint --fix",
+    "lint:fix": "npm run lint -- --fix",
     "format": "prettier ** --list-different",
     "format:fix": "prettier ** --write --log-level=warn",
     "spell": "cspell --no-progress **",
@@ -16,63 +16,63 @@
     "fix": "npm run lint:fix && npm run format:fix && npm run spell:fix"
   },
   "dependencies": {
-    "@angular/animations": "17.2.1",
+    "@angular/animations": "18.0.3",
-    "@angular/cdk": "17.2.0",
+    "@angular/cdk": "18.0.3",
-    "@angular/common": "17.2.1",
+    "@angular/common": "18.0.3",
-    "@angular/compiler": "17.2.1",
+    "@angular/compiler": "18.0.3",
-    "@angular/core": "17.2.1",
+    "@angular/core": "18.0.3",
-    "@angular/forms": "17.2.1",
+    "@angular/forms": "18.0.3",
-    "@angular/material": "17.2.0",
+    "@angular/material": "18.0.3",
-    "@angular/platform-browser": "17.2.1",
+    "@angular/platform-browser": "18.0.3",
-    "@angular/platform-browser-dynamic": "17.2.1",
+    "@angular/platform-browser-dynamic": "18.0.3",
-    "@angular/platform-server": "17.2.1",
+    "@angular/platform-server": "18.0.3",
-    "@angular/router": "17.2.1",
+    "@angular/router": "18.0.3",
     "@ngneat/input-mask": "6.0.0",
     "@vality/deanonimus-proto": "2.0.1-2a02d87.0",
     "@vality/domain-proto": "2.0.1-b04aba8.0",
-    "@vality/dominator-proto": "1.0.1-b9788c2.0",
+    "@vality/dominator-proto": "1.0.1-41bee97.0",
     "@vality/fistful-proto": "2.0.1-6600be9.0",
     "@vality/machinegun-proto": "1.0.0",
     "@vality/magista-proto": "2.0.2-28d11b9.0",
-    "@vality/ng-core": "17.2.1-pr-64-0a6dad2.0",
+    "@vality/ng-core": "18.0.1-pr-63-9e315a6.0",
-    "@vality/ng-thrift": "17.0.1-pr-5-2ce0f11.0",
+    "@vality/ng-thrift": "18.0.1-pr-12-d099f93.0",
     "@vality/payout-manager-proto": "2.0.1-eb4091a.0",
     "@vality/repairer-proto": "2.0.2-07b73e9.0",
     "@vality/scrooge-proto": "0.1.1-9ce7fc6.0",
     "@vality/thrift-ts": "2.4.1-8ad5123.0",
     "@vality/woody": "0.1.3",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "inputmask": "5.0.7",
-    "keycloak-angular": "^15.0.0",
+    "keycloak-angular": "^16.0.1",
     "keycloak-js": "^20.0.5",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.44.0",
+    "monaco-editor": "^0.49.0",
-    "ngx-monaco-editor-v2": "^17.0.1",
+    "ngx-monaco-editor-v2": "^18.0.1",
     "papaparse": "^5.4.1",
     "rxjs": "7.8.1",
     "short-uuid": "4.2.2",
     "tslib": "2.3.1",
     "utility-types": "3.10.0",
-    "yaml": "2.3.1",
+    "yaml": "2.4.5",
     "zone.js": "0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.2.0",
+    "@angular-devkit/build-angular": "18.0.4",
-    "@angular-eslint/builder": "17.2.1",
+    "@angular-eslint/builder": "18.0.1",
-    "@angular-eslint/schematics": "17.2.1",
+    "@angular-eslint/schematics": "18.0.1",
-    "@angular/cli": "17.2.0",
+    "@angular/cli": "18.0.4",
-    "@angular/compiler-cli": "17.2.1",
+    "@angular/compiler-cli": "18.0.3",
     "@types/inputmask": "5.0.3",
     "@types/jasmine": "4.0.3",
     "@types/jwt-decode": "2.2.1",
     "@types/lodash-es": "^4.17.12",
     "@types/papaparse": "^5.3.14",
     "@vality/cspell-config": "^8.0.1-pr-57-482a037.0",
-    "@vality/eslint-config": "8.2.0",
+    "@vality/eslint-config-ng": "18.0.1-pr-63-e72dd8e.0",
     "@vality/prettier-config": "3.1.0",
     "cross-env": "^7.0.3",
     "cspell": "^8.3.2",
-    "eslint": "^8.53.0",
+    "eslint": "^8.57.0",
     "jasmine-core": "4.2.0",
     "jasmine-spec-reporter": "7.0.0",
     "jwt-decode": "2.2.0",
@@ -82,7 +82,7 @@
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.0.0",
     "prettier": "~3.1.1",
-    "typescript": "~5.2.2",
+    "typescript": "~5.4.5",
     "typescript-memoize": "1.1.1"
   }
 }

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { registerLocaleData } from '@angular/common';
 import localeRu from '@angular/common/locales/ru';
-import { LOCALE_ID, NgModule, Injector } from '@angular/core';
+import { LOCALE_ID, NgModule } from '@angular/core';
 import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -44,12 +44,6 @@ import {
 
 registerLocaleData(localeRu);
 
-// Do not use in code! Only for extending windows methods
-/* eslint-disable @typescript-eslint/naming-convention */
-/** @internal */
-export let AppInjector: Injector;
-/* eslint-enable @typescript-eslint/naming-convention */
-
 @NgModule({
     declarations: [AppComponent],
     imports: [
@@ -102,10 +96,8 @@ export class AppModule {
     constructor(
         private matIconRegistry: MatIconRegistry,
         private domSanitizer: DomSanitizer,
-        private injector: Injector,
     ) {
         this.registerIcons();
-        AppInjector = this.injector;
     }
 
     registerIcons(): void {

src/app/core/core.module.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
 
@@ -28,7 +28,7 @@ const initializer = (keycloak: KeycloakService, configService: ConfigService) =>
     ]);
 
 @NgModule({
-    imports: [CommonModule, HttpClientModule, KeycloakAngularModule],
+    imports: [CommonModule, KeycloakAngularModule],
     providers: [
         ConfigService,
         {
@@ -37,6 +37,7 @@ const initializer = (keycloak: KeycloakService, configService: ConfigService) =>
             multi: true,
             deps: [KeycloakService, ConfigService],
         },
+        provideHttpClient(withInterceptorsFromDi()),
     ],
 })
 export class CoreModule {}

src/app/sections/claim/components/timeline-item-loading/_timeline-item-loading-theme.scss

@@ -4,6 +4,6 @@
     $foreground: map-get($theme, foreground);
 
     .cc-timeline-item-loading-text {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
 }

src/app/sections/not-found/_not-found-theme.scss

@@ -4,6 +4,6 @@
     $foreground: map-get($theme, foreground);
 
     .not-found {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
 }

src/app/sections/payment-details/create-chargeback-dialog/create-chargeback-dialog.component.ts

@@ -5,7 +5,7 @@ import { InvoicePaymentChargeback } from '@vality/domain-proto/domain';
 import { InvoicePaymentChargebackParams } from '@vality/domain-proto/payment_processing';
 import { DialogSuperclass, NotifyLogService } from '@vality/ng-core';
 import { from } from 'rxjs';
-import * as short from 'short-uuid';
+import short from 'short-uuid';
 
 import { InvoicingService } from '@cc/app/api/payment-processing';
 import { DomainMetadataFormExtensionsService } from '@cc/app/shared/services';

src/app/sections/routing-rules/_routing-rules-theme.scss

@@ -4,6 +4,6 @@
     $foreground: map-get($theme, foreground);
 
     .cc-routing-rules-caption {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
 }

src/app/sections/tariffs/components/shops-tariffs/shops-tariffs.component.html

@@ -39,7 +39,7 @@
                 matTooltipPosition="right"
                 style="white-space: nowrap; cursor: default"
             >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
             </div>
         </ng-container>
     </ng-template>

src/app/sections/tariffs/components/shops-tariffs/utils/create-shop-fees-column.ts

@@ -21,17 +21,18 @@ export function createShopFeesColumn<T extends object = TermSetHierarchyObject>(
 ) {
     const filterRreserve = (v: CashFlowPosting) =>
         v?.source?.merchant === 0 && v?.destination?.merchant === 1;
-    const cols = createFeesColumns<T>(
+    const filterDecisions = (d: T) => (v: InlineCashFlowSelector) =>
-        (d) => getViewedCashFlowSelectors(fn(d)),
-        (v) => v?.source?.merchant === 0 && v?.destination?.system === 0,
-        (v) => !filterRreserve(v),
-        (d: T) => (v: InlineCashFlowSelector) =>
         (!v?.if?.condition?.party?.definition?.shop_is ||
             (v?.if?.condition?.party?.id === getPartyId(d) &&
                 v?.if?.condition?.party?.definition?.shop_is === getShopId(d))) &&
         (!getCurrency(d) ||
             !v?.if?.condition?.currency_is?.symbolic_code ||
-                v?.if?.condition?.currency_is?.symbolic_code === getCurrency(d)),
+            v?.if?.condition?.currency_is?.symbolic_code === getCurrency(d));
+    const cols = createFeesColumns<T>(
+        (d) => getViewedCashFlowSelectors(fn(d)),
+        (v) => v?.source?.merchant === 0 && v?.destination?.system === 0,
+        (v) => !filterRreserve(v),
+        filterDecisions,
     );
     return [
         ...cols.slice(0, -1),
@@ -39,9 +40,9 @@ export function createShopFeesColumn<T extends object = TermSetHierarchyObject>(
             field: 'rreserve',
             header: 'RReserve',
             formatter: (d) =>
-                getInlineDecisions(getViewedCashFlowSelectors(fn(d)), filterRreserve).map(
+                getInlineDecisions(getViewedCashFlowSelectors(fn(d)), filterRreserve)
-                    (v) => v.value,
+                    .filter(filterDecisions(d))
-                ),
+                    .map((v) => v.value),
         },
         cols.at(-1),
     ];

src/app/sections/tariffs/components/shops-term-set-history-card/shops-term-set-history-card.component.html

@@ -18,7 +18,7 @@
                 matTooltipPosition="right"
                 style="white-space: nowrap; cursor: default"
             >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
             </div>
         </ng-container>
     </ng-template>

src/app/sections/tariffs/components/terminals-term-set-history-card/terminals-term-set-history-card.component.html

@@ -18,7 +18,7 @@
                 matTooltipPosition="right"
                 style="white-space: nowrap; cursor: default"
             >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
             </div>
         </ng-container>
     </ng-template>

src/app/sections/tariffs/components/terminals-terms/terminals-terms.component.html

@@ -40,7 +40,7 @@
                     text-overflow: ellipsis;
                 "
             >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
             </div>
         </ng-container>
     </ng-template>

src/app/sections/tariffs/components/terminals-terms/terminals-terms.component.ts

@@ -79,7 +79,7 @@ export class TerminalsTermsComponent implements OnInit {
     columns: Column<TerminalTermSet>[] = [
         createDomainObjectColumn<TerminalTermSet>('terminal', (d) => d.terminal_id),
         createDomainObjectColumn<TerminalTermSet>('provider', (d) => d.provider_id),
-        { field: 'currency' },
+        { field: 'currencies', formatter: (d) => d.currencies.join(', ') },
         ...createTerminalFeesColumn<TerminalTermSet>((d) => d.current_term_set),
         {
             field: 'term_set_history',

src/app/sections/tariffs/components/wallets-tariffs/wallets-tariffs.component.html

@@ -42,7 +42,7 @@
                     text-overflow: ellipsis;
                 "
             >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
             </div>
         </ng-container>
     </ng-template>

src/app/sections/tariffs/components/wallets-term-set-history-card/wallets-term-set-history-card.component.html

@@ -18,7 +18,7 @@
                 matTooltipPosition="right"
                 style="white-space: nowrap; cursor: default"
             >
-                {{ item }}
+                {{ value?.length > 1 ? item || '-' : item }}
             </div>
         </ng-container>
     </ng-template>

src/app/sections/tariffs/utils/get-inline-decisions.ts

@@ -57,7 +57,9 @@ function formatCashFlowAccount(acc: CashFlowAccount) {
 }
 
 export function formatLevelPredicate(v: InlineCashFlowSelector) {
-    return `${' '.repeat(v.level)}${formatPredicate(v.if) || (v.level > 0 ? '↳' : '')}`;
+    return `${'\xa0'.repeat(Math.max(v.level - 1, 0))}${v.level > 0 ? '↳' : ''} ${formatPredicate(
+        v.if,
+    )}`;
 }
 
 export function getInlineDecisions(

src/app/sections/withdrawals/components/create-adjustment-dialog/create-adjustment-dialog.component.ts

@@ -6,7 +6,7 @@ import { AdjustmentParams } from '@vality/fistful-proto/withdrawal_adjustment';
 import { DialogSuperclass, forkJoinToResult, NotifyLogService } from '@vality/ng-core';
 import { isTypeWithAliases } from '@vality/ng-thrift';
 import { BehaviorSubject, of } from 'rxjs';
-import * as short from 'short-uuid';
+import short from 'short-uuid';
 
 import { ManagementService } from '@cc/app/api/withdrawal';
 

src/app/shared/services/domain-metadata-form-extensions/domain-metadata-form-extensions.service.ts

@@ -6,7 +6,7 @@ import { getNoTimeZoneIsoString, getImportValue } from '@vality/ng-core';
 import { ThriftData, isTypeWithAliases } from '@vality/ng-thrift';
 import { Observable, of } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
-import * as short from 'short-uuid';
+import short from 'short-uuid';
 
 import { DomainStoreService } from '@cc/app/api/domain-config';
 

src/app/shared/services/domain-metadata-form-extensions/utils/create-party-claim-domain-metadata-form-extensions.ts

@@ -3,7 +3,7 @@ import { Party } from '@vality/domain-proto/domain';
 import { isTypeWithAliases } from '@vality/ng-thrift';
 import uniqBy from 'lodash-es/uniqBy';
 import { of } from 'rxjs';
-import * as short from 'short-uuid';
+import short from 'short-uuid';
 
 import {
     MetadataFormExtension,

src/app/shared/services/user-info-based-id-generator/user-info-based-id-generator.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { KeycloakService } from 'keycloak-angular';
-import * as short from 'short-uuid';
+import short from 'short-uuid';
 
 @Injectable()
 export class UserInfoBasedIdGeneratorService {

src/app/shared/utils/table/format-predicate.ts

@@ -28,13 +28,13 @@ export function formatPredicate(predicate: Predicate, level = 0) {
             const condition = predicate.condition;
             switch (getUnionKey(condition)) {
                 case 'currency_is':
-                    return `currency: ${condition.currency_is.symbolic_code}`;
+                    return `currency = ${condition.currency_is.symbolic_code}`;
                 case 'bin_data':
-                    return `bin_data: ${inlineJson(toJson(condition.bin_data), Infinity)}`;
+                    return `bin_data = ${inlineJson(toJson(condition.bin_data), Infinity)}`;
                 case 'category_is':
-                    return `category: #${condition.category_is.id}`;
+                    return `category = #${condition.category_is.id}`;
                 case 'cost_in':
-                    return `cost: ${
+                    return `cost = ${
                         getUnionKey(condition.cost_in.lower) === 'inclusive' ? '[' : '('
                     }${formatCurrency(
                         getUnionValue(condition.cost_in.lower)?.amount,
@@ -44,22 +44,26 @@ export function formatPredicate(predicate: Predicate, level = 0) {
                         getUnionValue(condition.cost_in.upper)?.currency?.symbolic_code,
                     )}${getUnionKey(condition.cost_in.upper) === 'inclusive' ? ']' : ')'}`;
                 case 'cost_is_multiple_of':
-                    return `cost_is_multiple: ${formatCurrency(
+                    return `cost_is_multiple = ${formatCurrency(
                         condition.cost_is_multiple_of.amount,
                         condition.cost_is_multiple_of.currency.symbolic_code,
                     )}`;
                 case 'identification_level_is':
-                    return `identification_level: ${condition.identification_level_is}`; // TODO: fix enum value
+                    return `identification_level = ${condition.identification_level_is}`; // TODO: fix enum value
                 case 'p2p_tool':
-                    return `p2p_tool: ${inlineJson(toJson(condition.p2p_tool), Infinity)}`;
+                    return `p2p_tool = ${inlineJson(toJson(condition.p2p_tool), Infinity)}`;
                 case 'party':
-                    return `party: ${inlineJson(toJson(condition.party), Infinity)}`;
+                    return `party = (#${condition.party.id}${
+                        condition.party?.definition
+                            ? ' & ' + inlineJson(toJson(condition.party?.definition), Infinity)
+                            : ''
+                    })`;
                 case 'payment_tool':
-                    return `payment_tool: ${inlineJson(toJson(condition.payment_tool), Infinity)}`;
+                    return `payment_tool = ${inlineJson(toJson(condition.payment_tool), Infinity)}`;
                 case 'payout_method_is':
-                    return `payout_method: #${condition.payout_method_is.id}`; // TODO: fix enum value
+                    return `payout_method = ${condition.payout_method_is.id}`; // TODO: fix enum value
                 case 'shop_location_is':
-                    return `shop_url: ${condition.shop_location_is.url}`;
+                    return `shop_url = ${condition.shop_location_is.url}`;
             }
             return '';
         }

src/components/details-item/_details-item-theme.scss

@@ -5,6 +5,6 @@
 
     .cc-details-item-title,
     .cc-details-item-content-empty {
-        color: mat.get-color-from-palette($foreground, secondary-text);
+        color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
 }

tsconfig.json

@@ -6,13 +6,13 @@
         "outDir": "./dist/out-tsc",
         "forceConsistentCasingInFileNames": true,
         "strict": false,
+        "esModuleInterop": true,
         "noImplicitOverride": false,
         "noPropertyAccessFromIndexSignature": false,
         "noImplicitReturns": false,
         "noFallthroughCasesInSwitch": false,
         "sourceMap": true,
         "declaration": false,
-        "downlevelIteration": true,
         "experimentalDecorators": true,
         "moduleResolution": "node",
         "importHelpers": true,
@@ -20,7 +20,6 @@
         "module": "ES2022",
         "useDefineForClassFields": false,
         "lib": ["ESNext", "DOM"],
-        "allowSyntheticDefaultImports": true,
         "resolveJsonModule": true,
         "skipLibCheck": true,
         "paths": {