@cbpds/web-components/dist/cbp-web-components/p-6074cfe5.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 c}from"./p-654179c2.js";import{s as a,d as r}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,c)=>{let a=i("cbp-menu-item",{indentLevel:c},i("a",{href:`${e.href}`},c==0?i("cbp-flex",{gap:"var(--cbp-space-1x)"},i("cbp-icon",{name:"home"}),"Home"):e.textContent));t=[...t,a]}));this.menuItems=[...t]}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}a(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:"aefe4f46cc33ca9c9408388446d40aa29967fbe2"},i("cbp-resize-observer",{key:"5b9dc25328a16bcfbe6fb1911d9b20d29497cba8",debounce:50,ref:e=>this.ro=e,onResized:r((e=>{this.handleResize(e.detail.width)}),10)},i("nav",{key:"cfc5a1c3da1d19acca7a8f6c5a4fd13732c423c0","aria-label":"Breadcrumb",ref:e=>this.nav=e},i("slot",{key:"ad37124823732555873aa8eaeb46f25f29e1cf2f"}),i("cbp-menu",{key:"f04d7fe0916f5c2a79fdd902807a39ed85688684",hidden:true,uid:"cbp-breadcrumbs-menu",ref:e=>this.menu=e},i("cbp-button",{key:"1dfc66633693b13d4d415410b146b7416ead0087",fill:"outline",color:"secondary","target-prop":"open",controls:"cbp-breadcrumbs-menu",accessibilityText:"Breadcrumbs Menu"},i("cbp-icon",{key:"186d2d7865b97ccc15c8a73d4ce2de4a9e685d8c",name:"ellipsis-vertical",rotate:90})),[...this.menuItems]))))}get host(){return c(this)}};b.style=d;export{b as cbp_breadcrumb};
//# sourceMappingURL=p-6074cfe5.entry.js.map