kempo-ui 0.4.20 → 0.4.22

package/dist/components/controls/Menu.js

@@ -0,0 +1,51 @@
+import e from"./Control.js";import{css as o,html as t}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class n extends e{static properties={...e.properties,opened:{type:Boolean,reflect:!0}};constructor(){super(),this.opened=!1}handleToggle=()=>{this.opened=!this.opened};handleOpened=()=>{this.opened=!0};handleClosed=()=>{this.opened=!1};render(){return t`
+      <k-dropdown
+        ?opened=${this.opened}
+        @opened=${this.handleOpened}
+        @closed=${this.handleClosed}
+      >
+        <button slot="trigger" class="no-btn icon-btn">
+          <slot name="icon"><k-icon name="arrow_drop_down"></k-icon></slot>
+          <slot name="label"></slot>
+        </button>
+        <slot></slot>
+      </k-dropdown>
+    `}static styles=[e.styles,o`
+      :host {
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        margin: var(--spacer_q);
+      }
+
+      k-dropdown {
+        display: inline-flex;
+      }
+
+      button[slot="trigger"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        min-width: 2.5rem;
+        min-height: 2.5rem;
+        padding: 0 0.75rem;
+        background: transparent;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        font-size: inherit;
+      }
+
+      /* Slotted menu items: remove individual borders/radii so the menu
+         reads as a single unified surface. */
+      ::slotted(:not([slot="icon"]):not([slot="label"])) {
+        display: block !important;
+        margin: 0 !important;
+        border: none !important;
+        border-radius: 0 !important;
+        border-bottom: 1px solid var(--c_border) !important;
+      }
+      ::slotted(:not([slot="icon"]):not([slot="label"]):last-child) {
+        border-bottom: none !important;
+      }
+    `]}customElements.define("kc-menu",n);

package/dist/components/controls/Minimap.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as i}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{static requires=["toggleMinimap"];static hostMode="code";static hostEvents=["minimap-changed"];static properties={...t.properties,active:{type:Boolean,reflect:!0}};constructor(){super(),this.active=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Toggle Minimap"),this.host&&(this.active=!!this.host.minimapEnabled)}willUpdate(t){super.willUpdate?.(t),this.host&&(this.active=!!this.host.minimapEnabled)}handleAction(){this.host?.toggleMinimap?.()}render(){return i`<slot><k-icon name="map"></k-icon></slot>`}}customElements.define("kc-minimap",e);

package/dist/components/controls/Mode.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static requires=["toggleMode"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Toggle Code View")}updated(t){super.updated(t);const e=this.host;e&&this.toggleAttribute("active","code"===e.mode)}get mode(){return this.host?.mode}handleAction(){this.host?.toggleMode?.()}render(){return e`<slot><k-icon name="code"></k-icon></slot>`}}customElements.define("kc-mode",o);

package/dist/components/controls/NumberList.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static requires=["numberList"];static hostMode=["visual","write"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Numbered List")}handleAction(){this.host?.numberList?.()}render(){return e`<slot><k-icon name="format_list_numbered"></k-icon></slot>`}}customElements.define("kc-number-list",s);

package/dist/components/controls/PgCount.js

@@ -0,0 +1 @@
+import t from"./Control.js";import{html as e}from"../../lit-all.min.js";export default class s extends t{static hostEvents=["page-change"];render(){return e`<span>${this.host?.totalPages??1}</span>`}}customElements.define("kc-pg-count",s);

package/dist/components/controls/PgFirst.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static hostEvents=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="First Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","First Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page<=1}handleAction(){const t=this.host;t&&(t.page=1)}render(){return e`<slot><k-icon name="chevron-line" direction="left"></k-icon></slot>`}}customElements.define("kc-pg-first",i);

package/dist/components/controls/PgGotoPage.js

@@ -0,0 +1,15 @@
+import t from"./Control.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Combobox.js";export default class s extends t{static hostEvents=["page-change"];handleInput=t=>{const e=this.host;if(e&&t.target.value){const o=parseInt(t.target.value,10);!isNaN(o)&&o>0&&(e.page=o)}};handleBlur=t=>{const e=this.host;e&&(t.target.value=String(e.page))};render(){const t=this.host,o=t?.page??1,s=t?.totalPages??1;return e`
+      <k-combobox
+        .value=${String(o)}
+        @input=${this.handleInput}
+        @blur=${this.handleBlur}
+        placeholder="page"
+        no-results-message="Invalid Page"
+      >
+        ${Array.from({length:s},(t,o)=>e`
+          <k-option value=${o+1}>${o+1}</k-option>
+        `)}
+      </k-combobox>
+    `}static styles=[t.styles,o`
+      k-combobox { width: 5rem; }
+    `]}customElements.define("kc-pg-goto-page",s);

package/dist/components/controls/PgItemsPerPage.js

@@ -0,0 +1,12 @@
+import e from"./Control.js";import{html as t,css as s}from"../../lit-all.min.js";export default class a extends e{static hostEvents=["page-change"];handleChange=e=>{const t=this.host;t&&(t.itemsPerPage=parseInt(e.target.value,10))};render(){const e=this.host,s=e?.itemsPerPage??10,a=e?.pageSizes??[5,10,25,50,100];return t`
+      <label>
+        <slot>Items per page:</slot>
+        <select @change=${this.handleChange}>
+          ${a.map(e=>t`<option value=${e} ?selected=${e===s}>${e}</option>`)}
+        </select>
+      </label>
+    `}static styles=[e.styles,s`
+      :host { align-items: center; }
+      label { display: inline-flex; align-items: center; gap: var(--spacer_q, 0.25rem); padding: 0; white-space: nowrap; }
+      select { min-height: 2.5rem; box-sizing: border-box; }
+    `]}customElements.define("kc-pg-items-per-page",a);

package/dist/components/controls/PgLast.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Last Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Last Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page>=e.totalPages}handleAction(){const t=this.host;t&&(t.page=t.totalPages)}render(){return e`<slot><k-icon name="chevron-line"></k-icon></slot>`}}customElements.define("kc-pg-last",s);

package/dist/components/controls/PgNext.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Next Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Next Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page>=e.totalPages}handleAction(){this.host?.nextPage()}render(){return e`<slot><k-icon name="chevron"></k-icon></slot>`}}customElements.define("kc-pg-next",s);

package/dist/components/controls/PgPageInfo.js

@@ -0,0 +1,3 @@
+import s from"./Control.js";import{html as e,css as t}from"../../lit-all.min.js";export default class a extends s{static hostEvents=["page-change"];render(){const s=this.host;return e`<span class="info">Page ${s?.page??1} of ${s?.totalPages??1}</span>`}static styles=[s.styles,t`
+      .info { padding: 0 var(--spacer_q, 0.25rem); white-space: nowrap; }
+    `]}customElements.define("kc-pg-page-info",a);

package/dist/components/controls/PgPrev.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static hostEvents=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Previous Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Previous Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page<=1}handleAction(){this.host?.previousPage()}render(){return e`<slot><k-icon name="chevron" direction="left"></k-icon></slot>`}}customElements.define("kc-pg-prev",i);

package/dist/components/controls/Quote.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static requires=["quote"];static hostMode=["visual","write"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Quote")}handleAction(){this.host?.quote?.()}render(){return e`<slot><k-icon name="format_quote"></k-icon></slot>`}}customElements.define("kc-quote",o);

package/dist/components/controls/Redo.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static requires=["redo"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Redo")}handleAction(){this.host?.redo?.()}render(){return e`<slot><k-icon name="redo"></k-icon></slot>`}}customElements.define("kc-redo",o);

package/dist/components/{htmlEditorControls/ControlSpacer.js → controls/Spacer.js}

@@ -1,6 +1,6 @@
 import e from"../ShadowComponent.js";import{html as t,css as s}from"../../lit-all.min.js";export default class l extends e{static styles=s`
-		:host {
-			display: inline-flex;
-			flex: 1;
-		}
-	`;render(){return t``}}customElements.define("k-hec-spacer",l);
+    :host {
+      display: inline-flex;
+      flex: 1;
+    }
+  `;render(){return t``}}customElements.define("kc-spacer",l);

package/dist/components/controls/Strikethrough.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static requires=["strikethrough"];static hostMode=["visual","write"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Strikethrough")}handleAction(){this.host?.strikethrough?.()}render(){return e`<slot><k-icon name="strikethrough_s"></k-icon></slot>`}}customElements.define("kc-strikethrough",o);

package/dist/components/controls/TcDeleteRecord.js

@@ -0,0 +1 @@
+import e from"./ButtonControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class o extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Delete Record")}get record(){const e=this.closest(".record");if(e){const t=e.dataset.index;if(void 0!==t)return this.host?.records?.[t]}return null}delete(){this.handleAction()}handleAction(){const e=this.record;e&&this.host?.deleteRecord(e)}render(){return t`<slot><k-icon name="delete"></k-icon></slot>`}}customElements.define("kc-tc-delete-record",o);

package/dist/components/controls/TcDeleteSelected.js

@@ -0,0 +1 @@
+import e from"./ButtonControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class l extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Delete Selected")}handleAction(){this.host?.deleteSelected()}render(){return t`<slot><k-icon name="delete_sweep"></k-icon></slot>`}}customElements.define("kc-tc-delete-selected",l);

package/dist/components/controls/TcEdit.js

@@ -0,0 +1,12 @@
+import t from"./Control.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static hostEvents=["editingChange"];static properties={...t.properties,isEditing:{type:Boolean,state:!0}};constructor(){super(),this.isEditing=!1}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}connectedCallback(){super.connectedCallback();const t=this.host;t&&t.addEventListener("editingChange",t=>{t.detail.record===this.record&&(this.isEditing=t.detail.editing)})}handleEdit=()=>{const t=this.record;t&&this.host?.editRecord(t)};handleSave=()=>{const t=this.record;t&&this.host?.saveEditedRecord(t)};handleCancel=()=>{const t=this.record;t&&this.host?.cancelEditedRecord(t)};render(){return this.isEditing?e`
+      <button class="edit-btn save" @click=${this.handleSave}><k-icon name="check"></k-icon></button>
+      <button class="edit-btn cancel" @click=${this.handleCancel}><k-icon name="close"></k-icon></button>
+    `:e`
+      <button class="edit-btn" @click=${this.handleEdit}><k-icon name="edit"></k-icon></button>
+    `}static styles=[t.styles,i`
+      :host { align-items: baseline; gap: 0.25rem; }
+      .edit-btn { background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius); }
+      .edit-btn:hover { background: oklch(from var(--c_bg__inv) l c h / 0.1); }
+      .save { color: var(--c_success, green); }
+      .cancel { color: var(--c_danger, red); }
+    `]}customElements.define("kc-tc-edit",n);

package/dist/components/controls/TcExportCsv.js

@@ -0,0 +1,3 @@
+import t from"./ButtonControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class r extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Export CSV")}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}getCSV(){const t=this.host;if(!t)return"";const e=[];t.fields.forEach(({name:t,calculator:o})=>{o||e.push(t)});let o=e.join(",")+"\n";const r=this.record;return r?o+=e.map(t=>r[t]||"").join(",")+"\n":t.records.forEach(t=>{o+=e.map(e=>t[e]||"").join(",")+"\n"}),o}export(){this.handleAction()}handleAction(){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 e`<slot><k-icon name="export-file"></k-icon> Export CSV</slot>`}static styles=[t.styles,o`
+      :host { gap: 0.25rem; padding: 0 var(--spacer_h, 0.5rem); }
+    `]}customElements.define("kc-tc-export-csv",r);

package/dist/components/controls/TcExportJson.js

@@ -0,0 +1,3 @@
+import t from"./ButtonControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class r extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Export JSON")}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}export(){this.handleAction()}handleAction(){const t=this.record,e=t?JSON.stringify(t):JSON.stringify(this.host?.records||[]),o=new Blob([e],{type:"application/json"}),r=URL.createObjectURL(o),s=document.createElement("a");s.href=r,s.download="data.json",s.click(),URL.revokeObjectURL(r)}render(){return e`<slot><k-icon name="export-file"></k-icon> Export JSON</slot>`}static styles=[t.styles,o`
+      :host { gap: 0.25rem; padding: 0 var(--spacer_h, 0.5rem); }
+    `]}customElements.define("kc-tc-export-json",r);

package/dist/components/controls/TcFieldSortHide.js

@@ -0,0 +1,21 @@
+import e from"./ButtonControl.js";import{html as t,render as i}from"../../lit-all.min.js";import"../Icon.js";import l from"../Dialog.js";export default class o extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Show / Hide / Order Fields")}openDialog(){this.handleAction()}handleAction(){import("../Sortable.js");const e=this.host;if(!e)return;const o=document.createElement("div");i(t`
+      <div class="m">
+        <k-sortable id="sorting" @sort=${t=>{const i=Array.from(t.target.querySelectorAll("k-sortable-item")).map(e=>e.getAttribute("data-field"));e.reorderFields(i)}}>
+          ${e.fields.map(i=>t`
+            <k-sortable-item data-field="${i.name}">
+              <label class="field pb0">
+                <input
+                  class="field-visibility"
+                  data-field="${i.name}"
+                  type="checkbox"
+                  .checked="${!i.hidden}"
+                  @change="${t=>e.setFieldHiddenState(i.name,!t.target.checked)}"
+                  style="height: 1.25rem; width: 1.25rem"
+                />
+                ${i.label}
+              </label>
+            </k-sortable-item>
+          `)}
+        </k-sortable>
+      </div>
+    `,o),l.create(o,{title:"Show / Hide / Order Fields",width:"400px",cancelText:"Close"})}render(){return t`<slot><k-icon name="table-visibility"></k-icon></slot>`}}customElements.define("kc-tc-field-sort-hide",o);

package/dist/components/controls/TcFilters.js

@@ -0,0 +1,34 @@
+import t from"./ButtonControl.js";import{html as e,render as l}from"../../lit-all.min.js";import"../Icon.js";import i from"../Dialog.js";const n={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"};export default class o extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Filters")}handleFilter(){this.handleAction()}handleAction(){this.openDialog()}openDialog=()=>{const t=this.host;if(!t)return;const o=document.createElement("div");l(e`
+      <div class="p">
+        ${0===t.filters.length?e`<p>No Current Filters.</p>`:e`
+          <h5>Current Filters</h5>
+          <ul id="currentFilters">
+            ${t.filters.map(({field:l,condition:i,value:o})=>e`
+              <li data-field="${l}" data-condition="${i}" data-value="${o}">
+                ${t.getFieldLabel(l)} ${n[i]} "${o}"
+                <button class="remove-filter no-btn pq" @click=${()=>{t.removeFilter(l,i,o),s.close(),this.openDialog()}}>
+                  <k-icon name="close"></k-icon>
+                </button>
+              </li>
+            `)}
+          </ul>
+        `}
+        <hr />
+        <h5>Add A Filter</h5>
+        <form id="addFilter" @submit=${e=>{e.preventDefault();const l=e.target;t.addFilter(l.filterField.value,l.filterCondition.value,l.filterValue.value),s.close(),this.openDialog()}}>
+          <select id="filterField" class="mb">
+            ${t.fields.map(({name:t,label:l})=>e`<option value="${t}">${l}</option>`)}
+          </select>
+          <select id="filterCondition" class="mb">
+            ${Object.entries(n).map(([t,l])=>e`
+              <option value="${t}" ?selected="${"contains"===t}">${l}</option>
+            `)}
+          </select>
+          <input id="filterValue" type="text" class="mb" />
+          <button type="submit" class="btn primary mb mr">Add Filter</button>
+          ${0===t.filters.length?"":e`
+            <button type="button" class="btn danger mb mr" @click=${()=>{t.removeAllFilters(),s.close()}}>Clear All Filters</button>
+          `}
+        </form>
+      </div>
+    `,o);const s=i.create(o,{width:"600px",title:"Filters"})};render(){return e`<slot><k-icon name="filter"></k-icon></slot>`}}customElements.define("kc-tc-filters",o);

package/dist/components/controls/TcFirstPage.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["pageChange"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="First Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||1===e.getCurrentPage()}handleAction(){this.host?.firstPage()}render(){return e`<slot><k-icon name="chevron-line" direction="left"></k-icon></slot>`}}customElements.define("kc-tc-first-page",s);

package/dist/components/controls/TcHiddenCount.js

@@ -0,0 +1 @@
+import t from"./Control.js";import{html as e}from"../../lit-all.min.js";export default class d extends t{static hostEvents=["recordHidden","recordShown"];static properties={...t.properties,hiddenCount:{type:Number,state:!0}};constructor(){super(),this.hiddenCount=0}connectedCallback(){super.connectedCallback(),this.updateCount()}willUpdate(t){super.willUpdate?.(t),this.updateCount()}updateHiddenCount(){this.updateCount()}handleHiddenChange(){this.updateCount()}updateCount(){this.hiddenCount=this.host?.getHiddenRecords?.()?.length||0}render(){return e`<div><span>${this.hiddenCount}</span> Hidden Records</div>`}}customElements.define("kc-tc-hidden-count",d);

package/dist/components/controls/TcHide.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Hide Record")}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}handleHide(){this.handleAction()}handleAction(){const t=this.record;t&&this.host?.hideRecord(t)}render(){return e`<slot><k-icon name="hide"></k-icon></slot>`}}customElements.define("kc-tc-hide",o);

package/dist/components/controls/TcLastPage.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["pageChange"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Last Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.getCurrentPage()===e.getTotalPages()}handleAction(){this.host?.lastPage()}render(){return e`<slot><k-icon name="chevron-line"></k-icon></slot>`}}customElements.define("kc-tc-last-page",s);

package/dist/components/controls/TcNextPage.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["pageChange"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Next Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.getCurrentPage()===e.getTotalPages()}handleAction(){this.host?.nextPage()}render(){return e`<slot><k-icon name="chevron"></k-icon></slot>`}}customElements.define("kc-tc-next-page",s);

package/dist/components/controls/TcPageSelect.js

@@ -0,0 +1,9 @@
+import e from"./Control.js";import{html as t,css as a}from"../../lit-all.min.js";export default class s extends e{static hostEvents=["pageChange","pageSizeChange","pageCountChanged","recordsSet"];handleSelectChange=e=>{this.host?.setPage(parseInt(e.target.value))};render(){const e=this.host,a=e?.getCurrentPage?.()??1,s=e?.getTotalPages?.()??1,l=[];for(let e=1;e<=s;e++)l.push(t`<option value="${e}" ?selected="${e===a}">Page ${e}</option>`);return t`
+      <div class="page-select">
+        <select @change=${this.handleSelectChange} ?disabled=${s<=1}>${l}</select>
+        <label> out of ${s}</label>
+      </div>
+    `}static styles=[e.styles,a`
+      .page-select { display: flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
+      label { padding: 0; margin: 0; }
+    `]}customElements.define("kc-tc-page-select",s);

package/dist/components/controls/TcPageSize.js

@@ -0,0 +1,5 @@
+import e from"./Control.js";import{html as t}from"../../lit-all.min.js";export default class a extends e{static hostEvents=["pageChange","pageSizeChange"];handleChange=e=>{this.host?.setPageSize(parseInt(e.target.value))};render(){const e=this.host,a=e?.getPageSize?.()??10,s=e?.pageSizeOptions??[10,25,50,100,500];return t`
+      <select @change=${this.handleChange}>
+        ${s.map(e=>t`<option value="${e}" ?selected="${e===a}">${e} per page</option>`)}
+      </select>
+    `}}customElements.define("kc-tc-page-size",a);

package/dist/components/controls/TcPrevPage.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["pageChange"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Previous Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||1===e.getCurrentPage()}handleAction(){this.host?.prevPage()}render(){return e`<slot><k-icon name="chevron" direction="left"></k-icon></slot>`}}customElements.define("kc-tc-prev-page",s);

package/dist/components/controls/TcSearch.js

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

package/dist/components/controls/TcShowAll.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as o}from"../../lit-all.min.js";import"../Icon.js";export default class l extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Show All Records")}handleShowAll(){this.handleAction()}handleAction(){this.host?.showAllRecords()}render(){return o`<slot><k-icon name="show"></k-icon></slot>`}}customElements.define("kc-tc-show-all",l);

package/dist/components/controls/TextBackgroundColor.js

@@ -0,0 +1,26 @@
+import o from"./Control.js";import{html as e,css as r}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class t extends o{static requires=["setTextBackgroundColor"];static hostMode="visual";static properties={...o.properties,colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};constructor(){super(),this.colors="#ffff00,#00ffff,#ff66ff,#99ff99,#ffcc99,#ff9999,#cccccc,#ffffff,#ffffcc,#ccffff,#ffccff,#ccffcc",this.disableRemove=!1,this.disablePicker=!1}get opened(){return this.shadowRoot?.querySelector("k-dropdown")?.opened??!1}set opened(o){const e=this.shadowRoot?.querySelector("k-dropdown");e&&(e.opened=o)}handleRemove=()=>{this.host?.removeTextBackgroundColor?.(),this.shadowRoot.querySelector("k-dropdown")?.close()};handleSwatch=o=>{const e=o.target.style.backgroundColor;if(!e)return;const r=e.match(/\d+/g),t=r?"#"+r.map(o=>parseInt(o).toString(16).padStart(2,"0")).join(""):e;this.host?.setTextBackgroundColor?.(t),this.shadowRoot.querySelector("k-dropdown")?.close()};handlePicker=o=>{this.host?.setTextBackgroundColor?.(o.target.value),this.shadowRoot.querySelector("k-dropdown")?.close()};render(){const o=this.colors.split(",").map(o=>o.trim()).filter(Boolean);return e`
+      <k-dropdown>
+        <button slot="trigger" class="trigger" title="Highlight Color">
+          <k-icon name="format_color_fill"></k-icon>
+        </button>
+        <div class="content">
+          ${this.disableRemove?"":e`<button class="remove" @click=${this.handleRemove}>Remove Color</button>`}
+          <div class="swatches">
+            ${o.map(o=>e`<button class="swatch" style="background-color:${o}" @click=${this.handleSwatch}></button>`)}
+          </div>
+          ${this.disablePicker?"":e`
+            <div class="picker"><label>Custom:</label><input type="color" @input=${this.handlePicker} /></div>
+          `}
+        </div>
+      </k-dropdown>
+    `}static styles=[o.styles,r`
+      :host { border: 1px solid var(--c_border); border-radius: var(--radius); margin: var(--spacer_q); }
+      .trigger { min-width: 2.5rem; min-height: 2.5rem; background: transparent; border: none; cursor: pointer; }
+      .content { padding: 8px; min-width: 200px; }
+      .remove { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid var(--c_border); background: transparent; cursor: pointer; border-radius: var(--radius); }
+      .swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
+      .swatch { width: 32px; height: 32px; border: 1px solid var(--c_border); cursor: pointer; border-radius: 4px; }
+      .swatch:hover { box-shadow: 0 0 4px rgba(0,122,204,0.3); }
+      .picker { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+      .picker input { flex: 1; height: 32px; border: 1px solid var(--c_border); border-radius: 4px; cursor: pointer; }
+    `]}customElements.define("kc-text-background-color",t);

package/dist/components/controls/TextColor.js

@@ -0,0 +1,26 @@
+import e from"./Control.js";import{html as o,css as t}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class r extends e{static requires=["setTextColor"];static hostMode="visual";static properties={...e.properties,colors:{type:String},disableRemove:{type:Boolean,attribute:"disable-remove"},disablePicker:{type:Boolean,attribute:"disable-picker"}};constructor(){super(),this.colors="#000000,#e60000,#ff9900,#ffff00,#008a00,#0066cc,#9933ff,#ffffff,#facccc,#ffebcc,#ffffcc,#cce8cc,#cce0f5,#ebd6ff",this.disableRemove=!1,this.disablePicker=!1}get opened(){return this.shadowRoot?.querySelector("k-dropdown")?.opened??!1}set opened(e){const o=this.shadowRoot?.querySelector("k-dropdown");o&&(o.opened=e)}handleRemove=()=>{this.host?.removeTextColor?.(),this.shadowRoot.querySelector("k-dropdown")?.close()};handleSwatch=e=>{const o=e.target.style.backgroundColor;if(!o)return;const t=o.match(/\d+/g),r=t?"#"+t.map(e=>parseInt(e).toString(16).padStart(2,"0")).join(""):o;this.host?.setTextColor?.(r),this.shadowRoot.querySelector("k-dropdown")?.close()};handlePicker=e=>{this.host?.setTextColor?.(e.target.value),this.shadowRoot.querySelector("k-dropdown")?.close()};render(){const e=this.colors.split(",").map(e=>e.trim()).filter(Boolean);return o`
+      <k-dropdown>
+        <button slot="trigger" class="trigger" title="Text Color">
+          <k-icon name="format_color_text"></k-icon>
+        </button>
+        <div class="content">
+          ${this.disableRemove?"":o`<button class="remove" @click=${this.handleRemove}>Remove Color</button>`}
+          <div class="swatches">
+            ${e.map(e=>o`<button class="swatch" style="background-color:${e}" @click=${this.handleSwatch}></button>`)}
+          </div>
+          ${this.disablePicker?"":o`
+            <div class="picker"><label>Custom:</label><input type="color" @input=${this.handlePicker} /></div>
+          `}
+        </div>
+      </k-dropdown>
+    `}static styles=[e.styles,t`
+      :host { border: 1px solid var(--c_border); border-radius: var(--radius); margin: var(--spacer_q); }
+      .trigger { min-width: 2.5rem; min-height: 2.5rem; background: transparent; border: none; cursor: pointer; }
+      .content { padding: 8px; min-width: 200px; }
+      .remove { width: 100%; padding: 8px; margin-bottom: 8px; border: 1px solid var(--c_border); background: transparent; cursor: pointer; border-radius: var(--radius); }
+      .swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
+      .swatch { width: 32px; height: 32px; border: 1px solid var(--c_border); cursor: pointer; border-radius: 4px; }
+      .swatch:hover { box-shadow: 0 0 4px rgba(0,122,204,0.3); }
+      .picker { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
+      .picker input { flex: 1; height: 32px; border: 1px solid var(--c_border); border-radius: 4px; cursor: pointer; }
+    `]}customElements.define("kc-text-color",r);

package/dist/components/controls/Underline.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static requires=["underline"];static hostMode="visual";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Underline")}handleAction(){this.host?.underline?.()}render(){return e`<slot><k-icon name="format_underlined"></k-icon></slot>`}}customElements.define("kc-underline",n);

package/dist/components/controls/Undo.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as o}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{static requires=["undo"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Undo")}handleAction(){this.host?.undo?.()}render(){return o`<slot><k-icon name="undo"></k-icon></slot>`}}customElements.define("kc-undo",e);

package/dist/components/controls/WordCount.js

@@ -0,0 +1,4 @@
+import t from"./Control.js";import{html as e,css as s}from"../../lit-all.min.js";export default class n extends t{static hostEvents=["change","ready"];static properties={...t.properties,count:{type:Number,state:!0}};constructor(){super(),this.count=0}connectedCallback(){super.connectedCallback(),setTimeout(()=>this.updateCount(),0)}willUpdate(t){super.willUpdate?.(t),this.updateCount()}updateCount(){const t=this.host;if(!t||"function"!=typeof t.getValue)return;const e=t.getValue()||"",s=e.includes("<")?(new DOMParser).parseFromString(e,"text/html").body.innerText||"":e;this.count=s.trim().split(/\s+/).filter(t=>t.length>0).length}render(){return e`<span class="word-count"><slot name="label">Words:</slot> ${this.count}</span>`}static styles=[t.styles,s`
+      :host { align-items: center; padding: 0 0.5rem; font-size: 0.875rem; color: var(--tc_muted, #666); }
+      .word-count { display: flex; align-items: center; gap: 0.25rem; }
+    `]}customElements.define("kc-word-count",n);

package/dist/components/controls/WordWrap.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static requires=["toggleWordWrap"];static hostMode="code";static hostEvents=["word-wrap-changed"];static properties={...t.properties,active:{type:Boolean,reflect:!0}};constructor(){super(),this.active=!0}connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Toggle Word Wrap"),this.host&&(this.active=!1!==this.host.wordWrap)}willUpdate(t){super.willUpdate?.(t),this.host&&(this.active=!1!==this.host.wordWrap)}handleAction(){this.host?.toggleWordWrap?.()}render(){return e`<slot><k-icon name="wrap_text"></k-icon></slot>`}}customElements.define("kc-word-wrap",s);