@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-c5a784ab.js";import{s}from"./p-9c1b2f31.js";import{d as p}from"./p-7abe098c.js";import{d as a}from"./p-62fdbefd.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 b=n;const d=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(){navigator.clipboard.writeText(this.codeBlock);this.copyTextClick.emit({host:this.host})}toggleShowAll(){this.expanded=!this.expanded;this.toggleShowAllClick.emit({host:this.host,expanded:this.expanded})}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:"e0d90a998aab2be673a32bc9059c3c35bb2fc1cb"},o("div",{key:"f91a4fa6b295eb77eedd4c577fb0bf5bce37a221",hidden:true},o("slot",{key:"efc136b91dbc712714f19a42cdc2326c2f2b268b"})),o("pre",{key:"2c0643779000eb13742292ef873898555ba143cc"},o("code",{key:"1ee0b39453cd8346bd72654cc9c087a1f5e601e9"}),this.variant=="block"&&o("cbp-button",{key:"932b3e2a44da8c8d5c64ef70de561bbdc9ab581e",type:"button",fill:"ghost",color:"secondary",variant:"square",accessibilityText:"Copy",onClick:()=>this.copyText(),context:this.context},o("cbp-icon",{key:"398505c4dde003e85c6f45352f8a1b9e826e2afa",name:"clone"}))),(this.expanded||this.height&&this.codeContainerHeight<this.codeBlockHeight)&&o("cbp-button",{key:"1f236234d6c7d1d06bfa9e8801a23480db884b63",fill:"ghost",color:"secondary",expanded:`${this.expanded}`,context:this.context,onClick:()=>this.toggleShowAll()},o("cbp-icon",{key:"ed310d51bc4d04e7f6ec35e8eba27b75b289569b",name:"chevron-right",rotate:this.toggleButtonRotate}),this.toggleButtonText))}get host(){return this}static get style(){return b}},[4,"cbp-code-snippet",{variant:[513],height:[1],context:[513],sx:[8],expanded:[32],codeContainerHeight:[32],codeBlockHeight:[32]}]);function r(){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,d)}break;case"cbp-button":if(!customElements.get(t)){p()}break;case"cbp-icon":if(!customElements.get(t)){a()}break}}))}const h=d;const l=r;export{h as CbpCodeSnippet,l as defineCustomElement};
//# sourceMappingURL=cbp-code-snippet.js.map