margin\n\n /* istanbul ignore next: difficult to test in JSDOM */\n\n selectAll(SELECTOR_NAVBAR_TOGGLER).forEach(function (el)\n /* istanbul ignore next */\n {\n var actualMargin = getStyle(el, 'marginRight') || '';\n setAttr(el, 'data-margin-right', actualMargin);\n setStyle(el, 'marginRight', \"\".concat(toFloat(getCS(el).marginRight, 0) + scrollbarWidth, \"px\"));\n\n body._marginChangedForModal.push(el);\n }); // Adjust body padding\n\n var actualPadding = getStyle(body, 'paddingRight') || '';\n setAttr(body, 'data-padding-right', actualPadding);\n setStyle(body, 'paddingRight', \"\".concat(toFloat(getCS(body).paddingRight, 0) + scrollbarWidth, \"px\"));\n }\n },\n resetScrollbar: function resetScrollbar() {\n var body = document.body;\n\n if (body._paddingChangedForModal) {\n // Restore fixed content padding\n body._paddingChangedForModal.forEach(function (el) {\n /* istanbul ignore next: difficult to test in JSDOM */\n if (hasAttr(el, 'data-padding-right')) {\n setStyle(el, 'paddingRight', getAttr(el, 'data-padding-right') || '');\n removeAttr(el, 'data-padding-right');\n }\n });\n }\n\n if (body._marginChangedForModal) {\n // Restore sticky content and navbar-toggler margin\n body._marginChangedForModal.forEach(function (el) {\n /* istanbul ignore next: difficult to test in JSDOM */\n if (hasAttr(el, 'data-margin-right')) {\n setStyle(el, 'marginRight', getAttr(el, 'data-margin-right') || '');\n removeAttr(el, 'data-margin-right');\n }\n });\n }\n\n body._paddingChangedForModal = null;\n body._marginChangedForModal = null; // Restore body padding\n\n if (hasAttr(body, 'data-padding-right')) {\n setStyle(body, 'paddingRight', getAttr(body, 'data-padding-right') || '');\n removeAttr(body, 'data-padding-right');\n }\n }\n }\n}); // Create and export our modal manager instance\n\nexport var modalManager = new ModalManager();","function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nimport { COMPONENT_UID_KEY, Vue } from '../../vue';\nimport { NAME_MODAL } from '../../constants/components';\nimport { IS_BROWSER } from '../../constants/env';\nimport { EVENT_NAME_CANCEL, EVENT_NAME_CHANGE, EVENT_NAME_CLOSE, EVENT_NAME_HIDDEN, EVENT_NAME_HIDE, EVENT_NAME_OK, EVENT_NAME_SHOW, EVENT_NAME_SHOWN, EVENT_NAME_TOGGLE, EVENT_OPTIONS_NO_CAPTURE } from '../../constants/events';\nimport { CODE_ESC } from '../../constants/key-codes';\nimport { PROP_TYPE_ARRAY_OBJECT_STRING, PROP_TYPE_ARRAY_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_OBJECT, PROP_TYPE_STRING } from '../../constants/props';\nimport { HTMLElement } from '../../constants/safe-types';\nimport { SLOT_NAME_DEFAULT, SLOT_NAME_MODAL_BACKDROP, SLOT_NAME_MODAL_CANCEL, SLOT_NAME_MODAL_FOOTER, SLOT_NAME_MODAL_HEADER, SLOT_NAME_MODAL_HEADER_CLOSE, SLOT_NAME_MODAL_OK, SLOT_NAME_MODAL_TITLE } from '../../constants/slots';\nimport { arrayIncludes, concat } from '../../utils/array';\nimport { attemptFocus, closest, contains, getActiveElement as _getActiveElement, getTabables, requestAF, select } from '../../utils/dom';\nimport { getRootActionEventName, getRootEventName, eventOn, eventOff } from '../../utils/events';\nimport { htmlOrText } from '../../utils/html';\nimport { identity } from '../../utils/identity';\nimport { isString, isUndefinedOrNull } from '../../utils/inspect';\nimport { makeModelMixin } from '../../utils/model';\nimport { sortKeys } from '../../utils/object';\nimport { observeDom } from '../../utils/observe-dom';\nimport { makeProp, makePropsConfigurable } from '../../utils/props';\nimport { attrsMixin } from '../../mixins/attrs';\nimport { idMixin, props as idProps } from '../../mixins/id';\nimport { listenOnDocumentMixin } from '../../mixins/listen-on-document';\nimport { listenOnRootMixin } from '../../mixins/listen-on-root';\nimport { listenOnWindowMixin } from '../../mixins/listen-on-window';\nimport { normalizeSlotMixin } from '../../mixins/normalize-slot';\nimport { scopedStyleMixin } from '../../mixins/scoped-style';\nimport { BButton } from '../button/button';\nimport { BButtonClose } from '../button/button-close';\nimport { BVTransition } from '../transition/bv-transition';\nimport { BVTransporter } from '../transporter/transporter';\nimport { BvModalEvent } from './helpers/bv-modal-event.class';\nimport { modalManager } from './helpers/modal-manager'; // --- Constants ---\n\nvar _makeModelMixin = makeModelMixin('visible', {\n type: PROP_TYPE_BOOLEAN,\n defaultValue: false,\n event: EVENT_NAME_CHANGE\n}),\n modelMixin = _makeModelMixin.mixin,\n modelProps = _makeModelMixin.props,\n MODEL_PROP_NAME = _makeModelMixin.prop,\n MODEL_EVENT_NAME = _makeModelMixin.event;\n\nvar TRIGGER_BACKDROP = 'backdrop';\nvar TRIGGER_ESC = 'esc';\nvar TRIGGER_FORCE = 'FORCE';\nvar TRIGGER_TOGGLE = 'toggle';\nvar BUTTON_CANCEL = 'cancel'; // TODO: This should be renamed to 'close'\n\nvar BUTTON_CLOSE = 'headerclose';\nvar BUTTON_OK = 'ok';\nvar BUTTONS = [BUTTON_CANCEL, BUTTON_CLOSE, BUTTON_OK]; // `ObserveDom` config to detect changes in modal content\n// so that we can adjust the modal padding if needed\n\nvar OBSERVER_CONFIG = {\n subtree: true,\n childList: true,\n characterData: true,\n attributes: true,\n attributeFilter: ['style', 'class']\n}; // --- Props ---\n\nexport var props = makePropsConfigurable(sortKeys(_objectSpread(_objectSpread(_objectSpread({}, idProps), modelProps), {}, {\n ariaLabel: makeProp(PROP_TYPE_STRING),\n autoFocusButton: makeProp(PROP_TYPE_STRING, null,\n /* istanbul ignore next */\n function (value) {\n return isUndefinedOrNull(value) || arrayIncludes(BUTTONS, value);\n }),\n bodyBgVariant: makeProp(PROP_TYPE_STRING),\n bodyClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),\n bodyTextVariant: makeProp(PROP_TYPE_STRING),\n busy: makeProp(PROP_TYPE_BOOLEAN, false),\n buttonSize: makeProp(PROP_TYPE_STRING),\n cancelDisabled: makeProp(PROP_TYPE_BOOLEAN, false),\n cancelTitle: makeProp(PROP_TYPE_STRING, 'Cancel'),\n cancelTitleHtml: makeProp(PROP_TYPE_STRING),\n cancelVariant: makeProp(PROP_TYPE_STRING, 'secondary'),\n centered: makeProp(PROP_TYPE_BOOLEAN, false),\n contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),\n dialogClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),\n footerBgVariant: makeProp(PROP_TYPE_STRING),\n footerBorderVariant: makeProp(PROP_TYPE_STRING),\n footerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),\n footerTextVariant: makeProp(PROP_TYPE_STRING),\n headerBgVariant: makeProp(PROP_TYPE_STRING),\n headerBorderVariant: makeProp(PROP_TYPE_STRING),\n headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),\n headerCloseContent: makeProp(PROP_TYPE_STRING, '×'),\n headerCloseLabel: makeProp(PROP_TYPE_STRING, 'Close'),\n headerCloseVariant: makeProp(PROP_TYPE_STRING),\n headerTextVariant: makeProp(PROP_TYPE_STRING),\n // TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`\n hideBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),\n // TODO: Rename to `noFooter` and deprecate `hideFooter`\n hideFooter: makeProp(PROP_TYPE_BOOLEAN, false),\n // TODO: Rename to `noHeader` and deprecate `hideHeader`\n hideHeader: makeProp(PROP_TYPE_BOOLEAN, false),\n // TODO: Rename to `noHeaderClose` and deprecate `hideHeaderClose`\n hideHeaderClose: makeProp(PROP_TYPE_BOOLEAN, false),\n ignoreEnforceFocusSelector: makeProp(PROP_TYPE_ARRAY_STRING),\n lazy: makeProp(PROP_TYPE_BOOLEAN, false),\n modalClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),\n noCloseOnBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),\n noCloseOnEsc: makeProp(PROP_TYPE_BOOLEAN, false),\n noEnforceFocus: makeProp(PROP_TYPE_BOOLEAN, false),\n noFade: makeProp(PROP_TYPE_BOOLEAN, false),\n noStacking: makeProp(PROP_TYPE_BOOLEAN, false),\n okDisabled: makeProp(PROP_TYPE_BOOLEAN, false),\n okOnly: makeProp(PROP_TYPE_BOOLEAN, false),\n okTitle: makeProp(PROP_TYPE_STRING, 'OK'),\n okTitleHtml: makeProp(PROP_TYPE_STRING),\n okVariant: makeProp(PROP_TYPE_STRING, 'primary'),\n // HTML Element, CSS selector string or Vue component instance\n returnFocus: makeProp([HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING]),\n scrollable: makeProp(PROP_TYPE_BOOLEAN, false),\n size: makeProp(PROP_TYPE_STRING, 'md'),\n static: makeProp(PROP_TYPE_BOOLEAN, false),\n title: makeProp(PROP_TYPE_STRING),\n titleClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),\n titleHtml: makeProp(PROP_TYPE_STRING),\n titleSrOnly: makeProp(PROP_TYPE_BOOLEAN, false),\n titleTag: makeProp(PROP_TYPE_STRING, 'h5')\n})), NAME_MODAL); // --- Main component ---\n// @vue/component\n\nexport var BModal = /*#__PURE__*/Vue.extend({\n name: NAME_MODAL,\n mixins: [attrsMixin, idMixin, modelMixin, listenOnDocumentMixin, listenOnRootMixin, listenOnWindowMixin, normalizeSlotMixin, scopedStyleMixin],\n inheritAttrs: false,\n props: props,\n data: function data() {\n return {\n isHidden: true,\n // If modal should not be in document\n isVisible: false,\n // Controls modal visible state\n isTransitioning: false,\n // Used for style control\n isShow: false,\n // Used for style control\n isBlock: false,\n // Used for style control\n isOpening: false,\n // To signal that the modal is in the process of opening\n isClosing: false,\n // To signal that the modal is in the process of closing\n ignoreBackdropClick: false,\n // Used to signify if click out listener should ignore the click\n isModalOverflowing: false,\n // The following items are controlled by the modalManager instance\n scrollbarWidth: 0,\n zIndex: modalManager.getBaseZIndex(),\n isTop: true,\n isBodyOverflowing: false\n };\n },\n computed: {\n modalId: function modalId() {\n return this.safeId();\n },\n modalOuterId: function modalOuterId() {\n return this.safeId('__BV_modal_outer_');\n },\n modalHeaderId: function modalHeaderId() {\n return this.safeId('__BV_modal_header_');\n },\n modalBodyId: function modalBodyId() {\n return this.safeId('__BV_modal_body_');\n },\n modalTitleId: function modalTitleId() {\n return this.safeId('__BV_modal_title_');\n },\n modalContentId: function modalContentId() {\n return this.safeId('__BV_modal_content_');\n },\n modalFooterId: function modalFooterId() {\n return this.safeId('__BV_modal_footer_');\n },\n modalBackdropId: function modalBackdropId() {\n return this.safeId('__BV_modal_backdrop_');\n },\n modalClasses: function modalClasses() {\n return [{\n fade: !this.noFade,\n show: this.isShow\n }, this.modalClass];\n },\n modalStyles: function modalStyles() {\n var sbWidth = \"\".concat(this.scrollbarWidth, \"px\");\n return {\n paddingLeft: !this.isBodyOverflowing && this.isModalOverflowing ? sbWidth : '',\n paddingRight: this.isBodyOverflowing && !this.isModalOverflowing ? sbWidth : '',\n // Needed to fix issue https://github.com/bootstrap-vue/bootstrap-vue/issues/3457\n // Even though we are using v-show, we must ensure 'none' is restored in the styles\n display: this.isBlock ? 'block' : 'none'\n };\n },\n dialogClasses: function dialogClasses() {\n var _ref;\n\n return [(_ref = {}, _defineProperty(_ref, \"modal-\".concat(this.size), this.size), _defineProperty(_ref, 'modal-dialog-centered', this.centered), _defineProperty(_ref, 'modal-dialog-scrollable', this.scrollable), _ref), this.dialogClass];\n },\n headerClasses: function headerClasses() {\n var _ref2;\n\n return [(_ref2 = {}, _defineProperty(_ref2, \"bg-\".concat(this.headerBgVariant), this.headerBgVariant), _defineProperty(_ref2, \"text-\".concat(this.headerTextVariant), this.headerTextVariant), _defineProperty(_ref2, \"border-\".concat(this.headerBorderVariant), this.headerBorderVariant), _ref2), this.headerClass];\n },\n titleClasses: function titleClasses() {\n return [{\n 'sr-only': this.titleSrOnly\n }, this.titleClass];\n },\n bodyClasses: function bodyClasses() {\n var _ref3;\n\n return [(_ref3 = {}, _defineProperty(_ref3, \"bg-\".concat(this.bodyBgVariant), this.bodyBgVariant), _defineProperty(_ref3, \"text-\".concat(this.bodyTextVariant), this.bodyTextVariant), _ref3), this.bodyClass];\n },\n footerClasses: function footerClasses() {\n var _ref4;\n\n return [(_ref4 = {}, _defineProperty(_ref4, \"bg-\".concat(this.footerBgVariant), this.footerBgVariant), _defineProperty(_ref4, \"text-\".concat(this.footerTextVariant), this.footerTextVariant), _defineProperty(_ref4, \"border-\".concat(this.footerBorderVariant), this.footerBorderVariant), _ref4), this.footerClass];\n },\n modalOuterStyle: function modalOuterStyle() {\n // Styles needed for proper stacking of modals\n return {\n position: 'absolute',\n zIndex: this.zIndex\n };\n },\n slotScope: function slotScope() {\n return {\n cancel: this.onCancel,\n close: this.onClose,\n hide: this.hide,\n ok: this.onOk,\n visible: this.isVisible\n };\n },\n computeIgnoreEnforceFocusSelector: function computeIgnoreEnforceFocusSelector() {\n // Normalize to an single selector with selectors separated by `,`\n return concat(this.ignoreEnforceFocusSelector).filter(identity).join(',').trim();\n },\n computedAttrs: function computedAttrs() {\n // If the parent has a scoped style attribute, and the modal\n // is portalled, add the scoped attribute to the modal wrapper\n var scopedStyleAttrs = !this.static ? this.scopedStyleAttrs : {};\n return _objectSpread(_objectSpread(_objectSpread({}, scopedStyleAttrs), this.bvAttrs), {}, {\n id: this.modalOuterId\n });\n },\n computedModalAttrs: function computedModalAttrs() {\n var isVisible = this.isVisible,\n ariaLabel = this.ariaLabel;\n return {\n id: this.modalId,\n role: 'dialog',\n 'aria-hidden': isVisible ? null : 'true',\n 'aria-modal': isVisible ? 'true' : null,\n 'aria-label': ariaLabel,\n 'aria-labelledby': this.hideHeader || ariaLabel || // TODO: Rename slot to `title` and deprecate `modal-title`\n !(this.hasNormalizedSlot(SLOT_NAME_MODAL_TITLE) || this.titleHtml || this.title) ? null : this.modalTitleId,\n 'aria-describedby': this.modalBodyId\n };\n }\n },\n watch: _defineProperty({}, MODEL_PROP_NAME, function (newValue, oldValue) {\n if (newValue !== oldValue) {\n this[newValue ? 'show' : 'hide']();\n }\n }),\n created: function created() {\n // Define non-reactive properties\n this.$_observer = null;\n this.$_returnFocus = this.returnFocus || null;\n },\n mounted: function mounted() {\n // Set initial z-index as queried from the DOM\n this.zIndex = modalManager.getBaseZIndex(); // Listen for events from others to either open or close ourselves\n // and listen to all modals to enable/disable enforce focus\n\n this.listenOnRoot(getRootActionEventName(NAME_MODAL, EVENT_NAME_SHOW), this.showHandler);\n this.listenOnRoot(getRootActionEventName(NAME_MODAL, EVENT_NAME_HIDE), this.hideHandler);\n this.listenOnRoot(getRootActionEventName(NAME_MODAL, EVENT_NAME_TOGGLE), this.toggleHandler); // Listen for `bv:modal::show events`, and close ourselves if the\n // opening modal not us\n\n this.listenOnRoot(getRootEventName(NAME_MODAL, EVENT_NAME_SHOW), this.modalListener); // Initially show modal?\n\n if (this[MODEL_PROP_NAME] === true) {\n this.$nextTick(this.show);\n }\n },\n beforeDestroy: function beforeDestroy() {\n // Ensure everything is back to normal\n this.setObserver(false);\n\n if (this.isVisible) {\n this.isVisible = false;\n this.isShow = false;\n this.isTransitioning = false;\n }\n },\n methods: {\n setObserver: function setObserver() {\n var on = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n this.$_observer && this.$_observer.disconnect();\n this.$_observer = null;\n\n if (on) {\n this.$_observer = observeDom(this.$refs.content, this.checkModalOverflow.bind(this), OBSERVER_CONFIG);\n }\n },\n // Private method to update the v-model\n updateModel: function updateModel(value) {\n if (value !== this[MODEL_PROP_NAME]) {\n this.$emit(MODEL_EVENT_NAME, value);\n }\n },\n // Private method to create a BvModalEvent object\n buildEvent: function buildEvent(type) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n return new BvModalEvent(type, _objectSpread(_objectSpread({\n // Default options\n cancelable: false,\n target: this.$refs.modal || this.$el || null,\n relatedTarget: null,\n trigger: null\n }, options), {}, {\n // Options that can't be overridden\n vueTarget: this,\n componentId: this.modalId\n }));\n },\n // Public method to show modal\n show: function show() {\n if (this.isVisible || this.isOpening) {\n // If already open, or in the process of opening, do nothing\n\n /* istanbul ignore next */\n return;\n }\n /* istanbul ignore next */\n\n\n if (this.isClosing) {\n // If we are in the process of closing, wait until hidden before re-opening\n\n /* istanbul ignore next */\n this.$once(EVENT_NAME_HIDDEN, this.show);\n /* istanbul ignore next */\n\n return;\n }\n\n this.isOpening = true; // Set the element to return focus to when closed\n\n this.$_returnFocus = this.$_returnFocus || this.getActiveElement();\n var showEvt = this.buildEvent(EVENT_NAME_SHOW, {\n cancelable: true\n });\n this.emitEvent(showEvt); // Don't show if canceled\n\n if (showEvt.defaultPrevented || this.isVisible) {\n this.isOpening = false; // Ensure the v-model reflects the current state\n\n this.updateModel(false);\n return;\n } // Show the modal\n\n\n this.doShow();\n },\n // Public method to hide modal\n hide: function hide() {\n var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';\n\n if (!this.isVisible || this.isClosing) {\n /* istanbul ignore next */\n return;\n }\n\n this.isClosing = true;\n var hideEvt = this.buildEvent(EVENT_NAME_HIDE, {\n cancelable: trigger !== TRIGGER_FORCE,\n trigger: trigger || null\n }); // We emit specific event for one of the three built-in buttons\n\n if (trigger === BUTTON_OK) {\n this.$emit(EVENT_NAME_OK, hideEvt);\n } else if (trigger === BUTTON_CANCEL) {\n this.$emit(EVENT_NAME_CANCEL, hideEvt);\n } else if (trigger === BUTTON_CLOSE) {\n this.$emit(EVENT_NAME_CLOSE, hideEvt);\n }\n\n this.emitEvent(hideEvt); // Hide if not canceled\n\n if (hideEvt.defaultPrevented || !this.isVisible) {\n this.isClosing = false; // Ensure v-model reflects current state\n\n this.updateModel(true);\n return;\n } // Stop observing for content changes\n\n\n this.setObserver(false); // Trigger the hide transition\n\n this.isVisible = false; // Update the v-model\n\n this.updateModel(false);\n },\n // Public method to toggle modal visibility\n toggle: function toggle(triggerEl) {\n if (triggerEl) {\n this.$_returnFocus = triggerEl;\n }\n\n if (this.isVisible) {\n this.hide(TRIGGER_TOGGLE);\n } else {\n this.show();\n }\n },\n // Private method to get the current document active element\n getActiveElement: function getActiveElement() {\n // Returning focus to `document.body` may cause unwanted scrolls,\n // so we exclude setting focus on body\n var activeElement = _getActiveElement(IS_BROWSER ? [document.body] : []); // Preset the fallback return focus value if it is not set\n // `document.activeElement` should be the trigger element that was clicked or\n // in the case of using the v-model, which ever element has current focus\n // Will be overridden by some commands such as toggle, etc.\n // Note: On IE 11, `document.activeElement` may be `null`\n // So we test it for truthiness first\n // https://github.com/bootstrap-vue/bootstrap-vue/issues/3206\n\n\n return activeElement && activeElement.focus ? activeElement : null;\n },\n // Private method to finish showing modal\n doShow: function doShow() {\n var _this = this;\n\n /* istanbul ignore next: commenting out for now until we can test stacking */\n if (modalManager.modalsAreOpen && this.noStacking) {\n // If another modal(s) is already open, wait for it(them) to close\n this.listenOnRootOnce(getRootEventName(NAME_MODAL, EVENT_NAME_HIDDEN), this.doShow);\n return;\n }\n\n modalManager.registerModal(this); // Place modal in DOM\n\n this.isHidden = false;\n this.$nextTick(function () {\n // We do this in `$nextTick()` to ensure the modal is in DOM first\n // before we show it\n _this.isVisible = true;\n _this.isOpening = false; // Update the v-model\n\n _this.updateModel(true);\n\n _this.$nextTick(function () {\n // Observe changes in modal content and adjust if necessary\n // In a `$nextTick()` in case modal content is lazy\n _this.setObserver(true);\n });\n });\n },\n // Transition handlers\n onBeforeEnter: function onBeforeEnter() {\n this.isTransitioning = true;\n this.setResizeEvent(true);\n },\n onEnter: function onEnter() {\n var _this2 = this;\n\n this.isBlock = true; // We add the `show` class 1 frame later\n // `requestAF()` runs the callback before the next repaint, so we need\n // two calls to guarantee the next frame has been rendered\n\n requestAF(function () {\n requestAF(function () {\n _this2.isShow = true;\n });\n });\n },\n onAfterEnter: function onAfterEnter() {\n var _this3 = this;\n\n this.checkModalOverflow();\n this.isTransitioning = false; // We use `requestAF()` to allow transition hooks to complete\n // before passing control over to the other handlers\n // This will allow users to not have to use `$nextTick()` or `requestAF()`\n // when trying to pre-focus an element\n\n requestAF(function () {\n _this3.emitEvent(_this3.buildEvent(EVENT_NAME_SHOWN));\n\n _this3.setEnforceFocus(true);\n\n _this3.$nextTick(function () {\n // Delayed in a `$nextTick()` to allow users time to pre-focus\n // an element if the wish\n _this3.focusFirst();\n });\n });\n },\n onBeforeLeave: function onBeforeLeave() {\n this.isTransitioning = true;\n this.setResizeEvent(false);\n this.setEnforceFocus(false);\n },\n onLeave: function onLeave() {\n // Remove the 'show' class\n this.isShow = false;\n },\n onAfterLeave: function onAfterLeave() {\n var _this4 = this;\n\n this.isBlock = false;\n this.isTransitioning = false;\n this.isModalOverflowing = false;\n this.isHidden = true;\n this.$nextTick(function () {\n _this4.isClosing = false;\n modalManager.unregisterModal(_this4);\n\n _this4.returnFocusTo(); // TODO: Need to find a way to pass the `trigger` property\n // to the `hidden` event, not just only the `hide` event\n\n\n _this4.emitEvent(_this4.buildEvent(EVENT_NAME_HIDDEN));\n });\n },\n emitEvent: function emitEvent(bvEvent) {\n var type = bvEvent.type; // We emit on `$root` first in case a global listener wants to cancel\n // the event first before the instance emits its event\n\n this.emitOnRoot(getRootEventName(NAME_MODAL, type), bvEvent, bvEvent.componentId);\n this.$emit(type, bvEvent);\n },\n // UI event handlers\n onDialogMousedown: function onDialogMousedown() {\n var _this5 = this;\n\n // Watch to see if the matching mouseup event occurs outside the dialog\n // And if it does, cancel the clickOut handler\n var modal = this.$refs.modal;\n\n var onceModalMouseup = function onceModalMouseup(event) {\n eventOff(modal, 'mouseup', onceModalMouseup, EVENT_OPTIONS_NO_CAPTURE);\n\n if (event.target === modal) {\n _this5.ignoreBackdropClick = true;\n }\n };\n\n eventOn(modal, 'mouseup', onceModalMouseup, EVENT_OPTIONS_NO_CAPTURE);\n },\n onClickOut: function onClickOut(event) {\n if (this.ignoreBackdropClick) {\n // Click was initiated inside the modal content, but finished outside.\n // Set by the above onDialogMousedown handler\n this.ignoreBackdropClick = false;\n return;\n } // Do nothing if not visible, backdrop click disabled, or element\n // that generated click event is no longer in document body\n\n\n if (!this.isVisible || this.noCloseOnBackdrop || !contains(document.body, event.target)) {\n return;\n } // If backdrop clicked, hide modal\n\n\n if (!contains(this.$refs.content, event.target)) {\n this.hide(TRIGGER_BACKDROP);\n }\n },\n onOk: function onOk() {\n this.hide(BUTTON_OK);\n },\n onCancel: function onCancel() {\n this.hide(BUTTON_CANCEL);\n },\n onClose: function onClose() {\n this.hide(BUTTON_CLOSE);\n },\n onEsc: function onEsc(event) {\n // If ESC pressed, hide modal\n if (event.keyCode === CODE_ESC && this.isVisible && !this.noCloseOnEsc) {\n this.hide(TRIGGER_ESC);\n }\n },\n // Document focusin listener\n focusHandler: function focusHandler(event) {\n // If focus leaves modal content, bring it back\n var content = this.$refs.content;\n var target = event.target;\n\n if (this.noEnforceFocus || !this.isTop || !this.isVisible || !content || document === target || contains(content, target) || this.computeIgnoreEnforceFocusSelector && closest(this.computeIgnoreEnforceFocusSelector, target, true)) {\n return;\n }\n\n var tabables = getTabables(this.$refs.content);\n var bottomTrap = this.$refs['bottom-trap'];\n var topTrap = this.$refs['top-trap'];\n\n if (bottomTrap && target === bottomTrap) {\n // If user pressed TAB out of modal into our bottom trab trap element\n // Find the first tabable element in the modal content and focus it\n if (attemptFocus(tabables[0])) {\n // Focus was successful\n return;\n }\n } else if (topTrap && target === topTrap) {\n // If user pressed CTRL-TAB out of modal and into our top tab trap element\n // Find the last tabable element in the modal content and focus it\n if (attemptFocus(tabables[tabables.length - 1])) {\n // Focus was successful\n return;\n }\n } // Otherwise focus the modal content container\n\n\n attemptFocus(content, {\n preventScroll: true\n });\n },\n // Turn on/off focusin listener\n setEnforceFocus: function setEnforceFocus(on) {\n this.listenDocument(on, 'focusin', this.focusHandler);\n },\n // Resize listener\n setResizeEvent: function setResizeEvent(on) {\n this.listenWindow(on, 'resize', this.checkModalOverflow);\n this.listenWindow(on, 'orientationchange', this.checkModalOverflow);\n },\n // Root listener handlers\n showHandler: function showHandler(id, triggerEl) {\n if (id === this.modalId) {\n this.$_returnFocus = triggerEl || this.getActiveElement();\n this.show();\n }\n },\n hideHandler: function hideHandler(id) {\n if (id === this.modalId) {\n this.hide('event');\n }\n },\n toggleHandler: function toggleHandler(id, triggerEl) {\n if (id === this.modalId) {\n this.toggle(triggerEl);\n }\n },\n modalListener: function modalListener(bvEvent) {\n // If another modal opens, close this one if stacking not permitted\n if (this.noStacking && bvEvent.vueTarget !== this) {\n this.hide();\n }\n },\n // Focus control handlers\n focusFirst: function focusFirst() {\n var _this6 = this;\n\n // Don't try and focus if we are SSR\n if (IS_BROWSER) {\n requestAF(function () {\n var modal = _this6.$refs.modal;\n var content = _this6.$refs.content;\n\n var activeElement = _this6.getActiveElement(); // If the modal contains the activeElement, we don't do anything\n\n\n if (modal && content && !(activeElement && contains(content, activeElement))) {\n var ok = _this6.$refs['ok-button'];\n var cancel = _this6.$refs['cancel-button'];\n var close = _this6.$refs['close-button']; // Focus the appropriate button or modal content wrapper\n\n var autoFocus = _this6.autoFocusButton;\n /* istanbul ignore next */\n\n var el = autoFocus === BUTTON_OK && ok ? ok.$el || ok : autoFocus === BUTTON_CANCEL && cancel ? cancel.$el || cancel : autoFocus === BUTTON_CLOSE && close ? close.$el || close : content; // Focus the element\n\n attemptFocus(el);\n\n if (el === content) {\n // Make sure top of modal is showing (if longer than the viewport)\n _this6.$nextTick(function () {\n modal.scrollTop = 0;\n });\n }\n }\n });\n }\n },\n returnFocusTo: function returnFocusTo() {\n // Prefer `returnFocus` prop over event specified\n // `return_focus` value\n var el = this.returnFocus || this.$_returnFocus || null;\n this.$_returnFocus = null;\n this.$nextTick(function () {\n // Is el a string CSS selector?\n el = isString(el) ? select(el) : el;\n\n if (el) {\n // Possibly could be a component reference\n el = el.$el || el;\n attemptFocus(el);\n }\n });\n },\n checkModalOverflow: function checkModalOverflow() {\n if (this.isVisible) {\n var modal = this.$refs.modal;\n this.isModalOverflowing = modal.scrollHeight > document.documentElement.clientHeight;\n }\n },\n makeModal: function makeModal(h) {\n // Modal header\n var $header = h();\n\n if (!this.hideHeader) {\n // TODO: Rename slot to `header` and deprecate `modal-header`\n var $modalHeader = this.normalizeSlot(SLOT_NAME_MODAL_HEADER, this.slotScope);\n\n if (!$modalHeader) {\n var $closeButton = h();\n\n if (!this.hideHeaderClose) {\n $closeButton = h(BButtonClose, {\n props: {\n content: this.headerCloseContent,\n disabled: this.isTransitioning,\n ariaLabel: this.headerCloseLabel,\n textVariant: this.headerCloseVariant || this.headerTextVariant\n },\n on: {\n click: this.onClose\n },\n ref: 'close-button'\n }, // TODO: Rename slot to `header-close` and deprecate `modal-header-close`\n [this.normalizeSlot(SLOT_NAME_MODAL_HEADER_CLOSE)]);\n }\n\n $modalHeader = [h(this.titleTag, {\n staticClass: 'modal-title',\n class: this.titleClasses,\n attrs: {\n id: this.modalTitleId\n },\n // TODO: Rename slot to `title` and deprecate `modal-title`\n domProps: this.hasNormalizedSlot(SLOT_NAME_MODAL_TITLE) ? {} : htmlOrText(this.titleHtml, this.title)\n }, // TODO: Rename slot to `title` and deprecate `modal-title`\n this.normalizeSlot(SLOT_NAME_MODAL_TITLE, this.slotScope)), $closeButton];\n }\n\n $header = h('header', {\n staticClass: 'modal-header',\n class: this.headerClasses,\n attrs: {\n id: this.modalHeaderId\n },\n ref: 'header'\n }, [$modalHeader]);\n } // Modal body\n\n\n var $body = h('div', {\n staticClass: 'modal-body',\n class: this.bodyClasses,\n attrs: {\n id: this.modalBodyId\n },\n ref: 'body'\n }, this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope)); // Modal footer\n\n var $footer = h();\n\n if (!this.hideFooter) {\n // TODO: Rename slot to `footer` and deprecate `modal-footer`\n var $modalFooter = this.normalizeSlot(SLOT_NAME_MODAL_FOOTER, this.slotScope);\n\n if (!$modalFooter) {\n var $cancelButton = h();\n\n if (!this.okOnly) {\n $cancelButton = h(BButton, {\n props: {\n variant: this.cancelVariant,\n size: this.buttonSize,\n disabled: this.cancelDisabled || this.busy || this.isTransitioning\n },\n // TODO: Rename slot to `cancel-button` and deprecate `modal-cancel`\n domProps: this.hasNormalizedSlot(SLOT_NAME_MODAL_CANCEL) ? {} : htmlOrText(this.cancelTitleHtml, this.cancelTitle),\n on: {\n click: this.onCancel\n },\n ref: 'cancel-button'\n }, // TODO: Rename slot to `cancel-button` and deprecate `modal-cancel`\n this.normalizeSlot(SLOT_NAME_MODAL_CANCEL));\n }\n\n var $okButton = h(BButton, {\n props: {\n variant: this.okVariant,\n size: this.buttonSize,\n disabled: this.okDisabled || this.busy || this.isTransitioning\n },\n // TODO: Rename slot to `ok-button` and deprecate `modal-ok`\n domProps: this.hasNormalizedSlot(SLOT_NAME_MODAL_OK) ? {} : htmlOrText(this.okTitleHtml, this.okTitle),\n on: {\n click: this.onOk\n },\n ref: 'ok-button'\n }, // TODO: Rename slot to `ok-button` and deprecate `modal-ok`\n this.normalizeSlot(SLOT_NAME_MODAL_OK));\n $modalFooter = [$cancelButton, $okButton];\n }\n\n $footer = h('footer', {\n staticClass: 'modal-footer',\n class: this.footerClasses,\n attrs: {\n id: this.modalFooterId\n },\n ref: 'footer'\n }, [$modalFooter]);\n } // Assemble modal content\n\n\n var $modalContent = h('div', {\n staticClass: 'modal-content',\n class: this.contentClass,\n attrs: {\n id: this.modalContentId,\n tabindex: '-1'\n },\n ref: 'content'\n }, [$header, $body, $footer]); // Tab traps to prevent page from scrolling to next element in\n // tab index during enforce-focus tab cycle\n\n var $tabTrapTop = h();\n var $tabTrapBottom = h();\n\n if (this.isVisible && !this.noEnforceFocus) {\n $tabTrapTop = h('span', {\n attrs: {\n tabindex: '0'\n },\n ref: 'top-trap'\n });\n $tabTrapBottom = h('span', {\n attrs: {\n tabindex: '0'\n },\n ref: 'bottom-trap'\n });\n } // Modal dialog wrapper\n\n\n var $modalDialog = h('div', {\n staticClass: 'modal-dialog',\n class: this.dialogClasses,\n on: {\n mousedown: this.onDialogMousedown\n },\n ref: 'dialog'\n }, [$tabTrapTop, $modalContent, $tabTrapBottom]); // Modal\n\n var $modal = h('div', {\n staticClass: 'modal',\n class: this.modalClasses,\n style: this.modalStyles,\n attrs: this.computedModalAttrs,\n on: {\n keydown: this.onEsc,\n click: this.onClickOut\n },\n directives: [{\n name: 'show',\n value: this.isVisible\n }],\n ref: 'modal'\n }, [$modalDialog]); // Wrap modal in transition\n // Sadly, we can't use `BVTransition` here due to the differences in\n // transition durations for `.modal` and `.modal-dialog`\n // At least until https://github.com/vuejs/vue/issues/9986 is resolved\n\n $modal = h('transition', {\n props: {\n enterClass: '',\n enterToClass: '',\n enterActiveClass: '',\n leaveClass: '',\n leaveActiveClass: '',\n leaveToClass: ''\n },\n on: {\n beforeEnter: this.onBeforeEnter,\n enter: this.onEnter,\n afterEnter: this.onAfterEnter,\n beforeLeave: this.onBeforeLeave,\n leave: this.onLeave,\n afterLeave: this.onAfterLeave\n }\n }, [$modal]); // Modal backdrop\n\n var $backdrop = h();\n\n if (!this.hideBackdrop && this.isVisible) {\n $backdrop = h('div', {\n staticClass: 'modal-backdrop',\n attrs: {\n id: this.modalBackdropId\n }\n }, // TODO: Rename slot to `backdrop` and deprecate `modal-backdrop`\n this.normalizeSlot(SLOT_NAME_MODAL_BACKDROP));\n }\n\n $backdrop = h(BVTransition, {\n props: {\n noFade: this.noFade\n }\n }, [$backdrop]); // Assemble modal and backdrop in an outer