@piserve-tech/octa-form-submission-webcomponent 1.0.25 → 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/copy-assets.js

@@ -0,0 +1,47 @@
+// Script to copy assets for web component distribution
+const fs = require('fs');
+const path = require('path');
+
+function copyRecursiveSync(src, dest) {
+  if (!fs.existsSync(src)) return;
+  const stats = fs.statSync(src);
+  if (stats.isDirectory()) {
+    if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+    fs.readdirSync(src).forEach(child => {
+      copyRecursiveSync(path.join(src, child), path.join(dest, child));
+    });
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+}
+
+
+// Determine source: local dist or node_modules
+let srcAssets, srcBundleJs, srcBundleCss;
+if (fs.existsSync(path.join(__dirname, 'dist', 'assets'))) {
+  srcAssets = path.join(__dirname, 'dist', 'assets');
+  srcBundleJs = path.join(__dirname, 'dist', 'bundle.js');
+  srcBundleCss = path.join(__dirname, 'dist', 'bundle.css');
+} else {
+  srcAssets = path.join(__dirname, 'node_modules', '@piserve-tech', 'octa-form-submission-webcomponent', 'dist', 'assets');
+  srcBundleJs = path.join(__dirname, 'node_modules', '@piserve-tech', 'octa-form-submission-webcomponent', 'dist', 'bundle.js');
+  srcBundleCss = path.join(__dirname, 'node_modules', '@piserve-tech', 'octa-form-submission-webcomponent', 'dist', 'bundle.css');
+}
+const destAssets = path.join(process.cwd(), 'src', 'assets', 'octa-form-submission-webcomponent');
+
+copyRecursiveSync(srcAssets, destAssets);
+
+// Also copy bundle.js and bundle.css
+const destBundleJs = path.join(destAssets, 'bundle.js');
+const destBundleCss = path.join(destAssets, 'bundle.css');
+
+if (fs.existsSync(srcBundleJs)) {
+  fs.copyFileSync(srcBundleJs, destBundleJs);
+  console.log('bundle.js copied to src/assets/octa-form-submission-webcomponent');
+}
+if (fs.existsSync(srcBundleCss)) {
+  fs.copyFileSync(srcBundleCss, destBundleCss);
+  console.log('bundle.css copied to src/assets/octa-form-submission-webcomponent');
+}
+
+console.log('Assets and bundles copied to src/assets/octa-form-submission-webcomponent');

package/dist/assets/icons/copy-icon.svg

@@ -0,0 +1,6 @@
+<svg width="38" height="36" viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.5" y="0.5" width="37" height="35" rx="5.5" fill="white" stroke="#D8D8D8"/>
+    <rect x="13.998" y="13.9922" width="14.0058" height="14.0058" rx="2" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M13.9982 23.998H11.9974C10.8924 23.998 9.99658 23.1022 9.99658 21.9972V11.993C9.99658 10.888 10.8924 9.99219 11.9974 9.99219H22.0016C23.1066 9.99219 24.0024 10.888 24.0024 11.993V13.9939" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+    

package/dist/assets/icons/delete-icon.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 38 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="35px" height="35px" stroke="#D8D8D8" fill="white" x="0.5" y="0.5" rx="5.5"/>
+    <path d="M11.4165 12.2142H26.5832" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M25.5 12.2139V23.597C25.5 24.7404 24.5304 25.6666 23.3333 25.6666H14.6667C13.4696 25.6666 12.5 24.7404 12.5 23.597V12.2139"/>
+    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M22.25 8.85091H15.75"/>
+    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M16.8332 16.3535V21.5276"/>
+    <path stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round" d="M21.1667 16.3535V21.5276"/>
+  </svg>

package/dist/assets/icons/left_arrow.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="9" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.61426 0.769531L1.72218 4.41345L5.67398 7.99251" stroke="#8E9AA0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/icons/right_arrow.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="9" viewBox="0 0 7 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.7666 8.03125L5.64422 4.37194L1.67827 0.808564" stroke="#8E9AA0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>