gridstack 10.2.1 → 10.3.1

package/.github/FUNDING.yml

@@ -1,12 +0,0 @@
-# These are supported funding model platforms
-
-github: [adumesny]
-patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-otechie: # Replace with a single Otechie username
-custom: ['https://www.paypal.me/alaind831', 'https://www.venmo.com/adumesny'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

package/angular/.editorconfig

@@ -1,16 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false

package/angular/README.md

@@ -1,170 +0,0 @@
-# Angular wrapper
-
-The Angular [wrapper component](projects/lib/src/lib/gridstack.component.ts) <gridstack> is a better way to use Gridstack, but alternative raw [ngFor](projects/demo/src/app/ngFor.ts) or [simple](projects/demo/src/app/simple.ts) demos are also given.
-
-# Dynamic grid items
-this is the recommended way if you are going to have multiple grids (alow drag&drop between) or drag from toolbar to create items, or drag to remove items, etc...
-
-I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
-
-HTML 
-```html
-<gridstack [options]="gridOptions">
-</gridstack>
-```
-
-CSS
-```css
-@import "gridstack/dist/gridstack.min.css";
-
-.grid-stack {
-  background: #FAFAD2;
-}
-.grid-stack-item-content {
-  text-align: center;
-  background-color: #18bc9c;
-}
-```
-
-in your module Code
-```ts
-import { GridstackModule } from 'gridstack/dist/angular';
-
-@NgModule({
-  imports: [GridstackModule, ...]
-  ...
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-Component Code
-```ts
-import { GridStackOptions } from 'gridstack';
-
-// sample grid options + items to load...
-public gridOptions: GridStackOptions = {
-  margin: 5,
-  children: [ // or call load()/addWidget() with same data
-    {x:0, y:0, minW:2, content:'Item 1'},
-    {x:1, y:0, content:'Item 2'},
-    {x:0, y:1, content:'Item 3'},
-  ]
-}
-```
-
-# More Complete example
-In this example (build on previous one) will use your actual custom angular components inside each grid item (instead of dummy html content) and have per component saved settings as well (using BaseWidget).
-
-HTML 
-```html
-<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
-  <div empty-content>message when grid is empty</div>
-</gridstack>
-```
-
-Code
-```ts
-import { Component } from '@angular/core';
-import { GridStack, GridStackOptions } from 'gridstack';
-import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB, BaseWidget } from 'gridstack/dist/angular';
-
-// some custom components
-@Component({
-  selector: 'app-a',
-  template: 'Comp A {{text}}',
-})
-export class AComponent extends BaseWidget implements OnDestroy {
-  @Input() text: string = 'foo'; // test custom input data
-  public override serialize(): NgCompInputs | undefined  { return this.text ? {text: this.text} : undefined; }
-  ngOnDestroy() {
-    console.log('Comp A destroyed'); // test to make sure cleanup happens
-  }
-}
-
-@Component({
-  selector: 'app-b',
-  template: 'Comp B',
-})
-export class BComponent extends BaseWidget {
-}
-
-// .... in your module for example
-constructor() {
-  // register all our dynamic components types created by the grid
-  GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
-}
-
-// now our content will use Components instead of dummy html content
-public gridOptions: NgGridStackOptions = {
-  margin: 5,
-  minRow: 1, // make space for empty message
-  children: [ // or call load()/addWidget() with same data
-    {x:0, y:0, minW:2, selector:'app-a'},
-    {x:1, y:0, selector:'app-b'},
-    {x:0, y:1, content:'plain html content'},
-  ]
-}
-
-// called whenever items change size/position/etc.. see other events
-public onChange(data: nodesCB) {
-  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
-}
-```
-
-# ngFor with wrapper
-For simple case where you control the children creation (gridstack doesn't do create or re-parenting)
-
-HTML 
-```html
-<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
-  <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
-    Item {{n.id}}
-  </gridstack-item>
-</gridstack>
-```
-
-Code
-```javascript
-import { GridStackOptions, GridStackWidget } from 'gridstack';
-import { nodesCB } from 'gridstack/dist/angular';
-
-/** sample grid options and items to load... */
-public gridOptions: GridStackOptions = { margin: 5 }
-public items: GridStackWidget[] = [
-  {x:0, y:0, minW:2, id:'1'}, // must have unique id used for trackBy
-  {x:1, y:0, id:'2'},
-  {x:0, y:1, id:'3'},
-];
-
-// called whenever items change size/position/etc..
-public onChange(data: nodesCB) {
-  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
-}
-
-// ngFor unique node id to have correct match between our items used and GS
-public identify(index: number, w: GridStackWidget) {
-  return w.id; // or use index if no id is set and you only modify at the end...
-}
-```
-
-## Demo
-You can see a fuller example at [app.component.ts](projects/demo/src/app/app.component.ts)
-
-to build the demo, go to [angular/projects/demo](projects/demo/) and run `yarn` + `yarn start` and navigate to `http://localhost:4200/` 
-
-Code ship starting with v8.1.2+ in `dist/angular` for people to use directly and is an angular module! (source code under `dist/angular/src`)
-## Caveats 
-
- - This wrapper needs: 
-    - gridstack v8 to run as it needs the latest changes (use older version that matches GS versions)
-    - Angular 13+ for dynamic createComponent() API
-
- ## *ngFor Caveats
- - This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update,
- you must manually update the `GridstackItemComponent.option` directly - see [modifyNgFor()](src/app/app.component.ts#L174) example.
- - The original client list of items is not updated to match **content** changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items. Client could use change/added/removed events to sync that list if they wish to do so.
-
- Would appreciate getting help doing the same for React and Vue (2 other popular frameworks)
- 
- -Alain

package/angular/README_build.md

@@ -1,27 +0,0 @@
-# GridstackLib
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.10.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/angular/angular.json

@@ -1,135 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "lib": {
-      "projectType": "library",
-      "root": "projects/lib",
-      "sourceRoot": "projects/lib/src",
-      "prefix": "lib",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/lib/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/lib/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/lib/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/lib/src/test.ts",
-            "tsConfig": "projects/lib/tsconfig.spec.json",
-            "karmaConfig": "projects/lib/karma.conf.js"
-          }
-        }
-      }
-    },
-    "demo": {
-      "projectType": "application",
-      "schematics": {},
-      "root": "projects/demo",
-      "sourceRoot": "projects/demo/src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/demo",
-            "index": "projects/demo/src/index.html",
-            "main": "projects/demo/src/main.ts",
-            "polyfills": "projects/demo/src/polyfills.ts",
-            "tsConfig": "projects/demo/tsconfig.app.json",
-            "assets": [
-              "projects/demo/src/favicon.ico",
-              "projects/demo/src/assets"
-            ],
-            "styles": [
-              "projects/demo/src/styles.css"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "projects/demo/src/environments/environment.ts",
-                  "with": "projects/demo/src/environments/environment.prod.ts"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "browserTarget": "demo:build:production"
-            },
-            "development": {
-              "browserTarget": "demo:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "demo:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/demo/src/test.ts",
-            "polyfills": "projects/demo/src/polyfills.ts",
-            "tsConfig": "projects/demo/tsconfig.spec.json",
-            "karmaConfig": "projects/demo/karma.conf.js",
-            "assets": [
-              "projects/demo/src/favicon.ico",
-              "projects/demo/src/assets"
-            ],
-            "styles": [
-              "projects/demo/src/styles.css"
-            ],
-            "scripts": []
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "analytics": false
-  }
-}

package/angular/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "gridstack-lib",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^14.2.0",
-    "@angular/common": "^14.2.0",
-    "@angular/compiler": "^14.2.0",
-    "@angular/core": "^14.2.0",
-    "@angular/forms": "^14.2.0",
-    "@angular/platform-browser": "^14.2.0",
-    "@angular/platform-browser-dynamic": "^14.2.0",
-    "@angular/router": "^14.2.0",
-    "gridstack": "^10.2.0",
-    "rxjs": "~7.5.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.11",
-    "@angular/cli": "~14.2.10",
-    "@angular/compiler-cli": "^14.2.0",
-    "@types/jasmine": "~4.0.0",
-    "jasmine-core": "~4.3.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "^14.2.0",
-    "typescript": "~4.7.2"
-  }
-}

package/angular/projects/lib/README.md

@@ -1,24 +0,0 @@
-# Gs
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project gs` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project gs`.
-> Note: Don't forget to add `--project gs` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build gs` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build gs`, go to the dist folder `cd dist/gs` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test gs` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/angular/projects/lib/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/angular",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/angular/projects/lib/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "gridstack-angular",
-  "version": "10.1.0",
-  "peerDependencies": {
-    "@angular/common": "^14.2.0",
-    "@angular/core": "^14.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
-}

package/angular/projects/lib/tsconfig.lib.json

@@ -1,15 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": []
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/angular/projects/lib/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/angular/projects/lib/tsconfig.spec.json

@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}