lsp-grid 1.0.0

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

@@ -0,0 +1,125 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+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() {
+        /**
+         * Nodes to render
+         */
+        this.nodes = [];
+        /**
+         * Force component to re-render
+         */
+        this.update = 1;
+    }
+    /**
+     * Refreshes the extra component. Useful if you want to manually
+     * force the component to re-render.
+     */
+    async refresh() {
+        this.update *= -1;
+    }
+    render() {
+        var _a;
+        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() {
+        return {
+            "nodes": {
+                "type": "unknown",
+                "attribute": "nodes",
+                "mutable": false,
+                "complexType": {
+                    "original": "(\r\n    | VNode\r\n    | ((c: ExtraNodeFuncConfig) => VNode)\r\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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nodes to render"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "update": {}
+        };
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Refreshes the extra component. Useful if you want to manually\r\nforce the component to re-render.",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=revogr-extra.js.map

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

@@ -0,0 +1 @@
+{"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;IAH1B;QAIE;;WAEG;QACK,UAAK,GAGP,EAAE,CAAC;QACT;;WAEG;QACM,WAAM,GAAG,CAAC,CAAC;KAmCrB;IAjCC;;;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';\r\nimport type { ExtraNodeFuncConfig } from '@type';\r\n\r\n/**\r\n * Contains extra elements for stencil components.\r\n * Performs rendering and updates for external components.\r\n * \r\n * @example\r\n * In Plugins if you want to add extra elements to grid and use stenciljs vnodes reactivity:\r\n * function paginationPanel(this: PaginationPlugin, config: { refresh: () => void }) {\r\n *    // use `config.refresh()` for component to re-render\r\n *    return h('div')\r\n * }\r\n * \r\n * revogrid.registerVNode = [\r\n *    ...existingNodes,\r\n *     paginationPanel.bind(this)\r\n * ];\r\n\r\n\r\n/**\r\n * @internal\r\n */\r\n@Component({\r\n  tag: 'revogr-extra',\r\n})\r\nexport class RevoGridExtra {\r\n  /**\r\n   * Nodes to render\r\n   */\r\n  @Prop() nodes: (\r\n    | VNode\r\n    | ((c: ExtraNodeFuncConfig) => VNode)\r\n  )[] = [];\r\n  /**\r\n   * Force component to re-render\r\n   */\r\n  @State() update = 1;\r\n\r\n  /**\r\n   * Refreshes the extra component. Useful if you want to manually\r\n   * force the component to re-render.\r\n   */\r\n  @Method() async refresh() {\r\n    this.update *= -1;\r\n  }\r\n\r\n  render() {\r\n    return this.nodes?.map(node => {\r\n      // Check if node is a function or a stencil component\r\n      // If function wrap it in a stencil component with the refresh function\r\n      if (typeof node === 'function') {\r\n        const config: Partial<ExtraNodeFuncConfig> = {};\r\n        const getNodes = () => [node({ refresh: () => config.refresh?.() })];\r\n\r\n        return (\r\n          <revogr-extra\r\n            nodes={getNodes()}\r\n            ref={(el?: HTMLRevogrExtraElement) => {\r\n              if (el) {\r\n                // Update exclusively for current node\r\n                config.refresh = () => {\r\n                  el.nodes = getNodes();\r\n                };\r\n              }\r\n            }}\r\n          />\r\n        );\r\n      }\r\n      return node;\r\n    });\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,34 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { h } from "@stencil/core";
+import { dispatch } from "../../plugins/dispatcher";
+import { doPropMerge } from "../data/column.service";
+import { ResizableElement, } from "./resizable.element";
+export const ON_COLUMN_CLICK = 'columnclick';
+export const HeaderCellRenderer = ({ data, props, additionalData }, children) => {
+    let colTemplate = (data === null || data === void 0 ? void 0 : data.name) || '';
+    let cellProps = props;
+    if (data === null || data === void 0 ? void 0 : data.columnTemplate) {
+        colTemplate = data.columnTemplate(h, data, additionalData);
+    }
+    if (data === null || data === void 0 ? void 0 : data.columnProperties) {
+        const extra = data.columnProperties(data);
+        if (extra) {
+            cellProps = doPropMerge(props, extra);
+        }
+    }
+    const resizeProps = Object.assign(Object.assign({}, cellProps), { onMouseDown(e) {
+            dispatch(e.currentTarget, ON_COLUMN_CLICK, {
+                data,
+                event: e,
+            });
+        } });
+    return (h(ResizableElement, Object.assign({}, resizeProps), !!(data === null || data === void 0 ? void 0 : data.rowDrag) && (h("div", { onMouseDown: (e) => {
+            dispatch(e.currentTarget, ON_COLUMN_CLICK, {
+                data,
+                event: e,
+            });
+        }, class: "header-cell-drag" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.3", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "9", cy: "12", r: "1" }), h("circle", { cx: "9", cy: "5", r: "1" }), h("circle", { cx: "9", cy: "19", r: "1" }), h("circle", { cx: "15", cy: "12", r: "1" }), h("circle", { cx: "15", cy: "5", r: "1" }), h("circle", { cx: "15", cy: "19", r: "1" })))), h("div", { class: "header-content" }, colTemplate), children));
+};
+//# sourceMappingURL=header-cell-renderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-cell-renderer.js","sourceRoot":"","sources":["../../../src/components/header/header-cell-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,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;IAEF,OAAO,CACL,EAAC,gBAAgB,oBAAK,WAAW;QAC9B,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,CAAA,IAAI,CAClB,WACE,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE;gBAC7B,QAAQ,CAAC,CAAC,CAAC,aAA4B,EAAE,eAAe,EAAE;oBACxD,IAAI;oBACJ,KAAK,EAAE,CAAC;iBACT,CAAC,CAAC;YACL,CAAC,EACD,KAAK,EAAC,kBAAkB;YAExB,WACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,kBACR,KAAK,oBACH,OAAO,qBACN,OAAO;gBAEvB,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG;gBAC/B,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG;gBAC9B,cAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG;gBAC/B,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG;gBAChC,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG;gBAC/B,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,GAAG,CAC5B,CACF,CACP;QACD,WAAK,KAAK,EAAC,gBAAgB,IAAE,WAAW,CAAO;QAC9C,QAAQ,CACQ,CACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { type FunctionalComponent, h } from '@stencil/core';\r\nimport { dispatch } from '../../plugins/dispatcher';\r\nimport { doPropMerge } from '../data/column.service';\r\nimport {\r\n  ResizableElement,\r\n  ResizableElementHTMLAttributes,\r\n} from './resizable.element';\r\nimport { ColumnTemplateProp } from '@type';\r\n\r\nexport const ON_COLUMN_CLICK = 'columnclick';\r\n\r\nexport const HeaderCellRenderer: FunctionalComponent<{\r\n  props: ResizableElementHTMLAttributes;\r\n  additionalData: any;\r\n  data?: ColumnTemplateProp;\r\n}> = ({ data, props, additionalData }, children) => {\r\n  let colTemplate: ReturnType<typeof h> = data?.name || '';\r\n  let cellProps = props;\r\n  if (data?.columnTemplate) {\r\n    colTemplate = data.columnTemplate(h, data, additionalData);\r\n  }\r\n  if (data?.columnProperties) {\r\n    const extra = data.columnProperties(data);\r\n    if (extra) {\r\n      cellProps = doPropMerge(props, extra);\r\n    }\r\n  }\r\n  const resizeProps = {\r\n    ...cellProps,\r\n    onMouseDown(e: MouseEvent) {\r\n      dispatch(e.currentTarget, ON_COLUMN_CLICK, {\r\n        data,\r\n        event: e,\r\n      });\r\n    },\r\n  };\r\n\r\n  return (\r\n    <ResizableElement {...resizeProps}>\r\n      {!!data?.rowDrag && (\r\n        <div\r\n          onMouseDown={(e: MouseEvent) => {\r\n            dispatch(e.currentTarget as HTMLElement, ON_COLUMN_CLICK, {\r\n              data,\r\n              event: e,\r\n            });\r\n          }}\r\n          class=\"header-cell-drag\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"18\"\r\n            height=\"18\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"1.3\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          >\r\n            <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n            <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n            <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n            <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n            <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n            <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n          </svg>\r\n        </div>\r\n      )}\r\n      <div class=\"header-content\">{colTemplate}</div>\r\n      {children}\r\n    </ResizableElement>\r\n  );\r\n};\r\n"]}

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

@@ -0,0 +1,25 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { h } from "@stencil/core";
+import { HEADER_CLASS, MIN_COL_SIZE } from "../../utils/consts";
+import { HeaderCellRenderer } from "./header-cell-renderer";
+const HeaderGroupRenderer = (p) => {
+    const groupProps = {
+        canResize: p.canResize,
+        minWidth: p.group.indexes.length * MIN_COL_SIZE,
+        maxWidth: 0,
+        active: p.active || ['r'],
+        class: {
+            [HEADER_CLASS]: true,
+        },
+        style: {
+            transform: `translateX(${p.start}px)`,
+            width: `${p.end - p.start}px`,
+        },
+        onResize: p.onResize,
+    };
+    return (h(HeaderCellRenderer, { data: Object.assign(Object.assign({}, p.group), { prop: '', providers: p.providers, index: p.start }), props: groupProps, additionalData: p.additionalData }));
+};
+export default HeaderGroupRenderer;
+//# sourceMappingURL=header-group-renderer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-group-renderer.js","sourceRoot":"","sources":["../../../src/components/header/header-group-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAY5D,MAAM,mBAAmB,GAAG,CAAC,CAA2B,EAAwB,EAAE;IAChF,MAAM,UAAU,GAAqC;QACnD,SAAS,EAAE,CAAC,CAAC,SAAS;QACtB,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,YAAY;QAC/C,QAAQ,EAAE,CAAC;QAEX,MAAM,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC;QACzB,KAAK,EAAE;YACL,CAAC,YAAY,CAAC,EAAE,IAAI;SACrB;QACD,KAAK,EAAE;YACL,SAAS,EAAE,cAAc,CAAC,CAAC,KAAK,KAAK;YACrC,KAAK,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,KAAK,IAAI;SAC9B;QACD,QAAQ,EAAE,CAAC,CAAC,QAAQ;KACrB,CAAC;IACF,OAAO,CACL,EAAC,kBAAkB,IACjB,IAAI,kCACC,CAAC,CAAC,KAAK,KACV,IAAI,EAAE,EAAE,EACR,SAAS,EAAE,CAAC,CAAC,SAAS,EACtB,KAAK,EAAE,CAAC,CAAC,KAAK,KAEhB,KAAK,EAAE,UAAU,EACjB,cAAc,EAAE,CAAC,CAAC,cAAc,GAChC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { h } from '@stencil/core';\r\nimport { Group } from '@store';\r\nimport type { CellProps, ProvidersColumns } from '@type';\r\nimport { ResizeEvent, ResizeProps } from './resizable.directive';\r\nimport { HEADER_CLASS, MIN_COL_SIZE } from '../../utils/consts';\r\nimport { HeaderCellRenderer } from './header-cell-renderer';\r\n\r\nexport type HeaderGroupRendererProps = {\r\n  start: number;\r\n  end: number;\r\n  group: Group;\r\n  providers: ProvidersColumns;\r\n  additionalData: any;\r\n  canResize?: boolean;\r\n  onResize?(e: ResizeEvent): void;\r\n} & Partial<Pick<ResizeProps, 'active'>>;\r\n\r\nconst HeaderGroupRenderer = (p: HeaderGroupRendererProps): ReturnType<typeof h> => {\r\n  const groupProps: CellProps & Partial<ResizeProps> = {\r\n    canResize: p.canResize,\r\n    minWidth: p.group.indexes.length * MIN_COL_SIZE,\r\n    maxWidth: 0,\r\n\r\n    active: p.active || ['r'],\r\n    class: {\r\n      [HEADER_CLASS]: true,\r\n    },\r\n    style: {\r\n      transform: `translateX(${p.start}px)`,\r\n      width: `${p.end - p.start}px`,\r\n    },\r\n    onResize: p.onResize,\r\n  };\r\n  return (\r\n    <HeaderCellRenderer\r\n      data={{\r\n        ...p.group,\r\n        prop: '',\r\n        providers: p.providers,\r\n        index: p.start,\r\n      }}\r\n      props={groupProps}\r\n      additionalData={p.additionalData}\r\n    />\r\n  );\r\n};\r\n\r\nexport default HeaderGroupRenderer;\r\n"]}

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

@@ -0,0 +1,61 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { h } from "@stencil/core";
+import { FilterButton } from "../../plugins/filter/filter.button";
+import { SortingSign } from "../../plugins/sorting/sorting.sign";
+import { DATA_COL, FOCUS_CLASS, HEADER_CLASS, HEADER_SORTABLE_CLASS, MIN_COL_SIZE, } from "../../utils/consts";
+import { HeaderCellRenderer } from "./header-cell-renderer";
+const HeaderRenderer = (p) => {
+    var _a, _b, _c, _d, _e;
+    const cellClass = {
+        [HEADER_CLASS]: true,
+        [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
+    };
+    if ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) {
+        cellClass[p.data.order] = true;
+    }
+    const dataProps = {
+        [DATA_COL]: p.column.itemIndex,
+        canResize: p.canResize,
+        minWidth: ((_c = p.data) === null || _c === void 0 ? void 0 : _c.minSize) || MIN_COL_SIZE,
+        maxWidth: (_d = p.data) === null || _d === void 0 ? void 0 : _d.maxSize,
+        active: p.active || ['r'],
+        class: cellClass,
+        style: {
+            width: `${p.column.size}px`,
+            transform: `translateX(${p.column.start}px)`,
+        },
+        onResize: p.onResize,
+        onDblClick(originalEvent) {
+            var _a;
+            (_a = p.onDblClick) === null || _a === void 0 ? void 0 : _a.call(p, {
+                column: p.data,
+                index: p.column.itemIndex,
+                originalEvent,
+                providers: p.data.providers,
+            });
+        },
+        onClick(originalEvent) {
+            if (originalEvent.defaultPrevented || !p.onClick) {
+                return;
+            }
+            p.onClick({
+                column: p.data,
+                index: p.column.itemIndex,
+                originalEvent,
+                providers: p.data.providers,
+            });
+        },
+    };
+    if (p.range) {
+        if (p.column.itemIndex >= p.range.x && p.column.itemIndex <= p.range.x1) {
+            if (typeof dataProps.class === 'object') {
+                dataProps.class[FOCUS_CLASS] = true;
+            }
+        }
+    }
+    return (h(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, h(SortingSign, { column: p.data }), p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? (h(FilterButton, { column: p.data })) : ('')));
+};
+export default HeaderRenderer;
+//# sourceMappingURL=header-renderer.js.map

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

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

package/dist/collection/components/header/resizable.directive.js

@@ -0,0 +1,237 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+export var ResizeEvents;
+(function (ResizeEvents) {
+    ResizeEvents["start"] = "resize:start";
+    ResizeEvents["move"] = "resize:move";
+    ResizeEvents["end"] = "resize:end";
+})(ResizeEvents || (ResizeEvents = {}));
+const RESIZE_MASK = {
+    'resizable-r': { bit: 0b0001, cursor: 'ew-resize' },
+    'resizable-rb': { bit: 0b0011, cursor: 'se-resize' },
+    'resizable-b': { bit: 0b0010, cursor: 's-resize' },
+    'resizable-lb': { bit: 0b0110, cursor: 'sw-resize' },
+    'resizable-l': { bit: 0b0100, cursor: 'w-resize' },
+    'resizable-lt': { bit: 0b1100, cursor: 'nw-resize' },
+    'resizable-t': { bit: 0b1000, cursor: 'n-resize' },
+    'resizable-rt': { bit: 0b1001, cursor: 'ne-resize' },
+};
+const DISABLE_MASK = {
+    l: 0b0001,
+    t: 0b0010,
+    w: 0b0100,
+    h: 0b1000,
+};
+const defaultProps = (props) => {
+    return Object.assign(Object.assign({}, props), { fitParent: props.fitParent || false, active: props.active || [], disableAttributes: props.disableAttributes || [], minWidth: props.minWidth || 0, minHeight: props.minHeight || 0 });
+};
+export class ResizeDirective {
+    constructor(initialProps, $event) {
+        var _a, _b;
+        this.initialProps = initialProps;
+        this.$event = $event;
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.width = 0;
+        this.height = 0;
+        this.changeX = 0;
+        this.changeY = 0;
+        this.disableCalcMap = 0b1111;
+        this.props = defaultProps(initialProps);
+        this.mouseMoveFunc = this.handleMove.bind(this);
+        this.mouseUpFunc = this.handleUp.bind(this);
+        this.minW = this.props.minWidth;
+        this.minH = this.props.minHeight;
+        this.maxW = (_a = this.props.maxWidth) !== null && _a !== void 0 ? _a : 0;
+        this.maxH = (_b = this.props.maxHeight) !== null && _b !== void 0 ? _b : 0;
+        this.parent = { width: 0, height: 0 };
+        this.resizeState = 0;
+    }
+    set($el) {
+        this.$el = $el;
+        this.props.disableAttributes.forEach(attr => {
+            switch (attr) {
+                case 'l':
+                    this.disableCalcMap &= ~DISABLE_MASK.l;
+                    break;
+                case 't':
+                    this.disableCalcMap &= ~DISABLE_MASK.t;
+                    break;
+                case 'w':
+                    this.disableCalcMap &= ~DISABLE_MASK.w;
+                    break;
+                case 'h':
+                    this.disableCalcMap &= ~DISABLE_MASK.h;
+            }
+        });
+    }
+    emitEvent(eventName, additionalOptions) {
+        var _a;
+        if (!this.$event) {
+            return;
+        }
+        const isLeft = (_a = this.activeResizer) === null || _a === void 0 ? void 0 : _a.classList.contains('resizable-l');
+        this.$event(Object.assign({ eventName, width: this.width + this.changeX * (isLeft ? -1 : 1), height: this.height + this.changeY, changedX: this.changeX, changedY: this.changeY }, additionalOptions));
+    }
+    static isTouchEvent(e) {
+        var _a;
+        const event = e;
+        return ((_a = event.touches) === null || _a === void 0 ? void 0 : _a.length) >= 0;
+    }
+    handleMove(event) {
+        var _a;
+        if (!this.resizeState) {
+            return;
+        }
+        let eventY, eventX;
+        if (ResizeDirective.isTouchEvent(event)) {
+            eventY = event.touches[0].clientY;
+            eventX = event.touches[0].clientX;
+        }
+        else {
+            eventY = event.clientY;
+            eventX = event.clientX;
+        }
+        let isX = this.resizeState & RESIZE_MASK['resizable-r'].bit ||
+            this.resizeState & RESIZE_MASK['resizable-l'].bit;
+        let isY = this.resizeState & RESIZE_MASK['resizable-t'].bit ||
+            this.resizeState & RESIZE_MASK['resizable-b'].bit;
+        if (isY && this.disableCalcMap & DISABLE_MASK.h) {
+            let diffY = eventY - this.mouseY;
+            let changedY = this.changeY + diffY;
+            const newHeight = this.height + changedY;
+            // if overcrossed min height
+            if (newHeight < this.minH) {
+                changedY = -(this.height - this.minH);
+            }
+            // if overcrossed max heiht
+            if (this.maxH && newHeight > this.maxH) {
+                changedY = this.maxH - this.height;
+            }
+            this.changeY = changedY;
+            this.mouseY = eventY;
+            if (this.activeResizer) {
+                this.activeResizer.style.bottom = `${-this.changeY}px`;
+            }
+        }
+        if (isX && this.disableCalcMap & DISABLE_MASK.w) {
+            const isLeft = (_a = this.activeResizer) === null || _a === void 0 ? void 0 : _a.classList.contains('resizable-l');
+            let diffX = eventX - this.mouseX;
+            let changedX = this.changeX + diffX;
+            const newWidth = this.width + changedX * (isLeft ? -1 : 1);
+            // if overcrossed min width
+            if (newWidth < this.minW) {
+                changedX = -(this.width - this.minW);
+            }
+            // if overcrossed max width
+            if (this.maxW && newWidth > this.maxW) {
+                changedX = this.maxW - this.width;
+            }
+            this.changeX = changedX;
+            this.mouseX = eventX;
+            if (this.activeResizer) {
+                if (!isLeft) {
+                    this.activeResizer.style.right = `${-this.changeX}px`;
+                }
+                else {
+                    this.activeResizer.style.left = `${this.changeX}px`;
+                }
+            }
+        }
+        this.emitEvent(ResizeEvents.move);
+    }
+    handleDown(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        // stop other events if resize in progress
+        event.preventDefault();
+        this.dropInitial();
+        for (let elClass in RESIZE_MASK) {
+            const target = event.target;
+            if (this.$el.contains(target) && (target === null || target === void 0 ? void 0 : target.classList.contains(elClass))) {
+                document.body.style.cursor = RESIZE_MASK[elClass].cursor;
+                if (ResizeDirective.isTouchEvent(event)) {
+                    this.setInitials(event.touches[0], target);
+                }
+                else {
+                    event.preventDefault && event.preventDefault();
+                    this.setInitials(event, target);
+                }
+                this.resizeState = RESIZE_MASK[elClass].bit;
+                const eventName = ResizeEvents.start;
+                this.emitEvent(eventName);
+                break;
+            }
+        }
+        this.bindMove();
+    }
+    handleUp(e) {
+        e.preventDefault();
+        if (this.resizeState !== 0) {
+            this.resizeState = 0;
+            document.body.style.cursor = '';
+            const eventName = ResizeEvents.end;
+            this.emitEvent(eventName);
+        }
+        this.dropInitial();
+        this.unbindMove();
+    }
+    setInitials({ clientX, clientY }, target) {
+        var _a, _b, _c, _d;
+        const computedStyle = getComputedStyle(this.$el);
+        this.$el.classList.add('active');
+        this.activeResizer = target;
+        if (this.disableCalcMap & DISABLE_MASK.w) {
+            this.mouseX = clientX;
+            this.width = this.$el.clientWidth;
+            this.parent.width = (_b = (_a = this.$el.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
+            // min width
+            const minPaddingX = parseFloat(computedStyle.paddingLeft) +
+                parseFloat(computedStyle.paddingRight);
+            this.minW = Math.max(minPaddingX, this.initialProps.minWidth || 0);
+            // max width
+            if (this.initialProps.maxWidth) {
+                this.maxW = Math.max(this.width, this.initialProps.maxWidth);
+            }
+        }
+        if (this.disableCalcMap & DISABLE_MASK.h) {
+            this.mouseY = clientY;
+            this.height = this.$el.clientHeight;
+            this.parent.height = (_d = (_c = this.$el.parentElement) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
+            // min height
+            const minPaddingY = parseFloat(computedStyle.paddingTop) +
+                parseFloat(computedStyle.paddingBottom);
+            this.minH = Math.max(minPaddingY, this.initialProps.minHeight || 0);
+            // max height
+            if (this.initialProps.maxHeight) {
+                this.maxH = Math.max(this.height, this.initialProps.maxHeight);
+            }
+        }
+    }
+    dropInitial() {
+        this.changeX = this.changeY = this.minW = this.minH;
+        this.width = this.height = 0;
+        if (this.activeResizer) {
+            this.activeResizer.removeAttribute('style');
+        }
+        this.$el.classList.remove('active');
+        this.activeResizer = undefined;
+    }
+    bindMove() {
+        document.documentElement.addEventListener('mouseup', this.mouseUpFunc, true);
+        document.documentElement.addEventListener('touchend', this.mouseUpFunc, true);
+        document.documentElement.addEventListener('mousemove', this.mouseMoveFunc, true);
+        document.documentElement.addEventListener('touchmove', this.mouseMoveFunc, true);
+        document.documentElement.addEventListener('mouseleave', this.mouseUpFunc);
+    }
+    unbindMove() {
+        document.documentElement.removeEventListener('mouseup', this.mouseUpFunc, true);
+        document.documentElement.removeEventListener('touchend', this.mouseUpFunc, true);
+        document.documentElement.removeEventListener('mousemove', this.mouseMoveFunc, true);
+        document.documentElement.removeEventListener('touchmove', this.mouseMoveFunc, true);
+        document.documentElement.removeEventListener('mouseleave', this.mouseUpFunc);
+    }
+}
+//# sourceMappingURL=resizable.directive.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.directive.js","sourceRoot":"","sources":["../../../src/components/header/resizable.directive.tsx"],"names":[],"mappings":"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","sourcesContent":["export type ResizeProps = {\r\n  active: ('r' | 'rb' | 'b' | 'lb' | 'l' | 'lt' | 't' | 'rt')[]; // all\r\n  fitParent: boolean; // false\r\n  minWidth: number; // 0\r\n  minHeight: number; // 0\r\n\r\n  disableAttributes: ('l' | 't' | 'w' | 'h')[]; // []\r\n  maxWidth?: number;\r\n  maxHeight?: number;\r\n\r\n  onResize?(e: ResizeEvent): void;\r\n};\r\n\r\nexport type ResizeEvent = {\r\n  eventName: string;\r\n  changedX?: number;\r\n  changedY?: number;\r\n  width?: number;\r\n  height?: number;\r\n};\r\n\r\nexport enum ResizeEvents {\r\n  start = 'resize:start',\r\n  move = 'resize:move',\r\n  end = 'resize:end',\r\n}\r\n\r\nconst RESIZE_MASK: { [key: string]: any } = {\r\n  'resizable-r': { bit: 0b0001, cursor: 'ew-resize' },\r\n  'resizable-rb': { bit: 0b0011, cursor: 'se-resize' },\r\n  'resizable-b': { bit: 0b0010, cursor: 's-resize' },\r\n  'resizable-lb': { bit: 0b0110, cursor: 'sw-resize' },\r\n  'resizable-l': { bit: 0b0100, cursor: 'w-resize' },\r\n  'resizable-lt': { bit: 0b1100, cursor: 'nw-resize' },\r\n  'resizable-t': { bit: 0b1000, cursor: 'n-resize' },\r\n  'resizable-rt': { bit: 0b1001, cursor: 'ne-resize' },\r\n};\r\n\r\nconst DISABLE_MASK = {\r\n  l: 0b0001,\r\n  t: 0b0010,\r\n  w: 0b0100,\r\n  h: 0b1000,\r\n};\r\n\r\nconst defaultProps = (props: Partial<ResizeProps>): ResizeProps => {\r\n  return {\r\n    ...props,\r\n    fitParent: props.fitParent || false,\r\n    active: props.active || [],\r\n    disableAttributes: props.disableAttributes || [],\r\n    minWidth: props.minWidth || 0,\r\n    minHeight: props.minHeight || 0,\r\n  };\r\n};\r\n\r\nexport class ResizeDirective {\r\n  private $el: HTMLElement;\r\n  private props: ResizeProps;\r\n  private minW: number;\r\n  private minH: number;\r\n  private maxW: number;\r\n  private maxH: number;\r\n\r\n  private mouseX = 0;\r\n  private mouseY = 0;\r\n\r\n  private width = 0;\r\n  private height = 0;\r\n\r\n  private changeX = 0;\r\n  private changeY = 0;\r\n\r\n  private parent: { width: number; height: number };\r\n  private resizeState: number;\r\n  private activeResizer?: HTMLElement;\r\n  private disableCalcMap = 0b1111;\r\n\r\n  private mouseMoveFunc: () => void;\r\n  private mouseUpFunc: () => void;\r\n\r\n  constructor(\r\n    private initialProps: Partial<ResizeProps>,\r\n    private $event?: (e: ResizeEvent) => void,\r\n  ) {\r\n    this.props = defaultProps(initialProps);\r\n    this.mouseMoveFunc = this.handleMove.bind(this);\r\n    this.mouseUpFunc = this.handleUp.bind(this);\r\n\r\n    this.minW = this.props.minWidth;\r\n    this.minH = this.props.minHeight;\r\n    this.maxW = this.props.maxWidth ?? 0;\r\n    this.maxH = this.props.maxHeight ?? 0;\r\n    this.parent = { width: 0, height: 0 };\r\n    this.resizeState = 0;\r\n  }\r\n\r\n  set($el: HTMLElement) {\r\n    this.$el = $el;\r\n    this.props.disableAttributes.forEach(attr => {\r\n      switch (attr) {\r\n        case 'l':\r\n          this.disableCalcMap &= ~DISABLE_MASK.l;\r\n          break;\r\n        case 't':\r\n          this.disableCalcMap &= ~DISABLE_MASK.t;\r\n          break;\r\n        case 'w':\r\n          this.disableCalcMap &= ~DISABLE_MASK.w;\r\n          break;\r\n        case 'h':\r\n          this.disableCalcMap &= ~DISABLE_MASK.h;\r\n      }\r\n    });\r\n  }\r\n  emitEvent(eventName: string, additionalOptions?: any) {\r\n    if (!this.$event) {\r\n      return;\r\n    }\r\n    const isLeft = this.activeResizer?.classList.contains('resizable-l');\r\n    this.$event({\r\n      eventName,\r\n      width: this.width + this.changeX * (isLeft ? -1 : 1),\r\n      height: this.height + this.changeY,\r\n      changedX: this.changeX,\r\n      changedY: this.changeY,\r\n      ...additionalOptions,\r\n    });\r\n  }\r\n\r\n  private static isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent {\r\n    const event = e as TouchEvent;\r\n    return event.touches?.length >= 0;\r\n  }\r\n\r\n  handleMove(event: MouseEvent | TouchEvent) {\r\n    if (!this.resizeState) {\r\n      return;\r\n    }\r\n    let eventY, eventX;\r\n    if (ResizeDirective.isTouchEvent(event)) {\r\n      eventY = event.touches[0].clientY;\r\n      eventX = event.touches[0].clientX;\r\n    } else {\r\n      eventY = event.clientY;\r\n      eventX = event.clientX;\r\n    }\r\n    let isX =\r\n      this.resizeState & RESIZE_MASK['resizable-r'].bit ||\r\n      this.resizeState & RESIZE_MASK['resizable-l'].bit;\r\n\r\n    let isY =\r\n      this.resizeState & RESIZE_MASK['resizable-t'].bit ||\r\n      this.resizeState & RESIZE_MASK['resizable-b'].bit;\r\n\r\n    if (isY && this.disableCalcMap & DISABLE_MASK.h) {\r\n      let diffY = eventY - this.mouseY;\r\n      let changedY = this.changeY + diffY;\r\n      const newHeight = this.height + changedY;\r\n      // if overcrossed min height\r\n      if (newHeight < this.minH) {\r\n        changedY = -(this.height - this.minH);\r\n      }\r\n      // if overcrossed max heiht\r\n      if (this.maxH && newHeight > this.maxH) {\r\n        changedY = this.maxH - this.height;\r\n      }\r\n\r\n      this.changeY = changedY;\r\n      this.mouseY = eventY;\r\n\r\n      if (this.activeResizer) {\r\n        this.activeResizer.style.bottom = `${-this.changeY}px`;\r\n      }\r\n    }\r\n    if (isX && this.disableCalcMap & DISABLE_MASK.w) {\r\n      const isLeft = this.activeResizer?.classList.contains('resizable-l');\r\n      let diffX = eventX - this.mouseX;\r\n      let changedX = this.changeX + diffX;\r\n      const newWidth = this.width + changedX * (isLeft ? -1 : 1);\r\n\r\n      // if overcrossed min width\r\n      if (newWidth < this.minW) {\r\n        changedX = -(this.width - this.minW);\r\n      }\r\n      // if overcrossed max width\r\n      if (this.maxW && newWidth > this.maxW) {\r\n        changedX = this.maxW - this.width;\r\n      }\r\n\r\n      this.changeX = changedX;\r\n      this.mouseX = eventX;\r\n\r\n      if (this.activeResizer) {\r\n        if (!isLeft) {\r\n          this.activeResizer.style.right = `${-this.changeX}px`;\r\n        } else {\r\n          this.activeResizer.style.left = `${this.changeX}px`;\r\n        }\r\n      }\r\n    }\r\n    this.emitEvent(ResizeEvents.move);\r\n  }\r\n\r\n  handleDown(event: MouseEvent | TouchEvent) {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n    // stop other events if resize in progress\r\n    event.preventDefault();\r\n\r\n    this.dropInitial();\r\n    for (let elClass in RESIZE_MASK) {\r\n      const target = event.target as HTMLElement | null;\r\n      if (this.$el.contains(target) && target?.classList.contains(elClass)) {\r\n        document.body.style.cursor = RESIZE_MASK[elClass].cursor;\r\n        if (ResizeDirective.isTouchEvent(event)) {\r\n          this.setInitials(event.touches[0], target);\r\n        } else {\r\n          event.preventDefault && event.preventDefault();\r\n          this.setInitials(event, target);\r\n        }\r\n        this.resizeState = RESIZE_MASK[elClass].bit;\r\n        const eventName = ResizeEvents.start;\r\n        this.emitEvent(eventName);\r\n        break;\r\n      }\r\n    }\r\n    this.bindMove();\r\n  }\r\n\r\n  handleUp(e: MouseEvent) {\r\n    e.preventDefault();\r\n    if (this.resizeState !== 0) {\r\n      this.resizeState = 0;\r\n      document.body.style.cursor = '';\r\n      const eventName = ResizeEvents.end;\r\n      this.emitEvent(eventName);\r\n    }\r\n    this.dropInitial();\r\n    this.unbindMove();\r\n  }\r\n\r\n  private setInitials(\r\n    { clientX, clientY }: { clientX: number; clientY: number },\r\n    target?: HTMLElement,\r\n  ) {\r\n    const computedStyle = getComputedStyle(this.$el);\r\n    this.$el.classList.add('active');\r\n    this.activeResizer = target;\r\n\r\n    if (this.disableCalcMap & DISABLE_MASK.w) {\r\n      this.mouseX = clientX;\r\n      this.width = this.$el.clientWidth;\r\n      this.parent.width = this.$el.parentElement?.clientWidth ?? 0;\r\n\r\n      // min width\r\n      const minPaddingX =\r\n        parseFloat(computedStyle.paddingLeft) +\r\n        parseFloat(computedStyle.paddingRight);\r\n      this.minW = Math.max(minPaddingX, this.initialProps.minWidth || 0);\r\n\r\n      // max width\r\n      if (this.initialProps.maxWidth) {\r\n        this.maxW = Math.max(this.width, this.initialProps.maxWidth);\r\n      }\r\n    }\r\n\r\n    if (this.disableCalcMap & DISABLE_MASK.h) {\r\n      this.mouseY = clientY;\r\n      this.height = this.$el.clientHeight;\r\n      this.parent.height = this.$el.parentElement?.clientHeight ?? 0;\r\n\r\n      // min height\r\n      const minPaddingY =\r\n        parseFloat(computedStyle.paddingTop) +\r\n        parseFloat(computedStyle.paddingBottom);\r\n      this.minH = Math.max(minPaddingY, this.initialProps.minHeight || 0);\r\n      // max height\r\n      if (this.initialProps.maxHeight) {\r\n        this.maxH = Math.max(this.height, this.initialProps.maxHeight);\r\n      }\r\n    }\r\n  }\r\n\r\n  private dropInitial() {\r\n    this.changeX = this.changeY = this.minW = this.minH;\r\n    this.width = this.height = 0;\r\n    if (this.activeResizer) {\r\n      this.activeResizer.removeAttribute('style');\r\n    }\r\n    this.$el.classList.remove('active');\r\n    this.activeResizer = undefined;\r\n  }\r\n\r\n  private bindMove() {\r\n    document.documentElement.addEventListener(\r\n      'mouseup',\r\n      this.mouseUpFunc,\r\n      true,\r\n    );\r\n    document.documentElement.addEventListener(\r\n      'touchend',\r\n      this.mouseUpFunc,\r\n      true,\r\n    );\r\n    document.documentElement.addEventListener(\r\n      'mousemove',\r\n      this.mouseMoveFunc,\r\n      true,\r\n    );\r\n    document.documentElement.addEventListener(\r\n      'touchmove',\r\n      this.mouseMoveFunc,\r\n      true,\r\n    );\r\n    document.documentElement.addEventListener('mouseleave', this.mouseUpFunc);\r\n  }\r\n\r\n  private unbindMove() {\r\n    document.documentElement.removeEventListener(\r\n      'mouseup',\r\n      this.mouseUpFunc,\r\n      true,\r\n    );\r\n    document.documentElement.removeEventListener(\r\n      'touchend',\r\n      this.mouseUpFunc,\r\n      true,\r\n    );\r\n    document.documentElement.removeEventListener(\r\n      'mousemove',\r\n      this.mouseMoveFunc,\r\n      true,\r\n    );\r\n    document.documentElement.removeEventListener(\r\n      'touchmove',\r\n      this.mouseMoveFunc,\r\n      true,\r\n    );\r\n    document.documentElement.removeEventListener(\r\n      'mouseleave',\r\n      this.mouseUpFunc,\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,38 @@
+/*!
+ * Built by LevelSkill.Pro
+ */
+import { h } from "@stencil/core";
+import { ResizeDirective, ResizeEvents, } from "./resizable.directive";
+export const ResizableElement = (props, children) => {
+    const resizeEls = [];
+    const directive = (props.canResize &&
+        new ResizeDirective(props, e => {
+            var _a;
+            if (e.eventName === ResizeEvents.end) {
+                (_a = props.onResize) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            }
+        })) ||
+        null;
+    if (props.active) {
+        if (props.canResize) {
+            for (let p in props.active) {
+                resizeEls.push(h("div", { onClick: e => e.preventDefault(), onDblClick: e => {
+                        var _a;
+                        e.preventDefault();
+                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                    }, onMouseDown: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), onTouchStart: (e) => directive === null || directive === void 0 ? void 0 : directive.handleDown(e), class: `resizable resizable-${props.active[p]}` }));
+            }
+        }
+        else {
+            for (let _p in props.active) {
+                resizeEls.push(h("div", { onClick: e => e.preventDefault(), onTouchStart: (e) => e.preventDefault(), onDblClick: e => {
+                        var _a;
+                        e.preventDefault();
+                        (_a = props.onDblClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                    }, class: `no-resize` }));
+            }
+        }
+    }
+    return (h("div", Object.assign({}, props, { ref: e => e && (directive === null || directive === void 0 ? void 0 : directive.set(e)) }), children, resizeEls));
+};
+//# sourceMappingURL=resizable.element.js.map

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

@@ -0,0 +1 @@
+{"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,EAAE,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC5B,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,WAAW,GAClB,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';\r\nimport {\r\n  ResizeProps,\r\n  ResizeDirective,\r\n  ResizeEvents,\r\n} from './resizable.directive';\r\nimport type { CellProps } from '@type';\r\n\r\nexport type ResizableElementHTMLAttributes = Partial<ResizeProps> & CellProps;\r\n\r\nexport const ResizableElement: FunctionalComponent = (\r\n  props: ResizableElementHTMLAttributes,\r\n  children: VNode[],\r\n) => {\r\n  const resizeEls: VNode[] = [];\r\n  const directive =\r\n    (props.canResize &&\r\n      new ResizeDirective(props, e => {\r\n        if (e.eventName === ResizeEvents.end) {\r\n          props.onResize?.(e);\r\n        }\r\n      })) ||\r\n    null;\r\n\r\n  if (props.active) {\r\n    if (props.canResize) {\r\n      for (let p in props.active) {\r\n        resizeEls.push(\r\n          <div\r\n            onClick={e => e.preventDefault()}\r\n            onDblClick={e => {\r\n              e.preventDefault();\r\n              props.onDblClick?.(e);\r\n            }}\r\n            onMouseDown={(e: MouseEvent) => directive?.handleDown(e)}\r\n            onTouchStart={(e: TouchEvent) => directive?.handleDown(e)}\r\n            class={`resizable resizable-${props.active[p]}`}\r\n          />,\r\n        );\r\n      }\r\n    } else {\r\n      for (let _p in props.active) {\r\n        resizeEls.push(\r\n          <div\r\n            onClick={e => e.preventDefault()}\r\n            onTouchStart={(e: TouchEvent) => e.preventDefault()}\r\n            onDblClick={e => {\r\n              e.preventDefault();\r\n              props.onDblClick?.(e);\r\n            }}\r\n            class={`no-resize`}\r\n          />,\r\n        );\r\n      }\r\n    }\r\n  }\r\n  return (\r\n    <div {...props} ref={e => e && directive?.set(e)}>\r\n      {children}\r\n      {resizeEls}\r\n    </div>\r\n  );\r\n};\r\n"]}