v4web-components
Version:
Stencil Component Starter
102 lines (101 loc) • 3.46 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsBreadcrumb {
constructor() {
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 is() { return "lab-ds-breadcrumb"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-breadcrumb.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-breadcrumb.css"]
};
}
static get properties() {
return {
"breadcrumbs": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<{ label: string; link: string; key: string; event: () => void }>",
"resolved": "{ label: string; link: string; key: string; event: () => void; }[]",
"references": {
"Array": {
"location": "global"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
}
};
}
static get states() {
return {
"itemsColapsed": {}
};
}
}
//# sourceMappingURL=lab-ds-breadcrumb.js.map