@spectric/ui 0.0.8 → 0.0.9

package/README.MD

@@ -1,50 +1,27 @@
 # Component Examples and playground
+
 https://pages.spectric.com/web/spectric-ui/?path=/docs/spectric-ui-components-ui-page--docs
 
 # Developing
+
 ```
 nvm use
 npm start
 ```
+
 # Publishing
 
 To publish a new version run
+
 ```
 npm version patch
 git push --follow-tags
 ```
+
 This will trigger a pipeline to run and build the source and publish to our internal gitlab NPM
 
 # Installing In your project
-Internally (for now) we use gitlab as the package registry. To configure npm to use gitlab for `@spectric` packages follow the one time steps below
-1. Create an access token for npm [Personal Access Token](https://gitlab.spectric.com/-/user_settings/personal_access_tokens)
-    - ensure it has api access
-2. Point npm to install `@spectric` packages from gitlab
-    - run `npm config set -- @spectric:registry=https://gitlab.spectric.com/api/v4/groups/585/-/packages/npm/`
-3. Have npm use the access token created in 1. to authenticate
-    - run `npm config set -- //gitlab.spectric.com/api/v4/groups/585/-/packages/npm/:_authToken <token>`
-
-After you have setup npm witht he steps above you can install this package normally.
 
 ```
 npm i @spectric/ui
 ```
-
-# Javascript/typescript integration
-The types files produced when building seemlessly integrate the custom elements into javascript giving full type hinting
-
-# HTML integration
-Add the dist/custom-element.json to the html.languge settings
-https://code.visualstudio.com/docs/languages/html#_html-custom-data
-![Add spectric custom elements](html-include.png)
-
-# VUE Integration
-Complete steps to include custom elements in the HTML language server
-then 
-Add the HTML language server in the @ext:Vue.volar extention
-![Add the HTML language server in the @ext:Vue.volar extention](vue-include.png)
-Once setup hovering over spectric elements will provide documentation
-![alt text](vue-example.png)
-
-# Python Jinja
-Same as HTML Integration

package/dist/components/Button.d.ts

@@ -1,5 +1,7 @@
 import { CSSResultGroup, LitElement } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
+import { DomRenderable } from './table';
+import { TooltipPostionsTypes } from './tooltip';
 export declare enum ButtonSizes {
     large = "large",
     medium = "medium",
@@ -26,6 +28,8 @@ export interface ButtonProps {
     disabled: boolean;
     danger?: boolean;
     icon?: boolean;
+    tooltip?: DomRenderable;
+    tooltipPosition?: TooltipPostionsTypes;
 }
 export declare class SpectricButton extends LitElement implements ButtonProps {
     static styles?: CSSResultGroup | undefined;
@@ -36,6 +40,8 @@ export declare class SpectricButton extends LitElement implements ButtonProps {
     label?: string;
     danger: boolean;
     icon: boolean;
+    tooltip?: DomRenderable;
+    tooltipPosition?: TooltipPostionsTypes;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _onClick;

package/dist/components/index.d.ts

@@ -10,3 +10,4 @@ export * from './dialog';
 export * from './splitview';
 export * from './pagination';
 export * from './table';
+export * from './tooltip';

package/dist/components/input.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
 import { ReactElementWithPropsAndEvents } from './types';
+import { ButtonSizesTypes } from './Button';
 export declare enum InputVariants {
     Text = "text",
     TextArea = "text-area",
@@ -10,7 +11,8 @@ export declare enum InputVariants {
     email = "email",
     file = "file",//display drop area
     hidden = "hidden",//display drop area
-    password = "password"
+    password = "password",
+    checkbox = "checkbox"
 }
 type InputVariantsTypes = `${InputVariants}`;
 export interface InputProps {
@@ -60,6 +62,8 @@ export interface InputProps {
     autocomplete: HTMLInputElement['autocomplete'];
 }
 export declare class SpectricInput extends LitElement implements InputProps {
+    checked?: boolean;
+    size?: ButtonSizesTypes;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     placeholder: string;
     readonly: boolean;

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

@@ -7,7 +7,7 @@ interface BodyProps<T> {
     data: T[];
 }
 /**
- * Pagination Element
+ * Table Body Element
  */
 export declare class TableBodyElement<T> extends LitElement implements BodyProps<T> {
     data: T[];

package/dist/components/table/cell.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 TableCellElementTag = "spectric-table-cell";
@@ -18,7 +18,12 @@ export type FilterEvent<T> = {
 export declare class TableCellElement<T> extends LitElement implements CellProps<T> {
     row: T;
     column: ColumnSettings<T>;
+    columns: ColumnSettings<T>[];
     table: TableElement<T>;
+    styleRules: CSSStyleDeclaration;
+    td: HTMLTableCellElement;
+    constructor();
+    protected updated(_changedProperties: PropertyValues): void;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     _handleFilterOut: () => void;
     _handleFilterFor: () => void;

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

@@ -6,18 +6,25 @@ export declare const TableElementTag = "spectric-table";
 export type { TableProps, TableEvents };
 export type DomRenderable = HTMLElement | TemplateResult | string | number | null;
 export type ColumnSettings<T> = {
+    width?: number;
+    whiteSpace?: "nowrap";
     hidden?: boolean;
     sortable?: boolean;
     filterable?: boolean;
-    title?: string;
+    title?: DomRenderable;
     key?: string;
     render?: (row: T, table: TableElement<T>) => DomRenderable;
 };
+type TableSelectOptions = "multi" | "single";
 interface TableProps<T> {
     pagination?: PaginationProps;
     columns: ColumnSettings<T>[];
     data: T[];
+    select?: TableSelectOptions;
 }
+type DomEvent<T> = Event & {
+    target: T;
+};
 /**
  * Table Element
  *
@@ -53,10 +60,13 @@ export declare class TableElement<T> extends LitElement implements TableProps<T>
     data: T[];
     pagination?: PaginationProps | undefined;
     columns: ColumnSettings<T>[];
+    select?: TableSelectOptions;
     private _handlePaginationChange;
     private _emitChange;
     private __DO_NOT_USE_filter;
+    selected: T[];
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    _handleSelectAllChange: (e: DomEvent<HTMLInputElement>) => void;
     protected render(): unknown;
 }
 interface TableEvents {

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

@@ -0,0 +1 @@
+export * from './tooltip';

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

@@ -0,0 +1,95 @@
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { CSSResultGroup, LitElement } from 'lit-element';
+import { DomRenderable } from '../table';
+export declare const TooltipElementTag = "spectric-tooltip";
+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 (default:300) you can disable this by setting to 0 or -1
+     */
+    maxWidth?: number;
+    /**
+     * Container the tool tip will be attached to. (default:document.body)
+     */
+    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
+     */
+    triggerTarget?: HTMLElement;
+}
+/**
+ * Spectric tooltip will add a tooltip to any container
+ */
+export declare class TooltipElement extends LitElement implements TooltipProps {
+    delay: number;
+    animationDuration: number;
+    text: DomRenderable;
+    position: TooltipPostionsTypes;
+    maxWidth?: number;
+    private portalElement;
+    private mouseLocation?;
+    static styles?: CSSResultGroup | undefined;
+    portalTarget: HTMLElement;
+    private timer?;
+    private open;
+    mouseframe?: number;
+    triggerTarget?: HTMLElement;
+    private get target();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _getMousePosition;
+    _hideTooltip: () => void;
+    private showToolTip;
+    private applyStyle;
+    private positionTooltip;
+    protected render(): void;
+}
+interface TooltipEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TooltipElementTag]: HTMLElementTagWithEvents<TooltipElement, TooltipEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
+            }
+        }
+    }
+}

package/dist/custom-elements.json

@@ -79,7 +79,7 @@
     },
     {
       "name": "spectric-button",
-      "description": "Events:\n\n  * `click` {`CustomEvent<MouseEvent>`} - \n\nAttributes:\n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - \n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `_onClick` - \n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - ",
+      "description": "Events:\n\n  * `click` {`CustomEvent<MouseEvent>`} - \n\nAttributes:\n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - \n\n  * `tooltip` {`DomRenderable | undefined`} - \n\n  * `tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - \n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `_onClick` - \n\n  * `variant` {`\"text\" | \"primary\" | \"secondary\"`} - Is this the principal call to action on the page?\n\n  * `backgroundColor` {`string | undefined`} - What background color to use\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \n\n  * `icon` {`boolean`} - \n\n  * `tooltip` {`DomRenderable | undefined`} - \n\n  * `tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - ",
       "attributes": [
         {
           "name": "variant",
@@ -145,6 +145,32 @@
           "description": "`icon` {`boolean`} - \n\nProperty: icon\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "tooltip",
+          "description": "`tooltip` {`DomRenderable | undefined`} - \n\nProperty: tooltip",
+          "values": []
+        },
+        {
+          "name": "tooltipPosition",
+          "description": "`tooltipPosition` {`\"top\" | \"bottom\" | \"left\" | \"right\" | \"mouse\" | undefined`} - \n\nProperty: tooltipPosition\n\nDefault: right",
+          "values": [
+            {
+              "name": "top"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            },
+            {
+              "name": "mouse"
+            }
+          ]
+        },
         {
           "name": "onclick",
           "description": "`click` {`CustomEvent<MouseEvent>`} - "
@@ -406,8 +432,13 @@
     },
     {
       "name": "spectric-input",
-      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\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\"`} - 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  * `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\"`} - 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>`} - 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.",
       "attributes": [
+        {
+          "name": "checked",
+          "description": "`checked` {`boolean | undefined`} - \n\nProperty: checked",
+          "values": []
+        },
         {
           "name": "hidePasswordLabel",
           "description": "`hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\nProperty: hidePasswordLabel\n\nDefault: Hide"
@@ -423,7 +454,7 @@
         },
         {
           "name": "variant",
-          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\"`} - Input type\n\nProperty: variant\n\nDefault: text",
+          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\"`} - Input type\n\nProperty: variant\n\nDefault: text",
           "values": [
             {
               "name": "number"
@@ -454,6 +485,9 @@
             },
             {
               "name": "password"
+            },
+            {
+              "name": "checkbox"
             }
           ]
         },
@@ -1834,7 +1868,7 @@
       "attributes": [
         {
           "name": "size",
-          "description": "`size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\nProperty: size\n\nDefault: small",
+          "description": "`size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\nProperty: size\n\nDefault: xsmall",
           "values": [
             {
               "name": "large"
@@ -1966,12 +2000,12 @@
     },
     {
       "name": "spectric-table-body",
-      "description": "Pagination 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` {`TableElement<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  * `table` {`TableElement<T>`} - \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  * `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",
@@ -1986,8 +2020,20 @@
     },
     {
       "name": "spectric-table",
-      "description": "Table Element\n\nThe table element is a bit more complex and the column settings and data can only be set through the properties\n\n\nReact\n\n``` tsx\n<spectric-table data={[{col1:1}]} columns={[{key:\"col1\",}]} ></spectric-table>\n```\n\nJavascript\n\n``` js\ntable = document.createElement(\"spectric-table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n```\n\nHTML \n\n``` html\n<spectric-table id=\"table\"></spectric-table>\n<script>\ndocument.querySelector(\"#table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n</script>\n```\n\nEvents:\n\n  * `change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - ",
+      "description": "Table Element\n\nThe table element is a bit more complex and the column settings and data can only be set through the properties\n\n\nReact\n\n``` tsx\n<spectric-table data={[{col1:1}]} columns={[{key:\"col1\",}]} ></spectric-table>\n```\n\nJavascript\n\n``` js\ntable = document.createElement(\"spectric-table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n```\n\nHTML \n\n``` html\n<spectric-table id=\"table\"></spectric-table>\n<script>\ndocument.querySelector(\"#table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n</script>\n```\n\nEvents:\n\n  * `change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `select` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`TableSelectOptions | undefined`} - \n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `selected` {`T[]`} - \n\n  * `_handleSelectAllChange` - \n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - \n\n  * `select` {`TableSelectOptions | undefined`} - ",
       "attributes": [
+        {
+          "name": "select",
+          "description": "`select` {`TableSelectOptions | undefined`} - \n\nProperty: select",
+          "values": [
+            {
+              "name": "multi"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
         {
           "name": "onchange",
           "description": "`change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - "
@@ -1995,12 +2041,61 @@
         {
           "name": "onfilter",
           "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
+        },
+        {
+          "name": "onselect",
+          "description": "`select` {`CustomEvent<T[]>`} - "
+        }
+      ]
+    },
+    {
+      "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",
+      "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 (default:300) you can disable this by setting to 0 or -1\n\nProperty: maxWidth\n\nDefault: 300",
+          "values": []
         }
       ]
     },
     {
       "name": "spectric-storybook-example-content",
-      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `dialogOpen` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `query` {`SpectricQuery`} - \n\n  * `dialogOpen` {`boolean`} - \n\n  * `tableData` {`TestData[]`} - \n\n  * `pagination` {`{ page: number; pageSize: number; size: string; totalItems: number; }`} - \n\n  * `_handleFilter` - \n\n  * `_handlePaginationChange` - ",
       "attributes": [
         {
           "name": "frameWidth",