chore(WebComponents): igniteui-webcomponents version bump, adding ban…

…ner, divider and date picker templates - 13.3.x (#1274)

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

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

@@ -0,0 +1,19 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcBannerComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcBannerComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <igc-banner id="banner" .open=${open}>
+        You are currently not logged in! Please, log into your account first.
+      </igc-banner>
+    `;
+  }
+}

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

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

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

@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcBannerComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "Banner";
+		this.group = "Notifications";
+		this.description = `Customizable banner component`;
+	}
+}
+module.exports = new IgcBannerComponent();

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

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

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

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

@@ -0,0 +1,19 @@
+import { TypeScriptFileUpdate } from "@igniteui/cli-core";
+import { IgniteUIForWebComponentsTemplate } from "../../../../../lib/templates/IgniteUIForWebComponentsTemplate";
+
+class IgcDatePickerTemplate extends IgniteUIForWebComponentsTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["DatePicker"];
+		this.controlGroup = "Scheduling";
+		this.listInComponentTemplates = true;
+		this.id = "date-picker";
+		this.projectType = "igc-ts";
+		this.name = "Date Picker";
+		this.description = "basic IgcDatePicker";
+	}
+	protected addClassDeclaration(mainModule: TypeScriptFileUpdate, projPath: string, name: string, modulePath: string) {
+		// not applicable with custom module
+	}
+}
+module.exports = new IgcDatePickerTemplate();

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

@@ -0,0 +1,14 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgcDatePickerComponent extends BaseComponent {
+	/**
+	 *
+	 */
+	constructor() {
+		super(__dirname);
+		this.name  = "DatePicker";
+		this.group = "Scheduling";
+		this.description = `Basic date picker component`;
+	}
+}
+module.exports = new IgcDatePickerComponent();

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

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

@@ -0,0 +1,19 @@
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import {
+  defineComponents,
+  IgcDividerComponent,
+} from 'igniteui-webcomponents';
+
+defineComponents(IgcDividerComponent);
+
+@customElement('app-$(path)')
+export default class $(ClassName) extends LitElement {
+  render() {
+    return html`
+      <p>First paragraph</p>
+      <igc-divider ?middle=true type=solid></igc-divider>
+      <p>Second paragraph</p>
+    `;
+  }
+}

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

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

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

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

packages/cli/templates/webcomponents/igc-ts/groups.json

@@ -6,6 +6,7 @@
   "Scheduling": "",
   "Layouts": "",
   "Charts": "",
-  "Gauges": ""
+  "Gauges": "",
+  "Notifications": ""
 }
 

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

@@ -23,7 +23,7 @@
     "@vaadin/router": "^1.7.4",
     "lit": "^3.1.2",
     "typescript": "^5.3.3",
-    "igniteui-webcomponents": "~4.10.0"
+    "igniteui-webcomponents": "~4.11.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",

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

@@ -23,7 +23,7 @@
     "@vaadin/router": "^1.7.4",
     "@igniteui/material-icons-extended": "^3.0.2",
     "igniteui-dockmanager": "~1.14.3",
-    "igniteui-webcomponents": "~4.10.0",
+    "igniteui-webcomponents": "~4.11.0",
     "igniteui-webcomponents-charts": "~4.8.0",
     "igniteui-webcomponents-core": "~4.8.0",
     "igniteui-webcomponents-gauges": "~4.8.0",