@cbpds/web-components
Version:
Web components for the CBP Design System.
111 lines (110 loc) • 3.79 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpAccordion {
constructor() {
this.multiple = undefined;
this.context = undefined;
this.sx = {};
}
init() {
this.items = Array.from(this.host.querySelectorAll('cbp-accordion-item'));
this.items.forEach(item => {
item.addEventListener('accordionItemClick', (e) => {
this.accordionActionHandler(e);
});
});
}
accordionActionHandler({ detail: { host, open } }) {
if (!this.multiple && open) {
this.host.querySelectorAll('cbp-accordion-item').forEach((item) => {
if (item !== host) {
item.open = false;
}
});
}
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.init();
}
render() {
return (h(Host, { key: '5acc53f5aff32b43633a3af9baebdb7484c15205' }, h("slot", { key: '2e09b474600d1daf11e278b3d8360d6324bbabc4' })));
}
static get is() { return "cbp-accordion"; }
static get originalStyleUrls() {
return {
"$": ["cbp-accordion.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-accordion.css"]
};
}
static get properties() {
return {
"multiple": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether multiple accordion items can be open at the same time. Defaults to false."
},
"attribute": "multiple",
"reflect": false
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-accordion.js.map