@spectric/ui 0.0.15 → 0.0.17

package/dist/classes/DisposibleElement.d.ts

@@ -3,6 +3,7 @@ export interface IDisposable {
     dispose(): void;
 }
 type DisposableTarget = HTMLElement | Promise<HTMLElement> | (() => HTMLElement);
+export declare const getListeners: () => number;
 export declare class DisposableElement extends LitElement {
     private readonly _disposables;
     private _isDisposed;

package/dist/classes/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BitArray';
+export * from './DisposibleElement';

package/dist/components/color_picker/ColorPicker.d.ts

@@ -0,0 +1,59 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { DomEvent } from '../table';
+import { SpectricInput } from '../input';
+export interface ColorPickerProps {
+    /**Color in hex*/
+    value?: string;
+    showAlpha?: boolean;
+}
+export declare class SpectricColorPicker extends LitElement implements ColorPickerProps {
+    value: string;
+    showAlpha: boolean;
+    private hue;
+    private alpha;
+    private saturation;
+    private lightness;
+    private canvas;
+    private original?;
+    /**is mouse down on saturation/light canvas? */
+    private sldown;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected update(changedProperties: PropertyValues): void;
+    private renderHueSaturationGrid;
+    _handleSaturationLightnessClick: (e: PointerEvent) => void;
+    _handleHueChange: (e: DomEvent<SpectricInput>) => void;
+    private updateValue;
+    _handleAlphaChange: (e: DomEvent<SpectricInput>) => void;
+    _handleApply: () => void;
+    _cancel: () => void;
+    _openPopover: () => Promise<void>;
+    protected getPopover(): TemplateResult;
+    protected render(): unknown;
+}
+export interface ColorPickerEventMap {
+    'change': (event: CustomEvent<ColorPickerProps>) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "spectric-colorpicker": HTMLElementTagWithEvents<SpectricColorPicker, ColorPickerEventMap>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * {@link SpectricColorPicker}
+             */
+            "spectric-colorpicker": ReactElementWithPropsAndEvents<SpectricColorPicker, ColorPickerProps, ColorPickerEventMap>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * {@link SpectricColorPicker}
+                 */
+                "spectric-colorpicker": ReactElementWithPropsAndEvents<SpectricColorPicker, ColorPickerProps, ColorPickerEventMap>;
+            }
+        }
+    }
+}

package/dist/components/index.d.ts

@@ -11,3 +11,5 @@ export * from './splitview';
 export * from './pagination';
 export * from './table';
 export * from './tooltip';
+export * from './types';
+export * from './color_picker';

package/dist/components/input.d.ts

@@ -12,7 +12,8 @@ export declare enum InputVariants {
     file = "file",//display drop area
     hidden = "hidden",//display drop area
     password = "password",
-    checkbox = "checkbox"
+    checkbox = "checkbox",
+    range = "range"
 }
 type InputVariantsTypes = `${InputVariants}`;
 export interface InputProps {
@@ -135,6 +136,7 @@ export declare class SpectricInput extends LitElement implements InputProps {
     protected _input?: HTMLInputElement;
     private handleTogglePasswordVisibility;
     protected updated(changedProperties: PropertyValues): void;
+    _handleChange(e: Event): void;
     protected render(): unknown;
 }
 declare global {

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

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

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

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-import { ColumnSettings, TableElement } from './table';
+import { ColumnSettings, DomRenderable, SpectricTableElement } from './table';
 import { StyleInfo } from 'lit/directives/style-map.js';
 export declare const TableCellElementTag = "spectric-table-cell";
 interface CellProps<T> {
@@ -21,7 +21,8 @@ export declare class TableCellElement<T> extends LitElement implements CellProps
     index: number;
     column: ColumnSettings<T>;
     columns: ColumnSettings<T>[];
-    table: TableElement<T>;
+    table: SpectricTableElement<T>;
+    overflow: DomRenderable;
     td: HTMLTableCellElement;
     styleRules: StyleInfo;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
@@ -29,6 +30,8 @@ export declare class TableCellElement<T> extends LitElement implements CellProps
     _emitFilter(filter: FilterEvent<T>): void;
     _handleFilterOut: () => void;
     _handleFilterFor: () => void;
+    _displayTooltip: () => void;
+    getRenderedValue(): any;
     protected render(): unknown;
 }
 interface TableBodyEvents {

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

@@ -1,6 +1,6 @@
-import { LitElement } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { ColumnSettings } from './table';
+import { DisposableElement } from '../../classes';
 export declare const TableHeaderElementTag = "spectric-table-header";
 interface HeaderProps<T> {
     columns: ColumnSettings<T>[];
@@ -8,14 +8,20 @@ interface HeaderProps<T> {
 /**
  * Pagination Element
  */
-export declare class TableHeaderElement<T> extends LitElement implements HeaderProps<T> {
+export declare class TableHeaderElement<T> extends DisposableElement implements HeaderProps<T> {
     columns: ColumnSettings<T>[];
+    private _resizeStart?;
+    constructor();
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     _handleSortChange: (column: ColumnSettings<T>) => void;
+    _handleResizeStart: (event: MouseEvent, column: ColumnSettings<T>) => void;
+    _handleResizeEnd: (e: MouseEvent) => void;
     protected render(): unknown;
+    private renderCell;
 }
 interface TableHeaderEvents {
-    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
+    sortChange: (event: CustomEvent<ColumnSettings<any>>) => void;
+    columnResize: (event: CustomEvent<ColumnSettings<any>>) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -23,6 +23,10 @@ export declare enum TableSortDirection {
 export type TableSortDirectionTypes = `${TableSortDirection}`;
 export type ColumnSettings<T> = {
     width?: number;
+    /**
+     * Enabled/disables resizing by dragging column header Default true
+     */
+    allowResize?: boolean;
     whiteSpace?: "nowrap";
     hidden?: boolean;
     sortable?: boolean;
@@ -36,7 +40,7 @@ export type ColumnSettings<T> = {
     /**
      * Render function to render a table cell for displaying custom html
      */
-    render?: (row: T, index: number, table: TableElement<T>) => DomRenderable;
+    render?: (row: T, index: number, table: SpectricTableElement<T>) => DomRenderable;
     /**
      * Custom comparator function for sorting
      */
@@ -46,6 +50,7 @@ export type TableSelectOptionsTypes = `${TableSelectOptions}`;
 export interface TableDataOptions<T> {
     pagination?: PaginationProps;
     columns: ColumnSettings<T>[];
+    sortOrder?: string[];
 }
 interface TableProps<T> extends TableDataOptions<T> {
     data: T[];
@@ -53,7 +58,7 @@ interface TableProps<T> extends TableDataOptions<T> {
     sort?: TableSortOptionTypes;
     rowHeight?: number;
 }
-type DomEvent<T> = Event & {
+export type DomEvent<T> = Event & {
     target: T;
 };
 /**
@@ -61,19 +66,25 @@ type DomEvent<T> = Event & {
  * <iframe  width="100%" height="400px" src="https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1"/>
  *
  */
-export declare class TableElement<T> extends LitElement implements TableProps<T> {
+export declare class SpectricTableElement<T = any> extends LitElement implements TableProps<T> {
     data: T[];
     pagination?: PaginationProps;
     columns: ColumnSettings<T>[];
     select: TableSelectOptionsTypes;
     sort: TableSortOptionTypes;
+    sortOrder: string[];
     /**
      * Needed for virtualization
      */
     rowHeight: number;
+    /**
+     * Needed for virtualization
+     */
+    fontSize: number;
     static getDefaultDataSorterAndPaginatior<T>(data: T[]): (props: TableDataOptions<T>) => T[];
     private _handlePaginationChange;
     private _handleSortChange;
+    private _handleColumnResize;
     private _emitChange;
     private __DO_NOT_USE_filter;
     private selected;
@@ -89,17 +100,18 @@ interface TableEvents {
     'paginationChange': (event: CustomEvent<PaginationChangeProps>) => void;
     'filter': (event: CustomEvent<FilterEvent<any>>) => void;
     'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
+    'selected': (event: CustomEvent<any[]>) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [TableElementTag]: HTMLElementTagWithEvents<TableElement<any>, TableEvents>;
+        [TableElementTag]: HTMLElementTagWithEvents<SpectricTableElement<any>, TableEvents>;
     }
     namespace JSX {
         interface IntrinsicElements {
             /**
              * @see {@link TableElement}
              */
-            [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
+            [TableElementTag]: ReactElementWithPropsAndEvents<SpectricTableElement<any>, TableProps<any>, TableEvents>;
         }
     }
     namespace React {
@@ -108,7 +120,7 @@ declare global {
                 /**
                  * @see {@link TableElement}
                  */
-                [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
+                [TableElementTag]: ReactElementWithPropsAndEvents<SpectricTableElement<any>, TableProps<any>, TableEvents>;
             }
         }
     }

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

@@ -1,5 +1,5 @@
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-import { ColumnSettings, TableElement } from './table';
+import { ColumnSettings, SpectricTableElement } from './table';
 import { DisposableElement } from '../../classes/DisposibleElement';
 export declare const TableBodyElementTag = "spectric-table-virtual-body";
 interface BodyProps<T> {
@@ -15,7 +15,7 @@ export declare class TableVirtualBodyElement<T> extends DisposableElement implem
     columns: ColumnSettings<T>[];
     rowHeight: number;
     startIndex: number;
-    table: TableElement<T>;
+    table: SpectricTableElement<T>;
     constructor();
     protected firstUpdated(): void;
     protected createRenderRoot(): HTMLElement | DocumentFragment;

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

@@ -0,0 +1,85 @@
+import { CSSResultGroup } from 'lit-element';
+import { DomRenderable } from '../table';
+import { DisposableElement } from '../../classes/DisposibleElement';
+export declare const PopoverElementTag = "spectric-popover";
+export type { TooltipProps, TooltipEvents };
+export declare enum TooltipPostions {
+    top = "top",
+    bottom = "bottom",
+    left = "left",
+    right = "right",
+    mouse = "mouse"
+}
+export type TooltipPostionsTypes = `${TooltipPostions}`;
+interface TooltipProps {
+    /**
+     * How long you need to hover before the tooltip displays
+     */
+    delay?: number;
+    /**
+     * How long the fade in animation should run
+     */
+    animationDuration?: number;
+    /**
+     * Tooltip contents
+     */
+    text: DomRenderable;
+    /**
+     * Where to anchor the tooltip
+     */
+    position?: TooltipPostionsTypes;
+    /**
+     * 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.
+     */
+    portalTarget?: 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
+     */
+    triggerTarget?: HTMLElement;
+}
+/**
+ * Spectric tooltip will add a tooltip to any container
+ */
+export declare class PopoverElement extends DisposableElement implements TooltipProps {
+    delay: number;
+    animationDuration: number;
+    text: DomRenderable;
+    position: TooltipPostionsTypes;
+    maxWidth?: number;
+    protected portalElement: HTMLDivElement;
+    protected mouseLocation?: {
+        left: number;
+        top: number;
+    };
+    static styles?: CSSResultGroup | undefined;
+    portalTarget: HTMLElement;
+    protected timer?: number;
+    protected open: boolean;
+    protected mouseframe?: number;
+    /**
+     * @default parentElement
+     */
+    triggerTarget: HTMLElement;
+    protected get target(): HTMLElement;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _getMousePosition: (ev: MouseEvent) => void;
+    /**
+     * Public method to trigger hide the tooltip programatically
+     */
+    hidePopover(): void;
+    /**
+     * Public method to trigger showing the tooltip programatically
+     */
+    showPopover(): Promise<void>;
+    protected applyStyle: (style: Record<string, string>) => void;
+    protected positionTooltip: () => void;
+    protected render(): import('lit-html').TemplateResult<1>;
+}
+interface TooltipEvents {
+}

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

@@ -1,7 +1,7 @@
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { CSSResultGroup } from 'lit-element';
 import { DomRenderable } from '../table';
-import { DisposableElement } from '../../classes/DisposibleElement';
+import { PopoverElement } from './popover';
 export declare const TooltipElementTag = "spectric-tooltip";
 export type { TooltipProps, TooltipEvents };
 export declare enum TooltipPostions {
@@ -45,32 +45,31 @@ interface TooltipProps {
 /**
  * Spectric tooltip will add a tooltip to any container
  */
-export declare class TooltipElement extends DisposableElement implements TooltipProps {
+export declare class TooltipElement extends PopoverElement implements TooltipProps {
     delay: number;
     animationDuration: number;
     text: DomRenderable;
     position: TooltipPostionsTypes;
     maxWidth?: number;
-    private portalElement;
-    private mouseLocation?;
+    portalElement: HTMLDivElement;
+    mouseLocation?: {
+        left: number;
+        top: number;
+    };
     static styles?: CSSResultGroup | undefined;
     portalTarget: HTMLElement;
-    private timer?;
-    private open;
-    private mouseframe?;
+    timer?: number;
+    open: boolean;
+    mouseframe?: number;
     /**
      * @default parentElement
      */
     triggerTarget: HTMLElement;
-    private get target();
     constructor();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private _getMousePosition;
-    _hideTooltip: () => void;
-    private showToolTip;
-    private applyStyle;
-    private positionTooltip;
+    /**
+     * Public method to trigger showing the tooltip programatically
+     */
+    showToolTip(): Promise<void>;
     protected render(): import('lit-html').TemplateResult<1>;
 }
 interface TooltipEvents {

package/dist/custom-elements.json

@@ -391,6 +391,21 @@
         }
       ]
     },
+    {
+      "name": "spectric-colorpicker",
+      "description": "Attributes:\n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - \n\nProperties:\n\n  * `hue` {`number`} - \n\n  * `alpha` {`number`} - \n\n  * `saturation` {`number`} - \n\n  * `lightness` {`number`} - \n\n  * `canvas` {`Ref<HTMLCanvasElement>`} - \n\n  * `original` {`string | undefined`} - \n\n  * `sldown` {`boolean`} - is mouse down on saturation/light canvas?\n\n  * `_handleSaturationLightnessClick` - \n\n  * `_handleHueChange` - \n\n  * `_handleAlphaChange` - \n\n  * `_handleApply` - \n\n  * `_cancel` - \n\n  * `_openPopover` - \n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "`value` {`string`} - Color in hex\n\nProperty: value\n\nDefault: #FF0000FF"
+        },
+        {
+          "name": "showAlpha",
+          "description": "`showAlpha` {`boolean`} - \n\nProperty: showAlpha\n\nDefault: true",
+          "valueSet": "v"
+        }
+      ]
+    },
     {
       "name": "spectric-dialog",
       "description": "Dialog Element\n\nEvents:\n\n  * `close` {`CustomEvent<unknown>`} - \n\nSlots:\n\n  * `title` {} - sets the title of the dialog attribute/property can also be use for setting the title to a string\n\nAttributes:\n\n  * `open` {`boolean`} - \n\n  * `dismissable` {`boolean`} - \n\n  * `hideBackdrop` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `closeOnEscape` {`boolean`} - \n\n  * `closeOnOutsideClick` {`boolean`} - \n\nProperties:\n\n  * `styles` {`CSSResultGroup`} - \n\n  * `dialogElement` {`Promise<HTMLDialogElement>`} - \n\n  * `clickHandler` - \n\n  * `_handleKeyDown` - \n\n  * `_onClose` - \n\n  * `open` {`boolean`} - \n\n  * `dismissable` {`boolean`} - \n\n  * `hideBackdrop` {`boolean`} - \n\n  * `title` {`string`} - \n\n  * `closeOnEscape` {`boolean`} - \n\n  * `closeOnOutsideClick` {`boolean`} - ",
@@ -432,7 +447,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> | 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.",
+      "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\" | \"range\"`} - 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\" | \"range\"`} - 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",
@@ -454,7 +469,7 @@
         },
         {
           "name": "variant",
-          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\"`} - Input type\n\nProperty: variant\n\nDefault: text",
+          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\nProperty: variant\n\nDefault: text",
           "values": [
             {
               "name": "number"
@@ -488,6 +503,9 @@
             },
             {
               "name": "checkbox"
+            },
+            {
+              "name": "range"
             }
           ]
         },
@@ -2000,12 +2018,12 @@
     },
     {
       "name": "spectric-table-body",
-      "description": "Table Body Element\n\nProperties:\n\n  * `table` {`TableElement<T>`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - ",
+      "description": "Table Body Element\n\nProperties:\n\n  * `table` {`SpectricTableElement<T>`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - ",
       "attributes": []
     },
     {
       "name": "spectric-table-cell",
-      "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  * `styleRules` {`StyleInfo`} - \n\n  * `_handleFilterOut` - \n\n  * `_handleFilterFor` - \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` {`SpectricTableElement<T>`} - \n\n  * `overflow` {`DomRenderable`} - \n\n  * `td` {`HTMLTableCellElement`} - \n\n  * `styleRules` {`StyleInfo`} - \n\n  * `_handleFilterOut` - \n\n  * `_handleFilterFor` - \n\n  * `_displayTooltip` - \n\n  * `column` {`ColumnSettings<T>`} - \n\n  * `row` {`T`} - ",
       "attributes": [
         {
           "name": "onfilter",
@@ -2015,18 +2033,26 @@
     },
     {
       "name": "spectric-table-header",
-      "description": "Pagination Element\n\nEvents:\n\n  * `sortChange` {`CustomEvent<ColumnSettings<T>>`} - \n\nProperties:\n\n  * `_handleSortChange` - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
+      "description": "Pagination Element\n\nEvents:\n\n  * `sortChange` {`CustomEvent<ColumnSettings<T>>`} - \n\n  * `columnResize` {`CustomEvent<ColumnSettings<T>>`} - \n\nProperties:\n\n  * `_resizeStart` {`{ event: MouseEvent; column: ColumnSettings<T>; } | undefined`} - \n\n  * `_handleSortChange` - \n\n  * `_handleResizeStart` - \n\n  * `_handleResizeEnd` - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `_disposables` {`Set<IDisposable>`} - \n\n  * `_isDisposed` {`boolean`} - \n\n  * `_disposableListeners` {`{ target: DisposableTarget; event: string; handler: any; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "onsortChange",
           "description": "`sortChange` {`CustomEvent<ColumnSettings<T>>`} - "
+        },
+        {
+          "name": "oncolumnResize",
+          "description": "`columnResize` {`CustomEvent<ColumnSettings<T>>`} - "
         }
       ]
     },
     {
       "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  * `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>[]`} - ",
+      "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  * `fontSize` {`number`} - Needed for virtualization\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\n  * `rowHeight` {`number`} - Needed for virtualization\n\n  * `sortOrder` {`string[]`} - \n\nProperties:\n\n  * `fontSize` {`number`} - Needed for virtualization\n\n  * `_handlePaginationChange` - \n\n  * `_handleSortChange` - \n\n  * `_handleColumnResize` - \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>[]`} - \n\n  * `sortOrder` {`string[]`} - ",
       "attributes": [
+        {
+          "name": "fontSize",
+          "description": "`fontSize` {`number`} - Needed for virtualization\n\nProperty: fontSize\n\nDefault: 16"
+        },
         {
           "name": "select",
           "description": "`select` {`\"none\" | \"multi\" | \"single\"`} - \n\nProperty: select\n\nDefault: none",
@@ -2058,6 +2084,10 @@
           "name": "rowHeight",
           "description": "`rowHeight` {`number`} - Needed for virtualization\n\nProperty: rowHeight\n\nDefault: 25"
         },
+        {
+          "name": "sortOrder",
+          "description": "`sortOrder` {`string[]`} - \n\nProperty: sortOrder\n\nDefault: "
+        },
         {
           "name": "onpaginationChange",
           "description": "`paginationChange` {`CustomEvent<PaginationChangeProps>`} - "
@@ -2082,7 +2112,7 @@
     },
     {
       "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; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "description": "Table Body Element\n\nAttributes:\n\n  * `startIndex` {`number`} - \n\nProperties:\n\n  * `startIndex` {`number`} - \n\n  * `table` {`SpectricTableElement<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; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "startIndex",
@@ -2090,9 +2120,54 @@
         }
       ]
     },
+    {
+      "name": "spectric-popover",
+      "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  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \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; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "delay",
+          "description": "`delay` {`number`} - How long you need to hover before the tooltip displays\n\nProperty: delay\n\nDefault: 100"
+        },
+        {
+          "name": "animationDuration",
+          "description": "`animationDuration` {`number`} - How long the fade in animation should run\n\nProperty: animationDuration\n\nDefault: 0"
+        },
+        {
+          "name": "text",
+          "description": "`text` {`DomRenderable`} - Tooltip contents\n\nProperty: text\n\nDefault: ",
+          "values": []
+        },
+        {
+          "name": "position",
+          "description": "`position` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\"`} - Where to anchor the tooltip\n\nProperty: position\n\nDefault: right",
+          "values": [
+            {
+              "name": "top"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "mouse"
+            }
+          ]
+        },
+        {
+          "name": "maxWidth",
+          "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": []
+        }
+      ]
+    },
     {
       "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 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; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "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  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \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; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "delay",