native-document 1.0.73 → 1.0.75

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

@@ -1,16 +1,16 @@
 var NativeComponents = (function (exports) {
     'use strict';
 
-    let DebugManager = {};
+    let DebugManager$1 = {};
     {
-        DebugManager = {
+        DebugManager$1 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager$1 = DebugManager;
+    var DebugManager = DebugManager$1;
 
     const MemoryManager = (function() {
 
@@ -59,7 +59,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -182,7 +182,7 @@ var NativeComponents = (function (exports) {
                         try{
                             callback.call(plugin, ...data);
                         } catch (error) {
-                            DebugManager$1.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                            DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
                         }
                     }
                 }
@@ -486,7 +486,7 @@ var NativeComponents = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback, target = null) {
         this.$listeners = this.$listeners ?? [];
         if (this.$isCleanedUp) {
-            DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+            DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
             return () => {};
         }
         if (typeof callback !== 'function') {
@@ -862,17 +862,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -1062,7 +1062,7 @@ var NativeComponents = (function (exports) {
         anchorFragment.appendChild = function(child, before = null) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
-                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
                 return;
             }
             before = before ?? anchorEnd;
@@ -1171,7 +1171,7 @@ var NativeComponents = (function (exports) {
         return new ObservableItem(value, configs);
     }
 
-    const $$1 = Observable;
+    const $ = Observable;
 
     /**
      *
@@ -1232,9 +1232,11 @@ var NativeComponents = (function (exports) {
     function toggleElementClass(element, className, shouldAdd) {
         element.classes.toggle(className, shouldAdd);
     }
+
     function toggleElementStyle(element, styleName, newValue) {
         element.style[styleName] = newValue;
     }
+
     function updateInputFromObserver(element, attributeName, newValue) {
         if(Validator.isBoolean(newValue)) {
             element[attributeName] = newValue;
@@ -1242,6 +1244,7 @@ var NativeComponents = (function (exports) {
         }
         element[attributeName] = newValue === element.value;
     }
+
     function updateObserverFromInput(element, attributeName, defaultValue, value) {
         if(Validator.isBoolean(defaultValue)) {
             value.set(element[attributeName]);
@@ -1249,6 +1252,7 @@ var NativeComponents = (function (exports) {
         }
         value.set(element.value);
     }
+
     /**
      *
      * @param {HTMLElement} element
@@ -1355,37 +1359,19 @@ var NativeComponents = (function (exports) {
             if(value === null || value === undefined) {
                 continue;
             }
-            if(Validator.isString(value)) {
-                value = value.resolveObservableTemplate ? value.resolveObservableTemplate() : value;
-                if(Validator.isString(value)) {
-                    element.setAttribute(attributeName, value);
-                    continue;
-                }
-                const observables = value.filter(item => Validator.isObservable(item));
-                value = Observable.computed(() => {
-                    return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
-                }, observables);
-            }
-            if(attributeName === 'class' && Validator.isObject(value)) {
-                bindClassAttribute(element, value);
-                continue;
-            }
-            if(attributeName === 'style' && Validator.isObject(value)) {
-                bindStyleAttribute(element, value);
+            if(value.handleNdAttribute) {
+                value.handleNdAttribute(element, attributeName, value);
                 continue;
             }
             if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
                 bindBooleanAttribute(element, attributeName, value);
-                continue;
+                return;
             }
             if(Validator.isObservable(value)) {
                 bindAttributeWithObservable(element, attributeName, value);
                 continue;
             }
-            if(value.$hydrate) {
-                value.$hydrate(element, attributeName);
-                continue;
-            }
+
             element.setAttribute(attributeName, value);
 
         }
@@ -1427,7 +1413,9 @@ var NativeComponents = (function (exports) {
     Array.prototype.toNdElement = function () {
         const fragment = document.createDocumentFragment();
         for(let i = 0, length = this.length; i < length; i++) {
-            fragment.appendChild(ElementCreator.getChild(this[i]));
+            const child = ElementCreator.getChild(this[i]);
+            if(child === null) continue;
+            fragment.appendChild(child);
         }
         return fragment;
     };
@@ -1442,6 +1430,44 @@ var NativeComponents = (function (exports) {
         return ElementCreator.createHydratableNode(null, this);
     };
 
+    Object.prototype.handleNdAttribute = function(element, attributeName) {
+        if(attributeName === 'class') {
+            bindClassAttribute(element, this);
+            return;
+        }
+        if(attributeName === 'style') {
+            bindStyleAttribute(element, this);
+
+        }
+    };
+
+    String.prototype.handleNdAttribute = function(element, attributeName) {
+        let value = this.resolveObservableTemplate ? this.resolveObservableTemplate() : this;
+        if(Validator.isString(value)) {
+            element.setAttribute(attributeName, value);
+            return;
+        }
+        const observables = value.filter(item => Validator.isObservable(item));
+        value = Observable.computed(() => {
+            return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
+        }, observables);
+
+        if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
+            bindBooleanAttribute(element, attributeName, value);
+            return;
+        }
+
+        bindAttributeWithObservable(element, attributeName, value);
+    };
+
+    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+        bindAttributeWithObservable(element, attributeName, this);
+    };
+
+    TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
+        this.$hydrate(element, attributeName);
+    };
+
     const $nodeCache = new Map();
     let $textNodeCache = null;
 
@@ -1513,20 +1539,10 @@ var NativeComponents = (function (exports) {
         processChildren(children, parent) {
             if(children === null) return;
             PluginsManager.emit('BeforeProcessChildren', parent);
-            if(!Array.isArray(children)) {
-                let child = this.getChild(children);
-                if(child) {
-                    parent.appendChild(child);
-                }
+            let child = this.getChild(children);
+            if(child) {
+                parent.appendChild(child);
             }
-            else {
-                for(let i = 0, length = children.length; i < length; i++) {
-                    let child = this.getChild(children[i]);
-                    if (child === null) continue;
-                    parent.appendChild(child);
-                }
-            }
-
             PluginsManager.emit('AfterProcessChildren', parent);
         },
         getChild(child) {
@@ -2367,7 +2383,7 @@ var NativeComponents = (function (exports) {
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
         if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
-            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+            return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -2476,7 +2492,7 @@ var NativeComponents = (function (exports) {
     HtmlElementWrapper('meter');
 
 
-    const Button$1 = HtmlElementWrapper('button');
+    const Button = HtmlElementWrapper('button');
 
     HtmlElementWrapper('main');
     HtmlElementWrapper('section');
@@ -3085,7 +3101,7 @@ var NativeComponents = (function (exports) {
 
     const ErrorDisplayer = (errors) => {
 
-        const shouldDisplayError = $$1.computed(() => {
+        const shouldDisplayError = $.computed(() => {
             const val = errors.val();
             return (val && val.length > 0);
         }, [errors]);
@@ -3116,15 +3132,15 @@ var NativeComponents = (function (exports) {
         };
 
         if(description.showErrors) {
-            description.errors = description.errors || $$1(null);
+            description.errors = description.errors || $(null);
             field.errors(description.errors);
         }
 
-        const hasErrors = description.showErrors ? $$1.computed(() => {
+        const hasErrors = description.showErrors ? $.computed(() => {
             const errs = description.errors?.val();
             return errs && errs.length > 0;
         }, [description.errors]) : null;
-        const hasFocus = $$1(false);
+        const hasFocus = $(false);
 
         const wrapperClasses = {
             [suffix+'-wrapper']: true,
@@ -3627,7 +3643,7 @@ var NativeComponents = (function (exports) {
     function DefaultLayout({ fields, form }) {
         return Form([
             Object.values(fields),
-            Button$1({ type: 'submit', disabled: form.submitting }, 'Submit')
+            Button({ type: 'submit', disabled: form.submitting }, 'Submit')
         ]);
     }
 
@@ -4749,7 +4765,7 @@ var NativeComponents = (function (exports) {
 
         return Div({ class: 'field-collection-layout'}, [
             Div({ class: 'field-collection-layout-header'}, [
-                Button$1({ class: 'field-collection-layout-add-btn', type: 'button' }, ['Add +'])
+                Button({ class: 'field-collection-layout-add-btn', type: 'button' }, ['Add +'])
                     .nd.onClick(() => collection.add())
             ]),
             ForEachArray(data, Template)

package/dist/native-document.dev.js

@@ -1290,9 +1290,11 @@ var NativeDocument = (function (exports) {
     function toggleElementClass(element, className, shouldAdd) {
         element.classes.toggle(className, shouldAdd);
     }
+
     function toggleElementStyle(element, styleName, newValue) {
         element.style[styleName] = newValue;
     }
+
     function updateInputFromObserver(element, attributeName, newValue) {
         if(Validator.isBoolean(newValue)) {
             element[attributeName] = newValue;
@@ -1300,6 +1302,7 @@ var NativeDocument = (function (exports) {
         }
         element[attributeName] = newValue === element.value;
     }
+
     function updateObserverFromInput(element, attributeName, defaultValue, value) {
         if(Validator.isBoolean(defaultValue)) {
             value.set(element[attributeName]);
@@ -1307,6 +1310,7 @@ var NativeDocument = (function (exports) {
         }
         value.set(element.value);
     }
+
     /**
      *
      * @param {HTMLElement} element
@@ -1415,37 +1419,19 @@ var NativeDocument = (function (exports) {
             if(value === null || value === undefined) {
                 continue;
             }
-            if(Validator.isString(value)) {
-                value = value.resolveObservableTemplate ? value.resolveObservableTemplate() : value;
-                if(Validator.isString(value)) {
-                    element.setAttribute(attributeName, value);
-                    continue;
-                }
-                const observables = value.filter(item => Validator.isObservable(item));
-                value = Observable.computed(() => {
-                    return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
-                }, observables);
-            }
-            if(attributeName === 'class' && Validator.isObject(value)) {
-                bindClassAttribute(element, value);
-                continue;
-            }
-            if(attributeName === 'style' && Validator.isObject(value)) {
-                bindStyleAttribute(element, value);
+            if(value.handleNdAttribute) {
+                value.handleNdAttribute(element, attributeName, value);
                 continue;
             }
             if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
                 bindBooleanAttribute(element, attributeName, value);
-                continue;
+                return;
             }
             if(Validator.isObservable(value)) {
                 bindAttributeWithObservable(element, attributeName, value);
                 continue;
             }
-            if(value.$hydrate) {
-                value.$hydrate(element, attributeName);
-                continue;
-            }
+
             element.setAttribute(attributeName, value);
 
         }
@@ -1487,7 +1473,9 @@ var NativeDocument = (function (exports) {
     Array.prototype.toNdElement = function () {
         const fragment = document.createDocumentFragment();
         for(let i = 0, length = this.length; i < length; i++) {
-            fragment.appendChild(ElementCreator.getChild(this[i]));
+            const child = ElementCreator.getChild(this[i]);
+            if(child === null) continue;
+            fragment.appendChild(child);
         }
         return fragment;
     };
@@ -1502,6 +1490,44 @@ var NativeDocument = (function (exports) {
         return ElementCreator.createHydratableNode(null, this);
     };
 
+    Object.prototype.handleNdAttribute = function(element, attributeName) {
+        if(attributeName === 'class') {
+            bindClassAttribute(element, this);
+            return;
+        }
+        if(attributeName === 'style') {
+            bindStyleAttribute(element, this);
+
+        }
+    };
+
+    String.prototype.handleNdAttribute = function(element, attributeName) {
+        let value = this.resolveObservableTemplate ? this.resolveObservableTemplate() : this;
+        if(Validator.isString(value)) {
+            element.setAttribute(attributeName, value);
+            return;
+        }
+        const observables = value.filter(item => Validator.isObservable(item));
+        value = Observable.computed(() => {
+            return value.map(item => Validator.isObservable(item) ? item.val() : item).join(' ') || ' ';
+        }, observables);
+
+        if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
+            bindBooleanAttribute(element, attributeName, value);
+            return;
+        }
+
+        bindAttributeWithObservable(element, attributeName, value);
+    };
+
+    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+        bindAttributeWithObservable(element, attributeName, this);
+    };
+
+    TemplateBinding.prototype.handleNdAttribute = function(element, attributeName) {
+        this.$hydrate(element, attributeName);
+    };
+
     const $nodeCache = new Map();
     let $textNodeCache = null;
 
@@ -1573,20 +1599,10 @@ var NativeDocument = (function (exports) {
         processChildren(children, parent) {
             if(children === null) return;
             PluginsManager.emit('BeforeProcessChildren', parent);
-            if(!Array.isArray(children)) {
-                let child = this.getChild(children);
-                if(child) {
-                    parent.appendChild(child);
-                }
+            let child = this.getChild(children);
+            if(child) {
+                parent.appendChild(child);
             }
-            else {
-                for(let i = 0, length = children.length; i < length; i++) {
-                    let child = this.getChild(children[i]);
-                    if (child === null) continue;
-                    parent.appendChild(child);
-                }
-            }
-
             PluginsManager.emit('AfterProcessChildren', parent);
         },
         getChild(child) {
@@ -3512,9 +3528,7 @@ var NativeDocument = (function (exports) {
             },
             add(items, delay = 2) {
                 const fragment = Actions.toFragment(items);
-                Promise.resolve().then(() => {
-                    element.appendElement(fragment);
-                });
+                element.appendElement(fragment);
             },
             replace(items) {
                 clear();