Merge branch 'master' into mkirova/fix-5200-master

Author: mpavlinov

CHANGELOG.md

@@ -28,6 +28,8 @@ All notable changes for each version of this project will be documented in this
     - Replaces the current paginator in all grids. Can be used as a standalone component.
 - `IgxCombo`
     - Input `[overlaySettings]` - allows an object of type `OverlaySettings` to be passed. These custom overlay settings control how the drop-down list displays.
+- `IgxForOf` now offers usage of local variables `even`, `odd`, `first` and `last` to help with the distinction of the currently iterated element.
+
 
 ## 8.0.2
 - `igx-list-theme` now have some new parameters for styling.

projects/igniteui-angular/src/lib/core/grid-selection.ts

@@ -105,8 +105,8 @@ export class IgxGridCRUDService {
         return new IgxRow(cell.id.rowID, cell.rowIndex, cell.rowData);
     }
 
-    sameRow(rowID): boolean {
-        return this.row && this.row.id === rowID;
+    sameRow(rowIndex): boolean {
+        return this.row && this.row.index === rowIndex;
     }
 
     sameCell(cell: IgxCell): boolean {
@@ -175,7 +175,7 @@ export class IgxGridCRUDService {
                 return;
             }
 
-            if (this.row && !this.sameRow(this.cell.id.rowID)) {
+            if (this.row && !this.sameRow(this.cell.rowIndex)) {
                 this.grid.endEdit(true);
                 this.cell = this.createCell(cell);
                 this.beginRowEdit();

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -343,9 +343,7 @@
 
     @include igx-scope('.igx-typography') {
         %item {
-            @include igx-type-style($type-scale, $item) {
-                margin: 0;
-            }
+            @include igx-type-style($type-scale, $item);
         }
 
         %item--header {

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss

@@ -22,7 +22,7 @@
 /// @prop {map} item-hover-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The item's hover text color.
 /// @prop {map} item-hover-icon-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The item's hover icon color.
 /// @prop {map} elevation [16] - The elevation level of the drawer, between 0 - 24.
-/// @prop {Number} border-radius [.16667] - The border radius fraction, between 0 - 36 to be used for the navdrawer component.
+/// @prop {Number} border-radius [0] - The border radius fraction, between 0 - 36 to be used for the navdrawer component.
 /// @prop {Number} item-border-radius [.16667] - The border radius fraction, between 0 - 24 to be used for the navdrawer item.
 ///
 /// @see $default-palette
@@ -37,10 +37,6 @@ $_light-navdrawer: extend(
 
         border-color: rgba(0, 0, 0, .14),
 
-        border-radius: 0,
-
-        item-border-radius: .16667,
-
         item-header-text-color: (
             igx-color: 'surface',
             text-contrast: (),

projects/igniteui-angular/src/lib/core/styles/themes/schemas/shape/_navdrawer.scss

@@ -4,14 +4,16 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 $_default-shape-navdrawer: (
-    border-radius: .2,
+    border-radius: 0,
+    item-border-radius: .16667,
 );
 
 $_round-shape-navdrawer: (
     border-radius: 1,
+    item-border-radius: 1,
 );
 
 $_square-shape-navdrawer: (
     border-radius: 0%,
-    border-radius-item: 0%
+    item-border-radius: 0%
 );

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts

@@ -1086,6 +1086,46 @@ describe('IgxForOf directive -', () => {
             expect(children.length).toEqual(expectedElementsLength);
         });
     });
+    describe('even odd first last functions', () => {
+        configureTestSuite();
+        let fix: ComponentFixture<LocalVariablesComponent>;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    TestIgxForOfDirective,
+                    LocalVariablesComponent
+                ],
+                imports: [IgxForOfModule]
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fix = TestBed.createComponent(LocalVariablesComponent);
+            fix.detectChanges();
+        });
+
+        it('should differentiate even odd items', () => {
+            const allItems: DebugElement[] = fix.debugElement.queryAll(By.css('igx-display-container'))[0].children;
+            expect(allItems.length).toEqual(100);
+            for (let i = 0; i < allItems.length; i++) {
+                if (i === 0) {
+                    expect(allItems[i].classes['first']).toBe(true);
+                }
+                if (i === allItems.length - 1) {
+                    expect(allItems[i].classes['last']).toBe(true);
+                }
+                if (i % 2 === 0) {
+                    expect(allItems[i].classes['even']).toBe(true);
+                } else {
+                    expect(allItems[i].classes['odd']).toBe(true);
+                }
+            }
+        });
+
+
+    });
+
 });
 
 class DataGenerator {
@@ -1574,3 +1614,40 @@ export class NoWidthAndHeightComponent {
         }
     }
 }
+
+@Component({
+    template: `
+    <div class='container'>
+        <ng-template igxFor let-item [igxForOf]="data" #virtDirVertical
+            [igxForScrollOrientation]="'vertical'"
+            [igxForContainerSize]='"500px"'
+            [igxForItemSize]='itemSize'
+            let-rowIndex="index"
+            let-odd="odd"
+            let-even="even"
+            let-first="first"
+            let-last="last">
+
+            <div #markupItem
+                [ngClass]="{
+                    first: first,
+                    last: last,
+                    even: even,
+                    odd: odd
+                }"
+                [style.height]='itemSize'>
+                    {{rowIndex}} : {{item.text}}
+            </div>
+        </ng-template>
+    </div>
+    `,
+})
+export class LocalVariablesComponent {
+    public data = [];
+
+    constructor() {
+        for (let i = 0; i < 100; i++) {
+            this.data.push({text: i + ''});
+        }
+    }
+}

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -31,6 +31,38 @@ import { VirtualHelperComponent } from './virtual.helper.component';
 import { IgxScrollInertiaModule } from './../scroll-inertia/scroll_inertia.directive';
 import { IgxForOfSyncService } from './for_of.sync.service';
 
+/**
+ *  @publicApi
+ */
+export class IgxForOfContext<T> {
+    constructor(
+       public $implicit: T,
+       public index: number,
+       public count: number
+    ) {}
+
+    /**
+     * A function that returns whether the element is the first or not
+     */
+    get first(): boolean { return this.index === 0; }
+
+    /**
+     * A function that returns whether the element is the last or not
+     */
+    get last(): boolean { return this.index === this.count - 1; }
+
+    /**
+     * A function that returns whether the element is even or not
+     */
+    get even(): boolean { return this.index % 2 === 0; }
+
+    /**
+     * A function that returns whether the element is odd or not
+     */
+    get odd(): boolean { return !this.even; }
+
+}
+
 @Directive({ selector: '[igxFor][igxForOf]' })
 export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestroy {
 
@@ -323,7 +355,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 const input = this.igxForOf[i];
                 const embeddedView = this.dc.instance._vcr.createEmbeddedView(
                     this._template,
-                    { $implicit: input, index: this.igxForOf.indexOf(input) }
+                    new IgxForOfContext<T>(input, this.getContextIndex(input), this.igxForOf.length)
                 );
                 this._embeddedViews.push(embeddedView);
             }
@@ -789,6 +821,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             const cntx = embView.context;
             cntx.$implicit = input;
             cntx.index = this.getContextIndex(input);
+            cntx.count = this.igxForOf.length;
             const view: ViewRef = this.dc.instance._vcr.detach(0);
             this.dc.instance._vcr.insert(view);
             this._embeddedViews.push(embView);
@@ -832,6 +865,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             const cntx = (embView as EmbeddedViewRef<any>).context;
             cntx.$implicit = input;
             cntx.index = this.getContextIndex(input);
+            cntx.count = this.igxForOf.length;
         }
     }
 
@@ -903,6 +937,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 const cntx = (embView as EmbeddedViewRef<any>).context;
                 cntx.$implicit = input;
                 cntx.index = this.getContextIndex(input);
+                cntx.count = this.igxForOf.length;
             }
             this.dc.changeDetectorRef.detectChanges();
             if (prevChunkSize !== this.state.chunkSize) {
@@ -1165,7 +1200,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         const input = this.igxForOf[elemIndex];
         const embeddedView = this.dc.instance._vcr.createEmbeddedView(
             this._template,
-            { $implicit: input, index: elemIndex }
+            new IgxForOfContext<T>(input, this.getContextIndex(input), this.igxForOf.length)
         );
 
         this._embeddedViews.push(embeddedView);
@@ -1516,7 +1551,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         const input = this.igxForOf[elemIndex];
         const embeddedView = this.dc.instance._vcr.createEmbeddedView(
             this._template,
-            { $implicit: input, index: elemIndex }
+            new IgxForOfContext<T>(input, this.getContextIndex(input), this.igxForOf.length)
         );
 
         this._embeddedViews.push(embeddedView);
@@ -1550,6 +1585,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
                 const cntx = (embView as EmbeddedViewRef<any>).context;
                 cntx.$implicit = input;
                 cntx.index = this.getContextIndex(input);
+                cntx.count = this.igxForOf.length;
             }
             if (prevChunkSize !== this.state.chunkSize) {
                 this.onChunkLoad.emit(this.state);

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -584,7 +584,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         const editableCell = this.crudService.cell;
         const editMode = !!(crud.row || crud.cell);
 
-
         if (this.editable && editMode && !this.row.deleted) {
             if (editableCell) {
                 this.gridAPI.update_cell(editableCell, editableCell.editValue);
@@ -595,9 +594,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             return;
         }
 
-        if (editableCell && crud.sameRow(this.cellID.rowID)) {
+        if (editableCell && crud.sameRow(this.rowIndex)) {
             this.gridAPI.submit_value();
-        } else if (editMode && !crud.sameRow(this.cellID.rowID)) {
+        } else if (editMode && !crud.sameRow(this.rowIndex)) {
             this.grid.endEdit(true);
         }
     }
@@ -979,14 +978,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         }
 
         if (this.editMode) {
-            const v = this.crudService.cell;
-            const args = {
-                cellID: v.id,
-                rowID: v.id.rowID,
-                oldValue: v.value,
-                newValue: v.editValue,
-                cancel: false
-            } as IGridEditEventArgs;
+            const args = this.crudService.cell.createEditEventArgs();
             this.grid.onCellEditCancel.emit(args);
             if (args.cancel) {
                 return;

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

@@ -126,13 +126,20 @@ export class IgxColumnComponent implements AfterContentInit {
      */
     @Input()
     get editable(): boolean {
-        let result = false;
+        // Updating the primary key when grid has transactions (incl. row edit)
+        // should not be allowed, as that can corrupt transaction state.
+        const rowEditable = this.grid && this.grid.rowEditable;
+        const hasTransactions = this.grid && this.grid.transactions.enabled;
+
+        if (this.isPrimaryColumn && (rowEditable || hasTransactions)) {
+            return false;
+        }
+
         if (this._editable !== undefined) {
-            result = this._editable;
+            return this._editable;
         } else {
-            result = this.grid && this.grid.rowEditable && this.field !== this.grid.primaryKey;
+            return rowEditable;
         }
-        return result;
     }
     /**
      * Sets whether the column is editable.
@@ -1085,6 +1092,12 @@ export class IgxColumnComponent implements AfterContentInit {
      * @hidden
      */
     protected _editable: boolean;
+    /**
+     * @hidden
+     */
+    protected get isPrimaryColumn(): boolean {
+        return this.field !== undefined && this.grid !== undefined && this.field === this.grid.primaryKey;
+    }
     /**
      *@hidden
      */

projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts

@@ -2883,7 +2883,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation', () => {
         await wait(100);
         fix.detectChanges();
 
-        targetCell = grid.getCellByColumn(0, 'ID');
+        targetCell = grid.getCellByColumn(0, 'PostalCode');
         expect(targetCell.focused).toBe(true);
     });