fix(animations): delegate 'animation' flag to 'NgbConfig' (#3939)

Component configs now delegate 'animation' flag to 'NgbConfig' if it is not set explicitly.

Fixes #3893

demo/src/app/app.routing.ts

@@ -64,4 +64,4 @@ const routes: Routes = [
 ];
 
 export const routing: ModuleWithProviders<RouterModule> =
-    RouterModule.forRoot(routes, {enableTracing: false, useHash: true, scrollPositionRestoration: 'enabled'});
+    RouterModule.forRoot(routes, { enableTracing: false, useHash: true, scrollPositionRestoration: 'enabled' });

src/accordion/accordion-config.ts

@@ -9,9 +9,13 @@ import {NgbConfig} from '../ngb-config';
  */
 @Injectable({providedIn: 'root'})
 export class NgbAccordionConfig {
-  animation: boolean;
   closeOthers = false;
   type: string;
 
-  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
+  private _animation: boolean;
+
+  constructor(private _ngbConfig: NgbConfig) {}
+
+  get animation(): boolean { return (this._animation === undefined) ? this._ngbConfig.animation : this._animation; }
+  set animation(animation: boolean) { this._animation = animation; }
 }

src/alert/alert-config.ts

@@ -9,9 +9,13 @@ import {NgbConfig} from '../ngb-config';
  */
 @Injectable({providedIn: 'root'})
 export class NgbAlertConfig {
-  animation: boolean;
   dismissible = true;
   type = 'warning';
 
-  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
+  private _animation: boolean;
+
+  constructor(private _ngbConfig: NgbConfig) {}
+
+  get animation(): boolean { return (this._animation === undefined) ? this._ngbConfig.animation : this._animation; }
+  set animation(animation: boolean) { this._animation = animation; }
 }

src/carousel/carousel-config.ts

@@ -9,7 +9,6 @@ import {NgbConfig} from '../ngb-config';
  */
 @Injectable({providedIn: 'root'})
 export class NgbCarouselConfig {
-  animation: boolean;
   interval = 5000;
   wrap = true;
   keyboard = true;
@@ -18,5 +17,10 @@ export class NgbCarouselConfig {
   showNavigationArrows = true;
   showNavigationIndicators = true;
 
-  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
+  private _animation: boolean;
+
+  constructor(private _ngbConfig: NgbConfig) {}
+
+  get animation(): boolean { return (this._animation === undefined) ? this._ngbConfig.animation : this._animation; }
+  set animation(animation: boolean) { this._animation = animation; }
 }

src/collapse/collapse-config.ts

@@ -9,7 +9,10 @@ import {NgbConfig} from '../ngb-config';
  */
 @Injectable({providedIn: 'root'})
 export class NgbCollapseConfig {
-  animation: boolean;
+  private _animation: boolean;
 
-  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
+  constructor(private _ngbConfig: NgbConfig) {}
+
+  get animation(): boolean { return (this._animation === undefined) ? this._ngbConfig.animation : this._animation; }
+  set animation(animation: boolean) { this._animation = animation; }
 }

src/collapse/collapse.ts

@@ -25,7 +25,7 @@ export class NgbCollapse implements OnInit, OnChanges {
    *
    * @since 8.0.0
    */
-  @Input() animation = false;
+  @Input() animation;
 
   /**
    * If `true`, will collapse the element or show it otherwise.

src/modal/modal-config.ts

@@ -111,7 +111,6 @@ export interface NgbModalOptions {
 */
 @Injectable({providedIn: 'root'})
 export class NgbModalConfig implements Required<NgbModalOptions> {
-  animation: boolean;
   ariaLabelledBy: string;
   ariaDescribedBy: string;
   backdrop: boolean | 'static' = true;
@@ -125,5 +124,10 @@ export class NgbModalConfig implements Required<NgbModalOptions> {
   windowClass: string;
   backdropClass: string;
 
-  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
+  private _animation: boolean;
+
+  constructor(private _ngbConfig: NgbConfig) {}
+
+  get animation(): boolean { return (this._animation === undefined) ? this._ngbConfig.animation : this._animation; }
+  set animation(animation: boolean) { this._animation = animation; }
 }

src/modal/modal.ts

@@ -26,7 +26,7 @@ export class NgbModal {
    * Also see the [`NgbModalOptions`](#/components/modal/api#NgbModalOptions) for the list of supported options.
    */
   open(content: any, options: NgbModalOptions = {}): NgbModalRef {
-    const combinedOptions = Object.assign({}, this._config, options);
+    const combinedOptions = {...this._config, animation: this._config.animation, ...options};
     return this._modalStack.open(this._moduleCFR, this._injector, content, combinedOptions);
   }
 

src/nav/nav-config.ts

@@ -11,11 +11,15 @@ import {NgbConfig} from '../ngb-config';
  */
 @Injectable({providedIn: 'root'})
 export class NgbNavConfig {
-  animation: boolean;
   destroyOnHide = true;
   orientation: 'horizontal' | 'vertical' = 'horizontal';
   roles: 'tablist' | false = 'tablist';
   keyboard: boolean | 'changeWithArrows' = false;
 
-  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
+  private _animation: boolean;
+
+  constructor(private _ngbConfig: NgbConfig) {}
+
+  get animation(): boolean { return (this._animation === undefined) ? this._ngbConfig.animation : this._animation; }
+  set animation(animation: boolean) { this._animation = animation; }
 }

src/ngb-config.spec.ts

@@ -1,4 +1,18 @@
-import {NgbConfig} from './ngb-config';
+import {
+  NgbAccordionConfig,
+  NgbAlertConfig,
+  NgbCarouselConfig,
+  NgbCollapseConfig,
+  NgbConfig,
+  NgbModalConfig,
+  NgbModule,
+  NgbNavConfig,
+  NgbPopoverConfig,
+  NgbToastConfig,
+  NgbTooltipConfig
+} from './index';
+import {NgModule} from '@angular/core';
+import {inject, TestBed} from '@angular/core/testing';
 
 describe('ngb-config', () => {
   it('should have animation disabled', () => {
@@ -7,3 +21,50 @@ describe('ngb-config', () => {
     expect(config.animation).toBe(false);
   });
 });
+
+describe('ngb-config animation override', () => {
+
+  @NgModule({imports: [NgbModule]})
+  class SharedModule {
+    // These will be injected first and will use 'NgbConfig' with 'animation' set to 'false'
+    constructor(
+        _0: NgbAccordionConfig, _1: NgbAlertConfig, _2: NgbCarouselConfig, _3: NgbCollapseConfig, _4: NgbModalConfig,
+        _5: NgbNavConfig, _6: NgbPopoverConfig, _7: NgbToastConfig, _8: NgbTooltipConfig) {}
+  }
+
+  @NgModule({imports: [NgbModule]})
+  class MainModule {
+    constructor(config: NgbConfig) {
+      // this will be set AFTER the 'NgbXXXConfig's were instantiated
+      // default value for 'animation' during unit tests is 'false'
+      config.animation = true;
+    }
+  }
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      // Note that 'Shared' is before 'Main'
+      imports: [SharedModule, MainModule]
+    });
+  });
+
+  it(`should use delegation to 'ngbConfig' regardless of injection order`,
+     inject(
+         [
+           NgbAccordionConfig, NgbAlertConfig, NgbCarouselConfig, NgbCollapseConfig, NgbModalConfig, NgbNavConfig,
+           NgbPopoverConfig, NgbToastConfig, NgbTooltipConfig
+         ],
+         (accordionConfig: NgbAccordionConfig, alertConfig: NgbAlertConfig, carouselConfig: NgbCarouselConfig,
+          collapseConfig: NgbCollapseConfig, modalConfig: NgbModalConfig, navConfig: NgbNavConfig,
+          popoverConfig: NgbPopoverConfig, toastConfig: NgbToastConfig, tooltipConfig: NgbTooltipConfig) => {
+           expect(accordionConfig.animation).toBe(true, 'accordion');
+           expect(alertConfig.animation).toBe(true, 'alert');
+           expect(carouselConfig.animation).toBe(true, 'carousel');
+           expect(collapseConfig.animation).toBe(true, 'collapse');
+           expect(modalConfig.animation).toBe(true, 'modal');
+           expect(navConfig.animation).toBe(true, 'nav');
+           expect(popoverConfig.animation).toBe(true, 'popover');
+           expect(toastConfig.animation).toBe(true, 'toast');
+           expect(tooltipConfig.animation).toBe(true, 'tooltip');
+         }));
+});

src/popover/popover-config.ts

@@ -10,7 +10,6 @@ import {NgbConfig} from '../ngb-config';
  */
 @Injectable({providedIn: 'root'})
 export class NgbPopoverConfig {
-  animation: boolean;
   autoClose: boolean | 'inside' | 'outside' = true;
   placement: PlacementArray = 'auto';
   triggers = 'click';
@@ -20,5 +19,10 @@ export class NgbPopoverConfig {
   openDelay = 0;
   closeDelay = 0;
 
-  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
+  private _animation: boolean;
+
+  constructor(private _ngbConfig: NgbConfig) {}
+
+  get animation(): boolean { return (this._animation === undefined) ? this._ngbConfig.animation : this._animation; }
+  set animation(animation: boolean) { this._animation = animation; }
 }

src/toast/toast-config.ts

@@ -37,10 +37,14 @@ export interface NgbToastOptions {
  */
 @Injectable({providedIn: 'root'})
 export class NgbToastConfig implements NgbToastOptions {
-  animation: boolean;
   autohide = true;
   delay = 500;
   ariaLive: 'polite' | 'alert' = 'polite';
 
-  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
+  private _animation: boolean;
+
+  constructor(private _ngbConfig: NgbConfig) {}
+
+  get animation(): boolean { return (this._animation === undefined) ? this._ngbConfig.animation : this._animation; }
+  set animation(animation: boolean) { this._animation = animation; }
 }

src/tooltip/tooltip-config.ts

@@ -10,7 +10,6 @@ import {NgbConfig} from '../ngb-config';
  */
 @Injectable({providedIn: 'root'})
 export class NgbTooltipConfig {
-  animation: boolean;
   autoClose: boolean | 'inside' | 'outside' = true;
   placement: PlacementArray = 'auto';
   triggers = 'hover focus';
@@ -20,5 +19,10 @@ export class NgbTooltipConfig {
   openDelay = 0;
   closeDelay = 0;
 
-  constructor(ngbConfig: NgbConfig) { this.animation = ngbConfig.animation; }
+  private _animation: boolean;
+
+  constructor(private _ngbConfig: NgbConfig) {}
+
+  get animation(): boolean { return (this._animation === undefined) ? this._ngbConfig.animation : this._animation; }
+  set animation(animation: boolean) { this._animation = animation; }
 }