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

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{r as e,h as i,a as t,g as a}from"./p-8d4a80f0.js";import{s as r,d as c}from"./p-93ade441.js";const s=':root{--cbp-breadcrumb-color:var(--cbp-color-text-darkest);--cbp-breadcrumb-color-dark:var(--cbp-color-text-lightest);--cbp-breadcrumb-gap:var(--cbp-space-2x);--cbp-breadcrumb-divider:"/"}[data-cbp-theme=light] cbp-breadcrumb[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-breadcrumb:not([context=dark-inverts]):not([context=light-always]){--cbp-breadcrumb-color:var(--cbp-breadcrumb-color-dark)}cbp-breadcrumb{color:var(--cbp-breadcrumb-color);display:block}cbp-breadcrumb nav{display:flex;align-items:center;gap:var(--cbp-breadcrumb-gap);width:max-content;overflow:visible}cbp-breadcrumb nav>*:not(:first-child)::before{content:var(--cbp-breadcrumb-divider);margin-inline-end:var(--cbp-breadcrumb-gap);white-space:nowrap}cbp-breadcrumb nav a{white-space:nowrap}cbp-breadcrumb nav>:first-child{margin-inline-end:calc(var(--cbp-breadcrumb-gap) * -1)}cbp-breadcrumb nav cbp-menu:not([hidden]){display:flex;align-items:center;order:1}';const d=s;const b=class{constructor(i){e(this,i);this.breadcrumbs=[];this.children=[];this.sizeMap=[{size:"compact",width:undefined},{size:"medium",width:undefined},{size:"full",width:undefined}];this.divider=undefined;this.context=undefined;this.sx={};this.menuItems=[];this.sizeIndex=2}handleResize(e){this.sizeMap[this.sizeIndex]["width"]=this.nav.getBoundingClientRect().width;if(this.sizeIndex>0&&e<=this.sizeMap[this.sizeIndex]["width"]){this.resizeResponsive(this.sizeIndex-1)}if(this.sizeIndex<2&&e>this.sizeMap[this.sizeIndex+1]["width"]){this.resizeResponsive(this.sizeIndex+1)}}resizeResponsive(e){switch(this.sizeMap[e]["size"]){case"compact":this.children.forEach(((e,i)=>{if(i>0){e.setAttribute("hidden","")}}));this.menu.removeAttribute("hidden");break;case"medium":this.children.forEach(((e,i)=>{if(i>0&&i<this.children.length-2)e.setAttribute("hidden","");else e.removeAttribute("hidden");if(i==this.children.length-2)e.style.setProperty("order",`${i}`)}));this.menu.removeAttribute("hidden");break;case"full":this.children.forEach(((e,i)=>{if(i>0)e.removeAttribute("hidden")}));this.menu.setAttribute("hidden","");break;default:console.log(`cbp-breadcrumb - We should never see the default case... ${this.sizeMap[e]["size"]}.`)}this.sizeIndex=e;setTimeout((()=>{this.sizeMap[e]["width"]=this.nav.getBoundingClientRect().width;if(e==1&&this.ro.getBoundingClientRect().width<=this.nav.getBoundingClientRect().width){this.resizeResponsive(this.sizeIndex-1)}}),200)}createMenu(e){let t=[];e.forEach(((e,a)=>{let r=i("cbp-menu-item",{indentLevel:a},i("a",{href:`${e.href}`},a==0?i("cbp-flex",{gap:"var(--cbp-space-1x)"},i("cbp-icon",{name:"home"}),"Home"):e.textContent));t=[...t,r]}));this.menuItems=[...t]}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}r(this.host,Object.assign({"--cbp-breadcrumb-divider":this.divider?`"${this.divider}"`:undefined},this.sx))}componentDidLoad(){this.children=Array.from(this.nav.querySelectorAll(":scope > *"));this.breadcrumbs=Array.from(this.host.querySelectorAll("a[href]"));this.createMenu(this.breadcrumbs)}render(){return i(t,{key:"15a97123b7d7e4cd93144ef3d5e562976adf08ad"},i("cbp-resize-observer",{key:"de630aa74c106261386ef6388bb7b7c8e6785b29",debounce:50,ref:e=>this.ro=e,onResized:c((e=>{this.handleResize(e.detail.width)}),10)},i("nav",{key:"0a681228d17bba737243b93937c7df8df2491d51","aria-label":"Breadcrumb",ref:e=>this.nav=e},i("slot",{key:"b10c682176bafb7b3faae28772a0d92f9bc73125"}),i("cbp-menu",{key:"5451d83fc1bce9a1fd0c360ff20e2951e21ff82a",hidden:true,uid:"cbp-breadcrumbs-menu",ref:e=>this.menu=e},i("cbp-button",{key:"b26ee1be0af54258dd874caff638caa4b2796bfa",fill:"outline",color:"secondary","target-prop":"open",controls:"cbp-breadcrumbs-menu",accessibilityText:"Breadcrumbs Menu"},i("cbp-icon",{key:"2d94a896f32b3d4a8da775601642f3ba48d272da",name:"ellipsis-vertical",rotate:90})),[...this.menuItems]))))}get host(){return a(this)}};b.style=d;export{b as cbp_breadcrumb};
//# sourceMappingURL=p-beff08dc.entry.js.map