docs(modal): add demo for modal window with one tooltip and one popov…

…er in the body of the modal (#3871)

* docs(modal): update branch from development, fix conflicts

* docs(modal): change name of section and description

demo/src/app/components/+modal/demo-modal.module.ts

@@ -9,6 +9,8 @@ import { ModalSectionComponent } from './modal-section.component';
 import { DEMO_COMPONENTS } from './demos';
 import { routes } from './demo-modal.routes';
 import { ModalContentComponent } from './demos/service-component/service-component';
+import { PopoverModule } from 'ngx-bootstrap/popover';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 
 @NgModule({
   declarations: [
@@ -18,6 +20,8 @@ import { ModalContentComponent } from './demos/service-component/service-compone
   ],
   imports: [
     ModalModule.forRoot(),
+    PopoverModule.forRoot(),
+    TooltipModule.forRoot(),
     CommonModule,
     FormsModule,
     DocsModule,

demo/src/app/components/+modal/demos/index.ts

@@ -16,6 +16,7 @@ import { DemoModalServiceEventsComponent } from './service-events/service-events
 import { DemoModalServiceConfirmWindowComponent } from './service-confirm-window/service-confirm-window';
 import { DemoModalScrollingLongContentComponent } from './scrolling-long-content/scrolling-long-content';
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
+import { DemoModalWithPopupsComponent } from './modal-with-popups/modal-with-popups';
 
 export const DEMO_COMPONENTS = [
   DemoModalSizesComponent,
@@ -34,5 +35,6 @@ export const DEMO_COMPONENTS = [
   DemoModalServiceEventsComponent,
   DemoModalServiceConfirmWindowComponent,
   DemoModalScrollingLongContentComponent,
-  DemoAccessibilityComponent
+  DemoAccessibilityComponent,
+  DemoModalWithPopupsComponent
 ];

demo/src/app/components/+modal/demos/modal-with-popups/modal-with-popups.html

@@ -0,0 +1,15 @@
+<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
+<ng-template #template>
+  <div class="modal-header">
+    <h4 class="modal-title pull-left">Modal</h4>
+    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque delectus enim esse excepturi, impedit,
+      iste magnam officia optio, quam quis quisquam saepe sint unde velit vitae! Animi in iusto ut?</p>
+      <button type="button" class="btn btn-primary" popover="Vivamus sagittis">popover</button>
+      <button type="button" class="btn btn-primary" tooltip="Vivamus sagittis">tooltip</button>
+  </div>
+</ng-template>

demo/src/app/components/+modal/demos/modal-with-popups/modal-with-popups.ts

@@ -0,0 +1,16 @@
+import { Component, TemplateRef } from '@angular/core';
+import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+  selector: 'demo-modal-with-popups',
+  templateUrl: './modal-with-popups.html'
+})
+export class DemoModalWithPopupsComponent {
+  modalRef: BsModalRef;
+
+  constructor(private modalService: BsModalService) {}
+
+  openModal(template: TemplateRef<any>) {
+    this.modalRef = this.modalService.show(template);
+  }
+}

demo/src/app/components/+modal/modal-section.list.ts

@@ -15,6 +15,7 @@ import { DemoModalNestedComponent } from './demos/nested/nested';
 import { DemoModalEventsComponent } from './demos/events/events';
 import { DemoAutoShownModalComponent } from './demos/auto-shown/auto-shown';
 import { DemoAccessibilityComponent } from './demos/accessibility/accessibility';
+import { DemoModalWithPopupsComponent } from './demos/modal-with-popups/modal-with-popups';
 
 import { ContentSection } from '../../docs/models/content-section.model';
 import { DemoTopSectionComponent } from '../../docs/demo-section-components/demo-top-section/index';
@@ -130,6 +131,14 @@ export const demoComponentContent: ContentSection[] = [
         description: `<p>There is closing by Esc button option that you can configure.</p>`,
         outlet: DemoModalServiceDisableEscClosingComponent
       },
+      {
+        title: 'Modal window with tooltip and popover',
+        anchor: 'modal-with-popups',
+        component: require('!!raw-loader?lang=typescript!./demos/modal-with-popups/modal-with-popups.ts'),
+        html: require('!!raw-loader?lang=markup!./demos/modal-with-popups/modal-with-popups.html'),
+        description: `<p><code>Tooltips</code> and <code>popovers</code> can be placed within modals as needed. When modals are closed, any <code>tooltips</code> and <code>popovers</code> within are also automatically dismissed.</p>`,
+        outlet: DemoModalWithPopupsComponent
+      },
       {
         title: 'Backdrop options',
         anchor: 'service-disable-backdrop',