feat(bs4): upgrade to v4-alfa.6 (#1485)

* feat(carousel): upgrade carousel to v4-alpha.6

* feat(demo): update api docs to v4-alfa.6

* feat(collapse): upgrade collapse to v4-alpha.6

* feat(datepicker): upgrade datepicker to v4-alpha.6

* feat(dropdown): upgrade to 4.0.0-alpha.6

* feat(modal): upgrade modal to v4-alpha.6

* feat(popover): upgrade modal to v4-alpha.6

* feat(tooltip): upgrade modal to v4-alpha.6

demo/src/app/api-docs/api-doc-class/api-doc-class.component.html

@@ -12,8 +12,8 @@ <h3 id="inputs">Properties</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let prop of apiDocs.properties">
-          <td class="col-md-3"><code>{{prop.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{prop.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
             <template [ngIf]="prop.defaultValue">
               <div><i>Default value: </i><code>{{prop.defaultValue || '-'}}</code></div>
@@ -32,8 +32,8 @@ <h3 id="methods">Methods</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let method of apiDocs.methods">
-          <td class="col-md-3"><code>{{method.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{method.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Signature: </i><code>{{ methodSignature(method) }}</code>
             </div>
             <div><i>Return type: </i><code>{{ method.returnType }}</code></div>

demo/src/app/api-docs/api-doc-config/api-doc-config.component.html

@@ -10,8 +10,8 @@ <h3 id="inputs">Properties</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let prop of apiDocs.properties">
-          <td class="col-md-3"><code>{{prop.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{prop.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Type: </i><code>{{ prop.type }}</code></div>
             <template [ngIf]="prop.defaultValue">
               <div><i>Default value: </i><code>{{prop.defaultValue || '-'}}</code></div>

demo/src/app/api-docs/api-doc/api-doc.component.html

@@ -6,12 +6,12 @@ <h3>
     <table class="table table-sm table-hover">
       <tbody>
         <tr>
-          <td class="col-md-3">Selector</td>
-          <td class="col-md-9"><code>{{apiDocs.selector}}</code></td>
+          <td class="col-xs-3">Selector</td>
+          <td class="col-xs-9"><code>{{apiDocs.selector}}</code></td>
         </tr>
         <tr *ngIf="apiDocs.exportAs">
-          <td class="col-md-3">Exported as</td>
-          <td class="col-md-9"><code>{{apiDocs.exportAs}}</code></td>
+          <td class="col-xs-3">Exported as</td>
+          <td class="col-xs-9"><code>{{apiDocs.exportAs}}</code></td>
         </tr>
       </tbody>
     </table>
@@ -22,8 +22,8 @@ <h3 id="inputs">Inputs</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let input of apiDocs.inputs">
-          <td class="col-md-3"><code>{{input.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{input.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Type: </i><code>{{ input.type }}</code></div>
             <template [ngIf]="defaultInputValue(input) || hasConfigProperty(input)">
               <div>
@@ -45,8 +45,8 @@ <h3 id="outputs">Outputs</h3>
       <table class="table table-sm table-hover">
         <tbody>
           <tr *ngFor="let output of apiDocs.outputs">
-            <td class="col-md-3"><code>{{output.name}}</code></td>
-            <td class="col-md-9"><div [innerHtml]="output.description"></div></td>
+            <td class="col-xs-3"><code>{{output.name}}</code></td>
+            <td class="col-xs-9"><div [innerHtml]="output.description"></div></td>
           </tr>
         </tbody>
       </table>
@@ -59,8 +59,8 @@ <h3 id="methods">Methods</h3>
       <table class="table table-sm table-hover">
         <tbody>
         <tr *ngFor="let method of apiDocs.methods">
-          <td class="col-md-3"><code>{{method.name}}</code></td>
-          <td class="col-md-9">
+          <td class="col-xs-3"><code>{{method.name}}</code></td>
+          <td class="col-xs-9">
             <div><i>Signature: </i><code>{{ methodSignature(method) }}</code></div>
             <div><i>Return type: </i><code>{{ method.returnType }}</code></div>
             <div [innerHtml]="method.description"></div>

demo/src/app/components/carousel/demos/dynamic/dynamic.html

@@ -8,7 +8,8 @@ <h4>Slide {{index}}</h4>
     </div>
   </slide>
 </carousel>
-<div class="panel card">
+<br/>
+<div>
   <button type="button" class="btn btn-info"
           (click)="addSlide()">Add Slide
   </button>
@@ -18,12 +19,12 @@ <h4>Slide {{index}}</h4>
   <button type="button" class="btn btn-info"
           (click)="removeSlide(2)">Remove #3
   </button>
-  <br>
-
+</div>
+<div>
   <div class="checkbox">
     <label><input type="checkbox" [(ngModel)]="noWrapSlides">Disable Slide Looping</label>
   </div>
 
-  <span>Interval, in milliseconds: </span><input type="number" class="form-control" [(ngModel)]="myInterval">
-  <br/><span>Enter a negative number or 0 to stop the interval.</span>
+  <span>Interval, in milliseconds (Enter a negative number or 0 to stop the interval.): </span>
+  <input type="number" class="form-control" [(ngModel)]="myInterval">
 </div>

demo/src/app/components/datepicker/demos/index.ts

@@ -6,7 +6,7 @@ export const DEMO_COMPONENTS = [
 
 export const DEMOS = {
   old: {
-    component: require('!!raw?lang=typescript!./datepicker-demo.component.html'),
-    html: require('!!raw?lang=markup!./datepicker-demo.component')
+    component: require('!!raw?lang=typescript!./datepicker-demo.component.ts'),
+    html: require('!!raw?lang=markup!./datepicker-demo.component.html')
   }
 };

demo/src/app/components/dropdown/todo.md

@@ -9,3 +9,9 @@
 - disabled menu items
 - manual
 - config
+
++ config:
+   /** if true dropdown will be initially opened */
+    public isOpen:boolean = false;
++ config dropup
++ fix append to body

demo/src/app/components/modal/demos/child/child.html

@@ -3,10 +3,10 @@
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="hideChildModal()">
+        <h4 class="modal-title pull-left">Child modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="hideChildModal()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Child modal</h4>
       </div>
       <div class="modal-body">
         I am a child modal, opened from parent component!

demo/src/app/components/modal/demos/sizes/sizes.html

@@ -5,10 +5,10 @@
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
+        <h4 class="modal-title pull-left">Large modal</h4>
+        <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Large modal</h4>
       </div>
       <div class="modal-body">
         ...
@@ -25,10 +25,10 @@ <h4 class="modal-title">Large modal</h4>
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="smModal.hide()">
+        <h4 class="modal-title pull-left">Small modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="smModal.hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Small modal</h4>
       </div>
       <div class="modal-body">
         ...

demo/src/app/components/modal/demos/static/static.html

@@ -5,10 +5,10 @@
   <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close" aria-label="Close" (click)="staticModal.hide()">
+        <h4 class="modal-title pull-left">Static modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
           <span aria-hidden="true">&times;</span>
         </button>
-        <h4 class="modal-title">Static modal</h4>
       </div>
       <div class="modal-body">
         This is static modal, backdrop click will not close it.

demo/src/app/components/todo.md

@@ -10,7 +10,7 @@ for all add support of:
 + add input config
 + forms integration
 + mobile events
-+ theming
++ theming (it blocks bs4 testing)
 
 + breadcrumb
 + scrollspy

src/carousel/carousel.component.ts

@@ -34,12 +34,12 @@ export enum Direction {UNKNOWN, NEXT, PREV}
          <li *ngFor="let slidez of slides; let i = index;" [class.active]="slidez.active === true" (click)="selectSlide(i)"></li>
       </ol>
       <div class="carousel-inner"><ng-content></ng-content></div>
-      <a class="left carousel-control" [class.disabled]="activeSlide === 0 && noWrap" (click)="previousSlide()" *ngIf="slides.length > 1">
-        <span class="icon-prev" aria-hidden="true"></span>
+      <a class="left carousel-control-prev" [class.disabled]="activeSlide === 0 && noWrap" (click)="previousSlide()" *ngIf="slides.length > 1">
+        <span class="icon-prev carousel-control-prev-icon" aria-hidden="true"></span>
         <span *ngIf="isBs4" class="sr-only">Previous</span>
       </a>
-      <a class="right carousel-control" (click)="nextSlide()"  [class.disabled]="isLast(activeSlide) && noWrap" *ngIf="slides.length > 1">
-        <span class="icon-next" aria-hidden="true"></span>
+      <a class="right carousel-control-next" (click)="nextSlide()"  [class.disabled]="isLast(activeSlide) && noWrap" *ngIf="slides.length > 1">
+        <span class="icon-next carousel-control-next-icon" aria-hidden="true"></span>
         <span *ngIf="isBs4" class="sr-only">Next</span>
       </a>
     </div>
@@ -70,7 +70,7 @@ export class CarouselComponent implements OnDestroy {
   protected _interval: number;
 
   /**
-   * Delay of item cycling in milliseconds. If false, carousel won't cycle automatically. 
+   * Delay of item cycling in milliseconds. If false, carousel won't cycle automatically.
    */
   @Input()
   public get interval(): number {

src/collapse/collapse.directive.ts

@@ -5,7 +5,10 @@ import {
 } from '@angular/core';
 
 @Directive({
-  selector: '[collapse]'/*,
+  selector: '[collapse]',
+  exportAs: 'bs-collapse',
+  /* tslint:disable-next-line */
+  host: {'[class.collapse]': 'true'}/*,
   animations: [
     trigger('active', [
       state('void', style({height: 0})),
@@ -27,6 +30,7 @@ export class CollapseDirective {
   public display: string;
   // shown
   @HostBinding('class.in')
+  @HostBinding('class.show')
   @HostBinding('attr.aria-expanded')
   public isExpanded: boolean = true;
   // hidden

src/datepicker/daypicker.component.ts

@@ -52,18 +52,18 @@ const TEMPLATE_OPTIONS: any = {
     </tr>
     <tr>
       <th *ngIf="datePicker.showWeeks"></th>
-      <th *ngFor="let labelz of labels" [ngClass]="{'text-xs-center':isBs4, 'text-center': !isBs4}">
+      <th *ngFor="let labelz of labels" class="text-center">
         <small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small>
       </th>
     </tr>
   </thead>
   <tbody>
     <template ngFor [ngForOf]="rows" let-rowz="$implicit" let-index="index">
       <tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].secondary)">
-        <td *ngIf="datePicker.showWeeks" class="h6" [ngClass]="{'text-xs-center':isBs4, 'text-center': !isBs4}">
+        <td *ngIf="datePicker.showWeeks" class="h6" class="text-center">
           <em>{{ weekNumbers[index] }}</em>
         </td>
-        <td *ngFor="let dtz of rowz" [ngClass]="{'text-xs-center':isBs4, 'text-center': !isBs4}" role="gridcell" [id]="dtz.uid">
+        <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
           <button type="button" style="min-width:100%;" class="btn btn-sm {{dtz.customClass}}"
                   *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
                   [ngClass]="{'btn-secondary': isBs4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected, disabled: dtz.disabled, active: !isBs4 && datePicker.isActive(dtz), 'btn-default': !isBs4}"

src/dropdown/dropdown.directive.ts

@@ -3,6 +3,7 @@ import {
   ChangeDetectorRef, Directive, ElementRef, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output
 } from '@angular/core';
 
+import { isBs3 } from '../utils/ng2-bootstrap-config';
 import { dropdownService } from './dropdown.service';
 import { DropdownConfig } from './dropdown.config';
 
@@ -11,18 +12,20 @@ import { DropdownConfig } from './dropdown.config';
  */
 @Directive({
   selector: '[dropdown]',
-  exportAs: 'bs-dropdown'
+  exportAs: 'bs-dropdown',
+  //tslint:disable-next-line
+  host: {'[class.show]': 'isOpen && !isBs3'}
 })
 export class DropdownDirective implements OnInit, OnDestroy {
   /** if `true` dropdown will be opened */
   @HostBinding('class.open')
   @HostBinding('class.active')
   @Input()
-  public get isOpen():boolean {
+  public get isOpen(): boolean {
     return this._isOpen;
   }
 
-  public set isOpen(value:boolean) {
+  public set isOpen(value: boolean) {
     this._isOpen = !!value;
 
     // todo: implement after porting position
@@ -51,31 +54,35 @@ export class DropdownDirective implements OnInit, OnDestroy {
    * - outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown
    * - disabled - disables the auto close. You can then control the open/close status of the dropdown manually, by using is-open. Please notice that the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open
    */
-  @Input() public autoClose:string;
+  @Input() public autoClose: string;
   /** if true will enable navigation of dropdown list elements with the arrow keys */
-  @Input() public keyboardNav:boolean;
+  @Input() public keyboardNav: boolean;
   // enum string: ['always', 'outsideClick', 'disabled']
   /** Allows to attach dropdown to body, will be replaced with container="body" */
-  @Input() public appendToBody:boolean;
+  @Input() public appendToBody: boolean;
 
   /** fired when dropdown toggles, $event:boolean equals dropdown isOpen state */
-  @Output() public onToggle:EventEmitter<boolean> = new EventEmitter<boolean>(false);
+  @Output() public onToggle: EventEmitter<boolean> = new EventEmitter<boolean>(false);
   /** fired when isOpen value changes */
-  @Output() public isOpenChange:EventEmitter<boolean> = new EventEmitter<boolean>(false);
-  @HostBinding('class.dropdown') public addClass:boolean = true;
+  @Output() public isOpenChange: EventEmitter<boolean> = new EventEmitter<boolean>(false);
+  @HostBinding('class.dropdown') public addClass: boolean = true;
+
+  public get isBs3(): boolean {
+    return isBs3();
+  }
 
   // index of selected element
-  public selectedOption:number;
+  public selectedOption: number;
   // drop menu html
-  public menuEl:ElementRef;
+  public menuEl: ElementRef;
   // drop down toggle element
-  public toggleEl:ElementRef;
-  public el:ElementRef;
-  protected _isOpen:boolean;
+  public toggleEl: ElementRef;
+  public el: ElementRef;
+  protected _isOpen: boolean;
 
-  protected _changeDetector:ChangeDetectorRef;
+  protected _changeDetector: ChangeDetectorRef;
 
-  public constructor(el:ElementRef, ref:ChangeDetectorRef, config: DropdownConfig) {
+  public constructor(el: ElementRef, ref: ChangeDetectorRef, config: DropdownConfig) {
     // @Query('dropdownMenu', {descendants: false})
     // dropdownMenuList:QueryList<ElementRef>) {
     this.el = el;
@@ -84,19 +91,19 @@ export class DropdownDirective implements OnInit, OnDestroy {
     // todo: bind to route change event
   }
 
-  public ngOnInit():void {
+  public ngOnInit(): void {
     if (this.isOpen) {
       // todo: watch for event get-isOpen?
     }
   }
 
-  public ngOnDestroy():void {
+  public ngOnDestroy(): void {
     if (this.appendToBody && this.menuEl) {
       this.menuEl.nativeElement.remove();
     }
   }
 
-  public set dropDownMenu(dropdownMenu:{el:ElementRef}) {
+  public set dropDownMenu(dropdownMenu: { el: ElementRef }) {
     // init drop down menu
     this.menuEl = dropdownMenu.el;
 
@@ -105,16 +112,24 @@ export class DropdownDirective implements OnInit, OnDestroy {
     }
   }
 
-  public set dropDownToggle(dropdownToggle:{el:ElementRef}) {
+  public set dropDownToggle(dropdownToggle: { el: ElementRef }) {
     // init toggle element
     this.toggleEl = dropdownToggle.el;
   }
 
-  public toggle(open?:boolean):boolean {
+  public show():void {
+    this.isOpen = true;
+  }
+
+  public hide():void {
+    this.isOpen = false;
+  }
+
+  public toggle(open?: boolean): boolean {
     return this.isOpen = arguments.length ? !!open : !this.isOpen;
   }
 
-  public focusDropdownEntry(keyCode:number):void {
+  public focusDropdownEntry(keyCode: number): void {
     // If append to body is used.
     let hostEl = this.menuEl ?
       this.menuEl.nativeElement :
@@ -165,7 +180,7 @@ export class DropdownDirective implements OnInit, OnDestroy {
     elems[this.selectedOption].focus();
   }
 
-  public focusToggleElement():void {
+  public focusToggleElement(): void {
     if (this.toggleEl) {
       this.toggleEl.nativeElement.focus();
     }