Source: components/Message.js

/**
 * @module components/Message.js
 * @name Message
 * @copyright 2024 3Liz
 * @author BOISTEAULT Nicolas
 * @license MPL-2.0
 */

import {html, render} from 'lit-html';

/**
 * @class
 * @name Message
 * @augments HTMLElement
 */
export default class Message extends HTMLElement {
    constructor() {
        super();

        this.message = this.innerHTML;
        this.innerHTML = '';
        this.buttontext = this.getAttribute('buttontext') || '';
        this.type = this.getAttribute('type') || 'info';
        this.close = this.getAttribute('close') || true;
        this.timeout = this.getAttribute('timeout');
        this.placement = this.getAttribute('placement') || 'top';
        this.allowhtml = this.getAttribute('allowhtml') || true;
    }

    connectedCallback() {
        this._template = () => html`
            <button class="btn btn-sm" @click=${() => {
                // Remove previous message if any
                if (this.element) {
                    this.element.remove();
                    this.element = undefined;
                } else {
                    this.element = lizMap.addMessage(this.message, this.type, this.close, this.timeout);
                    this.element.bind('closed',  () => {
                        this.element = undefined;
                    });
                }
            }
            }>${this.buttontext}</button>
        `;

        render(this._template(), this);

        $('button', this).tooltip({
            title: this.message,
            placement: this.placement,
            html: this.allowhtml
        });
    }
}