lsp-grid 1.0.0

package/dist/collection/components/revoGrid/viewport.service.js

@@ -0,0 +1,237 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { EMPTY_INDEX } from "../../services/selection.store.connector";
+import { columnTypes, getSourceItem, getVisibleSourceItem, rowTypes } from "../../store/index";
+import { CONTENT_SLOT, FOOTER_SLOT, HEADER_SLOT, viewportDataPartition } from "./viewport.helpers";
+/** Collect Column data */
+function gatherColumnData(data) {
+    const colDimension = data.dimensions[data.colType].store;
+    const realWidth = colDimension.get('realSize');
+    const prop = {
+        contentWidth: realWidth,
+        class: data.colType,
+        contentHeight: data.contentHeight,
+        key: data.colType,
+        colType: data.colType,
+        onResizeviewport: data.onResizeviewport,
+        // set viewport size to real size
+        style: data.fixWidth ? { minWidth: `${realWidth}px` } : undefined,
+    };
+    const headerProp = {
+        colData: getVisibleSourceItem(data.colStore),
+        dimensionCol: colDimension,
+        type: data.colType,
+        groups: data.colStore.get('groups'),
+        groupingDepth: data.colStore.get('groupingDepth'),
+        resizeHandler: data.colType === 'colPinEnd' ? ['l'] : undefined,
+        onHeaderresize: data.onHeaderresize,
+    };
+    return {
+        prop,
+        type: data.colType,
+        position: data.position,
+        headerProp,
+        viewportCol: data.viewports[data.colType].store,
+    };
+}
+export default class ViewportService {
+    constructor(config, contentHeight) {
+        var _a, _b;
+        this.config = config;
+        (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeUpdate();
+        // ----------- Handle columns ----------- //
+        // Transform data from stores and apply it to different components
+        const columns = [];
+        let x = 0; // we increase x only if column present
+        columnTypes.forEach(val => {
+            const colStore = config.columnProvider.stores[val].store;
+            // only columns that have data show
+            if (!colStore.get('items').length) {
+                return;
+            }
+            const column = {
+                colType: val,
+                position: { x, y: 1 },
+                contentHeight,
+                // only central column has dynamic width
+                fixWidth: val !== 'rgCol',
+                viewports: config.viewportProvider.stores,
+                dimensions: config.dimensionProvider.stores,
+                rowStores: config.dataProvider.stores,
+                colStore,
+                onHeaderresize: e => this.onColumnResize(val, e, colStore),
+            };
+            if (val === 'rgCol') {
+                column.onResizeviewport = (e) => {
+                    var _a;
+                    const vpState = {
+                        clientSize: e.detail.size,
+                    };
+                    // virtual size will be handled by dimension provider if disabled
+                    if ((e.detail.dimension === 'rgRow' && !config.disableVirtualY)
+                        || (e.detail.dimension === 'rgCol' && !config.disableVirtualX)) {
+                        vpState.virtualSize = e.detail.size;
+                    }
+                    (_a = config.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, vpState);
+                };
+            }
+            const colData = gatherColumnData(column);
+            const columnSelectionStore = this.registerCol(colData.position.x, val);
+            // render per each column data collections vertically
+            const dataPorts = this.dataViewPort(column).reduce((r, rgRow) => {
+                // register selection store for Segment
+                const segmentSelection = this.registerSegment(rgRow.position);
+                segmentSelection.setLastCell(rgRow.lastCell);
+                // register selection store for Row
+                const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
+                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, selectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetrange: e => {
+                        segmentSelection.setRangeArea(e.detail);
+                    }, onSettemprange: e => segmentSelection.setTempArea(e.detail), onFocuscell: e => {
+                        // todo: multi focus
+                        segmentSelection.clearFocus();
+                        config.selectionStoreConnector.focus(segmentSelection, e.detail);
+                    } });
+                r.push(rowDef);
+                return r;
+            }, []);
+            columns.push(Object.assign(Object.assign({}, colData), { columnSelectionStore,
+                dataPorts }));
+            x++;
+        });
+        this.columns = columns;
+        // ----------- Handle columns end ----------- //
+        (_b = this.config.scrollingService) === null || _b === void 0 ? void 0 : _b.unregister();
+    }
+    onColumnResize(type, { detail }, store) {
+        var _a;
+        // apply to dimension provider
+        (_a = this.config.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, detail, true);
+        // set resize event
+        const changedItems = {};
+        for (const [i, size] of Object.entries(detail || {})) {
+            const virtualIndex = parseInt(i, 10);
+            const item = getSourceItem(store, virtualIndex);
+            if (item) {
+                changedItems[virtualIndex] = Object.assign(Object.assign({}, item), { size });
+            }
+        }
+        this.config.resize(changedItems);
+    }
+    /** register selection store for Segment */
+    registerSegment(position) {
+        return this.config.selectionStoreConnector.register(position);
+    }
+    /** register selection store for Row */
+    registerRow(y, type) {
+        return this.config.selectionStoreConnector.registerRow(y, type).store;
+    }
+    /** register selection store for Column */
+    registerCol(x, type) {
+        return this.config.selectionStoreConnector.registerColumn(x, type).store;
+    }
+    /** Collect Row data */
+    dataViewPort(data) {
+        const slots = {
+            rowPinStart: HEADER_SLOT,
+            rgRow: CONTENT_SLOT,
+            rowPinEnd: FOOTER_SLOT,
+        };
+        // y position for selection
+        let y = 0;
+        return rowTypes.reduce((result, type) => {
+            // filter out empty sources, we still need to return source to keep slot working
+            const isPresent = data.viewports[type].store.get('realCount') || type === 'rgRow';
+            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y: isPresent ? y : EMPTY_INDEX }) });
+            const partition = viewportDataPartition(rgCol, type, slots[type], type !== 'rgRow');
+            result.push(partition);
+            if (isPresent) {
+                y++;
+            }
+            return result;
+        }, []);
+    }
+    scrollToCell(cell) {
+        for (let key in cell) {
+            const coordinate = cell[key];
+            if (typeof coordinate === 'number') {
+                this.config.scrollingService.proxyScroll({
+                    dimension: key === 'x' ? 'rgCol' : 'rgRow',
+                    coordinate,
+                });
+            }
+        }
+    }
+    /**
+     * Clear current grid focus
+     */
+    clearFocused() {
+        this.config.selectionStoreConnector.clearAll();
+    }
+    clearEdit() {
+        this.config.selectionStoreConnector.setEdit(false);
+    }
+    /**
+     * Collect focused element data
+     */
+    getFocused() {
+        const focused = this.config.selectionStoreConnector.focusedStore;
+        if (!focused) {
+            return null;
+        }
+        // get column data
+        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+        const column = this.config.columnProvider.getColumn(focused.cell.x, colType);
+        // get row data
+        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+        const model = this.config.dataProvider.getModel(focused.cell.y, rowType);
+        return {
+            column,
+            model,
+            cell: focused.cell,
+            colType,
+            rowType,
+        };
+    }
+    getStoreCoordinateByType(colType, rowType) {
+        const stores = this.config.selectionStoreConnector.storesByType;
+        if (typeof stores[colType] === 'undefined' || typeof stores[rowType] === 'undefined') {
+            return;
+        }
+        return {
+            x: stores[colType],
+            y: stores[rowType],
+        };
+    }
+    setFocus(colType, rowType, start, end) {
+        var _a;
+        const coordinate = this.getStoreCoordinateByType(colType, rowType);
+        if (coordinate) {
+            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(coordinate, start, end);
+        }
+    }
+    getSelectedRange() {
+        const focused = this.config.selectionStoreConnector.focusedStore;
+        if (!focused) {
+            return null;
+        }
+        // get column data
+        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+        // get row data
+        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+        const range = focused.entity.store.get('range');
+        if (!range) {
+            return null;
+        }
+        return Object.assign(Object.assign({}, range), { colType,
+            rowType });
+    }
+    setEdit(rowIndex, colIndex, colType, rowType) {
+        var _a;
+        const coordinate = this.getStoreCoordinateByType(colType, rowType);
+        if (coordinate) {
+            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(coordinate, { x: colIndex, y: rowIndex });
+        }
+    }
+}
+//# sourceMappingURL=viewport.service.js.map

package/dist/collection/components/revoGrid/viewport.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.service.js","sourceRoot":"","sources":["../../../src/components/revoGrid/viewport.service.ts"],"names":[],"mappings":"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","sourcesContent":["import DimensionProvider from '../../services/dimension.provider';\r\nimport { type SelectionStoreConnector, EMPTY_INDEX } from '../../services/selection.store.connector';\r\nimport ViewportProvider from '../../services/viewport.provider';\r\nimport { columnTypes, DSourceState, getSourceItem, getVisibleSourceItem, rowTypes } from '@store';\r\nimport { OrdererService } from '../order/order-renderer';\r\nimport GridScrollingService from './viewport.scrolling.service';\r\nimport { CONTENT_SLOT, FOOTER_SLOT, HEADER_SLOT, viewportDataPartition, VPPartition } from './viewport.helpers';\r\n\r\nimport ColumnDataProvider from '../../services/column.data.provider';\r\nimport { DataProvider } from '../../services/data.provider';\r\nimport type {\r\n  AllDimensionType,\r\n  Cell,\r\n  ColumnRegular,\r\n  DimensionCols,\r\n  DimensionRows,\r\n  HeaderProperties,\r\n  RangeArea,\r\n  SlotType,\r\n  ViewportColumn,\r\n  ViewportData,\r\n  ViewportProperties,\r\n  ViewportProps,\r\n  ViewPortResizeEvent,\r\n  ViewportState,\r\n  ViewSettingSizeProp,\r\n} from '@type';\r\nimport { Observable } from '../../utils';\r\n\r\nexport type ResizeDetails = { [index: number]: ColumnRegular };\r\ntype Config = {\r\n  columnProvider: ColumnDataProvider;\r\n  dataProvider: DataProvider;\r\n  dimensionProvider: DimensionProvider;\r\n  viewportProvider: ViewportProvider;\r\n  scrollingService: GridScrollingService;\r\n  orderService: OrdererService;\r\n  selectionStoreConnector: SelectionStoreConnector;\r\n\r\n  disableVirtualX?: boolean;\r\n  disableVirtualY?: boolean;\r\n\r\n  resize(r: ResizeDetails): void;\r\n};\r\n\r\nexport type FocusedData = {\r\n  model: any;\r\n  cell: Cell;\r\n  colType: DimensionCols;\r\n  rowType: DimensionRows;\r\n  column?: ColumnRegular;\r\n};\r\n\r\n/** Collect Column data */\r\nfunction gatherColumnData(data: ViewportColumn) {\r\n  const colDimension = data.dimensions[data.colType].store;\r\n  const realWidth = colDimension.get('realSize');\r\n\r\n  const prop: ViewportProperties = {\r\n    contentWidth: realWidth,\r\n    class: data.colType,\r\n    contentHeight: data.contentHeight,\r\n    key: data.colType,\r\n    colType: data.colType,\r\n    onResizeviewport: data.onResizeviewport,\r\n    // set viewport size to real size\r\n    style: data.fixWidth ? { minWidth: `${realWidth}px` } : undefined,\r\n  };\r\n\r\n  const headerProp: HeaderProperties = {\r\n    colData: getVisibleSourceItem(data.colStore),\r\n    dimensionCol: colDimension,\r\n    type: data.colType,\r\n    groups: data.colStore.get('groups'),\r\n    groupingDepth: data.colStore.get('groupingDepth'),\r\n    resizeHandler: data.colType === 'colPinEnd' ? ['l'] : undefined,\r\n    onHeaderresize: data.onHeaderresize,\r\n  };\r\n\r\n  return {\r\n    prop,\r\n    type: data.colType,\r\n    position: data.position,\r\n    headerProp,\r\n    viewportCol: data.viewports[data.colType].store,\r\n  };\r\n}\r\n\r\nexport default class ViewportService {\r\n  readonly columns: ViewportProps[];\r\n  constructor(\r\n    private config: Config,\r\n    contentHeight: number,\r\n  ) {\r\n    this.config.selectionStoreConnector?.beforeUpdate();\r\n\r\n    // ----------- Handle columns ----------- //\r\n\r\n    // Transform data from stores and apply it to different components\r\n    const columns: ViewportProps[] = [];\r\n    let x = 0; // we increase x only if column present\r\n    columnTypes.forEach(val => {\r\n      const colStore = config.columnProvider.stores[val].store;\r\n      // only columns that have data show\r\n      if (!colStore.get('items').length) {\r\n        return;\r\n      }\r\n      const column: ViewportColumn = {\r\n        colType: val,\r\n        position: { x, y: 1 },\r\n\r\n        contentHeight,\r\n        // only central column has dynamic width\r\n        fixWidth: val !== 'rgCol',\r\n\r\n        viewports: config.viewportProvider.stores,\r\n        dimensions: config.dimensionProvider.stores,\r\n        rowStores: config.dataProvider.stores,\r\n\r\n        colStore,\r\n        onHeaderresize: e => this.onColumnResize(val, e, colStore),\r\n      };\r\n      if (val === 'rgCol') {\r\n        column.onResizeviewport = (e: CustomEvent<ViewPortResizeEvent>) => {\r\n          const vpState: Partial<ViewportState> = {\r\n            clientSize: e.detail.size,\r\n          };\r\n\r\n          // virtual size will be handled by dimension provider if disabled\r\n          if ((e.detail.dimension === 'rgRow' && !config.disableVirtualY)\r\n              || (e.detail.dimension === 'rgCol' && !config.disableVirtualX)) {\r\n                vpState.virtualSize = e.detail.size;\r\n          }\r\n          config.viewportProvider?.setViewport(e.detail.dimension, vpState);\r\n        };\r\n      }\r\n      const colData = gatherColumnData(column);\r\n      const columnSelectionStore = this.registerCol(colData.position.x, val);\r\n\r\n      // render per each column data collections vertically\r\n      const dataPorts = this.dataViewPort(column).reduce<ViewportData[]>(\r\n        (r, rgRow) => {\r\n          // register selection store for Segment\r\n          const segmentSelection = this.registerSegment(rgRow.position);\r\n          segmentSelection.setLastCell(rgRow.lastCell);\r\n\r\n          // register selection store for Row\r\n          const rowSelectionStore = this.registerRow(\r\n            rgRow.position.y,\r\n            rgRow.type,\r\n          );\r\n          const rowDef: ViewportData = {\r\n            colType: val,\r\n            ...rgRow,\r\n            rowSelectionStore,\r\n            selectionStore: segmentSelection.store,\r\n            ref: (e) =>\r\n              config.selectionStoreConnector.registerSection(e),\r\n            onSetrange: e => {\r\n              segmentSelection.setRangeArea(e.detail);\r\n            },\r\n            onSettemprange: e => segmentSelection.setTempArea(e.detail),\r\n            onFocuscell: e => {\r\n              // todo: multi focus\r\n              segmentSelection.clearFocus();\r\n              config.selectionStoreConnector.focus(segmentSelection, e.detail);\r\n            },\r\n          };\r\n          r.push(rowDef);\r\n          return r;\r\n        },\r\n        [],\r\n      );\r\n      columns.push({\r\n        ...colData,\r\n        columnSelectionStore,\r\n        dataPorts,\r\n      });\r\n      x++;\r\n    });\r\n    this.columns = columns;\r\n    // ----------- Handle columns end ----------- //\r\n\r\n    this.config.scrollingService?.unregister();\r\n  }\r\n\r\n  private onColumnResize(\r\n    type: DimensionCols,\r\n    { detail }: CustomEvent<ViewSettingSizeProp>,\r\n    store: Observable<DSourceState<ColumnRegular, DimensionCols>>,\r\n  ) {\r\n    // apply to dimension provider\r\n    this.config.dimensionProvider?.setCustomSizes(type, detail, true);\r\n\r\n    // set resize event\r\n    const changedItems: ResizeDetails = {};\r\n    for (const [i, size] of Object.entries(detail || {})) {\r\n      const virtualIndex = parseInt(i, 10);\r\n      const item = getSourceItem(store, virtualIndex);\r\n      if (item) {\r\n        changedItems[virtualIndex] = { ...item, size };\r\n      }\r\n    }\r\n    this.config.resize(changedItems);\r\n  }\r\n\r\n  /** register selection store for Segment */\r\n  private registerSegment(position: Cell) {\r\n    return this.config.selectionStoreConnector.register(position);\r\n  }\r\n\r\n  /** register selection store for Row */\r\n  private registerRow(y: number, type: DimensionRows) {\r\n    return this.config.selectionStoreConnector.registerRow(y, type).store;\r\n  }\r\n\r\n  /** register selection store for Column */\r\n  private registerCol(x: number, type: DimensionCols) {\r\n    return this.config.selectionStoreConnector.registerColumn(x, type).store;\r\n  }\r\n\r\n  /** Collect Row data */\r\n  private dataViewPort(data: ViewportColumn) {\r\n    const slots: { [key in DimensionRows]: SlotType } = {\r\n      rowPinStart: HEADER_SLOT,\r\n      rgRow: CONTENT_SLOT,\r\n      rowPinEnd: FOOTER_SLOT,\r\n    };\r\n\r\n    // y position for selection\r\n    let y = 0;\r\n    return rowTypes.reduce((result: VPPartition[], type) => {\r\n      // filter out empty sources, we still need to return source to keep slot working\r\n      const isPresent =\r\n        data.viewports[type].store.get('realCount') || type === 'rgRow';\r\n      const rgCol = {\r\n        ...data,\r\n        position: { ...data.position, y: isPresent ? y : EMPTY_INDEX },\r\n      };\r\n      const partition = viewportDataPartition(\r\n        rgCol,\r\n        type,\r\n        slots[type],\r\n        type !== 'rgRow', // is fixed row\r\n      );\r\n      result.push(partition);\r\n      if (isPresent) {\r\n        y++;\r\n      }\r\n      return result;\r\n    }, []);\r\n  }\r\n\r\n  scrollToCell(cell: Partial<Cell>) {\r\n    for (let key in cell) {\r\n      const coordinate = cell[key as keyof Cell];\r\n      if (typeof coordinate === 'number') {\r\n        this.config.scrollingService.proxyScroll({\r\n          dimension: key === 'x' ? 'rgCol' : 'rgRow',\r\n          coordinate,\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Clear current grid focus\r\n   */\r\n  clearFocused() {\r\n    this.config.selectionStoreConnector.clearAll();\r\n  }\r\n\r\n  clearEdit() {\r\n    this.config.selectionStoreConnector.setEdit(false);\r\n  }\r\n\r\n  /**\r\n   * Collect focused element data\r\n   */\r\n  getFocused(): FocusedData | null {\r\n    const focused = this.config.selectionStoreConnector.focusedStore;\r\n    if (!focused) {\r\n      return null;\r\n    }\r\n    // get column data\r\n    const colType =\r\n      this.config.selectionStoreConnector.storesXToType[focused.position.x];\r\n    const column = this.config.columnProvider.getColumn(\r\n      focused.cell.x,\r\n      colType,\r\n    );\r\n\r\n    // get row data\r\n    const rowType =\r\n      this.config.selectionStoreConnector.storesYToType[focused.position.y];\r\n    const model = this.config.dataProvider.getModel(focused.cell.y, rowType);\r\n    return {\r\n      column,\r\n      model,\r\n      cell: focused.cell,\r\n      colType,\r\n      rowType,\r\n    };\r\n  }\r\n\r\n  getStoreCoordinateByType(colType: DimensionCols, rowType: DimensionRows): Cell | undefined {\r\n    const stores = this.config.selectionStoreConnector.storesByType;\r\n    if (typeof stores[colType] === 'undefined' || typeof stores[rowType] === 'undefined') {\r\n      return;\r\n    }\r\n    return {\r\n      x: stores[colType],\r\n      y: stores[rowType],\r\n    };\r\n  }\r\n\r\n  setFocus(colType: string, rowType: string, start: Cell, end: Cell) {\r\n    const coordinate = this.getStoreCoordinateByType(colType as DimensionCols, rowType as DimensionRows);\r\n    if (coordinate) {\r\n      this.config.selectionStoreConnector?.focusByCell(\r\n        coordinate,\r\n        start,\r\n        end,\r\n      );\r\n    }\r\n  }\r\n\r\n  getSelectedRange(): RangeArea & AllDimensionType | null | undefined {\r\n\r\n    const focused = this.config.selectionStoreConnector.focusedStore;\r\n    if (!focused) {\r\n      return null;\r\n    }\r\n    // get column data\r\n    const colType =\r\n      this.config.selectionStoreConnector.storesXToType[focused.position.x];\r\n\r\n    // get row data\r\n    const rowType =\r\n      this.config.selectionStoreConnector.storesYToType[focused.position.y];\r\n\r\n    const range = focused.entity.store.get('range');\r\n    if (!range) {\r\n      return null;\r\n    }\r\n    return {\r\n      ...range,\r\n      colType,\r\n      rowType,\r\n    }\r\n  }\r\n\r\n  setEdit(\r\n    rowIndex: number,\r\n    colIndex: number,\r\n    colType: DimensionCols,\r\n    rowType: DimensionRows,\r\n  ) {\r\n    const coordinate = this.getStoreCoordinateByType(colType as DimensionCols, rowType as DimensionRows);\r\n    if (coordinate) {\r\n      this.config.selectionStoreConnector?.setEditByCell(\r\n        coordinate,\r\n        { x: colIndex, y: rowIndex },\r\n      );\r\n    }\r\n  }\r\n}\r\n"]}

package/dist/collection/components/rowHeaders/revogr-row-headers.js

@@ -0,0 +1,291 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { h, Host } from "@stencil/core";
+import { ViewportStore, DataStore } from "../../store/index";
+import { ROW_HEADER_TYPE } from "../../utils/consts";
+import { RowHeaderRender } from "./row-header-render";
+import { calculateRowHeaderSize } from "../../utils/row-header-utils";
+import { HEADER_SLOT } from "../revoGrid/viewport.helpers";
+/**
+ * Row headers component
+ * Visible on the left side of the table
+ */
+export class RevogrRowHeaders {
+    constructor() {
+        /**
+         * Prevent rendering until job is done.
+         * Can be used for initial rendering performance improvement.
+         * When several plugins require initial rendering this will prevent double initial rendering.
+         */
+        this.jobsBeforeRender = [];
+    }
+    render() {
+        const dataViews = [];
+        const viewport = new ViewportStore('colPinStart');
+        /** render viewports rows */
+        let totalLength = 1;
+        // todo: this part could be optimized to avoid to often re-render dataPorts can be cached
+        for (let data of this.dataPorts) {
+            const itemCount = data.dataStore.get('items').length;
+            // initiate row data
+            const dataStore = new DataStore(data.type, Object.assign({}, data.dataStore.state));
+            // initiate column data
+            const colData = new DataStore('colPinStart');
+            const column = Object.assign({ cellTemplate: RowHeaderRender(totalLength) }, this.rowHeaderColumn);
+            colData.updateData([column]);
+            dataViews.push(h("revogr-data", Object.assign({}, data, { colType: "rowHeaders", jobsBeforeRender: this.jobsBeforeRender, rowClass: this.rowClass, dataStore: dataStore.store, colData: colData.store, viewportCol: viewport.store, readonly: true, range: false })));
+            totalLength += itemCount;
+        }
+        const colSize = calculateRowHeaderSize(totalLength, this.rowHeaderColumn);
+        viewport.setViewport({
+            realCount: 1,
+            virtualSize: 0,
+            items: [
+                {
+                    size: colSize,
+                    start: 0,
+                    end: colSize,
+                    itemIndex: 0,
+                },
+            ],
+        });
+        const viewportScroll = {
+            contentHeight: this.height,
+            contentWidth: 0,
+            style: { minWidth: `${colSize}px` },
+            colType: 'rowHeaders',
+            ref: (el) => this.elementToScroll.emit(el),
+            onScrollviewport: (e) => this.scrollViewport.emit(e.detail),
+        };
+        const viewportHeader = Object.assign(Object.assign({}, this.headerProp), {
+            // groups not present on row headers
+            groups: [], colData: typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [], viewportCol: viewport.store, canResize: false, type: ROW_HEADER_TYPE,
+            // parent,
+            slot: HEADER_SLOT
+        });
+        return (h(Host, { class: { [ROW_HEADER_TYPE]: true }, key: ROW_HEADER_TYPE }, h("revogr-viewport-scroll", Object.assign({ key: '28984c9e3e4e84afc0acf66093f4f4f8b5846098' }, viewportScroll, { "row-header": true }), h("revogr-header", Object.assign({ key: 'c80b058075fdb384039a58827c2c498acdbe1cdf' }, viewportHeader)), dataViews)));
+    }
+    static get is() { return "revogr-row-headers"; }
+    static get properties() {
+        return {
+            "height": {
+                "type": "number",
+                "attribute": "height",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header height to setup row headers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dataPorts": {
+                "type": "unknown",
+                "attribute": "data-ports",
+                "mutable": false,
+                "complexType": {
+                    "original": "ViewportData[]",
+                    "resolved": "ViewportData[]",
+                    "references": {
+                        "ViewportData": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ViewportData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Viewport data"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "headerProp": {
+                "type": "unknown",
+                "attribute": "header-prop",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, any>",
+                    "resolved": "{ [x: string]: any; }",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header props"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "rowClass": {
+                "type": "string",
+                "attribute": "row-class",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row class"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "resize": {
+                "type": "boolean",
+                "attribute": "resize",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable resize"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "rowHeaderColumn": {
+                "type": "unknown",
+                "attribute": "row-header-column",
+                "mutable": false,
+                "complexType": {
+                    "original": "RowHeaders",
+                    "resolved": "RowHeaders",
+                    "references": {
+                        "RowHeaders": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::RowHeaders"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row header column"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "additionalData": {
+                "type": "any",
+                "attribute": "additional-data",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional data to pass to renderer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "jobsBeforeRender": {
+                "type": "unknown",
+                "attribute": "jobs-before-render",
+                "mutable": false,
+                "complexType": {
+                    "original": "Promise<any>[]",
+                    "resolved": "Promise<any>[]",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prevent rendering until job is done.\r\nCan be used for initial rendering performance improvement.\r\nWhen several plugins require initial rendering this will prevent double initial rendering."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scrollViewport",
+                "name": "scrollview",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Scroll viewport"
+                },
+                "complexType": {
+                    "original": "ViewPortScrollEvent",
+                    "resolved": "{ dimension: DimensionType; coordinate: number; viewportRows?: VirtualPositionItem[] | undefined; delta?: number | undefined; outside?: boolean | undefined; }",
+                    "references": {
+                        "ViewPortScrollEvent": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ViewPortScrollEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "elementToScroll",
+                "name": "ref",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Register element to scroll"
+                },
+                "complexType": {
+                    "original": "ElementScroll",
+                    "resolved": "ElementScroll",
+                    "references": {
+                        "ElementScroll": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ElementScroll"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=revogr-row-headers.js.map

package/dist/collection/components/rowHeaders/revogr-row-headers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revogr-row-headers.js","sourceRoot":"","sources":["../../../src/components/rowHeaders/revogr-row-headers.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Host, Component, Prop, Event, EventEmitter } from '@stencil/core';\r\nimport type { JSXBase } from '@stencil/core/internal';\r\n\r\nimport { ViewportStore, DataStore } from '@store';\r\nimport type {\r\n  RowHeaders,\r\n  ViewPortScrollEvent,\r\n  DataType,\r\n  ColumnRegular,\r\n  ViewportData,\r\n  ElementScroll,\r\n  DimensionRows,\r\n  DimensionCols,\r\n} from '@type';\r\n\r\nimport { ROW_HEADER_TYPE } from '../../utils/consts';\r\nimport { RowHeaderRender } from './row-header-render';\r\nimport { calculateRowHeaderSize } from '../../utils/row-header-utils';\r\nimport { HEADER_SLOT } from '../revoGrid/viewport.helpers';\r\nimport { type JSX } from '../../components';\r\n\r\n/**\r\n * Row headers component\r\n * Visible on the left side of the table\r\n */\r\n\r\n@Component({ tag: 'revogr-row-headers' })\r\nexport class RevogrRowHeaders {\r\n  // #region Properties\r\n  /**\r\n   * Header height to setup row headers\r\n   */\r\n  @Prop() height: number;\r\n\r\n  /**\r\n   * Viewport data\r\n   */\r\n  @Prop() dataPorts: ViewportData[];\r\n  /**\r\n   * Header props\r\n   */\r\n  @Prop() headerProp: Record<string, any>;\r\n\r\n  /**\r\n   * Row class\r\n   */\r\n  @Prop() rowClass: string;\r\n\r\n  /**\r\n   * Enable resize\r\n   */\r\n  @Prop() resize: boolean;\r\n  /**\r\n   * Row header column\r\n   */\r\n  @Prop() rowHeaderColumn: RowHeaders;\r\n  /**\r\n   * Additional data to pass to renderer\r\n   */\r\n  @Prop() additionalData: any;\r\n  /**\r\n   * Prevent rendering until job is done.\r\n   * Can be used for initial rendering performance improvement.\r\n   * When several plugins require initial rendering this will prevent double initial rendering.\r\n   */\r\n  @Prop() jobsBeforeRender: Promise<any>[] = [];\r\n  // #endregion\r\n\r\n  /**\r\n   * Scroll viewport\r\n   */\r\n  @Event({ eventName: 'scrollview', bubbles: false })\r\n  scrollViewport: EventEmitter<ViewPortScrollEvent>;\r\n  /**\r\n   * Register element to scroll\r\n   */\r\n  @Event({ eventName: 'ref', bubbles: false })\r\n  elementToScroll: EventEmitter<ElementScroll>;\r\n\r\n  render() {\r\n    const dataViews: HTMLElement[] = [];\r\n    const viewport = new ViewportStore('colPinStart');\r\n\r\n    /** render viewports rows */\r\n    let totalLength = 1;\r\n    // todo: this part could be optimized to avoid to often re-render dataPorts can be cached\r\n    for (let data of this.dataPorts) {\r\n      const itemCount = data.dataStore.get('items').length;\r\n\r\n      // initiate row data\r\n      const dataStore = new DataStore<DataType, DimensionRows>(data.type, {\r\n        ...data.dataStore.state,\r\n      });\r\n\r\n      // initiate column data\r\n      const colData = new DataStore<ColumnRegular, DimensionCols>(\r\n        'colPinStart',\r\n      );\r\n      const column: ColumnRegular = {\r\n        cellTemplate: RowHeaderRender(totalLength),\r\n        ...this.rowHeaderColumn,\r\n      };\r\n      colData.updateData([column]);\r\n      dataViews.push(\r\n        <revogr-data\r\n          {...data}\r\n          colType=\"rowHeaders\"\r\n          jobsBeforeRender={this.jobsBeforeRender}\r\n          rowClass={this.rowClass}\r\n          dataStore={dataStore.store}\r\n          colData={colData.store}\r\n          viewportCol={viewport.store}\r\n          readonly={true}\r\n          range={false}\r\n        />,\r\n      );\r\n      totalLength += itemCount;\r\n    }\r\n\r\n    const colSize = calculateRowHeaderSize(totalLength, this.rowHeaderColumn);\r\n    viewport.setViewport({\r\n      realCount: 1,\r\n      virtualSize: 0,\r\n      items: [\r\n        {\r\n          size: colSize,\r\n          start: 0,\r\n          end: colSize,\r\n          itemIndex: 0,\r\n        },\r\n      ],\r\n    });\r\n\r\n    const viewportScroll: JSX.RevogrViewportScroll &\r\n      JSXBase.HTMLAttributes<HTMLRevogrViewportScrollElement> = {\r\n      contentHeight: this.height,\r\n      contentWidth: 0,\r\n      style: { minWidth: `${colSize}px` },\r\n      colType: 'rowHeaders',\r\n      ref: (el) => this.elementToScroll.emit(el),\r\n      onScrollviewport: (e: CustomEvent) => this.scrollViewport.emit(e.detail),\r\n    };\r\n    const viewportHeader: JSX.RevogrHeader & { slot: string } = {\r\n      ...this.headerProp,\r\n      // groups not present on row headers\r\n      groups: [],\r\n      colData:\r\n        typeof this.rowHeaderColumn === 'object' ? [this.rowHeaderColumn] : [],\r\n      viewportCol: viewport.store,\r\n      canResize: false,\r\n      type: ROW_HEADER_TYPE,\r\n      // parent,\r\n      slot: HEADER_SLOT,\r\n    };\r\n    return (\r\n      <Host class={{ [ROW_HEADER_TYPE]: true }} key={ROW_HEADER_TYPE}>\r\n        <revogr-viewport-scroll {...viewportScroll} row-header={true}>\r\n          <revogr-header {...viewportHeader} />\r\n          {dataViews}\r\n        </revogr-viewport-scroll>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/rowHeaders/row-header-render.js

@@ -0,0 +1,5 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+export const RowHeaderRender = s => (__, { rowIndex: i }) => s + i;
+//# sourceMappingURL=row-header-render.js.map

package/dist/collection/components/rowHeaders/row-header-render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-header-render.js","sourceRoot":"","sources":["../../../src/components/rowHeaders/row-header-render.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,eAAe,GAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC","sourcesContent":["import type { VNode } from '@stencil/core';\r\nimport type { HyperFunc } from '@type';\r\n\r\ntype HeaderRender = {\r\n  (start: number): (h: HyperFunc<VNode>, e: { rowIndex: number }) => number;\r\n};\r\nexport const RowHeaderRender: HeaderRender = s => (__, { rowIndex: i }) => s + i;\r\n"]}