@cbpds/web-components
Version:
Web components for the CBP Design System.
85 lines (79 loc) • 5.42 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpCodeSnippetCss = ":root{--cbp-code-snippet-max-height:auto;--cbp-code-snippet-pre-padding:0 var(--cbp-space-1x);--cbp-code-snippet-color:var(--cbp-color-text-darkest);--cbp-code-snippet-color-dark:var(--cbp-color-text-lightest);--cbp-code-snippet-color-bg:var(--cbp-color-gray-cool-10);--cbp-code-snippet-color-bg-dark:var(--cbp-color-gray-cool-70)}[data-cbp-theme=light] cbp-code-snippet[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-code-snippet:not([context=dark-inverts]):not([context=light-always]){--cbp-code-snippet-color:var(--cbp-code-snippet-color-dark);--cbp-code-snippet-color-bg:var(--cbp-code-snippet-color-bg-dark)}cbp-code-snippet{color:var(--cbp-code-snippet-color);background-color:var(--cbp-code-snippet-color-bg);border-radius:var(--cbp-border-radius-soft)}cbp-code-snippet pre{margin:0;white-space:pre-wrap;display:inline;font-family:var(--cbp-font-family-roboto);scrollbar-width:thin}cbp-code-snippet pre code{padding:var(--cbp-code-snippet-pre-padding);font-family:var(--cbp-font-family-roboto-mono)}cbp-code-snippet[variant=block]{display:block;padding:var(--cbp-space-2x)}cbp-code-snippet[variant=block] pre{display:flex;--cbp-code-snippet-pre-padding:var(--cbp-space-2x);overflow:auto;max-height:var(--cbp-code-snippet-max-height)}cbp-code-snippet[variant=block] pre cbp-button{margin-left:auto}cbp-code-snippet[variant=block]>cbp-button{margin:var(--cbp-space-2x)}";
const CbpCodeSnippetStyle0 = cbpCodeSnippetCss;
const CbpCodeSnippet = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.copyTextClick = index.createEvent(this, "copyTextClick", 7);
this.toggleShowAllClick = index.createEvent(this, "toggleShowAllClick", 7);
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) || {};
}
utils.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 (index.h(index.Host, { key: '5d0491796d4878f0e9c17c0774ff520c5d95459a' }, index.h("div", { key: '829d12bcbe12ee7a3db31d17ac9826bd39871504', hidden: true }, index.h("slot", { key: '048b96703b9ab7082ab403675aa81b12f78335c4' })), index.h("pre", { key: '2fbaf882da3325e6f1e6602ea61d0dc3222d6fb9' }, index.h("code", { key: 'd7c38d2d2b868e0920e8935716f61d397bcd4d2e' }), this.variant == 'block' &&
index.h("cbp-button", { key: '1008f1877b575030cdcb3428d3e04fd15513d290', type: "button", fill: "ghost", color: "secondary", variant: 'square', accessibilityText: 'Copy', onClick: (e) => this.copyText(e), context: this.context }, index.h("cbp-icon", { key: 'f7e1ad554a9b4d2299337d8eff34ea4c03aea2c8', name: "clone" }))), (this.expanded || this.height && this.codeContainerHeight < this.codeBlockHeight) &&
index.h("cbp-button", { key: 'ac79e425a79f88bb920b43245a463497651c4a9a', fill: "ghost", color: "secondary", expanded: `${this.expanded}`, context: this.context, onClick: (e) => this.toggleShowAll(e) }, index.h("cbp-icon", { key: '82a635dedf06de3970101ec9f68c255f73e27129', name: "chevron-right", rotate: this.toggleButtonRotate }), this.toggleButtonText)));
}
get host() { return index.getElement(this); }
};
CbpCodeSnippet.style = CbpCodeSnippetStyle0;
exports.cbp_code_snippet = CbpCodeSnippet;
//# sourceMappingURL=cbp-code-snippet.cjs.entry.js.map