@aqua-ds/web-components
Version:
AquaDS Web Components
47 lines (42 loc) • 2.53 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
const aqBreadcrumbCss = ".aq-breadcrumb{font-family:var(--font-family-basic);font-style:normal;font-weight:normal;font-size:var(--font-size-s);line-height:var(--font-line-height-7)}.aq-breadcrumb__item a{cursor:pointer;color:var(--color-ink-light)}.aq-breadcrumb__item a:hover{color:var(--color-primary-base);-webkit-text-decoration-line:underline;text-decoration-line:underline}.aq-breadcrumb__last-item{font-weight:var(--font-weight-semi-bold);color:var(--color-ink-base)}.aq-breadcrumb__separator{color:var(--color-paper-light);margin:var(--spacing-size-short) var(--spacing-size-short)}";
const AqBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class AqBreadcrumb extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.breadcrumbs = [];
}
handleClick(breadcrumb, event) {
emitEvent('click', this.hostElement, { value: breadcrumb }, event);
}
render() {
const activeIndex = this.breadcrumbs.findIndex(breadcrumb => breadcrumb?.active);
const visibleBreadcrumbs = activeIndex >= 0
? this.breadcrumbs.slice(0, activeIndex)
: this.breadcrumbs;
return (h("p", { key: 'ad74e8ad02f67c0a69c266af0b3430bb97657d3b', class: "aq-breadcrumb" }, visibleBreadcrumbs.map((breadcrumb) => (h("span", { class: "aq-breadcrumb__item" }, h("a", { onClick: (event) => this.handleClick(breadcrumb, event) }, breadcrumb.label), h("span", { class: "aq-breadcrumb__separator" }, "/")))), activeIndex >= 0 && (h("span", { key: '9e4a4a455820b211305e093058bedc9bf898496d', class: "aq-breadcrumb__last-item" }, this.breadcrumbs[activeIndex].label))));
}
get hostElement() { return this; }
static get style() { return aqBreadcrumbCss; }
}, [256, "aq-breadcrumb", {
"breadcrumbs": [16]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-breadcrumb"];
components.forEach(tagName => { switch (tagName) {
case "aq-breadcrumb":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqBreadcrumb$1);
}
break;
} });
}
const AqBreadcrumb = AqBreadcrumb$1;
const defineCustomElement = defineCustomElement$1;
export { AqBreadcrumb, defineCustomElement };