Merge branch 'master' into editing-cell-tab-ime

Author: zdrawku

CHANGELOG.md

@@ -15,6 +15,7 @@ All notable changes for each version of this project will be documented in this
     - `IgxMonthPickerBase` -> `IgxMonthPickerBaseDirective`
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Breaking Change** - Hierarchical grid children no longer use the same `IgxTransactionService` instance and transaction handling should be modified to address each grid's transactions separately.
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
     - `igxGridState` directive added to make it easy for developers to save and restore the grid state. The directive exposes the `getState` and `setState` methods to save/restore the state and an `options` input property to exclude features.
 - `IgxCarousel`:
@@ -81,6 +82,26 @@ All notable changes for each version of this project will be documented in this
 - `IgxSelect`: 
     - adding `IgxSelectHeaderDirective` and `IgxSelectFooterDirective`. These can be used to provide a custom header, respectively footer templates for the `igxSelect` drop-down list. If there are no templates marked with these directives - no default templates will be used so the drop-down list will not have header nor footer.
 
+- `IgxCircularProgressBar`:
+    - added `IgxProgressBarGradientDirective` to allow providing custom circular progress SVG gradients. Providing a custom gradient via a template is as easy as writing:
+    ```html
+    <igx-circular-bar [value]="77">
+        <ng-template igxProgressBarGradient let-id>
+            <svg:linearGradient [id]="id" gradientTransform="rotate(90)">
+                <stop offset="0%"   stop-color="#05a"/>
+                <stop offset="100%" stop-color="#0a5"/>
+            </svg:linearGradient>
+        </ng-template>
+    </igx-circular-bar>
+    ```
+    - changed the `igx-progress-circular-theme` to accept a list of 2 colors for the `$progress-circle-color` argument, making it easier to modify the default gradient:
+    ```scss
+    $theme: igx-progress-circular-theme(
+        $progress-circle-color: red blue
+    );
+
+    @include igx-progress-circular($theme);
+    ```
 
 ## 8.2.6
 

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

@@ -21,12 +21,12 @@ import {
     Injectable
 } from '@angular/core';
 import { IgxIconModule } from '../icon/index';
-import { IBaseEventArgs } from '../core/utils';
+import { IBaseEventArgs, PlatformUtil } from '../core/utils';
 import { Subject, merge } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives';
 import { useAnimation, AnimationBuilder, AnimationPlayer, AnimationReferenceMetadata } from '@angular/animations';
-import { slideInLeft, fadeIn, rotateInCenter } from '../animations/main';
+import { slideInLeft, fadeIn } from '../animations/main';
 import { IgxSlideComponent, Direction } from './slide.component';
 import { ICarouselResourceStrings } from '../core/i18n/carousel-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
@@ -436,7 +436,8 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
     private animationPosition = 0;
     private newDuration = 0;
 
-    constructor(private element: ElementRef, private iterableDiffers: IterableDiffers, private builder: AnimationBuilder) {
+    constructor(private element: ElementRef, private iterableDiffers: IterableDiffers,
+            private builder: AnimationBuilder, private platformUtil: PlatformUtil) {
         this.differ = this.iterableDiffers.find([]).create(null);
     }
 
@@ -887,7 +888,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
     private restartInterval() {
         this.resetInterval();
 
-        if (!isNaN(this.interval) && this.interval > 0) {
+        if (!isNaN(this.interval) && this.interval > 0 && this.platformUtil.isBrowser) {
             this.lastInterval = setInterval(() => {
                 const tick = +this.interval;
                 if (this.playing && this.total && !isNaN(tick) && tick > 0) {

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

@@ -2064,6 +2064,10 @@
     %igx-grid__loading-outlet {
         z-index: 10003;
 
+        > %overlay-wrapper--modal {
+            background: none;
+        }
+
         %circular-display {
             width: rem(50);
             height: rem(50);

projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-component.scss

@@ -113,6 +113,14 @@
         @extend %circular-text !optional;
     }
 
+    @include e(gradient-start) {
+        @extend %circular-gradient-start !optional;
+    }
+
+    @include e(gradient-end) {
+        @extend %circular-gradient-end !optional;
+    }
+
     @include m(indeterminate) {
         @extend %circular-display--indeterminate !optional;
 

projects/igniteui-angular/src/lib/core/styles/components/progress/_progress-theme.scss

@@ -206,7 +206,7 @@
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
 ///
 /// @param {Color} $base-circle-color [null] - The base circle fill color.
-/// @param {Color} $progress-circle-color [null] - The progress circle fill color.
+/// @param {Color | List<Color>} $progress-circle-color [null] - The progress circle fill color.
 /// @param {Color} $text-color [null] - The value text color.
 ///
 /// @requires $default-palette
@@ -226,11 +226,13 @@
 
     $base-circle-color: null,
     $progress-circle-color: null,
+
     $text-color: null
 ) {
     $name: 'igx-circular-bar';
     $circular-bar-schema: ();
 
+
     @if map-has-key($schema, $name) {
         $circular-bar-schema: map-get($schema, $name);
     } @else {
@@ -239,11 +241,25 @@
 
     $theme: apply-palette($circular-bar-schema, $palette);
 
+    $progress-circle-color-start: map-get($theme, 'progress-circle-color');
+    $progress-circle-color-end: map-get($theme, 'progress-circle-color');
+
+    @if type-of($progress-circle-color) == 'color' {
+        $progress-circle-color-start: $progress-circle-color;
+        $progress-circle-color-end: $progress-circle-color;
+    }
+
+    @if length($progress-circle-color) == 2 {
+        $progress-circle-color-start: nth($progress-circle-color, 1);
+        $progress-circle-color-end: nth($progress-circle-color, 2);
+    }
+
     @return extend($theme, (
         name: $name,
         palette: $palette,
         base-circle-color: $base-circle-color,
-        progress-circle-color: $progress-circle-color,
+        progress-circle-color-start: $progress-circle-color-start,
+        progress-circle-color-end: $progress-circle-color-end,
         text-color: $text-color
     ));
 }
@@ -260,6 +276,7 @@
 
     // @debug $theme;
 
+    $palette: map-get($theme, 'palette');
     $circular-value-fs: rem(32px, 16px);
     $circular-value-fw: 600;
     $animation-direction: if-ltr(normal, reverse);
@@ -291,7 +308,6 @@
 
     %circular-outer {
         fill: transparent;
-        stroke: --var($theme, 'progress-circle-color');
         stroke-width: 4;
         stroke-dashoffset: 289;
         stroke-dasharray: 289;
@@ -315,6 +331,14 @@
         visibility: hidden;
     }
 
+    %circular-gradient-start {
+        stop-color: --var($theme, 'progress-circle-color-start');
+    }
+
+    %circular-gradient-end {
+        stop-color: --var($theme, 'progress-circle-color-end');
+    }
+
     @include keyframes('indeterminate-accordion') {
         from {
             stroke-dashoffset: 578;

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss

@@ -47,6 +47,11 @@
         @extend %time-picker__minuteList !optional;
     }
 
+    // SECONDS
+    @include e(secondsList) {
+        @extend %time-picker__secondsList !optional;
+    }
+
     // AM PM
     @include e(ampmList) {
         @extend %time-picker__ampmList !optional;

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -203,6 +203,10 @@
         }
     }
 
+    %time-picker__secondsList {
+        text-align: center;
+    }
+
     %time-picker__ampmList {
         display: flex;
         flex-direction: column;

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

@@ -181,6 +181,13 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     @Output()
     public onChunkLoad = new EventEmitter<IForOfState>();
 
+    /**
+     * @hidden @internal
+     * An event that is emitted when scrollbar visibility has changed.
+     */
+    @Output()
+    public onScrollbarVisibilityChanged = new EventEmitter<any>();
+
     /**
      * An event that is emitted after the rendered content size of the igxForOf has been changed.
     */
@@ -1155,10 +1162,11 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     protected _recalcScrollBarSize() {
         const count = this.isRemote ? this.totalItemCount : (this.igxForOf ? this.igxForOf.length : 0);
         this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
+        const scrollable = this.isScrollable();
         if (this.igxForScrollOrientation === 'horizontal') {
             const totalWidth = this.igxForContainerSize ? this.initSizesCache(this.igxForOf) : 0;
             this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
-            this.scrollComponent.nativeElement.children[0].style.width = totalWidth + 'px';
+            this.scrollComponent.size = totalWidth;
             if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
                 this.scrollPosition = 0;
             }
@@ -1170,6 +1178,10 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 this.scrollPosition = 0;
             }
         }
+        if (scrollable !== this.isScrollable()) {
+            // scrollbar visibility has changed
+            this.onScrollbarVisibilityChanged.emit();
+        }
     }
 
     protected _calcHeight(): number {

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -132,7 +132,7 @@ import { IgxGridToolbarCustomContentDirective } from './toolbar/toolbar.directiv
 import { IgxColumnComponent } from './columns/column.component';
 import { IgxColumnGroupComponent } from './columns/column-group.component';
 import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
-import { IgxRowDragGhostDirective  } from './row-drag.directive';
+import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective  } from './row-drag.directive';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
@@ -154,6 +154,7 @@ export const IgxGridTransaction = new InjectionToken<string>('IgxGridTransaction
 export class IgxGridBaseDirective extends DisplayDensityBase implements
     OnInit, DoCheck, OnDestroy, AfterContentInit, AfterViewInit {
     private _scrollWidth: number;
+    private _customDragIndicatorIconTemplate: TemplateRef<any>;
     protected _init = true;
     private _cdrRequests = false;
     protected _cdrRequestRepaint = false;
@@ -330,7 +331,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * Emitted before filtering is performed.
+     * Emitted after filtering is performed.
      * Returns the filtering expressions tree of the column for which filtering was performed.
      * ```typescript
      * filteringExprTreeChange(event: IFilteringExpressionsTree){
@@ -347,7 +348,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     public filteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
 
     /**
-     * Emitted before advanced filtering is performed.
+     * Emitted after advanced filtering is performed.
      * Returns the advanced filtering expressions tree.
      * ```typescript
      * advancedFilteringExprTreeChange(event: IFilteringExpressionsTree){
@@ -2089,6 +2090,24 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
    @ContentChild(IgxHeaderCollapseIndicatorDirective, { read: TemplateRef })
    public headerCollapseIndicatorTemplate: TemplateRef<any> = null;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @ContentChildren(IgxDragIndicatorIconDirective, { read: TemplateRef, descendants: false })
+    public dragIndicatorIconTemplates: QueryList<TemplateRef<any>>;
+
+    /**
+    * The custom template, if any, that should be used when rendering the row drag indicator icon
+    */
+    public get dragIndicatorIconTemplate(): TemplateRef<any> {
+        return this._customDragIndicatorIconTemplate || this.dragIndicatorIconTemplates.first;
+    }
+
+    public set dragIndicatorIconTemplate(val: TemplateRef<any>) {
+        this._customDragIndicatorIconTemplate = val;
+    }
+
     /**
      * @hidden
      */
@@ -3017,9 +3036,19 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         });
 
         this.verticalScrollContainer.onDataChanging.pipe(destructor, filter(() => !this._init)).subscribe(($event) => {
-            this.calculateGridHeight();
-            $event.containerSize = this.calcHeight;
+            const shouldRecalcSize = this.isPercentHeight &&
+             ( !this.calcHeight || this.calcHeight === this.getDataBasedBodyHeight() ||
+              this.calcHeight === this.renderedRowHeight * this._defaultTargetRecordNumber);
+            if (shouldRecalcSize) {
+                this.calculateGridHeight();
+                $event.containerSize = this.calcHeight;
+            }
             this.evaluateLoadingState();
+        });
+
+        this.verticalScrollContainer.onScrollbarVisibilityChanged.pipe(destructor, filter(() => !this._init)).subscribe(() => {
+            // called to recalc all widths that may have changes as a result of
+            // the vert. scrollbar showing/hiding
             this.notifyChanges(true);
         });
 

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -356,21 +356,15 @@ export class IgxGridNavigationService {
 
     public goToFirstCell() {
         const verticalScroll = this.grid.verticalScrollContainer.getScroll();
-        const horizontalScroll = this.grid.dataRowList.first.virtDirRow.getScroll();
         if (verticalScroll.scrollTop === 0) {
             this.onKeydownHome(this.grid.dataRowList.first.index);
         } else {
-            if (!horizontalScroll.clientWidth || parseInt(horizontalScroll.scrollLeft, 10) <= 1 || this.grid.pinnedColumns.length) {
-                this.navigateTop(0);
-            } else {
-               this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
-                this.horizontalScroll(this.grid.dataRowList.first.index).scrollTo(0);
-                this.grid.parentVirtDir.onChunkLoad
-                    .pipe(first())
-                    .subscribe(() => {
-                        this.navigateTop(0);
-                    });
-            }
+            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
+            this.grid.verticalScrollContainer.scrollTo(0);
+            this.grid.verticalScrollContainer.onChunkLoad
+                .pipe(first()).subscribe(() => {
+                    this.onKeydownHome(this.grid.dataRowList.first.index);
+                });
         }
     }