import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { B as BEM } from './bem.js';
import { L as Logger } from './log.js';

const balAccordionDetailsCss = ".bal-accordion__details{display:block;-webkit-box-sizing:border-box;box-sizing:border-box;will-change:max-height;min-block-size:auto;min-height:auto;min-inline-size:auto;min-width:auto}.bal-accordion__details--animated{-webkit-transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion__details--collapsing{max-height:0 !important;overflow:hidden;-webkit-clip-path:border-box;clip-path:border-box}.bal-accordion__details--collapsed{display:none;overflow:hidden;-webkit-clip-path:border-box;clip-path:border-box}.bal-accordion__details--expanding{max-height:0;overflow:hidden;-webkit-clip-path:border-box;clip-path:border-box}@media (prefers-reduced-motion: reduce){.bal-accordion__details{-webkit-transition:none !important;transition:none !important}}";

const AccordionDetails = /*@__PURE__*/ proxyCustomElement(class AccordionDetails extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.componentId = `bal-accordion-details-${accordionDetailIds++}`;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * @internal
         */
        this.state = 1 /* AccordionState.Collapsed */;
        /**
         * @internal
         */
        this.active = false;
        /**
         * @internal
         */
        this.animated = true;
        /**
         * PRIVATE METHODS
         * ------------------------------------------------------
         */
        this.updateAccordionId = () => { var _a; return (this.parentAccordionId = (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.id); };
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.updateAccordionId();
    }
    componentWillRender() {
        this.updateAccordionId();
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    get parentAccordionElement() {
        var _a;
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion')) || null;
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('accordion').element('details');
        const containerEl = block.element('container');
        const wrapperEl = containerEl.element('wrapper');
        const id = this.parentAccordionId ? `${this.parentAccordionId}-details` : this.componentId;
        const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
        const contentPart = expanded ? 'content expanded' : 'content';
        return (h(Host, { key: '1e909c6bdc60974006159dc9eb6408d3350ea684', id: id, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('expanding').class(this.state === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.state === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.state === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.state === 1 /* AccordionState.Collapsed */)), block.modifier('animated').class(this.animated)) }, h("div", { key: 'f38a2c41997e018e4226384b81dd73d7e55d16e8', id: `${id}-content`, "aria-labelledby": `${this.parentAccordionId}-trigger-button`, role: "region", part: contentPart, class: Object.assign({}, wrapperEl.class()), "data-testid": "bal-accordion-details" }, h("slot", { key: '8429dd4b9a113cade1d579d23cba01e38bb9fb9e' }))));
    }
    get el() { return this; }
    static get style() { return balAccordionDetailsCss; }
}, [260, "bal-accordion-details", {
        "state": [2],
        "active": [4],
        "animated": [4],
        "parentAccordionId": [32]
    }]);
__decorate([
    Logger('bal-accordion-details'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], AccordionDetails.prototype, "createLogger", null);
let accordionDetailIds = 0;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-accordion-details"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-accordion-details":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AccordionDetails);
            }
            break;
    } });
}

const BalAccordionDetails = AccordionDetails;
const defineCustomElement = defineCustomElement$1;

export { BalAccordionDetails, defineCustomElement };
