@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
124 lines (122 loc) • 4.69 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 "@carbon/web-components/es/components/tooltip/index.js";
import { consume } from "@lit/context";
import { html as html$1, unsafeStatic } from "lit/static-html.js";
//#region src/components/page-header/page-header-content.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 content.
* @element c4p-page-header-content
*/
let CDSPageHeaderContent = class CDSPageHeaderContent extends LitElement {
constructor(..._args) {
super(..._args);
this._hasContextualActions = false;
this.title = "";
this.titleLevel = "h1";
this._hasEllipsisApplied = false;
this.withinGrid = false;
}
/**
* Handles `slotchange` event.
*/
_handleSlotChange({ target }) {
this._hasContextualActions = Boolean(target.assignedNodes());
if (this._hasContextualActions) this.setAttribute("contextual-actions", "true");
else this.removeAttribute("contextual-actions");
this.requestUpdate();
}
updated() {
const textContainer = this.shadowRoot?.querySelector(`.c4p--page-header__content__title`);
if (!textContainer || this._hasEllipsisApplied === true) return;
this._hasEllipsisApplied = textContainer.scrollHeight > textContainer.clientHeight;
}
render() {
const { title, withinGrid, _hasEllipsisApplied: hasEllipsisApplied, _handleSlotChange: handleSlotChange, context } = this;
const { contentActionsClipped } = context ?? {};
const gridClasses = classMap({
[`cds--css-grid`]: !withinGrid,
[`cds--subgrid cds--subgrid--wide`]: withinGrid
});
const contentActionClasses = classMap({
[`c4p--page-header__content__page-actions`]: true,
[`c4p--page-header__content__page-actions--clipped`]: contentActionsClipped
});
const titleTag = unsafeStatic(this.titleLevel);
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__content__title-wrapper">
<div class="${"c4p"}--page-header__content__start">
<div class="${"c4p"}--page-header__content__title-container">
<slot name="icon"></slot>
${hasEllipsisApplied ? html`
<cds-definition-tooltip>
<span slot="definition">${title}</span>
${html$1`<${titleTag} class="${"c4p"}--page-header__content__title">
${title}
</${titleTag}>`}
</cds-definition-tooltip>
` : html$1`
<${titleTag} class="${"c4p"}--page-header__content__title">
${title}
</${titleTag}>
`}
</div>
<slot
name="contextual-actions"
@slotchange=${handleSlotChange}
></slot>
</div>
<div class="${contentActionClasses}">
<slot name="page-actions"></slot>
</div>
</div>
<slot></slot>
</div>
</div>`;
}
static {
this.styles = page_header_default;
}
};
__decorate([property()], CDSPageHeaderContent.prototype, "title", void 0);
__decorate([property({
type: String,
attribute: "title-level"
})], CDSPageHeaderContent.prototype, "titleLevel", void 0);
__decorate([state()], CDSPageHeaderContent.prototype, "_hasEllipsisApplied", void 0);
__decorate([property({
attribute: "within-grid",
type: Boolean
})], CDSPageHeaderContent.prototype, "withinGrid", void 0);
__decorate([consume({
context: pageHeaderContext,
subscribe: true
})], CDSPageHeaderContent.prototype, "context", void 0);
CDSPageHeaderContent = __decorate([carbonElement(`c4p-page-header-content`)], CDSPageHeaderContent);
var page_header_content_default = CDSPageHeaderContent;
//#endregion
export { page_header_content_default as default };
//# sourceMappingURL=page-header-content.js.map