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

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

@@ -0,0 +1,24 @@
+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 { IgxNavigationDrawerModule, IgxNavbarModule, IgxLayoutModule, IgxRippleModule } from 'igniteui-angular';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+	provideRouter(routes),
+	importProvidersFrom(
+		BrowserModule,
+		HammerModule,
+		IgxLayoutModule,
+		IgxNavbarModule,
+		IgxNavigationDrawerModule,
+		IgxRippleModule),
+	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/side-nav-auth/files/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve -o",
-    "build": "ng build --configuration production",
+    "build": "ng build",
     "test": "ng test",
     "lint": "ng lint"
   },

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

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

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

@@ -0,0 +1,69 @@
+import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+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 { NgFor } from '@angular/common';
+
+import { routes } from './app.routes';
+import { LoginBarComponent } from './authentication/login-bar/login-bar.component';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    LoginBarComponent,
+    IgxLayoutDirective,
+    IgxNavigationDrawerComponent,
+    IgxNavDrawerTemplateDirective,
+    IgxNavDrawerItemDirective,
+    NgFor,
+    IgxRippleDirective,
+    RouterLinkActive,
+    RouterLink,
+    IgxFlexDirective,
+    IgxNavbarComponent,
+    RouterOutlet]
+})
+export class AppComponent implements OnInit {
+  public topNavLinks: {
+    path: string,
+    name: string
+  }[] = [];
+
+  @ViewChild(IgxNavigationDrawerComponent, { static: true })
+  public navdrawer!: IgxNavigationDrawerComponent;
+
+  constructor(private router: Router) {
+    for (const route of routes) {
+      if (route.path && route.data && route.path.indexOf('*') === -1) {
+        this.topNavLinks.push({
+          name: route.data.text,
+          path: '/' + route.path
+        });
+      }
+    }
+  }
+
+  public ngOnInit(): void {
+    this.router.events.pipe(
+      filter((x): x is NavigationStart => x instanceof NavigationStart)
+    )
+      .subscribe((event: NavigationStart) => {
+        if (event.url !== '/' && !this.navdrawer.pin) {
+          // Close drawer when selecting a view on mobile (unpinned)
+          this.navdrawer.close();
+        }
+      });
+  }
+}

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

@@ -0,0 +1,27 @@
+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 { IgxNavigationDrawerModule, IgxNavbarModule, IgxLayoutModule, IgxRippleModule } from 'igniteui-angular';
+
+import { AuthenticationModule, ExternalAuthService } from './authentication';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+	provideRouter(routes),
+	importProvidersFrom(
+	  BrowserModule,
+	  HammerModule,
+	  IgxLayoutModule,
+	  IgxNavbarModule,
+	  IgxNavigationDrawerModule,
+	  IgxRippleModule,
+	  AuthenticationModule),
+	provideAnimations(),
+	ExternalAuthService
+	// provide the HAMMER_GESTURE_CONFIG token
+	// to override the default settings of the HammerModule
+    // { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
+  ]
+};

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

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

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

@@ -24,9 +24,8 @@ describe('LoginComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, RouterTestingModule, NoopAnimationsModule,
+      imports: [LoginComponent, ReactiveFormsModule, RouterTestingModule, NoopAnimationsModule,
         IgxInputGroupModule, IgxButtonModule, IgxIconModule, IgxRippleModule],
-      declarations: [LoginComponent],
       providers: [
         { provide: ExternalAuthService, useValue: extAuthSpy },
         { provide: AuthenticationService, useValue: authSpy },

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

@@ -1,6 +1,10 @@
 import { Component, EventEmitter, Output } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
 import { Router } from '@angular/router';
+import { IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective,
+  IgxInputDirective, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';
+
 import { AuthenticationService } from '../services/authentication.service';
 import { ExternalAuthProvider } from '../services/external-auth-configs';
 import { ExternalAuthService } from '../services/external-auth.service';
@@ -9,7 +13,10 @@ import { UserService } from '../services/user.service';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.scss'],
+  standalone: true,
+  imports: [ReactiveFormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective,
+    IgxInputDirective, IgxButtonDirective, IgxRippleDirective, NgIf]
 })
 export class LoginComponent {
   public loginForm: FormGroup;

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.spec.ts

@@ -22,7 +22,16 @@ import { LoginBarComponent } from './login-bar.component';
 
 @Component({
   selector: 'app-login-dialog',
-  template: ''
+  template: '',
+  standalone: true,
+  imports: [RouterTestingModule,
+	  IgxAvatarModule,
+	  IgxButtonModule,
+	  IgxDialogModule,
+	  IgxDropDownModule,
+	  IgxIconModule,
+	  IgxRippleModule,
+	  IgxToggleModule]
 })
 class TestLoginDialogComponent extends LoginDialogComponent {
   open() { }
@@ -46,16 +55,17 @@ describe('LoginBarComponent', () => {
       imports: [
         RouterTestingModule,
         NoopAnimationsModule,
-        AuthModule.forRoot(),
+        AuthModule,
         IgxAvatarModule,
         IgxButtonModule,
         IgxDialogModule,
         IgxDropDownModule,
         IgxIconModule,
         IgxRippleModule,
-        IgxToggleModule
+        IgxToggleModule,
+		LoginBarComponent,
+		TestLoginDialogComponent
       ],
-      declarations: [LoginBarComponent, TestLoginDialogComponent],
       providers: [
         { provide: UserService, useClass: TestUserServSpy },
         { provide: ExternalAuthService, useClass: TestAuthService }

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.component.ts

@@ -1,6 +1,8 @@
 import { Component, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
-import { IgxDropDownComponent, ISelectionEventArgs } from 'igniteui-angular';
+import { NgIf } from '@angular/common';
+import { IgxDropDownComponent, ISelectionEventArgs, IgxRippleDirective, IgxButtonDirective, IgxToggleActionDirective,
+  IgxAvatarComponent, IgxIconComponent, IgxDropDownItemComponent } from 'igniteui-angular';
 import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
 import { ExternalAuthService } from '../services/external-auth.service';
 import { UserService } from '../services/user.service';
@@ -8,7 +10,10 @@ import { UserService } from '../services/user.service';
 @Component({
   selector: 'app-login-bar',
   templateUrl: './login-bar.component.html',
-  styleUrls: ['./login-bar.component.scss']
+  styleUrls: ['./login-bar.component.scss'],
+  standalone: true,
+  imports: [NgIf, IgxRippleDirective, IgxButtonDirective, IgxToggleActionDirective, IgxAvatarComponent, IgxIconComponent,
+    IgxDropDownComponent, IgxDropDownItemComponent, LoginDialogComponent]
 })
 export class LoginBarComponent {
 

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.component.spec.ts

@@ -7,7 +7,9 @@ import { LoginDialogComponent } from './login-dialog.component';
 
 @Component({
   selector: 'app-login, app-register',
-  template: ''
+  template: '',
+  standalone: true,
+  imports: [IgxDialogModule]
 })
 class TestSignViewComponent {
   @Output() public viewChange = new EventEmitter();
@@ -27,8 +29,7 @@ describe('LoginDialogComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [LoginDialogComponent, TestSignViewComponent],
-      imports: [NoopAnimationsModule, IgxDialogModule]
+       imports: [NoopAnimationsModule, IgxDialogModule, LoginDialogComponent, TestSignViewComponent]
     })
       .compileComponents();
   }));

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.component.ts

@@ -1,10 +1,16 @@
 import { Component, ViewChild } from '@angular/core';
 import { IgxDialogComponent } from 'igniteui-angular';
+import { NgIf } from '@angular/common';
+
+import { RegisterComponent } from '../register/register.component';
+import { LoginComponent } from '../login/login.component';
 
 @Component({
   selector: 'app-login-dialog',
   templateUrl: './login-dialog.component.html',
-  styleUrls: ['./login-dialog.component.scss']
+  styleUrls: ['./login-dialog.component.scss'],
+  standalone: true,
+  imports: [IgxDialogComponent, NgIf, LoginComponent, RegisterComponent]
 })
 export class LoginDialogComponent {
   public showLogin = true;

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

@@ -8,7 +8,7 @@ describe('ProfileComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ProfileComponent],
+      imports: [ProfileComponent],
       providers: [
         { provide: UserService, useValue: { currentUser: { name: 'test' } } }
       ]

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

@@ -4,7 +4,8 @@ import { UserService } from '../services/user.service';
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
+  styleUrls: ['./profile.component.scss'],
+  standalone: true
 })
 export class ProfileComponent {
   constructor(public userService: UserService) { }

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

@@ -15,8 +15,7 @@ describe('RedirectComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
-      declarations: [RedirectComponent],
+	  imports: [RouterTestingModule, RedirectComponent],
       providers: [
         { provide: ActivatedRoute, useValue: activeRouteSpy },
         { provide: ExternalAuthService, useValue: extAuthSpy },

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

@@ -9,7 +9,8 @@ import { UserService } from '../services/user.service';
 const routeData = 'value';
 
 @Component({
-  template: '<p>Signing in...</p>'
+  template: '<p>Signing in...</p>',
+  standalone: true
 })
 export class RedirectComponent implements OnInit {
   private provider: ExternalAuthProvider;

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

@@ -29,9 +29,9 @@ describe('RegisterComponent', () => {
         IgxButtonModule,
         IgxIconModule,
         IgxInputGroupModule,
-        IgxRippleModule
+        IgxRippleModule,
+		RegisterComponent
       ],
-      declarations: [RegisterComponent],
       providers: [
         { provide: AuthenticationService, useValue: authSpy },
         { provide: UserService, useValue: userServSpy },

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

@@ -1,6 +1,8 @@
 import { Component, EventEmitter, Output } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
+import { IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective, IgxInputDirective, IgxButtonDirective,
+	IgxRippleDirective } from 'igniteui-angular';
 import { Register } from '../models/register';
 import { AuthenticationService } from '../services/authentication.service';
 import { UserService } from '../services/user.service';
@@ -8,7 +10,10 @@ import { UserService } from '../services/user.service';
 @Component({
   selector: 'app-register',
   templateUrl: './register.component.html',
-  styleUrls: ['./register.component.scss']
+  styleUrls: ['./register.component.scss'],
+  standalone: true,
+  imports: [ReactiveFormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective,
+	IgxInputDirective, IgxButtonDirective, IgxRippleDirective]
 })
 export class RegisterComponent {
 

package/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [IgxRadialGaugeModule, NoopAnimationsModule]
+	  imports: [IgxRadialGaugeModule, NoopAnimationsModule, <%=ClassName%>Component ]
     })
       .compileComponents();
   }));

package/igx-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -7,14 +7,18 @@ import {
   RadialGaugeBackingShape,
   RadialGaugeNeedleShape,
   RadialGaugePivotShape,
-  RadialGaugeScaleOversweepShape
+  RadialGaugeScaleOversweepShape,
+  IgxRadialGaugeCoreModule,
 } from 'igniteui-angular-gauges';
+import { IgxLayoutDirective, IgxButtonDirective } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [IgxLayoutDirective, IgxButtonDirective, IgxRadialGaugeCoreModule]
 })
 export class <%=ClassName%>Component implements AfterViewInit {
 

package/igx-ts/radial-gauge/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxRadialGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,13 +12,7 @@ class IgxRadialGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.projectType = "igx-ts";
         this.name = "Radial Gauge";
         this.description = "IgxRadialGauge with different animations";
-        this.dependencies = [
-            {
-                import: ["IgxRadialGaugeModule"],
-                from: "igniteui-angular-gauges"
-            }
-        ];
-        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-gauges@~17.0.0"];
+        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-gauges@~17.0.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxRadialGaugeTemplate();

package/igx-ts/select/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [IgxSelectModule, NoopAnimationsModule]
+	  imports: [IgxSelectModule, NoopAnimationsModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

package/igx-ts/select/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,9 +1,13 @@
 import { Component } from '@angular/core';
+import { NgFor } from '@angular/common';
+import { IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent } from '<%=igxPackage%>';;
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent]
 })
 export class <%=ClassName%>Component {
   public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango', 'Pineapple'];

package/igx-ts/select/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxSelectTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,14 +12,7 @@ class IgxSelectTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularT
         this.projectType = "igx-ts";
         this.name = "Select";
         this.description = "basic IgxSelect";
-        this.dependencies = [{
-                import: [
-                    "IgxSelectModule",
-                    "IgxButtonModule",
-                    "IgxToggleModule"
-                ],
-                from: "<%=igxPackage%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxSelectTemplate();

package/igx-ts/select/select-groups/files/src/app/__path__/__filePrefix__.comonent.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [IgxSelectModule, NoopAnimationsModule]
+	  imports: [IgxSelectModule, NoopAnimationsModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

package/igx-ts/select/select-groups/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { NgFor } from '@angular/common';
+import { IgxSelectComponent, IgxLabelDirective, IgxSelectGroupComponent, IgxSelectItemComponent } from '<%=igxPackage%>';
+
 @Component({
   selector: 'app-<%=filePrefix%>',
   styleUrls: ['<%=filePrefix%>.component.scss'],
-  templateUrl: '<%=filePrefix%>.component.html'
+  templateUrl: '<%=filePrefix%>.component.html',
+  standalone: true,
+  imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectGroupComponent, IgxSelectItemComponent]
 })
 export class <%=ClassName%>Component {
   public items: any[] = [

package/igx-ts/select/select-groups/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxSelectTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,14 +12,7 @@ class IgxSelectTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularT
         this.projectType = "igx-ts";
         this.name = "Select With Groups";
         this.description = "IgxSelect that has groups";
-        this.dependencies = [{
-                import: [
-                    "IgxSelectModule",
-                    "IgxButtonModule",
-                    "IgxToggleModule"
-                ],
-                from: "<%=igxPackage%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxSelectTemplate();

package/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -15,15 +15,15 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [
-        FormsModule,
-        IgxSelectModule,
-        IgxToggleModule,
-        IgxButtonModule,
-        IgxToastModule,
-        NoopAnimationsModule,
-      ]
+	  imports: [
+	    FormsModule,
+	    IgxSelectModule,
+	    IgxToggleModule,
+	    IgxButtonModule,
+	    IgxToastModule,
+	    NoopAnimationsModule,
+	    <%=ClassName%>Component,
+	  ]
     })
       .compileComponents();
   }));

package/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,10 +1,34 @@
 import { Component, ViewChild } from '@angular/core';
-import { HorizontalAlignment, IgxSelectComponent, IgxToastComponent, PositionSettings, VerticalAlignment } from '<%=igxPackage%>';
+import {
+  HorizontalAlignment,
+  IgxSelectComponent,
+  IgxToastComponent,
+  PositionSettings,
+  VerticalAlignment,
+  IgxLabelDirective,
+  IgxPrefixDirective,
+  IgxSelectItemComponent,
+  IgxButtonDirective,
+} from '<%=igxPackage%>';
+import { NgFor } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   styleUrls: ['<%=filePrefix%>.component.scss'],
-  templateUrl: '<%=filePrefix%>.component.html'
+  templateUrl: '<%=filePrefix%>.component.html',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    FormsModule,
+    IgxSelectComponent,
+    IgxLabelDirective,
+    IgxPrefixDirective,
+    IgxSelectItemComponent,
+    NgFor,
+    IgxButtonDirective,
+    IgxToastComponent
+  ]
 })
 export class <%=ClassName%>Component {
   @ViewChild(IgxSelectComponent, { static: true })

package/igx-ts/select/select-in-form/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxSelectTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,18 +12,7 @@ class IgxSelectTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularT
         this.projectType = "igx-ts";
         this.name = "Select In Form";
         this.description = "IgxSelect in a form";
-        this.dependencies = [{
-                import: [
-                    "IgxSelectModule",
-                    "IgxButtonModule",
-                    "IgxToggleModule",
-                    "IgxToastModule"
-                ],
-                from: "<%=igxPackage%>"
-            }, {
-                import: ["FormsModule"],
-                from: "@angular/forms"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxSelectTemplate();

package/igx-ts/stepper/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [ NoopAnimationsModule, IgxStepperModule, IgxButtonModule, IgxButtonGroupModule ]
+	  imports: [NoopAnimationsModule, IgxStepperModule, IgxButtonModule, IgxButtonGroupModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));