simplyflow 0.7.9 → 0.8.2

package/dist/simply.flow.js

@@ -13,7 +13,7 @@
     clockEffect: () => clockEffect,
     clone: () => clone,
     destroy: () => destroy,
-    effect: () => effect2,
+    effect: () => effect,
     makeContext: () => makeContext,
     notifyGet: () => notifyGet,
     notifySet: () => notifySet,
@@ -23,7 +23,9 @@
     trace: () => trace,
     untracked: () => untracked
   });
-  var iterate2 = Symbol("iterate");
+  if (!Symbol.iterate) {
+    Symbol.iterate = Symbol("iterate");
+  }
   if (!Symbol.xRay) {
     Symbol.xRay = Symbol("xRay");
   }
@@ -80,7 +82,8 @@
         notifySet(receiver, makeContext(property, { was: current, now: value }));
       }
       if (typeof current === "undefined") {
-        notifySet(receiver, makeContext(iterate2, {}));
+        notifySet(receiver, makeContext(Symbol.iterate, {}));
+        notifySet(receiver, makeContext("length", {}));
       }
       return true;
     },
@@ -103,18 +106,21 @@
     defineProperty: (target, property, descriptor) => {
       if (typeof target[property] === "undefined") {
         let receiver = signals.get(target);
-        notifySet(receiver, makeContext(iterate2, {}));
+        notifySet(receiver, makeContext(Symbol.iterate, {}));
       }
       return Object.defineProperty(target, property, descriptor);
     },
     ownKeys: (target) => {
       let receiver = signals.get(target);
-      notifyGet(receiver, iterate2);
+      notifyGet(receiver, Symbol.iterate);
       return Reflect.ownKeys(target);
     }
   };
   var signals = /* @__PURE__ */ new WeakMap();
   function signal(v) {
+    if (!v) {
+      v = {};
+    }
     if (v[Symbol.Signal]) {
       return v;
     }
@@ -266,7 +272,7 @@
   var effectStack = [];
   var effectMap = /* @__PURE__ */ new WeakMap();
   var signalStack = [];
-  function effect2(fn) {
+  function effect(fn) {
     if (effectStack.findIndex((f) => fn == f) !== -1) {
       throw new Error("Recursive update() call", { cause: fn });
     }
@@ -284,7 +290,7 @@
       }
       clearListeners(computeEffect2);
       computeEffect2.effectFunction = fn;
-      computeEffect2.effectType = effect2;
+      computeEffect2.effectType = effect;
       computeStack.push(computeEffect2);
       signalStack.push(connectedSignal);
       let result;
@@ -523,8 +529,11 @@
   // src/dom.mjs
   var dom_exports = {};
   __export(dom_exports, {
-    signal: () => signal2
+    signal: () => signal2,
+    trackDomField: () => trackDomField,
+    trackDomList: () => trackDomList
   });
+  var domSignals = /* @__PURE__ */ new WeakMap();
   var domSignalHandler = {
     get: (target, property, receiver) => {
       if (property === Symbol.xRay) {
@@ -558,18 +567,27 @@
       return Reflect.ownKeys(target);
     }
   };
-  function signal2(el) {
+  function signal2(el, options) {
     if (el[Symbol.xRay]) {
       return el;
     }
     if (!signals.has(el)) {
       signals.set(el, new Proxy(el, domSignalHandler));
-      domListen(el, signals.get(el));
+      domListen(el, signals.get(el), options);
     }
     return signals.get(el);
   }
   var observers = /* @__PURE__ */ new WeakMap();
-  function domListen(el, signal3) {
+  function domListen(el, signal3, options) {
+    const defaultOptions = {
+      characterData: true,
+      subtree: true,
+      attributes: true,
+      attributesOldValue: true
+    };
+    if (!options) {
+      options = defaultOptions;
+    }
     let oldContentHTML = el.innerHTML;
     let oldContentText = el.innerText;
     if (!observers.has(el)) {
@@ -587,18 +605,22 @@
               changes.innerText = oldContentText;
               oldContentText = el.innerText;
             }
+          } else if (mutation.type === "childList") {
+            changes.children = {
+              //FIXME: overwrites changes in this list path if list is rendered multiple times
+              was: Array.from(el.children)
+              //FIXME; fill in 'now'
+            };
+            changes.length = -1;
+          } else {
+            console.log("nothing to do for", el, mutation.type);
           }
         }
         for (const prop in changes) {
           notifySet(signal3, makeContext(prop, { was: changes[prop], now: el[prop] }));
         }
       });
-      observer.observe(el, {
-        characterData: true,
-        subtree: true,
-        attributes: true,
-        attributesOldValue: true
-      });
+      observer.observe(el, options);
       observers.set(el, observer);
       if (el.matches("input, textarea, select")) {
         let prevValue = el.value;
@@ -615,6 +637,65 @@
       }
     }
   }
+  function trackDomList(element2) {
+    const path = this.getBindingPath(element2);
+    if (!path) {
+      throw new Error("Could not find binding path for element", { cause: element2 });
+    }
+    const s = signal2(element2, {
+      childList: true
+    });
+    throttledEffect(() => {
+      const children = Array.from(s.children);
+      untracked(() => {
+        batch(() => {
+          let key = 0;
+          const currentList = getValueByPath(this.options.root, path);
+          const source = currentList.slice();
+          for (const item of children) {
+            if (item.tagName === "TEMPLATE") {
+              continue;
+            }
+            if (item.dataset.flowKey) {
+              if (item.dataset.flowKey != key) {
+                setValueByPath(
+                  this.options.root,
+                  path + "." + key,
+                  source[item.dataset.flowKey]
+                );
+              }
+              key++;
+            }
+          }
+          if (currentList.length > key) {
+            currentList.length = key;
+          }
+        });
+      });
+    });
+  }
+  function trackDomField(element2, props, valueIsString) {
+    if (domSignals.has(element2)) {
+      return;
+    }
+    const path = this.getBindingPath(element2);
+    if (!path) {
+      throw new Error("Could not find binding path for element", { cause: element2 });
+    }
+    const s = signal2(element2);
+    domSignals.set(element2, s);
+    batch(() => {
+      throttledEffect(() => {
+        let updateValue = s.innerHTML;
+        if (!valueIsString) {
+          updateValue = getProperties(s, ...props);
+        }
+        untracked(() => {
+          setValueByPath(this.options.root, path, updateValue);
+        });
+      });
+    });
+  }
 
   // src/bind.render.mjs
   function field(context) {
@@ -627,12 +708,6 @@
       }
     } else if (this.options.renderers["*"]) {
       this.options.renderers["*"].call(this, context);
-      if (this.options.twoway) {
-        const s = signal2(context.element);
-        effect(() => {
-          setValueByPath(this.options.root, context.path, s.innerHTML);
-        });
-      }
     }
     return context;
   }
@@ -640,6 +715,7 @@
     if (!Array.isArray(context.value)) {
       context.value = [context.value];
     }
+    const length = context.value.length;
     if (!context.templates?.length) {
       console.error("No templates found in", context.element);
     } else {
@@ -657,33 +733,64 @@
     }
     return context;
   }
+  function isInt(s) {
+    if (parseInt(s) == s) {
+      return true;
+    }
+  }
   function setValueByPath(root, path, value) {
-    let parts = path.split(".");
-    let curr = root;
-    let part;
-    part = parts.shift();
-    let prev = null;
-    let prevPart = null;
-    while (part && curr) {
-      part = decodeURIComponent(part);
-      if (part == "0" && !Array.isArray(curr)) {
-      } else if (part == ":key") {
-        throw new Error("setting key not yet supported");
-        curr = prevPart;
-      } else if (part == ":value") {
-      } else if (Array.isArray(curr) && typeof curr[part] == "undefined") {
-        prev = curr[0];
-        curr = curr[0][part];
-      } else {
-        prev = curr;
-        curr = curr[part];
-      }
-      prevPart = part;
+    batch(() => {
+      let parts = path.split(".");
+      let curr = root;
+      let part;
       part = parts.shift();
-    }
-    if (prev && prevPart && prev[prevPart] !== value) {
-      prev[prevPart] = value;
-    }
+      let prev = null;
+      let prevPart = null;
+      let prevCurr = curr;
+      while (part && curr) {
+        prevCurr = curr;
+        part = decodeURIComponent(part);
+        if (part == "0" && !Array.isArray(curr)) {
+        } else if (part == ":key") {
+          throw new Error("setting key not yet supported");
+          curr = prevPart;
+        } else if (part == ":value") {
+        } else if (Array.isArray(curr) && !isInt(part) && typeof curr[part] == "undefined") {
+          prev = curr[0];
+          curr = curr[0][part];
+        } else {
+          prev = curr;
+          curr = curr[part];
+        }
+        prevPart = part;
+        part = parts.shift();
+        if (part && !curr) {
+          const intKey = parseInt(part);
+          if (intKey >= 0 && part === "" + intKey) {
+            prevCurr[prevPart] = [];
+          } else {
+            prevCurr[prevPart] = {};
+          }
+          curr = prevCurr[prevPart];
+        }
+      }
+      if (prev && prevPart && prev[prevPart] !== value) {
+        if (value && typeof value == "object") {
+          curr = prev[prevPart];
+          if (!curr) {
+            prev[prevPart] = {};
+            curr = prev[prevPart];
+          }
+          for (const prop in value) {
+            if (curr[prop] !== value[prop]) {
+              curr[prop] = value[prop];
+            }
+          }
+        } else {
+          prev[prevPart] = value;
+        }
+      }
+    });
   }
   function arrayByTemplates(context) {
     const attribute = this.options.attribute;
@@ -743,6 +850,9 @@
         length++;
       }
     }
+    if (this.options.twoway) {
+      trackDomList.call(this, context.element);
+    }
   }
   function objectByTemplates(context) {
     const attribute = this.options.attribute;
@@ -811,7 +921,7 @@
   function input(context) {
     const el = context.element;
     let value = context.value;
-    element(context);
+    element.call(this, context);
     if (typeof value == "undefined") {
       value = "";
     }
@@ -826,8 +936,7 @@
     }
   }
   function button(context) {
-    element(context);
-    setProperties(context.element, context.value, "value");
+    element.call(this, context, "value");
   }
   function select(context) {
     const el = context.element;
@@ -888,29 +997,53 @@
     }
   }
   function anchor(context) {
-    element(context);
-    setProperties(context.element, context.value, "target", "href", "name", "newwindow", "nofollow");
+    element.call(this, context, "target", "href", "name", "newwindow", "nofollow");
+    if (this.options.twoway) {
+      batch(() => {
+        updateProperties.call(this, context, ["target", "href", "name", "newwindow", "nofollow"]);
+      });
+    }
   }
   function image(context) {
     setProperties(context.element, context.value, "title", "alt", "src", "id");
+    if (this.options.twoway) {
+      batch(() => {
+        updateProperties.call(this, context, ["title", "alt", "src", "id"]);
+      });
+    }
   }
   function iframe(context) {
     setProperties(context.element, context.value, "title", "src", "id");
+    if (this.options.twoway) {
+      batch(() => {
+        updateProperties.call(this, context, ["title", "src", "id"]);
+      });
+    }
   }
   function meta(context) {
     setProperties(context.element, context.value, "content", "id");
+    if (this.options.twoway) {
+      batch(() => {
+        updateProperties.call(this, context, ["content", "id"]);
+      });
+    }
   }
-  function element(context) {
+  function element(context, ...extraprops) {
     const el = context.element;
     let value = context.value;
-    if (typeof value == "undefined" || value == null) {
-      value = "";
+    let valueIsString = false;
+    if (typeof value != "undefined" && value !== null) {
+      let strValue = "" + value;
+      if (typeof value != "object" || strValue.substring(0, 8) != "[object ") {
+        value = { innerHTML: value };
+        valueIsString = true;
+      }
     }
-    let strValue = "" + value;
-    if (typeof value != "object" || strValue.substring(0, 8) != "[object ") {
-      value = { innerHTML: value };
+    const props = ["innerHTML", "title", "id", "className"].concat(extraprops);
+    setProperties(el, value, ...props);
+    if (this.options.twoway) {
+      trackDomField.call(this, context.element, props, valueIsString);
     }
-    setProperties(el, value, "innerHTML", "title", "id", "className");
   }
   function setProperties(el, data, ...properties) {
     if (!data || typeof data !== "object") {
@@ -930,6 +1063,17 @@
       }
     }
   }
+  function getProperties(el, ...properties) {
+    const result = {};
+    for (const property of properties) {
+      switch (property) {
+        default:
+          result[property] = el[property];
+          break;
+      }
+    }
+    return result;
+  }
   function matchValue(a, b) {
     if (a == ":empty" && !b) {
       return true;
@@ -981,7 +1125,8 @@
           "META": meta,
           "TEMPLATE": null,
           "*": element
-        }
+        },
+        twoway: false
       };
       if (!options?.root) {
         throw new Error("bind needs at least options.root set");
@@ -1269,7 +1414,7 @@
       } else if (part == ":key") {
         curr = prevPart;
       } else if (part == ":value") {
-      } else if (Array.isArray(curr) && typeof curr[part] == "undefined") {
+      } else if (Array.isArray(curr) && typeof curr[part] == "undefined" && curr[0]) {
         curr = curr[0][part];
       } else {
         curr = curr[part];

package/dist/simply.flow.min.js

@@ -1,2 +1,2 @@
-(()=>{var Te=Object.defineProperty;var $=(e,t)=>{for(var n in t)Te(e,n,{get:t[n],enumerable:!0})};var W={};$(W,{addTracer:()=>Ee,batch:()=>V,clockEffect:()=>re,clone:()=>Le,destroy:()=>R,effect:()=>ne,makeContext:()=>b,notifyGet:()=>E,notifySet:()=>w,signal:()=>S,signals:()=>c,throttledEffect:()=>T,trace:()=>Ae,untracked:()=>Me});var F=Symbol("iterate");Symbol.xRay||(Symbol.xRay=Symbol("xRay"));Symbol.Signal||(Symbol.Signal=Symbol("Signal"));var Se={get:(e,t,n)=>{if(t===Symbol.xRay)return e;if(t===Symbol.Signal)return!0;let r=e?.[t];return E(n,t),typeof r=="function"?Array.isArray(e)?(...i)=>{let s=e.length,l=r.apply(n,i);return s!=e.length&&w(n,b("length",{was:s,now:e.length})),l}:e instanceof Set||e instanceof Map?(...i)=>{let s=e.size,l=r.apply(e,i);return s!=e.size&&w(n,b("size",{was:s,now:e.size})),["set","add","clear","delete"].includes(t)&&w(n,b({entries:{},forEach:{},has:{},keys:{},values:{},[Symbol.iterator]:{}})),l}:e instanceof HTMLElement||e instanceof Number||e instanceof String||e instanceof Boolean?r.bind(e):r.bind(n):r&&typeof r=="object"?S(r):r},set:(e,t,n,r)=>{let i=e[t];return i!==n&&(e[t]=n,w(r,b(t,{was:i,now:n}))),typeof i>"u"&&w(r,b(F,{})),!0},has:(e,t)=>{let n=c.get(e);return n&&E(n,t),Object.hasOwn(e,t)},deleteProperty:(e,t)=>{if(typeof e[t]<"u"){let n=e[t];delete e[t];let r=c.get(e);w(r,b(t,{delete:!0,was:n}))}return!0},defineProperty:(e,t,n)=>{if(typeof e[t]>"u"){let r=c.get(e);w(r,b(F,{}))}return Object.defineProperty(e,t,n)},ownKeys:e=>{let t=c.get(e);return E(t,F),Reflect.ownKeys(e)}},c=new WeakMap;function S(e){return e[Symbol.Signal]?e:(c.has(e)||c.set(e,new Proxy(e,Se)),c.get(e))}var q=[],P=!1;function Ae(e,t){if(typeof e=="function")P=!0,e(),P=!1;else return te(e,t).map(r=>({effect:r.effectType,fn:r.effectFunction,signal:c.get(r.effectFunction)}))}function Ee(e){if(!e.get&&!e.set)throw new Error('simply.state: addTracer: missing "get" or "set" property in tracer',e);if(e.get&&typeof e.get!="function")throw new Error('simply.state: addTracer: "get" is not a function',e);if(e.set&&typeof e.set!="function")throw new Error('simply.state: addTracer: "set" is not a function',e);q.push(e)}function x(e,...t){for(let n of q)n[e]&&n[e](...t)}var H=new Set,k=0;function w(e,t={}){let n=[];if(t.forEach((r,i)=>{let s=te(e,i);if(s?.length){for(let l of s)ve(l,b(i,r));n=n.concat(s)}}),n=new Set(n.filter(Boolean)),n)if(k)H=H.union(n);else{let r=d[d.length-1];for(let i of Array.from(n))i!=r&&i?.needsUpdate&&(P&&q.length&&x("set",e,t,i),i()),ee(i)}}function b(e,t){let n=new Map;if(typeof e=="object")for(let r in e)n.set(r,e[r]);else n.set(e,t);return n}function ve(e,t){e.context?t.forEach((n,r)=>{e.context.set(r,n)}):e.context=t,e.needsUpdate=!0}function ee(e){delete e.context,delete e.needsUpdate}function E(e,t){let n=d[d.length-1];n&&(P&&q.length&&x("get",e,t),ke(e,t,n))}var L=new WeakMap,B=new WeakMap;function te(e,t){let n=L.get(e);return n?Array.from(n.get(t)||[]):[]}function ke(e,t,n){L.has(e)||L.set(e,new Map);let r=L.get(e);r.has(t)||r.set(t,new Set),r.get(t).add(n),B.has(n)||B.set(n,new Map);let i=B.get(n);i.has(t)||i.set(t,new Set),i.get(t).add(e)}function I(e){let t=B.get(e);t&&t.forEach(n=>{n.forEach(r=>{let i=L.get(r);i.has(n)&&i.get(n).delete(e)})})}var d=[],N=[],U=new WeakMap,A=[];function ne(e){if(N.findIndex(r=>e==r)!==-1)throw new Error("Recursive update() call",{cause:e});N.push(e);let t=c.get(e);t||(t=S({current:null}),c.set(e,t));let n=function r(){if(A.findIndex(s=>s==t)!==-1)throw new Error("Cyclical dependency in update() call",{cause:e});I(r),r.effectFunction=e,r.effectType=ne,d.push(r),A.push(t);let i;try{i=e(r,d,A)}finally{d.pop(),A.pop(),i instanceof Promise?i.then(s=>{t.current=s}):t.current=i}};return n.fn=e,U.set(t,n),n(),t}function R(e){let t=U.get(e)?.deref();if(!t)return;I(t);let n=t.fn;c.remove(n),U.delete(e)}function V(e){k++;let t;try{t=e()}finally{t instanceof Promise?t.then(()=>{k--,k||Z()}):(k--,k||Z())}return t}function Z(){let e=Array.from(H);H=new Set;let t=d[d.length-1];for(let n of e)n!=t&&n?.needsUpdate&&n(),ee(n)}function T(e,t){if(N.findIndex(l=>e==l)!==-1)throw new Error("Recursive update() call",{cause:e});N.push(e);let n=c.get(e);n||(n=S({current:null}),c.set(e,n));let r=!1,i=!0;return function l(){if(A.findIndex(f=>f==n)!==-1)throw new Error("Cyclical dependency in update() call",{cause:e});if(r&&r>Date.now()){i=!0;return}I(l),l.effectFunction=e,l.effectType=T,d.push(l),A.push(n);let o;try{o=e(l,d,A)}finally{i=!1,d.pop(),A.pop(),o instanceof Promise?o.then(f=>{n.current=f}):n.current=o}r=Date.now()+t,globalThis.setTimeout(()=>{i&&l()},t)}(),n}function re(e,t){let n=c.get(e);n||(n=S({current:null}),c.set(e,n));let r=-1,i=!0;return function l(){if(r<t.time)if(i){I(l),l.effectFunction=e,l.effectType=re,d.push(l),r=t.time;let o;try{o=e(l,d)}finally{d.pop(),o instanceof Promise?o.then(f=>{n.current=f}):n.current=o,i=!1}}else r=t.time;else i=!0}(),n}function Me(e){let t=d.length-1,n=d[t];d[t]=!1;try{return e()}finally{d[t]=n}}function Le(e,t=!1){let n=new Map,r=function(i){if(n.has(i))return n.get(i);switch(typeof i){case"object":if(!i)return i;if(Array.isArray(i)){let s=[];if(!t)return s=i.slice(),n.set(i,s),s;n.set(i,s);for(let l of i)s[l]=r(i[l])}else if(!i.constructor||i.constructor===Object){let s={};i.constructor||(s=Object.create(null)),n.set(i,s);for(let l in i)s[l]=t?r(i[l]):i[l];return s}else return i;break;default:return null}};return r(e)}function ie(e,t){let n=e.value?.innerHTML;typeof e.value=="string"&&(n=e.value,e.value={innerHTML:n}),n&&(n=n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;"),e.value.innerHTML=n),t(e)}function se(e,t){typeof e.value=="string"?e.value={}:delete e.value?.innerHTML,t(e)}var K={};$(K,{signal:()=>D});var Oe={get:(e,t,n)=>{if(t===Symbol.xRay)return e;if(t===Symbol.Signal)return!0;let r=e?.[t];return E(n,t),typeof r=="function"?r.bind(e):r&&typeof r=="object"?S(r):r},has:(e,t)=>{let n=c.get(e);return n&&E(n,t),Object.hasOwn(e,t)},ownKeys:e=>{let t=c.get(e);return t&&E(t,iterate),Reflect.ownKeys(e)}};function D(e){return e[Symbol.xRay]?e:(c.has(e)||(c.set(e,new Proxy(e,Oe)),Ce(e,c.get(e))),c.get(e))}var le=new WeakMap;function Ce(e,t){let n=e.innerHTML,r=e.innerText;if(!le.has(e)){let i=new MutationObserver((s,l)=>{let o={};for(let f of s)f.type==="attributes"?o[f.attributeName]=f.attributeOldValue:(f.type==="subtree"||f.type==="characterData")&&(e.innerHTML!=n&&(o.innerHTML=n,n=e.innerHTML),e.innerText!=r&&(o.innerText=r,r=e.innerText));for(let f in o)w(t,b(f,{was:o[f],now:e[f]}))});if(i.observe(e,{characterData:!0,subtree:!0,attributes:!0,attributesOldValue:!0}),le.set(e,i),e.matches("input, textarea, select")){let s=e.value;e.addEventListener("change",l=>{w(t,b("value",{was:s,now:e.value})),s=e.value}),e.matches("input, textarea")&&e.addEventListener("input",l=>{w(t,b("value",{was:s,now:e.value})),s=e.value})}}}function ae(e){if(e.templates?.length)He.call(this,e);else if(Object.hasOwnProperty.call(this.options.renderers,e.element.tagName)){let t=this.options.renderers[e.element.tagName];t&&t.call(this,e)}else if(this.options.renderers["*"]&&(this.options.renderers["*"].call(this,e),this.options.twoway)){let t=D(e.element);effect(()=>{je(this.options.root,e.path,t.innerHTML)})}return e}function fe(e){return Array.isArray(e.value)||(e.value=[e.value]),e.templates?.length?Be.call(this,e):console.error("No templates found in",e.element),e}function ue(e){return typeof e.value!="object"||!e.value?console.error("Value is not an object.",e.element,e.path,e.value):e.templates?.length?Pe.call(this,e):console.error("No templates found in",e.element),e}function je(e,t,n){let r=t.split("."),i=e,s;s=r.shift();let l=null,o=null;for(;s&&i;){if(s=decodeURIComponent(s),!(s=="0"&&!Array.isArray(i))){if(s==":key")throw new Error("setting key not yet supported");s==":value"||(Array.isArray(i)&&typeof i[s]>"u"?(l=i[0],i=i[0][s]):(l=i,i=i[s]))}o=s,s=r.shift()}l&&o&&l[o]!==n&&(l[o]=n)}function Be(e){let t=this.options.attribute,n=e.element.querySelectorAll(":scope > ["+t+"-key]"),r=0,i=0;e.list=e.value;for(let l of n){let o=parseInt(l.getAttribute(t+"-key"));if(o>r)e.index=r,e.element.insertBefore(this.applyTemplate(e),l);else if(o<r)l.remove();else{let f=Array.from(l.querySelectorAll(`[${t}]`));l.matches(`[${t}]`)&&f.unshift(l);let p=f.find(h=>{let y=h.getAttribute(t);return y.substr(0,5)!==":root"&&y.substr(0,e.path.length)!==e.path});if(!p&&l[Symbol.bindTemplate]){let h=this.findTemplate(e.templates,e.list[r]);h!=l[Symbol.bindTemplate]&&(p=!0,h||i++)}p&&(e.index=r,e.element.replaceChild(this.applyTemplate(e),l))}if(r++,r>=e.value.length)break}n=e.element.querySelectorAll(":scope > ["+t+"-key]");let s=n.length+i;if(s>e.value.length)for(;s>e.value.length;)e.element.querySelectorAll(":scope > :not(template)")?.[s-1]?.remove(),s--;else if(s<e.value.length)for(;s<e.value.length;)e.index=s,e.element.appendChild(this.applyTemplate(e)),s++}function Pe(e){let t=this.options.attribute;e.list=e.value;let n=Array.from(e.element.querySelectorAll(":scope > ["+t+"-key]"));for(let r in e.list){e.index=r;let i=n.shift();if(!i){let l=this.applyTemplate(e);e.element.appendChild(l);continue}if(i.getAttribute(t+"-key")!=r){n.unshift(i);let l=e.element.querySelector(":scope > ["+t+'-key="'+r+'"]');if(l)e.element.insertBefore(l,i),i=l,n=n.filter(o=>o!=l);else{let o=this.applyTemplate(e);e.element.insertBefore(o,i);continue}}if(this.findTemplate(e.templates,e.list[e.index])!=i[Symbol.bindTemplate]){let l=this.applyTemplate(e);e.element.replaceChild(l,i)}}for(;n.length;)n.shift().remove()}function He(e){let t=e.element.querySelector(":scope > :not(template)"),n=this.findTemplate(e.templates,e.value);if(e.parent=Ne(e.element),t)if(n){if(t?.[Symbol.bindTemplate]!=n){let r=this.applyTemplate(e);e.element.replaceChild(r,t)}}else e.element.removeChild(t);else if(n){let r=this.applyTemplate(e);e.element.appendChild(r)}}function Ne(e,t){let n=e.parentElement?.closest(`[${t}-list],[${t}-map]`);return n?n.hasAttribute(`${t}-list`)?n.getAttribute(`${t}-list`)+".":n.getAttribute(`${t}-map`)+".":""}function ce(e){let t=e.element,n=e.value;O(e),typeof n>"u"&&(n=""),t.type=="checkbox"||t.type=="radio"?z(t.value,n)?t.checked=!0:t.checked=!1:z(t.value,n)||(t.value=""+n)}function pe(e){O(e),v(e.element,e.value,"value")}function _(e){let t=e.element,n=e.value;if(n===null&&(n=""),typeof n!="object")if(t.multiple){if(Array.isArray(n))for(let r of t.options)n.indexOf(r.value)===!1?r.selected=!1:r.selected=!0}else{let r=t.options.find(i=>z(i.value,n));r&&(r.selected=!0,r.setAttribute("selected",!0))}else n.options&&qe(t,n.options),n.selected&&_(Object.asssign({},e,{value:n.selected})),v(t,n,"name","id","selectedIndex","className")}function oe(e,t){t&&(typeof t!="object"?e.options.add(new Option(""+t)):t.text?e.options.add(new Option(t.text,t.value,t.defaultSelected,t.selected)):typeof t.value<"u"&&e.options.add(new Option(""+t.value,t.value,t.defaultSelected,t.selected)))}function qe(e,t){if(e.innerHTML="",Array.isArray(t))for(let n of t)oe(e,n);else if(t&&typeof t=="object")for(let n in t)oe(e,{text:t[n],value:n})}function de(e){O(e),v(e.element,e.value,"target","href","name","newwindow","nofollow")}function he(e){v(e.element,e.value,"title","alt","src","id")}function me(e){v(e.element,e.value,"title","src","id")}function be(e){v(e.element,e.value,"content","id")}function O(e){let t=e.element,n=e.value;(typeof n>"u"||n==null)&&(n="");let r=""+n;(typeof n!="object"||r.substring(0,8)!="[object ")&&(n={innerHTML:n}),v(t,n,"innerHTML","title","id","className")}function v(e,t,...n){if(!(!t||typeof t!="object"))for(let r of n)typeof t[r]>"u"||z(e[r],t[r])||(t[r]===null?e[r]="":e[r]=""+t[r])}function z(e,t){return e==":empty"&&!t||t==":empty"&&!e||""+e==""+t}Symbol.bindTemplate||(Symbol.bindTemplate=Symbol("bindTemplate"));var J=class{constructor(t){this.bindings=new Map;let n={escape_html:ie,fixed_content:se},r={container:document.body,attribute:"data-flow",transformers:n,render:{field:[ae],list:[fe],map:[ue]},renderers:{INPUT:ce,BUTTON:pe,SELECT:_,A:de,IMG:he,IFRAME:me,META:be,TEMPLATE:null,"*":O}};if(!t?.root)throw new Error("bind needs at least options.root set");this.options=Object.assign({},r,t),t.transformers&&(this.options.transformers=Object.assign({},n,t?.transformers));let i=this.options.attribute,s=[i+"-field",i+"-list",i+"-map"],l=i+"-transform",o=a=>{let u=s.find(m=>a.hasAttribute(m));return u||console.error("No matching attribute found",a,s),u},f=a=>{this.bindings.set(a,T(()=>{if(!a.isConnected){ze(a,this.getBindingPath(a)),R(this.bindings.get(a));return}let u={templates:a.querySelectorAll(":scope > template"),attribute:o(a)};u.path=this.getBindingPath(a),u.value=G(this.options.root,u.path),u.element=a,Re(a,u),p(u)},50))},p=a=>{let u;switch(a.attribute){case this.options.attribute+"-field":u=Array.from(this.options.render.field);break;case this.options.attribute+"-list":u=Array.from(this.options.render.list);break;case this.options.attribute+"-map":u=Array.from(this.options.render.map);break;default:throw new Error("no valid context attribute specified",a)}a.element.hasAttribute(l)&&a.element.getAttribute(l).split(" ").filter(Boolean).forEach(g=>{this.options.transformers[g]?u.push(this.options.transformers[g]):console.warn("No transformer with name "+g+" configured",{cause:a.element})});let m;for(let g of u)m=((M,ge)=>we=>ge.call(this,we,M))(m,g);m(a)},h=a=>{for(let u of a)this.bindings.get(u)||f(u)},y=a=>{let u=`[${i}-field],[${i}-list],[${i}-map]`;for(let m of a)if(m.type=="childList"&&m.addedNodes){for(let g of m.addedNodes)if(g instanceof HTMLElement){let M=Array.from(g.querySelectorAll(u));g.matches(u)&&M.unshift(g),M.length&&h(M)}}};this.observer=new MutationObserver(a=>{y(a)}),this.observer.observe(this.options.container,{subtree:!0,childList:!0});let j=this.options.container.querySelectorAll(":is(["+this.options.attribute+"-field],["+this.options.attribute+"-list],["+this.options.attribute+"-map]):not(template)");j.length&&h(j)}applyTemplate(t){let n=t.path,r=t.parent,i=t.templates,s=t.list,l=t.index,o=s?s[l]:t.value,f=this.findTemplate(i,o);if(!f){let a=new DocumentFragment;return a.innerHTML="<!-- no matching template -->",a}let p=f.content.cloneNode(!0);if(!p.children?.length)return p;if(p.children.length>1)throw new Error("template must contain a single root node",{cause:f});let h=this.options.attribute,y=[h+"-field",h+"-list",h+"-map"],j=p.querySelectorAll(`[${h}-field],[${h}-list],[${h}-map]`);for(let a of j){if(a.tagName=="TEMPLATE")continue;let u=y.find(g=>a.hasAttribute(g)),m=a.getAttribute(u);m=this.applyLinks(f.links,m),m.substring(0,6)==":root."?a.setAttribute(u,m.substring(6)):m==":value"&&l!=null?a.setAttribute(u,n+"."+l):l!=null?a.setAttribute(u,n+"."+l+"."+m):a.setAttribute(u,r+m)}return typeof l<"u"&&p.children[0].setAttribute(h+"-key",l),p.children[0][Symbol.bindTemplate]=f,p}parseLinks(t){let n={};t=t.split(";").map(r=>r.trim());for(let r of t)r=r.split("="),n[r[0].trim()]=r[1].trim();return n}applyLinks(t,n){for(let r in t){if(n.startsWith(r+"."))return t[r]+n.substr(r.length);if(n==r)return t[r]}return n}getBindingPath(t){let n=[this.options.attribute+"-field",this.options.attribute+"-list",this.options.attribute+"-map"];for(let r of n)if(t.hasAttribute(r))return t.getAttribute(r)}findTemplate(t,n){let r=o=>{let f=this.getBindingPath(o),p;f?f.substr(0,6)==":root."?p=G(this.options.root,f):p=G(n,f):p=n;let h=""+p,y=o.getAttribute(this.options.attribute+"-match");if(y){if(y===":empty"&&!p)return o;if(y===":notempty"&&p||h==y)return o}if(!y)return o},i=Array.from(t).find(r),s=null;i?.hasAttribute(this.options.attribute+"-link")&&(s=this.parseLinks(i.getAttribute(this.options.attribute+"-link")));let l=i?.getAttribute("rel");if(l){let o=document.querySelector("template#"+l);if(!o)throw new Error("Could not find template with id "+l);i=o}return i&&(i.links=s),i}destroy(){this.bindings.forEach(t=>{R(t)}),this.bindings=new Map,this.observer.disconnect()}};function ye(e){return new J(e)}var C=new Map;function Re(e,t){C.has(t.path)?C.get(t.path).push(t):C.set(t.path,[t])}function ze(e,t){let n=C.get(t);n&&(n=n.filter(r=>r.element==e),C.set(t,n))}function G(e,t){let n=t.split("."),r=e,i;i=n.shift();let s=null;for(;i&&r;)i=decodeURIComponent(i),i=="0"&&!Array.isArray(r)||(i==":key"?r=s:i==":value"||(Array.isArray(r)&&typeof r[i]>"u"?r=r[0][i]:r=r[i])),s=i,i=n.shift();return r}var X={};$(X,{columns:()=>We,filter:()=>Ve,model:()=>$e,paging:()=>Ue,scroll:()=>De,sort:()=>Fe});var Q=class{constructor(t){if(!t)throw new Error("no options set");(t.data==null||typeof t.data[Symbol.iterator]!="function")&&console.warn("SimplyFlowModel: options.data is not iterable"),this.state=S(t),this.state.options||(this.state.options={}),this.effects=[{current:this.state.data}],this.view={current:this.state.data}}addEffect(t){if(!t||typeof t!="function")throw new Error("addEffect requires an effect function as its parameter",{cause:t});let n=this.effects[this.effects.length-1],r=t.call(this,n);if(!r||!r[Symbol.Signal])throw new Error("addEffect function parameter must return a Signal",{cause:t});this.view=r,this.effects.push(this.view)}};function $e(e){return new Q(e)}function Fe(e={}){return function(t){return this.state.options.sort=Object.assign({direction:"asc",sortBy:null,sortFn:(n,r)=>{let i=this.state.options.sort,s=i.sortBy;if(!i.sortBy)return 0;let l=i.direction=="asc"?1:-1,o=i.direction=="asc"?-1:1;return typeof n?.[s]>"u"?typeof r?.[s]>"u"?0:l:typeof r?.[s]>"u"||n[s]<r[s]?o:n[s]>r[s]?l:0}},e),T(()=>{let n=this.state.options.sort;return n?.sortBy&&n?.direction?t.current.toSorted(n?.sortFn):t.current},50)}}function Ue(e={}){return function(t){return this.state.options.paging=Object.assign({page:1,pageSize:20,max:1},e),T(()=>V(()=>{let n=this.state.options.paging;n.pageSize||(n.pageSize=20),n.max=Math.ceil(this.state.data.length/n.pageSize),n.page=Math.max(1,Math.min(n.max,n.page));let r=(n.page-1)*n.pageSize,i=r+n.pageSize;return t.current.slice(r,i)}),50)}}function Ve(e){if(!e?.name||typeof e.name!="string")throw new Error("filter requires options.name to be a string");if(!e.matches||typeof e.matches!="function")throw new Error("filter requires options.matches to be a function");return function(t){if(this.state.options[e.name])throw new Error("a filter with this name already exists on this model");return this.state.options[e.name]=e,T(()=>this.state.options[e.name].enabled?t.current.filter(this.state.options[e.name].matches.bind(this)):t.current,50)}}function We(e={}){if(!e||typeof e!="object"||Object.keys(e).length===0)throw new Error("columns requires options to be an object with at least one property");return function(t){return this.state.options.columns=e,T(()=>t.current.map(n=>{let r={};for(let i of Object.keys(this.state.options.columns))this.state.options.columns[i]?.hidden||(r[i]=n[i]??null);return r}),50)}}function De(e){return function(t){this.state.options.scroll=Object.assign({offset:0,rowHeight:26,rowCount:20,itemsPerRow:1,size:t.current.length},e);let n=this.state.options.scroll,r=n.scrollbar||n.container?.querySelector("[data-flow-scrollbar]");return r&&(n.container&&n.container.addEventListener("scroll",i=>{n.offset=Math.floor(n.container.scrollTop/(n.rowHeight*n.itemsPerRow))}),T(()=>{n.size=t.current.length*n.rowHeight,r.style.height=n.size+"px"},50)),T(()=>{n.container&&(n.rowCount=Math.ceil(n.container.getBoundingClientRect().height/n.rowHeight)),n.data=t.current;let i=Math.min(n.offset,t.current.length-1),s=i+n.rowCount;return s>t.current.length&&(s=t.current.length,i=s-n.rowCount),t.current.slice(i,s)},50)}}var Y=class extends HTMLElement{constructor(){super()}connectedCallback(){let t=this.getAttribute("rel"),n=document.getElementById(t);if(n){let r=n.content.cloneNode(!0);for(let i of r.childNodes){let s=i.cloneNode(!0);if(s.nodeType==document.ELEMENT_NODE&&(s.querySelectorAll("template").forEach(function(l){l.setAttribute("simply-render","")}),this.attributes))for(let l of this.attributes)l.name!="rel"&&s.setAttribute(l.name,l.value);this.parentNode.insertBefore(s,this)}this.parentNode.removeChild(this)}else(()=>{let i=new MutationObserver(()=>{n=document.getElementById(t),n&&(i.disconnect(),this.replaceWith(this))});i.observe(globalThis.document,{subtree:!0,childList:!0})})()}};customElements.get("simply-render")||customElements.define("simply-render",Y);globalThis.simply||(globalThis.simply={});Object.assign(globalThis.simply,{bind:ye,flow:X,state:W,dom:K});var rt=globalThis.simply;})();
+(()=>{var ke=Object.defineProperty;var D=(e,t)=>{for(var n in t)ke(e,n,{get:t[n],enumerable:!0})};var U={};D(U,{addTracer:()=>Pe,batch:()=>T,clockEffect:()=>oe,clone:()=>Ce,destroy:()=>$,effect:()=>se,makeContext:()=>y,notifyGet:()=>v,notifySet:()=>g,signal:()=>E,signals:()=>d,throttledEffect:()=>b,trace:()=>Le,untracked:()=>V});Symbol.iterate||(Symbol.iterate=Symbol("iterate"));Symbol.xRay||(Symbol.xRay=Symbol("xRay"));Symbol.Signal||(Symbol.Signal=Symbol("Signal"));var Me={get:(e,t,n)=>{if(t===Symbol.xRay)return e;if(t===Symbol.Signal)return!0;let r=e?.[t];return v(n,t),typeof r=="function"?Array.isArray(e)?(...i)=>{let s=e.length,o=r.apply(n,i);return s!=e.length&&g(n,y("length",{was:s,now:e.length})),o}:e instanceof Set||e instanceof Map?(...i)=>{let s=e.size,o=r.apply(e,i);return s!=e.size&&g(n,y("size",{was:s,now:e.size})),["set","add","clear","delete"].includes(t)&&g(n,y({entries:{},forEach:{},has:{},keys:{},values:{},[Symbol.iterator]:{}})),o}:e instanceof HTMLElement||e instanceof Number||e instanceof String||e instanceof Boolean?r.bind(e):r.bind(n):r&&typeof r=="object"?E(r):r},set:(e,t,n,r)=>{let i=e[t];return i!==n&&(e[t]=n,g(r,y(t,{was:i,now:n}))),typeof i>"u"&&(g(r,y(Symbol.iterate,{})),g(r,y("length",{}))),!0},has:(e,t)=>{let n=d.get(e);return n&&v(n,t),Object.hasOwn(e,t)},deleteProperty:(e,t)=>{if(typeof e[t]<"u"){let n=e[t];delete e[t];let r=d.get(e);g(r,y(t,{delete:!0,was:n}))}return!0},defineProperty:(e,t,n)=>{if(typeof e[t]>"u"){let r=d.get(e);g(r,y(Symbol.iterate,{}))}return Object.defineProperty(e,t,n)},ownKeys:e=>{let t=d.get(e);return v(t,Symbol.iterate),Reflect.ownKeys(e)}},d=new WeakMap;function E(e){return e||(e={}),e[Symbol.Signal]?e:(d.has(e)||d.set(e,new Proxy(e,Me)),d.get(e))}var R=[],H=!1;function Le(e,t){if(typeof e=="function")H=!0,e(),H=!1;else return ie(e,t).map(r=>({effect:r.effectType,fn:r.effectFunction,signal:d.get(r.effectFunction)}))}function Pe(e){if(!e.get&&!e.set)throw new Error('simply.state: addTracer: missing "get" or "set" property in tracer',e);if(e.get&&typeof e.get!="function")throw new Error('simply.state: addTracer: "get" is not a function',e);if(e.set&&typeof e.set!="function")throw new Error('simply.state: addTracer: "set" is not a function',e);R.push(e)}function ne(e,...t){for(let n of R)n[e]&&n[e](...t)}var I=new Set,k=0;function g(e,t={}){let n=[];if(t.forEach((r,i)=>{let s=ie(e,i);if(s?.length){for(let o of s)Oe(o,y(i,r));n=n.concat(s)}}),n=new Set(n.filter(Boolean)),n)if(k)I=I.union(n);else{let r=h[h.length-1];for(let i of Array.from(n))i!=r&&i?.needsUpdate&&(H&&R.length&&ne("set",e,t,i),i()),re(i)}}function y(e,t){let n=new Map;if(typeof e=="object")for(let r in e)n.set(r,e[r]);else n.set(e,t);return n}function Oe(e,t){e.context?t.forEach((n,r)=>{e.context.set(r,n)}):e.context=t,e.needsUpdate=!0}function re(e){delete e.context,delete e.needsUpdate}function v(e,t){let n=h[h.length-1];n&&(H&&R.length&&ne("get",e,t),Be(e,t,n))}var L=new WeakMap,N=new WeakMap;function ie(e,t){let n=L.get(e);return n?Array.from(n.get(t)||[]):[]}function Be(e,t,n){L.has(e)||L.set(e,new Map);let r=L.get(e);r.has(t)||r.set(t,new Set),r.get(t).add(n),N.has(n)||N.set(n,new Map);let i=N.get(n);i.has(t)||i.set(t,new Set),i.get(t).add(e)}function z(e){let t=N.get(e);t&&t.forEach(n=>{n.forEach(r=>{let i=L.get(r);i.has(n)&&i.get(n).delete(e)})})}var h=[],q=[],K=new WeakMap,A=[];function se(e){if(q.findIndex(r=>e==r)!==-1)throw new Error("Recursive update() call",{cause:e});q.push(e);let t=d.get(e);t||(t=E({current:null}),d.set(e,t));let n=function r(){if(A.findIndex(s=>s==t)!==-1)throw new Error("Cyclical dependency in update() call",{cause:e});z(r),r.effectFunction=e,r.effectType=se,h.push(r),A.push(t);let i;try{i=e(r,h,A)}finally{h.pop(),A.pop(),i instanceof Promise?i.then(s=>{t.current=s}):t.current=i}};return n.fn=e,K.set(t,n),n(),t}function $(e){let t=K.get(e)?.deref();if(!t)return;z(t);let n=t.fn;d.remove(n),K.delete(e)}function T(e){k++;let t;try{t=e()}finally{t instanceof Promise?t.then(()=>{k--,k||te()}):(k--,k||te())}return t}function te(){let e=Array.from(I);I=new Set;let t=h[h.length-1];for(let n of e)n!=t&&n?.needsUpdate&&n(),re(n)}function b(e,t){if(q.findIndex(o=>e==o)!==-1)throw new Error("Recursive update() call",{cause:e});q.push(e);let n=d.get(e);n||(n=E({current:null}),d.set(e,n));let r=!1,i=!0;return function o(){if(A.findIndex(u=>u==n)!==-1)throw new Error("Cyclical dependency in update() call",{cause:e});if(r&&r>Date.now()){i=!0;return}z(o),o.effectFunction=e,o.effectType=b,h.push(o),A.push(n);let l;try{l=e(o,h,A)}finally{i=!1,h.pop(),A.pop(),l instanceof Promise?l.then(u=>{n.current=u}):n.current=l}r=Date.now()+t,globalThis.setTimeout(()=>{i&&o()},t)}(),n}function oe(e,t){let n=d.get(e);n||(n=E({current:null}),d.set(e,n));let r=-1,i=!0;return function o(){if(r<t.time)if(i){z(o),o.effectFunction=e,o.effectType=oe,h.push(o),r=t.time;let l;try{l=e(o,h)}finally{h.pop(),l instanceof Promise?l.then(u=>{n.current=u}):n.current=l,i=!1}}else r=t.time;else i=!0}(),n}function V(e){let t=h.length-1,n=h[t];h[t]=!1;try{return e()}finally{h[t]=n}}function Ce(e,t=!1){let n=new Map,r=function(i){if(n.has(i))return n.get(i);switch(typeof i){case"object":if(!i)return i;if(Array.isArray(i)){let s=[];if(!t)return s=i.slice(),n.set(i,s),s;n.set(i,s);for(let o of i)s[o]=r(i[o])}else if(!i.constructor||i.constructor===Object){let s={};i.constructor||(s=Object.create(null)),n.set(i,s);for(let o in i)s[o]=t?r(i[o]):i[o];return s}else return i;break;default:return null}};return r(e)}function le(e,t){let n=e.value?.innerHTML;typeof e.value=="string"&&(n=e.value,e.value={innerHTML:n}),n&&(n=n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;"),e.value.innerHTML=n),t(e)}function ae(e,t){typeof e.value=="string"?e.value={}:delete e.value?.innerHTML,t(e)}var J={};D(J,{signal:()=>W,trackDomField:()=>G,trackDomList:()=>_});var fe=new WeakMap,je={get:(e,t,n)=>{if(t===Symbol.xRay)return e;if(t===Symbol.Signal)return!0;let r=e?.[t];return v(n,t),typeof r=="function"?r.bind(e):r&&typeof r=="object"?E(r):r},has:(e,t)=>{let n=d.get(e);return n&&v(n,t),Object.hasOwn(e,t)},ownKeys:e=>{let t=d.get(e);return t&&v(t,iterate),Reflect.ownKeys(e)}};function W(e,t){return e[Symbol.xRay]?e:(d.has(e)||(d.set(e,new Proxy(e,je)),Ne(e,d.get(e),t)),d.get(e))}var ue=new WeakMap;function Ne(e,t,n){n||(n={characterData:!0,subtree:!0,attributes:!0,attributesOldValue:!0});let i=e.innerHTML,s=e.innerText;if(!ue.has(e)){let o=new MutationObserver((l,u)=>{let f={};for(let c of l)c.type==="attributes"?f[c.attributeName]=c.attributeOldValue:c.type==="subtree"||c.type==="characterData"?(e.innerHTML!=i&&(f.innerHTML=i,i=e.innerHTML),e.innerText!=s&&(f.innerText=s,s=e.innerText)):c.type==="childList"?(f.children={was:Array.from(e.children)},f.length=-1):console.log("nothing to do for",e,c.type);for(let c in f)g(t,y(c,{was:f[c],now:e[c]}))});if(o.observe(e,n),ue.set(e,o),e.matches("input, textarea, select")){let l=e.value;e.addEventListener("change",u=>{g(t,y("value",{was:l,now:e.value})),l=e.value}),e.matches("input, textarea")&&e.addEventListener("input",u=>{g(t,y("value",{was:l,now:e.value})),l=e.value})}}}function _(e){let t=this.getBindingPath(e);if(!t)throw new Error("Could not find binding path for element",{cause:e});let n=W(e,{childList:!0});b(()=>{let r=Array.from(n.children);V(()=>{T(()=>{let i=0,s=P(this.options.root,t),o=s.slice();for(let l of r)l.tagName!=="TEMPLATE"&&l.dataset.flowKey&&(l.dataset.flowKey!=i&&Q(this.options.root,t+"."+i,o[l.dataset.flowKey]),i++);s.length>i&&(s.length=i)})})})}function G(e,t,n){if(fe.has(e))return;let r=this.getBindingPath(e);if(!r)throw new Error("Could not find binding path for element",{cause:e});let i=W(e);fe.set(e,i),T(()=>{b(()=>{let s=i.innerHTML;n||(s=ce(i,...t)),V(()=>{Q(this.options.root,r,s)})})})}function de(e){if(e.templates?.length)Re.call(this,e);else if(Object.hasOwnProperty.call(this.options.renderers,e.element.tagName)){let t=this.options.renderers[e.element.tagName];t&&t.call(this,e)}else this.options.renderers["*"]&&this.options.renderers["*"].call(this,e);return e}function he(e){Array.isArray(e.value)||(e.value=[e.value]);let t=e.value.length;return e.templates?.length?Ie.call(this,e):console.error("No templates found in",e.element),e}function me(e){return typeof e.value!="object"||!e.value?console.error("Value is not an object.",e.element,e.path,e.value):e.templates?.length?qe.call(this,e):console.error("No templates found in",e.element),e}function He(e){if(parseInt(e)==e)return!0}function Q(e,t,n){T(()=>{let r=t.split("."),i=e,s;s=r.shift();let o=null,l=null,u=i;for(;s&&i;){if(u=i,s=decodeURIComponent(s),!(s=="0"&&!Array.isArray(i))){if(s==":key")throw new Error("setting key not yet supported");s==":value"||(Array.isArray(i)&&!He(s)&&typeof i[s]>"u"?(o=i[0],i=i[0][s]):(o=i,i=i[s]))}if(l=s,s=r.shift(),s&&!i){let f=parseInt(s);f>=0&&s===""+f?u[l]=[]:u[l]={},i=u[l]}}if(o&&l&&o[l]!==n)if(n&&typeof n=="object"){i=o[l],i||(o[l]={},i=o[l]);for(let f in n)i[f]!==n[f]&&(i[f]=n[f])}else o[l]=n})}function Ie(e){let t=this.options.attribute,n=e.element.querySelectorAll(":scope > ["+t+"-key]"),r=0,i=0;e.list=e.value;for(let o of n){let l=parseInt(o.getAttribute(t+"-key"));if(l>r)e.index=r,e.element.insertBefore(this.applyTemplate(e),o);else if(l<r)o.remove();else{let u=Array.from(o.querySelectorAll(`[${t}]`));o.matches(`[${t}]`)&&u.unshift(o);let f=u.find(c=>{let w=c.getAttribute(t);return w.substr(0,5)!==":root"&&w.substr(0,e.path.length)!==e.path});if(!f&&o[Symbol.bindTemplate]){let c=this.findTemplate(e.templates,e.list[r]);c!=o[Symbol.bindTemplate]&&(f=!0,c||i++)}f&&(e.index=r,e.element.replaceChild(this.applyTemplate(e),o))}if(r++,r>=e.value.length)break}n=e.element.querySelectorAll(":scope > ["+t+"-key]");let s=n.length+i;if(s>e.value.length)for(;s>e.value.length;)e.element.querySelectorAll(":scope > :not(template)")?.[s-1]?.remove(),s--;else if(s<e.value.length)for(;s<e.value.length;)e.index=s,e.element.appendChild(this.applyTemplate(e)),s++;this.options.twoway&&_.call(this,e.element)}function qe(e){let t=this.options.attribute;e.list=e.value;let n=Array.from(e.element.querySelectorAll(":scope > ["+t+"-key]"));for(let r in e.list){e.index=r;let i=n.shift();if(!i){let o=this.applyTemplate(e);e.element.appendChild(o);continue}if(i.getAttribute(t+"-key")!=r){n.unshift(i);let o=e.element.querySelector(":scope > ["+t+'-key="'+r+'"]');if(o)e.element.insertBefore(o,i),i=o,n=n.filter(l=>l!=o);else{let l=this.applyTemplate(e);e.element.insertBefore(l,i);continue}}if(this.findTemplate(e.templates,e.list[e.index])!=i[Symbol.bindTemplate]){let o=this.applyTemplate(e);e.element.replaceChild(o,i)}}for(;n.length;)n.shift().remove()}function Re(e){let t=e.element.querySelector(":scope > :not(template)"),n=this.findTemplate(e.templates,e.value);if(e.parent=ze(e.element),t)if(n){if(t?.[Symbol.bindTemplate]!=n){let r=this.applyTemplate(e);e.element.replaceChild(r,t)}}else e.element.removeChild(t);else if(n){let r=this.applyTemplate(e);e.element.appendChild(r)}}function ze(e,t){let n=e.parentElement?.closest(`[${t}-list],[${t}-map]`);return n?n.hasAttribute(`${t}-list`)?n.getAttribute(`${t}-list`)+".":n.getAttribute(`${t}-map`)+".":""}function ye(e){let t=e.element,n=e.value;O.call(this,e),typeof n>"u"&&(n=""),t.type=="checkbox"||t.type=="radio"?F(t.value,n)?t.checked=!0:t.checked=!1:F(t.value,n)||(t.value=""+n)}function be(e){O.call(this,e,"value")}function X(e){let t=e.element,n=e.value;if(n===null&&(n=""),typeof n!="object")if(t.multiple){if(Array.isArray(n))for(let r of t.options)n.indexOf(r.value)===!1?r.selected=!1:r.selected=!0}else{let r=t.options.find(i=>F(i.value,n));r&&(r.selected=!0,r.setAttribute("selected",!0))}else n.options&&$e(t,n.options),n.selected&&X(Object.asssign({},e,{value:n.selected})),B(t,n,"name","id","selectedIndex","className")}function pe(e,t){t&&(typeof t!="object"?e.options.add(new Option(""+t)):t.text?e.options.add(new Option(t.text,t.value,t.defaultSelected,t.selected)):typeof t.value<"u"&&e.options.add(new Option(""+t.value,t.value,t.defaultSelected,t.selected)))}function $e(e,t){if(e.innerHTML="",Array.isArray(t))for(let n of t)pe(e,n);else if(t&&typeof t=="object")for(let n in t)pe(e,{text:t[n],value:n})}function ge(e){O.call(this,e,"target","href","name","newwindow","nofollow"),this.options.twoway&&T(()=>{updateProperties.call(this,e,["target","href","name","newwindow","nofollow"])})}function we(e){B(e.element,e.value,"title","alt","src","id"),this.options.twoway&&T(()=>{updateProperties.call(this,e,["title","alt","src","id"])})}function Se(e){B(e.element,e.value,"title","src","id"),this.options.twoway&&T(()=>{updateProperties.call(this,e,["title","src","id"])})}function Te(e){B(e.element,e.value,"content","id"),this.options.twoway&&T(()=>{updateProperties.call(this,e,["content","id"])})}function O(e,...t){let n=e.element,r=e.value,i=!1;if(typeof r<"u"&&r!==null){let o=""+r;(typeof r!="object"||o.substring(0,8)!="[object ")&&(r={innerHTML:r},i=!0)}let s=["innerHTML","title","id","className"].concat(t);B(n,r,...s),this.options.twoway&&G.call(this,e.element,s,i)}function B(e,t,...n){if(!(!t||typeof t!="object"))for(let r of n)typeof t[r]>"u"||F(e[r],t[r])||(t[r]===null?e[r]="":e[r]=""+t[r])}function ce(e,...t){let n={};for(let r of t)switch(r){default:n[r]=e[r];break}return n}function F(e,t){return e==":empty"&&!t||t==":empty"&&!e||""+e==""+t}Symbol.bindTemplate||(Symbol.bindTemplate=Symbol("bindTemplate"));var Y=class{constructor(t){this.bindings=new Map;let n={escape_html:le,fixed_content:ae},r={container:document.body,attribute:"data-flow",transformers:n,render:{field:[de],list:[he],map:[me]},renderers:{INPUT:ye,BUTTON:be,SELECT:X,A:ge,IMG:we,IFRAME:Se,META:Te,TEMPLATE:null,"*":O},twoway:!1};if(!t?.root)throw new Error("bind needs at least options.root set");this.options=Object.assign({},r,t),t.transformers&&(this.options.transformers=Object.assign({},n,t?.transformers));let i=this.options.attribute,s=[i+"-field",i+"-list",i+"-map"],o=i+"-transform",l=a=>{let p=s.find(m=>a.hasAttribute(m));return p||console.error("No matching attribute found",a,s),p},u=a=>{this.bindings.set(a,b(()=>{if(!a.isConnected){De(a,this.getBindingPath(a)),$(this.bindings.get(a));return}let p={templates:a.querySelectorAll(":scope > template"),attribute:l(a)};p.path=this.getBindingPath(a),p.value=P(this.options.root,p.path),p.element=a,Fe(a,p),f(p)},50))},f=a=>{let p;switch(a.attribute){case this.options.attribute+"-field":p=Array.from(this.options.render.field);break;case this.options.attribute+"-list":p=Array.from(this.options.render.list);break;case this.options.attribute+"-map":p=Array.from(this.options.render.map);break;default:throw new Error("no valid context attribute specified",a)}a.element.hasAttribute(o)&&a.element.getAttribute(o).split(" ").filter(Boolean).forEach(S=>{this.options.transformers[S]?p.push(this.options.transformers[S]):console.warn("No transformer with name "+S+" configured",{cause:a.element})});let m;for(let S of p)m=((M,Ae)=>ve=>Ae.call(this,ve,M))(m,S);m(a)},c=a=>{for(let p of a)this.bindings.get(p)||u(p)},w=a=>{let p=`[${i}-field],[${i}-list],[${i}-map]`;for(let m of a)if(m.type=="childList"&&m.addedNodes){for(let S of m.addedNodes)if(S instanceof HTMLElement){let M=Array.from(S.querySelectorAll(p));S.matches(p)&&M.unshift(S),M.length&&c(M)}}};this.observer=new MutationObserver(a=>{w(a)}),this.observer.observe(this.options.container,{subtree:!0,childList:!0});let j=this.options.container.querySelectorAll(":is(["+this.options.attribute+"-field],["+this.options.attribute+"-list],["+this.options.attribute+"-map]):not(template)");j.length&&c(j)}applyTemplate(t){let n=t.path,r=t.parent,i=t.templates,s=t.list,o=t.index,l=s?s[o]:t.value,u=this.findTemplate(i,l);if(!u){let a=new DocumentFragment;return a.innerHTML="<!-- no matching template -->",a}let f=u.content.cloneNode(!0);if(!f.children?.length)return f;if(f.children.length>1)throw new Error("template must contain a single root node",{cause:u});let c=this.options.attribute,w=[c+"-field",c+"-list",c+"-map"],j=f.querySelectorAll(`[${c}-field],[${c}-list],[${c}-map]`);for(let a of j){if(a.tagName=="TEMPLATE")continue;let p=w.find(S=>a.hasAttribute(S)),m=a.getAttribute(p);m=this.applyLinks(u.links,m),m.substring(0,6)==":root."?a.setAttribute(p,m.substring(6)):m==":value"&&o!=null?a.setAttribute(p,n+"."+o):o!=null?a.setAttribute(p,n+"."+o+"."+m):a.setAttribute(p,r+m)}return typeof o<"u"&&f.children[0].setAttribute(c+"-key",o),f.children[0][Symbol.bindTemplate]=u,f}parseLinks(t){let n={};t=t.split(";").map(r=>r.trim());for(let r of t)r=r.split("="),n[r[0].trim()]=r[1].trim();return n}applyLinks(t,n){for(let r in t){if(n.startsWith(r+"."))return t[r]+n.substr(r.length);if(n==r)return t[r]}return n}getBindingPath(t){let n=[this.options.attribute+"-field",this.options.attribute+"-list",this.options.attribute+"-map"];for(let r of n)if(t.hasAttribute(r))return t.getAttribute(r)}findTemplate(t,n){let r=l=>{let u=this.getBindingPath(l),f;u?u.substr(0,6)==":root."?f=P(this.options.root,u):f=P(n,u):f=n;let c=""+f,w=l.getAttribute(this.options.attribute+"-match");if(w){if(w===":empty"&&!f)return l;if(w===":notempty"&&f||c==w)return l}if(!w)return l},i=Array.from(t).find(r),s=null;i?.hasAttribute(this.options.attribute+"-link")&&(s=this.parseLinks(i.getAttribute(this.options.attribute+"-link")));let o=i?.getAttribute("rel");if(o){let l=document.querySelector("template#"+o);if(!l)throw new Error("Could not find template with id "+o);i=l}return i&&(i.links=s),i}destroy(){this.bindings.forEach(t=>{$(t)}),this.bindings=new Map,this.observer.disconnect()}};function Ee(e){return new Y(e)}var C=new Map;function Fe(e,t){C.has(t.path)?C.get(t.path).push(t):C.set(t.path,[t])}function De(e,t){let n=C.get(t);n&&(n=n.filter(r=>r.element==e),C.set(t,n))}function P(e,t){let n=t.split("."),r=e,i;i=n.shift();let s=null;for(;i&&r;)i=decodeURIComponent(i),i=="0"&&!Array.isArray(r)||(i==":key"?r=s:i==":value"||(Array.isArray(r)&&typeof r[i]>"u"&&r[0]?r=r[0][i]:r=r[i])),s=i,i=n.shift();return r}var x={};D(x,{columns:()=>Ge,filter:()=>_e,model:()=>Ke,paging:()=>We,scroll:()=>Je,sort:()=>Ue});var Z=class{constructor(t){if(!t)throw new Error("no options set");(t.data==null||typeof t.data[Symbol.iterator]!="function")&&console.warn("SimplyFlowModel: options.data is not iterable"),this.state=E(t),this.state.options||(this.state.options={}),this.effects=[{current:this.state.data}],this.view={current:this.state.data}}addEffect(t){if(!t||typeof t!="function")throw new Error("addEffect requires an effect function as its parameter",{cause:t});let n=this.effects[this.effects.length-1],r=t.call(this,n);if(!r||!r[Symbol.Signal])throw new Error("addEffect function parameter must return a Signal",{cause:t});this.view=r,this.effects.push(this.view)}};function Ke(e){return new Z(e)}function Ue(e={}){return function(t){return this.state.options.sort=Object.assign({direction:"asc",sortBy:null,sortFn:(n,r)=>{let i=this.state.options.sort,s=i.sortBy;if(!i.sortBy)return 0;let o=i.direction=="asc"?1:-1,l=i.direction=="asc"?-1:1;return typeof n?.[s]>"u"?typeof r?.[s]>"u"?0:o:typeof r?.[s]>"u"||n[s]<r[s]?l:n[s]>r[s]?o:0}},e),b(()=>{let n=this.state.options.sort;return n?.sortBy&&n?.direction?t.current.toSorted(n?.sortFn):t.current},50)}}function We(e={}){return function(t){return this.state.options.paging=Object.assign({page:1,pageSize:20,max:1},e),b(()=>T(()=>{let n=this.state.options.paging;n.pageSize||(n.pageSize=20),n.max=Math.ceil(this.state.data.length/n.pageSize),n.page=Math.max(1,Math.min(n.max,n.page));let r=(n.page-1)*n.pageSize,i=r+n.pageSize;return t.current.slice(r,i)}),50)}}function _e(e){if(!e?.name||typeof e.name!="string")throw new Error("filter requires options.name to be a string");if(!e.matches||typeof e.matches!="function")throw new Error("filter requires options.matches to be a function");return function(t){if(this.state.options[e.name])throw new Error("a filter with this name already exists on this model");return this.state.options[e.name]=e,b(()=>this.state.options[e.name].enabled?t.current.filter(this.state.options[e.name].matches.bind(this)):t.current,50)}}function Ge(e={}){if(!e||typeof e!="object"||Object.keys(e).length===0)throw new Error("columns requires options to be an object with at least one property");return function(t){return this.state.options.columns=e,b(()=>t.current.map(n=>{let r={};for(let i of Object.keys(this.state.options.columns))this.state.options.columns[i]?.hidden||(r[i]=n[i]??null);return r}),50)}}function Je(e){return function(t){this.state.options.scroll=Object.assign({offset:0,rowHeight:26,rowCount:20,itemsPerRow:1,size:t.current.length},e);let n=this.state.options.scroll,r=n.scrollbar||n.container?.querySelector("[data-flow-scrollbar]");return r&&(n.container&&n.container.addEventListener("scroll",i=>{n.offset=Math.floor(n.container.scrollTop/(n.rowHeight*n.itemsPerRow))}),b(()=>{n.size=t.current.length*n.rowHeight,r.style.height=n.size+"px"},50)),b(()=>{n.container&&(n.rowCount=Math.ceil(n.container.getBoundingClientRect().height/n.rowHeight)),n.data=t.current;let i=Math.min(n.offset,t.current.length-1),s=i+n.rowCount;return s>t.current.length&&(s=t.current.length,i=s-n.rowCount),t.current.slice(i,s)},50)}}var ee=class extends HTMLElement{constructor(){super()}connectedCallback(){let t=this.getAttribute("rel"),n=document.getElementById(t);if(n){let r=n.content.cloneNode(!0);for(let i of r.childNodes){let s=i.cloneNode(!0);if(s.nodeType==document.ELEMENT_NODE&&(s.querySelectorAll("template").forEach(function(o){o.setAttribute("simply-render","")}),this.attributes))for(let o of this.attributes)o.name!="rel"&&s.setAttribute(o.name,o.value);this.parentNode.insertBefore(s,this)}this.parentNode.removeChild(this)}else(()=>{let i=new MutationObserver(()=>{n=document.getElementById(t),n&&(i.disconnect(),this.replaceWith(this))});i.observe(globalThis.document,{subtree:!0,childList:!0})})()}};customElements.get("simply-render")||customElements.define("simply-render",ee);globalThis.simply||(globalThis.simply={});Object.assign(globalThis.simply,{bind:Ee,flow:x,state:U,dom:J});var bt=globalThis.simply;})();
 //# sourceMappingURL=simply.flow.min.js.map