Merge pull request #438 from IgniteUI/vnext

Updating master from vnext

Author: ChronosSF

.github/workflows/build.yml

@@ -0,0 +1,67 @@
+name: Build
+
+# This workflow is meant to run on changes pushed to the vnext branch only.
+# If it runs on PRs, it will create PRs to the destination repos' vnext branches - we don't want that.
+on:
+  push:
+    branches:
+      - vnext
+      - master
+  workflow_dispatch:
+    inputs:
+      isVerbose:
+        description: 'Get verbose output from steps - where configurable'
+        required: false
+        type: boolean
+        default: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          clean: true
+          persist-credentials: true
+          path: igniteui-angular-examples
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.19.0'
+      
+      - name: Install npm dependencies
+        run: npm install
+        working-directory: ./igniteui-angular-examples/browser
+      
+      - name: Apply very special configuration
+        shell: bash
+        run: |
+          echo "Current directory: $(pwd)"
+          sed -i 's/build --configuration production/build --configuration production --base-href=\/angular-demos-dv\//g' package.json
+        working-directory: ./igniteui-angular-examples/browser
+      
+      - name: Build project
+        run: |
+          if [ "${{ github.event.inputs.isVerbose }}" == "true" ]; then
+            npm run build --verbose
+          else
+            npm run build
+          fi
+        working-directory: ./igniteui-angular-examples/browser
+      
+      - name: Copy web.config to dist
+        run: |
+          cp web.config dist/browser/
+        working-directory: ./igniteui-angular-examples/browser
+      
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: ./igniteui-angular-examples/browser/dist/browser
+          retention-days: 1

browser/.browserslistrc

@@ -8,4 +8,4 @@
 last 2 Chrome versions
 last 2 Firefox versions
 last 2 Edge versions
-Safari >= 16
+Safari >= 17

browser/build-output.txt

@@ -24,36 +24,35 @@
     "@lit/reactive-element": "desired-version"
   },
   "dependencies": {
-    "@angular/animations": "20.0.1",
-    "@angular/common": "20.0.1",
-    "@angular/compiler": "20.0.1",
-    "@angular/core": "20.0.1",
-    "@angular/forms": "20.0.1",
-    "@angular/platform-browser": "20.0.1",
-    "@angular/platform-browser-dynamic": "20.0.1",
-    "@angular/router": "20.0.1",
+    "@angular/animations": "21.1.1",
+    "@angular/common": "21.1.1",
+    "@angular/compiler": "21.1.1",
+    "@angular/core": "21.1.1",
+    "@angular/forms": "21.1.1",
+    "@angular/platform-browser": "21.1.1",
+    "@angular/platform-browser-dynamic": "21.1.1",
+    "@angular/router": "21.1.1",
     "@ionic/angular": "5.6.3",
     "@types/file-saver": "2.0.5",
-    "@types/hammerjs": "2.0.40",
-    "ajv": "8.6.2",
-    "angular-in-memory-web-api": "0.20.0",
+    "@types/hammerjs": "2.0.46",
+    "ajv": "8.17.1",
+    "angular-in-memory-web-api": "0.21.0",
     "classlist.js": "1.1.20150312",
     "core-js": "3.21.0",
     "file-saver": "2.0.5",
     "hammerjs": "2.0.8",
-    "igniteui-angular": "20.1.0-rc.2",
-    "igniteui-angular-charts": "20.2.1",
-    "igniteui-angular-core": "20.2.1",
-    "igniteui-angular-dashboards": "20.2.1",
-    "igniteui-angular-data-grids": "20.2.1",
-    "igniteui-angular-excel": "20.2.1",
-    "igniteui-angular-gauges": "20.2.1",
-    "igniteui-angular-inputs": "20.2.1",
-    "igniteui-angular-layouts": "20.2.1",
-    "igniteui-angular-maps": "20.2.1",
-    "igniteui-angular-spreadsheet": "20.2.1",
-    "igniteui-angular-spreadsheet-chart-adapter": "20.2.1",
-    "igniteui-theming": "20.0.0",
+    "igniteui-angular": "21.0.8",
+    "igniteui-angular-charts": "21.0.0",
+    "igniteui-angular-core": "21.0.0",
+    "igniteui-angular-dashboards": "21.0.0",
+    "igniteui-angular-data-grids": "21.0.0",
+    "igniteui-angular-excel": "21.0.0",
+    "igniteui-angular-gauges": "21.0.0",
+    "igniteui-angular-inputs": "21.0.0",
+    "igniteui-angular-layouts": "21.0.0",
+    "igniteui-angular-maps": "21.0.0",
+    "igniteui-angular-spreadsheet": "21.0.0",
+    "igniteui-angular-spreadsheet-chart-adapter": "21.0.0",
     "igniteui-webcomponents": "6.3.1",
     "immediate": "3.2.3",
     "intl": "1.2.5",
@@ -67,10 +66,10 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "20.0.1",
-    "@angular/cli": "20.0.1",
-    "@angular/compiler-cli": "20.0.1",
-    "@angular/language-service": "20.0.1",
+    "@angular-devkit/build-angular": "21.1.1",
+    "@angular/cli": "21.1.1",
+    "@angular/compiler-cli": "21.1.1",
+    "@angular/language-service": "21.1.1",
     "@types/jasmine": "3.10.2",
     "@types/jasminewd2": "2.0.9",
     "@types/node": "18.17.0",
@@ -85,16 +84,16 @@
     "gulp-flatten": "0.4.0",
     "jasmine-core": "5.1.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "6.3.7",
+    "karma": "6.4.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~2.0.0",
     "karma-coverage-istanbul-reporter": "2.1.1",
     "karma-jasmine": "~3.3.0",
     "karma-jasmine-html-reporter": "1.6.0",
-    "protractor": "~7.0.0",
+    "sass": "1.69.5",
     "sass.js": "0.11.1",
     "ts-node": "10.9.1",
     "tslint": "~6.1.3",
-    "typescript": "5.8.3"
+    "typescript": "5.9.3"
   }
 }

browser/package.json

@@ -1214,30 +1214,29 @@ function updateIG(cb) {
     // { version: "14.1.0",  name:               "igniteui-angular-charts" },  // NPM
     let packageUpgrades = [
         // these IG packages are often updated:
-        { version: "20.2.1", name: "igniteui-angular-core" },
-        { version: "20.2.1", name: "igniteui-angular-charts" },
-        { version: "20.2.1", name: "igniteui-angular-excel" },
-        { version: "20.2.1", name: "igniteui-angular-gauges" },
-        { version: "20.2.1", name: "igniteui-angular-data-grids" },
-        { version: "20.2.1", name: "igniteui-angular-inputs" },
-        { version: "20.2.1", name: "igniteui-angular-layouts" },
-        { version: "20.2.1", name: "igniteui-angular-maps" },
-        { version: "20.2.1", name: "igniteui-angular-spreadsheet-chart-adapter"  },
-        { version: "20.2.1", name: "igniteui-angular-spreadsheet" },
-        { version: "20.2.1", name: "igniteui-angular-datasources" },
-        { version: "20.2.1", name: "igniteui-angular-dashboards" },
+        { version: "21.0.0", name: "igniteui-angular-core" },
+        { version: "21.0.0", name: "igniteui-angular-charts" },
+        { version: "21.0.0", name: "igniteui-angular-excel" },
+        { version: "21.0.0", name: "igniteui-angular-gauges" },
+        { version: "21.0.0", name: "igniteui-angular-data-grids" },
+        { version: "21.0.0", name: "igniteui-angular-inputs" },
+        { version: "21.0.0", name: "igniteui-angular-layouts" },
+        { version: "21.0.0", name: "igniteui-angular-maps" },
+        { version: "21.0.0", name: "igniteui-angular-spreadsheet-chart-adapter"  },
+        { version: "21.0.0", name: "igniteui-angular-spreadsheet" },
+        { version: "21.0.0", name: "igniteui-angular-datasources" },
+        { version: "21.0.0", name: "igniteui-angular-dashboards" },
         // these IG packages are sometimes updated:
         { version: "6.3.1" , name: "igniteui-webcomponents" },
-        { version: "20.0.0", name: "igniteui-theming" },
-        { version: "20.1.0-rc.2", name: "igniteui-angular" },
-        { version: "20.0.1", name: "@angular/animations" },
-        { version: "20.0.1", name: "@angular/common" },
-        { version: "20.0.1", name: "@angular/compiler" },
-        { version: "20.0.1", name: "@angular/core" },
-        { version: "20.0.1", name: "@angular/forms" },
-        { version: "20.0.1", name: "@angular/platform-browser" },
-        { version: "20.0.1", name: "@angular/platform-browser-dynamic" },
-        { version: "2.0.40", name: "@types/hammerjs" },
+        { version: "21.0.8", name: "igniteui-angular" },
+        { version: "21.1.1", name: "@angular/animations" },
+        { version: "21.1.1", name: "@angular/common" },
+        { version: "21.1.1", name: "@angular/compiler" },
+        { version: "21.1.1", name: "@angular/core" },
+        { version: "21.1.1", name: "@angular/forms" },
+        { version: "21.1.1", name: "@angular/platform-browser" },
+        { version: "21.1.1", name: "@angular/platform-browser-dynamic" },
+        { version: "2.0.46", name: "@types/hammerjs" },
         { version: "1.1.20150312", name: "classlist-js" },
         { version: "3.21.0" , name: "core-js" },
         { version: "2.0.8"  , name: "hammerjs" },
@@ -1248,18 +1247,18 @@ function updateIG(cb) {
         { version: "2.3.2"  , name: "web-animations-js",     },
         { version: "~0.15.0", name: "zone.js" },
         // dev packages:
-        { version: "20.0.1" , name: "@angular/cli" },
-        { version: "20.0.1" , name: "@angular/compiler-cli" },
-        { version: "20.0.1" , name: "@angular/language-service" },
-        { version: "20.0.1" , name: "@angular-devkit/build-angular" },
+        { version: "21.1.1" , name: "@angular/cli" },
+        { version: "21.1.1" , name: "@angular/compiler-cli" },
+        { version: "21.1.1" , name: "@angular/language-service" },
+        { version: "21.1.1" , name: "@angular-devkit/build-angular" },
         { version: "18.17.0", name: "@types/node" },
         { version: "6.0.2"  , name: "codelyzer" },
         { version: "5.1.1"  , name: "jasmine-core" },
         { version: "~4.2.1" , name: "jasmine-spec-reporter" },
         { version: "0.11.1" , name: "sass.js" },
         { version: "~6.1.3" , name: "tslint" },
         { version: "10.9.1" , name: "ts-node" },
-        { version: "5.8.3"  , name: "typescript" },
+        { version: "5.9.3"  , name: "typescript" },
     ];
 
     // NOTE you can comment out strings in this array to run these function only on a subset of samples

browser/scripts/browser.js

@@ -9,21 +9,23 @@ import { Component, HostListener, Inject, OnInit, DOCUMENT } from "@angular/core
 export class AppComponent implements OnInit {
     public title = "Samples";
     private theme = "default-theme";
-    private styleElem: HTMLStyleElement;
+    private styleElem: HTMLStyleElement | null = null;
     private typefacesLoaded = ["Titillium Web", "Roboto"];
     private typefaceUrl = "https://fonts.googleapis.com/css?family=";
 
-    constructor(@Inject(DOCUMENT) private document: Document) { }
+    constructor(@Inject(DOCUMENT) private document: Document) {}
 
     public ngOnInit() {
         // console.log("SB app ngOnInit");
         this.createThemeStyle();
     }
 
     @HostListener("window:message", ["$event"])
-    private onMessage(e: MessageEvent) {
+    protected onMessage(e: MessageEvent) {
         if (e.origin === e.data.origin && typeof e.data.themeStyle === "string") {
-            this.styleElem.textContent = e.data.themeStyle;
+            if (this.styleElem) {
+                this.styleElem.textContent = e.data.themeStyle;
+            }
             const typeface = window.getComputedStyle(this.document.body).fontFamily.replace(/\"/g, "");
             if (!(typeface.match(/,/g) || []).length &&
                 !this.typefacesLoaded.includes(typeface)) {

browser/src/app/app.component.ts

@@ -1,8 +1,9 @@
 import { provideHttpClient, withInterceptorsFromDi } from "@angular/common/http";
-import { NgModule } from "@angular/core";
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { BrowserModule } from "@angular/platform-browser";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { RouterModule } from "@angular/router";
 import {
     IgxButtonModule, IgxIconModule, IgxInputGroupModule,
     IgxLayoutModule, IgxNavbarModule, IgxNavigationDrawerModule, IgxRippleModule
@@ -14,14 +15,17 @@ import { DocsLayoutComponent } from "./index/docs-layout.component";
 import { IndexComponent } from "./index/index.component";
 import { FallbackComponent } from './fallback/fallback.component';
 
-@NgModule({ bootstrap: [AppComponent],
+@NgModule({ 
+    bootstrap: [AppComponent],
     declarations: [
         AppComponent,
         HomeComponent,
         DocsLayoutComponent,
         IndexComponent,
         FallbackComponent
-    ], imports: [AppRoutingModule,
+    ], 
+    imports: [AppRoutingModule,
+        RouterModule,
         IgxRippleModule,
         IgxNavbarModule,
         IgxNavigationDrawerModule,
@@ -31,5 +35,8 @@ import { FallbackComponent } from './fallback/fallback.component';
         BrowserModule,
         BrowserAnimationsModule,
         IgxButtonModule,
-        FormsModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
+        FormsModule], 
+    providers: [provideHttpClient(withInterceptorsFromDi())],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
 export class AppModule { }

browser/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, Inject, OnInit, DOCUMENT } from "@angular/core";
+import { Component } from "@angular/core";
 
 @Component({
     selector: "app-docs-layout",

browser/src/app/index/docs-layout.component.ts

@@ -1,16 +1,15 @@
 [
-{"ver":"20.1.0-rc.2","name":"igniteui-angular"},
-{"ver":"20.2.1","name":"igniteui-angular-charts"},
-{"ver":"20.2.1","name":"igniteui-angular-core"},
-{"ver":"20.2.1","name":"igniteui-angular-dashboards"},
-{"ver":"20.2.1","name":"igniteui-angular-data-grids"},
-{"ver":"20.2.1","name":"igniteui-angular-excel"},
-{"ver":"20.2.1","name":"igniteui-angular-gauges"},
-{"ver":"20.2.1","name":"igniteui-angular-inputs"},
-{"ver":"20.2.1","name":"igniteui-angular-layouts"},
-{"ver":"20.2.1","name":"igniteui-angular-maps"},
-{"ver":"20.2.1","name":"igniteui-angular-spreadsheet"},
-{"ver":"20.2.1","name":"igniteui-angular-spreadsheet-chart-adapter"},
-{"ver":"20.0.0","name":"igniteui-theming"},
+{"ver":"21.0.8","name":"igniteui-angular"},
+{"ver":"21.0.0","name":"igniteui-angular-charts"},
+{"ver":"21.0.0","name":"igniteui-angular-core"},
+{"ver":"21.0.0","name":"igniteui-angular-dashboards"},
+{"ver":"21.0.0","name":"igniteui-angular-data-grids"},
+{"ver":"21.0.0","name":"igniteui-angular-excel"},
+{"ver":"21.0.0","name":"igniteui-angular-gauges"},
+{"ver":"21.0.0","name":"igniteui-angular-inputs"},
+{"ver":"21.0.0","name":"igniteui-angular-layouts"},
+{"ver":"21.0.0","name":"igniteui-angular-maps"},
+{"ver":"21.0.0","name":"igniteui-angular-spreadsheet"},
+{"ver":"21.0.0","name":"igniteui-angular-spreadsheet-chart-adapter"},
 {"ver":"6.3.1","name":"igniteui-webcomponents"}
 ]

browser/src/browser-info.json

@@ -7,6 +7,9 @@
     "baseUrl": "./",
     "types": []
   },
+  "angularCompilerOptions": {
+    "strictTemplates": false
+  },
   "files": [
     "main.ts",
     "polyfills.ts"