fix(progress-bar): remove data url for CSP compliance (#8898)

Author: josephperrott

src/lib/progress-bar/_progress-bar-theme.scss

@@ -8,7 +8,7 @@
   $warn: map-get($theme, warn);
 
   .mat-progress-bar-background {
-    background-image: #{_mat-progress-bar-buffer($primary, lighter)};
+    fill: mat-color($primary, lighter);
   }
 
   .mat-progress-bar-buffer {
@@ -21,7 +21,7 @@
 
   .mat-progress-bar.mat-accent {
     .mat-progress-bar-background {
-      background-image: #{_mat-progress-bar-buffer($accent, lighter)};
+      fill: mat-color($accent, lighter);
     }
 
     .mat-progress-bar-buffer {
@@ -35,7 +35,7 @@
 
   .mat-progress-bar.mat-warn {
     .mat-progress-bar-background {
-      background-image: #{_mat-progress-bar-buffer($warn, lighter)};
+      fill: mat-color($warn, lighter);
     }
 
     .mat-progress-bar-buffer {
@@ -50,33 +50,3 @@
 
 @mixin mat-progress-bar-typography($config) { }
 
-// TODO(josephperrott): Find better way to inline svgs.
-// In buffer mode a repeated SVG object is used as a background.
-// Each of the following defines the SVG object for each of the class defined colors.
-//
-// The string is a URL encoded version of:
-//
-// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-//      version="1.1" x="0px" y="0px" enable-background="new 0 0 5 2"
-//      xml:space="preserve" viewBox="0 0 5 2" preserveAspectRatio="none slice">
-//   <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
-// </svg>
-@function _mat-progress-bar-buffer($palette, $hue) {
-  $color: mat-color($palette, $hue) + '';
-
-  // We also need to escape the hash in hex colors,
-  // otherwise IE will throw an XML error.
-  @if str-index($color, '#') == 1 {
-    $color: '%23' + str-slice($color, 2);
-  }
-
-  $result: '' +
-    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2F' +
-    'www.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2' +
-    '7%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%' +
-    '3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none' +
-    '%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
-    $color + '%27%2F%3E%3C%2Fsvg%3E';
-
-  @return url($result);
-}

src/lib/progress-bar/progress-bar.html

@@ -1,5 +1,15 @@
-<!-- The background div is named as such because it appears below the other divs and is not sized based on values. -->
-<div class="mat-progress-bar-background mat-progress-bar-element"></div>
+<!--
+  The background div is named as such because it appears below the other divs and is not sized based
+  on values.
+-->
+<svg width="100%" height="5" class="mat-progress-bar-background mat-progress-bar-element">
+  <defs>
+    <pattern [id]="progressbarId" x="5" y="0" width="10" height="5" patternUnits="userSpaceOnUse">
+      <circle cx="2.5" cy="2.5" r="2.5"/>
+    </pattern>
+  </defs>
+  <rect [attr.fill]="'url(#' + progressbarId + ')'" width="100%" height="100%"/>
+</svg>
 <div class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
 <div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()"></div>
 <div class="mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element"></div>

src/lib/progress-bar/progress-bar.scss

@@ -25,9 +25,9 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
   // The progress bar background is used to show the bubble animation scrolling behind a
   // buffering progress bar.
   .mat-progress-bar-background {
-    background-repeat: repeat-x;
-    background-size: 10px 4px;
-    display: none;
+    // The width is set to be 10px longer than the container as it will be translated 10px
+    // during the background scroll animation.
+    width: calc(100% + 10px);
   }
 
   // The progress bar buffer is the bar indicator showing the buffer value and is only visible
@@ -113,7 +113,6 @@ $mat-progress-bar-piece-animation-duration: 250ms !default;
       @include backface-visibility(hidden);
       animation: mat-progress-bar-background-scroll
           $mat-progress-bar-piece-animation-duration infinite linear;
-      display: block;
     }
   }
 }

src/lib/progress-bar/progress-bar.ts

@@ -5,7 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
 import {
   Component,
   ChangeDetectionStrategy,
@@ -26,6 +25,8 @@ export class MatProgressBarBase {
 
 export const _MatProgressBarMixinBase = mixinColor(MatProgressBarBase, 'primary');
 
+/** Counter used to generate unique IDs for progress bars. */
+let progressbarId = 0;
 
 /**
  * `<mat-progress-bar>` component.
@@ -76,6 +77,9 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements CanColor
    */
   @Input() mode: 'determinate' | 'indeterminate' | 'buffer' | 'query' = 'determinate';
 
+  /** The id of the progress bar. */
+  progressbarId = `mat-progress-bar-${progressbarId++}`;
+
   /** Gets the current transform value for the progress bar's primary indicator. */
   _primaryTransform() {
     const scale = this.value / 100;