@postnord/web-components
Version:
PostNord Web Components
82 lines (81 loc) • 2.7 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host, forceUpdate } from "@stencil/core";
/**
* The `pn-accordion` is a wrapper for `pn-accordion-row` components.
* This component gives the accordion rows some space between each one and provides the `single` feature.
* Which will force the rule that only a single row to be open at one time.
*/
export class PnAccordion {
mo;
closeEvent = new CustomEvent('rowstate', { detail: false });
hostElement;
/** Only allow a single row to be open at once. */
single = 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: '800bf9af052f84af2f2fa3ec4e2351e8fd54da89' }, h("slot", { key: '53c8eac1eda11eda881f50b37476f3600ea3897b' })));
}
static get is() { return "pn-accordion"; }
static get originalStyleUrls() {
return {
"$": ["pn-accordion.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-accordion.css"]
};
}
static get properties() {
return {
"single": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Only allow a single row to be open at once."
},
"getter": false,
"setter": false,
"attribute": "single",
"reflect": false,
"defaultValue": "false"
}
};
}
static get elementRef() { return "hostElement"; }
static get listeners() {
return [{
"name": "togglerow",
"method": "handleSingleRow",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=pn-accordion.js.map