/*!
 * Crafted with ❤ by Salla
 */
'use strict';

var index = require('./index-vstkdqRz.js');
var minus = require('./minus-CCryh1qf.js');

const sallaAccordionBodyCss = "";

const SallaAccordionBody = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    render() {
        return (index.h(index.Host, { key: '298d42a5bf1bcefdb181ec35060220cf749b56ed', class: "s-accordion-body-wrapper" }, index.h("slot", { key: '6ab081e8b71b5dc69fb66fbdec82b4725ab53b0d' })));
    }
};
SallaAccordionBody.style = sallaAccordionBodyCss;

const sallaAccordionHeadCss = "";

const SallaAccordionHead = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.accordionToggle = index.createEvent(this, "accordionToggle");
        /** Should the accordion be collapsible or not. */
        this.collapsible = false;
        /** Current collapsed state */
        this.collapsed = true;
    }
    emitCollapsePanel() {
        this.accordionToggle.emit({
            payload: {
                collapsed: this.collapsed,
            },
        });
    }
    toggleCollapse() {
        if (!this.collapsible)
            return;
        this.collapsed = !this.collapsed;
        this.host.parentElement?.setAttribute('data-collapsed', this.collapsed.toString());
        this.host.parentElement
            ?.querySelector('salla-accordion-body')
            ?.setAttribute('data-collapsed', this.collapsed.toString());
        this.emitCollapsePanel();
    }
    render() {
        return (index.h(index.Host, { key: '9d88d243306cdf451c20d7068fbb9f48807b22e9', "data-collapsed": this.collapsed.toString(), onClick: () => this.toggleCollapse(), class: "s-accordion-head-wrapper" }, index.h("div", { key: 'bad4c5a913ce1c4581b09c0b6d96fcbdb4236638', class: "s-accordion-head-wrapper-start" }, index.h("slot", { key: 'acb83cec8cbca5771a9f84e81c0b955c3edad731', name: "title" }), index.h("slot", { key: 'a4ad42ea6fad4f452c4c218a9ee02dca0adb4a67', name: "progress" }), index.h("slot", { key: '96ab95d413dc906ac299079f4008816f01881990', name: "html" })), (this.collapsible || this.host.querySelector('[slot="note"]')) && (index.h("div", { key: '8f9666a5038cd7b1ac6e357c6920ea26d31c5f03', class: "s-accordion-head-wrapper-end" }, index.h("slot", { key: '14895e8c1385e91c14f046c9ae38ce5e4a4c9a60', name: "note" }), this.collapsible && (index.h("button", { key: '97dc7fabbb207fcc8b68ebf0a86f6c8a980dca13', class: {
                's-accordion-head-wrapper-toggle': true,
                active: !this.collapsed,
            }, onClick: e => {
                e.stopPropagation();
                this.toggleCollapse();
            } }, index.h("span", { key: '3b24faf71dcd332663a354310b2ce09f7879eddc', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? minus.plusIcon : minus.minusIcon })))))));
    }
    get host() { return index.getElement(this); }
};
SallaAccordionHead.style = sallaAccordionHeadCss;

exports.salla_accordion_body = SallaAccordionBody;
exports.salla_accordion_head = SallaAccordionHead;
