added json-schema form component

package.json

@@ -20,7 +20,7 @@
     "@angular/router": "~12.1.2",
     "query-selector-shadow-dom": "^1.0.1",
     "rxjs": "~6.6.0",
-    "stenciljs-components": "^1.0.13",
+    "stenciljs-components": "^2.0.1",
     "tslib": "^2.2.0",
     "zone.js": "~0.11.4"
   },

src/app/library-components/form-schema.ts

@@ -0,0 +1,56 @@
+export const formSchema = {
+    "fields":[
+    { "type": "text", "name": "username", "label": "Username", "placeholder": "Enter username", "required": true },
+    { "type": "date", "name": "dob", "label": "Date of Birth", "required": true },
+    { "type": "checkbox", "name": "subscribe", "label": "Subscribe", "required": false },
+    { "type": "radio", "name": "gender", "label": "Gender", "options": [{ "label": "Male", "value": "male" }, { "label": "Female", "value": "female" }], "required": true },
+    { "type": "select", "name": "country", "label": "Country", "options": [{ "label": "USA", "value": "usa" }, { "label": "India", "value": "india" }], "required": true },
+    {
+      "type": "array",
+      "name": "experiences",
+      "label": "Work Experiences",
+      "required": false,
+      "items": [
+        {
+          "type": "text",
+          "name": "companyName",
+          "label": "Company Name",
+          "required": true
+        },
+        {
+          "type": "date",
+          "name": "startDate",
+          "label": "Start Date",
+          "required": true
+        },
+        {
+          "type": "date",
+          "name": "endDate",
+          "label": "End Date",
+          "required": true
+        },
+        {
+          "type": "select",
+          "name": "role",
+          "label": "Role",
+          "options": [
+            { "label": "Developer", "value": "developer" },
+            { "label": "Designer", "value": "designer" },
+            { "label": "Manager", "value": "manager" }
+          ],
+          "required": true
+        }
+      ]
+    },
+    {
+        "type": "date",
+        "name": "Proposaldate",
+        "label": "Proposal Date",
+        "required": true
+      },
+      { "type": "radio", "name": "insurance", "label": "Global insurance companies", "options": [{ "label": "Liberty Mutual", "value": "Liberty Mutual" }, { "label": "All States", "value": "All States" },{ "label": "Farmers", "value": "Farmers" }], "required": true },
+
+      { "type": "textarea",  "name": "comments",  "label": "Comments",   "placeholder": "Write your comments here...","maxLength": 200,   "minLength": 0,  "errorMessage": "Comments must be between 0 and 200 characters.",  "conditionalOn": { "field": "gender", "value": "female" }  },
+    {  "type": "combo-box", "name": "favoriteFruit", "label": "Favorite Fruit",   "placeholder": "Type or select a fruit...",  "required": true,   "options": [     { "label": "Apple", "value": "apple" },     { "label": "Banana", "value": "banana" },   { "label": "Cherry", "value": "cherry" }   ]},
+    {  "type": "my-rich-text-editor",   "name": "bio",  "label": "Bio", "placeholder": "Write your biography..."}
+  ]}

src/app/library-components/library-components.component.html

@@ -1,16 +1,6 @@
 <p>library-components works!</p>
 <h1>from 'stenciljs-components' npm package</h1>
-<my-card user-name="CodingLocker"></my-card>
+<json-schema-form [schema]= "formSchema | json"></json-schema-form> 
 <my-pie-chart  data='[{"tag":"height","value":180},{"tag":"weight","value":75},{"tag":"age","value":30},{"tag":"score","value":95},{"tag":"yearsExperience","value":5}]'></my-pie-chart>
-<my-rich-text-editor initial-value="this is initial value" placeholder="angular placeholder" font-family="Arial" font-size="26pt"></my-rich-text-editor>
 <my-progress-bar value="2" max="10"></my-progress-bar>
-<my-progress-ring percentage="30"></my-progress-ring>
-<test-button button-id="test-button">Click me!</test-button>
-<test-counter>Number: </test-counter>
-<search-world search-text="bmw"> </search-world>
-<my-payment-gateway></my-payment-gateway>
-<my-component first="Sanjeet" last="Kumar"></my-component>
-<combo-box [allowInput]="true"></combo-box>
 <custom-form></custom-form>
-<custom-text-input name="my-custom-input"  form-associated></custom-text-input>
-<my-button text="Angular Button" (myEvent)="buttonClick($event)"><h5>Hello World</h5></my-button>

src/app/library-components/library-components.component.ts

@@ -1,11 +1,18 @@
 import { Component, OnInit } from '@angular/core';
+import { formSchema } from './form-schema'; // Import schema
 
 @Component({
   selector: 'app-library-components',
   templateUrl: './library-components.component.html',
   styleUrls: ['./library-components.component.scss']
 })
 export class LibraryComponentsComponent implements OnInit {
+  formSchema = formSchema; // Assign the imported schema to a local variable
+//first option used in html file with Angular's json pipe 
+//option 2:  schemaString = JSON.stringify(formSchema); // Convert schema to JSON string
+//and then in html file
+//<json-schema-form [schema]="schemaString"></json-schema-form>
+//
 
   constructor() { }
 

src/styles.scss

@@ -2,7 +2,7 @@ body {
   // background-color: #303030;
   // color: #FAFAFA;
   font-family: 'Trebuchet MS', sans-serif;
-  font-size: 2rem;
+  //font-size: 2rem;
   padding: 30px;
   text-align: center;
 }