@revolist/revogrid 4.12.12 → 4.13.2

package/dist/revo-grid/edit.utils-b59306be.js

@@ -1,5 +1,17 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import{N as o}from"./dimension.helpers-5567e424.js";function n(n){return!!(n===null||n===void 0?void 0:n.closest(`.${o}`))}function e(o){return typeof o==="function"&&typeof o.prototype==="object"}export{e as a,n as i};
+import { N as EDIT_INPUT_WR } from './dimension.helpers-5567e424.js';
+
+// is edit input
+function isEditInput(el) {
+    return !!(el === null || el === void 0 ? void 0 : el.closest(`.${EDIT_INPUT_WR}`));
+}
+// Type guard for EditorCtrConstructible
+function isEditorCtrConstructible(editor) {
+    return typeof editor === 'function' && typeof editor.prototype === 'object';
+}
+
+export { isEditorCtrConstructible as a, isEditInput as i };
+
 //# sourceMappingURL=edit.utils-b59306be.js.map

package/dist/revo-grid/edit.utils-b59306be.js.map

@@ -1 +1 @@
-{"version":3,"names":["isEditInput","el","closest","EDIT_INPUT_WR","isEditorCtrConstructible","editor","prototype"],"sources":["src/components/editors/edit.utils.ts"],"sourcesContent":["import { EDIT_INPUT_WR } from '../../utils/consts';\nimport {\n  EditorCtrConstructible,\n} from '@type';\n// is edit input\nexport function isEditInput(el?: HTMLElement) {\n  return !!el?.closest(`.${EDIT_INPUT_WR}`);\n}\n\n\n// Type guard for EditorCtrConstructible\nexport function isEditorCtrConstructible(\n  editor: any,\n): editor is EditorCtrConstructible {\n  return typeof editor === 'function' && typeof editor.prototype === 'object';\n}\n"],"mappings":";;;6DAKgBA,EAAYC,GAC1B,SAASA,IAAE,MAAFA,SAAE,SAAFA,EAAIC,QAAQ,IAAIC,KAC3B,C,SAIgBC,EACdC,GAEA,cAAcA,IAAW,mBAAqBA,EAAOC,YAAc,QACrE,Q","ignoreList":[]}
+{"file":"edit.utils-b59306be.js","mappings":";;;;;AAIA;SACgB,WAAW,CAAC,EAAgB;IAC1C,OAAO,CAAC,EAAC,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,OAAO,CAAC,IAAI,aAAa,EAAE,CAAC,CAAA,CAAC;AAC5C,CAAC;AAGD;SACgB,wBAAwB,CACtC,MAAW;IAEX,OAAO,OAAO,MAAM,KAAK,UAAU,IAAI,OAAO,MAAM,CAAC,SAAS,KAAK,QAAQ,CAAC;AAC9E;;;;","names":[],"sources":["src/components/editors/edit.utils.ts"],"sourcesContent":["import { EDIT_INPUT_WR } from '../../utils/consts';\nimport {\n  EditorCtrConstructible,\n} from '@type';\n// is edit input\nexport function isEditInput(el?: HTMLElement) {\n  return !!el?.closest(`.${EDIT_INPUT_WR}`);\n}\n\n\n// Type guard for EditorCtrConstructible\nexport function isEditorCtrConstructible(\n  editor: any,\n): editor is EditorCtrConstructible {\n  return typeof editor === 'function' && typeof editor.prototype === 'object';\n}\n"],"version":3}

package/dist/revo-grid/events-cf0893a3.js

@@ -1,5 +1,42 @@
 /*!
  * Built by Revolist OU ❤️
  */
-function n(n){return!!n.touches}function r(n,r){if(r&&n){if(!(n.target instanceof Element&&n.target.classList.contains(r))){return false}}return true}function t(t,e,u){if(n(t)){if(t.touches.length>0){const n=t.touches[0];if(!r(n,u)){return null}return n[e]||0}return null}return t[e]||0}export{t as g,r as v};
+function isTouch(e) {
+    return !!e.touches;
+}
+function verifyTouchTarget(touchEvent, focusClass) {
+    if (focusClass && touchEvent) {
+        if (!(touchEvent.target instanceof Element && touchEvent.target.classList.contains(focusClass))) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * Function to get the value of a specific property from a MouseEvent or TouchEvent object.
+ */
+function getPropertyFromEvent(e, prop, focusClass // for touch events
+) {
+    // Check if the event is a touch event
+    if (isTouch(e)) {
+        // If the event has touches, get the first touch
+        if (e.touches.length > 0) {
+            const touchEvent = e.touches[0];
+            // Check if the target of the touch event is the specified element
+            if (!verifyTouchTarget(touchEvent, focusClass)) {
+                // If not, return null
+                return null;
+            }
+            // Get the value of the specified property from the touch event and return it
+            return touchEvent[prop] || 0;
+        }
+        // If there are no touches, return null
+        return null;
+    }
+    // If the event is not a touch event, get the value of the specified property from the event and return it
+    return e[prop] || 0;
+}
+
+export { getPropertyFromEvent as g, verifyTouchTarget as v };
+
 //# sourceMappingURL=events-cf0893a3.js.map

package/dist/revo-grid/events-cf0893a3.js.map

@@ -1 +1 @@
-{"version":3,"names":["isTouch","e","touches","verifyTouchTarget","touchEvent","focusClass","target","Element","classList","contains","getPropertyFromEvent","prop","length"],"sources":["src/utils/events.ts"],"sourcesContent":["function isTouch(e: MouseEvent | TouchEvent): e is TouchEvent {\n  return !!(e as TouchEvent).touches;\n}\n\nexport function verifyTouchTarget(touchEvent?: Touch, focusClass?: string) {\n  if (focusClass && touchEvent) {\n    if (!(touchEvent.target instanceof Element && touchEvent.target.classList.contains(focusClass))) { \n      return false;\n    }\n  }\n  return true;\n}\n\n\n/**\n * Function to get the value of a specific property from a MouseEvent or TouchEvent object.\n */\nexport function getPropertyFromEvent(\n  e: MouseEvent | TouchEvent,\n  prop: keyof Pick<Touch, 'clientX' | 'clientY' | 'screenX' | 'screenY'>,\n  focusClass?: string // for touch events\n): number | null {\n  // Check if the event is a touch event\n  if (isTouch(e)) {\n    // If the event has touches, get the first touch\n    if (e.touches.length > 0) {\n      const touchEvent = e.touches[0];\n      // Check if the target of the touch event is the specified element\n      if (!verifyTouchTarget(touchEvent, focusClass)) {\n        // If not, return null\n        return null;\n      }\n      // Get the value of the specified property from the touch event and return it\n      return (touchEvent[prop] as number) || 0;\n    }\n    // If there are no touches, return null\n    return null;\n  }\n  // If the event is not a touch event, get the value of the specified property from the event and return it\n  return e[prop] || 0;\n}\n"],"mappings":";;;AAAA,SAASA,EAAQC,GACf,QAAUA,EAAiBC,OAC7B,C,SAEgBC,EAAkBC,EAAoBC,GACpD,GAAIA,GAAcD,EAAY,CAC5B,KAAMA,EAAWE,kBAAkBC,SAAWH,EAAWE,OAAOE,UAAUC,SAASJ,IAAc,CAC/F,OAAO,K,EAGX,OAAO,IACT,C,SAMgBK,EACdT,EACAU,EACAN,GAGA,GAAIL,EAAQC,GAAI,CAEd,GAAIA,EAAEC,QAAQU,OAAS,EAAG,CACxB,MAAMR,EAAaH,EAAEC,QAAQ,GAE7B,IAAKC,EAAkBC,EAAYC,GAAa,CAE9C,OAAO,I,CAGT,OAAQD,EAAWO,IAAoB,C,CAGzC,OAAO,I,CAGT,OAAOV,EAAEU,IAAS,CACpB,Q","ignoreList":[]}
+{"file":"events-cf0893a3.js","mappings":";;;AAAA,SAAS,OAAO,CAAC,CAA0B;IACzC,OAAO,CAAC,CAAE,CAAgB,CAAC,OAAO,CAAC;AACrC,CAAC;SAEe,iBAAiB,CAAC,UAAkB,EAAE,UAAmB;IACvE,IAAI,UAAU,IAAI,UAAU,EAAE;QAC5B,IAAI,EAAE,UAAU,CAAC,MAAM,YAAY,OAAO,IAAI,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,EAAE;YAC/F,OAAO,KAAK,CAAC;SACd;KACF;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAGD;;;SAGgB,oBAAoB,CAClC,CAA0B,EAC1B,IAAsE,EACtE,UAAmB;;;IAGnB,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;;QAEd,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACxB,MAAM,UAAU,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;;YAEhC,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,UAAU,CAAC,EAAE;;gBAE9C,OAAO,IAAI,CAAC;aACb;;YAED,OAAQ,UAAU,CAAC,IAAI,CAAY,IAAI,CAAC,CAAC;SAC1C;;QAED,OAAO,IAAI,CAAC;KACb;;IAED,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACtB;;;;","names":[],"sources":["src/utils/events.ts"],"sourcesContent":["function isTouch(e: MouseEvent | TouchEvent): e is TouchEvent {\n  return !!(e as TouchEvent).touches;\n}\n\nexport function verifyTouchTarget(touchEvent?: Touch, focusClass?: string) {\n  if (focusClass && touchEvent) {\n    if (!(touchEvent.target instanceof Element && touchEvent.target.classList.contains(focusClass))) { \n      return false;\n    }\n  }\n  return true;\n}\n\n\n/**\n * Function to get the value of a specific property from a MouseEvent or TouchEvent object.\n */\nexport function getPropertyFromEvent(\n  e: MouseEvent | TouchEvent,\n  prop: keyof Pick<Touch, 'clientX' | 'clientY' | 'screenX' | 'screenY'>,\n  focusClass?: string // for touch events\n): number | null {\n  // Check if the event is a touch event\n  if (isTouch(e)) {\n    // If the event has touches, get the first touch\n    if (e.touches.length > 0) {\n      const touchEvent = e.touches[0];\n      // Check if the target of the touch event is the specified element\n      if (!verifyTouchTarget(touchEvent, focusClass)) {\n        // If not, return null\n        return null;\n      }\n      // Get the value of the specified property from the touch event and return it\n      return (touchEvent[prop] as number) || 0;\n    }\n    // If there are no touches, return null\n    return null;\n  }\n  // If the event is not a touch event, get the value of the specified property from the event and return it\n  return e[prop] || 0;\n}\n"],"version":3}

package/dist/revo-grid/filter.button-84396156.js

@@ -1,5 +1,38 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import{h as t}from"./index-f6fae858.js";const s="rv-filter";const o="active";const n="hasFilter";const r="and-or-button";const e="trash-button";const l=({column:r})=>t("span",null,t("button",{class:{[s]:true,[o]:r&&!!r[n]}},t("svg",{class:"filter-img",viewBox:"0 0 64 64"},t("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},t("path",{d:"M43,48 L43,56 L21,56 L21,48 L43,48 Z M53,28 L53,36 L12,36 L12,28 L53,28 Z M64,8 L64,16 L0,16 L0,8 L64,8 Z",fill:"currentColor"})))));const a=()=>t("div",{class:{[e]:true}},t("svg",{class:"trash-img",viewBox:"0 0 24 24"},t("path",{fill:"currentColor",d:"M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"})));const i=({text:s})=>t("button",{class:{[r]:true,"light revo-button":true}},s);function c(t){if(t.classList.contains(s)){return true}return t===null||t===void 0?void 0:t.closest(`.${s}`)}export{r as A,s as F,e as T,o as a,n as b,l as c,a as d,i as e,c as i};
+import { h } from './index-f6fae858.js';
+
+const FILTER_BUTTON_CLASS = 'rv-filter';
+const FILTER_BUTTON_ACTIVE = 'active';
+const FILTER_PROP = 'hasFilter';
+const AND_OR_BUTTON = 'and-or-button';
+const TRASH_BUTTON = 'trash-button';
+const FilterButton = ({ column }) => {
+    return (h("span", null,
+        h("button", { class: {
+                [FILTER_BUTTON_CLASS]: true,
+                [FILTER_BUTTON_ACTIVE]: column && !!column[FILTER_PROP],
+            } },
+            h("svg", { class: "filter-img", viewBox: "0 0 64 64" },
+                h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
+                    h("path", { d: "M43,48 L43,56 L21,56 L21,48 L43,48 Z M53,28 L53,36 L12,36 L12,28 L53,28 Z M64,8 L64,16 L0,16 L0,8 L64,8 Z", fill: "currentColor" }))))));
+};
+const TrashButton = () => {
+    return (h("div", { class: { [TRASH_BUTTON]: true } },
+        h("svg", { class: "trash-img", viewBox: "0 0 24 24" },
+            h("path", { fill: "currentColor", d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }))));
+};
+const AndOrButton = ({ text }) => {
+    return h("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
+};
+function isFilterBtn(e) {
+    if (e.classList.contains(FILTER_BUTTON_CLASS)) {
+        return true;
+    }
+    return e === null || e === void 0 ? void 0 : e.closest(`.${FILTER_BUTTON_CLASS}`);
+}
+
+export { AND_OR_BUTTON as A, FILTER_BUTTON_CLASS as F, TRASH_BUTTON as T, FILTER_BUTTON_ACTIVE as a, FILTER_PROP as b, FilterButton as c, TrashButton as d, AndOrButton as e, isFilterBtn as i };
+
 //# sourceMappingURL=filter.button-84396156.js.map

package/dist/revo-grid/filter.button-84396156.js.map

@@ -1 +1 @@
-{"version":3,"names":["FILTER_BUTTON_CLASS","FILTER_BUTTON_ACTIVE","FILTER_PROP","AND_OR_BUTTON","TRASH_BUTTON","FilterButton","column","h","class","viewBox","stroke","fill","d","TrashButton","AndOrButton","text","isFilterBtn","e","classList","contains","closest"],"sources":["src/plugins/filter/filter.button.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { ColumnRegular } from '@type';\n\nexport const FILTER_BUTTON_CLASS = 'rv-filter';\nexport const FILTER_BUTTON_ACTIVE = 'active';\n\nexport const FILTER_PROP = 'hasFilter';\nexport const AND_OR_BUTTON = 'and-or-button';\nexport const TRASH_BUTTON = 'trash-button';\n\ntype Props = {\n  column: ColumnRegular;\n};\nexport const FilterButton = ({ column }: Props) => {\n  return (\n    <span>\n      <button\n        class={{\n          [FILTER_BUTTON_CLASS]: true,\n          [FILTER_BUTTON_ACTIVE]: column && !!column[FILTER_PROP],\n        }}\n      >\n        <svg class=\"filter-img\" viewBox=\"0 0 64 64\">\n          <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <path d=\"M43,48 L43,56 L21,56 L21,48 L43,48 Z M53,28 L53,36 L12,36 L12,28 L53,28 Z M64,8 L64,16 L0,16 L0,8 L64,8 Z\" fill=\"currentColor\"></path>\n          </g>\n        </svg>\n      </button>\n    </span>\n  );\n};\n\nexport const TrashButton = () => {\n  return (\n    <div class={{ [TRASH_BUTTON]: true }}>\n      <svg class=\"trash-img\" viewBox=\"0 0 24 24\">\n        <path fill=\"currentColor\" d=\"M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z\" />\n      </svg>\n    </div>\n  );\n};\nexport const AndOrButton = ({ text }: any) => {\n  return <button class={{ [AND_OR_BUTTON]: true, 'light revo-button': true }}>{text}</button>;\n};\n\nexport function isFilterBtn(e: HTMLElement) {\n  if (e.classList.contains(FILTER_BUTTON_CLASS)) {\n    return true;\n  }\n  return e?.closest(`.${FILTER_BUTTON_CLASS}`);\n}\n"],"mappings":";;;8CAGaA,EAAsB,Y,MACtBC,EAAuB,S,MAEvBC,EAAc,Y,MACdC,EAAgB,gB,MAChBC,EAAe,e,MAKfC,EAAe,EAAGC,YAE3BC,EAAA,YACEA,EAAA,UACEC,MAAO,CACLR,CAACA,GAAsB,KACvBC,CAACA,GAAuBK,KAAYA,EAAOJ,KAG7CK,EAAA,OAAKC,MAAM,aAAaC,QAAQ,aAC9BF,EAAA,KAAGG,OAAO,OAAM,eAAc,IAAIC,KAAK,OAAM,YAAW,WACtDJ,EAAA,QAAMK,EAAE,4GAA4GD,KAAK,qB,MAQxHE,EAAc,IAEvBN,EAAA,OAAKC,MAAO,CAAEJ,CAACA,GAAe,OAC5BG,EAAA,OAAKC,MAAM,YAAYC,QAAQ,aAC7BF,EAAA,QAAMI,KAAK,eAAeC,EAAE,mH,MAKvBE,EAAc,EAAGC,UACrBR,EAAA,UAAQC,MAAO,CAAEL,CAACA,GAAgB,KAAM,oBAAqB,OAASY,G,SAG/DC,EAAYC,GAC1B,GAAIA,EAAEC,UAAUC,SAASnB,GAAsB,CAC7C,OAAO,I,CAET,OAAOiB,IAAC,MAADA,SAAC,SAADA,EAAGG,QAAQ,IAAIpB,IACxB,Q","ignoreList":[]}
+{"file":"filter.button-84396156.js","mappings":";;;;;MAGa,mBAAmB,GAAG,YAAY;MAClC,oBAAoB,GAAG,SAAS;MAEhC,WAAW,GAAG,YAAY;MAC1B,aAAa,GAAG,gBAAgB;MAChC,YAAY,GAAG,eAAe;MAK9B,YAAY,GAAG,CAAC,EAAE,MAAM,EAAS;IAC5C,QACE;QACE,cACE,KAAK,EAAE;gBACL,CAAC,mBAAmB,GAAG,IAAI;gBAC3B,CAAC,oBAAoB,GAAG,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC;aACxD;YAED,WAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAC,WAAW;gBACzC,SAAG,MAAM,EAAC,MAAM,kBAAc,GAAG,EAAC,IAAI,EAAC,MAAM,eAAW,SAAS;oBAC/D,YAAM,CAAC,EAAC,2GAA2G,EAAC,IAAI,EAAC,cAAc,GAAQ,CAC7I,CACA,CACC,CACJ,EACP;AACJ,EAAE;MAEW,WAAW,GAAG;IACzB,QACE,WAAK,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,IAAI,EAAE;QAClC,WAAK,KAAK,EAAC,WAAW,EAAC,OAAO,EAAC,WAAW;YACxC,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAC,8GAA8G,GAAG,CACzI,CACF,EACN;AACJ,EAAE;MACW,WAAW,GAAG,CAAC,EAAE,IAAI,EAAO;IACvC,OAAO,cAAQ,KAAK,EAAE,EAAE,CAAC,aAAa,GAAG,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,IAAG,IAAI,CAAU,CAAC;AAC9F,EAAE;SAEc,WAAW,CAAC,CAAc;IACxC,IAAI,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAAE;QAC7C,OAAO,IAAI,CAAC;KACb;IACD,OAAO,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,OAAO,CAAC,IAAI,mBAAmB,EAAE,CAAC,CAAC;AAC/C;;;;","names":[],"sources":["src/plugins/filter/filter.button.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { ColumnRegular } from '@type';\n\nexport const FILTER_BUTTON_CLASS = 'rv-filter';\nexport const FILTER_BUTTON_ACTIVE = 'active';\n\nexport const FILTER_PROP = 'hasFilter';\nexport const AND_OR_BUTTON = 'and-or-button';\nexport const TRASH_BUTTON = 'trash-button';\n\ntype Props = {\n  column: ColumnRegular;\n};\nexport const FilterButton = ({ column }: Props) => {\n  return (\n    <span>\n      <button\n        class={{\n          [FILTER_BUTTON_CLASS]: true,\n          [FILTER_BUTTON_ACTIVE]: column && !!column[FILTER_PROP],\n        }}\n      >\n        <svg class=\"filter-img\" viewBox=\"0 0 64 64\">\n          <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <path d=\"M43,48 L43,56 L21,56 L21,48 L43,48 Z M53,28 L53,36 L12,36 L12,28 L53,28 Z M64,8 L64,16 L0,16 L0,8 L64,8 Z\" fill=\"currentColor\"></path>\n          </g>\n        </svg>\n      </button>\n    </span>\n  );\n};\n\nexport const TrashButton = () => {\n  return (\n    <div class={{ [TRASH_BUTTON]: true }}>\n      <svg class=\"trash-img\" viewBox=\"0 0 24 24\">\n        <path fill=\"currentColor\" d=\"M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z\" />\n      </svg>\n    </div>\n  );\n};\nexport const AndOrButton = ({ text }: any) => {\n  return <button class={{ [AND_OR_BUTTON]: true, 'light revo-button': true }}>{text}</button>;\n};\n\nexport function isFilterBtn(e: HTMLElement) {\n  if (e.classList.contains(FILTER_BUTTON_CLASS)) {\n    return true;\n  }\n  return e?.closest(`.${FILTER_BUTTON_CLASS}`);\n}\n"],"version":3}

package/dist/revo-grid/grouping.row.renderer-95f32c6b.js

@@ -0,0 +1,65 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { h } from './index-f6fae858.js';
+import { y as DATA_ROW } from './dimension.helpers-5567e424.js';
+import { k as GROUP_EXPAND_BTN, P as PSEUDO_GROUP_ITEM, f as GROUP_EXPANDED, G as GROUP_DEPTH } from './column.service-f39c0a1d.js';
+
+const SortingSign = ({ column }) => {
+    var _a;
+    return h("i", { class: (_a = column === null || column === void 0 ? void 0 : column.order) !== null && _a !== void 0 ? _a : 'sort-off' });
+};
+
+const PADDING_DEPTH = 10;
+const RowRenderer = ({ rowClass, index, size, start, depth }, cells) => {
+    const props = Object.assign({ [DATA_ROW]: index });
+    return (h("div", Object.assign({}, props, { class: `rgRow ${rowClass || ''}`, style: {
+            height: `${size}px`,
+            transform: `translateY(${start}px)`,
+            paddingLeft: depth ? `${PADDING_DEPTH * depth}px` : undefined,
+        } }), cells));
+};
+
+function expandEvent(e, model, virtualIndex) {
+    var _a;
+    const event = new CustomEvent('groupexpandclick', {
+        detail: {
+            model,
+            virtualIndex,
+        },
+        cancelable: true,
+        bubbles: true,
+    });
+    (_a = e.target) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+}
+const GroupingRowRenderer = (props) => {
+    const { model, itemIndex, hasExpand, groupingCustomRenderer, providers } = props;
+    const name = model[PSEUDO_GROUP_ITEM];
+    const expanded = model[GROUP_EXPANDED];
+    const depth = parseInt(model[GROUP_DEPTH], 10) || 0;
+    if (!hasExpand) {
+        return h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }));
+    }
+    if (groupingCustomRenderer) {
+        return (h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
+            h("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(h, {
+                name,
+                model,
+                itemIndex,
+                expanded,
+                depth,
+                providers,
+            }))));
+    }
+    return (h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }),
+        h("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) }, expandSvgIconVNode(expanded)),
+        name));
+};
+const expandSvgIconVNode = (expanded = false) => {
+    return (h("svg", { "aria-hidden": "true", style: { transform: `rotate(${!expanded ? -90 : 0}deg)` }, focusable: "false", viewBox: "0 0 448 512" },
+        h("path", { fill: "currentColor", d: "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" })));
+};
+
+export { GroupingRowRenderer as G, PADDING_DEPTH as P, RowRenderer as R, SortingSign as S, expandSvgIconVNode as a, expandEvent as e };
+
+//# sourceMappingURL=grouping.row.renderer-95f32c6b.js.map

package/dist/revo-grid/grouping.row.renderer-95f32c6b.js.map

@@ -0,0 +1 @@
+{"file":"grouping.row.renderer-95f32c6b.js","mappings":";;;;;;;MAMa,WAAW,GAAG,CAAC,EAAE,MAAM,EAAS;;IAC3C,OAAO,SAAG,KAAK,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,mCAAI,UAAU,GAAI,CAAC;AACnD;;MCIa,aAAa,GAAG,GAAG;MAE1B,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAY,EAAE,KAAc;IACpF,MAAM,KAAK,iBACN,EAAE,CAAC,QAAQ,GAAG,KAAK,EAAE,CACzB,CAAC;IACF,QACE,2BACM,KAAK,IACT,KAAK,EAAE,SAAS,QAAQ,IAAI,EAAE,EAAE,EAChC,KAAK,EAAE;YACL,MAAM,EAAE,GAAG,IAAI,IAAI;YACnB,SAAS,EAAE,cAAc,KAAK,KAAK;YACnC,WAAW,EAAE,KAAK,GAAG,GAAG,aAAa,GAAG,KAAK,IAAI,GAAG,SAAS;SAC9D,KAEA,KAAK,CACF,EACN;AACJ;;SCZgB,WAAW,CAAC,CAAa,EAAE,KAAe,EAAE,YAAoB;;IAC9E,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;QAChD,MAAM,EAAE;YACN,KAAK;YACL,YAAY;SACb;QACD,UAAU,EAAE,IAAI;QAChB,OAAO,EAAE,IAAI;KACd,CAAiE,CAAC;IACnE,MAAA,CAAC,CAAC,MAAM,0CAAE,aAAa,CAAC,KAAK,CAAC,CAAC;AACjC,CAAC;MAEY,mBAAmB,GAAG,CAAC,KAAuB;IACzD,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,sBAAsB,EAAE,SAAS,EAAE,GACtE,KAAK,CAAC;IACR,MAAM,IAAI,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC;IACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC;IAEpD,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,EAAC,WAAW,oBAAK,KAAK,IAAE,QAAQ,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK,IAAI,CAAC;KACxE;IAED,IAAI,sBAAsB,EAAE;QAC1B,QACE,EAAC,WAAW,oBAAK,KAAK,IAAE,QAAQ,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK;YACzD,WAAK,OAAO,EAAE,CAAC,IAAI,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,IAChD,sBAAsB,CAAC,CAAC,EAAE;gBACzB,IAAI;gBACJ,KAAK;gBACL,SAAS;gBACT,QAAQ;gBACR,KAAK;gBACL,SAAS;aACV,CAAC,CACE,CACM,EACd;KACH;IAED,QACE,EAAC,WAAW,oBAAK,KAAK,IAAE,QAAQ,EAAC,aAAa,EAAC,KAAK,EAAE,KAAK;QACzD,cACE,KAAK,EAAE,EAAE,CAAC,gBAAgB,GAAG,IAAI,EAAE,EACnC,OAAO,EAAE,CAAC,IAAI,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,IAE7C,kBAAkB,CAAC,QAAQ,CAAC,CACtB;QACR,IAAI,CACO,EACd;AACJ,EAAE;MAEW,kBAAkB,GAAG,CAAC,QAAQ,GAAG,KAAK;IACjD,QACE,0BACc,MAAM,EAClB,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,QAAQ,GAAG,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,EACzD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,aAAa;QAErB,YACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,yRAAyR,GACrR,CACJ,EACN;AACJ;;;;","names":[],"sources":["src/plugins/sorting/sorting.sign.tsx","src/components/data/row-renderer.tsx","src/plugins/groupingRow/grouping.row.renderer.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { ColumnRegular } from '@type';\n\ntype Props = {\n  column: ColumnRegular;\n};\nexport const SortingSign = ({ column }: Props) => {\n  return <i class={column?.order ?? 'sort-off'} />;\n};\n","import { h, type VNode } from '@stencil/core';\nimport { JSXBase } from '@stencil/core/internal';\nimport { DATA_ROW } from '../../utils/consts';\n\nexport interface RowProps extends JSXBase.HTMLAttributes {\n  size: number;\n  start: number;\n  index: number;\n  rowClass?: string;\n  depth?: number;\n}\n\nexport const PADDING_DEPTH = 10;\n\nconst RowRenderer = ({ rowClass, index, size, start, depth }: RowProps, cells: VNode[]) => {\n  const props = {\n    ...{ [DATA_ROW]: index },\n  };\n  return (\n    <div\n      {...props}\n      class={`rgRow ${rowClass || ''}`}\n      style={{\n        height: `${size}px`,\n        transform: `translateY(${start}px)`,\n        paddingLeft: depth ? `${PADDING_DEPTH * depth}px` : undefined,\n      }}\n    >\n      {cells}\n    </div>\n  );\n};\n\nexport default RowRenderer;\n","import { h } from '@stencil/core';\nimport RowRenderer, { RowProps } from '../../components/data/row-renderer';\nimport {\n  GROUP_DEPTH,\n  GROUP_EXPANDED,\n  GROUP_EXPAND_BTN,\n  PSEUDO_GROUP_ITEM,\n} from './grouping.const';\nimport { GroupLabelTemplateFunc } from './grouping.row.types';\nimport { DataType, PositionItem, Providers } from '@type';\n\ninterface GroupRowPros extends RowProps {\n  model: DataType;\n  hasExpand: boolean;\n  providers: Providers;\n  groupingCustomRenderer?: GroupLabelTemplateFunc | null;\n}\nexport type RowGroupingProps = GroupRowPros & PositionItem;\n\nexport function expandEvent(e: MouseEvent, model: DataType, virtualIndex: number) {\n  const event = new CustomEvent('groupexpandclick', {\n    detail: {\n      model,\n      virtualIndex,\n    },\n    cancelable: true,\n    bubbles: true,\n  }) as CustomEvent<HTMLRevoGridElementEventMap['groupexpandclick']>;\n  e.target?.dispatchEvent(event);\n}\n\nexport const GroupingRowRenderer = (props: RowGroupingProps) => {\n  const { model, itemIndex, hasExpand, groupingCustomRenderer, providers } =\n    props;\n  const name = model[PSEUDO_GROUP_ITEM];\n  const expanded = model[GROUP_EXPANDED];\n  const depth = parseInt(model[GROUP_DEPTH], 10) || 0;\n\n  if (!hasExpand) {\n    return <RowRenderer {...props} rowClass=\"groupingRow\" depth={depth} />;\n  }\n\n  if (groupingCustomRenderer) {\n    return (\n      <RowRenderer {...props} rowClass=\"groupingRow\" depth={depth}>\n        <div onClick={e => expandEvent(e, model, itemIndex)}>\n          {groupingCustomRenderer(h, {\n            name,\n            model,\n            itemIndex,\n            expanded,\n            depth,\n            providers,\n          })}\n        </div>\n      </RowRenderer>\n    );\n  }\n\n  return (\n    <RowRenderer {...props} rowClass=\"groupingRow\" depth={depth}>\n      <button\n        class={{ [GROUP_EXPAND_BTN]: true }}\n        onClick={e => expandEvent(e, model, itemIndex)}\n      >\n        {expandSvgIconVNode(expanded)}\n      </button>\n      {name}\n    </RowRenderer>\n  );\n};\n\nexport const expandSvgIconVNode = (expanded = false) => {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      style={{ transform: `rotate(${!expanded ? -90 : 0}deg)` }}\n      focusable=\"false\"\n      viewBox=\"0 0 448 512\"\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\"\n      ></path>\n    </svg>\n  );\n};\n\nexport default GroupingRowRenderer;\n"],"version":3}

package/dist/revo-grid/header-cell-renderer-31f53644.js

@@ -1,5 +1,339 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import{h as t}from"./index-f6fae858.js";import{J as i}from"./column.service-f39c0a1d.js";function s(t,i,s){const e=new CustomEvent(i,{detail:s,cancelable:true,bubbles:true});t===null||t===void 0?void 0:t.dispatchEvent(e);return e}function e(t,i,e){t.preventDefault();return s(t.target,i,e)}var h;(function(t){t["start"]="resize:start";t["move"]="resize:move";t["end"]="resize:end"})(h||(h={}));const o={"resizable-r":{bit:1,cursor:"ew-resize"},"resizable-rb":{bit:3,cursor:"se-resize"},"resizable-b":{bit:2,cursor:"s-resize"},"resizable-lb":{bit:6,cursor:"sw-resize"},"resizable-l":{bit:4,cursor:"w-resize"},"resizable-lt":{bit:12,cursor:"nw-resize"},"resizable-t":{bit:8,cursor:"n-resize"},"resizable-rt":{bit:9,cursor:"ne-resize"}};const n={l:1,t:2,w:4,h:8};const l=t=>Object.assign(Object.assign({},t),{fitParent:t.fitParent||false,active:t.active||[],disableAttributes:t.disableAttributes||[],minWidth:t.minWidth||0,minHeight:t.minHeight||0});class r{constructor(t,i){var s,e;this.initialProps=t;this.$event=i;this.mouseX=0;this.mouseY=0;this.width=0;this.height=0;this.changeX=0;this.changeY=0;this.disableCalcMap=15;this.props=l(t);this.mouseMoveFunc=this.handleMove.bind(this);this.mouseUpFunc=this.handleUp.bind(this);this.minW=this.props.minWidth;this.minH=this.props.minHeight;this.maxW=(s=this.props.maxWidth)!==null&&s!==void 0?s:0;this.maxH=(e=this.props.maxHeight)!==null&&e!==void 0?e:0;this.parent={width:0,height:0};this.resizeState=0}set(t){this.$el=t;this.props.disableAttributes.forEach((t=>{switch(t){case"l":this.disableCalcMap&=~n.l;break;case"t":this.disableCalcMap&=~n.t;break;case"w":this.disableCalcMap&=~n.w;break;case"h":this.disableCalcMap&=~n.h}}))}emitEvent(t,i){var s;if(!this.$event){return}const e=(s=this.activeResizer)===null||s===void 0?void 0:s.classList.contains("resizable-l");this.$event(Object.assign({eventName:t,width:this.width+this.changeX*(e?-1:1),height:this.height+this.changeY,changedX:this.changeX,changedY:this.changeY},i))}static isTouchEvent(t){var i;const s=t;return((i=s.touches)===null||i===void 0?void 0:i.length)>=0}handleMove(t){var i;if(!this.resizeState){return}let s,e;if(r.isTouchEvent(t)){s=t.touches[0].clientY;e=t.touches[0].clientX}else{s=t.clientY;e=t.clientX}let l=this.resizeState&o["resizable-r"].bit||this.resizeState&o["resizable-l"].bit;let c=this.resizeState&o["resizable-t"].bit||this.resizeState&o["resizable-b"].bit;if(c&&this.disableCalcMap&n.h){let t=s-this.mouseY;let i=this.changeY+t;const e=this.height+i;if(e<this.minH){i=-(this.height-this.minH)}if(this.maxH&&e>this.maxH){i=this.maxH-this.height}this.changeY=i;this.mouseY=s;if(this.activeResizer){this.activeResizer.style.bottom=`${-this.changeY}px`}}if(l&&this.disableCalcMap&n.w){const t=(i=this.activeResizer)===null||i===void 0?void 0:i.classList.contains("resizable-l");let s=e-this.mouseX;let h=this.changeX+s;const o=this.width+h*(t?-1:1);if(o<this.minW){h=-(this.width-this.minW)}if(this.maxW&&o>this.maxW){h=this.maxW-this.width}this.changeX=h;this.mouseX=e;if(this.activeResizer){if(!t){this.activeResizer.style.right=`${-this.changeX}px`}else{this.activeResizer.style.left=`${this.changeX}px`}}}this.emitEvent(h.move)}handleDown(t){if(t.defaultPrevented){return}t.preventDefault();this.dropInitial();for(let i in o){const s=t.target;if(this.$el.contains(s)&&(s===null||s===void 0?void 0:s.classList.contains(i))){document.body.style.cursor=o[i].cursor;if(r.isTouchEvent(t)){this.setInitials(t.touches[0],s)}else{t.preventDefault&&t.preventDefault();this.setInitials(t,s)}this.resizeState=o[i].bit;const e=h.start;this.emitEvent(e);break}}this.bindMove()}handleUp(t){t.preventDefault();if(this.resizeState!==0){this.resizeState=0;document.body.style.cursor="";const t=h.end;this.emitEvent(t)}this.dropInitial();this.unbindMove()}setInitials({clientX:t,clientY:i},s){var e,h,o,l;const r=getComputedStyle(this.$el);this.$el.classList.add("active");this.activeResizer=s;if(this.disableCalcMap&n.w){this.mouseX=t;this.width=this.$el.clientWidth;this.parent.width=(h=(e=this.$el.parentElement)===null||e===void 0?void 0:e.clientWidth)!==null&&h!==void 0?h:0;const i=parseFloat(r.paddingLeft)+parseFloat(r.paddingRight);this.minW=Math.max(i,this.initialProps.minWidth||0);if(this.initialProps.maxWidth){this.maxW=Math.max(this.width,this.initialProps.maxWidth)}}if(this.disableCalcMap&n.h){this.mouseY=i;this.height=this.$el.clientHeight;this.parent.height=(l=(o=this.$el.parentElement)===null||o===void 0?void 0:o.clientHeight)!==null&&l!==void 0?l:0;const t=parseFloat(r.paddingTop)+parseFloat(r.paddingBottom);this.minH=Math.max(t,this.initialProps.minHeight||0);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)}}const c=(i,s)=>{const e=[];const o=i.canResize&&new r(i,(t=>{var s;if(t.eventName===h.end){(s=i.onResize)===null||s===void 0?void 0:s.call(i,t)}}))||null;if(i.active){if(i.canResize){for(let s in i.active){e.push(t("div",{onClick:t=>t.preventDefault(),onDblClick:t=>{var s;t.preventDefault();(s=i.onDblClick)===null||s===void 0?void 0:s.call(i,t)},onMouseDown:t=>o===null||o===void 0?void 0:o.handleDown(t),onTouchStart:t=>o===null||o===void 0?void 0:o.handleDown(t),class:`resizable resizable-${i.active[s]}`}))}}else{for(let s in i.active){e.push(t("div",{onClick:t=>t.preventDefault(),onTouchStart:t=>t.preventDefault(),onDblClick:t=>{var s;t.preventDefault();(s=i.onDblClick)===null||s===void 0?void 0:s.call(i,t)},class:`no-resize resizable resizable-${i.active[s]}`}))}}}return t("div",Object.assign({},i,{ref:t=>t&&(o===null||o===void 0?void 0:o.set(t))}),s,e)};const u="columnclick";const a=({data:e,props:h,additionalData:o},n)=>{let l=(e===null||e===void 0?void 0:e.name)||"";let r=h;if(e===null||e===void 0?void 0:e.columnTemplate){l=e.columnTemplate(t,e,o)}if(e===null||e===void 0?void 0:e.columnProperties){const t=e.columnProperties(e);if(t){r=i(h,t)}}const a=Object.assign(Object.assign({},r),{onMouseDown(t){s(t.currentTarget,u,{data:e,event:t})}});return t(c,Object.assign({},a),t("div",{class:"header-content"},l),n)};export{a as H,u as O,e as a,s as d};
+import { h } from './index-f6fae858.js';
+import { J as doPropMerge } from './column.service-f39c0a1d.js';
+
+/**
+ * Dispatches a custom event to a specified target element.
+ *
+ * @param target - The target element to dispatch the event to.
+ * @param eventName - The name of the custom event.
+ * @param detail - Optional. The detail of the custom event.
+ * @returns The custom event that was dispatched.
+ */
+function dispatch(target, eventName, detail) {
+    // Create a new CustomEvent with the specified event name and detail.
+    const event = new CustomEvent(eventName, {
+        detail,
+        cancelable: true, // Indicates whether the event can be canceled.
+        bubbles: true, // Indicates whether the event bubbles up through the DOM.
+    });
+    // Dispatch the event on the target element.
+    target === null || target === void 0 ? void 0 : target.dispatchEvent(event);
+    // Return the custom event that was dispatched.
+    return event;
+}
+/**
+ * Dispatches a custom event based on an existing event object and prevents the default behavior of the original event.
+ *
+ * @param e - The original event object containing the target and preventDefault method.
+ * @param eventName - The name of the custom event.
+ * @param detail - Optional. The detail of the custom event.
+ * @returns The custom event that was dispatched.
+ */
+function dispatchByEvent(e, // The original event object containing the target and preventDefault method.
+eventName, // The name of the custom event.
+detail) {
+    // Prevent the default behavior of the original event.
+    e.preventDefault();
+    // Dispatch the custom event to the target element specified in the original event object.
+    return dispatch(e.target, eventName, detail);
+}
+
+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 });
+};
+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);
+    }
+}
+
+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 resizable resizable-${props.active[p]}` }));
+            }
+        }
+    }
+    return (h("div", Object.assign({}, props, { ref: e => e && (directive === null || directive === void 0 ? void 0 : directive.set(e)) }),
+        children,
+        resizeEls));
+};
+
+const ON_COLUMN_CLICK = 'columnclick';
+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),
+        h("div", { class: "header-content" }, colTemplate),
+        children));
+};
+
+export { HeaderCellRenderer as H, ON_COLUMN_CLICK as O, dispatchByEvent as a, dispatch as d };
+
 //# sourceMappingURL=header-cell-renderer-31f53644.js.map