v4web-components
Version:
Stencil Component Starter
90 lines (85 loc) • 5.12 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$4 } from './lab-ds-context-menu2.js';
import { d as defineCustomElement$3 } from './lab-ds-icon-not-selectable2.js';
import { d as defineCustomElement$2 } from './lab-ds-icon-selectable2.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$1 = /*@__PURE__*/ proxyCustomElement(class LabDsBreadcrumb extends HTMLElement {
constructor() {
super();
this.__registerHost();
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" }, "/")));
}
})));
}
static get style() { return labDsBreadcrumbCss; }
}, [2, "lab-ds-breadcrumb", {
"breadcrumbs": [16],
"disabled": [4],
"itemsColapsed": [32]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["lab-ds-breadcrumb", "lab-ds-context-menu", "lab-ds-icon-not-selectable", "lab-ds-icon-selectable"];
components.forEach(tagName => { switch (tagName) {
case "lab-ds-breadcrumb":
if (!customElements.get(tagName)) {
customElements.define(tagName, LabDsBreadcrumb$1);
}
break;
case "lab-ds-context-menu":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "lab-ds-icon-not-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "lab-ds-icon-selectable":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const LabDsBreadcrumb = LabDsBreadcrumb$1;
const defineCustomElement = defineCustomElement$1;
export { LabDsBreadcrumb, defineCustomElement };
//# sourceMappingURL=lab-ds-breadcrumb.js.map