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

# MyHealth Webcomponent Sumehr

The MyHealth Webcomponent Sumehr provides a comprehensive view of a user's health webcomponent-sumehr.

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

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

// 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-sumehr></mh-web-component-sumehr>;
```

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

#### Sumehr component

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

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

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

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)