import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate, a as __metadata } from './tslib.es6.js';
import { a as ariaBooleanToString } from './aria.js';
import { s as stopEventBubbling } from './form-input.js';
import { L as Logger } from './log.js';
import { d as defineCustomElement$2 } from './bal-icon2.js';
import { d as defineCustomElement$1 } from './bal-list-item-icon2.js';
import { d as defaultConfig } from './config.default.js';
import { a as isSpaceKey, i as isEnterKey } from './keyboard.helpers.js';
import { L as ListenToConfig } from './config.decorator.js';

const i18nBalListItemAccordionHead = {
    de: {
        open: 'Öffnen',
        close: 'Schließen',
    },
    en: {
        open: 'Open',
        close: 'Close',
    },
    fr: {
        open: 'Ouvrir',
        close: 'Fermer',
    },
    it: {
        open: 'Apri',
        close: 'Chiudi',
    },
    nl: {
        open: 'Open',
        close: 'Sluiten',
    },
    es: {
        open: 'Abrir',
        close: 'Cerrar',
    },
    pl: {
        open: 'Otwórz',
        close: 'Zamknij',
    },
    pt: {
        open: 'Abrir',
        close: 'Fechar',
    },
    sv: {
        open: 'Öppna',
        close: 'Stäng',
    },
    fi: {
        open: 'Avaa',
        close: 'Sulje',
    },
};

const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAccordionHead extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.balAccordionChange = createEvent(this, "balAccordionChange", 7);
        this.internalId = `bal-list-item-accordion-head-${ListItemAccordionHeadIds++}`;
        this.ariaState = {};
        this.language = defaultConfig.language;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * If `true` the list accordion is open
         */
        this.accordionOpen = false;
        /**
         * Icon name string with value 'plus' on default
         */
        this.icon = 'plus';
        /**
         * EVENT BINDING
         * ------------------------------------------------------
         */
        this.onClick = () => {
            if (this.el.closest('bal-list-item')) {
                this.accordionOpen = !this.accordionOpen;
            }
        };
        this.onKeyDown = (ev) => {
            if (isSpaceKey(ev) || isEnterKey(ev)) {
                stopEventBubbling(ev);
                this.onClick();
            }
        };
    }
    createLogger(log) {
        this.log = log;
    }
    accordionOpenHandler(newValue, oldValue) {
        if (newValue !== oldValue) {
            this.balAccordionChange.emit(this.accordionOpen);
        }
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.accordionOpenHandler(this.accordionOpen, false);
    }
    componentDidRender() {
        this.setLabelledby();
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
    }
    /**
     * PUBLIC METHODS
     * ------------------------------------------------------
     */
    /**
     * @internal
     */
    async setAria(aria) {
        if (aria.controlId && aria.controlId !== this.ariaState.controlId) {
            this.ariaState.controlId = aria.controlId;
        }
    }
    /**
     * PRIVATE METHODS
     * ------------------------------------------------------
     */
    setLabelledby() {
        const bodyEl = this.el.parentElement.querySelector('bal-list-item-accordion-body');
        if (bodyEl) {
            bodyEl.setAria({ labelledby: this.internalId });
        }
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        return (h(Host, { key: '2f270ca78ffebb2a5b9530bf85c04d454a2958cb', class: {
                'bal-list__item': true,
                'bal-list__item__accordion-head': true,
                'bal-list__item__accordion-head--open': this.accordionOpen,
            }, id: this.internalId, role: "button", tabindex: "0", "aria-expanded": ariaBooleanToString(this.accordionOpen), "aria-controls": this.ariaState.controlId, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", { key: '930c5a8211da0caffb858270a6c86c2fda47ef3f' }), h("bal-list-item-icon", { key: 'f4372a567855758b7a13afa0823acf34d5414c77', right: true }, h("bal-icon", { key: '1bb1f003502e824f9ed698d808d3c51450bf7f12', class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen, title: this.accordionOpen
                ? i18nBalListItemAccordionHead[this.language].close
                : i18nBalListItemAccordionHead[this.language].open }))));
    }
    get el() { return this; }
    static get watchers() { return {
        "accordionOpen": ["accordionOpenHandler"]
    }; }
}, [260, "bal-list-item-accordion-head", {
        "accordionOpen": [1028, "accordion-open"],
        "icon": [1],
        "ariaState": [32],
        "language": [32],
        "configChanged": [64],
        "setAria": [64]
    }, undefined, {
        "accordionOpen": ["accordionOpenHandler"]
    }]);
__decorate([
    Logger('bal-list-item-accordion-head'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], ListItemAccordionHead.prototype, "createLogger", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], ListItemAccordionHead.prototype, "configChanged", null);
let ListItemAccordionHeadIds = 0;
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-list-item-accordion-head", "bal-icon", "bal-list-item-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-list-item-accordion-head":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ListItemAccordionHead);
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "bal-list-item-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { ListItemAccordionHead as L, defineCustomElement as d };
