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

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

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
-class IgxGridAwesomeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
-    constructor() {
-        super(__dirname);
-        this.id = "awesome-grid";
-        this.projectType = "igx-ts";
-        this.listInComponentTemplates = false;
-        this.listInCustomTemplates = true;
-        this.name = "Awesome Grid";
-        this.description = "Awesome IgxGrid";
-        this.dependencies = [
-            { import: "IgxGridModule", from: "<%=igxPackage%>" },
-            {
-                import: [
-                    "IgxProgressBarModule",
-                    "IgxIconModule",
-                    "IgxAvatarModule",
-                    "IgxBadgeModule",
-                    "IgxSwitchModule",
-                    "IgxInputGroupModule",
-                    "IgxButtonModule"
-                ],
-                from: "<%=igxPackage%>"
-            },
-            {
-                import: [
-                    "IgxSparklineModule",
-                    "IgxSparklineCoreModule"
-                ],
-                from: "igniteui-angular-charts"
-            },
-            { import: "FormsModule", from: "@angular/forms" }
-        ];
-        this.packages = ["igniteui-angular-core@~21.0.0", "igniteui-angular-charts@~21.0.0"];
-    }
-}
-module.exports = new IgxGridAwesomeTemplate();

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

@@ -1,184 +0,0 @@
-<div class="grid__wrapper">
-  <igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" height="430px" width="100%"
-    [rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true" [moving]="true">
-    <igx-grid-toolbar>
-      <igx-grid-toolbar-title>
-        <div class="crm-toolbar-template">
-          <div class="crm-sample-toolbar__title">
-            <span class="logo-propeller">
-              <img src="assets/images/propeller-logo.svg" class="animated-fan" />
-            </span>
-            <span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
-          </div>
-          <div class="sample-flex-container">
-            <igx-input-group type="search" class="searchInputGroup">
-              <igx-prefix>
-                <igx-icon class="prefixIcon" *ngIf="searchText.length === 0">search</igx-icon>
-                <igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
-              </igx-prefix>
-
-              <input #search1 id="search1" class="searchInput" igxInput placeholder="Search" [(ngModel)]="searchText"
-                (ngModelChange)="grid1.findNext(searchText, caseSensitive)" (keydown)="searchKeyDown($event)" />
-
-              <igx-suffix *ngIf="searchText.length > 0">
-                <div class="resultsText" *ngIf="grid1.lastSearchInfo">
-                  <span *ngIf="grid1.lastSearchInfo.matchInfoCache.length > 0">
-                    {{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
-                    grid1.lastSearchInfo.matchInfoCache.length }} results
-                  </span>
-                  <span *ngIf="grid1.lastSearchInfo.matchInfoCache.length === 0">
-                    No results
-                  </span>
-                </div>
-                <div class="caseSensitiveButton">
-                  <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
-                    igxButtonBackground="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
-                    <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
-                  </button>
-                </div>
-                <div class="searchButtons">
-                  <button igxButton="icon" igxRipple [igxRippleCentered]="true"
-                    (click)="grid1.findPrev(searchText, caseSensitive)">
-                    <igx-icon family="material">navigate_before</igx-icon>
-                  </button>
-                  <button igxButton="icon" igxRipple [igxRippleCentered]="true"
-                    (click)="grid1.findNext(searchText, caseSensitive)">
-                    <igx-icon family="material">navigate_next</igx-icon>
-                  </button>
-                </div>
-              </igx-suffix>
-            </igx-input-group>
-          </div>
-        </div>
-      </igx-grid-toolbar-title>
-      <igx-grid-toolbar-actions>
-        <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
-        <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
-        <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
-      </igx-grid-toolbar-actions>
-    </igx-grid-toolbar>
-
-    <igx-column field="id" header="Customer Number" width="172" [pinned]="true" [hasSummary]="false" [resizable]="true"
-      [hidden]="true">
-    </igx-column>
-
-    <igx-column field="avatar" header="Photo" width="88" [pinned]="true" [resizable]="true" [searchable]="false"
-      [filterable]="false">
-      <ng-template igxCell let-cell="cell">
-        <div class="cell__inner avatar-cell">
-          <igx-avatar [src]="cell.row.data.avatar" [shape]="'square'" size="small"></igx-avatar>
-        </div>
-      </ng-template>
-    </igx-column>
-
-    <igx-column field="name" header="Name" [sortable]="true" width="149" [pinned]="true" [resizable]="true"
-      [hasSummary]="false">
-    </igx-column>
-
-    <igx-column field="deals_total" header="Total Deals" [sortable]="true" width="130" dataType="number"
-      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="deals_won" header="Won Deals" [sortable]="true" width="130" dataType="number"
-      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="ratio" header="Ratio" width="150" [resizable]="true" [filterable]="false">
-      <ng-template igxCell let-val>
-        <div style="width: 100%">
-          <igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val" [animate]="false">
-          </igx-linear-bar>
-        </div>
-      </ng-template>
-    </igx-column>
-
-    <igx-column field="Deals" header="Ratio per month" width="160px" [filterable]="false">
-      <ng-template igxCell let-val>
-        <igx-sparkline height="40px" width="160px" [dataSource]="val" valueMemberPath="Deals"
-          [displayType]="displayType.Column" brush="rgb(21, 190, 6)" negativeBrush="rgb(211, 17, 3)">
-        </igx-sparkline>
-      </ng-template>
-    </igx-column>
-
-    <igx-column field="deals_lost" header="Lost Deals" [sortable]="true" width="130" dataType="number"
-      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="deals_pending" header="Pending Deals" [sortable]="true" width="130" dataType="number"
-      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="position" header="Position" width="200" [resizable]="true">
-    </igx-column>
-
-    <igx-column field="company" header="Company" [sortable]="true" width="130" [hasSummary]="false" [resizable]="true"
-     >
-    </igx-column>
-
-    <igx-column field="email" header="Email" width="240" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="work_phone" header="Work Phone" width="160" [resizable]="true"
-      [filterable]="false">
-    </igx-column>
-
-    <igx-column field="mobile_phone" header="Mobile Phone" width="160" [resizable]="true"
-      [filterable]="false">
-    </igx-column>
-
-    <igx-column field="fax" header="Fax" width="160" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="tags" header="Tags" width="160" [resizable]="true">
-    </igx-column>
-
-    <igx-column field="street" header="Street" width="160" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="city" header="City" width="160" [resizable]="true">
-    </igx-column>
-
-    <igx-column field="post_code" header="Post Code" width="100" [resizable]="true"
-      [filterable]="false">
-    </igx-column>
-
-    <igx-column field="state" header="State" width="105" [resizable]="true">
-    </igx-column>
-
-    <igx-column field="country" header="Country" [sortable]="true" width="160" [resizable]="true">
-    </igx-column>
-
-    <igx-column field="created_on" header="Created On" dataType="date" [formatter]="formatDate" [sortable]="true"
-      width="150" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="referred_by" header="Referred By" width="160" [resizable]="true">
-    </igx-column>
-
-    <igx-column field="birthday" header="Birthday" width="160" dataType="date" [formatter]="formatDate"
-      [hasSummary]="false" [summaries]="soonSummary" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="last_activity" header="Last Activity" width="160" dataType="date" [formatter]="formatDate"
-      [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="next_activity" header="Next Activity" width="160" dataType="date" [formatter]="formatDate"
-      [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true" [filterable]="false">
-    </igx-column>
-
-    <igx-column field="estimated_sales" header="Possible Sales ($)" [sortable]="true" width="150" dataType="number"
-      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
-      <ng-template igxCell let-cell="cell" let-val>
-        {{ formatValue(val) }}
-      </ng-template>
-    </igx-column>
-
-    <igx-column field="actual_sales" header="Actual Sales ($)" [sortable]="true" width="150" dataType="number"
-      [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
-      <ng-template igxCell let-val>
-        {{ formatValue(val) }}
-      </ng-template>
-    </igx-column>
-  </igx-grid>
-</div>

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

@@ -1,60 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxExcelExporterService, IgxCsvExporterService } from '<%=igxPackage%>';
-import { IgxSparklineModule, IgxSparklineCoreModule } from 'igniteui-angular-charts';
-
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-
-import {
-  IgxGridModule,
-  IgxAvatarModule,
-  IgxBadgeModule,
-  IgxButtonModule,
-  IgxIconModule,
-  IgxInputGroupModule,
-  IgxProgressBarModule,
-  IgxRippleModule,
-  IgxSwitchModule,
-  IgxToggleModule,
-  IgxCheckboxModule
-} from '<%=igxPackage%>';
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ <%=ClassName%>Component ],
-      imports: [
-        FormsModule,
-        BrowserAnimationsModule,
-        IgxGridModule,
-        IgxAvatarModule,
-        IgxBadgeModule,
-        IgxButtonModule,
-        IgxIconModule,
-        IgxInputGroupModule,
-        IgxProgressBarModule,
-        IgxRippleModule,
-        IgxSwitchModule,
-        IgxToggleModule,
-        IgxCheckboxModule,
-        IgxSparklineModule,
-        IgxSparklineCoreModule
-      ],
-      providers: [IgxExcelExporterService, IgxCsvExporterService]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,240 +0,0 @@
-import {
-  Component,
-  OnInit,
-  AfterViewInit,
-  QueryList,
-  ViewChild,
-  ElementRef
-} from '@angular/core';
-
-import {
-  CloseScrollStrategy,
-  ConnectedPositioningStrategy,
-  GridSelectionMode,
-  HorizontalAlignment,
-  IColumnExportingEventArgs,
-  ColumnType,
-  IgxDateSummaryOperand,
-  IgxCsvExporterService,
-  IgxExcelExporterService,
-  IgxGridComponent,
-  IgxNumberSummaryOperand,
-  IgxSummaryResult,
-  IgxToggleDirective,
-  OverlaySettings,
-  PositionSettings,
-  VerticalAlignment} from '<%=igxPackage%>';
-import { SparklineDisplayType } from 'igniteui-angular-charts';
-import { DATA, DealsDescriptor, Employee } from './data';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  standalone: false
-})
-export class <%=ClassName%>Component implements OnInit, AfterViewInit {
-
-  @ViewChild('grid1', { read: IgxGridComponent, static: true })
-  public grid1!: IgxGridComponent;
-
-  @ViewChild('toggleRefHiding') public toggleRefHiding!: IgxToggleDirective;
-  @ViewChild('toggleRefPinning') public toggleRefPinning!: IgxToggleDirective;
-
-  @ViewChild('hidingButton') public hidingButton!: ElementRef;
-  @ViewChild('pinningButton') public pinningButton!: ElementRef;
-
-  public localData: Employee[] = [];
-  public dealsSummary = DealsSummary;
-  public earliestSummary = EarliestSummary;
-  public soonSummary = SoonSummary;
-
-  public cols!: QueryList<ColumnType>;
-  public hiddenColsLength: number = 0;
-  public pinnedColsLength: number = 0;
-
-  public searchText = '';
-  public caseSensitive = false;
-  public selectionMode: GridSelectionMode = 'multiple';
-  public displayType = SparklineDisplayType;
-
-  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 CloseScrollStrategy()
-  };
-
-  constructor(
-    private csvExporter: IgxCsvExporterService,
-    private excelExporter: IgxExcelExporterService) {
-
-    const exporterCb = (args: IColumnExportingEventArgs): void => {
-      if (args.field === 'Deals') { args.cancel = true; }
-    };
-
-    this.excelExporter.columnExporting.subscribe(exporterCb);
-    this.csvExporter.columnExporting.subscribe(exporterCb);
-  }
-
-  public ngOnInit(): void {
-    const employees: Employee[] = DATA;
-    for (const employee of employees) {
-      this.getDeals(employee);
-    }
-    this.localData = employees;
-  }
-
-  public toggleHiding(): void {
-    this.overlaySettings.target = this.hidingButton.nativeElement;
-    this.toggleRefHiding.toggle(this.overlaySettings);
-  }
-
-  public togglePinning(): void {
-    this.overlaySettings.target = this.pinningButton.nativeElement;
-    this.toggleRefPinning.toggle(this.overlaySettings);
-  }
-
-  public ngAfterViewInit(): void {
-    this.cols = this.grid1.columnList;
-    this.hiddenColsLength = this.cols.filter((col) => col.hidden).length;
-    this.pinnedColsLength = this.cols.filter((col) => col.pinned).length;
-  }
-
-  public toggleVisibility(col: ColumnType): void {
-    if (col.hidden) {
-      this.hiddenColsLength--;
-    } else {
-      this.hiddenColsLength++;
-    }
-    col.hidden = !col.hidden;
-  }
-
-  public togglePin(col: ColumnType, evt: any): void {
-    if (col.pinned) {
-      this.grid1.unpinColumn(col.field);
-      this.pinnedColsLength--;
-    } else {
-      if (this.grid1.pinColumn(col.field)) {
-        this.pinnedColsLength++;
-      } else {
-        // if pinning fails uncheck the checkbox
-        evt.checkbox.checked = false;
-      }
-    }
-  }
-
-  public formatDate(val: Date): string {
-    return new Intl.DateTimeFormat('en-US').format(val);
-  }
-
-  public searchKeyDown(ev: KeyboardEvent): void {
-    if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
-      ev.preventDefault();
-      this.grid1.findNext(this.searchText, this.caseSensitive);
-    } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
-      ev.preventDefault();
-      this.grid1.findPrev(this.searchText, this.caseSensitive);
-    }
-  }
-
-  public updateSearch(): void {
-    this.caseSensitive = !this.caseSensitive;
-    this.grid1.findNext(this.searchText, this.caseSensitive);
-  }
-
-  public clearSearch(): void {
-    this.searchText = '';
-    this.grid1.clearSearch();
-  }
-
-  public formatValue(val: any): string {
-    return val.toLocaleString('en-us', { maximumFractionDigits: 2 });
-  }
-
-  public getDeals(employee: Employee): void {
-    employee.deals = this.getDealsData();
-  }
-
-  public getDealsData(months?: number): DealsDescriptor[] {
-    if (months === undefined) {
-      months = 12;
-    }
-    const deals: DealsDescriptor[] = [];
-    for (let m = 0; m < months; m++) {
-      const value = this.getRandomNumber(-20, 30);
-      deals.push({ Deals: value, Month: m });
-    }
-    return deals;
-  }
-
-  public getRandomNumber(min: number, max: number): number {
-    return Math.round(min + Math.random() * (max - min));
-  }
-}
-
-class DealsSummary extends IgxNumberSummaryOperand {
-  constructor() {
-    super();
-  }
-
-  public override operate(summaries?: number[]): IgxSummaryResult[] {
-    const result = super.operate(summaries).filter((obj) => {
-      if (obj.key === 'average' || obj.key === 'sum') {
-        const summaryResult = obj.summaryResult;
-        // apply formatting to float numbers
-        if (Number(summaryResult) === summaryResult) {
-          obj.summaryResult = summaryResult.toLocaleString('en-us', { maximumFractionDigits: 2 });
-        }
-        return true;
-      }
-      return false;
-    });
-    return result;
-  }
-}
-
-function formatDate(val: Date) {
-    return new Intl.DateTimeFormat('en-US').format(val);
-}
-
-class EarliestSummary extends IgxDateSummaryOperand {
-  constructor() {
-    super();
-  }
-
-  public override operate(summaries?: Date[]): IgxSummaryResult[] {
-    const result = super.operate(summaries).filter((obj) => {
-      if (obj.key === 'earliest') {
-        obj.summaryResult = formatDate(obj.summaryResult);
-        return true;
-      }
-      return false;
-    });
-    return result;
-  }
-}
-
-class SoonSummary extends IgxDateSummaryOperand {
-  constructor() {
-    super();
-  }
-
-  public override operate(summaries?: Date[]): IgxSummaryResult[] {
-    const result = super.operate(summaries).filter((obj) => {
-      if (obj.key === 'latest') {
-        obj.label = 'Soon';
-        obj.summaryResult = formatDate(obj.summaryResult);
-        return true;
-      }
-      return false;
-    });
-    return result;
-  }
-}