@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
129 lines (125 loc) • 5.5 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 { state } from 'lit/decorators.js';
import { provide } from '@lit/context';
import { prefix } from '../../globals/settings.js';
import styles from './page-header.scss.js';
import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import { pageHeaderContext } from './context.js';
import { getHeaderOffset } from './utils.js';
import CDSPageHeaderContent from './page-header-content.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.
* @element c4p-page-header
*/
let CDSPageHeader = class CDSPageHeader extends LitElement {
constructor() {
super(...arguments);
this.context = {};
}
connectedCallback() {
super.connectedCallback();
const contentElement = this.querySelector(`${prefix}-page-header-content`);
this.resizeObserver = new ResizeObserver((entries) => {
var _a, _b;
const pageHeaderElement = entries[0];
const contentEl = pageHeaderElement.target.querySelector(`${prefix}-page-header-content`);
const contentHeight = contentEl instanceof CDSPageHeaderContent ? contentEl.scrollHeight : 0;
const padding = contentEl instanceof CDSPageHeaderContent
? parseFloat((_a = getComputedStyle(contentEl)) === null || _a === void 0 ? void 0 : _a.paddingBlockStart) +
parseFloat((_b = getComputedStyle(contentEl)) === null || _b === void 0 ? void 0 : _b.paddingBlockEnd)
: 0;
const totalContentHeight = contentHeight + padding;
const headerOffset = getHeaderOffset(this);
const contentPadding = contentEl instanceof CDSPageHeaderContent ? 48 : 0;
this.style.setProperty(`--${prefix}-page-header-header-top`, `${(Math.round(totalContentHeight - contentPadding) - headerOffset) * -1}px`);
this.style.setProperty(`--${prefix}-page-header-breadcrumb-top`, `${headerOffset}px`);
this.context = Object.assign(Object.assign({}, this.context), { breadcrumbOffset: headerOffset, headerOffset: (Math.round(totalContentHeight) - headerOffset) * -1, root: this, withContent: !!contentEl });
});
this.resizeObserver.observe(this);
const predefinedContentPadding = 24;
const totalHeaderOffset = getHeaderOffset(this);
const contentObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
this.context = Object.assign(Object.assign({}, this.context), { fullyCollapsed: true });
}
else {
this.context = Object.assign(Object.assign({}, this.context), { fullyCollapsed: false });
}
});
}, {
root: null,
rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,
threshold: 0.1,
});
const titleObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
this.context = Object.assign(Object.assign({}, this.context), { titleClipped: true });
}
else {
this.context = Object.assign(Object.assign({}, this.context), { titleClipped: false });
}
});
}, {
root: null,
rootMargin: `${(predefinedContentPadding + totalHeaderOffset + 40) * -1}px 0px 0px 0px`,
threshold: 0.95,
});
const actionsObserver = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
this.context = Object.assign(Object.assign({}, this.context), { contentActionsClipped: true });
}
else {
this.context = Object.assign(Object.assign({}, this.context), { contentActionsClipped: false });
}
});
}, {
root: null,
// 48 -> breadcrumb bar
// 18 -> content padding
rootMargin: `${(totalHeaderOffset + 48 + 18) * -1}px 0px 0px 0px`,
threshold: 0.95,
});
if (contentElement) {
contentObserver.observe(contentElement);
titleObserver.observe(contentElement);
actionsObserver.observe(contentElement);
}
}
disconnectedCallback() {
var _a;
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect(); // Clean up
super.disconnectedCallback();
}
render() {
return html `<slot></slot>`;
}
};
CDSPageHeader.styles = styles;
__decorate([
state(),
provide({ context: pageHeaderContext })
], CDSPageHeader.prototype, "context", void 0);
CDSPageHeader = __decorate([
carbonElement(`${prefix}-page-header`)
], CDSPageHeader);
var CDSPageHeader$1 = CDSPageHeader;
export { CDSPageHeader$1 as default };
//# sourceMappingURL=page-header.js.map