Merge pull request #1545 from ghiscoding/chore/jsdom26

chore: upgrade JSDOM & other testing tools to latest

Author: ghiscoding

package.json

@@ -93,9 +93,9 @@
     "@formkit/tempo": "^0.1.2",
     "@ng-select/ng-select": "^13.9.1",
     "@ngx-translate/http-loader": "^8.0.0",
-    "@nx/angular": "^20.6.1",
-    "@nx/devkit": "^20.6.1",
-    "@nx/vite": "^20.6.1",
+    "@nx/angular": "^20.6.2",
+    "@nx/devkit": "^20.6.2",
+    "@nx/vite": "^20.6.2",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.0",
     "@slickgrid-universal/composite-editor-component": "~5.13.1",
@@ -117,7 +117,7 @@
     "eslint": "^9.22.0",
     "eslint-plugin-cypress": "^4.2.0",
     "eslint-plugin-n": "^17.16.2",
-    "jsdom": "^22.1.0",
+    "jsdom": "^26.0.0",
     "native-copyfiles": "^0.3.2",
     "ng-packagr": "^18.2.1",
     "ngx-bootstrap": "^18.1.3",
@@ -135,7 +135,7 @@
     "typescript": "~5.5.4",
     "typescript-eslint": "^8.26.1",
     "vite": "^6.2.2",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.9",
     "zone.js": "~0.15.0"
   },

src/app/app.component.scss

@@ -11,10 +11,10 @@ $side-menu-width: 250px;
   color: red;
 }
 .faded {
-    opacity: 0.7;
+  opacity: 0.7;
 }
 .faded:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 section {
@@ -24,7 +24,7 @@ section {
 /** Sidebar (left) and Content (right) */
 @media (min-width: 1200px) {
   .panel-wm-content .container {
-      width: calc(1170px - #{$side-menu-width});
+    width: calc(1170px - #{$side-menu-width});
   }
 }
 

src/app/examples/grid-graphql-nopage.component.html

@@ -34,6 +34,12 @@ <h2>
     </div>
   </div>
 
-  <angular-slickgrid gridId="grid27" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions" [dataset]="dataset">
+  <angular-slickgrid
+    gridId="grid27"
+    [columnDefinitions]="columnDefinitions"
+    [gridOptions]="gridOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+  >
   </angular-slickgrid>
 </div>

src/app/examples/grid-graphql-nopage.component.ts

@@ -64,6 +64,10 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit {
 
   constructor(private http: HttpClient) {}
 
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
   ngOnInit(): void {
     this.columnDefinitions = [
       { id: 'countryCode', field: 'code', name: 'Code', maxWidth: 90, sortable: true, filterable: true, columnGroup: 'Country' },

src/styles.scss

@@ -1,10 +1,6 @@
 @use 'sass:color';
 
-$navbar-height: 56px;
-$side-menu-width: 250px;
-$button-border-color: #ababab;
-$button-style-bg-color: #fff;
-$primary-color: #0e6cfa;
+$primary-color: #0d6efd;
 
 @use 'bootstrap/scss/bootstrap' with (
   $primary: $primary-color
@@ -27,32 +23,17 @@ $primary-color: #0e6cfa;
   //   --slick-button-border-color: #c7c7c7;
 }
 
-.bold {
-  font-weight: bold;
-}
+$button-border-color: #ababab;
+$button-style-bg-color: #fff;
 
 .italic {
   font-style: italic;
 }
 
-.font18 {
-  font-size: 18px;
-}
-
 .hidden {
   display: none;
 }
 
-.btn-icon {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.gap-4px {
-  gap: 4px;
-}
-
 .btn-group-xs > .btn,
 .btn-xs {
   padding: 1px 5px;
@@ -65,99 +46,62 @@ $primary-color: #0e6cfa;
   vertical-align: middle;
 }
 
-.mdi-pencil.pointer:hover {
-  color: #00bfff;
-}
-.mdi-trash-can.pointer:hover {
-  color: #ff002b;
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
-.body-content {
-  margin-top: $navbar-height;
+.gap-4px {
+  gap: 4px;
 }
 
-.lightblue {
-  color: lightblue;
-}
+.side-menu {
+  margin-left: 15px;
 
-.red {
-  color: red;
+  .links {
+    background-color: #f9f9f9;
+    border-right: 1px solid #d0d0d0;
+    overflow-y: auto;
+    padding: 10px;
+    li {
+      width: 100%;
+    }
+  }
 }
 
 .subtitle {
-  font-size: 0.875em;
+  font-size: 15px;
   font-style: italic;
   color: grey;
   margin-bottom: 10px;
 }
-
+.lightblue {
+  color: lightblue;
+}
+.red {
+  color: red;
+}
 .faded {
   opacity: 0.7;
 }
-
 .faded:hover {
-  opacity: 0.9;
+  opacity: 1;
 }
-
-section {
-  margin: 0;
+.pointer {
+  cursor: pointer !important;
 }
-
-/** Sidebar (left) and Content (right) */
-@media (min-width: 1200px) {
-  .panel-wm-content .container {
-    width: calc(1170px - #{$side-menu-width});
-  }
+.padding10 {
+  padding: 10px !important;
 }
-
-.nav-docs {
-  background-color: #fff;
-  border-bottom: 1px solid #d6d6d6;
+.text-danger {
+  color: red !important;
 }
-
-.panel-wm {
-  padding: #{$navbar-height} 0 0 0;
-
-  .nav-stacked {
-    padding-bottom: 30px;
-
-    .nav-item {
-      width: 100%;
-    }
-  }
-
-  .nav > li > a {
-    padding: 10px 15px;
-    border-radius: 0;
-  }
-
-  .panel-wm-content {
-    margin-left: $side-menu-width;
-    padding: 0 1rem;
-  }
-
-  .panel-wm-left {
-    position: fixed;
-    z-index: 400;
-    transition: left 0.15s;
-    top: $navbar-height;
-    bottom: 0;
-    left: 0;
-    background-color: #f5f5f5;
-    transform: translate3d(0, 0, 0);
-    border-right: 1px solid #d0d0d0;
-    overflow-y: auto;
-    width: $side-menu-width;
-  }
+.mdi-pencil.pointer:hover {
+  color: #00bfff;
 }
-
-.navbar {
-  .navbar-brand {
-    margin-right: 0px;
-  }
-  .logo {
-    margin: 0 8px;
-  }
+.mdi-trash-can.pointer:hover {
+  color: #ff002b;
 }
 
 .github-button-container {
@@ -190,7 +134,11 @@ section {
   background-color: #fff;
   /* the height is 100% minus the 2 navbars */
   height: calc(100vh - 56px);
-  padding: 0 10px;
+  padding: 0 20px;
+
+  #demo-container {
+    padding-bottom: 15px;
+  }
 
   h3 {
     color: #333;