package fixes

Gruntfile.js

@@ -38,7 +38,6 @@ module.exports = function(grunt) {
     copy: {
       dist: {
         files: {
-          'dist/src/gridstack.scss': ['src/gridstack.scss'],
           'dist/angular/README.md': ['angular/README.md'],
           'dist/angular/src/gridstack.component.ts': ['angular/projects/lib/src/lib/gridstack.component.ts'],
           'dist/angular/src/gridstack-item.component.ts': ['angular/projects/lib/src/lib/gridstack-item.component.ts'],

angular/package.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser": "^14",
     "@angular/platform-browser-dynamic": "^14",
     "@angular/router": "^14",
-    "gridstack": "^12.3.3-dev",
+    "gridstack": "12.3.3",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

angular/yarn.lock

@@ -3752,7 +3752,7 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4,
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
-gridstack@^12.3.3-dev:
+gridstack@12.3.3:
   version "12.3.3"
   resolved "https://registry.yarnpkg.com/gridstack/-/gridstack-12.3.3.tgz#0c4fc3cdf6e1c16e6095bc79ff7240a590d2c200"
   integrity sha512-Bboi4gj7HXGnx1VFXQNde4Nwi5srdUSuCCnOSszKhFjBs8EtMEWhsKX02BjIKkErq/FjQUkNUbXUYeQaVMQ0jQ==

react/package.json

@@ -13,7 +13,7 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "gridstack": "^12.3.3-dev",
+    "gridstack": "^12.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-fast-compare": "^3.2.2",

src/gridstack.scss

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