feat: add new components and templates for angular

packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,12 @@
+<p>igx-action-strip component sample.</p>
+<p>You can read more about configuring the igx-action-strip component in the
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/action-strip/README.md" target="_blank">README</a> or the
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/action_strip.html" target="_blank">official documentation</a>.</p>
+<div class="action-strip-container" (mouseenter)="actionStrip.show()" (mouseleave)="actionStrip.hide()">
+  <div class="action-strip-container__placeholder">Hover to reveal actions</div>
+  <igx-action-strip #actionStrip>
+    <button igxButton="flat" (click)="onFavorite()">
+      <igx-icon>favorite</igx-icon>
+    </button>
+  </igx-action-strip>
+</div>

packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.scss

@@ -0,0 +1,14 @@
+.action-strip-container {
+  position: relative;
+  width: 320px;
+  height: 160px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed rgba(0, 0, 0, 0.25);
+  margin: 8px;
+
+  &__placeholder {
+    color: rgba(0, 0, 0, 0.6);
+  }
+}

packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+import { IgxActionStripModule } from '<%=igxPackage%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule, IgxActionStripModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IgxActionStripComponent, IgxButtonDirective, IgxIconComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxActionStripComponent, IgxButtonDirective, IgxIconComponent],
+})
+export class <%=ClassName%> {
+  public onFavorite(): void {
+    console.log('favorite clicked');
+  }
+}

packages/igx-templates/igx-ts/action-strip/default/index.ts

@@ -0,0 +1,17 @@
+import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants";
+import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate";
+
+class IgxActionStripTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Action Strip"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "action-strip";
+		this.projectType = "igx-ts";
+		this.name = "Action Strip";
+		this.description = "Basic IgxActionStrip sample";
+		this.packages = [IGNITEUI_ANGULAR_PACKAGE];
+	}
+}
+module.exports = new IgxActionStripTemplate();

packages/igx-templates/igx-ts/action-strip/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgxActionStripComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Action Strip";
+		this.group = "Grids & Lists";
+		this.description = "provides a template area with one or more actions overlaid on a container";
+	}
+}
+module.exports = new IgxActionStripComponent();

packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,9 @@
+<p>igx-avatar component sample.</p>
+<p>You can read more about configuring the igx-avatar component in the
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/avatar/README.md" target="_blank">README</a> or the
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/avatar" target="_blank">official documentation</a>.</p>
+<div class="avatar-sample">
+  <igx-avatar initials="JS" shape="circle"></igx-avatar>
+  <igx-avatar icon="person" shape="circle"></igx-avatar>
+  <igx-avatar src="https://www.infragistics.com/angular-demos-lob/assets/images/card/media/coffeeshopdemo.jpg" shape="rounded"></igx-avatar>
+</div>

packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.scss

@@ -0,0 +1,6 @@
+.avatar-sample {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin: 8px;
+}

packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+import { IgxAvatarModule } from '<%=igxPackage%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule, IgxAvatarModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/igx-templates/igx-ts/avatar/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxAvatarComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxAvatarComponent],
+})
+export class <%=ClassName%> {
+}

packages/igx-templates/igx-ts/avatar/default/index.ts

@@ -0,0 +1,17 @@
+import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants";
+import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate";
+
+class IgxAvatarTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Avatar"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "avatar";
+		this.projectType = "igx-ts";
+		this.name = "Avatar";
+		this.description = "Basic IgxAvatar sample";
+		this.packages = [IGNITEUI_ANGULAR_PACKAGE];
+	}
+}
+module.exports = new IgxAvatarTemplate();

packages/igx-templates/igx-ts/avatar/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgxAvatarComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Avatar";
+		this.group = "Data Entry & Display";
+		this.description = "displays an image, icon or initials to the user";
+	}
+}
+module.exports = new IgxAvatarComponent();

packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,14 @@
+<p>igx-badge component sample.</p>
+<p>You can read more about configuring the igx-badge component in the
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/badge/README.md" target="_blank">README</a> or the
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/badge.html" target="_blank">official documentation</a>.</p>
+<div class="badge-sample">
+  <div class="badge-sample__item">
+    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
+    <igx-badge icon="check" type="success" shape="square"></igx-badge>
+  </div>
+  <div class="badge-sample__item">
+    <igx-avatar icon="shopping_cart" shape="circle" size="small"></igx-avatar>
+    <igx-badge value="5" type="info" shape="rounded"></igx-badge>
+  </div>
+</div>

packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.scss

@@ -0,0 +1,16 @@
+.badge-sample {
+  display: flex;
+  gap: 24px;
+  margin: 8px;
+
+  &__item {
+    position: relative;
+    display: inline-flex;
+
+    igx-badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+    }
+  }
+}

packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+import { IgxAvatarModule, IgxBadgeModule } from '<%=igxPackage%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule, IgxAvatarModule, IgxBadgeModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/igx-templates/igx-ts/badge/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { IgxAvatarComponent, IgxBadgeComponent } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxAvatarComponent, IgxBadgeComponent],
+})
+export class <%=ClassName%> {
+}

packages/igx-templates/igx-ts/badge/default/index.ts

@@ -0,0 +1,17 @@
+import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants";
+import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate";
+
+class IgxBadgeTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Badge"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "badge";
+		this.projectType = "igx-ts";
+		this.name = "Badge";
+		this.description = "Basic IgxBadge sample";
+		this.packages = [IGNITEUI_ANGULAR_PACKAGE];
+	}
+}
+module.exports = new IgxBadgeTemplate();

packages/igx-templates/igx-ts/badge/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgxBadgeComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Badge";
+		this.group = "Data Entry & Display";
+		this.description = "displays visual notifications used to decorate avatars, menus, etc.";
+	}
+}
+module.exports = new IgxBadgeComponent();

packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,11 @@
+<p>igx-banner component sample.</p>
+<p>You can read more about configuring the igx-banner component in the
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/banner/README.md" target="_blank">README</a> or the
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html" target="_blank">official documentation</a>.</p>
+<button type="button" igxButton="contained" (click)="banner.open()">Show banner</button>
+<igx-banner>
+  This is the default template's message!
+  <igx-banner-actions>
+    <button type="button" igxButton="flat" (click)="banner.close()">Dismiss</button>
+  </igx-banner-actions>
+</igx-banner>

packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.scss

@@ -0,0 +1,3 @@
+button {
+  margin: 8px;
+}

packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.spec.ts

@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { <%=ClassName%> } from './<%=filePrefix%>';
+import { IgxBannerModule } from '<%=igxPackage%>';
+
+describe('<%=ClassName%>', () => {
+  let component: <%=ClassName%>;
+  let fixture: ComponentFixture<<%=ClassName%>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule, IgxBannerModule, <%=ClassName%>]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(<%=ClassName%>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/igx-templates/igx-ts/banner/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,13 @@
+import { Component, ViewChild } from '@angular/core';
+import { IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective } from '<%=igxPackage%>';
+
+@Component({
+  selector: 'app-<%=filePrefix%>',
+  templateUrl: './<%=filePrefix%>.html',
+  styleUrl: './<%=filePrefix%>.scss',
+  imports: [IgxBannerComponent, IgxBannerActionsDirective, IgxButtonDirective],
+})
+export class <%=ClassName%> {
+  @ViewChild(IgxBannerComponent, { static: true })
+  public banner!: IgxBannerComponent;
+}

packages/igx-templates/igx-ts/banner/default/index.ts

@@ -0,0 +1,17 @@
+import { IGNITEUI_ANGULAR_PACKAGE } from "../../../constants";
+import { IgniteUIForAngularTemplate } from "../../../IgniteUIForAngularTemplate";
+
+class IgxBannerTemplate extends IgniteUIForAngularTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Banner"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "banner";
+		this.projectType = "igx-ts";
+		this.name = "Banner";
+		this.description = "Basic IgxBanner sample";
+		this.packages = [IGNITEUI_ANGULAR_PACKAGE];
+	}
+}
+module.exports = new IgxBannerTemplate();

packages/igx-templates/igx-ts/banner/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgxBannerComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Banner";
+		this.group = "Interactions";
+		this.description = "shows a banner at the full width of the screen above the app content";
+	}
+}
+module.exports = new IgxBannerComponent();

packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.html

@@ -0,0 +1,5 @@
+<p>igx-buttongroup component sample.</p>
+<p>You can read more about configuring the igx-buttongroup component in the
+<a href="https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/button-group/README.md" target="_blank">README</a> or the
+<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html" target="_blank">official documentation</a>.</p>
+<igx-buttongroup selectionMode="multi" [values]="fontOptions"></igx-buttongroup>

packages/igx-templates/igx-ts/button-group/default/files/src/app/__path__/__filePrefix__.scss

@@ -0,0 +1,3 @@
+igx-buttongroup {
+  margin: 8px;
+}