kempo 2.8.0 → 2.9.1

package/dist/components/Table.js

@@ -1 +1 @@
-import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";import{onEvent,dispatchEvent}from"../utils/element.js";export default class Table extends Component{static controls={prevPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq"),t.appendChild(new Icon("chevron-left")),onEvent(t,"click",(()=>e.prevPage())),onEvent(e,"pageChange",(()=>{t.disabled=1===e.getCurrentPage()})),t}},nextPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq"),t.appendChild(new Icon("chevron-right")),onEvent(t,"click",(()=>e.nextPage())),onEvent(e,"pageChange",(()=>{t.disabled=e.getCurrentPage()===e.getTotalPages()})),t}},pageSelect:{render:e=>new PageSelect(e)},pageSize:{render:e=>new PageSize(e)},spacer:{html:'<div class="flex"></div>'}};constructor({records:e=[],fields:t=[],controls:n={before:[],after:[],top:[],bottom:[]},pageSize:s=100,pageSizeOptions:r=[10,25,50,100,500],currentPage:a=1}={}){super(),this.registerProps({fields:t,records:e,controls:n,pageSize:s,pageSizeOptions:r,currentPage:a})}async render(e){return!!await super.render(e)&&(this.setData({records:this.records,fields:this.fields,controls:this.controls,pageSize:this.pageSize,pageSizeOptions:this.pageSizeOptions,currentPage:this.currentPage}),!0)}renderFields(){if(!this.rendered)return;const e=this.controls?.before?.length?"<th></th>":"",t=this.controls?.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";const t=(this.currentPage-1)*this.pageSize,n=t+this.pageSize;this.records.slice(t,n).forEach(((s,r)=>{const a=document.createElement("tr");this.controls?.before?.length&&a.appendChild(this.renderRowControls(this.controls.before,s,t+r)),this.fields.forEach((({name:e,formatter:r,calculator:o})=>{const i=document.createElement("td");if(null===s)i.innerHTML="Loading...",dispatchEvent(this,"fetchRecords",{start:t,end:n});else{let t;o?t=o(s,this):(t=s[e]||"",Array.isArray(t)?t=r?t.map(r).join(", "):t.join(", "):r&&(t=r(t))),i.innerHTML=t}a.appendChild(i)})),this.controls?.after?.length&&a.appendChild(this.renderRowControls(this.controls.after,s,t+r)),e.appendChild(a)}))}renderRowControls(e=[],t,n){if(!this.rendered)return;const s=document.createElement("td");return e.forEach((({html:e,icon:r,action:a,render:o})=>{if(e)s.appendChild(document.createRange().createContextualFragment(e));else if(o&&"function"==typeof o){const e=o(this,t,n);e instanceof HTMLElement?s.appendChild(e):"string"==typeof e&&s.appendChild(document.createRange().createContextualFragment(e))}else if(r){const e=document.createElement("button");e.classList.add("pq"),e.appendChild(new Icon(r)),a&&onEvent(e,"click",(()=>a(this,t,n))),s.appendChild(e)}})),s}renderControls(e=[],t){if(!this.rendered)return;const n=this.shadowRoot.getElementById(t);n.innerHTML="",e.forEach((({html:e,icon:t,action:s,render:r})=>{if(e)n.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?n.appendChild(e):"string"==typeof e&&n.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.classList.add("pq"),e.appendChild(new Icon(t)),s&&onEvent(e,"click",(()=>s(this))),n.appendChild(e)}}))}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.records.length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.renderRecords(),dispatchEvent(this,"pageChange"))}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}setPageSize(e){this.pageSize=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"pageSizeChange")}setData({records:e=!1,fields:t=!1,controls:n=!1,pageSize:s=!1,pageSizeOptions:r=!1,currentPage:a=!1}={}){let o=!1,i=!1;e&&(this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),o=!0),s&&(this.pageSize=s,o=!0),r&&(this.pageSizeOptions=r),n&&(this.controls=n,i=!0),a&&(this.currentPage=a,o=!0),o&&(this.renderFields(),this.renderRecords()),i&&(this.renderControls(this.controls.top,"top"),this.renderControls(this.controls.bottom,"bottom"))}setRecords(e){this.records=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"recordsSet",{records:e})}setupFetchRecords(e,t){const n=this.records.length;n<e&&(this.records.length=e,this.records.fill(null,n)),onEvent(this,"fetchRecords",(async e=>{const{start:n,end:s}=e.detail,r=await t(n,s-n);this.records.splice(n,r.length,...r),this.renderRecords()}))}addRecord(e){this.records.push(e),this.renderRecords(),dispatchEvent(this,"recordAdded",{record:e})}updateRecord(e,t){this.records[e]=t;const n=(this.currentPage-1)*this.pageSize,s=n+this.pageSize;e>=n&&e<s&&this.renderRecords()}deleteRecord(e){e>=0&&e<this.records.length&&(this.records.splice(e,1),this.renderRecords(),dispatchEvent(this,"recordDeleted",{index:e}))}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <div id="top"></div>\n        <table class="b0">\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n        <div id="bottom"></div>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n      }\n      #top, #bottom {\n        display: flex;\n      }\n      th {\n        border-top: none;\n      }\n      tr:last-child td:first-child {\n        border-bottom-left-radius: 0;\n      }\n      tr:last-child td:last-child {\n        border-bottom-right-radius: 0;\n      }\n      tr:last-child td {\n        border-bottom: none;\n      }\n      th:first-child, td:first-child {\n        border-left: none;\n      }\n      th:last-child, td:last-child {\n        border-right: none;\n      }\n      #top:not(:empty) {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #bottom:not(:empty) {\n        border-top: 1px solid var(--c_border);\n      }\n    `}static extractFieldsFromRecords(e,t=100){const n=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>n.add(e)))})),[...n].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);class PageSelect extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}connectedCallback(){this.render()}async render(){return!!await super.render()&&(this.updateOptions(),!0)}updateOptions(){const e=this.shadowRoot.getElementById("pageSelect");e.innerHTML="";for(let t=1;t<=this.table.getTotalPages();t++){const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)}e.value=this.table.getCurrentPage();this.shadowRoot.getElementById("totalPages").textContent=this.table.getTotalPages(),onEvent(e,"change",(()=>{this.table.setPage(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{this.updateOptions()})),onEvent(this.table,"pageChange",(()=>{e.value=this.table.getCurrentPage()}))}get shadowTemplate(){return'\n      <select id="pageSelect" class="mxq"></select>\n      <label> out of <span id="totalPages"></span></label>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      #pageSelect, label {\n        display: inline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-select",PageSelect);class PageSize extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}connectedCallback(){this.render()}async render(){if(await super.render()){const e=this.shadowRoot.getElementById("pageSizeSelect");return this.table.pageSizeOptions.forEach((t=>{const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)})),e.value=this.table.pageSize,onEvent(e,"change",(()=>{this.table.setPageSize(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{e.value=this.table.pageSize})),!0}return!1}get shadowTemplate(){return'\n      <label for="pageSizeSelect">Page Size: </label>\n      <select id="pageSizeSelect" class="mxq"></select>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-size",PageSize);
+import Component from"./Component.js";import Icon from"./Icon.js";import SelectCount from"./tableControls/SelectCount.js";import PageSelect from"./tableControls/PageSelect.js";import PageSize from"./tableControls/PageSize.js";import DeleteSelected from"./tableControls/DeleteSelected.js";import{toTitleCase}from"../utils/string.js";import{onEvent,dispatchEvent}from"../utils/element.js";export default class Table extends Component{static controls={prevPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq","no-btn"),t.appendChild(new Icon("chevron-left")),onEvent(t,"click",(()=>e.prevPage())),onEvent(e,"pageChange",(()=>{t.disabled=1===e.getCurrentPage()})),t}},nextPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq","no-btn"),t.appendChild(new Icon("chevron-right")),onEvent(t,"click",(()=>e.nextPage())),onEvent(e,"pageChange",(()=>{t.disabled=e.getCurrentPage()===e.getTotalPages()})),t}},pageSelect:{render:e=>new PageSelect(e)},pageSize:{render:e=>new PageSize(e)},selectCount:{render:e=>new SelectCount(e)},deleteSelected:{render:e=>new DeleteSelected(e)},spacer:{html:'<div class="flex"></div>'}};constructor({records:e=[],fields:t=[],controls:n={before:[],after:[],top:[],bottom:[]},pageSize:s=100,pageSizeOptions:r=[10,25,50,100,500],currentPage:i=1,enableSelection:o=!1}={}){super(),this.registerProps({fields:t,records:e,controls:n,pageSize:s,pageSizeOptions:r,currentPage:i,enableSelection:o,selectedIndexes:[]})}async render(e){return!!await super.render(e)&&(this.setData({records:this.records,fields:this.fields,controls:this.controls,pageSize:this.pageSize,pageSizeOptions:this.pageSizeOptions,currentPage:this.currentPage}),!0)}renderFields(){if(!this.rendered)return;const e=this.controls?.before?.length?"<th></th>":"",t=this.controls?.after?.length?"<th></th>":"",n=this.enableSelection?'<th class="selection"><input type="checkbox" id="select-all"></th>':"";if(this.shadowRoot.getElementById("fields").innerHTML=`${n}${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`,this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e.addEventListener("change",(()=>{e.checked?this.selectAllOnPage():this.deselectAllOnPage()})),onEvent(this,"selectionChange pageChange",(()=>{this.allOnPageSelected()?e.checked=!0:e.checked=!1}))}}renderRecords(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";const t=(this.currentPage-1)*this.pageSize,n=t+this.pageSize;this.records.slice(t,n).forEach(((s,r)=>{const i=document.createElement("tr");if(this.enableSelection){const e=document.createElement("td");e.classList.add("selection");const n=document.createElement("input");n.type="checkbox",n.checked=this.selectedIndexes.includes(t+r),n.addEventListener("change",(()=>{n.checked?this.selectedIndexes.push(t+r):this.selectedIndexes=this.selectedIndexes.filter((e=>e!==t+r)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})})),e.appendChild(n),i.appendChild(e)}this.controls?.before?.length&&i.appendChild(this.renderRowControls(this.controls.before,s,t+r)),this.fields.forEach((({name:e,formatter:r,calculator:o})=>{const d=document.createElement("td");if(null===s)d.innerHTML="Loading...",dispatchEvent(this,"fetchRecords",{start:t,end:n});else{let t;o?t=o(s,this):(t=s[e]||"",Array.isArray(t)?t=r?t.map(r).join(", "):t.join(", "):r&&(t=r(t))),d.innerHTML=t}i.appendChild(d)})),this.controls?.after?.length&&i.appendChild(this.renderRowControls(this.controls.after,s,t+r)),e.appendChild(i)}))}renderRowControls(e=[],t,n){if(!this.rendered)return;const s=document.createElement("td");return e.forEach((({html:e,icon:r,action:i,render:o})=>{if(e)s.appendChild(document.createRange().createContextualFragment(e));else if(o&&"function"==typeof o){const e=o(this,t,n);e instanceof HTMLElement?s.appendChild(e):"string"==typeof e&&s.appendChild(document.createRange().createContextualFragment(e))}else if(r){const e=document.createElement("button");e.classList.add("pq","no-btn"),e.appendChild(new Icon(r)),i&&onEvent(e,"click",(()=>i(this,t,n))),s.appendChild(e)}})),s}renderControls(e=[],t){if(!this.rendered)return;const n=this.shadowRoot.getElementById(t);n.innerHTML="",e.forEach((({html:e,icon:t,action:s,render:r})=>{if(e)n.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?n.appendChild(e):"string"==typeof e&&n.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.classList.add("pq","no-btn"),e.appendChild(new Icon(t)),s&&onEvent(e,"click",(()=>s(this))),n.appendChild(e)}}))}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.records.length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.renderRecords(),dispatchEvent(this,"pageChange"))}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}setPageSize(e){this.pageSize=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"pageSizeChange")}setData({records:e=!1,fields:t=!1,controls:n=!1,pageSize:s=!1,pageSizeOptions:r=!1,currentPage:i=!1,enableSelection:o=!1}={}){let d=!1,c=!1;e&&(this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),d=!0),s&&(this.pageSize=s,d=!0),r&&(this.pageSizeOptions=r),n&&(this.controls=n,c=!0),i&&(this.currentPage=i,d=!0),void 0!==o&&(this.enableSelection=o,d=!0),d&&(this.renderFields(),this.renderRecords()),c&&(this.renderControls(this.controls.top,"top"),this.renderControls(this.controls.bottom,"bottom"))}setRecords(e){this.records=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"recordsSet",{records:e})}setupFetchRecords(e,t){const n=this.records.length;n<e&&(this.records.length=e,this.records.fill(null,n)),onEvent(this,"fetchRecords",(async e=>{const{start:n,end:s}=e.detail,r=await t(n,s-n);this.records.splice(n,r.length,...r),this.renderRecords()}))}addRecord(e){this.records.push(e),this.renderRecords(),dispatchEvent(this,"recordAdded",{record:e})}updateRecord(e,t){this.records[e]=t;const n=(this.currentPage-1)*this.pageSize,s=n+this.pageSize;e>=n&&e<s&&this.renderRecords()}deleteRecord(e){e>=0&&e<this.records.length&&(this.selectedIndexes=this.selectedIndexes.filter((t=>t!==e)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes}),this.records.splice(e,1),this.renderRecords(),dispatchEvent(this,"recordDeleted",{index:e}))}getSelectedRecords(){return this.selectedIndexes.map((e=>this.records[e]))}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)this.selectedIndexes.includes(n)||this.selectedIndexes.push(n);this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);this.selectedIndexes=this.selectedIndexes.filter((n=>n<e||n>=t)),this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)if(!this.selectedIndexes.includes(n))return!1;return!0}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <div id="top"></div>\n        <table class="b0">\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n        <div id="bottom"></div>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n      }\n      #top, #bottom {\n        display: flex;\n      }\n      th {\n        border-top: none;\n      }\n      tr:last-child td:first-child {\n        border-bottom-left-radius: 0;\n      }\n      tr:last-child td:last-child {\n        border-bottom-right-radius: 0;\n      }\n      tr:last-child td {\n        border-bottom: none;\n      }\n      th:first-child, td:first-child {\n        border-left: none;\n      }\n      th:last-child, td:last-child {\n        border-right: none;\n      }\n      #top:not(:empty) {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #bottom:not(:empty) {\n        border-top: 1px solid var(--c_border);\n      }\n      th.selection, td.selection {\n        width: 50px;\n      }\n      th.selection input,\n      td.selection input {\n        margin: 0;\n        width: 1.35rem;\n        height: 1.35rem;\n      }\n    `}static extractFieldsFromRecords(e,t=100){const n=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>n.add(e)))})),[...n].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);

package/dist/components/tableControls/DeleteSelected.js

@@ -0,0 +1 @@
+import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class DeleteSelected extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){if(await super.render()){this.updateButtonState();const e=this.shadowRoot.getElementById("deleteSelectedButton");return onEvent(e,"click",(()=>this.deleteSelected())),onEvent(this.table,"selectionChange",(()=>this.updateButtonState())),!0}return!1}deleteSelected(){const e=this.table.selectedIndexes;e.sort(((e,t)=>t-e)),e.forEach((e=>this.table.deleteRecord(e))),this.table.selectedIndexes=[],this.table.renderRecords(),this.updateButtonState()}updateButtonState(){this.shadowRoot.getElementById("deleteSelectedButton").disabled=0===this.table.selectedIndexes.length}get shadowTemplate(){return'\n      <button id="deleteSelectedButton" class="pq no-btn">\n        <k-icon name="delete"></k-icon>\n      </button>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      button {\n        display: flex;\n        align-items: center;\n      }\n    "}}window.customElements.define("k-table-delete-selected",DeleteSelected);

package/dist/components/tableControls/PageSelect.js

@@ -0,0 +1 @@
+import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSelect extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){return!!await super.render()&&(this.updateOptions(),!0)}updateOptions(){const e=this.shadowRoot.getElementById("pageSelect");e.innerHTML="";for(let t=1;t<=this.table.getTotalPages();t++){const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)}e.value=this.table.getCurrentPage();this.shadowRoot.getElementById("totalPages").textContent=this.table.getTotalPages(),onEvent(e,"change",(()=>{this.table.setPage(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{this.updateOptions()})),onEvent(this.table,"pageChange",(()=>{e.value=this.table.getCurrentPage()}))}get shadowTemplate(){return'\n      <select id="pageSelect" class="mxq"></select>\n      <label> out of <span id="totalPages"></span></label>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      #pageSelect, label {\n        display: inline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-select",PageSelect);

package/dist/components/tableControls/PageSize.js

@@ -0,0 +1 @@
+import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSize extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){if(await super.render()){const e=this.shadowRoot.getElementById("pageSizeSelect");return this.table.pageSizeOptions.forEach((t=>{const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)})),e.value=this.table.pageSize,onEvent(e,"change",(()=>{this.table.setPageSize(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{e.value=this.table.pageSize})),!0}return!1}get shadowTemplate(){return'\n      <label for="pageSizeSelect">Page Size: </label>\n      <select id="pageSizeSelect" class="mxq"></select>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-size",PageSize);

package/dist/components/tableControls/SelectCount.js

@@ -0,0 +1 @@
+import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class SelectCount extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){return!!await super.render()&&(this.updateCount(),onEvent(this.table,"selectionChange",(()=>{this.updateCount()})),!0)}updateCount(){this.shadowRoot.getElementById("selectCount").textContent=this.table.getSelectedRecords().length}get shadowTemplate(){return'\n      Selected: <span id="selectCount"></span>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n        align-self: center;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-select-count",SelectCount);

package/dist/index.js

@@ -1 +1 @@
-import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Stacks from"./components/Stacks.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Stacks:Stacks,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};
+import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Stacks from"./components/Stacks.js";import Table from"./components/Table.js";import DeleteSelected from"./components/tableControlsDeleteSelected.js";import PageSelect from"./components/tableControlsPageSelect.js";import PageSize from"./components/tableControlsPageSize.js";import SelectCount from"./components/tableControlsSelectCount.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Stacks:Stacks,Table:Table,DeleteSelected:DeleteSelected,PageSelect:PageSelect,PageSize:PageSize,SelectCount:SelectCount,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};

package/docs/components/table.html

@@ -255,6 +255,29 @@
       });
     </script>
 
+    <h3 id="recordSelection"><a href="#recordSelection" class="no-link">Record Selection</a></h3>
+    <p>The table component supports record selection. You can enable record selection by setting the <code>enableSelection</code> property to <code>true</code>.</p>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"recordSelectionExample"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">import</span> Table <span class="hljs-keyword">from</span> <span class="hljs-string">'../kempo/components/Table.js'</span>;<br /><br />  <span class="hljs-keyword">const</span> $recordSelectionExample = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'recordSelectionExample'</span>);<br />  $recordSelectionExample.setData({<br />    <span class="hljs-attr">records</span>: contacts,<br />    <span class="hljs-attr">enableSelection</span>: <span class="hljs-literal">true</span>,<br />    <span class="hljs-attr">controls</span>: {<br />      <span class="hljs-attr">bottom</span>: [<br />        Table.controls.prevPage,<br />        Table.controls.nextPage,<br />        Table.controls.spacer,<br />        Table.controls.selectCount,<br />        Table.controls.deleteSelected<br />      ]<br />    },<br />    <span class="hljs-attr">pageSize</span>: <span class="hljs-number">10</span><br />  });<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <k-table id="recordSelectionExample"></k-table>
+    <script type="module">
+      import Table from '../kempo/components/Table.js';
+
+      const $recordSelectionExample = document.getElementById('recordSelectionExample');
+      $recordSelectionExample.setData({
+        records: contacts,
+        enableSelection: true,
+        controls: {
+          bottom: [
+            Table.controls.prevPage,
+            Table.controls.nextPage,
+            Table.controls.spacer,
+            Table.controls.selectCount,
+            Table.controls.deleteSelected
+          ]
+        },
+        pageSize: 10
+      });
+    </script>
 
     <h2>JavaScript Reference</h2>
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
@@ -332,6 +355,22 @@
     <h5><code>goToPage(<i>number</i> pageNumber)<i>: undefined</i></code></h5>
     <p>Navigates to the specified page number.</p>
 
+    <h5><code>getSelectedRecords()<i>: Array</i></code></h5>
+    <p>Returns an array of the currently selected records.</p>
+
+    <h5><code>deleteSelectedRecords()<i>: undefined</i></code></h5>
+    <p>Deletes all currently selected records from the table.</p>
+
+    <h5><code>selectAllOnPage()<i>: undefined</i></code></h5>
+    <p>Selects all the records on the current page.</p>
+
+    <h5><code>deselectAllOnPage()<i>: undefined</i></code></h5>
+    <p>Deselects all the records on the current page.</p>
+
+    <h5><code>allOnPageSelected()<i>: undefined</i></code></h5>
+    <p>Returns <code>true</code> if all the records on the current page are selected, and <code>false</code> if they are not.</p>
+    
+
   </main>
   <div style="height: 33.333vh"></div>
   <script type="module" src="../kempo/components/Import.js"></script> 

package/docs/kempo/components/Table.js

@@ -1 +1 @@
-import Component from"./Component.js";import Icon from"./Icon.js";import{toTitleCase}from"../utils/string.js";import{onEvent,dispatchEvent}from"../utils/element.js";export default class Table extends Component{static controls={prevPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq"),t.appendChild(new Icon("chevron-left")),onEvent(t,"click",(()=>e.prevPage())),onEvent(e,"pageChange",(()=>{t.disabled=1===e.getCurrentPage()})),t}},nextPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq"),t.appendChild(new Icon("chevron-right")),onEvent(t,"click",(()=>e.nextPage())),onEvent(e,"pageChange",(()=>{t.disabled=e.getCurrentPage()===e.getTotalPages()})),t}},pageSelect:{render:e=>new PageSelect(e)},pageSize:{render:e=>new PageSize(e)},spacer:{html:'<div class="flex"></div>'}};constructor({records:e=[],fields:t=[],controls:n={before:[],after:[],top:[],bottom:[]},pageSize:s=100,pageSizeOptions:r=[10,25,50,100,500],currentPage:a=1}={}){super(),this.registerProps({fields:t,records:e,controls:n,pageSize:s,pageSizeOptions:r,currentPage:a})}async render(e){return!!await super.render(e)&&(this.setData({records:this.records,fields:this.fields,controls:this.controls,pageSize:this.pageSize,pageSizeOptions:this.pageSizeOptions,currentPage:this.currentPage}),!0)}renderFields(){if(!this.rendered)return;const e=this.controls?.before?.length?"<th></th>":"",t=this.controls?.after?.length?"<th></th>":"";this.shadowRoot.getElementById("fields").innerHTML=`${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`}renderRecords(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";const t=(this.currentPage-1)*this.pageSize,n=t+this.pageSize;this.records.slice(t,n).forEach(((s,r)=>{const a=document.createElement("tr");this.controls?.before?.length&&a.appendChild(this.renderRowControls(this.controls.before,s,t+r)),this.fields.forEach((({name:e,formatter:r,calculator:o})=>{const i=document.createElement("td");if(null===s)i.innerHTML="Loading...",dispatchEvent(this,"fetchRecords",{start:t,end:n});else{let t;o?t=o(s,this):(t=s[e]||"",Array.isArray(t)?t=r?t.map(r).join(", "):t.join(", "):r&&(t=r(t))),i.innerHTML=t}a.appendChild(i)})),this.controls?.after?.length&&a.appendChild(this.renderRowControls(this.controls.after,s,t+r)),e.appendChild(a)}))}renderRowControls(e=[],t,n){if(!this.rendered)return;const s=document.createElement("td");return e.forEach((({html:e,icon:r,action:a,render:o})=>{if(e)s.appendChild(document.createRange().createContextualFragment(e));else if(o&&"function"==typeof o){const e=o(this,t,n);e instanceof HTMLElement?s.appendChild(e):"string"==typeof e&&s.appendChild(document.createRange().createContextualFragment(e))}else if(r){const e=document.createElement("button");e.classList.add("pq"),e.appendChild(new Icon(r)),a&&onEvent(e,"click",(()=>a(this,t,n))),s.appendChild(e)}})),s}renderControls(e=[],t){if(!this.rendered)return;const n=this.shadowRoot.getElementById(t);n.innerHTML="",e.forEach((({html:e,icon:t,action:s,render:r})=>{if(e)n.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?n.appendChild(e):"string"==typeof e&&n.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.classList.add("pq"),e.appendChild(new Icon(t)),s&&onEvent(e,"click",(()=>s(this))),n.appendChild(e)}}))}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.records.length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.renderRecords(),dispatchEvent(this,"pageChange"))}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}setPageSize(e){this.pageSize=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"pageSizeChange")}setData({records:e=!1,fields:t=!1,controls:n=!1,pageSize:s=!1,pageSizeOptions:r=!1,currentPage:a=!1}={}){let o=!1,i=!1;e&&(this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),o=!0),s&&(this.pageSize=s,o=!0),r&&(this.pageSizeOptions=r),n&&(this.controls=n,i=!0),a&&(this.currentPage=a,o=!0),o&&(this.renderFields(),this.renderRecords()),i&&(this.renderControls(this.controls.top,"top"),this.renderControls(this.controls.bottom,"bottom"))}setRecords(e){this.records=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"recordsSet",{records:e})}setupFetchRecords(e,t){const n=this.records.length;n<e&&(this.records.length=e,this.records.fill(null,n)),onEvent(this,"fetchRecords",(async e=>{const{start:n,end:s}=e.detail,r=await t(n,s-n);this.records.splice(n,r.length,...r),this.renderRecords()}))}addRecord(e){this.records.push(e),this.renderRecords(),dispatchEvent(this,"recordAdded",{record:e})}updateRecord(e,t){this.records[e]=t;const n=(this.currentPage-1)*this.pageSize,s=n+this.pageSize;e>=n&&e<s&&this.renderRecords()}deleteRecord(e){e>=0&&e<this.records.length&&(this.records.splice(e,1),this.renderRecords(),dispatchEvent(this,"recordDeleted",{index:e}))}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <div id="top"></div>\n        <table class="b0">\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n        <div id="bottom"></div>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n      }\n      #top, #bottom {\n        display: flex;\n      }\n      th {\n        border-top: none;\n      }\n      tr:last-child td:first-child {\n        border-bottom-left-radius: 0;\n      }\n      tr:last-child td:last-child {\n        border-bottom-right-radius: 0;\n      }\n      tr:last-child td {\n        border-bottom: none;\n      }\n      th:first-child, td:first-child {\n        border-left: none;\n      }\n      th:last-child, td:last-child {\n        border-right: none;\n      }\n      #top:not(:empty) {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #bottom:not(:empty) {\n        border-top: 1px solid var(--c_border);\n      }\n    `}static extractFieldsFromRecords(e,t=100){const n=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>n.add(e)))})),[...n].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);class PageSelect extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}connectedCallback(){this.render()}async render(){return!!await super.render()&&(this.updateOptions(),!0)}updateOptions(){const e=this.shadowRoot.getElementById("pageSelect");e.innerHTML="";for(let t=1;t<=this.table.getTotalPages();t++){const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)}e.value=this.table.getCurrentPage();this.shadowRoot.getElementById("totalPages").textContent=this.table.getTotalPages(),onEvent(e,"change",(()=>{this.table.setPage(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{this.updateOptions()})),onEvent(this.table,"pageChange",(()=>{e.value=this.table.getCurrentPage()}))}get shadowTemplate(){return'\n      <select id="pageSelect" class="mxq"></select>\n      <label> out of <span id="totalPages"></span></label>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      #pageSelect, label {\n        display: inline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-select",PageSelect);class PageSize extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}connectedCallback(){this.render()}async render(){if(await super.render()){const e=this.shadowRoot.getElementById("pageSizeSelect");return this.table.pageSizeOptions.forEach((t=>{const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)})),e.value=this.table.pageSize,onEvent(e,"change",(()=>{this.table.setPageSize(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{e.value=this.table.pageSize})),!0}return!1}get shadowTemplate(){return'\n      <label for="pageSizeSelect">Page Size: </label>\n      <select id="pageSizeSelect" class="mxq"></select>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-size",PageSize);
+import Component from"./Component.js";import Icon from"./Icon.js";import SelectCount from"./tableControls/SelectCount.js";import PageSelect from"./tableControls/PageSelect.js";import PageSize from"./tableControls/PageSize.js";import DeleteSelected from"./tableControls/DeleteSelected.js";import{toTitleCase}from"../utils/string.js";import{onEvent,dispatchEvent}from"../utils/element.js";export default class Table extends Component{static controls={prevPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq","no-btn"),t.appendChild(new Icon("chevron-left")),onEvent(t,"click",(()=>e.prevPage())),onEvent(e,"pageChange",(()=>{t.disabled=1===e.getCurrentPage()})),t}},nextPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq","no-btn"),t.appendChild(new Icon("chevron-right")),onEvent(t,"click",(()=>e.nextPage())),onEvent(e,"pageChange",(()=>{t.disabled=e.getCurrentPage()===e.getTotalPages()})),t}},pageSelect:{render:e=>new PageSelect(e)},pageSize:{render:e=>new PageSize(e)},selectCount:{render:e=>new SelectCount(e)},deleteSelected:{render:e=>new DeleteSelected(e)},spacer:{html:'<div class="flex"></div>'}};constructor({records:e=[],fields:t=[],controls:n={before:[],after:[],top:[],bottom:[]},pageSize:s=100,pageSizeOptions:r=[10,25,50,100,500],currentPage:i=1,enableSelection:o=!1}={}){super(),this.registerProps({fields:t,records:e,controls:n,pageSize:s,pageSizeOptions:r,currentPage:i,enableSelection:o,selectedIndexes:[]})}async render(e){return!!await super.render(e)&&(this.setData({records:this.records,fields:this.fields,controls:this.controls,pageSize:this.pageSize,pageSizeOptions:this.pageSizeOptions,currentPage:this.currentPage}),!0)}renderFields(){if(!this.rendered)return;const e=this.controls?.before?.length?"<th></th>":"",t=this.controls?.after?.length?"<th></th>":"",n=this.enableSelection?'<th class="selection"><input type="checkbox" id="select-all"></th>':"";if(this.shadowRoot.getElementById("fields").innerHTML=`${n}${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`,this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e.addEventListener("change",(()=>{e.checked?this.selectAllOnPage():this.deselectAllOnPage()})),onEvent(this,"selectionChange pageChange",(()=>{this.allOnPageSelected()?e.checked=!0:e.checked=!1}))}}renderRecords(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";const t=(this.currentPage-1)*this.pageSize,n=t+this.pageSize;this.records.slice(t,n).forEach(((s,r)=>{const i=document.createElement("tr");if(this.enableSelection){const e=document.createElement("td");e.classList.add("selection");const n=document.createElement("input");n.type="checkbox",n.checked=this.selectedIndexes.includes(t+r),n.addEventListener("change",(()=>{n.checked?this.selectedIndexes.push(t+r):this.selectedIndexes=this.selectedIndexes.filter((e=>e!==t+r)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})})),e.appendChild(n),i.appendChild(e)}this.controls?.before?.length&&i.appendChild(this.renderRowControls(this.controls.before,s,t+r)),this.fields.forEach((({name:e,formatter:r,calculator:o})=>{const d=document.createElement("td");if(null===s)d.innerHTML="Loading...",dispatchEvent(this,"fetchRecords",{start:t,end:n});else{let t;o?t=o(s,this):(t=s[e]||"",Array.isArray(t)?t=r?t.map(r).join(", "):t.join(", "):r&&(t=r(t))),d.innerHTML=t}i.appendChild(d)})),this.controls?.after?.length&&i.appendChild(this.renderRowControls(this.controls.after,s,t+r)),e.appendChild(i)}))}renderRowControls(e=[],t,n){if(!this.rendered)return;const s=document.createElement("td");return e.forEach((({html:e,icon:r,action:i,render:o})=>{if(e)s.appendChild(document.createRange().createContextualFragment(e));else if(o&&"function"==typeof o){const e=o(this,t,n);e instanceof HTMLElement?s.appendChild(e):"string"==typeof e&&s.appendChild(document.createRange().createContextualFragment(e))}else if(r){const e=document.createElement("button");e.classList.add("pq","no-btn"),e.appendChild(new Icon(r)),i&&onEvent(e,"click",(()=>i(this,t,n))),s.appendChild(e)}})),s}renderControls(e=[],t){if(!this.rendered)return;const n=this.shadowRoot.getElementById(t);n.innerHTML="",e.forEach((({html:e,icon:t,action:s,render:r})=>{if(e)n.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?n.appendChild(e):"string"==typeof e&&n.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.classList.add("pq","no-btn"),e.appendChild(new Icon(t)),s&&onEvent(e,"click",(()=>s(this))),n.appendChild(e)}}))}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.records.length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.renderRecords(),dispatchEvent(this,"pageChange"))}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}setPageSize(e){this.pageSize=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"pageSizeChange")}setData({records:e=!1,fields:t=!1,controls:n=!1,pageSize:s=!1,pageSizeOptions:r=!1,currentPage:i=!1,enableSelection:o=!1}={}){let d=!1,c=!1;e&&(this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),d=!0),s&&(this.pageSize=s,d=!0),r&&(this.pageSizeOptions=r),n&&(this.controls=n,c=!0),i&&(this.currentPage=i,d=!0),void 0!==o&&(this.enableSelection=o,d=!0),d&&(this.renderFields(),this.renderRecords()),c&&(this.renderControls(this.controls.top,"top"),this.renderControls(this.controls.bottom,"bottom"))}setRecords(e){this.records=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"recordsSet",{records:e})}setupFetchRecords(e,t){const n=this.records.length;n<e&&(this.records.length=e,this.records.fill(null,n)),onEvent(this,"fetchRecords",(async e=>{const{start:n,end:s}=e.detail,r=await t(n,s-n);this.records.splice(n,r.length,...r),this.renderRecords()}))}addRecord(e){this.records.push(e),this.renderRecords(),dispatchEvent(this,"recordAdded",{record:e})}updateRecord(e,t){this.records[e]=t;const n=(this.currentPage-1)*this.pageSize,s=n+this.pageSize;e>=n&&e<s&&this.renderRecords()}deleteRecord(e){e>=0&&e<this.records.length&&(this.selectedIndexes=this.selectedIndexes.filter((t=>t!==e)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes}),this.records.splice(e,1),this.renderRecords(),dispatchEvent(this,"recordDeleted",{index:e}))}getSelectedRecords(){return this.selectedIndexes.map((e=>this.records[e]))}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)this.selectedIndexes.includes(n)||this.selectedIndexes.push(n);this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);this.selectedIndexes=this.selectedIndexes.filter((n=>n<e||n>=t)),this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)if(!this.selectedIndexes.includes(n))return!1;return!0}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <div id="top"></div>\n        <table class="b0">\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n        <div id="bottom"></div>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n      }\n      #top, #bottom {\n        display: flex;\n      }\n      th {\n        border-top: none;\n      }\n      tr:last-child td:first-child {\n        border-bottom-left-radius: 0;\n      }\n      tr:last-child td:last-child {\n        border-bottom-right-radius: 0;\n      }\n      tr:last-child td {\n        border-bottom: none;\n      }\n      th:first-child, td:first-child {\n        border-left: none;\n      }\n      th:last-child, td:last-child {\n        border-right: none;\n      }\n      #top:not(:empty) {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #bottom:not(:empty) {\n        border-top: 1px solid var(--c_border);\n      }\n      th.selection, td.selection {\n        width: 50px;\n      }\n      th.selection input,\n      td.selection input {\n        margin: 0;\n        width: 1.35rem;\n        height: 1.35rem;\n      }\n    `}static extractFieldsFromRecords(e,t=100){const n=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>n.add(e)))})),[...n].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);

package/docs/kempo/components/tableControls/DeleteSelected.js

@@ -0,0 +1 @@
+import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class DeleteSelected extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){if(await super.render()){this.updateButtonState();const e=this.shadowRoot.getElementById("deleteSelectedButton");return onEvent(e,"click",(()=>this.deleteSelected())),onEvent(this.table,"selectionChange",(()=>this.updateButtonState())),!0}return!1}deleteSelected(){const e=this.table.selectedIndexes;e.sort(((e,t)=>t-e)),e.forEach((e=>this.table.deleteRecord(e))),this.table.selectedIndexes=[],this.table.renderRecords(),this.updateButtonState()}updateButtonState(){this.shadowRoot.getElementById("deleteSelectedButton").disabled=0===this.table.selectedIndexes.length}get shadowTemplate(){return'\n      <button id="deleteSelectedButton" class="pq no-btn">\n        <k-icon name="delete"></k-icon>\n      </button>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      button {\n        display: flex;\n        align-items: center;\n      }\n    "}}window.customElements.define("k-table-delete-selected",DeleteSelected);

package/docs/kempo/components/tableControls/PageSelect.js

@@ -0,0 +1 @@
+import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSelect extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){return!!await super.render()&&(this.updateOptions(),!0)}updateOptions(){const e=this.shadowRoot.getElementById("pageSelect");e.innerHTML="";for(let t=1;t<=this.table.getTotalPages();t++){const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)}e.value=this.table.getCurrentPage();this.shadowRoot.getElementById("totalPages").textContent=this.table.getTotalPages(),onEvent(e,"change",(()=>{this.table.setPage(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{this.updateOptions()})),onEvent(this.table,"pageChange",(()=>{e.value=this.table.getCurrentPage()}))}get shadowTemplate(){return'\n      <select id="pageSelect" class="mxq"></select>\n      <label> out of <span id="totalPages"></span></label>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      #pageSelect, label {\n        display: inline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-select",PageSelect);

package/docs/kempo/components/tableControls/PageSize.js

@@ -0,0 +1 @@
+import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSize extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){if(await super.render()){const e=this.shadowRoot.getElementById("pageSizeSelect");return this.table.pageSizeOptions.forEach((t=>{const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)})),e.value=this.table.pageSize,onEvent(e,"change",(()=>{this.table.setPageSize(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{e.value=this.table.pageSize})),!0}return!1}get shadowTemplate(){return'\n      <label for="pageSizeSelect">Page Size: </label>\n      <select id="pageSizeSelect" class="mxq"></select>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-size",PageSize);

package/docs/kempo/components/tableControls/SelectCount.js

@@ -0,0 +1 @@
+import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class SelectCount extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){return!!await super.render()&&(this.updateCount(),onEvent(this.table,"selectionChange",(()=>{this.updateCount()})),!0)}updateCount(){this.shadowRoot.getElementById("selectCount").textContent=this.table.getSelectedRecords().length}get shadowTemplate(){return'\n      Selected: <span id="selectCount"></span>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n        align-self: center;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-select-count",SelectCount);

package/docs/kempo/index.js

@@ -1 +1 @@
-import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Stacks from"./components/Stacks.js";import Table from"./components/Table.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Stacks:Stacks,Table:Table,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};
+import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Stacks from"./components/Stacks.js";import Table from"./components/Table.js";import DeleteSelected from"./components/tableControlsDeleteSelected.js";import PageSelect from"./components/tableControlsPageSelect.js";import PageSize from"./components/tableControlsPageSize.js";import SelectCount from"./components/tableControlsSelectCount.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import files from"./utils/files.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Stacks:Stacks,Table:Table,DeleteSelected:DeleteSelected,PageSelect:PageSelect,PageSize:PageSize,SelectCount:SelectCount,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,files:files,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.8.0",
+  "version": "2.9.1",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/scripts/build.js

@@ -8,14 +8,31 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 console.log('Loading utils');
-const components = (await fs.readdir('./src/components/')).map(f=>f.substring(0,f.length-3));
+
+const components = [];
+async function buildComponents(dir) {
+  const files = await fs.readdir(dir);
+  for (const file of files) {
+    const fullPath = path.join(dir, file);
+    const stat = await fs.lstat(fullPath);
+    if (stat.isDirectory()) {
+      await buildComponents(fullPath);
+    } else if (file.endsWith('.js')) {
+      components.push(fullPath);
+    }
+  }
+}
+
+const componentsDir = path.join(__dirname, '..', 'src', 'components');
+await buildComponents(componentsDir);
+
 let complete = 0;
 
 console.log('Loading Component Source Code');
 process.stdout.write(`0/${components.length} = 0%`);
 const componentCode = {};
-await Promise.all(components.map( async component => {
-  componentCode[component] = await fs.readFile(`./src/components/${component}.js`, 'utf-8');
+await Promise.all(components.map(async component => {
+  componentCode[component] = await fs.readFile(component, 'utf-8');
   process.stdout.write("\r");
   complete++;
   process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
@@ -25,9 +42,9 @@ process.stdout.write("\n");
 complete = 0;
 console.log('Minifying Component Source Code');
 process.stdout.write(`0/${components.length} = 0%`);
-const minifiedCompontents = {};
-await Promise.all(components.map( async componentFile => {
-  minifiedCompontents[componentFile] = (await minify(componentCode[componentFile])).code
+const minifiedComponents = {};
+await Promise.all(components.map(async componentFile => {
+  minifiedComponents[componentFile] = (await minify(componentCode[componentFile])).code;
   process.stdout.write("\r");
   complete++;
   process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
@@ -37,9 +54,11 @@ process.stdout.write("\n");
 complete = 0;
 console.log('Saving Minified Components to dist/');
 process.stdout.write(`0/${components.length} = 0%`);
-await fse.ensureDir('./dist/components');
-await Promise.all(components.map( async component => {
-  await fs.writeFile(`./dist/components/${component}.js`, minifiedCompontents[component], 'utf-8');
+await Promise.all(components.map(async component => {
+  const relativePath = path.relative(componentsDir, component);
+  const destPath = path.join('./dist/components', relativePath);
+  await fse.ensureDir(path.dirname(destPath));
+  await fs.writeFile(destPath, minifiedComponents[component], 'utf-8');
   process.stdout.write("\r");
   complete++;
   process.stdout.write(`${complete}/${components.length} = ${Math.round((complete/components.length)*100)}%`);
@@ -47,17 +66,17 @@ await Promise.all(components.map( async component => {
 process.stdout.write("\n");
 
 console.log('Loading Utils');
-const utils = (await fs.readdir('./src/utils/')).map(f=>f.substring(0,f.length-3));
+const utils = (await fs.readdir('./src/utils/')).map(f => f.substring(0, f.length - 3));
 complete = 0;
 
 console.log('Loading Utils Source Code');
 process.stdout.write(`0/${utils.length} = 0%`);
 const utilCode = {};
-await Promise.all(utils.map( async util => {
+await Promise.all(utils.map(async util => {
   utilCode[util] = await fs.readFile(`./src/utils/${util}.js`, 'utf-8');
   process.stdout.write("\r");
   complete++;
-  process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
+  process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length) * 100)}%`);
 }));
 process.stdout.write("\n");
 
@@ -65,11 +84,11 @@ complete = 0;
 console.log('Minifying Utils Source Code');
 process.stdout.write(`0/${utils.length} = 0%`);
 const minifiedUtils = {};
-await Promise.all(utils.map( async utilFile => {
-  minifiedUtils[utilFile] = (await minify(utilCode[utilFile])).code
+await Promise.all(utils.map(async utilFile => {
+  minifiedUtils[utilFile] = (await minify(utilCode[utilFile])).code;
   process.stdout.write("\r");
   complete++;
-  process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
+  process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length) * 100)}%`);
 }));
 process.stdout.write("\n");
 
@@ -77,21 +96,21 @@ complete = 0;
 console.log('Saving Minified Utils to dist/');
 process.stdout.write(`0/${utils.length} = 0%`);
 await fse.ensureDir('./dist/utils');
-await Promise.all(utils.map( async util => {
+await Promise.all(utils.map(async util => {
   await fs.writeFile(`./dist/utils/${util}.js`, minifiedUtils[util], 'utf-8');
   process.stdout.write("\r");
   complete++;
-  process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length)*100)}%`);
+  process.stdout.write(`${complete}/${utils.length} = ${Math.round((complete/utils.length) * 100)}%`);
 }));
 process.stdout.write("\n");
 
-console.log('Generatoring export file');
+console.log('Generating export file');
 const main = `
-  ${components.map( component => `import ${component} from './components/${component}.js';` ).join('')}
-  ${utils.map( util => `import ${util} from './utils/${util}.js';` ).join('')}
+  ${components.map(component => `import ${path.basename(component, '.js')} from './components/${path.relative(componentsDir, component)}';`).join('')}
+  ${utils.map(util => `import ${util} from './utils/${util}.js';`).join('')}
   export default {
-    ${components.map( component => `${component}`).join(',')},
-    ${utils.map( util => `${util}`).join(',')}
+    ${components.map(component => `${path.basename(component, '.js')}`).join(',')},
+    ${utils.map(util => `${util}`).join(',')}
   };
 `;
 const minifiedMain = (await minify(main)).code;
@@ -108,9 +127,9 @@ await fs.writeFile('./dist/kempo-vars.css', minifiedKempoVarsCSS, 'utf-8');
 console.log('Loading kempo-styles.css');
 const kempoStylesCSS = await fs.readFile('./src/kempo-styles.css', 'utf-8');
 console.log('Minifying kempo-styles.css');
-const miniefiedKempoStylesCSS = kempoStylesCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
+const minifiedKempoStylesCSS = kempoStylesCSS.replace(/\s*\{\s*/g, '{').replace(/\s*\}\s*/g, '}').replace(/\n/g, '').replace(/\r/g, '').replace(/\s+/g, ' ').replace(/\s*\:\s*/g, ':').replace(/\s*\;\s*/g, ';').replace(/;\}/g, '}');
 console.log('Saving kempo-styles.css');
-await fs.writeFile('./dist/kempo-styles.css', miniefiedKempoStylesCSS, 'utf-8');
+await fs.writeFile('./dist/kempo-styles.css', minifiedKempoStylesCSS, 'utf-8');
 
 console.log('Loading kempo-hljs.css');
 const kempoHljsCSS = await fs.readFile('./src/kempo-hljs.css', 'utf-8');

package/src/components/Table.js

@@ -1,5 +1,9 @@
 import Component from './Component.js';
 import Icon from './Icon.js';
+import SelectCount from './tableControls/SelectCount.js';
+import PageSelect from './tableControls/PageSelect.js';
+import PageSize from './tableControls/PageSize.js';
+import DeleteSelected from './tableControls/DeleteSelected.js';
 import { toTitleCase } from '../utils/string.js';
 import { onEvent, dispatchEvent } from '../utils/element.js';
 
@@ -8,7 +12,7 @@ export default class Table extends Component {
     prevPage: {
       render: (table) => {
         const $button = document.createElement('button');
-        $button.classList.add('pq');
+        $button.classList.add('pq', 'no-btn');
         $button.appendChild(new Icon('chevron-left'));
         onEvent($button, 'click', () => table.prevPage());
 
@@ -23,7 +27,7 @@ export default class Table extends Component {
     nextPage: {
       render: (table) => {
         const $button = document.createElement('button');
-        $button.classList.add('pq');
+        $button.classList.add('pq', 'no-btn');
         $button.appendChild(new Icon('chevron-right'));
         onEvent($button, 'click', () => table.nextPage());
 
@@ -41,6 +45,12 @@ export default class Table extends Component {
     pageSize: {
       render: (table) => new PageSize(table)
     },
+    selectCount: {
+      render: (table) => new SelectCount(table)
+    },
+    deleteSelected: {
+      render: (table) => new DeleteSelected(table)
+    },
     spacer: {
       html: '<div class="flex"></div>'
     }
@@ -53,6 +63,7 @@ export default class Table extends Component {
     pageSize = 100,
     pageSizeOptions = [10, 25, 50, 100, 500],
     currentPage = 1,
+    enableSelection = false,
   } = {}) {
     super();
 
@@ -63,6 +74,8 @@ export default class Table extends Component {
       pageSize,
       pageSizeOptions,
       currentPage,
+      enableSelection,
+      selectedIndexes: [], // Renamed property
     });
 
     /* Init */
@@ -86,7 +99,26 @@ export default class Table extends Component {
     if(!this.rendered) return;
     const beforeControls = this.controls?.before?.length ? '<th></th>' : '';
     const afterControls = this.controls?.after?.length ? '<th></th>' : '';
-    this.shadowRoot.getElementById('fields').innerHTML = `${beforeControls}${this.fields.map(({label})=>`<th>${label}</th>`).join('')}${afterControls}`;
+    const selectionControl = this.enableSelection ? '<th class="selection"><input type="checkbox" id="select-all"></th>' : '';
+    this.shadowRoot.getElementById('fields').innerHTML = `${selectionControl}${beforeControls}${this.fields.map(({label})=>`<th>${label}</th>`).join('')}${afterControls}`;
+
+    if (this.enableSelection) {
+      const selectAllCheckbox = this.shadowRoot.getElementById('select-all');
+      selectAllCheckbox.addEventListener('change', () => {
+        if (selectAllCheckbox.checked) {
+          this.selectAllOnPage();
+        } else {
+          this.deselectAllOnPage();
+        }
+      });
+      onEvent(this, 'selectionChange pageChange', () => {
+        if(this.allOnPageSelected()){
+          selectAllCheckbox.checked = true;
+        } else {
+          selectAllCheckbox.checked = false;
+        }
+      });
+    }
   }
   renderRecords(){
     if(!this.rendered) return;
@@ -97,6 +129,23 @@ export default class Table extends Component {
     const paginatedRecords = this.records.slice(start, end);
     paginatedRecords.forEach((record, index) => {
       const $tr = document.createElement('tr');
+      if (this.enableSelection) {
+        const $td = document.createElement('td');
+        $td.classList.add('selection');
+        const $checkbox = document.createElement('input');
+        $checkbox.type = 'checkbox';
+        $checkbox.checked = this.selectedIndexes.includes(start + index);
+        $checkbox.addEventListener('change', () => {
+          if ($checkbox.checked) {
+            this.selectedIndexes.push(start + index);
+          } else {
+            this.selectedIndexes = this.selectedIndexes.filter(i => i !== start + index);
+          }
+          dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+        });
+        $td.appendChild($checkbox);
+        $tr.appendChild($td);
+      }
       if(this.controls?.before?.length){
         $tr.appendChild(this.renderRowControls(this.controls.before, record, start + index));
       }
@@ -149,7 +198,7 @@ export default class Table extends Component {
         }
       } else if(icon){
         const $button = document.createElement('button');
-        $button.classList.add('pq');
+        $button.classList.add('pq', 'no-btn');
         $button.appendChild(new Icon(icon));
         if (action) {
           onEvent($button, 'click', () => action(this, record, index));
@@ -176,7 +225,7 @@ export default class Table extends Component {
         }
       } else if(icon){
         const $button = document.createElement('button');
-        $button.classList.add('pq');
+        $button.classList.add('pq', 'no-btn');
         $button.appendChild(new Icon(icon));
         if (action) {
           onEvent($button, 'click', () => action(this));
@@ -228,7 +277,8 @@ export default class Table extends Component {
     controls = false,
     pageSize = false,
     pageSizeOptions = false,
-    currentPage = false
+    currentPage = false,
+    enableSelection = false // Add enableSelection property
   } = {}) {
     let rerender = false;
     let rerenderControls = false;
@@ -252,6 +302,10 @@ export default class Table extends Component {
       this.currentPage = currentPage;
       rerender = true;
     }
+    if(enableSelection !== undefined){
+      this.enableSelection = enableSelection;
+      rerender = true;
+    }
     if(rerender){
       this.renderFields();
       this.renderRecords();
@@ -301,12 +355,50 @@ export default class Table extends Component {
 
   deleteRecord(index) {
     if (index >= 0 && index < this.records.length) {
+      // Deselect the record before deleting
+      this.selectedIndexes = this.selectedIndexes.filter(i => i !== index);
+      dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
       this.records.splice(index, 1);
       this.renderRecords();
       dispatchEvent(this, 'recordDeleted', { index });
     }
   }
 
+  getSelectedRecords() {
+    return this.selectedIndexes.map(index => this.records[index]);
+  }
+
+  selectAllOnPage() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = Math.min(start + this.pageSize, this.records.length);
+    for (let i = start; i < end; i++) {
+      if (!this.selectedIndexes.includes(i)) {
+        this.selectedIndexes.push(i);
+      }
+    }
+    this.renderRecords();
+    dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+  }
+
+  deselectAllOnPage() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = Math.min(start + this.pageSize, this.records.length);
+    this.selectedIndexes = this.selectedIndexes.filter(index => index < start || index >= end);
+    this.renderRecords();
+    dispatchEvent(this, 'selectionChange', { selectedIndexes: this.selectedIndexes });
+  }
+
+  allOnPageSelected() {
+    const start = (this.currentPage - 1) * this.pageSize;
+    const end = Math.min(start + this.pageSize, this.records.length);
+    for (let i = start; i < end; i++) {
+      if (!this.selectedIndexes.includes(i)) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   get shadowTemplate(){
     return /*html*/`
       ${super.shadowTemplate}
@@ -356,6 +448,15 @@ export default class Table extends Component {
       #bottom:not(:empty) {
         border-top: 1px solid var(--c_border);
       }
+      th.selection, td.selection {
+        width: 50px;
+      }
+      th.selection input,
+      td.selection input {
+        margin: 0;
+        width: 1.35rem;
+        height: 1.35rem;
+      }
     `;
   }
 
@@ -368,131 +469,3 @@ export default class Table extends Component {
   }
 }
 window.customElements.define('k-table', Table);
-
-class PageSelect extends Component {
-  constructor(table) {
-    super();
-    this.table = table;
-    this.classList.add('mxq');
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  async render() {
-    if(await super.render()){
-      this.updateOptions();
-      return true;
-    }
-    return false;
-  }
-
-  updateOptions() {
-    const $select = this.shadowRoot.getElementById('pageSelect');
-    $select.innerHTML = '';
-    for (let i = 1; i <= this.table.getTotalPages(); i++) {
-      const $option = document.createElement('option');
-      $option.value = i;
-      $option.textContent = i;
-      $select.appendChild($option);
-    }
-    $select.value = this.table.getCurrentPage();
-    const $totalPages = this.shadowRoot.getElementById('totalPages');
-    $totalPages.textContent = this.table.getTotalPages();
-
-    onEvent($select, 'change', () => {
-      this.table.setPage(parseInt($select.value));
-    });
-
-    onEvent(this.table, 'pageSizeChange', () => {
-      this.updateOptions();
-    });
-
-    onEvent(this.table, 'pageChange', () => {
-      $select.value = this.table.getCurrentPage();
-    });
-  }
-
-  get shadowTemplate() {
-    return /*html*/`
-      <select id="pageSelect" class="mxq"></select>
-      <label> out of <span id="totalPages"></span></label>
-    `;
-  }
-
-  get shadowStyles() {
-    return /*css*/`
-      :host {
-        display: inline-flex;
-        width: max-content;
-        align-items: baseline;
-      }
-      #pageSelect, label {
-        display: inline;
-      }
-      label {
-        white-space: nowrap;
-      }
-    `;
-  }
-}
-window.customElements.define('k-table-page-select', PageSelect);
-
-class PageSize extends Component {
-  constructor(table) {
-    super();
-    this.table = table;
-    this.classList.add('mxq');
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  async render() {
-    if(await super.render()){
-      const $select = this.shadowRoot.getElementById('pageSizeSelect');
-      const options = this.table.pageSizeOptions;
-      options.forEach(size => {
-        const $option = document.createElement('option');
-        $option.value = size;
-        $option.textContent = size;
-        $select.appendChild($option);
-      });
-      $select.value = this.table.pageSize;
-
-      onEvent($select, 'change', () => {
-        this.table.setPageSize(parseInt($select.value));
-      });
-
-      onEvent(this.table, 'pageSizeChange', () => {
-        $select.value = this.table.pageSize;
-      });
-
-      return true;
-    }
-    return false;
-  }
-
-  get shadowTemplate() {
-    return /*html*/`
-      <label for="pageSizeSelect">Page Size: </label>
-      <select id="pageSizeSelect" class="mxq"></select>
-    `;
-  }
-
-  get shadowStyles() {
-    return /*css*/`
-      :host {
-        display: inline-flex;
-        width: max-content;
-        align-items: baseline;
-      }
-      label {
-        white-space: nowrap;
-      }
-    `;
-  }
-}
-window.customElements.define('k-table-page-size', PageSize);

package/src/components/tableControls/DeleteSelected.js

@@ -0,0 +1,58 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class DeleteSelected extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if (await super.render()) {
+      this.updateButtonState();
+      const $button = this.shadowRoot.getElementById('deleteSelectedButton');
+      onEvent($button, 'click', () => this.deleteSelected());
+      onEvent(this.table, 'selectionChange', () => this.updateButtonState());
+      return true;
+    }
+    return false;
+  }
+
+  deleteSelected() {
+    const selectedIndexes = this.table.selectedIndexes;
+    selectedIndexes.sort((a, b) => b - a); // Sort in descending order
+    selectedIndexes.forEach(index => this.table.deleteRecord(index));
+    this.table.selectedIndexes = [];
+    this.table.renderRecords();
+    this.updateButtonState();
+  }
+
+  updateButtonState() {
+    const $button = this.shadowRoot.getElementById('deleteSelectedButton');
+    $button.disabled = this.table.selectedIndexes.length === 0;
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <button id="deleteSelectedButton" class="pq no-btn">
+        <k-icon name="delete"></k-icon>
+      </button>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      button {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-delete-selected', DeleteSelected);

package/src/components/tableControls/PageSelect.js

@@ -0,0 +1,68 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class PageSelect extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if(await super.render()){
+      this.updateOptions();
+      return true;
+    }
+    return false;
+  }
+
+  updateOptions() {
+    const $select = this.shadowRoot.getElementById('pageSelect');
+    $select.innerHTML = '';
+    for (let i = 1; i <= this.table.getTotalPages(); i++) {
+      const $option = document.createElement('option');
+      $option.value = i;
+      $option.textContent = i;
+      $select.appendChild($option);
+    }
+    $select.value = this.table.getCurrentPage();
+    const $totalPages = this.shadowRoot.getElementById('totalPages');
+    $totalPages.textContent = this.table.getTotalPages();
+
+    onEvent($select, 'change', () => {
+      this.table.setPage(parseInt($select.value));
+    });
+
+    onEvent(this.table, 'pageSizeChange', () => {
+      this.updateOptions();
+    });
+
+    onEvent(this.table, 'pageChange', () => {
+      $select.value = this.table.getCurrentPage();
+    });
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <select id="pageSelect" class="mxq"></select>
+      <label> out of <span id="totalPages"></span></label>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      #pageSelect, label {
+        display: inline;
+      }
+      label {
+        white-space: nowrap;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-page-select', PageSelect);

package/src/components/tableControls/PageSize.js

@@ -0,0 +1,56 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class PageSize extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if(await super.render()){
+      const $select = this.shadowRoot.getElementById('pageSizeSelect');
+      const options = this.table.pageSizeOptions;
+      options.forEach(size => {
+        const $option = document.createElement('option');
+        $option.value = size;
+        $option.textContent = size;
+        $select.appendChild($option);
+      });
+      $select.value = this.table.pageSize;
+
+      onEvent($select, 'change', () => {
+        this.table.setPageSize(parseInt($select.value));
+      });
+
+      onEvent(this.table, 'pageSizeChange', () => {
+        $select.value = this.table.pageSize;
+      });
+
+      return true;
+    }
+    return false;
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      <label for="pageSizeSelect">Page Size: </label>
+      <select id="pageSizeSelect" class="mxq"></select>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+      }
+      label {
+        white-space: nowrap;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-page-size', PageSize);

package/src/components/tableControls/SelectCount.js

@@ -0,0 +1,47 @@
+import Component from '../Component.js';
+import { onEvent } from '../../utils/element.js';
+
+export default class SelectCount extends Component {
+  constructor(table) {
+    super();
+    this.table = table;
+    this.classList.add('mxq');
+  }
+
+  async render() {
+    if (await super.render()) {
+      this.updateCount();
+      onEvent(this.table, 'selectionChange', () => {
+        this.updateCount();
+      });
+      return true;
+    }
+    return false;
+  }
+
+  updateCount() {
+    const $count = this.shadowRoot.getElementById('selectCount');
+    $count.textContent = this.table.getSelectedRecords().length;
+  }
+
+  get shadowTemplate() {
+    return /*html*/`
+      Selected: <span id="selectCount"></span>
+    `;
+  }
+
+  get shadowStyles() {
+    return /*css*/`
+      :host {
+        display: inline-flex;
+        width: max-content;
+        align-items: baseline;
+        align-self: center;
+      }
+      label {
+        white-space: nowrap;
+      }
+    `;
+  }
+}
+window.customElements.define('k-table-select-count', SelectCount);

package/dist/components/Stack.js

@@ -1 +0,0 @@
-import Component from"./components/Component.js";export default class Stack extends Component{constructor(){super()}}window.customElements.define("k-stack",Stack);export class StackPanel extends Component{get shadowStyles(){return"\n      :host {\n        display: block;\n      }\n    "}}window.customElements.define("k-stack-panel",StackPanel);

package/docs/kempo/components/Stack.js

@@ -1 +0,0 @@
-import Component from"./components/Component.js";export default class Stack extends Component{constructor(){super()}}window.customElements.define("k-stack",Stack);export class StackPanel extends Component{get shadowStyles(){return"\n      :host {\n        display: block;\n      }\n    "}}window.customElements.define("k-stack-panel",StackPanel);