@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-9caf8482.js";import{s,d as r}from"./p-9c1b2f31.js";import{d as a}from"./p-c79ac5f9.js";import{d as b}from"./p-3facb62e.js";import{d}from"./p-4cdb3206.js";import{d as n}from"./p-5d97a2bf.js";import{d as o}from"./p-698b57d9.js";import{d as p}from"./p-36a224bc.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 u=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:"aefe4f46cc33ca9c9408388446d40aa29967fbe2"},c("cbp-resize-observer",{key:"5b9dc25328a16bcfbe6fb1911d9b20d29497cba8",debounce:50,ref:e=>this.ro=e,onResized:r((e=>{this.handleResize(e.detail.width)}),10)},c("nav",{key:"cfc5a1c3da1d19acca7a8f6c5a4fd13732c423c0","aria-label":"Breadcrumb",ref:e=>this.nav=e},c("slot",{key:"ad37124823732555873aa8eaeb46f25f29e1cf2f"}),c("cbp-menu",{key:"f04d7fe0916f5c2a79fdd902807a39ed85688684",hidden:true,uid:"cbp-breadcrumbs-menu",ref:e=>this.menu=e},c("cbp-button",{key:"1dfc66633693b13d4d415410b146b7416ead0087",fill:"outline",color:"secondary","target-prop":"open",controls:"cbp-breadcrumbs-menu",accessibilityText:"Breadcrumbs Menu"},c("cbp-icon",{key:"186d2d7865b97ccc15c8a73d4ce2de4a9e685d8c",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 f(){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,u)}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=u;const v=f;export{l as CbpBreadcrumb,v as defineCustomElement};
//# sourceMappingURL=cbp-breadcrumb.js.map