lsp-grid 1.0.0

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

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

@@ -0,0 +1,51 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+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 { type VNode } from '@stencil/core';\r\nimport { ROW_FOCUSED_CLASS } from '../../utils/consts';\r\nimport { RangeArea } from '@type';\r\n\r\n/**\r\n * Class is responsible for highlighting rows in a table.\r\n */\r\nexport class RowHighlightPlugin {\r\n  private currentRange: RangeArea | null = null;\r\n  selectionChange(e: RangeArea, renderedRows: Map<number, VNode>) {\r\n    // clear previous range\r\n    if (this.currentRange) {\r\n      renderedRows.forEach((row, y) => {\r\n        // skip current range\r\n        if (e && y >= e.y && y <= e.y1) {\r\n          return;\r\n        }\r\n\r\n        // clear previous range\r\n        if (\r\n          row &&\r\n          row.$elm$ instanceof HTMLElement &&\r\n          row.$elm$.classList.contains(ROW_FOCUSED_CLASS)\r\n        ) {\r\n          row.$elm$.classList.remove(ROW_FOCUSED_CLASS);\r\n          if (row.$attrs$?.class.includes(ROW_FOCUSED_CLASS)) {\r\n            row.$attrs$.class = row.$attrs$.class.replace(\r\n              ROW_FOCUSED_CLASS,\r\n              '',\r\n            );\r\n          }\r\n        }\r\n      });\r\n    }\r\n\r\n    // apply new range\r\n    if (e) {\r\n      for (let y = e.y; y <= e.y1; y++) {\r\n        const row = renderedRows.get(y);\r\n        if (\r\n          row &&\r\n          row.$elm$ instanceof HTMLElement &&\r\n          !row.$elm$.classList.contains(ROW_FOCUSED_CLASS)\r\n        ) {\r\n          const attrs = (row.$attrs$ = row.$attrs$ || {});\r\n          attrs.class = (attrs.class || '') + ' ' + ROW_FOCUSED_CLASS;\r\n          row.$elm$.classList.add(ROW_FOCUSED_CLASS);\r\n        }\r\n      }\r\n    }\r\n    this.currentRange = e;\r\n  }\r\n\r\n  isRowFocused(y: number) {\r\n    return (\r\n      this.currentRange && y >= this.currentRange.y && y <= this.currentRange.y1\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,16 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+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,EAAc,MAAM,eAAe,CAAC;AAE9C,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, type VNode } from '@stencil/core';\r\nimport { JSXBase } from '@stencil/core/internal';\r\nimport { DATA_ROW } from '../../utils/consts';\r\n\r\nexport interface RowProps extends JSXBase.HTMLAttributes {\r\n  size: number;\r\n  start: number;\r\n  index: number;\r\n  rowClass?: string;\r\n  depth?: number;\r\n}\r\n\r\nexport const PADDING_DEPTH = 10;\r\n\r\nconst RowRenderer = ({ rowClass, index, size, start, depth }: RowProps, cells: VNode[]) => {\r\n  const props = {\r\n    ...{ [DATA_ROW]: index },\r\n  };\r\n  return (\r\n    <div\r\n      {...props}\r\n      class={`rgRow ${rowClass || ''}`}\r\n      style={{\r\n        height: `${size}px`,\r\n        transform: `translateY(${start}px)`,\r\n        paddingLeft: depth ? `${PADDING_DEPTH * depth}px` : undefined,\r\n      }}\r\n    >\r\n      {cells}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default RowRenderer;\r\n"]}

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

@@ -0,0 +1,13 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+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}`));
+}
+// Type guard for EditorCtrConstructible
+export function isEditorCtrConstructible(editor) {
+    return typeof editor === 'function' && typeof editor.prototype === 'object';
+}
+//# 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;AAInD,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;AAGD,wCAAwC;AACxC,MAAM,UAAU,wBAAwB,CACtC,MAAW;IAEX,OAAO,OAAO,MAAM,KAAK,UAAU,IAAI,OAAO,MAAM,CAAC,SAAS,KAAK,QAAQ,CAAC;AAC9E,CAAC","sourcesContent":["import { EDIT_INPUT_WR } from '../../utils/consts';\r\nimport {\r\n  EditorCtrConstructible,\r\n} from '@type';\r\n// is edit input\r\nexport function isEditInput(el?: HTMLElement) {\r\n  return !!el?.closest(`.${EDIT_INPUT_WR}`);\r\n}\r\n\r\n\r\n// Type guard for EditorCtrConstructible\r\nexport function isEditorCtrConstructible(\r\n  editor: any,\r\n): editor is EditorCtrConstructible {\r\n  return typeof editor === 'function' && typeof editor.prototype === 'object';\r\n}\r\n"]}

package/dist/collection/components/editors/revogr-edit-style.css

@@ -0,0 +1,16 @@
+revogr-edit {
+  display: block;
+  position: absolute;
+  background-color: #fff;
+}
+revogr-edit input {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+revogr-edit revo-dropdown {
+  height: 100%;
+}
+revogr-edit revo-dropdown.shrink fieldset legend > span {
+  display: none;
+}

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

@@ -0,0 +1,346 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { h, Host, } from "@stencil/core";
+import { EDIT_INPUT_WR } from "../../utils/consts";
+import { TextEditor } from "./text-editor";
+import { isEditorCtrConstructible } from "./edit.utils";
+/**
+ * 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() {
+        /**
+         * Save on editor close. Defines if data should be saved on editor close.
+         */
+        this.saveOnClose = false;
+        this.currentEditor = null;
+        this.preventSaveOnClose = false;
+    }
+    /**
+     * 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, _c;
+        this.preventSaveOnClose = true;
+        const val = (_b = (_a = this.currentEditor) === null || _a === void 0 ? void 0 : _a.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 ((_c = this.currentEditor) === null || _c === void 0 ? void 0 : _c.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 and not yet closed.
+        if (this.currentEditor || !this.column) {
+            return;
+        }
+        this.preventSaveOnClose = false;
+        // Custom editor usage.
+        // Start with TextEditor (editors/text.tsx) for Custom editor.
+        // It can be class or function
+        if (this.editor) {
+            // if editor is constructible
+            if (isEditorCtrConstructible(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);
+                });
+                // if editor is function
+            }
+            else {
+                this.currentEditor = 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",
+                "attribute": "edit-cell",
+                "mutable": false,
+                "complexType": {
+                    "original": "EditCell",
+                    "resolved": "EditCellStore & BeforeSaveDataDetails",
+                    "references": {
+                        "EditCell": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::EditCell"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell to edit data."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "column": {
+                "type": "unknown",
+                "attribute": "column",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColumnDataSchemaModel | null",
+                    "resolved": "ColumnDataSchemaModel | null",
+                    "references": {
+                        "ColumnDataSchemaModel": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ColumnDataSchemaModel"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column data for editor."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "editor": {
+                "type": "unknown",
+                "attribute": "editor",
+                "mutable": false,
+                "complexType": {
+                    "original": "EditorCtr | null",
+                    "resolved": "((column: ColumnDataSchemaModel, save: (value?: any, preventFocus?: boolean | undefined) => void, close: (focusNext?: boolean | undefined) => void) => EditorBase) | EditorCtrConstructible | null",
+                    "references": {
+                        "EditorCtr": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::EditorCtr"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom editors register"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "saveOnClose": {
+                "type": "boolean",
+                "attribute": "save-on-close",
+                "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "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
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cellEdit",
+                "name": "celleditinit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cell edit event initiator, first in the cellEdit event chain"
+                },
+                "complexType": {
+                    "original": "SaveDataDetails",
+                    "resolved": "{ rgRow: number; rgCol: number; type: DimensionRows; prop: ColumnProp; val: any; preventFocus?: boolean | undefined; }",
+                    "references": {
+                        "SaveDataDetails": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::SaveDataDetails"
+                        }
+                    }
+                }
+            }, {
+                "method": "closeEdit",
+                "name": "closeedit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Close editor event\r\npass true if requires focus next"
+                },
+                "complexType": {
+                    "original": "boolean | undefined",
+                    "resolved": "boolean | undefined",
+                    "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.\r\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 {\r\n  Component,\r\n  Event,\r\n  EventEmitter,\r\n  Prop,\r\n  h,\r\n  Element,\r\n  Host,\r\n  Method,\r\n} from '@stencil/core';\r\nimport { EDIT_INPUT_WR } from '../../utils/consts';\r\nimport { TextEditor } from './text-editor';\r\nimport { ColumnDataSchemaModel } from '@type';\r\nimport {\r\n  EditCell,\r\n  EditorCtr,\r\n  SaveDataDetails,\r\n  EditorBase,\r\n} from '@type';\r\n\r\nimport { isEditorCtrConstructible } from './edit.utils';\r\n\r\n/**\r\n * Represents a cell editor in a grid.\r\n * It manages the editing of cells by handling events, saving data, rendering the editor UI,\r\n * and managing the lifecycle of the editor instance.\r\n */\r\n@Component({\r\n  tag: 'revogr-edit',\r\n  styleUrl: 'revogr-edit-style.scss',\r\n})\r\nexport class RevoEdit {\r\n  /**\r\n   * Cell to edit data.\r\n   */\r\n  @Prop() editCell: EditCell;\r\n\r\n  /**\r\n   * Column data for editor.\r\n   */\r\n  @Prop() column: ColumnDataSchemaModel | null;\r\n  /**\r\n   * Custom editors register\r\n   */\r\n  @Prop() editor: EditorCtr | null;\r\n\r\n  /**\r\n   * Save on editor close. Defines if data should be saved on editor close.\r\n   */\r\n  @Prop() saveOnClose = false;\r\n  /**\r\n   * Additional data to pass to renderer\r\n   */\r\n  @Prop() additionalData: any;\r\n\r\n  /**\r\n   * Cell edit event initiator, first in the cellEdit event chain\r\n   */\r\n  @Event({ eventName: 'celleditinit' }) cellEdit: EventEmitter<SaveDataDetails>;\r\n\r\n  /**\r\n   * Close editor event\r\n   * pass true if requires focus next\r\n   */\r\n  @Event({ eventName: 'closeedit' }) closeEdit: EventEmitter<\r\n    boolean | undefined\r\n  >;\r\n\r\n  /** Edit session editor */\r\n  @Element() element: HTMLElement;\r\n  private currentEditor: EditorBase | null = null;\r\n  private preventSaveOnClose = false;\r\n\r\n  /**\r\n   * Cancel pending changes flag. Editor will be closed without autosave.\r\n   */\r\n  @Method() async cancelChanges() {\r\n    this.preventSaveOnClose = true;\r\n  }\r\n\r\n  /**\r\n   * Before editor got disconnected.\r\n   * Can be triggered multiple times before actual disconnect.\r\n   */\r\n  @Method() async beforeDisconnect() {\r\n    this.currentEditor?.beforeDisconnect?.();\r\n  }\r\n\r\n  onAutoSave() {\r\n    this.preventSaveOnClose = true;\r\n    const val = this.currentEditor?.getValue?.();\r\n    // For Editor plugin internal usage.\r\n    // When you want to prevent save and use custom save of your own.\r\n    if (this.currentEditor?.beforeAutoSave) {\r\n      const canSave = this.currentEditor.beforeAutoSave(val);\r\n      if (canSave === false) {\r\n        return;\r\n      }\r\n    }\r\n    this.onSave(val, true);\r\n  }\r\n\r\n  /**\r\n   * Callback triggered when cell editor saved.\r\n   * Closes editor when called.\r\n   * @param preventFocus - if true, editor will not be closed & next cell will not be focused.\r\n   */\r\n  onSave(val?: any, preventFocus?: boolean) {\r\n    this.preventSaveOnClose = true;\r\n    if (this.editCell) {\r\n      this.cellEdit.emit({\r\n        rgCol: this.editCell.x,\r\n        rgRow: this.editCell.y,\r\n        type: this.editCell.type,\r\n        prop: this.editCell.prop,\r\n        val,\r\n        preventFocus,\r\n      });\r\n    }\r\n  }\r\n\r\n  componentWillRender() {\r\n    // Active editor present and not yet closed.\r\n    if (this.currentEditor || !this.column) {\r\n      return;\r\n    }\r\n    this.preventSaveOnClose = false;\r\n\r\n    // Custom editor usage.\r\n    // Start with TextEditor (editors/text.tsx) for Custom editor.\r\n    // It can be class or function\r\n    if (this.editor) {\r\n      // if editor is constructible\r\n      if (isEditorCtrConstructible(this.editor)) {\r\n        this.currentEditor = new this.editor(\r\n          this.column,\r\n          // save callback\r\n          (e, preventFocus) => {\r\n            this.onSave(e, preventFocus);\r\n          },\r\n          // cancel callback\r\n          focusNext => {\r\n            this.preventSaveOnClose = true;\r\n            this.closeEdit.emit(focusNext);\r\n          },\r\n        );\r\n      // if editor is function\r\n      } else {\r\n        this.currentEditor = this.editor(\r\n          this.column,\r\n          // save callback\r\n          (e, preventFocus) => {\r\n            this.onSave(e, preventFocus);\r\n          },\r\n          // cancel callback\r\n          focusNext => {\r\n            this.preventSaveOnClose = true;\r\n            this.closeEdit.emit(focusNext);\r\n          },\r\n        );\r\n      }\r\n      return;\r\n    }\r\n    // Default text editor usage\r\n    this.currentEditor = new TextEditor(this.column, (e, preventFocus) =>\r\n      this.onSave(e, preventFocus),\r\n    );\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (!this.currentEditor) {\r\n      return;\r\n    }\r\n    this.currentEditor.element = this.element.firstElementChild;\r\n    this.currentEditor.componentDidRender?.();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    if (this.saveOnClose) {\r\n      // Can not be cancelled by `preventSaveOnClose` prop.\r\n      // Editor requires `getValue` to be able to save.\r\n      if (!this.preventSaveOnClose) {\r\n        this.onAutoSave();\r\n      }\r\n    }\r\n\r\n    this.preventSaveOnClose = false;\r\n    if (!this.currentEditor) {\r\n      return;\r\n    }\r\n\r\n    this.currentEditor.disconnectedCallback?.();\r\n    this.currentEditor.element = null;\r\n    this.currentEditor = null;\r\n  }\r\n\r\n  render() {\r\n    if (this.currentEditor) {\r\n      this.currentEditor.editCell = this.editCell;\r\n      return (\r\n        <Host class={EDIT_INPUT_WR}>\r\n          {this.currentEditor.render(h, this.additionalData)}\r\n        </Host>\r\n      );\r\n    }\r\n    return '';\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,74 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { isEnterKeyValue, isTab } from "../../utils/key.utils";
+import { timeout } from "../../utils";
+export class TextEditor {
+    constructor(data, saveCallback) {
+        this.data = data;
+        this.saveCallback = saveCallback;
+        this.editInput = null;
+        this.element = null;
+        this.editCell = undefined;
+    }
+    /**
+     * 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 = isEnterKeyValue(e.key);
+        const isKeyTab = isTab(e.key);
+        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() {
+        var _a;
+        (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.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.
+     * @param {Function} h - h function from stencil render.
+     * @param {Object} _additionalData - additional data from plugin.
+     * @returns {VNode} - input element.
+     */
+    render(h, _additionalData) {
+        var _a, _b;
+        return h('input', {
+            type: 'text',
+            enterKeyHint: 'enter',
+            // set input value from cell data
+            value: (_b = (_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) !== null && _b !== void 0 ? _b : '',
+            // 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.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAiBtC,MAAM,OAAO,UAAU;IAMrB,YACS,IAA2B,EAC1B,YAA2B;QAD5B,SAAI,GAAJ,IAAI,CAAuB;QAC1B,iBAAY,GAAZ,YAAY,CAAe;QAPrC,cAAS,GAA4B,IAAI,CAAC;QAE1C,YAAO,GAAmB,IAAI,CAAC;QAC/B,aAAQ,GAAc,SAAS,CAAC;IAK7B,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;IAED,SAAS,CAAC,CAAgB;QACxB,MAAM,OAAO,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAE9B,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,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;IACzB,CAAC;IAED;;OAEG;IACH,QAAQ;;QACN,OAAO,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,CAAC;IAC/B,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,CAAuB,EAAE,eAAoB;;QAClD,OAAO,CAAC,CAAC,OAAO,EAAE;YAChB,IAAI,EAAE,MAAM;YACZ,YAAY,EAAE,OAAO;YACrB,iCAAiC;YACjC,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,GAAG,mCAAI,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 { type VNode, h as createElement } from '@stencil/core';\r\nimport { isEnterKeyValue, isTab } from '../../utils/key.utils';\r\nimport { timeout } from '../../utils';\r\nimport type { EditCell, EditorBase, ColumnDataSchemaModel } from '@type';\r\n\r\n/**\r\n * Represents a cell editor in a grid.\r\n *\r\n * It's a good place to start with your own editor.\r\n * It manages the editing of cells by handling events, saving data, rendering the editor UI, and managing the lifecycle of the editor instance.\r\n */\r\n\r\n/**\r\n * Callback triggered on cell editor save\r\n * Closes editor when called\r\n * @param preventFocus - if true editor will not be closed and next cell will not be focused\r\n */\r\nexport type SaveCallback = (value: any, preventFocus: boolean) => void;\r\n\r\nexport class TextEditor implements EditorBase {\r\n  editInput: HTMLInputElement | null = null;\r\n\r\n  element: Element | null = null;\r\n  editCell?: EditCell = undefined;\r\n\r\n  constructor(\r\n    public data: ColumnDataSchemaModel,\r\n    private saveCallback?: SaveCallback,\r\n  ) {}\r\n\r\n  /**\r\n   * Callback triggered on cell editor render\r\n   */\r\n  async componentDidRender(): Promise<void> {\r\n    if (this.editInput) {\r\n      await timeout();\r\n      this.editInput?.focus();\r\n    }\r\n  }\r\n\r\n  onKeyDown(e: KeyboardEvent) {\r\n    const isEnter = isEnterKeyValue(e.key);\r\n    const isKeyTab = isTab(e.key);\r\n\r\n    if (\r\n      (isKeyTab || isEnter) &&\r\n      e.target &&\r\n      this.saveCallback &&\r\n      !e.isComposing\r\n    ) {\r\n      // blur is needed to avoid autoscroll\r\n      this.beforeDisconnect();\r\n      // request callback which will close cell after all\r\n      this.saveCallback(this.getValue(), isKeyTab);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * IMPORTANT: Prevent scroll glitches when editor is closed and focus is on current input element.\r\n   */\r\n  beforeDisconnect() {\r\n    this.editInput?.blur();\r\n  }\r\n\r\n  /**\r\n   * Get value from input\r\n   */\r\n  getValue() {\r\n    return this.editInput?.value;\r\n  }\r\n\r\n  /**\r\n   * Render method for Editor plugin.\r\n   * Renders input element with passed data from cell.\r\n   * @param {Function} h - h function from stencil render.\r\n   * @param {Object} _additionalData - additional data from plugin.\r\n   * @returns {VNode} - input element.\r\n   */\r\n  render(h: typeof createElement, _additionalData: any): VNode | VNode[] {\r\n    return h('input', {\r\n      type: 'text',\r\n      enterKeyHint: 'enter',\r\n      // set input value from cell data\r\n      value: this.editCell?.val ?? '',\r\n      // save input element as ref for further usage\r\n      ref: (el: HTMLInputElement | null) => {\r\n        this.editInput = el;\r\n      },\r\n      // listen to keydown event on input element\r\n      onKeyDown: (e: KeyboardEvent) => this.onKeyDown(e),\r\n    });\r\n  }\r\n}\r\n"]}