ignite-html/src/ignite-template.js

import { IgniteProperty } from './ignite-html.js';
import { IgniteElement } from './ignite-element.js';

/**
 * The outline of a ignite template. Templates are a blueprint that specify's
 * how to construct an element and then can be used to construct the element. Everything
 * starts with a template.
 * 
 * @example
 * //You can easily create a template to construct any html element. See the following:
 * class div extends IgniteTemplate {
 *  constructor(...items) {
 *      super("div", items);
 *  }
 * }
 */
class IgniteTemplate {

    /**
     * Creates a new IgniteTemplate with the tag name of the element that will be constructed and an
     * array of child elements.
     * @param {String} tagName The tag name of the element this template will construct.
     * @param {String|Number|IgniteProperty|IgniteTemplate} children An array of child elements to be added to this template.
     */
    constructor(tagName = null, children = null) {
        this.siblings = [];
        this.children = [];
        this.attributes = {};
        this.classes = [];
        this.tagName = tagName;
        this.element = null;
        this.properties = {};
        this.refs = [];
        this.callbacks = [];
        this.events = {};
        this.styles = {};
        this.elementValue = null;
        this.elementInnerHTML = null;

        if (children) {
            for (var i = 0; i < children.length; i++) {
                if (children[i] instanceof IgniteProperty) {
                    this.children.push(new html(children[i]));
                } else if (children[i] instanceof String || typeof children[i] === 'string') {
                    this.children.push(new html(children[i]));
                } else if (children[i] instanceof Number || typeof children[i] === 'number') {
                    this.children.push(new html(children[i]));
                } else if (children[i] instanceof IgniteTemplate || children[i].prototype instanceof IgniteTemplate) {
                    this.children.push(children[i]);
                } else {
                    throw `Attempted to add a child for template: ${this.tagName} which is not supported. Child: ${children[i]}`;
                }
            }
        }
    }

    /**
     * Adds a CSS class to be added once this template is constructed.
     * @param {String|IgniteProperty} name Name of the CSS class to add. Multiple CSS classes are supported if they are separated by a space.
     * @param {Function} converter Optional function that can convert the class name into a different one.
     * @example
     *  .class("row justify-content-center")
     * @returns This ignite template so function calls can be chained.
     */
    class(name, converter = null) {
        IgniteRenderingContext.push();

        if (name instanceof IgniteProperty) {
            this.callbacks.push(name.attachOnChange((oldValue, newValue) => this.onClassChanged(oldValue, newValue, converter)));
            var value = (converter != null ? converter(name.value) : name.value);
            var classes = (value != null ? value.toString().split(" ") : []);
            classes.forEach((cl) => {
                if (cl.length > 0) {
                    this.classes.push(cl);
                }
            });
        } else {
            var value = (converter != null ? converter(name) : name);
            var classes = (value != null ? value.toString().split(" ") : []);
            classes.forEach((cl) => {
                if (cl.length > 0) {
                    this.classes.push(cl);
                }
            });
        }

        IgniteRenderingContext.pop();
        return this;
    }

    /**
     * Adds a html element attribute to this template to be added once this template is constructed.
     * @param {String} name The name of the attribute to add
     * @param {String|IgniteProperty} value The value of the attribute to set, can be anything. If Property is passed it will auto update.
     * @param {Function} converter Optional function that can convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    attribute(name, value, converter = null) {
        IgniteRenderingContext.push();

        if (value instanceof IgniteProperty) {
            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onAttributeChanged(oldValue, newValue, name, converter)));
            this.attributes[name] = converter != null ? converter(value.value) : value.value;
        } else {
            this.attributes[name] = converter != null ? converter(value) : value;
        }

        IgniteRenderingContext.pop();
        return this;
    }

    /**
     * Sets the value of the element this template is constructing with the option to reflect changes
     * to the value.
     * @param {String|IgniteProperty} value The value to set on the element.
     * @param {Boolean} reflect Whether or not to reflect changes to the value of the element back to the property if one was used.
     * @param {Function} converter Optional function that can convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    value(value, reflect = false, converter = null) {
        IgniteRenderingContext.push();

        if (reflect && converter != null) {
            throw `Cannot set a value on an IgniteTemplate: ${this.tagName} with reflect and a converter used at the same time.`;
        }

        if (value instanceof IgniteProperty) {
            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onValueChanged(oldValue, newValue, converter)));

            if (reflect) {
                this.on("change", (event) => {
                    var newValue = (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox" ? this.element.checked : this.element.value);
                    value.setValue(newValue, true);
                });

                this.on("keyup", (event) => {
                    var newValue = (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox" ? this.element.checked : this.element.value);
                    value.setValue(newValue, true);
                });
            }

            this.elementValue = (converter != null ? converter(value.value) : value.value);
        } else {
            this.elementValue = (converter != null ? converter(value) : value);
        }

        IgniteRenderingContext.pop();
        return this;
    }

    /**
     * Adds a property to this template to be added once this template is constructed.
     * @param {String} name Name of the property to set.
     * @param {Any|IgniteProperty} value Value of the property to use. If a Property is passed the value will auto update.
     * @param {Boolean} reflect If true whenever this property is changed it's value will be passed back to the Property that was passed as value if one was passed.
     * @param {Function} converter Optional function that can be used to convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    property(name, value, reflect = false, converter = null) {
        IgniteRenderingContext.push();

        if (this.properties[name]) {
            throw `Attempted to set a property twice on a IgniteTemplate: ${this.tagName}. This is not allowed and should be avoided.`;
        }

        if (reflect && converter != null) {
            throw `Cannot add a property to an IgniteTemplate: ${this.tagName} with reflect and a converter used at the same time.`;
        }

        if (value instanceof IgniteProperty) {
            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue, name, converter)));
            this.properties[name] = {
                value: (converter != null ? converter(value.value) : value.value),
                reflect: (reflect == true ? value : null)
            };
        } else {
            this.properties[name] = {
                value: (converter != null ? converter(value) : value),
                reflect: null
            };
        }

        IgniteRenderingContext.pop();
        return this;
    }

    /**
     * Sets the inner html of the element to be constructed by this template.
     * @param {String|IgniteProperty} value InnerHTML to set for element. If a property is passed the html will auto update.
     * @param {Function} converter Optional function that can be used to convert the value if needed.
     * @returns This ignite template so funciton calls can be chained.
     */
    innerHTML(value, converter = null) {
        IgniteRenderingContext.push();

        if (value instanceof IgniteProperty) {
            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onInnerHTMLChanged(oldValue, newValue, converter)));
            this.elementInnerHTML = (converter != null ? converter(value.value) : value.value);
        } else {
            this.elementInnerHTML = (converter != null ? converter(value) : value);
        }

        IgniteRenderingContext.pop();
        return this;
    }

    /**
     * Adds a single or series of children to be added once this template
     * is constructed. Numbers, Strings, and Properties passed will be added as HTML child elements.
     * @param  {...Number|String|IgniteProperty|IgniteTemplate} items A series of children to be added to this template.
     * @returns This ignite template so function calls can be chained.
     */
    child(...items) {
        if (items) {
            for (var i = 0; i < items.length; i++) {
                if (items[i] instanceof IgniteProperty) {
                    this.children.push(new html(items[i]));
                } else if (items[i] instanceof String || typeof items[i] === 'string') {
                    this.children.push(new html(items[i]));
                } else if (items[i] instanceof Number || typeof items[i] === 'number') {
                    this.children.push(new html(items[i]));
                } else if (items[i] instanceof IgniteTemplate || items[i].prototype instanceof IgniteTemplate) {
                    this.children.push(items[i]);
                } else {
                    throw `Attempted to add a child for template: ${this.tagName} which is not supported. Child: ${items[i]}`;
                }
            }
        }

        return this;
    }

    /**
     * Adds a reference callback function to be invoked once this template is constructed. The function will be invoked
     * with the constructed HTMLElement. If an IgniteProperty is passed it's value will be set to the constructed HTMLElement once
     * the template is constructed.
     * @param {Function|IgniteProperty} refCallback The callback to be invoked with the HTMLElement of the element this template constructed.
     * @returns This ignite template so function calls can be chained.
     */
    ref(refCallback) {
        if (refCallback instanceof IgniteProperty) {
            this.callbacks.push(refCallback.attachOnChange((oldValue, newValue) => this.onRefChanged(oldValue, newValue, refCallback)));
            this.refs.push((element) => refCallback.value = element);
        } else {
            this.refs.push(refCallback);
        }

        return this;
    }

    /**
     * Adds an event by its name and the function to invoke once the event fires. Properties may be used
     * for the function, but their value must be a valid function in order to get a proper event callback.
     * @param {String} eventName The name of the event to add.
     * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
     * @returns This ignite template so function calls can be chained.
     */
    on(eventName, eventCallback) {
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }

        if (eventCallback instanceof IgniteProperty) {
            this.callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => this.onEventChanged(oldValue, newValue, eventName)));
            this.events[eventName].push(eventCallback.value);
        } else {
            this.events[eventName].push(eventCallback);
        }

        return this;
    }

    /**
     * Adds an onclick event handler to this template.
     * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
     * @returns This ignite template so function calls can be chained.
     */
    onClick(eventCallback) {
        return this.on("click", eventCallback);
    }

    /**
     * Adds a onblur event handler to this template.
     * @param {Function|IgniteProperty} eventCallback THe callback function to be invoked by the event once it fires.
     * @returns This ignite template so function calls can be chained.
     */
    onBlur(eventCallback) {
        return this.on("blur", eventCallback);
    }

    /**
     * Adds a onfocus event handler to this template.
     * @param {Function|IgniteProperty} eventCallback THe callback function to be invoked by the event once it fires.
     * @returns This ignite template so function calls can be chained.
     */
    onFocus(eventCallback) {
        return this.on("focus", eventCallback);
    }

    /**
     * Adds a on enter key press event handler to this template.
     * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
     * @returns This ignite template so function calls can be chained.
     */
    onEnter(eventCallback) {
        var eventName = "keydown";

        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }

        if (eventCallback instanceof IgniteProperty) {
            this.callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => {
                //Create a new wrapped function to check for the enter key being pressed.
                var wrapped = (e) => {
                    if (e.key === 'Enter') {
                        newValue(e);
                    }
                };

                eventCallback._value = wrapped; //Store the wrapped function into the property so we can remove it later
                this.onEventChanged(oldValue, wrapped, eventName); //Invoke event changed with the old value and wrapped one.
            }));

            //Create the initial wrapper
            var target = eventCallback._value;
            var wrapped = (e) => {
                if (e.key === 'Enter') {
                    target(e);
                }
            };

            //Store the wrapped so that it's the old value next time around.
            eventCallback._value = wrapped;

            this.events[eventName].push(wrapped);
        } else {
            this.on(eventName, (e) => {
                if (e.key === 'Enter') {
                    eventCallback(e);
                }
            });
        }

        return this;
    }

    /**
    * Adds a on backspace key press event handler to this template.
    * @param {Function|IgniteProperty} eventCallback The callback function to be invoked by the event once it fires.
    * @returns This ignite template so function calls can be chained.
    */
    onBackspace(eventCallback) {
        var eventName = "keydown";

        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }

        if (eventCallback instanceof IgniteProperty) {
            this.callbacks.push(eventCallback.attachOnChange((oldValue, newValue) => {
                //Create a new wrapped function to check for the enter key being pressed.
                var wrapped = (e) => {
                    if (e.key === 'Backspace') {
                        newValue(e);
                    }
                };

                eventCallback._value = wrapped; //Store the wrapped function into the property so we can remove it later
                this.onEventChanged(oldValue, wrapped, eventName); //Invoke event changed with the old value and wrapped one.
            }));

            //Create the initial wrapper
            var target = eventCallback._value;
            var wrapped = (e) => {
                if (e.key === 'Backspace') {
                    target(e);
                }
            };

            //Store the wrapped so that it's the old value next time around.
            eventCallback._value = wrapped;

            this.events[eventName].push(wrapped);
        } else {
            this.on(eventName, (e) => {
                if (e.key === 'Backspace') {
                    eventCallback(e);
                }
            });
        }

        return this;
    }

    /**
     * Adds a CSS property to this template with a value and priority.
     * @param {String} name The name of the CSS property to set.
     * @param {String|IgniteProperty} value The value to set for the property. If an IgniteProperty is used it will auto update this style.
     * @param {String} priority If set to "important" then the style will be marked with !important. Acceptable values: important, !important, true, false, null
     * @param {Function} converter Optional function to convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    style(name, value, priority = null, converter = null) {
        IgniteRenderingContext.push();

        //If the name has a : remove it.
        if (name && typeof name === "string" && name.includes(":")) {
            name = name.replace(":", "");
        }

        //If the priority starts with a ! remove it.
        if (priority && typeof priority === "string" && priority.trim().startsWith("!")) {
            priority = priority.split("!")[1].trim();
        } else if (priority && typeof priority === "boolean") {
            priority = "important"; //If priority is true, set it to important
        } else if (!priority && typeof priority === "boolean") {
            priority = null; //If priority is false, set it to null.
        }

        //If the value has a ; remove it.
        if (value && typeof value === "string" && value.includes(";")) {
            value = value.replace(";", "");
        }

        if (value instanceof IgniteProperty) {
            this.callbacks.push(value.attachOnChange((oldValue, newValue) => this.onStyleChanged(name, (converter ? converter(newValue) : newValue))));
            this.styles[name] = { name: name, value: (converter ? converter(value.value) : value.value), priority: priority };
        } else if (Array.isArray(value) && value.length > 0 && value[0] instanceof IgniteProperty) {
            //There must be a converter for this to work correctly
            if (!converter) {
                throw "Cannot pass an array of properties without using a converter";
            }

            //Attack a callback for all the properties
            value.forEach(prop => {
                this.callbacks.push(prop.attachOnChange((oldValue, newValue) => this.onStyleChanged(name, converter(...value.getPropertyValues()))));
                this.callbacks.push(prop.attachOnPush((oldValue, newValue) => this.onStyleChanged(name, converter(...value.getPropertyValues()))));
                this.callbacks.push(prop.attachOnPop((oldValue, newValue) => this.onStyleChanged(name, converter(...value.getPropertyValues()))));
            });

            this.styles[name] = { name: name, value: converter(...this.getValuesForProperties(value)), priority: priority };
        } else {
            this.styles[name] = { name: name, value: (converter != null ? converter(value) : value), priority: priority };
        }

        IgniteRenderingContext.pop();

        return this;
    }

    /**
     * Hides the element this template is constructing if the value is true.
     * @param {Boolean} value If true hides the element this template is constructing. If an IgniteProperty is passed it's value will auto update this.
     * @param {Function} converter An optional function to convert the value if needed.
     */
    hide(value, converter = null) {
        return this.style("display", value, true, (...params) => {
            return ((converter != null && converter(...params)) || (converter == null && params[0])) ? "none" : null;
        });
    }

    /**
     * Sets the id attribute of the element to be constructed by this template.
     * @param {String|IgniteProperty} value The value to set for the id attribute of the element this template will construct.
     * @param {Function} converter An optional function that can convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    id(value, converter = null) {
        return this.attribute("id", value, converter);
    }

    /**
     * Sets the type attribute of the element to be constructed by this template.
     * @param {String|IgniteProperty} value The value to set for the type attribute of the element this template will construct.
     * @param {Function} converter An optional function that can convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    type(value, converter = null) {
        return this.attribute("type", value, converter);
    }

    /**
     * Sets a data attribute on the element to be constructed by this template.
     * @param {String} name The name of the data attribute to set on the element this template will construct.
     * @param {String|IgniteProperty} value The value to set for the data attribute of the element this template will construct. 
     * @param {*} converter An optional function that can convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    data(name, value, converter = null) {
        return this.attribute(`data-${name}`, value, converter);
    }

    /**
     * Sets the value attribute of the element to be constructed by this template.
     * @param {String|IgniteProperty} value The value to set for the src attribute of the element to be constructed by this template.
     * @param {Function} converter An optional function that can convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    src(value, converter = null) {
        return this.attribute("src", value, converter);
    }

    /**
     * Sets the value attribute of the element to be constructed by this template.
     * @param {String|IgniteProeprty} value The value to set for the href attribute of the element to be constructed by this template. 
     * @param {Function} converter An optional function that can convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    href(value, converter = null) {
        return this.attribute("href", value, converter);
    }

    /**
     * Sets the name attribute of the element to be constructed by this template.
     * @param {String|IgniteProperty} value The value to set for the name attribute of the element to be constructed by this template.
     * @param {Function} converter An optional function that can convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    name(value, converter = null) {
        return this.attribute("name", value, converter);
    }

    /**
     * Sets the placeholder attribute of the element to be constructed by this template.
     * @param {String|IgniteProperty} value The value to set for the placeholder attribute of the element.
     * @param {Function} converter An optional function that can convert the value if needed.
     * @returns This ignite template so function calls can be chained.
     */
    placeholder(value, converter = null) {
        return this.attribute("placeholder", value, converter);
    }

    /**
     * Constructs this template and adds it to the DOM if this template
     * has not already been constructed.
     * @param {HTMLElement} parent Parent element that will contain the constructed element.
     * @param {HTMLElement} sibling Optional sibling element that can be used to add the element adjacantly.
     */
    construct(parent, sibling) {
        //Don't construct if we have no parent, no sibling and no element.
        if (!parent && !sibling && !this.element) {
            return;
        }

        //Construct this element if we haven't already
        if (!this.element) {
            this.element = window.document.createElement(this.tagName);

            //Pass back our template to the element we are creating if it's not a ignite element, since
            //it will have it's own template automatically.
            if (!(this.element instanceof IgniteElement)) {
                this.element.template = this;
            }

            //If the element has a onDisconnected function, attach to it
            //(This way if a custom element is removed we can deconstruct and cleanup)
            if (this.element.onDisconnected !== undefined) {
                this.element.onDisconnected = () => this.deconstruct();
            }

            //Invoke any refs we have and pass back the element reference.
            this.refs.forEach((ref) => ref(this.element));
        }

        //Set the classes on this element
        for (var i = 0; i < this.classes.length; i++) {
            if (this.classes[i] !== null && this.classes[i] !== undefined && this.classes[i] !== "") {
                this.element.classList.add(this.classes[i]);
            }
        }

        //Set the attributes on this element
        var keys = Object.keys(this.attributes);
        for (var i = 0; i < keys.length; i++) {
            if (this.attributes[keys[i]] !== null && this.attributes[keys[i]] !== undefined) {
                this.element.setAttribute(keys[i], this.attributes[keys[i]]);
            }
        }

        //Set the events on this element
        var keys = Object.keys(this.events);
        for (var i = 0; i < keys.length; i++) {
            this.events[keys[i]].forEach((event) => {
                if (event !== null && event !== undefined) {
                    this.element.addEventListener(keys[i], event);
                }
            });
        }

        //Set the styles on this element.
        var keys = Object.keys(this.styles);
        for (var i = 0; i < keys.length; i++) {
            var style = this.styles[keys[i]];
            this.element.style.setProperty(style.name, style.value, style.priority);
        }

        //Set the properties on this element
        var keys = Object.keys(this.properties);
        for (var i = 0; i < keys.length; i++) {
            this.element[keys[i]] = this.properties[keys[i]].value;

            if (this.properties[keys[i]].reflect != null) {
                this.element[keys[i]].reflected.push(this.properties[keys[i]].reflect);
            }
        }

        //Set the elements value if there is one.
        if (this.elementValue != null) {
            if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") {
                this.element.checked = this.elementValue;
            } else {
                this.element.value = this.elementValue;
            }
        }

        //Set the elements inner html if it was set
        if (this.elementInnerHTML != null) {
            this.element.innerHTML = this.elementInnerHTML;
        }

        //Construct the children under this element
        for (var i = 0; i < this.children.length; i++) {
            this.children[i].construct(this.element);
        }

        //If our element has not been added to the dom yet, then add it.
        if (this.element.isConnected == false && this.element.parentElement == null) {
            if (sibling) {
                parent.insertBefore(this.element, sibling);
            } else {
                parent.appendChild(this.element);
            }
        }
    }

    /**
     * Deconstructs this template and cleans up all resources to make sure
     * there are no memory leaks.
     */
    deconstruct() {
        //Remove and disconnect all events
        if (this.element && this.events) {
            var keys = Object.keys(this.events);
            for (var i = 0; i < keys.length; i++) {
                this.element.removeEventListener(keys[i], this.events[keys[i]]);
            }
            this.events = null;
        }

        //Remove our element if we have one.
        if (this.element) {
            this.element.remove();
            this.element = null;
        }

        //Deconstruct all children elements.
        if (this.children) {
            for (var i = 0; i < this.children.length; i++) {
                if (this.children[i] instanceof IgniteTemplate || this.children[i].prototype instanceof IgniteTemplate) {
                    this.children[i].deconstruct();
                }
            }
            this.children = null;
        }

        //Disconnect all callbacks
        if (this.callbacks) {
            this.callbacks.forEach((item) => item.disconnect());
            this.callbacks = null;
        }

        //Remove any refs
        if (this.refs) {
            //Pass null to our refs so that the reference is updated.
            this.refs.forEach(ref => ref(null));
            this.refs = null;
        }
    }

    /**
     * Called when a class on this template was changed and needs to be updated
     * on the template's element.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {Function} converter Optional converter for the value if needed.
     * @ignore
     */
    onClassChanged(oldValue, newValue, converter) {
        if (converter !== null) {
            IgniteRenderingContext.push();
            oldValue = converter(oldValue);
            newValue = converter(newValue);
            IgniteRenderingContext.pop();
        }

        var oldClasses = (oldValue != null && oldValue != "" ? oldValue.toString().split(" ") : []);
        var newClasses = (newValue != null && newValue != "" ? newValue.toString().split(" ") : []);

        if (this.element) {
            oldClasses.forEach((cl) => this.element.classList.remove(cl));
            newClasses.forEach((cl) => this.element.classList.add(cl));
        }

        //Remove the old values from the template, but only remove one copy.
        oldClasses.forEach((cl) => this.classes.splice(this.classes.indexOf(cl), 1));

        //Add the new classes to the template.
        newClasses.forEach((cl) => this.classes.push(cl));

        //For any classes that are missing on the element, add them. If we have duplicates this
        //can happen.
        this.classes.forEach((cl) => {
            if (!this.element.classList.contains(cl)) {
                this.element.classList.add(cl);
            }
        });
    }

    /**
     * Called when a attribute on this template was changed and needs to be updated
     * on the template's element.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {string} attributeName 
     * @ignore
     */
    onAttributeChanged(oldValue, newValue, attributeName, converter) {
        if (converter !== null) {
            IgniteRenderingContext.push();
            newValue = converter(newValue);
            IgniteRenderingContext.pop();
        }

        if (this.element) {
            if (newValue == null || newValue == undefined) {
                this.element.removeAttribute(attributeName);
            } else {
                this.element.setAttribute(attributeName, newValue);
            }
        }

        this.attributes[attributeName] = newValue;
    }

    /**
     * Called when a value for this template was changed and needs to be updated on the template's element.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {Function} converter 
     * @ignore
     */
    onValueChanged(oldValue, newValue, converter) {
        if (converter !== null) {
            IgniteRenderingContext.push();
            newValue = converter(newValue);
            IgniteRenderingContext.pop();
        }

        //Only update the elements value if it actually changed.
        //This is to prevent endless looping potentially.
        if (this.element) {
            if (this.element.hasAttribute("type") && this.element.getAttribute("type").toLowerCase().trim() == "checkbox") {
                if (this.element.checked != newValue) {
                    this.element.checked = newValue;
                }
            } else {
                if (this.element.value != newValue) {
                    this.element.value = newValue;
                }
            }
        }
    }

    /**
     * Called when a property on this template was changed and needs to be updated
     * on the template's element.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {string} propertyName 
     * @param {Function} converter
     * @ignore
     */
    onPropertyChanged(oldValue, newValue, propertyName, converter) {
        if (converter !== null) {
            IgniteRenderingContext.push();
            newValue = converter(newValue);
            IgniteRenderingContext.pop();
        }

        if (this.element) {
            //Use the set value function and don't reflect the change because it came from above which
            //would be the reflected property, this reduces some functions being called twice that don't need to be.
            this.element[`_${propertyName}`].setValue(newValue, false);
        }

        this.properties[propertyName].value = newValue;
    }

    /**
     * Called when the inner html for this template was changed and needs to be updated
     * on the template's element.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {Function} converter 
     * @ignore
     */
    onInnerHTMLChanged(oldValue, newValue, converter) {
        if (converter !== null) {
            IgniteRenderingContext.push();
            newValue = converter(newValue);
            IgniteRenderingContext.pop();
        }

        if (this.element) {
            this.element.innerHTML = newValue;
        }

        this.elementInnerHTML = newValue;
    }

    /**
     * Called when a ref was changed and we need to update the refs
     * value to match this elements reference.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {any} ref 
     * @ignore
     */
    onRefChanged(oldValue, newValue, ref) {
        //Only set the reference value to ourself if it's not our element.
        //Otherwise we will get a never ending loop.
        if (this.element != newValue) {
            ref.value = this.element;
        }
    }

    /**
     * Called when a event was changed and we need to update it.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {any} eventName 
     * @ignore
     */
    onEventChanged(oldValue, newValue, eventName) {
        if (this.element) {
            if (oldValue !== null && oldValue !== undefined) {
                this.element.removeEventListener(eventName, oldValue);
            }

            if (newValue !== null && newValue !== undefined) {
                this.element.addEventListener(eventName, newValue);
            }

            //Remove the old value from the events
            this.events[eventName] = this.events[eventName].filter(ev => ev != oldValue);

            //Add the new value if it's needed
            if (newValue !== null && newValue !== undefined) {
                this.events[eventName].push(newValue);
            }
        }
    }

    /**
     * Called when a css value was changed and we need to update the styling.
     * @param {String} name
     * @param {any} newValue 
     * @ignore 
     */
    onStyleChanged(name, newValue) {
        //Remove the ; from the value if there is one.
        if (newValue && typeof newValue === "string" && newValue.includes(";")) {
            newValue = newValue.replace(";", "");
        }

        if (this.element) {
            this.element.style.setProperty(name, newValue, this.styles[name].priority);
        }

        this.styles[name].value = newValue;
    }

    getValuesForProperties(props) {
        var ret = [];
        props.forEach(prop => ret.push(prop.value));
        return ret;
    }
}

/**
 * An ignite template that can be used to construct a div element.
 */
class div extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("div", children);
    }
}

/**
 * An ignite template that can be used to construct a hyperlink element.
 */
class a extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("a", children);
    }
}

/**
 * An ignite template that can be used to construct a input element.
 */
class input extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("input", children);
    }
}

/**
 * An ignite template that can be used to construct a button element.
 */
class button extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("button", children);

        this.type("button");
    }
}

/**
 * An ignite template that can be used to construct a h1 element.
 */
class h1 extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("h1", children);
    }
}

/**
 * An ignite template that can be used to construct a h2 element.
 */
class h2 extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("h2", children);
    }
}

/**
 * An ignite template that can be used to construct a h3 element.
 */
class h3 extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("h3", children);
    }
}

/**
 * An ignite template that can be used to construct a h4 element.
 */
class h4 extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("h4", children);
    }
}

/**
 * An ignite template that can be used to construct a h5 element.
 */
class h5 extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("h5", children);
    }
}

/**
 * An ignite template that can be used to construct a h6 element.
 */
class h6 extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("h6", children);
    }
}

/**
 * An ignite template that can be used to construct a p element.
 */
class p extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("p", children);
    }
}

/**
 * An ignite template that can be used to construct a ul element.
 */
class ul extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("ul", children);
    }
}

/**
 * An ignite template that can be used to construct a li element.
 */
class li extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("li", children);
    }
}

/**
 * An ignite template that can be used to construct a span element.
 */
class span extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("span", children);
    }
}

/**
 * An ignite template that can be used to construct an i element.
 */
class i extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("i", children);
    }
}

/**
 * An ignite template that can be used to construct a br element.
 */
class br extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("br", children);
    }
}

/**
 * An ignite template that can be used to construct a img element.
 */
class img extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("img", children);
    }
}

/**
 * An ignite template that can be used to construct a label element.
 */
class label extends IgniteTemplate {
    /** 
     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
     */
    constructor(...children) {
        super("label", children);
    }
}

/**
 * Html is a special template that can construct raw html or properties into the dom and automatically
 * update the dom if the property changes.
 * 
 * @example
 * new html(`<h1>Hello world!</h1>`)
 */
class html extends IgniteTemplate {
    /**
     * @param {String|IgniteProperty} code HTML code to be constructed within this template. If an IgniteProperty is passed it's value will be used.
     */
    constructor(code) {
        super();

        if (code instanceof IgniteProperty) {
            this.callbacks.push(code.attachOnChange((oldValue, newValue) => this.onPropertyChanged(oldValue, newValue)));
            this.code = code.value;
        } else {
            this.code = code;
        }

        this.tagName = "shadow html";
        this.elements = [];
    }

    construct(parent, sibling) {
        //Don't construct if we have no parent, no sibling and no element.
        if (!parent && !sibling && !this.element) {
            return;
        }

        if (!this.element) {
            this.element = window.document.createTextNode("");

            if (sibling) {
                sibling.parentElement.insertBefore(this.element, sibling);
            } else {
                parent.appendChild(this.element);
            }
        }

        //Create a template to hold the elements that will be created from the
        //properties value and then add them to the DOM and store their pointer.
        if (this.elements.length == 0 && this.code) {
            //If the code is an ignite template then reder that template.
            if (this.code instanceof IgniteTemplate) {
                this.code.construct(parent, this.element);
                this.elements.push(this.code.element);
            } else {
                var template = window.document.createElement("template");
                template.innerHTML = this.code;
                while (template.content.childNodes.length > 0) {
                    var item = template.content.childNodes[0];
                    this.element.parentElement.insertBefore(item, this.element);
                    this.elements.push(item);
                }
                template.remove();
            }
        }
    }

    onPropertyChanged(oldValue, newValue) {
        //Update our code to the new value from the property.
        this.code = newValue;

        //Remove any elements that already exist.
        this.elements.forEach((item) => item.remove());
        this.elements = [];

        //Reconstruct the html
        this.construct(null, null);
    }
}

/**
 * A special ignite template that constructs a list of items using a template
 * that is dynamically created for each item.
 * 
 * @example
 * new list(["1", "2", "3"], (item) => {
 *  return new h1(item);
 * })
 */
class list extends IgniteTemplate {
    /**
     * @param {Array|IgniteProperty} list The list of items to construct within this template.
     * @param {Function} forEach A function that construct a template for an item from the list that is passed to it.
     */
    constructor(list, forEach) {
        super();

        if (list instanceof IgniteProperty) {
            this.callbacks.push(list.attachOnChange((oldValue, newValue) => this.onListChanged(oldValue, newValue)));
            this.callbacks.push(list.attachOnPush((oldValue, newValue) => this.onListPush(oldValue, newValue)));
            this.callbacks.push(list.attachOnPop((oldValue, newValue) => this.onListPop(oldValue, newValue)));

            this.list = list.value;
        } else {
            this.list = list;
        }

        this.forEach = forEach;
        this.elements = [];
        this.tagName = "shadow list";
    }

    construct(parent, sibling) {
        //Don't construct if we have no parent, no sibling and no element.
        if (!parent && !sibling && !this.element) {
            return;
        }

        if (!this.element) {
            this.element = window.document.createTextNode(""); //Use a textnode as our placeholder

            if (sibling) {
                sibling.parentElement.insertBefore(this.element, sibling);
            } else {
                parent.appendChild(this.element);
            }
        } else {
            parent = this.element.parentElement;
        }

        //If we already have elements we created, destroy them.
        if (this.elements.length > 0) {
            for (var i = 0; i < this.elements.length; i++) {
                this.elements[i].remove();
            }
            this.elements = [];
        }

        //If we already have children elements, deconstruct them.
        //(Because we are about to recreate them)
        if (this.children.length > 0) {
            for (var i = 0; i < this.children.length; i++) {
                this.children[i].deconstruct();
            }
            this.children = [];
        }

        //Construct all the items in our list and use the container
        if (this.list) {
            for (var i = 0; i < this.list.length; i++) {
                var template = this.forEach(this.list[i]);
                template.construct(parent, this.element);

                this.children.push(template);
                this.elements.push(template.element);
            }
        }
    }

    onListChanged(oldValue, newValue) {
        this.list = newValue;

        IgniteRenderingContext.enter();

        try {
            this.construct(null); //The list changed, reconstruct this template.
        } catch (error) {
            console.error(error);
        }

        IgniteRenderingContext.leave();
    }

    onListPush(oldValue, newValue) {
        IgniteRenderingContext.enter();

        try {
            var template = this.forEach(this.list[this.list.length - 1]);

            if (this.elements.length > 0) {
                template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling);
            } else {
                template.construct(this.element.parentElement, this.element);
            }

            this.children.push(template);
            this.elements.push(template.element);
        } catch { }

        IgniteRenderingContext.leave();
    }

    onListPop(oldValue, newValue) {
        if (this.children.length > 0) {
            this.children[this.children.length - 1].deconstruct();
            this.children.pop();
            this.elements.pop();
        }
    }
}

/**
 * A slot template that mimicks the functionality of a slot element in Web Components. This can
 * be used to place children of a IgniteElement anywhere in the DOM. Slots don't actually construct an element,
 * they simply just place children in place where the slot was used. If classes, styles, or attributes are applied
 * to the slot they will be applied to the children of the slot.
 * 
 * @example
 * //You must pass the ignite element who owns the slot of the first param.
 * new slot(this)
 * 
 * @example
 * //Slots can apply classes, attributes, and styles to children within the slot
 * new slot(this).class("active") //< Would apply .active to all children
 * 
 * @example
 * //You can also use properties to have dynamic classes, styles, or attributes on slot children
 * new slot(this).class(this.someClass)
 */
class slot extends IgniteTemplate {
    /**
     * @param {IgniteElement} element The parent IgniteElement that this slot is for.
     */
    constructor(element) {
        super();

        this.parent = element;
    }

    /**
     * Constructs this slot from this template.
     * @param {HTMLElement} parent 
     * @param {HTMLElement} sibling 
     * @ignore
     */
    construct(parent, sibling) {
        //Don't construct if we have no parent, no sibling and no element.
        if (!parent && !sibling && !this.element) {
            return;
        }

        if (!this.element) {
            this.element = window.document.createTextNode("");

            if (sibling) {
                sibling.parentElement.insertBefore(this.element, sibling);
            } else {
                parent.appendChild(this.element);
            }

            //Add any slot elements after this element.
            this.parent.elements.forEach((item) => {
                this.element.parentElement.insertBefore(item, this.element);

                //Set the classes on the item
                for (var i = 0; i < this.classes.length; i++) {
                    if (this.classes[i] !== null && this.classes[i] !== undefined && this.classes[i] !== "") {
                        item.classList.add(this.classes[i]);
                    }
                }

                //Set the attributes on the item
                var keys = Object.keys(this.attributes);
                for (var i = 0; i < keys.length; i++) {
                    if (this.attributes[keys[i]] !== null && this.attributes[keys[i]] !== undefined) {
                        item.setAttribute(keys[i], this.attributes[keys[i]]);
                    }
                }

                //Set the styles on the item
                var keys = Object.keys(this.styles);
                for (var i = 0; i < keys.length; i++) {
                    var style = this.styles[keys[i]];
                    item.style.setProperty(style.name, style.value, style.priority);
                }
            });
        }
    }

    /**
     * Called when a class on this slot changes and needs to be updated on the
     * elements within this slot.
     * @param {Any} oldValue 
     * @param {Any} newValue 
     * @param {Function} converter
     * @ignore 
     */
    onClassChanged(oldValue, newValue, converter) {
        if (converter !== null) {
            oldValue = converter(oldValue);
            newValue = converter(newValue);
        }

        var oldClasses = (oldValue != null && oldValue != "" ? oldValue.toString().split(" ") : []);
        var newClasses = (newValue != null && newValue != "" ? newValue.toString().split(" ") : []);

        //Remove the old values from the template, but only remove one copy.
        oldClasses.forEach((cl) => this.classes.splice(this.classes.indexOf(cl), 1));

        //Add the new classes to the template.
        newClasses.forEach((cl) => this.classes.push(cl));

        //Add the classes to the elements
        this.parent.elements.forEach((element) => {
            //Remove the old ones first.
            oldClasses.forEach((cl) => element.classList.remove(cl));

            //Add the new ones.
            newClasses.forEach((cl) => element.classList.add(cl));

            //Add any missing ones
            this.classes.forEach((cl) => {
                if (!element.classList.contains(cl)) {
                    element.classList.add(cl);
                }
            });
        });
    }

    /**
     * Called when a attribute on this template was changed and needs to be updated
     * on the template's element.
     * @param {any} oldValue 
     * @param {any} newValue 
     * @param {string} attributeName 
     * @param {Function} converter Optional converter function for the value if needed.
     * @ignore
     */
    onAttributeChanged(oldValue, newValue, attributeName, converter) {
        if (converter !== null) {
            newValue = converter(newValue);
        }

        this.parent.elements.forEach((element) => {
            if (newValue == null || newValue == undefined) {
                element.removeAttribute(attributeName);
            } else {
                element.setAttribute(attributeName, newValue);
            }
        });

        this.attributes[attributeName] = newValue;
    }

    /**
     * Called when a css value was changed and we need to update the styling.
     * @param {String} name
     * @param {any} newValue 
     * @ignore 
     */
    onStyleChanged(name, newValue) {
        this.parent.elements.forEach((element) => {
            element.style.setProperty(name, newValue, this.styles[name].priority);
        });

        this.styles[name].value = newValue;
    }
}

export {
    IgniteTemplate,
    div,
    html,
    list,
    a,
    input,
    button,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    i,
    ul,
    li,
    br,
    img,
    label,
    slot
};