@spectric/ui 0.0.12 → 0.0.14

package/dist/style.css

@@ -1 +1 @@
-spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden}spectric-table .table-wrapper{overflow:auto;flex-grow:1;position:relative}spectric-table tr{text-align:center}spectric-table tr.odd{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle}spectric-table tr{line-height:var(--rowHeight)}spectric-table td{height:var(--rowHeight)}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:0}spectric-table-header .header-contents.sortable{cursor:pointer}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table td{border:1px solid transparent}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}spectric-table-body{display:table-row-group}spectric-table-virtual-body{display:contents}spectric-table-virtual-body .virtual-scroll-spacer td{padding:0;border:0px}.spectric-tooltip-portal{position:fixed;z-index:9999;pointer-events:none;--spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%) }.spectric-tooltip-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);border-radius:var(--spectric-border-radius,.4em);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-background-hover,rgba(141, 141, 141, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}
+spectric-input{--input-color: var(--spectric-input-color, #f4f4f4);--border-radius: var(--spectric-border-radius, .4em);--input-bottom: var(--spectric-input-bottom, var(--spectric-button-primary, #a8a8a8));--input-bottom-focused: var(--primary, #1ea7fd);--text-on-color: var(--spectric-text-on-color, #ffffff);--text-on-color-disabled: var(--spectric-text-on-color-disabled, #8d8d8d);--text-placeholder: rgba(22, 22, 22, .4);--text-primary: var(--spectric-text-primary, #161616);--text-secondary: var(--spectric-text-secondary, #525252)}spectric-input .inputWrapper{color:var(--text-secondary)}spectric-input .inputWrapper input{box-sizing:border-box;margin:0;vertical-align:baseline;font-size:.875rem;font-weight:400;line-height:1.28572;letter-spacing:.16px;outline:transparent solid 2px;outline-offset:-2px;border:none;padding:0 1rem;background-color:var(--input-color);color:var(--text-primary, #161616);font-family:inherit;inline-size:100%;block-size:2.5rem}spectric-input .inputWrapper .inputContainer:active:after,spectric-input .inputContainer:focus-within:after{border-bottom-color:var(--input-bottom-focused);width:calc(100% - 5px);transition:width .4s ease-in-out}spectric-input .inputWrapper input:read-only{background-color:transparent;border-bottom-color:var(--border-disabled)}spectric-input .inputContainer{position:relative;border-radius:var(--border-radius);overflow:hidden}spectric-input .inputContainer:after{content:"";width:0px;transition:background-color .4s cubic-bezier(.2,0,.38,.9),border-bottom-color .4s cubic-bezier(.2,0,.38,.9);border-bottom-color:var(--input-bottom);border-bottom-style:solid;border-bottom-width:1px;position:absolute;left:2.5px;bottom:0}spectric-input #helper-text{height:18px}spectric-input[variant=password] spectric-button{position:absolute;right:4px;bottom:3px}spectric-input .checkbox{display:flex;justify-self:center}spectric-query{font-family:monospace}spectric-query .autocomplete{color:var(--spectric-text-primary, #161616);border-radius:0em 0em var(--spectric-border-radius, .4em) var(--spectric-border-radius, .4em);background-color:var(--spectric-background, #ffffff);border:1px solid var(--spectric-background-hover, rgba(141, 141, 141, .12));max-height:300px;border-top:0px;margin:-18px 0 0;position:fixed;top:anchor(bottom);justify-self:anchor-center;text-align:center}spectric-query .autocomplete .optiontype{float:left;max-width:10px}spectric-query .autocomplete .label{position:absolute;right:0}spectric-query .autocomplete .option.active,spectric-query .autocomplete .option:hover{background-color:var(--spectric-background-hover, rgba(141, 141, 141, .12));border-bottom:1px solid var(--primary, #1ea7fd)}spectric-query .autocomplete .option{border-bottom:1px solid transparent;padding:8px}.query-bar-date-quick-select{display:flex;justify-content:space-evenly}spectric-pagination .spectric-pagination-container{display:flex;justify-content:space-between;align-items:center}spectric-pagination .spectric-pagination-text{flex-grow:1;text-align:center}spectric-table{display:flex;flex-direction:column;overflow:hidden}spectric-table .table-wrapper{overflow:auto;flex-grow:1;position:relative}spectric-table tr{text-align:center}spectric-table tr.odd{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 90%)}spectric-table tr:hover{background-color:color-mix(in srgb,var(--spectric-primary, #1ea7fd),transparent 70%)}spectric-table-header{display:table-header-group;font-weight:700;position:sticky;top:0;left:0;z-index:1;background:var(--spectric-background, #ffffff)}spectric-table-header td{vertical-align:middle}spectric-table tr{line-height:var(--rowHeight)}spectric-table td{height:var(--rowHeight)}spectric-table-header .header-contents{position:relative}spectric-table-header .header-contents .sort-direction{position:absolute;right:0;top:calc(50% - 8px)}spectric-table-header .header-contents.sortable{cursor:pointer;padding-right:15px}spectric-table-header .header-contents.sortable:hover .sort-direction.none:before{content:"⮁"}spectric-table div[role=table]{display:table;min-width:100%}spectric-table-cell{display:contents;vertical-align:middle}spectric-table-cell td{position:relative}spectric-table td:hover:has(.filterable){border:1px solid var(--spectric-primary, #1ea7fd)}spectric-table td{border:1px solid transparent}spectric-table-cell .table-cell-actions{position:absolute;display:flex;width:100%;flex-direction:row-reverse;visibility:hidden;top:-10px}spectric-table-cell td:hover .table-cell-actions{visibility:unset}spectric-table .table-checkbox-single spectric-button{--button-border-radius: 50%}spectric-input.table-checkbox-single[checked] spectric-button{--text-on-color: transparent;border-radius:50%;position:relative}spectric-input.table-checkbox-single[checked] spectric-button:before{position:absolute;content:" ";height:50%;width:50%;left:25%;top:25%;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--input-color)}spectric-table-body{display:table-row-group}spectric-table-virtual-body{display:contents}spectric-table-virtual-body .virtual-scroll-spacer td{padding:0;border:0px}.spectric-tooltip-portal{position:fixed;z-index:9999;pointer-events:none;--spectric-tooltip-background: color-mix(in srgb,var(--spectric-background-inverse,#f4f4f4) 100%,var(--spectric-primary,#1ea7fd) 90%) }.spectric-tooltip-portal .tooltip-container{display:flex;justify-content:center;align-items:center}.spectric-tooltip-portal.top .tooltip-container{flex-direction:column-reverse}.spectric-tooltip-portal.bottom .tooltip-container{flex-direction:column}.spectric-tooltip-portal.left .tooltip-container{flex-direction:row-reverse}.spectric-tooltip-portal .tooltip-content{background:var(--spectric-tooltip-background);border-radius:var(--spectric-border-radius,.4em);box-shadow:0 0 .01em .01em color-mix(in srgb,var(--spectric-background-hover,rgba(141, 141, 141, .12)) 90%,var(--spectric-text-on-color,#ffffff) 90%);padding:.2em;color:var(--spectric-text-on-color,#ffffff)}.spectric-tooltip-portal .tooltip-caret{background:var(--spectric-tooltip-background)}.spectric-tooltip-portal.top .tooltip-caret,.spectric-tooltip-portal.bottom .tooltip-caret{inline-size:.75rem;block-size:.374rem}.spectric-tooltip-portal.left .tooltip-caret,.spectric-tooltip-portal.right .tooltip-caret{inline-size:.375rem;block-size:.75rem}.spectric-tooltip-portal.top .tooltip-caret{clip-path:polygon(0 0,50% 100%,100% 0)}.spectric-tooltip-portal.bottom .tooltip-caret{clip-path:polygon(0 100%,50% 0,100% 100%)}.spectric-tooltip-portal.left .tooltip-caret{clip-path:polygon(0 0,100% 50%,0 100%)}.spectric-tooltip-portal.right .tooltip-caret{clip-path:polygon(0 50%,100% 0,100% 100%)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",

package/src/classes/DisposibleElement.ts

@@ -56,7 +56,7 @@ class DomListener implements IDisposable {
 export class DisposableElement extends LitElement {
     private readonly _disposables = new Set<IDisposable>();
     private _isDisposed = false;
-    private _disposableListeners: { target: DisposableTarget, event: string, handler: any }[] = []
+    private _disposableListeners: { target: DisposableTarget, event: string, handler: any, options?: AddEventListenerOptions }[] = []
     private _connected: boolean = false;
     /**
      * Creates listeners on a target that will automatically get cleaned up when the element is removed from the DOM. This prevents memory leaks.
@@ -64,17 +64,17 @@ export class DisposableElement extends LitElement {
      * @param event The event name
      * @param handler The event handler
      */
-    public addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: DisposableTarget, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void
-    public addDisposableListener<K extends keyof SpectricGlobalEvents>(target: DisposableTarget, event: K, handler: SpectricGlobalEvents[K]): void
-    public addDisposableListener(target: DisposableTarget, event: string, handler: any): void {
+    public addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: DisposableTarget, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void, options?: AddEventListenerOptions): void
+    public addDisposableListener<K extends keyof SpectricGlobalEvents>(target: DisposableTarget, event: K, handler: SpectricGlobalEvents[K], options?: AddEventListenerOptions): void
+    public addDisposableListener(target: DisposableTarget, event: string, handler: any, options?: AddEventListenerOptions): void {
         let exists = this._disposableListeners.find(d => d.event === event && d.target === target && d.handler === handler)
         if (exists) {
             console.warn("Event handler already exists best practice is to add the this in the constructor")
             return //Event handler has already been added, maybe they added it in a callback
         }
-        this._disposableListeners.push({ target, event, handler })
+        this._disposableListeners.push({ target, event, handler, options })
         if (this._connected) {
-            this.registerDisposable(new DomListener(target, event, handler))
+            this.registerDisposable(new DomListener(target, event, handler, options))
         }
     }
     public registerDisposable<T extends IDisposable>(o: T): T {
@@ -97,8 +97,8 @@ export class DisposableElement extends LitElement {
         super.connectedCallback();
         this._connected = true
         this._isDisposed = false
-        this._disposableListeners.forEach(({ target, event, handler }) => {
-            this.registerDisposable(new DomListener(target, event, handler))
+        this._disposableListeners.forEach(({ target, event, handler, options }) => {
+            this.registerDisposable(new DomListener(target, event, handler, options))
         })
     }
 

package/src/components/Button.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, html, LitElement } from 'lit';
+import { CSSResultGroup, html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import style from './button.css';
@@ -6,6 +6,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
 import { DomRenderable } from './table';
 import { TooltipPostionsTypes } from './tooltip';
+import { DisposableElement } from '../classes/DisposibleElement';
 
 export enum ButtonSizes {
   large = "large",
@@ -45,7 +46,7 @@ const MODES = {
 }
 
 @customElement('spectric-button')
-export class SpectricButton extends LitElement implements ButtonProps {
+export class SpectricButton extends DisposableElement implements ButtonProps {
 
   static styles?: CSSResultGroup | undefined = style;
   @property({ type: String, reflect: true })
@@ -66,14 +67,11 @@ export class SpectricButton extends LitElement implements ButtonProps {
   tooltip?: DomRenderable;
   @property({ type: String, reflect: true })
   tooltipPosition?: TooltipPostionsTypes = "right";
-  connectedCallback(): void {
-    super.connectedCallback()
-    this.addEventListener("click", this._onClick, { capture: true })
-  }
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-    this.removeEventListener("click", this._onClick)
+  constructor() {
+    super()
+    this.addDisposableListener(this, "click", this._onClick, { capture: true })
   }
+
   private _onClick = (e: MouseEvent) => {
     if (e instanceof CustomEvent) {
       return

package/src/components/pagination/pagination.ts

@@ -1,6 +1,6 @@
 import { html, LitElement, PropertyValues } from 'lit';
 import "../Button";
-import { customElement, property, } from 'lit/decorators.js';
+import { customElement, property, query, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 export const PaginationElementTag = "spectric-pagination"
 import "./pagination.css"
@@ -37,6 +37,8 @@ export class PaginationElement extends LitElement implements PaginationProps {
     @property({ type: Array })
     pageSizeOptions = [10, 20, 50, 100, 1000];
 
+    @query("select")
+    select?: HTMLSelectElement
     /**
      * Size of the pagination buttons
      */
@@ -48,6 +50,15 @@ export class PaginationElement extends LitElement implements PaginationProps {
     protected updated(_changedProperties: PropertyValues): void {
         if (_changedProperties.has("pageSize") && !this.pageSizeOptions.includes(this.pageSize)) {
             this.pageSizeOptions = [...this.pageSizeOptions, this.pageSize].sort((a, b) => a - b)
+            /**
+             * If an option isn't present in the select options list it cannot update its value until after the option is present.
+             * We requests an animation frame to make sure we the value was set correctly after the option is added. We update it if the value is incorrect
+             */
+            requestAnimationFrame(() => {
+                if (this.select && this.select.value !== String(this.pageSize)) {
+                    this.select.value = String(this.pageSize)
+                }
+            })
         }
     }
     private _handlePageUp = () => {
@@ -59,6 +70,8 @@ export class PaginationElement extends LitElement implements PaginationProps {
         this._emitChange()
     }
     private _handleSizeChange = (e: any) => {
+        e.stopPropagation()
+        e.preventDefault()
         let value = parseInt(e.target.value)
         this.pageSize = value
         this._emitChange()

package/src/components/table/cell.ts

@@ -3,6 +3,8 @@ import { customElement, property, query, } from 'lit/decorators.js';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 export const TableCellElementTag = "spectric-table-cell"
 import { ColumnSettings, TableElement } from './table';
+import { cache } from 'lit/directives/cache.js';
+import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 interface CellProps<T> {
     column: ColumnSettings<T>
@@ -30,50 +32,47 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
     column!: ColumnSettings<T>;
     columns!: ColumnSettings<T>[];
     table!: TableElement<T>
-    styleRules: CSSStyleDeclaration;
+
     @query("td")
     td!: HTMLTableCellElement
-    constructor() {
-        super()
-        this.styleRules = document.createElement('span').style;
+    styleRules: StyleInfo = { whiteSpace: "", width: "" };
+    protected createRenderRoot(): HTMLElement | DocumentFragment {
+        return this
     }
     protected updated(_changedProperties: PropertyValues): void {
-        Object.assign(this.td.style, this.styleRules)
+
     }
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this
+    _emitFilter(filter: FilterEvent<T>) {
+        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
+            composed: true,
+            bubbles: true,
+            detail: filter
+        }))
     }
     _handleFilterOut = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
             value = rowGetValue(this.row as Record<any, any>, this.column.key)
         }
-        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
-            composed: true,
-            bubbles: true,
-            detail: {
-                include: false,
-                row: this.row,
-                value,
-                column: this.column
-            }
-        }))
+        this._emitFilter({
+            include: false,
+            row: this.row,
+            value,
+            column: this.column
+        })
+
     }
     _handleFilterFor = () => {
         let value = undefined;
         if (this.column.key && typeof this.row === "object") {
             value = rowGetValue(this.row as Record<any, any>, this.column.key)
         }
-        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
-            composed: true,
-            bubbles: true,
-            detail: {
-                include: true,
-                row: this.row,
-                value,
-                column: this.column
-            }
-        }))
+        this._emitFilter({
+            include: true,
+            row: this.row,
+            value,
+            column: this.column
+        })
     }
     protected render(): unknown {
         let rendered
@@ -88,17 +87,20 @@ export class TableCellElement<T> extends LitElement implements CellProps<T> {
         if (this.column.filterable) {
             classes.push("filterable")
         }
-        let filterButtons = html`<div class="table-cell-actions">
+
+        let filterButtons = cache(this.column.filterable
+            ? html`<div class="table-cell-actions">
             <spectric-button @click=${this._handleFilterOut} size="tiny" variant="text" icon tooltip="Filter Out Value">-</spectric-button>
             <spectric-button @click=${this._handleFilterFor} size="tiny" variant="text" icon tooltip="Filter For Value">+</spectric-button></div>`
+            : null
+        )
         this.styleRules = {
-            ...this.styleRules,
             width: this.column.width ? this.column.width + "px" : "",
             whiteSpace: this.column.whiteSpace || ""
         }
         return html`
-            <td>
-                ${this.column.filterable ? filterButtons : null}
+            <td style=${styleMap(this.styleRules)}>
+                ${filterButtons}
                 <div class=${classes.join(" ")}>${rendered}</div>
             </td>
             `

package/src/components/table/header.ts

@@ -30,11 +30,15 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
         if (column.sortDirection === TableSortDirection.none || column.sortDirection === undefined) {
             column.sortDirection = TableSortDirection.ascending
         } else if (column.sortDirection === TableSortDirection.ascending) {
-            column.sortDirection = TableSortDirection.decending
-        } else if (column.sortDirection === TableSortDirection.decending) {
+            column.sortDirection = TableSortDirection.descending
+        } else if (column.sortDirection === TableSortDirection.descending) {
             column.sortDirection = TableSortDirection.none
         }
-        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange", { detail: column }))
+        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange", {
+            composed: true,
+            bubbles: true,
+            detail: column
+        }))
     }
     protected render(): unknown {
         return html`
@@ -48,7 +52,7 @@ export class TableHeaderElement<T> extends LitElement implements HeaderProps<T>
                 classes.push("sortable")
             }
             let columnWidth = column.width ? `width:${column.width}px;` : ""
-            let sortDirection = column.sortDirection === TableSortDirection.ascending ? `🠉` : column.sortDirection == TableSortDirection.decending ? `🠋` : ``
+            let sortDirection = column.sortDirection === TableSortDirection.ascending ? `🠉` : column.sortDirection == TableSortDirection.descending ? `🠋` : ``
             let sortClass = column.sortDirection || TableSortDirection.none
             return html`
             <td @click=${() => this._handleSortChange(column)} style="${columnWidth}">

package/src/components/table/sorting.ts

@@ -19,12 +19,12 @@ export const createSortChain = <T>(sorts: ColumnSettings<T>[]) => {
             if (typeof v1 === "number" || typeof v1 === "bigint" || typeof v1 === "boolean") {
                 //@ts-ignore
                 let sort: number = v1 - v2 as unknown as number
-                if (sortDirection === TableSortDirection.decending) {
+                if (sortDirection === TableSortDirection.descending) {
                     sort = sort * -1
                 }
                 return sort
             } else if (typeof v1 === "string") {
-                return v1.localeCompare(v2) * (sortDirection === TableSortDirection.decending ? -1 : 1)
+                return v1.localeCompare(v2) * (sortDirection === TableSortDirection.descending ? -1 : 1)
             }
             once(() => { console.error(`Unable to sort type ${typeof v1}`) })
             return undefined

package/src/components/table/table.css

@@ -43,9 +43,11 @@ spectric-table-header .header-contents {
 spectric-table-header .header-contents .sort-direction {
     position: absolute;
     right: 0;
+    top: calc(50% - 8px)
 }
 spectric-table-header .header-contents.sortable {
     cursor: pointer;
+    padding-right:15px
 }
 spectric-table-header .header-contents.sortable:hover .sort-direction.none::before
  {

package/src/components/table/table.ts

@@ -28,7 +28,7 @@ export enum TableSortOption {
 export type TableSortOptionTypes = `${TableSortOption}`
 export enum TableSortDirection {
     ascending = "ascending",
-    decending = "decending",
+    descending = "descending",
     none = "none"
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`
@@ -121,8 +121,6 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
     }
 
     private _handlePaginationChange = (e: CustomEvent<PaginationChangeProps>) => {
-        e.preventDefault()
-        e.stopPropagation()
         if (this.pagination) {
             let pagination = { ...this.pagination, ...e.detail }
 
@@ -132,6 +130,7 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
             }
             this.pagination = pagination
         }
+        this.dispatchEvent(new CustomEvent<PaginationChangeProps>("paginationChange", { detail: e.detail }))
         this._emitChange()
     };
     private _handleSortChange = (e: CustomEvent<ColumnSettings<T>>) => {
@@ -158,22 +157,30 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
     }
     //@ts-ignore
     private __DO_NOT_USE_filter = () => {
-        //This is only here to document events that bubble up from lower components
+        //This is only here to auto document events that bubble up from lower components
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter"))
+        this.dispatchEvent(new CustomEvent<ColumnSettings<T>>("sortChange"))
     }
     @state()
     private selected: T[] = [];
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
     }
+    deselectAll() {
+        this.selected = []
+        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+    }
+    selectAll() {
+        this.selected = [...this.data]
+        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
+    }
     _handleSelectAllChange = (e: DomEvent<HTMLInputElement>) => {
         e.stopPropagation()
         if (e.target.checked) {
-            this.selected = [...this.data]
+            this.selectAll()
         } else {
-            this.selected = []
+            this.deselectAll()
         }
-        this.dispatchEvent(new CustomEvent("selected", { detail: this.selected }))
     }
     protected update(changedProperties: PropertyValues): void {
         if (changedProperties.has("select")) {
@@ -235,7 +242,9 @@ export class TableElement<T> extends LitElement implements TableProps<T> {
 
 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 {

package/src/components/tooltip/tooltip.ts

@@ -63,7 +63,7 @@ export class TooltipElement extends DisposableElement implements TooltipProps {
     position: TooltipPostionsTypes = "right";
     @property({ type: Number, reflect: true })
     maxWidth?: number = 300;
-    private portalElement = document.createElement("div")
+    private portalElement!: HTMLDivElement
     private mouseLocation?: { left: number; top: number; };
     static styles?: CSSResultGroup | undefined = css`:host{max-height: 0px;
     max-width: 0px;
@@ -90,10 +90,14 @@ export class TooltipElement extends DisposableElement implements TooltipProps {
     }
     connectedCallback(): void {
         super.connectedCallback()
+        this.portalElement = document.createElement("div")
+        this.portalElement.className = "spectric-tooltip-portal"
     }
     disconnectedCallback(): void {
-        super.disconnectedCallback()
+        super.disconnectedCallback();
         this.portalElement.remove()
+        //@ts-ignore
+        this.portalElement = undefined
     }
     private _getMousePosition = (ev: MouseEvent) => {
         this.mouseLocation = {
@@ -199,6 +203,7 @@ export class TooltipElement extends DisposableElement implements TooltipProps {
     protected render() {
         //We don't need to render anything here this is just a placeholder element the content is displayed in a portal attached to the body.
         // See showTooltip for the real rendering
+        return html`<!-- ToolTip -->`
     }
 }