New content
' });\n *\n * // Update multiple properties\n * grid.update('#my-widget', {\n * w: 4,\n * h: 3,\n * noResize: true,\n * locked: true\n * });\n */\n public update(els: GridStackElement, opt: GridStackWidget): GridStack {\n\n GridStack.getElements(els).forEach(el => {\n const n = el?.gridstackNode;\n if (!n) return;\n const w = {...Utils.copyPos({}, n), ...Utils.cloneDeep(opt)}; // make a copy we can modify in case they re-use it or multiple items\n this.engine.nodeBoundFix(w);\n delete w.autoPosition;\n\n // move/resize widget if anything changed\n const keys = ['x', 'y', 'w', 'h'];\n let m: GridStackWidget;\n if (keys.some(k => w[k] !== undefined && w[k] !== n[k])) {\n m = {};\n keys.forEach(k => {\n m[k] = (w[k] !== undefined) ? w[k] : n[k];\n delete w[k];\n });\n }\n // for a move as well IFF there is any min/max fields set\n if (!m && (w.minW || w.minH || w.maxW || w.maxH)) {\n m = {}; // will use node position but validate values\n }\n\n // check for content changing\n if (w.content !== undefined) {\n const itemContent = el.querySelector('.grid-stack-item-content') as HTMLElement;\n if (itemContent && itemContent.textContent !== w.content) {\n n.content = w.content;\n GridStack.renderCB(itemContent, w);\n // restore any sub-grid back\n if (n.subGrid?.el) {\n itemContent.appendChild(n.subGrid.el);\n n.subGrid._updateContainerHeight();\n }\n }\n delete w.content;\n }\n\n // any remaining fields are assigned, but check for dragging changes, resize constrain\n let changed = false;\n let ddChanged = false;\n for (const key in w) {\n if (key[0] !== '_' && n[key] !== w[key]) {\n n[key] = w[key];\n changed = true;\n ddChanged = ddChanged || (!this.opts.staticGrid && (key === 'noResize' || key === 'noMove' || key === 'locked'));\n }\n }\n Utils.sanitizeMinMax(n);\n\n // finally move the widget and update attr\n if (m) {\n const widthChanged = (m.w !== undefined && m.w !== n.w);\n this.moveNode(n, m);\n if (widthChanged && n.subGrid) {\n // if we're animating the client size hasn't changed yet, so force a change (not exact size)\n n.subGrid.onResize(this.hasAnimationCSS() ? n.w : undefined);\n } else {\n this.resizeToContentCheck(widthChanged, n);\n }\n delete n._orig; // clear out original position now that we moved #2669\n }\n if (m || changed) {\n this._writeAttr(el, n);\n }\n if (ddChanged) {\n this.prepareDragDrop(n.el);\n }\n if (GridStack.updateCB) GridStack.updateCB(n); // call user callback so they know widget got updated\n });\n\n return this;\n }\n\n private moveNode(n: GridStackNode, m: GridStackMoveOpts) {\n const wasUpdating = n._updating;\n if (!wasUpdating) this.engine.cleanNodes().beginUpdate(n);\n this.engine.moveNode(n, m);\n this._updateContainerHeight();\n if (!wasUpdating) {\n this._triggerChangeEvent();\n this.engine.endUpdate();\n }\n }\n\n /**\n * Updates widget height to match the content height to avoid vertical scrollbars or dead space.\n * This automatically adjusts the widget height based on its content size.\n *\n * Note: This assumes only 1 child under resizeToContentParent='.grid-stack-item-content'\n * (sized to gridItem minus padding) that represents the entire content size.\n *\n * @param el the grid item element to resize\n *\n * @example\n * // Resize a widget to fit its content\n * const widget = document.querySelector('.grid-stack-item');\n * grid.resizeToContent(widget);\n *\n * // This is commonly used with dynamic content:\n * widget.querySelector('.content').innerHTML = 'New longer content...';\n * grid.resizeToContent(widget);\n */\n public resizeToContent(el: GridItemHTMLElement) {\n if (!el) return;\n el.classList.remove('size-to-content-max');\n if (!el.clientHeight) return; // 0 when hidden, skip\n const n = el.gridstackNode;\n if (!n) return;\n const grid = n.grid;\n if (!grid || el.parentElement !== grid.el) return; // skip if we are not inside a grid\n const cell = grid.getCellHeight(true);\n if (!cell) return;\n let height = n.h ? n.h * cell : el.clientHeight; // getBoundingClientRect().height seem to flicker back and forth\n let item: Element;\n if (n.resizeToContentParent) item = el.querySelector(n.resizeToContentParent);\n if (!item) item = el.querySelector(GridStack.resizeToContentParent);\n if (!item) return;\n const padding = el.clientHeight - item.clientHeight; // full - available height to our child (minus border, padding...)\n const itemH = n.h ? n.h * cell - padding : item.clientHeight; // calculated to what cellHeight is or will become (rather than actual to prevent waiting for animation to finish)\n let wantedH: number;\n if (n.subGrid) {\n // sub-grid - use their actual row count * their cell height, BUT append any content outside of the grid (eg: above text)\n wantedH = n.subGrid.getRow() * n.subGrid.getCellHeight(true);\n const subRec = n.subGrid.el.getBoundingClientRect();\n const parentRec = el.getBoundingClientRect();\n wantedH += subRec.top - parentRec.top;\n } else if (n.subGridOpts?.children?.length) {\n // not sub-grid just yet (case above) wait until we do\n return;\n } else {\n // NOTE: clientHeight & getBoundingClientRect() is undefined for text and other leaf nodes. use