Merge branch 'master' into bpenkov/time-picker-onvaluechanged

Author: jackofdiamond5

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

@@ -324,7 +324,7 @@ export const NAVIGATION_KEYS = new Set([
 ]);
 export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
 export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
-export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
+export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup', '+']);
 export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l']);
 
 /**

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -4378,7 +4378,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public refreshGridState(args?) {
         this.endEdit(true);
         this.selectionService.clearHeaderCBState();
-        this.summaryService.clearSummaryCache(args);
+        this.summaryService.clearSummaryCache();
     }
 
     // TODO: We have return values here. Move them to event args ??

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -50,6 +50,7 @@ export class IgxGridNavigationService {
         if (!this.activeNode || !(SUPPORTED_KEYS.has(key) || (key === 'tab' && this.grid.crudService.cell))) { return; }
         const shift = event.shiftKey;
         const ctrl = event.ctrlKey;
+        const alt = event.altKey;
         if (NAVIGATION_KEYS.has(key) && this.pendingNavigation) { event.preventDefault(); return; }
 
         const type = this.isDataRow(this.activeNode.row) ? 'dataCell' :
@@ -262,9 +263,20 @@ export class IgxGridNavigationService {
     protected handleAlt(key: string, event: KeyboardEvent) {
         event.preventDefault();
         const row = this.grid.getRowByIndex(this.activeNode.row) as any;
-        if (!this.isToggleKey(key) || !row) { return; }
 
-        if (!row.expanded && ROW_EXPAND_KEYS.has(key)) {
+        if (!(this.isToggleKey(key) || this.isAddKey(key)) || !row) { return; }
+        if (this.isAddKey(key)) {
+            if (!this.grid.rowEditable) {
+                console.warn('The grid must be in row edit mode to perform row adding!');
+                return;
+            }
+
+            if (event.shiftKey && row.treeRow !== undefined) {
+                row.beginAddChild();
+            } else if (!event.shiftKey) {
+                row.beginAddRow();
+            }
+        } else if (!row.expanded && ROW_EXPAND_KEYS.has(key)) {
             row.rowID === undefined ? row.toggle() :
                 this.grid.gridAPI.set_row_expansion_state(row.rowID, true, event);
         } else if (row.expanded && ROW_COLLAPSE_KEYS.has(key)) {
@@ -607,4 +619,8 @@ export class IgxGridNavigationService {
     private isToggleKey(key: string): boolean {
         return ROW_COLLAPSE_KEYS.has(key) || ROW_EXPAND_KEYS.has(key);
     }
+
+    private isAddKey(key: string): boolean {
+        return key === '+';
+    }
 }

projects/igniteui-angular/src/lib/grids/grid.rowEdit.directive.ts

@@ -1,28 +1,27 @@
 import { Directive, ElementRef, HostListener } from '@angular/core';
 import { GridBaseAPIService } from './api.service';
-import { GridType } from './common/grid.interface';
 
-/** @hidden */
+/** @hidden @internal */
 @Directive({
     selector: '[igxRowEdit]'
 })
 export class IgxRowEditTemplateDirective { }
 
-/** @hidden */
+/** @hidden @internal */
 @Directive({
     selector: '[igxRowEditText]'
 })
 export class IgxRowEditTextDirective { }
 
-/** @hidden */
+/** @hidden @internal */
 @Directive({
     selector: '[igxRowEditActions]'
 })
 export class IgxRowEditActionsDirective { }
 
 
 // TODO: Refactor circular ref, deps and logic
-/** @hidden */
+/** @hidden @internal */
 @Directive({
     selector: `[igxRowEditTabStop]`
 })

projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts

@@ -3,7 +3,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { async, TestBed, fakeAsync } from '@angular/core/testing';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { DebugElement } from '@angular/core';
-import { GridFunctions } from '../../test-utils/grid-functions.spec';
+import { GridFunctions, GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
 import {
     IgxAddRowComponent
 } from '../../test-utils/grid-samples.spec';
@@ -14,6 +14,7 @@ import { IgxActionStripModule } from '../../action-strip/action-strip.module';
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 
 describe('IgxGrid - Row Adding #grid', () => {
+        const SUMMARY_ROW = 'igx-grid-summary-row';
         let fixture;
         let grid: IgxGridComponent;
         let gridContent: DebugElement;
@@ -98,7 +99,28 @@ describe('IgxGrid - Row Adding #grid', () => {
             // No much space between the row and the banner
             expect(addRowTop - bannerBottom).toBeLessThan(2);
         });
+        it('Should be able to enter add row mode on Alt + plus key.', () => {
+            GridFunctions.focusFirstCell(fixture);
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('+', gridContent, true, false, false);
+            fixture.detectChanges();
 
+            const addRow = grid.getRowByIndex(1);
+            expect(addRow.addRow).toBeTrue();
+
+        });
+        it('Should not be able to enter add row mode on Alt + Shift + plus key.', () => {
+            GridFunctions.focusFirstCell(fixture);
+            fixture.detectChanges();
+
+            UIInteractions.triggerEventHandlerKeyDown('+', gridContent, true, true, false);
+            fixture.detectChanges();
+
+            const banner = GridFunctions.getRowEditingOverlay(fixture);
+            expect(banner).toBeNull();
+            expect(grid.getRowByIndex(1).addRow).toBeFalse();
+        });
         it('Should not be able to enter add row mode when rowEditing is disabled', () => {
             grid.rowEditable = false;
             fixture.detectChanges();
@@ -175,5 +197,21 @@ describe('IgxGrid - Row Adding #grid', () => {
              expect(rowOffsets.top >= gridOffsets.top && rowOffsets.bottom <= gridOffsets.bottom).toBeTruthy();
         });
 
+        it('should update summaries after row is added via the UI.', () => {
+            grid.getColumnByName('ID').hasSummary = true;
+            fixture.detectChanges();
+            let summaryRow = fixture.debugElement.query(By.css(SUMMARY_ROW));
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, ['Count'], ['27']);
+
+            grid.rowList.first.beginAddRow();
+            fixture.detectChanges();
+
+            grid.endEdit(true);
+            fixture.detectChanges();
+
+            summaryRow = fixture.debugElement.query(By.css(SUMMARY_ROW));
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, ['Count'], ['28']);
+        });
+
     });
 });

projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

@@ -3,7 +3,7 @@
 </ng-template>
 
 <ng-template #dropdownInputTemplate>
-    <igx-input-group #group (mousedown)="mouseDown($event)">
+    <igx-input-group #group (mousedown)="mouseDown($event)" [suppressInputAutofocus]="true">
         <label igxLabel *ngIf="!labelDirective">Time</label>
         <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
         <igx-prefix (click)="openDialog(group.element.nativeElement)">

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

@@ -1882,7 +1882,6 @@ describe('IgxTimePicker', () => {
             fixture.componentInstance.format = 'hh tt';
             fixture.componentInstance.customDate = new Date(2018, 10, 27, 17, 45, 0, 0);
             fixture.detectChanges();
-
             const clearTime = dom.queryAll(By.css('.igx-icon'))[1];
 
             UIInteractions.simulateClickAndSelectEvent(clearTime);
@@ -1902,6 +1901,21 @@ describe('IgxTimePicker', () => {
             expect(input.nativeElement.value).toBe('-- AM');
         }));
 
+        it('should allow editing of input after clear', fakeAsync(() => {
+            fixture.componentInstance.format = 'hh tt';
+            fixture.componentInstance.customDate = new Date(2018, 10, 27, 17, 45, 0, 0);
+            fixture.detectChanges();
+            spyOn(fixture.componentInstance.timePicker, 'onInput');
+
+            const clearTime = dom.queryAll(By.css('.igx-icon'))[1];
+            UIInteractions.simulateClickAndSelectEvent(clearTime);
+            fixture.detectChanges();
+            const _input = fixture.debugElement.query(By.css('input'));
+            UIInteractions.simulateTyping('12 AM', _input);
+            expect(fixture.componentInstance.timePicker.onInput).not.toThrow();
+            expect(_input.nativeElement.value).toEqual('12 AM');
+        }));
+
         it('Should navigate dropdown lists correctly when format contains only hours.', fakeAsync(() => {
             fixture.componentInstance.format = 'hh tt';
             fixture.componentInstance.customDate = new Date(2018, 10, 27, 17, 45, 0);

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -50,7 +50,7 @@ import { ITimePickerResourceStrings } from '../core/i18n/time-picker-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 import { KEYS, CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { InteractionMode } from '../core/enums';
-import { IgxTextSelectionModule} from '../directives/text-selection/text-selection.directive';
+import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
 import { IgxLabelDirective } from '../directives/label/label.directive';
 
 
@@ -1951,9 +1951,12 @@ export class IgxTimePickerComponent implements
             this.isNotEmpty = false;
 
             const oldVal = new Date(this.value);
-
-            this.displayValue = '';
-            this.value.setHours(0, 0);
+            this.displayValue = this.parseMask(false);
+            requestAnimationFrame(() => {
+                this._setCursorPosition(0);
+            });
+            // TODO: refactoring - this.value should be null #6585
+            this.value?.setHours(0, 0, 0);
 
             if (oldVal.getTime() !== this.value.getTime() || this.isReset()) {
                 const args: IgxTimePickerValueChangedEventArgs = {
@@ -1971,35 +1974,35 @@ export class IgxTimePickerComponent implements
      * @hidden
      */
     public onInput(event): void {
-        const val = event.target.value;
+        const inputMask: string = event.target.value;
         const oldVal = new Date(this.value);
 
-        this.isNotEmpty = val !== this.parseMask(false);
+        this.isNotEmpty = inputMask !== this.parseMask(false);
 
         // handle cases where all empty positions (promts) are filled and we want to update
         // timepicker own value property if it is a valid Date
-        if (val.indexOf(this.promptChar) === -1) {
-            if (this._isEntryValid(val)) {
-                const newVal = this.convertMinMaxValue(val);
+        if (inputMask.indexOf(this.promptChar) === -1) {
+            if (this._isEntryValid(inputMask)) {
+                const newVal = this.convertMinMaxValue(inputMask);
                 if (oldVal.getTime() !== newVal.getTime()) {
                     this.value = newVal;
                 }
             } else {
                 const args: IgxTimePickerValidationFailedEventArgs = {
                     timePicker: this,
-                    currentValue: val,
+                    currentValue: new Date(inputMask),
                     setThroughUI: false
                 };
                 this.onValidationFailed.emit(args);
             }
             // handle cases where the user deletes the display value (when pressing backspace or delete)
-        } else if (!this.value || !val || val === this.parseMask(false)) {
+        } else if (!this.value || inputMask.length === 0 || !this.isNotEmpty) {
             this.isNotEmpty = false;
-
-            this.value.setHours(0, 0);
-            this.displayValue = val;
-
-            if (oldVal.getTime() !== this.value.getTime() || this.isReset()) {
+            // TODO: refactoring - this.value should be null #6585
+            this.value?.setHours(0, 0, 0);
+            this.displayValue = inputMask;
+            if (oldVal.getTime() !== this.value?.getTime() || this.isReset()) {
+                // TODO: Do not emit event when the editor is empty #6482
                 const args: IgxTimePickerValueChangedEventArgs = {
                     oldValue: oldVal,
                     newValue: this.value
@@ -2026,7 +2029,7 @@ export class IgxTimePickerComponent implements
             this.isNotEmpty = value !== '';
             this.displayValue = value;
 
-            if (value && value !== this.parseMask()) {
+            if (value && (value !== this.parseMask() || value !== this.parseMask(false))) {
                 if (this._isEntryValid(value)) {
                     const newVal = this.convertMinMaxValue(value);
                     if (!this.value || this.value.getTime() !== newVal.getTime()) {
@@ -2155,9 +2158,9 @@ export class IgxTimePickerComponent implements
     // Workaround method for #8135
     // TODO: It must be removed in #6482
     private isReset(): boolean {
-        return this.value.getHours() === 0
-            && this.value.getMinutes() === 0
-            && this.value.getSeconds() === 0;
+        return this.value?.getHours() === 0
+            && this.value?.getMinutes() === 0
+            && this.value?.getSeconds() === 0;
     }
 }
 

src/app/grid-add-row/grid-add-row.sample.html

@@ -19,6 +19,7 @@
             [pinned]="c.pinned"
             [hidden]="c.hidden"
             [groupable]='true'
+            [hasSummary]="true"
         >
         </igx-column>
 

src/app/grid-add-row/grid-add-row.sample.ts

@@ -13,7 +13,6 @@ export class GridAddRowSampleComponent implements OnInit {
 
     data: any[];
     columns: any[];
-
     onMouseOver(event, grid, actionStrip) {
         if (event.target.nodeName.toLowerCase() === 'igx-grid-cell') {
             const rowIndex = parseInt(event.target.attributes['data-rowindex'].value, 10);