kempo-ui 0.0.3 → 0.0.5

package/dist/src/components/Toast.js

@@ -0,0 +1,141 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import"./Icon.js";export default class Toast extends ShadowComponent{static properties={actionHtml:{type:String,reflect:!0,attribute:"action-html"},closeHtml:{type:String,reflect:!0,attribute:"close-html"},timeout:{type:Number,reflect:!0},opened:{type:Boolean,reflect:!0},hasAction:{type:Boolean,reflect:!0,attribute:"has-action"},hasClose:{type:Boolean,reflect:!0,attribute:"has-close"},hasIcon:{type:Boolean,reflect:!0,attribute:"has-icon"},position:{type:String,reflect:!0},animating:{type:String,reflect:!0}};static styles=css`
+    @keyframes toast-show-bottom {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes toast-hide-bottom {
+      from { opacity: 1; transform: translateY(0); }
+      to { opacity: 0; transform: translateY(20px); }
+    }
+    @keyframes toast-show-top {
+      from { opacity: 0; transform: translateY(-20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes toast-hide-top {
+      from { opacity: 1; transform: translateY(0); }
+      to { opacity: 0; transform: translateY(-20px); }
+    }
+    @keyframes toast-show-left {
+      from { opacity: 0; transform: translateX(-20px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes toast-hide-left {
+      from { opacity: 1; transform: translateX(0); }
+      to { opacity: 0; transform: translateX(-20px); }
+    }
+    @keyframes toast-show-right {
+      from { opacity: 0; transform: translateX(20px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes toast-hide-right {
+      from { opacity: 1; transform: translateX(0); }
+      to { opacity: 0; transform: translateX(20px); }
+    }
+
+    :host {
+      display: none;
+      min-width: 16rem;
+      max-width: calc(100% - (2 * var(--spacer, 1rem)));
+      background-color: var(--c_bg, #ffffff);
+      border-radius: var(--radius, 0.375rem);
+    }
+
+    :host([opened]) {
+      display: flex;
+    }
+
+    :host([animating="in"][position*="bottom"]) {
+      animation: toast-show-bottom var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="out"][position*="bottom"]) {
+      animation: toast-hide-bottom var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="in"][position*="top"]) {
+      animation: toast-show-top var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="out"][position*="top"]) {
+      animation: toast-hide-top var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="in"][position*="left"]:not([position*="top"]):not([position*="bottom"])) {
+      animation: toast-show-left var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="out"][position*="left"]:not([position*="top"]):not([position*="bottom"])) {
+      animation: toast-hide-left var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="in"][position*="right"]:not([position*="top"]):not([position*="bottom"])) {
+      animation: toast-show-right var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="out"][position*="right"]:not([position*="top"]):not([position*="bottom"])) {
+      animation: toast-hide-right var(--animation_ms, 300ms) ease forwards;
+    }
+
+    #icon {
+      padding: var(--spacer, 1rem);
+      padding-right: 0;
+    }
+
+    #message {
+      padding: var(--spacer, 1rem);
+      flex: 1 1 auto;
+    }
+
+    :host(:not([has-close])) #close,
+    :host(:not([has-action])) #action,
+    :host(:not([has-icon])) #icon {
+      display: none;
+    }
+
+    #action {
+      background: transparent;
+      border: none;
+      color: var(--tc_primary, blue);
+      cursor: pointer;
+      padding: var(--spacer, 1rem);
+    }
+
+    #action:hover {
+      color: var(--tc_primary__hover, lightblue);
+    }
+
+    #close {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: var(--spacer, 1rem);
+      opacity: 0.7;
+      transition: opacity var(--animation_ms, 300ms);
+    }
+
+    #close:hover {
+      opacity: 1;
+    }
+
+    /* Theme classes */
+    :host(.bg-success) {
+      background-color: var(--c_success, #dcfce7);
+      color: var(--tc_on_success, #166534);
+    }
+
+    :host(.bg-warning) {
+      background-color: var(--c_warning, #fef3c7);
+      color: var(--tc_on_warning, #92400e);
+    }
+
+    :host(.bg-danger) {
+      background-color: var(--c_danger, #fee2e2);
+      color: var(--tc_on_danger, #991b1b);
+    }
+  `;constructor(){super(),this.actionHtml="",this.closeHtml="",this.timeout=0,this.opened=!1,this.hasAction=!1,this.hasClose=!1,this.hasIcon=!1,this.position="bottom center",this.animating="",this.actionCallback=()=>{},this.closeCallback=()=>{},this.timeoutId=null,this.closing=!1}updated(t){super.updated(t),t.has("opened")&&this.opened&&(this.hasAction=!!this.querySelector('[slot="action"]'),this.hasClose=!!this.querySelector('[slot="close"]'),this.hasIcon=!!this.querySelector('[slot="icon"]'))}connectedCallback(){super.connectedCallback(),this.addEventListener("animationend",this.handleAnimationEnd)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("animationend",this.handleAnimationEnd),clearTimeout(this.timeoutId)}handleActionClick=()=>{!1!==this.actionCallback()&&this.close()};handleCloseClick=()=>{this.close()};handleAnimationEnd=t=>{t.animationName.includes("toast-hide")?(this.animating="",this.opened=!1,this.dispatchEvent(new CustomEvent("close")),this.dispatchEvent(new CustomEvent("openchange")),this.closeCallback(),this.closing=!1):t.animationName.includes("toast-show")&&(this.animating="")};open(){this.closing=!1,this.animating="in",this.opened=!0,this.timeout&&(clearTimeout(this.timeoutId),this.timeoutId=setTimeout(()=>{this.close()},this.timeout)),this.dispatchEvent(new CustomEvent("open")),this.dispatchEvent(new CustomEvent("openchange"))}close(){clearTimeout(this.timeoutId),this.opened&&!this.closing&&(this.closing=!0,this.animating="out")}render(){return html`
+      <div id="icon">
+        <slot name="icon"></slot>
+      </div>
+      <div id="message">
+        <slot></slot>
+      </div>
+      <button id="action" class="no-style" @click="${this.handleActionClick}">
+        <slot name="action"></slot>
+      </button>
+      <button id="close" class="no-style" @click="${this.handleCloseClick}">
+        <slot name="close"></slot>
+      </button>
+    `}static create(t,o={}){let{position:e="auto",removeOnClose:n=!0,closeCallback:s=()=>{},action:a=!1,close:i=!1,icon:r=!1,timeout:c=5e3}=o;"auto"===e&&(e=window.innerWidth<=768?"bottom center":"top right");let l=document.querySelector(`k-toast-container[position="${e}"]`);l||(l=new ToastContainer(e),document.body.appendChild(l));const m=new Toast;m.position=e,m.timeout=c,m.innerHTML=t,m.actionCallback=o.actionCallback||(()=>{});const h=s;if(m.closeCallback=(...t)=>{n&&(m.remove(),0===l.children.length&&l.remove()),h(...t)},r){const t=document.createElement("span");t.slot="icon",r instanceof HTMLElement?t.appendChild(r):t.innerHTML=r,m.appendChild(t)}if(a){const t=document.createElement("span");t.slot="action",a instanceof HTMLElement?t.appendChild(a):t.innerHTML=a,m.appendChild(t)}if(i){const t=document.createElement("span");t.slot="close",i instanceof HTMLElement?t.appendChild(i):t.innerHTML=i,m.appendChild(t)}return l.appendChild(m),m.open(),m}static success(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="check"></k-icon>',...o});return e.classList.add("bg-success"),e}static warning(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="warning"></k-icon>',...o});return e.classList.add("bg-warning"),e}static error(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="error"></k-icon>',...o});return e.classList.add("bg-danger"),e}}class ToastContainer extends HTMLElement{constructor(t="bottom center"){super(),this.position=t.toLowerCase(),this.setAttribute("position",this.position),this.applyStyles()}applyStyles(){this.style.cssText="\n      position: fixed;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      z-index: 1000;\n      pointer-events: auto;\n      padding: 32px;\n      box-sizing: border-box;\n      max-width: 100%;\n      max-height: 100%;\n      overflow: visible;\n    ";new MutationObserver(()=>{Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")})}).observe(this,{childList:!0}),Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")});const[t,o]=this.position.split(" ");"top"===t?this.style.top="0":this.style.bottom="0","left"===o?(this.style.left="0",this.style.alignItems="flex-start"):"right"===o?(this.style.right="0",this.style.alignItems="flex-end"):"center"===o&&("top"===t||"bottom"===t?(this.style.left="50%",this.style.transform="translateX(-50%)",this.style.alignItems="center"):(this.style.top="50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"))}static getContainer(t){let o=document.querySelector(`k-toast-container[position="${t}"]`);return o||(o=new ToastContainer(t),document.body.appendChild(o)),o}}window.customElements.define("k-toast",Toast),window.customElements.define("k-toast-container",ToastContainer);

package/dist/src/components/Toggle.js

@@ -0,0 +1,74 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0}};static styles=css`
+    :host {
+      --switch_height: 2rem;
+      --switch_width: 3rem;
+      --switch_border: 1px solid var(--c_border);
+      --switch_background__off: var(--c_bg__alt);
+      --switch_background__on: var(--c_success);
+      --handle_size__off: 1rem;
+      --handle_size__on: 1.5rem;
+      --handle_border: 1px solid var(--c_border);
+      --handle_background__off: var(--c_border);
+      --handle_background__on: white;
+
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin-bottom: var(--spacer);
+      border-radius: 999rem;
+      outline: none;
+    }
+
+    :host(:focus) {
+      outline: 2px solid var(--c_primary, blue);
+      outline-offset: 2px;
+    }
+
+    #switch {
+      display: flex;
+      align-items: center;
+      width: var(--switch_width);
+      height: var(--switch_height);
+      border: var(--switch_border);
+      background: var(--switch_background__off);
+      border-radius: 999rem;
+      margin-right: var(--spacer);
+    }
+
+    #handle {
+      --margin: calc( (var(--switch_height) - var(--handle_size__off)) / 2);
+      width: var(--handle_size__off);
+      height: var(--handle_size__off);
+      border: var(--handle_border);
+      background: var(--handle_background__off);
+      border-radius: 999rem;
+      transform: translateX(var(--margin));
+      transition: width var(--animation_ms, 256ms), height var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);
+    }
+
+    :host([value]) #switch {
+      background: var(--switch_background__on);
+    }
+
+    :host([value]) #handle {
+      --m: calc( (var(--switch_height) - var(--handle_size__on)) / 2);
+      --d: calc( var(--switch_width) - var(--handle_size__on) - var(--m));
+      width: var(--handle_size__on);
+      height: var(--handle_size__on);
+      background: var(--handle_background__on);
+      transform: translateX(var(--d));
+    }
+
+    #label {
+      display: block;
+      flex: 1 1 auto;
+      padding: 0;
+    }
+  `;constructor(){super(),this.value=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.toggle()};handleKeyDown=e=>{["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
+      <div id="switch">
+        <div id="handle"></div>
+      </div>
+      <label id="label">
+        <slot></slot>
+      </label>
+    `}}window.customElements.define("k-toggle",Toggle);

package/dist/src/components/tableControls/DeleteRecord.js

@@ -0,0 +1,7 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class DeleteRecord extends TableControl{delete=()=>{this.record&&this.table.deleteRecord(this.record)};render(){return html`
+			<button class="no-btn icon-btn" @click="${this.delete}">
+				<slot>
+					<k-icon name="delete"></k-icon>
+				</slot>
+			</button>
+		`}}customElements.define("k-tc-delete-record",DeleteRecord);

package/dist/src/components/tableControls/Edit.js

@@ -0,0 +1,18 @@
+import TableControl from"./TableControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class Edit extends TableControl{static properties={isEditing:{type:Boolean}};static styles=[TableControl.styles,css`
+			:host {
+				display: inline-flex;
+				width: max-content;
+				align-items: baseline;
+			}
+		`];constructor(){super({maxWidth:80})}connectedCallback(){super.connectedCallback(),this.onTableEvent("editingChange",this.handleEditingChange)}handleEditingChange=t=>{t.detail.record===this.record&&(this.isEditing=t.detail.editing)};handleEdit=()=>{this.record&&this.table.editRecord(this.record)};handleSave=()=>{this.record&&this.table.saveEditedRecord(this.record)};handleCancel=()=>{this.record&&this.table.cancelEditedRecord(this.record)};render(){return this.isEditing?html`
+			<button class="no-btn icon-btn bg-success" @click="${this.handleSave}">
+				<k-icon name="check"></k-icon>
+			</button>
+			<button class="no-btn icon-btn bg-danger" @click="${this.handleCancel}">
+				<k-icon name="close"></k-icon>
+			</button>
+		`:html`
+			<button class="no-btn icon-btn" @click="${this.handleEdit}">
+				<k-icon name="edit"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-edit",Edit);

package/dist/src/components/tableControls/ExportCSV.js

@@ -0,0 +1,8 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class ExportCSV extends TableControl{constructor(){super(),this.maxWidth=136}getCSV(){const t=this.table;if(!t)return"";let e="";const o=[];if(t.fields.forEach(({name:t,calculator:e})=>{e||o.push(t)}),e+=o.join(",")+"\n",this.record){const t=o.map(t=>this.record[t]||"");e+=t.join(",")+"\n"}else t.records.forEach(t=>{const r=o.map(e=>t[e]||"");e+=r.join(",")+"\n"});return e}export=()=>{const t=this.getCSV(),e=new Blob([t],{type:"text/csv"}),o=URL.createObjectURL(e),r=document.createElement("a");r.href=o,r.download="data.csv",r.click(),URL.revokeObjectURL(o)};render(){return html`
+			<button class="no-btn ph" @click="${this.export}">
+				<slot>
+					<k-icon name="export-file"></k-icon>
+					Export CSV
+				</slot>
+			</button>
+		`}}customElements.define("k-tc-export-csv",ExportCSV);

package/dist/src/components/tableControls/ExportJson.js

@@ -0,0 +1,8 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class ExportJson extends TableControl{constructor(){super(),this.maxWidth=136}export=()=>{const t=this.record;if(t){const e=JSON.stringify(t),o=new Blob([e],{type:"application/json"}),n=URL.createObjectURL(o),r=document.createElement("a");r.href=n,r.download="data.json",r.click(),URL.revokeObjectURL(n)}else{const t=JSON.stringify(this.table.records),e=new Blob([t],{type:"application/json"}),o=URL.createObjectURL(e),n=document.createElement("a");n.href=o,n.download="data.json",n.click(),URL.revokeObjectURL(o)}};render(){return html`
+			<button class="no-btn ph" @click="${this.export}">
+				<slot>
+					<k-icon name="export-file"></k-icon>
+					Export JSON
+				</slot>
+			</button>
+		`}}customElements.define("k-tc-export-json",ExportJson);

package/dist/src/components/tableControls/FieldSortHide.js

@@ -0,0 +1,26 @@
+import TableControl from"./TableControl.js";import{html,render}from"../../lit-all.min.js";import"../Icon.js";import Dialog from"../Dialog.js";export default class FieldSortHide extends TableControl{constructor(){super({maxWidth:40})}handleClick=()=>{this.openDialog()};openDialog=()=>{import("../Sortable.js");const e=document.createElement("div");render(html`
+			<h3 class="m0 ph" slot="title">Show / Hide Fields</h3>
+			<div class="m">
+				<k-sortable id="sorting" @sort="${e=>{const t=Array.from(e.target.querySelectorAll("k-sortable-item")).map(e=>e.getAttribute("data-field"));this.table.reorderFields(t)}}">
+					${this.table.fields.map(e=>html`
+						<k-sortable-item data-field="${e.name}">
+							<label class="field pb0">
+								<input
+									class="field-visibility"
+									data-field="${e.name}"
+									type="checkbox"
+									.checked="${!e.hidden}"
+									@change="${t=>{this.table.setFieldHiddenState(e.name,!t.target.checked)}}"
+									style="height: 1.25rem; width: 1.25rem"
+								/>
+								${e.label}
+							</label>
+						</k-sortable-item>
+					`)}
+				</k-sortable>
+			</div>
+		`,e),Dialog.create(e,{width:"400px",cancelText:"Close"})};render(){return html`
+			<button class="no-btn icon-btn" @click="${this.handleClick}">
+				<k-icon name="table-visibility"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-field-sort-hide",FieldSortHide);

package/dist/src/components/tableControls/Filters.js

@@ -0,0 +1,47 @@
+import TableControl from"./TableControl.js";import{html,render}from"../../lit-all.min.js";import"../Icon.js";import Dialog from"../Dialog.js";export default class Filters extends TableControl{constructor(){super({maxWidth:40})}handleFilter=()=>{this.openDialog()};openDialog=()=>{const t={equals:"equals","not-equals":"does not equal",contains:"contains","not-contains":"does not contain","greater-than":"is greater than","greater-than-or-equal":"is greater than or equal to","less-than":"is less than","less-than-or-equal":"is less than or equal to"},e=document.createElement("div");render(html`
+			<h3 slot="title" class="m0 pyh px">Filters</h3>
+			<div class="p">
+				${0===this.table.filters.length?html`
+					<p>No Current Filters.</p>
+				`:html`
+					<h5>Current Filters</h5>
+					<ul id="currentFilters">
+						${this.table.filters.map(({field:e,condition:i,value:o})=>html`
+							<li
+								data-field="${e}"
+								data-condition="${i}"
+								data-value="${o}"
+							>
+								${e} ${t[i]} ${o}
+								<button class="remove-filter no-btn pq" @click="${t=>{this.table.removeFilter(e,i,o),l.close(),this.openDialog()}}">
+									<k-icon name="close"></k-icon>
+								</button>
+							</li>
+						`)}
+					</ul>
+				`}
+				<hr />
+				<h5>Add A Filter</h5>
+				<form id="addFilter" @submit="${t=>{t.preventDefault();const e=t.target;this.table.addFilter(e.filterField.value,e.filterCondition.value,e.filterValue.value),l.close(),this.openDialog()}}">
+					<select id="filterField" class="mb">
+						${this.table.fields.map(({name:t,label:e})=>html`
+							<option value="${t}">${e}</option>
+						`)}
+					</select>
+					<select id="filterCondition" class="mb">
+						${Object.entries(t).map(([t,e])=>html`
+							<option value="${t}" ?selected="${"contains"===t}">${e}</option>
+						`)}
+					</select>
+					<input id="filterValue" type="text" class="mb" />
+					<button type="submit" class="btn primary mb mr">Add Filter</button>
+					${0===this.table.filters.length?"":html`
+						<button type="button" class="btn danger mb mr" @click="${()=>{this.table.removeAllFilters(),l.close()}}">Clear All Filters</button>
+					`}
+				</form>
+			</div>
+		`,e);const l=Dialog.create(e,{width:"600px"})};render(){return html`
+			<button class="no-btn icon-btn" @click="${this.handleFilter}">
+				<k-icon name="filter"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-filters",Filters);

package/dist/src/components/tableControls/FirstPage.js

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class FirstPage extends TableControl{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.firstPage()};get isDisabled(){return!this.table||1===this.table.getCurrentPage()}render(){return html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="first"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-first-page",FirstPage);

package/dist/src/components/tableControls/HiddenCount.js

@@ -0,0 +1,3 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";export default class HiddenCount extends TableControl{static properties={hiddenCount:{type:Number}};connectedCallback(){super.connectedCallback(),this.updateHiddenCount(),this.onTableEvent("recordHidden recordShown",this.handleHiddenChange)}handleHiddenChange=()=>{this.updateHiddenCount()};updateHiddenCount=()=>{this.hiddenCount=this.table?.getHiddenRecords().length||0};render(){return html`
+			<div class="pyq pxh"><span>${this.hiddenCount}</span>&nbsp;Hidden Records</div>
+		`}}customElements.define("k-tc-hidden-count",HiddenCount);

package/dist/src/components/tableControls/Hide.js

@@ -0,0 +1,5 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class Hide extends TableControl{constructor(){super({maxWidth:40})}handleHide=()=>{this.record&&this.table.hideRecord(this.record)};render(){return html`
+			<button class="no-btn icon-btn" @click="${this.handleHide}">
+				<k-icon name="hide"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-hide",Hide);

package/dist/src/components/tableControls/LastPage.js

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class LastPage extends TableControl{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.lastPage()};get isDisabled(){return!this.table||this.table.getCurrentPage()===this.table.getTotalPages()}render(){return html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="last"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-last-page",LastPage);

package/dist/src/components/tableControls/NextPage.js

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class NextPage extends TableControl{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.nextPage()};get isDisabled(){return!this.table||this.table.getCurrentPage()===this.table.getTotalPages()}render(){return html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="chevron-right"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-next-page",NextPage);

package/dist/src/components/tableControls/PageSelect.js

@@ -0,0 +1,22 @@
+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`
+			<div class="page-select">
+				<select class="no-btn ph b r" @change="${this.handleSelectChange}" ?disabled="${this.totalPages<=1}">
+					${e}
+				</select>
+				<label> out of ${this.totalPages}</label>
+			</div>
+		`}static styles=css`
+		${TableControl.styles}
+		
+		.page-select {
+			display: flex;
+			align-items: center;
+			gap: 0.25rem;
+			white-space: nowrap;
+		}
+		
+		label {
+			padding: 0;
+			margin: 0;
+		}
+	`}customElements.define("k-tc-page-select",PageSelect);

package/dist/src/components/tableControls/PageSize.js

@@ -0,0 +1,5 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";export default class PageSize extends TableControl{constructor(){super({maxWidth:null}),this.pageChangeHandler=()=>this.requestUpdate(),this.pageSizeChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.onTableEvent("pageChange",this.pageChangeHandler),this.onTableEvent("pageSizeChange",this.pageSizeChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&(this.table.removeEventListener("pageChange",this.pageChangeHandler),this.table.removeEventListener("pageSizeChange",this.pageSizeChangeHandler))}handleChange=e=>{this.table&&this.table.setPageSize(parseInt(e.target.value))};get currentPageSize(){return this.table?this.table.getPageSize():10}get pageSizeOptions(){return this.table?this.table.pageSizeOptions:[10,25,50,100,500]}render(){return html`
+			<select class="no-btn ph b r" @change="${this.handleChange}">
+				${this.pageSizeOptions.map(e=>html`<option value="${e}" ?selected="${e===this.currentPageSize}">${e} per page</option>`)}
+			</select>
+		`}}customElements.define("k-tc-page-size",PageSize);

package/dist/src/components/tableControls/PrevPage.js

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class PrevPage extends TableControl{constructor(){super(),this.pageChangeHandler=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.table&&this.table.addEventListener("pageChange",this.pageChangeHandler)}disconnectedCallback(){super.disconnectedCallback(),this.table&&this.table.removeEventListener("pageChange",this.pageChangeHandler)}handleClick=()=>{this.table&&this.table.prevPage()};get isDisabled(){return!this.table||1===this.table.getCurrentPage()}render(){return html`
+			<button 
+				class="no-btn icon-btn" 
+				?disabled="${this.isDisabled}"
+				@click="${this.handleClick}"
+			>
+				<k-icon name="chevron-left"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-prev-page",PrevPage);

package/dist/src/components/tableControls/Search.js

@@ -0,0 +1,9 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import debounce from"../../utils/debounce.js";export default class Search extends TableControl{static properties={searchTerm:{type:String}};constructor(){super({maxWidth:200}),this.debouncedSearch=debounce(this.performSearch,200)}handleInput=e=>{this.searchTerm=e.target.value,this.debouncedSearch()};performSearch=()=>{this.table&&(!this.searchTerm||this.searchTerm.length<3?this.table.showAllRecords():this.table.search(this.searchTerm))};render(){return html`
+			<input
+				type="search"
+				placeholder="Search"
+				class="px pyh"
+				.value="${this.searchTerm||""}"
+				@input="${this.handleInput}"
+			/>
+		`}}customElements.define("k-tc-search",Search);

package/dist/src/components/tableControls/ShowAll.js

@@ -0,0 +1,5 @@
+import TableControl from"./TableControl.js";import{html}from"../../lit-all.min.js";import"../Icon.js";export default class ShowAll extends TableControl{constructor(){super({maxWidth:40})}handleShowAll=()=>{this.table&&this.table.showAllRecords()};render(){return html`
+			<button class="no-btn icon-btn" @click="${this.handleShowAll}">
+				<k-icon name="show"></k-icon>
+			</button>
+		`}}customElements.define("k-tc-show-all",ShowAll);

package/dist/src/components/tableControls/TableControl.js

@@ -0,0 +1,16 @@
+import ShadowComponent from"../ShadowComponent.js";import{html,css}from"../../lit-all.min.js";export default class TableControl extends ShadowComponent{static properties={maxWidth:{type:Number,reflect:!0,attribute:"max-width"}};constructor({maxWidth:t=40}={}){super(),this.maxWidth=t}updated(t){super.updated(t),t.has("maxWidth")&&(this.maxWidth?this.style.setProperty("--max-width",`${this.maxWidth}px`):this.style.removeProperty("--max-width"))}firstUpdated(){this.maxWidth?this.style.setProperty("--max-width",`${this.maxWidth}px`):this.style.removeProperty("--max-width")}get table(){return this.getRootNode()instanceof ShadowRoot?this.getRootNode().host.closest("k-table"):this.closest("k-table")}get record(){if(this.getRootNode()instanceof ShadowRoot){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.table.records[e]}}return!1}async onTableEvent(t,e){if(await customElements.whenDefined("k-table"),this.table){t.split(" ").forEach(t=>{this.table.addEventListener(t,e)}),this.requestUpdate()}}static styles=css`
+		:host {
+			display: inline-flex;
+		}
+		
+		.icon-btn {
+			display: inline-flex !important;
+			align-items: center;
+			justify-content: center;
+			width: 40px;
+			height: 40px;
+		}
+		.icon-btn:disabled {
+			opacity: 0.6;
+		}
+	`}customElements.define("k-table-control",TableControl);

package/dist/src/utils/debounce.js

@@ -0,0 +1 @@
+function debounce(e,t=300){let u;return(...o)=>{clearTimeout(u),u=setTimeout(()=>{e.apply(this,o)},t)}}export default debounce;

package/dist/src/utils/drag.js

@@ -0,0 +1 @@
+export default(e={})=>{let t,n,o;const{element:s,callback:a=()=>{},startCallback:r=()=>{},moveCallback:c=()=>{},endCallback:u=()=>{},preventScroll:v=!1}=e,d=s=>{v&&s.preventDefault(),clearTimeout(o);const r=s.pageX||s.touches[0].pageX,u=s.pageY||s.touches[0].pageY,d={x:r-t,y:u-n,...e};a(d),c(d)},i=s=>{clearTimeout(o);const r=s.pageX||s.changedTouches&&s.changedTouches[0].pageX||0,c=s.pageY||s.changedTouches&&s.changedTouches[0].pageY||0,v={x:r-t,y:c-n,...e};a(v),u(v),m()},p=s=>{if(s.button&&0!==s.button)return;clearTimeout(o),t=s.pageX||s.touches[0].pageX,n=s.pageY||s.touches[0].pageY;const a={x:0,y:0,...e};r(a),window.addEventListener("mousemove",d,{passive:!v}),window.addEventListener("mouseup",i,{passive:!v}),window.addEventListener("touchmove",d,{passive:!v}),window.addEventListener("touchend",i,{passive:!v})},m=()=>{window.removeEventListener("mousemove",d),window.removeEventListener("mouseup",i),window.removeEventListener("touchmove",d),window.removeEventListener("touchend",i)};return s.addEventListener("mousedown",p,{passive:!v}),s.addEventListener("touchstart",p,{passive:!v}),()=>{s.removeEventListener("mousedown",p),s.removeEventListener("touchstart",p),m()}};

package/dist/src/utils/formatTimestamp.js

@@ -0,0 +1 @@
+export default(e,i,t)=>{const s=new Date(parseInt(e));if(i){const e=(e,i)=>("000"+e).slice(-1*i),t={YYYY:s.getFullYear(),YY:String(s.getFullYear()).slice(-2),MM:e(s.getMonth()+1,2),M:s.getMonth()+1,DD:e(s.getDate(),2),D:s.getDate(),hh:e(s.getHours(),2),h:s.getHours(),mm:e(s.getMinutes(),2),m:s.getMinutes(),ss:e(s.getSeconds(),2),s:s.getSeconds(),iiii:e(s.getMilliseconds(),3),iii:e(s.getMilliseconds(),3),ii:e(s.getMilliseconds(),2),i:s.getMilliseconds()};return i.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g,e=>t[e])}return s.toLocaleString(t||navigator.language)};

package/dist/src/utils/propConverters.js

@@ -0,0 +1 @@
+export const boolTrueFalse={fromAttribute:t=>null===t?void 0:"true"===t.toLowerCase(),toAttribute:t=>t?"true":"false"};export const boolExists={fromAttribute:t=>null!==t,toAttribute:t=>t?"":null};

package/dist/src/utils/toTitleCase.js

@@ -0,0 +1 @@
+const toTitleCase=e=>e.replace(/([A-Z])/g," $1").split(/[\s_-]+/).filter(e=>e.length>0).map(e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()).join(" ");export default toTitleCase;

package/dist/src/utils/watchWindowSize.js

@@ -0,0 +1 @@
+import debounce from"./debounce.js";const handlers=new Set;window.addEventListener("resize",debounce(()=>{const e=window.innerWidth;handlers.forEach(n=>n(e))}));export const watchWindowSize=e=>(handlers.add(e),window.innerWidth);export const unwatchWindowSize=e=>{handlers.delete(e)};