{"version":3,"file":"Dx5ehycP.js","sources":["../../../../storyblok/gradients/CircleGradient.vue"],"sourcesContent":["<template>\n  <div v-if=\"loaded && isVisible\" :style=\"frameStyle\">\n    <div :style=\"circleStyle\"></div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nconst props = defineProps({\n  blok: {\n    type: Object,\n    default: () => ({\n      colour: { value: 'rgb(95, 20, 225)' },\n      blur: 80,\n      opacity: 0.3,\n      circleSize: 1005, // Separate size for the circle\n      gradientStops: [],\n      screenSettings: [\n        {\n          screenSize: 'Desktop',\n          frameTop: '10px',\n          frameLeft: '20px',\n          frameRight: null,\n          frameBottom: null,\n          frameWidth: '300px',\n          frameHeight: '300px',\n          circleTop: '50px',\n          circleLeft: '60px',\n          circleRight: null,\n          circleBottom: null\n        },\n        // You can add Tablet and Mobile screen settings here\n      ],\n    }),\n  },\n});\n\nconst screenSize = ref('Desktop');\nconst loaded = ref(false);\n\n// Function to detect screen size\nfunction updateScreenSize() {\n  const width = window.innerWidth;\n  if (width < 768) {\n    screenSize.value = 'Mobile';\n  } else if (width < 1024) {\n    screenSize.value = 'Tablet';\n  } else {\n    screenSize.value = 'Desktop';\n  }\n}\n\n// Run the updateScreenSize function when component mounts\nonMounted(() => {\n  updateScreenSize();\n  loaded.value = true; // Mark as loaded after initial screen size is determined\n  window.addEventListener('resize', updateScreenSize);\n});\n\n// Clean up the event listener\nonBeforeUnmount(() => {\n  window.removeEventListener('resize', updateScreenSize);\n});\n\n// Function to get frame values with fallback logic\nfunction getFrameValueWithFallback(valueKey) {\n  const desktopValue = props.blok.screenSettings.find(setting => setting.screenSize === 'Desktop')?.[valueKey];\n  const tabletValue = props.blok.screenSettings.find(setting => setting.screenSize === 'Tablet')?.[valueKey];\n  const mobileValue = props.blok.screenSettings.find(setting => setting.screenSize === 'Mobile')?.[valueKey];\n\n  // Prioritize the specific screen size, then fall back to smaller or larger settings\n  if (screenSize.value === 'Desktop') {\n    return desktopValue ?? (tabletValue !== undefined ? tabletValue : mobileValue) ?? null;\n  } else if (screenSize.value === 'Tablet') {\n    return tabletValue ?? (mobileValue !== undefined ? mobileValue : desktopValue) ?? null;\n  } else { // Assume 'Mobile' as the fallback case\n    return mobileValue ?? (tabletValue !== undefined ? tabletValue : desktopValue) ?? null;\n  }\n}\n\n// Function to get circle values with fallback logic\nfunction getCircleValueWithFallback(valueKey) {\n  const desktopValue = props.blok.screenSettings.find(setting => setting.screenSize === 'Desktop')?.[valueKey];\n  const tabletValue = props.blok.screenSettings.find(setting => setting.screenSize === 'Tablet')?.[valueKey];\n  const mobileValue = props.blok.screenSettings.find(setting => setting.screenSize === 'Mobile')?.[valueKey];\n\n  // Prioritize based on current screen size\n  if (screenSize.value === 'Desktop') {\n    return desktopValue || tabletValue || mobileValue || null;\n  } else if (screenSize.value === 'Tablet') {\n    return tabletValue || mobileValue || desktopValue || null;\n  } else {\n    return mobileValue || tabletValue || desktopValue || null;\n  }\n}\n\n// Computed properties for frame positions\nconst frameTop = computed(() => getFrameValueWithFallback('frameTop'));\nconst frameRight = computed(() => getFrameValueWithFallback('frameRight'));\nconst frameBottom = computed(() => getFrameValueWithFallback('frameBottom'));\nconst frameLeft = computed(() => getFrameValueWithFallback('frameLeft'));\nconst frameWidth = computed(() => getFrameValueWithFallback('frameWidth'));\nconst frameHeight = computed(() => getFrameValueWithFallback('frameHeight'));\n\n// Computed properties for circle positions\nconst circleTop = computed(() => getCircleValueWithFallback('circleTop'));\nconst circleRight = computed(() => getCircleValueWithFallback('circleRight'));\nconst circleBottom = computed(() => getCircleValueWithFallback('circleBottom'));\nconst circleLeft = computed(() => getCircleValueWithFallback('circleLeft'));\nconst circleWidth = computed(() => getCircleValueWithFallback('circleSize'));\nconst circleHeight = computed(() => getCircleValueWithFallback('circleSize'));\n\n// Computed property for visibility with fallback logic\nconst isVisible = computed(() => {\n  if (!loaded.value) return false; // Prevent rendering until the screen size is determined\n\n  const desktopHidden = props.blok.screenSettings.find(setting => setting.screenSize === 'Desktop')?.hidden;\n  const tabletHidden = props.blok.screenSettings.find(setting => setting.screenSize === 'Tablet')?.hidden;\n  const mobileHidden = props.blok.screenSettings.find(setting => setting.screenSize === 'Mobile')?.hidden;\n\n  if (screenSize.value === 'Desktop') {\n    return desktopHidden !== true;\n  } else if (screenSize.value === 'Tablet') {\n    return tabletHidden !== true;\n  } else if (screenSize.value === 'Mobile') {\n    return mobileHidden !== true;\n  }\n\n  return true; // Default to visible if no specific setting\n});\n\n\n// Helper function to convert hex to rgba\nfunction hexToRgba(hex, opacity) {\n  let r = 0, g = 0, b = 0;\n  if (hex.length === 4) {\n    r = parseInt(hex[1] + hex[1], 16);\n    g = parseInt(hex[2] + hex[2], 16);\n    b = parseInt(hex[3] + hex[3], 16);\n  } else if (hex.length === 7) {\n    r = parseInt(hex[1] + hex[2], 16);\n    g = parseInt(hex[3] + hex[4], 16);\n    b = parseInt(hex[5] + hex[6], 16);\n  }\n  return `rgba(${r}, ${g}, ${b}, ${opacity})`;\n}\n\n// Default gradient stops if none provided\nconst defaultGradientStops = [\n  { stop: 0, opacity: 0.4 },\n  { stop: 30, opacity: 0.35 },\n  { stop: 50, opacity: 0.25 },\n  { stop: 70, opacity: 0.15 },\n  { stop: 90, opacity: 0.05 },\n  { stop: 100, opacity: 0 }\n];\n\n// Gradient background style\nconst gradientStyle = computed(() => {\n  const baseColour = props.blok.colour.value || 'rgb(95, 20, 225)';\n\n  // Check if baseColour is hex and convert it to rgba if necessary\n  const rgbaBaseColour = baseColour.startsWith('#')\n    ? (opacity) => hexToRgba(baseColour, opacity)\n    : (opacity) => baseColour.replace('rgb', 'rgba').replace(')', `, ${opacity})`);\n\n  // Use provided gradient stops or fallback to defaults\n  const stops = (props.blok.gradientStops.length ? props.blok.gradientStops : defaultGradientStops).map((stop, index) => {\n    const opacity = stop.opacity.value !== undefined ? stop.opacity.value : 1;\n    const stopPosition = stop.stop.value !== undefined ? stop.stop.value : index * 20;\n    return `${rgbaBaseColour(opacity)} ${stopPosition}%`;\n  }).join(', ');\n\n  return `radial-gradient(circle, ${stops}, rgba(95, 20, 225, 0) 100%)`;\n});\n\n// Styles for frame and circle\nconst frameStyle = computed(() => ({\n  top: frameTop.value,\n  right: frameRight.value,\n  bottom: frameBottom.value,\n  left: frameLeft.value,\n  width: frameWidth.value,\n  height: frameHeight.value,\n  overflow: 'clip',\n  position: 'absolute',\n}));\n\nconst circleStyle = computed(() => ({\n  top: circleTop.value,\n  right: circleRight.value,\n  bottom: circleBottom.value,\n  left: circleLeft.value,\n  position: 'absolute',\n  width: circleWidth.value,\n  height: circleHeight.value,\n  filter: `blur(${props.blok.blur !== undefined ? props.blok.blur : 80}px)`, // Default blur if none provided\n  opacity: props.blok.opacity.value !== undefined ? props.blok.opacity.value : 0.3, // Default global opacity\n  background: gradientStyle.value, // Apply the gradient background\n  zIndex: 0, // Default z-index\n  borderRadius: '50%', // Default border-radius,\n}));\n</script>\n"],"names":["props","__props","screenSize","ref","loaded","updateScreenSize","width","onMounted","onBeforeUnmount","getFrameValueWithFallback","valueKey","desktopValue","_a","setting","tabletValue","_b","mobileValue","_c","getCircleValueWithFallback","frameTop","computed","frameRight","frameBottom","frameLeft","frameWidth","frameHeight","circleTop","circleRight","circleBottom","circleLeft","circleWidth","circleHeight","isVisible","desktopHidden","tabletHidden","mobileHidden","hexToRgba","hex","opacity","r","g","b","defaultGradientStops","gradientStyle","baseColour","rgbaBaseColour","stop","index","stopPosition","frameStyle","circleStyle"],"mappings":"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"}