gridstack - npm Package Compare versions

Comparing version 7.3.0 to 8.0.0

dist/dd-base-impl.d.ts

 /**
- * dd-base-impl.ts 7.3.0
+ * dd-base-impl.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-export declare type EventCallback = (event: Event) => boolean | void;
+export type EventCallback = (event: Event) => boolean | void;
 export declare abstract class DDBaseImplement {
@@ -7,0 +7,0 @@ /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */

dist/dd-base-impl.js

@@ -1,9 +0,6 @@
-"use strict";
 /**
- * dd-base-impl.ts 7.3.0
+ * dd-base-impl.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DDBaseImplement = void 0;
-class DDBaseImplement {
+export class DDBaseImplement {
     constructor() {
@@ -35,3 +32,2 @@ /** @internal */
 }
-exports.DDBaseImplement = DDBaseImplement;
 //# sourceMappingURL=dd-base-impl.js.map

dist/dd-draggable.d.ts

 /**
- * dd-draggable.ts 7.3.0
+ * dd-draggable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -15,3 +15,3 @@ */
 }
-declare type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
+type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
 export declare class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {
@@ -18,0 +18,0 @@ el: HTMLElement;

dist/dd-draggable.js

@@ -1,14 +0,11 @@
-"use strict";
 /**
- * dd-draggable.ts 7.3.0
+ * dd-draggable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DDDraggable = void 0;
-const dd_manager_1 = require("./dd-manager");
-const utils_1 = require("./utils");
-const dd_base_impl_1 = require("./dd-base-impl");
-const dd_touch_1 = require("./dd-touch");
+import { DDManager } from './dd-manager';
+import { Utils } from './utils';
+import { DDBaseImplement } from './dd-base-impl';
+import { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';
 // let count = 0; // TEST
-class DDDraggable extends dd_base_impl_1.DDBaseImplement {
+class DDDraggable extends DDBaseImplement {
     constructor(el, option = {}) {
@@ -38,9 +35,8 @@ super();
         this.dragEl.addEventListener('mousedown', this._mouseDown);
-        if (dd_touch_1.isTouch) {
-            this.dragEl.addEventListener('touchstart', dd_touch_1.touchstart);
-            this.dragEl.addEventListener('pointerdown', dd_touch_1.pointerdown);
+        if (isTouch) {
+            this.dragEl.addEventListener('touchstart', touchstart);
+            this.dragEl.addEventListener('pointerdown', pointerdown);
             // this.dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment
         }
         this.el.classList.remove('ui-draggable-disabled');
-        this.el.classList.add('ui-draggable');
     }
@@ -52,7 +48,6 @@ disable(forDestroy = false) {
         this.dragEl.removeEventListener('mousedown', this._mouseDown);
-        if (dd_touch_1.isTouch) {
-            this.dragEl.removeEventListener('touchstart', dd_touch_1.touchstart);
-            this.dragEl.removeEventListener('pointerdown', dd_touch_1.pointerdown);
+        if (isTouch) {
+            this.dragEl.removeEventListener('touchstart', touchstart);
+            this.dragEl.removeEventListener('pointerdown', pointerdown);
         }
-        this.el.classList.remove('ui-draggable');
         if (!forDestroy)
@@ -80,3 +75,3 @@ this.el.classList.add('ui-draggable-disabled');
         // don't let more than one widget handle mouseStart
-        if (dd_manager_1.DDManager.mouseHandled)
+        if (DDManager.mouseHandled)
             return;
@@ -102,10 +97,10 @@ if (e.button !== 0)
         delete this.dragging;
-        delete dd_manager_1.DDManager.dragElement;
-        delete dd_manager_1.DDManager.dropElement;
+        delete DDManager.dragElement;
+        delete DDManager.dropElement;
         // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack
         document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble
         document.addEventListener('mouseup', this._mouseUp, true);
-        if (dd_touch_1.isTouch) {
-            this.dragEl.addEventListener('touchmove', dd_touch_1.touchmove);
-            this.dragEl.addEventListener('touchend', dd_touch_1.touchend);
+        if (isTouch) {
+            this.dragEl.addEventListener('touchmove', touchmove);
+            this.dragEl.addEventListener('touchend', touchend);
         }
@@ -117,3 +112,3 @@ e.preventDefault();
             document.activeElement.blur();
-        dd_manager_1.DDManager.mouseHandled = true;
+        DDManager.mouseHandled = true;
         return true;
@@ -125,3 +120,3 @@ }
             return;
-        const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'drag' });
+        const ev = Utils.initEvent(e, { target: this.el, type: 'drag' });
         if (this.option.drag) {
@@ -134,3 +129,2 @@ this.option.drag(ev, this.ui());
     _mouseMove(e) {
-        var _a;
         // console.log(`${count++} move ${e.x},${e.y}`)
@@ -141,4 +135,4 @@ let s = this.mouseDownEvent;
             // delay actual grid handling drag until we pause for a while if set
-            if (dd_manager_1.DDManager.pauseDrag) {
-                const pause = Number.isInteger(dd_manager_1.DDManager.pauseDrag) ? dd_manager_1.DDManager.pauseDrag : 100;
+            if (DDManager.pauseDrag) {
+                const pause = Number.isInteger(DDManager.pauseDrag) ? DDManager.pauseDrag : 100;
                 if (this.dragTimeout)
@@ -157,10 +151,10 @@ window.clearTimeout(this.dragTimeout);
             this.dragging = true;
-            dd_manager_1.DDManager.dragElement = this;
+            DDManager.dragElement = this;
             // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)
-            let grid = (_a = this.el.gridstackNode) === null || _a === void 0 ? void 0 : _a.grid;
+            let grid = this.el.gridstackNode?.grid;
             if (grid) {
-                dd_manager_1.DDManager.dropElement = grid.el.ddElement.ddDroppable;
+                DDManager.dropElement = grid.el.ddElement.ddDroppable;
             }
             else {
-                delete dd_manager_1.DDManager.dropElement;
+                delete DDManager.dropElement;
             }
@@ -170,3 +164,3 @@ this.helper = this._createHelper(e);
             this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);
-            const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dragstart' });
+            const ev = Utils.initEvent(e, { target: this.el, type: 'dragstart' });
             this._setupHelperStyle(e);
@@ -183,8 +177,7 @@ if (this.option.start) {
     _mouseUp(e) {
-        var _a;
         document.removeEventListener('mousemove', this._mouseMove, true);
         document.removeEventListener('mouseup', this._mouseUp, true);
-        if (dd_touch_1.isTouch) {
-            this.dragEl.removeEventListener('touchmove', dd_touch_1.touchmove, true);
-            this.dragEl.removeEventListener('touchend', dd_touch_1.touchend, true);
+        if (isTouch) {
+            this.dragEl.removeEventListener('touchmove', touchmove, true);
+            this.dragEl.removeEventListener('touchend', touchend, true);
         }
@@ -194,4 +187,4 @@ if (this.dragging) {
             // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)
-            if (((_a = dd_manager_1.DDManager.dropElement) === null || _a === void 0 ? void 0 : _a.el) === this.el.parentElement) {
-                delete dd_manager_1.DDManager.dropElement;
+            if (DDManager.dropElement?.el === this.el.parentElement) {
+                delete DDManager.dropElement;
             }
@@ -205,3 +198,3 @@ this.helperContainment.style.position = this.parentOriginStylePosition || null;
             }
-            const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dragstop' });
+            const ev = Utils.initEvent(e, { target: this.el, type: 'dragstop' });
             if (this.option.stop) {
@@ -212,4 +205,4 @@ this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!
             // call the droppable method to receive the item
-            if (dd_manager_1.DDManager.dropElement) {
-                dd_manager_1.DDManager.dropElement.drop(e);
+            if (DDManager.dropElement) {
+                DDManager.dropElement.drop(e);
             }
@@ -219,5 +212,5 @@ }
         delete this.mouseDownEvent;
-        delete dd_manager_1.DDManager.dragElement;
-        delete dd_manager_1.DDManager.dropElement;
-        delete dd_manager_1.DDManager.mouseHandled;
+        delete DDManager.dragElement;
+        delete DDManager.dropElement;
+        delete DDManager.mouseHandled;
         e.preventDefault();
@@ -232,6 +225,6 @@ }
         else if (this.option.helper === 'clone') {
-            helper = utils_1.Utils.cloneNode(this.el);
+            helper = Utils.cloneNode(this.el);
         }
         if (!document.body.contains(helper)) {
-            utils_1.Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentNode : this.option.appendTo);
+            Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentNode : this.option.appendTo);
         }
@@ -266,7 +259,6 @@ if (helper === this.el) {
     _removeHelperStyle() {
-        var _a;
         this.helper.classList.remove('ui-draggable-dragging');
-        let node = (_a = this.helper) === null || _a === void 0 ? void 0 : _a.gridstackNode;
+        let node = this.helper?.gridstackNode;
         // don't bother restoring styles if we're gonna remove anyway...
-        if (!(node === null || node === void 0 ? void 0 : node._isAboutToRemove) && this.dragElementOriginStyle) {
+        if (!node?._isAboutToRemove && this.dragElementOriginStyle) {
             let helper = this.helper;
@@ -316,3 +308,3 @@ // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.
             const testEl = document.createElement('div');
-            utils_1.Utils.addElStyles(testEl, {
+            Utils.addElStyles(testEl, {
                 opacity: '0',
@@ -360,5 +352,5 @@ position: 'fixed',
 }
-exports.DDDraggable = DDDraggable;
 /** @internal properties we change during dragging, and restore back */
 DDDraggable.originStyleProp = ['transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];
+export { DDDraggable };
 //# sourceMappingURL=dd-draggable.js.map

dist/dd-droppable.d.ts

 /**
- * dd-droppable.ts 7.3.0
+ * dd-droppable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-droppable.js

@@ -1,14 +0,11 @@
-"use strict";
 /**
- * dd-droppable.ts 7.3.0
+ * dd-droppable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DDDroppable = void 0;
-const dd_manager_1 = require("./dd-manager");
-const dd_base_impl_1 = require("./dd-base-impl");
-const utils_1 = require("./utils");
-const dd_touch_1 = require("./dd-touch");
+import { DDManager } from './dd-manager';
+import { DDBaseImplement } from './dd-base-impl';
+import { Utils } from './utils';
+import { isTouch, pointerenter, pointerleave } from './dd-touch';
 // let count = 0; // TEST
-class DDDroppable extends dd_base_impl_1.DDBaseImplement {
+export class DDDroppable extends DDBaseImplement {
     constructor(el, opts = {}) {
@@ -38,5 +35,5 @@ super();
         this.el.addEventListener('mouseleave', this._mouseLeave);
-        if (dd_touch_1.isTouch) {
-            this.el.addEventListener('pointerenter', dd_touch_1.pointerenter);
-            this.el.addEventListener('pointerleave', dd_touch_1.pointerleave);
+        if (isTouch) {
+            this.el.addEventListener('pointerenter', pointerenter);
+            this.el.addEventListener('pointerleave', pointerleave);
         }
@@ -53,5 +50,5 @@ }
         this.el.removeEventListener('mouseleave', this._mouseLeave);
-        if (dd_touch_1.isTouch) {
-            this.el.removeEventListener('pointerenter', dd_touch_1.pointerenter);
-            this.el.removeEventListener('pointerleave', dd_touch_1.pointerleave);
+        if (isTouch) {
+            this.el.removeEventListener('pointerenter', pointerenter);
+            this.el.removeEventListener('pointerleave', pointerleave);
         }
@@ -73,5 +70,5 @@ }
         // console.log(`${count++} Enter ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
-        if (!dd_manager_1.DDManager.dragElement)
+        if (!DDManager.dragElement)
             return;
-        if (!this._canDrop(dd_manager_1.DDManager.dragElement.el))
+        if (!this._canDrop(DDManager.dragElement.el))
             return;
@@ -81,9 +78,9 @@ e.preventDefault();
         // make sure when we enter this, that the last one gets a leave FIRST to correctly cleanup as we don't always do
-        if (dd_manager_1.DDManager.dropElement && dd_manager_1.DDManager.dropElement !== this) {
-            dd_manager_1.DDManager.dropElement._mouseLeave(e);
+        if (DDManager.dropElement && DDManager.dropElement !== this) {
+            DDManager.dropElement._mouseLeave(e);
         }
-        dd_manager_1.DDManager.dropElement = this;
-        const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dropover' });
+        DDManager.dropElement = this;
+        const ev = Utils.initEvent(e, { target: this.el, type: 'dropover' });
         if (this.option.over) {
-            this.option.over(ev, this._ui(dd_manager_1.DDManager.dragElement));
+            this.option.over(ev, this._ui(DDManager.dragElement));
         }
@@ -96,15 +93,14 @@ this.triggerEvent('dropover', ev);
     _mouseLeave(e) {
-        var _a;
         // console.log(`${count++} Leave ${this.el.id || (this.el as GridHTMLElement).gridstack.opts.id}`); // TEST
-        if (!dd_manager_1.DDManager.dragElement || dd_manager_1.DDManager.dropElement !== this)
+        if (!DDManager.dragElement || DDManager.dropElement !== this)
             return;
         e.preventDefault();
         e.stopPropagation();
-        const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'dropout' });
+        const ev = Utils.initEvent(e, { target: this.el, type: 'dropout' });
         if (this.option.out) {
-            this.option.out(ev, this._ui(dd_manager_1.DDManager.dragElement));
+            this.option.out(ev, this._ui(DDManager.dragElement));
         }
         this.triggerEvent('dropout', ev);
-        if (dd_manager_1.DDManager.dropElement === this) {
-            delete dd_manager_1.DDManager.dropElement;
+        if (DDManager.dropElement === this) {
+            delete DDManager.dropElement;
             // console.log('not tracking'); // TEST
@@ -115,3 +111,3 @@ // if we're still over a parent droppable, send it an enter as we don't get one from leaving nested children
             while (!parentDrop && parent) {
-                parentDrop = (_a = parent.ddElement) === null || _a === void 0 ? void 0 : _a.ddDroppable;
+                parentDrop = parent.ddElement?.ddDroppable;
                 parent = parent.parentElement;
@@ -127,5 +123,5 @@ }
         e.preventDefault();
-        const ev = utils_1.Utils.initEvent(e, { target: this.el, type: 'drop' });
+        const ev = Utils.initEvent(e, { target: this.el, type: 'drop' });
         if (this.option.drop) {
-            this.option.drop(ev, this._ui(dd_manager_1.DDManager.dragElement));
+            this.option.drop(ev, this._ui(DDManager.dragElement));
         }
@@ -152,6 +148,8 @@ this.triggerEvent('drop', ev);
     _ui(drag) {
-        return Object.assign({ draggable: drag.el }, drag.ui());
+        return {
+            draggable: drag.el,
+            ...drag.ui()
+        };
     }
 }
-exports.DDDroppable = DDDroppable;
 //# sourceMappingURL=dd-droppable.js.map

dist/dd-element.d.ts

 /**
- * dd-elements.ts 7.3.0
+ * dd-elements.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-element.js

@@ -1,15 +0,9 @@
-"use strict";
 /**
- * dd-elements.ts 7.3.0
+ * dd-elements.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DDElement = void 0;
-const dd_resizable_1 = require("./dd-resizable");
-const dd_draggable_1 = require("./dd-draggable");
-const dd_droppable_1 = require("./dd-droppable");
-class DDElement {
-    constructor(el) {
-        this.el = el;
-    }
+import { DDResizable } from './dd-resizable';
+import { DDDraggable } from './dd-draggable';
+import { DDDroppable } from './dd-droppable';
+export class DDElement {
     static init(el) {
@@ -21,2 +15,5 @@ if (!el.ddElement) {
     }
+    constructor(el) {
+        this.el = el;
+    }
     on(eventName, callback) {
@@ -48,3 +45,3 @@ if (this.ddDraggable && ['drag', 'dragstart', 'dragstop'].indexOf(eventName) > -1) {
         if (!this.ddDraggable) {
-            this.ddDraggable = new dd_draggable_1.DDDraggable(this.el, opts);
+            this.ddDraggable = new DDDraggable(this.el, opts);
         }
@@ -65,3 +62,3 @@ else {
         if (!this.ddResizable) {
-            this.ddResizable = new dd_resizable_1.DDResizable(this.el, opts);
+            this.ddResizable = new DDResizable(this.el, opts);
         }
@@ -82,3 +79,3 @@ else {
         if (!this.ddDroppable) {
-            this.ddDroppable = new dd_droppable_1.DDDroppable(this.el, opts);
+            this.ddDroppable = new DDDroppable(this.el, opts);
         }
@@ -98,3 +95,2 @@ else {
 }
-exports.DDElement = DDElement;
 //# sourceMappingURL=dd-element.js.map

dist/dd-gridstack.d.ts

 /**
- * dd-gridstack.ts 7.3.0
+ * dd-gridstack.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -8,3 +8,3 @@ */
 /** Drag&Drop drop options */
-export declare type DDDropOpt = {
+export type DDDropOpt = {
     /** function or class type that this grid will accept as dropped items (see GridStackOptions.acceptWidgets) */
@@ -14,7 +14,7 @@ accept?: (el: GridItemHTMLElement) => boolean;
 /** drag&drop options currently called from the main code, but others can be passed in grid options */
-export declare type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
-export declare type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';
-export declare type DDValue = number | string;
+export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
+export type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';
+export type DDValue = number | string;
 /** drag&drop events callbacks */
-export declare type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
+export type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
 /**
@@ -21,0 +21,0 @@ * HTML Native Mouse and Touch Events Drag and Drop functionality.

dist/dd-gridstack.js

@@ -1,11 +0,8 @@
-"use strict";
 /**
- * dd-gridstack.ts 7.3.0
+ * dd-gridstack.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DDGridStack = void 0;
-const utils_1 = require("./utils");
-const dd_manager_1 = require("./dd-manager");
-const dd_element_1 = require("./dd-element");
+import { Utils } from './utils';
+import { DDManager } from './dd-manager';
+import { DDElement } from './dd-element';
 // let count = 0; // TEST
@@ -15,3 +12,3 @@ /**
  */
-class DDGridStack {
+export class DDGridStack {
     resizable(el, opts, key, value) {
@@ -32,7 +29,11 @@ this._getDDElements(el).forEach(dEl => {
                 let autoHide = !grid.opts.alwaysShowResizeHandle;
-                dEl.setupResizable(Object.assign(Object.assign(Object.assign({}, grid.opts.resizable), { handles, autoHide }), {
-                    start: opts.start,
-                    stop: opts.stop,
-                    resize: opts.resize
-                }));
+                dEl.setupResizable({
+                    ...grid.opts.resizable,
+                    ...{ handles, autoHide },
+                    ...{
+                        start: opts.start,
+                        stop: opts.stop,
+                        resize: opts.resize
+                    }
+                });
             }
@@ -55,8 +56,11 @@ });
                 const grid = dEl.el.gridstackNode.grid;
-                dEl.setupDraggable(Object.assign(Object.assign({}, grid.opts.draggable), {
-                    // containment: (grid.parentGridItem && !grid.opts.dragOut) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
-                    start: opts.start,
-                    stop: opts.stop,
-                    drag: opts.drag
-                }));
+                dEl.setupDraggable({
+                    ...grid.opts.draggable,
+                    ...{
+                        // containment: (grid.parentGridItem && !grid.opts.dragOut) ? grid.el.parentElement : (grid.opts.draggable.containment || null),
+                        start: opts.start,
+                        stop: opts.stop,
+                        drag: opts.drag
+                    }
+                });
             }
@@ -107,3 +111,3 @@ });
         this._getDDElements(el).forEach(dEl => dEl.on(name, (event) => {
-            callback(event, dd_manager_1.DDManager.dragElement ? dd_manager_1.DDManager.dragElement.el : event.target, dd_manager_1.DDManager.dragElement ? dd_manager_1.DDManager.dragElement.helper : null);
+            callback(event, DDManager.dragElement ? DDManager.dragElement.el : event.target, DDManager.dragElement ? DDManager.dragElement.helper : null);
         }));
@@ -118,6 +122,6 @@ return this;
     _getDDElements(els, create = true) {
-        let hosts = utils_1.Utils.getElements(els);
+        let hosts = Utils.getElements(els);
         if (!hosts.length)
             return [];
-        let list = hosts.map(e => e.ddElement || (create ? dd_element_1.DDElement.init(e) : null));
+        let list = hosts.map(e => e.ddElement || (create ? DDElement.init(e) : null));
         if (!create) {
@@ -129,3 +133,2 @@ list.filter(d => d);
 }
-exports.DDGridStack = DDGridStack;
 //# sourceMappingURL=dd-gridstack.js.map

dist/dd-manager.d.ts

 /**
- * dd-manager.ts 7.3.0
+ * dd-manager.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-manager.js

@@ -1,14 +0,10 @@
-"use strict";
 /**
- * dd-manager.ts 7.3.0
+ * dd-manager.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DDManager = void 0;
 /**
  * globals that are shared across Drag & Drop instances
  */
-class DDManager {
+export class DDManager {
 }
-exports.DDManager = DDManager;
 //# sourceMappingURL=dd-manager.js.map

dist/dd-resizable-handle.d.ts

 /**
- * dd-resizable-handle.ts 7.3.0
+ * dd-resizable-handle.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-resizable-handle.js

@@ -1,9 +0,6 @@
-"use strict";
 /**
- * dd-resizable-handle.ts 7.3.0
+ * dd-resizable-handle.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DDResizableHandle = void 0;
-const dd_touch_1 = require("./dd-touch");
+import { isTouch, pointerdown, touchend, touchmove, touchstart } from './dd-touch';
 class DDResizableHandle {
@@ -32,5 +29,5 @@ constructor(host, direction, option) {
         this.el.addEventListener('mousedown', this._mouseDown);
-        if (dd_touch_1.isTouch) {
-            this.el.addEventListener('touchstart', dd_touch_1.touchstart);
-            this.el.addEventListener('pointerdown', dd_touch_1.pointerdown);
+        if (isTouch) {
+            this.el.addEventListener('touchstart', touchstart);
+            this.el.addEventListener('pointerdown', pointerdown);
             // this.el.style.touchAction = 'none'; // not needed unlike pointerdown doc comment
@@ -45,5 +42,5 @@ }
         this.el.removeEventListener('mousedown', this._mouseDown);
-        if (dd_touch_1.isTouch) {
-            this.el.removeEventListener('touchstart', dd_touch_1.touchstart);
-            this.el.removeEventListener('pointerdown', dd_touch_1.pointerdown);
+        if (isTouch) {
+            this.el.removeEventListener('touchstart', touchstart);
+            this.el.removeEventListener('pointerdown', pointerdown);
         }
@@ -60,5 +57,5 @@ this.host.removeChild(this.el);
         document.addEventListener('mouseup', this._mouseUp, true);
-        if (dd_touch_1.isTouch) {
-            this.el.addEventListener('touchmove', dd_touch_1.touchmove);
-            this.el.addEventListener('touchend', dd_touch_1.touchend);
+        if (isTouch) {
+            this.el.addEventListener('touchmove', touchmove);
+            this.el.addEventListener('touchend', touchend);
         }
@@ -90,5 +87,5 @@ e.stopPropagation();
         document.removeEventListener('mouseup', this._mouseUp, true);
-        if (dd_touch_1.isTouch) {
-            this.el.removeEventListener('touchmove', dd_touch_1.touchmove);
-            this.el.removeEventListener('touchend', dd_touch_1.touchend);
+        if (isTouch) {
+            this.el.removeEventListener('touchmove', touchmove);
+            this.el.removeEventListener('touchend', touchend);
         }
@@ -107,5 +104,5 @@ delete this.moving;
 }
-exports.DDResizableHandle = DDResizableHandle;
 /** @internal */
 DDResizableHandle.prefix = 'ui-resizable-';
+export { DDResizableHandle };
 //# sourceMappingURL=dd-resizable-handle.js.map

dist/dd-resizable.d.ts

 /**
- * dd-resizable.ts 7.3.0
+ * dd-resizable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-resizable.js

@@ -1,13 +0,10 @@
-"use strict";
 /**
- * dd-resizable.ts 7.3.0
+ * dd-resizable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DDResizable = void 0;
-const dd_resizable_handle_1 = require("./dd-resizable-handle");
-const dd_base_impl_1 = require("./dd-base-impl");
-const utils_1 = require("./utils");
-const dd_manager_1 = require("./dd-manager");
-class DDResizable extends dd_base_impl_1.DDBaseImplement {
+import { DDResizableHandle } from './dd-resizable-handle';
+import { DDBaseImplement } from './dd-base-impl';
+import { Utils } from './utils';
+import { DDManager } from './dd-manager';
+class DDResizable extends DDBaseImplement {
     constructor(el, opts = {}) {
@@ -67,3 +64,2 @@ super();
         super.enable();
-        this.el.classList.add('ui-resizable');
         this.el.classList.remove('ui-resizable-disabled');
@@ -75,3 +71,2 @@ this._setupAutoHide(this.option.autoHide);
         this.el.classList.add('ui-resizable-disabled');
-        this.el.classList.remove('ui-resizable');
         this._setupAutoHide(false);
@@ -82,3 +77,2 @@ }
         this._setupAutoHide(false);
-        this.el.classList.remove('ui-resizable');
         delete this.el;
@@ -112,4 +106,4 @@ super.destroy();
             this.el.removeEventListener('mouseout', this._mouseOut);
-            if (dd_manager_1.DDManager.overResizeElement === this) {
-                delete dd_manager_1.DDManager.overResizeElement;
+            if (DDManager.overResizeElement === this) {
+                delete DDManager.overResizeElement;
             }
@@ -124,5 +118,5 @@ }
         // already over a child, ignore. Ideally we just call e.stopPropagation() but see https://github.com/gridstack/gridstack.js/issues/2018
-        if (dd_manager_1.DDManager.overResizeElement || dd_manager_1.DDManager.dragElement)
+        if (DDManager.overResizeElement || DDManager.dragElement)
             return;
-        dd_manager_1.DDManager.overResizeElement = this;
+        DDManager.overResizeElement = this;
         // console.log(`${count++} enter ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
@@ -135,5 +129,5 @@ this.el.classList.remove('ui-resizable-autohide');
         // console.log(`${count++} pre-leave ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
-        if (dd_manager_1.DDManager.overResizeElement !== this)
+        if (DDManager.overResizeElement !== this)
             return;
-        delete dd_manager_1.DDManager.overResizeElement;
+        delete DDManager.overResizeElement;
         // console.log(`${count++} leave ${(this.el as GridItemHTMLElement).gridstackNode._id}`)
@@ -150,3 +144,3 @@ this.el.classList.add('ui-resizable-autohide');
             .map(dir => dir.trim())
-            .map(dir => new dd_resizable_handle_1.DDResizableHandle(this.el, dir, {
+            .map(dir => new DDResizableHandle(this.el, dir, {
             start: (event) => {
@@ -167,3 +161,3 @@ this._resizeStart(event);
         this.originalRect = this.el.getBoundingClientRect();
-        this.scrollEl = utils_1.Utils.getScrollElement(this.el);
+        this.scrollEl = Utils.getScrollElement(this.el);
         this.scrollY = this.scrollEl.scrollTop;
@@ -174,3 +168,3 @@ this.scrolled = 0;
         this._applyChange();
-        const ev = utils_1.Utils.initEvent(event, { type: 'resizestart', target: this.el });
+        const ev = Utils.initEvent(event, { type: 'resizestart', target: this.el });
         if (this.option.start) {
@@ -188,3 +182,3 @@ this.option.start(ev, this._ui());
         this._applyChange();
-        const ev = utils_1.Utils.initEvent(event, { type: 'resize', target: this.el });
+        const ev = Utils.initEvent(event, { type: 'resize', target: this.el });
         if (this.option.resize) {
@@ -198,3 +192,3 @@ this.option.resize(ev, this._ui());
     _resizeStop(event) {
-        const ev = utils_1.Utils.initEvent(event, { type: 'resizestop', target: this.el });
+        const ev = Utils.initEvent(event, { type: 'resizestop', target: this.el });
         if (this.option.stop) {
@@ -305,5 +299,5 @@ this.option.stop(ev); // Note: ui() not used by gridstack so don't pass
 }
-exports.DDResizable = DDResizable;
 /** @internal */
 DDResizable._originStyleProp = ['width', 'height', 'position', 'left', 'top', 'opacity', 'zIndex'];
+export { DDResizable };
 //# sourceMappingURL=dd-resizable.js.map

dist/dd-touch.d.ts

 /**
- * touch.ts 7.3.0
+ * touch.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/dd-touch.js

@@ -1,9 +0,6 @@
-"use strict";
 /**
- * touch.ts 7.3.0
+ * touch.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.pointerleave = exports.pointerenter = exports.pointerdown = exports.touchend = exports.touchmove = exports.touchstart = exports.isTouch = void 0;
-const dd_manager_1 = require("./dd-manager");
+import { DDManager } from './dd-manager';
 /**
@@ -14,3 +11,3 @@ * Detect touch support - Windows Surface devices and other touch devices
  */
-exports.isTouch = typeof window !== 'undefined' && typeof document !== 'undefined' &&
+export const isTouch = typeof window !== 'undefined' && typeof document !== 'undefined' &&
     ('ontouchstart' in document
@@ -103,3 +100,3 @@ || 'ontouchstart' in window
  */
-function touchstart(e) {
+export function touchstart(e) {
     // Ignore the event if another widget is already being handled
@@ -114,3 +111,2 @@ if (DDTouch.touchHandled)
 }
-exports.touchstart = touchstart;
 /**
@@ -120,3 +116,3 @@ * Handle the touchmove events
  */
-function touchmove(e) {
+export function touchmove(e) {
     // Ignore event if not handled by us
@@ -127,3 +123,2 @@ if (!DDTouch.touchHandled)
 }
-exports.touchmove = touchmove;
 /**
@@ -133,3 +128,3 @@ * Handle the touchend events
  */
-function touchend(e) {
+export function touchend(e) {
     // Ignore event if not handled
@@ -143,3 +138,3 @@ if (!DDTouch.touchHandled)
     }
-    const wasDragging = !!dd_manager_1.DDManager.dragElement;
+    const wasDragging = !!DDManager.dragElement;
     // Simulate the mouseup event
@@ -155,3 +150,2 @@ simulateMouseEvent(e, 'mouseup');
 }
-exports.touchend = touchend;
 /**
@@ -162,10 +156,9 @@ * Note we don't get touchenter/touchleave (which are deprecated)
  */
-function pointerdown(e) {
+export function pointerdown(e) {
     // console.log("pointer down")
     e.target.releasePointerCapture(e.pointerId); // <- Important!
 }
-exports.pointerdown = pointerdown;
-function pointerenter(e) {
+export function pointerenter(e) {
     // ignore the initial one we get on pointerdown on ourself
-    if (!dd_manager_1.DDManager.dragElement) {
+    if (!DDManager.dragElement) {
         // console.log('pointerenter ignored');
@@ -177,7 +170,6 @@ return;
 }
-exports.pointerenter = pointerenter;
-function pointerleave(e) {
+export function pointerleave(e) {
     // ignore the leave on ourself we get before releasing the mouse over ourself
     // by delaying sending the event and having the up event cancel us
-    if (!dd_manager_1.DDManager.dragElement) {
+    if (!DDManager.dragElement) {
         // console.log('pointerleave ignored');
@@ -192,3 +184,2 @@ return;
 }
-exports.pointerleave = pointerleave;
 //# sourceMappingURL=dd-touch.js.map

dist/es5/dd-base-impl.d.ts

 /**
- * dd-base-impl.ts 7.3.0
+ * dd-base-impl.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-export declare type EventCallback = (event: Event) => boolean | void;
+export type EventCallback = (event: Event) => boolean | void;
 export declare abstract class DDBaseImplement {
@@ -7,0 +7,0 @@ /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */

dist/es5/dd-base-impl.js

 "use strict";
 /**
- * dd-base-impl.ts 7.3.0
+ * dd-base-impl.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-draggable.d.ts

 /**
- * dd-draggable.ts 7.3.0
+ * dd-draggable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -15,3 +15,3 @@ */
 }
-declare type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
+type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
 export declare class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {
@@ -18,0 +18,0 @@ el: HTMLElement;

dist/es5/dd-draggable.js

 "use strict";
 /**
- * dd-draggable.ts 7.3.0
+ * dd-draggable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -10,6 +10,8 @@ */
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -27,3 +29,3 @@ function __() { this.constructor = d; }
 // let count = 0; // TEST
-var DDDraggable = /** @class */ (function (_super) {
+var DDDraggable = exports.DDDraggable = /** @class */ (function (_super) {
     __extends(DDDraggable, _super);
@@ -62,3 +64,2 @@ function DDDraggable(el, option) {
         this.el.classList.remove('ui-draggable-disabled');
-        this.el.classList.add('ui-draggable');
     };
@@ -75,3 +76,2 @@ DDDraggable.prototype.disable = function (forDestroy) {
         }
-        this.el.classList.remove('ui-draggable');
         if (!forDestroy)
@@ -371,3 +371,2 @@ this.el.classList.add('ui-draggable-disabled');
 }(dd_base_impl_1.DDBaseImplement));
-exports.DDDraggable = DDDraggable;
 //# sourceMappingURL=dd-draggable.js.map

dist/es5/dd-droppable.d.ts

 /**
- * dd-droppable.ts 7.3.0
+ * dd-droppable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-droppable.js

 "use strict";
 /**
- * dd-droppable.ts 7.3.0
+ * dd-droppable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -10,6 +10,8 @@ */
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -16,0 +18,0 @@ function __() { this.constructor = d; }

dist/es5/dd-element.d.ts

 /**
- * dd-elements.ts 7.3.0
+ * dd-elements.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-element.js

 "use strict";
 /**
- * dd-elements.ts 7.3.0
+ * dd-elements.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-gridstack.d.ts

 /**
- * dd-gridstack.ts 7.3.0
+ * dd-gridstack.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -8,3 +8,3 @@ */
 /** Drag&Drop drop options */
-export declare type DDDropOpt = {
+export type DDDropOpt = {
     /** function or class type that this grid will accept as dropped items (see GridStackOptions.acceptWidgets) */
@@ -14,7 +14,7 @@ accept?: (el: GridItemHTMLElement) => boolean;
 /** drag&drop options currently called from the main code, but others can be passed in grid options */
-export declare type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
-export declare type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';
-export declare type DDValue = number | string;
+export type DDOpts = 'enable' | 'disable' | 'destroy' | 'option' | string | any;
+export type DDKey = 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight';
+export type DDValue = number | string;
 /** drag&drop events callbacks */
-export declare type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
+export type DDCallback = (event: Event, arg2: GridItemHTMLElement, helper?: GridItemHTMLElement) => void;
 /**
@@ -21,0 +21,0 @@ * HTML Native Mouse and Touch Events Drag and Drop functionality.

dist/es5/dd-gridstack.js

 "use strict";
 /**
- * dd-gridstack.ts 7.3.0
+ * dd-gridstack.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-manager.d.ts

 /**
- * dd-manager.ts 7.3.0
+ * dd-manager.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-manager.js

 "use strict";
 /**
- * dd-manager.ts 7.3.0
+ * dd-manager.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/dd-resizable-handle.d.ts

 /**
- * dd-resizable-handle.ts 7.3.0
+ * dd-resizable-handle.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-resizable-handle.js

 "use strict";
 /**
- * dd-resizable-handle.ts 7.3.0
+ * dd-resizable-handle.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -9,3 +9,3 @@ */
 var dd_touch_1 = require("./dd-touch");
-var DDResizableHandle = /** @class */ (function () {
+var DDResizableHandle = exports.DDResizableHandle = /** @class */ (function () {
     function DDResizableHandle(host, direction, option) {
@@ -27,3 +27,3 @@ /** @internal true after we've moved enough pixels to start a resize */
         el.classList.add('ui-resizable-handle');
-        el.classList.add("" + DDResizableHandle.prefix + this.dir);
+        el.classList.add("".concat(DDResizableHandle.prefix).concat(this.dir));
         el.style.zIndex = '100';
@@ -108,3 +108,2 @@ el.style.userSelect = 'none';
 }());
-exports.DDResizableHandle = DDResizableHandle;
 //# sourceMappingURL=dd-resizable-handle.js.map

dist/es5/dd-resizable.d.ts

 /**
- * dd-resizable.ts 7.3.0
+ * dd-resizable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-resizable.js

 "use strict";
 /**
- * dd-resizable.ts 7.3.0
+ * dd-resizable.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -10,6 +10,8 @@ */
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
@@ -26,3 +28,3 @@ function __() { this.constructor = d; }
 var dd_manager_1 = require("./dd-manager");
-var DDResizable = /** @class */ (function (_super) {
+var DDResizable = exports.DDResizable = /** @class */ (function (_super) {
     __extends(DDResizable, _super);
@@ -85,3 +87,2 @@ function DDResizable(el, opts) {
         _super.prototype.enable.call(this);
-        this.el.classList.add('ui-resizable');
         this.el.classList.remove('ui-resizable-disabled');
@@ -93,3 +94,2 @@ this._setupAutoHide(this.option.autoHide);
         this.el.classList.add('ui-resizable-disabled');
-        this.el.classList.remove('ui-resizable');
         this._setupAutoHide(false);
@@ -100,3 +100,2 @@ };
         this._setupAutoHide(false);
-        this.el.classList.remove('ui-resizable');
         delete this.el;
@@ -298,2 +297,3 @@ _super.prototype.destroy.call(this);
     DDResizable.prototype._applyChange = function () {
+        var _a;
         var _this = this;
@@ -303,3 +303,3 @@ var containmentRect = { left: 0, top: 0, width: 0, height: 0 };
             var containmentEl = this.el.parentElement;
-            var _a = containmentEl.getBoundingClientRect(), left = _a.left, top_1 = _a.top;
+            var left = (_a = containmentEl.getBoundingClientRect(), _a.left), top_1 = _a.top;
             containmentRect = { left: left, top: top_1, width: 0, height: 0 };
@@ -325,3 +325,2 @@ }
 }(dd_base_impl_1.DDBaseImplement));
-exports.DDResizable = DDResizable;
 //# sourceMappingURL=dd-resizable.js.map

dist/es5/dd-touch.d.ts

 /**
- * touch.ts 7.3.0
+ * touch.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/dd-touch.js

 "use strict";
 /**
- * touch.ts 7.3.0
+ * touch.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -5,0 +5,0 @@ */

dist/es5/gridstack-all.js.LICENSE.txt

 /*!
- * GridStack 7.3.0
+ * GridStack 8.0.0
  * https://gridstackjs.com/
@@ -4,0 +4,0 @@ *

dist/es5/gridstack-engine.d.ts

 /**
- * gridstack-engine.ts 7.3.0
+ * gridstack-engine.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-import { GridStackNode, GridStackPosition, GridStackMoveOpts } from './types';
+import { GridStackNode, GridStackPosition, GridStackMoveOpts, SaveFcn } from './types';
 /** callback to update the DOM attributes since this class is generic (no HTML or other info) for items that changed - see _notify() */
-declare type OnChangeCB = (nodes: GridStackNode[]) => void;
+type OnChangeCB = (nodes: GridStackNode[]) => void;
 /** options used during creation - similar to GridStackOptions */
@@ -84,3 +84,3 @@ export interface GridStackEngineOptions {
      * returning a list of widgets for serialization */
-    save(saveElement?: boolean): GridStackNode[];
+    save(saveElement?: boolean, saveCB?: SaveFcn): GridStackNode[];
     /**
@@ -87,0 +87,0 @@ * call to cache the given layout internally to the given location so we can restore back when column changes size

dist/es5/gridstack-engine.js

 "use strict";
 /**
- * gridstack-engine.ts 7.3.0
+ * gridstack-engine.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
@@ -26,3 +26,3 @@ */
  */
-var GridStackEngine = /** @class */ (function () {
+var GridStackEngine = exports.GridStackEngine = /** @class */ (function () {
     function GridStackEngine(opts) {
@@ -341,4 +341,5 @@ if (opts === void 0) { opts = {}; }
     GridStackEngine.prototype.prepareNode = function (node, resizing) {
+        var _a;
         node = node || {};
-        node._id = node._id || GridStackEngine._idSeq++;
+        node._id = (_a = node._id) !== null && _a !== void 0 ? _a : GridStackEngine._idSeq++;
         // if we're missing position, have the grid position us automatically (before we set them to 0,0)
@@ -360,2 +361,3 @@ if (node.x === undefined || node.y === undefined || node.x === null || node.y === null) {
         }
+        utils_1.Utils.sanitizeMinMax(node);
         // check for NaN (in case messed up strings were passed. can't do parseInt() || defaults.x above as 0 is valid #)
@@ -577,3 +579,3 @@ if (typeof node.x == 'string') {
         delete this._layouts;
-        if (this.nodes.length === 0)
+        if (!this.nodes.length)
             return this;
@@ -773,3 +775,3 @@ removeDOM && this.nodes.forEach(function (n) { return n._removeDOM = true; }); // let CB remove actual HTML (used to set _id to null, but then we loose layout info)
      * returning a list of widgets for serialization */
-    GridStackEngine.prototype.save = function (saveElement) {
+    GridStackEngine.prototype.save = function (saveElement, saveCB) {
         var _a;
@@ -792,2 +794,4 @@ if (saveElement === void 0) { saveElement = true; }
             utils_1.Utils.removeInternalForSave(w, !saveElement);
+            if (saveCB)
+                saveCB(n, w);
             list.push(w);
@@ -956,3 +960,4 @@ });
         nodes.forEach(function (n, i) {
-            n._id = n._id || GridStackEngine._idSeq++; // make sure we have an id in case this is new layout, else re-use id already set
+            var _a;
+            n._id = (_a = n._id) !== null && _a !== void 0 ? _a : GridStackEngine._idSeq++; // make sure we have an id in case this is new layout, else re-use id already set
             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
@@ -970,3 +975,4 @@ });
     GridStackEngine.prototype.cacheOneLayout = function (n, column) {
-        n._id = n._id || GridStackEngine._idSeq++;
+        var _a;
+        n._id = (_a = n._id) !== null && _a !== void 0 ? _a : GridStackEngine._idSeq++;
         var l = { x: n.x, y: n.y, w: n.w, _id: n._id };
@@ -999,7 +1005,6 @@ if (n.autoPosition) {
     };
-    /** @internal unique global internal _id counter NOT starting at 0 */
-    GridStackEngine._idSeq = 1;
+    /** @internal unique global internal _id counter */
+    GridStackEngine._idSeq = 0;
     return GridStackEngine;
 }());
-exports.GridStackEngine = GridStackEngine;
 //# sourceMappingURL=gridstack-engine.js.map

dist/es5/gridstack-poly.js

 /**
- * gridstack-poly.ts 7.3.0 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
+ * gridstack-poly.ts 8.0.0 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -4,0 +4,0 @@ */

dist/es5/gridstack.d.ts

 /*!
- * GridStack 7.3.0
+ * GridStack 8.0.0
  * https://gridstackjs.com/
@@ -10,3 +10,3 @@ *
 import { Utils } from './utils';
-import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions, AddRemoveFcn } from './types';
+import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions, AddRemoveFcn, SaveFcn } from './types';
 import { DDGridStack } from './dd-gridstack';
@@ -21,3 +21,3 @@ export * from './types';
 /** list of possible events, or space separated list of them */
-export declare type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' | 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | string;
+export type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' | 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | string;
 /** Defines the coordinates of an object */
@@ -81,2 +81,15 @@ export interface MousePosition {
     static registerEngine(engineClass: typeof GridStackEngine): void;
+    /**
+     * callback method use when new items|grids needs to be created or deleted, instead of the default
+     * item: <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div>
+     * grid: <div class="grid-stack">grid content...</div>
+     * add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init().
+     * add = false: the item will be removed from DOM (if not already done)
+     * grid = true|false for grid vs grid-items
+     */
+    static addRemoveCB?: AddRemoveFcn;
+    /**
+     * callback during saving to application can inject extra data for each widget, on top of the grid layout properties
+     */
+    static saveCB?: SaveFcn;
     /** scoping so users can call GridStack.Utils.sort() for example */
@@ -132,3 +145,2 @@ static Utils: typeof Utils;
     /**
-    /**
      * saves the current layout returning a list of widgets for serialization which might include any nested grids.
@@ -139,5 +151,6 @@ * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will
      * to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
+     * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
      * @returns list of widgets or full grid option, including .children list of widgets
      */
-    save(saveContent?: boolean, saveGridOpt?: boolean): GridStackWidget[] | GridStackOptions;
+    save(saveContent?: boolean, saveGridOpt?: boolean, saveCB?: SaveFcn): GridStackWidget[] | GridStackOptions;
     /**
@@ -144,0 +157,0 @@ * load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.

dist/es5/types.d.ts

 /**
- * types.ts 7.3.0
+ * types.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -14,4 +14,4 @@ */
  */
-export declare type ColumnOptions = 'moveScale' | 'move' | 'scale' | 'none' | ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);
-export declare type numberOrString = number | string;
+export type ColumnOptions = 'moveScale' | 'move' | 'scale' | 'none' | ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);
+export type numberOrString = number | string;
 export interface GridItemHTMLElement extends HTMLElement {
@@ -21,11 +21,13 @@ /** pointer to grid node instance */
 }
-export declare type GridStackElement = string | HTMLElement | GridItemHTMLElement;
+export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
 /** specific and general event handlers for the .on() method */
-export declare type GridStackEventHandler = (event: Event) => void;
-export declare type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;
-export declare type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;
-export declare type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;
-export declare type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;
+export type GridStackEventHandler = (event: Event) => void;
+export type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;
+export type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;
+export type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;
+export type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;
 /** optional function called during load() to callback the user on new added/remove grid items | grids */
-export declare type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;
+export type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;
+/** optional function called during save() to let the caller add additional custom data to the GridStackWidget structure that will get returned */
+export type SaveFcn = (node: GridStackNode, w: GridStackWidget) => void;
 /**
@@ -42,11 +44,2 @@ * Defines the options for a Grid
     acceptWidgets?: boolean | string | ((element: Element) => boolean);
-    /**
-     * callback method use when new items|grids needs to be created or deleted, instead of the default
-     * item: <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div>
-     * grid: <div class="grid-stack">grid content...</div>
-     * add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init().
-     * add = false: the item will be removed from DOM (if not already done)
-     * grid = true|false for grid vs grid-items
-     */
-    addRemoveCB?: AddRemoveFcn;
     /** possible values (default: `mobile`) - does not apply to non-resizable widgets
@@ -168,4 +161,4 @@ * `false` the resizing handles are only shown while hovering over a widget
     styleInHead?: boolean;
-    /** list of differences in options for automatically created sub-grids under us */
-    subGrid?: GridStackOptions;
+    /** list of differences in options for automatically created sub-grids under us (inside our grid-items) */
+    subGridOpts?: GridStackOptions;
     /** enable/disable the creation of sub-grids on the fly by dragging items completely
@@ -231,4 +224,4 @@ * over others (nest) vs partially (push). Forces `DDDragOpt.pause=true` to accomplish that. */
     content?: string;
-    /** optional nested grid options and list of children, which then turns into actual instance at runtime */
-    subGrid?: GridStackOptions | GridStack;
+    /** optional nested grid options and list of children, which then turns into actual instance at runtime to get options from */
+    subGridOpts?: GridStackOptions;
 }
@@ -287,4 +280,6 @@ /** Drag&Drop resize options */
     el?: GridItemHTMLElement;
-    /** pointer back to Grid instance */
+    /** pointer back to parent Grid instance */
     grid?: GridStack;
+    /** actual sub-grid instance */
+    subGrid?: GridStack;
 }

dist/es5/types.js

 "use strict";
 /**
- * types.ts 7.3.0
+ * types.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -30,2 +30,12 @@ */
     rtl: 'auto',
+    // **** same as not being set ****
+    // disableDrag: false,
+    // disableOneColumnMode: false,
+    // disableResize: false,
+    // float: false,
+    // handleClass: null,
+    // oneColumnModeDomSort: false,
+    // removable: false,
+    // staticGrid: false,
+    // styleInHead: false,
 };
@@ -36,3 +46,5 @@ /** default dragIn options */
     appendTo: 'body',
+    // revert: 'invalid',
+    // scroll: false,
 };
 //# sourceMappingURL=types.js.map

dist/es5/utils.d.ts

 /**
- * utils.ts 7.3.0
+ * utils.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -65,2 +65,4 @@ */
     static samePos(a: GridStackPosition, b: GridStackPosition): boolean;
+    /** given a node, makes sure it's min/max are valid */
+    static sanitizeMinMax(node: GridStackNode): void;
     /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
@@ -67,0 +69,0 @@ static removeInternalAndSame(a: unknown, b: unknown): void;

dist/es5/utils.js

 "use strict";
 /**
- * utils.ts 7.3.0
+ * utils.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -17,8 +17,10 @@ */
 };
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 };
@@ -196,3 +198,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
         else if (typeof sheet.insertRule === 'function') {
-            sheet.insertRule(selector + "{" + rules + "}");
+            sheet.insertRule("".concat(selector, "{").concat(rules, "}"));
         }
@@ -271,6 +273,10 @@ };
         if (doMinMax === void 0) { doMinMax = false; }
-        a.x = b.x;
-        a.y = b.y;
-        a.w = b.w;
-        a.h = b.h;
+        if (b.x !== undefined)
+            a.x = b.x;
+        if (b.y !== undefined)
+            a.y = b.y;
+        if (b.w !== undefined)
+            a.w = b.w;
+        if (b.h !== undefined)
+            a.h = b.h;
         if (doMinMax) {
@@ -292,2 +298,18 @@ if (b.minW)
     };
+    /** given a node, makes sure it's min/max are valid */
+    Utils.sanitizeMinMax = function (node) {
+        // remove 0, undefine, null
+        if (!node.minW) {
+            delete node.minW;
+        }
+        if (!node.minH) {
+            delete node.minH;
+        }
+        if (!node.maxW) {
+            delete node.maxW;
+        }
+        if (!node.maxH) {
+            delete node.maxH;
+        }
+    };
     /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
@@ -465,3 +487,3 @@ Utils.removeInternalAndSame = function (a, b) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return __spreadArrays(obj);
+            return __spreadArray([], obj, true);
         }
@@ -468,0 +490,0 @@ return __assign({}, obj);

dist/gridstack-all.js.LICENSE.txt

 /*!
- * GridStack 7.3.0
+ * GridStack 8.0.0
  * https://gridstackjs.com/
@@ -4,0 +4,0 @@ *

dist/gridstack-engine.d.ts

 /**
- * gridstack-engine.ts 7.3.0
+ * gridstack-engine.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-import { GridStackNode, GridStackPosition, GridStackMoveOpts } from './types';
+import { GridStackNode, GridStackPosition, GridStackMoveOpts, SaveFcn } from './types';
 /** callback to update the DOM attributes since this class is generic (no HTML or other info) for items that changed - see _notify() */
-declare type OnChangeCB = (nodes: GridStackNode[]) => void;
+type OnChangeCB = (nodes: GridStackNode[]) => void;
 /** options used during creation - similar to GridStackOptions */
@@ -84,3 +84,3 @@ export interface GridStackEngineOptions {
      * returning a list of widgets for serialization */
-    save(saveElement?: boolean): GridStackNode[];
+    save(saveElement?: boolean, saveCB?: SaveFcn): GridStackNode[];
     /**
@@ -87,0 +87,0 @@ * call to cache the given layout internally to the given location so we can restore back when column changes size

dist/gridstack-engine.js

@@ -1,9 +0,6 @@
-"use strict";
 /**
- * gridstack-engine.ts 7.3.0
+ * gridstack-engine.ts 8.0.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridStackEngine = void 0;
-const utils_1 = require("./utils");
+import { Utils } from './utils';
 /**
@@ -71,7 +68,7 @@ * Defines the GridStack engine that does most no DOM grid manipulation.
                 // can take space we had, or before where we're going
-                (!this.collide(collide, Object.assign(Object.assign({}, collide), { y: node.y }), node) || !this.collide(collide, Object.assign(Object.assign({}, collide), { y: nn.y - collide.h }), node))) {
+                (!this.collide(collide, { ...collide, y: node.y }, node) || !this.collide(collide, { ...collide, y: nn.y - collide.h }, node))) {
                 node._skipDown = (node._skipDown || nn.y > node.y);
-                moved = this.moveNode(node, Object.assign(Object.assign(Object.assign({}, nn), { y: collide.y + collide.h }), newOpt));
+                moved = this.moveNode(node, { ...nn, y: collide.y + collide.h, ...newOpt });
                 if (collide.locked && moved) {
-                    utils_1.Utils.copyPos(nn, node); // moving after lock become our new desired location
+                    Utils.copyPos(nn, node); // moving after lock become our new desired location
                 }
@@ -82,3 +79,3 @@ else if (!collide.locked && moved && opt.pack) {
                     nn.y = collide.y + collide.h;
-                    utils_1.Utils.copyPos(node, nn);
+                    Utils.copyPos(node, nn);
                 }
@@ -89,3 +86,3 @@ didMove = didMove || moved;
                 // move collide down *after* where we will be, ignoring where we are now (don't collide with us)
-                moved = this.moveNode(collide, Object.assign(Object.assign(Object.assign({}, collide), { y: nn.y + nn.h, skip: node }), newOpt));
+                moved = this.moveNode(collide, { ...collide, y: nn.y + nn.h, skip: node, ...newOpt });
             }
@@ -101,6 +98,6 @@ if (!moved) {
     collide(skip, area = skip, skip2) {
-        return this.nodes.find(n => n !== skip && n !== skip2 && utils_1.Utils.isIntercepted(n, area));
+        return this.nodes.find(n => n !== skip && n !== skip2 && Utils.isIntercepted(n, area));
     }
     collideAll(skip, area = skip, skip2) {
-        return this.nodes.filter(n => n !== skip && n !== skip2 && utils_1.Utils.isIntercepted(n, area));
+        return this.nodes.filter(n => n !== skip && n !== skip2 && Utils.isIntercepted(n, area));
     }
@@ -112,3 +109,3 @@ /** does a pixel coverage collision based on where we started, returning the node that has the most coverage that is >50% mid line */
         let r0 = node._rect; // where started
-        let r = Object.assign({}, o.rect); // where we are
+        let r = { ...o.rect }; // where we are
         // update dragged rect to show where it's coming from (above or below, etc...)
@@ -209,3 +206,3 @@ if (r.y > r0.y) {
         // same size and same row or column, and touching
-        if (a.w === b.w && a.h === b.h && (a.x === b.x || a.y === b.y) && (touching = utils_1.Utils.isTouching(a, b)))
+        if (a.w === b.w && a.h === b.h && (a.x === b.x || a.y === b.y) && (touching = Utils.isTouching(a, b)))
             return _doSwap();
@@ -215,3 +212,3 @@ if (touching === false)
         // check for taking same columns (but different height) and touching
-        if (a.w === b.w && a.x === b.x && (touching || (touching = utils_1.Utils.isTouching(a, b)))) {
+        if (a.w === b.w && a.x === b.x && (touching || (touching = Utils.isTouching(a, b)))) {
             if (b.y < a.y) {
@@ -227,3 +224,3 @@ let t = a;
         // check if taking same row (but different width) and touching
-        if (a.h === b.h && a.y === b.y && (touching || (touching = utils_1.Utils.isTouching(a, b)))) {
+        if (a.h === b.h && a.y === b.y && (touching || (touching = Utils.isTouching(a, b)))) {
             if (b.x < a.x) {
@@ -272,3 +269,3 @@ let t = a;
     sortNodes(dir) {
-        this.nodes = utils_1.Utils.sort(this.nodes, dir, this.column);
+        this.nodes = Utils.sort(this.nodes, dir, this.column);
         return this;
@@ -325,3 +322,3 @@ }
         node = node || {};
-        node._id = node._id || GridStackEngine._idSeq++;
+        node._id = node._id ?? GridStackEngine._idSeq++;
         // if we're missing position, have the grid position us automatically (before we set them to 0,0)
@@ -333,3 +330,3 @@ if (node.x === undefined || node.y === undefined || node.x === null || node.y === null) {
         let defaults = { x: 0, y: 0, w: 1, h: 1 };
-        utils_1.Utils.defaults(node, defaults);
+        Utils.defaults(node, defaults);
         if (!node.autoPosition) {
@@ -344,2 +341,3 @@ delete node.autoPosition;
         }
+        Utils.sanitizeMinMax(node);
         // check for NaN (in case messed up strings were passed. can't do parseInt() || defaults.x above as 0 is valid #)
@@ -376,3 +374,3 @@ if (typeof node.x == 'string') {
     nodeBoundFix(node, resizing) {
-        let before = node._orig || utils_1.Utils.copyPos({}, node);
+        let before = node._orig || Utils.copyPos({}, node);
         if (node.maxW) {
@@ -395,3 +393,3 @@ node.w = Math.min(node.w, node.maxW);
         if (saveOrig && this.column < 12 && !this._inColumnResize && node._id && this.findCacheLayout(node, 12) === -1) {
-            let copy = Object.assign({}, node); // need _id + positions
+            let copy = { ...node }; // need _id + positions
             if (copy.autoPosition) {
@@ -440,3 +438,3 @@ delete copy.x;
         }
-        if (!utils_1.Utils.samePos(node, before)) {
+        if (!Utils.samePos(node, before)) {
             node._dirty = true;
@@ -450,3 +448,3 @@ }
         if (verify) {
-            return this.nodes.filter(n => n._dirty && !utils_1.Utils.samePos(n, n._orig));
+            return this.nodes.filter(n => n._dirty && !Utils.samePos(n, n._orig));
         }
@@ -478,3 +476,3 @@ return this.nodes.filter(n => n._dirty);
         this.nodes.forEach(n => {
-            n._orig = utils_1.Utils.copyPos({}, n);
+            n._orig = Utils.copyPos({}, n);
             delete n._dirty;
@@ -488,5 +486,5 @@ });
         this.nodes.forEach(n => {
-            if (utils_1.Utils.samePos(n, n._orig))
+            if (Utils.samePos(n, n._orig))
                 return;
-            utils_1.Utils.copyPos(n, n._orig);
+            Utils.copyPos(n, n._orig);
             n._dirty = true;
@@ -501,3 +499,3 @@ });
     findEmptyPosition(node, nodeList = this.nodes, column = this.column) {
-        nodeList = utils_1.Utils.sort(nodeList, -1, column);
+        nodeList = Utils.sort(nodeList, -1, column);
         let found = false;
@@ -511,3 +509,3 @@ for (let i = 0; !found; ++i) {
             let box = { x, y, w: node.w, h: node.h };
-            if (!nodeList.find(n => utils_1.Utils.isIntercepted(box, n))) {
+            if (!nodeList.find(n => Utils.isIntercepted(box, n))) {
                 node.x = x;
@@ -560,3 +558,3 @@ node.y = y;
         delete this._layouts;
-        if (this.nodes.length === 0)
+        if (!this.nodes.length)
             return this;
@@ -587,6 +585,6 @@ 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)
                 if (n === node) {
-                    clonedNode = Object.assign({}, n);
+                    clonedNode = { ...n };
                     return clonedNode;
                 }
-                return Object.assign({}, n);
+                return { ...n };
             })
@@ -614,3 +612,3 @@ });
                 return;
-            utils_1.Utils.copyPos(n, c);
+            Utils.copyPos(n, c);
             n._dirty = true;
@@ -630,5 +628,5 @@ });
             float: this.float,
-            nodes: this.nodes.map(n => { return Object.assign({}, n); })
+            nodes: this.nodes.map(n => { return { ...n }; })
         });
-        let n = Object.assign({}, node); // clone node so we don't mod any settings on it but have full autoPosition and min/max as well! #1687
+        let n = { ...node }; // clone node so we don't mod any settings on it but have full autoPosition and min/max as well! #1687
         this.cleanupNode(n);
@@ -641,3 +639,3 @@ delete n.el;
         if (clone.getRow() <= this.maxRow) {
-            node._willFitPos = utils_1.Utils.copyPos({}, n);
+            node._willFitPos = Utils.copyPos({}, n);
             return true;
@@ -671,3 +669,2 @@ }
     moveNode(node, o) {
-        var _a, _b;
         if (!node || /*node.locked ||*/ !o)
@@ -693,9 +690,9 @@ return false;
         let resizing = (node.w !== o.w || node.h !== o.h);
-        let nn = utils_1.Utils.copyPos({}, node, true); // get min/max out first, then opt positions next
-        utils_1.Utils.copyPos(nn, o);
+        let nn = Utils.copyPos({}, node, true); // get min/max out first, then opt positions next
+        Utils.copyPos(nn, o);
         nn = this.nodeBoundFix(nn, resizing);
-        utils_1.Utils.copyPos(o, nn);
-        if (utils_1.Utils.samePos(node, o))
+        Utils.copyPos(o, nn);
+        if (Utils.samePos(node, o))
             return false;
-        let prevPos = utils_1.Utils.copyPos({}, node);
+        let prevPos = Utils.copyPos({}, node);
         // check if we will need to fix collision at our new location
@@ -709,6 +706,6 @@ let collides = this.collideAll(node, nn, o.skip);
             // 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
-            if (activeDrag && collide && ((_b = (_a = node.grid) === null || _a === void 0 ? void 0 : _a.opts) === null || _b === void 0 ? void 0 : _b.subGridDynamic) && !node.grid._isTemp) {
-                let over = utils_1.Utils.areaIntercept(o.rect, collide._rect);
-                let a1 = utils_1.Utils.area(o.rect);
-                let a2 = utils_1.Utils.area(collide._rect);
+            if (activeDrag && collide && node.grid?.opts?.subGridDynamic && !node.grid._isTemp) {
+                let over = Utils.areaIntercept(o.rect, collide._rect);
+                let a1 = Utils.area(o.rect);
+                let a2 = Utils.area(collide._rect);
                 let perc = over / (a1 < a2 ? a1 : a2);
@@ -732,3 +729,3 @@ if (perc > .8) {
             node._dirty = true;
-            utils_1.Utils.copyPos(node, nn);
+            Utils.copyPos(node, nn);
         }
@@ -739,3 +736,3 @@ if (o.pack) {
         }
-        return !utils_1.Utils.samePos(node, prevPos); // pack might have moved things back
+        return !Utils.samePos(node, prevPos); // pack might have moved things back
     }
@@ -764,6 +761,5 @@ getRow() {
      * returning a list of widgets for serialization */
-    save(saveElement = true) {
-        var _a;
+    save(saveElement = true, saveCB) {
         // use the highest layout for any saved info so we can have full detail on reload #1849
-        let len = (_a = this._layouts) === null || _a === void 0 ? void 0 : _a.length;
+        let len = this._layouts?.length;
         let layout = len && this.column !== (len - 1) ? this._layouts[len - 1] : null;
@@ -773,4 +769,4 @@ let list = [];
         this.nodes.forEach(n => {
-            let wl = layout === null || layout === void 0 ? void 0 : layout.find(l => l._id === n._id);
-            let w = Object.assign({}, n);
+            let wl = layout?.find(l => l._id === n._id);
+            let w = { ...n };
             // use layout info instead if set
@@ -782,3 +778,5 @@ if (wl) {
             }
-            utils_1.Utils.removeInternalForSave(w, !saveElement);
+            Utils.removeInternalForSave(w, !saveElement);
+            if (saveCB)
+                saveCB(n, w);
             list.push(w);
@@ -840,3 +838,2 @@ });
     updateNodeWidths(prevColumn, column, nodes, layout = 'moveScale') {
-        var _a;
         if (!this.nodes.length || !column || prevColumn === column)
@@ -850,3 +847,3 @@ return this;
         let domOrder = false;
-        if (column === 1 && (nodes === null || nodes === void 0 ? void 0 : nodes.length)) {
+        if (column === 1 && nodes?.length) {
             domOrder = true;
@@ -864,3 +861,3 @@ let top = 0;
         else {
-            nodes = utils_1.Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
+            nodes = Utils.sort(this.nodes, -1, prevColumn); // current column reverse sorting so we can insert last to front (limit collision)
         }
@@ -875,3 +872,3 @@ // see if we have cached previous layout IFF we are going up in size (restore) otherwise always
             let lastIndex = this._layouts.length - 1;
-            if (!cacheNodes.length && prevColumn !== lastIndex && ((_a = this._layouts[lastIndex]) === null || _a === void 0 ? void 0 : _a.length)) {
+            if (!cacheNodes.length && prevColumn !== lastIndex && this._layouts[lastIndex]?.length) {
                 prevColumn = lastIndex;
@@ -927,3 +924,3 @@ this._layouts[lastIndex].forEach(cacheNode => {
         if (!domOrder)
-            newNodes = utils_1.Utils.sort(newNodes, -1, column);
+            newNodes = Utils.sort(newNodes, -1, column);
         this._inColumnResize = true; // prevent cache update
@@ -948,3 +945,3 @@ this.nodes = []; // pretend we have no nodes to start with (add() will use same structures) to simplify layout
         nodes.forEach((n, i) => {
-            n._id = n._id || GridStackEngine._idSeq++; // make sure we have an id in case this is new layout, else re-use id already set
+            n._id = n._id ?? GridStackEngine._idSeq++; // make sure we have an id in case this is new layout, else re-use id already set
             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
@@ -962,3 +959,3 @@ });
     cacheOneLayout(n, column) {
-        n._id = n._id || GridStackEngine._idSeq++;
+        n._id = n._id ?? GridStackEngine._idSeq++;
         let l = { x: n.x, y: n.y, w: n.w, _id: n._id };
@@ -980,4 +977,3 @@ if (n.autoPosition) {
     findCacheLayout(n, column) {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = this._layouts) === null || _a === void 0 ? void 0 : _a[column]) === null || _b === void 0 ? void 0 : _b.findIndex(l => l._id === n._id)) !== null && _c !== void 0 ? _c : -1;
+        return this._layouts?.[column]?.findIndex(l => l._id === n._id) ?? -1;
     }
@@ -993,5 +989,5 @@ /** called to remove all internal values but the _id */
 }
-exports.GridStackEngine = GridStackEngine;
-/** @internal unique global internal _id counter NOT starting at 0 */
-GridStackEngine._idSeq = 1;
+/** @internal unique global internal _id counter */
+GridStackEngine._idSeq = 0;
+export { GridStackEngine };
 //# sourceMappingURL=gridstack-engine.js.map

dist/gridstack.d.ts

 /*!
- * GridStack 7.3.0
+ * GridStack 8.0.0
  * https://gridstackjs.com/
@@ -10,3 +10,3 @@ *
 import { Utils } from './utils';
-import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions, AddRemoveFcn } from './types';
+import { ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback, GridStackNode, GridStackWidget, numberOrString, DDDragInOpt, GridStackOptions, AddRemoveFcn, SaveFcn } from './types';
 import { DDGridStack } from './dd-gridstack';
@@ -21,3 +21,3 @@ export * from './types';
 /** list of possible events, or space separated list of them */
-export declare type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' | 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | string;
+export type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' | 'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | string;
 /** Defines the coordinates of an object */
@@ -81,2 +81,15 @@ export interface MousePosition {
     static registerEngine(engineClass: typeof GridStackEngine): void;
+    /**
+     * callback method use when new items|grids needs to be created or deleted, instead of the default
+     * item: <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div>
+     * grid: <div class="grid-stack">grid content...</div>
+     * add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init().
+     * add = false: the item will be removed from DOM (if not already done)
+     * grid = true|false for grid vs grid-items
+     */
+    static addRemoveCB?: AddRemoveFcn;
+    /**
+     * callback during saving to application can inject extra data for each widget, on top of the grid layout properties
+     */
+    static saveCB?: SaveFcn;
     /** scoping so users can call GridStack.Utils.sort() for example */
@@ -132,3 +145,2 @@ static Utils: typeof Utils;
     /**
-    /**
      * saves the current layout returning a list of widgets for serialization which might include any nested grids.
@@ -139,5 +151,6 @@ * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will
      * to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
+     * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
      * @returns list of widgets or full grid option, including .children list of widgets
      */
-    save(saveContent?: boolean, saveGridOpt?: boolean): GridStackWidget[] | GridStackOptions;
+    save(saveContent?: boolean, saveGridOpt?: boolean, saveCB?: SaveFcn): GridStackWidget[] | GridStackOptions;
     /**
@@ -144,0 +157,0 @@ * load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.

dist/types.d.ts

 /**
- * types.ts 7.3.0
+ * types.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -14,4 +14,4 @@ */
  */
-export declare type ColumnOptions = 'moveScale' | 'move' | 'scale' | 'none' | ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);
-export declare type numberOrString = number | string;
+export type ColumnOptions = 'moveScale' | 'move' | 'scale' | 'none' | ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);
+export type numberOrString = number | string;
 export interface GridItemHTMLElement extends HTMLElement {
@@ -21,11 +21,13 @@ /** pointer to grid node instance */
 }
-export declare type GridStackElement = string | HTMLElement | GridItemHTMLElement;
+export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
 /** specific and general event handlers for the .on() method */
-export declare type GridStackEventHandler = (event: Event) => void;
-export declare type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;
-export declare type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;
-export declare type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;
-export declare type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;
+export type GridStackEventHandler = (event: Event) => void;
+export type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;
+export type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;
+export type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;
+export type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;
 /** optional function called during load() to callback the user on new added/remove grid items | grids */
-export declare type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;
+export type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;
+/** optional function called during save() to let the caller add additional custom data to the GridStackWidget structure that will get returned */
+export type SaveFcn = (node: GridStackNode, w: GridStackWidget) => void;
 /**
@@ -42,11 +44,2 @@ * Defines the options for a Grid
     acceptWidgets?: boolean | string | ((element: Element) => boolean);
-    /**
-     * callback method use when new items|grids needs to be created or deleted, instead of the default
-     * item: <div class="grid-stack-item"><div class="grid-stack-item-content">w.content</div></div>
-     * grid: <div class="grid-stack">grid content...</div>
-     * add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init().
-     * add = false: the item will be removed from DOM (if not already done)
-     * grid = true|false for grid vs grid-items
-     */
-    addRemoveCB?: AddRemoveFcn;
     /** possible values (default: `mobile`) - does not apply to non-resizable widgets
@@ -168,4 +161,4 @@ * `false` the resizing handles are only shown while hovering over a widget
     styleInHead?: boolean;
-    /** list of differences in options for automatically created sub-grids under us */
-    subGrid?: GridStackOptions;
+    /** list of differences in options for automatically created sub-grids under us (inside our grid-items) */
+    subGridOpts?: GridStackOptions;
     /** enable/disable the creation of sub-grids on the fly by dragging items completely
@@ -231,4 +224,4 @@ * over others (nest) vs partially (push). Forces `DDDragOpt.pause=true` to accomplish that. */
     content?: string;
-    /** optional nested grid options and list of children, which then turns into actual instance at runtime */
-    subGrid?: GridStackOptions | GridStack;
+    /** optional nested grid options and list of children, which then turns into actual instance at runtime to get options from */
+    subGridOpts?: GridStackOptions;
 }
@@ -287,4 +280,6 @@ /** Drag&Drop resize options */
     el?: GridItemHTMLElement;
-    /** pointer back to Grid instance */
+    /** pointer back to parent Grid instance */
     grid?: GridStack;
+    /** actual sub-grid instance */
+    subGrid?: GridStack;
 }

dist/types.js

@@ -1,10 +0,7 @@
-"use strict";
 /**
- * types.ts 7.3.0
+ * types.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dragInDefaultOptions = exports.gridDefaults = void 0;
 // default values for grid options - used during init and when saving out
-exports.gridDefaults = {
+export const gridDefaults = {
     alwaysShowResizeHandle: 'mobile',
@@ -30,8 +27,20 @@ animate: true,
     rtl: 'auto',
+    // **** same as not being set ****
+    // disableDrag: false,
+    // disableOneColumnMode: false,
+    // disableResize: false,
+    // float: false,
+    // handleClass: null,
+    // oneColumnModeDomSort: false,
+    // removable: false,
+    // staticGrid: false,
+    // styleInHead: false,
 };
 /** default dragIn options */
-exports.dragInDefaultOptions = {
+export const dragInDefaultOptions = {
     handle: '.grid-stack-item-content',
     appendTo: 'body',
+    // revert: 'invalid',
+    // scroll: false,
 };
 //# sourceMappingURL=types.js.map

dist/utils.d.ts

 /**
- * utils.ts 7.3.0
+ * utils.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
@@ -65,2 +65,4 @@ */
     static samePos(a: GridStackPosition, b: GridStackPosition): boolean;
+    /** given a node, makes sure it's min/max are valid */
+    static sanitizeMinMax(node: GridStackNode): void;
     /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
@@ -67,0 +69,0 @@ static removeInternalAndSame(a: unknown, b: unknown): void;

dist/utils.js

@@ -1,11 +0,8 @@
-"use strict";
 /**
- * utils.ts 7.3.0
+ * utils.ts 8.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Utils = exports.obsoleteAttr = exports.obsoleteOptsDel = exports.obsoleteOpts = exports.obsolete = void 0;
 /** checks for obsolete method names */
 // eslint-disable-next-line
-function obsolete(self, f, oldName, newName, rev) {
+export function obsolete(self, f, oldName, newName, rev) {
     let wrapper = (...args) => {
@@ -19,5 +16,4 @@ console.warn('gridstack.js: Function `' + oldName + '` is deprecated in ' + rev + ' and has been replaced ' +
 }
-exports.obsolete = obsolete;
 /** checks for obsolete grid options (can be used for any fields, but msg is about options) */
-function obsoleteOpts(opts, oldName, newName, rev) {
+export function obsoleteOpts(opts, oldName, newName, rev) {
     if (opts[oldName] !== undefined) {
@@ -29,5 +25,4 @@ opts[newName] = opts[oldName];
 }
-exports.obsoleteOpts = obsoleteOpts;
 /** checks for obsolete grid options which are gone */
-function obsoleteOptsDel(opts, oldName, rev, info) {
+export function obsoleteOptsDel(opts, oldName, rev, info) {
     if (opts[oldName] !== undefined) {
@@ -37,5 +32,4 @@ console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + info);
 }
-exports.obsoleteOptsDel = obsoleteOptsDel;
 /** checks for obsolete Jquery element attributes */
-function obsoleteAttr(el, oldName, newName, rev) {
+export function obsoleteAttr(el, oldName, newName, rev) {
     let oldAttr = el.getAttribute(oldName);
@@ -48,7 +42,6 @@ if (oldAttr !== null) {
 }
-exports.obsoleteAttr = obsoleteAttr;
 /**
  * Utility methods
  */
-class Utils {
+export class Utils {
     /** convert a potential selector into actual list of html elements */
@@ -140,3 +133,3 @@ static getElements(els) {
         let style = document.createElement('style');
-        const nonce = options === null || options === void 0 ? void 0 : options.nonce;
+        const nonce = options?.nonce;
         if (nonce)
@@ -244,6 +237,10 @@ style.nonce = nonce;
     static copyPos(a, b, doMinMax = false) {
-        a.x = b.x;
-        a.y = b.y;
-        a.w = b.w;
-        a.h = b.h;
+        if (b.x !== undefined)
+            a.x = b.x;
+        if (b.y !== undefined)
+            a.y = b.y;
+        if (b.w !== undefined)
+            a.w = b.w;
+        if (b.h !== undefined)
+            a.h = b.h;
         if (doMinMax) {
@@ -265,2 +262,18 @@ if (b.minW)
     }
+    /** given a node, makes sure it's min/max are valid */
+    static sanitizeMinMax(node) {
+        // remove 0, undefine, null
+        if (!node.minW) {
+            delete node.minW;
+        }
+        if (!node.minH) {
+            delete node.minH;
+        }
+        if (!node.maxW) {
+            delete node.maxW;
+        }
+        if (!node.maxH) {
+            delete node.maxH;
+        }
+    }
     /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
@@ -435,3 +448,3 @@ static removeInternalAndSame(a, b) {
         }
-        return Object.assign({}, obj);
+        return { ...obj };
     }
@@ -511,3 +524,3 @@ /**
         ['pageX', 'pageY', 'clientX', 'clientY', 'screenX', 'screenY'].forEach(p => evt[p] = e[p]); // point info
-        return Object.assign(Object.assign({}, evt), obj);
+        return { ...evt, ...obj };
     }
@@ -536,3 +549,2 @@ /** copies the MouseEvent properties and sends it as another event to the given target */
 }
-exports.Utils = Utils;
 //# sourceMappingURL=utils.js.map

doc/CHANGES.md

@@ -8,2 +8,3 @@ Change log
 
+- [8.0.0 (2023-04-29)](#800-2023-04-29)
 - [7.3.0 (2023-04-01)](#730-2023-04-01)
@@ -86,2 +87,13 @@ - [7.2.3 (2023-02-02)](#723-2023-02-02)
 
+## 8.0.0 (2023-04-29)
+* package is now ES2020 (TS exported files), webpack all.js still umd (better than commonjs for browsers), still have es5/ files unchanged (for now)
+* optimize [#2243](https://github.com/gridstack/gridstack.js/issues/2243) removed `gs-min|max_w|h` attribute generated in CSS or written out as they are never used for rendering, only for initial load. This reduce our column/row CSS in half!
+* optimize: removed `gs-w='1'` and `gs-h='1'` dom attribute writing since we already have min-width/min-height set, no need to set more attributes.
+* optimize: remove `'ui-draggable'` and `'ui-resizable'` since wasn't used in CSS and we have the `-disabled` version when off (so we can use `not(xyz-disabled)`).
+* add: `GridStack.saveCB` global callback for each item during save so app can insert any custom data before serializing it. `save()` can now be passed optional callback
+* move: `GridStack.addRemoveCB` is now global instead of grid option. `load()` can still be passed different optional callback
+* fix: addGrid() to handle passing an existing initialized grid already
+* break: `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts`. We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (subclass) rather than try to merge the two at runtime since very different types...
+* tons of improvements for Angular wrapper.
+
 ## 7.3.0 (2023-04-01)
@@ -88,0 +100,0 @@ * feat [#2229](https://github.com/gridstack/gridstack.js/pull/2229) support nonce for CSP. Thank you [@jedwards1211](https://github.com/jedwards1211)

doc/README.md

@@ -54,2 +54,3 @@ gridstack.js API
   - [`makeWidget(el)`](#makewidgetel)
+  - [`makeSubgrid(el)`](#makesubgridel)
   - [`margin(value: numberOrString)`](#marginvalue-numberorstring)
@@ -505,3 +506,16 @@ - [`movable(el, val)`](#movableel-val)
 ```
-
+### `makeSubgrid(el)`
+Used to add a subgrid into an existing grid.
+```js
+const grid = Gridstack.init()
+grid.el.appendChild(`
+<div id="gsi-1" gs-x="0" gs-y="0" gs-w="3" gs-h="2" gs-auto-position="true">
+      <div class="grid-stack" id="nested-grid">
+          <div id="gsi-2" gs-x="0" gs-y="0" gs-w="3" gs-h="2" gs-auto-position="true">
+          </div>
+      </div>
+</div>`)
+grid.addSubGrid(grid.el.getElementById('nested-grid'))
+```
+Make sure that the subgrid is inside of a grid item. It is important to remember that subgrids are themselves grid items capable of containing other grid items.
 ### `margin(value: numberOrString)`
@@ -508,0 +522,0 @@

package.json

 {
   "name": "gridstack",
-  "version": "7.3.0",
+  "version": "8.0.0",
   "license": "MIT",
@@ -28,5 +28,6 @@ "author": "Alain Dumesny <[e-mail]> (https://github.com/adumesny)",
   "scripts": {
-    "build": "yarn --no-progress && rm -rf dist/* && grunt && yarn build:es6 && yarn build:es5 && yarn doc",
+    "build": "yarn --no-progress && rm -rf dist/* && grunt && yarn build:es6 && yarn build:ng && yarn build:es5 && yarn doc",
     "build:es6": "webpack && tsc --stripInternal",
     "build:es5": "webpack --config es5/webpack.config.js && tsc --stripInternal --project es5/tsconfig.json",
+    "build:ng": "tsc --stripInternal --project ./demo/angular/tsconfig.lib.json",
     "w": "webpack",
@@ -62,35 +63,35 @@ "t": "rm -rf dist/* && grunt && tsc --stripInternal",
   "devDependencies": {
-    "@types/jasmine": "^3.5.9",
-    "@typescript-eslint/eslint-plugin": "^4.6.0",
-    "@typescript-eslint/parser": "^4.6.0",
+    "@types/jasmine": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
     "connect": "^3.7.0",
-    "core-js": "^3.6.4",
-    "coveralls": "^3.0.9",
-    "doctoc": "^1.4.0",
-    "eslint": "^7.14",
-    "grunt": "^1.0.4",
+    "core-js": "^3.30.1",
+    "coveralls": "^3.1.1",
+    "doctoc": "^2.2.1",
+    "eslint": "^8.38.0",
+    "grunt": "^1.6.1",
     "grunt-cli": "^1.3.2",
     "grunt-contrib-connect": "^3.0.0",
     "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-cssmin": "^3.0.0",
-    "grunt-contrib-uglify": "^5.0.0",
+    "grunt-contrib-cssmin": "^4.0.0",
+    "grunt-contrib-uglify": "^5.2.2",
     "grunt-contrib-watch": "^1.1.0",
-    "grunt-eslint": "^23.0.0",
+    "grunt-eslint": "^24.0.1",
     "grunt-protractor-runner": "^5.0.0",
     "grunt-protractor-webdriver": "^0.2.5",
     "grunt-sass": "3.1.0",
-    "jasmine-core": "^3.5.0",
-    "karma": "^6",
-    "karma-chrome-launcher": "^3.1.0",
+    "jasmine-core": "^4.6.0",
+    "karma": "^6.4.1",
+    "karma-chrome-launcher": "^3.1.1",
     "karma-cli": "^2.0.0",
-    "karma-jasmine": "^4.0.1",
-    "karma-typescript": "4.1.1",
+    "karma-jasmine": "^5.1.0",
+    "karma-typescript": "5.5.3",
     "protractor": "^7.0.0",
-    "sass": "^1.42.1",
-    "serve-static": "^1.14.1",
-    "ts-loader": "^8.0.7",
-    "typescript": "^3.7",
-    "webpack": "^5.3.2",
-    "webpack-cli": "^4.6.0"
+    "sass": "^1.62.0",
+    "serve-static": "^1.15.0",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
+    "webpack": "^5.79.0",
+    "webpack-cli": "^5.0.1"
   }
 }

README.md

@@ -47,2 +47,3 @@ # gridstack.js
   - [Migrating to v7](#migrating-to-v7)
+  - [Migrating to v8](#migrating-to-v8)
 - [jQuery Application](#jquery-application)
@@ -261,4 +262,2 @@ - [Changes](#changes)
     &[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
-    &[gs-min-w='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
-    &[gs-max-w='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
   }
@@ -451,2 +450,9 @@ }
 
+## Migrating to v8
+
+Possible breaking change if you use nested grid JSON format, or original Angular wrapper. Also target is now ES2020 (see release notes).
+* `GridStackOptions.subGrid` -> `GridStackOptions.subGridOpts` rename
+* We now have `GridStackWidget.subGridOpts` vs `GridStackNode.subGrid` (was `subGrid` with both types which is error prone)
+* `GridStackOptions.addRemoveCB` -> `GridStack.addRemoveCB` is now global instead of grid option
+
 # jQuery Application
@@ -453,0 +459,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4727048

increased by93.99%

Number of package files

198

increased by98%

Lines of code

28880

increased by95.61%

Number of lines in readme file

502

increased by1.21%

Worsened metrics

Number of low license alerts

2

increased by100%

No dependency changes