{"version":3,"file":"AccessibilityModal-DqRtmHwG.mjs","names":[],"sources":["../src/components/display/accessibility/AccessibilityModal.vue","../src/components/display/accessibility/AccessibilityModal.vue"],"sourcesContent":["<template>\n  <ClassicModalInBody\n    id-modal=\"accessibility-modal\"\n    :title-modal=\"t('Transcript Accessibility')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <div class=\"d-flex gap-3 flex-wrap mb-3\">\n        <div class=\"d-flex flex-nowrap align-items-center flex-grow-1\">\n          <div class=\"form-label me-3\">{{ t('Choose background color') }}</div>\n          <VSwatches\n            v-model:model-value=\"background\"\n            class=\"c-hand\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-x=\"left\"\n            :data-color=\"color\"\n          />\n        </div>\n        <div class=\"d-flex flex-nowrap align-items-center flex-grow-1\">\n          <div class=\"form-label me-3\">{{ t('Choose text color') }}</div> \n          <VSwatches\n            v-model:model-value=\"color\"\n            class=\"c-hand\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-x=\"left\"\n            :data-color=\"color\"\n          />\n        </div>\n      </div>\n\n      <div class=\"d-flex align-items-center flex-nowrap mb-3\">\n        <label class=\"form-label me-3\" for=\"accessibility-font-size\">{{ t('Font size') }}</label> \n        <button class=\"btn me-3\" :disabled=\"isMinSize\" @click=\"decreaseFontSize\"><FormatFontSizeDecreaseIcon :size=\"44\"/></button>\n        <button class=\"btn\" :disabled=\"isMaxSize\" @click=\"increaseFontSize\"><FormatFontSizeIncreaseIcon :size=\"44\"/></button>\n      </div>\n    \n      <div class=\"form-label mt-3\">{{ t('Preview') }}</div>\n      <div class=\"border p-2 mb-3\" :style=\"stylePreview\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>\n    </template>\n    <template #footer>\n      <button class=\"btn m-1\" @click=\"closePopup\">\n        {{ t(\"No\") }}\n      </button>\n      <button\n        class=\"btn btn-primary m-1\"\n        @click=\"saveData\"\n      >\n        {{ t(\"Save\") }}\n      </button>\n    </template>\n  </ClassicModalInBody>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport FormatFontSizeIncreaseIcon from \"vue-material-design-icons/FormatFontSizeIncrease.vue\";\nimport FormatFontSizeDecreaseIcon from \"vue-material-design-icons/FormatFontSizeDecrease.vue\";\nimport { computed, defineAsyncComponent, onBeforeMount, ref } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicModalInBody = defineAsyncComponent(\n  () => import(\"../../misc/modal/ClassicModalInBody.vue\"),\n);\n\n//Emits\nconst emit = defineEmits([\"close\", \"save\"]);\n\n//Data \nconst fontSize = ref(16);\nconst background = ref(\"white\");\nconst color = ref(\"black\");\n\n\n//Composables\nconst { t } = useI18n();\n\n\n//Computed\nconst isMaxSize = computed(() => fontSize.value>=30);\nconst isMinSize = computed(() => fontSize.value<=16);\nconst stylePreview = computed(() => 'font-size:'+fontSize.value+'px; background:'+background.value+'; color:'+color.value);\n\nonBeforeMount(()=>initAccessibility())\n\n//Methods\nfunction initAccessibility(){\n  const actualFontSize = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-font-size');\n  fontSize.value = isNaN(parseInt(actualFontSize.slice(0, -2), 10)) ? 16 :parseInt(actualFontSize.slice(0, -2), 10);\n  background.value = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-background');\n  color.value = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-color');\n}\nfunction closePopup() {\n  emit(\"close\");\n}\nfunction decreaseFontSize(){\n  if(!isMinSize.value){\n    fontSize.value -=2;\n  }\n}\nfunction increaseFontSize(){\n  if(!isMaxSize.value){\n    fontSize.value +=2;\n  }\n}\nfunction saveData(){\n  emit('save', {\n    fontSize: fontSize.value,\n    background: background.value,\n    color: color.value,\n  });\n}\n</script>\n<style lang=\"scss\">\n.octopus-app #accessibility-modal .octopus-modal-body{\n  min-height: 400px;\n  .gap-3{\n    gap:1rem;\n  }\n}\n</style>\n","<template>\n  <ClassicModalInBody\n    id-modal=\"accessibility-modal\"\n    :title-modal=\"t('Transcript Accessibility')\"\n    @close=\"closePopup\"\n  >\n    <template #body>\n      <div class=\"d-flex gap-3 flex-wrap mb-3\">\n        <div class=\"d-flex flex-nowrap align-items-center flex-grow-1\">\n          <div class=\"form-label me-3\">{{ t('Choose background color') }}</div>\n          <VSwatches\n            v-model:model-value=\"background\"\n            class=\"c-hand\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-x=\"left\"\n            :data-color=\"color\"\n          />\n        </div>\n        <div class=\"d-flex flex-nowrap align-items-center flex-grow-1\">\n          <div class=\"form-label me-3\">{{ t('Choose text color') }}</div> \n          <VSwatches\n            v-model:model-value=\"color\"\n            class=\"c-hand\"\n            show-fallback\n            fallback-input-type=\"color\"\n            colors=\"text-advanced\"\n            popover-x=\"left\"\n            :data-color=\"color\"\n          />\n        </div>\n      </div>\n\n      <div class=\"d-flex align-items-center flex-nowrap mb-3\">\n        <label class=\"form-label me-3\" for=\"accessibility-font-size\">{{ t('Font size') }}</label> \n        <button class=\"btn me-3\" :disabled=\"isMinSize\" @click=\"decreaseFontSize\"><FormatFontSizeDecreaseIcon :size=\"44\"/></button>\n        <button class=\"btn\" :disabled=\"isMaxSize\" @click=\"increaseFontSize\"><FormatFontSizeIncreaseIcon :size=\"44\"/></button>\n      </div>\n    \n      <div class=\"form-label mt-3\">{{ t('Preview') }}</div>\n      <div class=\"border p-2 mb-3\" :style=\"stylePreview\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>\n    </template>\n    <template #footer>\n      <button class=\"btn m-1\" @click=\"closePopup\">\n        {{ t(\"No\") }}\n      </button>\n      <button\n        class=\"btn btn-primary m-1\"\n        @click=\"saveData\"\n      >\n        {{ t(\"Save\") }}\n      </button>\n    </template>\n  </ClassicModalInBody>\n</template>\n\n<script setup lang=\"ts\">\nimport { VSwatches } from \"vue3-swatches\";\nimport \"vue3-swatches/dist/style.css\";\nimport FormatFontSizeIncreaseIcon from \"vue-material-design-icons/FormatFontSizeIncrease.vue\";\nimport FormatFontSizeDecreaseIcon from \"vue-material-design-icons/FormatFontSizeDecrease.vue\";\nimport { computed, defineAsyncComponent, onBeforeMount, ref } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nconst ClassicModalInBody = defineAsyncComponent(\n  () => import(\"../../misc/modal/ClassicModalInBody.vue\"),\n);\n\n//Emits\nconst emit = defineEmits([\"close\", \"save\"]);\n\n//Data \nconst fontSize = ref(16);\nconst background = ref(\"white\");\nconst color = ref(\"black\");\n\n\n//Composables\nconst { t } = useI18n();\n\n\n//Computed\nconst isMaxSize = computed(() => fontSize.value>=30);\nconst isMinSize = computed(() => fontSize.value<=16);\nconst stylePreview = computed(() => 'font-size:'+fontSize.value+'px; background:'+background.value+'; color:'+color.value);\n\nonBeforeMount(()=>initAccessibility())\n\n//Methods\nfunction initAccessibility(){\n  const actualFontSize = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-font-size');\n  fontSize.value = isNaN(parseInt(actualFontSize.slice(0, -2), 10)) ? 16 :parseInt(actualFontSize.slice(0, -2), 10);\n  background.value = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-background');\n  color.value = getComputedStyle(document.documentElement).getPropertyValue('--octopus-accessibility-color');\n}\nfunction closePopup() {\n  emit(\"close\");\n}\nfunction decreaseFontSize(){\n  if(!isMinSize.value){\n    fontSize.value -=2;\n  }\n}\nfunction increaseFontSize(){\n  if(!isMaxSize.value){\n    fontSize.value +=2;\n  }\n}\nfunction saveData(){\n  emit('save', {\n    fontSize: fontSize.value,\n    background: background.value,\n    color: color.value,\n  });\n}\n</script>\n<style lang=\"scss\">\n.octopus-app #accessibility-modal .octopus-modal-body{\n  min-height: 400px;\n  .gap-3{\n    gap:1rem;\n  }\n}\n</style>\n"],"mappings":"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"}