Merge branch 'master' into 0.27

Author: mattlewis92

.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 gain access to the private issue tracker for this project where you can ask any questions you'd like about the calendar, you must become a silver sponsor on Patreon: https://www.patreon.com/mattlewis92
+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

CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="0.26.9"></a>
+## [0.26.9](https://github.com/mattlewis92/angular-calendar/compare/v0.26.8...v0.26.9) (2019-03-17)
+
+
+### Bug Fixes
+
+* allow scrolling on clickable elements on mobile ([b78b87d](https://github.com/mattlewis92/angular-calendar/commit/b78b87d)), closes [#867](https://github.com/mattlewis92/angular-calendar/issues/867)
+
+
+
+<a name="0.26.8"></a>
+## [0.26.8](https://github.com/mattlewis92/angular-calendar/compare/v0.26.7...v0.26.8) (2019-03-17)
+
+
+### Bug Fixes
+
+* **week-view:** update header when week starts on changes ([bf3dd4d](https://github.com/mattlewis92/angular-calendar/commit/bf3dd4d)), closes [#868](https://github.com/mattlewis92/angular-calendar/issues/868)
+* throw better error message on invalid date formatter ([5f1fe72](https://github.com/mattlewis92/angular-calendar/commit/5f1fe72)), closes [#897](https://github.com/mattlewis92/angular-calendar/issues/897)
+
+
+
 <a name="0.26.7"></a>
 ## [0.26.7](https://github.com/mattlewis92/angular-calendar/compare/v0.26.6...v0.26.7) (2019-03-16)
 

README.md

@@ -118,7 +118,7 @@ As there are so many events to show on each month, it doesn’t provide a lot of
 
 ### Does this calendar work with mobile?
 
-This library is not optimised for mobile. Due to the complex nature of a calendar component, it is non trivial to build a calendar that has a great UX on both desktop and mobile. It is recommended to build your own calendar component for mobile that has a dedicated UX. You may be able to get some degree of mobile support by setting some custom CSS rules for smaller screens and [including hammerjs](http://hammerjs.github.io/) but your mileage may vary.
+This library is not optimised for mobile. Due to the complex nature of a calendar component, it is non trivial to build a calendar that has a great UX on both desktop and mobile. It is recommended to build your own calendar component for mobile that has a dedicated UX. You may be able to get some degree of mobile support by setting some custom CSS rules for smaller screens, [including hammerjs](http://hammerjs.github.io/) and using a [custom hammerjs config](https://github.com/mattlewis92/angular-calendar/blob/master/projects/demos/app/hammer-config.ts) to allow scrolling on clickable elements.
 
 ### How do I use a custom template?
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-calendar",
-  "version": "0.26.7",
+  "version": "0.26.9",
   "description": "A calendar component for angular 6.0+ that can display events on a month, week or day view",
   "scripts": {
     "start": "node --max_old_space_size=8192 ./node_modules/.bin/ng serve --open",
@@ -105,6 +105,7 @@
     "moment-timezone": "^0.5.23",
     "ng-packagr": "^4.7.1",
     "ngx-contextmenu": "^5.1.1",
+    "ngx-perfect-scrollbar": "^7.2.1",
     "node-sass": "^4.11.0",
     "postcss-cli": "^6.1.2",
     "postcss-flexibility": "^2.0.0",
@@ -132,7 +133,7 @@
     "@angular/core": ">=6.0.0 <9.0.0"
   },
   "dependencies": {
-    "angular-draggable-droppable": "^4.1.0",
+    "angular-draggable-droppable": "^4.2.0",
     "angular-resizable-element": "^3.2.4",
     "calendar-utils": "^0.3.0-beta.7",
     "positioning": "^1.4.0"

package.json

@@ -25,6 +25,16 @@ export class CalendarDatePipe implements PipeTransform {
     excludeDays: number[] = [],
     daysInWeek?: number
   ): string {
+    if (typeof this.dateFormatter[method] === 'undefined') {
+      const allowedMethods = Object.getOwnPropertyNames(
+        Object.getPrototypeOf(CalendarDateFormatter.prototype)
+      ).filter(iMethod => iMethod !== 'constructor');
+      throw new Error(
+        `${method} is not a valid date formatter. Can only be one of ${allowedMethods.join(
+          ', '
+        )}`
+      );
+    }
     return this.dateFormatter[method]({
       date,
       locale,

projects/angular-calendar/src/modules/common/calendar-date.pipe.ts

@@ -16,7 +16,7 @@ const clickElements = new Set<HTMLElement>();
   selector: '[mwlClick]'
 })
 export class ClickDirective implements OnInit, OnDestroy {
-  @Output('mwlClick') click: EventEmitter<MouseEvent> = new EventEmitter(); // tslint:disable-line
+  @Output('mwlClick') click = new EventEmitter<MouseEvent>(); // tslint:disable-line
 
   private removeListener: () => void;
 
@@ -27,6 +27,11 @@ export class ClickDirective implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    this.renderer.setAttribute(
+      this.elm.nativeElement,
+      'data-calendar-clickable',
+      'true'
+    );
     clickElements.add(this.elm.nativeElement);
     const eventName: string =
       typeof window !== 'undefined' && typeof window['Hammer'] !== 'undefined'

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

@@ -653,7 +653,8 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       changes.viewDate ||
       changes.excludeDays ||
       changes.weekendDays ||
-      changes.daysInWeek;
+      changes.daysInWeek ||
+      changes.weekStartsOn;
 
     const refreshBody =
       changes.viewDate ||

projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

@@ -95,4 +95,15 @@ describe('calendarDate pipe', () => {
       weekStartsOn: 0
     });
   });
+
+  it('should throw when an invalid method is passed', () => {
+    const fixture: ComponentFixture<TestComponent> = TestBed.createComponent(
+      TestComponent
+    );
+    fixture.componentInstance.date = new Date('2016-01-01');
+    fixture.componentInstance.method = 'invalid';
+    expect(() => fixture.detectChanges()).to.throw(
+      /^invalid is not a valid date formatter. Can only be one of/
+    );
+  });
 });

projects/angular-calendar/test/calendar-date.pipe.spec.ts

@@ -19,6 +19,7 @@ interface Demo {
   path: string;
   sources?: Source[];
   darkTheme: boolean;
+  tags: string[];
 }
 
 async function getSources(folder: string): Promise<Source[]> {
@@ -83,9 +84,11 @@ const dependencyVersions: any = {
 })
 export class DemoAppComponent implements OnInit {
   demos: Demo[] = [];
+  filteredDemos: Demo[] = [];
   activeDemo: Demo;
   isMenuVisible = false;
   firstDemoLoaded = false;
+  searchText = '';
 
   constructor(private router: Router, analytics: Angulartics2GoogleAnalytics) {
     analytics.startTracking();
@@ -99,8 +102,10 @@ export class DemoAppComponent implements OnInit {
       .map(route => ({
         path: route.path,
         label: route.data.label,
-        darkTheme: route.data.darkTheme
+        darkTheme: route.data.darkTheme,
+        tags: route.data.tags || []
       }));
+    this.updateFilteredDemos();
 
     this.router.events
       .pipe(filter(event => event instanceof NavigationEnd))
@@ -127,6 +132,16 @@ export class DemoAppComponent implements OnInit {
       });
   }
 
+  updateFilteredDemos() {
+    this.filteredDemos = this.demos.filter(
+      demo =>
+        !this.searchText ||
+        [demo.label.toLowerCase(), ...demo.tags].some(tag =>
+          tag.includes(this.searchText.toLowerCase())
+        )
+    );
+  }
+
   editInStackblitz(demo: Demo): void {
     const files: {
       [path: string]: string;

projects/demos/app/demo-app.component.ts

@@ -4,13 +4,22 @@ h3 {
 
 .container-fluid {
   padding-top: 70px;
-  padding-bottom: 50px;
+}
+
+@media (min-width: 768px) {
+  .container-fluid {
+    height: 100vh;
+  }
 }
 
 .spacer-top {
   margin-top: 15px;
 }
 
+.sidebar-nav {
+  padding-left: 5px;
+}
+
 .sidebar-nav h4 {
   margin-bottom: 20px;
 }
@@ -41,4 +50,12 @@ h3 {
 pre {
   background-color: #f5f5f5;
   padding: 15px;
-}
+}
+
+.fill-height {
+  height: 100%;
+}
+
+.scroll-y {
+  overflow-y: auto;
+}