lsp-grid 1.0.0

package/dist/types/types/plugin.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Interface for plugin components
+ */
+export interface PluginBaseComponent {
+    /**
+     * Cleans up plugin's resources
+     */
+    destroy?(): void;
+}

package/dist/types/types/plugin.types.d.ts

@@ -0,0 +1,48 @@
+import { PluginBaseComponent } from "./index";
+import ColumnDataProvider from '../services/column.data.provider';
+import { DataProvider } from '../services/data.provider';
+import DimensionProvider from '../services/dimension.provider';
+import type { SelectionStoreConnector } from '../services/selection.store.connector';
+import ViewportProvider from '../services/viewport.provider';
+export interface PluginServiceBase {
+    get(): PluginBaseComponent[];
+    add(plugin: PluginBaseComponent): void;
+    remove(plugin: PluginBaseComponent): void;
+    getByClass<T extends PluginBaseComponent>(pluginClass: new (...args: any[]) => T): T | undefined;
+}
+/**
+ * Services that are provided by the various plugins for use by the grid. Each plugin
+ * is responsible for providing a specific service, and the `PluginProviders` type collects all the services provided
+ * by the plugins.
+ */
+export type PluginProviders = {
+    /**
+     * The data service provides access to the grid data.
+     */
+    data: DataProvider;
+    /**
+     * The dimension service provides access to the grid's dimensions and settings.
+     */
+    dimension: DimensionProvider;
+    /**
+     * The selection service provides access to the grid's selection state.
+     */
+    selection: SelectionStoreConnector;
+    /**
+     * The column service provides access to the grid's column data.
+     */
+    column: ColumnDataProvider;
+    /**
+     * The viewport service provides access to the grid's viewport state.
+     */
+    viewport: ViewportProvider;
+    /**
+     * Plugin services
+     */
+    plugins: PluginServiceBase;
+};
+declare global {
+    type CombinedHTMLRevoGridElementEventMap = Record<string, any> & HTMLRevogrClipboardElementEventMap & HTMLRevogrFocusElementEventMap & HTMLRevogrDataElementEventMap & HTMLRevogrEditElementEventMap & HTMLRevogrFilterPanelElementEventMap & HTMLRevogrHeaderElementEventMap & HTMLRevogrOrderEditorElementEventMap & HTMLRevogrOverlaySelectionElementEventMap & HTMLRevogrRowHeadersElementEventMap & HTMLRevogrScrollVirtualElementEventMap & HTMLRevogrViewportScrollElementEventMap & HTMLVnodeHtmlElementEventMap;
+    interface HTMLRevoGridElementEventMap extends CombinedHTMLRevoGridElementEventMap {
+    }
+}

package/dist/types/types/selection.d.ts

@@ -0,0 +1,178 @@
+import { type VNode } from '../stencil-public-runtime';
+import type { DimensionRows, DimensionCols } from './dimension';
+import type { ColumnProp, DataType, DataLookup, HyperFunc, ColumnDataSchemaModel, PositionItem } from './interfaces';
+export type RowIndex = number;
+export type ColIndex = number;
+/**
+ * Represents the state of the selection store.
+ * It contains information about the selection range, temporary range,
+ * focused cell, editing cell, last focused cell, and next cell to focus.
+ */
+export type SelectionStoreState = {
+    range: RangeArea | null;
+    /**
+     * Temporary range selection area
+     */
+    tempRange: RangeArea | null;
+    /**
+     * Type of the temporary range selection
+     */
+    tempRangeType: string | null;
+    /**
+     * Focused cell coordinate
+     */
+    focus: Cell | null;
+    /**
+     * Editing cell store
+     */
+    edit: EditCellStore | null;
+    /**
+     * Last cell which was focused
+     */
+    lastCell: Cell | null;
+    /**
+     * Next cell to focus
+     */
+    nextFocus: Cell | null;
+};
+export type RangeArea = {
+    x: ColIndex;
+    y: RowIndex;
+    x1: ColIndex;
+    y1: RowIndex;
+};
+export type TempRange = {
+    type: string;
+    area: RangeArea;
+};
+export type OldNewRangeMapping = {
+    [newRowIndex: number]: {
+        [T in ColumnProp]: {
+            rowIndex: number;
+            colIndex: number;
+            colProp: ColumnProp;
+        };
+    };
+};
+export type ChangedRange = {
+    type: DimensionRows;
+    colType: DimensionCols;
+    newRange: RangeArea;
+    oldRange: RangeArea;
+    mapping: OldNewRangeMapping;
+    newData: {
+        [newRowIndex: number]: DataType;
+    };
+};
+/**
+ * Cell coordinates
+ */
+export interface Cell {
+    x: ColIndex;
+    y: RowIndex;
+}
+export type FocusedCells = {
+    focus: Cell;
+    end: Cell;
+};
+export type RangeAreaCss = {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+};
+export type SaveDataDetails = {
+    rgRow: RowIndex;
+    rgCol: ColIndex;
+    type: DimensionRows;
+    prop: ColumnProp;
+    val: any;
+    preventFocus?: boolean;
+};
+export type BeforeEdit = BeforeSaveDataDetails;
+export type RowDragStartDetails = {
+    cell: Cell;
+    text: string;
+    pos: PositionItem;
+    event: MouseEvent;
+    rowType: DimensionRows;
+    model: any;
+};
+export interface BeforeSaveDataDetails extends ColumnDataSchemaModel {
+    /**
+     * Value from editor to save, not part of the model value yet
+     */
+    val?: any;
+    /**
+     * Previous row data before the edit.
+     */
+    previousModel?: DataType;
+}
+export type BeforeRangeSaveDataDetails = {
+    data: DataLookup;
+    models: Partial<DataLookup>;
+    previousModels: Partial<DataLookup> | null;
+    type: DimensionRows;
+    newRange: RangeArea | null;
+    oldRange: RangeArea | null;
+    copy?: boolean;
+    clearByKeyboard?: boolean;
+};
+export type AfterEditEvent = BeforeRangeSaveDataDetails | BeforeSaveDataDetails;
+/**
+ * Edit cell info for store
+ */
+export interface EditCellStore extends Cell {
+    val?: any;
+}
+/**
+ * Edit cell info for editor
+ */
+export type EditCell = EditCellStore & BeforeSaveDataDetails;
+/**
+ * Available editors in grid
+ */
+export type Editors = {
+    [name: string]: EditorCtr;
+};
+/**
+ * Editor component
+ */
+export type EditorCtr = EditorCtrCallable | EditorCtrConstructible;
+/**
+ * Editor component callable function
+ */
+export type EditorCtrCallable = {
+    (column: ColumnDataSchemaModel, save: (value?: any, preventFocus?: boolean) => void, close: (focusNext?: boolean) => void): EditorBase;
+};
+/**
+ * Editor component constructible class
+ */
+export interface EditorCtrConstructible {
+    new (column: ColumnDataSchemaModel, save: (value: any, preventFocus?: boolean) => void, close: (focusNext?: boolean) => void): EditorBase;
+}
+/**
+ * Editor interface
+ */
+export interface EditorBase {
+    element?: Element | null;
+    editCell?: EditCell;
+    /**
+     * Autosave usage when you want to return value for models.
+     */
+    getValue?(): any;
+    /**
+     * For Editor plugin internal usage.
+     * Prevents Editor save. Manual save usage required.
+     */
+    beforeAutoSave?(val?: any): boolean;
+    beforeUpdate?(): void;
+    /**
+     * Before editor got disconnected.
+     * Can be triggered multiple times before actual disconnect.
+     */
+    beforeDisconnect?(): void;
+    componentDidRender?(): void;
+    disconnectedCallback?(): void;
+    render(createElement: HyperFunc<VNode>, additionalData?: any): VNode | VNode[] | string | void;
+}

package/dist/types/types/theme.d.ts

@@ -0,0 +1,7 @@
+export interface ThemePackage {
+    defaultRowSize: number;
+}
+export type ThemeConfig = {
+    rowSize: number;
+};
+export type Theme = 'default' | 'material' | 'compact' | 'darkMaterial' | 'darkCompact' | string;

package/dist/types/types/viewport.interfaces.d.ts

@@ -0,0 +1,45 @@
+import type { JSXBase } from '../stencil-public-runtime';
+import type { DimensionCols, ColumnRegular, ViewPortScrollEvent, ViewportState, Cell, SelectionStoreState } from "./index";
+import type { DimensionStoreCollection, ViewportStoreCollection, DSourceState } from "../store/index";
+import type { Observable } from '../utils';
+import type { RowDataSources } from '../services/data.provider';
+import type { JSX } from '..';
+export type SlotType = 'content' | 'header' | 'footer';
+export interface ElementScroll {
+    changeScroll?(e: ViewPortScrollEvent, silent?: boolean): Promise<ViewPortScrollEvent | undefined>;
+    setScroll?(e: ViewPortScrollEvent): Promise<void>;
+}
+export type ElementsScroll = {
+    [key: string]: ElementScroll[];
+};
+export type HeaderProperties = JSX.RevogrHeader;
+export type ViewportProperties = JSX.RevogrViewportScroll & JSXBase.HTMLAttributes<HTMLRevogrViewportScrollElement>;
+export type ViewportColumn = {
+    colType: DimensionCols;
+    position: Cell;
+    fixWidth?: boolean;
+    viewports: ViewportStoreCollection;
+    dimensions: DimensionStoreCollection;
+    rowStores: RowDataSources;
+    colStore: Observable<DSourceState<ColumnRegular, DimensionCols>>;
+} & Partial<JSX.RevogrViewportScroll> & Partial<JSX.RevogrHeader>;
+export type ViewportData = {
+    /** Slot to put data */
+    slot: SlotType;
+    style?: {
+        [key: string]: string;
+    };
+} & JSX.RevogrOverlaySelection & (Pick<JSXBase.HTMLAttributes<HTMLRevogrOverlaySelectionElement>, 'ref'> & Pick<JSXBase.HTMLAttributes<HTMLRevogrDataElement>, 'ref'>) & JSX.RevogrData;
+export type ViewportProps = {
+    prop: JSX.RevogrViewportScroll & JSXBase.HTMLAttributes<HTMLRevogrViewportScrollElement>;
+    position: Cell;
+    type: DimensionCols;
+    /** Cols dataset */
+    viewportCol: Observable<ViewportState>;
+    /** header container props */
+    headerProp: HeaderProperties;
+    /** parent selector link */
+    /** viewport rows */
+    dataPorts: ViewportData[];
+    columnSelectionStore: Observable<SelectionStoreState>;
+};

package/dist/types/utils/browser.d.ts

@@ -0,0 +1 @@
+export declare function isSafariDesktop(): boolean;

package/dist/types/utils/column.utils.d.ts

@@ -0,0 +1,52 @@
+import type { ColumnData, ColumnGrouping, ColumnProp, ColumnRegular, ColumnTypes, DataType, DimensionCols, ViewSettingSizeProp } from "../types/index";
+import { type Group as StoreGroup } from "../store/index";
+export type ColumnItems = Record<DimensionCols, ColumnRegular[]>;
+export interface ColumnGroup extends StoreGroup {
+    level: number;
+}
+export type ColumnGroupingCollection = Record<DimensionCols, ColumnGroup[]>;
+export declare function getCellData(val?: any): any;
+export declare function getCellRaw(model?: DataType, column?: ColumnRegular): any;
+export declare function getCellDataParsed(model: DataType, column: ColumnRegular): any;
+/**
+ * Column collection definition.
+ * Used to access indexed data for columns.
+ * Can be accessed via different events.
+ */
+export type ColumnCollection = {
+    /**
+     * Columns as they are in stores
+     */
+    columns: Record<DimensionCols, ColumnRegular[]>;
+    /**
+     * Columns indexed by prop for quick access, it's possible to have multiple columns with same prop but not recommended
+     */
+    columnByProp: Record<ColumnProp, ColumnRegular[]>;
+    /**
+     * Grouped columns
+     */
+    columnGrouping: ColumnGroupingCollection;
+    /**
+     * Max level of grouping
+     */
+    maxLevel: number;
+    /**
+     * Sorting
+     */
+    sort: Record<ColumnProp, ColumnRegular>;
+};
+/**
+ * Get column type from column data
+ */
+export declare function getColumnType(rgCol: ColumnRegular): DimensionCols;
+export declare function getColumnSizes(cols: ColumnRegular[]): ViewSettingSizeProp;
+/**
+ * Check if column is grouping column
+ */
+export declare function isColGrouping(colData: ColumnGrouping | ColumnRegular): colData is ColumnGrouping;
+/**
+ * This function is used to create a collection of columns.
+ */
+export declare function getColumns(columns: ColumnData, level?: number, types?: ColumnTypes, resFromRoot?: Partial<ColumnCollection>): ColumnCollection;
+export declare function gatherGroup<T extends ColumnCollection>(res: T, colData: ColumnGrouping, collection: T, existingColumnsByType?: ColumnCollection['columns'], level?: number): T;
+export declare function getColumnByProp(columns: ColumnData, prop: ColumnProp): ColumnRegular | undefined;

package/dist/types/utils/consts.d.ts

@@ -0,0 +1,22 @@
+export declare const MIN_COL_SIZE = 30;
+export declare const RESIZE_INTERVAL = 40;
+export declare const DATA_COL = "data-rgCol";
+export declare const DATA_ROW = "data-rgRow";
+export declare const DISABLED_CLASS = "disabled";
+export declare const CELL_CLASS = "rgCell";
+export declare const ROW_HEADER_TYPE = "rowHeaders";
+export declare const HEADER_CLASS = "rgHeaderCell";
+export declare const HEADER_SORTABLE_CLASS = "sortable";
+export declare const HEADER_ROW_CLASS = "header-rgRow";
+export declare const HEADER_ACTUAL_ROW_CLASS = "actual-rgRow";
+export declare const DRAG_ICON_CLASS = "revo-drag-icon";
+export declare const DRAGGABLE_CLASS = "revo-draggable";
+export declare const FOCUS_CLASS = "focused-cell";
+export declare const SELECTION_BORDER_CLASS = "selection-border-range";
+export declare const MOBILE_CLASS = "mobile-handler";
+export declare const TMP_SELECTION_BG_CLASS = "temp-bg-range";
+export declare const CELL_HANDLER_CLASS = "autofill-handle";
+export declare const EDIT_INPUT_WR = "edit-input-wrapper";
+export declare const DRAGG_TEXT = "Draggable item";
+export declare const GRID_INTERNALS = "__rvgr";
+export declare const ROW_FOCUSED_CLASS = "focused-rgRow";

package/dist/types/utils/events.d.ts

@@ -0,0 +1,5 @@
+export declare function verifyTouchTarget(touchEvent?: Touch, focusClass?: string): boolean;
+/**
+ * Function to get the value of a specific property from a MouseEvent or TouchEvent object.
+ */
+export declare function getPropertyFromEvent(e: MouseEvent | TouchEvent, prop: keyof Pick<Touch, 'clientX' | 'clientY' | 'screenX' | 'screenY'>, focusClass?: string): number | null;

package/dist/types/utils/header.utils.d.ts

@@ -0,0 +1,2 @@
+export declare function generateHeader(index: number): string;
+export declare function generateHeaderByCount(colsNumber: number): string[];

package/dist/types/utils/index.d.ts

@@ -0,0 +1,32 @@
+export * from './store.utils';
+export * from './store.types';
+export * from './column.utils';
+export * from './consts';
+export * from './key.utils';
+export * from './key.codes';
+export * from './row-header-utils';
+export declare function range(size: number, startAt?: number): number[];
+export declare function checkIsRightClick(e: MouseEvent): boolean;
+export declare function isFocusOnSpecificElement(elements: string[]): boolean;
+export declare function findPositionInArray<T>(this: T[], el: T, compareFn: (el: T, el2: T) => number): number;
+/**
+ * Sorted push
+ */
+export declare function pushSorted<T>(arr: T[], el: T, fn: (el: T, el2: T) => number): T[];
+/**
+ * Merge sorted array helper function
+ */
+export declare function mergeSortedArray<T>(arr1: T[], arr2: T[], compareFn?: (el: T, el2: T) => boolean): T[];
+/**
+ * Calculate system scrollbar size
+ */
+export declare function getScrollbarSize(document: Document): number;
+export declare function scaleValue(value: number, from: [number, number], to: [number, number]): number;
+/**
+ * Async timeout
+ */
+export declare function timeout(delay?: number): Promise<void>;
+/**
+ * Type script mixins
+ */
+export declare function applyMixins(derivedCtor: any, constructors: any[]): void;

package/dist/types/utils/key.codes.d.ts

@@ -0,0 +1,73 @@
+declare enum codes {
+    MOUSE_LEFT = 1,
+    MOUSE_RIGHT = 3,
+    MOUSE_MIDDLE = 2,
+    BACKSPACE = 8,
+    COMMA = 188,
+    INSERT = 45,
+    DELETE = 46,
+    END = 35,
+    ENTER = 13,
+    ESCAPE = 27,
+    CONTROL = 17,
+    COMMAND_LEFT = 91,
+    COMMAND_RIGHT = 93,
+    COMMAND_FIREFOX = 224,
+    ALT = 18,
+    HOME = 36,
+    PAGE_DOWN = 34,
+    PAGE_UP = 33,
+    PERIOD = 190,
+    SPACE = 32,
+    SHIFT = 16,
+    CAPS_LOCK = 20,
+    TAB = 9,
+    ARROW_RIGHT = 39,
+    ARROW_LEFT = 37,
+    ARROW_UP = 38,
+    ARROW_DOWN = 40,
+    F1 = 112,
+    F2 = 113,
+    F3 = 114,
+    F4 = 115,
+    F5 = 116,
+    F6 = 117,
+    F7 = 118,
+    F8 = 119,
+    F9 = 120,
+    F10 = 121,
+    F11 = 122,
+    F12 = 123,
+    A = 65,
+    C = 67,
+    D = 68,
+    F = 70,
+    L = 76,
+    O = 79,
+    P = 80,
+    S = 83,
+    V = 86,
+    X = 88
+}
+export declare enum codesLetter {
+    ENTER = "Enter",
+    ENTER_NUM = "NumpadEnter",
+    A = "KeyA",
+    C = "KeyC",
+    X = "KeyX",
+    V = "KeyV",
+    ESCAPE = "Escape",
+    TAB = "Tab",
+    BACKSPACE = "Backspace",
+    DELETE = "Delete",
+    ARROW_RIGHT = "ArrowRight",
+    ARROW_LEFT = "ArrowLeft",
+    ARROW_UP = "ArrowUp",
+    ARROW_DOWN = "ArrowDown",
+    SHIFT = "Shift"
+}
+export declare enum keyValues {
+    ENTER = "Enter",// Enter + NumpadEnter
+    TAB = "Tab"
+}
+export default codes;

package/dist/types/utils/key.utils.d.ts

@@ -0,0 +1,13 @@
+import KeyCodesEnum from './key.codes';
+export declare function isMetaKey(code: number): boolean;
+export declare function isCtrlKey(code: number, platform: string): boolean;
+export declare function isCtrlMetaKey(code: KeyCodesEnum): boolean;
+export declare function isClear(code: string): boolean;
+export declare function isTab(code: string): boolean;
+export declare function isTabKeyValue(key: string): boolean;
+export declare function isEnterKeyValue(key: string): boolean;
+export declare function isCut(event: KeyboardEvent): boolean;
+export declare function isCopy(event: KeyboardEvent): boolean;
+export declare function isPaste(event: KeyboardEvent): boolean;
+export declare function isAll(event: KeyboardEvent): boolean;
+export declare function isBack(event: KeyboardEvent): boolean;

package/dist/types/utils/mobile.d.ts

@@ -0,0 +1 @@
+export declare function isMobileDevice(): boolean;

package/dist/types/utils/platform.d.ts

@@ -0,0 +1,4 @@
+declare enum osPlatform {
+    mac = "Mac"
+}
+export default osPlatform;

package/dist/types/utils/row-header-utils.d.ts

@@ -0,0 +1,2 @@
+import { RowHeaders } from '..';
+export declare const calculateRowHeaderSize: (itemsLength: number, rowHeaderColumn?: RowHeaders, minWidth?: number) => number;

package/dist/types/utils/store.types.d.ts

@@ -0,0 +1,97 @@
+export interface Handlers<T> {
+    dispose: DisposeEventHandler[];
+    get: GetEventHandler<T>[];
+    reset: ResetEventHandler[];
+    set: SetEventHandler<T>[];
+}
+export type SetEventHandler<StoreType> = (key: keyof StoreType, newValue: any, oldValue: any) => void;
+export type GetEventHandler<StoreType> = (key: keyof StoreType) => void;
+export type ResetEventHandler = () => void;
+export type DisposeEventHandler = () => void;
+export interface OnHandler<StoreType> {
+    (eventName: 'set', callback: SetEventHandler<StoreType>): () => void;
+    (eventName: 'get', callback: GetEventHandler<StoreType>): () => void;
+    (eventName: 'dispose', callback: DisposeEventHandler): () => void;
+    (eventName: 'reset', callback: ResetEventHandler): () => void;
+}
+export interface OnChangeHandler<StoreType> {
+    <Key extends keyof StoreType>(propName: Key, cb: (newValue: StoreType[Key]) => void): () => void;
+}
+export interface Subscription<StoreType> {
+    dispose?(): void;
+    get?<KeyFromStoreType extends keyof StoreType>(key: KeyFromStoreType): void;
+    set?<KeyFromStoreType extends keyof StoreType>(key: KeyFromStoreType, newValue: StoreType[KeyFromStoreType], oldValue: StoreType[KeyFromStoreType]): void;
+    reset?(): void;
+}
+export interface Getter<T> {
+    <P extends keyof T>(propName: P & string): T[P];
+}
+export interface Setter<T> {
+    <P extends keyof T>(propName: P & string, value: T[P]): void;
+}
+export interface ObservableMap<T> {
+    /**
+     * Proxied object that will detect dependencies and call
+     * the subscriptions and computed properties.
+     *
+     * If available, it will detect from which Stencil Component
+     * it was called and rerender it when the property changes.
+     *
+     * Note: Proxy objects are not supported by IE11 (not even with a polyfill)
+     * so you need to use the store.get and store.set methods of the API if you wish to support IE11.
+     *
+     */
+    state: T;
+    /**
+     * Only useful if you need to support IE11.
+     *
+     * @example
+     * const { state, get } = createStore({ hola: 'hello', adios: 'goodbye' });
+     * console.log(state.hola); // If you don't need to support IE11, use this way.
+     * console.log(get('hola')); // If you need to support IE11, use this other way.
+     */
+    get: Getter<T>;
+    /**
+     * Only useful if you need to support IE11.
+     *
+     * @example
+     * const { state, get } = createStore({ hola: 'hello', adios: 'goodbye' });
+     * state.hola = 'ola'; // If you don't need to support IE11, use this way.
+     * set('hola', 'ola')); // If you need to support IE11, use this other way.
+     */
+    set: Setter<T>;
+    /**
+     * Register a event listener, you can listen to `set`, `get` and `reset` events.
+     *
+     * @example
+     * store.on('set', (prop, value) => {
+     *   console.log(`Prop ${prop} changed to: ${value}`);
+     * });
+     */
+    on: OnHandler<T>;
+    /**
+     * Easily listen for value changes of the specified key.
+     */
+    onChange: OnChangeHandler<T>;
+    /**
+     * Resets the state to its original state and
+     * signals a dispose event to all the plugins.
+     *
+     * This method is intended for plugins to reset
+     * all their internal state between tests.
+     */
+    dispose(): void;
+    /**
+     * Resets the state to its original state.
+     */
+    reset(): void;
+    /**
+     * Registers a subscription that will be called whenever the user gets, sets, or
+     * resets a value.
+     */
+    use(...plugins: Subscription<T>[]): () => void;
+    /**
+     * Force a rerender of the specified key, just like the value changed.
+     */
+    forceUpdate(key: keyof T): any;
+}

package/dist/types/utils/store.utils.d.ts

@@ -0,0 +1,10 @@
+import { ObservableMap, Subscription } from './store.types';
+export type Observable<T> = ObservableMap<T>;
+export type PluginSubscribe<T> = Subscription<T>;
+/**
+ * Sets the given data on the specified store.
+ *
+ * @param store - The store to set data on.
+ * @param data - The data to set on the store.
+ */
+export declare function setStore<T extends Record<string, any>>(store: ObservableMap<T>, data: Partial<T>): void;