From efcaf6da94cacb9586dfde873854fceb17c67d35 Mon Sep 17 00:00:00 2001
From: Stefana Andreeva <sandreeva@infragistics.com>
Date: Thu, 30 May 2019 11:21:51 +0300
Subject: [PATCH 01/10] feat(pickers): custom buttons functionality #4647

---
 .../migrations/migration-collection.json      |   5 +
 .../update-7_3_3/changes/outputs.json         |  37 ++++++
 .../migrations/update-7_3_3/index.spec.ts     |  54 +++++++++
 .../migrations/update-7_3_3/index.ts          |  25 ++++
 .../calendar-container.component.html         |  10 +-
 .../calendar-container.component.ts           |   4 +
 .../date-picker/date-picker.component.spec.ts |  11 ++
 .../lib/date-picker/date-picker.component.ts  |  49 +++++++-
 .../lib/date-picker/date-picker.directives.ts |  10 ++
 .../time-picker/time-picker.component.html    |   9 +-
 .../time-picker/time-picker.component.spec.ts | 113 ++++++++++++++++--
 .../lib/time-picker/time-picker.component.ts  |  67 ++++++++++-
 .../lib/time-picker/time-picker.directives.ts |  10 ++
 src/app/date-picker/date-picker.sample.html   |   3 +
 src/app/date-picker/date-picker.sample.ts     |   4 +
 src/app/time-picker/time-picker.sample.html   |   9 +-
 src/app/time-picker/time-picker.sample.ts     |   6 +
 17 files changed, 401 insertions(+), 25 deletions(-)
 create mode 100644 projects/igniteui-angular/migrations/update-7_3_3/changes/outputs.json
 create mode 100644 projects/igniteui-angular/migrations/update-7_3_3/index.spec.ts
 create mode 100644 projects/igniteui-angular/migrations/update-7_3_3/index.ts

diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json
index 85db119c69a..37941992cd4 100644
--- a/projects/igniteui-angular/migrations/migration-collection.json
+++ b/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.3",
+            "description": "Updates Ignite UI for Angular from v7.2.0 to v7.3.3",
+            "factory": "./update-7_3_3"
         }
     }
 }
diff --git a/projects/igniteui-angular/migrations/update-7_3_3/changes/outputs.json b/projects/igniteui-angular/migrations/update-7_3_3/changes/outputs.json
new file mode 100644
index 00000000000..1d7e4abeda9
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-7_3_3/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"
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/projects/igniteui-angular/migrations/update-7_3_3/index.spec.ts b/projects/igniteui-angular/migrations/update-7_3_3/index.spec.ts
new file mode 100644
index 00000000000..f4886a3f80b
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-7_3_3/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.3', () => {
+    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();
+    });
+});
diff --git a/projects/igniteui-angular/migrations/update-7_3_3/index.ts b/projects/igniteui-angular/migrations/update-7_3_3/index.ts
new file mode 100644
index 00000000000..cb4c9acb155
--- /dev/null
+++ b/projects/igniteui-angular/migrations/update-7_3_3/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.3';
+
+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();
+    };
+}
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html b/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html
index f439f6e1880..348892309a4 100644
--- a/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html
+++ b/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)">
+<ng-template #defaultDatePickerActions>
     <button #closeButton *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
         {{ cancelButtonLabel }}
     </button>
     <button #todayButton *ngIf="todayButtonLabel" igxButton="flat" igxRipple (click)="triggerTodaySelection()">
         {{ todayButtonLabel }}
     </button>
+</ng-template>
+<div>
+    <igx-calendar #calendar></igx-calendar>
+    <div class="igx-date-picker__buttons">
+        <ng-container *ngTemplateOutlet="datePickerActions ? datePickerActions.template : defaultDatePickerActions"></ng-container>
+    </div>
 </div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.ts b/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.ts
index e34b153f897..06be516049c 100644
--- a/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.ts
+++ b/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();
 
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
index 40689980770..65426ad111b 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
+++ b/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>
     `
 })
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index 47d54023581..5859da0b270 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -50,12 +50,13 @@ import {
 } from './date-picker.utils';
 import { DatePickerDisplayValuePipe, DatePickerInputValuePipe } from './date-picker.pipes';
 import { IDatePicker } from './date-picker.common';
-import { KEYS } from '../core/utils';
-import { IgxDatePickerTemplateDirective } from './date-picker.directives';
+import { KEYS, CancelableBrowserEventArgs } from '../core/utils';
+import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from './date-picker.directives';
 import { IgxCalendarContainerComponent } from './calendar-container.component';
 import { InteractionMode } from '../core/enums';
 import { getViewportRect } from '../services/overlay/utilities';
 import { fadeIn, fadeOut } from '../animations/fade';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 
@@ -549,9 +550,16 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      *<igx-date-picker (onOpen)="open($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
      *```
      */
+    @DeprecateProperty(`'onOpen' @Ouput property is deprecated\nUse 'onOpened' instead.`)
     @Output()
     public onOpen = new EventEmitter<IgxDatePickerComponent>();
 
+    /**
+     *An event that is emitted when the `IgxDatePickerComponent` calendar is opened.
+    */
+    @Output()
+    public onOpened = new EventEmitter<IgxDatePickerComponent>();
+
     /**
      *"An event that is emitted when the `IgxDatePickerComponent` is closed.
      *```typescript
@@ -563,8 +571,22 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      *<igx-date-picker (onClose)="close($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
      *```
      */
+    @DeprecateProperty(`'onClose' @Ouput property is deprecated\nUse 'onClosed' instead.`)
     @Output()
     public onClose = new EventEmitter<IgxDatePickerComponent>();
+
+    /**
+     *An event that is emitted when the `IgxDatePickerComponent` is closed.
+    */
+    @Output()
+    public onClosed = new EventEmitter<IgxDatePickerComponent>();
+
+    /**
+     * An event that is emitted when the `IgxDatePickerComponent` is being closed.
+     */
+    @Output()
+    public onClosing = new EventEmitter<CancelableBrowserEventArgs>();
+
     /**
      *An @Output property that is fired when selection is made in the calendar.
      *```typescript
@@ -673,6 +695,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     @ContentChild(IgxCalendarSubheaderTemplateDirective, { read: IgxCalendarSubheaderTemplateDirective })
     public subheaderTemplate: IgxCalendarSubheaderTemplateDirective;
 
+    /**
+     *@hidden
+     */
+    @ContentChild(IgxDatePickerActionsDirective, { read: IgxDatePickerActionsDirective })
+    public datePickerActionsDirective: IgxDatePickerActionsDirective;
+
     public calendar: IgxCalendarComponent;
     public hasHeader = true;
     public collapsed = true;
@@ -804,6 +832,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
                 this._onClosed();
             });
 
+        this._overlayService.onClosing.pipe(
+            filter(overlay => overlay.id === this._componentID),
+            takeUntil(this._destroy$)).subscribe((event) => {
+                this.onClosing.emit(event);
+            });
+
         if (this.mode === InteractionMode.DropDown) {
             this.dateFormatParts = DatePickerUtil.parseDateFormat(this.mask, this.locale);
             if (this.mask === undefined) {
@@ -1159,6 +1193,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
     private _onOpened(event): void {
         this._onTouchedCallback();
+        this.onOpened.emit(this);
+
+        // TODO: remove this line after deprecating 'onOpen'
         this.onOpen.emit(this);
 
         if (this.calendar) {
@@ -1169,6 +1206,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     private _onClosed(): void {
         this.collapsed = true;
         this._componentID = null;
+        this.onClosed.emit(this);
+
+        // TODO: remove this line after deprecating 'onClose'
         this.onClose.emit(this);
 
         if (this.getEditElement()) {
@@ -1200,6 +1240,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         componentInstance.vertical = isVertical;
         componentInstance.cancelButtonLabel = this.cancelButtonLabel;
         componentInstance.todayButtonLabel = this.todayButtonLabel;
+        componentInstance.datePickerActions = this.datePickerActionsDirective;
 
         componentInstance.onClose.pipe(takeUntil(this._destroy$)).subscribe(() => this.closeCalendar());
         componentInstance.onTodaySelection.pipe(takeUntil(this._destroy$)).subscribe(() => this.triggerTodaySelection());
@@ -1265,9 +1306,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
  * @hidden
  */
 @NgModule({
-    declarations: [IgxDatePickerComponent, IgxCalendarContainerComponent,
+    declarations: [IgxDatePickerComponent, IgxCalendarContainerComponent, IgxDatePickerActionsDirective,
         IgxDatePickerTemplateDirective, DatePickerDisplayValuePipe, DatePickerInputValuePipe],
-    exports: [IgxDatePickerComponent, IgxDatePickerTemplateDirective, DatePickerDisplayValuePipe, DatePickerInputValuePipe],
+    exports: [IgxDatePickerComponent, IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective, DatePickerDisplayValuePipe, DatePickerInputValuePipe],
     imports: [CommonModule, IgxIconModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule, IgxRippleModule, IgxMaskModule],
     entryComponents: [IgxCalendarContainerComponent]
 })
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
index a227875a82d..42a92ab6189 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
@@ -12,3 +12,13 @@ import { Directive, TemplateRef } from '@angular/core';
 export class IgxDatePickerTemplateDirective {
     constructor(public template: TemplateRef<any>) { }
 }
+
+/**
+ * IgxDatePickerActionsDirective can be used to re-template the dropdown/dialog action buttons.
+ */
+@Directive({
+    selector: '[igxDatePickerActions]'
+})
+export class IgxDatePickerActionsDirective {
+    constructor(public template: TemplateRef<any>) { }
+}
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
index e148357a6fe..ebc439228c6 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
@@ -44,13 +44,16 @@ <h2 class="igx-time-picker__header-hour">
                 <span [igxAmPmItem]="ampm" *ngFor="let ampm of ampmView">{{ ampm }}</span>
             </div>
         </div>
-        <div *ngIf="mode === 'dialog'" class="igx-time-picker__buttons">
-            <button *ngIf="cancelButtonLabel.length" igxButton="flat" (click)="cancelButtonClick()">
+        <div *ngIf="!timePickerActionsDirective && (cancelButtonLabel || okButtonLabel)" class="igx-time-picker__buttons">
+            <button *ngIf="cancelButtonLabel" igxButton="flat" (click)="cancelButtonClick()">
                 {{cancelButtonLabel}}
             </button>
-            <button *ngIf="okButtonLabel.length" igxButton="flat" (click)="okButtonClick()">
+            <button *ngIf="okButtonLabel" igxButton="flat" (click)="okButtonClick()">
                 {{okButtonLabel}}
             </button>
         </div>
+        <ng-container *ngIf="timePickerActionsDirective">
+            <ng-content select="igx-time-picker-actions,[igxTimePickerActions]"></ng-content>
+        </ng-container>
     </div>
 </div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
index 680d1845176..6cf49c32b4e 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
@@ -1416,14 +1416,84 @@ describe('IgxTimePicker', () => {
 
             expect(timePicker.onOpen.emit).toHaveBeenCalled();
         }));
-    });
 
-    describe('TimePicker DropDown retemplating', () => {
-        it('TimePicker with retemplated input group and dropDownTarget ref variable', fakeAsync(() => {
-            const fixture = TestBed.createComponent(IgxTimePickerRetemplatedDropDownComponent);
+        it('should display OK and Cancel buttons by default.', fakeAsync(() => {
+            fixture.detectChanges();
+
+            const iconTime = dom.queryAll(By.css('.igx-icon'))[0];
+
+            UIInteractions.clickElement(iconTime);
+            tick();
+            fixture.detectChanges();
+
+            const buttons = document.getElementsByClassName('igx-time-picker__buttons')[0];
+            expect(buttons.children.length).toEqual(2);
+
+            const cancelBtn = buttons.children[0] as HTMLElement;
+            const okBtn = buttons.children[1] as HTMLElement;
+
+            expect(cancelBtn.innerText).toBe('Cancel');
+            expect(okBtn.innerText).toBe('OK');
+
+            const minuteColumn = dom.query(By.css('.igx-time-picker__minuteList'));
+            const keydownEvent = new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true });
+
+            minuteColumn.nativeElement.dispatchEvent(keydownEvent);
+            fixture.detectChanges();
+
+            expect(minuteColumn.nativeElement.children[3].innerText).toEqual('50');
+
+            cancelBtn.click();
+            tick();
+            fixture.detectChanges();
+
+            const input = dom.query(By.directive(IgxInputDirective));
+            expect(input.nativeElement.value).toEqual('05:45 PM');
+
+            UIInteractions.clickElement(iconTime);
+            tick();
+            fixture.detectChanges();
+
+            minuteColumn.nativeElement.dispatchEvent(keydownEvent);
+            fixture.detectChanges();
+
+            okBtn.click();
+            tick();
             fixture.detectChanges();
 
-            const dom = fixture.debugElement;
+            expect(input.nativeElement.value).toEqual('05:50 PM');
+
+            timePicker.okButtonLabel = '';
+            timePicker.cancelButtonLabel = '';
+
+            UIInteractions.clickElement(iconTime);
+            tick();
+            fixture.detectChanges();
+
+            expect(document.getElementsByClassName('igx-time-picker__buttons').length).toEqual(0);
+        }));
+    });
+
+    describe('TimePicker retemplating and customization', () => {
+        configureTestSuite();
+        let fixture;
+        let dom;
+
+        beforeEach(
+            async(() => {
+                fixture = TestBed.createComponent(IgxTimePickerRetemplatedDropDownComponent);
+                fixture.detectChanges();
+
+                dom = fixture.debugElement;
+            })
+        );
+
+        afterEach(async(() => {
+            UIInteractions.clearOverlay();
+        }));
+
+
+        it('TimePicker with retemplated input group and dropDownTarget ref variable', fakeAsync(() => {
             const icon = dom.query(By.css('.igx-icon'));
             const inputGroup = dom.query(By.css('.igx-input-group'));
 
@@ -1445,6 +1515,27 @@ describe('IgxTimePicker', () => {
             expect(dropdownClientRect.top).toEqual(inputGroupClientRect.bottom);
             expect(dropdownClientRect.left).toEqual(inputGroupClientRect.left);
         }));
+
+        it('should be able to add custom buttons.', fakeAsync(() => {
+            const iconTime = dom.queryAll(By.css('.igx-icon'))[0];
+
+            UIInteractions.clickElement(iconTime);
+            tick();
+            fixture.detectChanges();
+
+            const buttons = document.getElementsByClassName('igx-time-picker__buttons')[0];
+            expect(buttons.children.length).toEqual(1);
+
+            const customBtn = buttons.children[0] as HTMLElement;
+            expect(customBtn.innerText).toBe('SELECT');
+
+            customBtn.click();
+            tick();
+            fixture.detectChanges();
+
+            const input = dom.query(By.directive(IgxInputDirective));
+            expect(input.nativeElement.value).toEqual('10:45 AM');
+        }));
     });
 });
 
@@ -1606,7 +1697,7 @@ export class IgxTimePickerDropDownNoValueComponent {
 
 @Component({
 template: `
-<igx-time-picker [mode]="'dropdown'">
+<igx-time-picker #picker [mode]="'dropdown'">
     <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-displayTime="displayTime">
         <igx-input-group #dropDownTarget>
             <label igxLabel>Time</label>
@@ -1616,10 +1707,18 @@ template: `
             </igx-suffix>
         </igx-input-group>
     </ng-template>
+    <igx-time-picker-actions>
+        <button igxButton="flat" (click)="select(picker)">SELECT</button>
+    </igx-time-picker-actions>
 </igx-time-picker>
     `
 })
-export class IgxTimePickerRetemplatedDropDownComponent { }
+export class IgxTimePickerRetemplatedDropDownComponent { 
+    public select(picker: IgxTimePickerComponent) {
+        picker.value = new Date(2018, 10, 27, 10, 45, 0, 0);
+        picker.hideOverlay();
+    }
+}
 
 // helper functions
 function findByInnerText(collection, searchText) {
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
index 621a2d82dd1..81813a752b6 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
@@ -28,7 +28,8 @@ import {
     IgxHourItemDirective,
     IgxItemListDirective,
     IgxMinuteItemDirective,
-    IgxTimePickerTemplateDirective
+    IgxTimePickerTemplateDirective,
+    IgxTimePickerActionsDirective
 } from './time-picker.directives';
 import { Subject, fromEvent, interval, animationFrameScheduler } from 'rxjs';
 import { EditorProvider } from '../core/edit-provider';
@@ -43,8 +44,9 @@ import { IgxOverlayOutletDirective, IgxToggleModule, IgxToggleDirective } from '
 import { TimeDisplayFormatPipe, TimeInputFormatPipe } from './time-picker.pipes';
 import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from '../core/i18n/time-picker-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
-import { KEYS } from '../core/utils';
+import { KEYS, CancelableBrowserEventArgs } from '../core/utils';
 import { InteractionMode } from '../core/enums';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 
@@ -204,7 +206,10 @@ export class IgxTimePickerComponent implements
      * An accessor that returns the label of ok button.
     */
     get okButtonLabel(): string {
-        return this._okButtonLabel || this.resourceStrings.igx_time_picker_ok;
+        if (this._okButtonLabel === null) {
+            return this.resourceStrings.igx_time_picker_ok;
+        }
+        return this._okButtonLabel;
     }
 
     /**
@@ -223,7 +228,10 @@ export class IgxTimePickerComponent implements
     * An accessor that returns the label of cancel button.
     */
     get cancelButtonLabel(): string {
-        return this._cancelButtonLabel || this.resourceStrings.igx_time_picker_cancel;
+        if (this._cancelButtonLabel === null) {
+            return this.resourceStrings.igx_time_picker_cancel;
+        }
+        return this._cancelButtonLabel;
     }
 
     /**
@@ -408,15 +416,35 @@ export class IgxTimePickerComponent implements
      *<igx-toast #toast message="The time picker has been opened!"></igx-toast>
      * ```
      */
+    @DeprecateProperty(`'onOpen' @Ouput property is deprecated\nUse 'onOpened' instead.`)
     @Output()
     public onOpen = new EventEmitter<IgxTimePickerComponent>();
 
+    /**
+     * Emitted when a timePicker is opened.
+     */
+    @Output()
+    public onOpened = new EventEmitter<IgxTimePickerComponent>();
+
     /**
      * Emitted when a timePicker is being closed.
      */
+    @DeprecateProperty(`'onClose' @Ouput property is deprecated\nUse 'onClosed' instead.`)
     @Output()
     public onClose = new EventEmitter<IgxTimePickerComponent>();
 
+    /**
+     * Emitted when a timePicker is closed.
+     */
+    @Output()
+    public onClosed = new EventEmitter<IgxTimePickerComponent>();
+
+    /**
+     * Emitted when a timePicker is being closed.
+     */
+    @Output()
+    public onClosing = new EventEmitter<CancelableBrowserEventArgs>();
+
     /**
      * @hidden
      */
@@ -447,6 +475,12 @@ export class IgxTimePickerComponent implements
     @ContentChild(IgxTimePickerTemplateDirective, { read: IgxTimePickerTemplateDirective })
     protected timePickerTemplateDirective: IgxTimePickerTemplateDirective;
 
+    /**
+     *@hidden
+     */
+    @ContentChild(IgxTimePickerActionsDirective, { read: IgxTimePickerActionsDirective })
+    public timePickerActionsDirective: IgxTimePickerActionsDirective;
+
     /**
      * @hidden
      */
@@ -720,12 +754,22 @@ export class IgxTimePickerComponent implements
                     this._onDropDownClosed();
                 }
 
+                this.onClosed.emit(this);
+
+                // TODO: remove this line after deprecating 'onClose'
                 this.onClose.emit(this);
             });
 
             this.toggleRef.onOpened.pipe(takeUntil(this._destroy$)).subscribe(() => {
+                this.onOpened.emit(this);
+
+                // TODO: remove this line after deprecating 'onOpen'
                 this.onOpen.emit(this);
             });
+
+            this.toggleRef.onClosing.pipe(takeUntil(this._destroy$)).subscribe((event) => {
+                this.onClosing.emit(event);
+            });
         }
     }
 
@@ -1407,6 +1451,10 @@ export class IgxTimePickerComponent implements
      * ```
      */
     public cancelButtonClick(): void {
+        if (this.mode === InteractionMode.DropDown) {
+            this.displayValue = this._formatTime(this.value, this.format);
+        }
+
         this.hideOverlay();
 
         this.selectedHour = this._prevSelectedHour;
@@ -1457,7 +1505,14 @@ export class IgxTimePickerComponent implements
     }
 
     /**
-     * @hidden
+     * Closes the dropdown/dialog.
+     * ```html
+     *<igx-time-picker #timePicker></igx-time-picker>
+     * ```
+     * ```typescript
+     * @ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
+     * picker.hideOverlay();
+     * ```
      */
     public hideOverlay(): void {
         this.toggleRef.close();
@@ -1644,12 +1699,14 @@ export class IgxTimePickerComponent implements
         IgxMinuteItemDirective,
         IgxAmPmItemDirective,
         IgxTimePickerTemplateDirective,
+        IgxTimePickerActionsDirective,
         TimeDisplayFormatPipe,
         TimeInputFormatPipe
     ],
     exports: [
         IgxTimePickerComponent,
         IgxTimePickerTemplateDirective,
+        IgxTimePickerActionsDirective,
         TimeDisplayFormatPipe,
         TimeInputFormatPipe
     ],
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
index ad5d9f001d6..f67c576c907 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
@@ -345,3 +345,13 @@ export class IgxTimePickerTemplateDirective {
     constructor(public template: TemplateRef<any>) { }
 }
 
+/**
+ * This directive can be used to add custom action buttons to the dropdownb/dialog.
+ */
+@Directive({
+    selector: 'igx-time-picker-actions,[igxTimePickerActions]'
+})
+export class IgxTimePickerActionsDirective {
+    @HostBinding('class.igx-time-picker__buttons')
+    public defaultClass = true;
+}
\ No newline at end of file
diff --git a/src/app/date-picker/date-picker.sample.html b/src/app/date-picker/date-picker.sample.html
index a1d7ab8d7f5..862f1e234aa 100644
--- a/src/app/date-picker/date-picker.sample.html
+++ b/src/app/date-picker/date-picker.sample.html
@@ -55,6 +55,9 @@ <h4 class="sample-title">DropDown Date Picker</h4>
                             </igx-suffix>
                         </igx-input-group>
                     </ng-template>
+                    <ng-template igxDatePickerActions>
+                        <button igxButton="flat" (click)="selectToday(retemplated)">Today</button>
+                    </ng-template>
                 </igx-date-picker>
                 <label>Date: {{ retemplated.value | date:'longDate'}}</label>
             </div>
diff --git a/src/app/date-picker/date-picker.sample.ts b/src/app/date-picker/date-picker.sample.ts
index d724508ecea..bfca43c8077 100644
--- a/src/app/date-picker/date-picker.sample.ts
+++ b/src/app/date-picker/date-picker.sample.ts
@@ -76,4 +76,8 @@ export class DatePickerSampleComponent {
         const parsedDate = (input !== '') ? new Date(input) : '';
         this.retemplatedDP.value = parsedDate;
     }
+
+    public selectToday(picker: IgxDatePickerComponent) {
+        picker.calendar.value = picker.calendar.viewDate = new Date(Date.now());
+    }
 }
diff --git a/src/app/time-picker/time-picker.sample.html b/src/app/time-picker/time-picker.sample.html
index 4d28fb95800..2157caace87 100644
--- a/src/app/time-picker/time-picker.sample.html
+++ b/src/app/time-picker/time-picker.sample.html
@@ -31,7 +31,7 @@ <h4 class="sample-title">Vertical Time Picker</h4>
             <h4 class="sample-title">24h Time Picker</h4>
             <p class="sample-description">24h Time Format</p>
             <div class="preview">
-                <igx-time-picker format="H:mm"></igx-time-picker>
+                <igx-time-picker format="H:mm" [okButtonLabel]="''" [cancelButtonLabel]="''"></igx-time-picker>
             </div>
         </article>
         <article class="timepicker-column">
@@ -90,9 +90,9 @@ <h4 class="sample-title">Templated Time Picker</h4>
         </article>
         <article class="timepicker-column">
             <h4 class="sample-title">Templated Time Picker</h4>
-            <p class="sample-description">Time picker with dropdown mode + overlay settings </p>
+            <p class="sample-description">Time picker with dropdown mode + overlay settings + custom buttons</p>
             <div class="preview">
-                <igx-time-picker [value]="today" [overlaySettings]="myOverlaySettings" format="HH:mm" [mode]="'dropdown'">
+                <igx-time-picker #picker [value]="val" [overlaySettings]="myOverlaySettings" format="HH:mm" [mode]="'dropdown'">
                     <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayValue="displayValue">
                         <igx-input-group>
                             <input #target igxInput [value]="displayValue" (blur)="onBlur(target.value, value)"/>
@@ -101,6 +101,9 @@ <h4 class="sample-title">Templated Time Picker</h4>
                             </igx-suffix>
                         </igx-input-group>
                     </ng-template>
+                    <igx-time-picker-actions>
+                        <button igxButton="flat" (click)="selectToday(picker)">Today</button>
+                    </igx-time-picker-actions>
                 </igx-time-picker>
             </div>
         </article>
diff --git a/src/app/time-picker/time-picker.sample.ts b/src/app/time-picker/time-picker.sample.ts
index d6528deb8d6..359bad54e0e 100644
--- a/src/app/time-picker/time-picker.sample.ts
+++ b/src/app/time-picker/time-picker.sample.ts
@@ -17,6 +17,7 @@ export class TimePickerSampleComponent implements AfterViewInit {
     mode = InteractionMode.DropDown;
 
     date = new Date(2018, 10, 27, 17, 45, 0, 0);
+    val = new Date(0, 0, 0, 19, 35, 0, 0);
     today = new Date(Date.now());
 
     isRequired = true;
@@ -60,4 +61,9 @@ export class TimePickerSampleComponent implements AfterViewInit {
             timePickerValue.setHours(parts[0], parts[1]);
         }
     }
+
+    public selectToday(picker: IgxTimePickerComponent) {
+        picker.value = new Date(Date.now());
+        picker.hideOverlay();
+    }
 }

From bc1ba3e9f5aa974c035477f38a6d9b177b704898 Mon Sep 17 00:00:00 2001
From: Stefana Andreeva <sandreeva@infragistics.com>
Date: Thu, 30 May 2019 18:37:51 +0300
Subject: [PATCH 02/10] chore(*): fix lint errors #4647

---
 .../src/lib/date-picker/date-picker.component.ts          | 3 ++-
 .../src/lib/date-picker/date-picker.directives.ts         | 2 +-
 .../src/lib/time-picker/time-picker.component.spec.ts     | 8 ++++----
 .../src/lib/time-picker/time-picker.directives.ts         | 2 +-
 4 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index 5859da0b270..3b55d475c0a 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -1308,7 +1308,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 @NgModule({
     declarations: [IgxDatePickerComponent, IgxCalendarContainerComponent, IgxDatePickerActionsDirective,
         IgxDatePickerTemplateDirective, DatePickerDisplayValuePipe, DatePickerInputValuePipe],
-    exports: [IgxDatePickerComponent, IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective, DatePickerDisplayValuePipe, DatePickerInputValuePipe],
+    exports: [IgxDatePickerComponent, IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective, 
+        DatePickerDisplayValuePipe, DatePickerInputValuePipe],
     imports: [CommonModule, IgxIconModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule, IgxRippleModule, IgxMaskModule],
     entryComponents: [IgxCalendarContainerComponent]
 })
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
index 42a92ab6189..dcc9e536f55 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
@@ -21,4 +21,4 @@ export class IgxDatePickerTemplateDirective {
 })
 export class IgxDatePickerActionsDirective {
     constructor(public template: TemplateRef<any>) { }
-}
\ No newline at end of file
+}
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
index 6cf49c32b4e..8c08bef896f 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
@@ -1447,8 +1447,8 @@ describe('IgxTimePicker', () => {
             tick();
             fixture.detectChanges();
 
-            const input = dom.query(By.directive(IgxInputDirective));
-            expect(input.nativeElement.value).toEqual('05:45 PM');
+            const inputGroup = dom.query(By.directive(IgxInputDirective));
+            expect(inputGroup.nativeElement.value).toEqual('05:45 PM');
 
             UIInteractions.clickElement(iconTime);
             tick();
@@ -1461,7 +1461,7 @@ describe('IgxTimePicker', () => {
             tick();
             fixture.detectChanges();
 
-            expect(input.nativeElement.value).toEqual('05:50 PM');
+            expect(inputGroup.nativeElement.value).toEqual('05:50 PM');
 
             timePicker.okButtonLabel = '';
             timePicker.cancelButtonLabel = '';
@@ -1713,7 +1713,7 @@ template: `
 </igx-time-picker>
     `
 })
-export class IgxTimePickerRetemplatedDropDownComponent { 
+export class IgxTimePickerRetemplatedDropDownComponent {
     public select(picker: IgxTimePickerComponent) {
         picker.value = new Date(2018, 10, 27, 10, 45, 0, 0);
         picker.hideOverlay();
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
index f67c576c907..bb88bef7f9d 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
@@ -354,4 +354,4 @@ export class IgxTimePickerTemplateDirective {
 export class IgxTimePickerActionsDirective {
     @HostBinding('class.igx-time-picker__buttons')
     public defaultClass = true;
-}
\ No newline at end of file
+}

From 43eb2388593a99d155449e1e83a6832323df7225 Mon Sep 17 00:00:00 2001
From: Stefana Andreeva <sandreeva@infragistics.com>
Date: Fri, 31 May 2019 10:13:12 +0300
Subject: [PATCH 03/10] chore(*): remove trailing white space #4647

---
 .../src/lib/date-picker/date-picker.component.ts                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index 3b55d475c0a..6d15a286e7f 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -1308,7 +1308,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 @NgModule({
     declarations: [IgxDatePickerComponent, IgxCalendarContainerComponent, IgxDatePickerActionsDirective,
         IgxDatePickerTemplateDirective, DatePickerDisplayValuePipe, DatePickerInputValuePipe],
-    exports: [IgxDatePickerComponent, IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective, 
+    exports: [IgxDatePickerComponent, IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective,
         DatePickerDisplayValuePipe, DatePickerInputValuePipe],
     imports: [CommonModule, IgxIconModule, IgxInputGroupModule, IgxCalendarModule, IgxButtonModule, IgxRippleModule, IgxMaskModule],
     entryComponents: [IgxCalendarContainerComponent]

From b52a5c240d73320e2d614c0eb4d75d641f1217b1 Mon Sep 17 00:00:00 2001
From: Stefana Andreeva <sandreeva@infragistics.com>
Date: Fri, 31 May 2019 15:08:30 +0300
Subject: [PATCH 04/10] feat(pickers): add custom styling ability #4647

---
 .../lib/date-picker/calendar-container.component.html    | 2 +-
 .../src/lib/date-picker/date-picker.directives.ts        | 5 ++++-
 .../src/lib/time-picker/time-picker.directives.ts        | 9 +++++++--
 src/app/date-picker/date-picker.sample.html              | 2 +-
 .../{date-picker.sample.css => date-picker.sample.scss}  | 8 ++++++++
 src/app/date-picker/date-picker.sample.ts                | 3 ++-
 src/app/time-picker/time-picker.sample.html              | 2 +-
 .../{time-picker.sample.css => time-picker.sample.scss}  | 6 ++++++
 src/app/time-picker/time-picker.sample.ts                | 4 +++-
 9 files changed, 33 insertions(+), 8 deletions(-)
 rename src/app/date-picker/{date-picker.sample.css => date-picker.sample.scss} (56%)
 rename src/app/time-picker/{time-picker.sample.css => time-picker.sample.scss} (65%)

diff --git a/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html b/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html
index 348892309a4..25c9a8da03f 100644
--- a/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html
+++ b/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html
@@ -8,7 +8,7 @@
 </ng-template>
 <div>
     <igx-calendar #calendar></igx-calendar>
-    <div class="igx-date-picker__buttons">
+    <div [class]="datePickerActions && datePickerActions.cssClasses ? datePickerActions.cssClasses : 'igx-date-picker__buttons'">
         <ng-container *ngTemplateOutlet="datePickerActions ? datePickerActions.template : defaultDatePickerActions"></ng-container>
     </div>
 </div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
index dcc9e536f55..e1185eff196 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
@@ -1,4 +1,4 @@
-import { Directive, TemplateRef } from '@angular/core';
+import { Directive, TemplateRef, Input } from '@angular/core';
 
 @Directive({
     selector: '[igxDatePickerTemplate]'
@@ -21,4 +21,7 @@ export class IgxDatePickerTemplateDirective {
 })
 export class IgxDatePickerActionsDirective {
     constructor(public template: TemplateRef<any>) { }
+
+    @Input()
+    public cssClasses = '';
 }
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
index bb88bef7f9d..94239fdaf62 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
@@ -352,6 +352,11 @@ export class IgxTimePickerTemplateDirective {
     selector: 'igx-time-picker-actions,[igxTimePickerActions]'
 })
 export class IgxTimePickerActionsDirective {
-    @HostBinding('class.igx-time-picker__buttons')
-    public defaultClass = true;
+    @HostBinding('class')
+    get defaultClass(): string {
+        return this.cssClasses ? this.cssClasses : 'igx-time-picker__buttons';
+    };
+
+    @Input()
+    public cssClasses = '';
 }
diff --git a/src/app/date-picker/date-picker.sample.html b/src/app/date-picker/date-picker.sample.html
index 862f1e234aa..80c50355bc2 100644
--- a/src/app/date-picker/date-picker.sample.html
+++ b/src/app/date-picker/date-picker.sample.html
@@ -55,7 +55,7 @@ <h4 class="sample-title">DropDown Date Picker</h4>
                             </igx-suffix>
                         </igx-input-group>
                     </ng-template>
-                    <ng-template igxDatePickerActions>
+                    <ng-template igxDatePickerActions [cssClasses]="actionBtnCss">
                         <button igxButton="flat" (click)="selectToday(retemplated)">Today</button>
                     </ng-template>
                 </igx-date-picker>
diff --git a/src/app/date-picker/date-picker.sample.css b/src/app/date-picker/date-picker.sample.scss
similarity index 56%
rename from src/app/date-picker/date-picker.sample.css
rename to src/app/date-picker/date-picker.sample.scss
index 20f3da798cf..8a9066b234b 100644
--- a/src/app/date-picker/date-picker.sample.css
+++ b/src/app/date-picker/date-picker.sample.scss
@@ -6,3 +6,11 @@
     margin: 16px;
     width: 200px;
 }
+
+:host ::ng-deep {
+    .action-buttons {
+        display: flex;
+        flex-flow: column;
+        margin: 10px;
+    }
+}
diff --git a/src/app/date-picker/date-picker.sample.ts b/src/app/date-picker/date-picker.sample.ts
index bfca43c8077..09ebf50927d 100644
--- a/src/app/date-picker/date-picker.sample.ts
+++ b/src/app/date-picker/date-picker.sample.ts
@@ -8,12 +8,13 @@ import { DatePipe, formatDate } from '@angular/common';
 
 @Component({
     selector: 'app-date-picker-sample',
-    styleUrls: ['date-picker.sample.css'],
+    styleUrls: ['date-picker.sample.scss'],
     templateUrl: 'date-picker.sample.html'
 })
 
 export class DatePickerSampleComponent {
     date = new Date('10/3/2018');
+    actionBtnCss = "action-buttons";
 
     public formatOptions = {
         day: 'numeric',
diff --git a/src/app/time-picker/time-picker.sample.html b/src/app/time-picker/time-picker.sample.html
index 2157caace87..78522e310aa 100644
--- a/src/app/time-picker/time-picker.sample.html
+++ b/src/app/time-picker/time-picker.sample.html
@@ -101,7 +101,7 @@ <h4 class="sample-title">Templated Time Picker</h4>
                             </igx-suffix>
                         </igx-input-group>
                     </ng-template>
-                    <igx-time-picker-actions>
+                    <igx-time-picker-actions [cssClasses]="actionBtnCss">
                         <button igxButton="flat" (click)="selectToday(picker)">Today</button>
                     </igx-time-picker-actions>
                 </igx-time-picker>
diff --git a/src/app/time-picker/time-picker.sample.css b/src/app/time-picker/time-picker.sample.scss
similarity index 65%
rename from src/app/time-picker/time-picker.sample.css
rename to src/app/time-picker/time-picker.sample.scss
index 3cb6a86e56b..6cf8b6d4516 100644
--- a/src/app/time-picker/time-picker.sample.css
+++ b/src/app/time-picker/time-picker.sample.scss
@@ -5,4 +5,10 @@
     align-content: flex-start;
     margin: 16px;
     width: 200px;
+}
+
+.action-buttons {
+    display: flex;
+    flex-flow: column;
+    margin: 10px;
 }
\ No newline at end of file
diff --git a/src/app/time-picker/time-picker.sample.ts b/src/app/time-picker/time-picker.sample.ts
index 359bad54e0e..67c593a4712 100644
--- a/src/app/time-picker/time-picker.sample.ts
+++ b/src/app/time-picker/time-picker.sample.ts
@@ -3,13 +3,15 @@ import { IgxTimePickerComponent, InteractionMode, IgxInputDirective, AutoPositio
 
 @Component({
     selector: 'app-time-picker-sample',
-    styleUrls: ['time-picker.sample.css'],
+    styleUrls: ['time-picker.sample.scss'],
     templateUrl: 'time-picker.sample.html'
 })
 export class TimePickerSampleComponent implements AfterViewInit {
     max = '19:00';
     min = '09:00';
 
+    actionBtnCss = 'action-buttons';
+
     itemsDelta = { hours: 1, minutes: 5 };
     format = 'hh:mm tt';
     isSpinLoop = true;

From ae5b70f5bb09b96cf5b3488110688971f082d4ff Mon Sep 17 00:00:00 2001
From: Stefana Andreeva <sandreeva@infragistics.com>
Date: Mon, 3 Jun 2019 17:21:52 +0300
Subject: [PATCH 05/10] feat(pickers): remove css and unify retemplating
 approach #4647

---
 .../calendar-container.component.html         | 18 +++++++--------
 .../lib/date-picker/date-picker.directives.ts |  3 ---
 .../time-picker/time-picker.component.html    | 22 +++++++++----------
 .../time-picker/time-picker.component.spec.ts | 10 +++++----
 .../lib/time-picker/time-picker.directives.ts | 10 ++-------
 src/app/date-picker/date-picker.sample.html   | 20 ++++++++++++-----
 src/app/date-picker/date-picker.sample.scss   | 10 ++++-----
 src/app/date-picker/date-picker.sample.ts     |  1 -
 src/app/time-picker/time-picker.sample.html   | 10 +++++----
 src/app/time-picker/time-picker.sample.ts     |  2 --
 10 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html b/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html
index 25c9a8da03f..ae1d662b01f 100644
--- a/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html
+++ b/projects/igniteui-angular/src/lib/date-picker/calendar-container.component.html
@@ -1,14 +1,14 @@
 <ng-template #defaultDatePickerActions>
-    <button #closeButton *ngIf="cancelButtonLabel" igxButton="flat" igxRipple (click)="closeCalendar()">
-        {{ cancelButtonLabel }}
-    </button>
-    <button #todayButton *ngIf="todayButtonLabel" igxButton="flat" igxRipple (click)="triggerTodaySelection()">
-        {{ todayButtonLabel }}
-    </button>
+    <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>
-    <div [class]="datePickerActions && datePickerActions.cssClasses ? datePickerActions.cssClasses : 'igx-date-picker__buttons'">
-        <ng-container *ngTemplateOutlet="datePickerActions ? datePickerActions.template : defaultDatePickerActions"></ng-container>
-    </div>
+    <ng-container *ngTemplateOutlet="datePickerActions ? datePickerActions.template : defaultDatePickerActions"></ng-container>
 </div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
index e1185eff196..5bffec0e4f0 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
@@ -21,7 +21,4 @@ export class IgxDatePickerTemplateDirective {
 })
 export class IgxDatePickerActionsDirective {
     constructor(public template: TemplateRef<any>) { }
-
-    @Input()
-    public cssClasses = '';
 }
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
index ebc439228c6..803e48486b8 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
@@ -24,6 +24,16 @@
 </ng-template>
 <ng-container *ngTemplateOutlet="template; context: context"></ng-container>
 
+<ng-template #defaultTimePickerActions>
+    <div *ngIf="cancelButtonLabel || okButtonLabel" class="igx-time-picker__buttons">
+        <button *ngIf="cancelButtonLabel" igxButton="flat" (click)="cancelButtonClick()">
+            {{cancelButtonLabel}}
+        </button>
+        <button *ngIf="okButtonLabel" igxButton="flat" (click)="okButtonClick()">
+            {{okButtonLabel}}
+        </button>
+    </div>
+</ng-template>
 <div #container igxToggle class="igx-time-picker"
     [ngClass]="{'igx-time-picker--dropdown': mode === 'dropdown', 'igx-time-picker--vertical': vertical && mode === 'dialog'}">
     <div *ngIf="mode === 'dialog'" class="igx-time-picker__header">
@@ -44,16 +54,6 @@ <h2 class="igx-time-picker__header-hour">
                 <span [igxAmPmItem]="ampm" *ngFor="let ampm of ampmView">{{ ampm }}</span>
             </div>
         </div>
-        <div *ngIf="!timePickerActionsDirective && (cancelButtonLabel || okButtonLabel)" class="igx-time-picker__buttons">
-            <button *ngIf="cancelButtonLabel" igxButton="flat" (click)="cancelButtonClick()">
-                {{cancelButtonLabel}}
-            </button>
-            <button *ngIf="okButtonLabel" igxButton="flat" (click)="okButtonClick()">
-                {{okButtonLabel}}
-            </button>
-        </div>
-        <ng-container *ngIf="timePickerActionsDirective">
-            <ng-content select="igx-time-picker-actions,[igxTimePickerActions]"></ng-content>
-        </ng-container>
+        <ng-container *ngTemplateOutlet="timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions"></ng-container>
     </div>
 </div>
\ No newline at end of file
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
index 8c08bef896f..67770c482f1 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
@@ -1523,7 +1523,7 @@ describe('IgxTimePicker', () => {
             tick();
             fixture.detectChanges();
 
-            const buttons = document.getElementsByClassName('igx-time-picker__buttons')[0];
+            const buttons = document.getElementsByClassName('test')[0];
             expect(buttons.children.length).toEqual(1);
 
             const customBtn = buttons.children[0] as HTMLElement;
@@ -1707,9 +1707,11 @@ template: `
             </igx-suffix>
         </igx-input-group>
     </ng-template>
-    <igx-time-picker-actions>
-        <button igxButton="flat" (click)="select(picker)">SELECT</button>
-    </igx-time-picker-actions>
+    <ng-template igxTimePickerActions>
+        <div class="test">
+            <button igxButton="flat" (click)="select(picker)">SELECT</button>
+        </div>
+    </ng-template>
 </igx-time-picker>
     `
 })
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
index 94239fdaf62..ed0b9e504c7 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
@@ -349,14 +349,8 @@ export class IgxTimePickerTemplateDirective {
  * This directive can be used to add custom action buttons to the dropdownb/dialog.
  */
 @Directive({
-    selector: 'igx-time-picker-actions,[igxTimePickerActions]'
+    selector: '[igxTimePickerActions]'
 })
 export class IgxTimePickerActionsDirective {
-    @HostBinding('class')
-    get defaultClass(): string {
-        return this.cssClasses ? this.cssClasses : 'igx-time-picker__buttons';
-    };
-
-    @Input()
-    public cssClasses = '';
+    constructor(public template: TemplateRef<any>) { }
 }
diff --git a/src/app/date-picker/date-picker.sample.html b/src/app/date-picker/date-picker.sample.html
index 80c50355bc2..a71484ea949 100644
--- a/src/app/date-picker/date-picker.sample.html
+++ b/src/app/date-picker/date-picker.sample.html
@@ -55,8 +55,10 @@ <h4 class="sample-title">DropDown Date Picker</h4>
                             </igx-suffix>
                         </igx-input-group>
                     </ng-template>
-                    <ng-template igxDatePickerActions [cssClasses]="actionBtnCss">
-                        <button igxButton="flat" (click)="selectToday(retemplated)">Today</button>
+                    <ng-template igxDatePickerActions>
+                        <div class="action-buttons">
+                            <button igxButton="flat" (click)="selectToday(retemplated)">Today</button>
+                        </div>
                     </ng-template>
                 </igx-date-picker>
                 <label>Date: {{ retemplated.value | date:'longDate'}}</label>
@@ -77,11 +79,17 @@ <h4 class="sample-title">DropDown Date Picker</h4>
             <h4 class="sample-title">DropDown Date Picker bind with ngModel</h4>
             <p class="sample-description">isSpinLoop set to false</p>
             <div class="preview">
-                <igx-date-picker #editableDatePicker mode="dropdown" [weekStart]="1" [(ngModel)]="date1"
-                    [isSpinLoop]="false">
+                <igx-date-picker #editableDatePicker
+                                mode="dropdown"
+                                cancelButtonLabel="close"
+                                todayButtonLabel="today"
+                                [weekStart]="1"
+                                [(ngModel)]="date1"
+                                [isSpinLoop]="false">
                 </igx-date-picker>
-                <button igxButton igxRipple type="raised" (click)="deselect(editableDatePicker)">Deselect
-                    date</button>
+                <button igxButton igxRipple type="raised" (click)="deselect(editableDatePicker)">
+                    Deselect date
+                </button>
             </div>
         </article>
     </section>
diff --git a/src/app/date-picker/date-picker.sample.scss b/src/app/date-picker/date-picker.sample.scss
index 8a9066b234b..6420ac759bb 100644
--- a/src/app/date-picker/date-picker.sample.scss
+++ b/src/app/date-picker/date-picker.sample.scss
@@ -7,10 +7,8 @@
     width: 200px;
 }
 
-:host ::ng-deep {
-    .action-buttons {
-        display: flex;
-        flex-flow: column;
-        margin: 10px;
-    }
+.action-buttons {
+    display: flex;
+    flex-flow: column;
+    margin: 10px;
 }
diff --git a/src/app/date-picker/date-picker.sample.ts b/src/app/date-picker/date-picker.sample.ts
index 09ebf50927d..c6049c83dd0 100644
--- a/src/app/date-picker/date-picker.sample.ts
+++ b/src/app/date-picker/date-picker.sample.ts
@@ -14,7 +14,6 @@ import { DatePipe, formatDate } from '@angular/common';
 
 export class DatePickerSampleComponent {
     date = new Date('10/3/2018');
-    actionBtnCss = "action-buttons";
 
     public formatOptions = {
         day: 'numeric',
diff --git a/src/app/time-picker/time-picker.sample.html b/src/app/time-picker/time-picker.sample.html
index 78522e310aa..2d0064f3141 100644
--- a/src/app/time-picker/time-picker.sample.html
+++ b/src/app/time-picker/time-picker.sample.html
@@ -76,7 +76,7 @@ <h4 class="sample-title">Templated Time Picker</h4>
             <h4 class="sample-title">Templated Time Picker</h4>
             <p class="sample-description">Time picker with dropdown mode</p>
             <div class="preview">
-                <igx-time-picker [value]="today" format="HH:mm" mode="dropdown">
+                <igx-time-picker [value]="today" [okButtonLabel]="''" [cancelButtonLabel]="''" format="HH:mm" mode="dropdown">
                     <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-value="value" let-displayTime="displayTime">
                         <igx-input-group>
                             <input #dropDownTarget igxInput [value]="displayTime" (blur)="onBlur(dropDownTarget.value, value)"/>
@@ -101,9 +101,11 @@ <h4 class="sample-title">Templated Time Picker</h4>
                             </igx-suffix>
                         </igx-input-group>
                     </ng-template>
-                    <igx-time-picker-actions [cssClasses]="actionBtnCss">
-                        <button igxButton="flat" (click)="selectToday(picker)">Today</button>
-                    </igx-time-picker-actions>
+                    <ng-template igxTimePickerActions>
+                        <div class="action-buttons">
+                            <button igxButton="flat" (click)="selectToday(picker)">Today</button>
+                        </div>
+                    </ng-template>
                 </igx-time-picker>
             </div>
         </article>
diff --git a/src/app/time-picker/time-picker.sample.ts b/src/app/time-picker/time-picker.sample.ts
index 67c593a4712..f190cfde266 100644
--- a/src/app/time-picker/time-picker.sample.ts
+++ b/src/app/time-picker/time-picker.sample.ts
@@ -10,8 +10,6 @@ export class TimePickerSampleComponent implements AfterViewInit {
     max = '19:00';
     min = '09:00';
 
-    actionBtnCss = 'action-buttons';
-
     itemsDelta = { hours: 1, minutes: 5 };
     format = 'hh:mm tt';
     isSpinLoop = true;

From 82e864018b097f2ceaa2696d48d8dd7e4cd41390 Mon Sep 17 00:00:00 2001
From: Stefana Andreeva <sandreeva@infragistics.com>
Date: Mon, 3 Jun 2019 17:43:38 +0300
Subject: [PATCH 06/10] chore(*): update README.md and CHANGELOG.md #4647

---
 CHANGELOG.md                                    | 15 +++++++++++++++
 .../src/lib/date-picker/README.md               | 15 +++++++++++++++
 .../src/lib/time-picker/README.md               | 17 +++++++++++++++++
 3 files changed, 47 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dae6e5d7f82..3175b20e24f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,21 @@ All notable changes for each version of this project will be documented in this
 @include igx-core($print-layout: false); 
 ```
 
+- `igxTimePicker` changes
+    - `onOpen` event is renamed to `onOpened`.
+    - `onClose` event is renamed to `onClosed`.
+    - `onClosing` event is added.
+    - **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
+    - `onOpen` event is renamed to `onOpened`.
+    - `onClose` event is renamed to `onClosed`.
+    - `onClosing` event is added.
+    - **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.1
 - `IgxGrid` Custom keyboard navigation
     - `onFocusChange` event is deprecated.
diff --git a/projects/igniteui-angular/src/lib/date-picker/README.md b/projects/igniteui-angular/src/lib/date-picker/README.md
index 5d53a7a3389..11e22fce03f 100644
--- a/projects/igniteui-angular/src/lib/date-picker/README.md
+++ b/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
 
diff --git a/projects/igniteui-angular/src/lib/time-picker/README.md b/projects/igniteui-angular/src/lib/time-picker/README.md
index 315688d1033..a9fc1451ba7 100644
--- a/projects/igniteui-angular/src/lib/time-picker/README.md
+++ b/projects/igniteui-angular/src/lib/time-picker/README.md
@@ -107,6 +107,23 @@ or
     }
 ```
 
+The TimePicker action buttons could be retemplated.
+```html
+<igx-time-picker #picker>
+    <ng-template igxTimePickerActions>
+        <div class="action-buttons">
+            <button igxButton="flat" (click)="selectToday(picker)">Today</button>
+        </div>
+    </ng-template>
+</igx-time-picker>
+```
+```typescript
+    public selectToday(picker: IgxTimePickerComponent) {
+        picker.value = new Date(Date.now());
+        picker.hideOverlay();
+    }
+```
+
 # API
 
 ###### Inputs

From 4bb4d8e9fa5b469c544188a4081fba37feaca978 Mon Sep 17 00:00:00 2001
From: Stefana Andreeva <sandreeva@infragistics.com>
Date: Thu, 6 Jun 2019 14:04:28 +0300
Subject: [PATCH 07/10] chore(*): address some review comments #4647

# Conflicts:
#	CHANGELOG.md
---
 CHANGELOG.md                                  | 26 ++++++++++++-------
 .../migrations/migration-collection.json      |  6 ++---
 .../changes/outputs.json                      |  0
 .../index.spec.ts                             |  2 +-
 .../{update-7_3_3 => update-7_3_4}/index.ts   |  2 +-
 .../lib/date-picker/date-picker.component.ts  |  6 ++---
 .../lib/time-picker/time-picker.component.ts  |  4 +--
 7 files changed, 26 insertions(+), 20 deletions(-)
 rename projects/igniteui-angular/migrations/{update-7_3_3 => update-7_3_4}/changes/outputs.json (100%)
 rename projects/igniteui-angular/migrations/{update-7_3_3 => update-7_3_4}/index.spec.ts (98%)
 rename projects/igniteui-angular/migrations/{update-7_3_3 => update-7_3_4}/index.ts (96%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3175b20e24f..143b62534f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,28 +1,34 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
-## 7.3.1
-`igx-core()` now includes some styles for printing layout. In order to turn them off, you need to pass an argument and set it to `false`
-
-``` 
-@include igx-core($print-layout: false); 
-```
+## 7.3.4
 
 - `igxTimePicker` changes
-    - `onOpen` event is renamed to `onOpened`.
-    - `onClose` event is renamed to `onClosed`.
     - `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
-    - `onOpen` event is renamed to `onOpened`.
-    - `onClose` event is renamed to `onClosed`.
     - `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.
+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.
diff --git a/projects/igniteui-angular/migrations/migration-collection.json b/projects/igniteui-angular/migrations/migration-collection.json
index 37941992cd4..3f8599e3284 100644
--- a/projects/igniteui-angular/migrations/migration-collection.json
+++ b/projects/igniteui-angular/migrations/migration-collection.json
@@ -42,9 +42,9 @@
             "factory": "./update-7_2_0"
         },
         "migration-09": {
-            "version": "7.3.3",
-            "description": "Updates Ignite UI for Angular from v7.2.0 to v7.3.3",
-            "factory": "./update-7_3_3"
+            "version": "7.3.4",
+            "description": "Updates Ignite UI for Angular from v7.2.0 to v7.3.4",
+            "factory": "./update-7_3_4"
         }
     }
 }
diff --git a/projects/igniteui-angular/migrations/update-7_3_3/changes/outputs.json b/projects/igniteui-angular/migrations/update-7_3_4/changes/outputs.json
similarity index 100%
rename from projects/igniteui-angular/migrations/update-7_3_3/changes/outputs.json
rename to projects/igniteui-angular/migrations/update-7_3_4/changes/outputs.json
diff --git a/projects/igniteui-angular/migrations/update-7_3_3/index.spec.ts b/projects/igniteui-angular/migrations/update-7_3_4/index.spec.ts
similarity index 98%
rename from projects/igniteui-angular/migrations/update-7_3_3/index.spec.ts
rename to projects/igniteui-angular/migrations/update-7_3_4/index.spec.ts
index f4886a3f80b..d54f995e82f 100644
--- a/projects/igniteui-angular/migrations/update-7_3_3/index.spec.ts
+++ b/projects/igniteui-angular/migrations/update-7_3_4/index.spec.ts
@@ -6,7 +6,7 @@ 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.3', () => {
+describe('Update 7.3.4', () => {
     let appTree: UnitTestTree;
     const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
     const configJson = {
diff --git a/projects/igniteui-angular/migrations/update-7_3_3/index.ts b/projects/igniteui-angular/migrations/update-7_3_4/index.ts
similarity index 96%
rename from projects/igniteui-angular/migrations/update-7_3_3/index.ts
rename to projects/igniteui-angular/migrations/update-7_3_4/index.ts
index cb4c9acb155..6cd57d63120 100644
--- a/projects/igniteui-angular/migrations/update-7_3_3/index.ts
+++ b/projects/igniteui-angular/migrations/update-7_3_4/index.ts
@@ -13,7 +13,7 @@ import { filterSourceDirs } from '../common/filterSourceDirs';
 import { getImportModulePositions } from '../common/tsUtils';
 import { UpdateChanges } from '../common/UpdateChanges';
 
-const version = '7.3.3';
+const version = '7.3.4';
 
 export default function(): Rule {
     return (host: Tree, context: SchematicContext) => {
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index 6d15a286e7f..c77c92edbd0 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -550,7 +550,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      *<igx-date-picker (onOpen)="open($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
      *```
      */
-    @DeprecateProperty(`'onOpen' @Ouput property is deprecated\nUse 'onOpened' instead.`)
+    @DeprecateProperty(`'onOpen' @Output property is deprecated. Use 'onOpened' instead.`)
     @Output()
     public onOpen = new EventEmitter<IgxDatePickerComponent>();
 
@@ -571,12 +571,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      *<igx-date-picker (onClose)="close($event)" cancelButtonLabel="cancel" todayButtonLabel="today"></igx-date-picker>
      *```
      */
-    @DeprecateProperty(`'onClose' @Ouput property is deprecated\nUse 'onClosed' instead.`)
+    @DeprecateProperty(`'onClose' @Output property is deprecated. Use 'onClosed' instead.`)
     @Output()
     public onClose = new EventEmitter<IgxDatePickerComponent>();
 
     /**
-     *An event that is emitted when the `IgxDatePickerComponent` is closed.
+     *An event that is emitted after the `IgxDatePickerComponent` is closed.
     */
     @Output()
     public onClosed = new EventEmitter<IgxDatePickerComponent>();
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
index 81813a752b6..ec454b7aa7d 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
@@ -416,7 +416,7 @@ export class IgxTimePickerComponent implements
      *<igx-toast #toast message="The time picker has been opened!"></igx-toast>
      * ```
      */
-    @DeprecateProperty(`'onOpen' @Ouput property is deprecated\nUse 'onOpened' instead.`)
+    @DeprecateProperty(`'onOpen' @Output property is deprecated. Use 'onOpened' instead.`)
     @Output()
     public onOpen = new EventEmitter<IgxTimePickerComponent>();
 
@@ -429,7 +429,7 @@ export class IgxTimePickerComponent implements
     /**
      * Emitted when a timePicker is being closed.
      */
-    @DeprecateProperty(`'onClose' @Ouput property is deprecated\nUse 'onClosed' instead.`)
+    @DeprecateProperty(`'onClose' @Output property is deprecated. Use 'onClosed' instead.`)
     @Output()
     public onClose = new EventEmitter<IgxTimePickerComponent>();
 

From ab064a41339da884cf190dfc7cd845f95dcbc3c3 Mon Sep 17 00:00:00 2001
From: Stefana Andreeva <sandreeva@infragistics.com>
Date: Thu, 6 Jun 2019 18:27:31 +0300
Subject: [PATCH 08/10] chore(*): more code improvements #4647

---
 .../src/lib/date-picker/date-picker.component.ts     |  3 ++-
 .../src/lib/date-picker/date-picker.directives.ts    |  2 +-
 .../src/lib/time-picker/time-picker.common.ts        |  2 +-
 .../src/lib/time-picker/time-picker.component.ts     | 12 +++++++-----
 .../src/lib/time-picker/time-picker.directives.ts    |  2 +-
 src/app/time-picker/time-picker.sample.ts            |  2 +-
 6 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index c77c92edbd0..02ed7d76588 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -54,7 +54,6 @@ import { KEYS, CancelableBrowserEventArgs } from '../core/utils';
 import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from './date-picker.directives';
 import { IgxCalendarContainerComponent } from './calendar-container.component';
 import { InteractionMode } from '../core/enums';
-import { getViewportRect } from '../services/overlay/utilities';
 import { fadeIn, fadeOut } from '../animations/fade';
 import { DeprecateProperty } from '../core/deprecateDecorators';
 
@@ -540,6 +539,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     public outlet: IgxOverlayOutletDirective | ElementRef;
 
     /**
+     * @deprecated Use 'onOpened' instead.
      *An event that is emitted when the `IgxDatePickerComponent` calendar is opened.
      *```typescript
      *public open(event){
@@ -561,6 +561,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     public onOpened = new EventEmitter<IgxDatePickerComponent>();
 
     /**
+     * @deprecated Use 'onClosed' instead.
      *"An event that is emitted when the `IgxDatePickerComponent` is closed.
      *```typescript
      *public close(event){
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
index 5bffec0e4f0..dcc9e536f55 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.directives.ts
@@ -1,4 +1,4 @@
-import { Directive, TemplateRef, Input } from '@angular/core';
+import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
     selector: '[igxDatePickerTemplate]'
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts
index 27c1754834e..8bf45c7e5b8 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts
@@ -28,7 +28,7 @@ export interface IgxTimePickerBase {
     scrollHourIntoView(item: string): void;
     scrollMinuteIntoView(item: string): void;
     scrollAmPmIntoView(item: string): void;
-    hideOverlay(): void;
+    close(): void;
     parseMask(preserveAmPm?: boolean): string;
 }
 
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
index ec454b7aa7d..eff3ac04a97 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
@@ -402,6 +402,7 @@ export class IgxTimePickerComponent implements
     public onValidationFailed = new EventEmitter<IgxTimePickerValidationFailedEventArgs>();
 
     /**
+     * @deprecated Use 'onOpened' instead.
      * Emitted when a timePicker is being opened.
      * ```html
      *@ViewChild("toast")
@@ -427,6 +428,7 @@ export class IgxTimePickerComponent implements
     public onOpened = new EventEmitter<IgxTimePickerComponent>();
 
     /**
+     * @deprecated Use 'onClosed' instead.
      * Emitted when a timePicker is being closed.
      */
     @DeprecateProperty(`'onClose' @Output property is deprecated. Use 'onClosed' instead.`)
@@ -1428,7 +1430,7 @@ export class IgxTimePickerComponent implements
     public okButtonClick(): boolean {
         const time = this._getSelectedTime();
         if (this._isValueValid(time)) {
-            this.hideOverlay();
+            this.close();
             this.value = time;
             return true;
         } else {
@@ -1455,7 +1457,7 @@ export class IgxTimePickerComponent implements
             this.displayValue = this._formatTime(this.value, this.format);
         }
 
-        this.hideOverlay();
+        this.close();
 
         this.selectedHour = this._prevSelectedHour;
         this.selectedMinute = this._prevSelectedMinute;
@@ -1511,10 +1513,10 @@ export class IgxTimePickerComponent implements
      * ```
      * ```typescript
      * @ViewChild('timePicker', { read: IgxTimePickerComponent }) picker: IgxTimePickerComponent;
-     * picker.hideOverlay();
+     * picker.close();
      * ```
      */
-    public hideOverlay(): void {
+    public close(): void {
         this.toggleRef.close();
     }
 
@@ -1549,7 +1551,7 @@ export class IgxTimePickerComponent implements
                 this.onValueChanged.emit(args);
             }
         } else {
-            this.hideOverlay();
+            this.close();
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
index ed0b9e504c7..22a3428b4d4 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.directives.ts
@@ -157,7 +157,7 @@ export class IgxItemListDirective {
         event.preventDefault();
 
         if (this.timePicker.mode === InteractionMode.DropDown) {
-            this.timePicker.hideOverlay();
+            this.timePicker.close();
             return;
         }
         this.timePicker.okButtonClick();
diff --git a/src/app/time-picker/time-picker.sample.ts b/src/app/time-picker/time-picker.sample.ts
index f190cfde266..0581efd9af5 100644
--- a/src/app/time-picker/time-picker.sample.ts
+++ b/src/app/time-picker/time-picker.sample.ts
@@ -64,6 +64,6 @@ export class TimePickerSampleComponent implements AfterViewInit {
 
     public selectToday(picker: IgxTimePickerComponent) {
         picker.value = new Date(Date.now());
-        picker.hideOverlay();
+        picker.close();
     }
 }

From 5c6e7cd63af49d53c9cc00d22fe2c7ffc4f44571 Mon Sep 17 00:00:00 2001
From: Svetla Boykova <sboykova@infragistics.com>
Date: Fri, 7 Jun 2019 10:00:10 +0300
Subject: [PATCH 09/10] fix(time-picker): Fixed failing test #4942

---
 .../src/lib/time-picker/time-picker.component.spec.ts         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
index 67770c482f1..618450b3bd5 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
@@ -1696,7 +1696,7 @@ export class IgxTimePickerDropDownNoValueComponent {
 
 
 @Component({
-template: `
+    template: `
 <igx-time-picker #picker [mode]="'dropdown'">
     <ng-template igxTimePickerTemplate let-openDialog="openDialog" let-displayTime="displayTime">
         <igx-input-group #dropDownTarget>
@@ -1718,7 +1718,7 @@ template: `
 export class IgxTimePickerRetemplatedDropDownComponent {
     public select(picker: IgxTimePickerComponent) {
         picker.value = new Date(2018, 10, 27, 10, 45, 0, 0);
-        picker.hideOverlay();
+        picker.close();
     }
 }
 

From a01ac1a8c42f0eaa1219239f0e658f0aea4036bc Mon Sep 17 00:00:00 2001
From: Stefana Andreeva <sandreeva@infragistics.com>
Date: Fri, 7 Jun 2019 15:33:31 +0300
Subject: [PATCH 10/10] chore(*): update code snippet in README.md #4647

---
 projects/igniteui-angular/src/lib/time-picker/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/time-picker/README.md b/projects/igniteui-angular/src/lib/time-picker/README.md
index a9fc1451ba7..d45a379f051 100644
--- a/projects/igniteui-angular/src/lib/time-picker/README.md
+++ b/projects/igniteui-angular/src/lib/time-picker/README.md
@@ -120,7 +120,7 @@ The TimePicker action buttons could be retemplated.
 ```typescript
     public selectToday(picker: IgxTimePickerComponent) {
         picker.value = new Date(Date.now());
-        picker.hideOverlay();
+        picker.close();
     }
 ```