import { Host, h } from "@stencil/core";
export class NavTreeItem {
    constructor() {
        this.navTreeParent = null;
        this.navTreeChild = null;
        this.itensElement = null;
        this.handler = () => {
            if (this.navTreeParent.collapse == 'single') {
                for (let i = 0; i < this.itensElement.length; i++) {
                    if (this.itensElement[i] != this.element)
                        this.itensElement[i].isOpen = false;
                }
            }
            this.toggle();
        };
        this.collapse = 'single';
        this.icon = null;
        this.text = undefined;
        this.secondaryText = null;
        this.isOpen = false;
        this.dataTest = null;
    }
    async toggle() {
        this.isOpen = !this.isOpen;
    }
    isOpenChanged(value) {
        this.bdsToogleChange.emit({ value: value, element: this.element });
        // if (this.navTreeChild) this.navTreeChild.isOpen = value;
    }
    componentWillLoad() {
        this.navTreeParent =
            (this.element.parentElement.tagName == 'BDS-NAV-TREE' && this.element.parentElement) ||
                ('BDS-NAV-TREE-ITEM' && this.element.parentElement);
        this.navTreeChild = this.element.querySelector('bds-nav-tree-item');
    }
    componentWillRender() {
        this.itensElement = this.navTreeParent.getElementsByTagName('bds-nav-tree-item');
    }
    handleKeyDown(event) {
        if (event.key == 'Enter') {
            this.handler();
        }
    }
    render() {
        return (h(Host, { key: '7833faaeba864062e8dcc17bb9d20277d7c3aa12' }, h("div", { key: 'c8aef0ad388a77540a9c0a3421de084ae2440137', tabindex: "0", onKeyDown: this.handleKeyDown.bind(this), class: "focus" }, h("div", { key: '71eb555fd6115ce64a7c3e112dbf185c9f4364e3', class: {
                nav_tree_item: true,
                nav_tree_item_active: this.isOpen,
                nav_tree_item_button: !this.navTreeChild,
                nav_tree_item_button_active: !this.navTreeChild && this.isOpen,
            }, onClick: () => this.handler(), "data-test": this.dataTest, "aria-label": this.text + (this.secondaryText && `: ${this.secondaryText}`) }, this.icon && (h("bds-icon", { key: '569501f503e4fd7e4681cd37c03762f22c0e37be', class: {
                [`icon-item`]: true,
                [`icon-item-active`]: this.isOpen,
            }, size: "medium", name: this.icon, color: "inherit", theme: this.isOpen ? 'solid' : 'outline' })), h("div", { key: 'b5430dfa42766ad7bfc347ef1423e15a23613947', class: "nav_tree_item_content" }, this.text && (h("bds-typo", { key: '5c7e754417a2f9da6d471f120674b1c2386f825f', class: "title-item", variant: "fs-14", tag: "span", "line-height": "small", bold: this.isOpen ? 'bold' : 'regular' }, this.text)), this.secondaryText && (h("bds-typo", { key: '62687453aefb5e9151575d5e26b4b28cdc704cc7', class: "subtitle-item", variant: "fs-12", "line-height": "small", tag: "span", margin: false }, this.secondaryText))), h("div", { key: '7abb0ba82b082de6a36d84724407213ce6edf510', class: "nav_tree_item_slot" }, h("slot", { key: '32474d88af2321b27b42e86c157ed193e7585ae5', name: "header-content" })), this.navTreeChild && (h("bds-icon", { key: 'f8b0d18b563686e22b85bb7585b019c8f65bf62a', class: { [`icon-arrow`]: true, [`icon-arrow-active`]: this.isOpen }, name: "arrow-down" })))), this.navTreeChild && (h("div", { key: 'af59f445e75690d48ee958ed89dd80ffbe2142d6', class: {
                accordion: true,
                accordion_open: this.isOpen,
            } }, h("div", { key: '9ebb75c3ddf69b9d9d9ab173c43efe3679ea6735', class: "container" }, h("slot", { key: '92e88d71a34c5555c0b02227e87fbc9f827947dd' }))))));
    }
    static get is() { return "bds-nav-tree-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["nav-tree.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["nav-tree.css"]
        };
    }
    static get properties() {
        return {
            "collapse": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "collapses",
                    "resolved": "\"multiple\" | \"single\"",
                    "references": {
                        "collapses": {
                            "location": "local",
                            "path": "/home/runner/work/blip-ds/blip-ds/src/components/nav-tree/nav-tree-item.tsx",
                            "id": "src/components/nav-tree/nav-tree-item.tsx::collapses"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Focus Selected. Used to add title in header accordion."
                },
                "attribute": "collapse",
                "reflect": false,
                "defaultValue": "'single'"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Icon. Used to add icon in list item."
                },
                "attribute": "icon",
                "reflect": false,
                "defaultValue": "null"
            },
            "text": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Text. Used to insert a text in the display item."
                },
                "attribute": "text",
                "reflect": false
            },
            "secondaryText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "SecondaryText. Used to insert a secondaryText in the display item."
                },
                "attribute": "secondary-text",
                "reflect": false,
                "defaultValue": "null"
            },
            "isOpen": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Active. Used to define when the item is highlighted."
                },
                "attribute": "is-open",
                "reflect": true,
                "defaultValue": "false"
            },
            "dataTest": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Data test is the prop to specifically test the component action object."
                },
                "attribute": "data-test",
                "reflect": false,
                "defaultValue": "null"
            }
        };
    }
    static get events() {
        return [{
                "method": "bdsToogleChange",
                "name": "bdsToogleChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "When de activation of component change, the event are dispache."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "element"; }
    static get watchers() {
        return [{
                "propName": "isOpen",
                "methodName": "isOpenChanged"
            }];
    }
}
//# sourceMappingURL=nav-tree-item.js.map
