@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
121 lines (119 loc) • 4.19 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 page_header_default from "./page-header.scss.js";
import { pageHeaderContext } from "./context.js";
import { classMap } from "lit/directives/class-map.js";
import { LitElement, html } from "lit";
import { property, state } from "lit/decorators.js";
import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
import { consume } from "@lit/context";
//#region src/components/page-header/page-header-breadcrumb.ts
/**
* @license
*
* Copyright IBM Corp. 2025, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Page header Breadcrumb Bar.
* @element c4p-page-header-breadcrumb
*/
let CDSPageHeaderBreadcrumb = class CDSPageHeaderBreadcrumb extends LitElement {
constructor(..._args) {
super(..._args);
this.border = true;
this.withinGrid = false;
this.pageActionsFlush = false;
this.contentActionsFlush = false;
this.actionsAriaLabel = "Page header actions";
}
connectedCallback() {
super.connectedCallback();
this.updateFixedClass();
}
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has("context")) this.updateFixedClass();
}
updateFixedClass() {
if (this.context?.disableStickyTabBar) this.classList.add(`c4p--page-header-breadcrumb--fixed`);
else this.classList.remove(`c4p--page-header-breadcrumb--fixed`);
}
render() {
const { withinGrid, context } = this;
const { contentActionsClipped } = context ?? {};
const gridClasses = classMap({
[`cds--css-grid`]: !withinGrid,
[`cds--subgrid cds--subgrid--wide`]: withinGrid
});
const contentActionClasses = classMap({
[`c4p--page-header__breadcrumb__content-actions-with-global-actions`]: true,
[`c4p--page-header__breadcrumb__content-actions-with-global-actions--show`]: contentActionsClipped
});
return html`
<div class="${gridClasses}">
<div
class="${"cds"}--sm:col-span-4 ${"cds"}--md:col-span-8 ${"cds"}--lg:col-span-16 ${"cds"}--css-grid-column"
>
<div class="${"c4p"}--page-header__breadcrumb-container">
<div class="${"c4p"}--page-header__breadcrumb-wrapper">
<slot name="icon"></slot>
<slot></slot>
</div>
<div
class="${"c4p"}--page-header__breadcrumb__actions"
role="navigation"
aria-label="${this.actionsAriaLabel}"
>
<div class="${contentActionClasses}">
<slot name="content-actions"></slot>
</div>
<slot name="page-actions"></slot>
</div>
</div>
</div>
</div>
`;
}
static {
this.styles = page_header_default;
}
};
__decorate([property({
reflect: true,
type: Boolean
})], CDSPageHeaderBreadcrumb.prototype, "border", void 0);
__decorate([property({
attribute: "within-grid",
type: Boolean
})], CDSPageHeaderBreadcrumb.prototype, "withinGrid", void 0);
__decorate([property({
attribute: "page-actions-flush",
type: Boolean
})], CDSPageHeaderBreadcrumb.prototype, "pageActionsFlush", void 0);
__decorate([property({
attribute: "content-actions-flush",
type: Boolean
})], CDSPageHeaderBreadcrumb.prototype, "contentActionsFlush", void 0);
__decorate([property({
type: String,
attribute: "actions-aria-label",
reflect: true
})], CDSPageHeaderBreadcrumb.prototype, "actionsAriaLabel", void 0);
__decorate([consume({
context: pageHeaderContext,
subscribe: true
}), state()], CDSPageHeaderBreadcrumb.prototype, "context", void 0);
CDSPageHeaderBreadcrumb = __decorate([carbonElement(`c4p-page-header-breadcrumb`)], CDSPageHeaderBreadcrumb);
var page_header_breadcrumb_default = CDSPageHeaderBreadcrumb;
//#endregion
export { page_header_breadcrumb_default as default };
//# sourceMappingURL=page-header-breadcrumb.js.map