{"version":3,"file":"OzLoadingSpinnerWithCheckmark-759acd8e.js","sources":["../../../app/javascript/library/v4/components/OzLoadingSpinnerWithCheckmark.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { __ } from '@@/bits/intl'\nimport { tailwindFlattenedColors } from '@@/bits/tailwind_config'\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      | 'transparent-with-yellow-bg'\n      | 'transparent-with-purple-bg'\n    checkmarkIcon?: 'checkmark' | 'error'\n    variation?: 'default' | 'dashed' | 'snackbar'\n    darkMode?: boolean | 'auto'\n    isCheckmark?: boolean\n    progress?: number | null\n    spinnerLabel?: string\n    checkmarkLabel?: string\n    xSpinnerRail?: boolean\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    xSpinnerRail: false,\n  },\n)\n\nconst effectiveCheckmarkColor = computed(() => {\n  if (props.checkmarkColor != null) return props.checkmarkColor\n  if (props.variation === 'snackbar') {\n    return props.darkMode ? 'transparent-with-yellow-bg' : 'transparent-with-purple-bg'\n  }\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  if (props.variation === 'snackbar') return 'inherit'\n\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 = computed(() => {\n  return props.progress != null && props.progress === 1\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        'color-checkmark-transparent-with-yellow-bg': effectiveCheckmarkColor === 'transparent-with-yellow-bg',\n        'color-checkmark-transparent-with-purple-bg': effectiveCheckmarkColor === 'transparent-with-purple-bg',\n        'color-checkmark-transparent-with-yellow-bg dark:color-checkmark-transparent-with-purple-bg':\n          variation === 'snackbar' && darkMode === 'auto',\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          // Once the checkmark appears, this should not be visible\n          hidden: isCheckmark && isLastFrameAnimationFinished,\n          'stroke-black': variation === 'snackbar' && darkMode === true,\n          'stroke-white': variation === 'snackbar' && darkMode === false,\n          'stroke-white dark:stroke-black': variation === 'snackbar' && darkMode === 'auto',\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=\"strokeColor\"\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          'stroke-black': variation === 'snackbar' && darkMode === true,\n          'stroke-white': variation === 'snackbar' && darkMode === false,\n          'stroke-white dark:stroke-black': variation === 'snackbar' && darkMode === 'auto',\n        }\"\n        viewBox=\"25 25 50 50\"\n        aria-hidden=\"true\"\n      >\n        <!-- Spinner rail -->\n        <circle\n          v-if=\"xSpinnerRail\"\n          class=\"transition-all duration-100 ease-in-out motion-reduce:transition-none spinner-rail\"\n          cx=\"50\"\n          cy=\"50\"\n          r=\"20\"\n          fill=\"none\"\n          :stroke-width=\"strokeWidth\"\n          stroke-dasharray=\"150\"\n          stroke-linecap=\"round\"\n          stroke-miterlimit=\"10\"\n        ></circle>\n        <!-- Spinner progress bar -->\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=\"\n        checkmarkColor !== 'transparent-with-green-bg' &&\n        checkmarkColor !== 'transparent-with-red-bg' &&\n        variation !== 'snackbar'\n      \"\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    <svg\n      v-else-if=\"variation === 'snackbar'\"\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      <circle cx=\"10\" cy=\"10\" r=\"10\" class=\"fill-current\" />\n      <path\n        d=\"M8.25 12.2929L6.35355 10.3964C6.15829 10.2012 5.84171 10.2012 5.64645 10.3964C5.45118 10.5917 5.45118 10.9083 5.64645 11.1036L7.89645 13.3536C8.09171 13.5488 8.40829 13.5488 8.60355 13.3536L14.1036 7.85355C14.2988 7.65829 14.2988 7.34171 14.1036 7.14645C13.9083 6.95118 13.5917 6.95118 13.3964 7.14645L8.25 12.2929Z\"\n        class=\"checkmark-path\"\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  .color-checkmark-transparent-with-yellow-bg & {\n    color: rgba(29, 29, 29, 0.2); //canary-600\n    animation: fade-in 0.3s ease-in-out forwards;\n  }\n  .color-checkmark-transparent-with-purple-bg & {\n    color: rgba(29, 29, 29, 0.2);\n    animation: fade-in 0.3s ease-in-out forwards;\n  }\n}\n.check.complete {\n  display: block;\n}\n\n.spinner-rail {\n  stroke: rgba(0, 0, 0, 0.38);\n}\n\n.checkmark-path {\n  fill: white;\n\n  @media (prefers-color-scheme: dark) {\n    fill: black;\n  }\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","variation","darkMode","color","loaderSize","size","loaderStyle","width","value","height","strokeWidth","strokeColor","tailwindFlattenedColors","isLastFrameAnimationFinished","ref","hasReachedFullProgress","progress","endAnimation","emit","circlePath","watch","isCheckmark","newValue","nextTick","listener","removeEventListener","addEventListener","immediate","flush"],"mappings":"g7BA2CMA,EAA0BC,EAAS,IACnCC,EAAMC,gBAAkB,KAAaD,EAAMC,eAC3CD,EAAME,YAAc,WACfF,EAAMG,SAAW,6BAA+B,6BAElDH,EAAMI,KACd,EAIKC,EAAaN,EAAS,IACnBC,EAAMM,IACd,EAEKC,EAAcR,EAAS,IAAM,CACjC,GAAKC,EAAMM,KACJ,MAAA,CACLE,MAAO,GAAGH,EAAWI,KAAK,KAC1BC,OAAQ,GAAGL,EAAWI,KAAK,KAE/B,CAAC,EAEKE,EAAcZ,EAAS,IACtBC,EAAMM,MACPN,EAAMM,KAAO,GACR,EAFe,CAKzB,EAEKM,EAAcb,EAAS,IAAM,CACjC,GAAIC,EAAME,YAAc,WAAmB,MAAA,UAE3C,OAAQF,EAAMI,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,EAAyBjB,EAAS,IAC/BC,EAAMiB,UAAY,MAAQjB,EAAMiB,WAAa,CACrD,EAID,SAASC,GAAqB,CAC5BJ,EAA6BL,MAAQ,GACrCU,EAAK,0BAA0B,CACjC,CAEM,MAAAC,EAAaL,EAA2B,IAAI,EAClDM,OAAAA,EACE,IAAMrB,EAAMsB,YACXC,GAAa,CACZ,GAAKA,EAIL,IADAT,EAA6BL,MAAQ,GACjCT,EAAMiB,WAAa,MAAQD,EAAuBP,MAAO,CAC9CS,IACb,MACF,CACAM,EAAS,IAAM,OACT,GAAA,CAACJ,EAAWX,MAAO,CACRS,IACb,MACF,CACA,MAAMO,EAAWA,IAAM,OACRP,KACFE,EAAAA,EAAAX,QAAAW,MAAAA,EAAOM,oBAAoB,qBAAsBD,KAEnDL,EAAAA,EAAAX,QAAAW,MAAAA,EAAOO,iBAAiB,qBAAsBF,EAC3D,CAAC,EACH,EACA,CAAEG,UAAW,GAAMC,MAAO,MAAO,CACnC"}