# Angular5 FormBuilder - Lightweight form builder for form viewer

* [Features](#features)
* [Getting started](#getting-started)
* [Roadmap](#roadmap)
* [API](#api)
* [Custom styles](#custom-styles)
* [Custom themes](#custom-themes)
* [Exports](#exports)
* [Contributors](#contributors)
* [Development](#development)

## Features

* [x] Production Mode (AOT compilation compatibility)
* [x] Custom controls, html, pdf viewer, file upload, menu grid and other templates
* [x] Multiple instances
* [x] Translable content, inputs, fileds, validation, other..
* [ ] Keyboard navigation
* [ ] Custom styles

## Warning

Library is under active development and may have breaking changes until stable 2.0.0 release or subsequent major versions after 2.0.0.

## Getting started

### Step 1: Install `formviewer`

#### NPM

```shell
npm install --save formviewer
```

### Step 2: Import the component module

```js
import { FormViewerModule, FVEnviroment } from 'formviewer';

const fvEnviroment: FVEnviroment = {
  debug: environment.debug,
  apiUrl: environment.apiUrl,
  defaultLanguage: {
    Name: 'English',
    Code: 'en',
    Icon: 'fa fa-globe',
  },
  languages: [{
      Name: 'English',
      Code: 'en',
      Icon: 'fa fa-globe',
    }],
  lowerCaseTranslates: true,
};

@NgModule({
  declarations: [AppComponent],
  imports: [FormViewerModule.forRoot(fvEnviroment)],
  bootstrap: [AppComponent]
})
export class AppModule {}

```

### Step 3: Include assets

To load assets like themes and pdf viewer its ncessary to include assets. IF you're using the Angular CLI, you can add this to your `angular-cli.json`.
_**Note**: Path to `formviewer` bundle must set relative to `basepath` inside `angular-cli.json`._

```js
"apps": {
    ...any,
    "assets": [
        ...any,
        {
          "glob": "**/*",
          "input": "../node_modules/formviewer/assets/",
          "output": "./assets/"
        }
    ],
    ...any,
}
```

### Step 3: Include a theme

For now library doesn't allow you to use a custom theme, but i will be avalaible soon. Keep in touch with us.

## Exports

| Models | Services | Modules |
| ------------- | ------------- | ------------- |
| ApiResponse | ApiService | FormViewerModule |
| Breadcrumbps | ProcessService |
| FVNotificationService | FVNotification |
| ComponentConfig |
| Control |
| ControlType |
| BindingSet |
| Dock |
| DockItem |
| Extract |
| Field |
| Item |
| Model |
| Path |
| Proxy |
| Tab |
| Task |
| FVDoneResponse |
| FVEnviroment |
| GridComponentConfig |
| Store |
| GridColumn |
| EditHandler |
| GridSort |
| GridFilter |
| GridConfig |
| Lang |
| Menu |
| Folder |

## API

### Inputs

| Input  | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| task | `Task` | - | yes | Initial process object |
| language | `Lang` | The one you sent in `fvEnviroment` | no | Sends active language to `formviewer` |
| grid | `boolean` | `false` | no | Let `formviewer` know that you are gonna use instance as a grid |
| hideName | `boolean` | `false` | no | Decides to show process name or not |

### Outputs

| Output  | Type | Description |
| ------------- | ------------- | ------------- |
| (onDone)  | `FVDoneResponse` | Fired when process got status 1 (done) |
| (onLoaded)  | `boolean` | Fired after process been loaded (AfterViewInit) |
| (titleUpdated) | `string`  | Fired when process title got updated |

**Also you may communicate with `FVNotificationService`.** Example:

```js
import { FVNotificationService, FVNotification } from 'formviewer';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less'],
})
export class AppComponent {
  constructor(
    private fvNotification: FVNotificationService,
  ) {
    this.fvNotification.subscription((notify: FVNotification) => {
      const allowedTypes = ['error', 'info', 'success', 'warning'];
      if (allowedTypes.indexOf(notify.type) !== -1) {
        this.handleNotification[notify.type](notify.message, notify.title);
      }
    });
  }
}
```

## Custom styles

Not implemented yet.

## Contributors

| Contributor Name | Contributor Page |
| ------------- | ------------- |
| Grigore Meleca | [grigoreme](https://github.com/grigoreme) |

## Development

### Setup build path

Open `ng-package.json` and setup `dest` to location where you want your build to go. (example: `../myProject/node_modules/formbuilder`)

### Build

```shell
npm run build
```

_**For more information read `docs/developer_guide.md`**_

### Release

To release to npm just run `npm run release`, of course if you have permissions ;)

### Inspiration

Thanks to `ng-select` for README inspiration.