{"version":3,"file":"DjN-u1uw.js","sources":["../../../../src/components/components/core/basic-button/vdv/basic-button.vue"],"sourcesContent":["<template>\n  <div :class=\"classes\" class=\"w-full sm:w-auto\">\n    <div class=\"relative top-0 w-full\">\n      <ButtonDialog\n        :v-if=\"props.dialogContent\"\n        :dialog-content=\"dialogContentRef\"\n        :visible=\"showDialogRef\"\n        :voucher-button=\"voucherButton\"\n        @close=\"emit('closeDialog')\"\n      >\n        <template v-if=\"$slots.dialogContent\" #content>\n          <slot name=\"dialogContent\" />\n        </template>\n      </ButtonDialog>\n      <button\n        v-if=\"type === EButtonType.BUTTON || type === EButtonType.SUBMIT\"\n        :type=\"type\"\n        class=\"flex w-full custom-button sm:w-auto font-text\"\n        :class=\"onlyIcon ? ' py-[7px] px-[25px] ' + btnClasses : btnClasses\"\n        :style=\"btnStyles\"\n        :disabled=\"disabled\"\n        :data-testid=\"testid ?? ''\"\n        @click=\"emit('click')\"\n      >\n        <template v-if=\"$slots.label\">\n          <slot name=\"label\" />\n        </template>\n        <template v-else>\n          {{ label }}\n        </template>\n        <FaIcon v-if=\"props.icon\" :icon-class=\"props.icon\" />\n        <span v-if=\"loadingAnimation\">\n          <FaIcon icon-class=\"fas fa-circle-notch fa-spin mx-2xs\" />\n        </span>\n      </button>\n    </div>\n\n    <NuxtLink\n      v-if=\"type === EButtonType.ROUTERLINK\"\n      class=\"!inline-flex custom-button\"\n      :class=\"btnClasses\"\n      :disabled=\"disabled\"\n      :to=\"target\"\n      :data-testid=\"testid ?? ''\"\n      @click=\"emit('click')\"\n    >\n      <template v-if=\"$slots.label\">\n        <slot name=\"label\" />\n      </template>\n      <template v-else>\n        {{ label }}\n      </template>\n      <FaIcon v-if=\"props.icon\" :icon-class=\"props.icon\" />\n      <span v-if=\"loadingAnimation\">\n        <FaIcon icon-class=\"fas fa-circle-notch fa-spin mx-2xs\" />\n      </span>\n    </NuxtLink>\n\n    <a\n      v-if=\"type === EButtonType.LINK\"\n      class=\"!inline-flex custom-button\"\n      :class=\"btnClasses\"\n      :disabled=\"disabled\"\n      :href=\"target\"\n      :style=\"btnStyles\"\n      :data-testid=\"testid ?? ''\"\n      @click=\"emit('click')\"\n    >\n      <template v-if=\"$slots.label\">\n        <slot name=\"label\" />\n      </template>\n      <template v-else>\n        {{ label }}\n      </template>\n      <FaIcon v-if=\"props.icon\" :icon-class=\"props.icon\" />\n      <span v-if=\"loadingAnimation\">\n        <FaIcon icon-class=\"fas fa-circle-notch fa-spin mx-2xs\" />\n      </span>\n    </a>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n/**\n * @TODO: Lazyload v-if (ButtonDialog)\n */\nimport { toRef } from 'vue';\nimport { EPosition, EButtonStyle, EButtonType } from '@/@types/basic-button';\nimport { type IDialogContent } from '@/@types/dialog-content';\nimport ButtonDialog from '~~/src/components/components/core/basic-button-dialog/basic-button-dialog.vue';\nimport FaIcon from '@/components/fa-icon.vue';\n/** Props */\nconst props = defineProps({\n  label: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  type: {\n    type: String,\n    default: EButtonType.BUTTON,\n  },\n  target: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  disabled: {\n    type: Boolean,\n    default: false,\n  },\n  icon: {\n    type: String,\n    required: false,\n    default: null,\n  },\n  onlyIcon: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  iconPosition: {\n    type: String,\n    default: EPosition.RIGHT,\n  },\n  voucherButton: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  btnStyle: {\n    type: String,\n    default: EButtonStyle.DEFAULT,\n  },\n  fullWidth: {\n    type: Boolean,\n    default: false,\n  },\n  slim: {\n    type: Boolean,\n    default: true,\n  },\n  classes: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  btnClass: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  showDialog: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  dialogContent: {\n    type: Object as PropType<IDialogContent>,\n    required: false,\n    default: () => null,\n  },\n  bgColor: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  loadingAnimation: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  noBorderRadius: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  btnHeight: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  testid: {\n    type: String,\n    required: false,\n    default: '',\n  },\n});\n\n/** Emits */\nconst emit = defineEmits<{\n  (e: 'click'): void;\n  (e: 'closeDialog'): string;\n}>();\n\nconst showDialogRef = toRef(props, 'showDialog');\nconst dialogContentRef = toRef(props, 'dialogContent');\n\nconst btnStyles = computed(() => {\n  const styles = [];\n  if (props.bgColor.length) {\n    styles.push({ backgroundColor: props.bgColor });\n  }\n  if (props.noBorderRadius) {\n    styles.push({ borderRadius: '0 !important' });\n  }\n  if (props.btnHeight.length) {\n    styles.push({ height: props.btnHeight });\n  }\n  return styles;\n});\n\nconst btnClasses = [\n  {\n    'flex-row-reverse': props.iconPosition == EPosition.LEFT,\n    '!w-full': props.fullWidth,\n    'custom-button-slim': props.slim,\n    '!font-normal': props.btnStyle == 'inverted',\n  },\n  `vdv-button--${props.btnStyle}`,\n  props.btnClass,\n];\n</script>\n\n<style scoped lang=\"postcss\">\n/** VDV BUTTONS **/\n.vdv-button--default {\n  @apply bg-vdv-btn-base text-white;\n}\n\n.vdv-button--default:disabled {\n  @apply bg-vdv-btn-alpha text-vdv-border-dark;\n}\n\n.vdv-button--light {\n  @apply bg-vdv-btn-light text-vdv-font;\n}\n\n.vdv-button--light:disabled {\n  @apply text-vdv-border-light;\n}\n\n.vdv-button--inverted {\n  @apply text-white bg-vdv-btn-light;\n}\n\n.vdv-button--inverted:disabled {\n  @apply bg-vdv-btn-light text-vdv-border-light;\n}\n\n.vdv-button--cta {\n  @apply bg-vdv-btn-cta text-white !py-[6px] first-letter:!rounded-[0.333rem];\n}\n\n.vdv-button--cta:disabled {\n  @apply bg-btn-cta-base-opc50 text-vdv-border-light;\n}\n\n.vdv-button--cta-dark {\n  @apply bg-vdv-btn-base text-white;\n}\n\n.vdv-button--cta-dark:disabled {\n  @apply bg-vdv-btn-alpha text-vdv-border-dark;\n}\n\n.vdv-button--formrepeaterComplaintForm {\n  @apply text-[#322C38] bg-[#FFFFFF80];\n}\n\n.vdv-button--formrepeater {\n  @apply text-white bg-vdv-btn-formrepeater;\n}\n\n.vdv-button--formrepeater:disabled {\n  @apply text-white bg-vdv-btn-formrepeateralpha;\n}\n\n.vdv-button--area {\n  @apply bg-activesection-alpha text-vdv-font;\n}\n\n.vdv-button--area:disabled {\n  @apply bg-activesection-light;\n}\n</style>\n"],"names":["props","__props","emit","__emit","showDialogRef","toRef","dialogContentRef","btnStyles","computed","styles","btnClasses","EPosition"],"mappings":"k7CA4FA,MAAMA,EAAQC,EAkGRC,EAAOC,EAKPC,EAAgBC,EAAML,EAAO,YAAY,EACzCM,EAAmBD,EAAML,EAAO,eAAe,EAE/CO,EAAYC,EAAS,IAAM,CAC/B,MAAMC,EAAS,CAAA,EACX,OAAAT,EAAM,QAAQ,QAChBS,EAAO,KAAK,CAAE,gBAAiBT,EAAM,OAAS,CAAA,EAE5CA,EAAM,gBACRS,EAAO,KAAK,CAAE,aAAc,cAAgB,CAAA,EAE1CT,EAAM,UAAU,QAClBS,EAAO,KAAK,CAAE,OAAQT,EAAM,SAAW,CAAA,EAElCS,CAAA,CACR,EAEKC,EAAa,CACjB,CACE,mBAAoBV,EAAM,cAAgBW,EAAU,KACpD,UAAWX,EAAM,UACjB,qBAAsBA,EAAM,KAC5B,eAAgBA,EAAM,UAAY,UACpC,EACA,eAAeA,EAAM,QAAQ,GAC7BA,EAAM,QAAA"}