fix(bs4): fix dropdown, tooltip, popover, datepicker, accordion for b…

…s4 beta (#2418)

scripts/generate-bs4.js

@@ -8,7 +8,7 @@ const files = {
 const toReplace = [
   {
     from: '<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">',
-    to: `<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
+    to: `<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/glyphicons.css">`
   }, {
     from: '<script src="assets/js/prettify.min.js"></script>',

src/accordion/accordion-group.component.ts

@@ -16,15 +16,15 @@ import { AccordionComponent } from './accordion.component';
   template: `
     <div class="panel card" [ngClass]="panelClass">
       <div class="panel-heading card-header" role="tab" (click)="toggleOpen($event)">
-        <div class="panel-title card-title">
+        <div class="panel-title">
           <div role="button" class="accordion-toggle" [attr.aria-expanded]="isOpen">
             <div *ngIf="heading"[ngClass]="{'text-muted': isDisabled}">{{heading}}</div>
             <ng-content select="[accordion-heading]"></ng-content>
           </div>
         </div>
       </div>
       <div class="panel-collapse collapse" role="tabpanel" [collapse]="!isOpen">
-        <div class="panel-body card-block">
+        <div class="panel-body card-block card-body">
           <ng-content></ng-content>
         </div>
       </div>

src/datepicker/daypicker.component.ts

@@ -11,14 +11,14 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
       <th>
         <button *ngIf="!isBs4"
                 type="button"
-                class="btn btn-default btn-secondary btn-sm pull-left"
+                class="btn btn-default btn-secondary btn-sm pull-left float-left"
                 (click)="datePicker.move(-1)"
                 tabindex="-1">
           <i class="glyphicon glyphicon-chevron-left"></i>
         </button>
         <button *ngIf="isBs4"
                 type="button"
-                class="btn btn-default btn-secondary btn-sm pull-left"
+                class="btn btn-default btn-secondary btn-sm pull-left float-left"
                 (click)="datePicker.move(-1)"
                 tabindex="-1">&lt;
         </button>
@@ -35,14 +35,14 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
       <th>
         <button *ngIf="!isBs4"
                 type="button"
-                class="btn btn-default btn-secondary btn-sm pull-right"
+                class="btn btn-default btn-secondary btn-sm pull-right float-right"
                 (click)="datePicker.move(1)"
                 tabindex="-1">
           <i  class="glyphicon glyphicon-chevron-right"></i>
         </button>
         <button *ngIf="isBs4"
                 type="button"
-                class="btn btn-default btn-secondary btn-sm pull-right"
+                class="btn btn-default btn-secondary btn-sm pull-right float-right"
                 (click)="datePicker.move(1)"
                 tabindex="-1">&gt;
         </button>
@@ -74,7 +74,17 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
     </template>
   </tbody>
 </table>
-  `
+  `,
+  styles: [`
+    :host .btn-secondary {
+      color: #292b2c;
+      background-color: #fff;
+      border-color: #ccc;
+    }
+    :host .btn-info .text-muted {
+      color: #292b2c !important;
+    }
+  `]
 })
 export class DayPickerComponent implements OnInit {
 

src/datepicker/monthpicker.component.ts

@@ -10,7 +10,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
   <thead>
     <tr>
       <th>
-        <button type="button" class="btn btn-default btn-sm pull-left"
+        <button type="button" class="btn btn-default btn-sm pull-left float-left"
                 (click)="datePicker.move(-1)" tabindex="-1">
           <i class="glyphicon glyphicon-chevron-left"></i>
         </button></th>
@@ -24,7 +24,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
         </button>
       </th>
       <th>
-        <button type="button" class="btn btn-default btn-sm pull-right"
+        <button type="button" class="btn btn-default btn-sm pull-right float-right"
                 (click)="datePicker.move(1)" tabindex="-1">
           <i class="glyphicon glyphicon-chevron-right"></i>
         </button>
@@ -44,7 +44,12 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
     </tr>
   </tbody>
 </table>
-  `
+  `,
+  styles: [`
+    :host .btn-info .text-success {
+      color: #fff !important;
+    }
+  `]
 })
 export class MonthPickerComponent implements OnInit {
   public title:string;

src/datepicker/yearpicker.component.ts

@@ -10,7 +10,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
   <thead>
     <tr>
       <th>
-        <button type="button" class="btn btn-default btn-sm pull-left"
+        <button type="button" class="btn btn-default btn-sm pull-left float-left"
                 (click)="datePicker.move(-1)" tabindex="-1">
           <i class="glyphicon glyphicon-chevron-left"></i>
         </button>
@@ -25,7 +25,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
         </button>
       </th>
       <th>
-        <button type="button" class="btn btn-default btn-sm pull-right"
+        <button type="button" class="btn btn-default btn-sm pull-right float-right"
                 (click)="datePicker.move(1)" tabindex="-1">
           <i class="glyphicon glyphicon-chevron-right"></i>
         </button>
@@ -45,7 +45,12 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
     </tr>
   </tbody>
 </table>
-  `
+  `,
+  styles: [`
+    :host .btn-info .text-success {
+      color: #fff !important;
+    }
+  `]
 })
 export class YearPickerComponent implements OnInit {
   public datePicker:DatePickerInnerComponent;

src/dropdown/bs-dropdown-container.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, Renderer } from '@angular/core';
 import { BsDropdownState } from './bs-dropdown.state';
 
 @Component({
@@ -23,9 +23,21 @@ export class BsDropdownContainerComponent implements OnDestroy {
 
   private _subscription: any;
 
-  constructor(private _state: BsDropdownState, private cd: ChangeDetectorRef) {
+  constructor(private _state: BsDropdownState, private cd: ChangeDetectorRef, private _renderer: Renderer, _element: ElementRef) {
     this._subscription = _state.isOpenChange.subscribe((value: boolean) => {
       this.isOpen = value;
+      const dropdown = _element.nativeElement.querySelector('.dropdown-menu');
+      if (dropdown) {
+        this._renderer.setElementClass(dropdown, 'show', true);
+        if (dropdown.classList.contains('dropdown-menu-right')) {
+          this._renderer.setElementStyle(dropdown, 'left', 'auto');
+          this._renderer.setElementStyle(dropdown, 'right', '0');
+        }
+        if (this.direction === 'up') {
+          this._renderer.setElementStyle(dropdown, 'top', 'auto');
+          this._renderer.setElementStyle(dropdown, 'transform', 'translateY(-101%)');
+        }
+      }
       this.cd.markForCheck();
       this.cd.detectChanges();
     });

src/dropdown/bs-dropdown.directive.ts

@@ -178,9 +178,10 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
           .then((dropdownMenu: BsComponentRef<BsDropdownMenuDirective>) => {
             this._dropdown.attachInline(dropdownMenu.viewContainer, dropdownMenu.templateRef);
             this._inlinedMenu = this._dropdown._inlineViewRef;
+            this.addBs4Polyfills();
           });
       }
-
+      this.addBs4Polyfills();
       this._isInlineOpen = true;
       this.onShown.emit(true);
       this._state.isOpenChange.emit(true);
@@ -220,6 +221,7 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     }
 
     if (this._showInline) {
+      this.removeShowClass();
       this._isInlineOpen = false;
       this.onHidden.emit(true);
     } else {
@@ -248,4 +250,42 @@ export class BsDropdownDirective implements OnInit, OnDestroy {
     }
     this._dropdown.dispose();
   }
+
+  private addBs4Polyfills(): void {
+    if (!isBs3()) {
+      this.addShowClass();
+      this.checkRightAlignment();
+      this.checkDropup();
+    }
+  }
+
+  private addShowClass(): void {
+    if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
+      this._renderer.setElementClass(this._inlinedMenu.rootNodes[0], 'show', true);
+    }
+  }
+
+  private removeShowClass(): void {
+    if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
+      this._renderer.setElementClass(this._inlinedMenu.rootNodes[0], 'show', false);
+    }
+  }
+
+  private checkRightAlignment(): void {
+    if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
+      const isRightAligned = this._inlinedMenu.rootNodes[0].classList.contains('dropdown-menu-right');
+      this._renderer.setElementStyle(this._inlinedMenu.rootNodes[0], 'left', isRightAligned ? 'auto' : '0');
+      this._renderer.setElementStyle(this._inlinedMenu.rootNodes[0], 'right', isRightAligned ? '0' : 'auto');
+    }
+  }
+
+  private checkDropup(): void {
+    if (this._inlinedMenu && this._inlinedMenu.rootNodes[0]) {
+      // a little hack to not break support of bootstrap 4 beta
+      const top = getComputedStyle(this._inlinedMenu.rootNodes[0])['top'];
+      const topAuto = top === 'auto' || top === '100%';
+      this._renderer.setElementStyle(this._inlinedMenu.rootNodes[0], 'top', this.dropup ? 'auto' : '100%');
+      this._renderer.setElementStyle(this._inlinedMenu.rootNodes[0], 'transform', this.dropup && !topAuto ? 'translateY(-101%)' : 'translateY(0)');
+    }
+  }
 }

src/pagination/pager.component.ts

@@ -11,10 +11,10 @@ export const PAGER_CONTROL_VALUE_ACCESSOR: any = {
 
 const PAGER_TEMPLATE = `
     <ul class="pager">
-      <li [class.disabled]="noPrevious()" [class.previous]="align" [ngClass]="{'pull-right': align}" class="{{ pageBtnClass }}">
+      <li [class.disabled]="noPrevious()" [class.previous]="align" [ngClass]="{'pull-right': align, 'float-right': align}" class="{{ pageBtnClass }}">
         <a href (click)="selectPage(page - 1, $event)">{{getText('previous')}}</a>
       </li>
-      <li [class.disabled]="noNext()" [class.next]="align" [ngClass]="{'pull-right': align}" class="{{ pageBtnClass }}">
+      <li [class.disabled]="noNext()" [class.next]="align" [ngClass]="{'pull-right': align, 'float-right': align}" class="{{ pageBtnClass }}">
         <a href (click)="selectPage(page + 1, $event)">{{getText('next')}}</a>
       </li>
   </ul>

src/popover/popover-container.component.ts

@@ -7,14 +7,22 @@ import { isBs3 } from '../utils/ng2-bootstrap-config';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line
   host: {
-    '[class]': '"popover in popover-" + placement + " " + placement + " " + containerClass',
+    '[class]': '"popover in popover-" + placement + " " + "bs-popover-" + placement + " " + placement + " " + containerClass',
     '[class.show]': '!isBs3',
     role: 'tooltip',
     style: 'display:block;'
   },
+  styles: [`
+    :host.bs-popover-top .arrow, :host.bs-popover-bottom .arrow {
+      left: calc(50% - 5px);
+    }
+    :host.bs-popover-left .arrow, :host.bs-popover-right .arrow {
+      top: calc(50% - 2.5px);
+    }
+  `],
   template: `
 <div class="popover-arrow arrow"></div>
-<h3 class="popover-title" *ngIf="title">{{title}}</h3><div class="popover-content"><ng-content></ng-content></div>
+<h3 class="popover-title popover-header" *ngIf="title">{{title}}</h3><div class="popover-content popover-body"><ng-content></ng-content></div>
     `
 })
 export class PopoverContainerComponent {

src/positioning/ng-positioning.ts

@@ -80,6 +80,7 @@ export class Positioning {
   public positionElements(hostElement: HTMLElement, targetElement: HTMLElement, placement: string, appendToBody?: boolean):
   ClientRect {
     const hostElPosition = appendToBody ? this.offset(hostElement, false) : this.position(hostElement, false);
+    const targetElStyles = this.getAllStyles(targetElement);
     const shiftWidth: any = {
       left: hostElPosition.left,
       center: hostElPosition.left + hostElPosition.width / 2 - targetElement.offsetWidth / 2,
@@ -105,7 +106,7 @@ export class Positioning {
 
     switch (placementPrimary) {
       case 'top':
-        targetElPosition.top = hostElPosition.top - targetElement.offsetHeight;
+        targetElPosition.top = hostElPosition.top - (targetElement.offsetHeight + parseFloat(targetElStyles.marginBottom));
         targetElPosition.bottom += hostElPosition.top - targetElement.offsetHeight;
         targetElPosition.left = shiftWidth[placementSecondary];
         targetElPosition.right += shiftWidth[placementSecondary];
@@ -119,7 +120,7 @@ export class Positioning {
       case 'left':
         targetElPosition.top = shiftHeight[placementSecondary];
         targetElPosition.bottom += shiftHeight[placementSecondary];
-        targetElPosition.left = hostElPosition.left - targetElement.offsetWidth;
+        targetElPosition.left = hostElPosition.left - (targetElement.offsetWidth + parseFloat(targetElStyles.marginRight));
         targetElPosition.right += hostElPosition.left - targetElement.offsetWidth;
         break;
       case 'right':
@@ -138,7 +139,9 @@ export class Positioning {
     return targetElPosition;
   }
 
-  private getStyle(element: HTMLElement, prop: string): string { return (window.getComputedStyle(element) as any)[prop]; }
+  private getAllStyles(element: HTMLElement) { return window.getComputedStyle(element); }
+
+  private getStyle(element: HTMLElement, prop: string): string { return (this.getAllStyles(element) as any)[prop]; }
 
   private isStaticPositioned(element: HTMLElement): boolean {
     return (this.getStyle(element, 'position') || 'static') === 'static';

src/tooltip/tooltip-container.component.ts

@@ -9,12 +9,20 @@ import { isBs3 } from '../utils/ng2-bootstrap-config';
   changeDetection: ChangeDetectionStrategy.OnPush,
   // tslint:disable-next-line
   host: {
-    '[class]': '"tooltip in tooltip-" + placement + " " + placement + " " + containerClass',
+    '[class]': '"tooltip in tooltip-" + placement + " " + "bs-tooltip-" + placement + " " + placement + " " + containerClass',
     '[class.show]': '!isBs3',
     role: 'tooltip'
   },
+  styles: [`
+    :host.bs-tooltip-top .arrow, :host.bs-tooltip-bottom .arrow {
+      left: calc(50% - 2.5px);
+    }
+    :host.bs-tooltip-left .arrow, :host.bs-tooltip-right .arrow {
+      top: calc(50% - 2.5px);
+    }
+  `],
   template: `
-    <div class="tooltip-arrow"></div>
+    <div class="tooltip-arrow arrow"></div>
     <div class="tooltip-inner"><ng-content></ng-content></div>
     `
   // template: `<div class="tooltip" role="tooltip"