From afa13573ac775b2e8bd1c38943d727ce0e67f536 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 5 Feb 2017 15:50:13 +0100
Subject: [PATCH 1/3] fix(progress-bar): buffer animation not working in IE

Fixes an issue that caused IE to throw an XML error and not render the buffering animation. The problem was that we url-escape the SVG itself, but not the hex color which gets added later on, which causes the url to be invalid. This seems to be handled by most browsers automatically, but not IE.

Fixes #2881.
---
 src/lib/progress-bar/_progress-bar-theme.scss | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/lib/progress-bar/_progress-bar-theme.scss b/src/lib/progress-bar/_progress-bar-theme.scss
index 6251c8aeb569..d584df9fa775 100644
--- a/src/lib/progress-bar/_progress-bar-theme.scss
+++ b/src/lib/progress-bar/_progress-bar-theme.scss
@@ -48,23 +48,31 @@
 
 // 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.
+// Each of the following defines the SVG object for each of the class defined colors.
 //
-//  The string is a URL encoded version of:
+// 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>
+// <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) {
- $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' +
-    mat-color($palette, $hue) + '%27%2F%3E%3C%2Fsvg%3E';
+  $color: md-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);
 }

From e466d695f53059389fc37cc66d366f4f3672159d Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 5 Feb 2017 16:14:41 +0100
Subject: [PATCH 2/3] chore: fix linter error

---
 src/lib/progress-bar/_progress-bar-theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/progress-bar/_progress-bar-theme.scss b/src/lib/progress-bar/_progress-bar-theme.scss
index d584df9fa775..c0867a2709df 100644
--- a/src/lib/progress-bar/_progress-bar-theme.scss
+++ b/src/lib/progress-bar/_progress-bar-theme.scss
@@ -62,7 +62,7 @@
 
   // We also need to escape the hash in hex colors,
   // otherwise IE will throw an XML error.
-  @if str-index($color, "#") == 1 {
+  @if str-index($color, '#') == 1 {
     $color: '%23' + str-slice($color, 2);
   }
 

From 572307c9616bd82c94105b666ba13f04bf11b8a2 Mon Sep 17 00:00:00 2001
From: tinayuangao <yuan.gao.tina@gmail.com>
Date: Thu, 9 Feb 2017 13:48:54 -0800
Subject: [PATCH 3/3] Update from md-color to mat-color

---
 src/lib/progress-bar/_progress-bar-theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/progress-bar/_progress-bar-theme.scss b/src/lib/progress-bar/_progress-bar-theme.scss
index c0867a2709df..e759746a1793 100644
--- a/src/lib/progress-bar/_progress-bar-theme.scss
+++ b/src/lib/progress-bar/_progress-bar-theme.scss
@@ -58,7 +58,7 @@
 //   <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
 // </svg>
 @function _mat-progress-bar-buffer($palette, $hue) {
-  $color: md-color($palette, $hue) + '';
+  $color: mat-color($palette, $hue) + '';
 
   // We also need to escape the hash in hex colors,
   // otherwise IE will throw an XML error.