@revolist/revogrid 4.0.2-next → 4.0.2

package/dist/collection/services/resizable.directive.js

@@ -1,250 +1,235 @@
-import { h } from '@stencil/core';
-var ResizeEvents;
+/*!
+ * Built by Revolist OU ❤️
+ */
+export var ResizeEvents;
 (function (ResizeEvents) {
-  ResizeEvents["start"] = "resize:start";
-  ResizeEvents["move"] = "resize:move";
-  ResizeEvents["end"] = "resize:end";
+    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' },
+    '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,
+    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 });
+    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) {
-    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 = this.props.maxWidth;
-    this.maxH = this.props.maxHeight;
-    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) {
-    if (!this.$event) {
-      return;
+    constructor(initialProps, $event) {
+        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 = this.props.maxWidth;
+        this.maxH = this.props.maxHeight;
+        this.parent = { width: 0, height: 0 };
+        this.resizeState = 0;
     }
-    this.$event(Object.assign({ eventName, width: this.width + this.changeX, 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) {
-    if (!this.resizeState) {
-      return;
+    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;
+            }
+        });
     }
-    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) {
-      let diffX = eventX - this.mouseX;
-      let changedX = this.changeX + diffX;
-      const newWidth = this.width + changedX;
-      // 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) {
-        this.activeResizer.style.right = `${-this.changeX}px`;
-      }
+    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));
     }
-    this.emitEvent(ResizeEvents.move);
-  }
-  handleDown(event) {
-    if (event.defaultPrevented) {
-      return;
+    static isTouchEvent(e) {
+        var _a;
+        const event = e;
+        return ((_a = event.touches) === null || _a === void 0 ? void 0 : _a.length) >= 0;
     }
-    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;
+    handleMove(event) {
+        var _a;
+        if (!this.resizeState) {
+            return;
+        }
+        let eventY, eventX;
         if (ResizeDirective.isTouchEvent(event)) {
-          this.setInitials(event.touches[0], target);
+            eventY = event.touches[0].clientY;
+            eventX = event.touches[0].clientX;
         }
         else {
-          event.preventDefault && event.preventDefault();
-          this.setInitials(event, target);
+            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`;
+            }
         }
-        this.resizeState = RESIZE_MASK[elClass].bit;
-        const eventName = ResizeEvents.start;
-        this.emitEvent(eventName);
-        break;
-      }
+        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);
     }
-    this.bindMove();
-  }
-  handleUp(e) {
-    e.preventDefault();
-    if (this.resizeState !== 0) {
-      this.resizeState = 0;
-      document.body.style.cursor = '';
-      const eventName = ResizeEvents.end;
-      this.emitEvent(eventName);
+    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();
     }
-    this.dropInitial();
-    this.unbindMove();
-  }
-  setInitials({ clientX, clientY }, target) {
-    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 = this.$el.parentElement.clientWidth;
-      // 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);
-      }
+    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();
     }
-    if (this.disableCalcMap & DISABLE_MASK.h) {
-      this.mouseY = clientY;
-      this.height = this.$el.clientHeight;
-      this.parent.height = this.$el.parentElement.clientHeight;
-      // 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);
-      }
+    setInitials({ clientX, clientY }, target) {
+        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 = this.$el.parentElement.clientWidth;
+            // 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 = this.$el.parentElement.clientHeight;
+            // 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');
+    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 = null;
     }
-    this.$el.classList.remove('active');
-    this.activeResizer = null;
-  }
-  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);
-  }
-}
-export const ResizableElement = (props, children) => {
-  const resizeEls = [];
-  const directive = (props.canResize &&
-    new ResizeDirective(props, e => {
-      if (e.eventName === ResizeEvents.end) {
-        props.onResize && props.onResize(e);
-      }
-    })) ||
-    null;
-  if (props.canResize) {
-    if (props.active) {
-      for (let p in props.active) {
-        resizeEls.push(h("div", { onClick: e => e.preventDefault(), onDblClick: e => {
-            e.preventDefault();
-            props.onDoubleClick && props.onDoubleClick();
-          }, 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]}` }));
-      }
+    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);
     }
-  }
-  else {
-    if (props.active) {
-      for (let p in props.active) {
-        resizeEls.push(h("div", { onClick: e => e.preventDefault(), onDblClick: e => {
-            e.preventDefault();
-            props.onDoubleClick && props.onDoubleClick();
-          }, class: `no-resize resizable resizable-${props.active[p]}` }));
-      }
+    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);
     }
-  }
-  return (h("div", Object.assign({}, props, { ref: (e) => directive === null || directive === void 0 ? void 0 : directive.set(e) }),
-    children,
-    resizeEls));
-};
+}
+//# sourceMappingURL=resizable.directive.js.map

package/dist/collection/services/resizable.directive.js.map

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

package/dist/collection/services/resizable.element.js

@@ -0,0 +1,39 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+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 => {
+            if (e.eventName === ResizeEvents.end) {
+                props.onResize && props.onResize(e);
+            }
+        })) ||
+        null;
+    if (props.canResize) {
+        if (props.active) {
+            for (let p in props.active) {
+                resizeEls.push(h("div", { onClick: e => e.preventDefault(), onDblClick: e => {
+                        var _a;
+                        e.preventDefault();
+                        (_a = props.onDoubleClick) === 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 {
+        if (props.active) {
+            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.onDoubleClick) === 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) => directive === null || directive === void 0 ? void 0 : directive.set(e) }), children, resizeEls));
+};
+//# sourceMappingURL=resizable.element.js.map

package/dist/collection/services/resizable.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.element.js","sourceRoot":"","sources":["../../src/services/resizable.element.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAS,MAAM,eAAe,CAAC;AACzC,OAAO,EAAe,eAAe,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGnF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAAuC,EAAE,QAAiB,EAAE,EAAE;IAC7F,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,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;YACtC,CAAC;QACH,CAAC,CAAC,CAAC;QACL,IAAI,CAAC;IACP,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;QACpB,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,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,aAAa,sDAAG,CAAC,CAAC,CAAC;oBAC3B,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;IACH,CAAC;SAAM,CAAC;QACN,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACjB,KAAK,IAAI,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC3B,SAAS,CAAC,IAAI,CACZ,WACE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAChC,YAAY,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACnD,UAAU,EAAE,CAAC,CAAC,EAAE;;wBACd,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,MAAA,KAAK,CAAC,aAAa,sDAAG,CAAC,CAAC,CAAC;oBAC3B,CAAC,EACD,KAAK,EAAE,iCAAiC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GACzD,CACH,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IACD,OAAO,CACL,2BAAS,KAAK,IAAE,GAAG,EAAE,CAAC,CAAc,EAAE,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAC,CAAC,CAAC;QACvD,QAAQ;QACR,SAAS,CACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, VNode } from '@stencil/core';\nimport { ResizeProps, ResizeDirective, ResizeEvents } from './resizable.directive';\nimport { CellProps } from '../types/interfaces';\n\nexport const ResizableElement = (props: Partial<ResizeProps> & CellProps, children: VNode[]) => {\n  const resizeEls: VNode[] = [];\n  const directive =\n    (props.canResize &&\n      new ResizeDirective(props, e => {\n        if (e.eventName === ResizeEvents.end) {\n          props.onResize && props.onResize(e);\n        }\n      })) ||\n    null;\n  if (props.canResize) {\n    if (props.active) {\n      for (let p in props.active) {\n        resizeEls.push(\n          <div\n            onClick={e => e.preventDefault()}\n            onDblClick={e => {\n              e.preventDefault();\n              props.onDoubleClick?.(e);\n            }}\n            onMouseDown={(e: MouseEvent) => directive?.handleDown(e)}\n            onTouchStart={(e: TouchEvent) => directive?.handleDown(e)}\n            class={`resizable resizable-${props.active[p]}`}\n          />,\n        );\n      }\n    }\n  } else {\n    if (props.active) {\n      for (let p in props.active) {\n        resizeEls.push(\n          <div\n            onClick={e => e.preventDefault()}\n            onTouchStart={(e: TouchEvent) => e.preventDefault()}\n            onDblClick={e => {\n              e.preventDefault();\n              props.onDoubleClick?.(e);\n            }}\n            class={`no-resize resizable resizable-${props.active[p]}`}\n          />,\n        );\n      }\n    }\n  }\n  return (\n    <div {...props} ref={(e: HTMLElement) => directive?.set(e)}>\n      {children}\n      {resizeEls}\n    </div>\n  );\n};\n"]}