lightning-base-components 1.27.5-alpha → 1.28.4-alpha

package/src/lightning/modalBase/modalBase.js

@@ -0,0 +1,733 @@
+/*
+ * Copyright (c) 2025, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { api, track } from 'lwc';
+import { features } from 'lightning/features';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { classSet } from 'lightning/utils';
+import { ARIA, hasActiveTooltip, hasAnimation, isAriaDescriptionSupported, makeEverythingExceptElementInert, normalizeString, restoreInertness, synchronizeAttrs, } from 'lightning/utilsPrivate';
+import { instanceName, secure } from 'lightning/overlayUtils';
+import { getElementWithFocus, returnFocusToElement, } from 'lightning/focusUtils';
+import closeButtonAltText from '@salesforce/label/LightningModalBase.cancelandclose';
+import disableCloseBtnMessage from '@salesforce/label/LightningModalBase.waitstate';
+import AriaObserver from 'lightning/ariaObserver';
+import { modalFocusinEventHandler } from 'lightning/modalUtils';
+import orgHasWCAGResizeReflowSC from '@salesforce/accessCheck/ComponentAccessibility.orgHasWCAGResizeReflowSC';
+const DEBOUNCE_RESIZE = 300;
+const SMALL_SCREEN_SIZE = 480;
+const SIZE_SMALL = 'small';
+const SIZE_MEDIUM = 'medium';
+const SIZE_LARGE = 'large';
+const SIZE_FULL = 'full';
+let lwcModalCount = 0;
+let originalBodyOverflow = null;
+export default class LightningModalBase extends LightningShadowBaseClass {
+    static [instanceName] = 'lightning-modal-base';
+    initialRender = true;
+    autoFocusCompletedOnce = false;
+    timeoutId = 0;
+    disableCloseButton = false;
+    sectionAriaBusy = null;
+    closeButtonAltText = closeButtonAltText;
+    disableCloseBtnMessage = disableCloseBtnMessage;
+    isModalClosing = false;
+    isSmallScreenSize = null;
+    headerRegistered = false;
+    headerHeight = 0;
+    headerDefaultSlotIsPopulated = false;
+    headerSlotWrapperId = null;
+    headerSlotHasRendered = false;
+    headerLabelId = null;
+    headerLabelIsPopulated = null;
+    headerTitleRef = null;
+    bodyRegistered = false;
+    bodyDefaultSlotIsPopulated = false;
+    bodySlotHasRendered = false;
+    bodyId = null;
+    baseUpdateBodyCallback = null;
+    bodyResizeScheduled = false;
+    bodyTabElemRef = null;
+    windowResizeEventBound = false;
+    windowOrientationEventBound = false;
+    portraitMatchMedia = null;
+    screenOrientationChangeHandler = null;
+    focusinEventBound = false;
+    lastFocusedElement = null;
+    footerRegistered = false;
+    footerHeight = 0;
+    footerSlotHasRendered = false;
+    footerDefaultSlotIsPopulated = false;
+    modalLabel = null;
+    modalLabelledBy = null;
+    modalDescribedBy = null;
+    showAriaLiveMessage = false;
+    ariaLiveMessage = '';
+    isModalOpen = false;
+    isModalTransitioningIn = false;
+    savedInertElements = [];
+    @track
+    savedActiveElement;
+    ariaObserver = null;
+    updateHeaderCallback;
+    updateFooterCallback;
+    _resizing;
+    constructor() {
+        super();
+        this.ariaObserver = new AriaObserver(this);
+    }
+    get label() {
+        const modal = this.modal;
+        if (!modal) {
+            return '';
+        }
+        return modal.label;
+    }
+    get description() {
+        const modal = this.modal;
+        if (!modal) {
+            return '';
+        }
+        return modal.description;
+    }
+    normalizeSize(sizeValue) {
+        const sizeDefault = SIZE_MEDIUM;
+        return normalizeString(sizeValue, {
+            fallbackValue: sizeDefault,
+            validValues: [SIZE_FULL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE],
+        });
+    }
+    get isModalSizeNotSet() {
+        return this._size === null;
+    }
+    _size = null;
+    get size() {
+        const sizeDefault = SIZE_MEDIUM;
+        return this._size || sizeDefault;
+    }
+    set size(value) {
+        this._size = value ? this.normalizeSize(value) : null;
+    }
+    get disableClose() {
+        const modal = this.modal;
+        if (!modal) {
+            return false;
+        }
+        return modal.disableClose;
+    }
+    @api
+    get defaultSlot() {
+        return this.template.querySelector('[data-slot]');
+    }
+    get modalWrapper() {
+        return this.template.querySelector('[data-modal]');
+    }
+    get modal() {
+        return ((!import.meta.env.SSR &&
+            this.defaultSlot &&
+            this.defaultSlot.childNodes[0]) ||
+            null);
+    }
+    get modalDescSpan() {
+        return this.template.querySelector('[data-aria-description]');
+    }
+    get modalCloseButton() {
+        return this.template.querySelector('[data-close-button]');
+    }
+    get modalElement() {
+        const modalSlot = this.defaultSlot;
+        if (!modalSlot) {
+            return null;
+        }
+        return modalSlot.querySelector('lightning-modal');
+    }
+    get modalBackdrop() {
+        return this.template.querySelector('[data-backdrop]');
+    }
+    get backdropDimensions() {
+        const backdropElem = this.modalBackdrop;
+        const backdropRect = backdropElem
+            ? backdropElem.getBoundingClientRect()
+            : {};
+        const { height, width } = backdropRect;
+        return {
+            height: height || 0,
+            width: width || 0,
+        };
+    }
+    get modalCssClasses() {
+        const classes = classSet('slds-modal fix-slds-modal');
+        const sizeDefault = SIZE_MEDIUM;
+        const modalSize = this._size === null ? sizeDefault : this.size;
+        if (hasAnimation()) {
+            classes.add({
+                'slds-fade-in-open': this.isModalTransitioningIn,
+            });
+        }
+        else {
+            classes.add({
+                'slds-fade-in-open': true,
+            });
+        }
+        classes.add({
+            'slds-modal_full': modalSize === SIZE_FULL,
+            'slds-modal_medium': modalSize === SIZE_MEDIUM,
+            'slds-modal_large': modalSize === SIZE_LARGE,
+            'slds-modal_small': modalSize === SIZE_SMALL,
+        });
+        return classes.toString();
+    }
+    get modalBackdropCssClasses() {
+        let classes = classSet('slds-backdrop fix-slds-backdrop');
+        if (hasAnimation()) {
+            classes.add({
+                'slds-backdrop_open': this.isModalOpen,
+            });
+        }
+        else {
+            classes = classes.add({
+                'slds-backdrop_open': true,
+            });
+        }
+        return classes.toString();
+    }
+    get isDescriptionSet() {
+        const { description } = this;
+        return !!description?.trim().length;
+    }
+    get computedCloseButtonCssClass() {
+        const classes = classSet('slds-button slds-button_icon slds-modal__close');
+        const fullScreenActive = this.isSmallScreenSize && this.size === SIZE_FULL;
+        classes.add({
+            'slds-modal_full-close-button': fullScreenActive,
+        });
+        return classes.toString();
+    }
+    get showAriaDescribedBy() {
+        return !isAriaDescriptionSupported() && this.isDescriptionSet;
+    }
+    get modalResizing() {
+        if (!this._resizing) {
+            this._resizing = this.scheduleWindowResizeEvent.bind(this);
+        }
+        return this._resizing;
+    }
+    toggleDisableCloseButton() {
+        const isSwitchingToDisabled = !this.disableCloseButton && this.disableClose;
+        const disableCloseButtonMessage = isSwitchingToDisabled
+            ? this.disableCloseBtnMessage
+            : '';
+        if (isSwitchingToDisabled) {
+            this.ariaLiveMessage = disableCloseButtonMessage;
+            this.showAriaLiveMessage = true;
+            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: true });
+            synchronizeAttrs(this.modalCloseButton, { disabled: 'disabled' });
+            this.disableCloseButton = true;
+        }
+        else {
+            this.ariaLiveMessage = disableCloseBtnMessage;
+            this.showAriaLiveMessage = false;
+            synchronizeAttrs(this.modalWrapper, { [`${ARIA.BUSY}`]: null });
+            synchronizeAttrs(this.modalCloseButton, { disabled: null });
+            this.disableCloseButton = false;
+        }
+    }
+    saveActiveElement() {
+        this.savedActiveElement = getElementWithFocus();
+    }
+    renderBackgroundInert() {
+        this.savedInertElements = makeEverythingExceptElementInert(this.template.host);
+    }
+    renderBackgroundActive() {
+        restoreInertness(this.savedInertElements);
+        this.savedInertElements = [];
+    }
+    returnFocusToBackground() {
+        const { savedActiveElement } = this;
+        const elementWasFocused = returnFocusToElement(savedActiveElement);
+        if (!elementWasFocused) {
+            console.warn('Modal :: Nothing to return focus to');
+        }
+    }
+    queueShowModal() {
+        if (this.isModalOpen && !this.isModalTransitioningIn) {
+            this.isModalTransitioningIn = true;
+        }
+    }
+    openModal() {
+        this.saveActiveElement();
+        this.renderBackgroundInert();
+        if (!this.isModalOpen) {
+            this.isModalOpen = true;
+            if (lwcModalCount === 0) {
+                if (!import.meta.env.SSR) {
+                    originalBodyOverflow = getComputedStyle(document.body).overflow;
+                    document.body.style.overflow = 'hidden';
+                }
+            }
+            lwcModalCount++;
+        }
+    }
+    handleModalCloseState() {
+        if (this.isModalOpen) {
+            this.isModalOpen = false;
+            lwcModalCount--;
+            if (lwcModalCount === 0) {
+                if (!import.meta.env.SSR) {
+                    document.body.style.overflow = originalBodyOverflow;
+                }
+                originalBodyOverflow = null;
+            }
+        }
+    }
+    closeModal() {
+        this.returnFocusToBackground();
+        this.renderBackgroundActive(this.savedInertElements);
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+            this.ariaObserver = undefined;
+        }
+    }
+    unsetAriaLabelAndError = () => {
+        synchronizeAttrs(this.modalWrapper, {
+            [ARIA.LABELLEDBY]: null,
+            [ARIA.LABEL]: null,
+        });
+        this.errorLabelRequired();
+        if (this.ariaObserver) {
+            this.ariaObserver.disconnect();
+        }
+    };
+    updateAriaDescription() {
+        const { description } = this;
+        if (isAriaDescriptionSupported()) {
+            const descriptionToSet = this.isDescriptionSet ? description : null;
+            return synchronizeAttrs(this.modalWrapper, {
+                [ARIA.DESCRIPTION]: descriptionToSet,
+            });
+        }
+        const spanId = (this.isDescriptionSet && this.modalDescSpan.id) || null;
+        return synchronizeAttrs(this.modalWrapper, {
+            [ARIA.DESCRIBEDBY]: spanId,
+        });
+    }
+    updateAriaLabel() {
+        const { label, headerRegistered, headerLabelId, headerLabelIsPopulated, } = this;
+        const labelIsEmpty = label === '' || label.trim().length === 0;
+        if (headerRegistered) {
+            if (headerLabelId && headerLabelIsPopulated) {
+                if (this.ariaObserver) {
+                    this.ariaObserver.connect({
+                        targetNode: this.modalWrapper,
+                        attribute: 'aria-labelledby',
+                        relatedNodes: [this.headerTitleRef],
+                    });
+                }
+                synchronizeAttrs(this.modalWrapper, { [ARIA.LABEL]: null });
+            }
+            else {
+                this.unsetAriaLabelAndError();
+            }
+        }
+        else if (!labelIsEmpty) {
+            synchronizeAttrs(this.modalWrapper, {
+                [ARIA.LABELLEDBY]: null,
+                [ARIA.LABEL]: label,
+            });
+        }
+        else if (!this.isModalClosing) {
+            this.unsetAriaLabelAndError();
+        }
+    }
+    errorLabelRequired() {
+        let errorMsg = 'LightningModal - Templates with <lightning-modal-header> should define the label attribute as an attribute on <lightning-modal-header label="Modal Heading"> .';
+        errorMsg +=
+            ' Templates without <lightning-modal-header> should define the label attribute in the Modal.open({ label: "Modal Heading" })';
+        console.error(errorMsg);
+    }
+    handleCloseClick() {
+        if (!this.disableCloseButton) {
+            this.modal.close();
+        }
+    }
+    handlePrivateClose(e) {
+        if (!(e.detail && e.detail[secure])) {
+            console.error('Invalid access to privateclose event');
+            return;
+        }
+        this.handleModalCloseState();
+        this.isModalClosing = true;
+        if (hasAnimation()) {
+            this.modalWrapper.classList.remove('slds-fade-in-open');
+            this.modalBackdrop.classList.remove('slds-backdrop_open');
+            this.modalBackdrop.addEventListener('transitionend', () => {
+                e.detail.resolve();
+            });
+        }
+        else {
+            e.detail.resolve();
+        }
+        if (this.headerRegistered && this.unregisterHeader) {
+            this.unregisterHeader();
+        }
+        if (this.bodyRegistered && this.unregisterBody) {
+            this.unregisterBody();
+        }
+        if (this.footerRegistered && this.unregisterFooter) {
+            this.unregisterFooter();
+        }
+        this.closeModal();
+    }
+    handlePrivateDisableCloseButton(e) {
+        if (!(e.detail && e.detail[secure])) {
+            console.error('Invalid access to privatedisableclose event');
+            return;
+        }
+        this.toggleDisableCloseButton();
+    }
+    handleModalKeyDown(e) {
+        const { ctrlKey, metaKey, shiftKey, key } = e;
+        const hasModifier = ctrlKey || metaKey || shiftKey;
+        if ((!features.enableTooltipHoverDismiss || !hasActiveTooltip()) &&
+            !hasModifier &&
+            !this.disableCloseButton &&
+            (key === 'Esc' || key === 'Escape')) {
+            e.stopPropagation();
+            e.preventDefault();
+            this.handleCloseClick();
+        }
+    }
+    focusFirstElement() {
+        const { autoFocusCompletedOnce, modalElement } = this;
+        if (autoFocusCompletedOnce || !modalElement) {
+            return;
+        }
+        const { bodyRegistered, footerRegistered, headerRegistered, headerTitleRef, headerDefaultSlotIsPopulated, headerSlotHasRendered, bodyDefaultSlotIsPopulated, bodySlotHasRendered, bodyTabElemRef, footerDefaultSlotIsPopulated, footerSlotHasRendered, } = this;
+        const waitForHeaderSlotRender = headerRegistered &&
+            headerDefaultSlotIsPopulated &&
+            !headerSlotHasRendered;
+        const waitForBodySlotRender = bodyRegistered &&
+            bodyDefaultSlotIsPopulated &&
+            !bodySlotHasRendered;
+        const waitForFooterSlotRender = footerRegistered &&
+            footerDefaultSlotIsPopulated &&
+            !footerSlotHasRendered;
+        if (waitForHeaderSlotRender ||
+            waitForBodySlotRender ||
+            waitForFooterSlotRender) {
+            return;
+        }
+        const modalHeadingElem = headerRegistered && headerTitleRef ? headerTitleRef : null;
+        const preferredFocusElem = modalHeadingElem
+            ? modalHeadingElem
+            : bodyTabElemRef || null;
+        const closeButtonElem = this.modalCloseButton;
+        const outerModalElem = this.modalWrapper;
+        const fallbackFocusElem = this.disableCloseButton
+            ? outerModalElem
+            : closeButtonElem;
+        const focusElem = preferredFocusElem
+            ? preferredFocusElem
+            : fallbackFocusElem;
+        if (focusElem !== null) {
+            this.lastFocusedElement = focusElem;
+            requestAnimationFrame(() => {
+                focusElem.focus();
+            });
+            this.autoFocusCompletedOnce = true;
+        }
+        else {
+            console.error('LightningModal - at least one focusable element is required, none found.');
+        }
+    }
+    unregisterBody() {
+        this.initBodyState();
+    }
+    registerBody({ bodyId, bodyIsPopulated, updateBodyCallback, defaultSlotHasRendered, unRegisterCallback, firstTabbableElemRef, }) {
+        this.bodyRegistered = true;
+        this.bodyDefaultSlotIsPopulated = bodyIsPopulated;
+        this.bodySlotHasRendered = defaultSlotHasRendered;
+        this.bodyId = bodyId;
+        this.baseUpdateBodyCallback = updateBodyCallback;
+        this.bodyTabElemRef = firstTabbableElemRef || null;
+        unRegisterCallback(() => {
+            this.unregisterBody();
+        });
+        this.updateModalBodyHeight();
+        if (this.isModalSizeNotSet) {
+            this.size = this.modal?.size || null;
+        }
+        if (!this.windowResizeEventBound) {
+            this.addWindowResizeEventListener();
+        }
+        if (!this.windowOrientationEventBound) {
+            this.addOrientationChangeListener();
+        }
+        if (!this.focusinEventBound) {
+            this.addFocusinEventListener();
+        }
+    }
+    handleBodyRegister(e) {
+        const { detail } = e;
+        this.registerBody(detail);
+        e.stopPropagation();
+    }
+    initBodyState() {
+        this.bodyRegistered = false;
+        this.bodyDefaultSlotIsPopulated = false;
+        this.bodySlotHasRendered = false;
+        this.bodyId = null;
+        this.baseUpdateBodyCallback = null;
+        this.bodyResizeScheduled = false;
+        this.bodyTabElemRef = null;
+        this.removeModalEventListeners();
+    }
+    unregisterHeader() {
+        this.initHeaderState();
+        this.updateAriaLabel();
+    }
+    updateHeaderHeight(value) {
+        this.headerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
+    }
+    registerHeader({ defaultSlotIsPopulated, defaultSlotWrapperId, defaultSlotHasRendered, unRegisterCallback, labelIsPopulated, headerHeight, headerRef, labelId, }) {
+        this.headerRegistered = true;
+        this.updateHeaderHeight(headerHeight);
+        this.headerDefaultSlotIsPopulated = defaultSlotIsPopulated;
+        this.headerSlotHasRendered = defaultSlotHasRendered;
+        this.headerSlotWrapperId = defaultSlotWrapperId;
+        this.headerLabelId = labelId;
+        this.headerLabelIsPopulated = labelIsPopulated;
+        this.headerTitleRef = headerRef;
+        unRegisterCallback(() => {
+            this.unregisterHeader();
+        });
+        if (this.bodyRegistered) {
+            this.updateModalBodyHeight();
+        }
+        if (this.isModalSizeNotSet) {
+            this.size = this.modal?.size || null;
+        }
+    }
+    handleHeaderRegister(e) {
+        const { detail } = e;
+        this.registerHeader(detail);
+        this.updateAriaLabel();
+        e.stopPropagation();
+    }
+    initHeaderState() {
+        this.headerRegistered = false;
+        this.headerHeight = 0;
+        this.headerDefaultSlotIsPopulated = false;
+        this.headerSlotWrapperId = null;
+        this.headerSlotHasRendered = false;
+        this.headerLabelId = null;
+        this.headerLabelIsPopulated = null;
+        this.headerTitleRef = null;
+    }
+    unregisterFooter() {
+        this.initFooterState();
+    }
+    updateFooterHeight(value) {
+        this.footerHeight = !Number.isNaN(value) && value >= 0 ? value : 0;
+    }
+    registerFooter({ defaultSlotIsPopulated, defaultSlotHasRendered, footerHeight, unRegisterCallback, }) {
+        this.footerRegistered = true;
+        this.footerDefaultSlotIsPopulated = defaultSlotIsPopulated;
+        this.footerSlotHasRendered = defaultSlotHasRendered;
+        this.updateFooterHeight(footerHeight);
+        unRegisterCallback(() => {
+            this.unregisterFooter();
+        });
+        if (this.bodyRegistered) {
+            this.updateModalBodyHeight();
+        }
+        if (this.isModalSizeNotSet) {
+            this.size = this.modal?.size || null;
+        }
+    }
+    handleFooterRegister(e) {
+        const { detail } = e;
+        this.registerFooter(detail);
+        e.stopPropagation();
+    }
+    initFooterState() {
+        this.footerRegistered = false;
+        this.footerHeight = 0;
+        this.footerSlotHasRendered = false;
+        this.footerDefaultSlotIsPopulated = false;
+    }
+    updateModalBodyHeight() {
+        if (orgHasWCAGResizeReflowSC) {
+            this.template
+                .querySelector('[data-container]')
+                .classList.add('slds-modal__container__reflow_resize');
+        }
+        clearTimeout(this.timeoutId);
+        this.timeoutId = 0;
+        if (this.updateHeaderCallback) {
+            this.updateHeaderCallback({ size: this.size });
+        }
+        if (this.updateFooterCallback) {
+            this.updateFooterCallback({ size: this.size });
+        }
+        if (this.bodyRegistered && !this.bodyResizeScheduled) {
+            this.setIsSmallScreenSize();
+            requestAnimationFrame(() => {
+                this.bodyResizeScheduled = false;
+                if (this.baseUpdateBodyCallback) {
+                    const values = {
+                        footerHeight: this.footerHeight || 0,
+                        headerHeight: this.headerHeight || 0,
+                        backdropHeight: this.backdropDimensions.height,
+                        backdropWidth: this.backdropDimensions.width,
+                        sizeSetFull: this.size === SIZE_FULL,
+                        isSmallScreenSize: this.isSmallScreenSize,
+                        size: this.size,
+                    };
+                    this.baseUpdateBodyCallback(values);
+                }
+            });
+            this.bodyResizeScheduled = true;
+        }
+    }
+    scheduleWindowResizeEvent() {
+        if (this.timeoutId === 0) {
+            this.timeoutId = setTimeout(() => {
+                this.updateModalBodyHeight();
+            }, DEBOUNCE_RESIZE);
+        }
+    }
+    handleWindowResizeEvent = () => {
+        this.scheduleWindowResizeEvent();
+    };
+    addWindowResizeEventListener() {
+        if (!import.meta.env.SSR && !this.windowResizeEventBound) {
+            window.addEventListener('resize', this.handleWindowResizeEvent);
+            this.windowResizeEventBound = true;
+        }
+    }
+    removeWindowResizeEventListener() {
+        if (!import.meta.env.SSR && this.windowResizeEventBound) {
+            window.removeEventListener('resize', this.handleWindowResizeEvent);
+            clearTimeout(this.timeoutId);
+            this.timeoutId = 0;
+            this.windowResizeEventBound = false;
+        }
+    }
+    removeOrientationChangeListener() {
+        if (this.windowOrientationEventBound && this.portraitMatchMedia) {
+            this.portraitMatchMedia.removeEventListener('change', this.screenOrientationChangeHandler);
+            this.portraitMatchMedia = null;
+            this.windowOrientationEventBound = false;
+        }
+        if (this.screenOrientationChangeHandler) {
+            this.screenOrientationChangeHandler = null;
+        }
+    }
+    addOrientationChangeListener() {
+        if (!import.meta.env.SSR) {
+            this.portraitMatchMedia = window.matchMedia('(orientation: portrait)');
+            this.screenOrientationChangeHandler =
+                this.handleWindowResizeEvent.bind(this);
+            if (this.portraitMatchMedia) {
+                this.portraitMatchMedia.addEventListener('change', this.screenOrientationChangeHandler);
+                this.windowOrientationEventBound = true;
+            }
+        }
+    }
+    addFocusinEventListener() {
+        if (!this.focusinEventBound) {
+            this.focusinEventBound = true;
+            window.addEventListener('focusin', modalFocusinEventHandler.bind(this));
+        }
+    }
+    removeFocusinEventListener() {
+        if (this.focusinEventBound) {
+            this.focusinEventBound = false;
+            window.removeEventListener('focusin', modalFocusinEventHandler.bind(this));
+        }
+    }
+    handleModalBaseFocusin = modalFocusinEventHandler.bind(this);
+    handleLastFocusedElem(e) {
+        if (!(e.detail && e.detail[secure])) {
+            console.error('Invalid access to onprivatelightningmodallastfocus event');
+            return;
+        }
+        e.stopPropagation();
+        this.lastFocusedElement = e.detail.privatelightningmodallastfocus;
+    }
+    setIsSmallScreenSize() {
+        if (!import.meta.env.SSR) {
+            const docElem = (document && document.documentElement) || null;
+            const browserWidth = docElem
+                ? docElem.clientWidth
+                : window.innerWidth;
+            const isSmallScreenSize = browserWidth <= SMALL_SCREEN_SIZE;
+            if (isSmallScreenSize !== this.isSmallScreenSize) {
+                this.isSmallScreenSize = isSmallScreenSize;
+            }
+        }
+    }
+    removeModalEventListeners() {
+        this.removeWindowResizeEventListener();
+        this.removeOrientationChangeListener();
+        this.removeFocusinEventListener();
+    }
+    initBaseState() {
+        this.initialRender = true;
+        this.autoFocusCompletedOnce = false;
+        this.windowResizeEventBound = false;
+        this.timeoutId = 0;
+        this.disableCloseButton = false;
+        this.modalLabel = null;
+        this.modalLabelledBy = null;
+        this.modalDescribedBy = null;
+        this.showAriaLiveMessage = false;
+        this.ariaLiveMessage = '';
+        this.savedInertElements = [];
+        this.savedActiveElement = null;
+        this.isModalOpen = false;
+        this.isModalTransitioningIn = false;
+        this.isModalClosing = false;
+        this._size = null;
+        this.isSmallScreenSize = null;
+    }
+    initModalState() {
+        this.initBaseState();
+        this.initHeaderState();
+        this.initBodyState();
+        this.initFooterState();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.initModalState();
+        this.setIsSmallScreenSize();
+    }
+    disconnectedCallback() {
+        this.handleModalCloseState();
+        this.removeModalEventListeners();
+        this.closeModal();
+    }
+    renderedCallback() {
+        if (this.initialRender) {
+            this.openModal();
+            this.initialRender = false;
+        }
+        else {
+            this.updateAriaLabel();
+            this.updateAriaDescription();
+            if (!this.isModalTransitioningIn) {
+                this.queueShowModal();
+            }
+            if (!this.autoFocusCompletedOnce) {
+                this.toggleDisableCloseButton();
+                this.focusFirstElement();
+            }
+            if (this.isModalSizeNotSet) {
+                this.size = this.modal?.size || null;
+            }
+        }
+        this.updateModalBodyHeight();
+    }
+}