native-document 1.0.119 → 1.0.121

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

@@ -1486,6 +1486,8 @@ var NativeComponents = (function (exports) {
     };
     ObservableItem.prototype.trigger = noneTrigger;
 
+
+    const $setOperation = { action: 'set' };
     ObservableItem.prototype.$updateWithNewValue = function(newValue) {
         newValue = newValue?.__$isObservable ? newValue.val() : newValue;
         if(this.$currentValue === newValue) {
@@ -1493,7 +1495,7 @@ var NativeComponents = (function (exports) {
         }
         this.$previousValue = this.$currentValue;
         this.$currentValue = newValue;
-        this.trigger();
+        this.trigger($setOperation);
         this.$previousValue = null;
     };
 
@@ -1967,22 +1969,7 @@ var NativeComponents = (function (exports) {
      */
     const bindClassAttribute = (element, data) => {
         for(const className in data) {
-            const value = data[className];
-            if(value.__$isObservable) {
-                element.classes.toggle(className, value.val());
-                value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-                continue;
-            }
-            if(value.__$isObservableWhen) {
-                element.classes.toggle(className, value.isActive());
-                value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
-                continue;
-            }
-            if(value.$hydrate) {
-                value.$hydrate(element, className);
-                continue;
-            }
-            element.classes.toggle(className, value);
+            data[className].bindClassProperty(element, className);
         }
     };
 
@@ -2052,39 +2039,47 @@ var NativeComponents = (function (exports) {
         element.setAttribute(attributeName, value.val());
     };
 
-    /**
-     *
-     * @param {HTMLElement} element
-     * @param {Object} attributes
-     */
-    const AttributesWrapper = (element, attributes) => {
 
-        for(const originalAttributeName in attributes) {
-            const attributeName = originalAttributeName.toLowerCase();
-            let value = attributes[originalAttributeName];
+    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) {
-                continue;
+                return;
             }
+
             if(value.handleNdAttribute) {
-                value.handleNdAttribute(element, attributeName, value);
-                continue;
+                value.handleNdAttribute(element, attributeName);
+                return;
             }
-            if(typeof value ===  'object') {
-                if(attributeName === 'class') {
-                    bindClassAttribute(element, value);
-                    continue;
-                }
-                if(attributeName === 'style') {
-                    bindStyleAttribute(element, value);
-                    continue;
-                }
+
+            if(attributeName === 'class') {
+                bindClassAttribute(element, value);
+                return;
+            }
+            if(attributeName === 'style') {
+                bindStyleAttribute(element, value);
+                return;
             }
             if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
                 bindBooleanAttribute(element, attributeName, value);
-                continue;
             }
+        }
+    };
 
-            element.setAttribute(attributeName, value);
+    /**
+     *
+     * @param {HTMLElement} element
+     * @param {Object} attributes
+     */
+    const AttributesWrapper = (element, attributes) => {
+
+        for(const originalAttributeName in attributes) {
+            const attributeName = originalAttributeName.toLowerCase();
+            let value = attributes[originalAttributeName];
+            const typeOf = typeof value;
+            AttributeHandlers[typeOf](element, attributeName, value);
         }
         return element;
     };
@@ -2224,10 +2219,6 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    String.prototype.handleNdAttribute = function(element, attributeName) {
-        element.setAttribute(attributeName, this);
-    };
-
     ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
         if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
             bindBooleanAttribute(element, attributeName, this);
@@ -2237,6 +2228,20 @@ 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 = {
@@ -2399,29 +2404,51 @@ var NativeComponents = (function (exports) {
         anchor.remove = () => {
             anchor.append.apply(anchor, parent.childNodes);
         };
+        anchor.getParent = () => parent;
 
         anchor.appendChild = (child) => {
             child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.appendChild(child);
         };
 
+        anchor.appendChildRaw = parent.appendChild.bind(parent);
+        anchor.append = anchor.appendChild;
+        anchor.appendRaw = anchor.appendChildRaw;
+
+        anchor.insertAtStart = (child) => {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
+        };
+        anchor.insertAtStartRaw = (child) => {
+            parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
+        };
+
         anchor.appendElement = anchor.appendChild;
 
         anchor.removeChildren = () => {
-            parent.replaceChildren();
+            parent.textContent = '';
         };
 
         anchor.replaceContent = function(content) {
             const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
             parent.replaceChildren(child);
         };
+
+        anchor.replaceContentRaw = function(child) {
+            parent.replaceChildren(child);
+        };
         anchor.setContent = anchor.replaceContent;
 
         anchor.insertBefore = (child, anchor) => {
             child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.insertBefore(child, anchor);
         };
+        anchor.insertBeforeRaw = (child, anchor) => {
+            parent.insertBefore(child, anchor);
+        };
+
         anchor.appendChildBefore = anchor.insertBefore;
+        anchor.appendChildBeforeRaw = anchor.insertBeforeRaw;
 
         anchor.clear = anchor.remove;
         anchor.detach = anchor.remove;
@@ -2447,7 +2474,6 @@ var NativeComponents = (function (exports) {
 
         anchorFragment.onConnectedOnce((parent) => {
             if(isUniqueChild) {
-                console.log('Lets overwrite some functions with parent ', parent);
                 oneChildAnchorOverwriting(anchorFragment, parent);
             }
         });
@@ -2469,15 +2495,19 @@ var NativeComponents = (function (exports) {
 
         const insertBefore = function(parent, child, target) {
             const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            insertBeforeRaw(parent, childElement, target);
+        };
+
+        const insertBeforeRaw = function(parent, child, target) {
             if(parent === anchorFragment) {
-                parent.nativeInsertBefore(childElement, target);
+                parent.nativeInsertBefore(child, target);
                 return;
             }
             if(isParentUniqueChild(parent) && target === anchorEnd) {
-                parent.append(childElement,  target);
+                parent.append(child,  target);
                 return;
             }
-            parent.insertBefore(childElement, target);
+            parent.insertBefore(child, target);
         };
 
         anchorFragment.appendElement = function(child) {
@@ -2499,8 +2529,32 @@ var NativeComponents = (function (exports) {
             insertBefore(parent, child, before);
         };
 
-        anchorFragment.append = function() {
-            return anchorFragment.appendChild(Array.from(arguments));
+        anchorFragment.appendChildRaw = function(child, before = null) {
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                return;
+            }
+            before = before ?? anchorEnd;
+            insertBeforeRaw(parent, child, before);
+        };
+
+        anchorFragment.getParent = () => anchorEnd.parentNode;
+        anchorFragment.append = anchorFragment.appendChild;
+        anchorFragment.appendRaw = anchorFragment.appendChildRaw;
+
+        anchorFragment.insertAtStart = function(child) {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            anchorFragment.insertAtStartRaw(child);
+        };
+
+        anchorFragment.insertAtStartRaw = function(child) {
+            const parentNode = anchorStart.parentNode;
+            if(parentNode === anchorFragment) {
+                parentNode.nativeInsertBefore(child, anchorStart);
+                return;
+            }
+            parentNode.insertBefore(child, anchorStart);
         };
 
         anchorFragment.removeChildren = function() {
@@ -2547,6 +2601,10 @@ var NativeComponents = (function (exports) {
 
         anchorFragment.replaceContent = function(child) {
             const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            anchorFragment.replaceContentRaw(childElement);
+        };
+
+        anchorFragment.replaceContentRaw = function(child) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
                 return;
@@ -2560,10 +2618,10 @@ var NativeComponents = (function (exports) {
         };
 
         anchorFragment.setContent = anchorFragment.replaceContent;
+        anchorFragment.setContentRaw = anchorFragment.replaceContentRaw;
 
-        anchorFragment.insertBefore = function(child, anchor = null) {
-            anchorFragment.appendChild(child, anchor);
-        };
+        anchorFragment.insertBefore = anchorFragment.appendChild;
+        anchorFragment.insertBeforeRaw = anchorFragment.appendChildRaw;
 
         anchorFragment.endElement = function() {
             return anchorEnd;
@@ -3015,19 +3073,22 @@ 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) => {
-                    cache[key] = callback.apply(null, data);
-                    ElementCreator.processClassAttribute(clonedNode, cache);
+                    callback.apply(null, data).bindClassProperty(clonedNode, key);
                 });
             } else {
+                const properties = this.$classes;
+                const keysLength = keys.length;
                 steps.push((clonedNode, data) => {
-                    ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
+                    for(let i = 0; i < keysLength; i++) {
+                        const key = keys[i];
+                        properties[key].apply(null, data).bindClassProperty(clonedNode, key);
+                    }
                 });
             }
         }
@@ -3254,6 +3315,8 @@ var NativeComponents = (function (exports) {
         };
     });
 
+    const $clearEvent = { action: 'clear' };
+
     /**
      * Removes all items from the array and triggers an update.
      *
@@ -3267,7 +3330,7 @@ var NativeComponents = (function (exports) {
             return;
         }
         this.$currentValue.length = 0;
-        this.trigger({ action: 'clear' });
+        this.trigger($clearEvent);
         return true;
     };