gridstack 10.1.1 → 10.2.0

package/angular/projects/lib/src/lib/gridstack.module.ts

@@ -1,32 +0,0 @@
-/**
- * gridstack.component.ts 10.1.1
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
- */
-
-import { NgModule } from "@angular/core";
-import { CommonModule } from '@angular/common';
-
-import { GridStack } from "gridstack";
-import { GridstackComponent, gsCreateNgComponents, gsSaveAdditionalNgInfo } from "./gridstack.component";
-import { GridstackItemComponent } from "./gridstack-item.component";
-
-@NgModule({
-  imports: [
-    CommonModule,
-  ],
-  declarations: [
-    GridstackComponent,
-    GridstackItemComponent,
-  ],
-  exports: [
-    GridstackComponent,
-    GridstackItemComponent,
-  ],
-})
-export class GridstackModule {
-  constructor() {
-    // set globally our method to create the right widget type
-    GridStack.addRemoveCB = gsCreateNgComponents;
-    GridStack.saveCB = gsSaveAdditionalNgInfo;
-  }
-}

package/angular/projects/lib/src/public-api.ts

@@ -1,8 +0,0 @@
-/*
- * Public API Surface of gridstack-angular
- */
-
-export * from './lib/gridstack-item.component';
-export * from './lib/gridstack.component';
-export * from './lib/base-widget';
-export * from './lib/gridstack.module';

package/angular/projects/lib/src/test.ts

@@ -1,27 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);

package/dist/angular/src/base-widget.ts

@@ -1,28 +0,0 @@
-/**
- * gridstack-item.component.ts 10.1.1
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
- */
-
-/**
- * Base interface that all widgets need to implement in order for GridstackItemComponent to correctly save/load/delete/..
- */
-
-import { Injectable } from '@angular/core';
-import { NgCompInputs, NgGridStackWidget } from './gridstack.component';
-
- @Injectable()
- export abstract class BaseWidget {
-  /**
-   * REDEFINE to return an object representing the data needed to re-create yourself, other than `selector` already handled.
-   * This should map directly to the @Input() fields of this objects on create, so a simple apply can be used on read
-   */
-  public serialize(): NgCompInputs | undefined  { return; }
-
-  /**
-   * REDEFINE this if your widget needs to read from saved data and transform it to create itself - you do this for
-   * things that are not mapped directly into @Input() fields for example.
-   */
-  public deserialize(w: NgGridStackWidget)  {
-    if (w.input)  Object.assign(this, w.input);
-  }
- }

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

@@ -1,78 +0,0 @@
-/**
- * gridstack-item.component.ts 10.1.1
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
- */
-
-import { Component, ElementRef, Input, ViewChild, ViewContainerRef, OnDestroy, ComponentRef } from '@angular/core';
-import { GridItemHTMLElement, GridStackNode } from 'gridstack';
-import { BaseWidget } from './base-widget';
-
-/** 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
- */
-@Component({
-  selector: 'gridstack-item',
-  template: `
-    <div class="grid-stack-item-content">
-      <!-- where dynamic items go based on component types, or sub-grids, etc...) -->
-      <ng-template #container></ng-template>
-      <!-- any static (defined in dom) content goes here -->
-      <ng-content></ng-content>
-      <!-- fallback HTML content from GridStackWidget content field if used instead -->
-      {{options.content}}
-    </div>`,
-  styles: [`
-    :host { display: block; }
-  `],
-  // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
-})
-export class GridstackItemComponent implements OnDestroy {
-
-  /** container to append items dynamically */
-  @ViewChild('container', { read: ViewContainerRef, static: true}) public container?: ViewContainerRef;
-
-  /** ComponentRef of ourself - used by dynamic object to correctly get removed */
-  public ref: ComponentRef<GridstackItemComponent> | undefined;
-
-  /** child component so we can save/restore additional data to be saved along */
-  public childWidget: BaseWidget | undefined;
-
-  /** list of options for creating/updating this item */
-  @Input() public set options(val: GridStackNode) {
-    if (this.el.gridstackNode?.grid) {
-      // already built, do an update...
-      this.el.gridstackNode.grid.update(this.el, val);
-    } else {
-      // store our custom element in options so we can update it and not re-create a generic div!
-      this._options = {...val, el: this.el};
-    }
-  }
-  /** return the latest grid options (from GS once built, otherwise initial values) */
-  public get options(): GridStackNode {
-    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(): GridItemCompHTMLElement { return this.elementRef.nativeElement; }
-
-  /** clears the initial options now that we've built */
-  public clearOptions() {
-    delete this._options;
-  }
-
-  constructor(private readonly elementRef: ElementRef<GridItemHTMLElement>) {
-    this.el._gridItemComp = this;
-  }
-
-  public ngOnDestroy(): void {
-    delete this.ref;
-    delete this.el._gridItemComp;
-  }
-}

package/dist/angular/src/gridstack.component.ts

@@ -1,287 +0,0 @@
-/**
- * gridstack.component.ts 10.1.1
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
- */
-
-import { AfterContentInit, Component, ContentChildren, ElementRef, EventEmitter, Input,
-  OnDestroy, OnInit, Output, QueryList, Type, ViewChild, ViewContainerRef, reflectComponentType, ComponentRef } 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 { BaseWidget } from './base-widget';
-
-/** 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};
-
-export type NgCompInputs = {[key: string]: any};
-
-/** extends to store Ng Component selector, instead/inAddition to content */
-export interface NgGridStackWidget extends GridStackWidget {
-  selector?: string; // component type to create as content
-  input?: NgCompInputs; // serialized data for the component input fields
-}
-export interface NgGridStackNode extends GridStackNode {
-  selector?: string; // component type to create as content
-}
-export interface NgGridStackOptions extends GridStackOptions {
-  children?: NgGridStackWidget[];
-  subGridOpts?: NgGridStackOptions;
-}
-
-/** store element to Ng Class pointer back */
-export interface GridCompHTMLElement extends GridHTMLElement {
-  _gridComp?: GridstackComponent;
-}
-
-/** selector string to runtime Type mapping */
-export type SelectorToType = {[key: string]: Type<Object>};
-
-/**
- * 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, // IFF you want to optimize and control when ChangeDetection needs to happen...
-})
-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; }
-
-  /** ComponentRef of ourself - used by dynamic object to correctly get removed */
-  public ref: ComponentRef<GridstackComponent> | undefined;
-
-  /**
-   * stores the selector -> Type mapping, so we can create items dynamically from a string.
-   * Unfortunately Ng doesn't provide public access to that mapping.
-   */
-  public static selectorToType: SelectorToType = {};
-  /** add a list of ng Component to be mapped to selector */
-  public static addComponentToSelectorType(typeList: Array<Type<Object>>) {
-    typeList.forEach(type => GridstackComponent.selectorToType[ GridstackComponent.getSelector(type) ] = type);
-  }
-  /** return the ng Component selector */
-  public static getSelector(type: Type<Object>): string {
-    return reflectComponentType(type)!.selector;
-  }
-
-  private _options?: GridStackOptions;
-  private _grid?: GridStack;
-  private loaded?: boolean;
-  private ngUnsubscribe: Subject<void> = new Subject();
-
-  constructor(
-    // private readonly zone: NgZone,
-    // private readonly cd: ChangeDetectorRef,
-    private readonly elementRef: ElementRef<GridCompHTMLElement>,
-  ) {
-    this.el._gridComp = this;
-  }
-
-  public ngOnInit(): void {
-    // 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(this._options, this.el);
-    delete this._options; // GS has it now
-
-    this.checkEmpty();
-  }
-
-  /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
-  public ngAfterContentInit(): void {
-    // 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 {
-    delete this.ref;
-    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;
-    const isEmpty = !this.grid.engine.nodes.length;
-    if (isEmpty === this.isEmpty) return;
-    this.isEmpty = isEmpty;
-    // this.cd.detectChanges();
-  }
-
-  /** 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.checkEmpty(); this.addedCB.emit({event, nodes}); })
-    .on('change', (event: Event, nodes: GridStackNode[]) => this.changeCB.emit({event, nodes}))
-    .on('disable', (event: Event) => this.disableCB.emit({event}))
-    .on('drag', (event: Event, el: GridItemHTMLElement) => this.dragCB.emit({event, el}))
-    .on('dragstart', (event: Event, el: GridItemHTMLElement) => this.dragStartCB.emit({event, el}))
-    .on('dragstop', (event: Event, el: GridItemHTMLElement) => this.dragStopCB.emit({event, el}))
-    .on('dropped', (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => this.droppedCB.emit({event, previousNode, newNode}))
-    .on('enable', (event: Event) => this.enableCB.emit({event}))
-    .on('removed', (event: Event, nodes: GridStackNode[]) => { this.checkEmpty(); this.removedCB.emit({event, nodes}); })
-    .on('resize', (event: Event, el: GridItemHTMLElement) => this.resizeCB.emit({event, el}))
-    .on('resizestart', (event: Event, el: GridItemHTMLElement) => this.resizeStartCB.emit({event, el}))
-    .on('resizestop', (event: Event, el: GridItemHTMLElement) => this.resizeStopCB.emit({event, el}))
-  }
-}
-
-/**
- * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
- **/
-export function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w: NgGridStackWidget | GridStackNode, add: boolean, isGrid: boolean): HTMLElement | undefined {
-  if (add) {
-    //
-    // create the component dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
-    //
-    if (!host) return;
-    if (isGrid) {
-      const container = (host.parentElement as GridItemCompHTMLElement)?._gridItemComp?.container;
-      // TODO: figure out how to create ng component inside regular Div. need to access app injectors...
-      // if (!container) {
-      //   const hostElement: Element = host;
-      //   const environmentInjector: EnvironmentInjector;
-      //   grid = createComponent(GridstackComponent, {environmentInjector, hostElement})?.instance;
-      // }
-      const gridRef = container?.createComponent(GridstackComponent);
-      const grid = gridRef?.instance;
-      if (!grid) return;
-      grid.ref = gridRef;
-      grid.options = w as GridStackOptions;
-      return grid.el;
-    } else {
-      const gridComp = (host as GridCompHTMLElement)._gridComp;
-      const gridItemRef = gridComp?.container?.createComponent(GridstackItemComponent);
-      const gridItem = gridItemRef?.instance;
-      if (!gridItem) return;
-      gridItem.ref = gridItemRef
-
-      // 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 selector = (w as NgGridStackWidget).selector;
-      const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
-      if (!w.subGridOpts && type) {
-        const childWidget = gridItem.container?.createComponent(type)?.instance as BaseWidget;
-        if (typeof childWidget?.serialize === 'function' && typeof childWidget?.deserialize === 'function') {
-          // proper BaseWidget subclass, save it and load additional data
-          gridItem.childWidget = childWidget;
-          childWidget.deserialize(w);
-        }
-      }
-
-      return gridItem.el;
-    }
-  } else {
-    //
-    // REMOVE - have to call ComponentRef:destroy() for dynamic objects to correctly remove themselves
-    // Note: this will destroy all children dynamic components as well: gridItem -> childWidget
-    //
-    const n = w as GridStackNode;
-    if (isGrid) {
-      const grid = (n.el as GridCompHTMLElement)?._gridComp;
-      if (grid?.ref) grid.ref.destroy();
-      else grid?.ngOnDestroy();
-    } else {
-      const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;
-      if (gridItem?.ref) gridItem.ref.destroy();
-      else gridItem?.ngOnDestroy();
-    }
-  }
-  return;
-}
-
-/**
- * called for each item in the grid - check if additional information needs to be saved.
- * Note: since this is options minus gridstack private members using Utils.removeInternalForSave(),
- * this typically doesn't need to do anything. However your custom Component @Input() are now supported
- * using BaseWidget.serialize()
- */
-export function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget) {
-  const gridItem = (n.el as GridItemCompHTMLElement)?._gridItemComp;
-  if (gridItem) {
-    const input = gridItem.childWidget?.serialize();
-    if (input) {
-      w.input = input;
-    }
-    return;
-  }
-  // else check if Grid
-  const grid = (n.el as GridCompHTMLElement)?._gridComp;
-  if (grid) {
-    //.... save any custom data
-  }
-}

package/dist/angular/src/gridstack.module.ts

@@ -1,32 +0,0 @@
-/**
- * gridstack.component.ts 10.1.1
- * Copyright (c) 2022 Alain Dumesny - see GridStack root license
- */
-
-import { NgModule } from "@angular/core";
-import { CommonModule } from '@angular/common';
-
-import { GridStack } from "gridstack";
-import { GridstackComponent, gsCreateNgComponents, gsSaveAdditionalNgInfo } from "./gridstack.component";
-import { GridstackItemComponent } from "./gridstack-item.component";
-
-@NgModule({
-  imports: [
-    CommonModule,
-  ],
-  declarations: [
-    GridstackComponent,
-    GridstackItemComponent,
-  ],
-  exports: [
-    GridstackComponent,
-    GridstackItemComponent,
-  ],
-})
-export class GridstackModule {
-  constructor() {
-    // set globally our method to create the right widget type
-    GridStack.addRemoveCB = gsCreateNgComponents;
-    GridStack.saveCB = gsSaveAdditionalNgInfo;
-  }
-}

package/dist/src/gridstack-extra.scss

@@ -1,25 +0,0 @@
-/**
- * default to generate [2-11] columns as 1 (oneColumnMode) and 12 (default) are in the main css
- * Copyright (c) 2021 Alain Dumesny - see GridStack root license
- */
-$start: 2 !default;
-$end: 11 !default;
-
-@function fixed($float) {
-  @return calc(round($float * 1000) / 1000); // total 4-5 digits being %
-}
-
-@mixin grid-stack-items($columns) {
-  .gs-#{$columns} > .grid-stack-item {
-    width: fixed(calc(100% / $columns));
-
-    @for $i from 1 through $columns - 1 {
-      &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
-      &[gs-w='#{$i+1}'] { width: fixed(calc(100% / $columns) * ($i+1)); }
-    }
-  }
-}
-
-@for $j from $start through $end {
-  @include grid-stack-items($j)
-}

package/dist/src/gridstack.scss

@@ -1,157 +0,0 @@
-/**
- * gridstack SASS styles 10.1.1
- * Copyright (c) 2021 Alain Dumesny - see GridStack root license
- */
-
-$columns: 12 !default;
-$animation_speed: .3s !default;
-
-@function fixed($float) {
-  @return calc(round($float * 1000) / 1000); // total 4-5 digits being %
-}
-
-@mixin vendor($property, $value...){
-  // -webkit-#{$property}: $value;
-  // -moz-#{$property}: $value;
-  // -ms-#{$property}: $value;
-  // -o-#{$property}: $value;
-  #{$property}: $value;
-}
-
-.grid-stack {
-  position: relative;
-}
-
-.grid-stack-rtl {
-  direction: ltr;
-  > .grid-stack-item {
-    direction: rtl;
-  }
-}
-
-.grid-stack-placeholder > .placeholder-content {
-  background-color: rgba(0,0,0,0.1);
-  margin: 0;
-  position: absolute;
-  width: auto;
-  z-index: 0 !important;
-}
-
-// make those more unique as to not conflict with side panel items
-.grid-stack > .grid-stack-item {
-  position: absolute;
-  padding: 0;
-
-  > .grid-stack-item-content {
-    margin: 0;
-    position: absolute;
-    width: auto;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-  &.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {
-    overflow-y: hidden;
-  }
-}
-
-.grid-stack-item {
-  > .ui-resizable-handle {
-    position: absolute;
-    font-size: 0.1px;
-    display: block;
-    -ms-touch-action: none;
-    touch-action: none;
-  }
-
-  &.ui-resizable-disabled > .ui-resizable-handle,
-  &.ui-resizable-autohide > .ui-resizable-handle { display: none; }
-
-  > .ui-resizable-ne,
-  > .ui-resizable-nw,
-  > .ui-resizable-se,
-  > .ui-resizable-sw {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  > .ui-resizable-ne {
-    @include vendor(transform, translate(0, 10px) rotate(45deg));
-  }
-  > .ui-resizable-sw {
-    @include vendor(transform, rotate(45deg));
-  }
-
-  > .ui-resizable-nw {
-    @include vendor(transform, translate(0, 10px) rotate(-45deg));
-  }
-  > .ui-resizable-se {
-    @include vendor(transform, rotate(-45deg));
-  }
-
-  > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: 0; }
-  > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: 0; left: 25px; right: 25px; }
-  > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: 0; }
-  > .ui-resizable-e  { cursor: e-resize;  width: 10px; top: 15px; bottom: 15px; }
-  > .ui-resizable-se { cursor: se-resize; width: 20px; height: 20px;}
-  > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: 0; right: 25px; }
-  > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px;}
-  > .ui-resizable-w  { cursor: w-resize;  width: 10px; top: 15px; bottom: 15px; }
-
-  &.ui-draggable-dragging {
-    &> .ui-resizable-handle {
-      display: none !important;
-    }
-  }
-
-  &.ui-draggable-dragging {
-    will-change: left, top;
-    cursor: move;
-  }
-
-  &.ui-resizable-resizing {
-    will-change: width, height;
-  }
-}
-
-// not .grid-stack-item specific to also affect dragIn regions
-.ui-draggable-dragging,
-.ui-resizable-resizing {
-  z-index: 10000; // bootstrap modal has a z-index of 1050
-
-  > .grid-stack-item-content {
-    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-    opacity: 0.8;
-  }
-}
-
-.grid-stack-animate,
-.grid-stack-animate .grid-stack-item {
-  @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
-}
-
-.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
-.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
-.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
-  @include vendor(transition, left 0s, top 0s, height 0s, width 0s);
-}
-
-// make those more unique as to not conflict with side panel items, but apply to all column layouts (so not in loop below)
-.grid-stack > .grid-stack-item[gs-y="0"] {
-  top: 0px;
-}
-.grid-stack > .grid-stack-item[gs-x="0"] {
-  left: 0%;
-}
-
-.gs-#{$columns} > .grid-stack-item {
-  width: fixed(calc(100% / $columns));
-  @for $i from 1 through ($columns - 1) {
-    &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
-    &[gs-w='#{$i + 1}'] { width: fixed(calc(100% / $columns) * ($i + 1)); }
-  }
-}
-
-.gs-1 > .grid-stack-item {
-  width: 100%;
-}