{"version":3,"file":"ResultsPage-Tlgjgyre.js","sources":["../../src/components/dialogs/results/SegmentsTabPaywallDialog.vue","../../src/components/dialogs/participants/ParticipantsTabPaywallDialog.vue","../../src/components/dialogs/results/ClusterPaywallDialog.vue","../../src/views/SurveyDashboard/ResultsTab/ResultsPage.vue"],"sourcesContent":["<template>\n  <v-dialog v-model=\"dialog\" max-width=\"600\">\n    <template #activator=\"{ props: dialogProps }\">\n      <div v-bind=\"dialogProps\">\n        <slot></slot>\n      </div>\n    </template>\n\n    <v-card title=\"See what each group of participants cares about most\">\n      <v-card-text>\n        <div style=\"position: relative; padding-bottom: 56.25%; height: 0\">\n          <iframe\n            style=\"\n              position: absolute;\n              top: 0;\n              left: 0;\n              width: 100%;\n              height: 100%;\n              border: 0;\n            \"\n            src=\"https://www.tella.tv/video/clth9068z014i0fla27jb5d6b/embed?b=0&title=1&a=1&loop=0&t=0&muted=0&wt=0\"\n            allowfullscreen\n            allowtransparency\n          ></iframe>\n        </div>\n      </v-card-text>\n      <v-card-text>\n        The Segments Tab shows you the ranking scores broken down by each group\n        of participants in your survey, helping quickly see which segments have\n        the strongest preferences.\n      </v-card-text>\n\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn\n          color=\"gray\"\n          href=\"https://knowledge.opinionx.co/en/articles/8626805-segments-tab-view-the-scores-for-every-possible-segment-in-one-table\"\n          target=\"_blank\"\n        >\n          How It Works\n        </v-btn>\n        <v-btn variant=\"elevated\" color=\"primary\" to=\"/dashboard/upgrade\">\n          Unlock This Feature\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\n\nconst dialog = ref(false);\n</script>\n","<template>\n  <v-dialog v-model=\"dialog\" max-width=\"600\">\n    <template #activator=\"{ props: dialogProps }\">\n      <div v-bind=\"dialogProps\">\n        <slot></slot>\n      </div>\n    </template>\n\n    <v-card title=\"View, edit, and analyze all participant data in one place\">\n      <v-card-text>\n        <div style=\"position: relative; padding-bottom: 56.25%; height: 0\">\n          <iframe\n            style=\"\n              position: absolute;\n              top: 0;\n              left: 0;\n              width: 100%;\n              height: 100%;\n              border: 0;\n            \"\n            src=\"https://www.tella.tv/video/clrt42cf601ro0fl2gqlt77k4/embed?b=0&title=0&a=1&loop=0&t=0&muted=0\"\n            allowfullscreen\n            allowtransparency\n          ></iframe>\n        </div>\n      </v-card-text>\n      <v-card-text>\n        The Participants Tab is the home of all data collected about your survey\n        respondents. View what they voted for, filter to see who belongs to each\n        segment, and sort to identify who to invite for follow up interviews.\n      </v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn\n          href=\"https://knowledge.opinionx.co/en/articles/8279034-participants-tab-view-all-participant-data-and-answers-in-one-simple-table\"\n          target=\"_blank\"\n        >\n          View Example\n        </v-btn>\n        <v-btn variant=\"elevated\" color=\"primary\" to=\"/dashboard/upgrade\">\n          Unlock This Feature ➡️\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\n\nconst dialog = ref(false);\n</script>\n","<template>\n  <v-dialog v-model=\"dialog\" max-width=\"600\">\n    <template #activator=\"{ props: dialogProps }\">\n      <div v-bind=\"dialogProps\">\n        <slot></slot>\n      </div>\n    </template>\n\n    <v-card title=\"See which participants share the same priorities\">\n      <v-card-text>\n        <v-img src=\"@/assets/img/survey-dashboard/clusters-tab.webp\" />\n      </v-card-text>\n      <v-card-text>\n        Use our AI-powered clustering analysis to group participants into\n        like-minded clusters that care about the same stuff. This feature gives\n        you advanced data science capabilities at the push of a button and is\n        ideally suited to creating data-driven user personas.\n      </v-card-text>\n      <v-card-actions>\n        <v-spacer></v-spacer>\n        <v-btn\n          href=\"https://knowledge.opinionx.co/en/articles/8626808-cluster-tab-group-participants-together-with-similar-voting-patterns\"\n          target=\"_blank\"\n        >\n          See how it works\n        </v-btn>\n        <v-btn variant=\"elevated\" color=\"primary\" to=\"/dashboard/upgrade\">\n          Unlock this feature\n        </v-btn>\n      </v-card-actions>\n    </v-card>\n  </v-dialog>\n</template>\n\n<script setup lang=\"ts\">\nconst dialog = defineModel<boolean>();\n</script>\n","<template>\n  <v-app-bar density=\"compact\" elevation=\"2\">\n    <v-spacer></v-spacer>\n    <v-tabs\n      align-tabs=\"center\"\n      class=\"text-center text-primary-lighten-3\"\n      color=\"primary\"\n    >\n      <template v-for=\"(tab, key) in tabs\">\n        <v-tab\n          v-if=\"!tab.premium || surveyStore.isScaleOrAbove\"\n          :key\n          class=\"font-weight-regular\"\n          selected-class=\"font-weight-medium v-tab--selected text-primary\"\n          :value=\"tab.title\"\n          :to=\"{ name: tab.routeName }\"\n          replace\n        >\n          {{ tab.title }}\n        </v-tab>\n        <component :is=\"tab.dialogComponent\" v-else :key>\n          <v-tab\n            class=\"font-weight-regular\"\n            selected-class=\"font-weight-medium v-tab--selected text-primary\"\n            :value=\"defaultTab.title\"\n          >\n            {{ tab.title }}\n          </v-tab>\n        </component>\n      </template>\n    </v-tabs>\n    <v-spacer></v-spacer>\n  </v-app-bar>\n  <router-view v-slot=\"{ Component }\">\n    <Transition :name=\"`slide-${direction}`\">\n      <keep-alive>\n        <component :is=\"Component\" />\n      </keep-alive>\n    </Transition>\n  </router-view>\n</template>\n\n<script setup lang=\"ts\">\nimport { useSurveyStore } from '@/stores/survey';\nimport SegmentsTabPaywallDialog from '@/components/dialogs/results/SegmentsTabPaywallDialog.vue';\nimport ParticipantsTabPaywallDialog from '@/components/dialogs/participants/ParticipantsTabPaywallDialog.vue';\nimport ClusterPaywallDialog from '@/components/dialogs/results/ClusterPaywallDialog.vue';\nimport ComparisonPaywallDialog from '@/components/dialogs/results/ComparisonPaywallDialog.vue';\nimport { onBeforeRouteUpdate } from 'vue-router';\nimport { ref } from 'vue';\n\nconst surveyStore = useSurveyStore();\n\nconst tabs = [\n  {\n    title: 'Overview',\n    routeName: 'results-overview',\n    premium: false,\n  },\n  {\n    title: 'Participants',\n    routeName: 'results-participants',\n    premium: true,\n    dialogComponent: ParticipantsTabPaywallDialog,\n  },\n  {\n    title: 'Segments',\n    routeName: 'results-segments',\n    premium: true,\n    dialogComponent: SegmentsTabPaywallDialog,\n  },\n  {\n    title: 'compare',\n    routeName: 'results-compare',\n    premium: true,\n    dialogComponent: ComparisonPaywallDialog,\n  },\n  {\n    title: 'cluster',\n    routeName: 'results-cluster',\n    premium: true,\n    dialogComponent: ClusterPaywallDialog,\n  },\n] as const;\n\nconst defaultTab = tabs[0];\n\nconst direction = ref<'right' | 'left'>('right');\n\nonBeforeRouteUpdate((to, from, next) => {\n  const newIndex = tabs.findIndex((tab) => tab.routeName === to.name);\n  const oldIndex = tabs.findIndex((tab) => tab.routeName === from.name);\n  direction.value = newIndex > oldIndex ? 'right' : 'left';\n  next();\n});\n</script>\n\n<style>\n.slide-right-enter-active {\n  animation: slide-from-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n}\n.slide-right-leave-active {\n  animation: slide-to-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n}\n@keyframes slide-to-left {\n  0% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(-1000px);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-from-right {\n  0% {\n    transform: translateX(1000px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0px);\n    opacity: 1;\n  }\n}\n\n.slide-left-enter-active {\n  animation: slide-from-left 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n}\n.slide-left-leave-active {\n  animation: slide-to-right 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;\n}\n@keyframes slide-from-left {\n  0% {\n    transform: translateX(-1000px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n@keyframes slide-to-right {\n  0% {\n    transform: translateX(0px);\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(1000px);\n    opacity: 0;\n  }\n}\n</style>\n"],"names":["dialog","ref","_useModel","__props","surveyStore","useSurveyStore","tabs","ParticipantsTabPaywallDialog","SegmentsTabPaywallDialog","ComparisonPaywallDialog","ClusterPaywallDialog","defaultTab","direction","onBeforeRouteUpdate","to","from","next","newIndex","tab","oldIndex"],"mappings":"y9BAoDM,MAAAA,EAASC,EAAI,EAAK,gxCCFlB,MAAAD,EAASC,EAAI,EAAK,skCCflB,MAAAD,EAASE,EAAqBC,EAAA,YAAA,yhCCgBpC,MAAMC,EAAcC,EAAe,EAE7BC,EAAO,CACX,CACE,MAAO,WACP,UAAW,mBACX,QAAS,EACX,EACA,CACE,MAAO,eACP,UAAW,uBACX,QAAS,GACT,gBAAiBC,CACnB,EACA,CACE,MAAO,WACP,UAAW,mBACX,QAAS,GACT,gBAAiBC,CACnB,EACA,CACE,MAAO,UACP,UAAW,kBACX,QAAS,GACT,gBAAiBC,CACnB,EACA,CACE,MAAO,UACP,UAAW,kBACX,QAAS,GACT,gBAAiBC,CAAA,CAErB,EAEMC,EAAaL,EAAK,CAAC,EAEnBM,EAAYX,EAAsB,OAAO,EAE3B,OAAAY,EAAA,CAACC,EAAIC,EAAMC,IAAS,CAChC,MAAAC,EAAWX,EAAK,UAAWY,GAAQA,EAAI,YAAcJ,EAAG,IAAI,EAC5DK,EAAWb,EAAK,UAAWY,GAAQA,EAAI,YAAcH,EAAK,IAAI,EAC1DH,EAAA,MAAQK,EAAWE,EAAW,QAAU,OAC7CH,EAAA,CAAA,CACN"}