Date/time picker: action buttons customization (#4942)

* feat(pickers): custom buttons functionality #4647

* chore(*): fix lint errors #4647

* chore(*): remove trailing white space #4647

* feat(pickers): add custom styling ability #4647

* feat(pickers): remove css and unify retemplating approach #4647

* chore(*): update README.md and CHANGELOG.md #4647

* chore(*): address some review comments #4647

* chore(*): more code improvements #4647

* fix(time-picker): Fixed failing test #4942

* chore(*): update code snippet in README.md #4647

* fix(*): build error #4647

Author: SAndreeva

CHANGELOG.md

@@ -3,10 +3,26 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 7.3.4
+
 ### New feature
 - **igxSlider** - exposing new `labels` property accepting a collection of literal values that become equally spread over the slider, by placing each element as a thumb label.
 - **igxSlider** - deprecate **isContiunous** property.
 
+- `igxTimePicker` changes
+    - `onClosing` event is added.
+    - **Breaking Change** `onOpen` event is renamed to `onOpened`.
+    - **Breaking Change** `onClose` event is renamed to `onClosed`.
+    - **Behavioral Change** - action buttons are now available in the dropdown mode.
+    - **Feature** `IgxTimePickerComponent` now provides the ability for adding custom action buttons. Read up more information in the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/time-picker/README.md)
+
+- `igxDatePicker` changes
+    - `onClosing` event is added.
+    - **Breaking Change** `onOpen` event is renamed to `onOpened`.
+    - **Breaking Change** `onClose` event is renamed to `onClosed`.
+    - **Behavioral Change** - action buttons are now available in the dropdown mode.
+    - **Feature** `IgxDatePickerComponent` now provides the ability for adding custom action buttons. Read up more information in the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/date-picker/README.md)
+
+
 ## 7.3.3
 
 - `igx-core()` now includes some styles for printing layout.
@@ -15,6 +31,10 @@ In order to turn them off, you need to pass an argument and set it to `false`
         @include igx-core($print-layout: false); 
     ```
 
+- `Pager`
+    - **Behavioral Change** - The pager is now hidden when there are no records in the grid.
+
+
 ## 7.3.1
 - `IgxGrid` Custom keyboard navigation
     - `onFocusChange` event is deprecated.

projects/igniteui-angular/migrations/migration-collection.json

@@ -40,6 +40,11 @@
             "version": "7.2.0",
             "description": "Updates Ignite UI for Angular from v7.0.2 to v7.2.0",
             "factory": "./update-7_2_0"
+        },
+        "migration-09": {
+            "version": "7.3.4",
+            "description": "Updates Ignite UI for Angular from v7.2.0 to v7.3.4",
+            "factory": "./update-7_3_4"
         }
     }
 }

projects/igniteui-angular/migrations/update-7_3_4/changes/outputs.json

@@ -0,0 +1,37 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "onOpen",
+            "replaceWith": "onOpened",
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onClose",
+            "replaceWith": "onClosed",
+            "owner": {
+                "selector": "igx-time-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onOpen",
+            "replaceWith": "onOpened",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onClose",
+            "replaceWith": "onClosed",
+            "owner": {
+                "selector": "igx-date-picker",
+                "type": "component"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-7_3_4/index.spec.ts

@@ -0,0 +1,54 @@
+import * as path from 'path';
+
+// tslint:disable:no-implicit-dependencies
+import { virtualFs } from '@angular-devkit/core';
+import { EmptyTree } from '@angular-devkit/schematics';
+// tslint:disable-next-line:no-submodule-imports
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update 7.3.4', () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+      };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should update time picker events', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.html',
+            `<igx-time-picker (onOpen)="handler" (onClose)="handler"></igx-time-picker>`
+        );
+        const tree = schematicRunner.runSchematic('migration-09', {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(
+                `<igx-time-picker (onOpened)="handler" (onClosed)="handler"></igx-time-picker>`);
+        done();
+    });
+
+    it('should update date picker events', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.html',
+            `<igx-date-picker (onOpen)="handler" (onClose)="handler"></igx-date-picker>`
+        );
+        const tree = schematicRunner.runSchematic('migration-09', {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(
+                `<igx-date-picker (onOpened)="handler" (onClosed)="handler"></igx-date-picker>`);
+        done();
+    });
+});

projects/igniteui-angular/migrations/update-7_3_4/index.ts

@@ -0,0 +1,25 @@
+import * as path from 'path';
+
+// tslint:disable:no-implicit-dependencies
+import { normalize } from '@angular-devkit/core';
+import {
+    chain,
+    Rule,
+    SchematicContext,
+    SchematicsException,
+    Tree
+} from '@angular-devkit/schematics';
+import { filterSourceDirs } from '../common/filterSourceDirs';
+import { getImportModulePositions } from '../common/tsUtils';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '7.3.4';
+
+export default function(): Rule {
+    return (host: Tree, context: SchematicContext) => {
+        context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+        const update = new UpdateChanges(__dirname, host, context);
+        update.applyChanges();
+    };
+}

projects/igniteui-angular/src/lib/date-picker/README.md

@@ -88,6 +88,21 @@ In order to re-template a date picker in `dropdown` mode, an element should be m
     </ng-template>
 </igx-date-picker>
 ```
+The DatePicker action buttons could be retemplated.
+```html
+<igx-date-picker #picker>
+    <ng-template igxDatePickerActions>
+        <div class="action-buttons">
+            <button igxButton="flat" (click)="selectToday(picker)">Today</button>
+        </div>
+    </ng-template>
+</igx-date-picker>
+```
+```typescript
+    public selectToday(picker: IgxDatePickerComponent) {
+        picker.calendar.value = picker.calendar.viewDate = new Date(Date.now());
+    }
+```
 
 # API
 

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

@@ -1,10 +1,14 @@
-<igx-calendar #calendar></igx-calendar>
-<div class="igx-date-picker__buttons" *ngIf="isReadonly &&
-    (cancelButtonLabel || todayButtonLabel)">
-    <button #closeButton *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
-        {{ cancelButtonLabel }}
-    </button>
-    <button #todayButton *ngIf="todayButtonLabel" igxButton="flat" igxRipple (click)="triggerTodaySelection()">
-        {{ todayButtonLabel }}
-    </button>
+<ng-template #defaultDatePickerActions>
+    <div *ngIf="cancelButtonLabel || todayButtonLabel" class="igx-date-picker__buttons">
+        <button #closeButton *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
+            {{ cancelButtonLabel }}
+        </button>
+        <button #todayButton *ngIf="todayButtonLabel" igxButton="flat" igxRipple (click)="triggerTodaySelection()">
+            {{ todayButtonLabel }}
+        </button>
+    </div>
+</ng-template>
+<div>
+    <igx-calendar #calendar></igx-calendar>
+    <ng-container *ngTemplateOutlet="datePickerActions ? datePickerActions.template : defaultDatePickerActions"></ng-container>
 </div>

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

@@ -1,6 +1,7 @@
 import { Component, ViewChild, Input, Output, EventEmitter, HostListener, HostBinding } from '@angular/core';
 import { IgxCalendarComponent } from '../calendar';
 import { InteractionMode } from '../core/enums';
+import { IgxDatePickerActionsDirective } from './date-picker.directives';
 
 /**
  * @hidden
@@ -26,6 +27,9 @@ export class IgxCalendarContainerComponent {
     @Input()
     public todayButtonLabel: string;
 
+    @Input()
+    public datePickerActions: IgxDatePickerActionsDirective;
+
     @Output()
     public onClose = new EventEmitter();
 

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -277,6 +277,10 @@ describe('IgxDatePicker', () => {
         const picker = document.getElementsByClassName('igx-calendar-picker');
         const formattedSubHeaderText = (picker[0].children[1] as HTMLElement).innerText;
         expect(formattedSubHeaderText).toBe('2019/Oct');
+
+        const buttons = document.getElementsByClassName('igx-button--flat');
+        expect(buttons.length).toEqual(1);
+        expect((buttons[0]as HTMLElement).innerText).toBe('TEST');
     });
 
     it('Retemplated calendar in date picker - dropdown mode', () => {
@@ -295,6 +299,10 @@ describe('IgxDatePicker', () => {
         const picker = document.getElementsByClassName('igx-calendar-picker');
         const formattedSubHeaderText = (picker[0].children[1] as HTMLElement).innerText;
         expect(formattedSubHeaderText).toBe('2019/Oct');
+
+        const buttons = document.getElementsByClassName('igx-button--flat');
+        expect(buttons.length).toEqual(1);
+        expect((buttons[0]as HTMLElement).innerText).toBe('TEST');
     });
 
     it('locale propagate calendar value (de-DE)', () => {
@@ -1197,6 +1205,9 @@ export class IgxDatePickerEditableComponent {
             <span class="date__el" (click)="format.yearView()">{{ format.year.combined }}/</span>
             <span class="date__el" (click)="format.monthView()">{{ format.month.combined | titlecase }}</span>
         </ng-template>
+        <ng-template igxDatePickerActions>
+            <button igxButton="flat">TEST</button>
+        </ng-template>
     </igx-date-picker>
     `
 })