feat: add new components and templates webcomponents

packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcCarouselComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,46 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcCarouselComponent,
+  IgcCarouselSlideComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcCarouselComponent,
+  IgcCarouselSlideComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    igc-carousel {
+      height: 320px;
+      width: 420px;
+    }
+    .slide {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: white;
+      font: 600 24px sans-serif;
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-carousel vertical indicators-orientation="start">
+        <igc-carousel-slide>
+          <div class="slide" style="background: #4a6fa5;">Slide 1</div>
+        </igc-carousel-slide>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #6b8f71;">Slide 2</div>
+        </igc-carousel-slide>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #a5644a;">Slide 3</div>
+        </igc-carousel-slide>
+      </igc-carousel>
+    `;
+  }
+}

packages/cli/templates/webcomponents/igc-ts/carousel/carousel-vertical/index.ts

@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcCarouselVerticalTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Carousel"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "carousel-vertical";
+		this.projectType = "igc-ts";
+		this.name = "Carousel Vertical";
+		this.description = "IgcCarousel with vertical slide transitions";
+	}
+}
+module.exports = new IgcCarouselVerticalTemplate();

packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcCarouselComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

packages/cli/templates/webcomponents/igc-ts/carousel/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,45 @@
+import { html, LitElement, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcCarouselComponent,
+  IgcCarouselSlideComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(
+  IgcCarouselComponent,
+  IgcCarouselSlideComponent,
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  static styles = css`
+    igc-carousel {
+      height: 260px;
+    }
+    .slide {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: white;
+      font: 600 24px sans-serif;
+    }
+  `;
+
+  render() {
+    return html`
+      <igc-carousel>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #4a6fa5;">Slide 1</div>
+        </igc-carousel-slide>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #6b8f71;">Slide 2</div>
+        </igc-carousel-slide>
+        <igc-carousel-slide>
+          <div class="slide" style="background: #a5644a;">Slide 3</div>
+        </igc-carousel-slide>
+      </igc-carousel>
+    `;
+  }
+}

packages/cli/templates/webcomponents/igc-ts/carousel/default/index.ts

@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcCarouselTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Carousel"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "carousel";
+		this.projectType = "igc-ts";
+		this.name = "Carousel";
+		this.description = "basic IgcCarousel with local slides";
+	}
+}
+module.exports = new IgcCarouselTemplate();

packages/cli/templates/webcomponents/igc-ts/carousel/index.ts

@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcCarouselComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Carousel";
+		this.group = "Layouts";
+		this.description = `Browse or navigate through a collection of slides`;
+	}
+}
+module.exports = new IgcCarouselComponent();

packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcChatComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

packages/cli/templates/webcomponents/igc-ts/chat/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,46 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcChatComponent,
+  type IgcChatMessage,
+  type IgcChatOptions,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcChatComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  // host must have an explicit width - it's a flex item with no intrinsic size
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+
+  private options: IgcChatOptions = {
+    currentUserId: 'me',
+    headerText: 'Support Chat',
+    inputPlaceholder: 'Type a message...',
+  };
+
+  private messages: IgcChatMessage[] = [
+    {
+      id: '1',
+      sender: 'support',
+      text: 'Hi! How can I help you today?',
+      timestamp: Date.now().toString(),
+    },
+  ];
+
+  render() {
+    return html`
+      <igc-chat
+        style="--igc-chat-height: 480px;"
+        .options=${this.options}
+        .messages=${this.messages}
+      ></igc-chat>
+    `;
+  }
+}

packages/cli/templates/webcomponents/igc-ts/chat/default/index.ts

@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcChatTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Chat"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "chat";
+		this.projectType = "igc-ts";
+		this.name = "Chat";
+		this.description = "basic IgcChat";
+	}
+}
+module.exports = new IgcChatTemplate();

packages/cli/templates/webcomponents/igc-ts/chat/index.ts

@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcChatComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Chat";
+		this.group = "Interactions";
+		this.description = `Complete conversational UI with messages, attachments and suggestions`;
+	}
+}
+module.exports = new IgcChatComponent();

packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcColorPickerComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,31 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcColorPickerComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  private swatches = [
+    'rgba(0, 0, 0, 0.5)',
+    'rgba(255, 255, 255, 0.5)',
+    '#4a6fa5',
+    '#a5644a',
+  ];
+
+  render() {
+    return html`
+      <igc-color-picker
+        label="Overlay color"
+        mode="input"
+        format="rgb"
+        show-alpha
+        value="rgba(74, 111, 165, 0.6)"
+        .swatches=${this.swatches}
+      ></igc-color-picker>
+    `;
+  }
+}

packages/cli/templates/webcomponents/igc-ts/color-picker/color-picker-alpha/index.ts

@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcColorPickerAlphaTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Color Picker"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "color-picker-alpha";
+		this.projectType = "igc-ts";
+		this.name = "Color Picker Alpha";
+		this.description = "IgcColorPicker in input mode with an alpha slider";
+	}
+}
+module.exports = new IgcColorPickerAlphaTemplate();

packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcColorPickerComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});

packages/cli/templates/webcomponents/igc-ts/color-picker/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,29 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcColorPickerComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcColorPickerComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  private swatches = [
+    '#4a6fa5',
+    '#6b8f71',
+    '#a5644a',
+    '#8a4fbe',
+    '#c94f4f',
+  ];
+
+  render() {
+    return html`
+      <igc-color-picker
+        label="Brand color"
+        value="#4a6fa5"
+        .swatches=${this.swatches}
+      ></igc-color-picker>
+    `;
+  }
+}

packages/cli/templates/webcomponents/igc-ts/color-picker/default/index.ts

@@ -0,0 +1,15 @@
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcColorPickerTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Color Picker"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "color-picker";
+		this.projectType = "igc-ts";
+		this.name = "Color Picker";
+		this.description = "basic IgcColorPicker with predefined swatches";
+	}
+}
+module.exports = new IgcColorPickerTemplate();

packages/cli/templates/webcomponents/igc-ts/color-picker/index.ts

@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcColorPickerComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Color Picker";
+		this.group = "Data Entry & Display";
+		this.description = `Lets users pick a color from a canvas, sliders or predefined swatches`;
+	}
+}
+module.exports = new IgcColorPickerComponent();

packages/cli/templates/webcomponents/igc-ts/combo/combo-groups/files/src/app/__path__/__filePrefix__.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from 'vitest';
+import $(ClassName) from './$(path).js';
+
+describe('IgcComboComponent', () => {
+  it('<app-$(path)> is an instance of $(ClassName)', async () => {
+    const element = document.createElement('app-$(path)');
+    expect(element).to.be.instanceOf($(ClassName));
+  });
+});