fix(layout): trim attribute values before use (#10462)

Angular 1.6, which contains the 'don't trim white-space in attributes' commit (angular/angular.js@97bbf86),

fixes #10426.

Author: ThomasBurleson

src/core/services/layout/layout.js

@@ -360,7 +360,7 @@
       var value = validateAttributeValue(className, newValue || "");
       if ( angular.isDefined(value) ) {
         if (lastClass) element.removeClass(lastClass);
-        lastClass = !value ? className : className + "-" + value.replace(WHITESPACE, "-");
+        lastClass = !value ? className : className + "-" + value.trim().replace(WHITESPACE, "-");
         element.addClass(lastClass);
       }
     };
@@ -407,7 +407,7 @@
    * fallback value
    */
   function validateAttributeValue(className, value, updateFn) {
-    var origValue = value;
+    var origValue;
 
     if (!needsInterpolation(value)) {
       switch (className.replace(SUFFIXES,"")) {
@@ -452,7 +452,7 @@
       }
     }
 
-    return value;
+    return value ? value.trim() : "";
   }
 
   /**
@@ -479,7 +479,7 @@
 
   function getNormalizedAttrValue(className, attrs, defaultVal) {
     var normalizedAttr = attrs.$normalize(className);
-    return attrs[normalizedAttr] ? attrs[normalizedAttr].replace(WHITESPACE, "-") : defaultVal || null;
+    return attrs[normalizedAttr] ? attrs[normalizedAttr].trim().replace(WHITESPACE, "-") : defaultVal || null;
   }
 
   function findIn(item, list, replaceWith) {

src/core/services/layout/layout.spec.js

@@ -132,6 +132,13 @@ describe("Layout API ", function() {
         expect(element.hasClass('flex-gt-sm')).toBeTruthy();
       });
 
+      it('should support untrimmed attribute values with spaces', inject(function($rootScope, $compile) {
+        var scope = pageScope;
+        var element = angular.element($compile('<div flex-gt-xs="50 "></div>')(scope));
+
+        expect(element.hasClass('flex-gt-xs-50')).toBe(true);
+      }));
+
       it('should observe the attribute value and update the layout class(es)', inject(function($rootScope, $compile) {
         var scope = pageScope;
         var element = angular.element($compile('<div flex-gt-md="{{size}}"></div>')(scope));