@postnord/web-components/components/pn-accordion.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';

const pnAccordionCss = "pn-accordion{position:relative;background-color:#ffffff;display:flex;align-items:stretch;flex-direction:column;gap:0.25em}pn-accordion[data-transparent]{background-color:transparent}pn-accordion>pn-accordion-row+pn-accordion-row:after{content:\"\";position:absolute;top:-0.125em;left:0.25em;width:calc(100% - 0.5em);height:0;border-top:0.0625em solid #d3cecb}";

const PnAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PnAccordion extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
    }
    mo;
    closeEvent = new CustomEvent('rowstate', { detail: false });
    get hostElement() { return this; }
    /** Only allow a single row to be open at once. @since v7.8.0 */
    single = false;
    /** Optional prop that removes the default white background on the accordion row. @since v7.10.0 */
    transparent = false;
    connectedCallback() {
        this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
        this.mo.observe(this.hostElement, { childList: true, subtree: true });
    }
    disconnectedCallback() {
        this.mo.disconnect();
    }
    handleSingleRow({ detail }) {
        if (!this.single)
            return;
        const element = detail.element;
        const activeRow = element.closest('pn-accordion-row');
        const rows = Array.from(this.hostElement.querySelectorAll('pn-accordion-row'));
        rows.forEach(row => !row.isSameNode(activeRow) && row.dispatchEvent(this.closeEvent));
    }
    render() {
        return (h(Host, { key: 'd8cd9ef7bd0d93aafda0e6955a9ad35ec81d55ae', class: "pn-accordion", "data-transparent": this.transparent }, h("slot", { key: '43233bb6107dcc4608edb0086ef347d7c936556f' })));
    }
    static get style() { return pnAccordionCss; }
}, [260, "pn-accordion", {
        "single": [4],
        "transparent": [4]
    }, [[0, "togglerow", "handleSingleRow"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-accordion"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-accordion":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnAccordion$1);
            }
            break;
    } });
}

const PnAccordion = PnAccordion$1;
const defineCustomElement = defineCustomElement$1;

export { PnAccordion, defineCustomElement };
//# sourceMappingURL=pn-accordion.js.map

//# sourceMappingURL=pn-accordion.js.map