gridstack 10.1.1 → 10.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (133) hide show
  1. package/README.md +1 -1
  2. package/angular/package.json +1 -1
  3. package/dist/angular/esm2020/lib/base-widget.mjs +2 -2
  4. package/dist/angular/esm2020/lib/gridstack-item.component.mjs +2 -2
  5. package/dist/angular/esm2020/lib/gridstack.component.mjs +12 -10
  6. package/dist/angular/esm2020/lib/gridstack.module.mjs +2 -2
  7. package/dist/angular/fesm2015/gridstack-angular.mjs +14 -12
  8. package/dist/angular/fesm2015/gridstack-angular.mjs.map +1 -1
  9. package/dist/angular/fesm2020/gridstack-angular.mjs +14 -12
  10. package/dist/angular/fesm2020/gridstack-angular.mjs.map +1 -1
  11. package/dist/angular/lib/gridstack-item.component.d.ts +1 -1
  12. package/dist/angular/lib/gridstack.component.d.ts +1 -1
  13. package/dist/dd-base-impl.d.ts +1 -1
  14. package/dist/dd-base-impl.js +1 -1
  15. package/dist/dd-base-impl.js.map +1 -1
  16. package/dist/dd-draggable.d.ts +4 -4
  17. package/dist/dd-draggable.js +40 -3
  18. package/dist/dd-draggable.js.map +1 -1
  19. package/dist/dd-droppable.d.ts +1 -1
  20. package/dist/dd-droppable.js +1 -1
  21. package/dist/dd-droppable.js.map +1 -1
  22. package/dist/dd-element.d.ts +1 -1
  23. package/dist/dd-element.js +1 -1
  24. package/dist/dd-element.js.map +1 -1
  25. package/dist/dd-gridstack.d.ts +1 -1
  26. package/dist/dd-gridstack.js +1 -1
  27. package/dist/dd-gridstack.js.map +1 -1
  28. package/dist/dd-manager.d.ts +1 -1
  29. package/dist/dd-manager.js +1 -1
  30. package/dist/dd-manager.js.map +1 -1
  31. package/dist/dd-resizable-handle.d.ts +4 -3
  32. package/dist/dd-resizable-handle.js +12 -1
  33. package/dist/dd-resizable-handle.js.map +1 -1
  34. package/dist/dd-resizable.d.ts +1 -1
  35. package/dist/dd-resizable.js +1 -1
  36. package/dist/dd-resizable.js.map +1 -1
  37. package/dist/dd-touch.d.ts +1 -1
  38. package/dist/dd-touch.js +1 -1
  39. package/dist/dd-touch.js.map +1 -1
  40. package/dist/es5/dd-base-impl.d.ts +1 -1
  41. package/dist/es5/dd-base-impl.js +1 -1
  42. package/dist/es5/dd-base-impl.js.map +1 -1
  43. package/dist/es5/dd-draggable.d.ts +4 -4
  44. package/dist/es5/dd-draggable.js +53 -5
  45. package/dist/es5/dd-draggable.js.map +1 -1
  46. package/dist/es5/dd-droppable.d.ts +1 -1
  47. package/dist/es5/dd-droppable.js +1 -1
  48. package/dist/es5/dd-droppable.js.map +1 -1
  49. package/dist/es5/dd-element.d.ts +1 -1
  50. package/dist/es5/dd-element.js +1 -1
  51. package/dist/es5/dd-element.js.map +1 -1
  52. package/dist/es5/dd-gridstack.d.ts +1 -1
  53. package/dist/es5/dd-gridstack.js +1 -1
  54. package/dist/es5/dd-gridstack.js.map +1 -1
  55. package/dist/es5/dd-manager.d.ts +1 -1
  56. package/dist/es5/dd-manager.js +1 -1
  57. package/dist/es5/dd-manager.js.map +1 -1
  58. package/dist/es5/dd-resizable-handle.d.ts +4 -3
  59. package/dist/es5/dd-resizable-handle.js +13 -1
  60. package/dist/es5/dd-resizable-handle.js.map +1 -1
  61. package/dist/es5/dd-resizable.d.ts +1 -1
  62. package/dist/es5/dd-resizable.js +1 -1
  63. package/dist/es5/dd-resizable.js.map +1 -1
  64. package/dist/es5/dd-touch.d.ts +1 -1
  65. package/dist/es5/dd-touch.js +1 -1
  66. package/dist/es5/dd-touch.js.map +1 -1
  67. package/dist/es5/gridstack-all.js +1 -1
  68. package/dist/es5/gridstack-all.js.LICENSE.txt +1 -1
  69. package/dist/es5/gridstack-all.js.map +1 -1
  70. package/dist/es5/gridstack-engine.d.ts +3 -3
  71. package/dist/es5/gridstack-engine.js +17 -14
  72. package/dist/es5/gridstack-engine.js.map +1 -1
  73. package/dist/es5/gridstack-poly.js +1 -1
  74. package/dist/es5/gridstack.d.ts +11 -4
  75. package/dist/es5/gridstack.js +100 -46
  76. package/dist/es5/gridstack.js.map +1 -1
  77. package/dist/es5/types.d.ts +8 -8
  78. package/dist/es5/types.js +1 -1
  79. package/dist/es5/types.js.map +1 -1
  80. package/dist/es5/utils.d.ts +5 -4
  81. package/dist/es5/utils.js +19 -18
  82. package/dist/es5/utils.js.map +1 -1
  83. package/dist/gridstack-all.js +1 -1
  84. package/dist/gridstack-all.js.LICENSE.txt +1 -1
  85. package/dist/gridstack-all.js.map +1 -1
  86. package/dist/gridstack-engine.d.ts +3 -3
  87. package/dist/gridstack-engine.js +15 -13
  88. package/dist/gridstack-engine.js.map +1 -1
  89. package/dist/gridstack.css +1 -1
  90. package/dist/gridstack.d.ts +11 -4
  91. package/dist/gridstack.js +96 -45
  92. package/dist/gridstack.js.map +1 -1
  93. package/dist/types.d.ts +8 -8
  94. package/dist/types.js +1 -1
  95. package/dist/types.js.map +1 -1
  96. package/dist/utils.d.ts +5 -4
  97. package/dist/utils.js +18 -18
  98. package/dist/utils.js.map +1 -1
  99. package/doc/CHANGES.md +17 -0
  100. package/doc/README.md +10 -4
  101. package/package.json +1 -1
  102. package/angular/projects/demo/.browserslistrc +0 -16
  103. package/angular/projects/demo/src/app/app.component.css +0 -11
  104. package/angular/projects/demo/src/app/app.component.html +0 -110
  105. package/angular/projects/demo/src/app/app.component.spec.ts +0 -25
  106. package/angular/projects/demo/src/app/app.component.ts +0 -221
  107. package/angular/projects/demo/src/app/app.module.ts +0 -39
  108. package/angular/projects/demo/src/app/dummy.component.ts +0 -35
  109. package/angular/projects/demo/src/app/ngFor.ts +0 -131
  110. package/angular/projects/demo/src/app/ngFor_cmd.ts +0 -106
  111. package/angular/projects/demo/src/app/simple.ts +0 -46
  112. package/angular/projects/demo/src/assets/.gitkeep +0 -0
  113. package/angular/projects/demo/src/environments/environment.ts +0 -16
  114. package/angular/projects/demo/src/favicon.ico +0 -0
  115. package/angular/projects/demo/src/index.html +0 -13
  116. package/angular/projects/demo/src/main.ts +0 -12
  117. package/angular/projects/demo/src/polyfills.ts +0 -53
  118. package/angular/projects/demo/src/styles.css +0 -41
  119. package/angular/projects/demo/src/test.ts +0 -26
  120. package/angular/projects/demo/tsconfig.app.json +0 -15
  121. package/angular/projects/demo/tsconfig.spec.json +0 -18
  122. package/angular/projects/lib/src/lib/base-widget.ts +0 -28
  123. package/angular/projects/lib/src/lib/gridstack-item.component.ts +0 -78
  124. package/angular/projects/lib/src/lib/gridstack.component.ts +0 -287
  125. package/angular/projects/lib/src/lib/gridstack.module.ts +0 -32
  126. package/angular/projects/lib/src/public-api.ts +0 -8
  127. package/angular/projects/lib/src/test.ts +0 -27
  128. package/dist/angular/src/base-widget.ts +0 -28
  129. package/dist/angular/src/gridstack-item.component.ts +0 -78
  130. package/dist/angular/src/gridstack.component.ts +0 -287
  131. package/dist/angular/src/gridstack.module.ts +0 -32
  132. package/dist/src/gridstack-extra.scss +0 -25
  133. package/dist/src/gridstack.scss +0 -157
package/angular/projects/demo/src/app/simple.ts DELETED
@@ -1,46 +0,0 @@
1
- /**
2
- * Simplest Angular Example using GridStack API directly
3
- */
4
- import { Component, OnInit } from '@angular/core';
5
-
6
- import { GridStack, GridStackWidget } from 'gridstack';
7
-
8
- @Component({
9
- selector: 'angular-simple-test',
10
- template: `
11
- <p><b>SIMPLEST</b>: angular example using GridStack API directly, so not really using any angular construct per say other than waiting for DOM rendering</p>
12
- <button (click)="add()">add item</button>
13
- <button (click)="delete()">remove item</button>
14
- <button (click)="change()">modify item</button>
15
- <div class="grid-stack"></div>
16
- `,
17
- // gridstack.min.css and other custom styles should be included in global styles.scss
18
- })
19
- export class AngularSimpleComponent implements OnInit {
20
- public items: GridStackWidget[] = [
21
- { x: 0, y: 0, w: 9, h: 6, content: '0' },
22
- { x: 9, y: 0, w: 3, h: 3, content: '1' },
23
- { x: 9, y: 3, w: 3, h: 3, content: '2' },
24
- ];
25
- private grid!: GridStack;
26
-
27
- constructor() {}
28
-
29
- // simple div above doesn't require Angular to run, so init gridstack here
30
- public ngOnInit() {
31
- this.grid = GridStack.init({
32
- cellHeight: 70,
33
- })
34
- .load(this.items); // and load our content directly (will create DOM)
35
- }
36
-
37
- public add() {
38
- this.grid.addWidget({w: 3, content: 'new content'});
39
- }
40
- public delete() {
41
- this.grid.removeWidget(this.grid.engine.nodes[0].el!);
42
- }
43
- public change() {
44
- this.grid.update(this.grid.engine.nodes[0].el!, {w: 1});
45
- }
46
- }
package/angular/projects/demo/src/assets/.gitkeep DELETED
File without changes
package/angular/projects/demo/src/environments/environment.ts DELETED
@@ -1,16 +0,0 @@
1
- // This file can be replaced during build by using the `fileReplacements` array.
2
- // `ng build` replaces `environment.ts` with `environment.prod.ts`.
3
- // The list of file replacements can be found in `angular.json`.
4
-
5
- export const environment = {
6
- production: false
7
- };
8
-
9
- /*
10
- * For easier debugging in development mode, you can import the following file
11
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12
- *
13
- * This import should be commented out in production mode because it will have a negative impact
14
- * on performance if an error is thrown.
15
- */
16
- // import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
package/angular/projects/demo/src/index.html DELETED
@@ -1,13 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Demo</title>
6
- <base href="/">
7
- <meta name="viewport" content="width=device-width, initial-scale=1">
8
- <link rel="icon" type="image/x-icon" href="favicon.ico">
9
- </head>
10
- <body>
11
- <app-root></app-root>
12
- </body>
13
- </html>
package/angular/projects/demo/src/main.ts DELETED
@@ -1,12 +0,0 @@
1
- import { enableProdMode } from '@angular/core';
2
- import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3
-
4
- import { AppModule } from './app/app.module';
5
- import { environment } from './environments/environment';
6
-
7
- if (environment.production) {
8
- enableProdMode();
9
- }
10
-
11
- platformBrowserDynamic().bootstrapModule(AppModule)
12
- .catch(err => console.error(err));
package/angular/projects/demo/src/polyfills.ts DELETED
@@ -1,53 +0,0 @@
1
- /**
2
- * This file includes polyfills needed by Angular and is loaded before the app.
3
- * You can add your own extra polyfills to this file.
4
- *
5
- * This file is divided into 2 sections:
6
- * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7
- * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8
- * file.
9
- *
10
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
12
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
13
- *
14
- * Learn more in https://angular.io/guide/browser-support
15
- */
16
-
17
- /***************************************************************************************************
18
- * BROWSER POLYFILLS
19
- */
20
-
21
- /**
22
- * By default, zone.js will patch all possible macroTask and DomEvents
23
- * user can disable parts of macroTask/DomEvents patch by setting following flags
24
- * because those flags need to be set before `zone.js` being loaded, and webpack
25
- * will put import in the top of bundle, so user need to create a separate file
26
- * in this directory (for example: zone-flags.ts), and put the following flags
27
- * into that file, and then add the following code before importing zone.js.
28
- * import './zone-flags';
29
- *
30
- * The flags allowed in zone-flags.ts are listed here.
31
- *
32
- * The following flags will work for all browsers.
33
- *
34
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
35
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
36
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
37
- *
38
- * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
39
- * with the following flag, it will bypass `zone.js` patch for IE/Edge
40
- *
41
- * (window as any).__Zone_enable_cross_context_check = true;
42
- *
43
- */
44
-
45
- /***************************************************************************************************
46
- * Zone JS is required by default for Angular itself.
47
- */
48
- import 'zone.js'; // Included with Angular CLI.
49
-
50
-
51
- /***************************************************************************************************
52
- * APPLICATION IMPORTS
53
- */
package/angular/projects/demo/src/styles.css DELETED
@@ -1,41 +0,0 @@
1
- /* re-use existing demo css file we already use for the plain demos - that include gridstack.css which is required */
2
- @import "../../../../demo/demo.css";
3
- /* required file for gridstack 2-11 column */
4
- @import "../../../../dist/gridstack-extra.css";
5
-
6
- /* for two.html example from bootstrap.min.css */
7
- .row {
8
- display: -ms-flexbox;
9
- display: flex;
10
- -ms-flex-wrap: wrap;
11
- flex-wrap: wrap;
12
- margin-right: -15px;
13
- margin-left: -15px;
14
- box-sizing: border-box;
15
- }
16
- .col-md-3 {
17
- -ms-flex: 0 0 25%;
18
- flex: 0 0 25%;
19
- max-width: 25%;
20
- box-sizing: border-box;
21
- }
22
- .col-md-9 {
23
- -ms-flex: 0 0 75%;
24
- flex: 0 0 75%;
25
- max-width: 75%;
26
- box-sizing: border-box;
27
- }
28
- .col-md-6 {
29
- -ms-flex: 0 0 50%;
30
- flex: 0 0 50%;
31
- max-width: 50%;
32
- box-sizing: border-box;
33
- }
34
- .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
35
- position: relative;
36
- width: 100%;
37
- padding-right: 15px;
38
- padding-left: 15px;
39
- box-sizing: border-box;
40
- }
41
-
package/angular/projects/demo/src/test.ts DELETED
@@ -1,26 +0,0 @@
1
- // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2
-
3
- import 'zone.js/testing';
4
- import { getTestBed } from '@angular/core/testing';
5
- import {
6
- BrowserDynamicTestingModule,
7
- platformBrowserDynamicTesting
8
- } from '@angular/platform-browser-dynamic/testing';
9
-
10
- declare const require: {
11
- context(path: string, deep?: boolean, filter?: RegExp): {
12
- <T>(id: string): T;
13
- keys(): string[];
14
- };
15
- };
16
-
17
- // First, initialize the Angular testing environment.
18
- getTestBed().initTestEnvironment(
19
- BrowserDynamicTestingModule,
20
- platformBrowserDynamicTesting(),
21
- );
22
-
23
- // Then we find all the tests.
24
- const context = require.context('./', true, /\.spec\.ts$/);
25
- // And load the modules.
26
- context.keys().forEach(context);
package/angular/projects/demo/tsconfig.app.json DELETED
@@ -1,15 +0,0 @@
1
- /* To learn more about this file see: https://angular.io/config/tsconfig. */
2
- {
3
- "extends": "../../tsconfig.json",
4
- "compilerOptions": {
5
- "outDir": "../../out-tsc/app",
6
- "types": []
7
- },
8
- "files": [
9
- "src/main.ts",
10
- "src/polyfills.ts"
11
- ],
12
- "include": [
13
- "src/**/*.d.ts"
14
- ]
15
- }
package/angular/projects/demo/tsconfig.spec.json DELETED
@@ -1,18 +0,0 @@
1
- /* To learn more about this file see: https://angular.io/config/tsconfig. */
2
- {
3
- "extends": "../../tsconfig.json",
4
- "compilerOptions": {
5
- "outDir": "../../out-tsc/spec",
6
- "types": [
7
- "jasmine"
8
- ]
9
- },
10
- "files": [
11
- "src/test.ts",
12
- "src/polyfills.ts"
13
- ],
14
- "include": [
15
- "src/**/*.spec.ts",
16
- "src/**/*.d.ts"
17
- ]
18
- }
package/angular/projects/lib/src/lib/base-widget.ts DELETED
@@ -1,28 +0,0 @@
1
- /**
2
- * gridstack-item.component.ts 10.1.1
3
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
4
- */
5
-
6
- /**
7
- * Base interface that all widgets need to implement in order for GridstackItemComponent to correctly save/load/delete/..
8
- */
9
-
10
- import { Injectable } from '@angular/core';
11
- import { NgCompInputs, NgGridStackWidget } from './gridstack.component';
12
-
13
- @Injectable()
14
- export abstract class BaseWidget {
15
- /**
16
- * REDEFINE to return an object representing the data needed to re-create yourself, other than `selector` already handled.
17
- * This should map directly to the @Input() fields of this objects on create, so a simple apply can be used on read
18
- */
19
- public serialize(): NgCompInputs | undefined { return; }
20
-
21
- /**
22
- * REDEFINE this if your widget needs to read from saved data and transform it to create itself - you do this for
23
- * things that are not mapped directly into @Input() fields for example.
24
- */
25
- public deserialize(w: NgGridStackWidget) {
26
- if (w.input) Object.assign(this, w.input);
27
- }
28
- }
package/angular/projects/lib/src/lib/gridstack-item.component.ts DELETED
@@ -1,78 +0,0 @@
1
- /**
2
- * gridstack-item.component.ts 10.1.1
3
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
4
- */
5
-
6
- import { Component, ElementRef, Input, ViewChild, ViewContainerRef, OnDestroy, ComponentRef } from '@angular/core';
7
- import { GridItemHTMLElement, GridStackNode } from 'gridstack';
8
- import { BaseWidget } from './base-widget';
9
-
10
- /** store element to Ng Class pointer back */
11
- export interface GridItemCompHTMLElement extends GridItemHTMLElement {
12
- _gridItemComp?: GridstackItemComponent;
13
- }
14
-
15
- /**
16
- * HTML Component Wrapper for gridstack items, in combination with GridstackComponent for parent grid
17
- */
18
- @Component({
19
- selector: 'gridstack-item',
20
- template: `
21
- <div class="grid-stack-item-content">
22
- <!-- where dynamic items go based on component types, or sub-grids, etc...) -->
23
- <ng-template #container></ng-template>
24
- <!-- any static (defined in dom) content goes here -->
25
- <ng-content></ng-content>
26
- <!-- fallback HTML content from GridStackWidget content field if used instead -->
27
- {{options.content}}
28
- </div>`,
29
- styles: [`
30
- :host { display: block; }
31
- `],
32
- // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
33
- })
34
- export class GridstackItemComponent implements OnDestroy {
35
-
36
- /** container to append items dynamically */
37
- @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
38
-
39
- /** ComponentRef of ourself - used by dynamic object to correctly get removed */
40
- public ref: ComponentRef<GridstackItemComponent> | undefined;
41
-
42
- /** child component so we can save/restore additional data to be saved along */
43
- public childWidget: BaseWidget | undefined;
44
-
45
- /** list of options for creating/updating this item */
46
- @Input() public set options(val: GridStackNode) {
47
- if (this.el.gridstackNode?.grid) {
48
- // already built, do an update...
49
- this.el.gridstackNode.grid.update(this.el, val);
50
- } else {
51
- // store our custom element in options so we can update it and not re-create a generic div!
52
- this._options = {...val, el: this.el};
53
- }
54
- }
55
- /** return the latest grid options (from GS once built, otherwise initial values) */
56
- public get options(): GridStackNode {
57
- return this.el.gridstackNode || this._options || {el: this.el};
58
- }
59
-
60
- private _options?: GridStackNode;
61
-
62
- /** return the native element that contains grid specific fields as well */
63
- public get el(): GridItemCompHTMLElement { return this.elementRef.nativeElement; }
64
-
65
- /** clears the initial options now that we've built */
66
- public clearOptions() {
67
- delete this._options;
68
- }
69
-
70
- constructor(private readonly elementRef: ElementRef<GridItemHTMLElement>) {
71
- this.el._gridItemComp = this;
72
- }
73
-
74
- public ngOnDestroy(): void {
75
- delete this.ref;
76
- delete this.el._gridItemComp;
77
- }
78
- }
package/angular/projects/lib/src/lib/gridstack.component.ts DELETED
@@ -1,287 +0,0 @@
1
- /**
2
- * gridstack.component.ts 10.1.1
3
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
4
- */
5
-
6
- import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
7
- OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef } from '@angular/core';
8
- import { Subject } from 'rxjs';
9
- import { takeUntil } from 'rxjs/operators';
10
- import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
11
-
12
- import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
13
- import { BaseWidget } from './base-widget';
14
-
15
- /** events handlers emitters signature for different events */
16
- export type eventCB = {event: Event};
17
- export type elementCB = {event: Event, el: GridItemHTMLElement};
18
- export type nodesCB = {event: Event, nodes: GridStackNode[]};
19
- export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode};
20
-
21
- export type NgCompInputs = {[key: string]: any};
22
-
23
- /** extends to store Ng Component selector, instead/inAddition to content */
24
- export interface NgGridStackWidget extends GridStackWidget {
25
- selector?: string; // component type to create as content
26
- input?: NgCompInputs; // serialized data for the component input fields
27
- }
28
- export interface NgGridStackNode extends GridStackNode {
29
- selector?: string; // component type to create as content
30
- }
31
- export interface NgGridStackOptions extends GridStackOptions {
32
- children?: NgGridStackWidget[];
33
- subGridOpts?: NgGridStackOptions;
34
- }
35
-
36
- /** store element to Ng Class pointer back */
37
- export interface GridCompHTMLElement extends GridHTMLElement {
38
- _gridComp?: GridstackComponent;
39
- }
40
-
41
- /** selector string to runtime Type mapping */
42
- export type SelectorToType = {[key: string]: Type<Object>};
43
-
44
- /**
45
- * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
46
- */
47
- @Component({
48
- selector: 'gridstack',
49
- template: `
50
- <!-- content to show when when grid is empty, like instructions on how to add widgets -->
51
- <ng-content select="[empty-content]" *ngIf="isEmpty"></ng-content>
52
- <!-- where dynamic items go -->
53
- <ng-template #container></ng-template>
54
- <!-- where template items go -->
55
- <ng-content></ng-content>
56
- `,
57
- styles: [`
58
- :host { display: block; }
59
- `],
60
- // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
61
- })
62
- export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
63
-
64
- /** track list of TEMPLATE grid items so we can sync between DOM and GS internals */
65
- @ContentChildren(GridstackItemComponent) public gridstackItems?: QueryList<GridstackItemComponent>;
66
- /** container to append items dynamically */
67
- @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
68
-
69
- /** initial options for creation of the grid */
70
- @Input() public set options(val: GridStackOptions) { this._options = val; }
71
- /** return the current running options */
72
- public get options(): GridStackOptions { return this._grid?.opts || this._options || {}; }
73
-
74
- /** true while ng-content with 'no-item-content' should be shown when last item is removed from a grid */
75
- @Input() public isEmpty?: boolean;
76
-
77
- /** individual list of GridStackEvent callbacks handlers as output
78
- * otherwise use this.grid.on('name1 name2 name3', callback) to handle multiple at once
79
- * see https://github.com/gridstack/gridstack.js/blob/master/demo/events.js#L4
80
- *
81
- * Note: camel casing and 'CB' added at the end to prevent @angular-eslint/no-output-native
82
- * eg: 'change' would trigger the raw CustomEvent so use different name.
83
- */
84
- @Output() public addedCB = new EventEmitter<nodesCB>();
85
- @Output() public changeCB = new EventEmitter<nodesCB>();
86
- @Output() public disableCB = new EventEmitter<eventCB>();
87
- @Output() public dragCB = new EventEmitter<elementCB>();
88
- @Output() public dragStartCB = new EventEmitter<elementCB>();
89
- @Output() public dragStopCB = new EventEmitter<elementCB>();
90
- @Output() public droppedCB = new EventEmitter<droppedCB>();
91
- @Output() public enableCB = new EventEmitter<eventCB>();
92
- @Output() public removedCB = new EventEmitter<nodesCB>();
93
- @Output() public resizeCB = new EventEmitter<elementCB>();
94
- @Output() public resizeStartCB = new EventEmitter<elementCB>();
95
- @Output() public resizeStopCB = new EventEmitter<elementCB>();
96
-
97
- /** return the native element that contains grid specific fields as well */
98
- public get el(): GridCompHTMLElement { return this.elementRef.nativeElement; }
99
-
100
- /** return the GridStack class */
101
- public get grid(): GridStack | undefined { return this._grid; }
102
-
103
- /** ComponentRef of ourself - used by dynamic object to correctly get removed */
104
- public ref: ComponentRef<GridstackComponent> | undefined;
105
-
106
- /**
107
- * stores the selector -> Type mapping, so we can create items dynamically from a string.
108
- * Unfortunately Ng doesn't provide public access to that mapping.
109
- */
110
- public static selectorToType: SelectorToType = {};
111
- /** add a list of ng Component to be mapped to selector */
112
- public static addComponentToSelectorType(typeList: Array<Type<Object>>) {
113
- typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type);
114
- }
115
- /** return the ng Component selector */
116
- public static getSelector(type: Type<Object>): string {
117
- return reflectComponentType(type)!.selector;
118
- }
119
-
120
- private _options?: GridStackOptions;
121
- private _grid?: GridStack;
122
- private loaded?: boolean;
123
- private ngUnsubscribe: Subject<void> = new Subject();
124
-
125
- constructor(
126
- // private readonly zone: NgZone,
127
- // private readonly cd: ChangeDetectorRef,
128
- private readonly elementRef: ElementRef<GridCompHTMLElement>,
129
- ) {
130
- this.el._gridComp = this;
131
- }
132
-
133
- public ngOnInit(): void {
134
- // init ourself before any template children are created since we track them below anyway - no need to double create+update widgets
135
- this.loaded = !!this.options?.children?.length;
136
- this._grid = GridStack.init(this._options, this.el);
137
- delete this._options; // GS has it now
138
-
139
- this.checkEmpty();
140
- }
141
-
142
- /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
143
- public ngAfterContentInit(): void {
144
- // track whenever the children list changes and update the layout...
145
- this.gridstackItems?.changes
146
- .pipe(takeUntil(this.ngUnsubscribe))
147
- .subscribe(() => this.updateAll());
148
- // ...and do this once at least unless we loaded children already
149
- if (!this.loaded) this.updateAll();
150
- this.hookEvents(this.grid);
151
- }
152
-
153
- public ngOnDestroy(): void {
154
- delete this.ref;
155
- this.ngUnsubscribe.next();
156
- this.ngUnsubscribe.complete();
157
- this.grid?.destroy();
158
- delete this._grid;
159
- delete this.el._gridComp;
160
- }
161
-
162
- /**
163
- * called when the TEMPLATE list of items changes - get a list of nodes and
164
- * update the layout accordingly (which will take care of adding/removing items changed by Angular)
165
- */
166
- public updateAll() {
167
- if (!this.grid) return;
168
- const layout: GridStackWidget[] = [];
169
- this.gridstackItems?.forEach(item => {
170
- layout.push(item.options);
171
- item.clearOptions();
172
- });
173
- this.grid.load(layout); // efficient that does diffs only
174
- }
175
-
176
- /** check if the grid is empty, if so show alternative content */
177
- public checkEmpty() {
178
- if (!this.grid) return;
179
- const isEmpty = !this.grid.engine.nodes.length;
180
- if (isEmpty === this.isEmpty) return;
181
- this.isEmpty = isEmpty;
182
- // this.cd.detectChanges();
183
- }
184
-
185
- /** get all known events as easy to use Outputs for convenience */
186
- private hookEvents(grid?: GridStack) {
187
- if (!grid) return;
188
- grid
189
- .on('added', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.addedCB.emit({event, nodes}); })
190
- .on('change', (event: Event, nodes: GridStackNode[]) => this.changeCB.emit({event, nodes}))
191
- .on('disable', (event: Event) => this.disableCB.emit({event}))
192
- .on('drag', (event: Event, el: GridItemHTMLElement) => this.dragCB.emit({event, el}))
193
- .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.dragStartCB.emit({event, el}))
194
- .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.dragStopCB.emit({event, el}))
195
- .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.droppedCB.emit({event, previousNode, newNode}))
196
- .on('enable', (event: Event) => this.enableCB.emit({event}))
197
- .on('removed', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.removedCB.emit({event, nodes}); })
198
- .on('resize', (event: Event, el: GridItemHTMLElement) => this.resizeCB.emit({event, el}))
199
- .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el}))
200
- .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))
201
- }
202
- }
203
-
204
- /**
205
- * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
206
- **/
207
- export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w: NgGridStackWidget | GridStackNode, add: boolean, isGrid: boolean): HTMLElement | undefined {
208
- if (add) {
209
- //
210
- // create the component dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
211
- //
212
- if (!host) return;
213
- if (isGrid) {
214
- const container = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp?.container;
215
- // TODO: figure out how to create ng component inside regular Div. need to access app injectors...
216
- // if (!container) {
217
- // const hostElement: Element = host;
218
- // const environmentInjector: EnvironmentInjector;
219
- // grid = createComponent(GridstackComponent, {environmentInjector, hostElement})?.instance;
220
- // }
221
- const gridRef = container?.createComponent(GridstackComponent);
222
- const grid = gridRef?.instance;
223
- if (!grid) return;
224
- grid.ref = gridRef;
225
- grid.options = w as GridStackOptions;
226
- return grid.el;
227
- } else {
228
- const gridComp = (host as GridCompHTMLElement)._gridComp;
229
- const gridItemRef = gridComp?.container?.createComponent(GridstackItemComponent);
230
- const gridItem = gridItemRef?.instance;
231
- if (!gridItem) return;
232
- gridItem.ref = gridItemRef
233
-
234
- // IFF we're not a subGrid, define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
235
- const selector = (w as NgGridStackWidget).selector;
236
- const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
237
- if (!w.subGridOpts && type) {
238
- const childWidget = gridItem.container?.createComponent(type)?.instance as BaseWidget;
239
- if (typeof childWidget?.serialize === 'function' && typeof childWidget?.deserialize === 'function') {
240
- // proper BaseWidget subclass, save it and load additional data
241
- gridItem.childWidget = childWidget;
242
- childWidget.deserialize(w);
243
- }
244
- }
245
-
246
- return gridItem.el;
247
- }
248
- } else {
249
- //
250
- // REMOVE - have to call ComponentRef:destroy() for dynamic objects to correctly remove themselves
251
- // Note: this will destroy all children dynamic components as well: gridItem -> childWidget
252
- //
253
- const n = w as GridStackNode;
254
- if (isGrid) {
255
- const grid = (n.el as GridCompHTMLElement)?._gridComp;
256
- if (grid?.ref) grid.ref.destroy();
257
- else grid?.ngOnDestroy();
258
- } else {
259
- const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;
260
- if (gridItem?.ref) gridItem.ref.destroy();
261
- else gridItem?.ngOnDestroy();
262
- }
263
- }
264
- return;
265
- }
266
-
267
- /**
268
- * called for each item in the grid - check if additional information needs to be saved.
269
- * Note: since this is options minus gridstack private members using Utils.removeInternalForSave(),
270
- * this typically doesn't need to do anything. However your custom Component @Input() are now supported
271
- * using BaseWidget.serialize()
272
- */
273
- export function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget) {
274
- const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;
275
- if (gridItem) {
276
- const input = gridItem.childWidget?.serialize();
277
- if (input) {
278
- w.input = input;
279
- }
280
- return;
281
- }
282
- // else check if Grid
283
- const grid = (n.el as GridCompHTMLElement)?._gridComp;
284
- if (grid) {
285
- //.... save any custom data
286
- }
287
- }