@spectric/ui 0.0.18 → 0.0.20

package/dist/components/Button.d.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, PropertyValues } from 'lit';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from './types';
 import { DomRenderable } from './table';
 import { TooltipPostionsTypes } from './tooltip';
@@ -45,6 +45,7 @@ export declare class SpectricButton extends DisposableElement implements ButtonP
     tooltipPosition?: TooltipPostionsTypes;
     constructor();
     private _onClick;
+    protected updated(_changedProperties: PropertyValues): void;
     protected render(): unknown;
 }
 export interface ButtonEventMap {

package/dist/components/Panel.d.ts

@@ -1,14 +1,17 @@
-import { CSSResultGroup, LitElement } from 'lit';
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { DisposableElement } from '../classes/DisposibleElement.ts';
 /**
  * Spectric Panel visually seperates content areas and automatically adjusts the component colors that are nested inside.
  *  */
-export declare class SpectricPanel extends LitElement {
+export declare class SpectricPanel extends DisposableElement {
     static styles?: CSSResultGroup | undefined;
     /**
      * Specify the layer level and override any existing levels based on hierarchy
      */
     level: number;
     layers?: NodeListOf<SpectricPanel>;
-    updated(): void;
+    constructor();
+    connectedCallback(): void;
+    update(changed: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/components/calendar/calendar.d.ts

@@ -0,0 +1,58 @@
+import { PropertyValues } from 'lit';
+import { DisposableElement } from '../../classes';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+export interface SpectricCalendarProps {
+    /**
+     * Sets the starting day for the calendar (default:Today)
+     */
+    currentDate?: Date | string | number;
+    /**
+     * Will display a button with a popup
+     */
+    popup?: boolean;
+    disabled?: boolean;
+}
+export declare class SpectricCalendar extends DisposableElement {
+    calendarElement: Promise<HTMLDivElement>;
+    constructor();
+    currentDate?: Date | string | number;
+    private date;
+    popup: boolean;
+    disabled: boolean;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    private getMonthDays;
+    private changeMonth;
+    private changeYear;
+    private handleMouseMove;
+    private resetMouseMove;
+    private selectDay;
+    protected update(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+interface CalendarEvents {
+    select: (event: CustomEvent<Date>) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "spectric-calendar": HTMLElementTagWithEvents<SpectricCalendar, CalendarEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link SpectricCalendar}
+             */
+            "spectric-calendar": ReactElementWithPropsAndEvents<SpectricCalendar, SpectricCalendarProps, CalendarEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link SpectricCalendar}
+                 */
+                "spectric-calendar": ReactElementWithPropsAndEvents<SpectricCalendar, SpectricCalendarProps, CalendarEvents>;
+            }
+        }
+    }
+}
+export {};

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

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

package/dist/components/color_picker/ColorPicker.d.ts

@@ -19,15 +19,16 @@ export declare class SpectricColorPicker extends LitElement implements ColorPick
     /**is mouse down on saturation/light canvas? */
     private sldown;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
+    constructor();
     protected update(changedProperties: PropertyValues): void;
     private renderHueSaturationGrid;
-    _handleSaturationLightnessClick: (e: PointerEvent) => void;
-    _handleHueChange: (e: DomEvent<SpectricInput>) => void;
+    _handleSaturationLightnessClick(e: PointerEvent): void;
+    _handleHueChange(e: DomEvent<SpectricInput>): void;
     private updateValue;
-    _handleAlphaChange: (e: DomEvent<SpectricInput>) => void;
-    _handleApply: () => void;
-    _cancel: () => void;
-    _openPopover: () => Promise<void>;
+    _handleAlphaChange(e: DomEvent<SpectricInput>): void;
+    _handleApply(): void;
+    _cancel(): void;
+    _openPopover(): Promise<void>;
     protected getPopover(): TemplateResult;
     protected render(): unknown;
 }

package/dist/components/index.d.ts

@@ -13,3 +13,4 @@ export * from './table';
 export * from './tooltip';
 export * from './types';
 export * from './color_picker';
+export * from './calendar';

package/dist/components/input.d.ts

@@ -1,12 +1,15 @@
 import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import { ReactElementWithPropsAndEvents } from './types';
 import { ButtonSizesTypes } from './Button';
+import { DomEvent } from './table';
+import { SpectricColorPicker } from './color_picker/ColorPicker';
 export declare enum InputVariants {
     Text = "text",
     TextArea = "text-area",
     number = "number",
     color = "color",
     date = "date",//replace default eventually with custom
+    datePopup = "popup-date",
     datetime = "datetime-local",//replace default eventually with custom
     email = "email",
     file = "file",//display drop area
@@ -26,8 +29,8 @@ export interface InputProps {
     disabled?: boolean;
     readonly?: boolean;
     /**
-   * The helper text.
-   */
+     * The helper text.
+     */
     helperText?: string;
     /**
      * Specify if the currently value is invalid.
@@ -42,16 +45,16 @@ export interface InputProps {
      */
     maxCount?: number;
     /**
-  * Boolean property to set the required status
-  */
+     * Boolean property to set the required status
+     */
     required?: boolean;
     /**
-  * Shows a button to display the password
-  */
+     * Shows a button to display the password
+     */
     showPasswordVisibilityToggle?: boolean;
     /**
-   * Name for the input used for form data events //TODO make sure this works
-   */
+     * Name for the input used for form data events //TODO make sure this works
+     */
     name?: string;
     /**
      * Pattern to validate the input against for HTML validity checking
@@ -60,11 +63,12 @@ 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;
     size?: ButtonSizesTypes;
+    files: FileList | null;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     placeholder: string;
     readonly: boolean;
@@ -72,8 +76,8 @@ export declare class SpectricInput extends LitElement implements InputProps {
     disabled: boolean;
     label: string;
     /**
-    * "Hide password" tooltip text on password visibility toggle
-    */
+     * "Hide password" tooltip text on password visibility toggle
+     */
     hidePasswordLabel: string;
     /**
      * "Show password" tooltip text on password visibility toggle
@@ -109,14 +113,14 @@ export declare class SpectricInput extends LitElement implements InputProps {
     pattern: string;
     maxCount: number;
     /**
-  * The internal value.
-  */
+     * The internal value.
+     */
     protected _value: string | boolean | number;
     private _showPassword;
     /**
      * The sets the autocomplete for the input.
      */
-    autocomplete: HTMLInputElement['autocomplete'];
+    autocomplete: HTMLInputElement["autocomplete"];
     get selectionStart(): number | null;
     /**
      * The value of the input.
@@ -127,16 +131,16 @@ export declare class SpectricInput extends LitElement implements InputProps {
     focus(options?: FocusOptions): void;
     setSelectionRange(start: number, end: number, direction?: "forward" | "backward" | "none"): void;
     /**
-   * Handles `oninput` event on the `<input>`.
-   */
-    protected _handleInput: ({ target }: Event) => void;
+     * Handles `oninput` event on the `<input>`.
+     */
+    protected _handleInput: ({ target }: DomEvent<HTMLInputElement>) => void;
     /**
-    * The underlying input element
-    */
+     * The underlying input element
+     */
     protected _input?: HTMLInputElement;
     private handleTogglePasswordVisibility;
     protected updated(changedProperties: PropertyValues): void;
-    _handleChange(e: Event): void;
+    _handleChange(e: DomEvent<HTMLInputElement | SpectricColorPicker>): void;
     protected render(): unknown;
 }
 declare global {

package/dist/components/query_bar/QueryBar.d.ts

@@ -2,6 +2,7 @@ import { LitElement, PropertyValues } from 'lit';
 import { SpectricInput } from '../input';
 import { JsonObject } from './types';
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
+import { PopoverElement } from '../tooltip/popover';
 import * as kuery from "./querylanguage/kuery";
 export type FieldTypes = {
     name: string;
@@ -72,7 +73,7 @@ export declare class SpectricQuery extends LitElement implements IQueryProps {
     private completions;
     private completionIndex;
     fields: FieldTypes[];
-    _autocomplete?: HTMLDivElement;
+    _autocomplete?: PopoverElement;
     _asyncAutocomplete: Promise<HTMLDivElement>;
     /**
     * The underlying input element

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

@@ -22,6 +22,7 @@ export declare enum TableSortDirection {
 }
 export type TableSortDirectionTypes = `${TableSortDirection}`;
 export type ColumnSettings<T> = {
+    [TABLE_CREATED_SELECTION_COLUMN]?: boolean;
     width?: number;
     /**
      * Enabled/disables resizing by dragging column header Default true
@@ -61,6 +62,8 @@ interface TableProps<T> extends TableDataOptions<T> {
 export type DomEvent<T> = Event & {
     target: T;
 };
+export declare const TD_BorderAndPadding = 4;
+declare const TABLE_CREATED_SELECTION_COLUMN: unique symbol;
 /**
  * React example
  * <iframe  width="100%" height="400px" src="https://stackblitz.com/edit/react-ts-2ue7azag?ctl=1&embed=1&file=App.tsx&hideExplorer=1&hideNavigation=1"/>

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

@@ -1,8 +1,9 @@
 import { CSSResultGroup } from 'lit-element';
 import { DomRenderable } from '../table';
 import { DisposableElement } from '../../classes/DisposibleElement';
+import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 export declare const PopoverElementTag = "spectric-popover";
-export type { TooltipProps, TooltipEvents };
+export type { TooltipProps, PopOverEvents };
 export declare enum TooltipPostions {
     top = "top",
     bottom = "bottom",
@@ -40,6 +41,8 @@ interface TooltipProps {
      * 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;
+    mouseOffsetX?: number;
+    mouseOffsetY?: number;
 }
 /**
  * Spectric tooltip will add a tooltip to any container
@@ -50,6 +53,8 @@ export declare class PopoverElement extends DisposableElement implements Tooltip
     text: DomRenderable;
     position: TooltipPostionsTypes;
     maxWidth?: number;
+    mouseOffsetX: number;
+    mouseOffsetY: number;
     protected portalElement: HTMLDivElement;
     protected mouseLocation?: {
         left: number;
@@ -60,12 +65,14 @@ export declare class PopoverElement extends DisposableElement implements Tooltip
     protected timer?: number;
     protected open: boolean;
     protected mouseframe?: number;
+    isOpen(): boolean;
     /**
      * @default parentElement
      */
     triggerTarget: HTMLElement;
     protected get target(): HTMLElement;
     constructor();
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected _getMousePosition: (ev: MouseEvent) => void;
@@ -81,5 +88,28 @@ export declare class PopoverElement extends DisposableElement implements Tooltip
     protected positionTooltip: () => void;
     protected render(): import('lit-html').TemplateResult<1>;
 }
-interface TooltipEvents {
+interface PopOverEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [PopoverElementTag]: HTMLElementTagWithEvents<PopoverElement, PopOverEvents>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            /**
+             * @see {@link TooltipElement}
+             */
+            [PopoverElementTag]: ReactElementWithPropsAndEvents<PopoverElement, TooltipProps, PopOverEvents>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                /**
+                 * @see {@link TooltipElement}
+                 */
+                [PopoverElementTag]: ReactElementWithPropsAndEvents<PopoverElement, TooltipProps, PopOverEvents>;
+            }
+        }
+    }
 }

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

@@ -1,7 +1,7 @@
 import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
 import { CSSResultGroup } from 'lit-element';
 import { DomRenderable } from '../table';
-import { PopoverElement } from './popover';
+import { PopoverElement, TooltipProps } from './popover';
 export declare const TooltipElementTag = "spectric-tooltip";
 export type { TooltipProps, TooltipEvents };
 export declare enum TooltipPostions {
@@ -12,36 +12,6 @@ export declare enum TooltipPostions {
     mouse = "mouse"
 }
 export type TooltipPostionsTypes = `${TooltipPostions}`;
-interface TooltipProps {
-    /**
-     * How long you need to hover before the tooltip displays
-     */
-    delay?: number;
-    /**
-     * How long the fade in animation should run
-     */
-    animationDuration?: number;
-    /**
-     * Tooltip contents
-     */
-    text: DomRenderable;
-    /**
-     * Where to anchor the tooltip
-     */
-    position?: TooltipPostionsTypes;
-    /**
-     * 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.
-     */
-    portalTarget?: 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
-     */
-    triggerTarget?: HTMLElement;
-}
 /**
  * Spectric tooltip will add a tooltip to any container
  */
@@ -70,7 +40,6 @@ export declare class TooltipElement extends PopoverElement implements TooltipPro
      * Public method to trigger showing the tooltip programatically
      */
     showToolTip(): Promise<void>;
-    protected render(): import('lit-html').TemplateResult<1>;
 }
 interface TooltipEvents {
 }

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` {`\"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`} - ",
+      "description": "Attributes:\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",
@@ -170,10 +170,6 @@
               "name": "mouse"
             }
           ]
-        },
-        {
-          "name": "onclick",
-          "description": "`click` {`CustomEvent<MouseEvent>`} - "
         }
       ]
     },
@@ -348,15 +344,15 @@
     },
     {
       "name": "spectric-panel",
-      "description": "Spectric Panel visually seperates content areas and automatically adjusts the component colors that are nested inside.\n\nEvents:\n\n  * `use-layer` {`CustomEvent<{ layer: this; level: number; }>`} - \n\nAttributes:\n\n  * `level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\n  * `layers` {`NodeListOf<SpectricPanel> | undefined`} - ",
+      "description": "Spectric Panel visually seperates content areas and automatically adjusts the component colors that are nested inside.\n\nEvents:\n\n  * `layer-add` {`CustomEvent<{ layer: this; level: number; }>`} - \n\nAttributes:\n\n  * `level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\nProperties:\n\n  * `styles` {`CSSResultGroup | undefined`} - \n\n  * `level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\n  * `layers` {`NodeListOf<SpectricPanel> | 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": "level",
           "description": "`level` {`number`} - Specify the layer level and override any existing levels based on hierarchy\n\nProperty: level\n\nDefault: 0"
         },
         {
-          "name": "onuse-layer",
-          "description": "`use-layer` {`CustomEvent<{ layer: this; level: number; }>`} - "
+          "name": "onlayer-add",
+          "description": "`layer-add` {`CustomEvent<{ layer: this; level: number; }>`} - "
         }
       ]
     },
@@ -391,9 +387,29 @@
         }
       ]
     },
+    {
+      "name": "spectric-calendar",
+      "description": "Events:\n\n  * `select` {`CustomEvent<Date>`} - \n\nAttributes:\n\n  * `popup` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `calendarElement` {`Promise<HTMLDivElement>`} - \n\n  * `currentDate` {`string | number | Date | undefined`} - \n\n  * `date` {`Date`} - \n\n  * `popup` {`boolean`} - \n\n  * `disabled` {`boolean`} - \n\n  * `handleMouseMove` - \n\n  * `resetMouseMove` - \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": "popup",
+          "description": "`popup` {`boolean`} - \n\nProperty: popup\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "onselect",
+          "description": "`select` {`CustomEvent<Date>`} - "
+        }
+      ]
+    },
     {
       "name": "spectric-colorpicker",
-      "description": "Attributes:\n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - \n\nProperties:\n\n  * `hue` {`number`} - \n\n  * `alpha` {`number`} - \n\n  * `saturation` {`number`} - \n\n  * `lightness` {`number`} - \n\n  * `canvas` {`Ref<HTMLCanvasElement>`} - \n\n  * `original` {`string | undefined`} - \n\n  * `sldown` {`boolean`} - is mouse down on saturation/light canvas?\n\n  * `_handleSaturationLightnessClick` - \n\n  * `_handleHueChange` - \n\n  * `_handleAlphaChange` - \n\n  * `_handleApply` - \n\n  * `_cancel` - \n\n  * `_openPopover` - \n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - ",
+      "description": "Events:\n\n  * `change` {`Event`} - \n\n  * `cancel` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - \n\nProperties:\n\n  * `hue` {`number`} - \n\n  * `alpha` {`number`} - \n\n  * `saturation` {`number`} - \n\n  * `lightness` {`number`} - \n\n  * `canvas` {`Ref<HTMLCanvasElement>`} - \n\n  * `original` {`string | undefined`} - \n\n  * `sldown` {`boolean`} - is mouse down on saturation/light canvas?\n\n  * `_handleAlphaChange` - \n\n  * `_handleHueChange` - \n\n  * `_handleApply` - \n\n  * `_cancel` - \n\n  * `_handleSaturationLightnessClick` - \n\n  * `value` {`string`} - Color in hex\n\n  * `showAlpha` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -403,6 +419,14 @@
           "name": "showAlpha",
           "description": "`showAlpha` {`boolean`} - \n\nProperty: showAlpha\n\nDefault: true",
           "valueSet": "v"
+        },
+        {
+          "name": "onchange",
+          "description": "`change` {`Event`} - "
+        },
+        {
+          "name": "oncancel",
+          "description": "`cancel` {`Event`} - "
         }
       ]
     },
@@ -447,7 +471,7 @@
     },
     {
       "name": "spectric-input",
-      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\" | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement | undefined`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.",
+      "description": "Events:\n\n  * `change` {`Event`} - \n\nAttributes:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.\n\nProperties:\n\n  * `checked` {`boolean | undefined`} - \n\n  * `size` {`\"large\" | \"medium\" | \"small\" | \"xsmall\" | \"xxsmall\" | \"tiny\" | undefined`} - \n\n  * `files` {`FileList | null`} - \n\n  * `hidePasswordLabel` {`string`} - \"Hide password\" tooltip text on password visibility toggle\n\n  * `showPasswordLabel` {`string`} - \"Show password\" tooltip text on password visibility toggle\n\n  * `_value` {`string | number | boolean`} - The internal value.\n\n  * `_showPassword` {`boolean`} - \n\n  * `selectionStart` {`number | null`} - \n\n  * `value` {`string | number | boolean`} - The value of the input.\n\n  * `_handleInput` - Handles `oninput` event on the `<input>`.\n\n  * `_input` {`HTMLInputElement | undefined`} - The underlying input element\n\n  * `handleTogglePasswordVisibility` - \n\n  * `variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\n  * `label` {`string`} - Label to display above the input\n\n  * `placeholder` {`string`} - placeholder text to display\n\n  * `disabled` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `helperText` {`string`} - The helper text.\n\n  * `invalid` {`boolean`} - Specify if the currently value is invalid.\n\n  * `invalidText` {`string | TemplateResult<1> | undefined`} - Message which is displayed if the value is invalid.\n\n  * `maxCount` {`number`} - Max character count allowed for input. This is needed in order for enableCounter to display\n\n  * `required` {`boolean`} - Boolean property to set the required status\n\n  * `showPasswordVisibilityToggle` {`boolean`} - Boolean property to render password visibility toggle\n\n  * `name` {`string`} - Name for the input used for form data events //TODO make sure this works\n\n  * `pattern` {`string`} - Pattern to validate the input against for HTML validity checking\n\n  * `autocomplete` {`AutoFill`} - The sets the autocomplete for the input.",
       "attributes": [
         {
           "name": "checked",
@@ -469,7 +493,7 @@
         },
         {
           "name": "variant",
-          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\nProperty: variant\n\nDefault: text",
+          "description": "`variant` {`\"number\" | \"text\" | \"text-area\" | \"color\" | \"date\" | \"popup-date\" | \"datetime-local\" | \"email\" | \"file\" | \"hidden\" | \"password\" | \"checkbox\" | \"range\"`} - Input type\n\nProperty: variant\n\nDefault: text",
           "values": [
             {
               "name": "number"
@@ -486,6 +510,9 @@
             {
               "name": "date"
             },
+            {
+              "name": "popup-date"
+            },
             {
               "name": "datetime-local"
             },
@@ -1933,7 +1960,7 @@
     },
     {
       "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",
+      "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` {`PopoverElement | 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",
       "attributes": [
         {
           "name": "outputLanguage",
@@ -2122,7 +2149,7 @@
     },
     {
       "name": "spectric-popover",
-      "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  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \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`} - ",
+      "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\n  * `mouseOffsetX` {`number`} - \n\n  * `mouseOffsetY` {`number`} - \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  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \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  * `mouseOffsetX` {`number`} - \n\n  * `mouseOffsetY` {`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": "delay",
@@ -2162,12 +2189,20 @@
           "name": "maxWidth",
           "description": "`maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\nProperty: maxWidth\n\nDefault: 300",
           "values": []
+        },
+        {
+          "name": "mouseOffsetX",
+          "description": "`mouseOffsetX` {`number`} - \n\nProperty: mouseOffsetX\n\nDefault: 10"
+        },
+        {
+          "name": "mouseOffsetY",
+          "description": "`mouseOffsetY` {`number`} - \n\nProperty: mouseOffsetY\n\nDefault: 0"
         }
       ]
     },
     {
       "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  * `showToolTip` - \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  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \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`} - ",
+      "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\n  * `mouseOffsetX` {`number | undefined`} - \n\n  * `mouseOffsetY` {`number | undefined`} - \n\nProperties:\n\n  * `showToolTip` - \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  * `applyStyle` - \n\n  * `positionTooltip` - \n\n  * `showPopover` - Public method to trigger showing the tooltip programatically\n\n  * `hidePopover` - \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  * `mouseOffsetX` {`number | undefined`} - \n\n  * `mouseOffsetY` {`number | 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": "delay",
@@ -2207,6 +2242,16 @@
           "name": "maxWidth",
           "description": "`maxWidth` {`number | undefined`} - Sets a max width for the contents you can disable this by setting to 0 or -1\n\nProperty: maxWidth\n\nDefault: 300",
           "values": []
+        },
+        {
+          "name": "mouseOffsetX",
+          "description": "`mouseOffsetX` {`number | undefined`} - \n\nProperty: mouseOffsetX\n\nDefault: 10",
+          "values": []
+        },
+        {
+          "name": "mouseOffsetY",
+          "description": "`mouseOffsetY` {`number | undefined`} - \n\nProperty: mouseOffsetY\n\nDefault: 0",
+          "values": []
         }
       ]
     },

package/dist/index.d.ts

@@ -39,10 +39,12 @@ declare const module: {
     TableSelectOptions: typeof components.TableSelectOptions;
     TableSortOption: typeof components.TableSortOption;
     TableSortDirection: typeof components.TableSortDirection;
+    TD_BorderAndPadding: 4;
     SpectricTableElement: typeof components.SpectricTableElement;
     TooltipElementTag: "spectric-tooltip";
     TooltipPostions: typeof components.TooltipPostions;
     TooltipElement: typeof components.TooltipElement;
+    SpectricCalendar: typeof components.SpectricCalendar;
     BitArray: {
         new (buf: ArrayBuffer): {
             buffer: ArrayBuffer;