import{tree_item_styles_default as e}from"./chunk.HDC6JDQL.js";import{SlCheckbox as t}from"./chunk.ICXWI24A.js";import{SlSpinner as i}from"./chunk.JPV2F5NK.js";import{getAnimation as n,setDefaultAnimation as a}from"./chunk.STXFIMXZ.js";import{animateTo as s,shimKeyframesHeightAuto as l,stopAnimations as r}from"./chunk.W5IOVX7A.js";import{LocalizeController as o}from"./chunk.2A3352EO.js";import{SlIcon as d}from"./chunk.M4HIRIJ5.js";import{watch as h}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as c}from"./chunk.Z7XDKKOD.js";import{__decorateClass as p}from"./chunk.6M63UXML.js";import{classMap as m}from"../../../../lit/directives/class-map.js";import{html as b}from"../../../../lit/index.js";import{live as x}from"../../../../lit/directives/live.js";import{property as y,query as f,state as u}from"../../../../lit/decorators.js";import{when as g}from"../../../../lit/directives/when.js";var _=class extends c{constructor(){super(...arguments),this.localize=new o(this),this.indeterminate=!1,this.isLeaf=!1,this.loading=!1,this.selectable=!1,this.expanded=!1,this.selected=!1,this.disabled=!1,this.lazy=!1}static isTreeItem(e){return e instanceof Element&&"treeitem"===e.getAttribute("role")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","treeitem"),this.setAttribute("tabindex","-1"),this.isNestedItem()&&(this.slot="children")}firstUpdated(){this.childrenContainer.hidden=!this.expanded,this.childrenContainer.style.height=this.expanded?"auto":"0",this.isLeaf=!this.lazy&&0===this.getChildrenItems().length,this.handleExpandedChange()}async animateCollapse(){this.emit("sl-collapse"),await r(this.childrenContainer);const{keyframes:e,options:t}=n(this,"tree-item.collapse",{dir:this.localize.dir()});await s(this.childrenContainer,l(e,this.childrenContainer.scrollHeight),t),this.childrenContainer.hidden=!0,this.emit("sl-after-collapse")}isNestedItem(){const e=this.parentElement;return!!e&&_.isTreeItem(e)}handleChildrenSlotChange(){this.loading=!1,this.isLeaf=!this.lazy&&0===this.getChildrenItems().length}willUpdate(e){e.has("selected")&&!e.has("indeterminate")&&(this.indeterminate=!1)}async animateExpand(){this.emit("sl-expand"),await r(this.childrenContainer),this.childrenContainer.hidden=!1;const{keyframes:e,options:t}=n(this,"tree-item.expand",{dir:this.localize.dir()});await s(this.childrenContainer,l(e,this.childrenContainer.scrollHeight),t),this.childrenContainer.style.height="auto",this.emit("sl-after-expand")}handleLoadingChange(){this.setAttribute("aria-busy",this.loading?"true":"false"),this.loading||this.animateExpand()}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false")}handleSelectedChange(){this.setAttribute("aria-selected",this.selected?"true":"false")}handleExpandedChange(){this.isLeaf?this.removeAttribute("aria-expanded"):this.setAttribute("aria-expanded",this.expanded?"true":"false")}handleExpandAnimation(){this.expanded?this.lazy?(this.loading=!0,this.emit("sl-lazy-load")):this.animateExpand():this.animateCollapse()}handleLazyChange(){this.emit("sl-lazy-change")}getChildrenItems({includeDisabled:e=!0}={}){return this.childrenSlot?[...this.childrenSlot.assignedElements({flatten:!0})].filter((t=>_.isTreeItem(t)&&(e||!t.disabled))):[]}render(){const e="rtl"===this.localize.dir(),t=!this.loading&&(!this.isLeaf||this.lazy);return b`
      <div
        part="base"
        class="${m({"tree-item":!0,"tree-item--expanded":this.expanded,"tree-item--selected":this.selected,"tree-item--disabled":this.disabled,"tree-item--leaf":this.isLeaf,"tree-item--has-expand-button":t,"tree-item--rtl":"rtl"===this.localize.dir()})}"
      >
        <div
          class="tree-item__item"
          part="
            item
            ${this.disabled?"item--disabled":""}
            ${this.expanded?"item--expanded":""}
            ${this.indeterminate?"item--indeterminate":""}
            ${this.selected?"item--selected":""}
          "
        >
          <div class="tree-item__indentation" part="indentation"></div>

          <div
            part="expand-button"
            class=${m({"tree-item__expand-button":!0,"tree-item__expand-button--visible":t})}
            aria-hidden="true"
          >
            ${g(this.loading,(()=>b` <sl-spinner></sl-spinner> `))}
            <slot class="tree-item__expand-icon-slot" name="expand-icon">
              <sl-icon library="system" name=${e?"chevron-left":"chevron-right"}></sl-icon>
            </slot>
            <slot class="tree-item__expand-icon-slot" name="collapse-icon">
              <sl-icon library="system" name=${e?"chevron-left":"chevron-right"}></sl-icon>
            </slot>
          </div>

          ${g(this.selectable,(()=>b`
                <sl-checkbox
                  part="checkbox"
                  exportparts="
                    base:checkbox__base,
                    control:checkbox__control,
                    control--checked:checkbox__control--checked,
                    control--indeterminate:checkbox__control--indeterminate,
                    checked-icon:checkbox__checked-icon,
                    indeterminate-icon:checkbox__indeterminate-icon,
                    label:checkbox__label
                  "
                  class="tree-item__checkbox"
                  ?disabled="${this.disabled}"
                  ?checked="${x(this.selected)}"
                  ?indeterminate="${this.indeterminate}"
                  tabindex="-1"
                ></sl-checkbox>
              `))}

          <slot class="tree-item__label" part="label"></slot>
        </div>

        <div class="tree-item__children" part="children" role="group">
          <slot name="children" @slotchange="${this.handleChildrenSlotChange}"></slot>
        </div>
      </div>
    `}},C=_;C.styles=e,C.dependencies={"sl-checkbox":t,"sl-icon":d,"sl-spinner":i},p([u()],C.prototype,"indeterminate",2),p([u()],C.prototype,"isLeaf",2),p([u()],C.prototype,"loading",2),p([u()],C.prototype,"selectable",2),p([y({type:Boolean,reflect:!0})],C.prototype,"expanded",2),p([y({type:Boolean,reflect:!0})],C.prototype,"selected",2),p([y({type:Boolean,reflect:!0})],C.prototype,"disabled",2),p([y({type:Boolean,reflect:!0})],C.prototype,"lazy",2),p([f("slot:not([name])")],C.prototype,"defaultSlot",2),p([f("slot[name=children]")],C.prototype,"childrenSlot",2),p([f(".tree-item__item")],C.prototype,"itemElement",2),p([f(".tree-item__children")],C.prototype,"childrenContainer",2),p([f(".tree-item__expand-button slot")],C.prototype,"expandButtonSlot",2),p([h("loading",{waitUntilFirstUpdate:!0})],C.prototype,"handleLoadingChange",1),p([h("disabled")],C.prototype,"handleDisabledChange",1),p([h("selected")],C.prototype,"handleSelectedChange",1),p([h("expanded",{waitUntilFirstUpdate:!0})],C.prototype,"handleExpandedChange",1),p([h("expanded",{waitUntilFirstUpdate:!0})],C.prototype,"handleExpandAnimation",1),p([h("lazy",{waitUntilFirstUpdate:!0})],C.prototype,"handleLazyChange",1),a("tree-item.expand",{keyframes:[{height:"0",opacity:"0",overflow:"hidden"},{height:"auto",opacity:"1",overflow:"hidden"}],options:{duration:250,easing:"cubic-bezier(0.4, 0.0, 0.2, 1)"}}),a("tree-item.collapse",{keyframes:[{height:"auto",opacity:"1",overflow:"hidden"},{height:"0",opacity:"0",overflow:"hidden"}],options:{duration:200,easing:"cubic-bezier(0.4, 0.0, 0.2, 1)"}});export{C as SlTreeItem};