native-document 1.0.122 → 1.0.124

package/dist/native-document.components.min.js

@@ -386,6 +386,7 @@ var NativeComponents = (function (exports) {
         this.unSubscriptions = [];
     }
 
+    ObservableChecker.prototype.__$Observable = true;
     ObservableChecker.prototype.__$isObservableChecker = true;
 
     /**
@@ -1099,6 +1100,7 @@ var NativeComponents = (function (exports) {
         this.$observer = observer;
     };
 
+    ObservableWhen.prototype.__$Observable = true;
     ObservableWhen.prototype.__$isObservableWhen = true;
 
     /**
@@ -1404,6 +1406,7 @@ var NativeComponents = (function (exports) {
         configurable: true,
     });
 
+    ObservableItem.prototype.__$Observable = true;
     ObservableItem.prototype.__$isObservable = true;
     const noneTrigger = function() {};
 
@@ -1969,7 +1972,17 @@ var NativeComponents = (function (exports) {
      */
     const bindClassAttribute = (element, data) => {
         for(const className in data) {
-            data[className].bindClassProperty(element, className);
+            const value = data[className];
+            if(value.__$Observable) {
+                element.classes.toggle(className, value.val());
+                value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
+                continue;
+            }
+            if(value.$hydrate) {
+                value.$hydrate(element, className);
+                continue;
+            }
+            element.classes.toggle(className, value);
         }
     };
 
@@ -2039,35 +2052,6 @@ var NativeComponents = (function (exports) {
         element.setAttribute(attributeName, value.val());
     };
 
-
-    const AttributeHandlers = {
-        string: (element, attributeName, value) => element.setAttribute(attributeName, value),
-        number: (element, attributeName, value) => element.setAttribute(attributeName, value),
-        boolean: (element, attributeName, value) => bindBooleanAttribute(element, attributeName, value),
-        object: (element, attributeName, value) => {
-            if(value == null) {
-                return;
-            }
-
-            if(value.handleNdAttribute) {
-                value.handleNdAttribute(element, attributeName);
-                return;
-            }
-
-            if(attributeName === 'class') {
-                bindClassAttribute(element, value);
-                return;
-            }
-            if(attributeName === 'style') {
-                bindStyleAttribute(element, value);
-                return;
-            }
-            if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-                bindBooleanAttribute(element, attributeName, value);
-            }
-        }
-    };
-
     /**
      *
      * @param {HTMLElement} element
@@ -2078,8 +2062,29 @@ var NativeComponents = (function (exports) {
         for(const originalAttributeName in attributes) {
             const attributeName = originalAttributeName.toLowerCase();
             let value = attributes[originalAttributeName];
-            const typeOf = typeof value;
-            AttributeHandlers[typeOf](element, attributeName, value);
+            if(value == null) {
+                continue;
+            }
+            if(value.handleNdAttribute) {
+                value.handleNdAttribute(element, attributeName, value);
+                continue;
+            }
+            if(typeof value ===  'object') {
+                if(attributeName === 'class') {
+                    bindClassAttribute(element, value);
+                    continue;
+                }
+                if(attributeName === 'style') {
+                    bindStyleAttribute(element, value);
+                    continue;
+                }
+            }
+            if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+                bindBooleanAttribute(element, attributeName, value);
+                continue;
+            }
+
+            element.setAttribute(attributeName, value);
         }
         return element;
     };
@@ -2228,20 +2233,6 @@ var NativeComponents = (function (exports) {
         bindAttributeWithObservable(element, attributeName, this);
     };
 
-    ObservableItem.prototype.bindClassProperty = function(element, className) {
-        element.classes.toggle(className, this.val());
-        this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-    };
-
-    ObservableWhen.prototype.bindClassProperty = function(element, className) {
-        element.classes.toggle(className, this.isActive());
-        this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-    };
-
-    Boolean.prototype.bindClassProperty = function(element, className) {
-        element.classes.toggle(className, this);
-    };
-
     let $textNodeCache = null;
 
     const ElementCreator = {
@@ -3073,22 +3064,19 @@ var NativeComponents = (function (exports) {
             }
         }
         if(this.$classes) {
+            const cache = {};
             const keys = Object.keys(this.$classes);
 
             if(keys.length === 1) {
                 const key = keys[0];
                 const callback = this.$classes[key];
                 steps.push((clonedNode, data) => {
-                    callback.apply(null, data).bindClassProperty(clonedNode, key);
+                    cache[key] = callback.apply(null, data);
+                    ElementCreator.processClassAttribute(clonedNode, cache);
                 });
             } else {
-                const properties = this.$classes;
-                const keysLength = keys.length;
                 steps.push((clonedNode, data) => {
-                    for(let i = 0; i < keysLength; i++) {
-                        const key = keys[i];
-                        properties[key].apply(null, data).bindClassProperty(clonedNode, key);
-                    }
+                    ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
                 });
             }
         }