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

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

@@ -1,229 +0,0 @@
-@use '<%=igxPackage%>/theming' as *;
-
-:host ::ng-deep {
-    .finjs-icons {
-        display: flex;
-        align-items: center;
-        igx-icon {
-            font-size: 16px;
-            width: 16px;
-            height: 16px;
-            margin-left: 4px;
-        }
-    }
-    .igx-grid__grouparea {
-        max-height: 100%;
-        height: auto;
-    }
-    .changePos,
-    .changeNeg,
-    .strongPositive,
-    .strongNegative {
-        color: #fff !important;
-        .igx-grid__td-text {
-            padding: 2px 5px;
-        }
-    }
-    .positive {
-        color: #4eb862 !important;
-    }
-    .positive.strongPositive {
-        .igx-grid__td-text {
-            color: rgba(78, 184, 98, 0.8) !important;
-        }
-    }
-    .negative {
-        color: #d31642 !important;
-    }
-    .negative.strongNegative {
-        .igx-grid__td-text {
-            color: rgba(255, 19, 74, 0.8) !important;
-        }
-    }
-    // NORMAL
-    // positive
-    .changePos {
-        .igx-grid__td-text {
-            background: #335e3b;
-        }
-    }
-    .changePos1 {
-        background: #335e3b;
-        color: #fff;
-    }
-    .changePos2 {
-        .igx-grid__td-text {
-            border-right: 4px solid #335e3b;
-            padding-right: 4px;
-        }
-    }
-    // negative
-    .changeNeg {
-        .igx-grid__td-text {
-            background: #7a1c32;
-        }
-    }
-    .changeNeg1 {
-        color: #fff;
-        background: #7a1c32;
-    }
-    .changeNeg2 {
-        .igx-grid__td-text {
-            border-right: 4px solid #7a1c32;
-            padding-right: 4px;
-        }
-    }
-    // selected
-    .igx-grid__td--selected.changePos1,
-    .igx-grid__td--selected.changePos2,
-    .igx-grid__td--selected.changePos {
-        background-color: #335e3b !important;
-        .finjs-icons,
-        .igx-grid__td-text {
-            color: #fff;
-        }
-    }
-    .igx-grid__td--selected.changeNeg1,
-    .igx-grid__td--selected.changeNeg2,
-    .igx-grid__td--selected.changeNeg {
-        background-color: #7a1c32 !important;
-        .finjs-icons,
-        .igx-grid__td-text {
-            color: #fff;
-        }
-    }
-    // STRONG
-    // positive
-    .strongPositive {
-        .igx-grid__td-text {
-            background: #459a55;
-        }
-    }
-    .strongPositive1 {
-        background: #459a55;
-        color: #fff;
-    }
-    .strongPositive2 {
-        .igx-grid__td-text {
-            border-right: 4px solid #459a55;
-            padding-right: 4px;
-        }
-    }
-    // negative
-    .strongNegative {
-        .igx-grid__td-text {
-            background: #d31642;
-            color: #fff;
-        }
-    }
-    .strongNegative1 {
-        background: #d31642;
-        color: #fff;
-    }
-    .strongNegative2 {
-        .igx-grid__td-text {
-            border-right: 4px solid #d31642;
-            padding-right: 4px;
-        }
-    }
-    // selected
-    .igx-grid__td--selected.strongPositive1,
-    .igx-grid__td--selected.strongPositive2,
-    .igx-grid__td--selected.strongPositive {
-        background-color: #459a55 !important;
-        .finjs-icons,
-        .igx-grid__td-text {
-            color: #fff;
-        }
-    }
-    .igx-grid__td--selected.strongNegative1,
-    .igx-grid__td--selected.strongNegative2,
-    .igx-grid__td--selected.strongNegative {
-        background-color: #d31642 !important;
-        .finjs-icons,
-        .igx-grid__td-text {
-            color: #fff;
-        }
-    }
-    .controls-holder {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex-wrap: wrap;
-    }
-    .switches {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        flex: 1 0 0%;
-        min-width: 500px;
-        padding-right: 20px;
-        font-size: 0.9rem;
-        margin-bottom: -20px;
-    }
-    .control-item {
-        padding-right: 20px;
-    }
-    .igx-slider,
-    .igx-slider--disabled {
-        height: 24px;
-    }
-    .finjs-slider {
-        width: 40%;
-        min-width: 145px;
-    }
-    .finjs-play-controls {
-        width: 45%;
-        min-width: 500px;
-        margin-top: 20px;
-    }
-    .sample-toolbar {
-        height: 20px;
-        font-size: 0.8rem;
-        line-height: 20px;
-    }
-    .fin-dark-theme {
-        .finjs-slider,
-        .sample-toolbar {
-            color: rgba(255, 255, 255, 0.87);
-        }
-    }
-    .igx-grid__outlet span,
-    .igx-excel-filter span,
-    .igx-excel-filter header,
-    .igx-excel-filter input {
-        font-size: 0.8125rem;
-    }
-}
-
-.grid__wrapper {
-    padding: 5px 15px;
-    height: 100%;
-}
-
-// Custom Dark Theme
-
-// Import the theme utilities first
-@include core();
-@include typography($font-family: $material-typeface, $type-scale: $material-type-scale);
-@include theme($default-palette);
-
-
-$green-palette: palette($primary: #09f, $secondary: #72da67, $surface: #333);
-
-:host {
-    padding: 0 !important;
-    width: 100%;
-
-    ::ng-deep {
-
-        .fin-dark-theme {
-            @include dark-theme($green-palette);
-            background: #333;
-
-            ::-moz-placeholder {
-                opacity: 1;
-            }
-        }
-    }
-}

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

@@ -1,38 +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({
-      imports: [
-        FormsModule,
-        BrowserAnimationsModule,
-        IgxTreeGridModule,
-        IgxCheckboxModule,
-        IgxButtonModule,
-        IgxSliderModule,
-        IgxSwitchModule,
-        <%=ClassName%>Component,
-        <%=ClassName%>TreeGridGroupingPipe
-      ]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,349 +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,
-  IgxSwitchComponent,
-  IgxGridToolbarComponent,
-  IgxGridToolbarActionsComponent,
-  IgxGridToolbarHidingComponent,
-  IgxGridToolbarExporterComponent,
-  IgxColumnComponent,
-  IgxCellTemplateDirective,
-  IgxIconComponent,
-  IgxTreeGridGroupingPipe,
-} from '<%=igxPackage%>';
-import { timer } from 'rxjs';
-import { debounce } from 'rxjs/operators';
-import { LocalDataService } from './localData.service';
-import { ITreeGridAggregation, <%=ClassName%>TreeGridGroupingPipe } from './tree-grid-grouping.pipe';
-import { NgIf, CurrencyPipe } from '@angular/common';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-
-@Component({
-  providers: [LocalDataService],
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: true,
-  imports: [
-    IgxSwitchComponent,
-    ReactiveFormsModule,
-    FormsModule,
-    IgxSliderComponent,
-    IgxButtonGroupComponent,
-    NgIf,
-    IgxTreeGridComponent,
-    IgxGridToolbarComponent,
-    IgxGridToolbarActionsComponent,
-    IgxGridToolbarHidingComponent,
-    IgxGridToolbarExporterComponent,
-    IgxColumnComponent,
-    IgxCellTemplateDirective,
-    IgxIconComponent,
-    CurrencyPipe,
-    IgxTreeGridGroupingPipe,
-    <%=ClassName%>TreeGridGroupingPipe
-  ]
-})
-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 = 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 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(
-      () => {
-        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): 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__/localData.service.ts

@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject, Observable} from 'rxjs';
-import { FinancialData } from './assets/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 = 10): void {
-    const financialData: FinancialData = new FinancialData();
-    this.records$.next(financialData.generateData(count));
-  }
-}

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

@@ -1,45 +0,0 @@
-<form *ngIf="showLogin" 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>
-
-<div *ngIf="showSuccessLogin">You've successfully logged in</div>
-
-<form *ngIf="showRegister" 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>
-
-<div *ngIf="showSuccessRegister">You have successfully registered.</div>

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

@@ -1,25 +0,0 @@
-:host {
-    display: block;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-    padding: 24px 16px;
-    margin: 16px;
-    width: 400px;
-    max-height: 600px;
-}
-
-h3 {
-    color: #66ccff;
-}
-
-a {
-    cursor: pointer;
-}
-
-.igx-input-group, button {
-    margin-top: 32px;
-}
-
-button {
-
-    width: 100%;
-}