/**
 * 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 { ACCORDION_ITEM_BREAKPOINT } from "./defs.js";
import accordion_default from "./accordion.scss.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 { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import ChevronRight16 from "@carbon/icons/es/chevron--right/16.js";
//#region src/components/accordion/accordion-item.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.
*/
/**
* Observes resize of the given element with the given resize observer.
*
* @param observer The resize observer.
* @param elem The element to observe the resize.
*/
const observeResize = (observer, elem) => {
	if (!elem) return null;
	observer.observe(elem);
	return { release() {
		observer.unobserve(elem);
		return null;
	} };
};
/**
* Accordion item.
*
* @element cds-accordion-item
* @fires cds-accordion-item-beingtoggled
*   The custom event fired before this accordion item is being toggled upon a user gesture.
*   Cancellation of this event stops the user-initiated action of toggling this accordion item.
* @fires cds-accordion-item-toggled - The custom event fired after this accordion item is toggled upon a user gesture.
* @csspart title The title.
* @csspart content The content.
*/
let CDSAccordionItem = class CDSAccordionItem extends FocusMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this._hObserveResize = null;
		this._handleKeydownExpando = ({ key }) => {
			if (this.open && (key === "Esc" || key === "Escape")) this._handleUserInitiatedToggle(false);
		};
		this._resizeObserver = new ResizeObserver((records) => {
			const { width } = records[records.length - 1].contentRect;
			const { _sizesBreakpoints: sizesBreakpoints } = this.constructor;
			this._currentBreakpoint = Object.keys(sizesBreakpoints).sort((lhs, rhs) => sizesBreakpoints[rhs] - sizesBreakpoints[lhs]).find((size) => width >= sizesBreakpoints[size]);
			this.requestUpdate();
		});
		this.disabled = false;
		this.open = false;
		this.title = "";
	}
	/**
	* Handles user-initiated toggle request of this accordion item.
	*
	* @param open The new open state.
	*/
	_handleUserInitiatedToggle(open = !this.open) {
		const init = {
			bubbles: true,
			cancelable: true,
			composed: true,
			detail: { open }
		};
		if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeToggle, init))) {
			const { selectorAccordionContent } = this.constructor;
			if (!this.open) this.setAttribute("expanding", "");
			else this.setAttribute("collapsing", "");
			this.shadowRoot.querySelector(selectorAccordionContent).addEventListener("animationend", () => {
				this.removeAttribute("expanding");
				this.removeAttribute("collapsing");
			});
			this.open = open;
			this.dispatchEvent(new CustomEvent(this.constructor.eventToggle, init));
		}
	}
	/**
	* Handler for the `click` event on the expando button.
	*/
	_handleClickExpando() {
		this._handleUserInitiatedToggle();
	}
	connectedCallback() {
		if (!this.hasAttribute("role")) this.setAttribute("role", "listitem");
		super.connectedCallback();
		if (this._hObserveResize) this._hObserveResize = this._hObserveResize.release();
		this._hObserveResize = observeResize(this._resizeObserver, this);
	}
	disconnectedCallback() {
		if (this._hObserveResize) this._hObserveResize = this._hObserveResize.release();
	}
	render() {
		const { disabled, title, open, _currentBreakpoint: currentBreakpoint, _handleClickExpando: handleClickExpando, _handleKeydownExpando: handleKeydownExpando } = this;
		const { _classesBreakpoints: classesBreakpoints } = this.constructor;
		const { [currentBreakpoint]: classBreakpoint } = classesBreakpoints;
		const contentClasses = classMap({
			[classBreakpoint]: classBreakpoint,
			[`cds--accordion__content`]: true
		});
		return html`
      <button
        ?disabled="${disabled}"
        type="button"
        part="expando"
        class="${"cds"}--accordion__heading"
        aria-controls="content"
        aria-expanded="${open}"
        @click="${handleClickExpando}"
        @keydown="${handleKeydownExpando}">
        ${iconLoader(ChevronRight16, {
			part: "expando-icon",
			class: `cds--accordion__arrow`
		})}
        <div part="title" class="${"cds"}--accordion__title">
          <slot name="title">${title}</slot>
        </div>
      </button>
      <div class="${"cds"}--accordion__wrapper" part="wrapper">
        <div id="content" part="content" class="${contentClasses}">
          <slot></slot>
        </div>
      </div>
    `;
	}
	/**
	* The CSS classes for breakpoints.
	*
	* @private
	*/
	static get _classesBreakpoints() {
		return {
			["sm"]: `cds-ce--accordion__content--sm`,
			["md"]: `cds-ce--accordion__content--md`
		};
	}
	/**
	* The breakpoints.
	*
	* @private
	*/
	static get _sizesBreakpoints() {
		return {
			["sm"]: 480,
			["md"]: 640
		};
	}
	/**
	* The name of the custom event fired before this accordion item is being toggled upon a user gesture.
	* Cancellation of this event stops the user-initiated action of toggling this accordion item.
	*/
	static get eventBeforeToggle() {
		return `cds-accordion-item-beingtoggled`;
	}
	/**
	* The name of the custom event fired after this accordion item is toggled upon a user gesture.
	*/
	static get eventToggle() {
		return `cds-accordion-item-toggled`;
	}
	static get selectorAccordionContent() {
		return `.cds--accordion__content`;
	}
	static {
		this.styles = accordion_default;
	}
};
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSAccordionItem.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSAccordionItem.prototype, "open", void 0);
__decorate([property({ attribute: "title" })], CDSAccordionItem.prototype, "title", void 0);
CDSAccordionItem = __decorate([carbonElement(`cds-accordion-item`)], CDSAccordionItem);
var accordion_item_default = CDSAccordionItem;
//#endregion
export { ACCORDION_ITEM_BREAKPOINT, accordion_item_default as default };

//# sourceMappingURL=accordion-item.js.map