kempo-ui 0.0.37 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/dist/components/Table.js +1 -1
  2. package/dist/components/tableControls/PageSelect.js +1 -1
  3. package/docs/components/accordion.html +1 -1
  4. package/docs/components/card.html +1 -1
  5. package/docs/components/color-picker.html +1 -1
  6. package/docs/components/content-slider.html +1 -1
  7. package/docs/components/dialog.html +1 -1
  8. package/docs/components/focus-capture.html +1 -1
  9. package/docs/components/hybrid-component.html +1 -1
  10. package/docs/components/icon.html +1 -1
  11. package/docs/components/import.html +1 -1
  12. package/docs/components/light-component.html +1 -1
  13. package/docs/components/photo-viewer.html +1 -1
  14. package/docs/components/resize.html +1 -1
  15. package/docs/components/shadow-component.html +1 -1
  16. package/docs/components/show-more.html +1 -1
  17. package/docs/components/side-menu.html +1 -1
  18. package/docs/components/sortable.html +1 -1
  19. package/docs/components/split.html +1 -1
  20. package/docs/components/table.html +1 -1
  21. package/docs/components/tableControls.html +1 -1
  22. package/docs/components/tableCustomFields.html +1 -1
  23. package/docs/components/tableFetchRecords.html +1 -1
  24. package/docs/components/tableFieldSortHide.html +1 -1
  25. package/docs/components/tablePagination.html +1 -1
  26. package/docs/components/tableRecordEditing.html +1 -1
  27. package/docs/components/tableRecordFiltering.html +1 -1
  28. package/docs/components/tableRecordHiding.html +1 -1
  29. package/docs/components/tableRecordSearching.html +1 -1
  30. package/docs/components/tableRecordSelection.html +1 -1
  31. package/docs/components/tableRowControls.html +1 -1
  32. package/docs/components/tableSorting.html +1 -1
  33. package/docs/components/tabs.html +1 -1
  34. package/docs/components/tags.html +1 -1
  35. package/docs/components/theme-switcher.html +1 -1
  36. package/docs/components/timestamp.html +1 -1
  37. package/docs/components/toast.html +1 -1
  38. package/docs/components/toggle.html +1 -1
  39. package/docs/components/tree.html +1 -1
  40. package/docs/dev.config.json +0 -2
  41. package/docs/index.html +1 -2
  42. package/docs/src/components/Table.js +1 -1
  43. package/docs/src/components/tableControls/PageSelect.js +1 -1
  44. package/docs/utils/context.html +1 -1
  45. package/docs/utils/cookie.html +1 -1
  46. package/docs/utils/debounce.html +1 -1
  47. package/docs/utils/drag.html +1 -1
  48. package/docs/utils/formatTimestamp.html +1 -1
  49. package/docs/utils/object.html +1 -1
  50. package/docs/utils/propConverters.html +1 -1
  51. package/docs/utils/string.html +1 -1
  52. package/docs/utils/theme.html +1 -1
  53. package/docs/utils/toTitleCase.html +1 -1
  54. package/docs/utils/type.html +1 -1
  55. package/docs/utils/wait.html +1 -1
  56. package/package.json +3 -5
  57. package/scripts/build.js +0 -11
  58. package/scripts/update-kempo-css.js +49 -0
package/dist/components/Table.js CHANGED
@@ -48,7 +48,7 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
48
48
  <div class="cell controls controls-after" style="width: ${this.columnSizes.afterControls}px">
49
49
  ${e}
50
50
  </div>
51
- `}hasBeforeControls(){return!!this.querySelector('[slot="before"]')}hasAfterControls(){return!!this.querySelector('[slot="after"]')}hasTopControls(){return!!this.querySelector('[slot="top"]')}hasBottomControls(){return!!this.querySelector(":scope > :not([slot])")}editRecord(e){e[editing]=!0;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.add("editing"),t.setAttribute("editing","true"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";if(t.innerHTML="",i.calculator){const s=document.createElement("input");s.disabled=!0,s.value=i.calculator(e,this),t.appendChild(s)}else if(i.editor)t.appendChild(i.editor(r));else{const e=i.type||typeof r,s=Table.editors[e]||Table.editors.string;t.appendChild(s(r))}}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!0},bubbles:!0}))}saveEditedRecord(e){const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i&&!i.calculator){const i=t.querySelector("input, select");i&&(e[s]=i.value)}}),e[editing]=!1,t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}cancelEditedRecord(e){e[editing]=!1;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}recordIsEditing(e){return e[editing]}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.getDisplayedRecords().length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageChange",{bubbles:!0})))}firstPage(){1!==this.currentPage&&this.setPage(1)}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}lastPage(){this.currentPage!==this.getTotalPages()&&this.setPage(this.getTotalPages())}setPageSize(e){this.pageSize=e,this.currentPage=1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageSizeChange",{bubbles:!0}))}getPageSize(){return this.pageSize}getPageSizeOptions(){return this.pageSizeOptions}getFieldLabel(e){const t=this.fields.find(t=>t.name===e);return t?t.label:toTitleCase(e)}setPageSizeOptions(e){this.pageSizeOptions=e,this.requestUpdate()}setData({records:e=!1,fields:t=!1,pageSize:s=!1,pageSizeOptions:i=!1,currentPage:r=!1,enableSelection:o}={}){let l=!1,n=this.getTotalPages(),a=this.currentPage;e&&(this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),l=!0),s&&(this.pageSize=s,l=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,l=!0),void 0!==o&&(this.enableSelection=o,l=!0),l&&this.requestUpdate();const d=this.getTotalPages();d!==n&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),a>d&&this.setPage(d)}setRecords(e,t){let s=this.getTotalPages(),i=this.currentPage;this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordsSet",{detail:{records:e},bubbles:!0}));const r=this.getTotalPages();r!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),i>r&&this.setPage(r)}setupFetchRecords(e,t){const s=this.records.length,i=this.getTotalPages();if(s<e){this.records.length=e,this.records.fill(null,s),this.requestUpdate();const t=this.getTotalPages();t!==i&&setTimeout(()=>{this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0}))},0)}this.addEventListener("fetchRecords",async e=>{if(this.fetchPending)return;this.fetchPending=!0;const{start:s,count:i}=e.detail,r=await t(s,i);r.forEach((e,t)=>{e[index]=s+t,void 0===e[selected]&&(e[selected]=!1),void 0===e[hidden]&&(e[hidden]=!1),void 0===e[editing]&&(e[editing]=!1)}),this.records.splice(s,r.length,...r),this.fetchPending=!1,this.requestUpdate()})}addRecord(e){e[selected]=!1,e[hidden]=!1,e[index]=this.records.length,this.records.push(e),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordAdded",{detail:{record:e},bubbles:!0}))}updateRecord(e,t){let s=!1,i=this.records.find(t=>t===e);if(i||void 0===e[index]||(i=this.records[e[index]]),Object.keys(t).forEach(e=>{i.hasOwnProperty(e)&&(i[e]=t[e],s=!0)}),s){const e=(this.currentPage-1)*this.pageSize,t=e+this.pageSize;(!this.enablePages||i[index]>=e&&i[index]<t)&&this.requestUpdate()}}deleteRecord(e){let t=this.records.find(t=>t===e),s=this.getTotalPages();if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0})),this.dispatchEvent(new CustomEvent("recordDeleted",{detail:{index:e},bubbles:!0}));const i=this.getTotalPages();this.currentPage>i&&this.setPage(i),i!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:i},bubbles:!0}))}}deleteSelected(){let e=this.getTotalPages();this.getSelectedRecords().forEach(e=>{let t=this.records.find(t=>t===e);if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1)}}),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate();const t=this.getTotalPages();this.currentPage>t&&this.setPage(t),t!==e&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))}getSelectedRecords(){return this.records.filter(e=>e[selected])}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!0;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!1;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)if(!this.records[s][selected])return!1;return!0}sortBy(e,t=!0){this.sort=this.sort.filter(t=>t.name!==e),this.sort.push({name:e,asc:t}),this.requestUpdate()}hideRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})))}showRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})))}showAllRecords(){this.records.forEach(e=>{e[hidden]=!1}),this.filters.length&&(this.filters=[],this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0}))),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})),this.dispatchEvent(new CustomEvent("allRecordsShown",{bubbles:!0}))}addFilter(e,t,s){this.filters.push({field:e,condition:t,value:s}),this.dispatchEvent(new CustomEvent("filterAdded",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),this.requestUpdate()}removeFilter(e,t,s,i=!0){const r=this.filters.findIndex(i=>i.field===e&&i.condition===t&&i.value===s);-1!==r&&(this.records.forEach(i=>{this.testFilter(i,e,t,s)||(i[hidden]=!1)}),this.filters.splice(r,1),this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),i&&this.requestUpdate())}testFilter(e,t,s,i){let r=e[t],o=i;switch(this.caseSensitiveFilters||"string"!=typeof r||"string"!=typeof i||(r=r.toLowerCase(),o=i.toLowerCase()),s){case"equals":return r===o;case"not-equals":return r!==o;case"contains":return r.includes(o);case"not-contains":return!r.includes(o);case"greater-than":return r>o;case"less-than":return r<o;case"greater-than-or-equal":return r>=o;case"less-than-or-equal":return r<=o;default:return!0}}removeAllFilters(){this.filters.length&&(this.filters.forEach(({field:e,condition:t,value:s})=>{this.removeFilter(e,t,s,!1)}),this.requestUpdate())}search(e){const t=e.trim().toLowerCase();let s=!1;this.records.forEach(e=>{if(e[hidden])return;let i=!1;this.fields.forEach(({name:s})=>{(e[s]?.toString().toLowerCase()||"").includes(t)&&(i=!0)}),e[hidden]!==!i&&(e[hidden]=!i,s=!0)}),s&&(this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})),this.requestUpdate()),this.dispatchEvent(new CustomEvent("search",{detail:{term:e},bubbles:!0}))}getDisplayedRecords(){this.filters.forEach(({field:e,condition:t,value:s})=>{this.records.forEach(i=>{null!==i&&(this.testFilter(i,e,t,s)||(i[hidden]=!0))})});let e=this.records.filter(e=>null===e||!e[hidden]);return this.sort.forEach(({name:t,asc:s})=>{e.sort((e,i)=>null===e||null===i?0:e[t]<i[t]?s?-1:1:e[t]>i[t]?s?1:-1:0)}),e}getHiddenRecords(){return this.records.filter(e=>e[hidden])}calculateColumnSizes(){const e={total:0};this.enableSelection&&(e.total+=40);const t=Array.from(this.querySelectorAll('[slot="before"]')),s=Array.from(this.querySelectorAll('[slot="after"]'));e.beforeControls=t.reduce((e,t)=>e+(t.maxWidth||40),0),e.afterControls=s.reduce((e,t)=>e+(t.maxWidth||40),0),this.hasBeforeControls()&&(e.total+=e.beforeControls),this.hasAfterControls()&&(e.total+=e.afterControls),this.fields.forEach(t=>{if(t.size)e[t.name]=t.size,e.total+=t.size;else{let s=0;this.records.slice(0,100).forEach(e=>{if(null===e)return;let i=e[t.name];t.calculator&&(i=t.calculator(e,this)),t.formatter&&(i=t.formatter(i)),i&&i.toString().length>s&&(s=i.toString().length)}),e[t.name]=Math.max(10*s+32,128),t.hidden||(e.total+=e[t.name])}});const i=[...t,...s].some(e=>void 0===e.maxWidth);return JSON.stringify(this.columnSizes)!==JSON.stringify(e)&&(this.columnSizes=e),i&&setTimeout(()=>this.calculateColumnSizes(),0),this.columnSizes}setFieldHiddenState(e,t){const s=this.fields.find(t=>t.name===e);s&&(s.hidden=t,this.calculateColumnSizes(),this.requestUpdate(),this.dispatchEvent(new CustomEvent("fieldVisibilityChanged",{detail:{field:s},bubbles:!0})),this.dispatchEvent(new CustomEvent(t?"fieldHidden":"fieldShown",{detail:{field:s},bubbles:!0})))}hideField(e){this.setFieldHiddenState(e,!0)}showField(e){this.setFieldHiddenState(e,!1)}reorderFields(e){const t=[];e.forEach(e=>{const s=this.fields.find(t=>t.name===e);s&&t.push(s)}),this.fields=t,this.requestUpdate()}render(){return this.records&&this.fields?(this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls"),html`
51
+ `}hasBeforeControls(){return!!this.querySelector('[slot="before"]')}hasAfterControls(){return!!this.querySelector('[slot="after"]')}hasTopControls(){return!!this.querySelector('[slot="top"]')}hasBottomControls(){return!!this.querySelector(":scope > :not([slot])")}editRecord(e){e[editing]=!0;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.add("editing"),t.setAttribute("editing","true"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";if(t.innerHTML="",i.calculator){const s=document.createElement("input");s.disabled=!0,s.value=i.calculator(e,this),t.appendChild(s)}else if(i.editor)t.appendChild(i.editor(r));else{const e=i.type||typeof r,s=Table.editors[e]||Table.editors.string;t.appendChild(s(r))}}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!0},bubbles:!0}))}saveEditedRecord(e){const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i&&!i.calculator){const i=t.querySelector("input, select");i&&(e[s]=i.value)}}),e[editing]=!1,t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}cancelEditedRecord(e){e[editing]=!1;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}recordIsEditing(e){return e[editing]}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.getDisplayedRecords().length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageChange",{bubbles:!0})))}firstPage(){1!==this.currentPage&&this.setPage(1)}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}lastPage(){this.currentPage!==this.getTotalPages()&&this.setPage(this.getTotalPages())}setPageSize(e){this.pageSize=e,this.currentPage=1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageSizeChange",{bubbles:!0}))}getPageSize(){return this.pageSize}getPageSizeOptions(){return this.pageSizeOptions}getFieldLabel(e){const t=this.fields.find(t=>t.name===e);return t?t.label:toTitleCase(e)}setPageSizeOptions(e){this.pageSizeOptions=e,this.requestUpdate()}setData({records:e=!1,fields:t=!1,pageSize:s=!1,pageSizeOptions:i=!1,currentPage:r=!1,enableSelection:o}={}){let l=!1,n=this.getTotalPages(),a=this.currentPage;e&&(this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),l=!0),s&&(this.pageSize=s,l=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,l=!0),void 0!==o&&(this.enableSelection=o,l=!0),l&&this.requestUpdate();const d=this.getTotalPages();d!==n&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),a>d&&this.setPage(d)}setRecords(e,t){let s=this.getTotalPages(),i=this.currentPage;this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordsSet",{detail:{records:e},bubbles:!0}));const r=this.getTotalPages();r!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),i>r&&this.setPage(r)}setupFetchRecords(e,t){const s=this.records.length,i=this.getTotalPages();if(s<e){this.records.length=e,this.records.fill(null,s),this.requestUpdate();const t=this.getTotalPages();t!==i&&setTimeout(()=>{this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0}))},0)}this.addEventListener("fetchRecords",async e=>{if(this.fetchPending)return;this.fetchPending=!0;const{start:s,count:i}=e.detail,r=await t(s,i);r.forEach((e,t)=>{e[index]=s+t,void 0===e[selected]&&(e[selected]=!1),void 0===e[hidden]&&(e[hidden]=!1),void 0===e[editing]&&(e[editing]=!1)}),this.records.splice(s,r.length,...r),this.fetchPending=!1,this.requestUpdate()})}addRecord(e){e[selected]=!1,e[hidden]=!1,e[index]=this.records.length,this.records.push(e),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordAdded",{detail:{record:e},bubbles:!0}))}updateRecord(e,t){let s=!1,i=this.records.find(t=>t===e);if(i||void 0===e[index]||(i=this.records[e[index]]),Object.keys(t).forEach(e=>{i.hasOwnProperty(e)&&(i[e]=t[e],s=!0)}),s){const e=(this.currentPage-1)*this.pageSize,t=e+this.pageSize;(!this.enablePages||i[index]>=e&&i[index]<t)&&this.requestUpdate()}}deleteRecord(e){let t=this.records.find(t=>t===e),s=this.getTotalPages();if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0})),this.dispatchEvent(new CustomEvent("recordDeleted",{detail:{index:e},bubbles:!0}));const i=this.getTotalPages();this.currentPage>i&&this.setPage(i),i!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:i},bubbles:!0}))}}deleteSelected(){let e=this.getTotalPages();this.getSelectedRecords().forEach(e=>{let t=this.records.find(t=>t===e);if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1)}}),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate();const t=this.getTotalPages();this.currentPage>t&&this.setPage(t),t!==e&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))}getSelectedRecords(){return this.records.filter(e=>e[selected])}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!0;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!1;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)if(!this.records[s][selected])return!1;return!0}sortBy(e,t=!0){this.sort=this.sort.filter(t=>t.name!==e),this.sort.push({name:e,asc:t}),this.requestUpdate()}hideRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})))}showRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})))}showAllRecords(){this.records.forEach(e=>{e[hidden]=!1}),this.filters.length&&(this.filters=[],this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0}))),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})),this.dispatchEvent(new CustomEvent("allRecordsShown",{bubbles:!0}))}addFilter(e,t,s){this.filters.push({field:e,condition:t,value:s}),this.dispatchEvent(new CustomEvent("filterAdded",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),this.requestUpdate()}removeFilter(e,t,s,i=!0){const r=this.filters.findIndex(i=>i.field===e&&i.condition===t&&i.value===s);-1!==r&&(this.records.forEach(i=>{this.testFilter(i,e,t,s)||(i[hidden]=!1)}),this.filters.splice(r,1),this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),i&&this.requestUpdate())}testFilter(e,t,s,i){let r=e[t],o=i;switch(this.caseSensitiveFilters||"string"!=typeof r||"string"!=typeof i||(r=r.toLowerCase(),o=i.toLowerCase()),s){case"equals":return r===o;case"not-equals":return r!==o;case"contains":return r.includes(o);case"not-contains":return!r.includes(o);case"greater-than":return r>o;case"less-than":return r<o;case"greater-than-or-equal":return r>=o;case"less-than-or-equal":return r<=o;default:return!0}}removeAllFilters(){this.filters.length&&([...this.filters].forEach(({field:e,condition:t,value:s})=>{this.removeFilter(e,t,s,!1)}),this.requestUpdate())}search(e){const t=e.trim().toLowerCase();let s=!1;this.records.forEach(e=>{if(e[hidden])return;let i=!1;this.fields.forEach(({name:s})=>{(e[s]?.toString().toLowerCase()||"").includes(t)&&(i=!0)}),e[hidden]!==!i&&(e[hidden]=!i,s=!0)}),s&&(this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})),this.requestUpdate()),this.dispatchEvent(new CustomEvent("search",{detail:{term:e},bubbles:!0}))}getDisplayedRecords(){this.filters.forEach(({field:e,condition:t,value:s})=>{this.records.forEach(i=>{null!==i&&(this.testFilter(i,e,t,s)||(i[hidden]=!0))})});let e=this.records.filter(e=>null===e||!e[hidden]);return this.sort.forEach(({name:t,asc:s})=>{e.sort((e,i)=>null===e||null===i?0:e[t]<i[t]?s?-1:1:e[t]>i[t]?s?1:-1:0)}),e}getHiddenRecords(){return this.records.filter(e=>e[hidden])}calculateColumnSizes(){const e={total:0};this.enableSelection&&(e.total+=40);const t=Array.from(this.querySelectorAll('[slot="before"]')),s=Array.from(this.querySelectorAll('[slot="after"]'));e.beforeControls=t.reduce((e,t)=>e+(t.maxWidth||40),0),e.afterControls=s.reduce((e,t)=>e+(t.maxWidth||40),0),this.hasBeforeControls()&&(e.total+=e.beforeControls),this.hasAfterControls()&&(e.total+=e.afterControls),this.fields.forEach(t=>{if(t.size)e[t.name]=t.size,e.total+=t.size;else{let s=0;this.records.slice(0,100).forEach(e=>{if(null===e)return;let i=e[t.name];t.calculator&&(i=t.calculator(e,this)),t.formatter&&(i=t.formatter(i)),i&&i.toString().length>s&&(s=i.toString().length)}),e[t.name]=Math.max(10*s+32,128),t.hidden||(e.total+=e[t.name])}});const i=[...t,...s].some(e=>void 0===e.maxWidth);return JSON.stringify(this.columnSizes)!==JSON.stringify(e)&&(this.columnSizes=e),i&&setTimeout(()=>this.calculateColumnSizes(),0),this.columnSizes}setFieldHiddenState(e,t){const s=this.fields.find(t=>t.name===e);s&&(s.hidden=t,this.calculateColumnSizes(),this.requestUpdate(),this.dispatchEvent(new CustomEvent("fieldVisibilityChanged",{detail:{field:s},bubbles:!0})),this.dispatchEvent(new CustomEvent(t?"fieldHidden":"fieldShown",{detail:{field:s},bubbles:!0})))}hideField(e){this.setFieldHiddenState(e,!0)}showField(e){this.setFieldHiddenState(e,!1)}reorderFields(e){const t=[];e.forEach(e=>{const s=this.fields.find(t=>t.name===e);s&&t.push(s)}),this.fields=t,this.requestUpdate()}render(){return this.records&&this.fields?(this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls"),html`
52
52
  <div id="wrapper">
53
53
  <div id="top" style="width: ${this.columnSizes.total}px"><slot name="top"></slot></div>
54
54
  <div id="table">
package/dist/components/tableControls/PageSelect.js CHANGED
@@ -1,4 +1,4 @@
1
- import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.min.js";export default class PageSelect extends TableControl{static properties={...TableControl.properties,currentPage:{type:Number,state:!0},totalPages:{type:Number,state:!0}};constructor(){super({maxWidth:null}),this.currentPage=1,this.totalPages=1}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange",this.handlePageChange),this.onTableEvent("pageSizeChange",this.handlePageSizeChange),this.onTableEvent("pageCountChanged",this.handlePageCountChange)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.handlePageChange),this.table.removeEventListener("pageSizeChange",this.handlePageSizeChange),this.table.removeEventListener("pageCountChanged",this.handlePageCountChange))}handlePageChange=()=>{this.table&&(this.currentPage=this.table.getCurrentPage())};handlePageSizeChange=()=>{this.table&&(this.currentPage=this.table.getCurrentPage(),this.totalPages=this.table.getTotalPages())};handlePageCountChange=()=>{this.table&&(this.totalPages=this.table.getTotalPages())};handleSelectChange=e=>{this.table&&this.table.setPage(parseInt(e.target.value))};render(){if(!this.table)return html`<div>No table found</div>`;const e=[];for(let t=1;t<=this.totalPages;t++)e.push(html`<option value="${t}" ?selected="${t===this.currentPage}">Page ${t}</option>`);return html`
1
+ import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.min.js";export default class PageSelect extends TableControl{static properties={...TableControl.properties};constructor(){super({maxWidth:null})}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange pageSizeChange pageCountChanged recordsSet",this.handleTableUpdate)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.handleTableUpdate),this.table.removeEventListener("pageSizeChange",this.handleTableUpdate),this.table.removeEventListener("pageCountChanged",this.handleTableUpdate),this.table.removeEventListener("recordsSet",this.handleTableUpdate))}handleTableUpdate=()=>{this.requestUpdate()};handleSelectChange=e=>{this.table&&this.table.setPage(parseInt(e.target.value))};get currentPage(){return this.table?this.table.getCurrentPage():1}get totalPages(){return this.table?this.table.getTotalPages():1}render(){if(!this.table)return html`<div>No table found</div>`;const e=[];for(let t=1;t<=this.totalPages;t++)e.push(html`<option value="${t}" ?selected="${t===this.currentPage}">Page ${t}</option>`);return html`
2
2
  <div class="page-select">
3
3
  <select class="no-btn ph b r" @change="${this.handleSelectChange}" ?disabled="${this.totalPages<=1}">
4
4
  ${e}
package/docs/components/accordion.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/card.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/color-picker.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>ColorPicker Component - Kempo UI</title>
7
- <link rel="stylesheet" href="../kempo.min.css">
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css">
8
8
  <link rel="stylesheet" href="../kempo-hljs.css">
9
9
  <link rel="icon" href="../manifest.json">
10
10
  <script type="module" src="../init-1.js"></script>
package/docs/components/content-slider.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/dialog.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/focus-capture.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/hybrid-component.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/icon.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/import.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/light-component.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/photo-viewer.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/resize.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/shadow-component.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/show-more.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/side-menu.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/sortable.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/split.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/table.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tableControls.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tableCustomFields.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tableFetchRecords.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
package/docs/components/tableFieldSortHide.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
package/docs/components/tablePagination.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tableRecordEditing.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tableRecordFiltering.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
package/docs/components/tableRecordHiding.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tableRecordSearching.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
package/docs/components/tableRecordSelection.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tableRowControls.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tableSorting.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script type="module" src="../src/components/Table.js"></script>
package/docs/components/tabs.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tags.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/theme-switcher.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/timestamp.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/toast.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/toggle.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/components/tree.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
9
9
  <link rel="manifest" href="../manifest.json" />
10
10
  <link rel="stylesheet" href="../kempo-vars.css" />
11
- <link rel="stylesheet" href="../kempo.min.css" />
11
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
12
12
  <link rel="stylesheet" href="../kempo-hljs.css" />
13
13
  <link rel="stylesheet" href="../styles.css" />
14
14
  <script>window.litDisableBundleWarning = true;</script>
package/docs/dev.config.json CHANGED
@@ -1,8 +1,6 @@
1
1
  {
2
2
  "customRoutes": {
3
- "/kempo.min.css": "../node_modules/kempo-css/dist/kempo.min.css",
4
3
  "/kempo-vars.css": "../src/kempo-vars.css",
5
- "/kempo-hljs.min.css": "../node_modules/kempo-css/dist/kempo-hljs.min.css",
6
4
  "/icons/**": "../icons/**",
7
5
  "/src/**": "../src/**"
8
6
  },
package/docs/index.html CHANGED
@@ -6,10 +6,9 @@
6
6
  <title>Kempo UI Documentation</title>
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
8
8
  <link rel="manifest" href="./manifest.json" />
9
- <link rel="stylesheet" href="./kempo.min.css">
9
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css">
10
10
  <link rel="stylesheet" href="./kempo-hljs.css">
11
11
  <link rel="stylesheet" href="./kempo-vars.css">
12
- <link rel="stylesheet" href="./styles.css">
13
12
  <script>window.litDisableBundleWarning = true;</script>
14
13
  <script src="./init.js" type="module"></script>
15
14
  </head>
package/docs/src/components/Table.js CHANGED
@@ -48,7 +48,7 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
48
48
  <div class="cell controls controls-after" style="width: ${this.columnSizes.afterControls}px">
49
49
  ${e}
50
50
  </div>
51
- `}hasBeforeControls(){return!!this.querySelector('[slot="before"]')}hasAfterControls(){return!!this.querySelector('[slot="after"]')}hasTopControls(){return!!this.querySelector('[slot="top"]')}hasBottomControls(){return!!this.querySelector(":scope > :not([slot])")}editRecord(e){e[editing]=!0;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.add("editing"),t.setAttribute("editing","true"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";if(t.innerHTML="",i.calculator){const s=document.createElement("input");s.disabled=!0,s.value=i.calculator(e,this),t.appendChild(s)}else if(i.editor)t.appendChild(i.editor(r));else{const e=i.type||typeof r,s=Table.editors[e]||Table.editors.string;t.appendChild(s(r))}}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!0},bubbles:!0}))}saveEditedRecord(e){const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i&&!i.calculator){const i=t.querySelector("input, select");i&&(e[s]=i.value)}}),e[editing]=!1,t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}cancelEditedRecord(e){e[editing]=!1;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}recordIsEditing(e){return e[editing]}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.getDisplayedRecords().length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageChange",{bubbles:!0})))}firstPage(){1!==this.currentPage&&this.setPage(1)}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}lastPage(){this.currentPage!==this.getTotalPages()&&this.setPage(this.getTotalPages())}setPageSize(e){this.pageSize=e,this.currentPage=1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageSizeChange",{bubbles:!0}))}getPageSize(){return this.pageSize}getPageSizeOptions(){return this.pageSizeOptions}getFieldLabel(e){const t=this.fields.find(t=>t.name===e);return t?t.label:toTitleCase(e)}setPageSizeOptions(e){this.pageSizeOptions=e,this.requestUpdate()}setData({records:e=!1,fields:t=!1,pageSize:s=!1,pageSizeOptions:i=!1,currentPage:r=!1,enableSelection:o}={}){let l=!1,n=this.getTotalPages(),a=this.currentPage;e&&(this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),l=!0),s&&(this.pageSize=s,l=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,l=!0),void 0!==o&&(this.enableSelection=o,l=!0),l&&this.requestUpdate();const d=this.getTotalPages();d!==n&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),a>d&&this.setPage(d)}setRecords(e,t){let s=this.getTotalPages(),i=this.currentPage;this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordsSet",{detail:{records:e},bubbles:!0}));const r=this.getTotalPages();r!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),i>r&&this.setPage(r)}setupFetchRecords(e,t){const s=this.records.length,i=this.getTotalPages();if(s<e){this.records.length=e,this.records.fill(null,s),this.requestUpdate();const t=this.getTotalPages();t!==i&&setTimeout(()=>{this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0}))},0)}this.addEventListener("fetchRecords",async e=>{if(this.fetchPending)return;this.fetchPending=!0;const{start:s,count:i}=e.detail,r=await t(s,i);r.forEach((e,t)=>{e[index]=s+t,void 0===e[selected]&&(e[selected]=!1),void 0===e[hidden]&&(e[hidden]=!1),void 0===e[editing]&&(e[editing]=!1)}),this.records.splice(s,r.length,...r),this.fetchPending=!1,this.requestUpdate()})}addRecord(e){e[selected]=!1,e[hidden]=!1,e[index]=this.records.length,this.records.push(e),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordAdded",{detail:{record:e},bubbles:!0}))}updateRecord(e,t){let s=!1,i=this.records.find(t=>t===e);if(i||void 0===e[index]||(i=this.records[e[index]]),Object.keys(t).forEach(e=>{i.hasOwnProperty(e)&&(i[e]=t[e],s=!0)}),s){const e=(this.currentPage-1)*this.pageSize,t=e+this.pageSize;(!this.enablePages||i[index]>=e&&i[index]<t)&&this.requestUpdate()}}deleteRecord(e){let t=this.records.find(t=>t===e),s=this.getTotalPages();if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0})),this.dispatchEvent(new CustomEvent("recordDeleted",{detail:{index:e},bubbles:!0}));const i=this.getTotalPages();this.currentPage>i&&this.setPage(i),i!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:i},bubbles:!0}))}}deleteSelected(){let e=this.getTotalPages();this.getSelectedRecords().forEach(e=>{let t=this.records.find(t=>t===e);if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1)}}),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate();const t=this.getTotalPages();this.currentPage>t&&this.setPage(t),t!==e&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))}getSelectedRecords(){return this.records.filter(e=>e[selected])}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!0;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!1;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)if(!this.records[s][selected])return!1;return!0}sortBy(e,t=!0){this.sort=this.sort.filter(t=>t.name!==e),this.sort.push({name:e,asc:t}),this.requestUpdate()}hideRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})))}showRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})))}showAllRecords(){this.records.forEach(e=>{e[hidden]=!1}),this.filters.length&&(this.filters=[],this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0}))),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})),this.dispatchEvent(new CustomEvent("allRecordsShown",{bubbles:!0}))}addFilter(e,t,s){this.filters.push({field:e,condition:t,value:s}),this.dispatchEvent(new CustomEvent("filterAdded",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),this.requestUpdate()}removeFilter(e,t,s,i=!0){const r=this.filters.findIndex(i=>i.field===e&&i.condition===t&&i.value===s);-1!==r&&(this.records.forEach(i=>{this.testFilter(i,e,t,s)||(i[hidden]=!1)}),this.filters.splice(r,1),this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),i&&this.requestUpdate())}testFilter(e,t,s,i){let r=e[t],o=i;switch(this.caseSensitiveFilters||"string"!=typeof r||"string"!=typeof i||(r=r.toLowerCase(),o=i.toLowerCase()),s){case"equals":return r===o;case"not-equals":return r!==o;case"contains":return r.includes(o);case"not-contains":return!r.includes(o);case"greater-than":return r>o;case"less-than":return r<o;case"greater-than-or-equal":return r>=o;case"less-than-or-equal":return r<=o;default:return!0}}removeAllFilters(){this.filters.length&&(this.filters.forEach(({field:e,condition:t,value:s})=>{this.removeFilter(e,t,s,!1)}),this.requestUpdate())}search(e){const t=e.trim().toLowerCase();let s=!1;this.records.forEach(e=>{if(e[hidden])return;let i=!1;this.fields.forEach(({name:s})=>{(e[s]?.toString().toLowerCase()||"").includes(t)&&(i=!0)}),e[hidden]!==!i&&(e[hidden]=!i,s=!0)}),s&&(this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})),this.requestUpdate()),this.dispatchEvent(new CustomEvent("search",{detail:{term:e},bubbles:!0}))}getDisplayedRecords(){this.filters.forEach(({field:e,condition:t,value:s})=>{this.records.forEach(i=>{null!==i&&(this.testFilter(i,e,t,s)||(i[hidden]=!0))})});let e=this.records.filter(e=>null===e||!e[hidden]);return this.sort.forEach(({name:t,asc:s})=>{e.sort((e,i)=>null===e||null===i?0:e[t]<i[t]?s?-1:1:e[t]>i[t]?s?1:-1:0)}),e}getHiddenRecords(){return this.records.filter(e=>e[hidden])}calculateColumnSizes(){const e={total:0};this.enableSelection&&(e.total+=40);const t=Array.from(this.querySelectorAll('[slot="before"]')),s=Array.from(this.querySelectorAll('[slot="after"]'));e.beforeControls=t.reduce((e,t)=>e+(t.maxWidth||40),0),e.afterControls=s.reduce((e,t)=>e+(t.maxWidth||40),0),this.hasBeforeControls()&&(e.total+=e.beforeControls),this.hasAfterControls()&&(e.total+=e.afterControls),this.fields.forEach(t=>{if(t.size)e[t.name]=t.size,e.total+=t.size;else{let s=0;this.records.slice(0,100).forEach(e=>{if(null===e)return;let i=e[t.name];t.calculator&&(i=t.calculator(e,this)),t.formatter&&(i=t.formatter(i)),i&&i.toString().length>s&&(s=i.toString().length)}),e[t.name]=Math.max(10*s+32,128),t.hidden||(e.total+=e[t.name])}});const i=[...t,...s].some(e=>void 0===e.maxWidth);return JSON.stringify(this.columnSizes)!==JSON.stringify(e)&&(this.columnSizes=e),i&&setTimeout(()=>this.calculateColumnSizes(),0),this.columnSizes}setFieldHiddenState(e,t){const s=this.fields.find(t=>t.name===e);s&&(s.hidden=t,this.calculateColumnSizes(),this.requestUpdate(),this.dispatchEvent(new CustomEvent("fieldVisibilityChanged",{detail:{field:s},bubbles:!0})),this.dispatchEvent(new CustomEvent(t?"fieldHidden":"fieldShown",{detail:{field:s},bubbles:!0})))}hideField(e){this.setFieldHiddenState(e,!0)}showField(e){this.setFieldHiddenState(e,!1)}reorderFields(e){const t=[];e.forEach(e=>{const s=this.fields.find(t=>t.name===e);s&&t.push(s)}),this.fields=t,this.requestUpdate()}render(){return this.records&&this.fields?(this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls"),html`
51
+ `}hasBeforeControls(){return!!this.querySelector('[slot="before"]')}hasAfterControls(){return!!this.querySelector('[slot="after"]')}hasTopControls(){return!!this.querySelector('[slot="top"]')}hasBottomControls(){return!!this.querySelector(":scope > :not([slot])")}editRecord(e){e[editing]=!0;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.add("editing"),t.setAttribute("editing","true"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";if(t.innerHTML="",i.calculator){const s=document.createElement("input");s.disabled=!0,s.value=i.calculator(e,this),t.appendChild(s)}else if(i.editor)t.appendChild(i.editor(r));else{const e=i.type||typeof r,s=Table.editors[e]||Table.editors.string;t.appendChild(s(r))}}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!0},bubbles:!0}))}saveEditedRecord(e){const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i&&!i.calculator){const i=t.querySelector("input, select");i&&(e[s]=i.value)}}),e[editing]=!1,t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}cancelEditedRecord(e){e[editing]=!1;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}recordIsEditing(e){return e[editing]}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.getDisplayedRecords().length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageChange",{bubbles:!0})))}firstPage(){1!==this.currentPage&&this.setPage(1)}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}lastPage(){this.currentPage!==this.getTotalPages()&&this.setPage(this.getTotalPages())}setPageSize(e){this.pageSize=e,this.currentPage=1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageSizeChange",{bubbles:!0}))}getPageSize(){return this.pageSize}getPageSizeOptions(){return this.pageSizeOptions}getFieldLabel(e){const t=this.fields.find(t=>t.name===e);return t?t.label:toTitleCase(e)}setPageSizeOptions(e){this.pageSizeOptions=e,this.requestUpdate()}setData({records:e=!1,fields:t=!1,pageSize:s=!1,pageSizeOptions:i=!1,currentPage:r=!1,enableSelection:o}={}){let l=!1,n=this.getTotalPages(),a=this.currentPage;e&&(this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),l=!0),s&&(this.pageSize=s,l=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,l=!0),void 0!==o&&(this.enableSelection=o,l=!0),l&&this.requestUpdate();const d=this.getTotalPages();d!==n&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),a>d&&this.setPage(d)}setRecords(e,t){let s=this.getTotalPages(),i=this.currentPage;this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordsSet",{detail:{records:e},bubbles:!0}));const r=this.getTotalPages();r!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),i>r&&this.setPage(r)}setupFetchRecords(e,t){const s=this.records.length,i=this.getTotalPages();if(s<e){this.records.length=e,this.records.fill(null,s),this.requestUpdate();const t=this.getTotalPages();t!==i&&setTimeout(()=>{this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0}))},0)}this.addEventListener("fetchRecords",async e=>{if(this.fetchPending)return;this.fetchPending=!0;const{start:s,count:i}=e.detail,r=await t(s,i);r.forEach((e,t)=>{e[index]=s+t,void 0===e[selected]&&(e[selected]=!1),void 0===e[hidden]&&(e[hidden]=!1),void 0===e[editing]&&(e[editing]=!1)}),this.records.splice(s,r.length,...r),this.fetchPending=!1,this.requestUpdate()})}addRecord(e){e[selected]=!1,e[hidden]=!1,e[index]=this.records.length,this.records.push(e),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordAdded",{detail:{record:e},bubbles:!0}))}updateRecord(e,t){let s=!1,i=this.records.find(t=>t===e);if(i||void 0===e[index]||(i=this.records[e[index]]),Object.keys(t).forEach(e=>{i.hasOwnProperty(e)&&(i[e]=t[e],s=!0)}),s){const e=(this.currentPage-1)*this.pageSize,t=e+this.pageSize;(!this.enablePages||i[index]>=e&&i[index]<t)&&this.requestUpdate()}}deleteRecord(e){let t=this.records.find(t=>t===e),s=this.getTotalPages();if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0})),this.dispatchEvent(new CustomEvent("recordDeleted",{detail:{index:e},bubbles:!0}));const i=this.getTotalPages();this.currentPage>i&&this.setPage(i),i!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:i},bubbles:!0}))}}deleteSelected(){let e=this.getTotalPages();this.getSelectedRecords().forEach(e=>{let t=this.records.find(t=>t===e);if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1)}}),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate();const t=this.getTotalPages();this.currentPage>t&&this.setPage(t),t!==e&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))}getSelectedRecords(){return this.records.filter(e=>e[selected])}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!0;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!1;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)if(!this.records[s][selected])return!1;return!0}sortBy(e,t=!0){this.sort=this.sort.filter(t=>t.name!==e),this.sort.push({name:e,asc:t}),this.requestUpdate()}hideRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})))}showRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})))}showAllRecords(){this.records.forEach(e=>{e[hidden]=!1}),this.filters.length&&(this.filters=[],this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0}))),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})),this.dispatchEvent(new CustomEvent("allRecordsShown",{bubbles:!0}))}addFilter(e,t,s){this.filters.push({field:e,condition:t,value:s}),this.dispatchEvent(new CustomEvent("filterAdded",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),this.requestUpdate()}removeFilter(e,t,s,i=!0){const r=this.filters.findIndex(i=>i.field===e&&i.condition===t&&i.value===s);-1!==r&&(this.records.forEach(i=>{this.testFilter(i,e,t,s)||(i[hidden]=!1)}),this.filters.splice(r,1),this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),i&&this.requestUpdate())}testFilter(e,t,s,i){let r=e[t],o=i;switch(this.caseSensitiveFilters||"string"!=typeof r||"string"!=typeof i||(r=r.toLowerCase(),o=i.toLowerCase()),s){case"equals":return r===o;case"not-equals":return r!==o;case"contains":return r.includes(o);case"not-contains":return!r.includes(o);case"greater-than":return r>o;case"less-than":return r<o;case"greater-than-or-equal":return r>=o;case"less-than-or-equal":return r<=o;default:return!0}}removeAllFilters(){this.filters.length&&([...this.filters].forEach(({field:e,condition:t,value:s})=>{this.removeFilter(e,t,s,!1)}),this.requestUpdate())}search(e){const t=e.trim().toLowerCase();let s=!1;this.records.forEach(e=>{if(e[hidden])return;let i=!1;this.fields.forEach(({name:s})=>{(e[s]?.toString().toLowerCase()||"").includes(t)&&(i=!0)}),e[hidden]!==!i&&(e[hidden]=!i,s=!0)}),s&&(this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})),this.requestUpdate()),this.dispatchEvent(new CustomEvent("search",{detail:{term:e},bubbles:!0}))}getDisplayedRecords(){this.filters.forEach(({field:e,condition:t,value:s})=>{this.records.forEach(i=>{null!==i&&(this.testFilter(i,e,t,s)||(i[hidden]=!0))})});let e=this.records.filter(e=>null===e||!e[hidden]);return this.sort.forEach(({name:t,asc:s})=>{e.sort((e,i)=>null===e||null===i?0:e[t]<i[t]?s?-1:1:e[t]>i[t]?s?1:-1:0)}),e}getHiddenRecords(){return this.records.filter(e=>e[hidden])}calculateColumnSizes(){const e={total:0};this.enableSelection&&(e.total+=40);const t=Array.from(this.querySelectorAll('[slot="before"]')),s=Array.from(this.querySelectorAll('[slot="after"]'));e.beforeControls=t.reduce((e,t)=>e+(t.maxWidth||40),0),e.afterControls=s.reduce((e,t)=>e+(t.maxWidth||40),0),this.hasBeforeControls()&&(e.total+=e.beforeControls),this.hasAfterControls()&&(e.total+=e.afterControls),this.fields.forEach(t=>{if(t.size)e[t.name]=t.size,e.total+=t.size;else{let s=0;this.records.slice(0,100).forEach(e=>{if(null===e)return;let i=e[t.name];t.calculator&&(i=t.calculator(e,this)),t.formatter&&(i=t.formatter(i)),i&&i.toString().length>s&&(s=i.toString().length)}),e[t.name]=Math.max(10*s+32,128),t.hidden||(e.total+=e[t.name])}});const i=[...t,...s].some(e=>void 0===e.maxWidth);return JSON.stringify(this.columnSizes)!==JSON.stringify(e)&&(this.columnSizes=e),i&&setTimeout(()=>this.calculateColumnSizes(),0),this.columnSizes}setFieldHiddenState(e,t){const s=this.fields.find(t=>t.name===e);s&&(s.hidden=t,this.calculateColumnSizes(),this.requestUpdate(),this.dispatchEvent(new CustomEvent("fieldVisibilityChanged",{detail:{field:s},bubbles:!0})),this.dispatchEvent(new CustomEvent(t?"fieldHidden":"fieldShown",{detail:{field:s},bubbles:!0})))}hideField(e){this.setFieldHiddenState(e,!0)}showField(e){this.setFieldHiddenState(e,!1)}reorderFields(e){const t=[];e.forEach(e=>{const s=this.fields.find(t=>t.name===e);s&&t.push(s)}),this.fields=t,this.requestUpdate()}render(){return this.records&&this.fields?(this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls"),html`
52
52
  <div id="wrapper">
53
53
  <div id="top" style="width: ${this.columnSizes.total}px"><slot name="top"></slot></div>
54
54
  <div id="table">
package/docs/src/components/tableControls/PageSelect.js CHANGED
@@ -1,4 +1,4 @@
1
- import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.min.js";export default class PageSelect extends TableControl{static properties={...TableControl.properties,currentPage:{type:Number,state:!0},totalPages:{type:Number,state:!0}};constructor(){super({maxWidth:null}),this.currentPage=1,this.totalPages=1}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange",this.handlePageChange),this.onTableEvent("pageSizeChange",this.handlePageSizeChange),this.onTableEvent("pageCountChanged",this.handlePageCountChange)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.handlePageChange),this.table.removeEventListener("pageSizeChange",this.handlePageSizeChange),this.table.removeEventListener("pageCountChanged",this.handlePageCountChange))}handlePageChange=()=>{this.table&&(this.currentPage=this.table.getCurrentPage())};handlePageSizeChange=()=>{this.table&&(this.currentPage=this.table.getCurrentPage(),this.totalPages=this.table.getTotalPages())};handlePageCountChange=()=>{this.table&&(this.totalPages=this.table.getTotalPages())};handleSelectChange=e=>{this.table&&this.table.setPage(parseInt(e.target.value))};render(){if(!this.table)return html`<div>No table found</div>`;const e=[];for(let t=1;t<=this.totalPages;t++)e.push(html`<option value="${t}" ?selected="${t===this.currentPage}">Page ${t}</option>`);return html`
1
+ import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.min.js";export default class PageSelect extends TableControl{static properties={...TableControl.properties};constructor(){super({maxWidth:null})}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange pageSizeChange pageCountChanged recordsSet",this.handleTableUpdate)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.handleTableUpdate),this.table.removeEventListener("pageSizeChange",this.handleTableUpdate),this.table.removeEventListener("pageCountChanged",this.handleTableUpdate),this.table.removeEventListener("recordsSet",this.handleTableUpdate))}handleTableUpdate=()=>{this.requestUpdate()};handleSelectChange=e=>{this.table&&this.table.setPage(parseInt(e.target.value))};get currentPage(){return this.table?this.table.getCurrentPage():1}get totalPages(){return this.table?this.table.getTotalPages():1}render(){if(!this.table)return html`<div>No table found</div>`;const e=[];for(let t=1;t<=this.totalPages;t++)e.push(html`<option value="${t}" ?selected="${t===this.currentPage}">Page ${t}</option>`);return html`
2
2
  <div class="page-select">
3
3
  <select class="no-btn ph b r" @change="${this.handleSelectChange}" ?disabled="${this.totalPages<=1}">
4
4
  ${e}
package/docs/utils/context.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/cookie.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/debounce.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/drag.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/formatTimestamp.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/object.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/propConverters.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/string.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/theme.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/toTitleCase.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/type.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/docs/utils/wait.html CHANGED
@@ -7,7 +7,7 @@
7
7
  <link rel="icon" type="image/png" sizes="48x48" href="../media/icon48.png">
8
8
  <link rel="manifest" href="../manifest.json" />
9
9
  <link rel="stylesheet" href="../kempo-vars.css" />
10
- <link rel="stylesheet" href="../kempo.min.css" />
10
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@1.3.1/dist/kempo.min.css" />
11
11
  <link rel="stylesheet" href="../kempo-hljs.css" />
12
12
  <link rel="stylesheet" href="../styles.css" />
13
13
  <script>window.litDisableBundleWarning = true;</script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kempo-ui",
3
- "version": "0.0.37",
3
+ "version": "0.0.38",
4
4
  "type": "module",
5
5
  "description": "A Lit based web-component library",
6
6
  "main": "index.js",
@@ -12,7 +12,8 @@
12
12
  "test": "npx kempo-test",
13
13
  "test:gui": "npx kempo-test --gui",
14
14
  "test:browser": "npx kempo-test -b",
15
- "test:node": "npx kempo-test -n"
15
+ "test:node": "npx kempo-test -n",
16
+ "update-kempo-css": "node scripts/update-kempo-css.js"
16
17
  },
17
18
  "repository": {
18
19
  "type": "git",
@@ -28,8 +29,5 @@
28
29
  "kempo-server": "^1.8.2",
29
30
  "kempo-testing-framework": "^1.4.0",
30
31
  "terser": "^5.43.1"
31
- },
32
- "dependencies": {
33
- "kempo-css": "^1.2.0"
34
32
  }
35
33
  }
package/scripts/build.js CHANGED
@@ -102,15 +102,4 @@ await copyDir('./dist', './docs/src/');
102
102
  console.log('Copying icons/ to docs/icons/');
103
103
  await copyDir('./icons', './docs/icons/');
104
104
 
105
- console.log('Copying base kempo.min.css from external package');
106
- const kempoCssSource = './node_modules/kempo-css/dist/kempo.min.css';
107
- const kempoCssDest = './docs/kempo.min.css';
108
- try {
109
- const kempoCssContent = await fs.readFile(kempoCssSource, 'utf-8');
110
- await fs.writeFile(kempoCssDest, kempoCssContent, 'utf-8');
111
- console.log('Successfully copied kempo.min.css from kempo-css package');
112
- } catch (error) {
113
- console.warn('Warning: Could not copy kempo.min.css:', error.message);
114
- }
115
-
116
105
  console.log('Build Complete');
package/scripts/update-kempo-css.js ADDED
@@ -0,0 +1,49 @@
1
+ import fs from 'fs/promises';
2
+ import path from 'path';
3
+ import { promptUser } from 'kempo-server/utils/cli';
4
+
5
+ const getHtmlFiles = async dir => {
6
+ const files = [];
7
+ const entries = await fs.readdir(dir, { withFileTypes: true });
8
+ for(const entry of entries){
9
+ const fullPath = path.join(dir, entry.name);
10
+ if(entry.isDirectory()){
11
+ files.push(...await getHtmlFiles(fullPath));
12
+ } else if(entry.name.endsWith('.html')){
13
+ files.push(fullPath);
14
+ }
15
+ }
16
+ return files;
17
+ };
18
+
19
+ const docsDir = path.resolve('./docs');
20
+ const cdnPattern = /https:\/\/cdn\.jsdelivr\.net\/npm\/kempo-css@[\d.]+\/dist\/kempo\.min\.css/g;
21
+
22
+ const newVersion = await promptUser('Enter the new kempo-css version (e.g., 1.3.1)');
23
+ if(!newVersion || !/^\d+\.\d+\.\d+$/.test(newVersion)){
24
+ console.error('Invalid version format. Please use semantic versioning (e.g., 1.3.1)');
25
+ process.exit(1);
26
+ }
27
+
28
+ const newCdnUrl = `https://cdn.jsdelivr.net/npm/kempo-css@${newVersion}/dist/kempo.min.css`;
29
+
30
+ console.log(`\nUpdating kempo-css CDN references to version ${newVersion}...`);
31
+
32
+ const htmlFiles = await getHtmlFiles(docsDir);
33
+
34
+ let updatedCount = 0;
35
+ for(const file of htmlFiles){
36
+ const content = await fs.readFile(file, 'utf-8');
37
+ if(cdnPattern.test(content)){
38
+ const newContent = content.replace(cdnPattern, newCdnUrl);
39
+ await fs.writeFile(file, newContent, 'utf-8');
40
+ console.log(`Updated: ${path.relative(docsDir, file)}`);
41
+ updatedCount++;
42
+ }
43
+ }
44
+
45
+ if(updatedCount === 0){
46
+ console.log('No files found with kempo-css CDN references.');
47
+ } else {
48
+ console.log(`\nDone! Updated ${updatedCount} file(s).`);
49
+ }