import { r as registerInstance, a as createEvent, h, e as Host, g as getElement } from './index-c8b17ddb.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 NavTree = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.bdsToogleChange = createEvent(this, "bdsToogleChange", 7);
        this.handler = () => {
            this.isOpen = !this.isOpen;
        };
        this.isOpenAftAnimation = false;
        this.collapse = 'single';
        this.isOpen = false;
        this.icon = null;
        this.text = undefined;
        this.secondaryText = null;
        this.dataTest = null;
    }
    async toggle() {
        this.isOpen = !this.isOpen;
    }
    isOpenChanged(value) {
        this.bdsToogleChange.emit({ value: value, element: this.element });
    }
    handleKeyDown(event) {
        if (event.key == 'Enter') {
            this.isOpen = !this.isOpen;
        }
    }
    render() {
        return (h(Host, { key: '81160834f26459c6e209f2846511c8c1a337d7e7' }, h("div", { key: '242643dea0604b6c115a9074482e4bee52fef6b4', tabindex: "0", onKeyDown: this.handleKeyDown.bind(this), class: "focus" }, h("div", { key: 'a639e7262a17c7f02699657ff9514c6c2fc71077', onClick: this.handler, class: {
                nav_main: true,
                nav_main_active: this.isOpen,
            }, "data-test": this.dataTest, "aria-label": this.text + (this.secondaryText && `: ${this.secondaryText}`) }, this.icon && (h("bds-icon", { key: '1fe3eefebab00ef60805bbcc8430b277d8b6171d', class: {
                [`icon-item`]: true,
                [`icon-item-active`]: this.isOpen,
            }, size: "medium", name: this.icon, color: "inherit", theme: this.isOpen ? 'solid' : 'outline' })), h("div", { key: '013e1b36a169b2b4bdc110dde78d2a739faca589', class: "nav_main_text" }, this.text && (h("bds-typo", { key: '6847e2e0802a08f20ea6722f384565dacf59b208', class: "title-item", variant: "fs-14", tag: "span", "line-height": "small", bold: this.isOpen ? 'bold' : 'regular' }, this.text)), this.secondaryText && (h("bds-typo", { key: 'a800b26ebfe03cf421268d8fcacde5442ffd2416', class: "subtitle-item", variant: "fs-12", "line-height": "small", tag: "span", margin: false }, this.secondaryText))), h("div", { key: 'f9c72e255ff0d71a89775a1c69e716da84d267ff', class: "nav_main_content" }, h("slot", { key: 'd37a4aed58e7c562ea242e80160e233385869163', name: "header-content" })), h("bds-icon", { key: '1bdbd0ba741283e99705e087145ee007432b8aff', name: "arrow-down", class: { [`nav_main_arrow`]: true, [`nav_main_arrow_active`]: this.isOpen } }))), h("div", { key: '1d44c8dea1b29998a6d75a78195691fe6fd4c391', class: {
                accordion: true,
                accordion_open: this.isOpen,
            } }, h("div", { key: '56e35e9e1a96bbfd85f956c0dddb9264953e9910', class: "container" }, h("slot", { key: '91ebc7b043402c8197bd9bc446b10ab01834050b' })))));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "isOpen": ["isOpenChanged"]
    }; }
};
NavTree.style = navTreeCss;

export { NavTree as bds_nav_tree };

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