@igniteui/angular-templates 21.1.1492 → 21.1.14100-alpha.1

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

@@ -1,30 +1,30 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { AuthenticationService } from '../services/authentication.service';
-import { ExternalAuthService } from '../services/external-auth.service';
-import { UserService } from '../services/user.service';
-import { RedirectComponent } from './redirect.component';
+import { Authentication } from '../services/authentication';
+import { ExternalAuth } from '../services/external-auth';
+import { UserStore } from '../services/user-store';
+import { Redirect } from './redirect';
 
-describe('RedirectComponent', () => {
-  let fixture: ComponentFixture<RedirectComponent>;
+describe('Redirect', () => {
+  let fixture: ComponentFixture<Redirect>;
   const activeRouteSpy: any = { snapshot: { data: { value: { provider: {} } } } };
-  const extAuthSpy = jasmine.createSpyObj('ExternalAuthService', ['getUserInfo']);
-  const authSpy = jasmine.createSpyObj('AuthenticationService', ['loginWith']);
-  const userServSpy = jasmine.createSpyObj('UserService', ['setCurrentUser']);
+  const extAuthSpy = jasmine.createSpyObj('ExternalAuth', ['getUserInfo']);
+  const authSpy = jasmine.createSpyObj('Authentication', ['loginWith']);
+  const userServSpy = jasmine.createSpyObj('UserStore', ['setCurrentUser']);
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-	  imports: [RouterTestingModule, RedirectComponent],
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [RouterTestingModule, Redirect],
       providers: [
         { provide: ActivatedRoute, useValue: activeRouteSpy },
-        { provide: ExternalAuthService, useValue: extAuthSpy },
-        { provide: AuthenticationService, useValue: authSpy },
-        { provide: UserService, useValue: userServSpy }
+        { provide: ExternalAuth, useValue: extAuthSpy },
+        { provide: Authentication, useValue: authSpy },
+        { provide: UserStore, useValue: userServSpy }
       ]
     })
       .compileComponents();
-  }));
+  });
 
   it('should try external login on init', async () => {
     const router: Router = TestBed.inject(Router);
@@ -34,7 +34,7 @@ describe('RedirectComponent', () => {
       error: null,
       user: { name: 'TEST' }
     }));
-    fixture = TestBed.createComponent(RedirectComponent);
+    fixture = TestBed.createComponent(Redirect);
     fixture.detectChanges();
     await fixture.whenStable();
     expect(extAuthSpy.getUserInfo).toHaveBeenCalled();
@@ -51,7 +51,7 @@ describe('RedirectComponent', () => {
       error: 'Err'
     }));
     spyOn(window, 'alert');
-    fixture = TestBed.createComponent(RedirectComponent);
+    fixture = TestBed.createComponent(Redirect);
     fixture.detectChanges();
     await fixture.whenStable();
     expect(window.alert).toHaveBeenCalledWith('Err');

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

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ExternalLogin } from '../models/login';
+import { Authentication } from '../services/authentication';
+import { ExternalAuthProvider } from '../services/external-auth-configs';
+import { ExternalAuth } from '../services/external-auth';
+import { UserStore } from '../services/user-store';
+
+const routeData = 'value';
+
+@Component({
+  template: '<p>Signing in...</p>'
+})
+export class Redirect implements OnInit {
+  private provider: ExternalAuthProvider;
+
+  constructor(
+    route: ActivatedRoute,
+    private router: Router,
+    private userStore: UserStore,
+    private authentication: Authentication,
+    private externalAuth: ExternalAuth) {
+    this.provider = route.snapshot.data[routeData].provider as ExternalAuthProvider;
+  }
+
+  async ngOnInit() {
+    const userInfo: ExternalLogin = await this.externalAuth.getUserInfo(this.provider);
+    const result = await this.authentication.loginWith(userInfo);
+    if (!result.error) {
+      this.userStore.setCurrentUser(result.user!);
+      this.router.navigate(['/profile']);
+    } else {
+      alert(result.error);
+    }
+  }
+}

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

@@ -1,27 +1,27 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { IgxButtonModule, IgxIconModule, IgxInputGroupModule, IgxRippleModule } from 'igniteui-angular';
-import { AuthenticationService } from '../services/authentication.service';
-import { UserService } from '../services/user.service';
-import { RegisterComponent } from './register.component';
+import { Authentication } from '../services/authentication';
+import { UserStore } from '../services/user-store';
+import { Register } from './register';
 
 const MAIL_GROUP_NAME = 'email';
 const PASSWORD_GROUP_NAME = 'password';
 const USERNAME_GROUP_NAME = 'given_name';
 const FAMILY_NAME_GROUP_NAME = 'family_name';
 
-describe('RegisterComponent', () => {
-  let component: RegisterComponent;
-  let fixture: ComponentFixture<RegisterComponent>;
-  const authSpy = jasmine.createSpyObj('AuthenticationService', ['register']);
-  const userServSpy = jasmine.createSpyObj('UserService', ['setCurrentUser']);
+describe('Register', () => {
+  let component: Register;
+  let fixture: ComponentFixture<Register>;
+  const authSpy = jasmine.createSpyObj('Authentication', ['register']);
+  const userServSpy = jasmine.createSpyObj('UserStore', ['setCurrentUser']);
   const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [
         NoopAnimationsModule,
         ReactiveFormsModule,
@@ -30,19 +30,19 @@ describe('RegisterComponent', () => {
         IgxIconModule,
         IgxInputGroupModule,
         IgxRippleModule,
-		RegisterComponent
+		Register
       ],
       providers: [
-        { provide: AuthenticationService, useValue: authSpy },
-        { provide: UserService, useValue: userServSpy },
+        { provide: Authentication, useValue: authSpy },
+        { provide: UserStore, useValue: userServSpy },
         { provide: Router, useValue: routerSpy }
       ]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RegisterComponent);
+    fixture = TestBed.createComponent(Register);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -3,19 +3,18 @@ import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angula
 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';
+import { RegisterInfo } from '../models/register-info';
+import { Authentication } from '../services/authentication';
+import { UserStore } from '../services/user-store';
 
 @Component({
   selector: 'app-register',
-  templateUrl: './register.component.html',
-  styleUrls: ['./register.component.scss'],
-  standalone: true,
+  templateUrl: './register.html',
+  styleUrl: './register.scss',
   imports: [ReactiveFormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective,
 	IgxInputDirective, IgxButtonDirective, IgxRippleDirective]
 })
-export class RegisterComponent {
+export class Register {
 
   public registrationForm: FormGroup;
 
@@ -24,9 +23,9 @@ export class RegisterComponent {
   @Output()
   registered: EventEmitter<any> = new EventEmitter();
 
-  constructor(private authentication: AuthenticationService,
+  constructor(private authentication: Authentication,
     private fb: FormBuilder,
-    private userService: UserService,
+    private userStore: UserStore,
     private router: Router) {
     this.registrationForm = this.fb.group({
       given_name: ['', Validators.required],
@@ -37,9 +36,9 @@ export class RegisterComponent {
   }
 
   async tryRegister() {
-    const response = await this.authentication.register(this.registrationForm.value as Register);
+    const response = await this.authentication.register(this.registrationForm.value as RegisterInfo);
     if (!response.error) {
-      this.userService.setCurrentUser(response.user!);
+      this.userStore.setCurrentUser(response.user!);
       this.router.navigate(['/profile']);
       this.registered.emit();
     } else {

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/{authentication.service.ts → authentication.ts}

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ExternalLogin, Login } from '../models/login';
-import { Register } from '../models/register';
+import { RegisterInfo } from '../models/register-info';
 import { LoginResult, User } from '../models/user';
 import { parseUser } from './jwt-util';
 
@@ -9,7 +9,7 @@ import { parseUser } from './jwt-util';
 @Injectable({
   providedIn: 'root'
 })
-export class AuthenticationService {
+export class Authentication {
 
   constructor(private http: HttpClient) { }
 
@@ -24,7 +24,7 @@ export class AuthenticationService {
   }
 
   /** Send user info to register endpoint. */
-  public async register(userData: Register): Promise<LoginResult> {
+  public async register(userData: RegisterInfo): Promise<LoginResult> {
     return this.loginPost('/register', userData);
   }
 

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/{external-auth.service.ts → external-auth.ts}

@@ -19,7 +19,7 @@ export enum ExternalAuthRedirectUrl {
 @Injectable({
   providedIn: 'root'
 })
-export class ExternalAuthService {
+export class ExternalAuth {
   protected providers: Map<ExternalAuthProvider, AuthProvider> = new Map();
   public get activeProvider(): ExternalAuthProvider {
     return this.localStorage.getItem('extActiveProvider') as ExternalAuthProvider;

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/{fake-backend.service.ts → fake-backend.ts}

@@ -10,7 +10,7 @@ import { Injectable } from '@angular/core';
 import { Observable, of, throwError } from 'rxjs';
 import { dematerialize, materialize, mergeMap } from 'rxjs/operators';
 import { ExternalLogin } from '../models/login';
-import { Register } from '../models/register';
+import { RegisterInfo } from '../models/register-info';
 import { UserJWT } from '../models/user';
 import { encodeBase64Url } from './jwt-util';
 import { LocalStorageService } from './local-storage';
@@ -88,7 +88,7 @@ export class BackendInterceptor implements HttpInterceptor {
   }
 
   private getStorageUser(request: HttpRequest<any>): StorageUser {
-    const user = request.body as Register;
+    const user = request.body as RegisterInfo;
     let fullName = user.given_name;
     fullName += user.family_name ? ` ${user.family_name}` : '';
     return {

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/jwt.interceptor.ts

@@ -1,16 +1,16 @@
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { UserService } from '../services/user.service';
+import { UserStore } from '../services/user-store';
 
 @Injectable({
   providedIn: 'root'
 })
 export class JwtInterceptor implements HttpInterceptor {
-  constructor(private userService: UserService) { }
+  constructor(private userStore: UserStore) { }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    const currentUser = this.userService.currentUser;
+    const currentUser = this.userStore.currentUser;
     if (currentUser && currentUser.token) {
       request = request.clone({
         setHeaders: {

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

@@ -5,14 +5,14 @@ import { take } from 'rxjs/operators';
 import { FacebookProvider } from '../providers/facebook-provider';
 import { GoogleProvider } from '../providers/google-provider';
 import { MicrosoftProvider } from '../providers/microsoft-provider';
-import { AuthenticationService } from './authentication.service';
+import { Authentication } from './authentication';
 import { ExternalAuthProvider } from './external-auth-configs';
-import { ExternalAuthRedirectUrl, ExternalAuthService } from './external-auth.service';
-import { BackendInterceptor } from './fake-backend.service';
+import { ExternalAuthRedirectUrl, ExternalAuth } from './external-auth';
+import { BackendInterceptor } from './fake-backend';
 import * as JWTUtil from './jwt-util';
 import { LocalStorageService } from './local-storage';
 import msKeys from './microsoft-keys';
-import { UserService } from './user.service';
+import { UserStore } from './user-store';
 
 describe('Services', () => {
 
@@ -21,7 +21,7 @@ describe('Services', () => {
       post: () => { }
     } as any;
 
-    const authServ = new AuthenticationService(MOCK_HTTP_CLIENT);
+    const authServ = new Authentication(MOCK_HTTP_CLIENT);
     it('Should properly initialize', async () => {
       expect(authServ).toBeDefined();
     });
@@ -79,7 +79,7 @@ describe('Services', () => {
     } as any;
 
     const localStorage = new LocalStorageService(PLATFORM_ID);
-    const extAuthServ = new ExternalAuthService(MOCK_ROUTER, MOCK_OIDC_SECURITY, MOCK_OIDC_CONFIG, MOCK_LOCATION, localStorage);
+    const extAuthServ = new ExternalAuth(MOCK_ROUTER, MOCK_OIDC_SECURITY, MOCK_OIDC_CONFIG, MOCK_LOCATION, localStorage);
     it(`Should properly initialize`, () => {
       expect(extAuthServ).toBeDefined();
     });
@@ -488,7 +488,7 @@ describe('Services', () => {
     });
 
     it(`Should properly initialize`, () => {
-      const userServ = new UserService(localStorage);
+      const userServ = new UserStore(localStorage);
       expect(userServ).toBeDefined();
       expect(localStorage.getItem).toHaveBeenCalledWith('currentUser');
       expect(JSON.parse).toHaveBeenCalledWith('MOCK JSON');
@@ -497,7 +497,7 @@ describe('Services', () => {
     });
 
     it(`Should properly get 'initials'`, () => {
-      const userServ = new UserService(localStorage);
+      const userServ = new UserStore(localStorage);
       const currentUserSpy = spyOnProperty(userServ, 'currentUser', 'get').and.returnValue(null);
       expect(userServ.initials).toEqual(null);
       currentUserSpy.and.returnValue({ given_name: '' });
@@ -515,7 +515,7 @@ describe('Services', () => {
     });
 
     it(`Should properly 'setCurrentUser'`, () => {
-      const userServ = new UserService(localStorage);
+      const userServ = new UserStore(localStorage);
       const mockUser2 = {
         exp: 111,
         name: 'Qually T',
@@ -537,7 +537,7 @@ describe('Services', () => {
     });
 
     it(`Should properly call 'clearCurrentUser'`, () => {
-      const userServ = new UserService(localStorage);
+      const userServ = new UserStore(localStorage);
       spyOn(localStorage, 'removeItem');
       expect(userServ.currentUser).toBeTruthy();
       userServ.clearCurrentUser();

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/{user.service.ts → user-store.ts}

@@ -8,14 +8,14 @@ const USER_TOKEN = 'currentUser';
  * Service used to store and provide the current logged in user in the app.
  *
  * **NOTE**: Keep in mind using local storage can be susceptible to XSS attacks.
- * Consider not storing the User o the client storage if the app requirements allow,
+ * Consider not storing the User on the client storage if the app requirements allow,
  * adding a fingerprint to the JWT claims that is sent with a secure cookie,
  * or other security measures.
  */
 @Injectable({
   providedIn: 'root'
 })
-export class UserService {
+export class UserStore {
   private _currentUser: User | null;
   /** Current logged in user, if any */
   public get currentUser() { return this._currentUser; }

package/igx-ts/projects/side-nav-auth/files/src/index.html

@@ -1,22 +1,16 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <title>Ignite UI for Angular</title>
-  <base href="/" />
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
-
-  <script src="https://connect.facebook.net/en_US/sdk.js"></script>
-</head>
-
-<body class="ig-typography ig-scrollbar">
-  <app-root></app-root>
-</body>
-
+  <head>
+    <meta charset="utf-8">
+    <title>Ignite UI for Angular</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">
+    <script src="https://connect.facebook.net/en_US/sdk.js"></script>
+  </head>
+  <body class="ig-typography ig-scrollbar">
+    <app-root></app-root>
+  </body>
 </html>

package/igx-ts/projects/side-nav-auth/files/tsconfig.app.json

@@ -1,4 +1,5 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
@@ -11,11 +12,10 @@
       "facebook-js-sdk"
     ]
   },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
   ]
 }

package/igx-ts/projects/side-nav-auth/files/tsconfig.spec.json

@@ -1,20 +1,18 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine",
+      "vitest/globals",
       "node",
       "facebook-js-sdk"
     ],
-    "module": "commonjs"
+    "module": "esnext"
   },
-  "files": [
-    "src/polyfills.ts"
-  ],
   "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
   ]
 }

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [IgxRadialGaugeModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    // disable animation
+    component.radialGauge.transitionDuration = 0;
+  });
+});

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

@@ -14,13 +14,12 @@ import { IgxLayoutDirective, IgxButtonDirective } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [IgxLayoutDirective, IgxButtonDirective, IgxRadialGaugeCoreModule]
 })
-export class <%=ClassName%>Component implements AfterViewInit {
+export class <%=ClassName%> implements AfterViewInit {
 
   public needleShape = RadialGaugeNeedleShape;
   public pivotShape = RadialGaugePivotShape;

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

@@ -1,21 +1,21 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxSelectModule } from '<%=igxPackage%>';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+import { <%=ClassName%> } from './<%=filePrefix%>';
 
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
 
-  beforeEach(waitForAsync(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
-	  imports: [IgxSelectModule, NoopAnimationsModule, <%=ClassName%>Component]
+	  imports: [IgxSelectModule, NoopAnimationsModule, <%=ClassName%>]
     })
       .compileComponents();
-  }));
+  });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    fixture = TestBed.createComponent(<%=ClassName%>);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

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

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

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxSelectModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [IgxSelectModule, NoopAnimationsModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -4,12 +4,11 @@ import { IgxSelectComponent, IgxLabelDirective, IgxSelectGroupComponent, IgxSele
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  styleUrls: ['<%=filePrefix%>.component.scss'],
-  templateUrl: '<%=filePrefix%>.component.html',
-  standalone: true,
+  templateUrl: '<%=filePrefix%>.html',
+  styleUrl: '<%=filePrefix%>.scss',
   imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectGroupComponent, IgxSelectItemComponent]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public items: any[] = [
     { type: 'Fruits', fruits: ['Apple', 'Orange', 'Banana'] },
     { type: 'Vegetables', vegetables: ['Cucumber', 'Potato', 'Pepper'] }

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

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [
+	    NoopAnimationsModule,
+	    <%=ClassName%>,
+	  ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});