@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
107 lines (103 loc) • 4.01 kB
JavaScript
/**
* Copyright IBM Corp. 2024
*
* 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 { __decorate } from 'tslib';
import { LitElement, html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { prefix, carbonPrefix } from '../../globals/settings.js';
import { property } from 'lit/decorators.js';
import styles from './page-header.scss.js';
import { consume } from '@lit/context';
import { pageHeaderContext } from './context.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
/**
* @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() {
super(...arguments);
/**
* Specify if breadcrumb bar has bottom border.
*/
this.border = true;
/**
* Set to `true` if the breadcrumb bar is sitting within a grid
* (ie. when used in tandem with page-header-hero-image)
*/
this.withinGrid = false;
/**
* Set to `true` if page actions should be flush (no padding)
*/
this.pageActionsFlush = false;
/**
* Set to `true` if content actions should be flush (no padding)
*/
this.contentActionsFlush = false;
}
render() {
const { withinGrid, context } = this;
const { contentActionsClipped } = context !== null && context !== void 0 ? context : {};
const gridClasses = classMap({
[`${carbonPrefix}--css-grid`]: !withinGrid,
[`${carbonPrefix}--subgrid ${carbonPrefix}--subgrid--wide`]: withinGrid,
});
const contentActionClasses = classMap({
[`${prefix}--page-header__breadcrumb__content-actions-with-global-actions`]: true,
[`${prefix}--page-header__breadcrumb__content-actions-with-global-actions--show`]: contentActionsClipped,
});
return html `
<div class="${gridClasses}">
<div
class="${carbonPrefix}--sm:col-span-4 ${carbonPrefix}--md:col-span-8 ${carbonPrefix}--lg:col-span-16 ${carbonPrefix}--css-grid-column"
>
<div class="${prefix}--page-header__breadcrumb-container">
<div class="${prefix}--page-header__breadcrumb-wrapper">
<slot name="icon"></slot>
<slot></slot>
</div>
<div class="${prefix}--page-header__breadcrumb__actions">
<div class="${contentActionClasses}">
<slot name="content-actions"></slot>
</div>
<slot name="page-actions"></slot>
</div>
</div>
</div>
</div>
`;
}
};
CDSPageHeaderBreadcrumb.styles = styles;
__decorate([
property({ reflect: true })
], 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([
consume({ context: pageHeaderContext, subscribe: true })
], CDSPageHeaderBreadcrumb.prototype, "context", void 0);
CDSPageHeaderBreadcrumb = __decorate([
carbonElement(`${prefix}-page-header-breadcrumb`)
], CDSPageHeaderBreadcrumb);
var CDSPageHeaderBreadcrumb$1 = CDSPageHeaderBreadcrumb;
export { CDSPageHeaderBreadcrumb$1 as default };
//# sourceMappingURL=page-header-breadcrumb.js.map