feat(date-picker,date-range): add calendar as implicit actions context

Author: damyanpetev

CHANGELOG.md

@@ -67,6 +67,14 @@ All notable changes for each version of this project will be documented in this
     - `increment` and `decrement` methods now accept an optional `delta` parameter which targets the currently spun date portion. It takes precedence over the values set in `spinDelta`.
 - `IgxDatePicker`
     - **Feature** - `value` accepts ISO 8601 string format.
+    - **Feature** - The actions template now exposes the Calendar component as implicit context:
+      ```html
+      <igx-date-picker>
+        <ng-template igxPickerActions let-calendar>
+          <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
+        </ng-template>
+      </igx-date-picker>
+      ```
     - **Breaking Change** - `value` type could be `Date` or `string`.
     - **Breaking Change** - `onSelection` event is renamed to `valueChange`.
     - **Breaking Change** - new way to define custom elements in the `igx-date-picker` while the following properties are deleted or deprecated: `formatter`, `context`, `labelInternal`, `template`. 
@@ -115,6 +123,14 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** - `onValidationFailed` event is renamed to `validationFailed`.
 - `IgxDateRangePicker`
     - **Feature** - `value` start and end accept ISO 8601 string format.
+    - **Feature** - The actions template now exposes the Calendar component as implicit context:
+      ```html
+      <igx-date-range-picker>
+        <ng-template igxPickerActions let-calendar>
+          <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
+        </ng-template>
+      </igx-date-range-picker>
+      ```
     - **Breaking Change** - `value` start and end types could be `Date` or `string`.
     - **Breaking Change** - `rangeSelected` event is renamed to `valueChange`.
     - **Breaking Change** - `onOpening`, `onOpened`, `onClosing` and `onClosed` events are renamed respectively to `opening`, `opened`, `closing` and `closed`.

projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html

@@ -12,7 +12,5 @@
 </ng-template>
 
 <igx-calendar></igx-calendar>
-<ng-container *ngTemplateOutlet="this.pickerActions 
-    ? this.pickerActions.template 
-    : defaultPickerActions">
+<ng-container *ngTemplateOutlet="this.pickerActions?.template || defaultPickerActions; context: { $implicit: this.calendar }">
 </ng-container>

projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.spec.ts

@@ -0,0 +1,86 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, fakeAsync, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxCalendarComponent } from '../../calendar/public_api';
+import { IgxButtonDirective, IgxButtonModule } from '../../directives/button/button.directive';
+import { configureTestSuite } from '../../test-utils/configure-suite';
+import { IgxPickerActionsDirective, IgxPickersCommonModule } from '../picker-icons.common';
+import { IgxCalendarContainerComponent, IgxCalendarContainerModule } from './calendar-container.component';
+
+
+describe('Calendar Container', () => {
+    let fixture: ComponentFixture<IgxDatePickerTestComponent>;
+    let container: IgxCalendarContainerComponent;
+    configureTestSuite();
+    beforeAll(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                IgxDatePickerTestComponent
+            ],
+            imports: [IgxCalendarContainerModule, IgxPickersCommonModule, IgxButtonModule, NoopAnimationsModule]
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(fakeAsync(() => {
+        fixture = TestBed.createComponent(IgxDatePickerTestComponent);
+        fixture.detectChanges();
+        container = fixture.componentInstance.container;
+    }));
+
+    it('should render calendar', () => {
+        fixture = TestBed.createComponent(IgxDatePickerTestComponent);
+        fixture.detectChanges();
+        const calendar = fixture.debugElement.query(By.directive(IgxCalendarComponent));
+        expect(calendar).toBeDefined();
+    });
+
+    it('should render default actions', () => {
+        spyOn(container.calendarClose, 'emit');
+        spyOn(container.todaySelection, 'emit');
+        container.closeButtonLabel = 'cancel';
+        fixture.detectChanges();
+        let buttons = fixture.debugElement.queryAll(By.directive(IgxButtonDirective));
+        expect(buttons).toHaveSize(1);
+        expect(buttons[0].nativeElement.innerText).toEqual('cancel');
+        buttons[0].triggerEventHandler('click', {});
+        expect(container.calendarClose.emit).toHaveBeenCalledTimes(1);
+
+        container.todayButtonLabel = 'ok';
+        fixture.detectChanges();
+        buttons = fixture.debugElement.queryAll(By.directive(IgxButtonDirective));
+        expect(buttons).toHaveSize(2);
+        expect(buttons[1].nativeElement.innerText).toEqual('ok');
+        buttons[1].triggerEventHandler('click', {});
+        expect(container.todaySelection.emit).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render default toggle and clear icons', () => {
+        spyOn(fixture.componentInstance, 'doWork');
+        container.pickerActions = fixture.componentInstance.actions;
+        fixture.detectChanges();
+
+        const calendar = fixture.debugElement.query(By.directive(IgxCalendarComponent)).componentInstance;
+        const buttons = fixture.debugElement.queryAll(By.directive(IgxButtonDirective));
+        expect(buttons).toHaveSize(1);
+        expect(buttons[0].nativeElement.innerText).toEqual('action');
+        buttons[0].triggerEventHandler('click', {});
+        expect(fixture.componentInstance.doWork).toHaveBeenCalledWith(calendar);
+    });
+});
+
+@Component({
+    template: `
+        <igx-calendar-container>
+        </igx-calendar-container>
+        <ng-template igxPickerActions let-calendar>
+            <button igxButton (click)="doWork(calendar)">action</button>
+        </ng-template>
+        `
+})
+export class IgxDatePickerTestComponent {
+    @ViewChild(IgxCalendarContainerComponent) public container: IgxCalendarContainerComponent;
+    @ViewChild(IgxPickerActionsDirective) public actions: IgxPickerActionsDirective;
+    public doWork = (_calendar: any) => {};
+}

src/app/date-picker/date-picker.sample.html

@@ -52,9 +52,11 @@ <h4 class="sample-title">Additional Icons And Custom Buttons</h4>
                 <igx-suffix (click)="dp5.open()">
                     <igx-icon>alarm</igx-icon>
                 </igx-suffix>
-                <ng-template igxPickerActions>
+                <ng-template igxPickerActions let-calendar>
                     <div class="action-buttons">
-                        <button igxButton="flat" (click)="dp5.selectToday()">Today</button>
+                        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
+                        <button igxButton="flat" (click)="calendar.viewDate = nextYear">Next Year</button>
+                        <button igxButton="flat" (click)="dp5.selectToday()">Select Today</button>
                     </div>
                 </ng-template>
             </igx-date-picker>

src/app/date-picker/date-picker.sample.scss

@@ -13,7 +13,7 @@
 
 .action-buttons {
     display: flex;
-    flex-flow: column;
+    flex-flow: row;
     margin: 10px;
 }
 

src/app/date-picker/date-picker.sample.ts

@@ -19,6 +19,8 @@ export class DatePickerSampleComponent {
     public date5 = new Date(new Date(this.date4.getFullYear(), this.date4.getMonth(), this.date4.getDate() + 1));
     public date6 = new Date(new Date(this.date5.getFullYear(), this.date5.getMonth(), this.date5.getDate() + 1));
     public date7 = new Date(new Date(this.date6.getFullYear(), this.date6.getMonth(), this.date6.getDate() + 1));
+    public today = new Date(this.date1);
+    public nextYear = new Date(this.date1.getFullYear() + 1, this.date1.getMonth(), this.date1.getDate());
 
     public disabledDates: DateRangeDescriptor[] = [{ type: DateRangeType.Specific, dateRange: [this.date1, this.date2, this.date3] }];
     public specialDates: DateRangeDescriptor[] = [{ type: DateRangeType.Specific, dateRange: [this.date5, this.date6, this.date7] }];