{"version":3,"file":"Modal.js","names":["Modal","a","setters","Component","default","mix","Event","ajax","on","off","trigger","animate","transition","deepMerge","throttle","Accessibility","LoaderMixin","DataLayer","execute","with","constructor","element","options","arguments","length","document","createElement","header","footer","contentUrl","cssPath","content","closeLabel","title","ariaLabel","closeTimeout","escapeClose","clickOutsideClose","showOverlay","keepOverlayOpened","afterCloseReload","afterCloseRedirectUrl","enableStacking","isStackable","openInPageDesignerEditor","motion","delay","duration","type","text","accessibility","processingStatusMessage","finishedStatusMessage","focusReturnElement","beforeOpen","afterOpen","beforeClose","afterClose","classNames","container","body","wrapper","dialogOpen","dialogClose","classList","contains","_createLayout","openPromise","initState","state","isOpened","isOpening","isClosing","initContent","isOverlayOpened","hasCustomCSS","isCustomCSSLoaded","isCustomCSSLoading","isPreventRedirectAfterClose","isActive","isScrollEventAttached","initCache","classes","openedState","innerContent","modalClickHandler","event","target","hasAttribute","close","closeActionTargetType","add","forEach","className","split","map","item","template","join","innerHTML","querySelector","get","setMotion","setAttribute","_insertInDocument","appendChild","_addContent","setHeader","setTitle","setFooter","configId","url","then","response","Promise","reject","Error","setContent","bind","removeLoader","updateStatusMessage","catch","resolve","open","emit","keepOpened","_appendLayout","_importCSS","sendEvent","addLoader","onContentUpdated","window","setTimeout","updateComponents","onModalScroll","scrollThrottle","func","passive","id","onKeyboardControl","initModalPattern","triggerAfterOpenAnalyticsEvents","closeAll","remove","destroyModalPattern","_doClose","isUnblockScrollForAll","isInstantScroll","location","reload","assign","Array","from","children","removeAttribute","appendedScripts","querySelectorAll","script","srcScript","async","defer","head","push","_bindModalEvents","setAccessibility","preventClick","SystemJS","import","console","error","onOverlayCloseBefore","keepOpen","onSlidingPanelOpen","onSlidingPanelClose","_removeModalEvents","removeListener","key","onTabKey","eventType","analytics","virtualPageURL","virtualPageTitle","afterModalOpen","offsetHeight","scrollHeight","componentsToUpdate","component","focusTrap","destroy","removeChild"],"sources":["components/global/Modal.js"],"sourcesContent":["/* eslint max-lines: off */\nimport Component from 'core/Component';\nimport { mix } from 'core/mixwith';\nimport { Event } from 'services/EventEmitter';\nimport { ajax } from 'toolbox/ajax';\nimport { on, off, trigger } from 'toolbox/event';\nimport { animate, transition } from 'toolbox/animate';\nimport { deepMerge } from 'toolbox/deepMerge';\nimport { throttle } from 'toolbox/throttle';\nimport Accessibility from 'mixins/Accessibility';\nimport LoaderMixin from 'mixins/Loader';\nimport DataLayer from 'services/DataLayer';\n\n/**\n * This is a description of the Modal constructor function.\n * @class\n * @classdesc This is a description of the Modal class.\n * @extends Component\n */\nexport default class Modal extends mix(Component).with(Accessibility, LoaderMixin) {\n /**\n * Constructor of the class that mainly merge the options of the components\n * @param {HTMLElement} element HTMLElement of the component\n * @param {Object} options options that belongs to the component\n */\n constructor(element, options = {}) {\n element = element || document.createElement('div');\n super(element, deepMerge({\n header: null, // HTML content for header\n footer: null, // HTML content for footer\n contentUrl: null,\n cssPath: null, // CSS path that needs to be loaded with the modal\n content: null, // If contentURL is used, this property will not be used\n closeLabel: 'Close',\n title: null,\n ariaLabel: '', // If defined, this copy will be used as the aria-label of a Modal to pronounce the modal title by screen reader. If empty, the text with the id=\"modal-title\" will be pronounced\n closeTimeout: 0, // Time to wait (ms) before afterClose() is called\n escapeClose: true, // Set this to 'false' to disable closing when escape key pressed\n clickOutsideClose: true, // Click on the overlay will close the modal\n showOverlay: true, // Display the overlay behind the modal or not\n // If set, do not remove overlay after the modal is closed (e.g. if modal called from element with another overlay)\n keepOverlayOpened: false,\n afterCloseReload: false, // If set, reload current page after modal is closed\n afterCloseRedirectUrl: null, // If set, redirects to this URL after modal is closed\n enableStacking: false, // Activates the the stacking mode for previous modal that is already opened (old modal).\n isStackable: true, // Allow or deny stacking of current modal if the stacking mode is activated by the next modal\n openInPageDesignerEditor: true, // Specifies if modal can be opened in Page Designer Editor\n motion: {\n delay: null, // values from a list: 50, 200, 500, 1000 (can be changed in sass\\01-utilities\\aos\\_core.scss)\n duration: null, // values from a list: 50, 200, 400, 1000 (can be changed in sass\\01-utilities\\aos\\_core.scss)\n type: 'fade-up', // types of motion (fade-down, fade-right, fade-left, etc.): https://github.com/michalsnik/aos#predefined-options\n },\n text: {\n accessibility: { processingStatusMessage: '', finishedStatusMessage: '' },\n },\n focusReturnElement: null,\n // Callbacks\n\n /**\n * It will execute right before the dialog is shown\n */\n beforeOpen() {\n // Callback method\n },\n\n /**\n * It will execute just after the dialog is shown\n */\n afterOpen() {\n // Callback method\n },\n\n /**\n * It will execute just after the dialog is shown\n */\n beforeClose() {\n // Callback method\n },\n\n /**\n * It will execute just after the dialog is closed\n */\n afterClose() {\n // Callback method\n },\n\n // ClassNames\n classNames: {\n container: [], // Added to the modal element\n title: '', // Added to the modal title element\n body: [], // Added to the modal body element\n wrapper: [], // Added to the modal wrapper element\n dialogOpen: 'h-fade-in', // Added to dialog element classes after it is opened\n dialogClose: 'h-fade-out', // Added to dialog element classes before it is closed\n },\n }, options));\n\n if (!this.element.classList.contains('c-modal')) {\n this._createLayout();\n }\n this.enableStacking = false;\n this.openPromise = null;\n }\n\n /**\n * Init the different state of the component\n * It helps to avoid heavy DOM manipulation\n */\n initState() {\n this.state.isOpened = false;\n this.state.isOpening = false;\n this.state.isClosing = false;\n this.state.initContent = false;\n this.state.isOverlayOpened = false;\n this.state.hasCustomCSS = !!this.options.cssPath;\n this.state.isCustomCSSLoaded = false;\n this.state.isCustomCSSLoading = false;\n this.state.isPreventRedirectAfterClose = false;\n this.state.isActive = true;\n this.state.isScrollEventAttached = false;\n }\n\n /**\n * All selectors must be cached. Never cache elements that are out of the component scope\n */\n initCache() {\n this.classes = {\n openedState: 'm-opened',\n motion: 'm-motion',\n };\n this.wrapper = null;\n this.header = null;\n this.content = null;\n this.innerContent = null;\n this.footer = null;\n }\n\n /**\n * modalClickHandler event handler\n *\n * @param {Object} event Event object\n */\n modalClickHandler(event) {\n const { target } = event;\n\n if (target.hasAttribute('data-js-prevent-redirect')) {\n this.state.isPreventRedirectAfterClose = true;\n }\n\n if (target.hasAttribute('data-js-close-modal')) {\n this.close(undefined, { closeActionTargetType: target.type });\n }\n }\n\n /**\n * Create Layout for the modal\n */\n _createLayout() {\n this.element.classList.add('c-modal');\n\n this.options.classNames.container.forEach((className) => {\n className.split(' ').map(item => this.element.classList.add(item));\n });\n\n const template = `\n