royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From pio...@apache.org
Subject [royale-asjs] 02/02: Apply computeFinalClassNames function to MDL classes (reference #124)
Date Fri, 02 Mar 2018 17:13:17 GMT
This is an automated email from the ASF dual-hosted git repository.

piotrz pushed a commit to branch feature/type_names_class_name_issue124
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit 75fa06d2853cf66008976d98899bd3c055917bcc
Author: Piotr Zarzycki <piotrzarzycki21@gmail.com>
AuthorDate: Fri Mar 2 18:13:05 2018 +0100

    Apply computeFinalClassNames function to MDL classes (reference #124)
---
 .../projects/Basic/src/main/royale/BasicClasses.as |   1 -
 .../main/royale/org/apache/royale/core/UIBase.as   |   2 +-
 .../royale/html/util/addOrReplaceClassName.as      |  63 --------
 .../src/main/royale/org/apache/royale/mdl/Card.as  |   9 +-
 .../main/royale/org/apache/royale/mdl/CheckBox.as  |  27 +++-
 .../royale/org/apache/royale/mdl/DialogActions.as  |  26 +++-
 .../royale/org/apache/royale/mdl/DropDownList.as   |   4 +-
 .../main/royale/org/apache/royale/mdl/Footer.as    |  12 +-
 .../org/apache/royale/mdl/FooterBottomSection.as   |  15 +-
 .../org/apache/royale/mdl/FooterLeftSection.as     |  15 +-
 .../royale/org/apache/royale/mdl/FooterLinkList.as |  10 +-
 .../org/apache/royale/mdl/FooterMiddleSection.as   |   9 +-
 .../org/apache/royale/mdl/FooterRightSection.as    |  10 +-
 .../org/apache/royale/mdl/FooterSocialButton.as    |   9 +-
 .../org/apache/royale/mdl/FooterTopSection.as      |   9 +-
 .../src/main/royale/org/apache/royale/mdl/Grid.as  |  25 ++-
 .../main/royale/org/apache/royale/mdl/GridCell.as  | 167 +++++++++++++++------
 .../main/royale/org/apache/royale/mdl/Header.as    |  43 ++++--
 .../royale/org/apache/royale/mdl/IconToggle.as     |  24 ++-
 .../src/main/royale/org/apache/royale/mdl/Menu.as  |  31 +++-
 .../org/apache/royale/mdl/NavigationLayout.as      |  33 ++--
 .../apache/royale/mdl/NavigationLayoutContent.as   |   6 -
 .../royale/org/apache/royale/mdl/ProgressBar.as    |  24 ++-
 .../royale/org/apache/royale/mdl/RadioButton.as    |  31 ++--
 .../main/royale/org/apache/royale/mdl/Spacer.as    |   6 -
 .../main/royale/org/apache/royale/mdl/Spinner.as   |  40 +++--
 .../main/royale/org/apache/royale/mdl/Switch.as    |  24 ++-
 .../main/royale/org/apache/royale/mdl/TabBar.as    |  29 +++-
 .../royale/org/apache/royale/mdl/TabBarButton.as   |  28 +++-
 .../royale/org/apache/royale/mdl/TabBarPanel.as    |  26 +++-
 .../src/main/royale/org/apache/royale/mdl/Table.as |  33 +++-
 .../royale/org/apache/royale/mdl/TableColumn.as    |  34 +++--
 .../src/main/royale/org/apache/royale/mdl/Tabs.as  |  24 ++-
 .../src/main/royale/org/apache/royale/mdl/Toast.as |   1 -
 .../apache/royale/mdl/supportClasses/CardInner.as  |  33 ++--
 .../royale/mdl/supportClasses/MaterialIconBase.as  |  74 +++++----
 .../supportClasses/TabBarButtonItemRendererBase.as |  24 ++-
 .../mdl/supportClasses/TabItemRendererBase.as      |  24 ++-
 .../royale/mdl/supportClasses/TextFieldBase.as     |  37 ++---
 39 files changed, 621 insertions(+), 421 deletions(-)

diff --git a/frameworks/projects/Basic/src/main/royale/BasicClasses.as b/frameworks/projects/Basic/src/main/royale/BasicClasses.as
index 6d73af9..d0d8e2b 100644
--- a/frameworks/projects/Basic/src/main/royale/BasicClasses.as
+++ b/frameworks/projects/Basic/src/main/royale/BasicClasses.as
@@ -31,7 +31,6 @@ internal class BasicClasses
 	{
 		import org.apache.royale.html.util.addElementToWrapper; addElementToWrapper;
 	}
-    import org.apache.royale.html.util.addOrReplaceClassName; addOrReplaceClassName;
     import org.apache.royale.html.ToolTip; ToolTip;
 	import org.apache.royale.html.accessories.NumericOnlyTextInputBead; NumericOnlyTextInputBead;
     import org.apache.royale.html.beads.DispatchInputFinishedBead; DispatchInputFinishedBead;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
index 5937eb2..77ed10b 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
@@ -1062,7 +1062,7 @@ package org.apache.royale.core
 		COMPILE::JS
         protected function computeFinalClassNames():String
 		{
-            return _className ? _className + " " : "" + typeNames ? typeNames : "";
+            return (_className ? _className + " " : "") + (typeNames ? typeNames : "");
 		}
 
         COMPILE::JS
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as
deleted file mode 100644
index e1a87e0..0000000
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as
+++ /dev/null
@@ -1,63 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.util
-{
-    import org.apache.royale.utils.StringTrimmer;
-
-    /**
-     * Adding or replacing css class in provided className.
-     *
-     * @param className The value of components className
-     * @param newName New css class name which will be added or replace the old one in className
-     * @param oldName Old css class name which will be replaced by newName
-     *
-     * @return The resulting className with added or replaced css class specified by newName
-     */
-    public function addOrReplaceClassName(className:String, newName:String, oldName:String = null):String
-    {
-        if (!newName)
-        {
-            return className;
-        }
-
-        if (newName && oldName && className)
-        {
-            var trimmedOldName:String = StringTrimmer.trim(oldName);
-            if (className.indexOf(trimmedOldName) > -1)
-            {
-                return className.replace(trimmedOldName, StringTrimmer.trim(newName));
-            }
-            else
-            {
-                return className += " " + StringTrimmer.trim(newName);
-            }
-        }
-
-        var isClassNameEmpty:Boolean = !className;
-
-        if (isClassNameEmpty || !oldName)
-        {
-            if (isClassNameEmpty) className = "";
-
-            return className += " " + StringTrimmer.trim(newName);
-        }
-
-        return className;
-    }
-}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as
index f621393..22633f3 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as
@@ -22,7 +22,6 @@ package org.apache.royale.mdl
 
 	COMPILE::JS
     {
-        import org.apache.royale.html.util.addOrReplaceClassName;
         import org.apache.royale.core.CSSClassList;
     }
 	/**
@@ -91,8 +90,12 @@ package org.apache.royale.mdl
                 {
                     if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16)
                     {
-						var classVal:String = "mdl-shadow--" + value + "dp";
-						value ? _classList.add(classVal) : _classList.remove(classVal);
+                        var classVal:String = "mdl-shadow--" + _shadow + "dp";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-shadow--" + value + "dp";
+						_classList.add(classVal);
+
                         _shadow = value;
 
                         setClassName(computeFinalClassNames());
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as
index aa1ed97..e1610bb 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as
@@ -28,7 +28,7 @@ package org.apache.royale.mdl
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.events.Event;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     /**
@@ -61,12 +61,20 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-checkbox mdl-js-checkbox";
 
             addBead(new UpgradeElement());
             addBead(new UpgradeChildren(["mdl-checkbox__ripple-container"]));
         }
-        
+
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         COMPILE::JS
         protected var input:HTMLInputElement;
 
@@ -117,6 +125,7 @@ package org.apache.royale.mdl
         {
             return _ripple;
         }
+
         public function set ripple(value:Boolean):void
         {
             if (_ripple != value)
@@ -125,11 +134,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -263,6 +270,12 @@ package org.apache.royale.mdl
                 dispatchEvent(new Event(Event.CHANGE));
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as
index c72e876..34686cf 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -50,10 +50,19 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-dialog__actions";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		protected var _fullWidth:Boolean = false;
+
         /**
 		 *  A boolean flag to activate "mdl-dialog__actions--full-width" effect selector.
 		 *  Modifies the actions to each take the full width of the container.
@@ -69,6 +78,7 @@ package org.apache.royale.mdl
         {
             return _fullWidth;
         }
+
         public function set fullWidth(value:Boolean):void
         {
             if (_fullWidth != value)
@@ -77,13 +87,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-dialog__actions--full-width");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-dialog__actions--full-width");
-                    }
+                    var classVal:String = "mdl-dialog__actions--full-width";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as
index 00d7333..a4d3369 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as
@@ -31,7 +31,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
     [Event(name="change", type="org.apache.royale.events.Event")]
@@ -207,8 +206,7 @@ package org.apache.royale.mdl
         {
 			element = super.createElement();
 
-            className = addOrReplaceClassName(className, "mdl-textfield--floating-label");
-
+            element.classList.add("mdl-textfield--floating-label");
             return element;
         }
     }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as
index eb1c4e5..b111f5f 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as
@@ -24,7 +24,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -75,6 +74,7 @@ package org.apache.royale.mdl
         {
             return _mini;
         }
+
         public function set mini(value:Boolean):void
         {
             _mini = value;
@@ -82,15 +82,11 @@ package org.apache.royale.mdl
 			COMPILE::JS
             {
 				element.classList.remove(typeNames);
-				if(!_mini)
-				{
-                    element.classList.add("mdl-mega-footer");
-                    className = addOrReplaceClassName(className, "mdl-mega-footer");
-				}
-				else
+
+				if (_mini)
 				{
                     typeNames = "mdl-mini-footer";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer");
+                    setClassName(computeFinalClassNames());
 				}
             }
         }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as
index bc3e0d2..0f474e3 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -70,16 +69,12 @@ package org.apache.royale.mdl
 
 			if(parent is Footer)
 			{
-				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__bottom-section");
-				}
-				else
-				{
+                element.classList.remove(typeNames);
+                if (Footer(parent).mini)
+                {
                     typeNames = "mdl-mini-footer__bottom-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__bottom-section");
-				}
+                    setClassName(computeFinalClassNames());
+                }
 			}
 			else
 			{
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as
index 8644d25..6bb90ea 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -70,16 +69,12 @@ package org.apache.royale.mdl
 
 			if(parent is Footer)
 			{
-				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__left-section");
-				}
-				else
-				{
+                element.classList.remove(typeNames);
+                if (Footer(parent).mini)
+                {
                     typeNames = "mdl-mini-footer__left-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__left-section");
-				}
+                    setClassName(computeFinalClassNames());
+                }
 
 			}
 			else if(parent is IFooterSection)
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as
index b4efb8f..a1eec49 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -85,15 +84,10 @@ package org.apache.royale.mdl
 				if(UIBase(parentSection).parent is Footer)
 				{
 					element.classList.remove(typeNames);
-					if(!Footer(UIBase(parentSection).parent).mini)
-					{
-                        className = addOrReplaceClassName(className, "mdl-mega-footer__link-list");
-
-					}
-					else
+					if (Footer(UIBase(parentSection).parent).mini)
 					{
                         typeNames = "mdl-mini-footer__link-list";
-                        className = addOrReplaceClassName(className, "mdl-mini-footer__link-list");
+                        setClassName(computeFinalClassNames());
 					}
 				}
 			}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as
index 1d2026d..947ee2c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -71,14 +70,10 @@ package org.apache.royale.mdl
 			if(parent is Footer)
 			{
 				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__middle-section");
-				}
-				else
+				if (Footer(parent).mini)
 				{
                     typeNames = "mdl-mini-footer__middle-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__middle-section");
+                    setClassName(computeFinalClassNames());
 				}
 			}
 			else
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as
index aff9704..aed81e6 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -71,15 +70,10 @@ package org.apache.royale.mdl
 			if(parent is Footer)
 			{
 				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    element.classList.add("mdl-mega-footer__right-section");
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__right-section");
-				}
-				else
+				if (Footer(parent).mini)
 				{
                     typeNames = "mdl-mini-footer__right-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__right-section");
+                    setClassName(computeFinalClassNames());
 				}
 			}
 			else if(parent is IFooterSection)
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as
index 6737630..1bd52eb 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as
@@ -26,7 +26,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
     
 	/**
@@ -74,14 +73,10 @@ package org.apache.royale.mdl
 				if(UIBase(parentSection).parent is Footer)
 				{
 					element.classList.remove(typeNames);
-					if(!Footer(UIBase(parentSection).parent).mini)
-					{
-                        className = addOrReplaceClassName(className, "mdl-mega-footer__social-btn");
-					}
-					else
+					if (Footer(UIBase(parentSection).parent).mini)
 					{
                         typeNames = "mdl-mini-footer__social-btn";
-                        className = addOrReplaceClassName(className, "mdl-mini-footer__social-btn");
+                        setClassName(computeFinalClassNames());
 					}
 				}
 			}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as
index 52e63d6..abd866d 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -71,14 +70,10 @@ package org.apache.royale.mdl
 			if(parent is Footer)
 			{
 				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__top-section");
-				}
-				else
+                if(Footer(parent).mini)
 				{
                     typeNames = "mdl-mini-footer__top-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__top-section");
+                    setClassName(computeFinalClassNames());
 				}
 			}
 			else
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as
index 35a6664..d270bf0 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -63,9 +63,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-grid";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		protected var _nospacing:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-grid--no-spacing" effect selector.
@@ -80,6 +88,7 @@ package org.apache.royale.mdl
         {
             return _nospacing;
         }
+
         public function set nospacing(value:Boolean):void
         {
             if (_nospacing != value)
@@ -88,13 +97,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-grid--no-spacing");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-grid--no-spacing");
-                    }
+                    var classVal:String = "mdl-grid--no-spacing";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as
index 623fe9f..163c360 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -52,9 +52,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-cell";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		protected var _column:Number = 4;
         /**
 		 *  A boolean flag to activate "mdl-cell--N-col" effect selector.
@@ -78,7 +86,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col", "mdl-cell--" + _column + "-col");
+                        var classVal:String = "mdl-cell--" + _column + "-col";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-col";
+                        _classList.add(classVal);
+
                         _column = value;
                     }
                 }
@@ -100,6 +113,7 @@ package org.apache.royale.mdl
         {
             return _columnDesktop;
         }
+
         public function set columnDesktop(value:Number):void
         {
             if (_columnDesktop != value)
@@ -108,7 +122,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col-desktop", "mdl-cell--" + _columnDesktop + "-col-desktop");
+                        var classVal:String = "mdl-cell--" + _columnDesktop + "-col-desktop";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-col-desktop";
+                        _classList.add(classVal);
+
                         _columnDesktop = value;
                     }
                 }
@@ -130,6 +149,7 @@ package org.apache.royale.mdl
         {
             return _columnTablet;
         }
+
         public function set columnTablet(value:Number):void
         {
             if (_columnTablet != value)
@@ -138,7 +158,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col-tablet", "mdl-cell--" + _columnTablet + "-col-tablet");
+                        var classVal:String = "mdl-cell--" + _columnTablet + "-col-tablet";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-col-tablet";
+                        _classList.add(classVal);
+
                         _columnTablet = value;
                     }
                 }
@@ -160,6 +185,7 @@ package org.apache.royale.mdl
         {
             return _columnPhone;
         }
+
         public function set columnPhone(value:Number):void
         {
             if (_columnPhone != value)
@@ -168,7 +194,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 5)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col-phone", "mdl-cell--" + _columnPhone + "-col-phone");
+                        var classVal:String = "mdl-cell--" + _columnPhone + "-col-phone";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-col-phone";
+                        _classList.add(classVal);
+
                         _columnPhone = value;
                     }
                 }
@@ -190,6 +221,7 @@ package org.apache.royale.mdl
         {
             return _offset;
         }
+
         public function set offset(value:Number):void
         {
 			if (_offset != value)
@@ -198,7 +230,12 @@ package org.apache.royale.mdl
 				{
 					if (value > 0 || value < 12)
 					{
-						className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset", "mdl-cell--" + _offset + "-offset");
+                        var classVal:String = "mdl-cell--" + _offset + "-offset";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-offset";
+                        _classList.add(classVal);
+
 						_offset = value;
 					}
 				}
@@ -220,6 +257,7 @@ package org.apache.royale.mdl
         {
             return _offsetDesktop;
         }
+
         public function set offsetDesktop(value:Number):void
         {
             if (_offsetDesktop != value)
@@ -228,7 +266,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 12)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset-desktop", "mdl-cell--" + _offsetDesktop + "-offset-desktop");
+                        var classVal:String = "mdl-cell--" + _offsetDesktop + "-offset-desktop";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-offset-desktop";
+                        _classList.add(classVal);
+
                         _offsetDesktop = value;
                     }
                 }
@@ -250,6 +293,7 @@ package org.apache.royale.mdl
         {
             return _offsetTablet;
         }
+
         public function set offsetTablet(value:Number):void
         {
             if (_offsetTablet != value)
@@ -258,7 +302,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 12)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset-tablet", "mdl-cell--" + _offsetTablet + "-offset-tablet");
+                        var classVal:String = "mdl-cell--" + _offsetTablet + "-offset-tablet";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-offset-tablet";
+                        _classList.add(classVal);
+
                         _offsetTablet = value;
                     }
                 }
@@ -280,6 +329,7 @@ package org.apache.royale.mdl
         {
             return _offsetPhone;
         }
+
         public function set offsetPhone(value:Number):void
         {
             if (_offsetPhone != value)
@@ -288,7 +338,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 12)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset-phone", "mdl-cell--" + _offsetPhone + "-offset-phone");
+                        var classVal:String = "mdl-cell--" + _offsetPhone + "-offset-phone";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-offset-phone";
+                        _classList.add(classVal);
+
                         _offsetPhone = value;
                     }
                 }
@@ -318,7 +373,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--order-" + value, "mdl-cell--order-" + _order);
+                        var classVal:String = "mdl-cell--order-" + _order;
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--order-" + value;
+                        _classList.add(classVal);
+
                         _order = value;
                     }
                 }
@@ -340,6 +400,7 @@ package org.apache.royale.mdl
         {
             return _orderDesktop;
         }
+
         public function set orderDesktop(value:Number):void
         {
             if (_orderDesktop != value)
@@ -348,7 +409,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--order-" + value + "-desktop", "mdl-cell--order-" + _orderDesktop + "-desktop");
+                        var classVal:String = "mdl-cell--order-" + _orderDesktop + "-desktop";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--order-" + value + "-desktop";
+                        _classList.add(classVal);
+
                         _orderDesktop = value;
                     }
                 }
@@ -378,7 +444,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--order-" + value + "-tablet", "mdl-cell--order-" + _orderTablet + "-tablet");
+                        var classVal:String = "mdl-cell--order-" + _orderTablet + "-tablet";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--order-" + value + "-tablet";
+                        _classList.add(classVal);
+
                         _orderTablet = value;
                     }
                 }
@@ -408,7 +479,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--order-" + value + "-phone", "mdl-cell--order-" + _orderPhone + "-phone");
+                        var classVal:String = "mdl-cell--order-" + _orderPhone + "-phone";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--order-" + value + "-phone";
+                        _classList.add(classVal);
+
                         _orderPhone = value;
                     }
                 }
@@ -429,6 +505,7 @@ package org.apache.royale.mdl
         {
             return _hideDesktop;
         }
+
         public function set hideDesktop(value:Boolean):void
         {
             if (_hideDesktop != value)
@@ -437,11 +514,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--hide-desktop");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--hide-desktop");
-                    }
+                    var classVal:String = "mdl-cell--hide-desktop";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -460,6 +535,7 @@ package org.apache.royale.mdl
         {
             return _hideTablet;
         }
+
         public function set hideTablet(value:Boolean):void
         {
             if (_hideTablet != value)
@@ -468,11 +544,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--hide-tablet");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--hide-tablet");
-                    }
+                    var classVal:String = "mdl-cell--hide-tablet";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -499,11 +573,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--hide-phone");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--hide-phone");
-                    }
+                    var classVal:String = "mdl-cell--hide-phone";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -531,11 +603,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--stretch");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--stretch");
-                    }
+                    var classVal:String = "mdl-cell--stretch";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -562,11 +632,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--top");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--top");
-                    }
+                    var classVal:String = "mdl-cell--top";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -585,6 +653,7 @@ package org.apache.royale.mdl
         {
             return _alignMiddle;
         }
+
         public function set alignMiddle(value:Boolean):void
         {
             if (_alignMiddle != value)
@@ -593,11 +662,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--middle");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--middle");
-                    }
+                    var classVal:String = "mdl-cell--middle";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -625,13 +692,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--bottom");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--bottom");
-                    }
+                    var classVal:String = "mdl-cell--bottom";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as
index 11816b6..e10622c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -51,9 +51,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout__header"
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
@@ -77,6 +85,7 @@ package org.apache.royale.mdl
         {
             return _transparent;
         }
+
         public function set transparent(value:Boolean):void
         {
             if (_transparent != value)
@@ -85,11 +94,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout__header--transparent");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout__header--transparent");
-                    }
+                    var classVal:String = "mdl-layout__header--transparent";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -108,6 +115,7 @@ package org.apache.royale.mdl
         {
             return _scrollable;
         }
+
         public function set scrollable(value:Boolean):void
         {
             if (_scrollable != value)
@@ -116,11 +124,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout__header--scroll");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout__header--scroll");
-                    }
+                    var classVal:String = "mdl-layout__header--scroll";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -139,6 +145,7 @@ package org.apache.royale.mdl
         {
             return _waterfall;
         }
+
         public function set waterfall(value:Boolean):void
         {
             if (_waterfall != value)
@@ -147,13 +154,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout__header--waterfall");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout__header--waterfall");
-                    }
+                    var classVal:String = "mdl-layout__header--waterfall";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as
index c3241fd..2507e6c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as
@@ -35,7 +35,7 @@ package org.apache.royale.mdl
     {    
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     //--------------------------------------
@@ -95,6 +95,11 @@ package org.apache.royale.mdl
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-icon-toggle mdl-js-icon-toggle";
 
             COMPILE::SWF
@@ -106,6 +111,9 @@ package org.apache.royale.mdl
             addBead(new UpgradeChildren(["mdl-icon-toggle__ripple-container"]));
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         [Bindable("change")]
         /**
          *  <code>true</code> if the Button is selected.
@@ -183,11 +191,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -273,5 +279,11 @@ package org.apache.royale.mdl
         {
             //selected = !selected;
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as
index 07305b5..5652c04 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as
@@ -26,7 +26,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 	
     /**
@@ -60,10 +60,18 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-menu mdl-js-menu";
 			addEventListener("beadsAdded", addUpgradeBead);
         }
-		
+
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		protected function addUpgradeBead(event:Event):void
 		{
 			addBead(new UpgradeElement());	
@@ -138,6 +146,7 @@ package org.apache.royale.mdl
 		{
 			return _left;
 		}
+
 		public function set left(value:Boolean):void
 		{
 			_left = value;
@@ -148,7 +157,8 @@ package org.apache.royale.mdl
             {
                 currentMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right");
                 className += currentMenuPosition;
-            } else
+            }
+			else
             {
                 newMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right");
                 className = className.replace( "/(?:^|\s)" + currentMenuPosition + "(?!\S)/g" , newMenuPosition);
@@ -194,6 +204,7 @@ package org.apache.royale.mdl
         {
             return _ripple;
         }
+
         public function set ripple(value:Boolean):void
         {
             if (_ripple != value)
@@ -202,13 +213,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as
index 383525c..a469ea6 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as
@@ -26,7 +26,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -53,9 +53,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout mdl-js-layout";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		private var _applicationModel:Object;
 
 		[Bindable("modelChanged")]
@@ -106,11 +114,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout--fixed-header");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout--fixed-header");
-                    }
+                    var classVal:String = "mdl-layout--fixed-header";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -129,6 +135,7 @@ package org.apache.royale.mdl
         {
             return _fixedDrawer;
         }
+
         public function set fixedDrawer(value:Boolean):void
         {
             if (_fixedDrawer != value)
@@ -137,13 +144,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout--fixed-drawer");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout--fixed-drawer");
-                    }
+                    var classVal:String = "mdl-layout--fixed-drawer";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as
index 262a265..3a50e9c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as
@@ -20,12 +20,6 @@ package org.apache.royale.mdl
 {
 	import org.apache.royale.html.Group;
 
-    COMPILE::JS
-    {
-        import org.apache.royale.core.WrappedHTMLElement;
-		import org.apache.royale.html.util.addElementToWrapper;
-    }
-
 	/**
 	 *  The NavigationLayoutContent class is a Container component capable of parenting
 	 *  the content of the NavigationLayout parent. If the navigation uses a TabBar component
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as
index 79c913d..8dbaa23 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl
     {        
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     /**
      *  The ProgressBar indicate loading and progress states.
@@ -47,9 +47,17 @@ package org.apache.royale.mdl
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-progress mdl-js-progress";
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var materialProgress:Object;
 
         private var _currentProgress:Number;
@@ -115,11 +123,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-progress__indeterminate");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-progress__indeterminate");
-                    }
+                    var classVal:String = "mdl-progress__indeterminate";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -170,5 +176,11 @@ package org.apache.royale.mdl
             setCurrentProgress(_currentProgress);
             setCurrentBuffer(_currentBuffer);
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as
index e74c289..ac1f4d0 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as
@@ -30,12 +30,13 @@ package org.apache.royale.mdl
         import org.apache.royale.core.IStrand;
         import org.apache.royale.core.IValueToggleButtonModel;
     }
+
     COMPILE::JS
     {
         import org.apache.royale.core.UIBase;
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     //--------------------------------------
@@ -295,6 +296,8 @@ package org.apache.royale.mdl
 		{
             super();
 
+            _classList = new CSSClassList();
+
             typeNames = "mdl-radio mdl-js-radio";
 
             addBead(new UpgradeElement());
@@ -306,6 +309,8 @@ package org.apache.royale.mdl
          */
         protected static var radioCounter:int = 0;
 
+        private var _classList:CSSClassList;
+
         private var radio:HTMLSpanElement;
         private var icon:HTMLInputElement;
         private var label:HTMLLabelElement;
@@ -343,9 +348,8 @@ package org.apache.royale.mdl
             (radio as WrappedHTMLElement).royale_wrapper = this;
 
             return element;
-        };
+        }
 
-        COMPILE::JS
         override public function addEventListener(type:String, handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = null):void
         {
             if (type == MouseEvent.CLICK)
@@ -358,7 +362,6 @@ package org.apache.royale.mdl
             }
         }
 
-        COMPILE::JS
         public function clickHandler(event:Event):void
         {
             selected = !selected;
@@ -384,14 +387,9 @@ package org.apache.royale.mdl
             {
                 _ripple = value;
 
-                COMPILE::JS
-                {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
-                }
+                var classVal:String = "mdl-js-ripple-effect";
+                value ? _classList.add(classVal) : _classList.remove(classVal);
+                setClassName(computeFinalClassNames());
             }
         }
 
@@ -399,6 +397,7 @@ package org.apache.royale.mdl
         {
             return icon.name as String;
         }
+
         public function set groupName(value:String):void
         {
             icon.name = value;
@@ -419,6 +418,7 @@ package org.apache.royale.mdl
         {
             return icon.checked;
         }
+
         public function set selected(value:Boolean):void
         {
             if(icon.checked == value)
@@ -479,6 +479,11 @@ package org.apache.royale.mdl
                 }
             }
         }
-    }
 
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
+    }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as
index bed52ac..40e5f67 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as
@@ -20,12 +20,6 @@ package org.apache.royale.mdl
 {
 	import org.apache.royale.core.UIBase;
 
-    COMPILE::JS
-    {
-        import org.apache.royale.core.WrappedHTMLElement;    
-        import org.apache.royale.html.util.addElementToWrapper;        
-    }
-	
     /**
      *  The Spacer class takes up space in the UI layout.
      *
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as
index 24726a7..e9dff95 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl
     {    
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     /**
      *  The Material Design Lite (MDL) spinner component is an enhanced replacement for
@@ -50,12 +50,21 @@ package org.apache.royale.mdl
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-spinner mdl-js-spinner";
 
             addBead(new UpgradeElement());
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var _isActive:Boolean;
+
         /**
          *  Indicates whether Spinner is active and visible
          *
@@ -68,9 +77,7 @@ package org.apache.royale.mdl
         {
             return _isActive;
         }
-        /**
-         *  @private
-         */
+
         public function set isActive(value:Boolean):void
         {
             if (_isActive != value)
@@ -79,16 +86,15 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
 
-        private var _singleColor:Boolean;   
+        private var _singleColor:Boolean;
+
         /**
          *  Make Spinner in a single color
          *
@@ -105,11 +111,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-spinner--single-color");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-spinner--single-color");
-                    }
+                    var classVal:String = "mdl-spinner--single-color";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -124,5 +128,11 @@ package org.apache.royale.mdl
         {
 			return addElementToWrapper(this,'div');
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as
index e521948..0a38132 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as
@@ -32,7 +32,7 @@ package org.apache.royale.mdl
     {    
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     //--------------------------------------
@@ -98,12 +98,20 @@ package org.apache.royale.mdl
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-switch mdl-js-switch";
 
             addBead(new UpgradeElement());
             addBead(new UpgradeChildren(["mdl-switch__ripple-container"]));
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          *  @copy org.apache.royale.html.Label#text
          *
@@ -183,11 +191,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -238,5 +244,11 @@ package org.apache.royale.mdl
             input.checked = selected;
             label.classList.toggle("is-checked", selected);
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as
index c7a23ff..4da4593 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
 	/**
@@ -62,9 +62,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout__tab-bar";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          * @copy org.apache.royale.core.IDataProviderModel#dataProvider
          *
@@ -77,6 +85,7 @@ package org.apache.royale.mdl
         {
             return ITabModel(model).dataProvider;
         }
+
         override public function set dataProvider(value:Object):void
         {
             ITabModel(model).dataProvider = value;
@@ -94,6 +103,7 @@ package org.apache.royale.mdl
         {
             return ITabModel(model).labelField;
         }
+
         override public function set labelField(value:String):void
         {
             ITabModel(model).labelField = value;
@@ -149,7 +159,7 @@ package org.apache.royale.mdl
                 element.classList.remove(typeNames);
 				typeNames = "mdl-tabs__tab-bar";
 
-                className = addOrReplaceClassName(className, "mdl-tabs__tab-bar");
+                setClassName(computeFinalClassNames());
 			}
 
 			if(parent is Tabs && _ripple)
@@ -172,6 +182,7 @@ package org.apache.royale.mdl
         {
             return _ripple;
         }
+
         public function set ripple(value:Boolean):void
         {
             if (_ripple != value)
@@ -185,13 +196,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as
index 620672b..2b07754 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
 	/**
@@ -49,9 +49,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout__tab";
 		}
-		
+
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		private var _isActive:Boolean = false;
 
         /**
@@ -75,11 +83,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
 		}
@@ -117,9 +123,15 @@ package org.apache.royale.mdl
                     element.classList.remove(typeNames);
                     typeNames = "mdl-tabs__tab";
 
-                    className = addOrReplaceClassName(className, "mdl-tabs__tab");
+                    setClassName(typeNames);
                 }
 			}
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as
index 34eed6c..9d777b7 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -51,9 +51,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout__tab-panel";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
@@ -81,7 +89,7 @@ package org.apache.royale.mdl
                 element.classList.remove(typeNames);
                 typeNames = "mdl-tabs__panel";
 
-                className = addOrReplaceClassName(className, "mdl-tabs__panel");
+                setClassName(computeFinalClassNames());
             }
         }
 
@@ -108,13 +116,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
 		}
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as
index 9bc0015..81915fe 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as
@@ -27,7 +27,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
 	/**
@@ -61,9 +61,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-data-table mdl-js-data-table";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		private var _columns:Array;
         /**
 		 *  columns. Optional
@@ -278,10 +286,17 @@ package org.apache.royale.mdl
             {
                 COMPILE::JS
                 {
-                    className = addOrReplaceClassName(className, "mdl-shadow--" + value + "dp", "mdl-shadow--" + _shadow + "dp");
                     if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16)
                     {
+                        var classVal:String = "mdl-shadow--" + _shadow + "dp";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-shadow--" + value + "dp";
+                        _classList.add(classVal);
+
                         _shadow = value;
+
+                        setClassName(computeFinalClassNames());
                     }
                 }
             }
@@ -310,11 +325,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-data-table--selectable");
-                    COMPILE::JS
-                    {
-                        className = addOrReplaceClassName(className, "mdl-data-table--selectable");
-                    }
+                    var classVal:String = "mdl-data-table--selectable";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -339,5 +352,11 @@ package org.apache.royale.mdl
             super.addElement(tbody);
 			_isTbodyAddedToParent = true;
 		}
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as
index cf3abbb..3c06c63 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as
@@ -23,7 +23,7 @@ package org.apache.royale.mdl
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -51,9 +51,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-data-table__cell--non-numeric";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var _headerText:String = "";
 
         /**
@@ -102,6 +110,7 @@ package org.apache.royale.mdl
         {
             return _ascending;
         }
+
         public function set ascending(value:Boolean):void
         {
             if (_ascending != value)
@@ -110,11 +119,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-data-table__header--sorted-ascending");
-                    COMPILE::JS
-                    {
-                        className = addOrReplaceClassName(className, "mdl-data-table__header--sorted-ascending");
-                    }
+                    var classVal:String = "mdl-data-table__header--sorted-ascending";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -134,6 +141,7 @@ package org.apache.royale.mdl
         {
             return _descending;
         }
+
         public function set descending(value:Boolean):void
         {
             if (_descending != value)
@@ -142,13 +150,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-data-table__header--sorted-descending");
-                    COMPILE::JS
-                    {
-                        className = addOrReplaceClassName(className, "mdl-data-table__header--sorted-descending");
-                    }
+                    var classVal:String = "mdl-data-table__header--sorted-descending";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as
index a85abd0..e677fd7 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
 	/**
@@ -59,9 +59,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-tabs mdl-js-tabs";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          * @copy org.apache.royale.core.IDataProviderModel#dataProvider
          *
@@ -169,13 +177,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as
index 057d242..73f222c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as
@@ -110,7 +110,6 @@ package org.apache.royale.mdl
                 var snackbarData:Object = IToastModel(model).snackbarData;
                 snackbar.showSnackbar(snackbarData);
             }
-            //dispatchEvent(new Event("action"));
         }
 
         protected var snackbar:Object;
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as
index 922da08..d5616c3 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl.supportClasses
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -48,8 +48,16 @@ package org.apache.royale.mdl.supportClasses
 		public function CardInner()
 		{
 			super();
+
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		private var _border:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-card--border" effect selector.
@@ -72,11 +80,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-card--border");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-card--border");
-                    }
+                    var classVal:String = "mdl-card--border";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -96,6 +102,7 @@ package org.apache.royale.mdl.supportClasses
         {
             return _expand;
         }
+
         public function set expand(value:Boolean):void
         {
             if (_expand != value)
@@ -104,13 +111,17 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-card--expand");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-card--expand");
-                    }
+                    var classVal:String = "mdl-card--expand";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as
index d86db7b..5cc1aea 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl.supportClasses
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     /**
@@ -54,10 +54,18 @@ package org.apache.royale.mdl.supportClasses
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "material-icons";
         }
 
         COMPILE::JS
+        private var _classList:CSSClassList;
+
+        COMPILE::JS
         protected var textNode:Text;
 
         /**
@@ -121,8 +129,15 @@ package org.apache.royale.mdl.supportClasses
             {
                 COMPILE::JS
                 {
-                    className = addOrReplaceClassName(className, "md-" + value, "md-" + _size);
+                    var classVal:String = "md-" + _size;
+                    _classList.remove(classVal);
+
+                    classVal = "md-" + value;
+                    _classList.add(classVal);
+
                     _size = value;
+
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -140,6 +155,7 @@ package org.apache.royale.mdl.supportClasses
         {
             return _dark;
         }
+
         public function set dark(value:Boolean):void
         {
             if (_dark != value)
@@ -148,11 +164,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("md-dark");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "md-dark");
-                    }
+                    var classVal:String = "md-dark";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -178,11 +192,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("md-light");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "md-light");
-                    }
+                    var classVal:String = "md-light";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -208,11 +220,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("md-inactive");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "md-inactive");
-                    }
+                    var classVal:String = "md-inactive";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -238,11 +248,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-list__item-icon");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-list__item-icon");
-                    }
+                    var classVal:String = "mdl-list__item-icon";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -268,11 +276,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-list__item-avatar");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-list__item-avatar");
-                    }
+                    var classVal:String = "mdl-list__item-avatar";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -298,13 +304,17 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-icon-toggle__label");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-icon-toggle__label");
-                    }
+                    var classVal:String = "mdl-icon-toggle__label";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as
index 3d766af..52e0a8c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl.supportClasses
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     /**
@@ -49,9 +49,15 @@ package org.apache.royale.mdl.supportClasses
         {
             super();
 
-           // className = "";
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var _tabIdField:String;
         /**
 		 *  tabIdField.
@@ -92,11 +98,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -138,5 +142,11 @@ package org.apache.royale.mdl.supportClasses
         {
 			return addElementToWrapper(this,'a');
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as
index bb666ab..b357c0a 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as
@@ -22,7 +22,7 @@ package org.apache.royale.mdl.supportClasses
 
     COMPILE::JS
     {
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     /**
@@ -46,8 +46,16 @@ package org.apache.royale.mdl.supportClasses
         public function TabItemRendererBase()
         {
             super();
+
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var _tabIdField:String;
         /**
          *  @copy org.apache.royale.mdl.supportClasses.ITabItemRenderer#tabIdField
@@ -89,11 +97,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -124,5 +130,11 @@ package org.apache.royale.mdl.supportClasses
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as
index a0c0cb8..91341a8 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as
@@ -19,16 +19,15 @@ package org.apache.royale.mdl.supportClasses
 {
 	import org.apache.royale.events.Event;
 	import org.apache.royale.html.TextInput;
-    import org.apache.royale.mdl.beads.ExpandableSearch;
     import org.apache.royale.core.IBead;
 
     import org.apache.royale.mdl.supportClasses.ITextField;
-    
+
     COMPILE::JS
     {
         import goog.events;
         import org.apache.royale.core.WrappedHTMLElement;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
     /**
@@ -53,11 +52,15 @@ package org.apache.royale.mdl.supportClasses
 		{
 			super();
 
-          //  className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
 		}
 
         COMPILE::JS
         {
+            private var _classList:CSSClassList;
             private var _textNode:Text;
             /**
              *  @copy org.apache.royale.mdl.supportClasses.ITextField#textNode
@@ -152,11 +155,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-textfield--floating-label");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-textfield--floating-label");
-                    }
+                    var classVal:String = "mdl-textfield--floating-label";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -185,25 +186,17 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-invalid");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-invalid");
-                    }
+                    var classVal:String = "is-invalid";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
 
         COMPILE::JS
-        override public function addedToParent():void
+        override protected function computeFinalClassNames():String
         {
-            super.addedToParent();
-
-            var expandableSearch:IBead = getBeadByType(ExpandableSearch);
-            if (expandableSearch)
-            {
-                className = addOrReplaceClassName(className, "mdl-textfield--expandable");
-            }
+            return _classList.compute() + super.computeFinalClassNames();
         }
 	}
 }

-- 
To stop receiving notification emails like this one, please contact
piotrz@apache.org.

Mime
View raw message