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

package/igx-ts-legacy/projects/side-nav-auth/index.d.ts

@@ -0,0 +1,14 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { SideNavProject } from "../side-nav";
+export declare class AuthSideProject extends SideNavProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    dependencies: string[];
+    framework: string;
+    projectType: string;
+    hasExtraConfiguration: boolean;
+    get templatePaths(): string[];
+}
+declare const _default: AuthSideProject;
+export default _default;

package/igx-ts-legacy/projects/side-nav-auth/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthSideProject = void 0;
+const path = require("path");
+const side_nav_1 = require("../side-nav");
+class AuthSideProject extends side_nav_1.SideNavProject {
+    constructor() {
+        super(...arguments);
+        this.id = "side-nav-auth";
+        this.name = "Side navigation + login";
+        this.description = "Side navigation extended with user authentication module";
+        this.dependencies = [];
+        this.framework = "angular";
+        this.projectType = "igx-ts";
+        this.hasExtraConfiguration = false;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.AuthSideProject = AuthSideProject;
+exports.default = new AuthSideProject();

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

@@ -0,0 +1,65 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>You can read more about configuring the radial gauge component in the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/radial-gauge" target="_blank">
+      official documentation page
+    </a>.
+  </p>
+  <div class="sample-container">
+    <div class="buttons-container">
+      <button igxButton="raised" (click)="AnimateToGauge1()" igxButtonColor="black" igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #1</button>
+      <button igxButton="raised" (click)="AnimateToGauge2()" igxButtonColor="black" igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #2</button>
+      <button igxButton="raised" (click)="AnimateToGauge3()" igxButtonColor="black" igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #3</button>
+      <button igxButton="raised" (click)="AnimateToGauge4()" igxButtonColor="black" igxButtonBackground="#e2e2e2"
+        class="sample-button">Gauge Animation #4</button>
+    </div>
+
+    <div class="sample-control">
+      <!-- Note the radial gauge requires settings only for
+      minimumValue, maximumValue, and value properties.
+      All other properties are optional and listed here
+      for demonstration purpose only -->
+      <igx-radial-gauge
+        #radialGauge
+        height="330px"
+        width="100%"
+        [value]="25"
+        [interval]="5"
+        [minimumValue]="0"
+        [maximumValue]="50"
+        [labelInterval]="5"
+        [labelExtent]="0.71"
+        [minorTickCount]="4"
+        [minorTickEndExtent]=".625"
+        [minorTickStartExtent]=".6"
+        [minorTickStrokeThickness]="1"
+        minorTickBrush = "#79797a"
+        [tickStartExtent]=".6"
+        [tickEndExtent]=".65"
+        [tickStrokeThickness]="2"
+        tickBrush = "#79797a"
+        [needleShape]="needleShape.Triangle"
+        [needleEndWidthRatio]="0.03"
+        [needleStartWidthRatio]="0.05"
+        [needlePivotShape]="pivotShape.CircleOverlay"
+        [needlePivotWidthRatio]="0.15"
+        [needleBaseFeatureWidthRatio]="0.15"
+        needleBrush="#79797a"
+        needleOutline="#79797a"
+        needlePivotBrush="#79797a"
+        needlePivotOutline="#79797a"
+        [isNeedleDraggingEnabled]="true"
+        backingBrush="#fcfcfc"
+        backingOutline="#d6d6d6"
+        [backingStrokeThickness]="5"
+        [scaleStartAngle]="120"
+        [scaleEndAngle]="60"
+        scaleBrush="#d6d6d6"
+        [rangeBrushes]="['#F86232', '#DC3F76', '#7446B9']"
+        [rangeOutlines]="['#F86232', '#DC3F76', '#7446B9']">
+      </igx-radial-gauge>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+.sample-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.buttons-container {
+  display: flex;
+  margin-bottom: 5px;
+}
+
+.sample-button {
+  margin: 3px;
+  flex-grow: 1;
+  height: 30px;
+  font: 12px Titillium Web, sans-serif;
+  min-width: 5.5rem;
+  height: 2.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  border: none;
+  border-radius: 2px;
+  text-transform: uppercase;
+  cursor: pointer;
+}

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

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

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

@@ -0,0 +1,289 @@
+import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';
+// radial gauge imports
+import { SweepDirection } from 'igniteui-angular-core';
+import {
+  IgxRadialGaugeComponent,
+  IgxRadialGaugeRangeComponent,
+  RadialGaugeBackingShape,
+  RadialGaugeNeedleShape,
+  RadialGaugePivotShape,
+  RadialGaugeScaleOversweepShape
+} from 'igniteui-angular-gauges';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class <%=ClassName%>Component implements AfterViewInit {
+
+  public needleShape = RadialGaugeNeedleShape;
+  public pivotShape = RadialGaugePivotShape;
+
+  @ViewChild('radialGauge', { static: true })
+  public radialGauge!: IgxRadialGaugeComponent;
+
+  public ngAfterViewInit(): void {
+
+    // enabling animation duration (in milliseconds)
+    this.radialGauge.transitionDuration = 500;
+    this.AnimateToGauge3();
+  }
+
+  public AnimateToGauge4(): void {
+
+    this.radialGauge.height = '330px';
+    this.radialGauge.width = '100%';
+    this.radialGauge.minimumValue = 0;
+    this.radialGauge.maximumValue = 80;
+    this.radialGauge.value = 10;
+    this.radialGauge.interval = 10;
+
+    // Label Settings
+    this.radialGauge.labelExtent = 0.6;
+    this.radialGauge.labelInterval = 10;
+    this.radialGauge.font = '10px Verdana,Arial';
+
+    // Scale Settings
+    this.radialGauge.scaleStartAngle = 150;
+    this.radialGauge.scaleEndAngle = 30;
+    this.radialGauge.scaleBrush = '#0b8fed';
+    this.radialGauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Auto;
+    this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
+    this.radialGauge.scaleEndExtent = 0.825;
+    this.radialGauge.scaleStartExtent = 0.775;
+
+    this.radialGauge.minorTickStartExtent = 0.7;
+    this.radialGauge.minorTickEndExtent = 0.75;
+    this.radialGauge.tickStartExtent = 0.675;
+    this.radialGauge.tickEndExtent = 0.75;
+
+    // Backing Settings
+    this.radialGauge.backingShape = RadialGaugeBackingShape.Fitted;
+    this.radialGauge.backingBrush = '#fcfcfc';
+    this.radialGauge.backingOutline = '#d6d6d6';
+    this.radialGauge.backingOversweep = 5;
+    this.radialGauge.backingCornerRadius = 10;
+    this.radialGauge.backingOuterExtent = 0.9;
+
+    // Needle Settings
+    this.radialGauge.needleShape = RadialGaugeNeedleShape.NeedleWithBulb;
+    this.radialGauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
+    this.radialGauge.needleEndExtent = 0.5;
+    this.radialGauge.needlePointFeatureExtent = 0.3;
+    this.radialGauge.needlePivotWidthRatio = 0.2;
+    this.radialGauge.needleBrush = '#9f9fa0';
+    this.radialGauge.needleOutline = '#9f9fa0';
+    this.radialGauge.needlePivotBrush = '#9f9fa0';
+    this.radialGauge.needlePivotOutline = '#9f9fa0';
+
+    // TickMark Settings
+    this.radialGauge.tickBrush = 'rgba(51, 51, 51, 1)';
+    this.radialGauge.minorTickBrush = 'rgba(73, 73, 73, 1)';
+    this.radialGauge.minorTickCount = 6;
+
+    this.radialGauge.ranges.clear();
+  }
+
+  public AnimateToGauge3(): void {
+
+    this.radialGauge.height = '330px';
+    this.radialGauge.width = '100%';
+
+    this.radialGauge.minimumValue = 0;
+    this.radialGauge.maximumValue = 50;
+    this.radialGauge.value = 25;
+    this.radialGauge.interval = 5;
+
+    // setting appearance of labels
+    this.radialGauge.labelInterval = 5;
+    this.radialGauge.labelExtent = 0.71;
+    this.radialGauge.font = '10px Verdana,Arial';
+
+    // setting custom needle
+    this.radialGauge.isNeedleDraggingEnabled = true;
+    this.radialGauge.needleEndExtent = 0.5;
+    this.radialGauge.needleShape = RadialGaugeNeedleShape.Triangle;
+    this.radialGauge.needleEndWidthRatio = 0.03;
+    this.radialGauge.needleStartWidthRatio = 0.05;
+    this.radialGauge.needlePivotShape = RadialGaugePivotShape.CircleOverlay;
+    this.radialGauge.needlePivotWidthRatio = 0.15;
+    this.radialGauge.needleBaseFeatureWidthRatio = 0.15;
+    this.radialGauge.needleBrush = '#79797a';
+    this.radialGauge.needleOutline = '#79797a';
+    this.radialGauge.needlePivotBrush = '#79797a';
+    this.radialGauge.needlePivotOutline = '#79797a';
+
+    // setting appearance of major/minor ticks
+    this.radialGauge.minorTickCount = 4;
+    this.radialGauge.minorTickEndExtent = 0.625;
+    this.radialGauge.minorTickStartExtent = 0.6;
+    this.radialGauge.minorTickStrokeThickness = 1;
+    this.radialGauge.minorTickBrush = '#79797a';
+    this.radialGauge.tickStartExtent = 0.6;
+    this.radialGauge.tickEndExtent = 0.65;
+    this.radialGauge.tickStrokeThickness = 2;
+    this.radialGauge.tickBrush = '#79797a';
+
+    // setting extent of gauge scale
+    this.radialGauge.scaleStartAngle = 120;
+    this.radialGauge.scaleEndAngle = 60;
+    this.radialGauge.scaleBrush = '#d6d6d6';
+    this.radialGauge.scaleOversweepShape = RadialGaugeScaleOversweepShape.Fitted;
+    this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
+    this.radialGauge.scaleEndExtent = 0.57;
+    this.radialGauge.scaleStartExtent = 0.5;
+
+    // setting appearance of backing dial
+    this.radialGauge.backingBrush = '#fcfcfc';
+    this.radialGauge.backingOutline = '#d6d6d6';
+    this.radialGauge.backingStrokeThickness = 5;
+    this.radialGauge.backingShape = RadialGaugeBackingShape.Circular;
+
+    // setting custom gauge ranges
+    const range1 = new IgxRadialGaugeRangeComponent();
+    range1.startValue = 5;
+    range1.endValue = 15;
+    const range2 = new IgxRadialGaugeRangeComponent();
+    range2.startValue = 15;
+    range2.endValue = 35;
+    const range3 = new IgxRadialGaugeRangeComponent();
+    range3.startValue = 35;
+    range3.endValue = 45;
+    this.radialGauge.rangeBrushes = ['#F86232', '#DC3F76', '#7446B9'];
+    this.radialGauge.rangeOutlines = ['#F86232', '#DC3F76', '#7446B9'];
+    this.radialGauge.ranges.clear();
+    this.radialGauge.ranges.add(range1);
+    this.radialGauge.ranges.add(range2);
+    this.radialGauge.ranges.add(range3);
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.radialGauge.ranges.count; i++) {
+      const range = this.radialGauge.ranges.item(i);
+      range.innerStartExtent = 0.5;
+      range.innerEndExtent = 0.5;
+      range.outerStartExtent = 0.57;
+      range.outerEndExtent = 0.57;
+    }
+  }
+
+  public AnimateToGauge2(): void {
+
+    this.radialGauge.height = '330px';
+    this.radialGauge.width = '100%';
+
+    this.radialGauge.minimumValue = 100;
+    this.radialGauge.maximumValue = 200;
+    this.radialGauge.value = 125;
+
+    // Scale Settings
+    this.radialGauge.scaleStartAngle = 135;
+    this.radialGauge.scaleEndAngle = 45;
+    this.radialGauge.scaleBrush = 'transparent';
+    this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
+
+    // Backing Settings
+    this.radialGauge.backingOutline = 'white';
+    this.radialGauge.backingBrush = 'white';
+
+    // Needle Settings
+    this.radialGauge.needleEndExtent = 0.8;
+    this.radialGauge.needleShape = RadialGaugeNeedleShape.Triangle;
+    this.radialGauge.needlePivotShape = RadialGaugePivotShape.Circle;
+    this.radialGauge.needlePivotWidthRatio = 0.1;
+    this.radialGauge.needleBrush = '#79797a';
+    this.radialGauge.needleOutline = '#79797a';
+
+    // TickMark Settings
+    this.radialGauge.tickBrush = 'transparent';
+    this.radialGauge.minorTickBrush = 'transparent';
+
+    // Label Settings
+    this.radialGauge.labelInterval = 100;
+    this.radialGauge.labelExtent = 1;
+    this.radialGauge.font = '15px Verdana,Arial';
+
+    // setting custom gauge ranges
+    const range1 = new IgxRadialGaugeRangeComponent();
+    range1.startValue = 100;
+    range1.endValue = 150;
+    const range2 = new IgxRadialGaugeRangeComponent();
+    range2.startValue = 150;
+    range2.endValue = 200;
+
+    this.radialGauge.rangeBrushes = ['#32f845', '#bf32f8'];
+    this.radialGauge.rangeOutlines = ['#32f845', '#bf32f8'];
+    this.radialGauge.ranges.clear();
+    this.radialGauge.ranges.add(range1);
+    this.radialGauge.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.radialGauge.ranges.count; i++) {
+      const range = this.radialGauge.ranges.item(i);
+      range.innerStartExtent = 0.3;
+      range.innerEndExtent = 0.3;
+      range.outerStartExtent = 0.9;
+      range.outerEndExtent = 0.9;
+    }
+  }
+
+  public AnimateToGauge1(): void {
+
+    this.radialGauge.height = '330px';
+    this.radialGauge.width = '100%';
+
+    this.radialGauge.minimumValue = 0;
+    this.radialGauge.maximumValue = 10;
+    this.radialGauge.value = 7.5;
+
+    // Scale Settings
+    this.radialGauge.scaleStartAngle = 200;
+    this.radialGauge.scaleEndAngle = -20;
+    this.radialGauge.scaleBrush = 'transparent';
+    this.radialGauge.scaleSweepDirection = SweepDirection.Clockwise;
+
+    // Backing Settings
+    this.radialGauge.backingOutline = 'white';
+    this.radialGauge.backingBrush = 'white';
+
+    // Needle Settings
+    this.radialGauge.needleEndExtent = 0.8;
+    this.radialGauge.needleShape = RadialGaugeNeedleShape.Triangle;
+    this.radialGauge.needlePivotShape = RadialGaugePivotShape.Circle;
+    this.radialGauge.needlePivotWidthRatio = 0.1;
+    this.radialGauge.needleBrush = '#79797a';
+    this.radialGauge.needleOutline = '#79797a';
+
+    // TickMark Settings
+    this.radialGauge.tickBrush = 'transparent';
+    this.radialGauge.minorTickBrush = 'transparent';
+
+    // Label Settings
+    this.radialGauge.labelInterval = 10;
+    this.radialGauge.labelExtent = 1;
+    this.radialGauge.font = '15px Verdana,Arial';
+
+    // setting custom gauge ranges
+    const range1 = new IgxRadialGaugeRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 5;
+    const range2 = new IgxRadialGaugeRangeComponent();
+    range2.startValue = 5;
+    range2.endValue = 10;
+
+    this.radialGauge.rangeBrushes = ['#a4bd29', '#F86232'];
+    this.radialGauge.rangeOutlines = ['#a4bd29', '#F86232'];
+    this.radialGauge.ranges.clear();
+    this.radialGauge.ranges.add(range1);
+    this.radialGauge.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.radialGauge.ranges.count; i++) {
+      const range = this.radialGauge.ranges.item(i);
+      range.innerStartExtent = 0.3;
+      range.innerEndExtent = 0.3;
+      range.outerStartExtent = 0.9;
+      range.outerEndExtent = 0.9;
+    }
+  }
+}

package/igx-ts-legacy/radial-gauge/default/index.d.ts

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

package/igx-ts-legacy/radial-gauge/default/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxRadialGaugeTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Radial Gauge"];
+        this.controlGroup = "Gauges";
+        this.listInComponentTemplates = true;
+        this.id = "radial-gauge";
+        this.projectType = "igx-ts";
+        this.name = "Radial Gauge";
+        this.description = "IgxRadialGauge with different animations";
+        this.dependencies = [
+            {
+                import: ["IgxRadialGaugeModule"],
+                from: "igniteui-angular-gauges"
+            }
+        ];
+        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-gauges@~17.0.0"];
+    }
+}
+module.exports = new IgxRadialGaugeTemplate();

package/igx-ts-legacy/radial-gauge/index.d.ts

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

package/igx-ts-legacy/radial-gauge/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxRadialGaugeComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Radial Gauge";
+        this.group = "Gauges";
+        this.description = `provides a number of visual elements, like a needle, tick marks, ranges
+							and labels, in order to create a predefined shape and scale.`;
+    }
+}
+module.exports = new IgxRadialGaugeComponent();

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

@@ -0,0 +1,16 @@
+<p>The <b>igx-select</b> allows you to select a single item from a drop-down list.</p>
+<p>You can read more about how to configure <b>igx-select</b> in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md"
+    target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/select" target="_blank">official
+    documentation</a>.
+</p>
+
+<div class="select-wrapper">
+  <igx-select #select>
+    <label igxLabel>Simple Select</label>
+    <igx-select-item *ngFor="let item of items" [value]="item">
+      {{item}}
+    </igx-select-item>
+  </igx-select>
+</div>

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

@@ -0,0 +1,3 @@
+.select-wrapper {
+  max-width: 200px;
+}

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component {
+  public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango', 'Pineapple'];
+}

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxSelectTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Select"];
+        this.controlGroup = "Grids & Lists";
+        this.listInComponentTemplates = true;
+        this.id = "select";
+        this.projectType = "igx-ts";
+        this.name = "Select";
+        this.description = "basic IgxSelect";
+        this.dependencies = [{
+                import: [
+                    "IgxSelectModule",
+                    "IgxButtonModule",
+                    "IgxToggleModule"
+                ],
+                from: "<%=igxPackage%>"
+            }];
+    }
+}
+module.exports = new IgxSelectTemplate();

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxSelectComponent extends cli_core_1.BaseComponent {
+    constructor() {
+        super(__dirname);
+        this.name = "Select";
+        this.group = "Data Entry & Display";
+        this.description = "provides an input with dropdown list allowing selection of a single item";
+    }
+}
+module.exports = new IgxSelectComponent();

package/igx-ts-legacy/select/select-groups/files/src/app/__path__/__filePrefix__.comonent.spec.ts

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

package/igx-ts-legacy/select/select-groups/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,22 @@
+<p>The <b>igx-select</b> allows you to select a single item from a drop-down list.<br />
+  The following sample demonstrates the component defined with groups.</p>
+<p>You can read more about how to configure <b>igx-select</b> in the
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/select/README.md"
+    target="_blank">README</a> or the
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/select" target="_blank">official
+    documentation</a>.
+</p>
+
+<div class="select-wrapper">
+  <igx-select #select>
+    <label igxLabel>Select With Groups</label>
+    <igx-select-item-group *ngFor="let item of items" [label]="item.type">
+      <igx-select-item *ngFor="let fruit of item.fruits" [value]="fruit">
+        {{fruit}}
+      </igx-select-item>
+      <igx-select-item *ngFor="let vegetable of item.vegetables" [value]="vegetable">
+        {{vegetable}}
+      </igx-select-item>
+    </igx-select-item-group>
+  </igx-select>
+</div>

package/igx-ts-legacy/select/select-groups/files/src/app/__path__/__filePrefix__.component.scss

@@ -0,0 +1,4 @@
+.select-wrapper {
+  padding-left: 50px;
+  max-width: 240px;
+}