Merge branch '9.1.x' into mpopov/input-placeholder-position

Author: desig9stein

.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"));
     }
-}
+}

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;
 

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/filtering/excel-style/grid.excel-style-filtering.component.html

@@ -98,11 +98,10 @@ <h4>{{ column.header || column.field }}</h4>
         </div>
     </header>
 
-    <div *ngIf="column.sortable">
-        <ng-container *ngTemplateOutlet="sortingTemplate"></ng-container>
-    </div>
-
     <section class="igx-excel-filter__actions">
+        <div *ngIf="column.sortable">
+            <ng-container *ngTemplateOutlet="sortingTemplate"></ng-container>
+        </div>
 
         <div *ngIf="column.movable">
             <ng-container *ngTemplateOutlet="movingTemplate"></ng-container>