/**
 * 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 contained_list_default from "./contained-list.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
//#region src/components/contained-list/contained-list-item.ts
/**
* Copyright IBM Corp. 2022, 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.
*/
/**
* Contained list item.
*
* @element cds-custom-contained-list-item
* @slot - The content of the list item
* @slot icon - The icon slot for rendering an icon
* @slot action - The action slot for interactive elements
* @fires cds-custom-contained-list-item-click - Fires when clickable item is clicked
*/
let CDSContainedListItem = class CDSContainedListItem extends LitElement {
	constructor(..._args) {
		super(..._args);
		this.clickable = false;
		this.disabled = false;
		this._hasIcon = false;
	}
	/**
	* Handles slot change for icon
	*/
	_handleIconSlotChange({ target }) {
		const hasIcon = target.assignedElements().length > 0;
		this._hasIcon = hasIcon;
		this.requestUpdate();
	}
	/**
	* Handles click event
	*/
	_handleClick(event) {
		if (this.disabled) {
			event.preventDefault();
			return;
		}
		const { eventClick } = this.constructor;
		this.dispatchEvent(new CustomEvent(eventClick, {
			bubbles: true,
			composed: true,
			detail: { item: this }
		}));
	}
	connectedCallback() {
		super.connectedCallback();
		if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
	}
	render() {
		const { disabled, clickable, _hasIcon } = this;
		const classes = classMap({
			[`cds-custom--contained-list-item`]: true,
			[`cds-custom--contained-list-item--clickable`]: clickable,
			[`cds-custom--contained-list-item--with-icon`]: _hasIcon
		});
		const contentClasses = `cds-custom--contained-list-item__content`;
		const content = html`
      <slot name="icon" @slotchange="${this._handleIconSlotChange}"></slot>
      <slot></slot>
    `;
		return html`
      <div class="${classes}">
        ${clickable ? html`
              <button
                class="${contentClasses}"
                type="button"
                ?disabled="${disabled}"
                @click="${this._handleClick}">
                ${content}
              </button>
            ` : html`<div class="${contentClasses}">${content}</div>`}
        <div class="${"cds-custom"}--contained-list-item__action">
          <slot name="action"></slot>
        </div>
      </div>
    `;
	}
	/**
	* The name of the custom event fired when a clickable item is clicked
	*/
	static get eventClick() {
		return `cds-custom-contained-list-item-click`;
	}
	static {
		this.styles = contained_list_default;
	}
};
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSContainedListItem.prototype, "clickable", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSContainedListItem.prototype, "disabled", void 0);
CDSContainedListItem = __decorate([carbonElement(`cds-custom-contained-list-item`)], CDSContainedListItem);
var contained_list_item_default = CDSContainedListItem;
//#endregion
export { contained_list_item_default as default };

//# sourceMappingURL=contained-list-item.js.map