{"version":3,"file":"OzLoadingSpinnerWithCheckmark-cdb12a5a.js","sources":["../../../app/javascript/library/v4/components/OzLoadingSpinnerWithCheckmark.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { __ } from '@@/bits/intl'\nimport { tailwindFlattenedColors } from '@@/bits/tailwind'\nimport { computed, nextTick, ref, watch } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    size?: number\n    color?: 'rainbow' | 'black' | 'white' | 'yellow' | 'purple'\n    checkmarkColor?:\n      | 'rainbow'\n      | 'black'\n      | 'white'\n      | 'yellow'\n      | 'purple'\n      | 'transparent-with-green-bg'\n      | 'transparent-with-red-bg'\n    checkmarkIcon?: 'checkmark' | 'error'\n    variation?: 'default' | 'dashed'\n    darkMode?: boolean | 'auto'\n    isCheckmark?: boolean\n    progress?: number | null\n    spinnerLabel?: string\n    checkmarkLabel?: string\n  }>(),\n  {\n    size: 48,\n    color: 'white',\n    checkmarkColor: undefined,\n    checkmarkIcon: 'checkmark',\n    variation: 'default',\n    darkMode: 'auto',\n    isCheckmark: false,\n    progress: null,\n    spinnerLabel: __('Loading'),\n    checkmarkLabel: __('Done'),\n  },\n)\n\nconst effectiveCheckmarkColor = computed(() => {\n  if (props.checkmarkColor != null) return props.checkmarkColor\n  return props.color\n})\n\nconst emit = defineEmits(['transformed-to-checkmark'])\n\nconst loaderSize = computed(() => {\n  return props.size\n})\n\nconst loaderStyle = computed(() => {\n  if (!props.size) return undefined\n  return {\n    width: `${loaderSize.value}px`,\n    height: `${loaderSize.value}px`,\n  }\n})\n\nconst strokeWidth = computed(() => {\n  if (!props.size) return 2\n  if (props.size < 30) {\n    return 4\n  }\n  return 2\n})\n\nconst strokeColor = computed(() => {\n  switch (props.color) {\n    case 'black':\n      return 'black'\n    case 'white':\n      return 'white'\n    case 'purple':\n      return tailwindFlattenedColors['grape-500']\n    case 'yellow':\n      return tailwindFlattenedColors['canary-500']\n    default:\n      return 'black'\n  }\n})\n\nconst isLastFrameAnimationFinished = ref(false)\nconst hasReachedFullProgress = ref(false)\nwatch(\n  () => props.progress,\n  (newValue) => {\n    if (newValue === 1) {\n      hasReachedFullProgress.value = true\n    }\n  },\n)\n\n// When transforming from spinner to checkmark, we need to wait for the last frame of the spinner animation to finish\n// And then we can start the checkmark animation\nfunction endAnimation(): void {\n  isLastFrameAnimationFinished.value = true\n  emit('transformed-to-checkmark')\n}\n\nconst circlePath = ref<SVGPathElement | null>(null)\nwatch(\n  () => props.isCheckmark,\n  (newValue) => {\n    if (!newValue) {\n      return\n    }\n    isLastFrameAnimationFinished.value = false\n    if (props.progress !== null || hasReachedFullProgress.value) {\n      endAnimation()\n      return\n    }\n    nextTick(() => {\n      if (!circlePath.value) {\n        endAnimation()\n        return\n      }\n      const listener = () => {\n        endAnimation()\n        circlePath.value?.removeEventListener('animationiteration', listener)\n      }\n      circlePath.value?.addEventListener('animationiteration', listener)\n    })\n  },\n  { immediate: true, flush: 'post' },\n)\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'relative',\n      {\n        'color-rainbow': props.color === 'rainbow',\n        'color-black': props.color === 'black',\n        'color-white': props.color === 'white',\n        'color-yellow': props.color === 'yellow',\n        'color-purple': props.color === 'purple',\n      },\n      {\n        'color-checkmark-rainbow': effectiveCheckmarkColor === 'rainbow',\n        'color-checkmark-black': effectiveCheckmarkColor === 'black',\n        'color-checkmark-white': effectiveCheckmarkColor === 'white',\n        'color-checkmark-yellow': effectiveCheckmarkColor === 'yellow',\n        'color-checkmark-purple': effectiveCheckmarkColor === 'purple',\n        'color-checkmark-transparent-with-green-bg': effectiveCheckmarkColor === 'transparent-with-green-bg',\n        'color-checkmark-transparent-with-red-bg': effectiveCheckmarkColor === 'transparent-with-red-bg',\n      },\n    ]\"\n  >\n    <div class=\"sr-only\" aria-live=\"polite\">\n      <p v-if=\"!isCheckmark\">{{ spinnerLabel }}</p>\n      <p v-if=\"progress !== null\">{{ progress * 100 }}%</p>\n      <p v-if=\"isCheckmark\">{{ checkmarkLabel }}</p>\n    </div>\n\n    <!-- Background path -->\n    <svg\n      :class=\"{\n        absolute: true,\n        'inset-0 w-full h-full': true,\n        '-rotate-90': true,\n      }\"\n      viewBox=\"25 25 50 50\"\n      aria-hidden=\"true\"\n    >\n      <circle\n        :class=\"{ backgroundPath: true, complete: isCheckmark && isLastFrameAnimationFinished }\"\n        cx=\"50\"\n        cy=\"50\"\n        r=\"20\"\n        fill=\"none\"\n        :stroke-width=\"strokeWidth\"\n        stroke-miterlimit=\"10\"\n      ></circle>\n    </svg>\n    <div :class=\"['loader']\" :style=\"loaderStyle\">\n      <!-- Spinner path -->\n      <svg\n        v-show=\"props.progress === null || hasReachedFullProgress\"\n        :class=\"{\n          absolute: true,\n          'inset-0 w-full h-full': true,\n          rotating: !isCheckmark || !isLastFrameAnimationFinished,\n        }\"\n        viewBox=\"25 25 50 50\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          ref=\"circlePath\"\n          :class=\"{ path: true, complete: isCheckmark && isLastFrameAnimationFinished }\"\n          cx=\"50\"\n          cy=\"50\"\n          r=\"20\"\n          fill=\"none\"\n          :stroke-width=\"strokeWidth\"\n          stroke-miterlimit=\"10\"\n        ></circle>\n      </svg>\n\n      <svg\n        v-if=\"props.progress !== null && !hasReachedFullProgress\"\n        :class=\"{\n          absolute: true,\n          'inset-0 w-full h-full': true,\n          '-rotate-90': true,\n          '-scale-y-100': true,\n        }\"\n        viewBox=\"25 25 50 50\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          class=\"transition-all duration-100 ease-in-out motion-reduce:transition-none\"\n          cx=\"50\"\n          cy=\"50\"\n          r=\"20\"\n          fill=\"none\"\n          :stroke=\"strokeColor\"\n          :stroke-width=\"strokeWidth\"\n          stroke-dasharray=\"150\"\n          stroke-linecap=\"round\"\n          :stroke-dashoffset=\"-150 * (1 - progress)\"\n          stroke-miterlimit=\"10\"\n        ></circle>\n      </svg>\n    </div>\n\n    <!-- Checkmark path -->\n    <svg\n      v-if=\"checkmarkColor !== 'transparent-with-green-bg' && checkmarkColor !== 'transparent-with-red-bg'\"\n      :class=\"{\n        absolute: true,\n        'inset-0 w-full h-full': true,\n        check: true,\n        complete: isCheckmark && isLastFrameAnimationFinished,\n      }\"\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 12 12\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M2 6.75L4.25 9L9.75 3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n    </svg>\n    <svg\n      v-else-if=\"checkmarkColor === 'transparent-with-green-bg' || checkmarkColor === 'transparent-with-red-bg'\"\n      :class=\"{\n        absolute: true,\n        'inset-0 w-full h-full': true,\n        check: true,\n        complete: isCheckmark && isLastFrameAnimationFinished,\n      }\"\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        v-if=\"checkmarkIcon === 'checkmark'\"\n        class=\"fill-current\"\n        d=\"M10 0C4.486 0 0 4.486 0 10C0 15.514 4.486 20 10 20C15.514 20 20 15.514 20 10C20 4.486 15.514 0 10 0ZM14.2805 8.2805L9.2805 13.2805C9.134 13.427 8.942 13.5 8.75 13.5C8.558 13.5 8.366 13.427 8.2195 13.2805L5.7195 10.7805C5.4265 10.4875 5.4265 10.013 5.7195 9.72C6.0125 9.427 6.487 9.427 6.78 9.72L8.7495 11.6895L13.219 7.22C13.512 6.927 13.9865 6.927 14.2795 7.22C14.5725 7.513 14.573 7.9875 14.2805 8.2805Z\"\n      />\n      <path\n        v-else-if=\"checkmarkIcon === 'error'\"\n        class=\"fill-current\"\n        d=\"M10 0C4.477 0 0 4.477 0 10C0 15.523 4.477 20 10 20C15.523 20 20 15.523 20 10C20 4.477 15.523 0 10 0ZM13.7805 12.7195C14.0735 13.0125 14.0735 13.487 13.7805 13.78C13.634 13.927 13.442 14 13.25 14C13.058 14 12.866 13.927 12.7195 13.7805L10 11.0605L7.2805 13.78C7.134 13.927 6.942 14 6.75 14C6.558 14 6.366 13.927 6.2195 13.7805C5.9265 13.4875 5.9265 13.013 6.2195 12.72L8.9395 10L6.22 7.2805C5.927 6.9875 5.927 6.513 6.22 6.22C6.513 5.927 6.9875 5.927 7.2805 6.22L10 8.9395L12.7195 6.22C13.0125 5.927 13.487 5.927 13.78 6.22C14.073 6.513 14.073 6.9875 13.78 7.2805L11.0605 10L13.7805 12.7195Z\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n$width: 48px;\n$small-width: 32px;\n\n.loader {\n  position: relative;\n  margin: 0px auto;\n  width: $width;\n}\n\n.loader.is-small,\n.loader[data-size='small'] {\n  width: $small-width;\n}\n\n.loader[data-size='24'] {\n  width: 24px;\n}\n\n.rotating {\n  animation: rotate 2s linear infinite;\n  transform-origin: center center;\n}\n.rotating.complete {\n  animation-iteration-count: 1;\n}\n\n.backgroundPath {\n  stroke: transparent;\n  stroke-dasharray: 150;\n  stroke-dashoffset: 0;\n  stroke-linecap: round;\n}\n.backgroundPath.complete {\n  animation: backgroundPathStrokeDisappear 0.15s ease-in forwards;\n}\n\n.path {\n  stroke-dasharray: 1, 200;\n  stroke-dashoffset: 0;\n  animation: dash 1.5s ease-in-out infinite;\n  stroke-linecap: round;\n  .color-white & {\n    stroke: white;\n  }\n  .color-black & {\n    stroke: black;\n  }\n  .color-purple & {\n    stroke: #9466e8;\n  }\n  .color-yellow & {\n    stroke: #fec006;\n  }\n}\n.path.complete {\n  animation-iteration-count: 1;\n  stroke-dasharray: 89, 200;\n  stroke-dashoffset: -200px;\n}\n\n.check {\n  width: 100%;\n  height: 100%;\n  display: none;\n  .color-checkmark-white & {\n    stroke: white;\n  }\n  .color-checkmark-black & {\n    stroke: black;\n  }\n  .color-checkmark-purple & {\n    stroke: #9466e8;\n  }\n  .color-checkmark-yellow & {\n    stroke: #fec006;\n  }\n  stroke-width: 1px;\n  transform-origin: 50% 50%;\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  stroke-linecap: round;\n  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) forwards;\n  .color-checkmark-transparent-with-green-bg & {\n    color: #3dc731; //park-500\n    animation: fade-in 0.3s ease-in-out forwards;\n  }\n  .color-checkmark-transparent-with-red-bg & {\n    color: #f44336; //scarlet-500\n    animation: fade-in 0.3s ease-in-out forwards;\n  }\n}\n.check.complete {\n  display: block;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}\n\n@keyframes stroke {\n  0% {\n    stroke-dashoffset: 24px;\n  }\n  100% {\n    stroke-dashoffset: 0;\n  }\n}\n\n@keyframes backgroundPathStrokeDisappear {\n  0% {\n    stroke-dashoffset: 0;\n  }\n  100% {\n    stroke-dashoffset: 150;\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n</style>\n"],"names":["effectiveCheckmarkColor","computed","props","checkmarkColor","color","loaderSize","size","loaderStyle","width","value","height","strokeWidth","strokeColor","tailwindFlattenedColors","isLastFrameAnimationFinished","ref","hasReachedFullProgress","watch","progress","newValue","endAnimation","emit","circlePath","isCheckmark","nextTick","listener","removeEventListener","addEventListener","immediate","flush"],"mappings":"k4BAuCMA,EAA0BC,EAAS,IACnCC,EAAMC,gBAAkB,KAAaD,EAAMC,eACxCD,EAAME,KACd,EAIKC,EAAaJ,EAAS,IACnBC,EAAMI,IACd,EAEKC,EAAcN,EAAS,IAAM,CACjC,GAAKC,EAAMI,KACJ,MAAA,CACLE,MAAO,GAAGH,EAAWI,KAAK,KAC1BC,OAAQ,GAAGL,EAAWI,KAAK,KAE/B,CAAC,EAEKE,EAAcV,EAAS,IACtBC,EAAMI,MACPJ,EAAMI,KAAO,GACR,EAFe,CAKzB,EAEKM,EAAcX,EAAS,IAAM,CACjC,OAAQC,EAAME,MAAO,CACnB,IAAK,QACI,MAAA,QACT,IAAK,QACI,MAAA,QACT,IAAK,SACH,OAAOS,EAAwB,WAAW,EAC5C,IAAK,SACH,OAAOA,EAAwB,YAAY,EAC7C,QACS,MAAA,OACX,CACF,CAAC,EAEKC,EAA+BC,EAAI,EAAK,EACxCC,EAAyBD,EAAI,EAAK,EACxCE,EACE,IAAMf,EAAMgB,SACXC,GAAa,CACRA,IAAa,IACfH,EAAuBP,MAAQ,GAEnC,CACF,EAIA,SAASW,GAAqB,CAC5BN,EAA6BL,MAAQ,GACrCY,EAAK,0BAA0B,CACjC,CAEM,MAAAC,EAAaP,EAA2B,IAAI,EAClDE,OAAAA,EACE,IAAMf,EAAMqB,YACXJ,GAAa,CACZ,GAAKA,EAIL,IADAL,EAA6BL,MAAQ,GACjCP,EAAMgB,WAAa,MAAQF,EAAuBP,MAAO,CAC9CW,IACb,MACF,CACAI,EAAS,IAAM,OACT,GAAA,CAACF,EAAWb,MAAO,CACRW,IACb,MACF,CACA,MAAMK,EAAWA,IAAM,OACRL,KACFE,EAAAA,EAAAb,QAAAa,MAAAA,EAAOI,oBAAoB,qBAAsBD,KAEnDH,EAAAA,EAAAb,QAAAa,MAAAA,EAAOK,iBAAiB,qBAAsBF,EAC3D,CAAC,EACH,EACA,CAAEG,UAAW,GAAMC,MAAO,MAAO,CACnC"}