@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
110 lines (108 loc) • 4.3 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 tearsheet_default from "./tearsheet.scss.js";
import { tearsheetSignal, updateTearsheetSignals } from "./tearsheet-signal.js";
import { CollapsibleController } from "../../globals/js/utils/collapsible-controller.js";
import { LitElement, html } from "lit";
import { property, query, state } from "lit/decorators.js";
import HostListenerMixin from "@carbon/web-components/es/globals/mixins/host-listener.js";
import { carbonElement } from "@carbon/web-components/es/globals/decorators/carbon-element.js";
import "@carbon/web-components/es/components/layer/index.js";
import { classMap } from "lit-html/directives/class-map.js";
import { SignalWatcher } from "@lit-labs/signals";
//#region src/components/tearsheet-preview/tearsheet-body.ts
/**
* @license
*
* Copyright IBM Corp. 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--tearsheet__next`;
/**
* Tearsheet Body component - Contains the main content area with optional influencer and summary panels.
* Supports automatic header collapse on scroll.
*
* @element c4p-tearsheet-body
* @slot influencer - Left-side panel for contextual information (use c4p-tearsheet-influencer)
* @slot main-content - Primary content area
* @slot summary-content - Right-side panel for summary details (use c4p-tearsheet-summary-content)
*/
let CDSTearsheetBody = class CDSTearsheetBody extends SignalWatcher(HostListenerMixin(LitElement)) {
constructor(..._args) {
super(..._args);
this.slot = "body";
this.isFlush = false;
this._hasSummaryContent = false;
this._collapsibleController = new CollapsibleController(this, {
container: () => this.getMainContentContainer(),
triggerCollapse: (collapse) => this.collapseHeader(collapse),
disable: () => {
const { disableHeaderCollapse } = tearsheetSignal.get();
return disableHeaderCollapse;
}
});
}
getMainContentContainer() {
return this.querySelector("[slot=\"main-content\"]") || null;
}
collapseHeader(collapse) {
const scrollContainer = this.shadowRoot?.querySelector(`.${blockClass}__main-content`) || null;
if (!scrollContainer) return;
if (collapse) {
if (scrollContainer.scrollHeight > scrollContainer.clientHeight) updateTearsheetSignals({ fullyCollapsed: true });
} else if (scrollContainer.scrollTop === 0) updateTearsheetSignals({ fullyCollapsed: false });
}
firstUpdated(_changedProperties) {
this._checkSummaryContent();
}
_checkSummaryContent() {
if (this._summaryContentSlot) {
const assignedNodes = this._summaryContentSlot.assignedElements();
this._hasSummaryContent = assignedNodes.length > 0;
}
}
_handleSlotChange() {
this._checkSummaryContent();
}
render() {
const { hasAILabel } = tearsheetSignal.get();
return html`
<cds-layer class="${classMap({
[`${blockClass}__main-content`]: true,
[`${blockClass}__flush`]: this.isFlush,
[`${blockClass}__main-content--no-summary`]: !this._hasSummaryContent,
[`${blockClass}__main-content--has-ai-label`]: hasAILabel
})}" ?with-background="${true}">
<slot name="main-content"></slot>
</cds-layer>
<slot
name="summary-content"
@slotchange="${this._handleSlotChange}"
></slot>
`;
}
static {
this.styles = tearsheet_default;
}
};
__decorate([property({ reflect: true })], CDSTearsheetBody.prototype, "slot", void 0);
__decorate([property({
type: Boolean,
reflect: true,
attribute: "is-flush"
})], CDSTearsheetBody.prototype, "isFlush", void 0);
__decorate([query("slot[name=\"summary-content\"]")], CDSTearsheetBody.prototype, "_summaryContentSlot", void 0);
__decorate([state()], CDSTearsheetBody.prototype, "_hasSummaryContent", void 0);
CDSTearsheetBody = __decorate([carbonElement(`c4p-tearsheet-body`)], CDSTearsheetBody);
var tearsheet_body_default = CDSTearsheetBody;
//#endregion
export { tearsheet_body_default as default };
//# sourceMappingURL=tearsheet-body.js.map