/**
 * 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 selectable_tile_default from "./selectable-tile.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import CheckmarkFilled16 from "@carbon/icons/es/checkmark--filled/16.js";
//#region src/components/tile/radio-tile.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.
*/
/**
* Radio tile.
*
* @element cds-custom-radio-tile
* @fires cds-custom-radio-tile-selected
*   The name of the custom event fired after this radio tile changes its selected state.
*/
let CDSRadioTile = class CDSRadioTile extends selectable_tile_default {
	constructor(..._args) {
		super(..._args);
		this._handleKeydown = (event) => {
			if (event.key === " " || event.key === "Enter") event.preventDefault();
		};
	}
	/**
	* Handles `change` event on the `<input>` in the shadow DOM.
	*/
	_handleChange() {
		this.selected = true;
		const { selected, name } = this;
		const { eventRadioChange } = this.constructor;
		this.dispatchEvent(new CustomEvent(eventRadioChange, {
			bubbles: true,
			composed: true,
			detail: {
				selected,
				name
			}
		}));
	}
	render() {
		const { colorScheme, checkmarkLabel, disabled, hasRoundedCorners, name, selected, value, _handleChange: handleChange, _handleKeydown: handleKeydown, _hasAILabel: hasAILabel } = this;
		const classes = classMap({
			[`cds-custom--tile`]: true,
			[`cds-custom--tile--selectable`]: true,
			[`cds-custom--tile--radio`]: true,
			[`cds-custom--tile--disabled`]: disabled,
			[`cds-custom--tile--is-selected`]: selected,
			[`cds-custom--tile--${colorScheme}`]: colorScheme,
			[`cds-custom--tile--slug-rounded`]: hasAILabel && hasRoundedCorners
		});
		return html`
      <input
        type="radio"
        id="input"
        class="${"cds-custom"}--tile-input"
        ?disabled="${disabled}"
        tabindex="${selected ? 0 : -1}"
        name="${ifDefined(name)}"
        value="${ifDefined(value)}"
        .checked=${selected}
        @change=${!disabled ? handleChange : void 0}
        @keydown="${!disabled ? handleKeydown : void 0}" />
      <label part="label" for="input" class="${classes}">
        ${iconLoader(CheckmarkFilled16, {
			class: `cds-custom--tile__checkmark`,
			title: checkmarkLabel
		})}
        <div class="${"cds-custom"}--tile-content"><slot></slot></div>
      </label>
      <slot name="decorator"></slot>
      <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
    `;
	}
	/**
	* The name of the custom event fired after this selectable tile changes its selected state.
	*/
	static get eventRadioChange() {
		return `cds-custom-radio-tile-selected`;
	}
};
CDSRadioTile = __decorate([carbonElement(`cds-custom-radio-tile`)], CDSRadioTile);
var radio_tile_default = CDSRadioTile;
//#endregion
export { radio_tile_default as default };

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