@cbpds/web-components/dist/components/cbp-code-snippet.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as t,H as e,d as c,h as o,c as i}from"./p-9caf8482.js";import{s}from"./p-9c1b2f31.js";import{d as p}from"./p-c79ac5f9.js";import{d as a}from"./p-4cdb3206.js";const n=":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 d=n;const r=t(class t extends e{constructor(){super();this.__registerHost();this.copyTextClick=c(this,"copyTextClick",7);this.toggleShowAllClick=c(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)||{}}s(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,"&lt;").replace(/>/g,"&gt;");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 this}static get style(){return d}},[4,"cbp-code-snippet",{variant:[513],height:[1],context:[513],sx:[8],expanded:[32],codeContainerHeight:[32],codeBlockHeight:[32]}]);function b(){if(typeof customElements==="undefined"){return}const t=["cbp-code-snippet","cbp-button","cbp-icon"];t.forEach((t=>{switch(t){case"cbp-code-snippet":if(!customElements.get(t)){customElements.define(t,r)}break;case"cbp-button":if(!customElements.get(t)){p()}break;case"cbp-icon":if(!customElements.get(t)){a()}break}}))}const h=r;const l=b;export{h as CbpCodeSnippet,l as defineCustomElement};
//# sourceMappingURL=cbp-code-snippet.js.map