@cbpds/web-components
Version:
Web components for the CBP Design System.
181 lines (180 loc) • 7.51 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps, createNamespaceKey } from "../../utils/utils";
export class CbpExpand {
constructor() {
this.headingId = createNamespaceKey('cbp-expand');
this.open = false;
this.label = undefined;
this.headingLevel = 'h4';
this.context = undefined;
this.sx = {};
}
handleClick(e) {
this.open = !this.open;
this.expandClick.emit({
host: this.host,
button: this.button,
open: this.open,
nativeEvent: e
});
this.button.focus();
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.button = this.control.querySelector('button');
}
render() {
return (h(Host, { key: '41b5f74ecda0e81b6732c35caf09a89b3f9b8f13' }, h("cbp-flex", { key: '04ae4bc64f1c84c04fc2ed7582e691c42c6f0a9d', class: "cbp-expand--control", alignItems: "flex-start", gap: "var(--cbp-space-1x)", onClick: e => this.handleClick(e) }, h("cbp-flex-item", { key: '8662df48bf7f4465a641aa94f8e4a7fc03b840c9' }, h("cbp-button", { key: 'd9ab949a0cbc894d615c5d4dad4c13074668a0a1', class: "cbp-expand--toggle", fill: "ghost", color: "secondary", width: "var(--cbp-space-6x)", height: "var(--cbp-space-6x)", context: this.context, controls: `${this.headingId}-content`, expanded: `${this.open}`, "aria-labelledby": this.headingId, ref: el => (this.control = el) }, h("cbp-icon", { key: '9713c5f0e2a653c5d1f7d3606f4605d57cf6bb4c', name: "caret-down", size: "var(--cbp-space-3x)" }))), h("cbp-flex-item", { key: 'afb915a26594cf02253d8f80ea0d1a40165ed3ac', id: this.headingId, flexGrow: 1 }, this.host.querySelector('[slot="cbp-expand-label"]')
? h("slot", { name: "cbp-expand-label" })
: h("cbp-typography", { tag: this.headingLevel, variant: "heading-xs", context: this.context, sx: '{"line-height":"var(--cbp-space-6x)"}' }, this.label))), h("div", { key: 'e7dcc5dc7b9a21fa0d0b7e936506dc2531bba110', id: `${this.headingId}-content`, class: "cbp-expand--content" }, h("slot", { key: 'cc775526b7a7aa15597d67339b67caf97692e103' }))));
}
static get is() { return "cbp-expand"; }
static get originalStyleUrls() {
return {
"$": ["cbp-expand.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-expand.css"]
};
}
static get properties() {
return {
"headingId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies an optional `id` for the component item heading, also used to generate an `id` for \nthe content wrapper. If this property is not specified, a unique string will \nautomatically be generated."
},
"attribute": "heading-id",
"reflect": false,
"defaultValue": "createNamespaceKey('cbp-expand')"
},
"open": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies whether the content is expanded and visible."
},
"attribute": "open",
"reflect": true,
"defaultValue": "false"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The component control label."
},
"attribute": "label",
"reflect": false
},
"headingLevel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
"resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The heading level of the accordion item control. Defaults to h3."
},
"attribute": "heading-level",
"reflect": false,
"defaultValue": "'h4'"
},
"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 events() {
return [{
"method": "expandClick",
"name": "expandClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the accordion item control is activated."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-expand.js.map