gridstack 8.1.1 → 8.2.0

package/README.md

@@ -147,7 +147,7 @@ GridStack no longer requires external dependencies as of v1.0.0 (lodash was remo
 
 search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
 
-- **Angular**: we now ship out of the box with Angular wrapper components - see <a href="https://github.com/gridstack/gridstack.js/tree/master/demo/angular/src/app" target="_blank">Angular Demo</a>.
+- **Angular**: we now ship out of the box with Angular wrapper components - see <a href="https://github.com/gridstack/gridstack.js/tree/master/angular" target="_blank">Angular Component</a>.
 - **Angular9**: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance so recommend for **concept ONLY if you wish to use directive instead**. teh code has been vented as I use components.
 - **AngularJS**: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
 - **Ember**: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
@@ -219,7 +219,7 @@ See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.htm
 
 If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[gs-w="X"]` and `.grid-stack-item[gs-x="X"]`.
 
-For instance for 4-column grid you need to write CSS to be:
+For instance for 4-column grid you need CSS to be:
 
 ```css
 .gs-4 > .grid-stack-item[gs-x="1"]  { left: 25% }
@@ -232,30 +232,31 @@ For instance for 4-column grid you need to write CSS to be:
 .gs-4 > .grid-stack-item[gs-w="4"]  { width: 100% }
 ```
 
-Better yet, here is a SASS code snippet, you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
+Better yet, here is a SCSS code snippet, you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
 
-```sass
+```scss
 $columns: 20;
 @function fixed($float) {
-  @return calc(round($float * 100) / 100); // total 4 digits being %
+  @return round($float * 1000) / 1000; // total 2+3 digits being %
 }
 .gs-#{$columns} > .grid-stack-item {
 
-  width: fixed(calc(100% / $columns));
+  width: fixed(100% / $columns);
 
   @for $i from 1 through $columns - 1 {
-    &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
-    &[gs-w='#{$i+1}'] { width: fixed(calc(100% / $columns) * ($i+1)); }
+    &[gs-x='#{$i}'] { left: fixed((100% / $columns) * $i); }
+    &[gs-w='#{$i+1}'] { width: fixed((100% / $columns) * ($i+1)); }
   }
 }
 ```
 
-you can also use the SASS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns.
+you can also use the SCSS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns.
 
 Sample gulp command for 30 columns:
 ```js
 gulp.src('node_modules/gridstack/dist/src/gridstack-extra.scss')
-        .pipe(replace('$gridstack-columns: 11 !default;','$gridstack-columns: 30;'))
+        .pipe(replace('$start: 2 !default;','$start: 30;'))
+        .pipe(replace('$end: 11 !default;','$end: 30;'))
         .pipe(sass({outputStyle: 'compressed'}))
         .pipe(rename({extname: '.min.css'}))
         .pipe(gulp.dest('dist/css'))
@@ -440,7 +441,7 @@ Possible breaking change if you use nested grid JSON format, or original Angular
 * `GridStackOptions.addRemoveCB` -> `GridStack.addRemoveCB` is now global instead of grid option
 * removed `GridStackOptions.dragInOptions` since `GridStack.setupDragIn()` has it replaced since 4.0
 * remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead
-* CSS rules removed `.grid-stack` prefix for anything already gs based, 12 column (default) now uses `.grid-stack-12`, `gs-min|max_w|h` attribute no longer written (but read)
+* CSS rules removed `.grid-stack` prefix for anything already gs based, 12 column (default) now uses `.gs-12`, extra.css is less than 1/4th it original size!, `gs-min|max_w|h` attribute no longer written (but read)
 
 # jQuery Application
 

package/angular/.editorconfig

@@ -0,0 +1,16 @@
+# 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/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/angular/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/angular/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

package/{dist/ng → angular}/README.md

@@ -1,154 +1,170 @@
-# Angular wrapper
-
-The Angular [wrapper component](./gridstack.component.ts) <gridstack> is a better way to use Gridstack, but alternative raw [ngFor](./ngFor.ts) or [simple](./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>
-```
-Code
-```ts
-import { GridStack, GridStackOptions } from 'gridstack';
-import { gsCreateNgComponents } from 'gridstack/dist/ng/gridstack.component';
-
-constructor() {
-  // use the built in component creation code
-  GridStack.addRemoveCB = gsCreateNgComponents;
-}
-
-// sample grid options and items to load...
-public gridOptions: GridStackOptions = {
-  margin: 5,
-  float: true,
-  children: [ // or call load()/addWidget() with same data
-    {x:0, y:0, minW:2, content:'Item 1'},
-    {x:1, y:1, content:'Item 2'},
-    {x:2, y:2, content:'Item 3'},
-  ]
-}
-```
-
-# More Complete example
-In this example will your actual custom angular components inside each grid item (instead of dummy html content)
-
-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 } from 'gridstack/dist/ng/gridstack.component';
-
-// some custom components
-@Component({
-  selector: 'app-a',
-  template: 'Comp A', // your real ng content goes in each component instead...
-})
-export class AComponent {
-}
-
-@Component({
-  selector: 'app-b',
-  template: 'Comp B',
-})
-export class BComponent {
-}
-
-// .... in your module for example
-constructor() {
-  // register all our dynamic components created in the grid
-  GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
-  // set globally our method to create the right widget type
-  GridStack.addRemoveCB = gsCreateNgComponents;
-  GridStack.saveCB = gsSaveAdditionalNgInfo;
-}
-
-// and now our content will look like instead of dummy html content
-public gridOptions: NgGridStackOptions = {
-  margin: 5,
-  float: true,
-  minRow: 1, // make space for empty message
-  children: [ // or call load()/addWidget() with same data
-    {x:0, y:0, minW:2, type:'app-a'},
-    {x:1, y:1, type:'app-b'},
-    {x:2, y:2, 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/ng/gridstack.component';
-
-/** sample grid options and items to load... */
-public gridOptions: GridStackOptions = {
-  margin: 5,
-  float: true,
-}
-public items: GridStackWidget[] = [
-  {x:0, y:0, minW:2, id:'1'}, // must have unique id used for trackBy
-  {x:1, y:1, id:'2'},
-  {x:2, y:2, 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](https://github.com/gridstack/gridstack.js/blob/master/demo/angular/src/app/app.component.ts)
-
-to build the demo, go to demo/angular and run `yarn` + `yarn start` and Navigate to `http://localhost:4200/` 
-
-## Caveats 
-
- - This wrapper needs: 
-    - gridstack v8.0+ to run as it needs the latest changes (use older version to match gs versions)
-    - Angular 13+ for dynamic createComponent() API
- - Code in now shipped starting with v8.0+ in dist/ng for people to use directly!
-
- ## *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()](./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
+# 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,
+  float: true,
+  children: [ // or call load()/addWidget() with same data
+    {x:0, y:0, minW:2, content:'Item 1'},
+    {x:1, y:1, content:'Item 2'},
+    {x:2, y:2, 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)
+
+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 } from 'gridstack/dist/angular';
+
+// some custom components
+@Component({
+  selector: 'app-a',
+  template: 'Comp A', // your real ng content goes in each component instead...
+})
+export class AComponent {
+}
+
+@Component({
+  selector: 'app-b',
+  template: 'Comp B',
+})
+export class BComponent {
+}
+
+// .... 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,
+  float: true,
+  minRow: 1, // make space for empty message
+  children: [ // or call load()/addWidget() with same data
+    {x:0, y:0, minW:2, type:'app-a'},
+    {x:1, y:1, type:'app-b'},
+    {x:2, y:2, 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,
+  float: true,
+}
+public items: GridStackWidget[] = [
+  {x:0, y:0, minW:2, id:'1'}, // must have unique id used for trackBy
+  {x:1, y:1, id:'2'},
+  {x:2, y:2, 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](src/app/app.component.ts)
+
+to build the demo, go to angular/projects/demo and run `yarn` + `yarn start` and navigate to `http://localhost:4200/` 
+
+Code now shipped starting with v8.1.2+ in `dist/angular` for people to use directly! (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

@@ -0,0 +1,27 @@
+# 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

@@ -0,0 +1,132 @@
+{
+  "$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": []
+          }
+        }
+      }
+    }
+  }
+}