feat(overlay): show date pickers in place

Author: wnvko

projects/igniteui-angular/calendar/src/calendar/calendar-multi-view.component.spec.ts

@@ -1045,7 +1045,7 @@ describe('Multi-View Calendar - ', () => {
             tick(400);
             fixture.detectChanges();
 
-            let overlay = document.querySelector(HelperTestFunctions.OVERLAY_CSSCLASS);
+            let overlay = document.querySelector(HelperTestFunctions.CALENDAR_WRAPPER_CLASS);
             HelperTestFunctions.verifyMonthsViewNumber(overlay, 3);
             HelperTestFunctions.verifyCalendarSubHeaders(overlay, [ymd('2019-09-16'), ymd('2019-10-16'), ymd('2019-11-16')]);
 
@@ -1064,7 +1064,7 @@ describe('Multi-View Calendar - ', () => {
             tick(400);
             fixture.detectChanges();
 
-            overlay = document.querySelector(HelperTestFunctions.OVERLAY_CSSCLASS);
+            overlay = document.querySelector(HelperTestFunctions.CALENDAR_WRAPPER_CLASS);
             HelperTestFunctions.verifyMonthsViewNumber(overlay, 2);
             HelperTestFunctions.verifyCalendarSubHeaders(overlay, [ymd('2019-09-16'), ymd('2019-10-16')]);
 
@@ -1079,7 +1079,7 @@ describe('Multi-View Calendar - ', () => {
             fixture.detectChanges();
 
             expect(datePicker.hideOutsideDays).toBe(true);
-            let overlay = document.querySelector(HelperTestFunctions.OVERLAY_CSSCLASS);
+            let overlay = document.querySelector(HelperTestFunctions.CALENDAR_WRAPPER_CLASS);
             expect(HelperTestFunctions.getHiddenDays(overlay, 0).length).toBe(HelperTestFunctions.getInactiveDays(overlay, 0).length);
             expect(HelperTestFunctions.getHiddenDays(overlay, 1).length).toBe(HelperTestFunctions.getInactiveDays(overlay, 1).length);
             expect(HelperTestFunctions.getHiddenDays(overlay, 2).length).toBe(HelperTestFunctions.getInactiveDays(overlay, 2).length);
@@ -1098,7 +1098,7 @@ describe('Multi-View Calendar - ', () => {
             fixture.detectChanges();
 
             expect(datePicker.hideOutsideDays).toBe(false);
-            overlay = document.querySelector(HelperTestFunctions.OVERLAY_CSSCLASS);
+            overlay = document.querySelector(HelperTestFunctions.CALENDAR_WRAPPER_CLASS);
             expect(HelperTestFunctions.getHiddenDays(overlay, 0).length).toBe(12);
             expect(HelperTestFunctions.getHiddenDays(overlay, 1).length).toBe(11);
             expect(HelperTestFunctions.getHiddenDays(overlay, 2).length).toBe(5);

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

@@ -61,12 +61,6 @@ export class IgxCalendarContainerComponent {
     public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
     public pickerActions: IgxPickerActionsDirective;
 
-    @HostListener('keydown.alt.arrowup', ['$event'])
-    public onEscape(event) {
-        event.preventDefault();
-        this.calendarClose.emit();
-    }
-
     public get isReadonly() {
         return this.mode === PickerInteractionMode.Dialog;
     }

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

@@ -506,12 +506,14 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         positionStrategy: new AutoPositionStrategy({
             openAnimation: fadeIn,
             closeAnimation: fadeOut
-        })
+        }),
+        keepInPlace: true
     };
     private _dialogOverlaySettings: OverlaySettings = {
         closeOnOutsideClick: true,
         modal: true,
-        closeOnEscape: true
+        closeOnEscape: true,
+        keepInPlace: true
     };
     private _calendarFormat: IFormattingOptions = {
         day: 'numeric',

projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts

@@ -644,12 +644,14 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private _dialogOverlaySettings: OverlaySettings = {
         closeOnOutsideClick: true,
         modal: true,
-        closeOnEscape: true
+        closeOnEscape: true,
+        keepInPlace: true
     };
     private _dropDownOverlaySettings: OverlaySettings = {
         closeOnOutsideClick: true,
         modal: false,
-        closeOnEscape: true
+        closeOnEscape: true,
+        keepInPlace: true
     };
     private onChangeCallback: (dateRange: DateRange) => void = noop;
     private onTouchCallback: () => void = noop;
@@ -960,6 +962,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private handleClosing(e: IBaseCancelableBrowserEventArgs): void {
         const args = { owner: this, cancel: e?.cancel, event: e?.event };
         this.closing.emit(args);
+        console.log('closing', args);
         e.cancel = args.cancel;
         if (args.cancel) {
             return;