/**
 * 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 HostListener from "../../globals/decorators/host-listener.js";
import HostListenerMixin from "../../globals/mixins/host-listener.js";
import "../popover/defs.js";
import FloatingController from "../../globals/controllers/floating-controller.js";
import toggletip_default$1 from "./toggletip.scss.js";
import popover_default from "../popover/popover.scss.js";
import { deepShadowContains } from "../../globals/internal/deep-shadow-contains.js";
import { LitElement, adoptStyles, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import Information16 from "@carbon/icons/es/information/16.js";
//#region src/components/toggle-tip/toggletip.ts
/**
* Copyright IBM Corp. 2019, 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.
*/
var _CDSToggletip;
/**
* Definition tooltip.
*
* @element cds-toggletip
*/
let CDSToggletip = class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
	static {
		_CDSToggletip = this;
	}
	constructor(..._args) {
		super(..._args);
		this.popoverController = new FloatingController(this);
		this.alignment = "top";
		this.alignmentAxisOffset = 0;
		this.autoalign = false;
		this.buttonLabel = "Show information";
		this.open = false;
		this.defaultOpen = false;
		this._handleKeydown = async (event) => {
			if (event.key === "Escape") this.open = false;
		};
		this._renderToggleTipLabel = () => {
			return html`
      <span class="${"cds"}--toggletip-label">
        <slot></slot>
      </span>
    `;
		};
		this._renderTooltipButton = () => {
			return html`
      <button
        aria-controls="${this.id}"
        aria-label="${this.buttonLabel}"
        class="${"cds"}--toggletip-button"
        @click=${this._handleClick}>
        <slot name="trigger"
          >${iconLoader(Information16, { id: "trigger" })}
        </slot>
      </button>
    `;
		};
		this._renderTooltipContent = () => {
			return this.autoalign ? html`
          <span class="${"cds"}--popover-content">
            <div class="${"cds"}--toggletip-content">
              <slot name="body-text"></slot>
              <div class="${"cds"}--toggletip-actions">
                <slot
                  name="actions"
                  @slotchange="${this._handleActionsSlotChange}"></slot>
              </div>
            </div>
            <span class="${"cds"}--popover-caret"></span>
          </span>
        ` : html`
          <span class="${"cds"}--popover">
            <span class="${"cds"}--popover-content">
              <div class="${"cds"}--toggletip-content">
                <slot name="body-text"></slot>
                <div class="${"cds"}--toggletip-actions">
                  <slot
                    name="actions"
                    @slotchange="${this._handleActionsSlotChange}"></slot>
                </div>
              </div>
            </span>
            <span class="${"cds"}--popover-caret"></span>
          </span>
        `;
		};
		this._renderInnerContent = () => {
			return html`
      ${this._renderTooltipButton()} ${this._renderTooltipContent()}
    `;
		};
	}
	connectedCallback() {
		super.connectedCallback();
		if (this.defaultOpen && !this.hasAttribute("open")) this.open = true;
		adoptStyles(this.renderRoot, [popover_default, toggletip_default$1]);
	}
	/**
	* Handles `slotchange` event.
	*/
	_handleActionsSlotChange({ target }) {
		if (target.assignedNodes()) this.setAttribute("has-actions", "");
		else this.removeAttribute("has-actions");
	}
	_handleClick() {
		this.open = !this.open;
	}
	/**
	* Handles `blur` event handler on the document this element is in.
	*
	* @param event The event.
	*/
	_handleFocusOut(event) {
		if (this.contains(event.relatedTarget)) return;
		if (deepShadowContains(this, event.relatedTarget)) return;
		this.open = false;
	}
	updated() {
		if (this.autoalign) {
			const button = this.shadowRoot?.querySelector(_CDSToggletip.selectorToggletipButton);
			const tooltip = this.shadowRoot?.querySelector(_CDSToggletip.selectorToggletipContent);
			const arrowElement = this.shadowRoot?.querySelector(_CDSToggletip.selectorToggletipCaret);
			if (button && tooltip) {
				button.scrollIntoView({
					block: "center",
					inline: "center"
				});
				this.popoverController?.setPlacement({
					trigger: button,
					target: tooltip,
					arrowElement,
					caret: true,
					flipArguments: { fallbackAxisSideDirection: "start" },
					alignment: this.alignment,
					open: this.open,
					alignmentAxisOffset: this.alignmentAxisOffset
				});
			}
		}
	}
	render() {
		const { alignment, open } = this;
		const classes = classMap({
			[`cds--popover-container`]: true,
			[`cds--popover--caret`]: true,
			[`cds--popover--high-contrast`]: true,
			[`cds--popover--open`]: open,
			[`cds--popover--${alignment}`]: alignment,
			[`cds--toggletip`]: true,
			[`cds--toggletip--open`]: open
		});
		return html`
      ${this._renderToggleTipLabel()}
      <span class="${classes}"> ${this._renderInnerContent()} </span>
    `;
	}
	/**
	* A selector that will return the toggletip content.
	*/
	static get selectorToggletipContent() {
		return `.cds--popover-content`;
	}
	/**
	* A selector that will return the toggletip caret.
	*/
	static get selectorToggletipCaret() {
		return `.cds--popover-caret`;
	}
	/**
	* A selector that will return the trigger element.
	*/
	static get selectorToggletipButton() {
		return `.cds--toggletip-button`;
	}
	static {
		this.shadowRootOptions = {
			...LitElement.shadowRootOptions,
			delegatesFocus: true
		};
	}
};
__decorate([property({ reflect: true })], CDSToggletip.prototype, "alignment", void 0);
__decorate([property({
	type: Number,
	attribute: "alignment-axis-offset"
})], CDSToggletip.prototype, "alignmentAxisOffset", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSToggletip.prototype, "autoalign", void 0);
__decorate([property({ attribute: "button-label" })], CDSToggletip.prototype, "buttonLabel", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSToggletip.prototype, "open", void 0);
__decorate([property({
	type: Boolean,
	attribute: "default-open"
})], CDSToggletip.prototype, "defaultOpen", void 0);
__decorate([HostListener("keydown")], CDSToggletip.prototype, "_handleKeydown", void 0);
__decorate([HostListener("focusout")], CDSToggletip.prototype, "_handleFocusOut", null);
CDSToggletip = _CDSToggletip = __decorate([carbonElement(`cds-toggletip`)], CDSToggletip);
var toggletip_default = CDSToggletip;
//#endregion
export { toggletip_default as default };

//# sourceMappingURL=toggletip.js.map