@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
152 lines (150 loc) • 5.76 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import "../../../globals/settings.js";
import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import "../../truncated-text/index.js";
import { createOverflowHandler } from "../_story-assets/overflowHandler.js";
import "../page-header-title-breadcrumb.js";
import page_header_breadcrumbs_set_default$1 from "./page-header-breadcrumbs-set.scss.js";
import { classMap } from "lit/directives/class-map.js";
import { LitElement, html } from "lit";
import { property, query } from "lit/decorators.js";
import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
import { iconLoader } from "@carbon/web-components/es/globals/internal/icon-loader.js";
import "@carbon/web-components/es/components/breadcrumb/index.js";
import { repeat } from "lit/directives/repeat.js";
import "@carbon/web-components/es/components/overflow-menu/index.js";
import OverflowMenuHorizontal16 from "@carbon/icons/es/overflow-menu--horizontal/16.js";
//#region src/components/page-header/page-header-breadcrumbs-set/page-header-breadcrumbs-set.ts
/**
* @license
*
* Copyright IBM Corp. 2025, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const blockClass = `c4p--page-header-breadcrumbs-set`;
let CDSPageHeaderBreadcrumbsSet = class CDSPageHeaderBreadcrumbsSet extends LitElement {
constructor(..._args) {
super(..._args);
this.hiddenItems = [];
this.breadcrumbsData = [];
this.title = "";
this.breadcrumbAriaLabel = "breadcrumbs";
this.overflowAriaLabel = "More breadcrumbs";
}
connectedCallback() {
super.connectedCallback();
this.style.visibility = "hidden";
}
firstUpdated() {
if (!this.container) return;
const breadcrumb = this.shadowRoot?.querySelector("cds-breadcrumb");
if (breadcrumb) {
breadcrumb.style.display = "block";
requestAnimationFrame(() => {
const ol = breadcrumb.shadowRoot?.querySelector("ol");
if (ol) {
ol.style.display = "flex";
ol.style.flexWrap = "unset";
}
});
}
this.updateComplete.then(() => {
requestAnimationFrame(() => {
this.overflowHandler = createOverflowHandler({
offsetValue: 14,
container: this.container,
onChange: (visibleItems, _) => {
const hiddenCount = (this.breadcrumbsData?.length ?? 1) - 1 - visibleItems.length;
this.hiddenItems = this.breadcrumbsData?.slice(0, hiddenCount) ?? [];
}
});
});
});
setTimeout(() => {
this.style.visibility = "visible";
});
}
disconnectedCallback() {
super.disconnectedCallback();
if (this.overflowHandler) this.overflowHandler.disconnect();
}
render() {
return html`
<cds-breadcrumb
aria-label="${this.breadcrumbAriaLabel}"
class=${classMap({ [`${blockClass}`]: true })}
>
<cds-breadcrumb-item
data-fixed
data-offset
style="display: ${this.hiddenItems?.length >= 1 ? "flex" : "none"}"
>
<cds-overflow-menu
breadcrumb=""
align="bottom"
aria-label="${this.overflowAriaLabel}"
>
${iconLoader(OverflowMenuHorizontal16, { slot: "icon" })}
<span slot="tooltip-content"> Breadcrumbs </span>
<cds-overflow-menu-body size="sm">
${repeat(this.hiddenItems ?? [], (item) => item.href ?? item.text, (item) => html`
<cds-overflow-menu-item href=${item.href}>
${item.text}
</cds-overflow-menu-item>
`)}
</cds-overflow-menu-body>
</cds-overflow-menu>
</cds-breadcrumb-item>
${repeat(this.breadcrumbsData?.slice(this.hiddenItems?.length ?? 0, -1) ?? [], (item) => item.href ?? item.text, (item) => html`
<cds-breadcrumb-item>
<cds-breadcrumb-link href="${item.href}">
${item.text}
</cds-breadcrumb-link>
</cds-breadcrumb-item>
`)}
<c4p-page-header-title-breadcrumb data-fixed>
<cds-breadcrumb-link is-currentpage="">
<c4p-truncated-text
value="${this.title}"
lines="1"
autoalign
></c4p-truncated-text>
</cds-breadcrumb-link>
</c4p-page-header-title-breadcrumb>
</cds-breadcrumb>
`;
}
static {
this.styles = page_header_breadcrumbs_set_default$1;
}
};
__decorate([property({ type: Array })], CDSPageHeaderBreadcrumbsSet.prototype, "hiddenItems", void 0);
__decorate([property({
type: Array,
attribute: "breadcrumbs-data",
reflect: true
})], CDSPageHeaderBreadcrumbsSet.prototype, "breadcrumbsData", void 0);
__decorate([property({ type: String })], CDSPageHeaderBreadcrumbsSet.prototype, "title", void 0);
__decorate([property({
type: String,
attribute: "breadcrumb-aria-label",
reflect: true
})], CDSPageHeaderBreadcrumbsSet.prototype, "breadcrumbAriaLabel", void 0);
__decorate([property({
type: String,
attribute: "overflow-aria-label",
reflect: true
})], CDSPageHeaderBreadcrumbsSet.prototype, "overflowAriaLabel", void 0);
__decorate([query(`.${blockClass}`)], CDSPageHeaderBreadcrumbsSet.prototype, "container", void 0);
CDSPageHeaderBreadcrumbsSet = __decorate([carbonElement(`c4p-page-header-breadcrumbs-set`)], CDSPageHeaderBreadcrumbsSet);
var page_header_breadcrumbs_set_default = CDSPageHeaderBreadcrumbsSet;
//#endregion
export { page_header_breadcrumbs_set_default as default };
//# sourceMappingURL=page-header-breadcrumbs-set.js.map