@spectric/ui 0.0.11 → 0.0.12

package/dist/style.css

@@ -1 +1 @@
-spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden}spectric-table .table-wrapper{overflow:auto;flex-grow:1}spectric-table tr{text-align:center}spectric-table-body tr:nth-child(odd){background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table-body tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:0}spectric-table-header .header-contents.sortable{cursor:pointer}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-body{display:table-row-group}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table td{border:1px solid transparent}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}.spectric-tooltip-portal{position:fixed;z-index:9999;pointer-events:none;--spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%) }.spectric-tooltip-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);border-radius:var(--spectric-border-radius,.4em);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-background-hover,rgba(141, 141, 141, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}
+spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden}spectric-table .table-wrapper{overflow:auto;flex-grow:1;position:relative}spectric-table tr{text-align:center}spectric-table tr.odd{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle}spectric-table tr{line-height:var(--rowHeight)}spectric-table td{height:var(--rowHeight)}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:0}spectric-table-header .header-contents.sortable{cursor:pointer}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table td{border:1px solid transparent}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}spectric-table-body{display:table-row-group}spectric-table-virtual-body{display:contents}spectric-table-virtual-body .virtual-scroll-spacer td{padding:0;border:0px}.spectric-tooltip-portal{position:fixed;z-index:9999;pointer-events:none;--spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%) }.spectric-tooltip-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);border-radius:var(--spectric-border-radius,.4em);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-background-hover,rgba(141, 141, 141, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/classes/DisposibleElement.ts

@@ -3,16 +3,17 @@ import { LitElement } from "lit-element/lit-element.js";
 export interface IDisposable {
     dispose(): void;
 }
+type DisposableTarget = HTMLElement | Promise<HTMLElement> | (() => HTMLElement)
+let listeners = 0;
 class DomListener implements IDisposable {
 
     private _handler?: (e: any) => void;
     private _node?: EventTarget;
-    private __target?: EventTarget | Promise<EventTarget>
     private readonly _type: string;
     private readonly _options: boolean | AddEventListenerOptions;
 
-    constructor(node: EventTarget | Promise<EventTarget>, type: string, handler: (e: any) => void, options?: boolean | AddEventListenerOptions) {
-        this.__target = node
+    constructor(node: DisposableTarget, type: string, handler: (e: any) => void, options?: boolean | AddEventListenerOptions) {
+
         this._handler = handler;
         this._type = type;
         this._handler = handler;
@@ -26,10 +27,15 @@ class DomListener implements IDisposable {
                 this._node = targetNode
                 this._node.addEventListener(this._type, this._handler, this._options);
             })
+        } else if (typeof node === "function") {
+            this._node = node()
+            this._node.addEventListener(this._type, this._handler, this._options);
         } else {
             this._node = node
             this._node.addEventListener(this._type, this._handler, this._options);
         }
+        listeners += 1
+        //console.log(listeners)
     }
 
     dispose(): void {
@@ -38,19 +44,19 @@ class DomListener implements IDisposable {
             return;
         }
         if (this._node) {
-            console.log(`removing event ${this._type} from `, this._node, this.__target instanceof Promise)
+            listeners -= 1
             this._node.removeEventListener(this._type, this._handler, this._options);
         }
         // Prevent leakers from holding on to the dom or handler func
-        this.__target = undefined;
         this._node = undefined;
         this._handler = undefined;
+        //console.log(listeners)
     }
 }
 export class DisposableElement extends LitElement {
     private readonly _disposables = new Set<IDisposable>();
     private _isDisposed = false;
-    private _disposableListeners: { target: HTMLElement | Promise<HTMLElement>, event: string, handler: any }[] = []
+    private _disposableListeners: { target: DisposableTarget, event: string, handler: any }[] = []
     private _connected: boolean = false;
     /**
      * Creates listeners on a target that will automatically get cleaned up when the element is removed from the DOM. This prevents memory leaks.
@@ -58,9 +64,9 @@ export class DisposableElement extends LitElement {
      * @param event The event name
      * @param handler The event handler
      */
-    public addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void
-    public addDisposableListener<K extends keyof SpectricGlobalEvents>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: SpectricGlobalEvents[K]): void
-    public addDisposableListener(target: HTMLElement | Promise<HTMLElement>, event: string, handler: any): void {
+    public addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: DisposableTarget, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void
+    public addDisposableListener<K extends keyof SpectricGlobalEvents>(target: DisposableTarget, event: K, handler: SpectricGlobalEvents[K]): void
+    public addDisposableListener(target: DisposableTarget, event: string, handler: any): void {
         let exists = this._disposableListeners.find(d => d.event === event && d.target === target && d.handler === handler)
         if (exists) {
             console.warn("Event handler already exists best practice is to add the this in the constructor")

package/src/components/Bitdisplay.ts

@@ -12,13 +12,13 @@ export interface BitDisplayProps {
     /** Array buffer to display */
     arrayBuffer: ArrayBuffer;
     /** Bits per line */
-    frameWidth: number;
+    frameWidth?: number;
     /** How many pixels per bit */
-    scale: number;
+    scale?: number;
     /** Width of the display canvas */
-    width: number;
+    width?: number;
     /** Height of the display canvas */
-    height: number;
+    height?: number;
 
 }
 type Position = {
@@ -340,7 +340,7 @@ export class BitDisplayCanvas extends DisposableElement implements BitDisplayPro
             id="viewport"
             ${ref(this.refs.viewport)}
             @scroll=${this.handleScroll}
-            style=${`width:${width}px;height:${height}px;overflow:auto;position:relative`}
+            style=${`width:${width + SCROLLBAR_SIZE.width}px;height:${height + SCROLLBAR_SIZE.height}px;overflow:auto;position:relative`}
           >
             <div
               id="fakescrolldiv"
@@ -350,8 +350,8 @@ export class BitDisplayCanvas extends DisposableElement implements BitDisplayPro
             </div>
             <canvas
             ${ref(this.refs.canvas)}
-            width=${width - SCROLLBAR_SIZE.width}
-            height=${height - SCROLLBAR_SIZE.height}
+            width=${width}
+            height=${height}
           ></canvas>
 `
 

package/src/components/Button.ts

@@ -29,7 +29,7 @@ export interface ButtonProps {
   /** What background color to use */
   backgroundColor?: string;
   /** How large should the button be? */
-  size: ButtonSizesTypes;
+  size?: ButtonSizesTypes;
   label?: string,
   /* should the button be disabled*/
   disabled?: boolean;

package/src/components/Header.ts

@@ -10,7 +10,7 @@ import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './type
  * Properties defining 
  */
 export interface HeaderProps {
-  username: string;
+  username?: string;
   /**
    * Shows the login Button
    */

package/src/components/input.ts

@@ -1,4 +1,4 @@
-import { html, LitElement, TemplateResult } from 'lit';
+import { html, LitElement, PropertyValues, TemplateResult } from 'lit';
 import "./input.css"
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -23,32 +23,32 @@ export enum InputVariants {
 type InputVariantsTypes = `${InputVariants}`
 export interface InputProps {
   /** Input type */
-  variant: InputVariantsTypes;
+  variant?: InputVariantsTypes;
   /**Label to display above the input */
-  label: string,
+  label?: string,
   /**placeholder text to display*/
-  placeholder: string,
+  placeholder?: string,
   /* should be disabled?*/
-  disabled: boolean,
+  disabled?: boolean,
   /* should be readonly*/
-  readonly: boolean,
+  readonly?: boolean,
   /**
  * The helper text.
  */
 
-  helperText: string,
+  helperText?: string,
   /**
    * Specify if the currently value is invalid.
    */
-  invalid: boolean,
+  invalid?: boolean,
   /**
    * Message which is displayed if the value is invalid.
    */
-  invalidText: string | TemplateResult<1>,
+  invalidText?: string | TemplateResult<1>,
   /**
    * Max character count allowed for input. This is needed in order for enableCounter to display
    */
-  maxCount: number,
+  maxCount?: number,
   /**
 * Boolean property to set the required status
 */
@@ -71,7 +71,7 @@ export interface InputProps {
   /**
    * The sets the autocomplete for the input.
    */
-  autocomplete: HTMLInputElement['autocomplete'];
+  autocomplete?: HTMLInputElement['autocomplete'];
 }
 @customElement('spectric-input')
 export class SpectricInput extends LitElement implements InputProps {
@@ -148,7 +148,7 @@ export class SpectricInput extends LitElement implements InputProps {
   @property()
   pattern = '';
   @property({ type: Number, reflect: true })
-  maxCount: InputProps['maxCount'] = 0;
+  maxCount: number = 0;
   /**
 * The internal value.
 */
@@ -158,7 +158,7 @@ export class SpectricInput extends LitElement implements InputProps {
    * The sets the autocomplete for the input.
    */
   @property({ reflect: true })
-  autocomplete: HTMLInputElement['autocomplete'] = "";
+  autocomplete: HTMLInputElement['autocomplete'] = "off";
   get selectionStart() {
     if (!this._input) {
       return null
@@ -227,6 +227,11 @@ export class SpectricInput extends LitElement implements InputProps {
     this._showPassword = !this._showPassword;
     this.requestUpdate()
   }
+  protected updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has("checked")) {
+      this.dispatchEvent(new Event("change", { bubbles: true }))
+    }
+  }
   protected render(): unknown {
     switch (this.variant) {
       case InputVariants.Text:
@@ -303,7 +308,6 @@ export class SpectricInput extends LitElement implements InputProps {
         <spectric-button @click=${() => {
             this.checked = !this.checked;
             this.value = Boolean(this.checked);
-            this.dispatchEvent(new Event("change", { bubbles: true }))
           }} icon size=${this.size || "xxsmall"} variant=${this.checked ? "primary" : "secondary"}>${this.checked ? '✓' : "\u00A0"}</spectric-button>
           ${this.invalid || this.helperText ? html`<spectric-tooltip text=${this.invalid || this.helperText}></spectric-tooltip>` : null}
           ${this.label}

package/src/components/splitview/splitview.ts

@@ -12,15 +12,15 @@ export enum Orientations {
 }
 export interface SplitViewProps {
     /** Controls the orientation of the splitter handle */
-    orientation: `${Orientations}`;
+    orientation?: `${Orientations}`;
     /** the percentage to split the view default: 50*/
     percentage?: number
     /** Should the splitter handle be invisible? */
     invisible?: boolean
     /** Clamps the minimum split percentage default: 10 */
-    min: number
+    min?: number
     /** Clamps the maximum split percentage default: 90 */
-    max: number
+    max?: number
     /** save and load split state to localstorage splitter must have an id attribute default: true */
     useSavedState?: boolean
 }
@@ -40,8 +40,8 @@ export class SplitView extends DisposableElement implements SplitViewProps {
     @property({ type: Boolean }) invisible: SplitViewProps['invisible'] = false;
     static styles = style
 
-    @property({ type: Number, reflect: true }) min: SplitViewProps['min'] = 10;
-    @property({ type: Number, reflect: true }) max: SplitViewProps['max'] = 90;
+    @property({ type: Number, reflect: true }) min: number = 10;
+    @property({ type: Number, reflect: true }) max: number = 90;
     @property({ type: Boolean, reflect: true }) useSavedState: SplitViewProps['useSavedState'] = true;
 
     @state()

package/src/components/table/body.ts

@@ -1,9 +1,10 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, PropertyValues } from 'lit';
 import { customElement, property, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 export const TableBodyElementTag = "spectric-table-body"
 import "./cell"
 import { ColumnSettings, TableElement } from './table';
+import { repeat } from 'lit/directives/repeat.js';
 
 interface BodyProps<T> {
     columns: ColumnSettings<T>[]
@@ -24,14 +25,21 @@ export class TableBodyElement<T> extends LitElement implements BodyProps<T> {
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
+    protected firstUpdated(_changedProperties: PropertyValues): void {
+        if (this.data.length > 100) {
+            console.warn("Table is rendering excessive amounts of data to the DOM you should set rowHeight and use a virtualized scroll or use pagination")
+        }
+    }
     protected render(): unknown {
         return html`
         <body>
-            ${this.data.map((row: any) => {
-            return html`<tr>${this.columns.map(col => {
-                return html`<spectric-table-cell .column=${col} .row=${row} .columns=${this.columns}></spectric-table-cell>`
-            })}</tr>`
+            ${repeat(this.data, (row, index) => html`
+            <tr class="${index % 2 === 0 ? "odd" : ""}">
+                ${repeat(this.columns, (col) => {
+            return html`<spectric-table-cell .column=${col} .index=${index} .row=${row} .columns=${this.columns}></spectric-table-cell>`
         })}
+            </tr>`)}
+
         </body>
         `
 

package/src/components/table/cell.ts

@@ -23,6 +23,9 @@ export type FilterEvent<T> = {
 export class TableCellElement<T> extends LitElement implements CellProps<T> {
     @property({ type: Object, attribute: false })
     row!: T;
+
+    @property({ type: Number, attribute: false })
+    index!: number;
     @property({ type: Object, attribute: false })
     column!: ColumnSettings<T>;
     columns!: ColumnSettings<T>[];
@@ -75,7 +78,7 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     protected render(): unknown {
         let rendered
         if (this.column.render) {
-            rendered = this.column.render(this.row, this.table)
+            rendered = this.column.render(this.row, this.index, this.table)
         } else if (this.column.key && typeof this.row === 'object') {
             rendered = rowGetValue(this.row as any, this.column.key)
         } else {

package/src/components/table/header.ts

@@ -37,7 +37,6 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
         this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange", { detail: column }))
     }
     protected render(): unknown {
-
         return html`
         <tr>
                 ${this.columns.map(column => {
@@ -48,9 +47,15 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
             if (column.sortable) {
                 classes.push("sortable")
             }
+            let columnWidth = column.width ? `width:${column.width}px;` : ""
             let sortDirection = column.sortDirection === TableSortDirection.ascending ? `🠉` : column.sortDirection == TableSortDirection.decending ? `🠋` : ``
             let sortClass = column.sortDirection || TableSortDirection.none
-            return html`<td @click=${() => this._handleSortChange(column)}><div class=${classes.join(" ")}>${column.title || column.key} <span class="sort-direction ${sortClass}">${sortDirection}</span></div></td>`
+            return html`
+            <td @click=${() => this._handleSortChange(column)} style="${columnWidth}">
+                <div class=${classes.join(" ")} >${column.title || column.key} 
+                    <span class="sort-direction ${sortClass}">${sortDirection}</span>
+                </div>
+            </td>`
         })}
         </tr>
             `

package/src/components/table/table.css

@@ -6,15 +6,16 @@ spectric-table{
 spectric-table .table-wrapper{
     overflow: auto;
     flex-grow: 1;
+    position: relative;
 }
 spectric-table tr{
     text-align: center;
 }
 
-spectric-table-body tr:nth-child(odd){
+spectric-table tr.odd{
     background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 90%);
 }
-spectric-table-body tr:hover{
+spectric-table tr:hover{
     background-color: color-mix(in srgb, var(--spectric-primary, #1ea7fd), transparent 70%)
 }
 spectric-table-header{
@@ -29,7 +30,12 @@ spectric-table-header{
 spectric-table-header td {
     vertical-align: middle;
 }
-
+spectric-table tr {
+    line-height: var(--rowHeight);
+}
+spectric-table td{
+   height: var(--rowHeight);
+}
 spectric-table-header .header-contents {
     position: relative;
 }
@@ -49,9 +55,7 @@ spectric-table div[role="table"]{
     display: table;
     min-width: 100%;
 }
-spectric-table-body {
-    display: table-row-group;
-}
+
 spectric-table-cell{
     display: contents;
     vertical-align: middle;

package/src/components/table/table.ts

@@ -1,15 +1,17 @@
-import { html, LitElement, TemplateResult } from 'lit';
+import { html, LitElement, PropertyValues, render, TemplateResult } from 'lit';
 import "../pagination";
 import "./header"
 import "./body"
 import { customElement, property, state, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import "./virtualBody"
 import "./table.css"
 export const TableElementTag = "spectric-table"
 import { spreadProps } from '../../utils/spread';
 import { PaginationChangeProps, PaginationProps } from '../pagination';
 import { FilterEvent } from './cell';
 import { createSortChain } from './sorting';
+
 export type { TableProps, TableEvents }
 
 export type DomRenderable = HTMLElement | TemplateResult | string | number | null
@@ -45,7 +47,7 @@ export type ColumnSettings<T> = {
     /**
      * Render function to render a table cell for displaying custom html
      */
-    render?: (row: T, table: TableElement<T>) => DomRenderable
+    render?: (row: T, index: number, table: TableElement<T>) => DomRenderable
     /**
      * Custom comparator function for sorting
      */
@@ -60,6 +62,7 @@ interface TableProps<T> extends TableDataOptions<T> {
     data: T[]
     select: TableSelectOptionsTypes
     sort?: TableSortOptionTypes
+    rowHeight?: number
 }
 
 type DomEvent<T> = Event & {
@@ -83,6 +86,12 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
     @property({ type: String, reflect: true })
     sort: TableSortOptionTypes = TableSortOption.single;
 
+    /**
+     * Needed for virtualization 
+     */
+    @property({ type: Number, reflect: true })
+    rowHeight: number = 25;
+
     static getDefaultDataSorterAndPaginatior<T>(data: T[]) {
         return (props: TableDataOptions<T>) => {
             let sorts = props.columns.filter(column => column.sortable && column.sortDirection && column.sortDirection !== TableSortDirection.none)
@@ -166,37 +175,57 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
         }
         this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
     }
+    protected update(changedProperties: PropertyValues): void {
+        if (changedProperties.has("select")) {
+            if (this.select === "single" && this.selected.length > 1) {
+                this.selected = [this.selected[0]]
+                this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
+            }
+        }
+        super.update(changedProperties)
+    }
     protected render(): unknown {
         let columns = this.columns.filter(column => !column.hidden)
         if (this.select !== TableSelectOptions.none) {
             columns.unshift({
                 title: this.select === "multi" ? html`<spectric-input variant="checkbox" @change=${this._handleSelectAllChange} .helperText=${"Select All"}></spectric-input>` : null,
                 render: (row) => {
-                    return html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" .checked=${this.selected.includes(row)} @change=${(e: DomEvent<HTMLInputElement>) => {
+                    let container = document.createElement("div")
+                    let checked = this.selected.includes(row)
+                    let template = html`<spectric-input variant="checkbox" class="table-checkbox-${this.select}" ${spreadProps({ checked })}  @change=${(e: DomEvent<HTMLInputElement>) => {
                         e.stopPropagation()
-                        if (this.select === "single") {
-                            this.selected = []
+                        let index = this.selected.findIndex(value => value === row)
+                        if (e.target.checked && index !== -1) {
+                            return
+                        }
+                        else if (!e.target.checked && index === -1) {
+                            return
+                        }
+                        else if (!e.target.checked && index !== -1) {
+                            this.selected.splice(index, 1)
                         }
                         if (e.target.checked) {
-                            this.selected.push(row)
-                            this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
-                        } else {
-                            let index = this.selected.findIndex(value => value === row)
-                            if (index !== -1) {
-                                this.selected.splice(index, 1)
-                                this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+                            if (this.select === "single") {
+                                this.selected = []
                             }
+                            this.selected.push(row)
                         }
+                        this.dispatchEvent(new CustomEvent("selected", { detail: [...this.selected] }))
                     }}></spectric-input>`
+                    render(template, container)
+                    return template
                 }
             })
         }
-
+        const tdBorderAndPadding = 4;
         return html`
-        <div class="table-wrapper">
+        <div class="table-wrapper" style="--rowHeight:${this.rowHeight - tdBorderAndPadding}px">
             <div role="table">
                 <spectric-table-header .columns=${columns} @sortChange=${this._handleSortChange}></spectric-table-header>
-                <spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>
+                ${this.rowHeight >= 25 && this.data.length >= 100 ?
+                html`<spectric-table-virtual-body .columns=${columns} .data=${this.data} .table=${this} .rowHeight=${this.rowHeight}></spectric-table-virtual-body>` :
+                html`<spectric-table-body .columns=${columns} .data=${this.data} .table=${this}></spectric-table-body>`
+            }
             </div>
         </div>
         ${this.pagination ? html`<spectric-pagination ${spreadProps(this.pagination)} @change=${this._handlePaginationChange}></spectric-pagination>` : null}
@@ -205,7 +234,7 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
 }
 
 interface TableEvents {
-    'change': (event: CustomEvent<{ pagination: PaginationChangeProps }>) => void;
+    'change': (event: CustomEvent<TableDataOptions<any>>) => void;
     'filter': (event: CustomEvent<FilterEvent<any>>) => void;
 }
 

package/src/components/table/virtualBody.css

@@ -0,0 +1,13 @@
+spectric-table-body {
+    display: table-row-group;
+}
+spectric-table-virtual-body {
+    display: contents;
+}
+
+
+
+spectric-table-virtual-body .virtual-scroll-spacer td {
+    padding: 0;
+    border: 0px;
+}