@spectric/ui 0.0.10 → 0.0.12

package/dist/classes/DisposibleElement.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from 'lit-element/lit-element.js';
 export interface IDisposable {
     dispose(): void;
 }
+type DisposableTarget = HTMLElement | Promise<HTMLElement> | (() => HTMLElement);
 export declare class DisposableElement extends LitElement {
     private readonly _disposables;
     private _isDisposed;
@@ -13,9 +14,10 @@ export declare class DisposableElement extends LitElement {
      * @param event The event name
      * @param handler The event handler
      */
-    addDisposableListener<K extends keyof GlobalEventHandlersEventMap>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: (event: GlobalEventHandlersEventMap[K]) => void): void;
-    addDisposableListener<K extends keyof SpectricGlobalEvents>(target: HTMLElement | Promise<HTMLElement>, event: K, handler: SpectricGlobalEvents[K]): void;
+    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;
     registerDisposable<T extends IDisposable>(o: T): T;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }
+export {};

package/dist/components/Bitdisplay.d.ts

@@ -5,13 +5,13 @@ export interface BitDisplayProps {
     /** Array buffer to display */
     arrayBuffer: ArrayBuffer;
     /** Bits per line */
-    frameWidth: number;
+    frameWidth?: number;
     /** How many pixels per bit */
-    scale: number;
+    scale?: number;
     /** Width of the display canvas */
-    width: number;
+    width?: number;
     /** Height of the display canvas */
-    height: number;
+    height?: number;
 }
 type Position = {
     x: number;

package/dist/components/Button.d.ts

@@ -23,7 +23,7 @@ export interface ButtonProps {
     /** What background color to use */
     backgroundColor?: string;
     /** How large should the button be? */
-    size: ButtonSizesTypes;
+    size?: ButtonSizesTypes;
     label?: string;
     disabled?: boolean;
     danger?: boolean;

package/dist/components/Header.d.ts

@@ -4,7 +4,7 @@ import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './type
  * Properties defining
  */
 export interface HeaderProps {
-    username: string;
+    username?: string;
     /**
      * Shows the login Button
      */

package/dist/components/input.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { ReactElementWithPropsAndEvents } from './types';
 import { ButtonSizesTypes } from './Button';
 export declare enum InputVariants {
@@ -17,29 +17,29 @@ export declare enum InputVariants {
 type InputVariantsTypes = `${InputVariants}`;
 export interface InputProps {
     /** Input type */
-    variant: InputVariantsTypes;
+    variant?: InputVariantsTypes;
     /**Label to display above the input */
-    label: string;
+    label?: string;
     /**placeholder text to display*/
-    placeholder: string;
-    disabled: boolean;
-    readonly: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
     /**
    * The helper text.
    */
-    helperText: string;
+    helperText?: string;
     /**
      * Specify if the currently value is invalid.
      */
-    invalid: boolean;
+    invalid?: boolean;
     /**
      * Message which is displayed if the value is invalid.
      */
-    invalidText: string | TemplateResult<1>;
+    invalidText?: string | TemplateResult<1>;
     /**
      * Max character count allowed for input. This is needed in order for enableCounter to display
      */
-    maxCount: number;
+    maxCount?: number;
     /**
   * Boolean property to set the required status
   */
@@ -59,7 +59,7 @@ export interface InputProps {
     /**
      * The sets the autocomplete for the input.
      */
-    autocomplete: HTMLInputElement['autocomplete'];
+    autocomplete?: HTMLInputElement['autocomplete'];
 }
 export declare class SpectricInput extends LitElement implements InputProps {
     checked?: boolean;
@@ -106,7 +106,7 @@ export declare class SpectricInput extends LitElement implements InputProps {
      * Pattern to validate the input against for HTML validity checking
      */
     pattern: string;
-    maxCount: InputProps['maxCount'];
+    maxCount: number;
     /**
   * The internal value.
   */
@@ -134,6 +134,7 @@ export declare class SpectricInput extends LitElement implements InputProps {
     */
     protected _input?: HTMLInputElement;
     private handleTogglePasswordVisibility;
+    protected updated(changedProperties: PropertyValues): void;
     protected render(): unknown;
 }
 declare global {

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

@@ -4,11 +4,11 @@ import { ButtonSizesTypes } from '../Button';
 export declare const PaginationElementTag = "spectric-pagination";
 export type { PaginationProps, PaginationChangeProps, PaginationEvents };
 interface PaginationChangeProps {
-    page: number;
-    pageSize: number;
+    page?: number;
+    pageSize?: number;
 }
 interface PaginationProps extends PaginationChangeProps {
-    size: ButtonSizesTypes;
+    size?: ButtonSizesTypes;
     totalItems?: number;
     pageSizeOptions?: number[];
 }
@@ -42,7 +42,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link PaginationElement}
              */
             [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
         }
@@ -51,7 +51,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link PaginationElement}
                  */
                 [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
             }

package/dist/components/splitview/splitview.d.ts

@@ -7,15 +7,15 @@ export declare enum Orientations {
 }
 export interface SplitViewProps {
     /** Controls the orientation of the splitter handle */
-    orientation: `${Orientations}`;
+    orientation?: `${Orientations}`;
     /** the percentage to split the view default: 50*/
     percentage?: number;
     /** Should the splitter handle be invisible? */
     invisible?: boolean;
     /** Clamps the minimum split percentage default: 10 */
-    min: number;
+    min?: number;
     /** Clamps the maximum split percentage default: 90 */
-    max: number;
+    max?: number;
     /** save and load split state to localstorage splitter must have an id attribute default: true */
     useSavedState?: boolean;
 }
@@ -30,8 +30,8 @@ export declare class SplitView extends DisposableElement implements SplitViewPro
     percentage: SplitViewProps['percentage'];
     invisible: SplitViewProps['invisible'];
     static styles: import('lit').CSSResult;
-    min: SplitViewProps['min'];
-    max: SplitViewProps['max'];
+    min: number;
+    max: number;
     useSavedState: SplitViewProps['useSavedState'];
     private isDragging;
     private _error;

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { ColumnSettings, TableElement } from './table';
 export declare const TableBodyElementTag = "spectric-table-body";
@@ -14,6 +14,7 @@ export declare class TableBodyElement<T> extends LitElement implements BodyProps
     columns: ColumnSettings<T>[];
     table: TableElement<T>;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
     protected render(): unknown;
 }
 interface TableBodyEvents {

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

@@ -17,6 +17,7 @@ export type FilterEvent<T> = {
  */
 export declare class TableCellElement<T> extends LitElement implements CellProps<T> {
     row: T;
+    index: number;
     column: ColumnSettings<T>;
     columns: ColumnSettings<T>[];
     table: TableElement<T>;
@@ -55,4 +56,5 @@ declare global {
         }
     }
 }
+export declare const rowGetValue: (context: Record<string, any>, key: string) => any;
 export {};

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

@@ -11,10 +11,11 @@ interface HeaderProps<T> {
 export declare class TableHeaderElement<T> extends LitElement implements HeaderProps<T> {
     columns: ColumnSettings<T>[];
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    _handleSortChange: (column: ColumnSettings<T>) => void;
     protected render(): unknown;
 }
 interface TableHeaderEvents {
-    'sort': (event: CustomEvent<ColumnSettings<any>>) => void;
+    'sortChange': (event: CustomEvent<ColumnSettings<any>>) => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -0,0 +1,5 @@
+import { ColumnSettings } from './table';
+/**
+ * Creates a chain of sort functions so you can perform multi column sorting.
+ */
+export declare const createSortChain: <T>(sorts: ColumnSettings<T>[]) => ((a: T, b: T) => number | undefined)[];

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

@@ -1,26 +1,57 @@
-import { LitElement, TemplateResult } from 'lit';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-import { PaginationChangeProps, PaginationProps } from '../pagination';
+import { PaginationProps } from '../pagination';
 import { FilterEvent } from './cell';
 export declare const TableElementTag = "spectric-table";
 export type { TableProps, TableEvents };
 export type DomRenderable = HTMLElement | TemplateResult | string | number | null;
+export declare enum TableSelectOptions {
+    multi = "multi",
+    single = "single",
+    none = "none"
+}
+export declare enum TableSortOption {
+    multi = "multi",
+    single = "single"
+}
+export type TableSortOptionTypes = `${TableSortOption}`;
+export declare enum TableSortDirection {
+    ascending = "ascending",
+    decending = "decending",
+    none = "none"
+}
+export type TableSortDirectionTypes = `${TableSortDirection}`;
 export type ColumnSettings<T> = {
     width?: number;
     whiteSpace?: "nowrap";
     hidden?: boolean;
     sortable?: boolean;
+    sortDirection?: TableSortDirectionTypes;
     filterable?: boolean;
     title?: DomRenderable;
+    /**
+     * Key to used for getting data from an object for a cell
+     */
     key?: string;
-    render?: (row: T, table: TableElement<T>) => DomRenderable;
+    /**
+     * Render function to render a table cell for displaying custom html
+     */
+    render?: (row: T, index: number, table: TableElement<T>) => DomRenderable;
+    /**
+     * Custom comparator function for sorting
+     */
+    compareFn?: ((a: T, b: T) => number) | undefined;
 };
-type TableSelectOptions = "multi" | "single";
-interface TableProps<T> {
+export type TableSelectOptionsTypes = `${TableSelectOptions}`;
+export interface TableDataOptions<T> {
     pagination?: PaginationProps;
     columns: ColumnSettings<T>[];
+}
+interface TableProps<T> extends TableDataOptions<T> {
     data: T[];
-    select?: TableSelectOptions;
+    select: TableSelectOptionsTypes;
+    sort?: TableSortOptionTypes;
+    rowHeight?: number;
 }
 type DomEvent<T> = Event & {
     target: T;
@@ -32,21 +63,27 @@ type DomEvent<T> = Event & {
  */
 export declare class TableElement<T> extends LitElement implements TableProps<T> {
     data: T[];
-    pagination?: PaginationProps | undefined;
+    pagination?: PaginationProps;
     columns: ColumnSettings<T>[];
-    select?: TableSelectOptions;
+    select: TableSelectOptionsTypes;
+    sort: TableSortOptionTypes;
+    /**
+     * Needed for virtualization
+     */
+    rowHeight: number;
+    static getDefaultDataSorterAndPaginatior<T>(data: T[]): (props: TableDataOptions<T>) => T[];
     private _handlePaginationChange;
+    private _handleSortChange;
     private _emitChange;
     private __DO_NOT_USE_filter;
-    selected: T[];
+    private selected;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     _handleSelectAllChange: (e: DomEvent<HTMLInputElement>) => void;
+    protected update(changedProperties: PropertyValues): void;
     protected render(): unknown;
 }
 interface TableEvents {
-    'change': (event: CustomEvent<{
-        pagination: PaginationChangeProps;
-    }>) => void;
+    'change': (event: CustomEvent<TableDataOptions<any>>) => void;
     'filter': (event: CustomEvent<FilterEvent<any>>) => void;
 }
 declare global {
@@ -56,7 +93,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TableElement}
              */
             [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
         }
@@ -65,7 +102,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TableElement}
                  */
                 [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
             }

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

@@ -0,0 +1,49 @@
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ColumnSettings, TableElement } from './table';
+import { DisposableElement } from '../../classes/DisposibleElement';
+export declare const TableBodyElementTag = "spectric-table-virtual-body";
+interface BodyProps<T> {
+    columns: ColumnSettings<T>[];
+    data: T[];
+    rowHeight: number;
+}
+/**
+ * Table Body Element
+ */
+export declare class TableVirtualBodyElement<T> extends DisposableElement implements BodyProps<T> {
+    data: T[];
+    columns: ColumnSettings<T>[];
+    rowHeight: number;
+    startIndex: number;
+    table: TableElement<T>;
+    constructor();
+    protected firstUpdated(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): unknown;
+}
+interface TableBodyEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableBodyElementTag]: HTMLElementTagWithEvents<TableVirtualBodyElement<any>, TableBodyEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableVirtualBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+            }
+        }
+    }
+}
+export {};

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

@@ -1,6 +1,7 @@
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-import { CSSResultGroup, LitElement } from 'lit-element';
+import { CSSResultGroup } from 'lit-element';
 import { DomRenderable } from '../table';
+import { DisposableElement } from '../../classes/DisposibleElement';
 export declare const TooltipElementTag = "spectric-tooltip";
 export type { TooltipProps, TooltipEvents };
 export declare enum TooltipPostions {
@@ -15,11 +16,11 @@ interface TooltipProps {
     /**
      * How long you need to hover before the tooltip displays
      */
-    delay: number;
+    delay?: number;
     /**
      * How long the fade in animation should run
      */
-    animationDuration: number;
+    animationDuration?: number;
     /**
      * Tooltip contents
      */
@@ -27,24 +28,24 @@ interface TooltipProps {
     /**
      * Where to anchor the tooltip
      */
-    position: TooltipPostionsTypes;
+    position?: TooltipPostionsTypes;
     /**
-     * Sets a max width for the contents (default:300) you can disable this by setting to 0 or -1
+     * Sets a max width for the contents you can disable this by setting to 0 or -1
      */
     maxWidth?: number;
     /**
-     * Container the tool tip will be attached to. (default:document.body)
+     * Container the tool tip will be attached to.
      */
     portalTarget?: HTMLElement;
     /**
-     * The element that triggers the tooltip. (default:node.parentElement) This is used for special cases like in the shadow dom if you want to target a host element instead of the immediate parent element
+     * 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
      */
     triggerTarget?: HTMLElement;
 }
 /**
  * Spectric tooltip will add a tooltip to any container
  */
-export declare class TooltipElement extends LitElement implements TooltipProps {
+export declare class TooltipElement extends DisposableElement implements TooltipProps {
     delay: number;
     animationDuration: number;
     text: DomRenderable;
@@ -56,9 +57,13 @@ export declare class TooltipElement extends LitElement implements TooltipProps {
     portalTarget: HTMLElement;
     private timer?;
     private open;
-    mouseframe?: number;
-    triggerTarget?: HTMLElement;
+    private mouseframe?;
+    /**
+     * @default parentElement
+     */
+    triggerTarget: HTMLElement;
     private get target();
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _getMousePosition;
@@ -77,7 +82,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             /**
-             * @see {@link DialogElement}
+             * @see {@link TooltipElement}
              */
             [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
         }
@@ -86,7 +91,7 @@ declare global {
         namespace JSX {
             interface IntrinsicElements {
                 /**
-                 * @see {@link DialogElement}
+                 * @see {@link TooltipElement}
                  */
                 [TooltipElementTag]: ReactElementWithPropsAndEvents<TooltipElement, TooltipProps, TooltipEvents>;
             }