fix(tests): fixed tests, change renderer to renderer2

demo/src/app/common/main-menu/main-menu.component.ts

@@ -6,7 +6,7 @@ import { StyleManager } from '../../theme/style-manager';
 import { ThemeStorage } from '../../theme/theme-storage';
 
 const _bs3Css =
-  'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
+  '/assets/css/bootstrap.min.css';
 const _bs4Css =
   'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css';
 

demo/src/index.html

@@ -17,7 +17,7 @@
 
   <!--link to bootstrap.css-->
   <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">-->
-  <link rel="stylesheet" class="style-manager-theme" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <link rel="stylesheet" class="style-manager-theme" href="/assets/css/bootstrap.min.css">
   <!--<link rel="stylesheet" href="assets/css/style.css">-->
   <!--<link rel="stylesheet" href="assets/css/prettify-angulario.css">-->
 

demo/src/ng-api-doc.ts

@@ -1190,7 +1190,7 @@ export const ngdoc: any = {
       },
       {
         "name": "setEventHandlers",
-        "description": "<p>event handlers</p>\n",
+        "description": "<p>event handlers </p>\n",
         "args": [
           {
             "name": "container",
@@ -1623,6 +1623,25 @@ export const ngdoc: any = {
     "methods": [],
     "properties": []
   },
+  "BsModalRef": {
+    "fileName": "src/modal/bs-modal-ref.service.ts",
+    "className": "BsModalRef",
+    "description": "",
+    "methods": [],
+    "properties": [
+      {
+        "name": "content",
+        "type": "any",
+        "description": "<p>Reference to a component inside the modal. Null if modal&#39;s been created with TemplateRef</p>\n"
+      },
+      {
+        "name": "hide",
+        "defaultValue": "Function",
+        "type": "() => void",
+        "description": "<p>Hides the modal</p>\n"
+      }
+    ]
+  },
   "BsModalService": {
     "fileName": "src/modal/bs-modal.service.ts",
     "className": "BsModalService",
@@ -1645,7 +1664,7 @@ export const ngdoc: any = {
       },
       {
         "name": "checkScrollbar",
-        "description": "<p>AFTER PR MERGE MODAL.COMPONENT WILL BE USING THIS CODE\nScroll bar tricks </p>\n",
+        "description": "<p>AFTER PR MERGE MODAL.COMPONENT WILL BE USING THIS CODE \nScroll bar tricks </p>\n",
         "args": [],
         "returnType": "void"
       }
@@ -1686,7 +1705,7 @@ export const ngdoc: any = {
       {
         "name": "backdrop",
         "type": "boolean | \"static\"",
-        "description": "<p>Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn&#39;t close the modal on click.</p>\n"
+        "description": "<p>Includes a modal-backdrop element. Alternatively,\nspecify static for a backdrop which doesn&#39;t close the modal on click.</p>\n"
       },
       {
         "name": "class",
@@ -1710,26 +1729,6 @@ export const ngdoc: any = {
       }
     ]
   },
-  "BsModalRef": {
-    "fileName": "src/modal/modal-options.class.ts",
-    "className": "BsModalRef",
-    "description": "",
-    "methods": [
-      {
-        "name": "hide",
-        "description": "<p>Hides the modal</p>\n",
-        "args": [],
-        "returnType": "void"
-      }
-    ],
-    "properties": [
-      {
-        "name": "content",
-        "type": "any",
-        "description": "<p>Reference to a component inside the modal. Null if modal&#39;s been created with TemplateRef</p>\n"
-      }
-    ]
-  },
   "ModalDirective": {
     "fileName": "src/modal/modal.directive.ts",
     "className": "ModalDirective",
@@ -1896,7 +1895,7 @@ export const ngdoc: any = {
       },
       {
         "name": "pageChanged",
-        "description": "<p>fired when page was changed, $event:{page, itemsPerPage} equals to object with current page index and number of items per page </p>\n"
+        "description": "<p>fired when page was changed, $event:{page, itemsPerPage} equals to\nobject with current page index and number of items per page</p>\n"
       }
     ],
     "properties": [],
@@ -2167,7 +2166,7 @@ export const ngdoc: any = {
       {
         "name": "targetAttachment",
         "type": "string",
-        "description": "<p>A string similar to <code>attachment</code>. The one difference is that, if it&#39;s not provided, <code>targetAttachment</code> will assume the mirror image of <code>attachment</code>. </p>\n"
+        "description": "<p>A string similar to <code>attachment</code>. The one difference is that, if it&#39;s not provided,\n<code>targetAttachment</code> will assume the mirror image of <code>attachment</code>.</p>\n"
       },
       {
         "name": "targetOffset",

demo/src/ngsw-manifest.json

@@ -10,7 +10,7 @@
   "external": {
     "urls": [
       {
-        "url": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+        "url": "/assets/css/bootstrap.min.css"
       },
       {
         "url": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"

scripts/bs-config.js

@@ -1,8 +1,7 @@
 module.exports = {
   port: 4200,
   server: {
-    // baseDir: './gh-pages',
-    baseDir: './demo/dist',
+    baseDir: './gh-pages',
     middleware : { 1 : require('compression')()}
   }
 };

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

@@ -4,7 +4,7 @@ import {
   Component,
   ElementRef,
   OnDestroy,
-  Renderer
+  Renderer2
 } from '@angular/core';
 import { BsDropdownState } from './bs-dropdown.state';
 
@@ -33,21 +33,21 @@ export class BsDropdownContainerComponent implements OnDestroy {
   constructor(
     private _state: BsDropdownState,
     private cd: ChangeDetectorRef,
-    private _renderer: Renderer,
+    private _renderer: Renderer2,
     _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);
+        this._renderer.addClass(dropdown, 'show');
         if (dropdown.classList.contains('dropdown-menu-right')) {
-          this._renderer.setElementStyle(dropdown, 'left', 'auto');
-          this._renderer.setElementStyle(dropdown, 'right', '0');
+          this._renderer.setStyle(dropdown, 'left', 'auto');
+          this._renderer.setStyle(dropdown, 'right', '0');
         }
         if (this.direction === 'up') {
-          this._renderer.setElementStyle(dropdown, 'top', 'auto');
-          this._renderer.setElementStyle(
+          this._renderer.setStyle(dropdown, 'top', 'auto');
+          this._renderer.setStyle(
             dropdown,
             'transform',
             'translateY(-101%)'

src/modal/bs-modal.service.ts

@@ -2,7 +2,7 @@ import {
   ComponentRef,
   Injectable,
   TemplateRef,
-  EventEmitter, Renderer2
+  EventEmitter, Renderer2, RendererFactory2
 } from '@angular/core';
 
 import { ComponentLoader } from '../component-loader/component-loader.class';

src/modal/modal-backdrop.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, Renderer } from '@angular/core';
+import { Component, ElementRef, OnInit, Renderer2 } from '@angular/core';
 
 import { CLASS_NAME } from './modal-options.class';
 import { isBs3 } from '../utils/theme-provider';
@@ -27,37 +27,48 @@ export class ModalBackdropComponent implements OnInit {
 
   set isShown(value: boolean) {
     this._isShown = value;
-    this.renderer.setElementClass(
-      this.element.nativeElement,
-      `${CLASS_NAME.IN}`,
-      value
-    );
-    if (!isBs3()) {
-      this.renderer.setElementClass(
+    if (value) {
+      this.renderer.addClass(
+        this.element.nativeElement,
+        `${CLASS_NAME.IN}`
+      );
+    } else {
+      this.renderer.removeClass(
         this.element.nativeElement,
-        `${CLASS_NAME.SHOW}`,
-        value
+        `${CLASS_NAME.IN}`
       );
     }
+    if (!isBs3()) {
+      if (value) {
+        this.renderer.addClass(
+          this.element.nativeElement,
+          `${CLASS_NAME.SHOW}`
+        );
+      } else {
+        this.renderer.removeClass(
+          this.element.nativeElement,
+          `${CLASS_NAME.SHOW}`
+        );
+      }
+    }
   }
 
   element: ElementRef;
-  renderer: Renderer;
+  renderer: Renderer2;
 
   protected _isAnimated: boolean;
   protected _isShown = false;
 
-  constructor(element: ElementRef, renderer: Renderer) {
+  constructor(element: ElementRef, renderer: Renderer2) {
     this.element = element;
     this.renderer = renderer;
   }
 
   ngOnInit(): void {
     if (this.isAnimated) {
-      this.renderer.setElementClass(
+      this.renderer.addClass(
         this.element.nativeElement,
-        `${CLASS_NAME.FADE}`,
-        this.isAnimated
+        `${CLASS_NAME.FADE}`
       );
       Utils.reflow(this.element.nativeElement);
     }

src/modal/modal-container.component.ts

@@ -4,7 +4,7 @@ import {
   HostListener,
   OnDestroy,
   OnInit,
-  Renderer
+  Renderer2
 } from '@angular/core';
 import {
   CLASS_NAME,
@@ -40,37 +40,35 @@ export class ModalContainerComponent implements OnInit, OnDestroy {
   constructor(options: ModalOptions,
               protected _element: ElementRef,
               private bsModalService: BsModalService,
-              private _renderer: Renderer) {
+              private _renderer: Renderer2) {
     this.config = Object.assign({}, options);
   }
 
   ngOnInit(): void {
     if (this.isAnimated) {
-      this._renderer.setElementClass(
+      this._renderer.addClass(
         this._element.nativeElement,
-        CLASS_NAME.FADE,
-        true
+        CLASS_NAME.FADE
       );
     }
-    this._renderer.setElementStyle(
+    this._renderer.setStyle(
       this._element.nativeElement,
       'display',
       'block'
     );
     setTimeout(() => {
       this.isShown = true;
-      this._renderer.setElementClass(
+      this._renderer.addClass(
         this._element.nativeElement,
-        isBs3() ? CLASS_NAME.IN : CLASS_NAME.SHOW,
-        true
+        isBs3() ? CLASS_NAME.IN : CLASS_NAME.SHOW
       );
     }, this.isAnimated ? TRANSITION_DURATIONS.BACKDROP : 0);
     if (document && document.body) {
       if (this.bsModalService.getModalsCount() === 1) {
         this.bsModalService.checkScrollbar();
         this.bsModalService.setScrollbar();
       }
-      this._renderer.setElementClass(document.body, CLASS_NAME.OPEN, true);
+      this._renderer.addClass(document.body, CLASS_NAME.OPEN);
     }
   }
 
@@ -109,10 +107,9 @@ export class ModalContainerComponent implements OnInit, OnDestroy {
       return;
     }
     this.isModalHiding = true;
-    this._renderer.setElementClass(
+    this._renderer.removeClass(
       this._element.nativeElement,
-      isBs3() ? CLASS_NAME.IN : CLASS_NAME.SHOW,
-      false
+      isBs3() ? CLASS_NAME.IN : CLASS_NAME.SHOW
     );
     setTimeout(() => {
       this.isShown = false;
@@ -121,7 +118,7 @@ export class ModalContainerComponent implements OnInit, OnDestroy {
         document.body &&
         this.bsModalService.getModalsCount() === 1
       ) {
-        this._renderer.setElementClass(document.body, CLASS_NAME.OPEN, false);
+        this._renderer.removeClass(document.body, CLASS_NAME.OPEN);
       }
       this.bsModalService.hide(this.level);
       this.isModalHiding = false;

src/pagination/pager.component.ts

@@ -2,7 +2,7 @@ import {
   Component,
   ElementRef,
   OnInit,
-  Renderer,
+  Renderer2,
   Input,
   Output,
   EventEmitter,
@@ -115,7 +115,7 @@ export class PagerComponent implements ControlValueAccessor, OnInit {
   onChange: any = Function.prototype;
   onTouched: any = Function.prototype;
 
-  renderer: Renderer;
+  renderer: Renderer2;
   elementRef: ElementRef;
 
   classMap: string;
@@ -127,7 +127,7 @@ export class PagerComponent implements ControlValueAccessor, OnInit {
   protected inited = false;
   protected _page = 1;
 
-  constructor(renderer: Renderer,
+  constructor(renderer: Renderer2,
               elementRef: ElementRef,
               paginationConfig: PaginationConfig) {
     this.renderer = renderer;

src/pagination/pagination.component.ts

@@ -5,7 +5,7 @@ import {
   Input,
   OnInit,
   Output,
-  Renderer,
+  Renderer2,
   forwardRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -119,7 +119,7 @@ export class PaginationComponent implements ControlValueAccessor, OnInit {
 
   onChange: any = Function.prototype;
   onTouched: any = Function.prototype;
-  renderer: Renderer;
+  renderer: Renderer2;
   elementRef: ElementRef;
   classMap: string;
   pages: any[];
@@ -131,7 +131,7 @@ export class PaginationComponent implements ControlValueAccessor, OnInit {
   protected _page = 1;
 
   constructor(
-    renderer: Renderer,
+    renderer: Renderer2,
     elementRef: ElementRef,
     paginationConfig: PaginationConfig
   ) {