Merge branch 'master' into fix-#5361

Author: simeonoff

CHANGELOG.md

@@ -12,8 +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.

projects/igniteui-angular/src/lib/combo/README.md

@@ -265,6 +265,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 |  `ariaLabelledBy`        | defines label ID related to combo                 | boolean                     |
 |  `type`                  | Combo style. - "line", "box", "border", "search"                                        | string                      |
 |  `valid`                 | gets if control is valid, when used in a form     | boolean                     |
+|  `overlaySettings`       | gets/sets the custom overlay settings that control how the drop-down list displays | OverlaySettings         |
 
 ### Getters
 | Name                     | Description                                       | Type                        |

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

@@ -16,6 +16,7 @@ import { DefaultSortingStrategy } from '../data-operations/sorting-strategy';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { IgxDropDownItemBase } from '../drop-down/drop-down-item.base';
 import { DisplayDensity, DisplayDensityToken } from '../core/density';
+import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/index';
 
 const CSS_CLASS_COMBO = 'igx-combo';
 const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -28,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';
@@ -185,6 +187,23 @@ describe('igxCombo', () => {
             expect(combo.displayKey).toEqual('region');
             expect(combo.displayKey === combo.valueKey).toBeFalsy();
         });
+        it('Should properly get/set overlaySettings', () => {
+            const fixture = TestBed.createComponent(IgxComboTestComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.combo;
+            const defaultSettings = (combo as any)._overlaySettings;
+            spyOn(combo.dropdown, 'toggle');
+            combo.toggle();
+            expect(combo.dropdown.toggle).toHaveBeenCalledWith(defaultSettings);
+            const newSettings = {
+                positionStrategy: new ConnectedPositioningStrategy({ target: fixture.elementRef.nativeElement}),
+                scrollStrategy: new AbsoluteScrollStrategy(fixture.elementRef.nativeElement)
+            };
+            combo.overlaySettings = newSettings;
+            const expectedSettings = Object.assign({}, defaultSettings, newSettings);
+            combo.toggle();
+            expect(combo.dropdown.toggle).toHaveBeenCalledWith(expectedSettings);
+        });
 
         describe('EditorProvider', () => {
             it('Should return correct edit element', () => {
@@ -932,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/combo/combo.component.ts

@@ -42,22 +42,6 @@ import { IgxComboAPIService } from './combo.api';
 import { EditorProvider } from '../core/edit-provider';
 import { take } from 'rxjs/operators';
 
-/** Custom strategy to provide the combo with callback on initial positioning */
-class ComboConnectedPositionStrategy extends ConnectedPositioningStrategy {
-    private _callback: () => void;
-    constructor(callback: () => void) {
-        super();
-        this._callback = callback;
-    }
-
-    position(contentElement, size, document?, initialCall?) {
-        if (initialCall) {
-            this._callback();
-        }
-        super.position(contentElement, size);
-    }
-}
-
 /**
  * @hidden
  */
@@ -124,7 +108,7 @@ const noop = () => { };
     ]
 })
 export class IgxComboComponent extends DisplayDensityBase implements IgxComboBase, AfterViewInit, ControlValueAccessor, OnInit,
- OnDestroy, EditorProvider {
+    OnDestroy, EditorProvider {
     /**
      * @hidden @internal
      */
@@ -148,10 +132,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private _filteredData = [];
     private _itemHeight = null;
     private _itemsMaxHeight = null;
-    private _positionCallback: () => void;
     private _onChangeCallback: (_: any) => void = noop;
-    private overlaySettings: OverlaySettings = {
+    private _overlaySettings: OverlaySettings = {
         scrollStrategy: new AbsoluteScrollStrategy(),
+        positionStrategy: new ConnectedPositioningStrategy(),
         modal: false,
         closeOnOutsideClick: true,
         excludePositionTarget: true
@@ -171,6 +155,26 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     @ViewChild(IgxForOfDirective, { read: IgxForOfDirective, static: true })
     protected virtDir: IgxForOfDirective<any>;
 
+    /**
+     * Set custom overlay settings that control how the combo's list of items is displayed.
+     * Set:
+     * ```html
+     * <igx-combo [overlaySettings] = "customOverlaySettings"></igx-combo>
+     * ```
+     *
+     * ```typescript
+     *  const customSettings = { positionStrategy: { settings: { target: myTarget } } };
+     *  combo.overlaySettings = customSettings;
+     * ```
+     * Get any custom overlay settings used by the combo:
+     * ```typescript
+     *  const comboOverlaySettings: OverlaySettings = myCombo.overlaySettings;
+     * ```
+     */
+
+    @Input()
+    public overlaySettings: OverlaySettings = null;
+
     /**
      * @hidden @internal
      */
@@ -1249,9 +1253,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public ngOnInit() {
         this.ngControl = this.injector.get(NgControl, null);
-        this._positionCallback = () => this.dropdown.updateScrollPosition();
-        this.overlaySettings.positionStrategy = new ComboConnectedPositionStrategy(this._positionCallback);
-        this.overlaySettings.positionStrategy.settings.target = this.elementRef.nativeElement;
+        this._overlaySettings.positionStrategy.settings.target = this.elementRef.nativeElement;
         this.selection.set(this.id, new Set());
     }
 
@@ -1263,7 +1265,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
 
         if (this.ngControl) {
             this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged);
-    }
+        }
     }
 
     /**
@@ -1358,7 +1360,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      *```
      */
     public toggle(): void {
-        this.dropdown.toggle(this.overlaySettings);
+        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+        this.dropdown.toggle(overlaySettings);
     }
 
     /**
@@ -1370,7 +1373,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      *```
      */
     public open(): void {
-        this.dropdown.open(this.overlaySettings);
+        const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
+        this.dropdown.open(overlaySettings);
     }
 
     /**

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();
@@ -371,11 +371,14 @@ export class IgxGridSelectionService {
         }
     }
 
-    keyboardStateOnFocus(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>): void {
+    keyboardStateOnFocus(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>, dom): void {
         const kbState = this.keyboardState;
 
         // Focus triggered by keyboard navigation
         if (kbState.active) {
+            if (isChromium()) {
+                this._moveSelectionChrome(dom);
+            }
             // Start generating a range if shift is hold
             if (kbState.shift) {
                 this.dragSelect(node, kbState);
@@ -525,6 +528,11 @@ export class IgxGridSelectionService {
         }
     }
 
+    /**
+     * (╯°□°）╯︵ ┻━┻
+     * Chrome and Chromium don't care about the active
+     * range after keyboard navigation, thus this.
+     */
     _moveSelectionChrome(node: Node) {
         const selection = window.getSelection();
         selection.removeAllRanges();
@@ -534,3 +542,7 @@ export class IgxGridSelectionService {
         selection.addRange(range);
     }
 }
+
+export function isChromium(): boolean {
+    return (/Chrom|e?ium/g.test(navigator.userAgent) || /Google Inc/g.test(navigator.vendor)) && !/Edge/g.test(navigator.userAgent);
+}

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -220,23 +220,33 @@
 
 /// Extends a Map object with the properties of another Map object.
 /// @access private
-/// @param {Map} $map1 - The source map to get extended.
-/// @param {Map} $map2 - The map extending the source map.
-/// @returns {Map} - Returns the original map extended with the properties of the second map.
-@function extend($map1, $map2) {
+/// @param {Map...} $maps - The source map to get extended.
+/// @returns {Map} - Returns the merged maps.
+@function extend($maps...) {
     $result: ();
-    @each $key, $value in $map2 {
-        @if not($value) {
-            $result: map-merge($result, (
-                #{$key}: map-get($map1, $key)
-            ));
-        } @else {
+
+    @each $map in $maps {
+        $result: map-merge($result, map-clean($map));
+    }
+
+    @return $result;
+}
+
+/// Removes all null key-value pairs from the map
+/// @access private
+/// @param {Map} $map - The target map to be cleaned.
+/// @returns {Map} - Returns a clean map.
+@function map-clean($map) {
+    $result: ();
+
+    @each $key, $value in $map {
+        @if($value) != null {
             $result: map-merge($result, (
                 #{$key}: $value
             ));
         }
     }
-    $result: map-merge($map1, $result);
+
     @return $result;
 }
 
@@ -245,7 +255,6 @@
 /// @group Palettes
 /// @requires {function} gen-color
 /// @requires {function} text-contrast
-/// @requires {function} extend
 /// @param {Color} $color - The base color used to generate the palette.
 /// @param {List} $saturations - The saturation list of color variants.
 //// Based on the Material color system.
@@ -264,7 +273,6 @@
 /// @access private
 /// @group Palettes
 /// @requires {function} text-contrast
-/// @requires {function} extend
 /// @param {Color} $color - The base color used to generate the palette.
 /// @param {Map} $shades - A map of variations as keys and opacities as values.
 /// Based on the Material color system.
@@ -416,6 +424,7 @@
 /// @access private
 /// @param {Map} $schema - A theme schema.
 /// @param {Map} $palette - An igx-palette map.
+/// @requires {function} extend
 /// @requires {function} resolve-value
 /// @example scss Apply an `igx-palette` to theme schema
 ///   $custom-palette: igx-palette($primary: red, $secondary: blue);
@@ -434,7 +443,7 @@
         @if type-of($value) == 'map' {
             $result: extend($result, (#{$key}: resolve-value($value, $palette)));
         } @else {
-            $result: extend($result, (#{$key}: $value));
+            $result: extend($result, (#{$key}: #{$value}));
         }
     }
     @return $result;

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;
         }