{"version":3,"sources":["jsdelivr-header.js","/npm/@bdlite/gridstack@8.4.2/src/gridstack.ts"],"names":[],"mappings":"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","file":"/npm/@bdlite/gridstack@8.4.2/dist/gridstack.js","sourceRoot":"","sourcesContent":["/**\n * Minified by jsDelivr using Terser v5.39.0.\n * Original file: /npm/@bdlite/gridstack@8.4.2/dist/gridstack.js\n *\n * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files\n */\n","/*!\r\n * GridStack 8.4.0\r\n * https://gridstackjs.com/\r\n *\r\n * Copyright (c) 2021-2022 Alain Dumesny\r\n * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE\r\n */\r\nimport { GridStackEngine } from './gridstack-engine';\r\nimport { Utils, HeightData, obsolete } from './utils';\r\nimport { gridDefaults, ColumnOptions, GridItemHTMLElement, GridStackElement, GridStackEventHandlerCallback,\r\n  GridStackNode, GridStackWidget, numberOrString, DDUIData, DDDragInOpt, GridStackPosition, GridStackOptions,\r\n  dragInDefaultOptions, GridStackEventHandler, GridStackNodesHandler, AddRemoveFcn, SaveFcn, CompactOptions } from './types';\r\n\r\n/*\r\n * and include D&D by default\r\n * TODO: while we could generate a gridstack-static.js at smaller size - saves about 31k (41k -> 72k)\r\n * I don't know how to generate the DD only code at the remaining 31k to delay load as code depends on Gridstack.ts\r\n * also it caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039\r\n */\r\nimport { DDGridStack } from './dd-gridstack';\r\nimport { isTouch } from './dd-touch';\r\nimport { DDManager } from './dd-manager';\r\nimport { DDElementHost } from './dd-element';\r\n/** global instance */\r\nconst dd = new DDGridStack;\r\n\r\n// export all dependent file as well to make it easier for users to just import the main file\r\nexport * from './types';\r\nexport * from './utils';\r\nexport * from './gridstack-engine';\r\nexport * from './dd-gridstack';\r\n\r\nexport interface GridHTMLElement extends HTMLElement {\r\n  gridstack?: GridStack; // grid's parent DOM element points back to grid class\r\n}\r\n/** list of possible events, or space separated list of them */\r\nexport type GridStackEvent = 'added' | 'change' | 'disable' | 'drag' | 'dragstart' | 'dragstop' | 'dropped' |\r\n  'enable' | 'removed' | 'resize' | 'resizestart' | 'resizestop' | string;\r\n\r\n/** Defines the coordinates of an object */\r\nexport interface MousePosition {\r\n  top: number;\r\n  left: number;\r\n}\r\n\r\n/** Defines the position of a cell inside the grid*/\r\nexport interface CellPosition {\r\n  x: number;\r\n  y: number;\r\n}\r\n\r\ninterface GridCSSStyleSheet extends CSSStyleSheet {\r\n  _max?: number; // internal tracker of the max # of rows we created\r\n}\r\n\r\n// extend with internal fields we need - TODO: move other items in here\r\ninterface InternalGridStackOptions extends GridStackOptions {\r\n  _alwaysShowResizeHandle?: true | false | 'mobile'; // so we can restore for save\r\n}\r\n\r\n/**\r\n * Main gridstack class - you will need to call `GridStack.init()` first to initialize your grid.\r\n * Note: your grid elements MUST have the following classes for the CSS layout to work:\r\n * @example\r\n * <div class=\"grid-stack\">\r\n *   <div class=\"grid-stack-item\">\r\n *     <div class=\"grid-stack-item-content\">Item 1</div>\r\n *   </div>\r\n * </div>\r\n */\r\nexport class GridStack {\r\n\r\n  /**\r\n   * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will\r\n   * simply return the existing instance (ignore any passed options). There is also an initAll() version that support\r\n   * multiple grids initialization at once. Or you can use addGrid() to create the entire grid from JSON.\r\n   * @param options grid options (optional)\r\n   * @param elOrString element or CSS selector (first one used) to convert to a grid (default to '.grid-stack' class selector)\r\n   *\r\n   * @example\r\n   * let grid = GridStack.init();\r\n   *\r\n   * Note: the HTMLElement (of type GridHTMLElement) will store a `gridstack: GridStack` value that can be retrieve later\r\n   * let grid = document.querySelector('.grid-stack').gridstack;\r\n   */\r\n  public static init(options: GridStackOptions = {}, elOrString: GridStackElement = '.grid-stack'): GridStack {\r\n    let el = GridStack.getGridElement(elOrString);\r\n    if (!el) {\r\n      if (typeof elOrString === 'string') {\r\n        console.error('GridStack.initAll() no grid was found with selector \"' + elOrString + '\" - element missing or wrong selector ?' +\r\n        '\\nNote: \".grid-stack\" is required for proper CSS styling and drag/drop, and is the default selector.');\r\n      } else {\r\n        console.error('GridStack.init() no grid element was passed.');\r\n      }\r\n      return null;\r\n    }\r\n    if (!el.gridstack) {\r\n      el.gridstack = new GridStack(el, Utils.cloneDeep(options));\r\n    }\r\n    return el.gridstack\r\n  }\r\n\r\n  /**\r\n   * Will initialize a list of elements (given a selector) and return an array of grids.\r\n   * @param options grid options (optional)\r\n   * @param selector elements selector to convert to grids (default to '.grid-stack' class selector)\r\n   *\r\n   * @example\r\n   * let grids = GridStack.initAll();\r\n   * grids.forEach(...)\r\n   */\r\n  public static initAll(options: GridStackOptions = {}, selector = '.grid-stack'): GridStack[] {\r\n    let grids: GridStack[] = [];\r\n    GridStack.getGridElements(selector).forEach(el => {\r\n      if (!el.gridstack) {\r\n        el.gridstack = new GridStack(el, Utils.cloneDeep(options));\r\n      }\r\n      grids.push(el.gridstack);\r\n    });\r\n    if (grids.length === 0) {\r\n      console.error('GridStack.initAll() no grid was found with selector \"' + selector + '\" - element missing or wrong selector ?' +\r\n      '\\nNote: \".grid-stack\" is required for proper CSS styling and drag/drop, and is the default selector.');\r\n    }\r\n    return grids;\r\n  }\r\n\r\n  /**\r\n   * call to create a grid with the given options, including loading any children from JSON structure. This will call GridStack.init(), then\r\n   * grid.load() on any passed children (recursively). Great alternative to calling init() if you want entire grid to come from\r\n   * JSON serialized data, including options.\r\n   * @param parent HTML element parent to the grid\r\n   * @param opt grids options used to initialize the grid, and list of children\r\n   */\r\n  public static addGrid(parent: HTMLElement, opt: GridStackOptions = {}): GridStack {\r\n    if (!parent) return null;\r\n\r\n    let el = parent as GridHTMLElement;\r\n    if (el.gridstack) {\r\n      // already a grid - set option and load data\r\n      const grid = el.gridstack;\r\n      if (opt) grid.opts = {...grid.opts, ...opt};\r\n      if (opt.children !== undefined) grid.load(opt.children);\r\n      return grid;\r\n    }\r\n\r\n    // create the grid element, but check if the passed 'parent' already has grid styling and should be used instead\r\n    const parentIsGrid = parent.classList.contains('grid-stack');\r\n    if (!parentIsGrid || GridStack.addRemoveCB) {\r\n      if (GridStack.addRemoveCB) {\r\n        el = GridStack.addRemoveCB(parent, opt, true, true);\r\n      } else {\r\n        let doc = document.implementation.createHTMLDocument(''); // IE needs a param\r\n        doc.body.innerHTML = `<div class=\"grid-stack ${opt.class || ''}\"></div>`;\r\n        el = doc.body.children[0] as HTMLElement;\r\n        parent.appendChild(el);\r\n      }\r\n    }\r\n\r\n    // create grid class and load any children\r\n    let grid = GridStack.init(opt, el);\r\n    return grid;\r\n  }\r\n\r\n  /** call this method to register your engine instead of the default one.\r\n   * See instead `GridStackOptions.engineClass` if you only need to\r\n   * replace just one instance.\r\n   */\r\n  static registerEngine(engineClass: typeof GridStackEngine): void {\r\n    GridStack.engineClass = engineClass;\r\n  }\r\n\r\n  /**\r\n   * callback method use when new items|grids needs to be created or deleted, instead of the default\r\n   * item: <div class=\"grid-stack-item\"><div class=\"grid-stack-item-content\">w.content</div></div>\r\n   * grid: <div class=\"grid-stack\">grid content...</div>\r\n   * add = true: the returned DOM element will then be converted to a GridItemHTMLElement using makeWidget()|GridStack:init().\r\n   * add = false: the item will be removed from DOM (if not already done)\r\n   * grid = true|false for grid vs grid-items\r\n   */\r\n  public static addRemoveCB?: AddRemoveFcn;\r\n\r\n  /**\r\n   * callback during saving to application can inject extra data for each widget, on top of the grid layout properties\r\n   */\r\n  public static saveCB?: SaveFcn;\r\n\r\n  /** scoping so users can call GridStack.Utils.sort() for example */\r\n  public static Utils = Utils;\r\n\r\n  /** scoping so users can call new GridStack.Engine(12) for example */\r\n  public static Engine = GridStackEngine;\r\n\r\n  /** the HTML element tied to this grid after it's been initialized */\r\n  public el: GridHTMLElement;\r\n\r\n  /** engine used to implement non DOM grid functionality */\r\n  public engine: GridStackEngine;\r\n\r\n  /** grid options - public for classes to access, but use methods to modify! */\r\n  public opts: GridStackOptions;\r\n\r\n  /** point to a parent grid item if we're nested (inside a grid-item in between 2 Grids) */\r\n  public parentGridItem?: GridStackNode;\r\n\r\n  protected static engineClass: typeof GridStackEngine;\r\n\r\n  /** @internal unique class name for our generated CSS style sheet */\r\n  protected _styleSheetClass?: string;\r\n  /** @internal true if we got created by drag over gesture, so we can removed on drag out (temporary) */\r\n  public _isTemp?: boolean;\r\n\r\n  /** @internal create placeholder DIV as needed */\r\n  public get placeholder(): HTMLElement {\r\n    if (!this._placeholder) {\r\n      let placeholderChild = document.createElement('div'); // child so padding match item-content\r\n      placeholderChild.className = 'placeholder-content';\r\n      if (this.opts.placeholderText) {\r\n        placeholderChild.innerHTML = this.opts.placeholderText;\r\n      }\r\n      this._placeholder = document.createElement('div');\r\n      this._placeholder.classList.add(this.opts.placeholderClass, gridDefaults.itemClass, this.opts.itemClass);\r\n      this.placeholder.appendChild(placeholderChild);\r\n    }\r\n    return this._placeholder;\r\n  }\r\n  /** @internal */\r\n  protected _placeholder: HTMLElement;\r\n  /** @internal */\r\n  protected _prevColumn: number;\r\n  /** @internal prevent cached layouts from being updated when loading into small column layouts */\r\n  protected _ignoreLayoutsNodeChange: boolean;\r\n  /** @internal */\r\n  public _gsEventHandler = {};\r\n  /** @internal */\r\n  protected _styles: GridCSSStyleSheet;\r\n  /** @internal flag to keep cells square during resize */\r\n  protected _isAutoCellHeight: boolean;\r\n  /** @internal track event binding to window resize so we can remove */\r\n  protected _windowResizeBind: () => void;\r\n  /** @internal limit auto cell resizing method */\r\n  protected _cellHeightThrottle: () => void;\r\n  /** @internal true when loading items to insert first rather than append */\r\n  protected _insertNotAppend: boolean;\r\n  /** @internal extra row added when dragging at the bottom of the grid */\r\n  protected _extraDragRow = 0;\r\n  /** @internal true if nested grid should get column count from our width */\r\n  protected _autoColumn?: boolean;\r\n\r\n  /**\r\n   * Construct a grid item from the given element and options\r\n   * @param el\r\n   * @param opts\r\n   */\r\n  public constructor(el: GridHTMLElement, opts: GridStackOptions = {}) {\r\n    this.el = el; // exposed HTML element to the user\r\n    opts = opts || {}; // handles null/undefined/0\r\n\r\n    if (!el.classList.contains('grid-stack')) {\r\n      this.el.classList.add('grid-stack');\r\n    }\r\n\r\n    // if row property exists, replace minRow and maxRow instead\r\n    if (opts.row) {\r\n      opts.minRow = opts.maxRow = opts.row;\r\n      delete opts.row;\r\n    }\r\n    let rowAttr = Utils.toNumber(el.getAttribute('gs-row'));\r\n\r\n    // flag only valid in sub-grids (handled by parent, not here)\r\n    if (opts.column === 'auto') {\r\n      delete opts.column;\r\n    }\r\n    // save original setting so we can restore on save\r\n    if (opts.alwaysShowResizeHandle !== undefined) {\r\n      (opts as InternalGridStackOptions)._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;\r\n    }\r\n\r\n    // elements DOM attributes override any passed options (like CSS style) - merge the two together\r\n    let defaults: GridStackOptions = {...Utils.cloneDeep(gridDefaults),\r\n      column: Utils.toNumber(el.getAttribute('gs-column')) || gridDefaults.column,\r\n      minRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-min-row')) || gridDefaults.minRow,\r\n      maxRow: rowAttr ? rowAttr : Utils.toNumber(el.getAttribute('gs-max-row')) || gridDefaults.maxRow,\r\n      staticGrid: Utils.toBool(el.getAttribute('gs-static')) || gridDefaults.staticGrid,\r\n      draggable: {\r\n        handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || gridDefaults.draggable.handle,\r\n      },\r\n      removableOptions: {\r\n        accept: opts.itemClass || gridDefaults.removableOptions.accept,\r\n        decline: gridDefaults.removableOptions.decline\r\n      },\r\n    };\r\n    if (el.getAttribute('gs-animate')) { // default to true, but if set to false use that instead\r\n      defaults.animate = Utils.toBool(el.getAttribute('gs-animate'))\r\n    }\r\n\r\n    this.opts = Utils.defaults(opts, defaults);\r\n    opts = null; // make sure we use this.opts instead\r\n    this._initMargin(); // part of settings defaults...\r\n\r\n    // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)\r\n    if (this.opts.column !== 1 && !this.opts.disableOneColumnMode && this._widthOrContainer() <= this.opts.oneColumnSize) {\r\n      this._prevColumn = this.getColumn();\r\n      this.opts.column = 1;\r\n    }\r\n\r\n    if (this.opts.rtl === 'auto') {\r\n      this.opts.rtl = (el.style.direction === 'rtl');\r\n    }\r\n    if (this.opts.rtl) {\r\n      this.el.classList.add('grid-stack-rtl');\r\n    }\r\n\r\n    // check if we're been nested, and if so update our style and keep pointer around (used during save)\r\n    let parentGridItem = (Utils.closestUpByClass(this.el, gridDefaults.itemClass) as GridItemHTMLElement)?.gridstackNode;\r\n    if (parentGridItem) {\r\n      parentGridItem.subGrid = this;\r\n      this.parentGridItem = parentGridItem;\r\n      this.el.classList.add('grid-stack-nested');\r\n      parentGridItem.el.classList.add('grid-stack-sub-grid');\r\n    }\r\n\r\n    this._isAutoCellHeight = (this.opts.cellHeight === 'auto');\r\n    if (this._isAutoCellHeight || this.opts.cellHeight === 'initial') {\r\n      // make the cell content square initially (will use resize/column event to keep it square)\r\n      this.cellHeight(undefined, false);\r\n    } else {\r\n      // append unit if any are set\r\n      if (typeof this.opts.cellHeight == 'number' && this.opts.cellHeightUnit && this.opts.cellHeightUnit !== gridDefaults.cellHeightUnit) {\r\n        this.opts.cellHeight = this.opts.cellHeight + this.opts.cellHeightUnit;\r\n        delete this.opts.cellHeightUnit;\r\n      }\r\n      this.cellHeight(this.opts.cellHeight, false);\r\n    }\r\n\r\n    // see if we need to adjust auto-hide\r\n    if (this.opts.alwaysShowResizeHandle === 'mobile') {\r\n      this.opts.alwaysShowResizeHandle = isTouch;\r\n    }\r\n\r\n    this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;\r\n    this.el.classList.add(this._styleSheetClass);\r\n\r\n    this._setStaticClass();\r\n\r\n    let engineClass = this.opts.engineClass || GridStack.engineClass || GridStackEngine;\r\n    this.engine = new engineClass({\r\n      column: this.getColumn(),\r\n      float: this.opts.float,\r\n      maxRow: this.opts.maxRow,\r\n      onChange: (cbNodes) => {\r\n        let maxH = 0;\r\n        this.engine.nodes.forEach(n => { maxH = Math.max(maxH, n.y + n.h) });\r\n        cbNodes.forEach(n => {\r\n          let el = n.el;\r\n          if (!el) return;\r\n          if (n._removeDOM) {\r\n            if (el) el.remove();\r\n            delete n._removeDOM;\r\n          } else {\r\n            this._writePosAttr(el, n);\r\n          }\r\n        });\r\n        this._updateStyles(false, maxH); // false = don't recreate, just append if need be\r\n      }\r\n    });\r\n\r\n    if (this.opts.auto) {\r\n      this.batchUpdate(); // prevent in between re-layout #1535 TODO: this only set float=true, need to prevent collision check...\r\n      this.getGridItems().forEach(el => this._prepareElement(el));\r\n      this.batchUpdate(false);\r\n    }\r\n\r\n    // load any passed in children as well, which overrides any DOM layout done above\r\n    if (this.opts.children) {\r\n      let children = this.opts.children;\r\n      delete this.opts.children;\r\n      if (children.length) this.load(children); // don't load empty\r\n    }\r\n\r\n    this.setAnimation(this.opts.animate);\r\n\r\n    this._updateStyles();\r\n    this.el.classList.add('gs-' + this.opts.column);\r\n\r\n    // dynamic grids require pausing during drag to detect over to nest vs push\r\n    if (this.opts.subGridDynamic && !DDManager.pauseDrag) DDManager.pauseDrag = true;\r\n    if (this.opts.draggable?.pause !== undefined) DDManager.pauseDrag = this.opts.draggable.pause;\r\n\r\n    this._setupRemoveDrop();\r\n    this._setupAcceptWidget();\r\n    this._updateWindowResizeEvent();\r\n  }\r\n\r\n  /**\r\n   * add a new widget and returns it.\r\n   *\r\n   * Widget will be always placed even if result height is more than actual grid height.\r\n   * You need to use `willItFit()` before calling addWidget for additional check.\r\n   * See also `makeWidget()`.\r\n   *\r\n   * @example\r\n   * let grid = GridStack.init();\r\n   * grid.addWidget({w: 3, content: 'hello'});\r\n   * grid.addWidget('<div class=\"grid-stack-item\"><div class=\"grid-stack-item-content\">hello</div></div>', {w: 3});\r\n   *\r\n   * @param el  GridStackWidget (which can have content string as well), html element, or string definition to add\r\n   * @param options widget position/size options (optional, and ignore if first param is already option) - see GridStackWidget\r\n   */\r\n  public addWidget(els?: GridStackWidget | GridStackElement, options?: GridStackWidget): GridItemHTMLElement {\r\n    function isGridStackWidget(w: GridStackNode): w is GridStackNode { // https://medium.com/ovrsea/checking-the-type-of-an-object-in-typescript-the-type-guards-24d98d9119b0\r\n      return w.el !== undefined || w.x !== undefined || w.y !== undefined || w.w !== undefined || w.h !== undefined || w.content !== undefined ? true : false;\r\n    }\r\n\r\n    let el: GridItemHTMLElement;\r\n    let node: GridStackNode;\r\n    if (typeof els === 'string') {\r\n      let doc = document.implementation.createHTMLDocument(''); // IE needs a param\r\n      doc.body.innerHTML = els;\r\n      el = doc.body.children[0] as HTMLElement;\r\n    } else if (arguments.length === 0 || arguments.length === 1 && isGridStackWidget(els)) {\r\n      node = options = els;\r\n      if (node?.el) {\r\n        el = node.el; // re-use element stored in the node\r\n      } else if (GridStack.addRemoveCB) {\r\n        el = GridStack.addRemoveCB(this.el, options, true, false);\r\n      } else {\r\n        let content = options?.content || '';\r\n        let doc = document.implementation.createHTMLDocument(''); // IE needs a param\r\n        doc.body.innerHTML = `<div class=\"grid-stack-item ${this.opts.itemClass || ''}\"><div class=\"grid-stack-item-content\">${content}</div></div>`;\r\n        el = doc.body.children[0] as HTMLElement;\r\n      }\r\n    } else {\r\n      el = els as HTMLElement;\r\n    }\r\n\r\n    if (!el) return;\r\n\r\n    // if the caller ended up initializing the widget in addRemoveCB, or we stared with one already, skip the rest\r\n    node = el.gridstackNode;\r\n    if (node && el.parentElement === this.el && this.engine.nodes.find(n => n._id === node._id)) return el;\r\n\r\n    // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos\r\n    // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.\r\n    // So make sure we load any DOM attributes that are not specified in passed in options (which override)\r\n    let domAttr = this._readAttr(el);\r\n    options = Utils.cloneDeep(options) || {};  // make a copy before we modify in case caller re-uses it\r\n    Utils.defaults(options, domAttr);\r\n    node = this.engine.prepareNode(options);\r\n    this._writeAttr(el, options);\r\n\r\n    if (this._insertNotAppend) {\r\n      this.el.prepend(el);\r\n    } else {\r\n      this.el.appendChild(el);\r\n    }\r\n\r\n    this.makeWidget(el, options);\r\n\r\n    return el;\r\n  }\r\n\r\n  /**\r\n   * Convert an existing gridItem element into a sub-grid with the given (optional) options, else inherit them\r\n   * from the parent's subGrid options.\r\n   * @param el gridItem element to convert\r\n   * @param ops (optional) sub-grid options, else default to node, then parent settings, else defaults\r\n   * @param nodeToAdd (optional) node to add to the newly created sub grid (used when dragging over existing regular item)\r\n   * @returns newly created grid\r\n   */\r\n  public makeSubGrid(el: GridItemHTMLElement, ops?: GridStackOptions, nodeToAdd?: GridStackNode, saveContent = true): GridStack {\r\n    let node = el.gridstackNode;\r\n    if (!node) {\r\n      node = this.makeWidget(el).gridstackNode;\r\n    }\r\n    if (node.subGrid?.el) return node.subGrid; // already done\r\n\r\n    // find the template subGrid stored on a parent as fallback...\r\n    let subGridTemplate: GridStackOptions; // eslint-disable-next-line @typescript-eslint/no-this-alias\r\n    let grid: GridStack = this;\r\n    while (grid && !subGridTemplate) {\r\n      subGridTemplate = grid.opts?.subGridOpts;\r\n      grid = grid.parentGridItem?.grid;\r\n    }\r\n    //... and set the create options\r\n    ops = Utils.cloneDeep({...(subGridTemplate || {}), children: undefined, ...(ops || node.subGridOpts)});\r\n    node.subGridOpts = ops;\r\n\r\n    // if column special case it set, remember that flag and set default\r\n    let autoColumn: boolean;\r\n    if (ops.column === 'auto') {\r\n      autoColumn = true;\r\n      ops.column = Math.max(node.w || 1, nodeToAdd?.w || 1);\r\n      ops.disableOneColumnMode = true; // driven by parent\r\n    }\r\n\r\n    // if we're converting an existing full item, move over the content to be the first sub item in the new grid\r\n    let content = node.el.querySelector('.grid-stack-item-content') as HTMLElement;\r\n    let newItem: HTMLElement;\r\n    let newItemOpt: GridStackNode;\r\n    if (saveContent) {\r\n      this._removeDD(node.el); // remove D&D since it's set on content div\r\n      newItemOpt = {...node, x:0, y:0};\r\n      Utils.removeInternalForSave(newItemOpt);\r\n      delete newItemOpt.subGridOpts;\r\n      if (node.content) {\r\n        newItemOpt.content = node.content;\r\n        delete node.content;\r\n      }\r\n      if (GridStack.addRemoveCB) {\r\n        newItem = GridStack.addRemoveCB(this.el, newItemOpt, true, false);\r\n      } else {\r\n        let doc = document.implementation.createHTMLDocument(''); // IE needs a param\r\n        doc.body.innerHTML = `<div class=\"grid-stack-item\"></div>`;\r\n        newItem = doc.body.children[0] as HTMLElement;\r\n        newItem.appendChild(content);\r\n        doc.body.innerHTML = `<div class=\"grid-stack-item-content\"></div>`;\r\n        content = doc.body.children[0] as HTMLElement;\r\n        node.el.appendChild(content);\r\n      }\r\n      this._prepareDragDropByNode(node); // ... and restore original D&D\r\n    }\r\n\r\n    // if we're adding an additional item, make the container large enough to have them both\r\n    if (nodeToAdd) {\r\n      let w = autoColumn ? ops.column : node.w;\r\n      let h = node.h + nodeToAdd.h;\r\n      let style = node.el.style;\r\n      style.transition = 'none'; // show up instantly so we don't see scrollbar with nodeToAdd\r\n      this.update(node.el, {w, h});\r\n      setTimeout(() =>  style.transition = null); // recover animation\r\n    }\r\n\r\n    let subGrid = node.subGrid = GridStack.addGrid(content, ops);\r\n    if (nodeToAdd?._moving) subGrid._isTemp = true; // prevent re-nesting as we add over\r\n    if (autoColumn) subGrid._autoColumn = true;\r\n\r\n    // add the original content back as a child of hte newly created grid\r\n    if (saveContent) {\r\n      subGrid.addWidget(newItem, newItemOpt);\r\n    }\r\n\r\n    // now add any additional node\r\n    if (nodeToAdd) {\r\n      if (nodeToAdd._moving) {\r\n        // create an artificial event even for the just created grid to receive this item\r\n        window.setTimeout(() => Utils.simulateMouseEvent(nodeToAdd._event, 'mouseenter', subGrid.el), 0);\r\n      } else {\r\n        subGrid.addWidget(node.el, node);\r\n      }\r\n    }\r\n    return subGrid;\r\n  }\r\n\r\n  /**\r\n   * called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back\r\n   * to the original grid-item. Also called to remove empty sub-grids when last item is dragged out (since re-creating is simple)\r\n   */\r\n  public removeAsSubGrid(nodeThatRemoved?: GridStackNode): void {\r\n    let pGrid = this.parentGridItem?.grid;\r\n    if (!pGrid) return;\r\n\r\n    pGrid.batchUpdate();\r\n    pGrid.removeWidget(this.parentGridItem.el, true, true);\r\n    this.engine.nodes.forEach(n => {\r\n      // migrate any children over and offsetting by our location\r\n      n.x += this.parentGridItem.x;\r\n      n.y += this.parentGridItem.y;\r\n      pGrid.addWidget(n.el, n);\r\n    });\r\n    pGrid.batchUpdate(false);\r\n    if (this.parentGridItem) delete this.parentGridItem.subGrid;\r\n    delete this.parentGridItem;\r\n\r\n    // create an artificial event for the original grid now that this one is gone (got a leave, but won't get enter)\r\n    if (nodeThatRemoved) {\r\n      window.setTimeout(() => Utils.simulateMouseEvent(nodeThatRemoved._event, 'mouseenter', pGrid.el), 0);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * saves the current layout returning a list of widgets for serialization which might include any nested grids.\r\n   * @param saveContent if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will\r\n   * be removed.\r\n   * @param saveGridOpt if true (default false), save the grid options itself, so you can call the new GridStack.addGrid()\r\n   * to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.\r\n   * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.\r\n   * @returns list of widgets or full grid option, including .children list of widgets\r\n   */\r\n  public save(saveContent = true, saveGridOpt = false, saveCB = GridStack.saveCB): GridStackWidget[] | GridStackOptions {\r\n    // return copied GridStackWidget (with optionally .el) we can modify at will...\r\n    let list = this.engine.save(saveContent, saveCB);\r\n\r\n    // check for HTML content and nested grids\r\n    list.forEach(n => {\r\n      if (saveContent && n.el && !n.subGrid && !saveCB) { // sub-grid are saved differently, not plain content\r\n        let sub = n.el.querySelector('.grid-stack-item-content');\r\n        n.content = sub ? sub.innerHTML : undefined;\r\n        if (!n.content) delete n.content;\r\n      } else {\r\n        if (!saveContent && !saveCB) { delete n.content; }\r\n        // check for nested grid\r\n        if (n.subGrid?.el) {\r\n          const listOrOpt = n.subGrid.save(saveContent, saveGridOpt, saveCB);\r\n          n.subGridOpts = (saveGridOpt ? listOrOpt : {children: listOrOpt}) as GridStackOptions;\r\n          delete n.subGrid;\r\n        }\r\n      }\r\n      delete n.el;\r\n    });\r\n\r\n    // check if save entire grid options (needed for recursive) + children...\r\n    if (saveGridOpt) {\r\n      let o: InternalGridStackOptions = Utils.cloneDeep(this.opts);\r\n      // delete default values that will be recreated on launch\r\n      if (o.marginBottom === o.marginTop && o.marginRight === o.marginLeft && o.marginTop === o.marginRight) {\r\n        o.margin = o.marginTop;\r\n        delete o.marginTop; delete o.marginRight; delete o.marginBottom; delete o.marginLeft;\r\n      }\r\n      if (o.rtl === (this.el.style.direction === 'rtl')) { o.rtl = 'auto' }\r\n      if (this._isAutoCellHeight) {\r\n        o.cellHeight = 'auto'\r\n      }\r\n      if (this._autoColumn) {\r\n        o.column = 'auto';\r\n        delete o.disableOneColumnMode;\r\n      }\r\n      const origShow = o._alwaysShowResizeHandle;\r\n      delete o._alwaysShowResizeHandle;\r\n      if (origShow !== undefined) {\r\n        o.alwaysShowResizeHandle = origShow;\r\n      } else {\r\n        delete o.alwaysShowResizeHandle;\r\n      }\r\n      Utils.removeInternalAndSame(o, gridDefaults);\r\n      o.children = list;\r\n      return o;\r\n    }\r\n\r\n    return list;\r\n  }\r\n\r\n  /**\r\n   * load the widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.\r\n   *\r\n   * @param layout list of widgets definition to update/create\r\n   * @param addAndRemove boolean (default true) or callback method can be passed to control if and how missing widgets can be added/removed, giving\r\n   * the user control of insertion.\r\n   *\r\n   * @example\r\n   * see http://gridstackjs.com/demo/serialization.html\r\n   **/\r\n  public load(layout: GridStackWidget[], addRemove: boolean | AddRemoveFcn = GridStack.addRemoveCB || true): GridStack {\r\n    // if passed list has coordinates, use them (insert from end to beginning for conflict resolution) else force widget same order\r\n    const haveCoord = layout.some(w => w.x !== undefined || w.y !== undefined);\r\n    let items = haveCoord ? Utils.sort(layout, -1, this._prevColumn || this.getColumn()) : layout;\r\n    this._insertNotAppend = haveCoord; // if we create in reverse order...\r\n\r\n    // if we're loading a layout into for example 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save\r\n    // the original wanted layout so we can scale back up correctly #1471\r\n    if (this._prevColumn && this._prevColumn !== this.opts.column && items.some(n => ((n.x || 0) + n.w) > (this.opts.column as number))) {\r\n      this._ignoreLayoutsNodeChange = true; // skip layout update\r\n      this.engine.cacheLayout(items, this._prevColumn, true);\r\n    }\r\n\r\n    // if given a different callback, temporally set it as global option so creating will use it\r\n    const prevCB = GridStack.addRemoveCB;\r\n    if (typeof(addRemove) === 'function') GridStack.addRemoveCB = addRemove as AddRemoveFcn;\r\n\r\n    let removed: GridStackNode[] = [];\r\n    this.batchUpdate();\r\n\r\n    // see if any items are missing from new layout and need to be removed first\r\n    if (addRemove) {\r\n      let copyNodes = [...this.engine.nodes]; // don't loop through array you modify\r\n      copyNodes.forEach(n => {\r\n        let item = items.find(w => n.id === w.id);\r\n        if (!item) {\r\n          if (GridStack.addRemoveCB)\r\n            GridStack.addRemoveCB(this.el, n, false, false);\r\n          removed.push(n); // batch keep track\r\n          this.removeWidget(n.el, true, false);\r\n        }\r\n      });\r\n    }\r\n\r\n    // now add/update the widgets - starting with an empty list to reduce collision and add no-coord ones at next available spot\r\n    let copyNodes = this.engine.nodes;\r\n    this.engine.nodes = [];\r\n    items.forEach(w => {\r\n      let item = (w.id !== undefined) ? copyNodes.find(n => n.id === w.id) : undefined;\r\n      if (item) {\r\n        // check if missing coord, in which case find next empty slot with new (or old if missing) sizes\r\n        if (w.autoPosition || w.x === undefined || w.y === undefined) {\r\n          w.w = w.w || item.w;\r\n          w.h = w.h || item.h;\r\n          this.engine.findEmptyPosition(w);\r\n        }\r\n        this.engine.nodes.push(item); // now back to current list...\r\n        this.update(item.el, w);\r\n        if (w.subGridOpts?.children) { // update any sub grid as well\r\n          let sub = item.el.querySelector('.grid-stack') as GridHTMLElement;\r\n          if (sub && sub.gridstack) {\r\n            sub.gridstack.load(w.subGridOpts.children); // TODO: support updating grid options ?\r\n            this._insertNotAppend = true; // got reset by above call\r\n          }\r\n        }\r\n      } else if (addRemove) {\r\n        this.addWidget(w);\r\n      }\r\n    });\r\n\r\n    this.engine.removedNodes = removed;\r\n    this.batchUpdate(false);\r\n\r\n    // after commit, clear that flag\r\n    delete this._ignoreLayoutsNodeChange;\r\n    delete this._insertNotAppend;\r\n    prevCB ? GridStack.addRemoveCB = prevCB : delete GridStack.addRemoveCB;\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)\r\n   * and get a single event callback. You will see no changes until `batchUpdate(false)` is called.\r\n   */\r\n  public batchUpdate(flag = true): GridStack {\r\n    this.engine.batchUpdate(flag);\r\n    if (!flag) {\r\n      this._triggerRemoveEvent();\r\n      this._triggerAddEvent();\r\n      this._triggerChangeEvent();\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Gets current cell height.\r\n   */\r\n  public getCellHeight(forcePixel = false): number {\r\n    if (this.opts.cellHeight && this.opts.cellHeight !== 'auto' &&\r\n       (!forcePixel || !this.opts.cellHeightUnit || this.opts.cellHeightUnit === 'px')) {\r\n      return this.opts.cellHeight as number;\r\n    }\r\n    // else get first cell height\r\n    let el = this.el.querySelector('.' + this.opts.itemClass) as HTMLElement;\r\n    if (el) {\r\n      let height = Utils.toNumber(el.getAttribute('gs-h')) || 1; // since we don't write 1 anymore\r\n      return Math.round(el.offsetHeight / height);\r\n    }\r\n    // else do entire grid and # of rows (but doesn't work if min-height is the actual constrain)\r\n    let rows = parseInt(this.el.getAttribute('gs-current-row'));\r\n    return rows ? Math.round(this.el.getBoundingClientRect().height / rows) : this.opts.cellHeight as number;\r\n  }\r\n\r\n  /**\r\n   * Update current cell height - see `GridStackOptions.cellHeight` for format.\r\n   * This method rebuilds an internal CSS style sheet.\r\n   * Note: You can expect performance issues if call this method too often.\r\n   *\r\n   * @param val the cell height. If not passed (undefined), cells content will be made square (match width minus margin),\r\n   * if pass 0 the CSS will be generated by the application instead.\r\n   * @param update (Optional) if false, styles will not be updated\r\n   *\r\n   * @example\r\n   * grid.cellHeight(100); // same as 100px\r\n   * grid.cellHeight('70px');\r\n   * grid.cellHeight(grid.cellWidth() * 1.2);\r\n   */\r\n  public cellHeight(val?: numberOrString, update = true): GridStack {\r\n\r\n    // if not called internally, check if we're changing mode\r\n    if (update && val !== undefined) {\r\n      if (this._isAutoCellHeight !== (val === 'auto')) {\r\n        this._isAutoCellHeight = (val === 'auto');\r\n        this._updateWindowResizeEvent();\r\n      }\r\n    }\r\n    if (val === 'initial' || val === 'auto') { val = undefined; }\r\n\r\n    // make item content be square\r\n    if (val === undefined) {\r\n      let marginDiff = - (this.opts.marginRight as number) - (this.opts.marginLeft as number)\r\n        + (this.opts.marginTop as number) + (this.opts.marginBottom as number);\r\n      val = this.cellWidth() + marginDiff;\r\n    }\r\n\r\n    let data = Utils.parseHeight(val);\r\n    if (this.opts.cellHeightUnit === data.unit && this.opts.cellHeight === data.h) {\r\n      return this;\r\n    }\r\n    this.opts.cellHeightUnit = data.unit;\r\n    this.opts.cellHeight = data.h;\r\n\r\n    if (update) {\r\n      this._updateStyles(true); // true = force re-create for current # of rows\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /** Gets current cell width. */\r\n  public cellWidth(): number {\r\n    return this._widthOrContainer() / this.getColumn();\r\n  }\r\n  /** return our expected width (or parent) for 1 column check */\r\n  protected _widthOrContainer(): number {\r\n    // use `offsetWidth` or `clientWidth` (no scrollbar) ?\r\n    // https://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively\r\n    return (this.el.clientWidth || this.el.parentElement.clientWidth || window.innerWidth);\r\n  }\r\n\r\n  /**\r\n   * re-layout grid items to reclaim any empty space. Options are:\r\n   * 'list' keep the widget left->right order the same, even if that means leaving an empty slot if things don't fit\r\n   * 'compact' might re-order items to fill any empty space\r\n   * \r\n   * doSort - 'false' to let you do your own sorting ahead in case you need to control a different order. (default to sort)\r\n   **/\r\n  public compact(layout: CompactOptions = 'compact', doSort = true): GridStack {\r\n    this.engine.compact(layout, doSort);\r\n    this._triggerChangeEvent();\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * set the number of columns in the grid. Will update existing widgets to conform to new number of columns,\r\n   * as well as cache the original layout so you can revert back to previous positions without loss.\r\n   * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],\r\n   * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)\r\n   * @param column - Integer > 0 (default 12).\r\n   * @param layout specify the type of re-layout that will happen (position, size, etc...).\r\n   * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column\r\n   */\r\n  public column(column: number, layout: ColumnOptions = 'moveScale'): GridStack {\r\n    if (column < 1 || this.opts.column === column) return this;\r\n    let oldColumn = this.getColumn();\r\n\r\n    // if we go into 1 column mode (which happens if we're sized less than minW unless disableOneColumnMode is on)\r\n    // then remember the original columns so we can restore.\r\n    if (column === 1) {\r\n      this._prevColumn = oldColumn;\r\n    } else {\r\n      delete this._prevColumn;\r\n    }\r\n\r\n    this.el.classList.remove('gs-' + oldColumn);\r\n    this.el.classList.add('gs-' + column);\r\n    this.opts.column = this.engine.column = column;\r\n\r\n    // update the items now - see if the dom order nodes should be passed instead (else default to current list)\r\n    let domNodes: GridStackNode[];\r\n    if (column === 1 && this.opts.oneColumnModeDomSort) {\r\n      domNodes = [];\r\n      this.getGridItems().forEach(el => { // get dom elements in order\r\n        if (el.gridstackNode) { domNodes.push(el.gridstackNode); }\r\n      });\r\n      if (!domNodes.length) { domNodes = undefined; }\r\n    }\r\n    this.engine.columnChanged(oldColumn, column, domNodes, layout);\r\n    if (this._isAutoCellHeight) this.cellHeight();\r\n\r\n    // and trigger our event last...\r\n    this._ignoreLayoutsNodeChange = true; // skip layout update\r\n    this._triggerChangeEvent();\r\n    delete this._ignoreLayoutsNodeChange;\r\n\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * get the number of columns in the grid (default 12)\r\n   */\r\n  public getColumn(): number {\r\n    return this.opts.column as number;\r\n  }\r\n\r\n  /** returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order */\r\n  public getGridItems(): GridItemHTMLElement[] {\r\n    return Array.from(this.el.children)\r\n      .filter((el: HTMLElement) => el.matches('.' + this.opts.itemClass) && !el.matches('.' + this.opts.placeholderClass)) as GridItemHTMLElement[];\r\n  }\r\n\r\n  /**\r\n   * Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.\r\n   * @param removeDOM if `false` grid and items HTML elements will not be removed from the DOM (Optional. Default `true`).\r\n   */\r\n  public destroy(removeDOM = true): GridStack {\r\n    if (!this.el) return; // prevent multiple calls\r\n    this.offAll();\r\n    this._updateWindowResizeEvent(true);\r\n    this.setStatic(true, false); // permanently removes DD but don't set CSS class (we're going away)\r\n    this.setAnimation(false);\r\n    if (!removeDOM) {\r\n      this.removeAll(removeDOM);\r\n      this.el.classList.remove(this._styleSheetClass);\r\n      this.el.removeAttribute('gs-current-row');\r\n    } else {\r\n      this.el.parentNode.removeChild(this.el);\r\n    }\r\n    this._removeStylesheet();\r\n    if (this.parentGridItem) delete this.parentGridItem.subGrid;\r\n    delete this.parentGridItem;\r\n    delete this.opts;\r\n    delete this._placeholder;\r\n    delete this.engine;\r\n    delete this.el.gridstack; // remove circular dependency that would prevent a freeing\r\n    delete this.el;\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)\r\n   */\r\n  public float(val: boolean): GridStack {\r\n    if (this.opts.float !== val) {\r\n      this.opts.float = this.engine.float = val;\r\n      this._triggerChangeEvent();\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * get the current float mode\r\n   */\r\n  public getFloat(): boolean {\r\n    return this.engine.float;\r\n  }\r\n\r\n  /**\r\n   * Get the position of the cell under a pixel on screen.\r\n   * @param position the position of the pixel to resolve in\r\n   * absolute coordinates, as an object with top and left properties\r\n   * @param useDocRelative if true, value will be based on document position vs parent position (Optional. Default false).\r\n   * Useful when grid is within `position: relative` element\r\n   *\r\n   * Returns an object with properties `x` and `y` i.e. the column and row in the grid.\r\n   */\r\n  public getCellFromPixel(position: MousePosition, useDocRelative = false): CellPosition {\r\n    let box = this.el.getBoundingClientRect();\r\n    // console.log(`getBoundingClientRect left: ${box.left} top: ${box.top} w: ${box.w} h: ${box.h}`)\r\n    let containerPos: {top: number, left: number};\r\n    if (useDocRelative) {\r\n      containerPos = {top: box.top + document.documentElement.scrollTop, left: box.left};\r\n      // console.log(`getCellFromPixel scrollTop: ${document.documentElement.scrollTop}`)\r\n    } else {\r\n      containerPos = {top: this.el.offsetTop, left: this.el.offsetLeft}\r\n      // console.log(`getCellFromPixel offsetTop: ${containerPos.left} offsetLeft: ${containerPos.top}`)\r\n    }\r\n    let relativeLeft = position.left - containerPos.left;\r\n    let relativeTop = position.top - containerPos.top;\r\n\r\n    let columnWidth = (box.width / this.getColumn());\r\n    let rowHeight = (box.height / parseInt(this.el.getAttribute('gs-current-row')));\r\n\r\n    return {x: Math.floor(relativeLeft / columnWidth), y: Math.floor(relativeTop / rowHeight)};\r\n  }\r\n\r\n  /** returns the current number of rows, which will be at least `minRow` if set */\r\n  public getRow(): number {\r\n    return Math.max(this.engine.getRow(), this.opts.minRow);\r\n  }\r\n\r\n  /**\r\n   * Checks if specified area is empty.\r\n   * @param x the position x.\r\n   * @param y the position y.\r\n   * @param w the width of to check\r\n   * @param h the height of to check\r\n   */\r\n  public isAreaEmpty(x: number, y: number, w: number, h: number): boolean {\r\n    return this.engine.isAreaEmpty(x, y, w, h);\r\n  }\r\n\r\n  /**\r\n   * If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.\r\n   * If you want gridstack to add the elements for you, use `addWidget()` instead.\r\n   * Makes the given element a widget and returns it.\r\n   * @param els widget or single selector to convert.\r\n   * @param options widget definition to use instead of reading attributes or using default sizing values\r\n   *\r\n   * @example\r\n   * let grid = GridStack.init();\r\n   * grid.el.appendChild('<div id=\"1\" gs-w=\"3\"></div>');\r\n   * grid.el.appendChild('<div id=\"2\"></div>');\r\n   * grid.makeWidget('1');\r\n   * grid.makeWidget('2', {w:2, content: 'hello'});\r\n   */\r\n  public makeWidget(els: GridStackElement, options?: GridStackWidget): GridItemHTMLElement {\r\n    let el = GridStack.getElement(els);\r\n    this._prepareElement(el, true, options);\r\n    this._updateContainerHeight();\r\n\r\n    // see if there is a sub-grid to create\r\n    const node = el.gridstackNode;\r\n    if (node.subGridOpts) {\r\n      this.makeSubGrid(el, node.subGridOpts, undefined, false); // node.subGrid will be used as option in method, no need to pass\r\n    }\r\n\r\n    // if we're adding an item into 1 column (_prevColumn is set only when going to 1) make sure\r\n    // we don't override the larger 12 column layout that was already saved. #1985\r\n    if (this._prevColumn && this.opts.column === 1) {\r\n      this._ignoreLayoutsNodeChange = true;\r\n    }\r\n    this._triggerAddEvent();\r\n    this._triggerChangeEvent();\r\n    delete this._ignoreLayoutsNodeChange;\r\n\r\n    return el;\r\n  }\r\n\r\n  /**\r\n   * Event handler that extracts our CustomEvent data out automatically for receiving custom\r\n   * notifications (see doc for supported events)\r\n   * @param name of the event (see possible values) or list of names space separated\r\n   * @param callback function called with event and optional second/third param\r\n   * (see README documentation for each signature).\r\n   *\r\n   * @example\r\n   * grid.on('added', function(e, items) { log('added ', items)} );\r\n   * or\r\n   * grid.on('added removed change', function(e, items) { log(e.type, items)} );\r\n   *\r\n   * Note: in some cases it is the same as calling native handler and parsing the event.\r\n   * grid.el.addEventListener('added', function(event) { log('added ', event.detail)} );\r\n   *\r\n   */\r\n  public on(name: GridStackEvent, callback: GridStackEventHandlerCallback): GridStack {\r\n    // check for array of names being passed instead\r\n    if (name.indexOf(' ') !== -1) {\r\n      let names = name.split(' ') as GridStackEvent[];\r\n      names.forEach(name => this.on(name, callback));\r\n      return this;\r\n    }\r\n\r\n    if (name === 'change' || name === 'added' || name === 'removed' || name === 'enable' || name === 'disable') {\r\n      // native CustomEvent handlers - cash the generic handlers so we can easily remove\r\n      let noData = (name === 'enable' || name === 'disable');\r\n      if (noData) {\r\n        this._gsEventHandler[name] = (event: Event) => (callback as GridStackEventHandler)(event);\r\n      } else {\r\n        this._gsEventHandler[name] = (event: CustomEvent) => (callback as GridStackNodesHandler)(event, event.detail);\r\n      }\r\n      this.el.addEventListener(name, this._gsEventHandler[name]);\r\n    } else if (name === 'drag' || name === 'dragstart' || name === 'dragstop' || name === 'resizestart' || name === 'resize' || name === 'resizestop' || name === 'dropped') {\r\n      // drag&drop stop events NEED to be call them AFTER we update node attributes so handle them ourself.\r\n      // do same for start event to make it easier...\r\n      this._gsEventHandler[name] = callback;\r\n    } else {\r\n      console.log('GridStack.on(' + name + ') event not supported, but you can still use $(\".grid-stack\").on(...) while jquery-ui is still used internally.');\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * unsubscribe from the 'on' event below\r\n   * @param name of the event (see possible values)\r\n   */\r\n  public off(name: GridStackEvent): GridStack {\r\n    // check for array of names being passed instead\r\n    if (name.indexOf(' ') !== -1) {\r\n      let names = name.split(' ') as GridStackEvent[];\r\n      names.forEach(name => this.off(name));\r\n      return this;\r\n    }\r\n\r\n    if (name === 'change' || name === 'added' || name === 'removed' || name === 'enable' || name === 'disable') {\r\n      // remove native CustomEvent handlers\r\n      if (this._gsEventHandler[name]) {\r\n        this.el.removeEventListener(name, this._gsEventHandler[name]);\r\n      }\r\n    }\r\n    delete this._gsEventHandler[name];\r\n\r\n    return this;\r\n  }\r\n\r\n  /** remove all event handlers */\r\n  public offAll(): GridStack {\r\n    Object.keys(this._gsEventHandler).forEach(key => this.off(key));\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Removes widget from the grid.\r\n   * @param el  widget or selector to modify\r\n   * @param removeDOM if `false` DOM element won't be removed from the tree (Default? true).\r\n   * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).\r\n   */\r\n  public removeWidget(els: GridStackElement, removeDOM = true, triggerEvent = true): GridStack {\r\n    GridStack.getElements(els).forEach(el => {\r\n      if (el.parentElement && el.parentElement !== this.el) return; // not our child!\r\n      let node = el.gridstackNode;\r\n      // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272\r\n      if (!node) {\r\n        node = this.engine.nodes.find(n => el === n.el);\r\n      }\r\n      if (!node) return;\r\n\r\n      if (GridStack.addRemoveCB) {\r\n        GridStack.addRemoveCB(this.el, node, false, false);\r\n      }\r\n\r\n      // remove our DOM data (circular link) and drag&drop permanently\r\n      delete el.gridstackNode;\r\n      this._removeDD(el);\r\n\r\n      this.engine.removeNode(node, removeDOM, triggerEvent);\r\n\r\n      if (removeDOM && el.parentElement) {\r\n        el.remove(); // in batch mode engine.removeNode doesn't call back to remove DOM\r\n      }\r\n    });\r\n    if (triggerEvent) {\r\n      this._triggerRemoveEvent();\r\n      this._triggerChangeEvent();\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Removes all widgets from the grid.\r\n   * @param removeDOM if `false` DOM elements won't be removed from the tree (Default? `true`).\r\n   */\r\n  public removeAll(removeDOM = true): GridStack {\r\n    // always remove our DOM data (circular link) before list gets emptied and drag&drop permanently\r\n    this.engine.nodes.forEach(n => {\r\n      delete n.el.gridstackNode;\r\n      this._removeDD(n.el);\r\n    });\r\n    this.engine.removeAll(removeDOM);\r\n    this._triggerRemoveEvent();\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Toggle the grid animation state.  Toggles the `grid-stack-animate` class.\r\n   * @param doAnimate if true the grid will animate.\r\n   */\r\n  public setAnimation(doAnimate: boolean): GridStack {\r\n    if (doAnimate) {\r\n      this.el.classList.add('grid-stack-animate');\r\n    } else {\r\n      this.el.classList.remove('grid-stack-animate');\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.\r\n   * Also toggle the grid-stack-static class.\r\n   * @param val if true the grid become static.\r\n   * @param updateClass true (default) if css class gets updated\r\n   * @param recurse true (default) if sub-grids also get updated\r\n   */\r\n  public setStatic(val: boolean, updateClass = true, recurse = true): GridStack {\r\n    if (!!this.opts.staticGrid === val) return this;\r\n    val ? this.opts.staticGrid = true : delete this.opts.staticGrid;\r\n    this._setupRemoveDrop();\r\n    this._setupAcceptWidget();\r\n    this.engine.nodes.forEach(n => {\r\n      this._prepareDragDropByNode(n); // either delete or init Drag&drop\r\n      if (n.subGrid && recurse) n.subGrid.setStatic(val, updateClass, recurse);\r\n    });\r\n    if (updateClass) { this._setStaticClass(); }\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Updates widget position/size and other info. Note: if you need to call this on all nodes, use load() instead which will update what changed.\r\n   * @param els  widget or selector of objects to modify (note: setting the same x,y for multiple items will be indeterministic and likely unwanted)\r\n   * @param opt new widget options (x,y,w,h, etc..). Only those set will be updated.\r\n   */\r\n  public update(els: GridStackElement, opt: GridStackWidget): GridStack {\r\n\r\n    // support legacy call for now ?\r\n    if (arguments.length > 2) {\r\n      console.warn('gridstack.ts: `update(el, x, y, w, h)` is deprecated. Use `update(el, {x, w, content, ...})`. It will be removed soon');\r\n      // eslint-disable-next-line prefer-rest-params\r\n      let a = arguments, i = 1;\r\n      opt = { x:a[i++], y:a[i++], w:a[i++], h:a[i++] };\r\n      return this.update(els, opt);\r\n    }\r\n\r\n    GridStack.getElements(els).forEach(el => {\r\n      let n = el?.gridstackNode;\r\n      if (!n) return;\r\n      let w = Utils.cloneDeep(opt); // make a copy we can modify in case they re-use it or multiple items\r\n      delete w.autoPosition;\r\n\r\n      // move/resize widget if anything changed\r\n      let keys = ['x', 'y', 'w', 'h'];\r\n      let m: GridStackWidget;\r\n      if (keys.some(k => w[k] !== undefined && w[k] !== n[k])) {\r\n        m = {};\r\n        keys.forEach(k => {\r\n          m[k] = (w[k] !== undefined) ? w[k] : n[k];\r\n          delete w[k];\r\n        });\r\n      }\r\n      // for a move as well IFF there is any min/max fields set\r\n      if (!m && (w.minW || w.minH || w.maxW || w.maxH)) {\r\n        m = {}; // will use node position but validate values\r\n      }\r\n\r\n      // check for content changing\r\n      if (w.content !== undefined) {\r\n        const itemContent = el.querySelector('.grid-stack-item-content');\r\n        if (!itemContent || itemContent.innerHTML === w.content) return;\r\n        itemContent.innerHTML = w.content;\r\n        // restore any sub-grid back\r\n        if (n.subGrid?.el) {\r\n          itemContent.appendChild(n.subGrid.el);\r\n          if (!n.subGrid.opts.styleInHead) n.subGrid._updateStyles(true); // force create\r\n        }\r\n        delete w.content;\r\n      }\r\n\r\n      // any remaining fields are assigned, but check for dragging changes, resize constrain\r\n      let changed = false;\r\n      let ddChanged = false;\r\n      for (const key in w) {\r\n        if (key[0] !== '_' && n[key] !== w[key]) {\r\n          n[key] = w[key];\r\n          changed = true;\r\n          ddChanged = ddChanged || (!this.opts.staticGrid && (key === 'noResize' || key === 'noMove' || key === 'locked'));\r\n        }\r\n      }\r\n      Utils.sanitizeMinMax(n);\r\n\r\n      // finally move the widget\r\n      if (m) {\r\n        this.engine.cleanNodes()\r\n          .beginUpdate(n)\r\n          .moveNode(n, m);\r\n        this._updateContainerHeight();\r\n        this._triggerChangeEvent();\r\n        this.engine.endUpdate();\r\n      }\r\n      if (changed) { // move will only update x,y,w,h so update the rest too\r\n        this._writeAttr(el, n);\r\n      }\r\n      if (ddChanged) {\r\n        this._prepareDragDropByNode(n);\r\n      }\r\n    });\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options (CSS string format of 1,2,4 values or single number).\r\n   * @param value margin value\r\n   */\r\n  public margin(value: numberOrString): GridStack {\r\n    let isMultiValue = (typeof value === 'string' && value.split(' ').length > 1);\r\n    // check if we can skip re-creating our CSS file... won't check if multi values (too much hassle)\r\n    if (!isMultiValue) {\r\n      let data = Utils.parseHeight(value);\r\n      if (this.opts.marginUnit === data.unit && this.opts.margin === data.h) return;\r\n    }\r\n    // re-use existing margin handling\r\n    this.opts.margin = value;\r\n    this.opts.marginTop = this.opts.marginBottom = this.opts.marginLeft = this.opts.marginRight = undefined;\r\n    this._initMargin();\r\n\r\n    this._updateStyles(true); // true = force re-create\r\n\r\n    return this;\r\n  }\r\n\r\n  /** returns current margin number value (undefined if 4 sides don't match) */\r\n  public getMargin(): number { return this.opts.margin as number; }\r\n\r\n  /**\r\n   * Returns true if the height of the grid will be less than the vertical\r\n   * constraint. Always returns true if grid doesn't have height constraint.\r\n   * @param node contains x,y,w,h,auto-position options\r\n   *\r\n   * @example\r\n   * if (grid.willItFit(newWidget)) {\r\n   *   grid.addWidget(newWidget);\r\n   * } else {\r\n   *   alert('Not enough free space to place the widget');\r\n   * }\r\n   */\r\n  public willItFit(node: GridStackWidget): boolean {\r\n    // support legacy call for now\r\n    if (arguments.length > 1) {\r\n      console.warn('gridstack.ts: `willItFit(x,y,w,h,autoPosition)` is deprecated. Use `willItFit({x, y,...})`. It will be removed soon');\r\n      // eslint-disable-next-line prefer-rest-params\r\n      let a = arguments, i = 0,\r\n        w: GridStackWidget = { x:a[i++], y:a[i++], w:a[i++], h:a[i++], autoPosition:a[i++] };\r\n      return this.willItFit(w);\r\n    }\r\n    return this.engine.willItFit(node);\r\n  }\r\n\r\n  /** @internal */\r\n  protected _triggerChangeEvent(): GridStack {\r\n    if (this.engine.batchMode) return this;\r\n    let elements = this.engine.getDirtyNodes(true); // verify they really changed\r\n    if (elements && elements.length) {\r\n      if (!this._ignoreLayoutsNodeChange) {\r\n        this.engine.layoutsNodesChange(elements);\r\n      }\r\n      this._triggerEvent('change', elements);\r\n    }\r\n    this.engine.saveInitial(); // we called, now reset initial values & dirty flags\r\n    return this;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _triggerAddEvent(): GridStack {\r\n    if (this.engine.batchMode) return this;\r\n    if (this.engine.addedNodes?.length) {\r\n      if (!this._ignoreLayoutsNodeChange) {\r\n        this.engine.layoutsNodesChange(this.engine.addedNodes);\r\n      }\r\n      // prevent added nodes from also triggering 'change' event (which is called next)\r\n      this.engine.addedNodes.forEach(n => { delete n._dirty; });\r\n      this._triggerEvent('added', this.engine.addedNodes);\r\n      this.engine.addedNodes = [];\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /** @internal */\r\n  public _triggerRemoveEvent(): GridStack {\r\n    if (this.engine.batchMode) return this;\r\n    if (this.engine.removedNodes?.length) {\r\n      this._triggerEvent('removed', this.engine.removedNodes);\r\n      this.engine.removedNodes = [];\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _triggerEvent(type: string, data?: GridStackNode[]): GridStack {\r\n    let event = data ? new CustomEvent(type, {bubbles: false, detail: data}) : new Event(type);\r\n    this.el.dispatchEvent(event);\r\n    return this;\r\n  }\r\n\r\n  /** @internal called to delete the current dynamic style sheet used for our layout */\r\n  protected _removeStylesheet(): GridStack {\r\n\r\n    if (this._styles) {\r\n      Utils.removeStylesheet(this._styleSheetClass);\r\n      delete this._styles;\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /** @internal updated/create the CSS styles for row based layout and initial margin setting */\r\n  protected _updateStyles(forceUpdate = false, maxH?: number): GridStack {\r\n    // call to delete existing one if we change cellHeight / margin\r\n    if (forceUpdate) {\r\n      this._removeStylesheet();\r\n    }\r\n\r\n    if (!maxH) maxH = this.getRow();\r\n    this._updateContainerHeight();\r\n\r\n    // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??\r\n    if (this.opts.cellHeight === 0) {\r\n      return this;\r\n    }\r\n\r\n    let cellHeight = this.opts.cellHeight as number;\r\n    let cellHeightUnit = this.opts.cellHeightUnit;\r\n    let prefix = `.${this._styleSheetClass} > .${this.opts.itemClass}`;\r\n\r\n    // create one as needed\r\n    if (!this._styles) {\r\n      // insert style to parent (instead of 'head' by default) to support WebComponent\r\n      let styleLocation = this.opts.styleInHead ? undefined : this.el.parentNode as HTMLElement;\r\n      this._styles = Utils.createStylesheet(this._styleSheetClass, styleLocation, {\r\n        nonce: this.opts.nonce,\r\n      });\r\n      if (!this._styles) return this;\r\n      this._styles._max = 0;\r\n\r\n      // these are done once only\r\n      Utils.addCSSRule(this._styles, prefix, `height: ${cellHeight}${cellHeightUnit}`);\r\n      // content margins\r\n      let top: string = this.opts.marginTop + this.opts.marginUnit;\r\n      let bottom: string = this.opts.marginBottom + this.opts.marginUnit;\r\n      let right: string = this.opts.marginRight + this.opts.marginUnit;\r\n      let left: string = this.opts.marginLeft + this.opts.marginUnit;\r\n      let content = `${prefix} > .grid-stack-item-content`;\r\n      let placeholder = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;\r\n      Utils.addCSSRule(this._styles, content, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);\r\n      Utils.addCSSRule(this._styles, placeholder, `top: ${top}; right: ${right}; bottom: ${bottom}; left: ${left};`);\r\n      // resize handles offset (to match margin)\r\n      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-ne`, `right: ${right}`);\r\n      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-e`, `right: ${right}`);\r\n      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-se`, `right: ${right}; bottom: ${bottom}`);\r\n      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-nw`, `left: ${left}`);\r\n      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-w`, `left: ${left}`);\r\n      Utils.addCSSRule(this._styles, `${prefix} > .ui-resizable-sw`, `left: ${left}; bottom: ${bottom}`);\r\n    }\r\n\r\n    // now update the height specific fields\r\n    maxH = maxH || this._styles._max;\r\n    if (maxH > this._styles._max) {\r\n      let getHeight = (rows: number): string => (cellHeight * rows) + cellHeightUnit;\r\n      for (let i = this._styles._max + 1; i <= maxH; i++) { // start at 1\r\n        Utils.addCSSRule(this._styles, `${prefix}[gs-y=\"${i}\"]`, `top: ${getHeight(i)}`);\r\n        Utils.addCSSRule(this._styles, `${prefix}[gs-h=\"${i+1}\"]`, `height: ${getHeight(i+1)}`); // start at 2\r\n      }\r\n      this._styles._max = maxH;\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateContainerHeight(): GridStack {\r\n    if (!this.engine || this.engine.batchMode) return this;\r\n    let row = this.getRow() + this._extraDragRow; // checks for minRow already\r\n    // check for css min height\r\n    // Note: we don't handle %,rem correctly so comment out, beside we don't need need to create un-necessary\r\n    // rows as the CSS will make us bigger than our set height if needed... not sure why we had this.\r\n    // let cssMinHeight = parseInt(getComputedStyle(this.el)['min-height']);\r\n    // if (cssMinHeight > 0) {\r\n    //   let minRow = Math.round(cssMinHeight / this.getCellHeight(true));\r\n    //   if (row < minRow) {\r\n    //     row = minRow;\r\n    //   }\r\n    // }\r\n    this.el.setAttribute('gs-current-row', String(row));\r\n    if (row === 0) {\r\n      this.el.style.removeProperty('min-height');\r\n      return this;\r\n    }\r\n    let cellHeight = this.opts.cellHeight as number;\r\n    let unit = this.opts.cellHeightUnit;\r\n    if (!cellHeight) return this;\r\n    this.el.style.minHeight = row * cellHeight + unit;\r\n    return this;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _prepareElement(el: GridItemHTMLElement, triggerAddEvent = false, node?: GridStackNode): GridStack {\r\n    el.classList.add(this.opts.itemClass);\r\n    node = node || this._readAttr(el);\r\n    el.gridstackNode = node;\r\n    node.el = el;\r\n    node.grid = this;\r\n    let copy = {...node};\r\n    node = this.engine.addNode(node, triggerAddEvent);\r\n    // write node attr back in case there was collision or we have to fix bad values during addNode()\r\n    if (!Utils.same(node, copy)) {\r\n      this._writeAttr(el, node);\r\n    }\r\n    this._prepareDragDropByNode(node);\r\n    return this;\r\n  }\r\n\r\n  /** @internal call to write position x,y,w,h attributes back to element */\r\n  protected _writePosAttr(el: HTMLElement, n: GridStackPosition): GridStack {\r\n    if (n.x !== undefined && n.x !== null) { el.setAttribute('gs-x', String(n.x)); }\r\n    if (n.y !== undefined && n.y !== null) { el.setAttribute('gs-y', String(n.y)); }\r\n    n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w');\r\n    n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h');\r\n    return this;\r\n  }\r\n\r\n  /** @internal call to write any default attributes back to element */\r\n  protected _writeAttr(el: HTMLElement, node: GridStackWidget): GridStack {\r\n    if (!node) return this;\r\n    this._writePosAttr(el, node);\r\n\r\n    let attrs /*: GridStackWidget but strings */ = { // remaining attributes\r\n      autoPosition: 'gs-auto-position',\r\n      noResize: 'gs-no-resize',\r\n      noMove: 'gs-no-move',\r\n      locked: 'gs-locked',\r\n      id: 'gs-id',\r\n    };\r\n    for (const key in attrs) {\r\n      if (node[key]) { // 0 is valid for x,y only but done above already and not in list anyway\r\n        el.setAttribute(attrs[key], String(node[key]));\r\n      } else {\r\n        el.removeAttribute(attrs[key]);\r\n      }\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /** @internal call to read any default attributes from element */\r\n  protected _readAttr(el: HTMLElement, clearDefaultAttr = true): GridStackWidget {\r\n    let n: GridStackNode = {};\r\n    n.x = Utils.toNumber(el.getAttribute('gs-x'));\r\n    n.y = Utils.toNumber(el.getAttribute('gs-y'));\r\n    n.w = Utils.toNumber(el.getAttribute('gs-w'));\r\n    n.h = Utils.toNumber(el.getAttribute('gs-h'));\r\n    n.autoPosition = Utils.toBool(el.getAttribute('gs-auto-position'));\r\n    n.noResize = Utils.toBool(el.getAttribute('gs-no-resize'));\r\n    n.noMove = Utils.toBool(el.getAttribute('gs-no-move'));\r\n    n.locked = Utils.toBool(el.getAttribute('gs-locked'));\r\n    n.id = el.getAttribute('gs-id');\r\n\r\n    // read but never written out\r\n    n.maxW = Utils.toNumber(el.getAttribute('gs-max-w'));\r\n    n.minW = Utils.toNumber(el.getAttribute('gs-min-w'));\r\n    n.maxH = Utils.toNumber(el.getAttribute('gs-max-h'));\r\n    n.minH = Utils.toNumber(el.getAttribute('gs-min-h'));\r\n\r\n    // v8.x optimization to reduce un-needed attr that don't render or are default CSS\r\n    if (clearDefaultAttr) {\r\n      if (n.w === 1) el.removeAttribute('gs-w');\r\n      if (n.h === 1) el.removeAttribute('gs-h');\r\n      if (n.maxW) el.removeAttribute('gs-max-w');\r\n      if (n.minW) el.removeAttribute('gs-min-w');\r\n      if (n.maxH) el.removeAttribute('gs-max-h');\r\n      if (n.minH) el.removeAttribute('gs-min-h');\r\n    }\r\n\r\n    // remove any key not found (null or false which is default)\r\n    for (const key in n) {\r\n      if (!n.hasOwnProperty(key)) return;\r\n      if (!n[key] && n[key] !== 0) { // 0 can be valid value (x,y only really)\r\n        delete n[key];\r\n      }\r\n    }\r\n\r\n    return n;\r\n  }\r\n\r\n  /** @internal */\r\n  protected _setStaticClass(): GridStack {\r\n    let classes = ['grid-stack-static'];\r\n\r\n    if (this.opts.staticGrid) {\r\n      this.el.classList.add(...classes);\r\n      this.el.setAttribute('gs-static', 'true');\r\n    } else {\r\n      this.el.classList.remove(...classes);\r\n      this.el.removeAttribute('gs-static');\r\n\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * called when we are being resized by the window - check if the one Column Mode needs to be turned on/off\r\n   * and remember the prev columns we used, or get our count from parent, as well as check for auto cell height (square)\r\n   */\r\n  public onParentResize(): GridStack {\r\n    if (!this.el || !this.el.clientWidth) return; // return if we're gone or no size yet (will get called again)\r\n    let changedColumn = false;\r\n\r\n    // see if we're nested and take our column count from our parent....\r\n    if (this._autoColumn && this.parentGridItem) {\r\n      if (this.opts.column !== this.parentGridItem.w) {\r\n        changedColumn = true;\r\n        this.column(this.parentGridItem.w, 'none');\r\n      }\r\n    } else {\r\n      // else check for 1 column in/out behavior\r\n      let oneColumn = !this.opts.disableOneColumnMode && this.el.clientWidth <= this.opts.oneColumnSize;\r\n      if ((this.opts.column === 1) !== oneColumn) {\r\n        changedColumn = true;\r\n        if (this.opts.animate) { this.setAnimation(false); } // 1 <-> 12 is too radical, turn off animation\r\n        this.column(oneColumn ? 1 : this._prevColumn);\r\n        if (this.opts.animate) { this.setAnimation(true); }\r\n      }\r\n    }\r\n\r\n    // make the cells content square again\r\n    if (this._isAutoCellHeight) {\r\n      if (!changedColumn && this.opts.cellHeightThrottle) {\r\n        if (!this._cellHeightThrottle) {\r\n          this._cellHeightThrottle = Utils.throttle(() => this.cellHeight(), this.opts.cellHeightThrottle);\r\n        }\r\n        this._cellHeightThrottle();\r\n      } else {\r\n        // immediate update if we've changed column count or have no threshold\r\n        this.cellHeight();\r\n      }\r\n    }\r\n\r\n    // finally update any nested grids\r\n    this.engine.nodes.forEach(n => {\r\n      if (n.subGrid) n.subGrid.onParentResize()\r\n    });\r\n\r\n    return this;\r\n  }\r\n\r\n  /** add or remove the window size event handler */\r\n  protected _updateWindowResizeEvent(forceRemove = false): GridStack {\r\n    // only add event if we're not nested (parent will call us) and we're auto sizing cells or supporting oneColumn (i.e. doing work)\r\n    const workTodo = (this._isAutoCellHeight || !this.opts.disableOneColumnMode) && !this.parentGridItem;\r\n\r\n    if (!forceRemove && workTodo && !this._windowResizeBind) {\r\n      this._windowResizeBind = this.onParentResize.bind(this); // so we can properly remove later\r\n      window.addEventListener('resize', this._windowResizeBind);\r\n    } else if ((forceRemove || !workTodo) && this._windowResizeBind) {\r\n      window.removeEventListener('resize', this._windowResizeBind);\r\n      delete this._windowResizeBind; // remove link to us so we can free\r\n    }\r\n\r\n    return this;\r\n  }\r\n\r\n  /** @internal convert a potential selector into actual element */\r\n  public static getElement(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement { return Utils.getElement(els) }\r\n  /** @internal */\r\n  public static getElements(els: GridStackElement = '.grid-stack-item'): GridItemHTMLElement[] { return Utils.getElements(els) }\r\n  /** @internal */\r\n  public static getGridElement(els: GridStackElement): GridHTMLElement { return GridStack.getElement(els) }\r\n  /** @internal */\r\n  public static getGridElements(els: string): GridHTMLElement[] { return Utils.getElements(els) }\r\n\r\n  /** @internal initialize margin top/bottom/left/right and units */\r\n  protected _initMargin(): GridStack {\r\n\r\n    let data: HeightData;\r\n    let margin = 0;\r\n\r\n    // support passing multiple values like CSS (ex: '5px 10px 0 20px')\r\n    let margins: string[] = [];\r\n    if (typeof this.opts.margin === 'string') {\r\n      margins = this.opts.margin.split(' ')\r\n    }\r\n    if (margins.length === 2) { // top/bot, left/right like CSS\r\n      this.opts.marginTop = this.opts.marginBottom = margins[0];\r\n      this.opts.marginLeft = this.opts.marginRight = margins[1];\r\n    } else if (margins.length === 4) { // Clockwise like CSS\r\n      this.opts.marginTop = margins[0];\r\n      this.opts.marginRight = margins[1];\r\n      this.opts.marginBottom = margins[2];\r\n      this.opts.marginLeft = margins[3];\r\n    } else {\r\n      data = Utils.parseHeight(this.opts.margin);\r\n      this.opts.marginUnit = data.unit;\r\n      margin = this.opts.margin = data.h;\r\n    }\r\n\r\n    // see if top/bottom/left/right need to be set as well\r\n    if (this.opts.marginTop === undefined) {\r\n      this.opts.marginTop = margin;\r\n    } else {\r\n      data = Utils.parseHeight(this.opts.marginTop);\r\n      this.opts.marginTop = data.h;\r\n      delete this.opts.margin;\r\n    }\r\n\r\n    if (this.opts.marginBottom === undefined) {\r\n      this.opts.marginBottom = margin;\r\n    } else {\r\n      data = Utils.parseHeight(this.opts.marginBottom);\r\n      this.opts.marginBottom = data.h;\r\n      delete this.opts.margin;\r\n    }\r\n\r\n    if (this.opts.marginRight === undefined) {\r\n      this.opts.marginRight = margin;\r\n    } else {\r\n      data = Utils.parseHeight(this.opts.marginRight);\r\n      this.opts.marginRight = data.h;\r\n      delete this.opts.margin;\r\n    }\r\n\r\n    if (this.opts.marginLeft === undefined) {\r\n      this.opts.marginLeft = margin;\r\n    } else {\r\n      data = Utils.parseHeight(this.opts.marginLeft);\r\n      this.opts.marginLeft = data.h;\r\n      delete this.opts.margin;\r\n    }\r\n    this.opts.marginUnit = data.unit; // in case side were spelled out, use those units instead...\r\n    if (this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight) {\r\n      this.opts.margin = this.opts.marginTop; // makes it easier to check for no-ops in setMargin()\r\n    }\r\n    return this;\r\n  }\r\n\r\n  static GDRev = '8.4.0';\r\n\r\n  /* ===========================================================================================\r\n   * drag&drop methods that used to be stubbed out and implemented in dd-gridstack.ts\r\n   * but caused loading issues in prod - see https://github.com/gridstack/gridstack.js/issues/2039\r\n   * ===========================================================================================\r\n   */\r\n\r\n  /** get the global (but static to this code) DD implementation */\r\n  public static getDD(): DDGridStack {\r\n    return dd;\r\n  }\r\n\r\n  /**\r\n   * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.\r\n   * Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar\r\n   * is dynamically create and needs to be set later.\r\n   * @param dragIn string selector (ex: '.sidebar .grid-stack-item') or list of dom elements\r\n   * @param dragInOptions options - see DDDragInOpt. (default: {handle: '.grid-stack-item-content', appendTo: 'body'}\r\n   * @param root optional root which defaults to document (for shadow dom pas the parent HTMLDocument)\r\n   **/\r\n  public static setupDragIn(dragIn?: string | HTMLElement[], dragInOptions?: DDDragInOpt, root: HTMLElement | Document = document): void {\r\n    if (dragInOptions?.pause !== undefined) {\r\n      DDManager.pauseDrag = dragInOptions.pause;\r\n    }\r\n\r\n    dragInOptions = {...dragInDefaultOptions, ...(dragInOptions || {})};\r\n    let els: HTMLElement[] = (typeof dragIn === 'string') ? Utils.getElements(dragIn, root) : dragIn;\r\n    if (els.length) els?.forEach(el => {\r\n      if (!dd.isDraggable(el)) dd.dragIn(el, dragInOptions);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Enables/Disables dragging by the user of specific grid element. If you want all items, and have it affect future items, use enableMove() instead. No-op for static grids.\r\n   * IF you are looking to prevent an item from moving (due to being pushed around by another during collision) use locked property instead.\r\n   * @param els widget or selector to modify.\r\n   * @param val if true widget will be draggable, assuming the parent grid isn't noMove or static.\r\n   */\r\n  public movable(els: GridStackElement, val: boolean): GridStack {\r\n    if (this.opts.staticGrid) return this; // can't move a static grid!\r\n    GridStack.getElements(els).forEach(el => {\r\n      let n = el.gridstackNode;\r\n      if (!n) return;\r\n      val ? delete n.noMove : n.noMove = true;\r\n      this._prepareDragDropByNode(n); // init DD if need be, and adjust\r\n    });\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Enables/Disables user resizing of specific grid element. If you want all items, and have it affect future items, use enableResize() instead. No-op for static grids.\r\n   * @param els  widget or selector to modify\r\n   * @param val  if true widget will be resizable, assuming the parent grid isn't noResize or static.\r\n   */\r\n  public resizable(els: GridStackElement, val: boolean): GridStack {\r\n    if (this.opts.staticGrid) return this; // can't resize a static grid!\r\n    GridStack.getElements(els).forEach(el => {\r\n      let n = el.gridstackNode;\r\n      if (!n) return;\r\n      val ? delete n.noResize : n.noResize = true;\r\n      this._prepareDragDropByNode(n); // init DD if need be, and adjust\r\n    });\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Temporarily disables widgets moving/resizing.\r\n   * If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.\r\n   * Note: no-op for static grid\r\n   * This is a shortcut for:\r\n   * @example\r\n   *  grid.enableMove(false);\r\n   *  grid.enableResize(false);\r\n   * @param recurse true (default) if sub-grids also get updated\r\n   */\r\n  public disable(recurse = true): GridStack {\r\n    if (this.opts.staticGrid) return;\r\n    this.enableMove(false, recurse);\r\n    this.enableResize(false, recurse);\r\n    this._triggerEvent('disable');\r\n    return this;\r\n  }\r\n  /**\r\n   * Re-enables widgets moving/resizing - see disable().\r\n   * Note: no-op for static grid.\r\n   * This is a shortcut for:\r\n   * @example\r\n   *  grid.enableMove(true);\r\n   *  grid.enableResize(true);\r\n   * @param recurse true (default) if sub-grids also get updated\r\n   */\r\n  public enable(recurse = true): GridStack {\r\n    if (this.opts.staticGrid) return;\r\n    this.enableMove(true, recurse);\r\n    this.enableResize(true, recurse);\r\n    this._triggerEvent('enable');\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Enables/disables widget moving. No-op for static grids, and locally defined items still overrule\r\n   * @param recurse true (default) if sub-grids also get updated\r\n   */\r\n  public enableMove(doEnable: boolean, recurse = true): GridStack {\r\n    if (this.opts.staticGrid) return this; // can't move a static grid!\r\n    doEnable ? delete this.opts.disableDrag : this.opts.disableDrag = true; // FIRST before we update children as grid overrides #1658\r\n    this.engine.nodes.forEach(n => {\r\n      this._prepareDragDropByNode(n);\r\n      if (n.subGrid && recurse) n.subGrid.enableMove(doEnable, recurse);\r\n    });\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Enables/disables widget resizing. No-op for static grids.\r\n   * @param recurse true (default) if sub-grids also get updated\r\n   */\r\n  public enableResize(doEnable: boolean, recurse = true): GridStack {\r\n    if (this.opts.staticGrid) return this; // can't size a static grid!\r\n    doEnable ? delete this.opts.disableResize : this.opts.disableResize = true; // FIRST before we update children as grid overrides #1658\r\n    this.engine.nodes.forEach(n => {\r\n      this._prepareDragDropByNode(n);\r\n      if (n.subGrid && recurse) n.subGrid.enableResize(doEnable, recurse);\r\n    });\r\n    return this;\r\n  }\r\n\r\n  /** @internal removes any drag&drop present (called during destroy) */\r\n  protected _removeDD(el: DDElementHost): GridStack {\r\n    dd.draggable(el, 'destroy').resizable(el, 'destroy');\r\n    if (el.gridstackNode) {\r\n      delete el.gridstackNode._initDD; // reset our DD init flag\r\n    }\r\n    delete el.ddElement;\r\n    return this;\r\n  }\r\n\r\n  /** @internal called to add drag over to support widgets being added externally */\r\n  protected _setupAcceptWidget(): GridStack {\r\n\r\n    // check if we need to disable things\r\n    if (this.opts.staticGrid || (!this.opts.acceptWidgets && !this.opts.removable)) {\r\n      dd.droppable(this.el, 'destroy');\r\n      return this;\r\n    }\r\n\r\n    // vars shared across all methods\r\n    let cellHeight: number, cellWidth: number;\r\n\r\n    let onDrag = (event: DragEvent, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {\r\n      let node = el.gridstackNode;\r\n      if (!node) return;\r\n\r\n      helper = helper || el;\r\n      let parent = this.el.getBoundingClientRect();\r\n      let {top, left} = helper.getBoundingClientRect();\r\n      left -= parent.left;\r\n      top -= parent.top;\r\n      let ui: DDUIData = {position: {top, left}};\r\n\r\n      if (node._temporaryRemoved) {\r\n        node.x = Math.max(0, Math.round(left / cellWidth));\r\n        node.y = Math.max(0, Math.round(top / cellHeight));\r\n        delete node.autoPosition;\r\n        this.engine.nodeBoundFix(node);\r\n\r\n        // don't accept *initial* location if doesn't fit #1419 (locked drop region, or can't grow), but maybe try if it will go somewhere\r\n        if (!this.engine.willItFit(node)) {\r\n          node.autoPosition = true; // ignore x,y and try for any slot...\r\n          if (!this.engine.willItFit(node)) {\r\n            dd.off(el, 'drag'); // stop calling us\r\n            return; // full grid or can't grow\r\n          }\r\n          if (node._willFitPos) {\r\n            // use the auto position instead #1687\r\n            Utils.copyPos(node, node._willFitPos);\r\n            delete node._willFitPos;\r\n          }\r\n        }\r\n\r\n        // re-use the existing node dragging method\r\n        this._onStartMoving(helper, event, ui, node, cellWidth, cellHeight);\r\n      } else {\r\n        // re-use the existing node dragging that does so much of the collision detection\r\n        this._dragOrResize(helper, event, ui, node, cellWidth, cellHeight);\r\n      }\r\n    }\r\n\r\n    dd.droppable(this.el, {\r\n      accept: (el: GridItemHTMLElement) => {\r\n        let node: GridStackNode = el.gridstackNode;\r\n        // set accept drop to true on ourself (which we ignore) so we don't get \"can't drop\" icon in HTML5 mode while moving\r\n        if (node?.grid === this) return true;\r\n        if (!this.opts.acceptWidgets) return false;\r\n        // check for accept method or class matching\r\n        let canAccept = true;\r\n        if (typeof this.opts.acceptWidgets === 'function') {\r\n          canAccept = this.opts.acceptWidgets(el);\r\n        } else {\r\n          let selector = (this.opts.acceptWidgets === true ? '.grid-stack-item' : this.opts.acceptWidgets as string);\r\n          canAccept = el.matches(selector);\r\n        }\r\n        // finally check to make sure we actually have space left #1571\r\n        if (canAccept && node && this.opts.maxRow) {\r\n          let n = {w: node.w, h: node.h, minW: node.minW, minH: node.minH}; // only width/height matters and autoPosition\r\n          canAccept = this.engine.willItFit(n);\r\n        }\r\n        return canAccept;\r\n      }\r\n    })\r\n    /**\r\n     * entering our grid area\r\n     */\r\n      .on(this.el, 'dropover', (event: Event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {\r\n      // console.log(`over ${this.el.gridstack.opts.id} ${count++}`); // TEST\r\n        let node = el.gridstackNode;\r\n        // ignore drop enter on ourself (unless we temporarily removed) which happens on a simple drag of our item\r\n        if (node?.grid === this && !node._temporaryRemoved) {\r\n        // delete node._added; // reset this to track placeholder again in case we were over other grid #1484 (dropout doesn't always clear)\r\n          return false; // prevent parent from receiving msg (which may be a grid as well)\r\n        }\r\n\r\n        // fix #1578 when dragging fast, we may not get a leave on the previous grid so force one now\r\n        if (node?.grid && node.grid !== this && !node._temporaryRemoved) {\r\n        // console.log('dropover without leave'); // TEST\r\n          let otherGrid = node.grid;\r\n          otherGrid._leave(el, helper);\r\n        }\r\n\r\n        // cache cell dimensions (which don't change), position can animate if we removed an item in otherGrid that affects us...\r\n        cellWidth = this.cellWidth();\r\n        cellHeight = this.getCellHeight(true);\r\n\r\n        // load any element attributes if we don't have a node\r\n        if (!node) {\r\n          node = this._readAttr(el, false); // don't wipe external (e.g. drag toolbar) attr #2354\r\n        }\r\n        if (!node.grid) {\r\n          node._isExternal = true;\r\n          el.gridstackNode = node;\r\n        }\r\n\r\n        // calculate the grid size based on element outer size\r\n        helper = helper || el;\r\n        let w = node.w || Math.round(helper.offsetWidth / cellWidth) || 1;\r\n        let h = node.h || Math.round(helper.offsetHeight / cellHeight) || 1;\r\n\r\n        // if the item came from another grid, make a copy and save the original info in case we go back there\r\n        if (node.grid && node.grid !== this) {\r\n        // copy the node original values (min/max/id/etc...) but override width/height/other flags which are this grid specific\r\n        // console.log('dropover cloning node'); // TEST\r\n          if (!el._gridstackNodeOrig) el._gridstackNodeOrig = node; // shouldn't have multiple nested!\r\n          el.gridstackNode = node = {...node, w, h, grid: this};\r\n          this.engine.cleanupNode(node)\r\n            .nodeBoundFix(node);\r\n          // restore some internal fields we need after clearing them all\r\n          node._initDD =\r\n        node._isExternal =  // DOM needs to be re-parented on a drop\r\n        node._temporaryRemoved = true; // so it can be inserted onDrag below\r\n        } else {\r\n          node.w = w; node.h = h;\r\n          node._temporaryRemoved = true; // so we can insert it\r\n        }\r\n\r\n        // clear any marked for complete removal (Note: don't check _isAboutToRemove as that is cleared above - just do it)\r\n        this._itemRemoving(node.el, false);\r\n\r\n        dd.on(el, 'drag', onDrag);\r\n        // make sure this is called at least once when going fast #1578\r\n        onDrag(event as DragEvent, el, helper);\r\n        return false; // prevent parent from receiving msg (which may be a grid as well)\r\n      })\r\n    /**\r\n     * Leaving our grid area...\r\n     */\r\n      .on(this.el, 'dropout', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {\r\n      // console.log(`out ${this.el.gridstack.opts.id} ${count++}`); // TEST\r\n        let node = el.gridstackNode;\r\n        if (!node) return false;\r\n        // fix #1578 when dragging fast, we might get leave after other grid gets enter (which calls us to clean)\r\n        // so skip this one if we're not the active grid really..\r\n        if (!node.grid || node.grid === this) {\r\n          this._leave(el, helper);\r\n          // if we were created as temporary nested grid, go back to before state\r\n          if (this._isTemp) {\r\n            this.removeAsSubGrid(node);\r\n          }\r\n        }\r\n        return false; // prevent parent from receiving msg (which may be grid as well)\r\n      })\r\n    /**\r\n     * end - releasing the mouse\r\n     */\r\n      .on(this.el, 'drop', (event, el: GridItemHTMLElement, helper: GridItemHTMLElement) => {\r\n        let node = el.gridstackNode;\r\n        // ignore drop on ourself from ourself that didn't come from the outside - dragend will handle the simple move instead\r\n        if (node?.grid === this && !node._isExternal) return false;\r\n\r\n        let wasAdded = !!this.placeholder.parentElement; // skip items not actually added to us because of constrains, but do cleanup #1419\r\n        this.placeholder.remove();\r\n\r\n        // notify previous grid of removal\r\n        // console.log('drop delete _gridstackNodeOrig') // TEST\r\n        let origNode = el._gridstackNodeOrig;\r\n        delete el._gridstackNodeOrig;\r\n        if (wasAdded && origNode?.grid && origNode.grid !== this) {\r\n          let oGrid = origNode.grid;\r\n          oGrid.engine.removedNodes.push(origNode);\r\n          oGrid._triggerRemoveEvent()._triggerChangeEvent();\r\n          // if it's an empty sub-grid that got auto-created, nuke it\r\n          if (oGrid.parentGridItem && !oGrid.engine.nodes.length && oGrid.opts.subGridDynamic) {\r\n            oGrid.removeAsSubGrid();\r\n          }\r\n        }\r\n\r\n        if (!node) return false;\r\n\r\n        // use existing placeholder node as it's already in our list with drop location\r\n        if (wasAdded) {\r\n          this.engine.cleanupNode(node); // removes all internal _xyz values\r\n          node.grid = this;\r\n        }\r\n        dd.off(el, 'drag');\r\n        // if we made a copy ('helper' which is temp) of the original node then insert a copy, else we move the original node (#1102)\r\n        // as the helper will be nuked by jquery-ui otherwise. TODO: update old code path\r\n        if (helper !== el) {\r\n          helper.remove();\r\n          el.gridstackNode = origNode; // original item (left behind) is re-stored to pre dragging as the node now has drop info\r\n          if (wasAdded) {\r\n            el = el.cloneNode(true) as GridItemHTMLElement;\r\n          }\r\n        } else {\r\n          el.remove(); // reduce flicker as we change depth here, and size further down\r\n          this._removeDD(el);\r\n        }\r\n        if (!wasAdded) return false;\r\n        el.gridstackNode = node;\r\n        node.el = el;\r\n        let subGrid = node.subGrid?.el?.gridstack; // set when actual sub-grid present\r\n        // @ts-ignore\r\n        Utils.copyPos(node, this._readAttr(this.placeholder)); // placeholder values as moving VERY fast can throw things off #1578\r\n        Utils.removePositioningStyles(el);// @ts-ignore\r\n        this._writeAttr(el, node);\r\n        el.classList.add(gridDefaults.itemClass, this.opts.itemClass);\r\n        this.el.appendChild(el);// @ts-ignore // TODO: now would be ideal time to _removeHelperStyle() overriding floating styles (native only)\r\n        if (subGrid) {\r\n          subGrid.parentGridItem = node;\r\n          if (!subGrid.opts.styleInHead) subGrid._updateStyles(true); // re-create sub-grid styles now that we've moved\r\n        }\r\n        this._updateContainerHeight();\r\n        this.engine.addedNodes.push(node);// @ts-ignore\r\n        this._triggerAddEvent();// @ts-ignore\r\n        this._triggerChangeEvent();\r\n\r\n        this.engine.endUpdate();\r\n        if (this._gsEventHandler['dropped']) {\r\n          this._gsEventHandler['dropped']({...event, type: 'dropped'}, origNode && origNode.grid ? origNode : undefined, node);\r\n        }\r\n\r\n        // wait till we return out of the drag callback to set the new drag&resize handler or they may get messed up\r\n        window.setTimeout(() => {\r\n          // IFF we are still there (some application will use as placeholder and insert their real widget instead and better call makeWidget())\r\n          if (node.el && node.el.parentElement) {\r\n            this._prepareDragDropByNode(node);\r\n          } else {\r\n            this.engine.removeNode(node);\r\n          }\r\n          delete node.grid._isTemp;\r\n        });\r\n\r\n        return false; // prevent parent from receiving msg (which may be grid as well)\r\n      });\r\n    return this;\r\n  }\r\n\r\n  /** @internal mark item for removal */\r\n  private _itemRemoving(el: GridItemHTMLElement, remove: boolean) {\r\n    let node = el ? el.gridstackNode : undefined;\r\n    if (!node || !node.grid || el.classList.contains(this.opts.removableOptions.decline)) return;\r\n    remove ? node._isAboutToRemove = true : delete node._isAboutToRemove;\r\n    remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing');\r\n  }\r\n\r\n  /** @internal called to setup a trash drop zone if the user specifies it */\r\n  protected _setupRemoveDrop(): GridStack {\r\n    if (!this.opts.staticGrid && typeof this.opts.removable === 'string') {\r\n      let trashEl = document.querySelector(this.opts.removable) as HTMLElement;\r\n      if (!trashEl) return this;\r\n      // only register ONE drop-over/dropout callback for the 'trash', and it will\r\n      // update the passed in item and parent grid because the 'trash' is a shared resource anyway,\r\n      // and Native DD only has 1 event CB (having a list and technically a per grid removableOptions complicates things greatly)\r\n      if (!dd.isDroppable(trashEl)) {\r\n        dd.droppable(trashEl, this.opts.removableOptions)\r\n          .on(trashEl, 'dropover', (event, el) => this._itemRemoving(el, true))\r\n          .on(trashEl, 'dropout',  (event, el) => this._itemRemoving(el, false));\r\n      }\r\n    }\r\n    return this;\r\n  }\r\n\r\n  /** @internal prepares the element for drag&drop **/\r\n  protected _prepareDragDropByNode(node: GridStackNode): GridStack {\r\n    let el = node.el;\r\n    const noMove = node.noMove || this.opts.disableDrag;\r\n    const noResize = node.noResize || this.opts.disableResize;\r\n\r\n    // check for disabled grid first\r\n    if (this.opts.staticGrid || (noMove && noResize)) {\r\n      if (node._initDD) {\r\n        this._removeDD(el); // nukes everything instead of just disable, will add some styles back next\r\n        delete node._initDD;\r\n      }\r\n      el.classList.add('ui-draggable-disabled', 'ui-resizable-disabled'); // add styles one might depend on #1435\r\n      return this;\r\n    }\r\n\r\n    if (!node._initDD) {\r\n      // variables used/cashed between the 3 start/move/end methods, in addition to node passed above\r\n      let cellWidth: number;\r\n      let cellHeight: number;\r\n\r\n      /** called when item starts moving/resizing */\r\n      let onStartMoving = (event: Event, ui: DDUIData) => {\r\n        // trigger any 'dragstart' / 'resizestart' manually\r\n        if (this._gsEventHandler[event.type]) {\r\n          this._gsEventHandler[event.type](event, event.target);\r\n        }\r\n        cellWidth = this.cellWidth();\r\n        cellHeight = this.getCellHeight(true); // force pixels for calculations\r\n\r\n        this._onStartMoving(el, event, ui, node, cellWidth, cellHeight);\r\n      }\r\n\r\n      /** called when item is being dragged/resized */\r\n      let dragOrResize = (event: MouseEvent, ui: DDUIData) => {\r\n        this._dragOrResize(el, event, ui, node, cellWidth, cellHeight);\r\n      }\r\n\r\n      /** called when the item stops moving/resizing */\r\n      let onEndMoving = (event: Event) => {\r\n        this.placeholder.remove();\r\n        delete node._moving;\r\n        delete node._event;\r\n        delete node._lastTried;\r\n\r\n        // if the item has moved to another grid, we're done here\r\n        let target: GridItemHTMLElement = event.target as GridItemHTMLElement;\r\n        if (!target.gridstackNode || target.gridstackNode.grid !== this) return;\r\n\r\n        node.el = target;\r\n\r\n        if (node._isAboutToRemove) {\r\n          let grid = el.gridstackNode.grid;\r\n          if (grid._gsEventHandler[event.type]) {\r\n            grid._gsEventHandler[event.type](event, target);\r\n          }\r\n          grid.engine.nodes.push(node); // temp add it back so we can proper remove it next\r\n          grid.removeWidget(el, true, true);\r\n        } else {\r\n          Utils.removePositioningStyles(target);\r\n          if (node._temporaryRemoved) {\r\n            // got removed - restore item back to before dragging position\r\n            Utils.copyPos(node, node._orig);// @ts-ignore\r\n            this._writePosAttr(target, node);\r\n            this.engine.addNode(node);\r\n          } else {\r\n            // move to new placeholder location\r\n            this._writePosAttr(target, node);\r\n          }\r\n          if (this._gsEventHandler[event.type]) {\r\n            this._gsEventHandler[event.type](event, target);\r\n          }\r\n        }\r\n        // @ts-ignore\r\n        this._extraDragRow = 0;// @ts-ignore\r\n        this._updateContainerHeight();// @ts-ignore\r\n        this._triggerChangeEvent();\r\n\r\n        this.engine.endUpdate();\r\n      }\r\n\r\n      dd.draggable(el, {\r\n        start: onStartMoving,\r\n        stop: onEndMoving,\r\n        drag: dragOrResize\r\n      }).resizable(el, {\r\n        start: onStartMoving,\r\n        stop: onEndMoving,\r\n        resize: dragOrResize\r\n      });\r\n      node._initDD = true; // we've set DD support now\r\n    }\r\n\r\n    // finally fine tune move vs resize by disabling any part...\r\n    dd.draggable(el, noMove ? 'disable' : 'enable')\r\n      .resizable(el, noResize ? 'disable' : 'enable');\r\n\r\n    return this;\r\n  }\r\n\r\n  /** @internal handles actual drag/resize start **/\r\n  protected _onStartMoving(el: GridItemHTMLElement, event: Event, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void {\r\n    this.engine.cleanNodes()\r\n      .beginUpdate(node);\r\n    // @ts-ignore\r\n    this._writePosAttr(this.placeholder, node)\r\n    this.el.appendChild(this.placeholder);\r\n    // console.log('_onStartMoving placeholder') // TEST\r\n\r\n    node.el = this.placeholder;\r\n    node._lastUiPosition = ui.position;\r\n    node._prevYPix = ui.position.top;\r\n    node._moving = (event.type === 'dragstart'); // 'dropover' are not initially moving so they can go exactly where they enter (will push stuff out of the way)\r\n    delete node._lastTried;\r\n\r\n    if (event.type === 'dropover' && node._temporaryRemoved) {\r\n      // console.log('engine.addNode x=' + node.x); // TEST\r\n      this.engine.addNode(node); // will add, fix collisions, update attr and clear _temporaryRemoved\r\n      node._moving = true; // AFTER, mark as moving object (wanted fix location before)\r\n    }\r\n\r\n    // set the min/max resize info\r\n    this.engine.cacheRects(cellWidth, cellHeight, this.opts.marginTop as number, this.opts.marginRight as number, this.opts.marginBottom as number, this.opts.marginLeft as number);\r\n    if (event.type === 'resizestart') {\r\n      dd.resizable(el, 'option', 'minWidth', cellWidth * (node.minW || 1))\r\n        .resizable(el, 'option', 'minHeight', cellHeight * (node.minH || 1));\r\n      if (node.maxW) { dd.resizable(el, 'option', 'maxWidth', cellWidth * node.maxW); }\r\n      if (node.maxH) { dd.resizable(el, 'option', 'maxHeight', cellHeight * node.maxH); }\r\n    }\r\n  }\r\n\r\n  /** @internal handles actual drag/resize **/\r\n  protected _dragOrResize(el: GridItemHTMLElement, event: MouseEvent, ui: DDUIData, node: GridStackNode, cellWidth: number, cellHeight: number): void {\r\n    let p = {...node._orig}; // could be undefined (_isExternal) which is ok (drag only set x,y and w,h will default to node value)\r\n    let resizing: boolean;\r\n    let mLeft = this.opts.marginLeft as number,\r\n      mRight = this.opts.marginRight as number,\r\n      mTop = this.opts.marginTop as number,\r\n      mBottom = this.opts.marginBottom as number;\r\n\r\n    // if margins (which are used to pass mid point by) are large relative to cell height/width, reduce them down #1855\r\n    let mHeight = Math.round(cellHeight * 0.1),\r\n      mWidth = Math.round(cellWidth * 0.1);\r\n    mLeft = Math.min(mLeft, mWidth);\r\n    mRight = Math.min(mRight, mWidth);\r\n    mTop = Math.min(mTop, mHeight);\r\n    mBottom = Math.min(mBottom, mHeight);\r\n\r\n    if (event.type === 'drag') {\r\n      if (node._temporaryRemoved) return; // handled by dropover\r\n      let distance = ui.position.top - node._prevYPix;\r\n      node._prevYPix = ui.position.top;\r\n      if (this.opts.draggable.scroll !== false) {\r\n        Utils.updateScrollPosition(el, ui.position, distance);\r\n      }\r\n\r\n      // get new position taking into account the margin in the direction we are moving! (need to pass mid point by margin)\r\n      let left = ui.position.left + (ui.position.left > node._lastUiPosition.left  ? -mRight : mLeft);\r\n      let top = ui.position.top + (ui.position.top > node._lastUiPosition.top  ? -mBottom : mTop);\r\n      p.x = Math.round(left / cellWidth);\r\n      p.y = Math.round(top / cellHeight);\r\n\r\n      // @ts-ignore// if we're at the bottom hitting something else, grow the grid so cursor doesn't leave when trying to place below others\r\n      let prev = this._extraDragRow;\r\n      if (this.engine.collide(node, p)) {\r\n        let row = this.getRow();\r\n        let extra = Math.max(0, (p.y + node.h) - row);\r\n        if (this.opts.maxRow && row + extra > this.opts.maxRow) {\r\n          extra = Math.max(0, this.opts.maxRow - row);\r\n        }// @ts-ignore\r\n        this._extraDragRow = extra;// @ts-ignore\r\n      } else this._extraDragRow = 0;// @ts-ignore\r\n      if (this._extraDragRow !== prev) this._updateContainerHeight();\r\n\r\n      if (node.x === p.x && node.y === p.y) return; // skip same\r\n      // DON'T skip one we tried as we might have failed because of coverage <50% before\r\n      // if (node._lastTried && node._lastTried.x === x && node._lastTried.y === y) return;\r\n    } else if (event.type === 'resize')  {\r\n      if (p.x < 0) return;\r\n      // Scrolling page if needed\r\n      Utils.updateScrollResize(event, el, cellHeight);\r\n\r\n      // get new size\r\n      p.w = Math.round((ui.size.width - mLeft) / cellWidth);\r\n      p.h = Math.round((ui.size.height - mTop) / cellHeight);\r\n      if (node.w === p.w && node.h === p.h) return;\r\n      if (node._lastTried && node._lastTried.w === p.w && node._lastTried.h === p.h) return; // skip one we tried (but failed)\r\n\r\n      // if we size on left/top side this might move us, so get possible new position as well\r\n      let left = ui.position.left + mLeft;\r\n      let top = ui.position.top + mTop;\r\n      p.x = Math.round(left / cellWidth);\r\n      p.y = Math.round(top / cellHeight);\r\n\r\n      resizing = true;\r\n    }\r\n\r\n    node._event = event;\r\n    node._lastTried = p; // set as last tried (will nuke if we go there)\r\n    let rect: GridStackPosition = { // screen pix of the dragged box\r\n      x: ui.position.left + mLeft,\r\n      y: ui.position.top + mTop,\r\n      w: (ui.size ? ui.size.width : node.w * cellWidth) - mLeft - mRight,\r\n      h: (ui.size ? ui.size.height : node.h * cellHeight) - mTop - mBottom\r\n    };\r\n    if (this.engine.moveNodeCheck(node, {...p, cellWidth, cellHeight, rect, resizing})) {\r\n      node._lastUiPosition = ui.position;\r\n      this.engine.cacheRects(cellWidth, cellHeight, mTop, mRight, mBottom, mLeft);\r\n      delete node._skipDown;\r\n      if (resizing && node.subGrid) node.subGrid.onParentResize();\r\n      this._extraDragRow = 0;// @ts-ignore\r\n      this._updateContainerHeight();\r\n\r\n      let target = event.target as GridItemHTMLElement;// @ts-ignore\r\n      this._writePosAttr(target, node);\r\n      if (this._gsEventHandler[event.type]) {\r\n        this._gsEventHandler[event.type](event, target);\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @internal called when item leaving our area by either cursor dropout event\r\n   * or shape is outside our boundaries. remove it from us, and mark temporary if this was\r\n   * our item to start with else restore prev node values from prev grid it came from.\r\n   **/\r\n  protected _leave(el: GridItemHTMLElement, helper?: GridItemHTMLElement): void {\r\n    let node = el.gridstackNode;\r\n    if (!node) return;\r\n\r\n    dd.off(el, 'drag'); // no need to track while being outside\r\n\r\n    // this gets called when cursor leaves and shape is outside, so only do this once\r\n    if (node._temporaryRemoved) return;\r\n    node._temporaryRemoved = true;\r\n\r\n    this.engine.removeNode(node); // remove placeholder as well, otherwise it's a sign node is not in our list, which is a bigger issue\r\n    node.el = node._isExternal && helper ? helper : el; // point back to real item being dragged\r\n\r\n    if (this.opts.removable === true) { // boolean vs a class string\r\n      // item leaving us and we are supposed to remove on leave (no need to drag onto trash) mark it so\r\n      this._itemRemoving(el, true);\r\n    }\r\n\r\n    // finally if item originally came from another grid, but left us, restore things back to prev info\r\n    if (el._gridstackNodeOrig) {\r\n      // console.log('leave delete _gridstackNodeOrig') // TEST\r\n      el.gridstackNode = el._gridstackNodeOrig;\r\n      delete el._gridstackNodeOrig;\r\n    } else if (node._isExternal) {\r\n      // item came from outside (like a toolbar) so nuke any node info\r\n      delete node.el;\r\n      delete el.gridstackNode;\r\n      // and restore all nodes back to original\r\n      this.engine.restoreInitial();\r\n    }\r\n  }\r\n\r\n  // legacy method removed\r\n  public commit(): GridStack { obsolete(this, this.batchUpdate(false), 'commit', 'batchUpdate', '5.2'); return this; }\r\n}\r\n"]}