{"version":3,"sources":["webpack:///./src/Foundation/Core/code/Scripts/Modal/index.js","webpack:///./src/Foundation/Core/code/Scripts/Modal/code/Scripts/components/modal.vue?2c4c","webpack:///src/Foundation/Core/code/Scripts/Modal/code/Scripts/components/modal.vue","webpack:///./src/Foundation/Core/code/Scripts/Modal/code/Scripts/components/modal.vue?258b","webpack:///./src/Foundation/Core/code/Scripts/Modal/code/Scripts/components/modal.vue"],"names":["VueModule","components","Modal","render","_vm","this","_h","$createElement","_c","_self","staticClass","on","$event","type","indexOf","_k","keyCode","key","closeModal","ref","preventDefault","openModal","_t","showModal","directives","name","rawName","value","expression","class","animateModal","attrs","ariaLabelledby","modelType","category","action","label","_v","_s","closeAriaLabel","staticRenderFns","component"],"mappings":"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","file":"modal.js","sourcesContent":["import { VueModule } from '@Foundation/utilities';\r\nimport Modal from './code/Scripts/components/modal';\r\n\r\nexport default VueModule({\r\n  components: {\r\n    Modal\r\n  }\r\n});\r\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"modal\",on:{\"keyup\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"esc\",27,$event.key,[\"Esc\",\"Escape\"])){ return null; }return _vm.closeModal($event)}}},[_c('div',{ref:\"openModal\",staticClass:\"modal__open-btn\",on:{\"click\":function($event){$event.preventDefault();return _vm.openModal($event)}}},[_vm._t(\"button\",null,{\"ally\":_vm.showModal})],2),_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.showModal),expression:\"showModal\"}],staticClass:\"modal__backface\",on:{\"click\":_vm.closeModal}}),_c('dialog',{ref:\"wrapper\",staticClass:\"modal__wrapper\",class:_vm.animateModal ? '--opened' : '',attrs:{\"role\":\"dialog\",\"aria-modal\":\"true\",\"open\":_vm.showModal,\"aria-labelledby\":_vm.ariaLabelledby}},[(_vm.modelType === 'accessbility')?_c('button',{ref:\"closeButton\",staticClass:\"modal__close-btn btn-close\",attrs:{\"type\":\"button\",\"v-tag:useractionevent\":{\n        category: 'content',\n        action: 'select::accessibility layer',\n        label: 'close',\n      }},on:{\"click\":_vm.closeModal}},[_c('span',[_vm._v(_vm._s(_vm.closeAriaLabel))]),_c('span',{staticClass:\"btn--close\"})]):_c('button',{staticClass:\"modal__close-btn btn-close\",attrs:{\"type\":\"button\",\"id\":\"countryCloseBtn\",\"v-tag:useractionevent\":{\n        category: 'content',\n        action: 'select::accessibility layer',\n        label: 'close',\n      }},on:{\"click\":_vm.closeModal}},[_c('span',[_vm._v(_vm._s(_vm.closeAriaLabel))]),_c('span',{staticClass:\"btn--close\"})]),_c('div',{staticClass:\"modal__content\"},[_vm._t(\"default\",null,{\"showModal\":_vm.showModal})],2)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"modal\" @keyup.esc=\"closeModal\">\r\n    <div class=\"modal__open-btn\" @click.prevent=\"openModal\" ref=\"openModal\">\r\n      <slot name=\"button\" :ally=\"showModal\" />\r\n    </div>\r\n    <div class=\"modal__backface\" v-show=\"showModal\" @click=\"closeModal\" />\r\n    <dialog\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      :open=\"showModal\"\r\n      :aria-labelledby=\"ariaLabelledby\"\r\n      class=\"modal__wrapper\"\r\n      :class=\"animateModal ? '--opened' : ''\"\r\n      ref=\"wrapper\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"modal__close-btn btn-close\"\r\n        @click=\"closeModal\"\r\n        ref=\"closeButton\"\r\n        v-if=\"modelType === 'accessbility'\"\r\n        :v-tag:useractionevent=\"{\r\n          category: 'content',\r\n          action: 'select::accessibility layer',\r\n          label: 'close',\r\n        }\"\r\n      >\r\n        <span>{{ closeAriaLabel }}</span>\r\n        <span class=\"btn--close\" />\r\n      </button>\r\n      <button\r\n        v-else\r\n        type=\"button\"\r\n        class=\"modal__close-btn btn-close\"\r\n        @click=\"closeModal\"\r\n        id=\"countryCloseBtn\"\r\n        :v-tag:useractionevent=\"{\r\n          category: 'content',\r\n          action: 'select::accessibility layer',\r\n          label: 'close',\r\n        }\"\r\n      >\r\n        <span>{{ closeAriaLabel }}</span>\r\n        <span class=\"btn--close\" />\r\n      </button>\r\n      <div class=\"modal__content\">\r\n        <slot :showModal=\"showModal\" />\r\n      </div>\r\n    </dialog>\r\n  </div>\r\n</template>\r\n<script>\r\n  import { tag } from '@Foundation/analyticsHandler/directives/tag.js';\r\n  import { removePageScroll } from '@Foundation/mixins/removePageScroll';\r\n  import { AnalyticsHandler } from '@Foundation/analyticsHandler';\r\n  export default {\r\n    name: 'modal',\r\n    directives: {\r\n      tag,\r\n    },\r\n    mixins: [removePageScroll],\r\n    props: {\r\n      closeAriaLabel: {\r\n        type: String,\r\n        required: false,\r\n        default: undefined,\r\n      },\r\n      ariaLabelledby: {\r\n        type: String,\r\n        required: false,\r\n        default: undefined,\r\n      },\r\n      ariaDescribedby: {\r\n        type: String,\r\n        required: false,\r\n        default: undefined,\r\n      },\r\n      analytics: {\r\n        type: String,\r\n        required: false,\r\n        default: undefined,\r\n      },\r\n    },\r\n    data() {\r\n      return {\r\n        showModal: false,\r\n        animateModal: false,\r\n        focusableElms: null,\r\n        modelType: 'accessbility',\r\n      };\r\n    },\r\n    mounted() {\r\n      this.$el.style.display = '';\r\n    },\r\n    methods: {\r\n      isUsingKeyboard() {\r\n        return document.body.classList.contains('is-using-keyboard');\r\n      },\r\n      closeEvent() {\r\n        this.$root.$emit('modal::close');\r\n        AnalyticsHandler.pushDataLayer({\r\n          event: 'uaevent',\r\n          eventCategory: 'content',\r\n          eventAction: this.analytics,\r\n          eventLabel: 'close',\r\n        });\r\n      },\r\n      openModal() {\r\n        this.showModal = true;\r\n        this.removePageScroll(true);\r\n        const countryModal =\r\n          this.$refs.openModal.getElementsByClassName('icon-world').length;\r\n        if (countryModal === 0) {\r\n          this.modelType = 'accessbility';\r\n          window._uxa = window._uxa || [];\r\n          window._uxa.push([\r\n            'trackPageview',\r\n            window.location.pathname +\r\n              window.location.hash.replace('#', '?__') +\r\n              '?cs-popin-accessbility',\r\n          ]);\r\n        } else {\r\n          this.modelType = 'country';\r\n          window._uxa = window._uxa || [];\r\n          window._uxa.push([\r\n            'trackPageview',\r\n            window.location.pathname +\r\n              window.location.hash.replace('#', '?__') +\r\n              '?cs-popin-country-selector',\r\n          ]);\r\n        }\r\n        setTimeout(() => {\r\n          this.animateModal = true;\r\n          this.setFocus();\r\n        }, 500);\r\n      },\r\n      closeModal() {\r\n        this.showModal = false;\r\n        this.animateModal = false;\r\n        this.removePageScroll(false);\r\n        window._uxa = window._uxa || [];\r\n        window._uxa.push([\r\n          'trackPageview',\r\n          window.location.pathname + window.location.hash.replace('#', '?__'),\r\n        ]);\r\n        this.closeEvent();\r\n      },\r\n      setFocus() {\r\n        const modal = document.querySelector('.modal__wrapper'); // select the modal by it's id\r\n        if (this.modelType === 'accessbility') {\r\n          const focusableElements = ['button, input'];\r\n          const firstFocusableElement =\r\n            modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal\r\n          document.querySelector('.modal__wrapper .btn-close').focus();\r\n          document.addEventListener('keydown', function (e) {\r\n            const lastFocusableElements = document.getElementsByName(\r\n              'contrast'\r\n            )[0].checked\r\n              ? document.getElementsByName('contrast')[0]\r\n              : document.getElementsByName('contrast')[1];\r\n            const isTabPressed = e.key === 'Tab' || e.keyCode === 9;\r\n            if (!isTabPressed) {\r\n              return;\r\n            }\r\n            if (e.shiftKey) {\r\n              // if shift key pressed for shift + tab combination\r\n              if (document.activeElement === firstFocusableElement) {\r\n                lastFocusableElements.focus();\r\n                e.preventDefault();\r\n              }\r\n            } else {\r\n              // if tab key is pressed\r\n              if (document.activeElement === lastFocusableElements) {\r\n                // if focused has reached to last focusable element then focus first focusable element after pressing tab\r\n                firstFocusableElement.focus();\r\n                e.preventDefault();\r\n              }\r\n            }\r\n          });\r\n        } else {\r\n          const firstFocusableElement = document.getElementById('countryCloseBtn'); // get first element to be focused inside modal\r\n          const lastFocusableElement = document.getElementsByClassName('selectCountry').length - 1;\r\n          const lastFocus = document.getElementsByClassName('country-name');\r\n          let lastElement = lastFocus[lastFocus.length - 1];\r\n          document.getElementById('countryCloseBtn').focus();\r\n          document.addEventListener('click', () => {\r\n            if (document.activeElement.classList.contains('selectCountry')) {\r\n              if (document.activeElement === lastElement) {\r\n                lastElement = lastFocus[lastFocus.length - 1];\r\n              } else {\r\n                lastElement = document.getElementsByClassName('selectCountry')[lastFocusableElement];\r\n              }\r\n              if (document.activeElement === document.getElementsByClassName('selectCountry')[lastFocusableElement]) {\r\n                lastElement = lastFocus[lastFocus.length - 1];\r\n              }\r\n            }\r\n          });\r\n          document.addEventListener('keydown', (e) => {\r\n            const isTabPressed = e.key === 'Tab' || e.keyCode === 9;\r\n            if (!isTabPressed) {\r\n              return;\r\n            }\r\n            if (e.shiftKey) {\r\n              // if shift key pressed for shift + tab combination\r\n              if (document.activeElement === firstFocusableElement) {\r\n                lastElement.focus(); // add focus for the last focusable element\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n              }\r\n            } else {\r\n              if (document.activeElement === lastElement) {\r\n                firstFocusableElement.focus();\r\n                e.preventDefault();\r\n                e.stopPropagation();\r\n              }\r\n            }\r\n          });\r\n        }\r\n      },\r\n      focusLoop() {\r\n        this.focusableElms = [\r\n          ...this.$el.querySelectorAll('a, button, input'),\r\n        ].slice(1);\r\n        this.focusableElms.forEach((element) => {\r\n          element.setAttribute('focusable', 'isFocusable');\r\n          element.addEventListener('blur', () => {\r\n            setTimeout(() => {\r\n              const activeElementClass =\r\n                document.activeElement.getAttribute('focusable');\r\n              /* istanbul ignore else */\r\n              if (\r\n                !window.matchMedia('(min-width: 1024px)').matches &&\r\n                activeElementClass !== 'isFocusable' &&\r\n                this.isUsingKeyboard()\r\n              ) {\r\n                this.focusableElms[1].focus();\r\n              } else if (activeElementClass !== 'isFocusable') {\r\n                this.focusableElms[0].focus();\r\n              }\r\n            }, 30);\r\n          });\r\n        });\r\n      },\r\n    },\r\n  };\r\n</script>\r\n","import mod from \"-!../../../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./modal.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./modal.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./modal.vue?vue&type=template&id=7aa4abdf&\"\nimport script from \"./modal.vue?vue&type=script&lang=js&\"\nexport * from \"./modal.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}