@carbon/ibm-products-web-components/es/components/interstitial-screen/interstitial-screen-body.js

Carbon for IBM Products Web Components

/**
 * 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 } from 'lit';
import { property, state } from 'lit/decorators.js';
import { prefix } from '../../globals/settings.js';
import '@carbon/web-components/es/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-body.scss.js';
import { initCarousel } from '../../utilities/carousel/carousel.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { updateInterstitialDetailsSignal, interstitialDetailsSignal } from './interstitial-screen-context.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`;
/**
 * 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 HostListenerMixin(LitElement) {
    constructor() {
        super(...arguments);
        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 }) => {
            if (currentIndex > 0) {
                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) => {
            var _a, _b;
            const allViews = (_a = this.carouselAPI) === null || _a === void 0 ? void 0 : _a.allViews;
            (_b = Object.values(allViews)) === null || _b === void 0 ? void 0 : _b.forEach((item, idx) => {
                const isActive = idx === itemNumber;
                if (item) {
                    // Set aria-hidden based on active state
                    item.setAttribute('aria-hidden', String(!isActive));
                    if (!isActive) {
                        item.setAttribute('inert', ''); // Disable interactivity
                    }
                    else {
                        item.removeAttribute('inert'); // Re-enable interactivity
                    }
                    item.removeAttribute('tabindex');
                }
            });
        };
    }
    firstUpdated() {
        const bodyItems = this.querySelectorAll(`${prefix}-interstitial-screen-body-item`);
        if (bodyItems.length === 1) {
            this.stepType = 'single';
        }
        else if (bodyItems.length > 1) {
            this.stepType = 'multi';
            //initialize carousel for multi-step
            this._initCarousel();
        }
    }
    _initCarousel() {
        this.carouselAPI = initCarousel(this.carouselElement.value, {
            onViewChangeEnd: this.onViewChangeEnd,
            onViewChangeStart: this.onViewChangeStart,
            excludeSwipeSupport: true,
        });
        interstitialDetailsSignal.set(Object.assign(Object.assign({}, 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>
    `;
    }
    /**
     * The name of the custom event fired at the start of  the step change.
     */
    static get eventOnViewChangeStart() {
        return `${prefix}-on-before-step-change`;
    }
    /**
     * The name of the custom event fired at the end of  the step change.
     */
    static get eventOnViewChangeEnd() {
        return `${prefix}-on-after-step-change`;
    }
};
CDSInterstitialScreenBody.styles = styles;
__decorate([
    property({ reflect: true })
], CDSInterstitialScreenBody.prototype, "slot", void 0);
__decorate([
    state()
], CDSInterstitialScreenBody.prototype, "stepType", void 0);
CDSInterstitialScreenBody = __decorate([
    carbonElement(`${prefix}-interstitial-screen-body`)
], CDSInterstitialScreenBody);
var CDSInterstitialScreenBody$1 = CDSInterstitialScreenBody;

export { CDSInterstitialScreenBody$1 as default };
//# sourceMappingURL=interstitial-screen-body.js.map