@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
153 lines (146 loc) • 5.77 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 { registerFocusableContainers } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
import { interstitialDetailsSignal } from "./interstitial-screen-context.js";
import interstitial_screen_header_default$1 from "./interstitial-screen-header.scss.js";
import { LitElement, html, nothing } 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 { classMap } from "lit-html/directives/class-map.js";
import { SignalWatcher } from "@lit-labs/signals";
import '@carbon/web-components/es-custom/components/progress-indicator/index.js';
//#region src/components/interstitial-screen/interstitial-screen-header.ts
/**
* @license
*
* Copyright IBM Corp. 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.
*/
const blockClass = `c4p--interstitial-screen`;
const headerBlockClass = `${blockClass}--internal-header`;
/**
* interstitial-screen-header for header section
* @element c4p-interstitial-screen-header
*/
let CDSInterstitialScreenHeader = class CDSInterstitialScreenHeader extends SignalWatcher(HostListenerMixin(LitElement)) {
constructor(..._args) {
super(..._args);
this.headerTitle = "";
this.slot = "header";
this.headerSubTitle = "";
this.closeIconDescription = "Close";
this.hideProgressIndicator = false;
this.getStepState = (index) => {
const currentStep = interstitialDetailsSignal.get().currentStep;
if (index === currentStep) return "current";
else if (index < currentStep) return "complete";
else if (index > currentStep) return "incomplete";
return "invalid";
};
this.getElementForAriaLive = () => {
const currentStep = interstitialDetailsSignal.get().currentStep;
const stepDetails = interstitialDetailsSignal.get().stepDetails;
return html` <div
aria-live="polite"
aria-atomic="true"
class="${"cds-custom"}--visually-hidden"
>
Step ${currentStep + 1} of ${stepDetails.length}
</div>`;
};
}
firstUpdated(_changedProperties) {
registerFocusableContainers(this.shadowRoot);
}
/**
* Handles user-initiated close request of this tearsheet.
*
* @param triggeredBy The element that triggered this close request.
*/
_handleUserInitiatedClose(triggeredBy) {
const init = {
bubbles: true,
cancelable: true,
composed: true,
detail: { triggeredBy }
};
this.dispatchEvent(new CustomEvent(this.constructor.eventRequestClose, init));
}
getProgressIndicatorContent(stepDetails) {
return html`
<div class="${blockClass}--progress">
<cds-custom-progress-indicator>
${stepDetails.map((step, index) => html` <cds-custom-progress-step
label="${step.stepTitle}"
key="${step.id}"
state="${this.getStepState(index)}"
></cds-custom-progress-step>`)}
</cds-custom-progress-indicator>
${this.getElementForAriaLive()}
</div>
`;
}
getTitleContent() {
return html` <div class="${blockClass}--titleContainer">
${this.headerTitle && html`<h1>${this.headerTitle}</h1>`}
${this.headerSubTitle && html`<h2>${this.headerSubTitle}</h2>`}
</div>`;
}
getHeaderContent() {
const stepDetails = interstitialDetailsSignal.get().stepDetails;
return html`
${this.headerTitle || this.headerSubTitle ? this.getTitleContent() : nothing}
<slot></slot>
${!this.hideProgressIndicator && stepDetails?.length > 0 ? this.getProgressIndicatorContent(stepDetails) : nothing}
</div>
`;
}
render() {
const { isFullScreen } = interstitialDetailsSignal.get();
const classes = classMap({
[`${headerBlockClass}`]: true,
[`${headerBlockClass}--has-title`]: this.headerTitle || this.headerSubTitle
});
return isFullScreen ? html` <header class="${classes}">${this.getHeaderContent()}</header>` : html`<cds-custom-modal-header class="${classes}">
<cds-custom-modal-close-button
close-button-label=${this.closeIconDescription}
@click="${this._handleUserInitiatedClose}"
></cds-custom-modal-close-button>
${this.getHeaderContent()}
</cds-custom-modal-header>`;
}
static {
this.styles = interstitial_screen_header_default$1;
}
static get eventRequestClose() {
return `c4p-request-close`;
}
};
__decorate([property({
reflect: true,
attribute: "header-title"
})], CDSInterstitialScreenHeader.prototype, "headerTitle", void 0);
__decorate([property({ reflect: true })], CDSInterstitialScreenHeader.prototype, "slot", void 0);
__decorate([property({
reflect: true,
attribute: "header-subtitle"
})], CDSInterstitialScreenHeader.prototype, "headerSubTitle", void 0);
__decorate([property({ reflect: true })], CDSInterstitialScreenHeader.prototype, "closeIconDescription", void 0);
__decorate([property({
type: Boolean,
reflect: true
})], CDSInterstitialScreenHeader.prototype, "hideProgressIndicator", void 0);
CDSInterstitialScreenHeader = __decorate([carbonElement(`c4p-interstitial-screen-header`)], CDSInterstitialScreenHeader);
var interstitial_screen_header_default = CDSInterstitialScreenHeader;
//#endregion
export { interstitial_screen_header_default as default };
//# sourceMappingURL=interstitial-screen-header.js.map