fix(modals): fix modals crash, remove glyphicons, disable service worker

Author: IlyaSurmay

.angular-cli.json

@@ -19,7 +19,7 @@
       "testTsconfig": "../../src/tsconfig.spec.json",
       "prefix": "",
       "mobile": false,
-      "serviceWorker": true,
+      "serviceWorker": false,
       "styles": [
         "../../src/datepicker/bs-datepicker.scss",
         "assets/css/style.css",

demo/src/app/components/+accordion/demos/basic/basic.html

@@ -5,8 +5,7 @@
   <accordion-group #group>
     <div accordion-heading>
       I can have markup, too!
-      <i class="pull-right float-xs-right glyphicon"
-         [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
+      <span class="badge badge-secondary float-right pull-right">Some HTML here</span>
     </div>
     This is just some content to illustrate fancy headings.
   </accordion-group>

demo/src/app/components/+accordion/demos/dymanic/dynamic.html

@@ -22,8 +22,7 @@
   <accordion-group #group [isOpen]="status.isOpen">
     <div accordion-heading>
       I can have markup, too!
-      <i class="pull-right float-xs-right glyphicon"
-         [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
+      <span class="badge badge-secondary float-right pull-right">Some HTML here</span>
     </div>
     This is just some content to illustrate fancy headings.
   </accordion-group>

demo/src/app/components/+rating/demos/custom/custom.ts

@@ -7,12 +7,4 @@ import { Component } from '@angular/core';
 export class DemoRatingCustomComponent {
   public x: number = 5;
   public y: number = 2;
-
-  public ratingStates: any = [
-    { stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle' },
-    { stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty' },
-    { stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle' },
-    { stateOn: 'glyphicon-heart' },
-    { stateOff: 'glyphicon-off' }
-  ];
 }

demo/src/app/components/+rating/rating-section.component.ts

@@ -8,7 +8,6 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   template: `
 <demo-section [name]="name" [src]="src">
   <p>Rating component that will take care of visualising a star rating bar</p>
-  <p><em>Note</em>: Bootstrap 4 do not include glyphicons anymore, so if you want to continue use this font, you will need to add a link to <a href="https://github.com/valor-software/ngx-bootstrap/blob/master/demo/assets/css/glyphicons.css"><code>glyphicons.css</code></a></p>
   
   <h2>Contents</h2>
   <ul>

demo/src/app/components/+tabs/demos/basic/basic.html

@@ -5,7 +5,7 @@
     <tab heading="Static Title 2">Static content 2</tab>
     <tab (select)="alertMe()">
       <ng-template tabHeading>
-        <i class="glyphicon glyphicon-bell"></i> Alert!
+        <span class="badge badge-secondary">Click here!</span>
       </ng-template>
       I've got an HTML heading, and a select callback. Pretty cool!
     </tab>

demo/src/app/components/+typeahead/demos/async/async.html

@@ -8,9 +8,5 @@
          typeaheadOptionField="name"
          placeholder="Locations loaded with timeout"
          class="form-control">
-  <div *ngIf="typeaheadLoading===true">
-    <i class="glyphicon glyphicon-refresh ng-hide" style=""></i>
-  </div>
-  <div *ngIf="typeaheadNoResults===true" class="" style="">
-    <i class="glyphicon glyphicon-remove"></i> No Results Found
-  </div>
+  <div *ngIf="typeaheadLoading===true">Loading</div>
+  <div *ngIf="typeaheadNoResults===true">&#10060; No Results Found</div>

demo/src/index.html

@@ -21,7 +21,7 @@
   <!--<link rel="stylesheet" href="assets/css/style.css">-->
   <!--<link rel="stylesheet" href="assets/css/prettify-angulario.css">-->
 
-  <link rel="manifest" href="ngsw-manifest.json">
+  <!--<link rel="manifest" href="ngsw-manifest.json">-->
 
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">

scripts/bs-config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  port: 4200,
+  port: 4400,
   server: {
     baseDir: './gh-pages',
     middleware : { 1 : require('compression')()}

src/component-loader/component-loader.class.ts

@@ -359,7 +359,7 @@ export class ComponentLoader<T> {
         content
       );
       const modalContentInjector = ReflectiveInjector.resolveAndCreate(
-        [...this._providers, content],
+        [...this._providers],
         this._injector
       );
       const componentRef = contentCmptFactory.create(modalContentInjector);

src/datepicker/daypicker.component.ts

@@ -15,15 +15,12 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
                 type="button"
                 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>
+                tabindex="-1">‹</button>
         <button *ngIf="isBs4"
                 type="button"
                 class="btn btn-default btn-secondary btn-sm pull-left float-left"
                 (click)="datePicker.move(-1)"
-                tabindex="-1">&lt;
-        </button>
+                tabindex="-1">&lt;</button>
       </th>
       <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
         <button [id]="datePicker.uniqueId + '-title'"
@@ -39,9 +36,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
                 type="button"
                 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>
+                tabindex="-1">›</button>
         <button *ngIf="isBs4"
                 type="button"
                 class="btn btn-default btn-secondary btn-sm pull-right float-right"

src/datepicker/monthpicker.component.ts

@@ -13,23 +13,19 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
     <tr>
       <th>
         <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>
+                (click)="datePicker.move(-1)" tabindex="-1">‹</button></th>
       <th [attr.colspan]="((datePicker.monthColLimit - 2) <= 0) ? 1 : datePicker.monthColLimit - 2">
         <button [id]="datePicker.uniqueId + '-title'"
                 type="button" class="btn btn-default btn-sm"
                 (click)="datePicker.toggleMode()"
                 [disabled]="datePicker.datepickerMode === maxMode"
                 [ngClass]="{disabled: datePicker.datepickerMode === maxMode}" tabindex="-1" style="width:100%;">
-          <strong>{{ title }}</strong>
+          <strong>{{ title }}</strong> 
         </button>
       </th>
       <th>
         <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>
+                (click)="datePicker.move(1)" tabindex="-1">›</button>
       </th>
     </tr>
   </thead>

src/datepicker/yearpicker.component.ts

@@ -13,9 +13,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
     <tr>
       <th>
         <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>
+                (click)="datePicker.move(-1)" tabindex="-1">‹</button>
       </th>
       <th [attr.colspan]="((datePicker.yearColLimit - 2) <= 0) ? 1 : datePicker.yearColLimit - 2">
         <button [id]="datePicker.uniqueId + '-title'" role="heading"
@@ -28,9 +26,7 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
       </th>
       <th>
         <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>
+                (click)="datePicker.move(1)" tabindex="-1">›</button>
       </th>
     </tr>
   </thead>

src/modal/bs-modal.service.ts

@@ -2,7 +2,7 @@ import {
   ComponentRef,
   Injectable,
   TemplateRef,
-  EventEmitter, Renderer2, Injector
+  EventEmitter, Renderer2, RendererFactory2
 } from '@angular/core';
 
 import { ComponentLoader } from '../component-loader/component-loader.class';
@@ -41,12 +41,13 @@ export class BsModalService {
 
   private _renderer: Renderer2;
 
-  constructor(private _injector: Injector, private clf: ComponentLoaderFactory) {
+  constructor(rendererFactory: RendererFactory2, private clf: ComponentLoaderFactory) {
     this._backdropLoader = this.clf.createLoader<ModalBackdropComponent>(
       null,
       null,
       null
     );
+    this._renderer = rendererFactory.createRenderer(null, null);
   }
 
   /** Shows a modal */
@@ -170,12 +171,11 @@ export class BsModalService {
 
   // thx d.walsh
   private getScrollbarWidth(): number {
-    this._renderer = this._renderer || this._injector.get(Renderer2);
     const scrollDiv = this._renderer.createElement('div');
     this._renderer.addClass(scrollDiv, CLASS_NAME.SCROLLBAR_MEASURER);
-    this._renderer.appendChild('body', scrollDiv);
+    this._renderer.appendChild(document.body, scrollDiv);
     const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    this._renderer.removeChild('body', scrollDiv);
+    this._renderer.removeChild(document.body, scrollDiv);
 
     return scrollbarWidth;
   }

src/modal/modal.directive.ts

@@ -5,7 +5,7 @@
 
 import {
   ComponentRef, Directive, ElementRef, EventEmitter, HostListener, Input,
-  OnDestroy, Output, Renderer2, ViewContainerRef
+  OnDestroy, OnInit, Output, Renderer2, ViewContainerRef
 } from '@angular/core';
 
 import { document, window } from '../utils/facade/browser';
@@ -27,7 +27,7 @@ const BACKDROP_TRANSITION_DURATION = 150;
   selector: '[bsModal]',
   exportAs: 'bs-modal'
 })
-export class ModalDirective implements OnDestroy {
+export class ModalDirective implements OnDestroy, OnInit {
   /** allows to set modal configuration via element property */
   @Input()
   set config(conf: ModalOptions) {
@@ -127,14 +127,14 @@ export class ModalDirective implements OnDestroy {
     }
   }
 
-  // ngAfterViewInit(): any {
-  //   this._config = this._config || this.getConfig();
-  //   setTimeout(() => {
-  //     if (this._config.show) {
-  //       this.show();
-  //     }
-  //   }, 0);
-  // }
+  ngOnInit(): any {
+    this._config = this._config || this.getConfig();
+    setTimeout(() => {
+      if (this._config.show) {
+        this.show();
+      }
+    }, 0);
+  }
 
   /* Public methods */
 
@@ -427,9 +427,9 @@ export class ModalDirective implements OnDestroy {
   protected getScrollbarWidth(): number {
     const scrollDiv = this._renderer.createElement('div');
     this._renderer.addClass(scrollDiv, CLASS_NAME.SCROLLBAR_MEASURER);
-    this._renderer.appendChild('body', scrollDiv);
+    this._renderer.appendChild(document.body, scrollDiv);
     const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-    this._renderer.removeChild('body', scrollDiv);
+    this._renderer.removeChild(document.body, scrollDiv);
 
     return scrollbarWidth;
   }

src/spec/tabset.component.spec.ts

@@ -148,7 +148,7 @@ describe('Component: Tabs', () => {
     const tabTitles = getTabTitles(element);
     expect(
       (tabTitles[3] as HTMLAnchorElement).querySelectorAll(
-        'span span.glyphicon-remove-circle'
+        'span.bs-remove-tab'
       ).length
     ).toEqual(1);
   });
@@ -157,7 +157,7 @@ describe('Component: Tabs', () => {
     const tabTitlesBefore = getTabTitles(element);
     expect(tabTitlesBefore.length).toEqual(4);
     const el = (tabTitlesBefore[3] as HTMLAnchorElement).querySelectorAll(
-      'span span.glyphicon-remove-circle'
+      'span.bs-remove-tab'
     )[0];
     (el as HTMLSpanElement).click();
 
@@ -238,7 +238,7 @@ describe('Component: Tabs', () => {
   it('should emit remove on remove tab', () => {
     const tabTitles = getTabTitles(element);
     const el = (tabTitles[3] as HTMLAnchorElement).querySelectorAll(
-      'span span.glyphicon-remove-circle'
+      'span.bs-remove-tab'
     )[0];
     (el as HTMLSpanElement).click();
     fixture.detectChanges();

src/tabs/tabset.component.html

@@ -5,10 +5,7 @@
        [class.active]="tabz.active" [class.disabled]="tabz.disabled"
        (click)="tabz.active = true">
       <span [ngTransclude]="tabz.headingRef">{{ tabz.heading }}</span>
-      <span *ngIf="tabz.removable">
-              <span (click)="$event.preventDefault(); removeTab(tabz);"
-                    class="glyphicon glyphicon-remove-circle"></span>
-            </span>
+      <span *ngIf="tabz.removable" (click)="$event.preventDefault(); removeTab(tabz);" class="bs-remove-tab"> &#10060;</span>
     </a>
   </li>
 </ul>