@carbon/ibm-products-web-components/es-custom/components/tearsheet-preview/tearsheet-header.js

Carbon for IBM Products Web Components

/**
 * 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 { tearsheetSignal, updateTearsheetSignals } from "./tearsheet-signal.js";
import { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
import tearsheet_header_default$1 from "./tearsheet-header.scss.js";
import { LitElement, html } from "lit";
import { property } 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-custom/components/modal/index.js';
import { classMap } from "lit-html/directives/class-map.js";
import { SignalWatcher } from "@lit-labs/signals";
//#region src/components/tearsheet-preview/tearsheet-header.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 Header component - Contains the header section with title, description, and actions.
* The decorator (AI label) and close button are now rendered inside c4p-tearsheet-header-content
* to achieve the correct DOM tab order: header-actions → decorator → close → header-content.
*
* @element c4p-tearsheet-header
* @slot header-content - The main header content area (use c4p-tearsheet-header-content)
* @slot - Default slot for other content
* @slot navigation-bar - Navigation tabs or breadcrumbs below the header
* @fires c4p-tearsheet-header-collapse-change - Internal event; parent tearsheet re-dispatches
*   this as the public `c4p-preview-tearsheet-collapse-change` event.
*/
let CDSTearsheetHeader = class CDSTearsheetHeader extends SignalWatcher(HostListenerMixin(LitElement)) {
	constructor(..._args) {
		super(..._args);
		this.slot = "header";
		this.closeIconDescription = "Close";
		this.hideCloseButton = false;
		this.disableHeaderCollapse = false;
	}
	connectedCallback() {
		super.connectedCallback();
		updateTearsheetSignals({
			disableHeaderCollapse: this.disableHeaderCollapse,
			closeIconDescription: this.closeIconDescription,
			hideCloseButton: this.hideCloseButton
		});
	}
	firstUpdated() {
		const uniqueId = tearsheetSignal.get().uniqueId;
		if (uniqueId) registerFocusableContainers(this.shadowRoot, uniqueId);
	}
	updated(_changedProperties) {
		if (_changedProperties.has("disableHeaderCollapse")) updateTearsheetSignals({ disableHeaderCollapse: this.disableHeaderCollapse });
		if (_changedProperties.has("closeIconDescription")) updateTearsheetSignals({ closeIconDescription: this.closeIconDescription });
		if (_changedProperties.has("hideCloseButton")) updateTearsheetSignals({ hideCloseButton: this.hideCloseButton });
		this.updateCollapsedAttribute();
	}
	updateCollapsedAttribute() {
		const { fullyCollapsed, open } = tearsheetSignal.get();
		const wasCollapsed = this.hasAttribute("collapsed");
		if (open) if (fullyCollapsed) this.setAttribute("collapsed", "");
		else this.removeAttribute("collapsed");
		else this.removeAttribute("collapsed");
		const isNowCollapsed = this.hasAttribute("collapsed");
		if (isNowCollapsed !== wasCollapsed) this.dispatchEvent(new CustomEvent(this.constructor.eventCollapseChange, {
			bubbles: true,
			composed: true,
			detail: { collapsed: isNowCollapsed }
		}));
	}
	render() {
		const { fullyCollapsed } = tearsheetSignal.get();
		return html`<cds-custom-modal-header class="${classMap({
			[`${blockClass}__header`]: true,
			[`${blockClass}__header--with-close-icon`]: !!this.hideCloseButton,
			[`${blockClass}__header-collapsed`]: !!fullyCollapsed
		})}">
      <slot name="header-content"></slot>
      <slot></slot>
      <slot name="navigation-bar"></slot>
    </cds-custom-modal-header>`;
	}
	static {
		this.styles = tearsheet_header_default$1;
	}
	static get eventCloseButtonClicked() {
		return `c4p-tearsheet-header-close-button-clicked`;
	}
	/**
	* Internal event fired when the collapse state changes.
	* The parent `c4p-preview-tearsheet` intercepts this and re-dispatches it as
	* the public `c4p-preview-tearsheet-collapse-change` event.
	*/
	static get eventCollapseChange() {
		return `c4p-tearsheet-header-collapse-change`;
	}
};
__decorate([property({ reflect: true })], CDSTearsheetHeader.prototype, "slot", void 0);
__decorate([property({
	reflect: true,
	attribute: "close-icon-description"
})], CDSTearsheetHeader.prototype, "closeIconDescription", void 0);
__decorate([property({
	type: Boolean,
	reflect: true,
	attribute: "hide-close-button"
})], CDSTearsheetHeader.prototype, "hideCloseButton", void 0);
__decorate([property({
	type: Boolean,
	reflect: true,
	attribute: "disable-header-collapse"
})], CDSTearsheetHeader.prototype, "disableHeaderCollapse", void 0);
CDSTearsheetHeader = __decorate([carbonElement(`c4p-tearsheet-header`)], CDSTearsheetHeader);
var tearsheet_header_default = CDSTearsheetHeader;
//#endregion
export { tearsheet_header_default as default };

//# sourceMappingURL=tearsheet-header.js.map