0.27

.github/ISSUE_TEMPLATE/Support_question.md

@@ -4,7 +4,6 @@ about: Ask a question about the project
 title: Become a sponsor on Patreon to ask questions
 labels: ''
 assignees: ''
-
 ---
 
 To ask any questions you'd like about the calendar beyond bug and feature requests, you must become a silver sponsor or higher on Patreon: https://www.patreon.com/mattlewis92

.prettierignore

@@ -3,3 +3,4 @@
 *.css
 CHANGELOG.md
 build-tool-examples
+projects/angular-calendar/src/variables.scss

.stylelintrc

@@ -1,6 +1,10 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-prettier"
+  ],
   "rules": {
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "at-rule-no-unknown": null
   }
 }

package.json

@@ -50,81 +50,82 @@
   },
   "homepage": "https://github.com/mattlewis92/angular-calendar#readme",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.8.8",
-    "@angular-devkit/build-ng-packagr": "^0.8.8",
-    "@angular/animations": "^6.1.10",
-    "@angular/cdk": "^6.4.7",
-    "@angular/cli": "^6.2.8",
-    "@angular/common": "^6.1.10",
-    "@angular/compiler": "^6.1.10",
-    "@angular/compiler-cli": "^6.1.10",
-    "@angular/core": "^6.1.10",
-    "@angular/forms": "^6.1.10",
-    "@angular/http": "^6.1.10",
-    "@angular/language-service": "^6.1.10",
-    "@angular/platform-browser": "^6.1.10",
-    "@angular/platform-browser-dynamic": "^6.1.10",
-    "@angular/router": "^6.1.10",
-    "@commitlint/cli": "^7.2.1",
-    "@commitlint/config-conventional": "^7.1.2",
-    "@commitlint/prompt": "^7.2.1",
-    "@compodoc/compodoc": "^1.1.7",
-    "@ng-bootstrap/ng-bootstrap": "^3.3.1",
-    "@stackblitz/sdk": "^1.2.0",
+    "@angular-devkit/build-angular": "^0.13.6",
+    "@angular-devkit/build-ng-packagr": "^0.13.6",
+    "@angular/animations": "^7.2.10",
+    "@angular/cdk": "^7.3.4",
+    "@angular/cli": "^7.3.6",
+    "@angular/common": "^7.2.10",
+    "@angular/compiler": "^7.2.10",
+    "@angular/compiler-cli": "^7.2.10",
+    "@angular/core": "^7.2.10",
+    "@angular/forms": "^7.2.10",
+    "@angular/http": "^7.2.10",
+    "@angular/language-service": "^7.2.10",
+    "@angular/platform-browser": "^7.2.10",
+    "@angular/platform-browser-dynamic": "^7.2.10",
+    "@angular/router": "^7.2.10",
+    "@commitlint/cli": "^7.5.2",
+    "@commitlint/config-conventional": "^7.5.0",
+    "@commitlint/prompt": "^7.5.0",
+    "@compodoc/compodoc": "^1.1.9",
+    "@ng-bootstrap/ng-bootstrap": "^4.1.0",
+    "@stackblitz/sdk": "^1.3.0",
     "@types/chai": "^4.1.7",
-    "@types/mocha": "^5.2.5",
-    "@types/moment-timezone": "^0.5.9",
-    "@types/node": "^10.12.12",
-    "@types/sinon": "^5.0.5",
-    "@types/sinon-chai": "^3.2.1",
+    "@types/mocha": "^5.2.6",
+    "@types/moment-timezone": "^0.5.12",
+    "@types/node": "^11.11.5",
+    "@types/sinon": "^7.0.10",
+    "@types/sinon-chai": "^3.2.2",
     "angular-cli-ghpages": "^0.5.3",
     "angulartics2": "^7.4.1",
     "angularx-flatpickr": "^6.1.0",
-    "autoprefixer": "^9.4.2",
-    "bootstrap-css-only": "^4.1.3",
+    "autoprefixer": "^9.5.0",
+    "bootstrap-css-only": "^4.3.1",
     "chai": "^4.2.0",
-    "codecov": "^3.1.0",
+    "codecov": "^3.2.0",
     "codelyzer": "^4.5.0",
-    "commitizen": "^3.0.5",
+    "commitizen": "^3.0.7",
     "copyfiles": "^2.1.0",
-    "core-js": "^2.6.0",
-    "css-loader": "^2.0.0",
-    "date-fns": "^1.29.0",
-    "flatpickr": "^4.5.2",
+    "core-js": "^2.6.5",
+    "css-loader": "^2.1.1",
+    "date-fns": "1.29.0",
+    "flatpickr": "^4.5.7",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "highlightjs-loader": "^0.2.3",
-    "husky": "^1.2.0",
-    "karma": "^3.1.3",
+    "husky": "^1.3.1",
+    "karma": "^4.0.1",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage-istanbul-reporter": "^2.0.4",
+    "karma-coverage-istanbul-reporter": "^2.0.5",
     "karma-mocha": "^1.3.0",
     "karma-mocha-reporter": "^2.2.5",
-    "mocha": "^5.2.0",
-    "moment": "^2.22.2",
+    "mocha": "^6.0.2",
+    "moment": "^2.24.0",
     "moment-timezone": "^0.5.23",
-    "ng-packagr": "^4.4.5",
+    "ng-packagr": "^4.7.1",
     "ngx-contextmenu": "^5.1.1",
     "ngx-perfect-scrollbar": "^7.2.1",
     "node-sass": "^4.11.0",
-    "postcss-cli": "^6.0.1",
+    "postcss-cli": "^6.1.2",
     "postcss-flexibility": "^2.0.0",
-    "prettier": "^1.15.3",
-    "pretty-quick": "^1.8.0",
-    "rrule": "^2.5.6",
-    "rxjs": "^6.3.3",
-    "sinon": "^7.1.1",
+    "prettier": "^1.16.4",
+    "pretty-quick": "^1.10.0",
+    "rrule": "^2.6.0",
+    "rxjs": "^6.4.0",
+    "sinon": "^7.3.0",
     "sinon-chai": "^3.3.0",
-    "standard-version": "^4.4.0",
-    "stylelint": "^9.9.0",
+    "standard-version": "^5.0.2",
+    "stylelint": "^9.10.1",
+    "stylelint-config-prettier": "^5.0.0",
     "stylelint-config-standard": "^18.2.0",
-    "ts-node": "^7.0.1",
-    "tsickle": "^0.32.1",
+    "ts-node": "^8.0.3",
+    "tsickle": "0.34.0",
     "tslib": "^1.9.0",
-    "tslint": "^5.11.0",
+    "tslint": "^5.14.0",
     "tslint-config-mwl": "^0.5.2",
-    "typescript": "~2.9.2",
-    "zone.js": "^0.8.26"
+    "typescript": "~3.2.4",
+    "zone.js": "^0.8.29"
   },
   "peerDependencies": {
     "@angular/animations": ">=6.0.0 <9.0.0",
@@ -134,7 +135,7 @@
   "dependencies": {
     "angular-draggable-droppable": "^4.2.0",
     "angular-resizable-element": "^3.2.4",
-    "calendar-utils": "^0.2.2",
+    "calendar-utils": "^0.3.0",
     "positioning": "^1.4.0"
   },
   "sideEffects": [

projects/angular-calendar/src/angular-calendar.scss

@@ -2,3 +2,10 @@
 @import './modules/week/calendar-week-view';
 @import './modules/day/calendar-day-view';
 @import './modules/common/calendar-tooltip';
+
+@mixin cal-theme($overrides) {
+  @include cal-month-view-theme($overrides);
+  @include cal-week-view-theme($overrides);
+  @include cal-day-view-theme($overrides);
+  @include cal-tooltip-theme($overrides);
+}

projects/angular-calendar/src/modules/common/calendar-event-actions.component.ts

@@ -1,16 +1,19 @@
 import { Component, Input, TemplateRef } from '@angular/core';
-import { CalendarEvent } from 'calendar-utils';
-import { trackByIndex } from './util';
+import { CalendarEvent, EventAction } from 'calendar-utils';
 
 @Component({
   selector: 'mwl-calendar-event-actions',
   template: `
-    <ng-template #defaultTemplate let-event="event">
+    <ng-template
+      #defaultTemplate
+      let-event="event"
+      let-trackByActionId="trackByActionId"
+    >
       <span *ngIf="event.actions" class="cal-event-actions">
         <a
           class="cal-event-action"
           href="javascript:;"
-          *ngFor="let action of event.actions; trackBy: trackByIndex"
+          *ngFor="let action of event.actions; trackBy: trackByActionId"
           (mwlClick)="action.onClick({ event: event })"
           [ngClass]="action.cssClass"
           [innerHtml]="action.label"
@@ -21,7 +24,8 @@ import { trackByIndex } from './util';
     <ng-template
       [ngTemplateOutlet]="customTemplate || defaultTemplate"
       [ngTemplateOutletContext]="{
-        event: event
+        event: event,
+        trackByActionId: trackByActionId
       }"
     >
     </ng-template>
@@ -32,5 +36,6 @@ export class CalendarEventActionsComponent {
 
   @Input() customTemplate: TemplateRef<any>;
 
-  trackByIndex = trackByIndex;
+  trackByActionId = (index: number, action: EventAction) =>
+    action.id ? action.id : event;
 }

projects/angular-calendar/src/modules/common/calendar-tooltip.directive.ts

@@ -17,6 +17,8 @@ import {
 import { DOCUMENT } from '@angular/common';
 import { PlacementArray, positionElements } from 'positioning';
 import { CalendarEvent } from 'calendar-utils';
+import { Observable, of, Subject, timer } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'mwl-calendar-tooltip-window',
@@ -67,8 +69,11 @@ export class CalendarTooltipDirective implements OnDestroy {
 
   @Input('tooltipAppendToBody') appendToBody: boolean; // tslint:disable-line no-input-rename
 
+  @Input('tooltipDelay') delay: number | null = null; // tslint:disable-line no-input-rename
+
   private tooltipFactory: ComponentFactory<CalendarTooltipWindowComponent>;
   private tooltipRef: ComponentRef<CalendarTooltipWindowComponent>;
+  private cancelTooltipDelay$ = new Subject();
 
   constructor(
     private elementRef: ElementRef,
@@ -89,7 +94,11 @@ export class CalendarTooltipDirective implements OnDestroy {
 
   @HostListener('mouseenter')
   onMouseOver(): void {
-    this.show();
+    const delay$: Observable<any> =
+      this.delay === null ? of('now') : timer(this.delay);
+    delay$.pipe(takeUntil(this.cancelTooltipDelay$)).subscribe(() => {
+      this.show();
+    });
   }
 
   @HostListener('mouseleave')
@@ -124,6 +133,7 @@ export class CalendarTooltipDirective implements OnDestroy {
       );
       this.tooltipRef = null;
     }
+    this.cancelTooltipDelay$.next();
   }
 
   private positionTooltip(previousPosition?: string): void {

projects/angular-calendar/src/modules/common/calendar-tooltip.scss

@@ -1,3 +1,33 @@
+@import '../../variables';
+
+$cal-tooltip-vars: () !default;
+$cal-tooltip-vars: map-merge($cal-vars, $cal-tooltip-vars);
+
+@mixin cal-tooltip-theme($overrides) {
+  $theme: map-merge($cal-tooltip-vars, $overrides);
+
+  .cal-tooltip.cal-tooltip-top .cal-tooltip-arrow {
+    border-top-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-right .cal-tooltip-arrow {
+    border-right-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-bottom .cal-tooltip-arrow {
+    border-bottom-color: map-get($theme, black);
+  }
+
+  .cal-tooltip.cal-tooltip-left .cal-tooltip-arrow {
+    border-left-color: map-get($theme, black);
+  }
+
+  .cal-tooltip-inner {
+    color: map-get($theme, white);
+    background-color: map-get($theme, black);
+  }
+}
+
 .cal-tooltip {
   position: absolute;
   z-index: 1070;
@@ -29,7 +59,6 @@
   left: 50%;
   margin-left: -5px;
   border-width: 5px 5px 0;
-  border-top-color: #000;
 }
 
 .cal-tooltip.cal-tooltip-right {
@@ -42,7 +71,6 @@
   left: 0;
   margin-top: -5px;
   border-width: 5px 5px 5px 0;
-  border-right-color: #000;
 }
 
 .cal-tooltip.cal-tooltip-bottom {
@@ -55,7 +83,6 @@
   left: 50%;
   margin-left: -5px;
   border-width: 0 5px 5px;
-  border-bottom-color: #000;
 }
 
 .cal-tooltip.cal-tooltip-left {
@@ -68,15 +95,12 @@
   right: 0;
   margin-top: -5px;
   border-width: 5px 0 5px 5px;
-  border-left-color: #000;
 }
 
 .cal-tooltip-inner {
   max-width: 200px;
   padding: 3px 8px;
-  color: #fff;
   text-align: center;
-  background-color: #000;
   border-radius: 0.25rem;
 }
 
@@ -87,3 +111,5 @@
   border-color: transparent;
   border-style: solid;
 }
+
+@include cal-tooltip-theme($cal-tooltip-vars);

projects/angular-calendar/src/modules/common/util.ts

@@ -38,8 +38,6 @@ export const trackByEventId = (index: number, event: CalendarEvent) =>
 export const trackByWeekDayHeaderDate = (index: number, day: WeekDay) =>
   day.date.toISOString();
 
-export const trackByIndex = (index: number) => index;
-
 export const trackByHourSegment = (
   index: number,
   segment: DayViewHourSegment
@@ -74,7 +72,9 @@ export function getMinimumEventHeightInMinutes(
   hourSegments: number,
   hourSegmentHeight: number
 ) {
-  return (MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight)) * 30;
+  return (
+    (MINUTES_IN_HOUR / (hourSegments * hourSegmentHeight)) * hourSegmentHeight
+  );
 }
 
 export function getDefaultEventEnd(

projects/angular-calendar/src/modules/day/calendar-day-view-event.component.ts

@@ -18,6 +18,7 @@ import { PlacementArray } from 'positioning';
       let-eventClicked="eventClicked"
       let-tooltipTemplate="tooltipTemplate"
       let-tooltipAppendToBody="tooltipAppendToBody"
+      let-tooltipDelay="tooltipDelay"
     >
       <div
         class="cal-event"
@@ -30,6 +31,7 @@ import { PlacementArray } from 'positioning';
         [tooltipEvent]="dayEvent.event"
         [tooltipTemplate]="tooltipTemplate"
         [tooltipAppendToBody]="tooltipAppendToBody"
+        [tooltipDelay]="tooltipDelay"
         (mwlClick)="eventClicked.emit()"
       >
         <mwl-calendar-event-actions
@@ -53,7 +55,8 @@ import { PlacementArray } from 'positioning';
         tooltipPlacement: tooltipPlacement,
         eventClicked: eventClicked,
         tooltipTemplate: tooltipTemplate,
-        tooltipAppendToBody: tooltipAppendToBody
+        tooltipAppendToBody: tooltipAppendToBody,
+        tooltipDelay: tooltipDelay
       }"
     >
     </ng-template>
@@ -74,5 +77,7 @@ export class CalendarDayViewEventComponent {
 
   @Input() tooltipTemplate: TemplateRef<any>;
 
+  @Input() tooltipDelay: number | null;
+
   @Output() eventClicked: EventEmitter<any> = new EventEmitter();
 }