@claudebernard/news-element

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.