@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
210 lines (204 loc) • 8.14 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, state, query } from 'lit/decorators.js';
import { carbonPrefix, prefix } from '../../globals/settings.js';
import '@carbon/web-components/es-custom/components/modal/index.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 styles from './interstitial-screen.scss.js';
import { SignalWatcher } from '@lit-labs/signals';
import { interstitialDetailsSignal, updateInterstitialDetailsSignal, resetInterstitialDetailsSignal } from './interstitial-screen-context.js';
import HostListener from '@carbon/web-components/es/globals/decorators/host-listener';
/**
* @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`;
/**
* 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() {
/**
* Specifies whether the component is shown as a full-screen
* experience, else it is shown as a modal by default.
*/
super(...arguments);
this.isFullScreen = false;
/**
* Specifies whether the component is currently open.
*/
this.open = false;
this.stepDetails = [];
this._wasOpen = false;
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,
}
: undefined,
setDisableActionButtons: this.setDisableActionButtons,
},
}));
});
};
/**
* Handles `click` event on this element.
*
* @param event The event.
*/
this._handleOutsideClick = (event) => {
var _a, _b;
const modal = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`${carbonPrefix}-modal`);
const modalContent = (_b = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`.${carbonPrefix}--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(`${prefix}-request-close`, this._handleClose);
}
disconnectedCallback() {
var _a;
const { carouselAPI } = interstitialDetailsSignal.get();
(_a = carouselAPI === null || carouselAPI === void 0 ? void 0 : carouselAPI.destroyEvents) === null || _a === void 0 ? void 0 : _a.call(carouselAPI);
}
firstUpdated() {
this.requestUpdate(); // Ensure re-render
resetInterstitialDetailsSignal();
updateInterstitialDetailsSignal({
name: 'isFullScreen',
detail: this.isFullScreen,
});
}
updated(changedProps) {
if (changedProps.has('open')) {
const wasOpen = this._wasOpen;
const isOpen = this.open;
if (!wasOpen && isOpen) {
this.dispatchInItializeEvent();
}
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));
}
}
//template methods
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 get eventOnInterstitialOpened() {
return `${prefix}-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 `${prefix}-interstitial-beingclosed`;
}
/**
* The name of the custom event fired after this tearsheet is closed upon a user gesture.
*/
static get eventClose() {
return `${prefix}-interstitial-closed`;
}
};
CDSInterstitialScreen.styles = styles;
__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')
// @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
], CDSInterstitialScreen.prototype, "_handleOutsideClick", void 0);
CDSInterstitialScreen = __decorate([
carbonElement(`${prefix}-interstitial-screen`)
], CDSInterstitialScreen);
var CDSInterstitialScreen$1 = CDSInterstitialScreen;
export { blockClass, CDSInterstitialScreen$1 as default };
//# sourceMappingURL=interstitial-screen.js.map