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

package/igx-ts-legacy/autocomplete/autocomplete-extended/index.d.ts

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

package/igx-ts-legacy/autocomplete/autocomplete-extended/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxAutocompleteTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Autocomplete"];
+        this.controlGroup = "Data Entry & Display";
+        this.listInComponentTemplates = true;
+        this.id = "enhanced-autocomplete";
+        this.projectType = "igx-ts";
+        this.name = "Enhanced Autocomplete";
+        this.description = "IgxAutocomplete with enhanced groups";
+        this.dependencies = [{
+                import: ["IgxAutocompleteModule", "IgxDropDownModule", "IgxInputGroupModule", "IgxToastModule"],
+                from: "<%=igxPackage%>"
+            }, {
+                import: ["FormsModule"],
+                from: "@angular/forms"
+            }, {
+                declare: ["<%=ClassName%>PipeStartsWith"],
+                from: "./src/app/<%=path%>/<%=filePrefix%>.component.ts"
+            }, {
+                declare: ["<%=ClassName%>RegionContains"],
+                from: "./src/app/<%=path%>/<%=filePrefix%>.component.ts"
+            }];
+    }
+}
+module.exports = new IgxAutocompleteTemplate();

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxAutocompleteComponent extends cli_core_1.BaseComponent {
+    constructor() {
+        super(__dirname);
+        this.name = "Autocomplete";
+        this.group = "Data Entry & Display";
+        this.description = "enhances text input by showing an IgxDropdown with suggested options";
+    }
+}
+module.exports = new IgxAutocompleteComponent();

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

@@ -0,0 +1,50 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>
+    You can read more about configuring the bullet graph component in the
+    <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/bulletgraph.html" 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>
+    </div>
+
+    <div class="sample-control">
+      <!-- Note the bullet graph requires settings only for
+      minimumValue, maximumValue, value, and targetValue properties.
+      All other properties are optional and listed here
+      for demonstration purpose only -->
+      <igx-bullet-graph
+        #bulletGraph
+        height="80px"
+        width="100%"
+        [minimumValue]="0"
+        [maximumValue]="120"
+        valueBrush="#4286f4"
+        [value]="70"
+        targetValueBrush="#4286f4"
+        [targetValue]="90"
+        [targetValueBreadth]="10"
+        [interval]="10"
+        [labelInterval]="10"
+        [labelExtent]="0.02"
+        [rangeBrushes] ="['#FF9800', '#F96232', '#C62828']"
+        [rangeOutlines]="['#FF9800', '#F96232', '#C62828']"
+        [scaleBackgroundThickness]=0
+        scaleBackgroundBrush="#dbdbdb"
+        scaleBackgroundOutline="gray">
+      </igx-bullet-graph>
+    </div>
+  </div>
+</div>

package/igx-ts-legacy/bullet-graph/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:.875rem;
+  font-weight:600;
+  line-height:1;
+  text-align:center;
+  border:none;
+  border-radius:2px;
+  text-transform:uppercase;
+  cursor:pointer;
+}

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

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

@@ -0,0 +1,228 @@
+
+import { AfterViewInit, Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { IgxBulletGraphComponent, IgxLinearGraphRangeComponent } 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 {
+  @ViewChild('bulletGraph', { static: true })
+  public bulletGraph!: IgxBulletGraphComponent;
+
+  public ngAfterViewInit(): void {
+    // enabling animation duration (in milliseconds)
+    this.bulletGraph.transitionDuration = 500;
+    this.AnimateToGauge3();
+  }
+
+  public AnimateToGauge3(): void {
+    this.bulletGraph.minimumValue = 0;
+    this.bulletGraph.maximumValue = 120;
+    this.bulletGraph.value = 70;
+    this.bulletGraph.interval = 10;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 10;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = '#000000';
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = '#000000';
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 90;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 40;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 40;
+    range2.endValue = 80;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 80;
+    range3.endValue = 120;
+
+    this.bulletGraph.rangeBrushes  = [ '#FF9800', '#F96232', '#C62828'];
+    this.bulletGraph.rangeOutlines = [ '#FF9800', '#F96232', '#C62828'];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+    this.bulletGraph.ranges.add(range3);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
+    this.bulletGraph.scaleBackgroundOutline = 'gray';
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = '#f7f7f7';
+    this.bulletGraph.backingOutline = '#d1d1d1';
+    this.bulletGraph.backingStrokeThickness = 0;
+
+  }
+
+  public AnimateToGauge2(): void {
+    this.bulletGraph.minimumValue = 100;
+    this.bulletGraph.maximumValue = 200;
+    this.bulletGraph.value = 120;
+    this.bulletGraph.interval = 10;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 10;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = '#000000';
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = '#000000';
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 180;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 100;
+    range1.endValue = 125;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 125;
+    range2.endValue = 150;
+    const range3 = new IgxLinearGraphRangeComponent();
+    range3.startValue = 150;
+    range3.endValue = 175;
+    const range4 = new IgxLinearGraphRangeComponent();
+    range4.startValue = 175;
+    range4.endValue = 200;
+
+    this.bulletGraph.rangeBrushes  = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.bulletGraph.rangeOutlines = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+    this.bulletGraph.ranges.add(range3);
+    this.bulletGraph.ranges.add(range4);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
+    this.bulletGraph.scaleBackgroundOutline = 'gray';
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = '#f7f7f7';
+    this.bulletGraph.backingOutline = '#d1d1d1';
+    this.bulletGraph.backingStrokeThickness = 0;
+  }
+
+  public AnimateToGauge1(): void {
+    this.bulletGraph.minimumValue = 0;
+    this.bulletGraph.maximumValue = 80;
+    this.bulletGraph.value = 70;
+    this.bulletGraph.interval = 20;
+
+    // setting appearance of labels
+    this.bulletGraph.labelInterval = 20;
+    this.bulletGraph.labelExtent = 0.02;
+
+    // setting custom appearance of performance bar
+    this.bulletGraph.valueInnerExtent = 0.5;
+    this.bulletGraph.valueOuterExtent = 0.7;
+    this.bulletGraph.valueBrush = '#000000';
+
+    // setting custom appearance of target bar
+    this.bulletGraph.targetValueBrush = '#000000';
+    this.bulletGraph.targetValueBreadth = 10;
+    this.bulletGraph.targetValue = 60;
+
+    // setting appearance of major/minor ticks
+    this.bulletGraph.minorTickCount = 5;
+    this.bulletGraph.minorTickEndExtent = 0.10;
+    this.bulletGraph.minorTickStartExtent = 0.20;
+    this.bulletGraph.tickStartExtent = 0.20;
+    this.bulletGraph.tickEndExtent = 0.05;
+    this.bulletGraph.tickStrokeThickness = 2;
+
+    // setting custom gauge ranges
+    const range1 = new IgxLinearGraphRangeComponent();
+    range1.startValue = 0;
+    range1.endValue = 40;
+    const range2 = new IgxLinearGraphRangeComponent();
+    range2.startValue = 40;
+    range2.endValue = 80;
+
+    this.bulletGraph.rangeBrushes  = [ '#a4bd29', '#F86232' ];
+    this.bulletGraph.rangeOutlines = [ '#a4bd29', '#F86232' ];
+    this.bulletGraph.ranges.clear();
+    this.bulletGraph.ranges.add(range1);
+    this.bulletGraph.ranges.add(range2);
+
+    // setting extent of all gauge ranges
+    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
+      const range = this.bulletGraph.ranges.item(i);
+      range.innerStartExtent = 0.2;
+      range.innerEndExtent = 0.2;
+      range.outerStartExtent = 0.95;
+      range.outerEndExtent = 0.95;
+    }
+
+    // setting extent of gauge scale
+    this.bulletGraph.scaleBackgroundThickness = 0.5;
+    this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
+    this.bulletGraph.scaleBackgroundOutline = 'gray';
+    this.bulletGraph.scaleStartExtent = 0.05;
+    this.bulletGraph.scaleEndExtent = 0.95;
+    this.bulletGraph.scaleBackgroundThickness = 0;
+
+    // setting appearance of backing fill and outline
+    this.bulletGraph.backingBrush = '#f7f7f7';
+    this.bulletGraph.backingOutline = '#d1d1d1';
+    this.bulletGraph.backingStrokeThickness = 0;
+  }
+}

package/igx-ts-legacy/bullet-graph/default/index.d.ts

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

package/igx-ts-legacy/bullet-graph/default/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxBulletGraphTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Bullet Graph"];
+        this.controlGroup = "Gauges";
+        this.listInComponentTemplates = true;
+        this.id = "bullet-graph";
+        this.projectType = "igx-ts";
+        this.name = "Bullet Graph";
+        this.description = "IgxBulletGraph with different animations.";
+        this.dependencies = [{
+                import: ["IgxBulletGraphModule"],
+                from: "igniteui-angular-gauges"
+            }];
+        this.packages = ["igniteui-angular-core@~17.0.0", "igniteui-angular-gauges@~17.0.0"];
+    }
+}
+module.exports = new IgxBulletGraphTemplate();

package/igx-ts-legacy/bullet-graph/index.d.ts

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

package/igx-ts-legacy/bullet-graph/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxBulletGraphAnimationComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Bullet Graph";
+        this.group = "Gauges";
+        this.description = "allows for a linear and concise view of measures compared against a scale.";
+    }
+}
+module.exports = new IgxBulletGraphAnimationComponent();

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

@@ -0,0 +1,7 @@
+<div igxLayout igxLayoutDir="columns" igxLayoutItemAlign="center">
+  <p>igx-calendar component with <%=selectionMode%></p>
+  <p>You can read more about configuring the igx-calendar component in the 
+  <a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/calendar/README.md" target="_blank">README</a> or the 
+  <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/calendar" target="_blank">official documentation</a>.</p>
+  <igx-calendar <%=selectionType%>></igx-calendar>
+</div>

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

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

@@ -0,0 +1,9 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class <%=ClassName%>Component { }

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

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

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxCalendarTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.userExtraConfiguration = {};
+        this.components = ["Calendar"];
+        this.controlGroup = "Scheduling";
+        this.listInComponentTemplates = true;
+        this.id = "calendar";
+        this.projectType = "igx-ts";
+        this.name = "Calendar";
+        this.description = "IgxCalendar with single selection";
+        this.dependencies = [
+            { import: "IgxCalendarModule", from: "<%=igxPackage%>" }
+        ];
+        this.hasExtraConfiguration = true;
+    }
+    setExtraConfiguration(extraConfigKeys) {
+        this.userExtraConfiguration = extraConfigKeys;
+    }
+    getExtraConfiguration() {
+        return [{
+                choices: ["Single selection", "Multi selection", "Range selection"],
+                default: "Single selection",
+                key: "selectionType",
+                message: "Choose selection type for the igx-calendar",
+                type: 0 /* Choice */
+            }];
+    }
+    generateConfig(name, ...options) {
+        let selectionType = "";
+        let selectionMode = "";
+        if (this.userExtraConfiguration["selectionType"]) {
+            const type = this.userExtraConfiguration["selectionType"];
+            selectionMode = type;
+            switch (type) {
+                case "Single selection":
+                    selectionType = "";
+                    break;
+                case "Multi selection":
+                    selectionType = 'selection="multi"';
+                    break;
+                case "Range selection":
+                    selectionType = 'selection="range"';
+                    break;
+            }
+        }
+        const extraConfig = {
+            selectionMode,
+            selectionType
+        };
+        return super.generateConfig(name, { extraConfig });
+    }
+}
+module.exports = new IgxCalendarTemplate();

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxCalendarComponent extends cli_core_1.BaseComponent {
+    constructor() {
+        super(__dirname);
+        this.name = "Calendar";
+        this.group = "Scheduling";
+    }
+}
+module.exports = new IgxCalendarComponent();

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

@@ -0,0 +1,11 @@
+<p>igx-carousel component.</p>
+<p>You can read more about configuring the igx-carousel component in the 
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/README.md" target="_blank">README</a> or the 
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel" target="_blank">official documentation page</a>.</p>
+<div class="carousel-container">
+  <igx-carousel [interval]="interval" [pause]="pause" [loop]="loop">
+    <igx-slide *ngFor="let slide of slides;" [active]="!!slide.active">
+      <img [src]="slide.image">
+    </igx-slide>
+  </igx-carousel>
+</div>

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

@@ -0,0 +1,21 @@
+:host {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.carousel-container {
+  width: 80%;
+  min-height: 50%;
+
+  img {
+    width: auto;
+    margin: 0 auto;
+    display: flex;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .carousel-container {
+    width: 100%;
+  }
+}

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

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

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.component.html',
+  styleUrls: ['./<%=filePrefix%>.component.scss']
+})
+export class <%=ClassName%>Component implements OnInit {
+
+  public slides: Slide[] = [];
+  public interval = 3000;
+  public pause = true;
+  public loop = true;
+  constructor() { }
+
+  public ngOnInit() {
+    this.addNewSlide();
+  }
+
+  public addNewSlide() {
+    this.slides.push(
+      { image: 'assets/slide1@x2.jpg' },
+      { image: 'assets/slide2@x2.jpg' },
+      { image: 'assets/slide3@x2.jpg' },
+      { image: 'assets/slide4@x2.jpg' }
+    );
+  }
+}
+
+interface Slide {
+  image: string;
+  active?: boolean;
+}

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

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