# Vega Angular

> Angular specific wrapper for [@globalpayments/vega](https://www.npmjs.com/package/@globalpayments/vega)

## How to use

For installation guidance, please refer to https://vega.globalpayments.com/guides/getting-started-developers#angular

## For development

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.0.

This is the Angular specific wrapper for [@globalpayments/vega](https://github.com/heartlandpayments/Vega/tree/main/vega-stencil)  with the following file structure (we only list some important file path):
```text
...
├── src
│   ├── lib
│   │   ├── components-module.ts
│   │   └── stencil-generated
│   │       ├── angular-component-lib
│   │       │   └── utils.ts
│   │       └── components.ts => 
│   ...
...
```
* `./src/lib/components-module.ts`: angular module used to export auto-generated angular directive proxies
* `./src/lib/stencil-generated/components.ts`: stencil auto-generated angular directive proxies which can be used as angular components after import
* `./src/lib/stencil-generated/angular-component-lib/utils.ts`: utility class including proxy related functions used by `components.ts`


### Pre-requisite
Make sure all the dependencies has been installed by running 
```bash
> npm run install
```

### Consuming change in `vega-stencil`
Once you build `vega-stencil` with command `npm run build`, stencil will auto populate corresponding component classes into
`./src/lib/stencil-generated/components.ts`

**keeping in mind, if there is a new component created, you need to modify `./src/lib/components-module.ts` to import the new component**

### Get started
To generate the compiled lib version for `vega-angular` please run 
```bash
> ng build vega-angular
```
And the built lib can be found in `./dist/vega-angular`

In order to use the unpublished lib `vega-angular` directly for your angular app package, you can choose one of the following options:
1. Directly install the local package into your angular app package by running:  
    ```bash
    > npm install file:<relative path to "./dist/vega-angular">
    ```
2. Use [npm symlink](https://docs.npmjs.com/cli/v8/commands/npm-link) by running 
    ```bash
    > npm link
    ```
   **Note:** you might also want to  setup the symlink for vega-stencil as it is a direct dependency of vega-angular, so you can consume the local change in both package for your angular app 

### Troubleshoot
If you encounter the following error 
```bash
✖ Compiling with Angular sources in Ivy partial compilation mode.
../../projects/vega-angular/src/lib/stencil-generated/value-accessor.ts:4:1 - error NG2004: Directive ValueAccessor has no selector, please add it!

  4 @Directive({})
    ~~~~~~~~~~~~~~
  5 export class ValueAccessor implements ControlValueAccessor {
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
 38   }
    ~~~
 39 }
    ~
```
this is a known issue in stencil https://github.com/ionic-team/stencil-ds-output-targets/issues/174, please add the selector `vega-value-accessor` like below to fix this issue:
```ts
@Directive({ selector: 'vega-value-accessor' })
export class ValueAccessor implements ControlValueAccessor {
    ...
}
```

### Publish the package
Please check [our general wiki](https://github.com/heartlandpayments/Vega/blob/main/readme.md#publish-package)