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

package/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.component.spec.ts

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

package/igx-ts-legacy/tree/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,66 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { IgxTreeNodeComponent } from '<%=igxPackage%>';
-import { Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
-import { DATA, NodeData, REMOTE_ROOT, SelectableNodeData } from './local-data';
-import { DataService } from './services/data.service';
-
-@Component({
-  selector: 'app-<%=filePrefix%>',
-  templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss'],
-  providers: [DataService],
-  standalone: false
-})
-
-export class <%=ClassName%>Component implements OnDestroy {
-  public data = DATA;
-  public loading = false;
-  public showRefresh = false;
-  public remoteRoot = REMOTE_ROOT;
-  public remoteData: SelectableNodeData[] = [];
-  private destroy$ = new Subject<void>();
-
-  constructor(private dataService: DataService) {
-    this.dataService.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
-      this.loading = false;
-      this.remoteData = data;
-    });
-  }
-
-  public refreshData(node: IgxTreeNodeComponent<NodeData>): void {
-    this.dataService.clearData();
-    this.remoteData = [];
-    this.getNodeData(node, true);
-    this.dataService.getData();
-  }
-
-  public getNodeData(node: IgxTreeNodeComponent<any>, evt: boolean): void {
-    if (this.remoteData?.length) {
-      return;
-    }
-    if (evt) {
-      this.showRefresh = true;
-      this.loading = true;
-      this.dataService.getData();
-      this.dataService.data.pipe(take(1)).subscribe((data) => {
-        if (node.selected) {
-          data.forEach(e => {
-            if (e.Selected === undefined) {
-              e.Selected = true;
-            }
-          });
-        }
-      });
-    }
-  }
-
-  public handleSelection(node: NodeData, selected: boolean): void {
-    this.dataService.toggleSelected(node, selected);
-  }
-
-  public ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}

package/igx-ts-legacy/tree/default/files/src/app/__path__/local-data.ts

@@ -1,75 +0,0 @@
-export interface NodeData {
-  Name: string;
-  Icon: string;
-  Files?: NodeData[];
-}
-
-export interface SelectableNodeData extends NodeData {
-  Selected?: boolean;
-}
-
-export const REMOTE_ROOT: NodeData = {
-  Name: 'Network',
-  Icon: 'devices',
-  Files: []
-};
-
-export const REMOTE_DATA: NodeData[] = [
-  { Name: 'DESKTOP-XYZ', Icon: 'computer' },
-  { Name: 'TABLET-ABC', Icon: 'tablet' },
-  { Name: 'PHONE-123', Icon: 'smartphone' }
-];
-
-export const DATA: NodeData[] = [
-  {
-    Name: 'Computer', Icon: 'computer', Files: [
-      {
-        Name: 'Documents',
-        Icon: 'library_books',
-        Files:
-          [
-            { Name: 'Report 2016', Icon: 'article' },
-            { Name: 'Report 2017', Icon: 'article' },
-            { Name: 'Report 2018', Icon: 'article' },
-            { Name: 'Report 2019', Icon: 'article' },
-            { Name: 'Report 2020', Icon: 'article' }
-          ]
-      },
-      {
-        Name: 'Music',
-        Icon: 'library_music',
-        Files:
-          [
-            { Name: 'Track 1', Icon: 'audiotrack' },
-            { Name: 'Track 2', Icon: 'audiotrack' },
-            { Name: 'Track 3', Icon: 'audiotrack' },
-            { Name: 'Track 4', Icon: 'audiotrack' },
-            { Name: 'Track 5', Icon: 'audiotrack' }
-          ]
-      },
-      {
-        Name: 'Pictures',
-        Icon: 'photo_library',
-        Files:
-          [
-            { Name: 'Image 101', Icon: 'image' },
-            { Name: 'Image 102', Icon: 'image' },
-            { Name: 'Image 103', Icon: 'image' },
-            { Name: 'Image 104', Icon: 'image' },
-            { Name: 'Image 105', Icon: 'image' }
-          ]
-      },
-      {
-        Name: 'Recycle Bin',
-        Icon: 'delete',
-        Files:
-          [
-            { Name: 'Track 6', Icon: 'audiotrack' },
-            { Name: 'Track 7', Icon: 'audiotrack' },
-            { Name: 'Image 106', Icon: 'image' },
-            { Name: 'Image 107', Icon: 'image' }
-          ]
-      }
-    ]
-  }
-];

package/igx-ts-legacy/tree/default/files/src/app/__path__/services/data.service.ts

@@ -1,51 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Observable, ReplaySubject } from 'rxjs';
-import { NodeData, REMOTE_DATA, SelectableNodeData } from '../local-data';
-
-@Injectable()
-export class DataService {
-  private nodeData: SelectableNodeData[] = [];
-  private selectedNode: Set<string> = new Set<string>();
-  private deselectedNode: Set<string> = new Set<string>();
-  private data$: ReplaySubject<SelectableNodeData[]> = new ReplaySubject();
-  public get data(): Observable<SelectableNodeData[]> {
-    return this.data$;
-  }
-
-  public getData(): void {
-    setTimeout(() => {
-      this.nodeData = REMOTE_DATA;
-      const passed = this.nodeData.map(e => {
-        const selectionState: Partial<SelectableNodeData> = {};
-        if (this.selectedNode.has(e.Name)) {
-          selectionState.Selected = true;
-        }
-        if (this.deselectedNode.has(e.Name)) {
-          selectionState.Selected = false;
-        }
-        return Object.assign({}, e, selectionState);
-      });
-      this.data$.next(passed);
-    }, 2000);
-  }
-
-  public clearData(): void {
-    this.nodeData = [];
-    this.data$.next(this.nodeData);
-  }
-
-  public clearSelect(): void {
-    this.selectedNode = new Set<string>();
-    this.deselectedNode = new Set<string>();
-  }
-
-  public toggleSelected(node: NodeData, state: boolean): void {
-    if (state) {
-      this.selectedNode.add(node.Name);
-      this.deselectedNode.delete(node.Name);
-    } else {
-      this.deselectedNode.add(node.Name);
-      this.selectedNode.delete(node.Name);
-    }
-  }
-}

package/igx-ts-legacy/tree/default/index.d.ts

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

package/igx-ts-legacy/tree/default/index.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
-class IgxComboTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
-    constructor() {
-        super(__dirname);
-        this.components = ["Tree"];
-        this.controlGroup = "Grids & Lists";
-        this.listInComponentTemplates = true;
-        this.id = "tree";
-        this.projectType = "igx-ts";
-        this.name = "Tree";
-        this.description = "IgxTree sample with selection and load-on-demand node";
-        this.dependencies = [{
-                import: ["IgxTreeModule", "IgxIconModule", "IgxTooltipModule"],
-                from: "<%=igxPackage%>"
-            }];
-    }
-}
-module.exports = new IgxComboTemplate();

package/igx-ts-legacy/tree/index.d.ts

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

package/igx-ts-legacy/tree/index.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const cli_core_1 = require("@igniteui/cli-core");
-class IgxComboComponent extends cli_core_1.BaseComponent {
-    /**
-     *
-     */
-    constructor() {
-        super(__dirname);
-        this.name = "Tree";
-        this.group = "Grids & Lists";
-        this.description = `visualize hierarchical data in beautiful and easy-to-navigate tree-view.`;
-    }
-}
-module.exports = new IgxComboComponent();

package/igx-ts-legacy/tree-grid/index.d.ts

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

package/igx-ts-legacy/tree-grid/index.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const cli_core_1 = require("@igniteui/cli-core");
-class IgxGridComponent extends cli_core_1.BaseComponent {
-    /**
-     *
-     */
-    constructor() {
-        super(__dirname);
-        this.name = "Tree Grid";
-        this.group = "Grids & Lists";
-        this.description = "pick from tree grid templates";
-        this.groupPriority = 9;
-    }
-}
-module.exports = new IgxGridComponent();

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

@@ -1,27 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxCheckboxModule, IgxDatePickerModule, IgxTreeGridModule } from '<%=igxPackage%>';
-import { <%=ClassName%>Component } from './<%=filePrefix%>.component';
-
-describe('<%=ClassName%>Component', () => {
-  let component: <%=ClassName%>Component;
-  let fixture: ComponentFixture<<%=ClassName%>Component>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [BrowserAnimationsModule, IgxTreeGridModule, IgxDatePickerModule, IgxCheckboxModule]
-    })
-      .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(<%=ClassName%>Component);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

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

package/igx-ts-legacy/tree-grid/tree-grid-custom/files/src/app/__path__/localData.ts

@@ -1,155 +0,0 @@
-export interface Employee {
-  Age: number;
-  Employees?: Employee[];
-  HireDate: Date;
-  ID: number;
-  Name: string;
-  Location: string;
-}
-
-export const EMPLOYEE_DATA: Employee[] = [
-  {
-    Age: 55,
-    Employees: [
-      {
-        Age: 43,
-        Employees: [],
-        HireDate: new Date(2011, 6, 3),
-        ID: 3,
-        Name: 'Michael Burke',
-        Location: 'London'
-      },
-      {
-        Age: 29,
-        Employees: [],
-        HireDate: new Date(2009, 6, 19),
-        ID: 2,
-        Name: 'Thomas Anderson',
-        Location: 'London'
-      },
-      {
-        Age: 31,
-        Employees: [
-          {
-            Age: 35,
-            HireDate: new Date(2015, 9, 17),
-            ID: 6,
-            Name: 'Roland Mendel',
-            Location: 'Tokyo'
-          },
-          {
-            Age: 44,
-            HireDate: new Date(2009, 10, 11),
-            ID: 12,
-            Name: 'Sven Cooper',
-            Location: 'Tokyo'
-          }
-        ],
-        HireDate: new Date(2014, 8, 18),
-        ID: 11,
-        Name: 'Monica Reyes',
-        Location: 'London'
-      }
-    ],
-    HireDate: new Date(2008, 3, 20),
-    ID: 1,
-    Name: 'Johnathan Winchester',
-    Location: 'London'
-  },
-  {
-    Age: 42,
-    Employees: [
-      {
-        Age: 44,
-        HireDate: new Date(2014, 4, 4),
-        ID: 14,
-        Name: 'Laurence Johnson',
-        Location: 'New Jersey'
-      },
-      {
-        Age: 25,
-        Employees: [
-          {
-            Age: 39,
-            HireDate: new Date(2010, 3, 22),
-            ID: 13,
-            Name: 'Trevor Ashworth',
-            Location: 'New Jersey'
-          }
-        ],
-        HireDate: new Date(2017, 11, 9),
-        ID: 5,
-        Name: 'Elizabeth Richards',
-        Location: 'New Jersey'
-      }
-    ],
-    HireDate: new Date(2014, 1, 22),
-    ID: 4,
-    Name: 'Ana Sanders',
-    Location: 'New Jersey'
-  },
-  {
-    Age: 49,
-    Employees: [
-      {
-        Age: 44,
-        Employees: [],
-        HireDate: new Date(2014, 4, 4),
-        ID: 17,
-        Name: 'Antonio Moreno',
-        Location: 'New Jersey'
-      }
-    ],
-    HireDate: new Date(2014, 1, 22),
-    ID: 18,
-    Name: 'Victoria Lincoln',
-    Location: 'New Jersey'
-  },
-  {
-    Age: 61,
-    Employees: [
-      {
-        Age: 50,
-        Employees: [
-          {
-            Age: 25,
-            Employees: [],
-            HireDate: new Date(2017, 11, 9),
-            ID: 15,
-            Name: 'Patricia Simpson',
-            Location: 'New Jersey'
-          },
-          {
-            Age: 39,
-            HireDate: new Date(2010, 3, 22),
-            ID: 9,
-            Name: 'Francisco Chang',
-            Location: 'Tokyo'
-          },
-          {
-            Age: 25,
-            HireDate: new Date(2018, 3, 18),
-            ID: 16,
-            Name: 'Peter Lewis',
-            Location: 'New Jersey'
-          }
-        ],
-        HireDate: new Date(2007, 11, 18),
-        ID: 7,
-        Name: 'Pedro Rodriguez',
-        Location: 'New Jersey'
-      },
-      {
-        Age: 27,
-        HireDate: new Date(2016, 2, 19),
-        ID: 8,
-        Name: 'Casey Harper',
-        Location: 'Tokyo'
-      }
-    ],
-    HireDate: new Date(2010, 1, 1),
-    ID: 10,
-    Name: 'Yuki Onna',
-    Location: 'Tokyo'
-  }
-];

package/igx-ts-legacy/tree-grid/tree-grid-custom/index.d.ts

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

package/igx-ts-legacy/tree-grid/tree-grid-custom/index.js

@@ -1,159 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
-class IgxCustomTreeGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
-    constructor() {
-        super(__dirname);
-        this.userExtraConfiguration = {};
-        this.components = ["Tree Grid"];
-        this.controlGroup = "Grids & Lists";
-        this.listInComponentTemplates = true;
-        this.id = "custom-tree-grid";
-        this.projectType = "igx-ts";
-        this.name = "Custom Tree Grid";
-        this.description = "IgxTreeGrid with optional features like sorting, filtering, row editing, etc.";
-        this.dependencies = [
-            { import: "IgxTreeGridModule", from: "<%=igxPackage%>" }
-        ];
-        this.hasExtraConfiguration = true;
-    }
-    setExtraConfiguration(extraConfigKeys) {
-        this.userExtraConfiguration = extraConfigKeys;
-    }
-    getExtraConfiguration() {
-        return [{
-                choices: ["Sorting", "Filtering", "Cell Editing", "Row Editing", "Resizing",
-                    "Row Selection", "Paging", "Column Pinning", "Column Moving", "Column Hiding"],
-                default: "",
-                key: "columnFeatures",
-                message: "Choose features for the igx-tree-grid",
-                type: 1 /* ControlExtraConfigType.MultiChoice */
-            }];
-    }
-    generateConfig(name, ...options) {
-        let additionalMarkup = "";
-        /** starts with empty string to create a new line on join when something else is added */
-        const additionalElements = [""];
-        const toolbarActions = [];
-        const columnFeatures = [];
-        const columnBoolFeatures = [];
-        const treeGridFeatures = [];
-        const featureUrl = "https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/";
-        const anchorWrapper = {
-            start: `<a href="`,
-            // tslint:disable-next-line:object-literal-sort-keys
-            href: ``,
-            middle: `" target="_blank">`,
-            text: ``,
-            end: `</a>`
-        };
-        let selectedFeatures = "";
-        let columnPinning = "";
-        if (this.userExtraConfiguration["columnFeatures"]) {
-            const features = this.userExtraConfiguration["columnFeatures"];
-            const featuresUrls = [];
-            for (const feature of this.userExtraConfiguration["columnFeatures"]) {
-                switch (feature) {
-                    case "Sorting":
-                        this.formatTreeGridFeatures(feature, columnFeatures, columnBoolFeatures);
-                        break;
-                    case "Filtering":
-                        this.formatTreeGridFeatures(feature, columnFeatures, columnBoolFeatures);
-                        treeGridFeatures.push('[allowFiltering]="true"');
-                        break;
-                    case "Resizing":
-                        this.formatTreeGridFeatures(feature, columnFeatures, columnBoolFeatures);
-                        break;
-                    case "Column Moving":
-                        treeGridFeatures.push('[moving]="true"');
-                        break;
-                    case "Column Hiding":
-                        toolbarActions.push("      <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>");
-                        break;
-                    case "Cell Editing":
-                        columnFeatures.push(`[editable]="true"`);
-                        break;
-                    case "Row Editing":
-                        treeGridFeatures.push(`[rowEditable]="true"`);
-                        break;
-                    case "Row Selection":
-                        const gridFeatureText = `rowSelection="multiple"`;
-                        treeGridFeatures.push(gridFeatureText);
-                        break;
-                    case "Paging":
-                        additionalElements.push(`  <igx-paginator></igx-paginator>`);
-                        break;
-                    case "Column Pinning":
-                        columnPinning = '[pinned]="true"';
-                        toolbarActions.push("      <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>");
-                        break;
-                }
-                switch (feature) {
-                    case "Sorting":
-                    case "Filtering":
-                    case "Editing":
-                    case "Paging":
-                        featuresUrls.push(`${featureUrl}${feature.toLocaleLowerCase()}`);
-                        break;
-                    case "Resizing":
-                        featuresUrls.push(`${featureUrl}column-resizing`);
-                        break;
-                    case "Column Pinning":
-                        featuresUrls.push(`${featureUrl}column-pinning`);
-                        break;
-                    case "Cell Editing":
-                        featuresUrls.push(`${featureUrl}editing`);
-                        break;
-                    case "Row Editing":
-                        featuresUrls.push(`${featureUrl}row-editing`);
-                        break;
-                    case "Column Moving":
-                        featuresUrls.push(`${featureUrl}column-moving`);
-                        break;
-                    case "Column Hiding":
-                        featuresUrls.push(`${featureUrl}column-hiding`);
-                        break;
-                    case "Row Selection":
-                        featuresUrls.push(`${featureUrl}selection`);
-                        break;
-                }
-            }
-            selectedFeatures = features.map((e, i) => {
-                anchorWrapper.href = featuresUrls[i];
-                anchorWrapper.text = e;
-                return ` ${anchorWrapper.start}${anchorWrapper.href}${anchorWrapper.middle}` +
-                    `${anchorWrapper.text}${anchorWrapper.end}`;
-            }).toString();
-            if (selectedFeatures.length > 0) {
-                selectedFeatures = `<p>Active Features:<br />${selectedFeatures}</p>`;
-            }
-            if (toolbarActions.length) {
-                const parts = [
-                    "  <igx-grid-toolbar>",
-                    "    <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>",
-                    "    <igx-grid-toolbar-actions>",
-                    ...toolbarActions,
-                    "    </igx-grid-toolbar-actions>",
-                    "  </igx-grid-toolbar>"
-                ];
-                additionalElements.splice(1, 0, parts.join("\n"));
-            }
-            additionalMarkup = additionalElements.join("\n");
-        }
-        const extraConfig = {
-            additionalMarkup,
-            columnPinning,
-            selectedFeatures,
-            columnBoolFeatures: columnBoolFeatures.join(" "),
-            columnFeatures: columnFeatures.join(" "),
-            treeGridFeatures: treeGridFeatures.join(" ")
-        };
-        return super.generateConfig(name, { extraConfig });
-    }
-    formatTreeGridFeatures(feature, columnFeatures, columnBoolFeatures) {
-        const text = `[${feature.toLowerCase().replace("ing", "able")}]="true"`;
-        columnFeatures.push(text);
-        columnBoolFeatures.push(text);
-    }
-}
-module.exports = new IgxCustomTreeGridTemplate();