{"version":3,"file":"gridstack-angular.mjs","sources":["../../../angular/projects/lib/src/lib/base-widget.ts","../../../angular/projects/lib/src/lib/gridstack-item.component.ts","../../../angular/projects/lib/src/lib/gridstack.component.ts","../../../angular/projects/lib/src/lib/gridstack.module.ts","../../../angular/projects/lib/src/index.ts","../../../angular/projects/lib/src/gridstack-angular.ts"],"sourcesContent":["/**\r\n * gridstack-item.component.ts 12.3.3\r\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\r\n */\r\n\r\n/**\r\n * Abstract base class that all custom widgets should extend.\r\n * \r\n * This class provides the interface needed for GridstackItemComponent to:\r\n * - Serialize/deserialize widget data\r\n * - Save/restore widget state\r\n * - Integrate with Angular lifecycle\r\n * \r\n * Extend this class when creating custom widgets for dynamic grids.\r\n * \r\n * @example\r\n * ```typescript\r\n * @Component({\r\n * selector: 'my-custom-widget',\r\n * template: '{{data}}
'\r\n * })\r\n * export class MyCustomWidget extends BaseWidget {\r\n * @Input() data: string = '';\r\n * \r\n * serialize() {\r\n * return { data: this.data };\r\n * }\r\n * }\r\n * ```\r\n */\r\n\r\nimport { Injectable } from '@angular/core';\r\nimport { NgCompInputs, NgGridStackWidget } from './types';\r\n\r\n/**\r\n * Base widget class for GridStack Angular integration.\r\n */\r\n@Injectable()\r\nexport abstract class BaseWidget {\r\n\r\n /**\r\n * Complete widget definition including position, size, and Angular-specific data.\r\n * Populated automatically when the widget is loaded or saved.\r\n */\r\n public widgetItem?: NgGridStackWidget;\r\n\r\n /**\r\n * Override this method to return serializable data for this widget.\r\n * \r\n * Return an object with properties that map to your component's @Input() fields.\r\n * The selector is handled automatically, so only include component-specific data.\r\n * \r\n * @returns Object containing serializable component data\r\n * \r\n * @example\r\n * ```typescript\r\n * serialize() {\r\n * return {\r\n * title: this.title,\r\n * value: this.value,\r\n * settings: this.settings\r\n * };\r\n * }\r\n * ```\r\n */\r\n public serialize(): NgCompInputs | undefined { return; }\r\n\r\n /**\r\n * Override this method to handle widget restoration from saved data.\r\n * \r\n * Use this for complex initialization that goes beyond simple @Input() mapping.\r\n * The default implementation automatically assigns input data to component properties.\r\n * \r\n * @param w The saved widget data including input properties\r\n * \r\n * @example\r\n * ```typescript\r\n * deserialize(w: NgGridStackWidget) {\r\n * super.deserialize(w); // Call parent for basic setup\r\n * \r\n * // Custom initialization logic\r\n * if (w.input?.complexData) {\r\n * this.processComplexData(w.input.complexData);\r\n * }\r\n * }\r\n * ```\r\n */\r\n public deserialize(w: NgGridStackWidget) {\r\n // save full description for meta data\r\n this.widgetItem = w;\r\n if (!w) return;\r\n\r\n if (w.input) Object.assign(this, w.input);\r\n }\r\n }\r\n","/**\n * gridstack-item.component.ts 12.3.3\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\n */\n\nimport { Component, ElementRef, Input, ViewChild, ViewContainerRef, OnDestroy, ComponentRef } from '@angular/core';\nimport { GridItemHTMLElement, GridStackNode } from 'gridstack';\nimport { BaseWidget } from './base-widget';\n\n/**\n * Extended HTMLElement interface for grid items.\n * Stores a back-reference to the Angular component for integration.\n */\nexport interface GridItemCompHTMLElement extends GridItemHTMLElement {\n /** Back-reference to the Angular GridStackItem component */\n _gridItemComp?: GridstackItemComponent;\n}\n\n/**\n * Angular component wrapper for individual GridStack items.\n * \n * This component represents a single grid item and handles:\n * - Dynamic content creation and management\n * - Integration with parent GridStack component\n * - Component lifecycle and cleanup\n * - Widget options and configuration\n * \n * Use in combination with GridstackComponent for the parent grid.\n * \n * @example\n * ```html\n * \n * \n * \n * \n * ```\n */\n@Component({\n selector: 'gridstack-item',\n template: `\n \n \n
`,\n styles: [`\n :host { display: block; }\n `],\n standalone: true,\n // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...\n})\nexport class GridstackItemComponent implements OnDestroy {\n\n /**\n * Container for dynamic component creation within this grid item.\n * Used to append child components programmatically.\n */\n @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;\n\n /**\n * Component reference for dynamic component removal.\n * Used internally when this component is created dynamically.\n */\n public ref: ComponentRef | undefined;\n\n /**\n * Reference to child widget component for serialization.\n * Used to save/restore additional data along with grid position.\n */\n public childWidget: BaseWidget | undefined;\n\n /**\n * Grid item configuration options.\n * Defines position, size, and behavior of this grid item.\n * \n * @example\n * ```typescript\n * itemOptions: GridStackNode = {\n * x: 0, y: 0, w: 2, h: 1,\n * noResize: true,\n * content: 'Item content'\n * };\n * ```\n */\n @Input() public set options(val: GridStackNode) {\n const grid = this.el.gridstackNode?.grid;\n if (grid) {\n // already built, do an update...\n grid.update(this.el, val);\n } else {\n // store our custom element in options so we can update it and not re-create a generic div!\n this._options = {...val, el: this.el};\n }\n }\n /** return the latest grid options (from GS once built, otherwise initial values) */\n public get options(): GridStackNode {\n return this.el.gridstackNode || this._options || {el: this.el};\n }\n\n protected _options?: GridStackNode;\n\n /** return the native element that contains grid specific fields as well */\n public get el(): GridItemCompHTMLElement { return this.elementRef.nativeElement; }\n\n /** clears the initial options now that we've built */\n public clearOptions() {\n delete this._options;\n }\n\n constructor(protected readonly elementRef: ElementRef) {\n this.el._gridItemComp = this;\n }\n\n public ngOnDestroy(): void {\n this.clearOptions();\n delete this.childWidget\n delete this.el._gridItemComp;\n delete this.container;\n delete this.ref;\n }\n}\n","/**\n * gridstack.component.ts 12.3.3\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};\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 * \n * Drag widgets here
\n * \n * ```\n */\n@Component({\n selector: 'gridstack',\n template: `\n \n ;\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 * \n * Drag widgets here to get started
\n * \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 * \n * \n * ```\n */\n \n /** Emitted when widgets are added to the grid */\n @Output() public addedCB = new EventEmitter();\n \n /** Emitted when grid layout changes */\n @Output() public changeCB = new EventEmitter();\n \n /** Emitted when grid is disabled */\n @Output() public disableCB = new EventEmitter();\n \n /** Emitted during widget drag operations */\n @Output() public dragCB = new EventEmitter();\n \n /** Emitted when widget drag starts */\n @Output() public dragStartCB = new EventEmitter();\n \n /** Emitted when widget drag stops */\n @Output() public dragStopCB = new EventEmitter();\n \n /** Emitted when widget is dropped */\n @Output() public droppedCB = new EventEmitter();\n \n /** Emitted when grid is enabled */\n @Output() public enableCB = new EventEmitter();\n \n /** Emitted when widgets are removed from the grid */\n @Output() public removedCB = new EventEmitter();\n \n /** Emitted during widget resize operations */\n @Output() public resizeCB = new EventEmitter();\n \n /** Emitted when widget resize starts */\n @Output() public resizeStartCB = new EventEmitter();\n \n /** Emitted when widget resize stops */\n @Output() public resizeStopCB = new EventEmitter();\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 | 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>) {\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): string {\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) {\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 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}","/**\r\n * gridstack.component.ts 12.3.3\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: '