/**
 * 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 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 { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
//#region src/components/ui-shell/side-nav-link.ts
/**
* Copyright IBM Corp. 2019, 2023
*
* 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 item.
*
* @element cds-side-nav-link
* @slot link - The link.
* @slot title - The title.
* @slot title-icon-container - The title icon container.
*/
let CDSSideNavLink = class CDSSideNavLink extends FocusMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this.active = false;
		this.href = "";
		this.large = false;
	}
	/**
	* Handles `slotchange` event on the `<slot>` for the title icon.
	*/
	_handleSlotChangeTitleIcon({ target }) {
		this._titleIconContainerNode?.toggleAttribute("hidden", target.assignedNodes().length === 0);
	}
	connectedCallback() {
		if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
		super.connectedCallback();
	}
	render() {
		const { active, href, rel, target, title, _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon } = this;
		return html`
      <a
        part="link"
        class="${classMap({
			[`cds--side-nav__link`]: true,
			[`cds--side-nav__link--current`]: active
		})}"
        href="${href}"
        rel="${ifDefined(rel)}"
        target="${ifDefined(target)}">
        <div
          id="title-icon-container"
          part="title-icon-container"
          hidden
          class="${"cds"}--side-nav__icon">
          <slot
            name="title-icon"
            @slotchange=${handleSlotChangeTitleIcon}></slot>
        </div>
        <span part="title" class="${"cds"}--side-nav__link-text">
          <slot>${title}</slot>
        </span>
      </a>
    `;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = side_nav_default;
	}
};
__decorate([query("#title-icon-container")], CDSSideNavLink.prototype, "_titleIconContainerNode", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSideNavLink.prototype, "active", void 0);
__decorate([property()], CDSSideNavLink.prototype, "href", void 0);
__decorate([property({ reflect: true })], CDSSideNavLink.prototype, "rel", void 0);
__decorate([property({ reflect: true })], CDSSideNavLink.prototype, "target", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSideNavLink.prototype, "large", void 0);
__decorate([property()], CDSSideNavLink.prototype, "title", void 0);
CDSSideNavLink = __decorate([carbonElement(`cds-side-nav-link`)], CDSSideNavLink);
var side_nav_link_default = CDSSideNavLink;
//#endregion
export { side_nav_link_default as default };

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