pragma-views2/webcomponents/pragma-app-bar/pragma-app-bar.js

import {PragmaMessagesStates} from '../lib/pragma-messages-states.js';
import {BaseElement} from '../../baremetal/lib/base-element.js';

class PragmaAppBar extends BaseElement {

    get title() {
        return this.getAttribute("title") || this._title;
    }

    set title(newValue) {
        this._title = newValue;
    }

    titleChanged(newValue) {
        this.querySelector("#appTitle").innerText = newValue;
    }

    get errorButtonState() {
        return this.getAttribute("errorButtonState") || this._errorButtonState;
    }

    set errorButtonState(value) {
        this._errorButtonState = value;
        this.setAttribute("errorButtonState", value);
        this._applyErrorButtonStyling(value);
    }

    constructor() {
        super();
    }

    connectedCallback() {
        super.connectedCallback();
        this.initTemplate();
        this.titleChanged(this.title);

        this.menuButton = this.querySelector("#app-bar-button");
        this.assistButton = this.querySelector("#assistant-button");
        this.errorsButton = this.querySelector("#errors-button");

        this.errorButtonStateChangedHandler = this.errorButtonsStateChanged.bind(this);
        window.eventEmitter.on("pragma-messages-state-changed", this.errorButtonStateChangedHandler);

        this.registerEvent(this.menuButton, "click", this.onButtonClick.bind(this));
        this.registerEvent(this.assistButton, "click", this.onAssistButtonClick.bind(this));
        this.registerEvent(this.errorsButton, "click", this.onErrorsButtonClick.bind(this));
    }
    
    disconnectedCallback() {
        this.menuButton.removeEventListener("click", this.buttonClickHandler);
        this.assistButton.removeEventListener("click", this.assistButtonClickHandler);
        this.buttonClickHandler = null;
        this.assistButtonClickHandler = null;
        
        window.eventEmitter.remove("pragma-messages-state-changed", this.errorButtonStateChangedHandler);
        this.errorButtonStateChangedHandler = null;
    }
    

    errorButtonsStateChanged(params) {
        this.errorButtonState = params.state;
    }

    onButtonClick() {
        const menu = document.querySelector('pragma-menu');

        if (menu)
            menu.toggle();
    }

    onAssistButtonClick() {
       window.eventEmitter.emit("toggle-assistant")
    }

    onErrorsButtonClick() {
        window.eventEmitter.postMessage("pragma-messages", {message: "toggle"})
    }

    _applyErrorButtonStyling(state) {
        if (this.errorsButton != undefined) {
            this.errorsButton.className = "";
            switch (state) {
                case PragmaMessagesStates.visible:
                    this.errorsButton.classList.add("open");
                    return;
                case PragmaMessagesStates.hidden:
                    this.errorsButton.classList.add("hidden");
                    return;

            }
        }
    }

    initTemplate() {
        const instance = document.importNode(window.templates.get("pragma-appbar"), true);
        this.appendChild(instance);
    }
}

customElements.define('pragma-appbar', PragmaAppBar);