gridstack 7.2.2 → 7.3.0

package/LICENSE

@@ -1,14 +1,6 @@
-v4+ Copyright (c) 2021 Alain Dumesny
-under MIT license
+MIT License
 
-previous v3.x and older is:
-/**
- * https://gridstackjs.com/
- * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
- * gridstack.js may be freely distributed under the MIT license.
-*/
-
-The MIT License (MIT)
+Copyright (c) 2019-2023 Alain Dumesny. v0.4.0 and older (c) 2014-2018 Pavel Reznikov, Dylan Weiss
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -4,7 +4,7 @@
 [![Coverage Status](https://coveralls.io/repos/github/gridstack/gridstack.js/badge.svg?branch=develop)](https://coveralls.io/github/gridstack/gridstack.js?branch=develop)
 [![downloads](https://img.shields.io/npm/dm/gridstack.svg)](https://www.npmjs.com/package/gridstack)
 
-Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Angular](https://angular.io/), [Knockout.js](http://knockoutjs.com), [Ember](https://www.emberjs.com/) and others (see [frameworks](#gridstackjs-for-specific-frameworks) section).
+Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Angular](https://angular.io/), [Knockout.js](http://knockoutjs.com), [Ember](https://www.emberjs.com/) and others (see [frameworks](#specific-frameworks) section).
 
 Inspired by no-longer maintained gridster, built with love.
 
@@ -15,7 +15,7 @@ If you find this lib useful, please donate [PayPal](https://www.paypal.me/alaind
 [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/alaind831)
 [![Donate](https://img.shields.io/badge/Donate-Venmo-g.svg)](https://www.venmo.com/adumesny)
 
-Join us on Slack: https://gridstackjs.slack.com
+Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/gridstackjs/shared_invite/zt-1jobnclsy-FqGGeLX5dFPM_ZQzTunBsw)
 
 <!-- [![Slack Status](https://gridstackjs.com/badge.svg)](https://gridstackjs.slack.com) -->
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
@@ -28,13 +28,13 @@ Join us on Slack: https://gridstackjs.slack.com
   - [Include](#include)
   - [Basic usage](#basic-usage)
   - [Requirements](#requirements)
+  - [Specific frameworks](#specific-frameworks)
   - [Extend Library](#extend-library)
   - [Extend Engine](#extend-engine)
   - [Change grid columns](#change-grid-columns)
   - [Custom columns CSS](#custom-columns-css)
   - [Override resizable/draggable options](#override-resizabledraggable-options)
   - [Touch devices support](#touch-devices-support)
-- [gridstack.js for specific frameworks](#gridstackjs-for-specific-frameworks)
 - [Migrating](#migrating)
   - [Migrating to v0.6](#migrating-to-v06)
   - [Migrating to v1](#migrating-to-v1)
@@ -142,6 +142,20 @@ see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example
 
 GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). v3 is a complete HTML5 re-write removing need for jquery (still available for legacy apps). v6 is native mouse and touch event for mobile support, and no longer have jquery-ui version. All you need to include now is `gridstack-all.js` and `gridstack.min.css` (layouts are done using CSS column based %).
 
+## Specific frameworks
+
+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>.
+- **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**.
+- **AngularJS**: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
+- **Ember**: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
+- **knockout**: see [demo](https://gridstackjs.com/demo/knockout.html) using component, but check [custom bindings ticket](https://github.com/gridstack/gridstack.js/issues/465) which is likely better approach.
+- **Rails**: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
+- **React**: see [demo](https://gridstackjs.com/demo/react.html) with [src](https://github.com/gridstack/gridstack.js/tree/master/demo/react.html), or  [react-gridstack-example](https://github.com/Inder2108/react-gridstack-example/tree/master/src/App.js), or read on what [hooks to use](https://github.com/gridstack/gridstack.js/issues/735#issuecomment-329888796)
+- **Vue**: see [demo](https://gridstackjs.com/demo/vue3js.html) with [v3 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue3js.html) or [v2 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue2js.html)
+- **Aurelia**: [aurelia-gridstack](https://github.com/aurelia-ui-toolkits/aurelia-gridstack), see [demo](https://aurelia-ui-toolkits.github.io/aurelia-gridstack/)
+
 ## Extend Library
 
 You can easily extend or patch gridstack with code like this:
@@ -289,20 +303,6 @@ GridStack.init(options);
 
 See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html).
 
-# gridstack.js for specific frameworks
-
-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>.
-- **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**.
-- **AngularJS**: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
-- **Ember**: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
-- **knockout**: see [demo](https://gridstackjs.com/demo/knockout.html) using component, but check [custom bindings ticket](https://github.com/gridstack/gridstack.js/issues/465) which is likely better approach.
-- **Rails**: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)
-- **React**: see [demo](https://gridstackjs.com/demo/react.html) with [src](https://github.com/gridstack/gridstack.js/tree/master/demo/react.html), or  [react-gridstack-example](https://github.com/Inder2108/react-gridstack-example/tree/master/src/App.js), or read on what [hooks to use](https://github.com/gridstack/gridstack.js/issues/735#issuecomment-329888796)
-- **Vue**: see [demo](https://gridstackjs.com/demo/vue3js.html) with [v3 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue3js.html) or [v2 src](https://github.com/gridstack/gridstack.js/tree/master/demo/vue2js.html)
-- **Aurelia**: [aurelia-gridstack](https://github.com/aurelia-ui-toolkits/aurelia-gridstack), see [demo](https://aurelia-ui-toolkits.github.io/aurelia-gridstack/)
-
 # Migrating
 ## Migrating to v0.6
 

package/dist/angular/README.md

@@ -9,7 +9,7 @@ I.E. don't use Angular templating to create children as that is harder to sync.
 
 Code
 
-```typescript
+```javascript
 import { GridStackOptions, GridStackWidget } from 'gridstack';
 import { GridstackComponent, nodesCB } from './gridstack.component';
 
@@ -30,8 +30,8 @@ public onChange(data: nodesCB) {
 }
 ```
 HTML 
-```angular2html
-<gridstack [options]="gridOptions" (changeGS)="onChange($event)">
+```html
+<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
 </gridstack>
 ```
 
@@ -40,7 +40,7 @@ For simple case where you control the children creation (gridstack doesn't do cr
 
 Code
 
-```typescript
+```javascript
 import { GridStackOptions, GridStackWidget } from 'gridstack';
 import { GridstackComponent, nodesCB } from './gridstack.component';
 
@@ -66,7 +66,7 @@ public identify(index: number, w: GridStackWidget) {
 }
 ```
 HTML 
-```angular2html
+```html
 <gridstack [options]="gridOptions" (changeCB)="onChange($event)">
   <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
     Item {{n.id}}
@@ -83,6 +83,7 @@ to build the demo, go to demo/angular and run `yarn` + `yarn start` and Navigate
 
  - This wrapper needs v7.2+ to run as it needs the latest changes
  - Code isn't compiled into a lib YET. You'll need to copy those files. Let me know (slack) if you are using it...
+ - BUG: content doesn't appear on new widget until widget is moved around (or another created that pushes it). Need to force angular detection changes...
 
  ## 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,

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

@@ -1,11 +1,16 @@
 /**
- * gridstack-item.component.ts 7.2.2
+ * gridstack-item.component.ts 7.3.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 
-import { ChangeDetectionStrategy, Component, ElementRef, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild, ViewContainerRef, OnDestroy } from '@angular/core';
 import { GridItemHTMLElement, GridStackNode } from 'gridstack';
 
+/** 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
  */
@@ -13,15 +18,21 @@ import { GridItemHTMLElement, GridStackNode } from 'gridstack';
   selector: 'gridstack-item',
   template: `
     <div class="grid-stack-item-content">
+      <!-- this is where you would create the right component based on some internal type or id. doing .content for demo purpose -->
       {{options.content}}
       <ng-content></ng-content>
+      <!-- where dynamic items go (like sub-grids) -->
+      <ng-template #container></ng-template>
     </div>`,
   styles: [`
     :host { display: block; }
   `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GridstackItemComponent {
+export class GridstackItemComponent implements OnDestroy {
+
+  /** container to append items dynamically */
+  @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
 
   /** list of options for creating/updating this item */
   @Input() public set options(val: GridStackNode) {
@@ -36,13 +47,13 @@ export class GridstackItemComponent {
   }
   /** return the latest grid options (from GS once built, otherwise initial values) */
   public get options(): GridStackNode {
-    return this.el.gridstackNode || this._options || {};
+    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(): GridItemHTMLElement { return this.elementRef.nativeElement; }
+  public get el(): GridItemCompHTMLElement { return this.elementRef.nativeElement; }
 
   /** clears the initial options now that we've built */
   public clearOptions() {
@@ -50,5 +61,10 @@ export class GridstackItemComponent {
   }
 
   constructor(private readonly elementRef: ElementRef<GridItemHTMLElement>) {
+    this.el._gridItemComp = this;
+  }
+
+  public ngOnDestroy(): void {
+    delete this.el._gridItemComp;
   }
 }

package/dist/angular/gridstack.component.ts

@@ -1,15 +1,15 @@
 /**
- * gridstack.component.ts 7.2.2
+ * gridstack.component.ts 7.3.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 
-import { AfterContentInit, ChangeDetectionStrategy, Component, ComponentFactoryResolver, ContentChildren, ElementRef, EventEmitter, Input,
+import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input,
   NgZone, OnDestroy, OnInit, Output, QueryList, ViewChild, ViewContainerRef } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { AddRemoveFcn, GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
+import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
 
-import { GridstackItemComponent } from './gridstack-item.component';
+import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
 
 /** events handlers emitters signature for different events */
 export type eventCB = {event: Event};
@@ -17,6 +17,11 @@ export type elementCB = {event: Event, el: GridItemHTMLElement};
 export type nodesCB = {event: Event, nodes: GridStackNode[]};
 export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode};
 
+/** store element to Ng Class pointer back */
+export interface GridCompHTMLElement extends GridHTMLElement {
+  _gridComp?: GridstackComponent;
+}
+
 /**
  * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
  */
@@ -24,7 +29,7 @@ export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: Gri
   selector: 'gridstack',
   template: `
     <!-- content to show when when grid is empty, like instructions on how to add widgets -->
-    <ng-content select="[no-item-content]" *ngIf="showEmpty"></ng-content>
+    <ng-content select="[empty-content]" *ngIf="isEmpty"></ng-content>
     <!-- where dynamic items go -->
     <ng-template #container></ng-template>
     <!-- where template items go -->
@@ -48,27 +53,30 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   public get options(): GridStackOptions { return this._grid?.opts || this._options || {}; }
 
   /** true while ng-content with 'no-item-content' should be shown when last item is removed from a grid */
-  @Input() public showEmpty?: boolean;
+  @Input() public 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.
    */
-  @Output() public added = new EventEmitter<nodesCB>();
-  @Output() public changeGS = new EventEmitter<nodesCB>(); // 'change' would trigger the raw CustomEvent so use different name
-  @Output() public disable = new EventEmitter<eventCB>();
-  @Output() public drag = new EventEmitter<elementCB>();
-  @Output() public dragstart = new EventEmitter<elementCB>();
-  @Output() public dragstop = new EventEmitter<elementCB>();
-  @Output() public dropped = new EventEmitter<droppedCB>();
-  @Output() public enable = new EventEmitter<eventCB>();
-  @Output() public removed = new EventEmitter<nodesCB>();
-  @Output() public resize = new EventEmitter<elementCB>();
-  @Output() public resizestart = new EventEmitter<elementCB>();
-  @Output() public resizestop = new EventEmitter<elementCB>();
+  @Output() public addedCB = new EventEmitter<nodesCB>();
+  @Output() public changeCB = new EventEmitter<nodesCB>();
+  @Output() public disableCB = new EventEmitter<eventCB>();
+  @Output() public dragCB = new EventEmitter<elementCB>();
+  @Output() public dragStartCB = new EventEmitter<elementCB>();
+  @Output() public dragStopCB = new EventEmitter<elementCB>();
+  @Output() public droppedCB = new EventEmitter<droppedCB>();
+  @Output() public enableCB = new EventEmitter<eventCB>();
+  @Output() public removedCB = new EventEmitter<nodesCB>();
+  @Output() public resizeCB = new EventEmitter<elementCB>();
+  @Output() public resizeStartCB = new EventEmitter<elementCB>();
+  @Output() public resizeStopCB = new EventEmitter<elementCB>();
 
   /** return the native element that contains grid specific fields as well */
-  public get el(): GridHTMLElement { return this.elementRef.nativeElement; }
+  public get el(): GridCompHTMLElement { return this.elementRef.nativeElement; }
 
   /** return the GridStack class */
   public get grid(): GridStack | undefined { return this._grid; }
@@ -76,21 +84,19 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   private _options?: GridStackOptions;
   private _grid?: GridStack;
   private loaded?: boolean;
-  private outsideAddRemove?: AddRemoveFcn;
   private ngUnsubscribe: Subject<void> = new Subject();
 
   constructor(
-    private readonly ngZone: NgZone,
-    private readonly elementRef: ElementRef<GridHTMLElement>,
-    private readonly resolver: ComponentFactoryResolver,
+    private readonly zone: NgZone,
+    private readonly elementRef: ElementRef<GridCompHTMLElement>,
   ) {
+    this.el._gridComp = this;
   }
 
   public ngOnInit(): void {
     // inject our own addRemove so we can create GridItemComponent instead of simple divs
     const opts: GridStackOptions = this._options || {};
-    if (opts.addRemoveCB) this.outsideAddRemove = opts.addRemoveCB;
-    opts.addRemoveCB = this._addRemoveCB.bind(this);
+    opts.addRemoveCB = GridstackComponent._addRemoveCB;
 
     // init ourself before any template children are created since we track them below anyway - no need to double create+update widgets
     this.loaded = !!this.options?.children?.length;
@@ -100,7 +106,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
 
   /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
   public ngAfterContentInit(): void {
-    this.ngZone.runOutsideAngular(() => {
+    this.zone.runOutsideAngular(() => {
       // track whenever the children list changes and update the layout...
       this.gridstackItems?.changes
         .pipe(takeUntil(this.ngUnsubscribe))
@@ -116,6 +122,7 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
     this.ngUnsubscribe.complete();
     this.grid?.destroy();
     delete this._grid;
+    delete this.el._gridComp;
   }
 
   /**
@@ -135,38 +142,44 @@ export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
   /** check if the grid is empty, if so show alternative content */
   public checkEmpty() {
     if (!this.grid) return;
-    this.showEmpty = !this.grid.engine.nodes.length;
+    this.isEmpty = !this.grid.engine.nodes.length;
   }
 
   /** get all known events as easy to use Outputs for convenience */
   private hookEvents(grid?: GridStack) {
     if (!grid) return;
     grid
-    .on('added', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => {this.added.emit({event, nodes}); this.checkEmpty(); }))
-    .on('change', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => this.changeGS.emit({event, nodes})))
-    .on('disable', (event: Event) => this.ngZone.run(() => this.disable.emit({event})))
-    .on('drag', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.drag.emit({event, el})))
-    .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragstart.emit({event, el})))
-    .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.dragstop.emit({event, el})))
-    .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.ngZone.run(() => this.dropped.emit({event, previousNode, newNode})))
-    .on('enable', (event: Event) => this.ngZone.run(() => this.enable.emit({event})))
-    .on('removed', (event: Event, nodes: GridStackNode[]) => this.ngZone.run(() => {this.removed.emit({event, nodes}); this.checkEmpty(); }))
-    .on('resize', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resize.emit({event, el})))
-    .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizestart.emit({event, el})))
-    .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.ngZone.run(() => this.resizestop.emit({event, el})))
+    .on('added', (event: Event, nodes: GridStackNode[]) => this.zone.run(() => { this.checkEmpty(); this.addedCB.emit({event, nodes}); }))
+    .on('change', (event: Event, nodes: GridStackNode[]) => this.zone.run(() => this.changeCB.emit({event, nodes})))
+    .on('disable', (event: Event) => this.zone.run(() => this.disableCB.emit({event})))
+    .on('drag', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.dragCB.emit({event, el})))
+    .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.dragStartCB.emit({event, el})))
+    .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.dragStopCB.emit({event, el})))
+    .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.zone.run(() => this.droppedCB.emit({event, previousNode, newNode})))
+    .on('enable', (event: Event) => this.zone.run(() => this.enableCB.emit({event})))
+    .on('removed', (event: Event, nodes: GridStackNode[]) => this.zone.run(() => { this.checkEmpty(); this.removedCB.emit({event, nodes}); }))
+    .on('resize', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.resizeCB.emit({event, el})))
+    .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.resizeStartCB.emit({event, el})))
+    .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.zone.run(() => this.resizeStopCB.emit({event, el})))
   }
 
   /** called by GS when a new item needs to be created, which we do as a Angular component, or deleted (skip) */
-  private _addRemoveCB(g: GridStack, w: GridStackWidget, add: boolean): HTMLElement | undefined {
+  private static _addRemoveCB(parent: GridCompHTMLElement | HTMLElement, w: GridStackWidget | GridStackOptions, add: boolean, isGrid: boolean): HTMLElement | undefined {
     if (add) {
-      if (!this.container) return;
+      if (!parent) return;
       // create the grid item dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
-      // and https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d#.irxd1nulp
-      const factory = this.resolver.resolveComponentFactory(GridstackItemComponent);
-      const gridItem = this.container.createComponent(factory).instance;
-      return gridItem.el;
+      if (isGrid) {
+        const gridItemComp = (parent.parentElement as GridItemCompHTMLElement)._gridItemComp;
+        const grid = gridItemComp?.container?.createComponent(GridstackComponent)?.instance;
+        if (grid) grid.options = w as GridStackOptions;
+        return grid?.el;
+      } else {
+        // TODO: use GridStackWidget to define what type of component to create as child, or do it in GridstackItemComponent template...
+        const gridComp = (parent as GridCompHTMLElement)._gridComp;
+        const gridItem = gridComp?.container?.createComponent(GridstackItemComponent)?.instance;
+        return gridItem?.el;
+      }
     }
-    // if (this.outsideAddRemove) this.outsideAddRemove(g, w, add);
     return;
   }
 }

package/dist/dd-base-impl.d.ts

@@ -1,5 +1,5 @@
 /**
- * dd-base-impl.ts 7.2.2
+ * dd-base-impl.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 export declare type EventCallback = (event: Event) => boolean | void;

package/dist/dd-base-impl.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * dd-base-impl.ts 7.2.2
+ * dd-base-impl.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/dd-base-impl.js.map

@@ -1 +1 @@
-{"version":3,"file":"dd-base-impl.js","sourceRoot":"","sources":["../src/dd-base-impl.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAGH,MAAsB,eAAe;IAArC;QAME,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IA0BT,CAAC;IAlCC,mHAAmH;IACnH,IAAW,QAAQ,KAAgB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IASpD,EAAE,CAAC,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAEM,GAAG,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,YAAY,CAAC,SAAiB,EAAE,KAAY;QACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;YACzE,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;CACF;AAnCD,0CAmCC","sourcesContent":["/**\n * dd-base-impl.ts 7.2.2\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nexport type EventCallback = (event: Event) => boolean|void;\nexport abstract class DDBaseImplement {\n  /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */\n  public get disabled(): boolean   { return this._disabled; }\n\n  /** @internal */\n  protected _disabled: boolean; // initial state to differentiate from false\n  /** @internal */\n  protected _eventRegister: {\n    [eventName: string]: EventCallback;\n  } = {};\n\n  public on(event: string, callback: EventCallback): void {\n    this._eventRegister[event] = callback;\n  }\n\n  public off(event: string): void {\n    delete this._eventRegister[event];\n  }\n\n  public enable(): void {\n    this._disabled = false;\n  }\n\n  public disable(): void {\n    this._disabled = true;\n  }\n\n  public destroy(): void {\n    delete this._eventRegister;\n  }\n\n  public triggerEvent(eventName: string, event: Event): boolean|void {\n    if (!this.disabled && this._eventRegister && this._eventRegister[eventName])\n      return this._eventRegister[eventName](event);\n  }\n}\n\nexport interface HTMLElementExtendOpt<T> {\n  el: HTMLElement;\n  option: T;\n  updateOption(T): DDBaseImplement;\n}\n"]}
+{"version":3,"file":"dd-base-impl.js","sourceRoot":"","sources":["../src/dd-base-impl.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAGH,MAAsB,eAAe;IAArC;QAME,gBAAgB;QACN,mBAAc,GAEpB,EAAE,CAAC;IA0BT,CAAC;IAlCC,mHAAmH;IACnH,IAAW,QAAQ,KAAgB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IASpD,EAAE,CAAC,KAAa,EAAE,QAAuB;QAC9C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;IACxC,CAAC;IAEM,GAAG,CAAC,KAAa;QACtB,OAAO,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACzB,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAEM,OAAO;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,YAAY,CAAC,SAAiB,EAAE,KAAY;QACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;YACzE,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;CACF;AAnCD,0CAmCC","sourcesContent":["/**\n * dd-base-impl.ts 7.3.0\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nexport type EventCallback = (event: Event) => boolean|void;\nexport abstract class DDBaseImplement {\n  /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */\n  public get disabled(): boolean   { return this._disabled; }\n\n  /** @internal */\n  protected _disabled: boolean; // initial state to differentiate from false\n  /** @internal */\n  protected _eventRegister: {\n    [eventName: string]: EventCallback;\n  } = {};\n\n  public on(event: string, callback: EventCallback): void {\n    this._eventRegister[event] = callback;\n  }\n\n  public off(event: string): void {\n    delete this._eventRegister[event];\n  }\n\n  public enable(): void {\n    this._disabled = false;\n  }\n\n  public disable(): void {\n    this._disabled = true;\n  }\n\n  public destroy(): void {\n    delete this._eventRegister;\n  }\n\n  public triggerEvent(eventName: string, event: Event): boolean|void {\n    if (!this.disabled && this._eventRegister && this._eventRegister[eventName])\n      return this._eventRegister[eventName](event);\n  }\n}\n\nexport interface HTMLElementExtendOpt<T> {\n  el: HTMLElement;\n  option: T;\n  updateOption(T): DDBaseImplement;\n}\n"]}

package/dist/dd-draggable.d.ts

@@ -1,5 +1,5 @@
 /**
- * dd-draggable.ts 7.2.2
+ * dd-draggable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';

package/dist/dd-draggable.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * dd-draggable.ts 7.2.2
+ * dd-draggable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -16,8 +16,8 @@ class DDDraggable extends dd_base_impl_1.DDBaseImplement {
         this.el = el;
         this.option = option;
         // get the element that is actually supposed to be dragged by
-        let className = option.handle.substring(1);
-        this.dragEl = el.classList.contains(className) ? el : el.querySelector(option.handle) || el;
+        let handleName = option.handle.substring(1);
+        this.dragEl = el.classList.contains(handleName) ? el : el.querySelector(option.handle) || el;
         // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)
         this._mouseDown = this._mouseDown.bind(this);
         this._mouseMove = this._mouseMove.bind(this);
@@ -87,10 +87,9 @@ class DDDraggable extends dd_base_impl_1.DDBaseImplement {
         // also check for content editable
         if (e.target.closest('[contenteditable="true"]'))
             return true;
+        // REMOVE: why would we get the event if it wasn't for us or child ?
         // make sure we are clicking on a drag handle or child of it...
         // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)
-        //
-        // REMOVE: why would we get the event if it wasn't for us or child ?
         // let className = this.option.handle.substring(1);
         // let el = e.target as HTMLElement;
         // while (el && !el.classList.contains(className)) { el = el.parentElement; }

package/dist/dd-draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"dd-draggable.js","sourceRoot":"","sources":["../src/dd-draggable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-draggable.ts 7.2.2\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nimport { DDManager } from './dd-manager';\nimport { Utils } from './utils';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { GridItemHTMLElement, DDUIData } from './types';\nimport { DDElementHost } from './dd-element';\nimport { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';\n\n// TODO: merge with DDDragOpt ?\nexport interface DDDraggableOpt {\n  appendTo?: string | HTMLElement;\n  handle?: string;\n  helper?: string | HTMLElement | ((event: Event) => HTMLElement);\n  // containment?: string | HTMLElement; // TODO: not implemented yet\n  // revert?: string | boolean | unknown; // TODO: not implemented yet\n  // scroll?: boolean; // native support by HTML5 drag drop, can't be switch to off actually\n  start?: (event: Event, ui: DDUIData) => void;\n  stop?: (event: Event) => void;\n  drag?: (event: Event, ui: DDUIData) => void;\n}\n\ninterface DragOffset {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n  offsetLeft: number;\n  offsetTop: number;\n}\n\ntype DDDragEvent = 'drag' | 'dragstart' | 'dragstop';\n\n// let count = 0; // TEST\n\nexport class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {\n  public el: HTMLElement;\n  public option: DDDraggableOpt;\n  public helper: HTMLElement; // used by GridStackDDNative\n\n  /** @internal */\n  protected mouseDownEvent: MouseEvent;\n  /** @internal */\n  protected dragOffset: DragOffset;\n  /** @internal */\n  protected dragElementOriginStyle: Array<string>;\n  /** @internal */\n  protected dragEl: HTMLElement;\n  /** @internal true while we are dragging an item around */\n  protected dragging: boolean;\n  /** @internal */\n  protected parentOriginStylePosition: string;\n  /** @internal */\n  protected helperContainment: HTMLElement;\n  /** @internal properties we change during dragging, and restore back */\n  protected static originStyleProp = ['transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];\n  /** @internal pause before we call the actual drag hit collision code */\n  protected dragTimeout: number;\n\n  constructor(el: HTMLElement, option: DDDraggableOpt = {}) {\n    super();\n    this.el = el;\n    this.option = option;\n    // get the element that is actually supposed to be dragged by\n    let className = option.handle.substring(1);\n    this.dragEl = el.classList.contains(className) ? el : el.querySelector(option.handle) || el;\n    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n    this._mouseDown = this._mouseDown.bind(this);\n    this._mouseMove = this._mouseMove.bind(this);\n    this._mouseUp = this._mouseUp.bind(this);\n    this.enable();\n  }\n\n  public on(event: DDDragEvent, callback: (event: DragEvent) => void): void {\n    super.on(event, callback);\n  }\n\n  public off(event: DDDragEvent): void {\n    super.off(event);\n  }\n\n  public enable(): void {\n    if (this.disabled === false) return;\n    super.enable();\n    this.dragEl.addEventListener('mousedown', this._mouseDown);\n    if (isTouch) {\n      this.dragEl.addEventListener('touchstart', touchstart);\n      this.dragEl.addEventListener('pointerdown', pointerdown);\n      // this.dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment\n    }\n    this.el.classList.remove('ui-draggable-disabled');\n    this.el.classList.add('ui-draggable');\n  }\n\n  public disable(forDestroy = false): void {\n    if (this.disabled === true) return;\n    super.disable();\n    this.dragEl.removeEventListener('mousedown', this._mouseDown);\n    if (isTouch) {\n      this.dragEl.removeEventListener('touchstart', touchstart);\n      this.dragEl.removeEventListener('pointerdown', pointerdown);\n    }\n    this.el.classList.remove('ui-draggable');\n    if (!forDestroy) this.el.classList.add('ui-draggable-disabled');\n  }\n\n  public destroy(): void {\n    if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n    delete this.dragTimeout;\n    if (this.dragging) this._mouseUp(this.mouseDownEvent);\n    this.disable(true);\n    delete this.el;\n    delete this.helper;\n    delete this.option;\n    super.destroy();\n  }\n\n  public updateOption(opts: DDDraggableOpt): DDDraggable {\n    Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n    return this;\n  }\n\n  /** @internal call when mouse goes down before a dragstart happens */\n  protected _mouseDown(e: MouseEvent): boolean {\n    // don't let more than one widget handle mouseStart\n    if (DDManager.mouseHandled) return;\n    if (e.button !== 0) return true; // only left click\n\n    // make sure we are not clicking on known object that handles mouseDown (TODO: make this extensible ?) #2054\n    const skipMouseDown = ['input', 'textarea', 'button', 'select', 'option'];\n    const name = (e.target as HTMLElement).nodeName.toLowerCase();\n    if (skipMouseDown.find(skip => skip === name)) return true;\n    // also check for content editable\n    if ((e.target as HTMLElement).closest('[contenteditable=\"true\"]')) return true;\n\n    // make sure we are clicking on a drag handle or child of it...\n    // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)\n    //\n    // REMOVE: why would we get the event if it wasn't for us or child ?\n    // let className = this.option.handle.substring(1);\n    // let el = e.target as HTMLElement;\n    // while (el && !el.classList.contains(className)) { el = el.parentElement; }\n    // if (!el) return;\n    this.mouseDownEvent = e;\n    delete this.dragging;\n    delete DDManager.dragElement;\n    delete DDManager.dropElement;\n    // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack\n    document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble\n    document.addEventListener('mouseup', this._mouseUp, true);\n    if (isTouch) {\n      this.dragEl.addEventListener('touchmove', touchmove);\n      this.dragEl.addEventListener('touchend', touchend);\n    }\n\n    e.preventDefault();\n    // preventDefault() prevents blur event which occurs just after mousedown event.\n    // if an editable content has focus, then blur must be call\n    if(document.activeElement) (document.activeElement  as HTMLElement).blur();\n\n    DDManager.mouseHandled = true;\n    return true;\n  }\n\n  /** @internal method to call actual drag event */\n  protected _callDrag(e: DragEvent): void {\n    if (!this.dragging) return;\n    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'drag' });\n    if (this.option.drag) {\n      this.option.drag(ev, this.ui());\n    }\n    this.triggerEvent('drag', ev);\n  }\n\n  /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */\n  protected _mouseMove(e: DragEvent): boolean {\n    // console.log(`${count++} move ${e.x},${e.y}`)\n    let s = this.mouseDownEvent;\n\n    if (this.dragging) {\n      this._dragFollow(e);\n      // delay actual grid handling drag until we pause for a while if set\n      if (DDManager.pauseDrag) {\n        const pause = Number.isInteger(DDManager.pauseDrag) ? DDManager.pauseDrag as number : 100;\n        if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n        this.dragTimeout = window.setTimeout(() => this._callDrag(e), pause);\n      } else {\n        this._callDrag(e);\n      }\n    } else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) {\n      /**\n       * don't start unless we've moved at least 3 pixels\n       */\n      this.dragging = true;\n      DDManager.dragElement = this;\n      // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)\n      let grid = (this.el as GridItemHTMLElement).gridstackNode?.grid;\n      if (grid) {\n        DDManager.dropElement = (grid.el as DDElementHost).ddElement.ddDroppable;\n      } else {\n        delete DDManager.dropElement;\n      }\n      this.helper = this._createHelper(e);\n      this._setupHelperContainmentStyle();\n      this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);\n      const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstart' });\n\n      this._setupHelperStyle(e);\n      if (this.option.start) {\n        this.option.start(ev, this.ui());\n      }\n      this.triggerEvent('dragstart', ev);\n    }\n    e.preventDefault(); // needed otherwise we get text sweep text selection as we drag around\n    return true;\n  }\n\n  /** @internal call when the mouse gets released to drop the item at current location */\n  protected _mouseUp(e: MouseEvent): void {\n    document.removeEventListener('mousemove', this._mouseMove, true);\n    document.removeEventListener('mouseup', this._mouseUp, true);\n    if (isTouch) {\n      this.dragEl.removeEventListener('touchmove', touchmove, true);\n      this.dragEl.removeEventListener('touchend', touchend, true);\n    }\n    if (this.dragging) {\n      delete this.dragging;\n\n      // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)\n      if (DDManager.dropElement?.el === this.el.parentElement) {\n        delete DDManager.dropElement;\n      }\n\n      this.helperContainment.style.position = this.parentOriginStylePosition || null;\n      if (this.helper === this.el) {\n        this._removeHelperStyle();\n      } else {\n        this.helper.remove();\n      }\n      const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstop' });\n      if (this.option.stop) {\n        this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!\n      }\n      this.triggerEvent('dragstop', ev);\n\n      // call the droppable method to receive the item\n      if (DDManager.dropElement) {\n        DDManager.dropElement.drop(e);\n      }\n    }\n    delete this.helper;\n    delete this.mouseDownEvent;\n    delete DDManager.dragElement;\n    delete DDManager.dropElement;\n    delete DDManager.mouseHandled;\n    e.preventDefault();\n  }\n\n  /** @internal create a clone copy (or user defined method) of the original drag item if set */\n  protected _createHelper(event: DragEvent): HTMLElement {\n    let helper = this.el;\n    if (typeof this.option.helper === 'function') {\n      helper = this.option.helper(event);\n    } else if (this.option.helper === 'clone') {\n      helper = Utils.cloneNode(this.el);\n    }\n    if (!document.body.contains(helper)) {\n      Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentNode : this.option.appendTo);\n    }\n    if (helper === this.el) {\n      this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);\n    }\n    return helper;\n  }\n\n  /** @internal set the fix position of the dragged item */\n  protected _setupHelperStyle(e: DragEvent): DDDraggable {\n    this.helper.classList.add('ui-draggable-dragging');\n    // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593\n    const style = this.helper.style;\n    style.pointerEvents = 'none'; // needed for over items to get enter/leave\n    // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (done in CSS as well)\n    style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %)\n    style.width = this.dragOffset.width + 'px';\n    style.height = this.dragOffset.height + 'px';\n    style.willChange = 'left, top';\n    style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'\n    this._dragFollow(e); // now position it\n    style.transition = 'none'; // show up instantly\n    setTimeout(() => {\n      if (this.helper) {\n        style.transition = null; // recover animation\n      }\n    }, 0);\n    return this;\n  }\n\n  /** @internal restore back the original style before dragging */\n  protected _removeHelperStyle(): DDDraggable {\n    this.helper.classList.remove('ui-draggable-dragging');\n    let node = (this.helper as GridItemHTMLElement)?.gridstackNode;\n    // don't bother restoring styles if we're gonna remove anyway...\n    if (!node?._isAboutToRemove && this.dragElementOriginStyle) {\n      let helper = this.helper;\n      // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.\n      // TODO: this also removes resizing animation which doesn't have this issue, but others.\n      // Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match,\n      // then trigger a delay (repaint) to restore to final dest with animate) but then we need to make sure 'resizestop'\n      // is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)\n      let transition = this.dragElementOriginStyle['transition'] || null;\n      helper.style.transition = this.dragElementOriginStyle['transition'] = 'none'; // can't be NULL #1973\n      DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);\n      setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)\n    }\n    delete this.dragElementOriginStyle;\n    return this;\n  }\n\n  /** @internal updates the top/left position to follow the mouse */\n  protected _dragFollow(e: DragEvent): void {\n    let containmentRect = { left: 0, top: 0 };\n    // if (this.helper.style.position === 'absolute') { // we use 'fixed'\n    //   const { left, top } = this.helperContainment.getBoundingClientRect();\n    //   containmentRect = { left, top };\n    // }\n    const style = this.helper.style;\n    const offset = this.dragOffset;\n    style.left = e.clientX + offset.offsetLeft - containmentRect.left + 'px';\n    style.top = e.clientY + offset.offsetTop - containmentRect.top + 'px';\n  }\n\n  /** @internal */\n  protected _setupHelperContainmentStyle(): DDDraggable {\n    this.helperContainment = this.helper.parentElement;\n    if (this.helper.style.position !== 'fixed') {\n      this.parentOriginStylePosition = this.helperContainment.style.position;\n      if (window.getComputedStyle(this.helperContainment).position.match(/static/)) {\n        this.helperContainment.style.position = 'relative';\n      }\n    }\n    return this;\n  }\n\n  /** @internal */\n  protected _getDragOffset(event: DragEvent, el: HTMLElement, parent: HTMLElement): DragOffset {\n\n    // in case ancestor has transform/perspective css properties that change the viewpoint\n    let xformOffsetX = 0;\n    let xformOffsetY = 0;\n    if (parent) {\n      const testEl = document.createElement('div');\n      Utils.addElStyles(testEl, {\n        opacity: '0',\n        position: 'fixed',\n        top: 0 + 'px',\n        left: 0 + 'px',\n        width: '1px',\n        height: '1px',\n        zIndex: '-999999',\n      });\n      parent.appendChild(testEl);\n      const testElPosition = testEl.getBoundingClientRect();\n      parent.removeChild(testEl);\n      xformOffsetX = testElPosition.left;\n      xformOffsetY = testElPosition.top;\n      // TODO: scale ?\n    }\n\n    const targetOffset = el.getBoundingClientRect();\n    return {\n      left: targetOffset.left,\n      top: targetOffset.top,\n      offsetLeft: - event.clientX + targetOffset.left - xformOffsetX,\n      offsetTop: - event.clientY + targetOffset.top - xformOffsetY,\n      width: targetOffset.width,\n      height: targetOffset.height\n    };\n  }\n\n  /** @internal TODO: set to public as called by DDDroppable! */\n  public ui(): DDUIData {\n    const containmentEl = this.el.parentElement;\n    const containmentRect = containmentEl.getBoundingClientRect();\n    const offset = this.helper.getBoundingClientRect();\n    return {\n      position: { //Current CSS position of the helper as { top, left } object\n        top: offset.top - containmentRect.top,\n        left: offset.left - containmentRect.left\n      }\n      /* not used by GridStack for now...\n      helper: [this.helper], //The object arr representing the helper that's being dragged.\n      offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.\n      */\n    };\n  }\n}\n"]}
+{"version":3,"file":"dd-draggable.js","sourceRoot":"","sources":["../src/dd-draggable.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * dd-draggable.ts 7.3.0\n * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license\n */\n\nimport { DDManager } from './dd-manager';\nimport { Utils } from './utils';\nimport { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';\nimport { GridItemHTMLElement, DDUIData } from './types';\nimport { DDElementHost } from './dd-element';\nimport { isTouch, touchend, touchmove, touchstart, pointerdown } from './dd-touch';\n\n// TODO: merge with DDDragOpt ?\nexport interface DDDraggableOpt {\n  appendTo?: string | HTMLElement;\n  handle?: string;\n  helper?: string | HTMLElement | ((event: Event) => HTMLElement);\n  // containment?: string | HTMLElement; // TODO: not implemented yet\n  // revert?: string | boolean | unknown; // TODO: not implemented yet\n  // scroll?: boolean; // native support by HTML5 drag drop, can't be switch to off actually\n  start?: (event: Event, ui: DDUIData) => void;\n  stop?: (event: Event) => void;\n  drag?: (event: Event, ui: DDUIData) => void;\n}\n\ninterface DragOffset {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n  offsetLeft: number;\n  offsetTop: number;\n}\n\ntype DDDragEvent = 'drag' | 'dragstart' | 'dragstop';\n\n// let count = 0; // TEST\n\nexport class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {\n  public el: HTMLElement;\n  public option: DDDraggableOpt;\n  public helper: HTMLElement; // used by GridStackDDNative\n\n  /** @internal */\n  protected mouseDownEvent: MouseEvent;\n  /** @internal */\n  protected dragOffset: DragOffset;\n  /** @internal */\n  protected dragElementOriginStyle: Array<string>;\n  /** @internal */\n  protected dragEl: HTMLElement;\n  /** @internal true while we are dragging an item around */\n  protected dragging: boolean;\n  /** @internal */\n  protected parentOriginStylePosition: string;\n  /** @internal */\n  protected helperContainment: HTMLElement;\n  /** @internal properties we change during dragging, and restore back */\n  protected static originStyleProp = ['transition', 'pointerEvents', 'position', 'left', 'top', 'minWidth', 'willChange'];\n  /** @internal pause before we call the actual drag hit collision code */\n  protected dragTimeout: number;\n\n  constructor(el: HTMLElement, option: DDDraggableOpt = {}) {\n    super();\n    this.el = el;\n    this.option = option;\n    // get the element that is actually supposed to be dragged by\n    let handleName = option.handle.substring(1);\n    this.dragEl = el.classList.contains(handleName) ? el : el.querySelector(option.handle) || el;\n    // create var event binding so we can easily remove and still look like TS methods (unlike anonymous functions)\n    this._mouseDown = this._mouseDown.bind(this);\n    this._mouseMove = this._mouseMove.bind(this);\n    this._mouseUp = this._mouseUp.bind(this);\n    this.enable();\n  }\n\n  public on(event: DDDragEvent, callback: (event: DragEvent) => void): void {\n    super.on(event, callback);\n  }\n\n  public off(event: DDDragEvent): void {\n    super.off(event);\n  }\n\n  public enable(): void {\n    if (this.disabled === false) return;\n    super.enable();\n    this.dragEl.addEventListener('mousedown', this._mouseDown);\n    if (isTouch) {\n      this.dragEl.addEventListener('touchstart', touchstart);\n      this.dragEl.addEventListener('pointerdown', pointerdown);\n      // this.dragEl.style.touchAction = 'none'; // not needed unlike pointerdown doc comment\n    }\n    this.el.classList.remove('ui-draggable-disabled');\n    this.el.classList.add('ui-draggable');\n  }\n\n  public disable(forDestroy = false): void {\n    if (this.disabled === true) return;\n    super.disable();\n    this.dragEl.removeEventListener('mousedown', this._mouseDown);\n    if (isTouch) {\n      this.dragEl.removeEventListener('touchstart', touchstart);\n      this.dragEl.removeEventListener('pointerdown', pointerdown);\n    }\n    this.el.classList.remove('ui-draggable');\n    if (!forDestroy) this.el.classList.add('ui-draggable-disabled');\n  }\n\n  public destroy(): void {\n    if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n    delete this.dragTimeout;\n    if (this.dragging) this._mouseUp(this.mouseDownEvent);\n    this.disable(true);\n    delete this.el;\n    delete this.helper;\n    delete this.option;\n    super.destroy();\n  }\n\n  public updateOption(opts: DDDraggableOpt): DDDraggable {\n    Object.keys(opts).forEach(key => this.option[key] = opts[key]);\n    return this;\n  }\n\n  /** @internal call when mouse goes down before a dragstart happens */\n  protected _mouseDown(e: MouseEvent): boolean {\n    // don't let more than one widget handle mouseStart\n    if (DDManager.mouseHandled) return;\n    if (e.button !== 0) return true; // only left click\n\n    // make sure we are not clicking on known object that handles mouseDown (TODO: make this extensible ?) #2054\n    const skipMouseDown = ['input', 'textarea', 'button', 'select', 'option'];\n    const name = (e.target as HTMLElement).nodeName.toLowerCase();\n    if (skipMouseDown.find(skip => skip === name)) return true;\n    // also check for content editable\n    if ((e.target as HTMLElement).closest('[contenteditable=\"true\"]')) return true;\n\n    // REMOVE: why would we get the event if it wasn't for us or child ?\n    // make sure we are clicking on a drag handle or child of it...\n    // Note: we don't need to check that's handle is an immediate child, as mouseHandled will prevent parents from also handling it (lowest wins)\n    // let className = this.option.handle.substring(1);\n    // let el = e.target as HTMLElement;\n    // while (el && !el.classList.contains(className)) { el = el.parentElement; }\n    // if (!el) return;\n\n    this.mouseDownEvent = e;\n    delete this.dragging;\n    delete DDManager.dragElement;\n    delete DDManager.dropElement;\n    // document handler so we can continue receiving moves as the item is 'fixed' position, and capture=true so WE get a first crack\n    document.addEventListener('mousemove', this._mouseMove, true); // true=capture, not bubble\n    document.addEventListener('mouseup', this._mouseUp, true);\n    if (isTouch) {\n      this.dragEl.addEventListener('touchmove', touchmove);\n      this.dragEl.addEventListener('touchend', touchend);\n    }\n\n    e.preventDefault();\n    // preventDefault() prevents blur event which occurs just after mousedown event.\n    // if an editable content has focus, then blur must be call\n    if (document.activeElement) (document.activeElement as HTMLElement).blur();\n\n    DDManager.mouseHandled = true;\n    return true;\n  }\n\n  /** @internal method to call actual drag event */\n  protected _callDrag(e: DragEvent): void {\n    if (!this.dragging) return;\n    const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'drag' });\n    if (this.option.drag) {\n      this.option.drag(ev, this.ui());\n    }\n    this.triggerEvent('drag', ev);\n  }\n\n  /** @internal called when the main page (after successful mousedown) receives a move event to drag the item around the screen */\n  protected _mouseMove(e: DragEvent): boolean {\n    // console.log(`${count++} move ${e.x},${e.y}`)\n    let s = this.mouseDownEvent;\n\n    if (this.dragging) {\n      this._dragFollow(e);\n      // delay actual grid handling drag until we pause for a while if set\n      if (DDManager.pauseDrag) {\n        const pause = Number.isInteger(DDManager.pauseDrag) ? DDManager.pauseDrag as number : 100;\n        if (this.dragTimeout) window.clearTimeout(this.dragTimeout);\n        this.dragTimeout = window.setTimeout(() => this._callDrag(e), pause);\n      } else {\n        this._callDrag(e);\n      }\n    } else if (Math.abs(e.x - s.x) + Math.abs(e.y - s.y) > 3) {\n      /**\n       * don't start unless we've moved at least 3 pixels\n       */\n      this.dragging = true;\n      DDManager.dragElement = this;\n      // if we're dragging an actual grid item, set the current drop as the grid (to detect enter/leave)\n      let grid = (this.el as GridItemHTMLElement).gridstackNode?.grid;\n      if (grid) {\n        DDManager.dropElement = (grid.el as DDElementHost).ddElement.ddDroppable;\n      } else {\n        delete DDManager.dropElement;\n      }\n      this.helper = this._createHelper(e);\n      this._setupHelperContainmentStyle();\n      this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment);\n      const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstart' });\n\n      this._setupHelperStyle(e);\n      if (this.option.start) {\n        this.option.start(ev, this.ui());\n      }\n      this.triggerEvent('dragstart', ev);\n    }\n    e.preventDefault(); // needed otherwise we get text sweep text selection as we drag around\n    return true;\n  }\n\n  /** @internal call when the mouse gets released to drop the item at current location */\n  protected _mouseUp(e: MouseEvent): void {\n    document.removeEventListener('mousemove', this._mouseMove, true);\n    document.removeEventListener('mouseup', this._mouseUp, true);\n    if (isTouch) {\n      this.dragEl.removeEventListener('touchmove', touchmove, true);\n      this.dragEl.removeEventListener('touchend', touchend, true);\n    }\n    if (this.dragging) {\n      delete this.dragging;\n\n      // reset the drop target if dragging over ourself (already parented, just moving during stop callback below)\n      if (DDManager.dropElement?.el === this.el.parentElement) {\n        delete DDManager.dropElement;\n      }\n\n      this.helperContainment.style.position = this.parentOriginStylePosition || null;\n      if (this.helper === this.el) {\n        this._removeHelperStyle();\n      } else {\n        this.helper.remove();\n      }\n      const ev = Utils.initEvent<DragEvent>(e, { target: this.el, type: 'dragstop' });\n      if (this.option.stop) {\n        this.option.stop(ev); // NOTE: destroy() will be called when removing item, so expect NULL ptr after!\n      }\n      this.triggerEvent('dragstop', ev);\n\n      // call the droppable method to receive the item\n      if (DDManager.dropElement) {\n        DDManager.dropElement.drop(e);\n      }\n    }\n    delete this.helper;\n    delete this.mouseDownEvent;\n    delete DDManager.dragElement;\n    delete DDManager.dropElement;\n    delete DDManager.mouseHandled;\n    e.preventDefault();\n  }\n\n  /** @internal create a clone copy (or user defined method) of the original drag item if set */\n  protected _createHelper(event: DragEvent): HTMLElement {\n    let helper = this.el;\n    if (typeof this.option.helper === 'function') {\n      helper = this.option.helper(event);\n    } else if (this.option.helper === 'clone') {\n      helper = Utils.cloneNode(this.el);\n    }\n    if (!document.body.contains(helper)) {\n      Utils.appendTo(helper, this.option.appendTo === 'parent' ? this.el.parentNode : this.option.appendTo);\n    }\n    if (helper === this.el) {\n      this.dragElementOriginStyle = DDDraggable.originStyleProp.map(prop => this.el.style[prop]);\n    }\n    return helper;\n  }\n\n  /** @internal set the fix position of the dragged item */\n  protected _setupHelperStyle(e: DragEvent): DDDraggable {\n    this.helper.classList.add('ui-draggable-dragging');\n    // TODO: set all at once with style.cssText += ... ? https://stackoverflow.com/questions/3968593\n    const style = this.helper.style;\n    style.pointerEvents = 'none'; // needed for over items to get enter/leave\n    // style.cursor = 'move'; //  TODO: can't set with pointerEvents=none ! (done in CSS as well)\n    style['min-width'] = 0; // since we no longer relative to our parent and we don't resize anyway (normally 100/#column %)\n    style.width = this.dragOffset.width + 'px';\n    style.height = this.dragOffset.height + 'px';\n    style.willChange = 'left, top';\n    style.position = 'fixed'; // let us drag between grids by not clipping as parent .grid-stack is position: 'relative'\n    this._dragFollow(e); // now position it\n    style.transition = 'none'; // show up instantly\n    setTimeout(() => {\n      if (this.helper) {\n        style.transition = null; // recover animation\n      }\n    }, 0);\n    return this;\n  }\n\n  /** @internal restore back the original style before dragging */\n  protected _removeHelperStyle(): DDDraggable {\n    this.helper.classList.remove('ui-draggable-dragging');\n    let node = (this.helper as GridItemHTMLElement)?.gridstackNode;\n    // don't bother restoring styles if we're gonna remove anyway...\n    if (!node?._isAboutToRemove && this.dragElementOriginStyle) {\n      let helper = this.helper;\n      // don't animate, otherwise we animate offseted when switching back to 'absolute' from 'fixed'.\n      // TODO: this also removes resizing animation which doesn't have this issue, but others.\n      // Ideally both would animate ('move' would immediately restore 'absolute' and adjust coordinate to match,\n      // then trigger a delay (repaint) to restore to final dest with animate) but then we need to make sure 'resizestop'\n      // is called AFTER 'transitionend' event is received (see https://github.com/gridstack/gridstack.js/issues/2033)\n      let transition = this.dragElementOriginStyle['transition'] || null;\n      helper.style.transition = this.dragElementOriginStyle['transition'] = 'none'; // can't be NULL #1973\n      DDDraggable.originStyleProp.forEach(prop => helper.style[prop] = this.dragElementOriginStyle[prop] || null);\n      setTimeout(() => helper.style.transition = transition, 50); // recover animation from saved vars after a pause (0 isn't enough #1973)\n    }\n    delete this.dragElementOriginStyle;\n    return this;\n  }\n\n  /** @internal updates the top/left position to follow the mouse */\n  protected _dragFollow(e: DragEvent): void {\n    let containmentRect = { left: 0, top: 0 };\n    // if (this.helper.style.position === 'absolute') { // we use 'fixed'\n    //   const { left, top } = this.helperContainment.getBoundingClientRect();\n    //   containmentRect = { left, top };\n    // }\n    const style = this.helper.style;\n    const offset = this.dragOffset;\n    style.left = e.clientX + offset.offsetLeft - containmentRect.left + 'px';\n    style.top = e.clientY + offset.offsetTop - containmentRect.top + 'px';\n  }\n\n  /** @internal */\n  protected _setupHelperContainmentStyle(): DDDraggable {\n    this.helperContainment = this.helper.parentElement;\n    if (this.helper.style.position !== 'fixed') {\n      this.parentOriginStylePosition = this.helperContainment.style.position;\n      if (window.getComputedStyle(this.helperContainment).position.match(/static/)) {\n        this.helperContainment.style.position = 'relative';\n      }\n    }\n    return this;\n  }\n\n  /** @internal */\n  protected _getDragOffset(event: DragEvent, el: HTMLElement, parent: HTMLElement): DragOffset {\n\n    // in case ancestor has transform/perspective css properties that change the viewpoint\n    let xformOffsetX = 0;\n    let xformOffsetY = 0;\n    if (parent) {\n      const testEl = document.createElement('div');\n      Utils.addElStyles(testEl, {\n        opacity: '0',\n        position: 'fixed',\n        top: 0 + 'px',\n        left: 0 + 'px',\n        width: '1px',\n        height: '1px',\n        zIndex: '-999999',\n      });\n      parent.appendChild(testEl);\n      const testElPosition = testEl.getBoundingClientRect();\n      parent.removeChild(testEl);\n      xformOffsetX = testElPosition.left;\n      xformOffsetY = testElPosition.top;\n      // TODO: scale ?\n    }\n\n    const targetOffset = el.getBoundingClientRect();\n    return {\n      left: targetOffset.left,\n      top: targetOffset.top,\n      offsetLeft: - event.clientX + targetOffset.left - xformOffsetX,\n      offsetTop: - event.clientY + targetOffset.top - xformOffsetY,\n      width: targetOffset.width,\n      height: targetOffset.height\n    };\n  }\n\n  /** @internal TODO: set to public as called by DDDroppable! */\n  public ui(): DDUIData {\n    const containmentEl = this.el.parentElement;\n    const containmentRect = containmentEl.getBoundingClientRect();\n    const offset = this.helper.getBoundingClientRect();\n    return {\n      position: { //Current CSS position of the helper as { top, left } object\n        top: offset.top - containmentRect.top,\n        left: offset.left - containmentRect.left\n      }\n      /* not used by GridStack for now...\n      helper: [this.helper], //The object arr representing the helper that's being dragged.\n      offset: { top: offset.top, left: offset.left } // Current offset position of the helper as { top, left } object.\n      */\n    };\n  }\n}\n"]}

package/dist/dd-droppable.d.ts

@@ -1,5 +1,5 @@
 /**
- * dd-droppable.ts 7.2.2
+ * dd-droppable.ts 7.3.0
  * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
  */
 import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';