/**
 * 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 { MenuContext } from "./menu-context.js";
import menu_item_default from "./menu-item.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { consume } from "@lit/context";
//#region src/components/menu/menu-item-selectable.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.
*/
/**
* Menu Item Selectable.
*
* @element cds-custom-menu-item-selectable
*/
let CDSmenuItemSelectable = class CDSmenuItemSelectable extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.selected = false;
		this._handleClick = (e) => {
			this.selected = !this.selected;
			const init = {
				bubbles: true,
				cancelable: true,
				composed: true,
				detail: { triggeredBy: e.target }
			};
			if (this.dispatchEvent(new CustomEvent(this.constructor.eventOnChange, init))) this.dispatchEvent(new CustomEvent(this.constructor.eventOnChange, init));
		};
		this._handleKeydown = (e) => {
			if (e.key === "Enter" || e.key === " ") this._handleClick(e);
		};
	}
	/**
	* The name of the custom event fired when the selection state changes.
	*/
	static get eventOnChange() {
		return `cds-custom-item-changed`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	connectedCallback() {
		super.connectedCallback();
		this.addEventListener("keydown", this._handleKeydown);
	}
	firstUpdated() {
		const menuItemSelectable = this.shadowRoot?.querySelector(`cds-custom-menu-item`);
		if (menuItemSelectable) menuItemSelectable.addEventListener("keydown", this._handleKeydown);
		this.context.updateFromChild({ hasSelectableItems: true });
	}
	render() {
		const { label, selected, _handleClick: handleClick } = this;
		return html`
      <cds-custom-menu-item
        label="${label}"
        class="${"cds-custom"}--menu-item-selectable--selected"
        role="menuitemcheckbox"
        shortcut=${this.shortcut}
        aria-checked="${selected}"
        @click="${handleClick}">
        <slot slot="render-icon" name="render-icon"></slot>
      </cds-custom-menu-item>
    `;
	}
	static {
		this.styles = menu_item_default;
	}
};
__decorate([consume({ context: MenuContext })], CDSmenuItemSelectable.prototype, "context", void 0);
__decorate([property({ type: String })], CDSmenuItemSelectable.prototype, "label", void 0);
__decorate([property({ type: Boolean })], CDSmenuItemSelectable.prototype, "selected", void 0);
__decorate([property()], CDSmenuItemSelectable.prototype, "renderIcon", void 0);
__decorate([property()], CDSmenuItemSelectable.prototype, "shortcut", void 0);
CDSmenuItemSelectable = __decorate([carbonElement(`cds-custom-menu-item-selectable`)], CDSmenuItemSelectable);
var menu_item_selectable_default = CDSmenuItemSelectable;
//#endregion
export { menu_item_selectable_default as default };

//# sourceMappingURL=menu-item-selectable.js.map