import { r, c as s, h as e, H as d, g as o } from "./index.e6beb8d9.js";
import { c as l } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const h = () => ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-state-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-state-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-state-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}", c = class {
  constructor(t) {
    r(this, t), this.expansionChange = s(this, "expansionChange", 7), this.markAsNewLabel = "New", this.level = 1, this.expandable = !0, this.external = !1, this.expanded = !1, this.hasChildren = !1, this.childrenHeight = "0", this.buttonId = `${this.navigationItemId}-button`, this.childrenId = `${this.navigationItemId}-children`, this.onKeyDown = (i) => {
      switch (i.key) {
        case " ":
          i.preventDefault(), this.toggleExpanded(i);
          break;
        case "ArrowRight":
          i.preventDefault(), !this.expanded && this.hasChildren && this.expand();
          break;
        case "ArrowLeft":
          i.preventDefault(), this.expanded && this.collapse();
          break;
      }
    }, this.toggleExpanded = (i) => {
      this.expandable && this.hasChildren && !this.href && (i.preventDefault(), i.stopPropagation(), this.expanded ? this.collapse() : this.expand());
    };
  }
  componentWillLoad() {
    this.checkForChildren();
  }
  componentDidLoad() {
    this.hasChildren && this.expanded && this.updateChildrenHeight();
  }
  updateChildrenHeight() {
    if (this.childrenRef) {
      const t = this.expanded ? `${this.childrenRef.scrollHeight}px` : "0";
      this.childrenHeight = t;
    }
  }
  handleExpandedChange() {
    this.expansionChange.emit(this.expanded), this.updateChildrenHeight();
  }
  checkForChildren() {
    this.hasChildren = Boolean(this.el.querySelector("swirl-tree-navigation-item"));
  }
  async expand() {
    this.expanded || !this.expandable || !this.hasChildren || (this.expanded = !0);
  }
  async collapse() {
    !this.expanded || !this.expandable || !this.hasChildren || (this.expanded = !1);
  }
  render() {
    const t = Boolean(this.href), i = t ? "a" : "button", a = l("tree-navigation-item__link", {
      "tree-navigation-item__link--active": this.active,
      "tree-navigation-item__link--has-icon": Boolean(this.icon)
    });
    return e(d, { key: "7f809f8cff2cd720c39930d30a4957adb89de12f", role: "none" }, e("li", { key: "458c71550f82be540f98a108f1f36fcbd3a47f4e", class: {
      "tree-navigation-item": !0,
      "tree-navigation-item--expanded": this.expanded
    }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : void 0, "aria-level": this.level }, e(i, { key: "236a60fb38271536165ee08b81d043c9dc9da182", onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: a, href: this.href, target: this.target, type: t ? void 0 : "button", id: this.buttonId, "aria-current": this.active ? "page" : void 0, "aria-controls": this.hasChildren ? this.childrenId : void 0, "aria-expanded": this.hasChildren ? this.expanded : void 0 }, e("span", { key: "bfbc38ef3440a38304937050daad910beae86443", class: "tree-navigation-item__content" }, this.icon && e("swirl-icon", { key: "3b54b26da483c953b806edea95e5d1d989405eb9", class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }), e("span", { key: "5fb8e81c2a72d9d38adfd22109a47db4579c2424", class: "tree-navigation-item__label" }, e("span", { key: "76f775f26ed69d0f33762d5df7f9193c03286fe4", class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && e("span", { key: "435dfa1967d07079132dbe40bbc001876d9db0ce", class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, e("swirl-icon-chevron-right", { key: "e750e91db6750512138124982f829eeda5e8475d", size: 16, role: "img", "aria-label": "Expand" })), this.external && e("span", { key: "59dc3bf8541993114501ca129d0747b649c027f7", class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, e("swirl-icon-open-in-new", { key: "9c195d4d23e18d0395d235cea30d4ee37f023336", size: 16, role: "img", "aria-label": "External link" }))), this.markAsNew && e("swirl-tag", { key: "0e8fb37b74c074d2471c7ff56701d1ab61988c3d", class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" }))), this.hasChildren && e("ul", { key: "2f0616ca44093a19e51d5cbdcf508f97e39960ff", class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (n) => this.childrenRef = n, style: {
      height: this.childrenHeight
    } }, e("slot", { key: "d5ff4417a86083ba9919a80c2b65f0114c9aff77" }))));
  }
  get el() {
    return o(this);
  }
  static get watchers() {
    return {
      expanded: [{
        handleExpandedChange: 0
      }]
    };
  }
};
c.style = h();
export {
  c as swirl_tree_navigation_item
};
