diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 83748b5d3..32babf2d2 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -80,7 +80,8 @@ Change log
## 7.1.1-dev (TBD)
* fix [#939](https://github.com/gridstack/gridstack.js/issues/2039) 'prototype' undefined error for dd-gridstack.js
* add [#939](https://github.com/gridstack/gridstack.js/issues/2105) disable/enable are methods now recursive by default
-* add better GridStackEventHandlerCallback spelled out types
+* add better `GridStackEventHandlerCallback` spelled out types
+* add We now have support for [Angular Component wrappers](https://github.com/gridstack/gridstack.js/tree/master/demo/angular/src/app) out of the box included in the build, with docs and demo! Need help to do that for React and Vue.
## 7.1.1 (2022-11-13)
* fix [#939](https://github.com/gridstack/gridstack.js/issues/939) editable elements focus (regression in v6). Thank you [@Gezdy](https://github.com/Gezdy)
diff --git a/src/gridstack.ts b/src/gridstack.ts
index 55f56160e..f53c6da23 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -237,6 +237,10 @@ export class GridStack {
this.el = el; // exposed HTML element to the user
opts = opts || {}; // handles null/undefined/0
+ if (!el.classList.contains('grid-stack')) {
+ this.el.classList.add('grid-stack');
+ }
+
// if row property exists, replace minRow and maxRow instead
if (opts.row) {
opts.minRow = opts.maxRow = opts.row;
@@ -408,27 +412,32 @@ export class GridStack {
}
let el: HTMLElement;
+ let node: GridStackNode;
if (typeof els === 'string') {
let doc = document.implementation.createHTMLDocument(''); // IE needs a param
doc.body.innerHTML = els;
el = doc.body.children[0] as HTMLElement;
} else if (arguments.length === 0 || arguments.length === 1 && isGridStackWidget(els)) {
- let content = els ? (els as GridStackWidget).content || '' : '';
- options = els;
- let doc = document.implementation.createHTMLDocument(''); // IE needs a param
- doc.body.innerHTML = `
`;
- el = doc.body.children[0] as HTMLElement;
+ node = options = els;
+ if (node?.el) {
+ el = node.el; // re-use element stored in the node
+ } else {
+ let content = options?.content || '';
+ let doc = document.implementation.createHTMLDocument(''); // IE needs a param
+ doc.body.innerHTML = ``;
+ el = doc.body.children[0] as HTMLElement;
+ }
} else {
el = els as HTMLElement;
}
// Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
- // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz) before adding the node.
+ // as the actual value are filled in when _prepareElement() calls el.getAttribute('gs-xyz') before adding the node.
// So make sure we load any DOM attributes that are not specified in passed in options (which override)
let domAttr = this._readAttr(el);
options = Utils.cloneDeep(options) || {}; // make a copy before we modify in case caller re-uses it
Utils.defaults(options, domAttr);
- let node = this.engine.prepareNode(options);
+ node = this.engine.prepareNode(options);
this._writeAttr(el, options);
if (this._insertNotAppend) {
@@ -680,7 +689,7 @@ export class GridStack {
if (typeof(addAndRemove) === 'function') {
w = addAndRemove(this, w, true).gridstackNode;
} else {
- w = this.addWidget(w).gridstackNode;
+ w = (w.el ? this.addWidget(w.el, w) : this.addWidget(w)).gridstackNode;
}
}
});
@@ -1375,10 +1384,8 @@ export class GridStack {
/** @internal */
protected _prepareElement(el: GridItemHTMLElement, triggerAddEvent = false, node?: GridStackNode): GridStack {
- if (!node) {
- el.classList.add(this.opts.itemClass);
- node = this._readAttr(el);
- }
+ el.classList.add(this.opts.itemClass);
+ node = node || this._readAttr(el);
el.gridstackNode = node;
node.el = el;
node.grid = this;
diff --git a/src/types.ts b/src/types.ts
index ad1518026..98dab1127 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -69,7 +69,7 @@ export type GridStackElement = string | HTMLElement | GridItemHTMLElement;
/** specific and general event handlers for the .on() method */
export type GridStackEventHandler = (event: Event) => void;
export type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;
-export type GridStackNodesHandler = (event: Event, node: GridStackNode[]) => void;
+export type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;
export type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;
export type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;