/**
 * 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 iconLoader from "../../globals/internal/icon-loader.js";
import FocusMixin from "../../globals/mixins/focus.js";
import HostListenerMixin from "../../globals/mixins/host-listener.js";
import "../../globals/shared-enums.js";
import tile_default from "./tile.scss.js";
import { LitElement, html } from "lit";
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import Checkbox16 from "@carbon/icons/es/checkbox/16.js";
import CheckboxCheckedFilled16 from "@carbon/icons/es/checkbox--checked--filled/16.js";
//#region src/components/tile/selectable-tile.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.
*/
/**
* Multi-selectable tile.
*
* @element cds-custom-selectable-tile
* @fires cds-custom-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.
*/
let CDSSelectableTile = class CDSSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {
	constructor(..._args) {
		super(..._args);
		this._inputType = "checkbox";
		this._hasAILabel = false;
		this._handleClick = () => {
			this.selected = !this.selected;
			const { eventChange } = this.constructor;
			this.dispatchEvent(new CustomEvent(eventChange, {
				bubbles: true,
				composed: true,
				detail: { selected: this.selected }
			}));
		};
		this._handleKeydown = (event) => {
			const { key } = event;
			if ((key === " " || key === "Enter") && !event.target?.matches(this.constructor.aiLabelItem) && !event.target?.matches(this.constructor.slugItem)) this.selected = !this.selected;
		};
		this.colorScheme = "";
		this.disabled = false;
		this.hasRoundedCorners = false;
		this.selected = false;
	}
	/**
	* Handles `slotchange` event.
	*/
	_handleSlotChange({ target }) {
		const hasContent = target.assignedNodes().filter((elem) => elem.matches !== void 0 ? elem.matches(this.constructor?.aiLabelItem) || elem.matches(this.constructor?.slugItem) : false);
		if (hasContent.length > 0) {
			this._hasAILabel = Boolean(hasContent);
			hasContent[0].setAttribute("size", "xs");
		}
		this.requestUpdate();
	}
	/**
	* Handles `change` event on the `<input>` in the shadow DOM.
	*/
	_handleChange() {
		this.selected = this._inputNode.checked;
		const selected = this.selected;
		const { eventChange } = this.constructor;
		this.dispatchEvent(new CustomEvent(eventChange, {
			bubbles: true,
			composed: true,
			detail: { selected }
		}));
	}
	/**
	* Handles the rendering of the icon.
	*/
	_renderIcon() {
		const { selected, checkmarkLabel } = this;
		return iconLoader(selected ? CheckboxCheckedFilled16 : Checkbox16, {
			"aria-label": checkmarkLabel || void 0,
			class: `cds-custom--selectable-tile__icon`
		});
	}
	updated() {
		if (this._hasAILabel) this.setAttribute("ai-label", "");
		else this.removeAttribute("ai-label");
	}
	render() {
		const { colorScheme, disabled, hasRoundedCorners, name, selected, value, _handleChange: handleChange, _hasAILabel: hasAILabel } = this;
		return html`
      <div
        class=${classMap({
			[`cds-custom--tile`]: true,
			[`cds-custom--tile--disabled`]: disabled,
			[`cds-custom--tile--selectable`]: true,
			[`cds-custom--tile--is-selected`]: selected,
			[`cds-custom--tile--${colorScheme}`]: colorScheme,
			[`cds-custom--tile--slug-rounded`]: hasAILabel && hasRoundedCorners
		})}
        role="checkbox"
        aria-checked=${selected}
        @change=${handleChange}
        tabindex=${!disabled ? 0 : void 0}
        name=${name}
        value=${value}
        @click=${!disabled ? this._handleClick : void 0}
        @keydown=${this._handleKeydown}>
        <span
          class="${"cds-custom"}--tile__checkmark ${"cds-custom"}--tile__checkmark--persistent">
          ${this._renderIcon()}
        </span>
        <label class="${"cds-custom"}--tile-content">
          <slot></slot>
        </label>
        <slot name="decorator"></slot>
        <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
        <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
      </div>
    `;
	}
	/**
	* A selector that will return the slug item.
	*
	* remove in v12
	*/
	static get slugItem() {
		return `cds-custom-slug`;
	}
	/**
	* A selector that will return the AI Label item.
	*/
	static get aiLabelItem() {
		return `cds-custom-ai-label`;
	}
	/**
	* The name of the custom event fired after this selectable tile changes its selected state.
	*/
	static get eventChange() {
		return `cds-custom-selectable-tile-changed`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = tile_default;
	}
};
__decorate([query("input")], CDSSelectableTile.prototype, "_inputNode", void 0);
__decorate([property({ attribute: "checkmark-label" })], CDSSelectableTile.prototype, "checkmarkLabel", void 0);
__decorate([property({
	attribute: "color-scheme",
	reflect: true
})], CDSSelectableTile.prototype, "colorScheme", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSelectableTile.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	attribute: "has-rounded-corners"
})], CDSSelectableTile.prototype, "hasRoundedCorners", void 0);
__decorate([property()], CDSSelectableTile.prototype, "name", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSelectableTile.prototype, "selected", void 0);
__decorate([property()], CDSSelectableTile.prototype, "value", void 0);
CDSSelectableTile = __decorate([carbonElement(`cds-custom-selectable-tile`)], CDSSelectableTile);
var selectable_tile_default = CDSSelectableTile;
//#endregion
export { selectable_tile_default as default };

//# sourceMappingURL=selectable-tile.js.map