@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
178 lines (169 loc) • 6.56 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, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { carbonPrefix, prefix } from '../../globals/settings.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 '@carbon/web-components/es/components/progress-indicator/index.js';
import styles from './interstitial-screen-header.scss.js';
import { interstitialDetailsSignal } from './interstitial-screen-context.js';
import { SignalWatcher } from '@lit-labs/signals';
import { registerFocusableContainers } from '../../utilities/manageFocusTrap/manageFocusTrap.js';
/**
* @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 = `${prefix}--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() {
super(...arguments);
/**
* Provide an optional title to be applied to the header.
*/
this.headerTitle = '';
this.slot = 'header';
/**
* Tooltip text and aria label for the Close button icon.
*/
this.headerSubTitle = '';
/**
* Tooltip text and aria label for the Close button icon.
*/
this.closeIconDescription = 'Close';
/**
* Optional parameter to hide the progress indicator when multiple steps are used.
*/
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="${carbonPrefix}--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-progress-indicator>
${stepDetails.map((step, index) => html ` <cds-progress-step
label="${step.stepTitle}"
key="${step.id}"
state="${this.getStepState(index)}"
></cds-progress-step>`)}
</cds-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 === null || stepDetails === void 0 ? void 0 : 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, // add check for children
});
return isFullScreen
? html ` <header class="${classes}">${this.getHeaderContent()}</header>`
: html `<cds-modal-header class="${classes}">
<cds-modal-close-button
close-button-label=${this.closeIconDescription}
="${this._handleUserInitiatedClose}"
></cds-modal-close-button>
${this.getHeaderContent()}
</cds-modal-header>`;
}
static get eventRequestClose() {
return `${prefix}-request-close`;
}
};
CDSInterstitialScreenHeader.styles = styles;
__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(`${prefix}-interstitial-screen-header`)
], CDSInterstitialScreenHeader);
var CDSInterstitialScreenHeader$1 = CDSInterstitialScreenHeader;
export { CDSInterstitialScreenHeader$1 as default };
//# sourceMappingURL=interstitial-screen-header.js.map