fix(template): templates should not use es6 templates

valor-software · Oct 3, 2016 · de26168 · de26168
1 parent afabb9d
commit de26168
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 118 deletions.
diff --git a/components/datepicker/daypicker.component.ts b/components/datepicker/daypicker.component.ts
@@ -6,40 +6,10 @@ import { DatePickerInnerComponent } from './datepicker-inner.component';
 // write an interface for template options
 const TEMPLATE_OPTIONS:any = {
   [Ng2BootstrapTheme.BS4]: {
-    DAY_TITLE: `
-        <th *ngFor="let labelz of labels" class="text-xs-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
-    `,
-    WEEK_ROW: `
-        <td *ngIf="datePicker.showWeeks" class="text-xs-center h6"><em>{{ weekNumbers[index] }}</em></td>
-        <td *ngFor="let dtz of rowz" class="text-xs-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': !dtz.selected && !datePicker.isActive(dtz), 'btn-info': dtz.selected, disabled: dtz.disabled}"
-                  [disabled]="dtz.disabled"
-                  (click)="datePicker.select(dtz.date)" tabindex="-1">
-            <span [ngClass]="{'text-muted': dtz.secondary || dtz.current}">{{dtz.label}}</span>
-          </button>
-        </td>
-    `,
     ARROW_LEFT: '&lt;',
     ARROW_RIGHT: '&gt;'
   },
   [Ng2BootstrapTheme.BS3]: {
-    DAY_TITLE: `
-        <th *ngFor="let labelz of labels" class="text-center"><small aria-label="labelz.full"><b>{{labelz.abbr}}</b></small></th>
-    `,
-    WEEK_ROW: `
-        <td *ngIf="datePicker.showWeeks" class="text-center h6"><em>{{ weekNumbers[index] }}</em></td>
-        <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" [id]="dtz.uid">
-          <button type="button" style="min-width:100%;" class="btn btn-default btn-sm {{dtz.customClass}}"
-                  *ngIf="!(datePicker.onlyCurrentMonth && dtz.secondary)"
-                  [ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
-                  [disabled]="dtz.disabled"
-                  (click)="datePicker.select(dtz.date)" tabindex="-1">
-            <span [ngClass]="{'text-muted': dtz.secondary, 'text-info': dtz.current}">{{dtz.label}}</span>
-          </button>
-        </td>
-    `,
     ARROW_LEFT: `
     <i class="glyphicon glyphicon-chevron-left"></i>
     `,
@@ -49,17 +19,18 @@ const TEMPLATE_OPTIONS:any = {
   }
 };
 
-const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme || Ng2BootstrapTheme.BS3];
-
 @Component({
   selector: 'daypicker',
   template: `
 <table *ngIf="datePicker.datepickerMode==='day'" role="grid" aria-labelledby="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">
-        ${CURRENT_THEME_TEMPLATE.ARROW_LEFT}
+        <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>
       </th>
       <th [attr.colspan]="5 + datePicker.showWeeks">
@@ -72,20 +43,36 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme ||
         </button>
       </th>
       <th>
-        <button type="button" class="btn btn-default btn-secondary btn-sm pull-right" (click)="datePicker.move(1)" tabindex="-1">
-        ${CURRENT_THEME_TEMPLATE.ARROW_RIGHT}
+        <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>
       </th>
     </tr>
     <tr>
       <th *ngIf="datePicker.showWeeks"></th>
-      ${CURRENT_THEME_TEMPLATE.DAY_TITLE}
+      <th *ngFor="let labelz of labels" [ngClass]="{'text-xs-center':isBS4, 'text-center': !isBS4}">
+        <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)">
-        ${CURRENT_THEME_TEMPLATE.WEEK_ROW}
+        <td *ngIf="datePicker.showWeeks" class="h6" [ngClass]="{'text-xs-center':isBS4, 'text-center': !isBS4}">
+          <em>{{ weekNumbers[index] }}</em>
+        </td>
+        <td *ngFor="let dtz of rowz" [ngClass]="{'text-xs-center':isBS4, 'text-center': !isBS4}" 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}"
+                  [disabled]="dtz.disabled"
+                  (click)="datePicker.select(dtz.date)" tabindex="-1">
+            <span [ngClass]="{'text-muted': dtz.secondary || dtz.current, 'text-info': !isBS4 && dtz.current}">{{dtz.label}}</span>
+          </button>
+        </td>
       </tr>
     </template>
   </tbody>
@@ -99,11 +86,16 @@ export class DayPickerComponent implements OnInit {
   public rows:Array<any> = [];
   public weekNumbers:Array<number> = [];
   public datePicker:DatePickerInnerComponent;
+  public CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme || Ng2BootstrapTheme.BS3];
 
   public constructor(datePicker:DatePickerInnerComponent) {
     this.datePicker = datePicker;
   }
 
+  public get isBS4():boolean {
+    return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4;
+  }
+
   /*private getDaysInMonth(year:number, month:number) {
    return ((month === 1) && (year % 4 === 0) &&
    ((year % 100 !== 0) || (year % 400 === 0))) ? 29 : DAYS_IN_MONTH[month];

diff --git a/components/datepicker/monthpicker.component.ts b/components/datepicker/monthpicker.component.ts
@@ -1,30 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
-import { Ng2BootstrapConfig } from '../ng2-bootstrap-config';
+import { Ng2BootstrapConfig, Ng2BootstrapTheme } from '../ng2-bootstrap-config';
 import { DatePickerInnerComponent } from './datepicker-inner.component';
 
-// write an interface for template options
-const TEMPLATE_OPTIONS:any = {
-  bs4: {
-    MONTH_BUTTON: `
-        <button type="button" style="min-width:100%;" class="btn btn-default"
-                [ngClass]="{'btn-info': dtz.selected, 'btn-link': !dtz.selected && !datePicker.isActive(dtz), 'btn-info': !dtz.selected && datePicker.isActive(dtz), disabled: dtz.disabled}"
-                [disabled]="dtz.disabled"
-                (click)="datePicker.select(dtz.date)" tabindex="-1"><span [ngClass]="{'text-success': dtz.current}">{{dtz.label}}</span></button>
-    `
-  },
-  bs3: {
-    MONTH_BUTTON: `
-        <button type="button" style="min-width:100%;" class="btn btn-default"
-                [ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
-                [disabled]="dtz.disabled"
-                (click)="datePicker.select(dtz.date)" tabindex="-1"><span [ngClass]="{'text-info': dtz.current}">{{dtz.label}}</span></button>
-    `
-  }
-};
-
-const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] || TEMPLATE_OPTIONS.bs3;
-
 @Component({
   selector: 'monthpicker',
   template: `
@@ -56,7 +34,12 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] ||
   <tbody>
     <tr *ngFor="let rowz of rows">
       <td *ngFor="let dtz of rowz" class="text-center" role="gridcell" id="{{dtz.uid}}" [ngClass]="dtz.customClass">
-        ${CURRENT_THEME_TEMPLATE.MONTH_BUTTON}
+        <button type="button" style="min-width:100%;" class="btn btn-default"
+                [ngClass]="{'btn-info': dtz.selected, 'btn-link': isBS4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': isBS4 && !dtz.selected && datePicker.isActive(dtz), disabled: dtz.disabled, active: !isBS4 && datePicker.isActive(dtz)}"
+                [disabled]="dtz.disabled"
+                (click)="datePicker.select(dtz.date)" tabindex="-1">
+          <span [ngClass]="{'text-success': isBS4 && dtz.current, 'text-info': !isBS4 && dtz.current}">{{dtz.label}}</span>
+        </button>
       </td>
     </tr>
   </tbody>
@@ -72,6 +55,10 @@ export class MonthPickerComponent implements OnInit {
     this.datePicker = datePicker;
   }
 
+  public get isBS4():boolean {
+    return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4;
+  }
+
   public ngOnInit():void {
     let self = this;
 

diff --git a/components/datepicker/yearpicker.component.ts b/components/datepicker/yearpicker.component.ts
@@ -1,34 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 
-import { Ng2BootstrapConfig } from '../ng2-bootstrap-config';
+import { Ng2BootstrapConfig, Ng2BootstrapTheme } from '../ng2-bootstrap-config';
 import { DatePickerInnerComponent } from './datepicker-inner.component';
 
-// write an interface for template options
-const TEMPLATE_OPTIONS:any = {
-  bs4: {
-    YEAR_BUTTON: `
-        <button type="button" style="min-width:100%;" class="btn btn-default"
-                [ngClass]="{'btn-info': dtz.selected, 'btn-link': !dtz.selected && !datePicker.isActive(dtz), 'btn-info': !dtz.selected && datePicker.isActive(dtz), disabled: dtz.disabled}"
-                [disabled]="dtz.disabled"
-                (click)="datePicker.select(dtz.date)" tabindex="-1">
-          <span [ngClass]="{'text-success': dtz.current}">{{dtz.label}}</span>
-        </button>
-    `
-  },
-  bs3: {
-    YEAR_BUTTON: `
-        <button type="button" style="min-width:100%;" class="btn btn-default"
-                [ngClass]="{'btn-info': dtz.selected, active: datePicker.isActive(dtz), disabled: dtz.disabled}"
-                [disabled]="dtz.disabled"
-                (click)="datePicker.select(dtz.date)" tabindex="-1">
-          <span [ngClass]="{'text-info': dtz.current}">{{dtz.label}}</span>
-        </button>
-    `
-  }
-};
-
-const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] || TEMPLATE_OPTIONS.bs3;
-
 @Component({
   selector: 'yearpicker',
   template: `
@@ -61,7 +35,12 @@ const CURRENT_THEME_TEMPLATE:any = TEMPLATE_OPTIONS[Ng2BootstrapConfig.theme] ||
   <tbody>
     <tr *ngFor="let rowz of rows">
       <td *ngFor="let dtz of rowz" class="text-center" role="gridcell">
-      ${CURRENT_THEME_TEMPLATE.YEAR_BUTTON}
+        <button type="button" style="min-width:100%;" class="btn btn-default"
+                [ngClass]="{'btn-info': dtz.selected, 'btn-link': isBS4 && !dtz.selected && !datePicker.isActive(dtz), 'btn-info': isBS4 && !dtz.selected && datePicker.isActive(dtz), disabled: dtz.disabled, active: !isBS4 && datePicker.isActive(dtz)}"
+                [disabled]="dtz.disabled"
+                (click)="datePicker.select(dtz.date)" tabindex="-1">
+          <span [ngClass]="{'text-success': isBS4 && dtz.current, 'text-info': !isBS4 && dtz.current}">{{dtz.label}}</span>
+        </button>
       </td>
     </tr>
   </tbody>
@@ -77,6 +56,10 @@ export class YearPickerComponent implements OnInit {
     this.datePicker = datePicker;
   }
 
+  public get isBS4():boolean {
+    return Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4;
+  }
+
   public ngOnInit():void {
     let self = this;
 

diff --git a/components/modal/modal-backdrop.component.ts b/components/modal/modal-backdrop.component.ts
@@ -13,7 +13,7 @@ export class ModalBackdropOptions {
 @Component({
   selector: 'bs-modal-backdrop',
   template: '',
-  host: {'class': `${ClassName.BACKDROP}`}
+  host: {'class': ClassName.BACKDROP}
 })
 export class ModalBackdropComponent {
   public get isAnimated():boolean {

diff --git a/components/typeahead/typeahead-container.component.ts b/components/typeahead/typeahead-container.component.ts
@@ -6,36 +6,36 @@ import { TypeaheadOptions } from './typeahead-options.class';
 import { TypeaheadUtils } from './typeahead-utils';
 import { TypeaheadDirective } from './typeahead.directive';
 
-const TEMPLATE:any = {
-  [Ng2BootstrapTheme.BS4]: `
+const bs4 = `
   <div class="dropdown-menu"
        style="display: block"
        [ngStyle]="{top: top, left: left, display: display}"
        (mouseleave)="focusLost()">
-       <div *ngIf="!itemTemplate">
-          <a href="#"
-            *ngFor="let match of matches"
-            class="dropdown-item"
-            (click)="selectMatch(match, $event)"
-            (mouseenter)="selectActive(match)"
-            [class.active]="isActive(match)"
-            [innerHtml]="hightlight(match, query)"></a>
-      </div>
-      <div *ngIf="itemTemplate">
+     <div *ngIf="!itemTemplate">
         <a href="#"
-         *ngFor="let match of matches; let i = index"
-         class="dropdown-item"
-         (click)="selectMatch(match, $event)"
-         (mouseenter)="selectActive(match)"
-         [class.active]="isActive(match)">
-          <template [ngTemplateOutlet]="itemTemplate"
-                    [ngOutletContext]="{item: match, index: i}">
-          </template>
-         </a>
-      </div>
+          *ngFor="let match of matches"
+          class="dropdown-item"
+          (click)="selectMatch(match, $event)"
+          (mouseenter)="selectActive(match)"
+          [class.active]="isActive(match)"
+          [innerHtml]="hightlight(match, query)"></a>
+    </div>
+    <div *ngIf="itemTemplate">
+      <a href="#"
+       *ngFor="let match of matches; let i = index"
+       class="dropdown-item"
+       (click)="selectMatch(match, $event)"
+       (mouseenter)="selectActive(match)"
+       [class.active]="isActive(match)">
+        <template [ngTemplateOutlet]="itemTemplate"
+                  [ngOutletContext]="{item: match, index: i}">
+        </template>
+       </a>
+    </div>
   </div>
-  `,
-  [Ng2BootstrapTheme.BS3]: `
+`;
+
+const bs3 = `
   <ul class="dropdown-menu"
       style="display: block"
       [ngStyle]="{top: top, left: left, display: display}"
@@ -58,11 +58,12 @@ const TEMPLATE:any = {
         </a>
     </li>
   </ul>
-  `
-};
+`;
+let isBS4 = Ng2BootstrapConfig.theme === Ng2BootstrapTheme.BS4;
+
 @Component({
   selector: 'typeahead-container',
-  template: TEMPLATE[Ng2BootstrapConfig.theme],
+  template: isBS4 ? bs4 : bs3,
   encapsulation: ViewEncapsulation.None
 })
 export class TypeaheadContainerComponent {