native-document 1.0.115 → 1.0.116

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

@@ -773,21 +773,6 @@ var NativeComponents = (function (exports) {
         return this.shadow('closed', style);
     };
 
-    /**
-     * Attaches a template binding to the element by hydrating it with the specified method.
-     *
-     * @param {string} methodName - Name of the hydration method to call
-     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
-     * @returns {HTMLElement} The underlying HTML element
-     * @example
-     * const onClick = $binder.attach((event, data) => console.log(data));
-     * element.nd.attach('onClick', onClick);
-     */
-    NDElement.prototype.attach = function(methodName, bindingHydrator) {
-        bindingHydrator.$hydrate(this.$element, methodName);
-        return this.$element;
-    };
-
     /**
      * Extends the current NDElement instance with custom methods.
      * Methods are bound to the instance and available for chaining.
@@ -1016,150 +1001,6 @@ var NativeComponents = (function (exports) {
         }
     };
 
-    function Anchor(name, isUniqueChild = false) {
-        const anchorFragment = document.createDocumentFragment();
-        anchorFragment.__Anchor__ = true;
-
-        const anchorStart = document.createComment('Anchor Start : '+name);
-        const anchorEnd = document.createComment('/ Anchor End '+name);
-
-        anchorFragment.appendChild(anchorStart);
-        anchorFragment.appendChild(anchorEnd);
-
-        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
-        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
-        anchorFragment.nativeAppend = anchorFragment.append;
-
-        const isParentUniqueChild = isUniqueChild
-            ? () => true
-            : (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
-
-        const insertBefore = function(parent, child, target) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            if(parent === anchorFragment) {
-                parent.nativeInsertBefore(childElement, target);
-                return;
-            }
-            if(isParentUniqueChild(parent) && target === anchorEnd) {
-                parent.append(childElement,  target);
-                return;
-            }
-            parent.insertBefore(childElement, target);
-        };
-
-        anchorFragment.appendElement = function(child, before = null) {
-            const parentNode = anchorStart.parentNode;
-            const targetBefore = before || anchorEnd;
-            if(parentNode === anchorFragment) {
-                parentNode.nativeInsertBefore(child, targetBefore);
-                return;
-            }
-            parentNode?.insertBefore(child, targetBefore);
-        };
-
-        anchorFragment.appendChild = function(child, before = null) {
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
-                return;
-            }
-            before = before ?? anchorEnd;
-            insertBefore(parent, child, before);
-        };
-
-        anchorFragment.append = function(...args ) {
-            return anchorFragment.appendChild(args);
-        };
-
-        anchorFragment.removeChildren = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
-            }
-
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                itemToRemove.remove();
-                itemToRemove =  tempItem;
-            }
-        };
-
-        anchorFragment.remove = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
-            }
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                anchorFragment.nativeAppend(itemToRemove);
-                itemToRemove = tempItem;
-            }
-        };
-
-        anchorFragment.removeWithAnchors = function() {
-            anchorFragment.removeChildren();
-            anchorStart.remove();
-            anchorEnd.remove();
-        };
-
-        anchorFragment.replaceContent = function(child) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, childElement, anchorEnd);
-                return;
-            }
-            anchorFragment.removeChildren();
-            parent.insertBefore(childElement, anchorEnd);
-        };
-
-        anchorFragment.setContent = anchorFragment.replaceContent;
-
-        anchorFragment.insertBefore = function(child, anchor = null) {
-            anchorFragment.appendChild(child, anchor);
-        };
-
-        anchorFragment.endElement = function() {
-            return anchorEnd;
-        };
-
-        anchorFragment.startElement = function() {
-            return anchorStart;
-        };
-        anchorFragment.restore = function() {
-            anchorFragment.appendChild(anchorFragment);
-        };
-        anchorFragment.clear = anchorFragment.remove;
-        anchorFragment.detach = anchorFragment.remove;
-
-        anchorFragment.getByIndex = function(index) {
-            let currentNode = anchorStart;
-            for(let i = 0; i <= index; i++) {
-                if(!currentNode.nextSibling) {
-                    return null;
-                }
-                currentNode = currentNode.nextSibling;
-            }
-            return currentNode !== anchorStart ? currentNode : null;
-        };
-
-        return anchorFragment;
-    }
-    DocumentFragment.prototype.setAttribute = () => {};
-
     const BOOLEAN_ATTRIBUTES = new Set([
         'checked',
         'selected',
@@ -2793,7 +2634,6 @@ var NativeComponents = (function (exports) {
         bindAttributeWithObservable(element, attributeName, this);
     };
 
-    const $nodeCache = new Map();
     let $textNodeCache = null;
 
     const ElementCreator = {
@@ -2823,7 +2663,7 @@ var NativeComponents = (function (exports) {
          * @param {{$hydrate: Function}} item
          * @returns {Text}
          */
-        createHydratableNode(parent, item) {
+        createHydratableNode: (parent, item) => {
             const text = ElementCreator.createTextNode();
             item.$hydrate(text);
             return text;
@@ -2835,7 +2675,7 @@ var NativeComponents = (function (exports) {
          * @param {*} value
          * @returns {Text}
          */
-        createStaticTextNode(parent, value) {
+        createStaticTextNode: (parent, value) => {
             let text = ElementCreator.createTextNode();
             text.nodeValue = value;
             parent && parent.appendChild(text);
@@ -2847,15 +2687,10 @@ var NativeComponents = (function (exports) {
          * @returns {HTMLElement|DocumentFragment}
          */
         createElement: (name) => {
-            if(name) {
-                const cacheNode = $nodeCache.get(name);
-                if(cacheNode) {
-                    return cacheNode.cloneNode();
-                }
-                const node = document.createElement(name);
-                $nodeCache.set(name, node);
-                return node.cloneNode();
-            }
+            const node = document.createElement(name);
+            return node.cloneNode();
+        },
+        createFragment: (name) => {
             return Anchor('Fragment');
         },
         bindTextNode: (textNode, value) => {
@@ -2871,9 +2706,9 @@ var NativeComponents = (function (exports) {
          * @param {*} children
          * @param {HTMLElement|DocumentFragment} parent
          */
-        processChildren(children, parent) {
+        processChildren: (children, parent) => {
             if(children === null) return;
-            let child = this.getChild(children);
+            let child = ElementCreator.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
@@ -2917,97 +2752,241 @@ var NativeComponents = (function (exports) {
         processStyleAttribute: bindStyleAttribute,
     };
 
-    const EVENTS = [
-      "Click",
-      "DblClick",
-      "MouseDown",
-      "MouseEnter",
-      "MouseLeave",
-      "MouseMove",
-      "MouseOut",
-      "MouseOver",
-      "MouseUp",
-      "Wheel",
-      "KeyDown",
-      "KeyPress",
-      "KeyUp",
-      "Blur",
-      "Change",
-      "Focus",
-      "Input",
-      "Invalid",
-      "Reset",
-      "Search",
-      "Select",
-      "Submit",
-      "Drag",
-      "DragEnd",
-      "DragEnter",
-      "DragLeave",
-      "DragOver",
-      "DragStart",
-      "Drop",
-      "AfterPrint",
-      "BeforePrint",
-      "BeforeUnload",
-      "Error",
-      "HashChange",
-      "Load",
-      "Offline",
-      "Online",
-      "PageHide",
-      "PageShow",
-      "Resize",
-      "Scroll",
-      "Unload",
-      "Abort",
-      "CanPlay",
-      "CanPlayThrough",
-      "DurationChange",
-      "Emptied",
-      "Ended",
-      "LoadedData",
-      "LoadedMetadata",
-      "LoadStart",
-      "Pause",
-      "Play",
-      "Playing",
-      "Progress",
-      "RateChange",
-      "Seeked",
-      "Seeking",
-      "Stalled",
-      "Suspend",
-      "TimeUpdate",
-      "VolumeChange",
-      "Waiting",
+    function Anchor(name, isUniqueChild = false) {
+        const anchorFragment = document.createDocumentFragment();
+        anchorFragment.__Anchor__ = true;
 
-      "TouchCancel",
-      "TouchEnd",
-      "TouchMove",
-      "TouchStart",
-      "AnimationEnd",
-      "AnimationIteration",
-      "AnimationStart",
-      "TransitionEnd",
-      "Copy",
-      "Cut",
-      "Paste",
-      "FocusIn",
-      "FocusOut",
-      "ContextMenu"
-    ];
+        const anchorStart = document.createComment('Anchor Start : '+name);
+        const anchorEnd = document.createComment('/ Anchor End '+name);
 
-    const EVENTS_WITH_PREVENT = [
-      "Click",
-      "DblClick",
-      "MouseDown",
-      "MouseUp",
-      "Wheel",
-      "KeyDown",
-      "KeyPress",
-      "Invalid",
-      "Reset",
+        anchorFragment.appendChild(anchorStart);
+        anchorFragment.appendChild(anchorEnd);
+
+        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
+        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+        anchorFragment.nativeAppend = anchorFragment.append;
+
+        const isParentUniqueChild = isUniqueChild
+            ? () => true
+            : (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
+
+        const insertBefore = function(parent, child, target) {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            if(parent === anchorFragment) {
+                parent.nativeInsertBefore(childElement, target);
+                return;
+            }
+            if(isParentUniqueChild(parent) && target === anchorEnd) {
+                parent.append(childElement,  target);
+                return;
+            }
+            parent.insertBefore(childElement, target);
+        };
+
+        anchorFragment.appendElement = function(child, before = null) {
+            const parentNode = anchorStart.parentNode;
+            const targetBefore = before || anchorEnd;
+            if(parentNode === anchorFragment) {
+                parentNode.nativeInsertBefore(child, targetBefore);
+                return;
+            }
+            parentNode?.insertBefore(child, targetBefore);
+        };
+
+        anchorFragment.appendChild = function(child, before = null) {
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                return;
+            }
+            before = before ?? anchorEnd;
+            insertBefore(parent, child, before);
+        };
+
+        anchorFragment.append = function(...args ) {
+            return anchorFragment.appendChild(args);
+        };
+
+        anchorFragment.removeChildren = function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, anchorEnd);
+                return;
+            }
+
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                itemToRemove.remove();
+                itemToRemove =  tempItem;
+            }
+        };
+
+        anchorFragment.remove = function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, anchorEnd);
+                return;
+            }
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                anchorFragment.nativeAppend(itemToRemove);
+                itemToRemove = tempItem;
+            }
+        };
+
+        anchorFragment.removeWithAnchors = function() {
+            anchorFragment.removeChildren();
+            anchorStart.remove();
+            anchorEnd.remove();
+        };
+
+        anchorFragment.replaceContent = function(child) {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                return;
+            }
+            if(isParentUniqueChild(parent)) {
+                parent.replaceChildren(anchorStart, childElement, anchorEnd);
+                return;
+            }
+            anchorFragment.removeChildren();
+            parent.insertBefore(childElement, anchorEnd);
+        };
+
+        anchorFragment.setContent = anchorFragment.replaceContent;
+
+        anchorFragment.insertBefore = function(child, anchor = null) {
+            anchorFragment.appendChild(child, anchor);
+        };
+
+        anchorFragment.endElement = function() {
+            return anchorEnd;
+        };
+
+        anchorFragment.startElement = function() {
+            return anchorStart;
+        };
+        anchorFragment.restore = function() {
+            anchorFragment.appendChild(anchorFragment);
+        };
+        anchorFragment.clear = anchorFragment.remove;
+        anchorFragment.detach = anchorFragment.remove;
+
+        anchorFragment.getByIndex = function(index) {
+            let currentNode = anchorStart;
+            for(let i = 0; i <= index; i++) {
+                if(!currentNode.nextSibling) {
+                    return null;
+                }
+                currentNode = currentNode.nextSibling;
+            }
+            return currentNode !== anchorStart ? currentNode : null;
+        };
+
+        return anchorFragment;
+    }
+    DocumentFragment.prototype.setAttribute = () => {};
+
+    const EVENTS = [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseEnter",
+      "MouseLeave",
+      "MouseMove",
+      "MouseOut",
+      "MouseOver",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "KeyUp",
+      "Blur",
+      "Change",
+      "Focus",
+      "Input",
+      "Invalid",
+      "Reset",
+      "Search",
+      "Select",
+      "Submit",
+      "Drag",
+      "DragEnd",
+      "DragEnter",
+      "DragLeave",
+      "DragOver",
+      "DragStart",
+      "Drop",
+      "AfterPrint",
+      "BeforePrint",
+      "BeforeUnload",
+      "Error",
+      "HashChange",
+      "Load",
+      "Offline",
+      "Online",
+      "PageHide",
+      "PageShow",
+      "Resize",
+      "Scroll",
+      "Unload",
+      "Abort",
+      "CanPlay",
+      "CanPlayThrough",
+      "DurationChange",
+      "Emptied",
+      "Ended",
+      "LoadedData",
+      "LoadedMetadata",
+      "LoadStart",
+      "Pause",
+      "Play",
+      "Playing",
+      "Progress",
+      "RateChange",
+      "Seeked",
+      "Seeking",
+      "Stalled",
+      "Suspend",
+      "TimeUpdate",
+      "VolumeChange",
+      "Waiting",
+
+      "TouchCancel",
+      "TouchEnd",
+      "TouchMove",
+      "TouchStart",
+      "AnimationEnd",
+      "AnimationIteration",
+      "AnimationStart",
+      "TransitionEnd",
+      "Copy",
+      "Cut",
+      "Paste",
+      "FocusIn",
+      "FocusOut",
+      "ContextMenu"
+    ];
+
+    const EVENTS_WITH_PREVENT = [
+      "Click",
+      "DblClick",
+      "MouseDown",
+      "MouseUp",
+      "Wheel",
+      "KeyDown",
+      "KeyPress",
+      "Invalid",
+      "Reset",
       "Submit",
       "DragOver",
       "Drop",
@@ -3211,32 +3190,194 @@ var NativeComponents = (function (exports) {
     let withValidation = (fn) => fn;
 
     const normalizeComponentArgs = function(props, children = null) {
-        if(Array.isArray(props) || typeof props !== 'object' || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
+        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 };
+        return { props, children };
+    };
+
+    /**
+     *
+     * @param {*} value
+     * @returns {Text}
+     */
+    const createTextNode = (value) => {
+        return (Validator.isObservable(value))
+            ? ElementCreator.createObservableNode(null, value)
+            : ElementCreator.createStaticTextNode(null, value);
+    };
+
+
+    const createHtmlElement = (element, _attributes, _children = null) => {
+        let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
+
+        ElementCreator.processAttributes(element, attributes);
+        ElementCreator.processChildren(children, element);
+        return element;
+    };
+
+    /**
+     *
+     * @param {string} name
+     * @param {?Function=} customWrapper
+     * @returns {Function}
+     */
+    function HtmlElementWrapper(name, customWrapper = null) {
+        if(name) {
+            if(customWrapper) {
+                let node = null;
+                let createElement = (attr, children) => {
+                    node = document.createElement(name);
+                    createElement = (attr, children) => {
+                        return createHtmlElement(customWrapper(node.cloneNode()), attr, children);
+                    };
+                    return createHtmlElement(customWrapper(node.cloneNode()), attr, children);            };
+
+                return (attr, children) => createElement(attr, children)
+            }
+
+            let node = null;
+            let createElement = (attr, children) => {
+                node = document.createElement(name);
+                createElement = (attr, children) => {
+                    return createHtmlElement(node.cloneNode(), attr, children);
+                };
+                return createHtmlElement(node.cloneNode(), attr, children);
+            };
+
+            return (attr, children) => createElement(attr, children)
+        }
+        return () => Anchor('');
+    }
+
+    function NodeCloner($element) {
+        this.$element = $element;
+        this.$classes = null;
+        this.$styles = null;
+        this.$attrs = null;
+        this.$ndMethods = null;
+    }
+
+
+    /**
+     * Attaches a template binding to the element by hydrating it with the specified method.
+     *
+     * @param {string} methodName - Name of the hydration method to call
+     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
+     * @returns {HTMLElement} The underlying HTML element
+     * @example
+     * const onClick = $binder.attach((event, data) => console.log(data));
+     * element.nd.attach('onClick', onClick);
+     */
+    NDElement.prototype.attach = function(methodName, bindingHydrator) {
+        if(typeof bindingHydrator === 'function') {
+            const element = this.$element;
+            element.nodeCloner = element.nodeCloner || new NodeCloner(element);
+            element.nodeCloner.attach(methodName, bindingHydrator);
+            return element;
+        }
+        bindingHydrator.$hydrate(this.$element, methodName);
+        return this.$element;
+    };
+
+    NodeCloner.prototype.__$isNodeCloner = true;
+
+    const buildProperties = (cache, properties, data) => {
+        for(const key in properties) {
+            cache[key] = properties[key].apply(null, data);
+        }
+        return cache;
+    };
+
+    NodeCloner.prototype.resolve = function() {
+        if(this.$content) {
+            return;
+        }
+        const steps = [];
+        if(this.$ndMethods) {
+            steps.push((clonedNode, data) => {
+                for(const methodName in this.$ndMethods) {
+                    clonedNode.nd[methodName](this.$ndMethods[methodName].bind(clonedNode, ...data));
+                }
+            });
+        }
+        if(this.$classes) {
+            const cache = {};
+            steps.push((clonedNode, data) => {
+                ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
+            });
+        }
+        if(this.$styles) {
+            const cache = {};
+            steps.push((clonedNode, data) => {
+                ElementCreator.processStyleAttribute(clonedNode, buildProperties(cache, this.$styles, data));
+            });
+        }
+        if(this.$attrs) {
+            const cache = {};
+            steps.push((clonedNode, data) => {
+                ElementCreator.processAttributes(clonedNode, buildProperties(cache, this.$attrs, data));
+            });
+        }
+
+        const stepsCount = steps.length;
+
+        this.cloneNode = function(data) {
+            const clonedNode = this.$element.cloneNode(false);
+            for(let i = 0; i < stepsCount; i++) {
+                steps[i](clonedNode, data);
+            }
+            return clonedNode;
+        };
+    };
+
+    NodeCloner.prototype.cloneNode = function(data) {
+        return this.$element.cloneNode(false);
+    };
+
+    NodeCloner.prototype.cloneTextNodeByProperty = function(data) {
+        return createTextNode(data[0][this.$content]);
+    };
+
+    NodeCloner.prototype.cloneTextNodeByCallback = function(data) {
+        return createTextNode(this.$content.apply(null, data));
+    };
+
+    NodeCloner.prototype.attach = function(methodName, callback) {
+        this.$ndMethods = this.$ndMethods || {};
+        this.$ndMethods[methodName] = callback;
+        return this;
+    };
+
+    NodeCloner.prototype.text = function(value) {
+        this.$content = value;
+        if(typeof value === 'function') {
+            this.cloneNode = NodeCloner.prototype.cloneTextNodeByCallback;
+            return this;
+        }
+        this.cloneNode = NodeCloner.prototype.cloneTextNodeByProperty;
+        return this;
+    };
+
+    NodeCloner.prototype.attr = function(attrName, value) {
+        if(attrName === 'class') {
+            this.$classes = this.$classes || {};
+            this.$classes[value.property] = value.value;
+            return this;
+        }
+        if(attrName === 'style') {
+            this.$styles = this.$styles || {};
+            this.$styles[value.property] = value.value;
+            return this;
+        }
+        this.$attrs = this.$attrs || {};
+        this.$attrs[attrName] = value.value;
+        return this;
     };
 
-    function createHtmlElement($tagName, customWrapper, _attributes, _children = null) {
-        let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
-        let element = ElementCreator.createElement($tagName);
-        let finalElement = (customWrapper && typeof customWrapper === 'function') ? customWrapper(element) : element;
-
-        ElementCreator.processAttributes(finalElement, attributes);
-        ElementCreator.processChildren(children, finalElement);
-        return finalElement;
-    }
-
-    /**
-     *
-     * @param {string} name
-     * @param {?Function=} customWrapper
-     * @returns {Function}
-     */
-    function HtmlElementWrapper(name, customWrapper = null) {
-        return createHtmlElement.bind(null, name, customWrapper);
-    }
-
     DocumentFragment.prototype.__IS_FRAGMENT = true;
 
     Function.prototype.args = function(...args) {
@@ -4001,501 +4142,18 @@ var NativeComponents = (function (exports) {
         return observable;
     };
 
-    /**
-     * Creates a `<div>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDivElement}
-     */
-    HtmlElementWrapper('div');
-
-    /**
-     * Creates a `<span>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLSpanElement}
-     */
-    HtmlElementWrapper('span');
-
-    /**
-     * Creates a `<label>` element.
-     * @type {function(LabelAttributes=, NdChild|NdChild[]=): HTMLLabelElement}
-     */
-    HtmlElementWrapper('label');
-
-    /**
-     * Creates a `<p>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
-     */
-    HtmlElementWrapper('p');
-
-    /**
-     * Creates a `<strong>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('strong');
-
-    /**
-     * Creates a `<h1>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
-     */
-    HtmlElementWrapper('h1');
-
-    /**
-     * Creates a `<h2>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
-     */
-    HtmlElementWrapper('h2');
-
-    /**
-     * Creates a `<h3>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
-     */
-    HtmlElementWrapper('h3');
-
-    /**
-     * Creates a `<h4>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
-     */
-    HtmlElementWrapper('h4');
-
-    /**
-     * Creates a `<h5>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
-     */
-    HtmlElementWrapper('h5');
-
-    /**
-     * Creates a `<h6>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
-     */
-    HtmlElementWrapper('h6');
-
-    /**
-     * Creates a `<br>` element.
-     * @type {function(GlobalAttributes=): HTMLBRElement}
-     */
-    HtmlElementWrapper('br');
-
-    /**
-     * Creates an `<a>` element.
-     * @type {function(AnchorAttributes=, NdChild|NdChild[]=): HTMLAnchorElement}
-     */
-    HtmlElementWrapper('a');
-
-    /**
-     * Creates a `<pre>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLPreElement}
-     */
-    HtmlElementWrapper('pre');
-
-    /**
-     * Creates a `<code>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('code');
-
-    /**
-     * Creates a `<blockquote>` element.
-     * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
-     */
-    HtmlElementWrapper('blockquote');
-
-    /**
-     * Creates an `<hr>` element.
-     * @type {function(GlobalAttributes=): HTMLHRElement}
-     */
-    HtmlElementWrapper('hr');
-
-    /**
-     * Creates an `<em>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('em');
-
-    /**
-     * Creates a `<small>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('small');
-
-    /**
-     * Creates a `<mark>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('mark');
-
-    /**
-     * Creates a `<del>` element.
-     * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
-     */
-    HtmlElementWrapper('del');
-
-    /**
-     * Creates an `<ins>` element.
-     * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
-     */
-    HtmlElementWrapper('ins');
-
-    /**
-     * Creates a `<sub>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('sub');
-
-    /**
-     * Creates a `<sup>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('sup');
-
-    /**
-     * Creates an `<abbr>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('abbr');
-
-    /**
-     * Creates a `<cite>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('cite');
-
-    /**
-     * Creates a `<q>` element.
-     * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
-     */
-    HtmlElementWrapper('q');
-
-    /**
-     * Creates a `<dl>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDListElement}
-     */
-    HtmlElementWrapper('dl');
-
-    /**
-     * Creates a `<dt>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('dt');
-
-    /**
-     * Creates a `<dd>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('dd');
-
-    /**
-     * Creates a `<form>` element.
-     * Extended with fluent methods: `.submit()`, `.post()`, `.get()`, `.multipartFormData()`.
-     * @type {function(FormAttributes=, NdChild|NdChild[]=): HTMLFormElement & {
-     *   submit: (actionOrFn: string | ((e: SubmitEvent) => void)) => HTMLFormElement,
-     *   post: (action: string) => HTMLFormElement,
-     *   get: (action: string) => HTMLFormElement,
-     *   multipartFormData: () => HTMLFormElement,
-     * }}
-     */
-    HtmlElementWrapper('form', function(el) {
-
-        el.submit = function(action) {
-            if(typeof action === 'function') {
-                el.onSubmit((e) => {
-                    e.preventDefault();
-                    action(e);
-                });
-                return el;
-            }
-            this.setAttribute('action', action);
-            return el;
-        };
-        el.multipartFormData = function() {
-            this.setAttribute('enctype', 'multipart/form-data');
-            return el;
-        };
-        el.post = function(action) {
-            this.setAttribute('method', 'post');
-            this.setAttribute('action', action);
-            return el;
-        };
-        el.get = function(action) {
-            this.setAttribute('method', 'get');
-            this.setAttribute('action', action);
-        };
-        return el;
-    });
-
-    /**
-     * Creates an `<input>` element.
-     * @type {function(InputAttributes=): HTMLInputElement}
-     */
-    HtmlElementWrapper('input');
-
-    /**
-     * Creates a `<textarea>` element.
-     * @type {function(TextAreaAttributes=, NdChild|NdChild[]=): HTMLTextAreaElement}
-     */
-    HtmlElementWrapper('textarea');
-
-    /**
-     * Creates a `<select>` element.
-     * @type {function(SelectAttributes=, NdChild|NdChild[]=): HTMLSelectElement}
-     */
-    HtmlElementWrapper('select');
-
-    /**
-     * Creates a `<fieldset>` element.
-     * @type {function(GlobalAttributes & { disabled?: Observable<boolean>|boolean }=, NdChild|NdChild[]=): HTMLFieldSetElement}
-     */
-    HtmlElementWrapper('fieldset');
-
-    /**
-     * Creates an `<option>` element.
-     * @type {function(OptionAttributes=, NdChild|NdChild[]=): HTMLOptionElement}
-     */
-    HtmlElementWrapper('option');
-
-    /**
-     * Creates a `<legend>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLLegendElement}
-     */
-    HtmlElementWrapper('legend');
-
-    /**
-     * Creates a `<datalist>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDataListElement}
-     */
-    HtmlElementWrapper('datalist');
-
-    /**
-     * Creates an `<output>` element.
-     * @type {function(OutputAttributes=, NdChild|NdChild[]=): HTMLOutputElement}
-     */
-    HtmlElementWrapper('output');
-
-    /**
-     * Creates a `<progress>` element.
-     * @type {function(ProgressAttributes=, NdChild|NdChild[]=): HTMLProgressElement}
-     */
-    HtmlElementWrapper('progress');
-
-    /**
-     * Creates a `<meter>` element.
-     * @type {function(MeterAttributes=, NdChild|NdChild[]=): HTMLMeterElement}
-     */
-    HtmlElementWrapper('meter');
-
     /**
      * Creates a `<button>` element.
      * @type {function(ButtonAttributes=, NdChild|NdChild[]=): HTMLButtonElement}
      */
     const Button$1 = HtmlElementWrapper('button');
 
-    /**
-     * Creates a `<main>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('main');
-
-    /**
-     * Creates a `<section>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('section');
-
-    /**
-     * Creates an `<article>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('article');
-
-    /**
-     * Creates an `<aside>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('aside');
-
-    /**
-     * Creates a `<nav>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('nav');
-
-    /**
-     * Creates a `<figure>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('figure');
-
-    /**
-     * Creates a `<figcaption>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('figcaption');
-
-    /**
-     * Creates a `<header>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('header');
-
-    /**
-     * Creates a `<footer>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('footer');
-
-    /**
-     * Creates an `<img>` element.
-     * @type {function(ImgAttributes=): HTMLImageElement}
-     */
-    HtmlElementWrapper('img');
-
-    /**
-     * Creates a `<details>` element.
-     * @type {function(DetailsAttributes=, NdChild|NdChild[]=): HTMLDetailsElement}
-     */
-    HtmlElementWrapper('details');
-
-    /**
-     * Creates a `<summary>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('summary');
-
-    /**
-     * Creates a `<dialog>` element.
-     * @type {function(DialogAttributes=, NdChild|NdChild[]=): HTMLDialogElement}
-     */
-    HtmlElementWrapper('dialog');
-
-    /**
-     * Creates a `<menu>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLMenuElement}
-     */
-    HtmlElementWrapper('menu');
-
-    /**
-     * Creates an `<ol>` element.
-     * @type {function(OlAttributes=, NdChild|NdChild[]=): HTMLOListElement}
-     */
-    HtmlElementWrapper('ol');
-
-    /**
-     * Creates a `<ul>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLUListElement}
-     */
-    HtmlElementWrapper('ul');
-
-    /**
-     * Creates a `<li>` element.
-     * @type {function(GlobalAttributes & { value?: number }=, NdChild|NdChild[]=): HTMLLIElement}
-     */
-    HtmlElementWrapper('li');
-
-    /**
-     * Creates an `<audio>` element.
-     * @type {function(AudioAttributes=, NdChild|NdChild[]=): HTMLAudioElement}
-     */
-    HtmlElementWrapper('audio');
-
-    /**
-     * Creates a `<video>` element.
-     * @type {function(VideoAttributes=, NdChild|NdChild[]=): HTMLVideoElement}
-     */
-    HtmlElementWrapper('video');
-
-    /**
-     * Creates a `<source>` element.
-     * @type {function(SourceAttributes=): HTMLSourceElement}
-     */
-    HtmlElementWrapper('source');
-
-    /**
-     * Creates a `<track>` element.
-     * @type {function(TrackAttributes=): HTMLTrackElement}
-     */
-    HtmlElementWrapper('track');
-
-    /**
-     * Creates a `<canvas>` element.
-     * @type {function(CanvasAttributes=, NdChild|NdChild[]=): HTMLCanvasElement}
-     */
-    HtmlElementWrapper('canvas');
-
-    /**
-     * Creates an `<svg>` element.
-     * @type {function(SvgAttributes=, NdChild|NdChild[]=): SVGSVGElement}
-     */
-    HtmlElementWrapper('svg');
-
-    /**
-     * Creates a `<time>` element.
-     * @type {function(TimeAttributes=, NdChild|NdChild[]=): HTMLTimeElement}
-     */
-    HtmlElementWrapper('time');
-
-    /**
-     * Creates a `<data>` element.
-     * @type {function(GlobalAttributes & { value?: Observable<string>|string }=, NdChild|NdChild[]=): HTMLDataElement}
-     */
-    HtmlElementWrapper('data');
-
-    /**
-     * Creates an `<address>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('address');
-
-    /**
-     * Creates a `<kbd>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('kbd');
-
-    /**
-     * Creates a `<samp>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('samp');
-
-    /**
-     * Creates a `<var>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
-     */
-    HtmlElementWrapper('var');
-
-    /**
-     * Creates a `<wbr>` element.
-     * @type {function(GlobalAttributes=): HTMLElement}
-     */
-    HtmlElementWrapper('wbr');
-
-    /**
-     * Creates a `<caption>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableCaptionElement}
-     */
-    HtmlElementWrapper('caption');
-
     /**
      * Creates a `<table>` element.
      * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableElement}
      */
     const Table = HtmlElementWrapper('table');
 
-    /**
-     * Creates a `<thead>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
-     */
-    HtmlElementWrapper('thead');
-
-    /**
-     * Creates a `<tfoot>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
-     */
-    HtmlElementWrapper('tfoot');
-
-    /**
-     * Creates a `<tbody>` element.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
-     */
-    HtmlElementWrapper('tbody');
-
     /**
      * Creates a `<tr>` element.
      * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableRowElement}
@@ -4520,19 +4178,6 @@ var NativeComponents = (function (exports) {
      */
     const THeadCell$1 = Th;
 
-    /**
-     * Creates a `<td>` element.
-     * @type {function(TdAttributes=, NdChild|NdChild[]=): HTMLTableCellElement}
-     */
-    HtmlElementWrapper('td');
-
-    /**
-     * Creates an empty `DocumentFragment` wrapper.
-     * Useful for grouping elements without adding a DOM node.
-     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): DocumentFragment}
-     */
-    HtmlElementWrapper('');
-
     /**
      * Represents an individual item within an Accordion component
      * @param {{ id?: string|number, title?: string, icon?: string, collapsible?: boolean, content?: ValidChildren, renderHeader?: Function, renderContent?: Function, render?: Function, expanded?: Observable<boolean>, disabled?: boolean }} config - Configuration object