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

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

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

@@ -0,0 +1,11 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { IgxLayoutDirective, IgxCalendarComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  encapsulation: ViewEncapsulation.None,
+  imports: [IgxLayoutDirective, IgxCalendarComponent]
+})
+export class <%=ClassName%> { }

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

@@ -0,0 +1,13 @@
+<p>igx-carousel component.</p>
+<p>You can read more about configuring the igx-carousel component in the 
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/README.md" target="_blank">README</a> or the 
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel" target="_blank">official documentation page</a>.</p>
+<div class="carousel-container">
+  <igx-carousel [interval]="interval" [pause]="pause" [loop]="loop">
+    @for (slide of slides; track slide) {
+      <igx-slide [active]="!!slide.active">
+        <img [src]="slide.image">
+      </igx-slide>
+    }
+  </igx-carousel>
+</div>

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

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

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { IgxCarouselComponent, IgxSlideComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxCarouselComponent, IgxSlideComponent]
+})
+export class <%=ClassName%> implements OnInit {
+  public slides: Slide[] = [];
+  public interval = 3000;
+  public pause = true;
+  public loop = true;
+
+  public ngOnInit() {
+    this.addNewSlide();
+  }
+
+  public addNewSlide() {
+    this.slides.push(
+      { image: 'assets/slide1@x2.jpg' },
+      { image: 'assets/slide2@x2.jpg' },
+      { image: 'assets/slide3@x2.jpg' },
+      { image: 'assets/slide4@x2.jpg' }
+    );
+  }
+}
+
+interface Slide {
+  image: string;
+  active?: boolean;
+}

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { IgxCategoryChartModule } from 'igniteui-angular-charts';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormsModule, IgxCategoryChartModule, <%=ClassName%>],
+      teardown: { destroyAfterEach: false }
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { CategoryChartType, IgxCategoryChartModule } from 'igniteui-angular-charts';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [FormsModule, IgxCategoryChartModule]
+})
+export class <%=ClassName%> {
+  public chartType = CategoryChartType.Auto;
+
+  public data = [
+    { CountryName: 'China', Pop1995: 1216, Pop2005: 1297, },
+    { CountryName: 'India', Pop1995: 920, Pop2005: 1090, },
+    { CountryName: 'United States', Pop1995: 266, Pop2005: 295, },
+    { CountryName: 'Indonesia', Pop1995: 197, Pop2005: 229, },
+    { CountryName: 'Brazil', Pop1995: 161, Pop2005: 186, }
+  ];
+}

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

@@ -0,0 +1,30 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>igx-chip components inside igx-chips-area</p>
+  <p>You can read more about configuring the igx-chip component in the
+    <a href="https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/chips/README.md"
+    target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/chip" target="_blank">official
+      documentation</a>.</p>
+  <span class="header">Selected Events</span>
+  <div class="chipsArea">
+    <igx-chips-area #chipsArea class="chiparea">
+      @for (chip of chipList; track chip.id) {
+        <igx-chip class="chipStyle" [id]="chip.id" [removable]="true" (remove)="chipRemoved($event)">
+          <span #label [class]="'igx-chip__text'">{{chip.name}}</span>
+        </igx-chip>
+      }
+    </igx-chips-area>
+  </div>
+  <div class="chips">
+    <button #openButton igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown">Talks</button>
+    <igx-drop-down #dropdown (selectionChanging)="itemSelection($event)">
+      @for (item of dropDownList; track item.id) {
+        <igx-drop-down-item [value]="item.name">
+          <div class="ig-drop-down__item-template">
+            <span>{{item.name}}</span>
+          </div>
+        </igx-drop-down-item>
+      }
+    </igx-drop-down>
+  </div>
+</div>

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

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

@@ -0,0 +1,121 @@
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import {
+  CloseScrollStrategy,
+  ConnectedPositioningStrategy,
+  HorizontalAlignment,
+  IBaseChipEventArgs,
+  IgxChipsAreaComponent,
+  IgxDropDownComponent,
+  ISelectionEventArgs,
+  OverlaySettings,
+  VerticalAlignment,
+  IgxLayoutDirective,
+  IgxChipComponent,
+  IgxButtonDirective,
+  IgxDropDownItemNavigationDirective,
+  IgxDropDownItemComponent,
+} from '<%=igxPackage%>';
+
+interface NamedEntry {
+  id: string;
+  name: string;
+}
+
+@Component({
+ selector: 'app-<%=filePrefix%>',
+ templateUrl: './<%=filePrefix%>.html',
+ styleUrl: './<%=filePrefix%>.scss',
+ imports: [
+    IgxLayoutDirective,
+    IgxChipsAreaComponent,
+    IgxChipComponent,
+    IgxButtonDirective,
+    IgxDropDownItemNavigationDirective,
+    IgxDropDownComponent,
+    IgxDropDownItemComponent,
+  ]
+})
+export class <%=ClassName%> {
+  public dropDownList: NamedEntry[] = [
+    {
+     id: '1',
+     name: 'Bug fixing for smart devices'
+    },
+    {
+     id: '2',
+     name: 'The True Purpose of Design Systems'
+    },
+    {
+     id: '3',
+     name: 'The IoT is dead, long live the internet'
+    },
+    {
+     id: '4',
+     name: 'Micro frontends in practice'
+    },
+    {
+     id: '5',
+     name: 'Lessons about API testing'
+    },
+    {
+     id: '6',
+     name: 'Scaling big with Apache Kafka'
+    },
+    {
+     id: '7',
+     name: 'Last minute performance testing'
+    },
+    {
+     id: '8',
+     name: 'Sales Skillz for IT People'
+    }
+  ];
+
+  public chipList: NamedEntry[] = [];
+
+  @ViewChild('chipsArea', { static: true, read: IgxChipsAreaComponent })
+  public chipsArea!: IgxChipsAreaComponent;
+
+  @ViewChild(IgxDropDownComponent, { static: true })
+  public igxDropDown!: IgxDropDownComponent;
+
+  private positionSettings = {
+    horizontalStartPoint: HorizontalAlignment.Left,
+    verticalStartPoint: VerticalAlignment.Bottom
+  };
+
+  private overlaySettings: OverlaySettings = {
+    closeOnOutsideClick: true,
+    modal: false,
+    positionStrategy: new ConnectedPositioningStrategy(this.positionSettings),
+    scrollStrategy: new CloseScrollStrategy()
+  };
+
+  constructor(public cdr: ChangeDetectorRef) { }
+
+  public chipRemoved(event: IBaseChipEventArgs) {
+    this.chipList = this.chipList.filter((item) => {
+      return item.id !== event.owner.id;
+    });
+    this.cdr.detectChanges();
+  }
+
+  public toggleDropDown(ev: MouseEvent) {
+    this.overlaySettings.target = ev.target as HTMLButtonElement;
+    this.igxDropDown.toggle(this.overlaySettings);
+  }
+
+  public itemSelection(ev: ISelectionEventArgs) {
+    const item = this.dropDownList.find((val) => val.name === ev.newSelection.value);
+    if (!item) {
+      return;
+    }
+    const match = this.chipList.find((val) => val.name === item.name);
+    if (!match) {
+      this.chipList.push({
+        id: item.id,
+        name: item.name
+      });
+    }
+  }
+}

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

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

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { localData, State } from './local-data';
+import {
+  IgxComboComponent,
+  IgxComboItemDirective,
+  IgxComboHeaderDirective,
+  IgxComboFooterDirective,
+} from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxComboComponent,
+    IgxComboItemDirective,
+    IgxComboHeaderDirective,
+    IgxComboFooterDirective,
+  ]
+})
+export class <%=ClassName%> {
+  public localData: State[] = localData;
+}

package/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,148 @@
+<div class="grid__wrapper">
+  <div class="sample__header">
+    <div class="switch-sample">
+      <h5 class="switch-sample__title">Boston Marathon 2020</h5>
+      <igx-switch [(ngModel)]="live" [disabled]="isFinished" title="Start/Stop the marathon"> <span
+          class="switch-sample__label">Live</span>
+      </igx-switch>
+    </div>
+    <igx-input-group>
+      <input class="gridSample__filter" igxInput type="text" placeholder="Filter by country" (input)="filter($event)">
+    </igx-input-group>
+  </div>
+  <div class="grid__wrapper__inner">
+    <igx-grid #grid1 igxPreventDocumentScroll [data]="localData" height="600px" displayDensity="cosy"
+      [allowFiltering]="true" filterMode="excelStyleFilter" [allowAdvancedFiltering]="true">
+
+      <igx-paginator #paginator [perPage]="10"></igx-paginator>
+
+      <igx-column header="Rank" width="12%" field="Id" [sortable]="true" [filterable]="false">
+        <ng-template igxCell let-cell="cell">
+          <div class="cell__inner">
+            <div>{{ paginator.page * paginator.perPage + cell.row.index + 1 }}</div>
+            @if (isTop3(cell)) {
+              <ng-container>
+                @if (cell.row.index === 0) {
+                  <span class="cup">
+                    <img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
+                  </span>
+                }
+                @if (cell.row.index === 1) {
+                  <span class="cup">
+                    <img src="assets/images/trophy_silver.svg" alt="Second place Trophy image" />
+                  </span>
+                }
+                @if (cell.row.index === 2) {
+                  <span class="cup">
+                    <img src="assets/images/trophy_bronze.svg" alt="Third place Trophy image" />
+                  </span>
+                }
+              </ng-container>
+            }
+          </div>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="Name" header="Athlete" [width]="athleteColumnWidth" [hasSummary]="true">
+        <ng-template igxCell let-cell="cell">
+          <div class="cell__inner">
+            <igx-avatar [src]="cell.row.data.Avatar" [shape]="'square'" size="small"> </igx-avatar><span
+              class="athlete_name">{{ cell.value }}</span>
+            @if (live) {
+              <igx-badge [type]="getBadgeType(cell)" [icon]="getIconType(cell)"></igx-badge>
+            }
+          </div>
+
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="SpeedEntries" header="Speed" width="23%" [filterable]="false" [hasSummary]="true"
+        [summaries]="speedSummary">
+        <ng-template igxCell let-val>
+          <igx-sparkline height="40px" width="190px" [dataSource]="val" valueMemberPath="Speed"
+            [displayType]="displayType.Line" [minimum]="0" [lineThickness]="2" brush="rgb(0, 153, 255)">
+          </igx-sparkline>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="TrackProgress" header="Progress" [filterable]="false" width="10%">
+        <ng-template igxCell let-val let-cell="cell">
+          <div class="linear-bar-container">
+            <igx-circular-bar [value]="val" [max]="100" [animate]="true" [textVisibility]="true"></igx-circular-bar>
+          </div>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="BeatsPerMinute" header="Heart Rate (bpm)" width="15%" [hasSummary]="true" dataType="number"
+        [summaries]="bnpSummary" [hidden]="hideBeatsPerMinute" [filterable]="false">
+      </igx-column>
+
+      <igx-column field="TopSpeed" header="Top Speed" width="15%" dataType="number" [hasSummary]="true"
+        [summaries]="topSpeedSummary" [filterable]="false" [hidden]="live">
+        <ng-template igxCell let-val>
+          <div class="cell__inner">
+            {{ val | number: '1.1-5' }}
+          </div>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="CountryFlag" header="Country" width="10%" [filterable]="false">
+        <ng-template igxCell let-cell="cell">
+          <div class="cell__inner_2">
+            <span>
+              <img [src]="cell.value" class="flag" />
+            </span>
+          </div>
+        </ng-template>
+      </igx-column>
+
+      <igx-column field="CountryName" [hidden]="true">
+      </igx-column>
+    </igx-grid>
+
+    <div class="s-overlay" [hidden]="!showWinnerOverlay" #winnerAlert>
+      <div class="s-overlay__inner">
+        <div class="s-overlay">
+          <div class="s-overlay__heading">
+            <span>
+              <img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
+              <span>Winner</span>
+              <img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
+            </span>
+          </div>
+          <div class="s-overlay__players">
+            <div class="s-overlay__player" [class.s-overlay__player--winner]="hasWinner">
+              <igx-avatar size="large" [shape]="'square'" [src]="winner.Avatar"></igx-avatar>
+              <p class="s-overlay__player-name">{{ winner.Name }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="s-overlay s-overlay--finish" [hidden]="!showFinishedOverlay" #finishedAlert>
+      <div class="s-overlay__inner">
+        <div class="s-overlay__heading s-overlay__heading--finish">
+          <span>Finish</span>
+        </div>
+        <div class="s-overlay__players">
+          @for (player of top3; track $index; let i = $index) {
+            <ng-container>
+              <div class="s-overlay__player"
+                [class.s-overlay__player--winner]="i === 0"
+                [class.s-overlay__player--second]="i === 1"
+                [class.s-overlay__player--third]="i === 2">
+                <div class="s-overlay__trophy">
+                  <span>{{i + 1}}</span>
+                  <img [src]="getTrophyUrl(i)" alt="First place Trophy image" />
+                </div>
+                <igx-avatar [size]="i === 0 ? 'large': 'medium'" [shape]="'square'" [src]="player.Avatar"></igx-avatar>
+                <p class="s-overlay__player-name">{{ player.Name }}</p>
+              </div>
+            </ng-container>
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/igx-ts/custom-templates/awesome-grid/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();
+  });
+});