@salla.sa/twilight-components/dist/components/salla-accordion2.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const sallaAccordionCss = "";

const SallaAccordion = /*@__PURE__*/ proxyCustomElement(class SallaAccordion extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /** Should the accordion be collapsible or not. Default is true. */
        this.collapsible = true;
        /** Whether the accordion has a border. Default is false. */
        this.bordered = false;
        /** The size of the accordion elements. */
        this.size = "md";
        /** Detect if accordion collapsed or not. */
        this.collapsed = true;
        /** Represents the direction of the layout. */
        this.dir = document.dir || 'rtl';
    }
    directionChangedHandler(event) {
        this.dir = event.detail.dir;
    }
    handleCollapse(event) {
        this.collapsed = event.detail.payload.collapsed;
    }
    setcollapsibleProp() {
        const head = this.host.querySelector('salla-accordion-head');
        if (this.collapsible && head) {
            head.setAttribute('collapsible', 'true');
            head.setAttribute('collapsed', this.collapsed.toString());
        }
    }
    componentDidRender() {
        this.setcollapsibleProp();
        const body = this.host.querySelector('salla-accordion-body');
        if (this.collapsible) {
            this.host.setAttribute('data-collapsed', this.collapsed.toString());
            body?.setAttribute('data-collapsed', this.collapsed.toString());
        }
    }
    render() {
        return (h(Host, { key: 'fb12197f13d8836304bfebb14400c79c8c4d31f0', class: `s-accordion-wrapper ${this.dir} ${this.bordered ? 's-accordion-wrapper-bordered' : ''} ${this.size ? `size-${this.size}` : ''}`, "data-collapsed": this.collapsed.toString() }, h("slot", { key: '460e8d7238bf9f014fe0bbb6c0da592c8cb3e15e' })));
    }
    get host() { return this; }
    static get style() { return sallaAccordionCss; }
}, [4, "salla-accordion", {
        "collapsible": [4],
        "bordered": [4],
        "size": [1],
        "collapsed": [1540],
        "dir": [32]
    }, [[4, "salla::language.change", "directionChangedHandler"], [0, "accordionToggle", "handleCollapse"]]]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-accordion"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-accordion":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaAccordion);
            }
            break;
    } });
}
defineCustomElement();

export { SallaAccordion as S, defineCustomElement as d };