fix(grid): Replace large theme.css with angular.json bundled alternate theme; add OnDestroy cleanup

Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular/sessions/12bdcdf6-0c85-490e-b44e-497f597e2474

Co-authored-by: MayaKirova <10397980+MayaKirova@users.noreply.github.com>

Author: Copilot

angular.json

@@ -22,21 +22,21 @@
             },
             "index": "src/index.html",
             "polyfills": [
-                "zone.js"
+              "zone.js"
             ],
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/web.config",
-              {
-                "glob": "theme.css",
-                "input": "src/app/grid-cellMerging",
-                "output": "assets/grid-cellMerging"
-              }
+              "src/web.config"
             ],
             "styles": [
-              "src/styles/styles.scss"
+              "src/styles/styles.scss",
+              {
+                "input": "src/styles/grid-cell-merging-alternate-theme.scss",
+                "bundleName": "grid-cell-merging-alternate-theme",
+                "inject": false
+              }
             ],
             "scripts": [],
             "extractLicenses": false,
@@ -211,8 +211,8 @@
             "tsConfig": "projects/igniteui-angular/tsconfig.spec.json",
             "karmaConfig": "projects/igniteui-angular/karma.conf.js",
             "exclude": [
-                "migrations",
-                "schematics"
+              "migrations",
+              "schematics"
             ]
           }
         },
@@ -297,11 +297,19 @@
               "projects/igniteui-angular-elements/src/styles.scss"
             ],
             "scripts": [
-                { "input": "./node_modules/lit-html/lit-html.js", "inject": false },
-                { "input": "./node_modules/lit-html/development/directive.js", "inject": false }
+              {
+                "input": "./node_modules/lit-html/lit-html.js",
+                "inject": false
+              },
+              {
+                "input": "./node_modules/lit-html/development/directive.js",
+                "inject": false
+              }
             ],
             "stylePreprocessorOptions": {
-                "includePaths": ["node_modules"]
+              "includePaths": [
+                "node_modules"
+              ]
             },
             "browser": "projects/igniteui-angular-elements/src/main.ts"
           },
@@ -333,7 +341,10 @@
               ],
               "outputHashing": "none",
               "optimization": true,
-              "externalDependencies": ["lit", "igniteui-i18n-core"]
+              "externalDependencies": [
+                "lit",
+                "igniteui-i18n-core"
+              ]
             },
             "development": {
               "optimization": false,
@@ -342,8 +353,8 @@
               "namedChunks": true
             },
             "dev-app": {
-                "browser": "projects/igniteui-angular-elements/src/main.app.ts",
-                "tsConfig": "projects/igniteui-angular-elements/tsconfig.app.json"
+              "browser": "projects/igniteui-angular-elements/src/main.app.ts",
+              "tsConfig": "projects/igniteui-angular-elements/tsconfig.app.json"
             }
           },
           "defaultConfiguration": "production"
@@ -370,7 +381,7 @@
           "builder": "@angular/build:karma",
           "options": {
             "main": "projects/igniteui-angular-elements/src/test.ts",
-            "polyfills":  [
+            "polyfills": [
               "projects/igniteui-angular-elements/src/polyfills.ts"
             ],
             "tsConfig": "projects/igniteui-angular-elements/tsconfig.spec.json",
@@ -384,7 +395,9 @@
               "projects/igniteui-angular-elements/src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-                "includePaths": ["node_modules"]
+              "includePaths": [
+                "node_modules"
+              ]
             },
             "scripts": []
           }
@@ -523,7 +536,9 @@
               "projects/igniteui-angular-performance/src/styles.scss"
             ],
             "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
+              "includePaths": [
+                "node_modules"
+              ]
             }
           },
           "configurations": {

projects/igniteui-angular/core/src/core/styles/components/grid/_grid-theme.scss

@@ -1372,7 +1372,8 @@
     }
 
     %igx-grid__tr--merged {
-        border-block-end: 0 !important;
+        border-bottom: 0;
+        border-block-end: 0;
     }
 
     %igx-grid__tr--merged-top {

src/app/grid-cellMerging/grid-cellMerging.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, inject, signal } from '@angular/core';
+import { Component, OnDestroy, ViewChild, inject, signal } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import {
@@ -57,9 +57,10 @@ import { INVOICE_DATA } from '../shared/invoiceData';
         IgxIconButtonDirective
     ]
 })
-export class GridCellMergingComponent {
+export class GridCellMergingComponent implements OnDestroy {
     private readonly document = inject(DOCUMENT);
     public themeLoaded = signal(false);
+    private readonly THEME_LINK_ID = 'grid-cell-merging-alternate-theme';
     public hierarchicalData = HIERARCHICAL_DATA.concat(HIERARCHICAL_DATA).concat(HIERARCHICAL_DATA);
     public treeData = HIERARCHICAL_SAMPLE_DATA;
     public treeGridMergeStrategy =  new ByLevelTreeGridMergeStrategy();
@@ -80,17 +81,20 @@ export class GridCellMergingComponent {
         this.data = allData;
     }
 
+    public ngOnDestroy(): void {
+        this.document.getElementById(this.THEME_LINK_ID)?.remove();
+    }
+
     public toggleTheme(): void {
-        const id = 'grid-cell-merging-theme';
-        const existing = this.document.getElementById(id);
+        const existing = this.document.getElementById(this.THEME_LINK_ID);
         if (existing) {
             existing.remove();
             this.themeLoaded.set(false);
         } else {
             const link = this.document.createElement('link');
             link.rel = 'stylesheet';
-            link.href = 'assets/grid-cellMerging/theme.css';
-            link.id = id;
+            link.href = 'grid-cell-merging-alternate-theme.css';
+            link.id = this.THEME_LINK_ID;
             this.document.head.appendChild(link);
             this.themeLoaded.set(true);
         }