import { r, c as s, h as e, H as o, g as l } from "./index.61732cef.js";
import { c as d } 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 = d("tree-navigation-item__link", {
      "tree-navigation-item__link--active": this.active,
      "tree-navigation-item__link--has-icon": Boolean(this.icon)
    });
    return e(o, { key: "73e1ec0900eb38252dad54064f8921e2fb7fe732", role: "none" }, e("li", { key: "449b7c21b32e5a77a516f001f7f4eb4fbc76a53a", 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: "6546a59c4f20b7b73dbe9f1f910e76b8baa24a24", 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: "6d51aa9d9bc5976b69d0b3cdf416e9303787469b", class: "tree-navigation-item__content" }, this.icon && e("swirl-icon", { key: "8ea401c4c6977dfb860b994c948ebc3e7178453c", class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }), e("span", { key: "992b9e628a49d5355e3277ba8e107b0519fd2f28", class: "tree-navigation-item__label" }, e("span", { key: "9a0f18e5ed910b7765a7e945f533df2da82b873c", class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && e("span", { key: "60784488cf2e9c0cae396ffad4e282c671f74eca", class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, e("swirl-icon-chevron-right", { key: "9c2417e2d55901a035a6219f87b36bde26c6900b", size: 16, role: "img", "aria-label": "Expand" })), this.external && e("span", { key: "90c25e1dd6df78279bfde73510b3a785d21c7e3f", class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, e("swirl-icon-open-in-new", { key: "146666d8e39633dea3b9901c475e8a889ff23121", size: 16, role: "img", "aria-label": "External link" }))), this.markAsNew && e("swirl-tag", { key: "fe8911926340fbe7625aa0c5577e8c6176e4866e", class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" }))), this.hasChildren && e("ul", { key: "bc550d93faef943885ed01671ce12e0cf17fcbc3", 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: "851451221ec6ace2887be8c47f8017cd38057f4f" }))));
  }
  get el() {
    return l(this);
  }
  static get watchers() {
    return {
      expanded: [{
        handleExpandedChange: 0
      }]
    };
  }
};
c.style = h();
export {
  c as swirl_tree_navigation_item
};
