gridstack 12.2.2 → 12.3.0

package/dist/angular/src/gridstack.component.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack.component.ts 12.2.2
+ * gridstack.component.ts 12.3.0
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
@@ -15,22 +15,55 @@ import { NgGridStackNode, NgGridStackWidget } from './types';
 import { BaseWidget } from './base-widget';
 import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
 
-/** events handlers emitters signature for different events */
+/**
+ * Event handler callback signatures for different GridStack events.
+ * These types define the structure of data passed to Angular event emitters.
+ */
+
+/** Callback for general events (enable, disable, etc.) */
 export type eventCB = {event: Event};
+
+/** Callback for element-specific events (resize, drag, etc.) */
 export type elementCB = {event: Event, el: GridItemHTMLElement};
+
+/** Callback for events affecting multiple nodes (change, etc.) */
 export type nodesCB = {event: Event, nodes: GridStackNode[]};
+
+/** Callback for drop events with before/after node state */
 export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode};
 
-/** store element to Ng Class pointer back */
+/**
+ * Extended HTMLElement interface for the grid container.
+ * Stores a back-reference to the Angular component for integration purposes.
+ */
 export interface GridCompHTMLElement extends GridHTMLElement {
+  /** Back-reference to the Angular GridStack component */
   _gridComp?: GridstackComponent;
 }
 
-/** selector string to runtime Type mapping */
+/**
+ * Mapping of selector strings to Angular component types.
+ * Used for dynamic component creation based on widget selectors.
+ */
 export type SelectorToType = {[key: string]: Type<Object>};
 
 /**
- * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
+ * Angular component wrapper for GridStack.
+ * 
+ * This component provides Angular integration for GridStack grids, handling:
+ * - Grid initialization and lifecycle
+ * - Dynamic component creation and management
+ * - Event binding and emission
+ * - Integration with Angular change detection
+ * 
+ * Use in combination with GridstackItemComponent for individual grid items.
+ * 
+ * @example
+ * ```html
+ * <gridstack [options]="gridOptions" (change)="onGridChange($event)">
+ *   <div empty-content>Drag widgets here</div>
+ * </gridstack>
+ * ```
  */
 @Component({
   selector: 'gridstack',
@@ -51,12 +84,31 @@ export type SelectorToType = {[key: string]: Type<Object>};
 })
 export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
 
-  /** track list of TEMPLATE (not recommended) grid items so we can sync between DOM and GS internals */
+  /**
+   * List of template-based grid items (not recommended approach).
+   * Used to sync between DOM and GridStack internals when items are defined in templates.
+   * Prefer dynamic component creation instead.
+   */
   @ContentChildren(GridstackItemComponent) public gridstackItems?: QueryList<GridstackItemComponent>;
-  /** container to append items dynamically (recommended way) */
+  /**
+   * Container for dynamic component creation (recommended approach).
+   * Used to append grid items programmatically at runtime.
+   */
   @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
 
-  /** initial options for creation of the grid */
+  /**
+   * Grid configuration options.
+   * Can be set before grid initialization or updated after grid is created.
+   * 
+   * @example
+   * ```typescript
+   * gridOptions: GridStackOptions = {
+   *   column: 12,
+   *   cellHeight: 'auto',
+   *   animate: true
+   * };
+   * ```
+   */
   @Input() public set options(o: GridStackOptions) {
     if (this._grid) {
       this._grid.updateOptions(o);
@@ -64,51 +116,130 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
       this._options = o;
     }
   }
-  /** return the current running options */
+  /** Get the current running grid options */
   public get options(): GridStackOptions { return this._grid?.opts || this._options || {}; }
 
-  /** true while ng-content with 'no-item-content' should be shown when last item is removed from a grid */
+  /**
+   * Controls whether empty content should be displayed.
+   * Set to true to show ng-content with 'empty-content' selector when grid has no items.
+   * 
+   * @example
+   * ```html
+   * <gridstack [isEmpty]="gridItems.length === 0">
+   *   <div empty-content>Drag widgets here to get started</div>
+   * </gridstack>
+   * ```
+   */
   @Input() public isEmpty?: boolean;
 
-  /** individual list of GridStackEvent callbacks handlers as output
-   * otherwise use this.grid.on('name1 name2 name3', callback) to handle multiple at once
-   * see https://github.com/gridstack/gridstack.js/blob/master/demo/events.js#L4
-   *
-   * Note: camel casing and 'CB' added at the end to prevent @angular-eslint/no-output-native
-   * eg: 'change' would trigger the raw CustomEvent so use different name.
+  /**
+   * GridStack event emitters for Angular integration.
+   * 
+   * These provide Angular-style event handling for GridStack events.
+   * Alternatively, use `this.grid.on('event1 event2', callback)` for multiple events.
+   * 
+   * Note: 'CB' suffix prevents conflicts with native DOM events.
+   * 
+   * @example
+   * ```html
+   * <gridstack (changeCB)="onGridChange($event)" (droppedCB)="onItemDropped($event)">
+   * </gridstack>
+   * ```
    */
+  
+  /** Emitted when widgets are added to the grid */
   @Output() public addedCB = new EventEmitter<nodesCB>();
+  
+  /** Emitted when grid layout changes */
   @Output() public changeCB = new EventEmitter<nodesCB>();
+  
+  /** Emitted when grid is disabled */
   @Output() public disableCB = new EventEmitter<eventCB>();
+  
+  /** Emitted during widget drag operations */
   @Output() public dragCB = new EventEmitter<elementCB>();
+  
+  /** Emitted when widget drag starts */
   @Output() public dragStartCB = new EventEmitter<elementCB>();
+  
+  /** Emitted when widget drag stops */
   @Output() public dragStopCB = new EventEmitter<elementCB>();
+  
+  /** Emitted when widget is dropped */
   @Output() public droppedCB = new EventEmitter<droppedCB>();
+  
+  /** Emitted when grid is enabled */
   @Output() public enableCB = new EventEmitter<eventCB>();
+  
+  /** Emitted when widgets are removed from the grid */
   @Output() public removedCB = new EventEmitter<nodesCB>();
+  
+  /** Emitted during widget resize operations */
   @Output() public resizeCB = new EventEmitter<elementCB>();
+  
+  /** Emitted when widget resize starts */
   @Output() public resizeStartCB = new EventEmitter<elementCB>();
+  
+  /** Emitted when widget resize stops */
   @Output() public resizeStopCB = new EventEmitter<elementCB>();
 
-  /** return the native element that contains grid specific fields as well */
+  /**
+   * Get the native DOM element that contains grid-specific fields.
+   * This element has GridStack properties attached to it.
+   */
   public get el(): GridCompHTMLElement { return this.elementRef.nativeElement; }
 
-  /** return the GridStack class */
+  /**
+   * Get the underlying GridStack instance.
+   * Use this to access GridStack API methods directly.
+   * 
+   * @example
+   * ```typescript
+   * this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1});
+   * ```
+   */
   public get grid(): GridStack | undefined { return this._grid; }
 
-  /** ComponentRef of ourself - used by dynamic object to correctly get removed */
+  /**
+   * Component reference for dynamic component removal.
+   * Used internally when this component is created dynamically.
+   */
   public ref: ComponentRef<GridstackComponent> | undefined;
 
   /**
-   * stores the selector -> Type mapping, so we can create items dynamically from a string.
-   * Unfortunately Ng doesn't provide public access to that mapping.
+   * Mapping of component selectors to their types for dynamic creation.
+   * 
+   * This enables dynamic component instantiation from string selectors.
+   * Angular doesn't provide public access to this mapping, so we maintain our own.
+   * 
+   * @example
+   * ```typescript
+   * GridstackComponent.addComponentToSelectorType([MyWidgetComponent]);
+   * ```
    */
   public static selectorToType: SelectorToType = {};
-  /** add a list of ng Component to be mapped to selector */
+  /**
+   * Register a list of Angular components for dynamic creation.
+   * 
+   * @param typeList Array of component types to register
+   * 
+   * @example
+   * ```typescript
+   * GridstackComponent.addComponentToSelectorType([
+   *   MyWidgetComponent,
+   *   AnotherWidgetComponent
+   * ]);
+   * ```
+   */
   public static addComponentToSelectorType(typeList: Array<Type<Object>>) {
     typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type);
   }
-  /** return the ng Component selector */
+  /**
+   * Extract the selector string from an Angular component type.
+   * 
+   * @param type The component type to get selector from
+   * @returns The component's selector string
+   */
   public static getSelector(type: Type<Object>): string {
     return reflectComponentType(type)!.selector;
   }

package/dist/angular/src/gridstack.module.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack.component.ts 12.2.2
+ * gridstack.component.ts 12.3.0
  * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
  */
 
@@ -8,7 +8,29 @@ import { NgModule } from "@angular/core";
 import { GridstackItemComponent } from "./gridstack-item.component";
 import { GridstackComponent } from "./gridstack.component";
 
-// @deprecated use GridstackComponent and GridstackItemComponent as standalone components
+/**
+ * @deprecated Use GridstackComponent and GridstackItemComponent as standalone components instead.
+ * 
+ * This NgModule is provided for backward compatibility but is no longer the recommended approach.
+ * Import components directly in your standalone components or use the new Angular module structure.
+ * 
+ * @example
+ * ```typescript
+ * // Preferred approach - standalone components
+ * @Component({
+ *   selector: 'my-app',
+ *   imports: [GridstackComponent, GridstackItemComponent],
+ *   template: '<gridstack></gridstack>'
+ * })
+ * export class AppComponent {}
+ * 
+ * // Legacy approach (deprecated)
+ * @NgModule({
+ *   imports: [GridstackModule]
+ * })
+ * export class AppModule {}
+ * ```
+ */
 @NgModule({
   imports: [
     GridstackItemComponent,

package/dist/angular/src/types.ts

@@ -0,0 +1,54 @@
+/**
+ * gridstack-item.component.ts 12.3.0
+ * Copyright (c) 2025 Alain Dumesny - see GridStack root license
+ */
+
+import { GridStackNode, GridStackOptions, GridStackWidget } from "gridstack";
+
+/**
+ * Extended GridStackWidget interface for Angular integration.
+ * Adds Angular-specific properties for dynamic component creation.
+ */
+export interface NgGridStackWidget extends GridStackWidget {
+  /** Angular component selector for dynamic creation (e.g., 'my-widget') */
+  selector?: string;
+  /** Serialized data for component @Input() properties */
+  input?: NgCompInputs;
+  /** Configuration for nested sub-grids */
+  subGridOpts?: NgGridStackOptions;
+}
+
+/**
+ * Extended GridStackNode interface for Angular integration.
+ * Adds component selector for dynamic content creation.
+ */
+export interface NgGridStackNode extends GridStackNode {
+  /** Angular component selector for this node's content */
+  selector?: string;
+}
+
+/**
+ * Extended GridStackOptions interface for Angular integration.
+ * Supports Angular-specific widget definitions and nested grids.
+ */
+export interface NgGridStackOptions extends GridStackOptions {
+  /** Array of Angular widget definitions for initial grid setup */
+  children?: NgGridStackWidget[];
+  /** Configuration for nested sub-grids (Angular-aware) */
+  subGridOpts?: NgGridStackOptions;
+}
+
+/**
+ * Type for component input data serialization.
+ * Maps @Input() property names to their values for widget persistence.
+ * 
+ * @example
+ * ```typescript
+ * const inputs: NgCompInputs = {
+ *   title: 'My Widget',
+ *   value: 42,
+ *   config: { enabled: true }
+ * };
+ * ```
+ */
+export type NgCompInputs = {[key: string]: any};

package/dist/dd-base-impl.d.ts

@@ -1,20 +1,69 @@
 /**
- * dd-base-impl.ts 12.2.2
- * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
+ * dd-base-impl.ts 12.3.0
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+/**
+ * Type for event callback functions used in drag & drop operations.
+ * Can return boolean to indicate if the event should continue propagation.
  */
 export type EventCallback = (event: Event) => boolean | void;
+/**
+ * Abstract base class for all drag & drop implementations.
+ * Provides common functionality for event handling, enable/disable state,
+ * and lifecycle management used by draggable, droppable, and resizable implementations.
+ */
 export declare abstract class DDBaseImplement {
-    /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */
+    /**
+     * Returns the current disabled state.
+     * Note: Use enable()/disable() methods to change state as other operations need to happen.
+     */
     get disabled(): boolean;
+    /**
+     * Register an event callback for the specified event.
+     *
+     * @param event - Event name to listen for
+     * @param callback - Function to call when event occurs
+     */
     on(event: string, callback: EventCallback): void;
+    /**
+     * Unregister an event callback for the specified event.
+     *
+     * @param event - Event name to stop listening for
+     */
     off(event: string): void;
+    /**
+     * Enable this drag & drop implementation.
+     * Subclasses should override to perform additional setup.
+     */
     enable(): void;
+    /**
+     * Disable this drag & drop implementation.
+     * Subclasses should override to perform additional cleanup.
+     */
     disable(): void;
+    /**
+     * Destroy this drag & drop implementation and clean up resources.
+     * Removes all event handlers and clears internal state.
+     */
     destroy(): void;
+    /**
+     * Trigger a registered event callback if one exists and the implementation is enabled.
+     *
+     * @param eventName - Name of the event to trigger
+     * @param event - DOM event object to pass to the callback
+     * @returns Result from the callback function, if any
+     */
     triggerEvent(eventName: string, event: Event): boolean | void;
 }
+/**
+ * Interface for HTML elements extended with drag & drop options.
+ * Used to associate DD configuration with DOM elements.
+ */
 export interface HTMLElementExtendOpt<T> {
+    /** The HTML element being extended */
     el: HTMLElement;
+    /** The drag & drop options/configuration */
     option: T;
+    /** Method to update the options and return the DD implementation */
     updateOption(T: any): DDBaseImplement;
 }

package/dist/dd-base-impl.js

@@ -1,29 +1,67 @@
 /**
- * dd-base-impl.ts 12.2.2
- * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
+ * dd-base-impl.ts 12.3.0
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
+ */
+/**
+ * Abstract base class for all drag & drop implementations.
+ * Provides common functionality for event handling, enable/disable state,
+ * and lifecycle management used by draggable, droppable, and resizable implementations.
  */
 export class DDBaseImplement {
     constructor() {
         /** @internal */
         this._eventRegister = {};
     }
-    /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */
+    /**
+     * Returns the current disabled state.
+     * Note: Use enable()/disable() methods to change state as other operations need to happen.
+     */
     get disabled() { return this._disabled; }
+    /**
+     * Register an event callback for the specified event.
+     *
+     * @param event - Event name to listen for
+     * @param callback - Function to call when event occurs
+     */
     on(event, callback) {
         this._eventRegister[event] = callback;
     }
+    /**
+     * Unregister an event callback for the specified event.
+     *
+     * @param event - Event name to stop listening for
+     */
     off(event) {
         delete this._eventRegister[event];
     }
+    /**
+     * Enable this drag & drop implementation.
+     * Subclasses should override to perform additional setup.
+     */
     enable() {
         this._disabled = false;
     }
+    /**
+     * Disable this drag & drop implementation.
+     * Subclasses should override to perform additional cleanup.
+     */
     disable() {
         this._disabled = true;
     }
+    /**
+     * Destroy this drag & drop implementation and clean up resources.
+     * Removes all event handlers and clears internal state.
+     */
     destroy() {
         delete this._eventRegister;
     }
+    /**
+     * Trigger a registered event callback if one exists and the implementation is enabled.
+     *
+     * @param eventName - Name of the event to trigger
+     * @param event - DOM event object to pass to the callback
+     * @returns Result from the callback function, if any
+     */
     triggerEvent(eventName, event) {
         if (!this.disabled && this._eventRegister && this._eventRegister[eventName])
             return this._eventRegister[eventName](event);

package/dist/dd-base-impl.js.map

@@ -1 +1 @@
-{"version":3,"file":"dd-base-impl.js","sourceRoot":"","sources":["../src/dd-base-impl.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,MAAM,OAAgB,eAAe;IAArC;QAME,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IA0BT,CAAC;IAlCC,mHAAmH;IACnH,IAAW,QAAQ,KAAgB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IASpD,EAAE,CAAC,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAEM,GAAG,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,YAAY,CAAC,SAAiB,EAAE,KAAY;QACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;YACzE,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;CACF","sourcesContent":["/**\n * dd-base-impl.ts 12.2.2\n * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license\n */\n\nexport type EventCallback = (event: Event) => boolean|void;\nexport abstract class DDBaseImplement {\n  /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */\n  public get disabled(): boolean   { return this._disabled; }\n\n  /** @internal */\n  protected _disabled: boolean; // initial state to differentiate from false\n  /** @internal */\n  protected _eventRegister: {\n    [eventName: string]: EventCallback;\n  } = {};\n\n  public on(event: string, callback: EventCallback): void {\n    this._eventRegister[event] = callback;\n  }\n\n  public off(event: string): void {\n    delete this._eventRegister[event];\n  }\n\n  public enable(): void {\n    this._disabled = false;\n  }\n\n  public disable(): void {\n    this._disabled = true;\n  }\n\n  public destroy(): void {\n    delete this._eventRegister;\n  }\n\n  public triggerEvent(eventName: string, event: Event): boolean|void {\n    if (!this.disabled && this._eventRegister && this._eventRegister[eventName])\n      return this._eventRegister[eventName](event);\n  }\n}\n\nexport interface HTMLElementExtendOpt<T> {\n  el: HTMLElement;\n  option: T;\n  updateOption(T): DDBaseImplement;\n}\n"]}
+{"version":3,"file":"dd-base-impl.js","sourceRoot":"","sources":["../src/dd-base-impl.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAQH;;;;GAIG;AACH,MAAM,OAAgB,eAAe;IAArC;QASE,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IAwDT,CAAC;IAnEC;;;OAGG;IACH,IAAW,QAAQ,KAAgB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAS3D;;;;;OAKG;IACI,EAAE,CAAC,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACI,GAAG,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAED;;;OAGG;IACI,MAAM;QACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAED;;;OAGG;IACI,OAAO;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAED;;;OAGG;IACI,OAAO;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED;;;;;;OAMG;IACI,YAAY,CAAC,SAAiB,EAAE,KAAY;QACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;YACzE,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;CACF","sourcesContent":["/**\n * dd-base-impl.ts 12.3.0\n * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license\n */\n\n/**\n * Type for event callback functions used in drag & drop operations.\n * Can return boolean to indicate if the event should continue propagation.\n */\nexport type EventCallback = (event: Event) => boolean|void;\n\n/**\n * Abstract base class for all drag & drop implementations.\n * Provides common functionality for event handling, enable/disable state,\n * and lifecycle management used by draggable, droppable, and resizable implementations.\n */\nexport abstract class DDBaseImplement {\n  /**\n   * Returns the current disabled state.\n   * Note: Use enable()/disable() methods to change state as other operations need to happen.\n   */\n  public get disabled(): boolean   { return this._disabled; }\n\n  /** @internal */\n  protected _disabled: boolean; // initial state to differentiate from false\n  /** @internal */\n  protected _eventRegister: {\n    [eventName: string]: EventCallback;\n  } = {};\n\n  /**\n   * Register an event callback for the specified event.\n   * \n   * @param event - Event name to listen for\n   * @param callback - Function to call when event occurs\n   */\n  public on(event: string, callback: EventCallback): void {\n    this._eventRegister[event] = callback;\n  }\n\n  /**\n   * Unregister an event callback for the specified event.\n   * \n   * @param event - Event name to stop listening for\n   */\n  public off(event: string): void {\n    delete this._eventRegister[event];\n  }\n\n  /**\n   * Enable this drag & drop implementation.\n   * Subclasses should override to perform additional setup.\n   */\n  public enable(): void {\n    this._disabled = false;\n  }\n\n  /**\n   * Disable this drag & drop implementation.\n   * Subclasses should override to perform additional cleanup.\n   */\n  public disable(): void {\n    this._disabled = true;\n  }\n\n  /**\n   * Destroy this drag & drop implementation and clean up resources.\n   * Removes all event handlers and clears internal state.\n   */\n  public destroy(): void {\n    delete this._eventRegister;\n  }\n\n  /**\n   * Trigger a registered event callback if one exists and the implementation is enabled.\n   * \n   * @param eventName - Name of the event to trigger\n   * @param event - DOM event object to pass to the callback\n   * @returns Result from the callback function, if any\n   */\n  public triggerEvent(eventName: string, event: Event): boolean|void {\n    if (!this.disabled && this._eventRegister && this._eventRegister[eventName])\n      return this._eventRegister[eventName](event);\n  }\n}\n\n/**\n * Interface for HTML elements extended with drag & drop options.\n * Used to associate DD configuration with DOM elements.\n */\nexport interface HTMLElementExtendOpt<T> {\n  /** The HTML element being extended */\n  el: HTMLElement;\n  /** The drag & drop options/configuration */\n  option: T;\n  /** Method to update the options and return the DD implementation */\n  updateOption(T): DDBaseImplement;\n}\n"]}

package/dist/dd-draggable.d.ts

@@ -1,6 +1,6 @@
 /**
- * dd-draggable.ts 12.2.2
- * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
+ * dd-draggable.ts 12.3.0
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
  */
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
 import { GridItemHTMLElement, DDDragOpt } from './types';

package/dist/dd-draggable.js

@@ -1,6 +1,6 @@
 /**
- * dd-draggable.ts 12.2.2
- * Copyright (c) 2021-2024  Alain Dumesny - see GridStack root license
+ * dd-draggable.ts 12.3.0
+ * Copyright (c) 2021-2025  Alain Dumesny - see GridStack root license
  */
 import { DDManager } from './dd-manager';
 import { Utils } from './utils';
@@ -260,6 +260,7 @@ class DDDraggable extends DDBaseImplement {
     /** @internal set the fix position of the dragged item */
     _setupHelperStyle(e) {
         this.helper.classList.add('ui-draggable-dragging');
+        this.el.gridstackNode?.grid?.el.classList.add('grid-stack-dragging');
         // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593
         const style = this.helper.style;
         style.pointerEvents = 'none'; // needed for over items to get enter/leave
@@ -280,6 +281,7 @@ class DDDraggable extends DDBaseImplement {
     /** @internal restore back the original style before dragging */
     _removeHelperStyle() {
         this.helper.classList.remove('ui-draggable-dragging');
+        this.el.gridstackNode?.grid?.el.classList.remove('grid-stack-dragging');
         const node = this.helper?.gridstackNode;
         // don't bother restoring styles if we're gonna remove anyway...
         if (!node?._isAboutToRemove && this.dragElementOriginStyle) {