@postnord/web-components
Version:
PostNord Web Components
109 lines (108 loc) • 3.82 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. @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 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": [{
"name": "since",
"text": "v7.8.0"
}],
"text": "Only allow a single row to be open at once."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "single",
"defaultValue": "false"
},
"transparent": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "since",
"text": "v7.10.0"
}],
"text": "Optional prop that removes the default white background on the accordion row."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "transparent",
"defaultValue": "false"
}
};
}
static get elementRef() { return "hostElement"; }
static get listeners() {
return [{
"name": "togglerow",
"method": "handleSingleRow",
"target": undefined,
"capture": false,
"passive": false
}];
}
}