feat: [DIALOG] configuration token (#31)

packages/dialog/README.md

@@ -134,6 +134,26 @@ Output parameters
 | `animationStart` | emits when animation starts  | `EventEmitter<AnimationEvent>` |
 | `animationDone`  | emits when animation ends    | `EventEmitter<AnimationEvent>` |
 
+### Configuration
+
+There is a configuration token `NGX_DIALOG_CONFIG`.
+Please, use the `NgxDialogConfig` class to change the default floating properties.
+
+```typescript
+import { Provider } from '@angular/core';
+import { NGX_DIALOG_CONFIG, NgxDialogConfig } from '@ngx-popovers/dialog';
+
+export const DialogConfigProvider: Provider = {
+  provide: NGX_DIALOG_CONFIG,
+  useValue: new NgxDialogConfig({
+    backdropClass: 'backdrop',
+    contentClass: 'content',
+    closeOnBackdropClick: false,
+    animationDisabled: false
+  })
+};
+```
+
 ## Sources
 
 Another packages from this library:

packages/dialog/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/dialog/dialog.component';
 export * from './lib/directives';
 export * from './lib/dialog.module';
+export * from './lib/core';

packages/dialog/src/lib/core/dialog-config.spec.ts

@@ -0,0 +1,28 @@
+import { NgxDialogConfig } from './dialog-config';
+
+describe('DialogConfig', () => {
+  it('should create an instance', () => {
+    expect(new NgxDialogConfig()).toBeTruthy();
+  });
+
+  it('should be the same', () => {
+    const config1 = new NgxDialogConfig();
+    const config2 = new NgxDialogConfig(config1);
+
+    expect(config1).toEqual(config2);
+  });
+
+  it('should rewrite fields', () => {
+    const config = new NgxDialogConfig({
+      backdropClass: 'backdrop',
+      contentClass: 'content',
+      closeOnBackdropClick: false,
+      animationDisabled: false
+    });
+
+    expect(config.backdropClass).toBe('backdrop');
+    expect(config.contentClass).toBe('content');
+    expect(config.closeOnBackdropClick).toBe(false);
+    expect(config.animationDisabled).toBe(false);
+  });
+});

packages/dialog/src/lib/core/dialog-config.ts

@@ -0,0 +1,19 @@
+export interface DialogConfig {
+  animationDisabled: boolean;
+  contentClass: string;
+  backdropClass: string;
+  closeOnBackdropClick: boolean;
+}
+
+export class NgxDialogConfig implements DialogConfig {
+  animationDisabled = false;
+  contentClass = '';
+  backdropClass = '';
+  closeOnBackdropClick = true;
+
+  constructor(
+    config: Partial<DialogConfig> = {}
+  ) {
+    Object.assign(this, config);
+  }
+}

packages/dialog/src/lib/core/dialog.injectors.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+import { NgxDialogConfig } from './dialog-config';
+
+export const NGX_DIALOG_CONFIG = new InjectionToken('NGX_DIALOG_CONFIG', {
+  providedIn: 'root',
+  factory: () => new NgxDialogConfig()
+});

packages/dialog/src/lib/core/index.ts

@@ -0,0 +1,2 @@
+export * from './dialog.injectors';
+export * from './dialog-config';

packages/dialog/src/lib/dialog/dialog.component.ts

@@ -13,6 +13,7 @@ import {
 } from '@angular/core';
 import { animate, AnimationEvent, style, transition, trigger } from '@angular/animations';
 import { DialogTemplate } from '../directives';
+import { NGX_DIALOG_CONFIG } from '../core';
 
 @Component({
   selector: 'ngx-dialog',
@@ -39,6 +40,7 @@ import { DialogTemplate } from '../directives';
   ]
 })
 export class DialogComponent implements AfterViewInit {
+  private readonly config = inject(NGX_DIALOG_CONFIG);
   private readonly ref = inject(ChangeDetectorRef);
 
   @ContentChild(DialogTemplate)
@@ -48,16 +50,16 @@ export class DialogComponent implements AfterViewInit {
   value = false;
 
   @Input()
-  animationDisabled = false;
+  animationDisabled = this.config.animationDisabled;
 
   @Input()
-  contentClass = '';
+  contentClass = this.config.contentClass;
 
   @Input()
-  backdropClass = '';
+  backdropClass = this.config.backdropClass;
 
   @Input()
-  closeOnBackdropClick = true;
+  closeOnBackdropClick = this.config.closeOnBackdropClick;
 
   @Output()
   valueChange = new EventEmitter<boolean>();