fix: (Core) remove DIALOG_CONFIG and DIALOG_REF and make DialogConfig…

… and DialogRef injectable (#4108) BREAKING CHANGE: removed DIALOG_CONFIG and DIALOG_REF and made DialogConfig and DialogRef classes injectable
SAP · Dec 17, 2020 · 356b3bb · 356b3bb
1 parent 3913681
commit 356b3bb
Show file tree

Hide file tree

Showing 34 changed files with 88 additions and 101 deletions.
diff --git a/...s/src/app/core/component-docs/dialog/examples/component-based/dialog-example.component.ts b/...s/src/app/core/component-docs/dialog/examples/component-based/dialog-example.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { DIALOG_REF, DialogRef } from '@fundamental-ngx/core';
+import { DialogRef } from '@fundamental-ngx/core';
 
 @Component({
     template: `
@@ -45,5 +45,5 @@ import { DIALOG_REF, DialogRef } from '@fundamental-ngx/core';
     `
 })
 export class DialogExampleComponent {
-    constructor(@Inject(DIALOG_REF) public dialogRef: DialogRef) {}
+    constructor(public dialogRef: DialogRef) {}
 }
diff --git a/...app/core/component-docs/dialog/examples/stacked-dialogs/first-dialog-example.component.ts b/...app/core/component-docs/dialog/examples/stacked-dialogs/first-dialog-example.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { DIALOG_REF, DialogConfig, DialogRef, DialogService } from '@fundamental-ngx/core';
+import { DialogConfig, DialogRef, DialogService } from '@fundamental-ngx/core';
 import { SecondDialogExampleComponent } from './second-dialog-example.component';
 
 @Component({
@@ -32,7 +32,7 @@ import { SecondDialogExampleComponent } from './second-dialog-example.component'
     `
 })
 export class FirstDialogExampleComponent {
-    constructor(@Inject(DIALOG_REF) public dialogRef: DialogRef, public _dialogService: DialogService) {}
+    constructor(public dialogRef: DialogRef, public _dialogService: DialogService) {}
 
     openDialog(): void {
         this._dialogService.open(SecondDialogExampleComponent, { responsivePadding: true });

diff --git a/...pp/core/component-docs/dialog/examples/stacked-dialogs/second-dialog-example.component.ts b/...pp/core/component-docs/dialog/examples/stacked-dialogs/second-dialog-example.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { DIALOG_REF, DialogRef } from '@fundamental-ngx/core';
+import { DialogRef } from '@fundamental-ngx/core';
 
 @Component({
     template: `
@@ -31,5 +31,5 @@ import { DIALOG_REF, DialogRef } from '@fundamental-ngx/core';
     `
 })
 export class SecondDialogExampleComponent {
-    constructor(@Inject(DIALOG_REF) public dialogRef: DialogRef) {}
+    constructor(public dialogRef: DialogRef) {}
 }
diff --git a/...mponent-docs/table/examples/table-custom-columns-example/table-custom-dialog.component.ts b/...mponent-docs/table/examples/table-custom-columns-example/table-custom-dialog.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { DIALOG_REF, DialogRef } from '@fundamental-ngx/core';
+import { DialogRef } from '@fundamental-ngx/core';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { DisplayedColumn } from './table-custom-columns-example.component';
 
@@ -95,7 +95,7 @@ export class TableCustomDialogComponent {
     allSelected = false;
     showError = false;
 
-    constructor(@Inject(DIALOG_REF) public dialogRef: DialogRef) {
+    constructor(public dialogRef: DialogRef) {
         this.columns = this.dialogRef.data.columns;
         this.allSelected = this._areAllSelected();
     }

diff --git a/libs/core/src/lib/dialog/dialog-body/dialog-body.component.spec.ts b/libs/core/src/lib/dialog/dialog-body/dialog-body.component.spec.ts
@@ -1,8 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DialogBodyComponent } from './dialog-body.component';
-import { DIALOG_CONFIG, DialogConfig } from '../utils/dialog-config.class';
-import { DIALOG_REF, DialogRef } from '../utils/dialog-ref.class';
+import { DialogConfig } from '../utils/dialog-config.class';
+import { DialogRef } from '../utils/dialog-ref.class';
 import { BusyIndicatorModule } from '../../busy-indicator/busy-indicator.module';
 
 describe('DialogBodyComponent', () => {
@@ -13,10 +13,7 @@ describe('DialogBodyComponent', () => {
         TestBed.configureTestingModule({
             imports: [BusyIndicatorModule],
             declarations: [DialogBodyComponent],
-            providers: [
-                { provide: DIALOG_CONFIG, useClass: DialogConfig },
-                { provide: DIALOG_REF, useClass: DialogRef }
-            ]
+            providers: [DialogConfig, DialogRef]
         }).compileComponents();
     }));
 

diff --git a/libs/core/src/lib/dialog/dialog-body/dialog-body.component.ts b/libs/core/src/lib/dialog/dialog-body/dialog-body.component.ts
@@ -1,6 +1,6 @@
-import { Component, Inject, Optional } from '@angular/core';
-import { DIALOG_CONFIG, DialogConfig } from '../utils/dialog-config.class';
-import { DIALOG_REF, DialogRef } from '../../dialog/utils/dialog-ref.class';
+import { Component, Optional } from '@angular/core';
+import { DialogConfig } from '../utils/dialog-config.class';
+import { DialogRef } from '../../dialog/utils/dialog-ref.class';
 
 /**
  * Applies fundamental layout and styling to the contents of a dialog body.
@@ -23,7 +23,7 @@ export class DialogBodyComponent {
 
     /** @hidden */
     constructor(
-        @Optional() @Inject(DIALOG_CONFIG) public dialogConfig: DialogConfig,
-        @Optional() @Inject(DIALOG_REF) public dialogRef: DialogRef
+        @Optional() public dialogConfig: DialogConfig,
+        @Optional() public dialogRef: DialogRef
     ) {}
 }
diff --git a/libs/core/src/lib/dialog/dialog-container/dialog-container.component.spec.ts b/libs/core/src/lib/dialog/dialog-container/dialog-container.component.spec.ts
@@ -3,8 +3,8 @@ import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/t
 import { Component } from '@angular/core';
 
 import { DialogContainerComponent } from '../dialog-container/dialog-container.component';
-import { DIALOG_CONFIG, DialogConfig } from '../utils/dialog-config.class';
-import { DIALOG_REF, DialogRef } from '../utils/dialog-ref.class';
+import { DialogConfig } from '../utils/dialog-config.class';
+import { DialogRef } from '../utils/dialog-ref.class';
 import { DialogDefaultContent } from '../utils/dialog-default-content.class';
 import { whenStable } from '../../utils/tests';
 
@@ -25,8 +25,8 @@ describe('DialogContainerComponent', () => {
         TestBed.configureTestingModule({
             declarations: [DialogContainerComponent, ContentTestComponent],
             providers: [
-                { provide: DIALOG_CONFIG, useValue: dialogConfig },
-                { provide: DIALOG_REF, useClass: DialogRef }
+                { provide: DialogConfig, useValue: dialogConfig },
+                { provide: DialogRef, useClass: DialogRef }
             ]
         }).overrideModule(BrowserDynamicTestingModule, {
             set: { entryComponents: [ContentTestComponent] }

diff --git a/libs/core/src/lib/dialog/dialog-container/dialog-container.component.ts b/libs/core/src/lib/dialog/dialog-container/dialog-container.component.ts
@@ -4,15 +4,14 @@ import {
     Component,
     ComponentFactoryResolver,
     ElementRef,
-    Inject,
     Input,
     TemplateRef,
     Type,
     ViewChild,
     ViewContainerRef
 } from '@angular/core';
-import { DIALOG_REF, DialogRef } from '../utils/dialog-ref.class';
-import { DIALOG_CONFIG, DialogConfig } from '../utils/dialog-config.class';
+import { DialogRef } from '../utils/dialog-ref.class';
+import { DialogConfig } from '../utils/dialog-config.class';
 import { applyCssClass } from '../../utils/decorators/apply-css-class.decorator';
 import { CssClassBuilder } from '../../utils/interfaces/css-class-builder.interface';
 import { DynamicComponentContainer } from '../../utils/dynamic-component/dynamic-component-container';
@@ -42,8 +41,8 @@ export class DialogContainerComponent extends DynamicComponentContainer<DialogCo
 
     /** @hidden */
     constructor(
-        @Inject(DIALOG_CONFIG) public dialogConfig: DialogConfig,
-        @Inject(DIALOG_REF) private _dialogRef: DialogRef,
+        public dialogConfig: DialogConfig,
+        private _dialogRef: DialogRef,
         elementRef: ElementRef,
         componentFactoryResolver: ComponentFactoryResolver,
         private _changeDetectorRef: ChangeDetectorRef

diff --git a/libs/core/src/lib/dialog/dialog-default/dialog-default.component.spec.ts b/libs/core/src/lib/dialog/dialog-default/dialog-default.component.spec.ts
@@ -5,7 +5,7 @@ import { DialogDecisiveButtonDirective } from '../directives/dialog-decisive-but
 import { DialogDefaultContent } from '../utils/dialog-default-content.class';
 import { DialogHeaderComponent } from '../dialog-header/dialog-header.component';
 import { DialogCloseButtonComponent } from '../dialog-close-button/dialog-close-button.component';
-import { DIALOG_CONFIG, DialogConfig } from '../utils/dialog-config.class';
+import { DialogConfig } from '../utils/dialog-config.class';
 
 describe('DefaultDialogComponent', () => {
     let component: DialogDefaultComponent;
@@ -21,7 +21,7 @@ describe('DefaultDialogComponent', () => {
                 DialogDecisiveButtonDirective,
                 DialogHeaderComponent
             ],
-            providers: [{ provide: DIALOG_CONFIG, useClass: DialogConfig }]
+            providers: [DialogConfig]
         }).compileComponents();
     });
 

diff --git a/libs/core/src/lib/dialog/dialog-footer/dialog-footer.component.spec.ts b/libs/core/src/lib/dialog/dialog-footer/dialog-footer.component.spec.ts
@@ -4,7 +4,7 @@ import { DialogFooterComponent } from './dialog-footer.component';
 import { Component, Type, ViewChild } from '@angular/core';
 import { BarModule } from '../../bar/bar.module';
 import { TemplateModule } from '../../utils/directives/template/template.module';
-import { DIALOG_CONFIG, DialogConfig } from '../utils/dialog-config.class';
+import { DialogConfig } from '../utils/dialog-config.class';
 
 @Component({
     template: `
@@ -37,7 +37,7 @@ describe('DialogFooterComponent', () => {
         TestBed.configureTestingModule({
             declarations: [DialogFooterComponent, CustomFooterTestComponent, DefaultFooterTestComponent],
             imports: [BarModule, TemplateModule],
-            providers: [{ provide: DIALOG_CONFIG, useClass: DialogConfig }]
+            providers: [DialogConfig]
         });
     }));
 

diff --git a/libs/core/src/lib/dialog/dialog-footer/dialog-footer.component.ts b/libs/core/src/lib/dialog/dialog-footer/dialog-footer.component.ts
@@ -1,5 +1,5 @@
-import { AfterContentInit, Component, Inject, Optional } from '@angular/core';
-import { DIALOG_CONFIG, DialogConfig } from '../utils/dialog-config.class';
+import { AfterContentInit, Component, Optional } from '@angular/core';
+import { DialogConfig } from '../utils/dialog-config.class';
 import { DialogFooterBase } from '../base/dialog-footer-base.class';
 
 /**
@@ -21,7 +21,7 @@ import { DialogFooterBase } from '../base/dialog-footer-base.class';
 export class DialogFooterComponent extends DialogFooterBase implements AfterContentInit {
 
     /** @hidden */
-    constructor(@Optional() @Inject(DIALOG_CONFIG) public dialogConfig: DialogConfig) {
+    constructor(@Optional() public dialogConfig: DialogConfig) {
         super();
         this.dialogConfig = this.dialogConfig || {};
     }

diff --git a/libs/core/src/lib/dialog/dialog-header/dialog-header.component.spec.ts b/libs/core/src/lib/dialog/dialog-header/dialog-header.component.spec.ts
@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DialogHeaderComponent } from './dialog-header.component';
 import { Component, Type, ViewChild } from '@angular/core';
-import { DIALOG_CONFIG, DialogConfig } from '../utils/dialog-config.class';
+import { DialogConfig } from '../utils/dialog-config.class';
 import { TemplateModule } from '../../utils/directives/template/template.module';
 import { BarModule } from '../../bar/bar.module';
 
@@ -47,7 +47,7 @@ describe('DialogHeaderComponent', () => {
         TestBed.configureTestingModule({
             declarations: [DialogHeaderComponent, CustomHeaderTestComponent, DefaultHeaderTestComponent],
             imports: [BarModule, TemplateModule],
-            providers: [{ provide: DIALOG_CONFIG, useClass: DialogConfig }]
+            providers: [DialogConfig]
         });
     }));
 

diff --git a/libs/core/src/lib/dialog/dialog-header/dialog-header.component.ts b/libs/core/src/lib/dialog/dialog-header/dialog-header.component.ts
@@ -1,5 +1,5 @@
-import { AfterContentInit, ChangeDetectorRef, Component, Inject, Optional } from '@angular/core';
-import { DIALOG_CONFIG, DialogConfig } from '../utils/dialog-config.class';
+import { AfterContentInit, ChangeDetectorRef, Component, Optional } from '@angular/core';
+import { DialogConfig } from '../utils/dialog-config.class';
 import { DialogHeaderBase } from '../base/dialog-header-base.class';
 
 /**
@@ -20,7 +20,7 @@ export class DialogHeaderComponent extends DialogHeaderBase implements AfterCont
 
     /** @hidden */
     constructor(
-        @Optional() @Inject(DIALOG_CONFIG) public dialogConfig: DialogConfig,
+        @Optional() public dialogConfig: DialogConfig,
         changeDetectorRef: ChangeDetectorRef
     ) {
         super(changeDetectorRef);

diff --git a/libs/core/src/lib/dialog/dialog-service/dialog.service.ts b/libs/core/src/lib/dialog/dialog-service/dialog.service.ts
@@ -1,8 +1,8 @@
 import { Inject, Injectable, Injector, Optional, TemplateRef, Type } from '@angular/core';
 import { DialogContainerComponent } from '../dialog-container/dialog-container.component';
-import { DIALOG_CONFIG, DIALOG_DEFAULT_CONFIG, DialogConfig } from '../utils/dialog-config.class';
+import { DIALOG_DEFAULT_CONFIG, DialogConfig } from '../utils/dialog-config.class';
 import { DynamicComponentService } from '../../utils/dynamic-component/dynamic-component.service';
-import { DIALOG_REF, DialogRef } from '../utils/dialog-ref.class';
+import { DialogRef } from '../utils/dialog-ref.class';
 import { DialogBaseService } from '../base/dialog-base.service';
 import { DialogDefaultContent } from '../utils/dialog-default-content.class';
 
@@ -33,8 +33,8 @@ export class DialogService extends DialogBaseService<DialogContainerComponent> {
 
         const injector = Injector.create({
             providers: [
-                { provide: DIALOG_CONFIG, useValue: dialogConfig },
-                { provide: DIALOG_REF, useValue: dialogRef }
+                { provide: DialogConfig, useValue: dialogConfig },
+                { provide: DialogRef, useValue: dialogRef }
             ]
         });
 

diff --git a/libs/core/src/lib/dialog/dialog.component.spec.ts b/libs/core/src/lib/dialog/dialog.component.spec.ts
@@ -6,8 +6,8 @@ import { Component, NgModule, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { DIALOG_REF, DialogRef } from './utils/dialog-ref.class';
-import { DIALOG_CONFIG, DialogConfig } from './utils/dialog-config.class';
+import { DialogRef } from './utils/dialog-ref.class';
+import { DialogConfig } from './utils/dialog-config.class';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NavigationStart, Router, RouterEvent, RouterModule } from '@angular/router';
 import { Subject } from 'rxjs';
@@ -51,8 +51,8 @@ describe('DialogComponent', () => {
         TestBed.configureTestingModule({
             imports: [TestModule, RouterModule, RouterTestingModule],
             providers: [
-                { provide: DIALOG_REF, useValue: dialogRef },
-                { provide: DIALOG_CONFIG, useValue: dialogConfig },
+                { provide: DialogRef, useValue: dialogRef },
+                { provide: DialogConfig, useValue: dialogConfig },
                 { provide: Router, useValue: mockRouter }
             ]
         });
@@ -118,7 +118,7 @@ describe('DialogComponent', () => {
 
     it('should set custom position', () => {
         const customDialogConfig = { ...new DialogConfig(), position: { bottom: '100px', right: '50px' } };
-        setup([{ token: DIALOG_CONFIG, provider: { useValue: customDialogConfig } }]);
+        setup([{ token: DialogConfig, provider: { useValue: customDialogConfig } }]);
 
         expect(dialogComponent.dialogWindow.nativeElement.style.right).toEqual('50px');
         expect(dialogComponent.dialogWindow.nativeElement.style.bottom).toEqual('100px');
@@ -135,7 +135,7 @@ describe('DialogComponent', () => {
         };
         const customDialogConfig = { ...new DialogConfig(), ...customSize };
 
-        setup([{ token: DIALOG_CONFIG, provider: { useValue: customDialogConfig } }]);
+        setup([{ token: DialogConfig, provider: { useValue: customDialogConfig } }]);
 
         expect(dialogComponent.dialogWindow.nativeElement.style.width).toEqual(customSize.width);
         expect(dialogComponent.dialogWindow.nativeElement.style.height).toEqual(customSize.height);
@@ -151,22 +151,22 @@ describe('DialogComponent', () => {
             backdropClass: 'customBackdropClass',
             dialogPanelClass: 'customPanelClass'
         };
-        setup([{ token: DIALOG_CONFIG, provider: { useValue: customDialogConfig } }]);
+        setup([{ token: DialogConfig, provider: { useValue: customDialogConfig } }]);
 
         expect(fixture.nativeElement.querySelector('.fd-dialog')).toHaveClass('customBackdropClass');
         expect(fixture.nativeElement.querySelector('.fd-dialog__content')).toHaveClass('customPanelClass');
     });
 
     it('should display in mobile mode', () => {
         const customDialogConfig = { ...new DialogConfig(), mobile: true };
-        setup([{ token: DIALOG_CONFIG, provider: { useValue: customDialogConfig } }]);
+        setup([{ token: DialogConfig, provider: { useValue: customDialogConfig } }]);
 
         expect(fixture.nativeElement.querySelector('.fd-dialog__content')).toHaveClass('fd-dialog__content--mobile');
     });
 
     it('should display in mobile mode', () => {
         const customDialogConfig = { ...new DialogConfig(), fullScreen: true };
-        setup([{ token: DIALOG_CONFIG, provider: { useValue: customDialogConfig } }]);
+        setup([{ token: DialogConfig, provider: { useValue: customDialogConfig } }]);
 
         expect(fixture.nativeElement.querySelector('.fd-dialog__content')).toHaveClass(
             'fd-dialog__content--full-screen'
@@ -175,7 +175,7 @@ describe('DialogComponent', () => {
 
     it('should display in mobile mode with no stretch', () => {
         const customDialogConfig = { ...new DialogConfig(), mobileOuterSpacing: true };
-        setup([{ token: DIALOG_CONFIG, provider: { useValue: customDialogConfig } }]);
+        setup([{ token: DialogConfig, provider: { useValue: customDialogConfig } }]);
 
         expect(fixture.nativeElement.querySelector('.fd-dialog__content')).toHaveClass(
             'fd-dialog__content--no-mobile-stretch'
@@ -184,7 +184,7 @@ describe('DialogComponent', () => {
 
     it('should be draggable', () => {
         const customDialogConfig = { ...new DialogConfig(), draggable: true };
-        setup([{ token: DIALOG_CONFIG, provider: { useValue: customDialogConfig } }]);
+        setup([{ token: DialogConfig, provider: { useValue: customDialogConfig } }]);
 
         expect(fixture.nativeElement.querySelector('.fd-dialog__content')).toHaveClass(
             'fd-dialog__content--draggable-grab'
@@ -195,7 +195,7 @@ describe('DialogComponent', () => {
 
     it('should be resizable', () => {
         const customDialogConfig = { ...new DialogConfig(), resizable: true };
-        setup([{ token: DIALOG_CONFIG, provider: { useValue: customDialogConfig } }]);
+        setup([{ token: DialogConfig, provider: { useValue: customDialogConfig } }]);
 
         expect(fixture.nativeElement.querySelector('.fd-dialog__resize-handle')).toBeTruthy();
 
@@ -210,7 +210,7 @@ describe('DialogComponent', () => {
             ariaLabelledBy: 'customAriLabelledBy',
             ariaDescribedBy: 'customAriaDescribedBy'
         };
-        setup([{ token: DIALOG_CONFIG, provider: { useValue: customDialogConfig } }]);
+        setup([{ token: DialogConfig, provider: { useValue: customDialogConfig } }]);
 
         const dialogWindowEl = fixture.nativeElement.querySelector('.fd-dialog__content');
 

diff --git a/libs/core/src/lib/dialog/dialog.component.ts b/libs/core/src/lib/dialog/dialog.component.ts
@@ -17,11 +17,11 @@ import { Router } from '@angular/router';
 
 import { Subscription } from 'rxjs';
 import { dialogFadeNgIf } from './utils/dialog.animations';
-import { DIALOG_CONFIG, DialogConfig } from './utils/dialog-config.class';
+import { DialogConfig } from './utils/dialog-config.class';
 import { DialogHeaderComponent } from './dialog-header/dialog-header.component';
 import { DialogBodyComponent } from './dialog-body/dialog-body.component';
 import { DialogFooterComponent } from './dialog-footer/dialog-footer.component';
-import { DIALOG_REF, DialogRef } from './utils/dialog-ref.class';
+import { DialogRef } from './utils/dialog-ref.class';
 import { applyCssClass } from '../utils/decorators/apply-css-class.decorator';
 import { CssClassBuilder } from '../utils/interfaces/css-class-builder.interface';
 import { DialogBase } from './base/dialog-base.class';
@@ -113,8 +113,8 @@ export class DialogComponent extends DialogBase implements OnInit, OnChanges, Af
 
     /** @hidden */
     constructor(
-        @Optional() @Inject(DIALOG_CONFIG) public dialogConfig: DialogConfig,
-        @Optional() @Inject(DIALOG_REF) private _dialogRef: DialogRef,
+        @Optional() public dialogConfig: DialogConfig,
+        @Optional() private _dialogRef: DialogRef,
         @Optional() router: Router,
         changeDetectorRef: ChangeDetectorRef,
         elementRef: ElementRef