const MODE_MAP={text:["contains","equals","starts","ends"],textarea:["contains","equals","starts","ends"],number:["=",">","<","between"],date:["=",">","<","between"],select:["contains","equals"],TagsInput:["contains","equals","starts","ends"]},MODE_ICONS={contains:"bi-search",equals:"bi-distribute-vertical",starts:"bi-align-start",ends:"bi-align-end","=":"bi-calculator",">":"bi-chevron-right","<":"bi-chevron-left",between:"bi-arrows-expand"},DataGridConfig={_fieldTypes:new Map,registerFieldType:e=>{DataGridConfig._fieldTypes.set(e.value,e)},getFieldTypes:()=>Array.from(DataGridConfig._fieldTypes.values())},DB_EDITOR_TYPE_MAP={i:"number",ui:"number",bi:"number",ubi:"number",ti:"number",f:"number",ff:"number",b:"switch",d:"date",dt:"datetime",t:"textarea"},getDataKey=e=>e?.name,getEditorType=e=>e?.settings?.type||DB_EDITOR_TYPE_MAP[e?.type]||"text",SYSTEM_FIELDS=[{id:"__system_id",name:"id",type:"v100",system:!0,settings:{label:"ID",width:130}},{id:"__system_creator",name:"creator",type:"v100",system:!0,settings:{label:"Creator",width:120}},{id:"__system_createTime",name:"createTime",type:"bi",system:!0,settings:{label:"Create Time",width:150}},{id:"__system_updater",name:"updater",type:"v100",system:!0,settings:{label:"Updater",width:120}},{id:"__system_updateTime",name:"updateTime",type:"bi",system:!0,settings:{label:"Update Time",width:150}}];DataGridConfig.registerFieldType({value:"text",label:"{#Text#}",typeForDB:"v100",schema:[{name:"placeholder",label:"Placeholder",type:"text",if:'this.data.user_type=="text"'}]}),DataGridConfig.registerFieldType({value:"number",label:"{#Number#}",typeForDB:"ff",schema:[{name:"decimals",label:"Decimals",type:"number",setting:{min:0,max:10},if:'this.data.user_type=="number"'},{name:"prefix",label:"Prefix (e.g. $)",type:"text",if:'this.data.user_type=="number"'},{name:"suffix",label:"Suffix (e.g. %)",type:"text",if:'this.data.user_type=="number"'},{name:"thousandSep",label:"Thousand Sep",type:"switch",if:'this.data.user_type=="number"'}],formatter:(e,t)=>{if(null==e||""===e)return"";let i=Number(e);if(isNaN(i))return e;const n=t.settings||{};void 0!==n.decimals&&(i=i.toFixed(n.decimals));let a=String(i);if(n.thousandSep){const e=a.split(".");e[0]=e[0].replace(/\B(?=(\d{3})+(?!\d))/g,","),a=e.join(".")}return(n.prefix||"")+a+(n.suffix||"")}}),DataGridConfig.registerFieldType({value:"select",label:"{#Single Select#}",typeForDB:"v100",schema:[{name:"options_str",label:"Options",type:"textarea",setting:{rows:3,placeholder:"Label:Value per line"},if:'this.data.user_type=="select"'}],formatter:(e,t)=>{if(null==e||""===e)return"";const i=(t.settings?.options||[]).find(t=>"object"==typeof t?t.value==e:t==e);return i?"object"==typeof i?i.label:i:e}}),DataGridConfig.registerFieldType({value:"checkbox",label:"{#Multi Select#}",typeForDB:"v4096",schema:[{name:"options_str",label:"Options",type:"textarea",setting:{rows:3,placeholder:"Label:Value per line"},if:'this.data.user_type=="checkbox"'}],formatter:(e,t)=>{if(!Array.isArray(e))return null==e?"":String(e);const i=t.settings?.options||[];return e.map(e=>{const t=i.find(t=>"object"==typeof t?t.value==e:t==e);return t?"object"==typeof t?t.label:t:e}).join(", ")}}),DataGridConfig.registerFieldType({value:"switch",label:"{#Switch#}",typeForDB:"b",schema:[{name:"labelOn",label:"Label On",type:"text",if:'this.data.user_type=="switch"'},{name:"labelOff",label:"Label Off",type:"text",if:'this.data.user_type=="switch"'}],formatter:(e,t)=>{const i=t.settings||{};return e?i.labelOn||"Yes":i.labelOff||"No"}}),DataGridConfig.registerFieldType({value:"datetime",label:"{#DateTime#}",typeForDB:"dt",schema:[{name:"format",label:"Format",type:"text",setting:{placeholder:"YYYY-MM-DD"},if:'this.data.user_type=="datetime"'}]}),DataGridConfig.registerFieldType({value:"textarea",label:"{#Long Text#}",typeForDB:"t",schema:[{name:"placeholder",label:"Placeholder",type:"text",if:'this.data.user_type=="textarea"'}]});const getDefaultDbType=(e,t=0)=>{const i=DataGridConfig._fieldTypes.get(e);return"number"===e?Number(t)>0?"ff":"bi":i?.typeForDB||"v100"},createPerfMonitor=()=>{let e=!!globalThis.__DT_PERF_MODE__;const t={refreshTime:0,refreshCount:0,scrollCount:0,totalNodes:0};return e&&!globalThis.__statePerformanceTelemetry&&(globalThis.__statePerformanceTelemetry={scanCount:0,reuseCount:0,moveCount:0}),{get stats(){return t},enable:()=>{e=!0},disable:()=>{e=!1},onScroll:()=>{e&&t.scrollCount++},startFrame:()=>e?{start:performance.now(),scan:globalThis.__statePerformanceTelemetry?.scanCount||0,move:globalThis.__statePerformanceTelemetry?.moveCount||0,reuse:globalThis.__statePerformanceTelemetry?.reuseCount||0}:null,endFrame:(i,n)=>{if(!e||!i)return;t.refreshCount++,t.totalNodes+=n;const a=performance.now()-i.start;t.refreshTime+=a;const l=globalThis.__statePerformanceTelemetry;if(l){const e=l.scanCount-i.scan,t=l.moveCount-i.move,s=l.reuseCount-i.reuse;(e>0||a>2)&&console.log(`[DataGrid Frame] Time: ${a.toFixed(2)}ms, Scans: ${e}, Moves: ${t}, Reuses: ${s}, Rows: ${n}`)}}}},createScrollManager=(e,t,i)=>{const n=globalThis.VirtualScroll({itemHeight:40});let a=null;const l=(e=!1)=>{if(!a)return;const l=n.calc(a,t.list);if(l){if(!e&&t.prevHeight===l.prevHeight&&t.postHeight===l.postHeight&&t._listStartIndex===l.listStartIndex&&t._renderedList.length===l.renderedList.length)return;Object.assign(t,{prevHeight:l.prevHeight,postHeight:l.postHeight,_listStartIndex:l.listStartIndex,_renderedList:l.renderedList}),i?.(l.renderedList.length,e)}};return{init:()=>{a=e.querySelector(".dt-main")},reset:i=>{t._listStartIndex=0;const s=Array.isArray(i)?i:[];n.reset(s,a||e),Array.isArray(i)&&t.list===i&&n.init(i,()=>l(!0))},refresh:l,onScroll:()=>l(!1)}},createSelectionManager=(e,t)=>{let i=null,n=null,a=[];const l=(e,t)=>!!(i&&e>=i.minRow&&e<=i.maxRow&&t>=i.minCol&&t<=i.maxCol)||a.some(i=>e>=i.minRow&&e<=i.maxRow&&t>=i.minCol&&t<=i.maxCol);let s=!1;const o=()=>{if(globalThis.__DT_FEATURES__&&!globalThis.__DT_FEATURES__.selection)return;let n=1/0,o=-1/0;i&&(n=Math.min(n,i.minRow),o=Math.max(o,i.maxRow)),a.forEach(e=>{n=Math.min(n,e.minRow),o=Math.max(o,e.maxRow)});const r=n!==1/0;if(!r&&!s)return;s=r;const d=e.querySelector(".dt-body");if(!d)return;d.querySelectorAll(".dt-body-row").forEach(e=>{const i=(e._ref?.rIdx??-1)+t._listStartIndex,a=e.querySelectorAll(".dt-cell");!r||i<n||i>o?a.forEach(e=>e.classList.remove("dt-cell-selected")):a.forEach((e,t)=>{l(i,t)?e.classList.add("dt-cell-selected"):e.classList.remove("dt-cell-selected")})})},r=()=>{let e=0;i&&(e+=i.maxRow-i.minRow+1),a.forEach(t=>e+=t.maxRow-t.minRow+1),t.selectedRowCount=e},d=(e=!1)=>{e||(i=null,n=null,a=[],o(),r())},c=()=>{if(!i)return null;let e=i.minRow,t=i.maxRow,n=i.minCol,l=i.maxCol;return a.forEach(i=>{e=Math.min(e,i.minRow),t=Math.max(t,i.maxRow),n=Math.min(n,i.minCol),l=Math.max(l,i.maxCol)}),{minRow:e,maxRow:t,minCol:n,maxCol:l}};return{applySelectionUI:o,clearAllActive:d,startSelect:(s,c,m)=>{const p=l(s,c),u=i&&(i.minRow!==i.maxRow||i.minCol!==i.maxCol)||a.length>0;m.shiftKey&&n?i={minRow:Math.min(n.row,s),maxRow:Math.max(n.row,s),minCol:Math.min(n.col,c),maxCol:Math.max(n.col,c)}:(!p||m.ctrlKey||m.metaKey?(m.ctrlKey||m.metaKey?i&&!p&&a.push(i):d(),n={row:s,col:c},i={minRow:s,maxRow:s,minCol:c,maxCol:c}):u||(e._potentialCancel={row:s,col:c}),t.isSelecting=!0),o(),r(),e.focus()},updateSelect:(a,l)=>{t.isSelecting&&n&&(i={minRow:Math.min(n.row,a),maxRow:Math.max(n.row,a),minCol:Math.min(n.col,l),maxCol:Math.max(n.col,l)},e._potentialCancel=null,o(),r())},endSelect:()=>{if(e._potentialCancel){const{row:t,col:i}=e._potentialCancel;l(t,i)&&d(),e._potentialCancel=null}t.isSelecting=!1},getSelectionBounds:c,copy:async()=>{const e=c();if(!e)return;const i=t.list.slice(e.minRow,e.maxRow+1).map(i=>t._displayFields.slice(e.minCol,e.maxCol+1).map(e=>{let t=String(i[getDataKey(e)]??"");return(t.includes("\t")||t.includes("\n")||t.includes('"'))&&(t='"'+t.replace(/"/g,'""')+'"'),t}).join("\t")).join("\n");await navigator.clipboard.writeText(i)},paste:async()=>{try{const i=await navigator.clipboard.readText();if(!i)return;const n=c();if(!n)return;const a=i.split(/\r?\n/).filter(e=>e.length>0).map(e=>{const t=[];let i="",n=!1;for(let a=0;a<e.length;a++){const l=e[a];'"'===l?n&&'"'===e[a+1]?(i+='"',a++):n=!n:"\t"!==l||n?i+=l:(t.push(i),i="")}return t.push(i),t});let{minRow:l,minCol:s,maxRow:o,maxCol:r}=n;minRow===o&&minCol===r&&(o=1/0,r=1/0);const d=e.querySelector(".dt-body");d&&Array.from(d.childNodes).filter(e=>e.classList?.contains("dt-body-row"));let m=!1;a.forEach((e,i)=>{const n=l+i;if(n>o||n>=t.list.length)return;const a=t.list[n];let d=!1;e.forEach((e,i)=>{const n=s+i;if(n>r||n>=t._displayFields.length)return;const l=t._displayFields[n];l.system||(a[getDataKey(l)]=e,d=!0)}),d&&(m=!0)}),m&&(t.list=[...t.list])}catch(e){console.error("Paste Error:",e)}}}};globalThis.Component.register("DataGrid",e=>{e.state||(e.state=globalThis.NewState({}));const t=e.state;e.editable=e.hasAttribute("editable"),e.getDataKey=getDataKey,e.apiUrl=e.getAttribute("api")||"",Object.assign(t,{list:[],fields:[],_displayFields:[],_renderedList:[],prevHeight:0,postHeight:0,_listStartIndex:0,selectedRowCount:0,_originalList:[],sortConfig:{fieldId:null,direction:null},filterConfig:{},activeFieldId:null,activeField:null,activeModes:[],_columnStats:{},_internalUpdate:!1,_appliedHash:"",_fieldsDirty:!1,_masterCellNodes:null,isDirty:!1,isBulkEdit:null,advancedMode:!1,table:t.table||"",apiLoading:!1,total:0,editable:e.editable});const i=()=>t.advancedMode?[...t.fields,...SYSTEM_FIELDS]:t.fields,n=async(i,n={})=>{if(!e.apiUrl||!t.table)return null;t.apiLoading=!0;try{const a=await globalThis.HTTP.request({url:e.apiUrl,method:"POST",data:{action:i,name:t.table,...n}}),l=a.result;if(!a.ok||!l?.ok)throw new Error(l?.error||a.error||`${i} failed`);return l}catch(e){throw globalThis.Toast?.show(e.message,{type:"danger"}),e}finally{t.apiLoading=!1}},a=()=>{const e=[];Object.entries(t.filterConfig).forEach(([t,n])=>{const a=i().find(e=>e.id===t);if(!a||!n.value&&!n.selectedValues?.length)return;if(n.selectedValues?.length)return void e.push({field:a.name,operator:"in",value:n.selectedValues});const l={equals:"eq","=":"eq",">":"gt","<":"lt",contains:"contains",starts:"startsWith",ends:"endsWith",between:"between"}[n.mode]||"contains";e.push({field:a.name,operator:l,value:"between"===l?[n.value,n.value2]:n.value})});const n=t.sortConfig.fieldId&&i().find(e=>e.id===t.sortConfig.fieldId);return{filter:e,sort:n?[`${n.name} ${"desc"===t.sortConfig.direction?"DESC":"ASC"}`]:[]}};e.load=async({fields:i=!1}={})=>{if(e.apiUrl&&t.table)try{if(i){const e=await n("fields");t.fields=Array.isArray(e.fields)?e.fields:[]}const e=await n("query",{...a(),offset:0,limit:1e3}),l=Array.isArray(e.data)?e.data:Array.isArray(e.list)?e.list:[];t._internalUpdate=!0,t.list=l,t._originalList=[...l],t.total=Number(e.count??l.length),t._internalUpdate=!1,t.isDirty=!1}catch(e){}};const l=createPerfMonitor();t.perf=l.stats;const s=createSelectionManager(e,t),o=createScrollManager(e,t,()=>setTimeout(()=>s.applySelectionUI(),50)),r=e.querySelector(".dt-column-menu");r&&(r._thisObj=e),e.onColumnResizing=(t,i)=>e.style.setProperty(`--w-${t.id}`,i.detail.newSize+"px"),e.onColumnResize=(e,i)=>{const n=t.fields.findIndex(t=>t.id===e.id);-1!==n&&(t.fields[n].width=i.detail.newSize,t.fields=[...t.fields])};let d,c=null;e.format=(e,t)=>{if(t.formatter)return t.formatter(e,t);const i=DataGridConfig._fieldTypes.get(getEditorType(t));return i&&i.formatter?i.formatter(e,t):null==e?"":"object"==typeof e?JSON.stringify(e):String(e)},e.onScroll=()=>{l.onScroll(),o.refresh(),e.hideColumnMenu(),e.hideEditor(!0);const i=e.querySelector(".dt-spacer-prev"),n=e.querySelector(".dt-spacer-post");i&&(i.style.height=(t.prevHeight||0)+"px",i.style.display=t.prevHeight>0?"block":"none"),n&&(n.style.height=(t.postHeight||0)+"px",n.style.display=t.postHeight>0?"block":"none")},e.applySortFilter=(i={})=>{if(t._internalUpdate)return;const n={...t.filterConfig,...i.filters||{}},a=void 0!==i.sort?i.sort?{fieldId:t.activeFieldId,direction:i.sort}:{fieldId:null,direction:null}:t.sortConfig;if(e.apiUrl){const i=t.sortConfig,l=t.filterConfig;t.filterConfig=n,t.sortConfig=a;return void(async()=>{if(t.isDirty&&!await globalThis.Dialog.confirm("Discard unsaved changes and reload data?"))return t.filterConfig=l,void(t.sortConfig=i);await e.load()})()}let l=[...t._originalList];if(Object.entries(n).forEach(([e,i])=>{(i.value||i.selectedValues&&0!==i.selectedValues.length)&&(l=l.filter(n=>{const a=t._displayFields.find(t=>t.id===e),l=n[getDataKey(a)];if(i.selectedValues?.length>0)return i.selectedValues.includes(String(l));const s=String(i.value).toLowerCase(),o=String(l??"").toLowerCase();switch(i.mode){case"contains":return o.includes(s);case"equals":return o===s;case"starts":return o.startsWith(s);case"ends":return o.endsWith(s);case"=":return Number(l)===Number(i.value);case">":return Number(l)>Number(i.value);case"<":return Number(l)<Number(i.value);case"between":return Number(l)>=Number(i.value)&&Number(l)<=Number(i.value2);default:return!0}}))}),a.fieldId&&a.direction){const e=a.fieldId,i="asc"===a.direction?1:-1;l.sort((n,a)=>{const l=t._displayFields.find(t=>t.id===e),s=getDataKey(l);return n[s]==a[s]?0:n[s]>a[s]?i:-i})}t._internalUpdate=!0,t.filterConfig=n,t.sortConfig=a,t.list=l,t._internalUpdate=!1},e.showColumnMenu=(i,n)=>{const a=n.currentTarget,l=e.querySelector(".dt-column-menu");if("block"===l.style.display&&t.activeFieldId===i.id)return e.hideColumnMenu(),void e.applySortFilter();const s=getEditorType(i);t.activeModes=MODE_MAP[s]||(["boolean","switch","checkbox","radio"].includes(s)?[]:MODE_MAP.text),t.filterConfig[i.id]||(t.filterConfig[i.id]={mode:t.activeModes[0]||"contains",value:"",selectedValues:[]}),t.activeField=i,t.activeFieldId=i.id,l.style.display="block";const o=a.closest(".dt-cell").getBoundingClientRect(),r=e.getBoundingClientRect(),d=l.offsetWidth||260;let c=o.right-r.left-d;c<0&&(c=Math.max(0,o.left-r.left)),l.style.left=c+"px",l.style.top=o.bottom-r.top+5+"px";const m=t=>{l.contains(t.target)||a.contains(t.target)||(e.hideColumnMenu(),e.applySortFilter(),document.removeEventListener("mousedown",m))};document.addEventListener("mousedown",m),setTimeout(()=>l.querySelector("input")?.focus(),50)},e.toggleSelectedValue=i=>{const n=t.filterConfig[t.activeFieldId];if(!n)return;const a=n.selectedValues.indexOf(i);-1===a?n.selectedValues.push(i):n.selectedValues.splice(a,1),t.filterConfig={...t.filterConfig},e.applySortFilter()},e.filterOnlyThis=i=>{t.filterConfig[t.activeFieldId]={mode:"contains",value:"",selectedValues:[String(i)]},t.filterConfig={...t.filterConfig},e.applySortFilter()},e.hideColumnMenu=()=>{const t=e.querySelector(".dt-column-menu");t&&(t.style.display="none")},e.setSort=i=>{const n=t.sortConfig.direction===i&&t.sortConfig.fieldId===t.activeFieldId?null:i;e.applySortFilter({sort:n})},e.clearColumnSettings=()=>{t.activeFieldId&&(t.filterConfig={...t.filterConfig,[t.activeFieldId]:{mode:t.activeModes[0]||"contains",value:"",value2:"",selectedValues:[]}},e.applySortFilter())},e._initRow=i=>{const n=i._ref?.item;n&&void 0===n._editingF&&Object.defineProperty(n,"_editingF",{set:t=>{null===t&&e.hideEditor(!0)},configurable:!0}),Array.from(i.children).forEach(e=>{const n=parseInt(e.dataset.fidx);isNaN(n)||(e._ref={...e._ref||i._ref,f:t._displayFields[n],fIdx:n})})},t.__watch("fields",n=>{if(!Array.isArray(n))return;n=i(),t._displayFields=n,t._fieldsDirty=!0,t._masterCellNodes=null,e.style.setProperty("--dt-grid-template",n.map(e=>`var(--w-${e.id}, ${e.settings?.width||e.width||150}px)`).join(" ")),e.style.setProperty("--dt-row-width",n.reduce((e,t)=>e+(t.settings?.width||t.width||150),0)+"px");let a=0;n.forEach(t=>{"left"===(t.settings?.pinned||t.pinned)&&(e.style.setProperty(`--l-${t.id}`,a+"px"),a+=t.settings?.width||t.width||150)});let l=0;[...n].reverse().forEach(t=>{"right"===(t.settings?.pinned||t.pinned)&&(e.style.setProperty(`--r-${t.id}`,l+"px"),l+=t.settings?.width||t.width||150)})}),t.__watch("list",e=>{t._internalUpdate||(t._originalList=[...e||[]],setTimeout(()=>{const e={};t._displayFields.forEach(i=>{const n={};t._originalList.forEach(e=>{const t=e[getDataKey(i)],a=null==t||""===t?"":String(t);n[a]=(n[a]||0)+1}),e[i.id]=Object.entries(n).sort((e,t)=>t[1]-e[1]).slice(0,20).map(([e,t])=>({val:e,count:t}))}),t._columnStats=e},200)),o.init(),o.reset(e)}),t.__watch("advancedMode",()=>{t.fields=[...t.fields],t.list=[...t.list]}),t.__watch("table",t=>{e.apiUrl&&t&&e.load({fields:!0})}),e.apiUrl&&t.table&&setTimeout(()=>e.load({fields:!0})),e.editCell=(t,i,n)=>{const a=e.querySelector(".dt-main"),l=e.querySelector(".dt-editor-overlay"),s=n.getBoundingClientRect(),o=a.getBoundingClientRect();c=n;const r=getEditorType(i),d=l.querySelector("AutoForm");d&&(d.state.schema=[{name:getDataKey(i),label:"",type:r,options:i.settings?.options||i.options,setting:i.settings?.attrs}],d.state.data=globalThis.NewState(globalThis.Util.clone(t)));const m=["textarea","TagsInput","checkbox","radio"].includes(r);let p=s.top-o.top+a.scrollTop-1,u=s.left-o.left+a.scrollLeft-1,f=Math.max(s.width+2,m?300:0);const b=a.scrollWidth-f-5;u>b&&(u=Math.max(0,b)),Object.assign(l.style,{display:"flex",left:u+"px",top:p+"px",width:f+"px",height:"auto",minHeight:s.height+2+"px",maxHeight:Math.max(100,o.height-(s.top-o.top)-5)+"px",overflow:"auto",padding:"0"}),setTimeout(()=>l.querySelector("input, textarea, select, .form-control")?.focus(),30)},e.hideEditor=(i=!0)=>{if(d||(d=e.querySelector(".dt-editor-overlay")),!d||"none"===d.style.display)return;const n=d.querySelector("AutoForm");if(i&&n&&n.data){const e=d.querySelector("input:focus, select:focus, textarea:focus");e&&e.dispatchEvent(new Event("number"===e.type||"SELECT"===e.tagName?"change":"input",{bubbles:!0}));let i=!1;if((n.state.schema||[]).forEach(e=>{const t=c?.closest(".dt-row")?._ref?.item;t&&JSON.stringify(t[e.name])!==JSON.stringify(n.data[e.name])&&(t[e.name]=n.data[e.name],i=!0)}),t.isBulkEdit){const{minRow:e,maxRow:a,fIdx:l}=t.isBulkEdit,s=t._displayFields[l],o=getDataKey(s),r=n.data[o];for(let n=e;n<=a;n++)t.list[n]&&t.list[n][o]!==r&&(t.list[n][o]=r,i=!0)}i&&(t.list=[...t.list],t.isDirty=!0)}d.style.display="none",n&&(n.state.schema=[],n.state.data=globalThis.NewState({}),n.data=null),c=null,t.isBulkEdit=null,e.focus()},e.onMainMouseDown=i=>{const n=i.target.closest(".dt-cell"),a=n?.closest(".dt-row");if(!a||a.classList.contains("dt-header-row"))return;const l=n.dataset.fidx?parseInt(n.dataset.fidx):Array.from(a.querySelectorAll(".dt-cell")).indexOf(n),o=a._ref?.rIdx??Array.from(e.querySelectorAll(".dt-body-row")).indexOf(a);s.startSelect(o+t._listStartIndex,l,i)},e.onMainMouseOver=i=>{if(t.isSelecting){const n=i.target.closest(".dt-cell"),a=n?.closest(".dt-row");if(a&&!a.classList.contains("dt-header-row")){const i=n.dataset.fidx?parseInt(n.dataset.fidx):Array.from(a.querySelectorAll(".dt-cell")).indexOf(n),l=a._ref?.rIdx??Array.from(e.querySelectorAll(".dt-body-row")).indexOf(a);s.updateSelect(l+t._listStartIndex,i)}}},e.onMainDblClick=i=>{if(!e.editable)return;const n=i.target.closest(".dt-cell"),a=n?.closest(".dt-row");if(a&&!a.classList.contains("dt-header-row")){const i=a._ref?.item,l=n.dataset.fidx?parseInt(n.dataset.fidx):Array.from(a.querySelectorAll(".dt-cell")).indexOf(n),o=(a._ref?.rIdx??Array.from(e.querySelectorAll(".dt-body-row")).indexOf(a))+t._listStartIndex;if(i&&t._displayFields[l]&&!t._displayFields[l].system){const a=s.getSelectionBounds();if(a&&o>=a.minRow&&o<=a.maxRow&&l>=a.minCol&&l<=a.maxCol){const e=a.maxRow-a.minRow+1;e>1&&(t.isBulkEdit={...a,fIdx:l},globalThis.UI?.toast&&globalThis.UI.toast(`Bulk Edit: Updating ${e} rows in column "${t._displayFields[l].name}"`,{type:"warning"}))}e.editCell(i,t._displayFields[l],n)}}},e.addRow=()=>{const i={};t.fields.forEach(e=>i[getDataKey(e)]=""),t._originalList.push(i),t.list=[...t._originalList],t.isDirty=!0,setTimeout(()=>{o.reset(t.list),e.querySelector(".dt-main").scrollTop=e.querySelector(".dt-main").scrollHeight},50)},e.deleteSelectedRow=async()=>{const i=s.getSelectionBounds();if(!i)return;const a=i.maxRow-i.minRow+1;if(await globalThis.Dialog.confirm(`Are you sure you want to delete ${a} row(s)?`)){const a=i.minRow,l=i.maxRow,o=t.list.slice(a,l+1);if(e.apiUrl)try{await n("remove",{data:o})}catch(e){return}t.list=t.list.filter((e,t)=>!(t>=a&&t<=l)),t._originalList=t._originalList.filter(e=>!o.includes(e)),t.isDirty=!e.apiUrl,s.clearAllActive(),e.dispatchEvent(new CustomEvent("remove",{detail:{items:o}}))}},e.saveChanges=async()=>{if(e.apiUrl)try{await n("save",{data:t._originalList})}catch(e){return}e.dispatchEvent(new CustomEvent("save",{detail:{list:t._originalList,fields:t.fields}})),t.isDirty=!1};const m=()=>{const e=globalThis.DataGrid.getFieldTypes(),i=[{name:"name",label:"Field Name",type:"text",setting:{required:!0,placeholder:"e.g. role"}},{name:"user_type",label:"Field Type",type:"select",options:e.map(e=>({label:e.label,value:e.value}))}],n=e.reduce((e,t)=>e.concat(t.schema||[]),[]),a=t.advancedMode?[{type:"divider",label:"System Information"},{name:"id",label:"Field ID",type:"label"},{name:"tableID",label:"Table ID",type:"label"},{name:"creator",label:"Creator",type:"label"},{name:"createTime",label:"Create Time",type:"label"},{name:"updater",label:"Updater",type:"label"},{name:"updateTime",label:"Update Time",type:"label"}]:[];return i.concat(n,[{type:"divider",label:"Advanced Settings"},{name:"db_type",label:"Database Type",type:"text",setting:{required:!0,placeholder:"e.g. v100, ff, dt"}},{name:"isIndex",label:"Index",type:"switch"},{name:"memo",label:"Memo",type:"text"}],a)},p=e=>{if(e)return e.split("\n").map(e=>e.trim()).filter(Boolean).map(e=>{const t=e.indexOf(":");return t>-1?{label:e.slice(0,t).trim(),value:e.slice(t+1).trim()}:e})},u=(e,t)=>{setTimeout(()=>{const i=e.querySelector('select[name="user_type"]'),n=e.querySelector('input[name="db_type"]'),a=e.querySelector('input[name="decimals"]'),l=()=>{t._dbTypeAuto&&(t.db_type=getDefaultDbType(t.user_type,t.decimals))};i?.addEventListener("change",()=>{t._dbTypeAuto=!0,l()}),n?.addEventListener("input",()=>{t._dbTypeAuto=!1}),a?.addEventListener("input",l)})};e.addField=async()=>{e.hideColumnMenu();const i=globalThis.NewState({id:"c"+Date.now().toString().slice(-4),tableID:t.fields[0]?.tableID||"",creator:"",createTime:"",updater:"",updateTime:"",name:"New Field",user_type:"text",db_type:getDefaultDbType("text"),_dbTypeAuto:!0,decimals:0,isIndex:!1,memo:"",options_str:""}),a=e.querySelector(`Modal[id="${e.id}_field_modal"]`);if(!a)return;Object.assign(a.state,{title:"Add Field",buttons:["Cancel","Save"]});const l=a.querySelector("AutoForm");l&&(l.state.data=i,l.state.schema=m(),u(l,i)),a.show();if(2===await new Promise(e=>a.addEventListener("change",t=>e(a.result),{once:!0}))){const a=i.db_type?.trim()||getDefaultDbType(i.user_type,i.decimals),l={id:i.id,tableID:i.tableID,name:i.name,memo:i.memo,isIndex:!!i.isIndex,type:a,settings:{type:i.user_type,decimals:i.decimals,prefix:i.prefix,suffix:i.suffix,thousandSep:i.thousandSep,labelOn:i.labelOn,labelOff:i.labelOff,format:i.format,placeholder:i.placeholder,options:p(i.options_str)}};if(e.apiUrl)try{await n("setField",{fields:[l]})}catch(e){return}t.fields=[...t.fields,l],t.isDirty=!e.apiUrl,e.dispatchEvent(new CustomEvent("savefields",{detail:t.fields})),t.list=[...t.list]}},e.editField=async()=>{if(!t.activeField)return;e.hideColumnMenu();const i=t.activeField,a=i.settings||{},l=globalThis.NewState({id:i.id,tableID:i.tableID||"",creator:i.creator||"",createTime:i.createTime||"",updater:i.updater||"",updateTime:i.updateTime||"",name:i.name,memo:i.memo||"",isIndex:!!i.isIndex,user_type:getEditorType(i),db_type:i.type||"",_dbTypeAuto:!0,decimals:a.decimals||0,prefix:a.prefix||"",suffix:a.suffix||"",thousandSep:!!a.thousandSep,labelOn:a.labelOn||"",labelOff:a.labelOff||"",format:a.format||"",placeholder:a.placeholder||"",options_str:(s=a.options,s?s.map(e=>"object"==typeof e?`${e.label}:${e.value}`:e).join("\n"):"")});var s;const o=e.querySelector(`Modal[id="${e.id}_field_modal"]`);if(!o)return;Object.assign(o.state,{title:"Edit Field",buttons:["Cancel","Save"]});const r=o.querySelector("AutoForm");r&&(r.state.data=l,r.state.schema=m(),u(r,l)),o.show();if(2===await new Promise(e=>o.addEventListener("change",t=>e(o.result),{once:!0}))){const a=t.fields.findIndex(e=>e.id===i.id);if(-1!==a){const s=l.db_type?.trim()||(l.user_type===getEditorType(i)?i.type:getDefaultDbType(l.user_type,l.decimals)),o={...i,name:l.name,memo:l.memo,isIndex:!!l.isIndex,type:s,settings:{...i.settings,type:l.user_type,decimals:l.decimals,prefix:l.prefix,suffix:l.suffix,thousandSep:l.thousandSep,labelOn:l.labelOn,labelOff:l.labelOff,format:l.format,placeholder:l.placeholder,options:p(l.options_str)}};if(e.apiUrl)try{await n("setField",{fields:[o]})}catch(e){return}t.fields[a]=o,t.fields=[...t.fields],t.isDirty=!e.apiUrl,e.dispatchEvent(new CustomEvent("savefields",{detail:t.fields})),t.list=[...t.list]}}},e.deleteField=async()=>{if(t.activeField&&(e.hideColumnMenu(),!t.activeField.system&&await globalThis.Dialog.confirm(`Are you sure you want to delete field "${t.activeField.name}"?`))){const i=t.fields.findIndex(e=>e.id===t.activeField.id);if(-1!==i){if(e.apiUrl)try{await n("removeField",{fields:[t.activeField]})}catch(e){return}t.fields.splice(i,1),t.fields=[...t.fields],t.isDirty=!e.apiUrl,e.dispatchEvent(new CustomEvent("savefields",{detail:t.fields})),t.list=[...t.list]}}},window.addEventListener("mouseup",s.endSelect),document.addEventListener("mousedown",t=>{const i=e.querySelector(".dt-editor-overlay"),n=e.querySelector(".dt-column-menu");"none"===i?.style.display||i.contains(t.target)||setTimeout(()=>e.hideEditor(!0)),e.contains(t.target)||i?.contains(t.target)||n?.contains(t.target)||s.clearAllActive()}),e.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&"c"===e.key.toLowerCase()&&(e.preventDefault(),s.copy()),(e.ctrlKey||e.metaKey)&&"v"===e.key.toLowerCase()&&(e.preventDefault(),s.paste())}),t._MODE_ICONS=MODE_ICONS},globalThis.Util.makeDom('\n<div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-visible" style="position:relative; user-select:none; outline: none; min-height: 0" tabindex="0">\n        <div class="dt-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()" \n                $onmousedown="this.onMainMouseDown(event)" $onmouseover="this.onMainMouseOver(event)" $ondblclick="this.onMainDblClick(event)"\n                style="overflow-anchor:none; min-height: 0">\n                <div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">\n                        <div class="dt-header-row fw-bold text-muted small">\n                                <template $each="this.state?._displayFields || []">\n                                        <div $data-id="item.id" $class="dt-cell dt-col border-end d-flex align-items-center header-cell ${(item.settings?.pinned || item.pinned) ? \'pinned-\' + (item.settings?.pinned || item.pinned) : \'\'}" $style="((item.settings?.pinned || item.pinned) ? \'position: sticky; z-index: 11; background-color: inherit; \' : \'position:relative; \') + \'padding: 0; \' + ((item.settings?.pinned || item.pinned) === \'left\' ? \'left: var(--l-\' + item.id + \'); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);\' : ((item.settings?.pinned || item.pinned) === \'right\' ? \'right: var(--r-\' + item.id + \'); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);\' : \'\'))">\n                                                <div class="d-flex align-items-center overflow-hidden flex-grow-1 h-100 px-2 cursor-pointer" $onclick="this.showColumnMenu(item, event)">\n                                                        <i $if="this.state?.filterConfig?.[item.id] && (this.state.filterConfig[item.id].value || this.state.filterConfig[item.id].selectedValues?.length)" class="bi bi-filter me-1 text-primary"></i>\n                                                        <i $if="this.state?.sortConfig?.fieldId === item.id && this.state.sortConfig.direction" $class="bi bi-sort-${this.state.sortConfig.direction === \'asc\' ? \'down\' : \'up-alt\'} me-1 text-primary"></i>\n                                                        <span $text="item.settings?.label || item.name" class="text-truncate flex-grow-1"></span>\n                                                </div>\n                                                <button class="btn btn-xs btn-link text-muted p-0 border-0 me-1 header-menu-btn" $onclick="this.showColumnMenu(item, event)"><i class="bi bi-chevron-down"></i></button>\n                                                <Resizer $.target="thisNode.parentElement" style="position:absolute; right:0; top:0; bottom:0; width:4px; z-index:10" min="50" max="1000" $onresizing="this.onColumnResizing(item, event)" $onresize="this.onColumnResize(item, event)"></Resizer>\n                                        </div>\n                                </template>\n                        </div>\n                </div>\n                <div class="dt-body" style="position:relative">\n                        <div class="dt-spacer-prev flex-shrink-0" style="display:none"></div>\n                        <template $each="this.state?._renderedList || []" key="id" index="rIdx">\n                                <div class="dt-row dt-body-row border-bottom bg-white" $.="this._initRow(thisNode)">\n                                <template $each="this.state?._displayFields || []" as="f" index="fIdx" key="id"><div $data-fidx="fIdx" $class="dt-cell border-end px-2 d-flex align-items-center ${(f.settings?.pinned || f.pinned) ? \'pinned-\' + (f.settings?.pinned || f.pinned) : \'\'}" $style="((f.settings?.pinned || f.pinned) ? \'position: sticky; z-index: 1; background-color: inherit; \' : \'\') + ((f.settings?.pinned || f.pinned) === \'left\' ? \'left: var(--l-\' + f.id + \'); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);\' : ((f.settings?.pinned || f.pinned) === \'right\' ? \'right: var(--r-\' + f.id + \'); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);\' : \'\'))"><span $text="this.format(item[this.getDataKey(f)], f)" class="text-truncate"></span></div></template>\n                                </div>\n                        </template>\n                        <div class="dt-spacer-post flex-shrink-0" style="display:none"></div>\n                </div>\n                <div class="dt-editor-overlay dt-editor-container" style="display: none; position: absolute; z-index: 1000; background: var(--bs-body-bg); box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 1px solid var(--bs-primary); padding: 0;"><AutoForm nobutton inline class="h-100 w-100" $onsubmit="event.preventDefault(); thisNode.closest(\'DataGrid\').hideEditor(true)"></AutoForm></div>\n        </div>\n\n        <div class="dt-column-menu bg-body shadow-lg rounded p-2" style="display:none; position:absolute; z-index:2000; min-width:240px; max-width:300px; border: 1px solid var(--bs-primary)">\n                <template $if="this.state?.activeFieldId">\n                        <div class="d-flex gap-1 mb-2">\n                                <button $class="btn btn-xs flex-grow-1 d-flex align-items-center justify-content-center ${this.state?.sortConfig?.direction === \'asc\' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? \'btn-primary\' : \'btn-outline-secondary border\'}" $onclick="this.setSort(\'asc\')"><i class="bi bi-sort-alpha-down me-1"></i> ASC</button>\n                                <button $class="btn btn-xs flex-grow-1 d-flex align-items-center justify-content-center ${this.state?.sortConfig?.direction === \'desc\' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? \'btn-primary\' : \'btn-outline-secondary border\'}" $onclick="this.setSort(\'desc\')"><i class="bi bi-sort-alpha-up-alt me-1"></i> DESC</button>\n                        </div>\n\n                        <template $if="this.state?.activeModes?.length">\n                        <div class="py-2 border-bottom" style="min-height: 48px">\n                                <div class="input-group input-group-sm mb-1">\n                                        <input type="text" class="form-control" $placeholder="(this.state?.filterConfig?.[this.state?.activeFieldId]?.mode || \'Search\').toUpperCase() + \'...\'" $bind="this.state.filterConfig[this.state.activeFieldId].value" $oninput="this.applySortFilter()" $onkeydown="if(event.key===\'Enter\'){this.applySortFilter();this.hideColumnMenu();}">\n                                        <button class="btn btn-outline-secondary border dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="Search Mode">\n                                                <i $class="bi ${this.state?._MODE_ICONS?.[this.state?.filterConfig?.[this.state?.activeFieldId]?.mode] || \'bi-filter\'}"></i>\n                                        </button>\n                                        <ul class="dropdown-menu dropdown-menu-end shadow">\n                                                <template $each="this.state?.activeModes || []" as="m">\n                                                        <li><button class="dropdown-item d-flex align-items-center" type="button" $onclick="this.state.filterConfig[this.state.activeFieldId].mode = m; this.state.filterConfig = {...this.state.filterConfig}">\n                                                                <i $class="bi ${this.state?._MODE_ICONS?.[m] || \'bi-filter\'} me-2"></i> <span $text="m.toUpperCase()"></span>\n                                                        </button></li>\n                                                </template>\n                                        </ul>\n                                </div>\n                                <input $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.mode === \'between\'" type="text" class="form-control form-control-sm" placeholder="And..." $bind="this.state.filterConfig[this.state.activeFieldId].value2" $oninput="this.applySortFilter()" $onkeydown="if(event.key===\'Enter\'){this.applySortFilter();this.hideColumnMenu();}">\n                        </div>\n                        </template>\n\n                        <div class="mt-2" style="max-height: 180px; overflow-y: auto;">\n                                <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">\n                                        <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background=\'var(--bs-light)\'" onmouseout="this.style.background=\'transparent\'">\n                                                <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">\n                                                <span class="text-truncate flex-grow-1"><span $text="item.val || \'(Empty)\'"></span> <span class="text-muted ms-1" style="font-size: 0.7rem" $text="\'(\' + item.count + \')\'"></span></span>\n                                                <button class="btn btn-xs btn-link p-0 text-primary only-btn" style="font-size: 10px; text-decoration: none" $onclick="this.filterOnlyThis(item.val); event.preventDefault(); event.stopPropagation();">Only</button>\n                                        </label>\n                                </template>\n                        </div>\n\n                        <div $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.value || this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.length" class="mt-2 pt-1 border-top text-center">\n                                <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>\n                        </div>\n\n                        <div $if="this.state?.editable && !this.state?.activeField?.system" class="mt-3 pt-2 border-top d-flex gap-1 justify-content-between">\n                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Edit Field" $onclick="this.editField()"><i class="bi bi-pencil"></i></button>\n                                <button class="btn btn-sm btn-light border-0 flex-grow-1" title="Add Field" $onclick="this.addField()"><i class="bi bi-plus-lg"></i></button>\n                                <button class="btn btn-sm btn-light border-0 flex-grow-1 text-danger" title="Delete Field" $onclick="this.deleteField()"><i class="bi bi-trash"></i></button>\n                        </div>\n                </template>\n        </div>\n\n        <Modal $.id="this.id + \'_field_modal\'">\n            <div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div>\n            <div slot="footer">\n                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" $onclick="thisNode.closest(\'Modal\').result=1">Cancel</button>\n                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" $onclick="thisNode.closest(\'Modal\').result=2">Save</button>\n            </div>\n        </Modal>\n\n        <div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">\n                <div class="d-flex align-items-center gap-3 flex-grow-1">\n                        <div class="d-flex align-items-center gap-1 text-muted" style="font-size: 0.75rem">\n                                <i class="bi bi-check-all fs-6"></i><span $text="(this.state?.selectedRowCount || 0) + \' / \' + (this.apiUrl ? (this.state?.total || 0) : (this.state?.list?.length || 0))"></span>\n                        </div>\n                        <div $if="this.state?.editable" class="d-flex align-items-center gap-1">\n                                <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>\n                                <button class="btn btn-sm btn-light border-0 d-flex align-items-center px-2 py-1" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>\n                        </div>\n\t\t\t\t\t\t<label class="small"><input class="form-check-input me-1" type="checkbox" $bind="this.state.advancedMode">{#Advanced mode#}</label>\n                </div>\n                <div $if="this.state?.editable" class="d-flex align-items-center gap-2">\n                        <button $if="this.state?.isDirty" class="btn btn-sm btn-primary border-0 px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save</button>\n                        <button $if="!this.state?.isDirty" class="btn btn-sm btn-light border-0 px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Saved</button>\n                </div>\n        </div>\n</div>\n'),globalThis.Util.makeDom("\n<style>\n        DataGrid { display: block; }\n        .dt-root { font-size: 0.875rem; }\n        .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }\n        .dt-main { position: relative; }\n        .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }\n        .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }\n        .dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }\n        .dt-body-row:hover { background-color: var(--bs-secondary-bg) !important; }\n        .header-cell .header-menu-btn { opacity: 0; transition: opacity 0.2s; }\n        .header-cell:hover .header-menu-btn { opacity: 1; }\n        .dt-column-menu { background-color: var(--bs-body-bg); border: 1px solid var(--bs-primary); box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; z-index: 2100 !important; }\n        .btn-xs { padding: 1px 5px; line-height: 1.5; }\n        .cursor-pointer { cursor: pointer; }\n        .dt-filter-tabs i { font-size: 1.1rem; }\n        .dt-filter-tabs div:hover i { color: var(--bs-primary); }\n        .menu-item-row .only-btn { opacity: 0; }\n        .menu-item-row:hover .only-btn { opacity: 1; }\n        .dt-editor-overlay .auto-form-root form { gap: 0 !important; margin: 0 !important; height: 100%; }\n        .dt-editor-overlay [control-wrapper] { width: 100%; margin: 0 !important; min-height: 100% !important; align-items: stretch !important; }\n        .dt-editor-overlay [control-wrapper] > .d-flex { padding: 0.375rem 0.5rem; justify-content: flex-start !important; align-items: center !important; }\n        .dt-editor-overlay [control-wrapper] > .form-switch { padding-left: 2.5rem !important; }\n        .dt-editor-overlay [control-wrapper] > textarea { min-height: 100px; resize: vertical; }\n</style>\n")),globalThis.DataGrid=DataGridConfig;