From 51bfc72969037fc162a35a0958e36667cab51987 Mon Sep 17 00:00:00 2001
From: Max Okorokov <max@okorokov.com>
Date: Tue, 22 Oct 2019 09:24:04 +0200
Subject: [PATCH] fix(popover): propagate 'popoverClass' change correctly
 (#3420)

Changing `[popoverClass]="expr"` while the popover is opened was not correctly propagated to the popover window
---
 src/popover/popover.spec.ts | 16 ++++++++++++++++
 src/popover/popover.ts      |  7 +++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/popover/popover.spec.ts b/src/popover/popover.spec.ts
index 3bde7a1b1a..46544fb079 100644
--- a/src/popover/popover.spec.ts
+++ b/src/popover/popover.spec.ts
@@ -179,6 +179,21 @@ describe('ngb-popover', () => {
       expect(directive.nativeElement.getAttribute('aria-describedby')).toBeNull();
     });
 
+    it('should propagate popoverClass changes to the window', () => {
+      const fixture =
+          createTestComponent(`<div ngbPopover="Great tip!" popoverTitle="Title" [popoverClass]="popoverClass"></div>`);
+      const directive = fixture.debugElement.query(By.directive(NgbPopover));
+
+      triggerEvent(directive, 'click');
+      fixture.detectChanges();
+      const windowEl = getWindow(fixture.nativeElement);
+      expect(windowEl).not.toHaveCssClass('my-popover-class');
+
+      fixture.componentInstance.popoverClass = 'my-popover-class';
+      fixture.detectChanges();
+      expect(windowEl).toHaveCssClass('my-popover-class');
+    });
+
     it('should accept a template for the title and properly destroy it when closing', () => {
       const fixture = createTestComponent(`
           <ng-template #t>Hello, {{name}}! <destroyable-cmpt></destroyable-cmpt></ng-template>
@@ -727,6 +742,7 @@ export class TestComponent {
   show = true;
   title: string;
   placement: string;
+  popoverClass: string;
 
   @ViewChild(NgbPopover, {static: true}) popover: NgbPopover;
 
diff --git a/src/popover/popover.ts b/src/popover/popover.ts
index 1504d72b48..d25311fcb1 100644
--- a/src/popover/popover.ts
+++ b/src/popover/popover.ts
@@ -274,9 +274,12 @@ export class NgbPopover implements OnInit, OnDestroy, OnChanges {
         this.close.bind(this), +this.openDelay, +this.closeDelay);
   }
 
-  ngOnChanges(changes: SimpleChanges) {
+  ngOnChanges({ngbPopover, popoverTitle, disablePopover, popoverClass}: SimpleChanges) {
+    if (popoverClass && this.isOpen()) {
+      this._windowRef.instance.popoverClass = popoverClass.currentValue;
+    }
     // close popover if title and content become empty, or disablePopover set to true
-    if ((changes['ngbPopover'] || changes['popoverTitle'] || changes['disablePopover']) && this._isDisabled()) {
+    if ((ngbPopover || popoverTitle || disablePopover) && this._isDisabled()) {
       this.close();
     }
   }