lsp-grid 1.0.0

package/dist/types/components/data/row-renderer.d.ts

@@ -0,0 +1,12 @@
+import { type VNode } from '../../stencil-public-runtime';
+import { JSXBase } from '../../stencil-public-runtime';
+export interface RowProps extends JSXBase.HTMLAttributes {
+    size: number;
+    start: number;
+    index: number;
+    rowClass?: string;
+    depth?: number;
+}
+export declare const PADDING_DEPTH = 10;
+declare const RowRenderer: ({ rowClass, index, size, start, depth }: RowProps, cells: VNode[]) => any;
+export default RowRenderer;

package/dist/types/components/editors/edit.utils.d.ts

@@ -0,0 +1,3 @@
+import { EditorCtrConstructible } from "../../types/index";
+export declare function isEditInput(el?: HTMLElement): boolean;
+export declare function isEditorCtrConstructible(editor: any): editor is EditorCtrConstructible;

package/dist/types/components/editors/revogr-edit.d.ts

@@ -0,0 +1,63 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ColumnDataSchemaModel } from "../../types/index";
+import { EditCell, EditorCtr, SaveDataDetails } from "../../types/index";
+/**
+ * Represents a cell editor in a grid.
+ * It manages the editing of cells by handling events, saving data, rendering the editor UI,
+ * and managing the lifecycle of the editor instance.
+ */
+export declare class RevoEdit {
+    /**
+     * Cell to edit data.
+     */
+    editCell: EditCell;
+    /**
+     * Column data for editor.
+     */
+    column: ColumnDataSchemaModel | null;
+    /**
+     * Custom editors register
+     */
+    editor: EditorCtr | null;
+    /**
+     * Save on editor close. Defines if data should be saved on editor close.
+     */
+    saveOnClose: boolean;
+    /**
+     * Additional data to pass to renderer
+     */
+    additionalData: any;
+    /**
+     * Cell edit event initiator, first in the cellEdit event chain
+     */
+    cellEdit: EventEmitter<SaveDataDetails>;
+    /**
+     * Close editor event
+     * pass true if requires focus next
+     */
+    closeEdit: EventEmitter<boolean | undefined>;
+    /** Edit session editor */
+    element: HTMLElement;
+    private currentEditor;
+    private preventSaveOnClose;
+    /**
+     * Cancel pending changes flag. Editor will be closed without autosave.
+     */
+    cancelChanges(): Promise<void>;
+    /**
+     * Before editor got disconnected.
+     * Can be triggered multiple times before actual disconnect.
+     */
+    beforeDisconnect(): Promise<void>;
+    onAutoSave(): void;
+    /**
+     * Callback triggered when cell editor saved.
+     * Closes editor when called.
+     * @param preventFocus - if true, editor will not be closed & next cell will not be focused.
+     */
+    onSave(val?: any, preventFocus?: boolean): void;
+    componentWillRender(): void;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/editors/text-editor.d.ts

@@ -0,0 +1,43 @@
+import { type VNode, h as createElement } from '../../stencil-public-runtime';
+import type { EditCell, EditorBase, ColumnDataSchemaModel } from "../../types/index";
+/**
+ * Represents a cell editor in a grid.
+ *
+ * It's a good place to start with your own editor.
+ * It manages the editing of cells by handling events, saving data, rendering the editor UI, and managing the lifecycle of the editor instance.
+ */
+/**
+ * Callback triggered on cell editor save
+ * Closes editor when called
+ * @param preventFocus - if true editor will not be closed and next cell will not be focused
+ */
+export type SaveCallback = (value: any, preventFocus: boolean) => void;
+export declare class TextEditor implements EditorBase {
+    data: ColumnDataSchemaModel;
+    private saveCallback?;
+    editInput: HTMLInputElement | null;
+    element: Element | null;
+    editCell?: EditCell;
+    constructor(data: ColumnDataSchemaModel, saveCallback?: SaveCallback | undefined);
+    /**
+     * Callback triggered on cell editor render
+     */
+    componentDidRender(): Promise<void>;
+    onKeyDown(e: KeyboardEvent): void;
+    /**
+     * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.
+     */
+    beforeDisconnect(): void;
+    /**
+     * Get value from input
+     */
+    getValue(): string | undefined;
+    /**
+     * Render method for Editor plugin.
+     * Renders input element with passed data from cell.
+     * @param {Function} h - h function from stencil render.
+     * @param {Object} _additionalData - additional data from plugin.
+     * @returns {VNode} - input element.
+     */
+    render(h: typeof createElement, _additionalData: any): VNode | VNode[];
+}

package/dist/types/components/extra/revogr-extra.d.ts

@@ -0,0 +1,38 @@
+import { VNode } from '../../stencil-public-runtime';
+import type { ExtraNodeFuncConfig } from "../../types/index";
+/**
+ * Contains extra elements for stencil components.
+ * Performs rendering and updates for external components.
+ *
+ * @example
+ * In Plugins if you want to add extra elements to grid and use stenciljs vnodes reactivity:
+ * function paginationPanel(this: PaginationPlugin, config: { refresh: () => void }) {
+ *    // use `config.refresh()` for component to re-render
+ *    return h('div')
+ * }
+ *
+ * revogrid.registerVNode = [
+ *    ...existingNodes,
+ *     paginationPanel.bind(this)
+ * ];
+
+
+/**
+ * @internal
+ */
+export declare class RevoGridExtra {
+    /**
+     * Nodes to render
+     */
+    nodes: (VNode | ((c: ExtraNodeFuncConfig) => VNode))[];
+    /**
+     * Force component to re-render
+     */
+    update: number;
+    /**
+     * Refreshes the extra component. Useful if you want to manually
+     * force the component to re-render.
+     */
+    refresh(): Promise<void>;
+    render(): any[];
+}

package/dist/types/components/header/header-cell-renderer.d.ts

@@ -0,0 +1,9 @@
+import { type FunctionalComponent } from '../../stencil-public-runtime';
+import { ResizableElementHTMLAttributes } from './resizable.element';
+import { ColumnTemplateProp } from "../../types/index";
+export declare const ON_COLUMN_CLICK = "columnclick";
+export declare const HeaderCellRenderer: FunctionalComponent<{
+    props: ResizableElementHTMLAttributes;
+    additionalData: any;
+    data?: ColumnTemplateProp;
+}>;

package/dist/types/components/header/header-group-renderer.d.ts

@@ -0,0 +1,15 @@
+import { h } from '../../stencil-public-runtime';
+import { Group } from "../../store/index";
+import type { ProvidersColumns } from "../../types/index";
+import { ResizeEvent, ResizeProps } from './resizable.directive';
+export type HeaderGroupRendererProps = {
+    start: number;
+    end: number;
+    group: Group;
+    providers: ProvidersColumns;
+    additionalData: any;
+    canResize?: boolean;
+    onResize?(e: ResizeEvent): void;
+} & Partial<Pick<ResizeProps, 'active'>>;
+declare const HeaderGroupRenderer: (p: HeaderGroupRendererProps) => ReturnType<typeof h>;
+export default HeaderGroupRenderer;

package/dist/types/components/header/header-renderer.d.ts

@@ -0,0 +1,16 @@
+import { h } from '../../stencil-public-runtime';
+import type { VirtualPositionItem, ColumnTemplateProp, InitialHeaderClick, RangeArea } from "../../types/index";
+import { ResizeEvent, ResizeProps } from './resizable.directive';
+export type HeaderRenderProps = {
+    column: VirtualPositionItem;
+    additionalData: any;
+    data: ColumnTemplateProp;
+    range?: RangeArea | null;
+    canResize?: boolean;
+    canFilter?: boolean;
+    onResize?(e: ResizeEvent): void;
+    onClick?(data: InitialHeaderClick): void;
+    onDblClick?(data: InitialHeaderClick): void;
+} & Partial<Pick<ResizeProps, 'active'>>;
+declare const HeaderRenderer: (p: HeaderRenderProps) => ReturnType<typeof h>;
+export default HeaderRenderer;

package/dist/types/components/header/resizable.directive.d.ts

@@ -0,0 +1,55 @@
+export type ResizeProps = {
+    active: ('r' | 'rb' | 'b' | 'lb' | 'l' | 'lt' | 't' | 'rt')[];
+    fitParent: boolean;
+    minWidth: number;
+    minHeight: number;
+    disableAttributes: ('l' | 't' | 'w' | 'h')[];
+    maxWidth?: number;
+    maxHeight?: number;
+    onResize?(e: ResizeEvent): void;
+};
+export type ResizeEvent = {
+    eventName: string;
+    changedX?: number;
+    changedY?: number;
+    width?: number;
+    height?: number;
+};
+export declare enum ResizeEvents {
+    start = "resize:start",
+    move = "resize:move",
+    end = "resize:end"
+}
+export declare class ResizeDirective {
+    private initialProps;
+    private $event?;
+    private $el;
+    private props;
+    private minW;
+    private minH;
+    private maxW;
+    private maxH;
+    private mouseX;
+    private mouseY;
+    private width;
+    private height;
+    private changeX;
+    private changeY;
+    private parent;
+    private resizeState;
+    private activeResizer?;
+    private disableCalcMap;
+    private mouseMoveFunc;
+    private mouseUpFunc;
+    constructor(initialProps: Partial<ResizeProps>, $event?: ((e: ResizeEvent) => void) | undefined);
+    set($el: HTMLElement): void;
+    emitEvent(eventName: string, additionalOptions?: any): void;
+    private static isTouchEvent;
+    handleMove(event: MouseEvent | TouchEvent): void;
+    handleDown(event: MouseEvent | TouchEvent): void;
+    handleUp(e: MouseEvent): void;
+    private setInitials;
+    private dropInitial;
+    private bindMove;
+    private unbindMove;
+}

package/dist/types/components/header/resizable.element.d.ts

@@ -0,0 +1,5 @@
+import { type FunctionalComponent } from '../../stencil-public-runtime';
+import { ResizeProps } from './resizable.directive';
+import type { CellProps } from "../../types/index";
+export type ResizableElementHTMLAttributes = Partial<ResizeProps> & CellProps;
+export declare const ResizableElement: FunctionalComponent;

package/dist/types/components/header/revogr-header.d.ts

@@ -0,0 +1,90 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Groups } from "../../store/index";
+import { HeaderRenderProps } from './header-renderer';
+import { ResizeProps } from './resizable.directive';
+import type { ColumnRegular, DimensionSettingsState, InitialHeaderClick, ViewportState, ViewSettingSizeProp, DimensionCols, SelectionStoreState, ProvidersColumns } from "../../types/index";
+import type { Observable } from '../../utils';
+import { HeaderGroupRendererProps } from './header-group-renderer';
+export declare class RevogrHeaderComponent {
+    /**
+     * Stores
+     */
+    /** Viewport X */
+    viewportCol: Observable<ViewportState>;
+    /** Dimension settings X */
+    dimensionCol: Observable<DimensionSettingsState>;
+    /** Selection, range, focus */
+    selectionStore: Observable<SelectionStoreState>;
+    /**
+     * Column groups
+     */
+    groups: Groups;
+    /**
+     * Grouping depth, how many levels of grouping
+     */
+    groupingDepth: number;
+    /**
+     * Readonly mode
+     */
+    readonly: boolean;
+    /**
+     * If columns can be resized
+     */
+    canResize: boolean;
+    /**
+     * Defines resize position
+     */
+    resizeHandler: ResizeProps['active'];
+    /**
+     * Columns - defines an array of grid columns.
+     */
+    colData: ColumnRegular[];
+    /**
+     * Column filter
+     */
+    columnFilter: boolean;
+    /**
+     * Column type
+     */
+    type: DimensionCols | 'rowHeaders';
+    /**
+     * Extra properties to pass into header renderer, such as vue or react components to handle parent
+     */
+    additionalData: any;
+    /**
+     * On initial header click
+     */
+    initialHeaderClick: EventEmitter<InitialHeaderClick>;
+    /**
+     * On header resize
+     */
+    headerresize: EventEmitter<ViewSettingSizeProp>;
+    /**
+     * On before header resize
+     */
+    beforeResize: EventEmitter<ColumnRegular[]>;
+    /**
+     * On header double click
+     */
+    headerdblClick: EventEmitter<InitialHeaderClick>;
+    /**
+     * Before each header cell render function. Allows to override cell properties
+     */
+    beforeHeaderRender: EventEmitter<HeaderRenderProps>;
+    /**
+     * Before each group header cell render function. Allows to override group header cell properties
+     */
+    beforeGroupHeaderRender: EventEmitter<HeaderGroupRendererProps>;
+    /**
+     * After all header cells rendered. Finalizes cell rendering.
+     */
+    afterHeaderRender: EventEmitter<ProvidersColumns>;
+    element: HTMLElement;
+    private onResize;
+    private onResizeGroup;
+    componentDidRender(): void;
+    render(): any[];
+    private renderHeaderColumns;
+    private renderGroupingColumns;
+    get providers(): ProvidersColumns<DimensionCols | 'rowHeaders'>;
+}

package/dist/types/components/order/order-renderer.d.ts

@@ -0,0 +1,29 @@
+import { type VNode } from '../../stencil-public-runtime';
+import { PositionItem } from "../../types/index";
+import { Cell } from "../../types/index";
+type Props = {
+    ref: {
+        (e: OrdererService): void;
+    };
+};
+/**
+ * Draw drag
+ */
+export declare class OrdererService {
+    private parentY;
+    el?: HTMLElement;
+    rgRow?: HTMLElement;
+    text?: HTMLElement;
+    draggable?: HTMLElement;
+    start(parent: HTMLElement, { pos, text, event }: {
+        pos: PositionItem;
+        text: string;
+        event: MouseEvent;
+    }): void;
+    end(): void;
+    move(pos: PositionItem): void;
+    moveTip({ x, y }: Cell): void;
+    private moveElement;
+}
+declare const OrderRenderer: ({ ref }: Props) => VNode[];
+export default OrderRenderer;

package/dist/types/components/order/order-row.service.d.ts

@@ -0,0 +1,27 @@
+import { DimensionSettingsState, PositionItem, Cell } from "../../types/index";
+type EventData = {
+    el: HTMLElement;
+    rows: DimensionSettingsState;
+    cols: DimensionSettingsState;
+};
+interface Config {
+    positionChanged(from: number, to: number): void;
+}
+export default class RowOrderService {
+    private config;
+    private currentCell;
+    private previousRow;
+    constructor(config: Config);
+    /** Drag finished, calculate and apply changes */
+    endOrder(e: MouseEvent, data: EventData): void;
+    /** Drag started, reserve initial cell for farther use */
+    startOrder(e: MouseEvent, data: EventData): Cell;
+    move(y: number, data: EventData): PositionItem | null;
+    /** Drag stopped, probably cursor outside of document area */
+    clear(): void;
+    /** Calculate cell based on x, y position */
+    getRow(y: number, { el, rows }: EventData): PositionItem;
+    /** Calculate cell based on x, y position */
+    getCell({ x, y }: Cell, { el, rows, cols }: EventData): Cell;
+}
+export {};

package/dist/types/components/order/revogr-order-editor.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type DSourceState } from "../../store/index";
+import type { DimensionRows, DataType, DimensionSettingsState, DragStartEvent, PositionItem, Cell, RowDragStartDetails } from "../../types/index";
+import type { Observable } from '../../utils';
+/**
+ * Component for handling row order editor.
+ */
+export declare class OrderEditor {
+    /** Parent element */
+    parent: HTMLElement;
+    /** Dimension settings Y */
+    dimensionRow: Observable<DimensionSettingsState>;
+    /** Dimension settings X */
+    dimensionCol: Observable<DimensionSettingsState>;
+    /** Static stores, not expected to change during component lifetime */
+    dataStore: Observable<DSourceState<DataType, DimensionRows>>;
+    rowType: DimensionRows;
+    /** Row drag started */
+    rowDragStart: EventEmitter<RowDragStartDetails>;
+    /** Row drag ended started */
+    rowDragEnd: EventEmitter<{
+        rowType: DimensionRows;
+    }>;
+    /** Row move started */
+    rowDrag: EventEmitter<PositionItem & {
+        rowType: DimensionRows;
+    }>;
+    /** Row mouse move started */
+    rowMouseMove: EventEmitter<Cell & {
+        rowType: DimensionRows;
+    }>;
+    /** Row dragged, new range ready to be applied */
+    rowDropped: EventEmitter<{
+        from: number;
+        to: number;
+        rowType: DimensionRows;
+    }>;
+    /** Row drag ended finished. Time to apply data */
+    rowOrderChange: EventEmitter<{
+        from: number;
+        to: number;
+        rowType: DimensionRows;
+    }>;
+    private rowOrderService;
+    private events;
+    private rowMoveFunc;
+    dragStart(e: DragStartEvent): Promise<void>;
+    endOrder(e: MouseEvent): Promise<void>;
+    clearOrder(): Promise<void>;
+    move({ x, y }: {
+        x: number;
+        y: number;
+    }): void;
+    connectedCallback(): void;
+    private getData;
+}

package/dist/types/components/overlay/autofill.service.d.ts

@@ -0,0 +1,80 @@
+import { EventData } from './selection.utils';
+import { DSourceState } from "../../store/index";
+import ColumnService from '../data/column.service';
+import { DataLookup, DataType, DimensionSettingsState, TempRange, ChangedRange, BeforeRangeSaveDataDetails, RangeArea, Cell, DimensionRows, Nullable } from "../../types/index";
+import { Observable } from '../../utils';
+type Config = {
+    dimensionRow: Observable<DimensionSettingsState>;
+    dimensionCol: Observable<DimensionSettingsState>;
+    columnService: ColumnService;
+    dataStore: Observable<DSourceState<DataType, DimensionRows>>;
+    setTempRange(e: Nullable<TempRange> | null): Event | null;
+    selectionChanged(e: ChangedRange): Event;
+    rangeCopy(e: ChangedRange): Event;
+    rangeDataApply(e: BeforeRangeSaveDataDetails): CustomEvent;
+    setRange(e: RangeArea | null): boolean;
+    clearRangeDataApply(e: {
+        range: RangeArea;
+    }): CustomEvent<{
+        range: RangeArea;
+    }>;
+    getData(): any;
+};
+declare const enum AutoFillType {
+    selection = "Selection",
+    autoFill = "AutoFill"
+}
+export declare class AutoFillService {
+    private sv;
+    private autoFillType;
+    private autoFillInitial;
+    private autoFillStart;
+    private autoFillLast;
+    private onMouseMoveAutofill;
+    constructor(sv: Config);
+    /**
+     * Render autofill box
+     * @param range
+     * @param selectionFocus
+     */
+    renderAutofill(range: RangeArea | null, selectionFocus: Cell, isMobile?: boolean): any;
+    private autoFillHandler;
+    get isAutoFill(): boolean;
+    /**
+     * Process mouse move events
+     */
+    selectionMouseMove(e: MouseEvent | TouchEvent): void;
+    private getFocus;
+    /**
+     * Autofill logic:
+     * on mouse move apply based on previous direction (if present)
+     */
+    private doAutofillMouseMove;
+    /**
+     * Range selection started
+     * Mode @param type:
+     * Can be triggered from MouseDown selection on element
+     * Or can be triggered on corner square drag
+     */
+    selectionStart(target: Element, data: EventData, type?: AutoFillType): void;
+    /**
+     * Clear current range selection on mouse up and mouse leave events
+     */
+    clearAutoFillSelection(focus: Cell | null, oldRange: RangeArea | null): void;
+    /**
+     * Reset autofill state
+     */
+    private resetAutoFillState;
+    /**
+     * Trigger range apply events and handle responses
+     */
+    onRangeApply(newData: DataLookup, newRange: RangeArea | null, oldRange: RangeArea | null, copy?: boolean, clear?: boolean): void;
+    /** Apply range and copy data during range application */
+    private applyRangeWithData;
+    /**
+     * Update range selection only,
+     * no data change (mouse selection)
+     */
+    private applyRangeOnly;
+}
+export {};

package/dist/types/components/overlay/keyboard.service.d.ts

@@ -0,0 +1,28 @@
+import { type Observable } from '../../utils';
+import { EventData } from './selection.utils';
+import { Cell, Nullable, RangeArea, SelectionStoreState } from "../../types/index";
+type Config = {
+    selectionStore: Observable<SelectionStoreState>;
+    change(val?: any): void;
+    cancel(): void;
+    clearCell(): void;
+    focus(focus: Cell, changes: Partial<Cell>, focusNextViewport?: number): boolean;
+    getData(): any;
+    internalPaste(): void;
+    range(range: RangeArea | null): boolean;
+    selectAll(): void;
+    rollback(): void;
+};
+export declare class KeyboardService {
+    private sv;
+    constructor(sv: Config);
+    keyDown(e: KeyboardEvent, canRange: boolean, isEditMode: boolean, { range, focus }: Nullable<Pick<EventData, 'range' | 'focus'>>): Promise<void>;
+    keyChangeSelection(e: KeyboardEvent, canRange: boolean): Promise<boolean>;
+    keyPositionChange(changes: Partial<Cell>, range: RangeArea | null, focus: Cell | null, isMulti?: boolean): boolean;
+    /** Monitor key direction changes */
+    changeDirectionKey(e: KeyboardEvent, canRange: boolean): {
+        changes: Partial<Cell>;
+        isMulti?: boolean;
+    } | void;
+}
+export {};