{"version":3,"sources":["webpack:///./src/project/app/blocks/SimpleUniqueSellingPointsBlock.vue?f187","webpack:///./src/project/app/blocks/SimpleUniqueSellingPointsBlock.vue","webpack:///./src/project/app/blocks/SimpleUniqueSellingPointsBlock.vue?4a73","webpack:///./src/project/app/blocks/SimpleUniqueSellingPointsBlock.vue?24a3","webpack:///./src/project/app/blocks/HeroBannerUniqueSellingPointsBlock.vue?b341","webpack:///./src/project/app/blocks/HeroBannerUniqueSellingPointsBlock.vue","webpack:///./src/project/app/blocks/HeroBannerUniqueSellingPointsBlock.vue?5ecf","webpack:///./src/project/app/blocks/HeroBannerUniqueSellingPointsBlock.vue?76d0"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","isFirstBlock","appendToPreviousBlock","content","showBlockOnMobile","style","_l","usp","uspIndex","key","uniqueSellingPointsMobileClasses","uspItems","length","icon","isIconExtensionSvg","svgIconStyle","attrs","text","_e","_v","_s","staticRenderFns","uniqueSellingPointItems","i","push","sort","Math","random","uniqueSellingPointsColor","color","uniqueSellingPointsBackgroundColor","backgroundColor","extension","toLowerCase","url","mask","maskSize","hexColor","EETBlack","theme","colors","black","hexToRgbWithDefault","hex","alpha","isBreakpointActive","required","type","Object","Boolean","component","contentClasses","header","domProps","subheader","callToAction","name","target","ref","backgroundImage","focalPoint","width","height","showUspItemsOnMobile","simpleUniqueSellingPointsBlockContent","video","loadingVideo","isBackgroundVideo","textColor","vimeoVideoId","mobileVimeoVideoId","isMobile","options","id","ensureId","autoplay","loop","muted","controls","title","byline","portrait","responsive","autopause","$refs","videoMount","idOrUrl","idParts","split","parseInt","shimColor","isColorDefined","colorStyle","headerColor","callToActionColor","components","SimpleUniqueSellingPointsBlock","SmartHeadline"],"mappings":"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","file":"js/chunk-87c82898.73afce4f.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"relative flex flex-col\",class:{'o-container--bleed' : _vm.isFirstBlock, '-is-appended-to-prev-block': _vm.appendToPreviousBlock }},[_c('div',{staticClass:\"px-5 lg:px-25 text-10 lg:text-14 order-1 md:order-2\",class:{'hidden md:flex': !_vm.content.showBlockOnMobile, 'flex': _vm.content.showBlockOnMobile},style:(_vm.uspStyle)},_vm._l((_vm.uspItems),function(usp,uspIndex){return _c('div',{key:uspIndex,staticClass:\"py-20 px-5 flex-grow max-w-1/2\",class:[\n _vm.uniqueSellingPointsMobileClasses[uspIndex],\n uspIndex === (_vm.uspItems.length -1) ? '' : 'xl:pr-20',\n {\n 'md:max-w-1/3': _vm.uspItems.length % 3 === 0 || _vm.uspItems.length === 5,\n 'md:max-w-1/4': _vm.uspItems.length % 4 === 0 || _vm.uspItems.length === 7\n }\n ]},[(usp.content.icon && _vm.isIconExtensionSvg(usp.content.icon))?_c('div',{staticClass:\"w-25 md:w-32 h-32 md:h-36 min-w-30 mr-3 md:mr-20 mb-auto mt-5\",style:(_vm.svgIconStyle(usp.content.icon))}):(usp.content.icon)?_c('ResponsiveIconWrap',{staticClass:\"w-25 md:w-32 min-w-30 mr-3 md:mr-20 mb-auto mt-5\",attrs:{\"image\":usp.content.icon,\"alt-text\":usp.content.text}}):_vm._e(),_c('div',{staticClass:\"flex-grow-0\"},[_vm._v(\" \"+_vm._s(usp.content.text)+\" \")])],1)}),0)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\nimport { Vue, Component, Prop } from 'vue-property-decorator';\r\nimport { SimpleUspBlockViewModel, Media } from '@/types/contentServerContract';\r\nimport { hexToRgb, isValidHexColor } from '@/core/color/color.service';\r\nimport tailwind from '@/styling/tailwind.config';\r\nimport breakpointState from '@/core/responsive/breakpoints/breakpointsState.observable';\r\nimport { MAX_SM } from '@/core/config/breakpointConfig';\r\nexport interface SimpleUspBlockItemViewModel {\r\n icon?: Media;\r\n text?: string;\r\n}\r\n@Component\r\nexport default class HeroBannerUniqueSellingPointsBlock extends Vue {\r\n @Prop({\r\n required: true,\r\n type: Object\r\n }) content!: SimpleUspBlockViewModel;\r\n\r\n @Prop({\r\n required: true,\r\n type: Boolean\r\n }) isFirstBlock!: boolean;\r\n\r\n private uniqueSellingPointsMobileClasses: string[] = [];\r\n\r\n private mounted() {\r\n // Randomize what UPS are shown on mobile.\r\n this.uniqueSellingPointsMobileClasses = ['flex', 'flex'];\r\n if (this.content.uniqueSellingPointItems?.length) {\r\n for (let i:number = 2; i < this.content.uniqueSellingPointItems.length; i++) {\r\n this.uniqueSellingPointsMobileClasses.push('hidden md:flex');\r\n }\r\n this.uniqueSellingPointsMobileClasses.sort(() => Math.random() - 0.5);\r\n }\r\n }\r\n\r\n get uspStyle(): Partial | null {\r\n const style: Partial = {};\r\n if (this.uniqueSellingPointsColor) {\r\n style.color = this.uniqueSellingPointsColor;\r\n }\r\n if (this.uniqueSellingPointsBackgroundColor) {\r\n style.backgroundColor = this.uniqueSellingPointsBackgroundColor;\r\n }\r\n return style;\r\n }\r\n\r\n get uniqueSellingPointsBackgroundColor() {\r\n return '#262422'; // Hardcoded for now\r\n }\r\n\r\n get uniqueSellingPointsColor() {\r\n return '#ffffff'; // Hardcoded for now\r\n }\r\n\r\n isIconExtensionSvg(icon:Media): boolean {\r\n return icon?.extension?.toLowerCase() === 'svg';\r\n }\r\n\r\n svgIconStyle(icon: Media): Partial {\r\n if (this.isIconExtensionSvg(icon)) {\r\n // Set background color to text color and set mask to SVG icon, if icon is SVG. That makes it possible to set fill color of umbraco SVGs.\r\n return {\r\n backgroundColor: this.uniqueSellingPointsColor,\r\n // @ts-ignore\r\n '-webkit-mask': `url(\"${icon.url}\") no-repeat center`,\r\n '-webkit-mask-size': '100% auto',\r\n mask: `url(\"${icon.url}\") no-repeat center`,\r\n maskSize: '100% auto'\r\n };\r\n }\r\n return {};\r\n }\r\n\r\n private colorStyle(hexColor: string): string {\r\n const EETBlack = tailwind.theme.colors.black;\r\n return hexColor ? this.hexToRgbWithDefault(hexColor) : EETBlack;\r\n // Reuse from ImageTextVideoBlock.vue, but we might not have contentBackgroundColor in this content.\r\n // return this.contentBackgroundColor === 'white' ? EETBlack : hexColor ? this.hexToRgbWithDefault(hexColor) : EETBlack;\r\n }\r\n\r\n private hexToRgbWithDefault(hex: string, alpha?: number): string {\r\n if (!isValidHexColor(hex)) return tailwind.theme.colors.black;\r\n return hexToRgb(hex, alpha);\r\n }\r\n\r\n isColorDefined(color: string): boolean {\r\n return color?.length === 7 ?? false; // #233445\r\n }\r\n\r\n private get isMobile() {\r\n return breakpointState.isBreakpointActive(MAX_SM);\r\n }\r\n\r\n private get uspItems(): { content: SimpleUspBlockItemViewModel }[] {\r\n return this.content.uniqueSellingPointItems || [];\r\n }\r\n\r\n get appendToPreviousBlock() {\r\n return this.content.appendToPreviousBlock && !this.isFirstBlock;\r\n }\r\n}\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--15-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/ts-loader/index.js??ref--15-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SimpleUniqueSellingPointsBlock.vue?vue&type=script&lang=ts&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--15-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/ts-loader/index.js??ref--15-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SimpleUniqueSellingPointsBlock.vue?vue&type=script&lang=ts&\"","import { render, staticRenderFns } from \"./SimpleUniqueSellingPointsBlock.vue?vue&type=template&id=00d41348&\"\nimport script from \"./SimpleUniqueSellingPointsBlock.vue?vue&type=script&lang=ts&\"\nexport * from \"./SimpleUniqueSellingPointsBlock.vue?vue&type=script&lang=ts&\"\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","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"relative flex flex-col\",class:{'o-container--bleed' : _vm.isFirstBlock}},[_c('div',{staticClass:\"relative z-1 order-2 md:order-1\"},[_c('div',{staticClass:\"z-3 flex items-center\",class:_vm.contentClasses},[_c('div',{staticClass:\"px-10 md:px-50 max-w-850 mb-10 md:mb-50\"},[(_vm.content.header)?_c('SmartHeadline',{staticClass:\"text-25 sm:text-36 md:text-50 mb-10\",style:(_vm.headerStyle),attrs:{\"style-as-h1\":_vm.isFirstBlock,\"level\":_vm.isFirstBlock ? 'h1' : 'h2'}},[_c('span',{staticClass:\"block\"},[_vm._v(\" \"+_vm._s(_vm.content.header)+\" \")])]):_vm._e(),(_vm.content.subheader)?_c('div',{staticClass:\"text-15 leading-large hidden md:block max-w-600\",style:(_vm.subHeaderStyle),domProps:{\"innerHTML\":_vm._s(_vm.content.subheader)}}):_vm._e(),(_vm.content.callToAction && _vm.content.callToAction.name)?_c('CallToAction',{staticClass:\"md:mt-25 px-10 md:px-25\",style:(_vm.callToActionStyle),attrs:{\"text\":_vm.content.callToAction.name,\"href\":_vm.content.callToAction.url,\"target\":_vm.content.callToAction.target}}):_vm._e()],1)]),_c('div',{ref:\"videoMount\",staticClass:\"relative z-0\"}),(_vm.content.backgroundImage && _vm.content.backgroundImage.url)?_c('div',{},[_c('ResponsiveImage',{attrs:{\"image-url\":_vm.content.backgroundImage.url,\"width-on-screen\":100,\"focal-point\":_vm.content.backgroundImage && _vm.content.backgroundImage.focalPoint,\"aspect-ratio\":_vm.content.backgroundImage && (_vm.content.backgroundImage.width / _vm.content.backgroundImage.height)}})],1):_vm._e(),(_vm.shimStyle)?_c('div',{staticClass:\"inset-0 absolute z-2 pointer-events-none\",style:(_vm.shimStyle)}):_vm._e()]),(_vm.content.subheader)?_c('div',{staticClass:\"text-15 text-center leading-double md:hidden order-3 px-10 my-35 sm:mt-20 mx-auto max-w-350 sm:max-w-420\",domProps:{\"innerHTML\":_vm._s(_vm.content.subheader)}}):_vm._e(),_c('SimpleUniqueSellingPointsBlock',{staticClass:\"order-1 md:order-2\",class:{'hidden md:flex': !_vm.content.showUspItemsOnMobile, 'flex': _vm.content.showUspItemsOnMobile},attrs:{\"content\":_vm.simpleUniqueSellingPointsBlockContent,\"is-first-block\":true}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\nimport { Vue, Component, Prop } from 'vue-property-decorator';\r\nimport {\r\n HeroBannerUspItemViewModel,\r\n HeroBannerWithUspBlockViewModel,\r\n SimpleUspBlockViewModel\r\n} from '@/types/contentServerContract';\r\nimport SmartHeadline from '@/core/ui-components/SmartHeadline.vue';\r\nimport { hexToRgb, isValidHexColor } from '@/core/color/color.service';\r\nimport VimeoPlayer from '@vimeo/player';\r\nimport tailwind from '@/styling/tailwind.config';\r\nimport breakpointState from '@/core/responsive/breakpoints/breakpointsState.observable';\r\nimport { MAX_SM } from '@/core/config/breakpointConfig';\r\nimport SimpleUniqueSellingPointsBlock from '@/project/app/blocks/SimpleUniqueSellingPointsBlock.vue';\r\n\r\n@Component({\r\n components: { SimpleUniqueSellingPointsBlock, SmartHeadline }\r\n})\r\nexport default class HeroBannerUniqueSellingPointsBlock extends Vue {\r\n @Prop({\r\n required: true,\r\n type: Object\r\n }) content!: HeroBannerWithUspBlockViewModel;\r\n\r\n @Prop({\r\n required: true,\r\n type: Boolean\r\n }) isFirstBlock!: boolean;\r\n\r\n private video: VimeoPlayer | null = null;\r\n private loadingVideo: boolean = true;\r\n private isBackgroundVideo: boolean = true;\r\n $refs!: {\r\n videoMount?: HTMLElement\r\n }\r\n\r\n get simpleUniqueSellingPointsBlockContent():SimpleUspBlockViewModel {\r\n return {\r\n appendToPreviousBlock: true,\r\n showBlockOnMobile: this.content.showUspItemsOnMobile,\r\n backgroundColor: this.uniqueSellingPointsBackgroundColor,\r\n textColor: this.uniqueSellingPointsColor,\r\n uniqueSellingPointItems: [...this.content.uspItems]\r\n };\r\n }\r\n\r\n private mounted() {\r\n if (this.content?.vimeoVideoId || this.content.mobileVimeoVideoId) {\r\n // Init desktop or mobile video, video won't change / re-init if resized across md breakpoint. Fallback to one of them.\r\n let vimeoVideoId: string = this.isMobile ? this.content.mobileVimeoVideoId : this.content.vimeoVideoId;\r\n if (!vimeoVideoId) {\r\n vimeoVideoId = this.content.vimeoVideoId || this.content.mobileVimeoVideoId;\r\n }\r\n\r\n this.loadingVideo = true;\r\n this.video = null;\r\n const options = {\r\n id: ensureId(vimeoVideoId),\r\n autoplay: this.isBackgroundVideo,\r\n loop: this.isBackgroundVideo,\r\n muted: this.isBackgroundVideo,\r\n controls: false,\r\n title: false,\r\n byline: false,\r\n portrait: false,\r\n responsive: true,\r\n autopause: !this.isBackgroundVideo // Ensure that all videos on a page will autoplay\r\n };\r\n // eslint-disable-next-line no-new\r\n this.video = new VimeoPlayer(this.$refs.videoMount as HTMLElement, options) as VimeoPlayer;\r\n }\r\n\r\n function ensureId(idOrUrl: string): number {\r\n const idParts = idOrUrl.split(/(\\\\|\\/)/);\r\n let id = idOrUrl;\r\n if (idParts.length > 1) {\r\n id = idParts[idParts.length - 1];\r\n }\r\n return parseInt(id, 10);\r\n }\r\n }\r\n\r\n get uspStyle(): Partial | null {\r\n const style: Partial = {};\r\n if (this.uniqueSellingPointsColor) {\r\n style.color = this.uniqueSellingPointsColor;\r\n }\r\n if (this.uniqueSellingPointsBackgroundColor) {\r\n style.backgroundColor = this.uniqueSellingPointsBackgroundColor;\r\n }\r\n return style;\r\n }\r\n\r\n get uniqueSellingPointsBackgroundColor() {\r\n return '#262422'; // Hardcoded for now\r\n }\r\n\r\n get uniqueSellingPointsColor() {\r\n return '#ffffff'; // Hardcoded for now\r\n }\r\n\r\n get shimStyle(): Partial | null {\r\n if (this.content.shimColor && this.isColorDefined(this.content.shimColor)) {\r\n return {\r\n backgroundColor: this.hexToRgbWithDefault(this.content?.shimColor, 0.3)\r\n // opacity: '0.3',\r\n };\r\n }\r\n return null;\r\n }\r\n\r\n get contentClasses(): string {\r\n return (this.content.vimeoVideoId || this.content.mobileVimeoVideoId) || (this.content.backgroundImage && this.content.backgroundImage.url) ? 'absolute inset-0' : 'relative py-60';\r\n }\r\n\r\n private colorStyle(hexColor: string): string {\r\n const EETBlack = tailwind.theme.colors.black;\r\n return hexColor ? this.hexToRgbWithDefault(hexColor) : EETBlack;\r\n // Reuse from ImageTextVideoBlock.vue, but we might not have contentBackgroundColor in this content.\r\n // return this.contentBackgroundColor === 'white' ? EETBlack : hexColor ? this.hexToRgbWithDefault(hexColor) : EETBlack;\r\n }\r\n\r\n private hexToRgbWithDefault(hex: string, alpha?: number): string {\r\n if (!isValidHexColor(hex)) return tailwind.theme.colors.black;\r\n return hexToRgb(hex, alpha);\r\n }\r\n\r\n isColorDefined(color: string): boolean {\r\n return color?.length === 7 ?? false; // #233445\r\n }\r\n\r\n get headerStyle(): Partial {\r\n return { color: this.colorStyle(this.content.headerColor) };\r\n }\r\n\r\n get subHeaderStyle(): Partial {\r\n return { color: this.colorStyle(this.content.headerColor) };\r\n }\r\n\r\n get callToActionStyle(): Partial {\r\n return { backgroundColor: this.colorStyle(this.content.callToActionColor) };\r\n }\r\n\r\n private get isMobile() {\r\n return breakpointState.isBreakpointActive(MAX_SM);\r\n }\r\n\r\n private get uspItems(): { content: HeroBannerUspItemViewModel }[] {\r\n return this.content.uspItems || [];\r\n }\r\n}\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--15-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/ts-loader/index.js??ref--15-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeroBannerUniqueSellingPointsBlock.vue?vue&type=script&lang=ts&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--15-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/ts-loader/index.js??ref--15-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HeroBannerUniqueSellingPointsBlock.vue?vue&type=script&lang=ts&\"","import { render, staticRenderFns } from \"./HeroBannerUniqueSellingPointsBlock.vue?vue&type=template&id=f604b43c&\"\nimport script from \"./HeroBannerUniqueSellingPointsBlock.vue?vue&type=script&lang=ts&\"\nexport * from \"./HeroBannerUniqueSellingPointsBlock.vue?vue&type=script&lang=ts&\"\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":""}