main.js

(()=>{"use strict";var e={370:e=>{e.exports=function(e,t){return t||(t={}),e?(e=String(e.__esModule?e.default:e),t.hash&&(e+=t.hash),t.maybeNeedQuotes&&/[\t\n\f\r "'=<>`]/.test(e)?'"'.concat(e,'"'):e):e}},142:(e,t,n)=>{e.exports=n.p+"images/1.svg"},428:(e,t,n)=>{e.exports=n.p+"images/2.svg"},91:(e,t,n)=>{e.exports=n.p+"images/3.svg"},882:(e,t,n)=>{e.exports=n.p+"images/docs.svg"},305:(e,t,n)=>{e.exports=n.p+"images/files.png"},278:(e,t,n)=>{e.exports=n.p+"images/logo-transparent.png"},631:(e,t,n)=>{e.exports=n.p+"images/logo.png"},525:(e,t,n)=>{e.exports=n.p+"images/menu.svg"},684:(e,t,n)=>{e.exports=n.p+"images/reactivity.svg"},565:(e,t,n)=>{e.exports=n.p+"images/results.png"},559:(e,t,n)=>{e.exports=n.p+"images/ts.svg"}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var i=t[a]={exports:{}};return e[a](i,i.exports,n),i.exports}n.m=e,n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var a=t.getElementsByTagName("script");if(a.length)for(var r=a.length-1;r>-1&&!e;)e=a[r--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),n.b=document.baseURI||self.location.href,(()=>{const e=/\[+(.*?)\]+/g,t=/\{{(.*?)}}/g,a=/(\{\{.*?\}\})/g,r=/\{{{(.*?)}}}/g,i=/\{\{\s*([^}]+)\s*\}\}|([^{}]+)/g,o=/\s+/g,s=/(\!)/g,{appendChild:l,insertBefore:c,removeChild:p,replaceChild:d}=Node.prototype,u=Object.getOwnPropertyDescriptor(CharacterData.prototype,"data").set,h=Object.getOwnPropertyDescriptor(Element.prototype,"className").set,m=Object.getOwnPropertyDescriptor(Node.prototype,"firstChild").get,f=Object.getOwnPropertyDescriptor(Node.prototype,"nextSibling").get,{push:y,indexOf:g,map:v,unshift:b,pop:x}=(Object.getOwnPropertyDescriptor(Node.prototype,"previousSibling").get,Object.getOwnPropertyDescriptor(Node.prototype,"parentNode").get,Node.prototype.cloneNode,Array.prototype),{split:w}=String.prototype,{setAttribute:T,removeAttribute:k,replaceChildren:_,remove:E,hasAttribute:D,getAttribute:A}=Element.prototype,{has:j,add:N}=Set.prototype,{set:O,has:C,get:I}=Map.prototype,{concat:M}=String.prototype,L=e=>{if(!e.includes("."))return e;{const t=e.split(".");if(t.length>1){const e=t.filter(((e,t)=>0!==t));return{key:t[0],properties:e}}S("Key error")}},S=e=>{throw new Error(e)},F=e=>{let n=!1;return e.replace(t,((e,t)=>{const a=t.trim();return a&&!/^[0-9]+$/.test(a[0])&&(n=!0),e})),n},V=e=>"object"==typeof e&&!Array.isArray(e)&&null!==e,H=e=>JSON.parse(JSON.stringify(e)),P=e=>"[object Function]"===Object.prototype.toString.call(e),$=t=>{const n=t.replace(o,"");return e.test(n)},R=(e,t,n=!0)=>{let a;for(let n=0;n<e.length;n++){const r=e[n];if(r?.id===t){a=r;break}}return a?n?a.value:a:void 0},q=(e,t)=>{if(e&&e.value&&Array.isArray(e.value)){e.value=e.value.map((e=>e.replace(o,"")));const n={import:e.value.join(";"),exportId:e.exportId,index:t,importIndex:e.importIndex};return JSON.stringify(n)}S("Import value is array")};class B{selector;template;style;trimHTML;exportData;constructor(e,t={trimHTML:!1}){this.selector=e||"",this.template="",this.trimHTML=void 0!==t.trimHTML&&t.trimHTML,this.exportData={},this.style=""}render(e="",n={}){if(this.template=((e,n)=>(void 0===n||(e=e.replace(t,((e,t)=>{const a=t.trim();return n[a]&&n[a]._getSelector?((e,t)=>{const n=document.createElement("template");return t.forEach((({selector:e,value:t})=>{void 0!==t&&""!==t&&n.setAttribute(e,t)})),n})(0,[{selector:"data-cample",value:n[a]._getSelector}]).outerHTML:e}))),e))(e,n),"string"==typeof this.selector){const e=document.querySelector(this.selector);e&&(e.innerHTML=this.template),Object.keys(n).forEach((e=>{n[e]._getStyle&&(this.style+=n[e]._getStyle)}));const t=(e,t)=>{e&&this.exportData.hasOwnProperty(e)&&this.exportData[e].components.push(t)},a=(e,t,a,r=0)=>{e&&this.exportData.hasOwnProperty(e)&&(this.exportData[e].value[a][r]=t,this.exportData[e].components.forEach((t=>{t.render(this.trimHTML,e&&this.exportData.hasOwnProperty(e)?this.exportData[e].value:void 0,void 0!==t._getExportId?n[t]._getExportId:void 0,"dynamic")})))};(e=>{if(void 0===e)return;const t=document.createElement("style");t.setAttribute("type","text/css"),t.insertAdjacentHTML("afterbegin",e),document.head.appendChild(t)})(this.style),Object.keys(n).forEach(((e,r)=>{const i=n[e]._getSelector;if(n[e].render(this.trimHTML,i&&this.exportData.hasOwnProperty(i)?this.exportData[i].value:void 0,void 0!==n[e]._getExportId?n[e]._getExportId:n[e]._getExport?r:void 0),i&&this.exportData.hasOwnProperty(i)&&t(i,n[e]),n[e]._getExport){const t=P(n[e]._getExport)?n[e]._getExport(a):n[e]._getExport;t&&(this.exportData=((e,t,n)=>{const a=e;return V(t)?Object.keys(t).forEach(((e,r)=>{if(!a.hasOwnProperty(e)){const t={value:{},components:[]};a[e]=t}const i=t[e];a[e].value[n]=i})):S("Export data is object"),a})(this.exportData,t,void 0!==n[e]._getExportId?n[e]._getExportId:r))}}))}}}const K=(e,t,n,a,r)=>{let i;const o=n=>({element:e,functions:n,currentData:t,importedData:r});Array.isArray(n)?(i=n[0],i(o(a))):P(n)?(i=n,i(o(a))):S("Script is an array or a function")},z=(e,t,n,a,r,i)=>{n&&Object.entries(n).forEach((([n,o])=>{const s=Array.isArray(o)?o[1]:o;e(n,s,t,a,r,i)}))},X=(e,t,n,a)=>{let r;const i=(e,n,a)=>{if(a){if(t){"undefined"!==e&&void 0!==e||S("ExportId included"),"undefined"!==n&&void 0!==n||S("Index included");let i=Array.isArray(a)?a:a.split(";");i=i.map((e=>{if(!e.includes(":")){if(e.includes("[")){e.includes("]")||S("Syntax value error");const t=JSON.parse(e);return Array.isArray(t)||S("Syntax value error"),t}return e}{const t=e.split(":");if(2===t.length)return{value:t[0],index:t[1]};S("Syntax value error")}}));for(let a of i)if(t.hasOwnProperty(e))if(Array.isArray(a))if(2===a.length){const i=a[0],o=a[1],s=t[e][n];s?void 0!==s.data[i]?(r||(r={}),r[i]=s.data[i][o]):void 0!==s.functions[i]?(r||(r={}),r[i]=s.functions[i][o]):S(`Property value "${a[0]}" not found`):S("Data error")}else S("Syntax value error");else{const i=t[e][n],o=(e,t)=>{const n=e[t];Array.isArray(n)?(r||(r={}),r[t]=n[0]):S("Data error")};i?void 0!==i.data[a]?o(i.data,a):void 0!==i.functions[a]?o(i.functions,a):S(`Property value "${a}" not found`):S("Data error")}else S("ExportId not found")}}else S("Nothing to import")};if(e){if(D.call(e,"data-cample-import")){let n=A.call(e,"data-cample-import");if(n)if(t){n=n.replace(o,"");const e=JSON.parse(n);i(e.exportId,e.index?e.index:0,e.import)}else S("Nothing to import")}}else n&&t&&n.exportId&&void 0!==a&&i(n.exportId,a,n.value);return r},U=(e,t,n)=>{let a;if(e)if(t&&t.value){const n=q(t,0);if(n)if(e.hasAttribute("data-cample-import")){let n=e.getAttribute("data-cample-import");if(n){n=n.replace(o,"");const s=JSON.parse(n);if(s.import){"undefined"===s.exportId&&S("ExportId included"),"undefined"===s.index&&S("Index included");const n=JSON.parse(s.import),o=n.data?n.data.split(";"):[],l=n.functions?n.functions.split(";"):[],c=(i=l,(r=o).concat(i.filter((e=>r.indexOf(e)<0))));if(s.exportId===t.exportId){const n={value:((e,t)=>{const n=[],a=[...t];return e.forEach((e=>{if(e.includes("[")&&Array.isArray(JSON.parse(e))){e.includes("]")||S("Syntax value error");const t=JSON.parse(e);t[0]&&-1!==a.indexOf(t[0])&&a.splice(a.indexOf(t[0]),1)}else-1!==a.indexOf(e)&&a.splice(a.indexOf(e),1);n.push(e)})),a.forEach((e=>{n.push(e)})),n})(c,t.value),exportId:s.exportId,importIndex:s.importIndex};a=n;const r=q(n,s.index);r&&e.setAttribute("data-cample-import",r)}else S("ExportId error")}}}else a=t,e.setAttribute("data-cample-import",n)}else void 0!==n&&e.setAttribute("data-cample-import",n);var r,i;return a};class Y{dynamicNodes;data;constructor(){this.dynamicNodes=[],this.data={data:{values:[],components:[],currentId:0}}}}class G{template;selector;style;attributes;exportId;trimHTML;options;constructor(e,t={}){this.selector=e,this.template="",this.options=t,this.trimHTML=t.trimHTML,this.attributes=t.attributes,this.style=t.style,this.exportId=t.exportId}get _getSelector(){return this.selector}get _getStyle(){return this.style}get _getExportId(){return this.exportId}}class J extends G{importId;import;script;_dynamic;exportDataObjects;export;exportObj;values;dataFunctions;functions;setExportData;constructor(e,t={}){super(e,t),this.script=t.script,this._dynamic=new Y,this.import=t.import,this.importId=void 0,this.export=t.export,this.setExportData=void 0,this.exportDataObjects=[],this.exportObj=void 0,this.dataFunctions=t.dataFunctions,this.functions=t.functions,this.values=void 0!==t.values?t.values:void 0}get _getImport(){return this.import}}const W=(e,t,n,a,r)=>{if(e){const i=()=>{const e=n.map((e=>r(e)));t().apply(void 0,e)};e.addEventListener(a,i)}},Z=(e,t=[])=>{let n=e;for(let e=0;e<t.length;e++)n=n[t[e]];return n},Q=(e,t,n,a,r)=>{const{values:i,render:o}=t;o(e,i,n,a,r)},ee=(e,t)=>{if(e.isValue){const n={value:""};return Q(n,e,t,void 0,void 0),n.value}{const n=t[e.originKey];return e.isProperty?Z(n,e.properties):n}},te=(e,t,n,a)=>{if(e.isValue){const r={value:""};return Q(r,e,t,n,a),r.value}switch(e.originType){case 1:return e.render(t);case 2:return e.render(n);case 3:return a;default:return}},ne=(e,t,n,a)=>ee(e,t),ae=(e,t,n,a)=>{let r="";for(const i of t){const{value:t,render:o}=i,s=o(t,e,n,a);r=M.call(r," ",s).trim()}return r},re=(e,t,n,a)=>{const{value:r,render:i}=t;return i(r,e,n,a)},ie=e=>e,oe=(e,t,n,a)=>{e.render(t,n,a)},se=(e,t,n,a,r,i)=>{t&&ce(e,n,a,r,i)},le=(e,t,n,a,r,i)=>{const o=t?n[0]:n[1];ce(e,o,a,r,i)},ce=(e,t,n,a,r)=>{const{value:i,render:o}=t.valueClass;return o(e,i,n,a,r)},pe=(e,t,n,a,r)=>{const{value:i,render:o}=t,s=o(i,n,a,r);e.value+=s},de=(e,t,n,a,r)=>{const i=t.length;for(let o=0;o<i;o++){const{value:i,render:s}=t[o],l=s(i,n,a,r);e.value=M.call(e.value," ",l).trim()}},ue=(e,t,n,a,r)=>{const{value:i,render:o}=t,s=o(i,n,a,r);e.value=s},he=(e,t,n,a,r)=>{const i=t.condition.render(n,a,r),{values:o,render:s}=t;s(e,i,o,n,a,r)},me=(e,t,n,a,r)=>{for(let i=0;i<t.length;i++){const o=t[i],s=o.condition.render(n,a,r),{values:l,render:c}=o;c(e,s,l,n,a,r)}},fe=e=>e,ye=e=>!!e,ge=e=>{switch(e){case"!":return 1;case"==":return 2;case"!=":return 3;case"===":return 4;case"!==":return 5;case">":return 6;case">=":return 7;case"<":return 8;case"<=":return 9;case"&&":return 10;case"||":return 11;default:return 0}},ve=e=>{switch(e){case 10:return 3;case 11:return 4;default:return 2}},be=(e,t,n)=>{switch(e){case 1:return n?[e=>!e,1]:[ye,2];case 2:return(e,t)=>e==t;case 3:return(e,t)=>e!=t;case 4:return(e,t)=>e===t;case 5:return(e,t)=>e!==t;case 6:return(e,t)=>e>t;case 7:return(e,t)=>e>=t;case 8:return(e,t)=>e<t;case 9:return(e,t)=>e<=t;case 10:return(e,t)=>e&&t;case 11:return(e,t)=>e||t;case 12:case 23:return(e,t)=>!(e==t);case 13:case 22:return(e,t)=>!(e!=t);case 14:case 25:return(e,t)=>!(e===t);case 15:case 24:return(e,t)=>!(e!==t);case 16:return(e,t)=>!(e>t);case 17:return(e,t)=>!(e>=t);case 18:return(e,t)=>!(e<t);case 19:return(e,t)=>!(e<=t);case 20:return(e,t)=>!(e&&t);case 21:return(e,t)=>!(e||t);case 26:return(e,t)=>!!(e>t);case 27:return(e,t)=>!!(e>=t);case 28:return(e,t)=>!!(e<t);case 29:return(e,t)=>!!(e<=t);case 30:return(e,t)=>!(!e||!t);case 31:return(e,t)=>!(!e&&!t);case 32:return n?[(e,n,a,r)=>!t(e,n,a,r),1]:[(e,n,a,r)=>!!t(e,n,a,r),2];case 33:return[t,0];default:return[fe,0]}},xe=(e,t,n,a,r)=>{const i=e[0];let l=t;l=l.replace(o,"");let c=w.call(l,/(\(|\)|\|\||&&|>=|<=|!==|===)/g).filter(Boolean);const p=(e,t)=>{!t.includes("!")||t.includes("!=")||t.includes("!==")?e.push(t):t.split(s).filter(Boolean).forEach((t=>{e.push(t)}))};c=c.reduce(((e,t)=>(t.includes("==")&&"!=="!==t&&"==="!==t?t.split(/(==)/g).forEach((t=>{p(e,t)})):t.includes("<")&&"<="!==t?t.split(/(<)/g).forEach((t=>{p(e,t)})):t.includes(">")&&">="!==t?t.split(/(>)/g).forEach((t=>{p(e,t)})):t.includes("!=")&&"!=="!==t?t.split(/(!=)/g).forEach((t=>{p(e,t)})):!t.includes("!")||t.includes("!=")||t.includes("!==")?e.push(t):t.split(s).filter(Boolean).forEach((t=>{e.push(t)})),e)),[]);const d=[],u=c.length-1;-1===u&&S("Condition error"),c.forEach(((e,t)=>{const n="("===e;(n||")"===e)&&d.push({id:t,isOpen:n})}));let h,m=0,f=0,v=0,b=[];const x={id:-1,siblingBrackets:[],range:[0,u]};d.forEach((({id:e,isOpen:t})=>{const n=x.siblingBrackets[f];if(t){const t={id:m++,siblingBrackets:[],range:[e],parent:void 0,path:[...b]};if(n){let e;t.path.forEach((t=>{e=e?e.siblingBrackets[t]:n.siblingBrackets[t]})),e?(t.parent=e,b.push(e.siblingBrackets.length),t.path.push(e.siblingBrackets.length),e.siblingBrackets.push(t)):(t.parent=n,b.push(n.siblingBrackets.length),t.path.push(n.siblingBrackets.length),n.siblingBrackets.push(t)),h=t,v++}else x.siblingBrackets.push(t)}else v?(h||S("Bracket error"),h.range.push(e),h=h.parent,v--,b.pop()):(h=void 0,n||S("Bracket error"),n.range.push(e),f++,b=[])}));const T={operands:[],render:fe},k=(e,t=fe,n=0,a=0)=>({value:e,type:n,render:t,priority:a}),_={...T,connectingOperations:[],operands:[]},E=(e,t)=>({priority:e,value:t}),D=(t,o,s,l)=>{const p=s.siblingBrackets.map((e=>e.range));let d=0,u=!1,h=0;for(let m=t;m<=o;){const t=c[m],f=p[d];if(f?.includes(m)){const e=f[1],t={...T,connectingOperations:[],operands:[]},[n,a]=be(h,i,u),r=k(t,n,a);y.call(l.operands,r),D(m+1,e-1,s.siblingBrackets[d],t),d++,m=e+1,u=!1,h=0}else{const s=ge(t);switch(s){case 0:const p=Te(t,e,void 0,n,a,r,!1,!0),d=0===h?33:32,[g,v]=be(d,i,u),b=k(p,g,v,1);y.call(l.operands,b),u=!1,h=0;break;case 1:let x=1;u=!0;let w=c[m+x];for(;1===ge(w)&&m<=o;)u=!u,w=c[m+ ++x];m=m+x-1,h=1;break;default:const T=m+1,_=c[T],D=ge(_),A=ve(s);if(f?.includes(T)||0===D||1===D){const e={value:s,priority:A,render:be(s,i,u)};y.call(l.operands,e);const t=E(A,e);y.call(l.connectingOperations,t),u=!1,h=0}else S("Condition error")}m++}}};D(0,u,x,_);const A=(e,t,n,a,r)=>{const o=e.value;if(r=r??e.type,void 0!==t.oldBracketType){const e=t.oldBracketType;r=1===e&&1===r?2:1===r||1===e?1:e}o.oldBracketType=r;const s=j(o);if(n)if(t.operands=o.operands,delete t.connectingOperations,t.isFirstOperation=o.isFirstOperation,void 0===t.isFirstOperation&&void 0===s&&0!==r){const e=be(1,i,1===r)[0];t.render=e,t.isFirstOperation=!0}else t.render=o.render;else{if(t.operands[a]=o,void 0===s&&0!==r){const e=be(1,i,1===r)[0];t.operands[a].render=e}delete t.operands[a].connectingOperations}if(0!==r&&void 0!==r&&void 0!==s){const e=((e,t)=>{switch(e){case 2:return 1===t?12:22;case 3:return 1===t?13:23;case 4:return 1===t?14:24;case 5:return 1===t?15:25;case 6:return 1===t?16:26;case 7:return 1===t?17:27;case 8:return 1===t?18:28;case 9:return 1===t?19:29;case 10:return 1===t?20:30;case 11:return 1===t?21:31;default:return e}})(s,r),o=be(e,i);n?(t.render=o,t.isFirstOperation=!1):t.operands[a].render=o}},j=e=>{const t=e.operands.length,{operands:n}=e;t%2==0&&S("Condition error");const a=e.connectingOperations;if(0===a.length){const t=e.operands[0],{type:n,priority:a}=t;return void(0===a&&A(t,e,!0,0,n))}a.sort(((e,t)=>e.priority-t.priority));const r=a.length-1;for(let t=0;t<r;t++){const{value:r}=a[t],i=g.call(n,r),o=i+1,s=n[o],l=i-1,c=n[l];0===s.priority&&A(s,e,!1,o),0===c.priority&&A(c,e,!1,l);const p={operands:[n[l],n[o]],render:r.render};void 0!==s&&void 0!==c||S("Condition error"),e.operands.splice(l,3,p)}const{value:i}=a[r],o=g.call(n,i);e.render=i.render,e.operands.splice(o,1);for(let t=0;t<2;t++){const n=e.operands[t];0===n.priority&&A(n,e,!1,t)}return i.value};j(_);const N=e=>{delete e.priority;const t=e.render,n=e.operands;if(void 0!==n){delete e.connectingOperations,delete e.isFirstOperation,delete e.oldBracketType;const a=n[0],r=n.length;if(2===r){const r=n[1];e.render=(e,n,i)=>t(a.render(e,n,i),r.render(e,n,i))}else 1===r?e.render=(e,n,r)=>t(a.render(e,n,r)):S("Condition error");for(let t=0;t<e.operands.length;t++)N(e.operands[t])}else{delete e.type,delete e.oldType;const n=e.value;if(t===ee)n.isValue?e.render=(e,t,a)=>{const r={value:""};return Q(r,n,e,t,a),r.value}:n.isProperty?e.render=(e,t,a)=>{const r=e[n.originKey];return Z(r,n.properties)}:e.render=(e,t,a)=>e[n.originKey];else if(t===te)if(n.isValue)e.render=(e,t,a)=>{const r={value:""};return Q(r,n,e,t,a),r.value};else switch(n.originType){case 1:if(n.isProperty){if(1===n.properties?.length){const t=n.properties[0];return e.render=(e,n,a)=>e[t]}return e.render=(e,t,a)=>n(e)}return e.render=(e,t,n)=>e;case 2:if(n.isProperty){if(1===n.properties?.length){const t=n.properties[0];return e.render=(e,n,a)=>n[t]}return e.render=(e,t,a)=>n(t)}return e.render=(e,t,n)=>t;case 3:return e.render=(e,t,n)=>n;default:return e.render=(e,t,n)=>{}}else e.render=t.bind(void 0,n)}};return N(_),_},we=(e,n,r,i,s)=>{const l=F(n);let c=[];l?n.split(a).filter(Boolean).map((n=>{if(F(n)){const a=n.replace(t,((e,t)=>t)),o=Te(a,e,void 0,r,i,s,!1,!0);return o&&c.push({value:o,render:e[0]}),o}return w.call(n,o).filter(Boolean).forEach((t=>{t&&c.push({value:t,render:e[2]})})),n})):c=w.call(n,o).filter(Boolean).map((t=>({value:t,render:e[2]})));const p=1===c.length;return{valueClass:{value:p?c[0]:c,render:p?e[5]:e[6]}}},Te=(t,n,a,r,i,o,s,l)=>{const[c,p,d]=((t,n)=>{const a=V(t),r=(e=>!!e.includes("[")&&(e.includes("]")||S("Syntax value error"),!0))(n);return a?r&&t.properties.length>0&&S("Value error"):r&&(t=t.replace(e,((e,t)=>t))),[t,r,a]})(L(t),t),u=d?c.key:c;let h;if(p)if(l&&S("The presence of value in the condition"),a){const e=a[u];h=((e,t,n,a,r)=>{let i;if(V(t)){i=[];for(const[o,s]of Object.entries(t)){const t=Array.isArray(s),l={condition:xe(e,o,n,a,r),values:t?s.map((t=>we(e,t,n,a,r))):we(e,s,n,a,r),render:t?e[4]:e[3]};i.push(l)}}else S("Value render error");return i})(n,e,r,i,o)}else S("Values error");const m=d?c.properties:void 0;let f=0;const y=!(!m||!m.length);switch(u){case r:f=1;break;case i:f=2;break;case o:y&&S("Error properties"),f=3}const g=1===h?.length,v={originKey:u,key:p?c:t,originType:f};if(p&&(v.isValue=p),y&&(v.isProperty=y),s&&(v.isClass=s),m&&m.length)if(v.properties=m,1===m.length){const e=m[0];v.render=t=>t[e]}else v.render=e=>Z(e,m);else v.render=n[2];if(p)if(g){const e=h[0],t=e.values,a=Array.isArray(t),r=e=>{const{valueClass:t}=e,{value:n}=t;return!Array.isArray(n)&&n.render===ie&&"string"==typeof n.value&&1===n.value.split(" ").length};if(a||!a&&!r(t)||!s){v.values=e,v.render=n[8];const t=e=>{const{valueClass:t}=e;V(t.value)&&(t.render=n[7])},a=e.values;if(Array.isArray(a))for(let e=0;e<a.length;e++)t(a[e]);else t(a)}else{delete v.isValue;const n=t.valueClass.value.value;v.isValueSingle=!0;const{condition:a}=e;v.valueSingle={condition:a,value:n}}}else v.values=h,v.render=n[9];return v},ke=e=>{const t=e.split("(")[0];let n="";return e.replace(/\(([^)]+)\)/g,((e,t)=>{const a=t.replace(/\s/g,"");return n=a,e})),{key:t,arguments:n.split(",")}},_e=(e,n,a,o,s,l,c,p,d,v,w,_,E,D,j)=>{const N=((e,t)=>{const n=document.createElement("template");n.innerHTML=t?e.trim():e,n.content.children.length>1&&S("Component include only one node with type 'Element'");const a=e=>{switch(e.nodeType){case Node.ELEMENT_NODE:if("pre"===e.tagName)return;break;case Node.TEXT_NODE:if(!/\S/.test(e.textContent))return void e.remove()}for(let t=0;t<e.childNodes.length;t++)a(e.childNodes.item(t))};return a(n.content.childNodes[0]),n.content.firstElementChild})(n,l),O={rootId:0,id:0},C=[O],I={},M={el:N,nodes:[O]};j&&(M.key={value:[],render:e[0]});let L=-1;const V=[];let R;const q=(n,a,l,d)=>{L++;const u=void 0!==d,h=u?{}:O,g=((e,t,n=null,a=[],r)=>({id:t,parentNode:n,nextNode:null,siblings:[],values:[],path:r?[...r,e]:[...a,e]}))(h,L,a,a?.path,l?.path);if(a){const{siblings:e}=a,t=e.length-1;t>-1&&(e[t].nextNode=g),y.call(e,g)}else R=g;if(u&&(((e,t,n,a,r)=>{e.rootId=t,e.id=n,e.node=a,e.isNext=r})(h,d?l?.id??0:a?.id??0,L,g,d),y.call(C,h)),n.nodeType===Node.ELEMENT_NODE){(e=>{if(e){const t=Array.from(e.childNodes).filter((({nodeType:e,textContent:t})=>e===Node.TEXT_NODE&&""!==t?.trim())),n=t.map((e=>e.textContent)).join().trim();t.length&&F(n)&&t.forEach((t=>{if(t.textContent&&t.nodeValue&&F(t.textContent)){const n=[...t.textContent.matchAll(i)];n.map(((a,r)=>{const i=a[0],o=document.createTextNode(i);r===n.length-1?e.replaceChild(o,t):e.insertBefore(o,t)}))}}))}})(n),((e,n,a,o,s,l,c,p,d,u,h,m,f,g,v)=>{const b=Array.from(a.attributes).filter((e=>F(e.value))),x=(e=void 0,t=void 0,n=0)=>{let a;return e?(a=e,a.elId=s.id):a={id:s.id,type:n,...t},s?.node&&(l[s.id]=s.node.path),y.call(p,a),a},w=t=>({value:t,render:"string"==typeof t?e[2]:e[3]});if(b.length)for(const s of b){const l=s.value;if("key"!==s.name)if("class"!==s.name)if("data-cample-import"!==s.name)if(s.name.includes(":")||s.value.includes("(")||s.value.includes(")")){":"!==s.name[0]&&S("Event error");let e="";l.replace(t,((t,n)=>{const a=n.trim();return e=a,t}));const r=ke(e),i=[...r.arguments].filter(Boolean),d=s.name.substring(1),u={elId:0,indexValue:p.length,args:i,keyEvent:d,getEventsData:o,getEventsFunction:v,renderedKey:r,id:c,values:p,key:e};k.call(a,s.name),n.push(x(u))}else{const n=$(l),r={};n||l.replace(t,((t,n)=>{if(!r.hasOwnProperty(n)){const t=Te(n,[e[3],e[4],e[2],e[5],e[6],e[7],e[8],e[9],e[10],e[11]],d,u,h,m);r[n]=t}return n})),x(void 0,{name:s.name,value:n?[l,n]:l,keys:r},2),T.call(a,s.name,"")}else x(void 0,{value:l.replace(r,((e,t)=>t||e))},3);else{const n=Array.from(a.classList),r={value:[],render:e[0]},i=n=>{if(F(n)){const a=n.replace(t,((e,t)=>t));return Te(a,[e[3],e[4],e[2],e[5],e[6],e[7],e[8],e[9],e[10],e[11]],d,u,h,m,!0)}return n};if(1===n.length){const e=i(n[0]);r.value=w(e),delete r.render}else r.value=n.map((e=>w(i(e))));x(void 0,{classes:r},4),T.call(a,"class","")}else if(f&&g){const n=n=>{let a=n[0];if(F(a)){const n=a.replace(t,((e,t)=>t));a=Te(n,[e[3],e[4],e[2],e[5],e[6],e[7],e[8],e[9],e[10],e[11]],d,u,h,m,!1)}return a},r=[...s.value.matchAll(i)];if(1===r.length)g.value=w(n(r[0])),g.render=e[1];else for(const e of r){const t=w(n(e));y.call(g,t)}k.call(a,s.name)}else S("key error")}})(e,V,n,c,h,I,o,g.values,s,_,E,D,j,M.key,p);let a=0;for(let e=m.call(n);e;e=f.call(e)){const t=a-1;q(e,g,g?.siblings[t],!!a++)}}else if(n.nodeType===Node.TEXT_NODE){const a=n.textContent;if(a){const n=(e=>{let n;return e.replace(t,((e,t)=>{const a=t.trim();return a.includes("(")||a.includes(")")?S("Function key includes only in event attr"):n=a,e})),n})(a);if(n){h.isText=!0,I[g.id]=g.path;const t={type:1,key:Te(n,[e[3],e[4],e[2],e[5],e[6],e[7],e[8],e[9],e[10],e[11]],s,_,E,D),text:L};y.call(g.values,t)}}}};q(N,R);const B=[];for(let e=0;e<C.length;e++){const t=C[e];if(void 0!==t.id&&t.id in I){const e=I[t.id];if(B.length){let t=0;const n=e.length;for(let a=n-1;-1<a;a--){const r=e[a];if(B.includes(r)){if(t=g.call(B,r),t+1){const a=[];for(let e=B.length-1;e>t;e--){const e=x.call(B).dynamicNodes;if(e)for(let t=0;t<e.length;t++)y.call(a,e[t])}a.length&&(r.dynamicNodes="dynamicNodes"in r?[...r.dynamicNodes,...a]:a);for(let a=t+1;a<n;a++){const t=e[a];y.call(B,t)}}break}}const a=B[B.length-1];a.dynamicNodes?y.call(a.dynamicNodes,a):a.dynamicNodes=[a]}else{for(let t=0;t<e.length;t++)y.call(B,e[t]);t.dynamicNodes=[t]}}}let K=[],z=0,X=0;d?.(),v?.();for(const{elId:e,values:t,indexValue:n,args:r,keyEvent:i,getEventsData:o,getEventsFunction:s,renderedKey:l,id:c,key:p}of V){const d=s?.(l.key,c,p,w);P(d)||S("Data key is of function type");const u=(e,t)=>{W(e,d,r,i,(e=>j?o(e,c,t,a):o(e,c)))},h={id:e,type:0,render:(e,t)=>u(e,t)};t[n]=h}const Y=e=>{const n=e.key;switch(e.type){case 0:return(e,t,n,a,r,i,o,s,l,c)=>{const{render:p}=t;p(n,s)};case 1:if(n.isValue){const{values:e,render:t}=n;return(a,r,i,o,s,l,c,p,d,h)=>{const m={value:""};t(m,e,s,c,l);const f=m.value;let y=f;u.call(i,f),a.push({render:(n,a,r,o)=>{const s={value:""};t(s,e,n,a,r);const l=s.value;y!==l&&(u.call(i,l),y=l)},type:1,key:n})}}if(!j)return n.isProperty?(e,t,a,r,i,o,s,l,c,p)=>{const d=i[n.originKey];let h=Z(d,n.properties);u.call(a,h),e.push({render:(e,t,r,i)=>{const o=e[n.originKey],s=Z(o,n.properties);h!==s&&(u.call(a,s),h=s)},type:1,key:n})}:(e,t,a,r,i,o,s,l,c,p)=>{let d=i[n.originKey];u.call(a,d),e.push({render:(e,t,r,i)=>{const o=e[n.originKey];d!==o&&(u.call(a,o),d=o)},type:1,key:n})};switch(n.originType){case 1:if(n.isProperty){if(1===n.properties?.length){const e=n.properties[0];return(t,a,r,i,o,s,l,c,p,d)=>{let h=o[e];u.call(r,h),t.push({render:(t,n,a,i)=>{const o=t[e];h!==o&&(u.call(r,o),h=o)},type:1,key:n})}}return(e,t,a,r,i,o,s,l,c,p)=>{let d=n.render(i);u.call(a,d),e.push({render:(e,t,r,i)=>{const o=n.render(e);d!==o&&(u.call(a,o),d=o)},type:1,key:n})}}return(e,t,a,r,i,o,s,l,c,p)=>{let d=i;u.call(a,d),e.push({render:(e,t,n,r)=>{const o=i;d!==o&&(u.call(a,o),d=o)},type:1,key:n})};case 2:return(e,t,a,r,i,o,s,l,c,p)=>{let d=n.render(s);u.call(a,d),e.push({render:(e,t,r,i)=>{const o=n.render(t);d!==o&&(u.call(a,o),d=o)},type:1,key:n})};case 3:return(e,t,a,r,i,o,s,l,c,p)=>{let d=o;u.call(a,d),e.push({render:(e,t,n,r)=>{const i=n;d!==i&&(u.call(a,i),d=i)},type:1,key:n})};default:return(e,t,a,r,i,o,s,l,c,p)=>{let d;u.call(a,d),e.push({render:(e,t,n,r)=>{const i=void 0;d!==i&&(u.call(a,i),d=i)},type:1,key:n})}}case 2:return(e,n,a,r,i,o,s,l,c,p)=>{const d=(e,i,o)=>{((e,n,a,r)=>{if(e&&a)if(Array.isArray(n.value)){const r=[...n.value],i=r[0].replace(t,((e,t)=>{const n=a({originKey:t,key:t,isValue:r[1],originType:0});return String(n)}));A.call(e,n.name)!==String(i)&&T.call(e,n.name,i)}else{const r=n.value.replace(t,((e,t)=>{const r=n.keys[t],i=a(r);return String(i)}));A.call(e,n.name)!==String(r)&&T.call(e,n.name,r)}})(a,n,(t=>r(t,e,i,o)))};d(i,s,o),e.push({render:d,...n})};case 3:return(e,t,n,r,i,o,s,l,c,p)=>{const d=n.getAttribute("data-cample"),u=t.value;if(u&&d){const e=((e,t,n,a,r)=>{if(e){const{getExportObject:i,renderExportObject:o,createExportObject:s,renderIndexesValue:l,renderImportString:c}=t,p=(e=>{const t={};return Object.entries(e).forEach((([n,a])=>{"data"===n?(t.data||(t.data={}),t.data=H(e.data)):"functions"===n?(t.functions||(t.functions={}),Object.entries(a).forEach((([e,n])=>{t.functions[e]=[...n]}))):S("Template data contains data or functions properties")})),t})(e[n]),d=i(a),u={data:{},functions:{}};let h;if(d){const e=o(r,d.data,p,u),t=i(a);t.data=e,h=t?.index}else s(a,r,p,u),h=a;if(d){const e=l(d.indexesData,r,u);d.indexesData=e}return c({...p},a,u,h)}S("TemplateExport is required")})(p,c,u,a,d);U(n,void 0,e)}else S("Render export error")};default:const{classes:r}=e,{value:i}=r;if(Array.isArray(i))return(e,t,n,a,r,i,o,s,l,c)=>{const{classes:p}=t,{value:d,render:u}=p,m=u(r,d,o,i);""!==m&&h.call(n,m),e.push({render:(e,t,a)=>{const r=u(e,d,t,a);n.className!==r&&h.call(n,r)},...t})};{const e=i.value;if(e.isValue){const{values:t,render:n}=e;return(e,a,r,i,o,s,l,c,p,d)=>{const u={value:""};n(u,t,o,l,s);const m=u.value;""!==m&&h.call(r,m),e.push({render:(e,a,i)=>{const o={value:""};n(o,t,e,a,i);const s=o.value;r.className!==s&&h.call(r,s)},...a})}}if(e.isValueSingle){const{valueSingle:t}=e,{condition:n,value:a}=t,{render:r}=n;return(e,t,n,i,o,s,l,c,p,d)=>{const u=n.classList,h=r(o,l,s);let m=!1;h&&(u.add(a),m=h),e.push({render:(e,t,n)=>{const i=r(e,t,n);m!==i&&(u.toggle(a),m=i)},...t})}}if(!j)return e.isProperty?(t,n,a,r,i,o,s,l,c,p)=>{const d=i[e.originKey],u=Z(d,e.properties);""!==u&&h.call(a,u),t.push({render:(t,n,r)=>{const i=t[e.originKey],o=Z(i,e.properties);a.className!==o&&h.call(a,o)},...n})}:(t,n,a,r,i,o,s,l,c,p)=>{const d=i[e.originKey];""!==d&&h.call(a,d),t.push({render:(t,n,r)=>{const i=t[e.originKey];a.className!==i&&h.call(a,i)},...n})};switch(e.originType){case 1:return(t,n,a,r,i,o,s,l,c,p)=>{const d=e.render(i);""!==d&&h.call(a,d),t.push({render:(t,n,r)=>{const i=e.render(t);a.className!==i&&h.call(a,i)},...n})};case 2:return(t,n,a,r,i,o,s,l,c,p)=>{const d=e.render(s);""!==d&&h.call(a,d),t.push({render:(t,n,r)=>{const i=e.render(n);a.className!==i&&h.call(a,i)},...n})};case 3:return(e,t,n,a,r,i,o,s,l,c)=>{const p=String(i);""!==p&&h.call(n,p),e.push({render:(e,t,a)=>{const r=String(i);n.className!==r&&h.call(n,r)},...t})};default:return(e,t,n,a,r,i,o,s,l,c)=>{const p=String(void 0);""!==p&&h.call(n,p),e.push({render:(e,t,a)=>{const r=String(void 0);n.className!==r&&h.call(n,r)},...t})}}}}},G=(e,t,n)=>{const{node:a}=e,r=void 0!==n,i=t.length;let o=r?n:function(){let e=this;for(let n=0;n<i;n++)e=t[n].call(e);return e};const{values:s}=a,l=s.length;if(0!==l)if(1===l){const e=s[0],a=Y(e);o=r?function(t,r,i,o,s,l,c,p){const d=n.call(this);return a(t,e,d,r,i,o,s,l,c,p),d}:function(n,r,o,s,l,c,p,d){let u=this;for(let e=0;e<i;e++)u=t[e].call(u);return a(n,e,u,r,o,s,l,c,p,d),u}}else{const e=s.map((e=>Y(e))),a=e.length;o=r?function(t,r,i,o,l,c,p,d){const u=n.call(this);for(let n=0;n<a;n++)(0,e[n])(t,s[n],u,r,i,o,l,c,p,d);return u}:function(n,r,o,l,c,p,d,u){let h=this;for(let e=0;e<i;e++)h=t[e].call(h);for(let t=0;t<a;t++)(0,e[t])(n,s[t],h,r,o,l,c,p,d,u);return h}}return o};for(let e=1;e<B.length;e++){const t=B[e],n=t.isNext?f:m,{dynamicNodes:a}=t;if(a){const e=t.id,r={rootId:z,id:e};if(K.length){y.call(K,n);const e=G(t,[...K]);r.render=e,K=[]}else r.render=G(t,[],n);y.call(M.nodes,r),z=z+X+1,X=a.length;for(let t=0;t<a.length;t++){const n=a[t],r=n.id;if(r!==e){const t={rootId:z,id:r},a=[],{path:i}=n.node;for(let r=i.length-1;r>=0;r--){const o=i[r];if(o.id===e){if(1!==a.length){const e=G(n,a);t.render=e}else t.render=G(n,[],a[0]);break}{const e=o.isNext?f:m;b.call(a,e)}}y.call(M.nodes,t)}else X--}}else K.push(n)}const{values:J}=R,Q=J.length;if(0!==Q)if(1===Q){const e=J[0],t=Y(e);M.render=function(n,a,r,i,o,s,l,c){t(n,e,this,a,r,i,o,s,l,c)}}else{const e=J.map((e=>Y(e))),t=e.length;M.render=function(n,a,r,i,o,s,l,c){for(let p=0;p<t;p++)(0,e[p])(n,J[p],this,a,r,i,o,s,l,c)}}return M.nodes.shift(),{obj:M}},Ee=(e,t)=>{let n;if(2===t.length){const a=t[1];if(e.hasOwnProperty(a)){const r=e[a];n=t[0].bind(void 0,r)}else S(`Function ${a} not found`)}else S("Data error");return n},De=(e,t,n=!1,a)=>{const r=a??(e=>{let t,n=!1,a=[];if(V(e)){const r=e;t=r.key,r.properties.length>0&&(n=!0,a=r.properties)}else t=e;return[t,n,a]})(L(t)),i=r[0],o=r[1],s=r[2],l=n?e:e?.[i];return o?Z(l,s):l};class Ae extends J{data;constructor(e,t,n={}){super(e,n),this.template=t,this.data=n.data}_getExport(e){return this.setExportData=e,this.exportObj}render(e,t,n,a="static"){const r=V(this.data);if(void 0===this.selector||r)S(r?"Data error":"Property 'selector' is required");else{const r=()=>{const e=this._dynamic.data.data.components.map((e=>e.nodes)).flat();for(const t of e)this._dynamic.dynamicNodes.push(t)},i=e=>{const t={data:{},functions:{}};for(const[n,a]of Object.entries(e))if("data"===n)t.data=H(e.data);else for(const[e,n]of Object.entries(a))t.functions[e]=[...n];return t},s=(e,t,n,a)=>{let r=a&&void 0!==n?{...n}:{...this.data};return t?r=(0,this.data)({importedData:e,currentData:n}):r?e&&(r=((e,t)=>{const n=e;if(r=t,"object"!=typeof(a=n)||Array.isArray(a)||null===a||"object"!=typeof r||Array.isArray(r)||null===r)S("Export data is object");else for(const[e,a]of Object.entries(t))n[e],n[e]=a;var a,r;return n})(r,e)):("ImportData replacing data",console.warn("ImportData replacing data"),r=e),r},c=(e,t,n)=>{const a={value:s(t,n),id:e},r=this._dynamic.data.data.values.length;return this._dynamic.data.data.values.push(a),this._dynamic.data.data.values[r]},p=()=>{r(),this._dynamic.dynamicNodes.forEach((e=>{const t=R(this._dynamic.data.data.values,e.dataId);for(const n of e.values)n.render(t,void 0,void 0,n)})),this._dynamic.dynamicNodes=[]},d=(e,t,n,a)=>{const r=()=>{try{p()}catch(e){this._dynamic.dynamicNodes=[],S("Error: Maximum render")}z(g,n,this.dataFunctions,a,!1)};if(void 0!==n){const a=this._dynamic.data.data.values.filter((e=>e?.id===n));if(a&&a[0]){const n=this._dynamic.data.data.values.indexOf(a[0]);if(n>-1){const a=this._dynamic.data.data.values[n],i=this._dynamic.data.data.values[n].value;if(V(a)&&i.hasOwnProperty(t)){i[t]=e,r();const a=f(n);u(a,n);const o=a.exportData;if(this.setExportData&&o)for(const[e,t]of Object.entries(o))this.setExportData(e,t,this.exportId,n)}}}}else this.data&&t&&this.data[t]&&(this.data[t]=e,r())},u=(e,t)=>{const{exportObject:n,dataFunctions:a}=e,r=n?.data,i=n?.constructor,o=n?.indexesData,s={};if(r&&i)for(const[e]of Object.entries(r))if(i?.hasOwnProperty(e)){const n=h({...i[e]},o?.[e],t,a);s[e]=n}else S("Export data render error");e.exportData=s},h=(e,t,n,a)=>{const r=i(e),o=e=>De(R(this._dynamic.data.data.values,n),e);for(const[e,n]of Object.entries(r))if("data"===e||"functions"===e)for(const[i,s]of Object.entries(n))if(Array.isArray(s))for(let n=0;n<s.length;n++){const l=s[n];if("data"===e){const a=t?.[e][i]&&t[e][i].indexOf(n)>-1;r[e][i][n]=a?o(l):l}else r[e][i][n]=Ee(a,l)}else S("Data error");return r},m=e=>{const t=f(e),n=t.dataFunctions,a=t.exportObject,r=a?.indexesData;let i,o={};const s=(e,t)=>{const n={data:{},functions:{}};Object.entries(e).forEach((([e,t])=>{"data"!==e&&"functions"!==e||Object.entries(t).forEach((([t,a])=>{n[e][t]=[...a]}))})),o.hasOwnProperty(t)?o[t]=n:o[t]={data:{},functions:{}},o[t]=n},l=this.export?.data;if(l&&!a){const e=l;Object.entries(e).forEach((([t,n])=>{Object.entries(n).forEach((([n,a])=>{e[t][n]=[a]}))})),i=e}else if(!l&&a){const t=a.data;t?(Object.entries(t).forEach((([a,i])=>{s({...i},a),t[a]=h({...i},r?.[a],e,n)})),i=t):i=void 0}else if(l&&a){const t=l;Object.entries(t).forEach((([i,o])=>{a.data[i]&&(s(a.data[i],i),t[i]=((e,t)=>{const n=e;return Object.entries(t).forEach((([e,t])=>{n.data.hasOwnProperty(e)||(n.data[e]=t)})),n})(h({...a.data[i]},r?.[i],e,n),o))})),a.data&&Object.entries(a.data).forEach((([a,i])=>{t.hasOwnProperty(a)||(s({...i},a),t[a]=h({...i},r?.[a],e,n))})),i=t}else o=void 0,i=void 0;if(f(e).exportData=i,a&&o&&(a.constructor=o),i)if(0===e){const e={};Object.entries(i).forEach((([t,n])=>{e[t]=[n]})),this.exportObj=e}else this.exportObj&&Object.entries(i).forEach((([e,t])=>{this.exportObj&&this.exportObj.hasOwnProperty(e)&&this.exportObj[e].push(t)}));else this.exportObj=i},f=e=>this._dynamic.data.data.components.filter((t=>t?.id===e))[0],y=(e,t)=>{const n=this._dynamic.data.data.values.filter((t=>t?.id===e));return n.length>1&&S("id is unique"),void 0!==e?n&&n[0]&&n[0].value?n[0].value[t]:void 0:this.data&&this.data[t]?this.data[t]:void 0},g=(e,t,n,a,r=!1)=>{const i=(e=y(n,t))=>e,o=f(a);o.dataFunctions.hasOwnProperty(e)&&r?S("Function name is unique"):o.dataFunctions[e]=(e=i)=>{d("function"==typeof e?e(y(n,t)):e,t,n,a)}},v=(e,t,n,a)=>{if(void 0!==this.script){const r=f(a),i=R(this._dynamic.data.data.values,a,!0);Array.isArray(this.script)?(this.script[1].start===t||void 0===this.script[1].start&&"afterLoad"===t)&&K(e,i,this.script,r?.dataFunctions,n):"afterLoad"===t&&K(e,i,this.script,r?.dataFunctions,n)}var r,i;void 0!==this.attributes&&(r=e,i=this.attributes,null!=r&&i&&Object.keys(i).forEach((e=>{r.setAttribute(e,i[e])})))},b=e=>this.exportDataObjects.length>0&&this.exportDataObjects[e]?this.exportDataObjects[e]:void 0,x=(e,t)=>{const n=((e,t,n)=>({id:e,dataFunctions:{},functions:{},nodes:[],exportData:void 0,import:n,exportObject:t}))(e,b(e),t);return this._dynamic.data.data.components.push(n),n},w=(e,t,n,a)=>{const r={};e.hasOwnProperty("data")&&(r.data=[]),e.hasOwnProperty("functions")&&(r.functions=[]),Object.entries(e).forEach((([e,t])=>{"data"!==e&&"functions"!==e||Object.entries(t).forEach((([t,a])=>{if(n&&n[e]&&n[e].hasOwnProperty(t)&&n[e][t]){const a=JSON.stringify([t,Array.isArray(n[e][t])?n[e][t][0]:n[e][t]]);r[e]?.push(a)}else r[e]?.push(t)}))}));const i={};Object.entries(r).forEach((([e,t])=>{i[e]=t.join(";")}));const o={import:JSON.stringify(i),exportId:this.exportId,index:t,importIndex:a};return JSON.stringify(o)},T=(e,t,n)=>{const a=e;return Object.entries(a).forEach((([e,r])=>{"data"===e||"functions"===e?Object.entries(r).forEach((([r,i])=>{const o=a[e][r].length;t[e]?.hasOwnProperty(r)?(a[e][r].push(t[e]?.[r]),n&&(n[e][r]=o)):(a[e][r].push(void 0),n&&"data"===e&&(n[e][r]=[o]))})):S("Template data contains data or functions properties")})),Object.entries(t).forEach((([e,t])=>{"data"===e||"functions"===e?Object.entries(t).forEach((([t,r])=>{a[e].hasOwnProperty(t)||(a[e][t]=[r],n&&(n[e][t]=0))})):S("Template data contains data or functions properties")})),a},k=(e,t,n,a)=>{if(t.hasOwnProperty(e)){const r=t;return r[e]=T(t[e],n,a),r}{const r=t;return r[e]={data:{},functions:{}},Object.entries(n).forEach((([t,n])=>{"data"===t||"functions"===t?Object.entries(n).forEach((([n,i])=>{r[e][t][n]=[i],a[t][n]=0})):S("Template data contains data or functions properties")})),r}},_=(e,t,n)=>{const a=e;return a.hasOwnProperty(t)?Object.entries(n).forEach((([e,n])=>{"data"===e||"functions"===e?Object.entries(n).forEach((([n,r])=>{a[t][e][n]?a[t][e][n].push(r):a[t][e][n]=[r]})):S("Template data contains data or functions properties")})):(a[t]={data:{},functions:{}},Object.entries(n).forEach((([e,n])=>{"data"===e||"functions"===e?Object.entries(n).forEach((([n,r])=>{a[t][e][n]=[r]})):S("Template data contains data or functions properties")}))),a},E=(e,t,n,a)=>{let r={},i={};t&&n&&a&&(r=k(t,{...r},n,a),i=_(i,t,a));const o={data:r,index:e,indexesData:i,constructor:{}};this.exportDataObjects.push(o)},D=(e,t)=>{const n=R(this._dynamic.data.data.values,t);return De(n,e)},A=(e,t,n)=>{const a=R(this._dynamic.data.data.values,e,!1),r=s(t,n,a?.value,!0);a||S("Render error");const i=this._dynamic.data.data.values.indexOf(a);this._dynamic.data.data.values[i].value=r},j=(e,t,n,a)=>a&&Object.keys(a).length&&e in a?a[e]:(()=>{const n=R(this._dynamic.data.data.values,t);return De(n,e)})(),N=(e,t,n)=>{A(e,t,n);try{p()}catch(e){S(`${e}`)}},O=e&&void 0===this.trimHTML||this.trimHTML;"dynamic"===a?this._dynamic.data.data.components.forEach((e=>{const n=e.id;void 0===n&&S("Index error");const a=e.import,r=void 0!==a?.importIndex?a.importIndex:0,i=X(null,t,a,r),o=this.data&&P(this.data);N(n,i,o)})):document.querySelectorAll(`template[data-cample=${this.selector}]`).forEach(((e,a)=>{const r=U(e,this.import);this.importId=((e,t)=>{if(e){if(e.hasAttribute("data-cample-import")){let n=e.getAttribute("data-cample-import");if(n){n=n.replace(o,"");const e=JSON.parse(n);return e&&e.exportId?e.exportId:t}return t}if(t)return t}return 0})(e,n);const i=X(e,t),s=this.data&&P(this.data);v(e,"beforeLoad",i,a);const p=[];p.push((e=>v(e,"afterLoad",i,a)));const d=this._dynamic.data.data.currentId,u=c(d,i,s)?.value,h=x(a,r),{obj:f}=_e([ae,re,ie,ne,oe,se,le,pe,de,ue,he,me],this.template,a,d,this.values,O,D,j,(()=>z(g,this._dynamic.data.data.currentId,this.dataFunctions,a,!0)),(()=>((e,t,n,a=!1)=>{for(const r in n)a&&t.hasOwnProperty(r)&&S("Function cannot be called the same as functionName"),e[r]=Ee(t,n[r])})(h.functions,h.dataFunctions,this.functions)),h.functions),y={getExportObject:b,renderExportObject:k,createExportObject:E,renderIndexesValue:_,renderImportString:w},{el:T,currentNode:A}=((e,t,n,a,r,i,o,s,l,c)=>{const{nodes:p,el:d,render:u}=r,h=d.cloneNode(!0),m=p.length,f=[];f.push(h);const y=[];void 0!==u&&u.call(h,y,e,t,i,o,s,l,c);for(let n=0;n<m;n++){const a=p[n],{render:r,rootId:d}=a;f.push(r.call(f[d],y,e,t,i,o,s,l,c))}return{el:h,currentNode:{index:n,values:y,dataId:a,el:h,key:s}}})(ee,u,a,d,f,void 0,void 0,void 0,y,this.export);A&&h.nodes.push(A),T?(h.exportObject=b(d),this._dynamic.data.data.currentId+=1):z(g,void 0,this.dataFunctions,a,!0),((e,t,n,a)=>{if(e instanceof HTMLTemplateElement){const r=e.content;t&&r&&l.call(e.content,t);const i=e.parentNode;if(r.childNodes.length>0){if(i)if(1===r.childNodes.length)if(r.childNodes[0].nodeType===Node.ELEMENT_NODE&&r.firstElementChild){i.insertBefore(r.firstElementChild,e);const t=e.previousElementSibling;i.removeChild(e),n.forEach(((e,n)=>e(t)))}else S("Component include only one node with type 'Element'");else S("Component include only one node with type 'Element'")}else switch(i&&i.removeChild(e),a){case"component":n[0](null);break;case"each":const t=e.previousSibling,a=e.nextSibling;i&&i.removeChild(e),n.forEach(((e,n)=>{0===n?e(i,t,a):e(null)}))}}else S("Element instanceof HTMLTemplateElement")})(e,T,p,"component"),m(a)}))}}}var je=n(370),Ne=n.n(je),Oe=new URL(n(525),n.b),Ce=new URL(n(631),n.b),Ie=Ne()(Oe),Me=Ne()(Ce);const Le=e=>{for(let t=0;t<e.length;t++)e[t].classList.add("active-link")},Se=new Ae("header-component",'<header id="header"> <div class="block"> <div class="header-block"> <div class="sidebar-button hidden-button active-button"> <img src="'+Ie+'" alt="sidebar"/> </div> <div class="logo"> <a href="/"> <img class="logo-image" src="'+Me+'" alt="logo"/> </a> </div> <ul class="menu"> <li class="menu-item"><a class="menu-link" href="/">Main page</a></li> <li class="menu-item"> <a class="menu-link" href="../documentation/introduction.html">Documentation</a> </li> <li class="menu-item"> <a class="menu-link" href="../examples.html">Examples</a> </li> <li class="menu-item"> <div class="divider"></div> <a class="social-media github-link" target="_blank" href="https://github.com/Camplejs/Cample.js"> <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" alt="github"> <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"> </path> </svg> </a> <a class="social-media twitter-link" target="_blank" href="https://twitter.com/Camplejs"> <svg width="35" height="32" viewBox="0 0 35 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M26.897 0H32.3288L20.4026 13.5793L34.3362 32H23.4018L14.841 20.8059L5.04022 32H-0.391519L12.2432 17.476L-1.10001 0H10.1059L17.8402 10.2258L26.897 0ZM24.9959 28.8118H28.007L8.52361 3.07011H5.28819L24.9959 28.8118Z" fill="black"/> </svg> </a> </li> </ul> <div class="header-button active-button"> <img src="'+Ie+'" alt="header"/> </div> </div> </div> <div class="header-block-mobile"> <div class="close"></div> <ul class="menu-mobile"> <li class="menu-item"><a class="menu-link" href="/">Main page</a></li> <li class="menu-item"> <a class="menu-link" href="../documentation/introduction.html">Documentation</a> </li> <li class="menu-item"> <a class="menu-link" href="../examples.html">Examples</a> </li> <li class="menu-item"> <a class="github-link" target="_blank" href="https://github.com/Camplejs/Cample.js"> <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true"> <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"> </path> </svg> </a> <a class="social-media twitter-link" target="_blank" href="https://twitter.com/Camplejs"> <svg width="35" height="32" viewBox="0 0 35 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d=" M26.897 0H32.3288L20.4026 13.5793L34.3362 32H23.4018L14.841 20.8059L5.04022 32H-0.391519L12.2432\n            17.476L-1.10001 0H10.1059L17.8402 10.2258L26.897 0ZM24.9959 28.8118H28.007L8.52361 3.07011H5.28819L24.9959\n            28.8118Z" fill="black"/> </svg> </a> </li> </ul> </div> </header>',{script:e=>{let{element:t}=e;const n=t.querySelector(".header-button"),a=t.querySelector(".header-block-mobile"),r=t.querySelector(".close");n.addEventListener("click",(()=>{n.classList.contains("active-button")?(n.classList.remove("active-button"),a.classList.add("active-header")):(n.classList.add("active-button"),a.classList.remove("active-header"))})),r.addEventListener("click",(()=>{n.classList.add("active-button"),a.classList.remove("active-header")}));const i=window.location.pathname.slice(1),o=t.querySelectorAll(".menu-link");if(i.includes("documentation")){const e=[o[1],o[4]];Le(e)}if(i.includes("examples")){const e=[o[2],o[5]];Le(e)}if(""===i){const e=[o[0],o[3]];Le(e)}}}),Fe=new Ae("footer-component",'<footer class="footer"> <div class="block"> <div class="info"> <div class="year_and_description"> Made using the <a href="https://www.npmjs.com/package/cample" target="_blank" rel="noopener noreferrer">Cample.js</a> framework. </div> <div class="copyright"> Framework licensed under <a href="https://github.com/Camplejs/Cample.js/blob/main/LICENSE">MIT License</a>. </div> <div class="date">Copyright © 2022-{{year}}</div> </div> </div> </footer> ',{data:()=>({year:(new Date).getFullYear()})});var Ve=new URL(n(278),n.b),He=new URL(n(142),n.b),Pe=new URL(n(428),n.b),$e=new URL(n(91),n.b),Re=new URL(n(559),n.b),qe=new URL(n(882),n.b);const Be='<div class="main_content"> <div class="introduction"> <div class="block"> <div class="introduction-content display-block"> <div class="first-block"> <h1 class="main-title"> Cample.js - one of the fastest frameworks without a virtual DOM on the Internet! </h1> <p class="subtitle"> Functional website building tool<br/> powered by component-approach! </p> <div class="buttons"> <template data-cample-import="{{{buttonData1}}}" data-cample="button-component"></template> <template data-cample-import="{{{buttonData2}}}" data-cample="button-component"></template> </div> </div> <div class="second-block"> <img class="introduction-img" src="'+Ne()(Ve)+'" alt="logo"/> </div> </div> </div> </div> <div class="content-block advantage"> <div class="block"> <h2 class="title advantage-title">Main advantage of the Cample.js</h2> <div class="diagram diagram-desktop"></div> <div class="diagram diagram-tablet1"></div> <div class="diagram diagram-tablet2"></div> <div class="diagram diagram-tablet3"></div> <div class="diagram diagram-tablet4"></div> <div class="diagram diagram-mobile1"></div> <div class="diagram diagram-mobile2"></div> <div class="diagram diagram-mobile3"></div> <div class="advantage-text"> Performance diagram of javascript frameworks and libraries.<br/> Results based on <a href="https://krausest.github.io/js-framework-benchmark/2024/table_chrome_123.0.6312.59.html" target="_blank" rel="noopener noreferrer">123 release</a> </div> </div> </div> <div class="content-block about"> <div class="block"> <h2 class="title about-title"> Why is the alpha version of Cample.js interesting for development </h2> <div class="features"> <div class="feature"> <div class="feature-wrapper-img"> <img class="feature-img" src="'+Ne()(He)+'" alt="feature1"/> </div> <h3 class="feature-title">Saves time</h3> <p class="feature-text"> Thanks to its features, the framework saves a lot of time when creating websites. </p> </div> <div class="feature"> <div class="feature-wrapper-img"> <img class="feature-img" src="'+Ne()(Pe)+'" alt="feature1"/> </div> <h3 class="feature-title">Easy to coding</h3> <p class="feature-text"> Syntax consists of instantiating objects, allowing easy and flexible creation of components </p> </div> <div class="feature"> <div class="feature-wrapper-img"> <img class="feature-img" src="'+Ne()($e)+'" alt="feature1"/> </div> <h3 class="feature-title">Functional</h3> <p class="feature-text"> Has a large amount of functionality necessary to create a complex website </p> </div> </div> </div> </div> <div class="content-block code"> <div class="block"> <h2 class="title code-title"> An example of how framework works (sometimes the code from a codepen does not load. Need to reload the page) </h2> <p class="codepen" data-height="500" data-theme-id="light" data-default-tab="js,result" data-slug-hash="rNrVjmp" data-editable="true" data-user="Camplejs" style="height:500px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:2px solid;margin:1em 0;padding:1em"> <span>See the Pen <a href="https://codepen.io/Camplejs/pen/rNrVjmp"> Reactivity</a> by Cample.js (<a href="https://codepen.io/Camplejs">@Camplejs</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> </div> </div> <div class="content-block typescript"> <div class="block"> <div class="typescript-content"> <img class="typescript-image" src="'+Ne()(Re)+'" alt="typescript"/> <p class="code-text"> The framework is typed. In a development environment using typescript, there is no need to download additional modules for it. </p> </div> </div> </div> <div class="content-block documentation"> <div class="block"> <div class="documentation-content display-block"> <div class="first-block"> <h2 class="documentation-title"> Also, more details about the framework are written in the documentation, which is constantly updated. </h2> <div class="documentation-button"> <template data-cample-import="{{{buttonData3}}}" data-cample="button-component"></template> </div> </div> <div class="second-block"> <img class="documentation-img" src="'+Ne()(qe)+'" alt="documentation"/> </div> </div> </div> </div> <div class="content-block npm"> <div class="block"> <h2 class="title npm-title">Try Cample.js</h2> <p class="npm-subtitle subtitle center"> The framework is available in the node package manager and has its own cli for installing the application </p> <code class="npm-code"><span class="terminal">&gt;</span>npx cample-start</code> </div> </div> </div> ';function Ke(e,t){let n;if(void 0===t)for(const t of e)null!=t&&(n<t||void 0===n&&t>=t)&&(n=t);else{let a=-1;for(let r of e)null!=(r=t(r,++a,e))&&(n<r||void 0===n&&r>=r)&&(n=r)}return n}function ze(e){return e}var Xe=1e-6;function Ue(e){return"translate("+e+",0)"}function Ye(e){return"translate(0,"+e+")"}function Ge(e){return t=>+e(t)}function Je(e,t){return t=Math.max(0,e.bandwidth()-2*t)/2,e.round()&&(t=Math.round(t)),n=>+e(n)+t}function We(){return!this.__axis}function Ze(e,t){var n=[],a=null,r=null,i=6,o=6,s=3,l="undefined"!=typeof window&&window.devicePixelRatio>1?0:.5,c=1===e||4===e?-1:1,p=4===e||2===e?"x":"y",d=1===e||3===e?Ue:Ye;function u(u){var h=null==a?t.ticks?t.ticks.apply(t,n):t.domain():a,m=null==r?t.tickFormat?t.tickFormat.apply(t,n):ze:r,f=Math.max(i,0)+s,y=t.range(),g=+y[0]+l,v=+y[y.length-1]+l,b=(t.bandwidth?Je:Ge)(t.copy(),l),x=u.selection?u.selection():u,w=x.selectAll(".domain").data([null]),T=x.selectAll(".tick").data(h,t).order(),k=T.exit(),_=T.enter().append("g").attr("class","tick"),E=T.select("line"),D=T.select("text");w=w.merge(w.enter().insert("path",".tick").attr("class","domain").attr("stroke","currentColor")),T=T.merge(_),E=E.merge(_.append("line").attr("stroke","currentColor").attr(p+"2",c*i)),D=D.merge(_.append("text").attr("fill","currentColor").attr(p,c*f).attr("dy",1===e?"0em":3===e?"0.71em":"0.32em")),u!==x&&(w=w.transition(u),T=T.transition(u),E=E.transition(u),D=D.transition(u),k=k.transition(u).attr("opacity",Xe).attr("transform",(function(e){return isFinite(e=b(e))?d(e+l):this.getAttribute("transform")})),_.attr("opacity",Xe).attr("transform",(function(e){var t=this.parentNode.__axis;return d((t&&isFinite(t=t(e))?t:b(e))+l)}))),k.remove(),w.attr("d",4===e||2===e?o?"M"+c*o+","+g+"H"+l+"V"+v+"H"+c*o:"M"+l+","+g+"V"+v:o?"M"+g+","+c*o+"V"+l+"H"+v+"V"+c*o:"M"+g+","+l+"H"+v),T.attr("opacity",1).attr("transform",(function(e){return d(b(e)+l)})),E.attr(p+"2",c*i),D.attr(p,c*f).text(m),x.filter(We).attr("fill","none").attr("font-size",10).attr("font-family","sans-serif").attr("text-anchor",2===e?"start":4===e?"end":"middle"),x.each((function(){this.__axis=b}))}return u.scale=function(e){return arguments.length?(t=e,u):t},u.ticks=function(){return n=Array.from(arguments),u},u.tickArguments=function(e){return arguments.length?(n=null==e?[]:Array.from(e),u):n.slice()},u.tickValues=function(e){return arguments.length?(a=null==e?null:Array.from(e),u):a&&a.slice()},u.tickFormat=function(e){return arguments.length?(r=e,u):r},u.tickSize=function(e){return arguments.length?(i=o=+e,u):i},u.tickSizeInner=function(e){return arguments.length?(i=+e,u):i},u.tickSizeOuter=function(e){return arguments.length?(o=+e,u):o},u.tickPadding=function(e){return arguments.length?(s=+e,u):s},u.offset=function(e){return arguments.length?(l=+e,u):l},u}function Qe(){}function et(e){return null==e?Qe:function(){return this.querySelector(e)}}function tt(){return[]}function nt(e){return null==e?tt:function(){return this.querySelectorAll(e)}}function at(e){return function(){return this.matches(e)}}function rt(e){return function(t){return t.matches(e)}}var it=Array.prototype.find;function ot(){return this.firstElementChild}var st=Array.prototype.filter;function lt(){return Array.from(this.children)}function ct(e){return new Array(e.length)}function pt(e,t){this.ownerDocument=e.ownerDocument,this.namespaceURI=e.namespaceURI,this._next=null,this._parent=e,this.__data__=t}function dt(e,t,n,a,r,i){for(var o,s=0,l=t.length,c=i.length;s<c;++s)(o=t[s])?(o.__data__=i[s],a[s]=o):n[s]=new pt(e,i[s]);for(;s<l;++s)(o=t[s])&&(r[s]=o)}function ut(e,t,n,a,r,i,o){var s,l,c,p=new Map,d=t.length,u=i.length,h=new Array(d);for(s=0;s<d;++s)(l=t[s])&&(h[s]=c=o.call(l,l.__data__,s,t)+"",p.has(c)?r[s]=l:p.set(c,l));for(s=0;s<u;++s)c=o.call(e,i[s],s,i)+"",(l=p.get(c))?(a[s]=l,l.__data__=i[s],p.delete(c)):n[s]=new pt(e,i[s]);for(s=0;s<d;++s)(l=t[s])&&p.get(h[s])===l&&(r[s]=l)}function ht(e){return e.__data__}function mt(e){return"object"==typeof e&&"length"in e?e:Array.from(e)}function ft(e,t){return e<t?-1:e>t?1:e>=t?0:NaN}pt.prototype={constructor:pt,appendChild:function(e){return this._parent.insertBefore(e,this._next)},insertBefore:function(e,t){return this._parent.insertBefore(e,t)},querySelector:function(e){return this._parent.querySelector(e)},querySelectorAll:function(e){return this._parent.querySelectorAll(e)}};var yt="http://www.w3.org/1999/xhtml";const gt={svg:"http://www.w3.org/2000/svg",xhtml:yt,xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"};function vt(e){var t=e+="",n=t.indexOf(":");return n>=0&&"xmlns"!==(t=e.slice(0,n))&&(e=e.slice(n+1)),gt.hasOwnProperty(t)?{space:gt[t],local:e}:e}function bt(e){return function(){this.removeAttribute(e)}}function xt(e){return function(){this.removeAttributeNS(e.space,e.local)}}function wt(e,t){return function(){this.setAttribute(e,t)}}function Tt(e,t){return function(){this.setAttributeNS(e.space,e.local,t)}}function kt(e,t){return function(){var n=t.apply(this,arguments);null==n?this.removeAttribute(e):this.setAttribute(e,n)}}function _t(e,t){return function(){var n=t.apply(this,arguments);null==n?this.removeAttributeNS(e.space,e.local):this.setAttributeNS(e.space,e.local,n)}}function Et(e){return e.ownerDocument&&e.ownerDocument.defaultView||e.document&&e||e.defaultView}function Dt(e){return function(){this.style.removeProperty(e)}}function At(e,t,n){return function(){this.style.setProperty(e,t,n)}}function jt(e,t,n){return function(){var a=t.apply(this,arguments);null==a?this.style.removeProperty(e):this.style.setProperty(e,a,n)}}function Nt(e,t){return e.style.getPropertyValue(t)||Et(e).getComputedStyle(e,null).getPropertyValue(t)}function Ot(e){return function(){delete this[e]}}function Ct(e,t){return function(){this[e]=t}}function It(e,t){return function(){var n=t.apply(this,arguments);null==n?delete this[e]:this[e]=n}}function Mt(e){return e.trim().split(/^|\s+/)}function Lt(e){return e.classList||new St(e)}function St(e){this._node=e,this._names=Mt(e.getAttribute("class")||"")}function Ft(e,t){for(var n=Lt(e),a=-1,r=t.length;++a<r;)n.add(t[a])}function Vt(e,t){for(var n=Lt(e),a=-1,r=t.length;++a<r;)n.remove(t[a])}function Ht(e){return function(){Ft(this,e)}}function Pt(e){return function(){Vt(this,e)}}function $t(e,t){return function(){(t.apply(this,arguments)?Ft:Vt)(this,e)}}function Rt(){this.textContent=""}function qt(e){return function(){this.textContent=e}}function Bt(e){return function(){var t=e.apply(this,arguments);this.textContent=null==t?"":t}}function Kt(){this.innerHTML=""}function zt(e){return function(){this.innerHTML=e}}function Xt(e){return function(){var t=e.apply(this,arguments);this.innerHTML=null==t?"":t}}function Ut(){this.nextSibling&&this.parentNode.appendChild(this)}function Yt(){this.previousSibling&&this.parentNode.insertBefore(this,this.parentNode.firstChild)}function Gt(e){return function(){var t=this.ownerDocument,n=this.namespaceURI;return n===yt&&t.documentElement.namespaceURI===yt?t.createElement(e):t.createElementNS(n,e)}}function Jt(e){return function(){return this.ownerDocument.createElementNS(e.space,e.local)}}function Wt(e){var t=vt(e);return(t.local?Jt:Gt)(t)}function Zt(){return null}function Qt(){var e=this.parentNode;e&&e.removeChild(this)}function en(){var e=this.cloneNode(!1),t=this.parentNode;return t?t.insertBefore(e,this.nextSibling):e}function tn(){var e=this.cloneNode(!0),t=this.parentNode;return t?t.insertBefore(e,this.nextSibling):e}function nn(e){return function(){var t=this.__on;if(t){for(var n,a=0,r=-1,i=t.length;a<i;++a)n=t[a],e.type&&n.type!==e.type||n.name!==e.name?t[++r]=n:this.removeEventListener(n.type,n.listener,n.options);++r?t.length=r:delete this.__on}}}function an(e,t,n){return function(){var a,r=this.__on,i=function(e){return function(t){e.call(this,t,this.__data__)}}(t);if(r)for(var o=0,s=r.length;o<s;++o)if((a=r[o]).type===e.type&&a.name===e.name)return this.removeEventListener(a.type,a.listener,a.options),this.addEventListener(a.type,a.listener=i,a.options=n),void(a.value=t);this.addEventListener(e.type,i,n),a={type:e.type,name:e.name,value:t,listener:i,options:n},r?r.push(a):this.__on=[a]}}function rn(e,t,n){var a=Et(e),r=a.CustomEvent;"function"==typeof r?r=new r(t,n):(r=a.document.createEvent("Event"),n?(r.initEvent(t,n.bubbles,n.cancelable),r.detail=n.detail):r.initEvent(t,!1,!1)),e.dispatchEvent(r)}function on(e,t){return function(){return rn(this,e,t)}}function sn(e,t){return function(){return rn(this,e,t.apply(this,arguments))}}St.prototype={add:function(e){this._names.indexOf(e)<0&&(this._names.push(e),this._node.setAttribute("class",this._names.join(" ")))},remove:function(e){var t=this._names.indexOf(e);t>=0&&(this._names.splice(t,1),this._node.setAttribute("class",this._names.join(" ")))},contains:function(e){return this._names.indexOf(e)>=0}};var ln=[null];function cn(e,t){this._groups=e,this._parents=t}function pn(){return new cn([[document.documentElement]],ln)}cn.prototype=pn.prototype={constructor:cn,select:function(e){"function"!=typeof e&&(e=et(e));for(var t=this._groups,n=t.length,a=new Array(n),r=0;r<n;++r)for(var i,o,s=t[r],l=s.length,c=a[r]=new Array(l),p=0;p<l;++p)(i=s[p])&&(o=e.call(i,i.__data__,p,s))&&("__data__"in i&&(o.__data__=i.__data__),c[p]=o);return new cn(a,this._parents)},selectAll:function(e){e="function"==typeof e?function(e){return function(){return null==(t=e.apply(this,arguments))?[]:Array.isArray(t)?t:Array.from(t);var t}}(e):nt(e);for(var t=this._groups,n=t.length,a=[],r=[],i=0;i<n;++i)for(var o,s=t[i],l=s.length,c=0;c<l;++c)(o=s[c])&&(a.push(e.call(o,o.__data__,c,s)),r.push(o));return new cn(a,r)},selectChild:function(e){return this.select(null==e?ot:function(e){return function(){return it.call(this.children,e)}}("function"==typeof e?e:rt(e)))},selectChildren:function(e){return this.selectAll(null==e?lt:function(e){return function(){return st.call(this.children,e)}}("function"==typeof e?e:rt(e)))},filter:function(e){"function"!=typeof e&&(e=at(e));for(var t=this._groups,n=t.length,a=new Array(n),r=0;r<n;++r)for(var i,o=t[r],s=o.length,l=a[r]=[],c=0;c<s;++c)(i=o[c])&&e.call(i,i.__data__,c,o)&&l.push(i);return new cn(a,this._parents)},data:function(e,t){if(!arguments.length)return Array.from(this,ht);var n,a=t?ut:dt,r=this._parents,i=this._groups;"function"!=typeof e&&(n=e,e=function(){return n});for(var o=i.length,s=new Array(o),l=new Array(o),c=new Array(o),p=0;p<o;++p){var d=r[p],u=i[p],h=u.length,m=mt(e.call(d,d&&d.__data__,p,r)),f=m.length,y=l[p]=new Array(f),g=s[p]=new Array(f);a(d,u,y,g,c[p]=new Array(h),m,t);for(var v,b,x=0,w=0;x<f;++x)if(v=y[x]){for(x>=w&&(w=x+1);!(b=g[w])&&++w<f;);v._next=b||null}}return(s=new cn(s,r))._enter=l,s._exit=c,s},enter:function(){return new cn(this._enter||this._groups.map(ct),this._parents)},exit:function(){return new cn(this._exit||this._groups.map(ct),this._parents)},join:function(e,t,n){var a=this.enter(),r=this,i=this.exit();return"function"==typeof e?(a=e(a))&&(a=a.selection()):a=a.append(e+""),null!=t&&(r=t(r))&&(r=r.selection()),null==n?i.remove():n(i),a&&r?a.merge(r).order():r},merge:function(e){for(var t=e.selection?e.selection():e,n=this._groups,a=t._groups,r=n.length,i=a.length,o=Math.min(r,i),s=new Array(r),l=0;l<o;++l)for(var c,p=n[l],d=a[l],u=p.length,h=s[l]=new Array(u),m=0;m<u;++m)(c=p[m]||d[m])&&(h[m]=c);for(;l<r;++l)s[l]=n[l];return new cn(s,this._parents)},selection:function(){return this},order:function(){for(var e=this._groups,t=-1,n=e.length;++t<n;)for(var a,r=e[t],i=r.length-1,o=r[i];--i>=0;)(a=r[i])&&(o&&4^a.compareDocumentPosition(o)&&o.parentNode.insertBefore(a,o),o=a);return this},sort:function(e){function t(t,n){return t&&n?e(t.__data__,n.__data__):!t-!n}e||(e=ft);for(var n=this._groups,a=n.length,r=new Array(a),i=0;i<a;++i){for(var o,s=n[i],l=s.length,c=r[i]=new Array(l),p=0;p<l;++p)(o=s[p])&&(c[p]=o);c.sort(t)}return new cn(r,this._parents).order()},call:function(){var e=arguments[0];return arguments[0]=this,e.apply(null,arguments),this},nodes:function(){return Array.from(this)},node:function(){for(var e=this._groups,t=0,n=e.length;t<n;++t)for(var a=e[t],r=0,i=a.length;r<i;++r){var o=a[r];if(o)return o}return null},size:function(){let e=0;for(const t of this)++e;return e},empty:function(){return!this.node()},each:function(e){for(var t=this._groups,n=0,a=t.length;n<a;++n)for(var r,i=t[n],o=0,s=i.length;o<s;++o)(r=i[o])&&e.call(r,r.__data__,o,i);return this},attr:function(e,t){var n=vt(e);if(arguments.length<2){var a=this.node();return n.local?a.getAttributeNS(n.space,n.local):a.getAttribute(n)}return this.each((null==t?n.local?xt:bt:"function"==typeof t?n.local?_t:kt:n.local?Tt:wt)(n,t))},style:function(e,t,n){return arguments.length>1?this.each((null==t?Dt:"function"==typeof t?jt:At)(e,t,null==n?"":n)):Nt(this.node(),e)},property:function(e,t){return arguments.length>1?this.each((null==t?Ot:"function"==typeof t?It:Ct)(e,t)):this.node()[e]},classed:function(e,t){var n=Mt(e+"");if(arguments.length<2){for(var a=Lt(this.node()),r=-1,i=n.length;++r<i;)if(!a.contains(n[r]))return!1;return!0}return this.each(("function"==typeof t?$t:t?Ht:Pt)(n,t))},text:function(e){return arguments.length?this.each(null==e?Rt:("function"==typeof e?Bt:qt)(e)):this.node().textContent},html:function(e){return arguments.length?this.each(null==e?Kt:("function"==typeof e?Xt:zt)(e)):this.node().innerHTML},raise:function(){return this.each(Ut)},lower:function(){return this.each(Yt)},append:function(e){var t="function"==typeof e?e:Wt(e);return this.select((function(){return this.appendChild(t.apply(this,arguments))}))},insert:function(e,t){var n="function"==typeof e?e:Wt(e),a=null==t?Zt:"function"==typeof t?t:et(t);return this.select((function(){return this.insertBefore(n.apply(this,arguments),a.apply(this,arguments)||null)}))},remove:function(){return this.each(Qt)},clone:function(e){return this.select(e?tn:en)},datum:function(e){return arguments.length?this.property("__data__",e):this.node().__data__},on:function(e,t,n){var a,r,i=function(e){return e.trim().split(/^|\s+/).map((function(e){var t="",n=e.indexOf(".");return n>=0&&(t=e.slice(n+1),e=e.slice(0,n)),{type:e,name:t}}))}(e+""),o=i.length;if(!(arguments.length<2)){for(s=t?an:nn,a=0;a<o;++a)this.each(s(i[a],t,n));return this}var s=this.node().__on;if(s)for(var l,c=0,p=s.length;c<p;++c)for(a=0,l=s[c];a<o;++a)if((r=i[a]).type===l.type&&r.name===l.name)return l.value},dispatch:function(e,t){return this.each(("function"==typeof t?sn:on)(e,t))},[Symbol.iterator]:function*(){for(var e=this._groups,t=0,n=e.length;t<n;++t)for(var a,r=e[t],i=0,o=r.length;i<o;++i)(a=r[i])&&(yield a)}};const dn=pn;var un={value:()=>{}};function hn(){for(var e,t=0,n=arguments.length,a={};t<n;++t){if(!(e=arguments[t]+"")||e in a||/[\s.]/.test(e))throw new Error("illegal type: "+e);a[e]=[]}return new mn(a)}function mn(e){this._=e}function fn(e,t){for(var n,a=0,r=e.length;a<r;++a)if((n=e[a]).name===t)return n.value}function yn(e,t,n){for(var a=0,r=e.length;a<r;++a)if(e[a].name===t){e[a]=un,e=e.slice(0,a).concat(e.slice(a+1));break}return null!=n&&e.push({name:t,value:n}),e}mn.prototype=hn.prototype={constructor:mn,on:function(e,t){var n,a,r=this._,i=(a=r,(e+"").trim().split(/^|\s+/).map((function(e){var t="",n=e.indexOf(".");if(n>=0&&(t=e.slice(n+1),e=e.slice(0,n)),e&&!a.hasOwnProperty(e))throw new Error("unknown type: "+e);return{type:e,name:t}}))),o=-1,s=i.length;if(!(arguments.length<2)){if(null!=t&&"function"!=typeof t)throw new Error("invalid callback: "+t);for(;++o<s;)if(n=(e=i[o]).type)r[n]=yn(r[n],e.name,t);else if(null==t)for(n in r)r[n]=yn(r[n],e.name,null);return this}for(;++o<s;)if((n=(e=i[o]).type)&&(n=fn(r[n],e.name)))return n},copy:function(){var e={},t=this._;for(var n in t)e[n]=t[n].slice();return new mn(e)},call:function(e,t){if((n=arguments.length-2)>0)for(var n,a,r=new Array(n),i=0;i<n;++i)r[i]=arguments[i+2];if(!this._.hasOwnProperty(e))throw new Error("unknown type: "+e);for(i=0,n=(a=this._[e]).length;i<n;++i)a[i].value.apply(t,r)},apply:function(e,t,n){if(!this._.hasOwnProperty(e))throw new Error("unknown type: "+e);for(var a=this._[e],r=0,i=a.length;r<i;++r)a[r].value.apply(t,n)}};const gn=hn;var vn,bn,xn=0,wn=0,Tn=0,kn=1e3,_n=0,En=0,Dn=0,An="object"==typeof performance&&performance.now?performance:Date,jn="object"==typeof window&&window.requestAnimationFrame?window.requestAnimationFrame.bind(window):function(e){setTimeout(e,17)};function Nn(){return En||(jn(On),En=An.now()+Dn)}function On(){En=0}function Cn(){this._call=this._time=this._next=null}function In(e,t,n){var a=new Cn;return a.restart(e,t,n),a}function Mn(){En=(_n=An.now())+Dn,xn=wn=0;try{!function(){Nn(),++xn;for(var e,t=vn;t;)(e=En-t._time)>=0&&t._call.call(void 0,e),t=t._next;--xn}()}finally{xn=0,function(){for(var e,t,n=vn,a=1/0;n;)n._call?(a>n._time&&(a=n._time),e=n,n=n._next):(t=n._next,n._next=null,n=e?e._next=t:vn=t);bn=e,Sn(a)}(),En=0}}function Ln(){var e=An.now(),t=e-_n;t>kn&&(Dn-=t,_n=e)}function Sn(e){xn||(wn&&(wn=clearTimeout(wn)),e-En>24?(e<1/0&&(wn=setTimeout(Mn,e-An.now()-Dn)),Tn&&(Tn=clearInterval(Tn))):(Tn||(_n=An.now(),Tn=setInterval(Ln,kn)),xn=1,jn(Mn)))}function Fn(e,t,n){var a=new Cn;return t=null==t?0:+t,a.restart((n=>{a.stop(),e(n+t)}),t,n),a}Cn.prototype=In.prototype={constructor:Cn,restart:function(e,t,n){if("function"!=typeof e)throw new TypeError("callback is not a function");n=(null==n?Nn():+n)+(null==t?0:+t),this._next||bn===this||(bn?bn._next=this:vn=this,bn=this),this._call=e,this._time=n,Sn()},stop:function(){this._call&&(this._call=null,this._time=1/0,Sn())}};var Vn=gn("start","end","cancel","interrupt"),Hn=[],Pn=0,$n=3;function Rn(e,t,n,a,r,i){var o=e.__transition;if(o){if(n in o)return}else e.__transition={};!function(e,t,n){var a,r=e.__transition;function i(l){var c,p,d,u;if(1!==n.state)return s();for(c in r)if((u=r[c]).name===n.name){if(u.state===$n)return Fn(i);4===u.state?(u.state=6,u.timer.stop(),u.on.call("interrupt",e,e.__data__,u.index,u.group),delete r[c]):+c<t&&(u.state=6,u.timer.stop(),u.on.call("cancel",e,e.__data__,u.index,u.group),delete r[c])}if(Fn((function(){n.state===$n&&(n.state=4,n.timer.restart(o,n.delay,n.time),o(l))})),n.state=2,n.on.call("start",e,e.__data__,n.index,n.group),2===n.state){for(n.state=$n,a=new Array(d=n.tween.length),c=0,p=-1;c<d;++c)(u=n.tween[c].value.call(e,e.__data__,n.index,n.group))&&(a[++p]=u);a.length=p+1}}function o(t){for(var r=t<n.duration?n.ease.call(null,t/n.duration):(n.timer.restart(s),n.state=5,1),i=-1,o=a.length;++i<o;)a[i].call(e,r);5===n.state&&(n.on.call("end",e,e.__data__,n.index,n.group),s())}function s(){for(var a in n.state=6,n.timer.stop(),delete r[t],r)return;delete e.__transition}r[t]=n,n.timer=In((function(e){n.state=1,n.timer.restart(i,n.delay,n.time),n.delay<=e&&i(e-n.delay)}),0,n.time)}(e,n,{name:t,index:a,group:r,on:Vn,tween:Hn,time:i.time,delay:i.delay,duration:i.duration,ease:i.ease,timer:null,state:Pn})}function qn(e,t){var n=Kn(e,t);if(n.state>Pn)throw new Error("too late; already scheduled");return n}function Bn(e,t){var n=Kn(e,t);if(n.state>$n)throw new Error("too late; already running");return n}function Kn(e,t){var n=e.__transition;if(!n||!(n=n[t]))throw new Error("transition not found");return n}function zn(e,t){return e=+e,t=+t,function(n){return e*(1-n)+t*n}}var Xn,Un=180/Math.PI,Yn={translateX:0,translateY:0,rotate:0,skewX:0,scaleX:1,scaleY:1};function Gn(e,t,n,a,r,i){var o,s,l;return(o=Math.sqrt(e*e+t*t))&&(e/=o,t/=o),(l=e*n+t*a)&&(n-=e*l,a-=t*l),(s=Math.sqrt(n*n+a*a))&&(n/=s,a/=s,l/=s),e*a<t*n&&(e=-e,t=-t,l=-l,o=-o),{translateX:r,translateY:i,rotate:Math.atan2(t,e)*Un,skewX:Math.atan(l)*Un,scaleX:o,scaleY:s}}function Jn(e,t,n,a){function r(e){return e.length?e.pop()+" ":""}return function(i,o){var s=[],l=[];return i=e(i),o=e(o),function(e,a,r,i,o,s){if(e!==r||a!==i){var l=o.push("translate(",null,t,null,n);s.push({i:l-4,x:zn(e,r)},{i:l-2,x:zn(a,i)})}else(r||i)&&o.push("translate("+r+t+i+n)}(i.translateX,i.translateY,o.translateX,o.translateY,s,l),function(e,t,n,i){e!==t?(e-t>180?t+=360:t-e>180&&(e+=360),i.push({i:n.push(r(n)+"rotate(",null,a)-2,x:zn(e,t)})):t&&n.push(r(n)+"rotate("+t+a)}(i.rotate,o.rotate,s,l),function(e,t,n,i){e!==t?i.push({i:n.push(r(n)+"skewX(",null,a)-2,x:zn(e,t)}):t&&n.push(r(n)+"skewX("+t+a)}(i.skewX,o.skewX,s,l),function(e,t,n,a,i,o){if(e!==n||t!==a){var s=i.push(r(i)+"scale(",null,",",null,")");o.push({i:s-4,x:zn(e,n)},{i:s-2,x:zn(t,a)})}else 1===n&&1===a||i.push(r(i)+"scale("+n+","+a+")")}(i.scaleX,i.scaleY,o.scaleX,o.scaleY,s,l),i=o=null,function(e){for(var t,n=-1,a=l.length;++n<a;)s[(t=l[n]).i]=t.x(e);return s.join("")}}}var Wn=Jn((function(e){const t=new("function"==typeof DOMMatrix?DOMMatrix:WebKitCSSMatrix)(e+"");return t.isIdentity?Yn:Gn(t.a,t.b,t.c,t.d,t.e,t.f)}),"px, ","px)","deg)"),Zn=Jn((function(e){return null==e?Yn:(Xn||(Xn=document.createElementNS("http://www.w3.org/2000/svg","g")),Xn.setAttribute("transform",e),(e=Xn.transform.baseVal.consolidate())?Gn((e=e.matrix).a,e.b,e.c,e.d,e.e,e.f):Yn)}),", ",")",")");function Qn(e,t){var n,a;return function(){var r=Bn(this,e),i=r.tween;if(i!==n)for(var o=0,s=(a=n=i).length;o<s;++o)if(a[o].name===t){(a=a.slice()).splice(o,1);break}r.tween=a}}function ea(e,t,n){var a,r;if("function"!=typeof n)throw new Error;return function(){var i=Bn(this,e),o=i.tween;if(o!==a){r=(a=o).slice();for(var s={name:t,value:n},l=0,c=r.length;l<c;++l)if(r[l].name===t){r[l]=s;break}l===c&&r.push(s)}i.tween=r}}function ta(e,t,n){var a=e._id;return e.each((function(){var e=Bn(this,a);(e.value||(e.value={}))[t]=n.apply(this,arguments)})),function(e){return Kn(e,a).value[t]}}function na(e,t,n){e.prototype=t.prototype=n,n.constructor=e}function aa(e,t){var n=Object.create(e.prototype);for(var a in t)n[a]=t[a];return n}function ra(){}var ia=.7,oa=1/ia,sa="\\s*([+-]?\\d+)\\s*",la="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",ca="\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",pa=/^#([0-9a-f]{3,8})$/,da=new RegExp(`^rgb\\(${sa},${sa},${sa}\\)$`),ua=new RegExp(`^rgb\\(${ca},${ca},${ca}\\)$`),ha=new RegExp(`^rgba\\(${sa},${sa},${sa},${la}\\)$`),ma=new RegExp(`^rgba\\(${ca},${ca},${ca},${la}\\)$`),fa=new RegExp(`^hsl\\(${la},${ca},${ca}\\)$`),ya=new RegExp(`^hsla\\(${la},${ca},${ca},${la}\\)$`),ga={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};function va(){return this.rgb().formatHex()}function ba(){return this.rgb().formatRgb()}function xa(e){var t,n;return e=(e+"").trim().toLowerCase(),(t=pa.exec(e))?(n=t[1].length,t=parseInt(t[1],16),6===n?wa(t):3===n?new _a(t>>8&15|t>>4&240,t>>4&15|240&t,(15&t)<<4|15&t,1):8===n?Ta(t>>24&255,t>>16&255,t>>8&255,(255&t)/255):4===n?Ta(t>>12&15|t>>8&240,t>>8&15|t>>4&240,t>>4&15|240&t,((15&t)<<4|15&t)/255):null):(t=da.exec(e))?new _a(t[1],t[2],t[3],1):(t=ua.exec(e))?new _a(255*t[1]/100,255*t[2]/100,255*t[3]/100,1):(t=ha.exec(e))?Ta(t[1],t[2],t[3],t[4]):(t=ma.exec(e))?Ta(255*t[1]/100,255*t[2]/100,255*t[3]/100,t[4]):(t=fa.exec(e))?Oa(t[1],t[2]/100,t[3]/100,1):(t=ya.exec(e))?Oa(t[1],t[2]/100,t[3]/100,t[4]):ga.hasOwnProperty(e)?wa(ga[e]):"transparent"===e?new _a(NaN,NaN,NaN,0):null}function wa(e){return new _a(e>>16&255,e>>8&255,255&e,1)}function Ta(e,t,n,a){return a<=0&&(e=t=n=NaN),new _a(e,t,n,a)}function ka(e,t,n,a){return 1===arguments.length?((r=e)instanceof ra||(r=xa(r)),r?new _a((r=r.rgb()).r,r.g,r.b,r.opacity):new _a):new _a(e,t,n,null==a?1:a);var r}function _a(e,t,n,a){this.r=+e,this.g=+t,this.b=+n,this.opacity=+a}function Ea(){return`#${Na(this.r)}${Na(this.g)}${Na(this.b)}`}function Da(){const e=Aa(this.opacity);return`${1===e?"rgb(":"rgba("}${ja(this.r)}, ${ja(this.g)}, ${ja(this.b)}${1===e?")":`, ${e})`}`}function Aa(e){return isNaN(e)?1:Math.max(0,Math.min(1,e))}function ja(e){return Math.max(0,Math.min(255,Math.round(e)||0))}function Na(e){return((e=ja(e))<16?"0":"")+e.toString(16)}function Oa(e,t,n,a){return a<=0?e=t=n=NaN:n<=0||n>=1?e=t=NaN:t<=0&&(e=NaN),new Ia(e,t,n,a)}function Ca(e){if(e instanceof Ia)return new Ia(e.h,e.s,e.l,e.opacity);if(e instanceof ra||(e=xa(e)),!e)return new Ia;if(e instanceof Ia)return e;var t=(e=e.rgb()).r/255,n=e.g/255,a=e.b/255,r=Math.min(t,n,a),i=Math.max(t,n,a),o=NaN,s=i-r,l=(i+r)/2;return s?(o=t===i?(n-a)/s+6*(n<a):n===i?(a-t)/s+2:(t-n)/s+4,s/=l<.5?i+r:2-i-r,o*=60):s=l>0&&l<1?0:o,new Ia(o,s,l,e.opacity)}function Ia(e,t,n,a){this.h=+e,this.s=+t,this.l=+n,this.opacity=+a}function Ma(e){return(e=(e||0)%360)<0?e+360:e}function La(e){return Math.max(0,Math.min(1,e||0))}function Sa(e,t,n){return 255*(e<60?t+(n-t)*e/60:e<180?n:e<240?t+(n-t)*(240-e)/60:t)}function Fa(e,t,n,a,r){var i=e*e,o=i*e;return((1-3*e+3*i-o)*t+(4-6*i+3*o)*n+(1+3*e+3*i-3*o)*a+o*r)/6}na(ra,xa,{copy(e){return Object.assign(new this.constructor,this,e)},displayable(){return this.rgb().displayable()},hex:va,formatHex:va,formatHex8:function(){return this.rgb().formatHex8()},formatHsl:function(){return Ca(this).formatHsl()},formatRgb:ba,toString:ba}),na(_a,ka,aa(ra,{brighter(e){return e=null==e?oa:Math.pow(oa,e),new _a(this.r*e,this.g*e,this.b*e,this.opacity)},darker(e){return e=null==e?ia:Math.pow(ia,e),new _a(this.r*e,this.g*e,this.b*e,this.opacity)},rgb(){return this},clamp(){return new _a(ja(this.r),ja(this.g),ja(this.b),Aa(this.opacity))},displayable(){return-.5<=this.r&&this.r<255.5&&-.5<=this.g&&this.g<255.5&&-.5<=this.b&&this.b<255.5&&0<=this.opacity&&this.opacity<=1},hex:Ea,formatHex:Ea,formatHex8:function(){return`#${Na(this.r)}${Na(this.g)}${Na(this.b)}${Na(255*(isNaN(this.opacity)?1:this.opacity))}`},formatRgb:Da,toString:Da})),na(Ia,(function(e,t,n,a){return 1===arguments.length?Ca(e):new Ia(e,t,n,null==a?1:a)}),aa(ra,{brighter(e){return e=null==e?oa:Math.pow(oa,e),new Ia(this.h,this.s,this.l*e,this.opacity)},darker(e){return e=null==e?ia:Math.pow(ia,e),new Ia(this.h,this.s,this.l*e,this.opacity)},rgb(){var e=this.h%360+360*(this.h<0),t=isNaN(e)||isNaN(this.s)?0:this.s,n=this.l,a=n+(n<.5?n:1-n)*t,r=2*n-a;return new _a(Sa(e>=240?e-240:e+120,r,a),Sa(e,r,a),Sa(e<120?e+240:e-120,r,a),this.opacity)},clamp(){return new Ia(Ma(this.h),La(this.s),La(this.l),Aa(this.opacity))},displayable(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1&&0<=this.opacity&&this.opacity<=1},formatHsl(){const e=Aa(this.opacity);return`${1===e?"hsl(":"hsla("}${Ma(this.h)}, ${100*La(this.s)}%, ${100*La(this.l)}%${1===e?")":`, ${e})`}`}}));const Va=e=>()=>e;function Ha(e,t){var n=t-e;return n?function(e,t){return function(n){return e+n*t}}(e,n):Va(isNaN(e)?t:e)}const Pa=function e(t){var n=function(e){return 1==(e=+e)?Ha:function(t,n){return n-t?function(e,t,n){return e=Math.pow(e,n),t=Math.pow(t,n)-e,n=1/n,function(a){return Math.pow(e+a*t,n)}}(t,n,e):Va(isNaN(t)?n:t)}}(t);function a(e,t){var a=n((e=ka(e)).r,(t=ka(t)).r),r=n(e.g,t.g),i=n(e.b,t.b),o=Ha(e.opacity,t.opacity);return function(t){return e.r=a(t),e.g=r(t),e.b=i(t),e.opacity=o(t),e+""}}return a.gamma=e,a}(1);function $a(e){return function(t){var n,a,r=t.length,i=new Array(r),o=new Array(r),s=new Array(r);for(n=0;n<r;++n)a=ka(t[n]),i[n]=a.r||0,o[n]=a.g||0,s[n]=a.b||0;return i=e(i),o=e(o),s=e(s),a.opacity=1,function(e){return a.r=i(e),a.g=o(e),a.b=s(e),a+""}}}$a((function(e){var t=e.length-1;return function(n){var a=n<=0?n=0:n>=1?(n=1,t-1):Math.floor(n*t),r=e[a],i=e[a+1],o=a>0?e[a-1]:2*r-i,s=a<t-1?e[a+2]:2*i-r;return Fa((n-a/t)*t,o,r,i,s)}})),$a((function(e){var t=e.length;return function(n){var a=Math.floor(((n%=1)<0?++n:n)*t),r=e[(a+t-1)%t],i=e[a%t],o=e[(a+1)%t],s=e[(a+2)%t];return Fa((n-a/t)*t,r,i,o,s)}}));var Ra=/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,qa=new RegExp(Ra.source,"g");function Ba(e,t){var n,a,r,i=Ra.lastIndex=qa.lastIndex=0,o=-1,s=[],l=[];for(e+="",t+="";(n=Ra.exec(e))&&(a=qa.exec(t));)(r=a.index)>i&&(r=t.slice(i,r),s[o]?s[o]+=r:s[++o]=r),(n=n[0])===(a=a[0])?s[o]?s[o]+=a:s[++o]=a:(s[++o]=null,l.push({i:o,x:zn(n,a)})),i=qa.lastIndex;return i<t.length&&(r=t.slice(i),s[o]?s[o]+=r:s[++o]=r),s.length<2?l[0]?function(e){return function(t){return e(t)+""}}(l[0].x):function(e){return function(){return e}}(t):(t=l.length,function(e){for(var n,a=0;a<t;++a)s[(n=l[a]).i]=n.x(e);return s.join("")})}function Ka(e,t){var n;return("number"==typeof t?zn:t instanceof xa?Pa:(n=xa(t))?(t=n,Pa):Ba)(e,t)}function za(e){return function(){this.removeAttribute(e)}}function Xa(e){return function(){this.removeAttributeNS(e.space,e.local)}}function Ua(e,t,n){var a,r,i=n+"";return function(){var o=this.getAttribute(e);return o===i?null:o===a?r:r=t(a=o,n)}}function Ya(e,t,n){var a,r,i=n+"";return function(){var o=this.getAttributeNS(e.space,e.local);return o===i?null:o===a?r:r=t(a=o,n)}}function Ga(e,t,n){var a,r,i;return function(){var o,s,l=n(this);if(null!=l)return(o=this.getAttribute(e))===(s=l+"")?null:o===a&&s===r?i:(r=s,i=t(a=o,l));this.removeAttribute(e)}}function Ja(e,t,n){var a,r,i;return function(){var o,s,l=n(this);if(null!=l)return(o=this.getAttributeNS(e.space,e.local))===(s=l+"")?null:o===a&&s===r?i:(r=s,i=t(a=o,l));this.removeAttributeNS(e.space,e.local)}}function Wa(e,t){var n,a;function r(){var r=t.apply(this,arguments);return r!==a&&(n=(a=r)&&function(e,t){return function(n){this.setAttributeNS(e.space,e.local,t.call(this,n))}}(e,r)),n}return r._value=t,r}function Za(e,t){var n,a;function r(){var r=t.apply(this,arguments);return r!==a&&(n=(a=r)&&function(e,t){return function(n){this.setAttribute(e,t.call(this,n))}}(e,r)),n}return r._value=t,r}function Qa(e,t){return function(){qn(this,e).delay=+t.apply(this,arguments)}}function er(e,t){return t=+t,function(){qn(this,e).delay=t}}function tr(e,t){return function(){Bn(this,e).duration=+t.apply(this,arguments)}}function nr(e,t){return t=+t,function(){Bn(this,e).duration=t}}var ar=dn.prototype.constructor;function rr(e){return function(){this.style.removeProperty(e)}}var ir=0;function or(e,t,n,a){this._groups=e,this._parents=t,this._name=n,this._id=a}function sr(){return++ir}var lr=dn.prototype;or.prototype=function(e){return dn().transition(e)}.prototype={constructor:or,select:function(e){var t=this._name,n=this._id;"function"!=typeof e&&(e=et(e));for(var a=this._groups,r=a.length,i=new Array(r),o=0;o<r;++o)for(var s,l,c=a[o],p=c.length,d=i[o]=new Array(p),u=0;u<p;++u)(s=c[u])&&(l=e.call(s,s.__data__,u,c))&&("__data__"in s&&(l.__data__=s.__data__),d[u]=l,Rn(d[u],t,n,u,d,Kn(s,n)));return new or(i,this._parents,t,n)},selectAll:function(e){var t=this._name,n=this._id;"function"!=typeof e&&(e=nt(e));for(var a=this._groups,r=a.length,i=[],o=[],s=0;s<r;++s)for(var l,c=a[s],p=c.length,d=0;d<p;++d)if(l=c[d]){for(var u,h=e.call(l,l.__data__,d,c),m=Kn(l,n),f=0,y=h.length;f<y;++f)(u=h[f])&&Rn(u,t,n,f,h,m);i.push(h),o.push(l)}return new or(i,o,t,n)},selectChild:lr.selectChild,selectChildren:lr.selectChildren,filter:function(e){"function"!=typeof e&&(e=at(e));for(var t=this._groups,n=t.length,a=new Array(n),r=0;r<n;++r)for(var i,o=t[r],s=o.length,l=a[r]=[],c=0;c<s;++c)(i=o[c])&&e.call(i,i.__data__,c,o)&&l.push(i);return new or(a,this._parents,this._name,this._id)},merge:function(e){if(e._id!==this._id)throw new Error;for(var t=this._groups,n=e._groups,a=t.length,r=n.length,i=Math.min(a,r),o=new Array(a),s=0;s<i;++s)for(var l,c=t[s],p=n[s],d=c.length,u=o[s]=new Array(d),h=0;h<d;++h)(l=c[h]||p[h])&&(u[h]=l);for(;s<a;++s)o[s]=t[s];return new or(o,this._parents,this._name,this._id)},selection:function(){return new ar(this._groups,this._parents)},transition:function(){for(var e=this._name,t=this._id,n=sr(),a=this._groups,r=a.length,i=0;i<r;++i)for(var o,s=a[i],l=s.length,c=0;c<l;++c)if(o=s[c]){var p=Kn(o,t);Rn(o,e,n,c,s,{time:p.time+p.delay+p.duration,delay:0,duration:p.duration,ease:p.ease})}return new or(a,this._parents,e,n)},call:lr.call,nodes:lr.nodes,node:lr.node,size:lr.size,empty:lr.empty,each:lr.each,on:function(e,t){var n=this._id;return arguments.length<2?Kn(this.node(),n).on.on(e):this.each(function(e,t,n){var a,r,i=function(e){return(e+"").trim().split(/^|\s+/).every((function(e){var t=e.indexOf(".");return t>=0&&(e=e.slice(0,t)),!e||"start"===e}))}(t)?qn:Bn;return function(){var o=i(this,e),s=o.on;s!==a&&(r=(a=s).copy()).on(t,n),o.on=r}}(n,e,t))},attr:function(e,t){var n=vt(e),a="transform"===n?Zn:Ka;return this.attrTween(e,"function"==typeof t?(n.local?Ja:Ga)(n,a,ta(this,"attr."+e,t)):null==t?(n.local?Xa:za)(n):(n.local?Ya:Ua)(n,a,t))},attrTween:function(e,t){var n="attr."+e;if(arguments.length<2)return(n=this.tween(n))&&n._value;if(null==t)return this.tween(n,null);if("function"!=typeof t)throw new Error;var a=vt(e);return this.tween(n,(a.local?Wa:Za)(a,t))},style:function(e,t,n){var a="transform"==(e+="")?Wn:Ka;return null==t?this.styleTween(e,function(e,t){var n,a,r;return function(){var i=Nt(this,e),o=(this.style.removeProperty(e),Nt(this,e));return i===o?null:i===n&&o===a?r:r=t(n=i,a=o)}}(e,a)).on("end.style."+e,rr(e)):"function"==typeof t?this.styleTween(e,function(e,t,n){var a,r,i;return function(){var o=Nt(this,e),s=n(this),l=s+"";return null==s&&(this.style.removeProperty(e),l=s=Nt(this,e)),o===l?null:o===a&&l===r?i:(r=l,i=t(a=o,s))}}(e,a,ta(this,"style."+e,t))).each(function(e,t){var n,a,r,i,o="style."+t,s="end."+o;return function(){var l=Bn(this,e),c=l.on,p=null==l.value[o]?i||(i=rr(t)):void 0;c===n&&r===p||(a=(n=c).copy()).on(s,r=p),l.on=a}}(this._id,e)):this.styleTween(e,function(e,t,n){var a,r,i=n+"";return function(){var o=Nt(this,e);return o===i?null:o===a?r:r=t(a=o,n)}}(e,a,t),n).on("end.style."+e,null)},styleTween:function(e,t,n){var a="style."+(e+="");if(arguments.length<2)return(a=this.tween(a))&&a._value;if(null==t)return this.tween(a,null);if("function"!=typeof t)throw new Error;return this.tween(a,function(e,t,n){var a,r;function i(){var i=t.apply(this,arguments);return i!==r&&(a=(r=i)&&function(e,t,n){return function(a){this.style.setProperty(e,t.call(this,a),n)}}(e,i,n)),a}return i._value=t,i}(e,t,null==n?"":n))},text:function(e){return this.tween("text","function"==typeof e?function(e){return function(){var t=e(this);this.textContent=null==t?"":t}}(ta(this,"text",e)):function(e){return function(){this.textContent=e}}(null==e?"":e+""))},textTween:function(e){var t="text";if(arguments.length<1)return(t=this.tween(t))&&t._value;if(null==e)return this.tween(t,null);if("function"!=typeof e)throw new Error;return this.tween(t,function(e){var t,n;function a(){var a=e.apply(this,arguments);return a!==n&&(t=(n=a)&&function(e){return function(t){this.textContent=e.call(this,t)}}(a)),t}return a._value=e,a}(e))},remove:function(){return this.on("end.remove",function(e){return function(){var t=this.parentNode;for(var n in this.__transition)if(+n!==e)return;t&&t.removeChild(this)}}(this._id))},tween:function(e,t){var n=this._id;if(e+="",arguments.length<2){for(var a,r=Kn(this.node(),n).tween,i=0,o=r.length;i<o;++i)if((a=r[i]).name===e)return a.value;return null}return this.each((null==t?Qn:ea)(n,e,t))},delay:function(e){var t=this._id;return arguments.length?this.each(("function"==typeof e?Qa:er)(t,e)):Kn(this.node(),t).delay},duration:function(e){var t=this._id;return arguments.length?this.each(("function"==typeof e?tr:nr)(t,e)):Kn(this.node(),t).duration},ease:function(e){var t=this._id;return arguments.length?this.each(function(e,t){if("function"!=typeof t)throw new Error;return function(){Bn(this,e).ease=t}}(t,e)):Kn(this.node(),t).ease},easeVarying:function(e){if("function"!=typeof e)throw new Error;return this.each(function(e,t){return function(){var n=t.apply(this,arguments);if("function"!=typeof n)throw new Error;Bn(this,e).ease=n}}(this._id,e))},end:function(){var e,t,n=this,a=n._id,r=n.size();return new Promise((function(i,o){var s={value:o},l={value:function(){0==--r&&i()}};n.each((function(){var n=Bn(this,a),r=n.on;r!==e&&((t=(e=r).copy())._.cancel.push(s),t._.interrupt.push(s),t._.end.push(l)),n.on=t})),0===r&&i()}))},[Symbol.iterator]:lr[Symbol.iterator]};var cr={time:null,delay:0,duration:250,ease:function(e){return((e*=2)<=1?e*e*e:(e-=2)*e*e+2)/2}};function pr(e,t){for(var n;!(n=e.__transition)||!(n=n[t]);)if(!(e=e.parentNode))throw new Error(`transition ${t} not found`);return n}dn.prototype.interrupt=function(e){return this.each((function(){!function(e,t){var n,a,r,i=e.__transition,o=!0;if(i){for(r in t=null==t?null:t+"",i)(n=i[r]).name===t?(a=n.state>2&&n.state<5,n.state=6,n.timer.stop(),n.on.call(a?"interrupt":"cancel",e,e.__data__,n.index,n.group),delete i[r]):o=!1;o&&delete e.__transition}}(this,e)}))},dn.prototype.transition=function(e){var t,n;e instanceof or?(t=e._id,e=e._name):(t=sr(),(n=cr).time=Nn(),e=null==e?null:e+"");for(var a=this._groups,r=a.length,i=0;i<r;++i)for(var o,s=a[i],l=s.length,c=0;c<l;++c)(o=s[c])&&Rn(o,e,t,c,s,n||pr(o,t));return new or(a,this._parents,e,t)};const{abs:dr,max:ur,min:hr}=Math;function mr(e){return{type:e}}function fr(e,t){switch(arguments.length){case 0:break;case 1:this.range(e);break;default:this.range(t).domain(e)}return this}["w","e"].map(mr),["n","s"].map(mr),["n","w","e","s","nw","ne","sw","se"].map(mr);class yr extends Map{constructor(e,t=vr){if(super(),Object.defineProperties(this,{_intern:{value:new Map},_key:{value:t}}),null!=e)for(const[t,n]of e)this.set(t,n)}get(e){return super.get(gr(this,e))}has(e){return super.has(gr(this,e))}set(e,t){return super.set(function({_intern:e,_key:t},n){const a=t(n);return e.has(a)?e.get(a):(e.set(a,n),n)}(this,e),t)}delete(e){return super.delete(function({_intern:e,_key:t},n){const a=t(n);return e.has(a)&&(n=e.get(a),e.delete(a)),n}(this,e))}}function gr({_intern:e,_key:t},n){const a=t(n);return e.has(a)?e.get(a):n}function vr(e){return null!==e&&"object"==typeof e?e.valueOf():e}const br=Symbol("implicit");function xr(){var e=new yr,t=[],n=[],a=br;function r(r){let i=e.get(r);if(void 0===i){if(a!==br)return a;e.set(r,i=t.push(r)-1)}return n[i%n.length]}return r.domain=function(n){if(!arguments.length)return t.slice();t=[],e=new yr;for(const a of n)e.has(a)||e.set(a,t.push(a)-1);return r},r.range=function(e){return arguments.length?(n=Array.from(e),r):n.slice()},r.unknown=function(e){return arguments.length?(a=e,r):a},r.copy=function(){return xr(t,n).unknown(a)},fr.apply(r,arguments),r}function wr(){var e,t,n=xr().unknown(void 0),a=n.domain,r=n.range,i=0,o=1,s=!1,l=0,c=0,p=.5;function d(){var n=a().length,d=o<i,u=d?o:i,h=d?i:o;e=(h-u)/Math.max(1,n-l+2*c),s&&(e=Math.floor(e)),u+=(h-u-e*(n-l))*p,t=e*(1-l),s&&(u=Math.round(u),t=Math.round(t));var m=function(e,t,n){e=+e,t=+t,n=(r=arguments.length)<2?(t=e,e=0,1):r<3?1:+n;for(var a=-1,r=0|Math.max(0,Math.ceil((t-e)/n)),i=new Array(r);++a<r;)i[a]=e+a*n;return i}(n).map((function(t){return u+e*t}));return r(d?m.reverse():m)}return delete n.unknown,n.domain=function(e){return arguments.length?(a(e),d()):a()},n.range=function(e){return arguments.length?([i,o]=e,i=+i,o=+o,d()):[i,o]},n.rangeRound=function(e){return[i,o]=e,i=+i,o=+o,s=!0,d()},n.bandwidth=function(){return t},n.step=function(){return e},n.round=function(e){return arguments.length?(s=!!e,d()):s},n.padding=function(e){return arguments.length?(l=Math.min(1,c=+e),d()):l},n.paddingInner=function(e){return arguments.length?(l=Math.min(1,e),d()):l},n.paddingOuter=function(e){return arguments.length?(c=+e,d()):c},n.align=function(e){return arguments.length?(p=Math.max(0,Math.min(1,e)),d()):p},n.copy=function(){return wr(a(),[i,o]).round(s).paddingInner(l).paddingOuter(c).align(p)},fr.apply(d(),arguments)}const Tr=Math.sqrt(50),kr=Math.sqrt(10),_r=Math.sqrt(2);function Er(e,t,n){const a=(t-e)/Math.max(0,n),r=Math.floor(Math.log10(a)),i=a/Math.pow(10,r),o=i>=Tr?10:i>=kr?5:i>=_r?2:1;let s,l,c;return r<0?(c=Math.pow(10,-r)/o,s=Math.round(e*c),l=Math.round(t*c),s/c<e&&++s,l/c>t&&--l,c=-c):(c=Math.pow(10,r)*o,s=Math.round(e/c),l=Math.round(t/c),s*c<e&&++s,l*c>t&&--l),l<s&&.5<=n&&n<2?Er(e,t,2*n):[s,l,c]}function Dr(e,t,n){return Er(e=+e,t=+t,n=+n)[2]}function Ar(e,t){return null==e||null==t?NaN:e<t?-1:e>t?1:e>=t?0:NaN}function jr(e,t){return null==e||null==t?NaN:t<e?-1:t>e?1:t>=e?0:NaN}function Nr(e){let t,n,a;function r(e,a,r=0,i=e.length){if(r<i){if(0!==t(a,a))return i;do{const t=r+i>>>1;n(e[t],a)<0?r=t+1:i=t}while(r<i)}return r}return 2!==e.length?(t=Ar,n=(t,n)=>Ar(e(t),n),a=(t,n)=>e(t)-n):(t=e===Ar||e===jr?e:Or,n=e,a=e),{left:r,center:function(e,t,n=0,i=e.length){const o=r(e,t,n,i-1);return o>n&&a(e[o-1],t)>-a(e[o],t)?o-1:o},right:function(e,a,r=0,i=e.length){if(r<i){if(0!==t(a,a))return i;do{const t=r+i>>>1;n(e[t],a)<=0?r=t+1:i=t}while(r<i)}return r}}}function Or(){return 0}const Cr=Nr(Ar),Ir=Cr.right,Mr=(Cr.left,Nr((function(e){return null===e?NaN:+e})).center,Ir);function Lr(e,t){var n,a=t?t.length:0,r=e?Math.min(a,e.length):0,i=new Array(r),o=new Array(a);for(n=0;n<r;++n)i[n]=Hr(e[n],t[n]);for(;n<a;++n)o[n]=t[n];return function(e){for(n=0;n<r;++n)o[n]=i[n](e);return o}}function Sr(e,t){var n=new Date;return e=+e,t=+t,function(a){return n.setTime(e*(1-a)+t*a),n}}function Fr(e,t){var n,a={},r={};for(n in null!==e&&"object"==typeof e||(e={}),null!==t&&"object"==typeof t||(t={}),t)n in e?a[n]=Hr(e[n],t[n]):r[n]=t[n];return function(e){for(n in a)r[n]=a[n](e);return r}}function Vr(e,t){t||(t=[]);var n,a=e?Math.min(t.length,e.length):0,r=t.slice();return function(i){for(n=0;n<a;++n)r[n]=e[n]*(1-i)+t[n]*i;return r}}function Hr(e,t){var n,a,r=typeof t;return null==t||"boolean"===r?Va(t):("number"===r?zn:"string"===r?(n=xa(t))?(t=n,Pa):Ba:t instanceof xa?Pa:t instanceof Date?Sr:(a=t,!ArrayBuffer.isView(a)||a instanceof DataView?Array.isArray(t)?Lr:"function"!=typeof t.valueOf&&"function"!=typeof t.toString||isNaN(t)?Fr:zn:Vr))(e,t)}function Pr(e,t){return e=+e,t=+t,function(n){return Math.round(e*(1-n)+t*n)}}function $r(e){return+e}var Rr=[0,1];function qr(e){return e}function Br(e,t){return(t-=e=+e)?function(n){return(n-e)/t}:(n=isNaN(t)?NaN:.5,function(){return n});var n}function Kr(e,t,n){var a=e[0],r=e[1],i=t[0],o=t[1];return r<a?(a=Br(r,a),i=n(o,i)):(a=Br(a,r),i=n(i,o)),function(e){return i(a(e))}}function zr(e,t,n){var a=Math.min(e.length,t.length)-1,r=new Array(a),i=new Array(a),o=-1;for(e[a]<e[0]&&(e=e.slice().reverse(),t=t.slice().reverse());++o<a;)r[o]=Br(e[o],e[o+1]),i[o]=n(t[o],t[o+1]);return function(t){var n=Mr(e,t,1,a)-1;return i[n](r[n](t))}}var Xr,Ur=/^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;function Yr(e){if(!(t=Ur.exec(e)))throw new Error("invalid format: "+e);var t;return new Gr({fill:t[1],align:t[2],sign:t[3],symbol:t[4],zero:t[5],width:t[6],comma:t[7],precision:t[8]&&t[8].slice(1),trim:t[9],type:t[10]})}function Gr(e){this.fill=void 0===e.fill?" ":e.fill+"",this.align=void 0===e.align?">":e.align+"",this.sign=void 0===e.sign?"-":e.sign+"",this.symbol=void 0===e.symbol?"":e.symbol+"",this.zero=!!e.zero,this.width=void 0===e.width?void 0:+e.width,this.comma=!!e.comma,this.precision=void 0===e.precision?void 0:+e.precision,this.trim=!!e.trim,this.type=void 0===e.type?"":e.type+""}function Jr(e,t){if((n=(e=t?e.toExponential(t-1):e.toExponential()).indexOf("e"))<0)return null;var n,a=e.slice(0,n);return[a.length>1?a[0]+a.slice(2):a,+e.slice(n+1)]}function Wr(e){return(e=Jr(Math.abs(e)))?e[1]:NaN}function Zr(e,t){var n=Jr(e,t);if(!n)return e+"";var a=n[0],r=n[1];return r<0?"0."+new Array(-r).join("0")+a:a.length>r+1?a.slice(0,r+1)+"."+a.slice(r+1):a+new Array(r-a.length+2).join("0")}Yr.prototype=Gr.prototype,Gr.prototype.toString=function(){return this.fill+this.align+this.sign+this.symbol+(this.zero?"0":"")+(void 0===this.width?"":Math.max(1,0|this.width))+(this.comma?",":"")+(void 0===this.precision?"":"."+Math.max(0,0|this.precision))+(this.trim?"~":"")+this.type};const Qr={"%":(e,t)=>(100*e).toFixed(t),b:e=>Math.round(e).toString(2),c:e=>e+"",d:function(e){return Math.abs(e=Math.round(e))>=1e21?e.toLocaleString("en").replace(/,/g,""):e.toString(10)},e:(e,t)=>e.toExponential(t),f:(e,t)=>e.toFixed(t),g:(e,t)=>e.toPrecision(t),o:e=>Math.round(e).toString(8),p:(e,t)=>Zr(100*e,t),r:Zr,s:function(e,t){var n=Jr(e,t);if(!n)return e+"";var a=n[0],r=n[1],i=r-(Xr=3*Math.max(-8,Math.min(8,Math.floor(r/3))))+1,o=a.length;return i===o?a:i>o?a+new Array(i-o+1).join("0"):i>0?a.slice(0,i)+"."+a.slice(i):"0."+new Array(1-i).join("0")+Jr(e,Math.max(0,t+i-1))[0]},X:e=>Math.round(e).toString(16).toUpperCase(),x:e=>Math.round(e).toString(16)};function ei(e){return e}var ti,ni,ai,ri=Array.prototype.map,ii=["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];function oi(e){var t=e.domain;return e.ticks=function(e){var n=t();return function(e,t,n){if(!((n=+n)>0))return[];if((e=+e)==(t=+t))return[e];const a=t<e,[r,i,o]=a?Er(t,e,n):Er(e,t,n);if(!(i>=r))return[];const s=i-r+1,l=new Array(s);if(a)if(o<0)for(let e=0;e<s;++e)l[e]=(i-e)/-o;else for(let e=0;e<s;++e)l[e]=(i-e)*o;else if(o<0)for(let e=0;e<s;++e)l[e]=(r+e)/-o;else for(let e=0;e<s;++e)l[e]=(r+e)*o;return l}(n[0],n[n.length-1],null==e?10:e)},e.tickFormat=function(e,n){var a=t();return function(e,t,n,a){var r,i=function(e,t,n){n=+n;const a=(t=+t)<(e=+e),r=a?Dr(t,e,n):Dr(e,t,n);return(a?-1:1)*(r<0?1/-r:r)}(e,t,n);switch((a=Yr(null==a?",f":a)).type){case"s":var o=Math.max(Math.abs(e),Math.abs(t));return null!=a.precision||isNaN(r=function(e,t){return Math.max(0,3*Math.max(-8,Math.min(8,Math.floor(Wr(t)/3)))-Wr(Math.abs(e)))}(i,o))||(a.precision=r),ai(a,o);case"":case"e":case"g":case"p":case"r":null!=a.precision||isNaN(r=function(e,t){return e=Math.abs(e),t=Math.abs(t)-e,Math.max(0,Wr(t)-Wr(e))+1}(i,Math.max(Math.abs(e),Math.abs(t))))||(a.precision=r-("e"===a.type));break;case"f":case"%":null!=a.precision||isNaN(r=function(e){return Math.max(0,-Wr(Math.abs(e)))}(i))||(a.precision=r-2*("%"===a.type))}return ni(a)}(a[0],a[a.length-1],null==e?10:e,n)},e.nice=function(n){null==n&&(n=10);var a,r,i=t(),o=0,s=i.length-1,l=i[o],c=i[s],p=10;for(c<l&&(r=l,l=c,c=r,r=o,o=s,s=r);p-- >0;){if((r=Dr(l,c,n))===a)return i[o]=l,i[s]=c,t(i);if(r>0)l=Math.floor(l/r)*r,c=Math.ceil(c/r)*r;else{if(!(r<0))break;l=Math.ceil(l*r)/r,c=Math.floor(c*r)/r}a=r}return e},e}function si(){var e=function(){var e,t,n,a,r,i,o=Rr,s=Rr,l=Hr,c=qr;function p(){var e,t,n,l=Math.min(o.length,s.length);return c!==qr&&(e=o[0],t=o[l-1],e>t&&(n=e,e=t,t=n),c=function(n){return Math.max(e,Math.min(t,n))}),a=l>2?zr:Kr,r=i=null,d}function d(t){return null==t||isNaN(t=+t)?n:(r||(r=a(o.map(e),s,l)))(e(c(t)))}return d.invert=function(n){return c(t((i||(i=a(s,o.map(e),zn)))(n)))},d.domain=function(e){return arguments.length?(o=Array.from(e,$r),p()):o.slice()},d.range=function(e){return arguments.length?(s=Array.from(e),p()):s.slice()},d.rangeRound=function(e){return s=Array.from(e),l=Pr,p()},d.clamp=function(e){return arguments.length?(c=!!e||qr,p()):c!==qr},d.interpolate=function(e){return arguments.length?(l=e,p()):l},d.unknown=function(e){return arguments.length?(n=e,d):n},function(n,a){return e=n,t=a,p()}}()(qr,qr);return e.copy=function(){return t=e,si().domain(t.domain()).range(t.range()).interpolate(t.interpolate()).clamp(t.clamp()).unknown(t.unknown());var t},fr.apply(e,arguments),oi(e)}function li(e,t,n){this.k=e,this.x=t,this.y=n}ti=function(e){var t,n,a=void 0===e.grouping||void 0===e.thousands?ei:(t=ri.call(e.grouping,Number),n=e.thousands+"",function(e,a){for(var r=e.length,i=[],o=0,s=t[0],l=0;r>0&&s>0&&(l+s+1>a&&(s=Math.max(1,a-l)),i.push(e.substring(r-=s,r+s)),!((l+=s+1)>a));)s=t[o=(o+1)%t.length];return i.reverse().join(n)}),r=void 0===e.currency?"":e.currency[0]+"",i=void 0===e.currency?"":e.currency[1]+"",o=void 0===e.decimal?".":e.decimal+"",s=void 0===e.numerals?ei:function(e){return function(t){return t.replace(/[0-9]/g,(function(t){return e[+t]}))}}(ri.call(e.numerals,String)),l=void 0===e.percent?"%":e.percent+"",c=void 0===e.minus?"−":e.minus+"",p=void 0===e.nan?"NaN":e.nan+"";function d(e){var t=(e=Yr(e)).fill,n=e.align,d=e.sign,u=e.symbol,h=e.zero,m=e.width,f=e.comma,y=e.precision,g=e.trim,v=e.type;"n"===v?(f=!0,v="g"):Qr[v]||(void 0===y&&(y=12),g=!0,v="g"),(h||"0"===t&&"="===n)&&(h=!0,t="0",n="=");var b="$"===u?r:"#"===u&&/[boxX]/.test(v)?"0"+v.toLowerCase():"",x="$"===u?i:/[%p]/.test(v)?l:"",w=Qr[v],T=/[defgprs%]/.test(v);function k(e){var r,i,l,u=b,k=x;if("c"===v)k=w(e)+k,e="";else{var _=(e=+e)<0||1/e<0;if(e=isNaN(e)?p:w(Math.abs(e),y),g&&(e=function(e){e:for(var t,n=e.length,a=1,r=-1;a<n;++a)switch(e[a]){case".":r=t=a;break;case"0":0===r&&(r=a),t=a;break;default:if(!+e[a])break e;r>0&&(r=0)}return r>0?e.slice(0,r)+e.slice(t+1):e}(e)),_&&0==+e&&"+"!==d&&(_=!1),u=(_?"("===d?d:c:"-"===d||"("===d?"":d)+u,k=("s"===v?ii[8+Xr/3]:"")+k+(_&&"("===d?")":""),T)for(r=-1,i=e.length;++r<i;)if(48>(l=e.charCodeAt(r))||l>57){k=(46===l?o+e.slice(r+1):e.slice(r))+k,e=e.slice(0,r);break}}f&&!h&&(e=a(e,1/0));var E=u.length+e.length+k.length,D=E<m?new Array(m-E+1).join(t):"";switch(f&&h&&(e=a(D+e,D.length?m-k.length:1/0),D=""),n){case"<":e=u+e+k+D;break;case"=":e=u+D+e+k;break;case"^":e=D.slice(0,E=D.length>>1)+u+e+k+D.slice(E);break;default:e=D+u+e+k}return s(e)}return y=void 0===y?6:/[gprs]/.test(v)?Math.max(1,Math.min(21,y)):Math.max(0,Math.min(20,y)),k.toString=function(){return e+""},k}return{format:d,formatPrefix:function(e,t){var n=d(((e=Yr(e)).type="f",e)),a=3*Math.max(-8,Math.min(8,Math.floor(Wr(t)/3))),r=Math.pow(10,-a),i=ii[8+a/3];return function(e){return n(r*e)+i}}}}({thousands:",",grouping:[3],currency:["$",""]}),ni=ti.format,ai=ti.formatPrefix,li.prototype={constructor:li,scale:function(e){return 1===e?this:new li(this.k*e,this.x,this.y)},translate:function(e,t){return 0===e&0===t?this:new li(this.k,this.x+this.k*e,this.y+this.k*t)},apply:function(e){return[e[0]*this.k+this.x,e[1]*this.k+this.y]},applyX:function(e){return e*this.k+this.x},applyY:function(e){return e*this.k+this.y},invert:function(e){return[(e[0]-this.x)/this.k,(e[1]-this.y)/this.k]},invertX:function(e){return(e-this.x)/this.k},invertY:function(e){return(e-this.y)/this.k},rescaleX:function(e){return e.copy().domain(e.range().map(this.invertX,this).map(e.invert,e))},rescaleY:function(e){return e.copy().domain(e.range().map(this.invertY,this).map(e.invert,e))},toString:function(){return"translate("+this.x+","+this.y+") scale("+this.k+")"}},new li(1,0,0),li.prototype;const ci=new Ae("content-component",Be,{data:()=>({button1:"Get started",button2:"Examples",button3:"Documentation",link1:"/documentation/getting-started.html",link2:"/examples.html",link3:"/documentation/introduction.html"}),script:()=>{const e=[{module:"vanillajs-1",result:100},{module:"ivi-v3.0.0",result:95},{module:"cample-v3.2.0-alpha.25",result:93},{module:"inferno-v8.2.2",result:90},{module:"vue-v3.4.21",result:75}],t=(t,n,a)=>{const r=function(e){return"string"==typeof e?new cn([[document.querySelector(e)]],[document.documentElement]):new cn([[e]],ln)}(a).append("svg").attr("width",t+80+20).attr("height",n+20+30).append("g").attr("transform","translate(80,20)"),i=wr().domain(e.map((e=>e.module))).range([0,t]).padding(.02),o=si().domain([0,Ke(e,(e=>e.result))]).range([n,0]);var s;r.selectAll("rect").data(e).enter().append("rect").attr("width",i.bandwidth()).attr("height",(e=>n-o(e.result))).attr("fill","#6200FF").attr("x",(e=>i(e.module))).attr("y",(e=>o(e.result))),r.append("g").attr("transform",`translate(0,${n})`).call(Ze(3,i)),console.log(r.append("g").call((s=o,Ze(4,s))).selectAll("text").text((e=>`${e}%`)))};t(1440,700,".diagram-desktop"),t(1100,650,".diagram-tablet1"),t(900,600,".diagram-tablet2"),t(580,400,".diagram-tablet3"),t(400,350,".diagram-tablet4"),t(300,250,".diagram-mobile1"),t(230,200,".diagram-mobile2"),t(200,180,".diagram-mobile3")},export:{buttonData1:{data:{text:"button1",link:"link1"}},buttonData2:{data:{text:"button2",link:"link2"}},buttonData3:{data:{text:"button3",link:"link3"}}},exportId:"contentId"}),pi=new Ae("documentation-component",'<div id="documentation_main"> <template data-cample="sidebar-component"></template> <div class="documentation_page"> <h1>Documentation</h1> <hr class="section_line"> <h2>About:</h2> <p>Cample.js framework documentation.</p> <h2>Articles:</h2> <ul class="list"> <li class="list_item"> <a href="/documentation/introduction.html">Introduction</a> </li> <li class="list_item"> <a href="/documentation/installation.html">Installation</a> </li> <li class="list_item"> <a href="/documentation/getting-started.html">Getting started</a> </li> </ul> </div> </div> '),di=new Ae("examples-component",'<div id="examples_main"> <template data-cample="sidebar-component"></template> <div class="example_page"> <h1 class="title">Main</h1> <p class="codepen" data-height="700px" data-theme-id="light" data-default-tab="js,result" data-slug-hash="WNgOGVb" data-editable="true" data-user="Camplejs" style="height:700px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:2px solid;margin:1em 0;padding:1em"> <span>See the Pen <a href="https://codepen.io/Camplejs/pen/WNgOGVb"> Example Cample.js</a> by Cample.js (<a href="https://codepen.io/Camplejs">@Camplejs</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> </div> </div> '),ui=new Ae("sidebar-component",'<div class="sidebar-component"> <aside class="sidebar"> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/introduction.html">Introduction</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/installation.html">Installation</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/getting-started.html">Getting started</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/cample.html">Cample</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/component.html">Component</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/each.html">Each</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/reactivity.html">Reactivity</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/types.html">Types</a> </section> </aside> <aside class="sidebar-mobile"> <div class="close"></div> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/introduction.html">Introduction</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/installation.html">Installation</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/getting-started.html">Getting started</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/cample.html">Cample</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/component.html">Component</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/each.html">Each</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/reactivity.html">Reactivity</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/documentation/types.html">Types</a> </section> </aside> </div> ',{script:e=>{let{element:t}=e;const n=document.querySelector(".sidebar-button"),a=t.querySelector(".sidebar-mobile"),r=t.querySelector(".close");document.querySelector(".logo").classList.add("left-auto"),n.classList.remove("hidden-button"),n.addEventListener("click",(()=>{n.classList.contains("active-button")?(n.classList.remove("active-button"),a.classList.add("active-sidebar")):(n.classList.add("active-button"),a.classList.remove("active-sidebar"))})),r.addEventListener("click",(()=>{n.classList.add("active-button"),a.classList.remove("active-sidebar")}));const i=t.querySelectorAll(".sidebar-link");let o;switch(window.location.pathname.slice(1)){case"documentation/cample.html":o=[i[3],i[11]];break;case"documentation/installation.html":o=[i[1],i[9]];break;case"documentation/component.html":o=[i[4],i[12]];break;case"documentation/each.html":o=[i[5],i[13]];break;case"documentation/getting-started.html":o=[i[2],i[10]];break;case"documentation/introduction.html":o=[i[0],i[8]];break;case"documentation/types.html":o=[i[7],i[15]];break;case"documentation/reactivity.html":o=[i[6],i[14]]}Le(o)}}),hi=new Ae("sidebar-component",'<div class="sidebar-component"> <aside class="sidebar"> <section class="sidebar-section"> <a class="sidebar-link" href="/examples.html">Main</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/examples/clicker.html">Clicker</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/examples/tabs.html">Tabs</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/examples/taskTracker.html">Task Tracker</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/examples/dataTable.html">Data Table</a> </section> </aside> <aside class="sidebar-mobile"> <div class="close"></div> <section class="sidebar-section"> <a class="sidebar-link" href="/examples.html">Main</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/examples/clicker.html">Clicker</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/examples/tabs.html">Tabs</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/examples/taskTracker.html">Task Tracker</a> </section> <section class="sidebar-section"> <a class="sidebar-link" href="/examples/dataTable.html">Data Table</a> </section> </aside> </div> ',{script:e=>{let{element:t}=e;const n=document.querySelector(".sidebar-button"),a=t.querySelector(".sidebar-mobile"),r=t.querySelector(".close");document.querySelector(".logo").classList.add("left-auto"),n.classList.remove("hidden-button"),n.addEventListener("click",(()=>{n.classList.contains("active-button")?(n.classList.remove("active-button"),a.classList.add("active-sidebar")):(n.classList.add("active-button"),a.classList.remove("active-sidebar"))})),r.addEventListener("click",(()=>{n.classList.add("active-button"),a.classList.remove("active-sidebar")}));const i=t.querySelectorAll(".sidebar-link");let o;switch(window.location.pathname.slice(1)){case"examples.html":o=[i[0],i[5]];break;case"examples/clicker.html":o=[i[1],i[6]];break;case"examples/tabs.html":o=[i[2],i[7]];break;case"examples/taskTracker.html":o=[i[3],i[8]];break;case"examples/dataTable.html":o=[i[4],i[9]]}Le(o)}}),mi=new Ae("installation-component",'<div id="documentation_main"> <template data-cample="sidebar-component"></template> <div class="documentation_page"> <h1>Installation</h1> <hr class="section_line"> <h2>Installation using npx:</h2> <p><a href="https://nodejs.org" target="_blank" rel="noopener noreferrer">Node.js</a> installation required. It is used to access npm and npx in the terminal.</p> <p>To create an application, it is better to use the official <code class="inline-code">cample-start</code> command to generate a “starting point”, choosing from two currently available templates.</p> <code> npx cample-start </code> <p>The main two templates are based on two module bundlers such as <a href="https://webpack.js.org" target="_blank" rel="noopener noreferrer">Webpack</a> and <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">Parcel</a>. To select one of them from the list in the terminal, you can select the most suitable one. All of them have official support.</p> <pre><code>Project template:\nwebpack-app\nparcel-app</code></pre> <p>After selecting a template, there is an option to create a name for the project.</p> <pre><code>Project name:new-app</code></pre> <p>The name may include "-" and "_" characters.</p> <p>Afterwards, the process of installing the necessary files should begin in a folder with the name that you typed. If the installation was successful, the following message should appear:</p> <code>Project ${projectName} installed successfully!</code> <p>To subsequently install the application, enter the following command while in the project folder:</p> <code>npm install</code> <p>Also, any other package manager can be selected for such an installation. The "node_modules" folder is not automatically generated when installing the application via npx.</p> <h2>Installation using npm:</h2> <p>For this installation the following command is assumed:</p> <code>npm i cample</code> <p>With this installation, functions will still be available directly from the module. Installation using <code class="inline-code">cample-start</code> simply specifies the start files for the application.</p> <h2>Articles</h2> <ul class="list"> <li class="list_item"> <a href="/documentation/getting-started.html">Getting started</a> </li> </ul> </div> </div>'),fi=new Ae("cample-component",'<div id="documentation_main"> <template data-cample="sidebar-component"></template> <div class="documentation_page"> <h1>Cample</h1> <hr class="section_line"> <h2>About</h2> <p>The Cample object is the starting point for the application. A new instance of the object is initialized in an HTML block, renders the components.</p> <p>The application is rendered once. After this, it is updated by changing the data.</p> <h2>Class function</h2> <pre><code>const newCample = cample("#page",{\n  trimHTML:false\n});</code></pre> <h2>Render method</h2> <p>In cample.js, rendering is done by creating a template, which contains the "data-cample" key attribute. This attribute is passed the value of the selector that was specified when the component was created. The selector in the component always comes as the first argument. Render example:</p> <h3>before render</h3> <pre><code>&lt;template data-cample="new-component"&gt;&lt;/template&gt;</code></pre> <h3>after render</h3> <pre><code>&lt;div&gt;text&lt;div&gt;</code></pre> <h3>component</h3> <pre><code>const newComponent = component("new-component", "&lt;div&gt;text&lt;div&gt;");</code></pre> <p>If there was no "template" in the document that would contain the required "data-cample", then the component will not be rendered.</p> <h2>Arguments</h2> <h3>selector</h3> <p>The HTML block in which the page will be rendered is initialized mainly due to the selector argument, which receives the value of the specified block. An example of a selector:</p> <h4>JavaScript file</h4> <pre><code>new Cample("#page",{\n    trimHTML:false\n})\n.render("&lt;span&gt;text/&lt;span&gt;",{})</code></pre> <h4>HTML file</h4> <pre><code>&lt;main id="page"&gt;\n    text\n&lt;main&gt;</code></pre> <p>In this example, for the "main" HTML tag with a unique identifier "page", the text that was received in the "render" method is rendered.</p> <h3>options</h3> <p>The options object describes the property for applying the trim method to the rendered HTML.</p> <h4>trimHTML</h4> <p>Depending on the value of the trimHTML property, the javascript trim() method is applied to the HTML string.</p> <pre><code>new Cample("#page",{\n  trimHTML:false\n})</code></pre> <p>This will avoid the errors associated with rendering a single Element in the component, but also the HTML may not be displayed correctly.</p> <h2>Methods</h2> <p>The Cample object has one function render.</p> <h3>render</h3> <p>The render function renders components such as <a href="/documentation/component.html">Component</a>, <a href="/documentation/each.html">Each</a>, etc. The function\'s arguments are template and options. Template is HTML markup with string interpolation, and options is an object of components processed by the render function. An example of arguments in a function:</p> <pre><code>(`&lt;div&gt;\n    &lbrace; &lbrace;component&rbrace; &rbrace;\n&lt;/div&gt;`,{\n    component:newComponent\n})</code></pre> <p>In this example, for the variable newComponent (let\'s say that stores the component <a href="/documentation/component.html">Component</a>), in the options object, the name component is given, which can be processed using interpolation in the template.</p> <h2>Example code</h2> <pre><code>const newCample = new Cample("#page",{\n  trimHTML:false,\n});\nconst newComponent\n= component("new-component", "HTML");  \n\nnewCample.render("&lbrace; &lbrace;newComponent&rbrace; &rbrace;", {newComponent});</code></pre> <h2>Cample table</h2> <table> <thead> <tr> <th colspan="3">Arguments</th> </tr> <tr> <th>Name</th> <th>Usage</th> <th>Type</th> </tr> </thead> <tbody> <tr> <td>selector</td> <td>HTML selector, where components are rendered.</td> <td>SelectorType</td> </tr> <tr> <td>options</td> <td>Object options.</td> <td>CampleOptionsType</td> </tr> </tbody> <thead> <tr> <th colspan="3">Methods:</th> </tr> <tr> <th>Name</th> <th>Usage</th> <th>Returns</th> </tr> </thead> <tbody> <tr> <td>render</td> <td>Renders components such as a <a href="/documentation/component.html">Component</a>, for example.</td> <td>void</td> </tr> </tbody> </table> <h2>Articles</h2> <ul class="list"> <li class="list_item"> <a href="/documentation/component.html">Component</a> </li> <li class="list_item"> <a href="/documentation/each.html">Each</a> </li> </ul> </div> </div> '),yi=new Ae("component-component",'<div id="documentation_main"> <template data-cample="sidebar-component"></template> <div class="documentation_page"> <h1>Component</h1> <hr class="section_line"> <h2>About</h2> <p>Component - the main concept of the framework. Almost the entire structure built using the framework is based on a component approach.</p> <p>The Component itself is a specific fragment of the site, be it a button, a list, or a text block, etc.</p> <h2>Class function</h2> <pre><code>const newComponent = component("new-component", "HTML");</code></pre> <h2>Arguments</h2> <p>The Component includes three arguments, the first of which is the value of the "data-cample" attribute (selector), the second is an HTML template containing string interpolation, and the third is a settings object.</p> <h3>selector</h3> <p>The selector is the value of the "data-cample" attribute of the template in which the component will be rendered. For example, if the selector is set to "new-selector", then the HTML "template" into which the component will be rendered will look like this:</p> <pre><code>&lt;template data-cample="new-selector"&gt;&lt;/template&gt;</code></pre> <p>It is worth noting that there can be as many "template" tags on a site as you like (within the memory of the machine where the site is located). That is, if there are 100 "templates" with the "new-component" attribute, then 100 components will be rendered.</p> <h3>template</h3> <p>A template is essentially a string that will be rendered in the "template" with attribute "data-cample". This string provides for string interpolation, which means replacing the content in double curly braces with the template corresponding to it in javascript HTML. An example of a template with string interpolation:</p> <pre><code>("new-component", \n`&lt;div class="component"&gt;\n    &lbrace; &lbrace;component_text&rbrace; &rbrace;\n&lt;/div&gt;`,\n{\n    data:()=>{\n        return {\n            component_text:"Text"\n        }\n    }\n})</code></pre> <p>Usually, the values for string interpolation in a template are located in the options object, and more specifically in the data function. Options object will be discussed in the next paragraph.</p> <h3>options</h3> <p>The options object describes the scripts, attributes, data, styles of the component, etc. Each of the listed properties describes a property of an object.</p> <h4>script</h4> <p>An array with two values is passed to the script object property, the first of which is a function that accepts the values of the component element, current data, as well as dynamic data functions and imported data and is triggered depending on the settings, and the second value is a script settings object that accepts one argument : "start". This argument takes three values: “beforeLoad”, “afterLoad” and undefined. This setting describes when the script function should be executed before or after the component is loaded. If the values are not defined, the function will be loaded after. Example script:</p> <pre><code>{\n    script: [\n        ({ element, functions, currentData, importedData }) => {\n        element.addEventListener("click", () => {\n            console.log(elements.component);\n        });\n        const updateFunction = (e) => {\n            functions?.updateText((data) => {\n                return "newText";\n            });\n        };\n        document.addEventListener("onload", updateFunction);\n            console.log(data);\n        },\n        {\n            start: "afterLoad",\n        },\n    ],\n    data: () => {\n        return {\n            dynamicText: "Text",\n        };\n    },\n    dataFunctions: {\n        updateText: "dynamicText",\n    },\n}</code></pre> <p>Also, the framework supports a script without an array. That is, a function can also be passed to a value.</p> <pre><code>{\n    script:({ element, functions, currentData, importedData })=>{\n        console.log("123");\n    }\n}</code></pre> <p>The function is running after loading by default.</p> <h4>attributes</h4> <p>The attributes property contains an object of the HTML attributes and their values that will be processed in the HTML "template". An example of the attributes:</p> <pre><code>("new-component", \n`text`,\n{\n    attributes:{\n        id:"id"\n    }\n})</code></pre> <p>In this example, the component with the "new-component" selector will be assigned an "id" attribute with the value id.</p> <h4>data</h4> <p>The data property contains a function that returns an object with properties that are processed in the template using string interpolation. These properties accept values with any data type. The function takes an object with imported data as arguments.</p> <pre><code>("new-component", \n`&lt;div class="component"&gt;\n    &lbrace; &lbrace;component_text&rbrace; &rbrace;\n    &lbrace; &lbrace;component_array_texts&rbrace; &rbrace;\n    &lbrace; &lbrace;dynamicData.value&rbrace; &rbrace;\n&lt;/div&gt;`,\n  {\n    data: ({ importedData }) => {\n      return {\n        component_text: "ComponentText",\n        component_array_texts: ["Text"],\n        dynamicData: {\n            value:"Data"\n        },\n      };\n    },\n  };\n);</code></pre> <p>All values are passed through the String() function before being assigned. Also, if the value is an object, then its properties can be accessed through a dot, as is done in vanilla js.</p> <h4>dataFunctions</h4> <p>The dataFunctions property is intended for creating data update functions. That is, this property accepts an object of type "function name": "the first data keyword without dots".</p> <pre><code>{\n    data: () => {\n        return {\n            component_text: "ComponentText",\n        };\n    },\n    dataFunctions:{\n        setComponentText:"component_text"\n    }\n}</code></pre> <p>These functions are passed in function arguments in a script property. More precisely, in the object in the “function” property. And also, they are available in the functions property.</p> <h4>functions</h4> <p>The functions property takes in an object of properties whose value is an array with the function and the name of the updating function from dataFunction, as in export in functions.</p> <pre><code>{\n    data: () => {\n        return {\n            component_text: "ComponentText",\n        };\n    },\n    dataFunctions:{\n        setComponentText:"component_text"\n    },\n    functions: {\n        updateComponentText: [\n          (setData, event) => (arguments) => {\n            event.preventDefault();\n            setData(() => "123");\n          },\n          "setComponentText",\n        ],\n    }\n}</code></pre> <p>In the array, the first function will receive the data updating function from dataFunctions as the first argument and the Event object as the second argument, and all the arguments that were specified either in the template or in the script object will be passed to the second function. Using a closure, the second function will have access to both the arguments that were passed and the updating function.</p> <p>In template, a call to such a function will look like this:</p> <pre><code>&lt;div class="{ {component_text} }"&gt;\n    &lt;div id="{ {component_text} }"&gt;\n        &lt;div :click={ {updateComponentText(setComponentText)} } &gt;{ {setComponentText} }&lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</code></pre> <p>As arguments in this form, the function takes only property names from the data property. All event names come from vanilla in javascript, as if the addEventListener method was applied to the element.</p> <p>In the framework, the "click" event is synthetic.</p> <h4>import</h4> <p>The import property sets the "data-cample-import" attribute. This attribute specifies data to import specific exported data. An example of the import:</p> <pre><code>import:{\n    value:["text"],\n    exportId:"textId"\n}</code></pre> <p>For example, if a component was given import data in other components, then the import object will overwrite them in the tag attribute.</p> <h5>value</h5> <p>The value property on the import object specifies a list of exported values that will be imported into the component. An example of the value:</p> <pre><code>{\n    value:["text", "text1"]\n}</code></pre> <p>In this example, two values are passed to the "data-cample-import" property: "text" and "text1".</p> <h5>exportId</h5> <p>In order to understand which component to import data from, the import object provides such a property as exportId. This property is set in the component that exports the data. It is set either in the options object. An example of the exportId:</p> <pre><code>{\n    exportId:"textId"\n}</code></pre> <p>In this example, the data will be imported from a component that will have its exportId set to "textId".</p> <h4>export</h4> <p>Thanks to the export property, you can send data and functions from the component. The value for this property is an object with properties that take the value of an object consisting of two properties - "data" and "functions". The data object contains the data from the "data" property, the functions object contains the data from the "functions" property.</p> <pre><code>{\n    data: ({ importedData }) => {\n        return {\n            component_text: "Text",\n        };\n    },\n    dataFunctions: {\n        updateText: "component_text",\n    },\n    export: {\n        dataToExport: {\n            data: {\n                text: "component_text",\n            },\n            functions: {\n                setText: [\n                    (setData) => (txt) => {\n                        setData(() => txt);\n                    },\n                    "updateText",\n                ],\n            },\n        },\n    }\n}</code></pre> <p>The data property of the "dataToExport" object specifies the name of the data from the properties of the "data" object and gives them a new key for export, the "functions" property in the same object specifies an array, the first argument of which is a function with a closure, and the second is the name of the exported function from "dataFunctions" object. In the first array argument, the argument of the first function is the data update function that was specified in the second array argument. The argument of the second function is the data that changes.</p> <p>In order to export data to a specific component, in addition to exportId, needed to "pass an object" to the value of the "data-cample-import" attribute of the desired component.</p> <pre><code>\n`&lt;div class="component"&gt;\n    &lt;template data-cample-import="{ { {dataToExport} } }"\n    data-cample="another-component"&gt;&lt;/template&gt;\n&lt;/div&gt;`</code></pre> <p>The property for the imported object can be different, in this example the property is the "dataToExport" property.</p> <h4>exportId</h4> <p>The exportId property specifies the export identifier, by which the component will "determine" where to get the data from. An example of the exportId:</p> <pre><code>{\n    exportId:"textId"\n}</code></pre> <p>In this example, to export specific data, "exportId" is set with the value "textId".</p> <h4>style</h4> <p>The style property contains a string that is inserted into the HTML style tag. This string is the stylesheet syntax, i.e. cascading style sheets syntax. An example of a style:</p> <pre><code>("new-component", \n`&lt;div class="component"&gt;\n    Text\n&lt;/div&gt;`,\n{\n    style:`\n        .component{\n            width:100px;\n            height:100px;\n        }\n    `\n});</code></pre> <p>Component styles are rendered in the style tag, thus it is possible to create styles in one component for another.</p> <h4>values</h4> <p>The values property takes the value of an object whose property has a value of an object that generates dynamic data depending on a condition.</p> <pre><code>values: {\n    selectedValue: {\n        "currentData.select === currentData.true":"selected",\n        "!(currentData.currentClass && currentData.false) == currentData.anotherProperty":["class1","{ {currentData.class2} }"]\n    },\n}</code></pre> <p>In this example, only the values from the data property are used in the conditions; in their values, you can write both regular text and text with string interpolation. If the value is a string, then if true, the value will be this string, and if false, then "". If the value is an array of two strings, then it works like a ternary operator, when if true is the first value, if false is the second value.</p> <b>**Also, it\'s worth noting that difficult conditions are still being tested! The code may produce other values of true or false! It is highly recommended to use simple conditions with one or more operators!**</b> <h5>HTML before</h5> <pre><code>&lt;div class="class { { [selectedValue] } }"&gt;\n    { { [selectedValue] } }\n&lt;/div&gt;</code></pre> <h5>HTML after</h5> <pre><code>&lt;div class="class selected class1"&gt;\n    selected\n&lt;/div&gt;</code></pre> <p>Also, it\'s worth noting that in string interpolation, values are "passed as an array". The key to the dynamic string in this example is the "selectedValue" value.</p> <h4>trimHTML</h4> <p>Depending on the value of the trimHTML property, the javascript trim() method is applied to the HTML string.</p> <pre><code>{\n  trimHTML:false\n}</code></pre> <p>This will avoid the errors associated with rendering a single Element in the component, but also the HTML may not be displayed correctly.</p> <h2>Example code</h2> <pre><code>new Component(\n"new-component",\n`&lt;div class="{ {[selected]} } component" :click={ {setText1(component_text)} }&gt;\n    &lbrace; &lbrace;component_text&rbrace; &rbrace;\n    &lbrace; &lbrace;dynamicData&rbrace; &rbrace;\n    &lt;template data-cample-import="{ { {exportData} } }"\n    data-cample="another-component"&gt;&lt;/template&gt;\n&lt;/div&gt;`,\n{\n    script: [\n    ({ element, functions }) =&gt; {\n        console.log(element);\n        const updateFunction = (e) =&gt; {\n        functions?.updateText((data) =&gt; {\n            return "newText";\n        });\n        };\n        document.addEventListener("onload", updateFunction);\n    },\n    {\n        start: "afterLoad",\n    },\n    ],\n    attributes: {\n        id: "id",\n    },\n    data: ({ importedData }) => {\n        return {\n            component_text: "Text",\n        };\n    },\n    style: `\n        .component{\n            width:100px;\n            height:100px;\n        }\n    `,\n    dataFunctions: {\n        updateText: "component_text",\n    },\n    functions: {\n        setText1: [\n            (setData, event) => (txt) => {\n                event.preventDefault();\n                setData(() => txt);\n            },\n            "updateText",\n        ],\n    },\n    export: {\n        exportData: {\n            data: {\n                text: "component_text",\n            },\n            functions: {\n                setText: [\n                    (setData) => (txt) => {\n                        setData(() => txt);\n                    },\n                    "updateText",\n                ],\n            },\n        },\n    },\n    values: {\n        selected: {\n            "!!component_text": "selected"\n        },\n    },\n    exportId: "textId",\n    import: {\n        value: ["text1"],\n        exportId: "textId1",\n    },\n    trimHTML: false,\n}\n);</code></pre> <h2>Component table</h2> <table> <thead> <tr> <th colspan="3">Arguments</th> </tr> <tr> <th>Name</th> <th>Usage</th> <th>Type</th> </tr> </thead> <tbody> <tr> <td>selector</td> <td>The value of the "data-cample" property of the template tag into which the component will be rendered.</td> <td>SelectorType</td> </tr> <tr> <td>template</td> <td>HTML rendering template including string interpolation.</td> <td>string</td> </tr> <tr> <td>options</td> <td>Object options.</td> <td>ComponentOptionsType | undefined</td> </tr> </tbody> </table> <h2>Articles</h2> <ul class="list"> <li class="list_item"> <a href="/documentation/cample.html">Cample</a> </li> </ul> </div> </div>'),gi=new Ae("introduction-component",'<div id="documentation_main"> <template data-cample="sidebar-component"></template> <div class="documentation_page"> <h1>Introduction</h1> <hr class="section_line"> <h2>About</h2> <p>Cample.js is an actively developed and maintained framework that supports many modern technology solutions for creating a website. The component-based approach, as well as reactivity without a virtual DOM and data export and import, will make building a site much faster than if the site was developed using js alone. Moreover, the framework is new and you can try it as something new when creating a website.</p> <p>Cample - combination of words component and example.</p> <p>Framework is quite fast in speed tests, which increases the speed of creating a user interface on the site.</p> <p>The development of the framework has been underway for more than a year. During this time, a lot of working functionality was implemented that will allow you to create websites with convenience.</p> <h2>Articles</h2> <ul class="list"> <li class="list_item"> <a href="/documentation/installation.html">Installation</a> </li> <li class="list_item"> <a href="/documentation/getting-started.html">Getting started</a> </li> </ul> </div> </div> '),vi=new Ae("types-component",'<div id="documentation_main"> <template data-cample="sidebar-component"></template> <div class="documentation_page"> <h1>Types:</h1> <hr class="section_line"> <h2>About:</h2> <p>Types (types.d.ts) in a Cample.js.</p> <pre>\n        <code>type OptionsType = {\n  [key: string]: any;\n};\n\ntype CampleOptionsType = {\n  replaceTags?: boolean;\n  trimHTML?: boolean;\n};\n\ntype ImportType = Array&lt;string&gt;;\n\ntype BindType = Array&lt;string&gt;;\n\ntype TemplateType = string | undefined;\n\ntype IndexType = number;\n\ntype ImportObjectType = {\n  value: ImportType;\n  exportId?: ExportIdType;\n  isDynamic?: boolean;\n  importIndex?: IndexType;\n};\n\ntype ComponentType =\n  | string\n  | {\n      selector: string;\n      import?: ImportType | ImportObjectType;\n      bind?: BindType;\n    }\n  | undefined;\n\ntype ComponentsType = Array&lt;ComponentType&gt;;\n\ntype ImportObjectStringType = {\n  import: string;\n  exportId: ExportIdType | undefined;\n  index: IndexType;\n  importIndex?: IndexType;\n};\n\ntype ComponentsTernaryType = [ComponentType, ComponentType];\n\ntype ConditionType = boolean | undefined;\n\ntype SelectorType = string | undefined;\n\ntype StyleType = string | undefined;\n\ntype LengthType = number;\n\ntype RenderType = "default" | "dynamic";\n\ntype UpdatingSetType = Map&lt;any, any&gt;;\n\ntype FunctionsArray = Array&lt;any&gt;;\n\ntype RenderComponentType =\n  | "cycle"\n  | "component"\n  | "animation"\n  | "ternary"\n  | "addition"\n  | "if"\n  | "each";\n\ntype AttributesType = {\n  [key: string]: string;\n};\n\ntype DataAttributeType = {\n  selector: string;\n  value: string | undefined;\n};\n\ntype EachDataObjectType = {\n  [key: string]: any;\n};\ntype EachTemplateArgumentType = {\n  [key: string]: any;\n};\ntype EachTemplateFunction = (\n  argument?: EachTemplateArgumentType,\n  index?: number\n) =&gt; string;\n\ntype EachDataValueType = Array&lt;any&gt;;\n\ntype EachDataFunctionType = (\n  argument?: DataFunctionArgumentsType\n) =&gt; EachDataValueType;\n\ntype DataAttributesArrayType = Array&lt;DataAttributeType&gt;;\n\ntype AttrValueType = {\n  [key: string]: any;\n};\n\ntype AttributesValType = {\n  name?: string;\n  value?: string | [string, boolean];\n  keys?: {\n    [key: string]: CurrentKeyType;\n  };\n  oldValue?: string;\n};\ntype AttributesValObjType = {\n  id: IdType;\n  attrs: AttributesValType;\n};\ntype DynamicEl = Element | undefined;\ntype DynamicEls = Array&lt;Element&gt;;\ntype DynamicElement = {\n  el: DynamicEl;\n  els: DynamicEls;\n};\n\ntype DynamicTextType = {\n  key?: CurrentKeyType;\n  isProperty?: boolean;\n  texts?: Array&lt;Text | number&gt;;\n};\n\ntype DynamicTextArrayType = Array&lt;DynamicTextType&gt;;\n\ntype TextArrayType = Array&lt;Text&gt;;\n\ntype DynamicFunctionsType = {\n  [key: string]: (attribute?: any) =&gt; void;\n};\n\ntype DataComponentType = DataType | DataFunctionType | undefined;\n\ntype DynamicDataType = {\n  value: DataComponentType;\n  oldValue?: DataComponentType;\n  importData?: ImportDataType;\n  id: number;\n};\n\ntype DynamicEachDataType = {\n  value: EachDataValueType;\n  oldValue?: EachDataValueType;\n  importData?: ImportDataType;\n  id: number;\n};\n\ntype ElementIndexType = {\n  id: number;\n  path: Array&lt;number&gt;;\n};\ntype FunctionEventObjType = {\n  render?: FunctionEventType;\n};\n\ntype ValueValueType =\n  | FunctionEventObjType\n  | AttributesValType\n  | DynamicTextType\n  | CampleImportType\n  | ClassType;\ntype FunctionEventType = (...args: any[]) =&gt; any;\ntype FunctionsEventsType = Array&lt;FunctionEventType&gt;;\ntype EventType = {\n  id: IdType;\n  events: FunctionsEventsType;\n};\n\ntype EventsType = Array&lt;EventType&gt;;\n\ntype CampleImportType = {\n  value?: string;\n};\n\ntype ValueItemType = {\n  value: string | CurrentKeyType;\n  render: (...args: any[]) =&gt; string;\n};\n\ntype ValueItemsType = {\n  value: ValueItemType | Array&lt;ValueItemType&gt;;\n  render: (...args: any[]) =&gt; string;\n};\ntype OldClassListType = {\n  [key: string]: any;\n};\ntype ClassType = {\n  classes?: ValueItemsType;\n  old?: string;\n};\n\ntype RenderedKeyType = string | DynamicKeyObjectType | undefined;\n\ntype ValueType = {\n  id?: IdType | IndexObjNode;\n  type: number; //"event" | "dynamicText" | "attribute" | "import" | "class"\n} & FunctionEventObjType &\n  AttributesValType &\n  DynamicTextType &\n  CampleImportType &\n  ClassType;\ntype ValuesTemplateType = Array&lt;ValueType&gt;;\ntype NodeDOMType = {\n  id: number;\n  parentNode: NodeDOMType | null;\n  path: Array&lt;IndexObjNode&gt;;\n  nextNode: NodeDOMType | null;\n  siblings: Array&lt;NodeDOMType&gt;;\n};\ntype DynamicNodesObjectType = {\n  [key: string]: Array&lt;IndexObjNode&gt;;\n};\ntype RenderNodeFunctionType = (...args: any[]) =&gt; ChildNode | null;\ntype IndexObjNode = {\n  id?: number;\n  node?: NodeDOMType;\n  rootId: number;\n  render?: RenderNodeFunctionType;\n  dynamicNodes?: Array&lt;IndexObjNode&gt;;\n  isNext?: boolean;\n  isText?: boolean;\n};\ntype EachTemplateNodesType = Array&lt;IndexObjNode&gt;;\ntype EachTemplateType = {\n  el: Element | null;\n  key?: ValueItemsType;\n  nodes: EachTemplateNodesType;\n  values: ValuesTemplateType;\n};\n\ntype ElementsType = Element[];\ntype DynamicNodeComponentNodeType = ChildNode | null | undefined;\ntype DynamicNodeComponentParentNodeType = ParentNode | null | undefined;\ntype DynamicDataValueType = DataComponentType | EachDataValueType;\ntype EachDynamicNodeComponentType = {\n  import?: ImportObjectType;\n  parentNode: ParentNode;\n  template?: EachTemplateType;\n  keys?: ArrayStringType;\n  dataFunctions: FunctionsType;\n  functions: FunctionsType;\n  nodes: Array&lt;NodeType&gt;;\n  nodeNext: DynamicNodeComponentNodeType;\n  nodePrevious: DynamicNodeComponentNodeType;\n  id: number;\n};\ntype ImportDataType = {\n  [key: string]: any;\n};\ntype DataExportObjectDataType = {\n  [key: string]: ExportTemplateDataType;\n};\ntype DataIndexesValueType = {\n  [key: string]: Array&lt;number | [number]&gt;;\n};\n\ntype DataIndexesObjectType = {\n  data: DataIndexesValueType;\n  functions: DataIndexesValueType;\n};\n\ntype DataIndexesType = {\n  [key: string]: DataIndexesObjectType;\n};\n\ntype ExportObjectDataType = {\n  data: DataExportObjectDataType;\n  indexesData: DataIndexesType;\n  index: number;\n  constructor: DataExportObjectDataType;\n};\n\ntype ExportObjectDataArrayType = Array&lt;ExportObjectDataType&gt;;\n\ntype ComponentDynamicNodeComponentType = {\n  id: number;\n  dataFunctions: FunctionsType;\n  functions: FunctionsType;\n  exportData?: ExportDataType;\n  nodes: Array&lt;NodeType&gt;;\n  exportObject?: ExportObjectDataType;\n  import?: ImportObjectType;\n};\ntype ArrayAnyType = Array&lt;any&gt;;\n\ntype DataExportObjectType = {\n  [key: string]: ExportDataArrayType;\n};\n\ntype DynamicNodeComponentType =\n  | EachDynamicNodeComponentType\n  | ComponentDynamicNodeComponentType;\n\ntype LastNodeType = Element | ChildNode | ParentNode;\n\ntype ScriptArgumentsType = {\n  element: Element | null;\n  functions: FunctionsType | undefined;\n  currentData: DataType | undefined;\n  importedData?: DataType;\n};\n\ntype DynamicType = {\n  data: {\n    values: Array&lt;DynamicDataType | DynamicEachDataType&gt;;\n    components: Array&lt;DynamicNodeComponentType&gt;;\n    currentId: number;\n  };\n};\ntype ValuesArguments = {\n  [key: string]: any;\n};\ntype ValuesValueType = {\n  [key: string]: string | [string, string];\n};\ntype ValuesType = {\n  [key: string]: ValuesValueType;\n};\ntype ArgumentsArrayType = Array&lt;any&gt;;\n\ntype EventGetDataType = (\n  key: string,\n  dataId: number,\n  index?: IndexType\n) =&gt; any;\n\ntype EventEachGetDataType = (\n  key: string,\n  dataId: number,\n  keyEl: string | undefined,\n  index: number\n) =&gt; any;\n\ntype EventEachGetFunctionType = (\n  key: string,\n  dataId: number,\n  keyEl: string | undefined,\n  functions?: FunctionsType\n) =&gt; any;\n\ntype EventFunctionType = (...args: any[]) =&gt; any;\n\ntype ListenerValueType = {\n  value: EventKeyObjectType;\n  fn?: EventFunctionType;\n};\n\ntype ListenersType = {\n  [key: string]: ListenerValueType;\n};\ntype DynamicTextsObj = {\n  id: IdType;\n  dynamicTexts: DynamicTextArrayType;\n};\ntype DynamicTextsType = Array&lt;DynamicTextsObj&gt;;\ntype DynamicAttributesType = Array&lt;AttributesValObjType&gt;;\n\ntype OperandType = {\n  value: KeyValuesValueConditionType | CurrentKeyType;\n  priority?: number;\n  type?: number;\n  oldType?: number;\n  render: (...args: any[]) =&gt; any;\n};\ntype OperationType = {\n  value: number;\n  priority?: number;\n  render: (...args: any[]) =&gt; any;\n};\n\ntype ConnectingOperationType = {\n  priority: number;\n  value: OperationType | OperandType;\n};\ntype KeyValuesValueConditionType = {\n  operands: Array&lt;OperandType | OperationType | KeyValuesValueConditionType&gt;;\n  priority?: number;\n  oldBracketType?: number;\n  isFirstOperation?: boolean;\n  connectingOperations?: ConnectingOperationType[];\n  render?: (...args: any[]) =&gt; boolean;\n};\ntype RenderConditionType = (...args: any[]) =&gt; any;\ntype ValueKeyStringType = {\n  valueClass: {\n    value: ValueItemType | Array&lt;ValueItemType&gt;;\n    render: (...args: any[]) =&gt; void;\n  };\n};\n\ntype KeyValuesValueType = {\n  condition: KeyValuesValueConditionType;\n  values: ValueKeyStringType | [ValueKeyStringType, ValueKeyStringType];\n  render: (...args: any[]) =&gt; void;\n};\ntype KeyValuesType = KeyValuesValueType[];\ntype CurrentKeyType = {\n  originKey: string;\n  key: string;\n  properties?: Array&lt;string&gt;;\n  values?: KeyValuesType | KeyValuesValueType;\n  render?: (...args: any[]) =&gt; any;\n  isProperty?: boolean;\n  originType: number;\n  isClass?: boolean;\n  isValue: boolean;\n};\ntype NodeTextType = {\n  key: CurrentKeyType;\n  value: string;\n};\n\ntype NodeValueType = {\n  render: any;\n  type: number; // "dynamicText" | "attribute" | "class"\n} & AttributesValType &\n  NodeTextType &\n  ClassType;\ntype NodeValuesType = Array&lt;NodeValueType&gt;;\ntype NodeType = {\n  isNew?: boolean;\n  index: number;\n  key?: string;\n  el?: Node;\n  values: NodeValuesType;\n  dataId: number;\n};\n\ntype ArrayNodeType = Array&lt;NodeType&gt;;\n\ntype DynamicKeyObjectType = {\n  key: string;\n  properties: Array&lt;string&gt;;\n};\ntype DynamicKeyObjectArrayType = Array&lt;DynamicKeyObjectType&gt;;\n\ntype EventKeyObjectType = {\n  key: string;\n  arguments: ArgumentsArrayType;\n};\n\ntype EventKeyObjectArrayType = Array&lt;EventKeyObjectType&gt;;\n\ntype DynamicKeyType = string | DynamicKeyObjectType;\n\ntype DynamicKeyArrayType = Array&lt;DynamicKeyType&gt;;\n\ntype ArrayStringType = Array&lt;string&gt;;\n\ntype ElementType = {\n  selector: string;\n  id?: string;\n  class?: string;\n  attributes?: AttributesType;\n};\n\ntype FunctionsArrayType = [\n  (...args: any[]) =&gt; (...args: any[]) =&gt; any,\n  string\n];\ntype FunctionsObjType = {\n  [key: string]: string | FunctionsArrayType;\n};\n\ntype RootOptionsType = {\n  attributes?: AttributesType;\n  style?: StyleType;\n  replaceTag?: boolean;\n  replaceTags?: boolean;\n  trimHTML?: boolean;\n  export?: ExportDataType;\n  exportId?: ExportIdType;\n};\n\ntype DefaultOptionsType = RootOptionsType & {\n  element?: ElementType;\n};\n\ntype ComponentRenderType = "dynamic" | "static";\n\ntype DefaultDataOptionsType = RootOptionsType & {\n  import?: ImportObjectType;\n  script?: ScriptType;\n  values?: ValuesType;\n  dataFunctions?: FunctionsObjType;\n  functions?: FunctionsOptionType;\n};\ntype IndexValueDataType = {\n  [key: string]: number;\n};\ntype IndexValuFunctionsType = {\n  [key: string]: number;\n};\ntype IndexValuesType = {\n  data: IndexValueDataType;\n  functions: IndexValuFunctionsType;\n};\ntype ArrayExportTamplateStringType = Array&lt;string | undefined&gt;;\n\ntype ExportTemplateDataType = {\n  data: {\n    [key: string]: ArrayExportTamplateStringType;\n  };\n  functions: {\n    [key: string]: ExportTemplateFunctionArrayType;\n  };\n};\n\ntype ImportObjectArrayType = {\n  data?: ArrayStringType;\n  functions?: ArrayStringType;\n};\n\ntype ExportTemplateDataNewType = {\n  data: {\n    [key: string]: ArrayExportTamplateStringType | string;\n  };\n  functions: {\n    [key: string]: ExportTemplateFunctionArrayType;\n  };\n};\n\ntype ExportTemplateFunctionArrayType = Array&lt;\n  FunctionsOptionValueType | undefined\n&gt;;\n\ntype FunctionsOptionFunctionType = (...args: any[]) =&gt; void;\n\ntype FunctionsOptionValueType = [FunctionsOptionFunctionType, string];\n\ntype FunctionsOptionType = {\n  [key: string]: FunctionsOptionValueType;\n};\n\ntype ExportTemplateValueDataType = {\n  [key: string]: string | ArrayStringType;\n};\ntype TemplateExportValueType = {\n  data?: ExportTemplateValueDataType;\n  functions?: FunctionsOptionType;\n};\n\ntype ExportDynamicType = {\n  [key: string]: TemplateExportValueType;\n};\n\ntype IterationFunctionType = (...args: any[]) =&gt; void;\n\ntype EachOptionsType = DefaultDataOptionsType & {\n  functionName?: string;\n  valueName?: string;\n  importedDataName?: string;\n  componentData?: boolean;\n  indexName?: string;\n  iteration?: IterationFunctionType;\n};\n\ntype DataPropertyType = {\n  value?: any;\n};\n\ntype DataType = {\n  [key: string]: any | DataPropertyType;\n};\n\ntype StartType = "afterLoad" | "beforeLoad";\n\ntype ScriptOptionsType = {\n  start?: StartType;\n};\n\ntype ExportDataArrayType = Array&lt;ExportDataType | undefined&gt;;\n\ntype IdType = number | undefined;\n\ntype ScriptFunctionType = (...args: any[]) =&gt; void;\ntype CycleValueType = { value: string; index: string };\ntype ScriptType =\n  | [ScriptFunctionType, ScriptOptionsType]\n  | ScriptFunctionType;\n\ntype ExportDataValuesValueType = {\n  [key: string]: any;\n};\n\ntype ExportDataType = {\n  [key: string]: ExportDataValuesValueType;\n};\n\ntype ExportDataValueType = {\n  value: {\n    [key: string]: any;\n  };\n  components: Array&lt;any&gt;;\n};\n\ntype ExportCampleDataType = {\n  [key: string]: ExportDataValueType;\n};\ntype ComponentTemplateType = string | ComponentTemplateFunctionType;\ntype ComponentTemplateArgumentType = {\n  data: DataType | undefined;\n};\ntype ComponentTemplateFunctionType = (\n  argument?: ComponentTemplateArgumentType\n) =&gt; string;\n\ntype ExportFunctionDataOptionsType = {\n  data: DataType | undefined;\n};\n\ntype ExportFunctionDataType = (\n  arg: ExportFunctionDataOptionsType\n) =&gt; ExportDataType;\n\ntype ExportDynamicDataType = ExportFunctionDataType | ExportDataType;\n\ntype DataFunctionArgumentsType = {\n  importedData?: ExportDataType;\n  currentData?: DataType | EachDataValueType;\n};\n\ntype DataFunctionType = (\n  argument?: DataFunctionArgumentsType\n) =&gt; DataType;\n\ntype ComponentOptionsType = DefaultDataOptionsType & {\n  data?: DataType | DataFunctionType;\n};\n\ntype AnimationElementType = {\n  selector: string;\n  id?: string;\n  class?: string;\n  transition?: string;\n  attributes?: AttributesType;\n};\n\ntype ExportIdType = string | number;\n\ntype AnimationOptionsType = {\n  event: string;\n  reverseEvent?: string;\n  attributes?: AttributesType;\n  styleAnimation: string;\n  style?: string;\n  class: string;\n  transition?: string;\n  element?: AnimationElementType;\n  replaceTag?: boolean;\n  replaceTags?: boolean;\n  trimHTML?: boolean;\n  export?: ExportDataType;\n  exportId?: ExportIdType;\n};\n\ntype FunctionsType = {\n  [key: string]: any;\n};</code></pre> </div> </div>');var bi=new URL(n(305),n.b);const xi=new Ae("getting-started-component",'<div id="documentation_main"> <template data-cample="sidebar-component"></template> <div class="documentation_page"> <h1>Getting started</h1> <hr class="section_line"> <h2>Starting usage</h2> <p>After setting <a href="/documentation/installation.html">the starting point</a> of the application, the js file will contain the following code, or the same one, but with html import.</p> <h3>Javascript file</h3> <pre><code>const newComponent = component(\n    "new-component",\n    `&lt;div class="component"&gt;\n        &lt;div&gt; class="clicks" data-value="{ {dynamicData} }"&gt;Clicks:{ {dynamicData} }&lt;/div&gt;\n        &lt;button&gt; class="button"&gt;Click&lt;/button&gt;\n      &lt;/div&gt;`,\n    {\n      script: ({ element, functions }) =&gt; {\n        const button = element.querySelector(".button");\n        const updateFunction = () =&gt; {\n          functions?.updateClicks((data) =&gt; {\n            return data + 1;\n          });\n        };\n        button.addEventListener("click", updateFunction);\n      },\n      data: () =&gt; {\n        return {\n          dynamicData: 0,\n        };\n      },\n      dataFunctions: {\n        updateClicks: "dynamicData",\n      },\n    }\n  );\n  cample("#app", {\n    trimHTML: true,\n  }).render(\n    `\n    &lt;template&gt; data-cample="new-component"&gt;&lt;/template&gt;\n    `,\n    {\n        newComponent,\n    }\n);\n</code></pre> <h3>HTML file</h3> <pre><code>&lt;div id="app"&gt;&lt;/div&gt;</code></pre> <p>You can change this code to any other you want. This code is presented as an example of how the framework works.</p> <h2>Classes instance</h2> <p>In Cample.js, all components are created using "new" or "class function". The "class function" does the same thing as creating with "new".</p> <h3>new</h3> <pre><code>const newComponent \n= new Component(\n  string,\n  string,\n  object,\n  object\n);</code></pre> <h3>class function</h3> <pre><code>const newComponent \n= component(\n  string,\n  string,\n  object,\n  object\n);</code></pre> <p>The default framework uses two ways to create components. The more preferable of these is the method of creation through "class functions", since, in general, less code is obtained.</p> <h2>Importing files</h2> <p>Also, a big advantage of the syntax for creating components through creating an object instance is that when working with a component, you can import ready-made files into this syntax. For this purpose, there are HTML parsers that convert ready-made files into a line.</p> <h3>Files</h3> <img class="documentation-img" src="'+Ne()(bi)+'" alt="files"> <h3>Code</h3> <pre><code>import templateButton from "button.html";\n\nconst newComponent \n= component(\n  "component",\n  templateButton\n);</code></pre> <p>It is also important that regular HTML markup is used. The syntax that complements it will not generate an error when parsing the string. All syntax works fine when creating components.</p> <h2>Examples project</h2> <ul class="list"> <li class="list_item"> <a href="/examples.html">Example #1</a> </li> <li class="list_item"> <a href="/examples/clicker.html">Example #2</a> </li> <li class="list_item"> <a href="/examples/taskTracker.html">Example #3</a> </li> </ul> <h2>Articles</h2> <ul class="list"> <li class="list_item"> <a href="/documentation/installation.html">Installation</a> </li> <li class="list_item"> <a href="/documentation/cample.html">Cample</a> </li> </ul> </div> </div>'),wi=new Ae("button-component",'<a class="button {{[get_started]}}" href="{{link}}">{{text}}</a> ',{data:e=>({text:e?.importedData?.text,link:e?.importedData?.link,staticText:"Get started"}),import:{value:[],exportId:"contentId"},values:{get_started:{"text === staticText":"active"}}}),Ti=new Ae("note-component",'<div class="note"> <span class="note_span">Important <a class="note_link" href="https://dev.to/antonmak1/js-framework-benchmark-variations-of-the-ideal-solution-to-the-mathematical-problem-of-speed-or-why-it-is-standard-2j3d" target="_blank" rel=”noreferrer noopener”>article</a></span> </div> ',{});var ki=new URL(n(684),n.b),_i=new URL(n(565),n.b);const Ei=new Ae("reactivity-component",'<div id="documentation_main"> <template data-cample="sidebar-component"></template> <div class="documentation_page"> <h1>Reactivity</h1> <hr class="section_line"> <h2>About</h2> <p>Reactivity in the framework is understood as the ability, in response to data changes, to automatically update parts of the javascript code or HTML nodes that used this data.</p> <h3>Reactivity example</h3> <h4>Before string interpolation</h4> <pre><code>&lt;div class="&lbrace; &lbrace;component_text&rbrace; &rbrace;"&gt;\n    &lbrace; &lbrace;component_text&rbrace; &rbrace;\n&lt;/div&gt;</code></pre> <h4>After string interpolation <pre><code>&lt;div class="text"&gt;\n    text\n&lt;/div&gt;</code></pre> <h3>After updating data</h3> <pre><code>&lt;div class="text1"&gt;\n    text1\n&lt;/div&gt;</code></pre> <p>In this example, the DOM nodes seem to depend on the data that is updated in the data property in the components.</p> <p>This can also be shown in a diagram:</p> <img class="reactivity-image" src="'+Ne()(ki)+'" alt="reactivity"> <p>This diagram shows that data is updated when you use a function that updates it. That is, it is as if a single-threaded data update is being created. In future versions, the structure may change slightly due to the processing of asynchronous data.</p> <h2>With VDOM vs without VDOM</h2> <p>The main advantage of the virtual DOM is that it is a lightweight version of the real DOM, which can be manipulated and the real DOM can be updated only after the virtual DOM is ok. This lightness allows you to avoid updating the real DOM once again, which allows you to update the site relatively quickly.</p> <p>Frameworks with this technology are quite fast, if not the fastest. But the funny thing is that this layer still creates a barrier between the real DOM and the code, and also takes up memory with an essentially unnecessary object, which creates additional problems.</p> <p>In practice, working with a real DOM can also be comparable in speed to a virtual one.</p> <img src="'+Ne()(_i)+'" alt="results"> <p>This example examines the speed result of the beta version of Cample.js, which, of course, lags behind implementations with a virtual DOM in speed, but still the results are not so bad, which makes it possible to assume that this structure without a virtual DOM is quite possible</p> <h2>Example</h2> <pre><code>const newComponent = component(\n    "new-component",\n    `&lt;div class="component"&gt;\n        &lt;div&gt; class="clicks" data-value="{ {dynamicData} }"&gt;Clicks:{ {dynamicData} }&lt;/div&gt;\n        &lt;button&gt; class="button"&gt;Click&lt;/button&gt;\n      &lt;/div&gt;`,\n    {\n      script: ({ element, functions }) =&gt; {\n        const button = element.querySelector(".button");\n        const updateFunction = () =&gt; {\n          functions?.updateClicks((data) =&gt; {\n            return data + 1;\n          });\n        };\n        button.addEventListener("click", updateFunction);\n      },\n      data: () =&gt; {\n        return {\n          dynamicData: 0,\n        };\n      },\n      dataFunctions: {\n        updateClicks: "dynamicData",\n      },\n    }\n  );\n  cample("#page", {\n    trimHTML: true,\n  }).render(\n    `\n    &lt;template&gt; data-cample="new-component"&gt;&lt;/template&gt;\n    `,\n    {\n        newComponent,\n    }\n);</code></pre> <h2>Articles</h2> <ul class="list"> <li class="list_item"> <a href="/documentation/component.html">Component</a> </li> </ul> </h4></div> </div>'),Di=new Ae("each-component",'<div id="documentation_main"> <template data-cample="sidebar-component"></template> <div class="documentation_page"> <h1>Each</h1> <hr class="section_line"> <h2>About</h2> <p>The Each component is used to create repetition of HTML markup.</p> <h2>Class function</h2> <pre><code>const newEach = each("new-each",\n    ()=>["val"],\n    "&lt;div key={ {index} }&gt;&lbrace; &lbrace;data&rbrace; &rbrace;&lt;/div&gt"\n);</code></pre> <h3>Render in HTML file:</h3> <h4>HTML file</h4> <h5>before render</h5> <pre><code>&lt;template data-cample="new-each"&gt;\n    &lt;div&gt;text&lt;/div&gt;\n    &lt;div&gt;text&lt;/div&gt;\n&lt;/template&gt;</code></pre> <h5>after render</h5> <pre><code>&lt;div&gt;text&lt;/div&gt;\n&lt;div&gt;text&lt;/div&gt;</code></pre> <h2>Arguments</h2> <p>The Each component has four arguments, the first is the value of the "data-cample" attribute (selector), the second is data, the third is an HTML template containing string interpolation, and the fourth is a settings object.</p> <h3>selector</h3> <p>The selector is the value of the "data-cample" attribute of the template in which the component will be rendered. For example, if the selector is set to "new-selector", then the HTML "template" into which the component will be rendered will look like this:</p> <pre><code>&lt;template data-cample="new-each"&gt;&lt;/template&gt;</code></pre> <p>It is worth noting that there can be as many "template" tags on a site as you like (within the memory of the machine where the site is located). That is, if there are 100 "templates" with the "new-each" attribute, then 100 components will be rendered.</p> <h3>data</h3> <p>The data is a function that returns an array on which to perform repetition of the HTML markup. An examples of a data:</p> <pre><code>({importedData, currentData})=>[\n    ...importedData,\n    ...currentData,\n    "value"\n]</code></pre> <p>Also, the function arguments receive an object with two properties, the first of which is the current data, and the second is the imported data. In order to modify the old data thanks to the new ones without overwriting the old ones, the current data is provided.</p> <h3>template</h3> <p>A template is essentially a string that will be rendered in a "template" with a "data-cample" attribute. The template is different from the <a href="/documentation/component.html">Component</a> template. This template does not yet support the "data-cample-import" attribute, but other syntaxes such as ":event" are supported. In future versions, all templates will be brought to the same syntax.</p> <pre><code>&lt;div key={ {index} } class="{ {importedData.data} }"&gt;\n    &lt;div id="{ {currentData.data} }"&gt;\n        &lt;div :click={ {setData(currentData.data)} } &gt;{ { data.data } }&lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</code></pre> <p>Also, a necessary property for template is the "key" property. This property must be unique. It is needed to ensure that blocks are not overwritten when processing new data.</p> <p>The keys by which the data will be processed in the template will be the same keys that are specified in the valueName, importedDataName, indexName and functionName properties.</p> <p>Each also provides for adding an event listener for the element via string interpolation. The template itself looks like ":event="function(argumentsData)"". The data that is processed by the function in the arguments is only the data keywords from the data passed to the "template" in the string interpolation. These are data such as importedData, currentData, functions, data.</p> <h3>options</h3> <p>The options object describes the scripts, attributes, data, styles of the component, etc. Each of the listed properties describes a property of an object.</p> <h4>script</h4> <p>An array with two values is passed to the script object property, the first of which is a function that accepts the values of the component element, current data, as well as dynamic data functions and imported data and is triggered depending on the settings, and the second value is a script settings object that accepts one argument : "start". This argument takes three values: “beforeLoad”, “afterLoad” and undefined. This setting describes when the script function should be executed before or after the component is loaded. If the values are not defined, the function will be loaded after. Example script:</p> <pre><code>{\n    script: [\n        ({ element, functions, currentData, importedData }) => {\n        element.addEventListener("click", () => {\n            console.log(elements.component);\n        });\n        const updateFunction = (e) => {\n            functions?.updateText((data) => {\n                return "newText";\n            });\n        };\n        document.addEventListener("onload", updateFunction);\n            console.log(data);\n        },\n        {\n            start: "beforeLoad",\n        },\n    ],\n    functionName:"updateText"\n}</code></pre> <p>Also, the framework supports a script without an array. That is, a function can also be passed to a value.</p> <pre><code>{\n    script:({ element, functions, currentData, importedData })=>{\n        console.log("123");\n    }\n}</code></pre> <p>The function is running after loading by default.</p> <h4>iteration</h4> <p>The iteration property specifies a function that iterates exactly as many times as the number of times Each is iterated.</p> <pre><code>{\n    iteration:({ data, importedData }, index)=>{\n        console.log("123");\n    }\n}</code></pre> <p>As arguments, the function receives as the first argument an object with iteration data, the default name of which comes from "valueName" and imported data, the default name of which comes from "importedDataName", and also receives the number in the iteration as the second argument.</p> <h4>valueName</h4> <p>The valueName property sets the name of the property by which data will be available for the corresponding iteration of Each. An example of the valueName:</p> <pre><code>{\n    valueName:"dataValue"\n}</code></pre> <p>In this example, valueName is set to the value "dataValue", by which the data of a particular iteration will be available in the template. By default, valueName is "value".</p> <h4>indexName</h4> <p>The valueName property specifies the name of the property by which the iteration number will be available.</p> <pre><code>{\n    indexName:"i"\n}</code></pre> <p>In this example, indexName is set to "i", by which the iteration number will be available in template. By default, indexName is "index". Just like in vanilla js, iteration numbers start from 0.</p> <h4>functionName</h4> <p>The functionName property specifies the name of the function that changes the data in the "script" and template. An example of the functionName:</p> <pre><code>{\n    functionName:"dataFunction"\n}</code></pre> <p>In this example, functionName is set to "dataFunction" which will access the function in the "script" or template that will update the data. The default functionName is "setData".</p> <h4>functions</h4> <p>The functions property takes in an object of properties whose value is an array with the function and the name of the updating function from functionName.</p> <pre><code>{\n    functionName:"setComponentText",\n    valueName:"component_text",\n    functions: {\n        updateComponentText: [\n          (setData, event) => (arguments) => {\n            event.preventDefault();\n            setData(() => "123");\n          },\n          "setComponentText",\n        ],\n    }\n}</code></pre> <p>In the array, the first function will receive the data updating function from dataFunctions as the first argument and the Event object as the second argument, and all the arguments that were specified either in the template or in the script object will be passed to the second function. Using a closure, the second function will have access to both the arguments that were passed and the updating function.</p> <p>In template, a call to such a function will look like this:</p> <pre><code>&lt;div class="{ {component_text} }"&gt;\n    &lt;div id="{ {component_text} }"&gt;\n        &lt;div :click={ {updateComponentText(setComponentText)} } &gt;{ {setComponentText} }&lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</code></pre> <p>As arguments in this form, the function takes only property names from the data argument. All event names come from vanilla in javascript, as if the addEventListener method was applied to the element.</p> <p>In the framework, the "click" event is synthetic. In order to limit the process of floating within a specific element, there is a syntax "::", where the floating does not occur through the entire DOM, but only through the entire specific Each element.</p> <pre><code>&lt;div class="{ {component_text} }"&gt;\n    &lt;div id="{ {component_text} }"&gt;\n        &lt;div ::click={ {updateComponentText(setComponentText)} } &gt;{ {setComponentText} }&lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</code></pre> <p>It is worth noting that if in the process of surfacing a function with "::" is found, then even if the click was made as usual, then the surfacing will still go to the element.</p> <h4>importedDataName</h4> <p>The importedData property specifies the name of the imported data. An example of the importedData:</p> <pre><code>{\n    importedDataName:"newData"\n}</code></pre> <p>In this example, importedDataName is set to "newData" which will access the importedData in the "script" and template. The default importedDataName is "importedData".</p> <h4>attributes</h4> <p>The attributes property contains an object of the HTML attributes and their values that will be processed in the template. An example of the attributes:</p> <pre><code>("new-each",\n...,\n{\n    attributes:{\n        id:"id"\n    }\n})</code></pre> <p>In this example, a template with a "data-cample" value of "new-each" will be given a id "id".</p> <h4>import</h4> <p>The import property sets the "data-cample-import" attribute. This attribute specifies data to import specific exported data. An example of the import:</p> <pre><code>import:{\n    value:["text"],\n    exportId:"textId"\n}</code></pre> <p>For example, if a component was given import data in other components, then the import object will overwrite them in the tag attribute.</p> <h5>value</h5> <p>The value property on the import object specifies a list of exported values that will be imported into the component. An example of the value:</p> <pre><code>{\n    value:["text", "text1"]\n}</code></pre> <p>In this example, two values are passed to the "data-cample-import" property: "text" and "text1".</p> <h5>exportId</h5> <p>In order to understand which component to import data from, the import object provides such a property as exportId. This property is set in the component that exports the data. It is set either in the options object. An example of the exportId:</p> <pre><code>{\n    exportId:"textId"\n}</code></pre> <p>In this example, the data will be imported from a component that will have its exportId set to "textId".</p> <h4>export</h4> <b>Export under cunstruction!</b> <h4>exportId</h4> <p>The exportId property specifies the export identifier, by which the component will "determine" where to get the data from. An example of the exportId:</p> <pre><code>{\n    exportId:"textId"\n}</code></pre> <p>In this example, to export specific data, "exportId" is set with the value "textId".</p> <h4>style</h4> <p>The style property contains a string that is inserted into the HTML style tag. This string is the stylesheet syntax, i.e. cascading style sheets syntax. An example of a style:</p> <pre><code>{\n    style:`\n        .component{\n            width:100px;\n            height:100px;\n        }\n    `\n}</code></pre> <p>Each styles are rendered in the style tag, thus it is possible to create styles in one component for another.</p> <h4>values</h4> <p>The values property takes the value of an object whose property has a value of an object that generates dynamic data depending on a condition.</p> <pre><code>values: {\n    selectedValue: {\n        "currentData.select === currentData.true":"selected",\n        "!(currentData.currentClass && currentData.false) == currentData.anotherProperty":["class1","{ {currentData.class2} }"]\n    },\n}</code></pre> <p>In this example, only the values from the data property are used in the conditions; in their values, you can write both regular text and text with string interpolation. If the value is a string, then if true, the value will be this string, and if false, then "". If the value is an array of two strings, then it works like a ternary operator, when if true is the first value, if false is the second value.</p> <b>**Also, it’s worth noting that difficult conditions are still being tested! The code may produce other values of true or false! It is highly recommended to use simple conditions with one or more operators!**</b> <h5>HTML before</h5> <pre><code>&lt;div class="class { { [selectedValue] } }"&gt;\n    { { [selectedValue] } }\n&lt;/div&gt;</code></pre> <h5>HTML after</h5> <pre><code>&lt;div class="class selected class1"&gt;\n    selected\n&lt;/div&gt;</code></pre> <p>Also, it\'s worth noting that in string interpolation, values are "passed as an array". The key to the dynamic string in this example is the "selectedValue" value.</p> <h4>trimHTML</h4> <p>Depending on the value of the trimHTML property, the javascript trim() method is applied to the HTML string.</p> <pre><code>{\n  trimHTML:false\n}</code></pre> <p>This will avoid the errors associated with rendering a single Element in the component, but also the HTML may not be displayed correctly.</p> <h2>Example code</h2> <pre><code>const newEach = new Each(\n"new-each",\n() => ["val1", "val2"],\n`&lt;tr key={ {index} } id="row" class="{ {[selected]} }"&gt;\n    &lt;td&gt;{ {row.id} }&lt;/td&gt;\n    &lt;td&gt;&lt;a :click="{ {importedData.setSelected(row.id)} }"&gt;{ {row.label} }&lt;/a&gt;&lt;/td&gt;\n    &lt;td&gt;&lt;/td&gt;\n&lt;/tr&gt;`,\n{\n    values:  {\n        selected: {\n            "row.id === importedData.selected": "selected",\n        },\n    },\n    script: [\n        (obj) => console.log(obj),\n    {\n        start:"afterLoad"\n    },\n    ],\n    functions: {\n        updateRow: [\n          (setData, event) => (arguments) => {\n            event.preventDefault();\n            setData(() => "123");\n          },\n          "updateTable",\n        ],\n    }\n    valueName: "row",\n    functionName: "updateTable",\n    importedDataName: "importData",\n    import: {\n        value: ["rows", "selected", "setSelected"],\n        exportId: "mainExport",\n    },\n    exportId: "exportId",\n    trimHTML: true,\n    style: "#row{ width:10px; }",\n    attributes: {\n        id: "id",\n    },\n}\n);</code></pre> <h2>Each table</h2> <table> <thead> <tr> <th colspan="3">Arguments</th> </tr> <tr> <th>Name</th> <th>Usage</th> <th>Type</th> </tr> </thead> <tbody> <tr> <td>selector</td> <td>The value of the "data-cample" property of the template tag into which the component will be rendered.</td> <td>SelectorType</td> </tr> <tr> <td>data</td> <td>Data for repeating HTML markup.</td> <td>EachDataFunctionType</td> </tr> <tr> <td>template</td> <td>HTML rendering template including string interpolation.</td> <td>string</td> </tr> <tr> <td>options</td> <td>Object options.</td> <td>EachOptionsType | undefined</td> </tr> </tbody> </table> <h2>Articles</h2> <ul class="list"> <li class="list_item"> <a href="/documentation/Component.html">Component</a> </li> </ul> </div> </div>'),Ai=new Ae("clicker-component",'<div id="examples_main"> <template data-cample="sidebar-component"></template> <div class="example_page"> <h1 class="title">Clicker</h1> <p class="codepen" data-height="700px" data-theme-id="light" data-default-tab="js,result" data-slug-hash="rNrVjmp" data-editable="true" data-user="Camplejs" style="height:700px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:2px solid;margin:1em 0;padding:1em"> <span>See the Pen <a href="https://codepen.io/Camplejs/pen/rNrVjmp"> Reactivity without Virtual DOM</a> by Cample.js (<a href="https://codepen.io/Camplejs">@Camplejs</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> </div> </div> '),ji=new Ae("taskTracker-component",'<div id="examples_main"> <template data-cample="sidebar-component"></template> <div class="example_page"> <h1 class="title">Task Tracker</h1> <p class="codepen" data-height="700px" data-theme-id="light" data-default-tab="js,result" data-slug-hash="bGORJPG" data-editable="true" data-user="Camplejs" style="height:700px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:2px solid;margin:1em 0;padding:1em"> <span>See the Pen <a href="https://codepen.io/Camplejs/pen/bGORJPG"> Task Tracker</a> by Cample.js (<a href="https://codepen.io/Camplejs">@Camplejs</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> </div> </div> '),Ni=new Ae("tabs-component",'<div id="examples_main"> <template data-cample="sidebar-component"></template> <div class="example_page"> <h1 class="title">Tabs</h1> <p class="codepen" data-height="700px" data-theme-id="light" data-default-tab="js,result" data-slug-hash="RwdqRaY" data-editable="true" data-user="Camplejs" style="height:700px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:2px solid;margin:1em 0;padding:1em"> <span>See the Pen <a href="https://codepen.io/Camplejs/pen/RwdqRaY"> Tabs</a> by Cample.js (<a href="https://codepen.io/Camplejs">@Camplejs</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> </div> </div> '),Oi=new Ae("dataTable-component",'<div id="examples_main"> <template data-cample="sidebar-component"></template> <div class="example_page"> <h1 class="title">Data Table</h1> <p class="codepen" data-height="700" data-theme-id="light" data-default-tab="js,result" data-slug-hash="WNmYdLX" data-editable="true" data-user="Camplejs" style="height:700px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:2px solid;margin:1em 0;padding:1em"> <span>See the Pen <a href="https://codepen.io/Camplejs/pen/WNmYdLX"> Data Table</a> by Cample.js (<a href="https://codepen.io/Camplejs">@Camplejs</a>) on <a href="https://codepen.io">CodePen</a>.</span> </p> </div> </div> '),Ci=screen.width<=768||window.matchMedia&&window.matchMedia("only screen and (max-width: 768px)").matches;function Ii(e,t,n){let a=arguments.length>3&&void 0!==arguments[3]&&arguments[3],r={header:Se,footer:Fe};const i=""===window.location.pathname.slice(1)||"examples.html"===window.location.pathname.slice(1)||"examples/clicker.html"===window.location.pathname.slice(1)||"examples/tabs.html"===window.location.pathname.slice(1)||"examples/taskTracker.html"===window.location.pathname.slice(1)||"examples/dataTable.html"===window.location.pathname.slice(1);return i&&(r.note=Ti),Object.keys(t).forEach((e=>{r[e]=t[e]})),new B(e,{trimHTML:!0}).render(`\n        ${i?"{{note}}":""}\n        {{header}}\n        <div id="content">\n        ${n}\n        </div>\n        ${a?"{{footer}}":""}\n    `,r)}switch(console.log("Cample.js - fast modern javascript framework."),window.location.pathname.slice(1)){case"":Ii("#page",{content:ci,button:wi},"{{content}}",!0);break;case"examples.html":Ii("#examples",{examples:di,sidebarExample:hi},"{{examples}}",!0);break;case"examples/clicker.html":Ii("#examples",{clicker:Ai,sidebarExample:hi},"{{clicker}}",!0);break;case"examples/tabs.html":Ii("#examples",{tabs:Ni,sidebarExample:hi},"{{tabs}}",!0);break;case"examples/taskTracker.html":Ii("#examples",{taskTracker:ji,sidebarExample:hi},"{{taskTracker}}",!0);break;case"examples/dataTable.html":Ii("#examples",{dataTable:Oi,sidebarExample:hi},"{{dataTable}}",!0);break;case"documentation.html":Ii("#documentation",{documentation:pi,sidebar:ui},"{{documentation}}",Ci);break;case"documentation/cample.html":Ii("#documentation",{cample:fi,sidebar:ui},"{{cample}}",Ci);break;case"documentation/installation.html":Ii("#documentation",{installation:mi,sidebar:ui},"{{installation}}",Ci);break;case"documentation/component.html":Ii("#documentation",{component:yi,sidebar:ui},"{{component}}",Ci);break;case"documentation/each.html":Ii("#documentation",{each:Di,sidebar:ui},"{{each}}",Ci);break;case"documentation/getting-started.html":Ii("#documentation",{gettingStarted:xi,sidebar:ui},"{{gettingStarted}}",Ci);break;case"documentation/introduction.html":Ii("#documentation",{introduction:gi,sidebar:ui},"{{introduction}}",Ci);break;case"documentation/types.html":Ii("#documentation",{types:vi,sidebar:ui},"{{types}}",Ci);break;case"documentation/reactivity.html":Ii("#documentation",{reactivity:Ei,sidebar:ui},"{{reactivity}}",Ci)}})()})();