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

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

@@ -1,10 +1,28 @@
 import { Component } from '@angular/core';
-import { IButtonGroupEventArgs, IgxStepperOrientation } from '<%=igxPackage%>';
+import {
+  IButtonGroupEventArgs,
+  IgxStepperOrientation,
+  IgxButtonGroupComponent,
+  IgxStepperComponent,
+  IgxStepComponent,
+  IgxStepTitleDirective,
+  IgxStepContentDirective,
+  IgxButtonDirective,
+} from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxButtonGroupComponent,
+    IgxStepperComponent,
+    IgxStepComponent,
+    IgxStepTitleDirective,
+    IgxStepContentDirective,
+    IgxButtonDirective
+  ]
 })
 export class <%=ClassName%>Component {
     public orientation: IgxStepperOrientation = 'horizontal';

package/igx-ts/stepper/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxStepperTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxStepperTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngular
         this.projectType = "igx-ts";
         this.name = "Stepper";
         this.description = "Basic IgxStepper sample";
-        this.dependencies = [{
-                import: ["IgxStepperModule", "IgxButtonModule", "IgxButtonGroupModule"],
-                from: "<%=igxPackage%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxStepperTemplate();

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

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [NoopAnimationsModule, IgxBottomNavModule, IgxIconModule, IgxRippleModule]
+	  imports: [NoopAnimationsModule, IgxBottomNavModule, IgxIconModule, IgxRippleModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

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

@@ -1,10 +1,25 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import {
+	IgxBottomNavComponent,
+	IgxBottomNavItemComponent,
+	IgxBottomNavHeaderComponent,
+	IgxIconComponent,
+	IgxBottomNavContentComponent,
+  } from 'igniteui-angular';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [
+    IgxBottomNavComponent,
+    IgxBottomNavItemComponent,
+    IgxBottomNavHeaderComponent,
+    IgxIconComponent,
+    IgxBottomNavContentComponent,
+  ],
 })
 export class <%=ClassName%>Component {
 }

package/igx-ts/tabbar/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxBottomNavTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,13 +12,7 @@ class IgxBottomNavTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngul
         this.projectType = "igx-ts";
         this.name = "Bottom Navigation";
         this.description = "three item bottom navigation template";
-        this.dependencies = [{
-                import: ["IgxBottomNavModule", "IgxAvatarModule", "IgxIconModule", "IgxRippleModule"],
-                from: "<%=igxPackage%>"
-            }, {
-                import: "CommonModule",
-                from: "@angular/common"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxBottomNavTemplate();

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

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [NoopAnimationsModule, IgxIconModule, IgxTabsModule, IgxRippleModule]
+	  imports: [NoopAnimationsModule, IgxIconModule, IgxTabsModule, IgxRippleModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

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

@@ -1,9 +1,28 @@
 import { Component } from '@angular/core';
+import {
+  IgxTabsComponent,
+  IgxTabItemComponent,
+  IgxTabHeaderComponent,
+  IgxIconComponent,
+  IgxTabHeaderIconDirective,
+  IgxTabHeaderLabelDirective,
+  IgxTabContentComponent,
+} from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true,
+  imports: [
+    IgxTabsComponent,
+    IgxTabItemComponent,
+    IgxTabHeaderComponent,
+    IgxIconComponent,
+    IgxTabHeaderIconDirective,
+    IgxTabHeaderLabelDirective,
+    IgxTabContentComponent
+  ]
 })
 export class <%=ClassName%>Component {
 }

package/igx-ts/tabs/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxTabsTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxTabsTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTem
         this.projectType = "igx-ts";
         this.name = "Tabs";
         this.description = "Basic IgxTabs sample";
-        this.dependencies = [{
-                import: ["IgxTabsModule", "IgxCardModule", "IgxAvatarModule", "IgxButtonModule", "IgxRippleModule"],
-                from: "<%=igxPackage%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxTabsTemplate();

package/igx-ts/time-picker/default/files/src/app/__path__/__filePrefix__.component.spec.ts

@@ -12,8 +12,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [IgxTimePickerModule, NoopAnimationsModule]
+	  imports: [IgxTimePickerModule, NoopAnimationsModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

package/igx-ts/time-picker/default/files/src/app/__path__/__filePrefix__.component.ts

@@ -1,10 +1,13 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { IgxLayoutDirective, IgxTimePickerComponent } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [IgxLayoutDirective, IgxTimePickerComponent]
 })
 export class <%=ClassName%>Component {
   public date: Date = new Date(Date.now());

package/igx-ts/time-picker/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxTimePickerTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,9 +12,7 @@ class IgxTimePickerTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngu
         this.projectType = "igx-ts";
         this.name = "Time Picker";
         this.description = "IgxTimePicker with initial value";
-        this.dependencies = [
-            { import: "IgxTimePickerModule", from: "<%=igxPackage%>" }
-        ];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxTimePickerTemplate();

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

@@ -10,8 +10,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [NoopAnimationsModule, FormsModule, IgxTooltipModule, IgxAvatarModule, IgxSwitchModule]
+	  imports: [NoopAnimationsModule, FormsModule, IgxTooltipModule, IgxAvatarModule, IgxSwitchModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

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

@@ -1,9 +1,25 @@
 import { Component } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {
+  IgxAvatarComponent,
+  IgxTooltipTargetDirective,
+  IgxTooltipDirective,
+  IgxSwitchComponent,
+} from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
-  templateUrl: './<%=filePrefix%>.component.html'
+  templateUrl: './<%=filePrefix%>.component.html',
+  standalone: true,
+  imports: [
+    IgxAvatarComponent,
+    IgxTooltipTargetDirective,
+    IgxTooltipDirective,
+    IgxSwitchComponent,
+    ReactiveFormsModule,
+    FormsModule
+  ]
 })
 
 export class <%=ClassName%>Component {

package/igx-ts/tooltip/default/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxTooltipTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,13 +12,7 @@ class IgxTooltipTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngular
         this.projectType = "igx-ts";
         this.name = "Tooltip";
         this.description = "A fully customizable tooltip";
-        this.dependencies = [
-            {
-                import: ["IgxAvatarModule", "IgxTooltipModule", "IgxSwitchModule"],
-                from: "<%=igxPackage%>"
-            },
-            { import: "FormsModule", from: "@angular/forms" }
-        ];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxTooltipTemplate();

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

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [IgxComboModule, NoopAnimationsModule, IgxTooltipModule]
+	  imports: [IgxComboModule, NoopAnimationsModule, IgxTooltipModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

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

@@ -1,5 +1,12 @@
 import { Component, OnDestroy } from '@angular/core';
-import { IgxTreeNodeComponent } from '<%=igxPackage%>';
+import { NgFor, NgTemplateOutlet, NgIf } from '@angular/common';
+import {
+  IgxTreeNodeComponent,
+  IgxTreeComponent,
+  IgxIconComponent,
+  IgxTooltipTargetDirective,
+  IgxTooltipDirective,
+} from '<%=igxPackage%>';
 import { Subject } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { DATA, NodeData, REMOTE_ROOT, SelectableNodeData } from './local-data';
@@ -9,7 +16,18 @@ import { DataService } from './services/data.service';
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
   styleUrls: ['./<%=filePrefix%>.component.scss'],
-  providers: [DataService]
+  providers: [DataService],
+  standalone: true,
+  imports: [
+    IgxTreeComponent,
+    NgFor,
+    IgxTreeNodeComponent,
+    NgTemplateOutlet,
+    IgxIconComponent,
+    NgIf,
+    IgxTooltipTargetDirective,
+    IgxTooltipDirective
+  ]
 })
 
 export class <%=ClassName%>Component implements OnDestroy {

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../../../constants");
 const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
 class IgxComboTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
     constructor() {
@@ -11,10 +12,7 @@ class IgxComboTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTe
         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%>"
-            }];
+        this.packages = [constants_1.IGNITEUI_ANGULAR_PACKAGE];
     }
 }
 module.exports = new IgxComboTemplate();

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

@@ -9,8 +9,7 @@ describe('<%=ClassName%>Component', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [<%=ClassName%>Component],
-      imports: [BrowserAnimationsModule, IgxTreeGridModule, IgxDatePickerModule, IgxCheckboxModule]
+      imports: [BrowserAnimationsModule, IgxTreeGridModule, IgxDatePickerModule, IgxCheckboxModule, <%=ClassName%>Component]
     })
       .compileComponents();
   }));

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

@@ -4,7 +4,8 @@ import { Employee, EMPLOYEE_DATA } from './localData';
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.component.html',
-  styleUrls: ['./<%=filePrefix%>.component.scss']
+  styleUrls: ['./<%=filePrefix%>.component.scss'],
+  standalone: true
 })
 export class <%=ClassName%>Component implements OnInit {
   public localData: Employee[] = [];

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

@@ -13,7 +13,16 @@ class IgxCustomTreeGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFor
         this.name = "Custom Tree Grid";
         this.description = "IgxTreeGrid with optional features like sorting, filtering, row editing, etc.";
         this.dependencies = [
-            { import: "IgxTreeGridModule", from: "<%=igxPackage%>" }
+            {
+                standalone: true,
+                import: "IgxTreeGridComponent",
+                from: "<%=igxPackage%>"
+            },
+            {
+                standalone: true,
+                import: "IgxColumnComponent",
+                from: "<%=igxPackage%>"
+            }
         ];
         this.hasExtraConfiguration = true;
     }
@@ -82,6 +91,11 @@ class IgxCustomTreeGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFor
                         break;
                     case "Paging":
                         additionalElements.push(`  <igx-paginator></igx-paginator>`);
+                        this.dependencies.push({
+                            standalone: true,
+                            import: "IgxPaginatorComponent",
+                            from: "<%=igxPackage%>"
+                        });
                         break;
                     case "Column Pinning":
                         columnPinning = '[pinned]="true"';
@@ -128,6 +142,36 @@ class IgxCustomTreeGridTemplate extends IgniteUIForAngularTemplate_1.IgniteUIFor
                 selectedFeatures = `<p>Active Features:<br />${selectedFeatures}</p>`;
             }
             if (toolbarActions.length) {
+                this.dependencies = [
+                    ...this.dependencies,
+                    ...[
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarComponent",
+                            from: "<%=igxPackage%>"
+                        },
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarTitleComponent",
+                            from: "<%=igxPackage%>"
+                        },
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarActionsComponent",
+                            from: "<%=igxPackage%>"
+                        },
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarPinningComponent",
+                            from: "<%=igxPackage%>"
+                        },
+                        {
+                            standalone: true,
+                            import: "IgxGridToolbarHidingComponent",
+                            from: "<%=igxPackage%>"
+                        }
+                    ]
+                ];
                 const parts = [
                     "  <igx-grid-toolbar>",
                     "    <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>",

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

@@ -0,0 +1,86 @@
+<p>igx-accordion component sample.</p>
+<p>You can read more about configuring the igx-tabs component in the 
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/accordion/README.md" target="_blank">README</a> or the 
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/accordion" target="_blank">official documentation</a>.</p>
+<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch>
+<article class="sample-wrapper">
+    <igx-accordion #accordion [singleBranchExpand]="singleBranchExpand">
+        <igx-expansion-panel>
+            <igx-expansion-panel-header class="expansion-header">
+                <igx-expansion-panel-title>What has changed about subscription and pricing model?
+                </igx-expansion-panel-title>
+            </igx-expansion-panel-header>
+            <igx-expansion-panel-body>
+                We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
+                for you to manage your license subscriptions and allows us to provide a better level of service for you.
+
+                We updated our pricing and packages to provide you with flexible options and the best value. This
+                includes <a href="https://www.infragistics.com/products/ignite-ui">Ignite UI </a>(formerly Ignite UI for
+                JavaScript) which includes all of our JavaScript framework
+                components for web development, including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and
+                Web Components), as well as Infragistics Professional, Infragistics Ultimate, our Ultimate UI products.
+
+                We also offer multi-year subscriptions options with a built-in discount, so you can see the value up
+                front. With these updates we are confident that we are providing the best platforms and the best price.
+            </igx-expansion-panel-body>
+        </igx-expansion-panel>
+        <igx-expansion-panel>
+            <igx-expansion-panel-header class="expansion-header">
+                <igx-expansion-panel-title>Who will the updated changes impact?</igx-expansion-panel-title>
+            </igx-expansion-panel-header>
+            <igx-expansion-panel-body>
+                The license updates will impact all new and current customers using Ignite UI, Infragistics Professional
+                and Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for
+                Ignite UI for JavaScript, Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components.
+                For more information, please refer to this blog:
+
+                <a
+                    href="https://www.infragistics.com/community/blogs/b/jason_beres/posts/announcement-changes-to-ignite-ui-product-packaging">Announcement:
+                    Changes to Ignite UI Product & Packaging</a>
+
+                The pricing has been updated for all products and packages. So, all new or additional licenses will be
+                sold based on our new pricing and packages. All existing license agreements will be honored and renewed
+                based upon the current agreement.
+            </igx-expansion-panel-body>
+        </igx-expansion-panel>
+        <igx-expansion-panel>
+            <igx-expansion-panel-header class="expansion-header">
+                <igx-expansion-panel-title>What is the difference between your old model and your current subscription
+                    model
+                    for Ignite UI?</igx-expansion-panel-title>
+            </igx-expansion-panel-header>
+            <igx-expansion-panel-body>
+                For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages
+                will be replaced with packages that include a “Trial Version” watermark. Licensed packages for Ignite UI
+                will be available from our cloud hosted ProGet server.
+
+                For more information, please refer to this article:
+
+                <a
+                    href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ignite-ui-licensing">Moving
+                    from Trial to Licensed Ignite UI NPM Packages</a>
+            </igx-expansion-panel-body>
+        </igx-expansion-panel>
+        <igx-expansion-panel>
+            <igx-expansion-panel-header class="expansion-header">
+                <igx-expansion-panel-title>What happens if I don’t renew my subscription?</igx-expansion-panel-title>
+            </igx-expansion-panel-header>
+            <igx-expansion-panel-body>
+                Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include
+                this watermark.
+            </igx-expansion-panel-body>
+        </igx-expansion-panel>
+        <igx-expansion-panel>
+            <igx-expansion-panel-header class="expansion-header">
+                <igx-expansion-panel-title>If I don’t renew my subscription will I still have access to previous
+                    versions of
+                    Infragistics products?</igx-expansion-panel-title>
+            </igx-expansion-panel-header>
+            <igx-expansion-panel-body>
+                Any version of Infragistics software which you have downloaded can continue to be used perpetually.
+                Access to download any new or previous versions through our customer portal and package feeds will
+                require maintaining an active subscription by continuing to renew it.
+            </igx-expansion-panel-body>
+        </igx-expansion-panel>
+    </igx-accordion>
+</article>

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

@@ -0,0 +1,17 @@
+$ep-sample-border: 1px solid rgba(174, 174, 174, 0.25);
+
+.sample-wrapper {
+  overflow-y: auto;
+  max-height: 450px;
+  width: 600px;
+  margin: 8px;
+}
+
+igx-expansion-panel-body,
+igx-switch {
+  padding: 16px;
+}
+
+igx-expansion-panel {
+  border: $ep-sample-border;
+}

package/igx-ts-legacy/accordion/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 { <%=ClassName%>Component } from './<%=filePrefix%>.component';
+import { IgxAccordionModule, IgxSwitchModule } from '<%=igxPackage%>';
+
+describe('<%=ClassName%>Component', () => {
+  let component: <%=ClassName%>Component;
+  let fixture: ComponentFixture<<%=ClassName%>Component>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [<%=ClassName%>Component],
+      imports: [ NoopAnimationsModule, IgxAccordionModule, IgxSwitchModule ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts-legacy/accordion/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 singleBranchExpand = false;
+}

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForAngularTemplate_1 = require("../../../IgniteUIForAngularTemplate");
+class IgxAccordionTemplate extends IgniteUIForAngularTemplate_1.IgniteUIForAngularTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Accordion"];
+        this.controlGroup = "Layouts";
+        this.listInComponentTemplates = true;
+        this.id = "accordion";
+        this.projectType = "igx-ts";
+        this.name = "Accordion";
+        this.description = "Basic IgxAccordion sample";
+        this.dependencies = [{
+                import: ["IgxAccordionModule", "IgxSwitchModule"],
+                from: "<%=igxPackage%>"
+            }];
+    }
+}
+module.exports = new IgxAccordionTemplate();

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgxAccordionComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Accordion";
+        this.group = "Layouts";
+        this.description = `allows users to navigate among multiple collapsible panels displayed in a single container`;
+    }
+}
+module.exports = new IgxAccordionComponent();

package/igx-ts-legacy/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.component.html

@@ -0,0 +1,20 @@
+<p>The <b>igx-autocomplete</b> directive provides a way to enhance a text input by showing a panel of suggested options provided by the developer.</p>
+<p>You can read more about configuring the <b>igx-autocomplete</b> in the 
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/autocomplete/README.md" target="_blank">README</a> or the 
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html" target="_blank">official documentation</a>.</p>
+
+<section class="sample-content">
+  <article class="sample-column">
+    <form class="input-group-form">
+      <igx-input-group>
+        <label igxLabel for="town">Town</label>
+        <input igxInput name="town" type="text" [igxAutocomplete]="townsPanel" [(ngModel)]="townSelected" />
+      </igx-input-group>
+      <igx-drop-down #townsPanel maxHeight="300px">
+        <igx-drop-down-item *ngFor="let town of towns | <%=camelCaseName%>StartsWith:townSelected" [value]="town">
+          {{town}}
+        </igx-drop-down-item>
+      </igx-drop-down>
+    </form>
+  </article>
+</section>