/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit/directives/keyed.js";
import { css, html, nothing } from "lit";
import { createRef, ref } from "lit/directives/ref.js";
import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
import { useDirection } from "@arcgis/lumina/controllers";
import { C as filterDirectChildren, a as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { t as toAriaBoolean } from "../../chunks/aria.js";
import { g as getIconScale } from "../../chunks/component.js";
import { u as useInteractive } from "../../chunks/useInteractive.js";
const CSS = {
  actionsEnd: "actions-end",
  checkbox: "checkbox",
  checkboxContainer: "checkbox-container",
  checkboxLabel: "checkbox-label",
  chevron: "chevron",
  childrenContainer: "children-container",
  iconStart: "icon-start",
  itemExpanded: "item--expanded",
  nodeAndActionsContainer: "node-actions-container",
  nodeContainer: "node-container",
  selectionIcon: "selection-icon"
};
const SLOTS = {
  actionsEnd: "actions-end",
  children: "children"
};
const ICONS = {
  blank: "blank",
  bulletPoint: "bullet-point",
  checkmark: "check",
  checkSquareF: "check-square-f",
  chevronRight: "chevron-right",
  minusSquareF: "minus-square-f",
  square: "square"
};
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-tree-item-spacing-unit: .25rem;--calcite-internal-tree-item-padding-block: .25rem;--calcite-internal-tree-item-children-container-padding: 1.25rem;--calcite-internal-tree-item-line-left-position: .75rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host(:is([scale=s],[scale=m])){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-tree-item-spacing-unit: .5rem;--calcite-internal-tree-item-padding-block: .5rem;--calcite-internal-tree-item-children-container-padding: 1.5rem;--calcite-internal-tree-item-line-left-position: 1rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xs);--calcite-internal-tree-item-spacing-unit: .75rem;--calcite-internal-tree-item-padding-block: .625rem;--calcite-internal-tree-item-children-container-padding: 2.25rem;--calcite-internal-tree-item-line-left-position: 1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host{display:block;max-inline-size:100%;cursor:pointer}:host .children-container ::slotted(*){padding-inline-start:var(--calcite-internal-tree-item-children-container-padding);overflow:hidden}.node-actions-container{display:flex}.node-actions-container .node-container,.node-actions-container .checkbox-container{gap:var(--calcite-internal-tree-item-spacing-unit)}.node-actions-container .node-container{padding-inline:var(--calcite-internal-tree-item-spacing-unit);padding-block:var(--calcite-internal-tree-item-padding-block)}.node-actions-container{color:var(--calcite-tree-text-color, var(--calcite-color-text-1))}.icon-start{--calcite-icon-color: var(--calcite-color-text-3)}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;block-size:100%;inset-inline-start:var(--calcite-internal-tree-item-line-left-position);content:"";background-color:var(--calcite-color-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none!important}::slotted(*):hover{text-decoration:none!important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .checkbox{outline:2px solid transparent;outline-offset:2px}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch;gap:var(--calcite-internal-tree-item-action-spacing)}.checkbox-container{display:flex;align-items:center}.checkbox{line-height:0;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-border-input))}.checkbox-label{pointer-events:none;display:flex;align-items:center}.children-container{display:grid;grid-template-rows:0fr;max-block-size:max-content;opacity:1;position:relative;transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out,grid-template-rows var(--calcite-internal-animation-timing-medium) ease-in-out}.item--expanded>.children-container{grid-template-rows:1fr;opacity:1;max-block-size:max-content}@starting-style{.item--expanded>.children-container{opacity:0;grid-template-rows:0fr}}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .selection-icon{opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-color-border-1)}.node-container:hover .selection-icon,:host([selected]) .node-container:hover .selection-icon,:host(:focus:not([disabled])) .node-container .selection-icon{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{--calcite-internal-tree-item-text-color: var(--calcite-tree-text-color-selected, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-medium);color:var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .icon-start,:host([selected]) .node-container:hover .icon-start{--calcite-icon-color: var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .selection-icon,:host([selected]) .node-container:hover .selection-icon{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .selection-icon{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;flex:0 0 auto;transform:rotate(0)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .selection-icon{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([selected]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children][indeterminate]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
class TreeItem extends LitElement {
  constructor() {
    super();
    this.actionSlotWrapperRef = createRef();
    this.childTree = null;
    this.direction = useDirection();
    this.isSelectionMultiLike = false;
    this.userChangedValue = false;
    this.interactiveContainer = useInteractive(this);
    this.hasEndActions = false;
    this.updateAfterInitialRender = false;
    this.depth = -1;
    this.disabled = false;
    this.expanded = false;
    this.indeterminate = false;
    this.lines = false;
    this.parentExpanded = false;
    this.selected = false;
    this.calciteInternalTreeItemSelect = createEvent({ cancelable: false });
    this.calciteTreeItemCollapse = createEvent({ cancelable: false });
    this.calciteTreeItemExpand = createEvent({ cancelable: false });
    this.calciteTreeItemSelect = createEvent({ cancelable: false });
    this.listen("click", this.onClick);
    this.listen("keydown", this.keyDownHandler);
  }
  static {
    this.properties = { hasEndActions: [16, {}, { state: true }], updateAfterInitialRender: [16, {}, { state: true }], depth: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], hasChildren: [39, {}, { reflect: true, readOnly: true, type: Boolean }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], indeterminate: [7, {}, { reflect: true, type: Boolean }], label: 1, lines: [7, {}, { reflect: true, type: Boolean }], parentExpanded: [5, {}, { type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }] };
  }
  static {
    this.styles = styles;
  }
  get hasChildren() {
    return !!this.childTree;
  }
  connectedCallback() {
    super.connectedCallback();
    this.parentTreeItem = this.el.parentElement?.closest("calcite-tree-item") ?? void 0;
  }
  load() {
    requestAnimationFrame(() => this.updateAfterInitialRender = true);
  }
  willUpdate(changes) {
    this.preWillUpdate();
    if (changes.has("expanded")) {
      if (this.hasUpdated || this.expanded !== false) {
        this.updateChildTree();
      }
      if (this.hasUpdated) {
        if (this.expanded) {
          this.calciteTreeItemExpand.emit();
        } else {
          this.calciteTreeItemCollapse.emit();
        }
      }
    }
    if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
      this.handleSelectedChange(this.selected);
    }
    if (changes.has("selectionMode")) {
      this.getSelectionMode();
    }
  }
  loaded() {
    this.updateAncestorTree();
  }
  handleSelectedChange(value) {
    if (this.selectionMode === "ancestors" && !this.userChangedValue) {
      if (value) {
        this.indeterminate = false;
      }
      this.calciteInternalTreeItemSelect.emit({
        modifyCurrentSelection: true,
        updateItem: false
      });
    }
    if (this.userChangedValue) {
      this.calciteTreeItemSelect.emit();
      this.userChangedValue = false;
    }
  }
  getSelectionMode() {
    this.isSelectionMultiLike = this.selectionMode === "multiple" || this.selectionMode === "multichildren";
  }
  onClick(event) {
    if (this.disabled || this.isActionEndEvent(event)) {
      return;
    }
    const [link] = filterDirectChildren(this.el, "a");
    if (link && event.composedPath()[0].tagName.toLowerCase() !== "a") {
      const target = link.target === "" ? "_self" : link.target;
      window.open(link.href, target);
    }
    this.calciteInternalTreeItemSelect.emit({
      modifyCurrentSelection: this.selectionMode === "ancestors" || this.isSelectionMultiLike,
      updateItem: true
    });
    this.userChangedValue = true;
  }
  iconClickHandler(event) {
    event.stopPropagation();
    this.expanded = !this.expanded;
  }
  childrenClickHandler(event) {
    event.stopPropagation();
  }
  keyDownHandler(event) {
    if (this.isActionEndEvent(event) || event.defaultPrevented) {
      return;
    }
    switch (event.key) {
      case " ":
        this.userChangedValue = true;
        this.calciteInternalTreeItemSelect.emit({
          modifyCurrentSelection: this.isSelectionMultiLike,
          updateItem: true
        });
        event.preventDefault();
        break;
      case "Enter": {
        const link = Array.from(this.el.children).find((el) => el.matches("a"));
        this.userChangedValue = true;
        if (link) {
          link.click();
          this.selected = true;
        } else {
          this.calciteInternalTreeItemSelect.emit({
            modifyCurrentSelection: this.isSelectionMultiLike,
            updateItem: true
          });
        }
        event.preventDefault();
      }
    }
  }
  updateChildTree() {
    const { childTree } = this;
    if (!childTree) {
      return;
    }
    childTree.parentExpanded = this.expanded;
  }
  handleChildrenSlotChange(event) {
    const childTree = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-tree"))[0];
    this.childTree = childTree;
    this.requestUpdate("hasChildren");
    this.updateChildTree();
  }
  isActionEndEvent(event) {
    const composedPath = event.composedPath();
    return composedPath.includes(this.actionSlotWrapperRef.value);
  }
  updateAncestorTree() {
    const parentItem = this.parentTreeItem;
    if (this.selectionMode !== "ancestors" || !parentItem) {
      return;
    }
    if (this.selected) {
      const parentTree = this.el.parentElement;
      if (!parentTree) {
        return;
      }
      const siblings = Array.from(parentTree.children);
      const selectedSiblings = siblings.filter((child) => child.selected);
      if (siblings.length === selectedSiblings.length) {
        parentItem.selected = true;
        parentItem.indeterminate = false;
      } else if (selectedSiblings.length > 0) {
        parentItem.indeterminate = true;
      }
      const childItems = Array.from(this.el.querySelectorAll("calcite-tree-item:not([disabled])"));
      childItems.forEach((item) => {
        item.selected = true;
        item.indeterminate = false;
      });
    } else if (this.indeterminate) {
      const parentItem2 = this.parentTreeItem;
      parentItem2.indeterminate = true;
    }
  }
  actionsEndSlotChangeHandler(event) {
    this.hasEndActions = slotChangeHasAssignedElement(event);
  }
  preWillUpdate() {
    this.depth = 0;
    let parentTree = this.el.closest("calcite-tree");
    if (!parentTree) {
      return;
    }
    this.selectionMode = parentTree.selectionMode;
    this.scale = parentTree.scale || "m";
    this.lines = parentTree.lines;
    let nextParentTree;
    while (parentTree) {
      nextParentTree = parentTree.parentElement?.closest("calcite-tree") ?? null;
      if (nextParentTree === parentTree) {
        break;
      } else {
        parentTree = nextParentTree;
        this.depth = this.depth + 1;
      }
    }
  }
  getSelectionIcon() {
    const { selectionMode, hasChildren } = this;
    if (selectionMode === "single" || selectionMode === "children" || selectionMode === "single-persist") {
      return ICONS.bulletPoint;
    } else if (selectionMode === "multiple" || selectionMode === "multichildren") {
      return ICONS.checkmark;
    } else if (selectionMode === "none" && !hasChildren) {
      return ICONS.blank;
    }
    return null;
  }
  render() {
    const rtl = this.direction === "rtl";
    const selectionIcon = this.getSelectionIcon();
    const checkboxIsIndeterminate = this.hasChildren && this.indeterminate;
    const chevron = this.hasChildren || this.selectionMode === "ancestors" ? html`<calcite-icon class=${safeClassMap({
      [CSS.chevron]: true,
      [CSS_UTILITY.rtl]: rtl
    })} .icon=${this.hasChildren ? ICONS.chevronRight : ICONS.blank} @click=${this.iconClickHandler} .scale=${getIconScale(this.scale)}></calcite-icon>` : null;
    const defaultSlotNode = keyed("default-slot", html`<slot></slot>`);
    const checkbox = this.selectionMode === "ancestors" ? html`<div class=${safeClassMap(CSS.checkboxContainer)}><calcite-icon class=${safeClassMap(CSS.checkbox)} .icon=${this.selected ? ICONS.checkSquareF : checkboxIsIndeterminate ? ICONS.minusSquareF : ICONS.square} .scale=${getIconScale(this.scale)}></calcite-icon></div>` : null;
    const itemIndicator = selectionIcon ? html`<calcite-icon class=${safeClassMap({
      [CSS.selectionIcon]: true,
      [CSS_UTILITY.rtl]: rtl
    })} .icon=${selectionIcon} .scale=${getIconScale(this.scale)}></calcite-icon>` : null;
    const hidden = !(this.parentExpanded || this.depth === 1);
    const isExpanded = this.updateAfterInitialRender && this.expanded;
    const { hasEndActions } = this;
    const slotNode = keyed("actionsEndSlot", html`<slot name=${SLOTS.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot>`);
    const iconStartEl = html`<calcite-icon class=${safeClassMap(CSS.iconStart)} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`;
    this.el.ariaChecked = this.selectionMode === "multiple" || this.selectionMode === "multichildren" || this.selectionMode === "ancestors" ? toAriaBoolean(this.selected) : null;
    this.el.ariaExpanded = this.hasChildren ? toAriaBoolean(isExpanded) : null;
    this.el.inert = hidden;
    this.el.ariaLive = "polite";
    this.el.ariaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist" ? toAriaBoolean(this.selected) : null;
    this.el.role = "treeitem";
    setAttribute(this.el, "tabIndex", this.disabled ? -1 : 0);
    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({ [CSS.itemExpanded]: isExpanded })}><div class=${safeClassMap(CSS.nodeAndActionsContainer)}><div class=${safeClassMap({
      [CSS.nodeContainer]: true,
      [CSS_UTILITY.rtl]: rtl
    })} data-selection-mode=${this.selectionMode ?? nothing}>${chevron}${itemIndicator}${checkbox ? checkbox : null}${this.iconStart ? iconStartEl : null}${checkbox ? html`<label class=${safeClassMap(CSS.checkboxLabel)}>${defaultSlotNode}</label>` : defaultSlotNode}</div><div class=${safeClassMap(CSS.actionsEnd)} .hidden=${!hasEndActions} ${ref(this.actionSlotWrapperRef)}>${slotNode}</div></div><div class=${safeClassMap({
      [CSS.childrenContainer]: true,
      [CSS_UTILITY.rtl]: rtl
    })} @click=${this.childrenClickHandler} .role=${this.hasChildren ? "group" : void 0}><slot name=${SLOTS.children} @slotchange=${this.handleChildrenSlotChange}></slot></div></div>` });
  }
}
customElement("calcite-tree-item", TreeItem);
export {
  TreeItem
};
