ixfx/dist/min/ui.js

Bundle of ixfx libraries

import{n as e}from"./chunk-BKBlUVio.js";import{C as t,D as n,O as r,S as i,nt as a,q as o}from"./src-DlHqXvlb.js";import{v as s}from"./src-ZyALqz2x.js";import{W as c}from"./src-wu7Ls46R.js";import"./src-YsNzeaaT.js";import{_ as l,g as u,h as d,m as f,v as p}from"./src-DI_Ag7DT.js";import{$ as m,X as h,_ as g,at as _,bt as v,h as y,lt as b,q as x,v as S,vt as C}from"./src-6ZRiAu1j.js";const w=(e,t)=>{if(e===null)throw Error(`Param 'elem' is null. Expected element to observe`);if(e===void 0)throw Error(`Param 'elem' is undefined. Expected element to observe`);let n=y(t=>{let n=new ResizeObserver(e=>{t.set(e)});return n.observe(e),()=>{n.unobserve(e)}});return x({elapsed:t??100})(n)},T=e=>x({elapsed:e??100})(g(window,`resize`,{innerWidth:0,innerHeight:0})),E=(e=document.documentElement)=>y(t=>{let n=new MutationObserver(e=>{t.set(e)});return n.observe(e,{attributeFilter:[`class`],attributes:!0}),()=>{n.disconnect()}});function D(e){let t=e,n=_(),r=e=>{t=e,n.set(e)};return{dispose:n.dispose,isDisposed:n.isDisposed,last:()=>t,on:n.on,onValue:n.onValue,set:r,setHsl:e=>{r(e)}}}function O(e,t={}){let n=A(e,t),r=n.el,i=t.relative??!1,a=t.inverted??!1,o=m(n,e=>Number.parseFloat(e));i&&(r.max=a?`0`:`1`,r.min=a?`1`:`0`,r.hasAttribute(`step`)||(r.step=`0.1`)),r.getAttribute(`type`)===null&&(r.type=`range`);let s=e=>{n.set(e.toString())};return{...o,last(){return Number.parseFloat(n.last())},set:s}}function k(e,t={}){let n=A(e,{...t,upstreamFilter:e=>typeof e==`object`?d(e):e});return{...m(n,e=>l(e,{scalar:!0,ensureSafe:!0})),last(){return l(n.last(),{scalar:!0,ensureSafe:!0})},set(e){n.set(p(e))}}}function A(e,t={}){let n=typeof e==`string`?document.querySelector(e):e;if(n===null&&typeof e==`string`)throw Error(`Element query could not be resolved '${e}'`);if(n===null)throw Error(`targetOrQuery is null`);let r=c(e),i=(t.when??`changed`)===`changed`?`change`:`input`,a=t.emitInitialValue??!1,o=t.fallbackValue??``,s=t.upstreamSource,l=()=>{},u=t.attributeName,d=t.fieldName;d===void 0&&u===void 0&&(u=d=`value`);let f=()=>{let e;return u&&(e=r.getAttribute(u)),d&&(e=r[d]),e??=o,e},p=e=>{u&&r.setAttribute(u,e),d&&(r[d]=e)},h=e=>{e=t.upstreamFilter?t.upstreamFilter(e):e,p(e)};s&&(l=s.onValue(h),b(s)&&h(s.last()));let g=S(r,i,{fireInitial:a,debugFiring:t.debugFiring??!1,debugLifecycle:t.debugLifecycle??!1}),_=m(g,e=>f());return{..._,el:r,last(){return f()},set(e){p(e)},dispose(e){l(),_.dispose(e),g.dispose(e)}}}function j(e,t={}){let n=c(e),r=(t.when??`changed`)===`changed`?`change`:`input`,i=t.emitInitialValue??!1,a=t.upstreamSource,o=new Map,s=()=>{},l=()=>{let e=new FormData(n),t=[];for(let[n,r]of e.entries()){let e=r.toString(),i=o.get(n);if(!i){let t=p(n,e);t&&(i=t.type===`range`||t.type===`number`?`number`:t.type===`color`?`colour`:t.type===`checkbox`&&(r===`true`||r===`on`)?`boolean`:`string`,o.set(n,i))}if(i===`number`)t.push([n,Number.parseFloat(e)]);else if(i===`boolean`){let r=e===`true`;t.push([n,r])}else if(i===`colour`){let r=d(e);t.push([n,u(r,{scalar:!1})])}else t.push([n,r.toString()])}for(let e of n.querySelectorAll(`input[type="checkbox"]`))!e.checked&&e.value===`true`&&t.push([e.name,!1]);return Object.fromEntries(t)},p=(e,t)=>{let r=n.querySelector(`[name="${e}"]`);if(!r){console.warn(`Form does not contain an element with name="${e}"`);return}if(r.type===`radio`){let r=n.querySelector(`[name="${e}"][value="${t}"]`);if(!r){console.warn(`Form does not contain radio option for name=${e} value=${t}`);return}return r}return r},h=(e,t)=>{let n=p(e,t);if(n&&(n.nodeName===`INPUT`||n.nodeName===`SELECT`)){if(n.type===`color`)typeof t==`object`&&(t=d(t));else if(n.type===`checkbox`)if(typeof t==`boolean`){n.checked=t;return}else console.warn(`Rx.Sources.domForm: Trying to set non boolean type to a checkbox. Name: ${e} Value: ${t} (${typeof t})`);else if(n.type===`radio`){n.checked=!0;return}n.value=t}},g=e=>{for(let[n,r]of Object.entries(e)){let e=o.get(n);e||(e=typeof r,e===`object`&&(f(r),e=`colour`),o.set(n,e)),h(n,t.upstreamFilter?t.upstreamFilter(n,r):r)}};a&&(s=a.onValue(g),b(a)&&g(a.last()));let _=S(n,r,{fireInitial:i,debugFiring:t.debugFiring??!1,debugLifecycle:t.debugLifecycle??!1}),v=m(_,e=>l());return{...v,el:n,last(){return l()},set:g,setNamedValue:h,dispose(e){s(),v.dispose(e),_.dispose(e)}}}function M(e){return h([...document.querySelectorAll(e)])}const N=(e,t,n={})=>I(e,t,{...n,elField:`textContent`}),P=(e,t,n={})=>I(e,t,{...n,elField:`value`,attribName:`value`}),F=(e,t,n={})=>I(e,t,{...n,elField:`innerHTML`}),I=(e,t,...n)=>{if(t===null)throw Error(`Param 'elOrQuery' is null`);if(t===void 0)throw Error(`Param 'elOrQuery' is undefined`);let r=c(t),i=[];return n.length===0?i.push({elField:`textContent`}):i=[...n],B(e,...i.map(e=>`element`in e?e:{...e,element:r}))},L=(e,t)=>{let n=R(e);return e=>{n(e,t)}},R=e=>{if(e.elField!==void 0||e.cssVariable===void 0&&e.attribName===void 0&&e.cssProperty===void 0&&e.textContent===void 0&&e.htmlContent===void 0){let t=e.elField??`textContent`;return(e,n)=>{n[t]=e}}if(e.attribName!==void 0){let t=e.attribName;return(e,n)=>{n.setAttribute(t,e)}}if(e.textContent)return(e,t)=>{t.textContent=e};if(e.htmlContent)return(e,t)=>{t.innerHTML=e};if(e.cssVariable!==void 0){let t=e.cssVariable;return t.startsWith(`--`)||(t=`--`+t),(e,n)=>{n.style.setProperty(t,e)}}return e.cssProperty===void 0?(e,t)=>{}:(t,n)=>{n.style[e.cssProperty]=t}},z=e=>{if(!(!e.transform&&!e.transformValue)){if(e.transformValue){if(e.sourceField===void 0)throw Error(`Expects 'sourceField' to be set when 'transformValue' is set`);return t=>{let n=t[e.sourceField];return e.transformValue(n)}}else if(e.transform){if(e.sourceField!==void 0)throw Error(`If 'transform' is set, 'sourceField' is ignored`);return t=>e.transform(t)}}},B=(e,...t)=>{let n=t.map(e=>{if(e.element&&e.element!==void 0)return e;if(e.query)return{...e,element:c(e.query)};throw Error(`Unable to resolve element. Missing 'element' or 'query' values on bind. ${JSON.stringify(e)}`)}),r=n.map(e=>({update:L(e,e.element),transformer:z(e),sourceField:e.sourceField})),i=e=>{for(let t of r)if(t.transformer)t.update(t.transformer(e));else{let n=t.sourceField?e[t.sourceField]:e;typeof n==`object`?(t.sourceField,t.update(JSON.stringify(n))):t.update(n)}},a=e.on(e=>{C(e)?i(e.value):v(e)&&console.warn(e)});return b(e)&&i(e.last()),{remove:e=>{if(a(),e)for(let e of n)e.element.remove()}}},V=(e,t,n)=>{let r=c(t),i=e=>{n(e,r)},a=e.on(e=>{C(e)?(console.log(e),i(e.value)):console.warn(e)});return b(e)&&i(e.last()),{remove:e=>{a(),e&&r.remove()}}},H=(e,t,n,r={})=>{if(t===null)throw Error(`Param 'elOrQuery' is null`);if(t===void 0)throw Error(`Param 'elOrQuery' is undefined`);let i=c(t),a=e=>{n(e,i)},o=e.onDiff(e=>{a(e)}),s=()=>{b(e)&&r.initial&&r.initial(e.last(),i)};return s(),{refresh:()=>{s()},remove:e=>{o(),e&&i.remove()}}},U=(e,i)=>{let l=i.container?c(i.container):document.body,u=i.defaultTag??`div`,d=new Map,f=new Map;for(let[e,t]of Object.entries(i.binds??{})){let n=t.tagName??u;f.set(e,{...t,update:R(t),transform:z(t),tagName:n,path:e})}let p=e=>{let t=a(f,n(e));if(t!==void 0)return t;if(!e.includes(`.`))return f.get(`_root`)};function*m(e){for(let t of r(e))f.has(t)&&(yield f.get(t));f.has(`_root`)&&e.includes(`.`)&&(yield f.get(`_root`))}let h=(e,n)=>{let r=W(e);console.log(`Rx.Dom.elements.create: ${e} rooted: ${r} value: ${JSON.stringify(n)}`);let i=p(W(e)),a=u;i?.tagName&&(a=i.tagName);let o=document.createElement(a);o.setAttribute(`data-path`,e),g(e,o,n);let s;for(let n of m(r))if(n?.nestChildren){let r=t(e,`.`),i=n.path.replace(`_root`,r);if(s=d.get(i),s!==void 0)break}(s??l).append(o),d.set(e,o),console.log(`Added el: ${e}`)},g=(e,t,n)=>{console.log(`Rx.dom.update path: ${e} value:`,n);let r=p(W(e));r===void 0?(typeof n==`object`&&(n=JSON.stringify(n)),t.textContent=n):(r.transform&&(n=r.transform(n)),r.update(n,t))},_=e=>{let t=new s({},e),n=t.dequeue(),r=new Set;for(;n!==void 0;){let e=n.path;if(!(`previous`in n)||n.previous===void 0){console.log(`Rx.Dom.elements.changes no previous. path: ${e}`),h(e,n.value);let i=[...o(n.value,!1,2**53-1,e)];console.log(i);for(let e of i)r.has(e.path)||(t.enqueue(e),r.add(e.path))}else if(n.value===void 0){let t=d.get(e);t===void 0?console.warn(`No element to delete? ${e} `):(console.log(`Rx.Dom.elements.changes delete ${e}`),t.remove())}else{let t=d.get(e);t===void 0?(console.warn(`Rx.Dom.elements.changes No element to update ? ${e} `),h(e,n.value)):g(e,t,n.value)}n=t.dequeue()}};e.onDiff(e=>{_(e)}),b(e)&&_([...o(e.last(),!1,1)])},W=e=>{let t=i(e,`.`);return t===e?`_root`:`_root.`+t};function G(){let e=()=>({width:window.innerWidth,height:window.innerHeight}),t=g(window,`resize`,{lazy:`very`,transform:()=>e()}),n=g(window,`pointermove`,{lazy:`very`,transform:e=>{if(e===void 0)return{x:0,y:0};let t=e;return{x:t.x,y:t.y}}});return{dispose:(e=`Reactive.win.dispose`)=>{t.dispose(e),n.dispose(e)},size:t,pointer:n}}var K=e({bind:()=>B,bindDiffUpdate:()=>H,bindElement:()=>I,bindHtml:()=>F,bindText:()=>N,bindUpdate:()=>V,bindValueText:()=>P,browserResizeObservable:()=>w,colour:()=>D,cssClassChange:()=>E,domForm:()=>j,domHslInputValue:()=>k,domInputValue:()=>A,domNumberInputValue:()=>O,elements:()=>U,fromDomQuery:()=>M,win:()=>G,windowResize:()=>T});export{K as RxUi};