fix(datepicker): using icons instead of innerHTML chevrons to fix issue with webworkers (#2166)

fix(daypicker): condittionally using chevron based on bs

removed unused interface for templates

not using span anymore

Author: artdias90

src/datepicker/daypicker.component.ts

@@ -2,34 +2,25 @@ import { Component, OnInit } from '@angular/core';
 import { isBs3 } from '../utils/ng2-bootstrap-config';
 import { DatePickerInnerComponent } from './datepicker-inner.component';
 
-// write an interface for template options
-const TEMPLATE_OPTIONS: any = {
-  'bs4': {
-    ARROW_LEFT: '<',
-    ARROW_RIGHT: '>'
-  },
-  'bs3': {
-    ARROW_LEFT: `
-    <i class="glyphicon glyphicon-chevron-left"></i>
-    `,
-    ARROW_RIGHT: `
-    <i class="glyphicon glyphicon-chevron-right"></i>
-    `
-  }
-};
-
 @Component({
   selector: 'daypicker',
   template: `
 <table *ngIf="datePicker.datepickerMode==='day'" role="grid" [attr.aria-labelledby]="datePicker.uniqueId+'-title'" aria-activedescendant="activeDateId">
   <thead>
     <tr>
       <th>
-        <button type="button" 
-                class="btn btn-default btn-secondary btn-sm pull-left" 
-                (click)="datePicker.move(-1)" 
-                tabindex="-1"
-                [innerHTML]="CURRENT_THEME_TEMPLATE.ARROW_LEFT">
+        <button *ngIf="!isBs4"
+                type="button"
+                class="btn btn-default btn-secondary btn-sm pull-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"
+                (click)="datePicker.move(-1)"
+                tabindex="-1">&lt;
         </button>
       </th>
       <th [attr.colspan]="5 + (datePicker.showWeeks ? 1 : 0)">
@@ -42,11 +33,18 @@ const TEMPLATE_OPTIONS: any = {
         </button>
       </th>
       <th>
-        <button type="button" 
-                class="btn btn-default btn-secondary btn-sm pull-right" 
-                (click)="datePicker.move(1)" 
-                tabindex="-1"
-                [innerHTML]="CURRENT_THEME_TEMPLATE.ARROW_RIGHT">
+        <button *ngIf="!isBs4"
+                type="button"
+                class="btn btn-default btn-secondary btn-sm pull-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"
+                (click)="datePicker.move(1)"
+                tabindex="-1">&gt;
         </button>
       </th>
     </tr>
@@ -85,12 +83,8 @@ export class DayPickerComponent implements OnInit {
   public rows: any[] = [];
   public weekNumbers: number[] = [];
   public datePicker: DatePickerInnerComponent;
-  public CURRENT_THEME_TEMPLATE: any;
 
   public constructor(datePicker: DatePickerInnerComponent) {
-    this.CURRENT_THEME_TEMPLATE = isBs3()
-      ? TEMPLATE_OPTIONS.bs3
-      : TEMPLATE_OPTIONS.bs4;
     this.datePicker = datePicker;
   }