@salla.sa/twilight-components/dist/esm/salla-accordion-body_2.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { r as registerInstance, h, H as Host, c as createEvent, a as getElement } from './index-CFtXUFT2.js';
import { p as plusIcon, m as minusIcon } from './minus-DfeagqF1.js';

const sallaAccordionBodyCss = "";

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

const sallaAccordionHeadCss = "";

const SallaAccordionHead = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.accordionToggle = 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 (h(Host, { key: '9d88d243306cdf451c20d7068fbb9f48807b22e9', "data-collapsed": this.collapsed.toString(), onClick: () => this.toggleCollapse(), class: "s-accordion-head-wrapper" }, h("div", { key: 'bad4c5a913ce1c4581b09c0b6d96fcbdb4236638', class: "s-accordion-head-wrapper-start" }, h("slot", { key: 'acb83cec8cbca5771a9f84e81c0b955c3edad731', name: "title" }), h("slot", { key: 'a4ad42ea6fad4f452c4c218a9ee02dca0adb4a67', name: "progress" }), h("slot", { key: '96ab95d413dc906ac299079f4008816f01881990', name: "html" })), (this.collapsible || this.host.querySelector('[slot="note"]')) && (h("div", { key: '8f9666a5038cd7b1ac6e357c6920ea26d31c5f03', class: "s-accordion-head-wrapper-end" }, h("slot", { key: '14895e8c1385e91c14f046c9ae38ce5e4a4c9a60', name: "note" }), this.collapsible && (h("button", { key: '97dc7fabbb207fcc8b68ebf0a86f6c8a980dca13', class: {
                's-accordion-head-wrapper-toggle': true,
                active: !this.collapsed,
            }, onClick: e => {
                e.stopPropagation();
                this.toggleCollapse();
            } }, h("span", { key: '3b24faf71dcd332663a354310b2ce09f7879eddc', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? plusIcon : minusIcon })))))));
    }
    get host() { return getElement(this); }
};
SallaAccordionHead.style = sallaAccordionHeadCss;

export { SallaAccordionBody as salla_accordion_body, SallaAccordionHead as salla_accordion_head };