### ignite-html

`1.0.0`
Need help reading this?

### IgniteElement

The outline of a Ignite Element that extends the html element and can be used to create custom components. Ignite Element's use an Ignite Template for the render function.

new IgniteElement()

Extends HTMLElement

Example

    class MainApp extends IgniteElement {
      constructor() {
          super();
      }

      get properties() {
          return {
          };
      }

      render() {
          return this.template
              .child(
                  new h1(`<i class="fad fa-fire-alt" style="--fa-primary-color: #FFC107; --fa-secondary-color: #FF5722; --fa-secondary-opacity: 1.0;"></i> Ignite HTML`),
                  new h4(`Adding more fire to the web.`)
              );
       }
    }

    customElements.define("main-app", MainApp);

    //If you want to easily use an Ignite Element with templates see the following which can be added
    //to any component file
    class MainAppTemplate extends IgniteTemplate {
      constructor(...children) {
          super("main-app", children);
      }
    }

    export {
     MainAppTemplate as MainApp
    }

    //If a template was created for a Ignite Element (like the previous example) it can be used just like any other template:
    new MainApp()

Instance Members
▸ properties

Returns an object with all the properties for this ignite element. If null or empty then no properties will be created. To change a property and read it's current value see below.

properties
Returns
`any`: An object with properties that will be assigned to this ignite element.
Example

    get properties() {
     return {
         show: false,
         title: "This is a title",
         items: [1, 2, 3]
     };
    }

    //To change a property access it via this.PROP_NAME
    this.show = false;

    //To get a properties value access if via this.PROP_NAME
    console.log(this.title);

▸ styles

Returns any CSS styling code for this ignite element. If this returns a non null value the CSS will auto be injected into the current HTML page once and reused for the life of the ignite element.

styles
Returns
`any`: A string containing CSS code to be used with this ignite element.
Example

    get styles() {
     return `
         h1 {
             color: black;
         }
     `;
    }

▸ resetProperties()

Resets the properties for this element back to their original default value.

resetProperties()
▸ render()

Returns the template to be rendered for this element.

render(): any
Returns
`any`: An ignite template to be used to construct this ignite element.
Related
this.template is automatically created for each IgniteElement and must be used in the render() function.
Example

    render() {
     return this.template
          .child(
              new h1(`<i class="fad fa-fire-alt" style="--fa-primary-color: #FFC107; --fa-secondary-color: #FF5722; --fa-secondary-opacity: 1.0;"></i> Ignite HTML`),
              new h4(`Adding more fire to the web.`)
          );
    }

### IgniteTemplate

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.

new IgniteTemplate(tagName: String, children: (String | Number | IgniteProperty | IgniteTemplate))
Parameters
tagName `(String = `null`)` The tag name of the element this template will construct.
children `((String | Number | IgniteProperty | IgniteTemplate) = `null`)` An array of child elements to be added to this 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);
     }
    }

Instance Members
▸ class(name, converter)

Adds a CSS class to this template to be added once this template is constructed.

class(name: (String | IgniteProperty), converter: Function): any
Parameters
name `((String | IgniteProperty))` Name of the CSS class to add.
converter `(Function = `null`)` Optional function that can convert the class name into a different one.
Returns
`any`: This ignite template so function calls can be chained.
▸ attribute(name, value, converter)

Adds a html element attribute to this template to be added once this template is constructed.

attribute(name: String, value: (String | IgniteProperty), converter: Function): any
Parameters
name `(String)` The name of the attribute to add
value `((String | IgniteProperty))` The value of the attribute to set, can be anything. If Property is passed it will auto update.
converter `(Function = `null`)` Optional function that can convert the value if needed.
Returns
`any`: This ignite template so function calls can be chained.
▸ property(name, value, reflect, converter)

Adds a property to this template to be added once this template is constructed.

property(name: String, value: (Any | IgniteProperty), reflect: Boolean, converter: Function): any
Parameters
name `(String)` Name of the property to set.
value `((Any | IgniteProperty))` Value of the property to use. If a Property is passed the value will auto update.
reflect `(Boolean = `false`)` 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.
converter `(Function = `null`)` Optional function that can be used to convert the value if needed.
Returns
`any`: This ignite template so function calls can be chained.
▸ child(items)

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.

child(items: ...(Number | String | IgniteProperty | IgniteTemplate)): any
Parameters
items `(...(Number | String | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.
Returns
`any`: This ignite template so function calls can be chained.
▸ ref(refCallback)

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.

ref(refCallback: (Function | IgniteProperty)): any
Parameters
refCallback `((Function | IgniteProperty))` The callback to be invoked with the HTMLElement of the element this template constructed.
Returns
`any`: This ignite template so function calls can be chained.
▸ on(eventName, eventCallback)

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.

on(eventName: String, eventCallback: (Function | IgniteProperty)): any
Parameters
eventName `(String)` The name of the event to add.
eventCallback `((Function | IgniteProperty))` The callback function to be invoked by the event once it fires.
Returns
`any`: This ignite template so function calls can be chained.
▸ onClick(eventCallback)

Adds an onclick event handler to this template.

onClick(eventCallback: (Function | IgniteProperty)): any
Parameters
eventCallback `((Function | IgniteProperty))` The callback function to be invoked by the event once it fires.
Returns
`any`: This ignite template so function calls can be chained.
▸ onEnter(eventCallback)

Adds a on enter key press event handler to this template.

onEnter(eventCallback: (Function | IgniteProperty)): any
Parameters
eventCallback `((Function | IgniteProperty))` The callback function to be invoked by the event once it fires.
Returns
`any`: This ignite template so function calls can be chained.
▸ style(name, value, priority, converter)

Adds a CSS property to this template with a value and priority.

style(name: String, value: (String | IgniteProperty), priority: String, converter: Function): any
Parameters
name `(String)` The name of the CSS property to set.
value `((String | IgniteProperty))` The value to set for the property. If an IgniteProperty is used it will auto update this style.
priority `(String = `null`)` If set to "important" then the style will be marked with !important.
converter `(Function = `null`)` Optional function to convert the value if needed.
Returns
`any`: This ignite template so function calls can be chained.
▸ construct(parent, sibling)

Constructs this template and adds it to the DOM if this template has not already been constructed.

construct(parent: HTMLElement, sibling: HTMLElement)
Parameters
parent `(HTMLElement)` Parent element that will contain the constructed element.
sibling `(HTMLElement)` Optional sibling element that can be used to add the element adjacantly.
▸ deconstruct()

Deconstructs this template and cleans up all resources to make sure there are no memory leaks.

deconstruct()

### div

An ignite template that can be used to construct a div element.

new div(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### a

An ignite template that can be used to construct a hyperlink element.

new a(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### input

An ignite template that can be used to construct a input element.

new input(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### button

An ignite template that can be used to construct a button element.

new button(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### h1

An ignite template that can be used to construct a h1 element.

new h1(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### h2

An ignite template that can be used to construct a h2 element.

new h2(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### h3

An ignite template that can be used to construct a h3 element.

new h3(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### h4

An ignite template that can be used to construct a h4 element.

new h4(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### h5

An ignite template that can be used to construct a h5 element.

new h5(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### p

An ignite template that can be used to construct a p element.

new p(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### span

An ignite template that can be used to construct a span element.

new span(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### i

An ignite template that can be used to construct an i element.

new i(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### br

An ignite template that can be used to construct a br element.

new br(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### img

An ignite template that can be used to construct a img element.

new img(children: ...(String | Number | IgniteProperty | IgniteTemplate))

Extends IgniteTemplate

Parameters
children `(...(String | Number | IgniteProperty | IgniteTemplate))` A series of children to be added to this template.

### html

Html is a special template that can construct raw html or properties into the dom and automatically update the dom if the property changes.

new html(code: (String | IgniteProperty))

Extends IgniteTemplate

Parameters
code `((String | IgniteProperty))` HTML code to be constructed within this template. If an IgniteProperty is passed it's value will be used.
Example

    new html(`<h1>Hello world!</h1>`)

### list

A special ignite template that constructs a list of items using a template that is dynamically created for each item.

new list(list: (Array | IgniteProperty), forEach: Function)

Extends IgniteTemplate

Parameters
list `((Array | IgniteProperty))` The list of items to construct within this template.
forEach `(Function)` A function that construct a template for an item from the list that is passed to it.
Example

    new list(["1", "2", "3"], (item) => {
     return new h1(item);
    })

### slot

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.

new slot(element: IgniteElement)

Extends IgniteTemplate

Parameters
element `(IgniteElement)` The parent IgniteElement that this slot is for.
Example

    new slot(this)