/**
 * DevExtreme (esm/__internal/ui/popup/m_popup.js)
 * Version: 23.2.9 (build 24294-0112)
 * Build date: Sun Oct 20 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import "../../../ui/toolbar/ui.toolbar.base";
import registerComponent from "../../../core/component_registrator";
import devices from "../../../core/devices";
import {
    getPublicElement
} from "../../../core/element";
import Guid from "../../../core/guid";
import $ from "../../../core/renderer";
import resizeObserverSingleton from "../../../core/resize_observer";
import {
    EmptyTemplate
} from "../../../core/templates/empty_template";
import browser from "../../../core/utils/browser";
import {
    noop
} from "../../../core/utils/common";
import {
    extend
} from "../../../core/utils/extend";
import {
    camelize
} from "../../../core/utils/inflector";
import {
    each
} from "../../../core/utils/iterator";
import {
    getBoundingRect
} from "../../../core/utils/position";
import {
    addOffsetToMaxHeight,
    addOffsetToMinHeight,
    getHeight,
    getOuterWidth,
    getVerticalOffsets,
    getVisibleHeight,
    getWidth
} from "../../../core/utils/size";
import {
    isDefined,
    isObject
} from "../../../core/utils/type";
import {
    compare as compareVersions
} from "../../../core/utils/version";
import {
    getWindow,
    hasWindow
} from "../../../core/utils/window";
import {
    triggerResizeEvent
} from "../../../events/visibility_change";
import messageLocalization from "../../../localization/message";
import Button from "../../../ui/button";
import Overlay from "../../../ui/overlay/ui.overlay";
import Resizable from "../../../ui/resizable";
import {
    isFluent,
    isMaterial,
    isMaterialBased
} from "../../../ui/themes";
import * as zIndexPool from "../../ui/overlay/m_z_index";
import PopupDrag from "./m_popup_drag";
import {
    createBodyOverflowManager
} from "./m_popup_overflow_manager";
import {
    PopupPositionController
} from "./m_popup_position_controller";
var window = getWindow();
var POPUP_CLASS = "dx-popup";
var POPUP_WRAPPER_CLASS = "dx-popup-wrapper";
var POPUP_FULL_SCREEN_CLASS = "dx-popup-fullscreen";
var POPUP_FULL_SCREEN_WIDTH_CLASS = "dx-popup-fullscreen-width";
var POPUP_NORMAL_CLASS = "dx-popup-normal";
var POPUP_CONTENT_CLASS = "dx-popup-content";
var POPUP_CONTENT_SCROLLABLE_CLASS = "dx-popup-content-scrollable";
var DISABLED_STATE_CLASS = "dx-state-disabled";
var POPUP_DRAGGABLE_CLASS = "dx-popup-draggable";
var POPUP_TITLE_CLASS = "dx-popup-title";
var POPUP_TITLE_CLOSEBUTTON_CLASS = "dx-closebutton";
var POPUP_BOTTOM_CLASS = "dx-popup-bottom";
var POPUP_HAS_CLOSE_BUTTON_CLASS = "dx-has-close-button";
var TEMPLATE_WRAPPER_CLASS = "dx-template-wrapper";
var POPUP_CONTENT_FLEX_HEIGHT_CLASS = "dx-popup-flex-height";
var POPUP_CONTENT_INHERIT_HEIGHT_CLASS = "dx-popup-inherit-height";
var TOOLBAR_LABEL_CLASS = "dx-toolbar-label";
var ALLOWED_TOOLBAR_ITEM_ALIASES = ["cancel", "clear", "done"];
var BUTTON_DEFAULT_TYPE = "default";
var BUTTON_NORMAL_TYPE = "normal";
var BUTTON_TEXT_MODE = "text";
var BUTTON_CONTAINED_MODE = "contained";
var BUTTON_OUTLINED_MODE = "outlined";
var IS_OLD_SAFARI = browser.safari && compareVersions(browser.version, [11]) < 0;
var HEIGHT_STRATEGIES = {
    static: "",
    inherit: POPUP_CONTENT_INHERIT_HEIGHT_CLASS,
    flex: POPUP_CONTENT_FLEX_HEIGHT_CLASS
};
var getButtonPlace = name => {
    var device = devices.current();
    var {
        platform: platform
    } = device;
    var toolbar = "bottom";
    var location = "before";
    if ("ios" === platform) {
        switch (name) {
            case "cancel":
                toolbar = "top";
                break;
            case "clear":
                toolbar = "top";
                location = "after";
                break;
            case "done":
                location = "after"
        }
    } else if ("android" === platform) {
        switch (name) {
            case "cancel":
            case "done":
                location = "after"
        }
    }
    return {
        toolbar: toolbar,
        location: location
    }
};
var Popup = Overlay.inherit({
    _supportedKeys() {
        return extend(this.callBase(), {
            upArrow: e => {
                var _a;
                null === (_a = this._drag) || void 0 === _a ? void 0 : _a.moveUp(e)
            },
            downArrow: e => {
                var _a;
                null === (_a = this._drag) || void 0 === _a ? void 0 : _a.moveDown(e)
            },
            leftArrow: e => {
                var _a;
                null === (_a = this._drag) || void 0 === _a ? void 0 : _a.moveLeft(e)
            },
            rightArrow: e => {
                var _a;
                null === (_a = this._drag) || void 0 === _a ? void 0 : _a.moveRight(e)
            }
        })
    },
    _getDefaultOptions() {
        return extend(this.callBase(), {
            fullScreen: false,
            title: "",
            showTitle: true,
            titleTemplate: "title",
            onTitleRendered: null,
            dragOutsideBoundary: false,
            dragEnabled: false,
            dragAndResizeArea: void 0,
            enableBodyScroll: true,
            outsideDragFactor: 0,
            onResizeStart: null,
            onResize: null,
            onResizeEnd: null,
            resizeEnabled: false,
            toolbarItems: [],
            showCloseButton: false,
            bottomTemplate: "bottom",
            useDefaultToolbarButtons: false,
            useFlatToolbarButtons: false,
            autoResizeEnabled: true
        })
    },
    _defaultOptionsRules() {
        return this.callBase().concat([{
            device: {
                platform: "ios"
            },
            options: {
                animation: this._iosAnimation
            }
        }, {
            device: {
                platform: "android"
            },
            options: {
                animation: this._androidAnimation
            }
        }, {
            device: {
                platform: "generic"
            },
            options: {
                showCloseButton: true
            }
        }, {
            device: device => "desktop" === devices.real().deviceType && "generic" === device.platform,
            options: {
                dragEnabled: true
            }
        }, {
            device: () => "desktop" === devices.real().deviceType && !devices.isSimulator(),
            options: {
                focusStateEnabled: true
            }
        }, {
            device: () => isMaterialBased(),
            options: {
                useFlatToolbarButtons: true
            }
        }, {
            device: () => isMaterial(),
            options: {
                useDefaultToolbarButtons: true,
                showCloseButton: false
            }
        }])
    },
    _iosAnimation: {
        show: {
            type: "slide",
            duration: 400,
            from: {
                position: {
                    my: "top",
                    at: "bottom"
                }
            },
            to: {
                position: {
                    my: "center",
                    at: "center"
                }
            }
        },
        hide: {
            type: "slide",
            duration: 400,
            from: {
                opacity: 1,
                position: {
                    my: "center",
                    at: "center"
                }
            },
            to: {
                opacity: 1,
                position: {
                    my: "top",
                    at: "bottom"
                }
            }
        }
    },
    _androidAnimation() {
        return this.option("fullScreen") ? {
            show: {
                type: "slide",
                duration: 300,
                from: {
                    top: "30%",
                    opacity: 0
                },
                to: {
                    top: 0,
                    opacity: 1
                }
            },
            hide: {
                type: "slide",
                duration: 300,
                from: {
                    top: 0,
                    opacity: 1
                },
                to: {
                    top: "30%",
                    opacity: 0
                }
            }
        } : {
            show: {
                type: "fade",
                duration: 400,
                from: 0,
                to: 1
            },
            hide: {
                type: "fade",
                duration: 400,
                from: 1,
                to: 0
            }
        }
    },
    _init() {
        var popupWrapperClassExternal = this.option("_wrapperClassExternal");
        var popupWrapperClasses = popupWrapperClassExternal ? "".concat(POPUP_WRAPPER_CLASS, " ").concat(popupWrapperClassExternal) : POPUP_WRAPPER_CLASS;
        this.callBase();
        this._createBodyOverflowManager();
        this._updateResizeCallbackSkipCondition();
        this.$element().addClass(POPUP_CLASS);
        this.$wrapper().addClass(popupWrapperClasses);
        this._$popupContent = this._$content.wrapInner($("<div>").addClass(POPUP_CONTENT_CLASS)).children().eq(0);
        this._toggleContentScrollClass();
        this.$overlayContent().attr("role", "dialog")
    },
    _render() {
        var isFullscreen = this.option("fullScreen");
        this._toggleFullScreenClass(isFullscreen);
        this.callBase()
    },
    _createBodyOverflowManager() {
        this._bodyOverflowManager = createBodyOverflowManager()
    },
    _toggleFullScreenClass(value) {
        this.$overlayContent().toggleClass(POPUP_FULL_SCREEN_CLASS, value).toggleClass(POPUP_NORMAL_CLASS, !value)
    },
    _initTemplates() {
        this.callBase();
        this._templateManager.addDefaultTemplates({
            title: new EmptyTemplate,
            bottom: new EmptyTemplate
        })
    },
    _getActionsList() {
        return this.callBase().concat(["onResizeStart", "onResize", "onResizeEnd"])
    },
    _contentResizeHandler(entry) {
        if (!this._shouldSkipContentResize(entry)) {
            this._renderGeometry({
                shouldOnlyReposition: true
            })
        }
    },
    _doesShowAnimationChangeDimensions() {
        var animation = this.option("animation");
        return ["to", "from"].some(prop => {
            var _a;
            var config = null === (_a = null === animation || void 0 === animation ? void 0 : animation.show) || void 0 === _a ? void 0 : _a[prop];
            return isObject(config) && ("width" in config || "height" in config)
        })
    },
    _updateResizeCallbackSkipCondition() {
        var doesShowAnimationChangeDimensions = this._doesShowAnimationChangeDimensions();
        this._shouldSkipContentResize = entry => doesShowAnimationChangeDimensions && this._showAnimationProcessing || this._areContentDimensionsRendered(entry)
    },
    _observeContentResize(shouldObserve) {
        if (!this.option("useResizeObserver")) {
            return
        }
        var contentElement = this._$content.get(0);
        if (shouldObserve) {
            resizeObserverSingleton.observe(contentElement, entry => {
                this._contentResizeHandler(entry)
            })
        } else {
            resizeObserverSingleton.unobserve(contentElement)
        }
    },
    _areContentDimensionsRendered(entry) {
        var _a, _b, _c, _d, _e;
        var contentBox = null === (_a = entry.contentBoxSize) || void 0 === _a ? void 0 : _a[0];
        if (contentBox) {
            return parseInt(contentBox.inlineSize, 10) === (null === (_b = this._renderedDimensions) || void 0 === _b ? void 0 : _b.width) && parseInt(contentBox.blockSize, 10) === (null === (_c = this._renderedDimensions) || void 0 === _c ? void 0 : _c.height)
        }
        var {
            contentRect: contentRect
        } = entry;
        return parseInt(contentRect.width, 10) === (null === (_d = this._renderedDimensions) || void 0 === _d ? void 0 : _d.width) && parseInt(contentRect.height, 10) === (null === (_e = this._renderedDimensions) || void 0 === _e ? void 0 : _e.height)
    },
    _renderContent() {
        this.callBase();
        this._observeContentResize(true)
    },
    _renderContentImpl() {
        this._renderTitle();
        this.callBase();
        this._renderResize();
        this._renderBottom()
    },
    _renderTitle() {
        var items = this._getToolbarItems("top");
        var {
            title: title,
            showTitle: showTitle
        } = this.option();
        if (showTitle && !!title) {
            items.unshift({
                location: devices.current().ios ? "center" : "before",
                text: title
            })
        }
        if (showTitle || items.length > 0) {
            this._$title && this._$title.remove();
            var $title = $("<div>").addClass(POPUP_TITLE_CLASS).insertBefore(this.$content());
            this._$title = this._renderTemplateByType("titleTemplate", items, $title).addClass(POPUP_TITLE_CLASS);
            this._renderDrag();
            this._executeTitleRenderAction(this._$title);
            this._$title.toggleClass(POPUP_HAS_CLOSE_BUTTON_CLASS, this._hasCloseButton())
        } else if (this._$title) {
            this._$title.detach()
        }
        this._toggleAriaLabel()
    },
    _toggleAriaLabel() {
        var _a;
        var {
            title: title,
            showTitle: showTitle
        } = this.option();
        var shouldSetAriaLabel = showTitle && !!title;
        var titleId = shouldSetAriaLabel ? new Guid : null;
        null === (_a = this._$title) || void 0 === _a ? void 0 : _a.find(".".concat(TOOLBAR_LABEL_CLASS)).eq(0).attr("id", titleId);
        this.$overlayContent().attr("aria-labelledby", titleId)
    },
    _renderTemplateByType(optionName, data, $container, additionalToolbarOptions) {
        var {
            rtlEnabled: rtlEnabled,
            useDefaultToolbarButtons: useDefaultToolbarButtons,
            useFlatToolbarButtons: useFlatToolbarButtons,
            disabled: disabled
        } = this.option();
        var template = this._getTemplateByOption(optionName);
        var toolbarTemplate = template instanceof EmptyTemplate;
        if (toolbarTemplate) {
            var integrationOptions = extend({}, this.option("integrationOptions"), {
                skipTemplates: ["content", "title"]
            });
            var toolbarOptions = extend(additionalToolbarOptions, {
                items: data,
                rtlEnabled: rtlEnabled,
                useDefaultButtons: useDefaultToolbarButtons,
                useFlatButtons: useFlatToolbarButtons,
                disabled: disabled,
                integrationOptions: integrationOptions
            });
            this._getTemplate("dx-polymorph-widget").render({
                container: $container,
                model: {
                    widget: this._getToolbarName(),
                    options: toolbarOptions
                }
            });
            var $toolbar = $container.children("div");
            $container.replaceWith($toolbar);
            return $toolbar
        }
        var $result = $(template.render({
            container: getPublicElement($container)
        }));
        if ($result.hasClass(TEMPLATE_WRAPPER_CLASS)) {
            $container.replaceWith($result);
            $container = $result
        }
        return $container
    },
    _getToolbarName: () => "dxToolbarBase",
    _renderVisibilityAnimate(visible) {
        return this.callBase(visible)
    },
    _hide() {
        this._observeContentResize(false);
        return this.callBase()
    },
    _executeTitleRenderAction($titleElement) {
        this._getTitleRenderAction()({
            titleElement: getPublicElement($titleElement)
        })
    },
    _getTitleRenderAction() {
        return this._titleRenderAction || this._createTitleRenderAction()
    },
    _createTitleRenderAction() {
        return this._titleRenderAction = this._createActionByOption("onTitleRendered", {
            element: this.element(),
            excludeValidators: ["disabled", "readOnly"]
        })
    },
    _getCloseButton() {
        return {
            toolbar: "top",
            location: "after",
            template: this._getCloseButtonRenderer()
        }
    },
    _getCloseButtonRenderer() {
        return (_, __, container) => {
            var $button = $("<div>").addClass(POPUP_TITLE_CLOSEBUTTON_CLASS);
            this._createComponent($button, Button, {
                icon: "close",
                onClick: this._createToolbarItemAction(void 0),
                stylingMode: "text",
                integrationOptions: {}
            });
            $(container).append($button)
        }
    },
    _getToolbarItems(toolbar) {
        var toolbarItems = this.option("toolbarItems");
        var toolbarsItems = [];
        this._toolbarItemClasses = [];
        var currentPlatform = devices.current().platform;
        var index = 0;
        each(toolbarItems, (_, data) => {
            var isShortcut = isDefined(data.shortcut);
            var item = isShortcut ? getButtonPlace(data.shortcut) : data;
            if (isShortcut && "ios" === currentPlatform && index < 2) {
                item.toolbar = "top";
                index++
            }
            item.toolbar = data.toolbar || item.toolbar || "top";
            if (item && item.toolbar === toolbar) {
                if (isShortcut) {
                    extend(item, {
                        location: data.location
                    }, this._getToolbarItemByAlias(data))
                }
                var isLTROrder = "generic" === currentPlatform;
                if ("done" === data.shortcut && isLTROrder || "cancel" === data.shortcut && !isLTROrder) {
                    toolbarsItems.unshift(item)
                } else {
                    toolbarsItems.push(item)
                }
            }
        });
        if ("top" === toolbar && this._hasCloseButton()) {
            toolbarsItems.push(this._getCloseButton())
        }
        return toolbarsItems
    },
    _hasCloseButton() {
        return this.option("showCloseButton") && this.option("showTitle")
    },
    _getLocalizationKey: itemType => "done" === itemType.toLowerCase() ? "OK" : camelize(itemType, true),
    _getToolbarButtonStylingMode(shortcut) {
        if (isFluent()) {
            return "done" === shortcut ? BUTTON_CONTAINED_MODE : BUTTON_OUTLINED_MODE
        }
        return this.option("useFlatToolbarButtons") ? BUTTON_TEXT_MODE : BUTTON_CONTAINED_MODE
    },
    _getToolbarButtonType(shortcut) {
        if (isFluent() && "done" === shortcut || this.option("useDefaultToolbarButtons")) {
            return BUTTON_DEFAULT_TYPE
        }
        return BUTTON_NORMAL_TYPE
    },
    _getToolbarItemByAlias(data) {
        var that = this;
        var itemType = data.shortcut;
        if (!ALLOWED_TOOLBAR_ITEM_ALIASES.includes(itemType)) {
            return false
        }
        var itemConfig = extend({
            text: messageLocalization.format(this._getLocalizationKey(itemType)),
            onClick: this._createToolbarItemAction(data.onClick),
            integrationOptions: {},
            type: this._getToolbarButtonType(itemType),
            stylingMode: this._getToolbarButtonStylingMode(itemType)
        }, data.options || {});
        var itemClass = "".concat(POPUP_CLASS, "-").concat(itemType);
        this._toolbarItemClasses.push(itemClass);
        return {
            template(_, __, container) {
                var $toolbarItem = $("<div>").addClass(itemClass).appendTo(container);
                that._createComponent($toolbarItem, Button, itemConfig)
            }
        }
    },
    _createToolbarItemAction(clickAction) {
        return this._createAction(clickAction, {
            afterExecute(e) {
                e.component.hide()
            }
        })
    },
    _renderBottom() {
        var items = this._getToolbarItems("bottom");
        if (items.length) {
            this._$bottom && this._$bottom.remove();
            var $bottom = $("<div>").addClass(POPUP_BOTTOM_CLASS).insertAfter(this.$content());
            this._$bottom = this._renderTemplateByType("bottomTemplate", items, $bottom, {
                compactMode: true
            }).addClass(POPUP_BOTTOM_CLASS);
            this._toggleClasses()
        } else {
            this._$bottom && this._$bottom.detach()
        }
    },
    _toggleDisabledState(value) {
        this.callBase(...arguments);
        this.$content().toggleClass(DISABLED_STATE_CLASS, Boolean(value))
    },
    _toggleClasses() {
        var aliases = ALLOWED_TOOLBAR_ITEM_ALIASES;
        each(aliases, (_, alias) => {
            var className = "".concat(POPUP_CLASS, "-").concat(alias);
            if (this._toolbarItemClasses.includes(className)) {
                this.$wrapper().addClass("".concat(className, "-visible"));
                this._$bottom.addClass(className)
            } else {
                this.$wrapper().removeClass("".concat(className, "-visible"));
                this._$bottom.removeClass(className)
            }
        })
    },
    _toggleFocusClass(isFocused, $element) {
        this.callBase(isFocused, $element);
        if (isFocused && !zIndexPool.isLastZIndexInStack(this._zIndex)) {
            var zIndex = zIndexPool.create(this._zIndexInitValue());
            zIndexPool.remove(this._zIndex);
            this._zIndex = zIndex;
            this._$wrapper.css("zIndex", zIndex);
            this._$content.css("zIndex", zIndex)
        }
    },
    _toggleContentScrollClass() {
        var isNativeScrollingEnabled = !this.option("preventScrollEvents");
        this.$content().toggleClass(POPUP_CONTENT_SCROLLABLE_CLASS, isNativeScrollingEnabled)
    },
    _getPositionControllerConfig() {
        var {
            fullScreen: fullScreen,
            forceApplyBindings: forceApplyBindings,
            dragOutsideBoundary: dragOutsideBoundary,
            dragAndResizeArea: dragAndResizeArea,
            outsideDragFactor: outsideDragFactor
        } = this.option();
        return extend({}, this.callBase(), {
            fullScreen: fullScreen,
            forceApplyBindings: forceApplyBindings,
            dragOutsideBoundary: dragOutsideBoundary,
            dragAndResizeArea: dragAndResizeArea,
            outsideDragFactor: outsideDragFactor
        })
    },
    _initPositionController() {
        this._positionController = new PopupPositionController(this._getPositionControllerConfig())
    },
    _getDragTarget() {
        return this.topToolbar()
    },
    _renderGeometry(options) {
        var {
            visible: visible,
            useResizeObserver: useResizeObserver
        } = this.option();
        if (visible && hasWindow()) {
            var isAnimated = this._showAnimationProcessing;
            var shouldRepeatAnimation = isAnimated && !(null === options || void 0 === options ? void 0 : options.forceStopAnimation) && useResizeObserver;
            this._isAnimationPaused = shouldRepeatAnimation || void 0;
            this._stopAnimation();
            if (null === options || void 0 === options ? void 0 : options.shouldOnlyReposition) {
                this._renderPosition(false)
            } else {
                this._renderGeometryImpl(null === options || void 0 === options ? void 0 : options.isDimensionChange)
            }
            if (shouldRepeatAnimation) {
                this._animateShowing();
                this._isAnimationPaused = void 0
            }
        }
    },
    _cacheDimensions() {
        if (!this.option("useResizeObserver")) {
            return
        }
        this._renderedDimensions = {
            width: parseInt(getWidth(this._$content), 10),
            height: parseInt(getHeight(this._$content), 10)
        }
    },
    _renderGeometryImpl() {
        var isDimensionChange = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : false;
        if (!isDimensionChange) {
            this._resetContentHeight()
        }
        this.callBase();
        this._cacheDimensions();
        this._setContentHeight()
    },
    _resetContentHeight() {
        var height = this._getOptionValue("height");
        if ("auto" === height) {
            this.$content().css({
                height: "auto",
                maxHeight: "none"
            })
        }
    },
    _renderDrag() {
        var $dragTarget = this._getDragTarget();
        var dragEnabled = this.option("dragEnabled");
        if (!$dragTarget) {
            return
        }
        var config = {
            dragEnabled: dragEnabled,
            handle: $dragTarget.get(0),
            draggableElement: this._$content.get(0),
            positionController: this._positionController
        };
        if (this._drag) {
            this._drag.init(config)
        } else {
            this._drag = new PopupDrag(config)
        }
        this.$overlayContent().toggleClass(POPUP_DRAGGABLE_CLASS, dragEnabled)
    },
    _renderResize() {
        this._resizable = this._createComponent(this._$content, Resizable, {
            handles: this.option("resizeEnabled") ? "all" : "none",
            onResizeEnd: e => {
                this._resizeEndHandler(e);
                this._observeContentResize(true)
            },
            onResize: e => {
                this._setContentHeight();
                this._actions.onResize(e)
            },
            onResizeStart: e => {
                this._observeContentResize(false);
                this._actions.onResizeStart(e)
            },
            minHeight: 100,
            minWidth: 100,
            area: this._positionController.$dragResizeContainer,
            keepAspectRatio: false
        })
    },
    _resizeEndHandler(e) {
        var width = this._resizable.option("width");
        var height = this._resizable.option("height");
        width && this._setOptionWithoutOptionChange("width", width);
        height && this._setOptionWithoutOptionChange("height", height);
        this._cacheDimensions();
        this._positionController.resizeHandled();
        this._positionController.detectVisualPositionChange(e.event);
        this._actions.onResizeEnd(e)
    },
    _setContentHeight() {
        (this.option("forceApplyBindings") || noop)();
        var overlayContent = this.$overlayContent().get(0);
        var currentHeightStrategyClass = this._chooseHeightStrategy(overlayContent);
        this.$content().css(this._getHeightCssStyles(currentHeightStrategyClass, overlayContent));
        this._setHeightClasses(this.$overlayContent(), currentHeightStrategyClass)
    },
    _heightStrategyChangeOffset: (currentHeightStrategyClass, popupVerticalPaddings) => currentHeightStrategyClass === HEIGHT_STRATEGIES.flex ? -popupVerticalPaddings : 0,
    _chooseHeightStrategy(overlayContent) {
        var isAutoWidth = "auto" === overlayContent.style.width || "" === overlayContent.style.width;
        var currentHeightStrategyClass = HEIGHT_STRATEGIES.static;
        if (this._isAutoHeight() && this.option("autoResizeEnabled")) {
            if (isAutoWidth || IS_OLD_SAFARI) {
                currentHeightStrategyClass = HEIGHT_STRATEGIES.inherit
            } else {
                currentHeightStrategyClass = HEIGHT_STRATEGIES.flex
            }
        }
        return currentHeightStrategyClass
    },
    _getHeightCssStyles(currentHeightStrategyClass, overlayContent) {
        var cssStyles = {};
        var contentMaxHeight = this._getOptionValue("maxHeight", overlayContent);
        var contentMinHeight = this._getOptionValue("minHeight", overlayContent);
        var popupHeightParts = this._splitPopupHeight();
        var toolbarsAndVerticalOffsetsHeight = popupHeightParts.header + popupHeightParts.footer + popupHeightParts.contentVerticalOffsets + popupHeightParts.popupVerticalOffsets + this._heightStrategyChangeOffset(currentHeightStrategyClass, popupHeightParts.popupVerticalPaddings);
        if (currentHeightStrategyClass === HEIGHT_STRATEGIES.static) {
            if (!this._isAutoHeight() || contentMaxHeight || contentMinHeight) {
                var overlayHeight = this.option("fullScreen") ? Math.min(getBoundingRect(overlayContent).height, getWindow().innerHeight) : getBoundingRect(overlayContent).height;
                var contentHeight = overlayHeight - toolbarsAndVerticalOffsetsHeight;
                cssStyles = {
                    height: Math.max(0, contentHeight),
                    minHeight: "auto",
                    maxHeight: "auto"
                }
            }
        } else {
            var container = $(this._positionController.$visualContainer).get(0);
            var maxHeightValue = addOffsetToMaxHeight(contentMaxHeight, -toolbarsAndVerticalOffsetsHeight, container);
            var minHeightValue = addOffsetToMinHeight(contentMinHeight, -toolbarsAndVerticalOffsetsHeight, container);
            cssStyles = {
                height: "auto",
                minHeight: minHeightValue,
                maxHeight: maxHeightValue
            }
        }
        return cssStyles
    },
    _setHeightClasses($container, currentClass) {
        var excessClasses = "";
        for (var name in HEIGHT_STRATEGIES) {
            if (HEIGHT_STRATEGIES[name] !== currentClass) {
                excessClasses += " ".concat(HEIGHT_STRATEGIES[name])
            }
        }
        $container.removeClass(excessClasses).addClass(currentClass)
    },
    _isAutoHeight() {
        return "auto" === this.$overlayContent().get(0).style.height
    },
    _splitPopupHeight() {
        var topToolbar = this.topToolbar();
        var bottomToolbar = this.bottomToolbar();
        return {
            header: getVisibleHeight(topToolbar && topToolbar.get(0)),
            footer: getVisibleHeight(bottomToolbar && bottomToolbar.get(0)),
            contentVerticalOffsets: getVerticalOffsets(this.$overlayContent().get(0), true),
            popupVerticalOffsets: getVerticalOffsets(this.$content().get(0), true),
            popupVerticalPaddings: getVerticalOffsets(this.$content().get(0), false)
        }
    },
    _isAllWindowCovered() {
        return this.callBase() || this.option("fullScreen")
    },
    _renderDimensions() {
        if (this.option("fullScreen")) {
            this.$overlayContent().css({
                width: "100%",
                height: "100%",
                minWidth: "",
                maxWidth: "",
                minHeight: "",
                maxHeight: ""
            })
        } else {
            this.callBase()
        }
        if (hasWindow()) {
            this._renderFullscreenWidthClass()
        }
    },
    _dimensionChanged() {
        this._renderGeometry({
            isDimensionChange: true
        })
    },
    _clean() {
        this.callBase();
        this._observeContentResize(false)
    },
    _dispose() {
        this.callBase();
        this._toggleBodyScroll(true)
    },
    _renderFullscreenWidthClass() {
        this.$overlayContent().toggleClass(POPUP_FULL_SCREEN_WIDTH_CLASS, getOuterWidth(this.$overlayContent()) === getWidth(window))
    },
    _toggleSafariScrolling() {
        if (!this.option("enableBodyScroll")) {
            return
        }
        this.callBase()
    },
    _toggleBodyScroll(enabled) {
        if (!this._bodyOverflowManager) {
            return
        }
        var {
            setOverflow: setOverflow,
            restoreOverflow: restoreOverflow
        } = this._bodyOverflowManager;
        if (enabled) {
            restoreOverflow()
        } else {
            setOverflow()
        }
    },
    refreshPosition() {
        this._renderPosition()
    },
    _optionChanged(args) {
        var _a, _b;
        var {
            value: value,
            name: name
        } = args;
        switch (name) {
            case "disabled":
                this.callBase(args);
                this._renderTitle();
                this._renderBottom();
                break;
            case "animation":
                this._updateResizeCallbackSkipCondition();
                break;
            case "enableBodyScroll":
                if (this.option("visible")) {
                    this._toggleBodyScroll(value)
                }
                break;
            case "showTitle":
            case "title":
            case "titleTemplate":
                this._renderTitle();
                this._renderGeometry();
                triggerResizeEvent(this.$overlayContent());
                break;
            case "bottomTemplate":
                this._renderBottom();
                this._renderGeometry();
                triggerResizeEvent(this.$overlayContent());
                break;
            case "container":
                this.callBase(args);
                if (this.option("resizeEnabled")) {
                    null === (_a = this._resizable) || void 0 === _a ? void 0 : _a.option("area", this._positionController.$dragResizeContainer)
                }
                break;
            case "width":
            case "height":
                this.callBase(args);
                null === (_b = this._resizable) || void 0 === _b ? void 0 : _b.option(name, value);
                break;
            case "onTitleRendered":
                this._createTitleRenderAction(value);
                break;
            case "toolbarItems":
            case "useDefaultToolbarButtons":
            case "useFlatToolbarButtons":
                var shouldRenderGeometry = !args.fullName.match(/^toolbarItems((\[\d+\])(\.(options|visible).*)?)?$/);
                this._renderTitle();
                this._renderBottom();
                if (shouldRenderGeometry) {
                    this._renderGeometry();
                    triggerResizeEvent(this.$overlayContent())
                }
                break;
            case "dragEnabled":
                this._renderDrag();
                break;
            case "dragAndResizeArea":
                this._positionController.dragAndResizeArea = value;
                if (this.option("resizeEnabled")) {
                    this._resizable.option("area", this._positionController.$dragResizeContainer)
                }
                this._positionController.positionContent();
                break;
            case "dragOutsideBoundary":
                this._positionController.dragOutsideBoundary = value;
                if (this.option("resizeEnabled")) {
                    this._resizable.option("area", this._positionController.$dragResizeContainer)
                }
                break;
            case "outsideDragFactor":
                this._positionController.outsideDragFactor = value;
                break;
            case "resizeEnabled":
                this._renderResize();
                this._renderGeometry();
                break;
            case "autoResizeEnabled":
                this._renderGeometry();
                triggerResizeEvent(this.$overlayContent());
                break;
            case "fullScreen":
                this._positionController.fullScreen = value;
                this._toggleFullScreenClass(value);
                this._toggleSafariScrolling();
                this._renderGeometry();
                triggerResizeEvent(this.$overlayContent());
                break;
            case "showCloseButton":
                this._renderTitle();
                break;
            case "preventScrollEvents":
                this.callBase(args);
                this._toggleContentScrollClass();
                break;
            default:
                this.callBase(args)
        }
    },
    bottomToolbar() {
        return this._$bottom
    },
    topToolbar() {
        return this._$title
    },
    $content() {
        return this._$popupContent
    },
    content() {
        return getPublicElement(this.$content())
    },
    $overlayContent() {
        return this._$content
    },
    getFocusableElements() {
        return this.$wrapper().find("[tabindex]").filter((index, item) => item.getAttribute("tabindex") >= 0)
    }
});
registerComponent("dxPopup", Popup);
export default Popup;
