@igniteui/angular-templates 17.0.1302 → 17.0.1310-beta.2

package/igx-ts/projects/_base/files/__dot__eslintrc.json

@@ -4,39 +4,39 @@
     "projects/**/*"
   ],
   "overrides": [
-    {
-    "files": [
-      "*.ts"
-    ],
-    "parserOptions": {
-      "project": [
-      "tsconfig.json"
-      ],
-      "createDefaultProgram": true
-    },
-    "extends": [
-      "plugin:@angular-eslint/recommended",
-      "plugin:@angular-eslint/template/process-inline-templates"
-    ],
-    "rules": {
-      "@angular-eslint/directive-selector": [
-      "error",
-      {
-        "type": "attribute",
-        "prefix": "app",
-        "style": "camelCase"
-      }
-      ],
-      "@angular-eslint/component-selector": [
-      "error",
       {
-        "type": "element",
-        "prefix": "app",
-        "style": "kebab-case"
-      }
-      ]
-    }
-    },
+        "files": [
+          "*.ts"
+        ],
+        "parserOptions": {
+          "project": [
+          "tsconfig.json"
+          ],
+          "createDefaultProgram": true
+        },
+        "extends": [
+          "plugin:@angular-eslint/recommended",
+          "plugin:@angular-eslint/template/process-inline-templates"
+        ],
+        "rules": {
+          "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+          ],
+          "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+          ]
+        }
+      },
     {
     "files": [
       "*.html"

package/igx-ts/projects/_base/files/angular.json

@@ -1,132 +1,107 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "<%=dashName%>": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        },
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/<%=dashName%>",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"<%=DefaultTheme%>
-            ],
-            "scripts": [
-              "./node_modules/hammerjs/hammer.min.js"
-            ],
-            "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
-            }
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "5mb",
-                  "maximumError": "10mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "2mb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "buildTarget": "<%=dashName%>:build:production"
-            },
-            "development": {
-              "buildTarget": "<%=dashName%>:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "buildTarget": "<%=dashName%>:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "inlineStyleLanguage": "scss",
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "./node_modules/hammerjs/hammer.min.js"
-            ],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
-            }
-          }
-        },
-        "lint": {
-          "builder": "@angular-eslint/builder:lint",
-          "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
-          }
-        }
-      }
-    }
-  },
-  "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"]
+	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+	"version": 1,
+	"newProjectRoot": "projects",
+	"projects": {
+	  "NgStandaloneApp": {
+		"projectType": "application",
+		"schematics": {
+		  "@schematics/angular:component": {
+			"style": "scss"
+		  }
+		},
+		"root": "",
+		"sourceRoot": "src",
+		"prefix": "app",
+		"architect": {
+		  "build": {
+			"builder": "@angular-devkit/build-angular:application",
+			"options": {
+			  "outputPath": "dist/ng-standalone-app",
+			  "index": "src/index.html",
+			  "browser": "src/main.ts",
+			  "polyfills": [
+				"zone.js"
+			  ],
+			  "tsConfig": "tsconfig.app.json",
+			  "inlineStyleLanguage": "scss",
+			  "assets": [
+				"src/favicon.ico",
+				"src/assets"
+			  ],
+			  "styles": [
+				"src/styles.scss"<%=DefaultTheme%>
+			  ],
+			  "scripts": [
+				"./node_modules/hammerjs/hammer.min.js"
+			  ],
+			  "stylePreprocessorOptions": {
+				"includePaths": ["node_modules"]
+			  }
+			},
+			"configurations": {
+			  "production": {
+				"budgets": [
+				  {
+					"type": "initial",
+					"maximumWarning": "500kb",
+					"maximumError": "1mb"
+				  },
+				  {
+					"type": "anyComponentStyle",
+					"maximumWarning": "2kb",
+					"maximumError": "4kb"
+				  }
+				],
+				"outputHashing": "all"
+			  },
+			  "development": {
+				"optimization": false,
+				"extractLicenses": false,
+				"sourceMap": true
+			  }
+			},
+			"defaultConfiguration": "production"
+		  },
+		  "serve": {
+			"builder": "@angular-devkit/build-angular:dev-server",
+			"configurations": {
+			  "production": {
+				"buildTarget": "NgStandaloneApp:build:production"
+			  },
+			  "development": {
+				"buildTarget": "NgStandaloneApp:build:development"
+			  }
+			},
+			"defaultConfiguration": "development"
+		  },
+		  "extract-i18n": {
+			"builder": "@angular-devkit/build-angular:extract-i18n",
+			"options": {
+			  "buildTarget": "NgStandaloneApp:build"
+			}
+		  },
+		  "test": {
+			"builder": "@angular-devkit/build-angular:karma",
+			"options": {
+			  "polyfills": [
+				"zone.js",
+				"zone.js/testing"
+			  ],
+			  "tsConfig": "tsconfig.spec.json",
+			  "inlineStyleLanguage": "scss",
+			  "assets": [
+				"src/favicon.ico",
+				"src/assets"
+			  ],
+			  "styles": [
+				"src/styles.scss"
+			  ],
+			  "scripts": []
+			}
+		  }
+		}
+	  }
+	}
   }
-}
+  

package/igx-ts/projects/_base/files/package.json

@@ -4,27 +4,26 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve -o",
-    "build": "ng build --configuration production",
+    "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test",
-    "lint": "ng lint"
+    "test": "ng test"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~17.0.0",
-    "@angular/common": "~17.0.0",
-    "@angular/compiler": "~17.0.0",
-    "@angular/core": "~17.0.0",
-    "@angular/forms": "~17.0.0",
-    "@angular/platform-browser": "~17.0.0",
-    "@angular/platform-browser-dynamic": "~17.0.0",
-    "@angular/router": "~17.0.0",
-    "hammerjs": "^2.0.8",
+    "@angular/animations": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/compiler": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@angular/forms": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "@angular/platform-browser-dynamic": "^17.0.0",
+    "@angular/router": "^17.0.0",
+	"hammerjs": "^2.0.8",
     "igniteui-angular": "~17.0.0",
     "minireset.css": "~0.0.7",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.14.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~17.0.0",

package/igx-ts/projects/_base/files/src/app/app.component.ts

@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
+  imports: [CommonModule, RouterOutlet],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })

package/igx-ts/projects/_base/files/src/app/app.config.ts

@@ -0,0 +1,17 @@
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { BrowserModule, HammerModule } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+	provideRouter(routes),
+	importProvidersFrom(BrowserModule, HammerModule),
+	provideAnimations(),
+	// provide the HAMMER_GESTURE_CONFIG token
+	// to override the default settings of the HammerModule
+    // { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
+  ]
+};

package/igx-ts/projects/_base/files/src/app/app.routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+
+import { PageNotFoundComponent } from './error-routing/not-found/not-found.component';
+import { UncaughtErrorComponent } from './error-routing/error/uncaught-error.component';
+
+export const routes: Routes = [
+	{ path: 'error', component: UncaughtErrorComponent },
+	{ path: '**', component: PageNotFoundComponent } // must always be last
+];

package/igx-ts/projects/_base/files/src/app/error-routing/not-found/not-found.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  template: '<h2>Error 404: Page not found</h2>'
+  template: '<h2>Error 404: Page not found</h2>',
+  standalone: true
 })
 export class PageNotFoundComponent { }

package/igx-ts/projects/_base/files/src/main.ts

@@ -1,12 +1,13 @@
 import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from '@angular/platform-browser';
 
-import { AppModule } from './app/app.module';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
 import { environment } from './environments/environment';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));

package/igx-ts/projects/_base/files/tsconfig.app.json

@@ -6,8 +6,7 @@
     "types": []
   },
   "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
+    "src/main.ts"
   ],
   "include": [
     "src/**/*.d.ts"

package/igx-ts/projects/_base/files/tsconfig.json

@@ -2,13 +2,16 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,

package/igx-ts/projects/_base/files/tsconfig.spec.json

@@ -7,10 +7,6 @@
       "jasmine"
     ]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
     "src/**/*.spec.ts",
     "src/**/*.d.ts"

package/igx-ts/projects/_base/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseIgxProject = void 0;
 const cli_core_1 = require("@igniteui/cli-core");
 const path = require("path");
-const Update_1 = require("../../../Update");
+const Update_1 = require(".././../../Update");
 class BaseIgxProject {
     constructor() {
         this.id = "base";

package/igx-ts/projects/_base_with_home/files/__dot__github/workflows/node.js.yml

@@ -8,9 +8,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ main ]
+    branches: [ <%=yamlDefaultBranch%> ]
   pull_request:
-    branches: [ main ]
+    branches: [ <%=yamlDefaultBranch%> ]
 
 jobs:
   build:

package/igx-ts/projects/_base_with_home/files/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};

package/igx-ts/projects/_base_with_home/files/src/app/app.routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+
+import { HomeComponent } from './home/home.component';
+import { PageNotFoundComponent } from './error-routing/not-found/not-found.component';
+import { UncaughtErrorComponent } from './error-routing/error/uncaught-error.component';
+
+export const routes: Routes = [
+	{ path: '', redirectTo: '/home', pathMatch: 'full'},
+	{ path: 'home', component: HomeComponent, data: { text: 'Home' }},
+	{ path: 'error', component: UncaughtErrorComponent },
+	{ path: '**', component: PageNotFoundComponent } // must always be last
+];

package/igx-ts/projects/_base_with_home/files/src/app/home/home.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-home',
+  standalone: true,
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })

package/igx-ts/projects/empty/files/src/app/app.component.ts

@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [RouterOutlet]
 })
 export class AppComponent {
   title = 'Home - IgniteUI for Angular';

package/igx-ts/projects/empty/files/src/app/app.config.ts

@@ -0,0 +1,8 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideRouter(routes)]
+};

package/igx-ts/projects/empty/files/src/app/app.routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '@angular/router';
+
+import { HomeComponent } from './home/home.component';
+
+export const routes: Routes = [
+	{ path: '', redirectTo: '/home', pathMatch: 'full'},
+	{ path: 'home', component: HomeComponent, data: { text: 'Home' }}
+];

package/igx-ts/projects/empty/files/src/app/home/home.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-home',
+  standalone: true,
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })

package/igx-ts/projects/side-nav/files/src/app/app.component.spec.ts

@@ -10,11 +10,9 @@ describe('AppComponent', () => {
         IgxLayoutModule,
         IgxNavbarModule,
         IgxNavigationDrawerModule,
-        IgxRippleModule
-      ],
-      declarations: [
+        IgxRippleModule,
         AppComponent
-      ],
+      ]
     }).compileComponents();
   }));
   it('should create the app', waitForAsync(() => {

package/igx-ts/projects/side-nav/files/src/app/app.component.ts

@@ -1,14 +1,37 @@
 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
-import { IgxNavigationDrawerComponent } from 'igniteui-angular';
+import { NavigationStart, Router, RouterLinkActive, RouterLink, RouterOutlet } from '@angular/router';
+import {
+  IgxNavigationDrawerComponent,
+  IgxLayoutDirective,
+  IgxNavDrawerTemplateDirective,
+  IgxNavDrawerItemDirective,
+  IgxRippleDirective,
+  IgxFlexDirective,
+  IgxNavbarComponent,
+} from 'igniteui-angular';
 import { filter } from 'rxjs/operators';
-import { routes } from './app-routing.module';
+import { NgFor } from '@angular/common';
+import { routes } from './app.routes';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    IgxLayoutDirective,
+    IgxNavigationDrawerComponent,
+    IgxNavDrawerTemplateDirective,
+    IgxNavDrawerItemDirective,
+    NgFor,
+    IgxRippleDirective,
+    RouterLinkActive,
+    RouterLink,
+    IgxFlexDirective,
+    IgxNavbarComponent,
+    RouterOutlet
+  ]
 })
 export class AppComponent implements OnInit {
   public topNavLinks: {
@@ -23,7 +46,7 @@ export class AppComponent implements OnInit {
     for (const route of routes) {
       if (route.path && route.data && route.path.indexOf('*') === -1) {
         this.topNavLinks.push({
-          name: route.data.text,
+          name: route.data['text'],
           path: '/' + route.path
         });
       }