gridstack 7.3.0 → 8.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{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}
+: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}.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-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}

package/dist/ng/README.md

@@ -0,0 +1,154 @@
+# Angular wrapper
+
+The Angular [wrapper component](./gridstack.component.ts) <gridstack> is a better way to use Gridstack, but alternative raw [ngFor](./ngFor.ts) or [simple](./simple.ts) demos are also given.
+
+# Dynamic grid items
+this is the recommended way if you are going to have multiple grids (alow drag&drop between) or drag from toolbar to create items, or drag to remove items, etc...
+
+I.E. don't use Angular templating to create grid items as that is harder to sync when gridstack will also add/remove items.
+
+HTML 
+```html
+<gridstack [options]="gridOptions">
+</gridstack>
+```
+Code
+```ts
+import { GridStack, GridStackOptions } from 'gridstack';
+import { gsCreateNgComponents } from 'gridstack/dist/ng/gridstack.component';
+
+constructor() {
+  // use the built in component creation code
+  GridStack.addRemoveCB = gsCreateNgComponents;
+}
+
+// sample grid options and items to load...
+public gridOptions: GridStackOptions = {
+  margin: 5,
+  float: true,
+  children: [ // or call load()/addWidget() with same data
+    {x:0, y:0, minW:2, content:'Item 1'},
+    {x:1, y:1, content:'Item 2'},
+    {x:2, y:2, content:'Item 3'},
+  ]
+}
+```
+
+# More Complete example
+In this example will your actual custom angular components inside each grid item (instead of dummy html content)
+
+HTML 
+```html
+<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
+  <div empty-content>message when grid is empty</div>
+</gridstack>
+```
+
+Code
+```ts
+import { Component } from '@angular/core';
+import { GridStack, GridStackOptions } from 'gridstack';
+import { GridstackComponent, gsCreateNgComponents, NgGridStackWidget, nodesCB } from 'gridstack/dist/ng/gridstack.component';
+
+// some custom components
+@Component({
+  selector: 'app-a',
+  template: 'Comp A', // your real ng content goes in each component instead...
+})
+export class AComponent {
+}
+
+@Component({
+  selector: 'app-b',
+  template: 'Comp B',
+})
+export class BComponent {
+}
+
+// .... in your module for example
+constructor() {
+  // register all our dynamic components created in the grid
+  GridstackComponent.addComponentToSelectorType([AComponent, BComponent]);
+  // set globally our method to create the right widget type
+  GridStack.addRemoveCB = gsCreateNgComponents;
+  GridStack.saveCB = gsSaveAdditionalNgInfo;
+}
+
+// and now our content will look like instead of dummy html content
+public gridOptions: NgGridStackOptions = {
+  margin: 5,
+  float: true,
+  minRow: 1, // make space for empty message
+  children: [ // or call load()/addWidget() with same data
+    {x:0, y:0, minW:2, type:'app-a'},
+    {x:1, y:1, type:'app-b'},
+    {x:2, y:2, content:'plain html content'},
+  ]
+}
+
+// called whenever items change size/position/etc.. see other events
+public onChange(data: nodesCB) {
+  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
+}
+```
+
+# ngFor with wrapper
+For simple case where you control the children creation (gridstack doesn't do create or re-parenting)
+
+HTML 
+```html
+<gridstack [options]="gridOptions" (changeCB)="onChange($event)">
+  <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
+    Item {{n.id}}
+  </gridstack-item>
+</gridstack>
+```
+
+Code
+```javascript
+import { GridStackOptions, GridStackWidget } from 'gridstack';
+import { nodesCB } from 'gridstack/dist/ng/gridstack.component';
+
+/** sample grid options and items to load... */
+public gridOptions: GridStackOptions = {
+  margin: 5,
+  float: true,
+}
+public items: GridStackWidget[] = [
+  {x:0, y:0, minW:2, id:'1'}, // must have unique id used for trackBy
+  {x:1, y:1, id:'2'},
+  {x:2, y:2, id:'3'},
+];
+
+// called whenever items change size/position/etc..
+public onChange(data: nodesCB) {
+  console.log('change ', data.nodes.length > 1 ? data.nodes : data.nodes[0]);
+}
+
+// ngFor unique node id to have correct match between our items used and GS
+public identify(index: number, w: GridStackWidget) {
+  return w.id; // or use index if no id is set and you only modify at the end...
+}
+```
+
+## Demo
+You can see a fuller example at [app.component.ts](https://github.com/gridstack/gridstack.js/blob/master/demo/angular/src/app/app.component.ts)
+
+to build the demo, go to demo/angular and run `yarn` + `yarn start` and Navigate to `http://localhost:4200/` 
+
+## Caveats 
+
+ - This wrapper needs: 
+    - gridstack v8.0+ to run as it needs the latest changes (use older version to match gs versions)
+    - Angular 13+ for dynamic createComponent() API
+ - Code in now shipped starting with v8.0+ in dist/ng for people to use directly!
+
+ ## *ngFor Caveats
+ - This wrapper handles well ngFor loops, but if you're using a trackBy function (as I would recommend) and no element id change after an update,
+ you must manually update the `GridstackItemComponent.option` directly - see [modifyNgFor()](./app.component.ts#L174) example.
+ - The original client list of items is not updated to match **content** changes made by gridstack (TBD later), but adding new item or removing (as shown in demo) will update those new items. Client could use change/added/removed events to sync that list if they wish to do so.
+
+
+ Would appreciate getting help doing the same for React and Vue (2 other popular frameworks)
+ 
+ -Alain

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

@@ -0,0 +1,29 @@
+/**
+ * gridstack-item.component.ts 8.0.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+import { ElementRef, ViewContainerRef, OnDestroy } from '@angular/core';
+import { GridItemHTMLElement, GridStackNode } from 'gridstack';
+/** store element to Ng Class pointer back */
+export interface GridItemCompHTMLElement extends GridItemHTMLElement {
+    _gridItemComp?: GridstackItemComponent;
+}
+/**
+ * HTML Component Wrapper for gridstack items, in combination with GridstackComponent for parent grid
+ */
+export declare class GridstackItemComponent implements OnDestroy {
+    private readonly elementRef;
+    /** container to append items dynamically */
+    container?: ViewContainerRef;
+    /** list of options for creating/updating this item */
+    set options(val: GridStackNode);
+    /** return the latest grid options (from GS once built, otherwise initial values) */
+    get options(): GridStackNode;
+    private _options?;
+    /** return the native element that contains grid specific fields as well */
+    get el(): GridItemCompHTMLElement;
+    /** clears the initial options now that we've built */
+    clearOptions(): void;
+    constructor(elementRef: ElementRef<GridItemHTMLElement>);
+    ngOnDestroy(): void;
+}

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

@@ -0,0 +1,65 @@
+/**
+ * gridstack-item.component.ts 8.0.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+import { __decorate } from "tslib";
+import { Component, Input, ViewChild, ViewContainerRef } from '@angular/core';
+/**
+ * HTML Component Wrapper for gridstack items, in combination with GridstackComponent for parent grid
+ */
+let GridstackItemComponent = class GridstackItemComponent {
+    /** list of options for creating/updating this item */
+    set options(val) {
+        if (this.el.gridstackNode?.grid) {
+            // already built, do an update...
+            this.el.gridstackNode.grid.update(this.el, val);
+        }
+        else {
+            // store our custom element in options so we can update it and not re-create a generic div!
+            this._options = { ...val, el: this.el };
+        }
+    }
+    /** return the latest grid options (from GS once built, otherwise initial values) */
+    get options() {
+        return this.el.gridstackNode || this._options || { el: this.el };
+    }
+    /** return the native element that contains grid specific fields as well */
+    get el() { return this.elementRef.nativeElement; }
+    /** clears the initial options now that we've built */
+    clearOptions() {
+        delete this._options;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.el._gridItemComp = this;
+    }
+    ngOnDestroy() {
+        delete this.el._gridItemComp;
+    }
+};
+__decorate([
+    ViewChild('container', { read: ViewContainerRef, static: true })
+], GridstackItemComponent.prototype, "container", void 0);
+__decorate([
+    Input()
+], GridstackItemComponent.prototype, "options", null);
+GridstackItemComponent = __decorate([
+    Component({
+        selector: 'gridstack-item',
+        template: `
+    <div class="grid-stack-item-content">
+      <!-- where dynamic items go based on component types, or sub-grids, etc...) -->
+      <ng-template #container></ng-template>
+      <!-- any static (defined in dom) content goes here -->
+      <ng-content></ng-content>
+      <!-- fallback HTML content from GridStackWidget content field if used instead -->
+      {{options.content}}
+    </div>`,
+        styles: [`
+    :host { display: block; }
+  `],
+        // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
+    })
+], GridstackItemComponent);
+export { GridstackItemComponent };
+//# sourceMappingURL=gridstack-item.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gridstack-item.component.js","sourceRoot":"","sources":["../../demo/angular/src/app/gridstack-item.component.ts"],"names":[],"mappings":"AAAA;;;GAGG;;AAEH,OAAO,EAAE,SAAS,EAAc,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAa,MAAM,eAAe,CAAC;AAQrG;;GAEG;AAiBH,IAAa,sBAAsB,GAAnC,MAAa,sBAAsB;IAKjC,sDAAsD;IAC7C,IAAW,OAAO,CAAC,GAAkB;QAC5C,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,EAAE;YAC/B,iCAAiC;YACjC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;SACjD;aAAM;YACL,2FAA2F;YAC3F,IAAI,CAAC,QAAQ,GAAG,EAAC,GAAG,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAC,CAAC;SACvC;IACH,CAAC;IACD,oFAAoF;IACpF,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,IAAI,EAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAC,CAAC;IACjE,CAAC;IAID,2EAA2E;IAC3E,IAAW,EAAE,KAA8B,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC;IAElF,sDAAsD;IAC/C,YAAY;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAED,YAA6B,UAA2C;QAA3C,eAAU,GAAV,UAAU,CAAiC;QACtE,IAAI,CAAC,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC;IAC/B,CAAC;IAEM,WAAW;QAChB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;IAC/B,CAAC;CACF,CAAA;AAlCyE;IAAvE,SAAS,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,IAAI,EAAC,CAAC;yDAAqC;AAG5F;IAAR,KAAK,EAAE;qDAQP;AAdU,sBAAsB;IAhBlC,SAAS,CAAC;QACT,QAAQ,EAAE,gBAAgB;QAC1B,QAAQ,EAAE;;;;;;;;WAQD;QACT,MAAM,EAAE,CAAC;;GAER,CAAC;QACF,mIAAmI;KACpI,CAAC;GACW,sBAAsB,CAqClC;SArCY,sBAAsB"}

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

@@ -0,0 +1,118 @@
+/**
+ * gridstack.component.ts 8.0.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, Type, ViewContainerRef } from '@angular/core';
+import { GridHTMLElement, GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions, GridStackWidget } from 'gridstack';
+import { GridstackItemComponent } from './gridstack-item.component';
+/** events handlers emitters signature for different events */
+export type eventCB = {
+    event: Event;
+};
+export type elementCB = {
+    event: Event;
+    el: GridItemHTMLElement;
+};
+export type nodesCB = {
+    event: Event;
+    nodes: GridStackNode[];
+};
+export type droppedCB = {
+    event: Event;
+    previousNode: GridStackNode;
+    newNode: GridStackNode;
+};
+/** extends to store Ng Component selector, instead/inAddition to content */
+export interface NgGridStackWidget extends GridStackWidget {
+    type?: string;
+}
+export interface NgGridStackNode extends GridStackNode {
+    type?: string;
+}
+export interface NgGridStackOptions extends GridStackOptions {
+    children?: NgGridStackWidget[];
+    subGridOpts?: NgGridStackOptions;
+}
+/** store element to Ng Class pointer back */
+export interface GridCompHTMLElement extends GridHTMLElement {
+    _gridComp?: GridstackComponent;
+}
+/** selector string to runtime Type mapping */
+export type SelectorToType = {
+    [key: string]: Type<Object>;
+};
+/**
+ * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
+ */
+export declare class GridstackComponent implements OnInit, AfterContentInit, OnDestroy {
+    private readonly elementRef;
+    /** track list of TEMPLATE grid items so we can sync between DOM and GS internals */
+    gridstackItems?: QueryList<GridstackItemComponent>;
+    /** container to append items dynamically */
+    container?: ViewContainerRef;
+    /** initial options for creation of the grid */
+    set options(val: GridStackOptions);
+    /** return the current running options */
+    get options(): GridStackOptions;
+    /** true while ng-content with 'no-item-content' should be shown when last item is removed from a grid */
+    isEmpty?: boolean;
+    /** individual list of GridStackEvent callbacks handlers as output
+     * otherwise use this.grid.on('name1 name2 name3', callback) to handle multiple at once
+     * see https://github.com/gridstack/gridstack.js/blob/master/demo/events.js#L4
+     *
+     * Note: camel casing and 'CB' added at the end to prevent @angular-eslint/no-output-native
+     * eg: 'change' would trigger the raw CustomEvent so use different name.
+     */
+    addedCB: EventEmitter<nodesCB>;
+    changeCB: EventEmitter<nodesCB>;
+    disableCB: EventEmitter<eventCB>;
+    dragCB: EventEmitter<elementCB>;
+    dragStartCB: EventEmitter<elementCB>;
+    dragStopCB: EventEmitter<elementCB>;
+    droppedCB: EventEmitter<droppedCB>;
+    enableCB: EventEmitter<eventCB>;
+    removedCB: EventEmitter<nodesCB>;
+    resizeCB: EventEmitter<elementCB>;
+    resizeStartCB: EventEmitter<elementCB>;
+    resizeStopCB: EventEmitter<elementCB>;
+    /** return the native element that contains grid specific fields as well */
+    get el(): GridCompHTMLElement;
+    /** return the GridStack class */
+    get grid(): GridStack | undefined;
+    /**
+     * stores the selector -> Type mapping, so we can create items dynamically from a string.
+     * Unfortunately Ng doesn't provide public access to that mapping.
+     */
+    static selectorToType: SelectorToType;
+    /** add a list of ng Component to be mapped to selector */
+    static addComponentToSelectorType(typeList: Array<Type<Object>>): void;
+    /** return the ng Component selector */
+    static getSelector(type: Type<Object>): string;
+    private _options?;
+    private _grid?;
+    private loaded?;
+    private ngUnsubscribe;
+    constructor(elementRef: ElementRef<GridCompHTMLElement>);
+    ngOnInit(): void;
+    /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * called when the TEMPLATE list of items changes - get a list of nodes and
+     * update the layout accordingly (which will take care of adding/removing items changed by Angular)
+     */
+    updateAll(): void;
+    /** check if the grid is empty, if so show alternative content */
+    checkEmpty(): void;
+    /** get all known events as easy to use Outputs for convenience */
+    private hookEvents;
+}
+/**
+ * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
+ **/
+export declare function gsCreateNgComponents(host: GridCompHTMLElement | HTMLElement, w: NgGridStackWidget | GridStackOptions, add: boolean, isGrid: boolean): HTMLElement | undefined;
+/**
+ * can be used when saving the grid - make sure we save the content from the field (not HTML as we get ng markups)
+ * and can put the extra info of type, otherwise content
+ */
+export declare function gsSaveAdditionalNgInfo(n: NgGridStackNode, w: NgGridStackWidget): void;

package/dist/ng/gridstack.component.js

@@ -0,0 +1,245 @@
+/**
+ * gridstack.component.ts 8.0.0
+ * Copyright (c) 2022 Alain Dumesny - see GridStack root license
+ */
+var GridstackComponent_1;
+import { __decorate } from "tslib";
+import { Component, ContentChildren, EventEmitter, Input, Output, ViewChild, ViewContainerRef, reflectComponentType } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { GridStack } from 'gridstack';
+import { GridstackItemComponent } from './gridstack-item.component';
+/**
+ * HTML Component Wrapper for gridstack, in combination with GridstackItemComponent for the items
+ */
+let GridstackComponent = GridstackComponent_1 = class GridstackComponent {
+    /** initial options for creation of the grid */
+    set options(val) { this._options = val; }
+    /** return the current running options */
+    get options() { return this._grid?.opts || this._options || {}; }
+    /** return the native element that contains grid specific fields as well */
+    get el() { return this.elementRef.nativeElement; }
+    /** return the GridStack class */
+    get grid() { return this._grid; }
+    /**
+     * stores the selector -> Type mapping, so we can create items dynamically from a string.
+     * Unfortunately Ng doesn't provide public access to that mapping.
+     */
+    static { this.selectorToType = {}; }
+    /** add a list of ng Component to be mapped to selector */
+    static addComponentToSelectorType(typeList) {
+        typeList.forEach(type => GridstackComponent_1.selectorToType[GridstackComponent_1.getSelector(type)] = type);
+    }
+    /** return the ng Component selector */
+    static getSelector(type) {
+        const mirror = reflectComponentType(type);
+        return mirror.selector;
+    }
+    constructor(
+    // private readonly zone: NgZone,
+    // private readonly cd: ChangeDetectorRef,
+    elementRef) {
+        this.elementRef = elementRef;
+        /** individual list of GridStackEvent callbacks handlers as output
+         * otherwise use this.grid.on('name1 name2 name3', callback) to handle multiple at once
+         * see https://github.com/gridstack/gridstack.js/blob/master/demo/events.js#L4
+         *
+         * Note: camel casing and 'CB' added at the end to prevent @angular-eslint/no-output-native
+         * eg: 'change' would trigger the raw CustomEvent so use different name.
+         */
+        this.addedCB = new EventEmitter();
+        this.changeCB = new EventEmitter();
+        this.disableCB = new EventEmitter();
+        this.dragCB = new EventEmitter();
+        this.dragStartCB = new EventEmitter();
+        this.dragStopCB = new EventEmitter();
+        this.droppedCB = new EventEmitter();
+        this.enableCB = new EventEmitter();
+        this.removedCB = new EventEmitter();
+        this.resizeCB = new EventEmitter();
+        this.resizeStartCB = new EventEmitter();
+        this.resizeStopCB = new EventEmitter();
+        this.ngUnsubscribe = new Subject();
+        this.el._gridComp = this;
+    }
+    ngOnInit() {
+        // init ourself before any template children are created since we track them below anyway - no need to double create+update widgets
+        this.loaded = !!this.options?.children?.length;
+        this._grid = GridStack.init(this._options, this.el);
+        delete this._options; // GS has it now
+        this.checkEmpty();
+    }
+    /** wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first) */
+    ngAfterContentInit() {
+        // track whenever the children list changes and update the layout...
+        this.gridstackItems?.changes
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => this.updateAll());
+        // ...and do this once at least unless we loaded children already
+        if (!this.loaded)
+            this.updateAll();
+        this.hookEvents(this.grid);
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+        this.grid?.destroy();
+        delete this._grid;
+        delete this.el._gridComp;
+    }
+    /**
+     * called when the TEMPLATE list of items changes - get a list of nodes and
+     * update the layout accordingly (which will take care of adding/removing items changed by Angular)
+     */
+    updateAll() {
+        if (!this.grid)
+            return;
+        const layout = [];
+        this.gridstackItems?.forEach(item => {
+            layout.push(item.options);
+            item.clearOptions();
+        });
+        this.grid.load(layout); // efficient that does diffs only
+    }
+    /** check if the grid is empty, if so show alternative content */
+    checkEmpty() {
+        if (!this.grid)
+            return;
+        const isEmpty = !this.grid.engine.nodes.length;
+        if (isEmpty === this.isEmpty)
+            return;
+        this.isEmpty = isEmpty;
+        // this.cd.detectChanges();
+    }
+    /** get all known events as easy to use Outputs for convenience */
+    hookEvents(grid) {
+        if (!grid)
+            return;
+        grid
+            .on('added', (event, nodes) => { this.checkEmpty(); this.addedCB.emit({ event, nodes }); })
+            .on('change', (event, nodes) => this.changeCB.emit({ event, nodes }))
+            .on('disable', (event) => this.disableCB.emit({ event }))
+            .on('drag', (event, el) => this.dragCB.emit({ event, el }))
+            .on('dragstart', (event, el) => this.dragStartCB.emit({ event, el }))
+            .on('dragstop', (event, el) => this.dragStopCB.emit({ event, el }))
+            .on('dropped', (event, previousNode, newNode) => this.droppedCB.emit({ event, previousNode, newNode }))
+            .on('enable', (event) => this.enableCB.emit({ event }))
+            .on('removed', (event, nodes) => { this.checkEmpty(); this.removedCB.emit({ event, nodes }); })
+            .on('resize', (event, el) => this.resizeCB.emit({ event, el }))
+            .on('resizestart', (event, el) => this.resizeStartCB.emit({ event, el }))
+            .on('resizestop', (event, el) => this.resizeStopCB.emit({ event, el }));
+    }
+};
+__decorate([
+    ContentChildren(GridstackItemComponent)
+], GridstackComponent.prototype, "gridstackItems", void 0);
+__decorate([
+    ViewChild('container', { read: ViewContainerRef, static: true })
+], GridstackComponent.prototype, "container", void 0);
+__decorate([
+    Input()
+], GridstackComponent.prototype, "options", null);
+__decorate([
+    Input()
+], GridstackComponent.prototype, "isEmpty", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "addedCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "changeCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "disableCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "dragCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "dragStartCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "dragStopCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "droppedCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "enableCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "removedCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "resizeCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "resizeStartCB", void 0);
+__decorate([
+    Output()
+], GridstackComponent.prototype, "resizeStopCB", void 0);
+GridstackComponent = GridstackComponent_1 = __decorate([
+    Component({
+        selector: 'gridstack',
+        template: `
+    <!-- content to show when when grid is empty, like instructions on how to add widgets -->
+    <ng-content select="[empty-content]" *ngIf="isEmpty"></ng-content>
+    <!-- where dynamic items go -->
+    <ng-template #container></ng-template>
+    <!-- where template items go -->
+    <ng-content></ng-content>
+  `,
+        styles: [`
+    :host { display: block; }
+  `],
+        // changeDetection: ChangeDetectionStrategy.OnPush, // IFF you want to optimize and control when ChangeDetection needs to happen...
+    })
+], GridstackComponent);
+export { GridstackComponent };
+/**
+ * can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
+ **/
+export function gsCreateNgComponents(host, w, add, isGrid) {
+    // only care about creating ng components here...
+    if (!add || !host)
+        return;
+    // create the component dynamically - see https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
+    if (isGrid) {
+        let grid;
+        const gridItemComp = host.parentElement?._gridItemComp;
+        if (gridItemComp) {
+            grid = gridItemComp.container?.createComponent(GridstackComponent)?.instance;
+        }
+        else {
+            // TODO: figure out how to create ng component inside regular Div. need to access app injectors...
+            // const hostElement: Element = host;
+            // const environmentInjector: EnvironmentInjector;
+            // grid = createComponent(GridstackComponent, {environmentInjector, hostElement})?.instance;
+        }
+        if (grid)
+            grid.options = w;
+        return grid?.el;
+    }
+    else {
+        const gridComp = host._gridComp;
+        const gridItem = gridComp?.container?.createComponent(GridstackItemComponent)?.instance;
+        // IFF we're not a subGrid, define what type of component to create as child, OR you can do it GridstackItemComponent template, but this is more generic
+        const selector = w.type;
+        const type = selector ? GridstackComponent.selectorToType[selector] : undefined;
+        if (!w.subGridOpts && type) {
+            gridItem?.container?.createComponent(type);
+        }
+        return gridItem?.el;
+    }
+}
+/**
+ * can be used when saving the grid - make sure we save the content from the field (not HTML as we get ng markups)
+ * and can put the extra info of type, otherwise content
+ */
+export function gsSaveAdditionalNgInfo(n, w) {
+    if (n.type)
+        w.type = n.type;
+    else if (n.content)
+        w.content = n.content;
+}
+//# sourceMappingURL=gridstack.component.js.map

package/dist/ng/gridstack.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridstack.component.js","sourceRoot":"","sources":["../../demo/angular/src/app/gridstack.component.ts"],"names":[],"mappings":"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"}