{"version":3,"file":"SurfacePostPollResult-b8d10efd.js","sources":["../../../app/javascript/vuecomponents/SurfacePostPollBottomSection.vue","../../../app/javascript/vuecomponents/SurfacePostPollChoice.vue","../../../app/javascript/vuecomponents/SurfacePostPollQuestion.vue","../../../app/javascript/vuecomponents/SurfacePostPollResult.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { __, n__ } from '@@/bits/intl'\nimport OzContainedButton, { OzContainedButtonSizePreset } from '@@/library/v4/components/OzContainedButton.vue'\nimport OzPlainButton, {\n  OzPlainButtonColorScheme,\n  OzPlainButtonSizePreset,\n} from '@@/library/v4/components/OzPlainButton.vue'\nimport { useResizeObserver } from '@@/vuecomposables/resize_observer'\nimport { debounce } from 'lodash-es'\nimport type { Ref } from 'vue'\nimport { ref, toRefs } from 'vue'\n\nconst emit = defineEmits<{\n  (e: 'toggle-poll-results'): void\n  (e: 'vote'): void\n  (e: 'resize', { width, height }: { width: number; height: number }): void\n  (e: 'dblclick', event: MouseEvent): void\n}>()\n\nconst props = withDefaults(\n  defineProps<{\n    totalVotesCount: number\n    isPollClosed: boolean\n    isShowingPollResults: boolean\n    darkMode?: boolean | 'auto'\n    isVoteButtonDisabled: boolean\n    xVoteButton: boolean\n    xResultsToggle: boolean\n    isSlideshow?: boolean\n    isExpanded?: boolean\n    isStream?: boolean\n    pollScaleMultiplier?: number\n  }>(),\n  { darkMode: 'auto', isExpanded: false, isSlideShow: false, isStream: false, pollScaleMultiplier: 1 },\n)\nconst {\n  darkMode,\n  isPollClosed,\n  totalVotesCount,\n  isShowingPollResults,\n  isVoteButtonDisabled,\n  xVoteButton,\n  xResultsToggle,\n  isExpanded,\n  isSlideshow,\n  isStream,\n} = toRefs(props)\n\nconst togglePollResults = () => {\n  emit('toggle-poll-results')\n}\n\nconst bottomSection = ref<HTMLElement>() as Ref<HTMLElement>\nconst contentTooWide = ref(false)\nuseResizeObserver(\n  bottomSection,\n  debounce(() => {\n    if (bottomSection.value) {\n      const width = bottomSection.value.clientWidth\n      const height = bottomSection.value.clientHeight\n\n      // 160 and 143 are max widths of the bottom section that still allow all content to be in the same row\n      contentTooWide.value = (width < 160 && !isPollClosed.value) || (width < 143 && isPollClosed.value)\n      emit('resize', {\n        width,\n        height,\n      })\n    }\n  }, 50),\n)\n</script>\n<template>\n  <div\n    ref=\"bottomSection\"\n    :class=\"[\n      'w-full box-border',\n      !isStream && !isSlideshow && !isExpanded && 'ps-3 pe-2 py-2',\n      isStream && !isSlideshow ? 'px-4 py-2' : isExpanded && 'p-2',\n      isSlideshow && [\n        {\n          'ps-9 pe-5 py-5': pollScaleMultiplier === 2.5,\n          'ps-7 pe-4 py-4': pollScaleMultiplier === 2,\n          'ps-6 pe-2 py-2': pollScaleMultiplier === 1,\n          'bg-white-100': darkMode === false,\n          'bg-nightfall-900': darkMode === true,\n          'bg-white-100 dark:bg-nightfall-900': darkMode === 'auto',\n        },\n      ],\n      isExpanded || isSlideshow ? 'min-h-12' : 'min-h-10',\n      isExpanded || isSlideshow ? 'items-start' : 'items-center',\n      contentTooWide ? 'flex flex-col space-y-3' : 'flex flex-wrap justify-between',\n    ]\"\n    @dblclick.self=\"$emit('dblclick', $event)\"\n  >\n    <div\n      :class=\"[\n        isStream ? 'text-body-small' : 'text-body-extra-small',\n        contentTooWide ? 'flex flex-col items-start w-full space-y-3' : 'flex flex-wrap items-center space-x-1',\n        {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n      ]\"\n    >\n      <span data-testid=\"surfacePostPollVoteCount\">\n        {{\n          n__('%{totalVotesCount} vote', '%{totalVotesCount} votes', totalVotesCount, {\n            totalVotesCount: totalVotesCount,\n          })\n        }}\n      </span>\n      <template v-if=\"xResultsToggle\">\n        <span\n          v-if=\"!contentTooWide\"\n          :class=\"[\n            'font-semibold',\n            {\n              'text-dark-text-300': darkMode === false,\n              'text-light-text-300': darkMode === true,\n              'text-dark-text-300 dark:text-light-text-300': darkMode === 'auto',\n            },\n          ]\"\n          >•</span\n        >\n        <OzPlainButton\n          :class=\"[\n            'font-semibold rounded-xl focus-visible:ring-2 px-0',\n            {\n              'text-dark-text-200': darkMode === false,\n              'text-light-text-200': darkMode === true,\n              'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n            },\n          ]\"\n          :tabindex=\"0\"\n          :dark-mode=\"darkMode\"\n          :text=\"isShowingPollResults ? __('Hide Results') : __('Show Results')\"\n          :color-scheme=\"OzPlainButtonColorScheme.Secondary\"\n          :size-preset=\"OzPlainButtonSizePreset.Bare\"\n          :data-testid=\"isShowingPollResults ? 'surfacePostPollHideResultsButton' : 'surfacePostPollShowResultsButton'\"\n          @click=\"togglePollResults\"\n          @pointerdown.stop\n        />\n      </template>\n      <template v-else-if=\"isPollClosed\">\n        <span\n          v-if=\"!contentTooWide\"\n          :class=\"{\n            'text-dark-text-300': darkMode === false,\n            'text-light-text-300': darkMode === true,\n            'text-dark-text-300 dark:text-light-text-300': darkMode === 'auto',\n          }\"\n          >•</span\n        >\n        <span\n          data-testid=\"surfacePostPollClosedText\"\n          :class=\"{\n            'text-dark-text-200': darkMode === false,\n            'text-light-text-200': darkMode === true,\n            'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n          }\"\n        >\n          {{ __('Poll closed') }}\n        </span>\n      </template>\n    </div>\n\n    <OzContainedButton\n      v-if=\"xVoteButton\"\n      :class=\"['no-drag', contentTooWide && 'w-full']\"\n      data-testid=\"surfacePostPollVoteButton\"\n      :size-preset=\"\n        isSlideshow || isExpanded || isStream ? OzContainedButtonSizePreset.H32px : OzContainedButtonSizePreset.H24px\n      \"\n      :dark-mode=\"darkMode\"\n      :text=\"__('Vote')\"\n      :label=\"__('Vote')\"\n      :disabled=\"isVoteButtonDisabled\"\n      @click.stop=\"emit('vote')\"\n      @pointerdown.stop\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { type PollTailwindClasses } from '@@/bits/post_color'\nimport type { Id } from '@@/types'\nimport OzDivider, { OzDividerColorScheme } from '@@/library/v4/components/OzDivider.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport { computed, toRefs } from 'vue'\n\nconst emit = defineEmits<{\n  (e: 'select', choiceId: Id): void\n}>()\n\nconst props = withDefaults(\n  defineProps<{\n    selected: boolean\n    choiceText: string\n    choiceId: Id\n    index: number\n    numChoices: number\n    darkMode?: boolean | 'auto'\n    displayMode?: 'expanded' | 'default' | 'slideshow'\n    isStream?: boolean\n    pollColors: PollTailwindClasses\n    interactionsDisabled?: SurfacePostPollChoiceInteractionsDisabled\n    pollScaleMultiplier?: number\n  }>(),\n  {\n    darkMode: 'auto',\n    displayMode: 'default',\n    isStream: false,\n    interactionsDisabled: SurfacePostPollChoiceInteractionsDisabled.None,\n    pollScaleMultiplier: 1,\n  },\n)\n\nconst {\n  selected,\n  choiceText,\n  choiceId,\n  darkMode,\n  displayMode,\n  isStream,\n  numChoices,\n  pollColors,\n  index,\n  interactionsDisabled,\n  pollScaleMultiplier,\n} = toRefs(props)\n\nconst isDisplayModeExpanded = computed(() => displayMode.value === 'expanded')\nconst isDisplayModeSlideshow = computed(() => displayMode.value === 'slideshow')\nconst isDisplayModeExpandedOrSlideshow = computed(() => isDisplayModeExpanded.value || isDisplayModeSlideshow.value)\n\nconst onSelect = () => {\n  if (\n    interactionsDisabled.value === SurfacePostPollChoiceInteractionsDisabled.All ||\n    interactionsDisabled.value === SurfacePostPollChoiceInteractionsDisabled.Select\n  )\n    return\n  emit('select', choiceId.value)\n}\n</script>\n\n<script lang=\"ts\">\nexport enum SurfacePostPollChoiceInteractionsDisabled {\n  All,\n  Select,\n  None,\n}\n</script>\n\n<template>\n  <div\n    :data-testid=\"`surfacePostPollChoiceButton${index + 1}`\"\n    :class=\"[\n      'flex flex-col cursor-pointer mx-1 no-drag no-highlight-color',\n      interactionsDisabled === SurfacePostPollChoiceInteractionsDisabled.None\n        ? 'cursor-pointer'\n        : 'pointer-events-none',\n    ]\"\n    @click=\"onSelect\"\n    @keydown.enter=\"onSelect\"\n  >\n    <div\n      :tabindex=\"interactionsDisabled === SurfacePostPollChoiceInteractionsDisabled.None ? 0 : -1\"\n      :class=\"[\n        'flex items-center py-2',\n        isDisplayModeSlideshow ? 'rounded-2xl' : 'rounded-xl',\n        {\n          'ps-7.5': isDisplayModeSlideshow && pollScaleMultiplier === 2.5,\n          'ps-6': isDisplayModeSlideshow && pollScaleMultiplier === 2,\n          'ps-3': (!isDisplayModeSlideshow && isStream) || (isDisplayModeSlideshow && pollScaleMultiplier === 1),\n          'ps-2': !isDisplayModeSlideshow && !isStream,\n        },\n        interactionsDisabled === SurfacePostPollChoiceInteractionsDisabled.None && {\n          [pollColors.pollChoiceHoverBackground.light]: darkMode === false,\n          [pollColors.pollChoiceHoverBackground.dark]: darkMode === true,\n          [pollColors.pollChoiceHoverBackground.auto]: darkMode === 'auto',\n        },\n        interactionsDisabled === SurfacePostPollChoiceInteractionsDisabled.None && 'focus-visible:ring-2 active:ring-2',\n        interactionsDisabled === SurfacePostPollChoiceInteractionsDisabled.None && {\n          'active:ring-grape-500 focus-visible:ring-grape-500': darkMode === false,\n          'active:ring-canary-500 focus-visible:ring-canary-500': darkMode === true,\n          'active:ring-grape-500 dark:active:ring-canary-500 focus-visible:ring-grape-500 dark:focus-visible:ring-canary-500':\n            darkMode === 'auto',\n        },\n        index === numChoices - 1 && 'mb-1',\n      ]\"\n      :aria-checked=\"selected\"\n    >\n      <OzIcon\n        :class=\"[\n          'pointer-events-none',\n          selected\n            ? {\n                'text-grape-500': darkMode === false,\n                'text-canary-500': darkMode === true,\n                'text-grape-500 dark:text-canary-500': darkMode === 'auto',\n              }\n            : {\n                'text-dark-text-200': darkMode === false,\n                'text-light-text-200': darkMode === true,\n                'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n              },\n        ]\"\n        :name=\"selected ? 'radio_selected' : 'radio_unselected'\"\n        :size=\"isDisplayModeSlideshow ? Math.max(20, 10 * pollScaleMultiplier) : 16\"\n      />\n      <p\n        :data-testid=\"`surfacePostPollChoiceText${index + 1}`\"\n        :class=\"[\n          'ps-3 break-word-anywhere',\n          {\n            'pe-7.5': isDisplayModeSlideshow && pollScaleMultiplier === 2.5,\n            'pe-6': isDisplayModeSlideshow && pollScaleMultiplier === 2,\n            'pe-3': !isDisplayModeSlideshow || (isDisplayModeSlideshow && pollScaleMultiplier === 1),\n          },\n          isDisplayModeExpandedOrSlideshow || isStream ? 'text-body' : 'text-body-small',\n          {\n            'text-dark-text-100': darkMode === false,\n            'text-light-text-100': darkMode === true,\n            'text-dark-text-100 dark:text-light-text-100': darkMode === 'auto',\n          },\n          selected && 'font-semibold',\n        ]\"\n      >\n        {{ choiceText }}\n      </p>\n    </div>\n\n    <OzDivider\n      v-if=\"index !== numChoices - 1\"\n      :class=\"[\n        'my-1',\n        {\n          'ms-16': isDisplayModeSlideshow && pollScaleMultiplier === 2.5,\n          'ms-13': isDisplayModeSlideshow && pollScaleMultiplier === 2,\n          'ms-10': isDisplayModeSlideshow && pollScaleMultiplier === 1,\n          'ms-9': !isDisplayModeSlideshow || (isDisplayModeSlideshow && pollScaleMultiplier === 1),\n        },\n        {\n          'me-8': isDisplayModeSlideshow && (pollScaleMultiplier === 2.5 || pollScaleMultiplier === 2),\n          'me-4': isDisplayModeExpandedOrSlideshow,\n          'me-3': !isDisplayModeExpandedOrSlideshow && isStream,\n          'me-1': !isDisplayModeExpandedOrSlideshow && !isStream,\n        },\n      ]\"\n      :color-scheme=\"OzDividerColorScheme.Solid\"\n      :dark-mode=\"darkMode\"\n    />\n  </div>\n</template>\n<style scoped>\n.no-highlight-color {\n  -webkit-tap-highlight-color: transparent; /** On android chrome there is a blue background while selecting a poll choice we add this to remove the blue background\n  The poll choice has styles to indicate it is selected so this is not needed\n  */\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, toRefs } from 'vue'\n\ndefineEmits<{\n  (e: 'dblclick', event: MouseEvent): void\n}>()\n\nconst props = withDefaults(\n  defineProps<{\n    question: string\n    darkMode?: boolean | 'auto'\n    displayMode?: 'expanded' | 'default' | 'slideshow'\n    xOverlay?: boolean\n    isStream?: boolean\n  }>(),\n  { darkMode: 'auto', displayMode: 'default', xOverlay: false, isStream: false },\n)\n\nconst { darkMode, xOverlay, question, isStream } = toRefs(props)\nconst isDisplayModeExpanded = computed(() => props.displayMode === 'expanded')\nconst isDisplayModeSlideshow = computed(() => props.displayMode === 'slideshow')\nconst isDisplayModeExpandedOrSlideshow = computed(() => isDisplayModeExpanded.value || isDisplayModeSlideshow.value)\n</script>\n<template>\n  <div\n    :class=\"[\n      'pt-3 break-word-anywhere',\n      isStream ? 'px-4' : 'px-3',\n      isDisplayModeExpandedOrSlideshow\n        ? {\n            'pb-4 text-heading-2 text-center font-semibold': true,\n            'text-dark-text-100': darkMode === false,\n            'text-light-text-100': darkMode === true,\n            'text-dark-text-100 dark:text-light-text-100': darkMode === 'auto',\n          }\n        : {\n            'pb-2': true,\n            'max-w-[calc(100%-28px)]': !xOverlay, // 28px is width of more button with slope\n            'text-body': isStream,\n            'text-body-small': !isStream,\n            'text-dark-text-200': darkMode === false,\n            'text-light-text-200': darkMode === true,\n            'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n          },\n    ]\"\n    data-testid=\"surfacePostPollQuestion\"\n    @dblclick=\"$emit('dblclick', $event)\"\n  >\n    {{ question }}\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { type PollTailwindClasses } from '@@/bits/post_color'\nimport OzDivider, { OzDividerColorScheme } from '@@/library/v4/components/OzDivider.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport type { PollResult } from '@@/types'\nimport { computed, toRefs } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    result: PollResult\n    index: number\n    numResults: number\n    darkMode?: boolean | 'auto'\n    displayMode?: 'expanded' | 'default' | 'slideshow'\n    isStream?: boolean\n    pollColors: PollTailwindClasses\n    decimalPercentage?: boolean\n    pollScaleMultiplier?: number\n  }>(),\n  {\n    darkMode: 'auto',\n    displayMode: 'default',\n    isStream: false,\n    decimalPercentage: false,\n    pollScaleMultiplier: 1,\n  },\n)\n\nconst {\n  darkMode,\n  displayMode,\n  isStream,\n  result,\n  numResults,\n  pollColors,\n  decimalPercentage,\n  index,\n  pollScaleMultiplier,\n} = toRefs(props)\n\nconst isDisplayModeExpanded = computed(() => displayMode.value === 'expanded')\nconst isDisplayModeSlideshow = computed(() => displayMode.value === 'slideshow')\nconst isDisplayModeExpandedOrSlideshow = computed(() => isDisplayModeExpanded.value || isDisplayModeSlideshow.value)\n</script>\n<template>\n  <div :class=\"['flex flex-col mx-1']\">\n    <div\n      :class=\"[\n        'flex items-start justify-between flex-1 py-2 results-choice-slide',\n        {\n          'ms-10': isDisplayModeSlideshow && pollScaleMultiplier === 2.5,\n          'ms-9': isDisplayModeSlideshow && pollScaleMultiplier === 2,\n          'ms-4.5': isDisplayModeSlideshow && pollScaleMultiplier === 1,\n          'ms-3': !isDisplayModeSlideshow && isStream,\n          'ms-2': !isDisplayModeSlideshow && !isStream,\n        },\n      ]\"\n      :data-testid=\"`surfacePostPollChoiceResult${index + 1}`\"\n    >\n      <p\n        :class=\"[\n          'me-1 break-word-anywhere',\n          isDisplayModeExpandedOrSlideshow || isStream ? 'text-body' : 'text-body-small',\n          {\n            'text-dark-text-100': darkMode === false,\n            'text-light-text-100': darkMode === true,\n            'text-dark-text-100 dark:text-light-text-100': darkMode === 'auto',\n          },\n        ]\"\n      >\n        {{ result.choice_text }}\n      </p>\n      <OzIcon\n        v-if=\"result.user_voted\"\n        data-testid=\"surfacePostPollChoiceVotedIcon\"\n        :class=\"[\n          'me-auto my-auto',\n          {\n            'text-dark-text-200': darkMode === false,\n            'text-light-text-200': darkMode === true,\n            'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n          },\n        ]\"\n        :name=\"'checkmark_thicker'\"\n        :size=\"12\"\n      />\n      <div :class=\"['ms-1 flex items-center my-auto', result.pollWinner ? 'poll-winner-slide' : 'poll-loser-slide']\">\n        <OzIcon\n          v-if=\"result.pollWinner\"\n          :class=\"[\n            'me-1',\n            {\n              [pollColors.pollWinnerIconText.light]: darkMode === false,\n              [pollColors.pollWinnerIconText.dark]: darkMode === true,\n              [pollColors.pollWinnerIconText.auto]: darkMode === 'auto',\n            },\n          ]\"\n          :name=\"'trophy'\"\n          :size=\"16\"\n        />\n        <div\n          :class=\"[\n            {\n              'me-10': isDisplayModeSlideshow && pollScaleMultiplier === 2.5,\n              'me-9': isDisplayModeSlideshow && pollScaleMultiplier === 2,\n              'me-4.5': isDisplayModeSlideshow && pollScaleMultiplier === 1,\n              'me-2': !isDisplayModeSlideshow && isStream,\n              'me-1': !isDisplayModeSlideshow && !isStream,\n            },\n            {\n              'text-dark-text-200': darkMode === false,\n              'text-light-text-200': darkMode === true,\n              'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n            },\n          ]\"\n          data-testid=\"surfacePostPollChoicePercentage\"\n        >\n          {{ decimalPercentage ? result.percentage.toFixed(1) : result.percentage.toFixed(0) }}%\n        </div>\n      </div>\n    </div>\n    <div\n      :class=\"[\n        'relative',\n        index !== numResults - 1 ? 'my-1' : 'mt-1',\n        {\n          'mx-7.5': isDisplayModeSlideshow && pollScaleMultiplier === 2.5,\n          'mx-6': isDisplayModeSlideshow && pollScaleMultiplier === 2,\n          'mx-3': isDisplayModeSlideshow && pollScaleMultiplier === 1,\n          'mx-2': !isDisplayModeSlideshow && isStream,\n          'mx-1': !isDisplayModeSlideshow && !isStream,\n        },\n      ]\"\n    >\n      <div\n        :class=\"[\n          'h-1 absolute rounded-s-sm vote-bar-animation',\n          index === numResults - 1 && isDisplayModeExpandedOrSlideshow ? '-top-2.5' : '-top-0.875',\n          result.percentage === 100 ? 'rounded-e-sm' : 'rounded-e-md ',\n          {\n            [pollColors.closedPollChoicePercentageBackground.light]: darkMode === false,\n            [pollColors.closedPollChoicePercentageBackground.dark]: darkMode === true,\n            [pollColors.closedPollChoicePercentageBackground.auto]: darkMode === 'auto',\n          },\n        ]\"\n        :style=\"{\n          width: result.percentage === 0 ? `4px` : `${result.percentage}%`,\n        }\"\n      ></div>\n      <OzDivider\n        :class=\"[index === numResults - 1 && isDisplayModeExpandedOrSlideshow && '-translate-y-1.5']\"\n        :dark-mode=\"darkMode\"\n        :color-scheme=\"OzDividerColorScheme.Solid\"\n      />\n    </div>\n  </div>\n</template>\n<style lang=\"postcss\" scoped>\n.vote-bar-animation {\n  animation: progressBar 0.7s cubic-bezier(0.5, 1.4, 0.4, 0.87);\n  transform-origin: left;\n  [dir='rtl'] & {\n    transform-origin: right;\n  }\n}\n\n@keyframes progressBar {\n  0% {\n    transform: scaleX(0);\n  }\n  100% {\n    transform: scaleX(1);\n  }\n}\n\n.poll-winner-slide {\n  animation: pollWinnerSlide 0.3s ease-out;\n  [dir='rtl'] & {\n    animation: pollWinnerSlideRTL 0.3s ease-out;\n  }\n}\n\n@keyframes pollWinnerSlide {\n  0% {\n    transform: translateX(25%);\n  }\n  100% {\n    transform: translateX(0%);\n  }\n}\n\n@keyframes pollWinnerSlideRTL {\n  0% {\n    transform: translateX(-25%);\n  }\n  100% {\n    transform: translateX(0%);\n  }\n}\n\n.poll-loser-slide {\n  animation: pollLoserSlide 0.75s cubic-bezier(0.5, 1.55, 0.4, 0.87);\n  [dir='rtl'] & {\n    animation: pollLoserSlideRTL 0.75s cubic-bezier(0.5, 1.55, 0.4, 0.87);\n  }\n}\n\n@keyframes pollLoserSlide {\n  0% {\n    transform: translateX(-500%);\n    opacity: 0.1;\n  }\n  100% {\n    transform: translateX(0%);\n    opacity: 1;\n  }\n}\n\n@keyframes pollLoserSlideRTL {\n  0% {\n    transform: translateX(500%);\n    opacity: 0.1;\n  }\n  100% {\n    transform: translateX(0%);\n    opacity: 1;\n  }\n}\n\n.results-choice-slide {\n  animation: resultsChoiceSlide 0.2s ease-in-out;\n  [dir='rtl'] & {\n    animation: resultsChoiceSlideRTL 0.2s ease-in-out;\n  }\n}\n\n@keyframes resultsChoiceSlide {\n  0% {\n    transform: translateX(28px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n\n@keyframes resultsChoiceSlideRTL {\n  0% {\n    transform: translateX(-28px);\n  }\n  100% {\n    transform: translateX(0);\n  }\n}\n</style>\n"],"names":["darkMode","isPollClosed","totalVotesCount","isShowingPollResults","isVoteButtonDisabled","xVoteButton","xResultsToggle","isExpanded","isSlideshow","isStream","toRefs","props","togglePollResults","emit","bottomSection","ref","contentTooWide","useResizeObserver","debounce","value","width","clientWidth","height","clientHeight","SurfacePostPollChoiceInteractionsDisabled","SurfacePostPollChoiceInteractionsDisabled2","selected","choiceText","choiceId","displayMode","numChoices","pollColors","index","interactionsDisabled","pollScaleMultiplier","isDisplayModeExpanded","computed","isDisplayModeSlideshow","isDisplayModeExpandedOrSlideshow","onSelect","xOverlay","question","result","numResults","decimalPercentage"],"mappings":"sxCAmCM,CACJA,SAAAA,EACAC,aAAAA,EACAC,gBAAAA,EACAC,qBAAAA,EACAC,qBAAAA,EACAC,YAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,YAAAA,EACAC,SAAAA,CACF,EAAIC,EAAOC,CAAK,EAEVC,EAAoBA,IAAM,CAC9BC,EAAK,qBAAqB,GAGtBC,EAAgBC,IAChBC,EAAiBD,EAAI,EAAK,EAChCE,OAAAA,EACEH,EACAI,EAAS,IAAM,CACb,GAAIJ,EAAcK,MAAO,CACjB,MAAAC,EAAQN,EAAcK,MAAME,YAC5BC,EAASR,EAAcK,MAAMI,aAGpBP,EAAAG,MAASC,EAAQ,KAAO,CAACnB,EAAakB,OAAWC,EAAQ,KAAOnB,EAAakB,MAC5FN,EAAK,SAAU,CACbO,MAAAA,EACAE,OAAAA,CACF,CAAC,CACH,GACC,EAAE,CACP,09GCNYE,GAAAA,IACVA,EAAAC,EAAA,IAAA,CAAA,EAAA,MACAD,EAAAC,EAAA,OAAA,CAAA,EAAA,SACAD,EAAAC,EAAA,KAAA,CAAA,EAAA,OAHUD,IAAAA,GAAA,CAAA,CAAA,sXA7BN,CACJE,SAAAA,EACAC,WAAAA,EACAC,SAAAA,EACA5B,SAAAA,EACA6B,YAAAA,EACApB,SAAAA,EACAqB,WAAAA,EACAC,WAAAA,EACAC,MAAAA,EACAC,qBAAAA,EACAC,oBAAAA,CACF,EAAIxB,EAAOC,CAAK,EAEVwB,EAAwBC,EAAS,IAAMP,EAAYV,QAAU,UAAU,EACvEkB,EAAyBD,EAAS,IAAMP,EAAYV,QAAU,WAAW,EACzEmB,EAAmCF,EAAS,IAAMD,EAAsBhB,OAASkB,EAAuBlB,KAAK,gUAElGoB,IAAM,CAEnBN,EAAqBd,QAAU,GAC/Bc,EAAqBd,QAAU,GAG5BN,EAAA,SAAUe,EAAST,KAAK,suHCxCzB,CAAEnB,SAAAA,EAAUwC,SAAAA,EAAUC,SAAAA,EAAUhC,SAAAA,CAAS,EAAIC,EAAOC,CAAK,EACzDwB,EAAwBC,EAAS,IAAMzB,EAAMkB,cAAgB,UAAU,EACvEQ,EAAyBD,EAAS,IAAMzB,EAAMkB,cAAgB,WAAW,EACzES,EAAmCF,EAAS,IAAMD,EAAsBhB,OAASkB,EAAuBlB,KAAK,6vCCO7G,CACJnB,SAAAA,EACA6B,YAAAA,EACApB,SAAAA,EACAiC,OAAAA,EACAC,WAAAA,EACAZ,WAAAA,EACAa,kBAAAA,EACAZ,MAAAA,EACAE,oBAAAA,CACF,EAAIxB,EAAOC,CAAK,EAEVwB,EAAwBC,EAAS,IAAMP,EAAYV,QAAU,UAAU,EACvEkB,EAAyBD,EAAS,IAAMP,EAAYV,QAAU,WAAW,EACzEmB,EAAmCF,EAAS,IAAMD,EAAsBhB,OAASkB,EAAuBlB,KAAK"}