kempo-ui 0.0.4 → 0.0.6

package/docs/nav.inc.html

@@ -8,10 +8,6 @@
     <k-icon name="menu"></k-icon>
   </button>
   <a href="%%root%%">Home</a>
-  <k-search
-    class="flex mr"
-    style="min-width:10rem;max-width:24rem"
-  ></k-search>
   <div class="flex"></div>
   <k-theme-switcher></k-theme-switcher>
 </nav>
@@ -23,24 +19,21 @@
   <menu>
     <a href="%%root%%" class="h5 pl0 mb">Home</a>
     <div class="pl mb">
-      <h3>Base Components</h3>
-      <a href="%%root%%components/focuscapture.html">FocusCapture</a>
-
-      <h3>UI Components</h3>
+      <h3>Components</h3>
       <a href="%%root%%components/accordion.html">Accordion</a>
       <a href="%%root%%components/card.html">Card</a>
       <a href="%%root%%components/collapsible.html">Collapsible</a>
       <a href="%%root%%components/persistant-collapsible.html">PersistantCollapsible</a>
       <a href="%%root%%components/content-slider.html">Content Slider</a>
       <a href="%%root%%components/dialog.html">Dialog</a>
-      <a href="%%root%%components/directory-viewer.html">Directory Viewer</a>
+      <a href="%%root%%components/focus-capture.html">FocusCapture</a>
       <a href="%%root%%components/icon.html">Icon</a>
       <a href="%%root%%components/import.html">Import</a>
       <a href="%%root%%components/photo-viewer.html">Photo Viewer</a>
       <a href="%%root%%components/resize.html">Resize</a>
-      <a href="%%root%%components/search.html">Search</a>
       <a href="%%root%%components/show-more.html">Show More</a>
       <a href="%%root%%components/side-menu.html">Side Menu</a>
+      <a href="%%root%%components/sortable.html">Sortable</a>
       <a href="%%root%%components/split.html">Split</a>
       <a href="%%root%%components/table.html">Table</a>
       <a href="%%root%%components/tabs.html">Tabs</a>
@@ -51,12 +44,20 @@
       <a href="%%root%%components/toggle.html">Toggle</a>
     </div>
 
+    <h5 class="mb0">Base Components</h5>
+    <div class="pl mb">
+      <a href="%%root%%components/shadow-component.html">Shadow Component</a>
+      <a href="%%root%%components/light-component.html">Light Component</a>
+      <a href="%%root%%components/hybrid-component.html">Hybrid Component</a>
+    </div>
+
     <h5 class="mb0">Utils</h5>
     <div class="pl mb">
       <a href="%%root%%utils/debounce.html">debounce</a>
       <a href="%%root%%utils/drag.html">drag</a>
       <a href="%%root%%utils/formatTimestamp.html">formatTimestamp</a>
       <a href="%%root%%utils/propConverters.html">propConverters</a>
+      <a href="%%root%%utils/toTitleCase.html">toTitleCase</a>
       <a href="%%root%%utils/watchWindowSize.html">watchWindowSize</a>
     </div>
   </menu>

package/docs/src/components/Dialog.js

@@ -1,4 +1,4 @@
-import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";const firstFocusable=t=>t.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=t=>{const{target:e}=t,o=e.id||e.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(t),t.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(t),t.defaultPrevented||this.close())};handleKeydown=t=>{27===t.keyCode&&this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(t){super.updated(t),t.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const t=this.updateComplete||this.requestUpdate();t&&t.then?t.then(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()}):setTimeout(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const t=firstFocusable(this.shadowRoot);t&&(this.previousFocus=document.activeElement,t.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
+import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-all.min.js";import{boolExists}from"../utils/propConverters.js";import"./Icon.js";import"./FocusCapture.js";const firstFocusable=t=>t.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')[0];export default class Dialog extends ShadowComponent{static properties={opened:{type:Boolean,reflect:!0,converter:boolExists},closeBtn:{type:Boolean,reflect:!0,attribute:"close-btn",converter:boolExists},overlayClose:{type:Boolean,reflect:!0,attribute:"overlay-close",converter:boolExists},confirmText:{type:String,reflect:!0,attribute:"confirm-text"},confirmClasses:{type:String,reflect:!0,attribute:"confirm-classes"},cancelText:{type:String,reflect:!0,attribute:"cancel-text"},cancelClasses:{type:String,reflect:!0,attribute:"cancel-classes"}};constructor(){super(),this.opened=!1,this.closeBtn=!0,this.overlayClose=!0,this.confirmText="",this.confirmClasses="success ml",this.cancelText="",this.cancelClasses="",this.confirmAction=()=>{},this.cancelAction=()=>{},this.closeCallback=()=>{},this.previousFocus=null}handleClick=t=>{const{target:e}=t,o=e.id||e.closest("[id]")?.id;"overlay"===o&&this.overlayClose||"close"===o?this.close():"cancel"===o?(this.cancelAction(t),t.defaultPrevented||this.close()):"confirm"===o&&(this.confirmAction(t),t.defaultPrevented||this.close())};handleKeydown=t=>{27===t.keyCode&&this.close()};connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this.handleKeydown)}updated(t){super.updated(t),t.has("opened")&&this.dispatchEvent(new CustomEvent(this.opened?"opened":"close"))}open(){this.opened=!0,window.addEventListener("keydown",this.handleKeydown);const t=this.updateComplete||this.requestUpdate();t&&t.then?t.then(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()}):setTimeout(()=>{const t=this.shadowRoot.querySelector("[autofocus]")||firstFocusable(this.shadowRoot);t&&t.focus()},0)}close(){this.opened=!1,this.blur(),this.closeCallback(),window.removeEventListener("keydown",this.handleKeydown)}toggle(){this.opened?this.close():this.open()}focus(){const t=firstFocusable(this.shadowRoot);t&&(this.previousFocus=document.activeElement,t.focus())}blur(){this.previousFocus&&this.previousFocus.focus()}hasTitle(){return!!this.querySelector('[slot="title"]')}static styles=css`
 		:host {
 			position: fixed;
 			top: 0;
@@ -57,6 +57,11 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 			background: transparent;
 			box-shadow: 0 0 0 transparent;
 			color: var(--tc);
+			transition: box-shadow var(--animation_ms);
+			border-radius: var(--radius);
+		}
+		#close:focus {
+			box-shadow: var(--focus_shadow);
 		}
 		#close k-icon {
 			pointer-events: none;
@@ -78,36 +83,38 @@ import ShadowComponent from"./ShadowComponent.js";import{html,css}from"../lit-al
 					aria-modal="true"
 					aria-labelledby="title"
 				>
-					<div
-						id="header"
-						class="${this.hasTitle()?"has-title":""}"
-					>
-						<div id="title">
-							<slot name="title"></slot>
-						</div>
-						${this.closeBtn?html`
-							<button id="close" @click=${this.handleClick}>
-								<k-icon name="close"></k-icon>
-							</button>
-						`:""}
-					</div>
-					<div id="body">
-						<slot></slot>
-					</div>
-					${this.cancelText||this.confirmText?html`
-						<div id="footer">
-							${this.cancelText?html`
-								<button id="cancel" class="${this.cancelClasses}" @click=${this.handleClick}>
-									${this.cancelText}
-								</button>
-							`:""}
-							${this.confirmText?html`
-								<button id="confirm" class="${this.confirmClasses}" @click=${this.handleClick}>
-									${this.confirmText}
+					<k-focus-capture>
+						<div
+							id="header"
+							class="${this.hasTitle()?"has-title":""}"
+						>
+							<div id="title">
+								<slot name="title"></slot>
+							</div>
+							${this.closeBtn?html`
+								<button id="close" @click=${this.handleClick}>
+									<k-icon name="close"></k-icon>
 								</button>
 							`:""}
 						</div>
-					`:""}
+						<div id="body">
+							<slot></slot>
+						</div>
+						${this.cancelText||this.confirmText?html`
+							<div id="footer">
+								${this.cancelText?html`
+									<button id="cancel" class="${this.cancelClasses}" @click=${this.handleClick}>
+										${this.cancelText}
+									</button>
+								`:""}
+								${this.confirmText?html`
+									<button id="confirm" class="${this.confirmClasses}" @click=${this.handleClick}>
+										${this.confirmText}
+									</button>
+								`:""}
+							</div>
+						`:""}
+					</k-focus-capture>
 				</div>
 			</div>
 		`}static create(t="",e={}){!1!==e.closeExisting&&document.querySelectorAll("k-dialog").forEach(t=>t.close());const{removeOnClose:o=!0,closeCallback:s=()=>{}}=e,i=new Dialog;return Object.assign(i,{opened:!0,...e,closeCallback:(...t)=>{o&&i.remove(),s(...t)}}),t instanceof HTMLElement||t instanceof DocumentFragment?i.appendChild(t):t&&(i.innerHTML=t),e.width&&i.style.setProperty("--width",e.width),e.minWidth&&i.style.setProperty("--min_width",e.minWidth),e.maxWidth&&i.style.setProperty("--max_width",e.maxWidth),e.height&&i.style.setProperty("--height",e.height),e.minHeight&&i.style.setProperty("--min_height",e.minHeight),e.maxHeight&&i.style.setProperty("--max_height",e.maxHeight),document.body.appendChild(i),i.open(),i}static confirm(t,e,o={}){const s=o.title||"Confirm";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeBtn:!1,overlayClose:!1,confirmText:"Yes",confirmClasses:"success ml",confirmAction:()=>e(!0),cancelText:"No",cancelClasses:"danger",cancelAction:()=>e(!1),...o})}static alert(t,e,o={}){const s=o.title||"Alert";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static error(t,e,o={}){const s=o.title||"Error";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-danger">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}static success(t,e,o={}){const s=o.title||"Success";return Dialog.create(`\n\t\t\t<h5 slot="title" class="pyh px m0 tc-success">${s}</h5>\n\t\t\t<p class="p">${t}</p>\n\t\t`,{closeCallback:e,cancelText:"Ok",...o})}}customElements.define("k-dialog",Dialog);

package/docs/src/components/ShadowComponent.js

@@ -1 +1 @@
-import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{createRenderRoot(){const e=this.attachShadow({mode:"open"}),t=document.createElement("link");t.rel="stylesheet",t.href="/kempo.min.css",e.appendChild(t);const n=this.constructor.styles;if(n){const t=document.createElement("style");Array.isArray(n)?t.textContent=n.map(e=>e.cssText||e).join("\n"):t.textContent=n.cssText||n,e.appendChild(t)}const s=document.createElement("div");return s.style.display="contents",e.appendChild(s),s}}
+import{LitElement}from"../lit-all.min.js";export default class ShadowComponent extends LitElement{static stylesheetPath="/kempo.min.css";createRenderRoot(){const t=this.attachShadow({mode:"open"}),e=document.createElement("link");e.rel="stylesheet",e.href=this.constructor.stylesheetPath,t.appendChild(e);const n=this.constructor.styles;if(n){const e=document.createElement("style");Array.isArray(n)?e.textContent=n.map(t=>t.cssText||t).join("\n"):e.textContent=n.cssText||n,t.appendChild(e)}const s=document.createElement("div");return s.style.display="contents",t.appendChild(s),s}}

package/docs/src/components/Sortable.js

@@ -0,0 +1,45 @@
+import{LitElement,html,css}from"../lit-all.min.js";import drag from"../utils/drag.js";export class Sortable extends LitElement{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}render(){return html`<slot></slot>`}static styles=css`
+		:host {
+			display: block;
+		}
+	`}customElements.define("k-sortable",Sortable);export class SortableItem extends LitElement{static properties={sorting:{type:Boolean,reflect:!0}};constructor(){super(),this.cleanupDrag=null}firstUpdated(){this.setupDrag()}updated(t){super.updated(t),t.has("sorting")&&!this.sorting&&this.setupDrag()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupDrag&&(this.cleanupDrag(),this.cleanupDrag=null)}setupDrag(){this.cleanupDrag&&this.cleanupDrag();const t=this.shadowRoot.getElementById("handle");t&&(this.cleanupDrag=drag({element:t,startCallback:this.handleDragStart,moveCallback:this.handleDragMove,endCallback:this.handleDragEnd}))}handleDragStart=()=>{this.sorting=!0};handleDragMove=({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}`)};handleDragEnd=()=>{this.sorting=!1,this.style.transform="",this.style.zIndex="";const[t,e]=this.sortable.getCursorElement();Array.from(this.sortable.children).forEach(t=>{t.classList.remove("target-before","target-after")}),t&&("before"===e?this.sortable.insertBefore(this,t):"after"===e&&this.sortable.insertBefore(this,t.nextSibling),this.sortable.dispatchEvent(new CustomEvent("sort",{bubbles:!0})))};get sortable(){return this.closest("k-sortable")}render(){return html`
+			<div id="handle">
+				<k-icon name="drag-handle"></k-icon>
+			</div>
+			<div id="content" class="p pl0">
+				<slot></slot>
+			</div>
+		`}static styles=css`
+		:host {
+			display: block;
+			border: 1px solid var(--c_border);
+			user-select: none;
+			position: relative;
+		}
+		:host([sorting]){
+			opacity: 0.8;
+		}
+		#handle {
+			display: inline-block;
+			cursor: pointer;
+			padding: var(--spacer);
+		}
+		#content {
+			display: inline-block;
+		}
+		:host(.target-before)::before,
+		:host(.target-after)::after {
+			content: '';
+			position: absolute;
+			left: 0;
+			right: 0;
+			height: 4px;
+			background-color: var(--c_primary);
+		}
+		:host(.target-before)::before {
+			top: -2px;
+		}
+		:host(.target-after)::after {
+			bottom: -2px;
+		}
+	`}customElements.define("k-sortable-item",SortableItem);

package/docs/src/components/Table.js

@@ -0,0 +1,151 @@
+import{html,css,unsafeStatic,literal}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import toTitleCase from"../utils/toTitleCase.js";import{boolExists}from"../utils/propConverters.js";const selected=Symbol("selected"),hidden=Symbol("hidden"),index=Symbol("index"),editing=Symbol("editing");export default class Table extends ShadowComponent{static properties={enablePages:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:boolExists,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:boolExists,attribute:"case-sensitive-filters"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};static styles=css`
+    :host {
+      display: block;
+      width: 100%;
+      overflow: auto;
+      margin-bottom: var(--spacer);
+    }
+    #wrapper {
+      width: min-content;
+      border: 1px solid var(--c_border);
+      border-radius: var(--radius);
+    }
+    #table {
+      width: min-content;
+    }
+    #fields,
+    .record {
+      display: flex;
+    }
+    #fields {
+      background-color: var(--c_bg__alt);
+      border-bottom: 1px solid var(--c_border);
+    }
+    .record:not([editing="true"]) .cell:not(.controls),
+    #fields .cell:not(.controls) {
+      padding: calc(0.5 * var(--spacer)) var(--spacer);
+    }
+    .cell {
+      display: flex;
+      align-items: center;
+    }
+    .cell:not(:first-child) {
+      border-left: 1px solid var(--c_border);
+    }
+    .record:not(:last-child) .cell {
+      border-bottom: 1px solid var(--c_border);
+    }
+    #top, #bottom {
+      display: flex;
+      width: 100%;
+    }
+    #top slot {
+      display: block;
+      width: 100%;
+      border-bottom: 1px solid var(--c_border);
+    }
+    #bottom slot {
+      display: block;
+      width: 100%;
+      border-top: 1px solid var(--c_border);
+    }
+    :host(:not([top-controls])) #top,
+    :host(:not([bottom-controls])) #bottom {
+      display: none;
+    }
+    .field-select,
+    .selection {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .field-select input,
+    .selection input {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+    .icon-sort {
+      float: right;
+      opacity: 0.5;
+    }
+  `;constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1)}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[selected]=!!t.target.checked,this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.allOnPageSelected())}this.updateContainerWidths()}updateContainerWidths(){const e=this.columnSizes.total+"px",t=this.shadowRoot.getElementById("fields"),s=this.shadowRoot.getElementById("top"),i=this.shadowRoot.getElementById("bottom"),r=this.shadowRoot.getElementById("records");t&&(t.style.width=e),s&&(s.style.width=e),i&&(i.style.width=e),r&&(r.style.width=e)}renderFieldsTemplate(){this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls");const e=[];return this.enableSelection&&e.push(html`
+        <div class="field controls cell field-select" style="width: 40px">
+          <input 
+            type="checkbox" 
+            id="select-all"
+            @change=${this.handleSelectAllChange}
+          />
+        </div>
+      `),this.hasBeforeControls()&&e.push(html`
+        <div class="field cell field-before-controls" style="width: ${this.columnSizes.beforeControls}px"></div>
+      `),this.fields.forEach(({name:t,label:s,hidden:i})=>{if(i)return;const r=this.sort.find(e=>e.name===t),o=this.sort.length>0&&this.sort[this.sort.length-1].name===t,l=r?r.asc?"sort-asc":"sort-desc":"";e.push(html`
+        <div 
+          class="field cell ${l}"
+          style="width: ${this.columnSizes[t]}px; ${this.enableSorting?"cursor: pointer;":""}"
+          @click=${this.enableSorting?()=>this.handleFieldClick(t):null}
+        >
+          ${s}
+          ${o?html`<k-icon name="${r.asc?"arrow-down":"arrow-up"}" class="icon-sort"></k-icon>`:""}
+        </div>
+      `)}),this.hasAfterControls()&&e.push(html`
+        <div class="field cell field-after-controls" style="width: ${this.columnSizes.afterControls}px"></div>
+      `),e}renderRecordsTemplate(){let e=this.getDisplayedRecords(),t=0,s=this.pageSize;this.enablePages&&(t=(this.currentPage-1)*this.pageSize,s=t+this.pageSize,e=e.slice(t,s));let i=null,r=0;const o=e.map((e,s)=>null!==e?this.renderRecordTemplate(e):(null===i&&(i=t+s),r++,html`<div class="record fetching"><div class="cell">Loading...</div></div>`));return null===i||this.fetchPending||setTimeout(()=>{this.fetchPending||this.dispatchEvent(new CustomEvent("fetchRecords",{detail:{start:i,count:r},bubbles:!0}))},0),o}renderRecordTemplate(e){const t=[];return this.enableSelection&&t.push(html`
+        <div class="cell selection controls" style="width: 40px">
+          <input 
+            type="checkbox" 
+            .checked=${e[selected]}
+            @change=${t=>this.handleRecordSelectionChange(e,t)}
+          />
+        </div>
+      `),this.hasBeforeControls()&&t.push(this.renderBeforeControlsTemplate()),this.fields.forEach(({name:s,formatter:i,calculator:r,type:o,editor:l,hidden:n})=>{if(n)return;let d=e[s]||"";t.push(html`
+        <div class="cell" data-field=${s} style="width: ${this.columnSizes[s]}px">
+          ${e[editing]?this.renderEditingCell(e,s,d,r,l,o):this.renderDisplayCell(e,s,d,r,i)}
+        </div>
+      `)}),this.hasAfterControls()&&t.push(this.renderAfterControlsTemplate()),html`
+      <div class="record ${e[editing]?"editing":""}" data-index=${e[index]}>
+        ${t}
+      </div>
+    `}renderEditingCell(e,t,s,i,r,o){if(i)return html`<input disabled .value=${i(e,this)} />`;if(r){const e=r(s);return html`${e}`}switch(o||typeof s){case"number":return html`<input type="number" .value=${s} />`;case"date":return html`<input type="date" .value=${s} />`;case"boolean":return html`
+            <select .value=${s}>
+              <option value="true" ?selected=${s}>True</option>
+              <option value="false" ?selected=${!s}>False</option>
+            </select>
+          `;default:return html`<input type="text" .value=${s} />`}}renderDisplayCell(e,t,s,i,r){return i?i(e,this):r?r(s):s}renderBeforeControlsTemplate(){const e=[];return this.querySelectorAll('[slot="before"]').forEach(t=>{const s=new t.constructor;Array.from(t.attributes).forEach(e=>{"slot"!==e.name&&s.setAttribute(e.name,e.value)}),t.innerHTML&&(s.innerHTML=t.innerHTML),e.push(s)}),html`
+      <div class="cell controls controls-before" style="width: ${this.columnSizes.beforeControls}px">
+        ${e}
+      </div>
+    `}renderAfterControlsTemplate(){const e=[];return this.querySelectorAll('[slot="after"]').forEach(t=>{const s=new t.constructor;Array.from(t.attributes).forEach(e=>{"slot"!==e.name&&s.setAttribute(e.name,e.value)}),t.innerHTML&&(s.innerHTML=t.innerHTML),e.push(s)}),html`
+      <div class="cell controls controls-after" style="width: ${this.columnSizes.afterControls}px">
+        ${e}
+      </div>
+    `}hasBeforeControls(){return!!this.querySelector('[slot="before"]')}hasAfterControls(){return!!this.querySelector('[slot="after"]')}hasTopControls(){return!!this.querySelector('[slot="top"]')}hasBottomControls(){return!!this.querySelector(":scope > :not([slot])")}editRecord(e){e[editing]=!0;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.add("editing"),t.setAttribute("editing","true"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";if(t.innerHTML="",i.calculator){const s=document.createElement("input");s.disabled=!0,s.value=i.calculator(e,this),t.appendChild(s)}else if(i.editor)t.appendChild(i.editor(r));else{const e=i.type||typeof r,s=Table.editors[e]||Table.editors.string;t.appendChild(s(r))}}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!0},bubbles:!0}))}saveEditedRecord(e){const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i&&!i.calculator){const i=t.querySelector("input, select");i&&(e[s]=i.value)}}),e[editing]=!1,t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}cancelEditedRecord(e){e[editing]=!1;const t=this.shadowRoot.querySelector(`.record[data-index="${e[index]}"]`);t&&(t.classList.remove("editing"),t.removeAttribute("editing"),t.querySelectorAll(".cell[data-field]").forEach(t=>{const s=t.dataset.field,i=this.fields.find(e=>e.name===s);if(i){const r=e[s]||"";i.calculator?t.textContent=i.calculator(e,this):i.formatter?t.innerHTML=i.formatter(r):t.textContent=r}})),this.dispatchEvent(new CustomEvent("editingChange",{detail:{record:e,editing:!1},bubbles:!0}))}recordIsEditing(e){return e[editing]}getCurrentPage(){return this.currentPage}getTotalPages(){return Math.ceil(this.getDisplayedRecords().length/this.pageSize)}setPage(e){e<1||e>this.getTotalPages()||(this.currentPage=e,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageChange",{bubbles:!0})))}firstPage(){1!==this.currentPage&&this.setPage(1)}nextPage(){this.currentPage<this.getTotalPages()&&this.setPage(this.currentPage+1)}prevPage(){this.currentPage>1&&this.setPage(this.currentPage-1)}lastPage(){this.currentPage!==this.getTotalPages()&&this.setPage(this.getTotalPages())}setPageSize(e){this.pageSize=e,this.currentPage=1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("pageSizeChange",{bubbles:!0}))}getPageSize(){return this.pageSize}getPageSizeOptions(){return this.pageSizeOptions}setPageSizeOptions(e){this.pageSizeOptions=e,this.requestUpdate()}setData({records:e=!1,fields:t=!1,pageSize:s=!1,pageSizeOptions:i=!1,currentPage:r=!1,enableSelection:o}={}){let l=!1,n=this.getTotalPages(),d=this.currentPage;e&&(this.records=e.map(e=>({...e})),this.records.forEach((e,t)=>{e[index]=t,e[selected]=!1,e[hidden]=!1,e[editing]=!1}),this.fields=t||Table.extractFieldsFromRecords(this.records),l=!0),s&&(this.pageSize=s,l=!0),i&&(this.pageSizeOptions=i),r&&(this.currentPage=r,l=!0),void 0!==o&&(this.enableSelection=o,l=!0),l&&this.requestUpdate();const a=this.getTotalPages();a!==n&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),d>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.requestUpdate(),this.dispatchEvent(new CustomEvent("recordsSet",{detail:{records:e},bubbles:!0}));const r=this.getTotalPages();r!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:this.getTotalPages()},bubbles:!0})),i>r&&this.setPage(r)}setupFetchRecords(e,t){const s=this.records.length,i=this.getTotalPages();if(s<e){this.records.length=e,this.records.fill(null,s),this.requestUpdate();const t=this.getTotalPages();t!==i&&setTimeout(()=>{this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0}))},0)}this.addEventListener("fetchRecords",async e=>{if(this.fetchPending)return;this.fetchPending=!0;const{start:s,count:i}=e.detail,r=await t(s,i);r.forEach((e,t)=>{e[index]=s+t,void 0===e[selected]&&(e[selected]=!1),void 0===e[hidden]&&(e[hidden]=!1),void 0===e[editing]&&(e[editing]=!1)}),this.records.splice(s,r.length,...r),this.fetchPending=!1,this.requestUpdate()})}addRecord(e){e[selected]=!1,e[hidden]=!1,e[index]=this.records.length,this.records.push(e),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordAdded",{detail:{record:e},bubbles:!0}))}updateRecord(e,t){let s=!1,i=this.records.find(t=>t===e);if(i||void 0===e[index]||(i=this.records[e[index]]),Object.keys(t).forEach(e=>{i.hasOwnProperty(e)&&(i[e]=t[e],s=!0)}),s){const e=(this.currentPage-1)*this.pageSize,t=e+this.pageSize;(!this.enablePages||i[index]>=e&&i[index]<t)&&this.requestUpdate()}}deleteRecord(e){let t=this.records.find(t=>t===e),s=this.getTotalPages();if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0})),this.dispatchEvent(new CustomEvent("recordDeleted",{detail:{index:e},bubbles:!0}));const i=this.getTotalPages();this.currentPage>i&&this.setPage(i),i!==s&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:i},bubbles:!0}))}}deleteSelected(){let e=this.getTotalPages();this.getSelectedRecords().forEach(e=>{let t=this.records.find(t=>t===e);if(t||void 0===e[index]||(t=this.records[e[index]]),t){const e=this.records.indexOf(t);this.records.splice(e,1)}}),this.records.forEach((e,t)=>{e[index]=t}),this.requestUpdate();const t=this.getTotalPages();this.currentPage>t&&this.setPage(t),t!==e&&this.dispatchEvent(new CustomEvent("pageCountChanged",{detail:{totalPages:t},bubbles:!0})),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))}getSelectedRecords(){return this.records.filter(e=>e[selected])}selectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!0;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}deselectAllOnPage(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)this.records[s][selected]=!1;this.requestUpdate(),setTimeout(()=>{this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))},0)}allOnPageSelected(){const e=(this.currentPage-1)*this.pageSize,t=Math.min(e+this.pageSize,this.records.length);for(let s=e;s<t;s++)if(!this.records[s][selected])return!1;return!0}sortBy(e,t=!0){this.sort=this.sort.filter(t=>t.name!==e),this.sort.push({name:e,asc:t}),this.requestUpdate()}hideRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})))}showRecord(e){let t=this.records.find(t=>t===e);t||void 0===e[index]||(t=this.records[e[index]]),t&&(t[hidden]=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})))}showAllRecords(){this.records.forEach(e=>{e[hidden]=!1}),this.filters.length&&(this.filters=[],this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0}))),this.requestUpdate(),this.dispatchEvent(new CustomEvent("recordShown",{bubbles:!0})),this.dispatchEvent(new CustomEvent("allRecordsShown",{bubbles:!0}))}addFilter(e,t,s){this.filters.push({field:e,condition:t,value:s}),this.dispatchEvent(new CustomEvent("filterAdded",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),this.requestUpdate()}removeFilter(e,t,s,i=!0){const r=this.filters.findIndex(i=>i.field===e&&i.condition===t&&i.value===s);-1!==r&&(this.records.forEach(i=>{this.testFilter(i,e,t,s)||(i[hidden]=!1)}),this.filters.splice(r,1),this.dispatchEvent(new CustomEvent("filterRemoved",{bubbles:!0})),this.dispatchEvent(new CustomEvent("filterChange",{bubbles:!0})),i&&this.requestUpdate())}testFilter(e,t,s,i){let r=e[t],o=i;switch(this.caseSensitiveFilters||"string"!=typeof r||"string"!=typeof i||(r=r.toLowerCase(),o=i.toLowerCase()),s){case"equals":return r===o;case"not-equals":return r!==o;case"contains":return r.includes(o);case"not-contains":return!r.includes(o);case"greater-than":return r>o;case"less-than":return r<o;case"greater-than-or-equal":return r>=o;case"less-than-or-equal":return r<=o;default:return!0}}removeAllFilters(){this.filters.length&&(this.filters.forEach(({field:e,condition:t,value:s})=>{this.removeFilter(e,t,s,!1)}),this.requestUpdate())}search(e){const t=e.trim().toLowerCase();let s=!1;this.records.forEach(e=>{if(e[hidden])return;let i=!1;this.fields.forEach(({name:s})=>{(e[s]?.toString().toLowerCase()||"").includes(t)&&(i=!0)}),e[hidden]!==!i&&(e[hidden]=!i,s=!0)}),s&&(this.dispatchEvent(new CustomEvent("recordHidden",{bubbles:!0})),this.requestUpdate()),this.dispatchEvent(new CustomEvent("search",{detail:{term:e},bubbles:!0}))}getDisplayedRecords(){this.filters.forEach(({field:e,condition:t,value:s})=>{this.records.forEach(i=>{null!==i&&(this.testFilter(i,e,t,s)||(i[hidden]=!0))})});let e=this.records.filter(e=>null===e||!e[hidden]);return this.sort.forEach(({name:t,asc:s})=>{e.sort((e,i)=>null===e||null===i?0:e[t]<i[t]?s?-1:1:e[t]>i[t]?s?1:-1:0)}),e}getHiddenRecords(){return this.records.filter(e=>e[hidden])}calculateColumnSizes(){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,this.columnSizes.total+=e.size;else{let t=0;this.records.slice(0,100).forEach(s=>{if(null===s)return;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.requestUpdate(),this.dispatchEvent(new CustomEvent("fieldVisibilityChanged",{detail:{field:s},bubbles:!0})),this.dispatchEvent(new CustomEvent(t?"fieldHidden":"fieldShown",{detail:{field:s},bubbles:!0})))}hideField(e){this.setFieldHiddenState(e,!0)}showField(e){this.setFieldHiddenState(e,!1)}reorderFields(e){const t=[];e.forEach(e=>{const s=this.fields.find(t=>t.name===e);s&&t.push(s)}),this.fields=t,this.requestUpdate()}render(){return this.records&&this.fields?(this.calculateColumnSizes(),this.hasTopControls()?this.setAttribute("top-controls","true"):this.removeAttribute("top-controls"),this.hasBottomControls()?this.setAttribute("bottom-controls","true"):this.removeAttribute("bottom-controls"),html`
+      <div id="wrapper">
+        <div id="top" style="width: ${this.columnSizes.total}px"><slot name="top"></slot></div>
+        <div id="table">
+          <div id="fields" style="width: ${this.columnSizes.total}px">
+            ${this.renderFieldsTemplate()}
+          </div>
+          <div id="records" style="width: ${this.columnSizes.total}px">
+            ${this.renderRecordsTemplate()}
+          </div>
+        </div>
+        <div id="bottom" style="width: ${this.columnSizes.total}px"><slot></slot></div>
+      </div>
+      <div style="display: none">
+        <slot name="before"></slot>
+        <slot name="after"></slot>
+      </div>
+    `):html`
+        <div id="wrapper">
+          <div id="top"><slot name="top"></slot></div>
+          <div id="table">
+            <div id="fields"></div>
+            <div id="records"></div>
+          </div>
+          <div id="bottom"><slot></slot></div>
+        </div>
+        <div style="display: none">
+          <slot name="before"></slot>
+          <slot name="after"></slot>
+        </div>
+      `}static 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/docs/src/components/Toast.js

@@ -0,0 +1,141 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";import"./Icon.js";export default class Toast extends ShadowComponent{static properties={actionHtml:{type:String,reflect:!0,attribute:"action-html"},closeHtml:{type:String,reflect:!0,attribute:"close-html"},timeout:{type:Number,reflect:!0},opened:{type:Boolean,reflect:!0},hasAction:{type:Boolean,reflect:!0,attribute:"has-action"},hasClose:{type:Boolean,reflect:!0,attribute:"has-close"},hasIcon:{type:Boolean,reflect:!0,attribute:"has-icon"},position:{type:String,reflect:!0},animating:{type:String,reflect:!0}};static styles=css`
+    @keyframes toast-show-bottom {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes toast-hide-bottom {
+      from { opacity: 1; transform: translateY(0); }
+      to { opacity: 0; transform: translateY(20px); }
+    }
+    @keyframes toast-show-top {
+      from { opacity: 0; transform: translateY(-20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    @keyframes toast-hide-top {
+      from { opacity: 1; transform: translateY(0); }
+      to { opacity: 0; transform: translateY(-20px); }
+    }
+    @keyframes toast-show-left {
+      from { opacity: 0; transform: translateX(-20px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes toast-hide-left {
+      from { opacity: 1; transform: translateX(0); }
+      to { opacity: 0; transform: translateX(-20px); }
+    }
+    @keyframes toast-show-right {
+      from { opacity: 0; transform: translateX(20px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    @keyframes toast-hide-right {
+      from { opacity: 1; transform: translateX(0); }
+      to { opacity: 0; transform: translateX(20px); }
+    }
+
+    :host {
+      display: none;
+      min-width: 16rem;
+      max-width: calc(100% - (2 * var(--spacer, 1rem)));
+      background-color: var(--c_bg, #ffffff);
+      border-radius: var(--radius, 0.375rem);
+    }
+
+    :host([opened]) {
+      display: flex;
+    }
+
+    :host([animating="in"][position*="bottom"]) {
+      animation: toast-show-bottom var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="out"][position*="bottom"]) {
+      animation: toast-hide-bottom var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="in"][position*="top"]) {
+      animation: toast-show-top var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="out"][position*="top"]) {
+      animation: toast-hide-top var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="in"][position*="left"]:not([position*="top"]):not([position*="bottom"])) {
+      animation: toast-show-left var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="out"][position*="left"]:not([position*="top"]):not([position*="bottom"])) {
+      animation: toast-hide-left var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="in"][position*="right"]:not([position*="top"]):not([position*="bottom"])) {
+      animation: toast-show-right var(--animation_ms, 300ms) ease forwards;
+    }
+    :host([animating="out"][position*="right"]:not([position*="top"]):not([position*="bottom"])) {
+      animation: toast-hide-right var(--animation_ms, 300ms) ease forwards;
+    }
+
+    #icon {
+      padding: var(--spacer, 1rem);
+      padding-right: 0;
+    }
+
+    #message {
+      padding: var(--spacer, 1rem);
+      flex: 1 1 auto;
+    }
+
+    :host(:not([has-close])) #close,
+    :host(:not([has-action])) #action,
+    :host(:not([has-icon])) #icon {
+      display: none;
+    }
+
+    #action {
+      background: transparent;
+      border: none;
+      color: var(--tc_primary, blue);
+      cursor: pointer;
+      padding: var(--spacer, 1rem);
+    }
+
+    #action:hover {
+      color: var(--tc_primary__hover, lightblue);
+    }
+
+    #close {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      padding: var(--spacer, 1rem);
+      opacity: 0.7;
+      transition: opacity var(--animation_ms, 300ms);
+    }
+
+    #close:hover {
+      opacity: 1;
+    }
+
+    /* Theme classes */
+    :host(.bg-success) {
+      background-color: var(--c_success, #dcfce7);
+      color: var(--tc_on_success, #166534);
+    }
+
+    :host(.bg-warning) {
+      background-color: var(--c_warning, #fef3c7);
+      color: var(--tc_on_warning, #92400e);
+    }
+
+    :host(.bg-danger) {
+      background-color: var(--c_danger, #fee2e2);
+      color: var(--tc_on_danger, #991b1b);
+    }
+  `;constructor(){super(),this.actionHtml="",this.closeHtml="",this.timeout=0,this.opened=!1,this.hasAction=!1,this.hasClose=!1,this.hasIcon=!1,this.position="bottom center",this.animating="",this.actionCallback=()=>{},this.closeCallback=()=>{},this.timeoutId=null,this.closing=!1}updated(t){super.updated(t),t.has("opened")&&this.opened&&(this.hasAction=!!this.querySelector('[slot="action"]'),this.hasClose=!!this.querySelector('[slot="close"]'),this.hasIcon=!!this.querySelector('[slot="icon"]'))}connectedCallback(){super.connectedCallback(),this.addEventListener("animationend",this.handleAnimationEnd)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("animationend",this.handleAnimationEnd),clearTimeout(this.timeoutId)}handleActionClick=()=>{!1!==this.actionCallback()&&this.close()};handleCloseClick=()=>{this.close()};handleAnimationEnd=t=>{t.animationName.includes("toast-hide")?(this.animating="",this.opened=!1,this.dispatchEvent(new CustomEvent("close")),this.dispatchEvent(new CustomEvent("openchange")),this.closeCallback(),this.closing=!1):t.animationName.includes("toast-show")&&(this.animating="")};open(){this.closing=!1,this.animating="in",this.opened=!0,this.timeout&&(clearTimeout(this.timeoutId),this.timeoutId=setTimeout(()=>{this.close()},this.timeout)),this.dispatchEvent(new CustomEvent("open")),this.dispatchEvent(new CustomEvent("openchange"))}close(){clearTimeout(this.timeoutId),this.opened&&!this.closing&&(this.closing=!0,this.animating="out")}render(){return html`
+      <div id="icon">
+        <slot name="icon"></slot>
+      </div>
+      <div id="message">
+        <slot></slot>
+      </div>
+      <button id="action" class="no-style" @click="${this.handleActionClick}">
+        <slot name="action"></slot>
+      </button>
+      <button id="close" class="no-style" @click="${this.handleCloseClick}">
+        <slot name="close"></slot>
+      </button>
+    `}static create(t,o={}){let{position:e="auto",removeOnClose:n=!0,closeCallback:s=()=>{},action:a=!1,close:i=!1,icon:r=!1,timeout:c=5e3}=o;"auto"===e&&(e=window.innerWidth<=768?"bottom center":"top right");let l=document.querySelector(`k-toast-container[position="${e}"]`);l||(l=new ToastContainer(e),document.body.appendChild(l));const m=new Toast;m.position=e,m.timeout=c,m.innerHTML=t,m.actionCallback=o.actionCallback||(()=>{});const h=s;if(m.closeCallback=(...t)=>{n&&(m.remove(),0===l.children.length&&l.remove()),h(...t)},r){const t=document.createElement("span");t.slot="icon",r instanceof HTMLElement?t.appendChild(r):t.innerHTML=r,m.appendChild(t)}if(a){const t=document.createElement("span");t.slot="action",a instanceof HTMLElement?t.appendChild(a):t.innerHTML=a,m.appendChild(t)}if(i){const t=document.createElement("span");t.slot="close",i instanceof HTMLElement?t.appendChild(i):t.innerHTML=i,m.appendChild(t)}return l.appendChild(m),m.open(),m}static success(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="check"></k-icon>',...o});return e.classList.add("bg-success"),e}static warning(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="warning"></k-icon>',...o});return e.classList.add("bg-warning"),e}static error(t,o={}){const e=Toast.create(t,{icon:'<k-icon name="error"></k-icon>',...o});return e.classList.add("bg-danger"),e}}class ToastContainer extends HTMLElement{constructor(t="bottom center"){super(),this.position=t.toLowerCase(),this.setAttribute("position",this.position),this.applyStyles()}applyStyles(){this.style.cssText="\n      position: fixed;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      z-index: 1000;\n      pointer-events: auto;\n      padding: 32px;\n      box-sizing: border-box;\n      max-width: 100%;\n      max-height: 100%;\n      overflow: visible;\n    ";new MutationObserver(()=>{Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")})}).observe(this,{childList:!0}),Array.from(this.children).forEach(t=>{"K-TOAST"===t.tagName&&(t.style.filter="drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05))")});const[t,o]=this.position.split(" ");"top"===t?this.style.top="0":this.style.bottom="0","left"===o?(this.style.left="0",this.style.alignItems="flex-start"):"right"===o?(this.style.right="0",this.style.alignItems="flex-end"):"center"===o&&("top"===t||"bottom"===t?(this.style.left="50%",this.style.transform="translateX(-50%)",this.style.alignItems="center"):(this.style.top="50%",this.style.left="50%",this.style.transform="translate(-50%, -50%)"))}static getContainer(t){let o=document.querySelector(`k-toast-container[position="${t}"]`);return o||(o=new ToastContainer(t),document.body.appendChild(o)),o}}window.customElements.define("k-toast",Toast),window.customElements.define("k-toast-container",ToastContainer);

package/docs/src/components/Toggle.js

@@ -0,0 +1,74 @@
+import{html,css}from"../lit-all.min.js";import ShadowComponent from"./ShadowComponent.js";export default class Toggle extends ShadowComponent{static properties={value:{type:Boolean,reflect:!0}};static styles=css`
+    :host {
+      --switch_height: 2rem;
+      --switch_width: 3rem;
+      --switch_border: 1px solid var(--c_border);
+      --switch_background__off: var(--c_bg__alt);
+      --switch_background__on: var(--c_success);
+      --handle_size__off: 1rem;
+      --handle_size__on: 1.5rem;
+      --handle_border: 1px solid var(--c_border);
+      --handle_background__off: var(--c_border);
+      --handle_background__on: white;
+
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin-bottom: var(--spacer);
+      border-radius: 999rem;
+      outline: none;
+    }
+
+    :host(:focus) {
+      outline: 2px solid var(--c_primary, blue);
+      outline-offset: 2px;
+    }
+
+    #switch {
+      display: flex;
+      align-items: center;
+      width: var(--switch_width);
+      height: var(--switch_height);
+      border: var(--switch_border);
+      background: var(--switch_background__off);
+      border-radius: 999rem;
+      margin-right: var(--spacer);
+    }
+
+    #handle {
+      --margin: calc( (var(--switch_height) - var(--handle_size__off)) / 2);
+      width: var(--handle_size__off);
+      height: var(--handle_size__off);
+      border: var(--handle_border);
+      background: var(--handle_background__off);
+      border-radius: 999rem;
+      transform: translateX(var(--margin));
+      transition: width var(--animation_ms, 256ms), height var(--animation_ms, 256ms), transform var(--animation_ms, 256ms);
+    }
+
+    :host([value]) #switch {
+      background: var(--switch_background__on);
+    }
+
+    :host([value]) #handle {
+      --m: calc( (var(--switch_height) - var(--handle_size__on)) / 2);
+      --d: calc( var(--switch_width) - var(--handle_size__on) - var(--m));
+      width: var(--handle_size__on);
+      height: var(--handle_size__on);
+      background: var(--handle_background__on);
+      transform: translateX(var(--d));
+    }
+
+    #label {
+      display: block;
+      flex: 1 1 auto;
+      padding: 0;
+    }
+  `;constructor(){super(),this.value=!1,this.tabIndex=0}updated(e){super.updated(e),e.has("value")&&this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}handleClick=()=>{this.toggle()};handleKeyDown=e=>{["Space","Enter"].includes(e.code)&&(e.preventDefault(),this.toggle())};on(){return this.value=!0,this.dispatchEvent(new CustomEvent("on",{detail:{value:!0},bubbles:!0})),this}off(){return this.value=!1,this.dispatchEvent(new CustomEvent("off",{detail:{value:!1},bubbles:!0})),this}toggle(){return this.value?this.off():this.on(),this.dispatchEvent(new CustomEvent("toggle",{detail:{value:this.value},bubbles:!0})),this}render(){return html`
+      <div id="switch">
+        <div id="handle"></div>
+      </div>
+      <label id="label">
+        <slot></slot>
+      </label>
+    `}}window.customElements.define("k-toggle",Toggle);

package/docs/src/components/tableControls/DeleteRecord.js

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