npm package: @piserve-tech/octa-form-preview-webcomponent
Description: Distributable web component build for form preview (bundle.js, bundle.css, fonts, icons)
Latest version: 1.0.12

# 🧩 Octa Form Preview Web Component

The **Octa Form Preview 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.  

---

## 🚀 Installation

### Step 1: Install the package

```bash
npm i @piserve-tech/octa-form-preview-webcomponent
```

---

## ⚙️ Setup Guide

### Step 2: Copy Required Assets

Run the following command to copy the assets (bundle.js and bundle.css) into your project’s `assets` folder.

```bash
node .\node_modules\@piserve-tech\octa-form-preview-webcomponent\copy-assets.js
```

This script will copy files into:
```
/src/assets/octa-form-preview-webcomponent/
```

---

### Step 3: Add Component in HTML

Use the web component directly in your HTML file or within any framework template:

```html
<octa-form-preview-webcomponent
submissionid="submissionid" formdata="formdata" language="en"></octa-form-preview-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-preview-webcomponent/bundle.css');
  await this.loadScript('./assets/octa-form-preview-webcomponent/bundle.js');
  const el = document.querySelector('octa-form-preview-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-preview-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**.