feat(ng4): upgrade to angular 4 to remove the <template> tag deprec…

…ation warning BREAKING CHANGE: angular 4.0 or higher is now required to use this library. The [upgrade](http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html) should be seamless for most users. Fixes #163
mattlewis92 · Mar 24, 2017 · 68a8f39 · 68a8f39
1 parent 96b904c
commit 68a8f39
Show file tree

Hide file tree

Showing 13 changed files with 61 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# angular 2.0+ calendar
+# angular 4.0+ calendar
 
 [![Build Status](https://travis-ci.org/mattlewis92/angular-calendar.svg?branch=master)](https://travis-ci.org/mattlewis92/angular-calendar)
 [![codecov](https://codecov.io/gh/mattlewis92/angular-calendar/branch/master/graph/badge.svg)](https://codecov.io/gh/mattlewis92/angular-calendar)
@@ -24,7 +24,7 @@ https://mattlewis92.github.io/angular-calendar/
 
 ## About
 
-A calendar component for Angular 2.0+ that can display events on a month, week or day view. The successor of [angular-bootstrap-calendar](https://github.com/mattlewis92/angular-bootstrap-calendar).
+A calendar component for Angular 4.0+ that can display events on a month, week or day view. The successor of [angular-bootstrap-calendar](https://github.com/mattlewis92/angular-bootstrap-calendar).
 
 ## Getting started
 

diff --git a/demos/demo-modules/custom-templates/template.html b/demos/demo-modules/custom-templates/template.html
@@ -3,13 +3,13 @@
   [(viewDate)]="viewDate">
 </mwl-demo-utils-calendar-header>
 
-<template #customCellTemplate let-day="day" let-locale="locale">
+<ng-template #customCellTemplate let-day="day" let-locale="locale">
   <div class="cal-cell-top">
     <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
     <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
   </div>
   <small style="margin: 5px">There are {{ day.events.length }} events on this day</small>
-</template>
+</ng-template>
 
 <div [ngSwitch]="view">
   <mwl-calendar-month-view

diff --git a/demos/demo-modules/group-month-view-events/template.html b/demos/demo-modules/group-month-view-events/template.html
@@ -3,7 +3,7 @@
   [(viewDate)]="viewDate">
 </mwl-demo-utils-calendar-header>
 
-<template #customCellTemplate let-day="day" let-locale="locale">
+<ng-template #customCellTemplate let-day="day" let-locale="locale">
   <div class="cal-cell-top">
     <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
     <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
@@ -15,7 +15,7 @@
       {{ group[1].length }}
     </span>
   </div>
-</template>
+</ng-template>
 
 <div [ngSwitch]="view">
   <mwl-calendar-month-view

diff --git a/demos/demo-modules/kitchen-sink/template.html b/demos/demo-modules/kitchen-sink/template.html
@@ -1,4 +1,4 @@
-<template #modalContent let-close="close">
+<ng-template #modalContent let-close="close">
   <div class="modal-header">
     <h5 class="modal-title">Event action occurred</h5>
     <button type="button" class="close" (click)="close()">
@@ -18,7 +18,7 @@ <h5 class="modal-title">Event action occurred</h5>
   <div class="modal-footer">
     <button type="button" class="btn btn-secondary" (click)="close()">OK</button>
   </div>
-</template>
+</ng-template>
 
 <div class="row text-center">
   <div class="col-md-4">

diff --git a/demos/index.ejs b/demos/index.ejs
@@ -4,14 +4,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>Angular 2.0+ calendar</title>
+    <title>Angular 4.0+ calendar</title>
   </head>
   <body>
 
     <a href="https://github.com/mattlewis92/angular-calendar" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 100000"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 
     <nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" role="navigation">
-      <a class="navbar-brand" href="#">Angular 2.0+ calendar</a>
+      <a class="navbar-brand" href="#">Angular 4.0+ calendar</a>
       <ul class="nav navbar-nav hidden-xs">
         <li class="nav-item active">
           <a class="nav-link" href="javascript:;">

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-calendar",
   "version": "0.9.1",
-  "description": "A calendar component that can display events on a month, week or day view",
+  "description": "A calendar component for angular 4.0+ that can display events on a month, week or day view",
   "main": "./dist/umd/angular-calendar.js",
   "style": "./dist/css/angular-calendar.css",
   "module": "./dist/esm/src/index.js",
@@ -32,6 +32,7 @@
   "keywords": [
     "angular",
     "angular2",
+    "angular4",
     "calendar"
   ],
   "author": "Matt Lewis",
@@ -126,9 +127,9 @@
     "zone.js": "^0.8.4"
   },
   "peerDependencies": {
-    "@angular/common": ">=2.0.0 <5.0.0",
-    "@angular/core": ">=2.0.0 <5.0.0",
-    "@angular/platform-browser": ">=2.0.0 <5.0.0"
+    "@angular/common": "^4.0.0",
+    "@angular/core": "^4.0.0",
+    "@angular/platform-browser": "^4.0.0"
   },
   "files": [
     "dist",
@@ -140,8 +141,8 @@
     }
   },
   "dependencies": {
-    "angular-draggable-droppable": "^0.6.0",
-    "angular-resizable-element": "^0.8.0",
+    "angular-draggable-droppable": "^1.0.0",
+    "angular-resizable-element": "^1.0.0",
     "calendar-utils": "0.0.42",
     "date-fns": "^1.15.1",
     "positioning": "^1.0.4"

diff --git a/src/components/month/calendarMonthCell.component.ts b/src/components/month/calendarMonthCell.component.ts
@@ -4,7 +4,7 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-month-cell',
   template: `
-    <template #defaultTemplate>
+    <ng-template #defaultTemplate>
       <div class="cal-cell-top">
         <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
         <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
@@ -25,10 +25,10 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
           (click)="$event.stopPropagation(); eventClicked.emit({event: event})">
         </div>
       </div>
-    </template>
-    <template
+    </ng-template>
+    <ng-template
       [ngTemplateOutlet]="customTemplate || defaultTemplate"
-      [ngOutletContext]="{
+      [ngTemplateOutletContext]="{
         day: day,
         openDay: openDay,
         locale: locale,
@@ -37,7 +37,7 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
         unhighlightDay: unhighlightDay,
         eventClicked: eventClicked
       }">
-    </template>
+    </ng-template>
   `,
   host: {
     '[class]': '"cal-cell cal-day-cell " + day?.cssClass',

diff --git a/src/components/month/calendarMonthViewHeader.component.ts b/src/components/month/calendarMonthViewHeader.component.ts
@@ -4,7 +4,7 @@ import { WeekDay } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-month-view-header',
   template: `
-    <template #defaultTemplate>
+    <ng-template #defaultTemplate>
       <div class="cal-cell-row cal-header">
         <div
           class="cal-cell"
@@ -16,11 +16,11 @@ import { WeekDay } from 'calendar-utils';
           {{ day.date | calendarDate:'monthViewColumnHeader':locale }}
         </div>
       </div>
-    </template>
-    <template
+    </ng-template>
+    <ng-template
       [ngTemplateOutlet]="customTemplate || defaultTemplate"
-      [ngOutletContext]="{days: days, locale: locale}">
-    </template>
+      [ngTemplateOutletContext]="{days: days, locale: locale}">
+    </ng-template>
   `
 })
 export class CalendarMonthViewHeaderComponent {

diff --git a/src/components/month/calendarOpenDayEvents.component.ts b/src/components/month/calendarOpenDayEvents.component.ts
@@ -1,20 +1,22 @@
 import {
   Component,
   Input,
-  trigger,
-  style,
-  transition,
-  animate,
   Output,
   EventEmitter,
   TemplateRef
 } from '@angular/core';
+import {
+  trigger,
+  style,
+  transition,
+  animate
+} from '@angular/animations';
 import { CalendarEvent } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-open-day-events',
   template: `
-    <template #defaultTemplate>
+    <ng-template #defaultTemplate>
       <div
         *ngFor="let event of events"
         [ngClass]="event?.cssClass"
@@ -32,15 +34,15 @@ import { CalendarEvent } from 'calendar-utils';
         </mwl-calendar-event-title>
         <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
       </div>
-    </template>
+    </ng-template>
     <div class="cal-open-day-events" [@collapse] *ngIf="isOpen">
-      <template
+      <ng-template
         [ngTemplateOutlet]="customTemplate || defaultTemplate"
-        [ngOutletContext]="{
+        [ngTemplateOutletContext]="{
           events: events,
           eventClicked: eventClicked
         }">
-      </template>
+      </ng-template>
     </div>
   `,
   animations: [

diff --git a/src/components/week/calendarWeekViewHeader.component.ts b/src/components/week/calendarWeekViewHeader.component.ts
@@ -4,7 +4,7 @@ import { CalendarEvent, WeekDay } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-week-view-header',
   template: `
-    <template #defaultTemplate>
+    <ng-template #defaultTemplate>
       <div class="cal-day-headers">
         <div
           class="cal-header"
@@ -23,11 +23,11 @@ import { CalendarEvent, WeekDay } from 'calendar-utils';
           <span>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span>
         </div>
       </div>
-    </template>
-    <template
+    </ng-template>
+    <ng-template
       [ngTemplateOutlet]="customTemplate || defaultTemplate"
-      [ngOutletContext]="{days: days, locale: locale, dayClicked: dayClicked, eventDropped: eventDropped}">
-    </template>
+      [ngTemplateOutletContext]="{days: days, locale: locale, dayClicked: dayClicked, eventDropped: eventDropped}">
+    </ng-template>
   `
 })
 export class CalendarWeekViewHeaderComponent {

diff --git a/src/directives/calendarTooltip.directive.ts b/src/directives/calendarTooltip.directive.ts
@@ -6,13 +6,13 @@ import {
   OnDestroy,
   Input,
   ComponentRef,
-  Renderer,
   Injector,
   ComponentFactoryResolver,
   ViewContainerRef,
   ElementRef,
   ComponentFactory,
-  Inject
+  Inject,
+  Renderer2
 } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
 import { Positioning } from 'positioning';
@@ -139,8 +139,8 @@ export class CalendarTooltipDirective implements AfterViewChecked, OnDestroy {
 
   constructor(
     private elementRef: ElementRef,
-    private renderer: Renderer,
     private injector: Injector,
+    private renderer: Renderer2,
     componentFactoryResolver: ComponentFactoryResolver,
     private viewContainerRef: ViewContainerRef,
     @Inject(DOCUMENT) private document //tslint:disable-line
@@ -149,7 +149,7 @@ export class CalendarTooltipDirective implements AfterViewChecked, OnDestroy {
   }
 
   ngAfterViewChecked(): void {
-    this.positionPopover();
+    this.positionTooltip();
   }
 
   ngOnDestroy(): void {
@@ -182,15 +182,16 @@ export class CalendarTooltipDirective implements AfterViewChecked, OnDestroy {
     }
   }
 
-  private positionPopover(): void {
+  private positionTooltip(): void {
     if (this.tooltipRef) {
       const targetPosition: ClientRect = this.positioning.positionElements(
         this.elementRef.nativeElement, this.tooltipRef.location.nativeElement.children[0], this.placement, true
       );
 
-      const targetStyle: CSSStyleDeclaration = this.tooltipRef.location.nativeElement.children[0].style;
-      targetStyle.top = `${targetPosition.top}px`;
-      targetStyle.left = `${targetPosition.left}px`;
+      const elm: HTMLElement = this.tooltipRef.location.nativeElement.children[0];
+
+      this.renderer.setStyle(elm, 'top', `${targetPosition.top}px`);
+      this.renderer.setStyle(elm, 'left', `${targetPosition.left}px`);
     }
   }
 

diff --git a/src/providers/calendarMomentDateFormatter.provider.ts b/src/providers/calendarMomentDateFormatter.provider.ts
@@ -1,7 +1,7 @@
-import { OpaqueToken, Inject } from '@angular/core';
-import { CalendarDateFormatterInterface, DateFormatterParams } from './../interfaces/calendarDateFormatter.interface';
+import { InjectionToken, Inject } from '@angular/core';
+import { CalendarDateFormatterInterface, DateFormatterParams } from '../interfaces/calendarDateFormatter.interface';
 
-export const MOMENT: OpaqueToken = new OpaqueToken('Moment');
+export const MOMENT: InjectionToken<string> = new InjectionToken('Moment');
 
 /**
  * This will use <a href="http://momentjs.com/" target="_blank">moment</a> to do all date formatting. To use this class:

diff --git a/yarn.lock b/yarn.lock
@@ -199,17 +199,17 @@ amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
 
-angular-draggable-droppable@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/angular-draggable-droppable/-/angular-draggable-droppable-0.6.0.tgz#1622144972413d8b02600e764e3461e113d18a45"
+angular-draggable-droppable@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/angular-draggable-droppable/-/angular-draggable-droppable-1.0.0.tgz#16e9c881611c5a0c6c018b441fa774691ed9356c"
 
 angular-highlight-js@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/angular-highlight-js/-/angular-highlight-js-1.0.2.tgz#df4dce0bb1a1d1e6776a561b075700abcfa457ea"
 
-angular-resizable-element@^0.8.0:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/angular-resizable-element/-/angular-resizable-element-0.8.1.tgz#fc5ad5635b6d5a7376f7fcb9513b9fd771017157"
+angular-resizable-element@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/angular-resizable-element/-/angular-resizable-element-1.0.0.tgz#5698a703d5db876ef1a7b43ace7463e81ec54685"
 
 angular2-template-loader@^0.6.0:
   version "0.6.2"