Merge branch 'gridstack:master' into master

Author: Aysnine

ISSUE_TEMPLATE.md renamed to .github/ISSUE_TEMPLATE/bug_report.md

@@ -1,3 +1,12 @@
+---
+name: Bug report
+about: bug report
+title: ''
+labels: ''
+assignees: ''
+
+---
+
 ## Subject of the issue
 Describe your issue here.
 If unsure if lib bug, use slack channel instead: https://join.slack.com/t/gridstackjs/shared_invite/zt-2qa21lnxz-vw29RdTFet3N6~ABqT9kwA

README.md

@@ -472,20 +472,20 @@ breaking change:
 
 **Breaking change:**
 
-* if you code relies on `GridStackWidget.content` with real HTML (like a few demos) it is up to you to do this:
+* if your code relies on `GridStackWidget.content` with real HTML (like a few demos) it is up to you to do this:
 ```ts
 // NOTE: REAL apps would sanitize-html or DOMPurify before blinding setting innerHTML. see #2736
-GridStack.renderCB = function(el, w) {
+GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) {
   el.innerHTML = w.content;
 };
 ```
 * V11 add new `GridStack.renderCB` that is called for you to create the widget content (entire GridStackWidget is passed so you can use id or some other field as logic) while GS creates the 2 needed parent divs + classes, unlike `GridStack.addRemoveCB` which doesn't create anything for you. Both can be handy for Angular/React/Vue frameworks.
-* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself (`Util.createWidgetDivs()` can be used to create parent divs) then call `makeWidget(el)` instead.
+* `addWidget(w: GridStackWidget)` is now the only supported format, no more string content passing. You will need to create content yourself (`GridStack.createWidgetDivs()` can be used to create parent divs) then call `makeWidget(el)` instead.
 
 **Potential breaking change:**
 
 * BIG overall to how sidepanel helper drag&drop is done:
-1. `clone()` helper is now passed full HTML element dragged, not an event on `grid-stack-item-content` so can clone or set attr at the top.
+1. `clone()` helper is now passed full HTML element dragged, not an event on `grid-stack-item-content` so you can clone or set attr at the top.
 2. use any class/structure you want for side panel items (see two.html)
 3. `GridStack.setupDragIn()` now support associating a `GridStackWidget` for each sidepanel that will be used to define what to create on drop!
 4. if no `GridStackWidget` is defined, the helper will now be inserted as is, and NOT original sidepanel item.

angular/README.md

@@ -8,13 +8,13 @@ this is the recommended way if you are going to have multiple grids (alow drag&d
 
 I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
 
-HTML
+MyComponent HTML
 
 ```html
 <gridstack [options]="gridOptions"></gridstack>
 ```
 
-CSS
+MyComponent CSS
 
 ```css
 @import "gridstack/dist/gridstack.min.css";
@@ -30,7 +30,7 @@ CSS
 ```
 
 
-Standalone Component Code
+Standalone MyComponent Code
 
 ```ts
 import { GridStackOptions } from 'gridstack';
@@ -47,7 +47,7 @@ export class MyComponent {
   // sample grid options + items to load...
   public gridOptions: GridStackOptions = {
     margin: 5,
-    children: [ // or call load()/addWidget() with same data
+    children: [ // or call load(children) or addWidget(children[0]) with same data
       {x:0, y:0, minW:2, content:'Item 1'},
       {x:1, y:0, content:'Item 2'},
       {x:0, y:1, content:'Item 3'},

angular/package.json

@@ -18,7 +18,7 @@
     "@angular/platform-browser": "^14",
     "@angular/platform-browser-dynamic": "^14",
     "@angular/router": "^14",
-    "gridstack": "^11.3.0",
+    "gridstack": "^11.4.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

angular/projects/lib/src/index.ts

@@ -2,7 +2,8 @@
  * Public API Surface of gridstack-angular
  */
 
+export * from './lib/types';
+export * from './lib/base-widget';
 export * from './lib/gridstack-item.component';
 export * from './lib/gridstack.component';
-export * from './lib/base-widget';
 export * from './lib/gridstack.module';

angular/projects/lib/src/lib/base-widget.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack-item.component.ts 11.3.0-dev
+ * gridstack-item.component.ts 11.4.0-dev
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
@@ -8,7 +8,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { NgCompInputs, NgGridStackWidget } from './gridstack.component';
+import { NgCompInputs, NgGridStackWidget } from './types';
 
  @Injectable()
  export abstract class BaseWidget {

angular/projects/lib/src/lib/gridstack-item.component.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack-item.component.ts 11.3.0-dev
+ * gridstack-item.component.ts 11.4.0-dev
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 

angular/projects/lib/src/lib/gridstack.component.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack.component.ts 11.3.0-dev
+ * gridstack.component.ts 11.4.0-dev
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
@@ -9,34 +9,16 @@ import { NgIf } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
 
-import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
+import { NgGridStackNode, NgGridStackWidget } from './types';
 import { BaseWidget } from './base-widget';
+import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
 
 /** events handlers emitters signature for different events */
 export type eventCB = {event: Event};
 export type elementCB = {event: Event, el: GridItemHTMLElement};
 export type nodesCB = {event: Event, nodes: GridStackNode[]};
 export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode};
 
-export type NgCompInputs = {[key: string]: any};
-
-/** extends to store Ng Component selector, instead/inAddition to content */
-export interface NgGridStackWidget extends GridStackWidget {
-  /** Angular tag selector for this component to create at runtime */
-  selector?: string;
-  /** serialized data for the component input fields */
-  input?: NgCompInputs;
-  /** nested grid options */
-  subGridOpts?: NgGridStackOptions;
-}
-export interface NgGridStackNode extends GridStackNode {
-  selector?: string; // component type to create as content
-}
-export interface NgGridStackOptions extends GridStackOptions {
-  children?: NgGridStackWidget[];
-  subGridOpts?: NgGridStackOptions;
-}
-
 /** store element to Ng Class pointer back */
 export interface GridCompHTMLElement extends GridHTMLElement {
   _gridComp?: GridstackComponent;

angular/projects/lib/src/lib/gridstack.module.ts

@@ -1,22 +1,22 @@
 /**
- * gridstack.component.ts 11.3.0-dev
+ * gridstack.component.ts 11.4.0-dev
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
 import { NgModule } from "@angular/core";
 
-import { GridstackComponent } from "./gridstack.component";
 import { GridstackItemComponent } from "./gridstack-item.component";
+import { GridstackComponent } from "./gridstack.component";
 
 // @deprecated use GridstackComponent and GridstackItemComponent as standalone components
 @NgModule({
   imports: [
-    GridstackComponent,
     GridstackItemComponent,
+    GridstackComponent,
   ],
   exports: [
-    GridstackComponent,
     GridstackItemComponent,
+    GridstackComponent,
   ],
 })
 export class GridstackModule {}

angular/projects/lib/src/lib/types.ts

@@ -0,0 +1,27 @@
+/**
+ * gridstack-item.component.ts 11.4.0-dev
+ * Copyright (c) 2025 Alain Dumesny - see GridStack root license
+ */
+
+import { GridStackNode, GridStackOptions, GridStackWidget } from "gridstack";
+
+/** extends to store Ng Component selector, instead/inAddition to content */
+export interface NgGridStackWidget extends GridStackWidget {
+  /** Angular tag selector for this component to create at runtime */
+  selector?: string;
+  /** serialized data for the component input fields */
+  input?: NgCompInputs;
+  /** nested grid options */
+  subGridOpts?: NgGridStackOptions;
+}
+
+export interface NgGridStackNode extends GridStackNode {
+  selector?: string; // component type to create as content
+}
+
+export interface NgGridStackOptions extends GridStackOptions {
+  children?: NgGridStackWidget[];
+  subGridOpts?: NgGridStackOptions;
+}
+
+export type NgCompInputs = {[key: string]: any};