{"version":3,"file":"AutoplaySettings-36a3c630.js","sources":["../../../app/javascript/vuecomponents/AutoplayMenu.vue","../../../app/javascript/vuecomponents/AutoplaySettings.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AutoplayDurationType } from '@@/bits/autoplay'\nimport { AUTOPLAY_DURATIONS } from '@@/bits/autoplay'\nimport { __ } from '@@/bits/intl'\nimport OzDivider, { OzDividerColorScheme } from '@@/library/v4/components/OzDivider.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport OzRowToggle from '@@/library/v4/components/OzRowToggle.vue'\nimport { computed } from 'vue'\n\nconst props = defineProps<{\n  darkMode: boolean\n  selectedAutoplayDuration: AutoplayDurationType\n  isAutoplayLooping: boolean\n  toggleLoopButtonText?: string\n  testIdPrefix?: string\n  // Analytics - should be updated to use event tracker later instead of data-pepin-id\n  durationTypeAnalyticsIdPrefix?: string\n  loopAnalyticsId?: string\n}>()\n\nconst emit = defineEmits<{\n  (e: 'select-duration-type', value: AutoplayDurationType): void\n  (e: 'toggle-loop'): void\n}>()\n\nconst handleSetDurationType = (value: AutoplayDurationType) => {\n  emit('select-duration-type', value)\n}\n\nconst autoplayDurationGroup = computed(() => {\n  const autoplayDurations = Object.keys(AUTOPLAY_DURATIONS).map((duration) => ({\n    text: AUTOPLAY_DURATIONS[duration as AutoplayDurationType].long,\n    value: duration as AutoplayDurationType,\n    checked: props.selectedAutoplayDuration === duration,\n    role: 'menuitemradio',\n  }))\n\n  return autoplayDurations\n})\n\nconst autoplayDescription = computed(() => {\n  if (props.isAutoplayLooping) {\n    return props.selectedAutoplayDuration === 'auto'\n      ? __(\n          'Autoplaying at a duration that is automatically calculated based on the number of words and attachments on the slide. It will loop after finishing all the slides.',\n        )\n      : __('Autoplaying at a duration of %{duration} seconds. It will loop after finishing all the slides.', {\n          duration: props.selectedAutoplayDuration,\n        })\n  }\n\n  return props.selectedAutoplayDuration === 'auto'\n    ? __(\n        'Autoplaying at a duration that is automatically calculated based on the number of words and attachments on the slide. It will not loop after finishing all the slides.',\n      )\n    : __('Autoplaying at a duration of %{duration} seconds. It will not loop after finishing all the slides', {\n        duration: props.selectedAutoplayDuration,\n      })\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'p-0 rounded-2xl overflow-auto grid grid-flow-row grid-cols-1',\n      {\n        'bg-light-ui-100 text-dark-text-100': !darkMode,\n        'bg-dark-ui-100 text-light-text-100': darkMode,\n      },\n    ]\"\n    :style=\"{\n      width: '256px',\n      zIndex: 1000,\n    }\"\n    role=\"menu\"\n    :data-testid=\"`${testIdPrefix}AutoplayMenu`\"\n  >\n    <p id=\"autoplay-description\" class=\"sr-only\">\n      {{ autoplayDescription }}\n    </p>\n    <div :class=\"['flex flex-col']\">\n      <div v-for=\"(row, rowIndex) in autoplayDurationGroup\" :key=\"rowIndex\">\n        <div :class=\"['rounded-lg', 'my-1 px-1']\">\n          <div\n            :class=\"[\n              'flex flex-row justify-between items-center',\n              'cursor-pointer',\n              'rounded-xl',\n              'py-2 px-3',\n              'focus-visible:ring-solid focus-visible:ring-2',\n              {\n                'hover:bg-light-ui-200 focus-visible:bg-light-ui-200 focus-visible:ring-grape-500': !darkMode,\n                'hover:bg-dark-ui-200 focus-visible:bg-dark-ui-200 focus-visible:ring-canary-500': darkMode,\n              },\n            ]\"\n            :tabindex=\"0\"\n            :role=\"row.role\"\n            :aria-checked=\"row.checked\"\n            :data-pepin-id=\"`${durationTypeAnalyticsIdPrefix}-${row.value}`\"\n            data-pepin-trigger=\"click\"\n            @click=\"handleSetDurationType(row.value)\"\n            @keydown.enter.stop.prevent=\"handleSetDurationType(row.value)\"\n            @keydown.space.stop.prevent=\"handleSetDurationType(row.value)\"\n          >\n            <span>\n              {{ row.text }}\n            </span>\n\n            <OzIcon\n              :name=\"row.checked ? 'radio_selected' : 'radio_unselected'\"\n              :size=\"24\"\n              :class=\"[\n                row.checked\n                  ? {\n                      'text-grape-500': !darkMode,\n                      'text-canary-500': darkMode,\n                    }\n                  : {\n                      'text-dark-text-200': !darkMode,\n                      'text-light-text-200': darkMode,\n                    },\n              ]\"\n            />\n          </div>\n        </div>\n        <OzDivider\n          v-if=\"rowIndex < autoplayDurationGroup.length - 1\"\n          class=\"mx-4\"\n          :color-scheme=\"OzDividerColorScheme.Solid\"\n          :dark-mode=\"darkMode\"\n        />\n      </div>\n      <div\n        :class=\"[\n          'h-2',\n          {\n            'bg-grey-100': !darkMode,\n            'bg-grey-800': darkMode,\n          },\n        ]\"\n      />\n      <div :class=\"['rounded-lg', 'px-4 py-2', 'my-1']\">\n        <OzRowToggle\n          :value=\"isAutoplayLooping\"\n          :label=\"toggleLoopButtonText ?? __('Loop slides')\"\n          class=\"w-full p-0 m-0\"\n          :min-height=\"0\"\n          :data-pepin-id=\"loopAnalyticsId\"\n          data-pepin-trigger=\"click\"\n          :dark-mode=\"darkMode\"\n          :data-testid=\"`${testIdPrefix}AutoplayLoopingToggle`\"\n          @click=\"emit('toggle-loop')\"\n        >\n          <p\n            :class=\"[\n              'text-body-small',\n              {\n                'text-dark-text-100': !darkMode,\n                'text-light-text-100': darkMode,\n              },\n            ]\"\n          >\n            {{ toggleLoopButtonText ?? __('Loop slides') }}\n          </p>\n        </OzRowToggle>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { __ } from '@@/bits/intl'\nimport type { AutoplayDurationType } from '@@/bits/slideshow'\nimport { AUTOPLAY_DURATIONS } from '@@/bits/slideshow'\nimport OzOverlay from '@@/library/v4/components/OzOverlay.vue'\nimport OzPlainButton, {\n  OzPlainButtonColorScheme,\n  OzPlainButtonSizePreset,\n} from '@@/library/v4/components/OzPlainButton.vue'\nimport { useWindowSizeStore } from '@@/pinia/window_size'\nimport AutoplayMenu from '@@/vuecomponents/AutoplayMenu.vue'\nimport { shiftUpWhenOverflow, useFloating } from '@@/vuecomposables/floating'\nimport { storeToRefs } from 'pinia'\nimport type { ComponentPublicInstance } from 'vue'\nimport { computed, ref } from 'vue'\nimport type { CSSProperties } from 'vue/types/jsx'\n\ndefineProps<{\n  xAutoplayMenu: boolean\n  isAutoplayLooping: boolean\n  toggleLoopButtonText?: string\n  selectedAutoplayDuration: AutoplayDurationType\n  autoplayDurationInMs: number\n  darkMode: boolean\n  testIdPrefix?: string\n  // Analytics - should be updated to use event tracker later instead of data-pepin-id\n  durationTypeAnalyticsIdPrefix?: string\n  loopAnalyticsId?: string\n}>()\n\ndefineEmits<{\n  (event: 'toggle-autoplay-menu'): void\n  (event: 'toggle-loop'): void\n  (event: 'select-duration-type', value: AutoplayDurationType): void\n}>()\n\nconst { windowHeight } = storeToRefs(useWindowSizeStore())\n\nconst button = ref<InstanceType<typeof OzPlainButton> | null>(null)\nconst popover = ref<ComponentPublicInstance<HTMLElement> | null>(null)\nconst reference = computed(() => button.value?.$el as any)\nconst floating = computed(() => popover.value?.$el as any)\n\n// The maximum popover height is the window height minus a 12px margin.\nconst MAX_POPOVER_HEIGHT = computed(() => windowHeight.value - 12 * 2)\nconst { floatingStyles } = useFloating(reference, floating, {\n  middleware: [shiftUpWhenOverflow()],\n  placement: 'top-start',\n})\n\nconst referenceContainerStyles = computed<CSSProperties>(() => ({\n  width: `${reference.value?.offsetWidth}px`,\n  height: `${reference.value?.offsetHeight}px`,\n}))\n</script>\n\n<template>\n  <div class=\"flex items-center justify-center\" :style=\"referenceContainerStyles\">\n    <div class=\"box-border\" :style=\"{ position: 'absolute' }\">\n      <OzPlainButton\n        ref=\"button\"\n        :aria-label=\"__('Open modal to select autoplay duration')\"\n        :title=\"__('Open modal to select autoplay duration')\"\n        :size-preset=\"OzPlainButtonSizePreset.H32px\"\n        :dark-mode=\"darkMode\"\n        :text=\"AUTOPLAY_DURATIONS[selectedAutoplayDuration].short\"\n        :color-scheme=\"OzPlainButtonColorScheme.Secondary\"\n        :data-testid=\"`${testIdPrefix}AutoplayMenuButton`\"\n        :data-duration=\"autoplayDurationInMs\"\n        @click=\"$emit('toggle-autoplay-menu')\"\n      />\n      <OzOverlay\n        v-if=\"xAutoplayMenu\"\n        :scrim=\"'popover'\"\n        :dark-mode=\"darkMode\"\n        @scrim-esc=\"$emit('toggle-autoplay-menu')\"\n        @scrim-click=\"$emit('toggle-autoplay-menu')\"\n      >\n        <AutoplayMenu\n          v-if=\"xAutoplayMenu\"\n          ref=\"popover\"\n          :style=\"{ ...floatingStyles, maxHeight: `${MAX_POPOVER_HEIGHT}px` }\"\n          :selected-autoplay-duration=\"selectedAutoplayDuration\"\n          :dark-mode=\"darkMode\"\n          :is-autoplay-looping=\"isAutoplayLooping\"\n          :toggle-loop-button-text=\"toggleLoopButtonText\"\n          :test-id-prefix=\"testIdPrefix\"\n          :duration-type-analytics-id-prefix=\"durationTypeAnalyticsIdPrefix\"\n          :loop-analytics-id=\"loopAnalyticsId\"\n          @select-duration-type=\"$emit('select-duration-type', $event)\"\n          @toggle-loop=\"$emit('toggle-loop')\"\n        />\n      </OzOverlay>\n    </div>\n  </div>\n</template>\n"],"names":["handleSetDurationType","value","emit","autoplayDurationGroup","computed","Object","keys","AUTOPLAY_DURATIONS","map","duration","text","long","checked","props","selectedAutoplayDuration","role","autoplayDescription","isAutoplayLooping","__","windowHeight","storeToRefs","useWindowSizeStore","button","ref","popover","reference","$el","floating","MAX_POPOVER_HEIGHT","floatingStyles","useFloating","middleware","shiftUpWhenOverflow","placement","referenceContainerStyles","width","offsetWidth","height","offsetHeight"],"mappings":"qpCAyBMA,EAAyBC,GAAgC,CAC7DC,EAAK,uBAAwBD,CAAK,GAG9BE,EAAwBC,EAAS,IACXC,OAAOC,KAAKC,CAAkB,EAAEC,IAAKC,IAAc,CAC3EC,KAAMH,EAAmBE,CAAgC,EAAEE,KAC3DV,MAAOQ,EACPG,QAASC,EAAMC,2BAA6BL,EAC5CM,KAAM,eACN,EAAA,CAGH,EAEKC,EAAsBZ,EAAS,IAC/BS,EAAMI,kBACDJ,EAAMC,2BAA6B,OACtCI,EACE,oKACF,EACAA,EAAG,iGAAkG,CACnGT,SAAUI,EAAMC,wBAClB,CAAC,EAGAD,EAAMC,2BAA6B,OACtCI,EACE,wKACF,EACAA,EAAG,oGAAqG,CACtGT,SAAUI,EAAMC,wBAClB,CAAC,CACN,umGCtBD,KAAM,CAAEK,aAAAA,CAAa,EAAIC,EAAYC,GAAoB,EAEnDC,EAASC,EAA+C,IAAI,EAC5DC,EAAUD,EAAiD,IAAI,EAC/DE,EAAYrB,EAAS,IAAA,OAAMkB,OAAAA,EAAAA,EAAOrB,QAAPqB,YAAAA,EAAcI,IAAU,EACnDC,EAAWvB,EAAS,IAAA,OAAMoB,OAAAA,EAAAA,EAAQvB,QAARuB,YAAAA,EAAeE,IAAU,EAGnDE,EAAqBxB,EAAS,IAAMe,EAAalB,MAAQ,GAAK,CAAC,EAC/D,CAAE4B,eAAAA,CAAe,EAAIC,EAAYL,EAAWE,EAAU,CAC1DI,WAAY,CAACC,GAAqB,EAClCC,UAAW,WACb,CAAC,EAEKC,EAA2B9B,EAAwB,IAAO,SAAA,OAC9D+B,MAAO,IAAGV,EAAAA,EAAUxB,QAAVwB,YAAAA,EAAiBW,WAAW,KACtCC,OAAQ,IAAGZ,EAAAA,EAAUxB,QAAVwB,YAAAA,EAAiBa,YAAY,IACxC,EAAA"}