@spectric/ui 0.0.10 → 0.0.12

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",
@@ -2015,16 +2015,36 @@
     },
     {
       "name": "spectric-table-header",
-      "description": "Pagination Element\n\nProperties:\n\n  * `columns` {`ColumnSettings<T>[]`} - ",
-      "attributes": []
+      "description": "Pagination Element\n\nEvents:\n\n  * `sortChange` {`CustomEvent<ColumnSettings<T>>`} - \n\nProperties:\n\n  * `_handleSortChange` - \n\n  * `columns` {`ColumnSettings<T>[]`} - ",
+      "attributes": [
+        {
+          "name": "onsortChange",
+          "description": "`sortChange` {`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  * `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`} - ",
+      "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\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",
-          "description": "`select` {`TableSelectOptions | undefined`} - \n\nProperty: select",
+          "description": "`select` {`\"none\" | \"multi\" | \"single\"`} - \n\nProperty: select\n\nDefault: none",
+          "values": [
+            {
+              "name": "none"
+            },
+            {
+              "name": "multi"
+            },
+            {
+              "name": "single"
+            }
+          ]
+        },
+        {
+          "name": "sort",
+          "description": "`sort` {`\"multi\" | \"single\"`} - \n\nProperty: sort\n\nDefault: single",
           "values": [
             {
               "name": "multi"
@@ -2034,23 +2054,37 @@
             }
           ]
         },
+        {
+          "name": "rowHeight",
+          "description": "`rowHeight` {`number`} - Needed for virtualization\n\nProperty: rowHeight\n\nDefault: 25"
+        },
         {
           "name": "onchange",
-          "description": "`change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - "
+          "description": "`change` {`CustomEvent<TableDataOptions<T>>`} - "
         },
         {
           "name": "onfilter",
           "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
         },
         {
-          "name": "onselect",
-          "description": "`select` {`CustomEvent<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",
@@ -2088,14 +2122,14 @@
         },
         {
           "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": []
         }
       ]
     },
     {
       "name": "spectric-storybook-example-content",
-      "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` - ",
+      "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `query` {`SpectricQuery`} - \n\n  * `dataSorter` - \n\n  * `dialogOpen` {`boolean`} - \n\n  * `tableData` {`TestData[]`} - \n\n  * `columns` {`ColumnSettings<TestData>[]`} - \n\n  * `pagination` {`PaginationProps`} - \n\n  * `_handleFilter` - \n\n  * `_handlePaginationChange` - ",
       "attributes": [
         {
           "name": "frameWidth",