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

# MyHealth Webcomponent Reports

The MyHealth Webcomponent Reports provides a comprehensive view of a user's health webcomponent-reports.

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

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

// 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-reports-overview onopen={e => openDetail(e.detail.props.reportSummary) }></mh-web-component-reports-overview>
  <mh-web-component-reports-detail reportSummary={ reportSummary } ondownload={e => downloadReport(e)}></mh-web-component-reports-detail>
)
```

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

#### Reports overview component

`tagName`: `<mh-web-component-reports-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 & `reportSummary` object, to be passed to render detail. |

#### Reports detail component

`tagName`: `<mh-web-component-reports-detail />`

| 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. |
| `reportSummary` | `ReportSummary` | **Yes**  | Received from the reports overview component and needs to be passed to the details component for correct rendering.              |

| Event        | Type                             | Required | Description                                                                                                                 |
| ------------ | -------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- |
| `ondownload` | `{ title: string, url: string }` | No       | Emitted when a user downloads a file from a report. Contains the file title and a data URL with the base64-encoded content. |

### 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-reports/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-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).

<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)