kempo 2.9.4 → 2.10.1

package/dist/components/Dialog.js

@@ -1 +1 @@
-import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:s="success ml",confirmAction:i=(()=>{}),cancelText:l="",cancelClasses:c="",cancelAction:a=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:s,cancelText:l,cancelClasses:c}),this.registerProps({confirmAction:i,cancelAction:a,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n        z-index: 100;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 2rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 2rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,document.body.prepend(t),t.open()}static confirm(e,n,t={title:"Confirm"}){Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){const o=Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"});onEvent(o,"close",n)}}window.customElements.define("k-dialog",Dialog);
+import Component from"./Component.js";import"./FocusCapture.js";import"./Icon.js";import{firstFocusable,onEvent,offEvent,dispatchEvent}from"../utils/element.js";export default class Dialog extends Component{constructor({opened:e=!1,closeBtn:n=!0,overlayClose:t=!0,confirmText:o="",confirmClasses:i="success ml",confirmAction:s=(()=>{}),cancelText:l="",cancelClasses:a="",cancelAction:c=(()=>{}),closeCallback:r=(()=>{})}={}){super(),this.registerAttributes({opened:e,closeBtn:n,overlayClose:t,confirmText:o,confirmClasses:i,cancelText:l,cancelClasses:a}),this.registerProps({confirmAction:s,cancelAction:c,closeCallback:r,previousFocus:null,_clickHandler:e=>{const{target:{id:n}}=e;"overlay"==n&&this.overlayClose||"close"==n?this.close():"cancel"==n?(this.cancelAction(e),e.defaultPrevented||this.close()):"confirm"==n&&(this.confirmAction(e),e.defaultPrevented||this.close())},_keydownHandler:({keyCode:e})=>{27===e&&this.close()},_hasTitle:()=>!!this.querySelector('[slot="title"]')})}connectedCallback(){super.connectedCallback(),onEvent(this.shadowRoot,"click",this._clickHandler)}disconnectedCallback(){super.connectedCallback(),offEvent(this.shadowRoot,"click",this._clickHandler),offEvent(window,"keydown",this._keydownHandler)}attributeChangedCallback(e,n,t){super.attributeChangedCallback(e,n,t),"opened"===name&&dispatchEvent(this,t?"opened":"close")}open(){this.opened=!0;const e=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);e&&e.focus(),onEvent(window,"keydown",this._keydownHandler)}close(){this.opened=!1,this.blur(),this.closeCallback(),offEvent(window,"keydown",this._keydownHandler)}toggle(){this.opened?this.close():this.open()}focus(){const e=firstFocusable(this.shadowRoot);e&&(this.previousFocus=document.activeElement,e.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}get shadowTemplate(){return`\n      <k-focus-capture>\n        <button id="overlay" aria-label="Close the Dialog"></button>\n        <div id="wrapper">\n          <div\n            id="dialog"\n            role="dialog"\n            aria-modal="true"\n            aria-labelledby="title"\n          >\n            <div\n              id="header"\n              class="${this._hasTitle()?"has-title":""}"\n            >\n              <div\n                id="title"\n              ><slot name="title"></slot></div>\n              ${this.renderIf(this.closeBtn,'\n                <button\n                  id="close"\n                >\n                  <k-icon name="close"></k-icon>\n                </button>\n              ')}\n            </div>\n            <div id="body">\n              ${super.shadowTemplate}\n            </div>\n            ${this.renderIf(this.cancelText||this.confirmText,`\n              <div id="footer">\n                ${this.renderIf(this.cancelText,`\n                  <button id="cancel" class="${this.cancelClasses}">\n                    ${this.cancelText}\n                  </button>\n                `)}\n                ${this.renderIf(this.confirmText,`\n                  <button id="confirm" class="${this.confirmClasses}">\n                    ${this.confirmText}\n                  </button>\n                `)}\n              </div>\n            `)}\n          </div>\n        </div>\n      </k-focus-capture>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline;\n        height: 1px;\n        width: 1px;\n        position: fixed; /* The browser seems to sometimes lazy load this if its out of view, this seems to fix it*/\n        top: 0;\n        left: 0;\n        z-index: 100;\n      }\n      :host(:not([opened])){\n        display: none;\n      }\n      #overlay {\n        position: fixed;\n        width: 100vw;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        background-color: var(--c_overlay);\n        z-index: 100;\n        border: 0px solid transparent;\n        box-shadow: 0 0 0 transparent;\n      }\n      #wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: fixed;\n        width: 100%;\n        height: 100vh;\n        top: 0;\n        left: 0;\n        z-index: 101;\n        pointer-events: none;\n      }\n      #dialog {\n        display: flex;\n        flex-direction: column;\n        min-width: var(--min_width, 20rem);\n        width: var(--width, fit-content);\n        max-width: var(--max_width, calc(100vw - 4rem));\n        min-height: var(--min_height, 12rem);\n        height: var(--height, fit-content);\n        max-height: var(--max_height, calc(100vh - 4rem));\n        background-color: var(--c_bg);\n        box-shadow: var(--drop_shadow);\n        border-radius: var(--radius);\n        pointer-events: all;\n      }\n      #header {\n        display: flex;\n        align-items: center;\n      }\n      #header.has-title {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #title {\n        flex: 1 1 auto;\n      }\n      #close {\n        border: 0px;\n        background: transparent;\n        box-shadow: 0 0 0 transparent;\n        color: var(--tc);\n      }\n      #close k-icon {\n        pointer-events: none;\n      }\n      #body {\n        flex: 1 1 auto;\n      }\n      #footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: var(--spacer_h);\n      }\n    `}static renderOnChange=["opened","closeBtn","overlayClose","title","confirmText","cancelText"];static create(e="",n={}){!1!==n.closeExisting&&document.querySelectorAll("k-dialog").forEach((e=>e.close()));const t=new Dialog({opened:!0,...n});return onEvent(t,"close",t.remove),e instanceof HTMLElement||e instanceof DocumentFragment?t.appendChild(e):e instanceof NodeList?e.forEach((e=>t.appendChild(e))):t.innerHTML=e,n.width&&t.style.setProperty("--width",n.width),n.minWidth&&t.style.setProperty("--min_width",n.minWidth),n.maxWidth&&t.style.setProperty("--max_width",n.maxWidth),n.height&&t.style.setProperty("--height",n.height),n.minHeight&&t.style.setProperty("--min_height",n.minHeight),n.maxHeight&&t.style.setProperty("--max_height",n.maxHeight),document.body.prepend(t),t.open(),t}static confirm(e,n,t={title:"Confirm"}){return Dialog.create(`\n      <h5 slot="title" class="pyh px m0">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>n(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>n(!1)})}static error(e,n,t={title:"Error"}){const o=Dialog.create(`\n      <h5 slot="title" class="pyh px m0 tc-danger">${t.title}</h5>\n      <p class="p">${e}</p>\n    `,{...t,cancelText:"Ok"});return onEvent(o,"close",n),o}}window.customElements.define("k-dialog",Dialog);

package/dist/components/Icon.js

@@ -1 +1 @@
-import Component from"./Component.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise((async(e,n)=>{try{const n=await fetch(t);200===n.status&&e(await n.text())}catch(t){}return n()}))),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise((async(t,n)=>{let s;for(let t=0;t<Icon.pathToIcons.length&&!s;t++)s=await e(Icon.pathToIcons[t]);s?t(s):n("Icon not found")}))};export default class Icon extends Component{constructor(t=""){super(),this.registerAttributes({src:"",name:t})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await getIconByPath(this.src);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);
+import Component from"./Component.js";const cache={},getIconByPath=async t=>(cache[t]||(cache[t]=new Promise((async(e,n)=>{try{const n=await fetch(t);200===n.status&&e(await n.text())}catch(t){}return n()}))),await cache[t]),getIconByName=t=>{const e=async e=>getIconByPath(`${e}/${t}.svg`);return new Promise((async(t,n)=>{let c;for(let t=0;t<Icon.pathToIcons.length&&!c;t++)try{c=await e(Icon.pathToIcons[t])}catch(t){}c?t(c):n("Icon not found")}))};export default class Icon extends Component{constructor(t=""){super(),this.registerAttributes({src:"",name:t})}connectedCallback(){}async render(t){if(await super.render(t)){if(this.src){const t=await getIconByPath(this.src);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else if(this.name){const t=await getIconByName(this.name);t?(this.innerHTML=t,this.fixSVG()):this.innerHTML.length||(this.innerHTML=Icon.fallback)}else this.rendered=!1,this.innerHTML.length||(this.innerHTML=Icon.fallback);return!0}return!1}attributeChangedCallback(t,e,n){super.attributeChangedCallback(t,e,n),["src","name"].includes(t)&&n&&this.render(!0)}fixSVG(){const t=this.querySelector("svg");t.removeAttribute("width"),t.removeAttribute("height"),t.querySelectorAll("path, rect, circle").forEach((t=>{t.setAttribute("fill","currentColor")}))}get shadowStyles(){return"\n      :host {\n        display: inline-block;\n        vertical-align: bottom;\n      }\n      ::slotted(svg){\n        height: 1.35em;\n        vertical-align: middle;\n      }\n    "}static observedAttributes=["name","src"];static pathToIcons=["/icons"];static fallback='\n    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currnetColor" d="M480-79q-16 0-30.5-6T423-102L102-423q-11-12-17-26.5T79-480q0-16 6-31t17-26l321-321q12-12 26.5-17.5T480-881q16 0 31 5.5t26 17.5l321 321q12 11 17.5 26t5.5 31q0 16-5.5 30.5T858-423L537-102q-11 11-26 17t-31 6Zm0-80 321-321-321-321-321 321 321 321Zm-40-281h80v-240h-80v240Zm40 120q17 0 28.5-11.5T520-360q0-17-11.5-28.5T480-400q-17 0-28.5 11.5T440-360q0 17 11.5 28.5T480-320Zm0-160Z"/></svg>\n  '}window.customElements.define("k-icon",Icon);

package/dist/components/Search.js

@@ -1 +1 @@
-import Component from"./Component.js";import debounce from"../utils/debounce.js";const inputHandler=Symbol("inputHandler"),focusHandler=Symbol("focusHandler"),blurHandler=Symbol("blurHandler");export default class Search extends Component{constructor(){super(),this[inputHandler]=debounce((()=>{this.search(this.shadowRoot.getElementById("input").value)})),this[focusHandler]=()=>{this.opened=!0},this[blurHandler]=()=>{setTimeout((()=>{this.opened=!1}),100)},this.registerAttribute("opened",!1),this.registerProp("pages",{})}async render(e){if(await super.render(e)){this.pages=await(await fetch("/search.json")).json();const e=this.shadowRoot.getElementById("input");return e.addEventListener("input",this[inputHandler]),e.addEventListener("focus",this[focusHandler]),e.addEventListener("blur",this[blurHandler]),!0}return!1}search(e){const n=this.shadowRoot.getElementById("results");if(""===e)n.innerHTML="";else{const t=e.trim().toLowerCase();Object.keys(this.pages).forEach((e=>{const n=this.pages[e];n.score=0,n.name.toLowerCase().startsWith(t)?n.score+=5:n.name.toLowerCase().includes(t)&&(n.score+=3),n.terms.includes(t)&&(n.score+=3),n.terms.forEach((e=>{e.startsWith(t)?n.score+=2:e.includes(t)&&(n.score+=1)}))}));const s=Object.keys(this.pages).map((e=>({path:e,...this.pages[e]}))).filter((({score:e})=>e)).sort((({score:e},{score:n})=>n-e)).slice(0,4);s.length?n.innerHTML=s.map((({path:e,name:n})=>`<a href="${e}">${n}</a>`)).join(""):n.innerHTML="<a>No Results</a>"}}get shadowTemplate(){return'\n      <div id="wrapper">\n        <input\n          id="input"\n          placeholder="Search"\n          type="search"\n        />\n        <div id="results"></div>\n      </div>\n    '}get shadowStyles(){return'\n      :host {\n        display: inline-block;\n        align-self: center;\n      }\n      #wrapper {\n        position: relative;\n      }\n      #input {\n        width: 100%;\n        margin: 0;\n      }\n      #results {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        max-height: 20rem;\n        background-color: var(--c_bg);\n        color: var(--tc);\n        box-shadow: var(--drop_shadow);\n      }\n      :host([opened="true"]) #results {\n        display: block;\n      }\n      #results a {\n        display: block;\n        padding: var(--spacer_h);\n        text-decoration: none;\n        border-bottom: 1px solid var(--c_border);\n        border-radius: 0;\n      }\n      #results a:last-child {\n        border-bottom: 0;\n      }\n    '}}window.customElements.define("k-search",Search);
+import Component from"./Component.js";import debounce from"../utils/debounce.js";const inputHandler=Symbol("inputHandler"),focusHandler=Symbol("focusHandler"),blurHandler=Symbol("blurHandler");export default class Search extends Component{static searchDataUrl="/search.json";constructor(){super(),this[inputHandler]=debounce((()=>{this.search(this.shadowRoot.getElementById("input").value)})),this[focusHandler]=()=>{this.opened=!0},this[blurHandler]=()=>{setTimeout((()=>{this.opened=!1}),100)},this.registerAttribute("opened",!1),this.registerProp("pages",{})}async render(e){if(await super.render(e)){this.pages=await(await fetch(Search.searchDataUrl)).json();const e=this.shadowRoot.getElementById("input");return e.addEventListener("input",this[inputHandler]),e.addEventListener("focus",this[focusHandler]),e.addEventListener("blur",this[blurHandler]),!0}return!1}search(e){const n=this.shadowRoot.getElementById("results");if(""===e)n.innerHTML="";else{const t=e.trim().toLowerCase();Object.keys(this.pages).forEach((e=>{const n=this.pages[e];n.score=0,n.name.toLowerCase().startsWith(t)?n.score+=5:n.name.toLowerCase().includes(t)&&(n.score+=3),n.terms.includes(t)&&(n.score+=3),n.terms.forEach((e=>{e.startsWith(t)?n.score+=2:e.includes(t)&&(n.score+=1)}))}));const s=Object.keys(this.pages).map((e=>({path:e,...this.pages[e]}))).filter((({score:e})=>e)).sort((({score:e},{score:n})=>n-e)).slice(0,4);s.length?n.innerHTML=s.map((({path:e,name:n})=>`<a href="${e}">${n}</a>`)).join(""):n.innerHTML="<a>No Results</a>"}}get shadowTemplate(){return'\n      <div id="wrapper">\n        <input\n          id="input"\n          placeholder="Search"\n          type="search"\n        />\n        <div id="results"></div>\n      </div>\n    '}get shadowStyles(){return'\n      :host {\n        display: inline-block;\n        align-self: center;\n      }\n      #wrapper {\n        position: relative;\n      }\n      #input {\n        width: 100%;\n        margin: 0;\n      }\n      #results {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        max-height: 20rem;\n        background-color: var(--c_bg);\n        color: var(--tc);\n        box-shadow: var(--drop_shadow);\n      }\n      :host([opened="true"]) #results {\n        display: block;\n      }\n      #results a {\n        display: block;\n        padding: var(--spacer_h);\n        text-decoration: none;\n        border-bottom: 1px solid var(--c_border);\n        border-radius: 0;\n      }\n      #results a:last-child {\n        border-bottom: 0;\n      }\n    '}}window.customElements.define("k-search",Search);

package/dist/components/Sortable.js

@@ -0,0 +1 @@
+import Component from"./Component.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";import drag from"../utils/drag.js";const dragStartHandler=Symbol("dragStartHandler"),dragMoveHandler=Symbol("dragMoveHandler"),dragEndHandler=Symbol("dragEndHandler"),cleanup=Symbol("cleanup");export class Sortable extends Component{constructor(){super(),this.registerAttributes({sorting:!1})}async render(t){return await super.render(t),!1}disconnectedCallback(){super.disconnectedCallback(),this.cleanupFuncs.forEach((t=>t()))}getCursorElement(){const t=Array.from(this.children).filter((t=>"K-SORTABLE-ITEM"===t.tagName&&!t.hasAttribute("sorting")));if(0===t.length)return null;const e=event.clientY;if(e<t[0].getBoundingClientRect().top)return[t[0],"before"];if(e>t[t.length-1].getBoundingClientRect().bottom)return[t[t.length-1],"after"];for(const r of t){const t=r.getBoundingClientRect();if(e<t.top+t.height/2)return[r,"before"];if(e<t.bottom)return[r,"after"]}return null}}window.customElements.define("k-sortable",Sortable);export class SortableItem extends Component{constructor(){super(),this[dragStartHandler]=()=>{this.sorting=!0},this[dragMoveHandler]=({y:t})=>{this.style.transform=`translateY(${t}px)`,this.style.zIndex=9999;const[e,r]=this.sortable.getCursorElement();Array.from(this.sortable.children).forEach((t=>{t.classList.remove("target-before","target-after")})),e&&e.classList.add(`target-${r}`)},this[dragEndHandler]=({y:t})=>{this.sorting=!1,this.style.transform="",this.style.zIndex="";const[e,r]=this.sortable.getCursorElement();Array.from(this.sortable.children).forEach((t=>{t.classList.remove("target-before","target-after")})),e&&("before"===r?this.sortable.insertBefore(this,e):"after"===r&&this.sortable.insertBefore(this,e.nextSibling),dispatchEvent(this.sortable,"sort"))},this.registerAttributes({sorting:!1})}async render(t=!1){if(await super.render(t)){const t=this.shadowRoot.getElementById("handle");return this[cleanup]=drag({element:t,startCallback:this[dragStartHandler],moveCallback:this[dragMoveHandler],endCallback:this[dragEndHandler]}),!0}return!1}get sortable(){return this.closest("k-sortable")}get shadowTemplate(){return`\n      <div id="handle">\n        <k-icon name="drag-handle"></k-icon>\n      </div>\n      <div id="content" class="p pl0">\n        ${super.shadowTemplate}\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        border: 1px solid var(--c_border);\n        user-select: none;\n        position: relative;\n      }\n      :host([sorting]){\n       opacity: 0.8;\n      }\n      #handle {\n        display: inline-block;\n        cursor: pointer;\n        padding: var(--spacer);\n      }\n      #content {\n      display: inline-block;\n      }\n      :host(.target-before)::before,\n      :host(.target-after)::after {\n        content: '';\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 4px;\n        background-color: var(--c_primary);\n      }\n      :host(.target-before)::before {\n        top: -2px;\n      }\n      :host(.target-after)::after {\n        bottom: -2px;\n      }\n    `}}window.customElements.define("k-sortable-item",SortableItem);

package/dist/components/Table.js

@@ -1 +1 @@
-import Component from"./Component.js";import Icon from"./Icon.js";import SelectCount from"./tableControls/SelectCount.js";import PageSelect from"./tableControls/PageSelect.js";import PageSize from"./tableControls/PageSize.js";import DeleteSelected from"./tableControls/DeleteSelected.js";import{toTitleCase}from"../utils/string.js";import{onEvent,dispatchEvent}from"../utils/element.js";export default class Table extends Component{static controls={prevPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq","no-btn"),t.appendChild(new Icon("chevron-left")),onEvent(t,"click",(()=>e.prevPage())),onEvent(e,"pageChange",(()=>{t.disabled=1===e.getCurrentPage()})),t}},nextPage:{render:e=>{const t=document.createElement("button");return t.classList.add("pq","no-btn"),t.appendChild(new Icon("chevron-right")),onEvent(t,"click",(()=>e.nextPage())),onEvent(e,"pageChange",(()=>{t.disabled=e.getCurrentPage()===e.getTotalPages()})),t}},pageSelect:{render:e=>new PageSelect(e)},pageSize:{render:e=>new PageSize(e)},selectCount:{render:e=>new SelectCount(e)},deleteSelected:{render:e=>new DeleteSelected(e)},spacer:{html:'<div class="flex"></div>'}};constructor({records:e=[],fields:t=[],controls:n={before:[],after:[],top:[],bottom:[]},pageSize:s=100,pageSizeOptions:r=[10,25,50,100,500],currentPage:i=1,enableSelection:o=!1}={}){super(),this.registerProps({fields:t,records:e,controls:n,pageSize:s,pageSizeOptions:r,currentPage:i,enableSelection:o,selectedIndexes:[]})}async render(e){return!!await super.render(e)&&(this.setData({records:this.records,fields:this.fields,controls:this.controls,pageSize:this.pageSize,pageSizeOptions:this.pageSizeOptions,currentPage:this.currentPage}),!0)}renderFields(){if(!this.rendered)return;const e=this.controls?.before?.length?"<th></th>":"",t=this.controls?.after?.length?"<th></th>":"",n=this.enableSelection?'<th class="selection"><input type="checkbox" id="select-all"></th>':"";if(this.shadowRoot.getElementById("fields").innerHTML=`${n}${e}${this.fields.map((({label:e})=>`<th>${e}</th>`)).join("")}${t}`,this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e.addEventListener("change",(()=>{e.checked?this.selectAllOnPage():this.deselectAllOnPage()})),onEvent(this,"selectionChange pageChange",(()=>{this.allOnPageSelected()?e.checked=!0:e.checked=!1}))}}renderRecords(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";const t=(this.currentPage-1)*this.pageSize,n=t+this.pageSize,s=this.records.slice(t,n);let r=!1;s.forEach(((n,s)=>{const i=document.createElement("tr");if(this.enableSelection){const e=document.createElement("td");e.classList.add("selection");const n=document.createElement("input");n.type="checkbox",n.checked=this.selectedIndexes.includes(t+s),n.addEventListener("change",(()=>{n.checked?this.selectedIndexes.push(t+s):this.selectedIndexes=this.selectedIndexes.filter((e=>e!==t+s)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})})),e.appendChild(n),i.appendChild(e)}if(this.controls?.before?.length&&i.appendChild(this.renderRowControls(this.controls.before,n,t+s)),null===n){const e=document.createElement("td");e.colSpan=this.fields.length,e.innerHTML="<i>Loading...</i>",r=!0,i.appendChild(e)}else this.fields.forEach((({name:e,formatter:t,calculator:s},r)=>{const o=document.createElement("td");let d;s?d=s(n,this):(d=n[e]||"",Array.isArray(d)?d=t?d.map(t).join(", "):d.join(", "):t&&(d=t(d))),o.innerHTML=d,i.appendChild(o)}));this.controls?.after?.length&&i.appendChild(this.renderRowControls(this.controls.after,n,t+s)),e.appendChild(i)})),r&&dispatchEvent(this,"fetchRecords",{start:t,end:n})}renderRowControls(e=[],t,n){if(!this.rendered)return;const s=document.createElement("td");return e.forEach((({html:e,icon:r,action:i,render:o})=>{if(e)s.appendChild(document.createRange().createContextualFragment(e));else if(o&&"function"==typeof o){const e=o(this,t,n);e instanceof HTMLElement?s.appendChild(e):"string"==typeof e&&s.appendChild(document.createRange().createContextualFragment(e))}else if(r){const e=document.createElement("button");e.classList.add("pq","no-btn"),e.appendChild(new Icon(r)),i&&onEvent(e,"click",(()=>i(this,t,n))),s.appendChild(e)}})),s}renderControls(e=[],t){if(!this.rendered)return;const n=this.shadowRoot.getElementById(t);n.innerHTML="",e.forEach((({html:e,icon:t,action:s,render:r})=>{if(e)n.appendChild(document.createRange().createContextualFragment(e));else if(r&&"function"==typeof r){const e=r(this);e instanceof HTMLElement?n.appendChild(e):"string"==typeof e&&n.appendChild(document.createRange().createContextualFragment(e))}else if(t){const e=document.createElement("button");e.classList.add("pq","no-btn"),e.appendChild(new Icon(t)),s&&onEvent(e,"click",(()=>s(this))),n.appendChild(e)}}))}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.records.length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.renderRecords(),dispatchEvent(this,"pageChange"))}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}setPageSize(e){this.pageSize=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"pageSizeChange")}setData({records:e=!1,fields:t=!1,controls:n=!1,pageSize:s=!1,pageSizeOptions:r=!1,currentPage:i=!1,enableSelection:o=!1}={}){let d=!1,c=!1;e&&(this.records=e,this.fields=t||Table.extractFieldsFromRecords(this.records),d=!0),s&&(this.pageSize=s,d=!0),r&&(this.pageSizeOptions=r),n&&(this.controls=n,c=!0),i&&(this.currentPage=i,d=!0),void 0!==o&&(this.enableSelection=o,d=!0),d&&(this.renderFields(),this.renderRecords()),c&&(this.renderControls(this.controls.top,"top"),this.renderControls(this.controls.bottom,"bottom"))}setRecords(e){this.records=e,this.currentPage=1,this.renderRecords(),dispatchEvent(this,"recordsSet",{records:e})}setupFetchRecords(e,t){const n=this.records.length;n<e&&(this.records.length=e,this.records.fill(null,n)),onEvent(this,"fetchRecords",(async e=>{const{start:n,end:s}=e.detail,r=await t(n,s-n);this.records.splice(n,r.length,...r),this.renderRecords()}))}addRecord(e){this.records.push(e),this.renderRecords(),dispatchEvent(this,"recordAdded",{record:e})}updateRecord(e,t){this.records[e]=t;const n=(this.currentPage-1)*this.pageSize,s=n+this.pageSize;e>=n&&e<s&&this.renderRecords()}deleteRecord(e){e>=0&&e<this.records.length&&(this.selectedIndexes=this.selectedIndexes.filter((t=>t!==e)),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes}),this.records.splice(e,1),this.renderRecords(),dispatchEvent(this,"recordDeleted",{index:e}))}getSelectedRecords(){return this.selectedIndexes.map((e=>this.records[e]))}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)this.selectedIndexes.includes(n)||this.selectedIndexes.push(n);this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);this.selectedIndexes=this.selectedIndexes.filter((n=>n<e||n>=t)),this.renderRecords(),dispatchEvent(this,"selectionChange",{selectedIndexes:this.selectedIndexes})}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let n=e;n<t;n++)if(!this.selectedIndexes.includes(n))return!1;return!0}get shadowTemplate(){return`\n      ${super.shadowTemplate}\n      <div class="responsive-table">\n        <div id="top"></div>\n        <table class="b0">\n          <thead id="fields"></thead>\n          <tbody id="records"></tbody>\n        </table>\n        <div id="bottom"></div>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        margin-bottom: var(--spacer);\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n      }\n      #top, #bottom {\n        display: flex;\n      }\n      th {\n        border-top: none;\n      }\n      tr:last-child td:first-child {\n        border-bottom-left-radius: 0;\n      }\n      tr:last-child td:last-child {\n        border-bottom-right-radius: 0;\n      }\n      tr:last-child td {\n        border-bottom: none;\n      }\n      th:first-child, td:first-child {\n        border-left: none;\n      }\n      th:last-child, td:last-child {\n        border-right: none;\n      }\n      #top:not(:empty) {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #bottom:not(:empty) {\n        border-top: 1px solid var(--c_border);\n      }\n      th.selection, td.selection {\n        width: 50px;\n      }\n      th.selection input,\n      td.selection input {\n        margin: 0;\n        width: 1.35rem;\n        height: 1.35rem;\n      }\n    `}static extractFieldsFromRecords(e,t=100){const n=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>n.add(e)))})),[...n].map((e=>({name:e,label:toTitleCase(e)})))}}window.customElements.define("k-table",Table);
+import Component from"./Component.js";import{toTitleCase}from"../utils/string.js";import{onEvent,offEvent,dispatchEvent}from"../utils/element.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends Component{constructor({records:e=[],fields:t=[],filters:s=[],enablePages:i=!1,pageSize:r=50,pageSizeOptions:n=[10,25,50,100,500],currentPage:o=1,enableSelection:d=!1,enableSorting:l=!1}={}){super(),this.registerAttributes({enablePages:i,pageSize:r,currentPage:o,pageSizeOptions:n,enableSelection:d,enableSorting:l}),this.registerProps({fields:t,records:e,filters:s,sort:[],columnSizes:{},fetchPending:!1})}async render(e){return!!await super.render(e)&&(this.setData({records:this.records,fields:this.fields,filters:this.filters}),!0)}renderFields(){if(!this.rendered)return;this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls");const e=this.shadowRoot.getElementById("fields");if(e.innerHTML="",this.enableSelection){const t=document.createElement("div");t.classList.add("field","controls","cell","field-select"),t.style.width="40px",t.innerHTML='<input type="checkbox" id="select-all" />',e.appendChild(t)}if(this.hasBeforeControls()){const t=document.createElement("div");t.classList.add("field","cell","field-before-controls"),t.style.width=this.columnSizes.beforeControls+"px",e.appendChild(t)}if(this.fields.forEach((({name:t,label:s,hidden:i})=>{if(i)return;const r=document.createElement("div");if(r.classList.add("field","cell"),r.style.width=this.columnSizes[t]+"px",r.innerHTML=s,this.enableSorting){r.style.cursor="pointer";const e=this.sort.find((e=>e.name===t));if(e){r.classList.add(e.asc?"sort-asc":"sort-desc");const t=document.createElement("k-icon");t.classList.add("icon-sort"),t.setAttribute("name",e.asc?"arrow-down":"arrow-up"),r.appendChild(t)}r.addEventListener("click",(()=>{const e=this.sort.find((e=>e.name===t)),s=!e||!e.asc;this.sortBy(t,s)}))}e.appendChild(r)})),this.hasAfterControls()){const t=document.createElement("div");t.classList.add("field","cell","field-after-controls"),t.style.width=this.columnSizes.afterControls+"px",e.appendChild(t)}if(e.style.width=this.shadowRoot.getElementById("top").style.width=this.shadowRoot.getElementById("bottom").style.width=this.shadowRoot.getElementById("records").style.width=this.columnSizes.total+"px",this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e.addEventListener("change",(()=>{e.checked?this.selectAllOnPage():this.deselectAllOnPage()})),onEvent(this,"selectionChange pageChange",(()=>{this.allOnPageSelected()?e.checked=!0:e.checked=!1}))}}renderRecords(){if(!this.rendered)return;const e=this.shadowRoot.getElementById("records");e.innerHTML="";let t=this.getDisplayedRecords(),s=0,i=this.pageSize;this.enablePages&&(s=(this.currentPage-1)*this.pageSize,i=s+this.pageSize,t=t.slice(s,i));let r,n=0;t.forEach(((t,i)=>{if(null!==t)e.appendChild(this.renderRecord(t));else{r||(r=s+i),n++;const t=document.createElement("div");t.classList.add("record","fetching"),t.innerHTML='<div class="cell">Loading...</div>',e.appendChild(t)}})),r&&!this.fetchPending&&dispatchEvent(this,"fetchRecords",{start:r,count:n})}renderRecord(e){const t=document.createElement("div");if(t.classList.add("record"),t.dataset.index=e[index],this.enableSelection){const s=document.createElement("div");s.style.width="40px",s.classList.add("cell","selection","controls");const i=document.createElement("input");i.type="checkbox",i.checked=e[selected],i.addEventListener("change",(t=>{e[selected]=!!t.target.checked,dispatchEvent(this,"selectionChange")})),s.appendChild(i),t.appendChild(s)}return this.hasBeforeControls()&&t.appendChild(this.renderBeforeControls()),this.fields.forEach((({name:s,formatter:i,calculator:r,type:n,editor:o,hidden:d})=>{if(d)return;const l=document.createElement("div");l.classList.add("cell"),l.dataset.field=s,l.style.width=this.columnSizes[s]+"px";let a=e[s]||"";if(e[editing])if(t.setAttribute("editing",!0),r)l.appendChild(Table.editors.calculated(r(e,this)));else if(o)l.appendChild(o(a));else{let e=Table.editors[n||typeof a];e||(e=Table.editors.string),l.appendChild(e(a))}else l.innerHTML=r?r(e,this):i?i(a):a;t.appendChild(l)})),this.hasAfterControls()&&t.appendChild(this.renderAfterControls()),t}renderBeforeControls(){const e=document.createElement("div");return e.style.width=this.columnSizes.beforeControls+"px",e.classList.add("cell","controls","controls-before"),this.querySelectorAll('[slot="before"]').forEach((t=>{e.appendChild(t.cloneNode(!0))})),e}renderAfterControls(){const e=document.createElement("div");return e.style.width=this.columnSizes.afterControls+"px",e.classList.add("cell","controls","controls-after"),this.querySelectorAll('[slot="after"]').forEach((t=>{e.appendChild(t.cloneNode(!0))})),e}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]}"]`),s=this.renderRecord(e);t.replaceWith(s),dispatchEvent(this,"editingChange")}saveEditedRecord(e){e[editing]=!1;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t.querySelectorAll(".cell").forEach((t=>{const s=t.dataset.field,i=this.fields.find((e=>e.name===s));if(i&&!i.calculator){const i=1===t.children.length?t.firstChild:t.querySelector("input, select");i&&(e[s]=i.value)}})),t.replaceWith(this.renderRecord(e))}cancelEditedRecord(e){e[editing]=!1,this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`).replaceWith(this.renderRecord(e))}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.renderRecords(),dispatchEvent(this,"pageChange"))}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.renderRecords(),dispatchEvent(this,"pageSizeChange")}setData({records:e=!1,fields:t=!1,pageSize:s=!1,pageSizeOptions:i=!1,currentPage:r=!1,enableSelection:n}={}){let o=!1,d=this.getTotalPages(),l=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),o=!0),s&&(this.pageSize=s,o=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,o=!0),void 0!==n&&(this.enableSelection=n,o=!0),o&&(this.renderFields(),this.renderRecords());const a=this.getTotalPages();a!==d&&dispatchEvent(this,"pageCountChanged",{totalPages:this.getTotalPages()}),l>a&&this.setPage(a)}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.renderFields(),this.renderRecords(),dispatchEvent(this,"recordsSet",{records:e});const r=this.getTotalPages();r!==s&&dispatchEvent(this,"pageCountChanged",{totalPages:this.getTotalPages()}),i>r&&this.setPage(r)}setupFetchRecords(e,t){const s=this.records.length;s<e&&(this.records.length=e,this.records.fill(null,s)),onEvent(this,"fetchRecords",(async e=>{if(this.fetchPending)return;this.fetchPending=!0;const{start:s,count:i}=e.detail,r=await t(s,i);this.records.splice(s,r.length,...r),this.fetchPending=!1,this.renderRecords()}))}addRecord(e){e[selected]=!1,e[hidden]=!1,e[index]=this.records.length,this.records.push(e),this.renderRecords(),dispatchEvent(this,"recordAdded",{record:e})}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.renderRecords()}}deleteRecord(e){let t=this.records.find((t=>t===e)),s=this.getTotalPages();if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1),this.records.forEach(((e,t)=>{e[index]=t})),this.renderRecords(),dispatchEvent(this,"selectionChange"),dispatchEvent(this,"recordDeleted",{index:e});const i=this.getTotalPages();this.currentPage>i&&this.setPage(i),i!==s&&dispatchEvent(this,"pageCountChanged",{totalPages:i})}}deleteSelected(){let e=this.getTotalPages();this.getSelectedRecords().forEach((e=>{let t=this.records.find((t=>t===e));if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1)}})),this.records.forEach(((e,t)=>{e[index]=t})),this.renderRecords();const t=this.getTotalPages();this.currentPage>t&&this.setPage(t),t!==e&&dispatchEvent(this,"pageCountChanged",{totalPages:t}),dispatchEvent(this,"selectionChange")}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.renderRecords(),setTimeout((()=>{dispatchEvent(this,"selectionChange")}),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.renderRecords(),setTimeout((()=>{dispatchEvent(this,"selectionChange")}),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.renderFields(),this.renderRecords()}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.renderRecords(),dispatchEvent(this,"recordHidden"))}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.renderRecords(),dispatchEvent(this,"recordShown"))}showAllRecords(){this.records.forEach((e=>{e[hidden]=!1})),this.filters.length&&(this.filters=[],dispatchEvent(this,"filterRemoved filterChange")),this.renderRecords(),dispatchEvent(this,"recordShown allRecordsShown")}addFilter(e,t,s){this.filters.push({field:e,condition:t,value:s}),dispatchEvent(this,"filterAdded filterChange"),this.renderRecords()}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),dispatchEvent(this,"filterRemoved filterChange"),i&&this.renderRecords())}testFilter(e,t,s,i){const r=e[t];switch(s){case"equals":return r===i;case"not-equals":return r!==i;case"contains":return r.includes(i);case"not-contains":return!r.includes(i);case"greater-than":return r>i;case"less-than":return r<i;case"greater-than-or-equal":return r>=i;case"less-than-or-equal":return r<=i;default:return!0}}removeAllFilters(){this.filters.length&&(this.filters.forEach((({field:e,condition:t,value:s})=>{this.removeFilter(e,t,s,!1)})),this.renderRecords())}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&&(dispatchEvent(this,"recordHidden"),this.renderRecords()),dispatchEvent(this,"search",{term:e})}getDisplayedRecords(){this.filters.forEach((({field:e,condition:t,value:s})=>{this.records.forEach((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)=>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(){return this.columnSizes={},this.columnSizes.total=0,this.enableSelection&&(this.columnSizes.total+=40),this.columnSizes.beforeControls=Array.from(this.querySelectorAll('[slot="before"]')).reduce(((e,t)=>e+(t.maxWidth||40)),0),this.columnSizes.afterControls=Array.from(this.querySelectorAll('[slot="after"]')).reduce(((e,t)=>e+(t.maxWidth||40)),0),this.hasBeforeControls()&&(this.columnSizes.total+=this.columnSizes.beforeControls),this.hasAfterControls()&&(this.columnSizes.total+=this.columnSizes.afterControls),this.fields.forEach((e=>{if(e.size)this.columnSizes[e.name]=e.size;else{let t=0;this.records.slice(0,100).forEach((s=>{let i=s[e.name];e.calculator&&(i=e.calculator(s,this)),e.formatter&&(i=e.formatter(i)),i&&i.toString().length>t&&(t=i.toString().length)})),this.columnSizes[e.name]=Math.max(10*t+32,128),e.hidden||(this.columnSizes.total+=this.columnSizes[e.name])}})),this.columnSizes}setFieldHiddenState(e,t){const s=this.fields.find((t=>t.name===e));s&&(s.hidden=t,this.calculateColumnSizes(),this.renderFields(),this.renderRecords(),dispatchEvent(this,"fieldVisibilityChanged "+(t?"fieldHidden":"fieldShown"),{field:s}))}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.renderFields(),this.renderRecords()}get shadowTemplate(){return`\n      <div id="wrapper">\n        <div id="top"><slot name="top"></slot></div>\n        <div id="table">\n          <div id="fields"></div>\n          <div id="records"></div>\n        </div>\n        <div id="bottom">${super.shadowTemplate}</div>\n      </div>\n      <div style="display: none">\n        <slot name="before"></slot>\n        <slot name="after"></slot>\n      </div>\n    `}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: block;\n        width: 100%;\n        overflow: auto;\n        margin-bottom: var(--spacer);\n      }\n      #wrapper {\n        width: min-content;\n        border: 1px solid var(--c_border);\n        border-radius: var(--radius);\n      }\n      #table {\n        width: min-content;\n      }\n      #fields,\n      .record {\n        display: flex;\n      }\n      #fields {\n        background-color: var(--c_bg__alt);\n        border-bottom: 1px solid var(--c_border);\n      }\n      .record:not([editing="true"]) .cell:not(.controls),\n      #fields .cell:not(.controls) {\n        padding: calc(0.5 * var(--spacer)) var(--spacer);\n      }\n      .cell:not(:first-child) {\n        border-left: 1px solid var(--c_border);\n      }\n      .record:not(:last-child) .cell {\n        border-bottom: 1px solid var(--c_border);\n      }\n      #top, #bottom {\n        display: flex;\n        width: 100%;\n      }\n      #top slot {\n        display: block;\n        width: 100%;\n        border-bottom: 1px solid var(--c_border);\n      }\n      #bottom slot {\n        display: block;\n        width: 100%;\n        border-top: 1px solid var(--c_border);\n      }\n      :host(:not([top-controls])) #top,\n      :host(:not([bottom-controls])) #bottom {\n        display: none;\n      }\n      .field-select,\n      .selection {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .field-select input,\n      .selection input {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n      .icon-sort {\n        float: right;\n        opacity: 0.5;\n      }\n    `}static extractFieldsFromRecords(e,t=100){const s=new Set;return e.slice(0,t).forEach((e=>{Object.keys(e).forEach((e=>s.add(e)))})),[...s].map((e=>({name:e,label:toTitleCase(e)})))}static format(e){return(Array.isArray(e)?Table.formatters.array:Table.formatters[typeof e])(e)}static formatters={string:e=>e,number:e=>`${e}`,date:e=>e.toLocaleDateString(),boolean:e=>e?"True":"False",array:e=>e.map((e=>Table.format(e))).join(", "),undefined:e=>"",null:e=>"<code>null</code>"};static editors={string:e=>{const t=document.createElement("input");return t.value=e,t},number:e=>{const t=document.createElement("input");return t.type="number",t.value=e,t},date:e=>{const t=document.createElement("input");return t.type="date",t.value=e,t},boolean:e=>{const t=document.createElement("select");return t.innerHTML=`\n        <option value="true" ${e?"selected":""}>True</option>\n        <option value="false" ${e?"":"selected"}>False</option>\n      `,t.value=e,t},calculated:e=>{const t=document.createElement("input");return t.disabled=!0,t.value=e,t}}}window.customElements.define("k-table",Table);

package/dist/components/tableControls/DeleteRecord.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import"../Icon.js";import{onEvent,offEvent}from"../../utils/element.js";const clickHandler=Symbol("clickHandler");export default class DeleteRecord extends TableControl{constructor(){super(),this[clickHandler]=this.delete.bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("delete"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("delete"),"click",this[clickHandler])}delete(){this.record&&this.table.deleteRecord(this.record)}get shadowTemplate(){return'\n      <button id="delete" class="no-btn icon-btn">\n        <slot><k-icon name="delete"></k-icon></slot>\n      </button>\n    '}}window.customElements.define("k-tc-delete-record",DeleteRecord);

package/dist/components/tableControls/DeleteSelected.js

@@ -1 +1 @@
-import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class DeleteSelected extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){if(await super.render()){this.updateButtonState();const e=this.shadowRoot.getElementById("deleteSelectedButton");return onEvent(e,"click",(()=>this.deleteSelected())),onEvent(this.table,"selectionChange",(()=>this.updateButtonState())),!0}return!1}deleteSelected(){const e=this.table.selectedIndexes;e.sort(((e,t)=>t-e)),e.forEach((e=>this.table.deleteRecord(e))),this.table.selectedIndexes=[],this.table.renderRecords(),this.updateButtonState()}updateButtonState(){this.shadowRoot.getElementById("deleteSelectedButton").disabled=0===this.table.selectedIndexes.length}get shadowTemplate(){return'\n      <button id="deleteSelectedButton" class="pq no-btn">\n        <k-icon name="delete"></k-icon>\n      </button>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      button {\n        display: flex;\n        align-items: center;\n      }\n    "}}window.customElements.define("k-table-delete-selected",DeleteSelected);
+import TableControl from"./TableControl.js";import{onEvent,offEvent}from"../../utils/element.js";const deleteSelected=Symbol("deleteSelected"),updateButtonState=Symbol("updateButtonState");export default class DeleteSelected extends TableControl{constructor(){super(),this[deleteSelected]=this.deleteSelected.bind(this),this[updateButtonState]=(()=>{this.shadowRoot.getElementById("deleteSelectedButton").disabled=0===this.table.getSelectedRecords().length}).bind(this)}async render(e=!1){return!!await super.render(e)&&(this[updateButtonState](),onEvent(this.shadowRoot.getElementById("deleteSelectedButton"),"click",this[deleteSelected]),onEvent(this.table,"selectionChange",this[updateButtonState]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("deleteSelectedButton"),"click",this[deleteSelected]),offEvent(this.table,"selectionChange",this[updateButtonState])}deleteSelected(){this.table.deleteSelected(),this[updateButtonState]()}get shadowTemplate(){return'\n      <button id="deleteSelectedButton" class="pq no-btn">\n        <k-icon name="delete"></k-icon>\n      </button>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      #deleteSelectedButton {\n        display: flex;\n        align-items: center;\n      }\n      #deleteSelectedButton:disabled,\n      #deleteSelectedButton[disabled] {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n    "}}window.customElements.define("k-table-delete-selected",DeleteSelected);

package/dist/components/tableControls/Edit.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{offEvent,onEvent}from"../../utils/element.js";const editRecord=Symbol("editRecord"),saveRecord=Symbol("saveRecord"),cancelEdit=Symbol("cancelEdit");export default class Edit extends TableControl{constructor(){super(),this[editRecord]=this.editRecord.bind(this),this[saveRecord]=this.saveRecord.bind(this),this[cancelEdit]=this.cancelEdit.bind(this),this.registerAttributes({editing:!1}),this.maxWidth=80}async render(t=!1){if(await super.render(t)){const t=this.record;return t&&(this.editing=this.table.recordIsEditing(t)),onEvent(this.shadowRoot.getElementById("editButton"),"click",this[editRecord]),onEvent(this.shadowRoot.getElementById("saveButton"),"click",this[saveRecord]),onEvent(this.shadowRoot.getElementById("cancelButton"),"click",this[cancelEdit]),!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("editButton"),"click",this[editRecord]),offEvent(this.shadowRoot.getElementById("saveButton"),"click",this[saveRecord]),offEvent(this.shadowRoot.getElementById("cancelButton"),"click",this[cancelEdit])}editRecord(){this.table.editRecord(this.record)}saveRecord(){this.table.saveEditedRecord(this.record)}cancelEdit(){this.table.cancelEditedRecord(this.record)}get shadowTemplate(){return'\n      <button id="editButton" class="icon-btn no-btn">\n        <k-icon name="edit"></k-icon>\n      </button>\n      <button id="saveButton" class="icon-btn no-btn bg-success">\n        <k-icon name="check"></k-icon>\n      </button>\n      <button id="cancelButton" class="icon-btn no-btn bg-danger">\n        <k-icon name="close"></k-icon>\n      </button>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      :host([editing]) #editButton,\n      :host(:not([editing])) #cancelButton,\n      :host(:not([editing])) #saveButton {\n        display: none !important;\n      }\n    `}}window.customElements.define("k-tc-edit",Edit);

package/dist/components/tableControls/ExportCSV.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import"../Icon.js";import{onEvent,offEvent}from"../../utils/element.js";const clickHandler=Symbol("clickHandler");export default class ExportCsv extends TableControl{constructor(){super({maxWidth:136}),this[clickHandler]=this.export.bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("export"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("export"),"click",this[clickHandler])}getCSV(){const e=this.table;let t="";if(e){const o=[];if(e.fields.forEach((({name:e,calculator:t})=>{t||o.push(e)})),t+=o.join(",")+"\n",this.record){const e=this.record,n=[];o.forEach((t=>{n.push(e[t])})),t+=n.join(",")+"\n"}else e.records.forEach((e=>{const n=[];o.forEach((t=>{n.push(e[t])})),t+=n.join(",")+"\n"}))}return t}export(){const e=this.getCSV();if(this.record){const t=new Blob([e],{type:"application/json"}),o=URL.createObjectURL(t),n=document.createElement("a");n.href=o,n.download="data.json",n.click(),URL.revokeObjectURL(o)}else{const t=new Blob([e],{type:"application/json"}),o=URL.createObjectURL(t),n=document.createElement("a");n.href=o,n.download="data.json",n.click(),URL.revokeObjectURL(o)}}get shadowTemplate(){return'\n      <button id="export" class="no-btn ph">\n        <slot><k-icon name="export-file"></k-icon> Export CSV</slot>\n      </button>\n    '}}window.customElements.define("k-tc-export-csv",ExportCsv);

package/dist/components/tableControls/ExportJson.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import"../Icon.js";import{onEvent,offEvent}from"../../utils/element.js";const clickHandler=Symbol("clickHandler");export default class ExportJson extends TableControl{constructor(){super({maxWidth:136}),this[clickHandler]=this.export.bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("export"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("export"),"click",this[clickHandler])}export(){const e=this.record;if(e){const t=JSON.stringify(e),o=new Blob([t],{type:"application/json"}),n=URL.createObjectURL(o),c=document.createElement("a");c.href=n,c.download="data.json",c.click(),URL.revokeObjectURL(n)}else{const e=JSON.stringify(this.table.records),t=new Blob([e],{type:"application/json"}),o=URL.createObjectURL(t),n=document.createElement("a");n.href=o,n.download="data.json",n.click(),URL.revokeObjectURL(o)}}get shadowTemplate(){return'\n      <button id="export" class="no-btn ph">\n        <slot><k-icon name="export-file"></k-icon> Export JSON</slot>\n      </button>\n    '}}window.customElements.define("k-tc-export-json",ExportJson);

package/dist/components/tableControls/FieldSortHide.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{onEvent,offEvent}from"../../utils/element.js";import Dialog from"../Dialog.js";const clickHandler=Symbol("clickHandler");export default class FieldSortHide extends TableControl{constructor(){super(),this[clickHandler]=this.openDialog.bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("sort"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("sort"),"click",this[clickHandler])}openDialog(){import("../Sortable.js");const e=Dialog.create(`\n      <h3 class="m0 ph" slot="title">Show / Hide Fields</h3>\n      <div class="m">\n        <k-sortable id="sorting">\n          ${this.table.fields.map((e=>`\n            <k-sortable-item data-field="${e.name}">\n              <label class="field pb0">\n                <input\n                  class="field-visibility"\n                  data-field="${e.name}"\n                  type="checkbox"\n                  ${e.hidden?"":"checked"}\n                  style="height: 1.25rem; width: 1.25rem"\n                />\n                ${e.label}\n              </label>\n            </k-sortable-item>\n          `)).join("")}\n        </k-sortable>\n      </div>\n    `,{width:"400px",cancelText:"Close"});onEvent(e,"click",(e=>{if(!e.target.closest(".field"))return;const t=e.target.closest(".field-visibility");if(t){const e=t.getAttribute("data-field");this.table.setFieldHiddenState(e,!t.checked)}}));const t=e.querySelector("#sorting");onEvent(t,"sort",(()=>{const e=Array.from(t.querySelectorAll("k-sortable-item")).map((e=>e.getAttribute("data-field")));this.table.reorderFields(e)}))}get shadowTemplate(){return'\n      <button\n        id="sort"\n        class="no-btn icon-btn"\n      >\n        <k-icon name="table-visibility"></k-icon>\n      </button>\n    '}}window.customElements.define("k-tc-field-sort-hide",FieldSortHide);

package/dist/components/tableControls/Filters.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import Dialog from"../Dialog.js";import{offEvent,onEvent}from"../../utils/element.js";const table=Symbol("table"),clickHandler=Symbol("clickHandler");export default class Filters extends TableControl{constructor(){super(),this[clickHandler]=this.revealFilters.bind(this)}async render(t=!1){return!!await super.render(t)&&(onEvent(this.shadowRoot.getElementById("filterBtn"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("filterBtn"),"click",this[clickHandler])}revealFilters(){const t=Dialog.create(`\n      <h3 slot="title" class="m0 pyh px">Filters</h3>\n      <div class="p">\n        ${0===this.table.filters.length?"\n          <p>No Current Filters.</p>\n        ":`\n          <h5>Current Filters</h5>\n          <ul id="currentFilters">${this.table.filters.map((function({field:t,condition:e,value:n}){return`<li\n        data-field="${t}"\n        data-condition="${e}"\n        data-value="${n}"\n      >\n        ${t} ${{eq:"equals",ne:"does not equal",gt:"is greater than",gte:"is greater than or equal to",lt:"is less than",lte:"is less than or equal to",contains:"contains",starts:"starts with",ends:"ends with"}[e]} ${n}\n        <button class="remove-filter no-btn pq">\n          <k-icon name="close"></k-icon>\n        </button>\n    </li>`})).join("")}</ul>\n        `}\n        <hr />\n        <h5>Add A Filter</h5>\n        <form id="addFilter">\n          <select id="filterField" class="mb">${this.table.fields.map((({name:t,label:e})=>`<option value="${t}">${e}</option>`)).join("")}</select>\n          <select id="filterCondition" class="mb">${Object.entries({eq:"equals",ne:"does not equal",gt:"is greater than",gte:"is greater than or equal to",lt:"is less than",lte:"is less than or equal to",contains:"contains",starts:"starts with",ends:"ends with"}).map((([t,e])=>`<option value="${t}" ${"contains"===t?"selected":""}>${e}</option>`)).join("")}</select>\n          <input id="filterValue" type="text" class="mb" />\n          <button type="submit" class="btn primary mb mr">Add Filter</button>\n          ${0===this.table.filters.length?"":'\n            <button type="button" id="clearFilters" class="btn danger mb mr">Clear All Filters</button>\n          '}\n        </form>\n      </div>\n    `,{width:"600px"}),e=t.querySelector("#addFilter");onEvent(e,"submit",(n=>{n.preventDefault(),this.table.addFilter(e.filterField.value,e.filterCondition.value,e.filterValue.value),t.close(),this.revealFilters()})),onEvent(t,"click",(e=>{if(e.target.closest("button")?.classList.contains("remove-filter")){const n=e.target.closest("li");if(n){const{field:e,condition:l,value:i}=n.dataset;this.table.removeFilter(e,l,i),t.close(),this.revealFilters()}}"clearFilters"===e.target.id&&(this.table.removeAllFilters(),t.close())}))}get shadowTemplate(){return'\n      <button id="filterBtn" class="no-btn icon-btn">\n        <k-icon name="filter"></k-icon>\n      </button>\n    '}}window.customElements.define("k-tc-filters",Filters);

package/dist/components/tableControls/FirstPage.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{onEvent,offEvent}from"../../utils/element.js";const clickHandler=Symbol("clickHandler"),handlePageChange=Symbol("handlePageChange");export default class FirstPage extends TableControl{constructor(){super(),this[clickHandler]=this.goToFirstPage.bind(this),this[handlePageChange]=(()=>{const e=this.table;e&&1!==e.getCurrentPage()?this.shadowRoot.getElementById("firstPage").disabled=!1:this.shadowRoot.getElementById("firstPage").disabled=!0}).bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("firstPage"),"click",this[clickHandler]),this[handlePageChange](),onEvent(this.table,"pageChange",this[handlePageChange]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("firstPage"),"click",this[clickHandler]),offEvent(this.table,"pageChange",this[handlePageChange])}goToFirstPage(){const e=this.table;e&&e.firstPage()}get shadowTemplate(){return'\n      <button\n        id="firstPage"\n        class="no-btn icon-btn"\n      >\n        <slot><k-icon name="first"></k-icon></slot>\n      </button>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      #firstPage[disabled] {\n        cursor: inherit;\n        opacity: 0.5;\n      }\n    `}}window.customElements.define("k-tc-first-page",FirstPage);

package/dist/components/tableControls/HiddenCount.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{offEvent,onEvent}from"../../utils/element.js";const hiddenChangeHandler=Symbol("hiddenChangeHandler");export default class HiddenCount extends TableControl{constructor(){super(),this[hiddenChangeHandler]=(()=>{this.shadowRoot.getElementById("hiddenCount").textContent=this.table.getHiddenRecords().length}).bind(this),this.classList.add("mq")}async render(e=!1){return!!await super.render(e)&&(this[hiddenChangeHandler](),onEvent(this.table,"recordHidden recordShown",this[hiddenChangeHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.table,"recordHidden recordShown",this[hiddenChangeHandler])}get shadowTemplate(){return'\n      <span id="hiddenCount"></span>&nbsp;Hidden Records\n    '}}window.customElements.define("k-tc-hidden-count",HiddenCount);

package/dist/components/tableControls/Hide.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{offEvent,onEvent}from"../../utils/element.js";const clickHandler=Symbol("clickHandler");export default class Hide extends TableControl{constructor(){super(),this[clickHandler]=(()=>{const e=this.table,t=this.record;e&&t&&e.hideRecord(t)}).bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("hideButton"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("hideButton"),"click",this[clickHandler])}get shadowTemplate(){return'\n      <button id="hideButton" class="no-btn icon-btn">\n        <k-icon name="hide"></k-icon>\n      </button>\n    '}}window.customElements.define("k-tc-hide",Hide);

package/dist/components/tableControls/LastPage.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{onEvent,offEvent}from"../../utils/element.js";const clickHandler=Symbol("clickHandler"),handlePageChange=Symbol("handlePageChange");export default class LastPage extends TableControl{constructor(){super(),this[clickHandler]=this.lastPage.bind(this),this[handlePageChange]=(()=>{const e=this.table;e&&e.getCurrentPage()!==e.getTotalPages()?this.shadowRoot.getElementById("lastPage").disabled=!1:this.shadowRoot.getElementById("lastPage").disabled=!0}).bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("lastPage"),"click",this[clickHandler]),this[handlePageChange](),onEvent(this.table,"pageChange",this[handlePageChange]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("lastPage"),"click",this[clickHandler]),offEvent(this.table,"pageChange",this[handlePageChange])}lastPage(){const e=this.table;e&&e.lastPage()}get shadowTemplate(){return'\n      <button\n        id="lastPage"\n        class="no-btn icon-btn"\n      >\n        <slot><k-icon name="last"></k-icon></slot>\n      </button>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      #lastPage[disabled] {\n        cursor: inherit;\n        opacity: 0.5;\n      }\n    `}}window.customElements.define("k-tc-last-page",LastPage);

package/dist/components/tableControls/NextPage.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{onEvent,offEvent}from"../../utils/element.js";const clickHandler=Symbol("clickHandler"),handlePageChange=Symbol("handlePageChange");export default class NextPage extends TableControl{constructor(){super(),this[clickHandler]=this.nextPage.bind(this),this[handlePageChange]=(()=>{const e=this.table;e&&e.getCurrentPage()!==e.getTotalPages()?this.shadowRoot.getElementById("nextPage").disabled=!1:this.shadowRoot.getElementById("nextPage").disabled=!0}).bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("nextPage"),"click",this[clickHandler]),this[handlePageChange](),onEvent(this.table,"pageChange",this[handlePageChange]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("nextPage"),"click",this[clickHandler]),offEvent(this.table,"pageChange",this[handlePageChange])}nextPage(){const e=this.table;e&&e.nextPage()}get shadowTemplate(){return'\n      <button\n        id="nextPage"\n        class="no-btn icon-btn"\n      >\n        <slot><k-icon name="chevron-right"></k-icon></slot>\n      </button>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      #nextPage[disabled] {\n        cursor: inherit;\n        opacity: 0.5;\n      }\n    `}}window.customElements.define("k-tc-next-page",NextPage);

package/dist/components/tableControls/PageSelect.js

@@ -1 +1 @@
-import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSelect extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){return!!await super.render()&&(this.updateOptions(),!0)}updateOptions(){const e=this.shadowRoot.getElementById("pageSelect");e.innerHTML="";for(let t=1;t<=this.table.getTotalPages();t++){const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)}e.value=this.table.getCurrentPage();this.shadowRoot.getElementById("totalPages").textContent=this.table.getTotalPages(),onEvent(e,"change",(()=>{this.table.setPage(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{this.updateOptions()})),onEvent(this.table,"pageChange",(()=>{e.value=this.table.getCurrentPage()}))}get shadowTemplate(){return'\n      <select id="pageSelect" class="mxq"></select>\n      <label> out of <span id="totalPages"></span></label>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      #pageSelect, label {\n        display: inline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-select",PageSelect);
+import TableControl from"./TableControl.js";import{onEvent}from"../../utils/element.js";const updateOptions=Symbol("updateOptions"),handleSelectChange=Symbol("handleSelectChange"),handlePageSizeChange=Symbol("handlePageSizeChange"),handlePageChange=Symbol("handlePageChange"),handlePageCountChange=Symbol("handlePageCountChange");export default class PageSelect extends TableControl{constructor(){super(),this[updateOptions]=(()=>{const e=this.shadowRoot.getElementById("pageSelect");e.innerHTML="";for(let t=1;t<=this.table.getTotalPages();t++){const a=document.createElement("option");a.value=t,a.textContent=t,e.appendChild(a)}e.value=this.table.getCurrentPage(),this.shadowRoot.getElementById("totalPages").textContent=this.table.getTotalPages()}).bind(this),this[handleSelectChange]=(()=>{this.table.setPage(parseInt(this.shadowRoot.getElementById("pageSelect").value))}).bind(this),this[handlePageSizeChange]=(()=>{this[updateOptions](),this.shadowRoot.getElementById("pageSelect").value=this.table.getCurrentPage()}).bind(this),this[handlePageChange]=(()=>{this.shadowRoot.getElementById("pageSelect").value=this.table.getCurrentPage()}).bind(this),this[handlePageCountChange]=(()=>{this.shadowRoot.getElementById("totalPages").textContent=this.table.getTotalPages(),this[updateOptions]()}).bind(this)}async render(e=!1){if(await super.render(e)){const e=this.shadowRoot.getElementById("pageSelect");return onEvent(e,"change",this[handleSelectChange]),onEvent(this.table,"pageSizeChange",this[handlePageSizeChange]),onEvent(this.table,"pageChange pageCountChanged",this[handlePageChange]),onEvent(this.table,"pageCountChanged",this[handlePageCountChange]),this[updateOptions](),!0}return!1}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("pageSelect"),"change",this[handleSelectChange]),offEvent(this.table,"pageSizeChange",this[handlePageSizeChange]),offEvent(this.table,"pageChange pageCountChanged",this[handlePageChange]),offEvent(this.table,"pageCountChanged",this[handlePageCountChange])}get shadowTemplate(){return'\n      <select id="pageSelect" class="mxq"></select>\n      <label> out of <span id="totalPages"></span></label>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      #pageSelect, label {\n        display: inline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-tc-page-select",PageSelect);

package/dist/components/tableControls/PageSize.js

@@ -1 +1 @@
-import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class PageSize extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){if(await super.render()){const e=this.shadowRoot.getElementById("pageSizeSelect");return this.table.pageSizeOptions.forEach((t=>{const n=document.createElement("option");n.value=t,n.textContent=t,e.appendChild(n)})),e.value=this.table.pageSize,onEvent(e,"change",(()=>{this.table.setPageSize(parseInt(e.value))})),onEvent(this.table,"pageSizeChange",(()=>{e.value=this.table.pageSize})),!0}return!1}get shadowTemplate(){return'\n      <label for="pageSizeSelect">Page Size: </label>\n      <select id="pageSizeSelect" class="mxq"></select>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-page-size",PageSize);
+import TableControl from"./TableControl.js";import{onEvent,offEvent}from"../../utils/element.js";const updateOptions=Symbol("updateOptions"),changeHandler=Symbol("changeHandler"),pageSizeChangeHandler=Symbol("pageSizeChangeHandler");export default class PageSize extends TableControl{constructor(e){super(),this[updateOptions]=(()=>{const e=this.shadowRoot.getElementById("pageSizeSelect");this.table.pageSizeOptions.forEach((t=>{const a=document.createElement("option");a.value=t,a.textContent=t,e.appendChild(a)})),e.value=this.table.pageSize}).bind(this),this[changeHandler]=(()=>{this.table.setPageSize(parseInt(this.shadowRoot.getElementById("pageSizeSelect").value))}).bind(this),this[pageSizeChangeHandler]=(()=>{this.shadowRoot.getElementById("pageSizeSelect").value=this.table.pageSize}).bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("pageSizeSelect"),"change",this[changeHandler]),onEvent(this.table,"pageSizeChange",this[pageSizeChangeHandler]),this[updateOptions](),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("pageSizeSelect"),"change",this[changeHandler]),offEvent(this.table,"pageSizeChange",this[pageSizeChangeHandler])}get shadowTemplate(){return'\n      <label for="pageSizeSelect">Page Size: </label>\n      <select id="pageSizeSelect" class="mxq"></select>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-tc-page-size",PageSize);

package/dist/components/tableControls/PrevPage.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{onEvent,offEvent}from"../../utils/element.js";const clickHandler=Symbol("clickHandler"),handlePageChange=Symbol("handlePageChange");export default class PrevPage extends TableControl{constructor(){super(),this[clickHandler]=this.prevPage.bind(this),this[handlePageChange]=(()=>{const e=this.table;e&&1!==e.getCurrentPage()?this.shadowRoot.getElementById("prevPage").disabled=!1:this.shadowRoot.getElementById("prevPage").disabled=!0}).bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("prevPage"),"click",this[clickHandler]),this[handlePageChange](),onEvent(this.table,"pageChange",this[handlePageChange]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("prevPage"),"click",this[clickHandler]),offEvent(this.table,"pageChange",this[handlePageChange])}prevPage(){const e=this.table;e&&e.prevPage()}get shadowTemplate(){return'\n      <button\n        id="prevPage"\n        class="no-btn icon-btn"\n      >\n        <slot><k-icon name="chevron-left"></k-icon></slot>\n      </button>\n    '}get shadowStyles(){return`\n      ${super.shadowStyles}\n      #prevPage[disabled] {\n        cursor: inherit;\n        opacity: 0.5;\n      }\n    `}}window.customElements.define("k-tc-prev-page",PrevPage);

package/dist/components/tableControls/Search.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{offEvent,onEvent}from"../../utils/element.js";import debounce from"../../utils/debounce.js";const changeHandler=Symbol("changeHandler");export default class Search extends TableControl{constructor(){super(),this[changeHandler]=debounce(this.search.bind(this),200)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("search"),"input",this[changeHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("search"),"input",this[changeHandler])}search(){const e=this.shadowRoot.getElementById("search").value;e.length<3?this.table.showAllRecords():this.table.search(e)}get shadowTemplate(){return`\n      <input\n        id="search"\n        type="search"\n        placeholder="Search"\n        class="px pyh"\n      />\n      ${super.shadowTemplate}\n    `}}window.customElements.define("k-tc-search",Search);

package/dist/components/tableControls/SelectCount.js

@@ -1 +1 @@
-import Component from"../Component.js";import{onEvent}from"../../utils/element.js";export default class SelectCount extends Component{constructor(e){super(),this.table=e,this.classList.add("mxq")}async render(){return!!await super.render()&&(this.updateCount(),onEvent(this.table,"selectionChange",(()=>{this.updateCount()})),!0)}updateCount(){this.shadowRoot.getElementById("selectCount").textContent=this.table.getSelectedRecords().length}get shadowTemplate(){return'\n      Selected: <span id="selectCount"></span>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n        align-self: center;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-select-count",SelectCount);
+import TableControl from"./TableControl.js";import{onEvent}from"../../utils/element.js";export default class SelectCount extends TableControl{async render(e=!1){return!!await super.render(e)&&(this.updateCount(),onEvent(this.table,"selectionChange",(()=>{this.updateCount()})),!0)}updateCount(){this.shadowRoot.getElementById("selectCount").textContent=this.table.getSelectedRecords().length}get shadowTemplate(){return'\n      Selected: <span id="selectCount"></span>\n    '}get shadowStyles(){return"\n      :host {\n        display: inline-flex;\n        width: max-content;\n        align-items: baseline;\n        align-self: center;\n      }\n      label {\n        white-space: nowrap;\n      }\n    "}}window.customElements.define("k-table-select-count",SelectCount);

package/dist/components/tableControls/ShowAll.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{offEvent,onEvent}from"../../utils/element.js";const clickHandler=Symbol("clickHandler");export default class HiddenCount extends TableControl{constructor(){super(),this[clickHandler]=(()=>{this.table.showAllRecords()}).bind(this)}async render(t=!1){return!!await super.render(t)&&(onEvent(this.shadowRoot.getElementById("showAllButton"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("showAllButton"),"click",this[clickHandler])}get shadowTemplate(){return'\n      <button id="showAllButton" class="no-btn icon-btn">\n        <k-icon name="show"></k-icon>\n      </button>\n    '}}window.customElements.define("k-tc-show-all",HiddenCount);

package/dist/components/tableControls/ShowHideFields.js

@@ -0,0 +1 @@
+import TableControl from"./TableControl.js";import{onEvent,offEvent}from"../../utils/element.js";import Dialog from"../Dialog.js";const clickHandler=Symbol("clickHandler");export default class ShowHideFields extends TableControl{constructor(){super(),this[clickHandler]=this.openDialog.bind(this)}async render(e=!1){return!!await super.render(e)&&(onEvent(this.shadowRoot.getElementById("sort"),"click",this[clickHandler]),!0)}disconnectedCallback(){super.disconnectedCallback(),offEvent(this.shadowRoot.getElementById("sort"),"click",this[clickHandler])}openDialog(){const e=Dialog.create(`\n      <h3 class="m0 ph" slot="title">Show / Hide Fields</h3>\n      <div class="p">\n        ${this.table.fields.map((e=>`\n        <div class="mb">\n          <label class="field">\n            <input\n              class="field-visibility"\n              data-field="${e.name}"\n              type="checkbox"\n              ${e.hidden?"":"checked"}\n              style="height: 1.25rem; width: 1.25rem"\n            />\n            ${e.label}\n          </label>\n        </div>\n        `)).join("")}\n      </div>\n    `,{width:"400px",cancelText:"Close"});onEvent(e,"click",(e=>{if(!e.target.closest(".field"))return;const t=e.target.closest(".field-visibility");if(t){const e=t.getAttribute("data-field");this.table.setFieldHiddenState(e,!t.checked)}}))}get shadowTemplate(){return'\n      <button\n        id="sort"\n        class="no-btn icon-btn"\n      >\n        <k-icon name="table-visibility"></k-icon>\n      </button>\n    '}}window.customElements.define("k-tc-show-hide-fields",ShowHideFields);

package/dist/components/tableControls/TableControl.js

@@ -0,0 +1 @@
+import Component from"../Component.js";export default class TableControl extends Component{constructor({maxWidth:t=40}={}){super(),this.registerAttributes({maxWidth:t})}get table(){return this.getRootNode()instanceof ShadowRoot?this.getRootNode().host.closest("k-table"):this.closest("k-table")}get record(){if(this.getRootNode()instanceof ShadowRoot){const t=this.closest(".record");if(t){const e=t.dataset.index;if(e)return this.table.records[e]}}return!1}get shadowStyles(){return`\n      ${super.shadowStyles}\n      :host {\n        display: inline-flex;\n      }\n      .icon-btn {\n        display: inline-flex !important;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        height: 40px;\n      }\n    `}}

package/dist/index.js

@@ -1 +1 @@
-import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import DeleteSelected from"./components/tableControlsDeleteSelected.js";import PageSelect from"./components/tableControlsPageSelect.js";import PageSize from"./components/tableControlsPageSize.js";import SelectCount from"./components/tableControlsSelectCount.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Split:Split,Table:Table,DeleteSelected:DeleteSelected,PageSelect:PageSelect,PageSize:PageSize,SelectCount:SelectCount,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};
+import Accordion from"./components/Accordion.js";import Card from"./components/Card.js";import Component from"./components/Component.js";import ContentSlider from"./components/ContentSlider.js";import Dialog from"./components/Dialog.js";import DirectoryViewer from"./components/DirectoryViewer.js";import FocusCapture from"./components/FocusCapture.js";import Icon from"./components/Icon.js";import Import from"./components/Import.js";import LazyComponent from"./components/LazyComponent.js";import ReactiveComponent from"./components/ReactiveComponent.js";import ReactiveLazyComponent from"./components/ReactiveLazyComponent.js";import Resize from"./components/Resize.js";import Search from"./components/Search.js";import ShowMore from"./components/ShowMore.js";import SideMenu from"./components/SideMenu.js";import Sortable from"./components/Sortable.js";import Split from"./components/Split.js";import Table from"./components/Table.js";import DeleteRecord from"./components/tableControlsDeleteRecord.js";import DeleteSelected from"./components/tableControlsDeleteSelected.js";import Edit from"./components/tableControlsEdit.js";import ExportCSV from"./components/tableControlsExportCSV.js";import ExportJson from"./components/tableControlsExportJson.js";import FieldSortHide from"./components/tableControlsFieldSortHide.js";import Filters from"./components/tableControlsFilters.js";import FirstPage from"./components/tableControlsFirstPage.js";import HiddenCount from"./components/tableControlsHiddenCount.js";import Hide from"./components/tableControlsHide.js";import LastPage from"./components/tableControlsLastPage.js";import NextPage from"./components/tableControlsNextPage.js";import PageSelect from"./components/tableControlsPageSelect.js";import PageSize from"./components/tableControlsPageSize.js";import PrevPage from"./components/tableControlsPrevPage.js";import Search from"./components/tableControlsSearch.js";import SelectCount from"./components/tableControlsSelectCount.js";import ShowAll from"./components/tableControlsShowAll.js";import TableControl from"./components/tableControlsTableControl.js";import Tabs from"./components/Tabs.js";import Tags from"./components/Tags.js";import ThemeSwitcher from"./components/ThemeSwitcher.js";import Timestamp from"./components/Timestamp.js";import Toggle from"./components/Toggle.js";import cli from"./utils/cli.js";import cookie from"./utils/cookie.js";import debounce from"./utils/debounce.js";import drag from"./utils/drag.js";import element from"./utils/element.js";import formatTimestamp from"./utils/formatTimestamp.js";import fuzzyMatch from"./utils/fuzzyMatch.js";import getPreferredTheme from"./utils/getPreferredTheme.js";import loadCss from"./utils/loadCss.js";import loadScript from"./utils/loadScript.js";import object from"./utils/object.js";import raf from"./utils/raf.js";import string from"./utils/string.js";import toFunction from"./utils/toFunction.js";import type from"./utils/type.js";import waitFrames from"./utils/waitFrames.js";import watchDirectoryHandle from"./utils/watchDirectoryHandle.js";export default{Accordion:Accordion,Card:Card,Component:Component,ContentSlider:ContentSlider,Dialog:Dialog,DirectoryViewer:DirectoryViewer,FocusCapture:FocusCapture,Icon:Icon,Import:Import,LazyComponent:LazyComponent,ReactiveComponent:ReactiveComponent,ReactiveLazyComponent:ReactiveLazyComponent,Resize:Resize,Search:Search,ShowMore:ShowMore,SideMenu:SideMenu,Sortable:Sortable,Split:Split,Table:Table,DeleteRecord:DeleteRecord,DeleteSelected:DeleteSelected,Edit:Edit,ExportCSV:ExportCSV,ExportJson:ExportJson,FieldSortHide:FieldSortHide,Filters:Filters,FirstPage:FirstPage,HiddenCount:HiddenCount,Hide:Hide,LastPage:LastPage,NextPage:NextPage,PageSelect:PageSelect,PageSize:PageSize,PrevPage:PrevPage,Search:Search,SelectCount:SelectCount,ShowAll:ShowAll,TableControl:TableControl,Tabs:Tabs,Tags:Tags,ThemeSwitcher:ThemeSwitcher,Timestamp:Timestamp,Toggle:Toggle,cli:cli,cookie:cookie,debounce:debounce,drag:drag,element:element,formatTimestamp:formatTimestamp,fuzzyMatch:fuzzyMatch,getPreferredTheme:getPreferredTheme,loadCss:loadCss,loadScript:loadScript,object:object,raf:raf,string:string,toFunction:toFunction,type:type,waitFrames:waitFrames,watchDirectoryHandle:watchDirectoryHandle};

package/dist/kempo-styles.css

@@ -1 +1 @@
-/* Reset*/:root{interpolate-size:allow-keywords}*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_border);padding:var(--input_padding);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
+/* Reset*/:root{interpolate-size:allow-keywords}*, *::before, *::after{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt, blockquote, pre, code{margin:0;padding:0.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}main, .container{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav > a,nav > .link{display:inline-block;padding:var(--spacer) !important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}/* Display / Flex*/.d-b{display:block !important}.d-ib{display:inline-block !important}.d-g{display:grid !important}.d-i{display:inline !important}.d-n{display:none !important}.d-f{display:flex !important;flex-wrap:wrap}.d-if{display:inline-flex !important;flex-wrap:wrap}.flex, .flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block !important}.d-d-ib{display:inline-block !important}.d-d-g{display:grid !important}.d-d-i{display:inline !important}.d-d-n{display:none !important}.d-d-if{display:inline-flex !important;flex-wrap:wrap}.d-d-f{display:flex !important;flex-wrap:wrap}.d-flex, .d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block !important}.t-d-ib{display:inline-block !important}.t-d-g{display:grid !important}.t-d-i{display:inline !important}.t-d-n{display:none !important}.t-d-if{display:inline-flex !important;flex-wrap:wrap}.t-d-f{display:flex !important;flex-wrap:wrap}.t-flex, .t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block !important}.m-d-ib{display:inline-block !important}.m-d-g{display:grid !important}.m-d-i{display:inline !important}.m-d-n{display:none !important}.m-d-if{display:inline-flex !important;flex-wrap:wrap}.m-d-f{display:flex !important;flex-wrap:wrap}.m-flex, .m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}/* Typography*/.small,small{font-size:var(--fs_small) !important}.large{font-size:var(--fs_large) !important}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6,b, strong{font-weight:var(--fw_bold)}h1, h2, h3, h4, h5, h6,.h1, .h2, .h3, .h4, .h5, .h6{font-family:var(--ff_heading)}.h1, h1{font-size:var(--fs_h1)}.h2, h2{font-size:var(--fs_h2)}.h3, h3{font-size:var(--fs_h3)}.h4, h4{font-size:var(--fs_h4)}.h5, h5{font-size:var(--fs_h5)}.h6, h6{font-size:var(--fs_h6)}p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, pre, hr, dd{margin-bottom:var(--spacer)}ul, ol, dl{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono, pre, code{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(0.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}a,.link{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms), box-shadow var(--animation_ms);outline:none;border-radius:var(--radius);text-decoration:var(--link_decoration)}a:hover,.link:hover{color:var(--tc_link__hover)}a:focus,.link:focus-visible{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:0.75em}dl{padding:0;margin:0}dt, dd{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd + dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}/* Spacing, Borders and Radius*/.p, .pt, .py{padding-top:var(--spacer) !important}.p, .pr, .px{padding-right:var(--spacer) !important}.p, .pb, .py{padding-bottom:var(--spacer) !important}.p, .pl, .px{padding-left:var(--spacer) !important}.ph, .pth, .pyh{padding-top:var(--spacer_h) !important}.ph, .prh, .pxh{padding-right:var(--spacer_h) !important}.ph, .pbh, .pyh{padding-bottom:var(--spacer_h) !important}.ph, .plh, .pxh{padding-left:var(--spacer_h) !important}.pq, .ptq, .pyq{padding-top:var(--spacer_q) !important}.pq, .prq, .pxq{padding-right:var(--spacer_q) !important}.pq, .pbq, .pyq{padding-bottom:var(--spacer_q) !important}.pq, .plq, .pxq{padding-left:var(--spacer_q) !important}.p0, .pt0, .py0{padding-top:0.1px !important}.p0, .pr0, .px0{padding-right:0.1px !important}.p0, .pb0, .py0{padding-bottom:0.1px !important}.p0, .pl0, .px0{padding-left:0.1px !important}.m, .mt, .my{margin-top:var(--spacer) !important}.m, .mr, .mx{margin-right:var(--spacer) !important}.m, .mb, .my{margin-bottom:var(--spacer) !important}.m, .ml, .mx{margin-left:var(--spacer) !important}.mh, .mth, .myh{margin-top:var(--spacer_h) !important}.mh, .mrh, .mxh{margin-right:var(--spacer_h) !important}.mh, .mbh, .myh{margin-bottom:var(--spacer_h) !important}.mh, .mlh, .mxh{margin-left:var(--spacer_h) !important}.mq, .mtq, .myq{margin-top:var(--spacer_q) !important}.mq, .mrq, .mxq{margin-right:var(--spacer_q) !important}.mq, .mbq, .myq{margin-bottom:var(--spacer_q) !important}.mq, .mlq, .mxq{margin-left:var(--spacer_q) !important}.m0, .mt0, .my0{margin-top:0 !important}.m0, .mr0, .mx0{margin-right:0 !important}.m0, .mb0, .my0{margin-bottom:0 !important}.m0, .ml0, .mx0{margin-left:0 !important}.-m, .-mt, .-my{margin-top:calc(-1 * var(--spacer)) !important}.-m, .-mr, .-mx{margin-right:calc(-1 * var(--spacer)) !important}.-m, .-mb, .-my{margin-bottom:calc(-1 * var(--spacer)) !important}.-m, .-ml, .-mx{margin-left:calc(-1 * var(--spacer)) !important}.b, .bt, .by{border-top:1px solid var(--c_border) !important}.b, .br, .bx{border-right:1px solid var(--c_border) !important}.b, .bb, .by{border-bottom:1px solid var(--c_border) !important}.b, .bl, .bx{border-left:1px solid var(--c_border) !important}.b0, .bt0, .by0{border-top:none !important}.b0, .br0, .bx0{border-right:none !important}.b0, .bb0, .by0{border-bottom:none !important}.b0, .bl0, .bx0{border-left:none !important}.r, .rtl, .rt, .rl{border-top-left-radius:var(--radius) !important}.r, .rtr, .rt, .rr{border-top-right-radius:var(--radius) !important}.r, .rbr, .rb, .rr{border-bottom-right-radius:var(--radius) !important}.r, .rbl, .rb, .rl{border-bottom-left-radius:var(--radius) !important}.r0, .rtl0, .rt0, .rl0{border-top-left-radius:0 !important}.r0, .rtr0, .rt0, .rr0{border-top-right-radius:0 !important}.r0, .rbr0, .rb0, .rr0{border-bottom-right-radius:0 !important}.r0, .rbl0, .rb0, .rl0{border-bottom-left-radius:0 !important}.round{border-radius:9999rem !important}/* Rows and Columns*/.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2, 1fr)}.cols-3{grid-template-columns:repeat(3, 1fr)}.cols-4{grid-template-columns:repeat(4, 1fr)}.cols-5{grid-template-columns:repeat(5, 1fr)}.cols-6{grid-template-columns:repeat(6, 1fr)}.cols-7{grid-template-columns:repeat(7, 1fr)}.cols-8{grid-template-columns:repeat(8, 1fr)}.cols-9{grid-template-columns:repeat(9, 1fr)}.cols-10{grid-template-columns:repeat(10, 1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2, 1fr)}.d-cols-3{grid-template-columns:repeat(3, 1fr)}.d-cols-4{grid-template-columns:repeat(4, 1fr)}.d-cols-5{grid-template-columns:repeat(5, 1fr)}.d-cols-6{grid-template-columns:repeat(6, 1fr)}.d-cols-7{grid-template-columns:repeat(7, 1fr)}.d-cols-8{grid-template-columns:repeat(8, 1fr)}.d-cols-9{grid-template-columns:repeat(9, 1fr)}.d-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2, 1fr)}.t-cols-3{grid-template-columns:repeat(3, 1fr)}.t-cols-4{grid-template-columns:repeat(4, 1fr)}.t-cols-5{grid-template-columns:repeat(5, 1fr)}.t-cols-6{grid-template-columns:repeat(6, 1fr)}.t-cols-7{grid-template-columns:repeat(7, 1fr)}.t-cols-8{grid-template-columns:repeat(8, 1fr)}.t-cols-9{grid-template-columns:repeat(9, 1fr)}.t-cols-10{grid-template-columns:repeat(10, 1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2, 1fr)}.m-cols-3{grid-template-columns:repeat(3, 1fr)}.m-cols-4{grid-template-columns:repeat(4, 1fr)}.m-cols-5{grid-template-columns:repeat(5, 1fr)}.m-cols-6{grid-template-columns:repeat(6, 1fr)}.m-cols-7{grid-template-columns:repeat(7, 1fr)}.m-cols-8{grid-template-columns:repeat(8, 1fr)}.m-cols-9{grid-template-columns:repeat(9, 1fr)}.m-cols-10{grid-template-columns:repeat(10, 1fr)}}/* Buttons*/button:not(.no-btn):not(.no-style),.btn,input[type="button"],input[type="submit"],input[type="reset"]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:none;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms), box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}button:not(.no-btn):not(.no-style):hover,.btn:hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}button:not(.no-btn):not(.no-style):focus,.btn:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{box-shadow:var(--btn_box_shadow__hover), var(--focus_shadow);z-index:1}button:not(.no-btn):not(.no-style):disabled,.btn[disabled],input[type="button"]:disabled,input[type="submit"]:disabled,input[type="reset"]:disabled{opacity:0.6}button:not(.no-btn).primary,.btn.primary,input[type="button"].primary,input[type="submit"].primary,input[type="reset"].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}button:not(.no-btn).primary:hover,.btn.primary:hover,input[type="button"].primary:hover,input[type="submit"].primary:hover,input[type="reset"].primary:hover{background-color:var(--c_primary__hover)}button:not(.no-btn).secondary,.btn.secondary,input[type="button"].secondary,input[type="submit"].secondary,input[type="reset"].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}button:not(.no-btn).secondary:hover,.btn.secondary:hover,input[type="button"].secondary:hover,input[type="submit"].secondary:hover,input[type="reset"].secondary:hover{background-color:var(--c_secondary__hover)}button:not(.no-btn).success,.btn.success,input[type="button"].success,input[type="submit"].success,input[type="reset"].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}button:not(.no-btn).success:hover,.btn.success:hover,input[type="button"].success:hover,input[type="submit"].success:hover,input[type="reset"].success:hover{background-color:var(--c_success__hover)}button:not(.no-btn).warning,.btn.warning,input[type="button"].warning,input[type="submit"].warning,input[type="reset"].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}button:not(.no-btn).warning:hover,.btn.warning:hover,input[type="button"].warning:hover,input[type="submit"].warning:hover,input[type="reset"].warning:hover{background-color:var(--c_warning__hover)}button:not(.no-btn).danger,.btn.danger,input[type="button"].danger,input[type="submit"].danger,input[type="reset"].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}button:not(.no-btn).danger:hover,.btn.danger:hover,input[type="button"].danger:hover,input[type="submit"].danger:hover,input[type="reset"].danger:hover{background-color:var(--c_danger__hover)}button:not(.no-btn):not(.no-style).link,.btn.link,input[type="button"].link,input[type="submit"].link,input[type="reset"].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:0.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp button:not(.no-btn):not(:first-child),.btn-grp .btn:not(:first-child),.btn-grp input[type="button"]:not(:first-child),.btn-grp input[type="submit"]:not(:first-child),.btn-grp input[type="reset"]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0, 0, 0, 0.25)}.btn-grp button:not(.no-btn):not(:last-child),.btn-grp .btn:not(:last-child),.btn-grp input[type="button"]:not(:last-child),.btn-grp input[type="submit"]:not(:last-child),.btn-grp input[type="reset"]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:none;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}/* Inputs*/input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_border);padding:var(--input_padding);border-radius:var(--radius);outline:none;transition:box-shadow var(--animation_ms)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):focus,select:focus,textarea:focus,input[type="checkbox"]:focus,input[type="radio"]:focus{box-shadow:var(--focus_shadow)}input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]):disabled,select:disabled,textarea:disabled,input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:0.6}textarea,select[multiple]{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type="checkbox"],input[type="radio"]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:none;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:0.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type="color"]{padding:0 !important;height:2.35em}input[type="color"]::-webkit-color-swatch-wrapper{padding:0}input[type="color"]::-webkit-color-swatch{border-radius:var(--radius, 0.25rem);cursor:pointer}input[type="date"]::-webkit-calendar-picker-indicator,input[type="month"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="week"]::-webkit-calendar-picker-indicator,input[type="search"]::-webkit-search-cancel-button{filter:var(--date_picker_icon_filter)}/* Tables*/.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}th, td{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}th:last-child,td:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}/* Colors*/.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.is-inv .tc-primary,.bg-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.is-inv .tc-secondary,.bg-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.is-inv .tc-success,.bg-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.is-inv .tc-warning,.bg-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.is-inv .tc-danger,.bg-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}/* Misc*/.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}

package/dist/kempo-vars.css

@@ -1 +1 @@
-:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:2px;--btn_padding:var(--spacer_h) var(--spacer)}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px}
+:root{--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:2px;--btn_padding:var(--spacer_h) var(--spacer);--date_picker_icon_filter:invert(0)}:root,[theme="light"]{color-scheme:light;--c_bg:#f9f9f9;--c_bg__inv:#333;--c_bg__alt:#eee;--c_overscroll:white;--c_border:#ccc;--c_border__inv:var(--d_c_bg_border);--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(41, 100, 210, 0.25);--tc:rgba(0, 0, 0, 0.93);--tc_dark:var(--tc);--tc_light:rgba(255, 255, 255, 0.93);--tc_inv:var(--tc_light);--tc_muted:rgba(0, 0, 0, 0.5);--tc_on_primary:var(--tc_light);--tc_on_secondary:var(--tc_light);--tc_on_success:var(--tc_light);--tc_on_warning:var(--tc_light);--tc_on_danger:var(--tc_light);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#36f;--tc_secondary:#93f;--tc_success:#080;--tc_warning:#f60;--tc_danger:#f03;--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:#ddd;--btn_bg__hover:#ccc;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(0, 0, 0, 0.05);--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)}[auto-theme="dark"]:not([theme="light"]),[theme="dark"]{color-scheme:dark;--c_bg:#333;--c_bg__inv:#f9f9f9;--c_bg__alt:#222;--c_overscroll:black;--c_border:#777;--c_border__inv:#ccc;--c_primary:#36f;--c_primary__hover:#14d;--c_secondary:#93f;--c_secondary__hover:#71d;--c_success:#080;--c_success__hover:#060;--c_warning:#f60;--c_warning__hover:#d40;--c_danger:#f03;--c_danger__hover:#d01;--c_input_accent:#36f;--c_highlight:rgba(0, 89, 255, 0.25);--tc:rgba(255, 255, 255, 0.93);--tc_dark:rgba(0, 0, 0, 0.93);--tc_light:var(--tc);--tc_inv:var(--tc_dark);--tc_muted:rgba(255, 255, 255, 0.5);--tc_on_primary:var(--tc);--tc_on_secondary:var(--tc);--tc_on_success:var(--tc);--tc_on_warning:var(--tc);--tc_on_danger:var(--tc);--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:#8ab4f8;--tc_secondary:#b6f;--tc_success:#6b6;--tc_warning:#f93;--tc_danger:#f57;--btn_bg:#aaa;--btn_bg__hover:#bbb;--btn_tc:rgba(0, 0, 0, 0.93);--btn_transparent__hover:rgba(255, 255, 255, 0.05);--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:white;--input_tc:rgba(0, 0, 0, 0.93);--ff_body:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_heading:"Helvetica Neue", Helvetica, Arial, sans-serif;--ff_mono:Consolas, monaco, monospace;--fs_base:16px;--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--drop_shadow:0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);--link_decoration:underline;--input_border_width:2px;--date_picker_icon_filter:invert(1)}

package/docs/components/sortable.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sortable - Components - Kempo Docs - A Web Components Solution</title>
+  <link rel="stylesheet" href="../kempo/kempo-vars.css" /><link rel="stylesheet" href="../kempo/kempo-styles.css" />
+  <link rel="stylesheet" href="../kempo/kempo-hljs.css" />
+  <script type="module">
+    import Icon from '../kempo/components/Icon.js';
+    import Search from '../kempo/components/Search.js';
+    Icon.pathToIcons = ['../icons'];
+    Search.searchDataUrl = '../search.json';
+  </script>
+</head>
+<body>
+  <k-import src="../nav-1.inc.html"></k-import>
+  <h1 class="ta-center">Sortable</h1>
+  <main>
+    <details
+      class="b r mb"
+    >
+      <summary class="p">Table of Contents</summary>
+      <div class="m mt0 pl">
+        <h6>Examples</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+
+        <h6 class="mt">
+          <a href="#sortable">Sortable JavaScript Reference</a>
+        </h6>
+        <a href="#sortableConstructor">Constructor</a><br />
+        <a href="#sortableRequirements">Requirements</a><br />
+        <a href="#sortableAttributes">Attributes</a>
+
+        <h6 class="mt">
+          <a href="#sortableItem">SortableItem JavaScript Reference</a>
+        </h6>
+        <a href="#sortableItemConstructor">Constructor</a><br />
+        <a href="#sortableItemAttributes">Attributes</a>
+      </div>
+    </details>
+
+    <h3>Description</h3>
+    <p>A component that allows the user to sort items in a list.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-sortable</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 1<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 2<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 3<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 4<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-sortable-item</span>&gt;</span>Item 5<span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable-item</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-sortable</span>&gt;</span></code></pre>
+    <k-sortable>
+      <k-sortable-item>Item 1</k-sortable-item>
+      <k-sortable-item>Item 2</k-sortable-item>
+      <k-sortable-item>Item 3</k-sortable-item>
+      <k-sortable-item>Item 4</k-sortable-item>
+      <k-sortable-item>Item 5</k-sortable-item>
+    </k-sortable>
+
+    <br />
+    <hr />
+
+    <h2 id="sortable">Sortable JavaScript Reference</h2>
+
+    <h3 id="sortableConstructor"><a href="#sortableConstructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h5>
+      <code>new Sortable()</code>
+    </h5>
+
+    <h3 id="sortableRequirements"><a href="#sortableRequirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li>Sortable items must be direct children of the Sortable component.</li>
+    </ul>
+
+    <h3 id="sortableAttributes"><a href="#sortableAttributes" class="no-link">Attributes</a></h3>
+    <h5><code>sorting: boolean</code></h5>
+    <p>Indicates whether the item is currently being sorted.</p>
+
+
+    <br />
+    <hr />
+    <h2 id="sortableItem">SortableItem JavaScript Reference</h2>
+
+    <h3 id="sortableItemConstructor"><a href="#sortableItemConstructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./component.html">Component</a></h6>
+    <h5>
+      <code>new SortableItem()</code>
+    </h5>
+
+    <h3 id="sortableItemAttributes"><a href="#sortableItemAttributes" class="no-link">Attributes</a></h3>
+    <h5><code>sorting: boolean</code></h5>
+    <p>Indicates whether the item is currently being sorted.</p>
+    
+  </main>
+  <script type="module" src="../kempo/components/Import.js"></script> 
+  <script type="module" src="../kempo/components/Sortable.js"></script> 
+</body>
+</html>