Merge branch '8.2.x' into amarinov/issue6081_82

Author: zdrawku

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/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/progressbar/circularbar.component.spec.ts

@@ -322,7 +322,8 @@ describe('IgCircularBar', () => {
 
         componentInstance.progressbar.textVisibility = false;
         fixture.detectChanges();
-        expect(progressBarElem.children[2].classList.value).toMatch(CIRCULAR_HIDDEN_TEXT_CLASS);
+        // Text is not rendered
+        expect(progressBarElem.children[2]).toBeFalsy();
     });
 
     it('When indeterminate mode is on value should not be updated', () => {
@@ -375,8 +376,8 @@ describe('IgCircularBar', () => {
 
             componentInstance.progressbar.textVisibility = false;
             fixture.detectChanges();
-
-            expect(progressBarElem.children[2].classList.value).toMatch(CIRCULAR_HIDDEN_TEXT_CLASS);
+            // Text is not rendered
+            expect(progressBarElem.children[2]).toBeFalsy();
         }));
 
         it('The max representation should respond correctly to passed maximum value', fakeAsync(() => {

projects/igniteui-angular/src/lib/progressbar/templates/circular-bar.component.html

@@ -7,7 +7,7 @@
     [attr.aria-valuenow]="value">
     <circle class="igx-circular-bar__inner" cx="50" cy="50" r="46" />
     <circle #circle class="igx-circular-bar__outer" cx="50" cy="50" r="46" />
-    <text [class.igx-circular-bar__text--hidden]="!textVisibility" text-anchor="middle" x="50" y="60">
+    <text *ngIf="textVisibility" text-anchor="middle" x="50" y="60">
         <ng-container *ngTemplateOutlet="textTemplate ? textTemplate.template : defaultTextTemplate; context: context">
         </ng-container>
     </text>