@spectric/ui 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectric/ui",
-  "version": "0.0.13",
+  "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,18 +32,15 @@ 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;
-    }
-    protected updated(_changedProperties: PropertyValues): void {
-        Object.assign(this.td.style, this.styleRules)
-    }
+    styleRules: StyleInfo = { whiteSpace: "", width: "" };
     protected createRenderRoot(): HTMLElement | DocumentFragment {
         return this
+    }
+    protected updated(_changedProperties: PropertyValues): void {
+
     }
     _emitFilter(filter: FilterEvent<T>) {
         this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
@@ -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/table.ts

@@ -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 }
 
@@ -159,7 +157,7 @@ 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"))
     }

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 -->`
     }
 }