@claudebernard/news-element NPM

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.