refactor(linear-bar): use *ngIf instead of ngClass in progress bar template

Author: ViktorSlavov

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

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

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>