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

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

@@ -0,0 +1,363 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  HostListener,
+  Inject,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+} from '@angular/core';
+import {
+  AbsolutePosition,
+  CellType,
+  IgxGridComponent,
+  IgxPaginatorComponent,
+  IgxNumberSummaryOperand,
+  IgxOverlayService,
+  IgxStringFilteringOperand,
+  IgxSummaryResult,
+  OverlaySettings,
+  IgxSwitchComponent,
+  IgxInputGroupComponent,
+  IgxInputDirective,
+  IgxColumnComponent,
+  IgxCellTemplateDirective,
+  IgxAvatarComponent,
+  IgxBadgeComponent,
+  IgxCircularProgressBarComponent,
+} from '<%=igxPackage%>';
+import {
+  SparklineDisplayType,
+  IgxSparklineCoreModule,
+} from 'igniteui-angular-charts';
+import { Athlete, AthletesData, SpeedEntry } from './services/data';
+import { DecimalPipe } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxSwitchComponent,
+    ReactiveFormsModule,
+    FormsModule,
+    IgxInputGroupComponent,
+    IgxInputDirective,
+    IgxGridComponent,
+    IgxPaginatorComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    IgxAvatarComponent,
+    IgxBadgeComponent,
+    IgxSparklineCoreModule,
+    IgxCircularProgressBarComponent,
+    DecimalPipe,
+  ],
+})
+export class <%=ClassName%> implements OnInit, OnDestroy, AfterViewInit {
+  @ViewChild('grid1', { read: IgxGridComponent, static: true })
+  public grid1!: IgxGridComponent;
+
+  @ViewChild('paginator', { read: IgxPaginatorComponent, static: true })
+  public paginator!: IgxPaginatorComponent;
+
+  @ViewChild('winnerAlert', { static: true })
+  public winnerAlert!: ElementRef;
+
+  @ViewChild('finishedAlert', { static: true })
+  public finishedAlert!: ElementRef;
+
+  public displayType = SparklineDisplayType;
+  public topSpeedSummary = CustomTopSpeedSummary;
+  public bnpSummary = CustomBPMSummary;
+  public speedSummary = CustomSpeedSummary;
+  public localData: Athlete[] = [];
+  public isFinished = false;
+  public hasWinner = false;
+  public athleteColumnWidth = '30%';
+  public showOverlay = false;
+  public overlaySettings!: OverlaySettings;
+  public winner: Athlete = { Avatar: '', Name: '' } as Athlete;
+  public top3: Athlete[] = [];
+  private _live = true;
+  private _timer: any;
+  private windowWidth: any;
+  private _overlayId = '';
+
+  get live(): boolean {
+    return this._live;
+  }
+
+  set live(val: boolean) {
+    this._live = val;
+    if (this._live) {
+      this._timer = setInterval(() => this.ticker(), 1500);
+    } else {
+      clearInterval(this._timer);
+    }
+  }
+
+  get showWinnerOverlay(): boolean {
+    return this.showOverlay && this.hasWinner && !this.isFinished;
+  }
+
+  get showFinishedOverlay(): boolean {
+    return this.showOverlay && this.isFinished;
+  }
+
+  get hideAthleteNumber(): boolean {
+    return this.windowWidth && this.windowWidth < 960;
+  }
+
+  get hideBeatsPerMinute(): boolean {
+    return (this.windowWidth && this.windowWidth < 860) || !this.live;
+  }
+
+  constructor(@Inject(IgxOverlayService) public overlayService: IgxOverlayService) { }
+
+  public ngOnInit(): void {
+    this.localData = AthletesData.slice(0, 30).sort((a, b) => b.TrackProgress - a.TrackProgress);
+    this.localData.forEach(rec => this.getSpeed(rec));
+    this.windowWidth = window.innerWidth;
+    this._timer = setInterval(() => this.ticker(), 1500);
+    this.overlayService.closing.subscribe(() => {
+      this.showOverlay = false;
+    });
+  }
+
+  public ngAfterViewInit(): void {
+    this.overlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(
+      AbsolutePosition.Center,
+      this.grid1
+    );
+    this.overlaySettings.modal = true;
+  }
+
+  public getValue(cell: CellType): number {
+    const val = cell.value;
+    return val;
+  }
+
+  public ngOnDestroy(): void {
+    clearInterval(this._timer);
+  }
+
+  public isTop3(cell: CellType): boolean {
+    const top = this.paginator.page === 0 && cell.row.index < 4;
+    return top;
+  }
+
+  public getTrophyUrl(index: number): string {
+    if (index === 0) {
+      return 'assets/images/trophy_gold.svg';
+    }
+    if (index === 1) {
+      return 'assets/images/trophy_silver.svg';
+    }
+    if (index === 2) {
+      return 'assets/images/trophy_bronze.svg';
+    }
+    return '';
+  }
+
+  public getIconType(cell: CellType): string {
+    switch (cell.row.data.Position) {
+      case 'current':
+        return 'arrow_forward';
+      case 'down':
+        return 'arrow_downward';
+      case 'up':
+      default:
+        return 'arrow_upward';
+    }
+  }
+
+  public getBadgeType(cell: CellType): string {
+    switch (cell.row.data.Position) {
+      case 'current':
+        return 'warning';
+      case 'down':
+        return 'error';
+      case 'up':
+      default:
+        return 'success';
+    }
+  }
+
+  public getSpeed(athlete: Athlete): void {
+    athlete.SpeedEntries = this.addSpeedData(athlete, 40);
+  }
+
+  public getSpeedeData(minutes?: number): SpeedEntry[] {
+    if (minutes === undefined) {
+      minutes = 20;
+    }
+    const speed: SpeedEntry[] = [];
+    for (let m = 0; m < minutes; m += 3) {
+      const value = this.generateRandomNumber(17, 20);
+      speed.push({ Speed: value, Minute: m });
+    }
+    return speed;
+  }
+
+  public addSpeedData(athlete: Athlete, minutes?: number): SpeedEntry[] {
+    if (minutes === undefined) {
+      minutes = 20;
+    }
+    const speedCollection: SpeedEntry[] = athlete.SpeedEntries || [];
+    for (let m = 3; m <= minutes; m += 3) {
+      const value = this.generateRandomNumber(16, 20);
+      const speed = speedCollection[speedCollection.length - 1];
+      const min = speed && speed.Minute ? speed.Minute + m : m;
+      speedCollection.push({ Speed: value, Minute: min });
+      if (speedCollection.length === 40) {
+        speedCollection.shift();
+      }
+    }
+    return speedCollection;
+  }
+
+  @HostListener('window:resize', ['$event'])
+  public onResize(event: any): void {
+    this.windowWidth = event.target.innerWidth;
+  }
+
+  public filter(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const term = target.value;
+    this.grid1.filter('CountryName', term, IgxStringFilteringOperand.instance().condition('contains'), true);
+    this.grid1.markForCheck();
+  }
+
+  public showAlert(element: ElementRef): void {
+    this.showOverlay = true;
+    this._overlayId = this.overlayService.attach(element, this.overlaySettings);
+    this.overlayService.show(this._overlayId);
+  }
+
+  public hideAlert(): void {
+    this.showOverlay = false;
+    this.overlayService.hide(this._overlayId);
+  }
+
+  private generateRandomNumber(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  private ticker(): void {
+    if (this.showWinnerOverlay) {
+      this.hideAlert();
+    }
+    if (this.isFinished) {
+      this.live = false;
+      this.paginator.page = 0;
+      return;
+    }
+    this.updateData();
+    this.manageRace();
+  }
+
+  private manageRace(): void {
+    // show winner alert
+    if (this.localData[0].TrackProgress) {
+      if (!this.hasWinner && this.localData[0].TrackProgress >= 100) {
+        this.winner = this.localData[0];
+        this.hasWinner = true;
+        this.showAlert(this.winnerAlert);
+      }
+    }
+
+    // move grid to next page to monitor players who still run
+    const firstOnPage = this.grid1.getCellByColumn(0, 'TrackProgress');
+    if (firstOnPage && firstOnPage.value === 100) {
+      this.paginator.page = this.paginator.page + 1;
+    }
+
+    // show Top 3 players after race has finished
+    if (this.localData[this.localData.length - 1].TrackProgress === 100) {
+      this.top3 = this.localData.slice(0, 3);
+      this.isFinished = true;
+      this.showAlert(this.finishedAlert);
+    }
+  }
+
+  private updateData(): void {
+    const newData: Athlete[] = [];
+    this.localData.forEach((rec, index) => {
+      rec.LastPosition = index;
+      if ((rec.TrackProgress !== undefined) && rec.TrackProgress < 100) {
+        rec.SpeedEntries = this.addSpeedData(rec, 3);
+        if (rec.BeatsPerMinute !== undefined) {
+          rec.BeatsPerMinute += this.generateRandomNumber(-5, 5);
+        }
+        if (rec.Id !== undefined && rec.Id < this.paginator.perPage + 1) {
+          rec.TrackProgress = Math.min(rec.TrackProgress + this.generateRandomNumber(15, 20), 100);
+        } else {
+          rec.TrackProgress = Math.min(rec.TrackProgress + this.generateRandomNumber(7, 12), 100);
+        }
+      }
+      newData.push({ ...rec });
+    });
+
+    this.localData = newData.sort((a, b) => b.TrackProgress - a.TrackProgress);
+    this.localData.forEach((elem, ind) => {
+      if (elem.LastPosition) {
+        const position = elem.LastPosition - ind;
+        if (position < 0) {
+          elem.Position = 'down';
+        } else if (position === 0) {
+          elem.Position = 'current';
+        } else {
+          elem.Position = 'up';
+        }
+      }
+    });
+  }
+}
+
+class CustomTopSpeedSummary {
+  public operate(data?: number[]): IgxSummaryResult[] {
+    const result: IgxSummaryResult[] = [];
+    if (!data) {
+      return result;
+    }
+    result.push({
+      key: 'max',
+      label: 'max',
+      summaryResult: data.length ? IgxNumberSummaryOperand.max(data).toFixed(0) : null
+    });
+    return result;
+  }
+}
+
+export class CustomBPMSummary {
+  public operate(data?: number[]): IgxSummaryResult[] {
+    const result: IgxSummaryResult[] = [];
+    if (!data) {
+      return result;
+    }
+    result.push(
+      {
+        key: 'average',
+        label: 'average',
+        summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null
+      });
+    return result;
+  }
+}
+
+export class CustomSpeedSummary {
+  public operate(data: SpeedEntry[][]): IgxSummaryResult[] {
+    const speedData = data.reduce((acc, val) => acc.concat(val), []).map(rec => rec.Speed);
+    const result = [];
+    result.push(
+      {
+        key: 'average',
+        label: 'average',
+        summaryResult: speedData.length ? IgxNumberSummaryOperand.average(speedData).toFixed(2) : null
+      });
+    return result;
+  }
+}

package/igx-ts/custom-templates/awesome-grid/index.js

@@ -10,7 +10,7 @@ class IgxGridAwesomeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAng
         this.listInCustomTemplates = true;
         this.name = "Awesome Grid";
         this.description = "Awesome IgxGrid";
-        this.packages = ["igniteui-angular-core@~20.1.0", "igniteui-angular-charts@~20.1.0"];
+        this.packages = ["igniteui-angular-core@~21.0.0", "igniteui-angular-charts@~21.0.0"];
     }
 }
 module.exports = new IgxGridAwesomeTemplate();

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

@@ -0,0 +1,196 @@
+<div class="grid__wrapper">
+  <igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" height="430px" width="100%"
+    [rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true" [moving]="true">
+    <igx-grid-toolbar>
+      <igx-grid-toolbar-title>
+        <div class="crm-toolbar-template">
+          <div class="crm-sample-toolbar__title">
+            <span class="logo-propeller">
+              <img src="assets/images/propeller-logo.svg" class="animated-fan" />
+            </span>
+            <span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
+          </div>
+          <div class="sample-flex-container">
+            <igx-input-group type="search" class="searchInputGroup">
+              <igx-prefix>
+                @if (searchText.length === 0) {
+                  <igx-icon class="prefixIcon">search</igx-icon>
+                }
+                @if (searchText.length > 0) {
+                  <igx-icon class="prefixIcon" (click)="clearSearch()">clear</igx-icon>
+                }
+              </igx-prefix>
+
+              <input #search1 id="search1" class="searchInput" igxInput placeholder="Search" [(ngModel)]="searchText"
+                (ngModelChange)="grid1.findNext(searchText, caseSensitive)" (keydown)="searchKeyDown($event)" />
+
+              @if (searchText.length > 0) {
+                <igx-suffix>
+                  @if (grid1.lastSearchInfo) {
+                    <div class="resultsText">
+                      @if (grid1.lastSearchInfo.matchInfoCache.length > 0) {
+                        <span>
+                          {{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
+                          grid1.lastSearchInfo.matchInfoCache.length }} results
+                        </span>
+                      }
+                      @if (grid1.lastSearchInfo.matchInfoCache.length === 0) {
+                        <span>
+                          No results
+                        </span>
+                      }
+                    </div>
+                  }
+                <div class="caseSensitiveButton">
+                  <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
+                    [style.--background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'">
+                    <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
+                  </button>
+                </div>
+                <div class="searchButtons">
+                  <button igxButton="icon" igxRipple [igxRippleCentered]="true"
+                    (click)="grid1.findPrev(searchText, caseSensitive)">
+                    <igx-icon family="material">navigate_before</igx-icon>
+                  </button>
+                  <button igxButton="icon" igxRipple [igxRippleCentered]="true"
+                    (click)="grid1.findNext(searchText, caseSensitive)">
+                    <igx-icon family="material">navigate_next</igx-icon>
+                  </button>
+                </div>
+                </igx-suffix>
+              }
+            </igx-input-group>
+          </div>
+        </div>
+      </igx-grid-toolbar-title>
+      <igx-grid-toolbar-actions>
+        <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
+        <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
+        <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
+      </igx-grid-toolbar-actions>
+    </igx-grid-toolbar>
+
+    <igx-column field="id" header="Customer Number" width="172" [pinned]="true" [hasSummary]="false" [resizable]="true"
+      [hidden]="true">
+    </igx-column>
+
+    <igx-column field="avatar" header="Photo" width="88" [pinned]="true" [resizable]="true" [searchable]="false"
+      [filterable]="false">
+      <ng-template igxCell let-cell="cell">
+        <div class="cell__inner avatar-cell">
+          <igx-avatar [src]="cell.row.data.avatar" [shape]="'square'" size="small"></igx-avatar>
+        </div>
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="name" header="Name" [sortable]="true" width="149" [pinned]="true" [resizable]="true"
+      [hasSummary]="false">
+    </igx-column>
+
+    <igx-column field="deals_total" header="Total Deals" [sortable]="true" width="130" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="deals_won" header="Won Deals" [sortable]="true" width="130" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="ratio" header="Ratio" width="150" [resizable]="true" [filterable]="false">
+      <ng-template igxCell let-val>
+        <div style="width: 100%">
+          <igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val" [animate]="false">
+          </igx-linear-bar>
+        </div>
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="Deals" header="Ratio per month" width="160px" [filterable]="false">
+      <ng-template igxCell let-val>
+        <igx-sparkline height="40px" width="160px" [dataSource]="val" valueMemberPath="Deals"
+          [displayType]="displayType.Column" brush="rgb(21, 190, 6)" negativeBrush="rgb(211, 17, 3)">
+        </igx-sparkline>
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="deals_lost" header="Lost Deals" [sortable]="true" width="130" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="deals_pending" header="Pending Deals" [sortable]="true" width="130" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="position" header="Position" width="200" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="company" header="Company" [sortable]="true" width="130" [hasSummary]="false" [resizable]="true"
+     >
+    </igx-column>
+
+    <igx-column field="email" header="Email" width="240" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="work_phone" header="Work Phone" width="160" [resizable]="true"
+      [filterable]="false">
+    </igx-column>
+
+    <igx-column field="mobile_phone" header="Mobile Phone" width="160" [resizable]="true"
+      [filterable]="false">
+    </igx-column>
+
+    <igx-column field="fax" header="Fax" width="160" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="tags" header="Tags" width="160" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="street" header="Street" width="160" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="city" header="City" width="160" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="post_code" header="Post Code" width="100" [resizable]="true"
+      [filterable]="false">
+    </igx-column>
+
+    <igx-column field="state" header="State" width="105" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="country" header="Country" [sortable]="true" width="160" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="created_on" header="Created On" dataType="date" [formatter]="formatDate" [sortable]="true"
+      width="150" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="referred_by" header="Referred By" width="160" [resizable]="true">
+    </igx-column>
+
+    <igx-column field="birthday" header="Birthday" width="160" dataType="date" [formatter]="formatDate"
+      [hasSummary]="false" [summaries]="soonSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="last_activity" header="Last Activity" width="160" dataType="date" [formatter]="formatDate"
+      [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="next_activity" header="Next Activity" width="160" dataType="date" [formatter]="formatDate"
+      [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [filterable]="false">
+    </igx-column>
+
+    <igx-column field="estimated_sales" header="Possible Sales ($)" [sortable]="true" width="150" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+      <ng-template igxCell let-cell="cell" let-val>
+        {{ formatValue(val) }}
+      </ng-template>
+    </igx-column>
+
+    <igx-column field="actual_sales" header="Actual Sales ($)" [sortable]="true" width="150" dataType="number"
+      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
+      <ng-template igxCell let-val>
+        {{ formatValue(val) }}
+      </ng-template>
+    </igx-column>
+  </igx-grid>
+</div>

package/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.spec.ts

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