@spectric/ui 0.0.7 → 0.0.8

package/dist/components/Button.d.ts

@@ -3,9 +3,12 @@ import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './type
 export declare enum ButtonSizes {
     large = "large",
     medium = "medium",
-    small = "small"
+    small = "small",
+    xsmall = "xsmall",
+    xxsmall = "xxsmall",
+    tiny = "tiny"
 }
-type ButtonSizesTypes = `${ButtonSizes}`;
+export type ButtonSizesTypes = `${ButtonSizes}`;
 export declare enum ButtonVariants {
     primary = "primary",
     secondary = "secondary",
@@ -22,15 +25,17 @@ export interface ButtonProps {
     label?: string;
     disabled: boolean;
     danger?: boolean;
+    icon?: boolean;
 }
 export declare class SpectricButton extends LitElement implements ButtonProps {
     static styles?: CSSResultGroup | undefined;
     variant: 'primary' | 'secondary' | 'text';
     disabled: boolean;
     backgroundColor?: string | undefined;
-    size: 'small' | 'medium' | 'large';
+    size: ButtonSizesTypes;
     label?: string;
     danger: boolean;
+    icon: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _onClick;

package/dist/components/index.d.ts

@@ -8,3 +8,5 @@ export * from './Panel';
 export * from './ThemeProvider';
 export * from './dialog';
 export * from './splitview';
+export * from './pagination';
+export * from './table';

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

@@ -0,0 +1 @@
+export * from './pagination';

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

@@ -0,0 +1,60 @@
+import { LitElement, PropertyValues } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ButtonSizesTypes } from '../Button';
+export declare const PaginationElementTag = "spectric-pagination";
+export type { PaginationProps, PaginationChangeProps, PaginationEvents };
+interface PaginationChangeProps {
+    page: number;
+    pageSize: number;
+}
+interface PaginationProps extends PaginationChangeProps {
+    size: ButtonSizesTypes;
+    totalItems?: number;
+    pageSizeOptions?: number[];
+}
+/**
+ * Pagination Element
+ */
+export declare class PaginationElement extends LitElement implements PaginationProps {
+    page: number;
+    pageSize: number;
+    totalItems?: number;
+    pageSizeOptions: number[];
+    /**
+     * Size of the pagination buttons
+     */
+    size: ButtonSizesTypes;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected updated(_changedProperties: PropertyValues): void;
+    private _handlePageUp;
+    private _handlePageDown;
+    private _handleSizeChange;
+    private _emitChange;
+    protected render(): unknown;
+}
+interface PaginationEvents {
+    'change': (event: CustomEvent<PaginationChangeProps>) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [PaginationElementTag]: HTMLElementTagWithEvents<PaginationElement, PaginationEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ColumnSettings, TableElement } from './table';
+export declare const TableBodyElementTag = "spectric-table-body";
+interface BodyProps<T> {
+    columns: ColumnSettings<T>[];
+    data: T[];
+}
+/**
+ * Pagination Element
+ */
+export declare class TableBodyElement<T> extends LitElement implements BodyProps<T> {
+    data: T[];
+    columns: ColumnSettings<T>[];
+    table: TableElement<T>;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): unknown;
+}
+interface TableBodyEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableBodyElementTag]: HTMLElementTagWithEvents<TableBodyElement<any>, TableBodyEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableBodyElementTag]: ReactElementWithPropsAndEvents<TableBodyElement<any>, BodyProps<any>, TableBodyEvents>;
+            }
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,53 @@
+import { LitElement } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ColumnSettings, TableElement } from './table';
+export declare const TableCellElementTag = "spectric-table-cell";
+interface CellProps<T> {
+    column: ColumnSettings<T>;
+    row: T;
+}
+export type FilterEvent<T> = {
+    value?: T;
+    include: boolean;
+    column: ColumnSettings<T>;
+    row: T;
+};
+/**
+ * Pagination Element
+ */
+export declare class TableCellElement<T> extends LitElement implements CellProps<T> {
+    row: T;
+    column: ColumnSettings<T>;
+    table: TableElement<T>;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    _handleFilterOut: () => void;
+    _handleFilterFor: () => void;
+    protected render(): unknown;
+}
+interface TableBodyEvents {
+    'filter': (event: CustomEvent<ColumnSettings<any>>) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableCellElementTag]: HTMLElementTagWithEvents<TableCellElement<any>, TableBodyEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>;
+            }
+        }
+    }
+}
+export {};

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

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { ColumnSettings } from './table';
+export declare const TableHeaderElementTag = "spectric-table-header";
+interface HeaderProps<T> {
+    columns: ColumnSettings<T>[];
+}
+/**
+ * Pagination Element
+ */
+export declare class TableHeaderElement<T> extends LitElement implements HeaderProps<T> {
+    columns: ColumnSettings<T>[];
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): unknown;
+}
+interface TableHeaderEvents {
+    'sort': (event: CustomEvent<ColumnSettings<any>>) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableHeaderElementTag]: HTMLElementTagWithEvents<TableHeaderElement<any>, TableHeaderEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableHeaderElementTag]: ReactElementWithPropsAndEvents<TableHeaderElement<any>, HeaderProps<any>, TableHeaderEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableHeaderElementTag]: ReactElementWithPropsAndEvents<TableHeaderElement<any>, HeaderProps<any>, TableHeaderEvents>;
+            }
+        }
+    }
+}
+export {};

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

@@ -0,0 +1 @@
+export * from './table';

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

@@ -0,0 +1,90 @@
+import { LitElement, TemplateResult } from 'lit';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { PaginationChangeProps, 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 type ColumnSettings<T> = {
+    hidden?: boolean;
+    sortable?: boolean;
+    filterable?: boolean;
+    title?: string;
+    key?: string;
+    render?: (row: T, table: TableElement<T>) => DomRenderable;
+};
+interface TableProps<T> {
+    pagination?: PaginationProps;
+    columns: ColumnSettings<T>[];
+    data: T[];
+}
+/**
+ * Table Element
+ *
+ * The table element is a bit more complex and the column settings and data can only be set through the properties
+ *
+ *
+ * React
+ *
+ * ``` tsx
+ * <spectric-table data={[{col1:1}]} columns={[{key:"col1",}]} ></spectric-table>
+ * ```
+ *
+ * Javascript
+ *
+ * ``` js
+ * table = document.createElement("spectric-table")
+ * table.data = [{col1:1}]
+ * table.columns = [{key:"col1",}]
+ * ```
+ *
+ * HTML
+ *
+ * ``` html
+ * <spectric-table id="table"></spectric-table>
+ * <script>
+ * document.querySelector("#table")
+ * table.data = [{col1:1}]
+ * table.columns = [{key:"col1",}]
+ * </script>
+ * ```
+ */
+export declare class TableElement<T> extends LitElement implements TableProps<T> {
+    data: T[];
+    pagination?: PaginationProps | undefined;
+    columns: ColumnSettings<T>[];
+    private _handlePaginationChange;
+    private _emitChange;
+    private __DO_NOT_USE_filter;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected render(): unknown;
+}
+interface TableEvents {
+    'change': (event: CustomEvent<{
+        pagination: PaginationChangeProps;
+    }>) => void;
+    'filter': (event: CustomEvent<FilterEvent<any>>) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [TableElementTag]: HTMLElementTagWithEvents<TableElement<any>, TableEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link DialogElement}
+             */
+            [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link DialogElement}
+                 */
+                [TableElementTag]: ReactElementWithPropsAndEvents<TableElement<any>, TableProps<any>, TableEvents>;
+            }
+        }
+    }
+}

package/dist/custom-elements.json

@@ -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` {`\"small\" | \"medium\" | \"large\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - \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` {`\"small\" | \"medium\" | \"large\"`} - How large should the button be?\n\n  * `label` {`string | undefined`} - \n\n  * `disabled` {`boolean`} - \n\n  * `danger` {`boolean`} - ",
+      "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\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`} - ",
       "attributes": [
         {
           "name": "variant",
@@ -103,16 +103,25 @@
         },
         {
           "name": "size",
-          "description": "`size` {`\"small\" | \"medium\" | \"large\"`} - How large should the button be?\n\nProperty: size\n\nDefault: large",
+          "description": "`size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - How large should the button be?\n\nProperty: size\n\nDefault: small",
           "values": [
             {
-              "name": "small"
+              "name": "large"
             },
             {
               "name": "medium"
             },
             {
-              "name": "large"
+              "name": "small"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "tiny"
             }
           ]
         },
@@ -131,6 +140,11 @@
           "description": "`danger` {`boolean`} - \n\nProperty: danger\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "icon",
+          "description": "`icon` {`boolean`} - \n\nProperty: icon\n\nDefault: false",
+          "valueSet": "v"
+        },
         {
           "name": "onclick",
           "description": "`click` {`CustomEvent<MouseEvent>`} - "
@@ -1814,6 +1828,57 @@
         }
       ]
     },
+    {
+      "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`} - ",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "`size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\"`} - Size of the pagination buttons\n\nProperty: size\n\nDefault: small",
+          "values": [
+            {
+              "name": "large"
+            },
+            {
+              "name": "medium"
+            },
+            {
+              "name": "small"
+            },
+            {
+              "name": "xsmall"
+            },
+            {
+              "name": "xxsmall"
+            },
+            {
+              "name": "tiny"
+            }
+          ]
+        },
+        {
+          "name": "totalItems",
+          "description": "`totalItems` {`number | undefined`} - \n\nProperty: totalItems",
+          "values": []
+        },
+        {
+          "name": "pageSizeOptions",
+          "description": "`pageSizeOptions` {`number[]`} - \n\nProperty: pageSizeOptions\n\nDefault: 10,20,50,100,1000"
+        },
+        {
+          "name": "page",
+          "description": "`page` {`number`} - \n\nProperty: page\n\nDefault: 1"
+        },
+        {
+          "name": "pageSize",
+          "description": "`pageSize` {`number`} - \n\nProperty: pageSize\n\nDefault: 10"
+        },
+        {
+          "name": "onchange",
+          "description": "`change` {`CustomEvent<PaginationChangeProps>`} - "
+        }
+      ]
+    },
     {
       "name": "spectric-query",
       "description": "The Query component will take Opensearch Dashboard Query language and transform it into various outputs\n\nEvents:\n\n  * `change` {`CustomEvent<any>`} - \n\nAttributes:\n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `placeholder` {`string`} - Input placeholder\n\nProperties:\n\n  * `_value` {`string`} - The internal value.\n\n  * `suggestion` {`Suggestion | undefined`} - \n\n  * `completions` {`Completion[]`} - \n\n  * `completionIndex` {`number`} - \n\n  * `_autocomplete` {`HTMLDivElement | undefined`} - \n\n  * `_asyncAutocomplete` {`Promise<HTMLDivElement>`} - \n\n  * `_input` {`SpectricInput`} - The underlying input element\n\n  * `_parseQuery` - \n\n  * `_selectCompletion` - \n\n  * `_handleArrows` - \n\n  * `uuid` {`string`} - \n\n  * `outputLanguage` {`\"toMongo\" | \"toCql\" | \"toDSL\" | \"AST\"`} - The output of the query in a specific format\n\n  * `value` {`string`} - The value of the input.\n\n  * `fields` {`FieldTypes[]`} - Fields that are used for the auto complete\n\n  * `getValuesForField` - Callback that will provide values for specific fields\n\n  * `placeholder` {`string`} - Input placeholder",
@@ -1899,6 +1964,40 @@
         }
       ]
     },
+    {
+      "name": "spectric-table-body",
+      "description": "Pagination Element\n\nProperties:\n\n  * `table` {`TableElement<T>`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - ",
+      "attributes": []
+    },
+    {
+      "name": "spectric-table-cell",
+      "description": "Pagination Element\n\nEvents:\n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\nProperties:\n\n  * `table` {`TableElement<T>`} - \n\n  * `_handleFilterOut` - \n\n  * `_handleFilterFor` - \n\n  * `column` {`ColumnSettings<T>`} - \n\n  * `row` {`T`} - ",
+      "attributes": [
+        {
+          "name": "onfilter",
+          "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
+        }
+      ]
+    },
+    {
+      "name": "spectric-table-header",
+      "description": "Pagination Element\n\nProperties:\n\n  * `columns` {`ColumnSettings<T>[]`} - ",
+      "attributes": []
+    },
+    {
+      "name": "spectric-table",
+      "description": "Table Element\n\nThe table element is a bit more complex and the column settings and data can only be set through the properties\n\n\nReact\n\n``` tsx\n<spectric-table data={[{col1:1}]} columns={[{key:\"col1\",}]} ></spectric-table>\n```\n\nJavascript\n\n``` js\ntable = document.createElement(\"spectric-table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n```\n\nHTML \n\n``` html\n<spectric-table id=\"table\"></spectric-table>\n<script>\ndocument.querySelector(\"#table\")\ntable.data = [{col1:1}]\ntable.columns = [{key:\"col1\",}]\n</script>\n```\n\nEvents:\n\n  * `change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - \n\n  * `filter` {`CustomEvent<FilterEvent<T>>`} - \n\nProperties:\n\n  * `_handlePaginationChange` - \n\n  * `_emitChange` - \n\n  * `__DO_NOT_USE_filter` - \n\n  * `pagination` {`PaginationProps | undefined`} - \n\n  * `columns` {`ColumnSettings<T>[]`} - \n\n  * `data` {`T[]`} - ",
+      "attributes": [
+        {
+          "name": "onchange",
+          "description": "`change` {`CustomEvent<{ pagination?: PaginationChangeProps | undefined; }>`} - "
+        },
+        {
+          "name": "onfilter",
+          "description": "`filter` {`CustomEvent<FilterEvent<T>>`} - "
+        }
+      ]
+    },
     {
       "name": "spectric-storybook-example-content",
       "description": "Attributes:\n\n  * `frameWidth` {`number`} - \n\nProperties:\n\n  * `frameWidth` {`number`} - \n\n  * `dialogOpen` {`boolean`} - ",