@myhealth-belgium/webcomponent-vaccinations 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/README.md +22 -11
- package/assets/chunk-JP3WSU66-BSZumlyM.js +9 -0
- package/assets/chunk-OD5JTMHG-KDTrD4bV.js +5 -0
- package/assets/main-WlfhpNsQ.js +1254 -0
- package/main.js +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
- package/assets/main-QuW_GdkG.js +0 -1266
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
# 0.1.1
|
|
2
|
+
|
|
3
|
+
**Bug fixes:**
|
|
4
|
+
|
|
5
|
+
- Renamed the webcomponent from `mh-vaccinations-webcomponent` to `mh-webcomponent-vaccinations` to adhere with package naming.
|
|
6
|
+
- Renamed `configname` input attribute to `configName`. This results to `config-name` in the HTML attribute due to (Angular Elements' mapping)[https://angular.dev/guide/elements#mapping].
|
|
7
|
+
- Implemented (MyHealth - Web Component Integration)[https://www.npmjs.com/package/@smals-belgium/myhealth-wc-integration] version `1.3` for demo data.
|
|
8
|
+
- Expanded and corrected README.md doccumentation
|
|
9
|
+
|
|
1
10
|
# 0.1.0
|
|
2
11
|
|
|
3
12
|
Initial version.
|
package/README.md
CHANGED
|
@@ -1,35 +1,35 @@
|
|
|
1
|
-
# MyHealth Vaccinations
|
|
1
|
+
# MyHealth Webcomponent Vaccinations
|
|
2
2
|
|
|
3
|
-
The MyHealth Vaccinations
|
|
3
|
+
The MyHealth Webcomponent Vaccinations provides a comprehensive view of a user's vaccination history.
|
|
4
4
|
|
|
5
|
-
All MyHealth webcomponents implement the [MyHealth
|
|
5
|
+
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.
|
|
6
6
|
|
|
7
7
|
## Usage
|
|
8
8
|
|
|
9
|
-
To use the MyHealth Vaccinations
|
|
9
|
+
To use the MyHealth Webcomponent Vaccinations, simply import the package's JavaScript and CSS into your application:
|
|
10
10
|
|
|
11
11
|
```ts
|
|
12
|
-
import '@myhealth-belgium/vaccinations';
|
|
12
|
+
import '@myhealth-belgium/webcomponent-vaccinations';
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
```scss
|
|
16
|
-
@use '@myhealth-belgium/vaccinations/styles.css';
|
|
16
|
+
@use '@myhealth-belgium/webcomponent-vaccinations/styles.css';
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
Then, implement the webcomponent in your HTML according to [MyHealth
|
|
19
|
+
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:
|
|
20
20
|
|
|
21
21
|
```html
|
|
22
|
-
<mh-vaccinations
|
|
22
|
+
<mh-webcomponent-vaccinations
|
|
23
23
|
version="${hostSpecVersion}"
|
|
24
24
|
language="${Language.EN}"
|
|
25
|
-
|
|
25
|
+
config-name="${Configuration.DEMO}"
|
|
26
26
|
services="${services}"
|
|
27
|
-
></mh-vaccinations
|
|
27
|
+
></mh-webcomponent-vaccinations>
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
### Mock data
|
|
31
31
|
|
|
32
|
-
There is an option to display simple mock data with this webcomponent by changing the `
|
|
32
|
+
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"`.
|
|
33
33
|
When in demo mode, the webcomponent will not make API calls and use standard mock data instead.
|
|
34
34
|
|
|
35
35
|
### Design kit integration
|
|
@@ -37,3 +37,14 @@ When in demo mode, the webcomponent will not make API calls and use standard moc
|
|
|
37
37
|
As stated before, all MyHealth webcomponents use the [MyHealth - Angular design kit](https://www.npmjs.com/package/@myhealth-belgium/design-kit) package.
|
|
38
38
|
|
|
39
39
|
This means all webcomponents use the core functionality of the design kit, and override the Material components that the webcomponent consumes.
|
|
40
|
+
|
|
41
|
+
By default, importing `@myhealth-belgium/webcomponent-vaccinations/styles.css` will execute the mixins below.
|
|
42
|
+
|
|
43
|
+
```scss
|
|
44
|
+
@include mh.core();
|
|
45
|
+
@include mh.override-mat-table();
|
|
46
|
+
@include mh.override-mat-form-field();
|
|
47
|
+
@include mh.override-mat-button();
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
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).
|