@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
146 lines (144 loc) • 5.2 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 { interstitialDetailsSignal, updateInterstitialDetailsSignal } from "./interstitial-screen-context.js";
import interstitial_screen_body_default$1 from "./interstitial-screen-body.scss.js";
import { LitElement, html } from "lit";
import { property, state } from "lit/decorators.js";
import { createRef, ref } from "lit/directives/ref.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 { initCarousel } from "@carbon/utilities";
//#region src/components/interstitial-screen/interstitial-screen-body.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-body for body section
* @element c4p-interstitial-screen-body
* @fires c4p-on-before-step-change - The name of the custom event fired at the start of the step change.
* @fires c4p-on-after-step-change - The name of the custom event fired at the end of the step change.
*/
let CDSInterstitialScreenBody = class CDSInterstitialScreenBody extends SignalWatcher(HostListenerMixin(LitElement)) {
constructor(..._args) {
super(..._args);
this.slot = "body";
this.stepType = "multi";
this.carouselElement = createRef();
this.onViewChangeStart = ({ currentIndex, lastIndex, totalViews }) => {
this.dispatchEvent(new CustomEvent(this.constructor.eventOnViewChangeStart, {
bubbles: true,
cancelable: true,
composed: true,
detail: {
currentStep: currentIndex,
totalStepCount: totalViews,
lastStep: lastIndex
}
}));
};
this.onViewChangeEnd = ({ currentIndex, lastIndex, totalViews }) => {
this.updateAriaHiddenTabIndex(currentIndex);
updateInterstitialDetailsSignal({
name: "currentStep",
detail: currentIndex
});
this.dispatchEvent(new CustomEvent(this.constructor.eventOnViewChangeEnd, {
bubbles: true,
cancelable: true,
composed: true,
detail: {
currentStep: currentIndex,
totalStepCount: totalViews,
lastStep: lastIndex
}
}));
};
this.updateAriaHiddenTabIndex = (itemNumber) => {
const allViews = this.carouselAPI?.allViews;
allViews && Object.values(allViews)?.forEach((item, idx) => {
const isActive = idx === itemNumber;
if (item) {
item.setAttribute("aria-hidden", String(!isActive));
if (!isActive) item.setAttribute("inert", "");
else item.removeAttribute("inert");
item.removeAttribute("tabindex");
}
});
};
}
firstUpdated() {
const bodyItems = this.querySelectorAll(`c4p-interstitial-screen-body-item`);
if (bodyItems.length === 1) this.stepType = "single";
else if (bodyItems.length > 1) this.stepType = "multi";
}
updated(changedProps) {
super.updated(changedProps);
const { open } = interstitialDetailsSignal.get();
if (open && !this.carouselAPI && this.stepType === "multi") requestAnimationFrame(() => {
this._initCarousel();
});
}
_initCarousel() {
this.carouselAPI = initCarousel(this.carouselElement.value, {
onViewChangeEnd: this.onViewChangeEnd,
onViewChangeStart: this.onViewChangeStart,
excludeSwipeSupport: true,
useMaxHeight: true
});
interstitialDetailsSignal.set({
...interstitialDetailsSignal.get(),
carouselAPI: this.carouselAPI
});
this.updateAriaHiddenTabIndex(0);
}
render() {
return html`
<div class="${blockClass}--body">
${this.stepType === "multi" ? html`<div
${ref(this.carouselElement)}
class="${blockClass}__carousel"
>
<slot></slot>
</div>` : html`<div class="${blockClass}__contentWrapper">
<slot></slot>
</div>`}
</div>
`;
}
static {
this.styles = interstitial_screen_body_default$1;
}
/**
* The name of the custom event fired at the start of the step change.
*/
static get eventOnViewChangeStart() {
return `c4p-on-before-step-change`;
}
/**
* The name of the custom event fired at the end of the step change.
*/
static get eventOnViewChangeEnd() {
return `c4p-on-after-step-change`;
}
};
__decorate([property({ reflect: true })], CDSInterstitialScreenBody.prototype, "slot", void 0);
__decorate([state()], CDSInterstitialScreenBody.prototype, "stepType", void 0);
CDSInterstitialScreenBody = __decorate([carbonElement(`c4p-interstitial-screen-body`)], CDSInterstitialScreenBody);
var interstitial_screen_body_default = CDSInterstitialScreenBody;
//#endregion
export { interstitial_screen_body_default as default };
//# sourceMappingURL=interstitial-screen-body.js.map