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

package/igx-ts/grid/grid-batch-editing/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -17,9 +17,8 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  templateUrl: './<%=filePrefix%>.component.html',
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxGridComponent,
     IgxColumnComponent,
@@ -33,7 +32,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     IgxDialogComponent
   ]
 })
-export class <%=ClassName%>Component implements OnInit {
+export class <%=ClassName%> implements OnInit {
   @ViewChild('gridRowEditTransaction', { static: true, read: IgxGridComponent }) public grid!: IgxGridComponent;
   @ViewChild(IgxDialogComponent, { static: true }) public dialog!: IgxDialogComponent;
   @ViewChild('dialogGrid', { static: true, read: IgxGridComponent }) public dialogGrid!: IgxGridComponent;

package/igx-ts/grid/grid-custom/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 { IgxGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule, IgxGridModule, <%=ClassName%>]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/grid/grid-custom/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -3,11 +3,10 @@ import { Employee, employeesData } from './localData';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss'
 })
-export class <%=ClassName%>Component implements OnInit {
+export class <%=ClassName%> implements OnInit {
   public localData: Employee[] = [];
   title = '<%=name%>';
 

package/igx-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.spec.ts

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

package/igx-ts/grid/grid-summaries/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -13,9 +13,8 @@ import { Employee, employeesData } from './localData';
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxGridComponent,
     IgxColumnComponent,
@@ -24,7 +23,7 @@ import { Employee, employeesData } from './localData';
     IgxPaginatorComponent,
   ]
 })
-export class <%=ClassName%>Component implements OnInit {
+export class <%=ClassName%> implements OnInit {
   @ViewChild('sampleGrid', { static: true, read: IgxGridComponent })
   public sampleGrid!: IgxGridComponent;
   public customDateSummary = CustomDateSummary;

package/igx-ts/grid/multi-column-headers/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 { IgxGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [NoopAnimationsModule, IgxGridModule, <%=ClassName%>]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/grid/multi-column-headers/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -4,12 +4,11 @@ import { IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxPagin
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxPaginatorComponent]
 })
-export class <%=ClassName%>Component implements OnInit {
+export class <%=ClassName%> implements OnInit {
   public localData: Company[] = [];
   title = '<%=name%>';
 

package/igx-ts/hierarchical-grid/default/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 { IgxHierarchicalGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [NoopAnimationsModule, IgxHierarchicalGridModule, <%=ClassName%>]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -4,11 +4,10 @@ import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public localData: Artist[] = ARTISTS;
 }

package/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/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();
+  });
+});

package/igx-ts/hierarchical-grid/hierarchical-grid-batch-editing/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -22,9 +22,8 @@ import { Singer } from './singer';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxButtonDirective,
     IgxHierarchicalGridComponent,
@@ -43,7 +42,7 @@ import { Singer } from './singer';
     IgxGridComponent
   ]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public get undoEnabledParent(): boolean {
     return this.hierarchicalGrid.transactions.canUndo;
   }

package/igx-ts/hierarchical-grid/hierarchical-grid-custom/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 { IgxHierarchicalGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ NoopAnimationsModule, IgxHierarchicalGridModule, <%=ClassName%> ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/hierarchical-grid/hierarchical-grid-custom/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -4,11 +4,10 @@ import { ARTISTS, Artist } from './data';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss'
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public localData: Artist[] = ARTISTS;
 
   public toggleColumn(col: ColumnType, event: MouseEvent): void {

package/igx-ts/hierarchical-grid/hierarchical-grid-summaries/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 { IgxHierarchicalGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [NoopAnimationsModule, IgxHierarchicalGridModule, <%=ClassName%>]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/hierarchical-grid/hierarchical-grid-summaries/files/src/app/__path__/{__filePrefix__.component.ts → __filePrefix__.ts}

@@ -5,12 +5,11 @@ import { IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public localData: Artist[] = ARTISTS;
   public customSummary = CustomSummary;
 }

package/igx-ts/input-group/default/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();
+  });
+});

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

@@ -28,9 +28,8 @@ interface Genre {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     ReactiveFormsModule,
     IgxSelectComponent,
@@ -53,7 +52,7 @@ interface Genre {
     IgxRippleDirective
   ]
 })
-export class <%=ClassName%>Component implements OnInit {
+export class <%=ClassName%> implements OnInit {
   public genres!: Genre[];
   public user!: FormGroup;
   public minTime = '06:15:30';

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

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

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

@@ -9,13 +9,12 @@ import {
 
 @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, IgxLinearGaugeCoreModule]
 })
-export class <%=ClassName%>Component implements AfterViewInit {
+export class <%=ClassName%> implements AfterViewInit {
   public needleShape = LinearGraphNeedleShape
 
   @ViewChild('linearGauge', { static: true })

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

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

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

@@ -23,9 +23,8 @@ interface Contact {
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [
     IgxFilterPipe,
     IgxListItemComponent,
@@ -43,7 +42,7 @@ interface Contact {
     FormsModule
   ]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public title = '<%=name%>';
   public searchContact = '';
   public contacts: Contact[] = [

package/igx-ts/map/default/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 { IgxGeographicMapModule } from 'igniteui-angular-maps';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [IgxGeographicMapModule, NoopAnimationsModule, GeographicMap]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -3,12 +3,11 @@ import { IgxGeographicMapComponent, IgxGeographicMapCoreModule } from 'igniteui-
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [IgxGeographicMapCoreModule]
 })
-export class <%=ClassName%>Component implements AfterViewInit {
+export class <%=ClassName%> implements AfterViewInit {
 
   @ViewChild('map', {static: true})
   public map!: IgxGeographicMapComponent;

package/igx-ts/pivot-grid/default/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 { IgxPivotGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [IgxPivotGridModule, NoopAnimationsModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -4,12 +4,11 @@ import { IPivotConfiguration, IgxPivotNumericAggregate, IgxPivotGridComponent }
 
 @Component({
   selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
   imports: [IgxPivotGridComponent]
 })
-export class <%=ClassName%>Component {
+export class <%=ClassName%> {
   public data = DATA;
   public pivotConfigHierarchy: IPivotConfiguration = {
       columns: [

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

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package/igx-ts/projects/_base/files/AGENTS.md

@@ -0,0 +1,58 @@
+You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Accessibility Requirements
+
+- It MUST pass all AXE checks.
+- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
+
+### Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+- When using external templates/styles, use paths relative to the component TS file.
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+- Do not assume globals like (`new Date()`) are available.
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection
+
+## UI components
+
+- Use `igniteui-angular`.

package/igx-ts/projects/_base/files/__dot__azure/azure-pipelines.yml

@@ -19,5 +19,9 @@ steps:
     continueOnError: true
   - script: npm run build
     displayName: 'Build the project'
-  - script: npm run test -- --watch=false --browsers ChromeHeadless
+  - script: npx playwright install chromium-headless-shell
+    displayName: 'Install Playwright browsers'
+  - script: npm run test -- --watch=false
     displayName: 'Run tests'
+    env:
+      CI: 'true'