@cbpds/web-components/dist/components/cbp-breadcrumb.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as e,H as t,h as c,c as i}from"./p-c5a784ab.js";import{s,d as r}from"./p-9c1b2f31.js";import{d as a}from"./p-7abe098c.js";import{d as b}from"./p-0034159b.js";import{d}from"./p-62fdbefd.js";import{d as n}from"./p-a04baf26.js";import{d as o}from"./p-2cccdb8e.js";import{d as p}from"./p-4f2249d2.js";const m=':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 h=m;const f=e(class e extends t{constructor(){super();this.__registerHost();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,t)=>{if(t>0){e.setAttribute("hidden","")}}));this.menu.removeAttribute("hidden");break;case"medium":this.children.forEach(((e,t)=>{if(t>0&&t<this.children.length-2)e.setAttribute("hidden","");else e.removeAttribute("hidden");if(t==this.children.length-2)e.style.setProperty("order",`${t}`)}));this.menu.removeAttribute("hidden");break;case"full":this.children.forEach(((e,t)=>{if(t>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,i)=>{let s=c("cbp-menu-item",{indentLevel:i},c("a",{href:`${e.href}`},i==0?c("cbp-flex",{gap:"var(--cbp-space-1x)"},c("cbp-icon",{name:"home"}),"Home"):e.textContent));t=[...t,s]}));this.menuItems=[...t]}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}s(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 c(i,{key:"15a97123b7d7e4cd93144ef3d5e562976adf08ad"},c("cbp-resize-observer",{key:"de630aa74c106261386ef6388bb7b7c8e6785b29",debounce:50,ref:e=>this.ro=e,onResized:r((e=>{this.handleResize(e.detail.width)}),10)},c("nav",{key:"0a681228d17bba737243b93937c7df8df2491d51","aria-label":"Breadcrumb",ref:e=>this.nav=e},c("slot",{key:"b10c682176bafb7b3faae28772a0d92f9bc73125"}),c("cbp-menu",{key:"5451d83fc1bce9a1fd0c360ff20e2951e21ff82a",hidden:true,uid:"cbp-breadcrumbs-menu",ref:e=>this.menu=e},c("cbp-button",{key:"b26ee1be0af54258dd874caff638caa4b2796bfa",fill:"outline",color:"secondary","target-prop":"open",controls:"cbp-breadcrumbs-menu",accessibilityText:"Breadcrumbs Menu"},c("cbp-icon",{key:"2d94a896f32b3d4a8da775601642f3ba48d272da",name:"ellipsis-vertical",rotate:90})),[...this.menuItems]))))}get host(){return this}static get style(){return h}},[4,"cbp-breadcrumb",{divider:[1],context:[513],sx:[8],menuItems:[32],sizeIndex:[32]}]);function u(){if(typeof customElements==="undefined"){return}const e=["cbp-breadcrumb","cbp-button","cbp-flex","cbp-icon","cbp-menu","cbp-menu-item","cbp-resize-observer"];e.forEach((e=>{switch(e){case"cbp-breadcrumb":if(!customElements.get(e)){customElements.define(e,f)}break;case"cbp-button":if(!customElements.get(e)){a()}break;case"cbp-flex":if(!customElements.get(e)){b()}break;case"cbp-icon":if(!customElements.get(e)){d()}break;case"cbp-menu":if(!customElements.get(e)){n()}break;case"cbp-menu-item":if(!customElements.get(e)){o()}break;case"cbp-resize-observer":if(!customElements.get(e)){p()}break}}))}const l=f;const v=u;export{l as CbpBreadcrumb,v as defineCustomElement};
//# sourceMappingURL=cbp-breadcrumb.js.map