feat(offcanvas): add static backdrop option (#4367)

feat(offcanvas): add 'static' backdrop option

demo/src/app/components/offcanvas/demos/options/offcanvas-options.html

@@ -15,6 +15,7 @@ <h4 class="offcanvas-title">Offcanvas title</h4>
 <button class="btn btn-lg btn-outline-primary mb-2 me-2" (click)="openTop(content)">Top position</button>
 <button class="btn btn-lg btn-outline-primary mb-2 me-2" (click)="openBottom(content)">Bottom position</button>
 <button class="btn btn-lg btn-outline-primary mb-2 me-2" (click)="openNoBackdrop(content)">No backdrop</button>
+<button class="btn btn-lg btn-outline-primary mb-2 me-2" (click)="openStaticBackdrop(content)">Static backdrop</button>
 <button class="btn btn-lg btn-outline-primary mb-2 me-2" (click)="openScroll(content)">Scrolling of main content enabled</button>
 <button class="btn btn-lg btn-outline-primary mb-2 me-2" (click)="openNoKeyboard(content)">Escape does not dismiss</button>
 <button class="btn btn-lg btn-outline-primary mb-2 me-2" (click)="openNoAnimation(content)">No animation</button>

demo/src/app/components/offcanvas/demos/options/offcanvas-options.ts

@@ -27,6 +27,10 @@ export class NgbdOffcanvasOptions {
     this.offcanvasService.open(content, { backdrop: false });
   }
 
+  openStaticBackdrop(content: TemplateRef<any>) {
+    this.offcanvasService.open(content, { backdrop: 'static' });
+  }
+
   openScroll(content: TemplateRef<any>) {
     this.offcanvasService.open(content, { scroll: true });
   }

src/offcanvas/offcanvas-backdrop.spec.ts

@@ -44,4 +44,17 @@ describe('ngb-offcanvas-backdrop', () => {
 
     expect(emittedEvent).toBe(OffcanvasDismissReasons.BACKDROP_CLICK);
   });
+
+  it('should not emit dismiss event on mousedown if static is true', () => {
+    const fixture = TestBed.createComponent(NgbOffcanvasBackdrop);
+    fixture.componentInstance.static = true;
+    fixture.detectChanges();
+
+    let emittedEvent: any;
+    fixture.componentInstance.dismissEvent.subscribe(event => emittedEvent = event);
+    fixture.nativeElement.dispatchEvent(new Event('mousedown'));
+    fixture.detectChanges();
+
+    expect(emittedEvent).toBeUndefined();
+  });
 });

src/offcanvas/offcanvas-backdrop.ts

@@ -21,6 +21,7 @@ import {OffcanvasDismissReasons} from './offcanvas-dismiss-reasons';
 export class NgbOffcanvasBackdrop implements OnInit {
   @Input() animation: boolean;
   @Input() backdropClass: string;
+  @Input() static: boolean;
 
   @Output('dismiss') dismissEvent = new EventEmitter();
 
@@ -43,5 +44,9 @@ export class NgbOffcanvasBackdrop implements OnInit {
         {animation: this.animation, runningTransition: 'stop'});
   }
 
-  dismiss() { this.dismissEvent.emit(OffcanvasDismissReasons.BACKDROP_CLICK); }
+  dismiss() {
+    if (!this.static) {
+      this.dismissEvent.emit(OffcanvasDismissReasons.BACKDROP_CLICK);
+    }
+  }
 }

src/offcanvas/offcanvas-config.spec.ts

@@ -21,4 +21,10 @@ describe('NgbOffcanvasConfig', () => {
        expect(config.position).toBe('start');
        expect(config.scroll).toBeFalse();
      }));
+
+  it('should compile when setting config backdrop to static',
+     inject([NgbOffcanvasConfig], (config: NgbOffcanvasConfig) => {
+       config.backdrop = 'static';
+       expect().nothing();
+     }));
 });

src/offcanvas/offcanvas-config.ts

@@ -24,10 +24,11 @@ export interface NgbOffcanvasOptions {
 
   /**
    * If `true`, the backdrop element will be created for a given offcanvas.
+   * If 'static', clicking the backdrop won't close the offcanvas.
    *
    * Default value is `true`.
    */
-  backdrop?: boolean;
+  backdrop?: boolean | 'static';
 
   /**
    * A custom class to append to the offcanvas backdrop.
@@ -93,7 +94,7 @@ export interface NgbOffcanvasOptions {
 export class NgbOffcanvasConfig implements Required<NgbOffcanvasOptions> {
   ariaDescribedBy: string;
   ariaLabelledBy: string;
-  backdrop = true;
+  backdrop: boolean | 'static' = true;
   backdropClass: string;
   beforeDismiss: () => boolean | Promise<boolean>;
   container: string | HTMLElement;

src/offcanvas/offcanvas-stack.ts

@@ -132,6 +132,7 @@ export class NgbOffcanvasStack {
         backdropInstance[optionName] = options[optionName];
       }
     });
+    backdropInstance.static = (options.backdrop === 'static');
   }
 
   private _getContentRef(

src/offcanvas/offcanvas.spec.ts

@@ -401,6 +401,43 @@ describe('ngb-offcanvas', () => {
         expect(fixture.nativeElement).not.toHaveOffcanvasBackdrop();
       });
 
+      it('should open and close offcanvas with static backdrop', () => {
+        const offcanvasInstance = fixture.componentInstance.open('foo', {backdrop: 'static'});
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement).toHaveOffcanvas('foo');
+        expect(fixture.nativeElement).toHaveOffcanvasBackdrop();
+
+        offcanvasInstance.close('some reason');
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement).not.toHaveOffcanvas();
+        expect(fixture.nativeElement).not.toHaveOffcanvasBackdrop();
+      });
+
+      it('should not close with backdrop mousedown if backdrop is static', async() => {
+        let rejectReason: any;
+        const offcanvasInstance = fixture.componentInstance.open('foo', {backdrop: 'static'});
+        offcanvasInstance.result.catch((reason) => rejectReason = reason);
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveOffcanvas('foo');
+
+        document.querySelector('ngb-offcanvas-backdrop') ?.dispatchEvent(new Event('mousedown'));
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement).toHaveOffcanvas();
+        expect(fixture.nativeElement).toHaveOffcanvasBackdrop();
+
+        await fixture.whenStable();
+        expect(rejectReason).toBeUndefined();
+
+        offcanvasInstance.close('some reason');
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement).not.toHaveOffcanvas();
+        expect(fixture.nativeElement).not.toHaveOffcanvasBackdrop();
+      });
+
       it('should open and close offcanvas without backdrop from template content', () => {
         const offcanvasInstance = fixture.componentInstance.openTpl({backdrop: false});
         fixture.detectChanges();