Merge branch '9.1.x' of https://github.com/IgniteUI/igniteui-angular …

…into state-add-hiergrid-91x

.hooks/scripts/templates/default.js

@@ -11,7 +11,7 @@ var defaults = {
             otherLine: 80,
         },
         issuePattern: '(#)[0-9]+',
-        typesWithMandatoryIssue: [ 'feat', 'fix', 'test' ],
+        typesWithMandatoryIssue: [],
         guidelinesUrl: 'https://bit.ly/angular-guidelines',
         types: [
             'feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'build', 'ci', 'revert'
@@ -20,4 +20,4 @@ var defaults = {
     oldMessagePath: path.join('.git', 'COMMIT_EDITMSG_OLD')
 }
 
-module.exports = defaults;
+module.exports = defaults;

.hooks/scripts/utils/issue-validator.js

@@ -6,9 +6,9 @@ var matchType = require('../common').matchType,
 module.exports = (lines, options, errors) => {
     var ticket = new RegExp(options.issuePattern);
     var whetherIssueIsMandatory = false,
-        wheterMatchAnyIssueRef = false; 
+        wheterMatchAnyIssueRef = false;
+
 
-
     if (matchType(options.typesWithMandatoryIssue, lines[0])) {
         whetherIssueIsMandatory = true;
     }
@@ -27,7 +27,7 @@ module.exports = (lines, options, errors) => {
 
     if (whetherIssueIsMandatory && !wheterMatchAnyIssueRef) {
         errors.push(errorFactory(
-            `The issue reference for (${options.typesWithMandatoryIssue.join(', ')}) types is mandatory!\n`, 
+            `The issue reference for (${options.typesWithMandatoryIssue.join(', ')}) types is mandatory!\n`,
             "Please add at least one related issue. E.g: Closes #31, Closes #45"));
     }
-}
+}

CHANGELOG.md

@@ -7,7 +7,7 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxHierarchicalGrid`
     - `onGridInitialized` - New output has been exposed. Emitted after a grid is being initialized for the corresponding row island.
-
+-  **Behavioral Change** - When moving a column `DropPosition.None` is now acting like `DropPosition.AfterDropTarget`.
 ## 9.1.0
 
 ### General

ROADMAP.md

@@ -2,7 +2,22 @@
 
 # Current Milestone
 
-## Milestone 11 (Due by April 30th, 2020)
+## Milestone 12 (Due by August, 2020)
+
+1. Accept ISO 8601 Date-only string as input for igx-calendar and igx-datepicker [#6994](https://github.com/IgniteUI/igniteui-angular/issues/6994)
+2. igxCombo has to include caseSensitive property in filter search [#7282](https://github.com/IgniteUI/igniteui-angular/issues/7282)
+3. igxCombo default positioning strategy [#7225](https://github.com/IgniteUI/igniteui-angular/issues/7225)
+To Be Updated
+
+
+## Going down the road
+
+1. Tile Manager
+2. Visual Cell merging
+3. RTL Support across Ignite UI for Angular components
+# Previous Milestones 
+
+## Milestone 11 (Released June 2nd, 2020)
 
 1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
 2. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
@@ -14,14 +29,9 @@
 8. Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
 9. Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
 10. Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
-
-
-## Going down the road
-
-1. Tile Manager
-2. Visual Cell merging
-3. RTL Support across Ignite UI for Angular components
-# Previous Milestones 
+11. Action Strip [#6941](https://github.com/IgniteUI/igniteui-angular/issues/6941)
+12. Theme igx-component scrollbars [#6675](https://github.com/IgniteUI/igniteui-angular/issues/6675)
+13. Use CSS variables by default [#6803](https://github.com/IgniteUI/igniteui-angular/issues/6675)
 
 ## Milestone 10 (Released February 10th, 2020)
 

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -108,7 +108,8 @@
 
     %grid-excel-sort {
         display: block;
-        padding: rem(8px) rem(16px);
+        padding-top: rem(8px);
+        padding-bottom: rem(8px);
 
         header {
             color: igx-color($palette, 'grays', 700);
@@ -245,7 +246,8 @@
         }
 
         %grid-excel-sort {
-            padding: rem(8px);
+            padding-top: rem(8px);
+            padding-bottom: rem(8px);
         }
 
         %grid-excel-actions {
@@ -277,7 +279,8 @@
         }
 
         %grid-excel-sort {
-            padding: rem(4px);
+            padding-top: rem(4px);
+            padding-bottom: rem(4px);
 
             @extend %grid-excel-action--compact;
 
@@ -384,7 +387,7 @@
         align-items: center;
         padding: 0 rem(16px);
 
-        igx-input-group {
+        igx-select {
             flex-grow: 1;
             flex-basis: 40%;
             margin: rem(16px) 0;

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

@@ -970,6 +970,7 @@
     }
 
     %grid-tbody-scrollbar {
+        background: --var($theme, 'content-background');
         border-#{$left}: 1px solid igx-color($palette, 'grays', 300);
         position: relative;
     }

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -24,11 +24,11 @@
         <input
             class="igx-date-picker__input-date"
             igxInput
-            [igxTextSelection]="true"
             type="text"
             [value]="transformedDate"
             [igxMask]="inputMask"
             [placeholder]="mask"
+            [igxTextSelection]="true"
             [disabled]="disabled"
             [displayValuePipe]="displayValuePipe"
             [focusedValuePipe]="inputValuePipe"

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts

@@ -62,6 +62,8 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
     private _nextX;
     private _nextY;
     private parentElement;
+    private baseDeltaMultiplier = 1 / 120;
+    private firefoxDeltaMultiplier = 1 / 30;
 
     ngOnInit(): void {
         this._zone.runOutsideAngular(() => {
@@ -106,28 +108,30 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
         if (evt.wheelDeltaX) {
             /* Option supported on Chrome, Safari, Opera.
             /* 120 is default for mousewheel on these browsers. Other values are for trackpads */
-            scrollDeltaX = -evt.wheelDeltaX / 120;
+            scrollDeltaX = -evt.wheelDeltaX * this.baseDeltaMultiplier;
 
             if (-minWheelStep < scrollDeltaX && scrollDeltaX < minWheelStep) {
                 scrollDeltaX = Math.sign(scrollDeltaX) * minWheelStep;
             }
         } else if (evt.deltaX) {
             /* For other browsers that don't provide wheelDelta, use the deltaY to determine direction and pass default values. */
-            scrollDeltaX = this.calcAxisCoords(evt.deltaX, -1, 1);
+            const deltaScaledX = evt.deltaX * (evt.deltaMode === 0 ?  this.firefoxDeltaMultiplier : 1);
+            scrollDeltaX = this.calcAxisCoords(deltaScaledX, -1, 1);
         }
 
         /** Get delta for the Y axis */
         if (evt.wheelDeltaY) {
             /* Option supported on Chrome, Safari, Opera.
             /* 120 is default for mousewheel on these browsers. Other values are for trackpads */
-            scrollDeltaY = -evt.wheelDeltaY / 120;
+            scrollDeltaY = -evt.wheelDeltaY * this.baseDeltaMultiplier;
 
             if (-minWheelStep < scrollDeltaY && scrollDeltaY < minWheelStep) {
                 scrollDeltaY = Math.sign(scrollDeltaY) * minWheelStep;
             }
         } else if (evt.deltaY) {
             /* For other browsers that don't provide wheelDelta, use the deltaY to determine direction and pass default values. */
-            scrollDeltaY = this.calcAxisCoords(evt.deltaY, -1, 1);
+            const deltaScaledY = evt.deltaY * (evt.deltaMode === 0 ?  this.firefoxDeltaMultiplier : 1);
+            scrollDeltaY = this.calcAxisCoords(deltaScaledY, -1, 1);
         }
         if (scrollDeltaX && this.IgxScrollInertiaDirection === 'horizontal') {
             this._scrollToX(

projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts

@@ -187,7 +187,7 @@ export class IgxDropDownItemBaseDirective implements DoCheck {
      *
      * ```html
      *  <!--set-->
-     *  <igx-dropdown-item *ngFor="let item of items">
+     *  <igx-drop-down-item *ngFor="let item of items">
      *      <div *ngIf="items.indexOf(item) === 5; then item.isHeader = true">
      *          {{item.field}}
      *      </div>

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

@@ -760,6 +760,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             return;
         }
         if (!isLeftClick(event)) {
+            event.preventDefault();
+            this.setActiveNode();
             this.selectionService.addKeyboardRange();
             this.selectionService.initKeyboardState();
             this.selectionService.primaryButton = false;
@@ -844,14 +846,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     public activate(event: FocusEvent | KeyboardEvent) {
         const node = this.selectionNode;
-
-        if (this.grid.navigation.activeNode) {
-            Object.assign(this.grid.navigation.activeNode, {row: this.rowIndex, column: this.visibleColumnIndex});
-        } else {
-            const layout = this.column.columnLayoutChild ? this.grid.navigation.layout(this.visibleColumnIndex) : null;
-            this.grid.navigation.activeNode = { row: this.rowIndex, column: this.visibleColumnIndex, layout: layout };
-        }
-
+        this.setActiveNode();
         const shouldEmitSelection = !this.selectionService.isActiveNode(node);
 
         if (this.selectionService.primaryButton) {
@@ -916,4 +911,13 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
         meta.set('pinned', this.grid.isRecordPinnedByViewIndex(this.row.index));
         return meta;
     }
+
+    private setActiveNode() {
+        if (this.grid.navigation.activeNode) {
+            Object.assign(this.grid.navigation.activeNode, {row: this.rowIndex, column: this.visibleColumnIndex});
+        } else {
+            const layout = this.column.columnLayoutChild ? this.grid.navigation.layout(this.visibleColumnIndex) : null;
+            this.grid.navigation.activeNode = { row: this.rowIndex, column: this.visibleColumnIndex, layout: layout };
+        }
+    }
 }

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

@@ -1584,16 +1584,30 @@ export class IgxColumnComponent implements AfterContentInit {
         this._pinned = true;
         this.pinnedChange.emit(this._pinned);
         this._unpinnedIndex = grid._unpinnedColumns.indexOf(this);
-        index = index !== undefined ? index : grid._pinnedColumns.length;
+        const rootPinnedCols = grid._pinnedColumns.filter((c) => c.level === 0);
+        index = index !== undefined ? index : rootPinnedCols.length;
         const targetColumn = grid._pinnedColumns[index];
         const args = { column: this, insertAtIndex: index, isPinned: true };
         grid.onColumnPinning.emit(args);
 
         if (grid._pinnedColumns.indexOf(this) === -1) {
-            grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
+            if (!grid.hasColumnGroups) {
+                grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
+            } else {
+                // insert based only on root collection
+                rootPinnedCols.splice(args.insertAtIndex, 0, this);
+                let allPinned = [];
+                // re-create hierarchy
+                rootPinnedCols.forEach(group => {
+                    allPinned.push(group);
+                    allPinned = allPinned.concat(group.allChildren);
+                });
+                grid._pinnedColumns = allPinned;
+            }
 
             if (grid._unpinnedColumns.indexOf(this) !== -1) {
-                grid._unpinnedColumns.splice(grid._unpinnedColumns.indexOf(this), 1);
+                const childrenCount = this.allChildren.length;
+                grid._unpinnedColumns.splice(grid._unpinnedColumns.indexOf(this), 1 + childrenCount);
             }
         }
 
@@ -1650,13 +1664,16 @@ export class IgxColumnComponent implements AfterContentInit {
 
         const targetColumn = grid._unpinnedColumns[index];
 
-        grid._unpinnedColumns.splice(index, 0, this);
-        if (grid._pinnedColumns.indexOf(this) !== -1) {
-            grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
+        if (!hasIndex) {
+            grid._unpinnedColumns.splice(index, 0, this);
+            if (grid._pinnedColumns.indexOf(this) !== -1) {
+                grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
+            }
         }
 
+
         if (hasIndex) {
-            grid._moveColumns(this, targetColumn);
+            grid.moveColumn(this, targetColumn);
         }
 
         if (this.columnGroup) {

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html

@@ -1,37 +1,18 @@
-<igx-drop-down
-    #dropdownConditions
-    [maxHeight]="'200px'"
-    [width]="getInputWidth()"
-    [displayDensity]="displayDensity"
-    (onSelection)="onConditionsChanged($event)">
-    <igx-drop-down-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
-        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
-        <span>{{ translateCondition(condition) }}</span>
-    </igx-drop-down-item>
-</igx-drop-down>
-
-<igx-input-group
-    #inputGroupConditions
-    (click)="toggleCustomDialogDropDown()"
-    type="box"
-    [displayDensity]="displayDensity">
-
+<igx-select #dropdownConditions
+        type="box"
+        [displayDensity]="displayDensity"
+        [placeholder]="conditionsPlaceholder"
+        (onSelection)="onConditionsChanged($event)"
+        [overlaySettings]="dropDownOverlaySettings">
     <igx-prefix>
         <igx-icon *ngIf="expressionUI.expression.condition" fontSet="filtering-icons" [name]="getIconName()"></igx-icon>
         <igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
     </igx-prefix>
-
-    <input
-        igxInput
-        (keydown)="onInputConditionsKeyDown($event)"
-        tabindex="0"
-        [igxDropDownItemNavigation]="dropdownConditions"
-        [placeholder]="inputConditionsPlaceholder"
-        autocomplete="off"
-        [value]="getConditionName(expressionUI.expression.condition)"
-        [readonly]="true"
-    />
-</igx-input-group>
+    <igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
+        <igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
+        <span>{{translateCondition(condition)}}</span>
+    </igx-select-item>
+</igx-select>
 
 <igx-date-picker #datePicker mode="dropdown" [(ngModel)]="expressionUI.expression.searchVal" [locale]="grid.locale" [outlet]="grid.outletDirective">
     <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-value="value">
@@ -76,3 +57,8 @@
         {{ grid.resourceStrings.igx_grid_filter_operator_or }}
     </span>
 </igx-buttongroup>
+
+<div #overlayOutlet
+     igxOverlayOutlet
+     (pointerdown)="onOutletPointerDown($event)">
+</div>