gridstack 8.0.0 → 8.1.0

package/dist_save/angular/gridstack.component.ts

@@ -1,199 +0,0 @@
-/**
- * gridstack.component.ts 7.3.0-dev
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
- */
-
-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 { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
-
-import { GridItemCompHTMLElement, GridstackItemComponent } from './gridstack-item.component';
-import { selectorToComponent } from './dummy.component';
-
-/** events handlers emitters signature for different events */
-export type eventCB = {event: Event};
-export type elementCB = {event: Event, el: GridItemHTMLElement};
-export type nodesCB = {event: Event, nodes: GridStackNode[]};
-export type droppedCB = {event: Event, previousNode: GridStackNode, newNode: GridStackNode};
-
-
-/** extends to store Ng Component selector, instead/inAddition to content */
-export interface NgGridStackWidget extends GridStackWidget {
-  type?: string; // component type to create as content
-}
-
-/** 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
- */
-@Component({
-  selector: 'gridstack',
-  template: `
-    <!-- content to show when when grid is empty, like instructions on how to add widgets -->
-    <ng-content select="[empty-content]" *ngIf="isEmpty"></ng-content>
-    <!-- where dynamic items go -->
-    <ng-template #container></ng-template>
-    <!-- where template items go -->
-    <ng-content></ng-content>
-  `,
-  styles: [`
-    :host { display: block; }
-  `],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
-
-  /** track list of TEMPLATE grid items so we can sync between DOM and GS internals */
-  @ContentChildren(GridstackItemComponent) public gridstackItems?: QueryList<GridstackItemComponent>;
-  /** container to append items dynamically */
-  @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
-
-  /** initial options for creation of the grid */
-  @Input() public set options(val: GridStackOptions) { this._options = val; }
-  /** return the current running options */
-  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 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 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(): GridCompHTMLElement { return this.elementRef.nativeElement; }
-
-  /** return the GridStack class */
-  public get grid(): GridStack | undefined { return this._grid; }
-
-  private _options?: GridStackOptions;
-  private _grid?: GridStack;
-  private loaded?: boolean;
-  private ngUnsubscribe: Subject<void> = new Subject();
-
-  constructor(
-    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 || {};
-    opts.addRemoveCB = 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;
-    this._grid = GridStack.init(opts, this.el);
-    delete this._options; // GS has it now
-  }
-
-  /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
-  public ngAfterContentInit(): void {
-    this.zone.runOutsideAngular(() => {
-      // track whenever the children list changes and update the layout...
-      this.gridstackItems?.changes
-        .pipe(takeUntil(this.ngUnsubscribe))
-        .subscribe(() => this.updateAll());
-      // ...and do this once at least unless we loaded children already
-      if (!this.loaded) this.updateAll();
-      this.hookEvents(this.grid);
-    });
-  }
-
-  public ngOnDestroy(): void {
-    this.ngUnsubscribe.next();
-    this.ngUnsubscribe.complete();
-    this.grid?.destroy();
-    delete this._grid;
-    delete this.el._gridComp;
-  }
-
-  /**
-   * called when the TEMPLATE list of items changes - get a list of nodes and
-   * update the layout accordingly (which will take care of adding/removing items changed by Angular)
-   */
-  public updateAll() {
-    if (!this.grid) return;
-    const layout: GridStackWidget[] = [];
-    this.gridstackItems?.forEach(item => {
-      layout.push(item.options);
-      item.clearOptions();
-    });
-    this.grid.load(layout); // efficient that does diffs only
-  }
-
-  /** check if the grid is empty, if so show alternative content */
-  public checkEmpty() {
-    if (!this.grid) return;
-    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.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) */
-function addRemoveCB(parent: GridCompHTMLElement | HTMLElement, w: NgGridStackWidget | GridStackOptions, add: boolean, isGrid: boolean): HTMLElement | undefined {
-  if (add) {
-    if (!parent) return;
-    // create the grid item dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
-    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 {
-      const gridComp = (parent as GridCompHTMLElement)._gridComp;
-      const gridItem = gridComp?.container?.createComponent(GridstackItemComponent)?.instance;
-
-      // IFF we're not a subGrid, define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
-      const type = (w as NgGridStackWidget).type;
-      if (!w.subGrid && type && selectorToComponent[type]) {
-        gridItem?.container?.createComponent(selectorToComponent[type]);
-      }
-
-      return gridItem?.el;
-    }
-  }
-  return;
-}
-

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

@@ -1,20 +0,0 @@
-/**
- * dd-base-impl.ts 7.3.0-dev
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
- */
-export declare type EventCallback = (event: Event) => boolean | void;
-export declare abstract class DDBaseImplement {
-    /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */
-    get disabled(): boolean;
-    on(event: string, callback: EventCallback): void;
-    off(event: string): void;
-    enable(): void;
-    disable(): void;
-    destroy(): void;
-    triggerEvent(eventName: string, event: Event): boolean | void;
-}
-export interface HTMLElementExtendOpt<T> {
-    el: HTMLElement;
-    option: T;
-    updateOption(T: any): DDBaseImplement;
-}

package/dist_save/dd-base-impl.js

@@ -1,36 +0,0 @@
-"use strict";
-/**
- * dd-base-impl.ts 7.3.0-dev
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DDBaseImplement = void 0;
-class DDBaseImplement {
-    constructor() {
-        /** @internal */
-        this._eventRegister = {};
-    }
-    /** returns the enable state, but you have to call enable()/disable() to change (as other things need to happen) */
-    get disabled() { return this._disabled; }
-    on(event, callback) {
-        this._eventRegister[event] = callback;
-    }
-    off(event) {
-        delete this._eventRegister[event];
-    }
-    enable() {
-        this._disabled = false;
-    }
-    disable() {
-        this._disabled = true;
-    }
-    destroy() {
-        delete this._eventRegister;
-    }
-    triggerEvent(eventName, event) {
-        if (!this.disabled && this._eventRegister && this._eventRegister[eventName])
-            return this._eventRegister[eventName](event);
-    }
-}
-exports.DDBaseImplement = DDBaseImplement;
-//# sourceMappingURL=dd-base-impl.js.map

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

@@ -1 +0,0 @@
-{"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-dev\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_save/dd-draggable.d.ts

@@ -1,28 +0,0 @@
-/**
- * dd-draggable.ts 7.3.0-dev
- * Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
- */
-import { DDBaseImplement, HTMLElementExtendOpt } from './dd-base-impl';
-import { DDUIData } from './types';
-export interface DDDraggableOpt {
-    appendTo?: string | HTMLElement;
-    handle?: string;
-    helper?: string | HTMLElement | ((event: Event) => HTMLElement);
-    start?: (event: Event, ui: DDUIData) => void;
-    stop?: (event: Event) => void;
-    drag?: (event: Event, ui: DDUIData) => void;
-}
-declare type DDDragEvent = 'drag' | 'dragstart' | 'dragstop';
-export declare class DDDraggable extends DDBaseImplement implements HTMLElementExtendOpt<DDDraggableOpt> {
-    el: HTMLElement;
-    option: DDDraggableOpt;
-    helper: HTMLElement;
-    constructor(el: HTMLElement, option?: DDDraggableOpt);
-    on(event: DDDragEvent, callback: (event: DragEvent) => void): void;
-    off(event: DDDragEvent): void;
-    enable(): void;
-    disable(forDestroy?: boolean): void;
-    destroy(): void;
-    updateOption(opts: DDDraggableOpt): DDDraggable;
-}
-export {};

package/dist_save/dd-draggable.js

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