/**
 * 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 { BUTTON_KIND, BUTTON_SIZE, BUTTON_TOOLTIP_ALIGNMENT, BUTTON_TOOLTIP_POSITION, BUTTON_TYPE } from "./defs.js";
import button_default$1 from "./button.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
//#region src/components/button/button.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.
*/
/**
* Button.
*
* @element cds-custom-button
* @csspart button The button.
*/
let CDSButton = class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
	constructor(..._args) {
		super(..._args);
		this._hasIcon = false;
		this._handleOver = () => {
			this.openTooltip = true;
		};
		this._handleHoverOut = async () => {
			this.openTooltip = false;
		};
		this._handleFocus = async () => {
			this.openTooltip = true;
		};
		this._handleFocusout = async () => {
			this.openTooltip = false;
		};
		this.autofocus = false;
		this.batchAction = false;
		this.dangerDescription = "danger";
		this.disabled = false;
		this.hasMainContent = false;
		this.isExpressive = false;
		this.isSelected = false;
		this.kind = "primary";
		this.linkRole = "button";
		this.openTooltip = false;
		this.size = "lg";
		this.tabIndex = 0;
		this.tooltipAlignment = "";
		this.tooltipPosition = "top";
		this.type = "button";
	}
	/**
	* Handles `slotchange` event.
	*/
	_handleSlotChange({ target }) {
		const { name } = target;
		const hasContent = target.assignedNodes().some((node) => node.nodeType !== Node.TEXT_NODE || node.textContent.trim());
		this[name === "icon" ? "_hasIcon" : "hasMainContent"] = hasContent;
		this.requestUpdate();
	}
	_handleDisabledClick(event) {
		const { disabled } = this;
		if (disabled) event.stopPropagation();
	}
	_checkBadgeWarning() {
		if (this.querySelector(`cds-custom-badge-indicator`) && (this.kind !== "ghost" || this.size !== "lg")) console.warn(`The badge indicator must be used with kind='ghost' and size='lg'`);
	}
	updated(changedProperties) {
		super.updated?.(changedProperties);
		this._checkBadgeWarning();
	}
	render() {
		const { autofocus, buttonClassName, dangerDescription, disabled, download, href, hreflang, kind, isExpressive, isSelected, linkRole, openTooltip, ping, rel, size, tabIndex, target, tooltipAlignment, tooltipPosition, tooltipText, type, _hasIcon: hasIcon, hasMainContent, _handleSlotChange: handleSlotChange } = this;
		let defaultClasses = {
			[`cds-custom--btn`]: true,
			[`cds-custom--btn--${kind}`]: kind,
			[`cds-custom--btn--danger--tertiary`]: kind === "danger-tertiary",
			[`cds-custom--btn--danger--ghost`]: kind === "danger-ghost",
			[`cds-custom--btn--disabled`]: disabled,
			[`cds-custom--btn--icon-only`]: hasIcon && !hasMainContent,
			[`cds-custom--btn--${size}`]: size,
			[`cds-custom--layout--size-${size}`]: size,
			[`cds-custom-ce--btn--has-icon`]: hasIcon,
			[`cds-custom--btn--expressive`]: isExpressive,
			[`cds-custom--btn--selected`]: isSelected && kind === "ghost"
		};
		if (buttonClassName) {
			const outputObject = {};
			buttonClassName?.split(" ").forEach((element) => {
				outputObject[element] = true;
			});
			defaultClasses = {
				...defaultClasses,
				...outputObject
			};
		}
		const classes = classMap(defaultClasses);
		const isDanger = kind?.includes("danger");
		if (href) return disabled ? html`
            <p id="button" part="button" class="${classes}">
              <slot @slotchange="${handleSlotChange}"></slot>
              <slot name="icon" @slotchange="${handleSlotChange}"></slot>
            </p>
          ` : html`
            <a
              id="button"
              part="button"
              role="${ifDefined(linkRole)}"
              class="${classes}"
              download="${ifDefined(download)}"
              href="${ifDefined(href)}"
              hreflang="${ifDefined(hreflang)}"
              ping="${ifDefined(ping)}"
              rel="${ifDefined(rel)}"
              target="${ifDefined(target)}"
              type="${ifDefined(type)}"
              tabindex="${tabIndex}"
              aria-describedby="badge-indicator">
              <slot @slotchange="${handleSlotChange}"></slot>
              <slot name="icon" @slotchange="${handleSlotChange}"></slot>
            </a>
            ${html`<slot id="badge-indicator" name="badge-indicator"></slot>` ?? !disabled}
          `;
		const alignmentClass = tooltipAlignment && (tooltipPosition === "top" || tooltipPosition === "bottom") ? `-${tooltipAlignment}` : "";
		const tooltipClasses = classMap({
			[`cds-custom--popover-container`]: true,
			[`cds-custom--popover--caret`]: true,
			[`cds-custom--popover--high-contrast`]: true,
			[`cds-custom--tooltip`]: true,
			[`cds-custom--icon-tooltip`]: hasIcon,
			[`cds-custom--popover--open`]: openTooltip,
			[`cds-custom--popover--${tooltipPosition}${alignmentClass}`]: tooltipText
		});
		return tooltipText && !disabled ? html`
          <span class="${tooltipClasses}">
            <button
              id="button"
              part="button"
              class="${classes}"
              ?autofocus="${autofocus}"
              ?disabled="${disabled}"
              tabindex="${tabIndex}"
              type="${ifDefined(type)}"
              aria-label="${ifDefined(tooltipText)}"
              aria-describedby="badge-indicator">
              <slot @slotchange="${handleSlotChange}"></slot>
              <slot name="icon" @slotchange="${handleSlotChange}"></slot>
            </button>
            <span class="${"cds-custom"}--popover">
              <span
                class="${"cds-custom"}--popover-content ${"cds-custom"}--tooltip-content">
                ${tooltipText}
              </span>
              <span class="${"cds-custom"}--popover-caret"></span>
            </span>
            ${html`<slot id="badge-indicator" name="badge-indicator"></slot>` ?? !disabled}
          </span>
        ` : html`
          <button
            id="button"
            part="button"
            class="${classes}"
            ?autofocus="${autofocus}"
            ?disabled="${disabled}"
            tabindex="${tabIndex}"
            type="${ifDefined(type)}"
            aria-label="${ifDefined(tooltipText)}"
            aria-describedby="badge-indicator">
            ${isDanger ? html`<span class="${"cds-custom"}--visually-hidden"
                  >${dangerDescription}</span
                >` : ``}
            <slot @slotchange="${handleSlotChange}"></slot>
            <slot name="icon" @slotchange="${handleSlotChange}"></slot>
          </button>
          ${html`<slot id="badge-indicator" name="badge-indicator"></slot>` ?? !disabled}
        `;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
	static {
		this.styles = button_default$1;
	}
};
__decorate([HostListener("click", { capture: true })], CDSButton.prototype, "_handleDisabledClick", null);
__decorate([HostListener("mouseover")], CDSButton.prototype, "_handleOver", void 0);
__decorate([HostListener("mouseout")], CDSButton.prototype, "_handleHoverOut", void 0);
__decorate([HostListener("focus")], CDSButton.prototype, "_handleFocus", void 0);
__decorate([HostListener("focusout")], CDSButton.prototype, "_handleFocusout", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSButton.prototype, "autofocus", void 0);
__decorate([property({
	type: Boolean,
	reflect: true,
	attribute: "batch-action"
})], CDSButton.prototype, "batchAction", void 0);
__decorate([property({
	type: String,
	reflect: true,
	attribute: "button-class-name"
})], CDSButton.prototype, "buttonClassName", void 0);
__decorate([property({
	type: String,
	reflect: true,
	attribute: "danger-description"
})], CDSButton.prototype, "dangerDescription", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSButton.prototype, "disabled", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSButton.prototype, "download", void 0);
__decorate([property({
	reflect: true,
	attribute: "has-main-content",
	type: Boolean
})], CDSButton.prototype, "hasMainContent", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSButton.prototype, "href", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSButton.prototype, "hreflang", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSButton.prototype, "isExpressive", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSButton.prototype, "isSelected", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSButton.prototype, "kind", void 0);
__decorate([property({
	type: String,
	attribute: "link-role"
})], CDSButton.prototype, "linkRole", void 0);
__decorate([property({ type: Boolean })], CDSButton.prototype, "openTooltip", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSButton.prototype, "ping", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSButton.prototype, "rel", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSButton.prototype, "size", void 0);
__decorate([property({
	type: Number,
	attribute: "tab-index",
	reflect: true
})], CDSButton.prototype, "tabIndex", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSButton.prototype, "target", void 0);
__decorate([property({
	type: String,
	reflect: true,
	attribute: "tooltip-alignment"
})], CDSButton.prototype, "tooltipAlignment", void 0);
__decorate([property({
	type: String,
	reflect: true,
	attribute: "tooltip-position"
})], CDSButton.prototype, "tooltipPosition", void 0);
__decorate([property({
	type: String,
	reflect: true,
	attribute: "tooltip-text"
})], CDSButton.prototype, "tooltipText", void 0);
__decorate([property({
	type: String,
	reflect: true
})], CDSButton.prototype, "type", void 0);
CDSButton = __decorate([carbonElement(`cds-custom-button`)], CDSButton);
var button_default = CDSButton;
//#endregion
export { BUTTON_KIND, BUTTON_SIZE, BUTTON_TOOLTIP_ALIGNMENT, BUTTON_TOOLTIP_POSITION, BUTTON_TYPE, button_default as default };

//# sourceMappingURL=button.js.map