{"version":3,"file":"UserCompleteProfile-CSySrn_i.js","sources":["../../../app/javascript/shared/components/UserCompleteProfile.vue"],"sourcesContent":["<template>\n  <Disclosure\n    class=\"tw-w-full tw-rounded-xl tw-border tw-border-neutral-900 tw-bg-neutral-800\"\n  >\n    <template #activator=\"{ toggle, isActive, ariaExpanded, ariaControls }\">\n      <button\n        @click=\"toggle\"\n        class=\"tw-w-full tw-p-4\"\n        :aria-expanded=\"ariaExpanded\"\n        :aria-controls=\"ariaControls\"\n      >\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-space-x-4\">\n          <div class=\"tw-flex tw-items-center tw-space-x-4\">\n            <div\n              class=\"tw-flex tw-h-14 tw-w-14 tw-shrink-0 tw-items-center tw-justify-center tw-rounded-full\"\n              :style=\"{\n                background: `conic-gradient(#4AC074 ${progressInPercent}%, 0, #4e5b6d ${\n                  100 - progressInPercent\n                }%)`,\n              }\"\n            >\n              <div\n                class=\"tw-flex tw-h-12 tw-w-12 tw-items-center tw-justify-center tw-rounded-full tw-bg-neutral-800 tw-text-sm tw-text-neutral-300\"\n              >\n                {{ progressInPercent }}%\n              </div>\n            </div>\n            <div class=\"tw-space-y-1 tw-text-left\">\n              <div class=\"tw-text-sm tw-text-neutral-300\">\n                Complete your profile to activate your account\n              </div>\n              <div\n                v-if=\"firstItemToComplete\"\n                class=\"tw-font-semibold tw-text-white\"\n              >\n                {{ firstItemToComplete.description }}\n              </div>\n            </div>\n          </div>\n\n          <ArrowDownIcon\n            class=\"tw-h-4 tw-w-4 tw-shrink-0 tw-text-neutral-400 tw-transition-transform tw-duration-300\"\n            :class=\"{ 'tw-rotate-180': isActive }\"\n          />\n        </div>\n      </button>\n    </template>\n    <template #content=\"{ id }\">\n      <div\n        :id=\"id\"\n        class=\"tw-space-y-2 tw-border-t tw-border-neutral-700 tw-p-4 tw-text-neutral-500\"\n      >\n        <component\n          v-for=\"(element, index) in mergedProfileCompletion\"\n          :key=\"index\"\n          :is=\"element.status ? 'div' : 'InertiaLink'\"\n          :href=\"element.href\"\n          class=\"tw-flex tw-items-center tw-text-sm sm:tw-text-base\"\n          :class=\"{ 'tw-font-semibold tw-text-white': !element.status }\"\n        >\n          <CheckIcon\n            class=\"tw-mr-4 tw-h-4 tw-w-4\"\n            :class=\"[\n              element.status ? 'tw-text-success-300' : 'tw-text-neutral-500',\n            ]\"\n          />\n          {{ element.description }}\n          <TriangleRight\n            v-if=\"!element.status\"\n            class=\"tw-ml-2 tw-h-3 tw-w-3 tw-text-neutral-500\"\n          />\n        </component>\n      </div>\n    </template>\n  </Disclosure>\n</template>\n\n<script setup>\nimport ArrowDownIcon from '@/assets/images/icons/arrow-down.svg'\nimport CheckIcon from '@/assets/images/icons/check.svg'\nimport TriangleRight from '@/assets/images/icons/arrow-right.svg'\nimport Disclosure from '@/shared/components/Disclosure.vue'\nimport { useUserProfileCompletion } from '@/shared/composables/useUserProfileCompletion.js'\n\nconst { firstItemToComplete, mergedProfileCompletion, progressInPercent } =\n  useUserProfileCompletion()\n</script>\n"],"names":["firstItemToComplete","mergedProfileCompletion","progressInPercent","useUserProfileCompletion"],"mappings":"mtBAoFA,KAAM,CAAE,oBAAAA,EAAqB,wBAAAC,EAAyB,kBAAAC,CAAmB,EACvEC,EAA0B"}