chore(*): merge conflicts

Author: nrobakova

CHANGELOG.md

@@ -12,10 +12,24 @@ All notable changes for each version of this project will be documented in this
     - You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
     - You are allowed to customize tab items with labels, icons and even templates.
 - `IgxGrid`
+    - **Behavioral Change** - paging now includes the group rows in the page size. You may find more information about the change in the [GroupBy Specification](https://github.com/IgniteUI/igniteui-angular/wiki/Group-By-Specification)
     - `IgxColumnGroup`
         - Re-templating the column group header is now possible using the `headerTemplate` input property or the `igxHeader` directive.
+    - `igx-grid-footer` 
+        - You can use this to insert a custom footer in the grids.
+         ```html
+        <igx-grid>
+            <igx-grid-footer>
+                Custom content
+            </igx-grid-footer>
+        </igx-grid>
+        ```
+- `igx-paginator`
+    - 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.

README.md

@@ -181,9 +181,7 @@ You can include Ignite UI for Angular in your project as a dependency using the
 `npm install igniteui-angular`
 
 ## Contributing
-[Coding Guidelines](../../wiki//Coding-guidelines-for-Ignite-UI-for-Angular)
-
-[General Naming Guidelines](../../wiki//General-Naming-Guidelines-for-Ignite-UI-for-Angular)
+[General Naming and Coding Guidelines for Ignite UI for Angular](https://github.com/IgniteUI/igniteui-angular/wiki/General-Naming-and-Coding--Guidelines-for-Ignite-UI-for-Angular)
 
 ## Demo Apps & Documentation
 The [Warehouse Picklist App](https://github.com/IgniteUI/warehouse-js-blocks) demonstrates using several Ignite UI for Angular widgets together to build a modern, mobile app.

projects/igniteui-angular/src/lib/combo/combo-item.component.html

@@ -1,4 +1,4 @@
 <ng-container *ngIf="!isHeader">
-    <igx-checkbox [checked]="selected" disableRipple="true" [disableTransitions]="disableTransitions" disabled="true" class="igx-combo__checkbox"></igx-checkbox>
+    <igx-checkbox [checked]="selected" disableRipple="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
 <ng-content></ng-content>

projects/igniteui-angular/src/lib/combo/combo-item.component.ts

@@ -99,6 +99,19 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent implements D
         this.comboAPI.set_selected_item(this.itemID, event);
     }
 
+    /**
+     * @hidden
+     * @internal
+     * The event that is prevented is the click on the checkbox label element.
+     * That is the only visible element that a user can interact with.
+     * The click propagates to the host and the preventDefault is to stop it from
+     * switching focus to the input it's base on.
+     * The toggle happens in an internal handler in the drop-down on the next task queue cycle.
+     */
+    disableCheck(event: MouseEvent) {
+        event.preventDefault();
+    }
+
     ngDoCheck() {
     }
 }

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -74,7 +74,7 @@
             </ng-container>
         </div>
         <igx-combo-add-item [itemHeight]='itemHeight' *ngIf="isAddButtonVisible()" [tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1"
-            class="igx-combo__add-item" igxRipple role="button" aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
+            class="igx-combo__add-item" role="button" aria-label="Add Item" [index]="virtualScrollContainer.igxForOf.length">
             <ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
             </ng-container>
         </igx-combo-add-item>

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -29,6 +29,7 @@ const CSS_CLASS_DROPDOWNBUTTON = 'igx-combo__toggle-button';
 const CSS_CLASS_CLEARBUTTON = 'igx-combo__clear-button';
 const CSS_CLASS_CHECK_GENERAL = 'igx-combo__checkbox';
 const CSS_CLASS_CHECKBOX = 'igx-checkbox';
+const CSS_CLASS_CHECKBOX_LABEL = 'igx-checkbox__composite';
 const CSS_CLASS_CHECKED = 'igx-checkbox--checked';
 const CSS_CLASS_TOGGLE = 'igx-toggle';
 const CSS_CLASS_SELECTED = 'igx-drop-down__item--selected';
@@ -950,7 +951,7 @@ describe('igxCombo', () => {
         }
         function clickItemCheckbox(dropdownElement: any, itemIndex: number) {
             const dropdownItems = dropdownElement.querySelectorAll('.' + CSS_CLASS_DROPDOWNLISTITEM);
-            const checkbox = dropdownItems[itemIndex].querySelector('.' + CSS_CLASS_CHECKBOX) as HTMLElement;
+            const checkbox = dropdownItems[itemIndex].querySelector('.' + CSS_CLASS_CHECKBOX_LABEL) as HTMLElement;
             checkbox.click();
         }
         function verifyItemIsSelected(

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/base/utilities/_functions.scss

@@ -349,12 +349,12 @@
 ///   // }
 ///   // otherwise, it will return the value for key 'icon-color' in the '$avatar-theme';
 /// @returns {String} - The value of the key in the passed map, or the name of key concatenated with the key name.
-@function --var($map, $key) {
+@function --var($map, $key, $fallback: '') {
     $igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, true);
 
     @if map-has-key($map, $key) {
         @if $igx-legacy-support == false {
-            @return unquote('var(--#{map-get($map, 'name')}-#{$key})');
+            @return unquote('var(--#{map-get($map, 'name')}-#{$key}, #{$fallback})');
         } @else {
             @return map-get($map, $key);
         }

projects/igniteui-angular/src/lib/core/styles/components/grid-paginator/_grid-paginator-theme.scss

@@ -73,7 +73,8 @@
         z-index: 1;
         padding: map-get($paginator-padding, 'comfortable');
         height: map-get($paginator-height, 'comfortable');
-
+        width: 100%;
+        
         &:empty {
             padding: 0;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss

@@ -9,6 +9,7 @@
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
 ///
 /// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot
+/// @param {Color} $focus-background-color [null] - The background color when a summary item is on focus.
 /// @param {Color} $label-color [null] - The summaries label color.
 /// @param {Color} $result-color [null] - The summaries value/result color.
 /// @param {Color} $border-color [null] - The summaries border color.
@@ -35,6 +36,7 @@
     $schema: $light-schema,
 
     $background-color: null,
+    $focus-background-color: null,
     $label-color: null,
     $result-color: null,
     $border-color: null,
@@ -62,6 +64,7 @@
         name: $name,
         palette: $palette,
         background-color: $background-color,
+        focus-background-color: $focus-background-color,
         label-color: $label-color,
         result-color: $result-color,
         border-color: $border-color,
@@ -98,12 +101,27 @@
     );
 
     %igx-grid-summary {
+        position: relative;
         display: flex;
         flex-direction: column;
         flex: 1 1 0%;
         padding: map-get($summary-padding, 'comfortable');
-        background: --var($theme, 'background-color');
+        background: --var($theme, 'background-color', inherit);
         overflow: hidden;
+        outline-style: none;
+
+        &::after {
+            position: absolute;
+            content: '';
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+        }
+
+        &:focus::after {
+            background: --var($theme, 'focus-background-color');
+        }
     }
 
     %igx-grid-summary--cosy {