@myhealth-belgium/webcomponent-therapeutic-relations 0.1.5 → 1.0.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# 1.0.1
+
+**Bug fixes:**
+
+- Remove infinite scrolling to avoid scrolling in scrolling
+
+# 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-therapeutic-relations` to `mh-web-component-therapeutic-relations` to be compliant with requirements.
+- Added `cdk-scroll-view-height` input parameter, and added docs for it.
+
 # 0.1.5
 
 **Bug fixes:**

package/README.md

@@ -6,39 +6,58 @@ All MyHealth webcomponents implement the [MyHealth - Web Component Integration](
 
 ## Usage
 
-To use the MyHealth Webcomponent Therapeutic Relations, simply import the package's JavaScript and CSS into your application:
+To use the MyHealth Webcomponent Therapeutic Relations, import and call the package's boostrap into your application:
 
 ```ts
-import '@myhealth-belgium/webcomponent-therapeutic-relations';
-```
+import { manifest, bootstrap } from '@myhealth-belgium/web-component-therapeutic-relations';
 
-```scss
-@use '@myhealth-belgium/webcomponent-therapeutic-relations/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-therapeutic-relations></mh-web-component-therapeutic-relations>;
 ```
 
-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-therapeutic-relations
-  version="${hostSpecVersion}"
-  language="${Language.EN}"
-  config-name="${Configuration.DEMO}"
-  services="${services}"
-></mh-webcomponent-therapeutic-relations>
+```ts
+import '@myhealth-belgium/web-component-therapeutic-relations/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.
+
+#### Therapeutic Relations component
+
+`tagName`: `<mh-web-component-therapeutic-relations />`
+
+| 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`. |
+
 ### 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-therapeutic-relations/styles.css` will execute the mixins below.
+By default, importing `@myhealth-belgium/web-component-therapeutic-relations/styles.css` will execute the mixins below.
 
 ```scss
 @include mh.core();
@@ -46,3 +65,10 @@ By default, importing `@myhealth-belgium/webcomponent-therapeutic-relations/styl
 ```
 
 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)

package/index.d.ts

@@ -0,0 +1,3 @@
+import './lib/styles.scss';
+import 'zone.js';
+export { manifest, bootstrap } from './lib/main';

package/lib/components/therapeutic-relations-web.component.d.ts

@@ -0,0 +1,10 @@
+import { OnInit } from '@angular/core';
+import { BaseWebComponent } from '@myhealth-belgium/web-component-utils';
+import * as i0 from "@angular/core";
+export declare class TherapeuticRelationsWebComponent extends BaseWebComponent implements OnInit {
+    private readonly healthcarePartyService;
+    private readonly therapeuticRelationService;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TherapeuticRelationsWebComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TherapeuticRelationsWebComponent, "mh-web-component-therapeutic-relations", never, {}, {}, never, never, true, never>;
+}

package/lib/main.d.ts

@@ -0,0 +1,4 @@
+import { MyHealthModuleBootstrap, MyHealthModuleManifest } from '@smals-belgium/myhealth-wc-integration';
+export declare const tagName: string;
+export declare const manifest: MyHealthModuleManifest;
+export declare const bootstrap: MyHealthModuleBootstrap;

package/lib/mock/healthcare-party-mock.d.ts

@@ -0,0 +1,3 @@
+import { HealthcareOrganisation, HealthcareProfessional } from '@myhealth-belgium/api';
+export declare const healthcarePartyMock: HealthcareProfessional[];
+export declare const healthcareOrginsationMock: HealthcareOrganisation[];

package/lib/mock/therapeutic-relations-mock.d.ts

@@ -0,0 +1,2 @@
+import { TherapeuticRelation } from '@myhealth-belgium/api';
+export declare const therapeuticRelationsMock: TherapeuticRelation[];

package/lib/services/healthcare-party/healthcare-party-webcomponent.service.d.ts

@@ -0,0 +1,19 @@
+import { HealthcareOrganisation, HealthcareOrganisationType, HealthcareProfessional, HealthcareProfessionalType } from '@myhealth-belgium/api';
+import { AbstractHealthcarePartyService } from '@myhealth-belgium/shared-ui';
+import { ConfigName } from '@smals-belgium/myhealth-wc-integration';
+import { Observable } from 'rxjs';
+export declare class HealthcarePartyWebcomponentService implements AbstractHealthcarePartyService {
+    configuration: ConfigName;
+    private readonly healthcarePartyService;
+    setConfigName(configName: ConfigName): void;
+    searchHealthcareParty(params: {
+        name?: string;
+        firstName?: string;
+        func: HealthcareProfessionalType;
+    }): Observable<Array<HealthcareProfessional>>;
+    searchHealthcareOrganisation(params: {
+        name?: string;
+        zip?: string;
+        organisationType: HealthcareOrganisationType;
+    }): Observable<Array<HealthcareOrganisation>>;
+}

package/lib/services/therapeutic-relations/therapeutic-relations-webcomponent.service.d.ts

@@ -0,0 +1,16 @@
+import { CreateTherapeuticRelation, DeleteTherapeuticRelation, TherapeuticRelation } from '@myhealth-belgium/api';
+import { Observable } from 'rxjs';
+import { AbstractTherapeuticRelationService } from '@myhealth-belgium/therapeutic-relations';
+import { ConfigName } from '@smals-belgium/myhealth-wc-integration';
+export declare class TherapeuticRelationsWebcomponentService implements AbstractTherapeuticRelationService {
+    configuration: ConfigName;
+    private readonly therapeuticRelationService;
+    setConfigName(configName: ConfigName): void;
+    getTherapeuticRelations(): Observable<Array<TherapeuticRelation>>;
+    addTherapeuticRelation(params: {
+        body: CreateTherapeuticRelation;
+    }): Observable<string>;
+    deleteTherapeuticRelation(params: {
+        body: DeleteTherapeuticRelation;
+    }): Observable<string>;
+}