@spectric/ui 0.0.12 → 0.0.14

package/README.MD

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

package/dist/classes/DisposibleElement.d.ts

@@ -14,8 +14,8 @@ export declare class DisposableElement extends LitElement {
      * @param event The event name
      * @param handler The event handler
      */
-    addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: DisposableTarget, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void;
-    addDisposableListener<K extends keyof SpectricGlobalEvents>(target: DisposableTarget, event: K, handler: SpectricGlobalEvents[K]): void;
+    addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: DisposableTarget, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void, options?: AddEventListenerOptions): void;
+    addDisposableListener<K extends keyof SpectricGlobalEvents>(target: DisposableTarget, event: K, handler: SpectricGlobalEvents[K], options?: AddEventListenerOptions): void;
     registerDisposable<T extends IDisposable>(o: T): T;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/components/Button.d.ts

@@ -1,7 +1,8 @@
-import { CSSResultGroup, LitElement } from 'lit';
+import { CSSResultGroup } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
 import { DomRenderable } from './table';
 import { TooltipPostionsTypes } from './tooltip';
+import { DisposableElement } from '../classes/DisposibleElement';
 export declare enum ButtonSizes {
     large = "large",
     medium = "medium",
@@ -31,7 +32,7 @@ export interface ButtonProps {
     tooltip?: DomRenderable;
     tooltipPosition?: TooltipPostionsTypes;
 }
-export declare class SpectricButton extends LitElement implements ButtonProps {
+export declare class SpectricButton extends DisposableElement implements ButtonProps {
     static styles?: CSSResultGroup | undefined;
     variant: 'primary' | 'secondary' | 'text';
     disabled: boolean;
@@ -42,8 +43,7 @@ export declare class SpectricButton extends LitElement implements ButtonProps {
     icon: boolean;
     tooltip?: DomRenderable;
     tooltipPosition?: TooltipPostionsTypes;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    constructor();
     private _onClick;
     protected render(): unknown;
 }

package/dist/components/pagination/pagination.d.ts

@@ -20,6 +20,7 @@ export declare class PaginationElement extends LitElement implements PaginationP
     pageSize: number;
     totalItems?: number;
     pageSizeOptions: number[];
+    select?: HTMLSelectElement;
     /**
      * Size of the pagination buttons
      */

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

@@ -1,6 +1,7 @@
 import { LitElement, PropertyValues } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { ColumnSettings, TableElement } from './table';
+import { StyleInfo } from 'lit/directives/style-map.js';
 export declare const TableCellElementTag = "spectric-table-cell";
 interface CellProps<T> {
     column: ColumnSettings<T>;
@@ -21,11 +22,11 @@ export declare class TableCellElement<T> extends LitElement implements CellProps
     column: ColumnSettings<T>;
     columns: ColumnSettings<T>[];
     table: TableElement<T>;
-    styleRules: CSSStyleDeclaration;
     td: HTMLTableCellElement;
-    constructor();
-    protected updated(_changedProperties: PropertyValues): void;
+    styleRules: StyleInfo;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected updated(_changedProperties: PropertyValues): void;
+    _emitFilter(filter: FilterEvent<T>): void;
     _handleFilterOut: () => void;
     _handleFilterFor: () => void;
     protected render(): unknown;

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

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-import { PaginationProps } from '../pagination';
+import { PaginationChangeProps, PaginationProps } from '../pagination';
 import { FilterEvent } from './cell';
 export declare const TableElementTag = "spectric-table";
 export type { TableProps, TableEvents };
@@ -17,7 +17,7 @@ export declare enum TableSortOption {
 export type TableSortOptionTypes = `${TableSortOption}`;
 export declare enum TableSortDirection {
     ascending = "ascending",
-    decending = "decending",
+    descending = "descending",
     none = "none"
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`;
@@ -78,13 +78,17 @@ export declare class TableElement<T> extends LitElement implements TableProps<T>
     private __DO_NOT_USE_filter;
     private selected;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    deselectAll(): void;
+    selectAll(): void;
     _handleSelectAllChange: (e: DomEvent<HTMLInputElement>) => void;
     protected update(changedProperties: PropertyValues): void;
     protected render(): unknown;
 }
 interface TableEvents {
     'change': (event: CustomEvent<TableDataOptions<any>>) => void;
+    'paginationChange': (event: CustomEvent<PaginationChangeProps>) => void;
     'filter': (event: CustomEvent<FilterEvent<any>>) => void;
+    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -71,7 +71,7 @@ export declare class TooltipElement extends DisposableElement implements Tooltip
     private showToolTip;
     private applyStyle;
     private positionTooltip;
-    protected render(): void;
+    protected render(): import('lit-html').TemplateResult<1>;
 }
 interface TooltipEvents {
 }

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: DisposableTarget; 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; options?: AddEventListenerOptions | undefined; }[]`} - \n\n  * `_connected` {`boolean`} - ",
       "attributes": [
         {
           "name": "frameWidth",
@@ -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\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`} - ",
+      "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`} - \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": "variant",
@@ -1864,7 +1864,7 @@
     },
     {
       "name": "spectric-pagination",
-      "description": "Pagination Element\n\nEvents:\n\n  * `change` {`CustomEvent<PaginationChangeProps>`} - \n\nAttributes:\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\n  * `totalItems` {`number | undefined`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `page` {`number`} - \n\n  * `pageSize` {`number`} - \n\nProperties:\n\n  * `_handlePageUp` - \n\n  * `_handlePageDown` - \n\n  * `_handleSizeChange` - \n\n  * `_emitChange` - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\n  * `totalItems` {`number | undefined`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `page` {`number`} - \n\n  * `pageSize` {`number`} - ",
+      "description": "Pagination Element\n\nEvents:\n\n  * `change` {`CustomEvent<PaginationChangeProps>`} - \n\nAttributes:\n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\n  * `totalItems` {`number | undefined`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `page` {`number`} - \n\n  * `pageSize` {`number`} - \n\nProperties:\n\n  * `select` {`HTMLSelectElement | undefined`} - \n\n  * `_handlePageUp` - \n\n  * `_handlePageDown` - \n\n  * `_handleSizeChange` - \n\n  * `_emitChange` - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\n  * `totalItems` {`number | undefined`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `page` {`number`} - \n\n  * `pageSize` {`number`} - ",
       "attributes": [
         {
           "name": "size",
@@ -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: DisposableTarget; 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; options?: AddEventListenerOptions | undefined; }[]`} - \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  * `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`} - ",
+      "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`} - ",
       "attributes": [
         {
           "name": "onfilter",
@@ -2025,7 +2025,7 @@
     },
     {
       "name": "spectric-table",
-      "description": "React example\n<iframe  width=\"100%\" height=\"400px\" src=\"https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1\"/>\n\nEvents:\n\n  * `change` {`CustomEvent<TableDataOptions<T>>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\n  * `selected` {`CustomEvent<T[]>`} - \n\nAttributes:\n\n  * `select` {`\"none\" | \"multi\" | \"single\"`} - \n\n  * `sort` {`\"multi\" | \"single\"`} - \n\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  * `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",
@@ -2058,6 +2058,10 @@
           "name": "rowHeight",
           "description": "`rowHeight` {`number`} - Needed for virtualization\n\nProperty: rowHeight\n\nDefault: 25"
         },
+        {
+          "name": "onpaginationChange",
+          "description": "`paginationChange` {`CustomEvent<PaginationChangeProps>`} - "
+        },
         {
           "name": "onchange",
           "description": "`change` {`CustomEvent<TableDataOptions<T>>`} - "
@@ -2066,6 +2070,10 @@
           "name": "onfilter",
           "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
         },
+        {
+          "name": "onsortChange",
+          "description": "`sortChange` {`CustomEvent<ColumnSettings<T>>`} - "
+        },
         {
           "name": "onselected",
           "description": "`selected` {`CustomEvent<T[]>`} - "
@@ -2074,7 +2082,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; }[]`} - \n\n  * `_connected` {`boolean`} - ",
+      "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`} - ",
       "attributes": [
         {
           "name": "startIndex",
@@ -2084,7 +2092,7 @@
     },
     {
       "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; }[]`} - \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  * `_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`} - ",
       "attributes": [
         {
           "name": "delay",