@spectric/ui 0.0.17 → 0.0.19

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/ThemeProvider.d.ts

@@ -58,6 +58,7 @@ export declare const ThemeSelections: { [k in keyof typeof Themes]: k; };
 type ThemeProps = {
     theme?: KnownThemes;
 };
+export declare const SPECTRIC_CSS_VARIABLES: string[];
 export interface ThemeChangeEvent {
     old?: string;
     new?: string;

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/pagination/pagination.d.ts

@@ -26,7 +26,7 @@ export declare class PaginationElement extends LitElement implements PaginationP
      */
     size: ButtonSizesTypes;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
-    protected updated(_changedProperties: PropertyValues): void;
+    protected update(_changedProperties: PropertyValues): void;
     private _handlePageUp;
     private _handlePageDown;
     private _handleSizeChange;

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/table/virtualBody.d.ts

@@ -16,8 +16,9 @@ export declare class TableVirtualBodyElement<T> extends DisposableElement implem
     rowHeight: number;
     startIndex: number;
     table: SpectricTableElement<T>;
+    columnsMeasured: boolean;
     constructor();
-    protected firstUpdated(): void;
+    protected updated(): void;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected render(): unknown;
 }

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