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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-DWu-2oJc.js');

const pnAccordionCss = () => `${index.transformTag("pn-accordion")}{position:relative;background-color:#ffffff;display:flex;align-items:stretch;flex-direction:column;gap:0.25em}${index.transformTag("pn-accordion")}[data-transparent]{background-color:transparent}${index.transformTag("pn-accordion")}>${index.transformTag("pn-accordion-row")}+${index.transformTag("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 = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    mo;
    closeEvent = new CustomEvent('rowstate', { detail: false });
    get hostElement() { return index.getElement(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(() => index.forceUpdate(this.hostElement));
        this.mo.observe(this.hostElement, { childList: true, subtree: true });
    }
    disconnectedCallback() {
        this.mo.disconnect();
    }
    handleSingleRow({ detail }) {
        if (!this.single)
            return;
        const rowName = index.transformTag('pn-accordion-row');
        const element = detail.element;
        const activeRow = element.closest(rowName);
        const rows = Array.from(this.hostElement.querySelectorAll(rowName));
        rows.forEach(row => !row.isSameNode(activeRow) && row.dispatchEvent(this.closeEvent));
    }
    render() {
        return (index.h(index.Host, { key: 'e6a1b3b18e0b6f366191f7b25154349e8fb3f81d', class: "pn-accordion", "data-transparent": this.transparent }, index.h("slot", { key: '4bdd61aafbb42520ed3af9e50045376104bee491' })));
    }
};
PnAccordion.style = pnAccordionCss();

exports.pn_accordion = PnAccordion;