@voliware/template2 - npm Package Compare versions

Comparing version 1.3.5 to 1.4.0

dist/template2-bundle.min.js

@@ -1,1 +0,1 @@
-Object.setProperties=function(e,t){for(let s in t)e.hasOwnProperty(s)&&(e[s]=t[s]);return e},Object.isEmpty=function(e){return!Object.keys(e).length},Object.extend=function(){let e=arguments[0];if(e)for(let t=1;t<arguments.length;t++){let s=arguments[t];if("object"==typeof s)for(let t in s)if(s.hasOwnProperty(t)){let a=s[t];if(void 0===a)continue;"object"==typeof e[t]&&"object"==typeof a&&e[t]!==a?Object.extend(e[t],a):e[t]=a}}return e},Object.flatten=function(e){var t={};for(var s in e)if(e.hasOwnProperty(s))if("object"==typeof e[s]&&null!==e[s]){var a=Object.flatten(e[s]);for(var r in a)a.hasOwnProperty(r)&&(t[s+"."+r]=a[r])}else t[s]=e[s];return t},Object.unflatten=function(e){let t={};for(let s in e){let a=s.split(".");a.reduce(function(t,r,n){return t[r]||(t[r]=isNaN(Number(a[n+1]))?a.length-1==n?e[s]:{}:[])},t)}return t},String.random=function(e){for(var t,s="";s.length<e;)s+=(void 0,(t=Math.floor(62*Math.random()))<10?t:t<36?String.fromCharCode(t+55):String.fromCharCode(t+61));return s},document.getElementsByDataName=function(e){return document.querySelectorAll(`[data-name="${e}"]`)},document.getElementByDataName=function(e){let t=document.getElementsByDataName(e);return t.length?t[0]:null};class EventSystem{constructor(){return this.events={},this}getHandlersCount(e){let t=this.events[e];if(!t)return 0;let s=0,a=[];for(a.push(t);a.length>0;){let e=a.pop();for(let t in e)"_handlers"===t?s+=e[t].length:"object"==typeof e[t]&&a.push(e[t])}return s}on(e,t){let s=e.split("."),a=this.events;for(let e=0;e<s.length;e++){let r=s[e];a[r]||(a[r]={}),e===s.length-1?(Array.isArray(a[r]._handlers)||(a[r]._handlers=[]),a[r]._handlers.push(t)):a=a[r]}return this}one(e,t){let s=this,a=e+"."+String.random(8);return this.on(a,function(e){t(e),s.off(a)}),this}off(e,t=!0){let s=e.split("."),a=this.events;for(let e=0;e<s.length;e++){let r=s[e];e===s.length-1?t?delete a[r]:(delete a[r]._handlers,0===Object.keys(a[r]).length&&delete a[r]):a=a[r]}return this}emit(e,t){let s=e.split("."),a=this.events;for(let e=0;e<s.length;e++){if(!(a=a[s[e]]))return this;if(e===s.length-1){let e=[];for(e.push(a);e.length;){let s=e.pop();for(let a in s)if("_handlers"===a)for(let e=0;e<s[a].length;e++)s[a][e](t);else e.push(s[a])}}}return this}}class ElementManager extends EventSystem{constructor(e,t,s){super();return this.options=Object.extend({primaryKey:"id",maxElements:0,cloneTemplate:!0,removeTemplate:!0,removeDeadTemplates:!0},s),this.wrapper=e,this.template=this.options.cloneTemplate?t.cloneNode(!0):t,this.template.removeAttribute("id"),this.template.classList.remove("template"),this.elements=new Map,this.options.removeTemplate&&t.remove(),this.cachedData={},this.processedRenderData={},this}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}empty(){for(;this.wrapper.firstChild;)this.wrapper.removeChild(this.wrapper.firstChild);return this.elements=new Map,this}attachElementHandlers(e){return this}cloneTemplate(){let e=this.template.cloneNode(!0);return this.attachElementHandlers(e),e}appendElement(e){return this.wrapper.appendChild(e),this}appendElementBefore(e,t){return t.before(e),this}appendElementAfter(e,t){return t.after(e),this}removeElement(e){let t=this.elements.get(e);return t&&(this.wrapper.removeChild(t),this.elements.delete(e)),this}removeDeadElements(e){for(let[t,s]of this.elements)this.getData(e,t)||(s.remove(),this.elements.delete(t));return this}getDataType(e){return e instanceof Map?"map":Array.isArray(e)?"array":"object"==typeof e?"object":null}getData(e,t){switch(this.getDataType(e)){case"array":let s=e.filter(e=>e[this.options.primaryKey]===t);return s&&s.length?s[0]:null;case"map":return e.get(t);case"object":return e[t];default:return null}}render(e){switch(this.cachedData=this.cacheData(e),this.processedRenderData=this.processRenderData(e),this.getDataType(e)){case"array":this.renderArray(e);break;case"map":this.renderMap(e);break;default:case"object":this.renderObject(e)}return this.options.removeDeadTemplates&&this.removeDeadElements(e),this}renderArray(e){for(let t=0;t<e.length;t++){let s=e[t][this.options.primaryKey];if(void 0===s)return void console.error("ElementManager.renderArray: data must have a primary key property");this.renderElement(s,e[t],t)}return this}renderMap(e){let t=0;for(let[s,a]of e)this.renderElement(s,a,t),t++;return this}renderObject(e){let t=0;for(let s in e)this.renderElement(s,e[s],t),t++;return this}renderSingle(e,t){let s={};return s[e]=t,this.render(s),this}renderElement(e,t,s){let a=!1,r=this.elements.get(e);return r||(a=!0,r=this.cloneTemplate()),r&&(r instanceof Template?r.render(t):Template.render(r,t),a&&this.elements.set(e,r)),this.appendElement(r),this}static dataArrayToDataObject(e,t="id"){let s={};for(let a=0;a<e.length;a++){let r=e[a][t];void 0===r?console.error(`dataArrayToDataObject: object does not have required "${t}" value`):s[r]=e[a]}return s}}const Status={none:"none",error:"error",success:"success",processing:"processing",info:"info",warning:"warning",class:{}};Status.class[Status.none]="status-none",Status.class[Status.error]="status-error",Status.class[Status.success]="status-success",Status.class[Status.processing]="status-processing",Status.class[Status.info]="status-info",Status.class[Status.warning]="status-warning",Status.classArray=[Status.class.none,Status.class.error,Status.class.success,Status.class.processing,Status.class.info,Status.class.warning],Status.bgclass={},Status.bgclass[Status.none]="status-bg-none",Status.bgclass[Status.error]="status-bg-error",Status.bgclass[Status.success]="status-bg-success",Status.bgclass[Status.processing]="status-bg-processing",Status.bgclass[Status.info]="status-bg-info",Status.bgclass[Status.warning]="status-bg-warning",Status.bgclassArray=[Status.bgclass.none,Status.bgclass.error,Status.bgclass.success,Status.bgclass.processing,Status.bgclass.info,Status.bgclass.warning],Status.icon={},Status.icon[Status.none]="",Status.icon[Status.error]="",Status.icon[Status.info]="",Status.icon[Status.processing]='<div class="spinner-container"><div class="spinner-wheel"></div></div>',Status.icon[Status.success]="",Status.icon[Status.warning]="";class Template extends HTMLElement{constructor(e={}){super();this.options=Object.extend({elements:{},renderAttribute:"data-name",displayBlock:!0},e),this.eventSystem=new EventSystem,this.nativeEvents={},this.elements={},this.cachedData={},this.renderData={},this.isFirstRender=!0,this.findNamedElements(),this.findElements(this.options.elements),this.options.displayBlock&&this.classList.add("template-block")}setOptions(e){for(let t in e)this.options.hasOwnProperty(t)&&(this.options[t]=e[t])}static addEventSystem(e){e.eventSystem=new EventSystem,e.nativeEvents={}}static on(e,t,s){let a=t.split(".")[0];e.eventSystem||Template.addEventSystem(e),0===e.eventSystem.getHandlersCount(a)&&(e.nativeEvents[a]=function(t){e.eventSystem.emit(a,t)},e.addEventListener(a,e.nativeEvents[a])),e.eventSystem.on(t,s)}on(e,t){return Template.on(this,e,t),this}static one(e,t,s){let a=t.split(".")[0];e.eventSystem||Template.addEventSystem(e),0===e.eventSystem.getHandlersCount(a)&&(e.nativeEvents[a]=function(t){e.eventSystem.emit(a,t),e.removeEventListener(a,e.nativeEvents[a])},e.addEventListener(a,e.nativeEvents[a])),e.eventSystem.one(t,s)}one(e,t){return Template.one(this,e,t),this}static off(e,t,s=!0){if(!(e.eventSystem instanceof EventSystem))return;let a=t.split(".")[0];e.eventSystem.off(t,s),0===e.eventSystem.getHandlersCount(a)&&e.removeEventListener(a,e.nativeEvents[a])}off(e,t=!0){return Template.off(this,e,t),this}static emit(e,t,s){e.eventSystem instanceof EventSystem&&e.eventSystem.emit(t,s)}emit(e,t){return Template.emit(this,e,t),this}setAttributes(e){for(let t=0;t<e.length;t++){let s=e[t];this.setAttribute(s.name,s.value)}return this}static findElements(e,t){"object"!=typeof e.elements&&(e.elements={});for(let s in t)e.elements[s]=e.querySelector(t[s]);return e.elements}findElements(e){return Template.findElements(this,e)}static findNamedElements(e,t="data-name"){let s={},a=e.querySelectorAll(`[name], [${t}]`);for(let e=0;e<a.length;e++){let r=a[e].getAttribute("name");r||(r=a[e].getAttribute(t)),r&&(s[r]?(Array.isArray(s[r])||(s[r]=[s[r]]),s[r].push(a[e])):s[r]=a[e])}return s}findNamedElements(){let e=Template.findNamedElements(this,this.options.renderAttribute);Object.extend(this.elements,e)}getElements(){return this.elements}static select(e,t){return"string"==typeof e&&(t=e,e=document.documentElement),e.querySelectorAll(t)}select(e){return Template.select(this,e)}static selectFirst(e,t){let s=Template.select(e,t);return s instanceof NodeList?s[0]:null}selectFirst(e){return Template.selectFirst(this,e)}static selectLast(e,t){let s=Template.select(e,t);return s instanceof NodeList?s[e.length-1]:null}selectLast(e){return Template.selectLast(e)}static append(e,t){t.appendChild(e)}append(e){return Template.append(e,this),this}appendTo(e){return Template.append(this,e),this}static prepend(e,t){t.insertBefore(e,t.firstChild)}prepend(e){return Template.prepend(e,this),this}prependTo(e){return Template.prepend(this,e),this}static empty(e){for(;this.element;)e.removeChild(e.firstChild)}empty(){return Template.empty(this),this}static isVisible(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}isVisible(){return Template.isVisible(this)}static hide(e){"none"!==e.style.display&&(e._previousDisplay_=e.style.display),e.style.display="none"}hide(){return Template.hide(this),this}static show(e){e.style.display=e._previousDisplay_||"block"}show(){return Template.show(this),this}static display(e,t){return void 0===t&&(t=!Template.isVisible(e)),t?Template.show(e):Template.hide(e)}display(e){return Template.display(this,e),this}static getStyle(e,t){return window.getComputedStyle(e).getPropertyValue(t)}getStyle(e){return Template.getStyle(this,e)}static setHeight(e,t){e.style.height=t+"px"}setHeight(e){return Template.setHeight(this,e),this}static setWidth(e,t){e.style.width=t+"px"}setWidth(e){return Template.setWidth(this,e),this}static addClass(e,t){e.classList.add(t)}addClass(e){return Template.addClass(this,e),this}static hasClass(e,t){return e.classList.contains(t)}hasClass(e){return Template.hasClass(this,e)}static removeClass(e,t){e.classList.remove(t)}removeClass(e){return Template.removeClass(this,e),this}static replaceClass(e,t,s){e.classList.replace(t,s)}replaceClass(e,t){return Template.replaceClass(this,e,t),this}static toggleClass(e,t,s){e.classList.toggle(t,s)}toggleClass(e,t){return Template.toggleClass(this,e,t),this}static getValue(e){return e.value}getValue(){return Template.getValue(this)}static setValue(e,t){e.value=t}setValue(e){return Template.setValue(this,e),this}static enable(e){e.disabled=!1}enable(){return Template.enable(this),this}static disable(e){e.disabled=!0}disable(){return Template.disable(this),this}cacheData(e){return this.cachedData=Object.extend({},e)}processRenderData(e){return this.renderData=e}static setHtml(e,t){e.innerHTML=t}setHtml(e){return Template.setHtml(this,e),this}static render(e,t,s=!1){let a=null;a=s?e.getElements():Template.findNamedElements(e);let r=Object.flatten(t);for(let t in r){let n=r[t],i=a[t];if(i||(s&&(e.findNamedElements(),i=a[t]),i))if(i.render)i.render(n);else{Array.isArray(i)||(i=[i]);for(let e=0;e<i.length;e++){let t=i[e];if("false"!==t.getAttribute("data-render"))if("INPUT"===t.tagName){let e=t.getAttribute("type");e?"checkbox"===e&&n?t.checked=!0:"radio"===e?t.getAttribute("value")===n&&(t.checked=!0):t.value=n:t.value=n}else"SELECT"===t.tagName?t.value=n:t.innerHTML=n}}}}render(e){return this.cachedData=this.cacheData(e),this.renderData=this.processRenderData(Object.extend({},e)),Template.render(this,this.renderData,!0),this.isFirstRender=!1,this}static clone(e){let t=e.cloneNode();return t.innerHTML=e.innerHTML,t}clone(){return Template.clone(this)}}customElements.define("template-element",Template);class FeedbackTemplate extends Template{static get observedAttributes(){return["status","text"]}constructor(e={}){super(Object.extend({elements:{icon:".feedback-icon",text:".feedback-text",close:".feedback-close"}},e)),this.attachButtonHandlers()}attachButtonHandlers(){let e=this;this.elements.close.addEventListener("click",function(){e.hide()})}createHtml(){this.innerHTML="\n            ".trim()}attributeChangedCallback(e,t,s){if("status"===e){let e=Status.class.none,t=Status.icon.none;s&&""!==s&&void 0!==Status.bgclass[s]&&(e=Status.bgclass[s],t=Status.icon[s]),this.setClass(e),this.setIcon(t)}else"text"===e&&this.setText(s)}setStatus(e){this.setAttribute("status",e)}clearStatusClass(){this.classList.remove(...Status.bgclassArray)}setClass(e){this.clearStatusClass(),this.classList.add(e)}setText(e){this.elements.text.textContent=e}setIcon(e){this.elements.icon.innerHTML=e}render(e,t,s){this.setStatus(e),this.setText(t),this.setIcon(s)}renderError(e){this.render(Status.error,e,Status.icon[Status.error])}renderInfo(e){this.render(Status.info,e,Status.icon[Status.error])}renderProcessing(e){this.render(Status.processing,e,Status.icon[Status.processing])}renderSuccess(e){this.render(Status.success,e,Status.icon[Status.success])}renderWarning(e){this.render(Status.warning,e,Status.icon[Status.warning])}}customElements.define("template-feedback",FeedbackTemplate);class FormTemplate extends Template{constructor(e={}){let t={getRequest:null,submitRequest:null,validateRequest:null,checkboxMode:FormTemplate.checkboxMode.number,serializeMode:FormTemplate.serializeMode.toObject,excludedFields:["disabled"],elements:{form:"form",footer:".form-footer",reset:'[type="reset"]',submit:'[type="submit"]'}};super(Object.extend(t,e)),this.serializedData={},this.formattedSerializedData=null,this.attachFormHandlers()}attachFormHandlers(){let e=this;this.elements.form.addEventListener("submit",function(t){t.preventDefault(),e.submit()}),this.elements.form.addEventListener("reset",function(t){t.preventDefault(),e.reload()})}displayFooter(e){Template.display(this.elements.footer,e)}reload(){Object.isEmpty(this.cachedData)?this.reset():this.render(this.cachedData)}validate(){return!0}convertCheckbox(e,t){let s=e.checked;switch(t){case FormTemplate.checkboxMode.boolean:return s;case FormTemplate.checkboxMode.string:return s?"1":"0";case FormTemplate.checkboxMode.onOff:return s?"on":"off";default:case FormTemplate.checkboxMode.number:return s?1:0}}isNotExcluded(e){for(let t=0;t<this.options.excludedFields.length;t++){if("disabled"===this.options.excludedFields[t]&&e.hasAttribute("disabled"))return!1}return!0}serialize(){this.serializedData={};let e=Array.from(this.getElementsByTagName("input")),t=Array.from(this.getElementsByTagName("select")),s=Array.from(this.getElementsByTagName("textarea")),a=e.concat(t,s);for(let e=0;e<a.length;e++)this.isNotExcluded(a[e])&&this.serializeInput(a[e]);return this.serializedData}serializeInput(e){let t=e.getAttribute("name"),s=null;switch(e.getAttribute("type")){case"checkbox":s=this.convertCheckbox(e,this.options.checkboxMode);break;case"radio":if(!e.checked)return null;s=e.value;break;case"file":e.files.length>0&&(s=e.files[0]);break;case"number":s=Number(e.value);break;default:s=e.value}return this.serializedData[t]=s}serializeTextarea(e){return this.serializeSelect(e)}serializeSelect(e){let t=e.getAttribute("name");return this.serializedData[t]=e.value}formatSerializedData(e,t){switch(t){case FormTemplate.serializeMode.toString:return this.serializedDataToString(e);default:case FormTemplate.serializeMode.toObject:return this.serializedData=Object.unflatten(this.serializedData),this.serializedData}}serializedDataToString(e){let t="",s=0,a=Object.keys(e).length;for(let r in e)t+=r+"="+e[r],s++<a-1&&(t+="&");return t}async submit(){this.serializedData=this.serialize(),this.formattedSerializedData=this.formatSerializedData(this.serializedData,this.options.serializeMode);try{let e=await this.options.submitRequest(this.formattedSerializedData);200===e.status?this.emit("success",e.body):this.emit("fail",e.body)}catch(e){this.emit("error",e)}}}FormTemplate.checkboxMode={boolean:0,number:1,string:2,onOff:3},FormTemplate.serializeMode={toString:0,toOrderedString:1,toObject:2,toValue:3},customElements.define("template-form",FormTemplate);class PagerTemplate extends Template{constructor(e){super(e),this.page=1,this.pageCount=1,this.attachButtonHandlers()}setPageCount(e){return this.pageCount=e,this.render(),this}setPage(e){return this.page=e,this.render(),this}render(e={}){return void 0===e.pageCount&&(e.pageCount=this.pageCount),void 0===e.page&&(e.page=this.page),super.render(e),e.pageCount<=1?(this.disableNextButton(),this.disablePreviousButton()):e.page===e.pageCount?(this.disableNextButton(),this.enablePreviousButton()):1===e.page?(this.disablePreviousButton(),this.enableNextButton()):(this.enableNextButton(),this.enablePreviousButton()),this}displayNextButton(e){return Template.display(this.elements.next,e),this}displayPreviousButton(){return Template.display(this.elements.previous,state),this}enableNextButton(){return Template.enable(this.elements.next),this}disableNextButton(){return Template.disable(this.elements.next),this}enablePreviousButton(){return Template.enable(this.elements.previous),this}disablePreviousButton(){return Template.disable(this.elements.previous),this}attachButtonHandlers(){let e=this;Template.on(this.elements.next,"click.pager",function(){e.setPage(e.page+1),e.emit("next")}),Template.on(this.elements.previous,"click.pager",function(){e.setPage(e.page-1),e.emit("previous")});let t=null;return Template.on(this.elements.page,"input.pager",function(){clearTimeout(t),t=setTimeout(function(){let t=parseInt(e.elements.page.value);t&&t<=e.pageCount&&(e.page=t,e.emit("page",e.page))},150)}),this}}customElements.define("template-pager",PagerTemplate);class PopupTemplate extends Template{constructor(e={}){super(Object.extend({displayBlock:!1,showHeader:!0,showClose:!0,showFooter:!0,elements:{header:".popup-header",title:".popup-title",close:".popup-close",body:".popup-body",footer:".popup-footer"}},e)),this.applyOptions(this.options),this.attachButtonHandlers()}attachButtonHandlers(){let e=this;this.elements.close.addEventListener("click",function(t){e.close()})}applyOptions(e){!e.showHeader&&this.elements.header&&this.elements.header.remove(),!e.showClose&&this.elements.close&&this.elements.close.remove(),!e.showFooter&&this.elements.footer&&this.elements.footer.remove()}open(){document.body.classList.add("popup-open"),this.show()}close(){document.body.classList.remove("popup-open"),this.hide()}renderTitle(e){this.elements.title.innerHTML=e}renderBody(e){this.elements.body.innerHTML=e}renderFooter(e){this.elements.footer.innerHTML=e}}customElements.define("template-popup",PopupTemplate);class StatusTemplate extends Template{static get observedAttributes(){}constructor(e){super(e),this.hasAttribute("status")||this.setAttribute("status",Status.none),this.hasAttribute("text")||this.setAttribute("text","")}attributeChangedCallback(e,t,s){if("status"===e){let e=Status.class.none;s&&""!==s&&void 0!==Status.class[s]&&(e=Status.class[s]),this.setClass(e)}else"text"===e&&this.setText(s)}setStatus(e){this.setAttribute("status",e)}clearStatusClass(){this.classList.remove(...Status.classArray)}setClass(e){this.clearStatusClass(),this.classList.add(e)}setText(e){this.textContent=e}render(e,t){this.setStatus(e),this.setText(t)}renderNone(e){this.render(Status.none,e)}renderError(e){this.render(Status.error,e)}renderSuccess(e){this.render(Status.success,e)}renderInfo(e){this.render(Status.info,e)}renderWarning(e){this.render(Status.warning,e)}}customElements.define("template-status",StatusTemplate);class TableTemplate extends Template{constructor(e={}){super(Object.extend({alwaysRebuild:!1,elements:{table:"table",thead:"thead",theadTr:"thead > tr",tbody:"tbody",tfoot:"tfoot",tr:"tbody > tr"},schema:{primaryKey:"id",columns:[],columnTitles:[]}},e)),this.rowManager=new ElementManager(this.elements.tbody,this.elements.tr),this.elements.tr.remove()}render(e){this.cacheData(e),this.processRenderData(e),this.options.alwaysRebuild?this.empty():Array.isArray(this.renderData)&&void 0===this.renderData[0][this.options.primaryKey]&&this.empty(),this.rowManager.render(this.renderData)}empty(){this.rowManager.empty()}}customElements.define("template-table",TableTemplate);class WizardTemplate extends FormTemplate{constructor(e={}){super(Object.extend({elements:{navs:".wizard-navs",tabs:".wizard-tabs",pager:"template-pager"}},e)),this.tabCount=0,this.tab=0,this.tabCount=this.elements.tabs.children.length,this.elements.pager.setPage(1),this.elements.pager.setPageCount(this.tabCount),this.attachNavHandlers(),this.attachPagerHanders(),this.goToFirstTab()}isValidTabIndex(e){return e>-1&&e<this.tabCount}displayTab(e,t){if(this.isValidTabIndex(e)){let s=this.elements.tabs.children[e];Template.display(s,t)}}hideTabs(){for(let e=0;e<this.tabCount;e++)this.displayTab(e,!1)}goToTab(e){this.isValidTabIndex(e)&&(this.hideTabs(),this.displayTab(e,!0),this.tab=e,this.elements.pager.setPage(e+1),this.emit("tab.show",e))}goToFirstTab(){this.goToTab(0)}goToLastTab(){this.goToTab(this.tabCount-1)}goToNextTab(){this.tab<this.tabCount-1&&(this.tab++,this.goToTab(this.tab))}goToPreviousTab(){this.tab>0&&(this.tab--,this.goToTab(this.tab))}attachPagerHanders(){let e=this;this.elements.pager.on("next",function(){e.goToNextTab()}),this.elements.pager.on("previous",function(){e.goToPreviousTab()}),this.elements.pager.on("page",function(t){e.goToTab(t-1)})}attachNavHandlers(){let e=this;for(let t=0;t<this.tabCount;t++){let s=this.elements.navs.children[t];Template.on(s,"click.wizard",function(){e.goToTab(t)})}}renderPager(){this.elements.pager.setPage(this.tab+1),this.elements.pager.setPageCount(this.tabCount)}validateTab(e){this.isValidTabIndex(e)}}customElements.define("template-wizard",WizardTemplate);
+Object.setProperties=function(e,t){for(let s in t)e.hasOwnProperty(s)&&(e[s]=t[s]);return e},Object.isEmpty=function(e){return!Object.keys(e).length},Object.extend=function(){let e=arguments[0];if(e)for(let t=1;t<arguments.length;t++){let s=arguments[t];if("object"==typeof s)for(let t in s)if(s.hasOwnProperty(t)){let a=s[t];if(void 0===a)continue;"object"==typeof e[t]&&"object"==typeof a&&e[t]!==a?Object.extend(e[t],a):e[t]=a}}return e},Object.flatten=function(e){var t={};for(var s in e)if(e.hasOwnProperty(s))if("object"==typeof e[s]&&null!==e[s]){var a=Object.flatten(e[s]);for(var r in a)a.hasOwnProperty(r)&&(t[s+"."+r]=a[r])}else t[s]=e[s];return t},Object.unflatten=function(e){let t={};for(let s in e){let a=s.split(".");a.reduce(function(t,r,n){return t[r]||(t[r]=isNaN(Number(a[n+1]))?a.length-1==n?e[s]:{}:[])},t)}return t},String.random=function(e){for(var t,s="";s.length<e;)s+=(void 0,(t=Math.floor(62*Math.random()))<10?t:t<36?String.fromCharCode(t+55):String.fromCharCode(t+61));return s},document.getElementsByDataName=function(e){return document.querySelectorAll(`[data-name="${e}"]`)},document.getElementByDataName=function(e){let t=document.getElementsByDataName(e);return t.length?t[0]:null};class EventSystem{constructor(){return this.events={},this}getHandlersCount(e){let t=this.events[e];if(!t)return 0;let s=0,a=[];for(a.push(t);a.length>0;){let e=a.pop();for(let t in e)"_handlers"===t?s+=e[t].length:"object"==typeof e[t]&&a.push(e[t])}return s}on(e,t){let s=e.split("."),a=this.events;for(let e=0;e<s.length;e++){let r=s[e];a[r]||(a[r]={}),e===s.length-1?(Array.isArray(a[r]._handlers)||(a[r]._handlers=[]),a[r]._handlers.push(t)):a=a[r]}return this}one(e,t){let s=this,a=e+"."+String.random(8);return this.on(a,function(e){t(e),s.off(a)}),this}off(e,t=!0){let s=e.split("."),a=this.events;for(let e=0;e<s.length;e++){let r=s[e];e===s.length-1?t?delete a[r]:(delete a[r]._handlers,0===Object.keys(a[r]).length&&delete a[r]):a=a[r]}return this}emit(e,t){let s=e.split("."),a=this.events;for(let e=0;e<s.length;e++){if(!(a=a[s[e]]))return this;if(e===s.length-1){let e=[];for(e.push(a);e.length;){let s=e.pop();for(let a in s)if("_handlers"===a)for(let e=0;e<s[a].length;e++)s[a][e](t);else e.push(s[a])}}}return this}}class ElementManager extends EventSystem{constructor(e,t,s){super();this.options=Object.extend({primaryKey:"id",maxElements:0,cloneTemplate:!0,removeTemplate:!0,removeDeadTemplates:!0},s),this.wrapper=e,this.template=this.options.cloneTemplate?t.cloneNode(!0):t,this.template.removeAttribute("id"),this.template.classList.remove("template"),this.elements=new Map,this.options.removeTemplate&&t.remove(),this.cachedData=null,this.processedRenderData=null}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}getElementCount(){return this.elements.size}empty(){for(;this.wrapper.firstChild;)this.wrapper.removeChild(this.wrapper.firstChild);this.elements=new Map,this.emit("empty")}attachElementHandlers(e){}cloneTemplate(){let e=this.template.cloneNode(!0);return this.attachElementHandlers(e),this.emit("clone",e),e}appendElement(e){this.wrapper.appendChild(e),this.emit("append",e)}appendElementBefore(e,t){t.before(e)}appendElementAfter(e,t){t.after(e)}removeElement(e){let t=this.elements.get(e);t&&(this.wrapper.removeChild(t),this.elements.delete(e),this.emit("remove",t))}removeDeadElements(e){for(let[t,s]of this.elements)this.getData(e,t)||(s.remove(),this.elements.delete(t),this.emit("remove",s))}getDataType(e){return e instanceof Map?"map":Array.isArray(e)?"array":"object"==typeof e?"object":null}getData(e,t){switch(this.getDataType(e)){case"array":let s=e.filter(e=>e[this.options.primaryKey]===t);return s&&s.length?s[0]:null;case"map":return e.get(t);case"object":return e[t];default:return null}}render(e){switch(this.cachedData=this.cacheData(e),this.processedRenderData=this.processRenderData(e),this.getDataType(e)){case"array":this.renderArray(e);break;case"map":this.renderMap(e);break;default:case"object":this.renderObject(e)}this.options.removeDeadTemplates&&this.removeDeadElements(e)}renderArray(e){for(let t=0;t<e.length;t++){let s=e[t][this.options.primaryKey];if(void 0===s)return void console.error("ElementManager.renderArray: data must have a primary key property");this.renderElement(s,e[t],t)}}renderMap(e){let t=0;for(let[s,a]of e)this.renderElement(s,a,t),t++}renderObject(e){let t=0;for(let s in e)this.renderElement(s,e[s],t),t++}renderSingle(e,t){let s={};s[e]=t,this.render(s)}renderElement(e,t,s){let a=!1,r=this.elements.get(e);r||(a=!0,r=this.cloneTemplate()),r&&(r instanceof Template?r.render(t):Template.render(r,t),a&&this.elements.set(e,r)),this.appendElement(r)}static dataArrayToDataObject(e,t="id"){let s={};for(let a=0;a<e.length;a++){let r=e[a][t];void 0===r?console.error(`dataArrayToDataObject: object does not have required "${t}" value`):s[r]=e[a]}return s}}const Status={none:"none",error:"error",success:"success",processing:"processing",info:"info",warning:"warning",class:{}};Status.class[Status.none]="status-none",Status.class[Status.error]="status-error",Status.class[Status.success]="status-success",Status.class[Status.processing]="status-processing",Status.class[Status.info]="status-info",Status.class[Status.warning]="status-warning",Status.classArray=[Status.class.none,Status.class.error,Status.class.success,Status.class.processing,Status.class.info,Status.class.warning],Status.bgclass={},Status.bgclass[Status.none]="status-bg-none",Status.bgclass[Status.error]="status-bg-error",Status.bgclass[Status.success]="status-bg-success",Status.bgclass[Status.processing]="status-bg-processing",Status.bgclass[Status.info]="status-bg-info",Status.bgclass[Status.warning]="status-bg-warning",Status.bgclassArray=[Status.bgclass.none,Status.bgclass.error,Status.bgclass.success,Status.bgclass.processing,Status.bgclass.info,Status.bgclass.warning],Status.icon={},Status.icon[Status.none]="",Status.icon[Status.error]="",Status.icon[Status.info]="",Status.icon[Status.processing]='<div class="spinner-container"><div class="spinner-wheel"></div></div>',Status.icon[Status.success]="",Status.icon[Status.warning]="";class Template extends HTMLElement{constructor(e={}){super();this.options=Object.extend({elements:{},renderAttribute:"data-name",displayBlock:!0},e),this.eventSystem=new EventSystem,this.nativeEvents={},this.elements={},this.cachedData={},this.renderData={},this.isFirstRender=!0,this.findNamedElements(),this.findElements(this.options.elements),this.options.displayBlock&&this.classList.add("template-block")}setOptions(e){for(let t in e)this.options.hasOwnProperty(t)&&(this.options[t]=e[t])}static addEventSystem(e){e.eventSystem=new EventSystem,e.nativeEvents={}}static on(e,t,s){let a=t.split(".")[0];e.eventSystem||Template.addEventSystem(e),0===e.eventSystem.getHandlersCount(a)&&(e.nativeEvents[a]=function(t){e.eventSystem.emit(a,t)},e.addEventListener(a,e.nativeEvents[a])),e.eventSystem.on(t,s)}on(e,t){return Template.on(this,e,t),this}static one(e,t,s){let a=t.split(".")[0];e.eventSystem||Template.addEventSystem(e),0===e.eventSystem.getHandlersCount(a)&&(e.nativeEvents[a]=function(t){e.eventSystem.emit(a,t),e.removeEventListener(a,e.nativeEvents[a])},e.addEventListener(a,e.nativeEvents[a])),e.eventSystem.one(t,s)}one(e,t){return Template.one(this,e,t),this}static off(e,t,s=!0){if(!(e.eventSystem instanceof EventSystem))return;let a=t.split(".")[0];e.eventSystem.off(t,s),0===e.eventSystem.getHandlersCount(a)&&e.removeEventListener(a,e.nativeEvents[a])}off(e,t=!0){return Template.off(this,e,t),this}static emit(e,t,s){e.eventSystem instanceof EventSystem&&e.eventSystem.emit(t,s)}emit(e,t){return Template.emit(this,e,t),this}setAttributes(e){for(let t=0;t<e.length;t++){let s=e[t];this.setAttribute(s.name,s.value)}return this}static findElements(e,t){"object"!=typeof e.elements&&(e.elements={});for(let s in t)e.elements[s]=e.querySelector(t[s]);return e.elements}findElements(e){return Template.findElements(this,e)}static findNamedElements(e,t="data-name"){let s={},a=e.querySelectorAll(`[name], [${t}]`);for(let e=0;e<a.length;e++){let r=a[e].getAttribute("name");r||(r=a[e].getAttribute(t)),r&&(s[r]?(Array.isArray(s[r])||(s[r]=[s[r]]),s[r].push(a[e])):s[r]=a[e])}return s}findNamedElements(){let e=Template.findNamedElements(this,this.options.renderAttribute);Object.extend(this.elements,e)}getElements(){return this.elements}static select(e,t){return"string"==typeof e&&(t=e,e=document.documentElement),e.querySelectorAll(t)}select(e){return Template.select(this,e)}static selectFirst(e,t){let s=Template.select(e,t);return s instanceof NodeList?s[0]:null}selectFirst(e){return Template.selectFirst(this,e)}static selectLast(e,t){let s=Template.select(e,t);return s instanceof NodeList?s[e.length-1]:null}selectLast(e){return Template.selectLast(e)}static append(e,t){t.appendChild(e)}append(e){return Template.append(e,this),this}appendTo(e){return Template.append(this,e),this}static prepend(e,t){t.insertBefore(e,t.firstChild)}prepend(e){return Template.prepend(e,this),this}prependTo(e){return Template.prepend(this,e),this}static empty(e){for(;this.element;)e.removeChild(e.firstChild)}empty(){return Template.empty(this),this}static isVisible(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}isVisible(){return Template.isVisible(this)}static hide(e){"none"!==e.style.display&&(e._previousDisplay_=e.style.display),e.style.display="none"}hide(){return Template.hide(this),this}static show(e){e.style.display=e._previousDisplay_||"block"}show(){return Template.show(this),this}static display(e,t){return void 0===t&&(t=!Template.isVisible(e)),t?Template.show(e):Template.hide(e)}display(e){return Template.display(this,e),this}static getStyle(e,t){return window.getComputedStyle(e).getPropertyValue(t)}getStyle(e){return Template.getStyle(this,e)}static setHeight(e,t){e.style.height=t+"px"}setHeight(e){return Template.setHeight(this,e),this}static setWidth(e,t){e.style.width=t+"px"}setWidth(e){return Template.setWidth(this,e),this}static addClass(e,t){e.classList.add(t)}addClass(e){return Template.addClass(this,e),this}static hasClass(e,t){return e.classList.contains(t)}hasClass(e){return Template.hasClass(this,e)}static removeClass(e,t){e.classList.remove(t)}removeClass(e){return Template.removeClass(this,e),this}static replaceClass(e,t,s){e.classList.replace(t,s)}replaceClass(e,t){return Template.replaceClass(this,e,t),this}static toggleClass(e,t,s){e.classList.toggle(t,s)}toggleClass(e,t){return Template.toggleClass(this,e,t),this}static getValue(e){return e.value}getValue(){return Template.getValue(this)}static setValue(e,t){e.value=t}setValue(e){return Template.setValue(this,e),this}static enable(e){e.disabled=!1}enable(){return Template.enable(this),this}static disable(e){e.disabled=!0}disable(){return Template.disable(this),this}cacheData(e){return this.cachedData=Object.extend({},e)}processRenderData(e){return this.renderData=e}static setHtml(e,t){e.innerHTML=t}setHtml(e){return Template.setHtml(this,e),this}static render(e,t,s=!1){let a=null;a=s?e.getElements():Template.findNamedElements(e);let r=Object.flatten(t);for(let t in r){let n=r[t],i=a[t];if(i||(s&&(e.findNamedElements(),i=a[t]),i))if(i.render)i.render(n);else{Array.isArray(i)||(i=[i]);for(let e=0;e<i.length;e++){let t=i[e];if("false"!==t.getAttribute("data-render"))if("INPUT"===t.tagName){let e=t.getAttribute("type");e?"checkbox"===e&&n?t.checked=!0:"radio"===e?t.getAttribute("value")===n&&(t.checked=!0):t.value=n:t.value=n}else"SELECT"===t.tagName?t.value=n:t.innerHTML=n}}}}render(e){return this.cachedData=this.cacheData(e),this.renderData=this.processRenderData(Object.extend({},e)),Template.render(this,this.renderData,!0),this.isFirstRender=!1,this}static clone(e){let t=e.cloneNode();return t.innerHTML=e.innerHTML,t}clone(){return Template.clone(this)}}customElements.define("template-element",Template);class FeedbackTemplate extends Template{static get observedAttributes(){return["status","text"]}constructor(e={}){super(Object.extend({elements:{icon:".feedback-icon",text:".feedback-text",close:".feedback-close"}},e)),this.attachButtonHandlers()}attachButtonHandlers(){let e=this;this.elements.close.addEventListener("click",function(){e.hide()})}createHtml(){this.innerHTML="\n            ".trim()}attributeChangedCallback(e,t,s){if("status"===e){let e=Status.class.none,t=Status.icon.none;s&&""!==s&&void 0!==Status.bgclass[s]&&(e=Status.bgclass[s],t=Status.icon[s]),this.setClass(e),this.setIcon(t)}else"text"===e&&this.setText(s)}setStatus(e){this.setAttribute("status",e)}clearStatusClass(){this.classList.remove(...Status.bgclassArray)}setClass(e){this.clearStatusClass(),this.classList.add(e)}setText(e){this.elements.text.textContent=e}setIcon(e){this.elements.icon.innerHTML=e}render(e,t,s){this.setStatus(e),this.setText(t),this.setIcon(s)}renderError(e){this.render(Status.error,e,Status.icon[Status.error])}renderInfo(e){this.render(Status.info,e,Status.icon[Status.error])}renderProcessing(e){this.render(Status.processing,e,Status.icon[Status.processing])}renderSuccess(e){this.render(Status.success,e,Status.icon[Status.success])}renderWarning(e){this.render(Status.warning,e,Status.icon[Status.warning])}}customElements.define("template-feedback",FeedbackTemplate);class FormTemplate extends Template{constructor(e={}){let t={getRequest:null,submitRequest:null,validateRequest:null,checkboxMode:FormTemplate.checkboxMode.number,serializeMode:FormTemplate.serializeMode.toObject,excludedFields:["disabled"],elements:{form:"form",footer:".form-footer",reset:'[type="reset"]',submit:'[type="submit"]'}};super(Object.extend(t,e)),this.serializedData={},this.formattedSerializedData=null,this.attachFormHandlers()}attachFormHandlers(){let e=this;this.elements.form.addEventListener("submit",function(t){t.preventDefault(),e.submit()}),this.elements.form.addEventListener("reset",function(t){t.preventDefault(),e.reload()})}displayFooter(e){Template.display(this.elements.footer,e)}reset(){this.elements.form.reset()}reload(){Object.isEmpty(this.cachedData)?this.reset():this.render(this.cachedData)}validate(){return!0}convertCheckbox(e,t){let s=e.checked;switch(t){case FormTemplate.checkboxMode.boolean:return s;case FormTemplate.checkboxMode.string:return s?"1":"0";case FormTemplate.checkboxMode.onOff:return s?"on":"off";default:case FormTemplate.checkboxMode.number:return s?1:0}}isNotExcluded(e){for(let t=0;t<this.options.excludedFields.length;t++){if("disabled"===this.options.excludedFields[t]&&e.hasAttribute("disabled"))return!1}return!0}serialize(){this.serializedData={};let e=Array.from(this.getElementsByTagName("input")),t=Array.from(this.getElementsByTagName("select")),s=Array.from(this.getElementsByTagName("textarea")),a=e.concat(t,s);for(let e=0;e<a.length;e++)this.isNotExcluded(a[e])&&this.serializeInput(a[e]);return this.serializedData}serializeInput(e){let t=e.getAttribute("name"),s=null;switch(e.getAttribute("type")){case"checkbox":s=this.convertCheckbox(e,this.options.checkboxMode);break;case"radio":if(!e.checked)return null;s=e.value;break;case"file":e.files.length>0&&(s=e.files[0]);break;case"number":s=Number(e.value);break;default:s=e.value}return this.serializedData[t]=s}serializeTextarea(e){return this.serializeSelect(e)}serializeSelect(e){let t=e.getAttribute("name");return this.serializedData[t]=e.value}formatSerializedData(e,t){switch(t){case FormTemplate.serializeMode.toString:return this.serializedDataToString(e);default:case FormTemplate.serializeMode.toObject:return this.serializedData=Object.unflatten(this.serializedData),this.serializedData}}serializedDataToString(e){let t="",s=0,a=Object.keys(e).length;for(let r in e)t+=r+"="+e[r],s++<a-1&&(t+="&");return t}async submit(){this.serializedData=this.serialize(),this.formattedSerializedData=this.formatSerializedData(this.serializedData,this.options.serializeMode);try{let e=await this.options.submitRequest(this.formattedSerializedData);200===e.status?this.emit("success",e.body):this.emit("fail",e.body)}catch(e){this.emit("error",e)}}}FormTemplate.checkboxMode={boolean:0,number:1,string:2,onOff:3},FormTemplate.serializeMode={toString:0,toOrderedString:1,toObject:2,toValue:3},customElements.define("template-form",FormTemplate);class PagerTemplate extends Template{constructor(e){super(e),this.page=1,this.pageCount=1,this.attachButtonHandlers()}setPageCount(e){return this.pageCount=e,this.render(),this}setPage(e){return this.page=e,this.render(),this}render(e={}){return void 0===e.pageCount&&(e.pageCount=this.pageCount),void 0===e.page&&(e.page=this.page),super.render(e),e.pageCount<=1?(this.disableNextButton(),this.disablePreviousButton()):e.page===e.pageCount?(this.disableNextButton(),this.enablePreviousButton()):1===e.page?(this.disablePreviousButton(),this.enableNextButton()):(this.enableNextButton(),this.enablePreviousButton()),this}displayNextButton(e){return Template.display(this.elements.next,e),this}displayPreviousButton(){return Template.display(this.elements.previous,state),this}enableNextButton(){return Template.enable(this.elements.next),this}disableNextButton(){return Template.disable(this.elements.next),this}enablePreviousButton(){return Template.enable(this.elements.previous),this}disablePreviousButton(){return Template.disable(this.elements.previous),this}attachButtonHandlers(){let e=this;Template.on(this.elements.next,"click.pager",function(){e.setPage(e.page+1),e.emit("next")}),Template.on(this.elements.previous,"click.pager",function(){e.setPage(e.page-1),e.emit("previous")});let t=null;return Template.on(this.elements.page,"input.pager",function(){clearTimeout(t),t=setTimeout(function(){let t=parseInt(e.elements.page.value);t&&t<=e.pageCount&&(e.page=t,e.emit("page",e.page))},150)}),this}}customElements.define("template-pager",PagerTemplate);class PopupTemplate extends Template{constructor(e={}){super(Object.extend({displayBlock:!1,showHeader:!0,showClose:!0,showFooter:!0,elements:{header:".popup-header",title:".popup-title",close:".popup-close",body:".popup-body",footer:".popup-footer"}},e)),this.applyOptions(this.options),this.attachButtonHandlers()}attachButtonHandlers(){let e=this;this.elements.close.addEventListener("click",function(t){e.close()})}applyOptions(e){!e.showHeader&&this.elements.header&&this.elements.header.remove(),!e.showClose&&this.elements.close&&this.elements.close.remove(),!e.showFooter&&this.elements.footer&&this.elements.footer.remove()}open(){document.body.classList.add("popup-open"),this.show()}close(){document.body.classList.remove("popup-open"),this.hide()}renderTitle(e){this.elements.title.innerHTML=e}renderBody(e){this.elements.body.innerHTML=e}renderFooter(e){this.elements.footer.innerHTML=e}}customElements.define("template-popup",PopupTemplate);class StatusTemplate extends Template{static get observedAttributes(){}constructor(e){super(e),this.hasAttribute("status")||this.setAttribute("status",Status.none),this.hasAttribute("text")||this.setAttribute("text","")}attributeChangedCallback(e,t,s){if("status"===e){let e=Status.class.none;s&&""!==s&&void 0!==Status.class[s]&&(e=Status.class[s]),this.setClass(e)}else"text"===e&&this.setText(s)}setStatus(e){this.setAttribute("status",e)}clearStatusClass(){this.classList.remove(...Status.classArray)}setClass(e){this.clearStatusClass(),this.classList.add(e)}setText(e){this.textContent=e}render(e,t){this.setStatus(e),this.setText(t)}renderNone(e){this.render(Status.none,e)}renderError(e){this.render(Status.error,e)}renderSuccess(e){this.render(Status.success,e)}renderInfo(e){this.render(Status.info,e)}renderWarning(e){this.render(Status.warning,e)}}customElements.define("template-status",StatusTemplate);class TableTemplate extends Template{constructor(e={}){super(Object.extend({alwaysRebuild:!1,elements:{table:"table",thead:"thead",theadTr:"thead > tr",tbody:"tbody",tfoot:"tfoot",tr:"tbody > tr"},schema:{primaryKey:"id",columns:[],columnTitles:[]}},e)),this.rowManager=new ElementManager(this.elements.tbody,this.elements.tr),this.elements.tr.remove()}render(e){this.cacheData(e),this.processRenderData(e),this.options.alwaysRebuild?this.empty():Array.isArray(this.renderData)&&void 0===this.renderData[0][this.options.primaryKey]&&this.empty(),this.rowManager.render(this.renderData)}empty(){this.rowManager.empty()}}customElements.define("template-table",TableTemplate);class WizardTemplate extends FormTemplate{constructor(e={}){super(Object.extend({elements:{navs:".wizard-navs",tabs:".wizard-tabs",pager:"template-pager"}},e)),this.tabCount=0,this.tab=0,this.tabCount=this.elements.tabs.children.length,this.elements.pager.setPage(1),this.elements.pager.setPageCount(this.tabCount),this.attachNavHandlers(),this.attachPagerHanders(),this.goToFirstTab()}isValidTabIndex(e){return e>-1&&e<this.tabCount}displayTab(e,t){if(this.isValidTabIndex(e)){let s=this.elements.tabs.children[e];Template.display(s,t)}}hideTabs(){for(let e=0;e<this.tabCount;e++)this.displayTab(e,!1)}goToTab(e){this.isValidTabIndex(e)&&(this.hideTabs(),this.displayTab(e,!0),this.tab=e,this.elements.pager.setPage(e+1),this.emit("tab.show",e))}goToFirstTab(){this.goToTab(0)}goToLastTab(){this.goToTab(this.tabCount-1)}goToNextTab(){this.tab<this.tabCount-1&&(this.tab++,this.goToTab(this.tab))}goToPreviousTab(){this.tab>0&&(this.tab--,this.goToTab(this.tab))}attachPagerHanders(){let e=this;this.elements.pager.on("next",function(){e.goToNextTab()}),this.elements.pager.on("previous",function(){e.goToPreviousTab()}),this.elements.pager.on("page",function(t){e.goToTab(t-1)})}attachNavHandlers(){let e=this;for(let t=0;t<this.tabCount;t++){let s=this.elements.navs.children[t];Template.on(s,"click.wizard",function(){e.goToTab(t)})}}renderPager(){this.elements.pager.setPage(this.tab+1),this.elements.pager.setPageCount(this.tabCount)}validateTab(e){this.isValidTabIndex(e)}}customElements.define("template-wizard",WizardTemplate);

dist/template2.min.js

@@ -1,1 +0,1 @@
-Object.setProperties=function(e,t){for(let s in t)e.hasOwnProperty(s)&&(e[s]=t[s]);return e},Object.isEmpty=function(e){return!Object.keys(e).length},Object.extend=function(){let e=arguments[0];if(e)for(let t=1;t<arguments.length;t++){let s=arguments[t];if("object"==typeof s)for(let t in s)if(s.hasOwnProperty(t)){let n=s[t];if(void 0===n)continue;"object"==typeof e[t]&&"object"==typeof n&&e[t]!==n?Object.extend(e[t],n):e[t]=n}}return e},Object.flatten=function(e){var t={};for(var s in e)if(e.hasOwnProperty(s))if("object"==typeof e[s]&&null!==e[s]){var n=Object.flatten(e[s]);for(var r in n)n.hasOwnProperty(r)&&(t[s+"."+r]=n[r])}else t[s]=e[s];return t},Object.unflatten=function(e){let t={};for(let s in e){let n=s.split(".");n.reduce(function(t,r,a){return t[r]||(t[r]=isNaN(Number(n[a+1]))?n.length-1==a?e[s]:{}:[])},t)}return t},String.random=function(e){for(var t,s="";s.length<e;)s+=(void 0,(t=Math.floor(62*Math.random()))<10?t:t<36?String.fromCharCode(t+55):String.fromCharCode(t+61));return s},document.getElementsByDataName=function(e){return document.querySelectorAll(`[data-name="${e}"]`)},document.getElementByDataName=function(e){let t=document.getElementsByDataName(e);return t.length?t[0]:null};class EventSystem{constructor(){return this.events={},this}getHandlersCount(e){let t=this.events[e];if(!t)return 0;let s=0,n=[];for(n.push(t);n.length>0;){let e=n.pop();for(let t in e)"_handlers"===t?s+=e[t].length:"object"==typeof e[t]&&n.push(e[t])}return s}on(e,t){let s=e.split("."),n=this.events;for(let e=0;e<s.length;e++){let r=s[e];n[r]||(n[r]={}),e===s.length-1?(Array.isArray(n[r]._handlers)||(n[r]._handlers=[]),n[r]._handlers.push(t)):n=n[r]}return this}one(e,t){let s=this,n=e+"."+String.random(8);return this.on(n,function(e){t(e),s.off(n)}),this}off(e,t=!0){let s=e.split("."),n=this.events;for(let e=0;e<s.length;e++){let r=s[e];e===s.length-1?t?delete n[r]:(delete n[r]._handlers,0===Object.keys(n[r]).length&&delete n[r]):n=n[r]}return this}emit(e,t){let s=e.split("."),n=this.events;for(let e=0;e<s.length;e++){if(!(n=n[s[e]]))return this;if(e===s.length-1){let e=[];for(e.push(n);e.length;){let s=e.pop();for(let n in s)if("_handlers"===n)for(let e=0;e<s[n].length;e++)s[n][e](t);else e.push(s[n])}}}return this}}class ElementManager extends EventSystem{constructor(e,t,s){super();return this.options=Object.extend({primaryKey:"id",maxElements:0,cloneTemplate:!0,removeTemplate:!0,removeDeadTemplates:!0},s),this.wrapper=e,this.template=this.options.cloneTemplate?t.cloneNode(!0):t,this.template.removeAttribute("id"),this.template.classList.remove("template"),this.elements=new Map,this.options.removeTemplate&&t.remove(),this.cachedData={},this.processedRenderData={},this}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}empty(){for(;this.wrapper.firstChild;)this.wrapper.removeChild(this.wrapper.firstChild);return this.elements=new Map,this}attachElementHandlers(e){return this}cloneTemplate(){let e=this.template.cloneNode(!0);return this.attachElementHandlers(e),e}appendElement(e){return this.wrapper.appendChild(e),this}appendElementBefore(e,t){return t.before(e),this}appendElementAfter(e,t){return t.after(e),this}removeElement(e){let t=this.elements.get(e);return t&&(this.wrapper.removeChild(t),this.elements.delete(e)),this}removeDeadElements(e){for(let[t,s]of this.elements)this.getData(e,t)||(s.remove(),this.elements.delete(t));return this}getDataType(e){return e instanceof Map?"map":Array.isArray(e)?"array":"object"==typeof e?"object":null}getData(e,t){switch(this.getDataType(e)){case"array":let s=e.filter(e=>e[this.options.primaryKey]===t);return s&&s.length?s[0]:null;case"map":return e.get(t);case"object":return e[t];default:return null}}render(e){switch(this.cachedData=this.cacheData(e),this.processedRenderData=this.processRenderData(e),this.getDataType(e)){case"array":this.renderArray(e);break;case"map":this.renderMap(e);break;default:case"object":this.renderObject(e)}return this.options.removeDeadTemplates&&this.removeDeadElements(e),this}renderArray(e){for(let t=0;t<e.length;t++){let s=e[t][this.options.primaryKey];if(void 0===s)return void console.error("ElementManager.renderArray: data must have a primary key property");this.renderElement(s,e[t],t)}return this}renderMap(e){let t=0;for(let[s,n]of e)this.renderElement(s,n,t),t++;return this}renderObject(e){let t=0;for(let s in e)this.renderElement(s,e[s],t),t++;return this}renderSingle(e,t){let s={};return s[e]=t,this.render(s),this}renderElement(e,t,s){let n=!1,r=this.elements.get(e);return r||(n=!0,r=this.cloneTemplate()),r&&(r instanceof Template?r.render(t):Template.render(r,t),n&&this.elements.set(e,r)),this.appendElement(r),this}static dataArrayToDataObject(e,t="id"){let s={};for(let n=0;n<e.length;n++){let r=e[n][t];void 0===r?console.error(`dataArrayToDataObject: object does not have required "${t}" value`):s[r]=e[n]}return s}}const Status={none:"none",error:"error",success:"success",processing:"processing",info:"info",warning:"warning",class:{}};Status.class[Status.none]="status-none",Status.class[Status.error]="status-error",Status.class[Status.success]="status-success",Status.class[Status.processing]="status-processing",Status.class[Status.info]="status-info",Status.class[Status.warning]="status-warning",Status.classArray=[Status.class.none,Status.class.error,Status.class.success,Status.class.processing,Status.class.info,Status.class.warning],Status.bgclass={},Status.bgclass[Status.none]="status-bg-none",Status.bgclass[Status.error]="status-bg-error",Status.bgclass[Status.success]="status-bg-success",Status.bgclass[Status.processing]="status-bg-processing",Status.bgclass[Status.info]="status-bg-info",Status.bgclass[Status.warning]="status-bg-warning",Status.bgclassArray=[Status.bgclass.none,Status.bgclass.error,Status.bgclass.success,Status.bgclass.processing,Status.bgclass.info,Status.bgclass.warning],Status.icon={},Status.icon[Status.none]="",Status.icon[Status.error]="",Status.icon[Status.info]="",Status.icon[Status.processing]='<div class="spinner-container"><div class="spinner-wheel"></div></div>',Status.icon[Status.success]="",Status.icon[Status.warning]="";class Template extends HTMLElement{constructor(e={}){super();this.options=Object.extend({elements:{},renderAttribute:"data-name",displayBlock:!0},e),this.eventSystem=new EventSystem,this.nativeEvents={},this.elements={},this.cachedData={},this.renderData={},this.isFirstRender=!0,this.findNamedElements(),this.findElements(this.options.elements),this.options.displayBlock&&this.classList.add("template-block")}setOptions(e){for(let t in e)this.options.hasOwnProperty(t)&&(this.options[t]=e[t])}static addEventSystem(e){e.eventSystem=new EventSystem,e.nativeEvents={}}static on(e,t,s){let n=t.split(".")[0];e.eventSystem||Template.addEventSystem(e),0===e.eventSystem.getHandlersCount(n)&&(e.nativeEvents[n]=function(t){e.eventSystem.emit(n,t)},e.addEventListener(n,e.nativeEvents[n])),e.eventSystem.on(t,s)}on(e,t){return Template.on(this,e,t),this}static one(e,t,s){let n=t.split(".")[0];e.eventSystem||Template.addEventSystem(e),0===e.eventSystem.getHandlersCount(n)&&(e.nativeEvents[n]=function(t){e.eventSystem.emit(n,t),e.removeEventListener(n,e.nativeEvents[n])},e.addEventListener(n,e.nativeEvents[n])),e.eventSystem.one(t,s)}one(e,t){return Template.one(this,e,t),this}static off(e,t,s=!0){if(!(e.eventSystem instanceof EventSystem))return;let n=t.split(".")[0];e.eventSystem.off(t,s),0===e.eventSystem.getHandlersCount(n)&&e.removeEventListener(n,e.nativeEvents[n])}off(e,t=!0){return Template.off(this,e,t),this}static emit(e,t,s){e.eventSystem instanceof EventSystem&&e.eventSystem.emit(t,s)}emit(e,t){return Template.emit(this,e,t),this}setAttributes(e){for(let t=0;t<e.length;t++){let s=e[t];this.setAttribute(s.name,s.value)}return this}static findElements(e,t){"object"!=typeof e.elements&&(e.elements={});for(let s in t)e.elements[s]=e.querySelector(t[s]);return e.elements}findElements(e){return Template.findElements(this,e)}static findNamedElements(e,t="data-name"){let s={},n=e.querySelectorAll(`[name], [${t}]`);for(let e=0;e<n.length;e++){let r=n[e].getAttribute("name");r||(r=n[e].getAttribute(t)),r&&(s[r]?(Array.isArray(s[r])||(s[r]=[s[r]]),s[r].push(n[e])):s[r]=n[e])}return s}findNamedElements(){let e=Template.findNamedElements(this,this.options.renderAttribute);Object.extend(this.elements,e)}getElements(){return this.elements}static select(e,t){return"string"==typeof e&&(t=e,e=document.documentElement),e.querySelectorAll(t)}select(e){return Template.select(this,e)}static selectFirst(e,t){let s=Template.select(e,t);return s instanceof NodeList?s[0]:null}selectFirst(e){return Template.selectFirst(this,e)}static selectLast(e,t){let s=Template.select(e,t);return s instanceof NodeList?s[e.length-1]:null}selectLast(e){return Template.selectLast(e)}static append(e,t){t.appendChild(e)}append(e){return Template.append(e,this),this}appendTo(e){return Template.append(this,e),this}static prepend(e,t){t.insertBefore(e,t.firstChild)}prepend(e){return Template.prepend(e,this),this}prependTo(e){return Template.prepend(this,e),this}static empty(e){for(;this.element;)e.removeChild(e.firstChild)}empty(){return Template.empty(this),this}static isVisible(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}isVisible(){return Template.isVisible(this)}static hide(e){"none"!==e.style.display&&(e._previousDisplay_=e.style.display),e.style.display="none"}hide(){return Template.hide(this),this}static show(e){e.style.display=e._previousDisplay_||"block"}show(){return Template.show(this),this}static display(e,t){return void 0===t&&(t=!Template.isVisible(e)),t?Template.show(e):Template.hide(e)}display(e){return Template.display(this,e),this}static getStyle(e,t){return window.getComputedStyle(e).getPropertyValue(t)}getStyle(e){return Template.getStyle(this,e)}static setHeight(e,t){e.style.height=t+"px"}setHeight(e){return Template.setHeight(this,e),this}static setWidth(e,t){e.style.width=t+"px"}setWidth(e){return Template.setWidth(this,e),this}static addClass(e,t){e.classList.add(t)}addClass(e){return Template.addClass(this,e),this}static hasClass(e,t){return e.classList.contains(t)}hasClass(e){return Template.hasClass(this,e)}static removeClass(e,t){e.classList.remove(t)}removeClass(e){return Template.removeClass(this,e),this}static replaceClass(e,t,s){e.classList.replace(t,s)}replaceClass(e,t){return Template.replaceClass(this,e,t),this}static toggleClass(e,t,s){e.classList.toggle(t,s)}toggleClass(e,t){return Template.toggleClass(this,e,t),this}static getValue(e){return e.value}getValue(){return Template.getValue(this)}static setValue(e,t){e.value=t}setValue(e){return Template.setValue(this,e),this}static enable(e){e.disabled=!1}enable(){return Template.enable(this),this}static disable(e){e.disabled=!0}disable(){return Template.disable(this),this}cacheData(e){return this.cachedData=Object.extend({},e)}processRenderData(e){return this.renderData=e}static setHtml(e,t){e.innerHTML=t}setHtml(e){return Template.setHtml(this,e),this}static render(e,t,s=!1){let n=null;n=s?e.getElements():Template.findNamedElements(e);let r=Object.flatten(t);for(let t in r){let a=r[t],i=n[t];if(i||(s&&(e.findNamedElements(),i=n[t]),i))if(i.render)i.render(a);else{Array.isArray(i)||(i=[i]);for(let e=0;e<i.length;e++){let t=i[e];if("false"!==t.getAttribute("data-render"))if("INPUT"===t.tagName){let e=t.getAttribute("type");e?"checkbox"===e&&a?t.checked=!0:"radio"===e?t.getAttribute("value")===a&&(t.checked=!0):t.value=a:t.value=a}else"SELECT"===t.tagName?t.value=a:t.innerHTML=a}}}}render(e){return this.cachedData=this.cacheData(e),this.renderData=this.processRenderData(Object.extend({},e)),Template.render(this,this.renderData,!0),this.isFirstRender=!1,this}static clone(e){let t=e.cloneNode();return t.innerHTML=e.innerHTML,t}clone(){return Template.clone(this)}}customElements.define("template-element",Template);
+Object.setProperties=function(e,t){for(let s in t)e.hasOwnProperty(s)&&(e[s]=t[s]);return e},Object.isEmpty=function(e){return!Object.keys(e).length},Object.extend=function(){let e=arguments[0];if(e)for(let t=1;t<arguments.length;t++){let s=arguments[t];if("object"==typeof s)for(let t in s)if(s.hasOwnProperty(t)){let n=s[t];if(void 0===n)continue;"object"==typeof e[t]&&"object"==typeof n&&e[t]!==n?Object.extend(e[t],n):e[t]=n}}return e},Object.flatten=function(e){var t={};for(var s in e)if(e.hasOwnProperty(s))if("object"==typeof e[s]&&null!==e[s]){var n=Object.flatten(e[s]);for(var a in n)n.hasOwnProperty(a)&&(t[s+"."+a]=n[a])}else t[s]=e[s];return t},Object.unflatten=function(e){let t={};for(let s in e){let n=s.split(".");n.reduce(function(t,a,r){return t[a]||(t[a]=isNaN(Number(n[r+1]))?n.length-1==r?e[s]:{}:[])},t)}return t},String.random=function(e){for(var t,s="";s.length<e;)s+=(void 0,(t=Math.floor(62*Math.random()))<10?t:t<36?String.fromCharCode(t+55):String.fromCharCode(t+61));return s},document.getElementsByDataName=function(e){return document.querySelectorAll(`[data-name="${e}"]`)},document.getElementByDataName=function(e){let t=document.getElementsByDataName(e);return t.length?t[0]:null};class EventSystem{constructor(){return this.events={},this}getHandlersCount(e){let t=this.events[e];if(!t)return 0;let s=0,n=[];for(n.push(t);n.length>0;){let e=n.pop();for(let t in e)"_handlers"===t?s+=e[t].length:"object"==typeof e[t]&&n.push(e[t])}return s}on(e,t){let s=e.split("."),n=this.events;for(let e=0;e<s.length;e++){let a=s[e];n[a]||(n[a]={}),e===s.length-1?(Array.isArray(n[a]._handlers)||(n[a]._handlers=[]),n[a]._handlers.push(t)):n=n[a]}return this}one(e,t){let s=this,n=e+"."+String.random(8);return this.on(n,function(e){t(e),s.off(n)}),this}off(e,t=!0){let s=e.split("."),n=this.events;for(let e=0;e<s.length;e++){let a=s[e];e===s.length-1?t?delete n[a]:(delete n[a]._handlers,0===Object.keys(n[a]).length&&delete n[a]):n=n[a]}return this}emit(e,t){let s=e.split("."),n=this.events;for(let e=0;e<s.length;e++){if(!(n=n[s[e]]))return this;if(e===s.length-1){let e=[];for(e.push(n);e.length;){let s=e.pop();for(let n in s)if("_handlers"===n)for(let e=0;e<s[n].length;e++)s[n][e](t);else e.push(s[n])}}}return this}}class ElementManager extends EventSystem{constructor(e,t,s){super();this.options=Object.extend({primaryKey:"id",maxElements:0,cloneTemplate:!0,removeTemplate:!0,removeDeadTemplates:!0},s),this.wrapper=e,this.template=this.options.cloneTemplate?t.cloneNode(!0):t,this.template.removeAttribute("id"),this.template.classList.remove("template"),this.elements=new Map,this.options.removeTemplate&&t.remove(),this.cachedData=null,this.processedRenderData=null}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}getElementCount(){return this.elements.size}empty(){for(;this.wrapper.firstChild;)this.wrapper.removeChild(this.wrapper.firstChild);this.elements=new Map,this.emit("empty")}attachElementHandlers(e){}cloneTemplate(){let e=this.template.cloneNode(!0);return this.attachElementHandlers(e),this.emit("clone",e),e}appendElement(e){this.wrapper.appendChild(e),this.emit("append",e)}appendElementBefore(e,t){t.before(e)}appendElementAfter(e,t){t.after(e)}removeElement(e){let t=this.elements.get(e);t&&(this.wrapper.removeChild(t),this.elements.delete(e),this.emit("remove",t))}removeDeadElements(e){for(let[t,s]of this.elements)this.getData(e,t)||(s.remove(),this.elements.delete(t),this.emit("remove",s))}getDataType(e){return e instanceof Map?"map":Array.isArray(e)?"array":"object"==typeof e?"object":null}getData(e,t){switch(this.getDataType(e)){case"array":let s=e.filter(e=>e[this.options.primaryKey]===t);return s&&s.length?s[0]:null;case"map":return e.get(t);case"object":return e[t];default:return null}}render(e){switch(this.cachedData=this.cacheData(e),this.processedRenderData=this.processRenderData(e),this.getDataType(e)){case"array":this.renderArray(e);break;case"map":this.renderMap(e);break;default:case"object":this.renderObject(e)}this.options.removeDeadTemplates&&this.removeDeadElements(e)}renderArray(e){for(let t=0;t<e.length;t++){let s=e[t][this.options.primaryKey];if(void 0===s)return void console.error("ElementManager.renderArray: data must have a primary key property");this.renderElement(s,e[t],t)}}renderMap(e){let t=0;for(let[s,n]of e)this.renderElement(s,n,t),t++}renderObject(e){let t=0;for(let s in e)this.renderElement(s,e[s],t),t++}renderSingle(e,t){let s={};s[e]=t,this.render(s)}renderElement(e,t,s){let n=!1,a=this.elements.get(e);a||(n=!0,a=this.cloneTemplate()),a&&(a instanceof Template?a.render(t):Template.render(a,t),n&&this.elements.set(e,a)),this.appendElement(a)}static dataArrayToDataObject(e,t="id"){let s={};for(let n=0;n<e.length;n++){let a=e[n][t];void 0===a?console.error(`dataArrayToDataObject: object does not have required "${t}" value`):s[a]=e[n]}return s}}const Status={none:"none",error:"error",success:"success",processing:"processing",info:"info",warning:"warning",class:{}};Status.class[Status.none]="status-none",Status.class[Status.error]="status-error",Status.class[Status.success]="status-success",Status.class[Status.processing]="status-processing",Status.class[Status.info]="status-info",Status.class[Status.warning]="status-warning",Status.classArray=[Status.class.none,Status.class.error,Status.class.success,Status.class.processing,Status.class.info,Status.class.warning],Status.bgclass={},Status.bgclass[Status.none]="status-bg-none",Status.bgclass[Status.error]="status-bg-error",Status.bgclass[Status.success]="status-bg-success",Status.bgclass[Status.processing]="status-bg-processing",Status.bgclass[Status.info]="status-bg-info",Status.bgclass[Status.warning]="status-bg-warning",Status.bgclassArray=[Status.bgclass.none,Status.bgclass.error,Status.bgclass.success,Status.bgclass.processing,Status.bgclass.info,Status.bgclass.warning],Status.icon={},Status.icon[Status.none]="",Status.icon[Status.error]="",Status.icon[Status.info]="",Status.icon[Status.processing]='<div class="spinner-container"><div class="spinner-wheel"></div></div>',Status.icon[Status.success]="",Status.icon[Status.warning]="";class Template extends HTMLElement{constructor(e={}){super();this.options=Object.extend({elements:{},renderAttribute:"data-name",displayBlock:!0},e),this.eventSystem=new EventSystem,this.nativeEvents={},this.elements={},this.cachedData={},this.renderData={},this.isFirstRender=!0,this.findNamedElements(),this.findElements(this.options.elements),this.options.displayBlock&&this.classList.add("template-block")}setOptions(e){for(let t in e)this.options.hasOwnProperty(t)&&(this.options[t]=e[t])}static addEventSystem(e){e.eventSystem=new EventSystem,e.nativeEvents={}}static on(e,t,s){let n=t.split(".")[0];e.eventSystem||Template.addEventSystem(e),0===e.eventSystem.getHandlersCount(n)&&(e.nativeEvents[n]=function(t){e.eventSystem.emit(n,t)},e.addEventListener(n,e.nativeEvents[n])),e.eventSystem.on(t,s)}on(e,t){return Template.on(this,e,t),this}static one(e,t,s){let n=t.split(".")[0];e.eventSystem||Template.addEventSystem(e),0===e.eventSystem.getHandlersCount(n)&&(e.nativeEvents[n]=function(t){e.eventSystem.emit(n,t),e.removeEventListener(n,e.nativeEvents[n])},e.addEventListener(n,e.nativeEvents[n])),e.eventSystem.one(t,s)}one(e,t){return Template.one(this,e,t),this}static off(e,t,s=!0){if(!(e.eventSystem instanceof EventSystem))return;let n=t.split(".")[0];e.eventSystem.off(t,s),0===e.eventSystem.getHandlersCount(n)&&e.removeEventListener(n,e.nativeEvents[n])}off(e,t=!0){return Template.off(this,e,t),this}static emit(e,t,s){e.eventSystem instanceof EventSystem&&e.eventSystem.emit(t,s)}emit(e,t){return Template.emit(this,e,t),this}setAttributes(e){for(let t=0;t<e.length;t++){let s=e[t];this.setAttribute(s.name,s.value)}return this}static findElements(e,t){"object"!=typeof e.elements&&(e.elements={});for(let s in t)e.elements[s]=e.querySelector(t[s]);return e.elements}findElements(e){return Template.findElements(this,e)}static findNamedElements(e,t="data-name"){let s={},n=e.querySelectorAll(`[name], [${t}]`);for(let e=0;e<n.length;e++){let a=n[e].getAttribute("name");a||(a=n[e].getAttribute(t)),a&&(s[a]?(Array.isArray(s[a])||(s[a]=[s[a]]),s[a].push(n[e])):s[a]=n[e])}return s}findNamedElements(){let e=Template.findNamedElements(this,this.options.renderAttribute);Object.extend(this.elements,e)}getElements(){return this.elements}static select(e,t){return"string"==typeof e&&(t=e,e=document.documentElement),e.querySelectorAll(t)}select(e){return Template.select(this,e)}static selectFirst(e,t){let s=Template.select(e,t);return s instanceof NodeList?s[0]:null}selectFirst(e){return Template.selectFirst(this,e)}static selectLast(e,t){let s=Template.select(e,t);return s instanceof NodeList?s[e.length-1]:null}selectLast(e){return Template.selectLast(e)}static append(e,t){t.appendChild(e)}append(e){return Template.append(e,this),this}appendTo(e){return Template.append(this,e),this}static prepend(e,t){t.insertBefore(e,t.firstChild)}prepend(e){return Template.prepend(e,this),this}prependTo(e){return Template.prepend(this,e),this}static empty(e){for(;this.element;)e.removeChild(e.firstChild)}empty(){return Template.empty(this),this}static isVisible(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)}isVisible(){return Template.isVisible(this)}static hide(e){"none"!==e.style.display&&(e._previousDisplay_=e.style.display),e.style.display="none"}hide(){return Template.hide(this),this}static show(e){e.style.display=e._previousDisplay_||"block"}show(){return Template.show(this),this}static display(e,t){return void 0===t&&(t=!Template.isVisible(e)),t?Template.show(e):Template.hide(e)}display(e){return Template.display(this,e),this}static getStyle(e,t){return window.getComputedStyle(e).getPropertyValue(t)}getStyle(e){return Template.getStyle(this,e)}static setHeight(e,t){e.style.height=t+"px"}setHeight(e){return Template.setHeight(this,e),this}static setWidth(e,t){e.style.width=t+"px"}setWidth(e){return Template.setWidth(this,e),this}static addClass(e,t){e.classList.add(t)}addClass(e){return Template.addClass(this,e),this}static hasClass(e,t){return e.classList.contains(t)}hasClass(e){return Template.hasClass(this,e)}static removeClass(e,t){e.classList.remove(t)}removeClass(e){return Template.removeClass(this,e),this}static replaceClass(e,t,s){e.classList.replace(t,s)}replaceClass(e,t){return Template.replaceClass(this,e,t),this}static toggleClass(e,t,s){e.classList.toggle(t,s)}toggleClass(e,t){return Template.toggleClass(this,e,t),this}static getValue(e){return e.value}getValue(){return Template.getValue(this)}static setValue(e,t){e.value=t}setValue(e){return Template.setValue(this,e),this}static enable(e){e.disabled=!1}enable(){return Template.enable(this),this}static disable(e){e.disabled=!0}disable(){return Template.disable(this),this}cacheData(e){return this.cachedData=Object.extend({},e)}processRenderData(e){return this.renderData=e}static setHtml(e,t){e.innerHTML=t}setHtml(e){return Template.setHtml(this,e),this}static render(e,t,s=!1){let n=null;n=s?e.getElements():Template.findNamedElements(e);let a=Object.flatten(t);for(let t in a){let r=a[t],i=n[t];if(i||(s&&(e.findNamedElements(),i=n[t]),i))if(i.render)i.render(r);else{Array.isArray(i)||(i=[i]);for(let e=0;e<i.length;e++){let t=i[e];if("false"!==t.getAttribute("data-render"))if("INPUT"===t.tagName){let e=t.getAttribute("type");e?"checkbox"===e&&r?t.checked=!0:"radio"===e?t.getAttribute("value")===r&&(t.checked=!0):t.value=r:t.value=r}else"SELECT"===t.tagName?t.value=r:t.innerHTML=r}}}}render(e){return this.cachedData=this.cacheData(e),this.renderData=this.processRenderData(Object.extend({},e)),Template.render(this,this.renderData,!0),this.isFirstRender=!1,this}static clone(e){let t=e.cloneNode();return t.innerHTML=e.innerHTML,t}clone(){return Template.clone(this)}}customElements.define("template-element",Template);

package.json

 {
   "name": "@voliware/template2",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "a tiny client-side library for rendering and generating HTML",
@@ -5,0 +5,0 @@ "main": "build.js",

src/js/document.js

 /**
  * Get a set of matching elements by data-name attribute
- * @param {string} dataname - the data-name attribute value
+ * @param {String} dataname - the data-name attribute value
  * @returns {HTMLElement[]}
@@ -12,3 +12,3 @@ */
  * Get the first matching element by data-name attribute
- * @param {string} dataname - the data-name attribute value
+ * @param {String} dataname - the data-name attribute value
  * @returns {HTMLElement}
@@ -15,0 +15,0 @@ */

src/js/elementManager.js

 /**
  * Element Manager.
  * Can create and manage HTMLElements and Templates.
- * Must be passed a cloneable HTMLElement element 
- * in the constructor to be of any use.
+ * Must be passed a cloneable HTMLElement element in the constructor to be of 
+ * any use.
+ * @fires ElementManager#clone
+ * @fires ElementManager#append
+ * @fires ElementManager#remove
+ * @fires ElementManager#empty
  * @extends {EventSystem}
@@ -33,16 +37,15 @@ * @example
      * @param {HTMLElement} template - a cloneable HTMLElement or Template
-     * @param {object} [options]
-     * @param {string} [options.primaryKey="id"] - necessary for rendering data from
-     *                  arrays of objects. Otherwise, ElementManager will just empty
-     *                  itself and rebuild from scratch.
-     * @param {number} [options.maxElements=0] - max element count
-     * @param {boolean} [options.cloneTemplate=true] - whether to clone the initial
-     *                  template from the DOM. Most of the time, you want to do this.   
-     * @param {boolean} [options.removeTemplate=true] - whether to remove the initial
-     *                  template on the DOM. Most of the time, you want to do this,
-     *                  unless there are many ElementManagers using the same template.                  
-     * @param {boolean} [options.removeDeadTemplates=true] - whether to remove dead 
-     *                  templates. A template is dead when it does not exist 
-     *                  in new data passed to render()
-     * @returns {ElementManager}
+     * @param {Object} [options]
+     * @param {String} [options.primaryKey="id"] - necessary for rendering data
+     * from arrays of objects. Otherwise, ElementManager will just empty itself
+     * and rebuild from scratch.
+     * @param {Number} [options.maxElements=0] - max element count
+     * @param {boolean} [options.cloneTemplate=true] - whether to clone the 
+     * initial template from the DOM. Most of the time, you want to do this.   
+     * @param {boolean} [options.removeTemplate=true] - whether to remove the 
+     * initial template on the DOM. Most of the time, you want to do this,
+     * unless there are many ElementManagers using the same template.                  
+     * @param {boolean} [options.removeDeadTemplates=true] - whether to remove
+     * dead templates. A template is dead when it does not exist in new data 
+     * passed to render()
      */
@@ -82,4 +85,4 @@ constructor(wrapper, template, options){
 
-        // remove the original template from the DOM
-        // it will always be cloneable from this.template
+        // Remove the original template from the DOM
+        // It will always be cloneable from this.template
         if(this.options.removeTemplate){
@@ -89,12 +92,19 @@ template.remove();
 
-        this.cachedData = {};
-        this.processedRenderData = {};
+        /**
+         * Unmodified data passed to the render function.
+         * @type {Array|Map|Object}
+         */
+        this.cachedData = null;
 
-        return this;
+        /**
+         * Processed data passed to the render function.
+         * @type {Array|Map|Object}
+         */
+        this.processedRenderData = null;
     }
 
     /**
-     * Cache data as-is in case the 
-     * original data is required.
-     * @param {object} data 
+     * Cache data as-is in case the original data is required.
+     * todo: handle array, map, and object
+     * @param {Array|Map|Object} data 
      */
@@ -107,4 +117,4 @@ cacheData(data){
      * Process data to be used for rendering.
-     * @param {object} data 
-     * @returns {object}
+     * @param {Array|Map|Object} data 
+     * @returns {Array|Map|Object}
      */
@@ -114,6 +124,13 @@ processRenderData(data){
     }
+
+    /**
+     * Get the number of elements in the map
+     * @returns {Number}
+     */
+    getElementCount(){
+        return this.elements.size;
+    }
     
     /**
      * Empty the contents of the template manager
-     * @returns {ElementManager}
      */
@@ -125,3 +142,3 @@ empty(){
         this.elements = new Map();
-        return this;
+        this.emit("empty");
     }
@@ -131,13 +148,10 @@
      * Attach handlers to an element
-     * @param {HTLMElement} element 
-     * @returns {ElementManager}
+     * @param {HTLMElement|Template} element 
      */
     attachElementHandlers(element){
-        return this;
     }
 
     /**
-     * Create a new clone of the template.
-     * Attach handlers to it.
-     * @returns {HTLMElement}
+     * Create a new clone of the template. Attach handlers to it.
+     * @returns {HTLMElement|Template}
      */
@@ -147,2 +161,3 @@ cloneTemplate(){
         this.attachElementHandlers(element);
+        this.emit("clone", element);
         return element;
@@ -153,8 +168,7 @@ }
      * Append an element to the wrapper
-     * @param {HTLMElement} element 
-     * @returns {ElementManager}
+     * @param {HTLMElement|Template} element 
      */
     appendElement(element){
         this.wrapper.appendChild(element);
-        return this;
+        this.emit("append", element);
     }
@@ -164,9 +178,8 @@
      * Append an element before an element
-     * @param {HTLMElement} element 
-     * @param {HTMLElement} elementTo
-     * @returns {ElementManager}
+     * @todo Why is this here?
+     * @param {HTLMElement|Template} element 
+     * @param {HTMLElement|Template} elementTo
      */
     appendElementBefore(element, elementTo){
         elementTo.before(element);
-        return this;
     }
@@ -176,16 +189,13 @@
      * Append an element after an element
-     * @param {HTLMElement} element 
-     * @param {HTMLElement} elementTo
-     * @returns {ElementManager}
+     * @todo Why is this here?
+     * @param {HTLMElement|Template} element 
+     * @param {HTMLElement|Template} elementTo
      */
     appendElementAfter(element, elementTo){
         elementTo.after(element);
-        return this;
     }
 
     /**
-     * Remove an element by id.
-     * Removes from the DOM and collection.
-     * @param {string} id 
-     * @returns {ElementManager}
+     * Remove an element by id. Removes from the DOM and collection.
+     * @param {String} id 
      */
@@ -197,4 +207,4 @@ removeElement(id){
             this.elements.delete(id);
+            this.emit("remove", element);
         }
-        return this;
     }
@@ -207,10 +217,10 @@
      * is not found in the data, then the template is considered dead (old).
-     * @example // The following objects currently exists in this.elements
-     *           { user1:Template, user2:Template, user3:Template }
-     *          // The following objects exist in the passed in data object
-     *           { user2: {...}, user3: {...} }
-     *          // user1 is missing in the data. Therefore, the template named
-     *          // "user1" is no longer relevant, and is removed.
-     * @param {object} data
-     * @returns {ElementManager}
+     * @example 
+     * // The following objects currently exists in this.elements
+     * { user1:Template, user2:Template, user3:Template }
+     * // The following objects exist in the passed in data object
+     * { user2: {...}, user3: {...} }
+     * // user1 is missing in the data. Therefore, the template named
+     * // "user1" is no longer relevant, and is removed.
+     * @param {Object} data
      */
@@ -222,5 +232,5 @@ removeDeadElements(data){
                 this.elements.delete(key);
+                this.emit("remove", element);
             }
         }
-        return this;
     }
@@ -230,4 +240,4 @@
      * Get the type of the data parameter.
-     * @param {object[]|object|Map} data 
-     * @returns {string}
+     * @param {Object[]|Object|Map} data 
+     * @returns {String|Null}
      */
@@ -253,5 +263,5 @@ getDataType(data){
      * todo: rename.. to something better
-     * @param {object[]|object|Map} data 
-     * @param {string} key 
-     * @returns {null|object}
+     * @param {Object[]|object|Map} data 
+     * @param {String} key 
+     * @returns {Null|Object}
      */
@@ -275,7 +285,5 @@ getData(data, key){
     /**
-     * Run through each object of data and render the object
-     * into an element. If the data is new, the
-     * element will be appended to the wrapper.
-     * @param {object[]|object|Map} data 
-     * @returns {ElementManager}
+     * Run through each object of data and render the object into an element.
+     * If the data is new, the element will be appended to the wrapper.
+     * @param {Object[]|Object|Map} data 
      */
@@ -300,3 +308,2 @@ render(data){
         }
-        return this;
     }
@@ -307,4 +314,3 @@
      * Each object must have an "id" property.
-     * @param {object[]} data 
-     * @returns {ElementManager}
+     * @param {Object[]} data 
      */
@@ -320,3 +326,2 @@ renderArray(data){
         }
-        return this;
     }
@@ -327,3 +332,2 @@
      * @param {Map} data 
-     * @returns {ElementManager}
      */
@@ -336,3 +340,2 @@ renderMap(data){
         }
-        return this;
     }
@@ -342,4 +345,3 @@
      * Render elements from an object of objects.
-     * @param {object} data 
-     * @returns {ElementManager}
+     * @param {Object} data 
      */
@@ -352,14 +354,10 @@ renderObject(data){
         }
-        return this;
     }
 
     /**
-     * Render a single object of data by faking
-     * it as an object of objects.
-     * Note that if removeDeadElements is 
-     * set to true (by default), this will 
+     * Render a single object of data by faking it as an object of objects.
+     * Note that if removeDeadElements is set to true (by default), this will
      * remove all other elements.
-     * @param {string} id 
-     * @param {object} object 
-     * @returns {ElementManager}
+     * @param {String} id 
+     * @param {Object} object 
      */
@@ -370,3 +368,2 @@ renderSingle(id, object){
         this.render(obj);
-        return this;
     }
@@ -377,6 +374,5 @@
      * If the element does not exist, create it.
-     * @param {number|string} id - element and data identifier
-     * @param {object} data - object of data
-     * @param {number} index - the numerical index of the element
-     * @returns {ElementManager}
+     * @param {Number|String} id - Element and data identifier
+     * @param {Object} data - Object of data
+     * @param {Number} index - The numerical index of the element
      */
@@ -404,13 +400,10 @@ renderElement(id, data, index){
         this.appendElement(element);             
-
-        return this;
     }
 
     /**
-     * Convert an array of objects into an 
-     * object of objects. Each object in the
-     * array must have a primary key.
-     * @param {object[]} dataArr 
-     * @param {string} [primaryKey="id"] - the key that identifies each data object
-     * @returns {object}
+     * Convert an array of objects into an object of objects. Each object in 
+     * the array must have a primary key.
+     * @param {Object[]} dataArr 
+     * @param {String} [primaryKey="id"] - The key that identifies each data object
+     * @returns {Object}
      */
@@ -417,0 +410,0 @@ static dataArrayToDataObject(dataArr, primaryKey = 'id'){

src/js/eventSystem.js

@@ -29,4 +29,4 @@ /**
      * Will look through all namespaced events as well.
-     * @param {string} event 
-     * @returns {number}
+     * @param {String} event 
+     * @returns {Number}
      */
@@ -61,3 +61,3 @@ getHandlersCount(event){
      * Supports namespace handling.
-     * @param {string} event - an event such as click, or click.foo.bar
+     * @param {String} event - an event such as click, or click.foo.bar
      * @param {function} callback - a function to run when the event is emitted
@@ -90,3 +90,3 @@ * @returns {EventSystem}
      * Attach and event that only runs once.
-     * @param {string} event - an event such as click, or click.foo.bar
+     * @param {String} event - an event such as click, or click.foo.bar
      * @param {function} callback - a function to run when the event is emitted
@@ -109,3 +109,3 @@ * @returns {EventSystem}
      * If removeAllChildren is set to true, it will also remove any namespaced handlers.
-     * @param {string} event - an event such as click, or click.foo.bar
+     * @param {String} event - an event such as click, or click.foo.bar
      * @param {boolean} [removeAllChildHandlers=true] - whether to remove all child events
@@ -142,3 +142,3 @@ * @returns {EventSystem}
      * This will emit all namespaced child events.
-     * @param {string} event - an event such as click, or click.foo.bar
+     * @param {String} event - an event such as click, or click.foo.bar
      * @param {*} data - data to pass along with the event
@@ -145,0 +145,0 @@ * @returns {EventSystem}

src/js/object.js

@@ -5,5 +5,5 @@ /**
  * matching properties.
- * @param {object} obj - the object to alter
- * @param {object} data - an object of data
- * @returns {object} the original object
+ * @param {Object} obj - the object to alter
+ * @param {Object} data - an object of data
+ * @returns {Object} the original object
  */
@@ -21,3 +21,3 @@ Object.setProperties = function(obj, data){
  * Check if an object is empty
- * @param {object} obj - the object to check
+ * @param {Object} obj - the object to check
  * @returns {boolean}
@@ -31,3 +31,3 @@ */
  * Extends an object into another
- * @returns {object}
+ * @returns {Object}
  * @example
@@ -69,4 +69,4 @@ * let o = Object.extend({}, {a:1}, {a:2, b:3});
  * https://tinyurl.com/y6oe2ebq
- * @param {object} obj
- * @returns {object}
+ * @param {Object} obj
+ * @returns {Object}
  * @example 
@@ -96,4 +96,4 @@ * Object.flatten({a: {b: 1, c: 2}}); // {"a.b": 1, "a.c": 2}
  * https://tinyurl.com/y536fqrf
- * @param {object} obj
- * @returns {object}
+ * @param {Object} obj
+ * @returns {Object}
  * @example
@@ -100,0 +100,0 @@ * Object.unflatten({"a.b": 1, "a.c": 2}); // {a: {b: 1, c: 2}}

src/js/string.js

 /**
  * Creates a random string of characters
- * @param {number} len - length of the string
- * @returns {string}
+ * @param {Number} len - length of the string
+ * @returns {String}
  */
@@ -6,0 +6,0 @@ String.random = function(len){

src/js/template2.js

@@ -24,6 +24,6 @@ /**
      * Constructor
-     * @param {object} [options={}]
-     * @param {object} [options.elements={}] - a collection of element selectors
+     * @param {Object} [options={}]
+     * @param {Object} [options.elements={}] - a collection of element selectors
      * to capture child elements of the Template
-     * @param {string} [options.renderAttribute="data-name"] - the attribute of
+     * @param {String} [options.renderAttribute="data-name"] - the attribute of
      * each child element to match data in render() with
@@ -56,3 +56,3 @@ * @param {boolean} [options.displayBlock=true] - whether to add the
      * Set Template options
-     * @param {object} options 
+     * @param {Object} options 
      */
@@ -83,3 +83,3 @@ setOptions(options){
      * @param {HTMLElement} element 
-     * @param {string} event 
+     * @param {String} event 
      * @param {function} callback
@@ -116,3 +116,3 @@ * @example
      * and called by the native event system.
-     * @param {string} event 
+     * @param {String} event 
      * @param {function} callback 
@@ -130,3 +130,3 @@ * @returns {Template}
      * @param {HTMLElement} element 
-     * @param {string} event 
+     * @param {String} event 
      * @param {function} callback
@@ -159,3 +159,3 @@ * @example
      * Add an event handler that firwa once.
-     * @param {string} event 
+     * @param {String} event 
      * @param {function} callback 
@@ -173,3 +173,3 @@ * @returns {Template}
      * @param {HTMLElement} element 
-     * @param {string} event - an event such as click, or click.foo.bar
+     * @param {String} event - an event such as click, or click.foo.bar
      * @param {boolean} [removeAllChildHandlers=true] - whether to remove all child events
@@ -193,3 +193,3 @@ * @returns {Template}
      * If removeAllChildren is set to true, it will also remove any namespaced handlers.
-     * @param {string} event - an event such as click, or click.foo.bar
+     * @param {String} event - an event such as click, or click.foo.bar
      * @param {boolean} [removeAllChildHandlers=true] - whether to remove all child events
@@ -206,3 +206,3 @@ * @returns {Template}
      * @param {HTMLElement} element 
-     * @param {string} event - an event such as click, or click.foo.bar
+     * @param {String} event - an event such as click, or click.foo.bar
      * @param {*} data - data to pass along with the event
@@ -219,3 +219,3 @@ * @returns {EventSystem}
      * Emit an event.
-     * @param {string} event - an event such as click, or click.foo.bar
+     * @param {String} event - an event such as click, or click.foo.bar
      * @param {*} data - data to pass along with the event
@@ -249,4 +249,4 @@ * @returns {EventSystem}
      * @param {HTMLElement} element 
-     * @param {object} elements - elements to find
-     * @returns {object}
+     * @param {Object} elements - elements to find
+     * @returns {Object}
      */
@@ -265,4 +265,4 @@ static findElements(element, elements){
      * Find and register elements into the elements object.
-     * @param {object} elements - elements to find
-     * @returns {object}
+     * @param {Object} elements - elements to find
+     * @returns {Object}
      */
@@ -276,3 +276,3 @@ findElements(elements){
      * @param {HTMLElement} element - HTMLElement to search through
-     * @returns {object}
+     * @returns {Object}
      */
@@ -313,3 +313,3 @@ static findNamedElements(element, selector = 'data-name'){
      * Get registered child elements of the Template.
-     * @returns {object}
+     * @returns {Object}
      */
@@ -324,3 +324,3 @@ getElements(){
      * @param {HTMLElement} element - HTMLElement to search through
-     * @param {string} selector - any valid css selector
+     * @param {String} selector - any valid css selector
      * @returns {HTMLElement}
@@ -338,3 +338,3 @@ */
      * Select all matching child elements of the root element.
-     * @param {string} selector - any valid css selector
+     * @param {String} selector - any valid css selector
      * @returns {HTMLElement}
@@ -349,3 +349,3 @@ */
      * @param {HTMLElement} element - HTMLElement to search through
-     * @param {string} selector - any valid css selector
+     * @param {String} selector - any valid css selector
      * @returns {HTMLElement}
@@ -365,3 +365,3 @@ */
      * Select the first matching child element of the root element.
-     * @param {string} selector - any valid css selector
+     * @param {String} selector - any valid css selector
      * @returns {HTMLElement}
@@ -377,3 +377,3 @@ */
      * @param {HTMLElement} element - HTMLElement to search through
-     * @param {string} selector - any valid css selector
+     * @param {String} selector - any valid css selector
      * @returns {HTMLElement}
@@ -393,3 +393,3 @@ */
      * Select the last matching child element of the root element.
-     * @param {string} selector - any valid css selector
+     * @param {String} selector - any valid css selector
      * @returns {HTMLElement}
@@ -567,4 +567,4 @@ */
      * @param {HTMLElement} element 
-     * @param {string} style - style such as opacity, height, etc
-     * @returns {string}
+     * @param {String} style - style such as opacity, height, etc
+     * @returns {String}
      */
@@ -577,4 +577,4 @@ static getStyle(element, style){
      * Get the value of a style of the Template
-     * @param {string} style - style such as opacity, height, etc
-     * @returns {string}
+     * @param {String} style - style such as opacity, height, etc
+     * @returns {String}
      */
@@ -592,3 +592,3 @@ getStyle(style){
      * @param {HTMLElement} element 
-     * @param {number} height 
+     * @param {Number} height 
      */
@@ -601,3 +601,3 @@ static setHeight(element, height){
      * Set the height of the Template
-     * @param {number} height 
+     * @param {Number} height 
      * @returns {Template}
@@ -613,3 +613,3 @@ */
      * @param {HTMLElement} element 
-     * @param {number} width 
+     * @param {Number} width 
      */
@@ -622,3 +622,3 @@ static setWidth(element, width){
      * Set the width of the Template
-     * @param {number} width 
+     * @param {Number} width 
      * @returns {Template}
@@ -638,3 +638,3 @@ */
      * @param {HTMLElement} element 
-     * @param {string} clazz 
+     * @param {String} clazz 
      */
@@ -647,3 +647,3 @@ static addClass(element, clazz){
      * Add a class to the Template
-     * @param {string} clazz 
+     * @param {String} clazz 
      * @returns {Template}
@@ -659,3 +659,3 @@ */
      * @param {HTMLElement} element 
-     * @param {string} clazz 
+     * @param {String} clazz 
      * @returns {boolean}
@@ -669,3 +669,3 @@ */
      * Determine if the Template has a class
-     * @param {string} clazz 
+     * @param {String} clazz 
      * @returns {boolean}
@@ -680,3 +680,3 @@ */
      * @param {HTMLElement} element 
-     * @param {string} clazz 
+     * @param {String} clazz 
      */
@@ -689,3 +689,3 @@ static removeClass(element, clazz){
      * Remove a class from the Template
-     * @param {string} clazz 
+     * @param {String} clazz 
      * @returns {Template}
@@ -701,4 +701,4 @@ */
      * @param {HTMLElement} element 
-     * @param {string} oldClass - class to replace
-     * @param {string} newClass - class to add
+     * @param {String} oldClass - class to replace
+     * @param {String} newClass - class to add
      */
@@ -711,4 +711,4 @@ static replaceClass(element, oldClass, newClass){
      * Replace a class of the Template with another
-     * @param {string} oldClass - class to replace
-     * @param {string} newClass - class to add
+     * @param {String} oldClass - class to replace
+     * @param {String} newClass - class to add
      * @returns {Template}
@@ -726,3 +726,3 @@ */
      * @param {HTMLElement} element 
-     * @param {string} clazz 
+     * @param {String} clazz 
      * @param {boolean} [state]
@@ -738,3 +738,3 @@ */
      * class state to its opposite
-     * @param {string} clazz 
+     * @param {String} clazz 
      * @param {boolean} [state]
@@ -755,3 +755,3 @@ * @returns {Template}
      * @param {HTMLElement} element
-     * @returns {string} 
+     * @returns {String} 
      */
@@ -764,3 +764,3 @@ static getValue(element){
      * Get the value of the template
-     * @returns {string} 
+     * @returns {String} 
      */
@@ -774,3 +774,3 @@ getValue(){
      * @param {HTMLElement} element
-     * @param {string} 
+     * @param {String} 
      */
@@ -783,3 +783,3 @@ static setValue(element, value){
      * Set the value of the template
-     * @param {string} 
+     * @param {String} 
      * @returns {Template}
@@ -839,4 +839,4 @@ */
      * original data is required.
-     * @param {object} data 
-     * @returns {object}
+     * @param {Object} data 
+     * @returns {Object}
      */
@@ -849,4 +849,4 @@ cacheData(data){
      * Process data to be used for rendering.
-     * @param {object} data 
-     * @returns {object}
+     * @param {Object} data 
+     * @returns {Object}
      */
@@ -886,3 +886,3 @@ processRenderData(data){
      *                      child elements - to render. Otherwise, nothing happens.
-     * @param {object} data - the data to render with. This object should have 
+     * @param {Object} data - the data to render with. This object should have 
      *                      keys that would match [name] or [data-name] element attributes.
@@ -992,3 +992,3 @@ * @param {boolean} [isTemplate=false] - whether the htmlElement is a Template
      * Cache and process the render data.
-     * @param {object} data 
+     * @param {Object} data 
      * @returns {Template}
@@ -995,0 +995,0 @@ */

templates/feedback.js

@@ -10,6 +10,6 @@ /**
      * Constructor
-     * @param {object} [options={}] 
-     * @param {string} [options.elements.icon=".feedback-icon"]
-     * @param {string} [options.elements.text=".feedback-text"]
-     * @param {string} [options.elements.close=".feedback-close"]
+     * @param {Object} [options={}] 
+     * @param {String} [options.elements.icon=".feedback-icon"]
+     * @param {String} [options.elements.text=".feedback-text"]
+     * @param {String} [options.elements.close=".feedback-close"]
      */
@@ -52,5 +52,5 @@ constructor(options = {}){
      * text HTML.
-     * @param {string} name - attribute name
-     * @param {string} oldValue - old value
-     * @param {string} newValue - new value
+     * @param {String} name - attribute name
+     * @param {String} oldValue - old value
+     * @param {String} newValue - new value
      */
@@ -75,3 +75,3 @@ attributeChangedCallback(name, oldValue, newValue) {
      * Set the status attribute
-     * @param {string} status 
+     * @param {String} status 
      */
@@ -91,3 +91,3 @@ setStatus(status){
      * Set the class
-     * @param {string} clazz
+     * @param {String} clazz
      */
@@ -101,3 +101,3 @@ setClass(clazz){
      * Set the text 
-     * @param {string} text
+     * @param {String} text
      */
@@ -110,3 +110,3 @@ setText(text){
      * Set the icon 
-     * @param {string} text
+     * @param {String} text
      */
@@ -119,5 +119,5 @@ setIcon(icon){
      * Render the FeedbackTemplate
-     * @param {string} status 
-     * @param {string} text 
-     * @param {string} icon 
+     * @param {String} status 
+     * @param {String} text 
+     * @param {String} icon 
      */
@@ -132,3 +132,3 @@ render(status, text, icon){
      * Render an error feedback
-     * @param {string} message 
+     * @param {String} message 
      */
@@ -141,3 +141,3 @@ renderError(message){
      * Render an info feedback
-     * @param {string} message 
+     * @param {String} message 
      */
@@ -150,3 +150,3 @@ renderInfo(message){
      * Render a processing feedback
-     * @param {string} message 
+     * @param {String} message 
      */
@@ -159,3 +159,3 @@ renderProcessing(message){
      * Render a success feedback
-     * @param {string} message 
+     * @param {String} message 
      */
@@ -168,3 +168,3 @@ renderSuccess(message){
      * Render a warning feedback
-     * @param {string} message 
+     * @param {String} message 
      */
@@ -171,0 +171,0 @@ renderWarning(message){

templates/form.js

@@ -9,12 +9,12 @@ /**
      * Constructor
-     * @param {object} [options] 
+     * @param {Object} [options] 
      * @param {function} [options.getRequest]
      * @param {function} [options.submitRequest]
      * @param {function} [options.validateRequest]
-     * @param {number} [options.checkboxMode]
-     * @param {number} [options.serializeMode]
-     * @param {string[]} [options.excludedFields=["disabled"]]
-     * @param {object} [options.elements]
-     * @param {string} [options.elements.form="form"]
-     * @param {string} [options.elements.footer=".form-footer"]
+     * @param {Number} [options.checkboxMode]
+     * @param {Number} [options.serializeMode]
+     * @param {String[]} [options.excludedFields=["disabled"]]
+     * @param {Object} [options.elements]
+     * @param {String} [options.elements.form="form"]
+     * @param {String} [options.elements.footer=".form-footer"]
      */
@@ -66,2 +66,9 @@ constructor(options = {}){
     /**
+     * Reset the form
+     */
+    reset(){
+        this.elements.form.reset();
+    }
+
+    /**
      * Reload the form.
@@ -89,3 +96,3 @@ */
      * @param {HTMLElement} checkbox 
-     * @param {number} mode 
+     * @param {Number} mode 
      * @returns {boolean|string|number}
@@ -110,3 +117,3 @@ */
      * Determine if a field is not excluded
-     * @param {string} field 
+     * @param {String} field 
      * @returns {boolean}
@@ -128,3 +135,3 @@ */
      * Serialize the form 
-     * @returns {object}
+     * @returns {Object}
      */
@@ -150,3 +157,3 @@ serialize(){
      * @param {HTMLElement} input 
-     * @returns {object}
+     * @returns {Object}
      */
@@ -190,3 +197,3 @@ serializeInput(input){
      * @param {HTMLElement} input 
-     * @returns {object}
+     * @returns {Object}
      */
@@ -200,3 +207,3 @@ serializeTextarea(textarea){
      * @param {HTMLElement} input 
-     * @returns {object}
+     * @returns {Object}
      */
@@ -211,5 +218,5 @@ serializeSelect(select){
      * into a string or an object
-     * @param {object} data 
-     * @param {number} mode
-     * @returns {string|object}
+     * @param {Object} data 
+     * @param {Number} mode
+     * @returns {String|object}
      */
@@ -229,4 +236,4 @@ formatSerializedData(data, mode){
      * Serialize data into a string
-     * @param {object} data 
-     * @returns {string}
+     * @param {Object} data 
+     * @returns {String}
      */
@@ -233,0 +240,0 @@ serializedDataToString(data){

templates/pager.js

@@ -13,3 +13,3 @@ /**
      * Constructor
-     * @param {object} options 
+     * @param {Object} options 
      * @returns {PagerTemplate}
@@ -27,3 +27,3 @@ */
      * Render the pager.
-     * @param {number} pageCount 
+     * @param {Number} pageCount 
      * @returns {PagerTemplate}
@@ -40,3 +40,3 @@ */
      * Render the pager.
-     * @param {number} pageCount 
+     * @param {Number} pageCount 
      * @returns {PagerTemplate}
@@ -54,3 +54,3 @@ */
      * internal properties.
-     * @param {object} [data={}] 
+     * @param {Object} [data={}] 
      * @returns {PagerTemplate}
@@ -57,0 +57,0 @@ */

templates/popup.js

@@ -9,12 +9,12 @@ /**
      * Constructor
-     * @param {object} options 
+     * @param {Object} options 
      * @param {boolean} [options.showHeader=true]
      * @param {boolean} [options.showClose=true]
      * @param {boolean} [options.showFooter=true]
-     * @param {object} [options.elements]
-     * @param {string} [options.elements.header=".popup-header"]
-     * @param {string} [options.elements.title=".popup-title"]
-     * @param {string} [options.elements.close=".template-popupcloseBtn"]
-     * @param {string} [options.elements.body=".popup-body"]
-     * @param {string} [options.elements.footer=".popup-footer"]
+     * @param {Object} [options.elements]
+     * @param {String} [options.elements.header=".popup-header"]
+     * @param {String} [options.elements.title=".popup-title"]
+     * @param {String} [options.elements.close=".template-popupcloseBtn"]
+     * @param {String} [options.elements.body=".popup-body"]
+     * @param {String} [options.elements.footer=".popup-footer"]
      */
@@ -52,3 +52,3 @@ constructor(options = {}){
      * Apply options to the PopupTemplate
-     * @param {object} options 
+     * @param {Object} options 
      */
@@ -87,3 +87,3 @@ applyOptions(options){
      * Render the title
-     * @param {string} html 
+     * @param {String} html 
      */
@@ -96,3 +96,3 @@ renderTitle(html){
      * Render the body
-     * @param {string} html 
+     * @param {String} html 
      */
@@ -105,3 +105,3 @@ renderBody(html){
      * Render the footer
-     * @param {string} html 
+     * @param {String} html 
      */
@@ -108,0 +108,0 @@ renderFooter(html){

templates/status.js

@@ -11,3 +11,3 @@ /**
      * this is handled in attributeChangedCallback.
-     * @type {string[]}
+     * @type {String[]}
      */
@@ -18,3 +18,3 @@ static get observedAttributes() {['status', 'text']; }
      * Constructor
-     * @param {object} [options={}]
+     * @param {Object} [options={}]
      */
@@ -37,5 +37,5 @@ constructor(options){
      * text HTML.
-     * @param {string} name - attribute name
-     * @param {string} oldValue - old value
-     * @param {string} newValue - new value
+     * @param {String} name - attribute name
+     * @param {String} oldValue - old value
+     * @param {String} newValue - new value
      */
@@ -57,3 +57,3 @@ attributeChangedCallback(name, oldValue, newValue) {
      * Set the status
-     * @param {string} status 
+     * @param {String} status 
      */
@@ -73,3 +73,3 @@ setStatus(status){
      * Set the class
-     * @param {string} clazz 
+     * @param {String} clazz 
      */
@@ -83,3 +83,3 @@ setClass(clazz){
      * Set the text
-     * @param {string} text 
+     * @param {String} text 
      */
@@ -92,4 +92,4 @@ setText(text){
      * Render the StatusTemplate
-     * @param {string} status 
-     * @param {string} text 
+     * @param {String} status 
+     * @param {String} text 
      */
@@ -103,3 +103,3 @@ render(status, text){
      * Render the StatusTemplate with no status
-     * @param {string} text 
+     * @param {String} text 
      */
@@ -112,3 +112,3 @@ renderNone(text){
      * Render the StatusTemplate with error status
-     * @param {string} text 
+     * @param {String} text 
      */
@@ -121,3 +121,3 @@ renderError(text){
      * Render the StatusTemplate with success status
-     * @param {string} text 
+     * @param {String} text 
      */
@@ -130,3 +130,3 @@ renderSuccess(text){
      * Render the StatusTemplate with info status
-     * @param {string} text 
+     * @param {String} text 
      */
@@ -139,3 +139,3 @@ renderInfo(text){
      * Render the StatusTemplate with warning status
-     * @param {string} text 
+     * @param {String} text 
      */
@@ -142,0 +142,0 @@ renderWarning(text){

templates/table.js

@@ -10,17 +10,17 @@ /**
      * Constructor
-     * @param {object} [options={}] 
+     * @param {Object} [options={}] 
      * @param {boolean} [options.alwaysRebuild=false] - whether to always wipe
      * and then rebuild the table
-     * @param {object} [options.elements] - the table elements
-     * @param {string} [options.elements.table="table"] - the table element selector
-     * @param {string} [options.elements.thead="thead"] - the thead element selector
-     * @param {string} [options.elements.theadTr="theadTr"] - the thead row element selector
-     * @param {string} [options.elements.tbody="tbody"] - the thead element selector
-     * @param {string} [options.elements.tfoot="tfoot"] - the tfoot element selector
-     * @param {string} [options.elements.tr="tr"] - the tbody row element selector
-     * @param {object} [optinos.schema={}]
-     * @param {string} [options.schema.primaryKey="id"] - the table's primary key
-     * @param {string[]} [options.schema.columns=[]] - array of column names, required for a
+     * @param {Object} [options.elements] - the table elements
+     * @param {String} [options.elements.table="table"] - the table element selector
+     * @param {String} [options.elements.thead="thead"] - the thead element selector
+     * @param {String} [options.elements.theadTr="theadTr"] - the thead row element selector
+     * @param {String} [options.elements.tbody="tbody"] - the thead element selector
+     * @param {String} [options.elements.tfoot="tfoot"] - the tfoot element selector
+     * @param {String} [options.elements.tr="tr"] - the tbody row element selector
+     * @param {Object} [optinos.schema={}]
+     * @param {String} [options.schema.primaryKey="id"] - the table's primary key
+     * @param {String[]} [options.schema.columns=[]] - array of column names, required for a
      * table that is not defined first in HTML
-     * @param {string[]} [options.schema.columnTitles=[]] - array of column titles, optional if
+     * @param {String[]} [options.schema.columnTitles=[]] - array of column titles, optional if
      * you want the header to display a different title for each column instead of its name
@@ -55,3 +55,3 @@ */
      * who will take care of rendering the rows.
-     * @param {object} data 
+     * @param {Object} data 
      */
@@ -58,0 +58,0 @@ render(data){

templates/wizard.js

@@ -9,3 +9,3 @@ /**
      * Constructor
-     * @param {object} [options] 
+     * @param {Object} [options] 
      */
@@ -33,3 +33,3 @@ constructor(options = {}){
      * Determine if a tab index is valid.
-     * @param {number} index 
+     * @param {Number} index 
      * @returns {boolean} true if it is, false otherwise
@@ -43,3 +43,3 @@ */
      * Show or hide a tab by its index.
-     * @param {number} tabIndex - tab index
+     * @param {Number} tabIndex - tab index
      * @param {boolean} state - true to show, false to hide
@@ -65,3 +65,3 @@ */
      * Go to a tab based on its index.
-     * @param {number} tabIndex 
+     * @param {Number} tabIndex 
      */
@@ -68,0 +68,0 @@ goToTab(tabIndex){

No alert changes

Improved metrics

Total package byte prevSize

150085

1.74%

Number of package files

25

4.17%

Lines of code

3017

2.48%

No dependency changes