FRONTEND-447: Responsive dialog (#461)

package.json

@@ -7,7 +7,7 @@
     "build": "ng build --prod --extraWebpackConfig webpack.extra.js --progress=false",
     "test": "ng test",
     "test-ci": "ng run dashboard:test-ci",
-    "lint": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 2361",
+    "lint": "eslint \"src/**/*.{ts,js,html}\" --max-warnings 2352",
     "lint-errors": "npm run lint -- --quiet",
     "lint-fix": "npm run lint -- --fix",
     "e2e": "ng e2e",

src/app/feedback/feedback.component.ts

@@ -1,8 +1,6 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 
-import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
-
 import { FeedbackDialogComponent } from './components/feedback-dialog/feedback-dialog.component';
 
 @Component({
@@ -12,9 +10,9 @@ import { FeedbackDialogComponent } from './components/feedback-dialog/feedback-d
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeedbackComponent {
-    constructor(private dialog: MatDialog, @Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig) {}
+    constructor(private dialog: MatDialog) {}
 
     openFeedbackDialog() {
-        return this.dialog.open(FeedbackDialogComponent, this.dialogConfig.medium);
+        return this.dialog.open(FeedbackDialogComponent);
     }
 }

src/app/sections/claim/revoke-claim.service.ts

@@ -48,7 +48,6 @@ export class RevokeClaimService {
     private openRevokeClaimDialog(claimId: number, revision: number) {
         return this.dialog
             .open(RevokeClaimDialogComponent, {
-                disableClose: true,
                 width: '500px',
                 data: { claimId, revision },
             })

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

@@ -19,8 +19,6 @@ export class PaymentLinkComponent {
     create() {
         this.dialog.open(CreatePaymentLinkDialogComponent, {
             width: '720px',
-            maxHeight: '90vh',
-            disableClose: true,
             data: { invoice: this.invoice },
         });
     }

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

@@ -80,8 +80,8 @@ export class ChangeRolesTableComponent implements OnInit {
         const removeDialogsClass = addDialogsClass(this.dialog.openDialogs, 'dsh-hidden');
         this.dialog
             .open<SelectRoleDialogComponent, SelectRoleDialogData, SelectRoleDialogResult>(SelectRoleDialogComponent, {
-                data: { availableRoles: this.availableRoles },
                 ...this.dialogConfig.large,
+                data: { availableRoles: this.availableRoles },
             })
             .afterClosed()
             .pipe(

src/app/sections/organization-details/invitations/invitations.component.ts

@@ -47,7 +47,10 @@ export class InvitationsComponent {
                     this.dialog
                         .open<CreateInvitationDialogComponent, CreateInvitationDialogData, BaseDialogResponseStatus>(
                             CreateInvitationDialogComponent,
-                            { ...this.dialogConfig.large, data: { orgId } }
+                            {
+                                ...this.dialogConfig.large,
+                                data: { orgId },
+                            }
                         )
                         .afterClosed()
                 ),

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

@@ -65,11 +65,11 @@ export class MemberComponent implements OnChanges {
     editRoles() {
         return this.dialog
             .open<EditRolesDialogComponent, EditRolesDialogData>(EditRolesDialogComponent, {
+                ...this.dialogConfig.large,
                 data: {
                     orgId: this.organization.id,
                     userId: this.member.id,
                 },
-                ...this.dialogConfig.large,
             })
             .afterClosed()
             .pipe(untilDestroyed(this))

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, OnChanges, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import isNil from 'lodash-es/isNil';
@@ -6,7 +6,6 @@ import { filter, pluck, switchMap } from 'rxjs/operators';
 
 import { OrganizationsService } from '@dsh/api';
 import { Organization } from '@dsh/api-codegen/organizations';
-import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
 import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base-dialog';
 import { ErrorService, NotificationService } from '@dsh/app/shared/services';
 import { FetchOrganizationsService } from '@dsh/app/shared/services/fetch-organizations';
@@ -41,7 +40,6 @@ export class OrganizationComponent implements OnChanges {
         private dialog: MatDialog,
         private notificationService: NotificationService,
         private errorService: ErrorService,
-        @Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig,
         private fetchOrganizationsService: FetchOrganizationsService
     ) {}
 
@@ -75,10 +73,7 @@ export class OrganizationComponent implements OnChanges {
         return this.dialog
             .open<RenameOrganizationDialogComponent, RenameOrganizationDialogData, BaseDialogResponseStatus>(
                 RenameOrganizationDialogComponent,
-                {
-                    ...this.dialogConfig.medium,
-                    data: { organization: this.organization },
-                }
+                { data: { organization: this.organization } }
             )
             .afterClosed()
             .pipe(

src/app/sections/organizations/organizations.component.spec.ts

@@ -6,7 +6,6 @@ import { TranslocoTestingModule } from '@ngneat/transloco';
 import { of } from 'rxjs';
 import { anything, instance, mock, verify, when } from 'ts-mockito';
 
-import { DIALOG_CONFIG } from '@dsh/app/sections/tokens';
 import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base-dialog';
 import { FetchOrganizationsService } from '@dsh/app/shared/services/fetch-organizations';
 import { EmptySearchResultModule } from '@dsh/components/empty-search-result';
@@ -42,7 +41,6 @@ describe('OrganizationsComponent', () => {
             declarations: [HostComponent, OrganizationsComponent],
             providers: [
                 { provide: FetchOrganizationsService, useValue: instance(mockFetchOrganizationsService) },
-                { provide: DIALOG_CONFIG, useValue: {} },
                 { provide: MatDialog, useValue: instance(mockDialog) },
             ],
         }).compileComponents();
@@ -69,20 +67,20 @@ describe('OrganizationsComponent', () => {
         });
 
         it('success', () => {
-            when(mockDialog.open(anything(), anything())).thenReturn({
+            when(mockDialog.open(anything())).thenReturn({
                 afterClosed: () => of(BaseDialogResponseStatus.Success),
             } as MatDialogRef<any>);
             component.createOrganization();
-            verify(mockDialog.open(anything(), anything())).once();
+            verify(mockDialog.open(anything())).once();
             verify(mockFetchOrganizationsService.refresh()).once();
         });
 
         it('cancelled', () => {
-            when(mockDialog.open(anything(), anything())).thenReturn({
+            when(mockDialog.open(anything())).thenReturn({
                 afterClosed: () => of(BaseDialogResponseStatus.Cancelled),
             } as MatDialogRef<any>);
             component.createOrganization();
-            verify(mockDialog.open(anything(), anything())).once();
+            verify(mockDialog.open(anything())).once();
             verify(mockFetchOrganizationsService.refresh()).never();
         });
     });

src/app/sections/organizations/organizations.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter } from 'rxjs/operators';
@@ -7,7 +7,6 @@ import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base
 import { FetchOrganizationsService } from '@dsh/app/shared/services/fetch-organizations';
 import { ignoreBeforeCompletion } from '@dsh/utils';
 
-import { DialogConfig, DIALOG_CONFIG } from '../tokens';
 import { CreateOrganizationDialogComponent } from './components/create-organization-dialog/create-organization-dialog.component';
 
 @UntilDestroy()
@@ -23,11 +22,7 @@ export class OrganizationsComponent implements OnInit {
     isLoading$ = this.fetchOrganizationsService.doSearchAction$;
     lastUpdated$ = this.fetchOrganizationsService.lastUpdated$;
 
-    constructor(
-        private fetchOrganizationsService: FetchOrganizationsService,
-        private dialog: MatDialog,
-        @Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig
-    ) {}
+    constructor(private fetchOrganizationsService: FetchOrganizationsService, private dialog: MatDialog) {}
 
     ngOnInit() {
         this.fetchOrganizationsService.search();
@@ -36,10 +31,7 @@ export class OrganizationsComponent implements OnInit {
     @ignoreBeforeCompletion
     createOrganization() {
         return this.dialog
-            .open<CreateOrganizationDialogComponent, void, BaseDialogResponseStatus>(
-                CreateOrganizationDialogComponent,
-                this.dialogConfig.medium
-            )
+            .open<CreateOrganizationDialogComponent, void, BaseDialogResponseStatus>(CreateOrganizationDialogComponent)
             .afterClosed()
             .pipe(
                 filter((r) => r === BaseDialogResponseStatus.Success),

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

@@ -51,7 +51,6 @@ export class HoldDetailsComponent {
             .open(CancelHoldComponent, {
                 data,
                 width: '450px',
-                disableClose: true,
             })
             .afterClosed()
             .subscribe((isChanged) => isChanged && this.holdAction.emit(true));
@@ -68,7 +67,6 @@ export class HoldDetailsComponent {
             .open(ConfirmHoldComponent, {
                 data,
                 width: '450px',
-                disableClose: true,
             })
             .afterClosed()
             .subscribe((isChanged) => isChanged && this.holdAction.emit(true));

src/app/sections/payment-details/refunds/refunds.service.ts

@@ -28,7 +28,6 @@ export class RefundsService extends PartialFetcher<RefundSearchResult, RefundsSe
                     maxRefundAmount,
                 } as CreateRefundData,
                 width: '450px',
-                disableClose: true,
             })
             .afterClosed()
             .subscribe((success) => {

src/app/sections/payment-section/integrations/shops/shop-creation/shop-creation.service.spec.ts

@@ -54,9 +54,6 @@ describe('CreateShopService', () => {
                 mockMatDialog.open(
                     CreateShopDialogComponent,
                     deepEqual({
-                        width: '552px',
-                        disableClose: true,
-                        autoFocus: false,
                         data: {
                             realm: PaymentInstitutionRealm.Test,
                         },
@@ -77,9 +74,6 @@ describe('CreateShopService', () => {
                 mockMatDialog.open(
                     CreateShopDialogComponent,
                     deepEqual({
-                        width: '552px',
-                        disableClose: true,
-                        autoFocus: false,
                         data: {
                             realm: PaymentInstitutionRealm.Test,
                         },

src/app/sections/payment-section/integrations/shops/shop-creation/shop-creation.service.ts

@@ -14,12 +14,7 @@ export class ShopCreationService {
 
     createShop(config: CreateShopDialogConfig): void {
         this.dialog
-            .open<CreateShopDialogComponent, CreateShopDialogConfig>(CreateShopDialogComponent, {
-                width: '552px',
-                disableClose: true,
-                autoFocus: false,
-                data: config,
-            })
+            .open<CreateShopDialogComponent, CreateShopDialogConfig>(CreateShopDialogComponent, { data: config })
             .afterClosed()
             .pipe(
                 take(1),

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

@@ -22,11 +22,7 @@ export class CreateWebhookService {
                 takeUntil(this.destroy$),
                 switchMap(() =>
                     this.dialog
-                        .open(CreateWebhookDialogComponent, {
-                            width: '552px',
-                            disableClose: true,
-                            autoFocus: false,
-                        })
+                        .open(CreateWebhookDialogComponent)
                         .afterClosed()
                         .pipe(filter((r) => r === 'created'))
                 )

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

@@ -79,8 +79,6 @@ describe('CreateInvoiceService', () => {
                     CreateInvoiceDialogComponent,
                     deepEqual({
                         width: '720px',
-                        maxHeight: '90vh',
-                        disableClose: true,
                         data: [],
                     })
                 )
@@ -103,8 +101,6 @@ describe('CreateInvoiceService', () => {
                     CreateInvoiceDialogComponent,
                     deepEqual({
                         width: '720px',
-                        maxHeight: '90vh',
-                        disableClose: true,
                         data: [],
                     })
                 )

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

@@ -30,8 +30,6 @@ export class CreateInvoiceService {
                     this.dialog
                         .open<CreateInvoiceDialogComponent, Shop[]>(CreateInvoiceDialogComponent, {
                             width: '720px',
-                            maxHeight: '90vh',
-                            disableClose: true,
                             data: shops,
                         })
                         .afterClosed()

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

@@ -75,8 +75,6 @@ describe('CancelInvoiceService', () => {
                     CancelInvoiceDialogComponent,
                     deepEqual({
                         width: '720px',
-                        maxHeight: '90vh',
-                        disableClose: true,
                     })
                 )
             ).thenReturn(instance(mockDialogRef));
@@ -99,8 +97,6 @@ describe('CancelInvoiceService', () => {
                     CancelInvoiceDialogComponent,
                     deepEqual({
                         width: '720px',
-                        maxHeight: '90vh',
-                        disableClose: true,
                     })
                 )
             ).once();

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

@@ -23,8 +23,6 @@ export class CancelInvoiceService {
         this.dialog
             .open(CancelInvoiceDialogComponent, {
                 width: '720px',
-                maxHeight: '90vh',
-                disableClose: true,
             })
             .afterClosed()
             .pipe(

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/create-payment-link/create-payment-link.service.spec.ts

@@ -41,8 +41,6 @@ describe('CreatePaymentLinkService', () => {
                     CreatePaymentLinkDialogComponent,
                     deepEqual({
                         width: '720px',
-                        maxHeight: '90vh',
-                        disableClose: true,
                     })
                 )
             ).thenReturn(instance(mockDialogRef));
@@ -63,8 +61,6 @@ describe('CreatePaymentLinkService', () => {
                     CreatePaymentLinkDialogComponent,
                     deepEqual({
                         width: '720px',
-                        maxHeight: '90vh',
-                        disableClose: true,
                         data: config,
                     })
                 )

src/app/sections/payment-section/operations/invoices/invoices-list/invoice-details/create-payment-link/create-payment-link.service.ts

@@ -13,8 +13,6 @@ export class CreatePaymentLinkService {
             CreatePaymentLinkDialogComponent,
             {
                 width: '720px',
-                maxHeight: '90vh',
-                disableClose: true,
                 data: config,
             }
         );

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

@@ -75,8 +75,6 @@ describe('FulfillInvoiceService', () => {
                     FulfillInvoiceDialogComponent,
                     deepEqual({
                         width: '720px',
-                        maxHeight: '90vh',
-                        disableClose: true,
                     })
                 )
             ).thenReturn(instance(mockDialogRef));
@@ -99,8 +97,6 @@ describe('FulfillInvoiceService', () => {
                     FulfillInvoiceDialogComponent,
                     deepEqual({
                         width: '720px',
-                        maxHeight: '90vh',
-                        disableClose: true,
                     })
                 )
             ).once();

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

@@ -23,8 +23,6 @@ export class FulfillInvoiceService {
         this.dialog
             .open(FulfillInvoiceDialogComponent, {
                 width: '720px',
-                maxHeight: '90vh',
-                disableClose: true,
             })
             .afterClosed()
             .pipe(

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

@@ -1,24 +1,18 @@
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 
-import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
-
 import { DialogFiltersComponent } from './components/dialog-filters/dialog-filters.component';
 import { AdditionalFilters } from './types/additional-filters';
 
 @Injectable()
 export class AdditionalFiltersService {
-    constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
+    constructor(private dialog: MatDialog) {}
 
     openFiltersDialog(data: AdditionalFilters): Observable<AdditionalFilters> {
         return this.dialog
-            .open<DialogFiltersComponent, AdditionalFilters>(DialogFiltersComponent, {
-                panelClass: 'fill-bleed-dialog',
-                ...this.dialogConfig.medium,
-                data,
-            })
+            .open<DialogFiltersComponent, AdditionalFilters>(DialogFiltersComponent, { data })
             .afterClosed()
             .pipe(take(1));
     }

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/cancel-hold/cancel-hold.service.spec.ts

@@ -2,8 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { deepEqual, instance, mock, verify, when } from 'ts-mockito';
 
-import { DEFAULT_DIALOG_CONFIG, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
-
 import { CancelHoldService } from './cancel-hold.service';
 import { CancelHoldDialogComponent } from './components/cancel-hold-dialog/cancel-hold-dialog.component';
 import { CancelHoldDialogData } from './types/cancel-hold-dialog-data';
@@ -22,10 +20,6 @@ describe('CancelHoldService', () => {
         TestBed.configureTestingModule({
             providers: [
                 CancelHoldService,
-                {
-                    provide: DIALOG_CONFIG,
-                    useValue: DEFAULT_DIALOG_CONFIG,
-                },
                 {
                     provide: MatDialog,
                     useFactory: () => instance(mockMatDialog),
@@ -50,7 +44,6 @@ describe('CancelHoldService', () => {
                 mockMatDialog.open(
                     CancelHoldDialogComponent,
                     deepEqual({
-                        ...DEFAULT_DIALOG_CONFIG.medium,
                         data,
                     })
                 )
@@ -62,7 +55,6 @@ describe('CancelHoldService', () => {
                 mockMatDialog.open(
                     CancelHoldDialogComponent,
                     deepEqual({
-                        ...DEFAULT_DIALOG_CONFIG.medium,
                         data,
                     })
                 )

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/cancel-hold/cancel-hold.service.ts

@@ -1,8 +1,7 @@
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 
-import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
 import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base-dialog';
 
 import { CancelHoldDialogComponent } from './components/cancel-hold-dialog/cancel-hold-dialog.component';
@@ -10,12 +9,11 @@ import { CancelHoldDialogData } from './types/cancel-hold-dialog-data';
 
 @Injectable()
 export class CancelHoldService {
-    constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
+    constructor(private dialog: MatDialog) {}
 
     openDialog(data: CancelHoldDialogData): Observable<BaseDialogResponseStatus> {
         return this.dialog
             .open<CancelHoldDialogComponent, CancelHoldDialogData>(CancelHoldDialogComponent, {
-                ...this.dialogConfig.medium,
                 data,
             })
             .afterClosed();

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/create-hold/create-hold.service.spec.ts

@@ -2,8 +2,6 @@ import { TestBed } from '@angular/core/testing';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { deepEqual, instance, mock, verify, when } from 'ts-mockito';
 
-import { DEFAULT_DIALOG_CONFIG, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
-
 import { CancelHoldDialogComponent } from '../cancel-hold/components/cancel-hold-dialog/cancel-hold-dialog.component';
 import { CreateHoldDialogComponent } from './components/create-hold-dialog/create-hold-dialog.component';
 import { CreateHoldService } from './create-hold.service';
@@ -23,10 +21,6 @@ describe('CreateHoldService', () => {
         TestBed.configureTestingModule({
             providers: [
                 CreateHoldService,
-                {
-                    provide: DIALOG_CONFIG,
-                    useValue: DEFAULT_DIALOG_CONFIG,
-                },
                 {
                     provide: MatDialog,
                     useFactory: () => instance(mockMatDialog),
@@ -53,7 +47,6 @@ describe('CreateHoldService', () => {
                 mockMatDialog.open(
                     CreateHoldDialogComponent,
                     deepEqual({
-                        ...DEFAULT_DIALOG_CONFIG.medium,
                         data,
                     })
                 )
@@ -65,7 +58,6 @@ describe('CreateHoldService', () => {
                 mockMatDialog.open(
                     CancelHoldDialogComponent,
                     deepEqual({
-                        ...DEFAULT_DIALOG_CONFIG.medium,
                         data,
                     })
                 )

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/hold-details/create-hold/create-hold.service.ts

@@ -1,8 +1,7 @@
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 
-import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
 import { BaseDialogResponseStatus } from '@dsh/app/shared/components/dialog/base-dialog';
 
 import { CreateHoldDialogComponent } from './components/create-hold-dialog/create-hold-dialog.component';
@@ -10,14 +9,11 @@ import { CreateHoldDialogData } from './types/create-hold-dialog-data';
 
 @Injectable()
 export class CreateHoldService {
-    constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
+    constructor(private dialog: MatDialog) {}
 
     openDialog(data: CreateHoldDialogData): Observable<BaseDialogResponseStatus> {
         return this.dialog
-            .open<CreateHoldDialogComponent, CreateHoldDialogData>(CreateHoldDialogComponent, {
-                ...this.dialogConfig.medium,
-                data,
-            })
+            .open<CreateHoldDialogComponent, CreateHoldDialogData>(CreateHoldDialogComponent, { data })
             .afterClosed();
     }
 }

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/create-refund/create-refund.service.spec.ts

@@ -4,8 +4,6 @@ import { cold } from 'jasmine-marbles';
 import { of } from 'rxjs';
 import { deepEqual, instance, mock, when } from 'ts-mockito';
 
-import { DIALOG_CONFIG } from '@dsh/app/sections/tokens';
-
 import { CreateRefundDialogComponent } from './components/create-refund-dialog/create-refund-dialog.component';
 import { CreateRefundService } from './create-refund.service';
 import { CreateRefundDialogResponse } from './types/create-refund-dialog-response';
@@ -25,14 +23,6 @@ describe('CreateRefundService', () => {
         TestBed.configureTestingModule({
             providers: [
                 CreateRefundService,
-                {
-                    provide: DIALOG_CONFIG,
-                    useValue: {
-                        medium: {
-                            width: '360px',
-                        },
-                    },
-                },
                 {
                     provide: MatDialog,
                     useFactory: () => instance(mockMatDialog),
@@ -60,7 +50,6 @@ describe('CreateRefundService', () => {
                 mockMatDialog.open(
                     CreateRefundDialogComponent,
                     deepEqual({
-                        width: '360px',
                         data,
                     })
                 )

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/create-refund/create-refund.service.ts

@@ -1,23 +1,18 @@
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 
-import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
-
 import { CreateRefundDialogComponent } from './components/create-refund-dialog/create-refund-dialog.component';
 import { CreateRefundDialogData } from './types/create-refund-dialog-data';
 import { CreateRefundDialogResponse } from './types/create-refund-dialog-response';
 
 @Injectable()
 export class CreateRefundService {
-    constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
+    constructor(private dialog: MatDialog) {}
 
     createRefund(data: CreateRefundDialogData): Observable<CreateRefundDialogResponse> {
         return this.dialog
-            .open<CreateRefundDialogComponent, CreateRefundDialogData>(CreateRefundDialogComponent, {
-                ...this.dialogConfig.medium,
-                data,
-            })
+            .open<CreateRefundDialogComponent, CreateRefundDialogData>(CreateRefundDialogComponent, { data })
             .afterClosed();
     }
 }

src/app/sections/payment-section/payouts/create-payout-report/create-payout-report.service.ts

@@ -25,8 +25,6 @@ export class CreatePayoutReportService {
                 switchMap((payout) =>
                     this.dialog
                         .open(CreatePayoutReportDialogComponent, {
-                            width: '552px',
-                            disableClose: true,
                             data: {
                                 payout,
                             },

src/app/sections/payment-section/payouts/create-payout/create-payout.service.ts

@@ -27,8 +27,6 @@ export class CreatePayoutService {
                 switchMap(() =>
                     this.dialog
                         .open(CreatePayoutDialogComponent, {
-                            width: '552px',
-                            disableClose: true,
                             data: {
                                 realm,
                             },

src/app/sections/payment-section/reports/create-report/create-report.service.ts

@@ -27,8 +27,6 @@ export class CreateReportService {
                 switchMap(() =>
                     this.dialog
                         .open(CreateReportDialogComponent, {
-                            width: '552px',
-                            disableClose: true,
                             data: {
                                 realm,
                             },

src/app/sections/sections.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { DEBOUNCE_FETCHER_ACTION_TIME, DEFAULT_FETCHER_DEBOUNCE_ACTION_TIME } from '@rbkmoney/partial-fetcher';
 
 import { ShopModule } from '@dsh/api/shop';
@@ -22,6 +23,7 @@ import {
     exports: [SectionsComponent],
     providers: [
         { provide: SEARCH_LIMIT, useValue: DEFAULT_SEARCH_LIMIT },
+        { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: DEFAULT_DIALOG_CONFIG.medium },
         { provide: DIALOG_CONFIG, useValue: DEFAULT_DIALOG_CONFIG },
         { provide: DEBOUNCE_FETCHER_ACTION_TIME, useValue: DEFAULT_FETCHER_DEBOUNCE_ACTION_TIME },
         { provide: CHARTS_THEME, useValue: DEFAULT_CHARTS_THEME },

src/app/sections/tokens.ts

@@ -9,9 +9,11 @@ export const DEFAULT_SEARCH_LIMIT = 10;
 export type DialogConfig = { small: MatDialogConfig; medium: MatDialogConfig; large: MatDialogConfig };
 export const DIALOG_CONFIG = new InjectionToken<DialogConfig>('dialogConfig');
 const BASE_CONFIG: MatDialogConfig = {
+    ...new MatDialogConfig(),
     maxHeight: '90vh',
     disableClose: true,
     autoFocus: false,
+    panelClass: 'dsh-dialog-pane',
 };
 export const DEFAULT_DIALOG_CONFIG: DialogConfig = {
     small: { ...BASE_CONFIG, width: '360px' },

src/app/sections/wallet-section/deposits/deposits-filters/additional-filters/additional-filters.service.ts

@@ -1,24 +1,18 @@
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 
-import { DialogConfig, DIALOG_CONFIG } from '@dsh/app/sections/tokens';
-
 import { DialogFiltersComponent } from './components/dialog-filters/dialog-filters.component';
 import { AdditionalFilters } from './types/additional-filters';
 
 @Injectable()
 export class AdditionalFiltersService {
-    constructor(@Inject(DIALOG_CONFIG) private dialogConfig: DialogConfig, private dialog: MatDialog) {}
+    constructor(private dialog: MatDialog) {}
 
     openFiltersDialog(data: AdditionalFilters): Observable<AdditionalFilters> {
         return this.dialog
-            .open<DialogFiltersComponent, AdditionalFilters>(DialogFiltersComponent, {
-                panelClass: 'fill-bleed-dialog',
-                ...this.dialogConfig.medium,
-                data,
-            })
+            .open<DialogFiltersComponent, AdditionalFilters>(DialogFiltersComponent, { data })
             .afterClosed()
             .pipe(take(1));
     }

src/app/sections/wallet-section/integrations/webhooks/create-webhook/create-webhook.service.ts

@@ -26,9 +26,6 @@ export class CreateWebhookService {
                 switchMap((identities) =>
                     this.dialog
                         .open(CreateWebhookDialogComponent, {
-                            width: '552px',
-                            disableClose: true,
-                            autoFocus: false,
                             data: identities,
                         })
                         .afterClosed()

src/app/shared/components/dialog/base-dialog/base-dialog.component.scss

@@ -1,3 +1,9 @@
+@import '~@angular/material/theming';
+
+$base-padding: 24px;
+$max-height-mobile: 100vh;
+$max-height-desktop: 90vh;
+
 :host {
     display: flex;
     flex-direction: column;
@@ -5,6 +11,12 @@
 }
 
 .base-dialog {
+    max-height: calc(#{$max-height-desktop} - #{$base-padding * 2}) !important;
+
+    @media screen and ($mat-small) {
+        max-height: calc(#{$max-height-mobile} - #{$base-padding * 2}) !important;
+    }
+
     mat-divider {
         // to remove visually padding
         margin-left: -24px;
@@ -30,8 +42,6 @@
         // to make right visual padding
         margin: 0 -24px;
         padding: 20px 24px;
-        // to make scroll only in content block
-        max-height: 65vh;
         overflow: auto;
     }
 

src/styles/app/_style.scss

@@ -1,5 +0,0 @@
-@import 'styles/body';
-
-@mixin app-style() {
-    @include app-body();
-}

src/styles/core.scss

@@ -1,21 +1,21 @@
 @import '~@angular/material/theming';
 
-@import 'app/typography';
-@import 'app/style';
+@import 'dsh/typography';
+@import 'dsh/style';
 
-@import 'material/typography';
-@import 'material/style';
+@import 'mat/typography';
+@import 'mat/style';
 
-@mixin dsh-typography($config) {
+@mixin typography($config) {
     @include mat-core($config);
     @include mat-typography($config);
-    @include app-typography($config);
+    @include dsh-typography($config);
 }
 
-@mixin dsh-core() {
-    @include dsh-typography(dsh-typography-config());
+@mixin core() {
+    @include typography(dsh-typography-config());
     @include mat-style();
-    @include app-style();
+    @include dsh-style();
 }
 
-@include dsh-core();
+@include core();

src/styles/dsh/_style.scss

@@ -0,0 +1,7 @@
+@import 'styles/dsh-body';
+@import 'styles/dsh-dialog-pane';
+
+@mixin dsh-style() {
+    @include dsh-body();
+    @include dsh-dialog-pane();
+}

src/styles/dsh/_theme.scss

@@ -47,7 +47,7 @@
 @import '../../app/sections/payment-section/balances/balances-theme';
 @import '../../app/feedback/feedback-theme';
 
-@mixin app-theme($theme) {
+@mixin dsh-theme($theme) {
     @include dsh-home-theme($theme);
     @include dsh-actionbar-theme($theme);
     @include dsh-dropdown-theme($theme);

src/styles/dsh/_typography.scss

@@ -1,4 +1,4 @@
-@import 'styles/base';
+@import 'styles/dsh-base-typography';
 
 @import '../../components/form-controls/range-datepicker/range-datepicker-theme';
 @import '../../components/buttons/button/button-theme';
@@ -30,7 +30,7 @@
 @import '../../app/sections/payment-details/payment-details-theme';
 @import '../../app/sections/payment-section/balances/balances-theme';
 
-@mixin app-typography($config) {
+@mixin dsh-typography($config) {
     @include dsh-base-typography($config);
     @include dsh-button-typography($config);
     @include dsh-state-nav-typography($config);

src/styles/dsh/styles/_dsh-body.scss

@@ -1,4 +1,4 @@
-@mixin app-body() {
+@mixin dsh-body() {
     body {
         margin: 0;
         transition: background 200ms ease-in-out;

src/styles/dsh/styles/_dsh-dialog-pane.scss

@@ -0,0 +1,16 @@
+@import '~@angular/material/theming';
+
+@mixin dsh-dialog-pane() {
+    .dsh-dialog-pane {
+        @media screen and ($mat-small) {
+            min-width: 100%;
+            min-height: 100%;
+            width: 100%;
+            height: 100%;
+
+            .mat-dialog-container {
+                border-radius: 0 !important;
+            }
+        }
+    }
+}

src/styles/mat/_style.scss

@@ -4,7 +4,6 @@
 @import 'styles/mat-snack-bar';
 @import 'styles/mat-form-field';
 @import 'styles/mat-checkbox';
-@import 'styles/mat-dialog-container';
 @import 'styles/mat-drawer-container';
 
 @mixin mat-style() {
@@ -14,6 +13,5 @@
     @include mat-snack-bar-override();
     @include mat-form-field-infix-override();
     @include mat-checkbox-override();
-    @include mat-dialog-container-override();
     @include mat-drawer-container-override();
 }

src/styles/material/styles/_mat-dialog-container.scss

@@ -1,6 +0,0 @@
-@mixin mat-dialog-container-override() {
-    .fill-bleed-dialog .mat-dialog-container {
-        display: flex;
-        flex-direction: column;
-    }
-}

src/styles/themes/_theme.scss

@@ -2,10 +2,10 @@
 
 @import '../utils/map-get-strict';
 
-@import '../app/theme';
-@import '../material/theme';
+@import '../dsh/theme';
+@import '../mat/theme';
 
-@mixin dsh-theme($config, $background, $foreground) {
+@mixin theme($config, $background, $foreground) {
     $basic-theme: ();
 
     @if map-get($config, is-dark) == true {
@@ -51,6 +51,6 @@
     body.#{map-get($theme, name)} {
         @include angular-material-theme($theme);
         @include mat-theme($theme);
-        @include app-theme($theme);
+        @include dsh-theme($theme);
     }
 }

src/styles/themes/main.scss

@@ -32,4 +32,4 @@ $config: (
     warn-base: mat-color(mat-palette($dsh-warn), 300)
 );
 
-@include dsh-theme($config, $background, $foreground);
+@include theme($config, $background, $foreground);

src/styles/themes/persian-green.scss

@@ -32,4 +32,4 @@ $config: (
     warn-base: mat-color(mat-palette($dsh-warn), 300)
 );
 
-@include dsh-theme($config, $background, $foreground);
+@include theme($config, $background, $foreground);