gridstack 8.1.1 → 8.2.0

package/dist/{ng → angular/lib}/gridstack.component.d.ts

@@ -1,118 +1,129 @@
-/**
- * gridstack.component.ts 8.1.1
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
- */
-import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, Type, ViewContainerRef } from '@angular/core';
-import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
-import { GridstackItemComponent } from './gridstack-item.component';
-/** events handlers emitters signature for different events */
-export type eventCB = {
-    event: Event;
-};
-export type elementCB = {
-    event: Event;
-    el: GridItemHTMLElement;
-};
-export type nodesCB = {
-    event: Event;
-    nodes: GridStackNode[];
-};
-export type droppedCB = {
-    event: Event;
-    previousNode: GridStackNode;
-    newNode: GridStackNode;
-};
-/** extends to store Ng Component selector, instead/inAddition to content */
-export interface NgGridStackWidget extends GridStackWidget {
-    type?: string;
-}
-export interface NgGridStackNode extends GridStackNode {
-    type?: string;
-}
-export interface NgGridStackOptions extends GridStackOptions {
-    children?: NgGridStackWidget[];
-    subGridOpts?: NgGridStackOptions;
-}
-/** store element to Ng Class pointer back */
-export interface GridCompHTMLElement extends GridHTMLElement {
-    _gridComp?: GridstackComponent;
-}
-/** selector string to runtime Type mapping */
-export type SelectorToType = {
-    [key: string]: Type<Object>;
-};
-/**
- * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
- */
-export declare class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
-    private readonly elementRef;
-    /** track list of TEMPLATE grid items so we can sync between DOM and GS internals */
-    gridstackItems?: QueryList<GridstackItemComponent>;
-    /** container to append items dynamically */
-    container?: ViewContainerRef;
-    /** initial options for creation of the grid */
-    set options(val: GridStackOptions);
-    /** return the current running options */
-    get options(): GridStackOptions;
-    /** true while ng-content with 'no-item-content' should be shown when last item is removed from a grid */
-    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.
-     */
-    addedCB: EventEmitter<nodesCB>;
-    changeCB: EventEmitter<nodesCB>;
-    disableCB: EventEmitter<eventCB>;
-    dragCB: EventEmitter<elementCB>;
-    dragStartCB: EventEmitter<elementCB>;
-    dragStopCB: EventEmitter<elementCB>;
-    droppedCB: EventEmitter<droppedCB>;
-    enableCB: EventEmitter<eventCB>;
-    removedCB: EventEmitter<nodesCB>;
-    resizeCB: EventEmitter<elementCB>;
-    resizeStartCB: EventEmitter<elementCB>;
-    resizeStopCB: EventEmitter<elementCB>;
-    /** return the native element that contains grid specific fields as well */
-    get el(): GridCompHTMLElement;
-    /** return the GridStack class */
-    get grid(): GridStack | 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.
-     */
-    static selectorToType: SelectorToType;
-    /** add a list of ng Component to be mapped to selector */
-    static addComponentToSelectorType(typeList: Array<Type<Object>>): void;
-    /** return the ng Component selector */
-    static getSelector(type: Type<Object>): string;
-    private _options?;
-    private _grid?;
-    private loaded?;
-    private ngUnsubscribe;
-    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 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 */
-    private hookEvents;
-}
-/**
- * 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, w: NgGridStackWidget | GridStackOptions, add: boolean, isGrid: boolean): HTMLElement | undefined;
-/**
- * can be used when saving the grid - make sure we save the content from the field (not HTML as we get ng markups)
- * and can put the extra info of type, otherwise content
- */
-export declare function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget): void;
+/**
+ * gridstack.component.ts 8.2.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, Type, ViewContainerRef, ComponentRef } from '@angular/core';
+import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
+import { GridstackItemComponent } from './gridstack-item.component';
+import * as i0 from "@angular/core";
+/** events handlers emitters signature for different events */
+export declare type eventCB = {
+    event: Event;
+};
+export declare type elementCB = {
+    event: Event;
+    el: GridItemHTMLElement;
+};
+export declare type nodesCB = {
+    event: Event;
+    nodes: GridStackNode[];
+};
+export declare type droppedCB = {
+    event: Event;
+    previousNode: GridStackNode;
+    newNode: GridStackNode;
+};
+export declare type NgCompInputs = {
+    [key: string]: any;
+};
+/** extends to store Ng Component selector, instead/inAddition to content */
+export interface NgGridStackWidget extends GridStackWidget {
+    selector?: string;
+    input?: NgCompInputs;
+}
+export interface NgGridStackNode extends GridStackNode {
+    selector?: string;
+}
+export interface NgGridStackOptions extends GridStackOptions {
+    children?: NgGridStackWidget[];
+    subGridOpts?: NgGridStackOptions;
+}
+/** store element to Ng Class pointer back */
+export interface GridCompHTMLElement extends GridHTMLElement {
+    _gridComp?: GridstackComponent;
+}
+/** selector string to runtime Type mapping */
+export declare type SelectorToType = {
+    [key: string]: Type<Object>;
+};
+/**
+ * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
+ */
+export declare class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
+    private readonly elementRef;
+    /** track list of TEMPLATE grid items so we can sync between DOM and GS internals */
+    gridstackItems?: QueryList<GridstackItemComponent>;
+    /** container to append items dynamically */
+    container?: ViewContainerRef;
+    /** initial options for creation of the grid */
+    set options(val: GridStackOptions);
+    /** return the current running options */
+    get options(): GridStackOptions;
+    /** true while ng-content with 'no-item-content' should be shown when last item is removed from a grid */
+    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.
+     */
+    addedCB: EventEmitter<nodesCB>;
+    changeCB: EventEmitter<nodesCB>;
+    disableCB: EventEmitter<eventCB>;
+    dragCB: EventEmitter<elementCB>;
+    dragStartCB: EventEmitter<elementCB>;
+    dragStopCB: EventEmitter<elementCB>;
+    droppedCB: EventEmitter<droppedCB>;
+    enableCB: EventEmitter<eventCB>;
+    removedCB: EventEmitter<nodesCB>;
+    resizeCB: EventEmitter<elementCB>;
+    resizeStartCB: EventEmitter<elementCB>;
+    resizeStopCB: EventEmitter<elementCB>;
+    /** return the native element that contains grid specific fields as well */
+    get el(): GridCompHTMLElement;
+    /** return the GridStack class */
+    get grid(): GridStack | undefined;
+    /** ComponentRef of ourself - used by dynamic object to correctly get removed */
+    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.
+     */
+    static selectorToType: SelectorToType;
+    /** add a list of ng Component to be mapped to selector */
+    static addComponentToSelectorType(typeList: Array<Type<Object>>): void;
+    /** return the ng Component selector */
+    static getSelector(type: Type<Object>): string;
+    private _options?;
+    private _grid?;
+    private loaded?;
+    private ngUnsubscribe;
+    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 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 */
+    private hookEvents;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridstackComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GridstackComponent, "gridstack", never, { "options": "options"; "isEmpty": "isEmpty"; }, { "addedCB": "addedCB"; "changeCB": "changeCB"; "disableCB": "disableCB"; "dragCB": "dragCB"; "dragStartCB": "dragStartCB"; "dragStopCB": "dragStopCB"; "droppedCB": "droppedCB"; "enableCB": "enableCB"; "removedCB": "removedCB"; "resizeCB": "resizeCB"; "resizeStartCB": "resizeStartCB"; "resizeStopCB": "resizeStopCB"; }, ["gridstackItems"], ["[empty-content]", "*"], false>;
+}
+/**
+ * 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, w: NgGridStackWidget | GridStackNode, 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 private 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;

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./gridstack.component";
+import * as i2 from "./gridstack-item.component";
+import * as i3 from "@angular/common";
+export declare class GridstackModule {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<GridstackModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GridstackModule, [typeof i1.GridstackComponent, typeof i2.GridstackItemComponent], [typeof i3.CommonModule], [typeof i1.GridstackComponent, typeof i2.GridstackItemComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<GridstackModule>;
+}

package/dist/angular/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "gridstack-angular",
+  "version": "8.2.0",
+  "peerDependencies": {
+    "@angular/common": "^14.2.0",
+    "@angular/core": "^14.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "module": "fesm2015/gridstack-angular.mjs",
+  "es2020": "fesm2020/gridstack-angular.mjs",
+  "esm2020": "esm2020/gridstack-angular.mjs",
+  "fesm2020": "fesm2020/gridstack-angular.mjs",
+  "fesm2015": "fesm2015/gridstack-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/gridstack-angular.mjs",
+      "es2020": "./fesm2020/gridstack-angular.mjs",
+      "es2015": "./fesm2015/gridstack-angular.mjs",
+      "node": "./fesm2015/gridstack-angular.mjs",
+      "default": "./fesm2020/gridstack-angular.mjs"
+    }
+  },
+  "sideEffects": false
+}

package/dist/angular/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './lib/gridstack-item.component';
+export * from './lib/gridstack.component';
+export * from './lib/base-widget';
+export * from './lib/gridstack.module';

package/dist/angular/src/base-widget.ts

@@ -0,0 +1,28 @@
+/**
+ * gridstack-item.component.ts 8.2.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+
+/**
+ * Base interface that all widgets need to implement in order for GridstackItemComponent to correctly save/load/delete/..
+ */
+
+import { Injectable } from '@angular/core';
+import { NgCompInputs, NgGridStackWidget } from './gridstack.component';
+
+ @Injectable()
+ export abstract class BaseWidget {
+  /**
+   * REDEFINE to return an object representing the data needed to re-create yourself, other than `selector` already handled.
+   * This should map directly to the @Input() fields of this objects on create, so a simple apply can be used on read
+   */
+  public serialize(): NgCompInputs | undefined  { return; }
+
+  /**
+   * REDEFINE this if your widget needs to read from saved data and transform it to create itself - you do this for
+   * things that are not mapped directly into @Input() fields for example.
+   */
+  public deserialize(w: NgGridStackWidget)  {
+    if (w.input)  Object.assign(this, w.input);
+  }
+ }

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

@@ -0,0 +1,78 @@
+/**
+ * gridstack-item.component.ts 8.2.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+
+import { Component, ElementRef, Input, ViewChild, ViewContainerRef, OnDestroy, ComponentRef } from '@angular/core';
+import { GridItemHTMLElement, GridStackNode } from 'gridstack';
+import { BaseWidget } from './base-widget';
+
+/** store element to Ng Class pointer back */
+export interface GridItemCompHTMLElement extends GridItemHTMLElement {
+  _gridItemComp?: GridstackItemComponent;
+}
+
+/**
+ * HTML Component Wrapper for gridstack items, in combination with GridstackComponent for parent grid
+ */
+@Component({
+  selector: 'gridstack-item',
+  template: `
+    <div class="grid-stack-item-content">
+      <!-- where dynamic items go based on component types, or sub-grids, etc...) -->
+      <ng-template #container></ng-template>
+      <!-- any static (defined in dom) content goes here -->
+      <ng-content></ng-content>
+      <!-- fallback HTML content from GridStackWidget content field if used instead -->
+      {{options.content}}
+    </div>`,
+  styles: [`
+    :host { display: block; }
+  `],
+  // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
+})
+export class GridstackItemComponent implements OnDestroy {
+
+  /** container to append items dynamically */
+  @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
+
+  /** ComponentRef of ourself - used by dynamic object to correctly get removed */
+  public ref: ComponentRef<GridstackItemComponent> | undefined;
+
+  /** child component so we can save/restore additional data to be saved along */
+  public childWidget: BaseWidget | undefined;
+
+  /** list of options for creating/updating this item */
+  @Input() public set options(val: GridStackNode) {
+    if (this.el.gridstackNode?.grid) {
+      // already built, do an update...
+      this.el.gridstackNode.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) */
+  public get options(): GridStackNode {
+    return this.el.gridstackNode || this._options || {el: this.el};
+  }
+
+  private _options?: GridStackNode;
+
+  /** return the native element that contains grid specific fields as well */
+  public get el(): GridItemCompHTMLElement { return this.elementRef.nativeElement; }
+
+  /** clears the initial options now that we've built */
+  public clearOptions() {
+    delete this._options;
+  }
+
+  constructor(private readonly elementRef: ElementRef<GridItemHTMLElement>) {
+    this.el._gridItemComp = this;
+  }
+
+  public ngOnDestroy(): void {
+    delete this.ref;
+    delete this.el._gridItemComp;
+  }
+}