chore: rollback changes to hopefully pass Cypress tests

Author: ghiscoding

src/app/examples/grid-composite-editor.component.html

@@ -15,7 +15,7 @@ <h2>
       class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
       type="button"
       data-test="toggle-subtitle"
-      (click)="hideSubTitle = !hideSubTitle"
+      (click)="toggleSubTitle()"
     >
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
@@ -24,7 +24,7 @@ <h2>
       <span>Toggle Dark Mode</span>
     </button>
   </h2>
-  <div class="subtitle" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
 
   <div class="mb-2">
     <div class="btn-group btn-group-sm" role="group" aria-label="Basic Editing Commands">

src/app/examples/grid-composite-editor.component.ts

@@ -1072,4 +1072,11 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
           <span class="autocomplete-bottom-right">Type: <b>${item.itemTypeName === 'I' ? 'Item' : item.itemTypeName === 'C' ? 'PdCat' : 'Cat'}</b></span>
         </div>`;
   }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(2);
+  }
 }

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

@@ -14,13 +14,13 @@ <h2>
       class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
       type="button"
       data-test="toggle-subtitle"
-      (click)="hideSubTitle = !hideSubTitle"
+      (click)="toggleSubTitle()"
     >
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
   </h2>
   <div class="subtitle row">
-    <div class="col-12" [hidden]="hideSubTitle" [innerHTML]="subTitle"></div>
+    <div class="col-12" [innerHTML]="subTitle"></div>
   </div>
 
   <div class="row">
@@ -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' },
@@ -288,4 +292,11 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit {
     const languageQuery = `query { languages { code, name, native  }}`;
     return this.http.post<GraphqlResult<{ code: string; name: string; native: string }>>(COUNTRIES_API, { query: languageQuery });
   }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(2);
+  }
 }