gridstack 5.0.0 → 6.0.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{border:1px dashed #d3d3d3;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-draggable-dragging,.grid-stack>.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack>.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack>.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.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;-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-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-w="0"]{width:0%}.grid-stack>.grid-stack-item[gs-x="0"]{left:0}.grid-stack>.grid-stack-item[gs-min-w="0"]{min-width:0}.grid-stack>.grid-stack-item[gs-max-w="0"]{max-width: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-min-w="1"]{min-width:8.3333333333%}.grid-stack>.grid-stack-item[gs-max-w="1"]{max-width: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-min-w="2"]{min-width:16.6666666667%}.grid-stack>.grid-stack-item[gs-max-w="2"]{max-width: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-min-w="3"]{min-width:25%}.grid-stack>.grid-stack-item[gs-max-w="3"]{max-width: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-min-w="4"]{min-width:33.3333333333%}.grid-stack>.grid-stack-item[gs-max-w="4"]{max-width: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-min-w="5"]{min-width:41.6666666667%}.grid-stack>.grid-stack-item[gs-max-w="5"]{max-width: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-min-w="6"]{min-width:50%}.grid-stack>.grid-stack-item[gs-max-w="6"]{max-width: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-min-w="7"]{min-width:58.3333333333%}.grid-stack>.grid-stack-item[gs-max-w="7"]{max-width: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-min-w="8"]{min-width:66.6666666667%}.grid-stack>.grid-stack-item[gs-max-w="8"]{max-width: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-min-w="9"]{min-width:75%}.grid-stack>.grid-stack-item[gs-max-w="9"]{max-width: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-min-w="10"]{min-width:83.3333333333%}.grid-stack>.grid-stack-item[gs-max-w="10"]{max-width: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-min-w="11"]{min-width:91.6666666667%}.grid-stack>.grid-stack-item[gs-max-w="11"]{max-width:91.6666666667%}.grid-stack>.grid-stack-item[gs-w="12"]{width:100%}.grid-stack>.grid-stack-item[gs-x="12"]{left:100%}.grid-stack>.grid-stack-item[gs-min-w="12"]{min-width:100%}.grid-stack>.grid-stack-item[gs-max-w="12"]{max-width:100%}.grid-stack.grid-stack-1>.grid-stack-item{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[gs-w="1"]{width:100%}.grid-stack.grid-stack-1>.grid-stack-item[gs-x="1"]{left:100%}.grid-stack.grid-stack-1>.grid-stack-item[gs-min-w="1"]{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[gs-max-w="1"]{max-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}
+: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-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;-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-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-w="0"]{width:0%}.grid-stack>.grid-stack-item[gs-x="0"]{left:0}.grid-stack>.grid-stack-item[gs-min-w="0"]{min-width:0}.grid-stack>.grid-stack-item[gs-max-w="0"]{max-width: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-min-w="1"]{min-width:8.3333333333%}.grid-stack>.grid-stack-item[gs-max-w="1"]{max-width: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-min-w="2"]{min-width:16.6666666667%}.grid-stack>.grid-stack-item[gs-max-w="2"]{max-width: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-min-w="3"]{min-width:25%}.grid-stack>.grid-stack-item[gs-max-w="3"]{max-width: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-min-w="4"]{min-width:33.3333333333%}.grid-stack>.grid-stack-item[gs-max-w="4"]{max-width: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-min-w="5"]{min-width:41.6666666667%}.grid-stack>.grid-stack-item[gs-max-w="5"]{max-width: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-min-w="6"]{min-width:50%}.grid-stack>.grid-stack-item[gs-max-w="6"]{max-width: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-min-w="7"]{min-width:58.3333333333%}.grid-stack>.grid-stack-item[gs-max-w="7"]{max-width: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-min-w="8"]{min-width:66.6666666667%}.grid-stack>.grid-stack-item[gs-max-w="8"]{max-width: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-min-w="9"]{min-width:75%}.grid-stack>.grid-stack-item[gs-max-w="9"]{max-width: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-min-w="10"]{min-width:83.3333333333%}.grid-stack>.grid-stack-item[gs-max-w="10"]{max-width: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-min-w="11"]{min-width:91.6666666667%}.grid-stack>.grid-stack-item[gs-max-w="11"]{max-width:91.6666666667%}.grid-stack>.grid-stack-item[gs-w="12"]{width:100%}.grid-stack>.grid-stack-item[gs-x="12"]{left:100%}.grid-stack>.grid-stack-item[gs-min-w="12"]{min-width:100%}.grid-stack>.grid-stack-item[gs-max-w="12"]{max-width:100%}.grid-stack.grid-stack-1>.grid-stack-item{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[gs-w="1"]{width:100%}.grid-stack.grid-stack-1>.grid-stack-item[gs-x="1"]{left:100%}.grid-stack.grid-stack-1>.grid-stack-item[gs-min-w="1"]{min-width:100%}.grid-stack.grid-stack-1>.grid-stack-item[gs-max-w="1"]{max-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}

package/dist/src/gridstack.scss

@@ -1,5 +1,5 @@
 /**
- * gridstack SASS styles 5.0
+ * gridstack SASS styles 6.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 
@@ -29,7 +29,7 @@ $animation_speed: .3s !default;
   }
 
   .grid-stack-placeholder > .placeholder-content {
-    border: 1px dashed lightgray;
+    background-color: rgba(0,0,0,0.1);
     margin: 0;
     position: absolute;
     width: auto;
@@ -61,16 +61,6 @@ $animation_speed: .3s !default;
     &.ui-resizable-disabled > .ui-resizable-handle,
     &.ui-resizable-autohide > .ui-resizable-handle { display: none; }
 
-    &.ui-draggable-dragging,
-    &.ui-resizable-resizing {
-      z-index: 100;
-
-      > .grid-stack-item-content {
-        box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-        opacity: 0.8;
-      }
-    }
-
     > .ui-resizable-se,
     > .ui-resizable-sw {
       background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
@@ -131,3 +121,20 @@ $animation_speed: .3s !default;
   //   pointer-events: none;
   // }
 }
+
+.ui-draggable-dragging,
+.ui-resizable-resizing {
+  z-index: 100;
+
+  > .grid-stack-item-content {
+    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+    opacity: 0.8;
+  }
+}
+.ui-draggable-dragging {
+  will-change: left, top;
+  cursor: move;
+}
+.ui-resizable-resizing {
+  will-change: width, height;
+}

package/dist/types.d.ts

@@ -1,8 +1,9 @@
 /**
- * types.ts 5.0
+ * types.ts 6.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 import { GridStack } from './gridstack';
+import { GridStackEngine } from './gridstack-engine';
 /** different layout options when changing # of columns,
  * including a custom function that takes new/old column count, and array of new/old positions
  * 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.
@@ -26,12 +27,14 @@ export interface GridStackOptions {
      * function returning a boolean. See [example](http://gridstack.github.io/gridstack.js/demo/two.html)
      */
     acceptWidgets?: boolean | string | ((element: Element) => boolean);
-    /** possible values (default: `false` only show on hover)
-      * `true` the resizing handles are always shown even if the user is not hovering over the widget
-      * advance condition such as this mobile browser agent check:
+    /** possible values (default: `mobile`) - does not apply to non-resizable widgets
+      * `false` the resizing handles are only shown while hovering over a widget
+      * `true` the resizing handles are always shown
+      * 'mobile' if running on a mobile device, default to `true` (since there is no hovering per say), else `false`.
+      * this uses this condition on browser agent check:
       `alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent )`
       See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html) */
-    alwaysShowResizeHandle?: boolean;
+    alwaysShowResizeHandle?: true | false | 'mobile';
     /** turns animation on (default?: true) */
     animate?: boolean;
     /** if false gridstack will not initialize existing items (default?: true) */
@@ -55,7 +58,7 @@ export interface GridStackOptions {
     children?: GridStackWidget[];
     /** 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.
      * 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
-     * items always to same. flag is ignored for non nested grids.
+     * items always to same. flag is not supported for regular non-nested grids.
      */
     column?: number | 'auto';
     /** additional class on top of '.grid-stack' (which is required for our CSS) to differentiate this instance.
@@ -63,21 +66,22 @@ export interface GridStackOptions {
     class?: string;
     /** disallows dragging of widgets (default?: false) */
     disableDrag?: boolean;
-    /** disables the onColumnMode when the grid width is less than minWidth (default?: false) */
+    /** disables the onColumnMode when the grid width is less than oneColumnSize (default?: false) */
     disableOneColumnMode?: boolean;
     /** disallows resizing of widgets (default?: false). */
     disableResize?: boolean;
-    /** allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', scroll?: true, appendTo?: 'body', containment: null }) */
+    /** allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', appendTo?: 'body' }) */
     draggable?: DDDragOpt;
     /** allows to drag external items using this selector - see dragInOptions. (default: undefined) */
     dragIn?: string;
     /** allows to drag external items using these options. See `GridStack.setupDragIn()` instead (not per grid really).
-     * (default?: { handle: '.grid-stack-item-content', revert: 'invalid', scroll: false, appendTo: 'body' })
+     * (default?: { handle: '.grid-stack-item-content', appendTo: 'body' })
      * helper can be 'clone' or your own function (set what the drag/dropped item will be instead)
      */
     dragInOptions?: DDDragInOpt;
-    /** let user drag nested grid items out of a parent or not (default false) */
-    dragOut?: boolean;
+    /** let user drag nested grid items out of a parent or not (default true - not supported yet) */
+    /** the type of engine to create (so you can subclass) default to GridStackEngine */
+    engineClass?: typeof GridStackEngine;
     /** enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html) */
     float?: boolean;
     /** draggable handle selector (default?: '.grid-stack-item-content') */
@@ -109,8 +113,8 @@ export interface GridStackOptions {
      * on the grid div in pixels, which will round to the closest row.
      */
     minRow?: number;
-    /** minimal width. If grid width is less, grid will be shown in one column mode (default?: 768) */
-    minWidth?: number;
+    /** minimal width before grid will be shown in one column mode (default?: 768) */
+    oneColumnSize?: number;
     /**
      * set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column
      * layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: false)
@@ -120,7 +124,7 @@ export interface GridStackOptions {
     placeholderClass?: string;
     /** placeholder default content (default?: '') */
     placeholderText?: string;
-    /** allows to override UI resizable options. (default?: { autoHide: true, handles: 'se' }) */
+    /** allows to override UI resizable options. (default?: { handles: 'se' }) */
     resizable?: DDResizeOpt;
     /**
      * if true widgets could be removed by dragging outside of the grid. It could also be a selector string (ex: ".trash"),
@@ -207,7 +211,7 @@ export interface GridStackWidget extends GridStackPosition {
 }
 /** Drag&Drop resize options */
 export interface DDResizeOpt {
-    /** do resize handle hide by default until mouse over ? - default: true */
+    /** do resize handle hide by default until mouse over ? - default: true on desktop, false on mobile*/
     autoHide?: boolean;
     /**
      * sides where you can resize from (ex: 'e, se, s, sw, w') - default 'se' (south-east)
@@ -224,16 +228,11 @@ export interface DDRemoveOpt {
 export interface DDDragOpt {
     /** class selector of items that can be dragged. default to '.grid-stack-item-content' */
     handle?: string;
-    /** default to `true` */
-    scroll?: boolean;
     /** default to 'body' */
     appendTo?: string;
-    /** parent constraining where item can be dragged out from (default: null = no constrain) */
-    containment?: string;
 }
 export interface DDDragInOpt extends DDDragOpt {
     /** used when dragging item from the outside, and canceling (ex: 'invalid' or your own method)*/
-    revert?: string | ((event: Event) => HTMLElement);
     /** helper function when dropping (ex: 'clone' or your own method) */
     helper?: string | ((event: Event) => HTMLElement);
 }

package/dist/types.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * types.ts 5.0
+ * types.ts 6.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";AAAA;;;GAGG","sourcesContent":["/**\r\n * types.ts 5.0\r\n * Copyright (c) 2021 Alain Dumesny - see GridStack root license\r\n */\r\n\r\nimport { GridStack } from './gridstack';\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\nexport type GridStackEventHandlerCallback = (event: Event, arg2?: GridItemHTMLElement | GridStackNode | GridStackNode[], newNode?: GridStackNode) => void;\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: `false` only show on hover)\r\n    * `true` the resizing handles are always shown even if the user is not hovering over the widget\r\n    * advance condition such as this mobile browser agent check:\r\n    `alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent )`\r\n    See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html) */\r\n  alwaysShowResizeHandle?: boolean;\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 ignored for 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 minWidth (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', scroll?: true, appendTo?: 'body', containment: null }) */\r\n  draggable?: DDDragOpt;\r\n\r\n  /** allows to drag external items using this selector - see dragInOptions. (default: undefined) */\r\n  dragIn?: string;\r\n\r\n  /** allows to drag external items using these options. See `GridStack.setupDragIn()` instead (not per grid really).\r\n   * (default?: { handle: '.grid-stack-item-content', revert: 'invalid', scroll: false, appendTo: 'body' })\r\n   * helper can be 'clone' or your own function (set what the drag/dropped item will be instead)\r\n   */\r\n  dragInOptions?: DDDragInOpt;\r\n\r\n  /** let user drag nested grid items out of a parent or not (default false) */\r\n  dragOut?: boolean;\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  /** minimal width. If grid width is less, grid will be shown in one column mode (default?: 768) */\r\n  minWidth?: 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?: { autoHide: true, 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  /** @internal point to a parent grid item if we're nested */\r\n  _isNested?: GridStackNode;\r\n  /** @internal unique class name for our generated CSS style sheet */\r\n  _styleSheetClass?: string;\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}\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  /** widgets can have their own custom resize handles. For example 'e,w' will make that particular widget only resize east and west. See `resizable: {handles: string}` option */\r\n  resizeHandles?: string;\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 */\r\n  subGrid?: GridStackOptions | GridStack;\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 */\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 `true` */\r\n  scroll?: boolean;\r\n  /** default to 'body' */\r\n  appendTo?: string;\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    /** used when dragging item from the outside, and canceling (ex: 'invalid' or your own method)*/\r\n    revert?: string | ((event: Event) => HTMLElement);\r\n    /** helper function when dropping (ex: 'clone' or your own method) */\r\n    helper?: 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  /* 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 Grid instance */\r\n  grid?: 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 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","sourcesContent":["/**\r\n * types.ts 6.0.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\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\nexport type GridStackEventHandlerCallback = (event: Event, arg2?: GridItemHTMLElement | GridStackNode | GridStackNode[], newNode?: GridStackNode) => void;\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    * this uses this condition on browser agent check:\r\n    `alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent )`\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  /** allows to drag external items using this selector - see dragInOptions. (default: undefined) */\r\n  dragIn?: string;\r\n\r\n  /** allows to drag external items using these options. See `GridStack.setupDragIn()` instead (not per grid really).\r\n   * (default?: { handle: '.grid-stack-item-content', appendTo: 'body' })\r\n   * helper can be 'clone' or your own function (set what the drag/dropped item will be instead)\r\n   */\r\n  dragInOptions?: DDDragInOpt;\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  /** 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  /** @internal point to a parent grid item if we're nested */\r\n  _isNested?: GridStackNode;\r\n  /** @internal unique class name for our generated CSS style sheet */\r\n  _styleSheetClass?: string;\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}\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  /** widgets can have their own custom resize handles. For example 'e,w' will make that particular widget only resize east and west. See `resizable: {handles: string}` option */\r\n  resizeHandles?: string;\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 */\r\n  subGrid?: GridStackOptions | GridStack;\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  /** 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    /** used when dragging item from the outside, and canceling (ex: 'invalid' or your own method)*/\r\n    // revert?: string | ((event: Event) => HTMLElement);\r\n    /** helper function when dropping (ex: 'clone' or your own method) */\r\n    helper?: 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  /* 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 Grid instance */\r\n  grid?: 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 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 5.0
+ * utils.ts 6.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 import { GridStackElement, GridStackNode, GridStackOptions, numberOrString, GridStackPosition, GridStackWidget } from './types';
@@ -53,7 +53,7 @@ export declare class Utils {
     /** given 2 objects return true if they have the same values. Checks for Object {} having same fields and values (just 1 level down) */
     static same(a: unknown, b: unknown): boolean;
     /** copies over b size & position (GridStackPosition), and possibly min/max as well */
-    static copyPos(a: GridStackWidget, b: GridStackWidget, minMax?: boolean): GridStackWidget;
+    static copyPos(a: GridStackWidget, b: GridStackWidget, doMinMax?: boolean): GridStackWidget;
     /** true if a and b has same size & position */
     static samePos(a: GridStackPosition, b: GridStackPosition): boolean;
     /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
@@ -70,4 +70,14 @@ export declare class Utils {
      * Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies.
      */
     static cloneDeep<T>(obj: T): T;
+    /** deep clone the given HTML node, removing teh unique id field */
+    static cloneNode(el: HTMLElement): HTMLElement;
+    static appendTo(el: HTMLElement, parent: string | HTMLElement | Node): void;
+    static addElStyles(el: HTMLElement, styles: {
+        [prop: string]: string | string[];
+    }): void;
+    static initEvent<T>(e: DragEvent | MouseEvent, info: {
+        type: string;
+        target?: EventTarget;
+    }): T;
 }

package/dist/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * utils.ts 5.0
+ * utils.ts 6.0.0
  * Copyright (c) 2021 Alain Dumesny - see GridStack root license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -10,7 +10,7 @@ exports.Utils = exports.obsoleteAttr = exports.obsoleteOptsDel = exports.obsolet
 function obsolete(self, f, oldName, newName, rev) {
     let wrapper = (...args) => {
         console.warn('gridstack.js: Function `' + oldName + '` is deprecated in ' + rev + ' and has been replaced ' +
-            'with `' + newName + '`. It will be **completely** removed in v1.0');
+            'with `' + newName + '`. It will be **removed** in a future release');
         return f.apply(self, args);
     };
     wrapper.prototype = f.prototype;
@@ -22,7 +22,7 @@ function obsoleteOpts(opts, oldName, newName, rev) {
     if (opts[oldName] !== undefined) {
         opts[newName] = opts[oldName];
         console.warn('gridstack.js: Option `' + oldName + '` is deprecated in ' + rev + ' and has been replaced with `' +
-            newName + '`. It will be **completely** removed in v1.0');
+            newName + '`. It will be **removed** in a future release');
     }
 }
 exports.obsoleteOpts = obsoleteOpts;
@@ -39,7 +39,7 @@ function obsoleteAttr(el, oldName, newName, rev) {
     if (oldAttr !== null) {
         el.setAttribute(newName, oldAttr);
         console.warn('gridstack.js: attribute `' + oldName + '`=' + oldAttr + ' is deprecated on this object in ' + rev + ' and has been replaced with `' +
-            newName + '`. It will be **completely** removed in v1.0');
+            newName + '`. It will be **removed** in a future release');
     }
 }
 exports.obsoleteAttr = obsoleteAttr;
@@ -216,21 +216,21 @@ class Utils {
         return true;
     }
     /** copies over b size & position (GridStackPosition), and possibly min/max as well */
-    static copyPos(a, b, minMax = false) {
+    static copyPos(a, b, doMinMax = false) {
         a.x = b.x;
         a.y = b.y;
         a.w = b.w;
         a.h = b.h;
-        if (!minMax)
-            return a;
-        if (b.minW)
-            a.minW = b.minW;
-        if (b.minH)
-            a.minH = b.minH;
-        if (b.maxW)
-            a.maxW = b.maxW;
-        if (b.maxH)
-            a.maxH = b.maxH;
+        if (doMinMax) {
+            if (b.minW)
+                a.minW = b.minW;
+            if (b.minH)
+                a.minH = b.minH;
+            if (b.maxW)
+                a.maxW = b.maxW;
+            if (b.maxH)
+                a.maxH = b.maxH;
+        }
         return a;
     }
     /** true if a and b has same size & position */
@@ -390,6 +390,8 @@ class Utils {
      * Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies.
      */
     static cloneDeep(obj) {
+        // list of fields we will skip during cloneDeep (nested objects, other internal)
+        const skipFields = ['_isNested', 'el', 'grid', 'subGrid', 'engine'];
         // return JSON.parse(JSON.stringify(obj)); // doesn't work with date format ?
         const ret = Utils.clone(obj);
         for (const key in ret) {
@@ -400,8 +402,64 @@ class Utils {
         }
         return ret;
     }
+    /** deep clone the given HTML node, removing teh unique id field */
+    static cloneNode(el) {
+        const node = el.cloneNode(true);
+        node.removeAttribute('id');
+        return node;
+    }
+    static appendTo(el, parent) {
+        let parentNode;
+        if (typeof parent === 'string') {
+            parentNode = document.querySelector(parent);
+        }
+        else {
+            parentNode = parent;
+        }
+        if (parentNode) {
+            parentNode.appendChild(el);
+        }
+    }
+    // public static setPositionRelative(el: HTMLElement): void {
+    //   if (!(/^(?:r|a|f)/).test(window.getComputedStyle(el).position)) {
+    //     el.style.position = "relative";
+    //   }
+    // }
+    static addElStyles(el, styles) {
+        if (styles instanceof Object) {
+            for (const s in styles) {
+                if (styles.hasOwnProperty(s)) {
+                    if (Array.isArray(styles[s])) {
+                        // support fallback value
+                        styles[s].forEach(val => {
+                            el.style[s] = val;
+                        });
+                    }
+                    else {
+                        el.style[s] = styles[s];
+                    }
+                }
+            }
+        }
+    }
+    static initEvent(e, info) {
+        const evt = { type: info.type };
+        const obj = {
+            button: 0,
+            which: 0,
+            buttons: 1,
+            bubbles: true,
+            cancelable: true,
+            target: info.target ? info.target : e.target
+        };
+        // don't check for `instanceof DragEvent` as Safari use MouseEvent #1540
+        if (e.dataTransfer) {
+            evt['dataTransfer'] = e.dataTransfer; // workaround 'readonly' field.
+        }
+        ['altKey', 'ctrlKey', 'metaKey', 'shiftKey'].forEach(p => evt[p] = e[p]); // keys
+        ['pageX', 'pageY', 'clientX', 'clientY', 'screenX', 'screenY'].forEach(p => evt[p] = e[p]); // point info
+        return Object.assign(Object.assign({}, evt), obj);
+    }
 }
 exports.Utils = Utils;
-// list of fields we will skip during cloneDeep (nested objects, other internal)
-const skipFields = ['_isNested', 'el', 'grid', 'subGrid', 'engine'];
 //# sourceMappingURL=utils.js.map