@cbpds/web-components
Version:
Web components for the CBP Design System.
196 lines (195 loc) • 7.96 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpCodeSnippet {
constructor() {
this.toggleButtonText = 'Show More';
this.toggleButtonRotate = 90;
this.variant = 'inline';
this.height = undefined;
this.context = undefined;
this.sx = {};
this.expanded = false;
this.codeContainerHeight = undefined;
this.codeBlockHeight = undefined;
}
copyText(e) {
navigator.clipboard.writeText(this.codeBlock);
this.copyTextClick.emit({
host: this.host,
code: this.codeBlock,
nativeEvent: e
});
}
toggleShowAll(e) {
this.expanded = !this.expanded;
this.toggleShowAllClick.emit({
host: this.host,
expanded: this.expanded,
nativeEvent: e
});
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
if (this.height != null && !this.expanded) {
this.host.style.setProperty('--cbp-code-snippet-max-height', this.height);
}
this.codeBlock = this.host.querySelector('div').innerHTML.trim();
this.host.querySelector('code').innerHTML = this.codeBlock.replace(/</g, '<').replace(/>/g, '>');
setTimeout(() => {
this.codeContainerHeight = this.host.offsetHeight;
this.codeBlockHeight = this.host.querySelector('pre').scrollHeight;
}, 100);
}
render() {
if (this.variant == "block" && !!this.height) {
if (this.expanded) {
this.host.style.setProperty('--cbp-code-snippet-max-height', 'auto');
this.toggleButtonRotate = 270;
this.toggleButtonText = 'Show Less';
}
else {
this.host.style.setProperty('--cbp-code-snippet-max-height', this.height);
this.toggleButtonRotate = 90;
this.toggleButtonText = 'Show More';
}
}
return (h(Host, { key: '5d0491796d4878f0e9c17c0774ff520c5d95459a' }, h("div", { key: '829d12bcbe12ee7a3db31d17ac9826bd39871504', hidden: true }, h("slot", { key: '048b96703b9ab7082ab403675aa81b12f78335c4' })), h("pre", { key: '2fbaf882da3325e6f1e6602ea61d0dc3222d6fb9' }, h("code", { key: 'd7c38d2d2b868e0920e8935716f61d397bcd4d2e' }), this.variant == 'block' &&
h("cbp-button", { key: '1008f1877b575030cdcb3428d3e04fd15513d290', type: "button", fill: "ghost", color: "secondary", variant: 'square', accessibilityText: 'Copy', onClick: (e) => this.copyText(e), context: this.context }, h("cbp-icon", { key: 'f7e1ad554a9b4d2299337d8eff34ea4c03aea2c8', name: "clone" }))), (this.expanded || this.height && this.codeContainerHeight < this.codeBlockHeight) &&
h("cbp-button", { key: 'ac79e425a79f88bb920b43245a463497651c4a9a', fill: "ghost", color: "secondary", expanded: `${this.expanded}`, context: this.context, onClick: (e) => this.toggleShowAll(e) }, h("cbp-icon", { key: '82a635dedf06de3970101ec9f68c255f73e27129', name: "chevron-right", rotate: this.toggleButtonRotate }), this.toggleButtonText)));
}
static get is() { return "cbp-code-snippet"; }
static get originalStyleUrls() {
return {
"$": ["cbp-code-snippet.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-code-snippet.css"]
};
}
static get properties() {
return {
"variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'inline' | 'block'",
"resolved": "\"block\" | \"inline\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies inline or block layouts of the code snippet. Defaults to inline."
},
"attribute": "variant",
"reflect": true,
"defaultValue": "'inline'"
},
"height": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the height (in CSS units) for a multiple line block variant while not expanded."
},
"attribute": "height",
"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 states() {
return {
"expanded": {},
"codeContainerHeight": {},
"codeBlockHeight": {}
};
}
static get events() {
return [{
"method": "copyTextClick",
"name": "copyTextClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits a custom event when the \"Copy\" button is activated, copying the code to the clipboard."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "toggleShowAllClick",
"name": "toggleShowAllClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits a custom event when the the \"Show More/Less\" control is activated (for code blocks overflowing the specified height)."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=cbp-code-snippet.js.map