Merge branch 'master' into SKrastev/fix-4896-master

Author: rkaraivanov

CHANGELOG.md

@@ -19,6 +19,7 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** `onClose` event is renamed to `onClosed`.
     - **Behavioral Change** - action buttons are now available in the dropdown mode.
     - **Feature** `igxDatePicker` and `igxTimePicker` now provide the ability for adding custom action buttons. Read up more information in [igxDatePicker ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/date-picker/README.md) or [igxTimePicker ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/time-picker/README.md)
+- `IgxToggleAction` / `IgxTooltip`: Removed the deprecated `closeOnOutsideClick` Input that has been superseded by `overlaySettings` in 6.2.0.
 
 - `IgxList` - The list component has been refactored. It now includes several new supporting directives:
     - `igxListThumbnail` - Use it to mark the target as list thumbnail which will be automatically positioned as a first item in the list item;

projects/igniteui-angular/package.json

@@ -75,6 +75,7 @@
     "@angular/core": "^8.0.0",
     "@angular/animations": "^8.0.0",
     "@angular/forms": "^8.0.0",
+    "node-sass": "^4.9.0",
     "web-animations-js": "^2.3.1"
   },
   "devDependencies": {

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

@@ -34,7 +34,6 @@ import { IgxComboFilterConditionPipe, IgxComboFilteringPipe, IgxComboGroupingPip
 import { OverlaySettings, AbsoluteScrollStrategy } from '../services';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { DeprecateProperty } from '../core/deprecateDecorators';
 import { DefaultSortingStrategy, ISortingStrategy } from '../data-operations/sorting-strategy';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';

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

@@ -33,6 +33,7 @@ interface ISelectionKeyboardState {
 
 interface ISelectionPointerState extends ISelectionKeyboardState {
     ctrl: boolean;
+    primaryButton: boolean;
 }
 
 type SelectionState = ISelectionKeyboardState | ISelectionPointerState;
@@ -105,7 +106,7 @@ export class IgxGridCRUDService {
     }
 
     sameRow(rowID): boolean {
-        return this.row.id === rowID;
+        return this.row && this.row.id === rowID;
     }
 
     sameCell(cell: IgxCell): boolean {
@@ -209,6 +210,7 @@ export class IgxGridSelectionService {
     selection = new Map<number, Set<number>>();
     temp = new Map<number, Set<number>>();
     _ranges: Set<string> = new Set<string>();
+    _selectionRange: Range;
 
 
     /**
@@ -218,9 +220,7 @@ export class IgxGridSelectionService {
     get ranges(): GridSelectionRange[] {
 
         // The last action was keyboard + shift selection -> add it
-        if (this.keyboardState.range) {
-            this._ranges.add(JSON.stringify(this.keyboardState.range));
-        }
+        this.addKeyboardRange();
 
         const ranges = Array.from(this._ranges).map(range => JSON.parse(range));
 
@@ -232,6 +232,14 @@ export class IgxGridSelectionService {
         return ranges;
     }
 
+    get primaryButton(): boolean {
+        return this.pointerState.primaryButton;
+    }
+
+    set primaryButton(value: boolean) {
+        this.pointerState.primaryButton = value;
+    }
+
     constructor(private zone: NgZone) {
         this.initPointerState();
         this.initKeyboardState();
@@ -255,6 +263,7 @@ export class IgxGridSelectionService {
         this.pointerState.ctrl = false;
         this.pointerState.shift = false;
         this.pointerState.range = null;
+        this.pointerState.primaryButton = true;
     }
 
     /**
@@ -268,6 +277,15 @@ export class IgxGridSelectionService {
         this._ranges.add(JSON.stringify(this.generateRange(node)));
     }
 
+    /**
+     * Adds the active keyboard range selection (if any) to the `ranges` meta.
+     */
+    addKeyboardRange(): void {
+        if (this.keyboardState.range) {
+            this._ranges.add(JSON.stringify(this.keyboardState.range));
+        }
+    }
+
     remove(node: ISelectionNode): void {
         if (this.selection.has(node.row)) {
             this.selection.get(node.row).delete(node.column);
@@ -287,13 +305,22 @@ export class IgxGridSelectionService {
         return this.isActiveNode(node) || this.isInMap(node);
     }
 
-    isActiveNode(node: ISelectionNode): boolean {
+    isActiveNode(node: ISelectionNode, mrl = false): boolean {
         if (this.activeElement) {
-            return this.activeElement.column === node.column && this.activeElement.row === node.row;
+            const isActive = this.activeElement.column === node.column && this.activeElement.row === node.row;
+            if (mrl) {
+                const layout = this.activeElement.layout;
+                return isActive && this.isActiveLayout(layout, node.layout);
+            }
+            return isActive;
         }
         return false;
     }
 
+    isActiveLayout(current: IMultiRowLayoutNode, target: IMultiRowLayoutNode): boolean {
+        return current.columnVisibleIndex === target.columnVisibleIndex;
+    }
+
     addRangeMeta(node: ISelectionNode, state?: SelectionState): void {
         this._ranges.add(JSON.stringify(this.generateRange(node, state)));
     }
@@ -329,7 +356,7 @@ export class IgxGridSelectionService {
     /**
      *
      */
-    keyboardStateOnKeydown(node: ISelectionNode, shift: boolean, shiftTab: boolean) {
+    keyboardStateOnKeydown(node: ISelectionNode, shift: boolean, shiftTab: boolean): void {
         this.keyboardState.active = true;
         this.initPointerState();
         this.keyboardState.shift = shift && !shiftTab;
@@ -363,10 +390,7 @@ export class IgxGridSelectionService {
 
     pointerDown(node: ISelectionNode, shift: boolean, ctrl: boolean): void {
 
-        if (this.keyboardState.range) {
-            this._ranges.add(JSON.stringify(this.keyboardState.range));
-        }
-
+        this.addKeyboardRange();
         this.initKeyboardState();
         this.pointerState.ctrl = ctrl;
         this.pointerState.shift = shift;
@@ -379,7 +403,7 @@ export class IgxGridSelectionService {
         if (shift) {
             // No previously 'clicked' node. Use the last active node.
             if (!this.pointerState.node) {
-                this.pointerState.node = this.activeElement;
+                this.pointerState.node = this.activeElement || node;
             }
             this.pointerDownShiftKey(node);
             this.clearTextSelection();
@@ -414,8 +438,9 @@ export class IgxGridSelectionService {
         }
     }
 
-    pointerEnter(node: ISelectionNode, dragEnabled: boolean): boolean {
-        this.dragMode = dragEnabled;
+    pointerEnter(node: ISelectionNode, event: PointerEvent): boolean {
+        // https://www.w3.org/TR/pointerevents/#the-button-property
+        this.dragMode = event.buttons === 1 && event.button === -1;
         if (!this.dragMode) {
             return false;
         }
@@ -428,13 +453,14 @@ export class IgxGridSelectionService {
             this.pointerState.node = node;
         }
 
-        this.pointerState.ctrl ? this.blah(node, this.pointerState) :
+        this.pointerState.ctrl ? this.selectRange(node, this.pointerState, this.temp) :
             this.dragSelect(node, this.pointerState);
         return true;
     }
 
     pointerUp(node: ISelectionNode, emitter: EventEmitter<GridSelectionRange>): boolean {
         if (this.dragMode) {
+            this.restoreTextSelection();
             this.addRangeMeta(node, this.pointerState);
             this.mergeMap(this.selection, this.temp);
             this.zone.runTask(() => emitter.emit(this.generateRange(node, this.pointerState)));
@@ -445,6 +471,7 @@ export class IgxGridSelectionService {
 
         if (this.pointerState.shift) {
             this.clearTextSelection();
+            this.restoreTextSelection();
             emitter.emit(this.generateRange(node, this.pointerState));
             this.addRangeMeta(node, this.pointerState);
             return true;
@@ -454,23 +481,15 @@ export class IgxGridSelectionService {
         return false;
     }
 
-    selectRange(node: ISelectionNode, state: SelectionState) {
-        const { rowStart, rowEnd, columnStart, columnEnd } = this.generateRange(node, state);
-        for (let i = rowStart; i <= rowEnd; i++) {
-            for (let j = columnStart as number; j <= columnEnd; j++) {
-                this.selection.has(i) ? this.selection.get(i).add(j) :
-                    this.selection.set(i, new Set<number>()).get(i).add(j);
-            }
+    selectRange(node: ISelectionNode, state: SelectionState, collection: Map<number, Set<number>> = this.selection): void {
+        if (collection === this.temp) {
+            collection.clear();
         }
-    }
-
-    blah(node: ISelectionNode, state: SelectionState) {
-        this.temp.clear();
         const { rowStart, rowEnd, columnStart, columnEnd } = this.generateRange(node, state);
         for (let i = rowStart; i <= rowEnd; i++) {
             for (let j = columnStart as number; j <= columnEnd; j++) {
-                this.temp.has(i) ? this.temp.get(i).add(j) :
-                    this.temp.set(i, new Set<number>()).get(i).add(j);
+                collection.has(i) ? collection.get(i).add(j) :
+                    collection.set(i, new Set<number>()).get(i).add(j);
             }
         }
     }
@@ -488,10 +507,28 @@ export class IgxGridSelectionService {
         this._ranges.clear();
     }
 
-    clearTextSelection() {
+    clearTextSelection(): void {
         const selection = window.getSelection();
-        if (selection) {
+        if (selection.rangeCount) {
+            this._selectionRange = selection.getRangeAt(0);
+            this._selectionRange.collapse(true);
             selection.removeAllRanges();
         }
     }
+
+    restoreTextSelection(): void {
+        const selection = window.getSelection();
+        if (!selection.rangeCount) {
+            selection.addRange(this._selectionRange);
+        }
+    }
+
+    _moveSelectionChrome(node: Node) {
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        const range = new Range();
+        range.selectNode(node);
+        range.collapse(true);
+        selection.addRange(range);
+    }
 }

projects/igniteui-angular/src/lib/core/utils.ts

@@ -1,7 +1,7 @@
 /**
  *@hidden
  */
-export function cloneArray(array, deep?: boolean) {
+export function cloneArray(array: any[], deep?: boolean) {
     const arr = [];
     if (!array) {
         return arr;
@@ -226,6 +226,13 @@ export function isFirefox(): boolean {
     return firefoxBrowser;
 }
 
+/**
+ * @hidden
+ */
+export function isLeftClick(event: PointerEvent) {
+    return event.button === 0;
+}
+
 /** @hidden */
 export function isNavigationKey(key: string): boolean {
     return ['down', 'up', 'left', 'right', 'arrowdown', 'arrowup', 'arrowleft', 'arrowright',

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

@@ -1103,7 +1103,7 @@ class DataGenerator {
         for (let j = 0; j < numCols; j++) {
             cols.push({
                 field: j.toString(),
-                width: j % 8 < 2 ? 100 : (j % 6 + 0.25) * 125
+                width: j % 8 < 2 ? 100 : Math.floor((j % 6 + 0.25) * 125)
             });
         }
 

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

@@ -1195,8 +1195,8 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     }
 
     private _getItemSize(item, dimension: string): number {
-        const hasDimension = (item[dimension] !== null && item[dimension] !== undefined);
-        return hasDimension ? parseInt(item[dimension], 10) : this.igxForItemSize;
+        const dim = item[dimension];
+        return typeof dim === 'number' ? dim : this.igxForItemSize;
     }
 }
 

projects/igniteui-angular/src/lib/directives/toggle/README.md

@@ -99,7 +99,6 @@ Providing reference from custom component which has already been registered into
 | `igxToggleAction`| `IToggleView` \| `string` | Determines the target that have to be controled. |
 | `overlaySettings` | `OverlaySettings`| Passes `igxOverlay` settings for applicable targets (`igxToggle`) that control positioning, interaction and scroll behavior.
 | `igxToggleOutlet` | `IgxOverlayOutletDirective` \| `ElementRef`| Determines where the target overlay element should be attached. Shortcut for `overlaySettings.outlet`.
-| `closeOnOutsideClick`| `Boolean` | **Deprecated.** Determines if passed Component/Directive have to be closed when it is clicked outside. |
 
 # IgxOverlayOutlet Directive
 

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

@@ -20,7 +20,6 @@ import { filter, takeUntil } from 'rxjs/operators';
 import { Subscription, Subject, MonoTypeOperatorFunction } from 'rxjs';
 import { OverlayClosingEventArgs } from '../../services/overlay/utilities';
 import { CancelableEventArgs, CancelableBrowserEventArgs } from '../../core/utils';
-import { DeprecateProperty } from '../../core/deprecateDecorators';
 
 @Directive({
     exportAs: 'toggle',
@@ -346,30 +345,6 @@ export class IgxToggleActionDirective implements OnInit {
     @Input()
     public overlaySettings: OverlaySettings;
 
-    private _closeOnOutsideClick: boolean;
-    /**
-     * DEPRECATED. Determines whether the toggle should close when you click outside.
-     *
-     * ```typescript
-     * // get
-     * let closesOnOutsideClick = this.toggle.closeOnOutsideClick;
-     * ```
-     */
-    @Input()
-    @DeprecateProperty(`igxToggleAction 'closeOnOutsideClick' input is deprecated. Use 'overlaySettings' input object instead.`)
-    public get closeOnOutsideClick(): boolean {
-        return this._closeOnOutsideClick;
-    }
-    /**
-     * ```html
-     * <!--set-->
-     * <div igxToggleAction [closeOnOutsideClick]="'true'"></div>
-     * ```
-     */
-    public set closeOnOutsideClick(v: boolean) {
-        this._closeOnOutsideClick = v;
-    }
-
     /**
      * Determines where the toggle element overlay should be attached.
      *
@@ -424,9 +399,6 @@ export class IgxToggleActionDirective implements OnInit {
      */
     @HostListener('click')
     public onClick() {
-        if (this._closeOnOutsideClick !== undefined) {
-            this._overlayDefaults.closeOnOutsideClick = this._closeOnOutsideClick;
-        }
         if (this.outlet) {
             this._overlayDefaults.outlet = this.outlet;
         }

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

@@ -199,9 +199,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
     }
 
     private checkOutletAndOutsideClick() {
-        if (this.closeOnOutsideClick !== undefined) {
-            this._overlayDefaults.closeOnOutsideClick = this.closeOnOutsideClick;
-        }
         if (this.outlet) {
             this._overlayDefaults.outlet = this.outlet;
         }