feat(wc): add new 2.1.0 components

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcChipComponent', () => {
+  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/chip/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,34 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcChipComponent,
+  registerIconFromText,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcChipComponent);
+
+registerIconFromText(
+  'select',
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>',
+);
+
+registerIconFromText(
+  'cancel',
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>',
+);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <div style="width: 200px; padding: 20px;">
+        <igc-chip selectable removable>
+          <span slot="select"><igc-icon name="select"></igc-icon></span>
+          Custom Icons
+          <span slot="remove"><igc-icon name="cancel"></igc-icon></span>
+        </igc-chip>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,19 @@
+import { TypeScriptFileUpdate } from "@igniteui/cli-core";
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcChipTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Chip"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "chip";
+		this.projectType = "igc-ts";
+		this.name = "Chip";
+		this.description = "Basic IgcChip";
+	}
+	protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) {
+		// not applicable with custom module
+	}
+}
+module.exports = new IgcChipTemplate();

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

@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcChipComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Chip";
+		this.group = "Data Entry & Display";
+		this.description = `Customizable chip component`;
+	}
+}
+module.exports = new IgcChipComponent();

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcCircularProgressComponent', () => {
+  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/circular-progress/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,35 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcCircularProgressComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcCircularProgressComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+    <div style="display: flex; align-items: center; gap: 16px">
+      <igc-circular-progress
+        style="--diameter: 96px; --stroke-thickness: 12px;"
+        animation-duration="1000"
+        indeterminate="true"
+        variant="danger">
+      </igc-circular-progress>
+      <igc-circular-progress
+        style="--diameter: 96px; --stroke-thickness: 12px;"
+        value="92"
+        animation-duration="500">
+      </igc-circular-progress>
+      <igc-circular-progress
+        style="--diameter: 96px; --stroke-thickness: 12px;"
+        value="92"
+        animation-duration="1500"
+        variant="success">
+      </igc-circular-progress>
+    </div>
+    `;
+  }
+}

packages/cli/templates/webcomponents/igc-ts/circular-progress/default/index.ts

@@ -0,0 +1,19 @@
+import { TypeScriptFileUpdate } from "@igniteui/cli-core";
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcCircularProgressTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Circular Progress"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "circular-progress";
+		this.projectType = "igc-ts";
+		this.name = "Circular Progress";
+		this.description = "Basic Circular Progress";
+	}
+	protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) {
+		// not applicable with custom module
+	}
+}
+module.exports = new IgcCircularProgressTemplate();

packages/cli/templates/webcomponents/igc-ts/circular-progress/index.ts

@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcCircularProgressComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Circular Progress";
+		this.group = "Data Entry & Display";
+		this.description = `Customizable Circular Progress component`;
+	}
+}
+module.exports = new IgcCircularProgressComponent();

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcLinearProgressComponent', () => {
+  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/linear-progress/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,24 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcLinearProgressComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcLinearProgressComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+    <div style="width: 200px; padding: 20px;">
+      <igc-linear-progress
+        value="92"
+        animation-duration="1000"
+        label-align="top-end"
+        variant="success">
+      </igc-linear-progress>
+    </div>
+    `;
+  }
+}

packages/cli/templates/webcomponents/igc-ts/linear-progress/default/index.ts

@@ -0,0 +1,19 @@
+import { TypeScriptFileUpdate } from "@igniteui/cli-core";
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcLinearProgressComponent extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Linear Progress"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "linear-progress";
+		this.projectType = "igc-ts";
+		this.name = "Linear Progress";
+		this.description = "Basic Linear Progress";
+	}
+	protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) {
+		// not applicable with custom module
+	}
+}
+module.exports = new IgcLinearProgressComponent();

packages/cli/templates/webcomponents/igc-ts/linear-progress/index.ts

@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcLinearProgressComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Linear Progress";
+		this.group = "Data Entry & Display";
+		this.description = `Customizable Linear Progress component`;
+	}
+}
+module.exports = new IgcLinearProgressComponent();

packages/cli/templates/webcomponents/igc-ts/projects/_base/files/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@vaadin/router": "^1.7.4",
-    "igniteui-webcomponents": "2.0.0",
+    "igniteui-webcomponents": "2.1.0",
     "igniteui-webcomponents-grids": "~1.4.1",
     "igniteui-webcomponents-core": "~1.4.1",
     "igniteui-webcomponents-layouts": "~1.4.1",
@@ -73,6 +73,7 @@
       "@typescript-eslint/no-unused-vars": [
         "error"
       ],
+      "import/no-extraneous-dependencies": "off",
       "import/no-unresolved": "off",
       "import/extensions": [
         "error",

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

@@ -0,0 +1,9 @@
+import { expect } from '@open-wc/testing';
+import $(ClassName) from './$(path).js';
+
+describe('IgcRatingComponent', () => {
+  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/rating/default/files/src/app/__path__/__filePrefix__.ts

@@ -0,0 +1,17 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcRatingComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcRatingComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-rating></igc-rating>
+    `;
+  }
+}

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

@@ -0,0 +1,19 @@
+import { TypeScriptFileUpdate } from "@igniteui/cli-core";
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcRatingComponent extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Rating"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "rating";
+		this.projectType = "igc-ts";
+		this.name = "Rating";
+		this.description = "Basic Rating";
+	}
+	protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) {
+		// not applicable with custom module
+	}
+}
+module.exports = new IgcRatingComponent();

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

@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcRatingComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Rating";
+		this.group = "Data Entry & Display";
+		this.description = `Customizable rating component`;
+	}
+}
+module.exports = new IgcRatingComponent();