@voliware/template2 - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

dist/template2-bundle.min.js

@@ -1,1 +0,1 @@
-class EventSystem{constructor(){this.events={}}generateRandomString(e){let t="",s=()=>{let e=Math.floor(62*Math.random());return e<10?e:e<36?String.fromCharCode(e+55):String.fromCharCode(e+61)};for(;t.length<e;)t+=s();return t}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 n=s[e];a[n]||(a[n]={}),e===s.length-1?(Array.isArray(a[n].handlers)||(a[n].handlers=[]),a[n].handlers.push(t)):a=a[n]}}one(e,t){let s=this,a=e+"."+this.generateRandomString(16);this.on(a,function(e){t(e),s.off(a)})}off(e,t=!0){let s=e.split("."),a=this.events;for(let e=0;e<s.length;e++){let n=s[e];e===s.length-1?t?delete a[n]:(delete a[n].handlers,0===Object.keys(a[n]).length&&delete a[n]):a=a[n]}}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])}}}}}"undefined"!=typeof module&&(module.exports=EventSystem),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){let t={};for(let s in e)if(e.hasOwnProperty(s))if("object"==typeof e[s]&&null!==e[s]){let a=Object.flatten(e[s]);for(let e in a)a.hasOwnProperty(e)&&(t[s+"."+e]=a[e])}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,n,i){return t[n]||(t[n]=isNaN(Number(a[i+1]))?a.length-1===i?e[s]:{}:[])},t)}return t},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 ElementManager extends EventSystem{constructor({wrapper:e=null,template:t=null,primary_key:s="id",max_elements:a=0,clone_template:n=!0,remove_template:i=!0,remove_dead_templates:r=!0}){super(),this.wrapper=e||document.createElement("div"),this.clone_template=n,this.remove_template=i,this.remove_dead_templates=r,this.primary_key=s,this.max_elements=a,this.template=this.clone_template?t.cloneNode(!0):t,this.template.removeAttribute("id"),this.template.classList.remove("template"),this.remove_template&&t.remove(),this.elements=new Map,this.cached_data=null,this.render_data=null}appendTo(e){Template.append(this.wrapper,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)}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}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}getData(e,t){switch(this.getDataType(e)){case"array":let s=e.filter(e=>e[this.primary_key]===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.cached_data=this.cacheData(e),this.render_data=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.remove_dead_templates&&this.removeDeadElements(e)}renderArray(e){for(let t=0;t<e.length;t++){let s=e[t][this.primary_key];if(void 0===s)return void console.error("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,n=this.elements.get(e);n||(a=!0,n=this.cloneTemplate()),n&&(this.appendElement(n),n instanceof Template?n.render(t):Template.render(n,t),a&&this.elements.set(e,n))}static dataArrayToDataObject(e,t="id"){let s={};for(let a=0;a<e.length;a++){let n=e[a][t];void 0===n?console.error(`dataArrayToDataObject: object does not have required "${t}" value`):s[n]=e[a]}return s}}class Template extends HTMLElement{constructor({elements:e={},render_attribute:t="data-name",display_block:s=!0}={}){super(),this.event_system=new EventSystem,this.native_events={},this.elements=e,this.cached_data=null,this.render_data={},this.is_first_Render=!0,this.render_attribute=t,this.display_block=s}connectedCallback(){if(!this.firstChild){let e=this.createHtml();"string"==typeof e&&(e=e.trim(),this.setHtml(e))}this.display_block&&this.classList.add("template-block"),this.findNamedElements(),this.findElements(this.elements),this.onConnected()}onConnected(){}createHtml(){return null}static addEventSystem(e){e.event_system=new EventSystem,e.native_events={}}static on(e,t,s){let a=t.split(".")[0];e.event_system||Template.addEventSystem(e),0===e.event_system.getHandlersCount(a)&&(e.native_events[a]=(t=>{e.event_system.emit(a,t)}),e.addEventListener(a,e.native_events[a])),e.event_system.on(t,s)}on(e,t){Template.on(this,e,t)}static one(e,t,s){let a=t.split(".")[0];e.event_system||Template.addEventSystem(e),0===e.event_system.getHandlersCount(a)&&(e.native_events[a]=(t=>{e.event_system.emit(a,t),e.removeEventListener(a,e.native_events[a])}),e.addEventListener(a,e.native_events[a])),e.event_system.one(t,s)}one(e,t){Template.one(this,e,t)}static off(e,t,s=!0){if(!(e.event_system instanceof EventSystem))return;let a=t.split(".")[0];e.event_system.off(t,s),0===e.event_system.getHandlersCount(a)&&e.removeEventListener(a,e.native_events[a])}off(e,t=!0){Template.off(this,e,t)}static emit(e,t,s){e.event_system instanceof EventSystem&&e.event_system.emit(t,s)}emit(e,t){Template.emit(this,e,t)}setAttributes(e){for(let t=0;t<e.length;t++){let s=e[t];this.setAttribute(s.name,s.value)}}static findElements(e,t){"object"!=typeof e.elements&&(e.elements={});for(let s in t)"string"==typeof t[s]&&(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 n=a[e].getAttribute("name");n||(n=a[e].getAttribute(t)),n&&(s[n]?(Array.isArray(s[n])||(s[n]=[s[n]]),s[n].push(a[e])):s[n]=a[e])}return s}findNamedElements(){let e=Template.findNamedElements(this,this.render_attribute);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.length?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.length?s[s.length-1]:null}selectLast(e){return Template.selectLast(e)}static append(e,t){t.appendChild(e)}append(e){Template.append(e,this)}appendTo(e){Template.append(this,e)}static prepend(e,t){t.firstChild&&t.insertBefore(e,t.firstChild)}prepend(e){Template.prepend(e,this)}prependTo(e){Template.prepend(this,e)}static empty(e){for(;this.element;)e.removeChild(e.firstChild)}empty(){Template.empty(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.previous_display=e.style.display),e.style.display="none"}hide(){Template.hide(this)}static show(e){e.style.display=e.previous_display||"block"}show(){Template.show(this)}static display(e,t){return void 0===t&&(t=!Template.isVisible(e)),t?Template.show(e):Template.hide(e)}display(e){Template.display(this,e)}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){Template.setHeight(this,e)}static setWidth(e,t){"number"==typeof t&&(t+="px"),e.style.width=t}setWidth(e){Template.setWidth(this,e)}static addClass(e,t){e.classList.add(t)}addClass(e){Template.addClass(this,e)}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){Template.removeClass(this,e)}static replaceClass(e,t,s){e.classList.replace(t,s)}replaceClass(e,t){Template.replaceClass(this,e,t)}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){Template.setValue(this,e)}static enable(e){e.disabled=!1}enable(){Template.enable(this)}static disable(e){e.disabled=!0}disable(){Template.disable(this)}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}static setHtml(e,t){e.innerHTML=t}setHtml(e){Template.setHtml(this,e)}static render(e,t,s=!1){let a=null;a=s?e.getElements():Template.findNamedElements(e);let n=Object.flatten(t);for(let t in n){let i=n[t],r=a[t];if(r||(s&&(e.findNamedElements(),r=a[t]),r))if(r.render)r.render(i);else{Array.isArray(r)||(r=[r]);for(let e=0;e<r.length;e++){let t=r[e];if("false"!==t.getAttribute("data-render"))if("INPUT"===t.tagName){let e=t.getAttribute("type");e?"checkbox"===e&&i?t.checked=!0:"radio"===e?t.getAttribute("value")===i&&(t.checked=!0):t.value=i:t.value=i}else"SELECT"===t.tagName?t.value=i:t.innerHTML=i}}}}render(e){this.cached_data=this.cacheData(e),this.render_data=this.processRenderData(Object.extend({},e)),Template.render(this,this.render_data,!0),this.is_first_Render=!1}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{constructor({elements:e={icon:".feedback-icon",text:".feedback-text",close:".feedback-close"}}={}){super({elements:e}),this.status=FeedbackTemplate.status.none}onConnected(){this.attachButtonHandlers()}createHtml(){return'<div class="feedback-icon"></div>\n                <div class="feedback-text"></div>\n                <button class="feedback-close">X</button>'}attachButtonHandlers(){this.elements.close.addEventListener("click",()=>{this.hide()})}setStatus(e){void 0!==FeedbackTemplate.bgclass[e]&&void 0!==FeedbackTemplate.icon[e]&&(this.setClass(FeedbackTemplate.bgclass[e]),this.setIcon(FeedbackTemplate.icon[e]))}clearStatusClass(){this.classList.remove(...FeedbackTemplate.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(FeedbackTemplate.status.error,e,FeedbackTemplate.icon[FeedbackTemplate.status.error])}renderInfo(e){this.render(FeedbackTemplate.status.info,e,FeedbackTemplate.icon[FeedbackTemplate.status.error])}renderProcessing(e){this.render(FeedbackTemplate.status.processing,e,FeedbackTemplate.icon[FeedbackTemplate.status.processing])}renderSuccess(e){this.render(FeedbackTemplate.status.success,e,FeedbackTemplate.icon[FeedbackTemplate.status.success])}renderWarning(e){this.render(FeedbackTemplate.status.warning,e,FeedbackTemplate.icon[FeedbackTemplate.status.warning])}}FeedbackTemplate.status={none:"none",error:"error",success:"success",processing:"processing",info:"info",warning:"warning"},FeedbackTemplate.bgclass={},FeedbackTemplate.bgclass[FeedbackTemplate.status.none]="status-bg-none",FeedbackTemplate.bgclass[FeedbackTemplate.status.error]="status-bg-error",FeedbackTemplate.bgclass[FeedbackTemplate.status.success]="status-bg-success",FeedbackTemplate.bgclass[FeedbackTemplate.status.processing]="status-bg-processing",FeedbackTemplate.bgclass[FeedbackTemplate.status.info]="status-bg-info",FeedbackTemplate.bgclass[FeedbackTemplate.status.warning]="status-bg-warning",FeedbackTemplate.status.bgclassArray=[FeedbackTemplate.bgclass.none,FeedbackTemplate.bgclass.error,FeedbackTemplate.bgclass.success,FeedbackTemplate.bgclass.processing,FeedbackTemplate.bgclass.info,FeedbackTemplate.bgclass.warning],FeedbackTemplate.icon={},FeedbackTemplate.icon[FeedbackTemplate.status.none]="",FeedbackTemplate.icon[FeedbackTemplate.status.error]="",FeedbackTemplate.icon[FeedbackTemplate.status.info]="",FeedbackTemplate.icon[FeedbackTemplate.status.processing]='<div class="spinner-container"><div class="spinner-wheel"></div></div>',FeedbackTemplate.icon[FeedbackTemplate.status.success]="",FeedbackTemplate.icon[FeedbackTemplate.status.warning]="",customElements.define("template-feedback",FeedbackTemplate);class FormTemplate extends Template{constructor({get_request:e=null,submit_request:t=null,validate_request:s=null,checkbox_mode:a=FormTemplate.checkbox_mode.number,serialize_mode:n=FormTemplate.serialize_mode.to_object,excluded_fields:i=["disabled"],elements:r={form:"form",header:".form-header",body:".form-body",footer:".form-footer",reset:'[type="reset"]',submit:'[type="submit"]'}}={}){super({elements:r}),this.get_request=e,this.submit_request=t,this.validate_request=s,this.checkbox_mode=a,this.serialize_mode=n,this.excluded_fields=i,this.serialized_data={},this.formatted_serialized_data=null}onConnected(){this.attachFormHandlers()}createHtml(){return'<form>\n                    <div class="form-header"></div>\n                    <div class="form-body"></div>\n                    <div class="form-footer">\n                        <button type="reset">Reset</button>\n                        <button type="submit">Submit</button>\n                    </div>\n                </form>'}attachFormHandlers(){this.elements.form.addEventListener("submit",e=>{e.preventDefault(),this.submit()}),this.elements.form.addEventListener("reset",e=>{e.preventDefault(),this.reload()})}displayFooter(e){Template.display(this.elements.footer,e)}setSubmitRequest(e){this.submit_request=e}setGetRequest(e){this.get_request=e}setValidateRequest(e){this.validate_request=e}reset(){this.elements.form.reset()}reload(){Object.isEmpty(this.cached_data)?this.reset():this.render(this.cached_data)}validate(){return!0}convertCheckbox(e,t){let s=e.checked;switch(t){case FormTemplate.checkbox_mode.boolean:return s;case FormTemplate.checkbox_mode.string:return s?"1":"0";case FormTemplate.checkbox_mode.on_off:return s?"on":"off";default:case FormTemplate.checkbox_mode.number:return s?1:0}}isNotExcluded(e){for(let t=0;t<this.excluded_fields.length;t++){if("disabled"===this.excluded_fields[t]&&e.hasAttribute("disabled"))return!1}return!0}serialize(){this.serialized_data={};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.serialized_data}serializeInput(e){let t=e.getAttribute("name"),s=null;switch(e.getAttribute("type")){case"checkbox":s=this.convertCheckbox(e,this.checkbox_mode);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.serialized_data[t]=s}serializeTextarea(e){return this.serializeSelect(e)}serializeSelect(e){let t=e.getAttribute("name");return this.serialized_data[t]=e.value}formatSerializedData(e,t){switch(t){case FormTemplate.serialize_mode.to_string:return this.serializedDataToString(e);default:case FormTemplate.serialize_mode.to_object:return this.serialized_data=Object.unflatten(this.serialized_data),this.serialized_data}}serializedDataToString(e){let t="",s=0,a=Object.keys(e).length;for(let n in e)t+=n+"="+e[n],s++<a-1&&(t+="&");return t}async submit(){this.serialized_data=this.serialize(),this.formatted_serialized_data=this.formatSerializedData(this.serialized_data,this.serialize_mode);try{let e=await this.submit_request(this.formatted_serialized_data);e.status&&200===e.status?this.emit("success",e.body):this.emit("fail",e.body)}catch(e){this.emit("error",e)}}}FormTemplate.checkbox_mode={boolean:0,number:1,string:2,on_off:3},FormTemplate.serialize_mode={to_string:0,to_ordered_string:1,to_object:2,to_value:3},customElements.define("template-form",FormTemplate);class PagerTemplate extends Template{constructor({elements:e={page:'[name="page"]',previous:'[name="previous"]',page_count:'[data-name="pageCount"]',next:'[name="next"]'}}={}){super({elements:e}),this.page=1,this.page_count=1}onConnected(){this.attachButtonHandlers()}createHtml(){return'<button name="previous" type="button">Previous</button>\n                    <div class="pager-input">\n                        <input name="page" type="number" class="pager-page">\n                        <span>/</span>\n                        <span data-name="pageCount"></span>\n                    </div>\n                <button name="next" type="button">Next</button>'}setPageCount(e){this.page_count=e,this.render()}setPage(e){this.page=e,this.render()}render(e={}){void 0===e.page_count&&(e.page_count=this.page_count),void 0===e.page&&(e.page=this.page),super.render(e),e.page_count<=1?(this.disableNextButton(),this.disablePreviousButton()):e.page===e.page_count?(this.disableNextButton(),this.enablePreviousButton()):1===e.page?(this.disablePreviousButton(),this.enableNextButton()):(this.enableNextButton(),this.enablePreviousButton())}displayNextButton(e){Template.display(this.elements.next,e)}displayPreviousButton(){Template.display(this.elements.previous,state)}enableNextButton(){Template.enable(this.elements.next)}disableNextButton(){Template.disable(this.elements.next)}enablePreviousButton(){Template.enable(this.elements.previous)}disablePreviousButton(){Template.disable(this.elements.previous)}attachButtonHandlers(){Template.on(this.elements.next,"click.pager",()=>{this.setPage(this.page+1),this.emit("next")}),Template.on(this.elements.previous,"click.pager",()=>{this.setPage(this.page-1),this.emit("previous")});let e=null;Template.on(this.elements.page,"input.pager",()=>{clearTimeout(e),e=setTimeout(()=>{let e=parseInt(this.elements.page.value);e&&e<=this.page_count&&(this.page=e,this.emit("page",this.page))},150)})}}customElements.define("template-pager",PagerTemplate);class PopupTemplate extends Template{constructor({display_block:e=!1,show_header:t=!0,show_close:s=!0,show_footer:a=!0,elements:n={header:".popup-header",title:".popup-title",close:".popup-close",body:".popup-body",footer:".popup-footer"}}={}){super({display_block:e,elements:n}),this.show_header=t,this.show_close=s,this.show_footer=a}onConnected(){this.applyOptions(),this.attachButtonHandlers()}createHtml(){return'<div class="popup-content">\n                    <div class="popup-header">\n                        <div class="popup-title"></div>\n                        <button type="button" class="btn-none popup-close">X</button>\n                    </div>\n                    <div class="popup-body"></div>\n                    <div class="popup-footer"></div>\n                </div>'}attachButtonHandlers(){this.elements.close.addEventListener("click",e=>{this.close()})}applyOptions(){!this.show_header&&this.elements.header&&this.elements.header.remove(),!this.show_close&&this.elements.close&&this.elements.close.remove(),!this.show_footer&&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{constructor(){super(...arguments),this.status=StatusTemplate.status.none}setStatus(e){void 0!==StatusTemplate.class[e]&&(this.status=e,this.setClass(StatusTemplate.class[e]))}clearStatusClass(){this.classList.remove(...StatusTemplate.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(StatusTemplate.status.none,e)}renderError(e){this.render(StatusTemplate.status.error,e)}renderSuccess(e){this.render(StatusTemplate.status.success,e)}renderInfo(e){this.render(StatusTemplate.status.info,e)}renderWarning(e){this.render(StatusTemplate.status.warning,e)}}StatusTemplate.status={none:"none",error:"error",success:"success",processing:"processing",info:"info",warning:"warning"},StatusTemplate.class={},StatusTemplate.class[StatusTemplate.status.none]="status-none",StatusTemplate.class[StatusTemplate.status.error]="status-error",StatusTemplate.class[StatusTemplate.status.success]="status-success",StatusTemplate.class[StatusTemplate.status.processing]="status-processing",StatusTemplate.class[StatusTemplate.status.info]="status-info",StatusTemplate.class[StatusTemplate.status.warning]="status-warning",StatusTemplate.classArray=[StatusTemplate.class.none,StatusTemplate.class.error,StatusTemplate.class.success,StatusTemplate.class.processing,StatusTemplate.class.info,StatusTemplate.class.warning],customElements.define("template-status",StatusTemplate);class TableTemplate extends Template{constructor({always_rebuild:e=!1,elements:t={table:"table",thead:"thead",thead_tr:"thead > tr",tbody:"tbody",tfoot:"tfoot",tr:"tbody > tr"},schema:s={primary_key:"id",columns:[],column_titles:[]}}={}){super({elements:t}),this.always_rebuild=e,this.schema={primary_key:s.primary_key,columns:s.columns,column_titles:s.column_titles},this.row_manager=null}onConnected(){this.row_manager=new ElementManager({wrapper:this.elements.tbody,template:this.elements.tr,primary_key:this.schema.primary_key}),this.elements.tr.remove()}createHtml(){return"<table>\n                    <thead>\n                        <tr></tr>\n                    </thead>\n                    <tbody>\n                        <tr></tr>\n                    </tbody>\n                </table>"}render(e){this.cached_data=this.cacheData(e),this.render_data=this.processRenderData(e),this.always_rebuild?this.empty():Array.isArray(this.render_data)&&void 0===this.render_data[0][this.primary_key]&&this.empty(),this.row_manager.render(this.render_data)}empty(){this.row_manager.empty()}}customElements.define("template-table",TableTemplate);class WizardTemplate extends FormTemplate{constructor({elements:e={navs:".wizard-navs",tabs:".wizard-tabs",pager:"template-pager"}}={}){super({elements:e}),this.tab_count=0,this.tab=0}onConnected(){this.tab_count=this.elements.tabs.children.length,this.elements.pager.setPage(1),this.elements.pager.setPageCount(this.tab_count),this.attachNavHandlers(),this.attachPagerHandlers(),this.goToFirstTab()}createHtml(){return'<div class="wizard-navs"></div>\n                <div class="wizard-form">\n                    <form>\n                        <div class="form-header"></div>\n                        <div class="form-body">\n                            <div class="wizard-tabs"></div>\n                        </div>\n                        <div class="form-footer">\n                            <button name="reset" type="reset">Reset</button>\n                            <button name="submit" type="submit">Submit</button>\n                        </div>\n                    </form>\n                </div>\n                <div class="wizard-pager">\n                    <template-pager></template-pager>\n                </div>'}isValidTabIndex(e){return e>-1&&e<this.tab_count}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.tab_count;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.tab_count-1)}goToNextTab(){this.tab<this.tab_count-1&&(this.tab++,this.goToTab(this.tab))}goToPreviousTab(){this.tab>0&&(this.tab--,this.goToTab(this.tab))}attachPagerHandlers(){this.elements.pager.on("next",()=>{this.goToNextTab()}),this.elements.pager.on("previous",()=>{this.goToPreviousTab()}),this.elements.pager.on("page",e=>{this.goToTab(e-1)})}attachNavHandlers(){for(let e=0;e<this.tab_count;e++){let t=this.elements.navs.children[e];Template.on(t,"click.wizard",()=>{this.goToTab(e)})}}renderPager(){this.elements.pager.setPage(this.tab+1),this.elements.pager.setPageCount(this.tab_count)}validateTab(e){this.isValidTabIndex(e)}}customElements.define("template-wizard",WizardTemplate);
+class EventSystem{constructor(){this.events={}}generateRandomString(e){let t="",s=()=>{let e=Math.floor(62*Math.random());return e<10?e:e<36?String.fromCharCode(e+55):String.fromCharCode(e+61)};for(;t.length<e;)t+=s();return t}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 n=s[e];a[n]||(a[n]={}),e===s.length-1?(Array.isArray(a[n].handlers)||(a[n].handlers=[]),a[n].handlers.push(t)):a=a[n]}}one(e,t){let s=this,a=e+"."+this.generateRandomString(16);this.on(a,function(e){t(e),s.off(a)})}off(e,t=!0){let s=e.split("."),a=this.events;for(let e=0;e<s.length;e++){let n=s[e];e===s.length-1?t?delete a[n]:(delete a[n].handlers,0===Object.keys(a[n]).length&&delete a[n]):a=a[n]}}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])}}}}}"undefined"!=typeof module&&(module.exports=EventSystem),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){let t={};for(let s in e)if(e.hasOwnProperty(s))if("object"==typeof e[s]&&null!==e[s]){let a=Object.flatten(e[s]);for(let e in a)a.hasOwnProperty(e)&&(t[s+"."+e]=a[e])}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,n,i){return t[n]||(t[n]=isNaN(Number(a[i+1]))?a.length-1===i?e[s]:{}:[])},t)}return t},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 ElementManager extends EventSystem{constructor({wrapper:e=null,template:t=null,primary_key:s="id",max_elements:a=0,clone_template:n=!0,remove_template:i=!0,remove_dead_templates:r=!0}){super(),this.wrapper=e||document.createElement("div"),this.clone_template=n,this.remove_template=i,this.remove_dead_templates=r,this.primary_key=s,this.max_elements=a,this.template=this.clone_template?t.cloneNode(!0):t,this.template.removeAttribute("id"),this.template.classList.remove("template"),this.remove_template&&t.remove(),this.elements=new Map,this.cached_data=null,this.render_data=null}appendTo(e){Template.append(this.wrapper,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)}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}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}getData(e,t){switch(this.getDataType(e)){case"array":let s=e.filter(e=>e[this.primary_key]===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.cached_data=this.cacheData(e),this.render_data=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.remove_dead_templates&&this.removeDeadElements(e)}renderArray(e){for(let t=0;t<e.length;t++){let s=e[t][this.primary_key];if(void 0===s)return void console.error("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,n=this.elements.get(e);n||(a=!0,n=this.cloneTemplate()),n&&(this.appendElement(n),n instanceof Template?n.render(t):Template.render(n,t),a&&this.elements.set(e,n))}static dataArrayToDataObject(e,t="id"){let s={};for(let a=0;a<e.length;a++){let n=e[a][t];void 0===n?console.error(`dataArrayToDataObject: object does not have required "${t}" value`):s[n]=e[a]}return s}}class Template extends HTMLElement{constructor({elements:e={},render_attribute:t="data-name",display_block:s=!0}={}){super(),this.event_system=new EventSystem,this.native_events={},this.elements=e,this.cached_data=null,this.render_data={},this.is_first_Render=!0,this.render_attribute=t,this.display_block=s}connectedCallback(){if(!this.firstChild){let e=this.createHtml();"string"==typeof e&&(e=e.trim(),this.setHtml(e))}this.display_block&&this.classList.add("template-block"),this.findNamedElements(),this.findElements(this.elements),this.onConnected()}onConnected(){}createHtml(){return null}static addEventSystem(e){e.event_system=new EventSystem,e.native_events={}}static on(e,t,s){let a=t.split(".")[0];e.event_system||Template.addEventSystem(e),0===e.event_system.getHandlersCount(a)&&(e.native_events[a]=(t=>{e.event_system.emit(a,t)}),e.addEventListener(a,e.native_events[a])),e.event_system.on(t,s)}on(e,t){Template.on(this,e,t)}static one(e,t,s){let a=t.split(".")[0];e.event_system||Template.addEventSystem(e),0===e.event_system.getHandlersCount(a)&&(e.native_events[a]=(t=>{e.event_system.emit(a,t),e.removeEventListener(a,e.native_events[a])}),e.addEventListener(a,e.native_events[a])),e.event_system.one(t,s)}one(e,t){Template.one(this,e,t)}static off(e,t,s=!0){if(!(e.event_system instanceof EventSystem))return;let a=t.split(".")[0];e.event_system.off(t,s),0===e.event_system.getHandlersCount(a)&&e.removeEventListener(a,e.native_events[a])}off(e,t=!0){Template.off(this,e,t)}static emit(e,t,s){e.event_system instanceof EventSystem&&e.event_system.emit(t,s)}emit(e,t){Template.emit(this,e,t)}setAttributes(e){for(let t=0;t<e.length;t++){let s=e[t];this.setAttribute(s.name,s.value)}}static findElements(e,t){"object"!=typeof e.elements&&(e.elements={});for(let s in t)"string"==typeof t[s]&&(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 n=a[e].getAttribute("name");n||(n=a[e].getAttribute(t)),n&&(s[n]?(Array.isArray(s[n])||(s[n]=[s[n]]),s[n].push(a[e])):s[n]=a[e])}return s}findNamedElements(){let e=Template.findNamedElements(this,this.render_attribute);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.length?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.length?s[s.length-1]:null}selectLast(e){return Template.selectLast(e)}static append(e,t){t.appendChild(e)}append(e){Template.append(e,this)}appendTo(e){Template.append(this,e)}static prepend(e,t){t.firstChild&&t.insertBefore(e,t.firstChild)}prepend(e){Template.prepend(e,this)}prependTo(e){Template.prepend(this,e)}static empty(e){for(;this.element;)e.removeChild(e.firstChild)}empty(){Template.empty(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.previous_display=e.style.display),e.style.display="none"}hide(){Template.hide(this)}static show(e){e.style.display=e.previous_display||"block"}show(){Template.show(this)}static display(e,t){return void 0===t&&(t=!Template.isVisible(e)),t?Template.show(e):Template.hide(e)}display(e){Template.display(this,e)}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){Template.setHeight(this,e)}static setWidth(e,t){"number"==typeof t&&(t+="px"),e.style.width=t}setWidth(e){Template.setWidth(this,e)}static setTop(e,t){"number"==typeof t&&(t+="px"),e.style.top=t}setTop(e){Template.setTop(this,e)}static setRight(e,t){"number"==typeof t&&(t+="px"),e.style.right=t}setRight(e){Template.setRight(this,e)}static setBottom(e,t){"number"==typeof t&&(t+="px"),e.style.bottom=t}setBottom(e){Template.setBottom(this,e)}static setLeft(e,t){"number"==typeof t&&(t+="px"),e.style.left=t}setLeft(e){Template.setLeft(this,e)}static setPosition(e,{top:t,left:s,bottom:a,right:n}){void 0!==t&&Template.setTop(e,t),void 0!==s&&Template.setTop(e,s),void 0!==a&&Template.setTop(e,a),void 0!==n&&Template.setTop(e,n)}setPosition({top:e,left:t,bottom:s,right:a}){Template.setPosition(this,{top:e,left:t,bottom:s,right:a})}static addClass(e,t){e.classList.add(t)}addClass(e){Template.addClass(this,e)}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){Template.removeClass(this,e)}static replaceClass(e,t,s){e.classList.replace(t,s)}replaceClass(e,t){Template.replaceClass(this,e,t)}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){Template.setValue(this,e)}static enable(e){e.disabled=!1}enable(){Template.enable(this)}static disable(e){e.disabled=!0}disable(){Template.disable(this)}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}static setHtml(e,t){e.innerHTML=t}setHtml(e){Template.setHtml(this,e)}static render(e,t,s=!1){let a=null;a=s?e.getElements():Template.findNamedElements(e);let n=Object.flatten(t);for(let t in n){let i=n[t],r=a[t];if(r||(s&&(e.findNamedElements(),r=a[t]),r))if(r.render)r.render(i);else{Array.isArray(r)||(r=[r]);for(let e=0;e<r.length;e++){let t=r[e];if("false"!==t.getAttribute("data-render"))if("INPUT"===t.tagName){let e=t.getAttribute("type");e?"checkbox"===e&&i?t.checked=!0:"radio"===e?t.getAttribute("value")===i&&(t.checked=!0):t.value=i:t.value=i}else"SELECT"===t.tagName?t.value=i:t.innerHTML=i}}}}render(e){this.cached_data=this.cacheData(e),this.render_data=this.processRenderData(Object.extend({},e)),Template.render(this,this.render_data,!0),this.is_first_Render=!1}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{constructor({elements:e={icon:".feedback-icon",text:".feedback-text",close:".feedback-close"}}={}){super({elements:e}),this.status=FeedbackTemplate.status.none}onConnected(){this.attachButtonHandlers()}createHtml(){return'<div class="feedback-icon"></div>\n                <div class="feedback-text"></div>\n                <button class="feedback-close">X</button>'}attachButtonHandlers(){this.elements.close.addEventListener("click",()=>{this.hide()})}setStatus(e){void 0!==FeedbackTemplate.bgclass[e]&&void 0!==FeedbackTemplate.icon[e]&&(this.setClass(FeedbackTemplate.bgclass[e]),this.setIcon(FeedbackTemplate.icon[e]))}clearStatusClass(){this.classList.remove(...FeedbackTemplate.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(FeedbackTemplate.status.error,e,FeedbackTemplate.icon[FeedbackTemplate.status.error])}renderInfo(e){this.render(FeedbackTemplate.status.info,e,FeedbackTemplate.icon[FeedbackTemplate.status.error])}renderProcessing(e){this.render(FeedbackTemplate.status.processing,e,FeedbackTemplate.icon[FeedbackTemplate.status.processing])}renderSuccess(e){this.render(FeedbackTemplate.status.success,e,FeedbackTemplate.icon[FeedbackTemplate.status.success])}renderWarning(e){this.render(FeedbackTemplate.status.warning,e,FeedbackTemplate.icon[FeedbackTemplate.status.warning])}}FeedbackTemplate.status={none:"none",error:"error",success:"success",processing:"processing",info:"info",warning:"warning"},FeedbackTemplate.bgclass={},FeedbackTemplate.bgclass[FeedbackTemplate.status.none]="status-bg-none",FeedbackTemplate.bgclass[FeedbackTemplate.status.error]="status-bg-error",FeedbackTemplate.bgclass[FeedbackTemplate.status.success]="status-bg-success",FeedbackTemplate.bgclass[FeedbackTemplate.status.processing]="status-bg-processing",FeedbackTemplate.bgclass[FeedbackTemplate.status.info]="status-bg-info",FeedbackTemplate.bgclass[FeedbackTemplate.status.warning]="status-bg-warning",FeedbackTemplate.status.bgclassArray=[FeedbackTemplate.bgclass.none,FeedbackTemplate.bgclass.error,FeedbackTemplate.bgclass.success,FeedbackTemplate.bgclass.processing,FeedbackTemplate.bgclass.info,FeedbackTemplate.bgclass.warning],FeedbackTemplate.icon={},FeedbackTemplate.icon[FeedbackTemplate.status.none]="",FeedbackTemplate.icon[FeedbackTemplate.status.error]="",FeedbackTemplate.icon[FeedbackTemplate.status.info]="",FeedbackTemplate.icon[FeedbackTemplate.status.processing]='<div class="spinner-container"><div class="spinner-wheel"></div></div>',FeedbackTemplate.icon[FeedbackTemplate.status.success]="",FeedbackTemplate.icon[FeedbackTemplate.status.warning]="",customElements.define("template-feedback",FeedbackTemplate);class FormTemplate extends Template{constructor({get_request:e=null,submit_request:t=null,validate_request:s=null,checkbox_mode:a=FormTemplate.checkbox_mode.number,serialize_mode:n=FormTemplate.serialize_mode.to_object,excluded_fields:i=["disabled"],elements:r={form:"form",header:".form-header",body:".form-body",footer:".form-footer",reset:'[type="reset"]',submit:'[type="submit"]'}}={}){super({elements:r}),this.get_request=e,this.submit_request=t,this.validate_request=s,this.checkbox_mode=a,this.serialize_mode=n,this.excluded_fields=i,this.serialized_data={},this.formatted_serialized_data=null}onConnected(){this.attachFormHandlers()}createHtml(){return'<form>\n                    <div class="form-header"></div>\n                    <div class="form-body"></div>\n                    <div class="form-footer">\n                        <button type="reset">Reset</button>\n                        <button type="submit">Submit</button>\n                    </div>\n                </form>'}attachFormHandlers(){this.elements.form.addEventListener("submit",e=>{e.preventDefault(),this.submit()}),this.elements.form.addEventListener("reset",e=>{e.preventDefault(),this.reload()})}displayFooter(e){Template.display(this.elements.footer,e)}setSubmitRequest(e){this.submit_request=e}setGetRequest(e){this.get_request=e}setValidateRequest(e){this.validate_request=e}reset(){this.elements.form.reset()}reload(){Object.isEmpty(this.cached_data)?this.reset():this.render(this.cached_data)}validate(){return!0}convertCheckbox(e,t){let s=e.checked;switch(t){case FormTemplate.checkbox_mode.boolean:return s;case FormTemplate.checkbox_mode.string:return s?"1":"0";case FormTemplate.checkbox_mode.on_off:return s?"on":"off";default:case FormTemplate.checkbox_mode.number:return s?1:0}}isNotExcluded(e){for(let t=0;t<this.excluded_fields.length;t++){if("disabled"===this.excluded_fields[t]&&e.hasAttribute("disabled"))return!1}return!0}serialize(){this.serialized_data={};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.serialized_data}serializeInput(e){let t=e.getAttribute("name"),s=null;switch(e.getAttribute("type")){case"checkbox":s=this.convertCheckbox(e,this.checkbox_mode);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.serialized_data[t]=s}serializeTextarea(e){return this.serializeSelect(e)}serializeSelect(e){let t=e.getAttribute("name");return this.serialized_data[t]=e.value}formatSerializedData(e,t){switch(t){case FormTemplate.serialize_mode.to_string:return this.serializedDataToString(e);default:case FormTemplate.serialize_mode.to_object:return this.serialized_data=Object.unflatten(this.serialized_data),this.serialized_data}}serializedDataToString(e){let t="",s=0,a=Object.keys(e).length;for(let n in e)t+=n+"="+e[n],s++<a-1&&(t+="&");return t}async submit(){this.serialized_data=this.serialize(),this.formatted_serialized_data=this.formatSerializedData(this.serialized_data,this.serialize_mode);try{let e=await this.submit_request(this.formatted_serialized_data);e.status&&200===e.status?this.emit("success",e.body):this.emit("fail",e.body)}catch(e){this.emit("error",e)}}}FormTemplate.checkbox_mode={boolean:0,number:1,string:2,on_off:3},FormTemplate.serialize_mode={to_string:0,to_ordered_string:1,to_object:2,to_value:3},customElements.define("template-form",FormTemplate);class PagerTemplate extends Template{constructor({elements:e={page:'[name="page"]',previous:'[name="previous"]',page_count:'[data-name="pageCount"]',next:'[name="next"]'}}={}){super({elements:e}),this.page=1,this.page_count=1}onConnected(){this.attachButtonHandlers()}createHtml(){return'<button name="previous" type="button">Previous</button>\n                    <div class="pager-input">\n                        <input name="page" type="number" class="pager-page">\n                        <span>/</span>\n                        <span data-name="pageCount"></span>\n                    </div>\n                <button name="next" type="button">Next</button>'}setPageCount(e){this.page_count=e,this.render()}setPage(e){this.page=e,this.render()}render(e={}){void 0===e.page_count&&(e.page_count=this.page_count),void 0===e.page&&(e.page=this.page),super.render(e),e.page_count<=1?(this.disableNextButton(),this.disablePreviousButton()):e.page===e.page_count?(this.disableNextButton(),this.enablePreviousButton()):1===e.page?(this.disablePreviousButton(),this.enableNextButton()):(this.enableNextButton(),this.enablePreviousButton())}displayNextButton(e){Template.display(this.elements.next,e)}displayPreviousButton(){Template.display(this.elements.previous,state)}enableNextButton(){Template.enable(this.elements.next)}disableNextButton(){Template.disable(this.elements.next)}enablePreviousButton(){Template.enable(this.elements.previous)}disablePreviousButton(){Template.disable(this.elements.previous)}attachButtonHandlers(){Template.on(this.elements.next,"click.pager",()=>{this.setPage(this.page+1),this.emit("next")}),Template.on(this.elements.previous,"click.pager",()=>{this.setPage(this.page-1),this.emit("previous")});let e=null;Template.on(this.elements.page,"input.pager",()=>{clearTimeout(e),e=setTimeout(()=>{let e=parseInt(this.elements.page.value);e&&e<=this.page_count&&(this.page=e,this.emit("page",this.page))},150)})}}customElements.define("template-pager",PagerTemplate);class PopupTemplate extends Template{constructor({display_block:e=!1,show_header:t=!0,show_close:s=!0,show_footer:a=!0,elements:n={header:".popup-header",title:".popup-title",close:".popup-close",body:".popup-body",footer:".popup-footer"}}={}){super({display_block:e,elements:n}),this.show_header=t,this.show_close=s,this.show_footer=a}onConnected(){this.applyOptions(),this.attachButtonHandlers()}createHtml(){return'<div class="popup-content">\n                    <div class="popup-header">\n                        <div class="popup-title"></div>\n                        <button type="button" class="btn-none popup-close">X</button>\n                    </div>\n                    <div class="popup-body"></div>\n                    <div class="popup-footer"></div>\n                </div>'}attachButtonHandlers(){this.elements.close.addEventListener("click",e=>{this.close()})}applyOptions(){!this.show_header&&this.elements.header&&this.elements.header.remove(),!this.show_close&&this.elements.close&&this.elements.close.remove(),!this.show_footer&&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{constructor(){super(...arguments),this.status=StatusTemplate.status.none}setStatus(e){void 0!==StatusTemplate.class[e]&&(this.status=e,this.setClass(StatusTemplate.class[e]))}clearStatusClass(){this.classList.remove(...StatusTemplate.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(StatusTemplate.status.none,e)}renderError(e){this.render(StatusTemplate.status.error,e)}renderSuccess(e){this.render(StatusTemplate.status.success,e)}renderInfo(e){this.render(StatusTemplate.status.info,e)}renderWarning(e){this.render(StatusTemplate.status.warning,e)}}StatusTemplate.status={none:"none",error:"error",success:"success",processing:"processing",info:"info",warning:"warning"},StatusTemplate.class={},StatusTemplate.class[StatusTemplate.status.none]="status-none",StatusTemplate.class[StatusTemplate.status.error]="status-error",StatusTemplate.class[StatusTemplate.status.success]="status-success",StatusTemplate.class[StatusTemplate.status.processing]="status-processing",StatusTemplate.class[StatusTemplate.status.info]="status-info",StatusTemplate.class[StatusTemplate.status.warning]="status-warning",StatusTemplate.classArray=[StatusTemplate.class.none,StatusTemplate.class.error,StatusTemplate.class.success,StatusTemplate.class.processing,StatusTemplate.class.info,StatusTemplate.class.warning],customElements.define("template-status",StatusTemplate);class TableTemplate extends Template{constructor({always_rebuild:e=!1,elements:t={table:"table",thead:"thead",thead_tr:"thead > tr",tbody:"tbody",tfoot:"tfoot",tr:"tbody > tr"},schema:s={primary_key:"id",columns:[],column_titles:[]}}={}){super({elements:t}),this.always_rebuild=e,this.schema={primary_key:s.primary_key,columns:s.columns,column_titles:s.column_titles},this.row_manager=null}onConnected(){this.row_manager=new ElementManager({wrapper:this.elements.tbody,template:this.elements.tr,primary_key:this.schema.primary_key}),this.elements.tr.remove()}createHtml(){return"<table>\n                    <thead>\n                        <tr></tr>\n                    </thead>\n                    <tbody>\n                        <tr></tr>\n                    </tbody>\n                </table>"}render(e){this.cached_data=this.cacheData(e),this.render_data=this.processRenderData(e),this.always_rebuild?this.empty():Array.isArray(this.render_data)&&void 0===this.render_data[0][this.primary_key]&&this.empty(),this.row_manager.render(this.render_data)}empty(){this.row_manager.empty()}}customElements.define("template-table",TableTemplate);class WizardTemplate extends FormTemplate{constructor({elements:e={navs:".wizard-navs",tabs:".wizard-tabs",pager:"template-pager"}}={}){super({elements:e}),this.tab_count=0,this.tab=0}onConnected(){this.tab_count=this.elements.tabs.children.length,this.elements.pager.setPage(1),this.elements.pager.setPageCount(this.tab_count),this.attachNavHandlers(),this.attachPagerHandlers(),this.goToFirstTab()}createHtml(){return'<div class="wizard-navs"></div>\n                <div class="wizard-form">\n                    <form>\n                        <div class="form-header"></div>\n                        <div class="form-body">\n                            <div class="wizard-tabs"></div>\n                        </div>\n                        <div class="form-footer">\n                            <button name="reset" type="reset">Reset</button>\n                            <button name="submit" type="submit">Submit</button>\n                        </div>\n                    </form>\n                </div>\n                <div class="wizard-pager">\n                    <template-pager></template-pager>\n                </div>'}isValidTabIndex(e){return e>-1&&e<this.tab_count}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.tab_count;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.tab_count-1)}goToNextTab(){this.tab<this.tab_count-1&&(this.tab++,this.goToTab(this.tab))}goToPreviousTab(){this.tab>0&&(this.tab--,this.goToTab(this.tab))}attachPagerHandlers(){this.elements.pager.on("next",()=>{this.goToNextTab()}),this.elements.pager.on("previous",()=>{this.goToPreviousTab()}),this.elements.pager.on("page",e=>{this.goToTab(e-1)})}attachNavHandlers(){for(let e=0;e<this.tab_count;e++){let t=this.elements.navs.children[e];Template.on(t,"click.wizard",()=>{this.goToTab(e)})}}renderPager(){this.elements.pager.setPage(this.tab+1),this.elements.pager.setPageCount(this.tab_count)}validateTab(e){this.isValidTabIndex(e)}}customElements.define("template-wizard",WizardTemplate);

dist/template2.min.js

@@ -1,1 +0,1 @@
-class EventSystem{constructor(){this.events={}}generateRandomString(e){let t="",s=()=>{let e=Math.floor(62*Math.random());return e<10?e:e<36?String.fromCharCode(e+55):String.fromCharCode(e+61)};for(;t.length<e;)t+=s();return t}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 l=s[e];n[l]||(n[l]={}),e===s.length-1?(Array.isArray(n[l].handlers)||(n[l].handlers=[]),n[l].handlers.push(t)):n=n[l]}}one(e,t){let s=this,n=e+"."+this.generateRandomString(16);this.on(n,function(e){t(e),s.off(n)})}off(e,t=!0){let s=e.split("."),n=this.events;for(let e=0;e<s.length;e++){let l=s[e];e===s.length-1?t?delete n[l]:(delete n[l].handlers,0===Object.keys(n[l]).length&&delete n[l]):n=n[l]}}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])}}}}}"undefined"!=typeof module&&(module.exports=EventSystem),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){let t={};for(let s in e)if(e.hasOwnProperty(s))if("object"==typeof e[s]&&null!==e[s]){let n=Object.flatten(e[s]);for(let e in n)n.hasOwnProperty(e)&&(t[s+"."+e]=n[e])}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,l,a){return t[l]||(t[l]=isNaN(Number(n[a+1]))?n.length-1===a?e[s]:{}:[])},t)}return t},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 ElementManager extends EventSystem{constructor({wrapper:e=null,template:t=null,primary_key:s="id",max_elements:n=0,clone_template:l=!0,remove_template:a=!0,remove_dead_templates:r=!0}){super(),this.wrapper=e||document.createElement("div"),this.clone_template=l,this.remove_template=a,this.remove_dead_templates=r,this.primary_key=s,this.max_elements=n,this.template=this.clone_template?t.cloneNode(!0):t,this.template.removeAttribute("id"),this.template.classList.remove("template"),this.remove_template&&t.remove(),this.elements=new Map,this.cached_data=null,this.render_data=null}appendTo(e){Template.append(this.wrapper,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)}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}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}getData(e,t){switch(this.getDataType(e)){case"array":let s=e.filter(e=>e[this.primary_key]===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.cached_data=this.cacheData(e),this.render_data=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.remove_dead_templates&&this.removeDeadElements(e)}renderArray(e){for(let t=0;t<e.length;t++){let s=e[t][this.primary_key];if(void 0===s)return void console.error("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,l=this.elements.get(e);l||(n=!0,l=this.cloneTemplate()),l&&(this.appendElement(l),l instanceof Template?l.render(t):Template.render(l,t),n&&this.elements.set(e,l))}static dataArrayToDataObject(e,t="id"){let s={};for(let n=0;n<e.length;n++){let l=e[n][t];void 0===l?console.error(`dataArrayToDataObject: object does not have required "${t}" value`):s[l]=e[n]}return s}}class Template extends HTMLElement{constructor({elements:e={},render_attribute:t="data-name",display_block:s=!0}={}){super(),this.event_system=new EventSystem,this.native_events={},this.elements=e,this.cached_data=null,this.render_data={},this.is_first_Render=!0,this.render_attribute=t,this.display_block=s}connectedCallback(){if(!this.firstChild){let e=this.createHtml();"string"==typeof e&&(e=e.trim(),this.setHtml(e))}this.display_block&&this.classList.add("template-block"),this.findNamedElements(),this.findElements(this.elements),this.onConnected()}onConnected(){}createHtml(){return null}static addEventSystem(e){e.event_system=new EventSystem,e.native_events={}}static on(e,t,s){let n=t.split(".")[0];e.event_system||Template.addEventSystem(e),0===e.event_system.getHandlersCount(n)&&(e.native_events[n]=(t=>{e.event_system.emit(n,t)}),e.addEventListener(n,e.native_events[n])),e.event_system.on(t,s)}on(e,t){Template.on(this,e,t)}static one(e,t,s){let n=t.split(".")[0];e.event_system||Template.addEventSystem(e),0===e.event_system.getHandlersCount(n)&&(e.native_events[n]=(t=>{e.event_system.emit(n,t),e.removeEventListener(n,e.native_events[n])}),e.addEventListener(n,e.native_events[n])),e.event_system.one(t,s)}one(e,t){Template.one(this,e,t)}static off(e,t,s=!0){if(!(e.event_system instanceof EventSystem))return;let n=t.split(".")[0];e.event_system.off(t,s),0===e.event_system.getHandlersCount(n)&&e.removeEventListener(n,e.native_events[n])}off(e,t=!0){Template.off(this,e,t)}static emit(e,t,s){e.event_system instanceof EventSystem&&e.event_system.emit(t,s)}emit(e,t){Template.emit(this,e,t)}setAttributes(e){for(let t=0;t<e.length;t++){let s=e[t];this.setAttribute(s.name,s.value)}}static findElements(e,t){"object"!=typeof e.elements&&(e.elements={});for(let s in t)"string"==typeof t[s]&&(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 l=n[e].getAttribute("name");l||(l=n[e].getAttribute(t)),l&&(s[l]?(Array.isArray(s[l])||(s[l]=[s[l]]),s[l].push(n[e])):s[l]=n[e])}return s}findNamedElements(){let e=Template.findNamedElements(this,this.render_attribute);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.length?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.length?s[s.length-1]:null}selectLast(e){return Template.selectLast(e)}static append(e,t){t.appendChild(e)}append(e){Template.append(e,this)}appendTo(e){Template.append(this,e)}static prepend(e,t){t.firstChild&&t.insertBefore(e,t.firstChild)}prepend(e){Template.prepend(e,this)}prependTo(e){Template.prepend(this,e)}static empty(e){for(;this.element;)e.removeChild(e.firstChild)}empty(){Template.empty(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.previous_display=e.style.display),e.style.display="none"}hide(){Template.hide(this)}static show(e){e.style.display=e.previous_display||"block"}show(){Template.show(this)}static display(e,t){return void 0===t&&(t=!Template.isVisible(e)),t?Template.show(e):Template.hide(e)}display(e){Template.display(this,e)}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){Template.setHeight(this,e)}static setWidth(e,t){"number"==typeof t&&(t+="px"),e.style.width=t}setWidth(e){Template.setWidth(this,e)}static addClass(e,t){e.classList.add(t)}addClass(e){Template.addClass(this,e)}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){Template.removeClass(this,e)}static replaceClass(e,t,s){e.classList.replace(t,s)}replaceClass(e,t){Template.replaceClass(this,e,t)}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){Template.setValue(this,e)}static enable(e){e.disabled=!1}enable(){Template.enable(this)}static disable(e){e.disabled=!0}disable(){Template.disable(this)}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}static setHtml(e,t){e.innerHTML=t}setHtml(e){Template.setHtml(this,e)}static render(e,t,s=!1){let n=null;n=s?e.getElements():Template.findNamedElements(e);let l=Object.flatten(t);for(let t in l){let a=l[t],r=n[t];if(r||(s&&(e.findNamedElements(),r=n[t]),r))if(r.render)r.render(a);else{Array.isArray(r)||(r=[r]);for(let e=0;e<r.length;e++){let t=r[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){this.cached_data=this.cacheData(e),this.render_data=this.processRenderData(Object.extend({},e)),Template.render(this,this.render_data,!0),this.is_first_Render=!1}static clone(e){let t=e.cloneNode();return t.innerHTML=e.innerHTML,t}clone(){return Template.clone(this)}}customElements.define("template-element",Template);
+class EventSystem{constructor(){this.events={}}generateRandomString(e){let t="",s=()=>{let e=Math.floor(62*Math.random());return e<10?e:e<36?String.fromCharCode(e+55):String.fromCharCode(e+61)};for(;t.length<e;)t+=s();return t}getHandlersCount(e){let t=this.events[e];if(!t)return 0;let s=0,l=[];for(l.push(t);l.length>0;){let e=l.pop();for(let t in e)"handlers"===t?s+=e[t].length:"object"==typeof e[t]&&l.push(e[t])}return s}on(e,t){let s=e.split("."),l=this.events;for(let e=0;e<s.length;e++){let n=s[e];l[n]||(l[n]={}),e===s.length-1?(Array.isArray(l[n].handlers)||(l[n].handlers=[]),l[n].handlers.push(t)):l=l[n]}}one(e,t){let s=this,l=e+"."+this.generateRandomString(16);this.on(l,function(e){t(e),s.off(l)})}off(e,t=!0){let s=e.split("."),l=this.events;for(let e=0;e<s.length;e++){let n=s[e];e===s.length-1?t?delete l[n]:(delete l[n].handlers,0===Object.keys(l[n]).length&&delete l[n]):l=l[n]}}emit(e,t){let s=e.split("."),l=this.events;for(let e=0;e<s.length;e++){if(!(l=l[s[e]]))return this;if(e===s.length-1){let e=[];for(e.push(l);e.length;){let s=e.pop();for(let l in s)if("handlers"===l)for(let e=0;e<s[l].length;e++)s[l][e](t);else e.push(s[l])}}}}}"undefined"!=typeof module&&(module.exports=EventSystem),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 l=s[t];if(void 0===l)continue;"object"==typeof e[t]&&"object"==typeof l&&e[t]!==l?Object.extend(e[t],l):e[t]=l}}return e},Object.flatten=function(e){let t={};for(let s in e)if(e.hasOwnProperty(s))if("object"==typeof e[s]&&null!==e[s]){let l=Object.flatten(e[s]);for(let e in l)l.hasOwnProperty(e)&&(t[s+"."+e]=l[e])}else t[s]=e[s];return t},Object.unflatten=function(e){let t={};for(let s in e){let l=s.split(".");l.reduce(function(t,n,a){return t[n]||(t[n]=isNaN(Number(l[a+1]))?l.length-1===a?e[s]:{}:[])},t)}return t},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 ElementManager extends EventSystem{constructor({wrapper:e=null,template:t=null,primary_key:s="id",max_elements:l=0,clone_template:n=!0,remove_template:a=!0,remove_dead_templates:r=!0}){super(),this.wrapper=e||document.createElement("div"),this.clone_template=n,this.remove_template=a,this.remove_dead_templates=r,this.primary_key=s,this.max_elements=l,this.template=this.clone_template?t.cloneNode(!0):t,this.template.removeAttribute("id"),this.template.classList.remove("template"),this.remove_template&&t.remove(),this.elements=new Map,this.cached_data=null,this.render_data=null}appendTo(e){Template.append(this.wrapper,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)}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}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}getData(e,t){switch(this.getDataType(e)){case"array":let s=e.filter(e=>e[this.primary_key]===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.cached_data=this.cacheData(e),this.render_data=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.remove_dead_templates&&this.removeDeadElements(e)}renderArray(e){for(let t=0;t<e.length;t++){let s=e[t][this.primary_key];if(void 0===s)return void console.error("Data must have a primary key property");this.renderElement(s,e[t],t)}}renderMap(e){let t=0;for(let[s,l]of e)this.renderElement(s,l,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 l=!1,n=this.elements.get(e);n||(l=!0,n=this.cloneTemplate()),n&&(this.appendElement(n),n instanceof Template?n.render(t):Template.render(n,t),l&&this.elements.set(e,n))}static dataArrayToDataObject(e,t="id"){let s={};for(let l=0;l<e.length;l++){let n=e[l][t];void 0===n?console.error(`dataArrayToDataObject: object does not have required "${t}" value`):s[n]=e[l]}return s}}class Template extends HTMLElement{constructor({elements:e={},render_attribute:t="data-name",display_block:s=!0}={}){super(),this.event_system=new EventSystem,this.native_events={},this.elements=e,this.cached_data=null,this.render_data={},this.is_first_Render=!0,this.render_attribute=t,this.display_block=s}connectedCallback(){if(!this.firstChild){let e=this.createHtml();"string"==typeof e&&(e=e.trim(),this.setHtml(e))}this.display_block&&this.classList.add("template-block"),this.findNamedElements(),this.findElements(this.elements),this.onConnected()}onConnected(){}createHtml(){return null}static addEventSystem(e){e.event_system=new EventSystem,e.native_events={}}static on(e,t,s){let l=t.split(".")[0];e.event_system||Template.addEventSystem(e),0===e.event_system.getHandlersCount(l)&&(e.native_events[l]=(t=>{e.event_system.emit(l,t)}),e.addEventListener(l,e.native_events[l])),e.event_system.on(t,s)}on(e,t){Template.on(this,e,t)}static one(e,t,s){let l=t.split(".")[0];e.event_system||Template.addEventSystem(e),0===e.event_system.getHandlersCount(l)&&(e.native_events[l]=(t=>{e.event_system.emit(l,t),e.removeEventListener(l,e.native_events[l])}),e.addEventListener(l,e.native_events[l])),e.event_system.one(t,s)}one(e,t){Template.one(this,e,t)}static off(e,t,s=!0){if(!(e.event_system instanceof EventSystem))return;let l=t.split(".")[0];e.event_system.off(t,s),0===e.event_system.getHandlersCount(l)&&e.removeEventListener(l,e.native_events[l])}off(e,t=!0){Template.off(this,e,t)}static emit(e,t,s){e.event_system instanceof EventSystem&&e.event_system.emit(t,s)}emit(e,t){Template.emit(this,e,t)}setAttributes(e){for(let t=0;t<e.length;t++){let s=e[t];this.setAttribute(s.name,s.value)}}static findElements(e,t){"object"!=typeof e.elements&&(e.elements={});for(let s in t)"string"==typeof t[s]&&(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={},l=e.querySelectorAll(`[name], [${t}]`);for(let e=0;e<l.length;e++){let n=l[e].getAttribute("name");n||(n=l[e].getAttribute(t)),n&&(s[n]?(Array.isArray(s[n])||(s[n]=[s[n]]),s[n].push(l[e])):s[n]=l[e])}return s}findNamedElements(){let e=Template.findNamedElements(this,this.render_attribute);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.length?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.length?s[s.length-1]:null}selectLast(e){return Template.selectLast(e)}static append(e,t){t.appendChild(e)}append(e){Template.append(e,this)}appendTo(e){Template.append(this,e)}static prepend(e,t){t.firstChild&&t.insertBefore(e,t.firstChild)}prepend(e){Template.prepend(e,this)}prependTo(e){Template.prepend(this,e)}static empty(e){for(;this.element;)e.removeChild(e.firstChild)}empty(){Template.empty(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.previous_display=e.style.display),e.style.display="none"}hide(){Template.hide(this)}static show(e){e.style.display=e.previous_display||"block"}show(){Template.show(this)}static display(e,t){return void 0===t&&(t=!Template.isVisible(e)),t?Template.show(e):Template.hide(e)}display(e){Template.display(this,e)}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){Template.setHeight(this,e)}static setWidth(e,t){"number"==typeof t&&(t+="px"),e.style.width=t}setWidth(e){Template.setWidth(this,e)}static setTop(e,t){"number"==typeof t&&(t+="px"),e.style.top=t}setTop(e){Template.setTop(this,e)}static setRight(e,t){"number"==typeof t&&(t+="px"),e.style.right=t}setRight(e){Template.setRight(this,e)}static setBottom(e,t){"number"==typeof t&&(t+="px"),e.style.bottom=t}setBottom(e){Template.setBottom(this,e)}static setLeft(e,t){"number"==typeof t&&(t+="px"),e.style.left=t}setLeft(e){Template.setLeft(this,e)}static setPosition(e,{top:t,left:s,bottom:l,right:n}){void 0!==t&&Template.setTop(e,t),void 0!==s&&Template.setTop(e,s),void 0!==l&&Template.setTop(e,l),void 0!==n&&Template.setTop(e,n)}setPosition({top:e,left:t,bottom:s,right:l}){Template.setPosition(this,{top:e,left:t,bottom:s,right:l})}static addClass(e,t){e.classList.add(t)}addClass(e){Template.addClass(this,e)}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){Template.removeClass(this,e)}static replaceClass(e,t,s){e.classList.replace(t,s)}replaceClass(e,t){Template.replaceClass(this,e,t)}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){Template.setValue(this,e)}static enable(e){e.disabled=!1}enable(){Template.enable(this)}static disable(e){e.disabled=!0}disable(){Template.disable(this)}cacheData(e){return Object.extend({},e)}processRenderData(e){return e}static setHtml(e,t){e.innerHTML=t}setHtml(e){Template.setHtml(this,e)}static render(e,t,s=!1){let l=null;l=s?e.getElements():Template.findNamedElements(e);let n=Object.flatten(t);for(let t in n){let a=n[t],r=l[t];if(r||(s&&(e.findNamedElements(),r=l[t]),r))if(r.render)r.render(a);else{Array.isArray(r)||(r=[r]);for(let e=0;e<r.length;e++){let t=r[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){this.cached_data=this.cacheData(e),this.render_data=this.processRenderData(Object.extend({},e)),Template.render(this,this.render_data,!0),this.is_first_Render=!1}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": "2.0.0",
+  "version": "2.1.0",
   "description": "a tiny client-side library for rendering and generating HTML",
@@ -5,0 +5,0 @@ "main": "build.js",

src/js/template2.js

@@ -680,2 +680,122 @@ /**
     /**************************************************************************
+     * Position
+     *************************************************************************/
+
+    /**
+     * Set the top position
+     * @param {HTMLElement} element 
+     * @param {Number|String} top - If number, set to pixels
+     */
+    static setTop(element, top){
+        if(typeof top === "number"){
+            top += "px";
+        }
+        element.style.top = top;
+    }
+
+    /**
+     * Set the top position
+     * @param {Number|String} top - If number, set to pixels
+     */
+    setTop(top){
+        Template.setTop(this, top);
+    }
+
+    /**
+     * Set the right position
+     * @param {HTMLElement} element 
+     * @param {Number|String} right - If number, set to pixels
+     */
+    static setRight(element, right){
+        if(typeof right === "number"){
+            right += "px";
+        }
+        element.style.right = right;
+    }
+
+    /**
+     * Set the right position
+     * @param {Number|String} right - If number, set to pixels
+     */
+    setRight(right){
+        Template.setRight(this, right);
+    }
+    
+    /**
+     * Set the bottom position
+     * @param {HTMLElement} element 
+     * @param {Number|String} bottom - If number, set to pixels
+     */
+    static setBottom(element, bottom){
+        if(typeof bottom === "number"){
+            bottom += "px";
+        }
+        element.style.bottom = bottom;
+    }
+
+    /**
+     * Set the bottom position
+     * @param {Number|String} bottom - If number, set to pixels
+     */
+    setBottom(bottom){
+        Template.setBottom(this, bottom);
+    }
+
+    /**
+     * Set the left position
+     * @param {HTMLElement} element 
+     * @param {Number|String} left - If number, set to pixels
+     */
+    static setLeft(element, left){
+        if(typeof left === "number"){
+            left += "px";
+        }
+        element.style.left = left;
+    }
+
+    /**
+     * Set the left position
+     * @param {Number|String} left - If number, set to pixels
+     */
+    setLeft(left){
+        Template.setLeft(this, left);
+    }
+
+    /**
+     * Set one or more positions
+     * @param {HTMLElement} element 
+     * @param {Object} params
+     * @param {Number|String} [top] - If number, set to pixels
+     * @param {Number|String} [left] - If number, set to pixels
+     * @param {Number|String} [bottom] - If number, set to pixels
+     * @param {Number|String} [right] - If number, set to pixels
+     */
+    static setPosition(element, {top, left, bottom, right}){
+        if(typeof top !== "undefined"){
+            Template.setTop(element, top);
+        }
+        if(typeof left !== "undefined"){
+            Template.setTop(element, left);
+        }
+        if(typeof bottom !== "undefined"){
+            Template.setTop(element, bottom);
+        }
+        if(typeof right !== "undefined"){
+            Template.setTop(element, right);
+        }
+    }
+
+    /**
+     * Set one or more positions
+     * @param {Object} params
+     * @param {Number|String} [top] - If number, set to pixels
+     * @param {Number|String} [left] - If number, set to pixels
+     * @param {Number|String} [bottom] - If number, set to pixels
+     * @param {Number|String} [right] - If number, set to pixels
+     */
+    setPosition({top, left, bottom, right}){
+        Template.setPosition(this, {top, left, bottom, right});
+    }
+
+    /**************************************************************************
      * Class
@@ -682,0 +802,0 @@ *************************************************************************/

No alert changes

Improved metrics

Total package byte prevSize

160156

3.14%

Lines of code

3237

3.48%

No dependency changes