/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import "../../globals/settings.js";
import { carbonElement } from "../../globals/decorators/carbon-element.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import iconLoader from "../../globals/internal/icon-loader.js";
import tree_view_default from "./tree-view.scss.js";
import { LitElement, html } from "lit";
import { property, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import CaretDown16 from "@carbon/icons/es/caret--down/16.js";
//#region src/components/tree-view/tree-node.ts
/**
* Copyright IBM Corp. 2025, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Tree node.
*
* @element cds-custom-tree-node
* @fires eventSelected
*   The name of the custom event fired when node is selected.
* @fires eventToggled
*   The name of the custom event fired when a node is toggled.
*/
let CDSTreeNode = class CDSTreeNode extends LitElement {
	constructor(..._args) {
		super(..._args);
		this._hasChildren = false;
		this._hasIcon = false;
		this._handleStyles = () => {
			const { _depth: depth, _hasChildren: hasChildren, _hasIcon: hasIcon } = this;
			const calcOffset = () => {
				if (hasChildren && hasIcon) return depth + 1 + depth * .5;
				if (hasChildren) return depth + 1;
				if (hasIcon) return depth + 2 + depth * .5;
				return depth + 2.5;
			};
			const label = this.shadowRoot.querySelector(`.cds-custom--tree-node__label`);
			if (label) {
				label.style.marginInlineStart = `-${calcOffset()}rem`;
				label.style.paddingInlineStart = `${calcOffset()}rem`;
			}
		};
		this._handleToggleClick = (event) => {
			const { disabled, href } = this;
			if (disabled) return;
			event.stopPropagation();
			if (href) event.preventDefault();
			this.isExpanded = !this.isExpanded;
			if (this.hasAttribute("aria-expanded")) this.setAttribute("aria-expanded", String(this.isExpanded));
		};
		this.active = false;
		this.disabled = false;
		this._depth = 0;
		this.isExpanded = false;
		this.id = Math.random().toString(16).slice(2);
		this.selected = false;
	}
	/**
	* Handles `slotchange` event.
	*/
	_handleSlotChange({ target }) {
		const { _depth: depth, disabled } = this;
		const items = target.assignedNodes().filter((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === `cds-custom-tree-node`);
		items.forEach((item) => {
			item._depth = depth + 1;
			item.disabled = disabled;
		});
		this._hasChildren = items.length > 0;
		if (this._hasChildren) this.setAttribute("parent", "");
		this.requestUpdate();
	}
	/**
	* Handles icon's `slotchange` event.
	*/
	_handleIconSlotChange({ target }) {
		this._hasIcon = target.assignedNodes().length > 0;
		if (this._hasIcon) this.setAttribute("has-icon", "");
		this.requestUpdate();
	}
	connectedCallback() {
		super.connectedCallback();
		this._hasChildren = Array.from(this.children).some((node) => node.tagName.toLowerCase() === `cds-custom-tree-node`);
		this._hasIcon = Array.from(this.children).some((node) => node.getAttribute("slot") === "icon");
		if (!this.hasAttribute("role") && !this.href) this.setAttribute("role", "treeitem");
		if (this._hasChildren && !this.href) this.setAttribute("aria-expanded", String(this.isExpanded));
		if (!this.hasAttribute("aria-label")) this.setAttribute("aria-label", this.label);
	}
	_dispatchSelectedEvent(value) {
		const { eventSelected } = this.constructor;
		this.dispatchEvent(new CustomEvent(eventSelected, {
			bubbles: true,
			composed: true,
			detail: { value }
		}));
	}
	_dispatchToggledEvent(value, expanded) {
		const { eventToggled } = this.constructor;
		this.dispatchEvent(new CustomEvent(eventToggled, {
			bubbles: true,
			composed: true,
			detail: {
				value,
				expanded
			}
		}));
	}
	updated(changedProperties) {
		if (changedProperties.has("_depth")) this._handleStyles();
		if (changedProperties.has("selected")) {
			if (!this.href) this.setAttribute("aria-selected", String(!this.href ? this.disabled ? void 0 : this.selected : void 0));
			if (this.selected) this._dispatchSelectedEvent(this.label);
		}
		if (changedProperties.has("active") && !this.href) this.setAttribute("aria-current", String(!this.href ? this.active || void 0 : this.active ? "page" : void 0));
		if (changedProperties.has("disabled")) this.setAttribute("aria-disabled", String(this.disabled));
		if (changedProperties.has("isExpanded")) this._dispatchToggledEvent(this.label, this.isExpanded);
	}
	render() {
		const { disabled, isExpanded, href, id, label, onClick, _hasChildren: hasChildren, _handleIconSlotChange: handleIconSlotChange, _handleSlotChange: handleSlotChange, _handleToggleClick: handleToggleClick } = this;
		let toggleClasses = `cds-custom--tree-parent-node__toggle-icon`;
		if (isExpanded) toggleClasses += `cds-custom--tree-parent-node__toggle-icon--expanded`;
		const linkClasses = classMap({
			[`cds-custom--tree-node`]: true,
			[`cds-custom--tree-node--active`]: this.active,
			[`cds-custom--tree-node--disabled`]: disabled,
			[`cds-custom--tree-node--selected`]: this.selected,
			[`cds-custom--tree-node--with-icon`]: this._hasIcon,
			[`cds-custom--tree-leaf-node`]: !this._hasChildren,
			[`cds-custom--tree-parent-node`]: this._hasChildren
		});
		const subTreeClasses = classMap({
			[`cds-custom--tree-node__children`]: true,
			[`cds-custom--tree-node__hidden`]: !isExpanded
		});
		return html`
      ${!hasChildren ? html`
            ${href ? html`<a
                  class=${linkClasses}
                  href=${!disabled ? href : void 0}
                  role="treeitem"
                  ?aria-disabled=${disabled}
                  aria-current=${!this.href ? this.active || void 0 : this.active ? "page" : void 0}
                  tabindex=${disabled ? -1 : void 0}
                  @click=${onClick}>
                  <div id="label" class="${"cds-custom"}--tree-node__label">
                    <slot
                      name="icon"
                      @slotchange=${handleIconSlotChange}></slot>
                    ${label}
                  </div>
                </a>` : html` <div id="label" class="${"cds-custom"}--tree-node__label">
                  <slot name="icon" @slotchange=${handleIconSlotChange}></slot>
                  ${label}
                </div>`}
          ` : html`
            ${href ? html` <a
                    role="treeitem"
                    class=${linkClasses}
                    aria-expanded=${!!isExpanded}
                    aria-owns="subtree-id-${id}"
                    href=${!disabled ? href : void 0}
                    tabindex=${disabled ? -1 : void 0}
                    @click=${onClick}>
                    <div id="label" class="${"cds-custom"}--tree-node__label">
                      <span
                        class="${"cds-custom"}--tree-parent-node__toggle"
                        ?disabled=${disabled}
                        @click=${handleToggleClick}>
                        ${iconLoader(CaretDown16, { class: toggleClasses })}
                      </span>
                      <span class="${"cds-custom"}--tree-node__label__details">
                        <slot
                          name="icon"
                          @slotchange=${handleIconSlotChange}></slot>
                        ${label}
                      </span>
                    </div>
                  </a>
                  <ul
                    id="subtree-id-${id}"
                    role="group"
                    class="${subTreeClasses}">
                    <slot @slotchange=${handleSlotChange}></slot>
                  </ul>` : html`<div id="label" class="${"cds-custom"}--tree-node__label">
                    <span
                      class="${"cds-custom"}--tree-parent-node__toggle"
                      ?disabled=${disabled}
                      @click=${handleToggleClick}>
                      ${iconLoader(CaretDown16, { class: toggleClasses })}
                    </span>
                    <span class="${"cds-custom"}--tree-node__label__details">
                      <slot
                        name="icon"
                        @slotchange=${handleIconSlotChange}></slot>
                      ${label}
                    </span>
                  </div>
                  <ul
                    id="subtree-id-${id}"
                    role="group"
                    class="${subTreeClasses}">
                    <slot @slotchange=${handleSlotChange}></slot>
                  </ul>`}
          `}
    `;
	}
	/**
	* The name of the custom event fired when node is selected.
	*/
	static get eventSelected() {
		return `cds-custom-tree-node-selected`;
	}
	/**
	* The name of the custom event fired when a node is toggled
	*/
	static get eventToggled() {
		return `cds-custom-tree-node-toggled`;
	}
	static {
		this.styles = tree_view_default;
	}
};
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTreeNode.prototype, "active", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTreeNode.prototype, "disabled", void 0);
__decorate([state()], CDSTreeNode.prototype, "_depth", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-expanded"
})], CDSTreeNode.prototype, "isExpanded", void 0);
__decorate([property({})], CDSTreeNode.prototype, "href", void 0);
__decorate([property({})], CDSTreeNode.prototype, "id", void 0);
__decorate([property({})], CDSTreeNode.prototype, "label", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSTreeNode.prototype, "selected", void 0);
__decorate([property({ type: Function })], CDSTreeNode.prototype, "onClick", void 0);
CDSTreeNode = __decorate([carbonElement(`cds-custom-tree-node`)], CDSTreeNode);
var tree_node_default = CDSTreeNode;
//#endregion
export { tree_node_default as default };

//# sourceMappingURL=tree-node.js.map