{"version":3,"file":"ExpertiseTab-DS1LghDq.js","sources":["../../../app/javascript/shared/components/tabs/ExpertiseTabs/ExpertiseTabs.vue","../../../app/javascript/shared/components/tabs/ExpertiseTabs/ExpertiseTab.vue"],"sourcesContent":["<template>\n  <div>\n    <ul\n      class=\"tw-flex tw-w-max tw-cursor-pointer tw-rounded-full tw-bg-neutral-50 tw-p-0.5 tw-text-xs\"\n      :class=\"listClasses\"\n    >\n      <li v-for=\"tab in tabs\" :key=\"tab.id\">\n        <button\n          @click=\"selectTab(tab.id)\"\n          class=\"tw-rounded-full tw-px-3 tw-py-1 tw-font-semibold tw-antialiased focus-visible:tw-outline-none focus-visible:tw-ring-1 focus-visible:tw-ring-secondary-500 focus-visible:tw-ring-offset-0\"\n          :class=\"[\n            isTabSelected(tab.id)\n              ? 'tw-bg-white tw-text-neutral-900'\n              : 'tw-text-neutral-500',\n          ]\"\n        >\n          {{ tab.title }}\n        </button>\n      </li>\n    </ul>\n    <div ref=\"slotsRef\">\n      <slot />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { onMounted, provide, ref } from 'vue'\n\ndefineProps({\n  listClasses: {\n    type: String,\n    default: '',\n  },\n})\n\nconst slotsRef = ref(null)\n\nconst tabs = ref([])\nconst activeTab = ref(null)\nprovide('activeTab', activeTab)\n\nconst selectTab = (id) => {\n  activeTab.value = tabs.value.find((tab) => tab.id === id)\n}\n\nconst isTabSelected = (id) => {\n  return activeTab.value.id === id\n}\n\nonMounted(() => {\n  tabs.value = Array.from(slotsRef.value.children)\n    .filter((element) => {\n      const componentName = element.getAttribute('data-component-name')\n      return componentName === 'ExpertiseTab'\n    })\n    .map((element) => ({\n      id: element.id,\n      title: element.getAttribute('data-title'),\n    }))\n\n  activeTab.value = tabs.value[0]\n})\n</script>\n","<template>\n  <div\n    :id=\"id\"\n    data-component-name=\"ExpertiseTab\"\n    :data-title=\"title\"\n    v-show=\"isActive\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script setup>\nimport { getUniqueId } from '@/shared/utils/uniqueId.js'\nimport { computed, inject } from 'vue'\n\ndefineProps({\n  title: {\n    type: String,\n    required: true,\n  },\n})\n\nconst id = `growthmentor-expertise-tab-${getUniqueId()}`\nconst activeTab = inject('activeTab')\n\nconst isActive = computed(() => activeTab.value?.id === id)\n\ndefineExpose({\n  id,\n})\n</script>\n"],"names":["slotsRef","ref","tabs","activeTab","provide","selectTab","id","tab","isTabSelected","onMounted","element","getUniqueId","inject","isActive","computed","_a","__expose"],"mappings":"gQAoCA,MAAMA,EAAWC,EAAI,IAAI,EAEnBC,EAAOD,EAAI,EAAE,EACbE,EAAYF,EAAI,IAAI,EAC1BG,EAAQ,YAAaD,CAAS,EAE9B,MAAME,EAAaC,GAAO,CACxBH,EAAU,MAAQD,EAAK,MAAM,KAAMK,GAAQA,EAAI,KAAOD,CAAE,CAC1D,EAEME,EAAiBF,GACdH,EAAU,MAAM,KAAOG,EAGhC,OAAAG,EAAU,IAAM,CACdP,EAAK,MAAQ,MAAM,KAAKF,EAAS,MAAM,QAAQ,EAC5C,OAAQU,GACeA,EAAQ,aAAa,qBAAqB,IACvC,cAC1B,EACA,IAAKA,IAAa,CACjB,GAAIA,EAAQ,GACZ,MAAOA,EAAQ,aAAa,YAAY,CAC9C,EAAM,EAEJP,EAAU,MAAQD,EAAK,MAAM,CAAC,CAChC,CAAC,gsBCxCD,MAAMI,EAAK,8BAA8BK,EAAW,CAAE,GAChDR,EAAYS,EAAO,WAAW,EAE9BC,EAAWC,EAAS,IAAM,OAAA,QAAAC,EAAAZ,EAAU,QAAV,YAAAY,EAAiB,MAAOT,EAAE,EAE1D,OAAAU,EAAa,CACX,GAAAV,CACF,CAAC"}