{"version":3,"sources":["webpack:///./src/project/app/blocks/SimpleUniqueSellingPointsBlock.vue?fef7","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/core/ui-components/SmartHeadline.vue","webpack:///./src/core/ui-components/SmartHeadline.vue?38f1","webpack:///./src/core/ui-components/SmartHeadline.vue?2c08","webpack:///./src/project/app/blocks/HeroBannerUniqueSellingPointsBlock.vue?463a","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","h","data","$props","h1","styleAsH1","level","$slots","default","String","validator","value","includes","contentClasses","header","domProps","subheader","callToAction","name","target","callToActionColor","ref","backgroundImage","focalPoint","width","height","showUspItemsOnMobile","simpleUniqueSellingPointsBlockContent","video","loadingVideo","isBackgroundVideo","textColor","hasVideo","aspectRatio","vimeoVideoId","mobileVimeoVideoId","isMobile","options","id","ensureId","autoplay","loop","muted","controls","title","byline","portrait","responsive","autopause","$refs","videoMount","on","idOrUrl","idParts","split","parseInt","shimColor","isColorDefined","colorStyle","headerColor","components","SimpleUniqueSellingPointsBlock","SmartHeadline"],"mappings":"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","file":"js/chunk-2dc354e4.c40245ca.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 uniqueSellingPointsMobileClasses: string[] = [];\r\n\r\n 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 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 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 isMobile() {\r\n return breakpointState.isBreakpointActive(MAX_SM);\r\n }\r\n\r\n 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=3af9c1a8&\"\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","\r\nimport Vue, { CreateElement } from 'vue';\r\nimport { Component, Prop } from 'vue-property-decorator';\r\n\r\n@Component\r\nexport default class SmartHeadline extends Vue {\r\n @Prop({\r\n type: Boolean,\r\n default: false\r\n })\r\n styleAsH1!: boolean;\r\n\r\n @Prop({ required: false, type: String, default: 'h2', validator: (value: string) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value) })\r\n level!: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\r\n\r\n render(h: CreateElement) {\r\n const data = {\r\n ...this.$props,\r\n class: {\r\n h1: this.styleAsH1\r\n }\r\n };\r\n return h(this.level, data, this.$slots.default);\r\n }\r\n}\r\n","var render, staticRenderFns\nimport script from \"./SmartHeadline.vue?vue&type=script&lang=ts&\"\nexport * from \"./SmartHeadline.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","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!./SmartHeadline.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!./SmartHeadline.vue?vue&type=script&lang=ts&\"","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\",attrs:{\"text\":_vm.content.callToAction.name,\"href\":_vm.content.callToAction.url,\"target\":_vm.content.callToAction.target,\"hex-color\":_vm.content.callToActionColor}}):_vm._e()],1)]),_c('div',{ref:\"videoMount\",staticClass:\"relative z-0\",style:(_vm.videoMountStyle)}),(_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 video: VimeoPlayer | null = null;\r\n loadingVideo: boolean = true;\r\n 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 get videoMountStyle(): Partial {\r\n // Set initial aspect ratio on div while loading video. 1366/456 is the aspect ratio of mostly used video - currently\r\n // @ts-ignore\r\n return this.hasVideo && this.loadingVideo ? { aspectRatio: 1366 / 456 } : {};\r\n }\r\n\r\n get hasVideo(): boolean {\r\n return !!(this.content?.vimeoVideoId || this.content.mobileVimeoVideoId);\r\n }\r\n\r\n mounted() {\r\n if (this.hasVideo) {\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 = this.hasVideo;\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 this.video.on('loaded', (vimeoVideoId) => {\r\n this.loadingVideo = false;\r\n });\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 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 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 isMobile() {\r\n return breakpointState.isBreakpointActive(MAX_SM);\r\n }\r\n\r\n 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=0267d5dc&\"\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":""}