Merge branch 'master' into mpopov/input-placeholder-position-master

Author: simeonoff

CHANGELOG.md

@@ -17,10 +17,18 @@ 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.
 
+## 9.1.4
+
+### New Features
+- `IgxList`
+    - Added localization support.
+
 ## 9.1.1
 
 ### General
@@ -188,7 +196,6 @@ All notable changes for each version of this project will be documented in this
     - Added support for tabIndex attribute applied to the main chip element.
     - Added `tabIndex` input so it can support change detection as well.
 
-
 - `IgxHighlightDirective`
     - New `metadata` property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
 

projects/igniteui-angular/src/lib/core/i18n/list-resources.ts

@@ -0,0 +1,9 @@
+export interface IListResourceStrings {
+    igx_list_no_items?: string;
+    igx_list_loading?: string;
+}
+
+export const ListResourceStringsEN: IListResourceStrings = {
+    igx_list_no_items: 'There are no items in the list.',
+    igx_list_loading: 'Loading data from the server...'
+};

projects/igniteui-angular/src/lib/core/i18n/resources.ts

@@ -4,6 +4,7 @@ import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './time-
 import { PaginatorResourceStringsEN } from './paginator-resources';
 import { cloneValue } from '../utils';
 import { ICarouselResourceStrings, CarouselResourceStringsEN } from './carousel-resources';
+import { ListResourceStringsEN } from './list-resources';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICarouselResourceStrings  {}
 
@@ -16,6 +17,7 @@ export const CurrentResourceStrings = {
     TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
     DateRangePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
+    ListResStrings: cloneValue(ListResourceStringsEN),
 };
 
 function updateResourceStrings(currentStrings: IResourceStrings, newStrings: IResourceStrings ) {

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 {