/**
 * 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 HostListener from "../../globals/decorators/host-listener.js";
import HostListenerMixin from "../../globals/mixins/host-listener.js";
import "../tooltip/index.js";
import { TAG_SIZE, TAG_TYPE } from "./defs.js";
import tag_default from "./tag.scss.js";
import "./tag.js";
import { LitElement, html } from "lit";
import { property, state } from "lit/decorators.js";
//#region src/components/tag/selectable-tag.ts
/**
* Copyright IBM Corp. 2019, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Selectable tag.
*
* @element cds-custom-selectable-tag
*
* @fires cds-custom-selectable-tag-beforeselected - The custom event fired as the element is being selected
* @fires cds-custom-selectable-tag-selected - The custom event fired after the element has been selected
*/
let CDSSelectableTag = class CDSSelectableTag extends HostListenerMixin(FocusMixin(LitElement)) {
	constructor(..._args) {
		super(..._args);
		this.triggerEvents = (event) => {
			if (this.disabled) event.stopPropagation();
			else {
				const init = {
					bubbles: true,
					cancelable: true,
					composed: true,
					detail: { triggeredBy: event.target }
				};
				if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeSelected, init))) {
					this.selected = !this.selected;
					this.dispatchEvent(new CustomEvent(this.constructor.eventSelected, init));
				}
			}
		};
		this._handleClick = (event) => {
			this.triggerEvents(event);
		};
		this._handleKeyDown = (event) => {
			if (event.key === "Enter" || event.key === " ") this.triggerEvents(event);
		};
		this.disabled = false;
		this.selected = false;
		this.size = "md";
		this.text = "";
		this._hasEllipsisApplied = false;
	}
	async updated() {
		await this.updateComplete;
		const textContainer = this.shadowRoot?.querySelector(`cds-custom-tag`)?.shadowRoot?.querySelector(`.cds-custom--tag__label`);
		if (!textContainer) return;
		const hasEllipsis = textContainer.scrollWidth > textContainer.clientWidth;
		this._hasEllipsisApplied = hasEllipsis;
	}
	render() {
		const { disabled, selected, size, text, _hasEllipsisApplied: hasEllipsisApplied } = this;
		return html` ${hasEllipsisApplied ? html` <cds-custom-tooltip align="bottom" keyboard-only leave-delay-ms=${0}>
          <cds-custom-tag
            ?aria-pressed="${selected}"
            size="${size}"
            ?disabled="${disabled}">
            <slot name="icon" slot="icon"></slot>
            ${text}
            <slot name="decorator" slot="decorator"></slot>
            <slot name="ai-label" slot="ai-label"></slot>
            <slot name="slug" slot="slug"></slot>
          </cds-custom-tag>
          <cds-custom-tooltip-content id="content"> ${text} </cds-custom-tooltip-content>
        </cds-custom-tooltip>` : html`
          <cds-custom-tag
            ?aria-pressed="${selected}"
            size="${size}"
            ?disabled="${disabled}">
            <slot name="icon" slot="icon"></slot>
            ${text}
            <slot name="decorator" slot="decorator"></slot>
            <slot name="ai-label" slot="ai-label"></slot>
            <slot name="slug" slot="slug"></slot>
          </cds-custom-tag>
        `}`;
	}
	/**
	* The name of the custom event before this tag is selected.
	*/
	static get eventBeforeSelected() {
		return `cds-custom-selectable-tag-beingselected`;
	}
	/**
	* The name of the custom event fired after this tag is selected.
	*/
	static get eventSelected() {
		return `cds-custom-selectable-tag-selected`;
	}
	static {
		this.styles = tag_default;
	}
};
__decorate([HostListener("shadowRoot:click")], CDSSelectableTag.prototype, "_handleClick", void 0);
__decorate([HostListener("shadowRoot:keydown")], CDSSelectableTag.prototype, "_handleKeyDown", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSelectableTag.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSSelectableTag.prototype, "selected", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSSelectableTag.prototype, "size", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSSelectableTag.prototype, "text", void 0);
__decorate([state()], CDSSelectableTag.prototype, "_hasEllipsisApplied", void 0);
CDSSelectableTag = __decorate([carbonElement(`cds-custom-selectable-tag`)], CDSSelectableTag);
var selectable_tag_default = CDSSelectableTag;
//#endregion
export { TAG_SIZE, TAG_TYPE, selectable_tag_default as default };

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