@myhealth-belgium/webcomponent-vaccinations 0.1.4 → 1.0.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# 1.0.1
+
+**Bug fixes:**
+
+- Specified main entry file in `package.json` so the package is installed and loads correctly.
+- Added `cdk-scroll-view-height` input parameter, and added docs for it.
+- Fixed `onprint` not working as intended, now emits a working base64.
+
+# 1.0.0
+
+**Bug fixes:**
+
+- Updated README.md
+- Added cards on small screen.
+- Updated to be compliant with [integration library](https://www.npmjs.com/package/@smals-belgium/myhealth-wc-integration) 5.0.0.
+- Reworked build process to export TypeScript declartion (`index.d.ts`) file.
+- Renamed the package & webcomponent from `mh-webcomponent-vaccinations` to `mh-web-component-vaccinations` to be compliant with requirements.
+
+# 0.1.5
+
+**Bug fixes:**
+
+- Fix issue with Authorizatiion header showing incorrectly.
+
 # 0.1.4
 
 **Bug fixes:**

package/README.md

@@ -6,39 +6,62 @@ All MyHealth webcomponents implement the [MyHealth - Web Component Integration](
 
 ## Usage
 
-To use the MyHealth Webcomponent Vaccinations, simply import the package's JavaScript and CSS into your application:
+To use the MyHealth Webcomponent Vaccinations, import and call the package's boostrap into your application:
 
 ```ts
-import '@myhealth-belgium/webcomponent-vaccinations';
-```
+import { manifest, bootstrap } from '@myhealth-belgium/web-component-vaccinations';
 
-```scss
-@use '@myhealth-belgium/webcomponent-vaccinations/styles.css';
+// 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 print={printToPdf($event)}></mh-web-component-vaccinations>;
 ```
 
-Then, implement the webcomponent in your HTML according to [MyHealth - Web Component Integration](https://www.npmjs.com/package/@smals-belgium/myhealth-wc-integration)'s guidelines. Example:
+To integrate the design-kit, also import the webcomponent's styles in your code. For more information, see **Design kit integration**.
 
-```html
-<mh-webcomponent-vaccinations
-  version="${hostSpecVersion}"
-  language="${Language.EN}"
-  config-name="${Configuration.DEMO}"
-  services="${services}"
-></mh-webcomponent-vaccinations>
+```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.
+
+### 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
+
+`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.                                                                                                                                      |
+| `cdk-scroll-view-height` | `string`       | No       | The height of the CDK scroll with cards that is displayed on mobile. Injected as CSS and should thus be a number followed by any [CSS size unit](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units). F.e.: `500px`. |
+
+| Event     | Type         | Required | Description                             |
+| --------- | ------------ | -------- | --------------------------------------- |
+| `onprint` | `printEvent` | **Yes**  | Emits content that neesd to be printed. |
+
 ### 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"`.
+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
+## 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/webcomponent-vaccinations/styles.css` will execute the mixins below.
+By default, importing `@myhealth-belgium/web-component-vaccinations/styles.css` will execute the mixins below.
 
 ```scss
 @include mh.core();
@@ -48,3 +71,10 @@ By default, importing `@myhealth-belgium/webcomponent-vaccinations/styles.css` w
 ```
 
 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)