@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 4.21 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as t,c as e,h as o,a as i,g as c}from"./p-654179c2.js";import{s as p}from"./p-93ade441.js";const s=":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 a=s;const d=class{constructor(o){t(this,o);this.copyTextClick=e(this,"copyTextClick",7);this.toggleShowAllClick=e(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(t){navigator.clipboard.writeText(this.codeBlock);this.copyTextClick.emit({host:this.host,code:this.codeBlock,nativeEvent:t})}toggleShowAll(t){this.expanded=!this.expanded;this.toggleShowAllClick.emit({host:this.host,expanded:this.expanded,nativeEvent:t})}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}p(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 o(i,{key:"5d0491796d4878f0e9c17c0774ff520c5d95459a"},o("div",{key:"829d12bcbe12ee7a3db31d17ac9826bd39871504",hidden:true},o("slot",{key:"048b96703b9ab7082ab403675aa81b12f78335c4"})),o("pre",{key:"2fbaf882da3325e6f1e6602ea61d0dc3222d6fb9"},o("code",{key:"d7c38d2d2b868e0920e8935716f61d397bcd4d2e"}),this.variant=="block"&&o("cbp-button",{key:"1008f1877b575030cdcb3428d3e04fd15513d290",type:"button",fill:"ghost",color:"secondary",variant:"square",accessibilityText:"Copy",onClick:t=>this.copyText(t),context:this.context},o("cbp-icon",{key:"f7e1ad554a9b4d2299337d8eff34ea4c03aea2c8",name:"clone"}))),(this.expanded||this.height&&this.codeContainerHeight<this.codeBlockHeight)&&o("cbp-button",{key:"ac79e425a79f88bb920b43245a463497651c4a9a",fill:"ghost",color:"secondary",expanded:`${this.expanded}`,context:this.context,onClick:t=>this.toggleShowAll(t)},o("cbp-icon",{key:"82a635dedf06de3970101ec9f68c255f73e27129",name:"chevron-right",rotate:this.toggleButtonRotate}),this.toggleButtonText))}get host(){return c(this)}};d.style=a;export{d as cbp_code_snippet};
//# sourceMappingURL=p-df3ec835.entry.js.map