'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-abfd8c86.js');

const navTreeCss = ":host{display:block;margin:-4px;padding:4px;width:100%;position:relative;overflow:hidden;-webkit-transition:height 0.5s;-moz-transition:height 0.5s;transition:height 0.5s}.nav_main{display:-ms-flexbox;display:flex;gap:8px;-ms-flex-align:center;align-items:center;padding:8px;position:relative;cursor:pointer;border-radius:8px;border:1px solid transparent;overflow:hidden}.nav_main:before{content:\"\";position:absolute;inset:0}.nav_main:hover:before{background-color:var(--color-content-default, #454545);opacity:0.08}.nav_main:active:before{background-color:var(--color-content-default, #454545);opacity:0.16}.nav_main:hover,.nav_main_active{border-color:var(--color-pressed, rgba(0, 0, 0, 0.16))}.nav_main_active:before{background-color:var(--color-content-default, #454545);border-color:var(--color-hover, rgba(0, 0, 0, 0.08));opacity:0.08}.nav_main .icon-item{position:relative;color:var(--color-content-default, #454545)}.nav_main .icon-item-active{color:var(--color-primary, #1e6bf1)}.nav_main_text{position:relative;display:-ms-flexbox;display:flex;gap:2px;-ms-flex-direction:column;flex-direction:column}.nav_main_text .title-item{color:var(--color-content-default, #454545)}.nav_main_text .subtitle-item{color:var(--color-content-default, #454545)}.nav_main_content{width:100%;-ms-flex-negative:99999;flex-shrink:99999}.nav_main_arrow{-webkit-transition:all ease 0.3s;-moz-transition:all ease 0.3s;transition:all ease 0.3s;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.nav_main_arrow_active{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.accordion{display:grid;grid-template-rows:0fr;-webkit-transition:all ease 0.5s;-moz-transition:all ease 0.5s;transition:all ease 0.5s}.accordion_open{grid-template-rows:1fr;padding:8px 0}.accordion .container{overflow:hidden;position:relative;padding-left:23px}.accordion .container:before{content:\"\";position:absolute;width:2px;inset:0;left:23px;top:8px;bottom:8px;border-radius:8px;background-color:var(--color-hover, rgba(0, 0, 0, 0.08));opacity:0.8}.nav_tree_item{position:relative;display:-ms-flexbox;display:flex;gap:8px;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;cursor:pointer;padding:8px;padding-left:22px}.nav_tree_item .icon-item{position:relative;color:var(--color-content-default, #454545)}.nav_tree_item .icon-item-active{color:var(--color-primary, #1e6bf1)}.nav_tree_item_content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.nav_tree_item_slot{width:100%;-ms-flex-negative:99999;flex-shrink:99999}.nav_tree_item:before{content:\"\";position:absolute;width:2px;inset:0;top:8px;bottom:8px;border-radius:8px;background-color:transparent;-webkit-transition:background-color ease 0.8s;-moz-transition:background-color ease 0.8s;transition:background-color ease 0.8s}.nav_tree_item:hover:before{background-color:var(--color-pressed, rgba(0, 0, 0, 0.16));-webkit-transition:background-color ease 0.3s;-moz-transition:background-color ease 0.3s;transition:background-color ease 0.3s}.nav_tree_item_active:before{background-color:var(--color-primary, #1e6bf1);-webkit-transition:background-color ease 0.3s;-moz-transition:background-color ease 0.3s;transition:background-color ease 0.3s}.nav_tree_item_active:hover:before{background-color:var(--color-primary, #1e6bf1);-webkit-transition:background-color ease 0.3s;-moz-transition:background-color ease 0.3s;transition:background-color ease 0.3s}.nav_tree_item .icon-arrow{position:relative;-webkit-transition:all ease 0.3s;-moz-transition:all ease 0.3s;transition:all ease 0.3s;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.nav_tree_item .icon-arrow-active{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.nav_tree_item_button{padding:8px;margin-left:14px;border-radius:8px;border:1px solid transparent}.nav_tree_item_button:before{left:-15px}.nav_tree_item_button:after{content:\"\";position:absolute;inset:0;border-radius:8px;background-color:transparent}.nav_tree_item_button:hover,.nav_tree_item_button_active{border-color:var(--color-pressed, rgba(0, 0, 0, 0.16))}.nav_tree_item_button:hover:after,.nav_tree_item_button_active:after{background-color:var(--color-content-default, #454545);opacity:0.08}.nav_tree_item_button:active{border-color:var(--color-pressed, rgba(0, 0, 0, 0.16))}.nav_tree_item_button:active:after{background-color:var(--color-content-default, #454545);opacity:0.16}.focus{position:relative}.focus:before{content:\"\";position:absolute;inset:-4px;border:2px solid transparent;border-radius:4px}.focus:focus-visible{outline:none}.focus:focus-visible:before{border-color:var(--color-focus, #c226fb)}";

const NavTreeItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.bdsToogleChange = index.createEvent(this, "bdsToogleChange", 7);
        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 (index.h(index.Host, { key: '7833faaeba864062e8dcc17bb9d20277d7c3aa12' }, index.h("div", { key: 'c8aef0ad388a77540a9c0a3421de084ae2440137', tabindex: "0", onKeyDown: this.handleKeyDown.bind(this), class: "focus" }, index.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 && (index.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' })), index.h("div", { key: 'b5430dfa42766ad7bfc347ef1423e15a23613947', class: "nav_tree_item_content" }, this.text && (index.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 && (index.h("bds-typo", { key: '62687453aefb5e9151575d5e26b4b28cdc704cc7', class: "subtitle-item", variant: "fs-12", "line-height": "small", tag: "span", margin: false }, this.secondaryText))), index.h("div", { key: '7abb0ba82b082de6a36d84724407213ce6edf510', class: "nav_tree_item_slot" }, index.h("slot", { key: '32474d88af2321b27b42e86c157ed193e7585ae5', name: "header-content" })), this.navTreeChild && (index.h("bds-icon", { key: 'f8b0d18b563686e22b85bb7585b019c8f65bf62a', class: { [`icon-arrow`]: true, [`icon-arrow-active`]: this.isOpen }, name: "arrow-down" })))), this.navTreeChild && (index.h("div", { key: 'af59f445e75690d48ee958ed89dd80ffbe2142d6', class: {
                accordion: true,
                accordion_open: this.isOpen,
            } }, index.h("div", { key: '9ebb75c3ddf69b9d9d9ab173c43efe3679ea6735', class: "container" }, index.h("slot", { key: '92e88d71a34c5555c0b02227e87fbc9f827947dd' }))))));
    }
    get element() { return index.getElement(this); }
    static get watchers() { return {
        "isOpen": ["isOpenChanged"]
    }; }
};
NavTreeItem.style = navTreeCss;

exports.bds_nav_tree_item = NavTreeItem;

//# sourceMappingURL=bds-nav-tree-item.cjs.entry.js.map