@igniteui/angular-templates 17.0.1302 → 17.0.1310-beta.2

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

@@ -0,0 +1,19 @@
+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

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

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

@@ -0,0 +1,36 @@
+"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@~17.0.0", "igniteui-angular-charts@~17.0.0"];
+    }
+}
+module.exports = new IgxFinTechGridTemplate();

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

@@ -0,0 +1,78 @@
+<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.scss

@@ -0,0 +1,229 @@
+@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-legacy/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -0,0 +1,36 @@
+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();
+  });
+});