@spectric/ui 0.0.11 → 0.0.13

package/README.MD

@@ -1,6 +1,6 @@
 # Component Examples and playground
 
-https://pages.spectric.com/web/spectric-ui/?path=/docs/spectric-ui-components-ui-page--docs
+https://pages.spectric.com/web/spectric-ui/
 
 # Developing
 

package/dist/classes/DisposibleElement.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit-element/lit-element.js';
 export interface IDisposable {
     dispose(): void;
 }
+type DisposableTarget = HTMLElement | Promise<HTMLElement> | (() => HTMLElement);
 export declare class DisposableElement extends LitElement {
     private readonly _disposables;
     private _isDisposed;
@@ -13,9 +14,10 @@ export declare class DisposableElement extends LitElement {
      * @param event The event name
      * @param handler The event handler
      */
-    addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void;
-    addDisposableListener<K extends keyof SpectricGlobalEvents>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: SpectricGlobalEvents[K]): void;
+    addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: DisposableTarget, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void;
+    addDisposableListener<K extends keyof SpectricGlobalEvents>(target: DisposableTarget, event: K, handler: SpectricGlobalEvents[K]): void;
     registerDisposable<T extends IDisposable>(o: T): T;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+export {};

package/dist/components/Bitdisplay.d.ts

@@ -5,13 +5,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 = {
     x: number;

package/dist/components/Button.d.ts

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

package/dist/components/Header.d.ts

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

package/dist/components/input.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { ReactElementWithPropsAndEvents } from './types';
 import { ButtonSizesTypes } from './Button';
 export declare enum InputVariants {
@@ -17,29 +17,29 @@ export declare 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;
-    disabled: boolean;
-    readonly: boolean;
+    placeholder?: string;
+    disabled?: 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
   */
@@ -59,7 +59,7 @@ export interface InputProps {
     /**
      * The sets the autocomplete for the input.
      */
-    autocomplete: HTMLInputElement['autocomplete'];
+    autocomplete?: HTMLInputElement['autocomplete'];
 }
 export declare class SpectricInput extends LitElement implements InputProps {
     checked?: boolean;
@@ -106,7 +106,7 @@ export declare class SpectricInput extends LitElement implements InputProps {
      * Pattern to validate the input against for HTML validity checking
      */
     pattern: string;
-    maxCount: InputProps['maxCount'];
+    maxCount: number;
     /**
   * The internal value.
   */
@@ -134,6 +134,7 @@ export declare class SpectricInput extends LitElement implements InputProps {
     */
     protected _input?: HTMLInputElement;
     private handleTogglePasswordVisibility;
+    protected updated(changedProperties: PropertyValues): void;
     protected render(): unknown;
 }
 declare global {

package/dist/components/splitview/splitview.d.ts

@@ -7,15 +7,15 @@ export declare 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;
 }
@@ -30,8 +30,8 @@ export declare class SplitView extends DisposableElement implements SplitViewPro
     percentage: SplitViewProps['percentage'];
     invisible: SplitViewProps['invisible'];
     static styles: import('lit').CSSResult;
-    min: SplitViewProps['min'];
-    max: SplitViewProps['max'];
+    min: number;
+    max: number;
     useSavedState: SplitViewProps['useSavedState'];
     private isDragging;
     private _error;

package/dist/components/table/body.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { ColumnSettings, TableElement } from './table';
 export declare const TableBodyElementTag = "spectric-table-body";
@@ -14,6 +14,7 @@ export declare class TableBodyElement<T> extends LitElement implements BodyProps
     columns: ColumnSettings<T>[];
     table: TableElement<T>;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): unknown;
 }
 interface TableBodyEvents {

package/dist/components/table/cell.d.ts

@@ -17,6 +17,7 @@ export type FilterEvent<T> = {
  */
 export declare class TableCellElement<T> extends LitElement implements CellProps<T> {
     row: T;
+    index: number;
     column: ColumnSettings<T>;
     columns: ColumnSettings<T>[];
     table: TableElement<T>;
@@ -25,6 +26,7 @@ export declare class TableCellElement<T> extends LitElement implements CellProps
     constructor();
     protected updated(_changedProperties: PropertyValues): void;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    _emitFilter(filter: FilterEvent<T>): void;
     _handleFilterOut: () => void;
     _handleFilterFor: () => void;
     protected render(): unknown;

package/dist/components/table/table.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { PaginationChangeProps, PaginationProps } from '../pagination';
 import { FilterEvent } from './cell';
@@ -17,7 +17,7 @@ export declare enum TableSortOption {
 export type TableSortOptionTypes = `${TableSortOption}`;
 export declare enum TableSortDirection {
     ascending = "ascending",
-    decending = "decending",
+    descending = "descending",
     none = "none"
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`;
@@ -36,7 +36,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
      */
@@ -51,6 +51,7 @@ interface TableProps<T> extends TableDataOptions<T> {
     data: T[];
     select: TableSelectOptionsTypes;
     sort?: TableSortOptionTypes;
+    rowHeight?: number;
 }
 type DomEvent<T> = Event & {
     target: T;
@@ -66,6 +67,10 @@ export declare class TableElement<T> extends LitElement implements TableProps<T>
     columns: ColumnSettings<T>[];
     select: TableSelectOptionsTypes;
     sort: TableSortOptionTypes;
+    /**
+     * Needed for virtualization
+     */
+    rowHeight: number;
     static getDefaultDataSorterAndPaginatior<T>(data: T[]): (props: TableDataOptions<T>) => T[];
     private _handlePaginationChange;
     private _handleSortChange;
@@ -73,14 +78,17 @@ export declare class TableElement<T> extends LitElement implements TableProps<T>
     private __DO_NOT_USE_filter;
     private selected;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    deselectAll(): void;
+    selectAll(): void;
     _handleSelectAllChange: (e: DomEvent<HTMLInputElement>) => void;
+    protected update(changedProperties: PropertyValues): void;
     protected render(): unknown;
 }
 interface TableEvents {
-    'change': (event: CustomEvent<{
-        pagination: PaginationChangeProps;
-    }>) => void;
+    'change': (event: CustomEvent<TableDataOptions<any>>) => void;
+    'paginationChange': (event: CustomEvent<PaginationChangeProps>) => void;
     'filter': (event: CustomEvent<FilterEvent<any>>) => void;
+    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/table/virtualBody.d.ts

@@ -0,0 +1,49 @@
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ColumnSettings, TableElement } from './table';
+import { DisposableElement } from '../../classes/DisposibleElement';
+export declare const TableBodyElementTag = "spectric-table-virtual-body";
+interface BodyProps<T> {
+    columns: ColumnSettings<T>[];
+    data: T[];
+    rowHeight: number;
+}
+/**
+ * Table Body Element
+ */
+export declare class TableVirtualBodyElement<T> extends DisposableElement implements BodyProps<T> {
+    data: T[];
+    columns: ColumnSettings<T>[];
+    rowHeight: number;
+    startIndex: number;
+    table: TableElement<T>;
+    constructor();
+    protected firstUpdated(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): unknown;
+}
+interface TableBodyEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableBodyElementTag]: HTMLElementTagWithEvents<TableVirtualBodyElement<any>, TableBodyEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+            }
+        }
+    }
+}
+export {};

package/dist/components/tooltip/tooltip.d.ts

@@ -1,6 +1,7 @@
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-import { CSSResultGroup, LitElement } from 'lit-element';
+import { CSSResultGroup } from 'lit-element';
 import { DomRenderable } from '../table';
+import { DisposableElement } from '../../classes/DisposibleElement';
 export declare const TooltipElementTag = "spectric-tooltip";
 export type { TooltipProps, TooltipEvents };
 export declare enum TooltipPostions {
@@ -15,11 +16,11 @@ interface TooltipProps {
     /**
      * How long you need to hover before the tooltip displays
      */
-    delay: number;
+    delay?: number;
     /**
      * How long the fade in animation should run
      */
-    animationDuration: number;
+    animationDuration?: number;
     /**
      * Tooltip contents
      */
@@ -27,24 +28,24 @@ interface TooltipProps {
     /**
      * Where to anchor the tooltip
      */
-    position: TooltipPostionsTypes;
+    position?: TooltipPostionsTypes;
     /**
-     * Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1
+     * Sets a max width for the contents you can disable this by setting to 0 or -1
      */
     maxWidth?: number;
     /**
-     * Container the tool tip will be attached to. (default:document.body)
+     * Container the tool tip will be attached to.
      */
     portalTarget?: HTMLElement;
     /**
-     * The element that triggers the tooltip. (default:node.parentElement) This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
+     * The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
      */
     triggerTarget?: HTMLElement;
 }
 /**
  * Spectric tooltip will add a tooltip to any container
  */
-export declare class TooltipElement extends LitElement implements TooltipProps {
+export declare class TooltipElement extends DisposableElement implements TooltipProps {
     delay: number;
     animationDuration: number;
     text: DomRenderable;
@@ -56,9 +57,13 @@ export declare class TooltipElement extends LitElement implements TooltipProps {
     portalTarget: HTMLElement;
     private timer?;
     private open;
-    mouseframe?: number;
-    triggerTarget?: HTMLElement;
+    private mouseframe?;
+    /**
+     * @default parentElement
+     */
+    triggerTarget: HTMLElement;
     private get target();
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _getMousePosition;

package/dist/custom-elements.json

@@ -33,7 +33,7 @@
     },
     {
       "name": "spectric-bit-display",
-      "description": "Events:\n\n  * `bitMousemove` {} - emits BitDisplayMouseEvent on mousemove over the canvas\n\n  * `bitClick` {} - emits BitDisplayMouseEvent on mouse click on the canvas\n\n  * `bitDblclick` {} - emits BitDisplayMouseEvent on mouse double click on the canvas\n\n  * `bitMousedown` {} - emits BitDisplayMouseEvent on mouse down onthe canvas\n\n  * `bitMouseup` {} - emits BitDisplayMouseEvent on mouse up on the canvas\n\n  * `bitContextmenu` {} - emits BitDisplayMouseEvent on mouse right click on the canvas\n\nAttributes:\n\n  * `frameWidth` {`number`} - Bits per line\n\n  * `scale` {`number`} - How many pixels per bit\n\n  * `width` {`number`} - Width of the display canvas\n\n  * `height` {`number`} - Height of the display canvas\n\nProperties:\n\n  * `styles` {`CSSResult`} - \n\n  * `state` {`{ scale?: number | undefined; }`} - \n\n  * `yStart` {`number`} - \n\n  * `xStart` {`number`} - \n\n  * `_canvas` {`Promise<HTMLCanvasElement>`} - \n\n  * `refs` {`{ viewport: Ref<HTMLDivElement>; canvas: Ref<HTMLCanvasElement>; scrollDiv: Ref<HTMLDivElement>; }`} - \n\n  * `_bitArray` - \n\n  * `color` {`string`} - \n\n  * `onThemeChange` - \n\n  * `onResize` - \n\n  * `handleScroll` - \n\n  * `resizeObserver` {`ResizeObserver & IDisposable`} - \n\n  * `arrayBuffer` {`ArrayBuffer`} - Array buffer to display\n\n  * `frameWidth` {`number`} - Bits per line\n\n  * `scale` {`number`} - How many pixels per bit\n\n  * `width` {`number`} - Width of the display canvas\n\n  * `height` {`number`} - Height of the display canvas\n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: HTMLElement | Promise<HTMLElement>; event: string; handler: any; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "description": "Events:\n\n  * `bitMousemove` {} - emits BitDisplayMouseEvent on mousemove over the canvas\n\n  * `bitClick` {} - emits BitDisplayMouseEvent on mouse click on the canvas\n\n  * `bitDblclick` {} - emits BitDisplayMouseEvent on mouse double click on the canvas\n\n  * `bitMousedown` {} - emits BitDisplayMouseEvent on mouse down onthe canvas\n\n  * `bitMouseup` {} - emits BitDisplayMouseEvent on mouse up on the canvas\n\n  * `bitContextmenu` {} - emits BitDisplayMouseEvent on mouse right click on the canvas\n\nAttributes:\n\n  * `frameWidth` {`number`} - Bits per line\n\n  * `scale` {`number`} - How many pixels per bit\n\n  * `width` {`number`} - Width of the display canvas\n\n  * `height` {`number`} - Height of the display canvas\n\nProperties:\n\n  * `styles` {`CSSResult`} - \n\n  * `state` {`{ scale?: number | undefined; }`} - \n\n  * `yStart` {`number`} - \n\n  * `xStart` {`number`} - \n\n  * `_canvas` {`Promise<HTMLCanvasElement>`} - \n\n  * `refs` {`{ viewport: Ref<HTMLDivElement>; canvas: Ref<HTMLCanvasElement>; scrollDiv: Ref<HTMLDivElement>; }`} - \n\n  * `_bitArray` - \n\n  * `color` {`string`} - \n\n  * `onThemeChange` - \n\n  * `onResize` - \n\n  * `handleScroll` - \n\n  * `resizeObserver` {`ResizeObserver & IDisposable`} - \n\n  * `arrayBuffer` {`ArrayBuffer`} - Array buffer to display\n\n  * `frameWidth` {`number`} - Bits per line\n\n  * `scale` {`number`} - How many pixels per bit\n\n  * `width` {`number`} - Width of the display canvas\n\n  * `height` {`number`} - Height of the display canvas\n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "frameWidth",
@@ -432,7 +432,7 @@
     },
     {
       "name": "spectric-input",
-      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1>`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\" | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement | undefined`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1>`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.",
+      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\" | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement | undefined`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.",
       "attributes": [
         {
           "name": "checked",
@@ -520,7 +520,7 @@
         },
         {
           "name": "invalidText",
-          "description": "`invalidText` {`string | TemplateResult<1>`} - Message which is displayed if the value is invalid.\n\nProperty: invalidText\n\nDefault: ",
+          "description": "`invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\nProperty: invalidText\n\nDefault: ",
           "values": []
         },
         {
@@ -547,7 +547,7 @@
         },
         {
           "name": "autocomplete",
-          "description": "`autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperty: autocomplete\n\nDefault: ",
+          "description": "`autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperty: autocomplete\n\nDefault: off",
           "values": [
             {
               "name": ""
@@ -1955,7 +1955,7 @@
     },
     {
       "name": "spectric-splitview",
-      "description": "Split view will take a container and split it horizontally or vertically. This element can only have two children.\nIf you supply the **id** attribute on the split view element it will save and load the state keeping the user defined position\n\nEvents:\n\n  * `change` {`CustomEvent<SplitViewProps>`} - CustomEvent\\<SplitViewProps\\> Fired every time there is a change to the split percentage\n\nSlots:\n\n  * ` ` {} - Element can only take 2 HTMLElements.\n\nAttributes:\n\n  * `orientation` {`Orientations`} - Controls the orientation of the splitter handle\n\n  * `percentage` {`number | undefined`} - the percentage to split the view default: 50\n\n  * `invisible` {`boolean | undefined`} - Should the splitter handle be invisible?\n\n  * `min` {`number`} - Clamps the minimum split percentage default: 10\n\n  * `max` {`number`} - Clamps the maximum split percentage default: 90\n\n  * `useSavedState` {`boolean | undefined`} - save and load split state to localstorage splitter must have an id attribute default: true\n\nProperties:\n\n  * `styles` {`CSSResult`} - \n\n  * `isDragging` {`boolean`} - \n\n  * `_error` {`string | false`} - \n\n  * `_splitter` {`Promise<HTMLElement>`} - \n\n  * `_panel1` {`HTMLSlotElement`} - \n\n  * `_panel2` {`HTMLSlotElement`} - \n\n  * `_emitChange` - \n\n  * `_onMouseMove` - \n\n  * `_assignSlot` - \n\n  * `orientation` {`Orientations`} - Controls the orientation of the splitter handle\n\n  * `percentage` {`number | undefined`} - the percentage to split the view default: 50\n\n  * `invisible` {`boolean | undefined`} - Should the splitter handle be invisible?\n\n  * `min` {`number`} - Clamps the minimum split percentage default: 10\n\n  * `max` {`number`} - Clamps the maximum split percentage default: 90\n\n  * `useSavedState` {`boolean | undefined`} - save and load split state to localstorage splitter must have an id attribute default: true\n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: HTMLElement | Promise<HTMLElement>; event: string; handler: any; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "description": "Split view will take a container and split it horizontally or vertically. This element can only have two children.\nIf you supply the **id** attribute on the split view element it will save and load the state keeping the user defined position\n\nEvents:\n\n  * `change` {`CustomEvent<SplitViewProps>`} - CustomEvent\\<SplitViewProps\\> Fired every time there is a change to the split percentage\n\nSlots:\n\n  * ` ` {} - Element can only take 2 HTMLElements.\n\nAttributes:\n\n  * `orientation` {`Orientations`} - Controls the orientation of the splitter handle\n\n  * `percentage` {`number | undefined`} - the percentage to split the view default: 50\n\n  * `invisible` {`boolean | undefined`} - Should the splitter handle be invisible?\n\n  * `min` {`number`} - Clamps the minimum split percentage default: 10\n\n  * `max` {`number`} - Clamps the maximum split percentage default: 90\n\n  * `useSavedState` {`boolean | undefined`} - save and load split state to localstorage splitter must have an id attribute default: true\n\nProperties:\n\n  * `styles` {`CSSResult`} - \n\n  * `isDragging` {`boolean`} - \n\n  * `_error` {`string | false`} - \n\n  * `_splitter` {`Promise<HTMLElement>`} - \n\n  * `_panel1` {`HTMLSlotElement`} - \n\n  * `_panel2` {`HTMLSlotElement`} - \n\n  * `_emitChange` - \n\n  * `_onMouseMove` - \n\n  * `_assignSlot` - \n\n  * `orientation` {`Orientations`} - Controls the orientation of the splitter handle\n\n  * `percentage` {`number | undefined`} - the percentage to split the view default: 50\n\n  * `invisible` {`boolean | undefined`} - Should the splitter handle be invisible?\n\n  * `min` {`number`} - Clamps the minimum split percentage default: 10\n\n  * `max` {`number`} - Clamps the maximum split percentage default: 90\n\n  * `useSavedState` {`boolean | undefined`} - save and load split state to localstorage splitter must have an id attribute default: true\n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "orientation",
@@ -2005,7 +2005,7 @@
     },
     {
       "name": "spectric-table-cell",
-      "description": "Pagination Element\n\nEvents:\n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\nProperties:\n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `table` {`TableElement<T>`} - \n\n  * `td` {`HTMLTableCellElement`} - \n\n  * `_handleFilterOut` - \n\n  * `_handleFilterFor` - \n\n  * `styleRules` {`CSSStyleDeclaration`} - \n\n  * `column` {`ColumnSettings<T>`} - \n\n  * `row` {`T`} - ",
+      "description": "Pagination Element\n\nEvents:\n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\nProperties:\n\n  * `index` {`number`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `table` {`TableElement<T>`} - \n\n  * `td` {`HTMLTableCellElement`} - \n\n  * `_handleFilterOut` - \n\n  * `_handleFilterFor` - \n\n  * `styleRules` {`CSSStyleDeclaration`} - \n\n  * `column` {`ColumnSettings<T>`} - \n\n  * `row` {`T`} - ",
       "attributes": [
         {
           "name": "onfilter",
@@ -2025,7 +2025,7 @@
     },
     {
       "name": "spectric-table",
-      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `change` {`CustomEvent<TableDataOptions<T>>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `selected` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `data` {`T[]`} - \n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
+      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `paginationChange` {`CustomEvent<PaginationChangeProps>`} - \n\n  * `change` {`CustomEvent<TableDataOptions<T>>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `sortChange` {`CustomEvent<ColumnSettings<T>>`} - \n\n  * `selected` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `data` {`T[]`} - \n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
       "attributes": [
         {
           "name": "select",
@@ -2054,6 +2054,14 @@
             }
           ]
         },
+        {
+          "name": "rowHeight",
+          "description": "`rowHeight` {`number`} - Needed for virtualization\n\nProperty: rowHeight\n\nDefault: 25"
+        },
+        {
+          "name": "onpaginationChange",
+          "description": "`paginationChange` {`CustomEvent<PaginationChangeProps>`} - "
+        },
         {
           "name": "onchange",
           "description": "`change` {`CustomEvent<TableDataOptions<T>>`} - "
@@ -2062,15 +2070,29 @@
           "name": "onfilter",
           "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
         },
+        {
+          "name": "onsortChange",
+          "description": "`sortChange` {`CustomEvent<ColumnSettings<T>>`} - "
+        },
         {
           "name": "onselected",
           "description": "`selected` {`CustomEvent<T[]>`} - "
         }
       ]
     },
+    {
+      "name": "spectric-table-virtual-body",
+      "description": "Table Body Element\n\nAttributes:\n\n  * `startIndex` {`number`} - \n\nProperties:\n\n  * `startIndex` {`number`} - \n\n  * `table` {`TableElement<T>`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - \n\n  * `rowHeight` {`number`} - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "startIndex",
+          "description": "`startIndex` {`number`} - \n\nProperty: startIndex\n\nDefault: 0"
+        }
+      ]
+    },
     {
       "name": "spectric-tooltip",
-      "description": "Spectric tooltip will add a tooltip to any container\n\nAttributes:\n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1\n\nProperties:\n\n  * `portalElement` {`HTMLDivElement`} - \n\n  * `mouseLocation` {`{ left: number; top: number; } | undefined`} - \n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `timer` {`number | undefined`} - \n\n  * `open` {`boolean`} - \n\n  * `mouseframe` {`number | undefined`} - \n\n  * `target` {`HTMLElement | null`} - \n\n  * `_getMousePosition` - \n\n  * `_hideTooltip` - \n\n  * `showToolTip` - \n\n  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1\n\n  * `portalTarget` {`HTMLElement`} - Container the tool tip will be attached to. (default:document.body)\n\n  * `triggerTarget` {`HTMLElement | undefined`} - The element that triggers the tooltip. (default:node.parentElement) This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element",
+      "description": "Spectric tooltip will add a tooltip to any container\n\nAttributes:\n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\nProperties:\n\n  * `portalElement` {`HTMLDivElement`} - \n\n  * `mouseLocation` {`{ left: number; top: number; } | undefined`} - \n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `timer` {`number | undefined`} - \n\n  * `open` {`boolean`} - \n\n  * `mouseframe` {`number | undefined`} - \n\n  * `target` {`HTMLElement`} - \n\n  * `_getMousePosition` - \n\n  * `_hideTooltip` - \n\n  * `showToolTip` - \n\n  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `delay` {`number`} - How long you need to hover before the tooltip displays\n\n  * `animationDuration` {`number`} - How long the fade in animation should run\n\n  * `text` {`DomRenderable`} - Tooltip contents\n\n  * `position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\n  * `maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\n  * `portalTarget` {`HTMLElement`} - Container the tool tip will be attached to.\n\n  * `triggerTarget` {`HTMLElement`} - The element that triggers the tooltip. This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element\n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "delay",
@@ -2108,7 +2130,7 @@
         },
         {
           "name": "maxWidth",
-          "description": "`maxWidth` {`number | undefined`} - Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1\n\nProperty: maxWidth\n\nDefault: 300",
+          "description": "`maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\nProperty: maxWidth\n\nDefault: 300",
           "values": []
         }
       ]