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

package/IgniteUIForAngularTemplate.d.ts

@@ -4,7 +4,8 @@ export declare class IgniteUIForAngularTemplate implements Template {
     components: string[];
     controlGroup: string;
     listInComponentTemplates: boolean;
-    addAsNgModelDeclaration: boolean;
+    addAsNgModuleDeclaration: boolean;
+    addAsNgModuleImport: boolean;
     listInCustomTemplates: boolean;
     id: string;
     name: string;

package/IgniteUIForAngularTemplate.js

@@ -33,7 +33,8 @@ class IgniteUIForAngularTemplate {
     constructor(rootPath) {
         this.rootPath = rootPath;
         this.listInComponentTemplates = true;
-        this.addAsNgModelDeclaration = true;
+        this.addAsNgModuleDeclaration = false;
+        this.addAsNgModuleImport = true;
         this.listInCustomTemplates = false;
         this.framework = "angular";
         this.projectType = "igx-ts";
@@ -60,22 +61,19 @@ class IgniteUIForAngularTemplate {
     }
     //TODO: rename name to fullName for clarity + in all other places fileName to fullName
     registerInProject(projectPath, name, options) {
-        let modulePath = "app.module.ts";
+        let modulePath = "app-module.ts";
         if (options && options.modulePath) {
             modulePath = options.modulePath;
         }
         // D.P. Don't use the top-level import as that chains import of typescript
         // which slows down execution of the entire component noticeably (template loading)
         // https://www.typescriptlang.org/docs/handbook/modules.html#dynamic-module-loading-in-nodejs
-        // tslint:disable-next-line:variable-name
-        const TsUpdate = 
-        // tslint:disable-next-line:no-submodule-imports
-        require("@igniteui/angular-templates").AngularTypeScriptFileUpdate;
+        const TsUpdate = require("./AngularTypeScriptFileUpdate").AngularTypeScriptFileUpdate;
         const mainModulePath = path.join(projectPath, `src/app/${modulePath}`);
         const folderName = this.folderName(name);
         const fileName = this.fileName(name);
-        const componentFilePath = path.join(projectPath, `src/app/${folderName}/${fileName}.component.ts`);
-        const className = `${cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name))}Component`;
+        const componentFilePath = path.join(projectPath, `src/app/${folderName}/${fileName}.ts`);
+        const className = `${cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name))}`;
         // standalone components
         if (!this.fileExists(mainModulePath)) {
             const appRoutesPath = "src/app/app.routes.ts";
@@ -105,11 +103,11 @@ class IgniteUIForAngularTemplate {
             return;
         }
         // ngModule based components
-        if (!(options && options.skipRoute) && this.fileExists("src/app/app-routing.module.ts")) {
+        if (!(options && options.skipRoute) && this.fileExists("src/app/app-routing-module.ts")) {
             //1) import the component class name,
             //2) and populate the Routes array with the path and component
             //for example: { path: 'combo', component: ComboComponent }
-            const routingModulePath = path.join(projectPath, "src/app/app-routing.module.ts");
+            const routingModulePath = path.join(projectPath, "src/app/app-routing-module.ts");
             const routingModule = new TsUpdate(routingModulePath, false, { indentSize: 2, singleQuotes: true });
             routingModule.addRoute({
                 modulePath: cli_core_1.Util.relativePath(routingModulePath, componentFilePath, true, true),
@@ -123,9 +121,10 @@ class IgniteUIForAngularTemplate {
         //4) populate the declarations portion of the @NgModule with the component class name.
         const mainModule = new TsUpdate(mainModulePath, false, { indentSize: 2, singleQuotes: true });
         mainModule.addNgModuleMeta({
-            declare: this.addAsNgModelDeclaration ? [className] : [],
+            declare: this.addAsNgModuleDeclaration ? [className] : [],
+            import: this.addAsNgModuleImport ? [className] : [],
             from: cli_core_1.Util.relativePath(mainModulePath, componentFilePath, true, true),
-            export: modulePath !== "app.module.ts" ? [className] : []
+            export: modulePath !== "app-module.ts" ? [className] : []
         }, cli_core_1.Util.applyDelimiters(this.getBaseVariables(name), this.delimiters.content), true // multiline
         );
         // import IgxModules and other dependencies

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

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

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {
+	IgxSwitchComponent,
+	IgxAccordionComponent,
+	IgxExpansionPanelComponent,
+	IgxExpansionPanelHeaderComponent,
+	IgxExpansionPanelTitleDirective,
+	IgxExpansionPanelBodyComponent,
+  } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxSwitchComponent,
+    ReactiveFormsModule,
+    FormsModule,
+    IgxAccordionComponent,
+    IgxExpansionPanelComponent,
+    IgxExpansionPanelHeaderComponent,
+    IgxExpansionPanelTitleDirective,
+    IgxExpansionPanelBodyComponent,
+  ],
+})
+export class <%=ClassName%> {
+  public singleBranchExpand = false;
+}

package/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,22 @@
+<p>The <b>igx-autocomplete</b> directive provides a way to enhance a text input by showing a panel of suggested options provided by the developer.</p>
+<p>You can read more about configuring the <b>igx-autocomplete</b> in the 
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/autocomplete/README.md" target="_blank">README</a> or the 
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html" target="_blank">official documentation</a>.</p>
+
+<section class="sample-content">
+  <article class="sample-column">
+    <form class="input-group-form">
+      <igx-input-group>
+        <label igxLabel for="town">Town</label>
+        <input igxInput name="town" type="text" [igxAutocomplete]="townsPanel" [(ngModel)]="townSelected" />
+      </igx-input-group>
+      <igx-drop-down #townsPanel maxHeight="300px">
+        @for (town of towns | <%=camelCaseName%>StartsWith:townSelected; track town) {
+          <igx-drop-down-item [value]="town">
+            {{town}}
+          </igx-drop-down-item>
+        }
+      </igx-drop-down>
+    </form>
+  </article>
+</section>

package/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.spec.ts

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

package/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,43 @@
+import { Component, Pipe, PipeTransform, forwardRef } from '@angular/core';
+import { Towns } from './towns-data';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {
+  IgxInputGroupComponent,
+  IgxLabelDirective,
+  IgxInputDirective,
+  IgxAutocompleteDirective,
+  IgxDropDownComponent,
+  IgxDropDownItemComponent,
+} from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    ReactiveFormsModule,
+    FormsModule,
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    IgxInputDirective,
+    IgxAutocompleteDirective,
+    IgxDropDownComponent,
+    IgxDropDownItemComponent,
+    forwardRef(() => <%=ClassName%>PipeStartsWith),
+  ],
+})
+export class <%=ClassName%> {
+  public towns: string[];
+  public townSelected = '';
+
+  constructor() {
+    this.towns = Towns;
+  }
+}
+
+@Pipe({ name: '<%=camelCaseName%>StartsWith' })
+export class <%=ClassName%>PipeStartsWith implements PipeTransform {
+  public transform(collection: string[], term = '') {
+    return collection.filter(item => item.toLowerCase().startsWith(term.trim().toLowerCase()));
+  }
+}

package/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,40 @@
+<div class="content-wrapper">
+  <p>The <b>igx-autocomplete</b> directive provides a way to enhance a text input by showing a panel of suggested options provided by the developer.<br />
+  Using the <b>igx-drop-down</b> as a provider, allows using its functionalities like grouping, templating, etc.</p>
+  <p>You can read more about configuring those components, using the following links:</p>
+  <ul>
+    <li>
+      <b>igx-autocomplete</b> -
+      <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/autocomplete/README.md" target="_blank">README</a> or the
+      <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html" target="_blank">official documentation</a>.
+    </li>
+    <li>
+      <b>igx-drop-down</b> -
+      <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/README.md" target="_blank">README</a> or the
+      <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop_down.html" target="_blank">official documentation</a>.
+    </li>
+  </ul>
+  <p>The following sample demonstrates igx-drop-down with defined groups:</p>
+  <div class="enhanced-groups">
+    <igx-input-group>
+      <label igxLabel for="townEhanced">Town</label>
+      <input igxInput name="townEhanced" type="text" [igxAutocomplete]="townsEnhancedPanel"
+        [(ngModel)]="townSelected"/>
+    </igx-input-group>
+    <igx-drop-down #townsEnhancedPanel maxHeight="300px" (selectionChanging)="getPostalCode($event)">
+      @for (eRegion of regions | <%=camelCaseName%>RegionContains:townSelected; track eRegion) {
+        <igx-drop-down-item-group
+          [label]="eRegion.name">
+          @for (town of eRegion.towns | <%=camelCaseName%>StartsWith:townSelected; track town) {
+            <igx-drop-down-item
+              [value]="town.name">
+              {{town.name}}
+            </igx-drop-down-item>
+          }
+        </igx-drop-down-item-group>
+      }
+    </igx-drop-down>
+
+    <igx-toast #message>Postal Code: {{postalCode}}</igx-toast>
+  </div>
+</div>

package/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.spec.ts

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

package/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,86 @@
+import { Component, Pipe, PipeTransform, ViewChild, forwardRef } from '@angular/core';
+import {
+  IgxToastComponent,
+  ISelectionEventArgs,
+  PositionSettings,
+  HorizontalAlignment,
+  VerticalAlignment,
+  IgxAutocompleteDirective,
+  IgxDropDownComponent,
+  IgxDropDownGroupComponent,
+  IgxDropDownItemComponent,
+  IgxInputDirective,
+  IgxInputGroupComponent,
+  IgxLabelDirective,
+} from '<%=igxPackage%>';
+import { Region, Town, townsExtended } from './towns-data-extended';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxInputGroupComponent,
+    IgxLabelDirective,
+    ReactiveFormsModule,
+    IgxInputDirective,
+    IgxAutocompleteDirective,
+    FormsModule,
+    IgxDropDownComponent,
+    IgxDropDownGroupComponent,
+    IgxDropDownItemComponent,
+    IgxToastComponent,
+    forwardRef(() => <%=ClassName%>PipeStartsWith),
+    forwardRef(() => <%=ClassName%>RegionContains)
+  ]
+})
+export class <%=ClassName%> {
+  public regions!: Region[];
+  public townSelected!: string;
+  public postalCode?: number;
+  private messagePositionSettings: PositionSettings = {
+    horizontalDirection: HorizontalAlignment.Center,
+    verticalDirection: VerticalAlignment.Middle
+  };
+
+  @ViewChild(IgxToastComponent, { static: true })
+  public toast!: IgxToastComponent;
+
+  constructor() {
+    this.regions = townsExtended;
+  }
+
+  public getPostalCode(e: ISelectionEventArgs): void {
+
+    // Flatten the structure of the regions array
+    const allTowns = this.regions.map(region => region.towns).reduce((prev, curr) => prev.concat(curr), []);
+
+    const townEntry = allTowns.find(t => t.name === e.newSelection.value);
+
+    this.postalCode = townEntry?.postalCode;
+    this.toast.open(undefined, this.messagePositionSettings);
+  }
+}
+
+@Pipe({ name: '<%=camelCaseName%>StartsWith' })
+export class  <%=ClassName%>PipeStartsWith implements PipeTransform {
+  public transform(collection: Town[], term = '') {
+    return collection.filter(item => item.name.toLowerCase().startsWith(term.trim().toLowerCase()));
+  }
+}
+
+@Pipe({ name: '<%=camelCaseName%>RegionContains' })
+export class <%=ClassName%>RegionContains implements PipeTransform {
+  transform(regions: Region[], term = '') {
+    return this.filterRegions(regions, term);
+  }
+
+  private filterRegions(regions: Region[], term: string) {
+    return regions.filter(region => this.filterTowns(region.towns, term.toLowerCase()).length > 0);
+  }
+
+  private filterTowns(towns: Town[], term: string) {
+    return towns.filter(town => town.name.toLowerCase().startsWith(term));
+  }
+}

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

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

package/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,238 @@
+import {
+	AfterViewInit,
+	Component,
+	ViewEncapsulation,
+	ViewChild,
+  } from '@angular/core';
+  import { IgxButtonDirective, IgxLayoutDirective } from '<%=igxPackage%>';
+  import {
+	IgxBulletGraphComponent,
+	IgxLinearGraphRangeComponent,
+	IgxBulletGraphCoreModule,
+  } from 'igniteui-angular-gauges';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  encapsulation: ViewEncapsulation.None,
+  imports: [IgxLayoutDirective, IgxButtonDirective, IgxBulletGraphCoreModule]
+})
+export class <%=ClassName%> implements AfterViewInit {
+  @ViewChild('bulletGraph', { static: true })
+  public bulletGraph!: IgxBulletGraphComponent;
+
+  public ngAfterViewInit(): void {
+    // enabling animation duration (in milliseconds)
+    this.bulletGraph.transitionDuration = 500;
+    this.AnimateToGauge3();
+  }
+
+  public AnimateToGauge3(): void {
+    this.bulletGraph.minimumValue = 0;
+    this.bulletGraph.maximumValue = 120;
+    this.bulletGraph.value = 70;
+    this.bulletGraph.interval = 10;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 10;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = '#000000';
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = '#000000';
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 90;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.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;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 80;
+    range3.endValue = 120;
+
+    this.bulletGraph.rangeBrushes  = [ '#FF9800', '#F96232', '#C62828'];
+    this.bulletGraph.rangeOutlines = [ '#FF9800', '#F96232', '#C62828'];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+    this.bulletGraph.ranges.add(range3);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
+    this.bulletGraph.scaleBackgroundOutline = 'gray';
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = '#f7f7f7';
+    this.bulletGraph.backingOutline = '#d1d1d1';
+    this.bulletGraph.backingStrokeThickness = 0;
+
+  }
+
+  public AnimateToGauge2(): void {
+    this.bulletGraph.minimumValue = 100;
+    this.bulletGraph.maximumValue = 200;
+    this.bulletGraph.value = 120;
+    this.bulletGraph.interval = 10;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 10;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = '#000000';
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = '#000000';
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 180;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.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.bulletGraph.rangeBrushes  = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.bulletGraph.rangeOutlines = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+    this.bulletGraph.ranges.add(range3);
+    this.bulletGraph.ranges.add(range4);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
+    this.bulletGraph.scaleBackgroundOutline = 'gray';
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = '#f7f7f7';
+    this.bulletGraph.backingOutline = '#d1d1d1';
+    this.bulletGraph.backingStrokeThickness = 0;
+  }
+
+  public AnimateToGauge1(): void {
+    this.bulletGraph.minimumValue = 0;
+    this.bulletGraph.maximumValue = 80;
+    this.bulletGraph.value = 70;
+    this.bulletGraph.interval = 20;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 20;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = '#000000';
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = '#000000';
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 60;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.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.bulletGraph.rangeBrushes  = [ '#a4bd29', '#F86232' ];
+    this.bulletGraph.rangeOutlines = [ '#a4bd29', '#F86232' ];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
+    this.bulletGraph.scaleBackgroundOutline = 'gray';
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = '#f7f7f7';
+    this.bulletGraph.backingOutline = '#d1d1d1';
+    this.bulletGraph.backingStrokeThickness = 0;
+  }
+}

package/igx-ts/bullet-graph/default/index.js

@@ -12,7 +12,7 @@ class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.projectType = "igx-ts";
         this.name = "Bullet Graph";
         this.description = "IgxBulletGraph 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 IgxBulletGraphTemplate();