v4web-components
Version:
Stencil Component Starter
51 lines (47 loc) • 3.77 kB
JavaScript
import { r as registerInstance, h } from './index-0b720089.js';
const labDsBreadcrumbCss = ".v4-context-menu.sc-lab-ds-breadcrumb{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.page-link.sc-lab-ds-breadcrumb{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-regular);padding:var(--lab-ds-semantic-selectable-space-padding-xs);border-radius:var(--lab-ds-semantic-selectable-border-radius-xxs);color:var(--lab-ds-semantic-color-fg-enabled);cursor:pointer}.page-link.sc-lab-ds-breadcrumb:hover{background-color:var(--lab-ds-semantic-selectable-color-bg-hover);color:var(--lab-ds-semantic-selectable-color-primary-default);text-decoration:underline}.page-link.sc-lab-ds-breadcrumb:active{background-color:var(--lab-ds-semantic-selectable-color-bg-cloudy);color:var(--lab-ds-semantic-selectable-color-primary-press)}.page-link.sc-lab-ds-breadcrumb:focus{outline-width:var(--lab-ds-semantic-selectable-border-width-s);outline-color:var(--lab-ds-semantic-selectable-color-primary-focus);color:var(--lab-ds-semantic-selectable-color-primary-focus);text-decoration:underline}.page-link-divider.sc-lab-ds-breadcrumb{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-bold)}.breadcrumb.sc-lab-ds-breadcrumb{display:flex;align-items:center;gap:var(--lab-ds-semantic-selectable-space-gap-s)}.breadcrumb.last-item.sc-lab-ds-breadcrumb .page-link.sc-lab-ds-breadcrumb{font:var(--lab-ds-semantic-typography-body-none-decoration-p2-bold)}.breadcrumb.last-item.sc-lab-ds-breadcrumb .page-link-divider.sc-lab-ds-breadcrumb{display:none}";
const LabDsBreadcrumb = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.breadcrumbs = undefined;
this.itemsColapsed = [];
this.disabled = false;
}
render() {
var _a, _b, _c, _d;
if (((_a = this.breadcrumbs) === null || _a === void 0 ? void 0 : _a.length) > 6) {
this.breadcrumbs.forEach((breadcrumb, index) => {
if (index === 0 || index > this.breadcrumbs.length - 3)
return;
else {
this.itemsColapsed = [
...this.itemsColapsed,
{
label: breadcrumb.label,
key: breadcrumb.key,
event: () => breadcrumb.event(),
},
];
}
});
}
return (h("div", { class: `v4-context-menu` }, ((_b = this.breadcrumbs) === null || _b === void 0 ? void 0 : _b.length) < 7
? (_c = this.breadcrumbs) === null || _c === void 0 ? void 0 : _c.map((breadcrumb, index) => {
return (h("div", { class: `breadcrumb ${this.breadcrumbs.length === index + 1 ? 'last-item' : ''}`, key: breadcrumb.key }, h("a", { onClick: () => {
breadcrumb.event();
}, class: "page-link", tabIndex: index + 1 }, breadcrumb.label), h("span", { class: "page-link-divider" }, "/")));
})
: (_d = this.breadcrumbs) === null || _d === void 0 ? void 0 : _d.map((breadcrumb, index) => {
if (index === 0 || index > this.breadcrumbs.length - 3)
return (h("div", { class: `breadcrumb ${this.breadcrumbs.length === index + 1 ? 'last-item' : ''}`, key: breadcrumb.key }, h("a", { onClick: () => {
breadcrumb.event();
}, class: "page-link", tabIndex: index + 1 }, breadcrumb.label), h("span", { class: "page-link-divider" }, "/")));
else if (index === 1) {
return (h("div", { tabIndex: index + 1, class: `breadcrumb`, key: breadcrumb.key }, h("lab-ds-context-menu", { iconMenu: "more_horiz", items: this.itemsColapsed }), h("span", { class: "page-link-divider" }, "/")));
}
})));
}
};
LabDsBreadcrumb.style = labDsBreadcrumbCss;
export { LabDsBreadcrumb as lab_ds_breadcrumb };
//# sourceMappingURL=lab-ds-breadcrumb.entry.js.map