index.min.js

!function(){"use strict";const t=t=>t+"Changed",e=t=>null!=t&&""!==t,a=t=>!e(t),i=(t,e)=>e.reduce((e,a)=>e||t.indexOf(a)>=0,!1),s=document.createElement("style");function n(){return t=>t.nodeType!==Node.TEXT_NODE||/\S/.test(t.textContent)}s.innerHTML=".data-element-hidden {display: none !important;}",document.head.appendChild(s);const r=["data","reducer"];class o{constructor(t,e,a,i,s,n,r){this.attributeProperty=null,this.eventAction=null,this.render=()=>{const t=this.activeNode,e=this.attributeProperty,a=this.dataGetter().data,i=this.assetGetter;p(t,e,a,i)},this.activeNode=t,this.dataGetter=a,this.assetGetter=e,this.updateData=i,this.bubbleChildAction=r,this.reducerGetter=s,this.activeAttributeValue=c(t,n),this.eventAction=h(this.activeAttributeValue),this.attributeProperty=d(this.activeAttributeValue,["watch","asset"]),l(t,this.eventAction,a,i,s,r)}}const h=t=>{const e=new Map;return t.forEach((t,a)=>{if(a.endsWith("action")){const i=a.split(".");let s="";s=1===i.length?"click":i[0],e.set(s,t)}}),e},d=(t,e)=>{const a=new Map;return t.forEach((t,i)=>{if(e.filter(t=>i.endsWith(t)).length>0){const e=i.split(".");let s="",n="";1===e.length?(s="content",n=e[0]):(s=e[0],n=e[1]),a.has(s)||a.set(s,new Map),a.get(s).set(n,t)}}),a},c=(t,e)=>{const a=new Map;return t.getAttributeNames().filter(t=>i(t,e)).forEach(e=>{a.set(e,t.getAttribute(e)),t.removeAttribute(e)}),a},l=(t,e,i,s,n,r)=>{e.forEach((e,o)=>{o=o.startsWith("on")?o.substring("on".length,o.length):o,t.addEventListener(o,t=>{t.preventDefault(),t.stopImmediatePropagation();const o=i(),h=n(),d=e;let c=o.data;const l={type:d,event:t};if("key"in o){const t=o;c=t.data,l.data=c,l.key=t.key,l.index=t.index}a(h)?r(l):s(t=>h(t,l))})})};function u(e,a,i,s,n){var o;if(o=e,r.indexOf(o)<0&&a.getAttribute(e)!==i&&a.setAttribute(e,i),e in a){a[e]=i,"data"===e&&(a.dataPath=n);a[t(e)]=t=>f(s,n,t)}"content"===e&&(a.innerHTML=i)}const p=(t,i,s,n)=>{const r=i;a(r)||r.forEach((a,i)=>{const r=a.get("watch"),o=a.get("asset");let h=null;e(r)?h=m(s,r):e(o)&&(h=n(o)),u(i,t,h,s,r)})},m=(t,e)=>{if(a(t))return t;try{return new Function("data",`return data.${e};`).call(null,t)}catch(e){console.warn(t,e.message)}return null},f=(t,e,i)=>{if(!a(t))try{return new Function("data","value",`data.${e} = value;`).call(null,t,i)}catch(t){console.warn(t.message)}};class b{constructor(t,e,a,i,s,n){this.render=t=>{this.dataGetter=t,this.attributeEvaluators.forEach(t=>t.render())},this.nodes=t,this.addChildActionEventListener(n);const r=["watch","action","asset"],h=Array.from(y(r,t)),d=()=>this.dataGetter();this.attributeEvaluators=h.map(t=>new o(t,e,d,a,i,r,s))}addChildActionEventListener(t){this.nodes.forEach(e=>{e.addEventListener("childAction",e=>{if(e.defaultPrevented)return;e.stopImmediatePropagation(),e.stopPropagation(),e.preventDefault();const a=e.detail,i=this.dataGetter(),s={index:i.index,event:a.event,type:a.type,data:i.data,key:i.key};t(a,s)})})}}const y=(t,e)=>e.filter(n()).reduce((e,a)=>{if(!(a instanceof HTMLElement))return e;const s=a,n=s.getAttributeNames();for(const a of n)i(a,t)&&e.add(s);if(!i(s.tagName,["context-array".toUpperCase(),"context-element".toUpperCase()])){const a=y(t,Array.from(s.childNodes));Array.from(a).forEach(t=>e.add(t))}return e},new Set);class v extends HTMLElement{constructor(){super(),this.setData=t=>{this.contextData=t(this.contextData),this.render()},this.onMounted=t=>{this.onMountedCallback=t},this.getAsset=t=>{const a=this.assets;if(e(a)&&t in a)return a[t];const i=this.superContextElement;return e(i)?i.getAsset(t):null},this.actionToPath=t=>{const a={path:this.dataPath};return e(t.key)&&(a.key=t.key,a.index=t.index,a.data=t.data),a},this.updateDataCallback=e=>{this.setData(e);const a=t("data");a in this&&this[a].call(this,this.contextData)},this.bubbleChildAction=t=>{const e={event:t.event,type:t.type,childActions:[this.actionToPath(t)]};this.dispatchDetailEvent(e)},this.updateDataFromChild=(t,e)=>{const i=this.reducer;a(i)?(t.childActions=[this.actionToPath(e),...t.childActions],this.dispatchDetailEvent(t)):this.updateDataCallback(e=>i(e,t))},this.render=()=>{if(a(this.contextData)||a(this.template))return;if(a(this.renderer)){const t=this.template.map(t=>t.cloneNode(!0));this.renderer=new b(t,this.getAsset,this.updateDataCallback,()=>this.reducer,this.bubbleChildAction,this.updateDataFromChild)}const t=[...this.renderer.nodes].reverse();let e=document.createElement("template");this.append(e);for(const a of t)e.previousSibling!==a&&this.insertBefore(a,e),e=a;const i=this.contextData;this.renderer.render(()=>({data:i})),this.lastChild.remove()},this.initAttribute=()=>{},this.dispatchDetailEvent=t=>{const e=new CustomEvent("childAction",{detail:t,cancelable:!0,bubbles:!0});this.dispatchEvent(e)},this.populateTemplate=()=>{this.template=Array.from(this.childNodes).filter(n()),this.innerHTML=""},this.getSuperContextElement=t=>t instanceof v?t:e(t.parentNode)?this.getSuperContextElement(t.parentNode):null,this.template=null,this.renderer=null,this.reducer=null,this.contextData={},this.assets={}}get data(){return this.contextData}set data(t){this.setData(()=>t)}connectedCallback(){if(this.superContextElement=this.getSuperContextElement(this.parentNode),this.initAttribute(),a(this.template)){this.classList.add("data-element-hidden");setTimeout(()=>{this.populateTemplate(),this.classList.remove("data-element-hidden"),this.render(),e(this.onMountedCallback)&&(this.onMountedCallback(),this.onMountedCallback=null)},0)}}disconnectedCallback(){this.superContextElement=null}}customElements.define("context-array",class extends v{constructor(){super(),this.setDataKeyPicker=t=>{this.dataKeyPicker=t},this.initAttribute=()=>{this.dataKeyField=this.getAttribute("data.key")},this.render=()=>{const t=this.contextData,e=this.template,i=this.renderers;if(a(t)||a(e))return;this.removeExpiredData();let s=document.createElement("template");this.append(s);const n=t.length-1;[...t].reverse().forEach((t,a)=>{const r=this.dataKeyPicker(t);if(!i.has(r)){const t=e.map(t=>t.cloneNode(!0)),a=new b(t,this.getAsset,this.updateDataCallback,()=>this.reducer,this.bubbleChildAction,this.updateDataFromChild);i.set(r,a)}const o=i.get(r),h=[...o.nodes].reverse();for(const t of h)s.previousSibling!==t&&this.insertBefore(t,s),s=t;o.render(()=>({data:t,key:r,index:n-a}))}),this.lastChild.remove()},this.removeExpiredData=()=>{const t=this.renderers,e=this.contextData.map(t=>this.dataKeyPicker(t));Array.from(t.keys()).filter(t=>e.indexOf(t)<0).forEach(e=>{t.get(e).nodes.forEach(t=>t.remove()),t.delete(e)})};this.renderers=new Map,this.dataKeyPicker=t=>{if(a(this.dataKeyField))throw new Error("'<context-array>' requires 'data.key' attribute. data-key value should refer to the unique attribute of the data.");return t[this.dataKeyField]},this.contextData=[]}static get observedAttributes(){return["data.key"]}attributeChangedCallback(t,e,a){"data.key"===t&&(this.dataKeyField=a)}}),customElements.define("context-element",v)}();