{"version":3,"file":"IconButton-BVN3JwRE.js","sources":["../../../packs/frontend/components/IconButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BaseButtonKindEnum } from \"@/components/Base/Button\";\nimport { type Props as BaseButtonProps } from \"@/components/Base/Button.vue\";\nimport { type Props as BaseIconProps } from \"@/components/Base/Icon/index.vue\";\nimport { BootstrapIconName } from \"@/types/bootstrap-icons\";\n\nconst { getContent } = useSlotsWithSlotContent();\n\nexport type Props = BaseButtonProps & {\n  label?: string;\n  value?: number | string;\n  showValue?: boolean;\n  iconName?: BootstrapIconName;\n  iconSvg?: string;\n  iconPosition?: \"left\" | \"right\";\n  noWrap?: boolean;\n  iconOnly?: boolean;\n  iconColor?: BaseIconProps[\"color\"];\n  iconBgColor?: string;\n  labelStyle?: string;\n  buttonClass?: string;\n  kind?: `${BaseButtonKindEnum}`;\n};\n\nconst props = withDefaults(defineProps<Props>(), {\n  label: \"\",\n  value: undefined,\n  iconName: undefined,\n  iconSvg: \"\",\n  iconPosition: \"right\",\n  kind: BaseButtonKindEnum.LINK,\n  iconColor: \"inherit\",\n  iconBgColor: undefined,\n  to: undefined,\n  labelStyle: \"\",\n  buttonClass: undefined,\n});\n\nconst emit = defineEmits([\"icon-click\"]);\n\nconst hasSlotContent = computed(() => getContent(\"default\"));\n\nconst handleClick = (event: PointerEvent) => {\n  if (props.href) return;\n\n  event.preventDefault();\n  event.stopPropagation();\n  emit(\"icon-click\", event, props.value);\n};\n\nconst iconSpacing = computed(() => \"\");\n</script>\n<template>\n  <BaseButton\n    v-bind=\"{ ...props, ...$attrs }\"\n    class=\"base-icon-button\"\n    :class=\"{\n      'flex-row-reverse': iconPosition === 'left',\n      'text-nowrap': noWrap,\n      'has-slot-content': hasSlotContent,\n\n      [buttonClass]: buttonClass,\n    }\"\n    :aria-label=\"ariaLabel || label || value\"\n    @click=\"handleClick\"\n  >\n    <template v-if=\"hasSlotContent\">\n      <span v-if=\"!iconOnly\" :class=\"iconSpacing\">\n        <slot></slot>\n      </span>\n    </template>\n    <template v-else>\n      <span v-if=\"label && !iconOnly\" :class=\"iconSpacing\" :style=\"labelStyle\">\n        {{ label }}\n      </span>\n      <span v-if=\"showValue\" class=\"me-1\">{{ value }}</span>\n    </template>\n    <BaseIcon\n      v-if=\"iconName || iconSvg\"\n      :icon-name=\"iconName\"\n      :icon-svg=\"iconSvg\"\n      :color=\"iconColor\"\n      :bg-color=\"iconBgColor\"\n      :size=\"size\"\n      :circle=\"iconOnly\"\n    />\n  </BaseButton>\n</template>\n<style scoped lang=\"scss\">\n.base-icon-button {\n  display: inline-flex;\n  text-decoration: none;\n  width: fit-content;\n  align-items: center;\n  gap: 0.5rem;\n\n  :deep(.btn-flex) {\n    display: inline-flex;\n    align-items: center;\n    gap: inherit;\n  }\n\n  &--circle {\n    padding: 0.25rem;\n    border-radius: 50px;\n\n    i {\n      width: 1rem;\n      height: 1rem;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  }\n}\n</style>\n"],"names":["getContent","useSlotsWithSlotContent","props","__props","emit","__emit","hasSlotContent","computed","handleClick","event","iconSpacing"],"mappings":"k7BAMM,KAAA,CAAE,WAAAA,CAAW,EAAIC,EAAwB,EAkBzCC,EAAQC,EAcRC,EAAOC,EAEPC,EAAiBC,EAAS,IAAMP,EAAW,SAAS,CAAC,EAErDQ,EAAeC,GAAwB,CACvCP,EAAM,OAEVO,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EACjBL,EAAA,aAAcK,EAAOP,EAAM,KAAK,EACvC,EAEMQ,EAAcH,EAAS,IAAM,EAAE"}