Merge branch 'master' into pbozhinov/fixes-chips-not-being-reordered-ivy

Author: ChronosSF

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

@@ -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($switch-off-offset)});
         }
 
         &:hover {

projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts

@@ -3072,6 +3072,8 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
         grid.navigateTo(10, col.visibleIndex);
         await wait(DEBOUNCETIME);
         fix.detectChanges();
+        await wait(DEBOUNCETIME);
+        fix.detectChanges();
 
         // cell should be at right edge of grid
         cell =  grid.getCellByColumn(10, 'City');
@@ -3085,6 +3087,8 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
         grid.navigateTo(10, col.visibleIndex);
         await wait(DEBOUNCETIME);
         fix.detectChanges();
+        await wait(DEBOUNCETIME);
+        fix.detectChanges();
 
         // cell should be at left edge of grid
         cell =  grid.getCellByColumn(10, 'CompanyName');
@@ -3099,6 +3103,8 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
         grid.navigateTo(9, col.visibleIndex);
         await wait(DEBOUNCETIME);
         fix.detectChanges();
+        await wait(DEBOUNCETIME);
+        fix.detectChanges();
 
         // cell should be at right edge of grid
         cell =  grid.getCellByColumn(9, 'ID');

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>