@vuu-ui/vuu-table-extras 0.8.27 → 0.8.28-debug

package/cjs/index.js

@@ -1,2 +1,3464 @@
-"use strict";var ln=Object.create;var it=Object.defineProperty;var un=Object.getOwnPropertyDescriptor;var pn=Object.getOwnPropertyNames;var cn=Object.getPrototypeOf,mn=Object.prototype.hasOwnProperty;var dn=(t,e)=>{for(var o in e)it(t,o,{get:e[o],enumerable:!0})},so=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of pn(e))!mn.call(t,s)&&s!==o&&it(t,s,{get:()=>e[s],enumerable:!(n=un(e,s))||n.enumerable});return t};var ue=(t,e,o)=>(o=t!=null?ln(cn(t)):{},so(e||!t||!t.__esModule?it(o,"default",{value:t,enumerable:!0}):o,t)),gn=t=>so(it({},"__esModule",{value:!0}),t);var io=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var f=(t,e,o)=>(io(t,e,"read from private field"),o?o.call(t):e.get(t)),U=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)},pe=(t,e,o,n)=>(io(t,e,"write to private field"),n?n.call(t,o):e.set(t,o),o);var hr={};dn(hr,{BackgroundCell:()=>fo,BackgroundCellConfigurationEditor:()=>ho,BaseNumericFormattingSettings:()=>ot,CaseValidator:()=>lo,ColumnExpressionInput:()=>yt,ColumnExpressionPanel:()=>Kt,ColumnFormattingPanel:()=>oo,ColumnList:()=>Rt,ColumnNamedTerms:()=>xt,ColumnSettingsPanel:()=>gr,DataSourceStats:()=>fr,DateTimeFormattingSettings:()=>jt,DropdownCell:()=>bo,LookupCell:()=>Oo,PatternValidator:()=>po,PctProgressCell:()=>ko,TableSettingsPanel:()=>xr,columnExpressionLanguageSupport:()=>Nt,isCompleteExpression:()=>zt,isCompleteRelationalExpression:()=>Zt,lastNamedChild:()=>ht,useColumnExpressionEditor:()=>qt,useColumnExpressionSuggestionProvider:()=>Jt,useTableSettings:()=>ro,walkTree:()=>$t});module.exports=gn(hr);var ao=require("@vuu-ui/vuu-utils"),fn=t=>typeof t=="string",lo=(t,e)=>fn(e)?e===""?!0:t.value==="lower"&&e.toLowerCase()!==e?"value must be all lowercase":t.value==="upper"&&e.toUpperCase()!==e?"value must be all uppercase":!0:"value must be a string";(0,ao.registerComponent)("vuu-case",lo,"data-edit-validator",{});var uo=require("@vuu-ui/vuu-utils"),Cn=t=>typeof t=="string",vn="value does not match expected pattern",po=(t,e)=>{if(typeof t.value!="string")throw Error("Pattern validation rule must provide pattern");if(Cn(e)){if(e==="")return!0;{let{message:o=vn}=t;return new RegExp(t.value).test(e)||o}}else return"value must be a string"};(0,uo.registerComponent)("vuu-pattern",po,"data-edit-validator",{});var R=require("@vuu-ui/vuu-utils"),mo=ue(require("clsx"),1),go=require("react");var ve=require("@vuu-ui/vuu-utils"),at=require("react"),xn=[void 0,void 0,void 0,void 0];function co(t,e,o){var g;let n=(0,at.useRef)(),[s,r,a,l]=n.current||xn,{type:p}=o,m=(0,ve.isTypeDescriptor)(p)?(g=p.formatting)==null?void 0:g.decimals:void 0,d=t===s&&(0,ve.isValidNumber)(e)&&(0,ve.isValidNumber)(r)&&o===a?(0,ve.getMovingValueDirection)(e,l,r,m):"";return(0,at.useEffect)(()=>{n.current=[t,e,o,d]}),d}var lt=require("react/jsx-runtime"),hn="\u2B06",bn="\u2B07",{KEY:yn}=R.metadataKeys,Ue="vuuBackgroundCell",Te={ArrowOnly:"arrow",BackgroundOnly:"bg-only",ArrowBackground:"arrow-bg"},En=t=>(0,R.isTypeDescriptor)(t)&&t.renderer&&"flashStyle"in t.renderer?t.renderer.flashStyle:Te.BackgroundOnly,fo=(0,go.memo)(function({column:e,columnMap:o,row:n}){let{name:s,type:r,valueFormatter:a}=e,l=o[s],p=n[l],m=En(r),d=co(n[yn],p,e),g=m===Te.ArrowOnly||m===Te.ArrowBackground?d===R.UP1||d===R.UP2?hn:d===R.DOWN1||d===R.DOWN2?bn:null:null,u=d?" "+d:"",i=(0,mo.default)(Ue,u,{[`${Ue}-backgroundOnly`]:m===Te.BackgroundOnly,[`${Ue}-arrowOnly`]:m===Te.ArrowOnly,[`${Ue}-arrowBackground`]:m===Te.ArrowBackground});return(0,lt.jsxs)("div",{className:i,tabIndex:-1,children:[(0,lt.jsx)("div",{className:`${Ue}-arrow`,children:g}),a(n[l])]})},R.dataAndColumnUnchanged);(0,R.registerComponent)("vuu.price-move-background",fo,"cell-renderer",{description:"Change background color of cell when value changes",configEditor:"BackgroundCellConfigurationEditor",label:"Background Flash",serverDataType:["long","int","double"]});var Co=require("@vuu-ui/vuu-ui-controls"),vo=require("@vuu-ui/vuu-utils"),ut=require("@salt-ds/core"),pt=require("react");var We=require("react/jsx-runtime"),wn="vuuBackgroundCellConfiguration",Bt=[{label:"Background Only",value:"bg-only"},{label:"Background and Arrow",value:"arrow-bg"},{label:"Arrow Only",value:"arrow"}],[xo]=Bt,On=t=>{let{flashStyle:e}=t.type.renderer;return Bt.find(o=>o.value===e)||xo},ho=({column:t,onChangeRendering:e})=>{let[o,n]=(0,pt.useState)(On(t)),s=(0,pt.useCallback)((r,a)=>{var p;n(a);let l=t.type.renderer;e({...l,flashStyle:(p=a==null?void 0:a.value)!=null?p:xo.value})},[t.type,e]);return(0,We.jsxs)(ut.FormField,{children:[(0,We.jsx)(ut.FormFieldLabel,{children:"Flash Style"}),(0,We.jsx)(Co.Dropdown,{className:`${wn}-flashStyle`,onSelectionChange:s,selected:o,source:Bt,width:"100%"})]})};(0,vo.registerConfigurationEditor)("BackgroundCellConfigurationEditor",ho);var ct=require("@vuu-ui/vuu-data-react"),mt=require("@vuu-ui/vuu-ui-controls"),ke=require("@vuu-ui/vuu-utils"),ce=require("react");var yo=require("react/jsx-runtime"),Sn="vuuTableDropdownCell",Tn=["Enter"," "],bo=(0,ce.memo)(function({column:e,columnMap:o,onCommit:n=mt.WarnCommit,row:s}){let r=o[e.name],a=s[r],{values:l}=(0,ct.useLookupValues)(e,a),p=(0,ce.useRef)(null);(0,ce.useMemo)(()=>{p.current=(0,ct.getSelectedOption)(l,a)},[a,l]);let m=(0,ce.useCallback)((d,g)=>{g&&n(g.value).then(u=>{u===!0&&d&&(0,ke.dispatchCustomEvent)(d.target,"vuu-commit")})},[n]);return(0,yo.jsx)(mt.Dropdown,{className:Sn,onSelectionChange:m,openKeys:Tn,selected:p.current,source:l,width:e.width-17})},ke.dataColumnAndKeyUnchanged);(0,ke.registerComponent)("dropdown-cell",bo,"cell-renderer",{userCanAssign:!1});var Eo=require("@vuu-ui/vuu-data-react"),dt=require("@vuu-ui/vuu-utils"),wo=require("react"),So=require("react/jsx-runtime"),Oo=(0,wo.memo)(function({column:e,columnMap:o,row:n}){let s=o[e.name],r=n[s],{initialValue:a}=(0,Eo.useLookupValues)(e,r);return(0,So.jsx)("span",{children:a==null?void 0:a.label})},dt.dataAndColumnUnchanged);(0,dt.registerComponent)("lookup-cell",Oo,"cell-renderer",{userCanAssign:!1});var To=require("@vuu-ui/vuu-utils"),Lt=ue(require("clsx"),1);var Ge=require("react/jsx-runtime"),Ye="vuuPctProgressCell",kn=t=>t>=0&&t<=1?t*100:t>2?0:t>1?100:0,ko=({column:t,columnMap:e,row:o})=>{let n=o[e[t.name]],s=kn(n),r=(0,Lt.default)(Ye,{});return(0,Ge.jsxs)("div",{className:(0,Lt.default)(r,{[`${Ye}-zero`]:s===0,[`${Ye}-complete`]:s>=100}),tabIndex:-1,children:[(0,Ge.jsx)("span",{className:`${Ye}-progressBar`,style:{"--progress-bar-pct":`${s}%`}}),(0,Ge.jsx)("span",{className:`${Ye}-text`,children:`${s.toFixed(2)} %`})]})};(0,To.registerComponent)("vuu.pct-progress",ko,"cell-renderer",{description:"Percentage formatter",label:"Percentage formatter",serverDataType:"double"});var re=require("@vuu-ui/vuu-utils"),Po=ue(require("clsx"),1);var xe=require("react/jsx-runtime"),qe="vuuProgressCell",Pn=({column:t,columnMap:e,row:o})=>{let{name:n,type:s}=t,r=o[e[n]],a=!1,l=0;if((0,re.isTypeDescriptor)(s)&&(0,re.isColumnTypeRenderer)(s.renderer)){let{associatedField:m}=s.renderer;if(m){let d=o[e[m]];if((0,re.isValidNumber)(r)&&(0,re.isValidNumber)(d))l=Math.min(Math.round(r/d*100),100),l=Math.min(Math.round(r/d*100),100),a=isFinite(l);else{let g=parseFloat(r);if(Number.isFinite(g)){let u=parseFloat(d);Number.isFinite(u)&&(l=Math.min(Math.round(g/u*100),100),a=isFinite(l))}}}else throw Error("ProgressCell associatedField is required to render")}let p=(0,Po.default)(qe,{});return(0,xe.jsxs)("div",{className:p,tabIndex:-1,children:[a?(0,xe.jsxs)("span",{className:`${qe}-track`,children:[(0,xe.jsx)("span",{className:`${qe}-bg`}),(0,xe.jsx)("span",{className:`${qe}-bar`,style:{"--progress-bar-pct":`-${100-l}%`}})]}):null,(0,xe.jsx)("span",{className:`${qe}-text`,children:`${l} %`})]})};(0,re.registerComponent)("vuu.progress",Pn,"cell-renderer",{description:"Progress formatter",label:"Progress formatter",serverDataType:["long","int","double"],userCanAssign:!1});var he=require("@vuu-ui/vuu-ui-controls"),gt=require("@salt-ds/core"),Fo=ue(require("clsx"),1),Dt=require("react"),Pe=require("@vuu-ui/vuu-utils");var H=require("react/jsx-runtime"),me="vuuColumnList",Bo="vuuColumnListItem",Fn=({className:t,item:e,...o})=>(0,H.jsxs)(he.ListItem,{...o,className:(0,Fo.default)(t,Bo),"data-name":e==null?void 0:e.name,children:[(0,H.jsx)(he.Icon,{name:"draggable",size:16}),e!=null&&e.isCalculated?(0,H.jsx)(he.Icon,{name:"function"}):(0,H.jsx)(gt.Checkbox,{className:`${me}-checkBox`,checked:e==null?void 0:e.subscribed}),(0,H.jsx)("span",{className:`${me}-text`,children:(0,Pe.getColumnLabel)(e)}),(0,H.jsx)(gt.Switch,{className:`${me}-switch`,checked:(e==null?void 0:e.hidden)!==!0,disabled:(e==null?void 0:e.subscribed)!==!0})]}),Rt=({columnItems:t,onChange:e,onMoveListItem:o,onNavigateToColumn:n,...s})=>{let r=(0,Dt.useCallback)(({target:l})=>{let p=l,m=(0,Pe.queryClosest)(l,`.${Bo}`),{dataset:{name:d}}=m;if(d){let g=(0,Pe.queryClosest)(l,`.${me}-checkBox`),u=(0,Pe.queryClosest)(l,`.${me}-switch`);g?e(d,"subscribed",p.checked):u&&e(d,"hidden",p.checked===!1)}},[e]),a=(0,Dt.useCallback)(l=>{let p=l.target;if(p.classList.contains("vuuColumnList-text")){let m=p.closest(".vuuListItem");m!=null&&m.dataset.name&&(n==null||n(m.dataset.name))}},[]);return(0,H.jsxs)("div",{...s,className:me,children:[(0,H.jsx)("div",{className:`${me}-header`,children:(0,H.jsx)("span",{children:"Column Selection"})}),(0,H.jsxs)("div",{className:`${me}-colHeadings`,children:[(0,H.jsx)("span",{children:"Column subscription"}),(0,H.jsx)("span",{children:"Visibility"})]}),(0,H.jsx)(he.List,{ListItem:Fn,allowDragDrop:!0,height:"auto",onChange:r,onClick:a,onMoveListItem:o,selectionStrategy:"none",source:t,itemHeight:33})]})};var oe=require("@vuu-ui/vuu-ui-controls"),Ze=require("@vuu-ui/vuu-utils"),O=require("@salt-ds/core"),nn=ue(require("clsx"),1);var Wo=require("@vuu-ui/vuu-ui-controls"),Me=require("@vuu-ui/vuu-utils"),K=require("@salt-ds/core"),tt=require("react");var Ao=require("react");var P=require("@vuu-ui/vuu-codemirror"),Gt=require("@vuu-ui/vuu-utils"),G=require("react");var M=require("@vuu-ui/vuu-codemirror");var Lo=require("@lezer/lr"),ft=Lo.LRParser.deserialize({version:14,states:"&xOVQPOOO!fQPO'#C^OVQPO'#CcQ!pQPOOO#bQPO'#CkO#gQPO'#CrOOQO'#Cy'#CyO#lQPO,58}OVQPO,59QOVQPO,59QOOQO'#Cn'#CnOVQPO,59XOVQPO,59VOVQPO'#CtOOQO,59^,59^OOQO1G.i1G.iOOQO1G.l1G.lO$bQPO1G.lO%ZQPO1G.sO!pQPO'#CmO%qQQO1G.qO%|QQO'#C{OOQO'#C{'#C{O&wQPO,59`OVQPO,59ZOVQPO,59[OVQPO7+$]OVQPO'#CuO'RQPO1G.zOOQO1G.z1G.zO'ZQQO'#C^O'eQQO1G.sO'{QQO1G.uOOQO1G.v1G.vO(WQPO<<GwO(_QPO,59aOOQO-E6s-E6sOOQO7+$f7+$fOVQPOAN=cO(iQQO1G.lO(yQPOG22}OOQOLD(iLD(iO)QQPO,59QO)QQPO,59QO)QQPO,59X",stateData:")n~OlOS~ORUOSUOTUOUUOWQO`SOnPO~OWgXZQX[QX]QX^QXpQXqQXrQXsQXtQXuQXeQX~OjQXXQX~PnOZWO[WO]XO^XOpYOqYOrYOsYOtYOuYO~OW[O~OW]O~OX_O~P!pO]Yi^YipYiqYirYisYitYiuYieYi~OZWO[WOjYiXYi~P#sOpaiqairaisaitaiuaieai~OZWO[WO]XO^XOjaiXai~P$rOejOvhOwiO~OZmX[mX]mX^mXeoXpmXqmXrmXsmXtmXumXvoXwoX~OXmOekO~P!pOXuOekO~OvQXwQX~PnOZzO[zO]{O^{Ovaiwai~P$rOwiOecivci~OevO~P!pOXiaeia~P!pOZzO[zOvYiwYi~P#sOXyO~P!pORUOSUOTUOUUOWQO`SOnnO~O`UTn~",goto:"$epPPqPPPPqPPqPPPPqP!S!g!r!rPq!w#Y#]PPP#cP$[oUOQWXZ[]hijkvz{|hUOQWXZ]jkvz{|Ve[hi[ZRVgrsxR|cVf[hioTOQWXZ[]hijkvz{|R^TQlgRtlQROQVQS`WzQaXQbZUc[hiQg]Qo|QrjQskQw{RxvQd[QphRqi",nodeNames:"\u26A0 ColumnDefinitionExpression Column Number String True False ParenthesizedExpression OpenBrace CloseBrace ArithmeticExpression Divide Times Plus Minus ConditionalExpression If RelationalExpression RelationalOperator AndCondition OrCondition Comma CallExpression Function ArgList",maxTerm:39,skippedNodes:[0],repeatNodeCount:1,tokenData:".^~RnXY#PYZ#P]^#Ppq#Pqr#brs#mxy$eyz$jz{$o{|$t|}$y}!O%O!O!P%T!P!Q%c!Q![%h!^!_%s!_!`&Q!`!a&V!c!}&d#R#S&d#T#U&u#U#Y&d#Y#Z(Y#Z#]&d#]#^*j#^#c&d#c#d+f#d#h&d#h#i,b#i#o&d~#USl~XY#PYZ#P]^#Ppq#P~#eP!_!`#h~#mOu~~#pWOX#mZ]#m^r#mrs$Ys#O#m#P;'S#m;'S;=`$_<%lO#m~$_OS~~$bP;=`<%l#m~$jOW~~$oOX~~$tO[~~$yO]~~%OOe~~%TO^~~%WP!Q![%Z~%`PR~!Q![%Z~%hOZ~~%mQR~!O!P%Z!Q![%h~%xPr~!_!`%{~&QOt~~&VOp~~&[Pq~!_!`&_~&dOs~P&iSnP!Q![&d!c!}&d#R#S&d#T#o&dR&zUnP!Q![&d!c!}&d#R#S&d#T#b&d#b#c'^#c#o&dR'cUnP!Q![&d!c!}&d#R#S&d#T#W&d#W#X'u#X#o&dR'|SvQnP!Q![&d!c!}&d#R#S&d#T#o&d~(_TnP!Q![&d!c!}&d#R#S&d#T#U(n#U#o&d~(sUnP!Q![&d!c!}&d#R#S&d#T#`&d#`#a)V#a#o&d~)[UnP!Q![&d!c!}&d#R#S&d#T#g&d#g#h)n#h#o&d~)sUnP!Q![&d!c!}&d#R#S&d#T#X&d#X#Y*V#Y#o&d~*^SU~nP!Q![&d!c!}&d#R#S&d#T#o&d~*oUnP!Q![&d!c!}&d#R#S&d#T#Y&d#Y#Z+R#Z#o&d~+YS`~nP!Q![&d!c!}&d#R#S&d#T#o&dR+kUnP!Q![&d!c!}&d#R#S&d#T#f&d#f#g+}#g#o&dR,USwQnP!Q![&d!c!}&d#R#S&d#T#o&d~,gUnP!Q![&d!c!}&d#R#S&d#T#f&d#f#g,y#g#o&d~-OUnP!Q![&d!c!}&d#R#S&d#T#i&d#i#j-b#j#o&d~-gUnP!Q![&d!c!}&d#R#S&d#T#X&d#X#Y-y#Y#o&d~.QST~nP!Q![&d!c!}&d#R#S&d#T#o&d",tokenizers:[0,1],topRules:{ColumnDefinitionExpression:[0,1]},tokenPrec:393});var Bn=M.LRLanguage.define({name:"VuuColumnExpression",parser:ft.configure({props:[(0,M.styleTags)({Column:M.tags.attributeValue,Function:M.tags.variableName,String:M.tags.string,Or:M.tags.emphasis,Operator:M.tags.operator})]})}),Nt=()=>new M.LanguageSupport(Bn);var Ht=class{constructor(e){switch(this.value=e,typeof e){case"boolean":this.type="booleanLiteralExpression";break;case"number":this.type="numericLiteralExpression";break;default:this.type="stringLiteralExpression"}}toJSON(){return{type:this.type,value:this.value}}},Vt=class{constructor(e){this.type="colExpression";this.column=e}toJSON(){return{type:this.type,column:this.column}}},Je,ye,Qt=class{constructor(e="unknown"){U(this,Je,[{type:"unknown"},{type:"unknown"}]);U(this,ye,void 0);this.type="arithmeticExpression";pe(this,ye,e)}get op(){return f(this,ye)}set op(e){pe(this,ye,e)}get expressions(){return f(this,Je)}toJSON(){return{type:this.type,op:f(this,ye),expressions:f(this,Je)}}};Je=new WeakMap,ye=new WeakMap;var De,It=class{constructor(e){U(this,De,[]);this.type="callExpression";this.functionName=e}get expressions(){return f(this,De)}get arguments(){return f(this,De)}toJSON(){return{type:this.type,functionName:this.functionName,arguments:f(this,De).map(e=>{var o;return(o=e.toJSON)==null?void 0:o.call(e)})}}};De=new WeakMap;var Ke,Re,Be=class{constructor(){U(this,Ke,[{type:"unknown"},{type:"unknown"}]);U(this,Re,"unknown");this.type="relationalExpression"}get op(){return f(this,Re)}set op(e){pe(this,Re,e)}get expressions(){return f(this,Ke)}toJSON(){return{type:this.type,op:f(this,Re),expressions:f(this,Ke)}}};Ke=new WeakMap,Re=new WeakMap;var je,Ne,Le=class{constructor(e){U(this,je,[{type:"unknown"},{type:"unknown"}]);U(this,Ne,void 0);this.type="booleanCondition";pe(this,Ne,e)}get op(){return f(this,Ne)}get expressions(){return f(this,je)}toJSON(){return{type:this.type,op:f(this,Ne),expressions:f(this,je).map(e=>{var o;return(o=e.toJSON)==null?void 0:o.call(e)})}}};je=new WeakMap,Ne=new WeakMap;var Y,_e=class{constructor(e){U(this,Y,void 0);this.type="conditionalExpression";pe(this,Y,[e?new Le(e):new Be,{type:"unknown"},{type:"unknown"}])}get expressions(){return f(this,Y)}get condition(){return f(this,Y)[0]}get truthyExpression(){return f(this,Y)[1]}set truthyExpression(e){f(this,Y)[1]=e}get falsyExpression(){return f(this,Y)[2]}set falsyExpression(e){f(this,Y)[2]=e}toJSON(){var e,o,n,s,r;return{type:this.type,condition:(o=(e=this.condition).toJSON)==null?void 0:o.call(e),truthyExpression:this.truthyExpression,falsyExpression:(r=(s=(n=this.falsyExpression)==null?void 0:n.toJSON)==null?void 0:s.call(n))!=null?r:this.falsyExpression}}};Y=new WeakMap;var be=t=>t.type==="unknown",Ct=t=>t.type==="arithmeticExpression",Ln=t=>t.type==="callExpression",Fe=t=>t.type==="conditionalExpression",Dn=t=>t.type==="relationalExpression"||t.type==="booleanCondition";var Rn=t=>t.type==="booleanCondition",At=t=>(t==null?void 0:t.type)==="relationalExpression";var A=t=>{if(be(t))return t;if(At(t)){let[e,o]=t.expressions;if(N(e))return A(e);if(t.op==="unknown")return t;if(N(o))return A(o)}else if(Dn(t)){let{expressions:e=[]}=t;for(let o of e)if(N(o))return A(o)}else if(Fe(t)){let{condition:e,truthyExpression:o,falsyExpression:n}=t;if(N(e))return A(e);if(N(o))return A(o);if(N(n))return A(n)}else if(Ct(t)){let{expressions:e=[]}=t;for(let o of e)if(N(o))return A(o)}},vt=(t,e,o)=>{let{expressions:n=[]}=t;if(n.includes(e)){let s=n.indexOf(e);return n.splice(s,1,o),!0}else for(let s of n)if(vt(s,e,o))return!0;return!1},N=t=>be(t)?!0:Fe(t)?N(t.condition)||N(t.truthyExpression)||N(t.falsyExpression):At(t)||Rn(t)?t.op===void 0||t.expressions.some(e=>N(e)):!1,Do=(t,e)=>{let o=A(t);o?o.expressions?o.expressions.push(e):console.warn("don't know how to treat targetExpression"):console.error("no target expression found")},y,Ee,Mt=class{constructor(){U(this,y,void 0);U(this,Ee,[])}setCondition(e){if(f(this,y)===void 0)this.addExpression(new _e(e));else if(Fe(f(this,y))){if(N(f(this,y).condition)){let o=e?new Le(e):new Be;this.addExpression(o)}else if(be(f(this,y).truthyExpression))f(this,y).truthyExpression=new _e(e);else if(N(f(this,y).truthyExpression)){let o=e?new Le(e):new Be;this.addExpression(o)}else if(be(f(this,y).falsyExpression))f(this,y).falsyExpression=new _e(e);else if(N(f(this,y).falsyExpression)){let o=e?new Le(e):new Be;this.addExpression(o)}}else console.error("setCondition called unexpectedly")}addExpression(e){if(f(this,Ee).length>0){let o=f(this,Ee).at(-1);o==null||o.arguments.push(e)}else if(f(this,y)===void 0)pe(this,y,e);else if(Ct(f(this,y))){let o=A(f(this,y));o&&be(o)&&vt(f(this,y),o,e)}else if(Fe(f(this,y))&&N(f(this,y))){let o=A(f(this,y));o&&be(o)?vt(f(this,y),o,e):o&&Do(o,e)}}setFunction(e){let o=new It(e);this.addExpression(o),f(this,Ee).push(o)}setColumn(e){this.addExpression(new Vt(e))}setArithmeticOp(e){let o=e,n=f(this,y);Ct(n)&&(n.op=o)}setRelationalOperator(e){let o=e;if(f(this,y)&&Fe(f(this,y))){let n=A(f(this,y));At(n)?n.op=o:console.error(`no target expression found (op = ${e})`)}}setValue(e){let o=new Ht(e);if(f(this,y)===void 0)pe(this,y,o);else if(Ct(f(this,y)))this.addExpression(o);else if(Ln(f(this,y)))f(this,y).arguments.push(o);else if(Fe(f(this,y)))if(N(f(this,y))){let n=A(f(this,y));n&&be(n)?vt(f(this,y),n,o):n&&Do(n,o)}else console.log("what do we do with value, in a complete expression")}closeBrace(){f(this,Ee).pop()}get expression(){return f(this,y)}toJSON(){var e;return(e=f(this,y))==null?void 0:e.toJSON()}};y=new WeakMap,Ee=new WeakMap;var $t=(t,e)=>{let o=new Mt,n=t.cursor();do{let{name:s,from:r,to:a}=n;switch(s){case"AndCondition":o.setCondition("and");break;case"OrCondition":o.setCondition("or");break;case"RelationalExpression":o.setCondition();break;case"ArithmeticExpression":o.addExpression(new Qt);break;case"Column":{let l=e.substring(r,a);o.setColumn(l)}break;case"Function":{let l=e.substring(r,a);o.setFunction(l)}break;case"Times":case"Divide":case"Plus":case"Minus":{let l=e.substring(r,a);o.setArithmeticOp(l)}break;case"RelationalOperator":{let l=e.substring(r,a);o.setRelationalOperator(l)}break;case"False":case"True":{let l=e.substring(r,a);o.setValue(l==="true")}break;case"String":o.setValue(e.substring(r+1,a-1));break;case"Number":o.setValue(parseFloat(e.substring(r,a)));break;case"CloseBrace":o.closeBrace();break;default:}}while(n.next());return o.toJSON()};var Nn=ft.configure({strict:!0}),Ro=["Number","String"],xt=[...Ro,"AndCondition","ArithmeticExpression","BooleanOperator","RelationalOperatorOperator","CallExpression","CloseBrace","Column","Comma","ConditionalExpression","Divide","Equal","If","Minus","OpenBrace","OrCondition","ParenthesizedExpression","Plus","RelationalExpression","RelationalOperator","Times"],zt=t=>{try{return Nn.parse(t),!0}catch{return!1}},ht=t=>{let{lastChild:e}=t;for(;e&&!xt.includes(e.name);)e=e.prevSibling,console.log(e==null?void 0:e.name);return e},Zt=t=>{if((t==null?void 0:t.name)==="RelationalExpression"){let{firstChild:e}=t,o=ht(t);if((e==null?void 0:e.name)==="Column"&&typeof(o==null?void 0:o.name)=="string"&&Ro.includes(o.name))return!0}return!1};var de=require("@vuu-ui/vuu-codemirror"),Hn=de.HighlightStyle.define([{tag:de.tags.attributeValue,color:"var(--vuuFilterEditor-variableColor);font-weight: bold"},{tag:de.tags.variableName,color:"var(--vuuFilterEditor-variableColor)"},{tag:de.tags.comment,color:"green",fontStyle:"italic"}]),No=(0,de.syntaxHighlighting)(Hn);var Ho=require("@vuu-ui/vuu-codemirror"),Vo=Ho.EditorView.theme({"&":{border:"solid 1px var(--salt-container-primary-borderColor)",color:"var(--vuuFilterEditor-color)",backgroundColor:"var(--vuuFilterEditor-background)"},".cm-content":{caretColor:"var(--vuuFilterEditor-cursorColor)"},"&.cm-focused .cm-cursor":{borderLeftColor:"var(--vuuFilterEditor-cursorColor)"},"&.cm-focused .cm-selectionBackground, ::selection":{backgroundColor:"var(--vuuFilterEditor-selectionBackground)"},".cm-selectionBackground, ::selection":{backgroundColor:"var(--vuuFilterEditor-selectionBackground)"},".cm-scroller":{fontFamily:"var(--vuuFilterEditor-fontFamily)"},".cm-completionLabel":{color:"var(--vuu-color-gray-50)"},".cm-completionMatchedText":{color:"var(--vuu-color-gray-80)",fontWeight:700,textDecoration:"none"},".cm-tooltip":{background:"var(--vuuFilterEditor-tooltipBackground)",border:"var(--vuuFilterEditor-tooltipBorder)",borderRadius:"4px",boxShadow:"var(--vuuFilterEditor-tooltipElevation)","&.cm-tooltip-autocomplete > ul":{fontFamily:"var(--vuuFilterEditor-fontFamily)",fontSize:"var(--vuuFilterEditor-fontSize)",maxHeight:"240px"},"&.cm-tooltip-autocomplete > ul > li":{height:"var(--vuuFilterEditor-suggestion-height)",padding:"0 3px",lineHeight:"var(--vuuFilterEditor-suggestion-height)"},"&.cm-tooltip-autocomplete li[aria-selected]":{background:"var(--vuuFilterEditor-suggestion-selectedBackground)",color:"var(--vuuFilterEditor-suggestion-selectedColor)"},"&.cm-tooltip-autocomplete li .cm-completionDetail":{color:"var(--vuuFilterEditor-suggestion-detailColor)"}}},{dark:!1});var F=require("@vuu-ui/vuu-codemirror"),Wt=require("react");var Vn=(t,e)=>e?t.map(o=>{var n;return{...o,apply:typeof o.apply=="function"?o.apply:`${e}${(n=o.apply)!=null?n:o.label}`}}):t,Qn=t=>t===void 0?!1:["Times","Divide","Plus","Minus"].includes(t.name),et=t=>({apply:()=>{t==null||t()},label:"Done",boost:10}),He=(t,e)=>{var s;let{lastChild:o}=t,{pos:n}=e;for(;o;)if(o.from<n&&xt.includes(o.name)){if(o.name==="ParenthesizedExpression"){let a=(s=o.firstChild)==null?void 0:s.nextSibling;a&&(o=a)}return o}else o=o.prevSibling},Qo=(t,e)=>{var o;if(t.name==="ArgList"){let n=t.prevSibling;if(n)return(0,F.getValue)(n,e)}else if(t.name==="OpenBrace"){let n=(o=t.parent)==null?void 0:o.prevSibling;if((n==null?void 0:n.name)==="Function")return(0,F.getValue)(n,e)}},Io=(t,e)=>{if(t.name==="RelationalExpression"){let o=ht(t);if((o==null?void 0:o.name)==="RelationalOperator")return(0,F.getValue)(o,e)}else{let o=t.prevSibling;if((o==null?void 0:o.name)==="RelationalOperator")return(0,F.getValue)(o,e)}},Yt=(t,e)=>{var o;if(t.name==="RelationalExpression"){if(((o=t.firstChild)==null?void 0:o.name)==="Column")return(0,F.getValue)(t.firstChild,e)}else{let n=t.prevSibling;if((n==null?void 0:n.name)==="Column")return(0,F.getValue)(n,e);if((n==null?void 0:n.name)==="RelationalOperator")return Yt(n,e)}},Xt=async(t,e,o,n={})=>{let s=await e.getSuggestions(o,n),{startsWith:r=""}=n;return{from:t.pos-r.length,options:s}},Ut=(t,e,o,n,s)=>{let r=He(t,e);switch(r==null?void 0:r.name){case"If":return Xt(e,o,"expression",{prefix:"( "});case"OpenBrace":return Xt(e,o,"expression");case"Condition":return Xt(e,o,"expression",{prefix:", "});case"CloseBrace":if(n){let a=[et(s)];return{from:e.pos,options:a}}}},In=(t,e)=>{let o=[et(e)];return{from:t.pos,options:o}},Mo=(t,e)=>{let o=(0,Wt.useCallback)(async(n,s,r={})=>{let a=await t.getSuggestions(s,r),{startsWith:l=""}=r;return{from:n.pos-l.length,options:a}},[t]);return(0,Wt.useCallback)(async n=>{var g,u;let{state:s,pos:r}=n,a=(g=n.matchBefore(/\w*/))!=null?g:{from:0,to:0,text:void 0},p=(0,F.syntaxTree)(s).resolveInner(r,-1),m=s.doc.toString(),d=zt(m);switch(p.name){case"If":return o(n,"expression",{prefix:"( "});case"Condition":{let i=He(p,n);if((i==null?void 0:i.name)==="Column"){let c=(0,F.getPreviousNode)(i);if((c==null?void 0:c.name)!=="RelationalOperator")return o(n,"condition-operator",{columnName:(0,F.getValue)(i,s)})}else if((i==null?void 0:i.name)==="RelationalOperator")return o(n,"expression")}break;case"ConditionalExpression":return Ut(p,n,t);case"RelationalExpression":{if(Zt(p))return{from:n.pos,options:F.booleanJoinSuggestions.concat({label:", <truthy expression>, <falsy expression>",apply:", "})};{let i=Io(p,s),c=Yt(p,s);if(i)return o(n,"expression");{let C=await t.getSuggestions("condition-operator",{columnName:c});return{from:n.pos,options:C}}}}break;case"RelationalOperator":return o(n,"expression");case"String":{let i=Io(p,s),c=Yt(p,s),{from:C,to:v}=p;if(v-C===2&&n.pos===C+1){if(c&&i)return o(n,"columnValue",{columnName:c,operator:i,startsWith:a.text})}else if(v-C>2&&n.pos===v)return o(n,"expression",{prefix:", "})}break;case"ArithmeticExpression":{let i=He(p,n);if((i==null?void 0:i.name)==="Column")return o(n,"expression");if(Qn(i)){let c=i.name;return o(n,"column",{operator:c})}}break;case"OpenBrace":{let i=Qo(p,s);return o(n,"expression",{functionName:i})}break;case"ArgList":{let i=Qo(p,s),c=He(p,n),C=(c==null?void 0:c.name)==="OpenBrace"||(c==null?void 0:c.name)==="Comma"?void 0:",",v=await t.getSuggestions("expression",{functionName:i});return v=C?Vn(v,", "):v,(c==null?void 0:c.name)!=="OpenBrace"&&(c==null?void 0:c.name)!=="Comma"&&(v=[{apply:") ",boost:10,label:"Done - no more arguments"}].concat(v)),{from:n.pos,options:v}}case"Equal":if(m.trim()==="=")return o(n,"expression");break;case"ParenthesizedExpression":case"ColumnDefinitionExpression":if(n.pos===0)return o(n,"expression");{let i=He(p,n);if((i==null?void 0:i.name)==="Column"){if(d){let c=[et(e.current)],C=(0,F.getValue)(i,s),v=await t.getSuggestions("operator",{columnName:C});return{from:n.pos,options:c.concat(v)}}}else if((i==null?void 0:i.name)==="CallExpression"){if(d)return{from:n.pos,options:[et(e.current)]}}else if((i==null?void 0:i.name)==="ArithmeticExpression"){if(d){let c=[et(e.current)],C=He(i,n);if((C==null?void 0:C.name)==="Column"){let v=(0,F.getValue)(C,s),x=await t.getSuggestions("operator",{columnName:v});c=c.concat(x)}return{from:n.pos,options:c}}}else if((i==null?void 0:i.name)==="ConditionalExpression")return Ut(i,n,t,d,e.current);break}case"Column":if(await t.isPartialMatch("expression",void 0,a.text))return o(n,"expression",{startsWith:a.text});break;case"Comma":{let i=(0,F.getNamedParentNode)(p);if((i==null?void 0:i.name)==="ConditionalExpression")return o(n,"expression")}break;case"CloseBrace":{let i=(0,F.getNamedParentNode)(p);if((i==null?void 0:i.name)==="ConditionalExpression")return Ut(i,n,t,d,e.current);if((i==null?void 0:i.name)==="ArgList"&&d)return In(n,e.current)}break;default:((u=p==null?void 0:p.prevSibling)==null?void 0:u.name)==="FilterClause"&&console.log("looks like we ight be a or|and operator")}},[o,e,t])};var bt=t=>{if(t.current==null)throw Error("EditorView not defined");return t.current},Mn=()=>"vuuSuggestion",An=()=>console.log("noooop"),$n=t=>"expressionType"in t,zn=t=>{if($n(t)){let e=(0,Gt.createEl)("div","expression-type-container"),o=(0,Gt.createEl)("span","expression-type",t.expressionType);return e.appendChild(o),e}else return null},qt=({onChange:t,onSubmitExpression:e,source:o,suggestionProvider:n})=>{let s=(0,G.useRef)(null),r=(0,G.useRef)(An),a=(0,G.useRef)(),l=Mo(n,r),[p,m,d]=(0,G.useMemo)(()=>{let u=()=>{let x=bt(a),h=x.state.doc.toString(),w=(0,P.ensureSyntaxTree)(x.state,x.state.doc.length,5e3);if(w){let D=$t(w,h);return[h,D]}else return["",void 0]},i=()=>{bt(a).setState(v())},c=()=>{let[x,h]=u();e==null||e(x,h)},C=x=>P.keymap.of([{key:x,run(){return(0,P.startCompletion)(bt(a)),!0}}]),v=()=>P.EditorState.create({doc:o,extensions:[P.minimalSetup,(0,P.autocompletion)({addToOptions:[{render:zn,position:70}],override:[l],optionClass:Mn}),Nt(),P.keymap.of(P.defaultKeymap),C("ArrowDown"),P.EditorView.updateListener.of(x=>{let h=bt(a);if(x.docChanged){(0,P.startCompletion)(h);let w=h.state.doc.toString();t==null||t(w)}}),P.EditorState.transactionFilter.of(x=>x.newDoc.lines>1?[]:x),Vo,No]});return r.current=()=>{c()},[v,i,c]},[l,t,e,o]);(0,G.useEffect)(()=>{if(!s.current)throw Error("editor not in dom");return a.current=new P.EditorView({state:p(),parent:s.current}),()=>{var u;(u=a.current)==null||u.destroy()}},[l,p]);let g=(0,G.useCallback)(()=>{d()},[d]);return{editorRef:s,clearInput:m,onBlur:g}};var $o=require("react/jsx-runtime"),Zn="vuuColumnExpressionInput",yt=(0,Ao.memo)(({onChange:t,onSubmitExpression:e,source:o="",suggestionProvider:n})=>{let{editorRef:s,onBlur:r}=qt({onChange:t,onSubmitExpression:e,source:o,suggestionProvider:n});return(0,$o.jsx)("div",{className:`${Zn}`,onBlur:r,ref:s})},(t,e)=>t.source===e.source);yt.displayName="ColumnExpressionInput";var _=require("@vuu-ui/vuu-codemirror"),Et=require("@vuu-ui/vuu-data-react"),Ie=require("@vuu-ui/vuu-utils"),Qe=require("react");var Ve=[{accepts:["boolean"],description:"Applies boolean and operator across supplied parameters to returns a single boolean result",example:{expression:'and(ccy="EUR",quantity=0)',result:"true | false"},name:"and",params:{description:"( boolean, [ boolean* ] )"},type:"boolean"},{accepts:"string",description:"Returns multiple string values as a single joined string. Arguments may be string literal values, string columns or other string expressions. Non string arguments may also be included, these will be converted to strings.",example:{expression:'concatenate("example", "-test")',result:'"example-test"'},name:"concatenate",params:{description:"( string, string, [ string* ] )"},type:"string"},{accepts:["string","string"],description:"Tests a string value to determine whether it contains a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> contains one or more occurrences of <target subscring>",example:{expression:'contains("Royal Bank of Scotland", "bank")',result:"true"},name:"contains",params:{description:"( string )"},type:"boolean"},{accepts:["string","number"],description:"Returns the leftmost <number> characters from <string>. First argument may be a string literal, string column or other string expression.",example:{expression:'left("USD Benchmark Report", 3)',result:'"USD"'},name:"left",params:{count:2,description:"( string, number )"},type:"string"},{accepts:"string",description:"Returns the number of characters in <string>. Argument may be a string literal, string column or other string expression.",example:{expression:'len("example")',result:"7"},name:"len",params:{description:"(string)"},type:"number"},{accepts:"string",description:"Convert a string value to lowercase. Argument may be a string column or other string expression.",example:{expression:'lower("examPLE")',result:'"example"'},name:"lower",params:{description:"( string )"},type:"string"},{accepts:["boolean"],description:"Applies boolean or operator across supplied parameters to returns a single boolean result",example:{expression:'or(status="cancelled",quantity=0)',result:"true | false"},name:"or",params:{description:"( boolean, [ boolean* ] )"},type:"boolean"},{accepts:"string",description:"Convert a string value to uppercase. Argument may be a string column or other string expression.",example:{expression:'upper("example")',result:'"EXAMPLE"'},name:"upper",params:{description:"( string )"},type:"string"},{accepts:["string","number"],description:"Returns the rightmost <number> characters from <string>. First argument may be a string literal, string column or other string expression.",example:{expression:"blah",result:"blah"},name:"right",params:{description:"( string )"},type:"string"},{accepts:["string","string","string"],description:"Replace characters within a string. Accepts three arguments: source text, text to replace and replacement text. Returns a copy of <source text> with any occurrences of <text to replace> replaced by <replacement text>",example:{expression:"blah",result:"blah"},name:"replace",params:{description:"( string )"},type:"string"},{accepts:"number",description:"Converts a number to a string.",example:{expression:"blah",result:"blah"},name:"text",params:{description:"( string )"},type:"string"},{accepts:"string",description:"Tests a string value to determine whether it starts with a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> starts with <target subscring>.",example:{expression:"blah",result:"blah"},name:"starts",params:{description:"( string )"},type:"boolean"},{accepts:"string",description:"Tests a string value to determine whether it ends with a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> ends with <target subscring>.",example:{expression:"blah",result:"blah"},name:"ends",params:{description:"( string )"},type:"boolean"},{accepts:"number",description:"blah",example:{expression:"blah",result:"blah"},name:"min",params:{description:"( string )"},type:"number"},{accepts:"number",description:"blah",example:{expression:"blah",result:"blah"},name:"max",params:{description:"( string )"},type:"number"},{accepts:"number",description:"blah",example:{expression:"blah",result:"blah"},name:"sum",params:{description:"( string )"},type:"number"},{accepts:"number",description:"blah",example:{expression:"blah",result:"blah"},name:"round",params:{description:"( string )"},type:"number"},{accepts:"any",description:"blah",example:{expression:"blah",result:"blah"},name:"or",params:{description:"( string )"},type:"boolean"},{accepts:"any",description:"blah",example:{expression:"blah",result:"blah"},name:"and",params:{description:"( string )"},type:"boolean"},{accepts:"any",description:"Return one of two possible result values, depending on the evaluation of a filter expression. If <filterExpression> resolves to true, result is <expression1>, otherwise <expression2>. ",example:{expression:"blah",result:"blah"},name:"if",params:{description:"( filterExpression, expression1, expression 2)"},type:"variable"}];var q=require("@vuu-ui/vuu-utils"),zo=({name:t,description:e,example:o,params:n,type:s})=>{let r=(0,q.createEl)("div","vuuFunctionDoc"),a=(0,q.createEl)("div","function-heading"),l=(0,q.createEl)("span","function-name",t),p=(0,q.createEl)("span","param-list",n.description),m=(0,q.createEl)("span","function-type",s);a.appendChild(l),a.appendChild(p),a.appendChild(m);let d=(0,q.createEl)("p",void 0,e);if(r.appendChild(a),r.appendChild(d),o){let g=(0,q.createEl)("div","example-container"),u=(0,q.createEl)("div","example-expression",o.expression),i=(0,q.createEl)("div","example-result",o.result);g.appendChild(u),r.appendChild(g),r.appendChild(i)}return r};var Xn=[],we=t=>t.map(e=>{var o;return{...e,apply:((o=e.apply)!=null?o:e.label)+" "}}),Un=(t,{functionName:e,operator:o})=>{if(o)return t.filter(Ie.isNumericColumn);if(e){let n=Ve.find(s=>s.name===e);if(n)switch(n.accepts){case"string":return t.filter(Ie.isTextColumn);case"number":return t.filter(Ie.isNumericColumn);default:return t}}return t},Zo=(t,e)=>Un(t,e).map(n=>{var r;let s=(r=n.label)!=null?r:n.name;return{apply:e.prefix?`${e.prefix}${n.name}`:n.name,label:s,boost:5,type:"column",expressionType:n.serverDataType}}),Wn=[{apply:"* ",boost:2,label:"*",type:"operator"},{apply:"/ ",boost:2,label:"/",type:"operator"},{apply:"+ ",boost:2,label:"+",type:"operator"},{apply:"- ",boost:2,label:"-",type:"operator"}],Yn=t=>t===void 0||(0,Ie.isNumericColumn)(t)?Wn:Xn,Gn=t=>{switch(t.serverDataType){case"string":case"char":return we(_.stringOperators);case"int":case"long":case"double":return we(_.numericOperators)}},_t=t=>({apply:`${t.name}( `,boost:2,expressionType:t.type,info:()=>zo(t),label:t.name,type:"function"}),qn=t=>{if(t){if(typeof t.accepts=="string")return t.accepts;if(Array.isArray(t.accepts))return t.accepts.every(e=>e==="string")?"string":"any"}return"any"},_n=Ve.map(_t),Jn=({functionName:t})=>{if(t){let e=Ve.find(n=>n.name===t),o=qn(e);if(e)switch(o){case"string":return Ve.filter(n=>n.type==="string"||n.type==="variable").map(_t);case"number":return Ve.filter(n=>n.type==="number"||n.type==="variable").map(_t);default:}}return _n},Kn={},Jt=({columns:t,table:e})=>{let o=(0,Qe.useCallback)(l=>l?t.find(p=>p.name===l):void 0,[t]),n=(0,Qe.useRef)(),s=(0,Et.useTypeaheadSuggestions)(),r=(0,Qe.useCallback)(async(l,p=Kn)=>{let{columnName:m,functionName:d,operator:g,prefix:u}=p;switch(l){case"expression":{let i=await we(Zo(t,{functionName:d,prefix:u})).concat(Jn(p));return n.current=i}case"column":{let i=await Zo(t,p);return n.current=we(i)}case"operator":{let i=await Yn(o(m));return n.current=we(i)}case"relational-operator":{let i=await(0,_.getRelationalOperators)(o(m));return n.current=we(i)}case"condition-operator":{let i=o(m);if(i){let c=await Gn(i);if(c)return n.current=we(c)}}break;case"columnValue":if(m&&g){let i=(0,Et.getTypeaheadParams)(e,m),c=await s(i);return n.current=(0,_.toSuggestions)(c,{suffix:""}),n.current.forEach(C=>{C.apply=(v,x,h)=>{let w=new _.AnnotationType,D=h+x.label.length+1;v.dispatch({changes:{from:h,insert:x.label},selection:{anchor:D,head:D},annotations:w.of(x)})}}),n.current}break}return[]},[t,o,s,e]),a=(0,Qe.useCallback)(async(l,p,m)=>{let{current:d}=n,g=!1,u=d||await r(l,{columnName:p});if(m&&u)for(let i of u){if(i.label===m)return!1;i.label.startsWith(m)&&(g=!0)}return g},[r]);return{getSuggestions:r,isPartialMatch:a}};var J=require("@vuu-ui/vuu-utils"),se=require("react"),jn=t=>{let[e,o,n]=(0,J.getCalculatedColumnDetails)(t);return n===""?{...t,name:`${e}:string:${o}`}:t},Xo=({column:t,onChangeName:e,onChangeServerDataType:o})=>{let[n,s]=(0,se.useState)(jn(t)),r=(0,se.useRef)(t),a=(0,se.useCallback)(d=>{r.current=d,s(d)},[]),l=(0,se.useCallback)(d=>{let{value:g}=d.target,u=(0,J.setCalculatedColumnName)(n,g);a(u),e==null||e(u.name)},[n,e,a]),p=(0,se.useCallback)(d=>{let g=d.trim(),{current:u}=r,i=(0,J.setCalculatedColumnExpression)(u,g);a(i),e==null||e(i.name)},[e,a]),m=(0,se.useCallback)((d,g)=>{if((0,J.isVuuColumnDataType)(g)){let u=(0,J.setCalculatedColumnType)(n,g);a(u),e==null||e(u.name),o==null||o(g)}},[n,e,o,a]);return{column:n,onChangeExpression:p,onChangeName:l,onChangeServerDataType:m}};var V=require("react/jsx-runtime"),Uo="vuuColumnExpressionPanel",Kt=({column:t,onChangeName:e,onChangeServerDataType:o,tableConfig:n,vuuTable:s})=>{let r=(0,tt.useRef)(null),{column:a,onChangeExpression:l,onChangeName:p,onChangeServerDataType:m}=Xo({column:t,onChangeName:e,onChangeServerDataType:o}),d=(0,tt.useRef)((0,Me.getCalculatedColumnExpression)(a)),g=Jt({columns:n.columns,table:s}),u=(0,tt.useCallback)(()=>{var i,c;r.current&&((c=(i=r.current)==null?void 0:i.querySelector("button"))==null||c.focus())},[]);return(0,V.jsxs)("div",{className:Uo,children:[(0,V.jsx)("div",{className:"vuuColumnSettingsPanel-header",children:(0,V.jsx)("span",{children:"Calculation"})}),(0,V.jsxs)(K.FormField,{"data-field":"column-name",children:[(0,V.jsx)(K.FormFieldLabel,{children:"Column Name"}),(0,V.jsx)(K.Input,{className:"vuuInput",onChange:p,value:(0,Me.getCalculatedColumnName)(a)})]}),(0,V.jsxs)(K.FormField,{"data-field":"column-expression",children:[(0,V.jsx)(K.FormFieldLabel,{children:"Expression"}),(0,V.jsx)(yt,{onChange:l,onSubmitExpression:u,source:d.current,suggestionProvider:g})]}),(0,V.jsxs)(K.FormField,{"data-field":"type",children:[(0,V.jsx)(K.FormFieldLabel,{children:"Column type"}),(0,V.jsx)(Wo.Dropdown,{className:`${Uo}-type`,onSelectionChange:m,ref:r,selected:(0,Me.getCalculatedColumnType)(a)||null,source:["double","long","string","boolean"],width:"100%"})]})]})};var Jo=require("@vuu-ui/vuu-ui-controls"),ee=require("@vuu-ui/vuu-utils"),Ot=require("@salt-ds/core"),to=ue(require("clsx"),1),Ae=require("react");var Q=require("@salt-ds/core"),Yo=require("@vuu-ui/vuu-utils"),Oe=require("react"),$=require("react/jsx-runtime"),er="vuuFormattingSettings",ot=({column:t,onChangeFormatting:e})=>{var p,m,d;let[o,n]=(0,Oe.useState)((0,Yo.getTypeFormattingFromColumn)(t)),s=(0,Oe.useCallback)(g=>{(g.key==="Enter"||g.key==="Tab")&&e(o)},[o,e]),r=(0,Oe.useCallback)(g=>{let{value:u}=g.target,i=u===""||isNaN(parseInt(u))?void 0:parseInt(u),c={...o,decimals:i};n(c)},[o]),a=(0,Oe.useCallback)(g=>{let{checked:u}=g.target,i={...o,alignOnDecimals:u};n(i),e(i)},[o,e]),l=(0,Oe.useCallback)(g=>{let{checked:u}=g.target,i={...o,zeroPad:u};n(i),e(i)},[o,e]);return(0,$.jsxs)("div",{className:er,children:[(0,$.jsxs)(Q.FormField,{"data-field":"decimals",children:[(0,$.jsx)(Q.FormFieldLabel,{children:"Number of decimals"}),(0,$.jsx)(Q.Input,{className:"vuuInput",onChange:r,onKeyDown:s,value:(p=o.decimals)!=null?p:""})]}),(0,$.jsxs)(Q.FormField,{labelPlacement:"left",children:[(0,$.jsx)(Q.FormFieldLabel,{children:"Align on decimals"}),(0,$.jsx)(Q.Switch,{checked:(m=o.alignOnDecimals)!=null?m:!1,onChange:a,value:"align-decimals"})]}),(0,$.jsxs)(Q.FormField,{labelPlacement:"left",children:[(0,$.jsx)(Q.FormFieldLabel,{children:"Zero pad decimals"}),(0,$.jsx)(Q.Switch,{checked:(d=o.zeroPad)!=null?d:!1,onChange:l,value:"zero-pad"})]})]})};var qo=require("react"),fe=require("@salt-ds/core"),wt=require("@vuu-ui/vuu-utils");var ge=require("react"),Go=require("@vuu-ui/vuu-ui-controls"),ie=require("@vuu-ui/vuu-utils"),j=require("@salt-ds/core"),z=require("react/jsx-runtime"),jt=({column:t,onChangeFormatting:e})=>{var d,g;let o=(0,ie.getTypeFormattingFromColumn)(t),{pattern:n=ie.fallbackDateTimePattern}=o,s=(0,ge.useMemo)(()=>nr(n),[n]),[r,a]=(0,ge.useState)({time:(d=n.time)!=null?d:ie.defaultPatternsByType.time,date:(g=n.date)!=null?g:ie.defaultPatternsByType.date}),l=(0,ge.useCallback)(u=>e({...o,pattern:u}),[e,o]),p=(0,ge.useCallback)(u=>(i,c)=>{let C={...n!=null?n:{},[u]:c};a(v=>{var x,h;return{time:(x=C.time)!=null?x:v.time,date:(h=C.date)!=null?h:v.date}}),l(C)},[l,n]),m=(0,ge.useCallback)(u=>{var c,C,v,x;let i=u.currentTarget.value;switch(i){case"time":return l({[i]:(c=n[i])!=null?c:r[i]});case"date":return l({[i]:(C=n[i])!=null?C:r[i]});case"both":return l({time:(v=n.time)!=null?v:r.time,date:(x=n.date)!=null?x:r.date})}},[l,n,r]);return(0,z.jsxs)(z.Fragment,{children:[(0,z.jsxs)(j.FormField,{labelPlacement:"top",children:[(0,z.jsx)(j.FormFieldLabel,{children:"Display"}),(0,z.jsx)(j.ToggleButtonGroup,{className:"vuuToggleButtonGroup",onChange:m,value:s,"data-variant":"primary",children:or.map(u=>(0,z.jsx)(j.ToggleButton,{value:u,children:u.toUpperCase()},u))})]}),["date","time"].filter(u=>!!n[u]).map(u=>(0,z.jsxs)(j.FormField,{labelPlacement:"top",children:[(0,z.jsx)(j.FormFieldLabel,{children:`${tr[u]} pattern`}),(0,z.jsx)(Go.Dropdown,{onSelectionChange:p(u),selected:n[u],source:ie.supportedDateTimePatterns[u],width:"100%"})]},u))]})},tr={date:"Date",time:"Time"},or=["date","time","both"];function nr(t){return t.time?t.date?"both":"time":"date"}var ae=require("react/jsx-runtime"),rr="vuuLongColumnFormattingSettings",_o=t=>{let{column:e,onChangeColumnType:o}=t,n=(0,wt.isTypeDescriptor)(e.type)?e.type.name:e.type,s=(0,qo.useCallback)(r=>{let a=r.currentTarget.value;o(a)},[o]);return(0,ae.jsxs)("div",{className:rr,children:[(0,ae.jsxs)(fe.FormField,{children:[(0,ae.jsx)(fe.FormFieldLabel,{children:"Type inferred as"}),(0,ae.jsx)(fe.ToggleButtonGroup,{className:"vuuToggleButtonGroup",onChange:s,value:n!=null?n:"number",children:sr.map(r=>(0,ae.jsx)(fe.ToggleButton,{value:r,children:r.toUpperCase()},r))})]}),(0,wt.isDateTimeColumn)(e)?(0,ae.jsx)(jt,{...t,column:e}):(0,ae.jsx)(ot,{...t})]})},sr=["number","date/time"];var W=require("react/jsx-runtime"),eo="vuuColumnFormattingPanel",ir=t=>{var e;return(e=t.label)!=null?e:t.name},oo=({availableRenderers:t,className:e,column:o,onChangeFormatting:n,onChangeColumnType:s,onChangeRendering:r,...a})=>{let l=(0,Ae.useMemo)(()=>ar({column:o,onChangeFormatting:n,onChangeColumnType:s}),[o,s,n]);console.log({formattingSettingsComponent:l});let p=(0,Ae.useMemo)(()=>{let{type:u}=o;if((0,ee.isTypeDescriptor)(u)&&(0,ee.isColumnTypeRenderer)(u.renderer)){let i=(0,ee.getCellRendererOptions)(u.renderer.name);return(0,ee.getConfigurationEditor)(i==null?void 0:i.configEditor)}},[o]),m=(0,Ae.useMemo)(()=>{let{type:u}=o,[i]=t,c=(0,ee.isTypeDescriptor)(u)&&(0,ee.isColumnTypeRenderer)(u.renderer)?u.renderer.name:void 0,C=t.find(v=>v.name===c);return C!=null?C:i},[t,o]),d=(0,Ae.useCallback)((u,i)=>{let c={name:i.name};r==null||r(c)},[r]),{serverDataType:g="string"}=o;return(0,W.jsxs)("div",{...a,className:"vuuColumnSettingsPanel-header",children:[(0,W.jsx)("div",{children:"Formatting"}),(0,W.jsxs)(Ot.FormField,{children:[(0,W.jsx)(Ot.FormFieldLabel,{children:`Renderer (data type ${o.serverDataType})`}),(0,W.jsx)(Jo.Dropdown,{className:(0,to.default)(`${eo}-renderer`),itemToString:ir,onSelectionChange:d,selected:m,source:t,width:"100%"})]}),(0,W.jsxs)("div",{className:(0,to.default)(eo,e,`${eo}-${g}`),children:[l,p?(0,W.jsx)(p,{column:o,onChangeRendering:r}):null]})]})};function ar(t){let{column:e}=t;switch(e.serverDataType){case"double":case"int":return(0,W.jsx)(ot,{...t});case"long":return(0,W.jsx)(_o,{...t});default:return null}}var Ko=ue(require("clsx"),1),St=require("@vuu-ui/vuu-utils");var te=require("react/jsx-runtime"),$e="vuuColumnNameLabel",jo=({column:t,onClick:e})=>{if((0,St.isCalculatedColumn)(t.name)){let[o,n,s]=(0,St.getCalculatedColumnDetails)(t),r=o||"name",a="=expression",l=r==="name"?`${$e}-placeholder`:void 0,p=s===""?`${$e}-placeholder`:void 0;return(0,te.jsxs)("div",{className:(0,Ko.default)($e,`${$e}-calculated`),onClick:e,children:[(0,te.jsx)("span",{className:l,children:r}),(0,te.jsx)("span",{children:":"}),(0,te.jsx)("span",{children:n||"string"}),(0,te.jsx)("span",{children:":"}),(0,te.jsx)("span",{className:p,children:a}),(0,te.jsx)("span",{className:`${$e}-edit`,"data-icon":"edit"})]})}else return(0,te.jsx)("div",{className:$e,children:t.name})};var B=require("@vuu-ui/vuu-utils"),T=require("react"),lr=[{description:"Default formatter for columns with data type integer",label:"Default Renderer (int, long)",name:"default-int"}],ur=[{description:"Default formatter for columns with data type double",label:"Default Renderer (double)",name:"default-double"}],en=[{description:"Default formatter for columns with data type string",label:"Default Renderer (string)",name:"default-string"}],pr=[],cr=t=>{switch(t.serverDataType){case"char":case"string":return en.concat((0,B.getRegisteredCellRenderers)("string"));case"int":case"long":return lr.concat((0,B.getRegisteredCellRenderers)("int"));case"double":return ur.concat((0,B.getRegisteredCellRenderers)("double"));case"boolean":return pr.concat((0,B.getRegisteredCellRenderers)("boolean"));default:return en}},tn=t=>{let e=t.closest(".saltFormField");if(e&&e.dataset.field){let{dataset:{field:o}}=e;return o}else throw Error("named form field not found")},mr=(t,e)=>{if(e.name==="::")return e;{let o=t.find(n=>n.name===e.name);if(o)return o;throw Error(`columns does not contain column ${name}`)}},ze=(t,e)=>({...t,columns:t.columns.map(o=>o.name===e.name?e:o)}),on=({column:t,onCancelCreateColumn:e,onConfigChange:o,onCreateCalculatedColumn:n,tableConfig:s})=>{let[r,a]=(0,T.useState)(mr(s.columns,t)),l=(0,T.useRef)(r),[p,m]=(0,T.useState)(r.name==="::"),d=(0,T.useCallback)(()=>{l.current=r,m(!0)},[r]);(0,T.useEffect)(()=>{a(t),m(t.name==="::")},[t]);let g=(0,T.useMemo)(()=>cr(r),[r]),u=(0,T.useCallback)(()=>{o(ze(s,r))},[r,o,s]),i=(0,T.useCallback)(k=>{let S=(0,B.queryClosest)(k.target,"button");if(S){let Xe=tn(S),{value:Z}=S;switch(Xe){case"column-alignment":if((0,B.isValidColumnAlignment)(Z)){let X={...r,align:Z||void 0};a(X),o(ze(s,X))}break;case"column-pin":if((0,B.isValidPinLocation)(Z)){let X={...r,pin:Z||void 0};a(X),o(ze(s,X));break}}}},[r,o,s]),c=(0,T.useCallback)(k=>{let S=k.target,Xe=tn(S),{value:Z}=S;switch(Xe){case"column-label":a(X=>({...X,label:Z}));break;case"column-name":a(X=>(0,B.setCalculatedColumnName)(X,Z));break;case"column-width":a(X=>({...X,width:parseInt(Z)}));break}},[]),C=(0,T.useCallback)(k=>{a(S=>({...S,name:k}))},[]),v=(0,T.useCallback)(k=>{let S=(0,B.updateColumnFormatting)(r,k);a(S),o(ze(s,S))},[r,o,s]),x=(0,T.useCallback)(k=>{let S=(0,B.updateColumnType)(r,k);a(S),o(ze(s,S))},[r,o,s]),h=(0,T.useCallback)(k=>{a(S=>({...S,serverDataType:k}))},[]),w=(0,T.useCallback)(k=>{if(k){let S=(0,B.updateColumnRenderProps)(r,k);a(S),o(ze(s,S))}},[r,o,s]),D=(0,T.useCallback)(({moveBy:k})=>{let{columns:S}=s,Xe=S.indexOf(r)+k,Z=S[Xe];Z&&a(Z)},[r,s]),st=(0,T.useCallback)(()=>{D({moveBy:1})},[D]),kt=(0,T.useCallback)(()=>{D({moveBy:-1})},[D]),Pt=(0,T.useCallback)(()=>{n(r)},[r,n]),Ft=(0,T.useCallback)(()=>{t.name==="::"?e():(l.current!==void 0&&l.current!==r&&a(l.current),m(!1))},[r,t.name,e]);return{availableRenderers:g,editCalculatedColumn:p,column:r,navigateNextColumn:st,navigatePrevColumn:kt,onCancel:Ft,onChange:c,onChangeCalculatedColumnName:C,onChangeFormatting:v,onChangeRendering:w,onChangeServerDataType:h,onChangeToggleButton:i,onChangeType:x,onEditCalculatedColumn:d,onInputCommit:u,onSave:Pt}};var b=require("react/jsx-runtime"),Ce="vuuColumnSettingsPanel",dr=t=>{let{name:e,label:o}=t;return(0,Ze.isCalculatedColumn)(e)?o!=null?o:(0,Ze.getCalculatedColumnName)(t):o!=null?o:e},gr=({column:t,onCancelCreateColumn:e,onConfigChange:o,onCreateCalculatedColumn:n,tableConfig:s,vuuTable:r})=>{let a=t.name==="::",{availableRenderers:l,editCalculatedColumn:p,column:m,navigateNextColumn:d,navigatePrevColumn:g,onCancel:u,onChange:i,onChangeCalculatedColumnName:c,onChangeFormatting:C,onChangeRendering:v,onChangeServerDataType:x,onChangeToggleButton:h,onChangeType:w,onEditCalculatedColumn:D,onInputCommit:st,onSave:kt}=on({column:t,onCancelCreateColumn:e,onConfigChange:o,onCreateCalculatedColumn:n,tableConfig:s}),{serverDataType:Pt,align:Ft=(0,Ze.getDefaultAlignment)(Pt),pin:k,width:S}=m;return(0,b.jsxs)("div",{className:(0,nn.default)(Ce,{[`${Ce}-editing`]:p}),children:[(0,b.jsx)("div",{className:`${Ce}-header`,children:(0,b.jsx)(jo,{column:m,onClick:D})}),p?(0,b.jsx)(Kt,{column:m,onChangeName:c,onChangeServerDataType:x,tableConfig:s,vuuTable:r}):null,(0,b.jsxs)(O.FormField,{"data-field":"column-label",children:[(0,b.jsx)(O.FormFieldLabel,{children:"Column Label"}),(0,b.jsx)(oe.VuuInput,{className:"vuuInput","data-embedded":!0,onChange:i,onCommit:st,value:dr(m)})]}),(0,b.jsxs)(O.FormField,{"data-field":"column-width",children:[(0,b.jsx)(O.FormFieldLabel,{children:"Column Width"}),(0,b.jsx)(oe.VuuInput,{className:"vuuInput","data-embedded":!0,onChange:i,value:S,onCommit:st})]}),(0,b.jsxs)(O.FormField,{"data-field":"column-alignment",children:[(0,b.jsx)(O.FormFieldLabel,{children:"Alignment"}),(0,b.jsxs)(O.ToggleButtonGroup,{onChange:h,value:Ft,children:[(0,b.jsx)(O.ToggleButton,{value:"left",children:(0,b.jsx)(oe.Icon,{name:"align-left",size:16})}),(0,b.jsx)(O.ToggleButton,{value:"right",children:(0,b.jsx)(oe.Icon,{name:"align-right",size:16})})]})]}),(0,b.jsxs)(O.FormField,{"data-field":"column-pin",children:[(0,b.jsx)(O.FormFieldLabel,{children:"Pin Column"}),(0,b.jsxs)(O.ToggleButtonGroup,{onChange:h,value:k!=null?k:"",children:[(0,b.jsx)(O.ToggleButton,{value:"left",children:(0,b.jsx)(oe.Icon,{name:"pin-left",size:16})}),(0,b.jsx)(O.ToggleButton,{value:"floating",children:(0,b.jsx)(oe.Icon,{name:"pin-float",size:16})}),(0,b.jsx)(O.ToggleButton,{value:"right",children:(0,b.jsx)(oe.Icon,{name:"pin-right",size:16})}),(0,b.jsx)(O.ToggleButton,{value:"",children:(0,b.jsx)(oe.Icon,{name:"cross-circle",size:16})})]})]}),(0,b.jsx)(oo,{availableRenderers:l,column:m,onChangeFormatting:C,onChangeRendering:v,onChangeColumnType:w}),p?(0,b.jsxs)("div",{className:"vuuColumnSettingsPanel-buttonBar","data-align":"right",children:[(0,b.jsx)(O.Button,{className:`${Ce}-buttonCancel`,onClick:u,tabIndex:-1,children:"cancel"}),(0,b.jsx)(O.Button,{className:`${Ce}-buttonSave`,onClick:kt,variant:"cta",children:"save"})]}):(0,b.jsxs)("div",{className:`${Ce}-buttonBar`,"data-align":a?"right":void 0,children:[(0,b.jsx)(O.Button,{className:`${Ce}-buttonNavPrev`,variant:"secondary","data-icon":"arrow-left",onClick:g,children:"PREVIOUS"}),(0,b.jsx)(O.Button,{className:`${Ce}-buttonNavNext`,variant:"secondary","data-icon":"arrow-right",onClick:d,children:"NEXT"})]})]})};var rn=ue(require("clsx"),1),rt=require("react");var le=require("react/jsx-runtime"),nt="vuuDatasourceStats",no=new Intl.NumberFormat,fr=({className:t,dataSource:e})=>{let[o,n]=(0,rt.useState)(e.range),[s,r]=(0,rt.useState)(e.size);(0,rt.useEffect)(()=>(r(e.size),e.on("resize",r),e.on("range",n),()=>{e.removeListener("resize",r),e.removeListener("range",n)}),[e]);let a=(0,rn.default)(nt,t),l=no.format(o.from+1),p=no.format(Math.min(o.to,s)),m=no.format(s);return(0,le.jsxs)("div",{className:a,children:[(0,le.jsx)("span",{className:`${nt}-label`,children:"Row count"}),(0,le.jsx)("span",{className:`${nt}-range`,children:l}),(0,le.jsx)("span",{children:"-"}),(0,le.jsx)("span",{className:`${nt}-range`,children:p}),(0,le.jsx)("span",{children:"of"}),(0,le.jsx)("span",{className:`${nt}-size`,children:m})]})};var L=require("@salt-ds/core");var sn=require("@vuu-ui/vuu-table"),I=require("@vuu-ui/vuu-utils"),ne=require("react"),Cr=(t,e)=>{let o=[];for(let{name:n}of t){let s=e.find(r=>r.name===n);s&&o.push(s)}return o},vr=(t,e)=>t.map(({name:o,serverDataType:n})=>{let s=e.find(r=>r.name===o);return{hidden:s==null?void 0:s.hidden,isCalculated:(0,I.isCalculatedColumn)(o),label:s==null?void 0:s.label,name:o,serverDataType:n,subscribed:s!==void 0}}),ro=({availableColumns:t,onConfigChange:e,onDataSourceConfigChange:o,tableConfig:n})=>{let[{availableColumns:s,tableConfig:r},a]=(0,ne.useState)({availableColumns:t,tableConfig:n}),l=(0,ne.useMemo)(()=>vr(s,r.columns),[s,r.columns]),p=(0,ne.useCallback)((c,C)=>{a(v=>{let x=(0,I.moveItem)(v.availableColumns,c,C),h=Cr(x,r.columns);return{availableColumns:x,tableConfig:{...v.tableConfig,columns:h}}})},[r.columns]),m=(0,ne.useCallback)((c,C,v)=>{let x=l.find(h=>h.name===c);if(C==="subscribed")if(x!=null&&x.subscribed){let h=r.columns.filter(w=>w.name!==c).map(w=>w.name);a(w=>({...w,tableConfig:{...r,columns:r.columns.filter((0,I.subscribedOnly)(h))}})),o({columns:h})}else{let h={...r,columns:(0,I.addColumnToSubscribedColumns)(r.columns,s,c)};a(D=>({...D,tableConfig:h}));let w=h.columns.map(D=>D.name);o({columns:w})}else if(x!=null&&x.subscribed){let h=r.columns.find(w=>w.name===c);if(h){let w=(0,sn.updateTableConfig)(r,{type:"column-prop",property:C,column:h,value:v});a(D=>({...D,tableConfig:w}))}}},[s,l,o,r]),d=(0,ne.useCallback)(c=>{let C=(0,I.queryClosest)(c.target,"button");if(C){let v=parseInt(C.value),x=v===0?void 0:v===1?"capitalize":"uppercase";a(h=>({...h,tableConfig:{...h.tableConfig,columnFormatHeader:x}}))}},[]),g=(0,ne.useCallback)(c=>{let C=(0,I.queryClosest)(c.target,"button"),{ariaPressed:v,value:x}=C;console.log({ariaPressed:v,value:x,button:C}),a(h=>({...h,tableConfig:{...h.tableConfig,[x]:v!=="true"}}))},[]),u=(0,ne.useCallback)((c,C)=>{let v=parseInt(C);isNaN(v)||a(x=>({...x,tableConfig:{...x.tableConfig,columnDefaultWidth:v}})),console.log({value:C})},[]);(0,I.useLayoutEffectSkipFirst)(()=>{e==null||e(r)},[e,r]);let i=r.columnFormatHeader===void 0?0:r.columnFormatHeader==="capitalize"?1:2;return{columnItems:l,columnLabelsValue:i,onChangeColumnLabels:d,onChangeTableAttribute:g,onColumnChange:m,onCommitColumnWidth:u,onMoveListItem:p,tableConfig:r}};var Se=require("@vuu-ui/vuu-ui-controls"),an=require("@vuu-ui/vuu-ui-controls");var E=require("react/jsx-runtime"),Tt="vuuTableSettingsPanel",xr=({allowColumnLabelCase:t=!0,allowColumnDefaultWidth:e=!0,allowGridRowStyling:o=!0,availableColumns:n,onAddCalculatedColumn:s,onConfigChange:r,onDataSourceConfigChange:a,onNavigateToColumn:l,tableConfig:p})=>{var x,h,w;let{columnItems:m,columnLabelsValue:d,onChangeColumnLabels:g,onChangeTableAttribute:u,onColumnChange:i,onCommitColumnWidth:c,onMoveListItem:C,tableConfig:v}=ro({availableColumns:n,onConfigChange:r,onDataSourceConfigChange:a,tableConfig:p});return(0,E.jsxs)("div",{className:Tt,children:[t||e||o?(0,E.jsx)("div",{className:`${Tt}-header`,children:(0,E.jsx)("span",{children:"Column Settings"})}):null,e?(0,E.jsxs)(L.FormField,{children:[(0,E.jsx)(L.FormFieldLabel,{children:"Column Width"}),(0,E.jsx)(an.VuuInput,{className:"vuuInput","data-embedded":!0,onCommit:c})]}):null,t?(0,E.jsxs)(L.FormField,{children:[(0,E.jsx)(L.FormFieldLabel,{children:"Column Labels"}),(0,E.jsxs)(L.ToggleButtonGroup,{className:"vuuToggleButtonGroup",onChange:g,value:d,children:[(0,E.jsx)(L.ToggleButton,{className:"vuuIconToggleButton",value:0,children:(0,E.jsx)(Se.Icon,{name:"text-strikethrough",size:48})}),(0,E.jsx)(L.ToggleButton,{className:"vuuIconToggleButton",value:1,children:(0,E.jsx)(Se.Icon,{name:"text-Tt",size:48})}),(0,E.jsx)(L.ToggleButton,{className:"vuuIconToggleButton",value:2,children:(0,E.jsx)(Se.Icon,{name:"text-T",size:48})})]})]}):null,o?(0,E.jsxs)(L.FormField,{children:[(0,E.jsx)(L.FormFieldLabel,{children:"Grid separators"}),(0,E.jsxs)("div",{className:"saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal",children:[(0,E.jsx)(L.ToggleButton,{selected:(x=v.zebraStripes)!=null?x:!1,onChange:u,value:"zebraStripes",children:(0,E.jsx)(Se.Icon,{name:"row-striping",size:16})}),(0,E.jsx)(L.ToggleButton,{selected:(h=v.rowSeparators)!=null?h:!1,onChange:u,value:"rowSeparators",children:(0,E.jsx)(Se.Icon,{name:"row-lines",size:16})}),(0,E.jsx)(L.ToggleButton,{selected:(w=v.columnSeparators)!=null?w:!1,onChange:u,value:"columnSeparators",children:(0,E.jsx)(Se.Icon,{name:"col-lines",size:16})})]})]}):null,(0,E.jsx)(Rt,{columnItems:m,onChange:i,onMoveListItem:C,onNavigateToColumn:l}),(0,E.jsxs)("div",{className:`${Tt}-calculatedButtonbar`,children:[(0,E.jsx)(L.Button,{"data-icon":"plus",onClick:s}),(0,E.jsx)("span",{className:`${Tt}-calculatedLabel`,children:"Add calculated column"})]})]})};
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  BackgroundCell: () => BackgroundCell,
+  BackgroundCellConfigurationEditor: () => BackgroundCellConfigurationEditor,
+  BaseNumericFormattingSettings: () => BaseNumericFormattingSettings,
+  CaseValidator: () => CaseValidator,
+  ColumnExpressionInput: () => ColumnExpressionInput,
+  ColumnExpressionPanel: () => ColumnExpressionPanel,
+  ColumnFormattingPanel: () => ColumnFormattingPanel,
+  ColumnList: () => ColumnList,
+  ColumnNamedTerms: () => ColumnNamedTerms,
+  ColumnSettingsPanel: () => ColumnSettingsPanel,
+  DataSourceStats: () => DataSourceStats,
+  DateTimeFormattingSettings: () => DateTimeFormattingSettings,
+  DropdownCell: () => DropdownCell,
+  LookupCell: () => LookupCell,
+  PatternValidator: () => PatternValidator,
+  PctProgressCell: () => PctProgressCell,
+  TableSettingsPanel: () => TableSettingsPanel,
+  columnExpressionLanguageSupport: () => columnExpressionLanguageSupport,
+  isCompleteExpression: () => isCompleteExpression,
+  isCompleteRelationalExpression: () => isCompleteRelationalExpression,
+  lastNamedChild: () => lastNamedChild,
+  useColumnExpressionEditor: () => useColumnExpressionEditor,
+  useColumnExpressionSuggestionProvider: () => useColumnExpressionSuggestionProvider,
+  useTableSettings: () => useTableSettings,
+  walkTree: () => walkTree
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/cell-edit-validators/CaseValidator.ts
+var import_vuu_utils = require("@vuu-ui/vuu-utils");
+var isString = (value) => typeof value === "string";
+var CaseValidator = (rule, value) => {
+  if (isString(value)) {
+    if (value === "") {
+      return true;
+    } else if (rule.value === "lower" && value.toLowerCase() !== value) {
+      return "value must be all lowercase";
+    } else if (rule.value === "upper" && value.toUpperCase() !== value) {
+      return "value must be all uppercase";
+    } else {
+      return true;
+    }
+  } else {
+    return "value must be a string";
+  }
+};
+(0, import_vuu_utils.registerComponent)("vuu-case", CaseValidator, "data-edit-validator", {});
+
+// src/cell-edit-validators/PatternValidator.ts
+var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
+var isString2 = (value) => typeof value === "string";
+var defaultMessage = "value does not match expected pattern";
+var PatternValidator = (rule, value) => {
+  if (typeof rule.value !== "string") {
+    throw Error("Pattern validation rule must provide pattern");
+  }
+  if (isString2(value)) {
+    if (value === "") {
+      return true;
+    } else {
+      const { message = defaultMessage } = rule;
+      const pattern = new RegExp(rule.value);
+      return pattern.test(value) || message;
+    }
+  } else {
+    return "value must be a string";
+  }
+};
+(0, import_vuu_utils2.registerComponent)("vuu-pattern", PatternValidator, "data-edit-validator", {});
+
+// src/cell-renderers/background-cell/BackgroundCell.tsx
+var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
+var import_clsx = __toESM(require("clsx"), 1);
+var import_react2 = require("react");
+
+// src/cell-renderers/background-cell/useDirection.ts
+var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
+var import_react = require("react");
+var INITIAL_VALUE = [void 0, void 0, void 0, void 0];
+function useDirection(key, value, column) {
+  var _a;
+  const ref = (0, import_react.useRef)();
+  const [prevKey, prevValue, prevColumn, prevDirection] = ref.current || INITIAL_VALUE;
+  const { type: dataType } = column;
+  const decimals = (0, import_vuu_utils3.isTypeDescriptor)(dataType) ? (_a = dataType.formatting) == null ? void 0 : _a.decimals : void 0;
+  const direction = key === prevKey && (0, import_vuu_utils3.isValidNumber)(value) && (0, import_vuu_utils3.isValidNumber)(prevValue) && column === prevColumn ? (0, import_vuu_utils3.getMovingValueDirection)(value, prevDirection, prevValue, decimals) : "";
+  (0, import_react.useEffect)(() => {
+    ref.current = [key, value, column, direction];
+  });
+  return direction;
+}
+
+// src/cell-renderers/background-cell/BackgroundCell.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var CHAR_ARROW_UP = String.fromCharCode(11014);
+var CHAR_ARROW_DOWN = String.fromCharCode(11015);
+var { KEY } = import_vuu_utils4.metadataKeys;
+var classBase = "vuuBackgroundCell";
+var FlashStyle = {
+  ArrowOnly: "arrow",
+  BackgroundOnly: "bg-only",
+  ArrowBackground: "arrow-bg"
+};
+var getFlashStyle = (colType) => {
+  if ((0, import_vuu_utils4.isTypeDescriptor)(colType) && colType.renderer) {
+    if ("flashStyle" in colType.renderer) {
+      return colType.renderer["flashStyle"];
+    }
+  }
+  return FlashStyle.BackgroundOnly;
+};
+var BackgroundCell = (0, import_react2.memo)(
+  function BackgroundCell2({
+    column,
+    columnMap,
+    row
+  }) {
+    const { name: name2, type, valueFormatter } = column;
+    const dataIdx = columnMap[name2];
+    const value = row[dataIdx];
+    const flashStyle = getFlashStyle(type);
+    const direction = useDirection(row[KEY], value, column);
+    const arrow = flashStyle === FlashStyle.ArrowOnly || flashStyle === FlashStyle.ArrowBackground ? direction === import_vuu_utils4.UP1 || direction === import_vuu_utils4.UP2 ? CHAR_ARROW_UP : direction === import_vuu_utils4.DOWN1 || direction === import_vuu_utils4.DOWN2 ? CHAR_ARROW_DOWN : null : null;
+    const dirClass = direction ? ` ` + direction : "";
+    const className = (0, import_clsx.default)(classBase, dirClass, {
+      [`${classBase}-backgroundOnly`]: flashStyle === FlashStyle.BackgroundOnly,
+      [`${classBase}-arrowOnly`]: flashStyle === FlashStyle.ArrowOnly,
+      [`${classBase}-arrowBackground`]: flashStyle === FlashStyle.ArrowBackground
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, tabIndex: -1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${classBase}-arrow`, children: arrow }),
+      valueFormatter(row[dataIdx])
+    ] });
+  },
+  import_vuu_utils4.dataAndColumnUnchanged
+);
+(0, import_vuu_utils4.registerComponent)(
+  "vuu.price-move-background",
+  BackgroundCell,
+  "cell-renderer",
+  {
+    description: "Change background color of cell when value changes",
+    configEditor: "BackgroundCellConfigurationEditor",
+    label: "Background Flash",
+    serverDataType: ["long", "int", "double"]
+  }
+);
+
+// src/cell-renderers/background-cell/BackgroundCellConfigurationEditor.tsx
+var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
+var import_core = require("@salt-ds/core");
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var classBase2 = "vuuBackgroundCellConfiguration";
+var flashOptions = [
+  { label: "Background Only", value: "bg-only" },
+  { label: "Background and Arrow", value: "arrow-bg" },
+  { label: "Arrow Only", value: "arrow" }
+];
+var [defaultFlashOption] = flashOptions;
+var valueFromColumn = (column) => {
+  const { flashStyle } = column.type.renderer;
+  return flashOptions.find((o) => o.value === flashStyle) || defaultFlashOption;
+};
+var BackgroundCellConfigurationEditor = ({
+  column,
+  onChangeRendering
+}) => {
+  const [flashStyle, setFlashStyle] = (0, import_react3.useState)(
+    valueFromColumn(column)
+  );
+  const handleSelectionChange = (0, import_react3.useCallback)(
+    (_, flashOption) => {
+      var _a;
+      setFlashStyle(flashOption);
+      const renderProps = column.type.renderer;
+      onChangeRendering({
+        ...renderProps,
+        flashStyle: (_a = flashOption == null ? void 0 : flashOption.value) != null ? _a : defaultFlashOption.value
+      });
+    },
+    [column.type, onChangeRendering]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core.FormField, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core.FormFieldLabel, { children: "Flash Style" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_vuu_ui_controls.Dropdown,
+      {
+        className: `${classBase2}-flashStyle`,
+        onSelectionChange: handleSelectionChange,
+        selected: flashStyle,
+        source: flashOptions,
+        width: "100%"
+      }
+    )
+  ] });
+};
+(0, import_vuu_utils5.registerConfigurationEditor)(
+  "BackgroundCellConfigurationEditor",
+  BackgroundCellConfigurationEditor
+);
+
+// src/cell-renderers/dropdown-cell/DropdownCell.tsx
+var import_vuu_data_react = require("@vuu-ui/vuu-data-react");
+var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var classBase3 = "vuuTableDropdownCell";
+var openKeys = ["Enter", " "];
+var DropdownCell = (0, import_react4.memo)(
+  function DropdownCell2({
+    column,
+    columnMap,
+    onCommit = import_vuu_ui_controls2.WarnCommit,
+    row
+  }) {
+    const dataIdx = columnMap[column.name];
+    const dataValue = row[dataIdx];
+    const { values } = (0, import_vuu_data_react.useLookupValues)(column, dataValue);
+    const valueRef = (0, import_react4.useRef)(null);
+    (0, import_react4.useMemo)(() => {
+      valueRef.current = (0, import_vuu_data_react.getSelectedOption)(values, dataValue);
+    }, [dataValue, values]);
+    const handleSelectionChange = (0, import_react4.useCallback)(
+      (evt, selectedOption) => {
+        if (selectedOption) {
+          onCommit(selectedOption.value).then((response) => {
+            if (response === true && evt) {
+              (0, import_vuu_utils6.dispatchCustomEvent)(evt.target, "vuu-commit");
+            }
+          });
+        }
+      },
+      [onCommit]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_vuu_ui_controls2.Dropdown,
+      {
+        className: classBase3,
+        onSelectionChange: handleSelectionChange,
+        openKeys,
+        selected: valueRef.current,
+        source: values,
+        width: column.width - 17
+      }
+    );
+  },
+  import_vuu_utils6.dataColumnAndKeyUnchanged
+);
+(0, import_vuu_utils6.registerComponent)("dropdown-cell", DropdownCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+// src/cell-renderers/lookup-cell/LookupCell.tsx
+var import_vuu_data_react2 = require("@vuu-ui/vuu-data-react");
+var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
+var import_react5 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var LookupCell = (0, import_react5.memo)(
+  function LookupCell2({
+    column,
+    columnMap,
+    row
+  }) {
+    const dataIdx = columnMap[column.name];
+    const dataValue = row[dataIdx];
+    const { initialValue: value } = (0, import_vuu_data_react2.useLookupValues)(column, dataValue);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: value == null ? void 0 : value.label });
+  },
+  import_vuu_utils7.dataAndColumnUnchanged
+);
+(0, import_vuu_utils7.registerComponent)("lookup-cell", LookupCell, "cell-renderer", {
+  userCanAssign: false
+});
+
+// src/cell-renderers/pct-progress-cell/PctProgressCell.tsx
+var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
+var import_clsx2 = __toESM(require("clsx"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var classBase4 = "vuuPctProgressCell";
+var getPercentageValue = (value) => {
+  if (value >= 0 && value <= 1) {
+    return value * 100;
+  } else if (value > 2) {
+    return 0;
+  } else if (value > 1) {
+    return 100;
+  } else {
+    return 0;
+  }
+};
+var PctProgressCell = ({ column, columnMap, row }) => {
+  const value = row[columnMap[column.name]];
+  const percentageValue = getPercentageValue(value);
+  const className = (0, import_clsx2.default)(classBase4, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx2.default)(className, {
+        [`${classBase4}-zero`]: percentageValue === 0,
+        [`${classBase4}-complete`]: percentageValue >= 100
+      }),
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            className: `${classBase4}-progressBar`,
+            style: { "--progress-bar-pct": `${percentageValue}%` }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${classBase4}-text`, children: `${percentageValue.toFixed(
+          2
+        )} %` })
+      ]
+    }
+  );
+};
+(0, import_vuu_utils8.registerComponent)("vuu.pct-progress", PctProgressCell, "cell-renderer", {
+  description: "Percentage formatter",
+  label: "Percentage formatter",
+  serverDataType: "double"
+});
+
+// src/cell-renderers/progress-cell/ProgressCell.tsx
+var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var classBase5 = "vuuProgressCell";
+var ProgressCell = ({ column, columnMap, row }) => {
+  const { name: name2, type } = column;
+  const value = row[columnMap[name2]];
+  let showProgress = false;
+  let percentage = 0;
+  if ((0, import_vuu_utils9.isTypeDescriptor)(type) && (0, import_vuu_utils9.isColumnTypeRenderer)(type.renderer)) {
+    const { associatedField } = type.renderer;
+    if (associatedField) {
+      const associatedValue = row[columnMap[associatedField]];
+      if ((0, import_vuu_utils9.isValidNumber)(value) && (0, import_vuu_utils9.isValidNumber)(associatedValue)) {
+        percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+        percentage = Math.min(Math.round(value / associatedValue * 100), 100);
+        showProgress = isFinite(percentage);
+      } else {
+        const floatValue = parseFloat(value);
+        if (Number.isFinite(floatValue)) {
+          const floatOtherValue = parseFloat(associatedValue);
+          if (Number.isFinite(floatOtherValue)) {
+            percentage = Math.min(
+              Math.round(floatValue / floatOtherValue * 100),
+              100
+            );
+            showProgress = isFinite(percentage);
+          }
+        }
+      }
+    } else {
+      throw Error("ProgressCell associatedField is required to render");
+    }
+  }
+  const className = (0, import_clsx3.default)(classBase5, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className, tabIndex: -1, children: [
+    showProgress ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: `${classBase5}-track`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${classBase5}-bg` }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "span",
+        {
+          className: `${classBase5}-bar`,
+          style: { "--progress-bar-pct": `-${100 - percentage}%` }
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${classBase5}-text`, children: `${percentage} %` })
+  ] });
+};
+(0, import_vuu_utils9.registerComponent)("vuu.progress", ProgressCell, "cell-renderer", {
+  description: "Progress formatter",
+  label: "Progress formatter",
+  serverDataType: ["long", "int", "double"],
+  // Not until we provide settings for associaetd field
+  userCanAssign: false
+});
+
+// src/column-list/ColumnList.tsx
+var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
+var import_core2 = require("@salt-ds/core");
+var import_clsx4 = __toESM(require("clsx"), 1);
+var import_react6 = require("react");
+var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var classBase6 = "vuuColumnList";
+var classBaseListItem = "vuuColumnListItem";
+var ColumnListItem = ({
+  className: classNameProp,
+  item,
+  ...listItemProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_vuu_ui_controls3.ListItem,
+    {
+      ...listItemProps,
+      className: (0, import_clsx4.default)(classNameProp, classBaseListItem),
+      "data-name": item == null ? void 0 : item.name,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_vuu_ui_controls3.Icon, { name: "draggable", size: 16 }),
+        (item == null ? void 0 : item.isCalculated) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_vuu_ui_controls3.Icon, { name: "function" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_core2.Checkbox,
+          {
+            className: `${classBase6}-checkBox`,
+            checked: item == null ? void 0 : item.subscribed
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `${classBase6}-text`, children: (0, import_vuu_utils10.getColumnLabel)(item) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_core2.Switch,
+          {
+            className: `${classBase6}-switch`,
+            checked: (item == null ? void 0 : item.hidden) !== true,
+            disabled: (item == null ? void 0 : item.subscribed) !== true
+          }
+        )
+      ]
+    }
+  );
+};
+var ColumnList = ({
+  columnItems,
+  onChange,
+  onMoveListItem,
+  onNavigateToColumn,
+  ...htmlAttributes
+}) => {
+  const handleChange = (0, import_react6.useCallback)(
+    ({ target }) => {
+      const input = target;
+      const listItem = (0, import_vuu_utils10.queryClosest)(target, `.${classBaseListItem}`);
+      if (listItem) {
+        const {
+          dataset: { name: name2 }
+        } = listItem;
+        if (name2) {
+          const saltCheckbox = (0, import_vuu_utils10.queryClosest)(target, `.${classBase6}-checkBox`);
+          const saltSwitch = (0, import_vuu_utils10.queryClosest)(target, `.${classBase6}-switch`);
+          if (saltCheckbox) {
+            onChange(name2, "subscribed", input.checked);
+          } else if (saltSwitch) {
+            onChange(name2, "hidden", input.checked === false);
+          }
+        }
+      }
+    },
+    [onChange]
+  );
+  const handleClick = (0, import_react6.useCallback)((evt) => {
+    const targetEl = evt.target;
+    if (targetEl.classList.contains("vuuColumnList-text")) {
+      const listItemEl = targetEl.closest(".vuuListItem");
+      if (listItemEl == null ? void 0 : listItemEl.dataset.name) {
+        onNavigateToColumn == null ? void 0 : onNavigateToColumn(listItemEl.dataset.name);
+      }
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ...htmlAttributes, className: classBase6, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase6}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Column Selection" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `${classBase6}-colHeadings`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Column subscription" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Visibility" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_vuu_ui_controls3.List,
+      {
+        ListItem: ColumnListItem,
+        allowDragDrop: true,
+        height: "auto",
+        onChange: handleChange,
+        onClick: handleClick,
+        onMoveListItem,
+        selectionStrategy: "none",
+        source: columnItems,
+        itemHeight: 33
+      }
+    )
+  ] });
+};
+
+// src/column-settings/ColumnSettingsPanel.tsx
+var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
+var import_core8 = require("@salt-ds/core");
+var import_clsx7 = __toESM(require("clsx"), 1);
+
+// src/column-expression-panel/ColumnExpressionPanel.tsx
+var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
+var import_core3 = require("@salt-ds/core");
+var import_react12 = require("react");
+
+// src/column-expression-input/ColumnExpressionInput.tsx
+var import_react9 = require("react");
+
+// src/column-expression-input/useColumnExpressionEditor.ts
+var import_vuu_codemirror5 = require("@vuu-ui/vuu-codemirror");
+var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
+var import_react8 = require("react");
+
+// src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
+var import_vuu_codemirror = require("@vuu-ui/vuu-codemirror");
+
+// src/column-expression-input/column-language-parser/generated/column-parser.js
+var import_lr = require("@lezer/lr");
+var parser = import_lr.LRParser.deserialize({
+  version: 14,
+  states: "&xOVQPOOO!fQPO'#C^OVQPO'#CcQ!pQPOOO#bQPO'#CkO#gQPO'#CrOOQO'#Cy'#CyO#lQPO,58}OVQPO,59QOVQPO,59QOOQO'#Cn'#CnOVQPO,59XOVQPO,59VOVQPO'#CtOOQO,59^,59^OOQO1G.i1G.iOOQO1G.l1G.lO$bQPO1G.lO%ZQPO1G.sO!pQPO'#CmO%qQQO1G.qO%|QQO'#C{OOQO'#C{'#C{O&wQPO,59`OVQPO,59ZOVQPO,59[OVQPO7+$]OVQPO'#CuO'RQPO1G.zOOQO1G.z1G.zO'ZQQO'#C^O'eQQO1G.sO'{QQO1G.uOOQO1G.v1G.vO(WQPO<<GwO(_QPO,59aOOQO-E6s-E6sOOQO7+$f7+$fOVQPOAN=cO(iQQO1G.lO(yQPOG22}OOQOLD(iLD(iO)QQPO,59QO)QQPO,59QO)QQPO,59X",
+  stateData: ")n~OlOS~ORUOSUOTUOUUOWQO`SOnPO~OWgXZQX[QX]QX^QXpQXqQXrQXsQXtQXuQXeQX~OjQXXQX~PnOZWO[WO]XO^XOpYOqYOrYOsYOtYOuYO~OW[O~OW]O~OX_O~P!pO]Yi^YipYiqYirYisYitYiuYieYi~OZWO[WOjYiXYi~P#sOpaiqairaisaitaiuaieai~OZWO[WO]XO^XOjaiXai~P$rOejOvhOwiO~OZmX[mX]mX^mXeoXpmXqmXrmXsmXtmXumXvoXwoX~OXmOekO~P!pOXuOekO~OvQXwQX~PnOZzO[zO]{O^{Ovaiwai~P$rOwiOecivci~OevO~P!pOXiaeia~P!pOZzO[zOvYiwYi~P#sOXyO~P!pORUOSUOTUOUUOWQO`SOnnO~O`UTn~",
+  goto: "$epPPqPPPPqPPqPPPPqP!S!g!r!rPq!w#Y#]PPP#cP$[oUOQWXZ[]hijkvz{|hUOQWXZ]jkvz{|Ve[hi[ZRVgrsxR|cVf[hioTOQWXZ[]hijkvz{|R^TQlgRtlQROQVQS`WzQaXQbZUc[hiQg]Qo|QrjQskQw{RxvQd[QphRqi",
+  nodeNames: "\u26A0 ColumnDefinitionExpression Column Number String True False ParenthesizedExpression OpenBrace CloseBrace ArithmeticExpression Divide Times Plus Minus ConditionalExpression If RelationalExpression RelationalOperator AndCondition OrCondition Comma CallExpression Function ArgList",
+  maxTerm: 39,
+  skippedNodes: [0],
+  repeatNodeCount: 1,
+  tokenData: ".^~RnXY#PYZ#P]^#Ppq#Pqr#brs#mxy$eyz$jz{$o{|$t|}$y}!O%O!O!P%T!P!Q%c!Q![%h!^!_%s!_!`&Q!`!a&V!c!}&d#R#S&d#T#U&u#U#Y&d#Y#Z(Y#Z#]&d#]#^*j#^#c&d#c#d+f#d#h&d#h#i,b#i#o&d~#USl~XY#PYZ#P]^#Ppq#P~#eP!_!`#h~#mOu~~#pWOX#mZ]#m^r#mrs$Ys#O#m#P;'S#m;'S;=`$_<%lO#m~$_OS~~$bP;=`<%l#m~$jOW~~$oOX~~$tO[~~$yO]~~%OOe~~%TO^~~%WP!Q![%Z~%`PR~!Q![%Z~%hOZ~~%mQR~!O!P%Z!Q![%h~%xPr~!_!`%{~&QOt~~&VOp~~&[Pq~!_!`&_~&dOs~P&iSnP!Q![&d!c!}&d#R#S&d#T#o&dR&zUnP!Q![&d!c!}&d#R#S&d#T#b&d#b#c'^#c#o&dR'cUnP!Q![&d!c!}&d#R#S&d#T#W&d#W#X'u#X#o&dR'|SvQnP!Q![&d!c!}&d#R#S&d#T#o&d~(_TnP!Q![&d!c!}&d#R#S&d#T#U(n#U#o&d~(sUnP!Q![&d!c!}&d#R#S&d#T#`&d#`#a)V#a#o&d~)[UnP!Q![&d!c!}&d#R#S&d#T#g&d#g#h)n#h#o&d~)sUnP!Q![&d!c!}&d#R#S&d#T#X&d#X#Y*V#Y#o&d~*^SU~nP!Q![&d!c!}&d#R#S&d#T#o&d~*oUnP!Q![&d!c!}&d#R#S&d#T#Y&d#Y#Z+R#Z#o&d~+YS`~nP!Q![&d!c!}&d#R#S&d#T#o&dR+kUnP!Q![&d!c!}&d#R#S&d#T#f&d#f#g+}#g#o&dR,USwQnP!Q![&d!c!}&d#R#S&d#T#o&d~,gUnP!Q![&d!c!}&d#R#S&d#T#f&d#f#g,y#g#o&d~-OUnP!Q![&d!c!}&d#R#S&d#T#i&d#i#j-b#j#o&d~-gUnP!Q![&d!c!}&d#R#S&d#T#X&d#X#Y-y#Y#o&d~.QST~nP!Q![&d!c!}&d#R#S&d#T#o&d",
+  tokenizers: [0, 1],
+  topRules: { "ColumnDefinitionExpression": [0, 1] },
+  tokenPrec: 393
+});
+
+// src/column-expression-input/column-language-parser/ColumnExpressionLanguage.ts
+var columnExpressionLanguage = import_vuu_codemirror.LRLanguage.define({
+  name: "VuuColumnExpression",
+  parser: parser.configure({
+    props: [
+      (0, import_vuu_codemirror.styleTags)({
+        Column: import_vuu_codemirror.tags.attributeValue,
+        Function: import_vuu_codemirror.tags.variableName,
+        String: import_vuu_codemirror.tags.string,
+        Or: import_vuu_codemirror.tags.emphasis,
+        Operator: import_vuu_codemirror.tags.operator
+      })
+    ]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  })
+});
+var columnExpressionLanguageSupport = () => {
+  return new import_vuu_codemirror.LanguageSupport(
+    columnExpressionLanguage
+    /*, [exampleCompletion]*/
+  );
+};
+
+// src/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.ts
+var LiteralExpressionImpl = class {
+  constructor(value) {
+    this.value = value;
+    switch (typeof value) {
+      case "boolean":
+        this.type = "booleanLiteralExpression";
+        break;
+      case "number":
+        this.type = "numericLiteralExpression";
+        break;
+      default:
+        this.type = "stringLiteralExpression";
+    }
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      value: this.value
+    };
+  }
+};
+var ColumnExpressionImpl = class {
+  constructor(columnName) {
+    this.type = "colExpression";
+    this.column = columnName;
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      column: this.column
+    };
+  }
+};
+var _expressions, _op;
+var ArithmeticExpressionImpl = class {
+  constructor(op = "unknown") {
+    __privateAdd(this, _expressions, [
+      { type: "unknown" },
+      { type: "unknown" }
+    ]);
+    __privateAdd(this, _op, void 0);
+    this.type = "arithmeticExpression";
+    __privateSet(this, _op, op);
+  }
+  get op() {
+    return __privateGet(this, _op);
+  }
+  set op(op) {
+    __privateSet(this, _op, op);
+  }
+  get expressions() {
+    return __privateGet(this, _expressions);
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      op: __privateGet(this, _op),
+      expressions: __privateGet(this, _expressions)
+    };
+  }
+};
+_expressions = new WeakMap();
+_op = new WeakMap();
+var _expressions2;
+var CallExpressionImpl = class {
+  constructor(functionName) {
+    __privateAdd(this, _expressions2, []);
+    this.type = "callExpression";
+    this.functionName = functionName;
+  }
+  get expressions() {
+    return __privateGet(this, _expressions2);
+  }
+  get arguments() {
+    return __privateGet(this, _expressions2);
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      functionName: this.functionName,
+      arguments: __privateGet(this, _expressions2).map((e) => {
+        var _a;
+        return (_a = e.toJSON) == null ? void 0 : _a.call(e);
+      })
+    };
+  }
+};
+_expressions2 = new WeakMap();
+var _expressions3, _op2;
+var RelationalExpressionImpl = class {
+  constructor() {
+    __privateAdd(this, _expressions3, [
+      { type: "unknown" },
+      { type: "unknown" }
+    ]);
+    __privateAdd(this, _op2, "unknown");
+    this.type = "relationalExpression";
+  }
+  get op() {
+    return __privateGet(this, _op2);
+  }
+  set op(op) {
+    __privateSet(this, _op2, op);
+  }
+  get expressions() {
+    return __privateGet(this, _expressions3);
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      op: __privateGet(this, _op2),
+      expressions: __privateGet(this, _expressions3)
+    };
+  }
+};
+_expressions3 = new WeakMap();
+_op2 = new WeakMap();
+var _expressions4, _op3;
+var BooleanConditionImp = class {
+  constructor(booleanOperator) {
+    __privateAdd(this, _expressions4, [
+      { type: "unknown" },
+      { type: "unknown" }
+    ]);
+    __privateAdd(this, _op3, void 0);
+    this.type = "booleanCondition";
+    __privateSet(this, _op3, booleanOperator);
+  }
+  get op() {
+    return __privateGet(this, _op3);
+  }
+  get expressions() {
+    return __privateGet(this, _expressions4);
+  }
+  toJSON() {
+    return {
+      type: this.type,
+      op: __privateGet(this, _op3),
+      expressions: __privateGet(this, _expressions4).map((e) => {
+        var _a;
+        return (_a = e.toJSON) == null ? void 0 : _a.call(e);
+      })
+    };
+  }
+};
+_expressions4 = new WeakMap();
+_op3 = new WeakMap();
+var _expressions5;
+var ConditionalExpressionImpl = class {
+  constructor(booleanOperator) {
+    __privateAdd(this, _expressions5, void 0);
+    this.type = "conditionalExpression";
+    __privateSet(this, _expressions5, [
+      booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl(),
+      { type: "unknown" },
+      { type: "unknown" }
+    ]);
+  }
+  get expressions() {
+    return __privateGet(this, _expressions5);
+  }
+  get condition() {
+    return __privateGet(this, _expressions5)[0];
+  }
+  get truthyExpression() {
+    return __privateGet(this, _expressions5)[1];
+  }
+  set truthyExpression(expression) {
+    __privateGet(this, _expressions5)[1] = expression;
+  }
+  get falsyExpression() {
+    return __privateGet(this, _expressions5)[2];
+  }
+  set falsyExpression(expression) {
+    __privateGet(this, _expressions5)[2] = expression;
+  }
+  toJSON() {
+    var _a, _b, _c, _d, _e;
+    return {
+      type: this.type,
+      condition: (_b = (_a = this.condition).toJSON) == null ? void 0 : _b.call(_a),
+      truthyExpression: this.truthyExpression,
+      falsyExpression: (_e = (_d = (_c = this.falsyExpression) == null ? void 0 : _c.toJSON) == null ? void 0 : _d.call(_c)) != null ? _e : this.falsyExpression
+    };
+  }
+};
+_expressions5 = new WeakMap();
+var isUnknown = (e) => e.type === "unknown";
+var isArithmeticExpression = (expression) => expression.type === "arithmeticExpression";
+var isCallExpression = (expression) => expression.type === "callExpression";
+var isConditionalExpression = (expression) => expression.type === "conditionalExpression";
+var isCondition = (expression) => expression.type === "relationalExpression" || expression.type === "booleanCondition";
+var isBooleanCondition = (expression) => expression.type === "booleanCondition";
+var isRelationalExpression = (expression) => (expression == null ? void 0 : expression.type) === "relationalExpression";
+var firstIncompleteExpression = (expression) => {
+  if (isUnknown(expression)) {
+    return expression;
+  } else if (isRelationalExpression(expression)) {
+    const [operand1, operand2] = expression.expressions;
+    if (expressionIsIncomplete(operand1)) {
+      return firstIncompleteExpression(operand1);
+    } else if (expression.op === "unknown") {
+      return expression;
+    } else if (expressionIsIncomplete(operand2)) {
+      return firstIncompleteExpression(operand2);
+    }
+  } else if (isCondition(expression)) {
+    const { expressions = [] } = expression;
+    for (const e of expressions) {
+      if (expressionIsIncomplete(e)) {
+        return firstIncompleteExpression(e);
+      }
+    }
+  } else if (isConditionalExpression(expression)) {
+    const { condition, truthyExpression, falsyExpression } = expression;
+    if (expressionIsIncomplete(condition)) {
+      return firstIncompleteExpression(condition);
+    } else if (expressionIsIncomplete(truthyExpression)) {
+      return firstIncompleteExpression(truthyExpression);
+    } else if (expressionIsIncomplete(falsyExpression)) {
+      return firstIncompleteExpression(falsyExpression);
+    }
+  } else if (isArithmeticExpression(expression)) {
+    const { expressions = [] } = expression;
+    for (const e of expressions) {
+      if (expressionIsIncomplete(e)) {
+        return firstIncompleteExpression(e);
+      }
+    }
+  }
+};
+var replaceUnknownExpression = (incompleteExpression, unknownExpression, expression) => {
+  const { expressions = [] } = incompleteExpression;
+  if (expressions.includes(unknownExpression)) {
+    const pos = expressions.indexOf(unknownExpression);
+    expressions.splice(pos, 1, expression);
+    return true;
+  } else {
+    for (const e of expressions) {
+      if (replaceUnknownExpression(e, unknownExpression, expression)) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+var expressionIsIncomplete = (expression) => {
+  if (isUnknown(expression)) {
+    return true;
+  } else if (isConditionalExpression(expression)) {
+    return expressionIsIncomplete(expression.condition) || expressionIsIncomplete(expression.truthyExpression) || expressionIsIncomplete(expression.falsyExpression);
+  } else if (isRelationalExpression(expression) || isBooleanCondition(expression)) {
+    return expression.op === void 0 || expression.expressions.some((e) => expressionIsIncomplete(e));
+  }
+  return false;
+};
+var addExpression = (expression, subExpression) => {
+  const targetExpression = firstIncompleteExpression(expression);
+  if (targetExpression) {
+    if (targetExpression.expressions) {
+      targetExpression.expressions.push(subExpression);
+    } else {
+      console.warn("don't know how to treat targetExpression");
+    }
+  } else {
+    console.error("no target expression found");
+  }
+};
+var _expression, _callStack;
+var ColumnExpression = class {
+  constructor() {
+    __privateAdd(this, _expression, void 0);
+    __privateAdd(this, _callStack, []);
+  }
+  setCondition(booleanOperator) {
+    if (__privateGet(this, _expression) === void 0) {
+      this.addExpression(new ConditionalExpressionImpl(booleanOperator));
+    } else if (isConditionalExpression(__privateGet(this, _expression))) {
+      if (expressionIsIncomplete(__privateGet(this, _expression).condition)) {
+        const condition = booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl();
+        this.addExpression(condition);
+      } else if (isUnknown(__privateGet(this, _expression).truthyExpression)) {
+        __privateGet(this, _expression).truthyExpression = new ConditionalExpressionImpl(
+          booleanOperator
+        );
+      } else if (expressionIsIncomplete(__privateGet(this, _expression).truthyExpression)) {
+        const condition = booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl();
+        this.addExpression(condition);
+      } else if (isUnknown(__privateGet(this, _expression).falsyExpression)) {
+        __privateGet(this, _expression).falsyExpression = new ConditionalExpressionImpl(
+          booleanOperator
+        );
+      } else if (expressionIsIncomplete(__privateGet(this, _expression).falsyExpression)) {
+        const condition = booleanOperator ? new BooleanConditionImp(booleanOperator) : new RelationalExpressionImpl();
+        this.addExpression(condition);
+      }
+    } else {
+      console.error("setCondition called unexpectedly");
+    }
+  }
+  addExpression(expression) {
+    if (__privateGet(this, _callStack).length > 0) {
+      const currentCallExpression = __privateGet(this, _callStack).at(-1);
+      currentCallExpression == null ? void 0 : currentCallExpression.arguments.push(expression);
+    } else if (__privateGet(this, _expression) === void 0) {
+      __privateSet(this, _expression, expression);
+    } else if (isArithmeticExpression(__privateGet(this, _expression))) {
+      const targetExpression = firstIncompleteExpression(__privateGet(this, _expression));
+      if (targetExpression && isUnknown(targetExpression)) {
+        replaceUnknownExpression(
+          __privateGet(this, _expression),
+          targetExpression,
+          expression
+        );
+      }
+    } else if (isConditionalExpression(__privateGet(this, _expression))) {
+      if (expressionIsIncomplete(__privateGet(this, _expression))) {
+        const targetExpression = firstIncompleteExpression(__privateGet(this, _expression));
+        if (targetExpression && isUnknown(targetExpression)) {
+          replaceUnknownExpression(
+            __privateGet(this, _expression),
+            targetExpression,
+            expression
+          );
+        } else if (targetExpression) {
+          addExpression(targetExpression, expression);
+        }
+      }
+    }
+  }
+  setFunction(functionName) {
+    const callExpression = new CallExpressionImpl(functionName);
+    this.addExpression(callExpression);
+    __privateGet(this, _callStack).push(callExpression);
+  }
+  setColumn(columnName) {
+    this.addExpression(new ColumnExpressionImpl(columnName));
+  }
+  setArithmeticOp(value) {
+    const op = value;
+    const expression = __privateGet(this, _expression);
+    if (isArithmeticExpression(expression)) {
+      expression.op = op;
+    }
+  }
+  setRelationalOperator(value) {
+    const op = value;
+    if (__privateGet(this, _expression) && isConditionalExpression(__privateGet(this, _expression))) {
+      const targetExpression = firstIncompleteExpression(__privateGet(this, _expression));
+      if (isRelationalExpression(targetExpression)) {
+        targetExpression.op = op;
+      } else {
+        console.error(`no target expression found (op = ${value})`);
+      }
+    }
+  }
+  setValue(value) {
+    const literalExpression = new LiteralExpressionImpl(value);
+    if (__privateGet(this, _expression) === void 0) {
+      __privateSet(this, _expression, literalExpression);
+    } else if (isArithmeticExpression(__privateGet(this, _expression))) {
+      this.addExpression(literalExpression);
+    } else if (isCallExpression(__privateGet(this, _expression))) {
+      __privateGet(this, _expression).arguments.push(literalExpression);
+    } else if (isConditionalExpression(__privateGet(this, _expression))) {
+      if (expressionIsIncomplete(__privateGet(this, _expression))) {
+        const targetExpression = firstIncompleteExpression(__privateGet(this, _expression));
+        if (targetExpression && isUnknown(targetExpression)) {
+          replaceUnknownExpression(
+            __privateGet(this, _expression),
+            targetExpression,
+            literalExpression
+          );
+        } else if (targetExpression) {
+          addExpression(targetExpression, literalExpression);
+        }
+      } else {
+        console.log("what do we do with value, in a complete expression");
+      }
+    }
+  }
+  closeBrace() {
+    __privateGet(this, _callStack).pop();
+  }
+  get expression() {
+    return __privateGet(this, _expression);
+  }
+  toJSON() {
+    var _a;
+    return (_a = __privateGet(this, _expression)) == null ? void 0 : _a.toJSON();
+  }
+};
+_expression = new WeakMap();
+_callStack = new WeakMap();
+var walkTree = (tree, source) => {
+  const columnExpression = new ColumnExpression();
+  const cursor = tree.cursor();
+  do {
+    const { name: name2, from, to } = cursor;
+    switch (name2) {
+      case "AndCondition":
+        columnExpression.setCondition("and");
+        break;
+      case "OrCondition":
+        columnExpression.setCondition("or");
+        break;
+      case "RelationalExpression":
+        columnExpression.setCondition();
+        break;
+      case "ArithmeticExpression":
+        columnExpression.addExpression(new ArithmeticExpressionImpl());
+        break;
+      case "Column":
+        {
+          const columnName = source.substring(from, to);
+          columnExpression.setColumn(columnName);
+        }
+        break;
+      case "Function":
+        {
+          const functionName = source.substring(from, to);
+          columnExpression.setFunction(functionName);
+        }
+        break;
+      case "Times":
+      case "Divide":
+      case "Plus":
+      case "Minus":
+        {
+          const op = source.substring(from, to);
+          columnExpression.setArithmeticOp(op);
+        }
+        break;
+      case "RelationalOperator":
+        {
+          const op = source.substring(from, to);
+          columnExpression.setRelationalOperator(op);
+        }
+        break;
+      case "False":
+      case "True":
+        {
+          const value = source.substring(from, to);
+          columnExpression.setValue(value === "true" ? true : false);
+        }
+        break;
+      case "String":
+        columnExpression.setValue(source.substring(from + 1, to - 1));
+        break;
+      case "Number":
+        columnExpression.setValue(parseFloat(source.substring(from, to)));
+        break;
+      case "CloseBrace":
+        columnExpression.closeBrace();
+        break;
+      default:
+    }
+  } while (cursor.next());
+  return columnExpression.toJSON();
+};
+
+// src/column-expression-input/column-language-parser/column-expression-parse-utils.ts
+var strictParser = parser.configure({ strict: true });
+var RelationalOperands = ["Number", "String"];
+var ColumnNamedTerms = [
+  ...RelationalOperands,
+  "AndCondition",
+  "ArithmeticExpression",
+  "BooleanOperator",
+  "RelationalOperatorOperator",
+  "CallExpression",
+  "CloseBrace",
+  "Column",
+  "Comma",
+  "ConditionalExpression",
+  "Divide",
+  "Equal",
+  "If",
+  "Minus",
+  "OpenBrace",
+  "OrCondition",
+  "ParenthesizedExpression",
+  "Plus",
+  "RelationalExpression",
+  "RelationalOperator",
+  "Times"
+];
+var isCompleteExpression = (src) => {
+  try {
+    strictParser.parse(src);
+    return true;
+  } catch (err) {
+    return false;
+  }
+};
+var lastNamedChild = (node) => {
+  let { lastChild } = node;
+  while (lastChild && !ColumnNamedTerms.includes(lastChild.name)) {
+    lastChild = lastChild.prevSibling;
+    console.log(lastChild == null ? void 0 : lastChild.name);
+  }
+  return lastChild;
+};
+var isCompleteRelationalExpression = (node) => {
+  if ((node == null ? void 0 : node.name) === "RelationalExpression") {
+    const { firstChild } = node;
+    const lastChild = lastNamedChild(node);
+    if ((firstChild == null ? void 0 : firstChild.name) === "Column" && typeof (lastChild == null ? void 0 : lastChild.name) === "string" && RelationalOperands.includes(lastChild.name)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+// src/column-expression-input/highlighting.ts
+var import_vuu_codemirror2 = require("@vuu-ui/vuu-codemirror");
+var myHighlightStyle = import_vuu_codemirror2.HighlightStyle.define([
+  {
+    tag: import_vuu_codemirror2.tags.attributeValue,
+    color: "var(--vuuFilterEditor-variableColor);font-weight: bold"
+  },
+  { tag: import_vuu_codemirror2.tags.variableName, color: "var(--vuuFilterEditor-variableColor)" },
+  { tag: import_vuu_codemirror2.tags.comment, color: "green", fontStyle: "italic" }
+]);
+var vuuHighlighting = (0, import_vuu_codemirror2.syntaxHighlighting)(myHighlightStyle);
+
+// src/column-expression-input/theme.ts
+var import_vuu_codemirror3 = require("@vuu-ui/vuu-codemirror");
+var vuuTheme = import_vuu_codemirror3.EditorView.theme(
+  {
+    "&": {
+      border: "solid 1px var(--salt-container-primary-borderColor)",
+      color: "var(--vuuFilterEditor-color)",
+      backgroundColor: "var(--vuuFilterEditor-background)"
+    },
+    ".cm-content": {
+      caretColor: "var(--vuuFilterEditor-cursorColor)"
+    },
+    "&.cm-focused .cm-cursor": {
+      borderLeftColor: "var(--vuuFilterEditor-cursorColor)"
+    },
+    "&.cm-focused .cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-selectionBackground, ::selection": {
+      backgroundColor: "var(--vuuFilterEditor-selectionBackground)"
+    },
+    ".cm-scroller": {
+      fontFamily: "var(--vuuFilterEditor-fontFamily)"
+    },
+    ".cm-completionLabel": {
+      color: "var(--vuu-color-gray-50)"
+    },
+    ".cm-completionMatchedText": {
+      color: "var(--vuu-color-gray-80)",
+      fontWeight: 700,
+      textDecoration: "none"
+    },
+    ".cm-tooltip": {
+      background: "var(--vuuFilterEditor-tooltipBackground)",
+      border: "var(--vuuFilterEditor-tooltipBorder)",
+      borderRadius: "4px",
+      boxShadow: "var(--vuuFilterEditor-tooltipElevation)",
+      "&.cm-tooltip-autocomplete > ul": {
+        fontFamily: "var(--vuuFilterEditor-fontFamily)",
+        fontSize: "var(--vuuFilterEditor-fontSize)",
+        maxHeight: "240px"
+      },
+      "&.cm-tooltip-autocomplete > ul > li": {
+        height: "var(--vuuFilterEditor-suggestion-height)",
+        padding: "0 3px",
+        lineHeight: "var(--vuuFilterEditor-suggestion-height)"
+      },
+      "&.cm-tooltip-autocomplete li[aria-selected]": {
+        background: "var(--vuuFilterEditor-suggestion-selectedBackground)",
+        color: "var(--vuuFilterEditor-suggestion-selectedColor)"
+      },
+      "&.cm-tooltip-autocomplete li .cm-completionDetail": {
+        color: "var(--vuuFilterEditor-suggestion-detailColor)"
+      }
+    }
+  },
+  { dark: false }
+);
+
+// src/column-expression-input/useColumnAutoComplete.ts
+var import_vuu_codemirror4 = require("@vuu-ui/vuu-codemirror");
+var import_react7 = require("react");
+var applyPrefix = (completions, prefix) => prefix ? completions.map((completion) => {
+  var _a;
+  return {
+    ...completion,
+    apply: typeof completion.apply === "function" ? completion.apply : `${prefix}${(_a = completion.apply) != null ? _a : completion.label}`
+  };
+}) : completions;
+var isOperator = (node) => node === void 0 ? false : ["Times", "Divide", "Plus", "Minus"].includes(node.name);
+var completionDone = (onSubmit) => ({
+  apply: () => {
+    onSubmit == null ? void 0 : onSubmit();
+  },
+  label: "Done",
+  boost: 10
+});
+var getLastChild = (node, context) => {
+  var _a;
+  let { lastChild: childNode } = node;
+  const { pos } = context;
+  while (childNode) {
+    const isBeforeCursor = childNode.from < pos;
+    if (isBeforeCursor && ColumnNamedTerms.includes(childNode.name)) {
+      if (childNode.name === "ParenthesizedExpression") {
+        const expression = (_a = childNode.firstChild) == null ? void 0 : _a.nextSibling;
+        if (expression) {
+          childNode = expression;
+        }
+      }
+      return childNode;
+    } else {
+      childNode = childNode.prevSibling;
+    }
+  }
+};
+var getFunctionName = (node, state) => {
+  var _a;
+  if (node.name === "ArgList") {
+    const functionNode = node.prevSibling;
+    if (functionNode) {
+      return (0, import_vuu_codemirror4.getValue)(functionNode, state);
+    }
+  } else if (node.name === "OpenBrace") {
+    const maybeFunction = (_a = node.parent) == null ? void 0 : _a.prevSibling;
+    if ((maybeFunction == null ? void 0 : maybeFunction.name) === "Function") {
+      return (0, import_vuu_codemirror4.getValue)(maybeFunction, state);
+    }
+  }
+};
+var getRelationalOperator = (node, state) => {
+  if (node.name === "RelationalExpression") {
+    const lastNode = lastNamedChild(node);
+    if ((lastNode == null ? void 0 : lastNode.name) === "RelationalOperator") {
+      return (0, import_vuu_codemirror4.getValue)(lastNode, state);
+    }
+  } else {
+    const prevNode = node.prevSibling;
+    if ((prevNode == null ? void 0 : prevNode.name) === "RelationalOperator") {
+      return (0, import_vuu_codemirror4.getValue)(prevNode, state);
+    }
+  }
+};
+var getColumnName = (node, state) => {
+  var _a;
+  if (node.name === "RelationalExpression") {
+    if (((_a = node.firstChild) == null ? void 0 : _a.name) === "Column") {
+      return (0, import_vuu_codemirror4.getValue)(node.firstChild, state);
+    }
+  } else {
+    const prevNode = node.prevSibling;
+    if ((prevNode == null ? void 0 : prevNode.name) === "Column") {
+      return (0, import_vuu_codemirror4.getValue)(prevNode, state);
+    } else if ((prevNode == null ? void 0 : prevNode.name) === "RelationalOperator") {
+      return getColumnName(prevNode, state);
+    }
+  }
+};
+var makeSuggestions = async (context, suggestionProvider, suggestionType, optionalArgs = {}) => {
+  const options = await suggestionProvider.getSuggestions(
+    suggestionType,
+    optionalArgs
+  );
+  const { startsWith = "" } = optionalArgs;
+  return { from: context.pos - startsWith.length, options };
+};
+var handleConditionalExpression = (node, context, suggestionProvider, maybeComplete, onSubmit) => {
+  const lastChild = getLastChild(node, context);
+  switch (lastChild == null ? void 0 : lastChild.name) {
+    case "If":
+      return makeSuggestions(context, suggestionProvider, "expression", {
+        prefix: "( "
+      });
+    case "OpenBrace":
+      return makeSuggestions(context, suggestionProvider, "expression");
+    case "Condition":
+      return makeSuggestions(context, suggestionProvider, "expression", {
+        prefix: ", "
+      });
+    case "CloseBrace":
+      if (maybeComplete) {
+        const options = [completionDone(onSubmit)];
+        return { from: context.pos, options };
+      }
+  }
+};
+var promptToSave = (context, onSubmit) => {
+  const options = [completionDone(onSubmit)];
+  return { from: context.pos, options };
+};
+var useColumnAutoComplete = (suggestionProvider, onSubmit) => {
+  const makeSuggestions2 = (0, import_react7.useCallback)(
+    async (context, suggestionType, optionalArgs = {}) => {
+      const options = await suggestionProvider.getSuggestions(
+        suggestionType,
+        optionalArgs
+      );
+      const { startsWith = "" } = optionalArgs;
+      return { from: context.pos - startsWith.length, options };
+    },
+    [suggestionProvider]
+  );
+  return (0, import_react7.useCallback)(
+    async (context) => {
+      var _a, _b;
+      const { state, pos } = context;
+      const word = (_a = context.matchBefore(/\w*/)) != null ? _a : {
+        from: 0,
+        to: 0,
+        text: void 0
+      };
+      const tree = (0, import_vuu_codemirror4.syntaxTree)(state);
+      const nodeBefore = tree.resolveInner(pos, -1);
+      const text = state.doc.toString();
+      const maybeComplete = isCompleteExpression(text);
+      switch (nodeBefore.name) {
+        case "If": {
+          return makeSuggestions2(context, "expression", { prefix: "( " });
+        }
+        case "Condition":
+          {
+            const lastChild = getLastChild(nodeBefore, context);
+            if ((lastChild == null ? void 0 : lastChild.name) === "Column") {
+              const prevChild = (0, import_vuu_codemirror4.getPreviousNode)(lastChild);
+              if ((prevChild == null ? void 0 : prevChild.name) !== "RelationalOperator") {
+                return makeSuggestions2(context, "condition-operator", {
+                  columnName: (0, import_vuu_codemirror4.getValue)(lastChild, state)
+                });
+              }
+            } else if ((lastChild == null ? void 0 : lastChild.name) === "RelationalOperator") {
+              return makeSuggestions2(context, "expression");
+            }
+          }
+          break;
+        case "ConditionalExpression":
+          return handleConditionalExpression(
+            nodeBefore,
+            context,
+            suggestionProvider
+          );
+        case "RelationalExpression":
+          {
+            if (isCompleteRelationalExpression(nodeBefore)) {
+              return {
+                from: context.pos,
+                options: import_vuu_codemirror4.booleanJoinSuggestions.concat({
+                  label: ", <truthy expression>, <falsy expression>",
+                  apply: ", "
+                })
+              };
+            } else {
+              const operator = getRelationalOperator(nodeBefore, state);
+              const columnName = getColumnName(nodeBefore, state);
+              if (!operator) {
+                const options = await suggestionProvider.getSuggestions(
+                  "condition-operator",
+                  {
+                    columnName
+                  }
+                );
+                return { from: context.pos, options };
+              } else {
+                return makeSuggestions2(context, "expression");
+              }
+            }
+          }
+          break;
+        case "RelationalOperator":
+          return makeSuggestions2(context, "expression");
+        case "String":
+          {
+            const operator = getRelationalOperator(
+              nodeBefore,
+              state
+            );
+            const columnName = getColumnName(nodeBefore, state);
+            const { from, to } = nodeBefore;
+            if (to - from === 2 && context.pos === from + 1) {
+              if (columnName && operator) {
+                return makeSuggestions2(context, "columnValue", {
+                  columnName,
+                  operator,
+                  startsWith: word.text
+                });
+              }
+            } else if (to - from > 2 && context.pos === to) {
+              return makeSuggestions2(context, "expression", {
+                prefix: ", "
+              });
+            }
+          }
+          break;
+        case "ArithmeticExpression":
+          {
+            const lastChild = getLastChild(nodeBefore, context);
+            if ((lastChild == null ? void 0 : lastChild.name) === "Column") {
+              return makeSuggestions2(context, "expression");
+            } else if (isOperator(lastChild)) {
+              const operator = lastChild.name;
+              return makeSuggestions2(context, "column", { operator });
+            }
+          }
+          break;
+        case "OpenBrace":
+          {
+            const functionName = getFunctionName(nodeBefore, state);
+            return makeSuggestions2(context, "expression", { functionName });
+          }
+          break;
+        case "ArgList": {
+          const functionName = getFunctionName(nodeBefore, state);
+          const lastArgument = getLastChild(nodeBefore, context);
+          const prefix = (lastArgument == null ? void 0 : lastArgument.name) === "OpenBrace" || (lastArgument == null ? void 0 : lastArgument.name) === "Comma" ? void 0 : ",";
+          let options = await suggestionProvider.getSuggestions("expression", {
+            functionName
+          });
+          options = prefix ? applyPrefix(options, ", ") : options;
+          if ((lastArgument == null ? void 0 : lastArgument.name) !== "OpenBrace" && (lastArgument == null ? void 0 : lastArgument.name) !== "Comma") {
+            options = [
+              {
+                apply: ") ",
+                boost: 10,
+                label: "Done - no more arguments"
+              }
+            ].concat(options);
+          }
+          return { from: context.pos, options };
+        }
+        case "Equal":
+          if (text.trim() === "=") {
+            return makeSuggestions2(context, "expression");
+          }
+          break;
+        case "ParenthesizedExpression":
+        case "ColumnDefinitionExpression":
+          if (context.pos === 0) {
+            return makeSuggestions2(context, "expression");
+          } else {
+            const lastChild = getLastChild(nodeBefore, context);
+            if ((lastChild == null ? void 0 : lastChild.name) === "Column") {
+              if (maybeComplete) {
+                const options = [
+                  completionDone(onSubmit.current)
+                ];
+                const columnName = (0, import_vuu_codemirror4.getValue)(lastChild, state);
+                const columnOptions = await suggestionProvider.getSuggestions("operator", {
+                  columnName
+                });
+                return {
+                  from: context.pos,
+                  options: options.concat(columnOptions)
+                };
+              }
+            } else if ((lastChild == null ? void 0 : lastChild.name) === "CallExpression") {
+              if (maybeComplete) {
+                return {
+                  from: context.pos,
+                  options: [completionDone(onSubmit.current)]
+                };
+              }
+            } else if ((lastChild == null ? void 0 : lastChild.name) === "ArithmeticExpression") {
+              if (maybeComplete) {
+                let options = [completionDone(onSubmit.current)];
+                const lastExpressionChild = getLastChild(lastChild, context);
+                if ((lastExpressionChild == null ? void 0 : lastExpressionChild.name) === "Column") {
+                  const columnName = (0, import_vuu_codemirror4.getValue)(lastExpressionChild, state);
+                  const suggestions = await suggestionProvider.getSuggestions(
+                    "operator",
+                    { columnName }
+                  );
+                  options = options.concat(suggestions);
+                }
+                return {
+                  from: context.pos,
+                  options
+                };
+              }
+            } else if ((lastChild == null ? void 0 : lastChild.name) === "ConditionalExpression") {
+              return handleConditionalExpression(
+                lastChild,
+                context,
+                suggestionProvider,
+                maybeComplete,
+                onSubmit.current
+              );
+            }
+            break;
+          }
+        case "Column":
+          {
+            const isPartialMatch = await suggestionProvider.isPartialMatch(
+              "expression",
+              void 0,
+              word.text
+            );
+            if (isPartialMatch) {
+              return makeSuggestions2(context, "expression", {
+                startsWith: word.text
+              });
+            }
+          }
+          break;
+        case "Comma":
+          {
+            const parentNode = (0, import_vuu_codemirror4.getNamedParentNode)(nodeBefore);
+            if ((parentNode == null ? void 0 : parentNode.name) === "ConditionalExpression") {
+              return makeSuggestions2(context, "expression");
+            }
+          }
+          break;
+        case "CloseBrace":
+          {
+            const parentNode = (0, import_vuu_codemirror4.getNamedParentNode)(nodeBefore);
+            if ((parentNode == null ? void 0 : parentNode.name) === "ConditionalExpression") {
+              return handleConditionalExpression(
+                parentNode,
+                context,
+                suggestionProvider,
+                maybeComplete,
+                onSubmit.current
+              );
+            } else if ((parentNode == null ? void 0 : parentNode.name) === "ArgList") {
+              if (maybeComplete) {
+                return promptToSave(context, onSubmit.current);
+              }
+            }
+          }
+          break;
+        default: {
+          if (((_b = nodeBefore == null ? void 0 : nodeBefore.prevSibling) == null ? void 0 : _b.name) === "FilterClause") {
+            console.log("looks like we ight be a or|and operator");
+          }
+        }
+      }
+    },
+    [makeSuggestions2, onSubmit, suggestionProvider]
+  );
+};
+
+// src/column-expression-input/useColumnExpressionEditor.ts
+var getView = (ref) => {
+  if (ref.current == void 0) {
+    throw Error("EditorView not defined");
+  }
+  return ref.current;
+};
+var getOptionClass = () => {
+  return "vuuSuggestion";
+};
+var noop = () => console.log("noooop");
+var hasExpressionType = (completion) => "expressionType" in completion;
+var injectOptionContent = (completion) => {
+  if (hasExpressionType(completion)) {
+    const div = (0, import_vuu_utils11.createEl)("div", "expression-type-container");
+    const span = (0, import_vuu_utils11.createEl)("span", "expression-type", completion.expressionType);
+    div.appendChild(span);
+    return div;
+  } else {
+    return null;
+  }
+};
+var useColumnExpressionEditor = ({
+  onChange,
+  onSubmitExpression,
+  source,
+  suggestionProvider
+}) => {
+  const editorRef = (0, import_react8.useRef)(null);
+  const onSubmitRef = (0, import_react8.useRef)(noop);
+  const viewRef = (0, import_react8.useRef)();
+  const completionFn = useColumnAutoComplete(suggestionProvider, onSubmitRef);
+  const [createState, clearInput, submit] = (0, import_react8.useMemo)(() => {
+    const parseExpression = () => {
+      const view = getView(viewRef);
+      const source2 = view.state.doc.toString();
+      const tree = (0, import_vuu_codemirror5.ensureSyntaxTree)(view.state, view.state.doc.length, 5e3);
+      if (tree) {
+        const expression = walkTree(tree, source2);
+        return [source2, expression];
+      } else {
+        return ["", void 0];
+      }
+    };
+    const clearInput2 = () => {
+      getView(viewRef).setState(createState2());
+    };
+    const submitExpression = () => {
+      const [source2, expression] = parseExpression();
+      onSubmitExpression == null ? void 0 : onSubmitExpression(source2, expression);
+    };
+    const showSuggestions = (key) => {
+      return import_vuu_codemirror5.keymap.of([
+        {
+          key,
+          run() {
+            (0, import_vuu_codemirror5.startCompletion)(getView(viewRef));
+            return true;
+          }
+        }
+      ]);
+    };
+    const createState2 = () => import_vuu_codemirror5.EditorState.create({
+      doc: source,
+      extensions: [
+        import_vuu_codemirror5.minimalSetup,
+        (0, import_vuu_codemirror5.autocompletion)({
+          addToOptions: [
+            {
+              render: injectOptionContent,
+              position: 70
+            }
+          ],
+          override: [completionFn],
+          optionClass: getOptionClass
+        }),
+        columnExpressionLanguageSupport(),
+        import_vuu_codemirror5.keymap.of(import_vuu_codemirror5.defaultKeymap),
+        showSuggestions("ArrowDown"),
+        import_vuu_codemirror5.EditorView.updateListener.of((v) => {
+          const view = getView(viewRef);
+          if (v.docChanged) {
+            (0, import_vuu_codemirror5.startCompletion)(view);
+            const source2 = view.state.doc.toString();
+            onChange == null ? void 0 : onChange(source2);
+          }
+        }),
+        // Enforces single line view
+        import_vuu_codemirror5.EditorState.transactionFilter.of(
+          (tr) => tr.newDoc.lines > 1 ? [] : tr
+        ),
+        vuuTheme,
+        vuuHighlighting
+      ]
+    });
+    onSubmitRef.current = () => {
+      submitExpression();
+    };
+    return [createState2, clearInput2, submitExpression];
+  }, [completionFn, onChange, onSubmitExpression, source]);
+  (0, import_react8.useEffect)(() => {
+    if (!editorRef.current) {
+      throw Error("editor not in dom");
+    }
+    viewRef.current = new import_vuu_codemirror5.EditorView({
+      state: createState(),
+      parent: editorRef.current
+    });
+    return () => {
+      var _a;
+      (_a = viewRef.current) == null ? void 0 : _a.destroy();
+    };
+  }, [completionFn, createState]);
+  const handleBlur = (0, import_react8.useCallback)(() => {
+    submit();
+  }, [submit]);
+  return { editorRef, clearInput, onBlur: handleBlur };
+};
+
+// src/column-expression-input/ColumnExpressionInput.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var classBase7 = "vuuColumnExpressionInput";
+var ColumnExpressionInput = (0, import_react9.memo)(
+  ({
+    onChange,
+    onSubmitExpression,
+    source = "",
+    suggestionProvider
+  }) => {
+    const { editorRef, onBlur } = useColumnExpressionEditor({
+      onChange,
+      onSubmitExpression,
+      source,
+      suggestionProvider
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase7}`, onBlur, ref: editorRef });
+  },
+  (prevProps, newProps) => {
+    return prevProps.source === newProps.source;
+  }
+);
+ColumnExpressionInput.displayName = "ColumnExpressionInput";
+
+// src/column-expression-input/useColumnExpressionSuggestionProvider.ts
+var import_vuu_codemirror6 = require("@vuu-ui/vuu-codemirror");
+var import_vuu_data_react3 = require("@vuu-ui/vuu-data-react");
+var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
+var import_react10 = require("react");
+
+// src/column-expression-input/column-function-descriptors.ts
+var columnFunctionDescriptors = [
+  /**
+   * and
+   */
+  {
+    accepts: ["boolean"],
+    description: "Applies boolean and operator across supplied parameters to returns a single boolean result",
+    example: {
+      expression: 'and(ccy="EUR",quantity=0)',
+      result: "true | false"
+    },
+    name: "and",
+    params: {
+      description: "( boolean, [ boolean* ] )"
+    },
+    type: "boolean"
+  },
+  /**
+   * concatenate()
+   */
+  {
+    accepts: "string",
+    description: "Returns multiple string values as a single joined string. Arguments may be string literal values, string columns or other string expressions. Non string arguments may also be included, these will be converted to strings.",
+    example: {
+      expression: 'concatenate("example", "-test")',
+      result: '"example-test"'
+    },
+    name: "concatenate",
+    params: {
+      description: "( string, string, [ string* ] )"
+    },
+    type: "string"
+  },
+  /**
+   * contains()
+   */
+  {
+    accepts: ["string", "string"],
+    description: "Tests a string value to determine whether it contains a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> contains one or more occurrences of <target subscring>",
+    example: {
+      expression: 'contains("Royal Bank of Scotland", "bank")',
+      result: "true"
+    },
+    name: "contains",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  /**
+   * left()
+   */
+  {
+    accepts: ["string", "number"],
+    description: "Returns the leftmost <number> characters from <string>. First argument may be a string literal, string column or other string expression.",
+    example: {
+      expression: 'left("USD Benchmark Report", 3)',
+      result: '"USD"'
+    },
+    name: "left",
+    params: {
+      count: 2,
+      description: "( string, number )"
+    },
+    type: "string"
+  },
+  /**
+   * len()
+   */
+  {
+    accepts: "string",
+    description: "Returns the number of characters in <string>. Argument may be a string literal, string column or other string expression.",
+    example: {
+      expression: 'len("example")',
+      result: "7"
+    },
+    name: "len",
+    params: {
+      description: "(string)"
+    },
+    type: "number"
+  },
+  /**
+   * lower()
+   */
+  {
+    accepts: "string",
+    description: "Convert a string value to lowercase. Argument may be a string column or other string expression.",
+    example: {
+      expression: 'lower("examPLE")',
+      result: '"example"'
+    },
+    name: "lower",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * or
+   */
+  {
+    accepts: ["boolean"],
+    description: "Applies boolean or operator across supplied parameters to returns a single boolean result",
+    example: {
+      expression: 'or(status="cancelled",quantity=0)',
+      result: "true | false"
+    },
+    name: "or",
+    params: {
+      description: "( boolean, [ boolean* ] )"
+    },
+    type: "boolean"
+  },
+  /**
+   * upper()
+   */
+  {
+    accepts: "string",
+    description: "Convert a string value to uppercase. Argument may be a string column or other string expression.",
+    example: {
+      expression: 'upper("example")',
+      result: '"EXAMPLE"'
+    },
+    name: "upper",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * right()
+   */
+  {
+    accepts: ["string", "number"],
+    description: "Returns the rightmost <number> characters from <string>. First argument may be a string literal, string column or other string expression.",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "right",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * replace()
+   */
+  {
+    accepts: ["string", "string", "string"],
+    description: "Replace characters within a string. Accepts three arguments: source text, text to replace and replacement text. Returns a copy of <source text> with any occurrences of <text to replace> replaced by <replacement text>",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "replace",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * text()
+   */
+  {
+    accepts: "number",
+    description: "Converts a number to a string.",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "text",
+    params: {
+      description: "( string )"
+    },
+    type: "string"
+  },
+  /**
+   * starts()
+   */
+  {
+    accepts: "string",
+    description: "Tests a string value to determine whether it starts with a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> starts with <target subscring>.",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "starts",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  /**
+   * starts()
+   */
+  {
+    accepts: "string",
+    description: "Tests a string value to determine whether it ends with a given substring. Accepts two arguments: source text and target substring. Returns true if <source text> ends with <target subscring>.",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "ends",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  {
+    accepts: "number",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "min",
+    params: {
+      description: "( string )"
+    },
+    type: "number"
+  },
+  {
+    accepts: "number",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "max",
+    params: {
+      description: "( string )"
+    },
+    type: "number"
+  },
+  {
+    accepts: "number",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "sum",
+    params: {
+      description: "( string )"
+    },
+    type: "number"
+  },
+  {
+    accepts: "number",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "round",
+    params: {
+      description: "( string )"
+    },
+    type: "number"
+  },
+  {
+    accepts: "any",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "or",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  {
+    accepts: "any",
+    description: "blah",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "and",
+    params: {
+      description: "( string )"
+    },
+    type: "boolean"
+  },
+  {
+    accepts: "any",
+    description: "Return one of two possible result values, depending on the evaluation of a filter expression. If <filterExpression> resolves to true, result is <expression1>, otherwise <expression2>. ",
+    example: {
+      expression: "blah",
+      result: "blah"
+    },
+    name: "if",
+    params: {
+      description: "( filterExpression, expression1, expression 2)"
+    },
+    type: "variable"
+  }
+];
+
+// src/column-expression-input/functionDocInfo.ts
+var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
+var functionDocInfo = ({
+  name: name2,
+  description,
+  example,
+  params,
+  type
+}) => {
+  const rootElement = (0, import_vuu_utils12.createEl)("div", "vuuFunctionDoc");
+  const headingElement = (0, import_vuu_utils12.createEl)("div", "function-heading");
+  const nameElement = (0, import_vuu_utils12.createEl)("span", "function-name", name2);
+  const paramElement = (0, import_vuu_utils12.createEl)("span", "param-list", params.description);
+  const typeElement = (0, import_vuu_utils12.createEl)("span", "function-type", type);
+  headingElement.appendChild(nameElement);
+  headingElement.appendChild(paramElement);
+  headingElement.appendChild(typeElement);
+  const child2 = (0, import_vuu_utils12.createEl)("p", void 0, description);
+  rootElement.appendChild(headingElement);
+  rootElement.appendChild(child2);
+  if (example) {
+    const exampleElement = (0, import_vuu_utils12.createEl)("div", "example-container");
+    const expressionElement = (0, import_vuu_utils12.createEl)(
+      "div",
+      "example-expression",
+      example.expression
+    );
+    const resultElement = (0, import_vuu_utils12.createEl)("div", "example-result", example.result);
+    exampleElement.appendChild(expressionElement);
+    rootElement.appendChild(exampleElement);
+    rootElement.appendChild(resultElement);
+  }
+  return rootElement;
+};
+
+// src/column-expression-input/useColumnExpressionSuggestionProvider.ts
+var NO_OPERATORS = [];
+var withApplySpace = (suggestions) => suggestions.map((suggestion) => {
+  var _a;
+  return {
+    ...suggestion,
+    apply: ((_a = suggestion.apply) != null ? _a : suggestion.label) + " "
+  };
+});
+var getValidColumns = (columns, { functionName, operator }) => {
+  if (operator) {
+    return columns.filter(import_vuu_utils13.isNumericColumn);
+  } else if (functionName) {
+    const fn = columnFunctionDescriptors.find((f) => f.name === functionName);
+    if (fn) {
+      switch (fn.accepts) {
+        case "string":
+          return columns.filter(import_vuu_utils13.isTextColumn);
+        case "number":
+          return columns.filter(import_vuu_utils13.isNumericColumn);
+        default:
+          return columns;
+      }
+    }
+  }
+  return columns;
+};
+var getColumns = (columns, options) => {
+  const validColumns = getValidColumns(columns, options);
+  return validColumns.map((column) => {
+    var _a;
+    const label = (_a = column.label) != null ? _a : column.name;
+    return {
+      apply: options.prefix ? `${options.prefix}${column.name}` : column.name,
+      label,
+      boost: 5,
+      type: "column",
+      expressionType: column.serverDataType
+    };
+  });
+};
+var arithmeticOperators = [
+  { apply: "* ", boost: 2, label: "*", type: "operator" },
+  { apply: "/ ", boost: 2, label: "/", type: "operator" },
+  { apply: "+ ", boost: 2, label: "+", type: "operator" },
+  { apply: "- ", boost: 2, label: "-", type: "operator" }
+];
+var getOperators = (column) => {
+  if (column === void 0 || (0, import_vuu_utils13.isNumericColumn)(column)) {
+    return arithmeticOperators;
+  } else {
+    return NO_OPERATORS;
+  }
+};
+var getConditionOperators = (column) => {
+  switch (column.serverDataType) {
+    case "string":
+    case "char":
+      return withApplySpace(
+        import_vuu_codemirror6.stringOperators
+        /*, startsWith*/
+      );
+    case "int":
+    case "long":
+    case "double":
+      return withApplySpace(import_vuu_codemirror6.numericOperators);
+  }
+};
+var toFunctionCompletion = (functionDescriptor) => ({
+  apply: `${functionDescriptor.name}( `,
+  boost: 2,
+  expressionType: functionDescriptor.type,
+  info: () => functionDocInfo(functionDescriptor),
+  label: functionDescriptor.name,
+  type: "function"
+});
+var getAcceptedTypes = (fn) => {
+  if (fn) {
+    if (typeof fn.accepts === "string") {
+      return fn.accepts;
+    } else if (Array.isArray(fn.accepts)) {
+      if (fn.accepts.every((s) => s === "string")) {
+        return "string";
+      } else {
+        return "any";
+      }
+    }
+  }
+  return "any";
+};
+var functions = columnFunctionDescriptors.map(toFunctionCompletion);
+var getFunctions = ({ functionName }) => {
+  if (functionName) {
+    const fn = columnFunctionDescriptors.find((f) => f.name === functionName);
+    const acceptedTypes = getAcceptedTypes(fn);
+    if (fn) {
+      switch (acceptedTypes) {
+        case "string":
+          return columnFunctionDescriptors.filter((f) => f.type === "string" || f.type === "variable").map(toFunctionCompletion);
+        case "number":
+          return columnFunctionDescriptors.filter((f) => f.type === "number" || f.type === "variable").map(toFunctionCompletion);
+        default:
+      }
+    }
+  }
+  return functions;
+};
+var NONE = {};
+var useColumnExpressionSuggestionProvider = ({
+  columns,
+  table
+}) => {
+  const findColumn = (0, import_react10.useCallback)(
+    (name2) => name2 ? columns.find((col) => col.name === name2) : void 0,
+    [columns]
+  );
+  const latestSuggestionsRef = (0, import_react10.useRef)();
+  const getTypeaheadSuggestions = (0, import_vuu_data_react3.useTypeaheadSuggestions)();
+  const getSuggestions = (0, import_react10.useCallback)(
+    async (suggestionType, options = NONE) => {
+      const { columnName, functionName, operator, prefix } = options;
+      switch (suggestionType) {
+        case "expression": {
+          const suggestions = await withApplySpace(
+            getColumns(columns, { functionName, prefix })
+          ).concat(getFunctions(options));
+          return latestSuggestionsRef.current = suggestions;
+        }
+        case "column": {
+          const suggestions = await getColumns(columns, options);
+          return latestSuggestionsRef.current = withApplySpace(suggestions);
+        }
+        case "operator": {
+          const suggestions = await getOperators(findColumn(columnName));
+          return latestSuggestionsRef.current = withApplySpace(suggestions);
+        }
+        case "relational-operator": {
+          const suggestions = await (0, import_vuu_codemirror6.getRelationalOperators)(
+            findColumn(columnName)
+          );
+          return latestSuggestionsRef.current = withApplySpace(suggestions);
+        }
+        case "condition-operator":
+          {
+            const column = findColumn(columnName);
+            if (column) {
+              const suggestions = await getConditionOperators(column);
+              if (suggestions) {
+                return latestSuggestionsRef.current = withApplySpace(suggestions);
+              }
+            }
+          }
+          break;
+        case "columnValue":
+          if (columnName && operator) {
+            const params = (0, import_vuu_data_react3.getTypeaheadParams)(
+              table,
+              columnName
+              /*, startsWith*/
+            );
+            const suggestions = await getTypeaheadSuggestions(params);
+            latestSuggestionsRef.current = (0, import_vuu_codemirror6.toSuggestions)(suggestions, {
+              suffix: ""
+            });
+            latestSuggestionsRef.current.forEach((suggestion) => {
+              suggestion.apply = (view, completion, from) => {
+                const annotation = new import_vuu_codemirror6.AnnotationType();
+                const cursorPos = from + completion.label.length + 1;
+                view.dispatch({
+                  changes: { from, insert: completion.label },
+                  selection: { anchor: cursorPos, head: cursorPos },
+                  annotations: annotation.of(completion)
+                });
+              };
+            });
+            return latestSuggestionsRef.current;
+          }
+          break;
+      }
+      return [];
+    },
+    [columns, findColumn, getTypeaheadSuggestions, table]
+  );
+  const isPartialMatch = (0, import_react10.useCallback)(
+    async (valueType, columnName, pattern) => {
+      const { current: latestSuggestions } = latestSuggestionsRef;
+      let maybe = false;
+      const suggestions = latestSuggestions || await getSuggestions(valueType, { columnName });
+      if (pattern && suggestions) {
+        for (const option of suggestions) {
+          if (option.label === pattern) {
+            return false;
+          } else if (option.label.startsWith(pattern)) {
+            maybe = true;
+          }
+        }
+      }
+      return maybe;
+    },
+    [getSuggestions]
+  );
+  return {
+    getSuggestions,
+    isPartialMatch
+  };
+};
+
+// src/column-expression-panel/useColumnExpression.ts
+var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
+var import_react11 = require("react");
+var applyDefaults = (column) => {
+  const [name2, expression, type] = (0, import_vuu_utils14.getCalculatedColumnDetails)(column);
+  if (type === "") {
+    return {
+      ...column,
+      name: `${name2}:string:${expression}`
+    };
+  } else {
+    return column;
+  }
+};
+var useColumnExpression = ({
+  column: columnProp,
+  onChangeName: onChangeNameProp,
+  onChangeServerDataType: onChangeServerDataTypeProp
+}) => {
+  const [column, _setColumn] = (0, import_react11.useState)(
+    applyDefaults(columnProp)
+  );
+  const columnRef = (0, import_react11.useRef)(columnProp);
+  const setColumn = (0, import_react11.useCallback)((column2) => {
+    columnRef.current = column2;
+    _setColumn(column2);
+  }, []);
+  const onChangeName = (0, import_react11.useCallback)(
+    (evt) => {
+      const { value } = evt.target;
+      const newColumn = (0, import_vuu_utils14.setCalculatedColumnName)(column, value);
+      setColumn(newColumn);
+      onChangeNameProp == null ? void 0 : onChangeNameProp(newColumn.name);
+    },
+    [column, onChangeNameProp, setColumn]
+  );
+  const onChangeExpression = (0, import_react11.useCallback)(
+    (value) => {
+      const expression = value.trim();
+      const { current: column2 } = columnRef;
+      const newColumn = (0, import_vuu_utils14.setCalculatedColumnExpression)(column2, expression);
+      setColumn(newColumn);
+      onChangeNameProp == null ? void 0 : onChangeNameProp(newColumn.name);
+    },
+    [onChangeNameProp, setColumn]
+  );
+  const onChangeServerDataType = (0, import_react11.useCallback)(
+    (evt, value) => {
+      if ((0, import_vuu_utils14.isVuuColumnDataType)(value)) {
+        const newColumn = (0, import_vuu_utils14.setCalculatedColumnType)(column, value);
+        setColumn(newColumn);
+        onChangeNameProp == null ? void 0 : onChangeNameProp(newColumn.name);
+        onChangeServerDataTypeProp == null ? void 0 : onChangeServerDataTypeProp(value);
+      }
+    },
+    [column, onChangeNameProp, onChangeServerDataTypeProp, setColumn]
+  );
+  return {
+    column,
+    onChangeExpression,
+    onChangeName,
+    onChangeServerDataType
+  };
+};
+
+// src/column-expression-panel/ColumnExpressionPanel.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var classBase8 = "vuuColumnExpressionPanel";
+var ColumnExpressionPanel = ({
+  column: columnProp,
+  onChangeName: onChangeNameProp,
+  onChangeServerDataType: onChangeServerDataTypeProp,
+  tableConfig,
+  vuuTable
+}) => {
+  const typeRef = (0, import_react12.useRef)(null);
+  const { column, onChangeExpression, onChangeName, onChangeServerDataType } = useColumnExpression({
+    column: columnProp,
+    onChangeName: onChangeNameProp,
+    onChangeServerDataType: onChangeServerDataTypeProp
+  });
+  const initialExpressionRef = (0, import_react12.useRef)(
+    (0, import_vuu_utils15.getCalculatedColumnExpression)(column)
+  );
+  const suggestionProvider = useColumnExpressionSuggestionProvider({
+    columns: tableConfig.columns,
+    table: vuuTable
+  });
+  const handleSubmitExpression = (0, import_react12.useCallback)(() => {
+    var _a, _b;
+    if (typeRef.current) {
+      (_b = (_a = typeRef.current) == null ? void 0 : _a.querySelector("button")) == null ? void 0 : _b.focus();
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: classBase8, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuColumnSettingsPanel-header", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Calculation" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core3.FormField, { "data-field": "column-name", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.FormFieldLabel, { children: "Column Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_core3.Input,
+        {
+          className: "vuuInput",
+          onChange: onChangeName,
+          value: (0, import_vuu_utils15.getCalculatedColumnName)(column)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core3.FormField, { "data-field": "column-expression", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.FormFieldLabel, { children: "Expression" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ColumnExpressionInput,
+        {
+          onChange: onChangeExpression,
+          onSubmitExpression: handleSubmitExpression,
+          source: initialExpressionRef.current,
+          suggestionProvider
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core3.FormField, { "data-field": "type", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core3.FormFieldLabel, { children: "Column type" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_vuu_ui_controls4.Dropdown,
+        {
+          className: `${classBase8}-type`,
+          onSelectionChange: onChangeServerDataType,
+          ref: typeRef,
+          selected: (0, import_vuu_utils15.getCalculatedColumnType)(column) || null,
+          source: ["double", "long", "string", "boolean"],
+          width: "100%"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/column-formatting-settings/ColumnFormattingPanel.tsx
+var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
+var import_core7 = require("@salt-ds/core");
+var import_clsx5 = __toESM(require("clsx"), 1);
+var import_react16 = require("react");
+
+// src/column-formatting-settings/BaseNumericFormattingSettings.tsx
+var import_core4 = require("@salt-ds/core");
+var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
+var import_react13 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var classBase9 = "vuuFormattingSettings";
+var BaseNumericFormattingSettings = ({
+  column,
+  onChangeFormatting: onChange
+}) => {
+  var _a, _b, _c;
+  const [formattingSettings, setFormattingSettings] = (0, import_react13.useState)((0, import_vuu_utils16.getTypeFormattingFromColumn)(column));
+  const handleInputKeyDown = (0, import_react13.useCallback)(
+    (evt) => {
+      if (evt.key === "Enter" || evt.key === "Tab") {
+        onChange(formattingSettings);
+      }
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeDecimals = (0, import_react13.useCallback)(
+    (evt) => {
+      const { value } = evt.target;
+      const numericValue = value === "" ? void 0 : isNaN(parseInt(value)) ? void 0 : parseInt(value);
+      const newFormattingSettings = {
+        ...formattingSettings,
+        decimals: numericValue
+      };
+      setFormattingSettings(newFormattingSettings);
+    },
+    [formattingSettings]
+  );
+  const handleChangeAlignDecimals = (0, import_react13.useCallback)(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        alignOnDecimals: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  const handleChangeZeroPad = (0, import_react13.useCallback)(
+    (evt) => {
+      const { checked } = evt.target;
+      const newFormattingSettings = {
+        ...formattingSettings,
+        zeroPad: checked
+      };
+      setFormattingSettings(newFormattingSettings);
+      onChange(newFormattingSettings);
+    },
+    [formattingSettings, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: classBase9, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core4.FormField, { "data-field": "decimals", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core4.FormFieldLabel, { children: "Number of decimals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_core4.Input,
+        {
+          className: "vuuInput",
+          onChange: handleChangeDecimals,
+          onKeyDown: handleInputKeyDown,
+          value: (_a = formattingSettings.decimals) != null ? _a : ""
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core4.FormFieldLabel, { children: "Align on decimals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_core4.Switch,
+        {
+          checked: (_b = formattingSettings.alignOnDecimals) != null ? _b : false,
+          onChange: handleChangeAlignDecimals,
+          value: "align-decimals"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core4.FormField, { labelPlacement: "left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core4.FormFieldLabel, { children: "Zero pad decimals" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        import_core4.Switch,
+        {
+          checked: (_c = formattingSettings.zeroPad) != null ? _c : false,
+          onChange: handleChangeZeroPad,
+          value: "zero-pad"
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/column-formatting-settings/LongTypeFormattingSettings.tsx
+var import_react15 = require("react");
+var import_core6 = require("@salt-ds/core");
+var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
+
+// src/column-formatting-settings/DateTimeFormattingSettings.tsx
+var import_react14 = require("react");
+var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
+var import_core5 = require("@salt-ds/core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DateTimeFormattingSettings = ({ column, onChangeFormatting: onChange }) => {
+  var _a, _b;
+  const formatting = (0, import_vuu_utils17.getTypeFormattingFromColumn)(column);
+  const { pattern = import_vuu_utils17.fallbackDateTimePattern } = formatting;
+  const toggleValue = (0, import_react14.useMemo)(() => getToggleValue(pattern), [pattern]);
+  const [fallbackState, setFallbackState] = (0, import_react14.useState)(
+    {
+      time: (_a = pattern.time) != null ? _a : import_vuu_utils17.defaultPatternsByType.time,
+      date: (_b = pattern.date) != null ? _b : import_vuu_utils17.defaultPatternsByType.date
+    }
+  );
+  const onPatternChange = (0, import_react14.useCallback)(
+    (pattern2) => onChange({ ...formatting, pattern: pattern2 }),
+    [onChange, formatting]
+  );
+  const onDropdownChange = (0, import_react14.useCallback)(
+    (key) => (_, p) => {
+      const updatedPattern = { ...pattern != null ? pattern : {}, [key]: p };
+      setFallbackState((s) => {
+        var _a2, _b2;
+        return {
+          time: (_a2 = updatedPattern.time) != null ? _a2 : s.time,
+          date: (_b2 = updatedPattern.date) != null ? _b2 : s.date
+        };
+      });
+      onPatternChange(updatedPattern);
+    },
+    [onPatternChange, pattern]
+  );
+  const onToggleChange = (0, import_react14.useCallback)(
+    (evnt) => {
+      var _a2, _b2, _c, _d;
+      const value = evnt.currentTarget.value;
+      switch (value) {
+        case "time":
+          return onPatternChange({
+            [value]: (_a2 = pattern[value]) != null ? _a2 : fallbackState[value]
+          });
+        case "date":
+          return onPatternChange({
+            [value]: (_b2 = pattern[value]) != null ? _b2 : fallbackState[value]
+          });
+        case "both":
+          return onPatternChange({
+            time: (_c = pattern.time) != null ? _c : fallbackState.time,
+            date: (_d = pattern.date) != null ? _d : fallbackState.date
+          });
+      }
+    },
+    [onPatternChange, pattern, fallbackState]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core5.FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core5.FormFieldLabel, { children: "Display" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_core5.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onToggleChange,
+          value: toggleValue,
+          "data-variant": "primary",
+          children: toggleValues.map((v) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core5.ToggleButton, { value: v, children: v.toUpperCase() }, v))
+        }
+      )
+    ] }),
+    ["date", "time"].filter((v) => !!pattern[v]).map((v) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core5.FormField, { labelPlacement: "top", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core5.FormFieldLabel, { children: `${labelByType[v]} pattern` }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_vuu_ui_controls5.Dropdown,
+        {
+          onSelectionChange: onDropdownChange(v),
+          selected: pattern[v],
+          source: import_vuu_utils17.supportedDateTimePatterns[v],
+          width: "100%"
+        }
+      )
+    ] }, v))
+  ] });
+};
+var labelByType = { date: "Date", time: "Time" };
+var toggleValues = ["date", "time", "both"];
+function getToggleValue(pattern) {
+  return !pattern.time ? "date" : !pattern.date ? "time" : "both";
+}
+
+// src/column-formatting-settings/LongTypeFormattingSettings.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var classBase10 = "vuuLongColumnFormattingSettings";
+var LongTypeFormattingSettings = (props) => {
+  const { column, onChangeColumnType: onChangeType } = props;
+  const type = (0, import_vuu_utils18.isTypeDescriptor)(column.type) ? column.type.name : column.type;
+  const handleToggleChange = (0, import_react15.useCallback)(
+    (event) => {
+      const value = event.currentTarget.value;
+      onChangeType(value);
+    },
+    [onChangeType]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: classBase10, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core6.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core6.FormFieldLabel, { children: "Type inferred as" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_core6.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: handleToggleChange,
+          value: type != null ? type : "number",
+          children: toggleValues2.map((v) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core6.ToggleButton, { value: v, children: v.toUpperCase() }, v))
+        }
+      )
+    ] }),
+    (0, import_vuu_utils18.isDateTimeColumn)(column) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DateTimeFormattingSettings, { ...props, column }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BaseNumericFormattingSettings, { ...props })
+  ] });
+};
+var toggleValues2 = ["number", "date/time"];
+
+// src/column-formatting-settings/ColumnFormattingPanel.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var classBase11 = "vuuColumnFormattingPanel";
+var itemToString = (item) => {
+  var _a;
+  return (_a = item.label) != null ? _a : item.name;
+};
+var ColumnFormattingPanel = ({
+  availableRenderers,
+  className,
+  column,
+  onChangeFormatting,
+  onChangeColumnType,
+  onChangeRendering,
+  ...htmlAttributes
+}) => {
+  const formattingSettingsComponent = (0, import_react16.useMemo)(
+    () => getFormattingSettingsComponent({
+      column,
+      onChangeFormatting,
+      onChangeColumnType
+    }),
+    [column, onChangeColumnType, onChangeFormatting]
+  );
+  console.log({ formattingSettingsComponent });
+  const ConfigEditor = (0, import_react16.useMemo)(() => {
+    const { type } = column;
+    if ((0, import_vuu_utils19.isTypeDescriptor)(type) && (0, import_vuu_utils19.isColumnTypeRenderer)(type.renderer)) {
+      const cellRendererOptions = (0, import_vuu_utils19.getCellRendererOptions)(type.renderer.name);
+      return (0, import_vuu_utils19.getConfigurationEditor)(cellRendererOptions == null ? void 0 : cellRendererOptions.configEditor);
+    }
+    return void 0;
+  }, [column]);
+  const selectedCellRenderer = (0, import_react16.useMemo)(() => {
+    const { type } = column;
+    const [defaultRenderer] = availableRenderers;
+    const rendererName = (0, import_vuu_utils19.isTypeDescriptor)(type) && (0, import_vuu_utils19.isColumnTypeRenderer)(type.renderer) ? type.renderer.name : void 0;
+    const configuredRenderer = availableRenderers.find(
+      (renderer) => renderer.name === rendererName
+    );
+    return configuredRenderer != null ? configuredRenderer : defaultRenderer;
+  }, [availableRenderers, column]);
+  const handleChangeRenderer = (0, import_react16.useCallback)(
+    (_, cellRendererDescriptor) => {
+      const renderProps = {
+        name: cellRendererDescriptor.name
+      };
+      onChangeRendering == null ? void 0 : onChangeRendering(renderProps);
+    },
+    [onChangeRendering]
+  );
+  const { serverDataType = "string" } = column;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ...htmlAttributes, className: `vuuColumnSettingsPanel-header`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: "Formatting" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core7.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core7.FormFieldLabel, { children: `Renderer (data type ${column.serverDataType})` }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_vuu_ui_controls6.Dropdown,
+        {
+          className: (0, import_clsx5.default)(`${classBase11}-renderer`),
+          itemToString,
+          onSelectionChange: handleChangeRenderer,
+          selected: selectedCellRenderer,
+          source: availableRenderers,
+          width: "100%"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx5.default)(classBase11, className, `${classBase11}-${serverDataType}`),
+        children: [
+          formattingSettingsComponent,
+          ConfigEditor ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            ConfigEditor,
+            {
+              column,
+              onChangeRendering
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+};
+function getFormattingSettingsComponent(props) {
+  const { column } = props;
+  switch (column.serverDataType) {
+    case "double":
+    case "int":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BaseNumericFormattingSettings, { ...props });
+    case "long":
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LongTypeFormattingSettings, { ...props });
+    default:
+      return null;
+  }
+}
+
+// src/column-settings/ColumnNameLabel.tsx
+var import_clsx6 = __toESM(require("clsx"), 1);
+var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var classBase12 = "vuuColumnNameLabel";
+var ColumnNameLabel = ({ column, onClick }) => {
+  if ((0, import_vuu_utils20.isCalculatedColumn)(column.name)) {
+    const [name2, type, expression] = (0, import_vuu_utils20.getCalculatedColumnDetails)(column);
+    const displayName = name2 || "name";
+    const displayExpression = "=expression";
+    const nameClass = displayName === "name" ? `${classBase12}-placeholder` : void 0;
+    const expressionClass = expression === "" ? `${classBase12}-placeholder` : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx6.default)(classBase12, `${classBase12}-calculated`),
+        onClick,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: nameClass, children: displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: type || "string" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: ":" }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: expressionClass, children: displayExpression }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase12}-edit`, "data-icon": "edit" })
+        ]
+      }
+    );
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: classBase12, children: column.name });
+  }
+};
+
+// src/column-settings/useColumnSettings.ts
+var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
+var import_react17 = require("react");
+var integerCellRenderers = [
+  {
+    description: "Default formatter for columns with data type integer",
+    label: "Default Renderer (int, long)",
+    name: "default-int"
+  }
+];
+var doubleCellRenderers = [
+  {
+    description: "Default formatter for columns with data type double",
+    label: "Default Renderer (double)",
+    name: "default-double"
+  }
+];
+var stringCellRenderers = [
+  {
+    description: "Default formatter for columns with data type string",
+    label: "Default Renderer (string)",
+    name: "default-string"
+  }
+];
+var booleanCellRenderers = [];
+var getAvailableCellRenderers = (column) => {
+  switch (column.serverDataType) {
+    case "char":
+    case "string":
+      return stringCellRenderers.concat((0, import_vuu_utils21.getRegisteredCellRenderers)("string"));
+    case "int":
+    case "long":
+      return integerCellRenderers.concat((0, import_vuu_utils21.getRegisteredCellRenderers)("int"));
+    case "double":
+      return doubleCellRenderers.concat((0, import_vuu_utils21.getRegisteredCellRenderers)("double"));
+    case "boolean":
+      return booleanCellRenderers.concat((0, import_vuu_utils21.getRegisteredCellRenderers)("boolean"));
+    default:
+      return stringCellRenderers;
+  }
+};
+var getFieldName = (input) => {
+  const saltFormField = input.closest(".saltFormField");
+  if (saltFormField && saltFormField.dataset.field) {
+    const {
+      dataset: { field }
+    } = saltFormField;
+    return field;
+  } else {
+    throw Error("named form field not found");
+  }
+};
+var getColumn = (columns, column) => {
+  if (column.name === "::") {
+    return column;
+  } else {
+    const col = columns.find((col2) => col2.name === column.name);
+    if (col) {
+      return col;
+    }
+    throw Error(`columns does not contain column ${name}`);
+  }
+};
+var replaceColumn = (tableConfig, column) => ({
+  ...tableConfig,
+  columns: tableConfig.columns.map(
+    (col) => col.name === column.name ? column : col
+  )
+});
+var useColumnSettings = ({
+  column: columnProp,
+  onCancelCreateColumn,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  tableConfig
+}) => {
+  const [column, setColumn] = (0, import_react17.useState)(
+    getColumn(tableConfig.columns, columnProp)
+  );
+  const columnRef = (0, import_react17.useRef)(column);
+  const [inEditMode, setEditMode] = (0, import_react17.useState)(column.name === "::");
+  const handleEditCalculatedcolumn = (0, import_react17.useCallback)(() => {
+    columnRef.current = column;
+    setEditMode(true);
+  }, [column]);
+  (0, import_react17.useEffect)(() => {
+    setColumn(columnProp);
+    setEditMode(columnProp.name === "::");
+  }, [columnProp]);
+  const availableRenderers = (0, import_react17.useMemo)(() => {
+    return getAvailableCellRenderers(column);
+  }, [column]);
+  const handleInputCommit = (0, import_react17.useCallback)(() => {
+    onConfigChange(replaceColumn(tableConfig, column));
+  }, [column, onConfigChange, tableConfig]);
+  const handleChangeToggleButton = (0, import_react17.useCallback)(
+    (evt) => {
+      const button = (0, import_vuu_utils21.queryClosest)(evt.target, "button");
+      if (button) {
+        const fieldName = getFieldName(button);
+        const { value } = button;
+        switch (fieldName) {
+          case "column-alignment":
+            if ((0, import_vuu_utils21.isValidColumnAlignment)(value)) {
+              const newColumn = {
+                ...column,
+                align: value || void 0
+              };
+              setColumn(newColumn);
+              onConfigChange(replaceColumn(tableConfig, newColumn));
+            }
+            break;
+          case "column-pin":
+            if ((0, import_vuu_utils21.isValidPinLocation)(value)) {
+              const newColumn = {
+                ...column,
+                pin: value || void 0
+              };
+              setColumn(newColumn);
+              onConfigChange(replaceColumn(tableConfig, newColumn));
+              break;
+            }
+        }
+      }
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChange = (0, import_react17.useCallback)((evt) => {
+    const input = evt.target;
+    const fieldName = getFieldName(input);
+    const { value } = input;
+    switch (fieldName) {
+      case "column-label":
+        setColumn((state) => ({ ...state, label: value }));
+        break;
+      case "column-name":
+        setColumn((state) => (0, import_vuu_utils21.setCalculatedColumnName)(state, value));
+        break;
+      case "column-width":
+        setColumn((state) => ({ ...state, width: parseInt(value) }));
+        break;
+    }
+  }, []);
+  const handleChangeCalculatedColumnName = (0, import_react17.useCallback)((name2) => {
+    setColumn((state) => ({ ...state, name: name2 }));
+  }, []);
+  const handleChangeFormatting = (0, import_react17.useCallback)(
+    (formatting) => {
+      const newColumn = (0, import_vuu_utils21.updateColumnFormatting)(column, formatting);
+      setColumn(newColumn);
+      onConfigChange(replaceColumn(tableConfig, newColumn));
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChangeType = (0, import_react17.useCallback)(
+    (type) => {
+      const updatedColumn = (0, import_vuu_utils21.updateColumnType)(column, type);
+      setColumn(updatedColumn);
+      onConfigChange(replaceColumn(tableConfig, updatedColumn));
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const handleChangeServerDataType = (0, import_react17.useCallback)(
+    (serverDataType) => {
+      setColumn((col) => ({ ...col, serverDataType }));
+    },
+    []
+  );
+  const handleChangeRendering = (0, import_react17.useCallback)(
+    (renderProps) => {
+      if (renderProps) {
+        const newColumn = (0, import_vuu_utils21.updateColumnRenderProps)(
+          column,
+          renderProps
+        );
+        setColumn(newColumn);
+        onConfigChange(replaceColumn(tableConfig, newColumn));
+      }
+    },
+    [column, onConfigChange, tableConfig]
+  );
+  const navigateColumn = (0, import_react17.useCallback)(
+    ({ moveBy }) => {
+      const { columns } = tableConfig;
+      const index = columns.indexOf(column) + moveBy;
+      const newColumn = columns[index];
+      if (newColumn) {
+        setColumn(newColumn);
+      }
+    },
+    [column, tableConfig]
+  );
+  const navigateNextColumn = (0, import_react17.useCallback)(() => {
+    navigateColumn({ moveBy: 1 });
+  }, [navigateColumn]);
+  const navigatePrevColumn = (0, import_react17.useCallback)(() => {
+    navigateColumn({ moveBy: -1 });
+  }, [navigateColumn]);
+  const handleSaveCalculatedColumn = (0, import_react17.useCallback)(() => {
+    onCreateCalculatedColumn(column);
+  }, [column, onCreateCalculatedColumn]);
+  const handleCancelEdit = (0, import_react17.useCallback)(() => {
+    if (columnProp.name === "::") {
+      onCancelCreateColumn();
+    } else {
+      if (columnRef.current !== void 0 && columnRef.current !== column) {
+        setColumn(columnRef.current);
+      }
+      setEditMode(false);
+    }
+  }, [column, columnProp.name, onCancelCreateColumn]);
+  return {
+    availableRenderers,
+    editCalculatedColumn: inEditMode,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onCancel: handleCancelEdit,
+    onChange: handleChange,
+    onChangeCalculatedColumnName: handleChangeCalculatedColumnName,
+    onChangeFormatting: handleChangeFormatting,
+    onChangeRendering: handleChangeRendering,
+    onChangeServerDataType: handleChangeServerDataType,
+    onChangeToggleButton: handleChangeToggleButton,
+    onChangeType: handleChangeType,
+    onEditCalculatedColumn: handleEditCalculatedcolumn,
+    onInputCommit: handleInputCommit,
+    onSave: handleSaveCalculatedColumn
+  };
+};
+
+// src/column-settings/ColumnSettingsPanel.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var classBase13 = "vuuColumnSettingsPanel";
+var getColumnLabel2 = (column) => {
+  const { name: name2, label } = column;
+  if ((0, import_vuu_utils22.isCalculatedColumn)(name2)) {
+    return label != null ? label : (0, import_vuu_utils22.getCalculatedColumnName)(column);
+  } else {
+    return label != null ? label : name2;
+  }
+};
+var ColumnSettingsPanel = ({
+  column: columnProp,
+  onCancelCreateColumn,
+  onConfigChange,
+  onCreateCalculatedColumn,
+  tableConfig,
+  vuuTable
+}) => {
+  const isNewCalculatedColumn = columnProp.name === "::";
+  const {
+    availableRenderers,
+    editCalculatedColumn,
+    column,
+    navigateNextColumn,
+    navigatePrevColumn,
+    onCancel,
+    onChange,
+    onChangeCalculatedColumnName,
+    onChangeFormatting,
+    onChangeRendering,
+    onChangeServerDataType,
+    onChangeToggleButton,
+    onChangeType,
+    onEditCalculatedColumn,
+    onInputCommit,
+    onSave
+  } = useColumnSettings({
+    column: columnProp,
+    onCancelCreateColumn,
+    onConfigChange,
+    onCreateCalculatedColumn,
+    tableConfig
+  });
+  const {
+    serverDataType,
+    align = (0, import_vuu_utils22.getDefaultAlignment)(serverDataType),
+    pin,
+    width
+  } = column;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx7.default)(classBase13, {
+        [`${classBase13}-editing`]: editCalculatedColumn
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `${classBase13}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnNameLabel, { column, onClick: onEditCalculatedColumn }) }),
+        editCalculatedColumn ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ColumnExpressionPanel,
+          {
+            column,
+            onChangeName: onChangeCalculatedColumnName,
+            onChangeServerDataType,
+            tableConfig,
+            vuuTable
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.FormField, { "data-field": "column-label", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.FormFieldLabel, { children: "Column Label" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_vuu_ui_controls7.VuuInput,
+            {
+              className: "vuuInput",
+              "data-embedded": true,
+              onChange,
+              onCommit: onInputCommit,
+              value: getColumnLabel2(column)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.FormField, { "data-field": "column-width", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.FormFieldLabel, { children: "Column Width" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_vuu_ui_controls7.VuuInput,
+            {
+              className: "vuuInput",
+              "data-embedded": true,
+              onChange,
+              value: width,
+              onCommit: onInputCommit
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.FormField, { "data-field": "column-alignment", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.FormFieldLabel, { children: "Alignment" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.ToggleButtonGroup, { onChange: onChangeToggleButton, value: align, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "left", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "align-left", size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "right", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "align-right", size: 16 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.FormField, { "data-field": "column-pin", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.FormFieldLabel, { children: "Pin Column" }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core8.ToggleButtonGroup, { onChange: onChangeToggleButton, value: pin != null ? pin : "", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "left", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "pin-left", size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "floating", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "pin-float", size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "right", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "pin-right", size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core8.ToggleButton, { value: "", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_vuu_ui_controls7.Icon, { name: "cross-circle", size: 16 }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ColumnFormattingPanel,
+          {
+            availableRenderers,
+            column,
+            onChangeFormatting,
+            onChangeRendering,
+            onChangeColumnType: onChangeType
+          }
+        ),
+        editCalculatedColumn ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "vuuColumnSettingsPanel-buttonBar", "data-align": "right", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_core8.Button,
+            {
+              className: `${classBase13}-buttonCancel`,
+              onClick: onCancel,
+              tabIndex: -1,
+              children: "cancel"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_core8.Button,
+            {
+              className: `${classBase13}-buttonSave`,
+              onClick: onSave,
+              variant: "cta",
+              children: "save"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            className: `${classBase13}-buttonBar`,
+            "data-align": isNewCalculatedColumn ? "right" : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_core8.Button,
+                {
+                  className: `${classBase13}-buttonNavPrev`,
+                  variant: "secondary",
+                  "data-icon": "arrow-left",
+                  onClick: navigatePrevColumn,
+                  children: "PREVIOUS"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_core8.Button,
+                {
+                  className: `${classBase13}-buttonNavNext`,
+                  variant: "secondary",
+                  "data-icon": "arrow-right",
+                  onClick: navigateNextColumn,
+                  children: "NEXT"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/datasource-stats/DatasourceStats.tsx
+var import_clsx8 = __toESM(require("clsx"), 1);
+var import_react18 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var classBase14 = "vuuDatasourceStats";
+var numberFormatter = new Intl.NumberFormat();
+var DataSourceStats = ({
+  className: classNameProp,
+  dataSource
+}) => {
+  const [range, setRange] = (0, import_react18.useState)(dataSource.range);
+  const [size, setSize] = (0, import_react18.useState)(dataSource.size);
+  (0, import_react18.useEffect)(() => {
+    setSize(dataSource.size);
+    dataSource.on("resize", setSize);
+    dataSource.on("range", setRange);
+    return () => {
+      dataSource.removeListener("resize", setSize);
+      dataSource.removeListener("range", setRange);
+    };
+  }, [dataSource]);
+  const className = (0, import_clsx8.default)(classBase14, classNameProp);
+  const from = numberFormatter.format(range.from + 1);
+  const to = numberFormatter.format(Math.min(range.to, size));
+  const value = numberFormatter.format(size);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase14}-label`, children: "Row count" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase14}-range`, children: from }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "-" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase14}-range`, children: to }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "of" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `${classBase14}-size`, children: value })
+  ] });
+};
+
+// src/table-settings/TableSettingsPanel.tsx
+var import_core9 = require("@salt-ds/core");
+
+// src/table-settings/useTableSettings.ts
+var import_vuu_table = require("@vuu-ui/vuu-table");
+var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
+var import_react19 = require("react");
+var sortOrderFromAvailableColumns = (availableColumns, columns) => {
+  const sortedColumns = [];
+  for (const { name: name2 } of availableColumns) {
+    const column = columns.find((col) => col.name === name2);
+    if (column) {
+      sortedColumns.push(column);
+    }
+  }
+  return sortedColumns;
+};
+var buildColumnItems = (availableColumns, configuredColumns) => {
+  return availableColumns.map(({ name: name2, serverDataType }) => {
+    const configuredColumn = configuredColumns.find((col) => col.name === name2);
+    return {
+      hidden: configuredColumn == null ? void 0 : configuredColumn.hidden,
+      isCalculated: (0, import_vuu_utils23.isCalculatedColumn)(name2),
+      label: configuredColumn == null ? void 0 : configuredColumn.label,
+      name: name2,
+      serverDataType,
+      subscribed: configuredColumn !== void 0
+    };
+  });
+};
+var useTableSettings = ({
+  availableColumns: availableColumnsProp,
+  onConfigChange,
+  onDataSourceConfigChange,
+  tableConfig: tableConfigProp
+}) => {
+  const [{ availableColumns, tableConfig }, setColumnState] = (0, import_react19.useState)({
+    availableColumns: availableColumnsProp,
+    tableConfig: tableConfigProp
+  });
+  const columnItems = (0, import_react19.useMemo)(
+    () => buildColumnItems(availableColumns, tableConfig.columns),
+    [availableColumns, tableConfig.columns]
+  );
+  const handleMoveListItem = (0, import_react19.useCallback)(
+    (fromIndex, toIndex) => {
+      setColumnState((state) => {
+        const newAvailableColumns = (0, import_vuu_utils23.moveItem)(
+          state.availableColumns,
+          fromIndex,
+          toIndex
+        );
+        const newColumns = sortOrderFromAvailableColumns(
+          newAvailableColumns,
+          tableConfig.columns
+        );
+        return {
+          availableColumns: newAvailableColumns,
+          tableConfig: {
+            ...state.tableConfig,
+            columns: newColumns
+          }
+        };
+      });
+    },
+    [tableConfig.columns]
+  );
+  const handleColumnChange = (0, import_react19.useCallback)(
+    (name2, property, value) => {
+      const columnItem = columnItems.find((col) => col.name === name2);
+      if (property === "subscribed") {
+        if (columnItem == null ? void 0 : columnItem.subscribed) {
+          const subscribedColumns = tableConfig.columns.filter((col) => col.name !== name2).map((col) => col.name);
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: {
+              ...tableConfig,
+              columns: tableConfig.columns.filter(
+                (0, import_vuu_utils23.subscribedOnly)(subscribedColumns)
+              )
+            }
+          }));
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        } else {
+          const newConfig = {
+            ...tableConfig,
+            columns: (0, import_vuu_utils23.addColumnToSubscribedColumns)(
+              tableConfig.columns,
+              availableColumns,
+              name2
+            )
+          };
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+          const subscribedColumns = newConfig.columns.map((col) => col.name);
+          onDataSourceConfigChange({
+            columns: subscribedColumns
+          });
+        }
+      } else if (columnItem == null ? void 0 : columnItem.subscribed) {
+        const column = tableConfig.columns.find((col) => col.name === name2);
+        if (column) {
+          const newConfig = (0, import_vuu_table.updateTableConfig)(tableConfig, {
+            type: "column-prop",
+            property,
+            column,
+            value
+          });
+          setColumnState((state) => ({
+            ...state,
+            tableConfig: newConfig
+          }));
+        }
+      }
+    },
+    [availableColumns, columnItems, onDataSourceConfigChange, tableConfig]
+  );
+  const handleChangeColumnLabels = (0, import_react19.useCallback)((evt) => {
+    const button = (0, import_vuu_utils23.queryClosest)(evt.target, "button");
+    if (button) {
+      const value = parseInt(button.value);
+      const columnFormatHeader = value === 0 ? void 0 : value === 1 ? "capitalize" : "uppercase";
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnFormatHeader
+        }
+      }));
+    }
+  }, []);
+  const handleChangeTableAttribute = (0, import_react19.useCallback)(
+    (evt) => {
+      const button = (0, import_vuu_utils23.queryClosest)(evt.target, "button");
+      if (button) {
+        const { ariaPressed, value } = button;
+        console.log({ ariaPressed, value, button });
+        setColumnState((state) => ({
+          ...state,
+          tableConfig: {
+            ...state.tableConfig,
+            [value]: ariaPressed !== "true"
+          }
+        }));
+      }
+    },
+    []
+  );
+  const handleCommitColumnWidth = (0, import_react19.useCallback)((_, value) => {
+    const columnDefaultWidth = parseInt(value);
+    if (!isNaN(columnDefaultWidth)) {
+      setColumnState((state) => ({
+        ...state,
+        tableConfig: {
+          ...state.tableConfig,
+          columnDefaultWidth
+        }
+      }));
+    }
+    console.log({ value });
+  }, []);
+  (0, import_vuu_utils23.useLayoutEffectSkipFirst)(() => {
+    onConfigChange == null ? void 0 : onConfigChange(tableConfig);
+  }, [onConfigChange, tableConfig]);
+  const columnLabelsValue = tableConfig.columnFormatHeader === void 0 ? 0 : tableConfig.columnFormatHeader === "capitalize" ? 1 : 2;
+  return {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels: handleChangeColumnLabels,
+    onChangeTableAttribute: handleChangeTableAttribute,
+    onColumnChange: handleColumnChange,
+    onCommitColumnWidth: handleCommitColumnWidth,
+    onMoveListItem: handleMoveListItem,
+    tableConfig
+  };
+};
+
+// src/table-settings/TableSettingsPanel.tsx
+var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
+var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var classBase15 = "vuuTableSettingsPanel";
+var TableSettingsPanel = ({
+  allowColumnLabelCase = true,
+  allowColumnDefaultWidth = true,
+  allowGridRowStyling = true,
+  availableColumns,
+  onAddCalculatedColumn,
+  onConfigChange,
+  onDataSourceConfigChange,
+  onNavigateToColumn,
+  tableConfig: tableConfigProp
+}) => {
+  var _a, _b, _c;
+  const {
+    columnItems,
+    columnLabelsValue,
+    onChangeColumnLabels,
+    onChangeTableAttribute,
+    onColumnChange,
+    onCommitColumnWidth,
+    onMoveListItem,
+    tableConfig
+  } = useTableSettings({
+    availableColumns,
+    onConfigChange,
+    onDataSourceConfigChange,
+    tableConfig: tableConfigProp
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: classBase15, children: [
+    allowColumnLabelCase || allowColumnDefaultWidth || allowGridRowStyling ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `${classBase15}-header`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Column Settings" }) }) : null,
+    allowColumnDefaultWidth ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.FormFieldLabel, { children: "Column Width" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        import_vuu_ui_controls9.VuuInput,
+        {
+          className: "vuuInput",
+          "data-embedded": true,
+          onCommit: onCommitColumnWidth
+        }
+      )
+    ] }) : null,
+    allowColumnLabelCase ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.FormFieldLabel, { children: "Column Labels" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        import_core9.ToggleButtonGroup,
+        {
+          className: "vuuToggleButtonGroup",
+          onChange: onChangeColumnLabels,
+          value: columnLabelsValue,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.ToggleButton, { className: "vuuIconToggleButton", value: 0, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "text-strikethrough", size: 48 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.ToggleButton, { className: "vuuIconToggleButton", value: 1, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "text-Tt", size: 48 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.ToggleButton, { className: "vuuIconToggleButton", value: 2, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "text-T", size: 48 }) })
+          ]
+        }
+      )
+    ] }) : null,
+    allowGridRowStyling ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core9.FormField, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.FormFieldLabel, { children: "Grid separators" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "saltToggleButtonGroup vuuStateButtonGroup saltToggleButtonGroup-horizontal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_core9.ToggleButton,
+          {
+            selected: (_a = tableConfig.zebraStripes) != null ? _a : false,
+            onChange: onChangeTableAttribute,
+            value: "zebraStripes",
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "row-striping", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_core9.ToggleButton,
+          {
+            selected: (_b = tableConfig.rowSeparators) != null ? _b : false,
+            onChange: onChangeTableAttribute,
+            value: "rowSeparators",
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "row-lines", size: 16 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          import_core9.ToggleButton,
+          {
+            selected: (_c = tableConfig.columnSeparators) != null ? _c : false,
+            onChange: onChangeTableAttribute,
+            value: "columnSeparators",
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vuu_ui_controls8.Icon, { name: "col-lines", size: 16 })
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      ColumnList,
+      {
+        columnItems,
+        onChange: onColumnChange,
+        onMoveListItem,
+        onNavigateToColumn
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `${classBase15}-calculatedButtonbar`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core9.Button, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `${classBase15}-calculatedLabel`, children: "Add calculated column" })
+    ] })
+  ] });
+};
 //# sourceMappingURL=index.js.map