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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxCarouselTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Carousel"];
+        this.controlGroup = "Layouts";
+        this.listInComponentTemplates = true;
+        this.id = "carousel";
+        this.projectType = "igx-ts";
+        this.name = "Carousel";
+        this.description = "basic IgxCarousel";
+        this.dependencies = [
+            { import: "IgxCarouselModule", from: "<%=igxPackage%>" },
+            { import: "CommonModule", from: "@angular/common" }
+        ];
+    }
+}
+module.exports = new IgxCarouselTemplate();

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxCarouselComponent extends cli_core_1.BaseComponent {
+    /**
+        *
+        */
+    constructor() {
+        super(__dirname);
+        this.name = "Carousel";
+        this.group = "Layouts";
+        this.description = `browse or navigate through a collection of slides, image galleries,
+							cards, or page-based interfaces`;
+    }
+}
+module.exports = new IgxCarouselComponent();

package/igx-ts-legacy/category-chart/default/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,21 @@
+<p><%=description%></p>
+<div>
+  <span>Chart Type:</span>
+  <select [(ngModel)]="chartType">
+    <option>Auto</option>
+    <option>Area</option>
+    <option>Line</option>
+    <option>Column</option>
+    <option>Point</option>
+    <option>Spline</option>
+    <option>SplineArea</option>
+    <option>StepArea</option>
+    <option>StepLine</option>
+    <option>Waterfall</option>
+  </select>
+</div>
+<igx-category-chart height="550px" width="100%"
+    chartTitle="Population per Country (millions)"
+    [chartType]="chartType"
+    [dataSource]="data">
+</igx-category-chart>

package/igx-ts-legacy/category-chart/default/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,3 @@
+:host {
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { CategoryChartType } from 'igniteui-angular-charts';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component {
+  public chartType = CategoryChartType.Auto;
+
+  data = [
+    { CountryName: 'China', Pop1995: 1216, Pop2005: 1297, },
+    { CountryName: 'India', Pop1995: 920, Pop2005: 1090, },
+    { CountryName: 'United States', Pop1995: 266, Pop2005: 295, },
+    { CountryName: 'Indonesia', Pop1995: 197, Pop2005: 229, },
+    { CountryName: 'Brazil', Pop1995: 161, Pop2005: 186, }
+  ];
+}

package/igx-ts-legacy/category-chart/default/index.d.ts

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

package/igx-ts-legacy/category-chart/default/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxCategoryChartTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Category Chart"];
+        this.controlGroup = "Charts";
+        this.listInComponentTemplates = true;
+        this.id = "category-chart";
+        this.projectType = "igx-ts";
+        this.name = "Category Chart";
+        this.description = "basic category chart with chart type selector.";
+        this.dependencies = [
+            { import: "IgxCategoryChartModule", from: "igniteui-angular-charts" },
+            { import: "FormsModule", from: "@angular/forms" }
+        ];
+        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-charts@~17.0.0"];
+    }
+}
+module.exports = new IgxCategoryChartTemplate();

package/igx-ts-legacy/category-chart/index.d.ts

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

package/igx-ts-legacy/category-chart/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxCategoryChartComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Category Chart";
+        this.group = "Charts";
+        this.description = `makes visualizing category data easy. Simplifies the complexities
+							of the data visualization domain into manageable API`;
+    }
+}
+module.exports = new IgxCategoryChartComponent();

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

@@ -0,0 +1,26 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>igx-chip components inside igx-chips-area</p>
+  <p>You can read more about configuring the igx-chip component in the
+    <a href="https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/chips/README.md"
+    target="_blank">README</a> or the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/chip" target="_blank">official
+      documentation</a>.</p>
+  <span class="header">Selected Events</span>
+  <div class="chipsArea">
+    <igx-chips-area #chipsArea class="chiparea">
+      <igx-chip class="chipStyle" *ngFor="let chip of chipList" [id]="chip.id" [removable]="true" (remove)="chipRemoved($event)">
+          <span #label [class]="'igx-chip__text'">{{chip.name}}</span>
+      </igx-chip>
+    </igx-chips-area>
+  </div>
+  <div class="chips">
+    <button #openButton igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown">Talks</button>
+    <igx-drop-down #dropdown (selectionChanging)="itemSelection($event)">
+      <igx-drop-down-item *ngFor="let item of dropDownList" [value]="item.name">
+          <div class="ig-drop-down__item-template">
+            <span>{{item.name}}</span>
+          </div>
+      </igx-drop-down-item>
+    </igx-drop-down>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+.chips {
+  display: flex;
+  flex-flow: column;
+  padding-top: 20px;
+  padding-right: 400px;
+}
+
+.chipsArea {
+  width: 500px;
+  height: auto;
+  min-height: 100px;
+  border: 2px solid lightgray;
+}
+
+.chipStyle {
+  margin: auto;
+  padding: 8px;
+}
+
+.header {
+  text-align: center;
+}

package/igx-ts-legacy/chip/default/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 { IgxChipsModule } 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, IgxChipsModule]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,109 @@
+import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import {
+  CloseScrollStrategy,
+  ConnectedPositioningStrategy,
+  HorizontalAlignment,
+  IBaseChipEventArgs,
+  IgxChipsAreaComponent,
+  IgxDropDownComponent,
+  ISelectionEventArgs,
+  OverlaySettings,
+  VerticalAlignment
+} from '<%=igxPackage%>';
+
+interface NamedEntry {
+  id: string;
+  name: string;
+}
+
+@Component({
+ selector: 'app-<%=filePrefix%>',
+ styleUrls: ['./<%=filePrefix%>.component.scss'],
+ templateUrl: './<%=filePrefix%>.component.html'
+})
+
+export class <%=ClassName%>Component {
+
+  public dropDownList: NamedEntry[] = [
+    {
+     id: '1',
+     name: 'Bug fixing for smart devices'
+    },
+    {
+     id: '2',
+     name: 'The True Purpose of Design Systems'
+    },
+    {
+     id: '3',
+     name: 'The IoT is dead, long live the internet'
+    },
+    {
+     id: '4',
+     name: 'Micro frontends in practice'
+    },
+    {
+     id: '5',
+     name: 'Lessons about API testing'
+    },
+    {
+     id: '6',
+     name: 'Scaling big with Apache Kafka'
+    },
+    {
+     id: '7',
+     name: 'Last minute performance testing'
+    },
+    {
+     id: '8',
+     name: 'Sales Skillz for IT People'
+    }
+  ];
+
+  public chipList: NamedEntry[] = [];
+
+  @ViewChild('chipsArea', { static: true, read: IgxChipsAreaComponent })
+  public chipsArea!: IgxChipsAreaComponent;
+
+  @ViewChild(IgxDropDownComponent, { static: true })
+  public igxDropDown!: IgxDropDownComponent;
+
+  private positionSettings = {
+    horizontalStartPoint: HorizontalAlignment.Left,
+    verticalStartPoint: VerticalAlignment.Bottom
+  };
+
+  private overlaySettings: OverlaySettings = {
+    closeOnOutsideClick: true,
+    modal: false,
+    positionStrategy: new ConnectedPositioningStrategy(this.positionSettings),
+    scrollStrategy: new CloseScrollStrategy()
+  };
+
+  constructor(public cdr: ChangeDetectorRef) { }
+
+  public chipRemoved(event: IBaseChipEventArgs) {
+    this.chipList = this.chipList.filter((item) => {
+      return item.id !== event.owner.id;
+    });
+    this.cdr.detectChanges();
+  }
+
+  public toggleDropDown(ev: MouseEvent) {
+    this.overlaySettings.target = ev.target as HTMLButtonElement;
+    this.igxDropDown.toggle(this.overlaySettings);
+  }
+
+  public itemSelection(ev: ISelectionEventArgs) {
+    const item = this.dropDownList.find((val) => val.name === ev.newSelection.value);
+    if (!item) {
+      return;
+    }
+    const match = this.chipList.find((val) => val.name === item.name);
+    if (!match) {
+      this.chipList.push({
+        id: item.id,
+        name: item.name
+      });
+    }
+  }
+}

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxChipTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Chip"];
+        this.controlGroup = "Data Entry & Display";
+        this.listInComponentTemplates = true;
+        this.id = "chip";
+        this.projectType = "igx-ts";
+        this.name = "Chip";
+        this.description = "basic IgxChip";
+        this.dependencies = [{
+                import: ["IgxButtonModule", "IgxChipsModule", "IgxDropDownModule"],
+                from: "<%=igxPackage%>"
+            }];
+    }
+}
+module.exports = new IgxChipTemplate();

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxChipComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Chip";
+        this.group = "Data Entry & Display";
+        this.description = `a compact visual component that displays information in an obround.`;
+    }
+}
+module.exports = new IgxChipComponent();

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

@@ -0,0 +1,31 @@
+<p>igx-combo component with templating.</p>
+<p>You can read more about configuring the igx-combo component in the
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md" target="_blank">README</a> or the
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/combo" target="_blank">official documentation</a>.</p>
+
+<igx-combo #combo3 class="input-container" width="300px"
+  [data]="localData"
+  [valueKey]="'name'"
+  [groupKey]="'region'"
+  placeholder="Location(s)"
+  [itemsMaxHeight]="250"
+  searchPlaceholder="Search..."
+  [allowCustomValues]="true"
+>
+
+  <ng-template igxComboItem let-display let-key="valueKey">
+    <div class="item">
+      <span class="state">{{ display.name }} - </span>
+      <span class="region">{{ display.region }}</span>
+    </div>
+  </ng-template>
+
+  <ng-template igxComboHeader>
+    <div class="header-class">State - Region</div>
+  </ng-template>
+
+  <ng-template igxComboFooter>
+    <div class="footer-class">Infragistics 2018</div>
+  </ng-template>
+
+</igx-combo>

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

@@ -0,0 +1,18 @@
+.combo-container {
+  margin: 10px;
+}
+
+.header-class,
+.footer-class,
+.empty-class {
+  text-align: center;
+  font-style: italic;
+  font-weight: bold;
+}
+
+:host {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

package/igx-ts-legacy/combo/default/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 { IgxComboModule } 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]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

@@ -0,0 +1,38 @@
+interface Division {
+  name: string;
+  states: string[];
+}
+
+export interface State {
+  name: string;
+  region: string;
+}
+
+const divisions: Division[] = [
+  { name: 'New England 01', states: ['Connecticut', 'Maine', 'Massachusetts'] },
+  { name: 'New England 02', states: ['New Hampshire', 'Rhode Island', 'Vermont'] },
+  { name: 'Mid-Atlantic', states: ['New Jersey', 'New York', 'Pennsylvania'] },
+  { name: 'East North Central 02', states: ['Michigan', 'Ohio', 'Wisconsin'] },
+  { name: 'East North Central 01', states: ['Illinois', 'Indiana'] },
+  { name: 'West North Central 01', states: ['Missouri', 'Nebraska', 'North Dakota', 'South Dakota'] },
+  { name: 'West North Central 02', states: ['Iowa', 'Kansas', 'Minnesota'] },
+  { name: 'South Atlantic 01', states: ['Delaware', 'Florida', 'Georgia', 'Maryland'] },
+  { name: 'South Atlantic 02', states: ['North Carolina', 'South Carolina', 'Virginia', 'District of Columbia', 'West Virginia'] },
+  { name: 'South Atlantic 03', states: ['District of Columbia', 'West Virginia'] },
+  { name: 'East South Central 01', states: ['Alabama', 'Kentucky'] },
+  { name: 'East South Central 02', states: ['Mississippi', 'Tennessee'] },
+  { name: 'West South Central', states: ['Arkansas', 'Louisiana', 'Oklahoma', 'Texas'] },
+  { name: 'Mountain', states: ['Arizona', 'Colorado', 'Idaho', 'Montana', 'Nevada', 'New Mexico', 'Utah', 'Wyoming'] },
+  { name: 'Pacific 01', states: ['Alaska', 'California'] },
+  { name: 'Pacific 02', states: ['Hawaii', 'Oregon', 'Washington'] }
+];
+
+const localData: State[] = [];
+divisions
+  .map(d => d.states
+    .map(s => localData.push({
+      name: s,
+      region: d.name.replace(/[\d]+/, '').trim()
+    })));
+
+export { localData };

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxComboTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Combo"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "combo";
+        this.projectType = "igx-ts";
+        this.name = "Combo";
+        this.description = "basic IgxCombo with templating";
+        this.dependencies = [{
+                import: ["IgxComboModule"],
+                from: "<%=igxPackage%>"
+            }];
+    }
+}
+module.exports = new IgxComboTemplate();

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

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

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

@@ -0,0 +1,16 @@
+"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 = "Combo";
+        this.group = "Grids & Lists";
+        this.description = `provides easy filtering and selection of multiple items, grouping and
+							adding custom values to the dropdown list.`;
+    }
+}
+module.exports = new IgxComboComponent();