npm package: @myhealth-belgium/webcomponent-vaccinations
Description: The MyHealth belgium.be vaccinations webcomponent exports the vaccinations table as a webcomponent that can be used in any JavaScript application.
Author: My Health
Latest version: 1.8.0

# MyHealth Webcomponent Vaccinations

The MyHealth Webcomponent Vaccinations provides a comprehensive view of a user's vaccination history.

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 Vaccinations, import and call the package's boostrap into your application:

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

// 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-vaccinations onprint={printToPdf($event)} full-name="John Doe"></mh-web-component-vaccinations>
);
```

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-vaccinations/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.

#### Vaccinations component (FHIR)

`tagName`: `<mh-web-component-vaccinations />`

| 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. |
| `full-name`     | `string`       | No       | The user's full name, will be displayed in the PDF on the top right side if it is provided.                                      |
| Event           | Type           | Required | Description                                                                                                                      |
| ---------       | ------------   | -------- | ---------------------------------------                                                                                          |
| `onprint`       | `printEvent`   | **Yes**  | Emits content that neesd to be printed.                                                                                          |

### Legacy vaccinations component (KMEHR)

`tagName`: `<mh-web-component-vaccinations-legacy />`

The implementation for this component is similar to the implementation of the non-legacy component:

```ts
import { legacy } from '@myhealth-belgium/web-component-vaccinations';

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

// Place the webcomponent in your HTML for it to render
return (
  <mh-web-component-vaccinations-legacy
    onprint={printToPdf($event)}
    full-name="John Doe"
  ></mh-web-component-vaccinations-legacy>
);
```

All inputs and outputs are identical to the non-legacy component.

### 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-vaccinations/styles.css` will execute the mixins below.

```scss
@include mh.core();
@include mh.override-mat-table();
@include mh.override-mat-form-field();
@include mh.override-mat-button();
```

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)