/**
 * 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 { forEach } from "../../globals/internal/collection-helpers.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 FocusMixin from "../../globals/mixins/focus.js";
import side_nav_default from "./side-nav.scss.js";
import { LitElement, html } from "lit";
import { property, query } from "lit/decorators.js";
import ChevronDown20 from "@carbon/icons/es/chevron--down/20.js";
//#region src/components/ui-shell/side-nav-menu.ts
/**
* Copyright IBM Corp. 2019, 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.
*/
/**
* Side nav menu.
*
* @element cds-custom-side-nav-menu
* @fires cds-custom-side-nav-menu-beingtoggled
*   The name of the custom event fired before this side nav menu is being toggled upon a user gesture.
*   Cancellation of this event stops the user-initiated action of toggling this side nav menu.
* @fires cds-custom-side-nav-menu-toggled
*   The name of the custom event fired after this side nav menu is toggled upon a user gesture.
* @slot title-icon - The icon.
* @csspart expando The expando.
* @csspart expando-icon-container The expando icon container.
* @csspart expando-icon The expando icon.
* @csspart title The title.
* @csspart title-icon-container The title icon container.
* @csspart menu-body The menu body.
*/
let CDSSideNavMenu = class CDSSideNavMenu extends FocusMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this._hasIcon = false;
		this.active = false;
		this.expanded = false;
		this.large = false;
		this.forceCollapsed = false;
		this.title = "";
	}
	/**
	* Handles user-initiated toggle request of this side nav menu.
	*
	* @param expanded The new expanded state.
	*/
	_handleUserInitiatedToggle(expanded = !this.expanded) {
		const { eventBeforeToggle, eventToggle } = this.constructor;
		const init = {
			bubbles: true,
			cancelable: true,
			composed: true,
			detail: { expanded }
		};
		if (this.dispatchEvent(new CustomEvent(eventBeforeToggle, init))) {
			this.expanded = expanded;
			this.dispatchEvent(new CustomEvent(eventToggle, init));
		}
	}
	/**
	* Handler for the `click` event on the expando button.
	*/
	_handleClickExpando(e) {
		e.currentTarget.focus();
		this._handleUserInitiatedToggle();
	}
	/**
	* Handles `slotchange` event on the non-named `<slot>`.
	*/
	_handleSlotChange({ target }) {
		const { _hasIcon: hasIcon } = this;
		forEach(target.assignedNodes(), (item) => {
			if (item.nodeType === Node.ELEMENT_NODE) item.toggleAttribute(this.constructor.attribItemHasIcon, hasIcon);
		});
	}
	/**
	* Handles `slotchange` event on the `<slot>` for the title icon.
	*/
	_handleSlotChangeTitleIcon({ target }) {
		const constructor = this.constructor;
		const hasIcon = target.assignedNodes().length > 0;
		this._hasIcon = hasIcon;
		this._titleIconContainerNode?.toggleAttribute("hidden", !hasIcon);
		forEach(this.querySelectorAll(constructor.selectorItem), (item) => {
			item.toggleAttribute(constructor.attribItemHasIcon, hasIcon);
		});
	}
	connectedCallback() {
		if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
		super.connectedCallback();
	}
	updated(changedProperties) {
		if (changedProperties.has("expanded")) {
			const { selectorItem } = this.constructor;
			const { expanded } = this;
			forEach(this.querySelectorAll(selectorItem), (elem) => {
				elem.tabIndex = expanded ? 0 : -1;
			});
		}
	}
	render() {
		const { expanded, forceCollapsed, title, _handleClickExpando: handleClickExpando, _handleSlotChange: handleSlotChange, _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon } = this;
		return html`
      <button
        type="button"
        part="expando"
        aria-haspopup="true"
        aria-expanded="${String(expanded && !forceCollapsed)}"
        class="${"cds-custom"}--side-nav__submenu"
        @click=${handleClickExpando}>
        <div
          id="title-icon-container"
          part="title-icon-container"
          hidden
          class="${"cds-custom"}--side-nav__icon">
          <slot
            name="title-icon"
            @slotchange=${handleSlotChangeTitleIcon}></slot>
        </div>
        <span part="title" class="${"cds-custom"}--side-nav__submenu-title"
          >${title}</span
        >
        <div
          part="expando-icon-container"
          class="${"cds-custom"}--side-nav__icon ${"cds-custom"}--side-nav__icon--small ${"cds-custom"}--side-nav__submenu-chevron">
          ${iconLoader(ChevronDown20, { part: "expando-icon" })}
        </div>
      </button>
      <ul part="menu-body" class="${"cds-custom"}--side-nav__menu">
        <slot @slotchange=${handleSlotChange}></slot>
      </ul>
    `;
	}
	static {
		this.attribItemHasIcon = "parent-has-icon";
	}
	/**
	* A selector that will return the menu items.
	*/
	static get selectorItem() {
		return `cds-custom-side-nav-menu-item`;
	}
	/**
	* The name of the custom event fired before this side nav menu is being toggled upon a user gesture.
	* Cancellation of this event stops the user-initiated action of toggling this side nav menu.
	*/
	static get eventBeforeToggle() {
		return `cds-custom-side-nav-menu-beingtoggled`;
	}
	/**
	* The name of the custom event fired after this side nav menu is toggled upon a user gesture.
	*/
	static get eventToggle() {
		return `cds-custom-side-nav-menu-toggled`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = side_nav_default;
	}
};
__decorate([query("#title-icon-container")], CDSSideNavMenu.prototype, "_titleIconContainerNode", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSideNavMenu.prototype, "active", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSideNavMenu.prototype, "expanded", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSideNavMenu.prototype, "large", void 0);
__decorate([property({
	type: Boolean,
	reflect: true,
	attribute: "force-collapsed"
})], CDSSideNavMenu.prototype, "forceCollapsed", void 0);
__decorate([property()], CDSSideNavMenu.prototype, "title", void 0);
CDSSideNavMenu = __decorate([carbonElement(`cds-custom-side-nav-menu`)], CDSSideNavMenu);
var side_nav_menu_default = CDSSideNavMenu;
//#endregion
export { side_nav_menu_default as default };

//# sourceMappingURL=side-nav-menu.js.map