native-document 1.0.154 → 1.0.156

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

@@ -34,7 +34,7 @@ var NativeComponents = (function (exports) {
     VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
     VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
 
-    const Validator$1 = {
+    const Validator = {
         isObservable(value) {
             return  value && (value.__$isObservable || value.__$Observable);
         },
@@ -51,7 +51,7 @@ var NativeComponents = (function (exports) {
             return value?.__isProxy__
         },
         isObservableOrProxy(value) {
-            return Validator$1.isObservable(value) || Validator$1.isProxy(value);
+            return Validator.isObservable(value) || Validator.isProxy(value);
         },
         isAnchor(value) {
             return value?.__Anchor__
@@ -134,8 +134,8 @@ var NativeComponents = (function (exports) {
             if(!data) {
                 return false;
             }
-            return Validator$1.isObject(data)
-                && Object.values(data).some(value => Validator$1.isObservable(value));
+            return Validator.isObject(data)
+                && Object.values(data).some(value => Validator.isObservable(value));
         },
         /**
          * Check if the data contains an observable reference.
@@ -158,7 +158,7 @@ var NativeComponents = (function (exports) {
     };
 
     const cssPropertyAccumulator = function(initialValue = {}) {
-        let data = Validator$1.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
+        let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
 
         return {
             add(key, value) {
@@ -166,7 +166,7 @@ var NativeComponents = (function (exports) {
                     data.push(key+':  '+value);
                     return;
                 }
-                if(Validator$1.isObject(key)) {
+                if(Validator.isObject(key)) {
                     value = key;
                     for(const property in value) {
                         data[property] = value[property];
@@ -185,11 +185,11 @@ var NativeComponents = (function (exports) {
     };
 
     const classPropertyAccumulator = function(initialValue = []) {
-        let data = Validator$1.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
+        let data = Validator.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
 
         return {
             add(key, value = true) {
-                if(Validator$1.isJson(key)) {
+                if(Validator.isJson(key)) {
                     for(const property in key) {
                         if(key[property]) {
                             data[property] = key[property];
@@ -347,7 +347,7 @@ var NativeComponents = (function (exports) {
         }
 
         // Observables - keep the référence
-        if (Validator$1.isObservable(value)) {
+        if (Validator.isObservable(value)) {
             onObservableFound && onObservableFound(value);
             return value;
         }
@@ -425,7 +425,7 @@ var NativeComponents = (function (exports) {
      * @class ObservableItem
      */
     function ObservableItem(value, configs = null) {
-        value = Validator$1.isObservable(value) ? value.val() : value;
+        value = Validator.isObservable(value) ? value.val() : value;
 
         this.$previousValue = null;
         this.$currentValue = value;
@@ -439,7 +439,7 @@ var NativeComponents = (function (exports) {
         if(configs) {
             this.configs = configs;
             if(configs.reset) {
-                this.$initialValue = Validator$1.isObject(value) ? deepClone(value) : value;
+                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
             }
         }
     }
@@ -657,7 +657,7 @@ var NativeComponents = (function (exports) {
         if(!watchValueList) {
             watchValueList = callback;
             this.$watchers.set(value, callback);
-        } else if(!Validator$1.isArray(watchValueList.list)) {
+        } else if(!Validator.isArray(watchValueList.list)) {
             watchValueList = [watchValueList, callback];
             callback = (value) => {
                 for(let i = 0, length = watchValueList.length; i < length; i++) {
@@ -758,7 +758,7 @@ var NativeComponents = (function (exports) {
      */
     ObservableItem.prototype.get = function(key) {
         const item = this.$currentValue[key];
-        return Validator$1.isObservable(item) ? item.val() : item;
+        return Validator.isObservable(item) ? item.val() : item;
     };
 
 
@@ -775,7 +775,7 @@ var NativeComponents = (function (exports) {
      * a.equals(10); // false
      */
     ObservableItem.prototype.equals = function(other) {
-        if(Validator$1.isObservable(other)) {
+        if(Validator.isObservable(other)) {
             return this.$currentValue === other.$currentValue;
         }
         return this.$currentValue === other;
@@ -820,7 +820,7 @@ var NativeComponents = (function (exports) {
         if(!this.configs?.reset) {
             return;
         }
-        const resetValue = (Validator$1.isObject(this.$initialValue))
+        const resetValue = (Validator.isObject(this.$initialValue))
             ? deepClone(this.$initialValue, (observable) => {
                 observable.reset();
             })
@@ -877,10 +877,10 @@ var NativeComponents = (function (exports) {
     };
 
     function createMultiSourceFilter(sources, callbackFn){
-        const observables = sources.filter(Validator$1.isObservable);
+        const observables = sources.filter(Validator.isObservable);
 
         const getValues = () => sources.map(src =>
-            Validator$1.isObservable(src) ? src.val() : src
+            Validator.isObservable(src) ? src.val() : src
         );
 
         return {
@@ -1168,7 +1168,7 @@ var NativeComponents = (function (exports) {
         const filterCallbacks = {};
 
         for (const [key, rawPredicate] of Object.entries(predicates)) {
-            const predicate = Validator$1.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
+            const predicate = Validator.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
             if (predicate && typeof predicate === 'object' && 'callback' in predicate) {
                 filterCallbacks[key] = predicate.callback;
 
@@ -1383,10 +1383,10 @@ var NativeComponents = (function (exports) {
             if(Array.isArray(itemValue)) {
                 if(configs?.deep !== false) {
                     const mappedItemValue = itemValue.map(item => {
-                        if(Validator$1.isJson(item)) {
+                        if(Validator.isJson(item)) {
                             return new ObservableObject(item, configs);
                         }
-                        if(Validator$1.isArray(item)) {
+                        if(Validator.isArray(item)) {
                             return new ObservableArray(item, configs);
                         }
                         return new ObservableItem(item, configs);
@@ -1397,7 +1397,7 @@ var NativeComponents = (function (exports) {
                 this.$observables[key] = new ObservableArray(itemValue, configs);
                 continue;
             }
-            if(Validator$1.isObservable(itemValue) || Validator$1.isProxy(itemValue)) {
+            if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
                 this.$observables[key] = itemValue;
                 continue;
             }
@@ -1409,21 +1409,21 @@ var NativeComponents = (function (exports) {
         const result = {};
         for(const key in this.$observables) {
             const dataItem = this.$observables[key];
-            if(Validator$1.isObservable(dataItem)) {
+            if(Validator.isObservable(dataItem)) {
                 let value = dataItem.val();
                 if(Array.isArray(value)) {
                     value = value.map(item => {
-                        if(Validator$1.isObservable(item)) {
+                        if(Validator.isObservable(item)) {
                             return item.val();
                         }
-                        if(Validator$1.isProxy(item)) {
+                        if(Validator.isProxy(item)) {
                             return item.$value;
                         }
                         return item;
                     });
                 }
                 result[key] = value;
-            } else if(Validator$1.isProxy(dataItem)) {
+            } else if(Validator.isProxy(dataItem)) {
                 result[key] = dataItem.$value;
             } else {
                 result[key] = dataItem;
@@ -1435,10 +1435,10 @@ var NativeComponents = (function (exports) {
 
     ObservableObject.prototype.get = function(property) {
         const item = this.$observables[property];
-        if(Validator$1.isObservable(item)) {
+        if(Validator.isObservable(item)) {
             return item.val();
         }
-        if(Validator$1.isProxy(item)) {
+        if(Validator.isProxy(item)) {
             return item.$value;
         }
         return item;
@@ -1446,7 +1446,7 @@ var NativeComponents = (function (exports) {
     ObservableObject.prototype.$get = ObservableObject.prototype.get;
 
     ObservableObject.prototype.set = function(newData) {
-        const data = Validator$1.isProxy(newData) ? newData.$value : newData;
+        const data = Validator.isProxy(newData) ? newData.$value : newData;
         const configs = this.configs;
 
         for(const key in data) {
@@ -1454,15 +1454,15 @@ var NativeComponents = (function (exports) {
             const newValueOrigin = newData[key];
             const newValue = data[key];
 
-            if(Validator$1.isObservable(targetItem)) {
-                if(!Validator$1.isArray(newValue)) {
+            if(Validator.isObservable(targetItem)) {
+                if(!Validator.isArray(newValue)) {
                     targetItem.set(newValue);
                     continue;
                 }
                 const firstElementFromOriginalValue = newValueOrigin.at(0);
-                if(Validator$1.isObservable(firstElementFromOriginalValue) || Validator$1.isProxy(firstElementFromOriginalValue)) {
+                if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
                     const newValues = newValue.map(item => {
-                        if(Validator$1.isProxy(firstElementFromOriginalValue)) {
+                        if(Validator.isProxy(firstElementFromOriginalValue)) {
                             return new ObservableObject(item, configs);
                         }
                         return ObservableItem(item, configs);
@@ -1473,7 +1473,7 @@ var NativeComponents = (function (exports) {
                 targetItem.set([...newValue]);
                 continue;
             }
-            if(Validator$1.isProxy(targetItem)) {
+            if(Validator.isProxy(targetItem)) {
                 targetItem.update(newValue);
                 continue;
             }
@@ -2099,7 +2099,7 @@ var NativeComponents = (function (exports) {
     Observable.batch = function(callback) {
         const $observer = Observable(0);
         const batch = function() {
-            if(Validator$1.isAsyncFunction(callback)) {
+            if(Validator.isAsyncFunction(callback)) {
                 return (callback(...arguments)).then(() => {
                     $observer.trigger();
                 }).catch(error => { throw error; });
@@ -2137,8 +2137,8 @@ var NativeComponents = (function (exports) {
         const getValues = () => dependencies.map((item) => item.val());
         const updatedValue = nextTick(() => observable.set(callback(...getValues())));
 
-        if(Validator$1.isFunction(dependencies)) {
-            if(!Validator$1.isObservable(dependencies.$observer)) {
+        if(Validator.isFunction(dependencies)) {
+            if(!Validator.isObservable(dependencies.$observer)) {
                 throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
             }
             dependencies.$observer.subscribe(updatedValue);
@@ -2146,7 +2146,7 @@ var NativeComponents = (function (exports) {
         }
 
         dependencies.forEach(dependency => {
-            if(Validator$1.isProxy(dependency)) {
+            if(Validator.isProxy(dependency)) {
                 dependency.$observables.forEach((observable) => {
                     observable.subscribe(updatedValue);
                 });
@@ -2190,7 +2190,7 @@ var NativeComponents = (function (exports) {
         if(data?.__$Observable) {
             return data.val();
         }
-        if(Validator$1.isProxy(data)) {
+        if(Validator.isProxy(data)) {
             return data.$value;
         }
         return data;
@@ -2320,7 +2320,7 @@ var NativeComponents = (function (exports) {
     const bindBooleanAttribute = (element, attributeName, value) => {
         const isObservable = value.__$isObservable;
         const defaultValue = isObservable? value.val() : value;
-        if(Validator$1.isBoolean(defaultValue)) {
+        if(Validator.isBoolean(defaultValue)) {
             element[attributeName] = defaultValue;
         }
         else {
@@ -2484,7 +2484,7 @@ var NativeComponents = (function (exports) {
             if(child.toNdElement) {
                 do {
                     child =  child.toNdElement();
-                    if(Validator$1.isElement(child)) {
+                    if(Validator.isElement(child)) {
                         return child;
                     }
                 } while (child.toNdElement);
@@ -2563,7 +2563,7 @@ var NativeComponents = (function (exports) {
         anchor.getParent = () => parent;
 
         anchor.appendChild = (child) => {
-            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.appendChild(child);
         };
 
@@ -2572,7 +2572,7 @@ var NativeComponents = (function (exports) {
         anchor.appendRaw = anchor.appendChildRaw;
 
         anchor.insertAtStart = (child) => {
-            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
         };
         anchor.insertAtStartRaw = (child) => {
@@ -2586,7 +2586,7 @@ var NativeComponents = (function (exports) {
         };
 
         anchor.replaceContent = function(content) {
-            const child = Validator$1.isElement(content) ? content : ElementCreator.getChild(content);
+            const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
             parent.replaceChildren(child);
         };
 
@@ -2596,7 +2596,7 @@ var NativeComponents = (function (exports) {
         anchor.setContent = anchor.replaceContent;
 
         anchor.insertBefore = (child, anchor) => {
-            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             parent.insertBefore(child, anchor);
         };
         anchor.insertBeforeRaw = (child, anchor) => {
@@ -2640,7 +2640,7 @@ var NativeComponents = (function (exports) {
             ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
         const insertBefore = (parent, child, target) => {
-            const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             insertBeforeRaw(parent, childElement, target);
         };
 
@@ -2690,7 +2690,7 @@ var NativeComponents = (function (exports) {
         anchorFragment.appendRaw = anchorFragment.appendChildRaw;
 
         anchorFragment.insertAtStart = function(child) {
-            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             anchorFragment.insertAtStartRaw(child);
         };
 
@@ -2747,7 +2747,7 @@ var NativeComponents = (function (exports) {
         anchorFragment.delete = anchorFragment.removeWithAnchors;
 
         anchorFragment.replaceContent = function(child) {
-            const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
             anchorFragment.replaceContentRaw(childElement);
         };
 
@@ -2815,7 +2815,7 @@ var NativeComponents = (function (exports) {
      * ShowIf(isVisible, Div({}, 'Hello World'));
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
-        if(!Validator$1.isObservable(condition)) {
+        if(!Validator.isObservable(condition)) {
             if(typeof condition === "boolean") {
                 return condition ? ElementCreator.getChild(child) : null;
             }
@@ -2830,7 +2830,7 @@ var NativeComponents = (function (exports) {
                 return childElement;
             }
             childElement = ElementCreator.getChild(child);
-            if(Validator$1.isFragment(childElement)) {
+            if(Validator.isFragment(childElement)) {
                 childElement = Array.from(childElement.childNodes);
             }
             return childElement;
@@ -7085,7 +7085,7 @@ var NativeComponents = (function (exports) {
             }
             else if (typeof condition === 'function') {
                 isRequired = condition(allValues);
-            } else if (Validator$1.isObservable(condition)) {
+            } else if (Validator.isObservable(condition)) {
                 isRequired = condition.val();
             } else {
                 isRequired = !!condition;
@@ -7278,7 +7278,7 @@ var NativeComponents = (function (exports) {
 
     Field.prototype.model = function(observable) {
         this.$description.value        = observable;
-        this.$description.initialValue = Validator$1.isObservable(observable)
+        this.$description.initialValue = Validator.isObservable(observable)
             ? observable.val()
             : observable;
         return this;
@@ -7287,7 +7287,7 @@ var NativeComponents = (function (exports) {
     Field.prototype.bind = Field.prototype.model;
 
     Field.prototype.errors = function(errors) {
-        if(!Validator$1.isObservable(errors)) {
+        if(!Validator.isObservable(errors)) {
             throw new Error('Errors must be an observable');
         }
         this.$description.errors = errors;
@@ -7336,12 +7336,12 @@ var NativeComponents = (function (exports) {
 
     Field.prototype.value = function() {
         const value = this.$model();
-        return Validator$1.isObservable(value) ? value.val() : value;
+        return Validator.isObservable(value) ? value.val() : value;
     };
 
     Field.prototype.setValue = function(newValue) {
         const value = this.$model();
-        if(Validator$1.isObservable(value)) {
+        if(Validator.isObservable(value)) {
             value.set(newValue);
             return this;
         }
@@ -7411,7 +7411,7 @@ var NativeComponents = (function (exports) {
 
     Field.prototype.reset = function() {
         const value = this.$model();
-        if(Validator$1.isObservable(value)) {
+        if(Validator.isObservable(value)) {
             value.set(this.$description.initialValue ?? this.$description.defaultValue ?? null);
         }
 
@@ -7513,7 +7513,7 @@ var NativeComponents = (function (exports) {
             return;
         }
 
-        if(Validator$1.isObservable(dataSource)) {
+        if(Validator.isObservable(dataSource)) {
             field.model(dataSource);
             return;
         }
@@ -8171,7 +8171,7 @@ var NativeComponents = (function (exports) {
 
     CheckboxField.prototype.checked = function() {
         const checked = this.$description.checked;
-        if(Validator$1.isObservable(checked)) {
+        if(Validator.isObservable(checked)) {
             return checked.val();
         }
         return checked;
@@ -8217,7 +8217,7 @@ var NativeComponents = (function (exports) {
 
     RadioField.prototype.checked = function() {
         const checked = this.$description.checked;
-        if(Validator$1.isObservable(checked)) {
+        if(Validator.isObservable(checked)) {
             return checked.val();
         }
         return checked;
@@ -9302,7 +9302,7 @@ var NativeComponents = (function (exports) {
         };
 
         this.$description.value.interceptMutations((items) =>
-            items.map(item => Validator$1.isObservable(item) ? item : $$1.object(item))
+            items.map(item => Validator.isObservable(item) ? item : $$1.object(item))
         );
     }
 
@@ -9348,10 +9348,10 @@ var NativeComponents = (function (exports) {
     };
 
     FieldCollection.prototype.model = function(observable) {
-        if(Validator$1.isObservable(observable)) {
+        if(Validator.isObservable(observable)) {
             this.$description.value = observable;
             this.$description.value.interceptMutations((items) =>
-                items.map(item => Validator$1.isObservable(item) ? item : $$1.object(item))
+                items.map(item => Validator.isObservable(item) ? item : $$1.object(item))
             );
             return this;
         }
@@ -9366,7 +9366,7 @@ var NativeComponents = (function (exports) {
         const raw  = this.$description.defaultItem
             ? this.$description.defaultItem()
             : {};
-        const item = Validator$1.isObservable(raw) ? raw : $$1.object(raw);
+        const item = Validator.isObservable(raw) ? raw : $$1.object(raw);
 
         this.$description.value.push(item);
         this.emit('add', item);
@@ -9391,7 +9391,7 @@ var NativeComponents = (function (exports) {
 
     FieldCollection.prototype.value = function() {
         return this.$description.value.map(item =>
-            Validator$1.isObservable(item) ? item.val() : item
+            Validator.isObservable(item) ? item.val() : item
         );
     };
 
@@ -9914,7 +9914,7 @@ var NativeComponents = (function (exports) {
 
     ListItem.prototype.selectable = function() {
         this.$description.selectable = true;
-        if(Validator$1.isObservable(this.$description.selected)) {
+        if(Validator.isObservable(this.$description.selected)) {
             return this;
         }
         this.$description.selected = $(false);
@@ -9922,7 +9922,7 @@ var NativeComponents = (function (exports) {
     };
 
     ListItem.prototype.selected = function(selected = true) {
-        if(Validator$1.isObservable(this.$description.selected)) {
+        if(Validator.isObservable(this.$description.selected)) {
             this.$description.selected.set(selected);
             return this;
         }
@@ -11714,6 +11714,18 @@ var NativeComponents = (function (exports) {
     const Row = HStack;
     const Col = VStack;
 
+    let withValidation = (fn) => fn;
+
+    const normalizeComponentArgs = function(props, children = null) {
+        if(props && children) {
+            return { props, children };
+        }
+        if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
+            return { props: children, children: props }
+        }
+        return { props, children };
+    };
+
     const EVENTS = [
       "Click",
       "DblClick",
@@ -12005,16 +12017,178 @@ var NativeComponents = (function (exports) {
         }
     });
 
-    const normalizeComponentArgs = function(props, children = null) {
-        if(props && children) {
-            return { props, children };
+    DocumentFragment.prototype.__IS_FRAGMENT = true;
+
+    Function.prototype.args = function(...args) {
+        return withValidation(this);
+    };
+
+    Function.prototype.errorBoundary = function(callback) {
+        const handler = (...args)  => {
+            try {
+                return this.apply(this, args);
+            } catch(e) {
+                return callback(e, {caller: handler, args: args });
+            }
+        };
+        return handler;
+    };
+
+    NDElement.$getChild = ElementCreator.getChild;
+
+    String.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this);
+    };
+
+    Number.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this.toString());
+    };
+
+    Element.prototype.toNdElement = function () {
+        return this;
+    };
+    Text.prototype.toNdElement = function () {
+        return this;
+    };
+    Comment.prototype.toNdElement = function () {
+        return this;
+    };
+    Document.prototype.toNdElement = function () {
+        return this;
+    };
+    DocumentFragment.prototype.toNdElement = function () {
+        return this;
+    };
+
+    ObservableItem.prototype.toNdElement = function () {
+        return ElementCreator.createObservableNode(null, this);
+    };
+
+    ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
+
+    NDElement.prototype.toNdElement = function () {
+        const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
+        if(this.$attachements) {
+            if(!this.$attachements.contains(this.$element)) {
+                this.$attachements.append(this.$element);
+            }
+            return this.$attachements;
         }
-        if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
-            return { props: children, children: props }
+        return element;
+    };
+
+    Array.prototype.toNdElement = function () {
+        const fragment = document.createDocumentFragment();
+        for(let i = 0, length = this.length; i < length; i++) {
+            const child = ElementCreator.getChild(this[i]);
+            if(child === null) continue;
+            fragment.appendChild(child);
         }
-        return { props, children };
+        return fragment;
+    };
+
+    Function.prototype.toNdElement = function () {
+        const child = this;
+        return ElementCreator.getChild(child());
+    };
+
+    /**
+     * @param {HTMLElement} el
+     * @param {number} timeout
+     */
+    const waitForVisualEnd = (el, timeout = 1000) => {
+        return new Promise((resolve) => {
+            let isResolved = false;
+
+            const cleanupAndResolve = (e) => {
+                if (e && e.target !== el) return;
+                if (isResolved) return;
+
+                isResolved = true;
+                el.removeEventListener('transitionend', cleanupAndResolve);
+                el.removeEventListener('animationend', cleanupAndResolve);
+                clearTimeout(timer);
+                resolve();
+            };
+
+            el.addEventListener('transitionend', cleanupAndResolve);
+            el.addEventListener('animationend', cleanupAndResolve);
+
+            const timer = setTimeout(cleanupAndResolve, timeout);
+
+            const style = window.getComputedStyle(el);
+            const hasTransition = style.transitionDuration !== '0s';
+            const hasAnimation = style.animationDuration !== '0s';
+
+            if (!hasTransition && !hasAnimation) {
+                cleanupAndResolve();
+            }
+        });
     };
 
+    NDElement.prototype.transitionOut = function(transitionName) {
+        const exitClass = transitionName + '-exit';
+        const el = this.$element;
+        this.beforeUnmount('transition-exit', async function() {
+            el.classes.add(exitClass);
+            await waitForVisualEnd(el);
+            el.classes.remove(exitClass);
+        });
+        return this;
+    };
+
+    NDElement.prototype.transitionIn = function(transitionName) {
+        const startClass = transitionName + '-enter-from';
+        const endClass = transitionName + '-enter-to';
+
+        const el = this.$element;
+
+        el.classes.add(startClass);
+
+        this.mounted(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    el.classes.remove(startClass);
+                    el.classes.add(endClass);
+
+                    waitForVisualEnd(el).then(() => {
+                        el.classes.remove(endClass);
+                    });
+                });
+            });
+        });
+        return this;
+    };
+
+
+    NDElement.prototype.transition = function (transitionName) {
+        this.transitionIn(transitionName);
+        this.transitionOut(transitionName);
+        return this;
+    };
+
+    NDElement.prototype.animate = function(animationName) {
+        const el = this.$element;
+        el.classes.add(animationName);
+
+        waitForVisualEnd(el).then(() => {
+            el.classes.remove(animationName);
+        });
+
+        return this;
+    };
+
+    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+            bindBooleanAttribute(element, attributeName, this);
+            return;
+        }
+
+        bindAttributeWithObservable(element, attributeName, this);
+    };
+
+    ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
+
     const createHtmlElement = (element, _attributes, _children = null) => {
         let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
 
@@ -12743,7 +12917,7 @@ var NativeComponents = (function (exports) {
     };
 
     Splitter.prototype.panels = function(panels) {
-        if(Validator$1.isObservable(this.$description.panels)) {
+        if(Validator.isObservable(this.$description.panels)) {
             this.$description.panels.clear();
         } else {
             this.$description.panels = [];
@@ -13546,161 +13720,6 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    NDElement.$getChild = ElementCreator.getChild;
-
-    String.prototype.toNdElement = function () {
-        return ElementCreator.createStaticTextNode(null, this);
-    };
-
-    Number.prototype.toNdElement = function () {
-        return ElementCreator.createStaticTextNode(null, this.toString());
-    };
-
-    Element.prototype.toNdElement = function () {
-        return this;
-    };
-    Text.prototype.toNdElement = function () {
-        return this;
-    };
-    Comment.prototype.toNdElement = function () {
-        return this;
-    };
-    Document.prototype.toNdElement = function () {
-        return this;
-    };
-    DocumentFragment.prototype.toNdElement = function () {
-        return this;
-    };
-
-    ObservableItem.prototype.toNdElement = function () {
-        return ElementCreator.createObservableNode(null, this);
-    };
-
-    ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
-
-    NDElement.prototype.toNdElement = function () {
-        const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
-        if(this.$attachements) {
-            if(!this.$attachements.contains(this.$element)) {
-                this.$attachements.append(this.$element);
-            }
-            return this.$attachements;
-        }
-        return element;
-    };
-
-    Array.prototype.toNdElement = function () {
-        const fragment = document.createDocumentFragment();
-        for(let i = 0, length = this.length; i < length; i++) {
-            const child = ElementCreator.getChild(this[i]);
-            if(child === null) continue;
-            fragment.appendChild(child);
-        }
-        return fragment;
-    };
-
-    Function.prototype.toNdElement = function () {
-        const child = this;
-        return ElementCreator.getChild(child());
-    };
-
-    /**
-     * @param {HTMLElement} el
-     * @param {number} timeout
-     */
-    const waitForVisualEnd = (el, timeout = 1000) => {
-        return new Promise((resolve) => {
-            let isResolved = false;
-
-            const cleanupAndResolve = (e) => {
-                if (e && e.target !== el) return;
-                if (isResolved) return;
-
-                isResolved = true;
-                el.removeEventListener('transitionend', cleanupAndResolve);
-                el.removeEventListener('animationend', cleanupAndResolve);
-                clearTimeout(timer);
-                resolve();
-            };
-
-            el.addEventListener('transitionend', cleanupAndResolve);
-            el.addEventListener('animationend', cleanupAndResolve);
-
-            const timer = setTimeout(cleanupAndResolve, timeout);
-
-            const style = window.getComputedStyle(el);
-            const hasTransition = style.transitionDuration !== '0s';
-            const hasAnimation = style.animationDuration !== '0s';
-
-            if (!hasTransition && !hasAnimation) {
-                cleanupAndResolve();
-            }
-        });
-    };
-
-    NDElement.prototype.transitionOut = function(transitionName) {
-        const exitClass = transitionName + '-exit';
-        const el = this.$element;
-        this.beforeUnmount('transition-exit', async function() {
-            el.classes.add(exitClass);
-            await waitForVisualEnd(el);
-            el.classes.remove(exitClass);
-        });
-        return this;
-    };
-
-    NDElement.prototype.transitionIn = function(transitionName) {
-        const startClass = transitionName + '-enter-from';
-        const endClass = transitionName + '-enter-to';
-
-        const el = this.$element;
-
-        el.classes.add(startClass);
-
-        this.mounted(() => {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    el.classes.remove(startClass);
-                    el.classes.add(endClass);
-
-                    waitForVisualEnd(el).then(() => {
-                        el.classes.remove(endClass);
-                    });
-                });
-            });
-        });
-        return this;
-    };
-
-
-    NDElement.prototype.transition = function (transitionName) {
-        this.transitionIn(transitionName);
-        this.transitionOut(transitionName);
-        return this;
-    };
-
-    NDElement.prototype.animate = function(animationName) {
-        const el = this.$element;
-        el.classes.add(animationName);
-
-        waitForVisualEnd(el).then(() => {
-            el.classes.remove(animationName);
-        });
-
-        return this;
-    };
-
-    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
-        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-            bindBooleanAttribute(element, attributeName, this);
-            return;
-        }
-
-        bindAttributeWithObservable(element, attributeName, this);
-    };
-
-    ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
-
     function ColumnGroup(title, props = {}) {
         this.$description = {
             header: title,