MyHealth Webcomponent Contact

The MyHealth Webcomponent Contact provides a contact form.

All MyHealth webcomponents implement the MyHealth - Web Component Integration and use the MyHealth - Angular design kit package for styling.

Usage

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

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.

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.

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

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

@include mh.core(
  $use-material: true,
  $use-local-fonts: 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.

This package is owned and maintained by:

FPS Health, Food Chain Safety & Environment Av. Galilée 5 bus 2, 1210 Brussels