kempo-ui 0.3.7 → 0.3.8

package/docs/src/components/Table.js

@@ -1,46 +1,46 @@
-import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{toTitleCase}from"../utils/string.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"},requestEdit:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-edit"},requestDelete:{type:Boolean,reflect:!0,converter:boolExists,attribute:"request-delete"},placeholder:{type:String,reflect:!0},filteredPlaceholder:{type:String,reflect:!0,attribute:"filtered-placeholder"},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),void 0===this.requestEdit&&(this.requestEdit=!1),void 0===this.requestDelete&&(this.requestDelete=!1),void 0===this.placeholder&&(this.placeholder="No Records"),void 0===this.filteredPlaceholder&&(this.filteredPlaceholder="")}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.getDisplayedRecords().length>0&&this.allOnPageSelected())}}renderColgroupTemplate(){const e=[];return this.enableSelection&&e.push(html`<col style="width: 40px" />`),this.hasBeforeControls()&&e.push(html`<col style="width: ${this.columnSizes.beforeControls}px" />`),this.fields.forEach(({size:t,hidden:s})=>{s||e.push(t?html`<col style="width: ${t}px" />`:html`<col />`)}),this.hasAfterControls()&&e.push(html`<col style="width: ${this.columnSizes.afterControls}px" />`),e}getColumnCount(){let e=0;return this.enableSelection&&e++,this.hasBeforeControls()&&e++,this.fields.forEach(({hidden:t})=>{t||e++}),this.hasAfterControls()&&e++,e}renderFieldsTemplate(){const e=[];return this.enableSelection&&e.push(html`
+import{html as e,css as t,unsafeStatic as s,literal as i}from"../lit-all.min.js";import r from"./ShadowComponent.js";import{toTitleCase as o}from"../utils/string.js";import{boolExists as n}from"../utils/propConverters.js";const l=Symbol("selected"),a=Symbol("hidden"),d=Symbol("index"),c=Symbol("editing");export default class h extends r{static properties={enablePages:{type:Boolean,reflect:!0,converter:n,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:n,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:n,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:n,attribute:"case-sensitive-filters"},requestEdit:{type:Boolean,reflect:!0,converter:n,attribute:"request-edit"},requestDelete:{type:Boolean,reflect:!0,converter:n,attribute:"request-delete"},placeholder:{type:String,reflect:!0},filteredPlaceholder:{type:String,reflect:!0,attribute:"filtered-placeholder"},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),void 0===this.requestEdit&&(this.requestEdit=!1),void 0===this.requestDelete&&(this.requestDelete=!1),void 0===this.placeholder&&(this.placeholder="No Records"),void 0===this.filteredPlaceholder&&(this.filteredPlaceholder="")}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[l]=!!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.getDisplayedRecords().length>0&&this.allOnPageSelected())}}renderColgroupTemplate(){const t=[];return this.enableSelection&&t.push(e`<col style="width: 40px" />`),this.hasBeforeControls()&&t.push(e`<col style="width: ${this.columnSizes.beforeControls}px" />`),this.fields.forEach(({size:s,hidden:i})=>{i||t.push(s?e`<col style="width: ${s}px" />`:e`<col />`)}),this.hasAfterControls()&&t.push(e`<col style="width: ${this.columnSizes.afterControls}px" />`),t}getColumnCount(){let e=0;return this.enableSelection&&e++,this.hasBeforeControls()&&e++,this.fields.forEach(({hidden:t})=>{t||e++}),this.hasAfterControls()&&e++,e}renderFieldsTemplate(){const t=[];return this.enableSelection&&t.push(e`
         <th class="controls field-select">
           <input type="checkbox" id="select-all" @change=${this.handleSelectAllChange} />
         </th>
-      `),this.hasBeforeControls()&&e.push(html`<th class="controls field-before-controls"></th>`),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,n=r?r.asc?"sort-asc":"sort-desc":"";e.push(html`
+      `),this.hasBeforeControls()&&t.push(e`<th class="controls field-before-controls"></th>`),this.fields.forEach(({name:s,label:i,hidden:r})=>{if(r)return;const o=this.sort.find(e=>e.name===s),n=this.sort.length>0&&this.sort[this.sort.length-1].name===s,l=o?o.asc?"sort-asc":"sort-desc":"";t.push(e`
         <th
-          class="${n}"
+          class="${l}"
           style="${this.enableSorting?"cursor: pointer;":""}"
-          @click=${this.enableSorting?()=>this.handleFieldClick(t):null}
+          @click=${this.enableSorting?()=>this.handleFieldClick(s):null}
         >
-          ${s}
-          ${o?html`<k-icon name="arrow" direction="${r.asc?"down":"up"}" class="icon-sort"></k-icon>`:""}
+          ${i}
+          ${n?e`<k-icon name="arrow" direction="${o.asc?"down":"up"}" class="icon-sort"></k-icon>`:""}
         </th>
-      `)}),this.hasAfterControls()&&e.push(html`<th class="controls field-after-controls"></th>`),e}renderRecordsTemplate(){let e=this.getDisplayedRecords(),t=0,s=this.pageSize;if(this.enablePages&&(t=(this.currentPage-1)*this.pageSize,s=t+this.pageSize,e=e.slice(t,s)),0===e.length){const e=this.records.filter(e=>null!==e).length>0?this.filteredPlaceholder:this.placeholder;if(e)return[html`<tr class="placeholder"><td colspan="${this.getColumnCount()}">${e}</td></tr>`]}let i=null,r=0;const o=e.map((e,s)=>null!==e?this.renderRecordTemplate(e):(null===i&&(i=t+s),r++,html`<tr class="record fetching"><td class="cell" colspan="${this.getColumnCount()}">Loading...</td></tr>`));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`
+      `)}),this.hasAfterControls()&&t.push(e`<th class="controls field-after-controls"></th>`),t}renderRecordsTemplate(){let t=this.getDisplayedRecords(),s=0,i=this.pageSize;if(this.enablePages&&(s=(this.currentPage-1)*this.pageSize,i=s+this.pageSize,t=t.slice(s,i)),0===t.length){const t=this.records.filter(e=>null!==e).length>0?this.filteredPlaceholder:this.placeholder;if(t)return[e`<tr class="placeholder"><td colspan="${this.getColumnCount()}">${t}</td></tr>`]}let r=null,o=0;const n=t.map((t,i)=>null!==t?this.renderRecordTemplate(t):(null===r&&(r=s+i),o++,e`<tr class="record fetching"><td class="cell" colspan="${this.getColumnCount()}">Loading...</td></tr>`));return null===r||this.fetchPending||setTimeout(()=>{this.fetchPending||this.dispatchEvent(new CustomEvent("fetchRecords",{detail:{start:r,count:o},bubbles:!0}))},0),n}renderRecordTemplate(t){const s=[];return this.enableSelection&&s.push(e`
         <td class="cell selection controls">
           <input
             type="checkbox"
-            .checked=${e[selected]}
-            @change=${t=>this.handleRecordSelectionChange(e,t)}
+            .checked=${t[l]}
+            @change=${e=>this.handleRecordSelectionChange(t,e)}
           />
         </td>
-      `),this.hasBeforeControls()&&t.push(this.renderBeforeControlsTemplate()),this.fields.forEach(({name:s,formatter:i,calculator:r,type:o,editor:n,hidden:l,editable:a})=>{if(l)return;let d=e[s]||"";t.push(html`
-        <td class="cell" data-field=${s}>
-          ${e[editing]?this.renderEditingCell(e,s,d,r,n,o,a):this.renderDisplayCell(e,s,d,r,i)}
+      `),this.hasBeforeControls()&&s.push(this.renderBeforeControlsTemplate()),this.fields.forEach(({name:i,formatter:r,calculator:o,type:n,editor:l,hidden:a,editable:d})=>{if(a)return;let h=t[i]||"";s.push(e`
+        <td class="cell" data-field=${i}>
+          ${t[c]?this.renderEditingCell(t,i,h,o,l,n,d):this.renderDisplayCell(t,i,h,o,r)}
         </td>
-      `)}),this.hasAfterControls()&&t.push(this.renderAfterControlsTemplate()),html`
-      <tr class="record ${e[editing]?"editing":""}" data-index=${e[index]}>
-        ${t}
+      `)}),this.hasAfterControls()&&s.push(this.renderAfterControlsTemplate()),e`
+      <tr class="record ${t[c]?"editing":""}" data-index=${t[d]}>
+        ${s}
       </tr>
-    `}renderEditingCell(e,t,s,i,r,o,n){if(!1===n)return this.renderDisplayCell(e,t,s,i,null);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>
+    `}renderEditingCell(t,s,i,r,o,n,l){if(!1===l)return this.renderDisplayCell(t,s,i,r,null);if(r)return e`<input disabled .value=${r(t,this)} />`;if(o){const t=o(i);return e`${t}`}switch(n||typeof i){case"number":return e`<input type="number" .value=${i} />`;case"date":return e`<input type="date" .value=${i} />`;case"boolean":return e`
+            <select .value=${i}>
+              <option value="true" ?selected=${i}>True</option>
+              <option value="false" ?selected=${!i}>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`
+          `;default:return e`<input type="text" .value=${i} />`}}renderDisplayCell(e,t,s,i,r){return i?i(e,this):r?r(s):s}renderBeforeControlsTemplate(){const t=[];return this.querySelectorAll('[slot="before"]').forEach(e=>{const s=e.tagName.toLowerCase(),i=document.createElement(s);Array.from(e.attributes).forEach(e=>{"slot"!==e.name&&i.setAttribute(e.name,e.value)}),e.innerHTML&&(i.innerHTML=e.innerHTML),t.push(i)}),e`
       <td class="cell controls controls-before">
-        <div>${e}</div>
+        <div>${t}</div>
       </td>
-    `}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`
+    `}renderAfterControlsTemplate(){const t=[];return this.querySelectorAll('[slot="after"]').forEach(e=>{const s=e.tagName.toLowerCase(),i=document.createElement(s);Array.from(e.attributes).forEach(e=>{"slot"!==e.name&&i.setAttribute(e.name,e.value)}),e.innerHTML&&(i.innerHTML=e.innerHTML),t.push(i)}),e`
       <td class="cell controls controls-after">
-        <div>${e}</div>
+        <div>${t}</div>
       </td>
-    `}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){if(!1===i.editable)return;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]}"]`),s={};t&&t.querySelectorAll(".cell[data-field]").forEach(e=>{const t=e.dataset.field,i=this.fields.find(e=>e.name===t);if(i&&!i.calculator){const i=e.querySelector("input, select");i&&(s[t]=i.value)}});const i=()=>{Object.assign(e,s),e[editing]=!1,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}))};if(Object.keys(s).some(t=>String(e[t]??"")!==s[t]))if(this.requestEdit){t?.classList.add("pending");const r=()=>{t?.classList.remove("pending"),i()},o=()=>{t?.classList.remove("pending")};this.dispatchEvent(new CustomEvent("requestSave",{detail:{record:e,newData:s,approve:r,reject:o},bubbles:!0}))}else i();else this.cancelEditedRecord(e)}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 n=!1,l=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),n=!0),s&&(this.pageSize=s,n=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,n=!0),void 0!==o&&(this.enableSelection=o,n=!0),n&&this.requestUpdate();const d=this.getTotalPages();d!==l&&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);const s=this.getTotalPages();if(t||void 0===e[index]||(t=this.records[e[index]]),!t)return;const i=()=>{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}))};if(this.requestDelete){const e=this.shadowRoot.querySelector(`.record[data-index="${t[index]}"]`);e?.classList.add("pending");const s=()=>{e?.classList.remove("pending"),i()},r=()=>{e?.classList.remove("pending")};this.dispatchEvent(new CustomEvent("requestDelete",{detail:{records:[t],approve:s,reject:r},bubbles:!0}))}else i()}deleteSelected(){const e=this.getTotalPages(),t=this.getSelectedRecords().map(e=>this.records.find(t=>t===e)??(void 0!==e[index]?this.records[e[index]]:null)).filter(Boolean);if(!t.length)return;const s=()=>{t.forEach(e=>{const t=this.records.indexOf(e);-1!==t&&this.records.splice(t,1)}),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate();const s=this.getTotalPages();this.currentPage>s&&this.setPage(s),s!==e&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:s},bubbles:!0})),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};if(this.requestDelete){const e=t.map(e=>this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`)).filter(Boolean);e.forEach(e=>e.classList.add("pending"));const i=()=>{e.forEach(e=>e.classList.remove("pending")),s()},r=()=>{e.forEach(e=>e.classList.remove("pending"))};this.dispatchEvent(new CustomEvent("requestDelete",{detail:{records:t,approve:i,reject:r},bubbles:!0}))}else s()}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=Array.from(this.querySelectorAll('[slot="before"]')),t=Array.from(this.querySelectorAll('[slot="after"]')),s={beforeControls:e.reduce((e,t)=>e+(t.maxWidth||40),0),afterControls:t.reduce((e,t)=>e+(t.maxWidth||40),0)},i=[...e,...t].some(e=>void 0===e.maxWidth);return JSON.stringify(this.columnSizes)!==JSON.stringify(s)&&(this.columnSizes=s),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`
+    `}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[c]=!0;const t=this.shadowRoot.querySelector(`.record[data-index="${e[d]}"]`);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){if(!1===i.editable)return;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=h.editors[e]||h.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[d]}"]`),s={};t&&t.querySelectorAll(".cell[data-field]").forEach(e=>{const t=e.dataset.field,i=this.fields.find(e=>e.name===t);if(i&&!i.calculator){const i=e.querySelector("input, select");i&&(s[t]=i.value)}});const i=()=>{Object.assign(e,s),e[c]=!1,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}))};if(Object.keys(s).some(t=>String(e[t]??"")!==s[t]))if(this.requestEdit){t?.classList.add("pending");const r=()=>{t?.classList.remove("pending"),i()},o=()=>{t?.classList.remove("pending")};this.dispatchEvent(new CustomEvent("requestSave",{detail:{record:e,newData:s,approve:r,reject:o},bubbles:!0}))}else i();else this.cancelEditedRecord(e)}cancelEditedRecord(e){e[c]=!1;const t=this.shadowRoot.querySelector(`.record[data-index="${e[d]}"]`);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[c]}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:o(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 n=!1,u=this.getTotalPages(),p=this.currentPage;e&&(this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[d]=t,e[l]=!1,e[a]=!1,e[c]=!1}),this.fields=t||h.extractFieldsFromRecords(this.records),n=!0),s&&(this.pageSize=s,n=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,n=!0),void 0!==o&&(this.enableSelection=o,n=!0),n&&this.requestUpdate();const g=this.getTotalPages();g!==u&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),p>g&&this.setPage(g)}setRecords(e,t){let s=this.getTotalPages(),i=this.currentPage;this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[d]=t,e[l]=!1,e[a]=!1,e[c]=!1}),this.fields=t||h.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[d]=s+t,void 0===e[l]&&(e[l]=!1),void 0===e[a]&&(e[a]=!1),void 0===e[c]&&(e[c]=!1)}),this.records.splice(s,r.length,...r),this.fetchPending=!1,this.requestUpdate()})}addRecord(e){e[l]=!1,e[a]=!1,e[d]=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[d]||(i=this.records[e[d]]),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[d]>=e&&i[d]<t)&&this.requestUpdate()}}deleteRecord(e){let t=this.records.find(t=>t===e);const s=this.getTotalPages();if(t||void 0===e[d]||(t=this.records[e[d]]),!t)return;const i=()=>{const e=this.records.indexOf(t);this.records.splice(e,1),this.records.forEach((e,t)=>{e[d]=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}))};if(this.requestDelete){const e=this.shadowRoot.querySelector(`.record[data-index="${t[d]}"]`);e?.classList.add("pending");const s=()=>{e?.classList.remove("pending"),i()},r=()=>{e?.classList.remove("pending")};this.dispatchEvent(new CustomEvent("requestDelete",{detail:{records:[t],approve:s,reject:r},bubbles:!0}))}else i()}deleteSelected(){const e=this.getTotalPages(),t=this.getSelectedRecords().map(e=>this.records.find(t=>t===e)??(void 0!==e[d]?this.records[e[d]]:null)).filter(Boolean);if(!t.length)return;const s=()=>{t.forEach(e=>{const t=this.records.indexOf(e);-1!==t&&this.records.splice(t,1)}),this.records.forEach((e,t)=>{e[d]=t}),this.requestUpdate();const s=this.getTotalPages();this.currentPage>s&&this.setPage(s),s!==e&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:s},bubbles:!0})),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};if(this.requestDelete){const e=t.map(e=>this.shadowRoot.querySelector(`.record[data-index="${e[d]}"]`)).filter(Boolean);e.forEach(e=>e.classList.add("pending"));const i=()=>{e.forEach(e=>e.classList.remove("pending")),s()},r=()=>{e.forEach(e=>e.classList.remove("pending"))};this.dispatchEvent(new CustomEvent("requestDelete",{detail:{records:t,approve:i,reject:r},bubbles:!0}))}else s()}getSelectedRecords(){return this.records.filter(e=>e[l])}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][l]=!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][l]=!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][l])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[d]||(t=this.records[e[d]]),t&&(t[a]=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})))}showRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[d]||(t=this.records[e[d]]),t&&(t[a]=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})))}showAllRecords(){this.records.forEach(e=>{e[a]=!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[a]=!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[a])return;let i=!1;this.fields.forEach(({name:s})=>{(e[s]?.toString().toLowerCase()||"").includes(t)&&(i=!0)}),e[a]!==!i&&(e[a]=!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[a]=!0))})});let e=this.records.filter(e=>null===e||!e[a]);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[a])}calculateColumnSizes(){const e=Array.from(this.querySelectorAll('[slot="before"]')),t=Array.from(this.querySelectorAll('[slot="after"]')),s={beforeControls:e.reduce((e,t)=>e+(t.maxWidth||40),0),afterControls:t.reduce((e,t)=>e+(t.maxWidth||40),0)},i=[...e,...t].some(e=>void 0===e.maxWidth);return JSON.stringify(this.columnSizes)!==JSON.stringify(s)&&(this.columnSizes=s),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"),e`
       <div id="wrapper">
         <div id="top"><slot name="top"></slot></div>
         <div id="table-container">
@@ -64,7 +64,7 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
         <slot name="before"></slot>
         <slot name="after"></slot>
       </div>
-    `):html`
+    `):e`
         <div id="wrapper">
           <div id="top"><slot name="top"></slot></div>
           <div id="table-container">
@@ -76,7 +76,7 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
           <slot name="before"></slot>
           <slot name="after"></slot>
         </div>
-      `}static styles=css`
+      `}static styles=t`
     :host {
       display: block;
       margin-bottom: var(--spacer);
@@ -198,4 +198,4 @@ import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowCompon
       font-style: italic;
       padding: var(--spacer);
     }
-  `;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);
+  `;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:o(e)}))}static format(e){return(Array.isArray(e)?h.formatters.array:h.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=>h.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",h);

package/docs/src/components/Tabs.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import{boolExists}from"../utils/propConverters.js";export class Tabs extends ShadowComponent{static properties={active:{type:String,reflect:!0},fixedHeight:{type:Boolean,reflect:!0,attribute:"fixed-height",converter:boolExists}};constructor(){super(),this.active="",this.fixedHeight=!1}firstUpdated(){if(super.firstUpdated(),!this.active){const t=this.querySelector("k-tab-content");t&&(this.active=t.name)}this.setupScrollListeners(),this.updateScrollIndicators(),new ResizeObserver(()=>this.updateScrollIndicators()).observe(this.shadowRoot.getElementById("tabs"))}updated(t){super.updated(t),t.has("active")&&this.updateActiveElements()}setupScrollListeners(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right");t.addEventListener("scroll",()=>this.updateScrollIndicators()),e.addEventListener("click",()=>{t.scrollBy({left:-200,behavior:"smooth"})}),o.addEventListener("click",()=>{t.scrollBy({left:200,behavior:"smooth"})})}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right"),s=t.scrollLeft>0,i=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",s),o.classList.toggle("visible",i)}updateActiveElements(){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const o=this.getTab(this.active);o&&(o.active=!0);const s=this.getContent(this.active);s&&(s.active=!0),this.dispatchEvent(new CustomEvent("tab",{detail:{tab:this.active},bubbles:!0}))}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab")[o]}return e}getActiveTab(){return this.querySelector(":scope > k-tab[active]")}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab-content")[o]}return e}getActiveContent(){return this.querySelector(":scope > k-tab-content[active]")}static styles=css`
+import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponent.js";import{boolExists as s}from"../utils/propConverters.js";export class Tabs extends o{static properties={active:{type:String,reflect:!0},fixedHeight:{type:Boolean,reflect:!0,attribute:"fixed-height",converter:s}};constructor(){super(),this.active="",this.fixedHeight=!1}firstUpdated(){if(super.firstUpdated(),!this.active){const t=this.querySelector("k-tab-content");t&&(this.active=t.name)}this.setupScrollListeners(),this.updateScrollIndicators(),new ResizeObserver(()=>this.updateScrollIndicators()).observe(this.shadowRoot.getElementById("tabs"))}updated(t){super.updated(t),t.has("active")&&this.updateActiveElements()}setupScrollListeners(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right");t.addEventListener("scroll",()=>this.updateScrollIndicators()),e.addEventListener("click",()=>{t.scrollBy({left:-200,behavior:"smooth"})}),o.addEventListener("click",()=>{t.scrollBy({left:200,behavior:"smooth"})})}updateScrollIndicators(){const t=this.shadowRoot.getElementById("tabs"),e=this.shadowRoot.getElementById("scroll-left"),o=this.shadowRoot.getElementById("scroll-right"),s=t.scrollLeft>0,r=t.scrollLeft<t.scrollWidth-t.clientWidth;e.classList.toggle("visible",s),o.classList.toggle("visible",r)}updateActiveElements(){const t=this.getActiveTab();t&&(t.active=!1);const e=this.getActiveContent();e&&(e.active=!1);const o=this.getTab(this.active);o&&(o.active=!0);const s=this.getContent(this.active);s&&(s.active=!0),this.dispatchEvent(new CustomEvent("tab",{detail:{tab:this.active},bubbles:!0}))}get contents(){return[...this.querySelectorAll(":scope > k-tab-content")]}get tabs(){return[...this.querySelectorAll(":scope > k-tab")]}getTab(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab[for="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab")[o]}return e}getActiveTab(){return this.querySelector(":scope > k-tab[active]")}getContent(t){let e;if("string"==typeof t&&(e=this.querySelector(`k-tab-content[name="${t}"]`)),!e){let o=parseInt(t);o||(o=0),e=this.querySelectorAll("k-tab-content")[o]}return e}getActiveContent(){return this.querySelector(":scope > k-tab-content[active]")}static styles=e`
 		:host {
 			display: block;
 			width: 100%;
@@ -78,7 +78,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			min-height: 1.35rem;
 			overflow: auto;
 		}
-	`;render(){return html`
+	`;render(){return t`
 			<div id="wrapper">
 				<div id="tabs-container">
 					<div id="scroll-left" class="scroll-indicator">
@@ -99,11 +99,11 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 					<slot></slot>
 				</div>
 			</div>
-		`}}export class Tab extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return html`
+		`}}export class Tab extends o{static properties={active:{type:Boolean,reflect:!0,converter:s},for:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.for="",this.slot="tabs"}handleClick=()=>{if(!this.active){const t=this.parentElement;t&&"K-TABS"===t.tagName&&(t.active=this.for||t.tabs.indexOf(this).toString())}};get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return t`
 			<button id="button" @click=${this.handleClick}>
 				<slot></slot>
 			</button>
-		`}static styles=css`
+		`}static styles=e`
 		:host {
 			margin-bottom: -1px;
 			flex: 0 0 auto;
@@ -131,7 +131,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 		:host([active]) #button {
 			color: var(--tc_primary);
 		}
-	`}export class TabContent extends ShadowComponent{static properties={active:{type:Boolean,reflect:!0,converter:boolExists},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return html`<slot></slot>`}static styles=css`
+	`}export class TabContent extends o{static properties={active:{type:Boolean,reflect:!0,converter:s},name:{type:String,reflect:!0}};constructor(){super(),this.active=!1,this.name=""}get tabs(){return"K-TABS"===this.parentElement?.tagName?this.parentElement:null}render(){return t`<slot></slot>`}static styles=e`
 		:host {
 			display: block;
 			height: 100%;
@@ -148,9 +148,9 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 		:host(:not([active])) {
 			display: none;
 		}
-	`}export class TabSpacer extends ShadowComponent{constructor(){super(),this.slot="tabs"}static styles=css`
+	`}export class TabSpacer extends o{constructor(){super(),this.slot="tabs"}static styles=e`
 		:host {
 			flex: 1 1 auto !important;
 			height: 1px;
 		}
-	`;render(){return html`<slot></slot>`}}customElements.define("k-tabs",Tabs),customElements.define("k-tab",Tab),customElements.define("k-tab-content",TabContent),customElements.define("k-tab-spacer",TabSpacer);export default{Tab:Tab,TabContent:TabContent,Tabs:Tabs,TabSpacer:TabSpacer};
+	`;render(){return t`<slot></slot>`}}customElements.define("k-tabs",Tabs),customElements.define("k-tab",Tab),customElements.define("k-tab-content",TabContent),customElements.define("k-tab-spacer",TabSpacer);export default{Tab:Tab,TabContent:TabContent,Tabs:Tabs,TabSpacer:TabSpacer};

package/docs/src/components/Tags.js

@@ -1,4 +1,4 @@
-import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Tags extends ShadowComponent{static properties={value:{type:String,reflect:!0},allowedTags:{type:String,reflect:!0,attribute:"allowed-tags"},disallowedTags:{type:String,reflect:!0,attribute:"disallowed-tags"},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.value="",this.allowedTags="",this.disallowedTags="",this.disabled=!1}firstUpdated(){super.firstUpdated(),this.renderTags()}updated(t){if(super.updated(t),t.has("value")){const e=t.get("value"),a=this.validateTags();a!==this.value?this.value=a:(this.dispatchEvent(new CustomEvent("change",{detail:{oldValue:e,newValue:this.value},bubbles:!0})),this.renderTags())}if(t.has("allowedTags")||t.has("disallowedTags")){const e=t.get("allowedTags")||t.get("disallowedTags"),a=this.allowedTags||this.disallowedTags,s=this.validateTags();if(s!==this.value)this.value=s;else{const s=t.has("allowedTags")?"allowedtagschange":"disallowedtagschange";this.dispatchEvent(new CustomEvent(s,{detail:{oldValue:e,newValue:a},bubbles:!0})),this.renderTags()}}}handleInputChange=()=>{if(this.disabled)return;const t=this.shadowRoot.getElementById("tagsInput"),e=t.value.trim();e&&(this.addTag(e),t.value="")};handleInputInput=t=>{if(!this.disabled&&(","===t.data||"insertFromPaste"===t.inputType)){const t=this.shadowRoot.getElementById("tagsInput"),e=t.value.split(",").filter(t=>!!t.trim());e.length&&(e.forEach(t=>this.addTag(t.trim())),t.value="")}};async renderTags(){await this.updateComplete;const t=this.shadowRoot.getElementById("tags");t.innerHTML="",this.value&&this.value.split(",").forEach(e=>{const a=new Tag(e.trim(),this);t.appendChild(a)})}addTag(t){const e=new Set(this.value.split(",").filter(t=>!!t.trim()));e.add(t.trim()),this.value=[...e].filter(t=>!!t).join(","),this.dispatchEvent(new CustomEvent("addtag",{detail:{tag:t},bubbles:!0}))}removeTag(t){const e=new Set(this.value.split(",").filter(t=>!!t.trim()));e.delete(t),this.value=[...e].join(","),this.dispatchEvent(new CustomEvent("removetag",{detail:{tag:t},bubbles:!0}))}validateTags(){return this.value.split(",").map(t=>t.trim()).map(t=>{const e=new Set(this.allowedTags.split(",").filter(t=>!!t.trim()));if(e.size)return e.has(t)?t:"";const a=new Set(this.disallowedTags.split(",").filter(t=>!!t.trim()));return a.size&&a.has(t)?"":t}).filter(t=>!!t).join(",")}static styles=css`
+import{html as t,css as e}from"../lit-all.min.js";import a from"./ShadowComponent.js";export default class s extends a{static properties={value:{type:String,reflect:!0},allowedTags:{type:String,reflect:!0,attribute:"allowed-tags"},disallowedTags:{type:String,reflect:!0,attribute:"disallowed-tags"},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.value="",this.allowedTags="",this.disallowedTags="",this.disabled=!1}firstUpdated(){super.firstUpdated(),this.renderTags()}updated(t){if(super.updated(t),t.has("value")){const e=t.get("value"),a=this.validateTags();a!==this.value?this.value=a:(this.dispatchEvent(new CustomEvent("change",{detail:{oldValue:e,newValue:this.value},bubbles:!0})),this.renderTags())}if(t.has("allowedTags")||t.has("disallowedTags")){const e=t.get("allowedTags")||t.get("disallowedTags"),a=this.allowedTags||this.disallowedTags,s=this.validateTags();if(s!==this.value)this.value=s;else{const s=t.has("allowedTags")?"allowedtagschange":"disallowedtagschange";this.dispatchEvent(new CustomEvent(s,{detail:{oldValue:e,newValue:a},bubbles:!0})),this.renderTags()}}}handleInputChange=()=>{if(this.disabled)return;const t=this.shadowRoot.getElementById("tagsInput"),e=t.value.trim();e&&(this.addTag(e),t.value="")};handleInputInput=t=>{if(!this.disabled&&(","===t.data||"insertFromPaste"===t.inputType)){const t=this.shadowRoot.getElementById("tagsInput"),e=t.value.split(",").filter(t=>!!t.trim());e.length&&(e.forEach(t=>this.addTag(t.trim())),t.value="")}};async renderTags(){await this.updateComplete;const t=this.shadowRoot.getElementById("tags");t.innerHTML="",this.value&&this.value.split(",").forEach(e=>{const a=new i(e.trim(),this);t.appendChild(a)})}addTag(t){const e=new Set(this.value.split(",").filter(t=>!!t.trim()));e.add(t.trim()),this.value=[...e].filter(t=>!!t).join(","),this.dispatchEvent(new CustomEvent("addtag",{detail:{tag:t},bubbles:!0}))}removeTag(t){const e=new Set(this.value.split(",").filter(t=>!!t.trim()));e.delete(t),this.value=[...e].join(","),this.dispatchEvent(new CustomEvent("removetag",{detail:{tag:t},bubbles:!0}))}validateTags(){return this.value.split(",").map(t=>t.trim()).map(t=>{const e=new Set(this.allowedTags.split(",").filter(t=>!!t.trim()));if(e.size)return e.has(t)?t:"";const a=new Set(this.disallowedTags.split(",").filter(t=>!!t.trim()));return a.size&&a.has(t)?"":t}).filter(t=>!!t).join(",")}static styles=e`
 		:host {
 			display: block;
 		}
@@ -45,7 +45,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 			transition: none;
 			box-shadow: 0 0 0 transparent;
 		}
-	`;render(){return html`
+	`;render(){return t`
 			<label for="tagsInput">
 				<slot></slot>
 				<div id="tagsHolder">
@@ -58,7 +58,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 					/>
 				</div>
 			</label>
-		`}}class Tag extends ShadowComponent{constructor(t,e){super(),this.tag=t,this.tagsComponent=e,this.innerHTML=t}handleClick=()=>{this.tagsComponent.disabled||this.tagsComponent.removeTag(this.tag)};static styles=css`
+		`}}class i extends a{constructor(t,e){super(),this.tag=t,this.tagsComponent=e,this.innerHTML=t}handleClick=()=>{this.tagsComponent.disabled||this.tagsComponent.removeTag(this.tag)};static styles=e`
 		:host {
 			display: inline-block;
 			width: min-content;
@@ -72,4 +72,4 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
 		:host(:hover) {
 			text-decoration: line-through;
 		}
-	`;render(){return html`<span @click=${this.handleClick}><slot></slot></span>`}}customElements.define("k-tags",Tags),customElements.define("k-tag",Tag);
+	`;render(){return t`<span @click=${this.handleClick}><slot></slot></span>`}}customElements.define("k-tags",s),customElements.define("k-tag",i);

package/docs/src/components/ThemeSelect.js

@@ -1,12 +1,12 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import theme from"../utils/theme.js";export default class ThemeSelect extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=theme.get()}handleChange=e=>{theme.set(e.target.value)};connectedCallback(){super.connectedCallback(),this.unsubscribe=theme.subscribe(e=>{this.currentTheme=e})}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribe&&this.unsubscribe()}render(){const e=this.childNodes.length>0;return html`
-			${e?html`<label><slot></slot></label>`:""}
+import e from"./ShadowComponent.js";import{html as t,css as s}from"../lit-all.min.js";import r from"../utils/theme.js";export default class l extends e{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=r.get()}handleChange=e=>{r.set(e.target.value)};connectedCallback(){super.connectedCallback(),this.unsubscribe=r.subscribe(e=>{this.currentTheme=e})}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribe&&this.unsubscribe()}render(){const e=this.childNodes.length>0;return t`
+			${e?t`<label><slot></slot></label>`:""}
 			<select @change=${this.handleChange} .value=${this.currentTheme}>
 				<option value="light">Light</option>
 				<option value="dark">Dark</option>
 				<option value="auto">System Default</option>
 			</select>
-		`}static styles=css`
+		`}static styles=s`
 		:host {
 			display: block;
 		}
-	`;static setTheme(e){theme.set(e)}static getCurrentTheme(){return theme.get()}static getCalculatedCurrentTheme(){return theme.getCalculated()}}customElements.define("k-theme-select",ThemeSelect);
+	`;static setTheme(e){r.set(e)}static getCurrentTheme(){return r.get()}static getCalculatedCurrentTheme(){return r.getCalculated()}}customElements.define("k-theme-select",l);

package/docs/src/components/ThemeSwitcher.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import theme from"../utils/theme.js";import"./Icon.js";export default class ThemeSwitcher extends ShadowComponent{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=theme.get()}handleClick=()=>{const e=theme.get();"auto"===e&&theme.set("light"),"light"===e&&theme.set("dark"),"dark"===e&&theme.set("auto")};connectedCallback(){super.connectedCallback(),this.unsubscribe=theme.subscribe(e=>{this.currentTheme=e})}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribe&&this.unsubscribe()}static styles=css`
+import t from"./ShadowComponent.js";import{html as e,css as r}from"../lit-all.min.js";import s from"../utils/theme.js";import"./Icon.js";export default class n extends t{static properties={currentTheme:{type:String,reflect:!0,attribute:"current-theme"}};constructor(){super(),this.currentTheme=s.get()}handleClick=()=>{const t=s.get();"auto"===t&&s.set("light"),"light"===t&&s.set("dark"),"dark"===t&&s.set("auto")};connectedCallback(){super.connectedCallback(),this.unsubscribe=s.subscribe(t=>{this.currentTheme=t})}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribe&&this.unsubscribe()}static styles=r`
 		:host {
 			--padding: var(--spacer);
 			display: flex;
@@ -6,14 +6,14 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		button {
 			padding: var(--padding);
 		}
-	`;render(){const e="auto"===this.currentTheme?"mode-auto":"light"===this.currentTheme?"mode-light":"mode-dark";return html`
+	`;render(){const t="auto"===this.currentTheme?"mode-auto":"light"===this.currentTheme?"mode-light":"mode-dark";return e`
 			<button
 				class="no-btn"
 				@click=${this.handleClick}
 			>
-				<k-icon name=${e}></k-icon>
+				<k-icon name=${t}></k-icon>
 			</button>
-		`}static styles=css`
+		`}static styles=r`
 		:host {
 			--padding: var(--spacer, 1rem);
 		}
@@ -21,4 +21,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			padding: var(--padding);
 			border-radius: var(--radius);
 		}
-	`;static setTheme(e){theme.set(e)}static getCurrentTheme(){return theme.get()}static getCalculatedCurrentTheme(){return theme.getCalculated()}}customElements.define("k-theme-switcher",ThemeSwitcher);
+	`;static setTheme(t){s.set(t)}static getCurrentTheme(){return s.get()}static getCalculatedCurrentTheme(){return s.getCalculated()}}customElements.define("k-theme-switcher",n);

package/docs/src/components/Timestamp.js

@@ -1 +1 @@
-import{html}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import formatTimestamp from"../utils/formatTimestamp.js";export default class Timestamp extends ShadowComponent{static properties={timestamp:{type:Number,reflect:!0},format:{type:String,reflect:!0},locale:{type:String,reflect:!0}};constructor(){super(),this.timestamp=0,this.format="",this.locale=""}render(){const t=this.timestamp?formatTimestamp(this.timestamp,this.format,this.locale||navigator.language):"";return html`<span>${t}</span>`}}window.customElements.define("k-timestamp",Timestamp);
+import{html as t}from"../lit-all.min.js";import e from"./ShadowComponent.js";import s from"../utils/formatTimestamp.js";export default class m extends e{static properties={timestamp:{type:Number,reflect:!0},format:{type:String,reflect:!0},locale:{type:String,reflect:!0}};constructor(){super(),this.timestamp=0,this.format="",this.locale=""}render(){const e=this.timestamp?s(this.timestamp,this.format,this.locale||navigator.language):"";return t`<span>${e}</span>`}}window.customElements.define("k-timestamp",m);

package/docs/src/components/Toast.js

@@ -1,4 +1,4 @@
-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`
+import{html as t,css as o}from"../lit-all.min.js";import e from"./ShadowComponent.js";import"./Icon.js";export default class n extends e{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=o`
     @keyframes toast-show-bottom {
       from { opacity: 0; transform: translateY(20px); }
       to { opacity: 1; transform: translateY(0); }
@@ -125,7 +125,7 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       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`
+  `;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 t`
       <div id="icon">
         <slot name="icon"></slot>
       </div>
@@ -138,4 +138,4 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       <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: 90;\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);
+    `}static create(t,o={}){let{position:e="auto",removeOnClose:s=!0,closeCallback:a=()=>{},action:r=!1,close:c=!1,icon:l=!1,timeout:m=5e3}=o;"auto"===e&&(e=window.innerWidth<=768?"bottom center":"top right");let h=document.querySelector(`k-toast-container[position="${e}"]`);h||(h=new i(e),document.body.appendChild(h));const p=new n;p.position=e,p.timeout=m,p.innerHTML=t,p.actionCallback=o.actionCallback||(()=>{});const d=a;if(p.closeCallback=(...t)=>{s&&(p.remove(),0===h.children.length&&h.remove()),d(...t)},l){const t=document.createElement("span");t.slot="icon",l instanceof HTMLElement?t.appendChild(l):t.innerHTML=l,p.appendChild(t)}if(r){const t=document.createElement("span");t.slot="action",r instanceof HTMLElement?t.appendChild(r):t.innerHTML=r,p.appendChild(t)}if(c){const t=document.createElement("span");t.slot="close",c instanceof HTMLElement?t.appendChild(c):t.innerHTML=c,p.appendChild(t)}return h.appendChild(p),p.open(),p}static success(t,o={}){const e=n.create(t,{icon:'<k-icon name="check"></k-icon>',...o});return e.classList.add("bg-success"),e}static warning(t,o={}){const e=n.create(t,{icon:'<k-icon name="warning"></k-icon>',...o});return e.classList.add("bg-warning"),e}static error(t,o={}){const e=n.create(t,{icon:'<k-icon name="error"></k-icon>',...o});return e.classList.add("bg-danger"),e}}class i 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: 90;\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 i(t),document.body.appendChild(o)),o}}window.customElements.define("k-toast",n),window.customElements.define("k-toast-container",i);

package/docs/src/components/Toggle.js

@@ -1,11 +1,11 @@
-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},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.value=!1,this.disabled=!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.disabled||this.toggle()};handleKeyDown=e=>{this.disabled||["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`
+import{html as e,css as a}from"../lit-all.min.js";import t from"./ShadowComponent.js";export default class i extends t{static properties={value:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}};constructor(){super(),this.value=!1,this.disabled=!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.disabled||this.toggle()};handleKeyDown=e=>{this.disabled||["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 e`
       <div id="switch">
         <div id="handle"></div>
       </div>
       <label id="label">
         <slot></slot>
       </label>
-    `}static styles=css`
+    `}static styles=a`
     :host {
       --switch_height: 2rem;
       --switch_width: 3rem;
@@ -79,4 +79,4 @@ import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComp
       flex: 1 1 auto;
       padding: 0;
     }
-  `}window.customElements.define("k-toggle",Toggle);
+  `}window.customElements.define("k-toggle",i);

package/docs/src/components/Tree.js

@@ -1,24 +1,24 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";let nodeTagCounter=0;export default class Tree extends ShadowComponent{static properties={data:{type:Object},depth:{type:Number,reflect:!0},editable:{type:Boolean,converter:boolExists,attribute:"editable",reflect:!0}};constructor(){super(),this.data=null,this.depth=0,this.editable=!1}render(){if(null===this.data||void 0===this.data)return html`<slot></slot>`;if(Tree.nodes.find(e=>e.detect(this.data)))return html`
+import e from"./ShadowComponent.js";import{html as t,css as s}from"../lit-all.min.js";import{boolExists as n}from"../utils/propConverters.js";import"./Icon.js";let r=0;export default class a extends e{static properties={data:{type:Object},depth:{type:Number,reflect:!0},editable:{type:Boolean,converter:n,attribute:"editable",reflect:!0}};constructor(){super(),this.data=null,this.depth=0,this.editable=!1}render(){if(null===this.data||void 0===this.data)return t`<slot></slot>`;if(a.nodes.find(e=>e.detect(this.data)))return t`
 				<div class="tree-root">
-					${Tree.renderValue(this.data,null,0,this.depth)}
+					${a.renderValue(this.data,null,0,this.depth)}
 				</div>
-			`;const e=Array.isArray(this.data)?this.data.map((e,t)=>[t,e]):"object"==typeof this.data?Object.entries(this.data):null;return html`
+			`;const e=Array.isArray(this.data)?this.data.map((e,t)=>[t,e]):"object"==typeof this.data?Object.entries(this.data):null;return t`
 			<div class="tree-root">
-				${e?e.map(([e,t])=>Tree.renderValue(t,e,1,this.depth)):Tree.renderValue(this.data,null,0,this.depth)}
+				${e?e.map(([e,t])=>a.renderValue(t,e,1,this.depth)):a.renderValue(this.data,null,0,this.depth)}
 			</div>
-		`}static nodes=[];static addNode=(...e)=>{[...e].reverse().forEach(e=>{Object.prototype.hasOwnProperty.call(e,"nodeTag")||(e.nodeTag="k-tree-node-"+nodeTagCounter++,window.customElements.define(e.nodeTag,e)),Tree.nodes.unshift(e)})};static renderValue(e,t=null,s=0,n=0){const r=Tree.nodes.find(t=>t.detect(e));if(r&&r.prototype.getChildren===TreeNode.prototype.getChildren){const s=null!==t?html`<span class="${"number"==typeof t?"tc-muted":""}">${t}: </span>`:"";return html`<span class="d-b">${s}${new r(e).renderLabel()}</span>`}const o=document.createElement((r??TreeNode).nodeTag);return o.value=e,o.key=t,o.depth=s,o.maxDepth=n,o}}window.customElements.define("k-tree",Tree);export class TreeNode extends ShadowComponent{static nodeTag="k-tree-node";static properties={value:{type:Object},key:{attribute:!1},depth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:boolExists,reflect:!0},icon:{type:String}};constructor(e){super(),this.value=void 0!==e?e:null,this.key=null,this.depth=0,this.maxDepth=0,this.opened=!1,this.icon=null}connectedCallback(){super.connectedCallback(),this.depth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};renderLabel(){return"object"==typeof this.value&&null!==this.value?html`${Array.isArray(this.value)?"Array":"Object"}`:html`${this.value}`}getChildren(){return"object"!=typeof this.value||null===this.value?null:Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)}renderIcon(){return this.icon?html`<k-icon name="${this.icon}"></k-icon>`:html`<k-icon name="chevron" class="toggle-icon" direction="${this.opened?"down":"right"}"></k-icon>`}render(){const e=this.getChildren(),t=null!==this.key?html`<span class="${"number"==typeof this.key?"tc-muted":""}">${this.key}: </span>`:"";return e?html`
+		`}static nodes=[];static addNode=(...e)=>{[...e].reverse().forEach(e=>{Object.prototype.hasOwnProperty.call(e,"nodeTag")||(e.nodeTag="k-tree-node-"+r++,window.customElements.define(e.nodeTag,e)),a.nodes.unshift(e)})};static renderValue(e,s=null,n=0,r=0){const o=a.nodes.find(t=>t.detect(e));if(o&&o.prototype.getChildren===TreeNode.prototype.getChildren){const n=null!==s?t`<span class="${"number"==typeof s?"tc-muted":""}">${s}: </span>`:"";return t`<span class="d-b">${n}${new o(e).renderLabel()}</span>`}const d=document.createElement((o??TreeNode).nodeTag);return d.value=e,d.key=s,d.depth=n,d.maxDepth=r,d}}window.customElements.define("k-tree",a);export class TreeNode extends e{static nodeTag="k-tree-node";static properties={value:{type:Object},key:{attribute:!1},depth:{type:Number},maxDepth:{type:Number},opened:{type:Boolean,converter:n,reflect:!0},icon:{type:String}};constructor(e){super(),this.value=void 0!==e?e:null,this.key=null,this.depth=0,this.maxDepth=0,this.opened=!1,this.icon=null}connectedCallback(){super.connectedCallback(),this.depth<=this.maxDepth&&(this.opened=!0)}get tree(){return this.closest("k-tree")}toggle=()=>{this.opened=!this.opened};renderLabel(){return"object"==typeof this.value&&null!==this.value?t`${Array.isArray(this.value)?"Array":"Object"}`:t`${this.value}`}getChildren(){return"object"!=typeof this.value||null===this.value?null:Array.isArray(this.value)?this.value.map((e,t)=>[t,e]):Object.entries(this.value)}renderIcon(){return this.icon?t`<k-icon name="${this.icon}"></k-icon>`:t`<k-icon name="chevron" class="toggle-icon" direction="${this.opened?"down":"right"}"></k-icon>`}render(){const e=this.getChildren(),s=null!==this.key?t`<span class="${"number"==typeof this.key?"tc-muted":""}">${this.key}: </span>`:"";return e?t`
 			<div>
 				<button class="branch-label no-btn" @click=${this.toggle} aria-expanded="${this.opened}">
 					${this.renderIcon()}
-					${t}${this.renderLabel()}
+					${s}${this.renderLabel()}
 				</button>
-				${this.opened?html`
+				${this.opened?t`
 					<div class="pl">
-						${e.map(([e,t])=>Tree.renderValue(t,e,this.depth+1,this.maxDepth))}
+						${e.map(([e,t])=>a.renderValue(t,e,this.depth+1,this.maxDepth))}
 					</div>
 				`:""}
 			</div>
-		`:html`<span class="d-b">${t}${this.renderLabel()}</span>`}static styles=css`
+		`:t`<span class="d-b">${s}${this.renderLabel()}</span>`}static styles=s`
 		:host{
 			display: block;
 		}
@@ -33,4 +33,4 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 		.branch-label:focus-visible{
 			box-shadow: var(--focus_shadow);
 		}
-	`;static detect=()=>!1}window.customElements.define("k-tree-node",TreeNode);export class StringNode extends TreeNode{renderLabel(){return html`<span class="tc-success">"${this.value}"</span>`}static detect=e=>"string"==typeof e}export class NumberNode extends TreeNode{renderLabel(){return html`<span class="tc-primary">${this.value}</span>`}static detect=e=>"number"==typeof e}export class BooleanNode extends TreeNode{renderLabel(){return html`<span class="${this.value?"tc-success":"tc-danger"}">${this.value}</span>`}static detect=e=>"boolean"==typeof e}export class NullNode extends TreeNode{renderLabel(){return html`<span class="tc-muted">null</span>`}static detect=e=>null===e}export class UndefinedNode extends TreeNode{renderLabel(){return html`<span class="tc-muted">undefined</span>`}static detect=e=>void 0===e}Tree.addNode(StringNode,NumberNode,BooleanNode,NullNode,UndefinedNode);
+	`;static detect=()=>!1}window.customElements.define("k-tree-node",TreeNode);export class StringNode extends TreeNode{renderLabel(){return t`<span class="tc-success">"${this.value}"</span>`}static detect=e=>"string"==typeof e}export class NumberNode extends TreeNode{renderLabel(){return t`<span class="tc-primary">${this.value}</span>`}static detect=e=>"number"==typeof e}export class BooleanNode extends TreeNode{renderLabel(){return t`<span class="${this.value?"tc-success":"tc-danger"}">${this.value}</span>`}static detect=e=>"boolean"==typeof e}export class NullNode extends TreeNode{renderLabel(){return t`<span class="tc-muted">null</span>`}static detect=e=>null===e}export class UndefinedNode extends TreeNode{renderLabel(){return t`<span class="tc-muted">undefined</span>`}static detect=e=>void 0===e}a.addNode(StringNode,NumberNode,BooleanNode,NullNode,UndefinedNode);

package/docs/src/components/htmlEditorControls/AlignCenter.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class AlignCenter extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignCenter()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.alignCenter()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_align_center"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-align-center",AlignCenter);
+		`}}customElements.define("k-hec-align-center",i);

package/docs/src/components/htmlEditorControls/AlignJustify.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class AlignJustify extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignJustify()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.alignJustify()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_align_justify"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-align-justify",AlignJustify);
+		`}}customElements.define("k-hec-align-justify",i);

package/docs/src/components/htmlEditorControls/AlignLeft.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class AlignLeft extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignLeft()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.alignLeft()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_align_left"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-align-left",AlignLeft);
+		`}}customElements.define("k-hec-align-left",i);

package/docs/src/components/htmlEditorControls/AlignRight.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class AlignRight extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.alignRight()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.alignRight()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_align_right"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-align-right",AlignRight);
+		`}}customElements.define("k-hec-align-right",i);

package/docs/src/components/htmlEditorControls/Bold.js

@@ -1,12 +1,12 @@
-import HtmlEditorControl from"./HtmlEditorControl.js";import{html,css}from"../../lit-all.min.js";import"../Icon.js";export default class Bold extends HtmlEditorControl{static properties={editorMode:{type:String,state:!0}};static styles=[HtmlEditorControl.styles,css`
+import t from"./HtmlEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static properties={editorMode:{type:String,state:!0}};static styles=[t.styles,o`
 			:host {
 				display: inline-flex;
 			}
-		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleClick=()=>{this.editor&&this.editor.bold()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,html`
-			<button class="${this.buttonClasses}" @click="${this.handleClick}">
+		`];connectedCallback(){super.connectedCallback(),this.updateEditorMode(),this.editor?.addEventListener("mode-changed",()=>this.updateEditorMode())}handleMouseDown=t=>{t.preventDefault(),t.stopPropagation(),this.editor&&this.editor.bold()};updateEditorMode(){this.editor&&(this.editorMode=this.editor.mode)}render(){return this.hidden="code"===this.editorMode,e`
+			<button class="${this.buttonClasses}" @mousedown="${this.handleMouseDown}">
 				<slot name="icon">
 					<k-icon name="format_bold"></k-icon>
 				</slot>
 				<slot></slot>
 			</button>
-		`}}customElements.define("k-hec-bold",Bold);
+		`}}customElements.define("k-hec-bold",s);