@revolist/revogrid 4.9.41 → 4.9.42

package/dist/collection/components/extra/revogr-extra.js

@@ -1,13 +1,30 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h } from "@stencil/core";
 /**
  * Contains extra elements for stencil components.
  * Performs rendering and updates for external components.
- */
+ *
+ * @example
+ * In Plugins if you want to add extra elements to grid and use stenciljs vnodes reactivity:
+ * function paginationPanel(this: PaginationPlugin, config: { refresh: () => void }) {
+ *    // use `config.refresh()` for component to re-render
+ *    return h('div')
+ * }
+ *
+ * revogrid.registerVNode = [
+ *    ...existingNodes,
+ *     paginationPanel.bind(this)
+ * ];
+
+
 /**
  * @internal
  */
 export class RevoGridExtra {
     constructor() {
-        this.nodes = null;
+        this.nodes = [];
         this.update = 1;
     }
     /**
@@ -19,7 +36,23 @@ export class RevoGridExtra {
     }
     render() {
         var _a;
-        return (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.map(node => typeof node === 'function' ? node() : node);
+        return (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.map(node => {
+            // Check if node is a function or a stencil component
+            // If function wrap it in a stencil component with the refresh function
+            if (typeof node === 'function') {
+                const config = {};
+                const getNodes = () => [node({ refresh: () => { var _a; return (_a = config.refresh) === null || _a === void 0 ? void 0 : _a.call(config); } })];
+                return (h("revogr-extra", { nodes: getNodes(), ref: (el) => {
+                        if (el) {
+                            // Update exclusively for current node
+                            config.refresh = () => {
+                                el.nodes = getNodes();
+                            };
+                        }
+                    } }));
+            }
+            return node;
+        });
     }
     static get is() { return "revogr-extra"; }
     static get properties() {
@@ -28,13 +61,18 @@ export class RevoGridExtra {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "((VNode) |  (() => VNode))[] | null",
-                    "resolved": "((VNode | (() => VNode))[]) | null",
+                    "original": "(\n    | VNode\n    | ((c: ExtraNodeFuncConfig) => VNode)\n  )[]",
+                    "resolved": "(VNode | ((c: ExtraNodeFuncConfig) => VNode))[]",
                     "references": {
                         "VNode": {
                             "location": "import",
                             "path": "@stencil/core",
                             "id": "node_modules::VNode"
+                        },
+                        "ExtraNodeFuncConfig": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ExtraNodeFuncConfig"
                         }
                     }
                 },
@@ -44,7 +82,7 @@ export class RevoGridExtra {
                     "tags": [],
                     "text": "Nodes to render"
                 },
-                "defaultValue": "null"
+                "defaultValue": "[]"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"revogr-extra.js","sourceRoot":"","sources":["../../../src/components/extra/revogr-extra.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,MAAM,EACN,IAAI,EACJ,KAAK,GAEN,MAAM,eAAe,CAAC;AAEvB;;;GAGG;AACH;;GAEG;AAIH,MAAM,OAAO,aAAa;;qBAI6B,IAAI;sBAIvC,CAAC;;IAEnB;;;OAGG;IACO,KAAK,CAAC,OAAO;QACnB,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;IACtB,CAAC;IAED,MAAM;;QACJ,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC7E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n    Component,\n    Method,\n    Prop,\n    State,\n    VNode,\n  } from '@stencil/core';\n  \n  /**\n   * Contains extra elements for stencil components.\n   * Performs rendering and updates for external components.\n   */\n  /**\n   * @internal\n   */\n  @Component({\n    tag: 'revogr-extra',\n  })\n  export class RevoGridExtra {\n    /**\n     * Nodes to render\n     */\n    @Prop() nodes: ((VNode) |  (() => VNode))[] | null = null;\n    /**\n     * Force component to re-render\n     */\n    @State() update = 1\n\n    /**\n     * Refreshes the extra component. Useful if you want to manually\n     * force the component to re-render.\n     */\n    @Method() async refresh() {\n        this.update *= -1;\n    }\n\n    render() {\n      return this.nodes?.map(node => typeof node === 'function' ? node() : node);\n    }\n  }\n  "]}
+{"version":3,"file":"revogr-extra.js","sourceRoot":"","sources":["../../../src/components/extra/revogr-extra.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAS,MAAM,eAAe,CAAC;AAGzE;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,MAAM,OAAO,aAAa;;qBAOlB,EAAE;sBAIU,CAAC;;IAEnB;;;OAGG;IACO,KAAK,CAAC,OAAO;QACrB,IAAI,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,MAAM;;QACJ,OAAO,MAAA,IAAI,CAAC,KAAK,0CAAE,GAAG,CAAC,IAAI,CAAC,EAAE;YAC5B,qDAAqD;YACrD,uEAAuE;YACvE,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE,CAAC;gBAC/B,MAAM,MAAM,GAAiC,EAAE,CAAC;gBAChD,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,MAAM,CAAC,OAAO,sDAAI,CAAA,EAAA,EAAE,CAAC,CAAC,CAAC;gBAErE,OAAO,CACL,oBACE,KAAK,EAAE,QAAQ,EAAE,EACjB,GAAG,EAAE,CAAC,EAA2B,EAAE,EAAE;wBACnC,IAAI,EAAE,EAAE,CAAC;4BACP,sCAAsC;4BACtC,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE;gCACpB,EAAE,CAAC,KAAK,GAAG,QAAQ,EAAE,CAAC;4BACxB,CAAC,CAAC;wBACJ,CAAC;oBACH,CAAC,GACD,CACH,CAAC;YACJ,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Method, Prop, State, VNode } from '@stencil/core';\nimport type { ExtraNodeFuncConfig } from '@type';\n\n/**\n * Contains extra elements for stencil components.\n * Performs rendering and updates for external components.\n * \n * @example\n * In Plugins if you want to add extra elements to grid and use stenciljs vnodes reactivity:\n * function paginationPanel(this: PaginationPlugin, config: { refresh: () => void }) {\n *    // use `config.refresh()` for component to re-render\n *    return h('div')\n * }\n * \n * revogrid.registerVNode = [\n *    ...existingNodes,\n *     paginationPanel.bind(this)\n * ];\n\n\n/**\n * @internal\n */\n@Component({\n  tag: 'revogr-extra',\n})\nexport class RevoGridExtra {\n  /**\n   * Nodes to render\n   */\n  @Prop() nodes: (\n    | VNode\n    | ((c: ExtraNodeFuncConfig) => VNode)\n  )[] = [];\n  /**\n   * Force component to re-render\n   */\n  @State() update = 1;\n\n  /**\n   * Refreshes the extra component. Useful if you want to manually\n   * force the component to re-render.\n   */\n  @Method() async refresh() {\n    this.update *= -1;\n  }\n\n  render() {\n    return this.nodes?.map(node => {\n      // Check if node is a function or a stencil component\n      // If function wrap it in a stencil component with the refresh function\n      if (typeof node === 'function') {\n        const config: Partial<ExtraNodeFuncConfig> = {};\n        const getNodes = () => [node({ refresh: () => config.refresh?.() })];\n\n        return (\n          <revogr-extra\n            nodes={getNodes()}\n            ref={(el?: HTMLRevogrExtraElement) => {\n              if (el) {\n                // Update exclusively for current node\n                config.refresh = () => {\n                  el.nodes = getNodes();\n                };\n              }\n            }}\n          />\n        );\n      }\n      return node;\n    });\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"header-cell-renderer.js","sourceRoot":"","sources":["../../../src/components/header/header-cell-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAS,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EACL,gBAAgB,GAEjB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAI1B,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,EAAE;IACjD,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,EAAE,CAAC;YACV,SAAS,GAAG,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IACD,MAAM,WAAW,mCACZ,SAAS,KACZ,WAAW,CAAC,CAAa;YACvB,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,eAAe,EAAE;gBACzC,IAAI;gBACJ,KAAK,EAAE,CAAC;aACT,CAAC,CAAC;QACL,CAAC,GACF,CAAC;IACF,OAAO,CACL,EAAC,gBAAgB,oBAAK,WAAW;QAC/B,WAAK,KAAK,EAAC,gBAAgB,IAAE,WAAW,CAAO;QAC9C,QAAQ,CACQ,CACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport { dispatch } from '../../plugins/dispatcher';\nimport { doPropMerge } from '../data/column.service';\nimport {\n  ResizableElement,\n  ResizableElementHTMLAttributes,\n} from './resizable.element';\nimport { ColumnTemplateProp } from '@type';\n\nexport const ON_COLUMN_CLICK = 'columnclick';\n\nexport const HeaderCellRenderer: FunctionalComponent<{\n  props: ResizableElementHTMLAttributes;\n  additionalData: any;\n  data?: ColumnTemplateProp;\n}> = ({ data, props, additionalData }, children) => {\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) {\n      cellProps = doPropMerge(props, extra);\n    }\n  }\n  const resizeProps = {\n    ...cellProps,\n    onMouseDown(e: MouseEvent) {\n      dispatch(e.currentTarget, ON_COLUMN_CLICK, {\n        data,\n        event: e,\n      });\n    },\n  };\n  return (\n    <ResizableElement {...resizeProps}>\n      <div class=\"header-content\">{colTemplate}</div>\n      {children}\n    </ResizableElement>\n  );\n};\n"]}
+{"version":3,"file":"header-cell-renderer.js","sourceRoot":"","sources":["../../../src/components/header/header-cell-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,CAAC,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EACL,gBAAgB,GAEjB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAI1B,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,EAAE;IACjD,IAAI,WAAW,GAAyB,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,KAAI,EAAE,CAAC;IACzD,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,EAAE,CAAC;YACV,SAAS,GAAG,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IACD,MAAM,WAAW,mCACZ,SAAS,KACZ,WAAW,CAAC,CAAa;YACvB,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,eAAe,EAAE;gBACzC,IAAI;gBACJ,KAAK,EAAE,CAAC;aACT,CAAC,CAAC;QACL,CAAC,GACF,CAAC;IACF,OAAO,CACL,EAAC,gBAAgB,oBAAK,WAAW;QAC/B,WAAK,KAAK,EAAC,gBAAgB,IAAE,WAAW,CAAO;QAC9C,QAAQ,CACQ,CACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { type FunctionalComponent, h } from '@stencil/core';\nimport { dispatch } from '../../plugins/dispatcher';\nimport { doPropMerge } from '../data/column.service';\nimport {\n  ResizableElement,\n  ResizableElementHTMLAttributes,\n} from './resizable.element';\nimport { ColumnTemplateProp } from '@type';\n\nexport const ON_COLUMN_CLICK = 'columnclick';\n\nexport const HeaderCellRenderer: FunctionalComponent<{\n  props: ResizableElementHTMLAttributes;\n  additionalData: any;\n  data?: ColumnTemplateProp;\n}> = ({ data, props, additionalData }, children) => {\n  let colTemplate: ReturnType<typeof h> = 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) {\n      cellProps = doPropMerge(props, extra);\n    }\n  }\n  const resizeProps = {\n    ...cellProps,\n    onMouseDown(e: MouseEvent) {\n      dispatch(e.currentTarget, ON_COLUMN_CLICK, {\n        data,\n        event: e,\n      });\n    },\n  };\n  return (\n    <ResizableElement {...resizeProps}>\n      <div class=\"header-content\">{colTemplate}</div>\n      {children}\n    </ResizableElement>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"header-renderer.js","sourceRoot":"","sources":["../../../src/components/header/header-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, VNode } from '@stencil/core';\nimport type {\n  VirtualPositionItem,\n  ColumnTemplateProp,\n  InitialHeaderClick,\n  RangeArea\n} from '@type';\n\nimport { FilterButton } from '../../plugins/filter/filter.button';\nimport { SortingSign } from '../../plugins/sorting/sorting.sign';\nimport { ResizeEvent, ResizeProps } from './resizable.directive';\nimport {\n  DATA_COL,\n  FOCUS_CLASS,\n  HEADER_CLASS,\n  HEADER_SORTABLE_CLASS,\n  MIN_COL_SIZE,\n} from '../../utils/consts';\nimport { HeaderCellRenderer } from './header-cell-renderer';\nimport { ResizableElementHTMLAttributes } from './resizable.element';\n\nexport type HeaderRenderProps = {\n  column: VirtualPositionItem;\n  additionalData: any;\n  data: ColumnTemplateProp;\n  range?: RangeArea | null;\n  canResize?: boolean;\n  canFilter?: boolean;\n  onResize?(e: ResizeEvent): void;\n  onClick?(data: InitialHeaderClick): void;\n  onDblClick?(data: InitialHeaderClick): void;\n} & Partial<Pick<ResizeProps, 'active'>>;\n\nconst HeaderRenderer = (p: HeaderRenderProps): VNode => {\n  const cellClass: { [key: string]: boolean } = {\n    [HEADER_CLASS]: true,\n    [HEADER_SORTABLE_CLASS]: !!p.data?.sortable,\n  };\n  if (p.data?.order) {\n    cellClass[p.data.order] = true;\n  }\n  const dataProps: ResizableElementHTMLAttributes = {\n    [DATA_COL]: p.column.itemIndex,\n    canResize: p.canResize,\n    minWidth: p.data?.minSize || MIN_COL_SIZE,\n    maxWidth: p.data?.maxSize,\n    active: p.active || ['r'],\n    class: cellClass,\n    style: {\n      width: `${p.column.size}px`,\n      transform: `translateX(${p.column.start}px)`,\n    },\n    onResize: p.onResize,\n    onDblClick(originalEvent: MouseEvent) {\n      p.onDblClick?.({\n        column: p.data,\n        index: p.column.itemIndex,\n        originalEvent,\n        providers: p.data.providers,\n      });\n    },\n    onClick(originalEvent: MouseEvent) {\n      if (originalEvent.defaultPrevented || !p.onClick) {\n        return;\n      }\n      p.onClick({\n        column: p.data,\n        index: p.column.itemIndex,\n        originalEvent,\n        providers: p.data.providers,\n      });\n    },\n  };\n  if (p.range) {\n    if (p.column.itemIndex >= p.range.x && p.column.itemIndex <= p.range.x1) {\n      if (typeof dataProps.class === 'object') {\n        dataProps.class[FOCUS_CLASS] = true;\n      }\n    }\n  }\n  return (\n    <HeaderCellRenderer\n      data={p.data}\n      props={dataProps}\n      additionalData={p.additionalData}\n    >\n      {<SortingSign column={p.data} />}\n      {p.canFilter && p.data?.filter !== false ? (\n        <FilterButton column={p.data} />\n      ) : (\n        ''\n      )}\n    </HeaderCellRenderer>\n  );\n};\n\nexport default HeaderRenderer;\n"]}
+{"version":3,"file":"header-renderer.js","sourceRoot":"","sources":["../../../src/components/header/header-renderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type {\n  VirtualPositionItem,\n  ColumnTemplateProp,\n  InitialHeaderClick,\n  RangeArea\n} from '@type';\n\nimport { FilterButton } from '../../plugins/filter/filter.button';\nimport { SortingSign } from '../../plugins/sorting/sorting.sign';\nimport { ResizeEvent, ResizeProps } from './resizable.directive';\nimport {\n  DATA_COL,\n  FOCUS_CLASS,\n  HEADER_CLASS,\n  HEADER_SORTABLE_CLASS,\n  MIN_COL_SIZE,\n} from '../../utils/consts';\nimport { HeaderCellRenderer } from './header-cell-renderer';\nimport { ResizableElementHTMLAttributes } from './resizable.element';\n\nexport type HeaderRenderProps = {\n  column: VirtualPositionItem;\n  additionalData: any;\n  data: ColumnTemplateProp;\n  range?: RangeArea | null;\n  canResize?: boolean;\n  canFilter?: boolean;\n  onResize?(e: ResizeEvent): void;\n  onClick?(data: InitialHeaderClick): void;\n  onDblClick?(data: InitialHeaderClick): void;\n} & Partial<Pick<ResizeProps, 'active'>>;\n\nconst HeaderRenderer = (p: HeaderRenderProps): ReturnType<typeof h> => {\n  const cellClass: { [key: string]: boolean } = {\n    [HEADER_CLASS]: true,\n    [HEADER_SORTABLE_CLASS]: !!p.data?.sortable,\n  };\n  if (p.data?.order) {\n    cellClass[p.data.order] = true;\n  }\n  const dataProps: ResizableElementHTMLAttributes = {\n    [DATA_COL]: p.column.itemIndex,\n    canResize: p.canResize,\n    minWidth: p.data?.minSize || MIN_COL_SIZE,\n    maxWidth: p.data?.maxSize,\n    active: p.active || ['r'],\n    class: cellClass,\n    style: {\n      width: `${p.column.size}px`,\n      transform: `translateX(${p.column.start}px)`,\n    },\n    onResize: p.onResize,\n    onDblClick(originalEvent: MouseEvent) {\n      p.onDblClick?.({\n        column: p.data,\n        index: p.column.itemIndex,\n        originalEvent,\n        providers: p.data.providers,\n      });\n    },\n    onClick(originalEvent: MouseEvent) {\n      if (originalEvent.defaultPrevented || !p.onClick) {\n        return;\n      }\n      p.onClick({\n        column: p.data,\n        index: p.column.itemIndex,\n        originalEvent,\n        providers: p.data.providers,\n      });\n    },\n  };\n  if (p.range) {\n    if (p.column.itemIndex >= p.range.x && p.column.itemIndex <= p.range.x1) {\n      if (typeof dataProps.class === 'object') {\n        dataProps.class[FOCUS_CLASS] = true;\n      }\n    }\n  }\n  return (\n    <HeaderCellRenderer\n      data={p.data}\n      props={dataProps}\n      additionalData={p.additionalData}\n    >\n      {<SortingSign column={p.data} />}\n      {p.canFilter && p.data?.filter !== false ? (\n        <FilterButton column={p.data} />\n      ) : (\n        ''\n      )}\n    </HeaderCellRenderer>\n  );\n};\n\nexport default HeaderRenderer;\n"]}

package/dist/collection/components/header/resizable.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.element.js","sourceRoot":"","sources":["../../../src/components/header/resizable.element.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAS,MAAM,eAAe,CAAC;AAC9D,OAAO,EAEL,eAAe,EACf,YAAY,GACb,MAAM,uBAAuB,CAAC;AAK/B,MAAM,CAAC,MAAM,gBAAgB,GAAwB,CACnD,KAAqC,EACrC,QAAiB,EACjB,EAAE;IACF,MAAM,SAAS,GAAY,EAAE,CAAC;IAC9B,MAAM,SAAS,GACb,CAAC,KAAK,CAAC,SAAS;QACd,IAAI,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE;;YAC7B,IAAI,CAAC,CAAC,SAAS,KAAK,YAAY,CAAC,GAAG,EAAE,CAAC;gBACrC,MAAA,KAAK,CAAC,QAAQ,sDAAG,CAAC,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QACL,IAAI,CAAC;IAEP,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YACpB,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC3B,SAAS,CAAC,IAAI,CACZ,WACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAChC,UAAU,EAAE,CAAC,CAAC,EAAE;;wBACd,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,MAAA,KAAK,CAAC,UAAU,sDAAG,CAAC,CAAC,CAAC;oBACxB,CAAC,EACD,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,CAAC,CAAC,EACxD,YAAY,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,CAAC,CAAC,EACzD,KAAK,EAAE,uBAAuB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAC/C,CACH,CAAC;YACJ,CAAC;QACH,CAAC;aAAM,CAAC;YACN,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC3B,SAAS,CAAC,IAAI,CACZ,WACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAChC,YAAY,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACnD,UAAU,EAAE,CAAC,CAAC,EAAE;;wBACd,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,MAAA,KAAK,CAAC,UAAU,sDAAG,CAAC,CAAC,CAAC;oBACxB,CAAC,EACD,KAAK,EAAE,iCAAiC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GACzD,CACH,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,CACL,2BAAS,KAAK,IAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,CAAC,CAAC,CAAA;QAC7C,QAAQ;QACR,SAAS,CACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h, VNode } from '@stencil/core';\nimport {\n  ResizeProps,\n  ResizeDirective,\n  ResizeEvents,\n} from './resizable.directive';\nimport type { CellProps } from '@type';\n\nexport type ResizableElementHTMLAttributes = Partial<ResizeProps> & CellProps;\n\nexport const ResizableElement: FunctionalComponent = (\n  props: ResizableElementHTMLAttributes,\n  children: VNode[],\n) => {\n  const resizeEls: VNode[] = [];\n  const directive =\n    (props.canResize &&\n      new ResizeDirective(props, e => {\n        if (e.eventName === ResizeEvents.end) {\n          props.onResize?.(e);\n        }\n      })) ||\n    null;\n\n  if (props.active) {\n    if (props.canResize) {\n      for (let p in props.active) {\n        resizeEls.push(\n          <div\n            onClick={e => e.preventDefault()}\n            onDblClick={e => {\n              e.preventDefault();\n              props.onDblClick?.(e);\n            }}\n            onMouseDown={(e: MouseEvent) => directive?.handleDown(e)}\n            onTouchStart={(e: TouchEvent) => directive?.handleDown(e)}\n            class={`resizable resizable-${props.active[p]}`}\n          />,\n        );\n      }\n    } else {\n      for (let p in props.active) {\n        resizeEls.push(\n          <div\n            onClick={e => e.preventDefault()}\n            onTouchStart={(e: TouchEvent) => e.preventDefault()}\n            onDblClick={e => {\n              e.preventDefault();\n              props.onDblClick?.(e);\n            }}\n            class={`no-resize resizable resizable-${props.active[p]}`}\n          />,\n        );\n      }\n    }\n  }\n  return (\n    <div {...props} ref={e => e && directive?.set(e)}>\n      {children}\n      {resizeEls}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"resizable.element.js","sourceRoot":"","sources":["../../../src/components/header/resizable.element.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,CAAC,EAAc,MAAM,eAAe,CAAC;AACxE,OAAO,EAEL,eAAe,EACf,YAAY,GACb,MAAM,uBAAuB,CAAC;AAK/B,MAAM,CAAC,MAAM,gBAAgB,GAAwB,CACnD,KAAqC,EACrC,QAAiB,EACjB,EAAE;IACF,MAAM,SAAS,GAAY,EAAE,CAAC;IAC9B,MAAM,SAAS,GACb,CAAC,KAAK,CAAC,SAAS;QACd,IAAI,eAAe,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE;;YAC7B,IAAI,CAAC,CAAC,SAAS,KAAK,YAAY,CAAC,GAAG,EAAE,CAAC;gBACrC,MAAA,KAAK,CAAC,QAAQ,sDAAG,CAAC,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QACL,IAAI,CAAC;IAEP,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;YACpB,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC3B,SAAS,CAAC,IAAI,CACZ,WACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAChC,UAAU,EAAE,CAAC,CAAC,EAAE;;wBACd,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,MAAA,KAAK,CAAC,UAAU,sDAAG,CAAC,CAAC,CAAC;oBACxB,CAAC,EACD,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,CAAC,CAAC,EACxD,YAAY,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,CAAC,CAAC,EACzD,KAAK,EAAE,uBAAuB,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAC/C,CACH,CAAC;YACJ,CAAC;QACH,CAAC;aAAM,CAAC;YACN,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC3B,SAAS,CAAC,IAAI,CACZ,WACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAChC,YAAY,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACnD,UAAU,EAAE,CAAC,CAAC,EAAE;;wBACd,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,MAAA,KAAK,CAAC,UAAU,sDAAG,CAAC,CAAC,CAAC;oBACxB,CAAC,EACD,KAAK,EAAE,iCAAiC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GACzD,CACH,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,CACL,2BAAS,KAAK,IAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,CAAC,CAAC,CAAA;QAC7C,QAAQ;QACR,SAAS,CACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { type FunctionalComponent, h, type VNode } from '@stencil/core';\nimport {\n  ResizeProps,\n  ResizeDirective,\n  ResizeEvents,\n} from './resizable.directive';\nimport type { CellProps } from '@type';\n\nexport type ResizableElementHTMLAttributes = Partial<ResizeProps> & CellProps;\n\nexport const ResizableElement: FunctionalComponent = (\n  props: ResizableElementHTMLAttributes,\n  children: VNode[],\n) => {\n  const resizeEls: VNode[] = [];\n  const directive =\n    (props.canResize &&\n      new ResizeDirective(props, e => {\n        if (e.eventName === ResizeEvents.end) {\n          props.onResize?.(e);\n        }\n      })) ||\n    null;\n\n  if (props.active) {\n    if (props.canResize) {\n      for (let p in props.active) {\n        resizeEls.push(\n          <div\n            onClick={e => e.preventDefault()}\n            onDblClick={e => {\n              e.preventDefault();\n              props.onDblClick?.(e);\n            }}\n            onMouseDown={(e: MouseEvent) => directive?.handleDown(e)}\n            onTouchStart={(e: TouchEvent) => directive?.handleDown(e)}\n            class={`resizable resizable-${props.active[p]}`}\n          />,\n        );\n      }\n    } else {\n      for (let p in props.active) {\n        resizeEls.push(\n          <div\n            onClick={e => e.preventDefault()}\n            onTouchStart={(e: TouchEvent) => e.preventDefault()}\n            onDblClick={e => {\n              e.preventDefault();\n              props.onDblClick?.(e);\n            }}\n            class={`no-resize resizable resizable-${props.active[p]}`}\n          />,\n        );\n      }\n    }\n  }\n  return (\n    <div {...props} ref={e => e && directive?.set(e)}>\n      {children}\n      {resizeEls}\n    </div>\n  );\n};\n"]}

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

@@ -38,7 +38,7 @@
   position: relative;
   overflow: hidden;
   color: #fff;
-  background-color: #6200ee;
+  background-color: #4545ff;
   height: 32px;
   line-height: 32px;
   padding: 0 15px;
@@ -50,24 +50,27 @@
 }
 .revo-button.green {
   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: 1px solid #cedefa;
+.revo-button.outline {
+  border: 1px solid #dbdbdb;
   line-height: 30px;
   background: none;
   color: #000;
   box-shadow: none;
 }
 
+revo-grid[theme^=dark] .revo-button.outline {
+  border: 1px solid #404040;
+  color: #d8d8d8;
+}
+
 revogr-header {
   position: relative;
   z-index: 5;

package/dist/collection/components/header/revogr-header.js

@@ -75,8 +75,8 @@ export class RevogrHeaderComponent {
             visibleProps[colData === null || colData === void 0 ? void 0 : colData.prop] = rgCol.itemIndex;
         }
         return [
-            h("div", { key: '390f1e665fab83bc1e46da6c975161e137194663', class: "group-rgRow" }, h(ColumnGroupsRenderer, { key: 'c3ba86f99bef4e7529c50b2a64cf537654a63a2e', canResize: this.canResize, active: this.resizeHandler, visibleProps: visibleProps, providers: this.providers, groups: this.groups, dimensionCol: this.dimensionCol.state, depth: this.groupingDepth, onResize: (changedX, startIndex, endIndex) => this.onResizeGroup(changedX, startIndex, endIndex), additionalData: this.additionalData })),
-            h("div", { key: 'a70d97921dccd984b35517ea2967b8d24f255fbd', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
+            h("div", { key: 'f01cf39610e7e66f7bf4fa09f52455875a940ced', class: "group-rgRow" }, h(ColumnGroupsRenderer, { key: 'fa60d0aa9bb63d86f7e07ed7c1372207147a13c4', canResize: this.canResize, active: this.resizeHandler, visibleProps: visibleProps, providers: this.providers, groups: this.groups, dimensionCol: this.dimensionCol.state, depth: this.groupingDepth, onResize: (changedX, startIndex, endIndex) => this.onResizeGroup(changedX, startIndex, endIndex), additionalData: this.additionalData })),
+            h("div", { key: '65ab0e1d0ea5a548c7dc4abfda116beb29316b3d', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
         ];
     }
     get providers() {
@@ -111,8 +111,8 @@ export class RevogrHeaderComponent {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "ViewportState": {
                             "location": "import",
@@ -137,8 +137,8 @@ export class RevogrHeaderComponent {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DimensionSettingsState": {
                             "location": "import",
@@ -163,8 +163,8 @@ export class RevogrHeaderComponent {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "SelectionStoreState": {
                             "location": "import",
@@ -473,7 +473,7 @@ export class RevogrHeaderComponent {
                 },
                 "complexType": {
                     "original": "Providers<DimensionCols | 'rowHeaders'>",
-                    "resolved": "{ type: DimensionCols | \"rowHeaders\"; readonly: boolean; data: Observable<DataSourceState<any, any>> | ColumnRegular[]; viewport: Observable<ViewportState>; dimension: Observable<DimensionSettingsState>; selection: Observable<SelectionStoreState>; }",
+                    "resolved": "{ type: DimensionCols | \"rowHeaders\"; readonly: boolean; data: ColumnRegular[] | Observable<DataSourceState<any, any>>; viewport: Observable<ViewportState>; dimension: Observable<DimensionSettingsState>; selection: Observable<SelectionStoreState>; }",
                     "references": {
                         "Providers": {
                             "location": "import",

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

@@ -1 +1 @@
-{"version":3,"file":"revogr-header.js","sourceRoot":"","sources":["../../../src/components/header/revogr-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Prop,\n} from '@stencil/core';\nimport { HTMLStencilElement, VNode } from '@stencil/core/internal';\nimport keyBy from 'lodash/keyBy';\n\nimport { HEADER_ACTUAL_ROW_CLASS, HEADER_ROW_CLASS } from '../../utils/consts';\nimport { Groups } from '@store';\nimport HeaderRenderer, { HeaderRenderProps } from './header-renderer';\nimport ColumnGroupsRenderer from '../../plugins/groupingColumn/columnGroupsRenderer';\nimport { ResizeProps } from './resizable.directive';\nimport {\n  ColumnRegular,\n  DimensionSettingsState,\n  InitialHeaderClick,\n  Providers,\n  ViewportState,\n  ViewSettingSizeProp,\n  DimensionCols,\n  SelectionStoreState,\n} from '@type';\nimport { Observable } from '../../utils/store.utils';\n\n@Component({\n  tag: 'revogr-header',\n  styleUrl: 'revogr-header-style.scss',\n})\nexport class RevogrHeaderComponent {\n  // #region Properties\n  /**\n   * Stores\n   */\n  /** Viewport X */\n  @Prop() viewportCol: Observable<ViewportState>;\n  /** Dimension settings X */\n  @Prop() dimensionCol: Observable<DimensionSettingsState>;\n  /** Selection, range, focus */\n  @Prop() selectionStore: Observable<SelectionStoreState>;\n\n  /**\n   * Column groups\n   */\n  @Prop() groups: Groups;\n  /**\n   * Grouping depth, how many levels of grouping\n   */\n  @Prop() groupingDepth = 0;\n\n  /**\n   * Readonly mode\n   */\n  @Prop() readonly: boolean;\n  /**\n   * If columns can be resized\n   */\n  @Prop() canResize: boolean;\n  /**\n   * Defines resize position\n   */\n  @Prop() resizeHandler: ResizeProps['active'];\n\n  /**\n   * Columns - defines an array of grid columns.\n   */\n  @Prop() colData: ColumnRegular[];\n\n  /**\n   * Column filter\n   */\n  @Prop() columnFilter: boolean;\n\n  /**\n   * Column type\n   */\n  @Prop() type!: DimensionCols | 'rowHeaders';\n\n  /**\n   * Extra properties to pass into header renderer, such as vue or react components to handle parent\n   */\n  @Prop() additionalData: any = {};\n  // #endregion\n\n  // #region Events\n\n  /**\n   * On initial header click\n   */\n  @Event({\n    eventName: 'beforeheaderclick',\n  })\n  initialHeaderClick: EventEmitter<InitialHeaderClick>;\n\n  /**\n   * On header resize\n   */\n  @Event({\n    eventName: 'headerresize',\n  })\n  headerresize: EventEmitter<ViewSettingSizeProp>;\n\n  /**\n   * On before header resize\n   */\n  @Event({ eventName: 'beforeheaderresize', cancelable: true })\n  beforeResize: EventEmitter<ColumnRegular[]>;\n\n  /**\n   * On header double click\n   */\n  @Event({\n    eventName: 'headerdblclick',\n  })\n  headerdblClick: EventEmitter<InitialHeaderClick>;\n\n  /**\n   * Before each header cell render function. Allows to override cell properties\n   */\n  @Event({ eventName: 'beforeheaderrender' })\n  beforeHeaderRender: EventEmitter<HeaderRenderProps>;\n\n  /**\n   * After all header cells rendered. Finalizes cell rendering.\n   */\n  @Event({ eventName: 'afterheaderrender' })\n  afterHeaderRender: EventEmitter<Providers<DimensionCols | 'rowHeaders'>>;\n\n  // #endregion\n\n  @Element() element!: HTMLStencilElement;\n\n  private onResize({ width }: { width?: number }, index: number) {\n    const col = this.colData[index];\n    const event = this.beforeResize.emit([\n      {\n        ...col,\n        size: width || undefined,\n      },\n    ]);\n    if (event.defaultPrevented) {\n      return;\n    }\n    this.headerresize.emit({ [index]: width || 0 });\n  }\n\n  private onResizeGroup(\n    changedX: number,\n    startIndex: number,\n    endIndex: number,\n  ) {\n    const sizes: ViewSettingSizeProp = {};\n    const cols = keyBy(this.viewportCol.get('items'), 'itemIndex');\n    const change = changedX / (endIndex - startIndex + 1);\n    for (let i = startIndex; i <= endIndex; i++) {\n      const item = cols[i];\n      if (item) {\n        sizes[i] = item.size + change;\n      }\n    }\n    this.headerresize.emit(sizes);\n  }\n\n  componentDidRender() {\n    this.afterHeaderRender.emit(this.providers);\n  }\n\n  render() {\n    const cols = this.viewportCol.get('items');\n    const range = this.selectionStore?.get('range');\n    const cells: VNode[] = [];\n    const visibleProps: { [prop: string]: number } = {};\n\n    // render header columns\n    for (let rgCol of cols) {\n      const colData = this.colData[rgCol.itemIndex];\n      const props: HeaderRenderProps = {\n        range: range,\n        column: rgCol,\n        data: {\n          ...colData,\n          index: rgCol.itemIndex,\n          providers: this.providers,\n        },\n        canFilter: !!this.columnFilter,\n        canResize: this.canResize,\n        active: this.resizeHandler,\n        onResize: e => this.onResize(e, rgCol.itemIndex),\n        onDblClick: e => this.headerdblClick.emit(e),\n        onClick: e => this.initialHeaderClick.emit(e),\n        additionalData: this.additionalData,\n      };\n      const event = this.beforeHeaderRender.emit(props);\n      if (event.defaultPrevented) {\n        continue;\n      }\n      cells.push(<HeaderRenderer {...event.detail} />);\n      visibleProps[colData?.prop] = rgCol.itemIndex;\n    }\n\n    return [\n      <div class=\"group-rgRow\">\n        <ColumnGroupsRenderer\n          canResize={this.canResize}\n          active={this.resizeHandler}\n          visibleProps={visibleProps}\n          providers={this.providers}\n          groups={this.groups}\n          dimensionCol={this.dimensionCol.state}\n          depth={this.groupingDepth}\n          onResize={(changedX, startIndex, endIndex) =>\n            this.onResizeGroup(changedX, startIndex, endIndex)\n          }\n          additionalData={this.additionalData}\n        />\n      </div>,\n      <div class={`${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}`}>\n        {cells}\n      </div>,\n    ];\n  }\n\n  get providers(): Providers<DimensionCols | 'rowHeaders'> {\n    return {\n      type: this.type,\n      readonly: this.readonly,\n      data: this.colData,\n      viewport: this.viewportCol,\n      dimension: this.dimensionCol,\n      selection: this.selectionStore,\n    };\n  }\n}\n"]}
+{"version":3,"file":"revogr-header.js","sourceRoot":"","sources":["../../../src/components/header/revogr-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Prop,\n  type VNode,\n} from '@stencil/core';\nimport keyBy from 'lodash/keyBy';\n\nimport { HEADER_ACTUAL_ROW_CLASS, HEADER_ROW_CLASS } from '../../utils/consts';\nimport { Groups } from '@store';\nimport HeaderRenderer, { HeaderRenderProps } from './header-renderer';\nimport ColumnGroupsRenderer from '../../plugins/groupingColumn/columnGroupsRenderer';\nimport { ResizeProps } from './resizable.directive';\nimport {\n  ColumnRegular,\n  DimensionSettingsState,\n  InitialHeaderClick,\n  Providers,\n  ViewportState,\n  ViewSettingSizeProp,\n  DimensionCols,\n  SelectionStoreState,\n} from '@type';\nimport { Observable } from '../../utils';\n\n@Component({\n  tag: 'revogr-header',\n  styleUrl: 'revogr-header-style.scss',\n})\nexport class RevogrHeaderComponent {\n  // #region Properties\n  /**\n   * Stores\n   */\n  /** Viewport X */\n  @Prop() viewportCol: Observable<ViewportState>;\n  /** Dimension settings X */\n  @Prop() dimensionCol: Observable<DimensionSettingsState>;\n  /** Selection, range, focus */\n  @Prop() selectionStore: Observable<SelectionStoreState>;\n\n  /**\n   * Column groups\n   */\n  @Prop() groups: Groups;\n  /**\n   * Grouping depth, how many levels of grouping\n   */\n  @Prop() groupingDepth = 0;\n\n  /**\n   * Readonly mode\n   */\n  @Prop() readonly: boolean;\n  /**\n   * If columns can be resized\n   */\n  @Prop() canResize: boolean;\n  /**\n   * Defines resize position\n   */\n  @Prop() resizeHandler: ResizeProps['active'];\n\n  /**\n   * Columns - defines an array of grid columns.\n   */\n  @Prop() colData: ColumnRegular[];\n\n  /**\n   * Column filter\n   */\n  @Prop() columnFilter: boolean;\n\n  /**\n   * Column type\n   */\n  @Prop() type!: DimensionCols | 'rowHeaders';\n\n  /**\n   * Extra properties to pass into header renderer, such as vue or react components to handle parent\n   */\n  @Prop() additionalData: any = {};\n  // #endregion\n\n  // #region Events\n\n  /**\n   * On initial header click\n   */\n  @Event({\n    eventName: 'beforeheaderclick',\n  })\n  initialHeaderClick: EventEmitter<InitialHeaderClick>;\n\n  /**\n   * On header resize\n   */\n  @Event({\n    eventName: 'headerresize',\n  })\n  headerresize: EventEmitter<ViewSettingSizeProp>;\n\n  /**\n   * On before header resize\n   */\n  @Event({ eventName: 'beforeheaderresize', cancelable: true })\n  beforeResize: EventEmitter<ColumnRegular[]>;\n\n  /**\n   * On header double click\n   */\n  @Event({\n    eventName: 'headerdblclick',\n  })\n  headerdblClick: EventEmitter<InitialHeaderClick>;\n\n  /**\n   * Before each header cell render function. Allows to override cell properties\n   */\n  @Event({ eventName: 'beforeheaderrender' })\n  beforeHeaderRender: EventEmitter<HeaderRenderProps>;\n\n  /**\n   * After all header cells rendered. Finalizes cell rendering.\n   */\n  @Event({ eventName: 'afterheaderrender' })\n  afterHeaderRender: EventEmitter<Providers<DimensionCols | 'rowHeaders'>>;\n\n  // #endregion\n\n  @Element() element!: HTMLElement;\n\n  private onResize({ width }: { width?: number }, index: number) {\n    const col = this.colData[index];\n    const event = this.beforeResize.emit([\n      {\n        ...col,\n        size: width || undefined,\n      },\n    ]);\n    if (event.defaultPrevented) {\n      return;\n    }\n    this.headerresize.emit({ [index]: width || 0 });\n  }\n\n  private onResizeGroup(\n    changedX: number,\n    startIndex: number,\n    endIndex: number,\n  ) {\n    const sizes: ViewSettingSizeProp = {};\n    const cols = keyBy(this.viewportCol.get('items'), 'itemIndex');\n    const change = changedX / (endIndex - startIndex + 1);\n    for (let i = startIndex; i <= endIndex; i++) {\n      const item = cols[i];\n      if (item) {\n        sizes[i] = item.size + change;\n      }\n    }\n    this.headerresize.emit(sizes);\n  }\n\n  componentDidRender() {\n    this.afterHeaderRender.emit(this.providers);\n  }\n\n  render() {\n    const cols = this.viewportCol.get('items');\n    const range = this.selectionStore?.get('range');\n    const cells: VNode[] = [];\n    const visibleProps: { [prop: string]: number } = {};\n\n    // render header columns\n    for (let rgCol of cols) {\n      const colData = this.colData[rgCol.itemIndex];\n      const props: HeaderRenderProps = {\n        range: range,\n        column: rgCol,\n        data: {\n          ...colData,\n          index: rgCol.itemIndex,\n          providers: this.providers,\n        },\n        canFilter: !!this.columnFilter,\n        canResize: this.canResize,\n        active: this.resizeHandler,\n        onResize: e => this.onResize(e, rgCol.itemIndex),\n        onDblClick: e => this.headerdblClick.emit(e),\n        onClick: e => this.initialHeaderClick.emit(e),\n        additionalData: this.additionalData,\n      };\n      const event = this.beforeHeaderRender.emit(props);\n      if (event.defaultPrevented) {\n        continue;\n      }\n      cells.push(<HeaderRenderer {...event.detail} />);\n      visibleProps[colData?.prop] = rgCol.itemIndex;\n    }\n\n    return [\n      <div class=\"group-rgRow\">\n        <ColumnGroupsRenderer\n          canResize={this.canResize}\n          active={this.resizeHandler}\n          visibleProps={visibleProps}\n          providers={this.providers}\n          groups={this.groups}\n          dimensionCol={this.dimensionCol.state}\n          depth={this.groupingDepth}\n          onResize={(changedX, startIndex, endIndex) =>\n            this.onResizeGroup(changedX, startIndex, endIndex)\n          }\n          additionalData={this.additionalData}\n        />\n      </div>,\n      <div class={`${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}`}>\n        {cells}\n      </div>,\n    ];\n  }\n\n  get providers(): Providers<DimensionCols | 'rowHeaders'> {\n    return {\n      type: this.type,\n      readonly: this.readonly,\n      data: this.colData,\n      viewport: this.viewportCol,\n      dimension: this.dimensionCol,\n      selection: this.selectionStore,\n    };\n  }\n}\n"]}

package/dist/collection/components/order/order-renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"order-renderer.js","sourceRoot":"","sources":["../../../src/components/order/order-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAS,MAAM,eAAe,CAAC;AAMzC;;GAEG;AACH,MAAM,OAAO,cAAc;IAA3B;QACU,YAAO,GAAG,CAAC,CAAC;IAoCtB,CAAC;IA9BC,KAAK,CAAC,MAAmB,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAA0D;;QACrG,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACzC,MAAA,IAAI,CAAC,EAAE,0CAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IACD,GAAG;;QACD,MAAA,IAAI,CAAC,EAAE,0CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IACD,IAAI,CAAC,GAAiB;QACpB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IACD,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAQ;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;QACrC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;IACtC,CAAC;IAEO,WAAW,CAAC,CAAS;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC;IACpD,CAAC;CACF;AAED,MAAM,aAAa,GAAG,CAAC,EAAE,GAAG,EAAS,EAAW,EAAE;IAChD,MAAM,OAAO,GAAG,IAAI,cAAc,EAAE,CAAC;IACrC,GAAG,CAAC,OAAO,CAAC,CAAC;IACb,OAAO,CACL,WAAK,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC;QAC9D,WAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;YACxD,YAAM,KAAK,EAAC,eAAe,GAAG;YAC9B,YAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,GAAI,CAClC;QACN,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,GAAI,CACxD,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,aAAa,CAAC","sourcesContent":["import { h, VNode } from '@stencil/core';\nimport { PositionItem } from '@type';\nimport { Cell } from '@type';\n\ntype Props = { ref: { (e: OrdererService): void } };\n\n/**\n * Draw drag\n */\nexport class OrdererService {\n  private parentY = 0;\n  el?: HTMLElement;\n  rgRow?: HTMLElement;\n  text?: HTMLElement;\n  draggable?: HTMLElement;\n\n  start(parent: HTMLElement, { pos, text, event }: { pos: PositionItem; text: string; event: MouseEvent }) {\n    const { top } = parent.getBoundingClientRect();\n    this.parentY = top;\n    if (this.text) {\n      this.text.innerText = text;\n    }\n    this.move(pos);\n    this.moveTip({ x: event.x, y: event.y });\n    this.el?.classList.remove('hidden');\n  }\n  end() {\n    this.el?.classList.add('hidden');\n  }\n  move(pos: PositionItem) {\n    this.moveElement(pos.end - this.parentY);\n  }\n  moveTip({ x, y }: Cell) {\n    if (!this.draggable) {\n      return;\n    }\n    this.draggable.style.left = `${x}px`;\n    this.draggable.style.top = `${y}px`;\n  }\n\n  private moveElement(y: number) {\n    if (!this.rgRow) {\n      return;\n    }\n    this.rgRow.style.transform = `translateY(${y}px)`;\n  }\n}\n\nconst OrderRenderer = ({ ref }: Props): VNode[] => {\n  const service = new OrdererService();\n  ref(service);\n  return (\n    <div class=\"draggable-wrapper hidden\" ref={e => (service.el = e)}>\n      <div class=\"draggable\" ref={el => (service.draggable = el)}>\n        <span class=\"revo-alt-icon\" />\n        <span ref={e => (service.text = e)} />\n      </div>\n      <div class=\"drag-position\" ref={e => (service.rgRow = e)} />\n    </div>\n  );\n};\nexport default OrderRenderer;\n"]}
+{"version":3,"file":"order-renderer.js","sourceRoot":"","sources":["../../../src/components/order/order-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAc,MAAM,eAAe,CAAC;AAM9C;;GAEG;AACH,MAAM,OAAO,cAAc;IAA3B;QACU,YAAO,GAAG,CAAC,CAAC;IAoCtB,CAAC;IA9BC,KAAK,CAAC,MAAmB,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAA0D;;QACrG,MAAM,EAAE,GAAG,EAAE,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACzC,MAAA,IAAI,CAAC,EAAE,0CAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IACD,GAAG;;QACD,MAAA,IAAI,CAAC,EAAE,0CAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IACD,IAAI,CAAC,GAAiB;QACpB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IACD,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAQ;QACpB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;QACrC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC;IACtC,CAAC;IAEO,WAAW,CAAC,CAAS;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC;IACpD,CAAC;CACF;AAED,MAAM,aAAa,GAAG,CAAC,EAAE,GAAG,EAAS,EAAW,EAAE;IAChD,MAAM,OAAO,GAAG,IAAI,cAAc,EAAE,CAAC;IACrC,GAAG,CAAC,OAAO,CAAC,CAAC;IACb,OAAO,CACL,WAAK,KAAK,EAAC,0BAA0B,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC;QAC9D,WAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC;YACxD,YAAM,KAAK,EAAC,eAAe,GAAG;YAC9B,YAAM,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,CAAC,GAAI,CAClC;QACN,WAAK,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC,GAAI,CACxD,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,aAAa,CAAC","sourcesContent":["import { h, type VNode } from '@stencil/core';\nimport { PositionItem } from '@type';\nimport { Cell } from '@type';\n\ntype Props = { ref: { (e: OrdererService): void } };\n\n/**\n * Draw drag\n */\nexport class OrdererService {\n  private parentY = 0;\n  el?: HTMLElement;\n  rgRow?: HTMLElement;\n  text?: HTMLElement;\n  draggable?: HTMLElement;\n\n  start(parent: HTMLElement, { pos, text, event }: { pos: PositionItem; text: string; event: MouseEvent }) {\n    const { top } = parent.getBoundingClientRect();\n    this.parentY = top;\n    if (this.text) {\n      this.text.innerText = text;\n    }\n    this.move(pos);\n    this.moveTip({ x: event.x, y: event.y });\n    this.el?.classList.remove('hidden');\n  }\n  end() {\n    this.el?.classList.add('hidden');\n  }\n  move(pos: PositionItem) {\n    this.moveElement(pos.end - this.parentY);\n  }\n  moveTip({ x, y }: Cell) {\n    if (!this.draggable) {\n      return;\n    }\n    this.draggable.style.left = `${x}px`;\n    this.draggable.style.top = `${y}px`;\n  }\n\n  private moveElement(y: number) {\n    if (!this.rgRow) {\n      return;\n    }\n    this.rgRow.style.transform = `translateY(${y}px)`;\n  }\n}\n\nconst OrderRenderer = ({ ref }: Props): VNode[] => {\n  const service = new OrdererService();\n  ref(service);\n  return (\n    <div class=\"draggable-wrapper hidden\" ref={e => (service.el = e)}>\n      <div class=\"draggable\" ref={el => (service.draggable = el)}>\n        <span class=\"revo-alt-icon\" />\n        <span ref={e => (service.text = e)} />\n      </div>\n      <div class=\"drag-position\" ref={e => (service.rgRow = e)} />\n    </div>\n  );\n};\nexport default OrderRenderer;\n"]}

package/dist/collection/components/order/revogr-order-editor.js

@@ -1,4 +1,5 @@
 import debounce from "lodash/debounce";
+import { getSourceItem } from "../../store/index";
 import { DRAGG_TEXT } from "../../utils/consts";
 import RowOrderService from "./order-row.service";
 /**
@@ -36,6 +37,7 @@ export class OrderEditor {
             pos,
             event: e.originalEvent,
             rowType: this.rowType,
+            model: getSourceItem(this.dataStore, pos.itemIndex),
         });
         if (dragStartEvent.defaultPrevented) {
             return;
@@ -127,8 +129,8 @@ export class OrderEditor {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DimensionSettingsState": {
                             "location": "import",
@@ -153,8 +155,8 @@ export class OrderEditor {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DimensionSettingsState": {
                             "location": "import",
@@ -179,8 +181,8 @@ export class OrderEditor {
                     "references": {
                         "Observable": {
                             "location": "import",
-                            "path": "../../utils/store.utils",
-                            "id": "src/utils/store.utils.ts::Observable"
+                            "path": "../../utils",
+                            "id": "src/utils/index.ts::Observable"
                         },
                         "DSourceState": {
                             "location": "import",
@@ -243,27 +245,13 @@ export class OrderEditor {
                     "text": "Row drag started"
                 },
                 "complexType": {
-                    "original": "{\n    cell: Cell;\n    text: string;\n    pos: PositionItem;\n    event: MouseEvent;\n    rowType: DimensionRows;\n  }",
-                    "resolved": "{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; rowType: DimensionRows; }",
+                    "original": "RowDragStartDetails",
+                    "resolved": "{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; rowType: DimensionRows; model: any; }",
                     "references": {
-                        "Cell": {
-                            "location": "import",
-                            "path": "@type",
-                            "id": "src/types/index.ts::Cell"
-                        },
-                        "PositionItem": {
-                            "location": "import",
-                            "path": "@type",
-                            "id": "src/types/index.ts::PositionItem"
-                        },
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        },
-                        "DimensionRows": {
+                        "RowDragStartDetails": {
                             "location": "import",
                             "path": "@type",
-                            "id": "src/types/index.ts::DimensionRows"
+                            "id": "src/types/index.ts::RowDragStartDetails"
                         }
                     }
                 }

package/dist/collection/components/order/revogr-order-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"revogr-order-editor.js","sourceRoot":"","sources":["../../../src/components/order/revogr-order-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Event, EventEmitter, Prop } from '@stencil/core';\nimport debounce from 'lodash/debounce';\n\nimport { DSourceState } from '@store';\nimport { DRAGG_TEXT } from '../../utils/consts';\nimport RowOrderService from './order-row.service';\nimport {\n  DimensionRows,\n  DataType,\n  DimensionSettingsState,\n  DragStartEvent,\n  PositionItem,\n  Cell,\n} from '@type';\nimport { Observable } from '../../utils/store.utils';\n\n/**\n * Component for handling row order editor.\n */\n@Component({ tag: 'revogr-order-editor' })\nexport class OrderEditor {\n  // #region Properties\n  /** Parent element */\n  @Prop() parent: HTMLElement;\n  /** Dimension settings Y */\n  @Prop() dimensionRow: Observable<DimensionSettingsState>;\n  /** Dimension settings X */\n  @Prop() dimensionCol: Observable<DimensionSettingsState>;\n\n  /** Static stores, not expected to change during component lifetime */\n  @Prop() dataStore: Observable<DSourceState<DataType, DimensionRows>>;\n\n  @Prop() rowType: DimensionRows;\n  // #endregion\n\n  // #region Events\n  /** Row drag started */\n  @Event({ eventName: 'rowdragstartinit', cancelable: true })\n  rowDragStart: EventEmitter<{\n    cell: Cell;\n    text: string;\n    pos: PositionItem;\n    event: MouseEvent;\n    rowType: DimensionRows;\n  }>;\n\n  /** Row drag ended started */\n  @Event({ eventName: 'rowdragendinit' })\n  rowDragEnd: EventEmitter<{ rowType: DimensionRows }>;\n\n  /** Row move started */\n  @Event({ eventName: 'rowdragmoveinit', cancelable: true })\n  rowDrag: EventEmitter<PositionItem & { rowType: DimensionRows }>;\n\n  /** Row mouse move started */\n  @Event({ eventName: 'rowdragmousemove', cancelable: true })\n  rowMouseMove: EventEmitter<Cell & { rowType: DimensionRows }>;\n\n  /** Row dragged, new range ready to be applied */\n  @Event({ eventName: 'rowdropinit', cancelable: true })\n  rowDropped: EventEmitter<{\n    from: number;\n    to: number;\n    rowType: DimensionRows;\n  }>;\n\n  /** Row drag ended finished. Time to apply data */\n  @Event({ eventName: 'roworderchange' })\n  rowOrderChange: EventEmitter<{\n    from: number;\n    to: number;\n    rowType: DimensionRows;\n  }>;\n\n  // #endregion\n\n  // #region Private\n  private rowOrderService: RowOrderService;\n  private events: {\n    name: keyof DocumentEventMap;\n    listener: (e: MouseEvent) => void;\n  }[] = [];\n  private rowMoveFunc = debounce((y: number) => {\n    const rgRow = this.rowOrderService.move(y, this.getData());\n    if (rgRow !== null) {\n      this.rowDrag.emit({\n        ...rgRow,\n        rowType: this.rowType,\n      });\n    }\n  }, 5);\n  // #endregion\n\n  // #region Methods\n  @Method() async dragStart(e: DragStartEvent) {\n    e.originalEvent.preventDefault();\n\n    // extra check if previous ended\n    if (this.events.length) {\n      this.clearOrder();\n    }\n\n    const data = this.getData();\n    const cell = this.rowOrderService.startOrder(e.originalEvent, data);\n    const pos = this.rowOrderService.getRow(e.originalEvent.y, data);\n    const dragStartEvent = this.rowDragStart.emit({\n      cell,\n      text: DRAGG_TEXT,\n      pos,\n      event: e.originalEvent,\n      rowType: this.rowType,\n    });\n    if (dragStartEvent.defaultPrevented) {\n      return;\n    }\n\n    const moveMove = (e: MouseEvent) => this.move(e);\n    const mouseUp = (e: MouseEvent) => this.endOrder(e);\n    const mouseLeave = () => this.clearOrder();\n\n    this.events.push(\n      {\n        name: 'mousemove',\n        listener: moveMove,\n      },\n      {\n        name: 'mouseup',\n        listener: mouseUp,\n      },\n      {\n        name: 'mouseleave',\n        listener: mouseLeave,\n      },\n    );\n    document.addEventListener('mousemove', moveMove);\n    // Action finished inside of the document\n    document.addEventListener('mouseup', mouseUp);\n    document.addEventListener('mouseleave', mouseLeave);\n  }\n\n  @Method() async endOrder(e: MouseEvent) {\n    this.rowOrderService.endOrder(e, this.getData());\n    this.clearOrder();\n  }\n\n  @Method() async clearOrder() {\n    this.rowOrderService.clear();\n    this.events.forEach(v => document.removeEventListener(v.name, v.listener));\n    this.events.length = 0;\n    this.rowDragEnd.emit({ rowType: this.rowType });\n  }\n  // #endregion\n\n  move({ x, y }: { x: number; y: number }) {\n    this.rowMouseMove.emit({ x, y, rowType: this.rowType });\n    this.rowMoveFunc(y);\n  }\n\n  connectedCallback() {\n    this.rowOrderService = new RowOrderService({\n      positionChanged: (from: number, to: number) => {\n        const dropEvent = this.rowDropped.emit({\n          from,\n          to,\n          rowType: this.rowType,\n        });\n        if (dropEvent.defaultPrevented) {\n          return;\n        }\n        this.rowOrderChange.emit(dropEvent.detail);\n      },\n    });\n  }\n\n  private getData() {\n    return {\n      el: this.parent,\n      rows: this.dimensionRow.state,\n      cols: this.dimensionCol.state,\n    };\n  }\n}\n"]}
+{"version":3,"file":"revogr-order-editor.js","sourceRoot":"","sources":["../../../src/components/order/revogr-order-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Event, EventEmitter, Prop } from '@stencil/core';\nimport debounce from 'lodash/debounce';\n\nimport { type DSourceState, getSourceItem } from '@store';\nimport { DRAGG_TEXT } from '../../utils/consts';\nimport RowOrderService from './order-row.service';\nimport type {\n  DimensionRows,\n  DataType,\n  DimensionSettingsState,\n  DragStartEvent,\n  PositionItem,\n  Cell,\n  RowDragStartDetails,\n} from '@type';\nimport type { Observable } from '../../utils';\n\n/**\n * Component for handling row order editor.\n */\n@Component({ tag: 'revogr-order-editor' })\nexport class OrderEditor {\n  // #region Properties\n  /** Parent element */\n  @Prop() parent: HTMLElement;\n  /** Dimension settings Y */\n  @Prop() dimensionRow: Observable<DimensionSettingsState>;\n  /** Dimension settings X */\n  @Prop() dimensionCol: Observable<DimensionSettingsState>;\n\n  /** Static stores, not expected to change during component lifetime */\n  @Prop() dataStore: Observable<DSourceState<DataType, DimensionRows>>;\n\n  @Prop() rowType: DimensionRows;\n  // #endregion\n\n  // #region Events\n  /** Row drag started */\n  @Event({ eventName: 'rowdragstartinit', cancelable: true })\n  rowDragStart: EventEmitter<RowDragStartDetails>;\n\n  /** Row drag ended started */\n  @Event({ eventName: 'rowdragendinit' })\n  rowDragEnd: EventEmitter<{ rowType: DimensionRows }>;\n\n  /** Row move started */\n  @Event({ eventName: 'rowdragmoveinit', cancelable: true })\n  rowDrag: EventEmitter<PositionItem & { rowType: DimensionRows }>;\n\n  /** Row mouse move started */\n  @Event({ eventName: 'rowdragmousemove', cancelable: true })\n  rowMouseMove: EventEmitter<Cell & { rowType: DimensionRows }>;\n\n  /** Row dragged, new range ready to be applied */\n  @Event({ eventName: 'rowdropinit', cancelable: true })\n  rowDropped: EventEmitter<{\n    from: number;\n    to: number;\n    rowType: DimensionRows;\n  }>;\n\n  /** Row drag ended finished. Time to apply data */\n  @Event({ eventName: 'roworderchange' })\n  rowOrderChange: EventEmitter<{\n    from: number;\n    to: number;\n    rowType: DimensionRows;\n  }>;\n\n  // #endregion\n\n  // #region Private\n  private rowOrderService: RowOrderService;\n  private events: {\n    name: keyof DocumentEventMap;\n    listener: (e: MouseEvent) => void;\n  }[] = [];\n  private rowMoveFunc = debounce((y: number) => {\n    const rgRow = this.rowOrderService.move(y, this.getData());\n    if (rgRow !== null) {\n      this.rowDrag.emit({\n        ...rgRow,\n        rowType: this.rowType,\n      });\n    }\n  }, 5);\n  // #endregion\n\n  // #region Methods\n  @Method() async dragStart(e: DragStartEvent) {\n    e.originalEvent.preventDefault();\n\n    // extra check if previous ended\n    if (this.events.length) {\n      this.clearOrder();\n    }\n\n    const data = this.getData();\n    const cell = this.rowOrderService.startOrder(e.originalEvent, data);\n    const pos = this.rowOrderService.getRow(e.originalEvent.y, data);\n    const dragStartEvent = this.rowDragStart.emit({\n      cell,\n      text: DRAGG_TEXT,\n      pos,\n      event: e.originalEvent,\n      rowType: this.rowType,\n      model: getSourceItem(this.dataStore, pos.itemIndex),\n    });\n    if (dragStartEvent.defaultPrevented) {\n      return;\n    }\n\n    const moveMove = (e: MouseEvent) => this.move(e);\n    const mouseUp = (e: MouseEvent) => this.endOrder(e);\n    const mouseLeave = () => this.clearOrder();\n\n    this.events.push(\n      {\n        name: 'mousemove',\n        listener: moveMove,\n      },\n      {\n        name: 'mouseup',\n        listener: mouseUp,\n      },\n      {\n        name: 'mouseleave',\n        listener: mouseLeave,\n      },\n    );\n    document.addEventListener('mousemove', moveMove);\n    // Action finished inside of the document\n    document.addEventListener('mouseup', mouseUp);\n    document.addEventListener('mouseleave', mouseLeave);\n  }\n\n  @Method() async endOrder(e: MouseEvent) {\n    this.rowOrderService.endOrder(e, this.getData());\n    this.clearOrder();\n  }\n\n  @Method() async clearOrder() {\n    this.rowOrderService.clear();\n    this.events.forEach(v => document.removeEventListener(v.name, v.listener));\n    this.events.length = 0;\n    this.rowDragEnd.emit({ rowType: this.rowType });\n  }\n  // #endregion\n\n  move({ x, y }: { x: number; y: number }) {\n    this.rowMouseMove.emit({ x, y, rowType: this.rowType });\n    this.rowMoveFunc(y);\n  }\n\n  connectedCallback() {\n    this.rowOrderService = new RowOrderService({\n      positionChanged: (from: number, to: number) => {\n        const dropEvent = this.rowDropped.emit({\n          from,\n          to,\n          rowType: this.rowType,\n        });\n        if (dropEvent.defaultPrevented) {\n          return;\n        }\n        this.rowOrderChange.emit(dropEvent.detail);\n      },\n    });\n  }\n\n  private getData() {\n    return {\n      el: this.parent,\n      rows: this.dimensionRow.state,\n      cols: this.dimensionCol.state,\n    };\n  }\n}\n"]}

package/dist/collection/components/overlay/autofill.service.js

@@ -169,13 +169,15 @@ export class AutoFillService {
     /**
      * Trigger range apply events and handle responses
      */
-    onRangeApply(data, range) {
+    onRangeApply(newData, newRange, oldRange) {
         this.sv.rangeDataApply({
-            data,
-            models: collectModelsOfRange(data, this.sv.dataStore),
+            data: newData,
+            models: collectModelsOfRange(newData, this.sv.dataStore),
             type: this.sv.dataStore.get('type'),
+            oldRange,
+            newRange
         });
-        this.sv.setRange(range);
+        this.sv.setRange(newRange);
     }
     /** Apply range and copy data during range application */
     applyRangeWithData(newRange, rangeToCopy) {
@@ -201,7 +203,7 @@ export class AutoFillService {
             this.sv.setRange(newRange);
             return;
         }
-        this.onRangeApply(rangeData.newData, newRange);
+        this.onRangeApply(rangeData.newData, newRange, rangeToCopy);
     }
     /**
      * Update range selection only,

package/dist/collection/components/overlay/autofill.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"autofill.service.js","sourceRoot":"","sources":["../../../src/components/overlay/autofill.service.tsx"],"names":[],"mappings":"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","sourcesContent":["import debounce from 'lodash/debounce';\nimport { DebouncedFunc } from 'lodash';\n\nimport { h } from '@stencil/core';\nimport { CELL_HANDLER_CLASS, MOBILE_CLASS } from '../../utils/consts';\nimport {\n  collectModelsOfRange,\n  EventData,\n  getCell,\n  getCurrentCell,\n  isAfterLast,\n} from './selection.utils';\nimport { DSourceState, getRange } from '@store';\nimport ColumnService from '../data/column.service';\nimport { getPropertyFromEvent } from '../../utils/events';\nimport {\n  DataLookup,\n  DataType,\n  DimensionSettingsState,\n  TempRange,\n  ChangedRange,\n  BeforeRangeSaveDataDetails,\n  RangeArea,\n  Cell,\n  DimensionRows, Nullable,\n} from '@type';\nimport { Observable } from '../../utils/store.utils';\n\ntype Config = {\n  dimensionRow: Observable<DimensionSettingsState>;\n  dimensionCol: Observable<DimensionSettingsState>;\n  columnService: ColumnService;\n  dataStore: Observable<DSourceState<DataType, DimensionRows>>;\n\n  setTempRange(e: Nullable<TempRange> | null): Event | null;\n  selectionChanged(e: ChangedRange): Event;\n  rangeCopy(e: ChangedRange): Event;\n  rangeDataApply(e: BeforeRangeSaveDataDetails): CustomEvent;\n  setRange(e: RangeArea | null): boolean;\n  clearRangeDataApply(e: { range: RangeArea }): CustomEvent<{\n    range: RangeArea;\n  }>;\n\n  getData(): any;\n};\n\nconst enum AutoFillType {\n  selection = 'Selection',\n  autoFill = 'AutoFill',\n}\n\nexport class AutoFillService {\n  private autoFillType: AutoFillType | null = null;\n  private autoFillInitial: Cell | null = null;\n  private autoFillStart: Cell | null = null;\n  private autoFillLast: Cell | null = null;\n\n  private onMouseMoveAutofill: DebouncedFunc<\n    (e: MouseEvent | TouchEvent, data: EventData) => void\n  >;\n\n  constructor(private sv: Config) {}\n\n  /**\n   * Render autofill box\n   * @param range\n   * @param selectionFocus\n   */\n  renderAutofill(range: RangeArea | null, selectionFocus: Cell) {\n    let handlerStyle;\n    if (range) {\n      handlerStyle = getCell(\n        range,\n        this.sv.dimensionRow.state,\n        this.sv.dimensionCol.state,\n      );\n    } else {\n      handlerStyle = getCell(\n        {\n          ...selectionFocus,\n          x1: selectionFocus.x,\n          y1: selectionFocus.y,\n        },\n        this.sv.dimensionRow.state,\n        this.sv.dimensionCol.state,\n      );\n    }\n    return (\n      <div\n        class={{\n          [CELL_HANDLER_CLASS]: true,\n          [MOBILE_CLASS]: true,\n        }}\n        style={{\n          left: `${handlerStyle.right}px`,\n          top: `${handlerStyle.bottom}px`,\n        }}\n        onMouseDown={(e: MouseEvent) => this.autoFillHandler(e)}\n        onTouchStart={(e: TouchEvent) => this.autoFillHandler(e)}\n      />\n    );\n  }\n\n  private autoFillHandler(\n    e: MouseEvent | TouchEvent,\n    type = AutoFillType.autoFill,\n  ) {\n    let target: Element | null = null;\n    if (e.target instanceof Element) {\n      target = e.target;\n    }\n    if (!target) {\n      return;\n    }\n    this.selectionStart(target, this.sv.getData(), type);\n    e.preventDefault();\n  }\n\n  get isAutoFill() {\n    return !!this.autoFillType;\n  }\n\n  /**\n   * Process mouse move events\n   */\n  selectionMouseMove(e: MouseEvent | TouchEvent) {\n    // initiate mouse move debounce if not present\n    if (!this.onMouseMoveAutofill) {\n      this.onMouseMoveAutofill = debounce(\n        (e: MouseEvent | TouchEvent, data: EventData) =>\n          this.doAutofillMouseMove(e, data),\n        5,\n      );\n    }\n    if (this.isAutoFill) {\n      this.onMouseMoveAutofill(e, this.sv.getData());\n    }\n  }\n\n  private getFocus(focus: Cell | null, range: RangeArea | null) {\n    // there was an issue that it was taking last cell from range but focus was out\n    if (!focus && range) {\n      focus = { x: range.x, y: range.y };\n    }\n    return focus || null;\n  }\n\n  /**\n   * Autofill logic:\n   * on mouse move apply based on previous direction (if present)\n   */\n  private doAutofillMouseMove(event: MouseEvent | TouchEvent, data: EventData) {\n    // if no initial - not started\n    if (!this.autoFillInitial) {\n      return;\n    }\n    const x = getPropertyFromEvent(event, 'clientX', MOBILE_CLASS);\n    const y = getPropertyFromEvent(event, 'clientY', MOBILE_CLASS);\n    // skip touch\n    if (x === null || y === null) {\n      return;\n    }\n    const current = getCurrentCell({ x, y }, data);\n\n    // first time or direction equal to start(same as first time)\n    if (!this.autoFillLast) {\n      if (!this.autoFillLast) {\n        this.autoFillLast = this.autoFillStart;\n      }\n    }\n\n    // check if not the latest, if latest - do nothing\n    if (isAfterLast(current, data.lastCell)) {\n      return;\n    }\n    this.autoFillLast = current;\n\n    const isSame =\n      current.x === this.autoFillInitial.x &&\n      current.y === this.autoFillInitial.y;\n\n    // if same as initial - clear\n    if (isSame) {\n      this.sv.setTempRange(null);\n    } else {\n      const area = getRange(this.autoFillInitial, this.autoFillLast);\n      this.sv.setTempRange({\n        area,\n        type: this.autoFillType,\n      });\n    }\n  }\n\n  /**\n   * Range selection started\n   * Mode @param type:\n   * Can be triggered from MouseDown selection on element\n   * Or can be triggered on corner square drag\n   */\n  selectionStart(\n    target: Element,\n    data: EventData,\n    type = AutoFillType.selection,\n  ) {\n    /** Get cell by autofill element */\n    const { top, left } = target.getBoundingClientRect();\n    this.autoFillInitial = this.getFocus(data.focus, data.range);\n    this.autoFillType = type;\n    this.autoFillStart = getCurrentCell({ x: left, y: top }, data);\n  }\n\n  /**\n   * Clear current range selection on mouse up and mouse leave events\n   */\n  clearAutoFillSelection(focus: Cell | null, oldRange: RangeArea | null) {\n    // If autofill was active, apply autofill values\n    if (this.autoFillInitial) {\n      // Fetch latest focus\n      this.autoFillInitial = this.getFocus(focus, oldRange);\n\n      // Apply range data if autofill mode is active\n      if (this.autoFillType === AutoFillType.autoFill) {\n        const range = getRange(this.autoFillInitial, this.autoFillLast);\n\n        // If range is present, apply data\n        if (range) {\n          const {\n            defaultPrevented: stopApply,\n            detail: { range: newRange },\n          } = this.sv.clearRangeDataApply({\n            range,\n          });\n\n          // If data apply was not prevented, apply new range\n          if (!stopApply && oldRange) {\n            this.applyRangeWithData(newRange, oldRange);\n          } else {\n            // If data apply was prevented, clear temporary range\n            this.sv.setTempRange(null);\n          }\n        }\n      } else {\n        // If not autofill mode, apply range only\n        this.applyRangeOnly(this.autoFillInitial, this.autoFillLast);\n      }\n    }\n\n    // Reset autofill state\n    this.resetAutoFillState();\n  }\n\n  /**\n   * Reset autofill state\n   */\n  private resetAutoFillState() {\n    this.autoFillType = null;\n    this.autoFillInitial = null;\n    this.autoFillLast = null;\n    this.autoFillStart = null;\n  }\n\n  /**\n   * Trigger range apply events and handle responses\n   */\n  onRangeApply(data: DataLookup, range: RangeArea | null) {\n    this.sv.rangeDataApply({\n      data,\n      models: collectModelsOfRange(data, this.sv.dataStore),\n      type: this.sv.dataStore.get('type'),\n    });\n\n    this.sv.setRange(range);\n  }\n\n  /** Apply range and copy data during range application */\n  private applyRangeWithData(newRange: RangeArea, rangeToCopy: RangeArea) {\n    const rangeData: ChangedRange = {\n      type: this.sv.dataStore.get('type'),\n      colType: this.sv.columnService.type,\n      newData: {},\n      mapping: {},\n      newRange,\n      oldRange: rangeToCopy,\n    };\n    const { mapping, changed } = this.sv.columnService.getRangeData(\n      rangeData,\n      this.sv.columnService.columns,\n    );\n    rangeData.newData = changed;\n    rangeData.mapping = mapping;\n    let e = this.sv.selectionChanged(rangeData);\n\n    // if default prevented - clear range\n    if (e.defaultPrevented) {\n      this.sv.setTempRange(null);\n      return;\n    }\n\n    e = this.sv.rangeCopy(rangeData);\n    if (e.defaultPrevented) {\n      this.sv.setRange(newRange);\n      return;\n    }\n    this.onRangeApply(rangeData.newData, newRange);\n  }\n\n  /**\n   * Update range selection only,\n   * no data change (mouse selection)\n   */\n  private applyRangeOnly(start?: Cell | null, end?: Cell | null) {\n    // no changes to apply\n    if (!start || !end) {\n      return;\n    }\n\n    const newRange = getRange(start, end);\n    this.sv.setRange(newRange);\n  }\n}\n"]}
+{"version":3,"file":"autofill.service.js","sourceRoot":"","sources":["../../../src/components/overlay/autofill.service.tsx"],"names":[],"mappings":"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","sourcesContent":["import debounce from 'lodash/debounce';\nimport { DebouncedFunc } from 'lodash';\n\nimport { h } from '@stencil/core';\nimport { CELL_HANDLER_CLASS, MOBILE_CLASS } from '../../utils/consts';\nimport {\n  collectModelsOfRange,\n  EventData,\n  getCell,\n  getCurrentCell,\n  isAfterLast,\n} from './selection.utils';\nimport { DSourceState, getRange } from '@store';\nimport ColumnService from '../data/column.service';\nimport { getPropertyFromEvent } from '../../utils/events';\nimport {\n  DataLookup,\n  DataType,\n  DimensionSettingsState,\n  TempRange,\n  ChangedRange,\n  BeforeRangeSaveDataDetails,\n  RangeArea,\n  Cell,\n  DimensionRows, Nullable,\n} from '@type';\nimport { Observable } from '../../utils';\n\ntype Config = {\n  dimensionRow: Observable<DimensionSettingsState>;\n  dimensionCol: Observable<DimensionSettingsState>;\n  columnService: ColumnService;\n  dataStore: Observable<DSourceState<DataType, DimensionRows>>;\n\n  setTempRange(e: Nullable<TempRange> | null): Event | null;\n  selectionChanged(e: ChangedRange): Event;\n  rangeCopy(e: ChangedRange): Event;\n  rangeDataApply(e: BeforeRangeSaveDataDetails): CustomEvent;\n  setRange(e: RangeArea | null): boolean;\n  clearRangeDataApply(e: { range: RangeArea }): CustomEvent<{\n    range: RangeArea;\n  }>;\n\n  getData(): any;\n};\n\nconst enum AutoFillType {\n  selection = 'Selection',\n  autoFill = 'AutoFill',\n}\n\nexport class AutoFillService {\n  private autoFillType: AutoFillType | null = null;\n  private autoFillInitial: Cell | null = null;\n  private autoFillStart: Cell | null = null;\n  private autoFillLast: Cell | null = null;\n\n  private onMouseMoveAutofill: DebouncedFunc<\n    (e: MouseEvent | TouchEvent, data: EventData) => void\n  >;\n\n  constructor(private sv: Config) {}\n\n  /**\n   * Render autofill box\n   * @param range\n   * @param selectionFocus\n   */\n  renderAutofill(range: RangeArea | null, selectionFocus: Cell) {\n    let handlerStyle;\n    if (range) {\n      handlerStyle = getCell(\n        range,\n        this.sv.dimensionRow.state,\n        this.sv.dimensionCol.state,\n      );\n    } else {\n      handlerStyle = getCell(\n        {\n          ...selectionFocus,\n          x1: selectionFocus.x,\n          y1: selectionFocus.y,\n        },\n        this.sv.dimensionRow.state,\n        this.sv.dimensionCol.state,\n      );\n    }\n    return (\n      <div\n        class={{\n          [CELL_HANDLER_CLASS]: true,\n          [MOBILE_CLASS]: true,\n        }}\n        style={{\n          left: `${handlerStyle.right}px`,\n          top: `${handlerStyle.bottom}px`,\n        }}\n        onMouseDown={(e: MouseEvent) => this.autoFillHandler(e)}\n        onTouchStart={(e: TouchEvent) => this.autoFillHandler(e)}\n      />\n    );\n  }\n\n  private autoFillHandler(\n    e: MouseEvent | TouchEvent,\n    type = AutoFillType.autoFill,\n  ) {\n    let target: Element | null = null;\n    if (e.target instanceof Element) {\n      target = e.target;\n    }\n    if (!target) {\n      return;\n    }\n    this.selectionStart(target, this.sv.getData(), type);\n    e.preventDefault();\n  }\n\n  get isAutoFill() {\n    return !!this.autoFillType;\n  }\n\n  /**\n   * Process mouse move events\n   */\n  selectionMouseMove(e: MouseEvent | TouchEvent) {\n    // initiate mouse move debounce if not present\n    if (!this.onMouseMoveAutofill) {\n      this.onMouseMoveAutofill = debounce(\n        (e: MouseEvent | TouchEvent, data: EventData) =>\n          this.doAutofillMouseMove(e, data),\n        5,\n      );\n    }\n    if (this.isAutoFill) {\n      this.onMouseMoveAutofill(e, this.sv.getData());\n    }\n  }\n\n  private getFocus(focus: Cell | null, range: RangeArea | null) {\n    // there was an issue that it was taking last cell from range but focus was out\n    if (!focus && range) {\n      focus = { x: range.x, y: range.y };\n    }\n    return focus || null;\n  }\n\n  /**\n   * Autofill logic:\n   * on mouse move apply based on previous direction (if present)\n   */\n  private doAutofillMouseMove(event: MouseEvent | TouchEvent, data: EventData) {\n    // if no initial - not started\n    if (!this.autoFillInitial) {\n      return;\n    }\n    const x = getPropertyFromEvent(event, 'clientX', MOBILE_CLASS);\n    const y = getPropertyFromEvent(event, 'clientY', MOBILE_CLASS);\n    // skip touch\n    if (x === null || y === null) {\n      return;\n    }\n    const current = getCurrentCell({ x, y }, data);\n\n    // first time or direction equal to start(same as first time)\n    if (!this.autoFillLast) {\n      if (!this.autoFillLast) {\n        this.autoFillLast = this.autoFillStart;\n      }\n    }\n\n    // check if not the latest, if latest - do nothing\n    if (isAfterLast(current, data.lastCell)) {\n      return;\n    }\n    this.autoFillLast = current;\n\n    const isSame =\n      current.x === this.autoFillInitial.x &&\n      current.y === this.autoFillInitial.y;\n\n    // if same as initial - clear\n    if (isSame) {\n      this.sv.setTempRange(null);\n    } else {\n      const area = getRange(this.autoFillInitial, this.autoFillLast);\n      this.sv.setTempRange({\n        area,\n        type: this.autoFillType,\n      });\n    }\n  }\n\n  /**\n   * Range selection started\n   * Mode @param type:\n   * Can be triggered from MouseDown selection on element\n   * Or can be triggered on corner square drag\n   */\n  selectionStart(\n    target: Element,\n    data: EventData,\n    type = AutoFillType.selection,\n  ) {\n    /** Get cell by autofill element */\n    const { top, left } = target.getBoundingClientRect();\n    this.autoFillInitial = this.getFocus(data.focus, data.range);\n    this.autoFillType = type;\n    this.autoFillStart = getCurrentCell({ x: left, y: top }, data);\n  }\n\n  /**\n   * Clear current range selection on mouse up and mouse leave events\n   */\n  clearAutoFillSelection(focus: Cell | null, oldRange: RangeArea | null) {\n    // If autofill was active, apply autofill values\n    if (this.autoFillInitial) {\n      // Fetch latest focus\n      this.autoFillInitial = this.getFocus(focus, oldRange);\n\n      // Apply range data if autofill mode is active\n      if (this.autoFillType === AutoFillType.autoFill) {\n        const range = getRange(this.autoFillInitial, this.autoFillLast);\n\n        // If range is present, apply data\n        if (range) {\n          const {\n            defaultPrevented: stopApply,\n            detail: { range: newRange },\n          } = this.sv.clearRangeDataApply({\n            range,\n          });\n\n          // If data apply was not prevented, apply new range\n          if (!stopApply && oldRange) {\n            this.applyRangeWithData(newRange, oldRange);\n          } else {\n            // If data apply was prevented, clear temporary range\n            this.sv.setTempRange(null);\n          }\n        }\n      } else {\n        // If not autofill mode, apply range only\n        this.applyRangeOnly(this.autoFillInitial, this.autoFillLast);\n      }\n    }\n\n    // Reset autofill state\n    this.resetAutoFillState();\n  }\n\n  /**\n   * Reset autofill state\n   */\n  private resetAutoFillState() {\n    this.autoFillType = null;\n    this.autoFillInitial = null;\n    this.autoFillLast = null;\n    this.autoFillStart = null;\n  }\n\n  /**\n   * Trigger range apply events and handle responses\n   */\n  onRangeApply(newData: DataLookup, newRange: RangeArea | null, oldRange: RangeArea | null) {\n    this.sv.rangeDataApply({\n      data: newData,\n      models: collectModelsOfRange(newData, this.sv.dataStore),\n      type: this.sv.dataStore.get('type'),\n      oldRange,\n      newRange\n    });\n\n    this.sv.setRange(newRange);\n  }\n\n  /** Apply range and copy data during range application */\n  private applyRangeWithData(newRange: RangeArea, rangeToCopy: RangeArea) {\n    const rangeData: ChangedRange = {\n      type: this.sv.dataStore.get('type'),\n      colType: this.sv.columnService.type,\n      newData: {},\n      mapping: {},\n      newRange,\n      oldRange: rangeToCopy,\n    };\n    const { mapping, changed } = this.sv.columnService.getRangeData(\n      rangeData,\n      this.sv.columnService.columns,\n    );\n    rangeData.newData = changed;\n    rangeData.mapping = mapping;\n    let e = this.sv.selectionChanged(rangeData);\n\n    // if default prevented - clear range\n    if (e.defaultPrevented) {\n      this.sv.setTempRange(null);\n      return;\n    }\n\n    e = this.sv.rangeCopy(rangeData);\n    if (e.defaultPrevented) {\n      this.sv.setRange(newRange);\n      return;\n    }\n    this.onRangeApply(rangeData.newData, newRange, rangeToCopy);\n  }\n\n  /**\n   * Update range selection only,\n   * no data change (mouse selection)\n   */\n  private applyRangeOnly(start?: Cell | null, end?: Cell | null) {\n    // no changes to apply\n    if (!start || !end) {\n      return;\n    }\n\n    const newRange = getRange(start, end);\n    this.sv.setRange(newRange);\n  }\n}\n"]}

package/dist/collection/components/overlay/keyboard.service.js

@@ -2,11 +2,8 @@
  * Built by Revolist OU ❤️
  */
 import { getRange } from "../../store/index";
-import { codesLetter } from "../../utils/key.codes";
-import { isAll, isClear, isCopy, isCut, isEnterKeyValue, isPaste, isTab, } from "../../utils/key.utils";
-import { timeout } from "../../utils";
+import { codesLetter, isAll, isClear, isCopy, isCut, isEnterKeyValue, isPaste, isTab, timeout, RESIZE_INTERVAL, } from "../../utils";
 import { getCoordinate, isAfterLast, isBeforeFirst, } from "./selection.utils";
-import { RESIZE_INTERVAL } from "../../utils/consts";
 const DIRECTION_CODES = [
     codesLetter.TAB,
     codesLetter.ARROW_UP,