# elements

This library was generated with [Nx](https://nx.dev).

## Running unit tests

Run `nx test elements` to execute the unit tests.

# Aztrix elements

This repository contains reusable web components.

## Install

```shell
npm install @aztrix/elements
```

## Usage

### different webcomponents usages

#### aztrix-card

```javascript
import '@aztrix/elements/card';
```

```html
<aztrix-card profile-id="your profile id"></aztrix-card>
```

#### aztrix-subscribe

```javascript
import '@aztrix/elements/subscribe';
```

##### STANDARD mode

```html
<aztrix-subscribe proposal-id="your proposal id"></aztrix-subscribe>
```

##### COMPACT mode

```html
<aztrix-subscribe proposal-id="your proposal id" mode="COMPACT"></aztrix-subscribe>
```

#### aztrix-subscribe-button

```javascript
import '@aztrix/elements/subscribe-button';
```

```html
<aztrix-subscribe-button
  proposal-id="your proposal id"
  label="button text"
></aztrix-subscribe-button>
```

#### aztrix-subscribe-form [DEPRECATED]

In the future, this webcomponent will be deprecated. For a webcomponent with a similar experience, use the [aztrix-subscribe](#aztrix-subscribe) in compact mode

```html
<aztrix-subscribe-form proposal-id="your proposal id"></aztrix-subscribe-form>
```

```javascript
import '@aztrix/elements/subscribe-form';
```

You can set **externalAgreementProperties** and **subscriberMetadata** by setting those as an attribute in Javascript.
Example:

```javascript
const subscribeForm = document.getElementsByTagName('aztrix-subscribe-form')[0];
subscribeForm.setAttribute(
  'prefill-properties',
  JSON.stringify([
    {
      requestedPropertyId: '0',
      type: 'EMAIL',
      value: 'test@info.be',
    },
    {
      requestedPropertyId: '2',
      type: 'ADDRESS',
      subType: 'STREET',
      value: 'TestStreet',
    },
  ])
);

subscribeForm.setAttribute(
  'subscriber-metadata',
  JSON.stringify([
    {
      key: 'listingId',
      value: '1234',
    },
  ])
);
```

If you want disable the proposal verification in the form add **verification="false"** to the susbcribe-form. (only applicable if the proposal already has verification)

```html
<aztrix-subscribe-form proposal-id="your proposal id" verification="false"></aztrix-subscribe-form>
```

We implemented an event that you can use to notify the user that the subscription is done.
You can do something like this in JavaScript:

```javascript
const subscribeForm = document.getElementsByTagName('aztrix-subscribe-form')[0];
subscribeForm.addEventListener('subscribed', function (e) {
  console.log(e.detail.proposal);
  console.log(e.detail.agreement);
});
```
