pragma-views2/webcomponents/pragma-icon-button/pragma-icon-button.js

class PragmaIconButton extends HTMLElement {
    get iconName() {
        return this.getAttribute("icon-name") || this._iconName;
    }

    set iconName(newValue) {
        this._iconName = newValue;
    }

    get ariaLabel() {
        return this.getAttribute("aria-label") || this._ariaLabel;
    }

    set ariaLabel(newValue) {
        this._ariaLabel = newValue;
        this.setAttribute("aria-label", newValue);
    }

    get disabled() {
        return this.getAttribute("disabled") || this._disabled;
    }

    set disabled(newValue) {
        this._disabled = newValue;
        this.setAttribute("aria-disabled", newValue);
    }

    static get observedAttributes() { return ["disabled"]; }

    constructor(){
        super();
    }

    connectedCallback(){
        if (this._isLoaded == true) return;
        this.initTemplate();
        this.setImage();
        this.setAriaAttributes();
        this._isLoaded = true;
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name == "disabled") {
            this.setAttribute("aria-disabled", newValue);
        }
    }

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

    setImage() {
        const useElement = this.querySelector("use");
        useElement.setAttribute("xlink:href", `#${this.iconName}`);
    }

    setAriaAttributes() {
        const ariaLabel = this.ariaLabel;

        if (ariaLabel == undefined) {
            console.error("image-button must have a aria-label attribute set");
        }

        this.setAttribute("role", "button");
    }
}

customElements.define("pragma-icon-button", PragmaIconButton);