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

## Using the Form Builder Web Component from npm

1. Install the npm package:
	```sh
	npm install @piserve-tech/form-builder-webcomponent
	```

2. Add the following to your `src/index.html` inside the `<head>` tag:
	```html
	<link rel="stylesheet" href="node_modules/@piserve-tech/form-builder-webcomponent/dist/bundle.css">
	<script src="node_modules/@piserve-tech/form-builder-webcomponent/dist/bundle.js"></script>
	```

3. Copy the assets to your project (run after install):
	```sh
	node ./node_modules/@piserve-tech/form-builder-webcomponent/copy-assets.js
	```
	This will copy all required assets to `src/assets/octa-form-builder-webcomponent`.

4. Use the web component in your Angular templates:
	```html
	<octa-form-builder-webcomponent></octa-form-builder-webcomponent>
	```

5. Make sure your `AppModule` includes `CUSTOM_ELEMENTS_SCHEMA`:
	```typescript
	import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
	// ...existing code...
	@NgModule({
	  // ...existing code...
	  schemas: [CUSTOM_ELEMENTS_SCHEMA]
	})
	export class AppModule {}
	```

No Angular imports are needed from the npm package. The web component is loaded globally via the script tag.
# AngularFormBuilderComponent

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.1.8.

## 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.

## Code scaffolding

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`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

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.

## 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.


## Form Builder Library

Created a library named formBuilder inside the form builder component project.

### Asset Management

To avoid overwriting existing assets, all library assets (icons, fonts, etc.) are copied to a dedicated folder: `src/assets/octa-form-builder-webcomponent`.

After installing the library, run the following command to copy assets:

```
node ./node_modules/@piserve-tech/form-builder-webcomponent/copy-assets.js
```

This will copy all assets from the library's npm package to your app's `src/assets/octa-form-builder-webcomponent` folder.

You can add this command to your project's `postinstall` script for automation:

```
	"scripts": {
		"postinstall": "node ./node_modules/@piserve-tech/form-builder-webcomponent/copy-assets.js"
	}
```

### Library Usage

Inside the library we have created modules and components for the layout design and also a service folder for the API services.

To export a service from the library for accessing it in installed projects, specify the path of the service in the library's package.json file.

If any changes are made to the library, build it using:

```
ng build formBuilder
```

After building, update the version of the library in the package.json file of the library.

To publish the library, open a terminal from the formBuilder folder inside the dist folder and use:

```
npm publish
```
to publish it to the npm registry.