@piserve-tech/octa-form-submission-webcomponent 1.0.26 → 1.0.27

package/README.md

@@ -1,27 +1,144 @@
-# AngularFormSubmissionComponent
+# 🧩 Octa Form Submission Web Component
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.8.
+The **Octa Form Submission Web Component** is a fully framework-independent, reusable UI component that enables developers to dynamically create, edit, and manage forms. It can be used seamlessly in **Angular**, **React**, **Vue**, or **pure HTML/JavaScript** environments.  
 
-## Development server
+---
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+## 🚀 Installation
 
-## Code scaffolding
+### Step 1: Install the package
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+```bash
+npm i @piserve-tech/octa-form-submission-webcomponent
+```
 
-## Build
+---
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+## ⚙️ Setup Guide
 
-## Running unit tests
+### Step 2: Copy Required Assets
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+Run the following command to copy the assets (bundle.js and bundle.css) into your project’s `assets` folder.
 
-## Running end-to-end tests
+```bash
+node .\node_modules\@piserve-tech\octa-form-submission-webcomponent\copy-assets.js
+```
 
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+This script will copy files into:
+```
+/src/assets/octa-form-submission-webcomponent/
+```
 
-## Further help
+---
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+### Step 3: Add Component in HTML
+
+Use the web component directly in your HTML file or within any framework template:
+
+```html
+<octa-form-submission-webcomponent
+  formData='{"apiurl":"http://192.168.2.189:8080","modulename":"b673ddd3-066e-4261-aa32-41ccfe6e1864","headers":{"contentType":"application/json","auth-user":"John","acceptedLanguage":"en"},"skipMargin":false}'
+  submissionid="4a76519a-78aa-4d2c-8abf-52e1bb081ab5"
+  [edit]="edit"
+  (submitForm) = "submitForm($event)"
+  (apiCalled)="getFormApiCalled($event)"
+></octa-form-submission-webcomponent>
+```
+---
+
+### Step 4: Load JS & CSS (Optional for Frameworks)
+
+If your environment doesn’t automatically include the assets, load them dynamically in your code.
+
+#### Example (JavaScript or Angular):
+
+```typescript
+loadScript(src: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (document.querySelector(`script[src="${src}"]`)) {
+      resolve();
+      return;
+    }
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = () => resolve();
+    script.onerror = () => reject();
+    document.body.appendChild(script);
+  });
+}
+
+loadStyle(href: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (document.querySelector(`link[href="${href}"]`)) {
+      resolve();
+      return;
+    }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    link.onload = () => resolve();
+    link.onerror = () => reject();
+    document.head.appendChild(link);
+  });
+}
+
+async ngAfterViewInit() {
+  await this.loadStyle('./assets/octa-form-submission-webcomponent/bundle.css');
+  await this.loadScript('./assets/octa-form-submission-webcomponent/bundle.js');
+  const el = document.querySelector('octa-form-submission-webcomponent') as any;
+  if (el) {
+    el.formId = this.id;
+    el.edit = true;
+    el.showModifyInfo = false;
+    el.formData = this.formData;
+    el.top = '0';
+    el.createDuplicate = false;
+    el.formElements = this.formElements;
+  }
+}
+```
+
+---
+
+### Step 5 (Angular Only): Add `CUSTOM_ELEMENTS_SCHEMA`
+
+If you are using Angular, include `CUSTOM_ELEMENTS_SCHEMA` in your module file (e.g. `app.module.ts`).
+
+```typescript
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 👈 Important for Web Components
+})
+export class AppModule {}
+```
+
+---
+
+### Step 6 (Optional): Add Bundle in `angular.json`
+
+If you prefer referencing the bundle directly via Angular CLI build options, include the following line:
+
+```json
+"scripts": [
+  "node_modules/@piserve-tech/octa-form-submission-webcomponent/dist/bundle.js"
+]
+```
+---
+
+## 🛠️ Tech Stack
+- **Web Components (Custom Elements API)**
+- **Angular 16+ Compatible**
+- **TypeScript**
+- **Node.js (for asset copy script)**
+
+---
+
+## 📄 License
+**© 2025 Piserve Technologies Pvt Ltd**  
+Licensed under the **MIT License**.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@piserve-tech/octa-form-submission-webcomponent",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "Distributable web component build for form submission (bundle.js, bundle.css, fonts, icons)",
   "main": "dist/bundle.js",
   "style": "dist/bundle.css",
@@ -12,7 +12,6 @@
     "copy-assets.js",
     "sample.html"
   ],
-
   "scripts": {
     "ng": "ng",
     "start": "ng serve",