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

package/igx-ts-legacy/custom-templates/fintech-grid/files/src/app/__path__/localData.service.ts

@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable} from 'rxjs';
-import { FinancialData } from './localData/financialData';
-
-@Injectable()
-export class LocalDataService {
-  public records: Observable<any[]>;
-  public records$: BehaviorSubject<any[]>;
-
-  constructor() {
-    this.records$ = new BehaviorSubject([] as any);
-    this.records = this.records$.asObservable();
-  }
-
-  public getData(count: number = 10) {
-    const financialData: FinancialData = new FinancialData();
-    this.records$.next(financialData.generateData(count));
-  }
-}

package/igx-ts-legacy/custom-templates/fintech-grid/index.d.ts

@@ -1 +0,0 @@
-export {};

package/igx-ts-legacy/custom-templates/fintech-grid/index.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
-class IgxFinTechGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
-    constructor() {
-        super(__dirname);
-        this.id = "fintech-grid";
-        this.projectType = "igx-ts";
-        this.listInComponentTemplates = false;
-        this.listInCustomTemplates = true;
-        this.name = "FinTech Grid";
-        this.description = "Grid with simulated high-frequency data feed";
-        this.dependencies = [
-            { import: "IgxCategoryChartModule", from: "igniteui-angular-charts" },
-            { provide: "IgxExcelExporterService", from: "<%=igxPackage%>" },
-            {
-                import: [
-                    "IgxButtonGroupModule",
-                    "IgxDialogModule",
-                    "IgxFocusModule",
-                    "IgxGridModule",
-                    "IgxIconModule",
-                    "IgxRippleModule",
-                    "IgxSelectModule",
-                    "IgxSliderModule",
-                    "IgxSwitchModule",
-                    "IgxToggleModule"
-                ],
-                from: "<%=igxPackage%>"
-            },
-            { import: "FormsModule", from: "@angular/forms" }
-        ];
-        this.packages = ["igniteui-angular-core@~20.1.0", "igniteui-angular-charts@~20.1.0"];
-    }
-}
-module.exports = new IgxFinTechGridTemplate();

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

@@ -1,78 +0,0 @@
-<div class="grid__wrapper" [class.fin-dark-theme]="theme">
-  <div class="controls-holder">
-    <div class="switches">
-      <div class="control-item">
-        <igx-switch [checked]="true" [(ngModel)]="theme" (change)="onThemeChanged($event)">Dark</igx-switch>
-      </div>
-      <div class="control-item">
-        <igx-switch [checked]="true" (change)="toggleToolbar()" cssClass="finjs-sample-switch">Toolbar</igx-switch>
-      </div>
-      <div class="finjs-slider control-item">
-        <label for="slider">Records: {{volume}}</label>
-        <igx-slider #slider1 id="slider" [minValue]="0" [maxValue]="10000" [(ngModel)]="volume" [step]="100" [thumbLabelVisibilityDuration]="250" [continuous]="true"></igx-slider>
-      </div>
-      <div class="finjs-slider control-item">
-        <label for="slider">Frequency: {{frequency}} ms</label>
-        <igx-slider #slider2 id="slider" [minValue]="100" [maxValue]="3000" [step]="10" [(ngModel)]="frequency" [thumbLabelVisibilityDuration]="250" [continuous]="true"></igx-slider>
-      </div>
-    </div>
-    <div class="control-item finjs-play-controls">
-      <igx-buttongroup class="finjssample-btn-group" #buttonGroup1 [multiSelection]="false" [values]="controls" (selected)="onButtonAction($event)"></igx-buttongroup>
-    </div>
-  </div>
-  <div class="sample-toolbar">
-    <span *ngIf="buttonSelected === 1">Feeding {{volume}} records every {{frequency / 1000}} sec.
-      {{volume}} records updated. </span>
-    <span *ngIf="buttonSelected === 0">Feeding {{volume}} records every {{frequency / 1000}} sec.
-      ~{{volume/5}} records updated.</span>
-  </div>
-  <igx-tree-grid #grid1 igxPreventDocumentScroll
-    [data]="data | treeGridGrouping:groupColumns:aggregations:groupColumnKey:primaryKey:childDataKey"
-    height="90%" width="100%" [autoGenerate]="false" displayDensity="compact"
-    [primaryKey]="primaryKey" [childDataKey]="childDataKey" hiddenColumnsText="Hidden"
-    [rowSelection]="selectionMode" [allowFiltering]="true" filterMode="excelStyleFilter" [moving]="true">
-    <igx-grid-toolbar *ngIf="showToolbar">
-      <igx-grid-toolbar-actions>
-        <igx-grid-toolbar-hiding title="Indicators"></igx-grid-toolbar-hiding>
-        <igx-grid-toolbar-exporter [exportCSV]="false"></igx-grid-toolbar-exporter>
-      </igx-grid-toolbar-actions>
-    </igx-grid-toolbar>
-
-    <!-- Empty templates for Sorting,Moving,Hiding, Pinning actions inside ESF dialog -->
-    <!-- <ng-template igxExcelStyleSorting></ng-template>
-    <ng-template igxExcelStyleMoving></ng-template>
-    <ng-template igxExcelStyleHiding></ng-template>
-    <ng-template igxExcelStylePinning></ng-template> -->
-
-    <igx-column [field]="groupColumnKey" width="180px" [sortable]="true" [resizable]="true" [disableHiding]="true"></igx-column>
-    <igx-column field="Settlement" width="100px" [sortable]="true"></igx-column>
-    <igx-column field="Region" width="110px" [sortable]="true"></igx-column>
-    <igx-column field="Country" width="100px" [sortable]="true"></igx-column>
-    <igx-column field="Open Price" width="120px" dataType="number" [formatter]="formatCurrency"  [sortable]="true"></igx-column>
-    <igx-column field="Price" width="130px" dataType="number" [cellClasses]="trends" [sortable]="true" [disableHiding]="true">
-      <ng-template igxCell let-cell="cell">
-        <div class="finjs-icons">
-          <span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
-          <igx-icon *ngIf="trends.positive(cell.row.data)">trending_up</igx-icon>
-          <igx-icon *ngIf="trends.negative(cell.row.data)">trending_down</igx-icon>
-        </div>
-      </ng-template>
-    </igx-column>
-
-    <igx-column field="Change" width="120px" dataType="number" headerClasses="headerAlignSyle" [sortable]="true" [cellClasses]="trendsChange" [formatter]="formatNumber">
-    </igx-column>
-
-    <igx-column field="Change(%)" width="110px" dataType="number" [formatter]="percentage" [sortable]="true" [cellClasses]="trendsChange">
-    </igx-column>
-
-    <igx-column field="Buy" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
-    <igx-column field="Sell" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
-    <igx-column field="Spread" width="110px" dataType="number" [formatter]="formatNumber"></igx-column>
-    <igx-column field="Volume" width="110px" dataType="number" [formatter]="formatNumber" [sortable]="true"></igx-column>
-    <igx-column field="High(D)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
-    <igx-column field="Low(D)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
-    <igx-column field="High(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
-    <igx-column field="Low(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
-    <igx-column field="Start(Y)" width="110px" dataType="number" [formatter]="formatCurrency" [sortable]="true"></igx-column>
-  </igx-tree-grid>
-</div>

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

@@ -1,36 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-import { <%=ClassName%>TreeGridGroupingPipe } from './tree-grid-grouping.pipe';
-import { IgxTreeGridModule, IgxCheckboxModule, IgxButtonModule, IgxSliderModule, IgxSwitchModule } from '<%=igxPackage%>';
-
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ <%=ClassName%>Component, <%=ClassName%>TreeGridGroupingPipe ],
-      imports: [
-        FormsModule,
-        BrowserAnimationsModule,
-        IgxTreeGridModule,
-        IgxCheckboxModule,
-        IgxButtonModule,
-        IgxSliderModule,
-        IgxSwitchModule]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/igx-ts-legacy/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,318 +0,0 @@
-import {
-  Component,
-  AfterViewInit, ElementRef, OnDestroy, OnInit, ViewChild, NgZone
-} from '@angular/core';
-import {
-  AbsoluteScrollStrategy,
-  ConnectedPositioningStrategy,
-  GridSelectionMode,
-  HorizontalAlignment,
-  IButtonGroupEventArgs,
-  IChangeCheckboxEventArgs,
-  IgxButtonGroupComponent,
-  IgxSliderComponent,
-  IgxTreeGridComponent,
-  OverlaySettings,
-  PositionSettings,
-  SortingDirection,
-  VerticalAlignment
-} from '<%=igxPackage%>';
-import { timer } from 'rxjs';
-import { debounce } from 'rxjs/operators';
-import { LocalDataService } from './localData.service';
-import { ITreeGridAggregation } from './tree-grid-grouping.pipe';
-
-@Component({
-  providers: [LocalDataService],
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: false
-})
-export class <%=ClassName%>Component implements OnInit, AfterViewInit, OnDestroy {
-  @ViewChild('grid1', { static: true }) public grid1!: IgxTreeGridComponent;
-  @ViewChild('buttonGroup1', { static: true }) public buttonGroup1!: IgxButtonGroupComponent;
-  @ViewChild('slider1', { static: true }) public volumeSlider!: IgxSliderComponent;
-  @ViewChild('slider2', { static: true }) public intervalSlider!: IgxSliderComponent;
-
-  public showToolbar: boolean = true;
-  public selectionMode: GridSelectionMode = 'multiple';
-  public theme: boolean = false;
-  public volume: number = 1000;
-  public frequency: number = 500;
-  public data: any[] = [];
-  public controls = [
-    {
-      disabled: false,
-      icon: 'update',
-      label: 'LIVE PRICES',
-      selected: false
-    },
-    {
-      disabled: false,
-      icon: 'update',
-      label: 'LIVE ALL PRICES',
-      selected: false
-    },
-    {
-      disabled: true,
-      icon: 'stop',
-      label: 'Stop',
-      selected: false
-    }
-  ];
-  public groupColumns = ['Category', 'Type', 'Contract'];
-  public aggregations: ITreeGridAggregation[] = [
-    {
-      aggregate: (parent: any, data: any[]) => {
-        return data.map((r) => r.Change).reduce((ty, u) => ty + u, 0);
-      },
-      field: 'Change'
-    },
-    {
-      aggregate: (parent: any, data: any[]) => {
-        return data.map((r) => r.Price).reduce((ty, u) => ty + u, 0);
-      },
-      field: 'Price'
-    },
-    {
-      aggregate: (parent: any, data: any[]) => {
-        return parent.Change / (parent.Price - parent.Change) * 100;
-      },
-      field: 'Change(%)'
-    }
-  ];
-  public primaryKey = 'ID';
-  public childDataKey = 'Children';
-  public groupColumnKey = 'Categories';
-
-  public items: any[] = [{field: 'Export native'}, { field: 'Export JS Excel'}];
-
-  public positionSettings: PositionSettings = {
-    horizontalDirection: HorizontalAlignment.Left,
-    horizontalStartPoint: HorizontalAlignment.Right,
-    verticalStartPoint: VerticalAlignment.Bottom
-  };
-
-  public overlaySettings: OverlaySettings = {
-    closeOnOutsideClick: true,
-    modal: false,
-    positionStrategy: new ConnectedPositioningStrategy(this.positionSettings),
-    scrollStrategy: new AbsoluteScrollStrategy()
-  };
-
-  private subscription: any;
-  private selectedButton: number = -1;
-  private timer: any;
-  private volumeChanged: any;
-
-  constructor(private zone: NgZone, private localService: LocalDataService, private elRef: ElementRef) {
-    this.subscription = this.localService.getData(this.volume);
-    this.localService.records.subscribe((d) => this.data = d);
-  }
-
-  public ngOnInit(): void {
-    this.grid1.sortingExpressions = [{ fieldName: this.groupColumnKey, dir: SortingDirection.Desc }];
-    this.volumeChanged = this.volumeSlider.valueChange.pipe(debounce(() => timer(200)));
-    this.volumeChanged.subscribe(
-      (x: any) => {
-        this.localService.getData(this.volume);
-      },
-      (err: string) => console.log('Error: ' + err));
-  }
-
-  public ngAfterViewInit(): void {
-    this.grid1.reflow();
-  }
-  public onButtonAction(evt: IButtonGroupEventArgs): void {
-    switch (evt.index) {
-      case 0: {
-          this.disableOtherButtons(evt.index, true);
-          this.timer = setInterval(() => this.ticker(this.data), this.frequency);
-          break;
-        }
-      case 1: {
-          this.disableOtherButtons(evt.index, true);
-          this.timer = setInterval(() => this.tickerAllPrices(this.data), this.frequency);
-          break;
-        }
-        case 2: {
-          this.disableOtherButtons(evt.index, false);
-          this.stopFeed();
-          break;
-        }
-      default:
-        {
-          break;
-        }
-    }
-  }
-
-  public stopFeed(): void {
-    if (this.timer) {
-      clearInterval(this.timer);
-    }
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-  }
-
-  public formatNumber(value: number): string {
-    return value ? value.toFixed(2) : '';
-  }
-
-  public percentage(value: number): string {
-    return value ? value.toFixed(2) + '%' : '';
-  }
-
-  public formatCurrency(value: number): string {
-    return value ? '$' + value.toFixed(3) : '';
-  }
-
-  /**
-   * the below code is needed when accessing the sample through the navigation
-   * it will style all the space below the sample component element, but not the navigation menu
-   */
-  public onThemeChanged(evt: IChangeCheckboxEventArgs): void {
-    const parentEl = this.parentComponentEl();
-    if (evt.checked && parentEl.classList.contains('main')) {
-      parentEl.classList.add('fin-dark-theme');
-    } else {
-      parentEl.classList.remove('fin-dark-theme');
-    }
-  }
-
-  public ngOnDestroy(): void {
-    this.stopFeed();
-    this.volumeChanged.unsubscribe();
-  }
-
-  public toggleToolbar(): void {
-    this.showToolbar = !this.showToolbar;
-  }
-
-  private negative = (rowData: any): boolean => {
-    return rowData['Change(%)'] < 0;
-  }
-  private positive = (rowData: any): boolean => {
-    return rowData['Change(%)'] > 0;
-  }
-  private changeNegative = (rowData: any): boolean => {
-    return rowData['Change(%)'] < 0 && rowData['Change(%)'] > -1;
-  }
-  private changePositive = (rowData: any): boolean => {
-    return rowData['Change(%)'] > 0 && rowData['Change(%)'] < 1;
-  }
-  private strongPositive = (rowData: any): boolean => {
-    return rowData['Change(%)'] >= 1;
-  }
-  private strongNegative = (rowData: any, key: string): boolean => {
-    return rowData['Change(%)'] <= -1;
-  }
-
-  // tslint:disable:member-ordering
-  public trends = {
-    changeNeg: this.changeNegative,
-    changePos: this.changePositive,
-    negative: this.negative,
-    positive: this.positive,
-    strongNegative: this.strongNegative,
-    strongPositive: this.strongPositive
-  };
-
-  public trendsChange = {
-    changeNeg2: this.changeNegative,
-    changePos2: this.changePositive,
-    strongNegative2: this.strongNegative,
-    strongPositive2: this.strongPositive
-  };
-  // tslint:enable:member-ordering
-
-  private disableOtherButtons(ind: number, disableButtons: boolean): void {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-    }
-    this.volumeSlider.disabled = disableButtons;
-    this.intervalSlider.disabled = disableButtons;
-    this.selectedButton = ind;
-    this.buttonGroup1.buttons.forEach((button, index) => {
-      if (index === 2) { button.disabled = !disableButtons; } else {
-        button.disabled = disableButtons;
-      }
-    });
-  }
-
-  /**
-   * returns the main div container of the Index Component,
-   * if path is /samples/sample-url, or the appRoot, if path is /sample-url
-   */
-  private parentComponentEl(): HTMLElement {
-    return this.elRef.nativeElement.parentElement.parentElement;
-  }
-
-  private ticker(data: any): void {
-    this.data = this.updateRandomPrices(data);
-  }
-
-  private tickerAllPrices(data: any): void {
-    this.updateAllPrices(data);
-  }
-
-  /**
-   * Updates values in every record
-   */
-  private updateAllPrices(data: any[]): void {
-    for (const dataRow of data) {
-      this.randomizeObjectData(dataRow);
-    }
-    (this.grid1 as any).notifyChanges();
-  }
-
-  /**
-   * Updates values in random number of records
-   */
-  private updateRandomPrices(data: any[]): any {
-    const newData = data.slice();
-    let y = 0;
-    for (let i = Math.round(Math.random() * 10); i < newData.length; i += Math.round(Math.random() * 10)) {
-      this.randomizeObjectData(newData[i]);
-      y++;
-    }
-    return newData;
-  }
-
-  /**
-   * Generates ne values for Change, Price and ChangeP columns
-   */
-  private randomizeObjectData(dataObj: any): void {
-    const changeP = 'Change(%)';
-    const res = this.generateNewPrice(dataObj.Price);
-    dataObj.Change = res.Price - dataObj.Price;
-    dataObj.Price = res.Price;
-    dataObj[changeP] = res.ChangePercent;
-  }
-
-  private generateNewPrice(oldPrice: number): any {
-    let rnd = Math.random();
-    rnd = Math.round(rnd * 100) / 100;
-    const volatility = 2;
-    let newPrice = 0;
-    let changePercent = 2 * volatility * rnd;
-    if (changePercent > volatility) {
-      changePercent -= (2 * volatility);
-    }
-    const changeAmount = oldPrice * (changePercent / 100);
-    newPrice = oldPrice + changeAmount;
-    newPrice = Math.round(newPrice * 100) / 100;
-    const result = {Price: 0, ChangePercent: 0};
-    changePercent = Math.round(changePercent * 100) / 100;
-    result.Price = newPrice;
-    result.ChangePercent = changePercent;
-
-    return result;
-  }
-
-  get buttonSelected(): number {
-    return this.selectedButton || this.selectedButton === 0 ? this.selectedButton : -1;
-  }
-}