TD-837,TD-833: Remove until destroy. Update monaco editor (#308)

angular.json

@@ -28,8 +28,8 @@
                             "src/assets",
                             {
                                 "glob": "**/*",
-                                "input": "./node_modules/monaco-editor/min/vs",
+                                "input": "node_modules/monaco-editor",
-                                "output": "libs/vs"
+                                "output": "/assets/monaco/"
                             }
                         ],
                         "styles": ["src/app/styles/styles.scss"],
@@ -39,7 +39,6 @@
                             "short-uuid",
                             "js-sha256",
                             "jwt-decode",
-                            "css-element-queries",
                             "base64-js",
                             "@vality/deanonimus-proto",
                             "@vality/domain-proto",
@@ -128,8 +127,8 @@
                             "src/assets",
                             {
                                 "glob": "**/*",
-                                "input": "./node_modules/monaco-editor/min/vs",
+                                "input": "node_modules/monaco-editor",
-                                "output": "libs/vs"
+                                "output": "/assets/monaco/"
                             }
                         ],
                         "styles": ["src/app/styles/styles.scss"],

package-lock.json

@@ -20,25 +20,24 @@
         "@angular/platform-server": "17.0.8",
         "@angular/router": "17.0.8",
         "@ngneat/input-mask": "6.0.0",
-        "@ngneat/until-destroy": "9.2.2",
         "@s-libs/ng-core": "17.0.0",
         "@vality/deanonimus-proto": "2.0.1-2a02d87.0",
         "@vality/domain-proto": "2.0.1-23211ff.0",
         "@vality/fistful-proto": "2.0.1-3b9a0a7.0",
         "@vality/machinegun-proto": "1.0.0",
         "@vality/magista-proto": "2.0.2-4383410.0",
-        "@vality/ng-core": "17.0.0",
+        "@vality/ng-core": "17.1.1-pr-57-8d24d61.0",
         "@vality/payout-manager-proto": "2.0.1-eb4091a.0",
         "@vality/repairer-proto": "2.0.2-07b73e9.0",
         "@vality/thrift-ts": "2.4.1-8ad5123.0",
         "@vality/woody": "0.1.3",
-        "css-element-queries": "1.2.3",
         "date-fns": "2.30.0",
         "inputmask": "5.0.7",
         "keycloak-angular": "^15.0.0",
-        "keycloak-js": "^18.0.1",
+        "keycloak-js": "^20.0.5",
         "lodash-es": "^4.17.21",
-        "monaco-editor": "0.21.2",
+        "monaco-editor": "^0.44.0",
+        "ngx-monaco-editor-v2": "^17.0.1",
         "papaparse": "^5.4.1",
         "rxjs": "7.8.1",
         "short-uuid": "4.2.2",
@@ -5000,18 +4999,6 @@
         "inputmask": "^5.0.7"
       }
     },
-    "node_modules/@ngneat/until-destroy": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/@ngneat/until-destroy/-/until-destroy-9.2.2.tgz",
-      "integrity": "sha512-pD5idTgUdF0XZMuaV1n0BZTnE2BvxymutoXhwfZbO3uxjh63wS6Pzzzwv+pkXalKhuSwdf6uA1gRx7DOvlj/Kw==",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      },
-      "peerDependencies": {
-        "@angular/core": ">=13",
-        "rxjs": "^6.4.0 || ^7.0.0"
-      }
-    },
     "node_modules/@ngtools/webpack": {
       "version": "17.0.8",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.0.8.tgz",
@@ -6536,9 +6523,9 @@
       "integrity": "sha512-kAiKSTvof+jFuNkQKyAsc2s+Br2NXPWAyKuD0f7mQIk9HrP8uHsKJya5KxdOdng97JYe0MSUlx7seQxWmCgYfA=="
     },
     "node_modules/@vality/ng-core": {
-      "version": "17.0.0",
+      "version": "17.1.1-pr-57-8d24d61.0",
-      "resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-17.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vality/ng-core/-/ng-core-17.1.1-pr-57-8d24d61.0.tgz",
-      "integrity": "sha512-07oxorY6xtLxUve+1GGsHTWRsz8jkzisFOeuZA4FfKkwCHQhW7x/LUQM9xQoUkon5ZKMBV8A7SvwNW7rwXO1UA==",
+      "integrity": "sha512-6nRi75ML8LhDObD9iUUtk+6pQ3rpgyDttvK3Bp30Fs3wWP3Ypk2Z9gD+40G0RPpbunR7c27vtJ0po0Oe4IyyiA==",
       "dependencies": {
         "@angular/material-date-fns-adapter": "^17.0.0",
         "@ng-matero/extensions": "^17.0.0",
@@ -6548,7 +6535,7 @@
         "@s-libs/rxjs-core": "^17.0.0",
         "dinero.js": "^2.0.0-alpha.14",
         "fuse.js": "^7.0.0",
-        "ng-let": "^16.0.1",
+        "short-uuid": "^4.2.2",
         "tslib": "^2.3.0"
       },
       "peerDependencies": {
@@ -9276,11 +9263,6 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
-    "node_modules/css-element-queries": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-1.2.3.tgz",
-      "integrity": "sha512-QK9uovYmKTsV2GXWQiMOByVNrLn2qz6m3P7vWpOR4IdD6I3iXoDw5qtgJEN3Xq7gIbdHVKvzHjdAtcl+4Arc4Q=="
-    },
     "node_modules/css-loader": {
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.8.1.tgz",
@@ -13494,9 +13476,9 @@
       }
     },
     "node_modules/keycloak-js": {
-      "version": "18.0.1",
+      "version": "20.0.5",
-      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-18.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-20.0.5.tgz",
-      "integrity": "sha512-IRXToYpbIrkyfLeNNJly2OjUCf11ncx2Sdsg257NVDwjOYE923osu47w8pfxEVWpTaS14/Y2QjbTHciuBK0RBQ==",
+      "integrity": "sha512-7+M5Uni4oNlAmbjM/lDJzFHu2+PGqU6/bvmTBuQssE1fJ7ZyNeCRHgFoaVfFpIU3m6aAFwPUko4lVcn4kPXP5Q==",
       "dependencies": {
         "base64-js": "^1.5.1",
         "js-sha256": "^0.9.0"
@@ -14372,9 +14354,9 @@
       }
     },
     "node_modules/monaco-editor": {
-      "version": "0.21.2",
+      "version": "0.44.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.21.2.tgz",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.44.0.tgz",
-      "integrity": "sha512-jS51RLuzMaoJpYbu7F6TPuWpnWTLD4kjRW0+AZzcryvbxrTwhNy1KC9yboyKpgMTahpUbDUsuQULoo0GV1EPqg=="
+      "integrity": "sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q=="
     },
     "node_modules/mrmime": {
       "version": "1.0.1",
@@ -14493,18 +14475,6 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
-    "node_modules/ng-let": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/ng-let/-/ng-let-16.0.1.tgz",
-      "integrity": "sha512-xS213D2J+WRBVVB2CQnTtKxaEMFt/gjtVhhklfmfqbXOXGQJXmPonI9m4n9Sp+gp/NcmMRMn21pmeKAjcLsPzA==",
-      "dependencies": {
-        "tslib": "^2.3.1"
-      },
-      "peerDependencies": {
-        "@angular/common": ">15.0.0",
-        "@angular/core": ">15.0.0"
-      }
-    },
     "node_modules/ngx-color": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-9.0.0.tgz",
@@ -14519,6 +14489,19 @@
         "@angular/core": ">=16.0.0-0"
       }
     },
+    "node_modules/ngx-monaco-editor-v2": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-monaco-editor-v2/-/ngx-monaco-editor-v2-17.0.1.tgz",
+      "integrity": "sha512-GP+Ni6zKFQjF/ve5ZQtfE9eRLKL4GxMvdmDTrla1x6F5pSIcYGCcjZ4gQ1/AHMa5dgarfs+Et+1bBtAOJtI6KA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^17.0.3",
+        "@angular/core": "^17.0.3",
+        "monaco-editor": "^0.44.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

package.json

@@ -28,25 +28,24 @@
     "@angular/platform-server": "17.0.8",
     "@angular/router": "17.0.8",
     "@ngneat/input-mask": "6.0.0",
-    "@ngneat/until-destroy": "9.2.2",
     "@s-libs/ng-core": "17.0.0",
     "@vality/deanonimus-proto": "2.0.1-2a02d87.0",
     "@vality/domain-proto": "2.0.1-23211ff.0",
     "@vality/fistful-proto": "2.0.1-3b9a0a7.0",
     "@vality/machinegun-proto": "1.0.0",
     "@vality/magista-proto": "2.0.2-4383410.0",
-    "@vality/ng-core": "17.0.0",
+    "@vality/ng-core": "17.1.1-pr-57-8d24d61.0",
     "@vality/payout-manager-proto": "2.0.1-eb4091a.0",
     "@vality/repairer-proto": "2.0.2-07b73e9.0",
     "@vality/thrift-ts": "2.4.1-8ad5123.0",
     "@vality/woody": "0.1.3",
-    "css-element-queries": "1.2.3",
     "date-fns": "2.30.0",
     "inputmask": "5.0.7",
     "keycloak-angular": "^15.0.0",
-    "keycloak-js": "^18.0.1",
+    "keycloak-js": "^20.0.5",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "0.21.2",
+    "monaco-editor": "^0.44.0",
+    "ngx-monaco-editor-v2": "^17.0.1",
     "papaparse": "^5.4.1",
     "rxjs": "7.8.1",
     "short-uuid": "4.2.2",

src/app/api/domain-config/stores/domain-store.service.ts

@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
+import { Injectable, DestroyRef } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Domain, DomainObject, Reference } from '@vality/domain-proto/domain';
 import { Commit, Snapshot, Version } from '@vality/domain-proto/domain_config';
 import { NotifyLogService } from '@vality/ng-core';
@@ -12,7 +12,6 @@ import { DomainSecretService } from '../../../shared/services';
 import { handleError } from '../../../shared/services/notification-error';
 import { RepositoryService } from '../index';
 
-@UntilDestroy()
 @Injectable({
     providedIn: 'root',
 })
@@ -30,7 +29,7 @@ export class DomainStoreService {
                 .Checkout({ head: {} })
                 .pipe(progressTo(this.progress$), handleError(this.log.error)),
         ),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     );
     private reload$ = new ReplaySubject<void>(1);
@@ -40,6 +39,7 @@ export class DomainStoreService {
         private repositoryService: RepositoryService,
         private domainSecretService: DomainSecretService,
         private log: NotifyLogService,
+        private destroyRef: DestroyRef,
     ) {}
 
     forceReload(): void {

src/app/app.component.html

@@ -3,7 +3,7 @@
 <mat-sidenav-container autosize class="container">
     <mat-sidenav fixedInViewport="true" fixedTopGap="64" mode="side" opened role="navigation">
         <mat-nav-list>
-            <ng-container *ngFor="let group of menuItems; let i = index">
+            <ng-container *ngFor="let group of menuItemsGroups$ | async; let i = index">
                 <mat-divider *ngIf="i !== 0"></mat-divider>
                 <mat-list-item
                     *ngFor="let item of group"

src/app/app.component.ts

@@ -1,9 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { KeycloakService } from 'keycloak-angular';
 import sortBy from 'lodash-es/sortBy';
+import { from, Observable } from 'rxjs';
+import { shareReplay, map } from 'rxjs/operators';
 
 import { AppAuthGuardService } from '@cc/app/shared/services';
 
+import { environment } from '../environments/environment';
+
 import { ROUTING_CONFIG as CLAIMS_ROUTING_CONFIG } from './sections/claims/routing-config';
 import { ROUTING_CONFIG as DEPOSITS_ROUTING_CONFIG } from './sections/deposits/routing-config';
 import { ROUTING_CONFIG as DOMAIN_ROUTING_CONFIG } from './sections/domain/routing-config';
@@ -23,22 +27,37 @@ import { SidenavInfoService } from './shared/components/sidenav-info';
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
-    menuItems: { name: string; route: string }[][] = [];
+    menuItemsGroups$: Observable<{ name: string; route: string }[][]> = from(
+        this.keycloakService.loadUserProfile(),
+    ).pipe(
+        map(() => this.getMenuItemsGroups()),
+        shareReplay({ refCount: true, bufferSize: 1 }),
+    );
 
     constructor(
         private keycloakService: KeycloakService,
         private appAuthGuardService: AppAuthGuardService,
         public sidenavInfoService: SidenavInfoService,
-    ) {}
+    ) {
+        this.registerConsoleUtils();
+    }
 
-    ngOnInit() {
+    private registerConsoleUtils() {
-        void this.keycloakService.loadUserProfile().then(() => {
+        Object.assign(window as never as object, {
-            this.menuItems = this.getMenuItems();
+            ccSwitchLogging: () => {
+                environment.logging = { requests: !environment.logging.requests };
+                // eslint-disable-next-line no-console
+                console.log(`Logging ${environment.logging.requests ? 'enabled' : 'disabled'}`);
+            },
+            ccGetMyRoles: () => {
+                // eslint-disable-next-line no-console
+                console.log(this.keycloakService.getUserRoles(true).sort().join('\n'));
+            },
         });
     }
 
-    private getMenuItems() {
+    private getMenuItemsGroups() {
         const menuItems = [
             [
                 {

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { InputMaskModule } from '@ngneat/input-mask';
 import { QUERY_PARAMS_SERIALIZERS } from '@vality/ng-core';
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 
 import { KeycloakTokenInfoModule } from '@cc/app/shared/services';
 
@@ -71,6 +72,7 @@ export let AppInjector: Injector;
         SectionsModule,
         SidenavInfoComponent,
         ToolbarComponent,
+        MonacoEditorModule.forRoot(),
         // TODO: hack for metadata datetime 😡
         MatDatepickerModule,
         // TODO: hack for cash field 😡

src/app/core/components/toolbar/toolbar.component.ts

@@ -5,7 +5,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { KeycloakService } from 'keycloak-angular';
-import { of, switchMap } from 'rxjs';
+import { from } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
 
 @Component({
@@ -16,8 +16,7 @@ import { map, shareReplay } from 'rxjs/operators';
     styleUrl: './toolbar.component.scss',
 })
 export class ToolbarComponent {
-    username$ = of().pipe(
+    username$ = from(this.keycloakService.loadUserProfile()).pipe(
-        switchMap(() => this.keycloakService.loadUserProfile()),
         map(() => this.keycloakService.getUsername()),
         shareReplay({ refCount: true, bufferSize: 1 }),
     );

src/app/sections/chargebacks/chargebacks.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NonNullableFormBuilder } from '@angular/forms';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { ChargebackSearchQuery, StatChargeback } from '@vality/magista-proto/magista';
 import {
     DateRange,
@@ -32,7 +32,6 @@ import { DATE_RANGE_DAYS } from '../../tokens';
 import { CreateChargebacksByFileDialogComponent } from './components/create-chargebacks-by-file-dialog/create-chargebacks-by-file-dialog.component';
 import { FetchChargebacksService } from './fetch-chargebacks.service';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-chargebacks',
     templateUrl: './chargebacks.component.html',
@@ -67,6 +66,7 @@ export class ChargebacksComponent implements OnInit {
         private fetchChargebacksService: FetchChargebacksService,
         private dialog: DialogService,
         @Inject(DATE_RANGE_DAYS) private dateRangeDays: number,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnInit() {
@@ -74,7 +74,7 @@ export class ChargebacksComponent implements OnInit {
             merge({}, this.qp.params.filters, clean({ dateRange: this.qp.params.dateRange })),
         );
         this.filtersForm.valueChanges
-            .pipe(startWith(null), debounceTime(500), untilDestroyed(this))
+            .pipe(startWith(null), debounceTime(500), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
                 this.load();
             });
@@ -120,7 +120,7 @@ export class ChargebacksComponent implements OnInit {
             .afterClosed()
             .pipe(
                 filter((res) => res.status === DialogResponseStatus.Success),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((res) => {
                 this.filtersForm.reset({
@@ -136,7 +136,7 @@ export class ChargebacksComponent implements OnInit {
             .afterClosed()
             .pipe(
                 filter((res) => res.status === DialogResponseStatus.Success),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe(() => {
                 this.load();

src/app/sections/chargebacks/components/create-chargebacks-by-file-dialog/create-chargebacks-by-file-dialog.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { InvoicePaymentChargeback } from '@vality/domain-proto/domain';
 import { InvoicePaymentChargebackParams } from '@vality/domain-proto/payment_processing';
 import {
@@ -29,7 +29,6 @@ interface ChargebackParams {
     params: InvoicePaymentChargebackParams;
 }
 
-@UntilDestroy()
 @Component({
     selector: 'cc-create-chargebacks-by-file-dialog',
     templateUrl: './create-chargebacks-by-file-dialog.component.html',
@@ -141,12 +140,13 @@ export class CreateChargebacksByFileDialogComponent
         private invoicingService: InvoicingService,
         private log: NotifyLogService,
         private amountCurrencyService: AmountCurrencyService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
 
     ngOnInit() {
-        this.chargebacks$.pipe(untilDestroyed(this)).subscribe((c) => {
+        this.chargebacks$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((c) => {
             this.selectedChargebacks = c || [];
         });
     }
@@ -159,7 +159,7 @@ export class CreateChargebacksByFileDialogComponent
             ),
             this.progress$,
         )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: (res) => {
                     this.successfullyChargebacks.push(

src/app/sections/claim/claim.component.ts

@@ -1,13 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogResponseStatus, DialogService } from '@vality/ng-core';
 import { BehaviorSubject, combineLatest, defer, merge, Observable, Subject, switchMap } from 'rxjs';
 import { first, map, shareReplay } from 'rxjs/operators';
 
 import { ClaimManagementService } from '@cc/app/api/claim-management';
 import { PartyManagementService } from '@cc/app/api/payment-processing';
-import { NotificationService } from '@cc/app/shared/services/notification';
 import { getUnionKey, inProgressFrom, progressTo } from '@cc/utils';
 
 import { NotificationErrorService, handleError } from '../../shared/services/notification-error';
@@ -17,7 +16,6 @@ import { ChangeStatusDialogComponent } from './components/change-status-dialog/c
 import { AllowedClaimStatusesService } from './services/allowed-claim-statuses.service';
 import { CLAIM_STATUS_COLOR } from './types/claim-status-color';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-claim',
     templateUrl: './claim.component.html',
@@ -62,10 +60,10 @@ export class ClaimComponent {
         private route: ActivatedRoute,
         private claimManagementService: ClaimManagementService,
         private partyManagementService: PartyManagementService,
-        private notificationService: NotificationService,
         private allowedClaimStatusesService: AllowedClaimStatusesService,
         private dialogService: DialogService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {}
 
     reloadClaim() {
@@ -81,7 +79,7 @@ export class ClaimComponent {
                         .open(AddModificationDialogComponent, { party, claim })
                         .afterClosed(),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((result) => {
                 if (result.status === DialogResponseStatus.Success) {
@@ -99,7 +97,7 @@ export class ClaimComponent {
                         .open(ChangeStatusDialogComponent, { partyID: party.id, claim })
                         .afterClosed(),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((result) => {
                 if (result.status === DialogResponseStatus.Success) {

src/app/sections/claim/components/add-modification-dialog/add-modification-dialog.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Validators, FormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Claim, ModificationUnit } from '@vality/domain-proto/claim_management';
 import { Party } from '@vality/domain-proto/domain';
 import { ModificationChange, Modification } from '@vality/domain-proto/internal/claim_management';
@@ -13,7 +13,6 @@ import { inProgressFrom, progressTo } from '@cc/utils';
 
 import { NotificationErrorService } from '../../../../shared/services/notification-error';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-add-modification-dialog',
     templateUrl: './add-modification-dialog.component.html',
@@ -41,6 +40,7 @@ export class AddModificationDialogComponent extends DialogSuperclass<
         private claimManagementService: ClaimManagementService,
         private notificationService: NotificationService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -49,7 +49,7 @@ export class AddModificationDialogComponent extends DialogSuperclass<
         const { party, claim } = this.dialogData;
         this.claimManagementService
             .UpdateClaim(party.id, claim.id, claim.revision, [this.control.value])
-            .pipe(progressTo(this.progress$), untilDestroyed(this))
+            .pipe(progressTo(this.progress$), takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: () => {
                     this.notificationService.success('Modification added successfully');
@@ -69,7 +69,7 @@ export class AddModificationDialogComponent extends DialogSuperclass<
                 modificationUnit.modification_id,
                 this.control.value,
             )
-            .pipe(progressTo(this.progress$), untilDestroyed(this))
+            .pipe(progressTo(this.progress$), takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: () => {
                     this.notificationService.success('Modification updated successfully');

src/app/sections/claim/components/change-status-dialog/change-status-dialog.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Validators, FormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Claim, ClaimStatus } from '@vality/domain-proto/claim_management';
 import { DialogResponseStatus, DialogSuperclass } from '@vality/ng-core';
 import { BehaviorSubject, Observable } from 'rxjs';
@@ -12,7 +12,6 @@ import { getUnionKey, inProgressFrom, progressTo } from '@cc/utils';
 
 import { NotificationErrorService } from '../../../../shared/services/notification-error';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-change-status-dialog',
     templateUrl: './change-status-dialog.component.html',
@@ -39,6 +38,7 @@ export class ChangeStatusDialogComponent extends DialogSuperclass<
         private notificationService: NotificationService,
         private allowedClaimStatusesService: AllowedClaimStatusesService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -65,7 +65,7 @@ export class ChangeStatusDialogComponent extends DialogSuperclass<
                 result$ = this.claimManagementService.RequestClaimChanges(...params);
                 break;
         }
-        result$.pipe(progressTo(this.progress$), untilDestroyed(this)).subscribe({
+        result$.pipe(progressTo(this.progress$), takeUntilDestroyed(this.destroyRef)).subscribe({
             next: () => {
                 this.dialogRef.close({ status: DialogResponseStatus.Success });
                 this.notificationService.success('Status successfully changed');

src/app/sections/claim/components/modification-unit-timeline-item/modification-unit-timeline-item.component.ts

@@ -1,5 +1,12 @@
-import { Component, EventEmitter, Input, Output, booleanAttribute } from '@angular/core';
+import {
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+    booleanAttribute,
+    DestroyRef,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Claim, ModificationUnit } from '@vality/domain-proto/claim_management';
 import { DialogResponseStatus, DialogService, ConfirmDialogComponent } from '@vality/ng-core';
 import isEmpty from 'lodash-es/isEmpty';
@@ -18,7 +25,6 @@ import { getUnionValue } from '@cc/utils/get-union-key';
 import { NotificationErrorService } from '../../../../shared/services/notification-error';
 import { AddModificationDialogComponent } from '../add-modification-dialog/add-modification-dialog.component';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-modification-unit-timeline-item',
     templateUrl: './modification-unit-timeline-item.component.html',
@@ -48,6 +54,7 @@ export class ModificationUnitTimelineItemComponent {
         private notificationService: NotificationService,
         private domainMetadataViewExtensionsService: DomainMetadataViewExtensionsService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {}
 
     get name() {
@@ -72,7 +79,7 @@ export class ModificationUnitTimelineItemComponent {
                         })
                         .afterClosed(),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((result) => {
                 if (result.status === DialogResponseStatus.Success) {
@@ -97,7 +104,7 @@ export class ModificationUnitTimelineItemComponent {
                     ),
                 ),
                 progressTo(this.progress$),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({
                 next: () => {

src/app/sections/claims/claims.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NonNullableFormBuilder } from '@angular/forms';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { PartyID } from '@vality/domain-proto/domain';
 import { DialogService, LoadOptions, QueryParamsService, clean } from '@vality/ng-core';
 import { debounceTime } from 'rxjs';
@@ -11,7 +11,6 @@ import { CLAIM_STATUSES } from '../../api/claim-management';
 import { CreateClaimDialogComponent } from './components/create-claim-dialog/create-claim-dialog.component';
 import { FetchClaimsService } from './fetch-claims.service';
 
-@UntilDestroy()
 @Component({
     templateUrl: './claims.component.html',
 })
@@ -34,12 +33,13 @@ export class ClaimsComponent implements OnInit {
         private dialogService: DialogService,
         private fb: NonNullableFormBuilder,
         private qp: QueryParamsService<ClaimsComponent['filtersForm']['value']>,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnInit(): void {
         this.filtersForm.patchValue(this.qp.params);
         this.filtersForm.valueChanges
-            .pipe(startWith(null), debounceTime(500), untilDestroyed(this))
+            .pipe(startWith(null), debounceTime(500), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
                 this.load();
             });

src/app/sections/claims/components/create-claim-dialog/create-claim-dialog.component.ts

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { DialogSuperclass } from '@vality/ng-core';
 import { BehaviorSubject } from 'rxjs';
 
@@ -10,7 +10,6 @@ import { NotificationService } from '@cc/app/shared/services/notification';
 import { NotificationErrorService } from '@cc/app/shared/services/notification-error';
 import { progressTo } from '@cc/utils';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-create-claim-dialog',
     templateUrl: './create-claim-dialog.component.html',
@@ -27,6 +26,7 @@ export class CreateClaimDialogComponent extends DialogSuperclass<
         private notificationService: NotificationService,
         private notificationErrorService: NotificationErrorService,
         private router: Router,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -34,7 +34,7 @@ export class CreateClaimDialogComponent extends DialogSuperclass<
     create() {
         this.claimService
             .CreateClaim(this.control.value, [])
-            .pipe(progressTo(this.progress$), untilDestroyed(this))
+            .pipe(progressTo(this.progress$), takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: (claim) => {
                     this.notificationService.success('Claim successfully created');

src/app/sections/deposit-details/deposit-details.component.ts

@@ -1,11 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import { pluck, take } from 'rxjs/operators';
 
 import { ReceiveDepositService } from './services/receive-deposit/receive-deposit.service';
 
-@UntilDestroy()
 @Component({
     templateUrl: 'deposit-details.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,

src/app/sections/deposit-details/reverts/create-revert-dialog/create-revert-dialog.component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Validators, NonNullableFormBuilder } from '@angular/forms';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { Revert } from '@vality/fistful-proto/internal/deposit_revert';
 import { DialogSuperclass, NotifyLogService, toMinor, clean } from '@vality/ng-core';
 import { BehaviorSubject } from 'rxjs';
@@ -11,7 +11,6 @@ import { UserInfoBasedIdGeneratorService } from '../../../../shared/services';
 
 import { CreateRevertDialogConfig } from './types/create-revert-dialog-config';
 
-@UntilDestroy()
 @Component({
     templateUrl: 'create-revert-dialog.component.html',
     styleUrls: ['create-revert-dialog.component.scss'],
@@ -35,6 +34,7 @@ export class CreateRevertDialogComponent extends DialogSuperclass<
         private depositManagementService: ManagementService,
         private idGenerator: UserInfoBasedIdGeneratorService,
         private log: NotifyLogService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -60,7 +60,7 @@ export class CreateRevertDialogComponent extends DialogSuperclass<
                     true,
                 ),
             )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: (revert) => {
                     this.log.successOperation('create', 'revert');

src/app/sections/deposits/create-deposit-dialog/create-deposit-dialog.component.ts

@@ -1,13 +1,12 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormGroup } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { StatDeposit } from '@vality/fistful-proto/fistful_stat';
 import { DialogSuperclass } from '@vality/ng-core';
 
 import { CreateDepositService } from './services/create-deposit/create-deposit.service';
 
-@UntilDestroy()
 @Component({
     templateUrl: 'create-deposit-dialog.component.html',
     styleUrls: ['create-deposit-dialog.component.scss'],
@@ -28,6 +27,7 @@ export class CreateDepositDialogComponent
     constructor(
         private createDepositService: CreateDepositService,
         private snackBar: MatSnackBar,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -39,17 +39,17 @@ export class CreateDepositDialogComponent
             this.closeWithSuccess(deposit);
             this.form.enable();
         });
-        this.error$.pipe(untilDestroyed(this)).subscribe(() => {
+        this.error$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.snackBar.open('An error occurred while deposit create', 'OK');
             this.closeWithError();
             this.form.enable();
         });
-        this.pollingError$.pipe(untilDestroyed(this)).subscribe(() => {
+        this.pollingError$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.snackBar.open('An error occurred while deposit polling', 'OK');
             this.closeWithError();
             this.form.enable();
         });
-        this.pollingTimeout$.pipe(untilDestroyed(this)).subscribe(() => {
+        this.pollingTimeout$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.snackBar.open('Polling timeout error', 'OK');
             this.closeWithError();
             this.form.enable();

src/app/sections/deposits/deposits.component.ts

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, OnInit, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, Inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { StatDeposit, RevertStatus } from '@vality/fistful-proto/fistful_stat';
 import {
     Column,
@@ -34,7 +34,6 @@ const REVERT_STATUS: { [N in RevertStatus]: string } = {
     2: 'full',
 };
 
-@UntilDestroy()
 @Component({
     templateUrl: 'deposits.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -125,6 +124,7 @@ export class DepositsComponent implements OnInit {
         @Inject(DATE_RANGE_DAYS) private dateRangeDays: number,
         @Inject(DEBOUNCE_TIME_MS) private debounceTimeMs: number,
         private qp: QueryParamsService<object>,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnInit() {
@@ -133,7 +133,7 @@ export class DepositsComponent implements OnInit {
             .pipe(
                 startWith(this.filtersForm.value),
                 debounceTime(this.debounceTimeMs),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe(() => {
                 this.update();
@@ -146,7 +146,7 @@ export class DepositsComponent implements OnInit {
             .afterClosed()
             .pipe(
                 filter((res) => res.status === DialogResponseStatus.Success),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe(() => {
                 this.update();

src/app/sections/domain/domain-info/domain-info.component.ts

@@ -1,9 +1,7 @@
 import { Component } from '@angular/core';
-import { UntilDestroy } from '@ngneat/until-destroy';
 
 import { DomainStoreService } from '@cc/app/api/domain-config';
 
-@UntilDestroy()
 @Component({
     templateUrl: './domain-info.component.html',
     styleUrls: ['./domain-info.component.scss'],

src/app/sections/domain/domain-info/domain-info.module.ts

@@ -10,8 +10,6 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { RouterModule } from '@angular/router';
 import { PipesModule, ActionsModule } from '@vality/ng-core';
 
-import { MonacoEditorModule } from '@cc/components/monaco-editor';
-
 import { ThriftPipesModule, PageLayoutModule } from '../../../shared';
 import { DomainThriftViewerComponent } from '../../../shared/components/thrift-api-crud';
 import { ThriftViewerModule } from '../../../shared/components/thrift-viewer';
@@ -31,7 +29,6 @@ import { DomainObjectsTableComponent } from './domain-objects-table';
         MatButtonModule,
         MatInputModule,
         MatProgressSpinnerModule,
-        MonacoEditorModule,
         ThriftViewerModule,
         PipesModule,
         RouterModule,

src/app/sections/domain/domain-info/domain-objects-table/domain-objects-table.component.ts

@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { Sort } from '@angular/material/sort';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import { Reference, DomainObject } from '@vality/domain-proto/domain';
 import {
     QueryParamsService,
@@ -35,7 +34,6 @@ interface DomainObjectData {
     obj: DomainObject;
 }
 
-@UntilDestroy()
 @Component({
     standalone: true,
     selector: 'cc-domain-objects-table',
@@ -81,22 +79,22 @@ export class DomainObjectsTableComponent implements OnInit {
         },
         {
             field: 'name',
-            formatter: (d: DomainObjectData) => getDomainObjectDetails(d.obj).label || d.type,
+            formatter: (d: DomainObjectData) => getDomainObjectDetails(d.obj).label,
             sortable: true,
             click: (d) => {
                 this.details(d);
             },
         },
+        {
+            field: 'description',
+            formatter: (d: DomainObjectData) => getDomainObjectDetails(d.obj).description,
+            sortable: true,
+        },
         {
             field: 'type',
             sortable: true,
             formatter: (d) => startCase(d.type),
         },
-        // {
-        //     field: 'data',
-        //     formatter: (d) => inlineJson(getUnionValue(d.obj)?.data, Infinity),
-        //     sortable: true,
-        // },
         createOperationColumn([
             {
                 label: 'Details',

src/app/sections/domain/domain-obj-creation/domain-obj-creation.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, Validators } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DomainObject } from '@vality/domain-proto/domain';
 import { NotifyLogService } from '@vality/ng-core';
 import { BehaviorSubject } from 'rxjs';
@@ -15,7 +15,6 @@ import { NotificationService } from '../../../shared/services/notification';
 import { DomainNavigateService } from '../services/domain-navigate.service';
 import { MetadataService } from '../services/metadata.service';
 
-@UntilDestroy()
 @Component({
     templateUrl: './domain-obj-creation.component.html',
     styleUrls: ['../editor-container.scss'],
@@ -37,6 +36,7 @@ export class DomainObjCreationComponent {
         private log: NotifyLogService,
         private domainNavigateService: DomainNavigateService,
         private metadataService: MetadataService,
+        private destroyRef: DestroyRef,
     ) {}
 
     reviewChanges() {
@@ -51,7 +51,7 @@ export class DomainObjCreationComponent {
                     this.metadataService.getDomainFieldByFieldName(getUnionKey(this.control.value)),
                 ),
                 progressTo(this.progress$),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({
                 next: ([, field]) => {

src/app/sections/domain/domain-obj-creation/domain-obj-creation.module.ts

@@ -10,7 +10,6 @@ import { RouterModule } from '@angular/router';
 import { ActionsModule } from '@vality/ng-core';
 
 import { ThriftEditorModule } from '@cc/app/shared/components/thrift-editor';
-import { MonacoEditorModule } from '@cc/components/monaco-editor';
 
 import { PageLayoutModule } from '../../../shared';
 import { ThriftViewerModule } from '../../../shared/components/thrift-viewer';
@@ -26,7 +25,6 @@ import { DomainObjCreationComponent } from './domain-obj-creation.component';
         MatCardModule,
         MatButtonModule,
         MatIconModule,
-        MonacoEditorModule,
         MatDialogModule,
         ReactiveFormsModule,
         ThriftEditorModule,

src/app/sections/domain/domain-obj-modification/domain-obj-code-lens-provider.ts

@@ -1,37 +0,0 @@
-import {
-    CancellationToken,
-    CodeLens,
-    CodeLensList,
-    CodeLensProvider,
-    ITextModel,
-    ProviderResult,
-} from '@cc/components/monaco-editor';
-
-export class DomainObjCodeLensProvider implements CodeLensProvider {
-    get language() {
-        return 'json';
-    }
-
-    provideCodeLenses(model: ITextModel): ProviderResult<CodeLensList> {
-        const range = monaco.Range.fromPositions(model.getPositionAt(5), model.getPositionAt(8));
-        return {
-            lenses: [
-                {
-                    range,
-                    id: 'First Line',
-                    command: {
-                        id: null,
-                        title: 'DomainRef',
-                    },
-                },
-            ],
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
-            dispose: () => {},
-        };
-    }
-    resolveCodeLens?(
-        model: ITextModel,
-        codeLens: CodeLens,
-        token: CancellationToken,
-    ): ProviderResult<CodeLens>;
-}

src/app/sections/domain/domain-obj-modification/domain-obj-completion-provider.ts

@@ -1,33 +0,0 @@
-import {
-    CompletionList,
-    CompletionProvider,
-    ITextModel,
-    Position,
-    ProviderResult,
-} from '@cc/components/monaco-editor';
-
-export class DomainObjCompletionProvider implements CompletionProvider {
-    get language() {
-        return 'json';
-    }
-
-    provideCompletionItems(model: ITextModel, position: Position): ProviderResult<CompletionList> {
-        const word = model.getWordUntilPosition(position);
-        const range = {
-            startLineNumber: position.lineNumber,
-            endLineNumber: position.lineNumber,
-            startColumn: word.startColumn,
-            endColumn: word.endColumn,
-        };
-        return {
-            suggestions: [
-                {
-                    label: 'test',
-                    kind: monaco.languages.CompletionItemKind.Text,
-                    insertText: 'Test value',
-                    range,
-                },
-            ],
-        };
-    }
-}

src/app/sections/domain/domain-obj-modification/domain-obj-modification.component.html

@@ -6,8 +6,6 @@
         <mat-card>
             <mat-card-content class="content">
                 <cc-thrift-editor
-                    [codeLensProviders]="codeLensProviders"
-                    [completionProviders]="completionProviders"
                     [defaultValue]="object$ | async"
                     [extensions]="extensions$ | async"
                     [formControl]="control"

src/app/sections/domain/domain-obj-modification/domain-obj-modification.component.ts

@@ -1,21 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { from } from 'rxjs';
 import { first } from 'rxjs/operators';
 
-import { CodeLensProvider, CompletionProvider } from '@cc/components/monaco-editor';
-
 import { DomainMetadataFormExtensionsService } from '../../../shared/services';
 import { DomainNavigateService } from '../services/domain-navigate.service';
 import { DomainObjModificationService } from '../services/domain-obj-modification.service';
 import { ModifiedDomainObjectService } from '../services/modified-domain-object.service';
 
-import { DomainObjCodeLensProvider } from './domain-obj-code-lens-provider';
-import { DomainObjCompletionProvider } from './domain-obj-completion-provider';
-
-@UntilDestroy()
 @Component({
     templateUrl: './domain-obj-modification.component.html',
     styleUrls: ['../editor-container.scss'],
@@ -25,8 +19,6 @@ export class DomainObjModificationComponent implements OnInit {
     control = new FormControl();
 
     progress$ = this.domainObjModService.progress$;
-    codeLensProviders: CodeLensProvider[] = [new DomainObjCodeLensProvider()];
-    completionProviders: CompletionProvider[] = [new DomainObjCompletionProvider()];
     metadata$ = from(import('@vality/domain-proto/metadata.json').then((m) => m.default));
     object$ = this.domainObjModService.object$;
     type$ = this.domainObjModService.type$;
@@ -39,10 +31,13 @@ export class DomainObjModificationComponent implements OnInit {
         private modifiedDomainObjectService: ModifiedDomainObjectService,
         private domainMetadataFormExtensionsService: DomainMetadataFormExtensionsService,
         private domainNavigateService: DomainNavigateService,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnInit() {
-        this.domainObjModService.object$.pipe(first(), untilDestroyed(this)).subscribe((object) => {
+        this.domainObjModService.object$
+            .pipe(first(), takeUntilDestroyed(this.destroyRef))
+            .subscribe((object) => {
                 if (
                     this.modifiedDomainObjectService.domainObject &&
                     this.route.snapshot.queryParams.ref === this.modifiedDomainObjectService.ref

src/app/sections/domain/domain-obj-modification/domain-obj-modification.module.ts

@@ -10,7 +10,6 @@ import { RouterModule } from '@angular/router';
 import { ActionsModule } from '@vality/ng-core';
 
 import { ThriftEditorModule } from '@cc/app/shared/components/thrift-editor';
-import { MonacoEditorModule } from '@cc/components/monaco-editor';
 
 import { PageLayoutModule } from '../../../shared';
 
@@ -26,7 +25,6 @@ import { DomainObjModificationComponent } from './domain-obj-modification.compon
         MatCardModule,
         MatButtonModule,
         MatIconModule,
-        MonacoEditorModule,
         MatDialogModule,
         ReactiveFormsModule,
         ThriftEditorModule,

src/app/sections/domain/domain-obj-review/domain-obj-review.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Router, ActivatedRoute } from '@angular/router';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { switchMap } from 'rxjs';
 import { first, withLatestFrom } from 'rxjs/operators';
 
@@ -14,7 +14,6 @@ import { DomainNavigateService } from '../services/domain-navigate.service';
 import { DomainObjModificationService } from '../services/domain-obj-modification.service';
 import { ModifiedDomainObjectService } from '../services/modified-domain-object.service';
 
-@UntilDestroy()
 @Component({
     templateUrl: './domain-obj-review.component.html',
     styleUrls: ['../editor-container.scss'],
@@ -36,6 +35,7 @@ export class DomainObjReviewComponent {
         private notificationErrorService: NotificationErrorService,
         private domainNavigateService: DomainNavigateService,
         private domainSecretService: DomainSecretService,
+        private destroyRef: DestroyRef,
     ) {
         if (!modifiedDomainObjectService.domainObject) {
             this.back();
@@ -62,7 +62,7 @@ export class DomainObjReviewComponent {
                     }),
                 ),
                 withLatestFrom(this.type$),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({
                 next: ([, type]) => {

src/app/sections/domain/domain-obj-review/domain-obj-review.module.ts

@@ -9,8 +9,6 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { RouterModule } from '@angular/router';
 import { ActionsModule } from '@vality/ng-core';
 
-import { MonacoEditorModule } from '@cc/components/monaco-editor';
-
 import { PageLayoutModule } from '../../../shared';
 import { ThriftEditorModule } from '../../../shared/components/thrift-editor';
 import { ThriftViewerModule } from '../../../shared/components/thrift-viewer';
@@ -26,7 +24,6 @@ import { DomainObjReviewComponent } from './domain-obj-review.component';
         MatCardModule,
         MatButtonModule,
         MatCheckboxModule,
-        MonacoEditorModule,
         MatIconModule,
         ThriftEditorModule,
         MatProgressSpinnerModule,

src/app/sections/domain/utils.ts

@@ -1,9 +0,0 @@
-import * as short from 'short-uuid';
-
-import { MonacoFile } from '@cc/components/monaco-editor';
-
-export const toMonacoFile = (content: string): MonacoFile => ({
-    uri: `${short().uuid()}.json`,
-    language: 'json',
-    content,
-});

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

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { InvoicePaymentChargeback } from '@vality/domain-proto/domain';
 import { InvoicePaymentChargebackParams } from '@vality/domain-proto/payment_processing';
 import { DialogSuperclass } from '@vality/ng-core';
@@ -12,7 +12,6 @@ import { DomainMetadataFormExtensionsService } from '@cc/app/shared/services';
 import { NotificationService } from '@cc/app/shared/services/notification';
 import { NotificationErrorService } from '@cc/app/shared/services/notification-error';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-create-chargeback-dialog',
     templateUrl: './create-chargeback-dialog.component.html',
@@ -31,6 +30,7 @@ export class CreateChargebackDialogComponent extends DialogSuperclass<
         private domainMetadataFormExtensionsService: DomainMetadataFormExtensionsService,
         private notificationErrorService: NotificationErrorService,
         private notificationService: NotificationService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -42,7 +42,7 @@ export class CreateChargebackDialogComponent extends DialogSuperclass<
                 this.dialogData.paymentID,
                 this.form.value as InvoicePaymentChargebackParams,
             )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: (res) => {
                     this.notificationService.success('Chargeback created');

src/app/sections/payment-details/payment-details.component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { ThriftAstMetadata } from '@vality/domain-proto';
 import { DialogService, DialogResponseStatus } from '@vality/ng-core';
 import { Subject, merge, defer, from } from 'rxjs';
@@ -11,7 +11,6 @@ import { InvoicingService } from '@cc/app/api/payment-processing';
 import { CreateChargebackDialogComponent } from './create-chargeback-dialog/create-chargeback-dialog.component';
 import { PaymentDetailsService } from './payment-details.service';
 
-@UntilDestroy()
 @Component({
     templateUrl: 'payment-details.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -44,6 +43,7 @@ export class PaymentDetailsComponent {
         private route: ActivatedRoute,
         private invoicingService: InvoicingService,
         private dialogService: DialogService,
+        private destroyRef: DestroyRef,
     ) {}
 
     createChargeback() {
@@ -53,7 +53,7 @@ export class PaymentDetailsComponent {
                 this.route.snapshot.params as Record<'invoiceID' | 'paymentID', string>,
             )
             .afterClosed()
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(({ status }) => {
                 if (status === DialogResponseStatus.Success) {
                     this.updateChargebacks$.next();

src/app/sections/payments/components/create-payment-adjustment/create-payment-adjustment.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { InvoicePaymentAdjustmentParams } from '@vality/domain-proto/payment_processing';
 import { StatPayment } from '@vality/magista-proto/magista';
 import {
@@ -16,7 +16,6 @@ import { DomainMetadataFormExtensionsService } from '@cc/app/shared/services';
 
 import { InvoicingService } from '../../../../api/payment-processing';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-create-payment-adjustment',
     templateUrl: './create-payment-adjustment.component.html',
@@ -36,6 +35,7 @@ export class CreatePaymentAdjustmentComponent extends DialogSuperclass<
         private invoicingService: InvoicingService,
         private log: NotifyLogService,
         private domainMetadataFormExtensionsService: DomainMetadataFormExtensionsService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -56,7 +56,7 @@ export class CreatePaymentAdjustmentComponent extends DialogSuperclass<
             this.progress$,
             payments,
         )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((res) => {
                 const [result, errors] = splitResultsErrors(res);
                 if (errors.length) {

src/app/sections/payments/payments.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NonNullableFormBuilder } from '@angular/forms';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { ThriftAstMetadata } from '@vality/fistful-proto';
 import { PaymentSearchQuery, StatPayment } from '@vality/magista-proto/magista';
 import {
@@ -28,7 +28,6 @@ import { DATE_RANGE_DAYS } from '../../tokens';
 import { CreatePaymentAdjustmentComponent } from './components/create-payment-adjustment/create-payment-adjustment.component';
 import { FetchPaymentsService } from './services/fetch-payments.service';
 
-@UntilDestroy()
 @Component({
     templateUrl: 'payments.component.html',
 })
@@ -82,6 +81,7 @@ export class PaymentsComponent implements OnInit {
         private dialogService: DialogService,
         private fb: NonNullableFormBuilder,
         @Inject(DATE_RANGE_DAYS) private dateRangeDays: number,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnInit() {
@@ -92,7 +92,7 @@ export class PaymentsComponent implements OnInit {
         const otherFiltersParams: Partial<PaymentSearchQuery> = this.qp.params.otherFilters || {};
         this.otherFiltersControl.patchValue(lodashMerge({}, otherFilters, otherFiltersParams));
         merge(this.filtersForm.valueChanges, this.otherFiltersControl.valueChanges)
-            .pipe(startWith(null), debounceTime(500), untilDestroyed(this))
+            .pipe(startWith(null), debounceTime(500), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
                 this.load();
             });

src/app/sections/payouts/payouts/components/cancel-payout-dialog/cancel-payout-dialog.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogResponseStatus, DialogSuperclass } from '@vality/ng-core';
 import { PayoutID } from '@vality/payout-manager-proto/payout_manager';
 import { BehaviorSubject } from 'rxjs';
@@ -11,7 +11,6 @@ import { progressTo } from '@cc/utils/operators';
 
 import { NotificationErrorService } from '../../../../../shared/services/notification-error';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-cancel-payout-dialog',
     templateUrl: './cancel-payout-dialog.component.html',
@@ -27,6 +26,7 @@ export class CancelPayoutDialogComponent extends DialogSuperclass<
         private payoutManagementService: PayoutManagementService,
         private notificationService: NotificationService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -34,7 +34,7 @@ export class CancelPayoutDialogComponent extends DialogSuperclass<
     accept() {
         this.payoutManagementService
             .CancelPayout(this.dialogData.id, this.detailsControl.value)
-            .pipe(progressTo(this.progress$), untilDestroyed(this))
+            .pipe(progressTo(this.progress$), takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: () => {
                     this.dialogRef.close({ status: DialogResponseStatus.Success });

src/app/sections/payouts/payouts/components/create-payout-dialog/create-payout-dialog.component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogResponseStatus, DialogSuperclass } from '@vality/ng-core';
 import { PayoutParams } from '@vality/payout-manager-proto/payout_manager';
 import isNil from 'lodash-es/isNil';
@@ -22,7 +22,6 @@ interface CreatePayoutDialogForm {
     payoutToolId?: string;
 }
 
-@UntilDestroy()
 @Component({
     selector: 'cc-create-payout-dialog',
     templateUrl: './create-payout-dialog.component.html',
@@ -43,6 +42,7 @@ export class CreatePayoutDialogComponent extends DialogSuperclass<CreatePayoutDi
         private payoutManagementService: PayoutManagementService,
         private notificationService: NotificationService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -66,7 +66,7 @@ export class CreatePayoutDialogComponent extends DialogSuperclass<CreatePayoutDi
                     isNil,
                 ) as PayoutParams,
             )
-            .pipe(untilDestroyed(this), progressTo(this.progress$))
+            .pipe(takeUntilDestroyed(this.destroyRef), progressTo(this.progress$))
             .subscribe({
                 next: () => {
                     this.notificationService.success('Payout created successfully');

src/app/sections/payouts/payouts/payouts.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Party, Shop, ShopID, PartyID } from '@vality/domain-proto/domain';
 import { magista } from '@vality/magista-proto';
 import { StatPayout } from '@vality/magista-proto/magista';
@@ -40,7 +40,6 @@ interface PayoutsSearchForm {
     payoutToolType: magista.PayoutToolType;
 }
 
-@UntilDestroy()
 @Component({
     selector: 'cc-payouts',
     templateUrl: './payouts.component.html',
@@ -112,6 +111,7 @@ export class PayoutsComponent implements OnInit {
         @Inject(DATE_RANGE_DAYS) private dateRangeDays: number,
         private payoutActionsService: PayoutActionsService,
         private fb: FormBuilder,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnInit() {
@@ -119,10 +119,10 @@ export class PayoutsComponent implements OnInit {
         getValueChanges(this.filtersForm)
             .pipe(
                 filter(() => this.filtersForm.valid),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((value) => void this.qp.set(clean(value)));
-        this.qp.params$.pipe(untilDestroyed(this)).subscribe(() => this.search());
+        this.qp.params$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.search());
     }
 
     more() {

src/app/sections/payouts/services/payout-actions.service.ts

@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
+import { Injectable, DestroyRef } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PayoutID, PayoutStatus } from '@vality/magista-proto/magista';
 import { DialogResponseStatus, DialogService, ConfirmDialogComponent } from '@vality/ng-core';
 import { switchMap } from 'rxjs';
@@ -10,13 +10,13 @@ import { NotificationErrorService } from '@cc/app/shared/services/notification-e
 
 import { CancelPayoutDialogComponent } from '../payouts/components/cancel-payout-dialog/cancel-payout-dialog.component';
 
-@UntilDestroy()
 @Injectable()
 export class PayoutActionsService {
     constructor(
         private payoutManagementService: PayoutManagementService,
         private dialogService: DialogService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {}
 
     canBeConfirmed(status: keyof PayoutStatus) {
@@ -38,7 +38,7 @@ export class PayoutActionsService {
             .pipe(
                 filter(({ status }) => status === DialogResponseStatus.Success),
                 switchMap(() => this.payoutManagementService.ConfirmPayout(id)),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({
                 error: this.notificationErrorService.error,

src/app/sections/repairing/components/repair-by-scenario-dialog/repair-by-scenario-dialog.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Validators, FormControl } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogResponseStatus, DialogSuperclass } from '@vality/ng-core';
 import {
     RepairInvoicesRequest,
@@ -27,7 +27,6 @@ enum Namespace {
     Withdrawal,
 }
 
-@UntilDestroy()
 @Component({
     templateUrl: './repair-by-scenario-dialog.component.html',
 })
@@ -61,13 +60,14 @@ export class RepairByScenarioDialogComponent
         private notificationErrorService: NotificationErrorService,
         private notificationService: NotificationService,
         private domainMetadataFormExtensionsService: DomainMetadataFormExtensionsService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
 
     ngOnInit() {
         getFormValueChanges(this.nsControl)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
                 this.form.setValue(
                     this.dialogData.machines.map(({ id }) => ({ id, scenario: {} })),
@@ -84,7 +84,7 @@ export class RepairByScenarioDialogComponent
             ? this.repairManagementService.RepairInvoices(value as RepairInvoicesRequest)
             : this.repairManagementService.RepairWithdrawals(value as RepairWithdrawalsRequest)
         )
-            .pipe(progressTo(this.progress$), untilDestroyed(this))
+            .pipe(progressTo(this.progress$), takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: () => {
                     this.notificationService.success();

src/app/sections/repairing/repairing.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import {
     DialogResponseStatus,
     DialogService,
@@ -37,7 +37,6 @@ interface Filters {
     error_message: string;
 }
 
-@UntilDestroy()
 @Component({
     selector: 'cc-repairing',
     templateUrl: './repairing.component.html',
@@ -96,6 +95,7 @@ export class RepairingComponent implements OnInit {
         private notificationService: NotificationService,
         private log: NotifyLogService,
         private domainStoreService: DomainStoreService,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnInit() {
@@ -103,7 +103,7 @@ export class RepairingComponent implements OnInit {
         this.filters.valueChanges
             .pipe(
                 map(() => clean(this.filters.value)),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((v: Filters) => this.qp.set(v));
         this.qp.params$
@@ -124,7 +124,7 @@ export class RepairingComponent implements OnInit {
                                 : null,
                     }),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((params) => this.machinesService.search(params));
     }
@@ -151,7 +151,7 @@ export class RepairingComponent implements OnInit {
                         this.selected$.value.map(({ id, ns }) => ({ id, ns })),
                     ),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({
                 next: () => {
@@ -165,7 +165,7 @@ export class RepairingComponent implements OnInit {
         this.dialogService
             .open(RepairByScenarioDialogComponent, { machines: this.selected$.value })
             .afterClosed()
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
 }

src/app/sections/routing-rules/change-delegate-ruleset-dialog/change-delegate-ruleset-dialog.component.ts

@@ -1,12 +1,11 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogSuperclass } from '@vality/ng-core';
 import { map } from 'rxjs/operators';
 
 import { RoutingRulesService } from '../services/routing-rules';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-change-delegate-ruleset-dialog',
     templateUrl: 'change-delegate-ruleset-dialog.component.html',
@@ -29,6 +28,7 @@ export class ChangeDelegateRulesetDialogComponent
     constructor(
         private fb: UntypedFormBuilder,
         private routingRulesService: RoutingRulesService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -38,7 +38,7 @@ export class ChangeDelegateRulesetDialogComponent
             .getRuleset(this.dialogData.mainRulesetRefID)
             .pipe(
                 map((r) => r?.data?.decisions?.delegates?.[this.dialogData?.delegateIdx]),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((delegate) => {
                 this.form.patchValue({
@@ -56,7 +56,7 @@ export class ChangeDelegateRulesetDialogComponent
                 newDelegateRulesetRefID: this.form.value.rulesetRefId,
                 description: this.form.value.description,
             })
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.dialogRef.close());
     }
 }

src/app/sections/routing-rules/change-target-dialog/change-target-dialog.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DialogSuperclass } from '@vality/ng-core';
 import { BehaviorSubject } from 'rxjs';
 
@@ -9,7 +9,6 @@ import { RoutingRulesService } from '../services/routing-rules';
 import { TargetRuleset } from '../target-ruleset-form';
 import { RoutingRulesType } from '../types/routing-rules-type';
 
-@UntilDestroy()
 @Component({
     templateUrl: 'change-target-dialog.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,11 +24,12 @@ export class ChangeTargetDialogComponent extends DialogSuperclass<
     constructor(
         private routingRulesService: RoutingRulesService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {
         super();
         this.routingRulesService
             .getRuleset(this.dialogData?.mainRulesetRefID)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((ruleset) => {
                 this.initValue = {
                     mainRulesetRefID: ruleset.ref.id,
@@ -50,7 +50,7 @@ export class ChangeTargetDialogComponent extends DialogSuperclass<
                 mainDelegateDescription,
                 delegateIdx,
             })
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.dialogRef.close(), this.notificationErrorService.error);
     }
 }

src/app/sections/routing-rules/party-delegate-rulesets/attach-new-ruleset-dialog/attach-new-ruleset-dialog.component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogSuperclass } from '@vality/ng-core';
 import { BehaviorSubject } from 'rxjs';
 
@@ -10,7 +10,6 @@ import { NotificationErrorService } from '@cc/app/shared/services/notification-e
 import { RoutingRulesService } from '../../services/routing-rules';
 import { TargetRuleset } from '../../target-ruleset-form';
 
-@UntilDestroy()
 @Component({
     templateUrl: 'attach-new-ruleset-dialog.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -33,6 +32,7 @@ export class AttachNewRulesetDialogComponent extends DialogSuperclass<
         private fb: UntypedFormBuilder,
         private routingRulesService: RoutingRulesService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -46,7 +46,7 @@ export class AttachNewRulesetDialogComponent extends DialogSuperclass<
                 mainDelegateDescription,
                 ruleset: this.form.value.ruleset,
             })
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: () => this.dialogRef.close(),
                 error: (err) => this.notificationErrorService.error(err),

src/app/sections/routing-rules/party-delegate-rulesets/party-delegate-rulesets.component.ts

@@ -1,6 +1,6 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogService } from '@vality/ng-core';
 import { first, map } from 'rxjs/operators';
 
@@ -14,7 +14,6 @@ import { RoutingRulesService } from '../services/routing-rules';
 import { AttachNewRulesetDialogComponent } from './attach-new-ruleset-dialog';
 import { PartyDelegateRulesetsService } from './party-delegate-rulesets.service';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-party-delegate-rulesets',
     templateUrl: 'party-delegate-rulesets.component.html',
@@ -63,6 +62,7 @@ export class PartyDelegateRulesetsComponent {
         private domainStoreService: DomainStoreService,
         private notificationErrorService: NotificationErrorService,
         private route: ActivatedRoute,
+        private destroyRef: DestroyRef,
     ) {}
 
     attachNewRuleset() {
@@ -72,14 +72,17 @@ export class PartyDelegateRulesetsComponent {
                 type: this.route.snapshot.params.type,
             })
             .afterClosed()
-            .pipe(handleError(this.notificationErrorService.error), untilDestroyed(this))
+            .pipe(
+                handleError(this.notificationErrorService.error),
+                takeUntilDestroyed(this.destroyRef),
+            )
             .subscribe();
     }
 
     navigateToPartyRuleset(parentRefId: number, delegateIdx: number) {
         this.routingRulesService
             .getRuleset(parentRefId)
-            .pipe(first(), untilDestroyed(this))
+            .pipe(first(), takeUntilDestroyed(this.destroyRef))
             .subscribe((parent) => {
                 void this.router.navigate([
                     'party',

src/app/sections/routing-rules/party-routing-ruleset/add-party-routing-rule-dialog/add-party-routing-rule-dialog.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Shop } from '@vality/domain-proto/domain';
 import { StatWallet } from '@vality/fistful-proto/fistful_stat';
 import { DialogResponseStatus, DialogSuperclass } from '@vality/ng-core';
@@ -10,7 +10,6 @@ import { NotificationErrorService } from '@cc/app/shared/services/notification-e
 import { RoutingRulesService } from '../../services/routing-rules';
 import { RoutingRulesType } from '../../types/routing-rules-type';
 
-@UntilDestroy()
 @Component({
     templateUrl: 'add-party-routing-rule-dialog.component.html',
 })
@@ -29,6 +28,7 @@ export class AddPartyRoutingRuleDialogComponent extends DialogSuperclass<
         private fb: FormBuilder,
         private routingRulesService: RoutingRulesService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -51,7 +51,7 @@ export class AddPartyRoutingRuleDialogComponent extends DialogSuperclass<
                   walletID,
               })
         )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: () => this.dialogRef.close({ status: DialogResponseStatus.Success }),
                 error: this.notificationErrorService.error,

src/app/sections/routing-rules/party-routing-ruleset/initialize-routing-rules-dialog/initialize-routing-rules-dialog.component.ts

@@ -1,12 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogSuperclass } from '@vality/ng-core';
 
 import { NotificationErrorService } from '../../../../shared/services/notification-error';
 import { RoutingRulesService } from '../../services/routing-rules';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-initialize-routing-rules-dialog',
     templateUrl: 'initialize-routing-rules-dialog.component.html',
@@ -25,6 +24,7 @@ export class InitializeRoutingRulesDialogComponent extends DialogSuperclass<
         private fb: UntypedFormBuilder,
         private routingRulesService: RoutingRulesService,
         private notificationErrorService: NotificationErrorService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -39,7 +39,7 @@ export class InitializeRoutingRulesDialogComponent extends DialogSuperclass<
                 description,
                 delegateDescription,
             })
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.dialogRef.close(), this.notificationErrorService.error);
     }
 }

src/app/sections/routing-rules/party-routing-ruleset/party-routing-ruleset.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogService, DialogResponseStatus } from '@vality/ng-core';
 import { combineLatest, Observable } from 'rxjs';
 import { filter, map, pluck, shareReplay, startWith, switchMap, take } from 'rxjs/operators';
@@ -13,7 +13,6 @@ import { AddPartyRoutingRuleDialogComponent } from './add-party-routing-rule-dia
 import { InitializeRoutingRulesDialogComponent } from './initialize-routing-rules-dialog';
 import { PartyRoutingRulesetService } from './party-routing-ruleset.service';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-party-routing-ruleset',
     templateUrl: 'party-routing-ruleset.component.html',
@@ -61,7 +60,7 @@ export class PartyRoutingRulesetComponent {
                     };
                 }),
         ),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     );
     walletsData$ = combineLatest([
@@ -88,7 +87,7 @@ export class PartyRoutingRulesetComponent {
                     };
                 }),
         ),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     );
 
@@ -98,6 +97,7 @@ export class PartyRoutingRulesetComponent {
         private router: Router,
         private route: ActivatedRoute,
         private domainStoreService: DomainStoreService,
+        private destroyRef: DestroyRef,
     ) {}
 
     initialize() {
@@ -112,7 +112,7 @@ export class PartyRoutingRulesetComponent {
                         .open(InitializeRoutingRulesDialogComponent, { partyID, refID })
                         .afterClosed(),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({
                 next: () => {
@@ -142,7 +142,7 @@ export class PartyRoutingRulesetComponent {
                         })
                         .afterClosed(),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({
                 next: (res) => {
@@ -155,7 +155,7 @@ export class PartyRoutingRulesetComponent {
 
     navigateToDelegate(parentRefId: number, delegateIdx: number) {
         this.partyRoutingRulesetService.partyRuleset$
-            .pipe(take(1), untilDestroyed(this))
+            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
             .subscribe((ruleset) =>
                 this.router.navigate([
                     'party',

src/app/sections/routing-rules/party-routing-ruleset/party-routing-ruleset.service.ts

@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
+import { Injectable, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { combineLatest, defer, Observable } from 'rxjs';
 import { map, pluck, shareReplay, switchMap } from 'rxjs/operators';
 
@@ -9,18 +9,17 @@ import { PartyManagementService } from '@cc/app/api/payment-processing';
 
 import { RoutingRulesService } from '../services/routing-rules';
 
-@UntilDestroy()
 @Injectable()
 export class PartyRoutingRulesetService {
     partyID$ = this.route.params.pipe(
         pluck('partyID'),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     ) as Observable<string>;
     refID$ = this.route.params.pipe(
         pluck('partyRefID'),
         map((r) => +r),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     );
 
@@ -35,19 +34,19 @@ export class PartyRoutingRulesetService {
             }),
         ),
         pluck('data', 'wallets'),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     );
 
     partyRuleset$ = combineLatest([this.routingRulesService.rulesets$, this.refID$]).pipe(
         map(([rules, refID]) => rules.find((r) => r?.ref?.id === refID)),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     );
 
     private party$ = this.partyID$.pipe(
         switchMap((partyID) => this.partyManagementService.Get(partyID)),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     );
 
@@ -56,6 +55,7 @@ export class PartyRoutingRulesetService {
         private partyManagementService: PartyManagementService,
         private routingRulesService: RoutingRulesService,
         private fistfulStatistics: FistfulStatisticsService,
+        private destroyRef: DestroyRef,
     ) {}
 
     reload() {

src/app/sections/routing-rules/routing-rules-list/routing-rules-list.component.ts

@@ -6,9 +6,10 @@ import {
     Output,
     OnChanges,
     booleanAttribute,
+    DestroyRef,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import {
     DialogResponseStatus,
     DialogService,
@@ -30,7 +31,6 @@ type DelegateId = {
     delegateIdx: number;
 };
 
-@UntilDestroy()
 @Component({
     selector: 'cc-routing-rules-list',
     templateUrl: 'routing-rules-list.component.html',
@@ -55,6 +55,7 @@ export class RoutingRulesListComponent<
         private log: NotifyLogService,
         private routingRulesService: RoutingRulesService,
         private route: ActivatedRoute,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnChanges(changes: ComponentChanges<RoutingRulesListComponent<T>>) {
@@ -119,7 +120,7 @@ export class RoutingRulesListComponent<
                 delegateIdx: delegateId.delegateIdx,
             })
             .afterClosed()
-            .pipe(handleError(this.log.error), untilDestroyed(this))
+            .pipe(handleError(this.log.error), takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
 
@@ -131,7 +132,7 @@ export class RoutingRulesListComponent<
                 type: this.route.snapshot.params.type,
             })
             .afterClosed()
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({ error: this.log.error });
     }
 
@@ -147,7 +148,7 @@ export class RoutingRulesListComponent<
                         delegateIdx: delegateId.delegateIdx,
                     }),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({ error: this.log.error });
     }
@@ -164,7 +165,7 @@ export class RoutingRulesListComponent<
                         delegateIdx: delegateId.delegateIdx,
                     }),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({ error: this.log.error });
     }

src/app/sections/routing-rules/routing-ruleset/routing-ruleset.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { RoutingCandidate, Predicate } from '@vality/domain-proto/domain';
 import {
     DialogResponseStatus,
@@ -30,7 +30,6 @@ import { RoutingRulesService } from '../services/routing-rules';
 import { ChangeCandidatesPrioritiesDialogComponent } from './components/change-candidates-priorities-dialog/change-candidates-priorities-dialog.component';
 import { RoutingRulesetService } from './routing-ruleset.service';
 
-@UntilDestroy()
 @Component({
     templateUrl: 'routing-ruleset.component.html',
     providers: [RoutingRulesetService],
@@ -54,7 +53,7 @@ export class RoutingRulesetComponent {
             formatter: (d) => this.getCandidateIdx(d).pipe(map((idx) => `#${idx + 1}`)),
             click: (d) => {
                 combineLatest([this.getCandidateIdx(d), this.routingRulesetService.shopRuleset$])
-                    .pipe(untilDestroyed(this))
+                    .pipe(takeUntilDestroyed(this.destroyRef))
                     .subscribe(([idx, ruleset]) => {
                         this.sidenavInfoService.toggle(CandidateCardComponent, {
                             idx,
@@ -110,7 +109,7 @@ export class RoutingRulesetComponent {
                 label: 'Edit',
                 click: (d) => {
                     this.getCandidateIdx(d)
-                        .pipe(untilDestroyed(this))
+                        .pipe(takeUntilDestroyed(this.destroyRef))
                         .subscribe((idx) => {
                             this.editShopRule(idx);
                         });
@@ -120,7 +119,7 @@ export class RoutingRulesetComponent {
                 label: 'Duplicate',
                 click: (d) => {
                     this.getCandidateIdx(d)
-                        .pipe(untilDestroyed(this))
+                        .pipe(takeUntilDestroyed(this.destroyRef))
                         .subscribe((idx) => {
                             void this.duplicateShopRule(idx);
                         });
@@ -130,7 +129,7 @@ export class RoutingRulesetComponent {
                 label: 'Remove',
                 click: (d) => {
                     this.getCandidateIdx(d)
-                        .pipe(untilDestroyed(this))
+                        .pipe(takeUntilDestroyed(this.destroyRef))
                         .subscribe((idx) => {
                             void this.removeShopRule(idx);
                         });
@@ -147,6 +146,7 @@ export class RoutingRulesetComponent {
         private log: NotifyLogService,
         private route: ActivatedRoute,
         private sidenavInfoService: SidenavInfoService,
+        private destroyRef: DestroyRef,
     ) {}
 
     addShopRule() {
@@ -163,7 +163,7 @@ export class RoutingRulesetComponent {
                         .afterClosed(),
                 ),
             )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: (res) => {
                     if (res.status === DialogResponseStatus.Success) {
@@ -195,7 +195,7 @@ export class RoutingRulesetComponent {
                         .afterClosed(),
                 ),
             )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: (res) => {
                     if (res.status === DialogResponseStatus.Success) {
@@ -227,7 +227,7 @@ export class RoutingRulesetComponent {
                         .afterClosed(),
                 ),
             )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: (res) => {
                     if (res.status === DialogResponseStatus.Success) {

src/app/sections/routing-rules/routing-ruleset/routing-ruleset.service.ts

@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
+import { Injectable, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute } from '@angular/router';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import {
     DialogService,
     ConfirmDialogComponent,
@@ -14,7 +14,6 @@ import { PartyManagementService } from '@cc/app/api/payment-processing';
 
 import { RoutingRulesService as RoutingRulesDamselService } from '../services/routing-rules';
 
-@UntilDestroy()
 @Injectable()
 export class RoutingRulesetService {
     partyID$: Observable<string> = this.route.params.pipe(
@@ -57,6 +56,7 @@ export class RoutingRulesetService {
         private partyManagementService: PartyManagementService,
         private log: NotifyLogService,
         private dialog: DialogService,
+        private destroyRef: DestroyRef,
     ) {}
 
     removeShopRule(candidateIdx: number) {
@@ -73,7 +73,7 @@ export class RoutingRulesetService {
                         candidateIdx,
                     }),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe({
                 next: () => {

src/app/sections/routing-rules/target-ruleset-form/target-ruleset-form.component.ts

@@ -5,9 +5,10 @@ import {
     Input,
     OnChanges,
     Output,
+    DestroyRef,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { UntypedFormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { PaymentInstitutionObject } from '@vality/domain-proto/domain';
 import { ComponentChanges } from '@vality/ng-core';
 import sortBy from 'lodash-es/sortBy';
@@ -22,7 +23,6 @@ import { getPoliciesIdByType } from '../utils/get-policies-id-by-type';
 import { Target } from './types/target';
 import { TargetRuleset } from './types/target-ruleset';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-target-ruleset-form',
     templateUrl: 'target-ruleset-form.component.html',
@@ -59,9 +59,10 @@ export class TargetRulesetFormComponent implements OnChanges {
         private fb: UntypedFormBuilder,
         private domainStoreService: DomainStoreService,
         private routingRulesService: RoutingRulesService,
+        private destroyRef: DestroyRef,
     ) {
         this.form.controls.target.valueChanges
-            .pipe(startWith(this.form.value.target), untilDestroyed(this))
+            .pipe(startWith(this.form.value.target), takeUntilDestroyed(this.destroyRef))
             .subscribe((target) => {
                 switch (target) {
                     case Target.Manual:
@@ -98,14 +99,14 @@ export class TargetRulesetFormComponent implements OnChanges {
                         mainDelegateDescription,
                     }),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((value) => this.valueChanges.emit(value));
         this.form.statusChanges
             .pipe(
                 startWith(this.form.valid),
                 map(() => this.form.valid),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((valid) => this.valid.emit(valid));
     }

src/app/sections/shops/shops.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import { SearchShopHit } from '@vality/deanonimus-proto/deanonimus';
 import { Column, progressTo, NotifyLogService } from '@vality/ng-core';
 import { BehaviorSubject, defer, of, combineLatest, Subject, Observable } from 'rxjs';
@@ -8,7 +7,6 @@ import { switchMap, shareReplay, catchError, map } from 'rxjs/operators';
 import { DeanonimusService } from '../../api/deanonimus';
 import { ShopParty } from '../../shared/components/shops-table';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-shops',
     templateUrl: './shops.component.html',

src/app/sections/terminals/terminals.component.ts

@@ -1,7 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Sort } from '@angular/material/sort';
 import { Router } from '@angular/router';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { TerminalObject } from '@vality/domain-proto/domain';
 import { Column } from '@vality/ng-core';
 import { of } from 'rxjs';
@@ -14,7 +14,6 @@ import { DomainObjectCardComponent } from '../../shared/components/thrift-api-cr
 
 import { getTerminalShopWalletDelegates } from './utils/get-terminal-shop-wallet-delegates';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-terminals',
     templateUrl: './terminals.component.html',
@@ -40,7 +39,7 @@ export class TerminalsComponent {
             sortable: true,
             click: (d) => {
                 this.getProvider(d)
-                    .pipe(take(1), untilDestroyed(this))
+                    .pipe(take(1), takeUntilDestroyed(this.destroyRef))
                     .subscribe((provider) => {
                         if (!provider) {
                             return;
@@ -68,6 +67,7 @@ export class TerminalsComponent {
         private domainStoreService: DomainStoreService,
         private router: Router,
         private sidenavInfoService: SidenavInfoService,
+        private destroyRef: DestroyRef,
     ) {}
 
     update() {

src/app/sections/wallets/wallets.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { Component, OnInit, Inject, ViewChild, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, FormControl } from '@angular/forms';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { SearchWalletHit } from '@vality/deanonimus-proto/internal/deanonimus';
 import { AccountBalance } from '@vality/fistful-proto/internal/account';
 import { StatWallet } from '@vality/fistful-proto/internal/fistful_stat';
@@ -28,7 +28,6 @@ import { DEBOUNCE_TIME_MS } from '../../tokens';
 import { FetchWalletsTextService } from './fetch-wallets-text.service';
 import { FetchWalletsService } from './fetch-wallets.service';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-wallets',
     templateUrl: './wallets.component.html',
@@ -114,6 +113,7 @@ export class WalletsComponent implements OnInit {
         private walletManagementService: ManagementService,
         private log: NotifyLogService,
         @Inject(DEBOUNCE_TIME_MS) private debounceTimeMs: number,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnInit() {
@@ -123,12 +123,12 @@ export class WalletsComponent implements OnInit {
             this.isFilterControl.setValue(Number(isFilter));
         }
         getValueChanges(this.isFilterControl)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => {
                 void this.typeQp.set({ isFilter: !!value });
             });
         getValueChanges(this.filtersForm)
-            .pipe(debounceTime(this.debounceTimeMs), untilDestroyed(this))
+            .pipe(debounceTime(this.debounceTimeMs), takeUntilDestroyed(this.destroyRef))
             .subscribe((value) => {
                 void this.qp.set(clean(value));
                 this.filterSearch();

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

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Validators, FormControl } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { ChangeRequest } from '@vality/fistful-proto/deposit_adjustment';
 import { StatWithdrawal } from '@vality/fistful-proto/fistful_stat';
 import { ExternalID } from '@vality/fistful-proto/withdrawal_adjustment';
@@ -11,7 +11,6 @@ import * as short from 'short-uuid';
 import { ManagementService } from '@cc/app/api/withdrawal';
 import { MetadataFormExtension } from '@cc/app/shared/components/metadata-form';
 
-@UntilDestroy()
 @Component({
     templateUrl: './create-adjustment-dialog.component.html',
 })
@@ -41,6 +40,7 @@ export class CreateAdjustmentDialogComponent extends DialogSuperclass<
     constructor(
         private managementService: ManagementService,
         private log: NotifyLogService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -56,7 +56,7 @@ export class CreateAdjustmentDialogComponent extends DialogSuperclass<
             ),
             this.progress$,
         )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((res) => {
                 const withError = res.filter((e) => e.hasError);
                 if (withError.length) {

src/app/sections/withdrawals/withdrawals.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { PartyID } from '@vality/domain-proto/domain';
 import { StatWithdrawal } from '@vality/fistful-proto/fistful_stat';
 import {
@@ -36,7 +36,6 @@ interface WithdrawalsForm {
     walletId: WithdrawalParams['wallet_id'];
 }
 
-@UntilDestroy()
 @Component({
     selector: 'cc-withdrawals',
     templateUrl: './withdrawals.component.html',
@@ -104,13 +103,14 @@ export class WithdrawalsComponent implements OnInit {
         private qp: QueryParamsService<Partial<WithdrawalsForm>>,
         private amountCurrencyService: AmountCurrencyService,
         private dialogService: DialogService,
+        private destroyRef: DestroyRef,
     ) {}
 
     ngOnInit() {
         this.filtersForm.valueChanges
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((v) => void this.qp.set(clean(v)));
-        this.qp.params$.pipe(untilDestroyed(this)).subscribe(() => this.update());
+        this.qp.params$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.update());
     }
 
     update(options?: UpdateOptions) {

src/app/shared/components/change-chargebacks-status-dialog/change-chargebacks-status-dialog.component.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, FormControl, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { StatChargeback } from '@vality/magista-proto/internal/magista';
 import {
     DialogSuperclass,
@@ -35,7 +35,6 @@ const CHANGE_STATUS_METHODS = {
     [Action.Cancel]: 'CancelChargeback',
 } as const;
 
-@UntilDestroy()
 @Component({
     standalone: true,
     templateUrl: './change-chargebacks-status-dialog.component.html',
@@ -75,12 +74,13 @@ export class ChangeChargebacksStatusDialogComponent
         private invoicingService: InvoicingService,
         private log: NotifyLogService,
         private domainMetadataFormExtensionsService: DomainMetadataFormExtensionsService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
 
     ngOnInit() {
-        this.actionControl.valueChanges.pipe(untilDestroyed(this)).subscribe(() => {
+        this.actionControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.control.reset();
         });
     }
@@ -97,7 +97,7 @@ export class ChangeChargebacksStatusDialogComponent
             ),
             this.progress$,
         )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: (res) => {
                     const withErrors = res.filter((r) => r.hasError);

src/app/shared/components/chargebacks/chargebacks.component.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import { InvoicePaymentChargeback } from '@vality/domain-proto/payment_processing';
 import { DialogService, Column, TableModule, createOperationColumn } from '@vality/ng-core';
 import startCase from 'lodash-es/startCase';
@@ -11,7 +10,6 @@ import { DetailsDialogComponent } from '@cc/app/shared/components/details-dialog
 import { getUnionKey } from '../../../../utils';
 import { ChangeChargebacksStatusDialogComponent } from '../change-chargebacks-status-dialog';
 
-@UntilDestroy()
 @Component({
     standalone: true,
     selector: 'cc-chargebacks',

src/app/shared/components/fail-machines-dialog/fail-machines-dialog.component.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, FormControl } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { ID } from '@vality/machinegun-proto/internal/base';
 import {
     DialogSuperclass,
@@ -31,7 +31,6 @@ const TYPE_NS_MAP: Record<Type, Namespace[]> = {
     [Type.Withdrawal]: [Namespace.Withdrawal, Namespace.WithdrawalSession],
 };
 
-@UntilDestroy()
 @Component({
     standalone: true,
     templateUrl: './fail-machines-dialog.component.html',
@@ -58,6 +57,7 @@ export class FailMachinesDialogComponent extends DialogSuperclass<
     constructor(
         private automatonService: AutomatonService,
         private log: NotifyLogService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -88,7 +88,7 @@ export class FailMachinesDialogComponent extends DialogSuperclass<
             this.progress$,
             ids,
         )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((res) => {
                 const [result, errors] = splitResultsErrors(res);
                 if (errors.length) {

src/app/shared/components/merchant-field/merchant-field.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, AfterViewInit, booleanAttribute } from '@angular/core';
+import { Component, Input, AfterViewInit, booleanAttribute, DestroyRef } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PartyID } from '@vality/domain-proto/domain';
 import {
     Option,
@@ -12,7 +12,6 @@ import { catchError, debounceTime, map, switchMap, tap, startWith } from 'rxjs/o
 
 import { DeanonimusService } from '@cc/app/api/deanonimus';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-merchant-field',
     templateUrl: 'merchant-field.component.html',
@@ -32,6 +31,7 @@ export class MerchantFieldComponent
     constructor(
         private deanonimusService: DeanonimusService,
         private log: NotifyLogService,
+        private destroyRef: DestroyRef,
     ) {
         super();
     }
@@ -46,7 +46,7 @@ export class MerchantFieldComponent
                 }),
                 debounceTime(600),
                 switchMap((term) => this.searchOptions(term)),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((options) => {
                 this.options$.next(options);

src/app/shared/components/metadata-form/components/complex-form/complex-form.component.ts

@@ -1,4 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
     ValidationErrors,
     Validator,
@@ -6,7 +7,6 @@ import {
     FormControl,
     AbstractControl,
 } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { FormComponentSuperclass } from '@s-libs/ng-core';
 import { MapType, SetType, ListType } from '@vality/thrift-ts';
 import { merge } from 'rxjs';
@@ -26,7 +26,6 @@ function updateFormArray<V>(formArray: FormArray<AbstractControl<V>>, values: V[
 
 type ComplexType<T, K = never> = T[] | Map<K, T> | Set<T>;
 
-@UntilDestroy()
 @Component({
     selector: 'cc-complex-form',
     templateUrl: './complex-form.component.html',
@@ -57,9 +56,13 @@ export class ComplexFormComponent<V, K = never>
         }
     }
 
+    constructor(private destroyRef: DestroyRef) {
+        super();
+    }
+
     ngOnInit() {
         merge(this.valueControls.valueChanges, this.keyControls.valueChanges)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
                 const values = this.valueControls.value;
                 switch (this.data.type.name) {

src/app/shared/components/metadata-form/components/extension-field/extension-field.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Validator, ValidationErrors, FormControl, Validators } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { FormComponentSuperclass } from '@s-libs/ng-core';
 import { ComponentChanges, createControlProviders } from '@vality/ng-core';
 import { ThriftType } from '@vality/thrift-ts';
@@ -17,7 +17,6 @@ import {
     getFirstDeterminedExtensionsResult,
 } from '../../types/metadata-form-extension';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-extension-field',
     templateUrl: './extension-field.component.html',
@@ -62,11 +61,15 @@ export class ExtensionFieldComponent<T>
         shareReplay({ refCount: true, bufferSize: 1 }),
     );
 
+    constructor(private destroyRef: DestroyRef) {
+        super();
+    }
+
     ngOnInit() {
         this.control.valueChanges
             .pipe(
                 switchMap(() => this.converter$),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((converter) => {
                 this.emitOutgoingValue(converter.internalToOutput(this.control.value) as never);
@@ -74,7 +77,9 @@ export class ExtensionFieldComponent<T>
     }
 
     handleIncomingValue(value: T) {
-        this.converter$.pipe(first(), untilDestroyed(this)).subscribe((converter) => {
+        this.converter$
+            .pipe(first(), takeUntilDestroyed(this.destroyRef))
+            .subscribe((converter) => {
                 this.control.setValue(converter.outputToInternal(value) as never);
             });
     }
@@ -97,7 +102,7 @@ export class ExtensionFieldComponent<T>
         this.generate$
             .pipe(
                 switchMap((generate) => generate()),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((value) => this.control.setValue(value as T));
         event.stopPropagation();

src/app/shared/components/metadata-form/components/primitive-field/primitive-field.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, DestroyRef } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
     ComponentChanges,
     Option,
@@ -19,7 +19,6 @@ import {
 import { MetadataFormData, getAliases } from '../../types/metadata-form-data';
 import { getFirstDeterminedExtensionsResult } from '../../types/metadata-form-extension';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-primitive-field',
     templateUrl: './primitive-field.component.html',
@@ -85,6 +84,10 @@ export class PrimitiveFieldComponent<T> extends FormControlSuperclass<T> impleme
     private data$ = new ReplaySubject<MetadataFormData<ThriftType>>(1);
     private extensions$ = new ReplaySubject<MetadataFormExtension[]>(1);
 
+    constructor(private destroyRef: DestroyRef) {
+        super();
+    }
+
     ngOnChanges(changes: ComponentChanges<PrimitiveFieldComponent<T>>) {
         super.ngOnChanges(changes);
         if (changes.data) {
@@ -99,7 +102,7 @@ export class PrimitiveFieldComponent<T> extends FormControlSuperclass<T> impleme
         this.generate$
             .pipe(
                 switchMap((generate) => generate()),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((value) => this.control.setValue(value as T));
         event.stopPropagation();

src/app/shared/components/metadata-form/components/struct-form/struct-form.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ValidationErrors, Validators, FormBuilder, FormGroup } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import isNil from 'lodash-es/isNil';
 import omitBy from 'lodash-es/omitBy';
 import { merge } from 'rxjs';
@@ -11,7 +11,6 @@ import { createControlProviders, ValidatedControlSuperclass } from '@cc/utils';
 import { MetadataFormData } from '../../types/metadata-form-data';
 import { MetadataFormExtension } from '../../types/metadata-form-extension';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-struct-form',
     templateUrl: './struct-form.component.html',
@@ -35,13 +34,16 @@ export class StructFormComponent<T extends { [N in string]: unknown }>
         );
     }
 
-    constructor(private fb: FormBuilder) {
+    constructor(
+        private fb: FormBuilder,
+        private destroyRef: DestroyRef,
+    ) {
         super();
     }
 
     ngOnInit() {
         merge(this.control.valueChanges, this.labelControl.valueChanges)
-            .pipe(delay(0), untilDestroyed(this))
+            .pipe(delay(0), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
                 this.emitOutgoingValue(
                     this.control.value && this.labelControl.value

src/app/shared/components/metadata-form/components/union-field/union-field.component.ts

@@ -1,6 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ValidationErrors, Validator, FormControl } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { FormComponentSuperclass } from '@s-libs/ng-core';
 import { Field } from '@vality/thrift-ts';
 import { merge } from 'rxjs';
@@ -12,7 +12,6 @@ import { MetadataFormData } from '../../types/metadata-form-data';
 import { MetadataFormExtension } from '../../types/metadata-form-extension';
 import { getDefaultValue } from '../../utils/get-default-value';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-union-field',
     templateUrl: './union-field.component.html',
@@ -28,6 +27,10 @@ export class UnionFieldComponent<T extends { [N in string]: unknown }>
     fieldControl = new FormControl() as FormControl<Field>;
     internalControl = new FormControl() as FormControl<T[keyof T]>;
 
+    constructor(private destroyRef: DestroyRef) {
+        super();
+    }
+
     ngOnInit() {
         merge(this.fieldControl.valueChanges, this.internalControl.valueChanges)
             .pipe(
@@ -37,12 +40,12 @@ export class UnionFieldComponent<T extends { [N in string]: unknown }>
                 }),
                 distinctUntilChanged(),
                 delay(0),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((value) => {
                 this.emitOutgoingValue(value);
             });
-        this.fieldControl.valueChanges.pipe(untilDestroyed(this)).subscribe(() => {
+        this.fieldControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this.cleanInternal(true);
         });
     }

src/app/shared/components/payout-tool-field/payout-tool-field.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input, OnInit, booleanAttribute } from '@angular/core';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import { PayoutTool } from '@vality/domain-proto/domain';
 import { PartyID, ShopID } from '@vality/domain-proto/payment_processing';
 import { createControlProviders, FormControlSuperclass, Option } from '@vality/ng-core';
@@ -10,7 +9,6 @@ import { PartyManagementService } from '@cc/app/api/payment-processing';
 
 import { handleError, NotificationErrorService } from '../../services/notification-error';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-payout-tool-field',
     templateUrl: 'payout-tool-field.component.html',

src/app/shared/components/shop-field/shop-field.component.ts

@@ -5,8 +5,9 @@ import {
     OnChanges,
     OnInit,
     booleanAttribute,
+    DestroyRef,
 } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Shop } from '@vality/domain-proto/domain';
 import { PartyID, ShopID } from '@vality/domain-proto/payment_processing';
 import {
@@ -21,7 +22,6 @@ import { filter, map, share, switchMap } from 'rxjs/operators';
 
 import { PartyManagementService } from '@cc/app/api/payment-processing';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-shop-field',
     templateUrl: './shop-field.component.html',
@@ -53,7 +53,10 @@ export class ShopFieldComponent<M extends boolean = boolean>
 
     private partyId$ = new BehaviorSubject<PartyID>(null);
 
-    constructor(private partyManagementService: PartyManagementService) {
+    constructor(
+        private partyManagementService: PartyManagementService,
+        private destroyRef: DestroyRef,
+    ) {
         super();
     }
 
@@ -79,7 +82,7 @@ export class ShopFieldComponent<M extends boolean = boolean>
                             ? !this.control.value.every((v) => shops.some((s) => s.id === v))
                             : !shops.some((s) => s.id === this.control.value)),
                 ),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe(() => {
                 this.control.setValue(null);

src/app/shared/components/shops-table/shops-table.component.ts

@@ -3,7 +3,6 @@ import { Component, Output, EventEmitter, Input, booleanAttribute, OnChanges } f
 import { MatCardModule } from '@angular/material/card';
 import { Sort } from '@angular/material/sort';
 import { Router } from '@angular/router';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import { Shop, Party } from '@vality/domain-proto/domain';
 import {
     InputFieldModule,
@@ -38,7 +37,6 @@ export interface ShopParty {
     };
 }
 
-@UntilDestroy()
 @Component({
     selector: 'cc-shops-table',
     standalone: true,

src/app/shared/components/thrift-api-crud/domain/domain-thrift-form-dialog/domain-thrift-form-dialog.component.ts

@@ -1,14 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogSuperclass, DialogModule, DEFAULT_DIALOG_CONFIG } from '@vality/ng-core';
 import { ValueType } from '@vality/thrift-ts';
 import { Observable } from 'rxjs';
 
 import { DomainThriftFormComponent } from '../domain-thrift-form';
 
-@UntilDestroy()
 @Component({
     standalone: true,
     templateUrl: 'domain-thrift-form-dialog.component.html',
@@ -37,14 +36,17 @@ export class DomainThriftFormDialogComponent<T = unknown, R = unknown> extends D
         );
     }
 
-    constructor(private fb: FormBuilder) {
+    constructor(
+        private fb: FormBuilder,
+        private destroyRef: DestroyRef,
+    ) {
         super();
     }
 
     upsert() {
         this.dialogData
             .action(this.control.value)
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
                 next: (result) => {
                     this.closeWithSuccess({ object: this.control.value, result });

src/app/shared/components/thrift-api-crud/domain/domain-thrift-viewer/services/domain-metadata-view-extensions/domain-metadata-view-extensions.service.ts

@@ -1,6 +1,6 @@
 import { formatDate } from '@angular/common';
-import { Injectable } from '@angular/core';
+import { Injectable, DestroyRef } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ThriftAstMetadata } from '@vality/domain-proto';
 import { DomainObject } from '@vality/domain-proto/domain';
 import { Rational, Timestamp } from '@vality/domain-proto/internal/base';
@@ -16,10 +16,8 @@ import { isTypeWithAliases, MetadataFormData } from '@cc/app/shared/components/m
 
 import { getUnionValue } from '../../../../../../../../utils';
 import { SidenavInfoService } from '../../../../../sidenav-info';
+import { getDomainObjectDetails } from '../../../utils';
 
-import { getObjectLabel } from './utils/get-object-label';
-
-@UntilDestroy()
 @Injectable({
     providedIn: 'root',
 })
@@ -47,13 +45,14 @@ export class DomainMetadataViewExtensionsService {
                     }),
             },
         ]),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     );
 
     constructor(
         private domainStoreService: DomainStoreService,
         private sidenavInfoService: SidenavInfoService,
+        private destroyRef: DestroyRef,
     ) {}
 
     createDomainObjectExtensions(metadata: ThriftAstMetadata[]): MetadataViewExtension[] {
@@ -74,9 +73,14 @@ export class DomainMetadataViewExtensionsService {
                 determinant: (data) => of(isTypeWithAliases(data, refType, 'domain')),
                 extension: (_, value) =>
                     this.domainStoreService.getObjectsRefs(objectKey).pipe(
-                        map((objs) => objs.find(([, o]) => isEqual(o[objectKey].ref, value))),
+                        map((refObjs) => refObjs.find(([, o]) => isEqual(o[objectKey].ref, value))),
-                        map(([ref, obj]) => ({
+                        map((refObj) => {
-                            value: getObjectLabel(getUnionValue(obj), objectKey),
+                            if (!refObj) {
+                                return undefined;
+                            }
+                            const [ref, obj] = refObj;
+                            return {
+                                value: getDomainObjectDetails(obj).label,
                                 tooltip: getUnionValue(ref),
                                 click: () => {
                                     this.sidenavInfoService.toggle(
@@ -86,7 +90,8 @@ export class DomainMetadataViewExtensionsService {
                                         { ref },
                                     );
                                 },
-                        })),
+                            };
+                        }),
                     ),
             };
         });

src/app/shared/components/thrift-api-crud/domain/domain-thrift-viewer/services/domain-metadata-view-extensions/utils/get-object-label.ts

@@ -1,8 +0,0 @@
-import { DomainObject } from '@vality/domain-proto/domain';
-
-import { getDomainObjectValueDetailsFn } from '../../../../utils';
-
-export function getObjectLabel(o: DomainObject[keyof DomainObject], objectKey: keyof DomainObject) {
-    const details = getDomainObjectValueDetailsFn(objectKey)(o);
-    return details.label ?? String(details.id);
-}

src/app/shared/components/thrift-api-crud/domain/utils/get-domain-object-details.ts

@@ -1,5 +1,6 @@
 import { DomainObject } from '@vality/domain-proto/domain';
 import { inlineJson } from '@vality/ng-core';
+import startCase from 'lodash-es/startCase';
 import { PickByValue, ValuesType } from 'utility-types';
 
 import { getUnionKey, getUnionValue } from '../../../../../../utils';
@@ -7,13 +8,15 @@ import { getUnionKey, getUnionValue } from '../../../../../../utils';
 export interface DomainObjectDetails {
     id: number | string;
     label: string;
+    description: string;
+    type: string;
 }
 
 type GetDomainObjectDetails<TObject extends ValuesType<DomainObject> = ValuesType<DomainObject>> = <
     T extends TObject,
 >(
     o: T,
-) => DomainObjectDetails;
+) => Partial<Omit<DomainObjectDetails, 'type'>>;
 
 type DomainRefDataObjects = PickByValue<
     DomainObject,
@@ -27,9 +30,9 @@ const defaultGetDomainObjectDetails: GetDomainObjectDetails<ValuesType<DomainRef
 ) => ({
     id: o.ref.id,
     label:
-        ('name' in o.data ? o.data.name : undefined) ??
+        ('name' in o.data ? o.data.name : undefined) ||
-        ('id' in o.data ? String(o.data.id ?? '') : undefined) ??
+        ('id' in o.data ? String(o.data.id ?? undefined) : undefined),
-        '',
+    description: 'description' in o.data ? o.data.description : undefined,
 });
 
 type DomainNoRefDataObjects = Omit<DomainObject, keyof DomainRefDataObjects>;
@@ -37,12 +40,34 @@ const GET_DOMAIN_OBJECTS_DETAILS: {
     [N in keyof DomainNoRefDataObjects]-?: GetDomainObjectDetails<DomainNoRefDataObjects[N]>;
 } = {
     /* eslint-disable @typescript-eslint/naming-convention */
-    currency: (o) => ({ id: o.ref.symbolic_code, label: o.data.name }),
+    currency: (o) => ({
-    payment_method: (o) => ({ id: inlineJson(o.ref.id, Infinity), label: o.data.name }),
+        id: o.ref.symbolic_code,
-    globals: (o) => ({ id: inlineJson(o.ref), label: inlineJson(o.data) }),
+        label: o.data.name,
-    identity_provider: (o) => ({ id: o.ref.id, label: inlineJson(o.data) }),
+        description: `Exponent: ${o.data.exponent}`,
-    dummy_link: (o) => ({ id: o.ref.id, label: o.data.link.id }),
+    }),
-    limit_config: (o) => ({ id: o.ref.id, label: o.data.description }),
+    payment_method: (o) => ({
+        id: inlineJson(o.ref.id, Infinity),
+        label: o.data.name,
+        description: o.data.description,
+    }),
+    globals: (o) => ({
+        id: inlineJson(o.ref),
+        label: startCase(getUnionKey(o.data)),
+        description: inlineJson(o.data),
+    }),
+    identity_provider: (o) => ({
+        id: o.ref.id,
+        label: startCase(getUnionKey(o.data)),
+        description: inlineJson(o.data),
+    }),
+    dummy_link: (o) => ({
+        id: o.ref.id,
+        label: o.data.link.id,
+    }),
+    limit_config: (o) => ({
+        id: o.ref.id,
+        label: o.data.description,
+    }),
     /* eslint-enable @typescript-eslint/naming-convention */
 };
 
@@ -52,7 +77,13 @@ export function getDomainObjectValueDetailsFn(key: keyof DomainObject): GetDomai
 
 export function getDomainObjectDetails(o: DomainObject): DomainObjectDetails {
     if (!o) {
-        return { id: null, label: 'Unknown' };
+        return { id: null, label: '', description: '', type: '' };
     }
-    return getDomainObjectValueDetailsFn(getUnionKey(o))(getUnionValue(o));
+    const result = getDomainObjectValueDetailsFn(getUnionKey(o))(getUnionValue(o));
+    return {
+        id: result.id,
+        label: result.label || result.description || String(result.id) || startCase(getUnionKey(o)),
+        description: result.label ? result.description : '',
+        type: startCase(getUnionKey(o)),
+    };
 }

src/app/shared/components/thrift-editor/thrift-editor.component.html

@@ -16,12 +16,11 @@
         [namespace]="namespace"
         [type]="type"
     ></cc-metadata-form>
-    <cc-monaco-editor
+    <ngx-monaco-editor
         *ngIf="kind === 'editor'"
-        [codeLensProviders]="codeLensProviders"
+        [ngModel]="content$ | async"
-        [completionProviders]="completionProviders"
+        [options]="{ language: 'json' }"
-        [file]="file$ | async"
         class="monaco-editor"
-        (fileChange)="fileChange($event)"
+        (ngModelChange)="contentChange($event)"
-    ></cc-monaco-editor>
+    ></ngx-monaco-editor>
 </div>

src/app/shared/components/thrift-editor/thrift-editor.component.ts

@@ -5,8 +5,6 @@ import { DialogService, DialogResponseStatus, ConfirmDialogComponent } from '@va
 import { merge, defer, of, Subject } from 'rxjs';
 import { map, filter, shareReplay } from 'rxjs/operators';
 
-import { toMonacoFile } from '@cc/app/sections/domain/utils';
-import { MonacoFile, CodeLensProvider, CompletionProvider } from '@cc/components/monaco-editor';
 import { ValidatedFormControlSuperclass, createControlProviders } from '@cc/utils';
 import { objectToJSON } from '@cc/utils/thrift-instance';
 
@@ -33,17 +31,14 @@ export class ThriftEditorComponent<T> extends ValidatedFormControlSuperclass<T>
     @Input() type: string;
     @Input() extensions: MetadataFormExtension[];
 
-    @Input() codeLensProviders: CodeLensProvider[];
-    @Input() completionProviders: CompletionProvider[];
-
     @Output() changeKind = new EventEmitter<EditorKind>();
 
-    file$ = merge(
+    content$ = merge(
         this.control.valueChanges.pipe(filter(() => this.kind !== EditorKind.Editor)),
         defer(() => of(this.control.value)),
         defer(() => this.updateFile$),
     ).pipe(
-        map((value) => toMonacoFile(this.createMonacoContent(value))),
+        map((value) => this.createMonacoContent(value)),
         shareReplay({ refCount: true, bufferSize: 1 }),
     );
 
@@ -61,11 +56,11 @@ export class ThriftEditorComponent<T> extends ValidatedFormControlSuperclass<T>
         return super.validate();
     }
 
-    fileChange($event: MonacoFile) {
+    contentChange(str: string) {
         try {
             this.editorError = null;
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const parsed = JSON.parse($event.content);
+            const parsed = JSON.parse(str);
             this.control.setValue(parsed as T);
         } catch (err) {
             console.warn(err);

src/app/shared/components/thrift-editor/thrift-editor.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 
 import { MetadataFormModule } from '@cc/app/shared/components/metadata-form';
-import { MonacoEditorModule } from '@cc/components/monaco-editor';
 
 import { ThriftEditorComponent } from './thrift-editor.component';
 
@@ -21,6 +21,7 @@ import { ThriftEditorComponent } from './thrift-editor.component';
         MatButtonToggleModule,
         MatButtonModule,
         MatIconModule,
+        FormsModule,
     ],
 })
 export class ThriftEditorModule {}

src/app/shared/components/thrift-viewer/thrift-viewer.component.html

@@ -6,13 +6,13 @@
 </div>
 <ng-template #loaded>
     <div class="wrapper">
-        <cc-monaco-diff-editor
+        <ngx-monaco-diff-editor
             *ngIf="isDiff; else standard"
-            [modified]="comparedFile$ | async"
+            [modifiedModel]="comparedFile$ | async"
             [options]="{ renderSideBySide: true, readOnly: true }"
-            [original]="valueFile$ | async"
+            [originalModel]="valueFile$ | async"
             class="monaco-editor"
-        ></cc-monaco-diff-editor>
+        ></ngx-monaco-diff-editor>
         <ng-template #standard>
             <cc-json-viewer
                 *ngIf="kind === 'component'"
@@ -22,13 +22,13 @@
                 [type]="type"
                 [value]="value"
             ></cc-json-viewer>
-            <cc-monaco-editor
+            <ngx-monaco-editor
                 *ngIf="kind === 'editor'"
-                [file]="valueFile$ | async"
+                [ngModel]="(valueFile$ | async).code"
-                [options]="{ readOnly: true }"
+                [options]="{ readOnly: true, language: (valueFile$ | async).language }"
                 class="monaco-editor"
             >
-            </cc-monaco-editor>
+            </ngx-monaco-editor>
             <div class="actions">
                 <button color="primary" mat-icon-button (click)="toggleKind()">
                     <mat-icon *ngIf="kind === 'component'">code_blocks</mat-icon>

src/app/shared/components/thrift-viewer/thrift-viewer.component.ts

@@ -1,22 +1,18 @@
 import { Component, Input, OnChanges, Output, EventEmitter, booleanAttribute } from '@angular/core';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import { ThriftAstMetadata } from '@vality/domain-proto';
 import { ComponentChanges } from '@vality/ng-core';
 import { ValueType } from '@vality/thrift-ts';
+import { DiffEditorModel } from 'ngx-monaco-editor-v2';
 import { ReplaySubject } from 'rxjs';
 
 import { MetadataViewExtension } from '@cc/app/shared/components/json-viewer';
 import { objectToJSON } from '@cc/utils/thrift-instance';
 
-import { MonacoFile } from '../../../../components/monaco-editor';
-import { toMonacoFile } from '../../../sections/domain/utils';
-
 export enum ViewerKind {
     Editor = 'editor',
     Component = 'component',
 }
 
-@UntilDestroy()
 @Component({
     selector: 'cc-thrift-viewer',
     templateUrl: './thrift-viewer.component.html',
@@ -35,8 +31,8 @@ export class ThriftViewerComponent<T> implements OnChanges {
 
     @Output() changeKind = new EventEmitter<ViewerKind>();
 
-    valueFile$ = new ReplaySubject<MonacoFile>(1);
+    valueFile$ = new ReplaySubject<DiffEditorModel>(1);
-    comparedFile$ = new ReplaySubject<MonacoFile>(1);
+    comparedFile$ = new ReplaySubject<DiffEditorModel>(1);
 
     get isDiff() {
         return !!this.compared;
@@ -44,12 +40,16 @@ export class ThriftViewerComponent<T> implements OnChanges {
 
     ngOnChanges(changes: ComponentChanges<ThriftViewerComponent<T>>) {
         if (changes.value) {
-            this.valueFile$.next(toMonacoFile(JSON.stringify(objectToJSON(this.value), null, 2)));
+            this.valueFile$.next({
+                code: JSON.stringify(objectToJSON(this.value), null, 2),
+                language: 'json',
+            });
         }
         if (changes.compared) {
-            this.comparedFile$.next(
+            this.comparedFile$.next({
-                toMonacoFile(JSON.stringify(objectToJSON(this.compared), null, 2)),
+                code: JSON.stringify(objectToJSON(this.compared), null, 2),
-            );
+                language: 'json',
+            });
         }
     }
 

src/app/shared/components/thrift-viewer/thrift-viewer.module.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 
 import { MetadataFormModule } from '@cc/app/shared/components/metadata-form';
-import { MonacoEditorModule } from '@cc/components/monaco-editor';
 
 import { JsonViewerModule } from '../json-viewer';
 
@@ -26,6 +26,7 @@ import { ThriftViewerComponent } from './thrift-viewer.component';
         MatIconModule,
         JsonViewerModule,
         MatProgressSpinnerModule,
+        FormsModule,
     ],
 })
 export class ThriftViewerModule {}

src/app/shared/components/wallet-info/services/receive-wallet/receive-wallet.service.ts

@@ -1,11 +1,10 @@
-import { Injectable } from '@angular/core';
+import { Injectable, DestroyRef } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, NEVER, ReplaySubject, Subject } from 'rxjs';
 import { catchError, switchMap, shareReplay, tap } from 'rxjs/operators';
 
 import { ManagementService } from '@cc/app/api/wallet';
 
-@UntilDestroy()
 @Injectable()
 export class ReceiveWalletService {
     private receiveWallet$ = new ReplaySubject<string>();
@@ -26,7 +25,7 @@ export class ReceiveWalletService {
             ),
         ),
         tap(() => this.loading$.next(false)),
-        untilDestroyed(this),
+        takeUntilDestroyed(this.destroyRef),
         shareReplay(1),
     );
 
@@ -35,7 +34,10 @@ export class ReceiveWalletService {
     // eslint-disable-next-line @typescript-eslint/member-ordering
     hasError$ = this.error$.asObservable();
 
-    constructor(private walletManagementService: ManagementService) {}
+    constructor(
+        private walletManagementService: ManagementService,
+        private destroyRef: DestroyRef,
+    ) {}
 
     receiveWallet(id: string): void {
         this.receiveWallet$.next(id);

src/app/shared/pipes/amount-currency.pipe.ts

@@ -1,6 +1,13 @@
 import { formatCurrency, getCurrencySymbol } from '@angular/common';
-import { Pipe, Inject, LOCALE_ID, DEFAULT_CURRENCY_CODE, PipeTransform } from '@angular/core';
+import {
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+    Pipe,
+    Inject,
+    LOCALE_ID,
+    DEFAULT_CURRENCY_CODE,
+    PipeTransform,
+    DestroyRef,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CurrencyObject } from '@vality/domain-proto/domain';
 import isNil from 'lodash-es/isNil';
 import { ReplaySubject, combineLatest } from 'rxjs';
@@ -10,7 +17,6 @@ import { DomainStoreService } from '@cc/app/api/domain-config';
 
 import { toMajor } from '../../../utils';
 
-@UntilDestroy()
 @Pipe({
     standalone: true,
     pure: false,
@@ -29,6 +35,7 @@ export class AmountCurrencyPipe implements PipeTransform {
         @Inject(LOCALE_ID) private _locale: string,
         @Inject(DEFAULT_CURRENCY_CODE) private _defaultCurrencyCode: string = 'USD',
         private domainStoreService: DomainStoreService,
+        private destroyRef: DestroyRef,
     ) {}
 
     init() {
@@ -61,7 +68,7 @@ export class AmountCurrencyPipe implements PipeTransform {
                         format === 'short' ? '0.0-2' : undefined,
                     );
                 }),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((value) => {
                 this.latestValue = value;

src/app/shared/services/keycloak-token-info/keycloak-token-info.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import jwtDecode from 'jwt-decode';
 import { KeycloakService } from 'keycloak-angular';
 import { Observable, defer, switchMap, of } from 'rxjs';
@@ -7,7 +6,6 @@ import { map, shareReplay } from 'rxjs/operators';
 
 import { KeycloakToken } from './types/keycloak-token';
 
-@UntilDestroy()
 @Injectable({ providedIn: 'root' })
 export class KeycloakTokenInfoService {
     info$: Observable<KeycloakToken> = defer(() => this.token$).pipe(

src/app/shared/services/notification/notification.service.ts

@@ -3,6 +3,9 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 
 const DEFAULT_DURATION_MS = 3000;
 
+/**
+ * @deprecated
+ */
 @Injectable({ providedIn: 'root' })
 export class NotificationService {
     constructor(private snackBar: MatSnackBar) {}

src/app/shared/services/partial-fetcher/partial-fetcher.ts

@@ -1,4 +1,5 @@
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { EMPTY, merge, Observable, of, Subject } from 'rxjs';
 import {
     debounceTime,
@@ -27,7 +28,6 @@ import { SHARE_REPLAY_CONF } from './utils/share-replay-conf';
 /**
  * @deprecated
  */
-@UntilDestroy()
 export abstract class PartialFetcher<R, P> {
     readonly fetchResultChanges$: Observable<{
         result: R[];
@@ -42,6 +42,7 @@ export abstract class PartialFetcher<R, P> {
     readonly errors$: Observable<unknown>;
 
     private action$ = new Subject<FetchAction<P>>();
+    private destroyRef = inject(DestroyRef);
 
     // TODO: make a dependency for DI
     constructor(
@@ -93,7 +94,7 @@ export abstract class PartialFetcher<R, P> {
             this.errors$,
             this.fetchResultChanges$,
         )
-            .pipe(untilDestroyed(this))
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe();
     }
 

src/components/cash-field/cash-field.component.ts

@@ -7,10 +7,11 @@ import {
     LOCALE_ID,
     OnInit,
     booleanAttribute,
+    DestroyRef,
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Validator, ValidationErrors, FormControl } from '@angular/forms';
 import { createMask } from '@ngneat/input-mask';
-import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { FormComponentSuperclass } from '@s-libs/ng-core';
 import sortBy from 'lodash-es/sortBy';
 import { combineLatest } from 'rxjs';
@@ -27,7 +28,6 @@ export interface Cash {
 
 const GROUP_SEPARATOR = ' ';
 
-@UntilDestroy()
 @Component({
     selector: 'cc-cash-field',
     templateUrl: './cash-field.component.html',
@@ -77,6 +77,7 @@ export class CashFieldComponent extends FormComponentSuperclass<Cash> implements
         injector: Injector,
         @Inject(LOCALE_ID) private _locale: string,
         private domainStoreService: DomainStoreService,
+        private destroyRef: DestroyRef,
     ) {
         super(injector);
     }
@@ -88,7 +89,7 @@ export class CashFieldComponent extends FormComponentSuperclass<Cash> implements
         ])
             .pipe(
                 switchMap(([currencyCode]) => this.getCurrencyByCode(currencyCode)),
-                untilDestroyed(this),
+                takeUntilDestroyed(this.destroyRef),
             )
             .subscribe((currency) => {
                 const amountStr = this.amountControl.value;

src/components/monaco-editor/abstract-monaco.directive.ts

@@ -1,76 +0,0 @@
-import {
-    Directive,
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    SimpleChanges,
-} from '@angular/core';
-import { ComponentChanges } from '@vality/ng-core';
-import isNil from 'lodash-es/isNil';
-
-import { AbstractMonacoService } from './abstract-monaco.service';
-import {
-    CodeLensProvider,
-    CompletionProvider,
-    IDisposable,
-    IEditor,
-    IDiffEditorOptions,
-    MonacoFile,
-} from './model';
-
-@Directive()
-export abstract class AbstractMonacoDirective implements OnInit, OnChanges, OnDestroy {
-    @Input() options: IDiffEditorOptions;
-
-    @Input() set codeLensProviders(providers: CodeLensProvider[]) {
-        if (!isNil(providers) && providers.length > 0) {
-            this.monacoEditorService.addCodeLensProvider(providers);
-        }
-    }
-
-    @Input() set completionProviders(providers: CompletionProvider[]) {
-        if (!isNil(providers) && providers.length > 0) {
-            this.monacoEditorService.addCompletionProvider(providers);
-        }
-    }
-
-    @Output() fileChange = new EventEmitter<MonacoFile>();
-    @Output() ready = new EventEmitter<IEditor>();
-    @Output() codeLensProviderRegistered = new EventEmitter<IDisposable[]>();
-    @Output() completionProviderRegistered = new EventEmitter<IDisposable[]>();
-
-    constructor(
-        protected monacoEditorService: AbstractMonacoService,
-        protected editorRef: ElementRef,
-    ) {}
-
-    ngOnChanges(changes: ComponentChanges<AbstractMonacoDirective>) {
-        this.childOnChanges(changes);
-        if (!isNil(changes.options?.currentValue)) {
-            this.monacoEditorService.updateOptions(changes.options.currentValue);
-        }
-    }
-
-    ngOnInit() {
-        this.monacoEditorService
-            .init(this.editorRef, this.options)
-            .subscribe(() => this.ready.emit(this.monacoEditorService.editor));
-        this.monacoEditorService.fileChange.subscribe((file) => this.fileChange.emit(file));
-        this.monacoEditorService
-            .codeLensProviderRegistered()
-            .subscribe((disposable) => this.codeLensProviderRegistered.emit(disposable));
-        this.monacoEditorService
-            .completionProviderRegistered()
-            .subscribe((disposable) => this.completionProviderRegistered.emit(disposable));
-    }
-
-    ngOnDestroy() {
-        this.monacoEditorService.destroy();
-    }
-
-    abstract childOnChanges(changes: SimpleChanges);
-}

src/components/monaco-editor/abstract-monaco.service.ts

@@ -1,169 +0,0 @@
-import { ElementRef, NgZone } from '@angular/core';
-import { ResizeSensor } from 'css-element-queries';
-import { Observable, Subject } from 'rxjs';
-import { map, take, takeUntil, tap, first } from 'rxjs/operators';
-
-import { BOOTSTRAP$ } from './bootstrap';
-import { fromDisposable } from './from-disposable';
-import {
-    CodeLensProvider,
-    CompletionProvider,
-    IDisposable,
-    IEditorOptions,
-    ITextModel,
-    MonacoFile,
-} from './model';
-import { CodeLensService } from './providers/code-lens.service';
-import { CompletionService } from './providers/completion.service';
-
-export abstract class AbstractMonacoService {
-    protected _editor: monaco.editor.IEditor;
-    private editorInitialized$ = new Subject<void>();
-    private fileChange$ = new Subject<MonacoFile>();
-    private nativeElement: HTMLElement;
-    private destroy$ = new Subject<void>();
-    private resizeDetector: ResizeSensor;
-
-    get fileChange(): Observable<MonacoFile> {
-        return this.fileChange$.pipe(takeUntil(this.destroy$));
-    }
-
-    get editor(): monaco.editor.IEditor {
-        return this._editor;
-    }
-
-    constructor(
-        protected zone: NgZone,
-        protected codeLensService: CodeLensService,
-        protected completionService: CompletionService,
-        protected tokenCodeLensProviders: CodeLensProvider[],
-        protected tokenCompletionProviders: CompletionProvider[],
-    ) {
-        BOOTSTRAP$.pipe(first()).subscribe(() => {
-            this.registerCodeLensListener();
-            this.registerCompletionListener();
-        });
-    }
-
-    init({ nativeElement }: ElementRef, options: IEditorOptions = {}): Observable<void> {
-        this.nativeElement = nativeElement;
-        this.registerResizeListener();
-        return BOOTSTRAP$.pipe(
-            tap(() => {
-                this.disposeModels();
-                this._editor = this.createEditor(nativeElement, options);
-                this.codeLensService.add(this.tokenCodeLensProviders);
-                this.completionService.add(this.tokenCompletionProviders);
-                this.openFile();
-                this.editorInitialized$.next();
-            }),
-        );
-    }
-
-    destroy() {
-        if (this.resizeDetector) {
-            this.resizeDetector.detach();
-        }
-        this.destroy$.next();
-    }
-
-    updateOptions(options: IEditorOptions) {
-        if (this._editor) {
-            this._editor.updateOptions(options);
-        }
-    }
-
-    addCodeLensProvider(providers: CodeLensProvider[]) {
-        this.codeLensService.add(providers);
-    }
-
-    codeLensProviderRegistered(): Observable<IDisposable[]> {
-        return this.codeLensService.registered.pipe(takeUntil(this.destroy$));
-    }
-
-    addCompletionProvider(providers: CompletionProvider[]) {
-        this.completionService.add(providers);
-    }
-
-    completionProviderRegistered(): Observable<IDisposable[]> {
-        return this.completionService.registered.pipe(takeUntil(this.destroy$));
-    }
-
-    protected abstract createEditor(
-        el: HTMLElement,
-        options: IEditorOptions,
-    ): monaco.editor.IEditor;
-
-    protected abstract openFile();
-
-    protected prepareModel(file: MonacoFile): ITextModel {
-        const uri = monaco.Uri.file(file.uri);
-        let model = monaco.editor.getModel(uri);
-        if (model) {
-            if (file.language && model.getModeId() !== file.language) {
-                model.dispose();
-                model = undefined;
-            } else {
-                model.setValue(file.content);
-            }
-        } else {
-            model = monaco.editor.createModel(file.content, file.language, uri);
-            this.registerModelChangeListener(file, model);
-        }
-        return model;
-    }
-
-    protected getLayout() {
-        return this.nativeElement.getBoundingClientRect();
-    }
-
-    private disposeModels() {
-        for (const model of monaco.editor.getModels()) {
-            model.dispose();
-        }
-        this.codeLensService.dispose();
-        this.completionService.dispose();
-    }
-
-    private registerCompletionListener() {
-        this.completionService.providers.subscribe((providers) =>
-            this.completionService.register(providers),
-        );
-    }
-
-    private registerCodeLensListener() {
-        this.codeLensService.providers.subscribe((providers) =>
-            this.codeLensService.register(providers),
-        );
-    }
-
-    private registerModelChangeListener(file: MonacoFile, model: monaco.editor.IModel) {
-        const destroy = fromDisposable(model.onWillDispose.bind(model)).pipe(take(1));
-        fromDisposable(model.onDidChangeContent.bind(model))
-            .pipe(
-                map(() => model.getValue()),
-                takeUntil(destroy),
-            )
-            .subscribe((content: string) =>
-                this.zone.run(() =>
-                    this.fileChange$.next({
-                        ...file,
-                        content,
-                    }),
-                ),
-            );
-    }
-
-    private registerResizeListener() {
-        if (this.resizeDetector) {
-            this.resizeDetector.detach();
-        }
-        this.resizeDetector = new ResizeSensor(this.nativeElement, () => {
-            this.updateLayoutSize();
-        });
-    }
-
-    private updateLayoutSize() {
-        this._editor.layout(this.getLayout());
-    }
-}

src/components/monaco-editor/bootstrap.ts

@@ -1,20 +0,0 @@
-import { Observable } from 'rxjs';
-import { shareReplay } from 'rxjs/operators';
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-declare const window: {
-    require: { config: (arg: unknown) => unknown } & ((arg0: string[], arg1: unknown) => unknown);
-};
-
-export const BOOTSTRAP$ = new Observable<void>((observer) => {
-    const script = document.createElement('script');
-    script.type = 'text/javascript';
-    script.src = 'libs/vs/loader.js';
-    script.onload = () => {
-        window.require.config({ paths: { vs: 'libs/vs' } });
-        window.require(['vs/editor/editor.main'], () => {
-            observer.next();
-        });
-    };
-    document.body.appendChild(script);
-}).pipe(shareReplay(1));

src/components/monaco-editor/from-disposable.ts

@@ -1,13 +0,0 @@
-import { Observable } from 'rxjs';
-
-export function fromDisposable<T>(
-    source: (listener: (e: T) => void) => monaco.IDisposable,
-): Observable<T> {
-    return new Observable<T>((observer) => {
-        const disposable = source((e) => {
-            observer.next(e);
-        });
-
-        return () => disposable.dispose();
-    });
-}

src/components/monaco-editor/index.ts

@@ -1,4 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="../../../node_modules/monaco-editor/monaco.d.ts" />
-export * from './monaco-editor.module';
-export * from './model';

src/components/monaco-editor/model.ts

@@ -1,37 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type IEditorOptions = monaco.editor.IEditorOptions;
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type IDiffEditorOptions = monaco.editor.IDiffEditorOptions;
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type ITextModel = monaco.editor.ITextModel;
-export type CancellationToken = monaco.CancellationToken;
-export type ProviderResult<T> = monaco.languages.ProviderResult<T>;
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type IDisposable = monaco.IDisposable;
-export type Position = monaco.Position;
-export type CompletionList = monaco.languages.CompletionList;
-export type CompletionContext = monaco.languages.CompletionContext;
-export type CodeLensList = monaco.languages.CodeLensList;
-export type CodeLens = monaco.languages.CodeLens;
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type IEditor = monaco.editor.IEditor;
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type IStandaloneDiffEditor = monaco.editor.IStandaloneDiffEditor;
-
-export interface MonacoFile {
-    uri: string;
-    content: string;
-    language?: string;
-}
-
-export interface LanguageProvider {
-    readonly language: string;
-}
-
-export interface CodeLensProvider extends monaco.languages.CodeLensProvider, LanguageProvider {}
-
-export interface CompletionProvider
-    extends monaco.languages.CompletionItemProvider,
-        LanguageProvider {}

src/components/monaco-editor/monaco-diff-editor.directive.ts

@@ -1,26 +0,0 @@
-import { Directive, ElementRef, Input, SimpleChanges } from '@angular/core';
-
-import { AbstractMonacoDirective } from './abstract-monaco.directive';
-import { MonacoFile } from './model';
-import { MonacoDiffEditorService } from './monaco-diff-editor.service';
-
-@Directive({
-    selector: 'cc-monaco-diff-editor,[ccMonacoDiffEditor]',
-})
-export class MonacoDiffEditorDirective extends AbstractMonacoDirective {
-    @Input() original: MonacoFile;
-    @Input() modified: MonacoFile;
-
-    constructor(
-        protected editorService: MonacoDiffEditorService,
-        protected editorRef: ElementRef,
-    ) {
-        super(editorService, editorRef);
-    }
-
-    childOnChanges({ original, modified }: SimpleChanges) {
-        if (original && modified) {
-            this.editorService.open(original.currentValue, modified.currentValue);
-        }
-    }
-}

src/components/monaco-editor/monaco-diff-editor.service.ts

@@ -1,60 +0,0 @@
-import { Inject, Injectable, NgZone, Optional } from '@angular/core';
-
-import { AbstractMonacoService } from './abstract-monaco.service';
-import { CodeLensProvider, CompletionProvider, IEditorOptions, MonacoFile } from './model';
-import { CodeLensService } from './providers/code-lens.service';
-import { CompletionService } from './providers/completion.service';
-import { CODE_LENS_PROVIDERS, COMPLETION_PROVIDERS } from './tokens';
-
-@Injectable()
-export class MonacoDiffEditorService extends AbstractMonacoService {
-    private original: MonacoFile;
-    private modified: MonacoFile;
-
-    constructor(
-        @Optional()
-        @Inject(CODE_LENS_PROVIDERS)
-        protected tokenCodeLensProviders: CodeLensProvider[],
-        @Optional()
-        @Inject(COMPLETION_PROVIDERS)
-        protected tokenCompletionProviders: CompletionProvider[],
-        protected zone: NgZone,
-        protected codeLensService: CodeLensService,
-        protected completionService: CompletionService,
-    ) {
-        super(
-            zone,
-            codeLensService,
-            completionService,
-            tokenCodeLensProviders,
-            tokenCompletionProviders,
-        );
-    }
-
-    open(original: MonacoFile, modified: MonacoFile) {
-        this.original = original;
-        this.modified = modified;
-        if (!this._editor || !this.original || !this.modified) {
-            return;
-        }
-        this._editor.setModel({
-            original: this.prepareModel(original),
-            modified: this.prepareModel(modified),
-        });
-    }
-
-    protected createEditor(
-        el: HTMLElement,
-        options: IEditorOptions,
-    ): monaco.editor.IStandaloneDiffEditor {
-        return monaco.editor.createDiffEditor(el, {
-            ...options,
-        });
-    }
-
-    protected openFile() {
-        if (this.original && this.modified) {
-            this.open(this.original, this.modified);
-        }
-    }
-}

src/components/monaco-editor/monaco-editor.directive.ts

@@ -1,26 +0,0 @@
-import { Directive, ElementRef, Input } from '@angular/core';
-import { ComponentChanges } from '@vality/ng-core';
-
-import { AbstractMonacoDirective } from './abstract-monaco.directive';
-import { MonacoFile } from './model';
-import { MonacoEditorService } from './monaco-editor.service';
-
-@Directive({
-    selector: 'cc-monaco-editor,[ccMonacoEditor]',
-})
-export class MonacoEditorDirective extends AbstractMonacoDirective {
-    @Input() file: MonacoFile;
-
-    constructor(
-        protected editorService: MonacoEditorService,
-        protected editorRef: ElementRef,
-    ) {
-        super(editorService, editorRef);
-    }
-
-    childOnChanges({ file }: ComponentChanges<MonacoEditorDirective>) {
-        if (file) {
-            this.editorService.open(file.currentValue);
-        }
-    }
-}

src/components/monaco-editor/monaco-editor.module.ts

@@ -1,17 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { MonacoDiffEditorDirective } from './monaco-diff-editor.directive';
-import { MonacoDiffEditorService } from './monaco-diff-editor.service';
-import { MonacoEditorDirective } from './monaco-editor.directive';
-import { MonacoEditorService } from './monaco-editor.service';
-import { CodeLensService } from './providers/code-lens.service';
-import { CompletionService } from './providers/completion.service';
-
-@NgModule({
-    declarations: [MonacoEditorDirective, MonacoDiffEditorDirective],
-    imports: [CommonModule],
-    exports: [MonacoEditorDirective, MonacoDiffEditorDirective],
-    providers: [MonacoEditorService, CodeLensService, CompletionService, MonacoDiffEditorService],
-})
-export class MonacoEditorModule {}

src/components/monaco-editor/monaco-editor.service.ts

@@ -1,54 +0,0 @@
-import { Inject, Injectable, NgZone, Optional } from '@angular/core';
-
-import { AbstractMonacoService } from './abstract-monaco.service';
-import { CodeLensProvider, CompletionProvider, IEditorOptions, MonacoFile } from './model';
-import { CodeLensService } from './providers/code-lens.service';
-import { CompletionService } from './providers/completion.service';
-import { CODE_LENS_PROVIDERS, COMPLETION_PROVIDERS } from './tokens';
-
-@Injectable()
-export class MonacoEditorService extends AbstractMonacoService {
-    private file: MonacoFile;
-
-    constructor(
-        @Optional()
-        @Inject(CODE_LENS_PROVIDERS)
-        protected tokenCodeLensProviders: CodeLensProvider[],
-        @Optional()
-        @Inject(COMPLETION_PROVIDERS)
-        protected tokenCompletionProviders: CompletionProvider[],
-        protected codeLensService: CodeLensService,
-        protected completionService: CompletionService,
-        protected zone: NgZone,
-    ) {
-        super(
-            zone,
-            codeLensService,
-            completionService,
-            tokenCodeLensProviders,
-            tokenCompletionProviders,
-        );
-    }
-
-    open(file: MonacoFile) {
-        this.file = file;
-        if (!this._editor || !this.file) {
-            return;
-        }
-        this._editor.setModel(this.prepareModel(file));
-    }
-
-    protected createEditor(
-        el: HTMLElement,
-        options: IEditorOptions,
-    ): monaco.editor.IStandaloneCodeEditor {
-        return monaco.editor.create(el, {
-            ...options,
-        });
-    }
-    protected openFile() {
-        if (this.file) {
-            this.open(this.file);
-        }
-    }
-}

src/components/monaco-editor/providers/code-lens.service.ts

@@ -1,15 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { CodeLensProvider, IDisposable } from '../model';
-
-import { ProviderRegister } from './provider-register';
-
-@Injectable()
-export class CodeLensService extends ProviderRegister<CodeLensProvider> {
-    protected registerProvider(provider: CodeLensProvider): IDisposable {
-        if (!provider) {
-            return undefined;
-        }
-        return monaco.languages.registerCodeLensProvider(provider.language, provider);
-    }
-}