@postnord/web-components
Version:
PostNord Web Components
100 lines (99 loc) • 3.37 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 {
constructor() {
this.single = false;
this.transparent = false;
}
mo;
closeEvent = new CustomEvent('rowstate', { detail: false });
hostElement;
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: '8fc540d4b35f12ecc5fd1da8dc79975dcf966742', class: "pn-accordion", "data-transparent": this.transparent }, h("slot", { key: '0e93c18e9d013b3ceb9bb4d313dcb833823d1154' })));
}
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."
},
"attribute": "single",
"reflect": false,
"defaultValue": "false"
},
"transparent": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Optional prop that removes the default white background on the accordion row"
},
"attribute": "transparent",
"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