import { proxyCustomElement, HTMLElement, 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 { B as BEM } from './bem.js';
import { s as stopEventBubbling } from './form-input.js';
import { L as Logger } from './log.js';
import { d as defineCustomElement$4 } from './bal-button2.js';
import { d as defineCustomElement$3 } from './bal-icon2.js';
import { d as defineCustomElement$2 } from './bal-spinner2.js';
import { d as defaultConfig } from './config.default.js';
import { L as ListenToConfig } from './config.decorator.js';

const i18nBalAccordion = {
    de: {
        open: 'Mehr anzeigen',
        close: 'Weniger anzeigen',
    },
    en: {
        open: 'Show more',
        close: 'Show less',
    },
    fr: {
        open: 'Afficher plus',
        close: 'Afficher moins',
    },
    it: {
        open: 'Mostra di più',
        close: 'Mostra di meno',
    },
    nl: {
        open: 'Meer weergeven',
        close: 'Minder weergeven',
    },
    es: {
        open: 'Mostrar más',
        close: 'Mostrar menos',
    },
    pl: {
        open: 'Pokaż więcej',
        close: 'Pokaż mniej',
    },
    pt: {
        open: 'Mostrar mais',
        close: 'Mostrar menos',
    },
    sv: {
        open: 'Visa mer',
        close: 'Visa mindre',
    },
    fi: {
        open: 'Näytä lisää',
        close: 'Näytä vähemmän',
    },
};

const balAccordionTriggerCss = "@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__button.bal-focused:focus-visible,.bal-accordion__trigger__text.bal-focused:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}.bal-accordion__trigger{position:static;display:block}.bal-accordion__trigger__button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;background:rgba(0,0,0,0);border:none;border-radius:var(--bal-border-radius-normal);height:3rem;width:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.bal-accordion__trigger__text{display:inline;background:rgba(0,0,0,0);border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:0;margin:0;border-radius:var(--bal-radius-normal);font-size:var(--bal-text-size-small);color:var(--bal-text-color-primary-light);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold)}@media (hover: hover)and (pointer: fine){.bal-accordion__trigger__text:hover{color:var(--bal-text-color-primary-hovered)}}.bal-accordion__trigger__text:active{color:var(--bal-text-color-primary-pressed)}";

const AccordionTrigger = /*@__PURE__*/ proxyCustomElement(class AccordionTrigger extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.componentId = `bal-accordion-trigger-${accordionTriggerIds++}`;
        this.language = defaultConfig.language;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * @deprecated
         * Trigger will be a bal-button
         */
        this.button = false;
        /**
         * If `true` the button is aligned over the whole width
         */
        this.expanded = true;
        /**
         * Label of the open trigger button
         */
        this.openLabel = '';
        /**
         * BalIcon of the open trigger button
         */
        this.openIcon = 'caret-down';
        /**
         * Label of the close trigger button
         */
        this.closeLabel = '';
        /**
         * BalIcon of the close trigger button
         */
        this.closeIcon = '';
        /**
         * The color to use from your application's color palette.
         */
        this.color = 'info';
        /**
         * Size of the button
         */
        this.size = '';
        /**
         * @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();
        };
        /**
         * RENDER
         * ------------------------------------------------------
         */
        this.block = BEM.block('accordion').element('trigger');
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.updateAccordionId();
    }
    componentWillRender() {
        this.updateAccordionId();
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    get realVariant() {
        if (this.button) {
            return 'button';
        }
        return this.variant;
    }
    get parentAccordionElement() {
        var _a;
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion')) || null;
    }
    get parentAccordionSummaryElement() {
        var _a;
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('bal-accordion-summary')) || null;
    }
    render() {
        const id = this.parentAccordionId ? `${this.parentAccordionId}-trigger` : this.componentId;
        const label = this.active ? this.closeLabel : this.openLabel;
        let turn = false;
        let icon = this.active ? this.closeIcon : this.openIcon;
        if (this.closeIcon === '' || this.closeIcon === undefined || this.closeIcon === null) {
            turn = this.active;
            icon = this.openIcon || 'caret-down';
        }
        const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
        const buttonPart = expanded ? 'button expanded' : 'button';
        const parentSummaryEl = this.parentAccordionSummaryElement;
        let triggerAttributes = {
            tabindex: -1,
        };
        if (parentSummaryEl && !parentSummaryEl.trigger) {
            triggerAttributes = {
                tabindex: 0,
            };
        }
        const Trigger = (props) => {
            switch (props.variant) {
                case 'button':
                    return this.renderButton(props);
                case 'text':
                    return this.renderText(props);
                default:
                    return this.renderIcon(props);
            }
        };
        return (h(Host, { id: id, class: Object.assign({}, this.block.class()) }, h(Trigger, { variant: this.realVariant, id,
            label,
            icon,
            turn,
            expanded,
            buttonPart,
            triggerAttributes })));
    }
    renderButton({ id, buttonPart, icon, turn, label }) {
        return (h("bal-button", { id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: this.expanded, icon: icon, iconTurn: turn, color: this.color, size: this.size, title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-expanded": ariaBooleanToString(this.active), onClick: this.onClick }, label));
    }
    renderIcon({ buttonPart, triggerAttributes, turn, icon, id }) {
        return (h("button", Object.assign({ class: Object.assign(Object.assign({}, this.block.element('button').class()), { 'bal-focused': triggerAttributes.tabindex === 0 }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-expanded": ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", title: this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, "aria-label": this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open, onClick: this.onClick }, triggerAttributes), h("bal-icon", { turn: turn, name: icon })));
    }
    renderText({ buttonPart, triggerAttributes, turn, icon, id }) {
        const openLabel = this.openLabel || i18nBalAccordion[this.language].open;
        const closeLabel = this.closeLabel || i18nBalAccordion[this.language].close;
        return (h("button", Object.assign({ class: Object.assign(Object.assign({}, this.block.element('text').class()), { 'bal-focused': triggerAttributes.tabindex === 0 }), id: `${id}-button`, "aria-controls": `${this.parentAccordionId}-details-content`, "aria-expanded": ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), this.active ? closeLabel : openLabel));
    }
    get el() { return this; }
    static get style() { return balAccordionTriggerCss; }
}, [256, "bal-accordion-trigger", {
        "button": [4],
        "variant": [1],
        "expanded": [4],
        "openLabel": [1, "open-label"],
        "openIcon": [1, "open-icon"],
        "closeLabel": [1, "close-label"],
        "closeIcon": [1, "close-icon"],
        "color": [1],
        "size": [1],
        "active": [1540],
        "state": [2],
        "parentAccordionId": [32],
        "language": [32],
        "configChanged": [64]
    }]);
__decorate([
    Logger('bal-accordion-trigger'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], AccordionTrigger.prototype, "createLogger", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], AccordionTrigger.prototype, "configChanged", null);
let accordionTriggerIds = 0;
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["bal-accordion-trigger", "bal-button", "bal-icon", "bal-spinner"];
    components.forEach(tagName => { switch (tagName) {
        case "bal-accordion-trigger":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AccordionTrigger);
            }
            break;
        case "bal-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "bal-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "bal-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const BalAccordionTrigger = AccordionTrigger;
const defineCustomElement = defineCustomElement$1;

export { BalAccordionTrigger, defineCustomElement };
