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

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

@@ -1,242 +0,0 @@
-@use '<%=igxPackage%>/theming' as *;
-$grid-sample-theme: grid-theme(
-  $row-selected-background: #333,
-  $row-selected-text-color: #ddd,
-  $row-hover-background: #f8f8f8,
-  $row-border-color: #f8f8f8,
-  $cell-selected-background:
-    color(
-      $color: "gray",
-      $variant: 800,
-    ),
-  $cell-selected-text-color: #fff,
-);
-
-$progressBar-sample-theme: progress-linear-theme(
-  $track-color: rgba(181, 181, 181, 0.5),
-  $fill-color-default: orange,
-);
-
-%flex-center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:host {
-  ::ng-deep {
-    .igx-sparkline {
-      margin-top: 20px;
-      margin-bottom: -10px;
-    }
-
-    .s-overlay {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      z-index: 10002;
-
-      &__inner {
-        @extend %flex-center;
-        flex-direction: column;
-        border-radius: rem(16px);
-        min-width: rem(340px);
-        overflow: hidden;
-        background: #fff;
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.16);
-      }
-
-      &__heading {
-        @extend %flex-center;
-        width: 100%;
-        text-transform: uppercase;
-        font-weight: bold;
-        margin-bottom: rem(16px);
-        margin-top: rem(24);
-        font-size: rem(28px);
-        height: rem(70px);
-        padding: 0 rem(24px);
-        letter-spacing: 2px;
-        border-bottom: 1px solid #ddd;
-
-        &--finish {
-          border-bottom: none;
-          margin-top: 0;
-          font-style: italic;
-          background-color: white;
-          background-image: linear-gradient(45deg, #222 25%, transparent 25%),
-            linear-gradient(-45deg, #222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222 75%),
-            linear-gradient(-45deg, transparent 75%, #222 75%);
-          background-size: 20px 20px;
-          background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-        }
-
-        > span {
-          padding: rem(8px);
-          background: #fff;
-          margin: 0 rem(8px);
-
-          > span {
-            margin: 0 rem(8px);
-          }
-        }
-      }
-
-      &__trophy {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        margin-bottom: rem(16px);
-
-        img {
-          width: 40px;
-        }
-
-        span {
-          position: absolute;
-          top: 2px;
-          color: #fff;
-          text-shadow: 0 0 8px #444;
-          font-weight: bold;
-        }
-      }
-
-      &__players {
-        @extend %flex-center;
-        padding: rem(24px);
-      }
-
-      &__player {
-        @extend %flex-center;
-        flex-direction: column;
-        margin: 0 rem(32px);
-        width: 120px;
-
-        igx-avatar {
-          margin-bottom: rem(16px);
-        }
-        &--winner {
-          order: 2;
-          igx-avatar {
-            border: 4px solid #fbb13c;
-          }
-        }
-        &--second {
-          order: 1;
-          igx-avatar {
-            border: 4px solid #bdbdbd;
-          }
-        }
-        &--third {
-          order: 3;
-          igx-avatar {
-            border: 4px solid #b47845;
-          }
-        }
-      }
-
-      &__player-name {
-        color: color($color: "primary", $variant: 800);
-        font-size: 18px;
-        margin: 0;
-        white-space: nowrap;
-      }
-    }
-
-    .s-overlay__player.s-overlay__player--winner {
-      margin-bottom: rem(48px);
-    }
-    width: 95%;
-  }
-}
-
-.grid__wrapper {
-  margin: 0 auto;
-  padding: 16px;
-}
-
-@media (max-width: 1000px) {
-  .grid__wrapper {
-    width: 98% !important;
-    margin: 0 auto;
-    padding-left: 1%;
-    padding-right: 1%;
-  }
-}
-
-@media (max-width: 720px) {
-  .grid__wrapper {
-    width: 720px !important;
-    margin: 0 3px;
-    padding-right: 5px;
-  }
-}
-
-.switch-sample__title {
-  margin: 0 rem(20px) 0 0;
-}
-
-.sample__header {
-  display: flex;
-  align-self: flex-start;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: rem(20px);
-}
-
-.switch-sample {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  width: 100%;
-  height: rem(50px);
-}
-
-.switch-sample__label {
-  margin: 0 rem(8) 0 0;
-}
-
-.athlete_name {
-  width: rem(100px);
-  margin: 0 rem(30px);
-}
-
-.athlete_name,
-.title {
-  @include ellipsis();
-}
-
-.cell__inner,
-.cell__inner_2 {
-  display: flex;
-  align-items: center;
-  height: 100%;
-}
-
-.cell__inner {
-  position: relative;
-  justify-content: space-between;
-}
-
-.gridSample__filter {
-  width: rem(200px);
-}
-
-.flag {
-  width: rem(24px);
-}
-
-.cup {
-  padding-left: 20px;
-}
-
-@media (max-width: rem(960px)) {
-  .grid__wrapper {
-    width: rem(960px);
-  }
-}
-
-.linear-bar-container {
-  margin: auto;
-}

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

@@ -1,49 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  IgxAvatarModule,
-  IgxBadgeModule,
-  IgxGridModule,
-  IgxIconModule,
-  IgxInputGroupModule,
-  IgxProgressBarModule,
-  IgxSwitchModule
-} from '<%=igxPackage%>';
-import { IgxSparklineCoreModule, IgxSparklineModule } 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,
-        BrowserAnimationsModule,
-        IgxGridModule,
-        IgxProgressBarModule,
-        IgxAvatarModule,
-        IgxBadgeModule,
-        IgxIconModule,
-        IgxSwitchModule,
-        IgxInputGroupModule,
-        IgxSparklineModule,
-        IgxSparklineCoreModule,
-        <%=ClassName%>Component
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,367 +0,0 @@
-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 { NgIf, NgClass, NgFor, DecimalPipe } from '@angular/common';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
-  imports: [
-    IgxSwitchComponent,
-    ReactiveFormsModule,
-    FormsModule,
-    IgxInputGroupComponent,
-    IgxInputDirective,
-    IgxGridComponent,
-    IgxPaginatorComponent,
-    IgxColumnComponent,
-    IgxCellTemplateDirective,
-    NgIf,
-    IgxAvatarComponent,
-    IgxBadgeComponent,
-    IgxSparklineCoreModule,
-    IgxCircularProgressBarComponent,
-    NgClass,
-    NgFor,
-    DecimalPipe,
-  ],
-})
-export class <%=ClassName%>Component 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;
-  }
-}