{"version":3,"file":"Bzni70Oc.js","sources":["../../../../src/components/components/core/basicImage/image-basic.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"containerRef\"\n    class=\"box-content relative overflow-hidden\"\n    :class=\"props.classes\"\n  >\n    <picture\n      v-if=\"props.imageData\"\n      class=\"relative\"\n      style=\"\n        object-fit: inherit;\n        max-height: inherit;\n        max-width: inherit;\n        height: inherit;\n      \"\n    >\n      <source :srcset=\"imageData.mobile.url\" media=\"(max-width: 768px)\" />\n      <img\n        ref=\"imageRef\"\n        style=\"\n          object-fit: inherit;\n          max-height: inherit;\n          max-width: inherit;\n          height: inherit;\n        \"\n        :style=\"focalPoint\"\n        class=\"w-full h-full\"\n        loading=\"lazy\"\n        :src=\"image.url\"\n        :alt=\"image.altText\"\n        :title=\"image.title\"\n        @load=\"onLoaded($event)\"\n        @error=\"onLoaded($event)\"\n      />\n      <div\n        v-if=\"!state.isLoaded\"\n        :class=\"props.classes\"\n        :style=\"getContainerDimensions\"\n        class=\"absolute top-0 overflow-hidden bg-gray-300 shadow-inner\"\n      >\n        <img\n          v-if=\"state.hasError\"\n          src=\"@/assets/images/errorImage.png\"\n          class=\"object-cover w-full h-full scale-125 shadow-black blur-md\"\n          loading=\"lazy\"\n        />\n      </div>\n    </picture>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { useElementSize } from '@vueuse/core';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport type { BasicImageData } from './type';\n\n// WIP: hybrid image works both with handler and raw data, TODO: remaove image handler\n\nconst isMobile = inject(mq_breakpointIsMobile);\n\nconst props = defineProps({\n  imageData: {\n    type: Object as PropType<BasicImageData>,\n    required: true,\n    default: {} as BasicImageData,\n  },\n  classes: {\n    type: String,\n    required: false,\n    default: '',\n  },\n});\n\nconst state = reactive({\n  isLoaded: false,\n  hasError: false,\n});\n\nconst image = computed(() => {\n  return props.imageData[isMobile.value ? 'mobile' : 'desktop'];\n});\n\nconst focalPoint = computed(() => {\n  const focalPoint = image.value.focalPoint;\n  if (focalPoint && focalPoint.length) {\n    return `object-position: ${focalPoint[0] * 100}% ${focalPoint[1] * 100}%`;\n  }\n  return `object-position: ${50}% ${50}%`;\n});\n\nconst containerRef = ref(null);\nconst imageRef = ref(null);\nconst { width: containerWidth, height: containerHeight } =\n  useElementSize(containerRef);\n\nconst getContainerDimensions = computed<string>(() => {\n  const width = containerWidth.value;\n  const height = containerHeight.value;\n  return `width:${width}px!important; height:${height}px!important;`;\n});\n\nonMounted(() => {\n  if (imageRef.value.complete) {\n    state.isLoaded = true;\n  }\n});\n\nfunction onLoaded(e: any) {\n  if (e.type === 'error') {\n    state.hasError = true;\n  } else if (e.target.complete) {\n    state.isLoaded = true;\n  }\n}\n</script>\n"],"names":["isMobile","inject","mq_breakpointIsMobile","props","__props","state","reactive","image","computed","focalPoint","containerRef","ref","imageRef","containerWidth","containerHeight","useElementSize","getContainerDimensions","width","height","onMounted","onLoaded"],"mappings":"kjBAyDM,MAAAA,EAAWC,EAAOC,CAAqB,EAEvCC,EAAQC,EAaRC,EAAQC,EAAS,CACrB,SAAU,GACV,SAAU,EAAA,CACX,EAEKC,EAAQC,EAAS,IACdL,EAAM,UAAUH,EAAS,MAAQ,SAAW,SAAS,CAC7D,EAEKS,EAAaD,EAAS,IAAM,CAC1BC,MAAAA,EAAaF,EAAM,MAAM,WAC3BE,OAAAA,GAAcA,EAAW,OACpB,oBAAoBA,EAAW,CAAC,EAAI,GAAG,KAAKA,EAAW,CAAC,EAAI,GAAG,IAEjE,0BAA6B,CACrC,EAEKC,EAAeC,EAAI,IAAI,EACvBC,EAAWD,EAAI,IAAI,EACnB,CAAE,MAAOE,EAAgB,OAAQC,GACrCC,EAAeL,CAAY,EAEvBM,EAAyBR,EAAiB,IAAM,CACpD,MAAMS,EAAQJ,EAAe,MACvBK,EAASJ,EAAgB,MACxB,MAAA,SAASG,CAAK,wBAAwBC,CAAM,eAAA,CACpD,EAEDC,EAAU,IAAM,CACVP,EAAS,MAAM,WACjBP,EAAM,SAAW,GACnB,CACD,EAED,SAASe,EAAS,EAAQ,CACpB,EAAE,OAAS,QACbf,EAAM,SAAW,GACR,EAAE,OAAO,WAClBA,EAAM,SAAW,GAErB"}