@egeonu/tree/lib/TreeNodeElement.js

Tree package for building Tree UI compoenent. It includes a fully customizable react component, stand-alone object builder and a custome HTML element. ## Getting Started `npm i @egeonu/tree` ## Usage A few examples of useful commands and/or tasks. #

export class TreeNodeElement extends HTMLElement {
    constructor() {
        // Always call super first in constructor
        super();
        this.displayHolder = "none";
        this.addEventListener('click', e => {
            if (this.disabled || !this.childrenId) {
                return;
            }
            if (this.hiddenChildren) {
                document.getElementById(this.childrenId).style.display = this.displayHolder;
                this.removeAttribute('hiddenChildren');
            }
            else {
                this.displayHolder = document.getElementById(this.childrenId).style.display;
                document.getElementById(this.childrenId).style.display = "none";
                this.setAttribute('hiddenChildren', '');
            }
        });
    }
    set hiddenChildren(val) {
        if (val) {
            this.setAttribute('hiddenChildren', '');
        }
        else {
            this.removeAttribute('hiddenChildren');
        }
    }
    get hiddenChildren() {
        return this.hasAttribute("hiddenChildren");
    }
    get disabled() {
        return this.hasAttribute('disabled');
    }
    set disabled(val) {
        if (val) {
            this.setAttribute('disabled', '');
        }
        else {
            this.removeAttribute('disabled');
        }
    }
    get childrenId() {
        return this.getAttribute("childrenId");
    }
}
TreeNodeElement.observedAttributes = ["childrenId", "hiddenChildren", "disabled"];
window.customElements.define("tree-node", TreeNodeElement);
//# sourceMappingURL=TreeNodeElement.js.map