gridstack 12.3.3 → 12.4.0

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

@@ -0,0 +1,112 @@
+/**
+ * gridstack-item.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);
+};
+import { Component, ElementRef, Input, ViewChild, ViewContainerRef } from '@angular/core';
+/**
+ * Angular component wrapper for individual GridStack items.
+ *
+ * This component represents a single grid item and handles:
+ * - Dynamic content creation and management
+ * - Integration with parent GridStack component
+ * - Component lifecycle and cleanup
+ * - Widget options and configuration
+ *
+ * Use in combination with GridstackComponent for the parent grid.
+ *
+ * @example
+ * ```html
+ * <gridstack>
+ *   <gridstack-item [options]="{x: 0, y: 0, w: 2, h: 1}">
+ *     <my-widget-component></my-widget-component>
+ *   </gridstack-item>
+ * </gridstack>
+ * ```
+ */
+let GridstackItemComponent = class GridstackItemComponent {
+    /**
+     * Grid item configuration options.
+     * Defines position, size, and behavior of this grid item.
+     *
+     * @example
+     * ```typescript
+     * itemOptions: GridStackNode = {
+     *   x: 0, y: 0, w: 2, h: 1,
+     *   noResize: true,
+     *   content: 'Item content'
+     * };
+     * ```
+     */
+    set options(val) {
+        const grid = this.el.gridstackNode?.grid;
+        if (grid) {
+            // already built, do an update...
+            grid.update(this.el, val);
+        }
+        else {
+            // store our custom element in options so we can update it and not re-create a generic div!
+            this._options = { ...val, el: this.el };
+        }
+    }
+    /** return the latest grid options (from GS once built, otherwise initial values) */
+    get options() {
+        return this.el.gridstackNode || this._options || { el: this.el };
+    }
+    /** return the native element that contains grid specific fields as well */
+    get el() { return this.elementRef.nativeElement; }
+    /** clears the initial options now that we've built */
+    clearOptions() {
+        delete this._options;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.el._gridItemComp = this;
+    }
+    ngOnDestroy() {
+        this.clearOptions();
+        delete this.childWidget;
+        delete this.el._gridItemComp;
+        delete this.container;
+        delete this.ref;
+    }
+};
+__decorate([
+    ViewChild('container', { read: ViewContainerRef, static: true }),
+    __metadata("design:type", ViewContainerRef)
+], GridstackItemComponent.prototype, "container", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], GridstackItemComponent.prototype, "options", null);
+GridstackItemComponent = __decorate([
+    Component({
+        selector: 'gridstack-item',
+        template: `
+    <div class="grid-stack-item-content">
+      <!-- where dynamic items go based on component selector (recommended way), or sub-grids, etc...) -->
+      <ng-template #container></ng-template>
+      <!-- any static (defined in DOM - not recommended) content goes here -->
+      <ng-content></ng-content>
+      <!-- fallback HTML content from GridStackWidget.content if used instead (not recommended) -->
+      {{options.content}}
+    </div>`,
+        styles: [`
+    :host { display: block; }
+  `],
+        standalone: true,
+        // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
+    }),
+    __metadata("design:paramtypes", [ElementRef])
+], GridstackItemComponent);
+export { GridstackItemComponent };
+//# sourceMappingURL=gridstack-item.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gridstack-item.component.js","sourceRoot":"","sources":["../../../../../../angular/projects/lib/src/lib/gridstack-item.component.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;;;;;;;;AAEH,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAA2B,MAAM,eAAe,CAAC;AAanH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,IAiBa,sBAAsB,GAjBnC,MAiBa,sBAAsB;IAoBjC;;;;;;;;;;;;OAYG;IACH,IAAoB,OAAO,CAAC,GAAkB;QAC5C,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC;QACzC,IAAI,IAAI,EAAE;YACR,iCAAiC;YACjC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;SAC3B;aAAM;YACL,2FAA2F;YAC3F,IAAI,CAAC,QAAQ,GAAG,EAAC,GAAG,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAC,CAAC;SACvC;IACH,CAAC;IACD,oFAAoF;IACpF,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,IAAI,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAC,CAAC;IACjE,CAAC;IAID,2EAA2E;IAC3E,IAAW,EAAE,KAA8B,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC;IAElF,sDAAsD;IAC/C,YAAY;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,YAA+B,UAA+C;QAA/C,eAAU,GAAV,UAAU,CAAqC;QAC5E,IAAI,CAAC,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC;IAC/B,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,WAAW,CAAA;QACvB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;QAC7B,OAAO,IAAI,CAAC,SAAS,CAAC;QACtB,OAAO,IAAI,CAAC,GAAG,CAAC;IAClB,CAAC;CACF,CAAA;AA/DyE;IAAvE,SAAS,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAC,CAAC;8BAAoB,gBAAgB;yDAAC;AA2BrG;IAAC,KAAK,EAAE;;;qDASP;AA1CU,sBAAsB;IAjBlC,SAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ,EAAE;;;;;;;;WAQD;QACT,MAAM,EAAE,CAAC;;GAER,CAAC;QACF,UAAU,EAAE,IAAI;QAChB,mIAAmI;KACpI,CAAC;qCA2D2C,UAAU;GA1D1C,sBAAsB,CAqElC;SArEY,sBAAsB","sourcesContent":["/**\n * gridstack-item.component.ts 12.4.0\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 * <gridstack>\n *   <gridstack-item [options]=\"{x: 0, y: 0, w: 2, h: 1}\">\n *     <my-widget-component></my-widget-component>\n *   </gridstack-item>\n * </gridstack>\n * ```\n */\n@Component({\n  selector: 'gridstack-item',\n  template: `\n    <div class=\"grid-stack-item-content\">\n      <!-- where dynamic items go based on component selector (recommended way), or sub-grids, etc...) -->\n      <ng-template #container></ng-template>\n      <!-- any static (defined in DOM - not recommended) content goes here -->\n      <ng-content></ng-content>\n      <!-- fallback HTML content from GridStackWidget.content if used instead (not recommended) -->\n      {{options.content}}\n    </div>`,\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<GridstackItemComponent> | 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<GridItemCompHTMLElement>) {\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"]}

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

@@ -0,0 +1,233 @@
+/**
+ * gridstack.component.ts 12.4.0
+ * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license
+ */
+import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, Type, ViewContainerRef, ComponentRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions } from 'gridstack';
+import { NgGridStackNode, NgGridStackWidget } from './types';
+import { GridstackItemComponent } from './gridstack-item.component';
+/**
+ * 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;
+};
+/**
+ * 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;
+}
+/**
+ * Mapping of selector strings to Angular component types.
+ * Used for dynamic component creation based on widget selectors.
+ */
+export type SelectorToType = {
+    [key: string]: Type<object>;
+};
+/**
+ * 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>
+ * ```
+ */
+export declare class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
+    protected readonly elementRef: ElementRef<GridCompHTMLElement>;
+    /**
+     * 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.
+     */
+    gridstackItems?: QueryList<GridstackItemComponent>;
+    /**
+     * Container for dynamic component creation (recommended approach).
+     * Used to append grid items programmatically at runtime.
+     */
+    container?: ViewContainerRef;
+    /**
+     * 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: GridStackOptions);
+    /** Get the current running grid options */
+    get options(): GridStackOptions;
+    /**
+     * 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>
+     * ```
+     */
+    isEmpty?: boolean;
+    /**
+     * 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 */
+    addedCB: EventEmitter<nodesCB>;
+    /** Emitted when grid layout changes */
+    changeCB: EventEmitter<nodesCB>;
+    /** Emitted when grid is disabled */
+    disableCB: EventEmitter<eventCB>;
+    /** Emitted during widget drag operations */
+    dragCB: EventEmitter<elementCB>;
+    /** Emitted when widget drag starts */
+    dragStartCB: EventEmitter<elementCB>;
+    /** Emitted when widget drag stops */
+    dragStopCB: EventEmitter<elementCB>;
+    /** Emitted when widget is dropped */
+    droppedCB: EventEmitter<droppedCB>;
+    /** Emitted when grid is enabled */
+    enableCB: EventEmitter<eventCB>;
+    /** Emitted when widgets are removed from the grid */
+    removedCB: EventEmitter<nodesCB>;
+    /** Emitted during widget resize operations */
+    resizeCB: EventEmitter<elementCB>;
+    /** Emitted when widget resize starts */
+    resizeStartCB: EventEmitter<elementCB>;
+    /** Emitted when widget resize stops */
+    resizeStopCB: EventEmitter<elementCB>;
+    /**
+     * Get the native DOM element that contains grid-specific fields.
+     * This element has GridStack properties attached to it.
+     */
+    get el(): GridCompHTMLElement;
+    /**
+     * 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(): GridStack | undefined;
+    /**
+     * Component reference for dynamic component removal.
+     * Used internally when this component is created dynamically.
+     */
+    ref: ComponentRef<GridstackComponent> | undefined;
+    /**
+     * 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]);
+     * ```
+     */
+    static selectorToType: SelectorToType;
+    /**
+     * 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: Array<Type<object>>): void;
+    /**
+     * 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: Type<object>): string;
+    protected _options?: GridStackOptions;
+    protected _grid?: GridStack;
+    protected _sub: Subscription | undefined;
+    protected loaded?: boolean;
+    constructor(elementRef: ElementRef<GridCompHTMLElement>);
+    ngOnInit(): void;
+    /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * 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(): void;
+    /** check if the grid is empty, if so show alternative content */
+    checkEmpty(): void;
+    /** get all known events as easy to use Outputs for convenience */
+    protected hookEvents(grid?: GridStack): void;
+    protected unhookEvents(grid?: GridStack): void;
+}
+/**
+ * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
+ **/
+export declare function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, n: NgGridStackNode, add: boolean, isGrid: boolean): HTMLElement | undefined;
+/**
+ * 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 declare function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget): void;
+/**
+ * track when widgeta re updated (rather than created) to make sure we de-serialize them as well
+ */
+export declare function gsUpdateNgComponents(n: NgGridStackNode): void;