gridstack 8.0.1 → 8.1.0

package/dist/gridstack.min.css

@@ -1 +1 @@
-:root .grid-stack-item>.ui-resizable-handle{filter:none}.grid-stack{position:relative}.grid-stack.grid-stack-rtl{direction:ltr}.grid-stack.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack .grid-stack-placeholder>.placeholder-content{background-color:rgba(0,0,0,.1);margin:0;position:absolute;width:auto;z-index:0!important;text-align:center}.grid-stack>.grid-stack-item{min-width:8.3333333333%;position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack>.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack>.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack>.grid-stack-item>.ui-resizable-ne,.grid-stack>.grid-stack-item>.ui-resizable-nw,.grid-stack>.grid-stack-item>.ui-resizable-se,.grid-stack>.grid-stack-item>.ui-resizable-sw{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center}.grid-stack>.grid-stack-item>.ui-resizable-ne{-webkit-transform:translate(0,10px) rotate(45deg);-moz-transform:translate(0,10px) rotate(45deg);-ms-transform:translate(0,10px) rotate(45deg);-o-transform:translate(0,10px) rotate(45deg);transform:translate(0,10px) rotate(45deg)}.grid-stack>.grid-stack-item>.ui-resizable-sw{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.grid-stack>.grid-stack-item>.ui-resizable-nw{-webkit-transform:translate(0,10px) rotate(-45deg);-moz-transform:translate(0,10px) rotate(-45deg);-ms-transform:translate(0,10px) rotate(-45deg);-o-transform:translate(0,10px) rotate(-45deg);transform:translate(0,10px) rotate(-45deg)}.grid-stack>.grid-stack-item>.ui-resizable-se{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.grid-stack>.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack>.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}.grid-stack>.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack>.grid-stack-item[gs-x="0"]{left:0}.grid-stack>.grid-stack-item[gs-w="1"]{width:8.3333333333%}.grid-stack>.grid-stack-item[gs-x="1"]{left:8.3333333333%}.grid-stack>.grid-stack-item[gs-w="2"]{width:16.6666666667%}.grid-stack>.grid-stack-item[gs-x="2"]{left:16.6666666667%}.grid-stack>.grid-stack-item[gs-w="3"]{width:25%}.grid-stack>.grid-stack-item[gs-x="3"]{left:25%}.grid-stack>.grid-stack-item[gs-w="4"]{width:33.3333333333%}.grid-stack>.grid-stack-item[gs-x="4"]{left:33.3333333333%}.grid-stack>.grid-stack-item[gs-w="5"]{width:41.6666666667%}.grid-stack>.grid-stack-item[gs-x="5"]{left:41.6666666667%}.grid-stack>.grid-stack-item[gs-w="6"]{width:50%}.grid-stack>.grid-stack-item[gs-x="6"]{left:50%}.grid-stack>.grid-stack-item[gs-w="7"]{width:58.3333333333%}.grid-stack>.grid-stack-item[gs-x="7"]{left:58.3333333333%}.grid-stack>.grid-stack-item[gs-w="8"]{width:66.6666666667%}.grid-stack>.grid-stack-item[gs-x="8"]{left:66.6666666667%}.grid-stack>.grid-stack-item[gs-w="9"]{width:75%}.grid-stack>.grid-stack-item[gs-x="9"]{left:75%}.grid-stack>.grid-stack-item[gs-w="10"]{width:83.3333333333%}.grid-stack>.grid-stack-item[gs-x="10"]{left:83.3333333333%}.grid-stack>.grid-stack-item[gs-w="11"]{width:91.6666666667%}.grid-stack>.grid-stack-item[gs-x="11"]{left:91.6666666667%}.grid-stack>.grid-stack-item[gs-w="12"]{width:100%}.grid-stack.grid-stack-1>.grid-stack-item{min-width:100%}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing{-webkit-transition:left 0s,top 0s,height 0s,width 0s;-moz-transition:left 0s,top 0s,height 0s,width 0s;-ms-transition:left 0s,top 0s,height 0s,width 0s;-o-transition:left 0s,top 0s,height 0s,width 0s;transition:left 0s,top 0s,height 0s,width 0s}.ui-draggable-dragging,.ui-resizable-resizing{z-index:100}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.ui-draggable-dragging{will-change:left,top;cursor:move}.ui-resizable-resizing{will-change:width,height}
+.grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:rgba(0,0,0,.1);margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:translate(0,10px) rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:translate(0,10px) rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging,.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack-item.ui-draggable-dragging{will-change:left,top;cursor:move}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-x="0"]{left:0}.grid-stack-12>.grid-stack-item{min-width:8.333%}.grid-stack-12>.grid-stack-item[gs-x="1"]{left:8.333%}.grid-stack-12>.grid-stack-item[gs-w="2"]{width:16.667%}.grid-stack-12>.grid-stack-item[gs-x="2"]{left:16.667%}.grid-stack-12>.grid-stack-item[gs-w="3"]{width:25%}.grid-stack-12>.grid-stack-item[gs-x="3"]{left:25%}.grid-stack-12>.grid-stack-item[gs-w="4"]{width:33.333%}.grid-stack-12>.grid-stack-item[gs-x="4"]{left:33.333%}.grid-stack-12>.grid-stack-item[gs-w="5"]{width:41.667%}.grid-stack-12>.grid-stack-item[gs-x="5"]{left:41.667%}.grid-stack-12>.grid-stack-item[gs-w="6"]{width:50%}.grid-stack-12>.grid-stack-item[gs-x="6"]{left:50%}.grid-stack-12>.grid-stack-item[gs-w="7"]{width:58.333%}.grid-stack-12>.grid-stack-item[gs-x="7"]{left:58.333%}.grid-stack-12>.grid-stack-item[gs-w="8"]{width:66.667%}.grid-stack-12>.grid-stack-item[gs-x="8"]{left:66.667%}.grid-stack-12>.grid-stack-item[gs-w="9"]{width:75%}.grid-stack-12>.grid-stack-item[gs-x="9"]{left:75%}.grid-stack-12>.grid-stack-item[gs-w="10"]{width:83.333%}.grid-stack-12>.grid-stack-item[gs-x="10"]{left:83.333%}.grid-stack-12>.grid-stack-item[gs-w="11"]{width:91.667%}.grid-stack-12>.grid-stack-item[gs-x="11"]{left:91.667%}.grid-stack-12>.grid-stack-item[gs-w="12"]{width:100%}.grid-stack-1>.grid-stack-item{min-width:100%}

package/dist/ng/gridstack-item.component.d.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack-item.component.ts 8.0.1
+ * gridstack-item.component.ts 8.1.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 import { ElementRef, ViewContainerRef, OnDestroy } from '@angular/core';

package/dist/ng/gridstack-item.component.js

@@ -1,5 +1,5 @@
 /**
- * gridstack-item.component.ts 8.0.1
+ * gridstack-item.component.ts 8.1.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 import { __decorate } from "tslib";

package/dist/ng/gridstack.component.d.ts

@@ -1,5 +1,5 @@
 /**
- * gridstack.component.ts 8.0.1
+ * gridstack.component.ts 8.1.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, Type, ViewContainerRef } from '@angular/core';

package/dist/ng/gridstack.component.js

@@ -1,5 +1,5 @@
 /**
- * gridstack.component.ts 8.0.1
+ * gridstack.component.ts 8.1.0
  * Copyright (c) 2022 Alain Dumesny - see GridStack root license
  */
 var GridstackComponent_1;

package/dist/src/gridstack-extra.scss

@@ -2,22 +2,20 @@
  * 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
  */
-
-@use "sass:math";
-
 $gridstack-columns-start: 2 !default;
 $gridstack-columns: 11 !default;
 
-@mixin grid-stack-items($columns) {
-  .grid-stack.grid-stack-#{$columns} {
+@function fixed($float) {
+  @return calc(round($float * 1000) / 1000); // total 4-5 digits being %
+}
 
-    > .grid-stack-item {
-      min-width: math.div(100%, $columns);
+@mixin grid-stack-items($columns) {
+  .grid-stack-#{$columns} > .grid-stack-item {
+    min-width: fixed(calc(100% / $columns));
 
-      @for $i from 1 through $columns {
-        &[gs-w='#{$i}'] { width: math.div(100%, $columns) * $i; }
-        &[gs-x='#{$i}'] { left: math.div(100%, $columns) * $i; }
-      }
+    @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)); }
     }
   }
 }

package/dist/src/gridstack.scss

@@ -1,139 +1,150 @@
 /**
- * gridstack SASS styles 8.0.1
+ * gridstack SASS styles 8.1.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
-@use "sass:math";
-
-$gridstack-columns: 12 !default;
+$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;
+  // -webkit-#{$property}: $value;
+  // -moz-#{$property}: $value;
+  // -ms-#{$property}: $value;
+  // -o-#{$property}: $value;
   #{$property}: $value;
 }
 
-:root .grid-stack-item > .ui-resizable-handle { filter: none; }
-
 .grid-stack {
   position: relative;
+}
 
-  &.grid-stack-rtl {
-    direction: ltr;
-    > .grid-stack-item {
-      direction: rtl;
-    }
+.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;
+}
 
-  .grid-stack-placeholder > .placeholder-content {
-    background-color: rgba(0,0,0,0.1);
+// 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;
-    z-index: 0 !important;
-    text-align: center;
+    overflow-x: hidden;
+    overflow-y: auto;
   }
+}
 
-  > .grid-stack-item {
-    min-width: math.div(100%, $gridstack-columns);
+.grid-stack-item {
+  > .ui-resizable-handle {
     position: absolute;
-    padding: 0;
-
-    > .grid-stack-item-content {
-      margin: 0;
-      position: absolute;
-      width: auto;
-      overflow-x: hidden;
-      overflow-y: auto;
-    }
+    font-size: 0.1px;
+    display: block;
+    -ms-touch-action: none;
+    touch-action: none;
+  }
 
-    > .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-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;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
+    background-repeat: no-repeat;
+    background-position: center;
+  }
 
-    > .ui-resizable-ne,
-    > .ui-resizable-nw,
-    > .ui-resizable-se,
-    > .ui-resizable-sw {
-      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
-      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-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 {
-      @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-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,
+  &.ui-resizable-resizing {
+    z-index: 100;
 
-    @for $i from 0 through ($gridstack-columns - 1) {
-      &[gs-x='#{$i}'] { left: math.div(100%, $gridstack-columns) * $i; }
-      &[gs-w='#{$i + 1}'] { width: math.div(100%, $gridstack-columns) * ($i + 1); }
+    > .grid-stack-item-content {
+      box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+      opacity: 0.8;
     }
   }
 
-  &.grid-stack-1>.grid-stack-item {
-    min-width: 100%;
+  &.ui-draggable-dragging {
+    will-change: left, top;
+    cursor: move;
   }
 
-  &.grid-stack-animate,
-  &.grid-stack-animate .grid-stack-item {
-    @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
+  &.ui-resizable-resizing {
+    will-change: width, height;
   }
+}
 
-  &.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);
-  }
+.grid-stack-animate,
+.grid-stack-animate .grid-stack-item {
+  @include vendor(transition, left $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed);
 }
 
-.ui-draggable-dragging,
-.ui-resizable-resizing {
-  z-index: 100;
+.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);
+}
 
-  > .grid-stack-item-content {
-    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-    opacity: 0.8;
+// make those more unique as to not conflict with side panel items
+.grid-stack > .grid-stack-item[gs-x="0"] {
+  left: 0%;
+}
+
+.grid-stack-#{$columns} > .grid-stack-item {
+  min-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)); }
   }
 }
-.ui-draggable-dragging {
-  will-change: left, top;
-  cursor: move;
+
+.grid-stack-1 > .grid-stack-item {
+  min-width: 100%;
 }
-.ui-resizable-resizing {
-  will-change: width, height;
-}

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 /**
- * types.ts 8.0.1
+ * types.ts 8.1.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 import { GridStack } from './gridstack';
@@ -245,10 +245,12 @@ export interface DDDragOpt {
     pause?: boolean | number;
     /** default to `true` */
     scroll?: boolean;
+    /** prevents dragging from starting on specified elements, listed as comma separated selectors (eg: '.no-drag'). default built in is 'input,textarea,button,select,option' */
+    cancel?: string;
 }
 export interface DDDragInOpt extends DDDragOpt {
-    /** helper function when dropping (ex: 'clone' or your own method) */
-    helper?: string | ((event: Event) => HTMLElement);
+    /** helper function when dropping: 'clone' or your own method */
+    helper?: 'clone' | ((event: Event) => HTMLElement);
 }
 export interface Size {
     width: number;

package/dist/types.js

@@ -1,5 +1,5 @@
 /**
- * types.ts 8.0.1
+ * types.ts 8.1.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 // default values for grid options - used during init and when saving out

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,yEAAyE;AACzE,MAAM,CAAC,MAAM,YAAY,GAAqB;IAC5C,sBAAsB,EAAE,QAAQ;IAChC,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,MAAM;IAClB,kBAAkB,EAAE,GAAG;IACvB,cAAc,EAAE,IAAI;IACpB,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE,MAAM,EAAE,0BAA0B,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE;IACjF,MAAM,EAAE,0BAA0B;IAClC,SAAS,EAAE,iBAAiB;IAC5B,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,aAAa,EAAE,GAAG;IAClB,gBAAgB,EAAE,wBAAwB;IAC1C,eAAe,EAAE,EAAE;IACnB,gBAAgB,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE;IAChD,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC5B,GAAG,EAAE,MAAM;IAEX,kCAAkC;IAClC,sBAAsB;IACtB,+BAA+B;IAC/B,wBAAwB;IACxB,gBAAgB;IAChB,qBAAqB;IACrB,+BAA+B;IAC/B,oBAAoB;IACpB,qBAAqB;IACrB,sBAAsB;CACvB,CAAC;AAEF,6BAA6B;AAC7B,MAAM,CAAC,MAAM,oBAAoB,GAAgB;IAC/C,MAAM,EAAE,0BAA0B;IAClC,QAAQ,EAAE,MAAM;IAChB,qBAAqB;IACrB,iBAAiB;CAClB,CAAC","sourcesContent":["/**\r\n * types.ts 8.0.1\r\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\r\n */\r\n\r\nimport { GridStack } from './gridstack';\r\nimport { GridStackEngine } from './gridstack-engine';\r\n\r\n// default values for grid options - used during init and when saving out\r\nexport const gridDefaults: GridStackOptions = {\r\n  alwaysShowResizeHandle: 'mobile',\r\n  animate: true,\r\n  auto: true,\r\n  cellHeight: 'auto',\r\n  cellHeightThrottle: 100,\r\n  cellHeightUnit: 'px',\r\n  column: 12,\r\n  draggable: { handle: '.grid-stack-item-content', appendTo: 'body', scroll: true },\r\n  handle: '.grid-stack-item-content',\r\n  itemClass: 'grid-stack-item',\r\n  margin: 10,\r\n  marginUnit: 'px',\r\n  maxRow: 0,\r\n  minRow: 0,\r\n  oneColumnSize: 768,\r\n  placeholderClass: 'grid-stack-placeholder',\r\n  placeholderText: '',\r\n  removableOptions: { accept: '.grid-stack-item' },\r\n  resizable: { handles: 'se' },\r\n  rtl: 'auto',\r\n\r\n  // **** same as not being set ****\r\n  // disableDrag: false,\r\n  // disableOneColumnMode: false,\r\n  // disableResize: false,\r\n  // float: false,\r\n  // handleClass: null,\r\n  // oneColumnModeDomSort: false,\r\n  // removable: false,\r\n  // staticGrid: false,\r\n  // styleInHead: false,\r\n};\r\n\r\n/** default dragIn options */\r\nexport const dragInDefaultOptions: DDDragInOpt = {\r\n  handle: '.grid-stack-item-content',\r\n  appendTo: 'body',\r\n  // revert: 'invalid',\r\n  // scroll: false,\r\n};\r\n\r\n/** different layout options when changing # of columns,\r\n * including a custom function that takes new/old column count, and array of new/old positions\r\n * Note: new list may be partially already filled if we have a cache of the layout at that size and new items were added later.\r\n */\r\nexport type ColumnOptions = 'moveScale' | 'move' | 'scale' | 'none' |\r\n  ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);\r\n\r\nexport type numberOrString = number | string;\r\nexport interface GridItemHTMLElement extends HTMLElement {\r\n  /** pointer to grid node instance */\r\n  gridstackNode?: GridStackNode;\r\n  /** @internal */\r\n  _gridstackNodeOrig?: GridStackNode;\r\n}\r\n\r\nexport type GridStackElement = string | HTMLElement | GridItemHTMLElement;\r\n\r\n/** specific and general event handlers for the .on() method */\r\nexport type GridStackEventHandler = (event: Event) => void;\r\nexport type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;\r\nexport type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;\r\nexport type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;\r\nexport type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;\r\n\r\n/** optional function called during load() to callback the user on new added/remove grid items | grids */\r\nexport type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;\r\n\r\n/** optional function called during save() to let the caller add additional custom data to the GridStackWidget structure that will get returned */\r\nexport type SaveFcn = (node: GridStackNode, w: GridStackWidget) => void;\r\n\r\n\r\n/**\r\n * Defines the options for a Grid\r\n */\r\nexport interface GridStackOptions {\r\n  /**\r\n   * accept widgets dragged from other grids or from outside (default: `false`). Can be:\r\n   * `true` (uses `'.grid-stack-item'` class filter) or `false`,\r\n   * string for explicit class name,\r\n   * function returning a boolean. See [example](http://gridstack.github.io/gridstack.js/demo/two.html)\r\n   */\r\n  acceptWidgets?: boolean | string | ((element: Element) => boolean);\r\n\r\n  /** possible values (default: `mobile`) - does not apply to non-resizable widgets\r\n    * `false` the resizing handles are only shown while hovering over a widget\r\n    * `true` the resizing handles are always shown\r\n    * 'mobile' if running on a mobile device, default to `true` (since there is no hovering per say), else `false`.\r\n    See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html) */\r\n  alwaysShowResizeHandle?: true | false | 'mobile';\r\n\r\n  /** turns animation on (default?: true) */\r\n  animate?: boolean;\r\n\r\n  /** if false gridstack will not initialize existing items (default?: true) */\r\n  auto?: boolean;\r\n\r\n  /**\r\n   * one cell height (default?: 'auto'). Can be:\r\n   *  an integer (px)\r\n   *  a string (ex: '100px', '10em', '10rem'). Note: % doesn't right - see demo/cell-height.html\r\n   *  0, in which case the library will not generate styles for rows. Everything must be defined in your own CSS files.\r\n   *  'auto' - height will be calculated for square cells (width / column) and updated live as you resize the window - also see `cellHeightThrottle`\r\n   *  'initial' - similar to 'auto' (start at square cells) but stay that size during window resizing.\r\n   */\r\n  cellHeight?: numberOrString;\r\n\r\n  /** throttle time delay (in ms) used when cellHeight='auto' to improve performance vs usability (default?: 100).\r\n   * A value of 0 will make it instant at a cost of re-creating the CSS file at ever window resize event!\r\n   * */\r\n  cellHeightThrottle?: number;\r\n\r\n  /** (internal) unit for cellHeight (default? 'px') which is set when a string cellHeight with a unit is passed (ex: '10rem') */\r\n  cellHeightUnit?: string;\r\n\r\n  /** list of children item to create when calling load() or addGrid() */\r\n  children?: GridStackWidget[];\r\n\r\n  /** number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns.\r\n   * Note: for nested grids, it is recommended to use 'auto' which will always match the container grid-item current width (in column) to keep inside and outside\r\n   * items always to same. flag is not supported for regular non-nested grids.\r\n   */\r\n  column?: number | 'auto';\r\n\r\n  /** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance.\r\n  Note: only used by addGrid(), else your element should have the needed class */\r\n  class?: string;\r\n\r\n  /** disallows dragging of widgets (default?: false) */\r\n  disableDrag?: boolean;\r\n\r\n  /** disables the onColumnMode when the grid width is less than oneColumnSize (default?: false) */\r\n  disableOneColumnMode?: boolean;\r\n\r\n  /** disallows resizing of widgets (default?: false). */\r\n  disableResize?: boolean;\r\n\r\n  /** allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', appendTo?: 'body' }) */\r\n  draggable?: DDDragOpt;\r\n\r\n  /** let user drag nested grid items out of a parent or not (default true - not supported yet) */\r\n  //dragOut?: boolean;\r\n\r\n  /** the type of engine to create (so you can subclass) default to GridStackEngine */\r\n  engineClass?: typeof GridStackEngine;\r\n\r\n  /** enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html) */\r\n  float?: boolean;\r\n\r\n  /** draggable handle selector (default?: '.grid-stack-item-content') */\r\n  handle?: string;\r\n\r\n  /** draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) */\r\n  handleClass?: string;\r\n\r\n  /** id used to debug grid instance, not currently stored in DOM attributes */\r\n  id?: numberOrString;\r\n\r\n  /** additional widget class (default?: 'grid-stack-item') */\r\n  itemClass?: string;\r\n\r\n  /**\r\n   * gap between grid item and content (default?: 10). This will set all 4 sides and support the CSS formats below\r\n   *  an integer (px)\r\n   *  a string with possible units (ex: '2em', '20px', '2rem')\r\n   *  string with space separated values (ex: '5px 10px 0 20px' for all 4 sides, or '5em 10em' for top/bottom and left/right pairs like CSS).\r\n   * Note: all sides must have same units (last one wins, default px)\r\n   */\r\n  margin?: numberOrString;\r\n\r\n  /** OLD way to optionally set each side - use margin: '5px 10px 0 20px' instead. Used internally to store each side. */\r\n  marginTop?: numberOrString;\r\n  marginRight?: numberOrString;\r\n  marginBottom?: numberOrString;\r\n  marginLeft?: numberOrString;\r\n\r\n  /** (internal) unit for margin (default? 'px') set when `margin` is set as string with unit (ex: 2rem') */\r\n  marginUnit?: string;\r\n\r\n  /** maximum rows amount. Default? is 0 which means no maximum rows */\r\n  maxRow?: number;\r\n\r\n  /** minimum rows amount. Default is `0`. You can also do this with `min-height` CSS attribute\r\n   * on the grid div in pixels, which will round to the closest row.\r\n   */\r\n  minRow?: number;\r\n\r\n  /** If you are using a nonce-based Content Security Policy, pass your nonce here and\r\n   * GridStack will add it to the <style> elements it creates. */\r\n  nonce?: string;\r\n\r\n  /** minimal width before grid will be shown in one column mode (default?: 768) */\r\n  oneColumnSize?: number;\r\n\r\n  /**\r\n   * set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column\r\n   * layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: false)\r\n   */\r\n  oneColumnModeDomSort?: boolean;\r\n\r\n  /** class for placeholder (default?: 'grid-stack-placeholder') */\r\n  placeholderClass?: string;\r\n\r\n  /** placeholder default content (default?: '') */\r\n  placeholderText?: string;\r\n\r\n  /** allows to override UI resizable options. (default?: { handles: 'se' }) */\r\n  resizable?: DDResizeOpt;\r\n\r\n  /**\r\n   * if true widgets could be removed by dragging outside of the grid. It could also be a selector string (ex: \".trash\"),\r\n   * in this case widgets will be removed by dropping them there (default?: false)\r\n   * See example (http://gridstack.github.io/gridstack.js/demo/two.html)\r\n   */\r\n  removable?: boolean | string;\r\n\r\n  /** allows to override UI removable options. (default?: { accept: '.grid-stack-item' }) */\r\n  removableOptions?: DDRemoveOpt;\r\n\r\n  /** fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain) */\r\n  row?: number;\r\n\r\n  /**\r\n   * if true turns grid to RTL. Possible values are true, false, 'auto' (default?: 'auto')\r\n   * See [example](http://gridstack.github.io/gridstack.js/demo/rtl.html)\r\n   */\r\n  rtl?: boolean | 'auto';\r\n\r\n  /**\r\n   * makes grid static (default?: false). If `true` widgets are not movable/resizable.\r\n   * You don't even need draggable/resizable. A CSS class\r\n   * 'grid-stack-static' is also added to the element.\r\n   */\r\n  staticGrid?: boolean;\r\n\r\n  /** if `true` will add style element to `<head>` otherwise will add it to element's parent node (default `false`). */\r\n  styleInHead?: boolean;\r\n\r\n  /** list of differences in options for automatically created sub-grids under us (inside our grid-items) */\r\n  subGridOpts?: GridStackOptions;\r\n\r\n  /** enable/disable the creation of sub-grids on the fly by dragging items completely\r\n   * over others (nest) vs partially (push). Forces `DDDragOpt.pause=true` to accomplish that. */\r\n  subGridDynamic?: boolean;\r\n}\r\n\r\n/** options used during GridStackEngine.moveNode() */\r\nexport interface GridStackMoveOpts extends GridStackPosition {\r\n  /** node to skip collision */\r\n  skip?: GridStackNode;\r\n  /** do we pack (default true) */\r\n  pack?: boolean;\r\n  /** true if we are calling this recursively to prevent simple swap or coverage collision - default false*/\r\n  nested?: boolean;\r\n  /** vars to calculate other cells coordinates */\r\n  cellWidth?: number;\r\n  cellHeight?: number;\r\n  marginTop?: number;\r\n  marginBottom?: number;\r\n  marginLeft?: number;\r\n  marginRight?: number;\r\n  /** position in pixels of the currently dragged items (for overlap check) */\r\n  rect?: GridStackPosition;\r\n  /** true if we're live resizing */\r\n  resizing?: boolean;\r\n  /** best node (most coverage) we collied with */\r\n  collide?: GridStackNode;\r\n}\r\n\r\nexport interface GridStackPosition {\r\n  /** widget position x (default?: 0) */\r\n  x?: number;\r\n  /** widget position y (default?: 0) */\r\n  y?: number;\r\n  /** widget dimension width (default?: 1) */\r\n  w?: number;\r\n  /** widget dimension height (default?: 1) */\r\n  h?: number;\r\n}\r\n\r\n/**\r\n * GridStack Widget creation options\r\n */\r\nexport interface GridStackWidget extends GridStackPosition {\r\n  /** if true then x, y parameters will be ignored and widget will be places on the first available position (default?: false) */\r\n  autoPosition?: boolean;\r\n  /** minimum width allowed during resize/creation (default?: undefined = un-constrained) */\r\n  minW?: number;\r\n  /** maximum width allowed during resize/creation (default?: undefined = un-constrained) */\r\n  maxW?: number;\r\n  /** minimum height allowed during resize/creation (default?: undefined = un-constrained) */\r\n  minH?: number;\r\n  /** maximum height allowed during resize/creation (default?: undefined = un-constrained) */\r\n  maxH?: number;\r\n  /** prevent resizing (default?: undefined = un-constrained) */\r\n  noResize?: boolean;\r\n  /** prevents moving (default?: undefined = un-constrained) */\r\n  noMove?: boolean;\r\n  /** prevents being moved by others during their (default?: undefined = un-constrained) */\r\n  locked?: boolean;\r\n  /** value for `gs-id` stored on the widget (default?: undefined) */\r\n  id?: numberOrString;\r\n  /** html to append inside as content */\r\n  content?: string;\r\n  /** optional nested grid options and list of children, which then turns into actual instance at runtime to get options from */\r\n  subGridOpts?: GridStackOptions;\r\n}\r\n\r\n/** Drag&Drop resize options */\r\nexport interface DDResizeOpt {\r\n  /** do resize handle hide by default until mouse over ? - default: true on desktop, false on mobile*/\r\n  autoHide?: boolean;\r\n  /**\r\n   * sides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east)\r\n   * Note: it is not recommended to resize from the top sides as weird side effect may occur.\r\n  */\r\n  handles?: string;\r\n}\r\n\r\n/** Drag&Drop remove options */\r\nexport interface DDRemoveOpt {\r\n  /** class that can be removed (default?: '.' + opts.itemClass) */\r\n  accept?: string;\r\n}\r\n\r\n/** Drag&Drop dragging options */\r\nexport interface DDDragOpt {\r\n  /** class selector of items that can be dragged. default to '.grid-stack-item-content' */\r\n  handle?: string;\r\n  /** default to 'body' */\r\n  appendTo?: string;\r\n  /** if set (true | msec), dragging placement (collision) will only happen after a pause by the user. Note: this is Global */\r\n  pause?: boolean | number;\r\n  /** default to `true` */\r\n  scroll?: boolean;\r\n  /** parent constraining where item can be dragged out from (default: null = no constrain) */\r\n  // containment?: string;\r\n}\r\nexport interface DDDragInOpt extends DDDragOpt {\r\n  /** helper function when dropping (ex: 'clone' or your own method) */\r\n  helper?: string | ((event: Event) => HTMLElement);\r\n  /** used when dragging item from the outside, and canceling (ex: 'invalid' or your own method)*/\r\n  // revert?: string | ((event: Event) => HTMLElement);\r\n}\r\n\r\nexport interface Size {\r\n  width: number;\r\n  height: number;\r\n}\r\nexport interface Position {\r\n  top: number;\r\n  left: number;\r\n}\r\nexport interface Rect extends Size, Position {}\r\n\r\n/** data that is passed during drag and resizing callbacks */\r\nexport interface DDUIData {\r\n  position?: Position;\r\n  size?: Size;\r\n  draggable?: HTMLElement;\r\n  /* fields not used by GridStack but sent by jq ? leave in case we go back to them...\r\n  originalPosition? : Position;\r\n  offset?: Position;\r\n  originalSize?: Size;\r\n  element?: HTMLElement[];\r\n  helper?: HTMLElement[];\r\n  originalElement?: HTMLElement[];\r\n  */\r\n}\r\n\r\n/**\r\n * internal descriptions describing the items in the grid\r\n */\r\nexport interface GridStackNode extends GridStackWidget {\r\n  /** pointer back to HTML element */\r\n  el?: GridItemHTMLElement;\r\n  /** pointer back to parent Grid instance */\r\n  grid?: GridStack;\r\n  /** actual sub-grid instance */\r\n  subGrid?: GridStack;\r\n  /** @internal internal id used to match when cloning engines or saving column layouts */\r\n  _id?: number;\r\n  /** @internal */\r\n  _dirty?: boolean;\r\n  /** @internal */\r\n  _updating?: boolean;\r\n  /** @internal true when over trash/another grid so we don't bother removing drag CSS style that would animate back to old position */\r\n  _isAboutToRemove?: boolean;\r\n  /** @internal true if item came from outside of the grid -> actual item need to be moved over */\r\n  _isExternal?: boolean;\r\n  /** @internal Mouse event that's causing moving|resizing */\r\n  _event?: MouseEvent;\r\n  /** @internal moving vs resizing */\r\n  _moving?: boolean;\r\n  /** @internal true if we jumped down past item below (one time jump so we don't have to totally pass it) */\r\n  _skipDown?: boolean;\r\n  /** @internal original values before a drag/size */\r\n  _orig?: GridStackPosition;\r\n  /** @internal position in pixels used during collision check  */\r\n  _rect?: GridStackPosition;\r\n  /** @internal top/left pixel location before a drag so we can detect direction of move from last position*/\r\n  _lastUiPosition?: Position;\r\n  /** @internal set on the item being dragged/resized remember the last positions we've tried (but failed) so we don't try again during drag/resize */\r\n  _lastTried?: GridStackPosition;\r\n  /** @internal position willItFit() will use to position the item */\r\n  _willFitPos?: GridStackPosition;\r\n  /** @internal last drag Y pixel position used to incrementally update V scroll bar */\r\n  _prevYPix?: number;\r\n  /** @internal true if we've remove the item from ourself (dragging out) but might revert it back (release on nothing -> goes back) */\r\n  _temporaryRemoved?: boolean;\r\n  /** @internal true if we should remove DOM element on _notify() rather than clearing _id (old way) */\r\n  _removeDOM?: boolean;\r\n  /** @internal */\r\n  _initDD?: boolean;\r\n}\r\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,yEAAyE;AACzE,MAAM,CAAC,MAAM,YAAY,GAAqB;IAC5C,sBAAsB,EAAE,QAAQ;IAChC,OAAO,EAAE,IAAI;IACb,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,MAAM;IAClB,kBAAkB,EAAE,GAAG;IACvB,cAAc,EAAE,IAAI;IACpB,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE,MAAM,EAAE,0BAA0B,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE;IACjF,MAAM,EAAE,0BAA0B;IAClC,SAAS,EAAE,iBAAiB;IAC5B,MAAM,EAAE,EAAE;IACV,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,CAAC;IACT,aAAa,EAAE,GAAG;IAClB,gBAAgB,EAAE,wBAAwB;IAC1C,eAAe,EAAE,EAAE;IACnB,gBAAgB,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE;IAChD,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;IAC5B,GAAG,EAAE,MAAM;IAEX,kCAAkC;IAClC,sBAAsB;IACtB,+BAA+B;IAC/B,wBAAwB;IACxB,gBAAgB;IAChB,qBAAqB;IACrB,+BAA+B;IAC/B,oBAAoB;IACpB,qBAAqB;IACrB,sBAAsB;CACvB,CAAC;AAEF,6BAA6B;AAC7B,MAAM,CAAC,MAAM,oBAAoB,GAAgB;IAC/C,MAAM,EAAE,0BAA0B;IAClC,QAAQ,EAAE,MAAM;IAChB,qBAAqB;IACrB,iBAAiB;CAClB,CAAC","sourcesContent":["/**\r\n * types.ts 8.1.0\r\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\r\n */\r\n\r\nimport { GridStack } from './gridstack';\r\nimport { GridStackEngine } from './gridstack-engine';\r\n\r\n// default values for grid options - used during init and when saving out\r\nexport const gridDefaults: GridStackOptions = {\r\n  alwaysShowResizeHandle: 'mobile',\r\n  animate: true,\r\n  auto: true,\r\n  cellHeight: 'auto',\r\n  cellHeightThrottle: 100,\r\n  cellHeightUnit: 'px',\r\n  column: 12,\r\n  draggable: { handle: '.grid-stack-item-content', appendTo: 'body', scroll: true },\r\n  handle: '.grid-stack-item-content',\r\n  itemClass: 'grid-stack-item',\r\n  margin: 10,\r\n  marginUnit: 'px',\r\n  maxRow: 0,\r\n  minRow: 0,\r\n  oneColumnSize: 768,\r\n  placeholderClass: 'grid-stack-placeholder',\r\n  placeholderText: '',\r\n  removableOptions: { accept: '.grid-stack-item' },\r\n  resizable: { handles: 'se' },\r\n  rtl: 'auto',\r\n\r\n  // **** same as not being set ****\r\n  // disableDrag: false,\r\n  // disableOneColumnMode: false,\r\n  // disableResize: false,\r\n  // float: false,\r\n  // handleClass: null,\r\n  // oneColumnModeDomSort: false,\r\n  // removable: false,\r\n  // staticGrid: false,\r\n  // styleInHead: false,\r\n};\r\n\r\n/** default dragIn options */\r\nexport const dragInDefaultOptions: DDDragInOpt = {\r\n  handle: '.grid-stack-item-content',\r\n  appendTo: 'body',\r\n  // revert: 'invalid',\r\n  // scroll: false,\r\n};\r\n\r\n/** different layout options when changing # of columns,\r\n * including a custom function that takes new/old column count, and array of new/old positions\r\n * Note: new list may be partially already filled if we have a cache of the layout at that size and new items were added later.\r\n */\r\nexport type ColumnOptions = 'moveScale' | 'move' | 'scale' | 'none' |\r\n  ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);\r\n\r\nexport type numberOrString = number | string;\r\nexport interface GridItemHTMLElement extends HTMLElement {\r\n  /** pointer to grid node instance */\r\n  gridstackNode?: GridStackNode;\r\n  /** @internal */\r\n  _gridstackNodeOrig?: GridStackNode;\r\n}\r\n\r\nexport type GridStackElement = string | HTMLElement | GridItemHTMLElement;\r\n\r\n/** specific and general event handlers for the .on() method */\r\nexport type GridStackEventHandler = (event: Event) => void;\r\nexport type GridStackElementHandler = (event: Event, el: GridItemHTMLElement) => void;\r\nexport type GridStackNodesHandler = (event: Event, nodes: GridStackNode[]) => void;\r\nexport type GridStackDroppedHandler = (event: Event, previousNode: GridStackNode, newNode: GridStackNode) => void;\r\nexport type GridStackEventHandlerCallback = GridStackEventHandler | GridStackElementHandler | GridStackNodesHandler | GridStackDroppedHandler;\r\n\r\n/** optional function called during load() to callback the user on new added/remove grid items | grids */\r\nexport type AddRemoveFcn = (parent: HTMLElement, w: GridStackWidget, add: boolean, grid: boolean) => HTMLElement | undefined;\r\n\r\n/** optional function called during save() to let the caller add additional custom data to the GridStackWidget structure that will get returned */\r\nexport type SaveFcn = (node: GridStackNode, w: GridStackWidget) => void;\r\n\r\n\r\n/**\r\n * Defines the options for a Grid\r\n */\r\nexport interface GridStackOptions {\r\n  /**\r\n   * accept widgets dragged from other grids or from outside (default: `false`). Can be:\r\n   * `true` (uses `'.grid-stack-item'` class filter) or `false`,\r\n   * string for explicit class name,\r\n   * function returning a boolean. See [example](http://gridstack.github.io/gridstack.js/demo/two.html)\r\n   */\r\n  acceptWidgets?: boolean | string | ((element: Element) => boolean);\r\n\r\n  /** possible values (default: `mobile`) - does not apply to non-resizable widgets\r\n    * `false` the resizing handles are only shown while hovering over a widget\r\n    * `true` the resizing handles are always shown\r\n    * 'mobile' if running on a mobile device, default to `true` (since there is no hovering per say), else `false`.\r\n    See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html) */\r\n  alwaysShowResizeHandle?: true | false | 'mobile';\r\n\r\n  /** turns animation on (default?: true) */\r\n  animate?: boolean;\r\n\r\n  /** if false gridstack will not initialize existing items (default?: true) */\r\n  auto?: boolean;\r\n\r\n  /**\r\n   * one cell height (default?: 'auto'). Can be:\r\n   *  an integer (px)\r\n   *  a string (ex: '100px', '10em', '10rem'). Note: % doesn't right - see demo/cell-height.html\r\n   *  0, in which case the library will not generate styles for rows. Everything must be defined in your own CSS files.\r\n   *  'auto' - height will be calculated for square cells (width / column) and updated live as you resize the window - also see `cellHeightThrottle`\r\n   *  'initial' - similar to 'auto' (start at square cells) but stay that size during window resizing.\r\n   */\r\n  cellHeight?: numberOrString;\r\n\r\n  /** throttle time delay (in ms) used when cellHeight='auto' to improve performance vs usability (default?: 100).\r\n   * A value of 0 will make it instant at a cost of re-creating the CSS file at ever window resize event!\r\n   * */\r\n  cellHeightThrottle?: number;\r\n\r\n  /** (internal) unit for cellHeight (default? 'px') which is set when a string cellHeight with a unit is passed (ex: '10rem') */\r\n  cellHeightUnit?: string;\r\n\r\n  /** list of children item to create when calling load() or addGrid() */\r\n  children?: GridStackWidget[];\r\n\r\n  /** number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns.\r\n   * Note: for nested grids, it is recommended to use 'auto' which will always match the container grid-item current width (in column) to keep inside and outside\r\n   * items always to same. flag is not supported for regular non-nested grids.\r\n   */\r\n  column?: number | 'auto';\r\n\r\n  /** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance.\r\n  Note: only used by addGrid(), else your element should have the needed class */\r\n  class?: string;\r\n\r\n  /** disallows dragging of widgets (default?: false) */\r\n  disableDrag?: boolean;\r\n\r\n  /** disables the onColumnMode when the grid width is less than oneColumnSize (default?: false) */\r\n  disableOneColumnMode?: boolean;\r\n\r\n  /** disallows resizing of widgets (default?: false). */\r\n  disableResize?: boolean;\r\n\r\n  /** allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', appendTo?: 'body' }) */\r\n  draggable?: DDDragOpt;\r\n\r\n  /** let user drag nested grid items out of a parent or not (default true - not supported yet) */\r\n  //dragOut?: boolean;\r\n\r\n  /** the type of engine to create (so you can subclass) default to GridStackEngine */\r\n  engineClass?: typeof GridStackEngine;\r\n\r\n  /** enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html) */\r\n  float?: boolean;\r\n\r\n  /** draggable handle selector (default?: '.grid-stack-item-content') */\r\n  handle?: string;\r\n\r\n  /** draggable handle class (e.g. 'grid-stack-item-content'). If set 'handle' is ignored (default?: null) */\r\n  handleClass?: string;\r\n\r\n  /** id used to debug grid instance, not currently stored in DOM attributes */\r\n  id?: numberOrString;\r\n\r\n  /** additional widget class (default?: 'grid-stack-item') */\r\n  itemClass?: string;\r\n\r\n  /**\r\n   * gap between grid item and content (default?: 10). This will set all 4 sides and support the CSS formats below\r\n   *  an integer (px)\r\n   *  a string with possible units (ex: '2em', '20px', '2rem')\r\n   *  string with space separated values (ex: '5px 10px 0 20px' for all 4 sides, or '5em 10em' for top/bottom and left/right pairs like CSS).\r\n   * Note: all sides must have same units (last one wins, default px)\r\n   */\r\n  margin?: numberOrString;\r\n\r\n  /** OLD way to optionally set each side - use margin: '5px 10px 0 20px' instead. Used internally to store each side. */\r\n  marginTop?: numberOrString;\r\n  marginRight?: numberOrString;\r\n  marginBottom?: numberOrString;\r\n  marginLeft?: numberOrString;\r\n\r\n  /** (internal) unit for margin (default? 'px') set when `margin` is set as string with unit (ex: 2rem') */\r\n  marginUnit?: string;\r\n\r\n  /** maximum rows amount. Default? is 0 which means no maximum rows */\r\n  maxRow?: number;\r\n\r\n  /** minimum rows amount. Default is `0`. You can also do this with `min-height` CSS attribute\r\n   * on the grid div in pixels, which will round to the closest row.\r\n   */\r\n  minRow?: number;\r\n\r\n  /** If you are using a nonce-based Content Security Policy, pass your nonce here and\r\n   * GridStack will add it to the <style> elements it creates. */\r\n  nonce?: string;\r\n\r\n  /** minimal width before grid will be shown in one column mode (default?: 768) */\r\n  oneColumnSize?: number;\r\n\r\n  /**\r\n   * set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column\r\n   * layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: false)\r\n   */\r\n  oneColumnModeDomSort?: boolean;\r\n\r\n  /** class for placeholder (default?: 'grid-stack-placeholder') */\r\n  placeholderClass?: string;\r\n\r\n  /** placeholder default content (default?: '') */\r\n  placeholderText?: string;\r\n\r\n  /** allows to override UI resizable options. (default?: { handles: 'se' }) */\r\n  resizable?: DDResizeOpt;\r\n\r\n  /**\r\n   * if true widgets could be removed by dragging outside of the grid. It could also be a selector string (ex: \".trash\"),\r\n   * in this case widgets will be removed by dropping them there (default?: false)\r\n   * See example (http://gridstack.github.io/gridstack.js/demo/two.html)\r\n   */\r\n  removable?: boolean | string;\r\n\r\n  /** allows to override UI removable options. (default?: { accept: '.grid-stack-item' }) */\r\n  removableOptions?: DDRemoveOpt;\r\n\r\n  /** fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain) */\r\n  row?: number;\r\n\r\n  /**\r\n   * if true turns grid to RTL. Possible values are true, false, 'auto' (default?: 'auto')\r\n   * See [example](http://gridstack.github.io/gridstack.js/demo/rtl.html)\r\n   */\r\n  rtl?: boolean | 'auto';\r\n\r\n  /**\r\n   * makes grid static (default?: false). If `true` widgets are not movable/resizable.\r\n   * You don't even need draggable/resizable. A CSS class\r\n   * 'grid-stack-static' is also added to the element.\r\n   */\r\n  staticGrid?: boolean;\r\n\r\n  /** if `true` will add style element to `<head>` otherwise will add it to element's parent node (default `false`). */\r\n  styleInHead?: boolean;\r\n\r\n  /** list of differences in options for automatically created sub-grids under us (inside our grid-items) */\r\n  subGridOpts?: GridStackOptions;\r\n\r\n  /** enable/disable the creation of sub-grids on the fly by dragging items completely\r\n   * over others (nest) vs partially (push). Forces `DDDragOpt.pause=true` to accomplish that. */\r\n  subGridDynamic?: boolean;\r\n}\r\n\r\n/** options used during GridStackEngine.moveNode() */\r\nexport interface GridStackMoveOpts extends GridStackPosition {\r\n  /** node to skip collision */\r\n  skip?: GridStackNode;\r\n  /** do we pack (default true) */\r\n  pack?: boolean;\r\n  /** true if we are calling this recursively to prevent simple swap or coverage collision - default false*/\r\n  nested?: boolean;\r\n  /** vars to calculate other cells coordinates */\r\n  cellWidth?: number;\r\n  cellHeight?: number;\r\n  marginTop?: number;\r\n  marginBottom?: number;\r\n  marginLeft?: number;\r\n  marginRight?: number;\r\n  /** position in pixels of the currently dragged items (for overlap check) */\r\n  rect?: GridStackPosition;\r\n  /** true if we're live resizing */\r\n  resizing?: boolean;\r\n  /** best node (most coverage) we collied with */\r\n  collide?: GridStackNode;\r\n}\r\n\r\nexport interface GridStackPosition {\r\n  /** widget position x (default?: 0) */\r\n  x?: number;\r\n  /** widget position y (default?: 0) */\r\n  y?: number;\r\n  /** widget dimension width (default?: 1) */\r\n  w?: number;\r\n  /** widget dimension height (default?: 1) */\r\n  h?: number;\r\n}\r\n\r\n/**\r\n * GridStack Widget creation options\r\n */\r\nexport interface GridStackWidget extends GridStackPosition {\r\n  /** if true then x, y parameters will be ignored and widget will be places on the first available position (default?: false) */\r\n  autoPosition?: boolean;\r\n  /** minimum width allowed during resize/creation (default?: undefined = un-constrained) */\r\n  minW?: number;\r\n  /** maximum width allowed during resize/creation (default?: undefined = un-constrained) */\r\n  maxW?: number;\r\n  /** minimum height allowed during resize/creation (default?: undefined = un-constrained) */\r\n  minH?: number;\r\n  /** maximum height allowed during resize/creation (default?: undefined = un-constrained) */\r\n  maxH?: number;\r\n  /** prevent resizing (default?: undefined = un-constrained) */\r\n  noResize?: boolean;\r\n  /** prevents moving (default?: undefined = un-constrained) */\r\n  noMove?: boolean;\r\n  /** prevents being moved by others during their (default?: undefined = un-constrained) */\r\n  locked?: boolean;\r\n  /** value for `gs-id` stored on the widget (default?: undefined) */\r\n  id?: numberOrString;\r\n  /** html to append inside as content */\r\n  content?: string;\r\n  /** optional nested grid options and list of children, which then turns into actual instance at runtime to get options from */\r\n  subGridOpts?: GridStackOptions;\r\n}\r\n\r\n/** Drag&Drop resize options */\r\nexport interface DDResizeOpt {\r\n  /** do resize handle hide by default until mouse over ? - default: true on desktop, false on mobile*/\r\n  autoHide?: boolean;\r\n  /**\r\n   * sides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east)\r\n   * Note: it is not recommended to resize from the top sides as weird side effect may occur.\r\n  */\r\n  handles?: string;\r\n}\r\n\r\n/** Drag&Drop remove options */\r\nexport interface DDRemoveOpt {\r\n  /** class that can be removed (default?: '.' + opts.itemClass) */\r\n  accept?: string;\r\n}\r\n\r\n/** Drag&Drop dragging options */\r\nexport interface DDDragOpt {\r\n  /** class selector of items that can be dragged. default to '.grid-stack-item-content' */\r\n  handle?: string;\r\n  /** default to 'body' */\r\n  appendTo?: string;\r\n  /** if set (true | msec), dragging placement (collision) will only happen after a pause by the user. Note: this is Global */\r\n  pause?: boolean | number;\r\n  /** default to `true` */\r\n  scroll?: boolean;\r\n  /** prevents dragging from starting on specified elements, listed as comma separated selectors (eg: '.no-drag'). default built in is 'input,textarea,button,select,option' */\r\n  cancel?: string;\r\n}\r\nexport interface DDDragInOpt extends DDDragOpt {\r\n  /** helper function when dropping: 'clone' or your own method */\r\n  helper?: 'clone' | ((event: Event) => HTMLElement);\r\n  /** used when dragging item from the outside, and canceling (ex: 'invalid' or your own method)*/\r\n  // revert?: string | ((event: Event) => HTMLElement);\r\n}\r\n\r\nexport interface Size {\r\n  width: number;\r\n  height: number;\r\n}\r\nexport interface Position {\r\n  top: number;\r\n  left: number;\r\n}\r\nexport interface Rect extends Size, Position {}\r\n\r\n/** data that is passed during drag and resizing callbacks */\r\nexport interface DDUIData {\r\n  position?: Position;\r\n  size?: Size;\r\n  draggable?: HTMLElement;\r\n  /* fields not used by GridStack but sent by jq ? leave in case we go back to them...\r\n  originalPosition? : Position;\r\n  offset?: Position;\r\n  originalSize?: Size;\r\n  element?: HTMLElement[];\r\n  helper?: HTMLElement[];\r\n  originalElement?: HTMLElement[];\r\n  */\r\n}\r\n\r\n/**\r\n * internal descriptions describing the items in the grid\r\n */\r\nexport interface GridStackNode extends GridStackWidget {\r\n  /** pointer back to HTML element */\r\n  el?: GridItemHTMLElement;\r\n  /** pointer back to parent Grid instance */\r\n  grid?: GridStack;\r\n  /** actual sub-grid instance */\r\n  subGrid?: GridStack;\r\n  /** @internal internal id used to match when cloning engines or saving column layouts */\r\n  _id?: number;\r\n  /** @internal */\r\n  _dirty?: boolean;\r\n  /** @internal */\r\n  _updating?: boolean;\r\n  /** @internal true when over trash/another grid so we don't bother removing drag CSS style that would animate back to old position */\r\n  _isAboutToRemove?: boolean;\r\n  /** @internal true if item came from outside of the grid -> actual item need to be moved over */\r\n  _isExternal?: boolean;\r\n  /** @internal Mouse event that's causing moving|resizing */\r\n  _event?: MouseEvent;\r\n  /** @internal moving vs resizing */\r\n  _moving?: boolean;\r\n  /** @internal true if we jumped down past item below (one time jump so we don't have to totally pass it) */\r\n  _skipDown?: boolean;\r\n  /** @internal original values before a drag/size */\r\n  _orig?: GridStackPosition;\r\n  /** @internal position in pixels used during collision check  */\r\n  _rect?: GridStackPosition;\r\n  /** @internal top/left pixel location before a drag so we can detect direction of move from last position*/\r\n  _lastUiPosition?: Position;\r\n  /** @internal set on the item being dragged/resized remember the last positions we've tried (but failed) so we don't try again during drag/resize */\r\n  _lastTried?: GridStackPosition;\r\n  /** @internal position willItFit() will use to position the item */\r\n  _willFitPos?: GridStackPosition;\r\n  /** @internal last drag Y pixel position used to incrementally update V scroll bar */\r\n  _prevYPix?: number;\r\n  /** @internal true if we've remove the item from ourself (dragging out) but might revert it back (release on nothing -> goes back) */\r\n  _temporaryRemoved?: boolean;\r\n  /** @internal true if we should remove DOM element on _notify() rather than clearing _id (old way) */\r\n  _removeDOM?: boolean;\r\n  /** @internal */\r\n  _initDD?: boolean;\r\n}\r\n"]}

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
 /**
- * utils.ts 8.0.1
+ * utils.ts 8.1.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 import { GridStackElement, GridStackNode, GridStackOptions, numberOrString, GridStackPosition, GridStackWidget } from './types';
@@ -20,9 +20,9 @@ export declare function obsoleteAttr(el: HTMLElement, oldName: string, newName:
  */
 export declare class Utils {
     /** convert a potential selector into actual list of html elements. optional root which defaults to document (for shadow dom) */
-    static getElements(els: GridStackElement, root?: Document): HTMLElement[];
+    static getElements(els: GridStackElement, root?: HTMLElement | Document): HTMLElement[];
     /** convert a potential selector into actual single element. optional root which defaults to document (for shadow dom) */
-    static getElement(els: GridStackElement, root?: Document): HTMLElement;
+    static getElement(els: GridStackElement, root?: HTMLElement | Document): HTMLElement;
     /** returns true if a and b overlap */
     static isIntercepted(a: GridStackPosition, b: GridStackPosition): boolean;
     /** returns true if a and b touch edges or corners */

package/dist/utils.js

@@ -1,5 +1,5 @@
 /**
- * utils.ts 8.0.1
+ * utils.ts 8.1.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 /** checks for obsolete method names */
@@ -42,12 +42,13 @@ export function obsoleteAttr(el, oldName, newName, rev) {
 export class Utils {
     /** convert a potential selector into actual list of html elements. optional root which defaults to document (for shadow dom) */
     static getElements(els, root = document) {
+        const doc = ('getElementById' in root) ? root : undefined;
         if (typeof els === 'string') {
             // Note: very common for people use to id='1,2,3' which is only legal as HTML5 id, but not CSS selectors
             // so if we start with a number, assume it's an id and just return that one item...
             // see https://github.com/gridstack/gridstack.js/issues/2234#issuecomment-1523796562
-            if (!isNaN(+els[0])) { // start with digit
-                const el = root.getElementById(els);
+            if (doc && !isNaN(+els[0])) { // start with digit
+                const el = doc.getElementById(els);
                 return el ? [el] : [];
             }
             let list = root.querySelectorAll(els);
@@ -63,23 +64,24 @@ export class Utils {
     }
     /** convert a potential selector into actual single element. optional root which defaults to document (for shadow dom) */
     static getElement(els, root = document) {
+        const doc = ('getElementById' in root) ? root : undefined;
         if (typeof els === 'string') {
             if (!els.length)
                 return null;
-            if (els[0] === '#') {
-                return root.getElementById(els.substring(1));
+            if (doc && els[0] === '#') {
+                return doc.getElementById(els.substring(1));
             }
-            if (els[0] === '.' || els[0] === '[') {
+            if (els[0] === '#' || els[0] === '.' || els[0] === '[') {
                 return root.querySelector(els);
             }
             // if we start with a digit, assume it's an id (error calling querySelector('#1')) as class are not valid CSS
-            if (!isNaN(+els[0])) { // start with digit
-                return root.getElementById(els);
+            if (doc && !isNaN(+els[0])) { // start with digit
+                return doc.getElementById(els);
             }
             // finally try string, then id, then class
             let el = root.querySelector(els);
-            if (!el) {
-                el = root.getElementById(els);
+            if (doc && !el) {
+                el = doc.getElementById(els);
             }
             if (!el) {
                 el = root.querySelector('.' + els);