{"version":3,"file":"index-D6hyXPoX.js","sources":["../../../packs/frontend/components/Base/Icon/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { type BootstrapIconName } from \"@/types/bootstrap-icons\";\nimport { Color } from \"@/types/components/Base/Color\";\nimport { computed } from \"vue\";\n\ndefineOptions({ name: \"BaseIcon\" });\n\nexport type IconSizes =\n  | \"x-sm\"\n  | \"sm\"\n  | \"md\"\n  | \"body\"\n  | \"lg\"\n  | \"x-lg\"\n  | \"xx-lg\"\n  | \"xxx-lg\"\n  | \"inherit\"\n  | number;\n\nexport type Props = {\n  iconName?: BootstrapIconName;\n  iconSvg?: string;\n  size?: IconSizes;\n  color?: Color;\n  bgColor?: string;\n  circle?: boolean;\n};\n\nconst iconSizeMap = new Map<IconSizes, number>([\n  [\"x-sm\", 12],\n  [\"sm\", 14],\n  [\"md\", 16],\n  [\"body\", 18],\n  [\"lg\", 20],\n  [\"x-lg\", 22],\n  [\"xx-lg\", 24],\n  [\"xxx-lg\", 26],\n]);\n\nconst props = withDefaults(defineProps<Props>(), {\n  iconName: undefined,\n  iconSvg: undefined,\n  size: \"body\",\n  color: undefined,\n  bgColor: undefined,\n  iconColor: \"inherit\",\n  iconBackgroundColor: undefined,\n});\n\nconst sizeClasses = {\n  \"x-sm\": \"i-x-sm\",\n  sm: \"i-sm\",\n  md: \"i-md\",\n  body: \"i-body\",\n  lg: \"i-lg\",\n  \"x-lg\": \"i-x-lg\",\n  \"xx-lg\": \"i-xx-lg\",\n  \"xxx-lg\": \"i-xxx-lg\",\n  inherit: \"i-inherit\",\n};\n\nconst colorClasses = {\n  primary: \"text-primary\",\n  \"btn-primary\": \"btn-primary\",\n  secondary: \"text-secondary\",\n  success: \"text-success\",\n  info: \"text-info\",\n  warning: \"text-warning\",\n  danger: \"text-danger\",\n  light: \"text-light\",\n  dark: \"text-dark\",\n  inherit: \"i-inherit-color\",\n  \"\": \"\",\n};\n\nconst computedStyle = computed(() => {\n  const styles: Record<string, string> = {};\n  if (typeof props.size === \"number\") {\n    // Always set font-size for icon scaling\n    styles.fontSize = `${props.size}px`;\n\n    // Only set width/height if there's no background\n    if (!props.bgColor && !props.iconSvg) {\n      styles.width = `${props.size}px`;\n      styles.height = `${props.size}px`;\n    }\n  }\n  return styles;\n});\nconst imgSizes = computed(() => {\n  const styles: Record<string, string> = {};\n  // Always set image dimensions if size is a number\n  if (typeof props.size === \"number\" || props.bgColor) {\n    const iconSize =\n      typeof props.size === \"number\"\n        ? `${props.size}px`\n        : `${iconSizeMap.get(props.size) ?? \"\"}px`;\n    if (iconSize) {\n      styles.height = iconSize;\n      styles.width = iconSize;\n    }\n  }\n  return styles;\n});\n\nconst bgStyle = computed(() => {\n  const styles: Record<string, string> = {};\n  const bgPadding = \"0.5em\";\n  if (props.bgColor) {\n    styles.backgroundColor = props.bgColor;\n    styles.padding = bgPadding;\n    if (!props.iconSvg) {\n      styles.width = `calc(${styles.width} + ${bgPadding})`;\n      styles.height = `calc(${styles.height} + ${bgPadding})`;\n    }\n  }\n  return styles;\n});\n\nconst computedClass = computed(() => {\n  // 1. Handle size classes (only for string-based sizes)\n  const sizeClass =\n    typeof props.size === \"string\" ? sizeClasses[props.size] : \"\";\n\n  // 2. Color class\n  const colorClass = colorClasses[props.color ?? \"primary\"] ?? \"text-primary\";\n\n  // 3. Circle class\n  const circular = props.circle ? \"i-circle\" : \"\";\n\n  // 4. Combine classes\n  return [\n    !props.iconSvg ? \"bi\" : \"\",\n    props.iconName ? `bi-${props.iconName}` : \"\",\n    sizeClass,\n    colorClass,\n    circular,\n  ]\n    .filter((c) => c)\n    .join(\" \");\n});\n</script>\n\n<template>\n  <i\n    v-if=\"!iconSvg\"\n    :class=\"['base-icon-wrapper', computedClass]\"\n    :style=\"[bgStyle, computedStyle]\"\n  />\n  <img\n    v-else\n    alt=\"icon\"\n    :class=\"['base-icon-wrapper', computedClass]\"\n    :style=\"[bgStyle, computedStyle]\"\n    :src=\"iconSvg\"\n    :height=\"imgSizes.height\"\n    :width=\"imgSizes.width\"\n  />\n</template>\n\n<style scoped lang=\"scss\">\n$icon-sizes: (\n  x-sm: 12px,\n  sm: 14px,\n  md: 16px,\n  body: 18px,\n  lg: 20px,\n  x-lg: 22px,\n  xx-lg: 24px,\n);\n\n@mixin icon-size($name, $size) {\n  &.#{$name} {\n    font-size: $size;\n    width: $size;\n    height: $size;\n    display: inline-flex;\n    line-height: $size;\n    text-align: center;\n  }\n}\n\n.base-icon-wrapper {\n  border-radius: 4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  vertical-align: -0.125em;\n\n  .i {\n    @each $name, $size in $icon-sizes {\n      &-#{$name} {\n        font-size: $size;\n        width: $size;\n        height: $size;\n        line-height: $size;\n        text-align: center;\n        display: inline-flex;\n      }\n    }\n\n    &-inherit {\n      font-size: inherit;\n      width: inherit;\n      height: inherit;\n      border-radius: 4px;\n      vertical-align: middle;\n    }\n  }\n\n  &.i-circle {\n    border-radius: 50%;\n\n    /* Dynamically match width and height to the icon's size */\n    width: auto;\n    height: auto;\n    min-width: 1em; /* Ensures size scales based on font size */\n    min-height: 1em;\n  }\n\n  img.i {\n    @each $name, $size in $icon-sizes {\n      &.i-#{$name} {\n        width: $size;\n        height: $size;\n        border-radius: 4px;\n      }\n    }\n\n    &.i-circle {\n      border-radius: 50%; // Ensures a circular shape\n      width: inherit; // Dynamically inherits size from parent\n      height: inherit;\n    }\n  }\n}\n</style>\n"],"names":["iconSizeMap","props","__props","sizeClasses","colorClasses","computedStyle","computed","styles","imgSizes","iconSize","bgStyle","bgPadding","computedClass","sizeClass","colorClass","circular","c"],"mappings":"wVA4BM,MAAAA,MAAkB,IAAuB,CAC7C,CAAC,OAAQ,EAAE,EACX,CAAC,KAAM,EAAE,EACT,CAAC,KAAM,EAAE,EACT,CAAC,OAAQ,EAAE,EACX,CAAC,KAAM,EAAE,EACT,CAAC,OAAQ,EAAE,EACX,CAAC,QAAS,EAAE,EACZ,CAAC,SAAU,EAAE,CAAA,CACd,EAEKC,EAAQC,EAURC,EAAc,CAClB,OAAQ,SACR,GAAI,OACJ,GAAI,OACJ,KAAM,SACN,GAAI,OACJ,OAAQ,SACR,QAAS,UACT,SAAU,WACV,QAAS,WACX,EAEMC,EAAe,CACnB,QAAS,eACT,cAAe,cACf,UAAW,iBACX,QAAS,eACT,KAAM,YACN,QAAS,eACT,OAAQ,cACR,MAAO,aACP,KAAM,YACN,QAAS,kBACT,GAAI,EACN,EAEMC,EAAgBC,EAAS,IAAM,CACnC,MAAMC,EAAiC,CAAC,EACpC,OAAA,OAAON,EAAM,MAAS,WAEjBM,EAAA,SAAW,GAAGN,EAAM,IAAI,KAG3B,CAACA,EAAM,SAAW,CAACA,EAAM,UACpBM,EAAA,MAAQ,GAAGN,EAAM,IAAI,KACrBM,EAAA,OAAS,GAAGN,EAAM,IAAI,OAG1BM,CAAA,CACR,EACKC,EAAWF,EAAS,IAAM,CAC9B,MAAMC,EAAiC,CAAC,EAExC,GAAI,OAAON,EAAM,MAAS,UAAYA,EAAM,QAAS,CACnD,MAAMQ,EACJ,OAAOR,EAAM,MAAS,SAClB,GAAGA,EAAM,IAAI,KACb,GAAGD,EAAY,IAAIC,EAAM,IAAI,GAAK,EAAE,KACtCQ,IACFF,EAAO,OAASE,EAChBF,EAAO,MAAQE,EACjB,CAEK,OAAAF,CAAA,CACR,EAEKG,EAAUJ,EAAS,IAAM,CAC7B,MAAMC,EAAiC,CAAC,EAClCI,EAAY,QAClB,OAAIV,EAAM,UACRM,EAAO,gBAAkBN,EAAM,QAC/BM,EAAO,QAAUI,EACZV,EAAM,UACTM,EAAO,MAAQ,QAAQA,EAAO,KAAK,MAAMI,CAAS,IAClDJ,EAAO,OAAS,QAAQA,EAAO,MAAM,MAAMI,CAAS,MAGjDJ,CAAA,CACR,EAEKK,EAAgBN,EAAS,IAAM,CAE7B,MAAAO,EACJ,OAAOZ,EAAM,MAAS,SAAWE,EAAYF,EAAM,IAAI,EAAI,GAGvDa,EAAaV,EAAaH,EAAM,OAAS,SAAS,GAAK,eAGvDc,EAAWd,EAAM,OAAS,WAAa,GAGtC,MAAA,CACJA,EAAM,QAAiB,GAAP,KACjBA,EAAM,SAAW,MAAMA,EAAM,QAAQ,GAAK,GAC1CY,EACAC,EACAC,CAAA,EAEC,OAAQC,GAAMA,CAAC,EACf,KAAK,GAAG,CAAA,CACZ"}