@voliware/template2 - npm Package Compare versions

Comparing version 1.4.2 to 1.4.3

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();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)}connectedCallback(){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){"number"==typeof t&&(t+="px"),e.style.height=t}setHeight(e){return Template.setHeight(this,e),this}static setWidth(e,t){"number"==typeof t&&(t+="px"),e.style.width=t}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);
+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&&(this.appendElement(r),r instanceof Template?r.render(t):Template.render(r,t),a&&this.elements.set(e,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)}connectedCallback(){this.options.displayBlock&&this.classList.add("template-block");let e=this.createHtml();""!==e&&this.setHtml(e)}createHtml(){return""}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){"number"==typeof t&&(t+="px"),e.style.height=t}setHeight(e){return Template.setHeight(this,e),this}static setWidth(e,t){"number"==typeof t&&(t+="px"),e.style.width=t}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()})}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 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)}connectedCallback(){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){"number"==typeof t&&(t+="px"),e.style.height=t}setHeight(e){return Template.setHeight(this,e),this}static setWidth(e,t){"number"==typeof t&&(t+="px"),e.style.width=t}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);
+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&&(this.appendElement(a),a instanceof Template?a.render(t):Template.render(a,t),n&&this.elements.set(e,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)}connectedCallback(){this.options.displayBlock&&this.classList.add("template-block");let e=this.createHtml();""!==e&&this.setHtml(e)}createHtml(){return""}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){"number"==typeof t&&(t+="px"),e.style.height=t}setHeight(e){return Template.setHeight(this,e),this}static setWidth(e,t){"number"==typeof t&&(t+="px"),e.style.width=t}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.4.2",
+  "version": "1.4.3",
   "description": "a tiny client-side library for rendering and generating HTML",
@@ -5,0 +5,0 @@ "main": "build.js",

src/js/elementManager.js

@@ -360,4 +360,6 @@ /**
         }
-        
+           
         if(element){
+            this.appendElement(element);  
+
             if(element instanceof Template){
@@ -372,5 +374,3 @@ element.render(data);
             }
-        }
-        
-        this.appendElement(element);             
+        }        
     }
@@ -377,0 +377,0 @@

src/js/template2.js

@@ -52,2 +52,4 @@ /**
      * Connected callback.
+     * Add the 'template-block' class if option is set to true.
+     * Create and set the innerHTML if createHtml() returns html.
      */
@@ -58,3 +60,15 @@ connectedCallback(){
         }
+        let html = this.createHtml();
+        if(html !== ""){
+            this.setHtml(html);
+        }
     }
+
+    /**
+     * Create the inner HTML for this template
+     * @returns {String}
+     */
+    createHtml(){
+        return "";
+    }
         
@@ -61,0 +75,0 @@ /**

templates/feedback.js

@@ -38,10 +38,2 @@ /**
     /**
-     * Set the innerHTML to the default layout
-     */
-    createHtml(){
-        this.innerHTML = `
-            `.trim();
-    }
-
-    /**
      * Callback for when an attribute is changed.
@@ -48,0 +40,0 @@ * If the "status" attribute is changed, update

No alert changes

Improved metrics

Total package byte prevSize

150764

0.21%

Lines of code

3033

0.2%

No dependency changes