npm package: @myhealth-belgium/webcomponent-consent
Description: This package exports webcomponents displaying information and providing actions on the informed-consent of a civilian for MyHealth belgium.be
Author: My Health
Latest version: 1.1.0

# MyHealth Webcomponent Consent

The MyHealth Webcomponent Consent provides the ability to grant and revoke the user's informed consent, as well as view a history of the consent.

All MyHealth webcomponents implement the [MyHealth - Web Component Integration](https://www.npmjs.com/package/@smals-belgium/myhealth-wc-integration) and use the [MyHealth - Angular design kit](https://www.npmjs.com/package/@myhealth-belgium/design-kit) package for styling.

## Usage

To use the MyHealth Webcomponent Consent, import and call the package's boostrap into your application:

```ts
import { manifest, bootstrap } from '@myhealth-belgium/web-component-consent';

// Call bootstrap function with your HostSettings & HostServices
bootstrap({ settings: SETTINGS, services: SERVICES });

// Place the webcomponent in your HTML for it to render
return (
  <mh-web-component-consent-overview open={ navigateToInfo() }></mh-web-component-consent-overview>
  <mh-web-component-consent-info></mh-web-component-consent-info>
)
```

To integrate the design-kit, also import the webcomponent's styles in your code. For more information, see **Design kit integration**.

```ts
import '@myhealth-belgium/web-component-consent/styles.css';
```

### Bootstrap settings and services

The `bootstrap()` function is called with 2 objects, `HostSettings` and `HostServices`. These follow the guidelines provided by the [MyHealth - Web Component Integration](https://www.npmjs.com/package/@smals-belgium/myhealth-wc-integration).

The `HostSettings` will define the component's inputs, however these can be overriden by passing these settings as attributes to the component's HTML implementation.

Additionally, there is an optional boolean `useIcons` that can be passed to the bootstrap function. By default, this is set to `false` as icons preferrably are initialized top-level in the app using the [MyHealth - Angular design kit](https://www.npmjs.com/package/@myhealth-belgium/design-kit). Setting this setting to `true` while importing the component's stylesheet, will create a new font for the component's icons.

### Manifest, inputs & outputs

Each MyHealth webcomponent provides a `manifest` constant that is compliant with the guidelines provided by the [MyHealth - Web Component Integration](https://www.npmjs.com/package/@smals-belgium/myhealth-wc-integration).

The manifest can be viewed to see the component(s) inside the package, as well as required additional inputs and outputs that the component may emit.

#### Consent overview component

`tagName`: `<mh-web-component-consent-overview />`

| Property        | Type           | Required | Description                                                                                                                      |
| --------------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `user-language` | `UserLanguage` | No       | The language for the webcomponent interface. Automatically updates the translation service when changed.                         |
| `config-name`   | `ConfigName`   | No       | The configuration name that determines the environment and API endpoints. Set to `"demo"` to use mock data instead of API calls. |

| Event    | Type        | Required | Description                                                                                               |
| -------- | ----------- | -------- | --------------------------------------------------------------------------------------------------------- |
| `onopen` | `openEvent` | **Yes**  | Even to display a webcomponent. Emits `componentTag` property: The `tagName` of the component to display. |

#### Consent info component

`tagName`: `<mh-web-component-consent-info />`

| Property        | Type           | Required | Description                                                                                                                      |
| --------------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `user-language` | `UserLanguage` | No       | The language for the webcomponent interface. Automatically updates the translation service when changed.                         |
| `config-name`   | `ConfigName`   | No       | The configuration name that determines the environment and API endpoints. Set to `"demo"` to use mock data instead of API calls. |

### Mock data

There is an option to display simple mock data with this webcomponent by changing the `config-name` attribute passed to the webcomponent to: `config-name="demo"`, or configure it in `HostSettings`.
When in demo mode, the webcomponent will not make API calls and use standard mock data instead.

## Design kit integration

As stated before, all MyHealth webcomponents use the [MyHealth - Angular design kit](https://www.npmjs.com/package/@myhealth-belgium/design-kit) package.

This means all webcomponents use the core functionality of the design kit, and override the Material components that the webcomponent consumes.

By default, importing `@myhealth-belgium/web-component-consent/styles.css` will execute the mixins below.

```scss
@include mh.core($use-material: true, $symbols-font-url: url('../assets/fonts/MatSymbols-Rounded.ttf'));
@include mh.override-mat-table();
@include mh.override-mat-paginator();
@include mh.override-mat-dialog();
@include mh.override-mat-button();
@include mh.override-mat-button-icon();
```

You **can leave out the styling** if you **provide** these **mixins yourself** using the [MyHealth - Angular design kit](https://www.npmjs.com/package/@myhealth-belgium/design-kit).

```scss
@include mh.core();
@include mh.override-all-mat-components();
```

You **can leave out the styling** if you **provide** these **mixins yourself** using the [MyHealth - Angular design kit](https://www.npmjs.com/package/@myhealth-belgium/design-kit).

<hr>

This package is owned and maintained by:

> [FPS Health](https://www.health.belgium.be/en), Food Chain Safety & Environment
> [Av. Galilée 5 bus 2, 1210 Brussels](https://share.google/UrNwQwxN1O5eFZQaO)