TD-800,TD-715: Bump angular to 17 (#162)

.github/actions/init/action.yaml

@@ -4,5 +4,5 @@ runs:
   using: composite
   steps:
     - uses: valitydev/action-frontend/setup@v0.1
-    - run: npm ci --force # TODO: Remove "--force" after updating Angular in external libraries (@vality)
+    - run: npm ci
       shell: bash

.github/workflows/basic-linters.yml

@@ -3,7 +3,7 @@ name: Vality basic linters
 on:
   pull_request:
     branches:
-      - "*"
+      - '*'
 
 jobs:
   lint:

.prettierignore

@@ -3,7 +3,10 @@ package-lock.json
 node_modules
 dist
 coverage
-schemes
+
-.vscode
+.*
-.idea
+_.*
-.angular
+LICENSE
+Dockerfile
+*.conf
+*.ico

angular.json

@@ -121,13 +121,13 @@
                     "builder": "@angular-builders/custom-webpack:dev-server",
                     "configurations": {
                         "production": {
-                            "browserTarget": "dashboard:build:production"
+                            "buildTarget": "dashboard:build:production"
                         },
                         "development": {
-                            "browserTarget": "dashboard:build:development"
+                            "buildTarget": "dashboard:build:development"
                         },
                         "stage": {
-                            "browserTarget": "dashboard:build:development,stage"
+                            "buildTarget": "dashboard:build:development,stage"
                         }
                     },
                     "defaultConfiguration": "development"

cspell.json

@@ -1,7 +1,7 @@
 {
     "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json",
     "version": "0.2",
-    "import": "node_modules/@vality/cspell-config/cspell.config.js",
+    "import": "./node_modules/@vality/cspell-config/cspell.config.js",
     "ignorePaths": ["**/country-codes.ts"],
     "words": [
         "transloco",

package.json

@@ -15,8 +15,8 @@
     "lint": "ng lint --max-warnings=0",
     "lint:fix": "ng lint --fix",
     "lint:errors": "ng lint --quiet",
-    "format": "prettier * --list-different",
+    "format": "prettier ** --list-different",
-    "format:fix": "prettier * --write --loglevel warn",
+    "format:fix": "prettier ** --write --log-level warn",
     "tools-cmd": "ts-node --project tools/tsconfig.json",
     "icons-list-gen": "npm run tools-cmd -- tools/gen-icons-list.ts",
     "icons-ids-gen": "npm run tools-cmd -- tools/gen-icons-ids.ts",
@@ -25,87 +25,84 @@
     "spell:fix": "cspell --no-progress --show-suggestions --show-context **"
   },
   "dependencies": {
-    "@angular/animations": "^16.2.0",
+    "@angular/animations": "^17.0.8",
-    "@angular/cdk": "~16.2.0",
+    "@angular/cdk": "~17.0.4",
-    "@angular/common": "^16.2.0",
+    "@angular/common": "^17.0.8",
-    "@angular/compiler": "^16.2.0",
+    "@angular/compiler": "^17.0.8",
-    "@angular/core": "^16.2.0",
+    "@angular/core": "^17.0.8",
-    "@angular/flex-layout": "^15.0.0-beta.42",
+    "@angular/forms": "^17.0.8",
-    "@angular/forms": "^16.2.0",
+    "@angular/material": "~17.0.4",
-    "@angular/material": "~16.2.0",
+    "@angular/material-moment-adapter": "^17.0.4",
-    "@angular/material-moment-adapter": "^16.2.0",
+    "@angular/platform-browser": "^17.0.8",
-    "@angular/platform-browser": "^16.2.0",
+    "@angular/platform-browser-dynamic": "^17.0.8",
-    "@angular/platform-browser-dynamic": "^16.2.0",
+    "@angular/router": "^17.0.8",
-    "@angular/router": "^16.2.0",
+    "@ngneat/transloco": "^6.0.4",
-    "@ngneat/transloco": "^4.3.0",
     "@ngneat/until-destroy": "^9.0.0",
-    "@sentry/angular-ivy": "^7.63.0",
+    "@sentry/angular-ivy": "^7.92.0",
-    "@sentry/integrations": "^7.63.0",
+    "@sentry/integrations": "^7.92.0",
-    "@sentry/tracing": "^7.63.0",
+    "@sentry/tracing": "^7.92.0",
-    "@vality/ng-core": "^16.2.1-pr-33-89c646b.0",
+    "@vality/ng-core": "^17.0.0",
-    "@vality/swag-anapi-v2": "2.0.0",
+    "@vality/swag-anapi-v2": "2.0.1-32ed85f.0",
-    "@vality/swag-api-keys-v2": "^0.1.2-870c41d.0",
+    "@vality/swag-api-keys-v2": "0.1.2-f0ece04.0",
-    "@vality/swag-claim-management": "0.1.1-7a03f9b.0",
+    "@vality/swag-claim-management": "0.1.1-6b6711b.0",
-    "@vality/swag-organizations": "1.0.1-cd6cc10.0",
+    "@vality/swag-organizations": "1.0.0",
-    "@vality/swag-payments": "0.1.1-01da4bb.0",
+    "@vality/swag-payments": "0.1.3-77c86a5.0",
-    "@vality/swag-url-shortener": "0.1.1-f780d07.0",
+    "@vality/swag-url-shortener": "0.1.0",
-    "@vality/swag-wallet": "0.1.3-6c7361c.0",
+    "@vality/swag-wallet": "0.1.3-099fc69.0",
     "angular-file": "^3.0.1",
     "apexcharts": "^3.19.2",
-    "coerce-property": "^15.0.1",
     "css-element-queries": "1.2.3",
-    "dinero.js": "2.0.0-alpha.8",
     "humanize-duration": "^3.19.0",
     "jwt-decode": "^3.1.2",
-    "keycloak-angular": "14.0.0",
+    "keycloak-angular": "^15.0.0",
-    "keycloak-js": "18.0.1",
+    "keycloak-js": "^18.0.1",
-    "libphonenumber-js": "^1.7.27",
+    "lodash-es": "^4.17.21",
-    "lodash-es": "4.17.21",
     "moment": "2.29.4",
     "ng-apexcharts": "1.7.1",
+    "ng-flex-layout": "^17.0.1-beta.2",
     "rxjs": "^7.8.1",
     "short-uuid": "4.2.0",
     "tslib": "^2.4.0",
     "utility-types": "^3.10.0",
-    "zone.js": "~0.13.1"
+    "zone.js": "~0.14.3"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^16.0.0",
+    "@angular-builders/custom-webpack": "^17.0.0",
-    "@angular-devkit/build-angular": "^16.2.0",
+    "@angular-devkit/build-angular": "^17.0.9",
-    "@angular-eslint/builder": "^16.1.0",
+    "@angular-eslint/builder": "^17.2.0",
-    "@angular-eslint/schematics": "^16.1.0",
+    "@angular-eslint/schematics": "^17.2.0",
-    "@angular/cli": "^16.2.0",
+    "@angular/cli": "^17.0.9",
-    "@angular/compiler-cli": "^16.2.0",
+    "@angular/compiler-cli": "^17.0.8",
-    "@angular/language-service": "^16.2.0",
+    "@angular/language-service": "^17.0.8",
     "@ngneat/transloco-keys-manager": "^3.8.0",
-    "@ngneat/transloco-optimize": "^3.0.2",
+    "@ngneat/transloco-optimize": "^5.0.3",
     "@types/d3": "^5.7.0",
     "@types/glob": "^7.1.3",
     "@types/humanize-duration": "^3.18.0",
-    "@types/jasmine": "~3.6.0",
+    "@types/jasmine": "~5.1.4",
     "@types/jwt-decode": "^3.1.0",
-    "@types/lodash-es": "4.17.6",
+    "@types/lodash-es": "^4.17.12",
     "@types/moment": "2.13.0",
     "@types/prettier": "^3.0.0",
-    "@vality/cspell-config": "^7.0.1-pr-33-52841c7.0",
+    "@vality/cspell-config": "^8.0.1-pr-57-482a037.0",
-    "@vality/eslint-config": "^8.0.1-pr-33-52841c7.0",
+    "@vality/eslint-config": "^8.2.0",
-    "@vality/prettier-config": "3.0.1-pr-33-52841c7.0",
+    "@vality/prettier-config": "3.1.0",
     "cross-env": "^7.0.3",
-    "cspell": "^7.0.0",
+    "cspell": "^8.3.2",
     "dotenv": "^16.0.3",
-    "eslint": "^8.47.0",
+    "eslint": "^8.56.0",
     "glob": "^7.1.6",
-    "jasmine-core": "~3.7.0",
+    "jasmine-core": "~5.1.1",
     "jasmine-marbles": "0.9.2",
-    "karma": "~6.3.3",
+    "karma": "~6.4.2",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.0",
+    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
-    "karma-spec-reporter": "0.0.32",
+    "karma-spec-reporter": "0.0.36",
-    "prettier": "^3.0.1",
+    "prettier": "^3.1.1",
     "ts-mockito": "^2.6.1",
     "ts-node": "^10.9.1",
-    "typescript": "~5.1.3"
+    "typescript": "~5.2.2"
   }
 }

src/app/api/claim-management/claims.service.ts

@@ -19,7 +19,10 @@ export class ClaimsService extends createApi(ApiClaimsService, [PartyIdExtension
     ) => {
         return this.requestReviewClaimByID(params).pipe(
             catchError((err) => {
-                if (err instanceof HttpErrorResponse && err.error?.code === 'invalidClaimRevision')
+                if (
+                    err instanceof HttpErrorResponse &&
+                    err.error?.code === 'invalidClaimRevision'
+                ) {
                     return this.getClaimByID({ claimID: params.claimID }).pipe(
                         switchMap((claim) =>
                             this.requestReviewClaimByID({
@@ -28,6 +31,7 @@ export class ClaimsService extends createApi(ApiClaimsService, [PartyIdExtension
                             }),
                         ),
                     );
+                }
                 return throwError(err);
             }),
         );

src/app/api/organizations/index.ts

@@ -4,3 +4,4 @@ export * from './organizations.module';
 export * from './invitations.service';
 export * from './members.service';
 export * from './organizations-dictionary.service';
+export * from './types/member-role-optional-id';

src/app/api/organizations/organizations-dictionary.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { TranslocoService } from '@ngneat/transloco';
-import { ResourceScopeId } from '@vality/swag-organizations/lib/model/resource-scope-id';
+import { ResourceScopeId, RoleId } from '@vality/swag-organizations';
-import { RoleId } from '@vality/swag-organizations/lib/model/role-id';
 
 import { DictionaryService } from '../utils';
 

src/app/api/organizations/types/member-role-optional-id.ts

@@ -0,0 +1,3 @@
+import { MemberRole } from '@vality/swag-organizations';
+
+export type MemberRoleOptionalId = Omit<MemberRole, 'id'> & Partial<Pick<MemberRole, 'id'>>;

src/app/api/payments/payments-dictionary.service.ts

@@ -1,8 +1,6 @@
 import { Injectable } from '@angular/core';
 import { TranslocoService } from '@ngneat/transloco';
-import { PaymentStatus } from '@vality/swag-payments';
+import { PaymentStatus, CustomersTopic, InvoicesTopic } from '@vality/swag-payments';
-import { CustomersTopic } from '@vality/swag-payments/lib/model/customers-topic';
-import { InvoicesTopic } from '@vality/swag-payments/lib/model/invoices-topic';
 
 import { DictionaryService } from '../utils';
 

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import * as Sentry from '@sentry/angular-ivy';
+import * as sentry from '@sentry/angular-ivy';
 import { first } from 'rxjs/operators';
 
 import { BootstrapService } from './bootstrap.service';
@@ -21,6 +21,6 @@ export class AppComponent implements OnInit {
     ngOnInit(): void {
         this.contextOrganizationService.organization$
             .pipe(first())
-            .subscribe(({ party }) => Sentry.setUser({ id: party }));
+            .subscribe(({ party }) => sentry.setUser({ id: party }));
     }
 }

src/app/app.module.ts

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule } from '@angular/core';
+import { APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule, isDevMode } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import {
     DateAdapter,
     MAT_DATE_FORMATS,
@@ -18,13 +17,9 @@ import {
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
-import {
+import { TranslocoModule, provideTransloco } from '@ngneat/transloco';
-    TRANSLOCO_CONFIG,
+import * as sentry from '@sentry/angular-ivy';
-    TRANSLOCO_LOADER,
+import { FlexLayoutModule } from 'ng-flex-layout';
-    TranslocoModule,
-    translocoConfig,
-} from '@ngneat/transloco';
-import * as Sentry from '@sentry/angular-ivy';
 
 import { AnapiModule } from '@dsh/app/api/anapi';
 import { ClaimManagementModule } from '@dsh/app/api/claim-management';
@@ -89,7 +84,7 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
                 LanguageService,
                 ThemeManager,
                 IconsService,
-                Sentry.TraceService,
+                sentry.TraceService,
             ],
             multi: true,
         },
@@ -112,17 +107,16 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
         },
         { provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: { disabled: true } },
         { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } },
-        {
+        provideTransloco({
-            provide: TRANSLOCO_CONFIG,
+            config: {
-            useValue: translocoConfig({
                 availableLangs: ['en', 'ru'],
                 defaultLang: 'en',
                 fallbackLang: 'ru',
                 reRenderOnLangChange: true,
-                prodMode: environment.production,
+                prodMode: !isDevMode(),
-            }),
             },
-        { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoaderService },
+            loader: TranslocoHttpLoaderService,
+        }),
         { provide: ENV, useValue: environment },
         {
             provide: ErrorHandler,
@@ -134,7 +128,7 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
             multi: true,
         },
         {
-            provide: Sentry.TraceService,
+            provide: sentry.TraceService,
             deps: [Router],
         },
         {

src/app/auth/role-access.service.ts

@@ -25,7 +25,9 @@ export class RoleAccessService {
         roleAccessNames: RoleAccessName[],
         type: 'every' | 'some' = 'every',
     ): Observable<boolean> {
-        if (!roleAccessNames.length) return of(true);
+        if (!roleAccessNames.length) {
+            return of(true);
+        }
         return this.contextOrganizationService.member$.pipe(
             map((member) => {
                 const memberRoles = member.roles.map((r) => r.roleId);

src/app/home/actionbar/actionbar.module.ts

@@ -1,13 +1,13 @@
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatRadioModule } from '@angular/material/radio';
 import { RouterModule } from '@angular/router';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { ClaimsService } from '@dsh/app/api/claim-management';
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';

src/app/home/actionbar/components/menu-item/menu-item.component.ts

@@ -4,8 +4,8 @@ import {
     HostBinding,
     Input,
     ViewEncapsulation,
+    booleanAttribute,
 } from '@angular/core';
-import { coerceBoolean } from 'coerce-property';
 
 @Component({
     selector: 'dsh-menu-item',
@@ -15,8 +15,9 @@ import { coerceBoolean } from 'coerce-property';
     encapsulation: ViewEncapsulation.None,
 })
 export class MenuItemComponent {
-    @Input() @coerceBoolean @HostBinding('class.dsh-menu-item-header') header = false;
+    @Input({ transform: booleanAttribute }) @HostBinding('class.dsh-menu-item-header') header =
-    @Input() @coerceBoolean @HostBinding('class.dsh-menu-item-link') link = true;
+        false;
+    @Input({ transform: booleanAttribute }) @HostBinding('class.dsh-menu-item-link') link = true;
 
     @HostBinding('class.dsh-menu-item') dshMenuItemClass = true;
 }

src/app/home/actionbar/components/user-dropdown/user-dropdown.component.ts

@@ -1,5 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, booleanAttribute } from '@angular/core';
-import { coerceBoolean } from 'coerce-property';
 import { map } from 'rxjs/operators';
 
 import { ContextOrganizationService } from '@dsh/app/shared/services';
@@ -16,7 +15,7 @@ import { ROTATE } from './utils/rotate-animation';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class UserDropdownComponent {
-    @Input() @coerceBoolean expanded = false;
+    @Input({ transform: booleanAttribute }) expanded = false;
 
     username = this.keycloakService.getUsername();
     orgName$ = this.contextOrganizationService.organization$.pipe(map(({ name }) => name));

src/app/home/home.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterModule } from '@angular/router';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { HomeComponent } from './home.component';
 import { LaptopGridModule } from './laptop-grid/laptop-grid.module';

src/app/home/laptop-grid/laptop-grid.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { ToolbarModule } from '../toolbar';
 

src/app/home/mobile-grid/_mobile-grid-theme.scss

@@ -1,5 +1,3 @@
-@import '@angular/material/theming';
-
 @import './mobile-menu/mobile-menu-theme';
 
 @mixin dsh-mobile-grid-theme($theme) {

src/app/home/mobile-grid/mobile-grid.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { BootstrapIconModule } from '@dsh/components/indicators';
 

src/app/home/mobile-grid/mobile-menu/_mobile-menu-theme.scss

@@ -1,5 +1,3 @@
-@import '@angular/material/theming';
-
 @import './components/mobile-menu-nav-item/mobile-menu-nav-item-theme';
 @import './components/mobile-user-bar/mobile-user-bar-theme';
 

src/app/home/mobile-grid/mobile-menu/mobile-menu.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { MatDividerModule } from '@angular/material/divider';
 import { RouterModule } from '@angular/router';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { SectionsLinksModule } from '@dsh/app/shared/services/sections-links';
 import { BootstrapIconModule } from '@dsh/components/indicators';

src/app/home/toolbar/toolbar.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { SectionsLinksModule } from '@dsh/app/shared/services/sections-links';
 

src/app/humanize-duration/humanize-duration.service.ts

@@ -55,22 +55,28 @@ export class HumanizeDurationService {
 
     getDuration(value: Value, config: HumanizeConfig = {}): Observable<string> {
         const diffMs = this.getDiffMs(value);
-        if (isNaN(diffMs)) return null;
+        if (isNaN(diffMs)) {
-        if (diffMs < HumanizeDurationService.LESS_THAN_FEW_SECONDS)
+            return null;
+        }
+        if (diffMs < HumanizeDurationService.LESS_THAN_FEW_SECONDS) {
             return this.transloco.selectTranslate(
                 'humanizeDuration.justNow',
                 null,
                 'core-components',
             );
+        }
         return of(this.duration(diffMs, config)).pipe(
             switchMap((duration) => {
-                if (config.isShort)
+                if (config.isShort) {
                     return this.shortEnglishHumanizer.pipe(
                         map((shortEnglishHumanizer) =>
                             this.duration(diffMs, { ...config, ...shortEnglishHumanizer }),
                         ),
                     );
-                if (config.largest === 1) return of(moment.duration(diffMs).humanize());
+                }
+                if (config.largest === 1) {
+                    return of(moment.duration(diffMs).humanize());
+                }
                 return of(duration);
             }),
             map((duration) => (duration === 'минута' ? 'минуту' : duration)),

src/app/init-sentry.ts

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/angular-ivy';
+import * as sentry from '@sentry/angular-ivy';
 import { Integrations } from '@sentry/tracing';
 import isNil from 'lodash-es/isNil';
 
@@ -8,11 +8,11 @@ export const initSentry = (dsn: string): void => {
     if (isNil(dsn)) {
         return null;
     }
-    Sentry.init({
+    sentry.init({
         dsn,
         integrations: [
             new Integrations.BrowserTracing({
-                routingInstrumentation: Sentry.routingInstrumentation,
+                routingInstrumentation: sentry.routingInstrumentation,
             }),
         ],
 

src/app/language/language.service.ts

@@ -41,7 +41,9 @@ export class LanguageService {
     private async set(language: Language) {
         this.active = language;
         registerLocaleData(ANGULAR_LOCALE_DATA[language], language);
-        if (language !== 'en') await import(`moment/locale/${language}`);
+        if (language !== 'en') {
+            await import(`moment/locale/${language}`);
+        }
         moment.locale(language);
         this.settingsService.setLocalStorageItem(LanguageService.key, language);
         this.transloco.setActiveLang(language);

src/app/sections/claim-section/claims/claims-list/claims-list.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ExtendedModule, FlexModule } from '@angular/flex-layout';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslocoModule } from '@ngneat/transloco';
+import { ExtendedModule, FlexModule } from 'ng-flex-layout';
 
 import { ApiModelTypesModule } from '@dsh/app/shared/pipes';
 import { EmptySearchResultModule } from '@dsh/components/empty-search-result';

src/app/sections/claim-section/claims/claims-search-filters/claims-search-filters.component.ts

@@ -1,10 +1,10 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { ComponentChanges } from '@vality/ng-core';
 import { Claim } from '@vality/swag-claim-management';
 
 import { ClaimStatusesEnum } from '@dsh/app/shared/components/inputs/claim-statuses-field/types/claim-statuses-enum';
-import { ComponentChanges } from '@dsh/type-utils';
 import { getFormValueChanges } from '@dsh/utils';
 
 export interface Filters {
@@ -32,7 +32,8 @@ export class ClaimsSearchFiltersComponent implements OnInit, OnChanges {
     }
 
     ngOnChanges({ initParams }: ComponentChanges<ClaimsSearchFiltersComponent>): void {
-        if (initParams?.firstChange && initParams.currentValue)
+        if (initParams?.firstChange && initParams.currentValue) {
             this.form.patchValue(initParams.currentValue as unknown);
         }
+    }
 }

src/app/sections/claim-section/claims/claims-search-filters/claims-search-filters.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { ClaimFilterModule } from '@dsh/app/shared/components/filters/claim-filter';
 import { ClaimStatusesFieldModule } from '@dsh/app/shared/components/inputs/claim-statuses-field';

src/app/sections/claim-section/claims/claims.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -8,6 +7,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { ClaimsService } from '@dsh/app/api/claim-management';
 import { ShopCreationModule } from '@dsh/app/shared/components/shop-creation';

src/app/sections/organization-section/accept-invitation/accept-invitation.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { ErrorModule } from '@dsh/app/shared';
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.component.ts

@@ -7,23 +7,22 @@ import {
     OnInit,
     Output,
     OnChanges,
+    booleanAttribute,
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { ComponentChanges } from '@vality/ng-core';
-import { MemberRole, ResourceScopeId, RoleId, Organization } from '@vality/swag-organizations';
+import { ResourceScopeId, RoleId, Organization } from '@vality/swag-organizations';
-import { coerceBoolean } from 'coerce-property';
 import isNil from 'lodash-es/isNil';
 import { BehaviorSubject, combineLatest, EMPTY, Observable, of, ReplaySubject } from 'rxjs';
 import { first, map, switchMap, tap, shareReplay } from 'rxjs/operators';
 
-import { OrganizationsDictionaryService } from '@dsh/app/api/organizations';
+import { OrganizationsDictionaryService, MemberRoleOptionalId } from '@dsh/app/api/organizations';
 import { ShopsService } from '@dsh/app/api/payments';
 import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
 import { sortRoleIds } from '@dsh/app/shared/components/organization-roles/utils/sort-role-ids';
-import { PartialReadonly } from '@dsh/type-utils';
+import { addDialogsClass } from '@dsh/utils/add-dialogs-class';
 
-import { addDialogsClass } from '../../../../../utils/add-dialogs-class';
 import { equalRoles } from '../members/components/edit-roles-dialog/utils/equal-roles';
 
 import { SelectRoleDialogComponent } from './components/select-role-dialog/select-role-dialog.component';
@@ -37,13 +36,13 @@ import { SelectRoleDialogData } from './components/select-role-dialog/types/sele
     styleUrls: ['change-roles-table.component.scss'],
 })
 export class ChangeRolesTableComponent implements OnInit, OnChanges {
-    @Input() set roles(roles: PartialReadonly<MemberRole>[]) {
+    @Input() set roles(roles: MemberRoleOptionalId[]) {
         if (!isNil(roles)) {
             this.roles$.next(roles);
             this.addRoleIds(roles.map(({ roleId }) => roleId));
         }
     }
-    get roles(): PartialReadonly<MemberRole>[] {
+    get roles(): MemberRoleOptionalId[] {
         return this.roles$.value;
     }
     @Input() organization: Organization;
@@ -53,12 +52,12 @@ export class ChangeRolesTableComponent implements OnInit, OnChanges {
      * - no batch changes
      * - there must be at least one role
      */
-    @Input() @coerceBoolean editMode: boolean;
+    @Input({ transform: booleanAttribute }) editMode: boolean;
-    @Input() @coerceBoolean controlled: boolean;
+    @Input({ transform: booleanAttribute }) controlled: boolean;
 
-    @Output() selectedRoles = new EventEmitter<PartialReadonly<MemberRole>[]>();
+    @Output() selectedRoles = new EventEmitter<MemberRoleOptionalId[]>();
-    @Output() addedRoles = new EventEmitter<PartialReadonly<MemberRole>[]>();
+    @Output() addedRoles = new EventEmitter<MemberRoleOptionalId[]>();
-    @Output() removedRoles = new EventEmitter<PartialReadonly<MemberRole>[]>();
+    @Output() removedRoles = new EventEmitter<MemberRoleOptionalId[]>();
 
     organization$ = new ReplaySubject<Organization>(1);
     roleIds: RoleId[] = [];
@@ -78,7 +77,7 @@ export class ChangeRolesTableComponent implements OnInit, OnChanges {
         return !!this.availableRoles.length && !this.hasAdminRole;
     }
 
-    roles$ = new BehaviorSubject<PartialReadonly<MemberRole>[]>([]);
+    roles$ = new BehaviorSubject<MemberRoleOptionalId[]>([]);
 
     isAllowRemoves$ = this.roles$.pipe(
         map(
@@ -161,7 +160,7 @@ export class ChangeRolesTableComponent implements OnInit, OnChanges {
     }
 
     toggle(roleId: RoleId, resourceId: string): void {
-        const role: PartialReadonly<MemberRole> = {
+        const role: MemberRoleOptionalId = {
             roleId,
             scope: { id: ResourceScopeId.Shop, resourceId },
         };
@@ -193,8 +192,12 @@ export class ChangeRolesTableComponent implements OnInit, OnChanges {
     }
 
     disabled(roleId: RoleId, resourceId: string): Observable<boolean> {
-        if (roleId === RoleId.Administrator) return of(true);
+        if (roleId === RoleId.Administrator) {
-        if (!this.editMode) return of(false);
+            return of(true);
+        }
+        if (!this.editMode) {
+            return of(false);
+        }
         return combineLatest([this.roles$, this.checked(roleId, resourceId)]).pipe(
             map(([roles, isChecked]) => roles.length <= 1 && isChecked),
         );
@@ -254,7 +257,7 @@ export class ChangeRolesTableComponent implements OnInit, OnChanges {
         this.roleIds = this.roleIds.filter((r) => !roleIds.includes(r));
     }
 
-    private addRoles(roles: PartialReadonly<MemberRole>[]) {
+    private addRoles(roles: MemberRoleOptionalId[]) {
         if (roles.length) {
             if (!this.controlled) {
                 this.roles = [...this.roles, ...roles];
@@ -263,7 +266,7 @@ export class ChangeRolesTableComponent implements OnInit, OnChanges {
         }
     }
 
-    private removeRoles(roles: PartialReadonly<MemberRole>[]) {
+    private removeRoles(roles: MemberRoleOptionalId[]) {
         if (roles.length) {
             if (!this.controlled) {
                 this.roles = this.roles.filter((r) => !roles.includes(r));

src/app/sections/organization-section/organization-details/change-roles-table/change-roles-table.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatRadioModule } from '@angular/material/radio';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/organization-section/organization-details/invitations/components/invitation/invitation.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { InlineObject1, Invitation, Organization } from '@vality/swag-organizations';
+import { Invitation, Organization, RevokeInvitationRequest } from '@vality/swag-organizations';
 import { filter, switchMap } from 'rxjs/operators';
 
 import { InvitationsService } from '@dsh/app/api/organizations';
@@ -41,8 +41,8 @@ export class InvitationComponent {
                     this.invitationsService.revokeInvitation({
                         orgId: this.orgId,
                         invitationId: this.invitation.id,
-                        inlineObject1: {
+                        revokeInvitationRequest: {
-                            status: InlineObject1.StatusEnum.Revoked,
+                            status: RevokeInvitationRequest.StatusEnum.Revoked,
                         },
                     }),
                 ),

src/app/sections/organization-section/organization-details/invitations/invitations.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule, GridModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -9,6 +8,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule, GridModule } from 'ng-flex-layout';
 
 import { DialogModule } from '@dsh/app/shared/components/dialog';
 import { OrganizationRolesModule } from '@dsh/app/shared/components/organization-roles';

src/app/sections/organization-section/organization-details/members/components/edit-roles-dialog/utils/equal-roles.ts

@@ -1,8 +1,6 @@
-import { MemberRole } from '@vality/swag-organizations';
+import { MemberRoleOptionalId } from '@dsh/app/api/organizations';
 
-import { PartialReadonly } from '@dsh/type-utils';
+export function equalRoles(a: MemberRoleOptionalId, b: MemberRoleOptionalId) {
-
-export function equalRoles(a: PartialReadonly<MemberRole>, b: PartialReadonly<MemberRole>) {
     return (
         (a.id && b.id && a.id === b.id) ||
         (a.roleId === b.roleId &&

src/app/sections/organization-section/organization-details/members/components/member/member.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { ComponentChanges } from '@vality/ng-core';
 import { Member, Organization } from '@vality/swag-organizations';
 import { filter, switchMap } from 'rxjs/operators';
 
@@ -17,7 +18,6 @@ import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
 import { ErrorService, NotificationService } from '@dsh/app/shared';
 import { OrganizationManagementService } from '@dsh/app/shared/services/organization-management/organization-management.service';
 import { ConfirmActionDialogComponent, ConfirmActionDialogResult } from '@dsh/components/popups';
-import { ComponentChanges } from '@dsh/type-utils';
 import { ignoreBeforeCompletion } from '@dsh/utils';
 
 import { EditRolesDialogComponent } from '../edit-roles-dialog/edit-roles-dialog.component';

src/app/sections/organization-section/organization-details/members/members.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
@@ -8,6 +7,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { OrganizationsModule as OrganizationsAPIModule } from '@dsh/app/api/organizations';
 import { ErrorModule, NotificationModule } from '@dsh/app/shared';

src/app/sections/organization-section/organization-details/organization-details.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatTabsModule } from '@angular/material/tabs';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { OrganizationManagementModule } from '@dsh/app/shared/services/organization-management/organization-management.module';
 import { IndicatorsModule } from '@dsh/components/indicators';

src/app/sections/organization-section/organizations/components/organization/organization.component.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { ComponentChanges } from '@vality/ng-core';
 import { Organization } from '@vality/swag-organizations';
 import isNil from 'lodash-es/isNil';
 import { filter, pluck, switchMap } from 'rxjs/operators';
@@ -22,7 +23,6 @@ import {
 import { FetchOrganizationsService } from '@dsh/app/shared/services/fetch-organizations';
 import { OrganizationManagementService } from '@dsh/app/shared/services/organization-management/organization-management.service';
 import { ConfirmActionDialogComponent, ConfirmActionDialogResult } from '@dsh/components/popups';
-import { ComponentChanges } from '@dsh/type-utils';
 import { ignoreBeforeCompletion } from '@dsh/utils';
 
 import { RenameOrganizationDialogComponent } from '../rename-organization-dialog/rename-organization-dialog.component';

src/app/sections/organization-section/organizations/components/rename-organization-dialog/rename-organization-dialog.component.ts

@@ -41,7 +41,7 @@ export class RenameOrganizationDialogComponent {
         return this.organizationsService
             .patchOrg({
                 orgId: this.data.organization.id,
-                inlineObject: {
+                patchOrgRequest: {
                     name: this.form.value.name,
                 },
             })

src/app/sections/organization-section/organizations/organizations.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
@@ -8,6 +7,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { OrganizationsModule as OrganizationsAPIModule } from '@dsh/app/api/organizations';
 import { ErrorModule, NotificationModule } from '@dsh/app/shared';

src/app/sections/page-not-found/page-not-found.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { RouterModule } from '@angular/router';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { ButtonModule } from '@dsh/components/buttons';
 

src/app/sections/payment-section/analytics/analytics-search-filters/analytics-search-filters.component.ts

@@ -9,6 +9,7 @@ import {
 } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { ComponentChanges } from '@vality/ng-core';
 import { Shop } from '@vality/swag-payments';
 import { combineLatest, defer, Observable } from 'rxjs';
 import { first, map, pluck } from 'rxjs/operators';
@@ -19,7 +20,6 @@ import {
     DateRangeWithPreset,
     Preset,
 } from '@dsh/components/date-range-filter';
-import { ComponentChanges } from '@dsh/type-utils';
 import { getFormValueChanges } from '@dsh/utils';
 
 import { RealmShopsService } from '../../services';
@@ -68,15 +68,17 @@ export class AnalyticsSearchFiltersComponent implements OnInit, OnChanges {
             .pipe(untilDestroyed(this))
             .subscribe((filters) => this.filterValuesChanged.next(filters as unknown as Filters));
         this.currencies$.pipe(first(), untilDestroyed(this)).subscribe((currencies) => {
-            if (!this.form.value.currency)
+            if (!this.form.value.currency) {
                 this.form.patchValue({
                     currency: currencies.includes('RUB') ? 'RUB' : currencies[0],
                 });
+            }
         });
     }
 
     ngOnChanges({ initParams }: ComponentChanges<AnalyticsSearchFiltersComponent>): void {
-        if (initParams?.firstChange && initParams.currentValue)
+        if (initParams?.firstChange && initParams.currentValue) {
             this.form.patchValue(initParams.currentValue as unknown);
         }
+    }
 }

src/app/sections/payment-section/analytics/analytics-search-filters/analytics-search-filters.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
+import { FlexLayoutModule, FlexModule } from 'ng-flex-layout';
 
 import { CurrencyFilterModule } from '@dsh/app/shared/components/filters/currency-filter';
 import { ShopsFilterModule } from '@dsh/app/shared/components/filters/shops-filter';

src/app/sections/payment-section/analytics/analytics.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { BarChartModule, DonutChartModule } from '@dsh/components/charts';
 import { SpinnerModule } from '@dsh/components/indicators';

src/app/sections/payment-section/analytics/average-payment/average-payment.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { SpinnerModule } from '@dsh/components/indicators';
 import { CardModule } from '@dsh/components/layout';

src/app/sections/payment-section/analytics/bar-chart-item/bar-chart-item.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { BarChartModule } from '@dsh/components/charts';
 import { SpinnerModule } from '@dsh/components/indicators';

src/app/sections/payment-section/analytics/donut-chart-item/donut-chart-item.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { BarChartModule } from '@dsh/components/charts/bar-chart';
 import { DonutChartModule } from '@dsh/components/charts/donut-chart';

src/app/sections/payment-section/analytics/payment-split-amount/payment-split-amount.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { BarChartModule } from '@dsh/components/charts/bar-chart';
 import { SpinnerModule } from '@dsh/components/indicators';

src/app/sections/payment-section/analytics/payment-split-amount/split-amount-to-chart-data.ts

@@ -1,7 +1,7 @@
+import { toMajor } from '@vality/ng-core';
 import { OffsetAmount, SplitAmountResult, SplitUnit } from '@vality/swag-anapi-v2';
 import moment from 'moment';
 
-import { toMajor } from '../../../../../utils';
 import { ChartData, Series, splitUnitToTimeFormat } from '../utils';
 
 const indexToVisibility = (index: number, length: number): 'show' | 'hide' =>

src/app/sections/payment-section/analytics/payment-split-count/payment-split-count.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject, Input, OnChanges } from '@angular/core';
+import { ComponentChanges } from '@vality/ng-core';
 
 import { SpinnerType } from '@dsh/components/indicators';
-import { ComponentChanges } from '@dsh/type-utils';
 
 import { ChartsThemeProvider, CHARTS_THEME } from '../charts-theme';
 import { SearchParams } from '../search-params';

src/app/sections/payment-section/analytics/payment-split-count/payment-split-count.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { BarChartModule } from '@dsh/components/charts/bar-chart';
 import { SpinnerModule } from '@dsh/components/indicators';

src/app/sections/payment-section/analytics/payments-amount/payments-amount.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { SpinnerModule } from '@dsh/components/indicators';
 import { CardModule } from '@dsh/components/layout';

src/app/sections/payment-section/analytics/payments-count/payments-count.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { SpinnerModule } from '@dsh/components/indicators';
 import { CardModule } from '@dsh/components/layout';

src/app/sections/payment-section/analytics/payments-error-distribution/payments-error-distribution.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { BarChartModule } from '@dsh/components/charts/bar-chart';
 import { DonutChartModule } from '@dsh/components/charts/donut-chart';

src/app/sections/payment-section/analytics/payments-tool-distribution/payments-tool-distribution.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { BarChartModule } from '@dsh/components/charts/bar-chart';
 import { DonutChartModule } from '@dsh/components/charts/donut-chart';

src/app/sections/payment-section/analytics/percent-difference/percent-difference.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { CardModule } from '@dsh/components/layout';
 

src/app/sections/payment-section/analytics/refunds-amount/refunds-amount.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { SpinnerModule } from '@dsh/components/indicators';
 import { CardModule } from '@dsh/components/layout';

src/app/sections/payment-section/analytics/stat-item/stat-item.component.ts

@@ -1,5 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, booleanAttribute } from '@angular/core';
-import { coerceBoolean } from 'coerce-property';
 
 import { SpinnerType } from '@dsh/components/indicators';
 
@@ -16,7 +15,7 @@ export class StatItemComponent implements OnChanges {
     @Input() statData: StatData;
     @Input() isLoading: boolean;
     @Input() error: Error;
-    @Input() @coerceBoolean hideCurrency = false;
+    @Input({ transform: booleanAttribute }) hideCurrency = false;
 
     ngOnChanges(changes: SimpleChanges) {
         if (changes.statData?.currentValue) {

src/app/sections/payment-section/analytics/stat-item/stat-item.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { AmountCurrencyModule } from '@dsh/app/shared/pipes';
 import { SpinnerModule } from '@dsh/components/indicators';

src/app/sections/payment-section/balances/balances.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { AmountCurrencyModule } from '@dsh/app/shared/pipes';
 

src/app/sections/payment-section/integrations/api-keys/api-key-details/api-key-details.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
 import { DialogModule } from '@vality/ng-core';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { ButtonModule } from '@dsh/components/buttons';
 import { IndicatorsModule } from '@dsh/components/indicators';

src/app/sections/payment-section/integrations/api-keys/api-key-details/components/api-key-delete-dialog/api-key-delete-dialog.component.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, Injector } from '@angular/core';
+import { Component } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { DialogSuperclass, NotifyLogService, progressTo } from '@vality/ng-core';
 import { RequestRevokeApiKeyRequestParams } from '@vality/swag-api-keys-v2';
+import { FlexModule } from 'ng-flex-layout';
 import { BehaviorSubject } from 'rxjs';
 
 import { ApiKeysService } from '@dsh/app/api/api-keys';
@@ -34,12 +34,11 @@ export class ApiKeyDeleteDialogComponent extends DialogSuperclass<
     progress$ = new BehaviorSubject(0);
 
     constructor(
-        injector: Injector,
         private apiKeysService: ApiKeysService,
         private log: NotifyLogService,
         private translocoService: TranslocoService,
     ) {
-        super(injector);
+        super();
     }
 
     confirm() {

src/app/sections/payment-section/integrations/api-keys/api-keys.component.ts

@@ -3,8 +3,7 @@ import { Component } from '@angular/core';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DialogService } from '@vality/ng-core';
-import { ApiKeyStatus } from '@vality/swag-api-keys-v2';
+import { ApiKeyStatus, ApiKey } from '@vality/swag-api-keys-v2';
-import { ApiKey } from '@vality/swag-api-keys-v2/lib/model/api-key';
 import { map } from 'rxjs/operators';
 
 import { ApiKeysDictionaryService } from '@dsh/app/api/api-keys';

src/app/sections/payment-section/integrations/api-keys/api-keys.module.ts

@@ -1,10 +1,10 @@
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { MatInputModule } from '@angular/material/input';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { AccordionTableModule } from '@dsh/app/shared/components/accordion-table';
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/payment-section/integrations/api-keys/components/api-key-create-dialog/api-key-create-dialog.component.ts

@@ -1,12 +1,12 @@
 import { ClipboardModule, Clipboard } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
-import { Component, Injector } from '@angular/core';
+import { Component } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule, NonNullableFormBuilder } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { DialogSuperclass, progressTo, NotifyLogService } from '@vality/ng-core';
+import { FlexModule } from 'ng-flex-layout';
 import { BehaviorSubject } from 'rxjs';
 
 import { ApiKeysService } from '@dsh/app/api/api-keys';
@@ -39,7 +39,6 @@ export class ApiKeyCreateDialogComponent extends DialogSuperclass<ApiKeyCreateDi
     accessToken?: string;
 
     constructor(
-        injector: Injector,
         private apiKeysService: ApiKeysService,
         private errorService: ErrorService,
         private log: NotifyLogService,
@@ -47,7 +46,7 @@ export class ApiKeyCreateDialogComponent extends DialogSuperclass<ApiKeyCreateDi
         private clipboard: Clipboard,
         private transloco: TranslocoService,
     ) {
-        super(injector);
+        super();
     }
 
     confirm() {

src/app/sections/payment-section/integrations/api-keys/fetch-api-keys.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { TranslocoService } from '@ngneat/transloco';
 import { FetchSuperclass, NotifyLogService, FetchResult, FetchOptions } from '@vality/ng-core';
-import { ListApiKeysRequestParams } from '@vality/swag-api-keys-v2';
+import { ListApiKeysRequestParams, ApiKey } from '@vality/swag-api-keys-v2';
-import { ApiKey } from '@vality/swag-api-keys-v2/lib/model/api-key';
 import { of, Observable } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 

src/app/sections/payment-section/integrations/integrations.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { MatTabsModule } from '@angular/material/tabs';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { AuthModule } from '@dsh/app/auth';
 import { LayoutModule } from '@dsh/components/layout';

src/app/sections/payment-section/integrations/payment-link/create-invoice-template/create-invoice-template.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -11,6 +10,7 @@ import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { ApiModelTypesModule } from '@dsh/app/shared/pipes';
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/payment-section/integrations/payment-link/create-invoice-template/create-invoice-template.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { UntypedFormArray, UntypedFormBuilder } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
+import { toMinor } from '@vality/ng-core';
 import {
     InvoiceLineTaxMode,
     InvoiceLineTaxVAT,
@@ -42,7 +43,6 @@ import {
     SHARE_REPLAY_CONF,
 } from '@dsh/app/custom-operators';
 import { ConfirmActionDialogComponent } from '@dsh/components/popups';
-import { toMinor } from '@dsh/utils';
 
 export const WITHOUT_VAT = Symbol('without VAT');
 

src/app/sections/payment-section/integrations/payment-link/payment-link.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -9,6 +8,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { ActionsModule } from '@dsh/app/shared/components/actions';
 import { CreateInvoiceFormModule } from '@dsh/app/shared/components/create-invoice-form';

src/app/sections/payment-section/integrations/webhooks/create-webhook/create-webhook.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDividerModule } from '@angular/material/divider';
@@ -9,6 +8,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/payment-section/integrations/webhooks/webhook-details/webhook-details.module.ts

@@ -1,10 +1,10 @@
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { WebhookApiKeyModule } from '@dsh/app/shared/components';
 import { ApiModelRefsModule } from '@dsh/app/shared/pipes';

src/app/sections/payment-section/integrations/webhooks/webhook-list/webhook-list.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { ApiModelRefsModule } from '@dsh/app/shared/pipes';
 import { IndicatorsModule } from '@dsh/components/indicators';

src/app/sections/payment-section/integrations/webhooks/webhooks.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -9,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { ButtonModule } from '@dsh/components/buttons';
 import { EmptySearchResultModule } from '@dsh/components/empty-search-result';

src/app/sections/payment-section/operations/invoices/create-invoice/create-invoice.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { CreateInvoiceFormModule } from '@dsh/app/shared/components/create-invoice-form';
 import { DialogModule } from '@dsh/app/shared/components/dialog';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/cancel-invoice/cancel-invoice.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/fulfill-invoice/fulfill-invoice.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/invoice-details.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { RouterModule } from '@angular/router';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { AuthModule } from '@dsh/app/auth';
 import {

src/app/sections/payment-section/operations/invoices/invoices-list/invoices-list.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { InvoiceDetailsModule as ApiInvoiceDetailsModule } from '@dsh/app/shared/components';
 import { ApiModelRefsModule, AmountCurrencyModule } from '@dsh/app/shared/pipes';

src/app/sections/payment-section/operations/invoices/invoices-search-filters/additional-filters/additional-filters.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/payment-section/operations/invoices/invoices-search-filters/additional-filters/invoice-status-filter/invoice-status-filter.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatRadioModule } from '@angular/material/radio';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { InlineShowAllToggleModule } from '@dsh/app/shared/components/buttons/inline-show-all-toggle';
 import { ExpandableRadioGroupModule } from '@dsh/app/shared/components/radio-buttons/expandable-radio-group';

src/app/sections/payment-section/operations/invoices/invoices-search-filters/additional-filters/invoices-filter/invoices-filter.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { InvoicesFieldModule } from '@dsh/app/shared/components/inputs/invoices-field';
 

src/app/sections/payment-section/operations/invoices/invoices-search-filters/additional-filters/shops-filter/shops-filter.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { ShopsFieldModule } from '@dsh/app/shared/components/inputs/shops-field';
 import { FormatInputModule } from '@dsh/components/form-controls';

src/app/sections/payment-section/operations/invoices/invoices-search-filters/invoices-search-filters.component.ts

@@ -7,15 +7,16 @@ import {
     OnInit,
     Output,
 } from '@angular/core';
-import { MediaObserver } from '@angular/flex-layout';
 import { FormBuilder } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { ComponentChanges } from '@vality/ng-core';
 import { PaymentInstitution } from '@vality/swag-payments';
 import isEmpty from 'lodash-es/isEmpty';
 import negate from 'lodash-es/negate';
 import omit from 'lodash-es/omit';
 import pick from 'lodash-es/pick';
+import { MediaObserver } from 'ng-flex-layout';
 import { defer, ReplaySubject, BehaviorSubject, combineLatest } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -26,7 +27,6 @@ import {
     Preset,
     DateRangeWithPreset,
 } from '@dsh/components/date-range-filter';
-import { ComponentChanges } from '@dsh/type-utils';
 import { getFormValueChanges } from '@dsh/utils';
 
 import { filterShopsByRealm } from '../../operators';
@@ -95,7 +95,9 @@ export class InvoicesSearchFiltersComponent implements OnChanges, OnInit {
     }
 
     ngOnChanges({ realm, initParams }: ComponentChanges<InvoicesSearchFiltersComponent>): void {
-        if (realm) this.realm$.next(realm.currentValue);
+        if (realm) {
+            this.realm$.next(realm.currentValue);
+        }
         if (initParams?.firstChange && initParams.currentValue) {
             this.form.patchValue(pick(initParams.currentValue, this.keys));
             this.additionalFilters$.next(omit(initParams.currentValue, this.keys));

src/app/sections/payment-section/operations/invoices/invoices-search-filters/invoices-search-filters.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { InvoiceStatusFilterModule, RefundStatusFilterModule } from '@dsh/app/shared/components';
 import { InvoicesFilterModule } from '@dsh/app/shared/components/filters/invoices-filter';

src/app/sections/payment-section/operations/invoices/invoices.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -13,6 +12,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { AuthModule } from '@dsh/app/auth';
 import { InvoiceDetailsModule } from '@dsh/app/shared/components';

src/app/sections/payment-section/operations/operations.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatTabsModule } from '@angular/material/tabs';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { AuthModule } from '@dsh/app/auth';
 import { LayoutModule } from '@dsh/components/layout';

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/additional-filters.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { BaseDialogModule } from '@dsh/app/shared/components/dialog/base-dialog';
 import { ButtonModule } from '@dsh/components/buttons';

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/card-filter/card-filter.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { FormatInputModule } from '@dsh/components/form-controls';
 

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/invoices-filter/invoices-filter.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { InvoicesFieldModule } from '@dsh/app/shared/components/inputs/invoices-field';
 

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/main-filters/main-filters.component.spec.ts

@@ -1,9 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { getTranslocoModule } from '@dsh/app/shared/tests/get-transloco-module';
 

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/main-filters/main-filters.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { MainFiltersComponent } from './main-filters.component';
 

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/payment-status-filter/payment-status-filter.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatRadioModule } from '@angular/material/radio';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { InlineShowAllToggleModule } from '@dsh/app/shared/components/buttons/inline-show-all-toggle';
 import { ExpandableRadioGroupModule } from '@dsh/app/shared/components/radio-buttons/expandable-radio-group';

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/payment-sum-filter/payment-sum-filter.component.spec.ts

@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { getTranslocoModule } from '@dsh/app/shared/tests/get-transloco-module';
 import { FormatInputModule } from '@dsh/components/form-controls';

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/payment-sum-filter/payment-sum-filter.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexLayoutModule } from 'ng-flex-layout';
 
 import { FormatInputModule } from '@dsh/components/form-controls';
 

src/app/sections/payment-section/operations/payments/payments-filters/additional-filters/payment-system-filter/payment-system-filter.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';
+import { FlexModule } from 'ng-flex-layout';
 
 import { ExpandableRadioGroupModule } from '@dsh/app/shared/components/radio-buttons/expandable-radio-group';