@liedekef/ftable 1.1.13 → 1.1.14

package/ftable.esm.js

@@ -1875,7 +1875,7 @@ class FTable extends FTableEventEmitter {
                 container.setAttribute('title', field.tooltip);
             }
 
-            FTableDOMHelper.create('span', {
+            const textHeader = FTableDOMHelper.create('span', {
                 className: 'ftable-column-header-text',
                 text: field.title || fieldName,
                 parent: container
@@ -1883,6 +1883,10 @@ class FTable extends FTableEventEmitter {
 
             // Make sortable if enabled
             if (this.options.sorting && field.sorting !== false) {
+                // Add some empty spaces after the text so the background icon has room next to it
+                // one could play with css and ::after, but then the width calculation of columns borks, resize bar is off etc ...
+                //textHeader.innerHTML += '     ';
+                FTableDOMHelper.addClass(textHeader, 'ftable-sortable-text'); // Add class for spacing
                 FTableDOMHelper.addClass(th, 'ftable-column-header-sortable');
                 th.addEventListener('click', (e) => {
                     e.preventDefault();

package/ftable.js

@@ -1880,7 +1880,7 @@ class FTable extends FTableEventEmitter {
                 container.setAttribute('title', field.tooltip);
             }
 
-            FTableDOMHelper.create('span', {
+            const textHeader = FTableDOMHelper.create('span', {
                 className: 'ftable-column-header-text',
                 text: field.title || fieldName,
                 parent: container
@@ -1888,6 +1888,10 @@ class FTable extends FTableEventEmitter {
 
             // Make sortable if enabled
             if (this.options.sorting && field.sorting !== false) {
+                // Add some empty spaces after the text so the background icon has room next to it
+                // one could play with css and ::after, but then the width calculation of columns borks, resize bar is off etc ...
+                //textHeader.innerHTML += '     ';
+                FTableDOMHelper.addClass(textHeader, 'ftable-sortable-text'); // Add class for spacing
                 FTableDOMHelper.addClass(th, 'ftable-column-header-sortable');
                 th.addEventListener('click', (e) => {
                     e.preventDefault();

package/ftable.min.js

@@ -20,7 +20,7 @@
             .ftable-toolbarsearch {
                 width: 90%;
             }
-        `,document.head.appendChild(e))}createPagingUI(){this.elements.bottomPanel=m.create("div",{className:"ftable-bottom-panel",parent:this.elements.mainContainer}),this.elements.leftArea=m.create("div",{className:"ftable-left-area",parent:this.elements.bottomPanel}),this.elements.rightArea=m.create("div",{className:"ftable-right-area",parent:this.elements.bottomPanel}),this.elements.pagingListArea=m.create("div",{className:"ftable-page-list",parent:this.elements.leftArea}),this.elements.pagingGotoArea=m.create("div",{className:"ftable-page-goto",parent:this.elements.leftArea}),this.elements.pageInfoSpan=m.create("div",{className:"ftable-page-info",parent:this.elements.rightArea}),!1!==this.options.pageSizeChangeArea&&this.createPageSizeSelector()}createPageSizeSelector(){var e=m.create("span",{className:"ftable-page-size-change",parent:this.elements.leftArea});m.create("span",{text:this.options.messages.pageSizeChangeLabel,parent:e});let s=m.create("select",{className:"ftable-page-size-select",parent:e});(this.options.pageSizes||[10,25,50,100]).forEach(e=>{var t=m.create("option",{attributes:{value:e},text:e.toString(),parent:s});e===this.state.pageSize&&(t.selected=!0)}),s.addEventListener("change",e=>{this.changePageSize(parseInt(e.target.value))})}processFieldDefinitions(){this.fieldList=Object.keys(this.options.fields),this.fieldList.forEach(e=>{e=this.options.fields[e];!0===e.key?(void 0!==e.create&&e.create||(e.create=!0,e.type="hidden"),void 0!==e.edit&&e.edit||(e.edit=!0,e.type="hidden")):(e.create=e.create??!0,e.edit=e.edit??!0,e.list=e.list??!0,e.sorting=e.sorting??!0),e.visibility=e.visibility??"visible"}),this.columnList=this.fieldList.filter(e=>!1!==this.options.fields[e].list),this.keyField=this.fieldList.find(e=>!0===this.options.fields[e].key),this.keyField||this.logger.info("No key field defined")}async resolveAsyncFieldOptions(){this.formBuilder.storeOriginalFieldOptions();for(var t of this.columnList){var e=this.options.fields[t],s=this.formBuilder.originalFieldOptions.get(t)||e.options;if(s&&("function"==typeof s||"string"==typeof s)&&!Array.isArray(s)&&("object"!=typeof s||Array.isArray(s)||!(0<Object.keys(s).length)))try{var a={...e,options:s},i=await this.formBuilder.resolveOptions(a);e.options=i}catch(e){console.error(`Failed to resolve options for ${t}:`,e)}}}refreshDisplayValues(){var e=this.elements.tableBody.querySelectorAll(".ftable-data-row");0!==e.length&&e.forEach(a=>{this.columnList.forEach(e=>{var t,s=this.options.fields[e];s.options&&"function"!=typeof s.options&&"string"!=typeof s.options&&(t=a.querySelector(`td[data-field-name="${e}"]`))&&(e=this.getDisplayText(a.recordData,e),t.innerHTML=s.listEscapeHTML?m.escapeHtml(e):e)})})}createMainStructure(){this.elements.mainContainer=m.create("div",{className:"ftable-main-container",parent:this.element}),this.options.title&&(this.elements.titleDiv=m.create("div",{className:"ftable-title",parent:this.elements.mainContainer}),m.create("div",{className:"ftable-title-text",text:this.options.title,parent:this.elements.titleDiv})),this.elements.toolbarDiv=m.create("div",{className:"ftable-toolbar",parent:this.elements.titleDiv||this.elements.mainContainer}),this.elements.tableDiv=m.create("div",{className:"ftable-table-div",parent:this.elements.mainContainer})}createTable(){this.elements.table=m.create("table",{className:"ftable",parent:this.elements.tableDiv}),this.options.tableId&&(this.elements.table.id=this.options.tableId),this.createTableHeader(),this.createTableBody(),this.addNoDataRow()}createTableHeader(){var e=m.create("thead",{parent:this.elements.table});let i=m.create("tr",{parent:e});if(this.options.selecting&&this.options.selectingCheckboxes){var t=m.create("th",{className:"ftable-column-header ftable-column-header-select",parent:i});if(this.options.multiselect){let e=m.create("input",{attributes:{type:"checkbox"},parent:t});e.addEventListener("change",()=>{this.toggleSelectAll(e.checked)})}}this.columnList.forEach(t=>{var e=this.options.fields[t],s=m.create("th",{className:`ftable-column-header ${e.listClass||""} `+(e.listClassHeader||""),attributes:{"data-field-name":t},parent:i}),a=(e.width&&(s.style.width=e.width),m.create("div",{className:"ftable-column-header-container",parent:s}));e.tooltip&&a.setAttribute("title",e.tooltip),m.create("span",{className:"ftable-column-header-text",text:e.title||t,parent:a}),this.options.sorting&&!1!==e.sorting&&(m.addClass(s,"ftable-column-header-sortable"),s.addEventListener("click",e=>{e.preventDefault(),this.lastSortEvent=e,this.sortByColumn(t)})),!1!==this.options.columnResizable&&!1!==e.columnResizable&&this.makeColumnResizable(s,a),"hidden"!==e.visibility&&"separator"!==e.visibility||m.hide(s)}),this.options.actions.updateAction&&m.create("th",{className:"ftable-command-column-header ftable-column-header-edit",parent:i}),this.options.actions.cloneAction&&m.create("th",{className:"ftable-command-column-header ftable-column-header-clone",parent:i}),this.options.actions.deleteAction&&m.create("th",{className:"ftable-command-column-header ftable-column-header-delete",parent:i}),this.options.toolbarsearch&&this.createSearchHeaderRow(e).catch(e=>{console.error("Failed to create search header row:",e)})}async createSearchHeaderRow(e){var t,s,a=m.create("tr",{className:"ftable-toolbarsearch-row",parent:e});this.options.selecting&&this.options.selectingCheckboxes&&m.create("th",{className:"ftable-toolbarsearch-column-header",parent:a});for(t of this.columnList){var i=this.options.fields[t],o=!1!==i.searchable,r=m.create("th",{className:"ftable-toolbarsearch-column-header",parent:a});if(o){o=m.create("div",{className:"ftable-column-header-container",parent:r});let e;!i.type&&i.options&&(i.type="select");var n,l,c,d="ftable-toolbarsearch-"+t;switch(i.type){case"date":case"datetime-local":"undefined"!=typeof FDatepicker?(n=i.dateFormat||this.options.defaultDateFormat,e=document.createElement("div"),l=m.create("input",{className:"ftable-toolbarsearch-extra",attributes:{type:"hidden","data-field-name":t,id:"ftable-toolbarsearch-extra-"+t}}),c=m.create("input",{className:"ftable-toolbarsearch",attributes:{id:"ftable-toolbarsearch-"+t,type:"text",placeholder:i.placeholder||"",readOnly:!0}}),e.appendChild(l),e.appendChild(c),new FDatepicker(c,{format:n,altField:"ftable-toolbarsearch-extra-"+t,altFormat:"Y-m-d"})):e=m.create("input",{className:"ftable-toolbarsearch",attributes:{type:"date","data-field-name":t,id:d}});break;case"checkbox":e=i.values?await this.createSelectForSearch(t,i,!0):m.create("input",{className:"ftable-toolbarsearch",attributes:{type:"text","data-field-name":t,id:d,placeholder:"Search..."}});break;case"select":e=i.options?await this.createSelectForSearch(t,i,!1):m.create("input",{className:"ftable-toolbarsearch",attributes:{type:"text","data-field-name":t,id:d,placeholder:"Search..."}});break;default:e=m.create("input",{className:"ftable-toolbarsearch",attributes:{type:"text","data-field-name":t,id:d,placeholder:"Search..."}})}e&&(o.appendChild(e),"SELECT"===e.tagName?e.addEventListener("change",e=>{this.handleSearchInputChange(e)}):e.addEventListener("input",e=>{this.handleSearchInputChange(e)}))}"hidden"!==i.visibility&&"separator"!==i.visibility||m.hide(r)}this.options.toolbarsearch&&this.options.toolbarreset&&(e=m.create("th",{className:"ftable-toolbarsearch-column-header ftable-toolbarsearch-reset",parent:a}),0<(s=(this.options.actions.updateAction?1:0)+(this.options.actions.deleteAction?1:0))?e.colSpan=s:m.addClass(e,"ftable-command-column-header"),m.create("button",{className:"ftable-toolbarsearch-reset-button",text:this.options.messages.resetSearch,parent:e}).addEventListener("click",()=>this.resetSearch()))}async createSelectForSearch(e,t,s){var a="ftable-toolbarsearch-"+e;let i=m.create("select",{attributes:{"data-field-name":e,id:a,class:"ftable-toolbarsearch"}}),o;return s&&t.values?o=Object.entries(t.values).map(([e,t])=>({Value:e,DisplayText:t})):t.options&&(o=await this.formBuilder.resolveOptions(t)),0<o?.length&&(""===o[0].Value||""===o[0].value||""===o[0]||""===o[0].DisplayText&&null==o[0].Value)||m.create("option",{attributes:{value:""},text:"",parent:i}),o&&Array.isArray(o)?o.forEach(e=>{m.create("option",{attributes:{value:void 0!==e.Value?e.Value:void 0!==e.value?e.value:e},text:e.DisplayText||e.text||e,parent:i})}):o&&"object"==typeof o&&Object.entries(o).forEach(([e,t])=>{m.create("option",{attributes:{value:e},text:t,parent:i})}),i}handleSearchInputChange(e){var e=e.target,t=e.getAttribute("data-field-name"),e=e.value.trim();e?this.state.searchQueries[t]=e:delete this.state.searchQueries[t],clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>{this.load()},this.options.searchDebounceMs)}resetSearch(){this.state.searchQueries={},this.elements.table.querySelectorAll(".ftable-toolbarsearch").forEach(e=>{"SELECT"===e.tagName?e.selectedIndex=0:e.value=""}),this.load()}getNextVisibleHeader(t){var s=Array.from(this.elements.table.querySelectorAll("thead th:not(.ftable-command-column-header, .ftable-toolbarsearch-column-header)"));for(let e=s.indexOf(t)+1;e<s.length;e++)if(null!==s[e].offsetParent)return s[e];return null}makeColumnResizable(a,e){this.elements.resizeBar||(this.elements.resizeBar=m.create("div",{className:"ftable-column-resize-bar",parent:this.elements.mainContainer}),m.hide(this.elements.resizeBar));e=m.create("div",{className:"ftable-column-resize-handler",parent:e});let i=!1,o=0,r=0,n,l=null,c=0,d=null,h=(e.addEventListener("mousedown",e=>{e.preventDefault(),e.stopPropagation(),i=!0,n=this.elements.mainContainer.getBoundingClientRect(),o=e.clientX,r=a.offsetWidth,(l=this.getNextVisibleHeader(a))&&(c=l.offsetWidth,e=l.dataset.fieldName,d=this.options.fields[e],e=a.getBoundingClientRect(),this.elements.resizeBar.style.left=e.right-n.left+"px",this.elements.resizeBar.style.top=e.top-n.top+"px",this.elements.resizeBar.style.height=this.elements.table.offsetHeight+"px",m.show(this.elements.resizeBar),document.addEventListener("mousemove",h),document.addEventListener("mouseup",p))}),e=>{i&&(this.elements.resizeBar.style.left=e.clientX-n.left+"px")}),p=e=>{var t,s;i&&(i=!1,e=e.clientX-o,s=n.width,t=Math.max(50,r+e)/s*100,l&&(e=Math.max(50,c-e)/s*100,d.width=e.toFixed(2)+"%",l.style.width=d.width),(s=this.options.fields[a.dataset.fieldName]).width=t.toFixed(2)+"%",a.style.width=s.width,this.normalizeColumnWidths(),this.options.saveUserPreferences&&this.saveColumnSettings(),m.hide(this.elements.resizeBar),document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",p))}}saveColumnSettings(){if(this.options.saveUserPreferences){let a={};this.columnList.forEach(e=>{var t,s=this.elements.table.querySelector(`[data-field-name="${e}"]`);s&&(t=this.options.fields[e],a[e]={width:s.style.width||t.width||"auto",visibility:t.visibility||"visible"})}),this.userPrefs.set("column-settings",JSON.stringify(a))}}saveState(){var e;this.options.saveUserPreferences&&(e={sorting:this.state.sorting,pageSize:this.state.pageSize},this.userPrefs.set("table-state",JSON.stringify(e)))}loadColumnSettings(){if(this.options.saveUserPreferences){var e=this.userPrefs.get("column-settings");if(e)try{var t=JSON.parse(e);Object.entries(t).forEach(([e,t])=>{e=this.options.fields[e];e&&(t.width&&(e.width=t.width),t.visibility)&&(e.visibility=t.visibility)})}catch(e){this.logger.warn("Failed to load column settings:",e)}}}loadState(){if(this.options.saveUserPreferences){var e=this.userPrefs.get("table-state");if(e)try{var t=JSON.parse(e);Array.isArray(t.sorting)&&(this.state.sorting=t.sorting),t.pageSize&&this.options.pageSizes.includes(t.pageSize)&&(this.state.pageSize=t.pageSize)}catch(e){this.logger.warn("Failed to load table state:",e)}}}createTableBody(){this.elements.tableBody=m.create("tbody",{parent:this.elements.table})}addNoDataRow(){var e,t;this.elements.tableBody.querySelector(".ftable-no-data-row")||(e=m.create("tr",{className:"ftable-no-data-row",parent:this.elements.tableBody}),t=this.elements.table.querySelector("thead tr").children.length,m.create("td",{attributes:{colspan:t},text:this.options.messages.noDataAvailable,parent:e}))}removeNoDataRow(){var e=this.elements.tableBody.querySelector(".ftable-no-data-row");e&&e.remove()}createModals(){this.options.actions.createAction&&this.createAddRecordModal(),this.options.actions.updateAction&&this.createEditRecordModal(),this.options.actions.deleteAction&&this.createDeleteConfirmModal(),this.createErrorModal(),this.createInfoModal(),this.createLoadingModal(),Object.values(this.modals).forEach(e=>e.create())}createAddRecordModal(){this.modals.addRecord=new e({parent:this.elements.mainContainer,title:this.options.messages.addNewRecord,className:"ftable-add-modal",buttons:[{text:this.options.messages.cancel,className:"ftable-dialog-cancelbutton",onClick:()=>{this.modals.addRecord.close(),this.emit("formClosed",{form:this.currentForm,formType:"create",record:null})}},{text:this.options.messages.save,className:"ftable-dialog-savebutton",onClick:()=>this.saveNewRecord()}]})}createEditRecordModal(){this.modals.editRecord=new e({parent:this.elements.mainContainer,title:this.options.messages.editRecord,className:"ftable-edit-modal",buttons:[{text:this.options.messages.cancel,className:"ftable-dialog-cancelbutton",onClick:()=>{this.emit("formClosed",{form:this.currentForm,formType:"edit",record:null}),this.modals.editRecord.close()}},{text:this.options.messages.save,className:"ftable-dialog-savebutton",onClick:()=>this.saveEditedRecord()}]})}createDeleteConfirmModal(){this.modals.deleteConfirm=new e({parent:this.elements.mainContainer,title:this.options.messages.areYouSure,className:"ftable-delete-modal",buttons:[{text:this.options.messages.cancel,className:"ftable-dialog-cancelbutton",onClick:()=>this.modals.deleteConfirm.close()},{text:this.options.messages.deleteText,className:"ftable-dialog-deletebutton",onClick:()=>this.confirmDelete()}]})}createErrorModal(){this.modals.error=new e({parent:this.elements.mainContainer,title:this.options.messages.error,className:"ftable-error-modal",buttons:[{text:this.options.messages.close,className:"ftable-dialog-closebutton",onClick:()=>this.modals.error.close()}]})}createInfoModal(){this.modals.info=new e({parent:this.elements.mainContainer,title:"",className:"ftable-info-modal",buttons:[{text:this.options.messages.close,className:"ftable-dialog-closebutton",onClick:()=>this.modals.info.close()}]})}createLoadingModal(){this.modals.loading=new e({parent:this.elements.mainContainer,title:"",className:"ftable-loading-modal",content:`<div class="ftable-loading-message">${this.options.messages.loadingMessage}</div>`})}bindEvents(){this.subscribeOptionEvents(),this.createCustomToolbarItems(),this.createToolbarButtons(),this.bindKeyboardEvents(),!1!==this.options.columnSelectable&&this.createColumnSelectionMenu()}subscribeOptionEvents(){["formCreated","formClosed","recordsLoaded","recordAdded","recordUpdated","recordDeleted","selectionChanged"].forEach(e=>{"function"==typeof this.options[e]&&this.on(e,this.options[e])})}createColumnSelectionMenu(){this.elements.columnSelectionOverlay=null,this.elements.columnSelectionMenu=null,this.elements.table.querySelector("thead").addEventListener("contextmenu",e=>{e.preventDefault(),this.showColumnSelectionMenu(e)})}showColumnSelectionMenu(e){this.hideColumnSelectionMenu(),this.elements.columnSelectionOverlay=m.create("div",{className:"ftable-contextmenu-overlay",parent:document.body}),this.elements.columnSelectionMenu=m.create("div",{className:"ftable-column-selection-container",parent:document.body}),this.populateColumnSelectionMenu(),this.positionColumnSelectionMenu(e),this.elements.columnSelectionOverlay.addEventListener("click",e=>{e.target===this.elements.columnSelectionOverlay&&this.hideColumnSelectionMenu()}),this.elements.columnSelectionOverlay.addEventListener("contextmenu",e=>{e.preventDefault(),this.hideColumnSelectionMenu()})}populateColumnSelectionMenu(){let l=m.create("ul",{className:"ftable-column-select-list",parent:this.elements.columnSelectionMenu});this.columnList.forEach(t=>{var e=this.options.fields[t],s="hidden"!==e.visibility,a="fixed"===e.visibility,i="separator"===e.visibility,o=this.isFieldSorted(t),r=m.create("li",{className:"ftable-column-select-item",parent:l}),n=m.create("label",{className:"ftable-column-select-label",parent:r});if(!i){let e=m.create("input",{attributes:{type:"checkbox",id:"column-"+t},parent:n});e.checked=s,(a||o&&s)&&(e.disabled=!0,r.style.opacity="0.6"),e.disabled||e.addEventListener("change",()=>{this.setColumnVisibility(t,e.checked)})}a=m.create("span",{text:e.title||t,style:i?"font-weight: bold;":null,parent:n});o&&((s=m.create("span",{className:"ftable-sort-indicator",text:" (sorted)",parent:a})).style.fontSize="0.8em",s.style.color="#666")})}positionColumnSelectionMenu(e){var t=this,s=e.pageX,e=e.pageY,e=(t.elements.columnSelectionMenu.style.position="absolute",t.elements.columnSelectionMenu.style.left=s+"px",t.elements.columnSelectionMenu.style.top=e+"px",t.elements.columnSelectionMenu.style.minWidth="100px",t.elements.columnSelectionMenu.style.boxSizing="border-box",t.elements.columnSelectionMenu.offsetWidth),a=window.innerWidth;a<s+e&&(s=Math.max(10,a-e-10),t.elements.columnSelectionMenu.style.left=s+"px")}hideColumnSelectionMenu(){this.elements.columnSelectionOverlay&&(this.elements.columnSelectionOverlay.remove(),this.elements.columnSelectionMenu.remove(),this.elements.columnSelectionOverlay=null,this.elements.columnSelectionMenu=null)}isFieldSorted(t){return this.state.sorting.some(e=>e.fieldName===t)}createToolbarButtons(){this.options.csvExport&&this.addToolbarButton({text:this.options.messages.csvExport,className:"ftable-toolbar-item-csv",onClick:()=>{var e=this.options.title?this.options.title.replace(/[^a-z0-9]/gi,"-").toLowerCase()+".csv":"table-export.csv";this.exportToCSV(e)}}),this.options.printTable&&this.addToolbarButton({text:this.options.messages.printTable,className:"ftable-toolbar-item-print",onClick:()=>{this.printTable()}}),this.options.actions.createAction&&this.addToolbarButton({text:this.options.messages.addNewRecord,className:"ftable-toolbar-item-add-record",addIconSpan:!0,onClick:()=>this.showAddRecordForm()})}addToolbarButton(e){var t=m.create("span",{className:"ftable-toolbar-item "+(e.className||""),parent:this.elements.toolbarDiv});if(e.addIconSpan)m.create("span",{className:"ftable-toolbar-item-icon "+(e.className||""),parent:t});let s=m.create("span",{className:"ftable-toolbar-item-text "+(e.className||""),text:e.text,parent:t});return e.onClick&&t.addEventListener("click",e.onClick),t}createCustomToolbarItems(){this.options.toolbar&&this.options.toolbar.items&&this.options.toolbar.items.forEach(t=>{var e=m.create("span",{className:"ftable-toolbar-item ftable-toolbar-item-custom "+(t.buttonClass||""),parent:this.elements.toolbarDiv});t.tooltip&&e.setAttribute("title",t.tooltip),t.icon&&m.create("img",{attributes:{src:t.icon,alt:"",width:16,height:16,style:"margin-right: 6px; vertical-align: middle;"},parent:e}),t.text&&m.create("span",{text:t.text,className:"ftable-toolbar-item-text ftable-toolbar-item-custom-text "+(t.buttonTextClass||""),parent:e}),"function"==typeof t.click&&e.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),t.click()})})}bindKeyboardEvents(){this.options.selecting&&(this.shiftKeyDown=!1,document.addEventListener("keydown",e=>{"Shift"===e.key&&(this.shiftKeyDown=!0)}),document.addEventListener("keyup",e=>{"Shift"===e.key&&(this.shiftKeyDown=!1)}))}setupFTableUserPreferences(){var e;this.options.saveUserPreferences&&(e=this.userPrefs.generatePrefix(this.options.tableId||"",this.fieldList),this.userPrefs=new i(e,this.options.saveUserPreferencesMethod),this.loadState(),this.loadColumnSettings())}async load(e={}){if(!this.state.isLoading){this.state.isLoading=!0,this.showLoadingIndicator();try{var t={...e,...this.buildLoadParams()},s=await this.performLoad(t);this.processLoadedData(s),this.emit("recordsLoaded",{records:s.Records,serverResponse:s})}catch(e){this.showError(this.options.messages.serverCommunicationError),this.logger.error("Load failed: "+e.message)}finally{this.state.isLoading=!1,this.hideLoadingIndicator()}this.renderSortingInfo(),this.normalizeColumnWidths()}}buildLoadParams(){var e,t={};if(this.options.paging&&(this.state.pageSize||(this.state.pageSize=this.options.pageSize),t.jtStartIndex=(this.state.currentPage-1)*this.state.pageSize,t.jtPageSize=this.state.pageSize),this.options.sorting&&(0<this.state.sorting.length?t.jtSorting=this.state.sorting.map(e=>e.fieldName+" "+e.direction).join(", "):this.options.defaultSorting&&(t.jtSorting=this.parseDefaultSorting(this.options.defaultSorting).map(e=>e.fieldName+" "+e.direction).join(", "))),this.options.toolbarsearch&&0<Object.keys(this.state.searchQueries).length){let s=[],a=[];Object.entries(this.state.searchQueries).forEach(([e,t])=>{""!==t&&(s.push(t),a.push(e))}),0<s.length&&(t.q=s,t.opt=a)}return"function"==typeof this.options.listQueryParams&&(e=this.options.listQueryParams(),Object.assign(t,e)),t}isCacheExpired(e,t){return!e||!e.timestamp||t<Date.now()-e.timestamp}async performLoad(e){var t=this.options.actions.listAction;if(this.options.listCache&&"string"==typeof t){var s=this.formBuilder.optionsCache.get(t,e);if(s&&!this.isCacheExpired(s,this.options.listCache))return s.data}let a;if("function"==typeof t)a=await t(e);else{if("string"!=typeof t)throw new Error("No valid listAction provided");a=this.options.forcePost?await l.post(t,e):await l.get(t,e)}if(a&&"OK"===a.Result)return this.options.listCache&&"string"==typeof t&&this.formBuilder.optionsCache.set(t,e,{data:a,timestamp:Date.now()}),a;throw new Error(a?.Message||"Invalid response from server")}processLoadedData(e){"OK"!==e.Result?this.showError(e.Message||"Unknown error occurred"):(this.state.records=e.Records||[],this.state.totalRecordCount=e.TotalRecordCount||this.state.records.length,this.renderTableData(),this.updatePagingInfo())}renderTableData(){this.elements.tableBody.querySelectorAll(".ftable-data-row").forEach(e=>e.remove()),0===this.state.records.length?this.addNoDataRow():(this.removeNoDataRow(),this.state.records.forEach(e=>{e=this.createTableRow(e);this.elements.tableBody.appendChild(e)}),this.refreshRowStyles(),this.refreshDisplayValues())}createTableRow(t){let s=m.create("tr",{className:"ftable-data-row",attributes:{"data-record-key":this.getKeyValue(t)}}),e=(s.recordData=t,this.options.selecting&&this.options.selectingCheckboxes&&this.addSelectingCell(s),this.columnList.forEach(e=>{this.addDataCell(s,t,e)}),0);return this.options.actions.updateAction&&(this.addEditCell(s),e++),this.options.actions.cloneAction&&(this.addCloneCell(s),e++),this.options.actions.deleteAction&&(this.addDeleteCell(s),e++),this.options.selecting&&this.makeRowSelectable(s),s}addSelectingCell(t){var e=m.create("td",{className:"ftable-command-column ftable-selecting-column",parent:t});m.create("input",{className:"norowselectonclick",attributes:{type:"checkbox"},parent:e}).addEventListener("change",e=>{this.toggleRowSelection(t)})}addDataCell(e,t,s){var a=this.options.fields[s],t=this.getDisplayText(t,s),t=m.create("td",{className:`${a.listClass||""} `+(a.listClassEntry||""),html:a.listEscapeHTML?m.escapeHtml(t):t,attributes:{"data-field-name":s},parent:e});"fixed"!==a.visibility&&"hidden"===a.visibility&&m.hide(t)}addEditCell(t){var e=m.create("td",{className:"ftable-command-column",parent:t});m.create("button",{className:"ftable-command-button ftable-edit-command-button",attributes:{title:this.options.messages.editRecord},html:`<span>${this.options.messages.editRecord}</span>`,parent:e}).addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),this.editRecord(t)})}addCloneCell(t){var e=m.create("td",{className:"ftable-command-column",parent:t});m.create("button",{className:"ftable-command-button ftable-clone-command-button",attributes:{title:this.options.messages.cloneRecord||"Clone"},html:`<span>${this.options.messages.cloneRecord||"Clone"}</span>`,parent:e}).addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),this.cloneRecord(t)})}addDeleteCell(t){var e=m.create("td",{className:"ftable-command-column",parent:t});m.create("button",{className:"ftable-command-button ftable-delete-command-button",attributes:{title:this.options.messages.deleteText},html:`<span>${this.options.messages.deleteText}</span>`,parent:e}).addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),this.deleteRecord(t)})}getDisplayText(e,t){var s=this.options.fields[t],a=e[t];return s.display&&"function"==typeof s.display?s.display({record:e}):"date"===s.type&&a?"undefined"!=typeof FDatepicker?FDatepicker.formatDate(this._parseDate(a),s.dateFormat||this.options.defaultDateFormat):this.formatDate(a,s.dateLocale||this.options.defaultDateLocale):"datetime-local"===s.type&&a?"undefined"!=typeof FDatepicker?FDatepicker.formatDate(this._parseDate(a),s.dateFormat||this.options.defaultDateFormat):this.formatDateTime(a,s.dateLocale||this.options.defaultDateLocale):"checkbox"===s.type?this.getCheckboxText(t,a):s.options?(e=this.findOptionByValue(s.options,a))?e.DisplayText||e.text||e:a:a||""}_parseDate(e){return e.includes("Date")?new Date(parseInt(e.substr(6),10)):10==e.length?new Date(parseInt(e.substr(0,4),10),parseInt(e.substr(5,2),10)-1,parseInt(e.substr(8,2),10)):19==e.length?new Date(parseInt(e.substr(0,4),10),parseInt(e.substr(5,2),10)-1,parseInt(e.substr(8,2),10),parseInt(e.substr(11,2),10),parseInt(e.substr(14,2),10),parseInt(e.substr(17,2),10)):new Date(e)}formatDate(e,t){if(!e)return"";var s=this._parseDate(e);try{return isNaN(s.getTime())?e:s.toLocaleDateString(t,{year:"numeric",month:"2-digit",day:"2-digit"})}catch{return e}}formatDateTime(e,t){if(!e)return"";var s=this._parseDate(e);try{return isNaN(s.getTime())?e:s.toLocaleString(t)}catch{return e}}getCheckboxText(e,t){e=this.options.fields[e];return e.values&&e.values[t]?e.values[t]:t?"Yes":"No"}findOptionByValue(e,t){return Array.isArray(e)?e.find(e=>(e.Value||e.value)===t||e===t):null}refreshRowStyles(){this.elements.tableBody.querySelectorAll(".ftable-data-row").forEach((e,t)=>{t%2==0?m.addClass(e,"ftable-row-even"):m.removeClass(e,"ftable-row-even")})}getKeyValue(e){return this.keyField?e[this.keyField]:null}async showAddRecordForm(){var e=await this.formBuilder.createForm("create");this.modals.addRecord.setContent(e),this.modals.addRecord.show(),this.currentForm=e,this.emit("formCreated",{form:e,formType:"create",record:null})}async saveNewRecord(){if(this.currentForm)if(this.currentForm.checkValidity()){var e=this.getFormData(this.currentForm);try{var t=await this.performCreate(e);"OK"===t.Result?(this.clearListCache(),this.modals.addRecord.close(),this.emit("formClosed",{form:this.currentForm,formType:"create",record:null}),t.Message&&this.showInfo(t.Message),await this.load(),this.emit("recordAdded",{record:t.Record})):this.showError(t.Message||"Create failed")}catch(e){this.showError(this.options.messages.serverCommunicationError),this.logger.error("Create failed: "+e.message)}}else this.currentForm.reportValidity()}async editRecord(e){var t=e.recordData,s=await this.formBuilder.createForm("edit",t);this.modals.editRecord.setContent(s),this.modals.editRecord.show(),this.currentForm=s,this.currentEditingRow=e,this.emit("formCreated",{form:s,formType:"edit",record:t})}async saveEditedRecord(){if(this.currentForm&&this.currentEditingRow)if(this.currentForm.checkValidity()){var e=this.getFormData(this.currentForm);try{var t=await this.performUpdate(e);"OK"===t.Result?(this.clearListCache(),this.modals.editRecord.close(),this.emit("formClosed",{form:this.currentForm,formType:"edit",record:this.currentEditingRow.recordData}),this.updateRowData(this.currentEditingRow,t.Record||e),t.Message&&this.showInfo(t.Message),this.emit("recordUpdated",{record:t.Record||e,row:this.currentEditingRow})):this.showError(t.Message||"Update failed")}catch(e){this.showError(this.options.messages.serverCommunicationError),this.logger.error("Update failed: "+e.message)}}else this.currentForm.reportValidity()}async cloneRecord(e){var e={...e.recordData},t=(this.keyField&&(e[this.keyField]=""),await this.formBuilder.createForm("create",e));this.modals.addRecord.options.content=t,this.modals.addRecord.setContent(t),this.modals.addRecord.show(),this.currentForm=t,this.emit("formCreated",{form:t,formType:"create",record:e})}async deleteRows(e){if(e.length){var t=this.options.messages.areYouSure;if(confirm(t)){var s,a=[];for(s of e)try{var i=await this.performDelete(s);a.push({key:s,success:"OK"===i.Result,result:i})}catch(e){a.push({key:s,success:!1,error:e.message})}a.filter(e=>e.success).forEach(({key:e})=>{e=this.getRowByKey(e);e&&this.removeRowFromTable(e)});t=a.filter(e=>!e.success).length;0<t&&this.showError(t+` of ${a.length} records could not be deleted`),this.refreshRowStyles(),this.updatePagingInfo()}}}deleteRecord(e){var t=e.recordData;let s=this.options.messages.deleteConfirmation;if("function"==typeof this.options.deleteConfirmation){t={row:e,record:t,deleteConfirmMessage:s,cancel:!1,cancelMessage:this.options.messages.cancel};if(this.options.deleteConfirmation(t),t.cancel)return void(t.cancelMessage&&this.showError(t.cancelMessage));s=t.deleteConfirmMessage}this.modals.deleteConfirm.setContent(`<p>${s}</p>`),this.modals.deleteConfirm.show(),this.currentDeletingRow=e}async confirmDelete(){if(this.currentDeletingRow){var e=this.getKeyValue(this.currentDeletingRow.recordData);try{var t=await this.performDelete(e);"OK"===t.Result?(this.clearListCache(),this.modals.deleteConfirm.close(),this.removeRowFromTable(this.currentDeletingRow),t.Message&&this.showInfo(t.Message),this.emit("recordDeleted",{record:this.currentDeletingRow.recordData})):this.showError(t.Message||"Delete failed")}catch(e){this.showError(this.options.messages.serverCommunicationError),this.logger.error("Delete failed: "+e.message)}}}async performCreate(e){var t=this.options.actions.createAction;if("function"==typeof t)return t(e);if("string"==typeof t)return l.post(t,e);throw new Error("No valid createAction provided")}async performUpdate(e){var t=this.options.actions.updateAction;if("function"==typeof t)return t(e);if("string"==typeof t)return l.post(t,e);throw new Error("No valid updateAction provided")}async performDelete(e){var t=this.options.actions.deleteAction,e={[this.keyField]:e};if("function"==typeof t)return t(e);if("string"==typeof t)return l.post(t,e);throw new Error("No valid deleteAction provided")}getFormData(e){var t,s,a,i={};for([t,s]of new FormData(e).entries())t.endsWith("[]")?(i[a=t.slice(0,-2)]||(i[a]=[]),i[a].push(s)):i.hasOwnProperty(t)?Array.isArray(i[t])?i[t].push(s):i[t]=[i[t],s]:i[t]=s;return i}updateRowData(a,e){a.recordData={...a.recordData,...e},Object.keys(e).forEach(e=>{var t,s=this.options.fields[e];s&&(t=a.querySelector(`td[data-field-name="${e}"]`))&&(e=this.getDisplayText(a.recordData,e),t.innerHTML=s.listEscapeHTML?m.escapeHtml(e):e,t.className=(`${s.listClass||""} `+(s.listClassEntry||"")).trim())})}removeRowFromTable(e){e.remove(),0===this.elements.tableBody.querySelectorAll(".ftable-data-row").length&&this.addNoDataRow(),this.refreshRowStyles()}makeRowSelectable(t){!1!==this.options.selectOnRowClick&&t.addEventListener("click",e=>{["INPUT","BUTTON","SELECT","TEXTAREA","A"].includes(e.target.tagName)||e.target.classList.contains("norowselectonclick")||this.toggleRowSelection(t)})}toggleRowSelection(e){var t=e.classList.contains("ftable-row-selected");this.options.multiselect||this.clearAllSelections(),t?this.deselectRow(e):this.selectRow(e),this.emit("selectionChanged",{selectedRows:this.getSelectedRows()})}selectRow(e){m.addClass(e,"ftable-row-selected");var t=e.querySelector('input[type="checkbox"]'),t=(t&&(t.checked=!0),this.getKeyValue(e.recordData));t&&this.state.selectedRecords.add(t)}deselectRow(e){m.removeClass(e,"ftable-row-selected");var t=e.querySelector('input[type="checkbox"]'),t=(t&&(t.checked=!1),this.getKeyValue(e.recordData));t&&this.state.selectedRecords.delete(t)}recalcColumnWidths(){this.columnList.forEach(e=>{var t=this.options.fields[e],e=this.elements.table.querySelector(`[data-field-name="${e}"]`);e&&t.width&&(e.style.width=t.width)}),this.elements.table.offsetHeight}recalcColumnWidthsOnce(){this._recalculatedOnce||(this.recalcColumnWidths(),this._recalculatedOnce=!0)}clearAllSelections(){this.elements.tableBody.querySelectorAll(".ftable-row-selected").forEach(e=>this.deselectRow(e))}toggleSelectAll(t){this.elements.tableBody.querySelectorAll(".ftable-data-row").forEach(e=>{t?this.selectRow(e):this.deselectRow(e)}),this.emit("selectionChanged",{selectedRows:this.getSelectedRows()})}getSelectedRows(){return Array.from(this.elements.tableBody.querySelectorAll(".ftable-row-selected"))}sortByColumn(s){var a=this.options.fields[s];if(a&&!1!==a.sorting){a=this.state.sorting.findIndex(e=>e.fieldName===s);let e=!0,t="ASC";0<=a?"ASC"===this.state.sorting[a].direction?(t="DESC",this.state.sorting[a].direction=t):(this.state.sorting.splice(a,1),e=!1):this.state.sorting.push({fieldName:s,direction:t});a=this.lastSortEvent?.ctrlKey||this.lastSortEvent?.metaKey;(!this.options.multiSorting||this.options.multiSortingCtrlKey&&!a)&&(this.state.sorting=e?[{fieldName:s,direction:t}]:[]),this.updateSortingHeaders(),this.load(),this.saveState()}}updateSortingHeaders(){this.elements.table.querySelectorAll(".ftable-column-header-sortable").forEach(e=>{m.removeClass(e,"ftable-column-header-sorted-asc ftable-column-header-sorted-desc")}),this.state.sorting.forEach(e=>{var t=this.elements.table.querySelector(`[data-field-name="${e.fieldName}"]`);t&&m.addClass(t,"ftable-column-header-sorted-"+e.direction.toLowerCase())})}updatePagingInfo(){var e,t,s;this.options.paging&&this.elements.pageInfoSpan&&(this.state.totalRecordCount<=0?(this.elements.pageInfoSpan.textContent="",this.elements.pagingListArea.innerHTML=""):(e=(this.state.currentPage-1)*this.state.pageSize+1,t=Math.min(this.state.currentPage*this.state.pageSize,this.state.totalRecordCount),s=this.options.messages.pagingInfo||"Showing {0}-{1} of {2}",this.elements.pageInfoSpan.textContent=s.replace(/\{0\}/g,e).replace(/\{1\}/g,t).replace(/\{2\}/g,this.state.totalRecordCount),this.createPageListNavigation(),this.createPageGotoNavigation()))}createPageListNavigation(){if(this.elements.pagingListArea){this.elements.pagingListArea.innerHTML="";var e=Math.ceil(this.state.totalRecordCount/this.state.pageSize);if(!(e<=1)){if(this.createPageButton("&laquo;",1,1===this.state.currentPage,"ftable-page-number-first"),this.createPageButton("&lsaquo;",this.state.currentPage-1,1===this.state.currentPage,"ftable-page-number-previous"),"normal"==this.options.pageList){var s=this.calculatePageNumbers(e);let t=0;s.forEach(e=>{1<e-t&&m.create("span",{className:"ftable-page-number-space",text:"...",parent:this.elements.pagingListArea}),this.createPageButton(e.toString(),e,!1,e===this.state.currentPage?"ftable-page-number ftable-page-number-active":"ftable-page-number"),t=e})}this.createPageButton("&rsaquo;",this.state.currentPage+1,this.state.currentPage>=e,"ftable-page-number-next"),this.createPageButton("&raquo;",e,this.state.currentPage>=e,"ftable-page-number-last")}}}createPageGotoNavigation(){if(this.options.paging&&"none"!==this.options.gotoPageArea){let s=Math.ceil(this.state.totalRecordCount/this.state.pageSize);if(s<=1)this.elements.pagingGotoArea.style.display="none",this.elements.pagingGotoArea.innerHTML="";else{this.elements.pagingGotoArea.style.display="inline-block",this.elements.pagingGotoArea.innerHTML="";m.create("span",{text:this.options.messages.gotoPageLabel+": ",parent:this.elements.pagingGotoArea});var e="ftable-goto-page-"+(this.options.tableId||"default");if("combobox"===this.options.gotoPageArea){this.elements.gotoPageSelect=m.create("select",{id:e,className:"ftable-page-goto-select",parent:this.elements.pagingGotoArea});for(let e=1;e<=s;e++)m.create("option",{attributes:{value:e},text:e,parent:this.elements.gotoPageSelect});this.elements.gotoPageSelect.value=this.state.currentPage,this.elements.gotoPageSelect.addEventListener("change",e=>{e=parseInt(e.target.value);1<=e&&e<=s&&this.changePage(e)})}else"textbox"===this.options.gotoPageArea&&(this.elements.gotoPageInput=m.create("input",{attributes:{type:"number",id:e,min:"1",max:s,value:this.state.currentPage,className:"ftable-page-goto-input",style:"width: 65px; margin-left: 4px;"},parent:this.elements.pagingGotoArea}),this.elements.gotoPageInput.addEventListener("change",e=>{var t=parseInt(e.target.value);1<=t&&t<=s?this.changePage(t):e.target.value=this.state.currentPage}))}}else this.elements.pagingGotoArea.style.display="none",this.elements.pagingGotoArea.innerHTML=""}createPageButton(e,t,s,a){a=m.create("span",{className:a+(s?" ftable-page-number-disabled":""),html:e,parent:this.elements.pagingListArea});s||(a.style.cursor="pointer",a.addEventListener("click",e=>{e.preventDefault(),this.changePage(t)}))}calculatePageNumbers(t){if(t<=7)return Array.from({length:t},(e,t)=>t+1);var s=this.state.currentPage,a=new Set([1,2,t-1,t]);for(let e=Math.max(1,s-1);e<=Math.min(t,s+1);e++)a.add(e);return Array.from(a).sort((e,t)=>e-t)}changePage(e){var t=Math.ceil(this.state.totalRecordCount/this.state.pageSize);(e=Math.max(1,Math.min(e,t)))!==this.state.currentPage&&(this.state.currentPage=e,this.load())}changePageSize(e){this.state.pageSize=e,this.state.currentPage=1,this.load(),this.saveState()}showLoadingIndicator(){0===this.options.loadingAnimationDelay?this.modals.loading&&this.modals.loading.show():this.loadingTimeout=setTimeout(()=>{this.modals.loading&&this.modals.loading.show(),this.loadingShownAt=Date.now()},this.options.loadingAnimationDelay||500)}hideLoadingIndicator(){this.loadingTimeout&&(clearTimeout(this.loadingTimeout),this.loadingTimeout=null);var e=this.loadingShownAt?Date.now()-this.loadingShownAt:0;this.modals.loading&&(e<200?setTimeout(()=>{this.modals.loading.hide()},200-e):this.modals.loading.hide()),this.loadingShownAt=null}showError(e){this.modals.error?(this.modals.error.setContent(`<p>${e}</p>`),this.modals.error.show()):alert(e)}showInfo(e){this.modals.info?(this.modals.info.setContent(`<p>${e}</p>`),this.modals.info.show()):alert(e)}reload(){return this.clearListCache(),this.load()}clearListCache(){this.options.actions.listAction&&"string"==typeof this.options.actions.listAction&&this.formBuilder.optionsCache.clear(this.options.actions.listAction)}getRowByKey(e){return this.elements.tableBody.querySelector(`[data-record-key="${e}"]`)}destroy(){this.element&&this.element.ftableInstance&&(this.element.ftableInstance=null),Object.values(this.modals).forEach(e=>e.destroy()),this.elements.mainContainer&&this.elements.mainContainer.remove(),this.searchTimeout&&clearTimeout(this.searchTimeout),this.loadingTimeout&&clearTimeout(this.loadingTimeout),window.removeEventListener("resize",this.handleResize),this.options=null,this.state=null,this.elements=null,this.formBuilder=null,this.modals=null}setOption(e,t){return this.options[e]=t,this}getState(){return{...this.state}}addFilter(t,e,s="equals"){return this.state.filters||(this.state.filters=[]),this.state.filters=this.state.filters.filter(e=>e.fieldName!==t),null!=e&&""!==e&&this.state.filters.push({fieldName:t,value:e,operator:s}),this}clearFilters(){return this.state.filters=[],this}exportToCSV(e="table-data.csv"){var t=this.columnList.map(e=>this.options.fields[e].title||e),s=this.state.records.map(t=>this.columnList.map(e=>{e=this.getDisplayText(t,e);return`"${String(e).replace(/"/g,'""')}"`})),t=[t.map(e=>`"${e}"`).join(","),...s.map(e=>e.join(","))].join("\n"),s=new Blob(["\ufeff"+t],{type:"text/csv;charset=utf-8;"}),t=document.createElement("a");t.href=URL.createObjectURL(s),t.download=e,t.click(),t.remove()}printTable(){var e=window.open("","_blank","width=800,height=600"),t=this.elements.table.outerHTML,t=`
+        `,document.head.appendChild(e))}createPagingUI(){this.elements.bottomPanel=m.create("div",{className:"ftable-bottom-panel",parent:this.elements.mainContainer}),this.elements.leftArea=m.create("div",{className:"ftable-left-area",parent:this.elements.bottomPanel}),this.elements.rightArea=m.create("div",{className:"ftable-right-area",parent:this.elements.bottomPanel}),this.elements.pagingListArea=m.create("div",{className:"ftable-page-list",parent:this.elements.leftArea}),this.elements.pagingGotoArea=m.create("div",{className:"ftable-page-goto",parent:this.elements.leftArea}),this.elements.pageInfoSpan=m.create("div",{className:"ftable-page-info",parent:this.elements.rightArea}),!1!==this.options.pageSizeChangeArea&&this.createPageSizeSelector()}createPageSizeSelector(){var e=m.create("span",{className:"ftable-page-size-change",parent:this.elements.leftArea});m.create("span",{text:this.options.messages.pageSizeChangeLabel,parent:e});let s=m.create("select",{className:"ftable-page-size-select",parent:e});(this.options.pageSizes||[10,25,50,100]).forEach(e=>{var t=m.create("option",{attributes:{value:e},text:e.toString(),parent:s});e===this.state.pageSize&&(t.selected=!0)}),s.addEventListener("change",e=>{this.changePageSize(parseInt(e.target.value))})}processFieldDefinitions(){this.fieldList=Object.keys(this.options.fields),this.fieldList.forEach(e=>{e=this.options.fields[e];!0===e.key?(void 0!==e.create&&e.create||(e.create=!0,e.type="hidden"),void 0!==e.edit&&e.edit||(e.edit=!0,e.type="hidden")):(e.create=e.create??!0,e.edit=e.edit??!0,e.list=e.list??!0,e.sorting=e.sorting??!0),e.visibility=e.visibility??"visible"}),this.columnList=this.fieldList.filter(e=>!1!==this.options.fields[e].list),this.keyField=this.fieldList.find(e=>!0===this.options.fields[e].key),this.keyField||this.logger.info("No key field defined")}async resolveAsyncFieldOptions(){this.formBuilder.storeOriginalFieldOptions();for(var t of this.columnList){var e=this.options.fields[t],s=this.formBuilder.originalFieldOptions.get(t)||e.options;if(s&&("function"==typeof s||"string"==typeof s)&&!Array.isArray(s)&&("object"!=typeof s||Array.isArray(s)||!(0<Object.keys(s).length)))try{var a={...e,options:s},i=await this.formBuilder.resolveOptions(a);e.options=i}catch(e){console.error(`Failed to resolve options for ${t}:`,e)}}}refreshDisplayValues(){var e=this.elements.tableBody.querySelectorAll(".ftable-data-row");0!==e.length&&e.forEach(a=>{this.columnList.forEach(e=>{var t,s=this.options.fields[e];s.options&&"function"!=typeof s.options&&"string"!=typeof s.options&&(t=a.querySelector(`td[data-field-name="${e}"]`))&&(e=this.getDisplayText(a.recordData,e),t.innerHTML=s.listEscapeHTML?m.escapeHtml(e):e)})})}createMainStructure(){this.elements.mainContainer=m.create("div",{className:"ftable-main-container",parent:this.element}),this.options.title&&(this.elements.titleDiv=m.create("div",{className:"ftable-title",parent:this.elements.mainContainer}),m.create("div",{className:"ftable-title-text",text:this.options.title,parent:this.elements.titleDiv})),this.elements.toolbarDiv=m.create("div",{className:"ftable-toolbar",parent:this.elements.titleDiv||this.elements.mainContainer}),this.elements.tableDiv=m.create("div",{className:"ftable-table-div",parent:this.elements.mainContainer})}createTable(){this.elements.table=m.create("table",{className:"ftable",parent:this.elements.tableDiv}),this.options.tableId&&(this.elements.table.id=this.options.tableId),this.createTableHeader(),this.createTableBody(),this.addNoDataRow()}createTableHeader(){var e=m.create("thead",{parent:this.elements.table});let o=m.create("tr",{parent:e});if(this.options.selecting&&this.options.selectingCheckboxes){var t=m.create("th",{className:"ftable-column-header ftable-column-header-select",parent:o});if(this.options.multiselect){let e=m.create("input",{attributes:{type:"checkbox"},parent:t});e.addEventListener("change",()=>{this.toggleSelectAll(e.checked)})}}this.columnList.forEach(t=>{var e=this.options.fields[t],s=m.create("th",{className:`ftable-column-header ${e.listClass||""} `+(e.listClassHeader||""),attributes:{"data-field-name":t},parent:o}),a=(e.width&&(s.style.width=e.width),m.create("div",{className:"ftable-column-header-container",parent:s})),i=(e.tooltip&&a.setAttribute("title",e.tooltip),m.create("span",{className:"ftable-column-header-text",text:e.title||t,parent:a}));this.options.sorting&&!1!==e.sorting&&(m.addClass(i,"ftable-sortable-text"),m.addClass(s,"ftable-column-header-sortable"),s.addEventListener("click",e=>{e.preventDefault(),this.lastSortEvent=e,this.sortByColumn(t)})),!1!==this.options.columnResizable&&!1!==e.columnResizable&&this.makeColumnResizable(s,a),"hidden"!==e.visibility&&"separator"!==e.visibility||m.hide(s)}),this.options.actions.updateAction&&m.create("th",{className:"ftable-command-column-header ftable-column-header-edit",parent:o}),this.options.actions.cloneAction&&m.create("th",{className:"ftable-command-column-header ftable-column-header-clone",parent:o}),this.options.actions.deleteAction&&m.create("th",{className:"ftable-command-column-header ftable-column-header-delete",parent:o}),this.options.toolbarsearch&&this.createSearchHeaderRow(e).catch(e=>{console.error("Failed to create search header row:",e)})}async createSearchHeaderRow(e){var t,s,a=m.create("tr",{className:"ftable-toolbarsearch-row",parent:e});this.options.selecting&&this.options.selectingCheckboxes&&m.create("th",{className:"ftable-toolbarsearch-column-header",parent:a});for(t of this.columnList){var i=this.options.fields[t],o=!1!==i.searchable,r=m.create("th",{className:"ftable-toolbarsearch-column-header",parent:a});if(o){o=m.create("div",{className:"ftable-column-header-container",parent:r});let e;!i.type&&i.options&&(i.type="select");var n,l,c,d="ftable-toolbarsearch-"+t;switch(i.type){case"date":case"datetime-local":"undefined"!=typeof FDatepicker?(n=i.dateFormat||this.options.defaultDateFormat,e=document.createElement("div"),l=m.create("input",{className:"ftable-toolbarsearch-extra",attributes:{type:"hidden","data-field-name":t,id:"ftable-toolbarsearch-extra-"+t}}),c=m.create("input",{className:"ftable-toolbarsearch",attributes:{id:"ftable-toolbarsearch-"+t,type:"text",placeholder:i.placeholder||"",readOnly:!0}}),e.appendChild(l),e.appendChild(c),new FDatepicker(c,{format:n,altField:"ftable-toolbarsearch-extra-"+t,altFormat:"Y-m-d"})):e=m.create("input",{className:"ftable-toolbarsearch",attributes:{type:"date","data-field-name":t,id:d}});break;case"checkbox":e=i.values?await this.createSelectForSearch(t,i,!0):m.create("input",{className:"ftable-toolbarsearch",attributes:{type:"text","data-field-name":t,id:d,placeholder:"Search..."}});break;case"select":e=i.options?await this.createSelectForSearch(t,i,!1):m.create("input",{className:"ftable-toolbarsearch",attributes:{type:"text","data-field-name":t,id:d,placeholder:"Search..."}});break;default:e=m.create("input",{className:"ftable-toolbarsearch",attributes:{type:"text","data-field-name":t,id:d,placeholder:"Search..."}})}e&&(o.appendChild(e),"SELECT"===e.tagName?e.addEventListener("change",e=>{this.handleSearchInputChange(e)}):e.addEventListener("input",e=>{this.handleSearchInputChange(e)}))}"hidden"!==i.visibility&&"separator"!==i.visibility||m.hide(r)}this.options.toolbarsearch&&this.options.toolbarreset&&(e=m.create("th",{className:"ftable-toolbarsearch-column-header ftable-toolbarsearch-reset",parent:a}),0<(s=(this.options.actions.updateAction?1:0)+(this.options.actions.deleteAction?1:0))?e.colSpan=s:m.addClass(e,"ftable-command-column-header"),m.create("button",{className:"ftable-toolbarsearch-reset-button",text:this.options.messages.resetSearch,parent:e}).addEventListener("click",()=>this.resetSearch()))}async createSelectForSearch(e,t,s){var a="ftable-toolbarsearch-"+e;let i=m.create("select",{attributes:{"data-field-name":e,id:a,class:"ftable-toolbarsearch"}}),o;return s&&t.values?o=Object.entries(t.values).map(([e,t])=>({Value:e,DisplayText:t})):t.options&&(o=await this.formBuilder.resolveOptions(t)),0<o?.length&&(""===o[0].Value||""===o[0].value||""===o[0]||""===o[0].DisplayText&&null==o[0].Value)||m.create("option",{attributes:{value:""},text:"",parent:i}),o&&Array.isArray(o)?o.forEach(e=>{m.create("option",{attributes:{value:void 0!==e.Value?e.Value:void 0!==e.value?e.value:e},text:e.DisplayText||e.text||e,parent:i})}):o&&"object"==typeof o&&Object.entries(o).forEach(([e,t])=>{m.create("option",{attributes:{value:e},text:t,parent:i})}),i}handleSearchInputChange(e){var e=e.target,t=e.getAttribute("data-field-name"),e=e.value.trim();e?this.state.searchQueries[t]=e:delete this.state.searchQueries[t],clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>{this.load()},this.options.searchDebounceMs)}resetSearch(){this.state.searchQueries={},this.elements.table.querySelectorAll(".ftable-toolbarsearch").forEach(e=>{"SELECT"===e.tagName?e.selectedIndex=0:e.value=""}),this.load()}getNextVisibleHeader(t){var s=Array.from(this.elements.table.querySelectorAll("thead th:not(.ftable-command-column-header, .ftable-toolbarsearch-column-header)"));for(let e=s.indexOf(t)+1;e<s.length;e++)if(null!==s[e].offsetParent)return s[e];return null}makeColumnResizable(a,e){this.elements.resizeBar||(this.elements.resizeBar=m.create("div",{className:"ftable-column-resize-bar",parent:this.elements.mainContainer}),m.hide(this.elements.resizeBar));e=m.create("div",{className:"ftable-column-resize-handler",parent:e});let i=!1,o=0,r=0,n,l=null,c=0,d=null,h=(e.addEventListener("mousedown",e=>{e.preventDefault(),e.stopPropagation(),i=!0,n=this.elements.mainContainer.getBoundingClientRect(),o=e.clientX,r=a.offsetWidth,(l=this.getNextVisibleHeader(a))&&(c=l.offsetWidth,e=l.dataset.fieldName,d=this.options.fields[e],e=a.getBoundingClientRect(),this.elements.resizeBar.style.left=e.right-n.left+"px",this.elements.resizeBar.style.top=e.top-n.top+"px",this.elements.resizeBar.style.height=this.elements.table.offsetHeight+"px",m.show(this.elements.resizeBar),document.addEventListener("mousemove",h),document.addEventListener("mouseup",p))}),e=>{i&&(this.elements.resizeBar.style.left=e.clientX-n.left+"px")}),p=e=>{var t,s;i&&(i=!1,e=e.clientX-o,s=n.width,t=Math.max(50,r+e)/s*100,l&&(e=Math.max(50,c-e)/s*100,d.width=e.toFixed(2)+"%",l.style.width=d.width),(s=this.options.fields[a.dataset.fieldName]).width=t.toFixed(2)+"%",a.style.width=s.width,this.normalizeColumnWidths(),this.options.saveUserPreferences&&this.saveColumnSettings(),m.hide(this.elements.resizeBar),document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",p))}}saveColumnSettings(){if(this.options.saveUserPreferences){let a={};this.columnList.forEach(e=>{var t,s=this.elements.table.querySelector(`[data-field-name="${e}"]`);s&&(t=this.options.fields[e],a[e]={width:s.style.width||t.width||"auto",visibility:t.visibility||"visible"})}),this.userPrefs.set("column-settings",JSON.stringify(a))}}saveState(){var e;this.options.saveUserPreferences&&(e={sorting:this.state.sorting,pageSize:this.state.pageSize},this.userPrefs.set("table-state",JSON.stringify(e)))}loadColumnSettings(){if(this.options.saveUserPreferences){var e=this.userPrefs.get("column-settings");if(e)try{var t=JSON.parse(e);Object.entries(t).forEach(([e,t])=>{e=this.options.fields[e];e&&(t.width&&(e.width=t.width),t.visibility)&&(e.visibility=t.visibility)})}catch(e){this.logger.warn("Failed to load column settings:",e)}}}loadState(){if(this.options.saveUserPreferences){var e=this.userPrefs.get("table-state");if(e)try{var t=JSON.parse(e);Array.isArray(t.sorting)&&(this.state.sorting=t.sorting),t.pageSize&&this.options.pageSizes.includes(t.pageSize)&&(this.state.pageSize=t.pageSize)}catch(e){this.logger.warn("Failed to load table state:",e)}}}createTableBody(){this.elements.tableBody=m.create("tbody",{parent:this.elements.table})}addNoDataRow(){var e,t;this.elements.tableBody.querySelector(".ftable-no-data-row")||(e=m.create("tr",{className:"ftable-no-data-row",parent:this.elements.tableBody}),t=this.elements.table.querySelector("thead tr").children.length,m.create("td",{attributes:{colspan:t},text:this.options.messages.noDataAvailable,parent:e}))}removeNoDataRow(){var e=this.elements.tableBody.querySelector(".ftable-no-data-row");e&&e.remove()}createModals(){this.options.actions.createAction&&this.createAddRecordModal(),this.options.actions.updateAction&&this.createEditRecordModal(),this.options.actions.deleteAction&&this.createDeleteConfirmModal(),this.createErrorModal(),this.createInfoModal(),this.createLoadingModal(),Object.values(this.modals).forEach(e=>e.create())}createAddRecordModal(){this.modals.addRecord=new e({parent:this.elements.mainContainer,title:this.options.messages.addNewRecord,className:"ftable-add-modal",buttons:[{text:this.options.messages.cancel,className:"ftable-dialog-cancelbutton",onClick:()=>{this.modals.addRecord.close(),this.emit("formClosed",{form:this.currentForm,formType:"create",record:null})}},{text:this.options.messages.save,className:"ftable-dialog-savebutton",onClick:()=>this.saveNewRecord()}]})}createEditRecordModal(){this.modals.editRecord=new e({parent:this.elements.mainContainer,title:this.options.messages.editRecord,className:"ftable-edit-modal",buttons:[{text:this.options.messages.cancel,className:"ftable-dialog-cancelbutton",onClick:()=>{this.emit("formClosed",{form:this.currentForm,formType:"edit",record:null}),this.modals.editRecord.close()}},{text:this.options.messages.save,className:"ftable-dialog-savebutton",onClick:()=>this.saveEditedRecord()}]})}createDeleteConfirmModal(){this.modals.deleteConfirm=new e({parent:this.elements.mainContainer,title:this.options.messages.areYouSure,className:"ftable-delete-modal",buttons:[{text:this.options.messages.cancel,className:"ftable-dialog-cancelbutton",onClick:()=>this.modals.deleteConfirm.close()},{text:this.options.messages.deleteText,className:"ftable-dialog-deletebutton",onClick:()=>this.confirmDelete()}]})}createErrorModal(){this.modals.error=new e({parent:this.elements.mainContainer,title:this.options.messages.error,className:"ftable-error-modal",buttons:[{text:this.options.messages.close,className:"ftable-dialog-closebutton",onClick:()=>this.modals.error.close()}]})}createInfoModal(){this.modals.info=new e({parent:this.elements.mainContainer,title:"",className:"ftable-info-modal",buttons:[{text:this.options.messages.close,className:"ftable-dialog-closebutton",onClick:()=>this.modals.info.close()}]})}createLoadingModal(){this.modals.loading=new e({parent:this.elements.mainContainer,title:"",className:"ftable-loading-modal",content:`<div class="ftable-loading-message">${this.options.messages.loadingMessage}</div>`})}bindEvents(){this.subscribeOptionEvents(),this.createCustomToolbarItems(),this.createToolbarButtons(),this.bindKeyboardEvents(),!1!==this.options.columnSelectable&&this.createColumnSelectionMenu()}subscribeOptionEvents(){["formCreated","formClosed","recordsLoaded","recordAdded","recordUpdated","recordDeleted","selectionChanged"].forEach(e=>{"function"==typeof this.options[e]&&this.on(e,this.options[e])})}createColumnSelectionMenu(){this.elements.columnSelectionOverlay=null,this.elements.columnSelectionMenu=null,this.elements.table.querySelector("thead").addEventListener("contextmenu",e=>{e.preventDefault(),this.showColumnSelectionMenu(e)})}showColumnSelectionMenu(e){this.hideColumnSelectionMenu(),this.elements.columnSelectionOverlay=m.create("div",{className:"ftable-contextmenu-overlay",parent:document.body}),this.elements.columnSelectionMenu=m.create("div",{className:"ftable-column-selection-container",parent:document.body}),this.populateColumnSelectionMenu(),this.positionColumnSelectionMenu(e),this.elements.columnSelectionOverlay.addEventListener("click",e=>{e.target===this.elements.columnSelectionOverlay&&this.hideColumnSelectionMenu()}),this.elements.columnSelectionOverlay.addEventListener("contextmenu",e=>{e.preventDefault(),this.hideColumnSelectionMenu()})}populateColumnSelectionMenu(){let l=m.create("ul",{className:"ftable-column-select-list",parent:this.elements.columnSelectionMenu});this.columnList.forEach(t=>{var e=this.options.fields[t],s="hidden"!==e.visibility,a="fixed"===e.visibility,i="separator"===e.visibility,o=this.isFieldSorted(t),r=m.create("li",{className:"ftable-column-select-item",parent:l}),n=m.create("label",{className:"ftable-column-select-label",parent:r});if(!i){let e=m.create("input",{attributes:{type:"checkbox",id:"column-"+t},parent:n});e.checked=s,(a||o&&s)&&(e.disabled=!0,r.style.opacity="0.6"),e.disabled||e.addEventListener("change",()=>{this.setColumnVisibility(t,e.checked)})}a=m.create("span",{text:e.title||t,style:i?"font-weight: bold;":null,parent:n});o&&((s=m.create("span",{className:"ftable-sort-indicator",text:" (sorted)",parent:a})).style.fontSize="0.8em",s.style.color="#666")})}positionColumnSelectionMenu(e){var t=this,s=e.pageX,e=e.pageY,e=(t.elements.columnSelectionMenu.style.position="absolute",t.elements.columnSelectionMenu.style.left=s+"px",t.elements.columnSelectionMenu.style.top=e+"px",t.elements.columnSelectionMenu.style.minWidth="100px",t.elements.columnSelectionMenu.style.boxSizing="border-box",t.elements.columnSelectionMenu.offsetWidth),a=window.innerWidth;a<s+e&&(s=Math.max(10,a-e-10),t.elements.columnSelectionMenu.style.left=s+"px")}hideColumnSelectionMenu(){this.elements.columnSelectionOverlay&&(this.elements.columnSelectionOverlay.remove(),this.elements.columnSelectionMenu.remove(),this.elements.columnSelectionOverlay=null,this.elements.columnSelectionMenu=null)}isFieldSorted(t){return this.state.sorting.some(e=>e.fieldName===t)}createToolbarButtons(){this.options.csvExport&&this.addToolbarButton({text:this.options.messages.csvExport,className:"ftable-toolbar-item-csv",onClick:()=>{var e=this.options.title?this.options.title.replace(/[^a-z0-9]/gi,"-").toLowerCase()+".csv":"table-export.csv";this.exportToCSV(e)}}),this.options.printTable&&this.addToolbarButton({text:this.options.messages.printTable,className:"ftable-toolbar-item-print",onClick:()=>{this.printTable()}}),this.options.actions.createAction&&this.addToolbarButton({text:this.options.messages.addNewRecord,className:"ftable-toolbar-item-add-record",addIconSpan:!0,onClick:()=>this.showAddRecordForm()})}addToolbarButton(e){var t=m.create("span",{className:"ftable-toolbar-item "+(e.className||""),parent:this.elements.toolbarDiv});if(e.addIconSpan)m.create("span",{className:"ftable-toolbar-item-icon "+(e.className||""),parent:t});let s=m.create("span",{className:"ftable-toolbar-item-text "+(e.className||""),text:e.text,parent:t});return e.onClick&&t.addEventListener("click",e.onClick),t}createCustomToolbarItems(){this.options.toolbar&&this.options.toolbar.items&&this.options.toolbar.items.forEach(t=>{var e=m.create("span",{className:"ftable-toolbar-item ftable-toolbar-item-custom "+(t.buttonClass||""),parent:this.elements.toolbarDiv});t.tooltip&&e.setAttribute("title",t.tooltip),t.icon&&m.create("img",{attributes:{src:t.icon,alt:"",width:16,height:16,style:"margin-right: 6px; vertical-align: middle;"},parent:e}),t.text&&m.create("span",{text:t.text,className:"ftable-toolbar-item-text ftable-toolbar-item-custom-text "+(t.buttonTextClass||""),parent:e}),"function"==typeof t.click&&e.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),t.click()})})}bindKeyboardEvents(){this.options.selecting&&(this.shiftKeyDown=!1,document.addEventListener("keydown",e=>{"Shift"===e.key&&(this.shiftKeyDown=!0)}),document.addEventListener("keyup",e=>{"Shift"===e.key&&(this.shiftKeyDown=!1)}))}setupFTableUserPreferences(){var e;this.options.saveUserPreferences&&(e=this.userPrefs.generatePrefix(this.options.tableId||"",this.fieldList),this.userPrefs=new i(e,this.options.saveUserPreferencesMethod),this.loadState(),this.loadColumnSettings())}async load(e={}){if(!this.state.isLoading){this.state.isLoading=!0,this.showLoadingIndicator();try{var t={...e,...this.buildLoadParams()},s=await this.performLoad(t);this.processLoadedData(s),this.emit("recordsLoaded",{records:s.Records,serverResponse:s})}catch(e){this.showError(this.options.messages.serverCommunicationError),this.logger.error("Load failed: "+e.message)}finally{this.state.isLoading=!1,this.hideLoadingIndicator()}this.renderSortingInfo(),this.normalizeColumnWidths()}}buildLoadParams(){var e,t={};if(this.options.paging&&(this.state.pageSize||(this.state.pageSize=this.options.pageSize),t.jtStartIndex=(this.state.currentPage-1)*this.state.pageSize,t.jtPageSize=this.state.pageSize),this.options.sorting&&(0<this.state.sorting.length?t.jtSorting=this.state.sorting.map(e=>e.fieldName+" "+e.direction).join(", "):this.options.defaultSorting&&(t.jtSorting=this.parseDefaultSorting(this.options.defaultSorting).map(e=>e.fieldName+" "+e.direction).join(", "))),this.options.toolbarsearch&&0<Object.keys(this.state.searchQueries).length){let s=[],a=[];Object.entries(this.state.searchQueries).forEach(([e,t])=>{""!==t&&(s.push(t),a.push(e))}),0<s.length&&(t.q=s,t.opt=a)}return"function"==typeof this.options.listQueryParams&&(e=this.options.listQueryParams(),Object.assign(t,e)),t}isCacheExpired(e,t){return!e||!e.timestamp||t<Date.now()-e.timestamp}async performLoad(e){var t=this.options.actions.listAction;if(this.options.listCache&&"string"==typeof t){var s=this.formBuilder.optionsCache.get(t,e);if(s&&!this.isCacheExpired(s,this.options.listCache))return s.data}let a;if("function"==typeof t)a=await t(e);else{if("string"!=typeof t)throw new Error("No valid listAction provided");a=this.options.forcePost?await l.post(t,e):await l.get(t,e)}if(a&&"OK"===a.Result)return this.options.listCache&&"string"==typeof t&&this.formBuilder.optionsCache.set(t,e,{data:a,timestamp:Date.now()}),a;throw new Error(a?.Message||"Invalid response from server")}processLoadedData(e){"OK"!==e.Result?this.showError(e.Message||"Unknown error occurred"):(this.state.records=e.Records||[],this.state.totalRecordCount=e.TotalRecordCount||this.state.records.length,this.renderTableData(),this.updatePagingInfo())}renderTableData(){this.elements.tableBody.querySelectorAll(".ftable-data-row").forEach(e=>e.remove()),0===this.state.records.length?this.addNoDataRow():(this.removeNoDataRow(),this.state.records.forEach(e=>{e=this.createTableRow(e);this.elements.tableBody.appendChild(e)}),this.refreshRowStyles(),this.refreshDisplayValues())}createTableRow(t){let s=m.create("tr",{className:"ftable-data-row",attributes:{"data-record-key":this.getKeyValue(t)}}),e=(s.recordData=t,this.options.selecting&&this.options.selectingCheckboxes&&this.addSelectingCell(s),this.columnList.forEach(e=>{this.addDataCell(s,t,e)}),0);return this.options.actions.updateAction&&(this.addEditCell(s),e++),this.options.actions.cloneAction&&(this.addCloneCell(s),e++),this.options.actions.deleteAction&&(this.addDeleteCell(s),e++),this.options.selecting&&this.makeRowSelectable(s),s}addSelectingCell(t){var e=m.create("td",{className:"ftable-command-column ftable-selecting-column",parent:t});m.create("input",{className:"norowselectonclick",attributes:{type:"checkbox"},parent:e}).addEventListener("change",e=>{this.toggleRowSelection(t)})}addDataCell(e,t,s){var a=this.options.fields[s],t=this.getDisplayText(t,s),t=m.create("td",{className:`${a.listClass||""} `+(a.listClassEntry||""),html:a.listEscapeHTML?m.escapeHtml(t):t,attributes:{"data-field-name":s},parent:e});"fixed"!==a.visibility&&"hidden"===a.visibility&&m.hide(t)}addEditCell(t){var e=m.create("td",{className:"ftable-command-column",parent:t});m.create("button",{className:"ftable-command-button ftable-edit-command-button",attributes:{title:this.options.messages.editRecord},html:`<span>${this.options.messages.editRecord}</span>`,parent:e}).addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),this.editRecord(t)})}addCloneCell(t){var e=m.create("td",{className:"ftable-command-column",parent:t});m.create("button",{className:"ftable-command-button ftable-clone-command-button",attributes:{title:this.options.messages.cloneRecord||"Clone"},html:`<span>${this.options.messages.cloneRecord||"Clone"}</span>`,parent:e}).addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),this.cloneRecord(t)})}addDeleteCell(t){var e=m.create("td",{className:"ftable-command-column",parent:t});m.create("button",{className:"ftable-command-button ftable-delete-command-button",attributes:{title:this.options.messages.deleteText},html:`<span>${this.options.messages.deleteText}</span>`,parent:e}).addEventListener("click",e=>{e.preventDefault(),e.stopPropagation(),this.deleteRecord(t)})}getDisplayText(e,t){var s=this.options.fields[t],a=e[t];return s.display&&"function"==typeof s.display?s.display({record:e}):"date"===s.type&&a?"undefined"!=typeof FDatepicker?FDatepicker.formatDate(this._parseDate(a),s.dateFormat||this.options.defaultDateFormat):this.formatDate(a,s.dateLocale||this.options.defaultDateLocale):"datetime-local"===s.type&&a?"undefined"!=typeof FDatepicker?FDatepicker.formatDate(this._parseDate(a),s.dateFormat||this.options.defaultDateFormat):this.formatDateTime(a,s.dateLocale||this.options.defaultDateLocale):"checkbox"===s.type?this.getCheckboxText(t,a):s.options?(e=this.findOptionByValue(s.options,a))?e.DisplayText||e.text||e:a:a||""}_parseDate(e){return e.includes("Date")?new Date(parseInt(e.substr(6),10)):10==e.length?new Date(parseInt(e.substr(0,4),10),parseInt(e.substr(5,2),10)-1,parseInt(e.substr(8,2),10)):19==e.length?new Date(parseInt(e.substr(0,4),10),parseInt(e.substr(5,2),10)-1,parseInt(e.substr(8,2),10),parseInt(e.substr(11,2),10),parseInt(e.substr(14,2),10),parseInt(e.substr(17,2),10)):new Date(e)}formatDate(e,t){if(!e)return"";var s=this._parseDate(e);try{return isNaN(s.getTime())?e:s.toLocaleDateString(t,{year:"numeric",month:"2-digit",day:"2-digit"})}catch{return e}}formatDateTime(e,t){if(!e)return"";var s=this._parseDate(e);try{return isNaN(s.getTime())?e:s.toLocaleString(t)}catch{return e}}getCheckboxText(e,t){e=this.options.fields[e];return e.values&&e.values[t]?e.values[t]:t?"Yes":"No"}findOptionByValue(e,t){return Array.isArray(e)?e.find(e=>(e.Value||e.value)===t||e===t):null}refreshRowStyles(){this.elements.tableBody.querySelectorAll(".ftable-data-row").forEach((e,t)=>{t%2==0?m.addClass(e,"ftable-row-even"):m.removeClass(e,"ftable-row-even")})}getKeyValue(e){return this.keyField?e[this.keyField]:null}async showAddRecordForm(){var e=await this.formBuilder.createForm("create");this.modals.addRecord.setContent(e),this.modals.addRecord.show(),this.currentForm=e,this.emit("formCreated",{form:e,formType:"create",record:null})}async saveNewRecord(){if(this.currentForm)if(this.currentForm.checkValidity()){var e=this.getFormData(this.currentForm);try{var t=await this.performCreate(e);"OK"===t.Result?(this.clearListCache(),this.modals.addRecord.close(),this.emit("formClosed",{form:this.currentForm,formType:"create",record:null}),t.Message&&this.showInfo(t.Message),await this.load(),this.emit("recordAdded",{record:t.Record})):this.showError(t.Message||"Create failed")}catch(e){this.showError(this.options.messages.serverCommunicationError),this.logger.error("Create failed: "+e.message)}}else this.currentForm.reportValidity()}async editRecord(e){var t=e.recordData,s=await this.formBuilder.createForm("edit",t);this.modals.editRecord.setContent(s),this.modals.editRecord.show(),this.currentForm=s,this.currentEditingRow=e,this.emit("formCreated",{form:s,formType:"edit",record:t})}async saveEditedRecord(){if(this.currentForm&&this.currentEditingRow)if(this.currentForm.checkValidity()){var e=this.getFormData(this.currentForm);try{var t=await this.performUpdate(e);"OK"===t.Result?(this.clearListCache(),this.modals.editRecord.close(),this.emit("formClosed",{form:this.currentForm,formType:"edit",record:this.currentEditingRow.recordData}),this.updateRowData(this.currentEditingRow,t.Record||e),t.Message&&this.showInfo(t.Message),this.emit("recordUpdated",{record:t.Record||e,row:this.currentEditingRow})):this.showError(t.Message||"Update failed")}catch(e){this.showError(this.options.messages.serverCommunicationError),this.logger.error("Update failed: "+e.message)}}else this.currentForm.reportValidity()}async cloneRecord(e){var e={...e.recordData},t=(this.keyField&&(e[this.keyField]=""),await this.formBuilder.createForm("create",e));this.modals.addRecord.options.content=t,this.modals.addRecord.setContent(t),this.modals.addRecord.show(),this.currentForm=t,this.emit("formCreated",{form:t,formType:"create",record:e})}async deleteRows(e){if(e.length){var t=this.options.messages.areYouSure;if(confirm(t)){var s,a=[];for(s of e)try{var i=await this.performDelete(s);a.push({key:s,success:"OK"===i.Result,result:i})}catch(e){a.push({key:s,success:!1,error:e.message})}a.filter(e=>e.success).forEach(({key:e})=>{e=this.getRowByKey(e);e&&this.removeRowFromTable(e)});t=a.filter(e=>!e.success).length;0<t&&this.showError(t+` of ${a.length} records could not be deleted`),this.refreshRowStyles(),this.updatePagingInfo()}}}deleteRecord(e){var t=e.recordData;let s=this.options.messages.deleteConfirmation;if("function"==typeof this.options.deleteConfirmation){t={row:e,record:t,deleteConfirmMessage:s,cancel:!1,cancelMessage:this.options.messages.cancel};if(this.options.deleteConfirmation(t),t.cancel)return void(t.cancelMessage&&this.showError(t.cancelMessage));s=t.deleteConfirmMessage}this.modals.deleteConfirm.setContent(`<p>${s}</p>`),this.modals.deleteConfirm.show(),this.currentDeletingRow=e}async confirmDelete(){if(this.currentDeletingRow){var e=this.getKeyValue(this.currentDeletingRow.recordData);try{var t=await this.performDelete(e);"OK"===t.Result?(this.clearListCache(),this.modals.deleteConfirm.close(),this.removeRowFromTable(this.currentDeletingRow),t.Message&&this.showInfo(t.Message),this.emit("recordDeleted",{record:this.currentDeletingRow.recordData})):this.showError(t.Message||"Delete failed")}catch(e){this.showError(this.options.messages.serverCommunicationError),this.logger.error("Delete failed: "+e.message)}}}async performCreate(e){var t=this.options.actions.createAction;if("function"==typeof t)return t(e);if("string"==typeof t)return l.post(t,e);throw new Error("No valid createAction provided")}async performUpdate(e){var t=this.options.actions.updateAction;if("function"==typeof t)return t(e);if("string"==typeof t)return l.post(t,e);throw new Error("No valid updateAction provided")}async performDelete(e){var t=this.options.actions.deleteAction,e={[this.keyField]:e};if("function"==typeof t)return t(e);if("string"==typeof t)return l.post(t,e);throw new Error("No valid deleteAction provided")}getFormData(e){var t,s,a,i={};for([t,s]of new FormData(e).entries())t.endsWith("[]")?(i[a=t.slice(0,-2)]||(i[a]=[]),i[a].push(s)):i.hasOwnProperty(t)?Array.isArray(i[t])?i[t].push(s):i[t]=[i[t],s]:i[t]=s;return i}updateRowData(a,e){a.recordData={...a.recordData,...e},Object.keys(e).forEach(e=>{var t,s=this.options.fields[e];s&&(t=a.querySelector(`td[data-field-name="${e}"]`))&&(e=this.getDisplayText(a.recordData,e),t.innerHTML=s.listEscapeHTML?m.escapeHtml(e):e,t.className=(`${s.listClass||""} `+(s.listClassEntry||"")).trim())})}removeRowFromTable(e){e.remove(),0===this.elements.tableBody.querySelectorAll(".ftable-data-row").length&&this.addNoDataRow(),this.refreshRowStyles()}makeRowSelectable(t){!1!==this.options.selectOnRowClick&&t.addEventListener("click",e=>{["INPUT","BUTTON","SELECT","TEXTAREA","A"].includes(e.target.tagName)||e.target.classList.contains("norowselectonclick")||this.toggleRowSelection(t)})}toggleRowSelection(e){var t=e.classList.contains("ftable-row-selected");this.options.multiselect||this.clearAllSelections(),t?this.deselectRow(e):this.selectRow(e),this.emit("selectionChanged",{selectedRows:this.getSelectedRows()})}selectRow(e){m.addClass(e,"ftable-row-selected");var t=e.querySelector('input[type="checkbox"]'),t=(t&&(t.checked=!0),this.getKeyValue(e.recordData));t&&this.state.selectedRecords.add(t)}deselectRow(e){m.removeClass(e,"ftable-row-selected");var t=e.querySelector('input[type="checkbox"]'),t=(t&&(t.checked=!1),this.getKeyValue(e.recordData));t&&this.state.selectedRecords.delete(t)}recalcColumnWidths(){this.columnList.forEach(e=>{var t=this.options.fields[e],e=this.elements.table.querySelector(`[data-field-name="${e}"]`);e&&t.width&&(e.style.width=t.width)}),this.elements.table.offsetHeight}recalcColumnWidthsOnce(){this._recalculatedOnce||(this.recalcColumnWidths(),this._recalculatedOnce=!0)}clearAllSelections(){this.elements.tableBody.querySelectorAll(".ftable-row-selected").forEach(e=>this.deselectRow(e))}toggleSelectAll(t){this.elements.tableBody.querySelectorAll(".ftable-data-row").forEach(e=>{t?this.selectRow(e):this.deselectRow(e)}),this.emit("selectionChanged",{selectedRows:this.getSelectedRows()})}getSelectedRows(){return Array.from(this.elements.tableBody.querySelectorAll(".ftable-row-selected"))}sortByColumn(s){var a=this.options.fields[s];if(a&&!1!==a.sorting){a=this.state.sorting.findIndex(e=>e.fieldName===s);let e=!0,t="ASC";0<=a?"ASC"===this.state.sorting[a].direction?(t="DESC",this.state.sorting[a].direction=t):(this.state.sorting.splice(a,1),e=!1):this.state.sorting.push({fieldName:s,direction:t});a=this.lastSortEvent?.ctrlKey||this.lastSortEvent?.metaKey;(!this.options.multiSorting||this.options.multiSortingCtrlKey&&!a)&&(this.state.sorting=e?[{fieldName:s,direction:t}]:[]),this.updateSortingHeaders(),this.load(),this.saveState()}}updateSortingHeaders(){this.elements.table.querySelectorAll(".ftable-column-header-sortable").forEach(e=>{m.removeClass(e,"ftable-column-header-sorted-asc ftable-column-header-sorted-desc")}),this.state.sorting.forEach(e=>{var t=this.elements.table.querySelector(`[data-field-name="${e.fieldName}"]`);t&&m.addClass(t,"ftable-column-header-sorted-"+e.direction.toLowerCase())})}updatePagingInfo(){var e,t,s;this.options.paging&&this.elements.pageInfoSpan&&(this.state.totalRecordCount<=0?(this.elements.pageInfoSpan.textContent="",this.elements.pagingListArea.innerHTML=""):(e=(this.state.currentPage-1)*this.state.pageSize+1,t=Math.min(this.state.currentPage*this.state.pageSize,this.state.totalRecordCount),s=this.options.messages.pagingInfo||"Showing {0}-{1} of {2}",this.elements.pageInfoSpan.textContent=s.replace(/\{0\}/g,e).replace(/\{1\}/g,t).replace(/\{2\}/g,this.state.totalRecordCount),this.createPageListNavigation(),this.createPageGotoNavigation()))}createPageListNavigation(){if(this.elements.pagingListArea){this.elements.pagingListArea.innerHTML="";var e=Math.ceil(this.state.totalRecordCount/this.state.pageSize);if(!(e<=1)){if(this.createPageButton("&laquo;",1,1===this.state.currentPage,"ftable-page-number-first"),this.createPageButton("&lsaquo;",this.state.currentPage-1,1===this.state.currentPage,"ftable-page-number-previous"),"normal"==this.options.pageList){var s=this.calculatePageNumbers(e);let t=0;s.forEach(e=>{1<e-t&&m.create("span",{className:"ftable-page-number-space",text:"...",parent:this.elements.pagingListArea}),this.createPageButton(e.toString(),e,!1,e===this.state.currentPage?"ftable-page-number ftable-page-number-active":"ftable-page-number"),t=e})}this.createPageButton("&rsaquo;",this.state.currentPage+1,this.state.currentPage>=e,"ftable-page-number-next"),this.createPageButton("&raquo;",e,this.state.currentPage>=e,"ftable-page-number-last")}}}createPageGotoNavigation(){if(this.options.paging&&"none"!==this.options.gotoPageArea){let s=Math.ceil(this.state.totalRecordCount/this.state.pageSize);if(s<=1)this.elements.pagingGotoArea.style.display="none",this.elements.pagingGotoArea.innerHTML="";else{this.elements.pagingGotoArea.style.display="inline-block",this.elements.pagingGotoArea.innerHTML="";m.create("span",{text:this.options.messages.gotoPageLabel+": ",parent:this.elements.pagingGotoArea});var e="ftable-goto-page-"+(this.options.tableId||"default");if("combobox"===this.options.gotoPageArea){this.elements.gotoPageSelect=m.create("select",{id:e,className:"ftable-page-goto-select",parent:this.elements.pagingGotoArea});for(let e=1;e<=s;e++)m.create("option",{attributes:{value:e},text:e,parent:this.elements.gotoPageSelect});this.elements.gotoPageSelect.value=this.state.currentPage,this.elements.gotoPageSelect.addEventListener("change",e=>{e=parseInt(e.target.value);1<=e&&e<=s&&this.changePage(e)})}else"textbox"===this.options.gotoPageArea&&(this.elements.gotoPageInput=m.create("input",{attributes:{type:"number",id:e,min:"1",max:s,value:this.state.currentPage,className:"ftable-page-goto-input",style:"width: 65px; margin-left: 4px;"},parent:this.elements.pagingGotoArea}),this.elements.gotoPageInput.addEventListener("change",e=>{var t=parseInt(e.target.value);1<=t&&t<=s?this.changePage(t):e.target.value=this.state.currentPage}))}}else this.elements.pagingGotoArea.style.display="none",this.elements.pagingGotoArea.innerHTML=""}createPageButton(e,t,s,a){a=m.create("span",{className:a+(s?" ftable-page-number-disabled":""),html:e,parent:this.elements.pagingListArea});s||(a.style.cursor="pointer",a.addEventListener("click",e=>{e.preventDefault(),this.changePage(t)}))}calculatePageNumbers(t){if(t<=7)return Array.from({length:t},(e,t)=>t+1);var s=this.state.currentPage,a=new Set([1,2,t-1,t]);for(let e=Math.max(1,s-1);e<=Math.min(t,s+1);e++)a.add(e);return Array.from(a).sort((e,t)=>e-t)}changePage(e){var t=Math.ceil(this.state.totalRecordCount/this.state.pageSize);(e=Math.max(1,Math.min(e,t)))!==this.state.currentPage&&(this.state.currentPage=e,this.load())}changePageSize(e){this.state.pageSize=e,this.state.currentPage=1,this.load(),this.saveState()}showLoadingIndicator(){0===this.options.loadingAnimationDelay?this.modals.loading&&this.modals.loading.show():this.loadingTimeout=setTimeout(()=>{this.modals.loading&&this.modals.loading.show(),this.loadingShownAt=Date.now()},this.options.loadingAnimationDelay||500)}hideLoadingIndicator(){this.loadingTimeout&&(clearTimeout(this.loadingTimeout),this.loadingTimeout=null);var e=this.loadingShownAt?Date.now()-this.loadingShownAt:0;this.modals.loading&&(e<200?setTimeout(()=>{this.modals.loading.hide()},200-e):this.modals.loading.hide()),this.loadingShownAt=null}showError(e){this.modals.error?(this.modals.error.setContent(`<p>${e}</p>`),this.modals.error.show()):alert(e)}showInfo(e){this.modals.info?(this.modals.info.setContent(`<p>${e}</p>`),this.modals.info.show()):alert(e)}reload(){return this.clearListCache(),this.load()}clearListCache(){this.options.actions.listAction&&"string"==typeof this.options.actions.listAction&&this.formBuilder.optionsCache.clear(this.options.actions.listAction)}getRowByKey(e){return this.elements.tableBody.querySelector(`[data-record-key="${e}"]`)}destroy(){this.element&&this.element.ftableInstance&&(this.element.ftableInstance=null),Object.values(this.modals).forEach(e=>e.destroy()),this.elements.mainContainer&&this.elements.mainContainer.remove(),this.searchTimeout&&clearTimeout(this.searchTimeout),this.loadingTimeout&&clearTimeout(this.loadingTimeout),window.removeEventListener("resize",this.handleResize),this.options=null,this.state=null,this.elements=null,this.formBuilder=null,this.modals=null}setOption(e,t){return this.options[e]=t,this}getState(){return{...this.state}}addFilter(t,e,s="equals"){return this.state.filters||(this.state.filters=[]),this.state.filters=this.state.filters.filter(e=>e.fieldName!==t),null!=e&&""!==e&&this.state.filters.push({fieldName:t,value:e,operator:s}),this}clearFilters(){return this.state.filters=[],this}exportToCSV(e="table-data.csv"){var t=this.columnList.map(e=>this.options.fields[e].title||e),s=this.state.records.map(t=>this.columnList.map(e=>{e=this.getDisplayText(t,e);return`"${String(e).replace(/"/g,'""')}"`})),t=[t.map(e=>`"${e}"`).join(","),...s.map(e=>e.join(","))].join("\n"),s=new Blob(["\ufeff"+t],{type:"text/csv;charset=utf-8;"}),t=document.createElement("a");t.href=URL.createObjectURL(s),t.download=e,t.click(),t.remove()}printTable(){var e=window.open("","_blank","width=800,height=600"),t=this.elements.table.outerHTML,t=`
             <!DOCTYPE html>
             <html>
             <head>

package/ftable.umd.js

@@ -1880,7 +1880,7 @@ class FTable extends FTableEventEmitter {
                 container.setAttribute('title', field.tooltip);
             }
 
-            FTableDOMHelper.create('span', {
+            const textHeader = FTableDOMHelper.create('span', {
                 className: 'ftable-column-header-text',
                 text: field.title || fieldName,
                 parent: container
@@ -1888,6 +1888,10 @@ class FTable extends FTableEventEmitter {
 
             // Make sortable if enabled
             if (this.options.sorting && field.sorting !== false) {
+                // Add some empty spaces after the text so the background icon has room next to it
+                // one could play with css and ::after, but then the width calculation of columns borks, resize bar is off etc ...
+                //textHeader.innerHTML += '     ';
+                FTableDOMHelper.addClass(textHeader, 'ftable-sortable-text'); // Add class for spacing
                 FTableDOMHelper.addClass(th, 'ftable-column-header-sortable');
                 th.addEventListener('click', (e) => {
                     e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liedekef/ftable",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Modern, lightweight, jQuery-free CRUD table for dynamic AJAX-powered tables.",
   "main": "ftable.js",
   "module": "ftable.esm.js",

package/themes/basic/ftable_basic.css

@@ -10,12 +10,6 @@ div.ftable-main-container div.ftable-title {
   position: relative;
   text-align: left;
 }
-div.ftable-main-container div.ftable-title .ftable-close-button {
-  right: 0px;
-  top: 0px;
-  bottom: 0px;
-  position: absolute;
-}
 div.ftable-main-container div.ftable-title div.ftable-toolbar {
   bottom: 0px;
   right: 0px;
@@ -39,14 +33,23 @@ div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-it
   width: 16px;
   height: 16px;
 }
+div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record {
+  display: inline-flex;
+  align-items: center;
+  background-color: transparent;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record::before {
+  content: "➕";
+  font-size: 14px;
+}
 div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-text {
   display: inline-block;
   margin: 2px;
   vertical-align: middle;
 }
-div.ftable-main-container div.ftable-title .ftable-close-button + div.ftable-toolbar {
-  margin-right: 30px;
-}
 div.ftable-main-container table.ftable {
   width: 100%;
 }
@@ -121,6 +124,48 @@ div.ftable-main-container table.ftable tbody tr > td.ftable-selecting-column {
 div.ftable-main-container table.ftable tbody tr > td.ftable-selecting-column input {
   cursor: pointer;
 }
+div.ftable-main-container table.ftable tbody tr > td .ftable-edit-command-button {
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+}
+div.ftable-main-container table.ftable tbody tr > td .ftable-edit-command-button::before {
+  content: "📝";
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+div.ftable-main-container table.ftable tbody tr > td .ftable-clone-command-button {
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+}
+div.ftable-main-container table.ftable tbody tr > td .ftable-clone-command-button::before {
+  content: "📋";
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+div.ftable-main-container table.ftable tbody tr > td .ftable-delete-command-button {
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+}
+div.ftable-main-container table.ftable tbody tr > td .ftable-delete-command-button::before {
+  content: "🗑️ ";
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
 div.ftable-main-container table.ftable tbody tr.ftable-no-data-row {
   text-align: center;
 }
@@ -329,38 +374,30 @@ div.ftable-column-selection-container ul.ftable-column-select-list li input[type
 .ftable-yesno-check-input:checked ~ .ftable-yesno-check-text:before {
   content: attr(data-yes);
 }
-div.ftable-main-container div.ftable-title div.ftable-title-text {
-  font-size: 16px;
-  font-weight: bold;
-}
-div.ftable-main-container div.ftable-title .ftable-close-button {
-  background: url('close.png') no-repeat;
-  width: 16px;
-  height: 16px;
-}
-div.ftable-main-container table.ftable thead th.ftable-column-header-sortable div.ftable-column-header-container {
-  background: url('column-sortable.png') no-repeat right;
+.ftable-sortable-text {
+  padding-right: 20px;
+  /* Space for sort indicator */
 }
-div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-asc div.ftable-column-header-container {
-  background: url('column-asc.png') no-repeat right;
-}
-div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-desc div.ftable-column-header-container {
-  background: url('column-desc.png') no-repeat right;
+div.ftable-main-container table.ftable thead th.ftable-column-header-sortable div.ftable-column-header-container::after {
+  content: " ⇅";
+  position: absolute;
+  right: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #999;
+  font-size: 1em;
 }
-div.ftable-main-container table.ftable tbody > tr > td .ftable-edit-command-button {
-  background: url('edit.png') no-repeat;
-  width: 16px;
-  height: 16px;
+div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-asc div.ftable-column-header-container::after {
+  content: " ⇡";
+  font-weight: bold;
 }
-div.ftable-main-container table.ftable tbody > tr > td .ftable-clone-command-button {
-  background: url('clone.png') no-repeat;
-  width: 16px;
-  height: 16px;
+div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-desc div.ftable-column-header-container::after {
+  content: " ⇣";
+  font-weight: bold;
 }
-div.ftable-main-container table.ftable tbody > tr > td .ftable-delete-command-button {
-  background: url('delete.png') no-repeat;
-  width: 16px;
-  height: 16px;
+div.ftable-main-container div.ftable-title div.ftable-title-text {
+  font-size: 16px;
+  font-weight: bold;
 }
 div.ftable-busy-message {
   color: #000;

package/themes/basic/ftable_basic.less

@@ -17,67 +17,6 @@ div.ftable-main-container
 			font-size: 16px;
 			font-weight: bold;
         }
-
-        .ftable-close-button
-        {
-            background: url('close.png') no-repeat;
-            width: 16px;
-            height: 16px;
-        }
-    }
-
-    table.ftable
-    {
-        thead
-        {
-            th
-            {
-                &.ftable-column-header-sortable div.ftable-column-header-container
-                {
-                    background: url('column-sortable.png') no-repeat right;
-                }
-
-                &.ftable-column-header-sorted-asc div.ftable-column-header-container
-                {
-                    background: url('column-asc.png') no-repeat right;
-                }
-
-                &.ftable-column-header-sorted-desc div.ftable-column-header-container
-                {
-                    background: url('column-desc.png') no-repeat right;
-                }
-            }
-        }
-
-        tbody
-        {
-            > tr
-            {
-                > td
-                {
-                    .ftable-edit-command-button
-                    {
-                        background: url('edit.png') no-repeat;
-                        width: 16px;
-                        height: 16px;
-                    }
-
-                    .ftable-clone-command-button
-                    {
-                        background: url('clone.png') no-repeat;
-                        width: 16px;
-                        height: 16px;
-                    }
-
-                    .ftable-delete-command-button
-                    {
-                        background: url('delete.png') no-repeat;
-                        width: 16px;
-                        height: 16px;
-                    }
-                }
-            }
-        }
     }
 }
 

package/themes/basic/ftable_basic.min.css

@@ -1 +1 @@
-div.ftable-main-container{position:relative}div.ftable-main-container div.ftable-title{position:relative;text-align:left}div.ftable-main-container div.ftable-title .ftable-close-button{right:0;top:0;bottom:0;position:absolute}div.ftable-main-container div.ftable-title div.ftable-toolbar{bottom:0;right:0;position:absolute;display:inline-block;margin-right:5px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item{position:relative;display:inline-block;margin:0 0 0 5px;cursor:pointer;font-size:.9em;padding:2px;vertical-align:bottom}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon{display:inline-block;margin:2px;vertical-align:middle;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container div.ftable-title .ftable-close-button+div.ftable-toolbar{margin-right:30px}div.ftable-main-container table.ftable{width:100%}div.ftable-main-container table.ftable thead th{padding:0 3px 0 6px;vertical-align:middle;text-align:left}div.ftable-main-container table.ftable thead th.ftable-column-header{height:1px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container{position:relative;display:table;width:100%;height:100%!important}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container span.ftable-column-header-text{display:table-cell;vertical-align:middle;padding-top:4px;padding-bottom:3px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container div.ftable-column-resize-handler{position:absolute;display:table-cell;vertical-align:middle;height:100%;width:8px;right:-8px;z-index:2;cursor:col-resize}div.ftable-main-container table.ftable thead th.ftable-command-column-header{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select input{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable{cursor:pointer}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button{margin:5px;padding:0;cursor:pointer;border:none;display:inline}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button span{display:none}div.ftable-main-container table.ftable tbody tr>td.ftable-command-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column input{cursor:pointer}div.ftable-main-container table.ftable tbody tr.ftable-no-data-row{text-align:center}div.ftable-main-container>div.ftable-bottom-panel{position:relative;min-height:24px;text-align:left}div.ftable-main-container>div.ftable-bottom-panel div.ftable-right-area{right:0;top:0;bottom:0;position:absolute}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list{display:inline-block}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-first,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-last,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-next,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-previous,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{padding:2px 5px;display:inline-block;cursor:pointer}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{cursor:default}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-size-change{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page input[type=text]{width:22px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-info{vertical-align:middle}div.ftable-main-container div.ftable-column-resize-bar{opacity:.5;position:absolute;width:1px;background-color:#000}form.ftable-dialog-form div.ftable-input-field-container{padding:2px 0 3px 0;border-bottom:1px solid #ddd}form.ftable-dialog-form div.ftable-input-field-container:last-child{border:none}form.ftable-dialog-form div.ftable-input-label{padding:2px 3px;font-size:1.1em;color:#666}form.ftable-dialog-form div.ftable-input{padding:2px}form.ftable-dialog-form span.ftable-option-text-clickable{position:relative;top:-2px}form.ftable-dialog-form div.ftable-textarea-input textarea{width:300px;min-height:60px}form.ftable-dialog-form div.ftable-checkbox-input span,form.ftable-dialog-form div.ftable-radio-input span{padding-left:4px}form.ftable-dialog-form div.ftable-checkbox-input input,form.ftable-dialog-form div.ftable-radio-input input,form.ftable-dialog-form span.ftable-option-text-clickable{cursor:pointer}.ftable-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:1000;display:none}.ftable-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:1001;max-width:90%;max-height:90vh;overflow:auto}.ftable-modal-header{margin-bottom:15px;margin-top:0;padding-bottom:10px;border-bottom:1px solid #eee}.ftable-modal-footer{margin-top:15px;padding-top:10px;border-top:1px solid #eee;text-align:right}.ftable-modal-close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:28px;font-weight:700;color:#aaa}.ftable-busy-modal{padding:0}.ftable-dialog-button{opacity:.8;border:1px solid #ccc;padding:5px;margin:5px}.ftable-dialog-button:hover{background-color:#dedede}div.ftable-busy-message{cursor:wait;margin:0}div.ftable-contextmenu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;z-index:100}.ftable-table-div{display:block;overflow-x:auto}.ftable-table-div>table{overflow:hidden}.ftable-toolbarsearch{width:90%;min-width:fit-content}th.ftable-toolbarsearch-reset{text-align:center!important}div.ftable-column-selection-container{position:absolute;border:1px solid #c8c8c8;background:#fff;color:#000;z-index:101;padding:5px}div.ftable-column-selection-container ul.ftable-column-select-list{margin:0;padding:0;list-style:none}div.ftable-column-selection-container ul.ftable-column-select-list li{margin:0;padding:2px 0}div.ftable-column-selection-container ul.ftable-column-select-list li label span{position:relative;top:-1px;margin-left:4px}div.ftable-column-selection-container ul.ftable-column-select-list li input[type=checkbox]{cursor:pointer}.ftable-yesno-check-wrapper{display:flex;align-items:center}.ftable-yesno-check-text:before{content:attr(data-no)}.ftable-yesno-check-input:checked~.ftable-yesno-check-text:before{content:attr(data-yes)}div.ftable-main-container div.ftable-title div.ftable-title-text{font-size:16px;font-weight:700}div.ftable-main-container div.ftable-title .ftable-close-button{background:url('close.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable div.ftable-column-header-container{background:url('column-sortable.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-asc div.ftable-column-header-container{background:url('column-asc.png') no-repeat right}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-desc div.ftable-column-header-container{background:url('column-desc.png') no-repeat right}div.ftable-main-container table.ftable tbody>tr>td .ftable-edit-command-button{background:url('edit.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-clone-command-button{background:url('clone.png') no-repeat;width:16px;height:16px}div.ftable-main-container table.ftable tbody>tr>td .ftable-delete-command-button{background:url('delete.png') no-repeat;width:16px;height:16px}div.ftable-busy-message{color:#000;background-color:#ddd;font-size:1.25em}
+div.ftable-main-container{position:relative}div.ftable-main-container div.ftable-title{position:relative;text-align:left}div.ftable-main-container div.ftable-title div.ftable-toolbar{bottom:0;right:0;position:absolute;display:inline-block;margin-right:5px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item{position:relative;display:inline-block;margin:0 0 0 5px;cursor:pointer;font-size:.9em;padding:2px;vertical-align:bottom}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon{display:inline-block;margin:2px;vertical-align:middle;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record{display:inline-flex;align-items:center;background-color:transparent;justify-content:center;width:16px;height:16px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-icon.ftable-toolbar-item-add-record::before{content:"➕";font-size:14px}div.ftable-main-container div.ftable-title div.ftable-toolbar .ftable-toolbar-item span.ftable-toolbar-item-text{display:inline-block;margin:2px;vertical-align:middle}div.ftable-main-container table.ftable{width:100%}div.ftable-main-container table.ftable thead th{padding:0 3px 0 6px;vertical-align:middle;text-align:left}div.ftable-main-container table.ftable thead th.ftable-column-header{height:1px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container{position:relative;display:table;width:100%;height:100%!important}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container span.ftable-column-header-text{display:table-cell;vertical-align:middle;padding-top:4px;padding-bottom:3px}div.ftable-main-container table.ftable thead th.ftable-column-header div.ftable-column-header-container div.ftable-column-resize-handler{position:absolute;display:table-cell;vertical-align:middle;height:100%;width:8px;right:-8px;z-index:2;cursor:col-resize}div.ftable-main-container table.ftable thead th.ftable-command-column-header{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select{text-align:center;width:1%}div.ftable-main-container table.ftable thead th.ftable-column-header-select input{cursor:pointer}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable{cursor:pointer}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button{margin:5px;padding:0;cursor:pointer;border:none;display:inline}div.ftable-main-container table.ftable tbody tr>td .ftable-command-button span{display:none}div.ftable-main-container table.ftable tbody tr>td.ftable-command-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column{text-align:center;vertical-align:middle}div.ftable-main-container table.ftable tbody tr>td.ftable-selecting-column input{cursor:pointer}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-edit-command-button::before{content:"📝";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-clone-command-button::before{content:"📋";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button{width:16px;height:16px;background-color:transparent}div.ftable-main-container table.ftable tbody tr>td .ftable-delete-command-button::before{content:"🗑️ ";font-size:14px;display:flex;align-items:center;justify-content:center;width:100%;height:100%}div.ftable-main-container table.ftable tbody tr.ftable-no-data-row{text-align:center}div.ftable-main-container>div.ftable-bottom-panel{position:relative;min-height:24px;text-align:left}div.ftable-main-container>div.ftable-bottom-panel div.ftable-right-area{right:0;top:0;bottom:0;position:absolute}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list{display:inline-block}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-first,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-last,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-next,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-previous,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{padding:2px 5px;display:inline-block;cursor:pointer}div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-active,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-disabled,div.ftable-main-container>div.ftable-bottom-panel .ftable-page-list .ftable-page-number-space{cursor:default}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-size-change{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page{margin-left:5px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-goto-page input[type=text]{width:22px}div.ftable-main-container>div.ftable-bottom-panel span.ftable-page-info{vertical-align:middle}div.ftable-main-container div.ftable-column-resize-bar{opacity:.5;position:absolute;width:1px;background-color:#000}form.ftable-dialog-form div.ftable-input-field-container{padding:2px 0 3px 0;border-bottom:1px solid #ddd}form.ftable-dialog-form div.ftable-input-field-container:last-child{border:none}form.ftable-dialog-form div.ftable-input-label{padding:2px 3px;font-size:1.1em;color:#666}form.ftable-dialog-form div.ftable-input{padding:2px}form.ftable-dialog-form span.ftable-option-text-clickable{position:relative;top:-2px}form.ftable-dialog-form div.ftable-textarea-input textarea{width:300px;min-height:60px}form.ftable-dialog-form div.ftable-checkbox-input span,form.ftable-dialog-form div.ftable-radio-input span{padding-left:4px}form.ftable-dialog-form div.ftable-checkbox-input input,form.ftable-dialog-form div.ftable-radio-input input,form.ftable-dialog-form span.ftable-option-text-clickable{cursor:pointer}.ftable-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);z-index:1000;display:none}.ftable-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:1001;max-width:90%;max-height:90vh;overflow:auto}.ftable-modal-header{margin-bottom:15px;margin-top:0;padding-bottom:10px;border-bottom:1px solid #eee}.ftable-modal-footer{margin-top:15px;padding-top:10px;border-top:1px solid #eee;text-align:right}.ftable-modal-close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:28px;font-weight:700;color:#aaa}.ftable-busy-modal{padding:0}.ftable-dialog-button{opacity:.8;border:1px solid #ccc;padding:5px;margin:5px}.ftable-dialog-button:hover{background-color:#dedede}div.ftable-busy-message{cursor:wait;margin:0}div.ftable-contextmenu-overlay{position:fixed;left:0;top:0;width:100%;height:100%;z-index:100}.ftable-table-div{display:block;overflow-x:auto}.ftable-table-div>table{overflow:hidden}.ftable-toolbarsearch{width:90%;min-width:fit-content}th.ftable-toolbarsearch-reset{text-align:center!important}div.ftable-column-selection-container{position:absolute;border:1px solid #c8c8c8;background:#fff;color:#000;z-index:101;padding:5px}div.ftable-column-selection-container ul.ftable-column-select-list{margin:0;padding:0;list-style:none}div.ftable-column-selection-container ul.ftable-column-select-list li{margin:0;padding:2px 0}div.ftable-column-selection-container ul.ftable-column-select-list li label span{position:relative;top:-1px;margin-left:4px}div.ftable-column-selection-container ul.ftable-column-select-list li input[type=checkbox]{cursor:pointer}.ftable-yesno-check-wrapper{display:flex;align-items:center}.ftable-yesno-check-text:before{content:attr(data-no)}.ftable-yesno-check-input:checked~.ftable-yesno-check-text:before{content:attr(data-yes)}.ftable-sortable-text{padding-right:20px}div.ftable-main-container table.ftable thead th.ftable-column-header-sortable div.ftable-column-header-container::after{content:" ⇅";position:absolute;right:3px;top:50%;transform:translateY(-50%);color:#999;font-size:1em}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-asc div.ftable-column-header-container::after{content:" ⇡";font-weight:700}div.ftable-main-container table.ftable thead th.ftable-column-header-sorted-desc div.ftable-column-header-container::after{content:" ⇣";font-weight:700}div.ftable-main-container div.ftable-title div.ftable-title-text{font-size:16px;font-weight:700}div.ftable-busy-message{color:#000;background-color:#ddd;font-size:1.25em}