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 { s as stopEventBubbling } from './form-input.js';
import { L as Logger } from './log.js';
import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.js';

const balAccordionSummaryCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__summary--trigger:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__summary{position:static;display:block}.bal-accordion__summary--trigger{cursor:pointer}";

const AccordionSummary = /*@__PURE__*/ proxyCustomElement(class AccordionSummary extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.componentId = `bal-accordion-summary-${accordionSummaryIds++}`;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * If `true` the whole summary component acts as a trigger and can be clicked
         */
        this.trigger = false;
        /**
         * @internal
         */
        this.active = false;
        /**
         * @internal
         */
        this.state = 1 /* AccordionState.Collapsed */;
        /**
         * PRIVATE METHODS
         * ------------------------------------------------------
         */
        this.updateAccordionId = () => { var _a; return (this.parentAccordionId = (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.id); };
        /**
         * EVENT HANDLER
         * ------------------------------------------------------
         */
        this.onClick = (ev) => {
            var _a;
            stopEventBubbling(ev);
            (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
        };
        this.onKeyDown = (ev) => {
            var _a;
            if (isEnterKey(ev) || isSpaceKey(ev)) {
                stopEventBubbling(ev);
                (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
            }
        };
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        const accordion = this.parentAccordionElement;
        if (accordion) {
            accordion.version = 2;
        }
        this.updateAccordionId();
    }
    disconnectedCallback() {
        const accordion = this.parentAccordionElement;
        if (accordion) {
            accordion.version = 1;
        }
        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('summary');
        const id = this.parentAccordionId ? `${this.parentAccordionId}-summary` : this.componentId;
        const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
        const buttonPart = expanded ? 'button expanded' : 'button';
        let attributes = {};
        if (this.trigger) {
            attributes = {
                'aria-controls': `${this.parentAccordionId}-details-content`,
                'role': 'button',
                'tabindex': 0,
                'part': buttonPart,
                'data-testid': 'bal-accordion-button',
                'onClick': this.onClick,
                'onKeyDown': this.onKeyDown,
            };
        }
        return (h(Host, Object.assign({ key: 'ed4f3e46644cf6288855154214126231e5b25e1d', id: id, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('trigger').class(this.trigger)), block.modifier('inner-trigger').class(!this.trigger)), { 'bal-focused': this.trigger }) }, attributes, { "data-testid": "bal-accordion-summary" })));
    }
    get el() { return this; }
    static get style() { return balAccordionSummaryCss; }
}, [256, "bal-accordion-summary", {
        "trigger": [4],
        "active": [1540],
        "state": [2],
        "parentAccordionId": [32]
    }]);
__decorate([
    Logger('bal-accordion-summary'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], AccordionSummary.prototype, "createLogger", null);
let accordionSummaryIds = 0;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-accordion-summary"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-accordion-summary":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AccordionSummary);
            }
            break;
    } });
}

const BalAccordionSummary = AccordionSummary;
const defineCustomElement = defineCustomElement$1;

export { BalAccordionSummary, defineCustomElement };
