@revolist/revogrid 4.0.2-next → 4.0.2

package/dist/collection/components/data/revogr-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revogr-data.js","sourceRoot":"","sources":["../../../src/components/data/revogr-data.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Watch,\n  Element,\n  Event,\n  Prop,\n  VNode,\n  EventEmitter,\n  h,\n  Method,\n  State,\n} from '@stencil/core';\n\nimport ColumnService from './column.service';\nimport {\n  DATA_COL,\n  DATA_ROW,\n  ROW_FOCUSED_CLASS,\n} from '../../utils/consts';\n\nimport { DSourceState, getSourceItem } from '../../store/dataSource/data.store';\nimport RowRenderer, { PADDING_DEPTH } from './row-renderer';\nimport GroupingRowRenderer from '../../plugins/groupingRow/grouping.row.renderer';\nimport { isGrouping } from '../../plugins/groupingRow/grouping.service';\nimport { DimensionCols, DimensionRows } from '../../types/dimension';\nimport { RowHighlightPlugin } from './row-highlight.plugin';\nimport { convertVNodeToHTML } from '../vnode/vnode.utils';\nimport { CellRenderer } from './cell-renderer';\nimport {\n  Observable,\n  ViewportState,\n  DimensionSettingsState,\n  BeforeRowRenderEvent,\n  Providers,\n  ColumnRegular,\n  DataType,\n  CellProps,\n  BeforeCellRenderEvent,\n  DragStartEvent,\n  ColumnDataSchemaModel,\n  VirtualPositionItem,\n} from '../../types/interfaces';\nimport { RangeArea, SelectionStoreState } from '../../types/selection';\n\n/**\n * This component is responsible for rendering data\n * Rows, columns, groups and cells\n */\n@Component({\n  tag: 'revogr-data',\n  styleUrl: 'revogr-data-style.scss',\n})\nexport class RevogrData {\n  // #region Properties\n  /**\n   * Readonly mode\n   */\n  @Prop() readonly: boolean;\n  /**\n   * Range allowed\n   */\n  @Prop() range: boolean;\n\n  /**\n   * Defines property from which to read row class\n   */\n  @Prop() rowClass: string;\n  /**\n   * Additional data to pass to renderer\n   * Used in plugins such as vue or react to pass root app entity to cells\n   */\n  @Prop() additionalData: any;\n  /** Stores */\n  /** Selection, range, focus for row selection */\n  @Prop() rowSelectionStore!: Observable<SelectionStoreState>;\n  /** Viewport Y */\n  @Prop() viewportRow!: Observable<ViewportState>;\n  /** Viewport X */\n  @Prop() viewportCol!: Observable<ViewportState>;\n  /** Dimension settings Y */\n  @Prop() dimensionRow!: Observable<DimensionSettingsState>;\n\n  /** Static stores, not expected to change during component lifetime */\n  /**\n   * Column source\n   */\n  @Prop() colData: Observable<DSourceState<ColumnRegular, DimensionCols>>;\n  /**\n   * Data rows source\n   */\n  @Prop() dataStore!: Observable<DSourceState<DataType, DimensionRows>>;\n  /**\n   * Row data type\n   */\n  @Prop({ reflect: true }) type!: DimensionRows;\n\n  /**\n   * Column data type\n   */\n  @Prop({ reflect: true }) colType!: DimensionCols | 'rowHeaders';\n\n  /**\n   * Prevent rendering until job is done.\n   * Can be used for initial rendering performance improvement.\n   * When several plugins require initial rendering this will prevent double initial rendering.\n   */\n  @Prop() jobsBeforeRender: Promise<any>[] = [];\n  // #endregion\n\n  /**\n   * Before each row render\n   */\n  @Event() beforerowrender: EventEmitter<BeforeRowRenderEvent>;\n  /**\n   * When data render finished for the designated type\n   */\n  @Event() afterrender: EventEmitter<{ type: DimensionRows }>;\n  /**\n   * Before each cell render function. Allows to override cell properties\n   */\n  @Event({ eventName: 'beforecellrender' })\n  beforeCellRender: EventEmitter<BeforeCellRenderEvent>;\n\n  /**\n   * Event emitted on cell drag start\n   */\n  @Event({ eventName: 'dragstartcell' })\n  dragStartCell: EventEmitter<DragStartEvent>;\n\n  /**\n   * Pointed cell update.\n   */\n  @Method() async updateCell(e: {\n    row: number; // virtual\n    col: number; // virtual\n  }) {\n    // Stencil tweak to update cell content\n    const cell = this.renderedRows.get(e.row)?.$children$?.[e.col];\n    if (cell?.$attrs$?.redraw) {\n      const children = await convertVNodeToHTML(\n        this.element,\n        cell.$attrs$.redraw,\n      );\n      cell.$elm$.innerHTML = children.html;\n      cell.$key$ = Math.random();\n    }\n  }\n\n  @Element() element!: Element;\n  @State() providers: Providers;\n  private columnService: ColumnService;\n  private rowHighlightPlugin: RowHighlightPlugin;\n  /**\n   * Rendered rows - virtual index vs vnode\n   */\n  private renderedRows = new Map<number, VNode>();\n  private rangeUnsubscribe: (() => void) | undefined;\n\n\n  @Watch('dataStore') onDataStoreChange() {\n    this.onStoreChange();\n  }\n  @Watch('colData') onColDataChange() {\n    this.onStoreChange();\n  }\n  onStoreChange() {\n    this.columnService?.destroy();\n    this.columnService = new ColumnService(this.dataStore, this.colData);\n    // make sure we have correct data, before render\n    this.providers = {\n      type: this.type,\n      readonly: this.readonly,\n      data: this.dataStore,\n      viewport: this.viewportCol,\n      dimension: this.dimensionRow,\n      selection: this.rowSelectionStore,\n    };\n\n    this.rangeUnsubscribe?.();\n    this.rangeUnsubscribe = this.rowSelectionStore.onChange('range', (e: RangeArea) =>\n      this.rowHighlightPlugin.selectionChange(e, this.renderedRows),\n    );\n  }\n\n  connectedCallback() {\n    this.rowHighlightPlugin = new RowHighlightPlugin();\n    this.onStoreChange();\n  }\n\n  disconnectedCallback() {\n    this.columnService?.destroy();\n    this.rangeUnsubscribe?.();\n  }\n\n  async componentWillRender() {\n    return Promise.all(this.jobsBeforeRender);\n  }\n\n  componentDidRender() {\n    this.afterrender.emit({ type: this.type });\n  }\n\n  render() {\n    this.renderedRows = new Map();\n    const columnsData = this.columnService.columns;\n    if (!columnsData.length) {\n      return;\n    }\n    const rows = this.viewportRow.get('items');\n    if (!rows.length) {\n      return;\n    }\n    const cols = this.viewportCol.get('items');\n    if (!cols.length) {\n      return;\n    }\n    const rowsEls: VNode[] = [];\n    const depth = this.dataStore.get('groupingDepth');\n    const groupingCustomRenderer = this.dataStore.get('groupingCustomRenderer');\n    const groupDepth = this.columnService.hasGrouping ? depth : 0;\n    for (let rgRow of rows) {\n      const dataItem = getSourceItem(this.dataStore, rgRow.itemIndex);\n\n      // #region Grouping\n      if (isGrouping(dataItem)) {\n        rowsEls.push(\n          <GroupingRowRenderer\n            {...rgRow}\n            index={rgRow.itemIndex}\n            model={dataItem}\n            groupingCustomRenderer={groupingCustomRenderer}\n            hasExpand={this.columnService.hasGrouping}\n          />,\n        );\n        continue;\n      }\n      // #endregion\n      const cells: (VNode | string | void)[] = [];\n\n      // #region Cells\n      for (let rgCol of cols) {\n        const model = this.columnService.rowDataModel(\n          rgRow.itemIndex,\n          rgCol.itemIndex,\n        );\n\n        // call before cell render\n        const cellEvent = this.triggerBeforeCellRender(model, rgRow, rgCol);\n\n        // if event was prevented\n        if (cellEvent.defaultPrevented) {\n          continue;\n        }\n\n        const {\n          detail: { column: columnProps, row: rowProps },\n        } = cellEvent;\n\n        const defaultProps: CellProps = {\n          [DATA_COL]: columnProps.itemIndex,\n          [DATA_ROW]: rowProps.itemIndex,\n          style: {\n            width: `${columnProps.size}px`,\n            transform: `translateX(${columnProps.start}px)`,\n            height: rowProps.size ? `${rowProps.size}px` : undefined,\n          },\n        };\n        /**\n         * For grouping, can be removed in the future and replaced with event\n         */\n        if (groupDepth && !columnProps.itemIndex) {\n          defaultProps.style.paddingLeft = `${PADDING_DEPTH * groupDepth}px`;\n        }\n\n        const props = this.columnService.mergeProperties(\n          rowProps.itemIndex,\n          columnProps.itemIndex,\n          defaultProps,\n          model,\n          columnsData[columnProps.itemIndex]?.cellProperties,\n        );\n\n        // Never use webcomponent for cell render\n        // It's very slow because of webcomponent initialization takes time\n        cells.push(\n          <CellRenderer\n            renderProps={{\n              model,\n              providers: this.providers,\n              template: columnsData[columnProps.itemIndex]?.cellTemplate,\n              additionalData: this.additionalData,\n              dragStartCell: this.dragStartCell,\n            }}\n            cellProps={props}\n          />,\n        );\n      }\n      // #endregion\n\n      // #region Rows\n      let rowClass = this.rowClass\n        ? this.columnService.getRowClass(rgRow.itemIndex, this.rowClass)\n        : '';\n      if (this.rowHighlightPlugin.isRowFocused(rgRow.itemIndex)) {\n        rowClass += ` ${ROW_FOCUSED_CLASS}`;\n      }\n      const row: VNode = (\n        <RowRenderer\n          index={rgRow.itemIndex}\n          rowClass={rowClass}\n          size={rgRow.size}\n          start={rgRow.start}\n        >\n          {cells}\n        </RowRenderer>\n      );\n      this.beforerowrender.emit({\n        node: row,\n        item: rgRow,\n        dataItem,\n        colType: this.columnService.type,\n        rowType: this.type,\n      });\n      rowsEls.push(row);\n      this.renderedRows.set(rgRow.itemIndex, row);\n      // #endregion\n    }\n    return (\n      <Host>\n        <slot />\n        {rowsEls}\n      </Host>\n    );\n  }\n\n  triggerBeforeCellRender(\n    model: ColumnDataSchemaModel,\n    row: VirtualPositionItem,\n    column: VirtualPositionItem,\n  ) {\n    return this.beforeCellRender.emit({\n      column: { ...column },\n      row: { ...row },\n      model,\n      rowType: model.type,\n      colType: model.colType,\n    });\n  }\n}\n"]}

package/dist/collection/components/data/row-highlight.plugin.js

@@ -0,0 +1,51 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { ROW_FOCUSED_CLASS } from "../../utils/consts";
+/**
+ * Class is responsible for highlighting rows in a table.
+ */
+export class RowHighlightPlugin {
+    constructor() {
+        this.currentRange = null;
+    }
+    selectionChange(e, renderedRows) {
+        // clear previous range
+        if (this.currentRange) {
+            renderedRows.forEach((row, y) => {
+                var _a;
+                // skip current range
+                if (e && y >= e.y && y <= e.y1) {
+                    return;
+                }
+                // clear previous range
+                if (row &&
+                    row.$elm$ instanceof HTMLElement &&
+                    row.$elm$.classList.contains(ROW_FOCUSED_CLASS)) {
+                    row.$elm$.classList.remove(ROW_FOCUSED_CLASS);
+                    if ((_a = row.$attrs$) === null || _a === void 0 ? void 0 : _a.class.includes(ROW_FOCUSED_CLASS)) {
+                        row.$attrs$.class = row.$attrs$.class.replace(ROW_FOCUSED_CLASS, '');
+                    }
+                }
+            });
+        }
+        // apply new range
+        if (e) {
+            for (let y = e.y; y <= e.y1; y++) {
+                const row = renderedRows.get(y);
+                if (row &&
+                    row.$elm$ instanceof HTMLElement &&
+                    !row.$elm$.classList.contains(ROW_FOCUSED_CLASS)) {
+                    const attrs = (row.$attrs$ = row.$attrs$ || {});
+                    attrs.class = (attrs.class || '') + ' ' + ROW_FOCUSED_CLASS;
+                    row.$elm$.classList.add(ROW_FOCUSED_CLASS);
+                }
+            }
+        }
+        this.currentRange = e;
+    }
+    isRowFocused(y) {
+        return (this.currentRange && y >= this.currentRange.y && y <= this.currentRange.y1);
+    }
+}
+//# sourceMappingURL=row-highlight.plugin.js.map

package/dist/collection/components/data/row-highlight.plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-highlight.plugin.js","sourceRoot":"","sources":["../../../src/components/data/row-highlight.plugin.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAGvD;;GAEG;AACH,MAAM,OAAO,kBAAkB;IAA/B;QACU,iBAAY,GAAqB,IAAI,CAAC;IAkDhD,CAAC;IAjDC,eAAe,CAAC,CAAY,EAAE,YAAgC;QAC5D,uBAAuB;QACvB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;;gBAC9B,qBAAqB;gBACrB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC;oBAC/B,OAAO;gBACT,CAAC;gBAED,uBAAuB;gBACvB,IACE,GAAG;oBACH,GAAG,CAAC,KAAK,YAAY,WAAW;oBAChC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAC/C,CAAC;oBACD,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;oBAC9C,IAAI,MAAA,GAAG,CAAC,OAAO,0CAAE,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;wBACnD,GAAG,CAAC,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAC3C,iBAAiB,EACjB,EAAE,CACH,CAAC;oBACJ,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,kBAAkB;QAClB,IAAI,CAAC,EAAE,CAAC;YACN,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;gBACjC,MAAM,GAAG,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBAChC,IACE,GAAG;oBACH,GAAG,CAAC,KAAK,YAAY,WAAW;oBAChC,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAChD,CAAC;oBACD,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;oBAChD,KAAK,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,GAAG,GAAG,iBAAiB,CAAC;oBAC5D,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,CAAC;YACH,CAAC;QACH,CAAC;QACD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,YAAY,CAAC,CAAS;QACpB,OAAO,CACL,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE,CAC3E,CAAC;IACJ,CAAC;CACF","sourcesContent":["import { VNode } from '@stencil/core';\nimport { ROW_FOCUSED_CLASS } from '../../utils/consts';\nimport { RangeArea } from '../../types/selection';\n\n/**\n * Class is responsible for highlighting rows in a table.\n */\nexport class RowHighlightPlugin {\n  private currentRange: RangeArea | null = null;\n  selectionChange(e: RangeArea, renderedRows: Map<number, VNode>) {\n    // clear previous range\n    if (this.currentRange) {\n      renderedRows.forEach((row, y) => {\n        // skip current range\n        if (e && y >= e.y && y <= e.y1) {\n          return;\n        }\n\n        // clear previous range\n        if (\n          row &&\n          row.$elm$ instanceof HTMLElement &&\n          row.$elm$.classList.contains(ROW_FOCUSED_CLASS)\n        ) {\n          row.$elm$.classList.remove(ROW_FOCUSED_CLASS);\n          if (row.$attrs$?.class.includes(ROW_FOCUSED_CLASS)) {\n            row.$attrs$.class = row.$attrs$.class.replace(\n              ROW_FOCUSED_CLASS,\n              '',\n            );\n          }\n        }\n      });\n    }\n\n    // apply new range\n    if (e) {\n      for (let y = e.y; y <= e.y1; y++) {\n        const row = renderedRows.get(y);\n        if (\n          row &&\n          row.$elm$ instanceof HTMLElement &&\n          !row.$elm$.classList.contains(ROW_FOCUSED_CLASS)\n        ) {\n          const attrs = (row.$attrs$ = row.$attrs$ || {});\n          attrs.class = (attrs.class || '') + ' ' + ROW_FOCUSED_CLASS;\n          row.$elm$.classList.add(ROW_FOCUSED_CLASS);\n        }\n      }\n    }\n    this.currentRange = e;\n  }\n\n  isRowFocused(y: number) {\n    return (\n      this.currentRange && y >= this.currentRange.y && y <= this.currentRange.y1\n    );\n  }\n}\n"]}

package/dist/collection/components/data/row-renderer.js

@@ -0,0 +1,16 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h } from "@stencil/core";
+import { DATA_ROW } from "../../utils/consts";
+export const PADDING_DEPTH = 10;
+const RowRenderer = ({ rowClass, index, size, start, depth }, cells) => {
+    const props = Object.assign({ [DATA_ROW]: index });
+    return (h("div", Object.assign({}, props, { class: `rgRow ${rowClass || ''}`, style: {
+            height: `${size}px`,
+            transform: `translateY(${start}px)`,
+            paddingLeft: depth ? `${PADDING_DEPTH * depth}px` : undefined,
+        } }), cells));
+};
+export default RowRenderer;
+//# sourceMappingURL=row-renderer.js.map

package/dist/collection/components/data/row-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row-renderer.js","sourceRoot":"","sources":["../../../src/components/data/row-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAS,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAU9C,MAAM,CAAC,MAAM,aAAa,GAAG,EAAE,CAAC;AAEhC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAY,EAAE,KAAc,EAAE,EAAE;IACxF,MAAM,KAAK,iBACN,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CACzB,CAAC;IACF,OAAO,CACL,2BACM,KAAK,IACT,KAAK,EAAE,SAAS,QAAQ,IAAI,EAAE,EAAE,EAChC,KAAK,EAAE;YACL,MAAM,EAAE,GAAG,IAAI,IAAI;YACnB,SAAS,EAAE,cAAc,KAAK,KAAK;YACnC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS;SAC9D,KAEA,KAAK,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { h, VNode } from '@stencil/core';\nimport { JSXBase } from '@stencil/core/internal';\nimport { DATA_ROW } from '../../utils/consts';\n\nexport interface RowProps extends JSXBase.HTMLAttributes {\n  size: number;\n  start: number;\n  index: number;\n  rowClass?: string;\n  depth?: number;\n}\n\nexport const PADDING_DEPTH = 10;\n\nconst RowRenderer = ({ rowClass, index, size, start, depth }: RowProps, cells: VNode[]) => {\n  const props = {\n    ...{ [DATA_ROW]: index },\n  };\n  return (\n    <div\n      {...props}\n      class={`rgRow ${rowClass || ''}`}\n      style={{\n        height: `${size}px`,\n        transform: `translateY(${start}px)`,\n        paddingLeft: depth ? `${PADDING_DEPTH * depth}px` : undefined,\n      }}\n    >\n      {cells}\n    </div>\n  );\n};\n\nexport default RowRenderer;\n"]}

package/dist/collection/components/editors/edit.utils.js

@@ -0,0 +1,9 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { EDIT_INPUT_WR } from "../../utils/consts";
+// is edit input
+export function isEditInput(el) {
+    return !!(el === null || el === void 0 ? void 0 : el.closest(`.${EDIT_INPUT_WR}`));
+}
+//# sourceMappingURL=edit.utils.js.map

package/dist/collection/components/editors/edit.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit.utils.js","sourceRoot":"","sources":["../../../src/components/editors/edit.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD,gBAAgB;AAChB,MAAM,UAAU,WAAW,CAAC,EAAgB;IAC1C,OAAO,CAAC,CAAC,CAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,OAAO,CAAC,IAAI,aAAa,EAAE,CAAC,CAAA,CAAC;AAC5C,CAAC","sourcesContent":["import { EDIT_INPUT_WR } from '../../utils/consts';\n\n// is edit input\nexport function isEditInput(el?: HTMLElement) {\n  return !!el?.closest(`.${EDIT_INPUT_WR}`);\n}\n"]}

package/dist/collection/components/{overlay → editors}/revogr-edit-style.css

@@ -1,10 +1,8 @@
 .revo-drag-icon {
-  -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 438 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M421.875,70.40625 C426.432292,70.40625 430.175781,68.9414062 433.105469,66.0117188 C436.035156,63.0820312 437.5,59.3385417 437.5,54.78125 L437.5,54.78125 L437.5,15.71875 C437.5,11.1614583 436.035156,7.41796875 433.105469,4.48828125 C430.175781,1.55859375 426.432292,0.09375 421.875,0.09375 L421.875,0.09375 L15.625,0.09375 C11.0677083,0.09375 7.32421875,1.55859375 4.39453125,4.48828125 C1.46484375,7.41796875 0,11.1614583 0,15.71875 L0,15.71875 L0,54.78125 C0,59.3385417 1.46484375,63.0820312 4.39453125,66.0117188 C7.32421875,68.9414062 11.0677083,70.40625 15.625,70.40625 L15.625,70.40625 L421.875,70.40625 Z M421.875,226.65625 C426.432292,226.65625 430.175781,225.191406 433.105469,222.261719 C436.035156,219.332031 437.5,215.588542 437.5,211.03125 L437.5,211.03125 L437.5,171.96875 C437.5,167.411458 436.035156,163.667969 433.105469,160.738281 C430.175781,157.808594 426.432292,156.34375 421.875,156.34375 L421.875,156.34375 L15.625,156.34375 C11.0677083,156.34375 7.32421875,157.808594 4.39453125,160.738281 C1.46484375,163.667969 0,167.411458 0,171.96875 L0,171.96875 L0,211.03125 C0,215.588542 1.46484375,219.332031 4.39453125,222.261719 C7.32421875,225.191406 11.0677083,226.65625 15.625,226.65625 L15.625,226.65625 L421.875,226.65625 Z M421.875,382.90625 C426.432292,382.90625 430.175781,381.441406 433.105469,378.511719 C436.035156,375.582031 437.5,371.838542 437.5,367.28125 L437.5,367.28125 L437.5,328.21875 C437.5,323.661458 436.035156,319.917969 433.105469,316.988281 C430.175781,314.058594 426.432292,312.59375 421.875,312.59375 L421.875,312.59375 L15.625,312.59375 C11.0677083,312.59375 7.32421875,314.058594 4.39453125,316.988281 C1.46484375,319.917969 0,323.661458 0,328.21875 L0,328.21875 L0,367.28125 C0,371.838542 1.46484375,375.582031 4.39453125,378.511719 C7.32421875,381.441406 11.0677083,382.90625 15.625,382.90625 L15.625,382.90625 L421.875,382.90625 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
-  mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 438 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M421.875,70.40625 C426.432292,70.40625 430.175781,68.9414062 433.105469,66.0117188 C436.035156,63.0820312 437.5,59.3385417 437.5,54.78125 L437.5,54.78125 L437.5,15.71875 C437.5,11.1614583 436.035156,7.41796875 433.105469,4.48828125 C430.175781,1.55859375 426.432292,0.09375 421.875,0.09375 L421.875,0.09375 L15.625,0.09375 C11.0677083,0.09375 7.32421875,1.55859375 4.39453125,4.48828125 C1.46484375,7.41796875 0,11.1614583 0,15.71875 L0,15.71875 L0,54.78125 C0,59.3385417 1.46484375,63.0820312 4.39453125,66.0117188 C7.32421875,68.9414062 11.0677083,70.40625 15.625,70.40625 L15.625,70.40625 L421.875,70.40625 Z M421.875,226.65625 C426.432292,226.65625 430.175781,225.191406 433.105469,222.261719 C436.035156,219.332031 437.5,215.588542 437.5,211.03125 L437.5,211.03125 L437.5,171.96875 C437.5,167.411458 436.035156,163.667969 433.105469,160.738281 C430.175781,157.808594 426.432292,156.34375 421.875,156.34375 L421.875,156.34375 L15.625,156.34375 C11.0677083,156.34375 7.32421875,157.808594 4.39453125,160.738281 C1.46484375,163.667969 0,167.411458 0,171.96875 L0,171.96875 L0,211.03125 C0,215.588542 1.46484375,219.332031 4.39453125,222.261719 C7.32421875,225.191406 11.0677083,226.65625 15.625,226.65625 L15.625,226.65625 L421.875,226.65625 Z M421.875,382.90625 C426.432292,382.90625 430.175781,381.441406 433.105469,378.511719 C436.035156,375.582031 437.5,371.838542 437.5,367.28125 L437.5,367.28125 L437.5,328.21875 C437.5,323.661458 436.035156,319.917969 433.105469,316.988281 C430.175781,314.058594 426.432292,312.59375 421.875,312.59375 L421.875,312.59375 L15.625,312.59375 C11.0677083,312.59375 7.32421875,314.058594 4.39453125,316.988281 C1.46484375,319.917969 0,323.661458 0,328.21875 L0,328.21875 L0,367.28125 C0,371.838542 1.46484375,375.582031 4.39453125,378.511719 C7.32421875,381.441406 11.0677083,382.90625 15.625,382.90625 L15.625,382.90625 L421.875,382.90625 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
   width: 11px;
-  height: 7px;
-  background-size: cover;
-  background-repeat: no-repeat;
+}
+.revo-drag-icon::before {
+  content: "::";
 }
 
 .revo-alt-icon {
@@ -49,14 +47,22 @@
   cursor: pointer;
 }
 .revo-button.green {
-  background-color: #2ee072;
-  border: 1px solid #20d565;
+  background-color: #009037;
+  border: 1px solid #00772d;
+}
+.revo-button.red {
+  background-color: #E0662E;
+  border: 1px solid #d55920;
+}
+.revo-button:disabled, .revo-button[disabled] {
+  cursor: not-allowed !important;
+  filter: opacity(0.35) !important;
 }
 .revo-button.light {
-  border: 2px solid #cedefa;
+  border: 1px solid #cedefa;
   line-height: 32px;
   background: none;
-  color: #4876ca;
+  color: #000;
   box-shadow: none;
 }
 

package/dist/collection/components/editors/revogr-edit.js

@@ -0,0 +1,316 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h, Host, } from "@stencil/core";
+import { EDIT_INPUT_WR } from "../../utils/consts";
+import { TextEditor } from "./text-editor";
+/**
+ * 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 class RevoEdit {
+    constructor() {
+        this.currentEditor = null;
+        this.preventSaveOnClose = false;
+        this.editCell = undefined;
+        this.column = undefined;
+        this.editor = undefined;
+        this.saveOnClose = false;
+        this.additionalData = undefined;
+    }
+    /**
+     * Cancel pending changes flag. Editor will be closed without autosave.
+     */
+    async cancelChanges() {
+        this.preventSaveOnClose = true;
+    }
+    /**
+     * Before editor got disconnected.
+     * Can be triggered multiple times before actual disconnect.
+     */
+    async beforeDisconnect() {
+        var _a, _b;
+        (_b = (_a = this.currentEditor) === null || _a === void 0 ? void 0 : _a.beforeDisconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    onAutoSave() {
+        var _a, _b;
+        this.preventSaveOnClose = true;
+        const val = (_b = (_a = this.currentEditor).getValue) === null || _b === void 0 ? void 0 : _b.call(_a);
+        // For Editor plugin internal usage.
+        // When you want to prevent save and use custom save of your own.
+        if (this.currentEditor.beforeAutoSave) {
+            const canSave = this.currentEditor.beforeAutoSave(val);
+            if (canSave === false) {
+                return;
+            }
+        }
+        this.onSave(val, true);
+    }
+    /**
+     * 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, preventFocus) {
+        this.preventSaveOnClose = true;
+        if (this.editCell) {
+            this.cellEdit.emit({
+                rgCol: this.editCell.x,
+                rgRow: this.editCell.y,
+                type: this.editCell.type,
+                prop: this.editCell.prop,
+                val,
+                preventFocus,
+            });
+        }
+    }
+    componentWillRender() {
+        // Active editor present
+        if (this.currentEditor) {
+            return;
+        }
+        this.preventSaveOnClose = false;
+        // Custom editor usage.
+        // Start with TextEditor (editors/text.tsx) for Custom editor.
+        if (this.editor) {
+            this.currentEditor = new this.editor(this.column, 
+            // save callback
+            (e, preventFocus) => {
+                this.onSave(e, preventFocus);
+            }, 
+            // cancel callback
+            focusNext => {
+                this.preventSaveOnClose = true;
+                this.closeEdit.emit(focusNext);
+            });
+            return;
+        }
+        // Default text editor usage
+        this.currentEditor = new TextEditor(this.column, (e, preventFocus) => this.onSave(e, preventFocus));
+    }
+    componentDidRender() {
+        var _a, _b;
+        if (!this.currentEditor) {
+            return;
+        }
+        this.currentEditor.element = this.element.firstElementChild;
+        (_b = (_a = this.currentEditor).componentDidRender) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        if (this.saveOnClose) {
+            // Can not be cancelled by `preventSaveOnClose` prop.
+            // Editor requires `getValue` to be able to save.
+            if (!this.preventSaveOnClose) {
+                this.onAutoSave();
+            }
+        }
+        this.preventSaveOnClose = false;
+        if (!this.currentEditor) {
+            return;
+        }
+        (_b = (_a = this.currentEditor).disconnectedCallback) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.currentEditor.element = null;
+        this.currentEditor = null;
+    }
+    render() {
+        if (this.currentEditor) {
+            this.currentEditor.editCell = this.editCell;
+            return (h(Host, { class: EDIT_INPUT_WR }, this.currentEditor.render(h, this.additionalData)));
+        }
+        return '';
+    }
+    static get is() { return "revogr-edit"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["revogr-edit-style.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["revogr-edit-style.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "editCell": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "EditCell",
+                    "resolved": "EditCellStore & BeforeSaveDataDetails",
+                    "references": {
+                        "EditCell": {
+                            "location": "import",
+                            "path": "../../types/selection",
+                            "id": "src/types/selection.ts::EditCell"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell to edit data."
+                }
+            },
+            "column": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColumnRegular | null",
+                    "resolved": "ColumnRegular",
+                    "references": {
+                        "ColumnRegular": {
+                            "location": "import",
+                            "path": "../../types/interfaces",
+                            "id": "src/types/interfaces.ts::ColumnRegular"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column data for editor."
+                }
+            },
+            "editor": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "EditorCtr | null",
+                    "resolved": "EditorCtr",
+                    "references": {
+                        "EditorCtr": {
+                            "location": "import",
+                            "path": "../../types/selection",
+                            "id": "src/types/selection.ts::EditorCtr"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom editors register"
+                }
+            },
+            "saveOnClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Save on editor close. Defines if data should be saved on editor close."
+                },
+                "attribute": "save-on-close",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "additionalData": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional data to pass to renderer"
+                },
+                "attribute": "additional-data",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cellEdit",
+                "name": "celledit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell edit event"
+                },
+                "complexType": {
+                    "original": "SaveDataDetails",
+                    "resolved": "{ rgRow: number; rgCol: number; type: DimensionRows; prop: ColumnProp; val: any; preventFocus?: boolean; }",
+                    "references": {
+                        "SaveDataDetails": {
+                            "location": "import",
+                            "path": "../../types/selection",
+                            "id": "src/types/selection.ts::SaveDataDetails"
+                        }
+                    }
+                }
+            }, {
+                "method": "closeEdit",
+                "name": "closeedit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close editor event\npass true if requires focus next"
+                },
+                "complexType": {
+                    "original": "boolean | undefined",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "cancelChanges": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Cancel pending changes flag. Editor will be closed without autosave.",
+                    "tags": []
+                }
+            },
+            "beforeDisconnect": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Before editor got disconnected.\nCan be triggered multiple times before actual disconnect.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}
+//# sourceMappingURL=revogr-edit.js.map

package/dist/collection/components/editors/revogr-edit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"revogr-edit.js","sourceRoot":"","sources":["../../../src/components/editors/revogr-edit.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Host,\n  Method,\n} from '@stencil/core';\nimport { EDIT_INPUT_WR } from '../../utils/consts';\nimport { TextEditor } from './text-editor';\nimport { ColumnRegular } from '../../types/interfaces';\nimport {\n  EditCell,\n  EditorCtr,\n  SaveDataDetails,\n  EditorBase,\n  SaveData,\n} from '../../types/selection';\n\n/**\n * Represents a cell editor in a grid.\n * It manages the editing of cells by handling events, saving data, rendering the editor UI,\n * and managing the lifecycle of the editor instance.\n */\n@Component({\n  tag: 'revogr-edit',\n  styleUrl: 'revogr-edit-style.scss',\n})\nexport class RevoEdit {\n  /**\n   * Cell to edit data.\n   */\n  @Prop() editCell: EditCell;\n\n  /**\n   * Column data for editor.\n   */\n  @Prop() column: ColumnRegular | null;\n  /**\n   * Custom editors register\n   */\n  @Prop() editor: EditorCtr | null;\n\n  /**\n   * Save on editor close. Defines if data should be saved on editor close.\n   */\n  @Prop() saveOnClose = false;\n  /**\n   * Additional data to pass to renderer\n   */\n  @Prop() additionalData: any;\n\n  /**\n   * Cell edit event\n   */\n  @Event({ eventName: 'celledit' }) cellEdit: EventEmitter<SaveDataDetails>;\n\n  /**\n   * Close editor event\n   * pass true if requires focus next\n   */\n  @Event({ eventName: 'closeedit' }) closeEdit: EventEmitter<\n    boolean | undefined\n  >;\n\n  /** Edit session editor */\n  @Element() element: HTMLElement;\n  private currentEditor: EditorBase | null = null;\n  private preventSaveOnClose = false;\n\n  /**\n   * Cancel pending changes flag. Editor will be closed without autosave.\n   */\n  @Method() async cancelChanges() {\n    this.preventSaveOnClose = true;\n  }\n\n  /**\n   * Before editor got disconnected.\n   * Can be triggered multiple times before actual disconnect.\n   */\n  @Method() async beforeDisconnect() {\n    this.currentEditor?.beforeDisconnect?.();\n  }\n\n  onAutoSave() {\n    this.preventSaveOnClose = true;\n    const val = this.currentEditor.getValue?.();\n    // For Editor plugin internal usage.\n    // When you want to prevent save and use custom save of your own.\n    if (this.currentEditor.beforeAutoSave) {\n      const canSave = this.currentEditor.beforeAutoSave(val);\n      if (canSave === false) {\n        return;\n      }\n    }\n    this.onSave(val, true);\n  }\n\n  /**\n   * Callback triggered when cell editor saved.\n   * Closes editor when called.\n   * @param preventFocus - if true, editor will not be closed & next cell will not be focused.\n   */\n  onSave(val: SaveData, preventFocus?: boolean) {\n    this.preventSaveOnClose = true;\n    if (this.editCell) {\n      this.cellEdit.emit({\n        rgCol: this.editCell.x,\n        rgRow: this.editCell.y,\n        type: this.editCell.type,\n        prop: this.editCell.prop,\n        val,\n        preventFocus,\n      });\n    }\n  }\n\n  componentWillRender() {\n    // Active editor present\n    if (this.currentEditor) {\n      return;\n    }\n    this.preventSaveOnClose = false;\n\n    // Custom editor usage.\n    // Start with TextEditor (editors/text.tsx) for Custom editor.\n    if (this.editor) {\n      this.currentEditor = new this.editor(\n        this.column,\n        // save callback\n        (e, preventFocus) => {\n          this.onSave(e, preventFocus);\n        },\n        // cancel callback\n        focusNext => {\n          this.preventSaveOnClose = true;\n          this.closeEdit.emit(focusNext);\n        },\n      );\n      return;\n    }\n    // Default text editor usage\n    this.currentEditor = new TextEditor(this.column, (e, preventFocus) =>\n      this.onSave(e, preventFocus),\n    );\n  }\n\n  componentDidRender() {\n    if (!this.currentEditor) {\n      return;\n    }\n    this.currentEditor.element = this.element.firstElementChild;\n    this.currentEditor.componentDidRender?.();\n  }\n\n  disconnectedCallback() {\n    if (this.saveOnClose) {\n      // Can not be cancelled by `preventSaveOnClose` prop.\n      // Editor requires `getValue` to be able to save.\n      if (!this.preventSaveOnClose) {\n        this.onAutoSave();\n      }\n    }\n\n    this.preventSaveOnClose = false;\n    if (!this.currentEditor) {\n      return;\n    }\n\n    this.currentEditor.disconnectedCallback?.();\n    this.currentEditor.element = null;\n    this.currentEditor = null;\n  }\n\n  render() {\n    if (this.currentEditor) {\n      this.currentEditor.editCell = this.editCell;\n      return (\n        <Host class={EDIT_INPUT_WR}>\n          {this.currentEditor.render(h, this.additionalData)}\n        </Host>\n      );\n    }\n    return '';\n  }\n}\n"]}

package/dist/collection/components/editors/text-editor.js

@@ -0,0 +1,73 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { isEnterKey, isTab } from "../../utils/key.utils";
+import { timeout } from "../../utils";
+export class TextEditor {
+    constructor(column, saveCallback) {
+        this.column = column;
+        this.saveCallback = saveCallback;
+        this.element = null;
+        this.editCell = null;
+    }
+    /**
+     * Callback triggered on cell editor render
+     */
+    async componentDidRender() {
+        var _a;
+        if (this.editInput) {
+            await timeout();
+            (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    onKeyDown(e) {
+        const isEnter = isEnterKey(e.code);
+        const isKeyTab = isTab(e.code);
+        if ((isKeyTab || isEnter) &&
+            e.target &&
+            this.saveCallback &&
+            !e.isComposing) {
+            // blur is needed to avoid autoscroll
+            this.beforeDisconnect();
+            // request callback which will close cell after all
+            this.saveCallback(this.getValue(), isKeyTab);
+        }
+    }
+    /**
+     * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.
+     */
+    beforeDisconnect() {
+        this.editInput.blur();
+    }
+    /**
+     * Get value from input
+     */
+    getValue() {
+        var _a;
+        return (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.value;
+    }
+    /**
+     * Render method for Editor plugin.
+     * Renders input element with passed data from cell.
+     *
+     * @required @method
+     * @param {Function} h - h function from stencil render.
+     * @param {Object} _additionalData - additional data from plugin.
+     * @returns {VNode} - input element.
+     */
+    render(h, _additionalData) {
+        var _a;
+        return h('input', {
+            type: 'text',
+            // set input value from cell data
+            value: ((_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) || '',
+            // save input element as ref for further usage
+            ref: (el) => {
+                this.editInput = el;
+            },
+            // listen to keydown event on input element
+            onKeyDown: (e) => this.onKeyDown(e),
+        });
+    }
+}
+//# sourceMappingURL=text-editor.js.map

package/dist/collection/components/editors/text-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor.js","sourceRoot":"","sources":["../../../src/components/editors/text-editor.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAkBtC,MAAM,OAAO,UAAU;IAMrB,YACS,MAAqB,EACpB,YAA2B;QAD5B,WAAM,GAAN,MAAM,CAAe;QACpB,iBAAY,GAAZ,YAAY,CAAe;QAL9B,YAAO,GAAmB,IAAI,CAAC;QAC/B,aAAQ,GAAoB,IAAI,CAAC;IAKrC,CAAC;IAEJ;;OAEG;IACH,KAAK,CAAC,kBAAkB;;QACtB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,MAAM,OAAO,EAAE,CAAC;YAChB,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,SAAS,CAAC,CAAgB;QAChC,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACnC,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAE/B,IACE,CAAC,QAAQ,IAAI,OAAO,CAAC;YACrB,CAAC,CAAC,MAAM;YACR,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,CAAC,WAAW,EACd,CAAC;YACD,qCAAqC;YACrC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,mDAAmD;YACnD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC;IAED;;OAEG;IACH,QAAQ;;QACN,OAAO,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC;IAC/B,CAAC;IAED;;;;;;;;OAQG;IACH,MAAM,CAAC,CAAuB,EAAE,eAAoB;;QAClD,OAAO,CAAC,CAAC,OAAO,EAAE;YAChB,IAAI,EAAE,MAAM;YACZ,iCAAiC;YACjC,KAAK,EAAE,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,KAAI,EAAE;YAC/B,8CAA8C;YAC9C,GAAG,EAAE,CAAC,EAA2B,EAAE,EAAE;gBACnC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;YACtB,CAAC;YACD,2CAA2C;YAC3C,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;SACnD,CAAC,CAAC;IACL,CAAC;CACF","sourcesContent":["import { h as createElement } from '@stencil/core';\nimport { isEnterKey, isTab } from '../../utils/key.utils';\nimport { timeout } from '../../utils';\nimport { ColumnRegular } from '../../types/interfaces';\nimport { EditCell, EditorBase, SaveData } from '../../types/selection';\n\n/**\n * Represents a cell editor in a grid.\n *\n * It's a good place to start with your own editor.\n * It manages the editing of cells by handling events, saving data, rendering the editor UI, and managing the lifecycle of the editor instance.\n */\n\n/**\n * Callback triggered on cell editor save\n * Closes editor when called\n * @param preventFocus - if true editor will not be closed and next cell will not be focused\n */\nexport type SaveCallback = (value: SaveData, preventFocus: boolean) => void;\n\nexport class TextEditor implements EditorBase {\n  private editInput!: HTMLInputElement;\n\n  public element: Element | null = null;\n  public editCell: EditCell | null = null;\n\n  constructor(\n    public column: ColumnRegular,\n    private saveCallback?: SaveCallback,\n  ) {}\n\n  /**\n   * Callback triggered on cell editor render\n   */\n  async componentDidRender(): Promise<void> {\n    if (this.editInput) {\n      await timeout();\n      this.editInput?.focus();\n    }\n  }\n\n  private onKeyDown(e: KeyboardEvent) {\n    const isEnter = isEnterKey(e.code);\n    const isKeyTab = isTab(e.code);\n\n    if (\n      (isKeyTab || isEnter) &&\n      e.target &&\n      this.saveCallback &&\n      !e.isComposing\n    ) {\n      // blur is needed to avoid autoscroll\n      this.beforeDisconnect();\n      // request callback which will close cell after all\n      this.saveCallback(this.getValue(), isKeyTab);\n    }\n  }\n\n  /**\n   * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.\n   */\n  beforeDisconnect() {\n    this.editInput.blur();\n  }\n\n  /**\n   * Get value from input\n   */\n  getValue() {\n    return this.editInput?.value;\n  }\n\n  /**\n   * Render method for Editor plugin.\n   * Renders input element with passed data from cell.\n   *\n   * @required @method\n   * @param {Function} h - h function from stencil render.\n   * @param {Object} _additionalData - additional data from plugin.\n   * @returns {VNode} - input element.\n   */\n  render(h: typeof createElement, _additionalData: any) {\n    return h('input', {\n      type: 'text',\n      // set input value from cell data\n      value: this.editCell?.val || '',\n      // save input element as ref for further usage\n      ref: (el: HTMLInputElement | null) => {\n        this.editInput = el;\n      },\n      // listen to keydown event on input element\n      onKeyDown: (e: KeyboardEvent) => this.onKeyDown(e),\n    });\n  }\n}\n"]}

package/dist/collection/components/header/header-cell-renderer.js

@@ -0,0 +1,28 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h } from "@stencil/core";
+import { dispatch } from "../../plugins/dispatcher";
+import { doPropMerge } from "../data/column.service";
+import { ResizableElement } from "../../services/resizable.element";
+export const ON_COLUMN_CLICK = 'columnclick';
+export const HeaderCellRenderer = ({ data, props, additionalData }, children) => {
+    let colTemplate = (data === null || data === void 0 ? void 0 : data.name) || '';
+    let cellProps = props;
+    if (data === null || data === void 0 ? void 0 : data.columnTemplate) {
+        colTemplate = data.columnTemplate(h, data, additionalData);
+    }
+    if (data === null || data === void 0 ? void 0 : data.columnProperties) {
+        const extra = data.columnProperties(data);
+        if (extra && typeof extra === 'object') {
+            cellProps = doPropMerge(props, extra);
+        }
+    }
+    return (h(ResizableElement, Object.assign({}, cellProps, { onMouseDown: (e) => {
+            dispatch(e.currentTarget, ON_COLUMN_CLICK, {
+                data,
+                event: e,
+            });
+        } }), h("div", { class: "header-content" }, colTemplate), children));
+};
+//# sourceMappingURL=header-cell-renderer.js.map

package/dist/collection/components/header/header-cell-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-cell-renderer.js","sourceRoot":"","sources":["../../../src/components/header/header-cell-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAS,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAUpE,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAS,EAAE,QAAiB,EAAS,EAAE;IACrG,IAAI,WAAW,GAA6B,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,KAAI,EAAE,CAAC;IAC7D,IAAI,SAAS,GAAG,KAAK,CAAC;IACtB,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,cAAc,EAAE,CAAC;QACzB,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC;IAC7D,CAAC;IACD,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,EAAE,CAAC;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC1C,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YACvC,SAAS,GAAG,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IACD,OAAO,CACL,EAAC,gBAAgB,oBAAK,SAAS,IAAE,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE;YAC9D,QAAQ,CAAC,CAAC,CAAC,aAA4B,EAAE,eAAe,EAAE;gBACxD,IAAI;gBACJ,KAAK,EAAE,CAAC;aACT,CAAC,CAAC;QACJ,CAAC;QACA,WAAK,KAAK,EAAC,gBAAgB,IAAE,WAAW,CAAO;QAC9C,QAAQ,CACQ,CACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, VNode } from '@stencil/core';\nimport { dispatch } from '../../plugins/dispatcher';\nimport { doPropMerge } from '../data/column.service';\nimport { ResizableElement } from '../../services/resizable.element';\nimport { ResizeProps } from '../../services/resizable.directive';\nimport { CellProps, ColumnTemplateProp } from '../../types/interfaces';\n\ntype Props = {\n  props: CellProps & Partial<ResizeProps>;\n  additionalData: any;\n  data?: ColumnTemplateProp;\n};\n\nexport const ON_COLUMN_CLICK = 'columnclick';\n\nexport const HeaderCellRenderer = ({ data, props, additionalData }: Props, children: VNode[]): VNode => {\n  let colTemplate: VNode | VNode[] | string = data?.name || '';\n  let cellProps = props;\n  if (data?.columnTemplate) {\n    colTemplate = data.columnTemplate(h, data, additionalData);\n  }\n  if (data?.columnProperties) {\n    const extra = data.columnProperties(data);\n    if (extra && typeof extra === 'object') {\n      cellProps = doPropMerge(props, extra);\n    }\n  }\n  return (\n    <ResizableElement {...cellProps} onMouseDown={(e: MouseEvent) => {\n      dispatch(e.currentTarget as HTMLElement, ON_COLUMN_CLICK, {\n        data,\n        event: e,\n      });\n     }}>\n      <div class=\"header-content\">{colTemplate}</div>\n      {children}\n    </ResizableElement>\n  );\n};\n"]}