kempo-ui 0.0.16 → 0.0.17

package/dist/components/LightComponent.js

@@ -0,0 +1 @@
+import{LitElement,html,render}from"../lit-all.min.js";export default class LightComponent extends LitElement{#e;createRenderRoot(){return this.lightRoot=document.createElement("div"),this.lightRoot.style.display="contents",this.appendChild(this.lightRoot),this}connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}updated(){render(this.renderLightDom(),this.lightRoot)}childrenUpdated(){}renderLightDom(){return html``}}

package/dist/components/ShadowComponent.js

@@ -0,0 +1 @@
+import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{static stylesheetPath="./kempo.min.css";#e;connectedCallback(){super.connectedCallback(),this.#e=new MutationObserver(()=>{console.log("MutationObserver fired for",this.constructor.name),this.childrenUpdated(),this.requestUpdate()}),this.#e.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect()}childrenUpdated(){}createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href=this.constructor.stylesheetPath,e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}

package/dist/components/Split.js

@@ -0,0 +1,84 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import drag from"../utils/drag.js";export default class Split extends ShadowComponent{static properties={resizing:{type:Boolean,reflect:!0},stacked:{type:Boolean,reflect:!0},stackWidth:{type:Number,attribute:"stack-width"}};constructor(){super(),this.resizing=!1,this.stacked=!1,this.stackWidth=0,this.dragStartWidth=0,this.dragCleanup=()=>{},this.resizeObserver=null}firstUpdated(){super.firstUpdated(),this.setupDragHandler(),this.setupResizeObserver()}disconnectedCallback(){super.disconnectedCallback(),this.dragCleanup(),this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null)}handleDragStart=()=>{this.resizing=!0,this.dragStartWidth=Math.round(this.shadowRoot.getElementById("left").getBoundingClientRect().width),this.dispatchEvent(new CustomEvent("resizestart",{detail:{startSize:this.dragStartWidth},bubbles:!0}))};handleDrag=({x:e})=>{const t=`${this.dragStartWidth+e}px`;this.setSize(t),this.dispatchEvent(new CustomEvent("resize",{detail:{size:t},bubbles:!0}))};handleDragEnd=({x:e})=>{this.resizing=!1;const t=`${this.dragStartWidth+e}px`;this.setSize(t),this.dispatchEvent(new CustomEvent("resizeend",{detail:{size:t},bubbles:!0}))};setSize(e){this.style.setProperty("--left_width",e)}setupDragHandler(){const e=this.shadowRoot.getElementById("divider-handle");e&&(this.dragCleanup=drag({element:e,callback:this.handleDrag,startCallback:this.handleDragStart,endCallback:this.handleDragEnd}))}setupResizeObserver(){this.resizeObserver=new ResizeObserver(e=>{for(const t of e){const e=t.contentRect.width;this.stacked=e<=this.stackWidth}}),this.resizeObserver.observe(this)}static styles=css`
+		:host {
+			--left_width: calc((100% - var(--handle_width)) / 2);
+			--handle_width: 0.5rem;
+			--min_pane_width: 6rem;
+
+			height: 100%;
+			display: flex;
+			align-items: stretch;
+			flex: 1 1 auto;
+			overflow: hidden;
+		}
+
+		.pane, #divider-handle {
+			display: inline-block;
+		}
+
+		.pane {
+			min-width: var(--min_pane_width);
+			max-width: calc(100% - var(--min_pane_width));
+			max-height: 100%;
+			overflow: hidden;
+		}
+
+		#left {
+			flex: 0 0 var(--left_width);
+		}
+
+		#divider-handle {
+			display: flex;
+			justify-content: center;
+			width: var(--handle_width);
+			cursor: ew-resize;
+		}
+
+		:host([resizing]) #divider-handle {
+			background-color: var(--tc_primary);
+		}
+
+		:host([resizing]) .pane {
+			pointer-events: none;
+			user-select: none;
+		}
+
+		#divider-border {
+			width: 1px;
+			height: 100%;
+			border-left: 1px solid var(--c_border);
+		}
+
+		#right {
+			flex: 1 1;
+		}
+
+		:host([stacked]) #left,
+		:host([stacked]) #right {
+			display: block;
+		}
+
+		:host([stacked]) #divider-handle {
+			display: none;
+		}
+
+		:host([stacked]) .pane {
+			min-width: 0;
+			max-width: 100%;
+			max-height: none;
+			overflow: auto;
+		}
+
+		:host([stacked]) {
+			display: block;
+		}
+	`;render(){return html`
+			<div id="left" class="pane">
+				<slot></slot>
+			</div>
+			<div id="divider-handle">
+				<div id="divider-border"></div>
+			</div>
+			<div id="right" class="pane">
+				<slot name="right"></slot>
+			</div>
+		`}}customElements.define("k-split",Split);

package/dist/components/Table.js

@@ -0,0 +1,151 @@
+import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import toTitleCase from"../utils/toTitleCase.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1)}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.allOnPageSelected())}this.updateContainerWidths()}updateContainerWidths(){const e=this.columnSizes.total+"px",t=this.shadowRoot.getElementById("fields"),s=this.shadowRoot.getElementById("top"),i=this.shadowRoot.getElementById("bottom"),r=this.shadowRoot.getElementById("records");t&&(t.style.width=e),s&&(s.style.width=e),i&&(i.style.width=e),r&&(r.style.width=e)}renderFieldsTemplate(){this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls");const e=[];return this.enableSelection&&e.push(html`
+        <div class="field controls cell field-select" style="width: 40px">
+          <input 
+            type="checkbox" 
+            id="select-all"
+            @change=${this.handleSelectAllChange}
+          />
+        </div>
+      `),this.hasBeforeControls()&&e.push(html`
+        <div class="field cell field-before-controls" style="width: ${this.columnSizes.beforeControls}px"></div>
+      `),this.fields.forEach(({name:t,label:s,hidden:i})=>{if(i)return;const r=this.sort.find(e=>e.name===t),o=this.sort.length>0&&this.sort[this.sort.length-1].name===t,l=r?r.asc?"sort-asc":"sort-desc":"";e.push(html`
+        <div 
+          class="field cell ${l}"
+          style="width: ${this.columnSizes[t]}px; ${this.enableSorting?"cursor: pointer;":""}"
+          @click=${this.enableSorting?()=>this.handleFieldClick(t):null}
+        >
+          ${s}
+          ${o?html`<k-icon name="${r.asc?"arrow-down":"arrow-up"}" class="icon-sort"></k-icon>`:""}
+        </div>
+      `)}),this.hasAfterControls()&&e.push(html`
+        <div class="field cell field-after-controls" style="width: ${this.columnSizes.afterControls}px"></div>
+      `),e}renderRecordsTemplate(){let e=this.getDisplayedRecords(),t=0,s=this.pageSize;this.enablePages&&(t=(this.currentPage-1)*this.pageSize,s=t+this.pageSize,e=e.slice(t,s));let i=null,r=0;const o=e.map((e,s)=>null!==e?this.renderRecordTemplate(e):(null===i&&(i=t+s),r++,html`<div class="record fetching"><div class="cell">Loading...</div></div>`));return null===i||this.fetchPending||setTimeout(()=>{this.fetchPending||this.dispatchEvent(new CustomEvent("fetchRecords",{detail:{start:i,count:r},bubbles:!0}))},0),o}renderRecordTemplate(e){const t=[];return this.enableSelection&&t.push(html`
+        <div class="cell selection controls" style="width: 40px">
+          <input 
+            type="checkbox" 
+            .checked=${e[selected]}
+            @change=${t=>this.handleRecordSelectionChange(e,t)}
+          />
+        </div>
+      `),this.hasBeforeControls()&&t.push(this.renderBeforeControlsTemplate()),this.fields.forEach(({name:s,formatter:i,calculator:r,type:o,editor:l,hidden:n})=>{if(n)return;let a=e[s]||"";t.push(html`
+        <div class="cell" data-field=${s} style="width: ${this.columnSizes[s]}px">
+          ${e[editing]?this.renderEditingCell(e,s,a,r,l,o):this.renderDisplayCell(e,s,a,r,i)}
+        </div>
+      `)}),this.hasAfterControls()&&t.push(this.renderAfterControlsTemplate()),html`
+      <div class="record ${e[editing]?"editing":""}" data-index=${e[index]}>
+        ${t}
+      </div>
+    `}renderEditingCell(e,t,s,i,r,o){if(i)return html`<input disabled .value=${i(e,this)} />`;if(r){const e=r(s);return html`${e}`}switch(o||typeof s){case"number":return html`<input type="number" .value=${s} />`;case"date":return html`<input type="date" .value=${s} />`;case"boolean":return html`
+            <select .value=${s}>
+              <option value="true" ?selected=${s}>True</option>
+              <option value="false" ?selected=${!s}>False</option>
+            </select>
+          `;default:return html`<input type="text" .value=${s} />`}}renderDisplayCell(e,t,s,i,r){return i?i(e,this):r?r(s):s}renderBeforeControlsTemplate(){const e=[];return this.querySelectorAll('[slot="before"]').forEach(t=>{const s=t.tagName.toLowerCase(),i=document.createElement(s);Array.from(t.attributes).forEach(e=>{"slot"!==e.name&&i.setAttribute(e.name,e.value)}),t.innerHTML&&(i.innerHTML=t.innerHTML),e.push(i)}),html`
+      <div class="cell controls controls-before" style="width: ${this.columnSizes.beforeControls}px">
+        ${e}
+      </div>
+    `}renderAfterControlsTemplate(){const e=[];return this.querySelectorAll('[slot="after"]').forEach(t=>{const s=t.tagName.toLowerCase(),i=document.createElement(s);Array.from(t.attributes).forEach(e=>{"slot"!==e.name&&i.setAttribute(e.name,e.value)}),t.innerHTML&&(i.innerHTML=t.innerHTML),e.push(i)}),html`
+      <div class="cell controls controls-after" style="width: ${this.columnSizes.afterControls}px">
+        ${e}
+      </div>
+    `}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`
+      <div id="wrapper">
+        <div id="top" style="width: ${this.columnSizes.total}px"><slot name="top"></slot></div>
+        <div id="table">
+          <div id="fields" style="width: ${this.columnSizes.total}px">
+            ${this.renderFieldsTemplate()}
+          </div>
+          <div id="records" style="width: ${this.columnSizes.total}px">
+            ${this.renderRecordsTemplate()}
+          </div>
+        </div>
+        <div id="bottom" style="width: ${this.columnSizes.total}px"><slot></slot></div>
+      </div>
+      <div style="display: none">
+        <slot name="before"></slot>
+        <slot name="after"></slot>
+      </div>
+    `):html`
+        <div id="wrapper">
+          <div id="top"><slot name="top"></slot></div>
+          <div id="table">
+            <div id="fields"></div>
+            <div id="records"></div>
+          </div>
+          <div id="bottom"><slot></slot></div>
+        </div>
+        <div style="display: none">
+          <slot name="before"></slot>
+          <slot name="after"></slot>
+        </div>
+      `}static styles=css`
+    :host {
+      display: block;
+      width: 100%;
+      overflow: auto;
+      margin-bottom: var(--spacer);
+    }
+    #wrapper {
+      width: min-content;
+      border: 1px solid var(--c_border);
+      border-radius: var(--radius);
+    }
+    #table {
+      width: min-content;
+    }
+    #fields,
+    .record {
+      display: flex;
+    }
+    #fields {
+      background-color: var(--c_bg__alt);
+      border-bottom: 1px solid var(--c_border);
+    }
+    .record:not([editing="true"]) .cell:not(.controls),
+    #fields .cell:not(.controls) {
+      padding: calc(0.5 * var(--spacer)) var(--spacer);
+    }
+    .cell {
+      display: flex;
+      align-items: center;
+    }
+    .cell:not(:first-child) {
+      border-left: 1px solid var(--c_border);
+    }
+    .record:not(:last-child) .cell {
+      border-bottom: 1px solid var(--c_border);
+    }
+    #top, #bottom {
+      display: flex;
+      width: 100%;
+    }
+    #top slot {
+      display: block;
+      width: 100%;
+      border-bottom: 1px solid var(--c_border);
+    }
+    #bottom slot {
+      display: block;
+      width: 100%;
+      border-top: 1px solid var(--c_border);
+    }
+    :host(:not([top-controls])) #top,
+    :host(:not([bottom-controls])) #bottom {
+      display: none;
+    }
+    .field-select,
+    .selection {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .field-select input,
+    .selection input {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+    .icon-sort {
+      float: right;
+      opacity: 0.5;
+    }
+  `;static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach(e=>{Object.keys(e).forEach(e=>s.add(e))}),[...s].map(e=>({name:e,label:toTitleCase(e)}))}static format(e){return(Array.isArray(e)?Table.formatters.array:Table.formatters[typeof e])(e)}static formatters={string:e=>e,number:e=>`${e}`,date:e=>e.toLocaleDateString(),boolean:e=>e?"True":"False",array:e=>e.map(e=>Table.format(e)).join(", "),undefined:e=>"",null:e=>"<code>null</code>"};static editors={string:e=>{const t=document.createElement("input");return t.value=e,t},number:e=>{const t=document.createElement("input");return t.type="number",t.value=e,t},date:e=>{const t=document.createElement("input");return t.type="date",t.value=e,t},boolean:e=>{const t=document.createElement("select");return t.innerHTML=`\n        <option value="true" ${e?"selected":""}>True</option>\n        <option value="false" ${e?"":"selected"}>False</option>\n      `,t.value=e,t},calculated:e=>{const t=document.createElement("input");return t.disabled=!0,t.value=e,t}}}window.customElements.define("k-table",Table);

package/dist/{src/components → components}/Tree.js

@@ -27,9 +27,6 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css,render}from"..
 			width: 100%;
 			cursor: pointer;
 		}
-		.branch-label:hover{
-			background-color: var(--c_bg__alt, #f5f5f5);
-		}
 		.branch-label:focus{
 			box-shadow: none;
 		}

package/dist/{src/components → components}/tableControls/FieldSortHide.js

@@ -1,5 +1,4 @@
 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`
@@ -19,7 +18,7 @@ import TableControl from"./TableControl.js";import{html,render}from"../../lit-al
 					`)}
 				</k-sortable>
 			</div>
-		`,e),Dialog.create(e,{width:"400px",cancelText:"Close"})};render(){return html`
+		`,e),Dialog.create(e,{title:"Show / Hide / Order Fields",width:"400px",cancelText:"Close"})};render(){return html`
 			<button class="no-btn icon-btn" @click="${this.handleClick}">
 				<k-icon name="table-visibility"></k-icon>
 			</button>

package/dist/{src/components → components}/tableControls/Filters.js

@@ -1,5 +1,4 @@
 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>
@@ -12,7 +11,7 @@ import TableControl from"./TableControl.js";import{html,render}from"../../lit-al
 								data-condition="${i}"
 								data-value="${o}"
 							>
-								${e} ${t[i]} ${o}
+								${this.table.getFieldLabel(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>
@@ -40,7 +39,7 @@ import TableControl from"./TableControl.js";import{html,render}from"../../lit-al
 					`}
 				</form>
 			</div>
-		`,e);const l=Dialog.create(e,{width:"600px"})};render(){return html`
+		`,e);const l=Dialog.create(e,{width:"600px",title:"Filters"})};render(){return html`
 			<button class="no-btn icon-btn" @click="${this.handleFilter}">
 				<k-icon name="filter"></k-icon>
 			</button>

package/docs/kempo-ui/components/accordion.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <base href="/kempo-ui/">
   <meta charset="UTF-8">
@@ -20,17 +19,17 @@
     <k-accordion persistent-id="toc" class="b r mb">
       <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
       <k-accordion-panel name="toc-panel">
-        <div class="m pl">
+        <div class="m ">
           <h6>Examples</h6>
-          <a href="#basicUsage" class="scroll-link">Basic Usage</a><br />
-          <a href="#defaultOpen" class="scroll-link">Default Open Panel</a><br />
-          <a href="#multiple" class="scroll-link">Multiple Panels Mode</a><br />
-          <a href="#persistent" class="scroll-link">Persistent State Example</a><br />
-          <h6 class="mt"><a href="#jsRef" class="no-link scroll-link">JavaScript Reference</a></h6>
-          <a href="#accordion-ref" class="scroll-link">Accordion</a><br />
-          <a href="#accordion-header-ref" class="scroll-link">AccordionHeader</a><br />
-          <a href="#accordion-panel-ref" class="scroll-link">AccordionPanel</a><br />
-          <a href="#events" class="scroll-link">Events</a><br />
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#defaultOpen">Default Open Panel</a><br />
+          <a href="#multiple">Multiple Panels Mode</a><br />
+          <a href="#persistent">Persistent State Example</a><br />
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#accordion-ref">Accordion</a><br />
+          <a href="#accordion-header-ref">AccordionHeader</a><br />
+          <a href="#accordion-panel-ref">AccordionPanel</a><br />
+          <a href="#events">Events</a><br />
         </div>
       </k-accordion-panel>
     </k-accordion>
@@ -38,7 +37,7 @@
     <h3>Description</h3>
     <p>A widget that allows a single panel of content to be opened and closed.</p>
 
-  <h3 id="basicUsage"><a href="#basicUsage" class="no-link scroll-link">Basic Usage</a></h3>
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="HTML">
@@ -67,10 +66,8 @@
 
 
 
-  <h3 id="defaultOpen"><a href="#defaultOpen" class="no-link scroll-link">Default Open Panel</a></h3>
-    <p>You can have a panel open by default by setting the <code>active</code> attribute to <code>true</code> on both
+    <h3 id="defaultOpen"><a href="#defaultOpen" class="no-link">Default Open Panel</a></h3>
     <p>You can have a panel open by default by adding the <code>active</code> attribute to both the header and the
-      panel. The presence of the attribute means <code>true</code>.</p>
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <k-card label="HTML">
@@ -97,7 +94,7 @@
       </div>
     </div>
 
-  <h3 id="multiple"><a href="#multiple" class="no-link scroll-link">Multiple Panels Mode</a></h3>
+    <h3 id="multiple"><a href="#multiple" class="no-link">Multiple Panels Mode</a></h3>
     <p>Add the <code>multiple</code> attribute to <code>k-accordion</code> to allow more than one panel to be open at a
       time.</p>
     <div class="row -mx mb">
@@ -126,7 +123,7 @@
       </div>
     </div>
 
-  <h3 id="persistent"><a href="#persistent" class="no-link scroll-link">Persistent State Example</a></h3>
+    <h3 id="persistent"><a href="#persistent" class="no-link">Persistent State Example</a></h3>
     <p>Add the <code>persistent-id</code> attribute to <code>k-accordion</code> to save and restore open panels across
       page reloads. The state is stored in <code>localStorage</code> (if available) using the provided ID.</p>
     <div class="row -mx mb">
@@ -155,13 +152,13 @@
       </div>
     </div>
 
-  <h2 id="jsRef"><a href="#jsRef" class="no-link scroll-link">JavaScript Reference</a></h2>
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
     <k-card>
       <h3 id="accordion-ref" class="bb pb">Accordion</h3>
       <h4>Properties</h4>
       <ul>
-        <li><code>multiple: boolean</code> — If present, allows multiple panels to be open.</li>
-        <li><code>persistentId: string</code> — If set, open panel state is saved/restored via localStorage.</li>
+        <li><code>multiple: boolean</code> — If present, allows multiple panels to be open.</li>
+        <li><code>persistentId: string</code> — If set, open panel state is saved/restored via localStorage.</li>
       </ul>
       <h4>Methods</h4>
       <ul>
@@ -181,9 +178,9 @@
       <h3 id="accordion-header-ref" class="bb pb">AccordionHeader</h3>
       <h4>Properties</h4>
       <ul>
-        <li><code>forPanel: string</code> — The panel name this header controls.</li>
-        <li><code>active: boolean</code> — Whether this header is active.</li>
-        <li><code>accordion: Accordion | null</code> <i>(read only)</i> — Parent accordion.</li>
+        <li><code>forPanel: string</code> — The panel name this header controls.</li>
+        <li><code>active: boolean</code> — Whether this header is active.</li>
+        <li><code>accordion: Accordion | null</code> <i>(read only)</i> — Parent accordion.</li>
       </ul>
       <h4>Event Handlers</h4>
       <ul>
@@ -195,16 +192,16 @@
       <h3 id="accordion-panel-ref" class="bb pb">AccordionPanel</h3>
       <h4>Properties</h4>
       <ul>
-        <li><code>name: string</code> — Unique panel identifier.</li>
-        <li><code>active: boolean</code> — Whether this panel is open.</li>
-        <li><code>transitioning: boolean</code> — Whether this panel is animating.</li>
+        <li><code>name: string</code> — Unique panel identifier.</li>
+        <li><code>active: boolean</code> — Whether this panel is open.</li>
+        <li><code>transitioning: boolean</code> — Whether this panel is animating.</li>
       </ul>
       <h4>Methods</h4>
       <ul>
-        <li><code>accordion: Accordion | null</code> (getter) — Returns parent accordion.</li>
+        <li><code>accordion: Accordion | null</code> (getter) — Returns parent accordion.</li>
       </ul>
 
-  <h3 id="events"><a href="#events" class="no-link scroll-link">Events</a></h3>
+      <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
       <h5><code>openpanel</code></h5>
       <p>Fired when a panel is opened. The event detail contains <code>{ panelName }</code>.</p>
       <h5><code>closepanel</code></h5>
@@ -218,19 +215,7 @@
   <script type="module" src="/kempo-ui/src/components/Import.js"></script>
   <script type="module" src="/kempo-ui/src/components/Accordion.js"></script>
   <script type="module" src="/kempo-ui/src/components/Card.js"></script>
-  <script>
-    document.querySelectorAll('.scroll-link').forEach(link => {
-      link.addEventListener('click', function (e) {
-        e.preventDefault();
-        const targetId = this.getAttribute('href').replace('#', '');
-        const target = document.getElementById(targetId);
-        if (target) {
-          target.scrollIntoView({ behavior: 'smooth' });
-          const url = window.location.pathname + window.location.search + '#' + targetId;
-          history.replaceState(null, '', url);
-        }
-      });
-    });
-  </script>
+  <script type="module" src="/kempo-ui/src/components/Resize.js"></script>
+
 </body>
-</html>
+</html>

package/docs/kempo-ui/components/card.html

@@ -15,21 +15,27 @@
   <k-import src="/kempo-ui/nav.inc.html"></k-import>
   <h1 class="ta-center">Card</h1>
   <main>
-    <details class="b r mb">
-      <summary class="p">Table of Contents</summary>
-      <div class="m mt0 pl">
-        <h6>Examples</h6>
-        <a href="#basicUsage">Basic Usage</a><br />
-        
-        <h6 class="mt">JavaScript Reference</h6>
-        <a href="#constructor">Constructor</a><br />
-        <a href="#requirements">Requirements</a><br />
-        <a href="#properties">Properties</a><br />
-        <a href="#methods">Methods</a><br />
-      </div>
-    </details>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m ">
+          <h6>Examples</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#labels">Labels</a><br />
+          
+          <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+          <a href="#constructor">Constructor</a><br />
+          <a href="#requirements">Requirements</a><br />
+          <a href="#properties">Properties</a><br />
+          <a href="#methods">Methods</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
 
+    <h3>Description</h3>
     <p>A card is a "box" around some content with a border, padding and margins that make it stand out.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <div class="row -mx mb">
       <div class="col d-span-6 m-span-12 px">
         <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-card</span>&gt;</span><br />  This is a card<br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-card</span>&gt;</span></code></pre>
@@ -54,7 +60,7 @@
       </div>
     </div>
 
-    <h2 id="jsRef">JavaScript Reference</h2>
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
 
     <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
     <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
@@ -82,7 +88,9 @@
 
   </main>
   <div style="height:33vh"></div>
-  <script type="module" src="/kempo-ui/src/components/Import.js"></script> 
+  <script type="module" src="/kempo-ui/src/components/Import.js"></script>
+  <script type="module" src="/kempo-ui/src/components/Accordion.js"></script>
   <script type="module" src="/kempo-ui/src/components/Card.js"></script> 
+
 </body>
-</html>
+</html>