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

package/igx-ts/date-picker/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,13 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { IgxLayoutDirective, IgxDatePickerComponent } from '<%=igxPackage%>';;
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  encapsulation: ViewEncapsulation.Emulated,
+  imports: [IgxLayoutDirective, IgxDatePickerComponent],
+})
+export class <%=ClassName%> {
+  public today: Date = new Date(Date.now());
+}

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

package/igx-ts/dialog/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IDialogEventArgs, IgxButtonDirective, IgxDialogComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxButtonDirective, IgxDialogComponent]
+})
+export class <%=ClassName%> {
+  dialogOKSelected(args: IDialogEventArgs) {
+    args.dialog.close();
+  }
+}

package/igx-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,31 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { defineCustomElements } from '<%=dockManagerPackage%>/loader';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+defineCustomElements();
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [CommonModule, <%=ClassName%>],
+	  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    expect(document.querySelector('igc-dockmanager')?.constructor).toBe(customElements.get('igc-dockmanager'));
+  });
+});

package/igx-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,124 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {
+  IgcDockManagerLayout,
+  IgcDockManagerPaneType,
+  IgcSplitPaneOrientation
+} from '<%=dockManagerPackage%>';
+import { defineCustomElements } from '<%=dockManagerPackage%>/loader';
+
+defineCustomElements();
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class <%=ClassName%> {
+  public layout: IgcDockManagerLayout = {
+    rootPane: {
+      type: IgcDockManagerPaneType.splitPane,
+      orientation: IgcSplitPaneOrientation.horizontal,
+      panes: [
+        {
+          type: IgcDockManagerPaneType.splitPane,
+          orientation: IgcSplitPaneOrientation.vertical,
+          panes: [
+            {
+              type: IgcDockManagerPaneType.contentPane,
+              contentId: 'content1',
+              header: 'Content Pane 1'
+            },
+            {
+              type: IgcDockManagerPaneType.contentPane,
+              contentId: 'content2',
+              header: 'Unpinned Pane 1',
+              isPinned: false
+            }
+          ]
+        },
+        {
+          type: IgcDockManagerPaneType.splitPane,
+          orientation: IgcSplitPaneOrientation.vertical,
+          size: 200,
+          panes: [
+            {
+              type: IgcDockManagerPaneType.documentHost,
+              size: 200,
+              rootPane: {
+                type: IgcDockManagerPaneType.splitPane,
+                orientation: IgcSplitPaneOrientation.horizontal,
+                panes: [
+                  {
+                    type: IgcDockManagerPaneType.tabGroupPane,
+                    panes: [
+                      {
+                        type: IgcDockManagerPaneType.contentPane,
+                        header: 'Document 1',
+                        contentId: 'content3'
+                      },
+                      {
+                        type: IgcDockManagerPaneType.contentPane,
+                        header: 'Document 2',
+                        contentId: 'content4'
+                      }
+                    ]
+                  }
+                ]
+              }
+            },
+            {
+              type: IgcDockManagerPaneType.contentPane,
+              contentId: 'content5',
+              header: 'Unpinned Pane 2',
+              isPinned: false
+            }
+          ]
+        },
+        {
+          type: IgcDockManagerPaneType.splitPane,
+          orientation: IgcSplitPaneOrientation.vertical,
+          panes: [
+            {
+              type: IgcDockManagerPaneType.tabGroupPane,
+              size: 200,
+              panes: [
+                {
+                  type: IgcDockManagerPaneType.contentPane,
+                  contentId: 'content6',
+                  header: 'Tab 1'
+                },
+                {
+                  type: IgcDockManagerPaneType.contentPane,
+                  contentId: 'content7',
+                  header: 'Tab 2'
+                }
+              ]
+            },
+            {
+              type: IgcDockManagerPaneType.contentPane,
+              contentId: 'content8',
+              header: 'Content Pane 2'
+            }
+          ]
+        }
+      ]
+    },
+    floatingPanes: [
+      {
+        type: IgcDockManagerPaneType.splitPane,
+        orientation: IgcSplitPaneOrientation.horizontal,
+        floatingHeight: 150,
+        floatingWidth: 250,
+        floatingLocation: { x: 300, y: 200 },
+        panes: [
+          {
+            type: IgcDockManagerPaneType.contentPane,
+            contentId: 'content9',
+            header: 'Floating Pane'
+          }
+        ]
+      }
+    ]
+  };
+}

package/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,15 @@
+<p>igx-dropdown component.</p>
+<p>You can read more about configuring the igx-dropdown component in the
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/drop-down/README.md" target="_blank">README</a> or the
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/drop-down" target="_blank">official documentation</a>.</p>
+
+<div class="sample-wrapper drop-down-wrapper">
+  <button #button igxButton="raised" igxRipple [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Toggle dropdown</button>
+  <igx-drop-down width="200px" #dropdown>
+    @for (item of items; track item) {
+      <igx-drop-down-item [disabled]="!!item.disabled" [isHeader]="!!item.header">
+        {{ item.name }}
+      </igx-drop-down-item>
+    }
+  </igx-drop-down>
+</div>

package/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,25 @@
+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/dropdown/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+import { Country, data } from './local-data';
+import {
+  IgxButtonDirective,
+  IgxRippleDirective,
+  IgxToggleActionDirective,
+  IgxDropDownItemNavigationDirective,
+  IgxDropDownComponent,
+  IgxDropDownItemComponent,
+} from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxButtonDirective,
+    IgxRippleDirective,
+    IgxToggleActionDirective,
+    IgxDropDownItemNavigationDirective,
+    IgxDropDownComponent,
+    IgxDropDownItemComponent,
+  ]
+})
+
+export class <%=ClassName%> {
+  public items: Country[] = data;
+}

package/igx-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IgxFinancialChartModule } from 'igniteui-angular-charts';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IgxFinancialChartModule, <%=ClassName%>],
+      teardown: { destroyAfterEach: false }
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { AMZNData, Stock } from './data';
+import { IgxFinancialChartModule } from 'igniteui-angular-charts';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxFinancialChartModule]
+})
+export class <%=ClassName%> {
+  public data: Stock[] = AMZNData;
+}

package/igx-ts/financial-chart/default/index.js

@@ -10,7 +10,7 @@ class IgxFinancialChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFor
         this.id = "financial-chart";
         this.projectType = "igx-ts";
         this.name = "Financial Chart";
-        this.packages = ["igniteui-angular-core@~20.1.0", "igniteui-angular-charts@~20.1.0"];
+        this.packages = ["igniteui-angular-core@~21.0.0", "igniteui-angular-charts@~21.0.0"];
     }
 }
 module.exports = new IgxFinancialChartTemplate();

package/igx-ts/generate/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IgxCarouselModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/generate/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: "<%=filePrefix%>",
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss'
+})
+export class <%=ClassName%> {
+  title = '<%=name%>';
+}

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

package/igx-ts/grid/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { ColumnType, IgxGridComponent, IgxPaginatorComponent } from '<%=igxPackage%>';
+import { Employee, employeesData } from './localData';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxGridComponent, IgxPaginatorComponent]
+})
+export class <%=ClassName%> implements OnInit {
+  public localData: Employee[] = [];
+  title = '<%=name%>';
+
+  ngOnInit(): void {
+    this.localData = employeesData;
+  }
+
+  public onColumnInit(column: ColumnType): void {
+    if (column.field === 'RegistererDate') {
+      column.formatter = (date => date.toLocaleDateString());
+    }
+  }
+}

package/igx-ts/grid/grid-batch-editing/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  IgxButtonModule,
+  IgxDialogModule,
+  IgxFocusModule,
+  IgxGridModule,
+  IgxRippleModule
+} from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	  imports: [FormsModule, NoopAnimationsModule, IgxDialogModule, IgxGridModule, IgxFocusModule, IgxButtonModule, IgxRippleModule, <%=ClassName%>]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/grid/grid-batch-editing/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,120 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+  IgxDialogComponent,
+  IgxGridComponent,
+  State,
+  Transaction,
+  TransactionService,
+  IgxColumnComponent,
+  IgxCellTemplateDirective,
+  IgxButtonDirective,
+  IgxCellEditorTemplateDirective,
+  IgxFocusDirective,
+  IgxRippleDirective,
+} from '<%=igxPackage%>';
+import { data, Product } from './data';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [
+    IgxGridComponent,
+    IgxColumnComponent,
+    IgxCellTemplateDirective,
+    IgxButtonDirective,
+    IgxCellEditorTemplateDirective,
+    ReactiveFormsModule,
+    FormsModule,
+    IgxFocusDirective,
+    IgxRippleDirective,
+    IgxDialogComponent
+  ]
+})
+export class <%=ClassName%> implements OnInit {
+  @ViewChild('gridRowEditTransaction', { static: true, read: IgxGridComponent }) public grid!: IgxGridComponent;
+  @ViewChild(IgxDialogComponent, { static: true }) public dialog!: IgxDialogComponent;
+  @ViewChild('dialogGrid', { static: true, read: IgxGridComponent }) public dialogGrid!: IgxGridComponent;
+
+  public data: Product[];
+  public transactionsData: Transaction[] = [];
+  private addProductId: number;
+
+  public get transactions(): TransactionService<Transaction, State> {
+    return this.grid.transactions;
+  }
+
+  constructor() {
+    this.data = data;
+    this.addProductId = this.data.length + 1;
+  }
+
+  public ngOnInit(): void {
+    this.transactionsData = this.transactions.getAggregatedChanges(true);
+    this.grid.rendered$.subscribe(() => {
+      this.transactions.onStateUpdate?.subscribe(() => {
+        this.transactionsData = this.transactions.getAggregatedChanges(true);
+      })
+    })
+  }
+
+  public addRow(): void {
+    this.grid.addRow({
+      CategoryID: this.getRandomInt(1, 10),
+      Discontinued: this.getRandomInt(1, 10) % 2 === 0,
+      OrderDate: new Date(this.getRandomInt(2000, 2050), this.getRandomInt(0, 11), this.getRandomInt(1, 25)),
+      ProductID: this.addProductId++,
+      ProductName: 'Product with index ' + this.getRandomInt(0, 20),
+      QuantityPerUnit: (this.getRandomInt(1, 10) * 10).toString() + ' pcs.',
+      ReorderLevel: this.getRandomInt(10, 20),
+      SupplierID: this.getRandomInt(1, 20),
+      UnitPrice: this.getRandomInt(10, 1000),
+      UnitsInStock: this.getRandomInt(1, 100),
+      UnitsOnOrder: this.getRandomInt(1, 20)
+    });
+  }
+
+  public classFromType(type: string): string {
+    return `transaction--${type.toLowerCase()}`;
+  }
+
+  public deleteRow(rowID: any): void {
+    this.grid.deleteRow(rowID);
+  }
+
+  public openCommitDialog(): void {
+    this.dialog.open();
+    this.dialogGrid.reflow();
+  }
+
+  public commit(): void {
+    this.grid.transactions.commit(this.data);
+    this.dialog.close();
+  }
+
+  public cancel(): void {
+    this.dialog.close();
+  }
+
+  public discard(): void {
+    this.grid.transactions.clear();
+    this.dialog.close();
+  }
+
+  private getRandomInt(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  public get hasTransactions(): boolean {
+    return this.grid.transactions.getAggregatedChanges(false).length > 0;
+  }
+
+  public stateFormatter(value: string): string {
+    return JSON.stringify(value);
+  }
+
+  public typeFormatter(value: string): string {
+    return value.toUpperCase();
+  }
+}

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

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { Employee, employeesData } from './localData';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss'
+})
+export class <%=ClassName%> implements OnInit {
+  public localData: Employee[] = [];
+  title = '<%=name%>';
+
+  ngOnInit(): void {
+    this.localData = employeesData;
+  }
+}

package/igx-ts/grid/grid-summaries/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxGridModule } from '<%=igxPackage%>';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+	 imports: [NoopAnimationsModule, IgxGridModule, <%=ClassName%>]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});