kempo-ui 0.4.19 → 0.4.21

package/dist/components/markdownEditorControls/FormatBlock.js

@@ -1,30 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e,css as s}from"../../lit-all.min.js";import"../Icon.js";const a={h1:"Heading 1",h2:"Heading 2",h3:"Heading 3",h4:"Heading 4",h5:"Heading 5",h6:"Heading 6"},i={h1:"format_h1",h2:"format_h2",h3:"format_h3",h4:"format_h4",h5:"format_h5",h6:"format_h6"};export default class o extends t{static properties={...t.properties,tag:{type:String,reflect:!0}};constructor(){super(),this.tag="h2",this.label=""}command(){const t=(this.tag||"h2").toLowerCase();if(/^h[1-6]$/.test(t)){const e=parseInt(t.slice(1),10);this.insertLinePrefix("#".repeat(e)+" ",/^#{1,6} /)}}get#t(){return this.label?this.label:a[(this.tag||"h2").toLowerCase()]||this.tag}get#e(){return i[(this.tag||"h2").toLowerCase()]||"format_h2"}render(){return e`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.#t}
-        aria-label=${this.#t}
-        @click=${this.handleClick}
-      >
-        <k-icon name=${this.#e}></k-icon>
-        <span class="fb-label">${this.#t}</span>
-      </button>
-    `}static styles=[t.styles,s`
-      :host {
-        display: inline-flex;
-      }
-      .ctrl {
-        gap: 0.5rem;
-        justify-content: flex-start;
-        white-space: nowrap;
-      }
-      /* When this is slotted into something that stretches it (a menu),
-         the button fills the row instead of staying compact. */
-      :host([slot]) .ctrl,
-      :host(*) .ctrl {
-        width: 100%;
-      }
-      .fb-label {
-        font-size: 0.875rem;
-      }
-    `]}customElements.define("k-md-format-block",o);

package/dist/components/markdownEditorControls/Heading.js

@@ -1,11 +0,0 @@
-import e from"./MarkdownEditorControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";import{bound as i}from"../../utils/number.js";export default class r extends e{static properties={...e.properties,level:{type:Number,reflect:!0}};constructor(){super(),this.level=2,this.label="Heading"}command(){const e=i(Number(this.level)||2,1,6);this.insertLinePrefix("#".repeat(e)+" ",/^#{1,6} /)}render(){const e=i(Number(this.level)||2,1,6);return t`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title="${this.label} ${e}"
-        aria-label="${this.label} ${e}"
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_h${e}"></k-icon>
-      </button>
-    `}}customElements.define("k-md-heading",r);

package/dist/components/markdownEditorControls/Image.js

@@ -1,93 +0,0 @@
-import e from"./MarkdownEditorControl.js";import{html as t,css as o}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";import r from"../Dialog.js";export default class i extends e{static properties={...e.properties,popup:{type:String,reflect:!0}};constructor(){super(),this.label="Image",this.popup="dropdown"}command(){"dialog"===this.popup&&this.#e()}#t(e,t){return!!e&&(this.editor?.replaceSelection(`![${t}](${e})`,{selectInserted:!1}),!0)}handleDropdownOpened=()=>{requestAnimationFrame(()=>{this.#o?.focus();const e=this.getSelection();this.#r&&(this.#r.value=e.text||"")})};handleDropdownClosed=()=>{this.#o&&(this.#o.value=""),this.#r&&(this.#r.value="")};handleFormKeydown=e=>{"Enter"===e.key?(e.preventDefault(),this.#i()):"Escape"===e.key&&this.shadowRoot?.querySelector("k-dropdown")?.close()};handleInsertClick=()=>this.#i();handleCancelClick=()=>{this.shadowRoot?.querySelector("k-dropdown")?.close()};#i(){const e=this.#o?.value.trim()||"",t=this.#r?.value.trim()||"";e?(this.#t(e,t),this.shadowRoot?.querySelector("k-dropdown")?.close()):this.#o?.focus()}get#o(){return this.shadowRoot?.querySelector(".image-url")}get#r(){return this.shadowRoot?.querySelector(".image-alt")}#e(){if(!this.editor)return;const e=this.getSelection(),t=document.createElement("input");t.type="url",t.placeholder="https://example.com/image.png",t.required=!0,t.style.cssText="padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;";const o=document.createElement("input");o.type="text",o.placeholder="Description for screen readers",o.value=e.text||"",o.style.cssText="padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;";const i=document.createElement("div");i.className="p",i.style.cssText="display: flex; flex-direction: column; gap: 1rem;",i.innerHTML='\n      <div style="display: flex; flex-direction: column; gap: 0.25rem;">\n        <label style="font-weight: bold;">Image URL</label>\n      </div>\n      <div style="display: flex; flex-direction: column; gap: 0.25rem;">\n        <label style="font-weight: bold;">Alt text</label>\n      </div>\n    ',i.children[0].appendChild(t),i.children[1].appendChild(o),r.create(i,{title:"Insert Image",cancelText:"Cancel",confirmText:"Insert",confirmClasses:"success ml",confirmAction:e=>{const r=t.value.trim();if(!r)return e.keepDialogOpen=!0,void t.focus();this.#t(r,o.value.trim())}}),queueMicrotask(()=>t.focus())}render(){return"dialog"===this.popup?t`
-        <button
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-          @click=${this.handleClick}
-        >
-          <k-icon name="image"></k-icon>
-        </button>
-      `:t`
-      <k-dropdown
-        @opened=${this.handleDropdownOpened}
-        @closed=${this.handleDropdownClosed}
-      >
-        <button
-          slot="trigger"
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-        >
-          <k-icon name="image"></k-icon>
-        </button>
-        <div class="image-form" @keydown=${this.handleFormKeydown}>
-          <label>Image URL</label>
-          <input
-            class="image-url"
-            type="url"
-            required
-            placeholder="https://example.com/image.png"
-          />
-          <label>Alt text</label>
-          <input
-            class="image-alt"
-            type="text"
-            placeholder="Description for screen readers"
-          />
-          <div class="image-actions">
-            <button type="button" class="no-btn" @click=${this.handleCancelClick}>Cancel</button>
-            <button type="button" class="no-btn primary" @click=${this.handleInsertClick}>Insert</button>
-          </div>
-        </div>
-      </k-dropdown>
-    `}static styles=[e.styles,o`
-      .image-form {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        padding: 0.75rem;
-        min-width: 16rem;
-      }
-      .image-form label {
-        font-weight: bold;
-        font-size: 0.875rem;
-      }
-      .image-form input {
-        padding: 0.5rem;
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        font: inherit;
-        background: var(--c_bg);
-        color: var(--tc);
-      }
-      .image-form input:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-      .image-actions {
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.5rem;
-        margin-top: 0.25rem;
-      }
-      .image-actions button {
-        padding: 0.4rem 0.8rem;
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        background: var(--c_bg);
-        color: var(--tc);
-        cursor: pointer;
-        font: inherit;
-      }
-      .image-actions button.primary {
-        background: var(--c_primary);
-        color: white;
-        border-color: var(--c_primary);
-      }
-      .image-actions button:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-    `]}customElements.define("k-md-image",i);

package/dist/components/markdownEditorControls/Italic.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as i}from"../../lit-all.min.js";import"../Icon.js";export default class l extends t{constructor(){super(),this.label="Italic (Cmd/Ctrl+I)"}command(){this.wrapSelection("_","_","italic text")}render(){return i`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_italic"></k-icon>
-      </button>
-    `}}customElements.define("k-md-italic",l);

package/dist/components/markdownEditorControls/Link.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{constructor(){super(),this.label="Link"}command(){const t=this.getSelection(),e=this.editor;if(!e)return;const n=e.textarea;if(!n)return;const s=(t,s,l)=>{n.value=t,n.selectionStart=s,n.selectionEnd=l,n.focus(),e.value=t,n.dispatchEvent(new Event("input",{bubbles:!0}))},l=/\[([^\]]*)\]\([^)]*\)/g;let i;for(;null!==(i=l.exec(n.value));){const e=i.index,l=e+i[0].length;if(t.start>=e&&t.end<=l){const t=i[1];return void s(n.value.substring(0,e)+t+n.value.substring(l),e,e+t.length)}}const r=t.text||"link text",o=`[${r}](url)`,a=n.value.substring(0,t.start)+o+n.value.substring(t.end),u=t.start+1+r.length+2;s(a,u,u+3)}render(){return e`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="link"></k-icon>
-      </button>
-    `}}customElements.define("k-md-link",n);

package/dist/components/markdownEditorControls/MarkdownEditorControl.js

@@ -1,39 +0,0 @@
-import e from"../ShadowComponent.js";import{html as t,css as i}from"../../lit-all.min.js";export default class n extends e{static properties={btnClass:{type:String,attribute:"btn-class"},label:{type:String,reflect:!0},hidden:{type:Boolean,reflect:!0}};constructor(){super(),this.btnClass="no-btn ctrl",this.label="",this.hidesInPreviewMode=!0}connectedCallback(){super.connectedCallback();const e=this.editor;e&&(this.boundEditor=e,this.modeHandler=()=>{const e=this.hidesInPreviewMode&&"preview"===this.boundEditor.mode;this.hidden!==e&&(this.hidden=e)},this.modeHandler(),e.addEventListener("mode-change",this.modeHandler))}disconnectedCallback(){super.disconnectedCallback(),this.boundEditor&&this.modeHandler&&this.boundEditor.removeEventListener("mode-change",this.modeHandler),this.boundEditor=null,this.modeHandler=null}get editor(){const e=this.closest("k-markdown-editor");if(e)return e;const t=this.getRootNode();return t instanceof ShadowRoot&&"K-MARKDOWN-EDITOR"===t.host?.tagName?t.host:null}wrapSelection(e,t,i){this.editor?.wrapSelection(e,t,i)}insertAtCursor(e){this.editor?.insertAtCursor(e)}insertLinePrefix(e,t){this.editor?.insertLinePrefix(e,t)}replaceInSelectedLines(e,t){this.editor?.replaceInSelectedLines(e,t)}replaceSelection(e,t){this.editor?.replaceSelection(e,t)}getSelection(){return this.editor?.getSelection()||{start:0,end:0,text:""}}command(){}handleClick=e=>{e.preventDefault(),this.hidden||this.command()};render(){return t`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <slot>${this.label}</slot>
-      </button>
-    `}static styles=i`
-    :host {
-      display: inline-flex;
-    }
-    :host([hidden]) {
-      display: none;
-    }
-    .ctrl {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: var(--spacer_h);
-      border: 1px solid transparent;
-      border-radius: var(--radius);
-      background: transparent;
-      color: var(--tc_muted);
-      cursor: pointer;
-      font: inherit;
-      transition: background var(--animation_ms), color var(--animation_ms);
-    }
-    .ctrl:hover {
-      background: var(--c_bg__alt);
-      color: var(--tc);
-    }
-    .ctrl:focus-visible {
-      outline: none;
-      box-shadow: var(--focus_shadow);
-    }
-  `}customElements.define("k-md-control",n);

package/dist/components/markdownEditorControls/Menu.js

@@ -1,30 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";export default class s extends t{constructor(){super(),this.label="Menu"}command(){}render(){return e`
-      <k-dropdown>
-        <button
-          slot="trigger"
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-        >
-          <slot name="trigger">
-            <k-icon name="menu"></k-icon>
-          </slot>
-        </button>
-        <slot></slot>
-      </k-dropdown>
-    `}static styles=[t.styles,o`
-      :host {
-        display: inline-flex;
-      }
-      k-dropdown {
-        display: inline-flex;
-      }
-      /* Stretch slotted menu items so each one fills the dropdown
-         horizontally — Dropdown's built-in styles only target raw
-         <a>/<button> children, so custom-element items need this themselves. */
-      ::slotted(:not([slot="trigger"])) {
-        display: block;
-        width: 100%;
-      }
-    `]}customElements.define("k-md-menu",s);

package/dist/components/markdownEditorControls/NumberedList.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{constructor(){super(),this.label="Numbered list"}command(){const t=this.editor;if(!t)return;const e=t.textarea;e&&("write"!==t.mode&&(t.mode="write"),t.updateComplete.then(()=>{e.focus();const{selectionStart:n,selectionEnd:l,value:s}=e,i=s.lastIndexOf("\n",n-1)+1,r=s.indexOf("\n",l),o=-1===r?s.length:r,a=s.substring(i,o).split("\n"),c=/^\d+\. /,u=a.filter(t=>t.length>0);let d;if(u.length>0&&u.every(t=>c.test(t)))d=a.map(t=>t.replace(c,""));else{let t=1;d=a.map(e=>{if(!e)return e;const n=e.replace(c,"");return`${t++}. ${n}`})}const m=d.join("\n"),b=s.substring(0,i)+m+s.substring(o);e.value=b,e.selectionStart=i,e.selectionEnd=i+m.length,t.value=b,e.dispatchEvent(new Event("input",{bubbles:!0}))}))}render(){return e`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_list_numbered"></k-icon>
-      </button>
-    `}}customElements.define("k-md-numbered-list",n);

package/dist/components/markdownEditorControls/Quote.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{constructor(){super(),this.label="Quote"}command(){this.insertLinePrefix("> ")}render(){return e`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_quote"></k-icon>
-      </button>
-    `}}customElements.define("k-md-quote",o);

package/dist/components/markdownEditorControls/SpeechToText.js

@@ -1,16 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../SpeechToText.js";export default class s extends t{static properties={...t.properties,language:{type:String,reflect:!0},continuous:{type:Boolean,reflect:!0}};constructor(){super(),this.label="Speech to text",this.language="en-US",this.continuous=!1}command(){}handleEnd=t=>{const e=(t.detail?.text||"").trim();e&&this.editor?.replaceSelection(e+" ",{selectInserted:!1})};render(){return e`
-      <k-speech-to-text
-        language=${this.language}
-        ?continuous=${this.continuous}
-        @end=${this.handleEnd}
-      ></k-speech-to-text>
-    `}static styles=[t.styles,o`
-    :host {
-      margin: var(--spacer_q);
-    }
-      k-speech-to-text {
-        /* Shrink the default 2.5rem circular mic button so it sits
-           comfortably alongside other toolbar controls. */
-        --btn_size: 2rem;
-      }
-    `]}customElements.define("k-md-speech-to-text",s);

package/dist/components/markdownEditorControls/Strikethrough.js

@@ -1,11 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as r}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{constructor(){super(),this.label="Strikethrough"}command(){this.wrapSelection("~~","~~","strikethrough")}render(){return r`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_strikethrough"></k-icon>
-      </button>
-    `}}customElements.define("k-md-strikethrough",e);

package/dist/components/markdownEditorControls/Table.js

@@ -1,80 +0,0 @@
-import t from"./MarkdownEditorControl.js";import{html as e,css as r}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";import{bound as o}from"../../utils/number.js";export default class n extends t{constructor(){super(),this.label="Table"}command(){}handleDropdownOpened=()=>{requestAnimationFrame(()=>{const t=this.shadowRoot?.querySelector(".tbl-cols");t&&(t.value="3",t.select());const e=this.shadowRoot?.querySelector(".tbl-rows");e&&(e.value="2")})};handleFormKeydown=t=>{"Enter"===t.key?(t.preventDefault(),this.#t()):"Escape"===t.key&&this.shadowRoot?.querySelector("k-dropdown")?.close()};handleInsertClick=()=>this.#t();#t(){const t=this.#e(this.shadowRoot?.querySelector(".tbl-cols")?.value,1,20),e=this.#e(this.shadowRoot?.querySelector(".tbl-rows")?.value,1,50);if(!t||!e)return;const r=this.editor;r&&(r.replaceSelection(this.#r(t,e),{selectInserted:!1}),this.shadowRoot?.querySelector("k-dropdown")?.close())}#e(t,e,r){const n=parseInt(t,10);return Number.isFinite(n)?o(n,e,r):0}#r(t,e){const r=Array.from({length:t},(t,e)=>` Header ${e+1} `).join("|"),o=Array.from({length:t},()=>" --- ").join("|"),n=Array.from({length:t},()=>"   ").join("|");return`\n${[`|${r}|`,`|${o}|`,...Array.from({length:e},()=>`|${n}|`)].join("\n")}\n`}render(){return e`
-      <k-dropdown @opened=${this.handleDropdownOpened}>
-        <button
-          slot="trigger"
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-        >
-          <k-icon name="table"></k-icon>
-        </button>
-        <div class="tbl-form" @keydown=${this.handleFormKeydown}>
-          <input
-            class="tbl-cols"
-            type="number"
-            min="1"
-            max="20"
-            inputmode="numeric"
-            aria-label="Columns"
-            value="3"
-          />
-          <span class="tbl-x" aria-hidden="true">×</span>
-          <input
-            class="tbl-rows"
-            type="number"
-            min="1"
-            max="50"
-            inputmode="numeric"
-            aria-label="Rows"
-            value="2"
-          />
-          <button type="button" class="primary" @click=${this.handleInsertClick}>Insert</button>
-        </div>
-      </k-dropdown>
-    `}static styles=[t.styles,r`
-      .tbl-form {
-        display: flex;
-        align-items: center;
-        gap: 0.4rem;
-        padding: 0.5rem;
-      }
-      .tbl-form input {
-        width: 2.5rem;
-        padding: 0.35rem 0.4rem;
-        border: 1px solid var(--c_border);
-        border-radius: var(--radius);
-        font: inherit;
-        background: var(--c_bg);
-        color: var(--tc);
-        text-align: center;
-        /* Hide the up/down spinner buttons that take up extra width. */
-        -moz-appearance: textfield;
-      }
-      .tbl-form input::-webkit-inner-spin-button,
-      .tbl-form input::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-      .tbl-form input:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-      .tbl-x {
-        color: var(--tc_muted);
-        font-weight: bold;
-      }
-      .tbl-form button.primary {
-        padding: 0.4rem 0.8rem;
-        border: 1px solid var(--c_primary);
-        border-radius: var(--radius);
-        background: var(--c_primary);
-        color: white;
-        cursor: pointer;
-        font: inherit;
-      }
-      .tbl-form button.primary:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-    `]}customElements.define("k-md-table",n);

package/dist/components/paginationControls/FirstPage.js

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

package/dist/components/paginationControls/GotoPage.js

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

package/dist/components/paginationControls/ItemsPerPage.js

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

package/dist/components/paginationControls/LastPage.js

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

package/dist/components/paginationControls/NextPage.js

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

package/dist/components/paginationControls/PageCount.js

@@ -1 +0,0 @@
-import t from"./PaginationControl.js";import{html as n}from"../../lit-all.min.js";export default class e extends t{render(){return n`<span>${this.pagination?.totalPages??1}</span>`}}customElements.define("k-pg-count",e);

package/dist/components/paginationControls/PageInfo.js

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

package/dist/components/paginationControls/PaginationButtonControl.js

@@ -1,20 +0,0 @@
-import t from"../Button.js";import{css as e}from"../../lit-all.min.js";export default class n extends t{connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleActionClick);const t=this.pagination;t&&(this.boundPagination=t,this.pageChangeHandler=()=>this.requestUpdate(),t.addEventListener("page-change",this.pageChangeHandler),this.attrObserver=new MutationObserver(()=>this.requestUpdate()),this.attrObserver.observe(t,{attributes:!0,attributeFilter:["total-items","items-per-page","page-sizes"]}))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleActionClick),this.boundPagination&&this.pageChangeHandler&&this.boundPagination.removeEventListener("page-change",this.pageChangeHandler),this.attrObserver?.disconnect(),this.boundPagination=null,this.pageChangeHandler=null,this.attrObserver=null}get pagination(){return this.closest("k-pagination")||(this.getRootNode()instanceof ShadowRoot?this.getRootNode().host:null)}handleAction(){}handleActionClick=()=>this.handleAction();static styles=[t.styles,e`
-      :host {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-				background: transparent;
-				border: 1px solid var(--c_border);
-				padding: var(--spacer_h);
-				color: inherit;
-      }
-			:host(:not([disabled]):hover) {
-				background: oklch(from var(--c_bg__inv) l c h / 0.2);
-				color: inherit;
-			}
-			:host(:not([disabled]):focus),
-			:host(:not([disabled]):focus-visible) {
-				box-shadow: var(--focus_shadow);
-				z-index: 1;
-			}
-    `]}

package/dist/components/paginationControls/PaginationControl.js

@@ -1,5 +0,0 @@
-import e from"../ShadowComponent.js";import{css as t}from"../../lit-all.min.js";export default class a extends e{connectedCallback(){super.connectedCallback();const e=this.pagination;e&&(this.boundPagination=e,this.pageChangeHandler=()=>this.requestUpdate(),e.addEventListener("page-change",this.pageChangeHandler),this.attrObserver=new MutationObserver(()=>this.requestUpdate()),this.attrObserver.observe(e,{attributes:!0,attributeFilter:["total-items","items-per-page","page-sizes"]}))}disconnectedCallback(){super.disconnectedCallback(),this.boundPagination&&this.pageChangeHandler&&this.boundPagination.removeEventListener("page-change",this.pageChangeHandler),this.attrObserver?.disconnect(),this.boundPagination=null,this.pageChangeHandler=null,this.attrObserver=null}get pagination(){return this.closest("k-pagination")||(this.getRootNode()instanceof ShadowRoot?this.getRootNode().host:null)}static styles=t`
-    :host {
-      display: inline-flex;
-    }
-  `}

package/dist/components/paginationControls/PrevPage.js

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

package/dist/components/tableControls/DeleteRecord.js

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

package/dist/components/tableControls/DeleteSelected.js

@@ -1,7 +0,0 @@
-import e from"./TableControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class l extends e{deleteSelected=()=>{this.table.deleteSelected()};render(){return t`
-			<button class="no-btn icon-btn" title="Delete Selected" @click="${this.deleteSelected}">
-				<slot>
-					<k-icon name="delete_sweep"></k-icon>
-				</slot>
-			</button>
-		`}}customElements.define("k-tc-delete-selected",l);

package/dist/components/tableControls/Edit.js

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

package/dist/components/tableControls/ExportCSV.js

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

package/dist/components/tableControls/ExportJson.js

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

package/dist/components/tableControls/FieldSortHide.js

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

package/dist/components/tableControls/Filters.js

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

package/dist/components/tableControls/FirstPage.js

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

package/dist/components/tableControls/HiddenCount.js

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