@cbpds/web-components
Version:
Web components for the CBP Design System.
119 lines (113 loc) • 6.2 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpBreadcrumbCss = ":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 CbpBreadcrumbStyle0 = cbpBreadcrumbCss;
const CbpBreadcrumb = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
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(width) {
this.sizeMap[this.sizeIndex]['width'] = this.nav.getBoundingClientRect().width;
if (this.sizeIndex > 0 && width <= this.sizeMap[this.sizeIndex]['width']) {
this.resizeResponsive(this.sizeIndex - 1);
}
if (this.sizeIndex < 2 && width > this.sizeMap[this.sizeIndex + 1]['width']) {
this.resizeResponsive(this.sizeIndex + 1);
}
}
resizeResponsive(mode) {
switch (this.sizeMap[mode]['size']) {
case "compact":
this.children.forEach((item, index) => {
if (index > 0) {
item.setAttribute('hidden', '');
}
});
this.menu.removeAttribute('hidden');
break;
case "medium":
this.children.forEach((item, index) => {
if (index > 0 && index < (this.children.length - 2))
item.setAttribute('hidden', '');
else
item.removeAttribute('hidden');
if (index == (this.children.length - 2))
item.style.setProperty('order', `${index}`);
});
this.menu.removeAttribute('hidden');
break;
case "full":
this.children.forEach((item, index) => {
if (index > 0)
item.removeAttribute('hidden');
});
this.menu.setAttribute('hidden', '');
break;
default:
console.log(`cbp-breadcrumb - We should never see the default case... ${this.sizeMap[mode]['size']}.`);
}
this.sizeIndex = mode;
setTimeout(() => {
this.sizeMap[mode]['width'] = this.nav.getBoundingClientRect().width;
if (mode == 1 && this.ro.getBoundingClientRect().width <= this.nav.getBoundingClientRect().width) {
this.resizeResponsive(this.sizeIndex - 1);
}
}, 200);
}
createMenu(breadcrumbs) {
let menuItems = [];
breadcrumbs.forEach((item, index$1) => {
let newItem = index.h("cbp-menu-item", { indentLevel: index$1 }, index.h("a", { href: `${item.href}` }, index$1 == 0
? index.h("cbp-flex", { gap: "var(--cbp-space-1x)" }, index.h("cbp-icon", { name: "home" }), "Home")
: item.textContent));
menuItems = [...menuItems, newItem];
});
this.menuItems = [...menuItems];
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(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 (index.h(index.Host, { key: 'aefe4f46cc33ca9c9408388446d40aa29967fbe2' }, index.h("cbp-resize-observer", { key: '5b9dc25328a16bcfbe6fb1911d9b20d29497cba8', debounce: 50, ref: el => this.ro = el, onResized: utils.debounce((e) => {
this.handleResize(e.detail.width);
}, 10) }, index.h("nav", { key: 'cfc5a1c3da1d19acca7a8f6c5a4fd13732c423c0', "aria-label": "Breadcrumb", ref: el => this.nav = el }, index.h("slot", { key: 'ad37124823732555873aa8eaeb46f25f29e1cf2f' }), index.h("cbp-menu", { key: 'f04d7fe0916f5c2a79fdd902807a39ed85688684', hidden: true, uid: "cbp-breadcrumbs-menu", ref: el => this.menu = el }, index.h("cbp-button", { key: '1dfc66633693b13d4d415410b146b7416ead0087', fill: "outline", color: "secondary", "target-prop": "open", controls: "cbp-breadcrumbs-menu", accessibilityText: "Breadcrumbs Menu" }, index.h("cbp-icon", { key: '186d2d7865b97ccc15c8a73d4ce2de4a9e685d8c', name: "ellipsis-vertical", rotate: 90 })), [...this.menuItems])))));
}
get host() { return index.getElement(this); }
};
CbpBreadcrumb.style = CbpBreadcrumbStyle0;
exports.cbp_breadcrumb = CbpBreadcrumb;
//# sourceMappingURL=cbp-breadcrumb.cjs.entry.js.map