{"version":3,"file":"hbVIDHkh.js","sources":["../../../../src/components/components/core/headline-dynamic/minilu/headline-dynamic.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <div\n    class=\"headline__container\"\n    :class=\"[\n      props.containerClasses,\n      { 'mx-auto': props.alignText === 'center' },\n      props.width,\n      props.maxWidth,\n    ]\"\n  >\n    <component\n      :is=\"level\"\n      :class=\"styleClasses\"\n      :style=\"getHeadlineStyle()\"\n      class=\"minilu-headline max-w-[calc(100vw-var(--thm-spacing-md))]\"\n      :data-test-id=\"testid\"\n    >\n      <slot v-if=\"$slots.default\" />\n      <span v-else :data-test-id=\"`${testid}Span`\" v-html=\"t(headline)\"></span>\n    </component>\n    <div\n      v-if=\"\n        hasDecoration &&\n        (level === EHeadlineSize.H1 || level === EHeadlineSize.H2)\n      \"\n      class=\"flex items-center justify-center h-auto mx-auto cursor-default pb-xs pt-2xs md:pt-0 md:pb-xs\"\n      :class=\"{\n        'w-full md:w-[270px]': mobileFullDecoWidth,\n        'w-[270px]': !mobileFullDecoWidth,\n      }\"\n    >\n      <HeadlineDeco\n        :stroke-width=\"props.strokeWidth\"\n        :stroke-color=\"strokeColor ?? 'stroke-inherit'\"\n        :logo-color-main=\"logoColorMain\"\n        :logo-color-second=\"props.logoColorSecond\"\n        :container-class=\"\n          decoContainerClasses + (mobileFullDecoWidth ? ' w-full' : '')\n        \"\n        :mobile-full-width=\"mobileFullDecoWidth\"\n      />\n    </div>\n    <div\n      v-else-if=\"hasDecoration && level === EHeadlineSize.H3\"\n      class=\"headline__stroke h-[1px] mt-2xs mx-auto mb-2xs !bg-minilu-headline-stroke\"\n      :class=\"{\n        'w-full md:w-[270px]': mobileFullDecoWidth,\n        'w-[270px]': !mobileFullDecoWidth,\n      }\"\n    ></div>\n    <p\n      v-if=\"subline\"\n      class=\"max-w-screen-lg mx-auto mt-sm\"\n      :class=\"styleClasses\"\n    >\n      {{ subline }}\n    </p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { EHeadlineSize } from '@/@types/headline';\nimport HeadlineDeco from './headline-deco.vue';\n\nexport interface Props {\n  headline: string;\n  subline?: string;\n  hasDecoration?: boolean;\n  alignText?: string;\n  level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | string | EHeadlineSize;\n  strokeWidth?: number;\n  strokeColor?: string;\n  logoColorMain?: string;\n  logoColorSecond?: string;\n  textColor?: string;\n  classes?: string;\n  containerClasses?: string;\n  decoContainerClasses?: string;\n  width?: string;\n  testid?: string;\n  mobileFullDecoWidth?: boolean;\n}\n\nconst { t } = useTrans();\n\nconst props = withDefaults(defineProps<Props>(), {\n  headline: '',\n  subline: null,\n  hasDecoration: false,\n  alignText: 'center',\n  level: 'h1',\n  strokeWidth: 1,\n  strokeColor: '#F297C0',\n  logoColorMain: '#f297c0',\n  logoColorSecond: '#ea5297',\n  textColor: '',\n  classes: '',\n  containerClasses: 'font-pero',\n  decoContainerClasses: '',\n  width: 'w-fit',\n  maxWidth: 'max-w-screen-md',\n  mobileFullDecoWidth: false,\n});\n\nlet styleClasses: any[] = [];\nlet textColorVal = '';\n\nif (props.textColor.startsWith('color:')) {\n  styleClasses = [\n    {\n      [getAlignment()]: true,\n      'mx-auto': props.alignText === 'center',\n      [props.classes]: props.classes,\n    },\n  ];\n} else {\n  setTextColor(props.level);\n  styleClasses = [\n    {\n      [getAlignment()]: true,\n      'mx-auto': props.alignText === 'center',\n      [textColorVal]: true,\n      [props.classes]: props.classes,\n    },\n  ];\n}\n\nfunction setTextColor(headlineLevel: string) {\n  if (props.textColor !== '' && props.textColor != undefined) {\n    textColorVal = props.textColor;\n  } else {\n    if (headlineLevel === 'h1') {\n      textColorVal = 'text-minilu-font';\n    } else {\n      textColorVal = 'text-inherit';\n    }\n  }\n}\n\nfunction getAlignment() {\n  return 'text-' + props.alignText;\n}\n\nfunction getHeadlineStyle() {\n  if (props.textColor.startsWith('color:')) {\n    return props.textColor;\n  }\n}\n</script>\n<style lang=\"postcss\" scoped>\n.minilu-headline {\n  @apply hyphens-auto;\n}\n\nh1 {\n  @apply !font-pero !text-[28px] !font-bold !leading-[42px];\n}\n\nh2 {\n  @apply !font-pero !text-[22px] md:!text-[28px] !leading-[42px];\n}\n\nh3 {\n  @apply !font-pero !text-xl !leading-xl;\n}\n\nh4 {\n  @apply !font-pero !text-[22px] !font-bold !leading-[34px];\n}\n\nh5 {\n  @apply !font-text !text-md !font-bold !leading-sm;\n}\n\nh6 {\n  @apply !font-text;\n}\n</style>\n"],"names":["t","useTrans","props","__props","styleClasses","textColorVal","getAlignment","setTextColor","headlineLevel","getHeadlineStyle"],"mappings":"0oFAoFM,KAAA,CAAE,EAAAA,GAAMC,IAERC,EAAQC,EAmBd,IAAIC,EAAsB,CAAA,EACtBC,EAAe,GAEfH,EAAM,UAAU,WAAW,QAAQ,EACtBE,EAAA,CACb,CACE,CAACE,EAAc,CAAA,EAAG,GAClB,UAAWJ,EAAM,YAAc,SAC/B,CAACA,EAAM,OAAO,EAAGA,EAAM,OACzB,CAAA,GAGFK,EAAaL,EAAM,KAAK,EACTE,EAAA,CACb,CACE,CAACE,EAAc,CAAA,EAAG,GAClB,UAAWJ,EAAM,YAAc,SAC/B,CAACG,CAAY,EAAG,GAChB,CAACH,EAAM,OAAO,EAAGA,EAAM,OACzB,CAAA,GAIJ,SAASK,EAAaC,EAAuB,CACvCN,EAAM,YAAc,IAAMA,EAAM,WAAa,KAC/CG,EAAeH,EAAM,UAEjBM,IAAkB,KACLH,EAAA,mBAEAA,EAAA,cAGrB,CAEA,SAASC,GAAe,CACtB,MAAO,QAAUJ,EAAM,SACzB,CAEA,SAASO,GAAmB,CAC1B,GAAIP,EAAM,UAAU,WAAW,QAAQ,EACrC,OAAOA,EAAM,SAEjB"}