{"version":3,"sources":["webpack:///./src/Feature/Video/code/Scripts/VideoLayer/video-layer.vue?9968","webpack:///src/Feature/Video/code/Scripts/VideoLayer/video-layer.vue","webpack:///./src/Feature/Video/code/Scripts/VideoLayer/video-layer.vue?839e","webpack:///./src/Feature/Video/code/Scripts/VideoLayer/video-layer.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","on","$event","type","indexOf","_k","keyCode","key","toggleLayer","directives","name","rawName","value","expression","attrs","ref","_t","_e","ajaxCallDone","openLayer","videoID","flowid","domProps","_s","title","copy","transcript","richTextDetails","RichText","RichTextOnlyOneColumn","RichTitle","staticRenderFns","component"],"mappings":"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","file":"chunk-2d0b59e4.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"video-layer\",on:{\"keyup\":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,\"esc\",27,$event.key,[\"Esc\",\"Escape\"])){ return null; }return _vm.toggleLayer(false)}}},[_c('div',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.openLayer),expression:\"openLayer\"}],staticClass:\"video-layer__modal video\",attrs:{\"role\":\"dialog\",\"aria-modal\":\"true\"}},[_c('button',{ref:\"closeBtn\",staticClass:\"btn-close\",attrs:{\"type\":\"button\"},on:{\"click\":function($event){return _vm.toggleLayer(false)}}},[_vm._t(\"closebtn\"),_c('span',{staticClass:\"btn--close\"})],2),(_vm.isLoading)?_c('loader'):_vm._e(),(_vm.ajaxCallDone && _vm.openLayer)?_c('video-main',{attrs:{\"video\":_vm.videoID,\"flowid\":_vm.flowid}}):_vm._e(),_c('div',{staticClass:\"video__content container--medium\"},[_c('div',{staticClass:\"container--small\"},[_c('div',{staticClass:\"video__title\",domProps:{\"innerHTML\":_vm._s(_vm.title)}}),_c('div',{staticClass:\"video__text\",domProps:{\"innerHTML\":_vm._s(_vm.copy)}}),_c('div',{staticClass:\"video__transcript\",domProps:{\"innerHTML\":_vm._s(_vm.transcript)}})]),_c('div',{staticClass:\"container--large\"},[_c('div',{staticClass:\"container--small\"},[_c('div',{staticClass:\"copy-block container--small content fadein--bottom\"},[(_vm.richTextDetails.RichTextOnlyOneColumn)?_c('div',{staticClass:\"\\n                copy-block__title copy-block--fullwidth copy-block--imgdisplay\\n              \",domProps:{\"innerHTML\":_vm._s(_vm.richTextDetails.RichText)}}):_vm._e(),(!_vm.richTextDetails.RichTextOnlyOneColumn)?_c('div',{staticClass:\"copy-block__title copy-block--imgdisplay\",domProps:{\"innerHTML\":_vm._s(_vm.richTextDetails.RichTitle)}}):_vm._e(),(!_vm.richTextDetails.RichTextOnlyOneColumn)?_c('div',{staticClass:\"copy-block__text copy-block--imgdisplay\",domProps:{\"innerHTML\":_vm._s(_vm.richTextDetails.RichText)}}):_vm._e()])])])])],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div\r\n    class=\"video-layer\"\r\n    @keyup.esc=\"toggleLayer(false)\"\r\n  >\r\n    <div\r\n      class=\"video-layer__modal video\"\r\n      role=\"dialog\"\r\n      aria-modal=\"true\"\r\n      v-show=\"openLayer\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn-close\"\r\n        @click=\"toggleLayer(false)\"\r\n        ref=\"closeBtn\"\r\n      >\r\n        <slot name=\"closebtn\" />\r\n        <span class=\"btn--close\" />\r\n      </button>\r\n      <loader v-if=\"isLoading\" />\r\n      <video-main\r\n        v-if=\"ajaxCallDone && openLayer\"\r\n        :video=\"videoID\"\r\n        :flowid=\"flowid\"\r\n      />\r\n      <div class=\"video__content container--medium\">\r\n        <div class=\"container--small\">\r\n          <div class=\"video__title\" v-html=\"title\" />\r\n          <div class=\"video__text\" v-html=\"copy\" />\r\n          <div class=\"video__transcript\" v-html=\"transcript\" />\r\n        </div>\r\n        <div class=\"container--large\">\r\n          <div class=\"container--small\">\r\n            <div class=\"copy-block container--small content fadein--bottom\">\r\n              <div\r\n                class=\"\r\n                  copy-block__title copy-block--fullwidth copy-block--imgdisplay\r\n                \"\r\n                v-if=\"richTextDetails.RichTextOnlyOneColumn\"\r\n                v-html=\"richTextDetails.RichText\"\r\n              />\r\n              <div\r\n                class=\"copy-block__title copy-block--imgdisplay\"\r\n                v-if=\"!richTextDetails.RichTextOnlyOneColumn\"\r\n                v-html=\"richTextDetails.RichTitle\"\r\n              />\r\n              <div\r\n                class=\"copy-block__text copy-block--imgdisplay\"\r\n                v-if=\"!richTextDetails.RichTextOnlyOneColumn\"\r\n                v-html=\"richTextDetails.RichText\"\r\n              />\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n<script>\r\n  import loadscript from '@Foundation/loadscript/loadscript';\r\n  import videoMain from '../VideoMain/video-main';\r\n  import { fetchData } from '@Foundation/services';\r\n  import { removePageScroll } from '@Foundation/mixins/removePageScroll';\r\n  export default {\r\n    name: 'video-layer',\r\n    components: {\r\n      loadscript,\r\n      videoMain,\r\n      loader: () => import('@Feature/Loader/code/Script/Loader'),\r\n    },\r\n    mixins: [removePageScroll],\r\n    props: {\r\n      url: {\r\n        type: String,\r\n        default: null,\r\n      },\r\n      flowid: {\r\n        type: String,\r\n        default: null,\r\n      },\r\n    },\r\n    data() {\r\n      return {\r\n        openLayer: false,\r\n        videoID: null,\r\n        transcript: null,\r\n        copy: null,\r\n        ajaxCallDone: false,\r\n        pageUrl: null,\r\n        focusElement: null,\r\n        title: null,\r\n        isLoading: false,\r\n        richTextDetails: '',\r\n      };\r\n    },\r\n    methods: {\r\n      toggleLayer(value) {\r\n        this.openLayer = value;\r\n\r\n        const focusableElementsArray = ['button', 'div.fp-middle', '[href]'];\r\n\r\n        const modals = document.querySelectorAll('.video-layer'); // select the modal by it's id\r\n        modals.forEach(modal =>{\r\n          let focusableContent;\r\n          let lastFocusableElement;\r\n          let firstFocusableElement;\r\n          document.addEventListener('keydown', function (e) {\r\n            firstFocusableElement = modal.querySelectorAll(\r\n              focusableElementsArray\r\n            )[0]; // get first element to be focused inside modal\r\n            focusableContent = modal.querySelectorAll(focusableElementsArray);\r\n            lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal\r\n            lastFocusableElement.tabIndex = 0;\r\n            const isTabPressed = e.key === 'Tab' || e.keyCode === 9;\r\n            if (!isTabPressed) {\r\n              return;\r\n            }\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                lastFocusableElement.focus(); // add focus for the last focusable element\r\n                e.preventDefault();\r\n              }\r\n            } else {\r\n              // if tab key is pressed\r\n              if (document.activeElement === lastFocusableElement) {\r\n                // if focused has reached to last focusable element then focus first focusable element after pressing tab\r\n                firstFocusableElement.focus(); // add focus for the first focusable element\r\n                e.preventDefault();\r\n              }\r\n            }\r\n          });\r\n        });\r\n\r\n\r\n        this.removePageScroll(value);\r\n        if (value === false) {\r\n          window.history.pushState(null, null, decodeURIComponent(this.pageUrl));\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          setTimeout(() => {\r\n            this.focusElement.focus();\r\n          }, 500);\r\n        } else {\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-brands-video',\r\n          ]);\r\n          setTimeout(() => {\r\n            this.$refs.closeBtn.focus();\r\n          }, 500);\r\n        }\r\n      },\r\n      videoCall(focusElement) {\r\n        this.pageUrl = window.location.href;\r\n        this.isLoading = true;\r\n        this.focusElement = focusElement;\r\n        fetchData(this.url).then((video) => {\r\n          this.videoID = video.VideoId;\r\n          this.transcript = video.Transcript;\r\n          this.copy = video.Copy;\r\n          this.title = video.Title;\r\n          this.richTextDetails = video;\r\n          this.ajaxCallDone = true;\r\n          this.toggleLayer(true);\r\n          this.isLoading = false;\r\n          window.history.pushState(null, null, decodeURIComponent(video.PageUrl));\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!./video-layer.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!./video-layer.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./video-layer.vue?vue&type=template&id=2af39034&\"\nimport script from \"./video-layer.vue?vue&type=script&lang=js&\"\nexport * from \"./video-layer.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":""}