Popover demos

app.module.snippet.ts

// other imports
import { NzbModule, NzbPopoverOptions } from 'nowzoo-angular-bootstrap-lite';

@NgModule({
  //etc...
  imports: [
    NzbModule
    //etc..
  ],
  providers: [ 
    { provide: NzbPopoverOptions, useValue: {animation: false} } 
  ],
})
export class AppModule { }

popover-animate-on-destroy-demo.component.html

<div class="row align-items-center mb-3">
  <div class="col-md">
    <p>
      <code>animateOnDestroy: false</code>
    </p>
    <p>
      Hides and destroys the popover immediately
      when its target is destroyed.
    </p>
    <p>
      <small class="text-muted">
        Toggle the popover, then click "Destroy Target Element"
      </small>
    </p>
  </div>
  <div class="col-md">
    <div class="card card-body">

      <div *ngIf="falseBtnExists">
        <p>
          <button class="btn btn-outline-info"
            nzbPopover
            [nzbPopoverOptions]="{animateOnDestroy: false}"
            title="Static Title"
            data-content="Static content.">Popover Target</button>
        </p>
        <p class="text-muted">
          The target element exists.
        </p>
        <p>
          <button class="btn btn-secondary btn-sm"
           (click)="falseBtnExists=false">
            Destroy Target Element
          </button>
        </p>
      </div>

      <div *ngIf="!falseBtnExists">
        <p class="text-muted">
          The target element has been destroyed.
        </p>
        <p>
          <button class="btn btn-secondary btn-sm"
           (click)="falseBtnExists=true">
            Restore Target Element
          </button>
        </p>
      </div>
    </div>

  </div>
</div>

<div class="row align-items-center">
  <div class="col-md">
    <p>
      <code>animateOnDestroy: true</code> (default)
    </p>
    <p>
      The popover is hidden gracefully before being destroyed.
    </p>
    <p>
      <small class="text-muted">
        Toggle the popover, then click "Destroy Target Element"
      </small>
    </p>
  </div>
  <div class="col-md">
    <div class="card card-body">

      <div *ngIf="trueBtnExists">
        <p>
          <button class="btn btn-outline-info"
            nzbPopover
            title="Static Title"
            data-content="Static content.">Popover Target</button>
        </p>
        <p class="text-muted">
          The target element exists.
        </p>
        <p>
          <button class="btn btn-secondary btn-sm"
           (click)="trueBtnExists=false">
            Destroy Target Element
          </button>
        </p>
      </div>

      <div *ngIf="!trueBtnExists">
        <p class="text-muted">
          The target element has been destroyed.
        </p>
        <p>
          <button class="btn btn-secondary btn-sm"
           (click)="trueBtnExists=true">
            Restore Target Element
          </button>
        </p>
      </div>
    </div>

  </div>
</div>

popover-animate-on-destroy-demo.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-popover-animate-on-destroy-demo',
  templateUrl: './popover-animate-on-destroy-demo.component.html',
})
export class PopoverAnimateOnDestroyDemoComponent {
  trueBtnExists: boolean = true;
  falseBtnExists: boolean = true;
}

popover-animation-demo.component.html

<p>
  <!-- default -->
  <button class="btn btn-primary"
    nzbPopover
    title="Static Title"
    data-content="Static content.">Animation On</button>

  <!-- animation: false -->
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{animation: false}"
    title="Static Title"
    data-content="Static content.">Animation Off</button>
</p>

popover-container-demo.component.html

<p id="popover-container">
  <!-- default -->
  <button class="btn btn-primary"
    nzbPopover
    title="Static Title"
    data-content="Static content.">Container (default)</button>

  <!-- container: '#popover-container' -->
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{container: '#popover-container'}"
    title="Static Title"
    data-content="Static content.">Container: #popover-container</button>
</p>

popover-content-demo.component.html

<p>
  <button class="btn btn-primary"
    nzbPopover
    #popoverInstance="nzbPopover"
    title="Static Title"
    [nzbPopoverContent]="contentTemplate">Popover (click)</button>
    <ng-template #contentTemplate>
      <p>Shown {{shownFor}} seconds.</p>
      <p>
        <button role="button" class="btn btn-danger"
          (click)="popoverInstance.hide()" aria-label="Close">
          <i aria-hidden="true" class="fa fa-times"></i> Close Popover
        </button>
      </p>
    </ng-template>
</p>

popover-content-demo.component.ts

import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';

@Component({
  selector: 'app-popover-content-demo',
  templateUrl: './popover-content-demo.component.html',
  styles: []
})
export class PopoverContentDemoComponent implements AfterViewInit, OnDestroy {
  @ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
  shownFor: number;
  private interval: any;
  private sub: Subscription;

  constructor() { }

  ngAfterViewInit() {
    this.sub = this.popoverInstance.events.subscribe((event: Event) => {

      switch(event.type) {
        case 'shown':
          this.popoverInstance.update();
          this.shownFor = 0;
          this.interval = setInterval(() => {
            this.shownFor++;
          }, 1000)
          break;
        case 'hide':
          clearInterval(this.interval);
          break;
      }
    })
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
    clearInterval(this.interval);
  }

}

popover-delay-demo.component.html

<p>
    <button class="btn btn-primary"
      nzbPopover
      [nzbPopoverOptions]="{delay: {show: 300, hide: 150}}"
      title="Static Title"
      data-content="Static content.">Delay: object</button>
      <code>delay: {{ '{' }}show: 300, hide: 150{{ '}' }}</code>
</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{delay: 1000}"
    title="Static Title"
    data-content="Static content.">Delay: 1000</button>
</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    title="Static Title"
    data-content="Static content.">Delay: 0</button>
    (default)
</p>

popover-fallback-placement-demo.component.html

<div class="row align-items-center mb-3">
  <div class="col-md">
    <p>
      <code>fallbackPlacement: 'clockwise'</code>
    </p>
  </div>
  <div class="col-md">
      <div class="card card-body">
        <p>
            <button class="btn btn-outline-info"
              nzbPopover
              [nzbPopoverOptions]="{fallbackPlacement: 'clockwise', placement: 'auto'}"
              title="Static Title"
              data-content="Static content.">Popover Target</button>
        </p>
      </div>
  </div>
</div>
<div class="row align-items-center mb-3">
  <div class="col-md">
    <p>
      <code>fallbackPlacement: 'counterclockwise'</code>
    </p>
  </div>
  <div class="col-md">
      <div class="card card-body">
        <p>
            <button class="btn btn-outline-info"
              nzbPopover
              [nzbPopoverOptions]="{fallbackPlacement: 'counterclockwise', placement: 'auto'}"
              title="Static Title"
              data-content="Static content.">Popover Target</button>
        </p>
      </div>
  </div>
</div>
<div class="row align-items-center">
  <div class="col-md">
    <p>
      <code>fallbackPlacement: 'flip'</code> (default)
    </p>
  </div>
  <div class="col-md">
      <div class="card card-body">
        <p>
            <button class="btn btn-outline-info"
              nzbPopover
              [nzbPopoverOptions]="{fallbackPlacement: 'flip', placement: 'auto'}"
              title="Static Title"
              data-content="Static content.">Popover Target</button>
        </p>
      </div>
  </div>
</div>

popover-html-demo.component.html

<p>
    <button class="btn btn-primary"
      nzbPopover
      [nzbPopoverOptions]="{html: true}"
      title="<strong>Bold Title</strong>"
      data-content="Static <strong>content</strong>.">html: true</button>
      <code>html: true</code>
</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    title="<strong>Woops</strong>"
    data-content="Static <strong>woops</strong>.">html: false</button>
    (default)
</p>

popover-offset-demo.component.html

<p>
    <button class="btn btn-primary"
      nzbPopover
      [nzbPopoverOptions]="{offset: '10px 10px'}"
      title="Static Title"
      data-content="Static content.">offset: '10px 10px'</button>
</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    title="Static Title"
    data-content="Static content.">offset: 0</button>
    (default)
</p>

popover-options-demo.component.html

<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="options"
    title="Static Title"
    data-content="Static content.">Popover (click)</button>
</p>

popover-options-demo.component.ts

import { Component, OnInit } from '@angular/core';
import { NzbPopoverOptions } from 'nowzoo-angular-bootstrap-lite';
@Component({
  selector: 'app-popover-options-demo',
  templateUrl: './popover-options-demo.component.html'
})
export class PopoverOptionsDemoComponent implements OnInit {

  options: NzbPopoverOptions;
  constructor() { }

  ngOnInit() {
    this.options = {
      placement: 'bottom'
    }
  }

}

popover-placement-demo.component.html

<p>
    <button class="btn btn-primary"
      nzbPopover
      [nzbPopoverOptions]="{placement: 'top'}"
      title="Static Title"
      data-content="Static content.">placement: 'top'</button>
</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{placement: 'bottom'}"
    title="Static Title"
    data-content="Static content.">placement: 'bottom'</button>

</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{placement: 'left'}"
    title="Static Title"
    data-content="Static content.">placement: 'left'</button>
</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{placement: 'right'}"
    title="Static Title"
    data-content="Static content.">placement: 'right'</button>
</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{placement: 'auto'}"
    title="Static Title"
    data-content="Static content.">placement: 'auto'</button>
</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{placement: myPlacementFunc}"
    title="Static Title"
    data-content="Static content.">placement: myPlacementFunc</button>
</p>

popover-placement-demo.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-popover-placement-demo',
  templateUrl: './popover-placement-demo.component.html',
})
export class PopoverPlacementDemoComponent {
  myPlacementFunc(tooltipEl, targetEl){
    // do some fancy calculation here based on the small breakpoint...
    if (window.innerWidth < 576){
      return 'top';
    } else {
      return 'left';
    }
  }
}

popover-quickstart-demo.component.html

<p>
  <span class="text-muted">From strings...</span>
  <br>
  <button class="btn btn-primary"
    nzbPopover
    title="Static Popover Title"
    data-content="Some static popover content">Popover (click)</button>
</p>

<p>
  <span class="text-muted">From templates...</span>
  <br>
  <button class="btn btn-primary"
    nzbPopover
    #popoverInstance="nzbPopover"
    [nzbPopoverTitle]="titleTemplate"
    [nzbPopoverContent]="contentTemplate">Popover (click)</button>
    <ng-template #titleTemplate>
      Shown {{shownAt | amTimeAgo}}!
    </ng-template>
    <ng-template #contentTemplate>
      <div class="text-center">
        <p>
          This popover has been shown for
        </p>
        <h4>{{shownFor | number}}</h4>
        <p>
          second<span *ngIf="1!==shownFor">s</span>!
        </p>
      </div>
    </ng-template>
</p>

popover-quickstart-demo.component.ts

import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import * as moment from 'moment';

import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';

@Component({
  selector: 'app-popover-quickstart-demo',
  templateUrl: './popover-quickstart-demo.component.html'
})
export class PopoverQuickstartDemoComponent implements AfterViewInit, OnDestroy {
  @ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
  shownAt: any;
  shownFor: number;
  private interval: any;
  private sub: Subscription;
  ngAfterViewInit() {
    this.sub = this.popoverInstance.events.subscribe((event: Event) => {

      switch(event.type) {
        case 'shown':
          this.popoverInstance.update();
          this.shownFor = 0;
          this.shownAt = moment();
          this.interval = setInterval(() => {
            this.shownFor = Math.floor((moment().valueOf() - this.shownAt.valueOf())/1000);
            this.popoverInstance.update();
          }, 1000)
          break;
        case 'hide':
          clearInterval(this.interval);
          break;
      }
    })
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
    clearInterval(this.interval);
  }

}

popover-template-demo.component.html

<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{template: dangerTemplate}"
    title="Static Title"
    data-content="Static content.">template: dangerTemplate</button>
</p>
<p>
  <button class="btn btn-primary"
    nzbPopover
    title="Static Title"
    data-content="Static content.">template: (default)</button>
</p>

popover-template-demo.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-popover-template-demo',
  templateUrl: './popover-template-demo.component.html',
})
export class PopoverTemplateDemoComponent {
  dangerTemplate = `
    <div class="popover popover-danger" role="tooltip">
      <div class="arrow"></div>
      <h3 class="popover-header"></h3>
      <div class="popover-body"></div>
    </div>
  `;

}

popover-template.scss

.popover.popover-danger{
  .popover-header {
    background-color: $brand-danger;
    color: #FFF;
  }
}

popover-title-demo.component.html

<p>
  <button class="btn btn-primary"
    nzbPopover
    #popoverInstance="nzbPopover"
    [nzbPopoverTitle]="titleTemplate"
    data-content="Some static content.">Popover (click)</button>
    <ng-template #titleTemplate>
      <div class="clearfix">
        <div class="pull-left">
          Shown {{shownFor}}s
        </div>
        <div class="pull-right">
          <a role="button" class="text-secondary" style="cursor:pointer"
            (click)="popoverInstance.hide()" aria-label="Close">
            <i aria-hidden="true" class="fa fa-times"></i>
          </a>
        </div>
      </div>
    </ng-template>
</p>

popover-title-demo.component.ts

import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NzbPopoverDirective } from 'nowzoo-angular-bootstrap-lite';

@Component({
  selector: 'app-popover-title-demo',
  templateUrl: './popover-title-demo.component.html',
  styles: []
})
export class PopoverTitleDemoComponent implements AfterViewInit, OnDestroy {
  @ViewChild('popoverInstance') popoverInstance: NzbPopoverDirective;
  shownFor: number;
  private interval: any;
  private sub: Subscription;

  constructor() { }

  ngAfterViewInit() {
    this.sub = this.popoverInstance.events.subscribe((event: Event) => {

      switch(event.type) {
        case 'shown':
          this.popoverInstance.update();
          this.shownFor = 0;
          this.interval = setInterval(() => {
            this.shownFor++;
          }, 1000)
          break;
        case 'hide':
          clearInterval(this.interval);
          break;
      }
    })
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
    clearInterval(this.interval);
  }

}

popover-trigger-demo.component.html

<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{trigger: 'click'}"
    title="Static Title"
    data-content="Static content.">trigger: 'click'</button>
    (default)
</p>

<p>
  <button class="btn btn-primary"
    nzbPopover
    [nzbPopoverOptions]="{trigger: 'hover'}"
    title="Static Title"
    data-content="Static content.">trigger: 'hover'</button>
</p>

<p>
  <button class="btn btn-primary"
    nzbPopover
    #manualPopover="nzbPopover"
    [nzbPopoverOptions]="{trigger: 'manual'}"
    title="Static Title"
    data-content="Static content.">trigger: 'manual'</button>

    <button class="btn btn-secondary btn-sm"
      (click)="manualPopover.toggle()">
      Toggle Popover</button>
</p>