Merge branch '8.2.x' into nalipiev/polyfill-8.2.x

Author: Lipata

CHANGELOG.md

@@ -1,6 +1,23 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+## 8.2.8
+### New Features
+- `IgxRowDragGhost` directive is added. It allows providing a custom template for the drag ghost when dragging a row.
+```html
+    <igx-grid #grid1 [data]="remote | async" primaryKey="ProductID"
+        [rowDraggable]="true">
+        <igx-column field="ProductName"></igx-column>
+        <igx-column field="ProductID"></igx-column>
+        <igx-column field="UnitsInStock"></igx-column>
+        <ng-template let-data igxRowDragGhost>
+            <div>
+                Moving {{data.ProductName}}!
+            </div>
+        </ng-template>
+    </igx-grid>
+```
+
 ## 8.2.6
 ### New Features
 - `IgxSelectItem`

projects/igniteui-angular/migrations/update-8_2_6/index.spec.ts

@@ -67,7 +67,9 @@ describe('Update 8.2.6', () => {
     it('should update igx-grid-paginator-theme', done => {
         appTree.create(
             '/testSrc/appPrefix/component/test.component.scss',
-            `$dark-grid-paginator: igx-grid-paginator-theme($color: black);
+            `@import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-component';
+            @import '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme';
+            $dark-grid-paginator: igx-grid-paginator-theme($color: black);
             @include igx-grid-paginator($dark-grid-paginator);
             .igx-grid-paginator__pager {
                 @include igx-button($dark-button);
@@ -77,7 +79,9 @@ describe('Update 8.2.6', () => {
         const tree = schematicRunner.runSchematic('migration-12', {}, appTree);
         expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss'))
         .toEqual(
-            `$dark-grid-paginator: igx-paginator-theme($color: black);
+            `@import '~igniteui-angular/lib/core/styles/components/paginator/paginator-component';
+            @import '~igniteui-angular/lib/core/styles/components/paginator/paginator-theme';
+            $dark-grid-paginator: igx-paginator-theme($color: black);
             @include igx-paginator($dark-grid-paginator);
             .igx-grid-paginator__pager {
                 @include igx-button($dark-button);

projects/igniteui-angular/migrations/update-8_2_6/index.ts

@@ -29,11 +29,17 @@ export default function(): Rule {
         '$_square-shape-pagination'];
 
         let globalStyleExt: string;
+        const gridPaginatorComponentImport = '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-component';
+        const gridPaginatorThemeImport = '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme';
+        const paginatorComponentImport = '~igniteui-angular/lib/core/styles/components/paginator/paginator-component';
+        const paginatorThemeImport = '~igniteui-angular/lib/core/styles/components/paginator/paginator-theme';
         const config = getWorkspace(host);
         const projects = getProjects(config);
 
         context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
+        const update = new UpdateChanges(__dirname, host, context);
+
         if (config.schematics && config.schematics['@schematics/angular:component']) {
             // updated projects have global prefix rather than per-project:
             globalStyleExt = config.schematics['@schematics/angular:component'].styleext;
@@ -56,12 +62,19 @@ export default function(): Rule {
                             content = content.split(n).join(newThemes[i]);
                         }
                     });
+                    if (content.indexOf(gridPaginatorComponentImport) !== -1) {
+                        content = content.replace(gridPaginatorComponentImport, paginatorComponentImport);
+                        host.overwrite(path, content);
+                    }
+                    if (content.indexOf(gridPaginatorThemeImport) !== -1) {
+                        content = content.replace(gridPaginatorThemeImport, paginatorThemeImport);
+                        host.overwrite(path, content);
+                    }
                     host.overwrite(path, content);
                 }
             });
         }
 
-        const update = new UpdateChanges(__dirname, host, context);
         update.applyChanges();
     };
 }

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

@@ -115,7 +115,6 @@
 
     @include e(text, $m: hidden) {
         @extend %circular-text !optional;
-        @extend %circular-text--hidden !optional;
     }
 
     @include m(indeterminate) {
@@ -124,9 +123,5 @@
         @include e(outer) {
             @extend %circular-outer--indeterminate !optional;
         }
-
-        @include e(text) {
-            @extend %circular-text--hidden !optional;
-        }
     }
 }

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

@@ -311,10 +311,6 @@
         fill: --var($theme, 'text-color');
     }
 
-    %circular-text--hidden {
-        visibility: hidden;
-    }
-
     @include keyframes('indeterminate-accordion') {
         from {
             stroke-dashoffset: 578;

projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss

@@ -173,7 +173,7 @@
     ), map-get($theme, variant));
 
     $switch-off-offset: map-get((
-        material: 1px,
+        material: -1px,
         fluent: $switch-thumb-width / 3
     ), map-get($theme, variant));
 
@@ -275,11 +275,11 @@
         transition: $input-transition;
 
         @include if-ltr() {
-            transform: translateX(-#{rem($switch-off-offset)});
+            transform: translateX(#{rem($switch-off-offset)});
         }
 
         @include if-rtl() {
-            transform: translateX(#{rem($switch-off-offset)});
+            transform: translateX(#{rem(-1 * $switch-off-offset)});
         }
 
         &:hover {

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -151,6 +151,8 @@ export class IgxDragLocation {
 })
 export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
+    protected ghostContext: any = null;
+
     /**
      * - Save data inside the `igxDrag` directive. This can be set when instancing `igxDrag` on an element.
      * ```html
@@ -1099,7 +1101,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
         let dynamicGhostRef;
         if (this.ghostTemplate) {
-            dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate);
+            dynamicGhostRef = this.viewContainer.createEmbeddedView(this.ghostTemplate, this.ghostContext);
             this.ghostElement = dynamicGhostRef.rootNodes[0];
         } else {
             this.ghostElement = node ? node.cloneNode(true) : this.element.nativeElement.cloneNode(true);

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

@@ -746,6 +746,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         const diffs = [];
         let totalDiff = 0;
         const l = this._embeddedViews.length;
+        this._embeddedViews.filter(view => !view.destroyed).forEach(view => view.detectChanges());
         const rNodes = this._embeddedViews.map(view => view.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE));
         for (let i = 0; i < l; i++) {
             const rNode = rNodes[i];

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

@@ -103,6 +103,7 @@ import { DeprecateProperty } from '../core/deprecateDecorators';
 import { IFilteringStrategy } from '../data-operations/filtering-strategy';
 import { IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective,
      IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective } from './grid/grid.directives';
+import { IgxRowDragGhostDirective  } from './row-drag.directive';
 import { GridKeydownTargetType, GridSelectionMode, GridSummaryPosition, GridSummaryCalculationMode, FilterMode } from './common/enums';
 
 const MINIMUM_COLUMN_WIDTH = 136;
@@ -1937,6 +1938,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     @ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false })
     public rowSelectorsTemplates: QueryList<IgxRowSelectorDirective>;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    @ContentChildren(IgxRowDragGhostDirective, { read: TemplateRef, descendants: false })
+    public dragGhostCustomTemplates: QueryList<TemplateRef<any>>;
+
     /**
      * @hidden
      */
@@ -3183,6 +3191,18 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * @hidden
+     * @internal
+    */
+    public getDragGhostCustomTemplate() {
+        if (this.dragGhostCustomTemplates && this.dragGhostCustomTemplates.first) {
+            return this.dragGhostCustomTemplates.first;
+        }
+
+        return null;
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -2,7 +2,7 @@
     <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{grid.groupingExpressions.length}}"></div>
 </ng-container>
 <ng-container *ngIf="rowDraggable">
-    <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()">
+    <div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.getDragGhostCustomTemplate()">
         <ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
     </div>
 </ng-container>