Merge branch 'mkirova/row-pinning-base' of https://github.com/IgniteUI/igniteui-angular.git

Author: MKirova

CHANGELOG.md

@@ -122,6 +122,7 @@ All notable changes for each version of this project will be documented in this
     </igx-grid>
     ```
 - `IgxSlider`:
+    - **Breaking Change** - `isContinuous` - input has been deleted. The option is not supported anymore.
     - `primaryTicks` input was added. Which sets the number of primary ticks
     - `secondaryTicks` input was added. Which sets the number of secondary ticks.
     - `showTicks` input was added. Which show/hide all slider ticks and tick labels.
@@ -130,7 +131,6 @@ All notable changes for each version of this project will be documented in this
     - `ticksOrientation` input was added. Allows to change ticks orientation to top|bottom|mirror.
     - `tickLabelsOrientation` input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
     - `igxSliderTickLabel` directive has been introduced. Allows you to set a custom template for all tick labels.
-    - `isContinuous` - input has been deleted. The option is not supported anymore.
     - `onValueChanged` - new output has been exposed. This event is emitted at the end of every slide interaction.
 
 - `IgxCarousel`:

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);
             }
         }
     }

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts

@@ -682,6 +682,13 @@ describe('IgxAutocomplete', () => {
             expect(dropDownAny.scrollContainer.getBoundingClientRect().width)
                 .toEqual(group.element.nativeElement.getBoundingClientRect().width);
         });
+        it('Should apply width to dropdown list if set', () => {
+            UIInteractions.sendInput(input, 's', fixture);
+            fixture.componentInstance.ddWidth = '600px';
+            fixture.detectChanges();
+            const dropDownAny = dropDown as any;
+            expect(dropDownAny.scrollContainer.getBoundingClientRect().width).toEqual(600);
+        });
         it('Should render aria attributes properly', fakeAsync(() => {
             expect(input.nativeElement.attributes['autocomplete'].value).toEqual('off');
             expect(input.nativeElement.attributes['role'].value).toEqual('combobox');
@@ -853,7 +860,7 @@ describe('IgxAutocomplete', () => {
         <label igxLabel for="towns">Towns</label>
         <igx-suffix igxRipple><igx-icon fontSet="material">clear</igx-icon> </igx-suffix>
     </igx-input-group>
-    <igx-drop-down #townsPanel>
+    <igx-drop-down #townsPanel [width]="ddWidth">
         <igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town">
             {{town}}
         </igx-drop-down-item>
@@ -866,6 +873,7 @@ class AutocompleteComponent {
     @ViewChild(IgxDropDownComponent, { static: true }) public dropDown: IgxDropDownComponent;
     townSelected;
     public towns;
+    public ddWidth = null;
     settings: AutocompleteOverlaySettings = null;
     onItemSelected(args) { }
 

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -277,7 +277,8 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         if (this.disabled || !this.collapsed) {
             return;
         }
-        this.target.width = this.parentElement.clientWidth + 'px';
+        // if no drop-down width is set, the drop-down will be as wide as the autocomplete input;
+        this.target.width = this.target.width || (this.parentElement.clientWidth + 'px');
         this.target.open(this.settings);
         this.target.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select);
         this.target.onOpened.pipe(first()).subscribe(this.highlightFirstItem);