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

# MyHealth Webcomponent Contact

The MyHealth Webcomponent Contact provides a contact form.

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

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

// 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-contact
    device-information={{
      osName: 'NAME',
      osVersion: 'VERSION',
      appVersion: 'VERSION',
      deviceBrand: 'BRAND',
      deviceModel: 'MODEL',
    }}
  ></mh-web-component-contact>
);
```

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

#### Contact component

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

| 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. |
| `device-information` | `DeviceInformation` | **Yes**  | A property that gives information about the user's current device, used for extra information in API calls.                      |

| Event        | Type          | Required | Description                                                                                                              |
| ------------ | ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------ |
| `onGoToHome` | `customEvent` | **Yes**  | Event emitted when the user wants to navigate back to the home/main view. Host application should handle the navigation. |

### 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-contact/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-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)