elements

An element providing Claude Bernard's latest news about health.

Documentation

See the full documentation for Lit at docs.claudebernard.fr.

You can play with a full demo.

Installation

npm install --save @claudebernard/news-element

Usage

Angular

Import as ES modules in the app.module.ts file.

import '@claudebernard/news-element';

In the html file that will use the custom element :

<bcb-news [hideHeader]="true" (onNewsClicked)="handleClick($event)"></bcb-news>

To test click event :

handleClick(news) {
    alert(news.detail.data.newsTitle);
}

Vue.js

Import as ES modules in the App.vue file.

import '@claudebernard/news-element';

In the html file that will use the custom element :

<bcb-news id="bcb-news" :hideHeader="true"></bcb-news>

To paste in App.vue or in the file that will use the custom element :

<script setup lang="ts">
import { onMounted } from 'vue'

const handleClick = (event) => {
  alert(event.detail.data.newsTitle);
} 

// To test click event :

onMounted(() => {
  const el = document.getElementById('bcb-news');
  el.addEventListener('onNewsClicked', (e) => {
    handleClick(e);
  });
});
</script>

React

Import as ES modules in the App.tsx file. Don't forget to do 'npm install' after importing '@lit-labs/react'.

import {BcbNews} from '@claudebernard/news-element';
import {createComponent} from '@lit-labs/react';
import React, { useState } from 'react'

To paste in App.tsx file or in the file that will use the custom element :

export const BcbNewsReact = createComponent({
  react: React,
  tagName: 'bcb-news',
  elementClass: BcbNews, 
  events: {
    onNewsClicked: 'onNewsClicked'
  }
});

To paste in the return part of the .tsx file :

<BcbNewsReact hideHeader={true} onNewsClicked={(news) => handleClick(news)}></BcbNewsReact>

To test click event :

const handleClick = (news) => {
  alert(news.detail.data.newsTitle)
}

Vanilla JS :

Import as ES modules in the App.js file.

import '@claudebernard/news-element';

To paste in the html part of the file that will use the custom element :

<bcb-news id="bcb-news" hideHeader></bcb-news>

To test click event :

let bcbNewsComponent = document.getElementById('bcb-news');
bcbNewsComponent.addEventListener('onNewsClicked', function(event) {
  alert(event.detail.data.newsTitle);
});

Attributes

| Name | Type | Default | Description | |---------------|----------|-------------|---------------------------------------------------------------| | url | string | | The URL to call the Claude Bernard API. | | `productCode` | `string` | | To use if you want to display all the news for a specific product. | | newsCount | number | 5 | The number of news to display. | | newsSubject | string | 0 | To display all the news whose have the type present in the list. | | viewMode | string | carousel | The style of the custom element, "static" is the other possible value. | | imageReverse| boolean| false | The position of the picture. Default left, right if true. | | hideNewsType| boolean| false | To display or not the type of the news. | | dateFormat | string | DD/MM/YYYY| The date format to use. | | hideHeader | boolean| false | To display or not a header above the custom element. | | showImage | boolean| false | To display or not the image associated to the custom element. | | hideMoreLabel| boolean| false | To display or not the text to redirect to another page. | | hideLabNews | boolean| false | To display or not the news with laboratory type. | | labNewsCount| number | 1 | The number of laboratory news to display. Only is hideLabNews is false. | | navigation | | | Coming soon. |

Events

| Name | Description | |-----------------|----------------------------------------------------| | onNewsClicked | The action to be done when clicking on the custom element. |

Browser support

Browsers without native custom element support require a polyfill.

• [*] Chrome
• [*] Firefox
• [*] Safari
• [*] Microsoft Edge

Custom element checklist

• [] Public documentation (docs portal)
• [*] Functional on Angular, React, Vue
• [] Unit tested
• [] Code quality
• [] Changelog with semantic release
• [] Available in offline mode
• [] Best practices compliant
• [] Validated by QA
• [] Publicly available
• [] Based on FHIR
• [] Example on storybook
• [] Available demo
• [] i18n
• [] Browser support section
• [] EOL section

Contributing

Read through our contributing guidelines to learn about our submission process, coding rules, and more.

License

Copyright of Cegedim. See LICENSE for details.