@igniteui/angular-templates 21.1.1491 → 21.1.1500-rc.0

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__.ts

@@ -0,0 +1,242 @@
+import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { IgxLayoutDirective, IgxButtonDirective } from '<%=igxPackage%>';
+import {
+  IgxLinearGaugeComponent,
+  IgxLinearGraphRangeComponent,
+  LinearGraphNeedleShape,
+  IgxLinearGaugeCoreModule,
+} from 'igniteui-angular-gauges';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  encapsulation: ViewEncapsulation.None,
+  imports: [IgxLayoutDirective, IgxButtonDirective, IgxLinearGaugeCoreModule]
+})
+export class <%=ClassName%> implements AfterViewInit {
+  public needleShape = LinearGraphNeedleShape
+
+  @ViewChild('linearGauge', { static: true })
+  public linearGauge!: IgxLinearGaugeComponent;
+
+  public ngAfterViewInit(): void {
+    // enabling animation duration (in milliseconds)
+    this.linearGauge.transitionDuration = 500;
+    this.animateToGauge3();
+  }
+
+  public animateToGauge3(): void {
+    // linear gauge requires settings for these properties:
+    this.linearGauge.minimumValue = 0;
+    this.linearGauge.maximumValue = 100;
+    this.linearGauge.value = 50;
+    this.linearGauge.interval = 10;
+
+    // setting custom appearance of labels
+    this.linearGauge.labelInterval = 10;
+    this.linearGauge.labelExtent = 0.05;
+
+    // setting custom appearance of needle
+    this.linearGauge.isNeedleDraggingEnabled = true;
+    this.linearGauge.needleShape = LinearGraphNeedleShape.Needle;
+    this.linearGauge.needleBrush = '#79797a';
+    this.linearGauge.needleOutline = '#ffffffff';
+    this.linearGauge.needleStrokeThickness = 1;
+    this.linearGauge.needleOuterExtent = 0.9;
+    this.linearGauge.needleInnerExtent = 0.3;
+
+    // setting custom appearance of major/minor ticks
+    this.linearGauge.minorTickCount = 5;
+    this.linearGauge.minorTickEndExtent = 0.10;
+    this.linearGauge.minorTickStartExtent = 0.20;
+    this.linearGauge.minorTickStrokeThickness = 1;
+    this.linearGauge.tickStartExtent = 0.25;
+    this.linearGauge.tickEndExtent = 0.05;
+    this.linearGauge.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 30;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 30;
+    range2.endValue = 70;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 70;
+    range3.endValue = 100;
+
+    this.linearGauge.rangeBrushes = ['#9FB328', '#438C47', '#3F51B5'];
+    this.linearGauge.rangeOutlines = ['#9FB328', '#438C47', '#3F51B5'];
+    this.linearGauge.ranges.clear();
+    this.linearGauge.ranges.add(range1);
+    this.linearGauge.ranges.add(range2);
+    this.linearGauge.ranges.add(range3);
+
+    // setting extent of all gauge ranges
+    for(let i = 0; i <this.linearGauge.ranges.count; i++) {
+      const range = this.linearGauge.ranges.item(i);
+      range.innerStartExtent = 0.075;
+      range.innerEndExtent = 0.075;
+      range.outerStartExtent = 0.65;
+      range.outerEndExtent = 0.65;
+    }
+
+    // setting extent of gauge scale
+    this.linearGauge.scaleStrokeThickness = 0;
+    this.linearGauge.scaleBrush = '#ffffff';
+    this.linearGauge.scaleOutline = '#dbdbdb';
+    this.linearGauge.scaleInnerExtent = 0.075;
+    this.linearGauge.scaleOuterExtent = 0.85;
+    this.linearGauge.scaleStartExtent = 0.05;
+    this.linearGauge.scaleEndExtent = 0.95;
+
+    // setting appearance of backing fill and outline
+    this.linearGauge.backingBrush = '#ffffff';
+    this.linearGauge.backingOutline = '#d1d1d1';
+    this.linearGauge.backingStrokeThickness = 0;
+  }
+
+
+  public animateToGauge2(): void {
+    // linear gauge requires settings for these properties:
+    this.linearGauge.minimumValue = 100;
+    this.linearGauge.maximumValue = 200;
+    this.linearGauge.value = 150;
+    this.linearGauge.interval = 20;
+
+    // setting custom appearance of labels
+    this.linearGauge.labelInterval = 20;
+    this.linearGauge.labelExtent = 0.05;
+
+    // setting custom appearance of needle
+    this.linearGauge.isNeedleDraggingEnabled = true;
+    this.linearGauge.needleShape = LinearGraphNeedleShape.Triangle;
+    this.linearGauge.needleBrush = '#79797a';
+    this.linearGauge.needleOutline = '#ffffffff';
+    this.linearGauge.needleStrokeThickness = 1;
+    this.linearGauge.needleOuterExtent = 0.9;
+    this.linearGauge.needleInnerExtent = 0.3;
+
+    // setting custom appearance of major/minor ticks
+    this.linearGauge.minorTickCount = 4;
+    this.linearGauge.minorTickEndExtent = 0.10;
+    this.linearGauge.minorTickStartExtent = 0.20;
+    this.linearGauge.minorTickStrokeThickness = 1;
+    this.linearGauge.tickStartExtent = 0.25;
+    this.linearGauge.tickEndExtent = 0.05;
+    this.linearGauge.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 100;
+    range1.endValue = 125;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 125;
+    range2.endValue = 150;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 150;
+    range3.endValue = 175;
+    const range4 = new IgxLinearGraphRangeComponent();
+    range4.startValue = 175;
+    range4.endValue = 200;
+
+    this.linearGauge.rangeBrushes = ['#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.linearGauge.rangeOutlines = ['#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.linearGauge.ranges.clear();
+    this.linearGauge.ranges.add(range1);
+    this.linearGauge.ranges.add(range2);
+    this.linearGauge.ranges.add(range3);
+    this.linearGauge.ranges.add(range4);
+
+    // setting extent of all gauge ranges
+    for(let i = 0; i <this.linearGauge.ranges.count; i++) {
+      const range = this.linearGauge.ranges.item(i);
+      range.innerStartExtent = 0.075;
+      range.innerEndExtent = 0.075;
+      range.outerStartExtent = 0.65;
+      range.outerEndExtent = 0.65;
+    }
+
+    // setting extent of gauge scale
+    this.linearGauge.scaleStrokeThickness = 0;
+    this.linearGauge.scaleBrush = '#ffffff';
+    this.linearGauge.scaleOutline = '#dbdbdb';
+    this.linearGauge.scaleInnerExtent = 0.075;
+    this.linearGauge.scaleOuterExtent = 0.85;
+    this.linearGauge.scaleStartExtent = 0.05;
+    this.linearGauge.scaleEndExtent = 0.95;
+
+    // setting appearance of backing fill and outline
+    this.linearGauge.backingBrush = '#ffffff';
+    this.linearGauge.backingOutline = '#d1d1d1';
+    this.linearGauge.backingStrokeThickness = 0;
+  }
+
+  public animateToGauge1(): void {
+    // linear gauge requires settings for these properties:
+    this.linearGauge.minimumValue = 0;
+    this.linearGauge.maximumValue = 80;
+    this.linearGauge.value = 60;
+    this.linearGauge.interval = 20;
+
+    // setting custom appearance of labels
+    this.linearGauge.labelInterval = 20;
+    this.linearGauge.labelExtent = 0.05;
+
+    // setting custom appearance of needle
+    this.linearGauge.isNeedleDraggingEnabled = true;
+    this.linearGauge.needleShape = LinearGraphNeedleShape.Trapezoid;
+    this.linearGauge.needleBrush = '#79797a';
+    this.linearGauge.needleOutline = '#ffffffff';
+    this.linearGauge.needleStrokeThickness = 1;
+    this.linearGauge.needleOuterExtent = 0.9;
+    this.linearGauge.needleInnerExtent = 0.3;
+
+    // setting custom appearance of major/minor ticks
+    this.linearGauge.minorTickCount = 5;
+    this.linearGauge.minorTickEndExtent = 0.10;
+    this.linearGauge.minorTickStartExtent = 0.20;
+    this.linearGauge.minorTickStrokeThickness = 1;
+    this.linearGauge.tickStartExtent = 0.25;
+    this.linearGauge.tickEndExtent = 0.05;
+    this.linearGauge.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 40;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 40;
+    range2.endValue = 80;
+
+    this.linearGauge.rangeBrushes = ['#a4bd29', '#F86232'];
+    this.linearGauge.rangeOutlines = ['#a4bd29', '#F86232'];
+    this.linearGauge.ranges.clear();
+    this.linearGauge.ranges.add(range1);
+    this.linearGauge.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for(let i = 0; i <this.linearGauge.ranges.count; i++) {
+      const range = this.linearGauge.ranges.item(i);
+      range.innerStartExtent = 0.075;
+      range.innerEndExtent = 0.075;
+      range.outerStartExtent = 0.65;
+      range.outerEndExtent = 0.65;
+    }
+
+    // setting extent of gauge scale
+    this.linearGauge.scaleStrokeThickness = 0;
+    this.linearGauge.scaleBrush = '#ffffff';
+    this.linearGauge.scaleOutline = '#dbdbdb';
+    this.linearGauge.scaleInnerExtent = 0.075;
+    this.linearGauge.scaleOuterExtent = 0.85;
+    this.linearGauge.scaleStartExtent = 0.05;
+    this.linearGauge.scaleEndExtent = 0.95;
+
+    // setting appearance of backing fill and outline
+    this.linearGauge.backingBrush = '#ffffff';
+    this.linearGauge.backingOutline = '#d1d1d1';
+    this.linearGauge.backingStrokeThickness = 0;
+  }
+}

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

@@ -12,7 +12,7 @@ class IgxLinearGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.projectType = "igx-ts";
         this.name = "Linear Gauge";
         this.description = "IgxLinearGauge with different animations.";
-        this.packages = ["igniteui-angular-core@~20.1.0", "igniteui-angular-gauges@~20.1.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
+        this.packages = ["igniteui-angular-core@~21.0.0", "igniteui-angular-gauges@~21.0.0", constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxLinearGaugeTemplate();

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

@@ -0,0 +1,36 @@
+<p>igx-list component with filtering.</p>
+<p>You can read more about configuring the igx-list component in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/list/README.md"
+    target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/list" target="_blank">official
+    documentation</a>.
+</p>
+<igx-input-group type="search" class="search">
+  <igx-prefix>
+    <igx-icon>search</igx-icon>
+  </igx-prefix>
+  <input #search igxInput placeholder="Search Contacts" [(ngModel)]="searchContact">
+  @if (search.value.length > 0) {
+    <igx-suffix (click)="searchContact = ''">
+      <igx-icon>clear</igx-icon>
+    </igx-suffix>
+  }
+</igx-input-group>
+<igx-list>
+  <igx-list-item [isHeader]="true"> Contacts </igx-list-item>
+  @for (contact of contacts | igxFilter: filterContacts; track contact) {
+    <igx-list-item #item>
+      <div class="item-container">
+        <div class="contact">
+          <igx-avatar [src]="contact.photo" [shape]="'square'"></igx-avatar>
+          <div class="contact__info">
+            <span class="name">{{ contact.name }}</span>
+            <span class="phone">{{ contact.phone }}</span>
+          </div>
+        </div>
+        <igx-icon class="icon" [class.icon--favorite]="contact.isFavorite" (click)="toggleFavorite(item)">star
+        </igx-icon>
+      </div>
+    </igx-list-item>
+  }
+</igx-list>

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__.ts

@@ -0,0 +1,89 @@
+import { Component } from '@angular/core';
+import {
+  IgxFilterOptions,
+  IgxListItemComponent,
+  IgxInputGroupComponent,
+  IgxPrefixDirective,
+  IgxIconComponent,
+  IgxInputDirective,
+  IgxSuffixDirective,
+  IgxListComponent,
+  IgxAvatarComponent,
+  IgxFilterPipe,
+} from '<%=igxPackage%>';
+
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+interface Contact {
+  isFavorite: boolean;
+  name: string;
+  phone: string;
+  photo: string;
+}
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxFilterPipe,
+    IgxListItemComponent,
+    IgxInputGroupComponent,
+    IgxPrefixDirective,
+    IgxIconComponent,
+    IgxInputDirective,
+    IgxSuffixDirective,
+    IgxListComponent,
+    IgxAvatarComponent,
+    ReactiveFormsModule,
+    FormsModule
+  ]
+})
+export class <%=ClassName%> {
+  public title = '<%=name%>';
+  public searchContact = '';
+  public contacts: Contact[] = [
+    {
+      isFavorite: false,
+      name: 'Terrance Orta',
+      phone: '770-504-2217',
+      photo: 'https://randomuser.me/api/portraits/men/27.jpg'
+    },
+    {
+      isFavorite: true,
+      name: 'Richard Mahoney',
+      phone: '423-676-2869',
+      photo: 'https://randomuser.me/api/portraits/men/1.jpg'
+    },
+    {
+      isFavorite: false,
+      name: 'Donna Price',
+      phone: '859-496-2817',
+      photo: 'https://randomuser.me/api/portraits/women/50.jpg'
+    },
+    {
+      isFavorite: false,
+      name: 'Lisa Landers',
+      phone: '901-747-3428',
+      photo: 'https://randomuser.me/api/portraits/women/3.jpg'
+    },
+    {
+      isFavorite: true,
+      name: 'Dorothy H. Spencer',
+      phone: '573-394-9254',
+      photo: 'https://randomuser.me/api/portraits/women/67.jpg'
+    }
+  ];
+
+  public get filterContacts(): IgxFilterOptions {
+    const fo = new IgxFilterOptions();
+    fo.key = 'name';
+    fo.inputValue = this.searchContact;
+    return fo;
+  }
+
+  public toggleFavorite(item: IgxListItemComponent): void {
+    const contact = this.contacts[item.index - 1];
+    contact.isFavorite = !contact.isFavorite;
+  }
+}

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__.ts

@@ -0,0 +1,18 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { IgxGeographicMapComponent, IgxGeographicMapCoreModule } from 'igniteui-angular-maps';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxGeographicMapCoreModule]
+})
+export class <%=ClassName%> implements AfterViewInit {
+
+  @ViewChild('map', {static: true})
+  public map!: IgxGeographicMapComponent;
+
+  public ngAfterViewInit(): void {
+    this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 };
+  }
+}

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

@@ -11,7 +11,7 @@ class IgxGeographicMapTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForA
         this.projectType = "igx-ts";
         this.name = "Geographic Map";
         this.description = "Basic IgxGeographicMap.";
-        this.packages = ["igniteui-angular-core@~20.1.0", "igniteui-angular-charts@~20.1.0", "igniteui-angular-maps@~20.1.0"];
+        this.packages = ["igniteui-angular-core@~21.0.0", "igniteui-angular-charts@~21.0.0", "igniteui-angular-maps@~21.0.0"];
     }
 }
 module.exports = new IgxGeographicMapTemplate();

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__.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { DATA } from './data';
+import { IPivotConfiguration, IgxPivotNumericAggregate, IgxPivotGridComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxPivotGridComponent]
+})
+export class <%=ClassName%> {
+  public data = DATA;
+  public pivotConfigHierarchy: IPivotConfiguration = {
+      columns: [
+          {
+
+              memberName: 'Product',
+              memberFunction: (data) => data.Product.Name,
+              enabled: true
+          }
+
+      ],
+      rows: [
+          {
+              memberName: 'Seller',
+              memberFunction: (data) => data.Seller.Name,
+              enabled: true
+          }
+      ],
+      values: [
+          {
+              member: 'NumberOfUnits',
+              aggregate: {
+                  aggregator: IgxPivotNumericAggregate.sum,
+                  key: 'sum',
+                  label: 'Sum'
+              },
+              enabled: true
+
+          }
+      ],
+      filters: null
+  };
+}
+

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'

package/igx-ts/projects/_base/files/__dot__claude/CLAUDE.md

@@ -0,0 +1,3 @@
+Strictly follow the rules in ../AGENTS.md
+
+The canonical AI agent instructions are in [AGENTS.md](../AGENTS.md) in the root directory.