From 95083684d5b7da20627c42d71801c0ab90390c88 Mon Sep 17 00:00:00 2001
From: lipata <nikolay.alipiev@gmail.com>
Date: Thu, 10 Oct 2024 14:54:26 +0300
Subject: [PATCH] fix: use native form instead of removed igc-form

---
 .../files/src/app/__path__/__filePrefix__.ts     |  6 ++----
 .../src/app/__path__/__filePrefix__.test.ts      |  2 +-
 .../files/src/app/__path__/__filePrefix__.ts     | 16 ++++++----------
 .../webcomponents/igc-ts/form/default/index.ts   |  2 +-
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts
index 914ad88fb..073549b01 100644
--- a/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.ts
@@ -2,14 +2,12 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcFormComponent,
   IgcInputComponent,
   IgcCheckboxComponent,
   IgcButtonComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
-  IgcFormComponent,
   IgcInputComponent,
   IgcCheckboxComponent,
   IgcButtonComponent,
@@ -49,7 +47,7 @@ export default class $(ClassName) extends LitElement {
   render() {
     return html`
       <div class="container sample">
-        <igc-form id="form" @igcSubmit="${this.handleSubmit}">
+        <form id="form" @submit="${this.handleSubmit}">
           <div>Subscribe</div>
           <igc-input required name="name" type="text" label="Your Name"></igc-input>
           <igc-input required name="email" type="email" label="Your E-mail"></igc-input>
@@ -59,7 +57,7 @@ export default class $(ClassName) extends LitElement {
             <igc-button type="reset">Reset</igc-button>
             <igc-button type="submit">Submit</igc-button>
           </div>
-        </igc-form>
+        </form>
       </div>
     `;
   }
diff --git a/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts b/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts
index 0b0148e04..6b706a029 100644
--- a/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.test.ts
@@ -1,7 +1,7 @@
 import { expect } from '@open-wc/testing';
 import $(ClassName) from './$(path).js';
 
-describe('IgcFormComponent', () => {
+describe('Form', () => {
   it('<app-$(path)> is an instance of $(ClassName)', async () => {
     const element = document.createElement('app-$(path)');
     expect(element).to.be.instanceOf($(ClassName));
diff --git a/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.ts b/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.ts
index f506f427d..846a07d8e 100644
--- a/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/form/default/files/src/app/__path__/__filePrefix__.ts
@@ -2,12 +2,10 @@ import { html, css, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import {
   defineComponents,
-  IgcFormComponent,
   IgcRadioGroupComponent,
 } from 'igniteui-webcomponents';
 
 defineComponents(
-  IgcFormComponent,
   IgcRadioGroupComponent,
 );
 
@@ -23,19 +21,17 @@ export default class $(ClassName) extends LitElement {
 
   render() {
     return html`
-      <igc-form id="form" novalidate="true">
-        <label for="full-name">Full name:</label>
-        <input type="text" id="full-name" name="full-name" value="Your name" />
-        <label for="phone-number">Phone number:</label>
-        <input type="tel" id="phone-number" name="phone-number" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />
+      <form id="form">
+        <igc-input label="Full name" type="text" id="full-name" name="full-name"></igc-input>
+        <igc-input label="Phone number" type="tel" id="phone-number" name="phone-number" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"></igc-input>
         <div>
-          <label for="gender">Gender:</label>
-          <igc-radio-group id="gender">
+        <label for="gender">Gender:</label>
+        <igc-radio-group id="gender">
             <igc-radio name="gender" value="Male">Male</igc-radio>
             <igc-radio name="gender" value="Female">Female</igc-radio>
           </igc-radio-group>
         </div>
-      </igc-form>
+      </form>
     `;
   }
 }
diff --git a/packages/cli/templates/webcomponents/igc-ts/form/default/index.ts b/packages/cli/templates/webcomponents/igc-ts/form/default/index.ts
index 92b9a7d21..97a14a854 100644
--- a/packages/cli/templates/webcomponents/igc-ts/form/default/index.ts
+++ b/packages/cli/templates/webcomponents/igc-ts/form/default/index.ts
@@ -9,7 +9,7 @@ class IgcFormTemplate extends IgniteUIForWebComponentsTemplate {
 		this.id = "form";
 		this.projectType = "igc-ts";
 		this.name = "Form";
-		this.description = "basic IgcForm";
+		this.description = "basic Form";
 	}
 }
 module.exports = new IgcFormTemplate();