90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
import {
|
|
breadcrumb_styles_default
|
|
} from "./chunk.RUEAYTWB.js";
|
|
import {
|
|
LocalizeController
|
|
} from "./chunk.NH3SRVOC.js";
|
|
import {
|
|
SlIcon
|
|
} from "./chunk.UZYAV5H6.js";
|
|
import {
|
|
ShoelaceElement,
|
|
e,
|
|
n
|
|
} from "./chunk.SEXBCYCU.js";
|
|
import {
|
|
x
|
|
} from "./chunk.CXZZ2LVK.js";
|
|
import {
|
|
__decorateClass
|
|
} from "./chunk.KIILAQWQ.js";
|
|
|
|
// src/components/breadcrumb/breadcrumb.component.ts
|
|
var SlBreadcrumb = class extends ShoelaceElement {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.localize = new LocalizeController(this);
|
|
this.separatorDir = this.localize.dir();
|
|
this.label = "";
|
|
}
|
|
// Generates a clone of the separator element to use for each breadcrumb item
|
|
getSeparator() {
|
|
const separator = this.separatorSlot.assignedElements({ flatten: true })[0];
|
|
const clone = separator.cloneNode(true);
|
|
[clone, ...clone.querySelectorAll("[id]")].forEach((el) => el.removeAttribute("id"));
|
|
clone.setAttribute("data-default", "");
|
|
clone.slot = "separator";
|
|
return clone;
|
|
}
|
|
handleSlotChange() {
|
|
const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
|
|
(item) => item.tagName.toLowerCase() === "sl-breadcrumb-item"
|
|
);
|
|
items.forEach((item, index) => {
|
|
const separator = item.querySelector('[slot="separator"]');
|
|
if (separator === null) {
|
|
item.append(this.getSeparator());
|
|
} else if (separator.hasAttribute("data-default")) {
|
|
separator.replaceWith(this.getSeparator());
|
|
} else {
|
|
}
|
|
if (index === items.length - 1) {
|
|
item.setAttribute("aria-current", "page");
|
|
} else {
|
|
item.removeAttribute("aria-current");
|
|
}
|
|
});
|
|
}
|
|
render() {
|
|
if (this.separatorDir !== this.localize.dir()) {
|
|
this.separatorDir = this.localize.dir();
|
|
this.updateComplete.then(() => this.handleSlotChange());
|
|
}
|
|
return x`
|
|
<nav part="base" class="breadcrumb" aria-label=${this.label}>
|
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
</nav>
|
|
|
|
<span hidden aria-hidden="true">
|
|
<slot name="separator">
|
|
<sl-icon name=${this.localize.dir() === "rtl" ? "chevron-left" : "chevron-right"} library="system"></sl-icon>
|
|
</slot>
|
|
</span>
|
|
`;
|
|
}
|
|
};
|
|
SlBreadcrumb.styles = breadcrumb_styles_default;
|
|
SlBreadcrumb.dependencies = { "sl-icon": SlIcon };
|
|
__decorateClass([
|
|
e("slot")
|
|
], SlBreadcrumb.prototype, "defaultSlot", 2);
|
|
__decorateClass([
|
|
e('slot[name="separator"]')
|
|
], SlBreadcrumb.prototype, "separatorSlot", 2);
|
|
__decorateClass([
|
|
n()
|
|
], SlBreadcrumb.prototype, "label", 2);
|
|
|
|
export {
|
|
SlBreadcrumb
|
|
};
|