/**
 * 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 HostListener from "../../globals/decorators/host-listener.js";
import HostListenerMixin from "../../globals/mixins/host-listener.js";
import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from "./defs.js";
import side_nav_default$1 from "./side-nav.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
//#region src/components/ui-shell/side-nav.ts
/**
* Copyright IBM Corp. 2019, 2024
*
* 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.
*
* @element cds-custom-side-nav
* @fires cds-custom-header-menu-button-toggled
*   The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.
*/
let CDSSideNav = class CDSSideNav extends HostListenerMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this._hovered = false;
		this._hTransition = null;
		this._handleButtonToggle = async (event) => {
			this.expanded = event.detail.active;
		};
		this.collapseMode = "responsive";
		this.expanded = false;
		this.isNotChildOfHeader = false;
		this.isNotPersistent = false;
	}
	/**
	* Cleans the handle for `transitionend` event listener.
	*/
	_cleanHTransition() {
		if (this._hTransition) this._hTransition = this._hTransition.release();
	}
	/**
	* Force child side nav menus collapsed upon the hover/expanded state of this side nav.
	*/
	_updatedSideNavMenuForceCollapsedState() {
		const { expanded, _hovered: hovered } = this;
		forEach(this.querySelectorAll(this.constructor.selectorMenu), (item) => {
			item.forceCollapsed = !expanded && !hovered;
		});
	}
	connectedCallback() {
		if (!this.hasAttribute("role")) this.setAttribute("role", "navigation");
		super.connectedCallback();
	}
	disconnectedCallback() {
		this._cleanHTransition();
		super.disconnectedCallback();
	}
	updated(changedProperties) {
		const doc = this.getRootNode();
		if (changedProperties.has("collapseMode")) forEach(doc.querySelectorAll(this.constructor.selectorButtonToggle), (item) => {
			item.collapseMode = this.collapseMode;
		});
		if (changedProperties.has("expanded")) {
			const headerItems = doc.querySelectorAll(this.constructor.selectorHeaderItems);
			forEach(doc.querySelectorAll(this.constructor.selectorButtonToggle), (item) => {
				item.active = this.expanded;
			});
			if (this.expanded) forEach(headerItems, (item) => {
				item.setAttribute("tabindex", "-1");
			});
			else forEach(headerItems, (item) => {
				item.removeAttribute("tabindex");
			});
		}
		if (changedProperties.has("isNotChildOfHeader")) forEach(doc.querySelectorAll(this.constructor.selectorButtonToggle), (item) => {
			item.isNotChildOfHeader = this.isNotChildOfHeader;
		});
	}
	/**
	* Handles `blur` event handler on this element.
	*
	* @param event The event.
	* @param event.relatedTarget The event relatedTarget.
	*/
	_handleFocusOut({ relatedTarget }) {
		const { collapseMode } = this;
		if (collapseMode !== "fixed") {
			if (relatedTarget && !this.contains(relatedTarget)) this.expanded = false;
		}
	}
	/**
	* Handles `focus` event handler on this element.
	*
	*/
	_handleFocusIn() {
		const { collapseMode } = this;
		if (collapseMode !== "fixed") this.expanded = true;
	}
	/**
	* Handles the `mouseover` event for the side nav in rail mode.
	*
	*/
	_handleNavMouseOver() {
		const { collapseMode } = this;
		if (collapseMode === "rail") {
			this.expanded = true;
			this._hovered = true;
			this._updatedSideNavMenuForceCollapsedState();
		}
	}
	/**
	* Handles the `mouseout` event for the side nav in rail mode.
	*
	*/
	_handleNavMouseOut() {
		const { collapseMode } = this;
		if (collapseMode === "rail") {
			this.expanded = false;
			this._hovered = false;
			this._updatedSideNavMenuForceCollapsedState();
		}
	}
	/**
	* Handles the `click` event for the side nav overlay.
	*
	*/
	_onOverlayClick() {
		this.expanded = false;
	}
	render() {
		const { collapseMode, expanded, isNotChildOfHeader, isNotPersistent } = this;
		const classes = classMap({
			[`cds-custom--side-nav__navigation`]: true,
			[`cds-custom--side-nav`]: true,
			[`cds-custom--side-nav--expanded`]: expanded,
			[`cds-custom--side-nav--collapsed`]: !expanded && collapseMode === "fixed",
			[`cds-custom--side-nav--rail`]: collapseMode === "rail",
			[`cds-custom--side-nav--ux`]: !isNotChildOfHeader,
			[`cds-custom--side-nav--hidden`]: isNotPersistent
		});
		const overlayClasses = classMap({
			[`cds-custom--side-nav__overlay`]: true,
			[`cds-custom--side-nav__overlay-active`]: expanded
		});
		return html`${this.collapseMode === "fixed" ? null : html`<div
            class="${overlayClasses}"
            @click=${this._onOverlayClick}></div>`}
      <div
        class="${classes}"
        @mouseover="${this._handleNavMouseOver}"
        @mouseout="${this._handleNavMouseOut}">
        <slot></slot>
      </div>`;
	}
	/**
	* A selector that will return the toggle buttons.
	*/
	static get selectorButtonToggle() {
		return `cds-custom-header-menu-button`;
	}
	/**
	* A selector that will return the header name + global action elements.
	*/
	static get selectorHeaderItems() {
		return `cds-custom-header-name, cds-custom-header-global-action`;
	}
	/**
	* A selector that will return side nav focusable items.
	*/
	static get selectorNavItems() {
		return `cds-custom-side-nav-menu, cds-custom-side-nav-menu-item, cds-custom-side-nav-link`;
	}
	/**
	* A selector that will return side nav menus.
	*/
	static get selectorMenu() {
		return `cds-custom-side-nav-menu`;
	}
	/**
	* The name of the custom event fired after the header menu button in the document is toggled upon a user gesture.
	*/
	static get eventButtonToggle() {
		return `cds-custom-header-menu-button-toggled`;
	}
	static {
		this.styles = side_nav_default$1;
	}
};
__decorate([HostListener("parentRoot:eventButtonToggle")], CDSSideNav.prototype, "_handleButtonToggle", void 0);
__decorate([property({
	reflect: true,
	attribute: "collapse-mode"
})], CDSSideNav.prototype, "collapseMode", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSideNav.prototype, "expanded", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-not-child-of-header"
})], CDSSideNav.prototype, "isNotChildOfHeader", void 0);
__decorate([property({
	type: Boolean,
	reflect: true,
	attribute: "is-not-persistent"
})], CDSSideNav.prototype, "isNotPersistent", void 0);
__decorate([HostListener("focusout")], CDSSideNav.prototype, "_handleFocusOut", null);
__decorate([HostListener("focusin")], CDSSideNav.prototype, "_handleFocusIn", null);
CDSSideNav = __decorate([carbonElement(`cds-custom-side-nav`)], CDSSideNav);
var side_nav_default = CDSSideNav;
//#endregion
export { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE, side_nav_default as default };

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