@logo-elements/message-list/logo-elements-message.js

A web component that allows you to show a list of messages, for example, a chat log.

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import { Message } from '@vaadin/message-list/vaadin-message.js';


/**
 * # @logo-elements/message-list
 *
 * A web component that allows you to show a list of messages, for example, a chat log.
 *
 * ```html
 * <logo-elements-message-list></logo-elements-message-list>
 * <script>
 *   document.querySelector('logo-elements-message-list').items = [
 *     { userName: 'Alice', time: '8 Minutes ago', text: 'Lunch at the usual place?' },
 *     { userName: 'Bob', time: '6 Minutes ago', text: `Yeah, let's go together.` },
 *     { userName: 'Alice', time: '2 Minutes ago', text: 'Great! What about you, Charlie?' },
 *     { userName: 'Charlie', time: 'A few seconds ago', text: 'I will meet you there.' }
 *   ];
 * </script>
 * ```
 *
 * ## Installation
 *
 * Install the component:
 *
 * ```sh
 * npm i @logo-elements/message-list -s
 * ```
 *
 * Once installed, import the component in your application:
 *
 * ```js
 * import '@logo-elements/message-list';
 * ```
 *
 */

class LogoElementsMessage extends Message {
  static get is() {
    return 'logo-elements-message';
  }
}

if (!window.customElements.get(LogoElementsMessage.is)) { window.customElements.define(LogoElementsMessage.is, LogoElementsMessage); }