refactor(igxMask): cleanup/streamline parsing and input handling

- input parsing go through one method
- add drag and drop functionality
- set default value on mask prop

Author: jackofdiamond5

projects/igniteui-angular/src/lib/core/utils.ts

@@ -139,7 +139,14 @@ export const enum KEYCODES {
     RIGHT_ARROW = 39,
     DOWN_ARROW = 40,
     F2 = 113,
-    TAB = 9
+    TAB = 9,
+    CTRL = 17,
+    Z = 90,
+    Y = 89,
+    X = 88,
+    BACKSPACE = 8,
+    DELETE = 46,
+    INPUT_METHOD = 229
 }
 
 /**

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

@@ -1,6 +1,6 @@
 import { Component, ViewChild, ElementRef } from '@angular/core';
 import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
-import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule} from '@angular/forms';
+import { FormsModule, FormGroup, FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxDatePickerComponent, IgxDatePickerModule } from './date-picker.component';
@@ -206,7 +206,7 @@ describe('IgxDatePicker', () => {
                 expect(input).toEqual(document.activeElement);
             }));
 
-            it('When a modal datepicker is closed via outside click, the focus should remain on the input',
+        it('When a modal datepicker is closed via outside click, the focus should remain on the input',
             fakeAsync(() => {
                 const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
                 let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper--modal');
@@ -230,7 +230,7 @@ describe('IgxDatePicker', () => {
                 expect(input).toEqual(document.activeElement);
             }));
 
-            it('When datepicker is closed upon selecting a date, the focus should remain on the input',
+        it('When datepicker is closed upon selecting a date, the focus should remain on the input',
             fakeAsync(() => {
                 const datePickerDom = fixture.debugElement.query(By.css('igx-date-picker'));
                 let overlayToggle = document.getElementsByClassName('igx-overlay__wrapper--modal');
@@ -939,7 +939,6 @@ describe('IgxDatePicker', () => {
 
             // initial input value is 20-10-11 / dd-MM-yy
             // focus the day part, position the caret at the beginning
-            input.nativeElement.focus();
             input.nativeElement.setSelectionRange(0, 0);
 
             // press arrow up
@@ -984,7 +983,6 @@ describe('IgxDatePicker', () => {
 
             // initial input value is 20-10-11 / dd-MM-yy
             // focus the day part, position the caret at the beginning
-            input.nativeElement.focus();
             input.nativeElement.setSelectionRange(0, 0);
 
             // press arrow down
@@ -1036,7 +1034,6 @@ describe('IgxDatePicker', () => {
 
             // initial input value is 20-10-11 / dd-MM-yy
             // focus the day part, position the caret at the beginning
-            input.nativeElement.focus();
             input.nativeElement.setSelectionRange(0, 0);
 
             // up
@@ -1149,7 +1146,8 @@ describe('IgxDatePicker', () => {
             expect(input).toBeDefined();
             datePicker.isSpinLoop = false;
 
-            input.nativeElement.focus();
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges(); // bound transformedDate assign
             UIInteractions.sendInput(input, '31-03-19');
             expect(input.nativeElement.value).toBe('31-03-19');
 

projects/igniteui-angular/src/lib/date-picker/date-picker.pipes.ts

@@ -31,13 +31,18 @@ export class DatePickerDisplayValuePipe implements PipeTransform {
 export class DatePickerInputValuePipe implements PipeTransform {
     constructor(@Inject(IGX_DATE_PICKER_COMPONENT) private _datePicker: IDatePicker) { }
     transform(value: any, args?: any): any {
+        /**
+         * TODO(D.P.): This plugs into the mask, but constantly received display strings it can't handle at all
+         * Those are almost immediately overridden by the pickers onFocus handling anyway; Refactor ASAP
+         */
         if (this._datePicker.invalidDate !== '') {
             return this._datePicker.invalidDate;
         } else {
             if (this._datePicker.value === null || this._datePicker.value === undefined) {
                 return DatePickerUtil.maskToPromptChars(this._datePicker.inputMask);
             } else {
-                return DatePickerUtil.addPromptCharsEditMode(this._datePicker.dateFormatParts, this._datePicker.value, value);
+                return (this._datePicker as any)._getEditorDate(this._datePicker.value);
+                // return DatePickerUtil.addPromptCharsEditMode(this._datePicker.dateFormatParts, this._datePicker.value, value);
             }
         }
     }