lsp-grid 1.0.0

package/dist/collection/components/data/column.service.js

@@ -0,0 +1,293 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { getSourceItem, getVisibleSourceItem } from "../../store/index";
+import { CELL_CLASS, DISABLED_CLASS, getCellRaw, getCellData, } from "../../utils";
+import { getRange } from "../../store/index";
+import { isGroupingColumn } from "../../plugins/groupingRow/grouping.service";
+import slice from "lodash/slice";
+export function getCellEditor(column, editors = {}) {
+    const editor = column === null || column === void 0 ? void 0 : column.editor;
+    if (!editor) {
+        return undefined;
+    }
+    // reference
+    if (typeof editor === 'string') {
+        return editors[editor];
+    }
+    return editor;
+}
+export default class ColumnService {
+    get columns() {
+        return getVisibleSourceItem(this.source);
+    }
+    constructor(dataStore, source) {
+        this.dataStore = dataStore;
+        this.source = source;
+        this.unsubscribe = [];
+        this.hasGrouping = false;
+        this.unsubscribe.push(source.onChange('source', s => this.checkGrouping(s)));
+        this.checkGrouping(source.get('source'));
+        this.type = source.get('type');
+    }
+    checkGrouping(cols) {
+        for (let rgCol of cols) {
+            if (isGroupingColumn(rgCol)) {
+                this.hasGrouping = true;
+                return;
+            }
+            this.hasGrouping = false;
+        }
+    }
+    isReadOnly(r, c) {
+        var _a;
+        const readOnly = (_a = this.columns[c]) === null || _a === void 0 ? void 0 : _a.readonly;
+        if (typeof readOnly === 'function') {
+            const data = this.rowDataModel(r, c);
+            return readOnly(data);
+        }
+        return !!readOnly;
+    }
+    mergeProperties(r, c, defaultProps, schemaModel) {
+        var _a, _b;
+        const props = Object.assign({}, defaultProps);
+        props.class = Object.assign(Object.assign({}, (typeof props.class === 'string'
+            ? { [props.class]: true }
+            : props.class)), { [CELL_CLASS]: true, [DISABLED_CLASS]: this.isReadOnly(r, c) });
+        const extra = (_b = (_a = schemaModel.column) === null || _a === void 0 ? void 0 : _a.cellProperties) === null || _b === void 0 ? void 0 : _b.call(_a, schemaModel);
+        if (!extra) {
+            return props;
+        }
+        return doPropMerge(props, extra);
+    }
+    getRowClass(r, prop) {
+        const model = getSourceItem(this.dataStore, r) || {};
+        return model[prop] || '';
+    }
+    getSaveData(rowIndex, colIndex, val) {
+        const data = this.rowDataModel(rowIndex, colIndex);
+        if (typeof val === 'undefined') {
+            val = getCellData(data.value);
+        }
+        return Object.assign(Object.assign({}, data), { val });
+    }
+    /**
+     * Get cell data model for given rowIndex and colIndex
+     * Used to pass data to editor/renderer
+     */
+    rowDataModel(rowIndex, colIndex) {
+        const column = this.columns[colIndex];
+        const prop = column === null || column === void 0 ? void 0 : column.prop;
+        const model = getSourceItem(this.dataStore, rowIndex) || {};
+        const type = this.dataStore.get('type');
+        return {
+            prop,
+            model,
+            data: this.dataStore.get('source'),
+            column,
+            rowIndex,
+            colIndex,
+            colType: this.type,
+            type,
+            value: getCellRaw(model, column),
+        };
+    }
+    getRangeData(d, columns) {
+        var _a;
+        const changed = {};
+        // get original length sizes
+        const copyColLength = d.oldRange.x1 - d.oldRange.x + 1;
+        const copyRowLength = d.oldRange.y1 - d.oldRange.y + 1;
+        const mapping = {};
+        // rows
+        for (let rowIndex = d.newRange.y, i = 0; rowIndex < d.newRange.y1 + 1; rowIndex++, i++) {
+            // copy original data link
+            const oldRowIndex = d.oldRange.y + (i % copyRowLength);
+            const copyRow = getSourceItem(this.dataStore, oldRowIndex) || {};
+            // columns
+            for (let colIndex = d.newRange.x, j = 0; colIndex < d.newRange.x1 + 1; colIndex++, j++) {
+                // check if old range area
+                if (rowIndex >= d.oldRange.y &&
+                    rowIndex <= d.oldRange.y1 &&
+                    colIndex >= d.oldRange.x &&
+                    colIndex <= d.oldRange.x1) {
+                    continue;
+                }
+                // requested column beyond range
+                if (!this.columns[colIndex]) {
+                    continue;
+                }
+                const prop = (_a = this.columns[colIndex]) === null || _a === void 0 ? void 0 : _a.prop;
+                const copyColIndex = d.oldRange.x + (j % copyColLength);
+                const copyColumnProp = columns[copyColIndex].prop;
+                /** if can write */
+                if (!this.isReadOnly(rowIndex, colIndex)) {
+                    /** to show before save */
+                    if (!changed[rowIndex]) {
+                        changed[rowIndex] = {};
+                    }
+                    changed[rowIndex][prop] = copyRow[copyColumnProp];
+                    /** Generate mapping object */
+                    if (!mapping[rowIndex]) {
+                        mapping[rowIndex] = {};
+                    }
+                    mapping[rowIndex][prop] = {
+                        colIndex: copyColIndex,
+                        colProp: copyColumnProp,
+                        rowIndex: oldRowIndex,
+                    };
+                }
+            }
+        }
+        return {
+            changed,
+            mapping,
+        };
+    }
+    getTransformedDataToApply(start, data) {
+        const changed = {};
+        const copyRowLength = data.length;
+        const colLength = this.columns.length;
+        const rowLength = this.dataStore.get('items').length;
+        // rows
+        let rowIndex = start.y;
+        let maxCol = 0;
+        for (let i = 0; rowIndex < rowLength && i < copyRowLength; rowIndex++, i++) {
+            // copy original data link
+            const copyRow = data[i % copyRowLength];
+            const copyColLength = (copyRow === null || copyRow === void 0 ? void 0 : copyRow.length) || 0;
+            // columns
+            let colIndex = start.x;
+            for (let j = 0; colIndex < colLength && j < copyColLength; colIndex++, j++) {
+                const p = this.columns[colIndex].prop;
+                const currentCol = j % colLength;
+                /** if can write */
+                if (!this.isReadOnly(rowIndex, colIndex)) {
+                    /** to show before save */
+                    if (!changed[rowIndex]) {
+                        changed[rowIndex] = {};
+                    }
+                    changed[rowIndex][p] = copyRow[currentCol];
+                }
+            }
+            maxCol = Math.max(maxCol, colIndex - 1);
+        }
+        const range = getRange(start, {
+            y: rowIndex - 1,
+            x: maxCol,
+        });
+        return {
+            changed,
+            range,
+        };
+    }
+    getRangeStaticData(d, value) {
+        const changed = {};
+        // rows
+        for (let rowIndex = d.y, i = 0; rowIndex < d.y1 + 1; rowIndex++, i++) {
+            // columns
+            for (let colIndex = d.x, j = 0; colIndex < d.x1 + 1; colIndex++, j++) {
+                // requested column beyond range
+                if (!this.columns[colIndex]) {
+                    continue;
+                }
+                const p = this.columns[colIndex].prop;
+                /** if can write */
+                if (!this.isReadOnly(rowIndex, colIndex)) {
+                    /** to show before save */
+                    if (!changed[rowIndex]) {
+                        changed[rowIndex] = {};
+                    }
+                    changed[rowIndex][p] = value;
+                }
+            }
+        }
+        return changed;
+    }
+    getRangeTransformedToProps(d, store) {
+        var _a;
+        const area = [];
+        const type = this.dataStore.get('type');
+        // rows
+        for (let rowIndex = d.y, i = 0; rowIndex < d.y1 + 1; rowIndex++, i++) {
+            // columns
+            for (let colIndex = d.x, j = 0; colIndex < d.x1 + 1; colIndex++, j++) {
+                const prop = (_a = this.columns[colIndex]) === null || _a === void 0 ? void 0 : _a.prop;
+                area.push({
+                    prop,
+                    rowIndex,
+                    colIndex,
+                    model: getSourceItem(store, rowIndex),
+                    type,
+                    colType: this.type,
+                });
+            }
+        }
+        return area;
+    }
+    copyRangeArray(range, store) {
+        const cols = [...this.columns];
+        const props = slice(cols, range.x, range.x1 + 1).map(v => v.prop);
+        const toCopy = [];
+        const mapping = {};
+        // rows indexes
+        for (let i = range.y; i <= range.y1; i++) {
+            const rgRow = [];
+            mapping[i] = {};
+            // columns indexes
+            for (let prop of props) {
+                const item = getSourceItem(store, i);
+                // if no item - skip
+                if (!item) {
+                    continue;
+                }
+                const val = item[prop];
+                rgRow.push(val);
+                mapping[i][prop] = val;
+            }
+            toCopy.push(rgRow);
+        }
+        return {
+            data: toCopy,
+            mapping,
+        };
+    }
+    destroy() {
+        this.unsubscribe.forEach(f => f());
+    }
+}
+/**
+ * Checks if the given rowDrag is a service for dragging rows.
+ */
+export function isRowDragService(rowDrag, model) {
+    if (typeof rowDrag === 'function') {
+        return rowDrag(model);
+    }
+    return !!rowDrag;
+}
+function mergeClasses(class1 = {}, class2 = {}) {
+    if (typeof class1 === 'string') {
+        class1 = { [class1]: true };
+    }
+    if (typeof class2 === 'string') {
+        class2 = { [class2]: true };
+    }
+    return Object.assign(Object.assign({}, class1), class2);
+}
+export function doPropMerge(existing, extra) {
+    // if className is provided - remove it from props it messing with stencil
+    if (extra.className) {
+        extra.class = mergeClasses(extra.class, extra.className);
+        delete extra.className;
+    }
+    let props = Object.assign(Object.assign({}, extra), existing);
+    // extend existing props
+    if (extra.class) {
+        props.class = mergeClasses(props.class, extra.class);
+    }
+    if (extra.style) {
+        props.style = Object.assign(Object.assign({}, extra.style), props.style);
+    }
+    return props;
+}
+//# sourceMappingURL=column.service.js.map

package/dist/collection/components/data/column.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.service.js","sourceRoot":"","sources":["../../../src/components/data/column.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { DSourceState, getSourceItem, getVisibleSourceItem } from '@store';\r\nimport {\r\n  Observable,\r\n  CELL_CLASS,\r\n  DISABLED_CLASS,\r\n  getCellRaw,\r\n  getCellData,\r\n} from '../../utils';\r\nimport { getRange } from '@store';\r\n\r\nimport { isGroupingColumn } from '../../plugins/groupingRow/grouping.service';\r\nimport slice from 'lodash/slice';\r\nimport {\r\n  DimensionCols,\r\n  DimensionRows,\r\n  RowDrag,\r\n  ColumnRegular,\r\n  DataType,\r\n  CellProps,\r\n  ColumnDataSchemaModel,\r\n  ColumnProp,\r\n  DataLookup,\r\n  DataFormat,\r\n  ChangedRange,\r\n  OldNewRangeMapping,\r\n  Cell,\r\n  RangeArea,\r\n  BeforeSaveDataDetails,\r\n  EditorCtr,\r\n  Editors,\r\n  CellTemplateProp,\r\n} from '@type';\r\nimport { JSXBase } from '@stencil/core/internal';\r\n\r\nexport type ColumnStores = {\r\n  [T in DimensionCols]: Observable<DSourceState<ColumnRegular, DimensionCols>>;\r\n};\r\nexport type RowStores = {\r\n  [T in DimensionRows]: Observable<DSourceState<DataType, DimensionRows>>;\r\n};\r\n\r\nexport function getCellEditor(\r\n  column: Pick<ColumnRegular, 'editor'> | undefined,\r\n  editors: Editors = {},\r\n): EditorCtr | undefined {\r\n  const editor = column?.editor;\r\n  if (!editor) {\r\n    return undefined;\r\n  }\r\n  // reference\r\n  if (typeof editor === 'string') {\r\n    return editors[editor];\r\n  }\r\n  return editor;\r\n}\r\n\r\nexport default class ColumnService {\r\n  private unsubscribe: { (): void }[] = [];\r\n  get columns(): ColumnRegular[] {\r\n    return getVisibleSourceItem(this.source);\r\n  }\r\n\r\n  hasGrouping = false;\r\n  type: DimensionCols;\r\n\r\n  constructor(\r\n    private dataStore: Observable<DSourceState<DataType, DimensionRows>>,\r\n    private source: Observable<DSourceState<ColumnRegular, DimensionCols>>,\r\n  ) {\r\n    this.unsubscribe.push(\r\n      source.onChange('source', s => this.checkGrouping(s)),\r\n    );\r\n    this.checkGrouping(source.get('source'));\r\n    this.type = source.get('type');\r\n  }\r\n\r\n  private checkGrouping(cols: ColumnRegular[]) {\r\n    for (let rgCol of cols) {\r\n      if (isGroupingColumn(rgCol)) {\r\n        this.hasGrouping = true;\r\n        return;\r\n      }\r\n      this.hasGrouping = false;\r\n    }\r\n  }\r\n\r\n  isReadOnly(r: number, c: number) {\r\n    const readOnly = this.columns[c]?.readonly;\r\n    if (typeof readOnly === 'function') {\r\n      const data = this.rowDataModel(r, c);\r\n      return readOnly(data);\r\n    }\r\n    return !!readOnly;\r\n  }\r\n\r\n  mergeProperties(\r\n    r: number,\r\n    c: number,\r\n    defaultProps: CellProps,\r\n    schemaModel: CellTemplateProp,\r\n  ): CellProps {\r\n    const props: CellProps = {\r\n      ...defaultProps,\r\n    };\r\n    props.class = {\r\n      ...(typeof props.class === 'string'\r\n        ? { [props.class]: true }\r\n        : props.class),\r\n      [CELL_CLASS]: true,\r\n      [DISABLED_CLASS]: this.isReadOnly(r, c),\r\n    };\r\n\r\n    const extra = schemaModel.column?.cellProperties?.(schemaModel);\r\n    if (!extra) {\r\n      return props;\r\n    }\r\n    return doPropMerge(props, extra);\r\n  }\r\n\r\n  getRowClass(r: number, prop: string): string {\r\n    const model = getSourceItem(this.dataStore, r) || {};\r\n    return model[prop] || '';\r\n  }\r\n\r\n  getSaveData(\r\n    rowIndex: number,\r\n    colIndex: number,\r\n    val?: string,\r\n  ): BeforeSaveDataDetails {\r\n    const data = this.rowDataModel(rowIndex, colIndex);\r\n    if (typeof val === 'undefined') {\r\n      val = getCellData(data.value);\r\n    }\r\n    return {\r\n      ...data,\r\n      val,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Get cell data model for given rowIndex and colIndex\r\n   * Used to pass data to editor/renderer\r\n   */\r\n  rowDataModel(rowIndex: number, colIndex: number): ColumnDataSchemaModel {\r\n    const column = this.columns[colIndex];\r\n    const prop = column?.prop;\r\n    const model = getSourceItem(this.dataStore, rowIndex) || {};\r\n    const type = this.dataStore.get('type');\r\n    return {\r\n      prop,\r\n      model,\r\n      data: this.dataStore.get('source'),\r\n      column,\r\n      rowIndex,\r\n      colIndex,\r\n      colType: this.type,\r\n      type,\r\n      value: getCellRaw(model, column),\r\n    };\r\n  }\r\n\r\n  getRangeData(\r\n    d: ChangedRange,\r\n    columns: ColumnRegular[],\r\n  ): {\r\n    changed: DataLookup;\r\n    mapping: OldNewRangeMapping;\r\n  } {\r\n    const changed: DataLookup = {};\r\n\r\n    // get original length sizes\r\n    const copyColLength = d.oldRange.x1 - d.oldRange.x + 1;\r\n    const copyRowLength = d.oldRange.y1 - d.oldRange.y + 1;\r\n    const mapping: OldNewRangeMapping = {};\r\n\r\n    // rows\r\n    for (\r\n      let rowIndex = d.newRange.y, i = 0;\r\n      rowIndex < d.newRange.y1 + 1;\r\n      rowIndex++, i++\r\n    ) {\r\n      // copy original data link\r\n      const oldRowIndex = d.oldRange.y + (i % copyRowLength);\r\n      const copyRow = getSourceItem(this.dataStore, oldRowIndex) || {};\r\n\r\n      // columns\r\n      for (\r\n        let colIndex = d.newRange.x, j = 0;\r\n        colIndex < d.newRange.x1 + 1;\r\n        colIndex++, j++\r\n      ) {\r\n        // check if old range area\r\n        if (\r\n          rowIndex >= d.oldRange.y &&\r\n          rowIndex <= d.oldRange.y1 &&\r\n          colIndex >= d.oldRange.x &&\r\n          colIndex <= d.oldRange.x1\r\n        ) {\r\n          continue;\r\n        }\r\n\r\n        // requested column beyond range\r\n        if (!this.columns[colIndex]) {\r\n          continue;\r\n        }\r\n        const prop = this.columns[colIndex]?.prop;\r\n        const copyColIndex = d.oldRange.x + (j % copyColLength);\r\n        const copyColumnProp = columns[copyColIndex].prop;\r\n\r\n        /** if can write */\r\n        if (!this.isReadOnly(rowIndex, colIndex)) {\r\n          /** to show before save */\r\n          if (!changed[rowIndex]) {\r\n            changed[rowIndex] = {};\r\n          }\r\n          changed[rowIndex][prop] = copyRow[copyColumnProp];\r\n          /** Generate mapping object */\r\n          if (!mapping[rowIndex]) {\r\n            mapping[rowIndex] = {};\r\n          }\r\n          mapping[rowIndex][prop] = {\r\n            colIndex: copyColIndex,\r\n            colProp: copyColumnProp,\r\n            rowIndex: oldRowIndex,\r\n          };\r\n        }\r\n      }\r\n    }\r\n    return {\r\n      changed,\r\n      mapping,\r\n    };\r\n  }\r\n\r\n  getTransformedDataToApply(\r\n    start: Cell,\r\n    data: DataFormat[][],\r\n  ): {\r\n    changed: DataLookup;\r\n    range: RangeArea | null;\r\n  } {\r\n    const changed: DataLookup = {};\r\n    const copyRowLength = data.length;\r\n    const colLength = this.columns.length;\r\n    const rowLength = this.dataStore.get('items').length;\r\n    // rows\r\n    let rowIndex = start.y;\r\n    let maxCol = 0;\r\n    for (\r\n      let i = 0;\r\n      rowIndex < rowLength && i < copyRowLength;\r\n      rowIndex++, i++\r\n    ) {\r\n      // copy original data link\r\n      const copyRow = data[i % copyRowLength];\r\n      const copyColLength = copyRow?.length || 0;\r\n      // columns\r\n      let colIndex = start.x;\r\n      for (\r\n        let j = 0;\r\n        colIndex < colLength && j < copyColLength;\r\n        colIndex++, j++\r\n      ) {\r\n        const p = this.columns[colIndex].prop;\r\n        const currentCol = j % colLength;\r\n\r\n        /** if can write */\r\n        if (!this.isReadOnly(rowIndex, colIndex)) {\r\n          /** to show before save */\r\n          if (!changed[rowIndex]) {\r\n            changed[rowIndex] = {};\r\n          }\r\n          changed[rowIndex][p] = copyRow[currentCol];\r\n        }\r\n      }\r\n      maxCol = Math.max(maxCol, colIndex - 1);\r\n    }\r\n    const range = getRange(start, {\r\n      y: rowIndex - 1,\r\n      x: maxCol,\r\n    });\r\n    return {\r\n      changed,\r\n      range,\r\n    };\r\n  }\r\n\r\n  getRangeStaticData(d: RangeArea, value: DataFormat): DataLookup {\r\n    const changed: DataLookup = {};\r\n\r\n    // rows\r\n    for (let rowIndex = d.y, i = 0; rowIndex < d.y1 + 1; rowIndex++, i++) {\r\n      // columns\r\n      for (let colIndex = d.x, j = 0; colIndex < d.x1 + 1; colIndex++, j++) {\r\n        // requested column beyond range\r\n        if (!this.columns[colIndex]) {\r\n          continue;\r\n        }\r\n        const p = this.columns[colIndex].prop;\r\n\r\n        /** if can write */\r\n        if (!this.isReadOnly(rowIndex, colIndex)) {\r\n          /** to show before save */\r\n          if (!changed[rowIndex]) {\r\n            changed[rowIndex] = {};\r\n          }\r\n          changed[rowIndex][p] = value;\r\n        }\r\n      }\r\n    }\r\n    return changed;\r\n  }\r\n\r\n  getRangeTransformedToProps(\r\n    d: RangeArea,\r\n    store: Observable<DSourceState<DataType, DimensionRows>>,\r\n  ) {\r\n    const area: {\r\n      prop: ColumnProp;\r\n      rowIndex: number;\r\n      colIndex: number;\r\n      model?: DataType;\r\n      colType: DimensionCols;\r\n      type: DimensionRows;\r\n    }[] = [];\r\n\r\n    const type = this.dataStore.get('type');\r\n    // rows\r\n    for (let rowIndex = d.y, i = 0; rowIndex < d.y1 + 1; rowIndex++, i++) {\r\n      // columns\r\n      for (let colIndex = d.x, j = 0; colIndex < d.x1 + 1; colIndex++, j++) {\r\n        const prop = this.columns[colIndex]?.prop;\r\n        area.push({\r\n          prop,\r\n          rowIndex,\r\n          colIndex,\r\n          model: getSourceItem(store, rowIndex),\r\n          type,\r\n          colType: this.type,\r\n        });\r\n      }\r\n    }\r\n    return area;\r\n  }\r\n\r\n  copyRangeArray(\r\n    range: RangeArea,\r\n    store: Observable<DSourceState<DataType, DimensionRows>>,\r\n  ) {\r\n    const cols = [...this.columns];\r\n    const props = slice(cols, range.x, range.x1 + 1).map(v => v.prop);\r\n    const toCopy: DataFormat[][] = [];\r\n    const mapping: { [rowIndex: number]: { [colProp: ColumnProp]: any } } = {};\r\n\r\n    // rows indexes\r\n    for (let i = range.y; i <= range.y1; i++) {\r\n      const rgRow: DataFormat[] = [];\r\n      mapping[i] = {};\r\n\r\n      // columns indexes\r\n      for (let prop of props) {\r\n        const item = getSourceItem(store, i);\r\n\r\n        // if no item - skip\r\n        if (!item) {\r\n          continue;\r\n        }\r\n        const val = item[prop];\r\n        rgRow.push(val);\r\n        mapping[i][prop] = val;\r\n      }\r\n\r\n      toCopy.push(rgRow);\r\n    }\r\n    return {\r\n      data: toCopy,\r\n      mapping,\r\n    };\r\n  }\r\n\r\n  destroy() {\r\n    this.unsubscribe.forEach(f => f());\r\n  }\r\n}\r\n\r\n/**\r\n * Checks if the given rowDrag is a service for dragging rows.\r\n */\r\nexport function isRowDragService(\r\n  rowDrag: RowDrag,\r\n  model: ColumnDataSchemaModel,\r\n): boolean {\r\n  if (typeof rowDrag === 'function') {\r\n    return rowDrag(model);\r\n  }\r\n  return !!rowDrag;\r\n}\r\n\r\nfunction mergeClasses(\r\n  class1: JSXBase.HTMLAttributes<HTMLElement>['class'] = {},\r\n  class2: JSXBase.HTMLAttributes<HTMLElement>['class'] = {},\r\n) {\r\n  if (typeof class1 === 'string') {\r\n    class1 = { [class1]: true };\r\n  }\r\n  if (typeof class2 === 'string') {\r\n    class2 = { [class2]: true };\r\n  }\r\n  return { ...class1, ...class2 };\r\n}\r\n\r\nexport function doPropMerge(existing: CellProps, extra: CellProps) {\r\n  // if className is provided - remove it from props it messing with stencil\r\n  if (extra.className) {\r\n    extra.class = mergeClasses(extra.class, extra.className);\r\n    delete extra.className;\r\n  }\r\n  let props: CellProps = { ...extra, ...existing };\r\n  // extend existing props\r\n  if (extra.class) {\r\n    props.class = mergeClasses(props.class, extra.class);\r\n  }\r\n  if (extra.style) {\r\n    props.style = { ...extra.style, ...props.style };\r\n  }\r\n  return props;\r\n}\r\n"]}

package/dist/collection/components/data/revogr-data-style.css

@@ -0,0 +1,75 @@
+revogr-data {
+  display: block;
+  width: 100%;
+  position: relative;
+}
+revogr-data .rgRow {
+  position: absolute;
+  width: 100%;
+  left: 0;
+}
+revogr-data .rgRow.groupingRow {
+  font-weight: 600;
+  text-align: left;
+}
+revogr-data .rgRow.groupingRow .group-expand {
+  width: 25px;
+  height: 100%;
+  max-height: 25px;
+  margin-right: 2px;
+  background-color: transparent;
+  border-color: transparent;
+  vertical-align: middle;
+  padding-left: 5px;
+  display: inline-flex;
+}
+revogr-data .rgRow.groupingRow .group-expand svg {
+  width: 7px;
+}
+revogr-data .revo-draggable {
+  border: none;
+  height: 32px;
+  display: inline-flex;
+  outline: 0;
+  padding: 0;
+  font-size: 0.8125rem;
+  box-sizing: border-box;
+  align-items: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  justify-content: center;
+  text-decoration: none;
+  width: 24px;
+  height: 100%;
+  cursor: pointer;
+  display: inline-flex;
+}
+revogr-data .revo-draggable:hover > .revo-drag-icon {
+  opacity: 1;
+  zoom: 1.2;
+  font-weight: 600;
+}
+revogr-data .revo-draggable > .revo-drag-icon {
+  pointer-events: none;
+  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, zoom 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+revogr-data .rgCell {
+  top: 0;
+  left: 0;
+  position: absolute;
+  box-sizing: border-box;
+  height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  outline: none;
+}
+revogr-data .rgCell.align-center {
+  text-align: center;
+}
+revogr-data .rgCell.align-left {
+  text-align: left;
+}
+revogr-data .rgCell.align-right {
+  text-align: right;
+}