refactor: add all local template variables to custom templates

Author: Matt Lewis

src/components/day/calendarAllDayEvent.component.ts

@@ -10,7 +10,10 @@ import { CalendarEvent } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-all-day-event',
   template: `
-    <ng-template #defaultTemplate>
+    <ng-template
+      #defaultTemplate
+      let-event="event"
+      let-eventClicked="eventClicked">
       <div
         class="cal-all-day-event"
         [style.backgroundColor]="event.color.secondary"

src/components/day/calendarDayViewEvent.component.ts

@@ -10,7 +10,13 @@ import { DayViewEvent } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-day-view-event',
   template: `
-    <ng-template #defaultTemplate>
+    <ng-template
+      #defaultTemplate
+      let-dayEvent="dayEvent"
+      let-tooltipPlacement="tooltipPlacement"
+      let-eventClicked="eventClicked"
+      let-tooltipTemplate="tooltipTemplate"
+      let-tooltipAppendToBody="tooltipAppendToBody">
       <div
         class="cal-event"
         [style.backgroundColor]="dayEvent.event.color.secondary"

src/components/day/calendarDayViewHourSegment.component.ts

@@ -4,7 +4,10 @@ import { DayViewHourSegment } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-day-view-hour-segment',
   template: `
-    <ng-template #defaultTemplate>
+    <ng-template
+      #defaultTemplate
+      let-segment="segment"
+      let-locale="locale">
       <div
         class="cal-hour-segment"
         [class.cal-hour-start]="segment.isStart"

src/components/month/calendarMonthCell.component.ts

@@ -10,7 +10,17 @@ import { MonthViewDay, CalendarEvent } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-month-cell',
   template: `
-    <ng-template #defaultTemplate>
+    <ng-template
+      #defaultTemplate
+      let-day="day"
+      let-openDay="openDay"
+      let-locale="locale"
+      let-tooltipPlacement="tooltipPlacement"
+      let-highlightDay="highlightDay"
+      let-unhighlightDay="unhighlightDay"
+      let-eventClicked="eventClicked"
+      let-tooltipTemplate="tooltipTemplate"
+      let-tooltipAppendToBody="tooltipAppendToBody">
       <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>

src/components/month/calendarMonthViewHeader.component.ts

@@ -4,7 +4,10 @@ import { WeekDay } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-month-view-header',
   template: `
-    <ng-template #defaultTemplate>
+    <ng-template
+      #defaultTemplate
+      let-days="days"
+      let-locale="locale">
       <div class="cal-cell-row cal-header">
         <div
           class="cal-cell"

src/components/month/calendarOpenDayEvents.component.ts

@@ -11,7 +11,10 @@ import { CalendarEvent } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-open-day-events',
   template: `
-    <ng-template #defaultTemplate>
+    <ng-template
+      #defaultTemplate
+      let-events="events"
+      let-eventClicked="eventClicked">
       <div
         *ngFor="let event of events"
         [ngClass]="event?.cssClass"

src/components/week/calendarWeekViewEvent.component.ts

@@ -10,7 +10,13 @@ import { WeekViewEvent } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-week-view-event',
   template: `
-    <ng-template #defaultTemplate>
+    <ng-template
+      #defaultTemplate
+      let-weekEvent="weekEvent"
+      let-tooltipPlacement="tooltipPlacement"
+      let-eventClicked="eventClicked"
+      let-tooltipTemplate="tooltipTemplate"
+      let-tooltipAppendToBody="tooltipAppendToBody">
       <div
         class="cal-event"
         [style.backgroundColor]="weekEvent.event.color.secondary"

src/components/week/calendarWeekViewHeader.component.ts

@@ -10,7 +10,12 @@ import { CalendarEvent, WeekDay } from 'calendar-utils';
 @Component({
   selector: 'mwl-calendar-week-view-header',
   template: `
-    <ng-template #defaultTemplate>
+    <ng-template
+      #defaultTemplate
+      let-days="days"
+      let-locale="locale"
+      let-dayHeaderClicked="dayHeaderClicked"
+      let-eventDropped="eventDropped">
       <div class="cal-day-headers">
         <div
           class="cal-header"

src/directives/calendarTooltip.directive.ts

@@ -20,7 +20,11 @@ import { CalendarEvent } from 'calendar-utils';
 
 @Component({
   template: `
-    <ng-template #defaultTemplate>
+    <ng-template
+      #defaultTemplate
+      let-contents="contents"
+      let-placement="placement"
+      let-event="event">
       <div class="cal-tooltip" [ngClass]="'cal-tooltip-' + placement">
         <div class="cal-tooltip-arrow"></div>
         <div class="cal-tooltip-inner" [innerHtml]="contents"></div>