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

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

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

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

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxHierarchicalGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.userExtraConfiguration = {};
+        /** starts with empty string to create a new line on join when something else is added */
+        this.additionalElements = [""];
+        this.components = ["Hierarchical Grid"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "hierarchical-grid-custom";
+        this.projectType = "igx-ts";
+        this.name = "Custom Hierarchical Grid";
+        this.description = "a customizable IgxHierarchicalGrid";
+        this.dependencies = [
+            { import: ["IgxGridModule", "IgxHierarchicalGridModule"], from: "<%=igxPackage%>" }
+        ];
+        this.hasExtraConfiguration = true;
+    }
+    setExtraConfiguration(extraConfigKeys) {
+        this.userExtraConfiguration = extraConfigKeys;
+    }
+    getExtraConfiguration() {
+        return [{
+                choices: ["Sorting", "Filtering", "Cell Editing", "Resizing", "Row Selection",
+                    "Paging", "Column Pinning", "Column Moving", "Column Hiding"],
+                default: "",
+                key: "columnFeatures",
+                message: "Choose features for the igx-hierarchical-grid",
+                type: 1 /* MultiChoice */
+            }];
+    }
+    generateConfig(name, ...options) {
+        const columnFeatures = [];
+        const gridFeatures = [];
+        const extraConfig = {
+            selectedFeatures: this.getSelectedFeatures(columnFeatures, gridFeatures),
+            // must be assigned after getSelectedFeatures evaluates, TODO: refactor method
+            additionalMarkup: this.additionalElements.join("\n"),
+            // tslint:disable-next-line: object-literal-sort-keys
+            columnFeatures: columnFeatures.join(" "),
+            gridFeatures: gridFeatures.join(" "),
+            rowIslandFeatures: gridFeatures.join(" ").replace(/Singers/g, "Albums")
+        };
+        if (this.usePinning) {
+            Object.assign(extraConfig, {
+                albumPin: this.pinningTemplate("Album"),
+                artistPin: this.pinningTemplate("Artist"),
+                awardsPin: this.pinningTemplate("Awards"),
+                grammyPin: this.pinningTemplate("Grammy"),
+                launchPin: this.pinningTemplate("Launch"),
+                nominationsPin: this.pinningTemplate("Nominations")
+            });
+        }
+        return super.generateConfig(name, { extraConfig });
+    }
+    //tslint:disable
+    pinningTemplate(columnName) {
+        // https://github.com/IgniteUI/igniteui-angular/issues/3998
+        // Defining let-columnRef="column" does not seem to work.
+        // Angular passes in the $implicit(ly) defined value.
+        return `<ng-template igxHeader let-columnRef>
+			<div class="title-inner">
+				<span style="float:left">${columnName}</span>
+				<igx-icon class="pin-icon" family="fas" name="fa-thumbtack" (click)="toggleColumn(columnRef, $event)"></igx-icon>
+			</div>
+		</ng-template>`.replace(/\t/g, "  ");
+    }
+    getSelectedFeatures(columnFeatures, gridFeatures) {
+        const toolbarActions = [];
+        const columnBoolFeatures = [];
+        let selectedFeatures = "";
+        const featureUrl = "https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/";
+        const anchorWrapper = {
+            start: `<a href="`,
+            href: ``,
+            middle: `" target="_blank">`,
+            text: ``,
+            end: `</a>`
+        };
+        if (this.userExtraConfiguration["columnFeatures"]) {
+            const features = this.userExtraConfiguration["columnFeatures"];
+            const featuresUrls = [];
+            for (const feature of this.userExtraConfiguration["columnFeatures"]) {
+                switch (feature) {
+                    case "Sorting":
+                    case "Filtering":
+                    case "Resizing":
+                        const text = `[${feature.toLowerCase().replace("ing", "able")}]="true"`;
+                        columnFeatures.push(text);
+                        columnBoolFeatures.push(text);
+                        break;
+                    case "Column Moving":
+                        gridFeatures.push('[moving]="true"');
+                        break;
+                    case "Column Hiding":
+                        toolbarActions.push("      <igx-grid-toolbar-hiding title='Column Hiding'></igx-grid-toolbar-hiding>");
+                        break;
+                    case "Cell Editing":
+                        columnFeatures.push(`[editable]="true"`);
+                        this.dependencies.push({ import: "FormsModule", from: "@angular/forms" });
+                        break;
+                    case "Row Selection":
+                        const gridFeatureText = `rowSelection="multiple"`;
+                        gridFeatures.push(gridFeatureText);
+                        break;
+                    case "Paging":
+                        this.additionalElements.push(`  <igx-paginator [perPage]="5"></igx-paginator>`);
+                        break;
+                    case "Column Pinning":
+                        this.usePinning = true;
+                        break;
+                }
+                featuresUrls.push(this.getFeatureUrl(feature, featureUrl));
+                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: ${selectedFeatures}</p>`;
+                }
+                if (toolbarActions.length) {
+                    const parts = [
+                        "  <igx-grid-toolbar>",
+                        "    <igx-grid-toolbar-title>Singers</igx-grid-toolbar-title>",
+                        "    <igx-grid-toolbar-actions>",
+                        ...toolbarActions,
+                        "    </igx-grid-toolbar-actions>",
+                        "  </igx-grid-toolbar>"
+                    ];
+                    this.additionalElements.splice(1, 0, parts.join("\n"));
+                }
+            }
+        }
+        return selectedFeatures;
+    }
+    getFeatureUrl(feature, featureUrl) {
+        switch (feature) {
+            case "Sorting":
+            case "Filtering":
+            case "Paging":
+                return `${featureUrl}${feature.toLocaleLowerCase()}`;
+            case "Resizing":
+                return `${featureUrl}column-resizing`;
+            case "Column Pinning":
+                return `${featureUrl}column-pinning`;
+            case "Cell Editing":
+                return `${featureUrl}editing`;
+            case "Column Moving":
+                return `${featureUrl}column-moving`;
+            case "Column Hiding":
+                return `${featureUrl}column-hiding`;
+            case "Row Selection":
+                return `${featureUrl}selection`;
+        }
+    }
+}
+module.exports = new IgxHierarchicalGridTemplate();

package/igx-ts-legacy/hierarchical-grid/hierarchical-grid-summaries/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,29 @@
+<p>IgxHierarchicalGrid component with a predefined set of default summaries and a custom summary.</p>
+  <p>You can read more about configuring the igx-hierarchical-grid component in the 
+  <a href="https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/grids/hierarchical-grid/README.md"
+  target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical-grid"
+  target="_blank">official documentation</a>.
+</p>
+
+<igx-hierarchical-grid #hGrid [data]="localData" [autoGenerate]="false" height="600px" width="1000px">
+  <igx-column field="Artist" [editable]="true" dataType="string" [hasSummary]="true"></igx-column>
+  <igx-column field="HasGrammyAward" [editable]="true" dataType="boolean">
+  </igx-column>
+  <igx-column field="Debut" [editable]="true" dataType="number"></igx-column>
+  <igx-column field="GrammyNominations" [editable]="true" dataType="number" [hasSummary]="true" [summaries]="customSummary"></igx-column>
+  <igx-column field="GrammyAwards" [editable]="true" dataType="number" [hasSummary]="true" [summaries]="customSummary"></igx-column>
+
+  <igx-row-island key="Albums" [autoGenerate]="false">
+    <igx-column field="Album" [editable]="true" dataType="string"></igx-column>
+    <igx-column field="LaunchDate" [editable]="true" dataType="date"></igx-column>
+    <igx-column field="BillboardReview" [editable]="true" dataType="number" [hasSummary]="true" [summaries]="customSummary"></igx-column>
+    <igx-column field="USBillboard200" [editable]="true" dataType="number" [hasSummary]="true" [summaries]="customSummary"></igx-column>
+    <igx-row-island key="Songs" [autoGenerate]="false">
+      <igx-column field="TrackNumber"></igx-column>
+      <igx-column field="Title"></igx-column>
+      <igx-column field="Released"></igx-column>
+      <igx-column field="Genre"></igx-column>
+    </igx-row-island>
+  </igx-row-island>
+</igx-hierarchical-grid>

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

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxHierarchicalGridModule } 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: [ NoopAnimationsModule, IgxHierarchicalGridModule ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts-legacy/hierarchical-grid/hierarchical-grid-summaries/files/src/app/__path__/__filePrefix__.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ARTISTS, Artist } from './data';
+import { CustomSummary } from './custom-summary';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component {
+  public localData: Artist[] = ARTISTS;
+  public customSummary = CustomSummary;
+}

package/igx-ts-legacy/hierarchical-grid/hierarchical-grid-summaries/files/src/app/__path__/custom-summary.ts

@@ -0,0 +1,31 @@
+import { IgxNumberSummaryOperand, IgxSummaryResult } from '<%=igxPackage%>';
+
+export class CustomSummary extends IgxNumberSummaryOperand {
+  constructor() {
+    super();
+  }
+
+  public operate(data?: number[]): IgxSummaryResult[] {
+    const result: IgxSummaryResult[] = [];
+    if (!data) {
+      return result;
+    }
+    result.push(
+      {
+        key: 'min',
+        label: 'Min',
+        summaryResult: IgxNumberSummaryOperand.min(data)
+      },
+      {
+        key: 'max',
+        label: 'Max',
+        summaryResult: IgxNumberSummaryOperand.max(data)
+      },
+      {
+        key: 'avg',
+        label: 'Avg',
+        summaryResult: IgxNumberSummaryOperand.average(data)
+      });
+    return result;
+  }
+}