Merge branch 'master' into iganchev/add-hammerjs-to-test

Author: kdinev

CHANGELOG.md

@@ -17,6 +17,8 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxGrid`
     - `showGroupArea` input is added, which can be used to enable/disable the group area row.
+    - The event arguments of `onCellEdit`, `onCellEditEnter` and `onCellEditCancel` events will contain a reference to the row data, as well as a reference to the column.
+    - The event arguments of `onRowEdit`, `onRowEditEnter` and `onRowEditCancel` events will contain a reference to the row data.
 
 - `IgxSelect` support for `igxHint` directive added.
     - Allows the user to add `igxHint` to be displayed bellow the input element.

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

@@ -132,6 +132,22 @@ describe('IgxDatePicker', () => {
             expect(inputGroup.nativeElement.classList.contains('igx-input-group--disabled')).toBeTruthy();
         });
 
+        it('should not be able to toggle & clear when disabled', () => {
+            const date = new Date();
+            datePicker.value = date;
+            datePicker.disabled = true;
+            fixture.detectChanges();
+            expect(datePicker.collapsed).toBeTruthy();
+
+            datePicker.openDialog();
+            fixture.detectChanges();
+            expect(datePicker.collapsed).toBeTruthy();
+
+            datePicker.clear();
+            fixture.detectChanges();
+            expect(datePicker.value).toEqual(date);
+        });
+
         it('When labelVisability is set to false the label should not be visible', () => {
             let label = fixture.debugElement.query(By.directive(IgxLabelDirective));
 

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

@@ -34,7 +34,7 @@ import { IgxInputGroupModule, IgxInputDirective, IgxInputGroupComponent, IgxInpu
 import { Subject, fromEvent, animationFrameScheduler, interval, Subscription } from 'rxjs';
 import { filter, takeUntil, throttle } from 'rxjs/operators';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
-import { IgxTextSelectionModule} from '../directives/text-selection/text-selection.directive';
+import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
 import {
     OverlaySettings,
     IgxOverlayService,
@@ -144,7 +144,7 @@ const noop = () => { };
     `]
 })
 export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor,
-          EditorProvider, OnInit, AfterViewInit, OnDestroy, AfterViewChecked {
+    EditorProvider, OnInit, AfterViewInit, OnDestroy, AfterViewChecked {
     /**
      * Gets/Sets the `IgxDatePickerComponent` label.
      * @remarks
@@ -914,10 +914,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * @param date passed date that has to be set to the calendar.
      */
     public selectDate(date: Date): void {
-        const oldValue =  this.value;
+        const oldValue = this.value;
         this.value = date;
 
-        this.emitValueChangeEvent(oldValue, this.value );
+        this.emitValueChangeEvent(oldValue, this.value);
         this.onSelection.emit(date);
     }
 
@@ -929,9 +929,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * ```
      */
     public deselectDate(): void {
-        const oldValue =  this.value;
+        const oldValue = this.value;
         this.value = null;
-        this.emitValueChangeEvent(oldValue, this.value );
+        this.emitValueChangeEvent(oldValue, this.value);
         if (this.calendar) {
             this.calendar.deselectDate();
         }
@@ -946,7 +946,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * ```
      */
     public openDialog(): void {
-        if (!this.collapsed) {
+        if (!this.collapsed || this.disabled) {
             return;
         }
 
@@ -987,10 +987,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * @hidden @internal
      */
     public clear(): void {
-        this.isEmpty = true;
-        this.invalidDate = '';
-        this.deselectDate();
-        this._setCursorPosition(0);
+        if (!this.disabled) {
+            this.isEmpty = true;
+            this.invalidDate = '';
+            this.deselectDate();
+            this._setCursorPosition(0);
+        }
     }
 
     /**
@@ -1008,10 +1010,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
             date.setSeconds(this.value.getSeconds());
             date.setMilliseconds(this.value.getMilliseconds());
         }
-        const oldValue =  this.value;
+        const oldValue = this.value;
         this.value = date;
 
-        this.emitValueChangeEvent(oldValue, this.value );
+        this.emitValueChangeEvent(oldValue, this.value);
         this.calendar.viewDate = date;
         this.closeCalendar();
         this.onSelection.emit(date);
@@ -1141,11 +1143,11 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
                 if (this.disabledDates === null
                     || (this.disabledDates !== null && !isDateInRanges(newValue, this.disabledDates))) {
-                        const oldValue =  this.value;
-                        this.value = newValue;
+                    const oldValue = this.value;
+                    this.value = newValue;
 
-                        this.emitValueChangeEvent(oldValue, this.value );
-                        this.invalidDate = '';
+                    this.emitValueChangeEvent(oldValue, this.value);
+                    this.invalidDate = '';
                 } else {
                     const args: IDatePickerDisabledDateEventArgs = {
                         datePicker: this,

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

@@ -153,8 +153,9 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
 
     /** @hidden */
     public ngOnInit(): void {
-        this.renderer.setAttribute(this.nativeElement, 'placeholder',
-            this.placeholder ? this.placeholder : this.maskOptions.format);
+        if (!this.nativeElement.placeholder) {
+          this.renderer.setAttribute(this.nativeElement, 'placeholder', this.maskOptions.format);
+        }
     }
 
     /**

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -144,6 +144,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
 
         const args = cell.createEditEventArgs();
 
+        // TODO: emit onCellEdit after value is updated - issue #7304
         this.grid.onCellEdit.emit(args);
         if (args.cancel) {
             return args;
@@ -231,6 +232,7 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
             return args;
         }
 
+        // TODO: emit onRowEdit after value is updated - issue #7304
         grid.onRowEdit.emit(args);
 
         if (args.cancel) {

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -323,18 +323,14 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
      * @memberof IgxColumnGroupComponent
      */
     get width() {
-        let isChildrenWidthInPercent = false, width;
+        let width;
         width = `${this.children.reduce((acc, val) => {
             if (val.hidden) {
                 return acc;
             }
-            if (typeof val.width === 'string' && val.width.indexOf('%') !== -1) {
-                isChildrenWidthInPercent = true;
-                return acc + parseInt(val.width, 10);
-            }
             return acc + parseInt(val.calcWidth, 10);
         }, 0)}`;
-        return isChildrenWidthInPercent ? width + '%' : width + 'px';
+        return width + 'px';
     }
 
     set width(val) { }

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1762,7 +1762,7 @@ export class IgxColumnComponent implements AfterContentInit {
      * @hidden
      */
     public getCalcWidth(): any {
-        if (this._calcWidth !== null && !isNaN(this.calcPixelWidth)) {
+        if (this._calcWidth && !isNaN(this.calcPixelWidth)) {
             return this._calcWidth;
         }
         this.cacheCalcWidth();
@@ -1863,7 +1863,7 @@ export class IgxColumnComponent implements AfterContentInit {
         const colWidth = this.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
         if (isPercentageWidth) {
-            this._calcWidth = parseInt(colWidth, 10) / 100 * (grid.calcWidth - grid.featureColumnsWidth());
+            this._calcWidth = parseInt(colWidth, 10) / 100 * grid.calcWidth;
         } else if (!colWidth) {
             // no width
             this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth();

projects/igniteui-angular/src/lib/grids/common/events.ts

@@ -7,6 +7,7 @@ import { IgxGridCellComponent } from '../cell.component';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxRowDirective } from '../row.directive';
+import { ColumnType } from './column.interface';
 export { GridSelectionRange } from '../selection/selection.service';
 
 export interface IGridClipboardEvent {
@@ -26,9 +27,12 @@ export interface IGridEditEventArgs extends CancelableEventArgs, IBaseEventArgs
         columnID: any,
         rowIndex: number
     };
+    rowData: any;
     oldValue: any;
     newValue?: any;
     event?: Event;
+    column?: ColumnType;
+    owner?: IgxGridBaseDirective & GridType;
 }
 
 export interface IPinColumnEventArgs extends IBaseEventArgs {

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

@@ -3552,15 +3552,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.hasColumnLayouts) {
             return '';
         }
-        const colWidth = column.width;
+        const colWidth = parseInt(column.calcWidth, 10);
         const minWidth = this.defaultHeaderGroupMinWidth;
-        const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
 
-        if (!isPercentageWidth && parseInt(colWidth, 10) < minWidth) {
+        if (colWidth < minWidth) {
             return minWidth + 'px';
         }
-
-        return colWidth;
+        return colWidth + 'px';
     }
 
     /**
@@ -4036,7 +4034,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                     rowIndex: index
                 };
 
-                const cell = new IgxCell(id, index, col, rowData[col.field], rowData[col.field], rowData);
+                const cell = new IgxCell(id, index, col, rowData[col.field], rowData[col.field], rowData, this);
                 const args = this.gridAPI.update_cell(cell, value);
 
                 if (this.crudService.cell && this.crudService.sameCell(cell)) {
@@ -4071,7 +4069,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             if (editableCell && editableCell.id.rowID === rowSelector) {
                 this.gridAPI.escape_editMode();
             }
-            const row = new IgxRow(rowSelector, -1, this.gridAPI.getRowData(rowSelector));
+            const row = new IgxRow(rowSelector, -1, this.gridAPI.getRowData(rowSelector), this);
             this.gridAPI.update_row(row, value);
 
             // TODO: fix for #5934 and probably break for #5763

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

@@ -172,6 +172,7 @@ export class IgxGridNavigationService {
 
     focusTbody(event) {
         const gridRows = this.grid.verticalScrollContainer.totalItemCount ?? this.grid.dataView.length;
+        if (gridRows < 1) { this.activeNode = null; return; }
         if (!this.activeNode || this.activeNode.row < 0 || this.activeNode.row > gridRows - 1) {
             this.activeNode = { row: 0, column: 0 };
             this.grid.navigateTo(0, 0, (obj) => {
@@ -182,7 +183,8 @@ export class IgxGridNavigationService {
     }
 
     focusFirstCell(header = true) {
-        if (this.activeNode && (this.activeNode.row === -1 || this.activeNode.row === this.grid.dataView.length)) { return; }
+        if (this.grid.dataView.length && this.activeNode &&
+            (this.activeNode.row === -1 || this.activeNode.row === this.grid.dataView.length)) { return; }
         this.activeNode = { row: header ? -1 : this.grid.dataView.length, column: 0,
                 level: this.grid.hasColumnLayouts ? 1 : 0, mchCache: { level: 0, visibleIndex: 0} };
         this.performHorizontalScrollToCell(0);