From 148eaacc7470fbacead16fdecae15a4db2fd7f82 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 21 Jul 2024 14:51:13 -0700 Subject: [PATCH] web v10.3.1 --- demo/drag-and-drop-dataTransfer-angular.ts | 62 --------------- demo/drag-and-drop-dataTransfer.html | 75 ------------------- .../gridstack/dist/es5/gridstack-all.js | 2 +- .../gridstack/dist/es5/gridstack-all.js.map | 2 +- .../gridstack/dist/es5/gridstack-poly.js | 2 +- node_modules/gridstack/dist/gridstack-all.js | 2 +- .../gridstack/dist/gridstack-all.js.map | 2 +- node_modules/gridstack/dist/gridstack.css | 2 +- package.json | 2 +- yarn.lock | 8 +- 10 files changed, 11 insertions(+), 148 deletions(-) delete mode 100644 demo/drag-and-drop-dataTransfer-angular.ts delete mode 100644 demo/drag-and-drop-dataTransfer.html diff --git a/demo/drag-and-drop-dataTransfer-angular.ts b/demo/drag-and-drop-dataTransfer-angular.ts deleted file mode 100644 index 6f6ea9b5c..000000000 --- a/demo/drag-and-drop-dataTransfer-angular.ts +++ /dev/null @@ -1,62 +0,0 @@ -/** - * Simple Angular Example using GridStack API with event.dataTransfer - */ - import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; - import { GridStack, GridStackWidget, GridStackNode } from 'gridstack'; - import { DDElement } from "gridstack/dist/h5/dd-element"; - - @Component({ - selector: 'grid-stack-test', - template: ` -
-
Drag Me
-
-
-
- `, - }) - export class GridStackTestComponent implements OnInit { - - @ViewChild('dragElement') public dragElement: ElementRef; - - private sampleElement = `
Sample Element
`; - private items: GridStackWidget[] = [ - { x: 0, y: 0, w: 9, h: 1, content: this.sampleElement }, - { x: 9, y: 0, w: 3, h: 2, content: this.sampleElement } - ]; - private grid: GridStack; - - constructor() { } - public ngOnInit() { - - const _ddElement = DDElement.init(this.dragElement.nativeElement); - _ddElement.setupDraggable({ - handle: '.sample-drag', - appendTo: 'body', - helper: 'clone', - start: (event: DragEvent) => { - if (event.dataTransfer) { - event.dataTransfer.setData('message', 'Hello World'); - } - }, - }); - - this.grid = GridStack.init({ - removable: true, - acceptWidgets: (el) => { - return true; - } - }); - - this.grid.on('dropped', this.gridStackDropped.bind(this)); - this.grid.load(this.items); // and load our content directly (will create DOM) - } - - gridStackDropped(event: Event, previousWidget: GridStackNode, newWidget: GridStackNode): void { - const dragEvent = event as DragEvent; - if (dragEvent.dataTransfer) { - console.log('gridstack dropped: ', dragEvent.dataTransfer.getData('message')); - } - } - } - \ No newline at end of file diff --git a/demo/drag-and-drop-dataTransfer.html b/demo/drag-and-drop-dataTransfer.html deleted file mode 100644 index 8cc223f29..000000000 --- a/demo/drag-and-drop-dataTransfer.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - Event DataTransfer Demo - - - - - - - - - -
-

Event DataTransfer Demo

- -
-
-
-
-
Drag me
-
-
-
-
-
-
-
-
- - - - \ No newline at end of file diff --git a/node_modules/gridstack/dist/es5/gridstack-all.js b/node_modules/gridstack/dist/es5/gridstack-all.js index bc2e5ddd1..59bc3e3d7 100644 --- a/node_modules/gridstack/dist/es5/gridstack-all.js +++ b/node_modules/gridstack/dist/es5/gridstack-all.js @@ -1,3 +1,3 @@ /*! For license information please see gridstack-all.js.LICENSE.txt */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.GridStack=e():t.GridStack=e()}(self,(function(){return function(){"use strict";var t={74:function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.DDBaseImplement=void 0;var i=function(){function t(){this._eventRegister={}}return Object.defineProperty(t.prototype,"disabled",{get:function(){return this._disabled},enumerable:!1,configurable:!0}),t.prototype.on=function(t,e){this._eventRegister[t]=e},t.prototype.off=function(t){delete this._eventRegister[t]},t.prototype.enable=function(){this._disabled=!1},t.prototype.disable=function(){this._disabled=!0},t.prototype.destroy=function(){delete this._eventRegister},t.prototype.triggerEvent=function(t,e){if(!this.disabled&&this._eventRegister&&this._eventRegister[t])return this._eventRegister[t](e)},t}();e.DDBaseImplement=i},366:function(t,e,i){var o,n=this&&this.__extends||(o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},o(t,e)},function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,i=1,o=arguments.length;i3){this.dragging=!0,s.DDManager.dragElement=this;var r=null===(e=this.el.gridstackNode)||void 0===e?void 0:e.grid;r?s.DDManager.dropElement=r.el.ddElement.ddDroppable:delete s.DDManager.dropElement,this.helper=this._createHelper(t),this._setupHelperContainmentStyle(),this.dragTransform=a.Utils.getValuesFromTransformedElement(this.helperContainment),this.dragOffset=this._getDragOffset(t,this.el,this.helperContainment),this._setupHelperStyle(t);var l=a.Utils.initEvent(t,{target:this.el,type:"dragstart"});this.option.start&&this.option.start(l,this.ui()),this.triggerEvent("dragstart",l),document.addEventListener("keydown",this._keyEvent)}return!0},e.prototype._mouseUp=function(t){var e,i;if(document.removeEventListener("mousemove",this._mouseMove,!0),document.removeEventListener("mouseup",this._mouseUp,!0),d.isTouch&&(t.target.removeEventListener("touchmove",d.touchmove,!0),t.target.removeEventListener("touchend",d.touchend,!0)),this.dragging){delete this.dragging,null===(e=this.el.gridstackNode)||void 0===e||delete e._origRotate,document.removeEventListener("keydown",this._keyEvent),(null===(i=s.DDManager.dropElement)||void 0===i?void 0:i.el)===this.el.parentElement&&delete s.DDManager.dropElement,this.helperContainment.style.position=this.parentOriginStylePosition||null,this.helper===this.el?this._removeHelperStyle():this.helper.remove();var o=a.Utils.initEvent(t,{target:this.el,type:"dragstop"});this.option.stop&&this.option.stop(o),this.triggerEvent("dragstop",o),s.DDManager.dropElement&&s.DDManager.dropElement.drop(t)}delete this.helper,delete this.mouseDownEvent,delete s.DDManager.dragElement,delete s.DDManager.dropElement,delete s.DDManager.mouseHandled,t.preventDefault()},e.prototype._keyEvent=function(t){var e=this.el.gridstackNode;if(null==e?void 0:e.grid){var i=e.grid;if("Escape"===t.key)e._origRotate&&(e._orig=e._origRotate,delete e._origRotate),i.engine.restoreInitial(),this._mouseUp(this.mouseDownEvent);else if("r"===t.key||"R"===t.key){if(!a.Utils.canBeRotated(e))return;e._origRotate=e._origRotate||r({},e._orig),delete e._moving,i.setAnimation(!1).rotate(e.el,{top:-this.dragOffset.offsetTop,left:-this.dragOffset.offsetLeft}).setAnimation(),e._moving=!0,this.dragOffset=this._getDragOffset(this.lastDrag,e.el,this.helperContainment),this.helper.style.width=this.dragOffset.width+"px",this.helper.style.height=this.dragOffset.height+"px",a.Utils.swap(e._orig,"w","h"),delete e._rect,this._mouseMove(this.lastDrag)}}},e.prototype._createHelper=function(t){var i=this,o=this.el;return"function"==typeof this.option.helper?o=this.option.helper(t):"clone"===this.option.helper&&(o=a.Utils.cloneNode(this.el)),document.body.contains(o)||a.Utils.appendTo(o,"parent"===this.option.appendTo?this.el.parentElement:this.option.appendTo),o===this.el&&(this.dragElementOriginStyle=e.originStyleProp.map((function(t){return i.el.style[t]}))),o},e.prototype._setupHelperStyle=function(t){var e=this;this.helper.classList.add("ui-draggable-dragging");var i=this.helper.style;return i.pointerEvents="none",i.width=this.dragOffset.width+"px",i.height=this.dragOffset.height+"px",i.willChange="left, top",i.position="fixed",this._dragFollow(t),i.transition="none",setTimeout((function(){e.helper&&(i.transition=null)}),0),this},e.prototype._removeHelperStyle=function(){var t,i=this;this.helper.classList.remove("ui-draggable-dragging");var o=null===(t=this.helper)||void 0===t?void 0:t.gridstackNode;if(!(null==o?void 0:o._isAboutToRemove)&&this.dragElementOriginStyle){var n=this.helper,r=this.dragElementOriginStyle.transition||null;n.style.transition=this.dragElementOriginStyle.transition="none",e.originStyleProp.forEach((function(t){return n.style[t]=i.dragElementOriginStyle[t]||null})),setTimeout((function(){return n.style.transition=r}),50)}return delete this.dragElementOriginStyle,this},e.prototype._dragFollow=function(t){var e=this.helper.style,i=this.dragOffset;e.left=(t.clientX+i.offsetLeft-0)*this.dragTransform.xScale+"px",e.top=(t.clientY+i.offsetTop-0)*this.dragTransform.yScale+"px"},e.prototype._setupHelperContainmentStyle=function(){return this.helperContainment=this.helper.parentElement,"fixed"!==this.helper.style.position&&(this.parentOriginStylePosition=this.helperContainment.style.position,getComputedStyle(this.helperContainment).position.match(/static/)&&(this.helperContainment.style.position="relative")),this},e.prototype._getDragOffset=function(t,e,i){var o=0,n=0;i&&(o=this.dragTransform.xOffset,n=this.dragTransform.yOffset);var r=e.getBoundingClientRect();return{left:r.left,top:r.top,offsetLeft:-t.clientX+r.left-o,offsetTop:-t.clientY+r.top-n,width:r.width*this.dragTransform.xScale,height:r.height*this.dragTransform.yScale}},e.prototype.ui=function(){var t=this.el.parentElement.getBoundingClientRect(),e=this.helper.getBoundingClientRect();return{position:{top:(e.top-t.top)*this.dragTransform.yScale,left:(e.left-t.left)*this.dragTransform.xScale}}},e.originStyleProp=["transition","pointerEvents","position","left","top","minWidth","willChange"],e}(l.DDBaseImplement)},677:function(t,e,i){var o,n=this&&this.__extends||(o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},o(t,e)},function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,i=1,o=arguments.length;i-1?this.ddDraggable.on(t,e):this.ddDroppable&&["drop","dropover","dropout"].indexOf(t)>-1?this.ddDroppable.on(t,e):this.ddResizable&&["resizestart","resize","resizestop"].indexOf(t)>-1&&this.ddResizable.on(t,e),this},t.prototype.off=function(t){return this.ddDraggable&&["drag","dragstart","dragstop"].indexOf(t)>-1?this.ddDraggable.off(t):this.ddDroppable&&["drop","dropover","dropout"].indexOf(t)>-1?this.ddDroppable.off(t):this.ddResizable&&["resizestart","resize","resizestop"].indexOf(t)>-1&&this.ddResizable.off(t),this},t.prototype.setupDraggable=function(t){return this.ddDraggable?this.ddDraggable.updateOption(t):this.ddDraggable=new n.DDDraggable(this.el,t),this},t.prototype.cleanDraggable=function(){return this.ddDraggable&&(this.ddDraggable.destroy(),delete this.ddDraggable),this},t.prototype.setupResizable=function(t){return this.ddResizable?this.ddResizable.updateOption(t):this.ddResizable=new o.DDResizable(this.el,t),this},t.prototype.cleanResizable=function(){return this.ddResizable&&(this.ddResizable.destroy(),delete this.ddResizable),this},t.prototype.setupDroppable=function(t){return this.ddDroppable?this.ddDroppable.updateOption(t):this.ddDroppable=new r.DDDroppable(this.el,t),this},t.prototype.cleanDroppable=function(){return this.ddDroppable&&(this.ddDroppable.destroy(),delete this.ddDroppable),this},t}();e.DDElement=s},502:function(t,e,i){var o=this&&this.__assign||function(){return o=Object.assign||function(t){for(var e,i=1,o=arguments.length;i2&&(this.moving=!0,this._triggerEvent("start",this.mouseDownEvent),this._triggerEvent("move",t),document.addEventListener("keydown",this._keyEvent)),t.stopPropagation()},t.prototype._mouseUp=function(t){this.moving&&(this._triggerEvent("stop",t),document.removeEventListener("keydown",this._keyEvent)),document.removeEventListener("mousemove",this._mouseMove,!0),document.removeEventListener("mouseup",this._mouseUp,!0),o.isTouch&&(this.el.removeEventListener("touchmove",o.touchmove),this.el.removeEventListener("touchend",o.touchend)),delete this.moving,delete this.mouseDownEvent,t.stopPropagation(),t.preventDefault()},t.prototype._keyEvent=function(t){var e,i;"Escape"===t.key&&(null===(i=null===(e=this.host.gridstackNode)||void 0===e?void 0:e.grid)||void 0===i||i.engine.restoreInitial(),this._mouseUp(this.mouseDownEvent))},t.prototype._triggerEvent=function(t,e){return this.option[t]&&this.option[t](e),this},t.prefix="ui-resizable-",t}()},904:function(t,e,i){var o,n=this&&this.__extends||(o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},o(t,e)},function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)});Object.defineProperty(e,"__esModule",{value:!0}),e.DDResizable=void 0;var r=i(664),s=i(74),a=i(867),l=i(839);e.DDResizable=function(t){function e(e,i){void 0===i&&(i={});var o=t.call(this)||this;return o.el=e,o.option=i,o.rectScale={x:1,y:1},o._ui=function(){var t=o.el.parentElement.getBoundingClientRect(),e={width:o.originalRect.width,height:o.originalRect.height+o.scrolled,left:o.originalRect.left,top:o.originalRect.top-o.scrolled},i=o.temporalRect||e;return{position:{left:(i.left-t.left)*o.rectScale.x,top:(i.top-t.top)*o.rectScale.y},size:{width:i.width*o.rectScale.x,height:i.height*o.rectScale.y}}},o._mouseOver=o._mouseOver.bind(o),o._mouseOut=o._mouseOut.bind(o),o.enable(),o._setupAutoHide(o.option.autoHide),o._setupHandlers(),o}return n(e,t),e.prototype.on=function(e,i){t.prototype.on.call(this,e,i)},e.prototype.off=function(e){t.prototype.off.call(this,e)},e.prototype.enable=function(){t.prototype.enable.call(this),this.el.classList.remove("ui-resizable-disabled"),this._setupAutoHide(this.option.autoHide)},e.prototype.disable=function(){t.prototype.disable.call(this),this.el.classList.add("ui-resizable-disabled"),this._setupAutoHide(!1)},e.prototype.destroy=function(){this._removeHandlers(),this._setupAutoHide(!1),delete this.el,t.prototype.destroy.call(this)},e.prototype.updateOption=function(t){var e=this,i=t.handles&&t.handles!==this.option.handles,o=t.autoHide&&t.autoHide!==this.option.autoHide;return Object.keys(t).forEach((function(i){return e.option[i]=t[i]})),i&&(this._removeHandlers(),this._setupHandlers()),o&&this._setupAutoHide(this.option.autoHide),this},e.prototype._setupAutoHide=function(t){return t?(this.el.classList.add("ui-resizable-autohide"),this.el.addEventListener("mouseover",this._mouseOver),this.el.addEventListener("mouseout",this._mouseOut)):(this.el.classList.remove("ui-resizable-autohide"),this.el.removeEventListener("mouseover",this._mouseOver),this.el.removeEventListener("mouseout",this._mouseOut),l.DDManager.overResizeElement===this&&delete l.DDManager.overResizeElement),this},e.prototype._mouseOver=function(t){l.DDManager.overResizeElement||l.DDManager.dragElement||(l.DDManager.overResizeElement=this,this.el.classList.remove("ui-resizable-autohide"))},e.prototype._mouseOut=function(t){l.DDManager.overResizeElement===this&&(delete l.DDManager.overResizeElement,this.el.classList.add("ui-resizable-autohide"))},e.prototype._setupHandlers=function(){var t=this;return this.handlers=this.option.handles.split(",").map((function(t){return t.trim()})).map((function(e){return new r.DDResizableHandle(t.el,e,{start:function(e){t._resizeStart(e)},stop:function(e){t._resizeStop(e)},move:function(i){t._resizing(i,e)}})})),this},e.prototype._resizeStart=function(t){this.sizeToContent=a.Utils.shouldSizeToContent(this.el.gridstackNode,!0),this.originalRect=this.el.getBoundingClientRect(),this.scrollEl=a.Utils.getScrollElement(this.el),this.scrollY=this.scrollEl.scrollTop,this.scrolled=0,this.startEvent=t,this._setupHelper(),this._applyChange();var e=a.Utils.initEvent(t,{type:"resizestart",target:this.el});return this.option.start&&this.option.start(e,this._ui()),this.el.classList.add("ui-resizable-resizing"),this.triggerEvent("resizestart",e),this},e.prototype._resizing=function(t,e){this.scrolled=this.scrollEl.scrollTop-this.scrollY,this.temporalRect=this._getChange(t,e),this._applyChange();var i=a.Utils.initEvent(t,{type:"resize",target:this.el});return this.option.resize&&this.option.resize(i,this._ui()),this.triggerEvent("resize",i),this},e.prototype._resizeStop=function(t){var e=a.Utils.initEvent(t,{type:"resizestop",target:this.el});return this.option.stop&&this.option.stop(e),this.el.classList.remove("ui-resizable-resizing"),this.triggerEvent("resizestop",e),this._cleanHelper(),delete this.startEvent,delete this.originalRect,delete this.temporalRect,delete this.scrollY,delete this.scrolled,this},e.prototype._setupHelper=function(){var t=this;this.elOriginStyleVal=e._originStyleProp.map((function(e){return t.el.style[e]})),this.parentOriginStylePosition=this.el.parentElement.style.position;var i=this.el.parentElement,o=a.Utils.getValuesFromTransformedElement(i);return this.rectScale={x:o.xScale,y:o.yScale},getComputedStyle(this.el.parentElement).position.match(/static/)&&(this.el.parentElement.style.position="relative"),this.el.style.position="absolute",this.el.style.opacity="0.8",this},e.prototype._cleanHelper=function(){var t=this;return e._originStyleProp.forEach((function(e,i){t.el.style[e]=t.elOriginStyleVal[i]||null})),this.el.parentElement.style.position=this.parentOriginStylePosition||null,this},e.prototype._getChange=function(t,e){var i=this.startEvent,o={width:this.originalRect.width,height:this.originalRect.height+this.scrolled,left:this.originalRect.left,top:this.originalRect.top-this.scrolled},n=t.clientX-i.clientX,r=this.sizeToContent?0:t.clientY-i.clientY;e.indexOf("e")>-1?o.width+=n:e.indexOf("w")>-1&&(o.width-=n,o.left+=n),e.indexOf("s")>-1?o.height+=r:e.indexOf("n")>-1&&(o.height-=r,o.top+=r);var s=this._constrainSize(o.width,o.height);return Math.round(o.width)!==Math.round(s.width)&&(e.indexOf("w")>-1&&(o.left+=o.width-s.width),o.width=s.width),Math.round(o.height)!==Math.round(s.height)&&(e.indexOf("n")>-1&&(o.top+=o.height-s.height),o.height=s.height),o},e.prototype._constrainSize=function(t,e){var i=this.option.maxWidth||Number.MAX_SAFE_INTEGER,o=this.option.minWidth/this.rectScale.x||t,n=this.option.maxHeight||Number.MAX_SAFE_INTEGER,r=this.option.minHeight/this.rectScale.y||e;return{width:Math.min(i,Math.max(o,t)),height:Math.min(n,Math.max(r,e))}},e.prototype._applyChange=function(){var t,e=this,i={left:0,top:0,width:0,height:0};if("absolute"===this.el.style.position){var o=(t=this.el.parentElement.getBoundingClientRect()).left,n=t.top;i={left:o,top:n,width:0,height:0}}return this.temporalRect?(Object.keys(this.temporalRect).forEach((function(t){var o=e.temporalRect[t],n="width"===t||"left"===t?e.rectScale.x:"height"===t||"top"===t?e.rectScale.y:1;e.el.style[t]=(o-i[t])*n+"px"})),this):this},e.prototype._removeHandlers=function(){return this.handlers.forEach((function(t){return t.destroy()})),delete this.handlers,this},e._originStyleProp=["width","height","position","left","top","opacity","zIndex"],e}(s.DDBaseImplement)},537:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0}),e.pointerleave=e.pointerenter=e.pointerdown=e.touchend=e.touchmove=e.touchstart=e.isTouch=void 0;var o=i(839);e.isTouch="undefined"!=typeof window&&"undefined"!=typeof document&&("ontouchstart"in document||"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0);var n=function(){};function r(t,e){if(!(t.touches.length>1)){t.cancelable&&t.preventDefault();var i=t.changedTouches[0],o=document.createEvent("MouseEvents");o.initMouseEvent(e,!0,!0,window,1,i.screenX,i.screenY,i.clientX,i.clientY,!1,!1,!1,!1,0,null),t.target.dispatchEvent(o)}}function s(t,e){t.cancelable&&t.preventDefault();var i=document.createEvent("MouseEvents");i.initMouseEvent(e,!0,!0,window,1,t.screenX,t.screenY,t.clientX,t.clientY,!1,!1,!1,!1,0,null),t.target.dispatchEvent(i)}e.touchstart=function(t){n.touchHandled||(n.touchHandled=!0,r(t,"mousedown"))},e.touchmove=function(t){n.touchHandled&&r(t,"mousemove")},e.touchend=function(t){if(n.touchHandled){n.pointerLeaveTimeout&&(window.clearTimeout(n.pointerLeaveTimeout),delete n.pointerLeaveTimeout);var e=!!o.DDManager.dragElement;r(t,"mouseup"),e||r(t,"click"),n.touchHandled=!1}},e.pointerdown=function(t){"mouse"!==t.pointerType&&t.target.releasePointerCapture(t.pointerId)},e.pointerenter=function(t){o.DDManager.dragElement&&"mouse"!==t.pointerType&&s(t,"mouseenter")},e.pointerleave=function(t){o.DDManager.dragElement&&"mouse"!==t.pointerType&&(n.pointerLeaveTimeout=window.setTimeout((function(){delete n.pointerLeaveTimeout,s(t,"mouseleave")}),10))}},506:function(t,e,i){var o=this&&this.__assign||function(){return o=Object.assign||function(t){for(var e,i=1,o=arguments.length;it.y&&!this.float&&(!this.collide(i,o(o({},i),{y:t.y}),t)||!this.collide(i,o(o({},i),{y:e.y-i.h}),t))?(t._skipDown=t._skipDown||e.y>t.y,d=this.moveNode(t,o(o(o({},e),{y:i.y+i.h}),l)),(i.locked||this._loading)&&d?n.Utils.copyPos(e,t):!i.locked&&d&&r.pack&&(this._packNodes(),e.y=i.y+i.h,n.Utils.copyPos(t,e)),a=a||d):d=this.moveNode(i,o(o(o({},i),{y:e.y+e.h,skip:t}),l)),!d)return a;i=void 0}return a},t.prototype.collide=function(t,e,i){void 0===e&&(e=t);var o=t._id,r=null==i?void 0:i._id;return this.nodes.find((function(t){return t._id!==o&&t._id!==r&&n.Utils.isIntercepted(t,e)}))},t.prototype.collideAll=function(t,e,i){void 0===e&&(e=t);var o=t._id,r=null==i?void 0:i._id;return this.nodes.filter((function(t){return t._id!==o&&t._id!==r&&n.Utils.isIntercepted(t,e)}))},t.prototype.directionCollideCoverage=function(t,e,i){if(e.rect&&t._rect){var n,r=t._rect,s=o({},e.rect);s.y>r.y?(s.h+=s.y-r.y,s.y=r.y):s.h+=r.y-s.y,s.x>r.x?(s.w+=s.x-r.x,s.x=r.x):s.w+=r.x-s.x;for(var a=.5,l=0,d=i;lu.y+u.h&&(c=(u.y+u.h-s.y)/u.h),r.xu.x+u.w&&(p=(u.x+u.w-s.x)/u.w);var g=Math.min(p,c);g>a&&(a=g,n=h)}return e.collide=n,n}},t.prototype.cacheRects=function(t,e,i,o,n,r){return this.nodes.forEach((function(s){return s._rect={y:s.y*e+i,x:s.x*t+r,w:s.w*t-r-o,h:s.h*e-i-n}})),this},t.prototype.swap=function(t,e){if(!e||e.locked||!t||t.locked)return!1;function i(){var i=e.x,o=e.y;return e.x=t.x,e.y=t.y,t.h!=e.h?(t.x=i,t.y=e.y+e.h):t.w!=e.w?(t.x=e.x+e.w,t.y=o):(t.x=i,t.y=o),t._dirty=e._dirty=!0,!0}var o;if(t.w===e.w&&t.h===e.h&&(t.x===e.x||t.y===e.y)&&(o=n.Utils.isTouching(t,e)))return i();if(!1!==o){if(t.w===e.w&&t.x===e.x&&(o||(o=n.Utils.isTouching(t,e)))){if(e.ye._orig.y;)--i,t.collide(e,{x:e.x,y:i,w:e.w,h:e.h})||(e._dirty=!0,e.y=i)})):this.nodes.forEach((function(e,i){if(!e.locked)for(;e.y>0;){var o=0===i?0:e.y-1;if(0!==i&&t.collide(e,{x:e.x,y:o,w:e.w,h:e.h}))break;e._dirty=e.y!==o,e.y=o}}))),this},t.prototype.prepareNode=function(e,i){var o;e._id=null!==(o=e._id)&&void 0!==o?o:t._idSeq++,void 0!==e.x&&void 0!==e.y&&null!==e.x&&null!==e.y||(e.autoPosition=!0);var r={x:0,y:0,w:1,h:1};return n.Utils.defaults(e,r),e.autoPosition||delete e.autoPosition,e.noResize||delete e.noResize,e.noMove||delete e.noMove,n.Utils.sanitizeMinMax(e),"string"==typeof e.x&&(e.x=Number(e.x)),"string"==typeof e.y&&(e.y=Number(e.y)),"string"==typeof e.w&&(e.w=Number(e.w)),"string"==typeof e.h&&(e.h=Number(e.h)),isNaN(e.x)&&(e.x=r.x,e.autoPosition=!0),isNaN(e.y)&&(e.y=r.y,e.autoPosition=!0),isNaN(e.w)&&(e.w=r.w),isNaN(e.h)&&(e.h=r.h),this.nodeBoundFix(e,i),e},t.prototype.nodeBoundFix=function(t,e){var i=t._orig||n.Utils.copyPos({},t);if(t.maxW&&(t.w=Math.min(t.w,t.maxW)),t.maxH&&(t.h=Math.min(t.h,t.maxH)),t.minW&&t.minW<=this.column&&(t.w=Math.max(t.w,t.minW)),t.minH&&(t.h=Math.max(t.h,t.minH)),(t.x||0)+(t.w||1)>this.column&&this.column<12&&!this._inColumnResize&&t._id&&-1===this.findCacheLayout(t,12)){var r=o({},t);r.autoPosition||void 0===r.x?(delete r.x,delete r.y):r.x=Math.min(11,r.x),r.w=Math.min(12,r.w||1),this.cacheOneLayout(r,12)}return t.w>this.column?t.w=this.column:t.w<1&&(t.w=1),this.maxRow&&t.h>this.maxRow?t.h=this.maxRow:t.h<1&&(t.h=1),t.x<0&&(t.x=0),t.y<0&&(t.y=0),t.x+t.w>this.column&&(e?t.w=this.column-t.x:t.x=this.column-t.w),this.maxRow&&t.y+t.h>this.maxRow&&(e?t.h=this.maxRow-t.y:t.y=this.maxRow-t.h),n.Utils.samePos(t,i)||(t._dirty=!0),this},t.prototype.getDirtyNodes=function(t){return t?this.nodes.filter((function(t){return t._dirty&&!n.Utils.samePos(t,t._orig)})):this.nodes.filter((function(t){return t._dirty}))},t.prototype._notify=function(t){if(this.batchMode||!this.onChange)return this;var e=(t||[]).concat(this.getDirtyNodes());return this.onChange(e),this},t.prototype.cleanNodes=function(){return this.batchMode||this.nodes.forEach((function(t){delete t._dirty,delete t._lastTried})),this},t.prototype.saveInitial=function(){return this.nodes.forEach((function(t){t._orig=n.Utils.copyPos({},t),delete t._dirty})),this._hasLocked=this.nodes.some((function(t){return t.locked})),this},t.prototype.restoreInitial=function(){return this.nodes.forEach((function(t){n.Utils.samePos(t,t._orig)||(n.Utils.copyPos(t,t._orig),t._dirty=!0)})),this._notify(),this},t.prototype.findEmptyPosition=function(t,e,i,o){void 0===e&&(e=this.nodes),void 0===i&&(i=this.column);for(var r=o?o.y*i+(o.x+o.w):0,s=!1,a=function(o){var r=o%i,a=Math.floor(o/i);if(r+t.w>i)return"continue";var l={x:r,y:a,w:t.w,h:t.h};e.find((function(t){return n.Utils.isIntercepted(l,t)}))||(t.x===r&&t.y===a||(t._dirty=!0),t.x=r,t.y=a,delete t.autoPosition,s=!0)},l=r;!s;++l)a(l);return s},t.prototype.addNode=function(t,e,i){var o;return void 0===e&&(e=!1),this.nodes.find((function(e){return e._id===t._id}))||(this._inColumnResize?this.nodeBoundFix(t):this.prepareNode(t),delete t._temporaryRemoved,delete t._removeDOM,t.autoPosition&&this.findEmptyPosition(t,this.nodes,this.column,i)&&(delete t.autoPosition,o=!0),this.nodes.push(t),e&&this.addedNodes.push(t),o||this._fixCollisions(t),this.batchMode||this._packNodes()._notify(),t)},t.prototype.removeNode=function(t,e,i){return void 0===e&&(e=!0),void 0===i&&(i=!1),this.nodes.find((function(e){return e._id===t._id}))?(i&&this.removedNodes.push(t),e&&(t._removeDOM=!0),this.nodes=this.nodes.filter((function(e){return e._id!==t._id})),t._isAboutToRemove||this._packNodes(),this._notify([t]),this):this},t.prototype.removeAll=function(t,e){if(void 0===t&&(t=!0),void 0===e&&(e=!0),delete this._layouts,!this.nodes.length)return this;t&&this.nodes.forEach((function(t){return t._removeDOM=!0}));var i=this.nodes;return this.removedNodes=e?i:[],this.nodes=[],this._notify(i)},t.prototype.moveNodeCheck=function(e,i){var r,s=this;if(!this.changedPosConstrain(e,i))return!1;if(i.pack=!0,!this.maxRow)return this.moveNode(e,i);var a=new t({column:this.column,float:this.float,nodes:this.nodes.map((function(t){return t._id===e._id?r=o({},t):o({},t)}))});if(!r)return!1;var l=a.moveNode(r,i)&&a.getRow()<=Math.max(this.getRow(),this.maxRow);if(!l&&!i.resizing&&i.collide){var d=i.collide.el.gridstackNode;if(this.swap(e,d))return this._notify(),!0}return!!l&&(a.nodes.filter((function(t){return t._dirty})).forEach((function(t){var e=s.nodes.find((function(e){return e._id===t._id}));e&&(n.Utils.copyPos(e,t),e._dirty=!0)})),this._notify(),!0)},t.prototype.willItFit=function(e){if(delete e._willFitPos,!this.maxRow)return!0;var i=new t({column:this.column,float:this.float,nodes:this.nodes.map((function(t){return o({},t)}))}),r=o({},e);return this.cleanupNode(r),delete r.el,delete r._id,delete r.content,delete r.grid,i.addNode(r),i.getRow()<=this.maxRow&&(e._willFitPos=n.Utils.copyPos({},r),!0)},t.prototype.changedPosConstrain=function(t,e){return e.w=e.w||t.w,e.h=e.h||t.h,t.x!==e.x||t.y!==e.y||(t.maxW&&(e.w=Math.min(e.w,t.maxW)),t.maxH&&(e.h=Math.min(e.h,t.maxH)),t.minW&&(e.w=Math.max(e.w,t.minW)),t.minH&&(e.h=Math.max(e.h,t.minH)),t.w!==e.w||t.h!==e.h)},t.prototype.moveNode=function(t,e){var i,o,r;if(!t||!e)return!1;void 0!==e.pack||this.batchMode||(r=e.pack=!0),"number"!=typeof e.x&&(e.x=t.x),"number"!=typeof e.y&&(e.y=t.y),"number"!=typeof e.w&&(e.w=t.w),"number"!=typeof e.h&&(e.h=t.h);var s=t.w!==e.w||t.h!==e.h,a=n.Utils.copyPos({},t,!0);if(n.Utils.copyPos(a,e),this.nodeBoundFix(a,s),n.Utils.copyPos(e,a),!e.forceCollide&&n.Utils.samePos(t,e))return!1;var l=n.Utils.copyPos({},t),d=this.collideAll(t,a,e.skip),h=!0;if(d.length){var u=t._moving&&!e.nested,c=u?this.directionCollideCoverage(t,e,d):d[0];if(u&&c&&(null===(o=null===(i=t.grid)||void 0===i?void 0:i.opts)||void 0===o?void 0:o.subGridDynamic)&&!t.grid._isTemp){var p=n.Utils.areaIntercept(e.rect,c._rect),g=n.Utils.area(e.rect),m=n.Utils.area(c._rect);p/(g.8&&(c.grid.makeSubGrid(c.el,void 0,t),c=void 0)}c?h=!this._fixCollisions(t,a,c,e):(h=!1,r&&delete e.pack)}return h&&(t._dirty=!0,n.Utils.copyPos(t,a)),e.pack&&this._packNodes()._notify(),!n.Utils.samePos(t,l)},t.prototype.getRow=function(){return this.nodes.reduce((function(t,e){return Math.max(t,e.y+e.h)}),0)},t.prototype.beginUpdate=function(t){return t._updating||(t._updating=!0,delete t._skipDown,this.batchMode||this.saveInitial()),this},t.prototype.endUpdate=function(){var t=this.nodes.find((function(t){return t._updating}));return t&&(delete t._updating,delete t._skipDown),this},t.prototype.save=function(t,e){var i;void 0===t&&(t=!0);var r=null===(i=this._layouts)||void 0===i?void 0:i.length,s=r&&this.column!==r-1?this._layouts[r-1]:null,a=[];return this.sortNodes(),this.nodes.forEach((function(i){var r=null==s?void 0:s.find((function(t){return t._id===i._id})),l=o(o({},i),r||{});n.Utils.removeInternalForSave(l,!t),e&&e(i,l),a.push(l)})),a},t.prototype.layoutsNodesChange=function(t){var e=this;return!this._layouts||this._inColumnResize||this._layouts.forEach((function(i,o){if(!i||o===e.column)return e;if(o=0&&t.y!==t._orig.y&&(e.y+=t.y-t._orig.y),t.x!==t._orig.x&&(e.x=Math.round(t.x*n)),t.w!==t._orig.w&&(e.w=Math.round(t.w*n)))}}))}})),this},t.prototype.columnChanged=function(t,e,i){var o,r=this;if(void 0===i&&(i="moveScale"),!this.nodes.length||!e||t===e)return this;if("none"===i)return this;var s="compact"===i||"list"===i;s&&this.sortNodes(1),et&&this._layouts){var d=this._layouts[e]||[],h=this._layouts.length-1;!d.length&&t!==h&&(null===(o=this._layouts[h])||void 0===o?void 0:o.length)&&(t=h,this._layouts[h].forEach((function(t){var e,i,o,n=l.find((function(e){return e._id===t._id}));n&&(s||t.autoPosition||(n.x=null!==(e=t.x)&&void 0!==e?e:n.x,n.y=null!==(i=t.y)&&void 0!==i?i:n.y),n.w=null!==(o=t.w)&&void 0!==o?o:n.w,null!=t.x&&void 0!==t.y||(n.autoPosition=!0))}))),d.forEach((function(t){var e,i,o,n=l.findIndex((function(e){return e._id===t._id}));if(-1!==n){var d=l[n];if(s)return void(d.w=t.w);(t.autoPosition||isNaN(t.x)||isNaN(t.y))&&r.findEmptyPosition(t,a),t.autoPosition||(d.x=null!==(e=t.x)&&void 0!==e?e:d.x,d.y=null!==(i=t.y)&&void 0!==i?i:d.y,d.w=null!==(o=t.w)&&void 0!==o?o:d.w,a.push(d)),l.splice(n,1)}}))}if(s)this.compact(i,!1);else{if(l.length)if("function"==typeof i)i(e,t,a,l);else{var u=s?1:e/t,c="move"===i||"moveScale"===i,p="scale"===i||"moveScale"===i;l.forEach((function(i){i.x=1===e?0:c?Math.round(i.x*u):Math.min(i.x,e-1),i.w=1===e||1===t?1:p?Math.round(i.w*u)||1:Math.min(i.w,e),a.push(i)})),l=[]}a=n.Utils.sort(a,-1),this._inColumnResize=!0,this.nodes=[],a.forEach((function(t){r.addNode(t,!1),delete t._orig}))}return this.nodes.forEach((function(t){return delete t._orig})),this.batchUpdate(!1,!s),delete this._inColumnResize,this},t.prototype.cacheLayout=function(e,i,o){var n=this;void 0===o&&(o=!1);var r=[];return e.forEach((function(e,i){var o;if(void 0===e._id){var s=e.id?n.nodes.find((function(t){return t.id===e.id})):void 0;e._id=null!==(o=null==s?void 0:s._id)&&void 0!==o?o:t._idSeq++}r[i]={x:e.x,y:e.y,w:e.w,_id:e._id}})),this._layouts=o?[]:this._layouts||[],this._layouts[i]=r,this},t.prototype.cacheOneLayout=function(e,i){var o;e._id=null!==(o=e._id)&&void 0!==o?o:t._idSeq++;var n={x:e.x,y:e.y,w:e.w,_id:e._id};(e.autoPosition||void 0===e.x)&&(delete n.x,delete n.y,e.autoPosition&&(n.autoPosition=!0)),this._layouts=this._layouts||[],this._layouts[i]=this._layouts[i]||[];var r=this.findCacheLayout(e,i);return-1===r?this._layouts[i].push(n):this._layouts[i][r]=n,this},t.prototype.findCacheLayout=function(t,e){var i,o,n;return null!==(n=null===(o=null===(i=this._layouts)||void 0===i?void 0:i[e])||void 0===o?void 0:o.findIndex((function(e){return e._id===t._id})))&&void 0!==n?n:-1},t.prototype.removeNodeFromLayoutCache=function(t){if(this._layouts)for(var e=0;e1&&m.sort((function(t,e){return(e.w||0)-(t.w||0)}));var b=o(o({},l.Utils.cloneDeep(d.gridDefaults)),{column:l.Utils.toNumber(e.getAttribute("gs-column"))||d.gridDefaults.column,minRow:g||l.Utils.toNumber(e.getAttribute("gs-min-row"))||d.gridDefaults.minRow,maxRow:g||l.Utils.toNumber(e.getAttribute("gs-max-row"))||d.gridDefaults.maxRow,staticGrid:l.Utils.toBool(e.getAttribute("gs-static"))||d.gridDefaults.staticGrid,draggable:{handle:(i.handleClass?"."+i.handleClass:i.handle?i.handle:"")||d.gridDefaults.draggable.handle},removableOptions:{accept:i.itemClass||d.gridDefaults.removableOptions.accept,decline:d.gridDefaults.removableOptions.decline}});e.getAttribute("gs-animate")&&(b.animate=l.Utils.toBool(e.getAttribute("gs-animate"))),i=l.Utils.defaults(i,b),this._initMargin(),this.checkDynamicColumn(),this.el.classList.add("gs-"+i.column),"auto"===i.rtl&&(i.rtl="rtl"===e.style.direction),i.rtl&&this.el.classList.add("grid-stack-rtl");var w=null===(s=this.el.parentElement)||void 0===s?void 0:s.parentElement,E=(null==w?void 0:w.classList.contains(d.gridDefaults.itemClass))?w.gridstackNode:void 0;E&&(E.subGrid=this,this.parentGridItem=E,this.el.classList.add("grid-stack-nested"),E.el.classList.add("grid-stack-sub-grid")),this._isAutoCellHeight="auto"===i.cellHeight,this._isAutoCellHeight||"initial"===i.cellHeight?this.cellHeight(void 0,!1):("number"==typeof i.cellHeight&&i.cellHeightUnit&&i.cellHeightUnit!==d.gridDefaults.cellHeightUnit&&(i.cellHeight=i.cellHeight+i.cellHeightUnit,delete i.cellHeightUnit),this.cellHeight(i.cellHeight,!1)),"mobile"===i.alwaysShowResizeHandle&&(i.alwaysShowResizeHandle=u.isTouch),this._styleSheetClass="gs-id-"+a.GridStackEngine._idSeq++,this.el.classList.add(this._styleSheetClass),this._setStaticClass();var D=i.engineClass||t.engineClass||a.GridStackEngine;if(this.engine=new D({column:this.getColumn(),float:i.float,maxRow:i.maxRow,onChange:function(t){var e=0;p.engine.nodes.forEach((function(t){e=Math.max(e,t.y+t.h)})),t.forEach((function(t){var e=t.el;e&&(t._removeDOM?(e&&e.remove(),delete t._removeDOM):p._writePosAttr(e,t))})),p._updateStyles(!1,e)}}),this._updateStyles(!1,0),i.auto&&(this.batchUpdate(),this.engine._loading=!0,this.getGridItems().forEach((function(t){return p._prepareElement(t)})),delete this.engine._loading,this.batchUpdate(!1)),i.children){var x=i.children;delete i.children,x.length&&this.load(x)}this.setAnimation(),i.subGridDynamic&&!c.DDManager.pauseDrag&&(c.DDManager.pauseDrag=!0),void 0!==(null===(h=i.draggable)||void 0===h?void 0:h.pause)&&(c.DDManager.pauseDrag=i.draggable.pause),this._setupRemoveDrop(),this._setupAcceptWidget(),this._updateResizeEvent()}return t.init=function(e,i){if(void 0===e&&(e={}),void 0===i&&(i=".grid-stack"),"undefined"==typeof document)return null;var o=t.getGridElement(i);return o?(o.gridstack||(o.gridstack=new t(o,l.Utils.cloneDeep(e))),o.gridstack):("string"==typeof i?console.error('GridStack.initAll() no grid was found with selector "'+i+'" - element missing or wrong selector ?\nNote: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.'):console.error("GridStack.init() no grid element was passed."),null)},t.initAll=function(e,i){void 0===e&&(e={}),void 0===i&&(i=".grid-stack");var o=[];return"undefined"==typeof document||(t.getGridElements(i).forEach((function(i){i.gridstack||(i.gridstack=new t(i,l.Utils.cloneDeep(e))),o.push(i.gridstack)})),0===o.length&&console.error('GridStack.initAll() no grid was found with selector "'+i+'" - element missing or wrong selector ?\nNote: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.')),o},t.addGrid=function(e,i){if(void 0===i&&(i={}),!e)return null;var n=e;if(n.gridstack){var r=n.gridstack;return i&&(r.opts=o(o({},r.opts),i)),void 0!==i.children&&r.load(i.children),r}if(!e.classList.contains("grid-stack")||t.addRemoveCB)if(t.addRemoveCB)n=t.addRemoveCB(e,i,!0,!0);else{var s=document.implementation.createHTMLDocument("");s.body.innerHTML='
'),n=s.body.children[0],e.appendChild(n)}return t.init(i,n)},t.registerEngine=function(e){t.engineClass=e},Object.defineProperty(t.prototype,"placeholder",{get:function(){if(!this._placeholder){var t=document.createElement("div");t.className="placeholder-content",this.opts.placeholderText&&(t.innerHTML=this.opts.placeholderText),this._placeholder=document.createElement("div"),this._placeholder.classList.add(this.opts.placeholderClass,d.gridDefaults.itemClass,this.opts.itemClass),this.placeholder.appendChild(t)}return this._placeholder},enumerable:!1,configurable:!0}),t.prototype.addWidget=function(e,i){var o,n,r;if("string"==typeof e)(s=document.implementation.createHTMLDocument("")).body.innerHTML=e,o=s.body.children[0];else if(0===arguments.length||1===arguments.length&&(void 0!==(r=e).el||void 0!==r.x||void 0!==r.y||void 0!==r.w||void 0!==r.h||void 0!==r.content))if(null==(n=i=e)?void 0:n.el)o=n.el;else if(t.addRemoveCB)o=t.addRemoveCB(this.el,i,!0,!1);else{var s,a=(null==i?void 0:i.content)||"";(s=document.implementation.createHTMLDocument("")).body.innerHTML='
').concat(a,"
"),o=s.body.children[0]}else o=e;if(o){if((n=o.gridstackNode)&&o.parentElement===this.el&&this.engine.nodes.find((function(t){return t._id===n._id})))return o;var d=this._readAttr(o);return i=l.Utils.cloneDeep(i)||{},l.Utils.defaults(i,d),n=this.engine.prepareNode(i),this._writeAttr(o,i),this.el.appendChild(o),this.makeWidget(o,i),o}},t.prototype.makeSubGrid=function(e,i,n,r){var s,a,d;void 0===r&&(r=!0);var h,u=e.gridstackNode;if(u||(u=this.makeWidget(e).gridstackNode),null===(s=u.subGrid)||void 0===s?void 0:s.el)return u.subGrid;for(var c,p=this;p&&!h;)h=null===(a=p.opts)||void 0===a?void 0:a.subGridOpts,p=null===(d=p.parentGridItem)||void 0===d?void 0:d.grid;i=l.Utils.cloneDeep(o(o(o({},h||{}),{children:void 0}),i||u.subGridOpts||{})),u.subGridOpts=i,"auto"===i.column&&(c=!0,i.column=Math.max(u.w||1,(null==n?void 0:n.w)||1),delete i.columnOpts);var g,m,f=u.el.querySelector(".grid-stack-item-content");if(r){if(this._removeDD(u.el),m=o(o({},u),{x:0,y:0}),l.Utils.removeInternalForSave(m),delete m.subGridOpts,u.content&&(m.content=u.content,delete u.content),t.addRemoveCB)g=t.addRemoveCB(this.el,m,!0,!1);else{var v=document.implementation.createHTMLDocument("");v.body.innerHTML='
',(g=v.body.children[0]).appendChild(f),v.body.innerHTML='
',f=v.body.children[0],u.el.appendChild(f)}this._prepareDragDropByNode(u)}if(n){var y=c?i.column:u.w,_=u.h+n.h,b=u.el.style;b.transition="none",this.update(u.el,{w:y,h:_}),setTimeout((function(){return b.transition=null}))}var w=u.subGrid=t.addGrid(f,i);return(null==n?void 0:n._moving)&&(w._isTemp=!0),c&&(w._autoColumn=!0),r&&w.addWidget(g,m),n&&(n._moving?window.setTimeout((function(){return l.Utils.simulateMouseEvent(n._event,"mouseenter",w.el)}),0):w.addWidget(u.el,u)),w},t.prototype.removeAsSubGrid=function(t){var e,i=this,o=null===(e=this.parentGridItem)||void 0===e?void 0:e.grid;o&&(o.batchUpdate(),o.removeWidget(this.parentGridItem.el,!0,!0),this.engine.nodes.forEach((function(t){t.x+=i.parentGridItem.x,t.y+=i.parentGridItem.y,o.addWidget(t.el,t)})),o.batchUpdate(!1),this.parentGridItem&&delete this.parentGridItem.subGrid,delete this.parentGridItem,t&&window.setTimeout((function(){return l.Utils.simulateMouseEvent(t._event,"mouseenter",o.el)}),0))},t.prototype.save=function(e,i,o){void 0===e&&(e=!0),void 0===i&&(i=!1),void 0===o&&(o=t.saveCB);var n=this.engine.save(e,o);if(n.forEach((function(t){var n;if(e&&t.el&&!t.subGrid&&!o){var r=t.el.querySelector(".grid-stack-item-content");t.content=r?r.innerHTML:void 0,t.content||delete t.content}else if(e||o||delete t.content,null===(n=t.subGrid)||void 0===n?void 0:n.el){var s=t.subGrid.save(e,i,o);t.subGridOpts=i?s:{children:s},delete t.subGrid}delete t.el})),i){var r=l.Utils.cloneDeep(this.opts);r.marginBottom===r.marginTop&&r.marginRight===r.marginLeft&&r.marginTop===r.marginRight&&(r.margin=r.marginTop,delete r.marginTop,delete r.marginRight,delete r.marginBottom,delete r.marginLeft),r.rtl===("rtl"===this.el.style.direction)&&(r.rtl="auto"),this._isAutoCellHeight&&(r.cellHeight="auto"),this._autoColumn&&(r.column="auto");var s=r._alwaysShowResizeHandle;return delete r._alwaysShowResizeHandle,void 0!==s?r.alwaysShowResizeHandle=s:delete r.alwaysShowResizeHandle,l.Utils.removeInternalAndSame(r,d.gridDefaults),r.children=n,r}return n},t.prototype.load=function(e,i){var n,r=this;void 0===i&&(i=t.addRemoveCB||!0),e=l.Utils.cloneDeep(e);var a=this.getColumn();e.forEach((function(t){t.w=t.w||1,t.h=t.h||1})),e=l.Utils.sort(e);var d=0;e.forEach((function(t){d=Math.max(d,(t.x||0)+t.w)})),d>a&&(this._ignoreLayoutsNodeChange=!0,this.engine.cacheLayout(e,d,!0));var h=t.addRemoveCB;"function"==typeof i&&(t.addRemoveCB=i);var u=[];this.batchUpdate();var c=!this.engine.nodes.length;c&&this.setAnimation(!1),!c&&i&&s([],this.engine.nodes,!0).forEach((function(i){i.id&&(l.Utils.find(e,i.id)||(t.addRemoveCB&&t.addRemoveCB(r.el,i,!1,!1),u.push(i),r.removeWidget(i.el,!0,!1)))})),this.engine._loading=!0;var p=[];return this.engine.nodes=this.engine.nodes.filter((function(t){return!l.Utils.find(e,t.id)||(p.push(t),!1)})),e.forEach((function(t){var e,n=l.Utils.find(p,t.id);if(n){if(l.Utils.shouldSizeToContent(n)&&(t.h=n.h),r.engine.nodeBoundFix(t),(t.autoPosition||void 0===t.x||void 0===t.y)&&(t.w=t.w||n.w,t.h=t.h||n.h,r.engine.findEmptyPosition(t)),r.engine.nodes.push(n),l.Utils.samePos(n,t)&&r.moveNode(n,o(o({},t),{forceCollide:!0})),r.update(n.el,t),null===(e=t.subGridOpts)||void 0===e?void 0:e.children){var s=n.el.querySelector(".grid-stack");s&&s.gridstack&&s.gridstack.load(t.subGridOpts.children)}}else i&&r.addWidget(t)})),delete this.engine._loading,this.engine.removedNodes=u,this.batchUpdate(!1),delete this._ignoreLayoutsNodeChange,h?t.addRemoveCB=h:delete t.addRemoveCB,c&&(null===(n=this.opts)||void 0===n?void 0:n.animate)&&this.setAnimation(this.opts.animate,!0),this},t.prototype.batchUpdate=function(t){return void 0===t&&(t=!0),this.engine.batchUpdate(t),t||(this._updateContainerHeight(),this._triggerRemoveEvent(),this._triggerAddEvent(),this._triggerChangeEvent()),this},t.prototype.getCellHeight=function(t){if(void 0===t&&(t=!1),this.opts.cellHeight&&"auto"!==this.opts.cellHeight&&(!t||!this.opts.cellHeightUnit||"px"===this.opts.cellHeightUnit))return this.opts.cellHeight;if("rem"===this.opts.cellHeightUnit)return this.opts.cellHeight*parseFloat(getComputedStyle(document.documentElement).fontSize);if("em"===this.opts.cellHeightUnit)return this.opts.cellHeight*parseFloat(getComputedStyle(this.el).fontSize);if("cm"===this.opts.cellHeightUnit)return this.opts.cellHeight*(96/2.54);if("mm"===this.opts.cellHeightUnit)return this.opts.cellHeight*(96/2.54)/10;var e=this.el.querySelector("."+this.opts.itemClass);if(e){var i=l.Utils.toNumber(e.getAttribute("gs-h"))||1;return Math.round(e.offsetHeight/i)}var o=parseInt(this.el.getAttribute("gs-current-row"));return o?Math.round(this.el.getBoundingClientRect().height/o):this.opts.cellHeight},t.prototype.cellHeight=function(t,e){if(void 0===e&&(e=!0),e&&void 0!==t&&this._isAutoCellHeight!==("auto"===t)&&(this._isAutoCellHeight="auto"===t,this._updateResizeEvent()),"initial"!==t&&"auto"!==t||(t=void 0),void 0===t){var i=-this.opts.marginRight-this.opts.marginLeft+this.opts.marginTop+this.opts.marginBottom;t=this.cellWidth()+i}var o=l.Utils.parseHeight(t);return this.opts.cellHeightUnit===o.unit&&this.opts.cellHeight===o.h||(this.opts.cellHeightUnit=o.unit,this.opts.cellHeight=o.h,this.resizeToContentCheck(),e&&this._updateStyles(!0)),this},t.prototype.cellWidth=function(){return this._widthOrContainer()/this.getColumn()},t.prototype._widthOrContainer=function(t){var e;return void 0===t&&(t=!1),t&&(null===(e=this.opts.columnOpts)||void 0===e?void 0:e.breakpointForWindow)?window.innerWidth:this.el.clientWidth||this.el.parentElement.clientWidth||window.innerWidth},t.prototype.checkDynamicColumn=function(){var t,e,i=this.opts.columnOpts;if(!i||!i.columnWidth&&!(null===(t=i.breakpoints)||void 0===t?void 0:t.length))return!1;var o=this.getColumn(),n=o,r=this._widthOrContainer(!0);if(i.columnWidth)n=Math.min(Math.round(r/i.columnWidth)||1,i.columnMax);else{n=i.columnMax;for(var s=0;s2){console.warn("gridstack.ts: `update(el, x, y, w, h)` is deprecated. Use `update(el, {x, w, content, ...})`. It will be removed soon");var n=arguments,r=1;return i={x:n[r++],y:n[r++],w:n[r++],h:n[r++]},this.update(e,i)}return t.getElements(e).forEach((function(t){var e,n=null==t?void 0:t.gridstackNode;if(n){var r=l.Utils.cloneDeep(i);o.engine.nodeBoundFix(r),delete r.autoPosition,delete r.id;var s,a=["x","y","w","h"];if(a.some((function(t){return void 0!==r[t]&&r[t]!==n[t]}))&&(s={},a.forEach((function(t){s[t]=void 0!==r[t]?r[t]:n[t],delete r[t]}))),!s&&(r.minW||r.minH||r.maxW||r.maxH)&&(s={}),void 0!==r.content){var d=t.querySelector(".grid-stack-item-content");d&&d.innerHTML!==r.content&&(d.innerHTML=r.content,(null===(e=n.subGrid)||void 0===e?void 0:e.el)&&(d.appendChild(n.subGrid.el),n.subGrid.opts.styleInHead||n.subGrid._updateStyles(!0))),delete r.content}var h=!1,u=!1;for(var c in r)"_"!==c[0]&&n[c]!==r[c]&&(n[c]=r[c],h=!0,u=u||!o.opts.staticGrid&&("noResize"===c||"noMove"===c||"locked"===c));if(l.Utils.sanitizeMinMax(n),s){var p=void 0!==s.w&&s.w!==n.w;o.moveNode(n,s),o.resizeToContentCheck(p,n),delete n._orig}(s||h)&&o._writeAttr(t,n),u&&o._prepareDragDropByNode(n)}})),this},t.prototype.moveNode=function(t,e){var i=t._updating;i||this.engine.cleanNodes().beginUpdate(t),this.engine.moveNode(t,e),this._updateContainerHeight(),i||(this._triggerChangeEvent(),this.engine.endUpdate())},t.prototype.resizeToContent=function(e){if(e&&(e.classList.remove("size-to-content-max"),e.clientHeight)){var i=e.gridstackNode;if(i){var o=i.grid;if(o&&e.parentElement===o.el){var n=o.getCellHeight(!0);if(n){var r,s=i.h?i.h*n:e.clientHeight;if(i.resizeToContentParent&&(r=e.querySelector(i.resizeToContentParent)),r||(r=e.querySelector(t.resizeToContentParent)),r){var a,l=e.clientHeight-r.clientHeight,d=i.h?i.h*n-l:r.clientHeight;if(i.subGrid)a=i.subGrid.getRow()*i.subGrid.getCellHeight(!0);else{var h=r.firstElementChild;if(!h)return void console.error("Error: GridStack.resizeToContent() widget id:".concat(i.id," '").concat(t.resizeToContentParent,"'.firstElementChild is null, make sure to have a div like container. Skipping sizing."));a=h.getBoundingClientRect().height||d}if(d!==a){s+=a-d;var u=Math.ceil(s/n),c=Number.isInteger(i.sizeToContent)?i.sizeToContent:0;c&&u>c&&(u=c,e.classList.add("size-to-content-max")),i.minH&&ui.maxH&&(u=i.maxH),u!==i.h&&(o._ignoreLayoutsNodeChange=!0,o.moveNode(i,{h:u}),delete o._ignoreLayoutsNodeChange)}}}}}}},t.prototype.resizeToContentCBCheck=function(e){t.resizeToContentCB?t.resizeToContentCB(e):this.resizeToContent(e)},t.prototype.rotate=function(e,i){var o=this;return t.getElements(e).forEach((function(t){var e=t.gridstackNode;if(l.Utils.canBeRotated(e)){var n={w:e.h,h:e.w,minH:e.minW,minW:e.minH,maxH:e.maxW,maxW:e.maxH};if(i){var r=i.left>0?Math.floor(i.left/o.cellWidth()):0,s=i.top>0?Math.floor(i.top/o.opts.cellHeight):0;n.x=e.x+r-(e.h-(s+1)),n.y=e.y+s-r}o.update(t,n)}})),this},t.prototype.margin=function(t){if(!("string"==typeof t&&t.split(" ").length>1)){var e=l.Utils.parseHeight(t);if(this.opts.marginUnit===e.unit&&this.opts.margin===e.h)return}return this.opts.margin=t,this.opts.marginTop=this.opts.marginBottom=this.opts.marginLeft=this.opts.marginRight=void 0,this._initMargin(),this._updateStyles(!0),this},t.prototype.getMargin=function(){return this.opts.margin},t.prototype.willItFit=function(t){if(arguments.length>1){console.warn("gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon");var e=arguments,i=0,o={x:e[i++],y:e[i++],w:e[i++],h:e[i++],autoPosition:e[i++]};return this.willItFit(o)}return this.engine.willItFit(t)},t.prototype._triggerChangeEvent=function(){if(this.engine.batchMode)return this;var t=this.engine.getDirtyNodes(!0);return t&&t.length&&(this._ignoreLayoutsNodeChange||this.engine.layoutsNodesChange(t),this._triggerEvent("change",t)),this.engine.saveInitial(),this},t.prototype._triggerAddEvent=function(){var t;if(this.engine.batchMode)return this;if(null===(t=this.engine.addedNodes)||void 0===t?void 0:t.length){this._ignoreLayoutsNodeChange||this.engine.layoutsNodesChange(this.engine.addedNodes),this.engine.addedNodes.forEach((function(t){delete t._dirty}));var e=s([],this.engine.addedNodes,!0);this.engine.addedNodes=[],this._triggerEvent("added",e)}return this},t.prototype._triggerRemoveEvent=function(){var t;if(this.engine.batchMode)return this;if(null===(t=this.engine.removedNodes)||void 0===t?void 0:t.length){var e=s([],this.engine.removedNodes,!0);this.engine.removedNodes=[],this._triggerEvent("removed",e)}return this},t.prototype._triggerEvent=function(t,e){var i=e?new CustomEvent(t,{bubbles:!1,detail:e}):new Event(t);return this.el.dispatchEvent(i),this},t.prototype._removeStylesheet=function(){if(this._styles){var t=this.opts.styleInHead?void 0:this.el.parentNode;l.Utils.removeStylesheet(this._styleSheetClass,t),delete this._styles}return this},t.prototype._updateStyles=function(t,e){if(void 0===t&&(t=!1),t&&this._removeStylesheet(),void 0===e&&(e=this.getRow()),this._updateContainerHeight(),0===this.opts.cellHeight)return this;var i=this.opts.cellHeight,o=this.opts.cellHeightUnit,n=".".concat(this._styleSheetClass," > .").concat(this.opts.itemClass);if(!this._styles){var r=this.opts.styleInHead?void 0:this.el.parentNode;if(this._styles=l.Utils.createStylesheet(this._styleSheetClass,r,{nonce:this.opts.nonce}),!this._styles)return this;this._styles._max=0,l.Utils.addCSSRule(this._styles,n,"height: ".concat(i).concat(o));var s=this.opts.marginTop+this.opts.marginUnit,a=this.opts.marginBottom+this.opts.marginUnit,d=this.opts.marginRight+this.opts.marginUnit,h=this.opts.marginLeft+this.opts.marginUnit,u="".concat(n," > .grid-stack-item-content"),c=".".concat(this._styleSheetClass," > .grid-stack-placeholder > .placeholder-content");l.Utils.addCSSRule(this._styles,u,"top: ".concat(s,"; right: ").concat(d,"; bottom: ").concat(a,"; left: ").concat(h,";")),l.Utils.addCSSRule(this._styles,c,"top: ".concat(s,"; right: ").concat(d,"; bottom: ").concat(a,"; left: ").concat(h,";")),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-n"),"top: ".concat(s,";")),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-s"),"bottom: ".concat(a)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-ne"),"right: ".concat(d)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-e"),"right: ".concat(d)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-se"),"right: ".concat(d,"; bottom: ").concat(a)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-nw"),"left: ".concat(h)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-w"),"left: ".concat(h)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-sw"),"left: ".concat(h,"; bottom: ").concat(a))}if((e=e||this._styles._max)>this._styles._max){for(var p=function(t){return i*t+o},g=this._styles._max+1;g<=e;g++)l.Utils.addCSSRule(this._styles,"".concat(n,'[gs-y="').concat(g,'"]'),"top: ".concat(p(g))),l.Utils.addCSSRule(this._styles,"".concat(n,'[gs-h="').concat(g+1,'"]'),"height: ".concat(p(g+1)));this._styles._max=e}return this},t.prototype._updateContainerHeight=function(){if(!this.engine||this.engine.batchMode)return this;var t=this.parentGridItem,e=this.getRow()+this._extraDragRow,i=this.opts.cellHeight,o=this.opts.cellHeightUnit;if(!i)return this;if(!t){var n=l.Utils.parseHeight(getComputedStyle(this.el).minHeight);if(n.h>0&&n.unit===o){var r=Math.floor(n.h/i);e1?t.setAttribute("gs-w",String(e.w)):t.removeAttribute("gs-w"),e.h>1?t.setAttribute("gs-h",String(e.h)):t.removeAttribute("gs-h"),this},t.prototype._writeAttr=function(t,e){if(!e)return this;this._writePosAttr(t,e);var i={autoPosition:"gs-auto-position",noResize:"gs-no-resize",noMove:"gs-no-move",locked:"gs-locked",id:"gs-id"};for(var o in i)e[o]?t.setAttribute(i[o],String(e[o])):t.removeAttribute(i[o]);return this},t.prototype._readAttr=function(t,e){void 0===e&&(e=!0);var i={};for(var o in i.x=l.Utils.toNumber(t.getAttribute("gs-x")),i.y=l.Utils.toNumber(t.getAttribute("gs-y")),i.w=l.Utils.toNumber(t.getAttribute("gs-w")),i.h=l.Utils.toNumber(t.getAttribute("gs-h")),i.autoPosition=l.Utils.toBool(t.getAttribute("gs-auto-position")),i.noResize=l.Utils.toBool(t.getAttribute("gs-no-resize")),i.noMove=l.Utils.toBool(t.getAttribute("gs-no-move")),i.locked=l.Utils.toBool(t.getAttribute("gs-locked")),i.id=t.getAttribute("gs-id"),i.maxW=l.Utils.toNumber(t.getAttribute("gs-max-w")),i.minW=l.Utils.toNumber(t.getAttribute("gs-min-w")),i.maxH=l.Utils.toNumber(t.getAttribute("gs-max-h")),i.minH=l.Utils.toNumber(t.getAttribute("gs-min-h")),e&&(1===i.w&&t.removeAttribute("gs-w"),1===i.h&&t.removeAttribute("gs-h"),i.maxW&&t.removeAttribute("gs-max-w"),i.minW&&t.removeAttribute("gs-min-w"),i.maxH&&t.removeAttribute("gs-max-h"),i.minH&&t.removeAttribute("gs-min-h")),i){if(!i.hasOwnProperty(o))return;i[o]||0===i[o]||delete i[o]}return i},t.prototype._setStaticClass=function(){var t,e,i=["grid-stack-static"];return this.opts.staticGrid?((t=this.el.classList).add.apply(t,i),this.el.setAttribute("gs-static","true")):((e=this.el.classList).remove.apply(e,i),this.el.removeAttribute("gs-static")),this},t.prototype.onResize=function(){var t;if((null===(t=this.el)||void 0===t?void 0:t.clientWidth)&&this.prevWidth!==this.el.clientWidth){this.prevWidth=this.el.clientWidth,this.batchUpdate();var e=!1;return this._autoColumn&&this.parentGridItem?this.opts.column!==this.parentGridItem.w&&(this.column(this.parentGridItem.w,"none"),e=!0):e=this.checkDynamicColumn(),this._isAutoCellHeight&&this.cellHeight(),this.engine.nodes.forEach((function(t){t.subGrid&&t.subGrid.onResize()})),this._skipInitialResize||this.resizeToContentCheck(e),delete this._skipInitialResize,this.batchUpdate(!1),this}},t.prototype.resizeToContentCheck=function(t,e){var i=this;if(void 0===t&&(t=!1),void 0===e&&(e=void 0),this.engine){if(t&&this.hasAnimationCSS())return setTimeout((function(){return i.resizeToContentCheck(!1,e)}),310);if(e)l.Utils.shouldSizeToContent(e)&&this.resizeToContentCBCheck(e.el);else if(this.engine.nodes.some((function(t){return l.Utils.shouldSizeToContent(t)}))){var o=s([],this.engine.nodes,!0);this.batchUpdate(),o.forEach((function(t){l.Utils.shouldSizeToContent(t)&&i.resizeToContentCBCheck(t.el)})),this.batchUpdate(!1)}this._gsEventHandler.resizecontent&&this._gsEventHandler.resizecontent(null,e?[e]:this.engine.nodes)}},t.prototype._updateResizeEvent=function(t){var e=this;void 0===t&&(t=!1);var i=!this.parentGridItem&&(this._isAutoCellHeight||this.opts.sizeToContent||this.opts.columnOpts||this.engine.nodes.find((function(t){return t.sizeToContent})));return t||!i||this.resizeObserver?!t&&i||!this.resizeObserver||(this.resizeObserver.disconnect(),delete this.resizeObserver,delete this._sizeThrottle):(this._sizeThrottle=l.Utils.throttle((function(){return e.onResize()}),this.opts.cellHeightThrottle),this.resizeObserver=new ResizeObserver((function(){return e._sizeThrottle()})),this.resizeObserver.observe(this.el),this._skipInitialResize=!0),this},t.getElement=function(t){return void 0===t&&(t=".grid-stack-item"),l.Utils.getElement(t)},t.getElements=function(t){return void 0===t&&(t=".grid-stack-item"),l.Utils.getElements(t)},t.getGridElement=function(e){return t.getElement(e)},t.getGridElements=function(t){return l.Utils.getElements(t)},t.prototype._initMargin=function(){var t,e=0,i=[];return"string"==typeof this.opts.margin&&(i=this.opts.margin.split(" ")),2===i.length?(this.opts.marginTop=this.opts.marginBottom=i[0],this.opts.marginLeft=this.opts.marginRight=i[1]):4===i.length?(this.opts.marginTop=i[0],this.opts.marginRight=i[1],this.opts.marginBottom=i[2],this.opts.marginLeft=i[3]):(t=l.Utils.parseHeight(this.opts.margin),this.opts.marginUnit=t.unit,e=this.opts.margin=t.h),void 0===this.opts.marginTop?this.opts.marginTop=e:(t=l.Utils.parseHeight(this.opts.marginTop),this.opts.marginTop=t.h,delete this.opts.margin),void 0===this.opts.marginBottom?this.opts.marginBottom=e:(t=l.Utils.parseHeight(this.opts.marginBottom),this.opts.marginBottom=t.h,delete this.opts.margin),void 0===this.opts.marginRight?this.opts.marginRight=e:(t=l.Utils.parseHeight(this.opts.marginRight),this.opts.marginRight=t.h,delete this.opts.margin),void 0===this.opts.marginLeft?this.opts.marginLeft=e:(t=l.Utils.parseHeight(this.opts.marginLeft),this.opts.marginLeft=t.h,delete this.opts.margin),this.opts.marginUnit=t.unit,this.opts.marginTop===this.opts.marginBottom&&this.opts.marginLeft===this.opts.marginRight&&this.opts.marginTop===this.opts.marginRight&&(this.opts.margin=this.opts.marginTop),this},t.getDD=function(){return p},t.setupDragIn=function(t,e,i){void 0===i&&(i=document),void 0!==(null==e?void 0:e.pause)&&(c.DDManager.pauseDrag=e.pause),e=o(o({},d.dragInDefaultOptions),e||{});var n="string"==typeof t?l.Utils.getElements(t,i):t;n.length&&(null==n||n.forEach((function(t){p.isDraggable(t)||p.dragIn(t,e)})))},t.prototype.movable=function(e,i){var o=this;return this.opts.staticGrid||t.getElements(e).forEach((function(t){var e=t.gridstackNode;e&&(i?delete e.noMove:e.noMove=!0,o._prepareDragDropByNode(e))})),this},t.prototype.resizable=function(e,i){var o=this;return this.opts.staticGrid||t.getElements(e).forEach((function(t){var e=t.gridstackNode;e&&(i?delete e.noResize:e.noResize=!0,o._prepareDragDropByNode(e))})),this},t.prototype.disable=function(t){if(void 0===t&&(t=!0),!this.opts.staticGrid)return this.enableMove(!1,t),this.enableResize(!1,t),this._triggerEvent("disable"),this},t.prototype.enable=function(t){if(void 0===t&&(t=!0),!this.opts.staticGrid)return this.enableMove(!0,t),this.enableResize(!0,t),this._triggerEvent("enable"),this},t.prototype.enableMove=function(t,e){var i=this;return void 0===e&&(e=!0),this.opts.staticGrid||(t?delete this.opts.disableDrag:this.opts.disableDrag=!0,this.engine.nodes.forEach((function(o){i._prepareDragDropByNode(o),o.subGrid&&e&&o.subGrid.enableMove(t,e)}))),this},t.prototype.enableResize=function(t,e){var i=this;return void 0===e&&(e=!0),this.opts.staticGrid||(t?delete this.opts.disableResize:this.opts.disableResize=!0,this.engine.nodes.forEach((function(o){i._prepareDragDropByNode(o),o.subGrid&&e&&o.subGrid.enableResize(t,e)}))),this},t.prototype._removeDD=function(t){return p.draggable(t,"destroy").resizable(t,"destroy"),t.gridstackNode&&delete t.gridstackNode._initDD,delete t.ddElement,this},t.prototype._setupAcceptWidget=function(){var e,i,n=this;if(this.opts.staticGrid||!this.opts.acceptWidgets&&!this.opts.removable)return p.droppable(this.el,"destroy"),this;var r=function(t,o,r){var s,a,d=o.gridstackNode;if(d){if(r=r||o,!(null===(a=d.grid)||void 0===a?void 0:a.el)){r.style.transform="scale(".concat(1/n.dragTransform.xScale,",").concat(1/n.dragTransform.yScale,")");var h=r.getBoundingClientRect();r.style.left=h.x+(n.dragTransform.xScale-1)*(t.clientX-h.x)/n.dragTransform.xScale+"px",r.style.top=h.y+(n.dragTransform.yScale-1)*(t.clientY-h.y)/n.dragTransform.yScale+"px",r.style.transformOrigin="0px 0px"}var u=n.el.getBoundingClientRect(),c=(s=r.getBoundingClientRect()).top,g=s.left;g-=u.left;var m={position:{top:(c-=u.top)*n.dragTransform.xScale,left:g*n.dragTransform.yScale}};if(d._temporaryRemoved){if(d.x=Math.max(0,Math.round(g/i)),d.y=Math.max(0,Math.round(c/e)),delete d.autoPosition,n.engine.nodeBoundFix(d),!n.engine.willItFit(d)){if(d.autoPosition=!0,!n.engine.willItFit(d))return void p.off(o,"drag");d._willFitPos&&(l.Utils.copyPos(d,d._willFitPos),delete d._willFitPos)}n._onStartMoving(r,t,m,d,i,e)}else n._dragOrResize(r,t,m,d,i,e)}};return p.droppable(this.el,{accept:function(t){var e=t.gridstackNode||n._readAttr(t,!1);if((null==e?void 0:e.grid)===n)return!0;if(!n.opts.acceptWidgets)return!1;var i=!0;if("function"==typeof n.opts.acceptWidgets)i=n.opts.acceptWidgets(t);else{var o=!0===n.opts.acceptWidgets?".grid-stack-item":n.opts.acceptWidgets;i=t.matches(o)}if(i&&e&&n.opts.maxRow){var r={w:e.w,h:e.h,minW:e.minW,minH:e.minH};i=n.engine.willItFit(r)}return i}}).on(this.el,"dropover",(function(s,a,l){var d=a.gridstackNode;if((null==d?void 0:d.grid)===n&&!d._temporaryRemoved)return!1;(null==d?void 0:d.grid)&&d.grid!==n&&!d._temporaryRemoved&&d.grid._leave(a,l),i=n.cellWidth(),e=n.getCellHeight(!0),d||(d=n._readAttr(a,!1)),d.grid||(d._isExternal=!0,a.gridstackNode=d),l=l||a;var h=d.w||Math.round(l.offsetWidth/i)||1,u=d.h||Math.round(l.offsetHeight/e)||1;return d.grid&&d.grid!==n?(a._gridstackNodeOrig||(a._gridstackNodeOrig=d),a.gridstackNode=d=o(o({},d),{w:h,h:u,grid:n}),delete d.x,delete d.y,n.engine.cleanupNode(d).nodeBoundFix(d),d._initDD=d._isExternal=d._temporaryRemoved=!0):(d.w=h,d.h=u,d._temporaryRemoved=!0),t._itemRemoving(d.el,!1),p.on(a,"drag",r),r(s,a,l),!1})).on(this.el,"dropout",(function(t,e,i){var o=e.gridstackNode;return!!o&&(o.grid&&o.grid!==n||(n._leave(e,i),n._isTemp&&n.removeAsSubGrid(o)),!1)})).on(this.el,"drop",(function(t,e,i){var r,s,a,d=e.gridstackNode;if((null==d?void 0:d.grid)===n&&!d._isExternal)return!1;var h=!!n.placeholder.parentElement;n.placeholder.remove();var u=h&&n.opts.animate;u&&n.setAnimation(!1);var c=e._gridstackNodeOrig;if(delete e._gridstackNodeOrig,h&&(null==c?void 0:c.grid)&&c.grid!==n){var g=c.grid;g.engine.removeNodeFromLayoutCache(c),g.engine.removedNodes.push(c),g._triggerRemoveEvent()._triggerChangeEvent(),g.parentGridItem&&!g.engine.nodes.length&&g.opts.subGridDynamic&&g.removeAsSubGrid()}if(!d)return!1;if(h&&(n.engine.cleanupNode(d),d.grid=n),null===(r=d.grid)||void 0===r||delete r._isTemp,p.off(e,"drag"),i!==e?(i.remove(),e.gridstackNode=c,h&&(e=e.cloneNode(!0))):(e.remove(),n._removeDD(e)),!h)return!1;e.gridstackNode=d,d.el=e;var m=null===(a=null===(s=d.subGrid)||void 0===s?void 0:s.el)||void 0===a?void 0:a.gridstack;return l.Utils.copyPos(d,n._readAttr(n.placeholder)),l.Utils.removePositioningStyles(e),n.el.appendChild(e),n._prepareElement(e,!0,d),m&&(m.parentGridItem=d,m.opts.styleInHead||m._updateStyles(!0)),n._updateContainerHeight(),n.engine.addedNodes.push(d),n._triggerAddEvent(),n._triggerChangeEvent(),n.engine.endUpdate(),n._gsEventHandler.dropped&&n._gsEventHandler.dropped(o(o({},t),{type:"dropped"}),c&&c.grid?c:void 0,d),u&&n.setAnimation(n.opts.animate,!0),!1})),this},t._itemRemoving=function(t,e){var i=t?t.gridstackNode:void 0;(null==i?void 0:i.grid)&&!t.classList.contains(i.grid.opts.removableOptions.decline)&&(e?i._isAboutToRemove=!0:delete i._isAboutToRemove,e?t.classList.add("grid-stack-item-removing"):t.classList.remove("grid-stack-item-removing"))},t.prototype._setupRemoveDrop=function(){if("string"!=typeof this.opts.removable)return this;var e=document.querySelector(this.opts.removable);return e?(this.opts.staticGrid||p.isDroppable(e)||p.droppable(e,this.opts.removableOptions).on(e,"dropover",(function(e,i){return t._itemRemoving(i,!0)})).on(e,"dropout",(function(e,i){return t._itemRemoving(i,!1)})),this):this},t.prototype._prepareDragDropByNode=function(t){var e=this,i=t.el,o=t.noMove||this.opts.disableDrag,n=t.noResize||this.opts.disableResize;if(this.opts.staticGrid||o&&n)return t._initDD&&(this._removeDD(i),delete t._initDD),i.classList.add("ui-draggable-disabled","ui-resizable-disabled"),this;if(!t._initDD){var r,s,a=function(o,n){e._gsEventHandler[o.type]&&e._gsEventHandler[o.type](o,o.target),r=e.cellWidth(),s=e.getCellHeight(!0),e._onStartMoving(i,o,n,t,r,s)},d=function(o,n){e._dragOrResize(i,o,n,t,r,s)},h=function(o){e.placeholder.remove(),delete t._moving,delete t._event,delete t._lastTried;var n=t.w!==t._orig.w,r=o.target;if(r.gridstackNode&&r.gridstackNode.grid===e){if(t.el=r,t._isAboutToRemove){var s=i.gridstackNode.grid;s._gsEventHandler[o.type]&&s._gsEventHandler[o.type](o,r),s.engine.nodes.push(t),s.removeWidget(i,!0,!0)}else l.Utils.removePositioningStyles(r),t._temporaryRemoved?(l.Utils.copyPos(t,t._orig),e._writePosAttr(r,t),e.engine.addNode(t)):e._writePosAttr(r,t),e._gsEventHandler[o.type]&&e._gsEventHandler[o.type](o,r);e._extraDragRow=0,e._updateContainerHeight(),e._triggerChangeEvent(),e.engine.endUpdate(),"resizestop"===o.type&&(Number.isInteger(t.sizeToContent)&&(t.sizeToContent=t.h),e.resizeToContentCheck(n,t))}};p.draggable(i,{start:a,stop:h,drag:d}).resizable(i,{start:a,stop:h,resize:d}),t._initDD=!0}return p.draggable(i,o?"disable":"enable").resizable(i,n?"disable":"enable"),this},t.prototype._onStartMoving=function(t,e,i,o,n,r){var s;if(this.engine.cleanNodes().beginUpdate(o),this._writePosAttr(this.placeholder,o),this.el.appendChild(this.placeholder),this.placeholder.gridstackNode=o,null===(s=o.grid)||void 0===s?void 0:s.el)this.dragTransform=l.Utils.getValuesFromTransformedElement(t);else if(this.placeholder&&this.placeholder.closest(".grid-stack")){var a=this.placeholder.closest(".grid-stack");this.dragTransform=l.Utils.getValuesFromTransformedElement(a)}else this.dragTransform={xScale:1,xOffset:0,yScale:1,yOffset:0};if(o.el=this.placeholder,o._lastUiPosition=i.position,o._prevYPix=i.position.top,o._moving="dragstart"===e.type,delete o._lastTried,"dropover"===e.type&&o._temporaryRemoved&&(this.engine.addNode(o),o._moving=!0),this.engine.cacheRects(n,r,this.opts.marginTop,this.opts.marginRight,this.opts.marginBottom,this.opts.marginLeft),"resizestart"===e.type){var d=this.getColumn()-o.x,h=(this.opts.maxRow||Number.MAX_SAFE_INTEGER)-o.y;p.resizable(t,"option","minWidth",n*Math.min(o.minW||1,d)).resizable(t,"option","minHeight",r*Math.min(o.minH||1,h)).resizable(t,"option","maxWidth",n*Math.min(o.maxW||Number.MAX_SAFE_INTEGER,d)).resizable(t,"option","maxHeight",r*Math.min(o.maxH||Number.MAX_SAFE_INTEGER,h))}},t.prototype._dragOrResize=function(t,e,i,n,r,s){var a,d=o({},n._orig),h=this.opts.marginLeft,u=this.opts.marginRight,c=this.opts.marginTop,p=this.opts.marginBottom,g=Math.round(.1*s),m=Math.round(.1*r);if(h=Math.min(h,m),u=Math.min(u,m),c=Math.min(c,g),p=Math.min(p,g),"drag"===e.type){if(n._temporaryRemoved)return;var f=i.position.top-n._prevYPix;n._prevYPix=i.position.top,!1!==this.opts.draggable.scroll&&l.Utils.updateScrollPosition(t,i.position,f);var v=i.position.left+(i.position.left>n._lastUiPosition.left?-u:h),y=i.position.top+(i.position.top>n._lastUiPosition.top?-p:c);d.x=Math.round(v/r),d.y=Math.round(y/s);var _=this._extraDragRow;if(this.engine.collide(n,d)){var b=this.getRow(),w=Math.max(0,d.y+n.h-b);this.opts.maxRow&&b+w>this.opts.maxRow&&(w=Math.max(0,this.opts.maxRow-b)),this._extraDragRow=w}else this._extraDragRow=0;if(this._extraDragRow!==_&&this._updateContainerHeight(),n.x===d.x&&n.y===d.y)return}else if("resize"===e.type){if(d.x<0)return;if(l.Utils.updateScrollResize(e,t,s),d.w=Math.round((i.size.width-h)/r),d.h=Math.round((i.size.height-c)/s),n.w===d.w&&n.h===d.h)return;if(n._lastTried&&n._lastTried.w===d.w&&n._lastTried.h===d.h)return;v=i.position.left+h;var E=i.position.top+c;d.x=Math.round(v/r),d.y=Math.round(E/s),a=!0}n._event=e,n._lastTried=d;var D={x:i.position.left+h,y:i.position.top+c,w:(i.size?i.size.width:n.w*r)-h-u,h:(i.size?i.size.height:n.h*s)-c-p};if(this.engine.moveNodeCheck(n,o(o({},d),{cellWidth:r,cellHeight:s,rect:D,resizing:a}))){n._lastUiPosition=i.position,this.engine.cacheRects(r,s,c,u,p,h),delete n._skipDown,a&&n.subGrid&&n.subGrid.onResize(),this._extraDragRow=0,this._updateContainerHeight();var x=e.target;this._writePosAttr(x,n),this._gsEventHandler[e.type]&&this._gsEventHandler[e.type](e,x)}},t.prototype._leave=function(e,i){var o=e.gridstackNode;o&&((i=i||e).style.transform="scale(1)",p.off(e,"drag"),o._temporaryRemoved||(o._temporaryRemoved=!0,this.engine.removeNode(o),o.el=o._isExternal&&i?i:e,!0===this.opts.removable&&t._itemRemoving(e,!0),e._gridstackNodeOrig?(e.gridstackNode=e._gridstackNodeOrig,delete e._gridstackNodeOrig):o._isExternal&&(delete o.el,delete e.gridstackNode,this.engine.restoreInitial())))},t.prototype.commit=function(){return(0,l.obsolete)(this,this.batchUpdate(!1),"commit","batchUpdate","5.2"),this},t.resizeToContentParent=".grid-stack-item-content",t.Utils=l.Utils,t.Engine=a.GridStackEngine,t.GDRev="10.3.0",t}()},855:function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.dragInDefaultOptions=e.gridDefaults=void 0,e.gridDefaults={alwaysShowResizeHandle:"mobile",animate:!0,auto:!0,cellHeight:"auto",cellHeightThrottle:100,cellHeightUnit:"px",column:12,draggable:{handle:".grid-stack-item-content",appendTo:"body",scroll:!0},handle:".grid-stack-item-content",itemClass:"grid-stack-item",margin:10,marginUnit:"px",maxRow:0,minRow:0,placeholderClass:"grid-stack-placeholder",placeholderText:"",removableOptions:{accept:"grid-stack-item",decline:"grid-stack-non-removable"},resizable:{handles:"se"},rtl:"auto"},e.dragInDefaultOptions={handle:".grid-stack-item-content",appendTo:"body"}},867:function(t,e){var i=this&&this.__assign||function(){return i=Object.assign||function(t){for(var e,i=1,o=arguments.length;i=e.y+e.h||t.y+t.h<=e.y||t.x+t.w<=e.x||t.x>=e.x+e.w)},t.isTouching=function(e,i){return t.isIntercepted(e,{x:i.x-.5,y:i.y-.5,w:i.w+1,h:i.h+1})},t.areaIntercept=function(t,e){var i=t.x>e.x?t.x:e.x,o=t.x+t.we.y?t.y:e.y,r=t.y+t.hn){var r=o.bottom-n,s=o.top,a=this.getScrollElement(t);if(null!==a){var l=a.scrollTop;o.top<0&&i<0?t.offsetHeight>n?a.scrollTop+=i:a.scrollTop+=Math.abs(s)>Math.abs(i)?i:s:i>0&&(t.offsetHeight>n?a.scrollTop+=i:a.scrollTop+=r>i?i:r),e.top+=a.scrollTop-l}}},t.updateScrollResize=function(t,e,i){var o=this.getScrollElement(e),n=o.clientHeight,r=o===this.getScrollElement()?0:o.getBoundingClientRect().top,s=t.clientY-r,a=s>n-i;s3){this.dragging=!0,s.DDManager.dragElement=this;var r=null===(e=this.el.gridstackNode)||void 0===e?void 0:e.grid;r?s.DDManager.dropElement=r.el.ddElement.ddDroppable:delete s.DDManager.dropElement,this.helper=this._createHelper(t),this._setupHelperContainmentStyle(),this.dragTransform=a.Utils.getValuesFromTransformedElement(this.helperContainment),this.dragOffset=this._getDragOffset(t,this.el,this.helperContainment),this._setupHelperStyle(t);var l=a.Utils.initEvent(t,{target:this.el,type:"dragstart"});this.option.start&&this.option.start(l,this.ui()),this.triggerEvent("dragstart",l),document.addEventListener("keydown",this._keyEvent)}return!0},e.prototype._mouseUp=function(t){var e,i;if(document.removeEventListener("mousemove",this._mouseMove,!0),document.removeEventListener("mouseup",this._mouseUp,!0),d.isTouch&&(t.target.removeEventListener("touchmove",d.touchmove,!0),t.target.removeEventListener("touchend",d.touchend,!0)),this.dragging){delete this.dragging,null===(e=this.el.gridstackNode)||void 0===e||delete e._origRotate,document.removeEventListener("keydown",this._keyEvent),(null===(i=s.DDManager.dropElement)||void 0===i?void 0:i.el)===this.el.parentElement&&delete s.DDManager.dropElement,this.helperContainment.style.position=this.parentOriginStylePosition||null,this.helper===this.el?this._removeHelperStyle():this.helper.remove();var o=a.Utils.initEvent(t,{target:this.el,type:"dragstop"});this.option.stop&&this.option.stop(o),this.triggerEvent("dragstop",o),s.DDManager.dropElement&&s.DDManager.dropElement.drop(t)}delete this.helper,delete this.mouseDownEvent,delete s.DDManager.dragElement,delete s.DDManager.dropElement,delete s.DDManager.mouseHandled,t.preventDefault()},e.prototype._keyEvent=function(t){var e=this.el.gridstackNode;if(null==e?void 0:e.grid){var i=e.grid;if("Escape"===t.key)e._origRotate&&(e._orig=e._origRotate,delete e._origRotate),i.engine.restoreInitial(),this._mouseUp(this.mouseDownEvent);else if("r"===t.key||"R"===t.key){if(!a.Utils.canBeRotated(e))return;e._origRotate=e._origRotate||r({},e._orig),delete e._moving,i.setAnimation(!1).rotate(e.el,{top:-this.dragOffset.offsetTop,left:-this.dragOffset.offsetLeft}).setAnimation(),e._moving=!0,this.dragOffset=this._getDragOffset(this.lastDrag,e.el,this.helperContainment),this.helper.style.width=this.dragOffset.width+"px",this.helper.style.height=this.dragOffset.height+"px",a.Utils.swap(e._orig,"w","h"),delete e._rect,this._mouseMove(this.lastDrag)}}},e.prototype._createHelper=function(t){var i=this,o=this.el;return"function"==typeof this.option.helper?o=this.option.helper(t):"clone"===this.option.helper&&(o=a.Utils.cloneNode(this.el)),document.body.contains(o)||a.Utils.appendTo(o,"parent"===this.option.appendTo?this.el.parentElement:this.option.appendTo),o===this.el&&(this.dragElementOriginStyle=e.originStyleProp.map((function(t){return i.el.style[t]}))),o},e.prototype._setupHelperStyle=function(t){var e=this;this.helper.classList.add("ui-draggable-dragging");var i=this.helper.style;return i.pointerEvents="none",i.width=this.dragOffset.width+"px",i.height=this.dragOffset.height+"px",i.willChange="left, top",i.position="fixed",this._dragFollow(t),i.transition="none",setTimeout((function(){e.helper&&(i.transition=null)}),0),this},e.prototype._removeHelperStyle=function(){var t,i=this;this.helper.classList.remove("ui-draggable-dragging");var o=null===(t=this.helper)||void 0===t?void 0:t.gridstackNode;if(!(null==o?void 0:o._isAboutToRemove)&&this.dragElementOriginStyle){var n=this.helper,r=this.dragElementOriginStyle.transition||null;n.style.transition=this.dragElementOriginStyle.transition="none",e.originStyleProp.forEach((function(t){return n.style[t]=i.dragElementOriginStyle[t]||null})),setTimeout((function(){return n.style.transition=r}),50)}return delete this.dragElementOriginStyle,this},e.prototype._dragFollow=function(t){var e=this.helper.style,i=this.dragOffset;e.left=(t.clientX+i.offsetLeft-0)*this.dragTransform.xScale+"px",e.top=(t.clientY+i.offsetTop-0)*this.dragTransform.yScale+"px"},e.prototype._setupHelperContainmentStyle=function(){return this.helperContainment=this.helper.parentElement,"fixed"!==this.helper.style.position&&(this.parentOriginStylePosition=this.helperContainment.style.position,getComputedStyle(this.helperContainment).position.match(/static/)&&(this.helperContainment.style.position="relative")),this},e.prototype._getDragOffset=function(t,e,i){var o=0,n=0;i&&(o=this.dragTransform.xOffset,n=this.dragTransform.yOffset);var r=e.getBoundingClientRect();return{left:r.left,top:r.top,offsetLeft:-t.clientX+r.left-o,offsetTop:-t.clientY+r.top-n,width:r.width*this.dragTransform.xScale,height:r.height*this.dragTransform.yScale}},e.prototype.ui=function(){var t=this.el.parentElement.getBoundingClientRect(),e=this.helper.getBoundingClientRect();return{position:{top:(e.top-t.top)*this.dragTransform.yScale,left:(e.left-t.left)*this.dragTransform.xScale}}},e.originStyleProp=["transition","pointerEvents","position","left","top","minWidth","willChange"],e}(l.DDBaseImplement)},677:function(t,e,i){var o,n=this&&this.__extends||(o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},o(t,e)},function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}),r=this&&this.__assign||function(){return r=Object.assign||function(t){for(var e,i=1,o=arguments.length;i-1?this.ddDraggable.on(t,e):this.ddDroppable&&["drop","dropover","dropout"].indexOf(t)>-1?this.ddDroppable.on(t,e):this.ddResizable&&["resizestart","resize","resizestop"].indexOf(t)>-1&&this.ddResizable.on(t,e),this},t.prototype.off=function(t){return this.ddDraggable&&["drag","dragstart","dragstop"].indexOf(t)>-1?this.ddDraggable.off(t):this.ddDroppable&&["drop","dropover","dropout"].indexOf(t)>-1?this.ddDroppable.off(t):this.ddResizable&&["resizestart","resize","resizestop"].indexOf(t)>-1&&this.ddResizable.off(t),this},t.prototype.setupDraggable=function(t){return this.ddDraggable?this.ddDraggable.updateOption(t):this.ddDraggable=new n.DDDraggable(this.el,t),this},t.prototype.cleanDraggable=function(){return this.ddDraggable&&(this.ddDraggable.destroy(),delete this.ddDraggable),this},t.prototype.setupResizable=function(t){return this.ddResizable?this.ddResizable.updateOption(t):this.ddResizable=new o.DDResizable(this.el,t),this},t.prototype.cleanResizable=function(){return this.ddResizable&&(this.ddResizable.destroy(),delete this.ddResizable),this},t.prototype.setupDroppable=function(t){return this.ddDroppable?this.ddDroppable.updateOption(t):this.ddDroppable=new r.DDDroppable(this.el,t),this},t.prototype.cleanDroppable=function(){return this.ddDroppable&&(this.ddDroppable.destroy(),delete this.ddDroppable),this},t}();e.DDElement=s},502:function(t,e,i){var o=this&&this.__assign||function(){return o=Object.assign||function(t){for(var e,i=1,o=arguments.length;i2&&(this.moving=!0,this._triggerEvent("start",this.mouseDownEvent),this._triggerEvent("move",t),document.addEventListener("keydown",this._keyEvent)),t.stopPropagation()},t.prototype._mouseUp=function(t){this.moving&&(this._triggerEvent("stop",t),document.removeEventListener("keydown",this._keyEvent)),document.removeEventListener("mousemove",this._mouseMove,!0),document.removeEventListener("mouseup",this._mouseUp,!0),o.isTouch&&(this.el.removeEventListener("touchmove",o.touchmove),this.el.removeEventListener("touchend",o.touchend)),delete this.moving,delete this.mouseDownEvent,t.stopPropagation(),t.preventDefault()},t.prototype._keyEvent=function(t){var e,i;"Escape"===t.key&&(null===(i=null===(e=this.host.gridstackNode)||void 0===e?void 0:e.grid)||void 0===i||i.engine.restoreInitial(),this._mouseUp(this.mouseDownEvent))},t.prototype._triggerEvent=function(t,e){return this.option[t]&&this.option[t](e),this},t.prefix="ui-resizable-",t}()},904:function(t,e,i){var o,n=this&&this.__extends||(o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},o(t,e)},function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)});Object.defineProperty(e,"__esModule",{value:!0}),e.DDResizable=void 0;var r=i(664),s=i(74),a=i(867),l=i(839);e.DDResizable=function(t){function e(e,i){void 0===i&&(i={});var o=t.call(this)||this;return o.el=e,o.option=i,o.rectScale={x:1,y:1},o._ui=function(){var t=o.el.parentElement.getBoundingClientRect(),e={width:o.originalRect.width,height:o.originalRect.height+o.scrolled,left:o.originalRect.left,top:o.originalRect.top-o.scrolled},i=o.temporalRect||e;return{position:{left:(i.left-t.left)*o.rectScale.x,top:(i.top-t.top)*o.rectScale.y},size:{width:i.width*o.rectScale.x,height:i.height*o.rectScale.y}}},o._mouseOver=o._mouseOver.bind(o),o._mouseOut=o._mouseOut.bind(o),o.enable(),o._setupAutoHide(o.option.autoHide),o._setupHandlers(),o}return n(e,t),e.prototype.on=function(e,i){t.prototype.on.call(this,e,i)},e.prototype.off=function(e){t.prototype.off.call(this,e)},e.prototype.enable=function(){t.prototype.enable.call(this),this.el.classList.remove("ui-resizable-disabled"),this._setupAutoHide(this.option.autoHide)},e.prototype.disable=function(){t.prototype.disable.call(this),this.el.classList.add("ui-resizable-disabled"),this._setupAutoHide(!1)},e.prototype.destroy=function(){this._removeHandlers(),this._setupAutoHide(!1),delete this.el,t.prototype.destroy.call(this)},e.prototype.updateOption=function(t){var e=this,i=t.handles&&t.handles!==this.option.handles,o=t.autoHide&&t.autoHide!==this.option.autoHide;return Object.keys(t).forEach((function(i){return e.option[i]=t[i]})),i&&(this._removeHandlers(),this._setupHandlers()),o&&this._setupAutoHide(this.option.autoHide),this},e.prototype._setupAutoHide=function(t){return t?(this.el.classList.add("ui-resizable-autohide"),this.el.addEventListener("mouseover",this._mouseOver),this.el.addEventListener("mouseout",this._mouseOut)):(this.el.classList.remove("ui-resizable-autohide"),this.el.removeEventListener("mouseover",this._mouseOver),this.el.removeEventListener("mouseout",this._mouseOut),l.DDManager.overResizeElement===this&&delete l.DDManager.overResizeElement),this},e.prototype._mouseOver=function(t){l.DDManager.overResizeElement||l.DDManager.dragElement||(l.DDManager.overResizeElement=this,this.el.classList.remove("ui-resizable-autohide"))},e.prototype._mouseOut=function(t){l.DDManager.overResizeElement===this&&(delete l.DDManager.overResizeElement,this.el.classList.add("ui-resizable-autohide"))},e.prototype._setupHandlers=function(){var t=this;return this.handlers=this.option.handles.split(",").map((function(t){return t.trim()})).map((function(e){return new r.DDResizableHandle(t.el,e,{start:function(e){t._resizeStart(e)},stop:function(e){t._resizeStop(e)},move:function(i){t._resizing(i,e)}})})),this},e.prototype._resizeStart=function(t){this.sizeToContent=a.Utils.shouldSizeToContent(this.el.gridstackNode,!0),this.originalRect=this.el.getBoundingClientRect(),this.scrollEl=a.Utils.getScrollElement(this.el),this.scrollY=this.scrollEl.scrollTop,this.scrolled=0,this.startEvent=t,this._setupHelper(),this._applyChange();var e=a.Utils.initEvent(t,{type:"resizestart",target:this.el});return this.option.start&&this.option.start(e,this._ui()),this.el.classList.add("ui-resizable-resizing"),this.triggerEvent("resizestart",e),this},e.prototype._resizing=function(t,e){this.scrolled=this.scrollEl.scrollTop-this.scrollY,this.temporalRect=this._getChange(t,e),this._applyChange();var i=a.Utils.initEvent(t,{type:"resize",target:this.el});return this.option.resize&&this.option.resize(i,this._ui()),this.triggerEvent("resize",i),this},e.prototype._resizeStop=function(t){var e=a.Utils.initEvent(t,{type:"resizestop",target:this.el});return this.option.stop&&this.option.stop(e),this.el.classList.remove("ui-resizable-resizing"),this.triggerEvent("resizestop",e),this._cleanHelper(),delete this.startEvent,delete this.originalRect,delete this.temporalRect,delete this.scrollY,delete this.scrolled,this},e.prototype._setupHelper=function(){var t=this;this.elOriginStyleVal=e._originStyleProp.map((function(e){return t.el.style[e]})),this.parentOriginStylePosition=this.el.parentElement.style.position;var i=this.el.parentElement,o=a.Utils.getValuesFromTransformedElement(i);return this.rectScale={x:o.xScale,y:o.yScale},getComputedStyle(this.el.parentElement).position.match(/static/)&&(this.el.parentElement.style.position="relative"),this.el.style.position="absolute",this.el.style.opacity="0.8",this},e.prototype._cleanHelper=function(){var t=this;return e._originStyleProp.forEach((function(e,i){t.el.style[e]=t.elOriginStyleVal[i]||null})),this.el.parentElement.style.position=this.parentOriginStylePosition||null,this},e.prototype._getChange=function(t,e){var i,o,n=this.startEvent,r={width:this.originalRect.width,height:this.originalRect.height+this.scrolled,left:this.originalRect.left,top:this.originalRect.top-this.scrolled},s=t.clientX-n.clientX,a=this.sizeToContent?0:t.clientY-n.clientY;e.indexOf("e")>-1?r.width+=s:e.indexOf("w")>-1&&(r.width-=s,r.left+=s,i=!0),e.indexOf("s")>-1?r.height+=a:e.indexOf("n")>-1&&(r.height-=a,r.top+=a,o=!0);var l=this._constrainSize(r.width,r.height,i,o);return Math.round(r.width)!==Math.round(l.width)&&(e.indexOf("w")>-1&&(r.left+=r.width-l.width),r.width=l.width),Math.round(r.height)!==Math.round(l.height)&&(e.indexOf("n")>-1&&(r.top+=r.height-l.height),r.height=l.height),r},e.prototype._constrainSize=function(t,e,i,o){var n=this.option,r=(i?n.maxWidthMoveLeft:n.maxWidth)||Number.MAX_SAFE_INTEGER,s=n.minWidth/this.rectScale.x||t,a=(o?n.maxHeightMoveUp:n.maxHeight)||Number.MAX_SAFE_INTEGER,l=n.minHeight/this.rectScale.y||e;return{width:Math.min(r,Math.max(s,t)),height:Math.min(a,Math.max(l,e))}},e.prototype._applyChange=function(){var t,e=this,i={left:0,top:0,width:0,height:0};if("absolute"===this.el.style.position){var o=(t=this.el.parentElement.getBoundingClientRect()).left,n=t.top;i={left:o,top:n,width:0,height:0}}return this.temporalRect?(Object.keys(this.temporalRect).forEach((function(t){var o=e.temporalRect[t],n="width"===t||"left"===t?e.rectScale.x:"height"===t||"top"===t?e.rectScale.y:1;e.el.style[t]=(o-i[t])*n+"px"})),this):this},e.prototype._removeHandlers=function(){return this.handlers.forEach((function(t){return t.destroy()})),delete this.handlers,this},e._originStyleProp=["width","height","position","left","top","opacity","zIndex"],e}(s.DDBaseImplement)},537:function(t,e,i){Object.defineProperty(e,"__esModule",{value:!0}),e.pointerleave=e.pointerenter=e.pointerdown=e.touchend=e.touchmove=e.touchstart=e.isTouch=void 0;var o=i(839);e.isTouch="undefined"!=typeof window&&"undefined"!=typeof document&&("ontouchstart"in document||"ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0);var n=function(){};function r(t,e){if(!(t.touches.length>1)){t.cancelable&&t.preventDefault();var i=t.changedTouches[0],o=document.createEvent("MouseEvents");o.initMouseEvent(e,!0,!0,window,1,i.screenX,i.screenY,i.clientX,i.clientY,!1,!1,!1,!1,0,null),t.target.dispatchEvent(o)}}function s(t,e){t.cancelable&&t.preventDefault();var i=document.createEvent("MouseEvents");i.initMouseEvent(e,!0,!0,window,1,t.screenX,t.screenY,t.clientX,t.clientY,!1,!1,!1,!1,0,null),t.target.dispatchEvent(i)}e.touchstart=function(t){n.touchHandled||(n.touchHandled=!0,r(t,"mousedown"))},e.touchmove=function(t){n.touchHandled&&r(t,"mousemove")},e.touchend=function(t){if(n.touchHandled){n.pointerLeaveTimeout&&(window.clearTimeout(n.pointerLeaveTimeout),delete n.pointerLeaveTimeout);var e=!!o.DDManager.dragElement;r(t,"mouseup"),e||r(t,"click"),n.touchHandled=!1}},e.pointerdown=function(t){"mouse"!==t.pointerType&&t.target.releasePointerCapture(t.pointerId)},e.pointerenter=function(t){o.DDManager.dragElement&&"mouse"!==t.pointerType&&s(t,"mouseenter")},e.pointerleave=function(t){o.DDManager.dragElement&&"mouse"!==t.pointerType&&(n.pointerLeaveTimeout=window.setTimeout((function(){delete n.pointerLeaveTimeout,s(t,"mouseleave")}),10))}},506:function(t,e,i){var o=this&&this.__assign||function(){return o=Object.assign||function(t){for(var e,i=1,o=arguments.length;it.y&&!this.float&&(!this.collide(i,o(o({},i),{y:t.y}),t)||!this.collide(i,o(o({},i),{y:e.y-i.h}),t))?(t._skipDown=t._skipDown||e.y>t.y,d=this.moveNode(t,o(o(o({},e),{y:i.y+i.h}),l)),(i.locked||this._loading)&&d?n.Utils.copyPos(e,t):!i.locked&&d&&r.pack&&(this._packNodes(),e.y=i.y+i.h,n.Utils.copyPos(t,e)),a=a||d):d=this.moveNode(i,o(o(o({},i),{y:e.y+e.h,skip:t}),l)),!d)return a;i=void 0}return a},t.prototype.collide=function(t,e,i){void 0===e&&(e=t);var o=t._id,r=null==i?void 0:i._id;return this.nodes.find((function(t){return t._id!==o&&t._id!==r&&n.Utils.isIntercepted(t,e)}))},t.prototype.collideAll=function(t,e,i){void 0===e&&(e=t);var o=t._id,r=null==i?void 0:i._id;return this.nodes.filter((function(t){return t._id!==o&&t._id!==r&&n.Utils.isIntercepted(t,e)}))},t.prototype.directionCollideCoverage=function(t,e,i){if(e.rect&&t._rect){var n,r=t._rect,s=o({},e.rect);s.y>r.y?(s.h+=s.y-r.y,s.y=r.y):s.h+=r.y-s.y,s.x>r.x?(s.w+=s.x-r.x,s.x=r.x):s.w+=r.x-s.x;for(var a=.5,l=0,d=i;lu.y+u.h&&(c=(u.y+u.h-s.y)/u.h),r.xu.x+u.w&&(p=(u.x+u.w-s.x)/u.w);var g=Math.min(p,c);g>a&&(a=g,n=h)}return e.collide=n,n}},t.prototype.cacheRects=function(t,e,i,o,n,r){return this.nodes.forEach((function(s){return s._rect={y:s.y*e+i,x:s.x*t+r,w:s.w*t-r-o,h:s.h*e-i-n}})),this},t.prototype.swap=function(t,e){if(!e||e.locked||!t||t.locked)return!1;function i(){var i=e.x,o=e.y;return e.x=t.x,e.y=t.y,t.h!=e.h?(t.x=i,t.y=e.y+e.h):t.w!=e.w?(t.x=e.x+e.w,t.y=o):(t.x=i,t.y=o),t._dirty=e._dirty=!0,!0}var o;if(t.w===e.w&&t.h===e.h&&(t.x===e.x||t.y===e.y)&&(o=n.Utils.isTouching(t,e)))return i();if(!1!==o){if(t.w===e.w&&t.x===e.x&&(o||(o=n.Utils.isTouching(t,e)))){if(e.ye._orig.y;)--i,t.collide(e,{x:e.x,y:i,w:e.w,h:e.h})||(e._dirty=!0,e.y=i)})):this.nodes.forEach((function(e,i){if(!e.locked)for(;e.y>0;){var o=0===i?0:e.y-1;if(0!==i&&t.collide(e,{x:e.x,y:o,w:e.w,h:e.h}))break;e._dirty=e.y!==o,e.y=o}}))),this},t.prototype.prepareNode=function(e,i){var o;e._id=null!==(o=e._id)&&void 0!==o?o:t._idSeq++,void 0!==e.x&&void 0!==e.y&&null!==e.x&&null!==e.y||(e.autoPosition=!0);var r={x:0,y:0,w:1,h:1};return n.Utils.defaults(e,r),e.autoPosition||delete e.autoPosition,e.noResize||delete e.noResize,e.noMove||delete e.noMove,n.Utils.sanitizeMinMax(e),"string"==typeof e.x&&(e.x=Number(e.x)),"string"==typeof e.y&&(e.y=Number(e.y)),"string"==typeof e.w&&(e.w=Number(e.w)),"string"==typeof e.h&&(e.h=Number(e.h)),isNaN(e.x)&&(e.x=r.x,e.autoPosition=!0),isNaN(e.y)&&(e.y=r.y,e.autoPosition=!0),isNaN(e.w)&&(e.w=r.w),isNaN(e.h)&&(e.h=r.h),this.nodeBoundFix(e,i),e},t.prototype.nodeBoundFix=function(t,e){var i=t._orig||n.Utils.copyPos({},t);if(t.maxW&&(t.w=Math.min(t.w,t.maxW)),t.maxH&&(t.h=Math.min(t.h,t.maxH)),t.minW&&t.minW<=this.column&&(t.w=Math.max(t.w,t.minW)),t.minH&&(t.h=Math.max(t.h,t.minH)),(t.x||0)+(t.w||1)>this.column&&this.column<12&&!this._inColumnResize&&t._id&&-1===this.findCacheLayout(t,12)){var r=o({},t);r.autoPosition||void 0===r.x?(delete r.x,delete r.y):r.x=Math.min(11,r.x),r.w=Math.min(12,r.w||1),this.cacheOneLayout(r,12)}return t.w>this.column?t.w=this.column:t.w<1&&(t.w=1),this.maxRow&&t.h>this.maxRow?t.h=this.maxRow:t.h<1&&(t.h=1),t.x<0&&(t.x=0),t.y<0&&(t.y=0),t.x+t.w>this.column&&(e?t.w=this.column-t.x:t.x=this.column-t.w),this.maxRow&&t.y+t.h>this.maxRow&&(e?t.h=this.maxRow-t.y:t.y=this.maxRow-t.h),n.Utils.samePos(t,i)||(t._dirty=!0),this},t.prototype.getDirtyNodes=function(t){return t?this.nodes.filter((function(t){return t._dirty&&!n.Utils.samePos(t,t._orig)})):this.nodes.filter((function(t){return t._dirty}))},t.prototype._notify=function(t){if(this.batchMode||!this.onChange)return this;var e=(t||[]).concat(this.getDirtyNodes());return this.onChange(e),this},t.prototype.cleanNodes=function(){return this.batchMode||this.nodes.forEach((function(t){delete t._dirty,delete t._lastTried})),this},t.prototype.saveInitial=function(){return this.nodes.forEach((function(t){t._orig=n.Utils.copyPos({},t),delete t._dirty})),this._hasLocked=this.nodes.some((function(t){return t.locked})),this},t.prototype.restoreInitial=function(){return this.nodes.forEach((function(t){n.Utils.samePos(t,t._orig)||(n.Utils.copyPos(t,t._orig),t._dirty=!0)})),this._notify(),this},t.prototype.findEmptyPosition=function(t,e,i,o){void 0===e&&(e=this.nodes),void 0===i&&(i=this.column);for(var r=o?o.y*i+(o.x+o.w):0,s=!1,a=function(o){var r=o%i,a=Math.floor(o/i);if(r+t.w>i)return"continue";var l={x:r,y:a,w:t.w,h:t.h};e.find((function(t){return n.Utils.isIntercepted(l,t)}))||(t.x===r&&t.y===a||(t._dirty=!0),t.x=r,t.y=a,delete t.autoPosition,s=!0)},l=r;!s;++l)a(l);return s},t.prototype.addNode=function(t,e,i){var o;return void 0===e&&(e=!1),this.nodes.find((function(e){return e._id===t._id}))||(this._inColumnResize?this.nodeBoundFix(t):this.prepareNode(t),delete t._temporaryRemoved,delete t._removeDOM,t.autoPosition&&this.findEmptyPosition(t,this.nodes,this.column,i)&&(delete t.autoPosition,o=!0),this.nodes.push(t),e&&this.addedNodes.push(t),o||this._fixCollisions(t),this.batchMode||this._packNodes()._notify(),t)},t.prototype.removeNode=function(t,e,i){return void 0===e&&(e=!0),void 0===i&&(i=!1),this.nodes.find((function(e){return e._id===t._id}))?(i&&this.removedNodes.push(t),e&&(t._removeDOM=!0),this.nodes=this.nodes.filter((function(e){return e._id!==t._id})),t._isAboutToRemove||this._packNodes(),this._notify([t]),this):this},t.prototype.removeAll=function(t,e){if(void 0===t&&(t=!0),void 0===e&&(e=!0),delete this._layouts,!this.nodes.length)return this;t&&this.nodes.forEach((function(t){return t._removeDOM=!0}));var i=this.nodes;return this.removedNodes=e?i:[],this.nodes=[],this._notify(i)},t.prototype.moveNodeCheck=function(e,i){var r,s=this;if(!this.changedPosConstrain(e,i))return!1;if(i.pack=!0,!this.maxRow)return this.moveNode(e,i);var a=new t({column:this.column,float:this.float,nodes:this.nodes.map((function(t){return t._id===e._id?r=o({},t):o({},t)}))});if(!r)return!1;var l=a.moveNode(r,i)&&a.getRow()<=Math.max(this.getRow(),this.maxRow);if(!l&&!i.resizing&&i.collide){var d=i.collide.el.gridstackNode;if(this.swap(e,d))return this._notify(),!0}return!!l&&(a.nodes.filter((function(t){return t._dirty})).forEach((function(t){var e=s.nodes.find((function(e){return e._id===t._id}));e&&(n.Utils.copyPos(e,t),e._dirty=!0)})),this._notify(),!0)},t.prototype.willItFit=function(e){if(delete e._willFitPos,!this.maxRow)return!0;var i=new t({column:this.column,float:this.float,nodes:this.nodes.map((function(t){return o({},t)}))}),r=o({},e);return this.cleanupNode(r),delete r.el,delete r._id,delete r.content,delete r.grid,i.addNode(r),i.getRow()<=this.maxRow&&(e._willFitPos=n.Utils.copyPos({},r),!0)},t.prototype.changedPosConstrain=function(t,e){return e.w=e.w||t.w,e.h=e.h||t.h,t.x!==e.x||t.y!==e.y||(t.maxW&&(e.w=Math.min(e.w,t.maxW)),t.maxH&&(e.h=Math.min(e.h,t.maxH)),t.minW&&(e.w=Math.max(e.w,t.minW)),t.minH&&(e.h=Math.max(e.h,t.minH)),t.w!==e.w||t.h!==e.h)},t.prototype.moveNode=function(t,e){var i,o,r;if(!t||!e)return!1;void 0!==e.pack||this.batchMode||(r=e.pack=!0),"number"!=typeof e.x&&(e.x=t.x),"number"!=typeof e.y&&(e.y=t.y),"number"!=typeof e.w&&(e.w=t.w),"number"!=typeof e.h&&(e.h=t.h);var s=t.w!==e.w||t.h!==e.h,a=n.Utils.copyPos({},t,!0);if(n.Utils.copyPos(a,e),this.nodeBoundFix(a,s),n.Utils.copyPos(e,a),!e.forceCollide&&n.Utils.samePos(t,e))return!1;var l=n.Utils.copyPos({},t),d=this.collideAll(t,a,e.skip),h=!0;if(d.length){var u=t._moving&&!e.nested,c=u?this.directionCollideCoverage(t,e,d):d[0];if(u&&c&&(null===(o=null===(i=t.grid)||void 0===i?void 0:i.opts)||void 0===o?void 0:o.subGridDynamic)&&!t.grid._isTemp){var p=n.Utils.areaIntercept(e.rect,c._rect),g=n.Utils.area(e.rect),m=n.Utils.area(c._rect);p/(g.8&&(c.grid.makeSubGrid(c.el,void 0,t),c=void 0)}c?h=!this._fixCollisions(t,a,c,e):(h=!1,r&&delete e.pack)}return h&&(t._dirty=!0,n.Utils.copyPos(t,a)),e.pack&&this._packNodes()._notify(),!n.Utils.samePos(t,l)},t.prototype.getRow=function(){return this.nodes.reduce((function(t,e){return Math.max(t,e.y+e.h)}),0)},t.prototype.beginUpdate=function(t){return t._updating||(t._updating=!0,delete t._skipDown,this.batchMode||this.saveInitial()),this},t.prototype.endUpdate=function(){var t=this.nodes.find((function(t){return t._updating}));return t&&(delete t._updating,delete t._skipDown),this},t.prototype.save=function(t,e){var i;void 0===t&&(t=!0);var r=null===(i=this._layouts)||void 0===i?void 0:i.length,s=r&&this.column!==r-1?this._layouts[r-1]:null,a=[];return this.sortNodes(),this.nodes.forEach((function(i){var r=null==s?void 0:s.find((function(t){return t._id===i._id})),l=o(o({},i),r||{});n.Utils.removeInternalForSave(l,!t),e&&e(i,l),a.push(l)})),a},t.prototype.layoutsNodesChange=function(t){var e=this;return!this._layouts||this._inColumnResize||this._layouts.forEach((function(i,o){if(!i||o===e.column)return e;if(o=0&&t.y!==t._orig.y&&(e.y+=t.y-t._orig.y),t.x!==t._orig.x&&(e.x=Math.round(t.x*n)),t.w!==t._orig.w&&(e.w=Math.round(t.w*n)))}}))}})),this},t.prototype.columnChanged=function(t,e,i){var o,r=this;if(void 0===i&&(i="moveScale"),!this.nodes.length||!e||t===e)return this;if("none"===i)return this;var s="compact"===i||"list"===i;s&&this.sortNodes(1),et&&this._layouts){var d=this._layouts[e]||[],h=this._layouts.length-1;!d.length&&t!==h&&(null===(o=this._layouts[h])||void 0===o?void 0:o.length)&&(t=h,this._layouts[h].forEach((function(t){var e,i,o,n=l.find((function(e){return e._id===t._id}));n&&(s||t.autoPosition||(n.x=null!==(e=t.x)&&void 0!==e?e:n.x,n.y=null!==(i=t.y)&&void 0!==i?i:n.y),n.w=null!==(o=t.w)&&void 0!==o?o:n.w,null!=t.x&&void 0!==t.y||(n.autoPosition=!0))}))),d.forEach((function(t){var e,i,o,n=l.findIndex((function(e){return e._id===t._id}));if(-1!==n){var d=l[n];if(s)return void(d.w=t.w);(t.autoPosition||isNaN(t.x)||isNaN(t.y))&&r.findEmptyPosition(t,a),t.autoPosition||(d.x=null!==(e=t.x)&&void 0!==e?e:d.x,d.y=null!==(i=t.y)&&void 0!==i?i:d.y,d.w=null!==(o=t.w)&&void 0!==o?o:d.w,a.push(d)),l.splice(n,1)}}))}if(s)this.compact(i,!1);else{if(l.length)if("function"==typeof i)i(e,t,a,l);else{var u=s?1:e/t,c="move"===i||"moveScale"===i,p="scale"===i||"moveScale"===i;l.forEach((function(i){i.x=1===e?0:c?Math.round(i.x*u):Math.min(i.x,e-1),i.w=1===e||1===t?1:p?Math.round(i.w*u)||1:Math.min(i.w,e),a.push(i)})),l=[]}a=n.Utils.sort(a,-1),this._inColumnResize=!0,this.nodes=[],a.forEach((function(t){r.addNode(t,!1),delete t._orig}))}return this.nodes.forEach((function(t){return delete t._orig})),this.batchUpdate(!1,!s),delete this._inColumnResize,this},t.prototype.cacheLayout=function(e,i,o){var n=this;void 0===o&&(o=!1);var r=[];return e.forEach((function(e,i){var o;if(void 0===e._id){var s=e.id?n.nodes.find((function(t){return t.id===e.id})):void 0;e._id=null!==(o=null==s?void 0:s._id)&&void 0!==o?o:t._idSeq++}r[i]={x:e.x,y:e.y,w:e.w,_id:e._id}})),this._layouts=o?[]:this._layouts||[],this._layouts[i]=r,this},t.prototype.cacheOneLayout=function(e,i){var o;e._id=null!==(o=e._id)&&void 0!==o?o:t._idSeq++;var n={x:e.x,y:e.y,w:e.w,_id:e._id};(e.autoPosition||void 0===e.x)&&(delete n.x,delete n.y,e.autoPosition&&(n.autoPosition=!0)),this._layouts=this._layouts||[],this._layouts[i]=this._layouts[i]||[];var r=this.findCacheLayout(e,i);return-1===r?this._layouts[i].push(n):this._layouts[i][r]=n,this},t.prototype.findCacheLayout=function(t,e){var i,o,n;return null!==(n=null===(o=null===(i=this._layouts)||void 0===i?void 0:i[e])||void 0===o?void 0:o.findIndex((function(e){return e._id===t._id})))&&void 0!==n?n:-1},t.prototype.removeNodeFromLayoutCache=function(t){if(this._layouts)for(var e=0;e1&&m.sort((function(t,e){return(e.w||0)-(t.w||0)}));var b=o(o({},l.Utils.cloneDeep(d.gridDefaults)),{column:l.Utils.toNumber(e.getAttribute("gs-column"))||d.gridDefaults.column,minRow:g||l.Utils.toNumber(e.getAttribute("gs-min-row"))||d.gridDefaults.minRow,maxRow:g||l.Utils.toNumber(e.getAttribute("gs-max-row"))||d.gridDefaults.maxRow,staticGrid:l.Utils.toBool(e.getAttribute("gs-static"))||d.gridDefaults.staticGrid,draggable:{handle:(i.handleClass?"."+i.handleClass:i.handle?i.handle:"")||d.gridDefaults.draggable.handle},removableOptions:{accept:i.itemClass||d.gridDefaults.removableOptions.accept,decline:d.gridDefaults.removableOptions.decline}});e.getAttribute("gs-animate")&&(b.animate=l.Utils.toBool(e.getAttribute("gs-animate"))),i=l.Utils.defaults(i,b),this._initMargin(),this.checkDynamicColumn(),this.el.classList.add("gs-"+i.column),"auto"===i.rtl&&(i.rtl="rtl"===e.style.direction),i.rtl&&this.el.classList.add("grid-stack-rtl");var w=null===(s=this.el.parentElement)||void 0===s?void 0:s.parentElement,E=(null==w?void 0:w.classList.contains(d.gridDefaults.itemClass))?w.gridstackNode:void 0;E&&(E.subGrid=this,this.parentGridItem=E,this.el.classList.add("grid-stack-nested"),E.el.classList.add("grid-stack-sub-grid")),this._isAutoCellHeight="auto"===i.cellHeight,this._isAutoCellHeight||"initial"===i.cellHeight?this.cellHeight(void 0,!1):("number"==typeof i.cellHeight&&i.cellHeightUnit&&i.cellHeightUnit!==d.gridDefaults.cellHeightUnit&&(i.cellHeight=i.cellHeight+i.cellHeightUnit,delete i.cellHeightUnit),this.cellHeight(i.cellHeight,!1)),"mobile"===i.alwaysShowResizeHandle&&(i.alwaysShowResizeHandle=u.isTouch),this._styleSheetClass="gs-id-"+a.GridStackEngine._idSeq++,this.el.classList.add(this._styleSheetClass),this._setStaticClass();var D=i.engineClass||t.engineClass||a.GridStackEngine;if(this.engine=new D({column:this.getColumn(),float:i.float,maxRow:i.maxRow,onChange:function(t){var e=0;p.engine.nodes.forEach((function(t){e=Math.max(e,t.y+t.h)})),t.forEach((function(t){var e=t.el;e&&(t._removeDOM?(e&&e.remove(),delete t._removeDOM):p._writePosAttr(e,t))})),p._updateStyles(!1,e)}}),this._updateStyles(!1,0),i.auto&&(this.batchUpdate(),this.engine._loading=!0,this.getGridItems().forEach((function(t){return p._prepareElement(t)})),delete this.engine._loading,this.batchUpdate(!1)),i.children){var x=i.children;delete i.children,x.length&&this.load(x)}this.setAnimation(),i.subGridDynamic&&!c.DDManager.pauseDrag&&(c.DDManager.pauseDrag=!0),void 0!==(null===(h=i.draggable)||void 0===h?void 0:h.pause)&&(c.DDManager.pauseDrag=i.draggable.pause),this._setupRemoveDrop(),this._setupAcceptWidget(),this._updateResizeEvent()}return t.init=function(e,i){if(void 0===e&&(e={}),void 0===i&&(i=".grid-stack"),"undefined"==typeof document)return null;var o=t.getGridElement(i);return o?(o.gridstack||(o.gridstack=new t(o,l.Utils.cloneDeep(e))),o.gridstack):("string"==typeof i?console.error('GridStack.initAll() no grid was found with selector "'+i+'" - element missing or wrong selector ?\nNote: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.'):console.error("GridStack.init() no grid element was passed."),null)},t.initAll=function(e,i){void 0===e&&(e={}),void 0===i&&(i=".grid-stack");var o=[];return"undefined"==typeof document||(t.getGridElements(i).forEach((function(i){i.gridstack||(i.gridstack=new t(i,l.Utils.cloneDeep(e))),o.push(i.gridstack)})),0===o.length&&console.error('GridStack.initAll() no grid was found with selector "'+i+'" - element missing or wrong selector ?\nNote: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.')),o},t.addGrid=function(e,i){if(void 0===i&&(i={}),!e)return null;var n=e;if(n.gridstack){var r=n.gridstack;return i&&(r.opts=o(o({},r.opts),i)),void 0!==i.children&&r.load(i.children),r}if(!e.classList.contains("grid-stack")||t.addRemoveCB)if(t.addRemoveCB)n=t.addRemoveCB(e,i,!0,!0);else{var s=document.implementation.createHTMLDocument("");s.body.innerHTML='
'),n=s.body.children[0],e.appendChild(n)}return t.init(i,n)},t.registerEngine=function(e){t.engineClass=e},Object.defineProperty(t.prototype,"placeholder",{get:function(){if(!this._placeholder){var t=document.createElement("div");t.className="placeholder-content",this.opts.placeholderText&&(t.innerHTML=this.opts.placeholderText),this._placeholder=document.createElement("div"),this._placeholder.classList.add(this.opts.placeholderClass,d.gridDefaults.itemClass,this.opts.itemClass),this.placeholder.appendChild(t)}return this._placeholder},enumerable:!1,configurable:!0}),t.prototype.addWidget=function(e,i){var o,n,r;if("string"==typeof e)(s=document.implementation.createHTMLDocument("")).body.innerHTML=e,o=s.body.children[0];else if(0===arguments.length||1===arguments.length&&(void 0!==(r=e).el||void 0!==r.x||void 0!==r.y||void 0!==r.w||void 0!==r.h||void 0!==r.content))if(null==(n=i=e)?void 0:n.el)o=n.el;else if(t.addRemoveCB)o=t.addRemoveCB(this.el,i,!0,!1);else{var s,a=(null==i?void 0:i.content)||"";(s=document.implementation.createHTMLDocument("")).body.innerHTML='
').concat(a,"
"),o=s.body.children[0]}else o=e;if(o){if((n=o.gridstackNode)&&o.parentElement===this.el&&this.engine.nodes.find((function(t){return t._id===n._id})))return o;var d=this._readAttr(o);return i=l.Utils.cloneDeep(i)||{},l.Utils.defaults(i,d),n=this.engine.prepareNode(i),this._writeAttr(o,i),this.el.appendChild(o),this.makeWidget(o,i),o}},t.prototype.makeSubGrid=function(e,i,n,r){var s,a,d;void 0===r&&(r=!0);var h,u=e.gridstackNode;if(u||(u=this.makeWidget(e).gridstackNode),null===(s=u.subGrid)||void 0===s?void 0:s.el)return u.subGrid;for(var c,p=this;p&&!h;)h=null===(a=p.opts)||void 0===a?void 0:a.subGridOpts,p=null===(d=p.parentGridItem)||void 0===d?void 0:d.grid;i=l.Utils.cloneDeep(o(o(o({},h||{}),{children:void 0}),i||u.subGridOpts||{})),u.subGridOpts=i,"auto"===i.column&&(c=!0,i.column=Math.max(u.w||1,(null==n?void 0:n.w)||1),delete i.columnOpts);var g,m,f=u.el.querySelector(".grid-stack-item-content");if(r){if(this._removeDD(u.el),m=o(o({},u),{x:0,y:0}),l.Utils.removeInternalForSave(m),delete m.subGridOpts,u.content&&(m.content=u.content,delete u.content),t.addRemoveCB)g=t.addRemoveCB(this.el,m,!0,!1);else{var v=document.implementation.createHTMLDocument("");v.body.innerHTML='
',(g=v.body.children[0]).appendChild(f),v.body.innerHTML='
',f=v.body.children[0],u.el.appendChild(f)}this._prepareDragDropByNode(u)}if(n){var y=c?i.column:u.w,_=u.h+n.h,b=u.el.style;b.transition="none",this.update(u.el,{w:y,h:_}),setTimeout((function(){return b.transition=null}))}var w=u.subGrid=t.addGrid(f,i);return(null==n?void 0:n._moving)&&(w._isTemp=!0),c&&(w._autoColumn=!0),r&&w.addWidget(g,m),n&&(n._moving?window.setTimeout((function(){return l.Utils.simulateMouseEvent(n._event,"mouseenter",w.el)}),0):w.addWidget(u.el,u)),w},t.prototype.removeAsSubGrid=function(t){var e,i=this,o=null===(e=this.parentGridItem)||void 0===e?void 0:e.grid;o&&(o.batchUpdate(),o.removeWidget(this.parentGridItem.el,!0,!0),this.engine.nodes.forEach((function(t){t.x+=i.parentGridItem.x,t.y+=i.parentGridItem.y,o.addWidget(t.el,t)})),o.batchUpdate(!1),this.parentGridItem&&delete this.parentGridItem.subGrid,delete this.parentGridItem,t&&window.setTimeout((function(){return l.Utils.simulateMouseEvent(t._event,"mouseenter",o.el)}),0))},t.prototype.save=function(e,i,o){void 0===e&&(e=!0),void 0===i&&(i=!1),void 0===o&&(o=t.saveCB);var n=this.engine.save(e,o);if(n.forEach((function(t){var n;if(e&&t.el&&!t.subGrid&&!o){var r=t.el.querySelector(".grid-stack-item-content");t.content=r?r.innerHTML:void 0,t.content||delete t.content}else if(e||o||delete t.content,null===(n=t.subGrid)||void 0===n?void 0:n.el){var s=t.subGrid.save(e,i,o);t.subGridOpts=i?s:{children:s},delete t.subGrid}delete t.el})),i){var r=l.Utils.cloneDeep(this.opts);r.marginBottom===r.marginTop&&r.marginRight===r.marginLeft&&r.marginTop===r.marginRight&&(r.margin=r.marginTop,delete r.marginTop,delete r.marginRight,delete r.marginBottom,delete r.marginLeft),r.rtl===("rtl"===this.el.style.direction)&&(r.rtl="auto"),this._isAutoCellHeight&&(r.cellHeight="auto"),this._autoColumn&&(r.column="auto");var s=r._alwaysShowResizeHandle;return delete r._alwaysShowResizeHandle,void 0!==s?r.alwaysShowResizeHandle=s:delete r.alwaysShowResizeHandle,l.Utils.removeInternalAndSame(r,d.gridDefaults),r.children=n,r}return n},t.prototype.load=function(e,i){var n,r=this;void 0===i&&(i=t.addRemoveCB||!0),e=l.Utils.cloneDeep(e);var a=this.getColumn();e.forEach((function(t){t.w=t.w||1,t.h=t.h||1})),e=l.Utils.sort(e);var d=0;e.forEach((function(t){d=Math.max(d,(t.x||0)+t.w)})),d>a&&(this._ignoreLayoutsNodeChange=!0,this.engine.cacheLayout(e,d,!0));var h=t.addRemoveCB;"function"==typeof i&&(t.addRemoveCB=i);var u=[];this.batchUpdate();var c=!this.engine.nodes.length;c&&this.setAnimation(!1),!c&&i&&s([],this.engine.nodes,!0).forEach((function(i){i.id&&(l.Utils.find(e,i.id)||(t.addRemoveCB&&t.addRemoveCB(r.el,i,!1,!1),u.push(i),r.removeWidget(i.el,!0,!1)))})),this.engine._loading=!0;var p=[];return this.engine.nodes=this.engine.nodes.filter((function(t){return!l.Utils.find(e,t.id)||(p.push(t),!1)})),e.forEach((function(t){var e,n=l.Utils.find(p,t.id);if(n){if(l.Utils.shouldSizeToContent(n)&&(t.h=n.h),r.engine.nodeBoundFix(t),(t.autoPosition||void 0===t.x||void 0===t.y)&&(t.w=t.w||n.w,t.h=t.h||n.h,r.engine.findEmptyPosition(t)),r.engine.nodes.push(n),l.Utils.samePos(n,t)&&r.moveNode(n,o(o({},t),{forceCollide:!0})),r.update(n.el,t),null===(e=t.subGridOpts)||void 0===e?void 0:e.children){var s=n.el.querySelector(".grid-stack");s&&s.gridstack&&s.gridstack.load(t.subGridOpts.children)}}else i&&r.addWidget(t)})),delete this.engine._loading,this.engine.removedNodes=u,this.batchUpdate(!1),delete this._ignoreLayoutsNodeChange,h?t.addRemoveCB=h:delete t.addRemoveCB,c&&(null===(n=this.opts)||void 0===n?void 0:n.animate)&&this.setAnimation(this.opts.animate,!0),this},t.prototype.batchUpdate=function(t){return void 0===t&&(t=!0),this.engine.batchUpdate(t),t||(this._updateContainerHeight(),this._triggerRemoveEvent(),this._triggerAddEvent(),this._triggerChangeEvent()),this},t.prototype.getCellHeight=function(t){if(void 0===t&&(t=!1),this.opts.cellHeight&&"auto"!==this.opts.cellHeight&&(!t||!this.opts.cellHeightUnit||"px"===this.opts.cellHeightUnit))return this.opts.cellHeight;if("rem"===this.opts.cellHeightUnit)return this.opts.cellHeight*parseFloat(getComputedStyle(document.documentElement).fontSize);if("em"===this.opts.cellHeightUnit)return this.opts.cellHeight*parseFloat(getComputedStyle(this.el).fontSize);if("cm"===this.opts.cellHeightUnit)return this.opts.cellHeight*(96/2.54);if("mm"===this.opts.cellHeightUnit)return this.opts.cellHeight*(96/2.54)/10;var e=this.el.querySelector("."+this.opts.itemClass);if(e){var i=l.Utils.toNumber(e.getAttribute("gs-h"))||1;return Math.round(e.offsetHeight/i)}var o=parseInt(this.el.getAttribute("gs-current-row"));return o?Math.round(this.el.getBoundingClientRect().height/o):this.opts.cellHeight},t.prototype.cellHeight=function(t,e){if(void 0===e&&(e=!0),e&&void 0!==t&&this._isAutoCellHeight!==("auto"===t)&&(this._isAutoCellHeight="auto"===t,this._updateResizeEvent()),"initial"!==t&&"auto"!==t||(t=void 0),void 0===t){var i=-this.opts.marginRight-this.opts.marginLeft+this.opts.marginTop+this.opts.marginBottom;t=this.cellWidth()+i}var o=l.Utils.parseHeight(t);return this.opts.cellHeightUnit===o.unit&&this.opts.cellHeight===o.h||(this.opts.cellHeightUnit=o.unit,this.opts.cellHeight=o.h,this.resizeToContentCheck(),e&&this._updateStyles(!0)),this},t.prototype.cellWidth=function(){return this._widthOrContainer()/this.getColumn()},t.prototype._widthOrContainer=function(t){var e;return void 0===t&&(t=!1),t&&(null===(e=this.opts.columnOpts)||void 0===e?void 0:e.breakpointForWindow)?window.innerWidth:this.el.clientWidth||this.el.parentElement.clientWidth||window.innerWidth},t.prototype.checkDynamicColumn=function(){var t,e,i=this.opts.columnOpts;if(!i||!i.columnWidth&&!(null===(t=i.breakpoints)||void 0===t?void 0:t.length))return!1;var o=this.getColumn(),n=o,r=this._widthOrContainer(!0);if(i.columnWidth)n=Math.min(Math.round(r/i.columnWidth)||1,i.columnMax);else{n=i.columnMax;for(var s=0;s2){console.warn("gridstack.ts: `update(el, x, y, w, h)` is deprecated. Use `update(el, {x, w, content, ...})`. It will be removed soon");var n=arguments,r=1;return i={x:n[r++],y:n[r++],w:n[r++],h:n[r++]},this.update(e,i)}return t.getElements(e).forEach((function(t){var e,n=null==t?void 0:t.gridstackNode;if(n){var r=l.Utils.cloneDeep(i);o.engine.nodeBoundFix(r),delete r.autoPosition,delete r.id;var s,a=["x","y","w","h"];if(a.some((function(t){return void 0!==r[t]&&r[t]!==n[t]}))&&(s={},a.forEach((function(t){s[t]=void 0!==r[t]?r[t]:n[t],delete r[t]}))),!s&&(r.minW||r.minH||r.maxW||r.maxH)&&(s={}),void 0!==r.content){var d=t.querySelector(".grid-stack-item-content");d&&d.innerHTML!==r.content&&(d.innerHTML=r.content,(null===(e=n.subGrid)||void 0===e?void 0:e.el)&&(d.appendChild(n.subGrid.el),n.subGrid.opts.styleInHead||n.subGrid._updateStyles(!0))),delete r.content}var h=!1,u=!1;for(var c in r)"_"!==c[0]&&n[c]!==r[c]&&(n[c]=r[c],h=!0,u=u||!o.opts.staticGrid&&("noResize"===c||"noMove"===c||"locked"===c));if(l.Utils.sanitizeMinMax(n),s){var p=void 0!==s.w&&s.w!==n.w;o.moveNode(n,s),o.resizeToContentCheck(p,n),delete n._orig}(s||h)&&o._writeAttr(t,n),u&&o._prepareDragDropByNode(n)}})),this},t.prototype.moveNode=function(t,e){var i=t._updating;i||this.engine.cleanNodes().beginUpdate(t),this.engine.moveNode(t,e),this._updateContainerHeight(),i||(this._triggerChangeEvent(),this.engine.endUpdate())},t.prototype.resizeToContent=function(e){var i,o;if(e&&(e.classList.remove("size-to-content-max"),e.clientHeight)){var n=e.gridstackNode;if(n){var r=n.grid;if(r&&e.parentElement===r.el){var s=r.getCellHeight(!0);if(s){var a,l=n.h?n.h*s:e.clientHeight;if(n.resizeToContentParent&&(a=e.querySelector(n.resizeToContentParent)),a||(a=e.querySelector(t.resizeToContentParent)),a){var d,h=e.clientHeight-a.clientHeight,u=n.h?n.h*s-h:a.clientHeight;if(n.subGrid)d=n.subGrid.getRow()*n.subGrid.getCellHeight(!0);else{if(null===(o=null===(i=n.subGridOpts)||void 0===i?void 0:i.children)||void 0===o?void 0:o.length)return;var c=a.firstElementChild;if(!c)return void console.error("Error: GridStack.resizeToContent() widget id:".concat(n.id," '").concat(t.resizeToContentParent,"'.firstElementChild is null, make sure to have a div like container. Skipping sizing."));d=c.getBoundingClientRect().height||u}if(u!==d){l+=d-u;var p=Math.ceil(l/s),g=Number.isInteger(n.sizeToContent)?n.sizeToContent:0;g&&p>g&&(p=g,e.classList.add("size-to-content-max")),n.minH&&pn.maxH&&(p=n.maxH),p!==n.h&&(r._ignoreLayoutsNodeChange=!0,r.moveNode(n,{h:p}),delete r._ignoreLayoutsNodeChange)}}}}}}},t.prototype.resizeToContentCBCheck=function(e){t.resizeToContentCB?t.resizeToContentCB(e):this.resizeToContent(e)},t.prototype.rotate=function(e,i){var o=this;return t.getElements(e).forEach((function(t){var e=t.gridstackNode;if(l.Utils.canBeRotated(e)){var n={w:e.h,h:e.w,minH:e.minW,minW:e.minH,maxH:e.maxW,maxW:e.maxH};if(i){var r=i.left>0?Math.floor(i.left/o.cellWidth()):0,s=i.top>0?Math.floor(i.top/o.opts.cellHeight):0;n.x=e.x+r-(e.h-(s+1)),n.y=e.y+s-r}Object.keys(n).forEach((function(t){void 0===n[t]&&delete n[t]}));var a=e._orig;o.update(t,n),e._orig=a}})),this},t.prototype.margin=function(t){if(!("string"==typeof t&&t.split(" ").length>1)){var e=l.Utils.parseHeight(t);if(this.opts.marginUnit===e.unit&&this.opts.margin===e.h)return}return this.opts.margin=t,this.opts.marginTop=this.opts.marginBottom=this.opts.marginLeft=this.opts.marginRight=void 0,this._initMargin(),this._updateStyles(!0),this},t.prototype.getMargin=function(){return this.opts.margin},t.prototype.willItFit=function(t){if(arguments.length>1){console.warn("gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon");var e=arguments,i=0,o={x:e[i++],y:e[i++],w:e[i++],h:e[i++],autoPosition:e[i++]};return this.willItFit(o)}return this.engine.willItFit(t)},t.prototype._triggerChangeEvent=function(){if(this.engine.batchMode)return this;var t=this.engine.getDirtyNodes(!0);return t&&t.length&&(this._ignoreLayoutsNodeChange||this.engine.layoutsNodesChange(t),this._triggerEvent("change",t)),this.engine.saveInitial(),this},t.prototype._triggerAddEvent=function(){var t;if(this.engine.batchMode)return this;if(null===(t=this.engine.addedNodes)||void 0===t?void 0:t.length){this._ignoreLayoutsNodeChange||this.engine.layoutsNodesChange(this.engine.addedNodes),this.engine.addedNodes.forEach((function(t){delete t._dirty}));var e=s([],this.engine.addedNodes,!0);this.engine.addedNodes=[],this._triggerEvent("added",e)}return this},t.prototype._triggerRemoveEvent=function(){var t;if(this.engine.batchMode)return this;if(null===(t=this.engine.removedNodes)||void 0===t?void 0:t.length){var e=s([],this.engine.removedNodes,!0);this.engine.removedNodes=[],this._triggerEvent("removed",e)}return this},t.prototype._triggerEvent=function(t,e){var i=e?new CustomEvent(t,{bubbles:!1,detail:e}):new Event(t);return this.el.dispatchEvent(i),this},t.prototype._removeStylesheet=function(){if(this._styles){var t=this.opts.styleInHead?void 0:this.el.parentNode;l.Utils.removeStylesheet(this._styleSheetClass,t),delete this._styles}return this},t.prototype._updateStyles=function(t,e){if(void 0===t&&(t=!1),t&&this._removeStylesheet(),void 0===e&&(e=this.getRow()),this._updateContainerHeight(),0===this.opts.cellHeight)return this;var i=this.opts.cellHeight,o=this.opts.cellHeightUnit,n=".".concat(this._styleSheetClass," > .").concat(this.opts.itemClass);if(!this._styles){var r=this.opts.styleInHead?void 0:this.el.parentNode;if(this._styles=l.Utils.createStylesheet(this._styleSheetClass,r,{nonce:this.opts.nonce}),!this._styles)return this;this._styles._max=0,l.Utils.addCSSRule(this._styles,n,"height: ".concat(i).concat(o));var s=this.opts.marginTop+this.opts.marginUnit,a=this.opts.marginBottom+this.opts.marginUnit,d=this.opts.marginRight+this.opts.marginUnit,h=this.opts.marginLeft+this.opts.marginUnit,u="".concat(n," > .grid-stack-item-content"),c=".".concat(this._styleSheetClass," > .grid-stack-placeholder > .placeholder-content");l.Utils.addCSSRule(this._styles,u,"top: ".concat(s,"; right: ").concat(d,"; bottom: ").concat(a,"; left: ").concat(h,";")),l.Utils.addCSSRule(this._styles,c,"top: ".concat(s,"; right: ").concat(d,"; bottom: ").concat(a,"; left: ").concat(h,";")),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-n"),"top: ".concat(s,";")),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-s"),"bottom: ".concat(a)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-ne"),"right: ".concat(d)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-e"),"right: ".concat(d)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-se"),"right: ".concat(d,"; bottom: ").concat(a)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-nw"),"left: ".concat(h)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-w"),"left: ".concat(h)),l.Utils.addCSSRule(this._styles,"".concat(n," > .ui-resizable-sw"),"left: ".concat(h,"; bottom: ").concat(a))}if((e=e||this._styles._max)>this._styles._max){for(var p=function(t){return i*t+o},g=this._styles._max+1;g<=e;g++)l.Utils.addCSSRule(this._styles,"".concat(n,'[gs-y="').concat(g,'"]'),"top: ".concat(p(g))),l.Utils.addCSSRule(this._styles,"".concat(n,'[gs-h="').concat(g+1,'"]'),"height: ".concat(p(g+1)));this._styles._max=e}return this},t.prototype._updateContainerHeight=function(){if(!this.engine||this.engine.batchMode)return this;var t=this.parentGridItem,e=this.getRow()+this._extraDragRow,i=this.opts.cellHeight,o=this.opts.cellHeightUnit;if(!i)return this;if(!t){var n=l.Utils.parseHeight(getComputedStyle(this.el).minHeight);if(n.h>0&&n.unit===o){var r=Math.floor(n.h/i);e1?t.setAttribute("gs-w",String(e.w)):t.removeAttribute("gs-w"),e.h>1?t.setAttribute("gs-h",String(e.h)):t.removeAttribute("gs-h"),this},t.prototype._writeAttr=function(t,e){if(!e)return this;this._writePosAttr(t,e);var i={autoPosition:"gs-auto-position",noResize:"gs-no-resize",noMove:"gs-no-move",locked:"gs-locked",id:"gs-id"};for(var o in i)e[o]?t.setAttribute(i[o],String(e[o])):t.removeAttribute(i[o]);return this},t.prototype._readAttr=function(t,e){void 0===e&&(e=!0);var i={};for(var o in i.x=l.Utils.toNumber(t.getAttribute("gs-x")),i.y=l.Utils.toNumber(t.getAttribute("gs-y")),i.w=l.Utils.toNumber(t.getAttribute("gs-w")),i.h=l.Utils.toNumber(t.getAttribute("gs-h")),i.autoPosition=l.Utils.toBool(t.getAttribute("gs-auto-position")),i.noResize=l.Utils.toBool(t.getAttribute("gs-no-resize")),i.noMove=l.Utils.toBool(t.getAttribute("gs-no-move")),i.locked=l.Utils.toBool(t.getAttribute("gs-locked")),i.id=t.getAttribute("gs-id"),i.maxW=l.Utils.toNumber(t.getAttribute("gs-max-w")),i.minW=l.Utils.toNumber(t.getAttribute("gs-min-w")),i.maxH=l.Utils.toNumber(t.getAttribute("gs-max-h")),i.minH=l.Utils.toNumber(t.getAttribute("gs-min-h")),e&&(1===i.w&&t.removeAttribute("gs-w"),1===i.h&&t.removeAttribute("gs-h"),i.maxW&&t.removeAttribute("gs-max-w"),i.minW&&t.removeAttribute("gs-min-w"),i.maxH&&t.removeAttribute("gs-max-h"),i.minH&&t.removeAttribute("gs-min-h")),i){if(!i.hasOwnProperty(o))return;i[o]||0===i[o]||delete i[o]}return i},t.prototype._setStaticClass=function(){var t,e,i=["grid-stack-static"];return this.opts.staticGrid?((t=this.el.classList).add.apply(t,i),this.el.setAttribute("gs-static","true")):((e=this.el.classList).remove.apply(e,i),this.el.removeAttribute("gs-static")),this},t.prototype.onResize=function(){var t;if((null===(t=this.el)||void 0===t?void 0:t.clientWidth)&&this.prevWidth!==this.el.clientWidth){this.prevWidth=this.el.clientWidth,this.batchUpdate();var e=!1;return this._autoColumn&&this.parentGridItem?this.opts.column!==this.parentGridItem.w&&(this.column(this.parentGridItem.w,"none"),e=!0):e=this.checkDynamicColumn(),this._isAutoCellHeight&&this.cellHeight(),this.engine.nodes.forEach((function(t){t.subGrid&&t.subGrid.onResize()})),this._skipInitialResize||this.resizeToContentCheck(e),delete this._skipInitialResize,this.batchUpdate(!1),this}},t.prototype.resizeToContentCheck=function(t,e){var i=this;if(void 0===t&&(t=!1),void 0===e&&(e=void 0),this.engine){if(t&&this.hasAnimationCSS())return setTimeout((function(){return i.resizeToContentCheck(!1,e)}),310);if(e)l.Utils.shouldSizeToContent(e)&&this.resizeToContentCBCheck(e.el);else if(this.engine.nodes.some((function(t){return l.Utils.shouldSizeToContent(t)}))){var o=s([],this.engine.nodes,!0);this.batchUpdate(),o.forEach((function(t){l.Utils.shouldSizeToContent(t)&&i.resizeToContentCBCheck(t.el)})),this.batchUpdate(!1)}this._gsEventHandler.resizecontent&&this._gsEventHandler.resizecontent(null,e?[e]:this.engine.nodes)}},t.prototype._updateResizeEvent=function(t){var e=this;void 0===t&&(t=!1);var i=!this.parentGridItem&&(this._isAutoCellHeight||this.opts.sizeToContent||this.opts.columnOpts||this.engine.nodes.find((function(t){return t.sizeToContent})));return t||!i||this.resizeObserver?!t&&i||!this.resizeObserver||(this.resizeObserver.disconnect(),delete this.resizeObserver,delete this._sizeThrottle):(this._sizeThrottle=l.Utils.throttle((function(){return e.onResize()}),this.opts.cellHeightThrottle),this.resizeObserver=new ResizeObserver((function(){return e._sizeThrottle()})),this.resizeObserver.observe(this.el),this._skipInitialResize=!0),this},t.getElement=function(t){return void 0===t&&(t=".grid-stack-item"),l.Utils.getElement(t)},t.getElements=function(t){return void 0===t&&(t=".grid-stack-item"),l.Utils.getElements(t)},t.getGridElement=function(e){return t.getElement(e)},t.getGridElements=function(t){return l.Utils.getElements(t)},t.prototype._initMargin=function(){var t,e=0,i=[];return"string"==typeof this.opts.margin&&(i=this.opts.margin.split(" ")),2===i.length?(this.opts.marginTop=this.opts.marginBottom=i[0],this.opts.marginLeft=this.opts.marginRight=i[1]):4===i.length?(this.opts.marginTop=i[0],this.opts.marginRight=i[1],this.opts.marginBottom=i[2],this.opts.marginLeft=i[3]):(t=l.Utils.parseHeight(this.opts.margin),this.opts.marginUnit=t.unit,e=this.opts.margin=t.h),void 0===this.opts.marginTop?this.opts.marginTop=e:(t=l.Utils.parseHeight(this.opts.marginTop),this.opts.marginTop=t.h,delete this.opts.margin),void 0===this.opts.marginBottom?this.opts.marginBottom=e:(t=l.Utils.parseHeight(this.opts.marginBottom),this.opts.marginBottom=t.h,delete this.opts.margin),void 0===this.opts.marginRight?this.opts.marginRight=e:(t=l.Utils.parseHeight(this.opts.marginRight),this.opts.marginRight=t.h,delete this.opts.margin),void 0===this.opts.marginLeft?this.opts.marginLeft=e:(t=l.Utils.parseHeight(this.opts.marginLeft),this.opts.marginLeft=t.h,delete this.opts.margin),this.opts.marginUnit=t.unit,this.opts.marginTop===this.opts.marginBottom&&this.opts.marginLeft===this.opts.marginRight&&this.opts.marginTop===this.opts.marginRight&&(this.opts.margin=this.opts.marginTop),this},t.getDD=function(){return p},t.setupDragIn=function(t,e,i){void 0===i&&(i=document),void 0!==(null==e?void 0:e.pause)&&(c.DDManager.pauseDrag=e.pause),e=o(o({},d.dragInDefaultOptions),e||{});var n="string"==typeof t?l.Utils.getElements(t,i):t;n.length&&(null==n||n.forEach((function(t){p.isDraggable(t)||p.dragIn(t,e)})))},t.prototype.movable=function(e,i){var o=this;return this.opts.staticGrid||t.getElements(e).forEach((function(t){var e=t.gridstackNode;e&&(i?delete e.noMove:e.noMove=!0,o._prepareDragDropByNode(e))})),this},t.prototype.resizable=function(e,i){var o=this;return this.opts.staticGrid||t.getElements(e).forEach((function(t){var e=t.gridstackNode;e&&(i?delete e.noResize:e.noResize=!0,o._prepareDragDropByNode(e))})),this},t.prototype.disable=function(t){if(void 0===t&&(t=!0),!this.opts.staticGrid)return this.enableMove(!1,t),this.enableResize(!1,t),this._triggerEvent("disable"),this},t.prototype.enable=function(t){if(void 0===t&&(t=!0),!this.opts.staticGrid)return this.enableMove(!0,t),this.enableResize(!0,t),this._triggerEvent("enable"),this},t.prototype.enableMove=function(t,e){var i=this;return void 0===e&&(e=!0),this.opts.staticGrid||(t?delete this.opts.disableDrag:this.opts.disableDrag=!0,this.engine.nodes.forEach((function(o){i._prepareDragDropByNode(o),o.subGrid&&e&&o.subGrid.enableMove(t,e)}))),this},t.prototype.enableResize=function(t,e){var i=this;return void 0===e&&(e=!0),this.opts.staticGrid||(t?delete this.opts.disableResize:this.opts.disableResize=!0,this.engine.nodes.forEach((function(o){i._prepareDragDropByNode(o),o.subGrid&&e&&o.subGrid.enableResize(t,e)}))),this},t.prototype._removeDD=function(t){return p.draggable(t,"destroy").resizable(t,"destroy"),t.gridstackNode&&delete t.gridstackNode._initDD,delete t.ddElement,this},t.prototype._setupAcceptWidget=function(){var e,i,n=this;if(this.opts.staticGrid||!this.opts.acceptWidgets&&!this.opts.removable)return p.droppable(this.el,"destroy"),this;var r=function(t,o,r){var s,a,d=o.gridstackNode;if(d){if(r=r||o,!(null===(a=d.grid)||void 0===a?void 0:a.el)){r.style.transform="scale(".concat(1/n.dragTransform.xScale,",").concat(1/n.dragTransform.yScale,")");var h=r.getBoundingClientRect();r.style.left=h.x+(n.dragTransform.xScale-1)*(t.clientX-h.x)/n.dragTransform.xScale+"px",r.style.top=h.y+(n.dragTransform.yScale-1)*(t.clientY-h.y)/n.dragTransform.yScale+"px",r.style.transformOrigin="0px 0px"}var u=n.el.getBoundingClientRect(),c=(s=r.getBoundingClientRect()).top,g=s.left;g-=u.left;var m={position:{top:(c-=u.top)*n.dragTransform.xScale,left:g*n.dragTransform.yScale}};if(d._temporaryRemoved){if(d.x=Math.max(0,Math.round(g/i)),d.y=Math.max(0,Math.round(c/e)),delete d.autoPosition,n.engine.nodeBoundFix(d),!n.engine.willItFit(d)){if(d.autoPosition=!0,!n.engine.willItFit(d))return void p.off(o,"drag");d._willFitPos&&(l.Utils.copyPos(d,d._willFitPos),delete d._willFitPos)}n._onStartMoving(r,t,m,d,i,e)}else n._dragOrResize(r,t,m,d,i,e)}};return p.droppable(this.el,{accept:function(t){var e=t.gridstackNode||n._readAttr(t,!1);if((null==e?void 0:e.grid)===n)return!0;if(!n.opts.acceptWidgets)return!1;var i=!0;if("function"==typeof n.opts.acceptWidgets)i=n.opts.acceptWidgets(t);else{var o=!0===n.opts.acceptWidgets?".grid-stack-item":n.opts.acceptWidgets;i=t.matches(o)}if(i&&e&&n.opts.maxRow){var r={w:e.w,h:e.h,minW:e.minW,minH:e.minH};i=n.engine.willItFit(r)}return i}}).on(this.el,"dropover",(function(s,a,l){var d=a.gridstackNode;if((null==d?void 0:d.grid)===n&&!d._temporaryRemoved)return!1;(null==d?void 0:d.grid)&&d.grid!==n&&!d._temporaryRemoved&&d.grid._leave(a,l),i=n.cellWidth(),e=n.getCellHeight(!0),d||(d=n._readAttr(a,!1)),d.grid||(d._isExternal=!0,a.gridstackNode=d),l=l||a;var h=d.w||Math.round(l.offsetWidth/i)||1,u=d.h||Math.round(l.offsetHeight/e)||1;return d.grid&&d.grid!==n?(a._gridstackNodeOrig||(a._gridstackNodeOrig=d),a.gridstackNode=d=o(o({},d),{w:h,h:u,grid:n}),delete d.x,delete d.y,n.engine.cleanupNode(d).nodeBoundFix(d),d._initDD=d._isExternal=d._temporaryRemoved=!0):(d.w=h,d.h=u,d._temporaryRemoved=!0),t._itemRemoving(d.el,!1),p.on(a,"drag",r),r(s,a,l),!1})).on(this.el,"dropout",(function(t,e,i){var o=e.gridstackNode;return!!o&&(o.grid&&o.grid!==n||(n._leave(e,i),n._isTemp&&n.removeAsSubGrid(o)),!1)})).on(this.el,"drop",(function(t,e,i){var r,s,a,d=e.gridstackNode;if((null==d?void 0:d.grid)===n&&!d._isExternal)return!1;var h=!!n.placeholder.parentElement;n.placeholder.remove();var u=h&&n.opts.animate;u&&n.setAnimation(!1);var c=e._gridstackNodeOrig;if(delete e._gridstackNodeOrig,h&&(null==c?void 0:c.grid)&&c.grid!==n){var g=c.grid;g.engine.removeNodeFromLayoutCache(c),g.engine.removedNodes.push(c),g._triggerRemoveEvent()._triggerChangeEvent(),g.parentGridItem&&!g.engine.nodes.length&&g.opts.subGridDynamic&&g.removeAsSubGrid()}if(!d)return!1;if(h&&(n.engine.cleanupNode(d),d.grid=n),null===(r=d.grid)||void 0===r||delete r._isTemp,p.off(e,"drag"),i!==e?(i.remove(),e.gridstackNode=c,h&&(e=e.cloneNode(!0))):(e.remove(),n._removeDD(e)),!h)return!1;e.gridstackNode=d,d.el=e;var m=null===(a=null===(s=d.subGrid)||void 0===s?void 0:s.el)||void 0===a?void 0:a.gridstack;return l.Utils.copyPos(d,n._readAttr(n.placeholder)),l.Utils.removePositioningStyles(e),n.el.appendChild(e),n._prepareElement(e,!0,d),m&&(m.parentGridItem=d,m.opts.styleInHead||m._updateStyles(!0)),n._updateContainerHeight(),n.engine.addedNodes.push(d),n._triggerAddEvent(),n._triggerChangeEvent(),n.engine.endUpdate(),n._gsEventHandler.dropped&&n._gsEventHandler.dropped(o(o({},t),{type:"dropped"}),c&&c.grid?c:void 0,d),u&&n.setAnimation(n.opts.animate,!0),!1})),this},t._itemRemoving=function(t,e){var i=t?t.gridstackNode:void 0;(null==i?void 0:i.grid)&&!t.classList.contains(i.grid.opts.removableOptions.decline)&&(e?i._isAboutToRemove=!0:delete i._isAboutToRemove,e?t.classList.add("grid-stack-item-removing"):t.classList.remove("grid-stack-item-removing"))},t.prototype._setupRemoveDrop=function(){if("string"!=typeof this.opts.removable)return this;var e=document.querySelector(this.opts.removable);return e?(this.opts.staticGrid||p.isDroppable(e)||p.droppable(e,this.opts.removableOptions).on(e,"dropover",(function(e,i){return t._itemRemoving(i,!0)})).on(e,"dropout",(function(e,i){return t._itemRemoving(i,!1)})),this):this},t.prototype._prepareDragDropByNode=function(t){var e=this,i=t.el,o=t.noMove||this.opts.disableDrag,n=t.noResize||this.opts.disableResize;if(this.opts.staticGrid||o&&n)return t._initDD&&(this._removeDD(i),delete t._initDD),i.classList.add("ui-draggable-disabled","ui-resizable-disabled"),this;if(!t._initDD){var r,s,a=function(o,n){e._gsEventHandler[o.type]&&e._gsEventHandler[o.type](o,o.target),r=e.cellWidth(),s=e.getCellHeight(!0),e._onStartMoving(i,o,n,t,r,s)},d=function(o,n){e._dragOrResize(i,o,n,t,r,s)},h=function(o){e.placeholder.remove(),delete t._moving,delete t._event,delete t._lastTried;var n=t.w!==t._orig.w,r=o.target;if(r.gridstackNode&&r.gridstackNode.grid===e){if(t.el=r,t._isAboutToRemove){var s=i.gridstackNode.grid;s._gsEventHandler[o.type]&&s._gsEventHandler[o.type](o,r),s.engine.nodes.push(t),s.removeWidget(i,!0,!0)}else l.Utils.removePositioningStyles(r),t._temporaryRemoved?(l.Utils.copyPos(t,t._orig),e._writePosAttr(r,t),e.engine.addNode(t)):e._writePosAttr(r,t),e._gsEventHandler[o.type]&&e._gsEventHandler[o.type](o,r);e._extraDragRow=0,e._updateContainerHeight(),e._triggerChangeEvent(),e.engine.endUpdate(),"resizestop"===o.type&&(Number.isInteger(t.sizeToContent)&&(t.sizeToContent=t.h),e.resizeToContentCheck(n,t))}};p.draggable(i,{start:a,stop:h,drag:d}).resizable(i,{start:a,stop:h,resize:d}),t._initDD=!0}return p.draggable(i,o?"disable":"enable").resizable(i,n?"disable":"enable"),this},t.prototype._onStartMoving=function(t,e,i,o,n,r){var s;if(this.engine.cleanNodes().beginUpdate(o),this._writePosAttr(this.placeholder,o),this.el.appendChild(this.placeholder),this.placeholder.gridstackNode=o,null===(s=o.grid)||void 0===s?void 0:s.el)this.dragTransform=l.Utils.getValuesFromTransformedElement(t);else if(this.placeholder&&this.placeholder.closest(".grid-stack")){var a=this.placeholder.closest(".grid-stack");this.dragTransform=l.Utils.getValuesFromTransformedElement(a)}else this.dragTransform={xScale:1,xOffset:0,yScale:1,yOffset:0};if(o.el=this.placeholder,o._lastUiPosition=i.position,o._prevYPix=i.position.top,o._moving="dragstart"===e.type,delete o._lastTried,"dropover"===e.type&&o._temporaryRemoved&&(this.engine.addNode(o),o._moving=!0),this.engine.cacheRects(n,r,this.opts.marginTop,this.opts.marginRight,this.opts.marginBottom,this.opts.marginLeft),"resizestart"===e.type){var d=this.getColumn()-o.x,h=(this.opts.maxRow||Number.MAX_SAFE_INTEGER)-o.y;p.resizable(t,"option","minWidth",n*Math.min(o.minW||1,d)).resizable(t,"option","minHeight",r*Math.min(o.minH||1,h)).resizable(t,"option","maxWidth",n*Math.min(o.maxW||Number.MAX_SAFE_INTEGER,d)).resizable(t,"option","maxWidthMoveLeft",n*Math.min(o.maxW||Number.MAX_SAFE_INTEGER,o.x+o.w)).resizable(t,"option","maxHeight",r*Math.min(o.maxH||Number.MAX_SAFE_INTEGER,h)).resizable(t,"option","maxHeightMoveUp",r*Math.min(o.maxH||Number.MAX_SAFE_INTEGER,o.y+o.h))}},t.prototype._dragOrResize=function(t,e,i,n,r,s){var a,d=o({},n._orig),h=this.opts.marginLeft,u=this.opts.marginRight,c=this.opts.marginTop,p=this.opts.marginBottom,g=Math.round(.1*s),m=Math.round(.1*r);if(h=Math.min(h,m),u=Math.min(u,m),c=Math.min(c,g),p=Math.min(p,g),"drag"===e.type){if(n._temporaryRemoved)return;var f=i.position.top-n._prevYPix;n._prevYPix=i.position.top,!1!==this.opts.draggable.scroll&&l.Utils.updateScrollPosition(t,i.position,f);var v=i.position.left+(i.position.left>n._lastUiPosition.left?-u:h),y=i.position.top+(i.position.top>n._lastUiPosition.top?-p:c);d.x=Math.round(v/r),d.y=Math.round(y/s);var _=this._extraDragRow;if(this.engine.collide(n,d)){var b=this.getRow(),w=Math.max(0,d.y+n.h-b);this.opts.maxRow&&b+w>this.opts.maxRow&&(w=Math.max(0,this.opts.maxRow-b)),this._extraDragRow=w}else this._extraDragRow=0;if(this._extraDragRow!==_&&this._updateContainerHeight(),n.x===d.x&&n.y===d.y)return}else if("resize"===e.type){if(d.x<0)return;if(l.Utils.updateScrollResize(e,t,s),d.w=Math.round((i.size.width-h)/r),d.h=Math.round((i.size.height-c)/s),n.w===d.w&&n.h===d.h)return;if(n._lastTried&&n._lastTried.w===d.w&&n._lastTried.h===d.h)return;v=i.position.left+h;var E=i.position.top+c;d.x=Math.round(v/r),d.y=Math.round(E/s),a=!0}n._event=e,n._lastTried=d;var D={x:i.position.left+h,y:i.position.top+c,w:(i.size?i.size.width:n.w*r)-h-u,h:(i.size?i.size.height:n.h*s)-c-p};if(this.engine.moveNodeCheck(n,o(o({},d),{cellWidth:r,cellHeight:s,rect:D,resizing:a}))){n._lastUiPosition=i.position,this.engine.cacheRects(r,s,c,u,p,h),delete n._skipDown,a&&n.subGrid&&n.subGrid.onResize(),this._extraDragRow=0,this._updateContainerHeight();var x=e.target;this._writePosAttr(x,n),this._gsEventHandler[e.type]&&this._gsEventHandler[e.type](e,x)}},t.prototype._leave=function(e,i){var o=e.gridstackNode;o&&((i=i||e).style.transform="scale(1)",p.off(e,"drag"),o._temporaryRemoved||(o._temporaryRemoved=!0,this.engine.removeNode(o),o.el=o._isExternal&&i?i:e,!0===this.opts.removable&&t._itemRemoving(e,!0),e._gridstackNodeOrig?(e.gridstackNode=e._gridstackNodeOrig,delete e._gridstackNodeOrig):o._isExternal&&(delete o.el,delete e.gridstackNode,this.engine.restoreInitial())))},t.prototype.commit=function(){return(0,l.obsolete)(this,this.batchUpdate(!1),"commit","batchUpdate","5.2"),this},t.resizeToContentParent=".grid-stack-item-content",t.Utils=l.Utils,t.Engine=a.GridStackEngine,t.GDRev="10.3.1",t}()},855:function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.dragInDefaultOptions=e.gridDefaults=void 0,e.gridDefaults={alwaysShowResizeHandle:"mobile",animate:!0,auto:!0,cellHeight:"auto",cellHeightThrottle:100,cellHeightUnit:"px",column:12,draggable:{handle:".grid-stack-item-content",appendTo:"body",scroll:!0},handle:".grid-stack-item-content",itemClass:"grid-stack-item",margin:10,marginUnit:"px",maxRow:0,minRow:0,placeholderClass:"grid-stack-placeholder",placeholderText:"",removableOptions:{accept:"grid-stack-item",decline:"grid-stack-non-removable"},resizable:{handles:"se"},rtl:"auto"},e.dragInDefaultOptions={handle:".grid-stack-item-content",appendTo:"body"}},867:function(t,e){var i=this&&this.__assign||function(){return i=Object.assign||function(t){for(var e,i=1,o=arguments.length;i=e.y+e.h||t.y+t.h<=e.y||t.x+t.w<=e.x||t.x>=e.x+e.w)},t.isTouching=function(e,i){return t.isIntercepted(e,{x:i.x-.5,y:i.y-.5,w:i.w+1,h:i.h+1})},t.areaIntercept=function(t,e){var i=t.x>e.x?t.x:e.x,o=t.x+t.we.y?t.y:e.y,r=t.y+t.hn){var r=o.bottom-n,s=o.top,a=this.getScrollElement(t);if(null!==a){var l=a.scrollTop;o.top<0&&i<0?t.offsetHeight>n?a.scrollTop+=i:a.scrollTop+=Math.abs(s)>Math.abs(i)?i:s:i>0&&(t.offsetHeight>n?a.scrollTop+=i:a.scrollTop+=r>i?i:r),e.top+=a.scrollTop-l}}},t.updateScrollResize=function(t,e,i){var o=this.getScrollElement(e),n=o.clientHeight,r=o===this.getScrollElement()?0:o.getBoundingClientRect().top,s=t.clientY-r,a=s>n-i;s boolean|void;\nexport abstract class DDBaseImplement {\n /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */\n public get disabled(): boolean { return this._disabled; }\n\n /** @internal */\n protected _disabled: boolean; // initial state to differentiate from false\n /** @internal */\n protected _eventRegister: {\n [eventName: string]: EventCallback;\n } = {};\n\n public on(event: string, callback: EventCallback): void {\n this._eventRegister[event] = callback;\n }\n\n public off(event: string): void {\n delete this._eventRegister[event];\n }\n\n public enable(): void {\n this._disabled = false;\n }\n\n public disable(): void {\n this._disabled = true;\n }\n\n public destroy(): void {\n delete this._eventRegister;\n }\n\n public triggerEvent(eventName: string, event: Event): boolean|void {\n if (!this.disabled && this._eventRegister && this._eventRegister[eventName])\n return this._eventRegister[eventName](event);\n }\n}\n\nexport interface HTMLElementExtendOpt {\n el: HTMLElement;\n option: T;\n updateOption(T): DDBaseImplement;\n}\n","/**\n * dd-draggable.ts 10.3.0\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nimport { DDManager } from './dd-manager';\nimport { DragTransform, Utils } from './utils';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { GridItemHTMLElement, DDUIData, GridStackNode, GridStackPosition } from './types';\nimport { DDElementHost } from './dd-element';\nimport { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';\n\n// TODO: merge with DDDragOpt ?\nexport interface DDDraggableOpt {\n appendTo?: string | HTMLElement;\n handle?: string;\n helper?: 'clone' | HTMLElement | ((event: Event) => HTMLElement);\n cancel?: string;\n // containment?: string | HTMLElement; // TODO: not implemented yet\n // revert?: string | boolean | unknown; // TODO: not implemented yet\n // scroll?: boolean;\n start?: (event: Event, ui: DDUIData) => void;\n stop?: (event: Event) => void;\n drag?: (event: Event, ui: DDUIData) => void;\n}\n\ninterface DragOffset {\n left: number;\n top: number;\n width: number;\n height: number;\n offsetLeft: number;\n offsetTop: number;\n}\n\ninterface GridStackNodeRotate extends GridStackNode {\n _origRotate?: GridStackPosition;\n}\n\ntype DDDragEvent = 'drag' | 'dragstart' | 'dragstop';\n\n// make sure we are not clicking on known object that handles mouseDown\nconst skipMouseDown = 'input,textarea,button,select,option,[contenteditable=\"true\"],.ui-resizable-handle';\n\n// let count = 0; // TEST\n\nexport class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt {\n public helper: HTMLElement; // used by GridStackDDNative\n\n /** @internal */\n protected mouseDownEvent: MouseEvent;\n /** @internal */\n protected dragOffset: DragOffset;\n /** @internal */\n protected dragElementOriginStyle: Array;\n /** @internal */\n protected dragEls: HTMLElement[];\n /** @internal true while we are dragging an item around */\n protected dragging: boolean;\n /** @internal last drag event */\n protected lastDrag: DragEvent;\n /** @internal */\n protected parentOriginStylePosition: string;\n /** @internal */\n protected helperContainment: HTMLElement;\n /** @internal properties we change during dragging, and restore back */\n protected static originStyleProp = ['transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];\n /** @internal pause before we call the actual drag hit collision code */\n protected dragTimeout: number;\n /** @internal */\n protected dragTransform: DragTransform = {\n xScale: 1,\n yScale: 1,\n xOffset: 0,\n yOffset: 0\n };\n\n constructor(public el: GridItemHTMLElement, public option: DDDraggableOpt = {}) {\n super();\n\n // get the element that is actually supposed to be dragged by\n let handleName = option.handle.substring(1);\n this.dragEls = el.classList.contains(handleName) ? [el] : Array.from(el.querySelectorAll(option.handle));\n if (this.dragEls.length === 0) {\n this.dragEls = [el];\n }\n // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n this._mouseDown = this._mouseDown.bind(this);\n this._mouseMove = this._mouseMove.bind(this);\n this._mouseUp = this._mouseUp.bind(this);\n this._keyEvent = this._keyEvent.bind(this);\n this.enable();\n }\n\n public on(event: DDDragEvent, callback: (event: DragEvent) => void): void {\n super.on(event, callback);\n }\n\n public off(event: DDDragEvent): void {\n super.off(event);\n }\n\n public enable(): void {\n if (this.disabled === false) return;\n super.enable();\n this.dragEls.forEach(dragEl => {\n dragEl.addEventListener('mousedown', this._mouseDown);\n if (isTouch) {\n dragEl.addEventListener('touchstart', touchstart);\n dragEl.addEventListener('pointerdown', pointerdown);\n // dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment\n }\n });\n this.el.classList.remove('ui-draggable-disabled');\n }\n\n public disable(forDestroy = false): void {\n if (this.disabled === true) return;\n super.disable();\n this.dragEls.forEach(dragEl => {\n dragEl.removeEventListener('mousedown', this._mouseDown);\n if (isTouch) {\n dragEl.removeEventListener('touchstart', touchstart);\n dragEl.removeEventListener('pointerdown', pointerdown);\n }\n });\n if (!forDestroy) this.el.classList.add('ui-draggable-disabled');\n }\n\n public destroy(): void {\n if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n delete this.dragTimeout;\n if (this.mouseDownEvent) this._mouseUp(this.mouseDownEvent);\n this.disable(true);\n delete this.el;\n delete this.helper;\n delete this.option;\n super.destroy();\n }\n\n public updateOption(opts: DDDraggableOpt): DDDraggable {\n Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n return this;\n }\n\n /** @internal call when mouse goes down before a dragstart happens */\n protected _mouseDown(e: MouseEvent): boolean {\n // don't let more than one widget handle mouseStart\n if (DDManager.mouseHandled) return;\n if (e.button !== 0) return true; // only left click\n\n // make sure we are not clicking on known object that handles mouseDown, or ones supplied by the user\n if (!this.dragEls.find(el => el === e.target) && (e.target as HTMLElement).closest(skipMouseDown)) return true;\n if (this.option.cancel) {\n if ((e.target as HTMLElement).closest(this.option.cancel)) return true;\n }\n\n // REMOVE: why would we get the event if it wasn't for us or child ?\n // make sure we are clicking on a drag handle or child of it...\n // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)\n // let className = this.option.handle.substring(1);\n // let el = e.target as HTMLElement;\n // while (el && !el.classList.contains(className)) { el = el.parentElement; }\n // if (!el) return;\n\n this.mouseDownEvent = e;\n delete this.dragging;\n delete DDManager.dragElement;\n delete DDManager.dropElement;\n // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack\n document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true }); // true=capture, not bubble\n document.addEventListener('mouseup', this._mouseUp, true);\n if (isTouch) {\n e.target.addEventListener('touchmove', touchmove);\n e.target.addEventListener('touchend', touchend);\n }\n\n e.preventDefault();\n // preventDefault() prevents blur event which occurs just after mousedown event.\n // if an editable content has focus, then blur must be call\n if (document.activeElement) (document.activeElement as HTMLElement).blur();\n\n DDManager.mouseHandled = true;\n return true;\n }\n\n /** @internal method to call actual drag event */\n protected _callDrag(e: DragEvent): void {\n if (!this.dragging) return;\n const ev = Utils.initEvent(e, { target: this.el, type: 'drag' });\n if (this.option.drag) {\n this.option.drag(ev, this.ui());\n }\n this.triggerEvent('drag', ev);\n }\n\n /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */\n protected _mouseMove(e: DragEvent): boolean {\n // console.log(`${count++} move ${e.x},${e.y}`)\n let s = this.mouseDownEvent;\n this.lastDrag = e;\n\n if (this.dragging) {\n this._dragFollow(e);\n // delay actual grid handling drag until we pause for a while if set\n if (DDManager.pauseDrag) {\n const pause = Number.isInteger(DDManager.pauseDrag) ? DDManager.pauseDrag as number : 100;\n if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n this.dragTimeout = window.setTimeout(() => this._callDrag(e), pause);\n } else {\n this._callDrag(e);\n }\n } else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) {\n /**\n * don't start unless we've moved at least 3 pixels\n */\n this.dragging = true;\n DDManager.dragElement = this;\n // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)\n let grid = this.el.gridstackNode?.grid;\n if (grid) {\n DDManager.dropElement = (grid.el as DDElementHost).ddElement.ddDroppable;\n } else {\n delete DDManager.dropElement;\n }\n this.helper = this._createHelper(e);\n this._setupHelperContainmentStyle();\n this.dragTransform = Utils.getValuesFromTransformedElement(this.helperContainment);\n this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);\n this._setupHelperStyle(e);\n\n const ev = Utils.initEvent(e, { target: this.el, type: 'dragstart' });\n if (this.option.start) {\n this.option.start(ev, this.ui());\n }\n this.triggerEvent('dragstart', ev);\n // now track keyboard events to cancel or rotate\n document.addEventListener('keydown', this._keyEvent);\n }\n // e.preventDefault(); // passive = true. OLD: was needed otherwise we get text sweep text selection as we drag around\n return true;\n }\n\n /** @internal call when the mouse gets released to drop the item at current location */\n protected _mouseUp(e: MouseEvent): void {\n document.removeEventListener('mousemove', this._mouseMove, true);\n document.removeEventListener('mouseup', this._mouseUp, true);\n if (isTouch) {\n e.target.removeEventListener('touchmove', touchmove, true);\n e.target.removeEventListener('touchend', touchend, true);\n }\n if (this.dragging) {\n delete this.dragging;\n delete (this.el.gridstackNode as GridStackNodeRotate)?._origRotate;\n document.removeEventListener('keydown', this._keyEvent);\n\n // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)\n if (DDManager.dropElement?.el === this.el.parentElement) {\n delete DDManager.dropElement;\n }\n\n this.helperContainment.style.position = this.parentOriginStylePosition || null;\n if (this.helper === this.el) {\n this._removeHelperStyle();\n } else {\n this.helper.remove();\n }\n const ev = Utils.initEvent(e, { target: this.el, type: 'dragstop' });\n if (this.option.stop) {\n this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!\n }\n this.triggerEvent('dragstop', ev);\n\n // call the droppable method to receive the item\n if (DDManager.dropElement) {\n DDManager.dropElement.drop(e);\n }\n }\n delete this.helper;\n delete this.mouseDownEvent;\n delete DDManager.dragElement;\n delete DDManager.dropElement;\n delete DDManager.mouseHandled;\n e.preventDefault();\n }\n\n /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */\n protected _keyEvent(e: KeyboardEvent): void {\n const n = this.el.gridstackNode as GridStackNodeRotate;\n if (!n?.grid) return;\n const grid = n.grid;\n\n if (e.key === 'Escape') {\n if (n._origRotate) {\n n._orig = n._origRotate;\n delete n._origRotate;\n }\n grid.engine.restoreInitial();\n this._mouseUp(this.mouseDownEvent);\n } else if (e.key === 'r' || e.key === 'R') {\n if (!Utils.canBeRotated(n)) return;\n n._origRotate = n._origRotate || { ...n._orig }; // store the real orig size in case we Esc after doing rotation\n delete n._moving; // force rotate to happen (move waits for >50% coverage otherwise)\n grid.setAnimation(false) // immediate rotate so _getDragOffset() gets the right dom size below\n .rotate(n.el, { top: -this.dragOffset.offsetTop, left: -this.dragOffset.offsetLeft })\n .setAnimation();\n n._moving = true;\n this.dragOffset = this._getDragOffset(this.lastDrag, n.el, this.helperContainment);\n this.helper.style.width = this.dragOffset.width + 'px';\n this.helper.style.height = this.dragOffset.height + 'px';\n Utils.swap(n._orig, 'w', 'h');\n delete n._rect;\n this._mouseMove(this.lastDrag);\n }\n }\n\n /** @internal create a clone copy (or user defined method) of the original drag item if set */\n protected _createHelper(event: DragEvent): HTMLElement {\n let helper = this.el;\n if (typeof this.option.helper === 'function') {\n helper = this.option.helper(event);\n } else if (this.option.helper === 'clone') {\n helper = Utils.cloneNode(this.el);\n }\n if (!document.body.contains(helper)) {\n Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentElement : this.option.appendTo);\n }\n if (helper === this.el) {\n this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);\n }\n return helper;\n }\n\n /** @internal set the fix position of the dragged item */\n protected _setupHelperStyle(e: DragEvent): DDDraggable {\n this.helper.classList.add('ui-draggable-dragging');\n // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593\n const style = this.helper.style;\n style.pointerEvents = 'none'; // needed for over items to get enter/leave\n // style.cursor = 'move'; // TODO: can't set with pointerEvents=none ! (done in CSS as well)\n style.width = this.dragOffset.width + 'px';\n style.height = this.dragOffset.height + 'px';\n style.willChange = 'left, top';\n style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'\n this._dragFollow(e); // now position it\n style.transition = 'none'; // show up instantly\n setTimeout(() => {\n if (this.helper) {\n style.transition = null; // recover animation\n }\n }, 0);\n return this;\n }\n\n /** @internal restore back the original style before dragging */\n protected _removeHelperStyle(): DDDraggable {\n this.helper.classList.remove('ui-draggable-dragging');\n let node = (this.helper as GridItemHTMLElement)?.gridstackNode;\n // don't bother restoring styles if we're gonna remove anyway...\n if (!node?._isAboutToRemove && this.dragElementOriginStyle) {\n let helper = this.helper;\n // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.\n // TODO: this also removes resizing animation which doesn't have this issue, but others.\n // Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match,\n // then trigger a delay (repaint) to restore to final dest with animate) but then we need to make sure 'resizestop'\n // is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)\n let transition = this.dragElementOriginStyle['transition'] || null;\n helper.style.transition = this.dragElementOriginStyle['transition'] = 'none'; // can't be NULL #1973\n DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);\n setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)\n }\n delete this.dragElementOriginStyle;\n return this;\n }\n\n /** @internal updates the top/left position to follow the mouse */\n protected _dragFollow(e: DragEvent): void {\n let containmentRect = { left: 0, top: 0 };\n // if (this.helper.style.position === 'absolute') { // we use 'fixed'\n // const { left, top } = this.helperContainment.getBoundingClientRect();\n // containmentRect = { left, top };\n // }\n const style = this.helper.style;\n const offset = this.dragOffset;\n style.left = (e.clientX + offset.offsetLeft - containmentRect.left) * this.dragTransform.xScale + 'px';\n style.top = (e.clientY + offset.offsetTop - containmentRect.top) * this.dragTransform.yScale + 'px';\n }\n\n /** @internal */\n protected _setupHelperContainmentStyle(): DDDraggable {\n this.helperContainment = this.helper.parentElement;\n if (this.helper.style.position !== 'fixed') {\n this.parentOriginStylePosition = this.helperContainment.style.position;\n if (getComputedStyle(this.helperContainment).position.match(/static/)) {\n this.helperContainment.style.position = 'relative';\n }\n }\n return this;\n }\n\n /** @internal */\n protected _getDragOffset(event: DragEvent, el: HTMLElement, parent: HTMLElement): DragOffset {\n\n // in case ancestor has transform/perspective css properties that change the viewpoint\n let xformOffsetX = 0;\n let xformOffsetY = 0;\n if (parent) {\n xformOffsetX = this.dragTransform.xOffset;\n xformOffsetY = this.dragTransform.yOffset;\n }\n\n const targetOffset = el.getBoundingClientRect();\n return {\n left: targetOffset.left,\n top: targetOffset.top,\n offsetLeft: - event.clientX + targetOffset.left - xformOffsetX,\n offsetTop: - event.clientY + targetOffset.top - xformOffsetY,\n width: targetOffset.width * this.dragTransform.xScale,\n height: targetOffset.height * this.dragTransform.yScale\n };\n }\n\n /** @internal TODO: set to public as called by DDDroppable! */\n public ui(): DDUIData {\n const containmentEl = this.el.parentElement;\n const containmentRect = containmentEl.getBoundingClientRect();\n const offset = this.helper.getBoundingClientRect();\n return {\n position: { //Current CSS position of the helper as { top, left } object\n top: (offset.top - containmentRect.top) * this.dragTransform.yScale,\n left: (offset.left - containmentRect.left) * this.dragTransform.xScale\n }\n /* not used by GridStack for now...\n helper: [this.helper], //The object arr representing the helper that's being dragged.\n offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.\n */\n };\n }\n}\n","/**\n * dd-droppable.ts 10.3.0\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nimport { DDDraggable } from './dd-draggable';\nimport { DDManager } from './dd-manager';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { Utils } from './utils';\nimport { DDElementHost } from './dd-element';\nimport { isTouch, pointerenter, pointerleave } from './dd-touch';\nimport { DDUIData } from './types';\n\nexport interface DDDroppableOpt {\n accept?: string | ((el: HTMLElement) => boolean);\n drop?: (event: DragEvent, ui: DDUIData) => void;\n over?: (event: DragEvent, ui: DDUIData) => void;\n out?: (event: DragEvent, ui: DDUIData) => void;\n}\n\n// let count = 0; // TEST\n\nexport class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt {\n\n public accept: (el: HTMLElement) => boolean;\n\n constructor(public el: HTMLElement, public option: DDDroppableOpt = {}) {\n super();\n // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n this._mouseEnter = this._mouseEnter.bind(this);\n this._mouseLeave = this._mouseLeave.bind(this);\n this.enable();\n this._setupAccept();\n }\n\n public on(event: 'drop' | 'dropover' | 'dropout', callback: (event: DragEvent) => void): void {\n super.on(event, callback);\n }\n\n public off(event: 'drop' | 'dropover' | 'dropout'): void {\n super.off(event);\n }\n\n public enable(): void {\n if (this.disabled === false) return;\n super.enable();\n this.el.classList.add('ui-droppable');\n this.el.classList.remove('ui-droppable-disabled');\n this.el.addEventListener('mouseenter', this._mouseEnter);\n this.el.addEventListener('mouseleave', this._mouseLeave);\n if (isTouch) {\n this.el.addEventListener('pointerenter', pointerenter);\n this.el.addEventListener('pointerleave', pointerleave);\n }\n }\n\n public disable(forDestroy = false): void {\n if (this.disabled === true) return;\n super.disable();\n this.el.classList.remove('ui-droppable');\n if (!forDestroy) this.el.classList.add('ui-droppable-disabled');\n this.el.removeEventListener('mouseenter', this._mouseEnter);\n this.el.removeEventListener('mouseleave', this._mouseLeave);\n if (isTouch) {\n this.el.removeEventListener('pointerenter', pointerenter);\n this.el.removeEventListener('pointerleave', pointerleave);\n }\n }\n\n public destroy(): void {\n this.disable(true);\n this.el.classList.remove('ui-droppable');\n this.el.classList.remove('ui-droppable-disabled');\n super.destroy();\n }\n\n public updateOption(opts: DDDroppableOpt): DDDroppable {\n Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n this._setupAccept();\n return this;\n }\n\n /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */\n protected _mouseEnter(e: MouseEvent): void {\n // console.log(`${count++} Enter ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST\n if (!DDManager.dragElement) return;\n if (!this._canDrop(DDManager.dragElement.el)) return;\n e.preventDefault();\n e.stopPropagation();\n\n // make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do\n if (DDManager.dropElement && DDManager.dropElement !== this) {\n DDManager.dropElement._mouseLeave(e as DragEvent, true); // calledByEnter = true\n }\n DDManager.dropElement = this;\n\n const ev = Utils.initEvent(e, { target: this.el, type: 'dropover' });\n if (this.option.over) {\n this.option.over(ev, this._ui(DDManager.dragElement))\n }\n this.triggerEvent('dropover', ev);\n this.el.classList.add('ui-droppable-over');\n // console.log('tracking'); // TEST\n }\n\n /** @internal called when the item is leaving our area, stop tracking if we had moving item */\n protected _mouseLeave(e: MouseEvent, calledByEnter = false): void {\n // console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST\n if (!DDManager.dragElement || DDManager.dropElement !== this) return;\n e.preventDefault();\n e.stopPropagation();\n\n const ev = Utils.initEvent(e, { target: this.el, type: 'dropout' });\n if (this.option.out) {\n this.option.out(ev, this._ui(DDManager.dragElement))\n }\n this.triggerEvent('dropout', ev);\n\n if (DDManager.dropElement === this) {\n delete DDManager.dropElement;\n // console.log('not tracking'); // TEST\n\n // if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children\n if (!calledByEnter) {\n let parentDrop: DDDroppable;\n let parent: DDElementHost = this.el.parentElement;\n while (!parentDrop && parent) {\n parentDrop = parent.ddElement?.ddDroppable;\n parent = parent.parentElement;\n }\n if (parentDrop) {\n parentDrop._mouseEnter(e);\n }\n }\n }\n }\n\n /** item is being dropped on us - called by the drag mouseup handler - this calls the client drop event */\n public drop(e: MouseEvent): void {\n e.preventDefault();\n const ev = Utils.initEvent(e, { target: this.el, type: 'drop' });\n if (this.option.drop) {\n this.option.drop(ev, this._ui(DDManager.dragElement))\n }\n this.triggerEvent('drop', ev);\n }\n\n /** @internal true if element matches the string/method accept option */\n protected _canDrop(el: HTMLElement): boolean {\n return el && (!this.accept || this.accept(el));\n }\n\n /** @internal */\n protected _setupAccept(): DDDroppable {\n if (!this.option.accept) return this;\n if (typeof this.option.accept === 'string') {\n this.accept = (el: HTMLElement) => el.classList.contains(this.option.accept as string) || el.matches(this.option.accept as string);\n } else {\n this.accept = this.option.accept;\n }\n return this;\n }\n\n /** @internal */\n protected _ui(drag: DDDraggable): DDUIData {\n return {\n draggable: drag.el,\n ...drag.ui()\n };\n }\n}\n\n","/**\n * dd-elements.ts 10.3.0\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\n */\n\nimport { DDResizable, DDResizableOpt } from './dd-resizable';\nimport { GridItemHTMLElement } from './types';\nimport { DDDraggable, DDDraggableOpt } from './dd-draggable';\nimport { DDDroppable, DDDroppableOpt } from './dd-droppable';\n\nexport interface DDElementHost extends GridItemHTMLElement {\n ddElement?: DDElement;\n}\n\nexport class DDElement {\n\n static init(el: DDElementHost): DDElement {\n if (!el.ddElement) { el.ddElement = new DDElement(el); }\n return el.ddElement;\n }\n\n public ddDraggable?: DDDraggable;\n public ddDroppable?: DDDroppable;\n public ddResizable?: DDResizable;\n\n constructor(public el: DDElementHost) {}\n\n public on(eventName: string, callback: (event: MouseEvent) => void): DDElement {\n if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {\n this.ddDraggable.on(eventName as 'drag' | 'dragstart' | 'dragstop', callback);\n } else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {\n this.ddDroppable.on(eventName as 'drop' | 'dropover' | 'dropout', callback);\n } else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {\n this.ddResizable.on(eventName as 'resizestart' | 'resize' | 'resizestop', callback);\n }\n return this;\n }\n\n public off(eventName: string): DDElement {\n if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {\n this.ddDraggable.off(eventName as 'drag' | 'dragstart' | 'dragstop');\n } else if (this.ddDroppable && ['drop', 'dropover', 'dropout'].indexOf(eventName) > -1) {\n this.ddDroppable.off(eventName as 'drop' | 'dropover' | 'dropout');\n } else if (this.ddResizable && ['resizestart', 'resize', 'resizestop'].indexOf(eventName) > -1) {\n this.ddResizable.off(eventName as 'resizestart' | 'resize' | 'resizestop');\n }\n return this;\n }\n\n public setupDraggable(opts: DDDraggableOpt): DDElement {\n if (!this.ddDraggable) {\n this.ddDraggable = new DDDraggable(this.el, opts);\n } else {\n this.ddDraggable.updateOption(opts);\n }\n return this;\n }\n\n public cleanDraggable(): DDElement {\n if (this.ddDraggable) {\n this.ddDraggable.destroy();\n delete this.ddDraggable;\n }\n return this;\n }\n\n public setupResizable(opts: DDResizableOpt): DDElement {\n if (!this.ddResizable) {\n this.ddResizable = new DDResizable(this.el, opts);\n } else {\n this.ddResizable.updateOption(opts);\n }\n return this;\n }\n\n public cleanResizable(): DDElement {\n if (this.ddResizable) {\n this.ddResizable.destroy();\n delete this.ddResizable;\n }\n return this;\n }\n\n public setupDroppable(opts: DDDroppableOpt): DDElement {\n if (!this.ddDroppable) {\n this.ddDroppable = new DDDroppable(this.el, opts);\n } else {\n this.ddDroppable.updateOption(opts);\n }\n return this;\n }\n\n public cleanDroppable(): DDElement {\n if (this.ddDroppable) {\n this.ddDroppable.destroy();\n delete this.ddDroppable;\n }\n return this;\n }\n}\n","/**\r\n * dd-gridstack.ts 10.3.0\r\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\r\n */\r\n\r\n/* eslint-disable @typescript-eslint/no-unused-vars */\r\nimport { GridItemHTMLElement, GridStackElement, DDDragInOpt } from './types';\r\nimport { Utils } from './utils';\r\nimport { DDManager } from './dd-manager';\r\nimport { DDElement, DDElementHost } from './dd-element';\r\n\r\n/** Drag&Drop drop options */\r\nexport type DDDropOpt = {\r\n /** function or class type that this grid will accept as dropped items (see GridStackOptions.acceptWidgets) */\r\n accept?: (el: GridItemHTMLElement) => boolean;\r\n}\r\n\r\n/** drag&drop options currently called from the main code, but others can be passed in grid options */\r\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\r\nexport type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;\r\nexport type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';\r\nexport type DDValue = number | string;\r\n\r\n/** drag&drop events callbacks */\r\nexport type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;\r\n\r\n// let count = 0; // TEST\r\n\r\n/**\r\n * HTML Native Mouse and Touch Events Drag and Drop functionality.\r\n */\r\nexport class DDGridStack {\r\n\r\n public resizable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack {\r\n this._getDDElements(el).forEach(dEl => {\r\n if (opts === 'disable' || opts === 'enable') {\r\n dEl.ddResizable && dEl.ddResizable[opts](); // can't create DD as it requires options for setupResizable()\r\n } else if (opts === 'destroy') {\r\n dEl.ddResizable && dEl.cleanResizable();\r\n } else if (opts === 'option') {\r\n dEl.setupResizable({ [key]: value });\r\n } else {\r\n const n = dEl.el.gridstackNode;\r\n const grid = n.grid;\r\n let handles = dEl.el.getAttribute('gs-resize-handles') || grid.opts.resizable.handles || 'e,s,se';\r\n if (handles === 'all') handles = 'n,e,s,w,se,sw,ne,nw';\r\n // NOTE: keep the resize handles as e,w don't have enough space (10px) to show resize corners anyway. limit during drag instead\r\n // restrict vertical resize if height is done to match content anyway... odd to have it spring back\r\n // if (Utils.shouldSizeToContent(n, true)) {\r\n // const doE = handles.indexOf('e') !== -1;\r\n // const doW = handles.indexOf('w') !== -1;\r\n // handles = doE ? (doW ? 'e,w' : 'e') : (doW ? 'w' : '');\r\n // }\r\n const autoHide = !grid.opts.alwaysShowResizeHandle;\r\n dEl.setupResizable({\r\n ...grid.opts.resizable,\r\n ...{ handles, autoHide },\r\n ...{\r\n start: opts.start,\r\n stop: opts.stop,\r\n resize: opts.resize\r\n }\r\n });\r\n }\r\n });\r\n return this;\r\n }\r\n\r\n public draggable(el: GridItemHTMLElement, opts: DDOpts, key?: DDKey, value?: DDValue): DDGridStack {\r\n this._getDDElements(el).forEach(dEl => {\r\n if (opts === 'disable' || opts === 'enable') {\r\n dEl.ddDraggable && dEl.ddDraggable[opts](); // can't create DD as it requires options for setupDraggable()\r\n } else if (opts === 'destroy') {\r\n dEl.ddDraggable && dEl.cleanDraggable();\r\n } else if (opts === 'option') {\r\n dEl.setupDraggable({ [key]: value });\r\n } else {\r\n const grid = dEl.el.gridstackNode.grid;\r\n dEl.setupDraggable({\r\n ...grid.opts.draggable,\r\n ...{\r\n // containment: (grid.parentGridItem && grid.opts.dragOut === false) ? grid.el.parentElement : (grid.opts.draggable.containment || null),\r\n start: opts.start,\r\n stop: opts.stop,\r\n drag: opts.drag\r\n }\r\n });\r\n }\r\n });\r\n return this;\r\n }\r\n\r\n public dragIn(el: GridStackElement, opts: DDDragInOpt): DDGridStack {\r\n this._getDDElements(el).forEach(dEl => dEl.setupDraggable(opts));\r\n return this;\r\n }\r\n\r\n public droppable(el: GridItemHTMLElement, opts: DDOpts | DDDropOpt, key?: DDKey, value?: DDValue): DDGridStack {\r\n if (typeof opts.accept === 'function' && !opts._accept) {\r\n opts._accept = opts.accept;\r\n opts.accept = (el) => opts._accept(el);\r\n }\r\n this._getDDElements(el).forEach(dEl => {\r\n if (opts === 'disable' || opts === 'enable') {\r\n dEl.ddDroppable && dEl.ddDroppable[opts]();\r\n } else if (opts === 'destroy') {\r\n if (dEl.ddDroppable) { // error to call destroy if not there\r\n dEl.cleanDroppable();\r\n }\r\n } else if (opts === 'option') {\r\n dEl.setupDroppable({ [key]: value });\r\n } else {\r\n dEl.setupDroppable(opts);\r\n }\r\n });\r\n return this;\r\n }\r\n\r\n /** true if element is droppable */\r\n public isDroppable(el: DDElementHost): boolean {\r\n return !!(el && el.ddElement && el.ddElement.ddDroppable && !el.ddElement.ddDroppable.disabled);\r\n }\r\n\r\n /** true if element is draggable */\r\n public isDraggable(el: DDElementHost): boolean {\r\n return !!(el && el.ddElement && el.ddElement.ddDraggable && !el.ddElement.ddDraggable.disabled);\r\n }\r\n\r\n /** true if element is draggable */\r\n public isResizable(el: DDElementHost): boolean {\r\n return !!(el && el.ddElement && el.ddElement.ddResizable && !el.ddElement.ddResizable.disabled);\r\n }\r\n\r\n public on(el: GridItemHTMLElement, name: string, callback: DDCallback): DDGridStack {\r\n this._getDDElements(el).forEach(dEl =>\r\n dEl.on(name, (event: Event) => {\r\n callback(\r\n event,\r\n DDManager.dragElement ? DDManager.dragElement.el : event.target as GridItemHTMLElement,\r\n DDManager.dragElement ? DDManager.dragElement.helper : null)\r\n })\r\n );\r\n return this;\r\n }\r\n\r\n public off(el: GridItemHTMLElement, name: string): DDGridStack {\r\n this._getDDElements(el).forEach(dEl => dEl.off(name));\r\n return this;\r\n }\r\n\r\n /** @internal returns a list of DD elements, creating them on the fly by default */\r\n protected _getDDElements(els: GridStackElement, create = true): DDElement[] {\r\n let hosts = Utils.getElements(els) as DDElementHost[];\r\n if (!hosts.length) return [];\r\n let list = hosts.map(e => e.ddElement || (create ? DDElement.init(e) : null));\r\n if (!create) { list.filter(d => d); } // remove nulls\r\n return list;\r\n }\r\n}\r\n","/**\n * dd-manager.ts 10.3.0\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\n */\n\nimport { DDDraggable } from './dd-draggable';\nimport { DDDroppable } from './dd-droppable';\nimport { DDResizable } from './dd-resizable';\n\n/**\n * globals that are shared across Drag & Drop instances\n */\nexport class DDManager {\n /** if set (true | in msec), dragging placement (collision) will only happen after a pause by the user*/\n public static pauseDrag: boolean | number;\n\n /** true if a mouse down event was handled */\n public static mouseHandled: boolean;\n\n /** item being dragged */\n public static dragElement: DDDraggable;\n\n /** item we are currently over as drop target */\n public static dropElement: DDDroppable;\n\n /** current item we're over for resizing purpose (ignore nested grid resize handles) */\n public static overResizeElement: DDResizable;\n\n}\n","/**\n * dd-resizable-handle.ts 10.3.0\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nimport { isTouch, pointerdown, touchend, touchmove, touchstart } from './dd-touch';\nimport { GridItemHTMLElement } from './gridstack';\n\nexport interface DDResizableHandleOpt {\n start?: (event) => void;\n move?: (event) => void;\n stop?: (event) => void;\n}\n\nexport class DDResizableHandle {\n /** @internal */\n protected el: HTMLElement;\n /** @internal true after we've moved enough pixels to start a resize */\n protected moving = false;\n /** @internal */\n protected mouseDownEvent: MouseEvent;\n /** @internal */\n protected static prefix = 'ui-resizable-';\n\n constructor(protected host: GridItemHTMLElement, protected dir: string, protected option: DDResizableHandleOpt) {\n // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n this._mouseDown = this._mouseDown.bind(this);\n this._mouseMove = this._mouseMove.bind(this);\n this._mouseUp = this._mouseUp.bind(this);\n this._keyEvent = this._keyEvent.bind(this);\n\n this._init();\n }\n\n /** @internal */\n protected _init(): DDResizableHandle {\n const el = this.el = document.createElement('div');\n el.classList.add('ui-resizable-handle');\n el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);\n el.style.zIndex = '100';\n el.style.userSelect = 'none';\n this.host.appendChild(this.el);\n this.el.addEventListener('mousedown', this._mouseDown);\n if (isTouch) {\n this.el.addEventListener('touchstart', touchstart);\n this.el.addEventListener('pointerdown', pointerdown);\n // this.el.style.touchAction = 'none'; // not needed unlike pointerdown doc comment\n }\n return this;\n }\n\n /** call this when resize handle needs to be removed and cleaned up */\n public destroy(): DDResizableHandle {\n if (this.moving) this._mouseUp(this.mouseDownEvent);\n this.el.removeEventListener('mousedown', this._mouseDown);\n if (isTouch) {\n this.el.removeEventListener('touchstart', touchstart);\n this.el.removeEventListener('pointerdown', pointerdown);\n }\n this.host.removeChild(this.el);\n delete this.el;\n delete this.host;\n return this;\n }\n\n /** @internal called on mouse down on us: capture move on the entire document (mouse might not stay on us) until we release the mouse */\n protected _mouseDown(e: MouseEvent): void {\n this.mouseDownEvent = e;\n document.addEventListener('mousemove', this._mouseMove, { capture: true, passive: true}); // capture, not bubble\n document.addEventListener('mouseup', this._mouseUp, true);\n if (isTouch) {\n this.el.addEventListener('touchmove', touchmove);\n this.el.addEventListener('touchend', touchend);\n }\n e.stopPropagation();\n e.preventDefault();\n }\n\n /** @internal */\n protected _mouseMove(e: MouseEvent): void {\n let s = this.mouseDownEvent;\n if (this.moving) {\n this._triggerEvent('move', e);\n } else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 2) {\n // don't start unless we've moved at least 3 pixels\n this.moving = true;\n this._triggerEvent('start', this.mouseDownEvent);\n this._triggerEvent('move', e);\n // now track keyboard events to cancel\n document.addEventListener('keydown', this._keyEvent);\n }\n e.stopPropagation();\n // e.preventDefault(); passive = true\n }\n\n /** @internal */\n protected _mouseUp(e: MouseEvent): void {\n if (this.moving) {\n this._triggerEvent('stop', e);\n document.removeEventListener('keydown', this._keyEvent);\n }\n document.removeEventListener('mousemove', this._mouseMove, true);\n document.removeEventListener('mouseup', this._mouseUp, true);\n if (isTouch) {\n this.el.removeEventListener('touchmove', touchmove);\n this.el.removeEventListener('touchend', touchend);\n }\n delete this.moving;\n delete this.mouseDownEvent;\n e.stopPropagation();\n e.preventDefault();\n }\n\n /** @internal call when keys are being pressed - use Esc to cancel */\n protected _keyEvent(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n this.host.gridstackNode?.grid?.engine.restoreInitial();\n this._mouseUp(this.mouseDownEvent);\n }\n }\n \n \n \n /** @internal */\n protected _triggerEvent(name: string, event: MouseEvent): DDResizableHandle {\n if (this.option[name]) this.option[name](event);\n return this;\n }\n}\n","/**\n * dd-resizable.ts 10.3.0\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nimport { DDResizableHandle } from './dd-resizable-handle';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { Utils } from './utils';\nimport { DDUIData, GridItemHTMLElement, Rect, Size } from './types';\nimport { DDManager } from './dd-manager';\n\n// import { GridItemHTMLElement } from './types'; let count = 0; // TEST\n\n// TODO: merge with DDDragOpt\nexport interface DDResizableOpt {\n autoHide?: boolean;\n handles?: string;\n maxHeight?: number;\n maxWidth?: number;\n minHeight?: number;\n minWidth?: number;\n start?: (event: Event, ui: DDUIData) => void;\n stop?: (event: Event) => void;\n resize?: (event: Event, ui: DDUIData) => void;\n}\n\ninterface RectScaleReciprocal {\n x: number;\n y: number;\n}\n\nexport class DDResizable extends DDBaseImplement implements HTMLElementExtendOpt {\n /** @internal */\n protected handlers: DDResizableHandle[];\n /** @internal */\n protected originalRect: Rect;\n /** @internal */\n protected rectScale: RectScaleReciprocal = { x: 1, y: 1 };\n /** @internal */\n protected temporalRect: Rect;\n /** @internal */\n protected scrollY: number;\n /** @internal */\n protected scrolled: number;\n /** @internal */\n protected scrollEl: HTMLElement;\n /** @internal */\n protected startEvent: MouseEvent;\n /** @internal value saved in the same order as _originStyleProp[] */\n protected elOriginStyleVal: string[];\n /** @internal */\n protected parentOriginStylePosition: string;\n /** @internal */\n protected static _originStyleProp = ['width', 'height', 'position', 'left', 'top', 'opacity', 'zIndex'];\n /** @internal */\n protected sizeToContent: boolean;\n\n // have to be public else complains for HTMLElementExtendOpt ?\n constructor(public el: GridItemHTMLElement, public option: DDResizableOpt = {}) {\n super();\n // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n this._mouseOver = this._mouseOver.bind(this);\n this._mouseOut = this._mouseOut.bind(this);\n this.enable();\n this._setupAutoHide(this.option.autoHide);\n this._setupHandlers();\n }\n\n public on(event: 'resizestart' | 'resize' | 'resizestop', callback: (event: DragEvent) => void): void {\n super.on(event, callback);\n }\n\n public off(event: 'resizestart' | 'resize' | 'resizestop'): void {\n super.off(event);\n }\n\n public enable(): void {\n super.enable();\n this.el.classList.remove('ui-resizable-disabled');\n this._setupAutoHide(this.option.autoHide);\n }\n\n public disable(): void {\n super.disable();\n this.el.classList.add('ui-resizable-disabled');\n this._setupAutoHide(false);\n }\n\n public destroy(): void {\n this._removeHandlers();\n this._setupAutoHide(false);\n delete this.el;\n super.destroy();\n }\n\n public updateOption(opts: DDResizableOpt): DDResizable {\n let updateHandles = (opts.handles && opts.handles !== this.option.handles);\n let updateAutoHide = (opts.autoHide && opts.autoHide !== this.option.autoHide);\n Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n if (updateHandles) {\n this._removeHandlers();\n this._setupHandlers();\n }\n if (updateAutoHide) {\n this._setupAutoHide(this.option.autoHide);\n }\n return this;\n }\n\n /** @internal turns auto hide on/off */\n protected _setupAutoHide(auto: boolean): DDResizable {\n if (auto) {\n this.el.classList.add('ui-resizable-autohide');\n // use mouseover and not mouseenter to get better performance and track for nested cases\n this.el.addEventListener('mouseover', this._mouseOver);\n this.el.addEventListener('mouseout', this._mouseOut);\n } else {\n this.el.classList.remove('ui-resizable-autohide');\n this.el.removeEventListener('mouseover', this._mouseOver);\n this.el.removeEventListener('mouseout', this._mouseOut);\n if (DDManager.overResizeElement === this) {\n delete DDManager.overResizeElement;\n }\n }\n return this;\n }\n\n /** @internal */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected _mouseOver(e: Event): void {\n // console.log(`${count++} pre-enter ${(this.el as GridItemHTMLElement).gridstackNode._id}`)\n // already over a child, ignore. Ideally we just call e.stopPropagation() but see https://github.com/gridstack/gridstack.js/issues/2018\n if (DDManager.overResizeElement || DDManager.dragElement) return;\n DDManager.overResizeElement = this;\n // console.log(`${count++} enter ${(this.el as GridItemHTMLElement).gridstackNode._id}`)\n this.el.classList.remove('ui-resizable-autohide');\n }\n\n /** @internal */\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected _mouseOut(e: Event): void {\n // console.log(`${count++} pre-leave ${(this.el as GridItemHTMLElement).gridstackNode._id}`)\n if (DDManager.overResizeElement !== this) return;\n delete DDManager.overResizeElement;\n // console.log(`${count++} leave ${(this.el as GridItemHTMLElement).gridstackNode._id}`)\n this.el.classList.add('ui-resizable-autohide');\n }\n\n /** @internal */\n protected _setupHandlers(): DDResizable {\n this.handlers = this.option.handles.split(',')\n .map(dir => dir.trim())\n .map(dir => new DDResizableHandle(this.el, dir, {\n start: (event: MouseEvent) => {\n this._resizeStart(event);\n },\n stop: (event: MouseEvent) => {\n this._resizeStop(event);\n },\n move: (event: MouseEvent) => {\n this._resizing(event, dir);\n }\n }));\n return this;\n }\n\n /** @internal */\n protected _resizeStart(event: MouseEvent): DDResizable {\n this.sizeToContent = Utils.shouldSizeToContent(this.el.gridstackNode, true); // strick true only and not number\n this.originalRect = this.el.getBoundingClientRect();\n this.scrollEl = Utils.getScrollElement(this.el);\n this.scrollY = this.scrollEl.scrollTop;\n this.scrolled = 0;\n this.startEvent = event;\n this._setupHelper();\n this._applyChange();\n const ev = Utils.initEvent(event, { type: 'resizestart', target: this.el });\n if (this.option.start) {\n this.option.start(ev, this._ui());\n }\n this.el.classList.add('ui-resizable-resizing');\n this.triggerEvent('resizestart', ev);\n return this;\n }\n\n /** @internal */\n protected _resizing(event: MouseEvent, dir: string): DDResizable {\n this.scrolled = this.scrollEl.scrollTop - this.scrollY;\n this.temporalRect = this._getChange(event, dir);\n this._applyChange();\n const ev = Utils.initEvent(event, { type: 'resize', target: this.el });\n if (this.option.resize) {\n this.option.resize(ev, this._ui());\n }\n this.triggerEvent('resize', ev);\n return this;\n }\n\n /** @internal */\n protected _resizeStop(event: MouseEvent): DDResizable {\n const ev = Utils.initEvent(event, { type: 'resizestop', target: this.el });\n if (this.option.stop) {\n this.option.stop(ev); // Note: ui() not used by gridstack so don't pass\n }\n this.el.classList.remove('ui-resizable-resizing');\n this.triggerEvent('resizestop', ev);\n this._cleanHelper();\n delete this.startEvent;\n delete this.originalRect;\n delete this.temporalRect;\n delete this.scrollY;\n delete this.scrolled;\n return this;\n }\n\n /** @internal */\n protected _setupHelper(): DDResizable {\n this.elOriginStyleVal = DDResizable._originStyleProp.map(prop => this.el.style[prop]);\n this.parentOriginStylePosition = this.el.parentElement.style.position;\n\n const parent = this.el.parentElement;\n const dragTransform = Utils.getValuesFromTransformedElement(parent);\n this.rectScale = {\n x: dragTransform.xScale,\n y: dragTransform.yScale\n };\n\n if (getComputedStyle(this.el.parentElement).position.match(/static/)) {\n this.el.parentElement.style.position = 'relative';\n }\n this.el.style.position = 'absolute';\n this.el.style.opacity = '0.8';\n return this;\n }\n\n /** @internal */\n protected _cleanHelper(): DDResizable {\n DDResizable._originStyleProp.forEach((prop, i) => {\n this.el.style[prop] = this.elOriginStyleVal[i] || null;\n });\n this.el.parentElement.style.position = this.parentOriginStylePosition || null;\n return this;\n }\n\n /** @internal */\n protected _getChange(event: MouseEvent, dir: string): Rect {\n const oEvent = this.startEvent;\n const newRect = { // Note: originalRect is a complex object, not a simple Rect, so copy out.\n width: this.originalRect.width,\n height: this.originalRect.height + this.scrolled,\n left: this.originalRect.left,\n top: this.originalRect.top - this.scrolled\n };\n\n const offsetX = event.clientX - oEvent.clientX;\n const offsetY = this.sizeToContent ? 0 : event.clientY - oEvent.clientY; // prevent vert resize\n\n if (dir.indexOf('e') > -1) {\n newRect.width += offsetX;\n } else if (dir.indexOf('w') > -1) {\n newRect.width -= offsetX;\n newRect.left += offsetX;\n }\n if (dir.indexOf('s') > -1) {\n newRect.height += offsetY;\n } else if (dir.indexOf('n') > -1) {\n newRect.height -= offsetY;\n newRect.top += offsetY\n }\n const constrain = this._constrainSize(newRect.width, newRect.height);\n if (Math.round(newRect.width) !== Math.round(constrain.width)) { // round to ignore slight round-off errors\n if (dir.indexOf('w') > -1) {\n newRect.left += newRect.width - constrain.width;\n }\n newRect.width = constrain.width;\n }\n if (Math.round(newRect.height) !== Math.round(constrain.height)) {\n if (dir.indexOf('n') > -1) {\n newRect.top += newRect.height - constrain.height;\n }\n newRect.height = constrain.height;\n }\n return newRect;\n }\n\n /** @internal constrain the size to the set min/max values */\n protected _constrainSize(oWidth: number, oHeight: number): Size {\n const maxWidth = this.option.maxWidth || Number.MAX_SAFE_INTEGER;\n const minWidth = this.option.minWidth / this.rectScale.x || oWidth;\n const maxHeight = this.option.maxHeight || Number.MAX_SAFE_INTEGER;\n const minHeight = this.option.minHeight / this.rectScale.y || oHeight;\n const width = Math.min(maxWidth, Math.max(minWidth, oWidth));\n const height = Math.min(maxHeight, Math.max(minHeight, oHeight));\n return { width, height };\n }\n\n /** @internal */\n protected _applyChange(): DDResizable {\n let containmentRect = { left: 0, top: 0, width: 0, height: 0 };\n if (this.el.style.position === 'absolute') {\n const containmentEl = this.el.parentElement;\n const { left, top } = containmentEl.getBoundingClientRect();\n containmentRect = { left, top, width: 0, height: 0 };\n }\n if (!this.temporalRect) return this;\n Object.keys(this.temporalRect).forEach(key => {\n const value = this.temporalRect[key];\n const scaleReciprocal = key === 'width' || key === 'left' ? this.rectScale.x : key === 'height' || key === 'top' ? this.rectScale.y : 1;\n this.el.style[key] = (value - containmentRect[key]) * scaleReciprocal + 'px';\n });\n return this;\n }\n\n /** @internal */\n protected _removeHandlers(): DDResizable {\n this.handlers.forEach(handle => handle.destroy());\n delete this.handlers;\n return this;\n }\n\n /** @internal */\n protected _ui = (): DDUIData => {\n const containmentEl = this.el.parentElement;\n const containmentRect = containmentEl.getBoundingClientRect();\n const newRect = { // Note: originalRect is a complex object, not a simple Rect, so copy out.\n width: this.originalRect.width,\n height: this.originalRect.height + this.scrolled,\n left: this.originalRect.left,\n top: this.originalRect.top - this.scrolled\n };\n const rect = this.temporalRect || newRect;\n return {\n position: {\n left: (rect.left - containmentRect.left) * this.rectScale.x,\n top: (rect.top - containmentRect.top) * this.rectScale.y\n },\n size: {\n width: rect.width * this.rectScale.x,\n height: rect.height * this.rectScale.y\n }\n /* Gridstack ONLY needs position set above... keep around in case.\n element: [this.el], // The object representing the element to be resized\n helper: [], // TODO: not support yet - The object representing the helper that's being resized\n originalElement: [this.el],// we don't wrap here, so simplify as this.el //The object representing the original element before it is wrapped\n originalPosition: { // The position represented as { left, top } before the resizable is resized\n left: this.originalRect.left - containmentRect.left,\n top: this.originalRect.top - containmentRect.top\n },\n originalSize: { // The size represented as { width, height } before the resizable is resized\n width: this.originalRect.width,\n height: this.originalRect.height\n }\n */\n };\n }\n}\n","/**\n * touch.ts 10.3.0\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\n */\n\nimport { DDManager } from './dd-manager';\n\n/**\n * Detect touch support - Windows Surface devices and other touch devices\n * should we use this instead ? (what we had for always showing resize handles)\n * /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)\n */\nexport const isTouch: boolean = typeof window !== 'undefined' && typeof document !== 'undefined' &&\n( 'ontouchstart' in document\n || 'ontouchstart' in window\n // || !!window.TouchEvent // true on Windows 10 Chrome desktop so don't use this\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n || ((window as any).DocumentTouch && document instanceof (window as any).DocumentTouch)\n || navigator.maxTouchPoints > 0\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n || (navigator as any).msMaxTouchPoints > 0\n);\n\n// interface TouchCoord {x: number, y: number};\n\nclass DDTouch {\n public static touchHandled: boolean;\n public static pointerLeaveTimeout: number;\n}\n\n/**\n* Get the x,y position of a touch event\n*/\n// function getTouchCoords(e: TouchEvent): TouchCoord {\n// return {\n// x: e.changedTouches[0].pageX,\n// y: e.changedTouches[0].pageY\n// };\n// }\n\n/**\n * Simulate a mouse event based on a corresponding touch event\n * @param {Object} e A touch event\n * @param {String} simulatedType The corresponding mouse event\n */\nfunction simulateMouseEvent(e: TouchEvent, simulatedType: string) {\n\n // Ignore multi-touch events\n if (e.touches.length > 1) return;\n\n // Prevent \"Ignored attempt to cancel a touchmove event with cancelable=false\" errors\n if (e.cancelable) e.preventDefault();\n\n const touch = e.changedTouches[0], simulatedEvent = document.createEvent('MouseEvents');\n\n // Initialize the simulated mouse event using the touch event's coordinates\n simulatedEvent.initMouseEvent(\n simulatedType, // type\n true, // bubbles\n true, // cancelable\n window, // view\n 1, // detail\n touch.screenX, // screenX\n touch.screenY, // screenY\n touch.clientX, // clientX\n touch.clientY, // clientY\n false, // ctrlKey\n false, // altKey\n false, // shiftKey\n false, // metaKey\n 0, // button\n null // relatedTarget\n );\n\n // Dispatch the simulated event to the target element\n e.target.dispatchEvent(simulatedEvent);\n}\n\n/**\n * Simulate a mouse event based on a corresponding Pointer event\n * @param {Object} e A pointer event\n * @param {String} simulatedType The corresponding mouse event\n */\nfunction simulatePointerMouseEvent(e: PointerEvent, simulatedType: string) {\n\n // Prevent \"Ignored attempt to cancel a touchmove event with cancelable=false\" errors\n if (e.cancelable) e.preventDefault();\n\n const simulatedEvent = document.createEvent('MouseEvents');\n\n // Initialize the simulated mouse event using the touch event's coordinates\n simulatedEvent.initMouseEvent(\n simulatedType, // type\n true, // bubbles\n true, // cancelable\n window, // view\n 1, // detail\n e.screenX, // screenX\n e.screenY, // screenY\n e.clientX, // clientX\n e.clientY, // clientY\n false, // ctrlKey\n false, // altKey\n false, // shiftKey\n false, // metaKey\n 0, // button\n null // relatedTarget\n );\n\n // Dispatch the simulated event to the target element\n e.target.dispatchEvent(simulatedEvent);\n}\n\n\n/**\n * Handle the touchstart events\n * @param {Object} e The widget element's touchstart event\n */\nexport function touchstart(e: TouchEvent): void {\n // Ignore the event if another widget is already being handled\n if (DDTouch.touchHandled) return;\n DDTouch.touchHandled = true;\n\n // Simulate the mouse events\n // simulateMouseEvent(e, 'mouseover');\n // simulateMouseEvent(e, 'mousemove');\n simulateMouseEvent(e, 'mousedown');\n}\n\n/**\n * Handle the touchmove events\n * @param {Object} e The document's touchmove event\n */\nexport function touchmove(e: TouchEvent): void {\n // Ignore event if not handled by us\n if (!DDTouch.touchHandled) return;\n\n simulateMouseEvent(e, 'mousemove');\n}\n\n/**\n * Handle the touchend events\n * @param {Object} e The document's touchend event\n */\nexport function touchend(e: TouchEvent): void {\n\n // Ignore event if not handled\n if (!DDTouch.touchHandled) return;\n\n // cancel delayed leave event when we release on ourself which happens BEFORE we get this!\n if (DDTouch.pointerLeaveTimeout) {\n window.clearTimeout(DDTouch.pointerLeaveTimeout);\n delete DDTouch.pointerLeaveTimeout;\n }\n\n const wasDragging = !!DDManager.dragElement;\n\n // Simulate the mouseup event\n simulateMouseEvent(e, 'mouseup');\n // simulateMouseEvent(event, 'mouseout');\n\n // If the touch interaction did not move, it should trigger a click\n if (!wasDragging) {\n simulateMouseEvent(e, 'click');\n }\n\n // Unset the flag to allow other widgets to inherit the touch event\n DDTouch.touchHandled = false;\n}\n\n/**\n * Note we don't get touchenter/touchleave (which are deprecated)\n * see https://stackoverflow.com/questions/27908339/js-touch-equivalent-for-mouseenter\n * so instead of PointerEvent to still get enter/leave and send the matching mouse event.\n */\nexport function pointerdown(e: PointerEvent): void {\n // console.log(\"pointer down\")\n if (e.pointerType === 'mouse') return;\n (e.target as HTMLElement).releasePointerCapture(e.pointerId) // <- Important!\n}\n\nexport function pointerenter(e: PointerEvent): void {\n // ignore the initial one we get on pointerdown on ourself\n if (!DDManager.dragElement) {\n // console.log('pointerenter ignored');\n return;\n }\n // console.log('pointerenter');\n if (e.pointerType === 'mouse') return;\n simulatePointerMouseEvent(e, 'mouseenter');\n}\n\nexport function pointerleave(e: PointerEvent): void {\n // ignore the leave on ourself we get before releasing the mouse over ourself\n // by delaying sending the event and having the up event cancel us\n if (!DDManager.dragElement) {\n // console.log('pointerleave ignored');\n return;\n }\n if (e.pointerType === 'mouse') return;\n DDTouch.pointerLeaveTimeout = window.setTimeout(() => {\n delete DDTouch.pointerLeaveTimeout;\n // console.log('pointerleave delayed');\n simulatePointerMouseEvent(e, 'mouseleave');\n }, 10);\n}\n\n","/**\n * gridstack-engine.ts 10.3.0\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nimport { Utils } from './utils';\nimport { GridStackNode, ColumnOptions, GridStackPosition, GridStackMoveOpts, SaveFcn, CompactOptions } from './types';\n\n/** callback to update the DOM attributes since this class is generic (no HTML or other info) for items that changed - see _notify() */\ntype OnChangeCB = (nodes: GridStackNode[]) => void;\n\n/** options used during creation - similar to GridStackOptions */\nexport interface GridStackEngineOptions {\n column?: number;\n maxRow?: number;\n float?: boolean;\n nodes?: GridStackNode[];\n onChange?: OnChangeCB;\n}\n\n/**\n * Defines the GridStack engine that does most no DOM grid manipulation.\n * See GridStack methods and vars for descriptions.\n *\n * NOTE: values should not be modified directly - call the main GridStack API instead\n */\nexport class GridStackEngine {\n public column: number;\n public maxRow: number;\n public nodes: GridStackNode[];\n public addedNodes: GridStackNode[] = [];\n public removedNodes: GridStackNode[] = [];\n public batchMode: boolean;\n /** @internal callback to update the DOM attributes */\n protected onChange: OnChangeCB;\n /** @internal */\n protected _float: boolean;\n /** @internal */\n protected _prevFloat: boolean;\n /** @internal cached layouts of difference column count so we can restore back (eg 12 -> 1 -> 12) */\n protected _layouts?: GridStackNode[][]; // maps column # to array of values nodes\n /** @internal set during loading (which is sorted) so item gets added AFTER collision nodes */\n public _loading?: boolean\n /** @internal true while we are resizing widgets during column resize to skip certain parts */\n protected _inColumnResize?: boolean;\n /** @internal true if we have some items locked */\n protected _hasLocked: boolean;\n /** @internal unique global internal _id counter */\n public static _idSeq = 0;\n\n public constructor(opts: GridStackEngineOptions = {}) {\n this.column = opts.column || 12;\n this.maxRow = opts.maxRow;\n this._float = opts.float;\n this.nodes = opts.nodes || [];\n this.onChange = opts.onChange;\n }\n\n public batchUpdate(flag = true, doPack = true): GridStackEngine {\n if (!!this.batchMode === flag) return this;\n this.batchMode = flag;\n if (flag) {\n this._prevFloat = this._float;\n this._float = true; // let things go anywhere for now... will restore and possibly reposition later\n this.cleanNodes();\n this.saveInitial(); // since begin update (which is called multiple times) won't do this\n } else {\n this._float = this._prevFloat;\n delete this._prevFloat;\n if (doPack) this._packNodes();\n this._notify();\n }\n return this;\n }\n\n // use entire row for hitting area (will use bottom reverse sorted first) if we not actively moving DOWN and didn't already skip\n protected _useEntireRowArea(node: GridStackNode, nn: GridStackPosition): boolean {\n return (!this.float || this.batchMode && !this._prevFloat) && !this._hasLocked && (!node._moving || node._skipDown || nn.y <= node.y);\n }\n\n /** @internal fix collision on given 'node', going to given new location 'nn', with optional 'collide' node already found.\n * return true if we moved. */\n protected _fixCollisions(node: GridStackNode, nn = node, collide?: GridStackNode, opt: GridStackMoveOpts = {}): boolean {\n this.sortNodes(-1); // from last to first, so recursive collision move items in the right order\n\n collide = collide || this.collide(node, nn); // REAL area collide for swap and skip if none...\n if (!collide) return false;\n\n // swap check: if we're actively moving in gravity mode, see if we collide with an object the same size\n if (node._moving && !opt.nested && !this.float) {\n if (this.swap(node, collide)) return true;\n }\n\n // during while() collisions MAKE SURE to check entire row so larger items don't leap frog small ones (push them all down starting last in grid)\n let area = nn;\n if (!this._loading && this._useEntireRowArea(node, nn)) {\n area = {x: 0, w: this.column, y: nn.y, h: nn.h};\n collide = this.collide(node, area, opt.skip); // force new hit\n }\n\n let didMove = false;\n let newOpt: GridStackMoveOpts = {nested: true, pack: false};\n while (collide = collide || this.collide(node, area, opt.skip)) { // could collide with more than 1 item... so repeat for each\n let moved: boolean;\n // if colliding with a locked item OR loading (move after) OR moving down with top gravity (and collide could move up) -> skip past the collide,\n // but remember that skip down so we only do this once (and push others otherwise).\n if (collide.locked || this._loading || node._moving && !node._skipDown && nn.y > node.y && !this.float &&\n // can take space we had, or before where we're going\n (!this.collide(collide, {...collide, y: node.y}, node) || !this.collide(collide, {...collide, y: nn.y - collide.h}, node))) {\n node._skipDown = (node._skipDown || nn.y > node.y);\n moved = this.moveNode(node, {...nn, y: collide.y + collide.h, ...newOpt});\n if ((collide.locked || this._loading) && moved) {\n Utils.copyPos(nn, node); // moving after lock become our new desired location\n } else if (!collide.locked && moved && opt.pack) {\n // we moved after and will pack: do it now and keep the original drop location, but past the old collide to see what else we might push way\n this._packNodes();\n nn.y = collide.y + collide.h;\n Utils.copyPos(node, nn);\n }\n didMove = didMove || moved;\n } else {\n // move collide down *after* where we will be, ignoring where we are now (don't collide with us)\n moved = this.moveNode(collide, {...collide, y: nn.y + nn.h, skip: node, ...newOpt});\n }\n if (!moved) { return didMove; } // break inf loop if we couldn't move after all (ex: maxRow, fixed)\n collide = undefined;\n }\n return didMove;\n }\n\n /** return the nodes that intercept the given node. Optionally a different area can be used, as well as a second node to skip */\n public collide(skip: GridStackNode, area = skip, skip2?: GridStackNode): GridStackNode | undefined {\n const skipId = skip._id;\n const skip2Id = skip2?._id;\n return this.nodes.find(n => n._id !== skipId && n._id !== skip2Id && Utils.isIntercepted(n, area));\n }\n public collideAll(skip: GridStackNode, area = skip, skip2?: GridStackNode): GridStackNode[] {\n const skipId = skip._id;\n const skip2Id = skip2?._id;\n return this.nodes.filter(n => n._id !== skipId && n._id !== skip2Id && Utils.isIntercepted(n, area));\n }\n\n /** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */\n protected directionCollideCoverage(node: GridStackNode, o: GridStackMoveOpts, collides: GridStackNode[]): GridStackNode | undefined {\n if (!o.rect || !node._rect) return;\n let r0 = node._rect; // where started\n let r = {...o.rect}; // where we are\n\n // update dragged rect to show where it's coming from (above or below, etc...)\n if (r.y > r0.y) {\n r.h += r.y - r0.y;\n r.y = r0.y;\n } else {\n r.h += r0.y - r.y;\n }\n if (r.x > r0.x) {\n r.w += r.x - r0.x;\n r.x = r0.x;\n } else {\n r.w += r0.x - r.x;\n }\n\n let collide: GridStackNode;\n let overMax = 0.5; // need >50%\n for (let n of collides) {\n if (n.locked || !n._rect) {\n break;\n }\n let r2 = n._rect; // overlapping target\n let yOver = Number.MAX_VALUE, xOver = Number.MAX_VALUE;\n // depending on which side we started from, compute the overlap % of coverage\n // (ex: from above/below we only compute the max horizontal line coverage)\n if (r0.y < r2.y) { // from above\n yOver = ((r.y + r.h) - r2.y) / r2.h;\n } else if (r0.y + r0.h > r2.y + r2.h) { // from below\n yOver = ((r2.y + r2.h) - r.y) / r2.h;\n }\n if (r0.x < r2.x) { // from the left\n xOver = ((r.x + r.w) - r2.x) / r2.w;\n } else if (r0.x + r0.w > r2.x + r2.w) { // from the right\n xOver = ((r2.x + r2.w) - r.x) / r2.w;\n }\n let over = Math.min(xOver, yOver);\n if (over > overMax) {\n overMax = over;\n collide = n;\n }\n }\n o.collide = collide; // save it so we don't have to find it again\n return collide;\n }\n\n /** does a pixel coverage returning the node that has the most coverage by area */\n /*\n protected collideCoverage(r: GridStackPosition, collides: GridStackNode[]): {collide: GridStackNode, over: number} {\n let collide: GridStackNode;\n let overMax = 0;\n collides.forEach(n => {\n if (n.locked || !n._rect) return;\n let over = Utils.areaIntercept(r, n._rect);\n if (over > overMax) {\n overMax = over;\n collide = n;\n }\n });\n return {collide, over: overMax};\n }\n */\n\n /** called to cache the nodes pixel rectangles used for collision detection during drag */\n public cacheRects(w: number, h: number, top: number, right: number, bottom: number, left: number): GridStackEngine\n {\n this.nodes.forEach(n =>\n n._rect = {\n y: n.y * h + top,\n x: n.x * w + left,\n w: n.w * w - left - right,\n h: n.h * h - top - bottom\n }\n );\n return this;\n }\n\n /** called to possibly swap between 2 nodes (same size or column, not locked, touching), returning true if successful */\n public swap(a: GridStackNode, b: GridStackNode): boolean | undefined {\n if (!b || b.locked || !a || a.locked) return false;\n\n function _doSwap(): true { // assumes a is before b IFF they have different height (put after rather than exact swap)\n let x = b.x, y = b.y;\n b.x = a.x; b.y = a.y; // b -> a position\n if (a.h != b.h) {\n a.x = x; a.y = b.y + b.h; // a -> goes after b\n } else if (a.w != b.w) {\n a.x = b.x + b.w; a.y = y; // a -> goes after b\n } else {\n a.x = x; a.y = y; // a -> old b position\n }\n a._dirty = b._dirty = true;\n return true;\n }\n let touching: boolean; // remember if we called it (vs undefined)\n\n // same size and same row or column, and touching\n if (a.w === b.w && a.h === b.h && (a.x === b.x || a.y === b.y) && (touching = Utils.isTouching(a, b)))\n return _doSwap();\n if (touching === false) return; // IFF ran test and fail, bail out\n\n // check for taking same columns (but different height) and touching\n if (a.w === b.w && a.x === b.x && (touching || (touching = Utils.isTouching(a, b)))) {\n if (b.y < a.y) { let t = a; a = b; b = t; } // swap a <-> b vars so a is first\n return _doSwap();\n }\n if (touching === false) return;\n\n // check if taking same row (but different width) and touching\n if (a.h === b.h && a.y === b.y && (touching || (touching = Utils.isTouching(a, b)))) {\n if (b.x < a.x) { let t = a; a = b; b = t; } // swap a <-> b vars so a is first\n return _doSwap();\n }\n return false;\n }\n\n public isAreaEmpty(x: number, y: number, w: number, h: number): boolean {\n let nn: GridStackNode = {x: x || 0, y: y || 0, w: w || 1, h: h || 1};\n return !this.collide(nn);\n }\n\n /** re-layout grid items to reclaim any empty space - optionally keeping the sort order exactly the same ('list' mode) vs truly finding an empty spaces */\n public compact(layout: CompactOptions = 'compact', doSort = true): GridStackEngine {\n if (this.nodes.length === 0) return this;\n if (doSort) this.sortNodes();\n const wasBatch = this.batchMode;\n if (!wasBatch) this.batchUpdate();\n const wasColumnResize = this._inColumnResize;\n if (!wasColumnResize) this._inColumnResize = true; // faster addNode()\n let copyNodes = this.nodes;\n this.nodes = []; // pretend we have no nodes to conflict layout to start with...\n copyNodes.forEach((n, index, list) => {\n let after: GridStackNode;\n if (!n.locked) {\n n.autoPosition = true;\n if (layout === 'list' && index) after = list[index - 1];\n }\n this.addNode(n, false, after); // 'false' for add event trigger\n });\n if (!wasColumnResize) delete this._inColumnResize;\n if (!wasBatch) this.batchUpdate(false);\n return this;\n }\n\n /** enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html) */\n public set float(val: boolean) {\n if (this._float === val) return;\n this._float = val || false;\n if (!val) {\n this._packNodes()._notify();\n }\n }\n\n /** float getter method */\n public get float(): boolean { return this._float || false; }\n\n /** sort the nodes array from first to last, or reverse. Called during collision/placement to force an order */\n public sortNodes(dir: 1 | -1 = 1): GridStackEngine {\n this.nodes = Utils.sort(this.nodes, dir);\n return this;\n }\n\n /** @internal called to top gravity pack the items back OR revert back to original Y positions when floating */\n protected _packNodes(): GridStackEngine {\n if (this.batchMode) { return this; }\n this.sortNodes(); // first to last\n\n if (this.float) {\n // restore original Y pos\n this.nodes.forEach(n => {\n if (n._updating || n._orig === undefined || n.y === n._orig.y) return;\n let newY = n.y;\n while (newY > n._orig.y) {\n --newY;\n let collide = this.collide(n, {x: n.x, y: newY, w: n.w, h: n.h});\n if (!collide) {\n n._dirty = true;\n n.y = newY;\n }\n }\n });\n } else {\n // top gravity pack\n this.nodes.forEach((n, i) => {\n if (n.locked) return;\n while (n.y > 0) {\n let newY = i === 0 ? 0 : n.y - 1;\n let canBeMoved = i === 0 || !this.collide(n, {x: n.x, y: newY, w: n.w, h: n.h});\n if (!canBeMoved) break;\n // Note: must be dirty (from last position) for GridStack::OnChange CB to update positions\n // and move items back. The user 'change' CB should detect changes from the original\n // starting position instead.\n n._dirty = (n.y !== newY);\n n.y = newY;\n }\n });\n }\n return this;\n }\n\n /**\n * given a random node, makes sure it's coordinates/values are valid in the current grid\n * @param node to adjust\n * @param resizing if out of bound, resize down or move into the grid to fit ?\n */\n public prepareNode(node: GridStackNode, resizing?: boolean): GridStackNode {\n node._id = node._id ?? GridStackEngine._idSeq++;\n\n // if we're missing position, have the grid position us automatically (before we set them to 0,0)\n if (node.x === undefined || node.y === undefined || node.x === null || node.y === null) {\n node.autoPosition = true;\n }\n\n // assign defaults for missing required fields\n let defaults: GridStackNode = { x: 0, y: 0, w: 1, h: 1};\n Utils.defaults(node, defaults);\n\n if (!node.autoPosition) { delete node.autoPosition; }\n if (!node.noResize) { delete node.noResize; }\n if (!node.noMove) { delete node.noMove; }\n Utils.sanitizeMinMax(node);\n\n // check for NaN (in case messed up strings were passed. can't do parseInt() || defaults.x above as 0 is valid #)\n if (typeof node.x == 'string') { node.x = Number(node.x); }\n if (typeof node.y == 'string') { node.y = Number(node.y); }\n if (typeof node.w == 'string') { node.w = Number(node.w); }\n if (typeof node.h == 'string') { node.h = Number(node.h); }\n if (isNaN(node.x)) { node.x = defaults.x; node.autoPosition = true; }\n if (isNaN(node.y)) { node.y = defaults.y; node.autoPosition = true; }\n if (isNaN(node.w)) { node.w = defaults.w; }\n if (isNaN(node.h)) { node.h = defaults.h; }\n\n this.nodeBoundFix(node, resizing);\n return node;\n }\n\n /** part2 of preparing a node to fit inside our grid - checks for x,y,w from grid dimensions */\n public nodeBoundFix(node: GridStackNode, resizing?: boolean): GridStackEngine {\n\n let before = node._orig || Utils.copyPos({}, node);\n\n if (node.maxW) { node.w = Math.min(node.w, node.maxW); }\n if (node.maxH) { node.h = Math.min(node.h, node.maxH); }\n if (node.minW && node.minW <= this.column) { node.w = Math.max(node.w, node.minW); }\n if (node.minH) { node.h = Math.max(node.h, node.minH); }\n\n // if user loaded a larger than allowed widget for current # of columns,\n // remember it's position & width so we can restore back (1 -> 12 column) #1655 #1985\n // IFF we're not in the middle of column resizing!\n const saveOrig = (node.x || 0) + (node.w || 1) > this.column;\n if (saveOrig && this.column < 12 && !this._inColumnResize && node._id && this.findCacheLayout(node, 12) === -1) {\n let copy = {...node}; // need _id + positions\n if (copy.autoPosition || copy.x === undefined) { delete copy.x; delete copy.y; }\n else copy.x = Math.min(11, copy.x);\n copy.w = Math.min(12, copy.w || 1);\n this.cacheOneLayout(copy, 12);\n }\n\n if (node.w > this.column) {\n node.w = this.column;\n } else if (node.w < 1) {\n node.w = 1;\n }\n\n if (this.maxRow && node.h > this.maxRow) {\n node.h = this.maxRow;\n } else if (node.h < 1) {\n node.h = 1;\n }\n\n if (node.x < 0) {\n node.x = 0;\n }\n if (node.y < 0) {\n node.y = 0;\n }\n\n if (node.x + node.w > this.column) {\n if (resizing) {\n node.w = this.column - node.x;\n } else {\n node.x = this.column - node.w;\n }\n }\n if (this.maxRow && node.y + node.h > this.maxRow) {\n if (resizing) {\n node.h = this.maxRow - node.y;\n } else {\n node.y = this.maxRow - node.h;\n }\n }\n\n if (!Utils.samePos(node, before)) {\n node._dirty = true;\n }\n\n return this;\n }\n\n /** returns a list of modified nodes from their original values */\n public getDirtyNodes(verify?: boolean): GridStackNode[] {\n // compare original x,y,w,h instead as _dirty can be a temporary state\n if (verify) {\n return this.nodes.filter(n => n._dirty && !Utils.samePos(n, n._orig));\n }\n return this.nodes.filter(n => n._dirty);\n }\n\n /** @internal call this to call onChange callback with dirty nodes so DOM can be updated */\n protected _notify(removedNodes?: GridStackNode[]): GridStackEngine {\n if (this.batchMode || !this.onChange) return this;\n let dirtyNodes = (removedNodes || []).concat(this.getDirtyNodes());\n this.onChange(dirtyNodes);\n return this;\n }\n\n /** @internal remove dirty and last tried info */\n public cleanNodes(): GridStackEngine {\n if (this.batchMode) return this;\n this.nodes.forEach(n => {\n delete n._dirty;\n delete n._lastTried;\n });\n return this;\n }\n\n /** @internal called to save initial position/size to track real dirty state.\n * Note: should be called right after we call change event (so next API is can detect changes)\n * as well as right before we start move/resize/enter (so we can restore items to prev values) */\n public saveInitial(): GridStackEngine {\n this.nodes.forEach(n => {\n n._orig = Utils.copyPos({}, n);\n delete n._dirty;\n });\n this._hasLocked = this.nodes.some(n => n.locked);\n return this;\n }\n\n /** @internal restore all the nodes back to initial values (called when we leave) */\n public restoreInitial(): GridStackEngine {\n this.nodes.forEach(n => {\n if (Utils.samePos(n, n._orig)) return;\n Utils.copyPos(n, n._orig);\n n._dirty = true;\n });\n this._notify();\n return this;\n }\n\n /** find the first available empty spot for the given node width/height, updating the x,y attributes. return true if found.\n * optionally you can pass your own existing node list and column count, otherwise defaults to that engine data.\n * Optionally pass a widget to start search AFTER, meaning the order will remain the same but possibly have empty slots we skipped\n */\n public findEmptyPosition(node: GridStackNode, nodeList = this.nodes, column = this.column, after?: GridStackNode): boolean {\n let start = after ? after.y * column + (after.x + after.w) : 0;\n let found = false;\n for (let i = start; !found; ++i) {\n let x = i % column;\n let y = Math.floor(i / column);\n if (x + node.w > column) {\n continue;\n }\n let box = {x, y, w: node.w, h: node.h};\n if (!nodeList.find(n => Utils.isIntercepted(box, n))) {\n if (node.x !== x || node.y !== y) node._dirty = true;\n node.x = x;\n node.y = y;\n delete node.autoPosition;\n found = true;\n }\n }\n return found;\n }\n\n /** call to add the given node to our list, fixing collision and re-packing */\n public addNode(node: GridStackNode, triggerAddEvent = false, after?: GridStackNode): GridStackNode {\n let dup = this.nodes.find(n => n._id === node._id);\n if (dup) return dup; // prevent inserting twice! return it instead.\n\n // skip prepareNode if we're in middle of column resize (not new) but do check for bounds!\n this._inColumnResize ? this.nodeBoundFix(node) : this.prepareNode(node);\n delete node._temporaryRemoved;\n delete node._removeDOM;\n\n let skipCollision: boolean;\n if (node.autoPosition && this.findEmptyPosition(node, this.nodes, this.column, after)) {\n delete node.autoPosition; // found our slot\n skipCollision = true;\n }\n\n this.nodes.push(node);\n if (triggerAddEvent) { this.addedNodes.push(node); }\n\n if (!skipCollision) this._fixCollisions(node);\n if (!this.batchMode) { this._packNodes()._notify(); }\n return node;\n }\n\n public removeNode(node: GridStackNode, removeDOM = true, triggerEvent = false): GridStackEngine {\n if (!this.nodes.find(n => n._id === node._id)) {\n // TEST console.log(`Error: GridStackEngine.removeNode() node._id=${node._id} not found!`)\n return this;\n }\n if (triggerEvent) { // we wait until final drop to manually track removed items (rather than during drag)\n this.removedNodes.push(node);\n }\n if (removeDOM) node._removeDOM = true; // let CB remove actual HTML (used to set _id to null, but then we loose layout info)\n // don't use 'faster' .splice(findIndex(),1) in case node isn't in our list, or in multiple times.\n this.nodes = this.nodes.filter(n => n._id !== node._id);\n if (!node._isAboutToRemove) this._packNodes(); // if dragged out, no need to relayout as already done...\n this._notify([node]);\n return this;\n }\n\n public removeAll(removeDOM = true, triggerEvent = true): GridStackEngine {\n delete this._layouts;\n if (!this.nodes.length) return this;\n removeDOM && this.nodes.forEach(n => n._removeDOM = true); // let CB remove actual HTML (used to set _id to null, but then we loose layout info)\n const removedNodes = this.nodes;\n this.removedNodes = triggerEvent ? removedNodes : [];\n this.nodes = [];\n return this._notify(removedNodes);\n }\n\n /** checks if item can be moved (layout constrain) vs moveNode(), returning true if was able to move.\n * In more complicated cases (maxRow) it will attempt at moving the item and fixing\n * others in a clone first, then apply those changes if still within specs. */\n public moveNodeCheck(node: GridStackNode, o: GridStackMoveOpts): boolean {\n // if (node.locked) return false;\n if (!this.changedPosConstrain(node, o)) return false;\n o.pack = true;\n\n // simpler case: move item directly...\n if (!this.maxRow) {\n return this.moveNode(node, o);\n }\n\n // complex case: create a clone with NO maxRow (will check for out of bounds at the end)\n let clonedNode: GridStackNode;\n let clone = new GridStackEngine({\n column: this.column,\n float: this.float,\n nodes: this.nodes.map(n => {\n if (n._id === node._id) {\n clonedNode = {...n};\n return clonedNode;\n }\n return {...n};\n })\n });\n if (!clonedNode) return false;\n\n // check if we're covering 50% collision and could move, while still being under maxRow or at least not making it worse\n // (case where widget was somehow added past our max #2449)\n let canMove = clone.moveNode(clonedNode, o) && clone.getRow() <= Math.max(this.getRow(), this.maxRow);\n // else check if we can force a swap (float=true, or different shapes) on non-resize\n if (!canMove && !o.resizing && o.collide) {\n let collide = o.collide.el.gridstackNode; // find the source node the clone collided with at 50%\n if (this.swap(node, collide)) { // swaps and mark dirty\n this._notify();\n return true;\n }\n }\n if (!canMove) return false;\n\n // if clone was able to move, copy those mods over to us now instead of caller trying to do this all over!\n // Note: we can't use the list directly as elements and other parts point to actual node, so copy content\n clone.nodes.filter(n => n._dirty).forEach(c => {\n let n = this.nodes.find(a => a._id === c._id);\n if (!n) return;\n Utils.copyPos(n, c);\n n._dirty = true;\n });\n this._notify();\n return true;\n }\n\n /** return true if can fit in grid height constrain only (always true if no maxRow) */\n public willItFit(node: GridStackNode): boolean {\n delete node._willFitPos;\n if (!this.maxRow) return true;\n // create a clone with NO maxRow and check if still within size\n let clone = new GridStackEngine({\n column: this.column,\n float: this.float,\n nodes: this.nodes.map(n => {return {...n}})\n });\n let n = {...node}; // clone node so we don't mod any settings on it but have full autoPosition and min/max as well! #1687\n this.cleanupNode(n);\n delete n.el; delete n._id; delete n.content; delete n.grid;\n clone.addNode(n);\n if (clone.getRow() <= this.maxRow) {\n node._willFitPos = Utils.copyPos({}, n);\n return true;\n }\n return false;\n }\n\n /** true if x,y or w,h are different after clamping to min/max */\n public changedPosConstrain(node: GridStackNode, p: GridStackPosition): boolean {\n // first make sure w,h are set for caller\n p.w = p.w || node.w;\n p.h = p.h || node.h;\n if (node.x !== p.x || node.y !== p.y) return true;\n // check constrained w,h\n if (node.maxW) { p.w = Math.min(p.w, node.maxW); }\n if (node.maxH) { p.h = Math.min(p.h, node.maxH); }\n if (node.minW) { p.w = Math.max(p.w, node.minW); }\n if (node.minH) { p.h = Math.max(p.h, node.minH); }\n return (node.w !== p.w || node.h !== p.h);\n }\n\n /** return true if the passed in node was actually moved (checks for no-op and locked) */\n public moveNode(node: GridStackNode, o: GridStackMoveOpts): boolean {\n if (!node || /*node.locked ||*/ !o) return false;\n let wasUndefinedPack: boolean;\n if (o.pack === undefined && !this.batchMode) {\n wasUndefinedPack = o.pack = true;\n }\n\n // constrain the passed in values and check if we're still changing our node\n if (typeof o.x !== 'number') { o.x = node.x; }\n if (typeof o.y !== 'number') { o.y = node.y; }\n if (typeof o.w !== 'number') { o.w = node.w; }\n if (typeof o.h !== 'number') { o.h = node.h; }\n let resizing = (node.w !== o.w || node.h !== o.h);\n let nn: GridStackNode = Utils.copyPos({}, node, true); // get min/max out first, then opt positions next\n Utils.copyPos(nn, o);\n this.nodeBoundFix(nn, resizing);\n Utils.copyPos(o, nn);\n\n if (!o.forceCollide && Utils.samePos(node, o)) return false;\n let prevPos: GridStackPosition = Utils.copyPos({}, node);\n\n // check if we will need to fix collision at our new location\n let collides = this.collideAll(node, nn, o.skip);\n let needToMove = true;\n if (collides.length) {\n let activeDrag = node._moving && !o.nested;\n // check to make sure we actually collided over 50% surface area while dragging\n let collide = activeDrag ? this.directionCollideCoverage(node, o, collides) : collides[0];\n // if we're enabling creation of sub-grids on the fly, see if we're covering 80% of either one, if we didn't already do that\n if (activeDrag && collide && node.grid?.opts?.subGridDynamic && !node.grid._isTemp) {\n let over = Utils.areaIntercept(o.rect, collide._rect);\n let a1 = Utils.area(o.rect);\n let a2 = Utils.area(collide._rect);\n let perc = over / (a1 < a2 ? a1 : a2);\n if (perc > .8) {\n collide.grid.makeSubGrid(collide.el, undefined, node);\n collide = undefined;\n }\n }\n\n if (collide) {\n needToMove = !this._fixCollisions(node, nn, collide, o); // check if already moved...\n } else {\n needToMove = false; // we didn't cover >50% for a move, skip...\n if (wasUndefinedPack) delete o.pack;\n }\n }\n\n // now move (to the original ask vs the collision version which might differ) and repack things\n if (needToMove) {\n node._dirty = true;\n Utils.copyPos(node, nn);\n }\n if (o.pack) {\n this._packNodes()\n ._notify();\n }\n return !Utils.samePos(node, prevPos); // pack might have moved things back\n }\n\n public getRow(): number {\n return this.nodes.reduce((row, n) => Math.max(row, n.y + n.h), 0);\n }\n\n public beginUpdate(node: GridStackNode): GridStackEngine {\n if (!node._updating) {\n node._updating = true;\n delete node._skipDown;\n if (!this.batchMode) this.saveInitial();\n }\n return this;\n }\n\n public endUpdate(): GridStackEngine {\n let n = this.nodes.find(n => n._updating);\n if (n) {\n delete n._updating;\n delete n._skipDown;\n }\n return this;\n }\n\n /** saves a copy of the largest column layout (eg 12 even when rendering oneColumnMode) so we don't loose orig layout,\n * returning a list of widgets for serialization */\n public save(saveElement = true, saveCB?: SaveFcn): GridStackNode[] {\n // use the highest layout for any saved info so we can have full detail on reload #1849\n let len = this._layouts?.length;\n let layout = len && this.column !== (len - 1) ? this._layouts[len - 1] : null;\n let list: GridStackNode[] = [];\n this.sortNodes();\n this.nodes.forEach(n => {\n let wl = layout?.find(l => l._id === n._id);\n // use layout info fields instead if set\n let w: GridStackNode = {...n, ...(wl || {})};\n Utils.removeInternalForSave(w, !saveElement);\n if (saveCB) saveCB(n, w);\n list.push(w);\n });\n return list;\n }\n\n /** @internal called whenever a node is added or moved - updates the cached layouts */\n public layoutsNodesChange(nodes: GridStackNode[]): GridStackEngine {\n if (!this._layouts || this._inColumnResize) return this;\n // remove smaller layouts - we will re-generate those on the fly... larger ones need to update\n this._layouts.forEach((layout, column) => {\n if (!layout || column === this.column) return this;\n if (column < this.column) {\n this._layouts[column] = undefined;\n }\n else {\n // we save the original x,y,w (h isn't cached) to see what actually changed to propagate better.\n // NOTE: we don't need to check against out of bound scaling/moving as that will be done when using those cache values. #1785\n let ratio = column / this.column;\n nodes.forEach(node => {\n if (!node._orig) return; // didn't change (newly added ?)\n let n = layout.find(l => l._id === node._id);\n if (!n) return; // no cache for new nodes. Will use those values.\n // Y changed, push down same amount\n // TODO: detect doing item 'swaps' will help instead of move (especially in 1 column mode)\n if (n.y >= 0 && node.y !== node._orig.y) {\n n.y += (node.y - node._orig.y);\n }\n // X changed, scale from new position\n if (node.x !== node._orig.x) {\n n.x = Math.round(node.x * ratio);\n }\n // width changed, scale from new width\n if (node.w !== node._orig.w) {\n n.w = Math.round(node.w * ratio);\n }\n // ...height always carries over from cache\n });\n }\n });\n return this;\n }\n\n /**\n * @internal Called to scale the widget width & position up/down based on the column change.\n * Note we store previous layouts (especially original ones) to make it possible to go\n * from say 12 -> 1 -> 12 and get back to where we were.\n *\n * @param prevColumn previous number of columns\n * @param column new column number\n * @param layout specify the type of re-layout that will happen (position, size, etc...).\n * Note: items will never be outside of the current column boundaries. default (moveScale). Ignored for 1 column\n */\n public columnChanged(prevColumn: number, column: number, layout: ColumnOptions = 'moveScale'): GridStackEngine {\n if (!this.nodes.length || !column || prevColumn === column) return this;\n\n // in this mode no layout is done whatsoever, up to the caller to handle it\n if (layout === 'none') return this;\n\n // simpler shortcuts layouts\n const doCompact = layout === 'compact' || layout === 'list';\n if (doCompact) {\n this.sortNodes(1); // sort with original layout once and only once (new column will affect order otherwise)\n }\n\n // cache the current layout in case they want to go back (like 12 -> 1 -> 12) as it requires original data IFF we're sizing down (see below)\n if (column < prevColumn) this.cacheLayout(this.nodes, prevColumn);\n this.batchUpdate(); // do this EARLY as it will call saveInitial() so we can detect where we started for _dirty and collision\n let newNodes: GridStackNode[] = [];\n let nodes = doCompact ? this.nodes : Utils.sort(this.nodes, -1); // current column reverse sorting so we can insert last to front (limit collision)\n\n // see if we have cached previous layout IFF we are going up in size (restore) otherwise always\n // generate next size down from where we are (looks more natural as you gradually size down).\n if (column > prevColumn && this._layouts) {\n const cacheNodes = this._layouts[column] || [];\n // ...if not, start with the largest layout (if not already there) as down-scaling is more accurate\n // by pretending we came from that larger column by assigning those values as starting point\n let lastIndex = this._layouts.length - 1;\n if (!cacheNodes.length && prevColumn !== lastIndex && this._layouts[lastIndex]?.length) {\n prevColumn = lastIndex;\n this._layouts[lastIndex].forEach(cacheNode => {\n let n = nodes.find(n => n._id === cacheNode._id);\n if (n) {\n // still current, use cache info positions\n if (!doCompact && !cacheNode.autoPosition) {\n n.x = cacheNode.x ?? n.x;\n n.y = cacheNode.y ?? n.y;\n }\n n.w = cacheNode.w ?? n.w;\n if (cacheNode.x == undefined || cacheNode.y === undefined) n.autoPosition = true;\n }\n });\n }\n\n // if we found cache re-use those nodes that are still current\n cacheNodes.forEach(cacheNode => {\n let j = nodes.findIndex(n => n._id === cacheNode._id);\n if (j !== -1) {\n const n = nodes[j];\n // still current, use cache info positions\n if (doCompact) {\n n.w = cacheNode.w; // only w is used, and don't trim the list\n return;\n }\n if (cacheNode.autoPosition || isNaN(cacheNode.x) || isNaN(cacheNode.y)) {\n this.findEmptyPosition(cacheNode, newNodes);\n }\n if (!cacheNode.autoPosition) {\n n.x = cacheNode.x ?? n.x;\n n.y = cacheNode.y ?? n.y;\n n.w = cacheNode.w ?? n.w;\n newNodes.push(n);\n }\n nodes.splice(j, 1);\n }\n });\n }\n\n // much simpler layout that just compacts\n if (doCompact) {\n this.compact(layout, false);\n } else {\n // ...and add any extra non-cached ones\n if (nodes.length) {\n if (typeof layout === 'function') {\n layout(column, prevColumn, newNodes, nodes);\n } else {\n let ratio = doCompact ? 1 : column / prevColumn;\n let move = (layout === 'move' || layout === 'moveScale');\n let scale = (layout === 'scale' || layout === 'moveScale');\n nodes.forEach(node => {\n // NOTE: x + w could be outside of the grid, but addNode() below will handle that\n node.x = (column === 1 ? 0 : (move ? Math.round(node.x * ratio) : Math.min(node.x, column - 1)));\n node.w = ((column === 1 || prevColumn === 1) ? 1 : scale ? (Math.round(node.w * ratio) || 1) : (Math.min(node.w, column)));\n newNodes.push(node);\n });\n nodes = [];\n }\n }\n\n // finally re-layout them in reverse order (to get correct placement)\n newNodes = Utils.sort(newNodes, -1);\n this._inColumnResize = true; // prevent cache update\n this.nodes = []; // pretend we have no nodes to start with (add() will use same structures) to simplify layout\n newNodes.forEach(node => {\n this.addNode(node, false); // 'false' for add event trigger\n delete node._orig; // make sure the commit doesn't try to restore things back to original\n });\n }\n\n this.nodes.forEach(n => delete n._orig); // clear _orig before batch=false so it doesn't handle float=true restore\n this.batchUpdate(false, !doCompact);\n delete this._inColumnResize;\n return this;\n }\n\n /**\n * call to cache the given layout internally to the given location so we can restore back when column changes size\n * @param nodes list of nodes\n * @param column corresponding column index to save it under\n * @param clear if true, will force other caches to be removed (default false)\n */\n public cacheLayout(nodes: GridStackNode[], column: number, clear = false): GridStackEngine {\n let copy: GridStackNode[] = [];\n nodes.forEach((n, i) => {\n // make sure we have an id in case this is new layout, else re-use id already set\n if (n._id === undefined) {\n const existing = n.id ? this.nodes.find(n2 => n2.id === n.id) : undefined; // find existing node using users id\n n._id = existing?._id ?? GridStackEngine._idSeq++;\n }\n copy[i] = {x: n.x, y: n.y, w: n.w, _id: n._id} // only thing we change is x,y,w and id to find it back\n });\n this._layouts = clear ? [] : this._layouts || []; // use array to find larger quick\n this._layouts[column] = copy;\n return this;\n }\n\n /**\n * call to cache the given node layout internally to the given location so we can restore back when column changes size\n * @param node single node to cache\n * @param column corresponding column index to save it under\n */\n public cacheOneLayout(n: GridStackNode, column: number): GridStackEngine {\n n._id = n._id ?? GridStackEngine._idSeq++;\n let l: GridStackNode = {x: n.x, y: n.y, w: n.w, _id: n._id}\n if (n.autoPosition || n.x === undefined) { delete l.x; delete l.y; if (n.autoPosition) l.autoPosition = true; }\n this._layouts = this._layouts || [];\n this._layouts[column] = this._layouts[column] || [];\n let index = this.findCacheLayout(n, column);\n if (index === -1)\n this._layouts[column].push(l);\n else\n this._layouts[column][index] = l;\n return this;\n }\n\n protected findCacheLayout(n: GridStackNode, column: number): number | undefined {\n return this._layouts?.[column]?.findIndex(l => l._id === n._id) ?? -1;\n }\n\n public removeNodeFromLayoutCache(n: GridStackNode) {\n if (!this._layouts) {\n return;\n }\n for (let i = 0; i < this._layouts.length; i++) {\n let index = this.findCacheLayout(n, i);\n if (index !== -1) {\n this._layouts[i].splice(index, 1);\n }\n }\n }\n\n /** called to remove all internal values but the _id */\n public cleanupNode(node: GridStackNode): GridStackEngine {\n for (let prop in node) {\n if (prop[0] === '_' && prop !== '_id') delete node[prop];\n }\n return this;\n }\n}\n","/*!\r\n * GridStack 10.3.0\r\n * https://gridstackjs.com/\r\n *\r\n * Copyright (c) 2021-2022 Alain Dumesny\r\n * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE\r\n */\r\nimport { GridStackEngine } from './gridstack-engine';\r\nimport { Utils, HeightData, obsolete, DragTransform } from './utils';\r\nimport {\r\n gridDefaults, ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,\r\n GridStackNode, GridStackWidget, numberOrString, DDUIData, DDDragInOpt, GridStackPosition, GridStackOptions,\r\n dragInDefaultOptions, GridStackEventHandler, GridStackNodesHandler, AddRemoveFcn, SaveFcn, CompactOptions, GridStackMoveOpts, ResizeToContentFcn, GridStackDroppedHandler, GridStackElementHandler,\r\n Position\r\n} from './types';\r\n\r\n/*\r\n * and include D&D by default\r\n * TODO: while we could generate a gridstack-static.js at smaller size - saves about 31k (41k -> 72k)\r\n * I don't know how to generate the DD only code at the remaining 31k to delay load as code depends on Gridstack.ts\r\n * also it caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039\r\n */\r\nimport { DDGridStack } from './dd-gridstack';\r\nimport { isTouch } from './dd-touch';\r\nimport { DDManager } from './dd-manager';\r\nimport { DDElementHost } from './dd-element';/** global instance */\r\nconst dd = new DDGridStack;\r\n\r\n// export all dependent file as well to make it easier for users to just import the main file\r\nexport * from './types';\r\nexport * from './utils';\r\nexport * from './gridstack-engine';\r\nexport * from './dd-gridstack';\r\n\r\nexport interface GridHTMLElement extends HTMLElement {\r\n gridstack?: GridStack; // grid's parent DOM element points back to grid class\r\n}\r\n/** list of possible events, or space separated list of them */\r\nexport type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' |\r\n 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | 'resizecontent';\r\n\r\n/** Defines the coordinates of an object */\r\nexport interface MousePosition {\r\n top: number;\r\n left: number;\r\n}\r\n\r\n/** Defines the position of a cell inside the grid*/\r\nexport interface CellPosition {\r\n x: number;\r\n y: number;\r\n}\r\n\r\ninterface GridCSSStyleSheet extends CSSStyleSheet {\r\n _max?: number; // internal tracker of the max # of rows we created\r\n}\r\n\r\n// extend with internal fields we need - TODO: move other items in here\r\ninterface InternalGridStackOptions extends GridStackOptions {\r\n _alwaysShowResizeHandle?: true | false | 'mobile'; // so we can restore for save\r\n}\r\n\r\n// temporary legacy (<10.x) support\r\ninterface OldOneColumnOpts extends GridStackOptions {\r\n /** disables the onColumnMode when the grid width is less (default?: false) */\r\n disableOneColumnMode?: boolean;\r\n /** minimal width before grid will be shown in one column mode (default?: 768) */\r\n oneColumnSize?: number;\r\n /** set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column\r\n layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: false) */\r\n oneColumnModeDomSort?: boolean;\r\n}\r\n\r\n/**\r\n * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.\r\n * Note: your grid elements MUST have the following classes for the CSS layout to work:\r\n * @example\r\n *
\r\n *
\r\n *
Item 1
\r\n *
\r\n *
\r\n */\r\nexport class GridStack {\r\n\r\n /**\r\n * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will\r\n * simply return the existing instance (ignore any passed options). There is also an initAll() version that support\r\n * multiple grids initialization at once. Or you can use addGrid() to create the entire grid from JSON.\r\n * @param options grid options (optional)\r\n * @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)\r\n *\r\n * @example\r\n * let grid = GridStack.init();\r\n *\r\n * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later\r\n * let grid = document.querySelector('.grid-stack').gridstack;\r\n */\r\n public static init(options: GridStackOptions = {}, elOrString: GridStackElement = '.grid-stack'): GridStack {\r\n if (typeof document === 'undefined') return null; // temp workaround SSR\r\n let el = GridStack.getGridElement(elOrString);\r\n if (!el) {\r\n if (typeof elOrString === 'string') {\r\n console.error('GridStack.initAll() no grid was found with selector \"' + elOrString + '\" - element missing or wrong selector ?' +\r\n '\\nNote: \".grid-stack\" is required for proper CSS styling and drag/drop, and is the default selector.');\r\n } else {\r\n console.error('GridStack.init() no grid element was passed.');\r\n }\r\n return null;\r\n }\r\n if (!el.gridstack) {\r\n el.gridstack = new GridStack(el, Utils.cloneDeep(options));\r\n }\r\n return el.gridstack\r\n }\r\n\r\n /**\r\n * Will initialize a list of elements (given a selector) and return an array of grids.\r\n * @param options grid options (optional)\r\n * @param selector elements selector to convert to grids (default to '.grid-stack' class selector)\r\n *\r\n * @example\r\n * let grids = GridStack.initAll();\r\n * grids.forEach(...)\r\n */\r\n public static initAll(options: GridStackOptions = {}, selector = '.grid-stack'): GridStack[] {\r\n let grids: GridStack[] = [];\r\n if (typeof document === 'undefined') return grids; // temp workaround SSR\r\n GridStack.getGridElements(selector).forEach(el => {\r\n if (!el.gridstack) {\r\n el.gridstack = new GridStack(el, Utils.cloneDeep(options));\r\n }\r\n grids.push(el.gridstack);\r\n });\r\n if (grids.length === 0) {\r\n console.error('GridStack.initAll() no grid was found with selector \"' + selector + '\" - element missing or wrong selector ?' +\r\n '\\nNote: \".grid-stack\" is required for proper CSS styling and drag/drop, and is the default selector.');\r\n }\r\n return grids;\r\n }\r\n\r\n /**\r\n * call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then\r\n * grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from\r\n * JSON serialized data, including options.\r\n * @param parent HTML element parent to the grid\r\n * @param opt grids options used to initialize the grid, and list of children\r\n */\r\n public static addGrid(parent: HTMLElement, opt: GridStackOptions = {}): GridStack {\r\n if (!parent) return null;\r\n\r\n let el = parent as GridHTMLElement;\r\n if (el.gridstack) {\r\n // already a grid - set option and load data\r\n const grid = el.gridstack;\r\n if (opt) grid.opts = { ...grid.opts, ...opt };\r\n if (opt.children !== undefined) grid.load(opt.children);\r\n return grid;\r\n }\r\n\r\n // create the grid element, but check if the passed 'parent' already has grid styling and should be used instead\r\n const parentIsGrid = parent.classList.contains('grid-stack');\r\n if (!parentIsGrid || GridStack.addRemoveCB) {\r\n if (GridStack.addRemoveCB) {\r\n el = GridStack.addRemoveCB(parent, opt, true, true);\r\n } else {\r\n let doc = document.implementation.createHTMLDocument(''); // IE needs a param\r\n doc.body.innerHTML = `
`;\r\n el = doc.body.children[0] as HTMLElement;\r\n parent.appendChild(el);\r\n }\r\n }\r\n\r\n // create grid class and load any children\r\n let grid = GridStack.init(opt, el);\r\n return grid;\r\n }\r\n\r\n /** call this method to register your engine instead of the default one.\r\n * See instead `GridStackOptions.engineClass` if you only need to\r\n * replace just one instance.\r\n */\r\n static registerEngine(engineClass: typeof GridStackEngine): void {\r\n GridStack.engineClass = engineClass;\r\n }\r\n\r\n /**\r\n * callback method use when new items|grids needs to be created or deleted, instead of the default\r\n * item:
w.content
\r\n * grid:
grid content...
\r\n * add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init().\r\n * add = false: the item will be removed from DOM (if not already done)\r\n * grid = true|false for grid vs grid-items\r\n */\r\n public static addRemoveCB?: AddRemoveFcn;\r\n\r\n /**\r\n * callback during saving to application can inject extra data for each widget, on top of the grid layout properties\r\n */\r\n public static saveCB?: SaveFcn;\r\n\r\n /** callback to use for resizeToContent instead of the built in one */\r\n public static resizeToContentCB?: ResizeToContentFcn;\r\n /** parent class for sizing content. defaults to '.grid-stack-item-content' */\r\n public static resizeToContentParent = '.grid-stack-item-content';\r\n\r\n /** scoping so users can call GridStack.Utils.sort() for example */\r\n public static Utils = Utils;\r\n\r\n /** scoping so users can call new GridStack.Engine(12) for example */\r\n public static Engine = GridStackEngine;\r\n\r\n /** engine used to implement non DOM grid functionality */\r\n public engine: GridStackEngine;\r\n\r\n /** point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) */\r\n public parentGridItem?: GridStackNode;\r\n\r\n protected static engineClass: typeof GridStackEngine;\r\n protected resizeObserver: ResizeObserver;\r\n\r\n /** @internal unique class name for our generated CSS style sheet */\r\n protected _styleSheetClass?: string;\r\n /** @internal true if we got created by drag over gesture, so we can removed on drag out (temporary) */\r\n public _isTemp?: boolean;\r\n\r\n /** @internal create placeholder DIV as needed */\r\n public get placeholder(): GridItemHTMLElement {\r\n if (!this._placeholder) {\r\n let placeholderChild = document.createElement('div'); // child so padding match item-content\r\n placeholderChild.className = 'placeholder-content';\r\n if (this.opts.placeholderText) {\r\n placeholderChild.innerHTML = this.opts.placeholderText;\r\n }\r\n this._placeholder = document.createElement('div');\r\n this._placeholder.classList.add(this.opts.placeholderClass, gridDefaults.itemClass, this.opts.itemClass);\r\n this.placeholder.appendChild(placeholderChild);\r\n }\r\n return this._placeholder;\r\n }\r\n /** @internal */\r\n protected _placeholder: HTMLElement;\r\n /** @internal prevent cached layouts from being updated when loading into small column layouts */\r\n protected _ignoreLayoutsNodeChange: boolean;\r\n /** @internal */\r\n public _gsEventHandler = {};\r\n /** @internal */\r\n protected _styles: GridCSSStyleSheet;\r\n /** @internal flag to keep cells square during resize */\r\n protected _isAutoCellHeight: boolean;\r\n /** @internal limit auto cell resizing method */\r\n protected _sizeThrottle: () => void;\r\n /** @internal limit auto cell resizing method */\r\n protected prevWidth: number;\r\n /** @internal extra row added when dragging at the bottom of the grid */\r\n protected _extraDragRow = 0;\r\n /** @internal true if nested grid should get column count from our width */\r\n protected _autoColumn?: boolean;\r\n /** @internal meant to store the scale of the active grid */\r\n protected dragTransform: DragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 };\r\n private _skipInitialResize: boolean;\r\n\r\n /**\r\n * Construct a grid item from the given element and options\r\n * @param el the HTML element tied to this grid after it's been initialized\r\n * @param opts grid options - public for classes to access, but use methods to modify!\r\n */\r\n public constructor(public el: GridHTMLElement, public opts: GridStackOptions = {}) {\r\n el.gridstack = this;\r\n opts = opts || {}; // handles null/undefined/0\r\n\r\n if (!el.classList.contains('grid-stack')) {\r\n this.el.classList.add('grid-stack');\r\n }\r\n\r\n // if row property exists, replace minRow and maxRow instead\r\n if (opts.row) {\r\n opts.minRow = opts.maxRow = opts.row;\r\n delete opts.row;\r\n }\r\n let rowAttr = Utils.toNumber(el.getAttribute('gs-row'));\r\n\r\n // flag only valid in sub-grids (handled by parent, not here)\r\n if (opts.column === 'auto') {\r\n delete opts.column;\r\n }\r\n // save original setting so we can restore on save\r\n if (opts.alwaysShowResizeHandle !== undefined) {\r\n (opts as InternalGridStackOptions)._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;\r\n }\r\n let bk = opts.columnOpts?.breakpoints;\r\n // LEGACY: oneColumnMode stuff changed in v10.x - check if user explicitly set something to convert over\r\n const oldOpts: OldOneColumnOpts = opts;\r\n if (oldOpts.oneColumnModeDomSort) {\r\n delete oldOpts.oneColumnModeDomSort;\r\n console.log('warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.')\r\n }\r\n if (oldOpts.oneColumnSize || oldOpts.disableOneColumnMode === false) {\r\n const oneSize = oldOpts.oneColumnSize || 768;\r\n delete oldOpts.oneColumnSize;\r\n delete oldOpts.disableOneColumnMode;\r\n opts.columnOpts = opts.columnOpts || {};\r\n bk = opts.columnOpts.breakpoints = opts.columnOpts.breakpoints || [];\r\n let oneColumn = bk.find(b => b.c === 1);\r\n if (!oneColumn) {\r\n oneColumn = { c: 1, w: oneSize };\r\n bk.push(oneColumn, { c: 12, w: oneSize + 1 });\r\n } else oneColumn.w = oneSize;\r\n }\r\n //...end LEGACY\r\n // cleanup responsive opts (must have columnWidth | breakpoints) then sort breakpoints by size (so we can match during resize)\r\n const resp = opts.columnOpts;\r\n if (resp) {\r\n if (!resp.columnWidth && !resp.breakpoints?.length) {\r\n delete opts.columnOpts;\r\n bk = undefined;\r\n } else {\r\n resp.columnMax = resp.columnMax || 12;\r\n }\r\n }\r\n if (bk?.length > 1) bk.sort((a, b) => (b.w || 0) - (a.w || 0));\r\n\r\n // elements DOM attributes override any passed options (like CSS style) - merge the two together\r\n let defaults: GridStackOptions = {\r\n ...Utils.cloneDeep(gridDefaults),\r\n column: Utils.toNumber(el.getAttribute('gs-column')) || gridDefaults.column,\r\n minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || gridDefaults.minRow,\r\n maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-max-row')) || gridDefaults.maxRow,\r\n staticGrid: Utils.toBool(el.getAttribute('gs-static')) || gridDefaults.staticGrid,\r\n draggable: {\r\n handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || gridDefaults.draggable.handle,\r\n },\r\n removableOptions: {\r\n accept: opts.itemClass || gridDefaults.removableOptions.accept,\r\n decline: gridDefaults.removableOptions.decline\r\n },\r\n };\r\n if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead\r\n defaults.animate = Utils.toBool(el.getAttribute('gs-animate'))\r\n }\r\n\r\n opts = Utils.defaults(opts, defaults);\r\n this._initMargin(); // part of settings defaults...\r\n\r\n // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)\r\n this.checkDynamicColumn();\r\n this.el.classList.add('gs-' + opts.column);\r\n\r\n if (opts.rtl === 'auto') {\r\n opts.rtl = (el.style.direction === 'rtl');\r\n }\r\n if (opts.rtl) {\r\n this.el.classList.add('grid-stack-rtl');\r\n }\r\n\r\n // check if we're been nested, and if so update our style and keep pointer around (used during save)\r\n const grandParent: GridItemHTMLElement = this.el.parentElement?.parentElement;\r\n let parentGridItem = grandParent?.classList.contains(gridDefaults.itemClass) ? grandParent.gridstackNode : undefined;\r\n if (parentGridItem) {\r\n parentGridItem.subGrid = this;\r\n this.parentGridItem = parentGridItem;\r\n this.el.classList.add('grid-stack-nested');\r\n parentGridItem.el.classList.add('grid-stack-sub-grid');\r\n }\r\n\r\n this._isAutoCellHeight = (opts.cellHeight === 'auto');\r\n if (this._isAutoCellHeight || opts.cellHeight === 'initial') {\r\n // make the cell content square initially (will use resize/column event to keep it square)\r\n this.cellHeight(undefined, false);\r\n } else {\r\n // append unit if any are set\r\n if (typeof opts.cellHeight == 'number' && opts.cellHeightUnit && opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {\r\n opts.cellHeight = opts.cellHeight + opts.cellHeightUnit;\r\n delete opts.cellHeightUnit;\r\n }\r\n this.cellHeight(opts.cellHeight, false);\r\n }\r\n\r\n // see if we need to adjust auto-hide\r\n if (opts.alwaysShowResizeHandle === 'mobile') {\r\n opts.alwaysShowResizeHandle = isTouch;\r\n }\r\n\r\n this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;\r\n this.el.classList.add(this._styleSheetClass);\r\n\r\n this._setStaticClass();\r\n\r\n let engineClass = opts.engineClass || GridStack.engineClass || GridStackEngine;\r\n this.engine = new engineClass({\r\n column: this.getColumn(),\r\n float: opts.float,\r\n maxRow: opts.maxRow,\r\n onChange: (cbNodes) => {\r\n let maxH = 0;\r\n this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h) });\r\n cbNodes.forEach(n => {\r\n let el = n.el;\r\n if (!el) return;\r\n if (n._removeDOM) {\r\n if (el) el.remove();\r\n delete n._removeDOM;\r\n } else {\r\n this._writePosAttr(el, n);\r\n }\r\n });\r\n this._updateStyles(false, maxH); // false = don't recreate, just append if need be\r\n }\r\n });\r\n\r\n // create initial global styles BEFORE loading children so resizeToContent margin can be calculated correctly\r\n this._updateStyles(false, 0);\r\n\r\n if (opts.auto) {\r\n this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...\r\n this.engine._loading = true; // loading collision check\r\n this.getGridItems().forEach(el => this._prepareElement(el));\r\n delete this.engine._loading;\r\n this.batchUpdate(false);\r\n }\r\n\r\n // load any passed in children as well, which overrides any DOM layout done above\r\n if (opts.children) {\r\n const children = opts.children;\r\n delete opts.children;\r\n if (children.length) this.load(children); // don't load empty\r\n }\r\n\r\n // if (this.engine.nodes.length) this._updateStyles(); // update based on # of children. done in engine onChange CB\r\n this.setAnimation();\r\n\r\n // dynamic grids require pausing during drag to detect over to nest vs push\r\n if (opts.subGridDynamic && !DDManager.pauseDrag) DDManager.pauseDrag = true;\r\n if (opts.draggable?.pause !== undefined) DDManager.pauseDrag = opts.draggable.pause;\r\n\r\n this._setupRemoveDrop();\r\n this._setupAcceptWidget();\r\n this._updateResizeEvent();\r\n }\r\n\r\n /**\r\n * add a new widget and returns it.\r\n *\r\n * Widget will be always placed even if result height is more than actual grid height.\r\n * You need to use `willItFit()` before calling addWidget for additional check.\r\n * See also `makeWidget()`.\r\n *\r\n * @example\r\n * let grid = GridStack.init();\r\n * grid.addWidget({w: 3, content: 'hello'});\r\n * grid.addWidget('
hello
', {w: 3});\r\n *\r\n * @param el GridStackWidget (which can have content string as well), html element, or string definition to add\r\n * @param options widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget\r\n */\r\n public addWidget(els?: GridStackWidget | GridStackElement, options?: GridStackWidget): GridItemHTMLElement {\r\n function isGridStackWidget(w: GridStackNode): w is GridStackNode { // https://medium.com/ovrsea/checking-the-type-of-an-object-in-typescript-the-type-guards-24d98d9119b0\r\n return w.el !== undefined || w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;\r\n }\r\n\r\n let el: GridItemHTMLElement;\r\n let node: GridStackNode;\r\n if (typeof els === 'string') {\r\n let doc = document.implementation.createHTMLDocument(''); // IE needs a param\r\n doc.body.innerHTML = els;\r\n el = doc.body.children[0] as HTMLElement;\r\n } else if (arguments.length === 0 || arguments.length === 1 && isGridStackWidget(els)) {\r\n node = options = els;\r\n if (node?.el) {\r\n el = node.el; // re-use element stored in the node\r\n } else if (GridStack.addRemoveCB) {\r\n el = GridStack.addRemoveCB(this.el, options, true, false);\r\n } else {\r\n let content = options?.content || '';\r\n let doc = document.implementation.createHTMLDocument(''); // IE needs a param\r\n doc.body.innerHTML = `
${content}
`;\r\n el = doc.body.children[0] as HTMLElement;\r\n }\r\n } else {\r\n el = els as HTMLElement;\r\n }\r\n\r\n if (!el) return;\r\n\r\n // if the caller ended up initializing the widget in addRemoveCB, or we stared with one already, skip the rest\r\n node = el.gridstackNode;\r\n if (node && el.parentElement === this.el && this.engine.nodes.find(n => n._id === node._id)) return el;\r\n\r\n // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos\r\n // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.\r\n // So make sure we load any DOM attributes that are not specified in passed in options (which override)\r\n let domAttr = this._readAttr(el);\r\n options = Utils.cloneDeep(options) || {}; // make a copy before we modify in case caller re-uses it\r\n Utils.defaults(options, domAttr);\r\n node = this.engine.prepareNode(options);\r\n this._writeAttr(el, options);\r\n\r\n this.el.appendChild(el);\r\n\r\n this.makeWidget(el, options);\r\n\r\n return el;\r\n }\r\n\r\n /**\r\n * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them\r\n * from the parent's subGrid options.\r\n * @param el gridItem element to convert\r\n * @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults\r\n * @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item)\r\n * @param saveContent if true (default) the html inside .grid-stack-content will be saved to child widget\r\n * @returns newly created grid\r\n */\r\n public makeSubGrid(el: GridItemHTMLElement, ops?: GridStackOptions, nodeToAdd?: GridStackNode, saveContent = true): GridStack {\r\n let node = el.gridstackNode;\r\n if (!node) {\r\n node = this.makeWidget(el).gridstackNode;\r\n }\r\n if (node.subGrid?.el) return node.subGrid; // already done\r\n\r\n // find the template subGrid stored on a parent as fallback...\r\n let subGridTemplate: GridStackOptions; // eslint-disable-next-line @typescript-eslint/no-this-alias\r\n let grid: GridStack = this;\r\n while (grid && !subGridTemplate) {\r\n subGridTemplate = grid.opts?.subGridOpts;\r\n grid = grid.parentGridItem?.grid;\r\n }\r\n //... and set the create options\r\n ops = Utils.cloneDeep({ ...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts || {}) });\r\n node.subGridOpts = ops;\r\n\r\n // if column special case it set, remember that flag and set default\r\n let autoColumn: boolean;\r\n if (ops.column === 'auto') {\r\n autoColumn = true;\r\n ops.column = Math.max(node.w || 1, nodeToAdd?.w || 1);\r\n delete ops.columnOpts; // driven by parent\r\n }\r\n\r\n // if we're converting an existing full item, move over the content to be the first sub item in the new grid\r\n let content = node.el.querySelector('.grid-stack-item-content') as HTMLElement;\r\n let newItem: HTMLElement;\r\n let newItemOpt: GridStackNode;\r\n if (saveContent) {\r\n this._removeDD(node.el); // remove D&D since it's set on content div\r\n newItemOpt = { ...node, x: 0, y: 0 };\r\n Utils.removeInternalForSave(newItemOpt);\r\n delete newItemOpt.subGridOpts;\r\n if (node.content) {\r\n newItemOpt.content = node.content;\r\n delete node.content;\r\n }\r\n if (GridStack.addRemoveCB) {\r\n newItem = GridStack.addRemoveCB(this.el, newItemOpt, true, false);\r\n } else {\r\n let doc = document.implementation.createHTMLDocument(''); // IE needs a param\r\n doc.body.innerHTML = `
`;\r\n newItem = doc.body.children[0] as HTMLElement;\r\n newItem.appendChild(content);\r\n doc.body.innerHTML = `
`;\r\n content = doc.body.children[0] as HTMLElement;\r\n node.el.appendChild(content);\r\n }\r\n this._prepareDragDropByNode(node); // ... and restore original D&D\r\n }\r\n\r\n // if we're adding an additional item, make the container large enough to have them both\r\n if (nodeToAdd) {\r\n let w = autoColumn ? ops.column : node.w;\r\n let h = node.h + nodeToAdd.h;\r\n let style = node.el.style;\r\n style.transition = 'none'; // show up instantly so we don't see scrollbar with nodeToAdd\r\n this.update(node.el, { w, h });\r\n setTimeout(() => style.transition = null); // recover animation\r\n }\r\n\r\n let subGrid = node.subGrid = GridStack.addGrid(content, ops);\r\n if (nodeToAdd?._moving) subGrid._isTemp = true; // prevent re-nesting as we add over\r\n if (autoColumn) subGrid._autoColumn = true;\r\n\r\n // add the original content back as a child of hte newly created grid\r\n if (saveContent) {\r\n subGrid.addWidget(newItem, newItemOpt);\r\n }\r\n\r\n // now add any additional node\r\n if (nodeToAdd) {\r\n if (nodeToAdd._moving) {\r\n // create an artificial event even for the just created grid to receive this item\r\n window.setTimeout(() => Utils.simulateMouseEvent(nodeToAdd._event, 'mouseenter', subGrid.el), 0);\r\n } else {\r\n subGrid.addWidget(node.el, node);\r\n }\r\n }\r\n return subGrid;\r\n }\r\n\r\n /**\r\n * called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back\r\n * to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)\r\n */\r\n public removeAsSubGrid(nodeThatRemoved?: GridStackNode): void {\r\n let pGrid = this.parentGridItem?.grid;\r\n if (!pGrid) return;\r\n\r\n pGrid.batchUpdate();\r\n pGrid.removeWidget(this.parentGridItem.el, true, true);\r\n this.engine.nodes.forEach(n => {\r\n // migrate any children over and offsetting by our location\r\n n.x += this.parentGridItem.x;\r\n n.y += this.parentGridItem.y;\r\n pGrid.addWidget(n.el, n);\r\n });\r\n pGrid.batchUpdate(false);\r\n if (this.parentGridItem) delete this.parentGridItem.subGrid;\r\n delete this.parentGridItem;\r\n\r\n // create an artificial event for the original grid now that this one is gone (got a leave, but won't get enter)\r\n if (nodeThatRemoved) {\r\n window.setTimeout(() => Utils.simulateMouseEvent(nodeThatRemoved._event, 'mouseenter', pGrid.el), 0);\r\n }\r\n }\r\n\r\n /**\r\n * saves the current layout returning a list of widgets for serialization which might include any nested grids.\r\n * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will\r\n * be removed.\r\n * @param saveGridOpt if true (default false), save the grid options itself, so you can call the new GridStack.addGrid()\r\n * to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.\r\n * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.\r\n * @returns list of widgets or full grid option, including .children list of widgets\r\n */\r\n public save(saveContent = true, saveGridOpt = false, saveCB = GridStack.saveCB): GridStackWidget[] | GridStackOptions {\r\n // return copied GridStackWidget (with optionally .el) we can modify at will...\r\n let list = this.engine.save(saveContent, saveCB);\r\n\r\n // check for HTML content and nested grids\r\n list.forEach(n => {\r\n if (saveContent && n.el && !n.subGrid && !saveCB) { // sub-grid are saved differently, not plain content\r\n let sub = n.el.querySelector('.grid-stack-item-content');\r\n n.content = sub ? sub.innerHTML : undefined;\r\n if (!n.content) delete n.content;\r\n } else {\r\n if (!saveContent && !saveCB) { delete n.content; }\r\n // check for nested grid\r\n if (n.subGrid?.el) {\r\n const listOrOpt = n.subGrid.save(saveContent, saveGridOpt, saveCB);\r\n n.subGridOpts = (saveGridOpt ? listOrOpt : { children: listOrOpt }) as GridStackOptions;\r\n delete n.subGrid;\r\n }\r\n }\r\n delete n.el;\r\n });\r\n\r\n // check if save entire grid options (needed for recursive) + children...\r\n if (saveGridOpt) {\r\n let o: InternalGridStackOptions = Utils.cloneDeep(this.opts);\r\n // delete default values that will be recreated on launch\r\n if (o.marginBottom === o.marginTop && o.marginRight === o.marginLeft && o.marginTop === o.marginRight) {\r\n o.margin = o.marginTop;\r\n delete o.marginTop; delete o.marginRight; delete o.marginBottom; delete o.marginLeft;\r\n }\r\n if (o.rtl === (this.el.style.direction === 'rtl')) { o.rtl = 'auto' }\r\n if (this._isAutoCellHeight) {\r\n o.cellHeight = 'auto'\r\n }\r\n if (this._autoColumn) {\r\n o.column = 'auto';\r\n }\r\n const origShow = o._alwaysShowResizeHandle;\r\n delete o._alwaysShowResizeHandle;\r\n if (origShow !== undefined) {\r\n o.alwaysShowResizeHandle = origShow;\r\n } else {\r\n delete o.alwaysShowResizeHandle;\r\n }\r\n Utils.removeInternalAndSame(o, gridDefaults);\r\n o.children = list;\r\n return o;\r\n }\r\n\r\n return list;\r\n }\r\n\r\n /**\r\n * load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.\r\n *\r\n * @param layout list of widgets definition to update/create\r\n * @param addAndRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving\r\n * the user control of insertion.\r\n *\r\n * @example\r\n * see http://gridstackjs.com/demo/serialization.html\r\n */\r\n public load(items: GridStackWidget[], addRemove: boolean | AddRemoveFcn = GridStack.addRemoveCB || true): GridStack {\r\n items = Utils.cloneDeep(items); // so we can mod\r\n const column = this.getColumn();\r\n\r\n // make sure size 1x1 (default) is present as it may need to override current sizes\r\n items.forEach(n => { n.w = n.w || 1; n.h = n.h || 1 });\r\n\r\n // sort items. those without coord will be appended last\r\n items = Utils.sort(items);\r\n\r\n // if we're loading a layout into for example 1 column and items don't fit, make sure to save\r\n // the original wanted layout so we can scale back up correctly #1471\r\n let maxColumn = 0;\r\n items.forEach(n => { maxColumn = Math.max(maxColumn, (n.x || 0) + n.w) });\r\n if (maxColumn > column) {\r\n this._ignoreLayoutsNodeChange = true; // skip layout update\r\n this.engine.cacheLayout(items, maxColumn, true);\r\n }\r\n\r\n // if given a different callback, temporally set it as global option so creating will use it\r\n const prevCB = GridStack.addRemoveCB;\r\n if (typeof (addRemove) === 'function') GridStack.addRemoveCB = addRemove as AddRemoveFcn;\r\n\r\n let removed: GridStackNode[] = [];\r\n this.batchUpdate();\r\n\r\n // if we are loading from empty temporarily remove animation\r\n const blank = !this.engine.nodes.length;\r\n if (blank) this.setAnimation(false);\r\n\r\n // see if any items are missing from new layout and need to be removed first\r\n if (!blank && addRemove) {\r\n let copyNodes = [...this.engine.nodes]; // don't loop through array you modify\r\n copyNodes.forEach(n => {\r\n if (!n.id) return;\r\n let item = Utils.find(items, n.id);\r\n if (!item) {\r\n if (GridStack.addRemoveCB) GridStack.addRemoveCB(this.el, n, false, false);\r\n removed.push(n); // batch keep track\r\n this.removeWidget(n.el, true, false);\r\n }\r\n });\r\n }\r\n\r\n // now add/update the widgets - starting with removing items in the new layout we will reposition\r\n // to reduce collision and add no-coord ones at next available spot\r\n this.engine._loading = true; // help with collision\r\n let updateNodes: GridStackWidget[] = [];\r\n this.engine.nodes = this.engine.nodes.filter(n => {\r\n if (Utils.find(items, n.id)) { updateNodes.push(n); return false; } // remove if found from list\r\n return true;\r\n });\r\n items.forEach(w => {\r\n let item = Utils.find(updateNodes, w.id);\r\n if (item) {\r\n // if item sizes to content, re-use the exiting height so it's a better guess at the final size (same if width doesn't change)\r\n if (Utils.shouldSizeToContent(item)) w.h = item.h;\r\n // check if missing coord, in which case find next empty slot with new (or old if missing) sizes\r\n this.engine.nodeBoundFix(w);\r\n if (w.autoPosition || w.x === undefined || w.y === undefined) {\r\n w.w = w.w || item.w;\r\n w.h = w.h || item.h;\r\n this.engine.findEmptyPosition(w);\r\n }\r\n\r\n // add back to current list BUT force a collision check if it 'appears' we didn't change to make sure we don't overlap others now\r\n this.engine.nodes.push(item);\r\n if (Utils.samePos(item, w)) {\r\n this.moveNode(item, { ...w, forceCollide: true });\r\n }\r\n\r\n this.update(item.el, w);\r\n if (w.subGridOpts?.children) { // update any sub grid as well\r\n let sub = item.el.querySelector('.grid-stack') as GridHTMLElement;\r\n if (sub && sub.gridstack) {\r\n sub.gridstack.load(w.subGridOpts.children); // TODO: support updating grid options ?\r\n }\r\n }\r\n } else if (addRemove) {\r\n this.addWidget(w);\r\n }\r\n });\r\n\r\n delete this.engine._loading; // done loading\r\n this.engine.removedNodes = removed;\r\n this.batchUpdate(false);\r\n\r\n // after commit, clear that flag\r\n delete this._ignoreLayoutsNodeChange;\r\n prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;\r\n // delay adding animation back\r\n if (blank && this.opts?.animate) this.setAnimation(this.opts.animate, true);\r\n return this;\r\n }\r\n\r\n /**\r\n * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)\r\n * and get a single event callback. You will see no changes until `batchUpdate(false)` is called.\r\n */\r\n public batchUpdate(flag = true): GridStack {\r\n this.engine.batchUpdate(flag);\r\n if (!flag) {\r\n this._updateContainerHeight();\r\n this._triggerRemoveEvent();\r\n this._triggerAddEvent();\r\n this._triggerChangeEvent();\r\n }\r\n return this;\r\n }\r\n\r\n /**\r\n * Gets current cell height.\r\n */\r\n public getCellHeight(forcePixel = false): number {\r\n if (this.opts.cellHeight && this.opts.cellHeight !== 'auto' &&\r\n (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {\r\n return this.opts.cellHeight as number;\r\n }\r\n // do rem/em/cm/mm to px conversion\r\n if (this.opts.cellHeightUnit === 'rem') {\r\n return (this.opts.cellHeight as number) * parseFloat(getComputedStyle(document.documentElement).fontSize);\r\n }\r\n if (this.opts.cellHeightUnit === 'em') {\r\n return (this.opts.cellHeight as number) * parseFloat(getComputedStyle(this.el).fontSize);\r\n }\r\n if (this.opts.cellHeightUnit === 'cm') {\r\n // 1cm = 96px/2.54. See https://www.w3.org/TR/css-values-3/#absolute-lengths\r\n return (this.opts.cellHeight as number) * (96 / 2.54);\r\n }\r\n if (this.opts.cellHeightUnit === 'mm') {\r\n return (this.opts.cellHeight as number) * (96 / 2.54) / 10;\r\n }\r\n // else get first cell height\r\n let el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement;\r\n if (el) {\r\n let h = Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore\r\n return Math.round(el.offsetHeight / h);\r\n }\r\n // else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)\r\n let rows = parseInt(this.el.getAttribute('gs-current-row'));\r\n return rows ? Math.round(this.el.getBoundingClientRect().height / rows) : this.opts.cellHeight as number;\r\n }\r\n\r\n /**\r\n * Update current cell height - see `GridStackOptions.cellHeight` for format.\r\n * This method rebuilds an internal CSS style sheet.\r\n * Note: You can expect performance issues if call this method too often.\r\n *\r\n * @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin),\r\n * if pass 0 the CSS will be generated by the application instead.\r\n * @param update (Optional) if false, styles will not be updated\r\n *\r\n * @example\r\n * grid.cellHeight(100); // same as 100px\r\n * grid.cellHeight('70px');\r\n * grid.cellHeight(grid.cellWidth() * 1.2);\r\n */\r\n public cellHeight(val?: numberOrString, update = true): GridStack {\r\n\r\n // if not called internally, check if we're changing mode\r\n if (update && val !== undefined) {\r\n if (this._isAutoCellHeight !== (val === 'auto')) {\r\n this._isAutoCellHeight = (val === 'auto');\r\n this._updateResizeEvent();\r\n }\r\n }\r\n if (val === 'initial' || val === 'auto') { val = undefined; }\r\n\r\n // make item content be square\r\n if (val === undefined) {\r\n let marginDiff = - (this.opts.marginRight as number) - (this.opts.marginLeft as number)\r\n + (this.opts.marginTop as number) + (this.opts.marginBottom as number);\r\n val = this.cellWidth() + marginDiff;\r\n }\r\n\r\n let data = Utils.parseHeight(val);\r\n if (this.opts.cellHeightUnit === data.unit && this.opts.cellHeight === data.h) {\r\n return this;\r\n }\r\n this.opts.cellHeightUnit = data.unit;\r\n this.opts.cellHeight = data.h;\r\n\r\n this.resizeToContentCheck();\r\n\r\n if (update) {\r\n this._updateStyles(true); // true = force re-create for current # of rows\r\n }\r\n return this;\r\n }\r\n\r\n /** Gets current cell width. */\r\n public cellWidth(): number {\r\n return this._widthOrContainer() / this.getColumn();\r\n }\r\n /** return our expected width (or parent) , and optionally of window for dynamic column check */\r\n protected _widthOrContainer(forBreakpoint = false): number {\r\n // use `offsetWidth` or `clientWidth` (no scrollbar) ?\r\n // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively\r\n return forBreakpoint && this.opts.columnOpts?.breakpointForWindow ? window.innerWidth : (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);\r\n }\r\n /** checks for dynamic column count for our current size, returning true if changed */\r\n protected checkDynamicColumn(): boolean {\r\n const resp = this.opts.columnOpts;\r\n if (!resp || (!resp.columnWidth && !resp.breakpoints?.length)) return false;\r\n const column = this.getColumn();\r\n let newColumn = column;\r\n const w = this._widthOrContainer(true);\r\n if (resp.columnWidth) {\r\n newColumn = Math.min(Math.round(w / resp.columnWidth) || 1, resp.columnMax);\r\n } else {\r\n // find the closest breakpoint (already sorted big to small) that matches\r\n newColumn = resp.columnMax;\r\n let i = 0;\r\n while (i < resp.breakpoints.length && w <= resp.breakpoints[i].w) {\r\n newColumn = resp.breakpoints[i++].c || column;\r\n }\r\n }\r\n if (newColumn !== column) {\r\n const bk = resp.breakpoints?.find(b => b.c === newColumn);\r\n this.column(newColumn, bk?.layout || resp.layout);\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n /**\r\n * re-layout grid items to reclaim any empty space. Options are:\r\n * 'list' keep the widget left->right order the same, even if that means leaving an empty slot if things don't fit\r\n * 'compact' might re-order items to fill any empty space\r\n *\r\n * doSort - 'false' to let you do your own sorting ahead in case you need to control a different order. (default to sort)\r\n */\r\n public compact(layout: CompactOptions = 'compact', doSort = true): GridStack {\r\n this.engine.compact(layout, doSort);\r\n this._triggerChangeEvent();\r\n return this;\r\n }\r\n\r\n /**\r\n * set the number of columns in the grid. Will update existing widgets to conform to new number of columns,\r\n * as well as cache the original layout so you can revert back to previous positions without loss.\r\n * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],\r\n * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)\r\n * @param column - Integer > 0 (default 12).\r\n * @param layout specify the type of re-layout that will happen (position, size, etc...).\r\n * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column\r\n */\r\n public column(column: number, layout: ColumnOptions = 'moveScale'): GridStack {\r\n if (!column || column < 1 || this.opts.column === column) return this;\r\n\r\n let oldColumn = this.getColumn();\r\n this.opts.column = column;\r\n if (!this.engine) return this; // called in constructor, noting else to do\r\n\r\n this.engine.column = column;\r\n this.el.classList.remove('gs-' + oldColumn);\r\n this.el.classList.add('gs-' + column);\r\n\r\n // update the items now, checking if we have a custom children layout\r\n /*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;\r\n if (newChildren) this.load(newChildren);\r\n else*/ this.engine.columnChanged(oldColumn, column, layout);\r\n if (this._isAutoCellHeight) this.cellHeight();\r\n\r\n this.resizeToContentCheck(true); // wait for width resizing\r\n\r\n // and trigger our event last...\r\n this._ignoreLayoutsNodeChange = true; // skip layout update\r\n this._triggerChangeEvent();\r\n delete this._ignoreLayoutsNodeChange;\r\n\r\n return this;\r\n }\r\n\r\n /**\r\n * get the number of columns in the grid (default 12)\r\n */\r\n public getColumn(): number { return this.opts.column as number; }\r\n\r\n /** returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order */\r\n public getGridItems(): GridItemHTMLElement[] {\r\n return Array.from(this.el.children)\r\n .filter((el: HTMLElement) => el.matches('.' + this.opts.itemClass) && !el.matches('.' + this.opts.placeholderClass)) as GridItemHTMLElement[];\r\n }\r\n\r\n /**\r\n * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.\r\n * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).\r\n */\r\n public destroy(removeDOM = true): GridStack {\r\n if (!this.el) return; // prevent multiple calls\r\n this.offAll();\r\n this._updateResizeEvent(true);\r\n this.setStatic(true, false); // permanently removes DD but don't set CSS class (we're going away)\r\n this.setAnimation(false);\r\n if (!removeDOM) {\r\n this.removeAll(removeDOM);\r\n this.el.classList.remove(this._styleSheetClass);\r\n this.el.removeAttribute('gs-current-row');\r\n } else {\r\n this.el.parentNode.removeChild(this.el);\r\n }\r\n this._removeStylesheet();\r\n if (this.parentGridItem) delete this.parentGridItem.subGrid;\r\n delete this.parentGridItem;\r\n delete this.opts;\r\n delete this._placeholder;\r\n delete this.engine;\r\n delete this.el.gridstack; // remove circular dependency that would prevent a freeing\r\n delete this.el;\r\n return this;\r\n }\r\n\r\n /**\r\n * enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)\r\n */\r\n public float(val: boolean): GridStack {\r\n if (this.opts.float !== val) {\r\n this.opts.float = this.engine.float = val;\r\n this._triggerChangeEvent();\r\n }\r\n return this;\r\n }\r\n\r\n /**\r\n * get the current float mode\r\n */\r\n public getFloat(): boolean {\r\n return this.engine.float;\r\n }\r\n\r\n /**\r\n * Get the position of the cell under a pixel on screen.\r\n * @param position the position of the pixel to resolve in\r\n * absolute coordinates, as an object with top and left properties\r\n * @param useDocRelative if true, value will be based on document position vs parent position (Optional. Default false).\r\n * Useful when grid is within `position: relative` element\r\n *\r\n * Returns an object with properties `x` and `y` i.e. the column and row in the grid.\r\n */\r\n public getCellFromPixel(position: MousePosition, useDocRelative = false): CellPosition {\r\n let box = this.el.getBoundingClientRect();\r\n // console.log(`getBoundingClientRect left: ${box.left} top: ${box.top} w: ${box.w} h: ${box.h}`)\r\n let containerPos: { top: number, left: number };\r\n if (useDocRelative) {\r\n containerPos = { top: box.top + document.documentElement.scrollTop, left: box.left };\r\n // console.log(`getCellFromPixel scrollTop: ${document.documentElement.scrollTop}`)\r\n } else {\r\n containerPos = { top: this.el.offsetTop, left: this.el.offsetLeft }\r\n // console.log(`getCellFromPixel offsetTop: ${containerPos.left} offsetLeft: ${containerPos.top}`)\r\n }\r\n let relativeLeft = position.left - containerPos.left;\r\n let relativeTop = position.top - containerPos.top;\r\n\r\n let columnWidth = (box.width / this.getColumn());\r\n let rowHeight = (box.height / parseInt(this.el.getAttribute('gs-current-row')));\r\n\r\n return { x: Math.floor(relativeLeft / columnWidth), y: Math.floor(relativeTop / rowHeight) };\r\n }\r\n\r\n /** returns the current number of rows, which will be at least `minRow` if set */\r\n public getRow(): number {\r\n return Math.max(this.engine.getRow(), this.opts.minRow);\r\n }\r\n\r\n /**\r\n * Checks if specified area is empty.\r\n * @param x the position x.\r\n * @param y the position y.\r\n * @param w the width of to check\r\n * @param h the height of to check\r\n */\r\n public isAreaEmpty(x: number, y: number, w: number, h: number): boolean {\r\n return this.engine.isAreaEmpty(x, y, w, h);\r\n }\r\n\r\n /**\r\n * If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.\r\n * If you want gridstack to add the elements for you, use `addWidget()` instead.\r\n * Makes the given element a widget and returns it.\r\n * @param els widget or single selector to convert.\r\n * @param options widget definition to use instead of reading attributes or using default sizing values\r\n *\r\n * @example\r\n * let grid = GridStack.init();\r\n * grid.el.appendChild('
');\r\n * grid.el.appendChild('
');\r\n * grid.makeWidget('1');\r\n * grid.makeWidget('2', {w:2, content: 'hello'});\r\n */\r\n public makeWidget(els: GridStackElement, options?: GridStackWidget): GridItemHTMLElement {\r\n let el = GridStack.getElement(els);\r\n this._prepareElement(el, true, options);\r\n const node = el.gridstackNode;\r\n\r\n this._updateContainerHeight();\r\n\r\n // see if there is a sub-grid to create\r\n if (node.subGridOpts) {\r\n this.makeSubGrid(el, node.subGridOpts, undefined, false); // node.subGrid will be used as option in method, no need to pass\r\n }\r\n\r\n // if we're adding an item into 1 column make sure\r\n // we don't override the larger 12 column layout that was already saved. #1985\r\n if (this.opts.column === 1) {\r\n this._ignoreLayoutsNodeChange = true;\r\n }\r\n this._triggerAddEvent();\r\n this._triggerChangeEvent();\r\n delete this._ignoreLayoutsNodeChange;\r\n\r\n return el;\r\n }\r\n\r\n /**\r\n * Event handler that extracts our CustomEvent data out automatically for receiving custom\r\n * notifications (see doc for supported events)\r\n * @param name of the event (see possible values) or list of names space separated\r\n * @param callback function called with event and optional second/third param\r\n * (see README documentation for each signature).\r\n *\r\n * @example\r\n * grid.on('added', function(e, items) { log('added ', items)} );\r\n * or\r\n * grid.on('added removed change', function(e, items) { log(e.type, items)} );\r\n *\r\n * Note: in some cases it is the same as calling native handler and parsing the event.\r\n * grid.el.addEventListener('added', function(event) { log('added ', event.detail)} );\r\n *\r\n */\r\n public on(name: 'dropped', callback: GridStackDroppedHandler): GridStack\r\n public on(name: 'enable' | 'disable', callback: GridStackEventHandler): GridStack\r\n public on(name: 'change' | 'added' | 'removed' | 'resizecontent', callback: GridStackNodesHandler): GridStack\r\n public on(name: 'resizestart' | 'resize' | 'resizestop' | 'dragstart' | 'drag' | 'dragstop', callback: GridStackElementHandler): GridStack\r\n public on(name: string, callback: GridStackEventHandlerCallback): GridStack\r\n public on(name: GridStackEvent | string, callback: GridStackEventHandlerCallback): GridStack {\r\n // check for array of names being passed instead\r\n if (name.indexOf(' ') !== -1) {\r\n let names = name.split(' ') as GridStackEvent[];\r\n names.forEach(name => this.on(name, callback));\r\n return this;\r\n }\r\n\r\n // native CustomEvent handlers - cash the generic handlers so we can easily remove\r\n if (name === 'change' || name === 'added' || name === 'removed' || name === 'enable' || name === 'disable') {\r\n let noData = (name === 'enable' || name === 'disable');\r\n if (noData) {\r\n this._gsEventHandler[name] = (event: Event) => (callback as GridStackEventHandler)(event);\r\n } else {\r\n this._gsEventHandler[name] = (event: CustomEvent) => (callback as GridStackNodesHandler)(event, event.detail);\r\n }\r\n this.el.addEventListener(name, this._gsEventHandler[name]);\r\n } else if (name === 'drag' || name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resize'\r\n || name === 'resizestop' || name === 'dropped' || name === 'resizecontent') {\r\n // drag&drop stop events NEED to be call them AFTER we update node attributes so handle them ourself.\r\n // do same for start event to make it easier...\r\n this._gsEventHandler[name] = callback;\r\n } else {\r\n console.error('GridStack.on(' + name + ') event not supported');\r\n }\r\n return this;\r\n }\r\n\r\n /**\r\n * unsubscribe from the 'on' event GridStackEvent\r\n * @param name of the event (see possible values) or list of names space separated\r\n */\r\n public off(name: GridStackEvent | string): GridStack {\r\n // check for array of names being passed instead\r\n if (name.indexOf(' ') !== -1) {\r\n let names = name.split(' ') as GridStackEvent[];\r\n names.forEach(name => this.off(name));\r\n return this;\r\n }\r\n\r\n if (name === 'change' || name === 'added' || name === 'removed' || name === 'enable' || name === 'disable') {\r\n // remove native CustomEvent handlers\r\n if (this._gsEventHandler[name]) {\r\n this.el.removeEventListener(name, this._gsEventHandler[name]);\r\n }\r\n }\r\n delete this._gsEventHandler[name];\r\n\r\n return this;\r\n }\r\n\r\n /** remove all event handlers */\r\n public offAll(): GridStack {\r\n Object.keys(this._gsEventHandler).forEach((key: GridStackEvent) => this.off(key));\r\n return this;\r\n }\r\n\r\n /**\r\n * Removes widget from the grid.\r\n * @param el widget or selector to modify\r\n * @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).\r\n * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).\r\n */\r\n public removeWidget(els: GridStackElement, removeDOM = true, triggerEvent = true): GridStack {\r\n GridStack.getElements(els).forEach(el => {\r\n if (el.parentElement && el.parentElement !== this.el) return; // not our child!\r\n let node = el.gridstackNode;\r\n // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272\r\n if (!node) {\r\n node = this.engine.nodes.find(n => el === n.el);\r\n }\r\n if (!node) return;\r\n\r\n if (removeDOM && GridStack.addRemoveCB) {\r\n GridStack.addRemoveCB(this.el, node, false, false);\r\n }\r\n\r\n // remove our DOM data (circular link) and drag&drop permanently\r\n delete el.gridstackNode;\r\n this._removeDD(el);\r\n\r\n this.engine.removeNode(node, removeDOM, triggerEvent);\r\n\r\n if (removeDOM && el.parentElement) {\r\n el.remove(); // in batch mode engine.removeNode doesn't call back to remove DOM\r\n }\r\n });\r\n if (triggerEvent) {\r\n this._triggerRemoveEvent();\r\n this._triggerChangeEvent();\r\n }\r\n return this;\r\n }\r\n\r\n /**\r\n * Removes all widgets from the grid.\r\n * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).\r\n * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).\r\n */\r\n public removeAll(removeDOM = true, triggerEvent = true): GridStack {\r\n // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently\r\n this.engine.nodes.forEach(n => {\r\n if (removeDOM && GridStack.addRemoveCB) {\r\n GridStack.addRemoveCB(this.el, n, false, false);\r\n }\r\n delete n.el.gridstackNode;\r\n if (!this.opts.staticGrid) this._removeDD(n.el);\r\n });\r\n this.engine.removeAll(removeDOM, triggerEvent);\r\n if (triggerEvent) this._triggerRemoveEvent();\r\n return this;\r\n }\r\n\r\n /**\r\n * Toggle the grid animation state. Toggles the `grid-stack-animate` class.\r\n * @param doAnimate if true the grid will animate.\r\n * @param delay if true setting will be set on next event loop.\r\n */\r\n public setAnimation(doAnimate = this.opts.animate, delay?: boolean): GridStack {\r\n if (delay) {\r\n // delay, but check to make sure grid (opt) is still around\r\n setTimeout(() => { if (this.opts) this.setAnimation(doAnimate) });\r\n } else if (doAnimate) {\r\n this.el.classList.add('grid-stack-animate');\r\n } else {\r\n this.el.classList.remove('grid-stack-animate');\r\n }\r\n return this;\r\n }\r\n\r\n /** @internal */\r\n private hasAnimationCSS(): boolean { return this.el.classList.contains('grid-stack-animate') }\r\n\r\n /**\r\n * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.\r\n * Also toggle the grid-stack-static class.\r\n * @param val if true the grid become static.\r\n * @param updateClass true (default) if css class gets updated\r\n * @param recurse true (default) if sub-grids also get updated\r\n */\r\n public setStatic(val: boolean, updateClass = true, recurse = true): GridStack {\r\n if (!!this.opts.staticGrid === val) return this;\r\n val ? this.opts.staticGrid = true : delete this.opts.staticGrid;\r\n this._setupRemoveDrop();\r\n this._setupAcceptWidget();\r\n this.engine.nodes.forEach(n => {\r\n this._prepareDragDropByNode(n); // either delete or init Drag&drop\r\n if (n.subGrid && recurse) n.subGrid.setStatic(val, updateClass, recurse);\r\n });\r\n if (updateClass) { this._setStaticClass(); }\r\n return this;\r\n }\r\n\r\n /**\r\n * Updates widget position/size and other info. Note: if you need to call this on all nodes, use load() instead which will update what changed.\r\n * @param els widget or selector of objects to modify (note: setting the same x,y for multiple items will be indeterministic and likely unwanted)\r\n * @param opt new widget options (x,y,w,h, etc..). Only those set will be updated.\r\n */\r\n public update(els: GridStackElement, opt: GridStackWidget): GridStack {\r\n\r\n // support legacy call for now ?\r\n if (arguments.length > 2) {\r\n console.warn('gridstack.ts: `update(el, x, y, w, h)` is deprecated. Use `update(el, {x, w, content, ...})`. It will be removed soon');\r\n // eslint-disable-next-line prefer-rest-params\r\n let a = arguments, i = 1;\r\n opt = { x: a[i++], y: a[i++], w: a[i++], h: a[i++] };\r\n return this.update(els, opt);\r\n }\r\n\r\n GridStack.getElements(els).forEach(el => {\r\n let n = el?.gridstackNode;\r\n if (!n) return;\r\n let w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items\r\n this.engine.nodeBoundFix(w);\r\n delete w.autoPosition;\r\n delete w.id;\r\n\r\n // move/resize widget if anything changed\r\n let keys = ['x', 'y', 'w', 'h'];\r\n let m: GridStackWidget;\r\n if (keys.some(k => w[k] !== undefined && w[k] !== n[k])) {\r\n m = {};\r\n keys.forEach(k => {\r\n m[k] = (w[k] !== undefined) ? w[k] : n[k];\r\n delete w[k];\r\n });\r\n }\r\n // for a move as well IFF there is any min/max fields set\r\n if (!m && (w.minW || w.minH || w.maxW || w.maxH)) {\r\n m = {}; // will use node position but validate values\r\n }\r\n\r\n // check for content changing\r\n if (w.content !== undefined) {\r\n const itemContent = el.querySelector('.grid-stack-item-content');\r\n if (itemContent && itemContent.innerHTML !== w.content) {\r\n itemContent.innerHTML = w.content;\r\n // restore any sub-grid back\r\n if (n.subGrid?.el) {\r\n itemContent.appendChild(n.subGrid.el);\r\n if (!n.subGrid.opts.styleInHead) n.subGrid._updateStyles(true); // force create\r\n }\r\n }\r\n delete w.content;\r\n }\r\n\r\n // any remaining fields are assigned, but check for dragging changes, resize constrain\r\n let changed = false;\r\n let ddChanged = false;\r\n for (const key in w) {\r\n if (key[0] !== '_' && n[key] !== w[key]) {\r\n n[key] = w[key];\r\n changed = true;\r\n ddChanged = ddChanged || (!this.opts.staticGrid && (key === 'noResize' || key === 'noMove' || key === 'locked'));\r\n }\r\n }\r\n Utils.sanitizeMinMax(n);\r\n\r\n // finally move the widget and update attr\r\n if (m) {\r\n const widthChanged = (m.w !== undefined && m.w !== n.w);\r\n this.moveNode(n, m);\r\n this.resizeToContentCheck(widthChanged, n); // wait for animation if we changed width\r\n delete n._orig; // clear out original position now that we moved #2669\r\n }\r\n if (m || changed) {\r\n this._writeAttr(el, n);\r\n }\r\n if (ddChanged) {\r\n this._prepareDragDropByNode(n);\r\n }\r\n });\r\n\r\n return this;\r\n }\r\n\r\n private moveNode(n: GridStackNode, m: GridStackMoveOpts) {\r\n const wasUpdating = n._updating;\r\n if (!wasUpdating) this.engine.cleanNodes().beginUpdate(n);\r\n this.engine.moveNode(n, m);\r\n this._updateContainerHeight();\r\n if (!wasUpdating) {\r\n this._triggerChangeEvent();\r\n this.engine.endUpdate();\r\n }\r\n }\r\n\r\n /**\r\n * Updates widget height to match the content height to avoid v-scrollbar or dead space.\r\n * Note: this assumes only 1 child under resizeToContentParent='.grid-stack-item-content' (sized to gridItem minus padding) that is at the entire content size wanted.\r\n * @param el grid item element\r\n * @param useNodeH set to true if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights\r\n */\r\n public resizeToContent(el: GridItemHTMLElement) {\r\n if (!el) return;\r\n el.classList.remove('size-to-content-max');\r\n if (!el.clientHeight) return; // 0 when hidden, skip\r\n const n = el.gridstackNode;\r\n if (!n) return;\r\n const grid = n.grid;\r\n if (!grid || el.parentElement !== grid.el) return; // skip if we are not inside a grid\r\n const cell = grid.getCellHeight(true);\r\n if (!cell) return;\r\n let height = n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth\r\n let item: Element;\r\n if (n.resizeToContentParent) item = el.querySelector(n.resizeToContentParent);\r\n if (!item) item = el.querySelector(GridStack.resizeToContentParent);\r\n if (!item) return;\r\n const padding = el.clientHeight - item.clientHeight; // full - available height to our child (minus border, padding...)\r\n const itemH = n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)\r\n let wantedH: number;\r\n if (n.subGrid) {\r\n // sub-grid - use their actual row count * their cell height\r\n wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);\r\n } else {\r\n // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use
container!\r\n const child = item.firstElementChild;\r\n if (!child) { console.error(`Error: GridStack.resizeToContent() widget id:${n.id} '${GridStack.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`); return; }\r\n wantedH = child.getBoundingClientRect().height || itemH;\r\n }\r\n if (itemH === wantedH) return;\r\n height += wantedH - itemH;\r\n let h = Math.ceil(height / cell);\r\n // check for min/max and special sizing\r\n const softMax = Number.isInteger(n.sizeToContent) ? n.sizeToContent as number : 0;\r\n if (softMax && h > softMax) {\r\n h = softMax;\r\n el.classList.add('size-to-content-max'); // get v-scroll back\r\n }\r\n if (n.minH && h < n.minH) h = n.minH;\r\n else if (n.maxH && h > n.maxH) h = n.maxH;\r\n if (h !== n.h) {\r\n grid._ignoreLayoutsNodeChange = true;\r\n grid.moveNode(n, { h });\r\n delete grid._ignoreLayoutsNodeChange;\r\n }\r\n }\r\n\r\n /** call the user resize (so they can do extra work) else our build in version */\r\n private resizeToContentCBCheck(el: GridItemHTMLElement) {\r\n if (GridStack.resizeToContentCB) GridStack.resizeToContentCB(el);\r\n else this.resizeToContent(el);\r\n }\r\n\r\n /** rotate (by swapping w & h) the passed in node - called when user press 'r' during dragging\r\n * @param els widget or selector of objects to modify\r\n * @param relative optional pixel coord relative to upper/left corner to rotate around (will keep that cell under cursor)\r\n */\r\n public rotate(els: GridStackElement, relative?: Position): GridStack {\r\n GridStack.getElements(els).forEach(el => {\r\n let n = el.gridstackNode;\r\n if (!Utils.canBeRotated(n)) return;\r\n const rot: GridStackWidget = { w: n.h, h: n.w, minH: n.minW, minW: n.minH, maxH: n.maxW, maxW: n.maxH };\r\n // if given an offset, adjust x/y by column/row bounds when user presses 'r' during dragging\r\n if (relative) {\r\n let pivotX = relative.left > 0 ? Math.floor(relative.left / this.cellWidth()) : 0;\r\n let pivotY = relative.top > 0 ? Math.floor(relative.top / (this.opts.cellHeight as number)) : 0;\r\n rot.x = n.x + pivotX - (n.h - (pivotY+1));\r\n rot.y = (n.y + pivotY) - pivotX;\r\n }\r\n this.update(el, rot);\r\n });\r\n return this;\r\n }\r\n\r\n /**\r\n * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).\r\n * @param value margin value\r\n */\r\n public margin(value: numberOrString): GridStack {\r\n let isMultiValue = (typeof value === 'string' && value.split(' ').length > 1);\r\n // check if we can skip re-creating our CSS file... won't check if multi values (too much hassle)\r\n if (!isMultiValue) {\r\n let data = Utils.parseHeight(value);\r\n if (this.opts.marginUnit === data.unit && this.opts.margin === data.h) return;\r\n }\r\n // re-use existing margin handling\r\n this.opts.margin = value;\r\n this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = undefined;\r\n this._initMargin();\r\n\r\n this._updateStyles(true); // true = force re-create\r\n\r\n return this;\r\n }\r\n\r\n /** returns current margin number value (undefined if 4 sides don't match) */\r\n public getMargin(): number { return this.opts.margin as number; }\r\n\r\n /**\r\n * Returns true if the height of the grid will be less than the vertical\r\n * constraint. Always returns true if grid doesn't have height constraint.\r\n * @param node contains x,y,w,h,auto-position options\r\n *\r\n * @example\r\n * if (grid.willItFit(newWidget)) {\r\n * grid.addWidget(newWidget);\r\n * } else {\r\n * alert('Not enough free space to place the widget');\r\n * }\r\n */\r\n public willItFit(node: GridStackWidget): boolean {\r\n // support legacy call for now\r\n if (arguments.length > 1) {\r\n console.warn('gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon');\r\n // eslint-disable-next-line prefer-rest-params\r\n let a = arguments, i = 0,\r\n w: GridStackWidget = { x: a[i++], y: a[i++], w: a[i++], h: a[i++], autoPosition: a[i++] };\r\n return this.willItFit(w);\r\n }\r\n return this.engine.willItFit(node);\r\n }\r\n\r\n /** @internal */\r\n protected _triggerChangeEvent(): GridStack {\r\n if (this.engine.batchMode) return this;\r\n let elements = this.engine.getDirtyNodes(true); // verify they really changed\r\n if (elements && elements.length) {\r\n if (!this._ignoreLayoutsNodeChange) {\r\n this.engine.layoutsNodesChange(elements);\r\n }\r\n this._triggerEvent('change', elements);\r\n }\r\n this.engine.saveInitial(); // we called, now reset initial values & dirty flags\r\n return this;\r\n }\r\n\r\n /** @internal */\r\n protected _triggerAddEvent(): GridStack {\r\n if (this.engine.batchMode) return this;\r\n if (this.engine.addedNodes?.length) {\r\n if (!this._ignoreLayoutsNodeChange) {\r\n this.engine.layoutsNodesChange(this.engine.addedNodes);\r\n }\r\n // prevent added nodes from also triggering 'change' event (which is called next)\r\n this.engine.addedNodes.forEach(n => { delete n._dirty; });\r\n const addedNodes = [...this.engine.addedNodes];\r\n this.engine.addedNodes = [];\r\n this._triggerEvent('added', addedNodes);\r\n }\r\n return this;\r\n }\r\n\r\n /** @internal */\r\n public _triggerRemoveEvent(): GridStack {\r\n if (this.engine.batchMode) return this;\r\n if (this.engine.removedNodes?.length) {\r\n const removedNodes = [...this.engine.removedNodes];\r\n this.engine.removedNodes = [];\r\n this._triggerEvent('removed', removedNodes);\r\n }\r\n return this;\r\n }\r\n\r\n /** @internal */\r\n protected _triggerEvent(type: string, data?: GridStackNode[]): GridStack {\r\n let event = data ? new CustomEvent(type, { bubbles: false, detail: data }) : new Event(type);\r\n this.el.dispatchEvent(event);\r\n return this;\r\n }\r\n\r\n /** @internal called to delete the current dynamic style sheet used for our layout */\r\n protected _removeStylesheet(): GridStack {\r\n\r\n if (this._styles) {\r\n const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;\r\n Utils.removeStylesheet(this._styleSheetClass, styleLocation);\r\n delete this._styles;\r\n }\r\n return this;\r\n }\r\n\r\n /** @internal updated/create the CSS styles for row based layout and initial margin setting */\r\n protected _updateStyles(forceUpdate = false, maxH?: number): GridStack {\r\n // call to delete existing one if we change cellHeight / margin\r\n if (forceUpdate) {\r\n this._removeStylesheet();\r\n }\r\n\r\n if (maxH === undefined) maxH = this.getRow();\r\n this._updateContainerHeight();\r\n\r\n // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??\r\n if (this.opts.cellHeight === 0) {\r\n return this;\r\n }\r\n\r\n let cellHeight = this.opts.cellHeight as number;\r\n let cellHeightUnit = this.opts.cellHeightUnit;\r\n let prefix = `.${this._styleSheetClass} > .${this.opts.itemClass}`;\r\n\r\n // create one as needed\r\n if (!this._styles) {\r\n // insert style to parent (instead of 'head' by default) to support WebComponent\r\n const styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;\r\n this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation, {\r\n nonce: this.opts.nonce,\r\n });\r\n if (!this._styles) return this;\r\n this._styles._max = 0;\r\n\r\n // these are done once only\r\n Utils.addCSSRule(this._styles, prefix, `height: ${cellHeight}${cellHeightUnit}`);\r\n // content margins\r\n let top: string = this.opts.marginTop + this.opts.marginUnit;\r\n let bottom: string = this.opts.marginBottom + this.opts.marginUnit;\r\n let right: string = this.opts.marginRight + this.opts.marginUnit;\r\n let left: string = this.opts.marginLeft + this.opts.marginUnit;\r\n let content = `${prefix} > .grid-stack-item-content`;\r\n let placeholder = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;\r\n Utils.addCSSRule(this._styles, content, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);\r\n Utils.addCSSRule(this._styles, placeholder, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);\r\n // resize handles offset (to match margin)\r\n Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-n`, `top: ${top};`);\r\n Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-s`, `bottom: ${bottom}`);\r\n Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-ne`, `right: ${right}`);\r\n Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-e`, `right: ${right}`);\r\n Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-se`, `right: ${right}; bottom: ${bottom}`);\r\n Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-nw`, `left: ${left}`);\r\n Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-w`, `left: ${left}`);\r\n Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-sw`, `left: ${left}; bottom: ${bottom}`);\r\n }\r\n\r\n // now update the height specific fields\r\n maxH = maxH || this._styles._max;\r\n if (maxH > this._styles._max) {\r\n let getHeight = (rows: number): string => (cellHeight * rows) + cellHeightUnit;\r\n for (let i = this._styles._max + 1; i <= maxH; i++) { // start at 1\r\n Utils.addCSSRule(this._styles, `${prefix}[gs-y=\"${i}\"]`, `top: ${getHeight(i)}`);\r\n Utils.addCSSRule(this._styles, `${prefix}[gs-h=\"${i + 1}\"]`, `height: ${getHeight(i + 1)}`); // start at 2\r\n }\r\n this._styles._max = maxH;\r\n }\r\n return this;\r\n }\r\n\r\n /** @internal */\r\n protected _updateContainerHeight(): GridStack {\r\n if (!this.engine || this.engine.batchMode) return this;\r\n const parent = this.parentGridItem;\r\n let row = this.getRow() + this._extraDragRow; // this checks for minRow already\r\n const cellHeight = this.opts.cellHeight as number;\r\n const unit = this.opts.cellHeightUnit;\r\n if (!cellHeight) return this;\r\n\r\n // check for css min height (non nested grid). TODO: support mismatch, say: min % while unit is px.\r\n if (!parent) {\r\n const cssMinHeight = Utils.parseHeight(getComputedStyle(this.el)['minHeight']);\r\n if (cssMinHeight.h > 0 && cssMinHeight.unit === unit) {\r\n const minRow = Math.floor(cssMinHeight.h / cellHeight);\r\n if (row < minRow) {\r\n row = minRow;\r\n }\r\n }\r\n }\r\n\r\n this.el.setAttribute('gs-current-row', String(row));\r\n this.el.style.removeProperty('min-height');\r\n this.el.style.removeProperty('height');\r\n if (row) {\r\n // nested grids have 'insert:0' to fill the space of parent by default, but we may be taller so use min-height for possible scrollbars\r\n this.el.style[parent ? 'minHeight' : 'height'] = row * cellHeight + unit;\r\n }\r\n\r\n // if we're a nested grid inside an sizeToContent item, tell it to resize itself too\r\n if (parent && !parent.grid.engine.batchMode && Utils.shouldSizeToContent(parent)) {\r\n parent.grid.resizeToContentCBCheck(parent.el);\r\n }\r\n\r\n return this;\r\n }\r\n\r\n /** @internal */\r\n protected _prepareElement(el: GridItemHTMLElement, triggerAddEvent = false, node?: GridStackNode): GridStack {\r\n node = node || this._readAttr(el);\r\n el.gridstackNode = node;\r\n node.el = el;\r\n node.grid = this;\r\n node = this.engine.addNode(node, triggerAddEvent);\r\n\r\n // write the dom sizes and class\r\n this._writeAttr(el, node);\r\n el.classList.add(gridDefaults.itemClass, this.opts.itemClass);\r\n const sizeToContent = Utils.shouldSizeToContent(node);\r\n sizeToContent ? el.classList.add('size-to-content') : el.classList.remove('size-to-content');\r\n if (sizeToContent) this.resizeToContentCheck(false, node);\r\n\r\n this._prepareDragDropByNode(node);\r\n return this;\r\n }\r\n\r\n /** @internal call to write position x,y,w,h attributes back to element */\r\n protected _writePosAttr(el: HTMLElement, n: GridStackPosition): GridStack {\r\n if (n.x !== undefined && n.x !== null) { el.setAttribute('gs-x', String(n.x)); }\r\n if (n.y !== undefined && n.y !== null) { el.setAttribute('gs-y', String(n.y)); }\r\n n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w');\r\n n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h');\r\n return this;\r\n }\r\n\r\n /** @internal call to write any default attributes back to element */\r\n protected _writeAttr(el: HTMLElement, node: GridStackWidget): GridStack {\r\n if (!node) return this;\r\n this._writePosAttr(el, node);\r\n\r\n let attrs /*: GridStackWidget but strings */ = { // remaining attributes\r\n autoPosition: 'gs-auto-position',\r\n noResize: 'gs-no-resize',\r\n noMove: 'gs-no-move',\r\n locked: 'gs-locked',\r\n id: 'gs-id',\r\n };\r\n for (const key in attrs) {\r\n if (node[key]) { // 0 is valid for x,y only but done above already and not in list anyway\r\n el.setAttribute(attrs[key], String(node[key]));\r\n } else {\r\n el.removeAttribute(attrs[key]);\r\n }\r\n }\r\n return this;\r\n }\r\n\r\n /** @internal call to read any default attributes from element */\r\n protected _readAttr(el: HTMLElement, clearDefaultAttr = true): GridStackWidget {\r\n let n: GridStackNode = {};\r\n n.x = Utils.toNumber(el.getAttribute('gs-x'));\r\n n.y = Utils.toNumber(el.getAttribute('gs-y'));\r\n n.w = Utils.toNumber(el.getAttribute('gs-w'));\r\n n.h = Utils.toNumber(el.getAttribute('gs-h'));\r\n n.autoPosition = Utils.toBool(el.getAttribute('gs-auto-position'));\r\n n.noResize = Utils.toBool(el.getAttribute('gs-no-resize'));\r\n n.noMove = Utils.toBool(el.getAttribute('gs-no-move'));\r\n n.locked = Utils.toBool(el.getAttribute('gs-locked'));\r\n n.id = el.getAttribute('gs-id');\r\n\r\n // read but never written out\r\n n.maxW = Utils.toNumber(el.getAttribute('gs-max-w'));\r\n n.minW = Utils.toNumber(el.getAttribute('gs-min-w'));\r\n n.maxH = Utils.toNumber(el.getAttribute('gs-max-h'));\r\n n.minH = Utils.toNumber(el.getAttribute('gs-min-h'));\r\n\r\n // v8.x optimization to reduce un-needed attr that don't render or are default CSS\r\n if (clearDefaultAttr) {\r\n if (n.w === 1) el.removeAttribute('gs-w');\r\n if (n.h === 1) el.removeAttribute('gs-h');\r\n if (n.maxW) el.removeAttribute('gs-max-w');\r\n if (n.minW) el.removeAttribute('gs-min-w');\r\n if (n.maxH) el.removeAttribute('gs-max-h');\r\n if (n.minH) el.removeAttribute('gs-min-h');\r\n }\r\n\r\n // remove any key not found (null or false which is default)\r\n for (const key in n) {\r\n if (!n.hasOwnProperty(key)) return;\r\n if (!n[key] && n[key] !== 0) { // 0 can be valid value (x,y only really)\r\n delete n[key];\r\n }\r\n }\r\n\r\n return n;\r\n }\r\n\r\n /** @internal */\r\n protected _setStaticClass(): GridStack {\r\n let classes = ['grid-stack-static'];\r\n\r\n if (this.opts.staticGrid) {\r\n this.el.classList.add(...classes);\r\n this.el.setAttribute('gs-static', 'true');\r\n } else {\r\n this.el.classList.remove(...classes);\r\n this.el.removeAttribute('gs-static');\r\n\r\n }\r\n return this;\r\n }\r\n\r\n /**\r\n * called when we are being resized - check if the one Column Mode needs to be turned on/off\r\n * and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)\r\n * or `sizeToContent` gridItem options.\r\n */\r\n public onResize(): GridStack {\r\n if (!this.el?.clientWidth) return; // return if we're gone or no size yet (will get called again)\r\n if (this.prevWidth === this.el.clientWidth) return; // no-op\r\n this.prevWidth = this.el.clientWidth\r\n // console.log('onResize ', this.el.clientWidth);\r\n\r\n this.batchUpdate();\r\n\r\n // see if we're nested and take our column count from our parent....\r\n let columnChanged = false;\r\n if (this._autoColumn && this.parentGridItem) {\r\n if (this.opts.column !== this.parentGridItem.w) {\r\n this.column(this.parentGridItem.w, 'none');\r\n columnChanged = true;\r\n }\r\n } else {\r\n // else check for dynamic column\r\n columnChanged = this.checkDynamicColumn();\r\n }\r\n\r\n // make the cells content square again\r\n if (this._isAutoCellHeight) this.cellHeight();\r\n\r\n // update any nested grids, or items size\r\n this.engine.nodes.forEach(n => {\r\n if (n.subGrid) n.subGrid.onResize()\r\n });\r\n\r\n if (!this._skipInitialResize) this.resizeToContentCheck(columnChanged); // wait for anim of column changed (DOM reflow before we can size correctly)\r\n delete this._skipInitialResize;\r\n\r\n this.batchUpdate(false);\r\n\r\n return this;\r\n }\r\n\r\n /** resizes content for given node (or all) if shouldSizeToContent() is true */\r\n private resizeToContentCheck(delay = false, n: GridStackNode = undefined) {\r\n if (!this.engine) return; // we've been deleted in between!\r\n\r\n // update any gridItem height with sizeToContent, but wait for DOM $animation_speed to settle if we changed column count\r\n // TODO: is there a way to know what the final (post animation) size of the content will be so we can animate the column width and height together rather than sequentially ?\r\n if (delay && this.hasAnimationCSS()) return setTimeout(() => this.resizeToContentCheck(false, n), 300 + 10);\r\n\r\n if (n) {\r\n if (Utils.shouldSizeToContent(n)) this.resizeToContentCBCheck(n.el);\r\n } else if (this.engine.nodes.some(n => Utils.shouldSizeToContent(n))) {\r\n const nodes = [...this.engine.nodes]; // in case order changes while resizing one\r\n this.batchUpdate();\r\n nodes.forEach(n => {\r\n if (Utils.shouldSizeToContent(n)) this.resizeToContentCBCheck(n.el);\r\n });\r\n this.batchUpdate(false);\r\n }\r\n // call this regardless of shouldSizeToContent because widget might need to stretch to take available space after a resize\r\n if (this._gsEventHandler['resizecontent']) this._gsEventHandler['resizecontent'](null, n ? [n] : this.engine.nodes);\r\n }\r\n\r\n /** add or remove the grid element size event handler */\r\n protected _updateResizeEvent(forceRemove = false): GridStack {\r\n // only add event if we're not nested (parent will call us) and we're auto sizing cells or supporting dynamic column (i.e. doing work)\r\n // or supporting new sizeToContent option.\r\n const trackSize = !this.parentGridItem && (this._isAutoCellHeight || this.opts.sizeToContent || this.opts.columnOpts\r\n || this.engine.nodes.find(n => n.sizeToContent));\r\n\r\n if (!forceRemove && trackSize && !this.resizeObserver) {\r\n this._sizeThrottle = Utils.throttle(() => this.onResize(), this.opts.cellHeightThrottle);\r\n this.resizeObserver = new ResizeObserver(() => this._sizeThrottle());\r\n this.resizeObserver.observe(this.el);\r\n this._skipInitialResize = true; // makeWidget will originally have called on startup\r\n } else if ((forceRemove || !trackSize) && this.resizeObserver) {\r\n this.resizeObserver.disconnect();\r\n delete this.resizeObserver;\r\n delete this._sizeThrottle;\r\n }\r\n\r\n return this;\r\n }\r\n\r\n /** @internal convert a potential selector into actual element */\r\n public static getElement(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement { return Utils.getElement(els) }\r\n /** @internal */\r\n public static getElements(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement[] { return Utils.getElements(els) }\r\n /** @internal */\r\n public static getGridElement(els: GridStackElement): GridHTMLElement { return GridStack.getElement(els) }\r\n /** @internal */\r\n public static getGridElements(els: string): GridHTMLElement[] { return Utils.getElements(els) }\r\n\r\n /** @internal initialize margin top/bottom/left/right and units */\r\n protected _initMargin(): GridStack {\r\n\r\n let data: HeightData;\r\n let margin = 0;\r\n\r\n // support passing multiple values like CSS (ex: '5px 10px 0 20px')\r\n let margins: string[] = [];\r\n if (typeof this.opts.margin === 'string') {\r\n margins = this.opts.margin.split(' ')\r\n }\r\n if (margins.length === 2) { // top/bot, left/right like CSS\r\n this.opts.marginTop = this.opts.marginBottom = margins[0];\r\n this.opts.marginLeft = this.opts.marginRight = margins[1];\r\n } else if (margins.length === 4) { // Clockwise like CSS\r\n this.opts.marginTop = margins[0];\r\n this.opts.marginRight = margins[1];\r\n this.opts.marginBottom = margins[2];\r\n this.opts.marginLeft = margins[3];\r\n } else {\r\n data = Utils.parseHeight(this.opts.margin);\r\n this.opts.marginUnit = data.unit;\r\n margin = this.opts.margin = data.h;\r\n }\r\n\r\n // see if top/bottom/left/right need to be set as well\r\n if (this.opts.marginTop === undefined) {\r\n this.opts.marginTop = margin;\r\n } else {\r\n data = Utils.parseHeight(this.opts.marginTop);\r\n this.opts.marginTop = data.h;\r\n delete this.opts.margin;\r\n }\r\n\r\n if (this.opts.marginBottom === undefined) {\r\n this.opts.marginBottom = margin;\r\n } else {\r\n data = Utils.parseHeight(this.opts.marginBottom);\r\n this.opts.marginBottom = data.h;\r\n delete this.opts.margin;\r\n }\r\n\r\n if (this.opts.marginRight === undefined) {\r\n this.opts.marginRight = margin;\r\n } else {\r\n data = Utils.parseHeight(this.opts.marginRight);\r\n this.opts.marginRight = data.h;\r\n delete this.opts.margin;\r\n }\r\n\r\n if (this.opts.marginLeft === undefined) {\r\n this.opts.marginLeft = margin;\r\n } else {\r\n data = Utils.parseHeight(this.opts.marginLeft);\r\n this.opts.marginLeft = data.h;\r\n delete this.opts.margin;\r\n }\r\n this.opts.marginUnit = data.unit; // in case side were spelled out, use those units instead...\r\n if (this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight) {\r\n this.opts.margin = this.opts.marginTop; // makes it easier to check for no-ops in setMargin()\r\n }\r\n return this;\r\n }\r\n\r\n static GDRev = '10.3.0';\r\n\r\n /* ===========================================================================================\r\n * drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts\r\n * but caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039\r\n * ===========================================================================================\r\n */\r\n\r\n /** get the global (but static to this code) DD implementation */\r\n public static getDD(): DDGridStack {\r\n return dd;\r\n }\r\n\r\n /**\r\n * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.\r\n * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar\r\n * is dynamically create and needs to be set later.\r\n * @param dragIn string selector (ex: '.sidebar .grid-stack-item') or list of dom elements\r\n * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}\r\n * @param root optional root which defaults to document (for shadow dom pas the parent HTMLDocument)\r\n */\r\n public static setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragInOpt, root: HTMLElement | Document = document): void {\r\n if (dragInOptions?.pause !== undefined) {\r\n DDManager.pauseDrag = dragInOptions.pause;\r\n }\r\n\r\n dragInOptions = { ...dragInDefaultOptions, ...(dragInOptions || {}) };\r\n let els: HTMLElement[] = (typeof dragIn === 'string') ? Utils.getElements(dragIn, root) : dragIn;\r\n if (els.length) els?.forEach(el => {\r\n if (!dd.isDraggable(el)) dd.dragIn(el, dragInOptions);\r\n });\r\n }\r\n\r\n /**\r\n * Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.\r\n * IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.\r\n * @param els widget or selector to modify.\r\n * @param val if true widget will be draggable, assuming the parent grid isn't noMove or static.\r\n */\r\n public movable(els: GridStackElement, val: boolean): GridStack {\r\n if (this.opts.staticGrid) return this; // can't move a static grid!\r\n GridStack.getElements(els).forEach(el => {\r\n const n = el.gridstackNode;\r\n if (!n) return;\r\n val ? delete n.noMove : n.noMove = true;\r\n this._prepareDragDropByNode(n); // init DD if need be, and adjust\r\n });\r\n return this;\r\n }\r\n\r\n /**\r\n * Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.\r\n * @param els widget or selector to modify\r\n * @param val if true widget will be resizable, assuming the parent grid isn't noResize or static.\r\n */\r\n public resizable(els: GridStackElement, val: boolean): GridStack {\r\n if (this.opts.staticGrid) return this; // can't resize a static grid!\r\n GridStack.getElements(els).forEach(el => {\r\n let n = el.gridstackNode;\r\n if (!n) return;\r\n val ? delete n.noResize : n.noResize = true;\r\n this._prepareDragDropByNode(n); // init DD if need be, and adjust\r\n });\r\n return this;\r\n }\r\n\r\n /**\r\n * Temporarily disables widgets moving/resizing.\r\n * If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.\r\n * Note: no-op for static grid\r\n * This is a shortcut for:\r\n * @example\r\n * grid.enableMove(false);\r\n * grid.enableResize(false);\r\n * @param recurse true (default) if sub-grids also get updated\r\n */\r\n public disable(recurse = true): GridStack {\r\n if (this.opts.staticGrid) return;\r\n this.enableMove(false, recurse);\r\n this.enableResize(false, recurse);\r\n this._triggerEvent('disable');\r\n return this;\r\n }\r\n /**\r\n * Re-enables widgets moving/resizing - see disable().\r\n * Note: no-op for static grid.\r\n * This is a shortcut for:\r\n * @example\r\n * grid.enableMove(true);\r\n * grid.enableResize(true);\r\n * @param recurse true (default) if sub-grids also get updated\r\n */\r\n public enable(recurse = true): GridStack {\r\n if (this.opts.staticGrid) return;\r\n this.enableMove(true, recurse);\r\n this.enableResize(true, recurse);\r\n this._triggerEvent('enable');\r\n return this;\r\n }\r\n\r\n /**\r\n * Enables/disables widget moving. No-op for static grids, and locally defined items still overrule\r\n * @param recurse true (default) if sub-grids also get updated\r\n */\r\n public enableMove(doEnable: boolean, recurse = true): GridStack {\r\n if (this.opts.staticGrid) return this; // can't move a static grid!\r\n doEnable ? delete this.opts.disableDrag : this.opts.disableDrag = true; // FIRST before we update children as grid overrides #1658\r\n this.engine.nodes.forEach(n => {\r\n this._prepareDragDropByNode(n);\r\n if (n.subGrid && recurse) n.subGrid.enableMove(doEnable, recurse);\r\n });\r\n return this;\r\n }\r\n\r\n /**\r\n * Enables/disables widget resizing. No-op for static grids.\r\n * @param recurse true (default) if sub-grids also get updated\r\n */\r\n public enableResize(doEnable: boolean, recurse = true): GridStack {\r\n if (this.opts.staticGrid) return this; // can't size a static grid!\r\n doEnable ? delete this.opts.disableResize : this.opts.disableResize = true; // FIRST before we update children as grid overrides #1658\r\n this.engine.nodes.forEach(n => {\r\n this._prepareDragDropByNode(n);\r\n if (n.subGrid && recurse) n.subGrid.enableResize(doEnable, recurse);\r\n });\r\n return this;\r\n }\r\n\r\n /** @internal removes any drag&drop present (called during destroy) */\r\n protected _removeDD(el: DDElementHost): GridStack {\r\n dd.draggable(el, 'destroy').resizable(el, 'destroy');\r\n if (el.gridstackNode) {\r\n delete el.gridstackNode._initDD; // reset our DD init flag\r\n }\r\n delete el.ddElement;\r\n return this;\r\n }\r\n\r\n /** @internal called to add drag over to support widgets being added externally */\r\n protected _setupAcceptWidget(): GridStack {\r\n\r\n // check if we need to disable things\r\n if (this.opts.staticGrid || (!this.opts.acceptWidgets && !this.opts.removable)) {\r\n dd.droppable(this.el, 'destroy');\r\n return this;\r\n }\r\n\r\n // vars shared across all methods\r\n let cellHeight: number, cellWidth: number;\r\n\r\n let onDrag = (event: DragEvent, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {\r\n let node = el.gridstackNode;\r\n if (!node) return;\r\n\r\n helper = helper || el;\r\n\r\n // if the element is being dragged from outside, scale it down to match the grid's scale\r\n // and slightly adjust its position relative to the mouse\r\n if (!node.grid?.el) {\r\n // this scales the helper down\r\n helper.style.transform = `scale(${1 / this.dragTransform.xScale},${1 / this.dragTransform.yScale})`;\r\n // this makes it so that the helper is well positioned relative to the mouse after scaling\r\n const helperRect = helper.getBoundingClientRect();\r\n helper.style.left = helperRect.x + (this.dragTransform.xScale - 1) * (event.clientX - helperRect.x) / this.dragTransform.xScale + 'px';\r\n helper.style.top = helperRect.y + (this.dragTransform.yScale - 1) * (event.clientY - helperRect.y) / this.dragTransform.yScale + 'px';\r\n helper.style.transformOrigin = `0px 0px`\r\n }\r\n\r\n let parent = this.el.getBoundingClientRect();\r\n let { top, left } = helper.getBoundingClientRect();\r\n left -= parent.left;\r\n top -= parent.top;\r\n let ui: DDUIData = {\r\n position: {\r\n top: top * this.dragTransform.xScale,\r\n left: left * this.dragTransform.yScale\r\n }\r\n };\r\n\r\n if (node._temporaryRemoved) {\r\n node.x = Math.max(0, Math.round(left / cellWidth));\r\n node.y = Math.max(0, Math.round(top / cellHeight));\r\n delete node.autoPosition;\r\n this.engine.nodeBoundFix(node);\r\n\r\n // don't accept *initial* location if doesn't fit #1419 (locked drop region, or can't grow), but maybe try if it will go somewhere\r\n if (!this.engine.willItFit(node)) {\r\n node.autoPosition = true; // ignore x,y and try for any slot...\r\n if (!this.engine.willItFit(node)) {\r\n dd.off(el, 'drag'); // stop calling us\r\n return; // full grid or can't grow\r\n }\r\n if (node._willFitPos) {\r\n // use the auto position instead #1687\r\n Utils.copyPos(node, node._willFitPos);\r\n delete node._willFitPos;\r\n }\r\n }\r\n\r\n // re-use the existing node dragging method\r\n this._onStartMoving(helper, event, ui, node, cellWidth, cellHeight);\r\n } else {\r\n // re-use the existing node dragging that does so much of the collision detection\r\n this._dragOrResize(helper, event, ui, node, cellWidth, cellHeight);\r\n }\r\n }\r\n\r\n dd.droppable(this.el, {\r\n accept: (el: GridItemHTMLElement) => {\r\n let node: GridStackNode = el.gridstackNode || this._readAttr(el, false);\r\n // set accept drop to true on ourself (which we ignore) so we don't get \"can't drop\" icon in HTML5 mode while moving\r\n if (node?.grid === this) return true;\r\n if (!this.opts.acceptWidgets) return false;\r\n // check for accept method or class matching\r\n let canAccept = true;\r\n if (typeof this.opts.acceptWidgets === 'function') {\r\n canAccept = this.opts.acceptWidgets(el);\r\n } else {\r\n let selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets as string);\r\n canAccept = el.matches(selector);\r\n }\r\n // finally check to make sure we actually have space left #1571 #2633\r\n if (canAccept && node && this.opts.maxRow) {\r\n let n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition\r\n canAccept = this.engine.willItFit(n);\r\n }\r\n return canAccept;\r\n }\r\n })\r\n /**\r\n * entering our grid area\r\n */\r\n .on(this.el, 'dropover', (event: Event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {\r\n // console.log(`over ${this.el.gridstack.opts.id} ${count++}`); // TEST\r\n let node = el.gridstackNode;\r\n // ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item\r\n if (node?.grid === this && !node._temporaryRemoved) {\r\n // delete node._added; // reset this to track placeholder again in case we were over other grid #1484 (dropout doesn't always clear)\r\n return false; // prevent parent from receiving msg (which may be a grid as well)\r\n }\r\n\r\n // fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now\r\n if (node?.grid && node.grid !== this && !node._temporaryRemoved) {\r\n // console.log('dropover without leave'); // TEST\r\n let otherGrid = node.grid;\r\n otherGrid._leave(el, helper);\r\n }\r\n\r\n // cache cell dimensions (which don't change), position can animate if we removed an item in otherGrid that affects us...\r\n cellWidth = this.cellWidth();\r\n cellHeight = this.getCellHeight(true);\r\n\r\n // load any element attributes if we don't have a node\r\n if (!node) {\r\n node = this._readAttr(el, false); // don't wipe external (e.g. drag toolbar) attr #2354\r\n }\r\n if (!node.grid) {\r\n node._isExternal = true;\r\n el.gridstackNode = node;\r\n }\r\n\r\n // calculate the grid size based on element outer size\r\n helper = helper || el;\r\n let w = node.w || Math.round(helper.offsetWidth / cellWidth) || 1;\r\n let h = node.h || Math.round(helper.offsetHeight / cellHeight) || 1;\r\n\r\n // if the item came from another grid, make a copy and save the original info in case we go back there\r\n if (node.grid && node.grid !== this) {\r\n // copy the node original values (min/max/id/etc...) but override width/height/other flags which are this grid specific\r\n // console.log('dropover cloning node'); // TEST\r\n if (!el._gridstackNodeOrig) el._gridstackNodeOrig = node; // shouldn't have multiple nested!\r\n el.gridstackNode = node = { ...node, w, h, grid: this };\r\n delete node.x;\r\n delete node.y;\r\n this.engine.cleanupNode(node)\r\n .nodeBoundFix(node);\r\n // restore some internal fields we need after clearing them all\r\n node._initDD =\r\n node._isExternal = // DOM needs to be re-parented on a drop\r\n node._temporaryRemoved = true; // so it can be inserted onDrag below\r\n } else {\r\n node.w = w; node.h = h;\r\n node._temporaryRemoved = true; // so we can insert it\r\n }\r\n\r\n // clear any marked for complete removal (Note: don't check _isAboutToRemove as that is cleared above - just do it)\r\n GridStack._itemRemoving(node.el, false);\r\n\r\n dd.on(el, 'drag', onDrag);\r\n // make sure this is called at least once when going fast #1578\r\n onDrag(event as DragEvent, el, helper);\r\n return false; // prevent parent from receiving msg (which may be a grid as well)\r\n })\r\n /**\r\n * Leaving our grid area...\r\n */\r\n .on(this.el, 'dropout', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {\r\n // console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST\r\n let node = el.gridstackNode;\r\n if (!node) return false;\r\n // fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)\r\n // so skip this one if we're not the active grid really..\r\n if (!node.grid || node.grid === this) {\r\n this._leave(el, helper);\r\n // if we were created as temporary nested grid, go back to before state\r\n if (this._isTemp) {\r\n this.removeAsSubGrid(node);\r\n }\r\n }\r\n return false; // prevent parent from receiving msg (which may be grid as well)\r\n })\r\n /**\r\n * end - releasing the mouse\r\n */\r\n .on(this.el, 'drop', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {\r\n let node = el.gridstackNode;\r\n // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead\r\n if (node?.grid === this && !node._isExternal) return false;\r\n\r\n const wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419\r\n this.placeholder.remove();\r\n\r\n // disable animation when replacing a placeholder (already positioned) with actual content\r\n const noAnim = wasAdded && this.opts.animate;\r\n if (noAnim) this.setAnimation(false);\r\n\r\n // notify previous grid of removal\r\n // console.log('drop delete _gridstackNodeOrig') // TEST\r\n let origNode = el._gridstackNodeOrig;\r\n delete el._gridstackNodeOrig;\r\n if (wasAdded && origNode?.grid && origNode.grid !== this) {\r\n let oGrid = origNode.grid;\r\n oGrid.engine.removeNodeFromLayoutCache(origNode);\r\n oGrid.engine.removedNodes.push(origNode);\r\n oGrid._triggerRemoveEvent()._triggerChangeEvent();\r\n // if it's an empty sub-grid that got auto-created, nuke it\r\n if (oGrid.parentGridItem && !oGrid.engine.nodes.length && oGrid.opts.subGridDynamic) {\r\n oGrid.removeAsSubGrid();\r\n }\r\n }\r\n\r\n if (!node) return false;\r\n\r\n // use existing placeholder node as it's already in our list with drop location\r\n if (wasAdded) {\r\n this.engine.cleanupNode(node); // removes all internal _xyz values\r\n node.grid = this;\r\n }\r\n delete node.grid?._isTemp;\r\n dd.off(el, 'drag');\r\n // if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)\r\n // as the helper will be nuked by jquery-ui otherwise. TODO: update old code path\r\n if (helper !== el) {\r\n helper.remove();\r\n el.gridstackNode = origNode; // original item (left behind) is re-stored to pre dragging as the node now has drop info\r\n if (wasAdded) {\r\n el = el.cloneNode(true) as GridItemHTMLElement;\r\n }\r\n } else {\r\n el.remove(); // reduce flicker as we change depth here, and size further down\r\n this._removeDD(el);\r\n }\r\n if (!wasAdded) return false;\r\n el.gridstackNode = node;\r\n node.el = el;\r\n let subGrid = node.subGrid?.el?.gridstack; // set when actual sub-grid present\r\n // @ts-ignore\r\n Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578\r\n Utils.removePositioningStyles(el);// @ts-ignore\r\n this.el.appendChild(el);// @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)\r\n this._prepareElement(el, true, node);\r\n if (subGrid) {\r\n subGrid.parentGridItem = node;\r\n if (!subGrid.opts.styleInHead) subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved\r\n }\r\n this._updateContainerHeight();\r\n this.engine.addedNodes.push(node);// @ts-ignore\r\n this._triggerAddEvent();// @ts-ignore\r\n this._triggerChangeEvent();\r\n\r\n this.engine.endUpdate();\r\n if (this._gsEventHandler['dropped']) {\r\n this._gsEventHandler['dropped']({ ...event, type: 'dropped' }, origNode && origNode.grid ? origNode : undefined, node);\r\n }\r\n\r\n // delay adding animation back\r\n if (noAnim) this.setAnimation(this.opts.animate, true);\r\n\r\n return false; // prevent parent from receiving msg (which may be grid as well)\r\n });\r\n return this;\r\n }\r\n\r\n /** @internal mark item for removal */\r\n private static _itemRemoving(el: GridItemHTMLElement, remove: boolean) {\r\n const node = el ? el.gridstackNode : undefined;\r\n if (!node?.grid || el.classList.contains(node.grid.opts.removableOptions.decline)) return;\r\n remove ? node._isAboutToRemove = true : delete node._isAboutToRemove;\r\n remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing');\r\n }\r\n\r\n /** @internal called to setup a trash drop zone if the user specifies it */\r\n protected _setupRemoveDrop(): GridStack {\r\n if (typeof this.opts.removable !== 'string') return this;\r\n let trashEl = document.querySelector(this.opts.removable) as HTMLElement;\r\n if (!trashEl) return this;\r\n\r\n // only register ONE static drop-over/dropout callback for the 'trash', and it will\r\n // update the passed in item and parent grid because the '.trash' is a shared resource anyway,\r\n // and Native DD only has 1 event CB (having a list and technically a per grid removableOptions complicates things greatly)\r\n if (!this.opts.staticGrid && !dd.isDroppable(trashEl)) {\r\n dd.droppable(trashEl, this.opts.removableOptions)\r\n .on(trashEl, 'dropover', (event, el) => GridStack._itemRemoving(el, true))\r\n .on(trashEl, 'dropout', (event, el) => GridStack._itemRemoving(el, false));\r\n }\r\n return this;\r\n }\r\n\r\n /** @internal prepares the element for drag&drop */\r\n protected _prepareDragDropByNode(node: GridStackNode): GridStack {\r\n let el = node.el;\r\n const noMove = node.noMove || this.opts.disableDrag;\r\n const noResize = node.noResize || this.opts.disableResize;\r\n\r\n // check for disabled grid first\r\n if (this.opts.staticGrid || (noMove && noResize)) {\r\n if (node._initDD) {\r\n this._removeDD(el); // nukes everything instead of just disable, will add some styles back next\r\n delete node._initDD;\r\n }\r\n el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435\r\n return this;\r\n }\r\n\r\n if (!node._initDD) {\r\n // variables used/cashed between the 3 start/move/end methods, in addition to node passed above\r\n let cellWidth: number;\r\n let cellHeight: number;\r\n\r\n /** called when item starts moving/resizing */\r\n let onStartMoving = (event: Event, ui: DDUIData) => {\r\n // trigger any 'dragstart' / 'resizestart' manually\r\n if (this._gsEventHandler[event.type]) {\r\n this._gsEventHandler[event.type](event, event.target);\r\n }\r\n cellWidth = this.cellWidth();\r\n cellHeight = this.getCellHeight(true); // force pixels for calculations\r\n\r\n this._onStartMoving(el, event, ui, node, cellWidth, cellHeight);\r\n }\r\n\r\n /** called when item is being dragged/resized */\r\n let dragOrResize = (event: MouseEvent, ui: DDUIData) => {\r\n this._dragOrResize(el, event, ui, node, cellWidth, cellHeight);\r\n }\r\n\r\n /** called when the item stops moving/resizing */\r\n let onEndMoving = (event: Event) => {\r\n this.placeholder.remove();\r\n delete node._moving;\r\n delete node._event;\r\n delete node._lastTried;\r\n const widthChanged = node.w !== node._orig.w;\r\n\r\n // if the item has moved to another grid, we're done here\r\n let target: GridItemHTMLElement = event.target as GridItemHTMLElement;\r\n if (!target.gridstackNode || target.gridstackNode.grid !== this) return;\r\n\r\n node.el = target;\r\n\r\n if (node._isAboutToRemove) {\r\n let grid = el.gridstackNode.grid;\r\n if (grid._gsEventHandler[event.type]) {\r\n grid._gsEventHandler[event.type](event, target);\r\n }\r\n grid.engine.nodes.push(node); // temp add it back so we can proper remove it next\r\n grid.removeWidget(el, true, true);\r\n } else {\r\n Utils.removePositioningStyles(target);\r\n if (node._temporaryRemoved) {\r\n // got removed - restore item back to before dragging position\r\n Utils.copyPos(node, node._orig);// @ts-ignore\r\n this._writePosAttr(target, node);\r\n this.engine.addNode(node);\r\n } else {\r\n // move to new placeholder location\r\n this._writePosAttr(target, node);\r\n }\r\n if (this._gsEventHandler[event.type]) {\r\n this._gsEventHandler[event.type](event, target);\r\n }\r\n }\r\n // @ts-ignore\r\n this._extraDragRow = 0;// @ts-ignore\r\n this._updateContainerHeight();// @ts-ignore\r\n this._triggerChangeEvent();\r\n\r\n this.engine.endUpdate();\r\n\r\n if (event.type === 'resizestop') {\r\n if (Number.isInteger(node.sizeToContent)) node.sizeToContent = node.h; // new soft limit\r\n this.resizeToContentCheck(widthChanged, node); // wait for width animation if changed\r\n }\r\n }\r\n\r\n dd.draggable(el, {\r\n start: onStartMoving,\r\n stop: onEndMoving,\r\n drag: dragOrResize\r\n }).resizable(el, {\r\n start: onStartMoving,\r\n stop: onEndMoving,\r\n resize: dragOrResize\r\n });\r\n node._initDD = true; // we've set DD support now\r\n }\r\n\r\n // finally fine tune move vs resize by disabling any part...\r\n dd.draggable(el, noMove ? 'disable' : 'enable')\r\n .resizable(el, noResize ? 'disable' : 'enable');\r\n\r\n return this;\r\n }\r\n\r\n /** @internal handles actual drag/resize start */\r\n protected _onStartMoving(el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void {\r\n this.engine.cleanNodes()\r\n .beginUpdate(node);\r\n // @ts-ignore\r\n this._writePosAttr(this.placeholder, node)\r\n this.el.appendChild(this.placeholder);\r\n this.placeholder.gridstackNode = node;\r\n // console.log('_onStartMoving placeholder') // TEST\r\n\r\n // if the element is inside a grid, it has already been scaled\r\n // we can use that as a scale reference\r\n if (node.grid?.el) {\r\n this.dragTransform = Utils.getValuesFromTransformedElement(el);\r\n }\r\n // if the element is being dragged from outside (not from any grid)\r\n // we use the grid as the transformation reference, since the helper is not subject to transformation\r\n else if (this.placeholder && this.placeholder.closest('.grid-stack')) {\r\n const gridEl = this.placeholder.closest('.grid-stack') as HTMLElement;\r\n this.dragTransform = Utils.getValuesFromTransformedElement(gridEl);\r\n }\r\n // Fallback\r\n else {\r\n this.dragTransform = {\r\n xScale: 1,\r\n xOffset: 0,\r\n yScale: 1,\r\n yOffset: 0,\r\n }\r\n }\r\n\r\n node.el = this.placeholder;\r\n node._lastUiPosition = ui.position;\r\n node._prevYPix = ui.position.top;\r\n node._moving = (event.type === 'dragstart'); // 'dropover' are not initially moving so they can go exactly where they enter (will push stuff out of the way)\r\n delete node._lastTried;\r\n\r\n if (event.type === 'dropover' && node._temporaryRemoved) {\r\n // console.log('engine.addNode x=' + node.x); // TEST\r\n this.engine.addNode(node); // will add, fix collisions, update attr and clear _temporaryRemoved\r\n node._moving = true; // AFTER, mark as moving object (wanted fix location before)\r\n }\r\n\r\n // set the min/max resize info taking into account the column count and position (so we don't resize outside the grid)\r\n this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop as number, this.opts.marginRight as number, this.opts.marginBottom as number, this.opts.marginLeft as number);\r\n if (event.type === 'resizestart') {\r\n const colLeft = this.getColumn() - node.x;\r\n const rowLeft = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - node.y;\r\n dd.resizable(el, 'option', 'minWidth', cellWidth * Math.min(node.minW || 1, colLeft))\r\n .resizable(el, 'option', 'minHeight', cellHeight * Math.min(node.minH || 1, rowLeft))\r\n .resizable(el, 'option', 'maxWidth', cellWidth * Math.min(node.maxW || Number.MAX_SAFE_INTEGER, colLeft))\r\n .resizable(el, 'option', 'maxHeight', cellHeight * Math.min(node.maxH || Number.MAX_SAFE_INTEGER, rowLeft));\r\n }\r\n }\r\n\r\n /** @internal handles actual drag/resize */\r\n protected _dragOrResize(el: GridItemHTMLElement, event: MouseEvent, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void {\r\n let p = { ...node._orig }; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)\r\n let resizing: boolean;\r\n let mLeft = this.opts.marginLeft as number,\r\n mRight = this.opts.marginRight as number,\r\n mTop = this.opts.marginTop as number,\r\n mBottom = this.opts.marginBottom as number;\r\n\r\n // if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855\r\n let mHeight = Math.round(cellHeight * 0.1),\r\n mWidth = Math.round(cellWidth * 0.1);\r\n mLeft = Math.min(mLeft, mWidth);\r\n mRight = Math.min(mRight, mWidth);\r\n mTop = Math.min(mTop, mHeight);\r\n mBottom = Math.min(mBottom, mHeight);\r\n\r\n if (event.type === 'drag') {\r\n if (node._temporaryRemoved) return; // handled by dropover\r\n let distance = ui.position.top - node._prevYPix;\r\n node._prevYPix = ui.position.top;\r\n if (this.opts.draggable.scroll !== false) {\r\n Utils.updateScrollPosition(el, ui.position, distance);\r\n }\r\n\r\n // get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin)\r\n let left = ui.position.left + (ui.position.left > node._lastUiPosition.left ? -mRight : mLeft);\r\n let top = ui.position.top + (ui.position.top > node._lastUiPosition.top ? -mBottom : mTop);\r\n p.x = Math.round(left / cellWidth);\r\n p.y = Math.round(top / cellHeight);\r\n\r\n // @ts-ignore// if we're at the bottom hitting something else, grow the grid so cursor doesn't leave when trying to place below others\r\n let prev = this._extraDragRow;\r\n if (this.engine.collide(node, p)) {\r\n let row = this.getRow();\r\n let extra = Math.max(0, (p.y + node.h) - row);\r\n if (this.opts.maxRow && row + extra > this.opts.maxRow) {\r\n extra = Math.max(0, this.opts.maxRow - row);\r\n }// @ts-ignore\r\n this._extraDragRow = extra;// @ts-ignore\r\n } else this._extraDragRow = 0;// @ts-ignore\r\n if (this._extraDragRow !== prev) this._updateContainerHeight();\r\n\r\n if (node.x === p.x && node.y === p.y) return; // skip same\r\n // DON'T skip one we tried as we might have failed because of coverage <50% before\r\n // if (node._lastTried && node._lastTried.x === x && node._lastTried.y === y) return;\r\n } else if (event.type === 'resize') {\r\n if (p.x < 0) return;\r\n // Scrolling page if needed\r\n Utils.updateScrollResize(event, el, cellHeight);\r\n\r\n // get new size\r\n p.w = Math.round((ui.size.width - mLeft) / cellWidth);\r\n p.h = Math.round((ui.size.height - mTop) / cellHeight);\r\n if (node.w === p.w && node.h === p.h) return;\r\n if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h) return; // skip one we tried (but failed)\r\n\r\n // if we size on left/top side this might move us, so get possible new position as well\r\n let left = ui.position.left + mLeft;\r\n let top = ui.position.top + mTop;\r\n p.x = Math.round(left / cellWidth);\r\n p.y = Math.round(top / cellHeight);\r\n\r\n resizing = true;\r\n }\r\n\r\n node._event = event;\r\n node._lastTried = p; // set as last tried (will nuke if we go there)\r\n let rect: GridStackPosition = { // screen pix of the dragged box\r\n x: ui.position.left + mLeft,\r\n y: ui.position.top + mTop,\r\n w: (ui.size ? ui.size.width : node.w * cellWidth) - mLeft - mRight,\r\n h: (ui.size ? ui.size.height : node.h * cellHeight) - mTop - mBottom\r\n };\r\n if (this.engine.moveNodeCheck(node, { ...p, cellWidth, cellHeight, rect, resizing })) {\r\n node._lastUiPosition = ui.position;\r\n this.engine.cacheRects(cellWidth, cellHeight, mTop, mRight, mBottom, mLeft);\r\n delete node._skipDown;\r\n if (resizing && node.subGrid) node.subGrid.onResize();\r\n this._extraDragRow = 0;// @ts-ignore\r\n this._updateContainerHeight();\r\n\r\n let target = event.target as GridItemHTMLElement;// @ts-ignore\r\n this._writePosAttr(target, node);\r\n if (this._gsEventHandler[event.type]) {\r\n this._gsEventHandler[event.type](event, target);\r\n }\r\n }\r\n }\r\n\r\n /** @internal called when item leaving our area by either cursor dropout event\r\n * or shape is outside our boundaries. remove it from us, and mark temporary if this was\r\n * our item to start with else restore prev node values from prev grid it came from.\r\n */\r\n protected _leave(el: GridItemHTMLElement, helper?: GridItemHTMLElement): void {\r\n let node = el.gridstackNode;\r\n if (!node) return;\r\n\r\n helper = helper || el;\r\n // restore the scale of the helper on leave\r\n helper.style.transform = 'scale(1)';\r\n dd.off(el, 'drag'); // no need to track while being outside\r\n\r\n // this gets called when cursor leaves and shape is outside, so only do this once\r\n if (node._temporaryRemoved) return;\r\n node._temporaryRemoved = true;\r\n\r\n this.engine.removeNode(node); // remove placeholder as well, otherwise it's a sign node is not in our list, which is a bigger issue\r\n node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged\r\n\r\n if (this.opts.removable === true) { // boolean vs a class string\r\n // item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so\r\n GridStack._itemRemoving(el, true);\r\n }\r\n\r\n // finally if item originally came from another grid, but left us, restore things back to prev info\r\n if (el._gridstackNodeOrig) {\r\n // console.log('leave delete _gridstackNodeOrig') // TEST\r\n el.gridstackNode = el._gridstackNodeOrig;\r\n delete el._gridstackNodeOrig;\r\n } else if (node._isExternal) {\r\n // item came from outside (like a toolbar) so nuke any node info\r\n delete node.el;\r\n delete el.gridstackNode;\r\n // and restore all nodes back to original\r\n this.engine.restoreInitial();\r\n }\r\n }\r\n\r\n // legacy method removed\r\n public commit(): GridStack { obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; }\r\n}\r\n","/**\r\n * types.ts 10.3.0\r\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\r\n */\r\n\r\nimport { GridStack } from './gridstack';\r\nimport { GridStackEngine } from './gridstack-engine';\r\n\r\n// default values for grid options - used during init and when saving out\r\nexport const gridDefaults: GridStackOptions = {\r\n alwaysShowResizeHandle: 'mobile',\r\n animate: true,\r\n auto: true,\r\n cellHeight: 'auto',\r\n cellHeightThrottle: 100,\r\n cellHeightUnit: 'px',\r\n column: 12,\r\n draggable: { handle: '.grid-stack-item-content', appendTo: 'body', scroll: true },\r\n handle: '.grid-stack-item-content',\r\n itemClass: 'grid-stack-item',\r\n margin: 10,\r\n marginUnit: 'px',\r\n maxRow: 0,\r\n minRow: 0,\r\n placeholderClass: 'grid-stack-placeholder',\r\n placeholderText: '',\r\n removableOptions: { accept: 'grid-stack-item', decline: 'grid-stack-non-removable'},\r\n resizable: { handles: 'se' },\r\n rtl: 'auto',\r\n\r\n // **** same as not being set ****\r\n // disableDrag: false,\r\n // disableResize: false,\r\n // float: false,\r\n // handleClass: null,\r\n // removable: false,\r\n // staticGrid: false,\r\n // styleInHead: false,\r\n //removable\r\n};\r\n\r\n/** default dragIn options */\r\nexport const dragInDefaultOptions: DDDragInOpt = {\r\n handle: '.grid-stack-item-content',\r\n appendTo: 'body',\r\n // revert: 'invalid',\r\n // scroll: false,\r\n};\r\n\r\n/**\r\n * different layout options when changing # of columns, including a custom function that takes new/old column count, and array of new/old positions\r\n * Note: new list may be partially already filled if we have a cache of the layout at that size and new items were added later.\r\n * Options are:\r\n * 'list' - treat items as sorted list, keeping items (un-sized unless too big for column count) sequentially reflowing them\r\n * 'compact' - similar to list, but using compact() method which will possibly re-order items if an empty slots are available due to a larger item needing to be pushed to next row\r\n * 'moveScale' - will scale and move items by the ratio new newColumnCount / oldColumnCount\r\n * 'move' | 'scale' - will only size or move items\r\n * 'none' will leave items unchanged, unless they don't fit in column count\r\n */\r\nexport type ColumnOptions = 'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none' |\r\n ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);\r\nexport type CompactOptions = 'list' | 'compact';\r\nexport type numberOrString = number | string;\r\nexport interface GridItemHTMLElement extends HTMLElement {\r\n /** pointer to grid node instance */\r\n gridstackNode?: GridStackNode;\r\n /** @internal */\r\n _gridstackNodeOrig?: GridStackNode;\r\n}\r\n\r\nexport type GridStackElement = string | HTMLElement | GridItemHTMLElement;\r\n\r\n/** specific and general event handlers for the .on() method */\r\nexport type GridStackEventHandler = (event: Event) => void;\r\nexport type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;\r\nexport type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;\r\nexport type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;\r\nexport type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;\r\n\r\n/** optional function called during load() to callback the user on new added/remove grid items | grids */\r\nexport type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;\r\n\r\n/** optional function called during save() to let the caller add additional custom data to the GridStackWidget structure that will get returned */\r\nexport type SaveFcn = (node: GridStackNode, w: GridStackWidget) => void;\r\n\r\nexport type ResizeToContentFcn = (el: GridItemHTMLElement) => void;\r\n\r\n/** describes the responsive nature of the grid. NOTE: make sure to have correct extra CSS to support this. */\r\nexport interface Responsive {\r\n /** wanted width to maintain (+-50%) to dynamically pick a column count. NOTE: make sure to have correct extra CSS to support this. */\r\n columnWidth?: number;\r\n /** maximum number of columns allowed (default: 12). NOTE: make sure to have correct extra CSS to support this. */\r\n columnMax?: number;\r\n /** explicit width:column breakpoints instead of automatic 'columnWidth'. NOTE: make sure to have correct extra CSS to support this. */\r\n breakpoints?: Breakpoint[];\r\n /** specify if breakpoints are for window size or grid size (default:false = grid) */\r\n breakpointForWindow?: boolean;\r\n /** global re-layout mode when changing columns */\r\n layout?: ColumnOptions;\r\n}\r\n\r\nexport interface Breakpoint {\r\n /** <= width for the breakpoint to trigger */\r\n w?: number;\r\n /** column count */\r\n c: number;\r\n /** re-layout mode if different from global one */\r\n layout?: ColumnOptions;\r\n /** TODO: children layout, which spells out exact locations and could omit/add some children */\r\n // children?: GridStackWidget[];\r\n}\r\n\r\n/**\r\n * Defines the options for a Grid\r\n */\r\nexport interface GridStackOptions {\r\n /**\r\n * accept widgets dragged from other grids or from outside (default: `false`). Can be:\r\n * `true` (uses `'.grid-stack-item'` class filter) or `false`,\r\n * string for explicit class name,\r\n * function returning a boolean. See [example](http://gridstack.github.io/gridstack.js/demo/two.html)\r\n */\r\n acceptWidgets?: boolean | string | ((element: Element) => boolean);\r\n\r\n /** possible values (default: `mobile`) - does not apply to non-resizable widgets\r\n * `false` the resizing handles are only shown while hovering over a widget\r\n * `true` the resizing handles are always shown\r\n * 'mobile' if running on a mobile device, default to `true` (since there is no hovering per say), else `false`.\r\n See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html) */\r\n alwaysShowResizeHandle?: true | false | 'mobile';\r\n\r\n /** turns animation on (default?: true) */\r\n animate?: boolean;\r\n\r\n /** if false gridstack will not initialize existing items (default?: true) */\r\n auto?: boolean;\r\n\r\n /**\r\n * one cell height (default?: 'auto'). Can be:\r\n * an integer (px)\r\n * a string (ex: '100px', '10em', '10rem'). Note: % doesn't work right - see demo/cell-height.html\r\n * 0, in which case the library will not generate styles for rows. Everything must be defined in your own CSS files.\r\n * 'auto' - height will be calculated for square cells (width / column) and updated live as you resize the window - also see `cellHeightThrottle`\r\n * 'initial' - similar to 'auto' (start at square cells) but stay that size during window resizing.\r\n */\r\n cellHeight?: numberOrString;\r\n\r\n /** throttle time delay (in ms) used when cellHeight='auto' to improve performance vs usability (default?: 100).\r\n * A value of 0 will make it instant at a cost of re-creating the CSS file at ever window resize event!\r\n * */\r\n cellHeightThrottle?: number;\r\n\r\n /** (internal) unit for cellHeight (default? 'px') which is set when a string cellHeight with a unit is passed (ex: '10rem') */\r\n cellHeightUnit?: string;\r\n\r\n /** list of children item to create when calling load() or addGrid() */\r\n children?: GridStackWidget[];\r\n\r\n /** number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns.\r\n * Note: for nested grids, it is recommended to use 'auto' which will always match the container grid-item current width (in column) to keep inside and outside\r\n * items always to same. flag is not supported for regular non-nested grids.\r\n */\r\n column?: number | 'auto';\r\n\r\n /** responsive column layout for width:column behavior */\r\n columnOpts?: Responsive;\r\n\r\n /** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance.\r\n Note: only used by addGrid(), else your element should have the needed class */\r\n class?: string;\r\n\r\n /** disallows dragging of widgets (default?: false) */\r\n disableDrag?: boolean;\r\n\r\n /** disallows resizing of widgets (default?: false). */\r\n disableResize?: boolean;\r\n\r\n /** allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', appendTo?: 'body' }) */\r\n draggable?: DDDragOpt;\r\n\r\n /** let user drag nested grid items out of a parent or not (default true - not supported yet) */\r\n //dragOut?: boolean;\r\n\r\n /** the type of engine to create (so you can subclass) default to GridStackEngine */\r\n engineClass?: typeof GridStackEngine;\r\n\r\n /** enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html) */\r\n float?: boolean;\r\n\r\n /** draggable handle selector (default?: '.grid-stack-item-content') */\r\n handle?: string;\r\n\r\n /** draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) */\r\n handleClass?: string;\r\n\r\n /** additional widget class (default?: 'grid-stack-item') */\r\n itemClass?: string;\r\n\r\n /**\r\n * gap between grid item and content (default?: 10). This will set all 4 sides and support the CSS formats below\r\n * an integer (px)\r\n * a string with possible units (ex: '2em', '20px', '2rem')\r\n * string with space separated values (ex: '5px 10px 0 20px' for all 4 sides, or '5em 10em' for top/bottom and left/right pairs like CSS).\r\n * Note: all sides must have same units (last one wins, default px)\r\n */\r\n margin?: numberOrString;\r\n\r\n /** OLD way to optionally set each side - use margin: '5px 10px 0 20px' instead. Used internally to store each side. */\r\n marginTop?: numberOrString;\r\n marginRight?: numberOrString;\r\n marginBottom?: numberOrString;\r\n marginLeft?: numberOrString;\r\n\r\n /** (internal) unit for margin (default? 'px') set when `margin` is set as string with unit (ex: 2rem') */\r\n marginUnit?: string;\r\n\r\n /** maximum rows amount. Default? is 0 which means no maximum rows */\r\n maxRow?: number;\r\n\r\n /** minimum rows amount. Default is `0`. You can also do this with `min-height` CSS attribute\r\n * on the grid div in pixels, which will round to the closest row.\r\n */\r\n minRow?: number;\r\n\r\n /** If you are using a nonce-based Content Security Policy, pass your nonce here and\r\n * GridStack will add it to the