feat(popover, tooltip): add shown state api (#1998)

src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.spec.ts

@@ -22,6 +22,7 @@ import { NbDynamicOverlay } from './dynamic-overlay';
 import { NbOverlayContent } from '../overlay-service';
 import { NbDynamicOverlayChange, NbDynamicOverlayHandler } from './dynamic-overlay-handler';
 import { NbTrigger, NbTriggerStrategy, NbTriggerStrategyBuilderService } from '../overlay-trigger';
+import { NbOverlayConfig } from '@nebular/theme/components/cdk/overlay/mapping';
 
 @Component({ template: '' })
 export class NbDynamicOverlayMockComponent implements NbRenderableContainer {
@@ -43,18 +44,21 @@ export class NbMockDynamicOverlay {
  _context: Object = {};
  _content: NbOverlayContent;
  _positionStrategy: NbAdjustableConnectedPositionStrategy;
+ _overlayConfig: NbOverlayConfig;
 
  constructor() {}
 
  create(componentType: Type<NbRenderableContainer>,
  content: NbOverlayContent,
  context: Object,
- positionStrategy: NbAdjustableConnectedPositionStrategy) {
+ positionStrategy: NbAdjustableConnectedPositionStrategy,
+ overlayConfig: NbOverlayConfig) {
 
  this.setContext(context);
  this.setContent(content);
  this.setComponent(componentType);
  this.setPositionStrategy(positionStrategy);
+ this.setOverlayConfig(overlayConfig);
 
  return this;
  }
@@ -71,6 +75,10 @@ export class NbMockDynamicOverlay {
  this._componentType = componentType;
  }
 
+ setOverlayConfig(overlayConfig: NbOverlayConfig) {
+ this._overlayConfig = overlayConfig;
+ }
+
  setContentAndContext(content: NbOverlayContent, context: Object) {
  this._content = content;
  this._context = context;
@@ -516,4 +524,15 @@ describe('dynamic-overlay-handler', () => {
  expect(positionBuilder._position).toBe(NbPosition.LEFT);
  expect(positionBuilder._adjustment).toBe(NbAdjustment.HORIZONTAL);
  });
+
+ it('should set and update overlay config', () => {
+ let overlayConfig: NbOverlayConfig = { panelClass: 'custom-class' };
+
+ let dynamic = configure().overlayConfig(overlayConfig).build();
+ expect(dynamic._overlayConfig).toEqual(jasmine.objectContaining(overlayConfig));
+
+ overlayConfig = { panelClass: 'other-custom-class' };
+ dynamic = configure().overlayConfig(overlayConfig).rebuild();
+ expect(dynamic._overlayConfig).toEqual(jasmine.objectContaining(overlayConfig));
+ });
 });

src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay-handler.ts

@@ -10,6 +10,7 @@ import {
 import { NbRenderableContainer } from '../overlay-container';
 import { NbOverlayContent } from '../overlay-service';
 import { NbDynamicOverlay } from './dynamic-overlay';
+import { NbOverlayConfig } from '../mapping';
 
 export class NbDynamicOverlayChange extends SimpleChange {
 
@@ -33,6 +34,7 @@ export class NbDynamicOverlayHandler {
  protected _position: NbPosition = NbPosition.TOP;
  protected _adjustment: NbAdjustment = NbAdjustment.NOOP;
  protected _offset: number = 15;
+ protected _overlayConfig: NbOverlayConfig = {};
 
  protected dynamicOverlay: NbDynamicOverlay;
  protected triggerStrategy: NbTriggerStrategy;
@@ -94,6 +96,12 @@ export class NbDynamicOverlayHandler {
  return this;
  }
 
+ overlayConfig(overlayConfig: NbOverlayConfig) {
+ this.changes.overlayConfig = new NbDynamicOverlayChange(this._overlayConfig, overlayConfig);
+ this._overlayConfig = overlayConfig;
+ return this;
+ }
+
  build() {
  if (!this._componentType || !this._host) {
  throw Error(`NbDynamicOverlayHandler: at least 'componentType' and 'host' should be
@@ -104,6 +112,7 @@ export class NbDynamicOverlayHandler {
  this._content,
  this._context,
  this.createPositionStrategy(),
+ this._overlayConfig,
  );
 
  this.connect();
@@ -139,6 +148,10 @@ export class NbDynamicOverlayHandler {
  this.dynamicOverlay.setComponent(this._componentType);
  }
 
+ if (this.isOverlayConfigUpdateRequired()) {
+ this.dynamicOverlay.setOverlayConfig(this._overlayConfig);
+ }
+
  this.clearChanges();
  return this.dynamicOverlay;
  }
@@ -203,6 +216,10 @@ export class NbDynamicOverlayHandler {
  return this.isComponentTypeUpdated();
  }
 
+ private isOverlayConfigUpdateRequired(): boolean {
+ return this.isOverlayConfigUpdated();
+ }
+
  protected isComponentTypeUpdated(): boolean {
  return this.changes.componentType && this.changes.componentType.isChanged();
  }
@@ -235,6 +252,10 @@ export class NbDynamicOverlayHandler {
  return this.changes.offset && this.changes.offset.isChanged();
  }
 
+ protected isOverlayConfigUpdated(): boolean {
+ return this.changes.overlayConfig && this.changes.overlayConfig.isChanged();
+ }
+
  protected clearChanges() {
  this.changes = {};
  }

src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.spec.ts

@@ -267,6 +267,16 @@ describe('dynamic-overlay', () => {
  expect(instance.content).toBe(newContent);
  });
 
+ it('should set overlay config', () => {
+ const overlayConfig: NbOverlayConfig = { panelClass: 'additional-overlay-class' };
+ const createOverlaySpy = spyOn(overlayService, 'create').and.callThrough();
+
+ dynamicOverlay.setOverlayConfig(overlayConfig);
+ dynamicOverlay.show();
+
+ expect(createOverlaySpy).toHaveBeenCalledWith(jasmine.objectContaining(overlayConfig));
+ });
+
  it('should return container', () => {
  dynamicOverlay.show();
  expect(dynamicOverlay.getContainer()).toBe(container as any);
@@ -319,29 +329,25 @@ describe('dynamic-overlay', () => {
  });
 
  it('should set component', () => {
- const detachSpy = spyOn(ref, 'detach').and.callThrough();
  const disposeSpy = spyOn(ref, 'dispose').and.callThrough();
  const attachSpy = spyOn(ref, 'attach').and.callThrough();
  const hasAttacheSpy = spyOn(ref, 'hasAttached');
 
  dynamicOverlay.setComponent(NbDynamicOverlayMock2Component);
 
- expect(detachSpy).toHaveBeenCalledTimes(0);
  expect(disposeSpy).toHaveBeenCalledTimes(0);
  expect(attachSpy).toHaveBeenCalledTimes(0);
 
  dynamicOverlay.show();
  hasAttacheSpy.and.returnValue(true);
 
  expect(ref.portal.component).toBe(NbDynamicOverlayMock2Component);
- expect(detachSpy).toHaveBeenCalledTimes(0);
  expect(disposeSpy).toHaveBeenCalledTimes(0);
  expect(attachSpy).toHaveBeenCalledTimes(1);
 
  dynamicOverlay.setComponent(NbDynamicOverlayMockComponent);
 
  expect(ref.portal.component).toBe(NbDynamicOverlayMockComponent);
- expect(detachSpy).toHaveBeenCalledTimes(1);
  expect(disposeSpy).toHaveBeenCalledTimes(1);
  expect(attachSpy).toHaveBeenCalledTimes(2);
 
@@ -350,7 +356,6 @@ describe('dynamic-overlay', () => {
 
  dynamicOverlay.setComponent(NbDynamicOverlayMock2Component);
 
- expect(detachSpy).toHaveBeenCalledTimes(3);
  expect(disposeSpy).toHaveBeenCalledTimes(2);
  expect(attachSpy).toHaveBeenCalledTimes(2);
  });

src/framework/theme/components/cdk/overlay/dynamic/dynamic-overlay.ts

@@ -1,6 +1,6 @@
 import { ComponentFactoryResolver, ComponentRef, Injectable, NgZone, Type } from '@angular/core';
-import { filter, takeUntil, takeWhile } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { filter, takeUntil, takeWhile, distinctUntilChanged } from 'rxjs/operators';
+import { Subject, BehaviorSubject, Observable } from 'rxjs';
 
 import {
  NbAdjustableConnectedPositionStrategy,
@@ -9,7 +9,7 @@ import {
 
 import { NbRenderableContainer } from '../overlay-container';
 import { createContainer, NbOverlayContent, NbOverlayService, patch } from '../overlay-service';
-import { NbOverlayRef, NbOverlayContainer } from '../mapping';
+import { NbOverlayRef, NbOverlayContainer, NbOverlayConfig } from '../mapping';
 
 export interface NbDynamicOverlayController {
  show();
@@ -27,14 +27,20 @@ export class NbDynamicOverlay {
  protected context: Object = {};
  protected content: NbOverlayContent;
  protected positionStrategy: NbAdjustableConnectedPositionStrategy;
+ protected overlayConfig: NbOverlayConfig = {};
 
  protected positionStrategyChange$ = new Subject();
+ protected isShown$ = new BehaviorSubject<boolean>(false);
  protected alive = true;
 
  get isAttached(): boolean {
  return this.ref && this.ref.hasAttached();
  }
 
+ get isShown(): Observable<boolean> {
+ return this.isShown$.pipe(distinctUntilChanged());
+ }
+
  constructor(
  protected overlay: NbOverlayService,
  protected componentFactoryResolver: ComponentFactoryResolver,
@@ -45,11 +51,13 @@ export class NbDynamicOverlay {
  create(componentType: Type<NbRenderableContainer>,
  content: NbOverlayContent,
  context: Object,
- positionStrategy: NbAdjustableConnectedPositionStrategy) {
+ positionStrategy: NbAdjustableConnectedPositionStrategy,
+ overlayConfig: NbOverlayConfig = {}) {
 
  this.setContentAndContext(content, context);
  this.setComponent(componentType);
  this.setPositionStrategy(positionStrategy);
+ this.setOverlayConfig(overlayConfig);
 
  return this;
  }
@@ -82,11 +90,10 @@ export class NbDynamicOverlay {
  this.componentType = componentType;
 
  // in case the component is shown we recreate it and show it back
- if (this.ref && this.isAttached) {
- this.dispose();
+ const wasAttached = this.isAttached;
+ this.disposeOverlayRef();
+ if (wasAttached) {
  this.show();
- } else if (this.ref && !this.isAttached) {
- this.dispose();
  }
  }
 
@@ -108,6 +115,16 @@ export class NbDynamicOverlay {
  }
  }
 
+ setOverlayConfig(overlayConfig: NbOverlayConfig) {
+ this.overlayConfig = overlayConfig;
+
+ const wasAttached = this.isAttached;
+ this.disposeOverlayRef();
+ if (wasAttached) {
+ this.show();
+ }
+ }
+
  show() {
  if (!this.ref) {
  this.createOverlay();
@@ -120,6 +137,8 @@ export class NbDynamicOverlay {
  this.disposeOverlayRef();
  return this.show();
  }
+
+ this.isShown$.next(true);
  }
 
  hide() {
@@ -129,6 +148,8 @@ export class NbDynamicOverlay {
 
  this.ref.detach();
  this.container = null;
+
+ this.isShown$.next(false);
  }
 
  toggle() {
@@ -143,6 +164,8 @@ export class NbDynamicOverlay {
  this.alive = false;
  this.hide();
  this.disposeOverlayRef();
+ this.isShown$.complete();
+ this.positionStrategyChange$.complete();
  }
 
  getContainer() {
@@ -153,6 +176,7 @@ export class NbDynamicOverlay {
  this.ref = this.overlay.create({
  positionStrategy: this.positionStrategy,
  scrollStrategy: this.overlay.scrollStrategies.reposition(),
+ ...this.overlayConfig,
  });
  this.updatePositionWhenStable();
  }