gridstack 12.4.0 → 12.4.2

package/dist/angular/projects/lib/src/lib/gridstack.component.js

@@ -1,457 +0,0 @@
-/**
- * gridstack.component.ts 12.4.0
- * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
- */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var GridstackComponent_1;
-import { Component, ContentChildren, ElementRef, EventEmitter, Input, Output, QueryList, ViewChild, ViewContainerRef, reflectComponentType } from '@angular/core';
-import { NgIf } from '@angular/common';
-import { GridStack } from 'gridstack';
-import { GridstackItemComponent } from './gridstack-item.component';
-/**
- * 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>
- * ```
- */
-let GridstackComponent = GridstackComponent_1 = class GridstackComponent {
-    /**
-     * 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
-     * };
-     * ```
-     */
-    set options(o) {
-        if (this._grid) {
-            this._grid.updateOptions(o);
-        }
-        else {
-            this._options = o;
-        }
-    }
-    /** Get the current running grid options */
-    get options() { return this._grid?.opts || this._options || {}; }
-    /**
-     * Get the native DOM element that contains grid-specific fields.
-     * This element has GridStack properties attached to it.
-     */
-    get el() { return this.elementRef.nativeElement; }
-    /**
-     * 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});
-     * ```
-     */
-    get grid() { return this._grid; }
-    /**
-     * Register a list of Angular components for dynamic creation.
-     *
-     * @param typeList Array of component types to register
-     *
-     * @example
-     * ```typescript
-     * GridstackComponent.addComponentToSelectorType([
-     *   MyWidgetComponent,
-     *   AnotherWidgetComponent
-     * ]);
-     * ```
-     */
-    static addComponentToSelectorType(typeList) {
-        typeList.forEach(type => GridstackComponent_1.selectorToType[GridstackComponent_1.getSelector(type)] = type);
-    }
-    /**
-     * Extract the selector string from an Angular component type.
-     *
-     * @param type The component type to get selector from
-     * @returns The component's selector string
-     */
-    static getSelector(type) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return reflectComponentType(type).selector;
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        /**
-         * 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 */
-        this.addedCB = new EventEmitter();
-        /** Emitted when grid layout changes */
-        this.changeCB = new EventEmitter();
-        /** Emitted when grid is disabled */
-        this.disableCB = new EventEmitter();
-        /** Emitted during widget drag operations */
-        this.dragCB = new EventEmitter();
-        /** Emitted when widget drag starts */
-        this.dragStartCB = new EventEmitter();
-        /** Emitted when widget drag stops */
-        this.dragStopCB = new EventEmitter();
-        /** Emitted when widget is dropped */
-        this.droppedCB = new EventEmitter();
-        /** Emitted when grid is enabled */
-        this.enableCB = new EventEmitter();
-        /** Emitted when widgets are removed from the grid */
-        this.removedCB = new EventEmitter();
-        /** Emitted during widget resize operations */
-        this.resizeCB = new EventEmitter();
-        /** Emitted when widget resize starts */
-        this.resizeStartCB = new EventEmitter();
-        /** Emitted when widget resize stops */
-        this.resizeStopCB = new EventEmitter();
-        // set globally our method to create the right widget type
-        if (!GridStack.addRemoveCB) {
-            GridStack.addRemoveCB = gsCreateNgComponents;
-        }
-        if (!GridStack.saveCB) {
-            GridStack.saveCB = gsSaveAdditionalNgInfo;
-        }
-        if (!GridStack.updateCB) {
-            GridStack.updateCB = gsUpdateNgComponents;
-        }
-        this.el._gridComp = this;
-    }
-    ngOnInit() {
-        // init ourself before any template children are created since we track them below anyway - no need to double create+update widgets
-        this.loaded = !!this.options?.children?.length;
-        this._grid = GridStack.init(this._options, this.el);
-        delete this._options; // GS has it now
-        this.checkEmpty();
-    }
-    /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
-    ngAfterContentInit() {
-        // track whenever the children list changes and update the layout...
-        this._sub = this.gridstackItems?.changes.subscribe(() => this.updateAll());
-        // ...and do this once at least unless we loaded children already
-        if (!this.loaded)
-            this.updateAll();
-        this.hookEvents(this.grid);
-    }
-    ngOnDestroy() {
-        this.unhookEvents(this._grid);
-        this._sub?.unsubscribe();
-        this._grid?.destroy();
-        delete this._grid;
-        delete this.el._gridComp;
-        delete this.container;
-        delete this.ref;
-    }
-    /**
-     * called when the TEMPLATE (not recommended) list of items changes - get a list of nodes and
-     * update the layout accordingly (which will take care of adding/removing items changed by Angular)
-     */
-    updateAll() {
-        if (!this.grid)
-            return;
-        const layout = [];
-        this.gridstackItems?.forEach(item => {
-            layout.push(item.options);
-            item.clearOptions();
-        });
-        this.grid.load(layout); // efficient that does diffs only
-    }
-    /** check if the grid is empty, if so show alternative content */
-    checkEmpty() {
-        if (!this.grid)
-            return;
-        this.isEmpty = !this.grid.engine.nodes.length;
-    }
-    /** get all known events as easy to use Outputs for convenience */
-    hookEvents(grid) {
-        if (!grid)
-            return;
-        // nested grids don't have events in v12.1+ so skip
-        if (grid.parentGridNode)
-            return;
-        grid
-            .on('added', (event, nodes) => {
-            const gridComp = (nodes[0].grid?.el)._gridComp || this;
-            gridComp.checkEmpty();
-            this.addedCB.emit({ event, nodes });
-        })
-            .on('change', (event, nodes) => this.changeCB.emit({ event, nodes }))
-            .on('disable', (event) => this.disableCB.emit({ event }))
-            .on('drag', (event, el) => this.dragCB.emit({ event, el }))
-            .on('dragstart', (event, el) => this.dragStartCB.emit({ event, el }))
-            .on('dragstop', (event, el) => this.dragStopCB.emit({ event, el }))
-            .on('dropped', (event, previousNode, newNode) => this.droppedCB.emit({ event, previousNode, newNode }))
-            .on('enable', (event) => this.enableCB.emit({ event }))
-            .on('removed', (event, nodes) => {
-            const gridComp = (nodes[0].grid?.el)._gridComp || this;
-            gridComp.checkEmpty();
-            this.removedCB.emit({ event, nodes });
-        })
-            .on('resize', (event, el) => this.resizeCB.emit({ event, el }))
-            .on('resizestart', (event, el) => this.resizeStartCB.emit({ event, el }))
-            .on('resizestop', (event, el) => this.resizeStopCB.emit({ event, el }));
-    }
-    unhookEvents(grid) {
-        if (!grid)
-            return;
-        // nested grids don't have events in v12.1+ so skip
-        if (grid.parentGridNode)
-            return;
-        grid.off('added change disable drag dragstart dragstop dropped enable removed resize resizestart resizestop');
-    }
-};
-/**
- * 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]);
- * ```
- */
-GridstackComponent.selectorToType = {};
-__decorate([
-    ContentChildren(GridstackItemComponent),
-    __metadata("design:type", QueryList)
-], GridstackComponent.prototype, "gridstackItems", void 0);
-__decorate([
-    ViewChild('container', { read: ViewContainerRef, static: true }),
-    __metadata("design:type", ViewContainerRef)
-], GridstackComponent.prototype, "container", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], GridstackComponent.prototype, "options", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Boolean)
-], GridstackComponent.prototype, "isEmpty", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "addedCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "changeCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "disableCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "dragCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "dragStartCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "dragStopCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "droppedCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "enableCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "removedCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "resizeCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "resizeStartCB", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], GridstackComponent.prototype, "resizeStopCB", void 0);
-GridstackComponent = GridstackComponent_1 = __decorate([
-    Component({
-        selector: 'gridstack',
-        template: `
-    <!-- content to show when when grid is empty, like instructions on how to add widgets -->
-    <ng-content select="[empty-content]" *ngIf="isEmpty"></ng-content>
-    <!-- where dynamic items go -->
-    <ng-template #container></ng-template>
-    <!-- where template items go -->
-    <ng-content></ng-content>
-  `,
-        styles: [`
-    :host { display: block; }
-  `],
-        standalone: true,
-        imports: [NgIf]
-        // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
-    }),
-    __metadata("design:paramtypes", [ElementRef])
-], GridstackComponent);
-export { GridstackComponent };
-/**
- * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
- **/
-export function gsCreateNgComponents(host, n, add, isGrid) {
-    if (add) {
-        //
-        // create the component dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
-        //
-        if (!host)
-            return;
-        if (isGrid) {
-            // TODO: figure out how to create ng component inside regular Div. need to access app injectors...
-            // if (!container) {
-            //   const hostElement: Element = host;
-            //   const environmentInjector: EnvironmentInjector;
-            //   grid = createComponent(GridstackComponent, {environmentInjector, hostElement})?.instance;
-            // }
-            const gridItemComp = host.parentElement?._gridItemComp;
-            if (!gridItemComp)
-                return;
-            // check if gridItem has a child component with 'container' exposed to create under..
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const container = gridItemComp.childWidget?.container || gridItemComp.container;
-            const gridRef = container?.createComponent(GridstackComponent);
-            const grid = gridRef?.instance;
-            if (!grid)
-                return;
-            grid.ref = gridRef;
-            grid.options = n;
-            return grid.el;
-        }
-        else {
-            const gridComp = host._gridComp;
-            const gridItemRef = gridComp?.container?.createComponent(GridstackItemComponent);
-            const gridItem = gridItemRef?.instance;
-            if (!gridItem)
-                return;
-            gridItem.ref = gridItemRef;
-            // define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
-            const selector = n.selector;
-            const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
-            if (type) {
-                // shared code to create our selector component
-                const createComp = () => {
-                    const childWidget = gridItem.container?.createComponent(type)?.instance;
-                    // if proper BaseWidget subclass, save it and load additional data
-                    if (childWidget && typeof childWidget.serialize === 'function' && typeof childWidget.deserialize === 'function') {
-                        gridItem.childWidget = childWidget;
-                        childWidget.deserialize(n);
-                    }
-                };
-                const lazyLoad = n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;
-                if (lazyLoad) {
-                    if (!n.visibleObservable) {
-                        n.visibleObservable = new IntersectionObserver(([entry]) => {
-                            if (entry.isIntersecting) {
-                                n.visibleObservable?.disconnect();
-                                delete n.visibleObservable;
-                                createComp();
-                            }
-                        });
-                        window.setTimeout(() => n.visibleObservable?.observe(gridItem.el)); // wait until callee sets position attributes
-                    }
-                }
-                else
-                    createComp();
-            }
-            return gridItem.el;
-        }
-    }
-    else {
-        //
-        // REMOVE - have to call ComponentRef:destroy() for dynamic objects to correctly remove themselves
-        // Note: this will destroy all children dynamic components as well: gridItem -> childWidget
-        //
-        if (isGrid) {
-            const grid = n.el?._gridComp;
-            if (grid?.ref)
-                grid.ref.destroy();
-            else
-                grid?.ngOnDestroy();
-        }
-        else {
-            const gridItem = n.el?._gridItemComp;
-            if (gridItem?.ref)
-                gridItem.ref.destroy();
-            else
-                gridItem?.ngOnDestroy();
-        }
-    }
-    return;
-}
-/**
- * called for each item in the grid - check if additional information needs to be saved.
- * Note: since this is options minus gridstack protected members using Utils.removeInternalForSave(),
- * this typically doesn't need to do anything. However your custom Component @Input() are now supported
- * using BaseWidget.serialize()
- */
-export function gsSaveAdditionalNgInfo(n, w) {
-    const gridItem = n.el?._gridItemComp;
-    if (gridItem) {
-        const input = gridItem.childWidget?.serialize();
-        if (input) {
-            w.input = input;
-        }
-        return;
-    }
-    // else check if Grid
-    const grid = n.el?._gridComp;
-    if (grid) {
-        //.... save any custom data
-    }
-}
-/**
- * track when widgeta re updated (rather than created) to make sure we de-serialize them as well
- */
-export function gsUpdateNgComponents(n) {
-    const w = n;
-    const gridItem = n.el?._gridItemComp;
-    if (gridItem?.childWidget && w.input)
-        gridItem.childWidget.deserialize(w);
-}
-//# sourceMappingURL=gridstack.component.js.map

package/dist/angular/projects/lib/src/lib/gridstack.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gridstack.component.js","sourceRoot":"","sources":["../../../../../../angular/projects/lib/src/lib/gridstack.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * gridstack.component.ts 12.4.0\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\n */\n\nimport {\n  AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,\n  OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef\n} from '@angular/core';\nimport { NgIf } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';\n\nimport { NgGridStackNode, NgGridStackWidget } from './types';\nimport { BaseWidget } from './base-widget';\nimport { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';\n\n/**\n * Event handler callback signatures for different GridStack events.\n * These types define the structure of data passed to Angular event emitters.\n */\n\n/** Callback for general events (enable, disable, etc.) */\nexport type eventCB = {event: Event};\n\n/** Callback for element-specific events (resize, drag, etc.) */\nexport type elementCB = {event: Event, el: GridItemHTMLElement};\n\n/** Callback for events affecting multiple nodes (change, etc.) */\nexport type nodesCB = {event: Event, nodes: GridStackNode[]};\n\n/** Callback for drop events with before/after node state */\nexport type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode};\n\n/**\n * Extended HTMLElement interface for the grid container.\n * Stores a back-reference to the Angular component for integration purposes.\n */\nexport interface GridCompHTMLElement extends GridHTMLElement {\n  /** Back-reference to the Angular GridStack component */\n  _gridComp?: GridstackComponent;\n}\n\n/**\n * Mapping of selector strings to Angular component types.\n * Used for dynamic component creation based on widget selectors.\n */\nexport type SelectorToType = {[key: string]: Type<object>};\n\n/**\n * Angular component wrapper for GridStack.\n *\n * This component provides Angular integration for GridStack grids, handling:\n * - Grid initialization and lifecycle\n * - Dynamic component creation and management\n * - Event binding and emission\n * - Integration with Angular change detection\n *\n * Use in combination with GridstackItemComponent for individual grid items.\n *\n * @example\n * ```html\n * <gridstack [options]=\"gridOptions\" (change)=\"onGridChange($event)\">\n *   <div empty-content>Drag widgets here</div>\n * </gridstack>\n * ```\n */\n@Component({\n  selector: 'gridstack',\n  template: `\n    <!-- content to show when when grid is empty, like instructions on how to add widgets -->\n    <ng-content select=\"[empty-content]\" *ngIf=\"isEmpty\"></ng-content>\n    <!-- where dynamic items go -->\n    <ng-template #container></ng-template>\n    <!-- where template items go -->\n    <ng-content></ng-content>\n  `,\n  styles: [`\n    :host { display: block; }\n  `],\n  standalone: true,\n  imports: [NgIf]\n  // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...\n})\nexport class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {\n\n  /**\n   * List of template-based grid items (not recommended approach).\n   * Used to sync between DOM and GridStack internals when items are defined in templates.\n   * Prefer dynamic component creation instead.\n   */\n  @ContentChildren(GridstackItemComponent) public gridstackItems?: QueryList<GridstackItemComponent>;\n  /**\n   * Container for dynamic component creation (recommended approach).\n   * Used to append grid items programmatically at runtime.\n   */\n  @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;\n\n  /**\n   * Grid configuration options.\n   * Can be set before grid initialization or updated after grid is created.\n   *\n   * @example\n   * ```typescript\n   * gridOptions: GridStackOptions = {\n   *   column: 12,\n   *   cellHeight: 'auto',\n   *   animate: true\n   * };\n   * ```\n   */\n  @Input() public set options(o: GridStackOptions) {\n    if (this._grid) {\n      this._grid.updateOptions(o);\n    } else {\n      this._options = o;\n    }\n  }\n  /** Get the current running grid options */\n  public get options(): GridStackOptions { return this._grid?.opts || this._options || {}; }\n\n  /**\n   * Controls whether empty content should be displayed.\n   * Set to true to show ng-content with 'empty-content' selector when grid has no items.\n   *\n   * @example\n   * ```html\n   * <gridstack [isEmpty]=\"gridItems.length === 0\">\n   *   <div empty-content>Drag widgets here to get started</div>\n   * </gridstack>\n   * ```\n   */\n  @Input() public isEmpty?: boolean;\n\n  /**\n   * GridStack event emitters for Angular integration.\n   *\n   * These provide Angular-style event handling for GridStack events.\n   * Alternatively, use `this.grid.on('event1 event2', callback)` for multiple events.\n   *\n   * Note: 'CB' suffix prevents conflicts with native DOM events.\n   *\n   * @example\n   * ```html\n   * <gridstack (changeCB)=\"onGridChange($event)\" (droppedCB)=\"onItemDropped($event)\">\n   * </gridstack>\n   * ```\n   */\n\n  /** Emitted when widgets are added to the grid */\n  @Output() public addedCB = new EventEmitter<nodesCB>();\n\n  /** Emitted when grid layout changes */\n  @Output() public changeCB = new EventEmitter<nodesCB>();\n\n  /** Emitted when grid is disabled */\n  @Output() public disableCB = new EventEmitter<eventCB>();\n\n  /** Emitted during widget drag operations */\n  @Output() public dragCB = new EventEmitter<elementCB>();\n\n  /** Emitted when widget drag starts */\n  @Output() public dragStartCB = new EventEmitter<elementCB>();\n\n  /** Emitted when widget drag stops */\n  @Output() public dragStopCB = new EventEmitter<elementCB>();\n\n  /** Emitted when widget is dropped */\n  @Output() public droppedCB = new EventEmitter<droppedCB>();\n\n  /** Emitted when grid is enabled */\n  @Output() public enableCB = new EventEmitter<eventCB>();\n\n  /** Emitted when widgets are removed from the grid */\n  @Output() public removedCB = new EventEmitter<nodesCB>();\n\n  /** Emitted during widget resize operations */\n  @Output() public resizeCB = new EventEmitter<elementCB>();\n\n  /** Emitted when widget resize starts */\n  @Output() public resizeStartCB = new EventEmitter<elementCB>();\n\n  /** Emitted when widget resize stops */\n  @Output() public resizeStopCB = new EventEmitter<elementCB>();\n\n  /**\n   * Get the native DOM element that contains grid-specific fields.\n   * This element has GridStack properties attached to it.\n   */\n  public get el(): GridCompHTMLElement { return this.elementRef.nativeElement; }\n\n  /**\n   * Get the underlying GridStack instance.\n   * Use this to access GridStack API methods directly.\n   *\n   * @example\n   * ```typescript\n   * this.gridComponent.grid.addWidget({x: 0, y: 0, w: 2, h: 1});\n   * ```\n   */\n  public get grid(): GridStack | undefined { return this._grid; }\n\n  /**\n   * Component reference for dynamic component removal.\n   * Used internally when this component is created dynamically.\n   */\n  public ref: ComponentRef<GridstackComponent> | undefined;\n\n  /**\n   * Mapping of component selectors to their types for dynamic creation.\n   *\n   * This enables dynamic component instantiation from string selectors.\n   * Angular doesn't provide public access to this mapping, so we maintain our own.\n   *\n   * @example\n   * ```typescript\n   * GridstackComponent.addComponentToSelectorType([MyWidgetComponent]);\n   * ```\n   */\n  public static selectorToType: SelectorToType = {};\n  /**\n   * Register a list of Angular components for dynamic creation.\n   *\n   * @param typeList Array of component types to register\n   *\n   * @example\n   * ```typescript\n   * GridstackComponent.addComponentToSelectorType([\n   *   MyWidgetComponent,\n   *   AnotherWidgetComponent\n   * ]);\n   * ```\n   */\n  public static addComponentToSelectorType(typeList: Array<Type<object>>) {\n    typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type);\n  }\n  /**\n   * Extract the selector string from an Angular component type.\n   *\n   * @param type The component type to get selector from\n   * @returns The component's selector string\n   */\n  public static getSelector(type: Type<object>): string {\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    return reflectComponentType(type)!.selector;\n  }\n\n  protected _options?: GridStackOptions;\n  protected _grid?: GridStack;\n  protected _sub: Subscription | undefined;\n  protected loaded?: boolean;\n\n  constructor(protected readonly elementRef: ElementRef<GridCompHTMLElement>) {\n    // set globally our method to create the right widget type\n    if (!GridStack.addRemoveCB) {\n      GridStack.addRemoveCB = gsCreateNgComponents;\n    }\n    if (!GridStack.saveCB) {\n      GridStack.saveCB = gsSaveAdditionalNgInfo;\n    }\n    if (!GridStack.updateCB) {\n      GridStack.updateCB = gsUpdateNgComponents;\n    }\n    this.el._gridComp = this;\n  }\n\n  public ngOnInit(): void {\n    // init ourself before any template children are created since we track them below anyway - no need to double create+update widgets\n    this.loaded = !!this.options?.children?.length;\n    this._grid = GridStack.init(this._options, this.el);\n    delete this._options; // GS has it now\n\n    this.checkEmpty();\n  }\n\n  /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */\n  public ngAfterContentInit(): void {\n    // track whenever the children list changes and update the layout...\n    this._sub = this.gridstackItems?.changes.subscribe(() => this.updateAll());\n    // ...and do this once at least unless we loaded children already\n    if (!this.loaded) this.updateAll();\n    this.hookEvents(this.grid);\n  }\n\n  public ngOnDestroy(): void {\n    this.unhookEvents(this._grid);\n    this._sub?.unsubscribe();\n    this._grid?.destroy();\n    delete this._grid;\n    delete this.el._gridComp;\n    delete this.container;\n    delete this.ref;\n  }\n\n  /**\n   * called when the TEMPLATE (not recommended) list of items changes - get a list of nodes and\n   * update the layout accordingly (which will take care of adding/removing items changed by Angular)\n   */\n  public updateAll() {\n    if (!this.grid) return;\n    const layout: GridStackWidget[] = [];\n    this.gridstackItems?.forEach(item => {\n      layout.push(item.options);\n      item.clearOptions();\n    });\n    this.grid.load(layout); // efficient that does diffs only\n  }\n\n  /** check if the grid is empty, if so show alternative content */\n  public checkEmpty() {\n    if (!this.grid) return;\n    this.isEmpty = !this.grid.engine.nodes.length;\n  }\n\n  /** get all known events as easy to use Outputs for convenience */\n  protected hookEvents(grid?: GridStack) {\n    if (!grid) return;\n    // nested grids don't have events in v12.1+ so skip\n    if (grid.parentGridNode) return;\n    grid\n      .on('added', (event: Event, nodes: GridStackNode[]) => {\n        const gridComp = (nodes[0].grid?.el as GridCompHTMLElement)._gridComp || this;\n        gridComp.checkEmpty();\n        this.addedCB.emit({event, nodes});\n      })\n      .on('change', (event: Event, nodes: GridStackNode[]) => this.changeCB.emit({event, nodes}))\n      .on('disable', (event: Event) => this.disableCB.emit({event}))\n      .on('drag', (event: Event, el: GridItemHTMLElement) => this.dragCB.emit({event, el}))\n      .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.dragStartCB.emit({event, el}))\n      .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.dragStopCB.emit({event, el}))\n      .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.droppedCB.emit({event, previousNode, newNode}))\n      .on('enable', (event: Event) => this.enableCB.emit({event}))\n      .on('removed', (event: Event, nodes: GridStackNode[]) => {\n        const gridComp = (nodes[0].grid?.el as GridCompHTMLElement)._gridComp || this;\n        gridComp.checkEmpty();\n        this.removedCB.emit({event, nodes});\n      })\n      .on('resize', (event: Event, el: GridItemHTMLElement) => this.resizeCB.emit({event, el}))\n      .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el}))\n      .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))\n  }\n\n  protected unhookEvents(grid?: GridStack) {\n    if (!grid) return;\n    // nested grids don't have events in v12.1+ so skip\n    if (grid.parentGridNode) return;\n    grid.off('added change disable drag dragstart dragstop dropped enable removed resize resizestart resizestop');\n  }\n}\n\n/**\n * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)\n **/\nexport function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, n: NgGridStackNode, add: boolean, isGrid: boolean): HTMLElement | undefined {\n  if (add) {\n    //\n    // create the component dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html\n    //\n    if (!host) return;\n    if (isGrid) {\n      // TODO: figure out how to create ng component inside regular Div. need to access app injectors...\n      // if (!container) {\n      //   const hostElement: Element = host;\n      //   const environmentInjector: EnvironmentInjector;\n      //   grid = createComponent(GridstackComponent, {environmentInjector, hostElement})?.instance;\n      // }\n\n      const gridItemComp = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp;\n      if (!gridItemComp) return;\n      // check if gridItem has a child component with 'container' exposed to create under..\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const container = (gridItemComp.childWidget as any)?.container || gridItemComp.container;\n      const gridRef = container?.createComponent(GridstackComponent);\n      const grid = gridRef?.instance;\n      if (!grid) return;\n      grid.ref = gridRef;\n      grid.options = n;\n      return grid.el;\n    } else {\n      const gridComp = (host as GridCompHTMLElement)._gridComp;\n      const gridItemRef = gridComp?.container?.createComponent(GridstackItemComponent);\n      const gridItem = gridItemRef?.instance;\n      if (!gridItem) return;\n      gridItem.ref = gridItemRef\n\n      // define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic\n      const selector = n.selector;\n      const type = selector ? GridstackComponent.selectorToType[selector] : undefined;\n      if (type) {\n        // shared code to create our selector component\n        const createComp = () => {\n          const childWidget = gridItem.container?.createComponent(type)?.instance as BaseWidget;\n          // if proper BaseWidget subclass, save it and load additional data\n          if (childWidget && typeof childWidget.serialize === 'function' && typeof childWidget.deserialize === 'function') {\n            gridItem.childWidget = childWidget;\n            childWidget.deserialize(n);\n          }\n        }\n\n        const lazyLoad = n.lazyLoad || n.grid?.opts?.lazyLoad && n.lazyLoad !== false;\n        if (lazyLoad) {\n          if (!n.visibleObservable) {\n            n.visibleObservable = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) {\n              n.visibleObservable?.disconnect();\n              delete n.visibleObservable;\n              createComp();\n            }});\n            window.setTimeout(() => n.visibleObservable?.observe(gridItem.el)); // wait until callee sets position attributes\n          }\n        } else createComp();\n      }\n\n      return gridItem.el;\n    }\n  } else {\n    //\n    // REMOVE - have to call ComponentRef:destroy() for dynamic objects to correctly remove themselves\n    // Note: this will destroy all children dynamic components as well: gridItem -> childWidget\n    //\n    if (isGrid) {\n      const grid = (n.el as GridCompHTMLElement)?._gridComp;\n      if (grid?.ref) grid.ref.destroy();\n      else grid?.ngOnDestroy();\n    } else {\n      const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;\n      if (gridItem?.ref) gridItem.ref.destroy();\n      else gridItem?.ngOnDestroy();\n    }\n  }\n  return;\n}\n\n/**\n * called for each item in the grid - check if additional information needs to be saved.\n * Note: since this is options minus gridstack protected members using Utils.removeInternalForSave(),\n * this typically doesn't need to do anything. However your custom Component @Input() are now supported\n * using BaseWidget.serialize()\n */\nexport function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget) {\n  const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;\n  if (gridItem) {\n    const input = gridItem.childWidget?.serialize();\n    if (input) {\n      w.input = input;\n    }\n    return;\n  }\n  // else check if Grid\n  const grid = (n.el as GridCompHTMLElement)?._gridComp;\n  if (grid) {\n    //.... save any custom data\n  }\n}\n\n/**\n * track when widgeta re updated (rather than created) to make sure we de-serialize them as well\n */\nexport function gsUpdateNgComponents(n: NgGridStackNode) {\n  const w: NgGridStackWidget = n;\n  const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;\n  if (gridItem?.childWidget && w.input) gridItem.childWidget.deserialize(w);\n}"]}

package/dist/angular/projects/lib/src/lib/gridstack.module.d.ts

@@ -1,29 +0,0 @@
-/**
- * gridstack.component.ts 12.4.0
- * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
- */
-/**
- * @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 {}
- * ```
- */
-export declare class GridstackModule {
-}

package/dist/angular/projects/lib/src/lib/gridstack.module.js

@@ -1,52 +0,0 @@
-/**
- * gridstack.component.ts 12.4.0
- * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
- */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { NgModule } from "@angular/core";
-import { GridstackItemComponent } from "./gridstack-item.component";
-import { GridstackComponent } from "./gridstack.component";
-/**
- * @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 {}
- * ```
- */
-let GridstackModule = class GridstackModule {
-};
-GridstackModule = __decorate([
-    NgModule({
-        imports: [
-            GridstackItemComponent,
-            GridstackComponent,
-        ],
-        exports: [
-            GridstackItemComponent,
-            GridstackComponent,
-        ],
-    })
-], GridstackModule);
-export { GridstackModule };
-//# sourceMappingURL=gridstack.module.js.map

package/dist/angular/projects/lib/src/lib/gridstack.module.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gridstack.module.js","sourceRoot":"","sources":["../../../../../../angular/projects/lib/src/lib/gridstack.module.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;;;;;AAEH,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAWH,IAAa,eAAe,GAA5B,MAAa,eAAe;CAAG,CAAA;AAAlB,eAAe;IAV3B,QAAQ,CAAC;QACR,OAAO,EAAE;YACP,sBAAsB;YACtB,kBAAkB;SACnB;QACD,OAAO,EAAE;YACP,sBAAsB;YACtB,kBAAkB;SACnB;KACF,CAAC;GACW,eAAe,CAAG;SAAlB,eAAe","sourcesContent":["/**\r\n * gridstack.component.ts 12.4.0\r\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\r\n */\r\n\r\nimport { NgModule } from \"@angular/core\";\r\n\r\nimport { GridstackItemComponent } from \"./gridstack-item.component\";\r\nimport { GridstackComponent } from \"./gridstack.component\";\r\n\r\n/**\r\n * @deprecated Use GridstackComponent and GridstackItemComponent as standalone components instead.\r\n *\r\n * This NgModule is provided for backward compatibility but is no longer the recommended approach.\r\n * Import components directly in your standalone components or use the new Angular module structure.\r\n *\r\n * @example\r\n * ```typescript\r\n * // Preferred approach - standalone components\r\n * @Component({\r\n *   selector: 'my-app',\r\n *   imports: [GridstackComponent, GridstackItemComponent],\r\n *   template: '<gridstack></gridstack>'\r\n * })\r\n * export class AppComponent {}\r\n *\r\n * // Legacy approach (deprecated)\r\n * @NgModule({\r\n *   imports: [GridstackModule]\r\n * })\r\n * export class AppModule {}\r\n * ```\r\n */\r\n@NgModule({\r\n  imports: [\r\n    GridstackItemComponent,\r\n    GridstackComponent,\r\n  ],\r\n  exports: [\r\n    GridstackItemComponent,\r\n    GridstackComponent,\r\n  ],\r\n})\r\nexport class GridstackModule {}\r\n"]}

package/dist/angular/projects/lib/src/lib/types.d.ts

@@ -1,51 +0,0 @@
-/**
- * gridstack-item.component.ts 12.4.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/angular/projects/lib/src/lib/types.js

@@ -1,6 +0,0 @@
-/**
- * gridstack-item.component.ts 12.4.0
- * Copyright (c) 2025 Alain Dumesny - see GridStack root license
- */
-export {};
-//# sourceMappingURL=types.js.map