The progressbar is not correctly visualized when it is templated by grid column.

[Aleksandyr]

Description

The progressbar is not correctly visualized when it is templated within grid cell.

• igniteui-angular version: 6.1.x
• browser: All

Steps to reproduce

1. Open some of the grid demos
2. Create some column with templated cell which contains progressbar
3. Observe the templated cell

Result

The progressbar exceeds or shrinks within the cell.

Expected result

The progressbar should be correctly rendered.

Attachments

[desig9stein]

@Aleksandyr in order for me to fix the problem I need some refactoring on the progress linear bar. The template has some extra wrapping div which needs to be removed and the class "progress-linear" needs to go to the host element, so instead of having this:

<igx-linear-bar>
     <div class="progress-linear" [class.progress-linear--striped]="striped">
           ...
     </div>
</igx-linear-bar>

It needs to look like this:

<igx-linear-bar class="progress-linear" [class.progress-linear--striped]="striped">
   ...
</igx-linear-bar>

The issue with the circular bar is fixed

@SlavUI The liniar progress bar needs some refactoring in order for this issue to be fixed.
Can you please take a look at the problem and decide when we should do the refactoring.