Fixed a few bugs and cleaned up code. Select elements now can have their value set correctly when using the value function.

src/ignite-html.js

@@ -249,6 +249,7 @@ class IgniteRenderingContext {
             IgniteRenderingContext.RenderCount = IgniteRenderingContext.Stack.pop();
         }
     }
+
     static ready(callback) {
         //Setup the callbacks if it's not init'd.
         if (!IgniteRenderingContext.ReadyCallbacks) {

src/ignite-template.js

@@ -439,7 +439,7 @@ class IgniteTemplate {
                 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 };
+            this.styles[name] = { name: name, value: converter(...value.getPropertyValues()), priority: priority };
         } else {
             this.styles[name] = { name: name, value: (converter != null ? converter(value) : value), priority: priority };
         }
@@ -605,15 +605,6 @@ class IgniteTemplate {
             }
         }
 
-        //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;
@@ -624,6 +615,15 @@ class IgniteTemplate {
             this.children[i].construct(this.element);
         }
 
+        //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;
+            }
+        }
+
         //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) {
@@ -880,12 +880,6 @@ class IgniteTemplate {
 
         this.styles[name].value = newValue;
     }
-
-    getValuesForProperties(props) {
-        var ret = [];
-        props.forEach(prop => ret.push(prop.value));
-        return ret;
-    }
 }
 
 /**
@@ -1010,6 +1004,18 @@ class h6 extends IgniteTemplate {
     }
 }
 
+/**
+ * An ignite template that can be used to construct a hr element.
+ */
+class hr extends IgniteTemplate {
+    /** 
+     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
+     */
+    constructor(...children) {
+        super("hr", children);
+    }
+}
+
 /**
  * An ignite template that can be used to construct a p element.
  */
@@ -1106,6 +1112,42 @@ class label extends IgniteTemplate {
     }
 }
 
+/**
+ * An ignite template that can be used to construct a select element.
+ */
+class select extends IgniteTemplate {
+    /** 
+     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
+     */
+    constructor(...children) {
+        super("select", children);
+    }
+}
+
+/**
+ * An ignite template that can be used to construct a option element.
+ */
+class option extends IgniteTemplate {
+    /** 
+     * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
+     */
+    constructor(...children) {
+        super("option", children);
+    }
+}
+
+/**
+ * An ignite template that can be used to construct a script element.
+ */
+class script extends IgniteTemplate {
+    /** 
+         * @param  {...String|Number|IgniteProperty|IgniteTemplate} children A series of children to be added to this template.
+         */
+    constructor(...children) {
+        super("script", 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.
@@ -1473,6 +1515,7 @@ export {
     h4,
     h5,
     h6,
+    hr,
     p,
     span,
     i,
@@ -1481,5 +1524,8 @@ export {
     br,
     img,
     label,
+    select,
+    option,
+    script,
     slot
 };