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

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

@@ -0,0 +1,347 @@
+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,
+  IgxSwitchComponent,
+  IgxGridToolbarComponent,
+  IgxGridToolbarActionsComponent,
+  IgxGridToolbarHidingComponent,
+  IgxGridToolbarExporterComponent,
+  IgxColumnComponent,
+  IgxCellTemplateDirective,
+  IgxIconComponent,
+  IgxTreeGridGroupingPipe,
+} from '<%=igxPackage%>';
+import { timer } from 'rxjs';
+import { debounce } from 'rxjs/operators';
+import { LocalData } from './local-data';
+import { ITreeGridAggregation, <%=ClassName%>TreeGridGroupingPipe } from './tree-grid-grouping.pipe';
+import { CurrencyPipe } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+@Component({
+  providers: [LocalData],
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxSwitchComponent,
+    ReactiveFormsModule,
+    FormsModule,
+    IgxSliderComponent,
+    IgxButtonGroupComponent,
+    IgxTreeGridComponent,
+    IgxGridToolbarComponent,
+    IgxGridToolbarActionsComponent,
+    IgxGridToolbarHidingComponent,
+    IgxGridToolbarExporterComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    IgxIconComponent,
+    CurrencyPipe,
+    IgxTreeGridGroupingPipe,
+    <%=ClassName%>TreeGridGroupingPipe
+  ]
+})
+export class <%=ClassName%> 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 = true;
+  public selectionMode: GridSelectionMode = 'multiple';
+  public theme = false;
+  public volume = 1000;
+  public frequency = 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) => {
+        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 = -1;
+  private timer: any;
+  private volumeChanged: any;
+
+  constructor(private zone: NgZone, private localData: LocalData, private elRef: ElementRef) {
+    this.subscription = this.localData.getData(this.volume);
+    this.localData.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(
+      () => {
+        this.localData.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): boolean => {
+    return rowData['Change(%)'] <= -1;
+  }
+
+  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
+  };
+
+  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();
+    for (let i = Math.round(Math.random() * 10); i < newData.length; i += Math.round(Math.random() * 10)) {
+      this.randomizeObjectData(newData[i]);
+    }
+    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;
+  }
+}

package/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/local-data.ts

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

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

@@ -0,0 +1,53 @@
+@if (showLogin) {
+  <form class="input-group-form" [formGroup]="loginForm" (ngSubmit)="tryLogin()">
+    <h3>Welcome Back</h3>
+    <igx-input-group>
+      <igx-prefix>
+        <igx-icon>account_circle</igx-icon>
+      </igx-prefix>
+      <label igxLabel for="email">Username</label>
+      <input igxInput id="email" name="email" formControlName="email" type="text" />
+    </igx-input-group>
+    <igx-input-group>
+      <igx-prefix>
+        <igx-icon>lock</igx-icon>
+      </igx-prefix>
+      <label igxLabel for="password">Password</label>
+      <input igxInput id="password" name="password" type="password" formControlName="password" />
+    </igx-input-group>
+    <button igxButton="raised" type="submit" igxRipple [disabled]="!loginForm.valid">LOG IN</button>
+    <a (click)="showRegistrationForm()">Register</a>
+  </form>
+}
+
+@if (showSuccessLogin) {
+  <div>You've successfully logged in</div>
+}
+
+@if (showRegister) {
+  <form class="input-group-form" [formGroup]="registrationForm" (ngSubmit)="tryRegister()">
+    <h3>Create your account</h3>
+    <igx-input-group>
+      <label igxLabel for="firstName">First Name</label>
+      <input igxInput id="firstName" name="firstName" formControlName="firstName" type="text" />
+    </igx-input-group>
+    <igx-input-group>
+      <label igxLabel for="lastName">Last Name</label>
+      <input igxInput id="lastName" name="lastName" formControlName="lastName" type="text" />
+    </igx-input-group>
+    <igx-input-group>
+      <label igxLabel for="newEmail">Username</label>
+      <input igxInput id="newEmail" name="newEmail" formControlName="newEmail" type="text" />
+    </igx-input-group>
+    <igx-input-group>
+      <input igxInput id="newPassword" name="newPassword" type="password" formControlName="newPassword" />
+      <label igxLabel for="newPassword">Password</label>
+    </igx-input-group>
+    <button igxButton="raised" type="submit" igxRipple [disabled]="!registrationForm.valid">SIGN UP</button>
+    <a (click)="showLoginForm()">Log in</a>
+  </form>
+}
+
+@if (showSuccessRegister) {
+  <div>You have successfully registered.</div>
+}

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

@@ -0,0 +1,55 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+const MAIL_GROUP_NAME = 'email';
+const PASSWORD_GROUP_NAME = 'password';
+const NEW_MAIL_GROUP_NAME = 'newEmail';
+const NEW_PASSWORD_GROUP_NAME = 'newPassword';
+const FIRST_NAME_GROUP_NAME = 'firstName';
+const LAST_NAME_GROUP_NAME = 'lastName';
+
+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();
+  });
+
+  it('should not allow login until valid',  async () => {
+    expect(component.loginForm.valid).toBeFalsy();
+    component.loginForm.controls[MAIL_GROUP_NAME].setValue('test@example.com');
+    expect(component.loginForm.valid).toBeFalsy();
+    component.loginForm.controls[PASSWORD_GROUP_NAME].setValue('123456');
+    expect(component.loginForm.valid).toBeTruthy();
+  });
+
+  it('should not allow register until valid',  async () => {
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[NEW_MAIL_GROUP_NAME].setValue('test@example.com');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[FIRST_NAME_GROUP_NAME].setValue('John');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[LAST_NAME_GROUP_NAME].setValue('Doe');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[NEW_PASSWORD_GROUP_NAME].setValue('123456');
+    expect(component.registrationForm.valid).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,79 @@
+import { Component } from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  Validators,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  IgxInputGroupComponent,
+  IgxPrefixDirective,
+  IgxIconComponent,
+  IgxLabelDirective,
+  IgxInputDirective,
+  IgxButtonDirective,
+  IgxRippleDirective,
+} from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    ReactiveFormsModule,
+    IgxInputGroupComponent,
+    IgxPrefixDirective,
+    IgxIconComponent,
+    IgxLabelDirective,
+    IgxInputDirective,
+    IgxButtonDirective,
+    IgxRippleDirective,
+  ]
+})
+export class <%=ClassName%> {
+  public loginForm: FormGroup;
+  public registrationForm: FormGroup;
+  public showLogin = true;
+  public showRegister = false;
+  public showSuccessLogin = false;
+  public showSuccessRegister = false;
+
+  constructor(fb: FormBuilder) {
+    this.loginForm = fb.group( {
+        email: ['', Validators.required],
+        password: ['', Validators.required]
+      });
+
+    this.registrationForm = fb.group( {
+        newEmail: ['', Validators.required],
+        newPassword: ['', Validators.required],
+        firstName: ['', Validators.required],
+        lastName: ['', Validators.required]
+    });
+  }
+
+  tryLogin() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const loginInfo = this.loginForm.value;
+    // use loginInfo
+    this.showLogin = false;
+    this.showSuccessLogin = true;
+  }
+
+  showRegistrationForm() {
+    this.showLogin = false;
+    this.showRegister = true;
+  }
+  showLoginForm() {
+    this.showLogin = true;
+    this.showRegister = false;
+  }
+
+  tryRegister() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const registerInfo = this.registrationForm.value;
+    // use registerInfo
+    this.showRegister = false;
+    this.showSuccessRegister = true;
+  }
+}

package/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,40 @@
+<div class="sample-wrapper">
+  <igx-card>
+    <igx-card-header>
+    <h3 class="ig-card-header__title">{{data.city}}</h3>
+    <h5 class="ig-card-header__subtitle">{{data.dateTime}}, {{data.today.description}}</h5>
+    </igx-card-header>
+    <igx-card-content>
+    @if (data) {
+      <div class="weather__main">
+        <div class="weather__main-temp">
+          <div>{{data.today.tempMax}}°<sup>C</sup></div>
+          <div class="right"><igx-icon class="weather-icon--orange" family="fas" name="fa-sun"></igx-icon></div>
+        </div>
+        <div class="weather__main-hum">
+          <div><igx-icon class="weather-icon--blue" family="fas" name="fa-umbrella"></igx-icon>{{data.precipitation}} Precipitation </div>
+          <div class="right"><igx-icon class="weather-icon--skyblue" family="fas" name="fa-tint"></igx-icon>{{data.humidity}} Humidity </div>
+        </div>
+      </div>
+    }
+    <button igxButton igxRipple (click)="toggleDetails()">Forecast Details</button>
+    <igx-expansion-panel>
+      <igx-expansion-panel-body>
+      @if (data) {
+        <div class="forecast__container">
+          @for (day of data.daysOfWeek; track day) {
+            <div class="forecast__day">
+              <div>{{day.name}}</div>
+              <div class="right">
+                <igx-icon [class]="'weather-icon--' + day.iconColor" family="fas" [name]="day.iconName" font-size="1em"></igx-icon>
+                {{day.tempMin}}°/{{day.tempMax}}°
+              </div>
+            </div>
+          }
+        </div>
+      }
+      </igx-expansion-panel-body>
+    </igx-expansion-panel>
+    </igx-card-content>
+  </igx-card>
+  </div>

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

package/igx-ts/custom-templates/weather-forecast/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,37 @@
+import { Component, ViewChild } from '@angular/core';
+import {
+  IgxExpansionPanelComponent,
+  IgxCardComponent,
+  IgxCardHeaderComponent,
+  IgxCardContentDirective,
+  IgxIconComponent,
+  IgxButtonDirective,
+  IgxRippleDirective,
+  IgxExpansionPanelBodyComponent,
+} from '<%=igxPackage%>';
+import { data as weatherData } from './weather-data';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxCardComponent,
+    IgxCardHeaderComponent,
+    IgxCardContentDirective,
+    IgxIconComponent,
+    IgxButtonDirective,
+    IgxRippleDirective,
+    IgxExpansionPanelComponent,
+    IgxExpansionPanelBodyComponent
+  ]
+})
+export class <%=ClassName%> {
+  @ViewChild(IgxExpansionPanelComponent, { static: true })
+  public panel!: IgxExpansionPanelComponent;
+  public data = weatherData;
+
+  public toggleDetails() {
+    this.panel.toggle();
+  }
+}

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