@cbpds/web-components/dist/components/cbp-expand.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 o,h as c,c as a}from"./p-c5a784ab.js";import{c as p,s as n}from"./p-9c1b2f31.js";import{d as r}from"./p-7abe098c.js";import{d as b}from"./p-0034159b.js";import{d}from"./p-f38b25da.js";import{d as s}from"./p-62fdbefd.js";import{d as i}from"./p-0c71f1af.js";const l=":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 x=l;const h=t(class t extends e{constructor(){super();this.__registerHost();this.expandClick=o(this,"expandClick",7);this.headingId=p("cbp-expand");this.open=false;this.label=undefined;this.headingLevel="h4";this.context=undefined;this.sx={}}handleClick(){this.open=!this.open;this.expandClick.emit({host:this.host,button:this.button,open:this.open});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 c(a,{key:"a5b442b17552e5a4e101880183c8874efc8bf6ed"},c("cbp-flex",{key:"983320d28cd53cca3e2734ed14daa2a4623c57cb",class:"cbp-expand--control",alignItems:"flex-start",gap:"var(--cbp-space-1x)",onClick:()=>this.handleClick()},c("cbp-flex-item",{key:"5239b88a65bd9a11da906b3a64bac23c206e9907"},c("cbp-button",{key:"a436e6b9665287289a1104982703676bf2ff6350",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},c("cbp-icon",{key:"cb1b86031c073f020aab679948fdf315e665aa72",name:"caret-down",size:"var(--cbp-space-3x)"}))),c("cbp-flex-item",{key:"f56a80450522eb275dbbd59c1fee5d5a42946579",id:this.headingId,flexGrow:1},this.host.querySelector('[slot="cbp-expand-label"]')?c("slot",{name:"cbp-expand-label"}):c("cbp-typography",{tag:this.headingLevel,variant:"heading-xs",context:this.context,sx:'{"line-height":"var(--cbp-space-6x)"}'},this.label))),c("div",{key:"ffca8ea49f62cb6453fafdb4080c86a3cb9b90d2",id:`${this.headingId}-content`,class:"cbp-expand--content"},c("slot",{key:"03bce5edf0bf10aef26271b07ebbfab1737f454d"})))}get host(){return this}static get style(){return x}},[4,"cbp-expand",{headingId:[1,"heading-id"],open:[516],label:[1],headingLevel:[1,"heading-level"],context:[513],sx:[8]}]);function f(){if(typeof customElements==="undefined"){return}const t=["cbp-expand","cbp-button","cbp-flex","cbp-flex-item","cbp-icon","cbp-typography"];t.forEach((t=>{switch(t){case"cbp-expand":if(!customElements.get(t)){customElements.define(t,h)}break;case"cbp-button":if(!customElements.get(t)){r()}break;case"cbp-flex":if(!customElements.get(t)){b()}break;case"cbp-flex-item":if(!customElements.get(t)){d()}break;case"cbp-icon":if(!customElements.get(t)){s()}break;case"cbp-typography":if(!customElements.get(t)){i()}break}}))}const v=h;const m=f;export{v as CbpExpand,m as defineCustomElement};
//# sourceMappingURL=cbp-expand.js.map