@cbpds/web-components/dist/cbp-web-components/p-19554cb7.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{r as t,c,h as o,a as e,g as a}from"./p-654179c2.js";import{c as p,s as n}from"./p-93ade441.js";const r=":root{--cbp-accordion-item-control-font-size:var(--cbp-font-size-heading-sm);--cbp-accordion-item-control-font-weight:var(--cbp-font-weight-semibold);--cbp-expand-control-gap:var(--cbp-space-1x);--cbp-expand-control-padding:var(--cbp-space-3x);--cbp-expand-content-padding:var(--cbp-space-3x);--cbp-expand-margin-bottom:var(--cbp-space-2x);--cbp-expand-color:var(--cbp-color-text-darkest);--cbp-expand-color-dark:var(--cbp-color-text-lightest);--cbp-expand-button-color-text:var(--cbp-color-text-lightest);--cbp-expand-button-color-text-dark:var(--cbp-color-text-darkest);--cbp-expand-button-color-fill:var(--cbp-color-interactive-secondary-darker);--cbp-expand-button-color-fill-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-expand-button-color-text-hover:var(--cbp-color-text-lightest);--cbp-expand-button-color-text-hover-dark:var(--cbp-color-text-darkest);--cbp-expand-button-color-fill-hover:var(--cbp-color-interactive-secondary-darker);--cbp-expand-button-color-fill-hover-dark:var(--cbp-color-interactive-secondary-lighter)}[data-cbp-theme=light] cbp-expand[context*=dark],[data-cbp-theme=dark] cbp-expand:not([context=dark-inverts]):not([context=light-always]){--cbp-expand-color:var(--cbp-expand-color-dark)}cbp-expand{display:block;margin-bottom:var(--cbp-expand-margin-bottom);color:var(--cbp-expand-color)}cbp-expand[open]{--cbp-expand-rotate-icon:rotate(-180deg)}cbp-expand:not([open]) .cbp-expand--content{display:none}cbp-expand[open] .cbp-expand--control{--cbp-accordion-rotate-icon:rotate(90deg);--cbp-accordion-toggle:expandTo 500ms}cbp-expand .cbp-expand--control{font-size:var(--cbp-expand-control-font-size);cursor:pointer}cbp-expand .cbp-expand--control .cbp-expand--toggle{--cbp-button-padding:0;--cbp-button-border-width:0}cbp-expand .cbp-expand--control .cbp-expand--toggle cbp-icon svg{transition:transform 150ms;transform:var(--cbp-expand-rotate-icon)}cbp-expand .cbp-expand--control:hover .cbp-expand--toggle{--cbp-button-color:var(--cbp-expand-button-color-text);--cbp-button-color-dark:var(--cbp-expand-button-color-text-dark);--cbp-button-color-bg:var(--cbp-expand-button-color-fill);--cbp-button-color-bg-dark:var(--cbp-expand-button-color-fill-dark);--cbp-button-color-hover:var(--cbp-expand-button-color-text-hover);--cbp-button-color-hover-dark:var(--cbp-expand-button-color-text-hover-dark);--cbp-button-color-bg-hover:var(--cbp-expand-button-color-fill-hover);--cbp-button-color-bg-hover-dark:var(--cbp-expand-button-color-fill-hover-dark)}cbp-expand .cbp-expand--content{padding-left:var(--cbp-space-7x)}";const b=r;const d=class{constructor(o){t(this,o);this.expandClick=c(this,"expandClick",7);this.headingId=p("cbp-expand");this.open=false;this.label=undefined;this.headingLevel="h4";this.context=undefined;this.sx={}}handleClick(t){this.open=!this.open;this.expandClick.emit({host:this.host,button:this.button,open:this.open,nativeEvent:t});this.button.focus()}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}n(this.host,Object.assign({},this.sx))}componentDidLoad(){this.button=this.control.querySelector("button")}render(){return o(e,{key:"41b5f74ecda0e81b6732c35caf09a89b3f9b8f13"},o("cbp-flex",{key:"04ae4bc64f1c84c04fc2ed7582e691c42c6f0a9d",class:"cbp-expand--control",alignItems:"flex-start",gap:"var(--cbp-space-1x)",onClick:t=>this.handleClick(t)},o("cbp-flex-item",{key:"8662df48bf7f4465a641aa94f8e4a7fc03b840c9"},o("cbp-button",{key:"d9ab949a0cbc894d615c5d4dad4c13074668a0a1",class:"cbp-expand--toggle",fill:"ghost",color:"secondary",width:"var(--cbp-space-6x)",height:"var(--cbp-space-6x)",context:this.context,controls:`${this.headingId}-content`,expanded:`${this.open}`,"aria-labelledby":this.headingId,ref:t=>this.control=t},o("cbp-icon",{key:"9713c5f0e2a653c5d1f7d3606f4605d57cf6bb4c",name:"caret-down",size:"var(--cbp-space-3x)"}))),o("cbp-flex-item",{key:"afb915a26594cf02253d8f80ea0d1a40165ed3ac",id:this.headingId,flexGrow:1},this.host.querySelector('[slot="cbp-expand-label"]')?o("slot",{name:"cbp-expand-label"}):o("cbp-typography",{tag:this.headingLevel,variant:"heading-xs",context:this.context,sx:'{"line-height":"var(--cbp-space-6x)"}'},this.label))),o("div",{key:"e7dcc5dc7b9a21fa0d0b7e936506dc2531bba110",id:`${this.headingId}-content`,class:"cbp-expand--content"},o("slot",{key:"cc775526b7a7aa15597d67339b67caf97692e103"})))}get host(){return a(this)}};d.style=b;export{d as cbp_expand};
//# sourceMappingURL=p-19554cb7.entry.js.map