@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
198 lines (194 loc) • 6.97 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 { clearFocusableContainers, trapFocus } from "../../utilities/manageFocusTrap/manageFocusTrap.js";
import interstitial_screen_default$1 from "./interstitial-screen.scss.js";
import { interstitialDetailsSignal, resetInterstitialDetailsSignal, updateInterstitialDetailsSignal } from "./interstitial-screen-context.js";
import { LitElement, html, nothing } 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-custom/components/modal/index.js';
import { SignalWatcher } from "@lit-labs/signals";
import HostListener from "@carbon/web-components/es/globals/decorators/host-listener";
//#region src/components/interstitial-screen/interstitial-screen.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`;
/**
* interstitial-screen main component
* @element c4p-interstitial-screen
* @fires c4p-interstitial-opened - The custom event triggered after loading the component.
* Its event.detail will provide you with carousal api methods for step navigation and method to disable any action button
* * @fires c4p-interstitial-beingclosed - The name of the custom event fired before interstitial is being closed upon a user gesture.
* Cancellation of this event stops the user-initiated action of closing the interstitial.
* @fires c4p-interstitial-closed - The name of the custom event fired after this tearsheet is closed upon a user gesture.
*/
let CDSInterstitialScreen = class CDSInterstitialScreen extends SignalWatcher(HostListenerMixin(LitElement)) {
constructor(..._args) {
super(..._args);
this.isFullScreen = false;
this.open = false;
this.stepDetails = [];
this._wasOpen = false;
this._trapFocusAPI = null;
this.dispatchInItializeEvent = () => {
setTimeout(() => {
const { carouselAPI } = interstitialDetailsSignal.get();
this.dispatchEvent(new CustomEvent(this.constructor.eventOnInterstitialOpened, {
bubbles: true,
cancelable: true,
composed: true,
detail: {
carouselAPI: carouselAPI ? {
next: carouselAPI.next,
prev: carouselAPI.prev,
reset: carouselAPI.reset,
gotToStep: carouselAPI.goToIndex
} : void 0,
setDisableActionButtons: this.setDisableActionButtons
}
}));
});
};
this._handleOutsideClick = (event) => {
const modalContent = (this.shadowRoot?.querySelector(`cds-custom-modal`))?.shadowRoot?.querySelector(`.cds-custom--modal-container`);
const path = event.composedPath();
if (modalContent && !path.includes(modalContent)) this._handleClose(event);
};
this.setDisableActionButtons = (config) => {
updateInterstitialDetailsSignal({
name: "disableActions",
detail: config
});
};
}
connectedCallback() {
super.connectedCallback();
this.addEventListener(`c4p-request-close`, this._handleClose);
}
disconnectedCallback() {
const { carouselAPI } = interstitialDetailsSignal.get();
carouselAPI?.destroyEvents?.();
this._trapFocusAPI?.cleanup();
clearFocusableContainers();
}
firstUpdated() {
this.requestUpdate();
resetInterstitialDetailsSignal();
updateInterstitialDetailsSignal({
name: "isFullScreen",
detail: this.isFullScreen
});
}
updated(changedProps) {
if (changedProps.has("open")) {
const wasOpen = this._wasOpen;
const isOpen = this.open;
updateInterstitialDetailsSignal({
name: "open",
detail: isOpen
});
if (!wasOpen && isOpen) {
this.dispatchInItializeEvent();
this._trapFocusAPI = trapFocus();
}
this._wasOpen = isOpen;
}
}
_handleClose(e) {
this.open = false;
e.stopPropagation();
const init = {
bubbles: true,
cancelable: true,
composed: true,
detail: { triggeredBy: e.detail.triggeredBy }
};
if (this.dispatchEvent(new CustomEvent(this.constructor.eventBeforeClose, init))) {
this.dispatchEvent(new CustomEvent(this.constructor.eventClose, init));
const { carouselAPI } = interstitialDetailsSignal.get();
if (carouselAPI) carouselAPI.reset();
updateInterstitialDetailsSignal({
name: "currentStep",
detail: 0
});
}
}
renderFullScreen() {
return html`
<div class="${blockClass}--container">
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
`;
}
renderModal() {
return html`<cds-custom-modal
key=${this.open}
?prevent-close-on-click-outside="true"
class=${blockClass}
size="lg"
?open="${this.open}"
>
<slot name="header"></slot>
<cds-custom-modal-body class="${blockClass}__body-container">
<slot name="body"></slot>
</cds-custom-modal-body>
<cds-custom-modal-footer>
<slot name="footer"></slot>
</cds-custom-modal-footer>
</cds-custom-modal>`;
}
render() {
return this.open ? this.isFullScreen ? html`${this.renderFullScreen()}` : html`${this.renderModal()}` : nothing;
}
static {
this.styles = interstitial_screen_default$1;
}
static get eventOnInterstitialOpened() {
return `c4p-interstitial-opened`;
}
/**
* The name of the custom event fired before interstitial is being closed upon a user gesture.
* Cancellation of this event stops the user-initiated action of closing the interstitial.
*/
static get eventBeforeClose() {
return `c4p-interstitial-beingclosed`;
}
/**
* The name of the custom event fired after this tearsheet is closed upon a user gesture.
*/
static get eventClose() {
return `c4p-interstitial-closed`;
}
};
__decorate([property({
type: Boolean,
reflect: true,
attribute: "fullscreen"
})], CDSInterstitialScreen.prototype, "isFullScreen", void 0);
__decorate([property({
type: Boolean,
reflect: true
})], CDSInterstitialScreen.prototype, "open", void 0);
__decorate([state()], CDSInterstitialScreen.prototype, "stepDetails", void 0);
__decorate([query("cds-custom-modal-body")], CDSInterstitialScreen.prototype, "modalBody", void 0);
__decorate([HostListener("click")], CDSInterstitialScreen.prototype, "_handleOutsideClick", void 0);
CDSInterstitialScreen = __decorate([carbonElement(`c4p-interstitial-screen`)], CDSInterstitialScreen);
var interstitial_screen_default = CDSInterstitialScreen;
//#endregion
export { blockClass, interstitial_screen_default as default };
//# sourceMappingURL=interstitial-screen.js.map