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

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

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

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

@@ -1,35 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { NgFor } from '@angular/common';
-import { IgxCarouselComponent, IgxSlideComponent } from '<%=igxPackage%>';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
-  imports: [IgxCarouselComponent, NgFor, IgxSlideComponent]
-})
-export class <%=ClassName%>Component 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__.component.html

@@ -1,21 +0,0 @@
-<p><%=description%></p>
-<div>
-  <span>Chart Type:</span>
-  <select [(ngModel)]="chartType">
-    <option>Auto</option>
-    <option>Area</option>
-    <option>Line</option>
-    <option>Column</option>
-    <option>Point</option>
-    <option>Spline</option>
-    <option>SplineArea</option>
-    <option>StepArea</option>
-    <option>StepLine</option>
-    <option>Waterfall</option>
-  </select>
-</div>
-<igx-category-chart height="550px" width="100%"
-    chartTitle="Population per Country (millions)"
-    [chartType]="chartType"
-    [dataSource]="data">
-</igx-category-chart>

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

@@ -1,3 +0,0 @@
-:host {
-  width: 100%;
-}

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

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

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

@@ -1,22 +0,0 @@
-import { Component } from '@angular/core';
-import { CategoryChartType, IgxCategoryChartModule } from 'igniteui-angular-charts';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
-  imports: [FormsModule, IgxCategoryChartModule]
-})
-export class <%=ClassName%>Component {
-  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__.component.html

@@ -1,26 +0,0 @@
-<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">
-      <igx-chip class="chipStyle" *ngFor="let chip of chipList" [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)">
-      <igx-drop-down-item *ngFor="let item of dropDownList" [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__.component.scss

@@ -1,22 +0,0 @@
-.chips {
-  display: flex;
-  flex-flow: column;
-  padding-top: 20px;
-  padding-right: 400px;
-}
-
-.chipsArea {
-  width: 500px;
-  height: auto;
-  min-height: 100px;
-  border: 2px solid lightgray;
-}
-
-.chipStyle {
-  margin: auto;
-  padding: 8px;
-}
-
-.header {
-  text-align: center;
-}

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

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

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

@@ -1,124 +0,0 @@
-import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
-import {
-  CloseScrollStrategy,
-  ConnectedPositioningStrategy,
-  HorizontalAlignment,
-  IBaseChipEventArgs,
-  IgxChipsAreaComponent,
-  IgxDropDownComponent,
-  ISelectionEventArgs,
-  OverlaySettings,
-  VerticalAlignment,
-  IgxLayoutDirective,
-  IgxChipComponent,
-  IgxButtonDirective,
-  IgxDropDownItemNavigationDirective,
-  IgxDropDownItemComponent,
-} from '<%=igxPackage%>';
-import { NgFor } from '@angular/common';
-
-interface NamedEntry {
-  id: string;
-  name: string;
-}
-
-@Component({
- selector: 'app-<%=filePrefix%>',
- styleUrls: ['./<%=filePrefix%>.component.scss'],
- templateUrl: './<%=filePrefix%>.component.html',
- standalone: true,
- imports: [
-    IgxLayoutDirective,
-    IgxChipsAreaComponent,
-    NgFor,
-    IgxChipComponent,
-    IgxButtonDirective,
-    IgxDropDownItemNavigationDirective,
-    IgxDropDownComponent,
-    IgxDropDownItemComponent,
-  ]
-})
-export class <%=ClassName%>Component {
-  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__.component.html

@@ -1,31 +0,0 @@
-<p>igx-combo component with templating.</p>
-<p>You can read more about configuring the igx-combo component in the
-<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md" target="_blank">README</a> or the
-<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo" target="_blank">official documentation</a>.</p>
-
-<igx-combo #combo3 class="input-container" width="300px"
-  [data]="localData"
-  [valueKey]="'name'"
-  [groupKey]="'region'"
-  placeholder="Location(s)"
-  [itemsMaxHeight]="250"
-  searchPlaceholder="Search..."
-  [allowCustomValues]="true"
->
-
-  <ng-template igxComboItem let-display let-key="valueKey">
-    <div class="item">
-      <span class="state">{{ display.name }} - </span>
-      <span class="region">{{ display.region }}</span>
-    </div>
-  </ng-template>
-
-  <ng-template igxComboHeader>
-    <div class="header-class">State - Region</div>
-  </ng-template>
-
-  <ng-template igxComboFooter>
-    <div class="footer-class">Infragistics 2018</div>
-  </ng-template>
-
-</igx-combo>

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

@@ -1,18 +0,0 @@
-.combo-container {
-  margin: 10px;
-}
-
-.header-class,
-.footer-class,
-.empty-class {
-  text-align: center;
-  font-style: italic;
-  font-weight: bold;
-}
-
-:host {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}

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

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

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

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

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

@@ -1,134 +0,0 @@
-<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>
-            <ng-container *ngIf="isTop3(cell)">
-              <span class="cup" *ngIf="cell.row.index === 0">
-                <img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
-              </span>
-              <span class="cup" *ngIf="cell.row.index === 1">
-                <img src="assets/images/trophy_silver.svg" alt="Second place Trophy image" />
-              </span>
-              <span class="cup" *ngIf="cell.row.index === 2">
-                <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>
-            <igx-badge *ngIf="live" [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" [ngClass]="{'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">
-          <ng-container *ngFor="let player of top3; let i = index">
-            <div class="s-overlay__player"
-              [ngClass]="i === 0 ? 's-overlay__player--winner' : i === 1 ? 's-overlay__player--second' : 's-overlay__player--third'">
-              <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>