{"version":3,"file":"Icon.ddbd2943.js","sources":["../../../app/assets/images/IconSprite.svg?url","../../../app/javascript/components/Icon.vue"],"sourcesContent":["export default \"__VITE_ASSET__b590a74e__\"","<script setup lang=\"ts\">\nimport { computed, defineProps } from \"vue\";\nimport spriteURL from \"@assets/images/IconSprite.svg?url\";\nimport { allIcons, type IconType } from \"@modules/icons\";\nimport { type ActionModelType } from \"@models/Action\";\n\n// The big big caveat with the current icons is that they’re not aligned in the same way as the\n// original SF Symbols are. Nor are they variable-width (most of the shapes here are taken from the\n// Regular weight). Ideally we use the SF Pro font, but that only contains the (monochrome) components\n// instead of multi/hierarchical colored icons.\n// How SF Symbols work:\n// https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/\n\nconst ACTION_TYPE_TO_ICON_MAP: Record<ActionModelType, IconType> = {\n  // No Action should ever exist in the timeline, but if we want the typing to work we either have to\n  // include it here or make the type prop more complicated (e.g. `type ActionWithIconType = Exclude<ActionModelType, \"Action\">;`)\n  Action: \"square\",\n  Click: \"click\",\n  Input: \"input\",\n  Pause: \"clock\",\n  ImageSlide: \"photo\", // Presentation/PDF: photo.stack\n  VideoSlide: \"preview-play\",\n  Overlay: \"type\",\n  TextSlide: \"type\",\n  Keypress: \"keyboard\",\n  BrowserPlayback: \"scissors\",\n  Scroll: \"arrow.up.and.down.square\",\n};\n\n// TODO: captions.bubble\n\nconst props = defineProps<{\n  icon: IconType | ActionModelType;\n}>();\n\nconst translatedIcon = computed((): IconType => {\n  const { icon } = props;\n  if (icon in ACTION_TYPE_TO_ICON_MAP) {\n    return ACTION_TYPE_TO_ICON_MAP[icon as ActionModelType];\n  }\n  return icon;\n});\n\nconst iconURL = computed(() => {\n  if (!translatedIcon.value) return \"\";\n  return `${spriteURL}#${translatedIcon.value}`;\n});\n\n// const color = computed(() => \"currentColor\");\n</script>\n\n<template>\n  <svg v-if=\"icon === 'spinner'\" class=\"aspect-square animate-spin\" data-chromatic=\"ignore\">\n    <use :href=\"iconURL\" />\n  </svg>\n  <svg v-else class=\"aspect-square\">\n    <use :href=\"iconURL\" />\n  </svg>\n</template>\n"],"names":["spriteURL","ACTION_TYPE_TO_ICON_MAP","translatedIcon","computed","icon","props","iconURL"],"mappings":"2EAAA,IAAeA,EAAA,kOCaTC,EAA6D,CAGjE,OAAQ,SACR,MAAO,QACP,MAAO,QACP,MAAO,QACP,WAAY,QACZ,WAAY,eACZ,QAAS,OACT,UAAW,OACX,SAAU,WACV,gBAAiB,WACjB,OAAQ,0BAAA,EASJC,EAAiBC,EAAS,IAAgB,CACxC,KAAA,CAAE,KAAAC,CAAS,EAAAC,EACjB,OAAID,KAAQH,EACHA,EAAwBG,GAE1BA,CAAA,CACR,EAEKE,EAAUH,EAAS,IAClBD,EAAe,MACb,GAAGF,KAAaE,EAAe,QADJ,EAEnC"}