		@@ -1,3 +0,4 @@
		/** gridstack.js 1.2.0 - IE and older browsers Polyfills for this library @preserve*/
		/**
		// gridstack-poly.js 2.0.0-rc @preserve

		/** IE and older browsers Polyfills for this library
		* https://gridstackjs.com/
		@@ -8,2 +9,5 @@ * (c) 2019-2020 Alain Dumesny

		/* eslint-disable prefer-rest-params */
		/* eslint-disable no-var */

		// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
		@@ -10,0 +14,0 @@ (function () {

1000

dist/gridstack.d.ts

		@@ -1,648 +0,366 @@
		// Type definitions for Gridstack 1.2.0
		// Project: https://gridstackjs.com/
		// Definitions by: Pascal Senn <https://github.com/PascalSenn>
		// Ricky Blankenaufulland <https://github.com/ZoolWay>
		// Sl1MBoy <https://github.com/Sl1MBoy>
		// John Archer <https://github.com/JohnArcher>
		// Alain Dumesny <https://github.com/adumesny>
		// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped initially, but now part of gridstack.js
		// TypeScript Version: 2.8

		interface Window {
		GridStack: GridStack;
		}

		/* Other items in https://github.com/gridstack/gridstack.js/blob/develop/doc/README.md
		* Grid attributes
		* Item attributes
		* Events
		*/

		type GridStackElement = string \| HTMLElement;
		interface GridStackHTMLElement extends HTMLElement {
		/** grid's parent DOM element points back to grid class */
		gridstack: GridStack;
		}
		type GridStackEvent = 'added' \| 'change' \| 'disable' \| 'dragstart' \| 'dragstop' \| 'dropped' \|
		'enable' \| 'removed' \| 'resize' \| 'resizestart' \| 'gsresizestop' \| string;

		interface GridStack {
		/**
		* initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
		* simply return the existing instance (ignore any passed options). There is also a version that support
		* multiple grids initialization.
		* @param options grid options (optional)
		* @param el element to convert to a grid (default to '.grid-stack' class selector)
		*
		* @example
		* var grid = window.GridStack.init();
		* // Note: the HTMLElement (of type GridStackHTMLElement) will itself store a `gridstack: GridStack` value that can be retrieve later
		* var grid = document.querySelector('.grid-stack').gridstack;
		*/
		init(options?: GridstackOptions, el?: GridStackElement): GridStack;

		/**
		* Will initialize a list of elements (given a selector) and return an array of grids.
		* @param options grid options (optional)
		* @param selector element to convert to grids (default to '.grid-stack' class selector)
		*
		* @example
		* var grids = window.GridStack.initAll();
		* grids.forEach(...)
		*/
		initAll(options?: GridstackOptions, selector?: string): GridStack[];

		/** the HTML element tied to this grid after it's been initialized */
		el: GridStackHTMLElement;

		/** engine used to implement non DOM grid functionality */
		engine: GridStackEngine;

		/**
		* Creates new widget and returns it.
		*
		* Widget will be always placed even if result height is more than actual grid height.
		* You need to use willItFit method before calling addWidget for additional check.
		* See also `makeWidget()`.
		*
		* @example
		* var grid = GridStack.init();
		* grid.addWidget(el, {width: 3, autoPosition: true});
		*
		* @param el widget to add
		* @param options widget position/size options (optional)
		*/
		addWidget(el: GridStackElement, options ? : GridstackWidget): HTMLElement;

		/**
		* Creates new widget and returns it.
		* Legacy: Spelled out version of the widgets options, recommend use new version instead.
		*
		* @example
		* var grid = GridStack.init();
		* grid.addWidget(el, 0, 0, 3, 2, true);
		*
		* @param el widget to add
		* @param x widget position x (optional)
		* @param y widget position y (optional)
		* @param width widget dimension width (optional)
		* @param height widget dimension height (optional)
		* @param autoPosition if true then x, y parameters will be ignored and widget will be places on the first available position (optional)
		* @param minWidth minimum width allowed during resize/creation (optional)
		* @param maxWidth maximum width allowed during resize/creation (optional)
		* @param minHeight minimum height allowed during resize/creation (optional)
		* @param maxHeight maximum height allowed during resize/creation (optional)
		* @param id value for `data-gs-id` (optional)
		*/
		addWidget(el: GridStackElement, x ? : number, y ? : number, width ? : number, height ? : number, autoPosition ? : boolean,
		minWidth ? : number, maxWidth ? : number, minHeight ? : number, maxHeight ? : number, id ? : number \| string): HTMLElement;

		/**
		* Initializes batch updates. You will see no changes until `commit()` method is called.
		*/
		batchUpdate(): void;

		/**
		* Gets current cell height.
		*/
		cellHeight(): number;

		/**
		* Update current cell height - see `GridstackOptions.cellHeight` for format.
		* This method rebuilds an internal CSS style sheet.
		* Note: You can expect performance issues if call this method too often.
		*
		* @param val the cell height
		* @param noUpdate (Optional) if true, styles will not be updated
		*
		* @example
		* grid.cellHeight(grid.cellWidth() * 1.2);
		*/
		cellHeight(val: number \| string, noUpdate ? : boolean): void;

		/**
		* Gets current cell width.
		*/
		cellWidth(): number;

		/**
		* Finishes batch updates. Updates DOM nodes. You must call it after batchUpdate.
		*/
		commit(): void;

		/**
		* relayout grid items to reclaim any empty space
		*/
		compact(): void;

		/**
		* set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
		* as well as cache the original layout so you can revert back to previous positions without loss.
		* Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11],
		* else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
		* @param column - Integer > 0 (default 12).
		* @param doNotPropagate if true existing widgets will not be updated (optional)
		*/
		column(column: number, doNotPropagate ? : boolean): void;

		/**
		* get the number of columns in the grid (default 12)
		*/
		column(): number;

		/**
		* Destroys a grid instance.
		* @param detachGrid if false nodes and grid will not be removed from the DOM (Optional. Default true).
		*/
		destroy(detachGrid ? : boolean): void;

		/**
		* Disables widgets moving/resizing. This is a shortcut for:
		* @example
		* grid.movable('.grid-stack-item', false);
		* grid.resizable('.grid-stack-item', false);
		*/
		disable(): void;

		/**
		* Enables widgets moving/resizing. This is a shortcut for:
		* @example
		* grid.movable('.grid-stack-item', true);
		* grid.resizable('.grid-stack-item', true);
		*/
		enable(): void;

		/**
		* Enables/disables widget moving.
		*
		* @param doEnable
		* @param includeNewWidgets will force new widgets to be draggable as per
		* doEnable`s value by changing the disableDrag grid option.
		*/
		enableMove(doEnable: boolean, includeNewWidgets: boolean): void;

		/**
		* Enables/disables widget resizing
		* @param doEnable
		* @param includeNewWidgets will force new widgets to be draggable as per
		* doEnable`s value by changing the disableResize grid option.
		*/
		enableResize(doEnable: boolean, includeNewWidgets: boolean): void;

		/**
		* enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
		* @param mode
		*/
		float(mode: boolean): void;

		/**
		* get the current float mode
		*/
		float(): boolean;

		/**
		* Get the position of the cell under a pixel on screen.
		* @param position the position of the pixel to resolve in
		* absolute coordinates, as an object with top and left properties
		* @param useOffset if true, value will be based on offset vs position (Optional. Default false).
		* Useful when grid is within `position: relative` element
		*
		* Returns an object with properties `x` and `y` i.e. the column and row in the grid.
		*/
		getCellFromPixel(position: MousePosition, useOffset ? : boolean): CellPosition;

		/** returns the current number of rows */
		getRow(): number;

		/**
		* Checks if specified area is empty.
		* @param x the position x.
		* @param y the position y.
		* @param width the width of to check
		* @param height the height of to check
		*/
		isAreaEmpty(x: number, y: number, width: number, height: number): void;

		/**
		* Locks/unlocks widget.
		* @param el widget to modify.
		* @param val if true widget will be locked.
		*/
		locked(el: GridStackElement, val: boolean): void;

		/**
		* If you add elements to your grid by hand, you have to tell gridstack afterwards to make them widgets.
		* If you want gridstack to add the elements for you, use addWidget instead.
		* Makes the given element a widget and returns it.
		* @param el widget to convert.
		*
		* @example
		* var grid = GridStack.init();
		* grid.el.appendChild('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2"
		* data-gs-auto-position="true"></div>')
		* grid.makeWidget('gsi-1');
		*/
		makeWidget(el: GridStackElement): HTMLElement;

		/**
		* Set the maxWidth for a widget.
		* @param el widget to modify.
		* @param val A numeric value of the number of columns
		*/
		maxWidth(el: GridStackElement, val: number): void;

		/**
		* Set the minWidth for a widget.
		* @param el widget to modify.
		* @param val A numeric value of the number of columns
		*/
		minWidth(el: GridStackElement, val: number): void;

		/**
		* Set the maxHeight for a widget.
		* @param el widget to modify.
		* @param val A numeric value of the number of rows
		*/
		maxHeight(el: GridStackElement, val: number): void;

		/**
		* Set the minHeight for a widget.
		* @param el widget to modify.
		* @param val A numeric value of the number of rows
		*/
		minHeight(el: GridStackElement, val: number): void;

		/**
		* Enables/Disables moving.
		* @param el widget to modify.
		* @param val if true widget will be draggable.
		*/
		movable(el: GridStackElement, val: boolean): void;

		/**
		* Changes widget position
		* @param el widget to modify
		* @param x new position x. If value is null or undefined it will be ignored.
		* @param y new position y. If value is null or undefined it will be ignored.
		*/
		move(el: GridStackElement, x: number, y: number): void;

		/**
		* unsubscribe from the 'on' event below
		* @param name of the event (see possible values)
		*/
		off(name: GridStackEvent): void;

		/**
		* Event handler that extracts our CustomEvent data out automatically for receiving custom
		* notifications (see doc for supported events)
		* @param name of the event (see possible values) or list of names space separated
		* @param callback function called with event and optional second/third param
		* (see README documentation for each signature).
		*
		* @example
		* grid.on('added', function(e, items) { log('added ', items)} );
		* or
		* grid.on('added removed change', function(e, items) { log(e.type, items)} );
		*
		* Note: in some cases it is the same as calling native handler and parsing the event.
		* grid.el.addEventListener('added', function(event) { log('added ', event.detail)} );
		*/
		on(name: GridStackEvent, callback: (event: CustomEvent, arg2?: GridStackNode[] \| Object, arg3?: Object) => void): void;

		/**
		* Removes widget from the grid.
		* @param el widget to modify
		* @param detachNode if false DOM node won't be removed from the tree (Default? true).
		*/
		removeWidget(el: GridStackElement, detachNode ? : boolean): void;

		/**
		* Removes all widgets from the grid.
		* @param detachNode if false DOM nodes won't be removed from the tree (Default? true).
		*/
		removeAll(detachNode ? : boolean): void;

		/**
		* Changes widget size
		* @param el widget to modify
		* @param width new dimensions width. If value is null or undefined it will be ignored.
		* @param height new dimensions height. If value is null or undefined it will be ignored.
		*/
		resize(el: GridStackElement, width: number, height: number): void;

		/**
		* Enables/Disables resizing.
		* @param el widget to modify
		* @param val if true widget will be resizable.
		*/
		resizable(el: GridStackElement, val: boolean): void;

		/**
		* Toggle the grid animation state. Toggles the `grid-stack-animate` class.
		* @param doAnimate if true the grid will animate.
		*/
		setAnimation(doAnimate: boolean): void;

		/**
		* Toggle the grid static state. Also toggle the grid-stack-static class.
		* @param staticValue if true the grid become static.
		*/
		setStatic(staticValue: boolean): void;

		/**
		* Updates widget position/size.
		* @param el widget to modify
		* @param x new position x. If value is null or undefined it will be ignored.
		* @param y new position y. If value is null or undefined it will be ignored.
		* @param width new dimensions width. If value is null or undefined it will be ignored.
		* @param height new dimensions height. If value is null or undefined it will be ignored.
		*/
		update(el: GridStackElement, x: number, y: number, width: number, height: number): void;

		/**
		* returns current vertical margin value
		*/
		verticalMargin(): number;

		/**
		* Updates the vertical margin - see `GridstackOptions.verticalMargin` for format options.
		*
		* @param value new vertical margin value
		* @param noUpdate (optional) if true, styles will not be updated
		*/
		verticalMargin(value: number \| string, noUpdate ? : boolean): void;

		/**
		* Returns true if the height of the grid will be less the vertical
		* constraint. Always returns true if grid doesn't have height constraint.
		* @param x new position x. If value is null or undefined it will be ignored.
		* @param y new position y. If value is null or undefined it will be ignored.
		* @param width new dimensions width. If value is null or undefined it will be ignored.
		* @param height new dimensions height. If value is null or undefined it will be ignored.
		* @param autoPosition if true then x, y parameters will be ignored and widget
		* will be places on the first available position
		*
		* @example
		* if (grid.willItFit(newNode.x, newNode.y, newNode.width, newNode.height, true)) {
		* grid.addWidget(newNode.el, newNode.x, newNode.y, newNode.width, newNode.height, true);
		* } else {
		* alert('Not enough free space to place the widget');
		* }
		*/
		willItFit(x: number, y: number, width: number, height: number, autoPosition: boolean): boolean;
		}

		/**
		* Defines the GridStack engine that does most no DOM grid manipulation.
		* See GridStack methods and vars for descriptions.
		*
		* NOTE: values should not be modified - call the GridStack API instead
		*/
		interface GridStackEngine {
		column: number;
		float: boolean;
		maxRow: number;
		nodes: GridStackNode[];
		getRow(): number;
		* https://gridstackjs.com/
		* (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
		* gridstack.js may be freely distributed under the MIT license.
		*/
		import './gridstack-poly.js';
		import { GridStackEngine } from './gridstack-engine';
		import { Utils } from './utils';
		import { GridItemHTMLElement, GridStackWidget, GridStackNode, GridstackOptions, numberOrString } from './types';
		import { GridStackDD } from './gridstack-dd';
		export * from './types';
		export * from './utils';
		export * from './gridstack-engine';
		export * from './gridstack-dd';
		import './jq/gridstack-dd-jqueryui';
		export * from './jq/gridstack-dd-jqueryui';
		export declare type GridStackElement = string \| HTMLElement \| GridItemHTMLElement;
		export interface GridHTMLElement extends HTMLElement {
		gridstack?: GridStack;
		}

		/**
		* Defines the coordinates of an object
		*/
		interface MousePosition {
		top: number;
		left: number;
		export declare type GridStackEvent = 'added' \| 'change' \| 'disable' \| 'dragstart' \| 'dragstop' \| 'dropped' \| 'enable' \| 'removed' \| 'resizestart' \| 'resizestop';
		/** Defines the coordinates of an object */
		export interface MousePosition {
		top: number;
		left: number;
		}

		/**
		* Defines the position of a cell inside the grid
		*/
		interface CellPosition {
		x: number;
		y: number;
		/** Defines the position of a cell inside the grid*/
		export interface CellPosition {
		x: number;
		y: number;
		}

		/**
		* Gridstack Widget creation options
		* @param x widget position x (default?: 0)
		* @param y widget position y (default?: 0)
		* @param width widget dimension width (default?: 1)
		* @param height widget dimension height (default?: 1)
		* @param autoPosition if true then x, y parameters will be ignored and widget will be places on the first available position (default?: false)
		* @param minWidth minimum width allowed during resize/creation (default?: undefined = un-constrained)
		* @param maxWidth maximum width allowed during resize/creation (default?: undefined = un-constrained)
		* @param minHeight minimum height allowed during resize/creation (default?: undefined = un-constrained)
		* @param maxHeight maximum height allowed during resize/creation (default?: undefined = un-constrained)
		* @param noResize prevent resizing (default?: undefined = un-constrained)
		* @param noMove prevents moving (default?: undefined = un-constrained)
		* @param locked prevents moving and resizing (default?: undefined = un-constrained)
		* @param resizeHandles widgets can have their own resize handles. For example 'e,w' will make the particular widget only resize east and west.
		* @param id value for `data-gs-id` stored on the widget (default?: undefined)
		* Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.
		* Note: your grid elements MUST have the following classes for the CSS layout to work:
		* @example
		* <div class="grid-stack">
		* <div class="grid-stack-item">
		* <div class="grid-stack-item-content">Item 1</div>
		* </div>
		* </div>
		*/
		interface GridstackWidget {
		x ? : number;
		y ? : number;
		width ? : number;
		height ? : number;
		autoPosition ? : boolean;
		minWidth ? : number;
		maxWidth ? : number;
		minHeight ? : number;
		maxHeight ? : number;
		noResize ? : boolean;
		noMove ? : boolean;
		locked ? : boolean;
		resizeHandles ?: string;
		id ? : number \| string;
		export declare class GridStack {
		/**
		* initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
		* simply return the existing instance (ignore any passed options). There is also an initAll() version that support
		* multiple grids initialization at once.
		* @param options grid options (optional)
		* @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)
		*
		* @example
		* let grid = GridStack.init();
		*
		* Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later
		* let grid = document.querySelector('.grid-stack').gridstack;
		*/
		static init(options?: GridstackOptions, elOrString?: GridStackElement): GridStack;
		/**
		* Will initialize a list of elements (given a selector) and return an array of grids.
		* @param options grid options (optional)
		* @param selector elements selector to convert to grids (default to '.grid-stack' class selector)
		*
		* @example
		* let grids = GridStack.initAll();
		* grids.forEach(...)
		*/
		static initAll(options?: GridstackOptions, selector?: string): GridStack[];
		/** scoping so users can call GridStack.Utils.sort() for example */
		static Utils: typeof Utils;
		/** scoping so users can call new GridStack.Engine(12) for example */
		static Engine: typeof GridStackEngine;
		/** the HTML element tied to this grid after it's been initialized */
		el: GridHTMLElement;
		/** engine used to implement non DOM grid functionality */
		engine: GridStackEngine;
		/** grid options - public for classes to access, but use methods to modify! */
		opts: GridstackOptions;
		/** current drag&drop plugin being used */
		dd: GridStackDD;
		/**
		* Construct a grid item from the given element and options
		* @param el
		* @param opts
		*/
		constructor(el: GridHTMLElement, opts?: GridstackOptions);
		/**
		* add a new widget and returns it.
		*
		* Widget will be always placed even if result height is more than actual grid height.
		* You need to use willItFit method before calling addWidget for additional check.
		* See also `makeWidget()`.
		*
		* @example
		* let grid = GridStack.init();
		* grid.addWidget('<div><div class="grid-stack-item-content">hello</div></div>', {width: 3});
		*
		* @param el html element or string definition to add
		* @param options widget position/size options (optional) - see GridStackWidget
		*/
		addWidget(el: GridStackElement, options?: GridStackWidget): GridItemHTMLElement;
		/** saves the current layout returning a list of widgets for serialization */
		save(): GridStackWidget[];
		/**
		* load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
		*
		* @param layout list of widgets definition to update/create
		* @param addAndRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving
		* the user control of insertion.
		*
		* @example
		* see http://gridstackjs.com/demo/serialization.html
		**/
		load(layout: GridStackWidget[], addAndRemove?: boolean \| ((w: GridStackWidget, add: boolean) => void)): void;
		/**
		* Initializes batch updates. You will see no changes until `commit()` method is called.
		*/
		batchUpdate(): GridStack;
		/**
		* Gets current cell height.
		*/
		getCellHeight(): number;
		/**
		* Update current cell height - see `GridstackOptions.cellHeight` for format.
		* This method rebuilds an internal CSS style sheet.
		* Note: You can expect performance issues if call this method too often.
		*
		* @param val the cell height
		* @param update (Optional) if false, styles will not be updated
		*
		* @example
		* grid.cellHeight(grid.cellWidth() * 1.2);
		*/
		cellHeight(val: numberOrString, update?: boolean): GridStack;
		/**
		* Gets current cell width.
		*/
		cellWidth(): number;
		/**
		* Finishes batch updates. Updates DOM nodes. You must call it after batchUpdate.
		*/
		commit(): GridStack;
		/** re-layout grid items to reclaim any empty space */
		compact(): GridStack;
		/**
		* set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
		* as well as cache the original layout so you can revert back to previous positions without loss.
		* Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11],
		* else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
		* @param column - Integer > 0 (default 12).
		* @param doNotPropagate if true existing widgets will not be updated (optional)
		*/
		column(column: number, doNotPropagate?: boolean): GridStack;
		/**
		* get the number of columns in the grid (default 12)
		*/
		getColumn(): number;
		/** returns an array of grid HTML elements (no placeholder) - used to iterate through our children */
		getGridItems(): GridItemHTMLElement[];
		/**
		* Destroys a grid instance.
		* @param removeDOM if `false` grid and items elements will not be removed from the DOM (Optional. Default `true`).
		*/
		destroy(removeDOM?: boolean): GridStack;
		/**
		* Disables widgets moving/resizing. This is a shortcut for:
		* @example
		* grid.enableMove(false);
		* grid.enableResize(false);
		*/
		disable(): GridStack;
		/**
		* Enables widgets moving/resizing. This is a shortcut for:
		* @example
		* grid.enableMove(true);
		* grid.enableResize(true);
		*/
		enable(): GridStack;
		/**
		* Enables/disables widget moving.
		*
		* @param doEnable
		* @param includeNewWidgets will force new widgets to be draggable as per
		* doEnable`s value by changing the disableDrag grid option (default: true).
		*/
		enableMove(doEnable: boolean, includeNewWidgets?: boolean): GridStack;
		/**
		* Enables/disables widget resizing
		* @param doEnable
		* @param includeNewWidgets will force new widgets to be draggable as per
		* doEnable`s value by changing the disableResize grid option (default: true).
		*/
		enableResize(doEnable: boolean, includeNewWidgets?: boolean): GridStack;
		/**
		* enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
		*/
		float(val: boolean): GridStack;
		/**
		* get the current float mode
		*/
		getFloat(): boolean;
		/**
		* Get the position of the cell under a pixel on screen.
		* @param position the position of the pixel to resolve in
		* absolute coordinates, as an object with top and left properties
		* @param useDocRelative if true, value will be based on document position vs parent position (Optional. Default false).
		* Useful when grid is within `position: relative` element
		*
		* Returns an object with properties `x` and `y` i.e. the column and row in the grid.
		*/
		getCellFromPixel(position: MousePosition, useDocRelative?: boolean): CellPosition;
		/** returns the current number of rows, which will be at least `minRow` if set */
		getRow(): number;
		/**
		* Checks if specified area is empty.
		* @param x the position x.
		* @param y the position y.
		* @param width the width of to check
		* @param height the height of to check
		*/
		isAreaEmpty(x: number, y: number, width: number, height: number): boolean;
		/**
		* Locks/unlocks widget.
		* @param el element or selector to modify.
		* @param val if true widget will be locked.
		*/
		locked(els: GridStackElement, val: boolean): GridStack;
		/**
		* If you add elements to your grid by hand, you have to tell gridstack afterwards to make them widgets.
		* If you want gridstack to add the elements for you, use `addWidget()` instead.
		* Makes the given element a widget and returns it.
		* @param els widget or single selector to convert.
		*
		* @example
		* let grid = GridStack.init();
		* grid.el.appendChild('<div id="gsi-1" data-gs-width="3"></div>');
		* grid.makeWidget('gsi-1');
		*/
		makeWidget(els: GridStackElement): GridItemHTMLElement;
		/**
		* Set the maxWidth for a widget.
		* @param els widget or selector to modify.
		* @param val A numeric value of the number of columns
		*/
		maxWidth(els: GridStackElement, val: number): GridStack;
		/**
		* Set the minWidth for a widget.
		* @param els widget or selector to modify.
		* @param val A numeric value of the number of columns
		*/
		minWidth(els: GridStackElement, val: number): GridStack;
		/**
		* Set the maxHeight for a widget.
		* @param els widget or selector to modify.
		* @param val A numeric value of the number of rows
		*/
		maxHeight(els: GridStackElement, val: number): GridStack;
		/**
		* Set the minHeight for a widget.
		* @param els widget or selector to modify.
		* @param val A numeric value of the number of rows
		*/
		minHeight(els: GridStackElement, val: number): GridStack;
		/**
		* Enables/Disables moving.
		* @param els widget or selector to modify.
		* @param val if true widget will be draggable.
		*/
		movable(els: GridStackElement, val: boolean): GridStack;
		/**
		* Changes widget position
		* @param els widget or singular selector to modify
		* @param x new position x. If value is null or undefined it will be ignored.
		* @param y new position y. If value is null or undefined it will be ignored.
		*/
		move(els: GridStackElement, x?: number, y?: number): GridStack;
		/**
		* Event handler that extracts our CustomEvent data out automatically for receiving custom
		* notifications (see doc for supported events)
		* @param name of the event (see possible values) or list of names space separated
		* @param callback function called with event and optional second/third param
		* (see README documentation for each signature).
		*
		* @example
		* grid.on('added', function(e, items) { log('added ', items)} );
		* or
		* grid.on('added removed change', function(e, items) { log(e.type, items)} );
		*
		* Note: in some cases it is the same as calling native handler and parsing the event.
		* grid.el.addEventListener('added', function(event) { log('added ', event.detail)} );
		*
		*/
		on(name: GridStackEvent, callback: (event: Event, arg2?: GridItemHTMLElement \| GridStackNode[]) => void): GridStack;
		/**
		* unsubscribe from the 'on' event below
		* @param name of the event (see possible values)
		*/
		off(name: GridStackEvent): GridStack;
		/**
		* Removes widget from the grid.
		* @param el widget or selector to modify
		* @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).
		*/
		removeWidget(els: GridStackElement, removeDOM?: boolean): GridStack;
		/**
		* Removes all widgets from the grid.
		* @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).
		*/
		removeAll(removeDOM?: boolean): GridStack;
		/**
		* Changes widget size
		* @param els widget or singular selector to modify
		* @param width new dimensions width. If value is null or undefined it will be ignored.
		* @param height new dimensions height. If value is null or undefined it will be ignored.
		*/
		resize(els: GridStackElement, width?: number, height?: number): GridStack;
		/**
		* Enables/Disables resizing.
		* @param els widget or selector to modify
		* @param val if true widget will be resizable.
		*/
		resizable(els: GridStackElement, val: boolean): GridStack;
		/**
		* Toggle the grid animation state. Toggles the `grid-stack-animate` class.
		* @param doAnimate if true the grid will animate.
		*/
		setAnimation(doAnimate: boolean): GridStack;
		/**
		* Toggle the grid static state. Also toggle the grid-stack-static class.
		* @param staticValue if true the grid become static.
		*/
		setStatic(staticValue: boolean): GridStack;
		/**
		* Updates widget position/size.
		* @param els widget or singular selector to modify
		* @param x new position x. If value is null or undefined it will be ignored.
		* @param y new position y. If value is null or undefined it will be ignored.
		* @param width new dimensions width. If value is null or undefined it will be ignored.
		* @param height new dimensions height. If value is null or undefined it will be ignored.
		*/
		update(els: GridStackElement, x?: number, y?: number, width?: number, height?: number): GridStack;
		/**
		* Updates the margins which will set all 4 sides at once - see `GridstackOptions.margin` for format options.
		* @param value new vertical margin value
		* Note: you can instead use `marginTop \| marginBottom \| marginLeft \| marginRight` GridstackOptions to set the sides separately.
		*/
		margin(value: numberOrString): GridStack;
		/** returns current vertical margin value */
		getMargin(): number;
		/**
		* Returns true if the height of the grid will be less the vertical
		* constraint. Always returns true if grid doesn't have height constraint.
		* @param x new position x. If value is null or undefined it will be ignored.
		* @param y new position y. If value is null or undefined it will be ignored.
		* @param width new dimensions width. If value is null or undefined it will be ignored.
		* @param height new dimensions height. If value is null or undefined it will be ignored.
		* @param autoPosition if true then x, y parameters will be ignored and widget
		* will be places on the first available position
		*
		* @example
		* if (grid.willItFit(newNode.x, newNode.y, newNode.width, newNode.height, newNode.autoPosition)) {
		* grid.addWidget(newNode.el, newNode);
		* } else {
		* alert('Not enough free space to place the widget');
		* }
		*/
		willItFit(x: number, y: number, width: number, height: number, autoPosition: boolean): boolean;
		}

		/**
		* internal descriptions describing the items in the grid
		*/
		interface GridStackNode extends GridstackWidget {
		el: HTMLElement;
		_grid: GridStack;
		}

		interface Utils {
		/**
		* Sorts array of nodes
		* @param nodes array to sort
		* @param dir 1 for asc, -1 for desc (optional)
		* @param width width of the grid. If undefined the width will be calculated automatically (optional).
		**/
		sort(nodes: GridStackNode[], dir ? : number, width ? : number): void;
		}

		/**
		* Gridstack Options
		* Defines the options for a Gridstack
		*/
		interface GridstackOptions {
		/**
		* accept widgets dragged from other grids or from outside (default: `false`). Can be:
		* `true` (uses `'.grid-stack-item'` class filter) or `false`,
		* string for explicit class name,
		* function returning a boolean. See [example](http://gridstack.github.io/gridstack.js/demo/two.html)
		*/
		acceptWidgets ? : boolean \| string \| ((i: number, element: Element) => boolean);

		/**
		* if true the resizing handles are shown even if the user is not hovering over the widget (default?: false)
		*/
		alwaysShowResizeHandle ? : boolean;

		/**
		* turns animation on (default?: true)
		*/
		animate ? : boolean;

		/**
		* if false gridstack will not initialize existing items (default?: true)
		*/
		auto ? : boolean;

		/**
		* one cell height (default?: 60). Can be:
		* an integer (px)
		* a string (ex: '100px', '10em', '10rem', '10%')
		* 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.
		* 'auto' - height will be calculated to match cell width (initial square grid).
		*/
		cellHeight ? : number \| string;

		/**
		* (internal) unit for cellHeight (default? 'px') which is set when a string cellHeight with a unit is passed (ex: '10rem')
		*/
		cellHeightUnit ? : string;

		/**
		* number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns
		*/
		column ? : number;

		/** class that implement drag'n'drop functionality for gridstack. If false grid will be static.
		* (default?: null - first available plugin will be used)
		*/
		ddPlugin ? : boolean \| null \| any;

		/** disallows dragging of widgets (default?: false) */
		disableDrag ? : boolean;

		/** disables the onColumnMode when the window width is less than minWidth (default?: false) */
		disableOneColumnMode ? : boolean;

		/** disallows resizing of widgets (default?: false). */
		disableResize ? : boolean;

		/**
		* allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', scroll?: true, appendTo?: 'body', containment: null })
		*/
		draggable ? : {};

		/**
		* let user drag nested grid items out of a parent or not (default false)
		*/
		dragOut ? : boolean;

		/**
		* enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html)
		*/
		float ? : boolean;

		/**
		* draggable handle selector (default?: '.grid-stack-item-content')
		*/
		handle ? : string;

		/** draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) */
		handleClass ? : string;

		/**
		* widget class (default?: 'grid-stack-item')
		*/
		itemClass ? : string;

		/**
		* maximum rows amount. Default? is 0 which means no maximum rows
		*/
		maxRow ? : number;

		/**
		* minimum rows amount. Default is `0`. You can also do this with `min-height` CSS attribute
		* on the grid div in pixels, which will round to the closest row.
		*/
		minRow?: number;

		/**
		* minimal width. If window width is less, grid will be shown in one column mode (default?: 768)
		*/
		minWidth ? : number;

		/**
		* set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column
		* layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: false)
		*/
		oneColumnModeDomSort?: boolean;

		/**
		* class for placeholder (default?: 'grid-stack-placeholder')
		*/
		placeholderClass ? : string;

		/** placeholder default content (default?: '') */
		placeholderText ? : string;

		/**
		* allows to override UI resizable options. (default?: { autoHide?: true, handles?: 'se' })
		*/
		resizable ? : {};

		/**
		* if true widgets could be removed by dragging outside of the grid. It could also be a selector string,
		* in this case widgets will be removed by dropping them there (default?: false)
		* See example (http://gridstack.github.io/gridstack.js/demo/two.html)
		*/
		removable ? : boolean \| string;

		/**
		* time in milliseconds before widget is being removed while dragging outside of the grid. (default?: 2000)
		*/
		removeTimeout ? : number;

		/**
		* fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`.
		* (default `0` no constrain)
		*/
		row?: number;

		/**
		* if true turns grid to RTL. Possible values are true, false, 'auto' (default?: 'auto')
		* See [example](http://gridstack.github.io/gridstack.js/demo/rtl.html)
		*/
		rtl ? : boolean \| 'auto';

		/**
		* removes drag&drop&resize (default `false`).
		* If `true` widgets are not movable/resizable by the user, but code can still move and oneColumnMode will still work.
		* You don't even need jQueryUI draggable/resizable.
		* A CSS class `grid-stack-static` is also added to the container.
		*/
		staticGrid ? : boolean;

		/** if `true` will add style element to `<head>` otherwise will add it to element's parent node (default `false`). */
		styleInHead?: boolean;

		/**
		* vertical gap size (default?: 20). Can be:
		* an integer (px)
		* a string (ex: '2em', '20px', '2rem')
		*/
		verticalMargin ? : number \| string;

		/**
		* (internal) unit for verticalMargin (default? 'px') set when `verticalMargin` is set as string with unit (ex: 2rem')
		*/
		verticalMarginUnit ? : string;
		}

doc/CHANGES.md

		@@ -8,2 +8,3 @@ Change log

		- [2.0.0-dev (upcoming)](#200-dev-upcoming)
		- [1.2.0 (2020-08-01)](#120-2020-08-01)
		@@ -38,2 +39,12 @@ - [1.1.2 (2020-05-17)](#112-2020-05-17)

		## 2.0.0-dev (upcoming)

		- re-write to native Typescript, removing all JQuery from main code and API (drag&drop plugin still using jqueryui for now)
		- add `getGridItems()` to return list of HTML grid items
		- add `{dragIn \| dragInOptions}` grid attributes to handle external drag&drop items
		- add `save()` and `load()` to serialize grids from JSON, saving all attributes (not just w,h,x,y) [1286](https://github.com/gridstack/gridstack.js/issues/1286)
		- add `margin` to replace `verticalMargin` which affects both dimensions in code, rather than one in code the other in CSS.
		You can now have perfect square cells (default) [723](https://github.com/gridstack/gridstack.js/issues/723)
		- fix [1299](https://github.com/gridstack/gridstack.js/pull/1299) many columns round-off error

		## 1.2.0 (2020-08-01)
		@@ -204,3 +215,3 @@
		- fix jQuery `size()` ([#486](https://github.com/gridstack/gridstack.js/issues/486)).
		- update `destroy([detachGrid])` call ([#422](https://github.com/gridstack/gridstack.js/issues/422)).
		- update `destroy([removeDOM])` call ([#422](https://github.com/gridstack/gridstack.js/issues/422)).
		- don't mutate options when calling `draggable` and `resizable`. ([#505](https://github.com/gridstack/gridstack.js/issues/505)).
		@@ -214,3 +225,3 @@ - update _notify to allow detach ([#411](https://github.com/gridstack/gridstack.js/issues/411)).
		- update names to respect js naming convention.
		- `cellHeight` and `verticalMargin` can now be string (e.g. '3em', '20px') (Thanks to @jlowcs).
		- `cellHeight` and `margin` can now be string (e.g. '3em', '20px') (Thanks to @jlowcs).
		- add `maxWidth`/`maxHeight` methods.
		@@ -228,3 +239,3 @@ - add `enableMove`/`enableResize` methods.
		- add `removable`/`removeTimeout` (experimental)
		- add `detachGrid` parameter to `destroy` method ([#216](https://github.com/gridstack/gridstack.js/issues/216)) (thanks @jhpedemonte)
		- add `removeDOM` parameter to `destroy` method ([#216](https://github.com/gridstack/gridstack.js/issues/216)) (thanks @jhpedemonte)
		- add `useOffset` parameter to `getCellFromPixel` method ([#237](https://github.com/gridstack/gridstack.js/issues/237))
		@@ -231,0 +242,0 @@ - add `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `id` parameters to `addWidget` ([#188](https://github.com/gridstack/gridstack.js/issues/188))

239

doc/README.md

		@@ -16,20 +16,18 @@ gridstack.js API
		- [disable(event)](#disableevent)
		- [dragstart(event, ui)](#dragstartevent-ui)
		- [dragstop(event, ui)](#dragstopevent-ui)
		- [dragstart(event, el)](#dragstartevent-el)
		- [dragstop(event, el)](#dragstopevent-el)
		- [dropped(event, previousWidget, newWidget)](#droppedevent-previouswidget-newwidget)
		- [enable(event)](#enableevent)
		- [removed(event, items)](#removedevent-items)
		- [resizestart(event, ui)](#resizestartevent-ui)
		- [gsresizestop(event, ui)](#gsresizestopevent-ui)
		- [resizestart(event, el)](#resizestartevent-el)
		- [resizestop(event, el)](#resizestopevent-el)
		- [API](#api)
		- [addWidget(el, [options])](#addwidgetel-options)
		- [addWidget(el, [x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id])](#addwidgetel-x-y-width-height-autoposition-minwidth-maxwidth-minheight-maxheight-id)
		- [batchUpdate()](#batchupdate)
		- [compact()](#compact)
		- [cellHeight()](#cellheight)
		- [cellHeight(val, noUpdate)](#cellheightval-noupdate)
		- [cellHeight(val: number, update = true)](#cellheightval-number-update--true)
		- [cellWidth()](#cellwidth)
		- [commit()](#commit)
		- [column(column, doNotPropagate)](#columncolumn-donotpropagate)
		- [destroy([detachGrid])](#destroydetachgrid)
		- [destroy([removeDOM])](#destroyremovedom)
		- [disable()](#disable)
		@@ -40,6 +38,11 @@ - [enable()](#enable)
		- [float(val?)](#floatval)
		- [getCellHeight()](#getcellheight)
		- [getCellFromPixel(position[, useOffset])](#getcellfrompixelposition-useoffset)
		- [getGridItems(): GridItemHTMLElement[]](#getgriditems-griditemhtmlelement)
		- [getMargin()](#getmargin)
		- [isAreaEmpty(x, y, width, height)](#isareaemptyx-y-width-height)
		- [load(layout: GridStackWidget[], boolean \| ((w: GridStackWidget, add: boolean) => void) = true)](#loadlayout-gridstackwidget-boolean--w-gridstackwidget-add-boolean--void---true)
		- [locked(el, val)](#lockedel-val)
		- [makeWidget(el)](#makewidgetel)
		- [margin(value: numberOrString)](#marginvalue-numberorstring)
		- [maxHeight(el, val)](#maxheightel-val)
		@@ -51,11 +54,10 @@ - [minHeight(el, val)](#minheightel-val)
		- [move(el, x, y)](#moveel-x-y)
		- [removeWidget(el[, detachNode])](#removewidgetel-detachnode)
		- [removeAll([detachNode])](#removealldetachnode)
		- [removeWidget(el[, removeDOM])](#removewidgetel-removedom)
		- [removeAll([removeDOM])](#removeallremovedom)
		- [resize(el, width, height)](#resizeel-width-height)
		- [resizable(el, val)](#resizableel-val)
		- [save(): GridStackWidget[]](#save-gridstackwidget)
		- [setAnimation(doAnimate)](#setanimationdoanimate)
		- [setStatic(staticValue)](#setstaticstaticvalue)
		- [update(el, x, y, width, height)](#updateel-x-y-width-height)
		- [verticalMargin()](#verticalmargin)
		- [verticalMargin(value, noUpdate)](#verticalmarginvalue-noupdate)
		- [willItFit(x, y, width, height, autoPosition)](#willitfitx-y-width-height-autoposition)
		@@ -80,12 +82,14 @@ - [Utils](#utils)
		- `auto` - if `false` gridstack will not initialize existing items (default: `true`)
		- `cellHeight` - one cell height (default: `60`). Can be:
		- `cellHeight` - one cell height (default: `auto`). Can be:
		* an integer (px)
		* a string (ex: '100px', '10em', '10rem', '10%')
		* a string (ex: '100px', '10em', '10rem', '10%', `10vh')
		* 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.
		* `'auto'` - height will be calculated cell square initially.
		* `'auto'` - height will be square cells initially.
		- `column` - number of columns (default: `12`) which can change on the fly with `column(N)` as well. See [example](http://gridstackjs.com/demo/column.html)
		- `ddPlugin` - class that implement drag'n'drop functionality for gridstack. If `false` grid will be static. (default: `null` - first available plugin will be used)
		- `disableDrag` - disallows dragging of widgets (default: `false`).
		- `disableOneColumnMode` - disables the onColumnMode when the window width is less than minWidth (default: 'false')
		- `disableOneColumnMode` - disables the onColumnMode when the grid width is less than minWidth (default: 'false')
		- `disableResize` - disallows resizing of widgets (default: `false`).
		- `dragIn` - specify the class of items that can be dragged into the grid (ex: dragIn: '.newWidget'
		- `dragInOptions` - options for items that can be dragged into the grid (ex: dragInOptions: { revert: 'invalid', scroll: false, appendTo: 'body', helper: 'clone' }
		- `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: false, appendTo: 'body', containment: null}`)
		@@ -97,5 +101,12 @@ - `dragOut` to let user drag nested grid items out of a parent or not (default false) See [example](http://gridstackjs.com/demo/nested.html)
		- `itemClass` - widget class (default: `'grid-stack-item'`)
		- `margin` - gap size around grid item and content (default: `10`). Can be:
		* an integer (px)
		* a string (ex: '2em', '20px', '2rem')
		- `marginTop`: numberOrString - can set individual settings (defaults to `margin`)
		- `marginRight`: numberOrString
		- `marginBottom`: numberOrString
		- `marginLeft`: numberOrString
		- `maxRow` - maximum rows amount. Default is `0` which means no max.
		- `minRow` - minimum rows amount which is handy to prevent grid from collapsing when empty. Default is `0`. You can also do this with `min-height` CSS attribute on the grid div in pixels, which will round to the closest row.
		- `minWidth` - minimal width. If window width is less than or equal to, grid will be shown in one-column mode (default: `768`)
		- `minWidth` - minimal width. If grid width is less than or equal to, grid will be shown in one-column mode (default: `768`)
		- `oneColumnModeDomSort` - set to `true` if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: `false`)
		@@ -111,5 +122,2 @@ - `placeholderClass` - class for placeholder (default: `'grid-stack-placeholder'`)
		- `styleInHead` - if `true` will add style element to `<head>` otherwise will add it to element's parent node (default `false`).
		- `verticalMargin` - vertical gap size (default: `20`). Can be:
		* an integer (px)
		* a string (ex: '2em', '20px', '2rem')

		@@ -145,8 +153,10 @@ ## Grid attributes

		Those are the events set by the grid when items are added/removed or changed - they use standard JS calls with a CustomElement `detail` that stores the list
		of nodes that changed (id, x, y, width, height, etc...).
		Those are events generated by the grid when items are added/removed/changed or drag&drop interaction. In general they pass list of nodes that changed (id, x, y, width, height, etc...) or individual DOM element
		that is affected.

		You can call it on a single event name, or space separated list:
		You can call it on a single event name, or space separated list like:
		`grid.on('added removed change', ...)`

		The Typescript `GridStackEvent` list all possible values, and nothing else is supported by the `grid.on()` method, though it's possible to register directly for other events generated by the drag&drop plugging implementation detail (currently jquery-ui based).

		### added(event, items)
		@@ -157,4 +167,4 @@
		```js
		grid.on('added', function(event, items) {
		/* items contains GridStackNode[] info */
		grid.on('added', function(event: Event, items: GridStackNode[]) {
		items.forEach(function(item) {...});
		});
		@@ -168,4 +178,4 @@ ```
		```js
		grid.on('change', function(event, items) {
		/* items contains GridStackNode[] info */
		grid.on('change', function(event: Event, items: GridStackNode[]) {
		items.forEach(function(item) {...});
		});
		@@ -177,22 +187,24 @@ ```
		```js
		grid.on('disable', function(event) {
		var grid = event.target;
		grid.on('disable', function(event: Event) {
		let grid: GridStack = event.target.gridstack;
		});
		```

		### dragstart(event, ui)
		### dragstart(event, el)

		called when grid item is starting to be dragged

		```js
		grid.on('dragstart', function(event, ui) {
		var grid = this;
		var element = event.target;
		grid.on('dragstart', function(event: Event, el: GridItemHTMLElement) {
		});
		```

		### dragstop(event, ui)
		### dragstop(event, el)
		called after the user is done moving the item, with updated DOM attributes.

		```js
		grid.on('dragstop', function(event, ui) {
		var grid = this;
		var element = event.target;
		grid.on('dragstop', function(event: Event, el: GridItemHTMLElement) {
		let x = parseInt(el.getAttribute('data-gs-x')) \|\| 0;
		// or all values...
		let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}
		});
		@@ -203,4 +215,6 @@ ```

		called when an item has been dropped and accepted over a grid. If the item came from another grid, the previous widget node info will also be sent (but dom item long gone).

		```js
		grid.on('dropped', function(event, previousWidget, newWidget) {
		grid.on('dropped', function(event: Event, previousWidget: GridStackNode, newWidget: GridStackNode) {
		console.log('Removed widget that was dragged out of grid:', previousWidget);
		@@ -214,4 +228,4 @@ console.log('Added widget in dropped grid:', newWidget);
		```js
		grid.on('enable', function(event) {
		var grid = event.target;
		grid.on('enable', function(event: Event) {
		let grid: GridStack = event.target.gridstack;
		});
		@@ -222,31 +236,32 @@ ```

		Called when item is being removed from the grid
		Called when items are being removed from the grid

		```js
		grid.on('removed', function(event, items) {
		/* items contains GridStackNode[] info */
		grid.on('removed', function(event: Event, items: GridStackNode[]) {
		items.forEach(function(item) {...});
		});
		```

		### resizestart(event, ui)
		### resizestart(event, el)

		called before the user starts resizing an item

		```js
		grid.on('resizestart', function(event, ui) {
		var grid = this;
		var element = event.target;
		grid.on('resizestart', function(event: Event, el: GridItemHTMLElement) {
		});
		```

		### gsresizestop(event, ui)
		Note: this is a custom event name that is guaranteed to be called
		after the jqueryui resizestop event where we update `data-gs-width` and `data-gs-height`.
		### resizestop(event, el)

		You could instead use the `change` event which has the latest node sizing.
		called after the user is done resizing the item, with updated DOM attributes.

		```js
		grid.on('gsresizestop', function(event, element) {
		var newHeight = element.getAttribute('data-gs-height');
		grid.on('resizestop', function(event: Event, el: GridItemHTMLElement) {
		let width = parseInt(el.getAttribute('data-gs-width')) \|\| 0;
		// or all values...
		let node: GridStackNode = el.gridstackNode; // {x, y, width, height, id, ....}
		});
		```


		## API
		@@ -256,19 +271,8 @@

		Creates new widget and returns it. Options is an object containing the fields x,y,width,height,etc... described below.
		Creates new widget and returns it. Options is an object containing the fields x,y,width,height,etc...

		### addWidget(el, [x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id])

		Creates new widget and returns it.

		Parameters:

		- `el` - widget to add
		- `x`, `y`, `width`, `height` - widget position/dimensions (optional)
		- `autoPosition` - if `true` then `x`, `y` parameters will be ignored and widget will be places on the first available
		position (optional)
		- `minWidth` minimum width allowed during resize/creation (optional)
		- `maxWidth` maximum width allowed during resize/creation (optional)
		- `minHeight` minimum height allowed during resize/creation (optional)
		- `maxHeight` maximum height allowed during resize/creation (optional)
		- `id` value for `data-gs-id` (optional)
		- `el` - html element or string definition to add
		- `options` widget position/size options (optional) - see GridStackWidget

		@@ -279,4 +283,4 @@ Widget will be always placed even if result height is more than actual grid height. You need to use `willItFit` method
		```js
		var grid = GridStack.init();
		grid.addWidget(el, 0, 0, 3, 2, true);
		let grid = GridStack.init();
		grid.addWidget('<div><div class="grid-stack-item-content">hello</div></div>', {width: 3});
		```
		@@ -292,9 +296,5 @@

		### cellHeight()
		### cellHeight(val: number, update = true)

		Gets current cell height.

		### cellHeight(val, noUpdate)

		Update current cell height. This method rebuilds an internal CSS stylesheet (unless optional noUpdate=true). Note: You can expect performance issues if
		Update current cell height. This method rebuilds an internal CSS stylesheet (unless optional update=false). Note: You can expect performance issues if
		call this method too often.
		@@ -308,3 +308,3 @@

		Gets current cell width.
		Gets current cell width (grid width / # of columns).

		@@ -325,3 +325,3 @@ ### commit()

		### destroy([detachGrid])
		### destroy([removeDOM])

		@@ -332,3 +332,3 @@ Destroys a grid instance.

		- `detachGrid` - if `false` nodes and grid will not be removed from the DOM (Optional. Default `true`).
		- `removeDOM` - if `false` nodes and grid will not be removed from the DOM (Optional. Default `true`).

		@@ -340,4 +340,4 @@ ### disable()
		```js
		grid.movable('.grid-stack-item', false);
		grid.resizable('.grid-stack-item', false);
		grid.enableMove(false);
		grid.enableResize(false);
		```
		@@ -350,4 +350,4 @@
		```js
		grid.movable('.grid-stack-item', true);
		grid.resizable('.grid-stack-item', true);
		grid.enableMove(true);
		grid.enableResize(true);
		```
		@@ -357,6 +357,7 @@

		Enables/disables widget moving. `includeNewWidgets` will force new widgets to be draggable as per `doEnable`'s value by changing the `disableDrag` grid option. This is a shortcut for:
		Enables/disables widget moving. `includeNewWidgets` will force new widgets to be draggable as per `doEnable`'s value by changing the `disableDrag` grid option (default: true). This is a shortcut for:

		```js
		grid.movable(this.container.children('.' + this.opts.itemClass), doEnable);
		grid.movable('.grid-stack-item', doEnable);
		grid.opts.disableDrag = !doEnable;
		```
		@@ -366,6 +367,7 @@

		Enables/disables widget resizing. `includeNewWidgets` will force new widgets to be resizable as per `doEnable`'s value by changing the `disableResize` grid option. This is a shortcut for:
		Enables/disables widget resizing. `includeNewWidgets` will force new widgets to be resizable as per `doEnable`'s value by changing the `disableResize` grid option (default: true). This is a shortcut for:

		```js
		grid.resizable(this.container.children('.' + this.opts.itemClass), doEnable);
		grid.resizable('.grid-stack-item', doEnable);
		grid.opts.disableResize = !doEnable;
		```
		@@ -379,2 +381,7 @@

		### getCellHeight()

		Gets current cell height.


		### getCellFromPixel(position[, useOffset])
		@@ -391,2 +398,10 @@

		### getGridItems(): GridItemHTMLElement[]

		Return list of GridItem HTML dom elements (excluding temporary placeholder)

		### getMargin()

		returns current margin value.

		### isAreaEmpty(x, y, width, height)
		@@ -396,2 +411,11 @@

		### load(layout: GridStackWidget[], boolean \| ((w: GridStackWidget, add: boolean) => void) = true)

		- load the widgets from a list (see `save()`). This will call `update()` on each (matching by id) or add/remove widgets that are not there.
		- Optional `addAndRemove` boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving the user control of insertion.

		- used to restore a grid layout for a saved layout list (see `save()`).
		- `addAndRemove` boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving the user control of insertion.
		- see [example](http://gridstackjs.com/demo/serialization.html)

		### locked(el, val)
		@@ -401,3 +425,3 @@

		- `el` - widget to modify.
		- `el` - widget or selector to modify.
		- `val` - if `true` widget will be locked.
		@@ -415,7 +439,13 @@
		```js
		var grid = GridStack.init();
		grid.el.appendChild('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2" data-gs-auto-position="true"><div class="grid-stack-item-content"></div></div>')
		grid.makeWidget('#gsi-1');
		let grid = GridStack.init();
		grid.el.appendChild('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2" data-gs-auto-position="true"></div>')
		grid.makeWidget('gsi-1');
		```

		### margin(value: numberOrString)

		set the top/right/bottom/left margin between grid item and content. Parameters:
		- `value` - new margin value. see `cellHeight` for possible value formats.
		Note: you can instead use `marginTop \| marginBottom \| marginLeft \| marginRight` so set the sides separately.

		### maxHeight(el, val)
		@@ -465,3 +495,3 @@

		### removeWidget(el[, detachNode])
		### removeWidget(el[, removeDOM])

		@@ -473,5 +503,5 @@ Removes widget from the grid.
		- `el` - widget to remove.
		- `detachNode` - if `false` node won't be removed from the DOM (Optional. Default `true`).
		- `removeDOM` - if `false` node won't be removed from the DOM (Optional. Default `true`).

		### removeAll([detachNode])
		### removeAll([removeDOM])

		@@ -482,3 +512,3 @@ Removes all widgets from the grid.

		- `detachNode` - if `false` nodes won't be removed from the DOM (Optional. Default `true`).
		- `removeDOM` - if `false` nodes won't be removed from the DOM (Optional. Default `true`).

		@@ -501,2 +531,7 @@ ### resize(el, width, height)

		### save(): GridStackWidget[]

		- returns the layout of the grid that can be serialized (list of item non default attributes, not just w,y,x,y but also min/max and id). See `load()`
		- see [example](http://gridstackjs.com/demo/serialization.html)

		### setAnimation(doAnimate)
		@@ -524,13 +559,2 @@

		### verticalMargin()

		returns current vertical margin value.

		### verticalMargin(value, noUpdate)

		Parameters:

		- `value` - new vertical margin value.
		- `noUpdate` - if true, styles will not be updated.

		### willItFit(x, y, width, height, autoPosition)
		@@ -542,4 +566,4 @@
		```js
		if (grid.willItFit(newNode.x, newNode.y, newNode.width, newNode.height, true)) {
		grid.addWidget(newNode.el, newNode.x, newNode.y, newNode.width, newNode.height, true);
		if (grid.willItFit(newNode.x, newNode.y, newNode.width, newNode.height, newNode.autoPosition)) {
		grid.addWidget(newNode.el, newNode);
		}
		@@ -551,3 +575,2 @@ else {


		## Utils
		@@ -554,0 +577,0 @@

package.json

		{
		"name": "gridstack",
		"version": "1.2.0",
		"description": "JavaScript / TypeScript for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
		"main": "dist/gridstack",
		"version": "2.0.0-rc",
		"description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
		"main": "./dist/index.js",
		"typings": "./dist/index.d.ts",
		"repository": {
		@@ -11,5 +12,7 @@ "type": "git",
		"scripts": {
		"build": "rm -rf dist/* && grunt && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
		"test": "grunt lint && karma start karma.conf.js",
		"lint": "grunt lint",
		"build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && tsc --stripInternal && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
		"w": "rm -rf dist/* && grunt && webpack",
		"t": "rm -rf dist/* && grunt && tsc --stripInternal",
		"test": "yarn lint && karma start karma.conf.js",
		"lint": "tsc --noEmit && eslint src/*.ts",
		"reset": "rm -rf dist node_modules",
		@@ -19,3 +22,3 @@ "prepublishOnly": "yarn build"
		"keywords": [
		"JavaScript",
		"Typescript",
		"gridstack.js",
		@@ -32,3 +35,3 @@ "grid",
		"React",
		"Typescript"
		"JavaScript"
		],
		@@ -45,4 +48,10 @@ "author": "Pavel Reznikov <pashka.reznikov@gmail.com>",
		"homepage": "http://gridstack.github.io/gridstack.js/",
		"dependencies": {},
		"dependencies": {
		},
		"devDependencies": {
		"@types/jasmine": "^3.5.9",
		"@types/jquery": "^3.5.1",
		"@types/jqueryui": "^1.12.13",
		"@typescript-eslint/eslint-plugin": "^2.23.0",
		"@typescript-eslint/parser": "^2.23.0",
		"connect": "^3.7.0",
		@@ -52,2 +61,3 @@ "core-js": "^3.6.4",
		"doctoc": "^1.4.0",
		"eslint": "^6.8.0",
		"grunt": "^1.0.4",
		@@ -67,13 +77,13 @@ "grunt-cli": "^1.3.2",
		"karma-chrome-launcher": "^3.1.0",
		"karma-coverage": "^2.0.1",
		"karma-coveralls": "^2.1.0",
		"karma-cli": "^2.0.0",
		"karma-jasmine": "^3.1.1",
		"karma-typescript": "4.1.1",
		"node-sass": "^4.13.1",
		"puppeteer": "^2.1.1",
		"serve-static": "^1.14.1"
		},
		"resolutions": {
		"lodash": "^4.17.13",
		"js-yaml": "^3.13.1"
		"serve-static": "^1.14.1",
		"ts-loader": "^6.2.1",
		"typescript": "3.4.5",
		"webpack": "^4.44.1",
		"webpack-cli": "^3.3.12"
		}
		}

116

README.md

		@@ -9,2 +9,3 @@ gridstack.js
		[![downloads](https://img.shields.io/npm/dm/gridstack.svg)](https://www.npmjs.com/package/gridstack)
		[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/alaind831)

		@@ -17,7 +18,4 @@ Mobile-friendly Javascript library (with Typescript bindings) for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Allows you to build draggable, responsive bootstrap v4-friendly layouts. It also has multiple bindings and works great with [React](https://reactjs.org/), [Angular](https://angular.io/), [Knockout.js](http://knockoutjs.com), [Ember](https://www.emberjs.com/) and others. Includes Typescript defines.

		If you find this lib useful, please donate [PayPal](https://www.paypal.me/alaind831) or [Venmo](https://www.venmo.com/adumesny) (adumesny) and help support it!
		If you find this lib useful, please [donate](https://www.paypal.me/alaind831) and help support it!

		[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/alaind831)
		[![Donate](https://img.shields.io/badge/Donate-Venmo-g.svg)](https://www.venmo.com/adumesny)

		Join us on Slack: https://gridstackjs.troolee.com
		@@ -44,5 +42,6 @@
		- [Touch devices support](#touch-devices-support)
		- [Migrating to v0.6.x](#migrating-to-v06x)
		- [Migrating to v1.0.0](#migrating-to-v100)
		- [Migrating to v0.6](#migrating-to-v06)
		- [Migrating to v1](#migrating-to-v1)
		- [jQuery Application](#jquery-application)
		- [Migrating to v2](#migrating-to-v2)
		- [Changes](#changes)
		@@ -70,3 +69,3 @@ - [The Team](#the-team)
		```bash
		yarn add gridstack
		yarn install gridstack
		or
		@@ -78,10 +77,18 @@ npm install --save gridstack

		after you install:
		ES6 or Typescript

		```js
		import { GridStack } from 'gridstack';
		import 'gridstack/dist/gridstack.css';
		```

		legacy javascript

		```js
		import 'gridstack/dist/gridstack.all.js';
		import 'gridstack/dist/gridstack.css';
		```
		* alternatively in html

		alternatively in html

		```html
		@@ -92,10 +99,10 @@ <link rel="stylesheet" href="node_modules/gridstack/dist/gridstack.min.css" />

		* or using CDN (minimized):
		or using CDN (minimized):

		```html
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.2.0/dist/gridstack.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/gridstack@1.2.0/dist/gridstack.all.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@2.0.0-rc/dist/gridstack.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/gridstack@2.0.0-rc/dist/gridstack.all.js"></script>
		```

		if you need to debug, look at the git demo/ examples for non min includes.
		.map files are included for debugging purposes.

		@@ -106,24 +113,28 @@ ## Basic usage

		```html
		<style type="text/css">
		.grid-stack { background: #FAFAD2; }
		.grid-stack-item-content { background-color: #18bc9c; }
		</style>

		```js
		// ...in your HTML
		<div class="grid-stack"></div>

		<script type="text/javascript">
		var grid = GridStack.init();
		grid.addWidget('<div><div class="grid-stack-item-content">Item 1</div></div>', {width: 2});
		</script>
		// ...in your script
		var grid = GridStack.init();
		grid.addWidget('<div><div class="grid-stack-item-content">Item 1</div></div>', {width: 2});
		```

		... or creating from list

		```js
		// using serialize data instead of .addWidget()
		const serializedData = [
		{x: 0, y: 0, width: 2, height: 2},
		{x: 2, y: 3, width: 3, height: 1},
		{x: 1, y: 3, width: 1, height: 1}
		];

		grid.load(serializedData);
		```

		... or DOM created items

		```html
		<style type="text/css">
		.grid-stack { background: #FAFAD2; }
		.grid-stack-item-content { background-color: #18bc9c; }
		</style>

		```js
		// ...in your HTML
		<div class="grid-stack">
		@@ -138,5 +149,4 @@ <div class="grid-stack-item">

		<script type="text/javascript">
		GridStack.init();
		</script>
		// ...in your script
		GridStack.init();
		```
		@@ -165,3 +175,3 @@

		var grid = GridStack.init();
		let grid = GridStack.init();

		@@ -193,3 +203,3 @@ // you can now call
		```html
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.2.0/dist/gridstack-extra.css"/>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.1.2/dist/gridstack-extra.css"/>

		@@ -291,3 +301,3 @@ <div class="grid-stack grid-stack-N">...</div>
		```js
		var options = {
		let options = {
		alwaysShowResizeHandle: /Android\|webOS\|iPhone\|iPad\|iPod\|BlackBerry\|IEMobile\|Opera Mini/i.test(navigator.userAgent)
		@@ -301,13 +311,13 @@ };

		## Migrating to v0.6.x
		## Migrating to v0.6

		starting in 0.6.x `change` event are no longer sent (for pretty much most nodes!) when an item is just added/deleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track `added\|removed` [events](https://github.com/gridstack/gridstack.js/tree/develop/doc#events) if you didn't and relied on the old broken behavior.

		## Migrating to v1.0.0
		## Migrating to v1

		v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:

		1. see [Migrating to v0.6.x](#migrating-to-v06x) if you didn't already
		1. see [Migrating to v0.6](#migrating-to-v06) if you didn't already

		2. your code only needs to include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, also see note below.
		2. your code only needs to include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, see [jquery app](#jquery-application) below.

		@@ -333,3 +343,3 @@ 3. code change:
		// element identifier defaults to '.grid-stack', returns the grid
		// Note: for Typescript use window.GridStack.init() until next native TS version
		// Note: for Typescript use window.GridStack.init() until next native 2.x TS version
		var grid = GridStack.init(opts?, element?);
		@@ -346,3 +356,3 @@
		```
		Other vars/global changes
		Other changes
		```
		@@ -360,4 +370,26 @@ `GridStackUI` --> `GridStack`

		We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag\|drop\|resize) internally in `gridstack.all.js`. IFF your app needs to bring your own version instead, you should instead include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306))
		We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag\|drop\|resize) internally in `gridstack.all.js`. IFF your app needs to bring your own version instead, you should instead include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).

		Note: v2.0.-rc does not currently support importing GridStack Drag&Drop without also including our jquery + jqueryui. Still trying to figure how to make that bundle possible.

		## Migrating to v2

		make sure to read v1 migration first!

		v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x

		1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have <b>all set methods return</b> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridstackOptions` or `GridStackWidget`).

		```
		`addWidget(el, x, y, width, height)` --> `addWidget(el, {with: 2})`
		`float()` to get value --> `getFloat()`
		'cellHeight()` to get value --> `getCellHeight()`
		'verticalMargin' is now 'margin' grid options and API that applies to all 4 sides.
		'verticalMargin()` to get value --> `getMargin()`
		```

		2. event signatures are generic and not jquery-ui dependent anymore. `gsresizestop` has been removed as `resizestop\|dragstop` are now called after the DOm attributes have been updated.

		3. `oneColumnMode` would trigger when `window.width` < 768px by default. We now check for grid width instead (more correct and supports nesting). You might need to adjust grid `minWidth` or `disableOneColumnMode`.

		Changes
		@@ -364,0 +396,0 @@ =====

dist/gridstack-extra.css.map

dist/gridstack-poly.min.js

dist/gridstack.css.map

dist/gridstack.jQueryUI.js

dist/gridstack.jQueryUI.min.js

dist/gridstack.min.js

dist/gridstack.min.map

dist/jquery-ui.js

dist/jquery-ui.min.js

dist/jquery.js

dist/jquery.min.js

dist/gridstack-extra.css