'use strict';

var index = require('./index-CJK1u2Q5.js');
var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
var config_decorator = require('./config.decorator-Bql7C-AT.js');
var bem = require('./bem-p0PWVN8n.js');
var formInput = require('./form-input-Dphabljq.js');
var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
var aria = require('./aria-BzkqcV7W.js');

const balAccordionCss = ".bal-accordion{display:block;position:relative;width:100%}.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v1,.bal-accordion--card-v2{margin-top:var(--bal-space-medium-desktop)}}.bal-accordion--card-v2{padding-left:var(--bal-space-medium);padding-right:var(--bal-space-medium);padding-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion--card-v2{padding-left:var(--bal-space-medium-tablet);padding-right:var(--bal-space-medium-tablet);padding-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion--card-v2{padding-left:var(--bal-space-medium-desktop);padding-right:var(--bal-space-medium-desktop);padding-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.bal-accordion__trigger--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium);margin-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet);margin-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__trigger--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop);margin-bottom:var(--bal-space-medium-desktop)}}.bal-accordion__content--card{margin-left:var(--bal-space-medium);margin-right:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-accordion__content--card{margin-left:var(--bal-space-medium-tablet);margin-right:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-accordion__content--card{margin-left:var(--bal-space-medium-desktop);margin-right:var(--bal-space-medium-desktop)}}.bal-accordion--animated{-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-accordion--animated .bal-accordion__content{-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__content{will-change:max-height}.bal-accordion__content--overflow-hidden{overflow:hidden;-webkit-clip-path:border-box;clip-path:border-box}.bal-accordion--collapsing .bal-accordion__content{max-height:0 !important}.bal-accordion--collapsed .bal-accordion__content{display:none}.bal-accordion--expanding .bal-accordion__content{max-height:0}@media (prefers-reduced-motion: reduce){.bal-accordion,.bal-accordion__content{-webkit-transition:none !important;transition:none !important}}";

const Accordion = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.balChange = index.createEvent(this, "balChange");
        this.balWillAnimate = index.createEvent(this, "balWillAnimate");
        this.balDidAnimate = index.createEvent(this, "balDidAnimate");
        this.componentId = `bal-accordion-${accordionIds++}`;
        this.state = 1 /* AccordionState.Collapsed */;
        this.animated = true;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * If `true` the accordion is open.
         */
        this.active = false;
        /**
         * Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
         */
        this.debounce = 0;
        /**
         * Label of the open trigger button
         */
        this.openLabel = '';
        /**
         * BalIcon of the open trigger button
         */
        this.openIcon = 'plus';
        /**
         * Label of the close trigger button
         */
        this.closeLabel = '';
        /**
         * BalIcon of the close trigger button
         */
        this.closeIcon = 'close';
        /**
         * If `true` the accordion is used on the bottom of a card
         */
        this.card = false;
        /**
         * @internal
         * defines the version of the component
         */
        this.version = 1;
        /**
         * PRIVATE METHODS
         * ------------------------------------------------------
         */
        this.updateState = (initialUpdate = false) => {
            if (this.active) {
                this.expand(initialUpdate);
            }
            else {
                this.collapse(initialUpdate);
            }
        };
        this.setState = (state) => {
            this.state = state;
            if (this.version === 2) {
                this.updateTriggerElement();
                this.updateDetailsElement();
                this.updateSummaryElement();
            }
        };
        this.updateDetailsElement = () => {
            const detailsElement = this.detailsElement;
            if (detailsElement) {
                detailsElement.state = this.state;
                detailsElement.active = this.active;
                detailsElement.animated = this.animated;
            }
        };
        this.updateTriggerElement = () => {
            const triggerElement = this.triggerElement;
            if (triggerElement) {
                triggerElement.state = this.state;
                triggerElement.active = this.active;
            }
        };
        this.updateSummaryElement = () => {
            const summaryElement = this.summaryElement;
            if (summaryElement) {
                summaryElement.state = this.state;
                summaryElement.active = this.active;
            }
        };
        this.expand = (initialUpdate = false) => {
            this.active = true;
            const detailsElement = this.detailsElement;
            const detailsWrapperElement = this.detailsWrapperElement;
            if (initialUpdate || detailsElement === null || detailsWrapperElement === null) {
                this.setState(4 /* AccordionState.Expanded */);
                return this.active;
            }
            if (this.state === 4 /* AccordionState.Expanded */) {
                return this.active;
            }
            if (this.currentRaf !== undefined) {
                cancelAnimationFrame(this.currentRaf);
            }
            if (this.shouldAnimate()) {
                index.raf(() => {
                    this.setState(8 /* AccordionState.Expanding */);
                    this.balWillAnimate.emit(this.active);
                    this.currentRaf = index.raf(async () => {
                        const contentHeight = detailsWrapperElement.offsetHeight;
                        const waitForTransition = index.transitionEndAsync(detailsElement, 300);
                        detailsElement.style.setProperty('max-height', `${contentHeight}px`);
                        await waitForTransition;
                        this.setState(4 /* AccordionState.Expanded */);
                        detailsElement.style.removeProperty('max-height');
                        this.balDidAnimate.emit(this.active);
                    });
                });
            }
            else {
                this.balWillAnimate.emit(this.active);
                this.setState(4 /* AccordionState.Expanded */);
                this.balDidAnimate.emit(this.active);
            }
            return this.active;
        };
        this.collapse = (initialUpdate = false) => {
            this.active = false;
            const detailsElement = this.detailsElement;
            if (initialUpdate || detailsElement === null) {
                this.setState(1 /* AccordionState.Collapsed */);
                return this.active;
            }
            if (this.state === 1 /* AccordionState.Collapsed */) {
                return this.active;
            }
            if (this.currentRaf !== undefined) {
                cancelAnimationFrame(this.currentRaf);
            }
            if (this.shouldAnimate()) {
                this.currentRaf = index.raf(async () => {
                    const contentHeight = detailsElement.offsetHeight;
                    detailsElement.style.setProperty('max-height', `${contentHeight}px`);
                    index.raf(async () => {
                        const waitForTransition = index.transitionEndAsync(detailsElement, 300);
                        this.setState(2 /* AccordionState.Collapsing */);
                        this.balDidAnimate.emit(this.active);
                        await waitForTransition;
                        this.setState(1 /* AccordionState.Collapsed */);
                        detailsElement.style.removeProperty('max-height');
                        this.balDidAnimate.emit(this.active);
                    });
                });
            }
            else {
                this.balDidAnimate.emit(this.active);
                this.setState(1 /* AccordionState.Collapsed */);
                this.balDidAnimate.emit(this.active);
            }
            return this.active;
        };
        this.shouldAnimate = () => {
            if (typeof window === 'undefined') {
                return false;
            }
            return this.animated;
        };
        /**
         * EVENT BINDING
         * ------------------------------------------------------
         */
        this.onTriggerClickV1 = () => {
            this.humanToggle();
        };
    }
    createLogger(log) {
        this.log = log;
    }
    async activeChanged(newActive, oldActive) {
        if (newActive !== oldActive) {
            this.active = newActive;
            this.updateState();
        }
    }
    debounceChanged() {
        this.balChange = index.debounceEvent(this.balChange, this.debounce);
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    async connectedCallback() {
        this.debounceChanged();
        await index.waitForComponent(this.el);
        if (this.active) {
            this.activeChanged(this.active, false);
        }
        this.updateState(true);
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.animated = state.animated;
    }
    /**
     * PUBLIC METHODS
     * ------------------------------------------------------
     */
    /**
     * Opens the accordion
     */
    async present() {
        return this.expand();
    }
    /**
     * Closes the accordion
     */
    async dismiss() {
        return this.collapse();
    }
    /**
     * Triggers the accordion
     */
    async toggle() {
        if (this.active) {
            return this.collapse();
        }
        else {
            return this.expand();
        }
    }
    /**
     * @internal
     */
    async humanToggle() {
        if (this.active) {
            await this.collapse();
        }
        else {
            await this.expand();
        }
        this.balChange.emit(this.active);
        return this.active;
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    get summaryElement() {
        var _a;
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.componentId}-summary`)) || null;
    }
    get triggerElement() {
        var _a;
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.componentId}-trigger`)) || null;
    }
    get detailsElement() {
        var _a;
        if (this.version === 1) {
            return this.contentEl || null;
        }
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.componentId}-details`)) || null;
    }
    get detailsWrapperElement() {
        var _a;
        if (this.version === 1) {
            return this.contentElWrapper || null;
        }
        return ((_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.componentId}-details > div`)) || null;
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        return this.version === 2 ? this.renderVersion2() : this.renderVersion1();
    }
    renderVersion2() {
        const block = bem.BEM.block('accordion');
        return (index.h(index.Host, { id: this.componentId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('card-v2').class(this.card)), block.modifier('animated').class(this.animated)) }));
    }
    renderVersion1() {
        const label = this.active ? this.closeLabel : this.openLabel;
        const icon = this.active ? this.closeIcon : this.openIcon;
        const block = bem.BEM.block('accordion');
        const expanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
        const buttonPart = expanded ? 'button expanded' : 'button';
        const contentPart = expanded ? 'content expanded' : 'content';
        return (index.h(index.Host, { id: this.componentId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('card-v1').class(this.card)), 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)) }, index.h("div", { class: Object.assign({}, block.element('wrapper').class()) }, index.h("div", { class: Object.assign(Object.assign({}, block.element('trigger').class()), block.element('trigger').modifier('card').class(this.card)), "data-testid": "bal-accordion-summary" }, index.h("bal-button", { id: `${this.componentId}-button`, "aria-controls": `${this.componentId}-content`, part: buttonPart, "data-testid": "bal-accordion-trigger", expanded: true, color: 'info', icon: icon, onClick: this.onTriggerClickV1 }, label)), index.h("div", { id: `${this.componentId}-content`, "aria-labelledby": `${this.componentId}-button`, role: "region", part: contentPart, class: Object.assign(Object.assign(Object.assign({}, block.element('content').class()), block.element('content').modifier('card').class(this.card)), block
                .element('content')
                .modifier('overflow-hidden')
                .class(this.state !== 4 /* AccordionState.Expanded */)), ref: contentEl => (this.contentEl = contentEl) }, index.h("div", { id: `${this.componentId}-content-wrapper`, "data-testid": "bal-accordion-details", class: Object.assign({}, block.element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, index.h("slot", null))))));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "active": ["activeChanged"],
        "debounce": ["debounceChanged"]
    }; }
};
tslib_es6.__decorate([
    index.Logger('bal-accordion'),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Function]),
    tslib_es6.__metadata("design:returntype", void 0)
], Accordion.prototype, "createLogger", null);
tslib_es6.__decorate([
    config_decorator.ListenToConfig(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Object]),
    tslib_es6.__metadata("design:returntype", Promise)
], Accordion.prototype, "configChanged", null);
let accordionIds = 0;
Accordion.style = balAccordionCss;

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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        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.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 (index.h(index.Host, { key: 'b9a16e64c4d5559646cdac24e2f9cad021d66a45', 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)) }, index.h("div", { key: '279f8c54de387926886868cf13da08b1c465d523', id: `${id}-content`, "aria-labelledby": `${this.parentAccordionId}-trigger-button`, role: "region", part: contentPart, class: Object.assign({}, wrapperEl.class()), "data-testid": "bal-accordion-details" }, index.h("slot", { key: '209b3840f44b6373c8aeb5ad6851e1bc76ec09d5' }))));
    }
    get el() { return index.getElement(this); }
};
tslib_es6.__decorate([
    index.Logger('bal-accordion-details'),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Function]),
    tslib_es6.__metadata("design:returntype", void 0)
], AccordionDetails.prototype, "createLogger", null);
let accordionDetailIds = 0;
AccordionDetails.style = balAccordionDetailsCss;

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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        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;
            formInput.stopEventBubbling(ev);
            (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
        };
        this.onKeyDown = (ev) => {
            var _a;
            if (keyboard_helpers.isEnterKey(ev) || keyboard_helpers.isSpaceKey(ev)) {
                formInput.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.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 (index.h(index.Host, Object.assign({ key: 'e192ab6a73d33db615d55c1ae5e82e334d5e690e', 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 index.getElement(this); }
};
tslib_es6.__decorate([
    index.Logger('bal-accordion-summary'),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Function]),
    tslib_es6.__metadata("design:returntype", void 0)
], AccordionSummary.prototype, "createLogger", null);
let accordionSummaryIds = 0;
AccordionSummary.style = balAccordionSummaryCss;

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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.componentId = `bal-accordion-trigger-${accordionTriggerIds++}`;
        this.language = index.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;
            formInput.stopEventBubbling(ev);
            (_a = this.parentAccordionElement) === null || _a === void 0 ? void 0 : _a.humanToggle();
        };
        /**
         * RENDER
         * ------------------------------------------------------
         */
        this.block = bem.BEM.block('accordion').element('trigger');
    }
    createLogger(log) {
        this.log = log;
    }
    buttonChanged() {
        this.variant = this.button ? 'button' : this.variant;
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.updateAccordionId();
        this.buttonChanged();
    }
    componentWillRender() {
        this.updateAccordionId();
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    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 (index.h(index.Host, { id: id, class: Object.assign({}, this.block.class()) }, index.h(Trigger, { variant: this.variant, id,
            label,
            icon,
            turn,
            expanded,
            buttonPart,
            triggerAttributes })));
    }
    renderButton({ id, buttonPart, icon, turn, label }) {
        return (index.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": aria.ariaBooleanToString(this.active), onClick: this.onClick }, label));
    }
    renderIcon({ buttonPart, triggerAttributes, turn, icon, id }) {
        return (index.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": aria.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), index.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 (index.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": aria.ariaBooleanToString(this.active), part: buttonPart, "data-testid": "bal-accordion-trigger", onClick: this.onClick }, triggerAttributes), this.active ? closeLabel : openLabel));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "button": ["buttonChanged"]
    }; }
};
tslib_es6.__decorate([
    index.Logger('bal-accordion-trigger'),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Function]),
    tslib_es6.__metadata("design:returntype", void 0)
], AccordionTrigger.prototype, "createLogger", null);
tslib_es6.__decorate([
    config_decorator.ListenToConfig(),
    tslib_es6.__metadata("design:type", Function),
    tslib_es6.__metadata("design:paramtypes", [Object]),
    tslib_es6.__metadata("design:returntype", Promise)
], AccordionTrigger.prototype, "configChanged", null);
let accordionTriggerIds = 0;
AccordionTrigger.style = balAccordionTriggerCss;

exports.bal_accordion = Accordion;
exports.bal_accordion_details = AccordionDetails;
exports.bal_accordion_summary = AccordionSummary;
exports.bal_accordion_trigger = AccordionTrigger;
