{"version":3,"file":"ToolbarFontSize-mbu3Lysh.js","sources":["../../Vue/src/components/SheetMusic/Toolbar/ToolbarReset.vue","../../Vue/src/components/SheetMusic/Toolbar/ColorSelection.vue","../../Vue/src/components/Common/FormSlider.vue","../../Vue/src/config/FontSettings.ts","../../Vue/src/components/SheetMusic/Toolbar/ToolbarFontSettings.vue","../../Vue/src/components/SheetMusic/Toolbar/ToolbarColumns.vue","../../Vue/src/components/SheetMusic/Toolbar/ToolbarFontSize.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nconst emits = defineEmits<{\r\n  (e: \"reset\"): void;\r\n}>();\r\n\r\nconst modals = useModalStore();\r\n\r\nemitter.on(\"resetAllSettingsConfirmed\", () => emits(\"reset\"));\r\n</script>\r\n\r\n<template>\r\n  <ToolbarButtonGroup :title=\"$t('S.LIT_Reset')\">\r\n    <ToolbarButton\r\n      icon=\"fa-light fa-undo\"\r\n      :label=\"$t('SV.LIT_ResetAllSettings')\"\r\n      @click=\"modals.showModal('ConfirmResetSettingsModal')\"\r\n    />\r\n  </ToolbarButtonGroup>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nimport { ColorOption } from \"@/models/frontend-only/ColorOption\";\r\n\r\nconst value = defineModel<string>();\r\nconst dark = useDarkModeStore();\r\n\r\ndefineProps<{\r\n  options: ColorOption[];\r\n  highlight?: boolean;\r\n}>();\r\n</script>\r\n\r\n<template>\r\n  <div class=\"color-select grid grid-cols-4 gap-1\">\r\n    <button\r\n      v-for=\"o of options\"\r\n      :key=\"o.name\"\r\n      type=\"button\"\r\n      :class=\"{ active: value === o.name }\"\r\n      :data-sheet-font-color=\"!highlight ? o.name : undefined\"\r\n      :data-sheet-highlight-color=\"highlight ? o.name : undefined\"\r\n      @click=\"value = o.name\"\r\n    >\r\n      <div\r\n        v-if=\"o.name !== 'transparent'\"\r\n        :style=\"{\r\n          'background-color': dark.isDarkModeEnabled ? o.dark : o.light,\r\n        }\"\r\n        class=\"color-square\"\r\n      ></div>\r\n      <FAIcon\r\n        v-else\r\n        class=\"fa-light fa-times transparent-square fa-2x flex items-center justify-center\"\r\n      />\r\n    </button>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.color-square {\r\n  @apply h-7 w-7 rounded;\r\n}\r\nbutton {\r\n  @apply btn btn-square btn-sm h-11 w-11 bg-white p-1 transition-all hover:brightness-90;\r\n}\r\n.dark .button {\r\n  @aply bg-black;\r\n}\r\nbutton.active {\r\n  @apply bg-white outline outline-gray-300;\r\n}\r\n.transparent-square {\r\n  @apply h-8 w-8 w-full rounded bg-white text-error;\r\n}\r\n.dark .transparent-square {\r\n  @apply bg-black text-red-400;\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nimport { SelectOption } from \"@/models/frontend-only/SelectOption\";\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    label?: string;\r\n    options?: (SelectOption | string)[];\r\n    modelValue?: string;\r\n    name?: string;\r\n    suffix?: string;\r\n    id?: string;\r\n    min?: string;\r\n    max: string;\r\n    step?: string;\r\n    increaseLabel: string;\r\n    decreaseLabel: string;\r\n    hideLabel?: boolean;\r\n  }>(),\r\n  {\r\n    label: \"\",\r\n    modelValue: \"\",\r\n    min: \"0\",\r\n    step: \"1\",\r\n    options: () => [],\r\n    id: () => uniqueId(\"form-slider\"),\r\n    hideLabel: false,\r\n  },\r\n);\r\n\r\nconst emit = defineEmits<{\r\n  (e: \"update:modelValue\", value: string): void;\r\n}>();\r\n\r\nconst data = computed({\r\n  get() {\r\n    return props.modelValue;\r\n  },\r\n  set(newValue) {\r\n    emit(\"update:modelValue\", newValue);\r\n  },\r\n});\r\n\r\nfunction increase() {\r\n  data.value = Math.min(\r\n    parseFloat(props.max),\r\n    parseFloat(data.value) + parseFloat(props.step),\r\n  ).toString();\r\n}\r\nfunction decrease() {\r\n  data.value = Math.max(\r\n    parseFloat(props.min),\r\n    parseFloat(data.value) - parseFloat(props.step),\r\n  ).toString();\r\n}\r\n\r\nwatch(\r\n  () => data.value,\r\n  (v) => {\r\n    (window as any).dataLayer.push({\r\n      font_size: v,\r\n    });\r\n  },\r\n);\r\n</script>\r\n\r\n<template>\r\n  <div class=\"form-group\">\r\n    <label\r\n      :for=\"id\"\r\n      :class=\"{ 'sr-only': hideLabel }\"\r\n      class=\"label\"\r\n      ><span class=\"label-text\"\r\n        >{{ label }} - {{ data }}{{ suffix }}</span\r\n      ></label\r\n    >\r\n    <div class=\"range-group\">\r\n      <button\r\n        type=\"button\"\r\n        :aria-label=\"decreaseLabel\"\r\n        @click=\"decrease()\"\r\n      >\r\n        <FAIcon class=\"fa-light fa-minus\" />\r\n      </button>\r\n      <input\r\n        :id=\"id\"\r\n        v-model=\"data\"\r\n        :name=\"name\"\r\n        type=\"range\"\r\n        :min=\"min\"\r\n        :max=\"max\"\r\n        :step=\"step\"\r\n        class=\"range range-primary\"\r\n      />\r\n      <button\r\n        type=\"button\"\r\n        :aria-label=\"increaseLabel\"\r\n        @click=\"increase()\"\r\n      >\r\n        <FAIcon class=\"fa-light fa-plus\" />\r\n      </button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\nbutton {\r\n  @apply flex h-8 w-8 items-center justify-center rounded-full transition;\r\n\r\n  &:hover {\r\n    @apply bg-light-700;\r\n  }\r\n\r\n  &:focus-visible {\r\n    @apply bg-light-700 outline outline-primary;\r\n  }\r\n}\r\n\r\n.range-group {\r\n  @apply flex items-center gap-2;\r\n\r\n  input {\r\n    @apply flex-grow;\r\n  }\r\n}\r\n\r\n.range-display {\r\n  margin-right: 0.5em;\r\n  padding: 0.25em 0.5em;\r\n  border-radius: 0.5em;\r\n  @apply border border-gray-100 bg-white;\r\n}\r\n\r\nbutton:focus-visible {\r\n  outline: 2px solid var(--ccli-black);\r\n}\r\n\r\ninput[type=\"range\"] {\r\n  padding: 10px 0px; /* Add padding to ensure thumb is fully visible */\r\n  background-color: white;\r\n}\r\n\r\ninput[type=\"range\"]::-webkit-slider-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  background: #fff;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n}\r\n\r\ninput[type=\"range\"]::-moz-range-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  background: #fff;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n}\r\n\r\ninput[type=\"range\"]::-ms-thumb {\r\n  width: 20px;\r\n  height: 20px;\r\n  background: #fff;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n}\r\n</style>\r\n","import { ColorOption } from \"@/models/frontend-only/ColorOption\";\r\n\r\nexport const AvailableFontFamilies = [\r\n  {\r\n    type: \"Sans-Serif\",\r\n    fontFamilyName: \"'Open Sans', 'Verdana', sans-serif\",\r\n    url: \"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap\",\r\n  },\r\n  {\r\n    type: \"Serif\",\r\n    fontFamilyName: \"'Playfair', 'Garamond', serif\",\r\n    url: \"https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,400;0,5..1200,700;1,5..1200,400;1,5..1200,700&display=swap\",\r\n  },\r\n  {\r\n    type: \"Monospace\",\r\n    fontFamilyName: \"'Roboto Mono', 'Courier New', monospace\",\r\n    url: \"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,500;0,700;1,500;1,700&display=swap\",\r\n  },\r\n  {\r\n    type: \"Handwriting\",\r\n    fontFamilyName: \"'Comic Neue', 'Brush Script MT', cursive\",\r\n    url: \"https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400;1,700&display=swap\",\r\n  },\r\n];\r\n\r\nexport const AvailableTextColors: ColorOption[] = [\r\n  { name: \"base100\", light: \"#000000\", dark: \"#fff\" },\r\n  {\r\n    name: \"blue\",\r\n    light: \"#0733ff\",\r\n    dark: \"#0733ff\",\r\n  },\r\n  {\r\n    name: \"brown\",\r\n    light: \"#ab7942\",\r\n    dark: \"#ab7942\",\r\n  },\r\n\r\n  {\r\n    name: \"cyan\",\r\n    light: \"#04fdff\",\r\n    dark: \"#04fdff\",\r\n  },\r\n\r\n  {\r\n    name: \"green\",\r\n    light: \"#01f900\",\r\n    dark: \"#01f900\",\r\n  },\r\n  {\r\n    name: \"magenta\",\r\n    light: \"#ff40ff\",\r\n    dark: \"#ff40ff\",\r\n  },\r\n\r\n  {\r\n    name: \"orange\",\r\n    light: \"#ff9302\",\r\n    dark: \"#ff9302\",\r\n  },\r\n\r\n  {\r\n    name: \"purple\",\r\n    light: \"#942092\",\r\n    dark: \"#942092\",\r\n  },\r\n\r\n  {\r\n    name: \"red\",\r\n    light: \"#ff2601\",\r\n    dark: \"#ff2601\",\r\n  },\r\n  {\r\n    name: \"yellow\",\r\n    light: \"#fffc03\",\r\n    dark: \"#fffc03\",\r\n  },\r\n];\r\n\r\nexport const AvailableHighlightColors: ColorOption[] = [\r\n  {\r\n    name: \"transparent\",\r\n    light: \"rgba(0,0,0,0)\",\r\n    dark: \"rgba(0,0,0,0)\",\r\n  },\r\n  {\r\n    name: \"yellow\",\r\n    light: \"#fffa00\",\r\n    dark: \"#fffa00\",\r\n  },\r\n  {\r\n    name: \"green\",\r\n    light: \"#01f800\",\r\n    dark: \"#01f800\",\r\n  },\r\n  {\r\n    name: \"cyan\",\r\n    light: \"#04fafd\",\r\n    dark: \"#04fafd\",\r\n  },\r\n  {\r\n    name: \"magenta\",\r\n    light: \"#ff40fb\",\r\n    dark: \"#ff40fb\",\r\n  },\r\n\r\n  {\r\n    name: \"blue\",\r\n    light: \"#0433ff\",\r\n    dark: \"#0433ff\",\r\n  },\r\n  {\r\n    name: \"red\",\r\n    light: \"#ff2600\",\r\n    dark: \"#ff2600\",\r\n  },\r\n  {\r\n    name: \"gray-200\",\r\n    light: \"#929292\",\r\n    dark: \"#929292\",\r\n  },\r\n  {\r\n    name: \"gray-100\",\r\n    light: \"#cacaca\",\r\n    dark: \"#cacaca\",\r\n  },\r\n];\r\n","<script setup lang=\"ts\">\r\nimport { FontSetting } from \"@/models/FontSetting\";\r\nimport { SelectOption } from \"@/models/frontend-only/SelectOption\";\r\nimport ToolbarFontButton from \"./ToolbarFontButton.vue\";\r\nimport ToolbarButtonDropdown from \"./ToolbarButtonDropdown.vue\";\r\n\r\nconst data = defineModel<{\r\n  headings: FontSetting;\r\n  lyrics: FontSetting;\r\n  direction?: FontSetting;\r\n  chords?: FontSetting;\r\n}>();\r\n\r\nconst props = defineProps<{\r\n  enableChords?: boolean;\r\n}>();\r\n\r\nconst { t } = useI18n();\r\n\r\nconst dark = useDarkModeStore();\r\nconst applyToPart = ref<\"headings\" | \"lyrics\" | \"chords\" | \"directions\">(\r\n  \"headings\",\r\n);\r\nconst showingMenu = ref(\"\");\r\n\r\nconst btnFamily = ref<InstanceType<typeof ToolbarFontButton>>();\r\nconst btnSize = ref<InstanceType<typeof ToolbarFontButton>>();\r\nconst btnColor = ref<InstanceType<typeof ToolbarFontButton>>();\r\nconst btnHighlight = ref<InstanceType<typeof ToolbarFontButton>>();\r\n\r\nconst applyOptions = computed<SelectOption[]>(() => [\r\n  {\r\n    label: t(\"SV.LIT_SongHeadings\"),\r\n    value: \"headings\",\r\n  },\r\n  ...(props.enableChords\r\n    ? [\r\n        {\r\n          label: t(\"S.LIT_Chords\"),\r\n          value: \"chords\",\r\n        },\r\n        {\r\n          label: t(\"SV.LIT_Annotations\"),\r\n          value: \"directions\",\r\n        },\r\n      ]\r\n    : []),\r\n  {\r\n    label: t(\"S.LIT_Lyrics\"),\r\n    value: \"lyrics\",\r\n  },\r\n]);\r\n\r\nconst selectedOption = computed(\r\n  () =>\r\n    applyOptions.value.find((o) => o.value === applyToPart.value)?.label || \"\",\r\n);\r\n\r\nconst settings = computed<FontSetting | null>(\r\n  () => (data.value && (data.value as any)[applyToPart.value]) || null,\r\n);\r\n\r\nconst clearTitle = computed(\r\n  () => t(\"SV.LIT_ClearFontSettingsFor\", {\r\n    setting: selectedOption.value,\r\n  })\r\n)\r\n\r\nonMounted(() => {\r\n  emitter.on(\"resetFontStylesConfirmed\", () => resetSettings(true));\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n  emitter.off(\"resetFontStylesConfirmed\");\r\n});\r\n\r\nfunction resetSettings(confirm?: boolean) {\r\n  if (!confirm) {\r\n    const modals = useModalStore();\r\n    modals.showModal(\"ConfirmClearStylesModal\");\r\n\r\n    return;\r\n  }\r\n\r\n  showingMenu.value = \"\";\r\n\r\n  (data.value as any)[applyToPart.value].color = AvailableTextColors[0].name;\r\n  (data.value as any)[applyToPart.value].highlight =\r\n    AvailableHighlightColors[0].name;\r\n  (data.value as any)[applyToPart.value].family = AvailableFontFamilies[0].type;\r\n  (data.value as any)[applyToPart.value].size = \"16\";\r\n\r\n  const toast = useToastStore();\r\n  toast.successToast(t(\"SV.LIT_FontSettingsHaveBeenReset\"));\r\n}\r\n\r\nfunction applyFamily(fontFamilyType: string) {\r\n  if (settings.value) {\r\n    settings.value.family = fontFamilyType;\r\n  }\r\n}\r\n\r\nconst activeFontColor = computed(() => {\r\n  const color = AvailableTextColors.find(\r\n    (c) => c.name === settings.value?.color,\r\n  );\r\n  if (color) {\r\n    if (dark.isDarkModeEnabled) {\r\n      return color.dark;\r\n    } else {\r\n      return color.light;\r\n    }\r\n  }\r\n});\r\n\r\nconst activeHighlightColor = computed(() => {\r\n  let color;\r\n  if (settings.value?.highlight === \"transparent\") {\r\n    color = AvailableHighlightColors[1];\r\n  } else {\r\n    color = AvailableHighlightColors.find(\r\n      (c) => c.name === settings.value?.highlight,\r\n    );\r\n  }\r\n  if (color) {\r\n    if (dark.isDarkModeEnabled) {\r\n      return color.dark;\r\n    } else {\r\n      return color.light;\r\n    }\r\n  }\r\n});\r\n\r\nconst dropdown = ref<InstanceType<typeof ToolbarButtonDropdown>>();\r\nconst contentEl = computed(() => dropdown.value?.dropdown?.contents?.$el);\r\n\r\nwatch(applyToPart, () => {\r\n  (window as any).dataLayer.push({\r\n    font_setting_section: applyToPart.value\r\n  })\r\n})\r\n\r\nonMounted(loadFonts);\r\nfunction loadFonts() {\r\n  AvailableFontFamilies.forEach((f) =>\r\n    loadFont(`sheetmusic-font-${f.type}`, f.url),\r\n  );\r\n}\r\n</script>\r\n\r\n<template>\r\n  <ToolbarButtonGroup\r\n    :title=\"$t('SV.LIT_Font')\"\r\n    class=\"toolbar-font-settings block\"\r\n  >\r\n    <ToolbarButtonDropdown\r\n      ref=\"dropdown\"\r\n      :title=\"$t('SV.LIT_Font')\"\r\n      label=\"\"\r\n      icon=\"fa-font\"\r\n      class=\"block\"\r\n      disable-content-auto-close\r\n      forced-content-width=\"220px\"\r\n      @open=\"showingMenu = ''\"\r\n    >\r\n      <ToolbarButtonDropdownHeader>{{ $t('SV.LIT_FontSettings') }}</ToolbarButtonDropdownHeader>\r\n      <div class=\"toolbar-font-settings-popover mb-2 grid gap-1\">\r\n        <div class=\"flex items-center gap-1\">\r\n          <FormSelect\r\n            v-model=\"applyToPart\"\r\n            :options=\"applyOptions\"\r\n            label=\"Apply to\"\r\n            hide-label\r\n            class=\"flex-1\"\r\n            :class=\"enableChords ? 'ga-chordsheet-font-settings-select' : 'ga-lyrics-font-settings-select'\"\r\n            :data-content-type=\"enableChords ? 'ChordSheet' : 'Lyrics'\"\r\n            data-content-action=\"applyFontSettingsSection\"\r\n          ></FormSelect>\r\n\r\n          <ToolbarFontButton\r\n            :title=\"clearTitle\"\r\n            icon=\"fa-light fa-eraser\"\r\n            @click=\"resetSettings()\"\r\n          />\r\n        </div>\r\n        <div\r\n          v-if=\"settings\"\r\n          class=\"flex gap-1\"\r\n        >\r\n          <ToolbarFontButton\r\n            ref=\"btnFamily\"\r\n            :title=\"$t('S.LIT_FontFamilyTC')\"\r\n            icon=\"fa-solid fa-font\"\r\n            :active=\"showingMenu === 'font-family'\"\r\n            @click=\"showingMenu = 'font-family'\"\r\n            @mouseenter=\"showingMenu = 'font-family'\"\r\n          />\r\n          <ToolbarFontButton\r\n            ref=\"btnSize\"\r\n            :title=\"$t('S.LIT_FontSizeTC')\"\r\n            icon=\"fa-light fa-text-size\"\r\n            :active=\"showingMenu === 'font-size'\"\r\n            @click=\"showingMenu = 'font-size'\"\r\n            @mouseenter=\"showingMenu = 'font-size'\"\r\n          />\r\n          <ToolbarFontButton\r\n            ref=\"btnColor\"\r\n            :title=\"$t('SV.LIT_FontColor')\"\r\n            icon=\"fa-light fa-font\"\r\n            :color=\"activeFontColor\"\r\n            :active=\"showingMenu === 'font-color'\"\r\n            @click=\"showingMenu = 'font-color'\"\r\n            @mouseenter=\"showingMenu = 'font-color'\"\r\n          />\r\n          <ToolbarFontButton\r\n            ref=\"btnHighlight\"\r\n            :title=\"$t('SV.LIT_HighlightColor')\"\r\n            icon=\"fa-light fa-highlighter\"\r\n            :class=\"{ hidden: applyToPart === 'lyrics' }\"\r\n            :color=\"activeHighlightColor\"\r\n            :active=\"showingMenu === 'highlight-color'\"\r\n            @click=\"showingMenu = 'highlight-color'\"\r\n            @mouseenter=\"showingMenu = 'highlight-color'\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      <div\r\n        v-if=\"showingMenu === 'font-family' && contentEl\"\r\n        class=\"extended-options\"\r\n      >\r\n        <ToolbarButtonDropdownHeader>{{ $t('S.LIT_FontFamilyTC') }}</ToolbarButtonDropdownHeader>\r\n        <ToolbarButtonDropdownItem\r\n          v-for=\"f of AvailableFontFamilies\"\r\n          :key=\"f.type\"\r\n          :active=\"(settings && settings.family === f.type) || false\"\r\n          data-content-action=\"applyFontFamily\"\r\n          :data-content-type=\"enableChords ? 'ChordSheet' : 'Lyrics'\"\r\n          :data-sheet-font-family=\"f.type\"\r\n          class=\"ga-apply-font-family\"\r\n          @click=\"applyFamily(f.type)\"\r\n          ><span :style=\"`font-family:${f.fontFamilyName}`\">{{\r\n            f.type\r\n          }}</span></ToolbarButtonDropdownItem\r\n        >\r\n      </div>\r\n      <div\r\n        v-if=\"showingMenu === 'font-size' && settings\"\r\n        class=\"extended-options\"\r\n      >\r\n        <ToolbarButtonDropdownHeader>{{\r\n          $t(\"S.LIT_FontSizeTC\")\r\n        }}</ToolbarButtonDropdownHeader>\r\n        <FormSlider\r\n          v-model=\"settings.size\"\r\n          :class=\"enableChords ? 'ga-chordsheet-settings-font-size' : 'ga-lyrics-settings-font-size'\"\r\n          name=\"FontSize\"\r\n          data-content-action=\"applyFontSize\"\r\n          :data-content-type=\"enableChords ? 'ChordSheet' : 'Lyrics'\"\r\n          :label=\"$t('S.LIT_FontSizeTC')\"\r\n          :increase-label=\"$t('SV.LIT_IncreaseFontSize')\"\r\n          :decrease-label=\"$t('SV.LIT_DecreaseFontSize')\"\r\n          min=\"10\"\r\n          max=\"32\"\r\n          hide-label\r\n        />\r\n      </div>\r\n      <div\r\n        v-if=\"showingMenu === 'font-color' && settings\"\r\n        class=\"extended-options\"\r\n      >\r\n        <ToolbarButtonDropdownHeader>{{ $t('SV.LIT_FontColor') }}</ToolbarButtonDropdownHeader>\r\n        <ColorSelection\r\n          v-model=\"settings.color\"\r\n          class=\"ga-apply-font-color\"\r\n          :options=\"AvailableTextColors\"\r\n          data-content-action=\"applyFontColor\"\r\n          :data-content-type=\"enableChords ? 'ChordSheet' : 'Lyrics'\"\r\n        />\r\n      </div>\r\n      <div\r\n        v-if=\"\r\n          showingMenu === 'highlight-color' &&\r\n          settings &&\r\n          applyToPart !== 'lyrics'\r\n        \"\r\n        class=\"extended-options\"\r\n      >\r\n        <ToolbarButtonDropdownHeader\r\n          >{{ $t('SV.LIT_HighlightColor') }}</ToolbarButtonDropdownHeader\r\n        >\r\n        <ColorSelection\r\n          v-model=\"settings.highlight\"\r\n          class=\"ga-apply-highlight-color\"\r\n          data-content-action=\"applyHighlightColor\"\r\n          :data-content-type=\"enableChords ? 'ChordSheet' : 'Lyrics'\"\r\n          :options=\"AvailableHighlightColors\"\r\n        />\r\n      </div>\r\n    </ToolbarButtonDropdown>\r\n  </ToolbarButtonGroup>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.extended-options {\r\n  @apply rounded-lg  bg-gray-100 p-2;\r\n}\r\n:deep() {\r\n  input[type=\"range\"] {\r\n    @apply w-24 bg-gray-200;\r\n  }\r\n}\r\n</style>\r\n","<script setup lang=\"ts\">\r\nconst props = defineProps<{\r\n  modelValue: boolean;\r\n}>();\r\n\r\nconst emits = defineEmits<{\r\n  (e: \"update:modelValue\", value: boolean): void;\r\n}>();\r\n\r\nconst { t } = useI18n();\r\n\r\nconst value = computed({\r\n  get: () => {\r\n    return props.modelValue;\r\n  },\r\n  set: (newValue: boolean) => {\r\n    emits(\"update:modelValue\", newValue);\r\n  },\r\n});\r\n\r\nconst options = computed(() => [\r\n  {\r\n    value: false,\r\n    label: t(\"SV.LIT_OneColumnLayout\"),\r\n    icon: \"fa-align-justify\",\r\n    key: \"one-col\",\r\n  },\r\n  {\r\n    value: true,\r\n    label: t(\"S.LIT_TwoColumnLayout\"),\r\n    icon: \"fa-line-columns\",\r\n    key: \"two-col\",\r\n  },\r\n]);\r\n</script>\r\n\r\n<template>\r\n  <ToolbarButtonGroup\r\n    :title=\"$t('SV.LIT_Columns')\"\r\n    class=\"hidden xl:block\"\r\n  >\r\n    <ToolbarButton\r\n      v-for=\"o of options\"\r\n      :key=\"o.key\"\r\n      :icon=\"o.icon\"\r\n      :label=\"o.label\"\r\n      @click=\"value = o.value\"\r\n      :active=\"value === o.value\"\r\n    />\r\n  </ToolbarButtonGroup>\r\n  <ToolbarButtonDropdown\r\n    :label=\"$t('SV.LIT_Columns')\"\r\n    icon=\"fa-line-columns\"\r\n    class=\"xl:hidden\"\r\n  >\r\n    <ToolbarButtonDropdownHeader>{{\r\n      $t(\"SV.LIT_Columns\")\r\n    }}</ToolbarButtonDropdownHeader>\r\n    <ToolbarButtonDropdownItem\r\n      v-for=\"o of options\"\r\n      :key=\"o.key\"\r\n      :icon=\"o.icon\"\r\n      @click=\"value = o.value\"\r\n      :active=\"value === o.value\"\r\n    >\r\n      {{ o.label }}\r\n    </ToolbarButtonDropdownItem>\r\n  </ToolbarButtonDropdown>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\"></style>\r\n","<script setup lang=\"ts\">\r\nconst { t } = useI18n();\r\nconst props = defineProps<{\r\n  modelValue?: string;\r\n  title?: string;\r\n  lyrics?: boolean;\r\n  chordSheet?: boolean;\r\n}>();\r\n\r\nconst toolbarTitle = computed(() => props.title || t(\"S.LIT_FontSizeTC\"));\r\n\r\nconst emits = defineEmits<{\r\n  (e: \"update:modelValue\", value: string): void;\r\n}>();\r\n\r\nconst value = computed({\r\n  get: () => {\r\n    return props.modelValue || \"10\";\r\n  },\r\n  set: (newValue: string) => {\r\n    emits(\"update:modelValue\", newValue);\r\n  },\r\n});\r\n</script>\r\n\r\n<template>\r\n  <ToolbarButtonGroup\r\n    :title=\"toolbarTitle\"\r\n    class=\"hidden xl:block\"\r\n  >\r\n    <FormSlider\r\n      id=\"LyricsFontSizeInput\"\r\n      v-model=\"value\"\r\n      name=\"FontSize\"\r\n      class=\"desktop-slider my-0\"\r\n      :class=\"{\r\n        'ga-scale-lyrics-font-size' : lyrics,\r\n        'ga-scale-chordsheet-font-size' : chordSheet\r\n      }\"\r\n      data-content-action=\"scaleFontSize\"\r\n      :data-content-type=\"lyrics ? 'Lyrics' : 'ChordSheet'\"\r\n      :label=\"toolbarTitle\"\r\n      :increase-label=\"$t('SV.LIT_IncreaseFontSize')\"\r\n      :decrease-label=\"$t('SV.LIT_DecreaseFontSize')\"\r\n      min=\"10\"\r\n      max=\"32\"\r\n      hide-label\r\n    />\r\n  </ToolbarButtonGroup>\r\n  <div class=\"xl:hidden\">\r\n    <div class=\"label hidden xl:block\">{{ toolbarTitle }}</div>\r\n    <ToolbarButtonDropdown\r\n      :label=\"`${toolbarTitle}: ${value}`\"\r\n      icon=\"fa-text-size\"\r\n      html-only\r\n      disable-content-auto-close\r\n    >\r\n      <ToolbarButtonDropdownHeader>{{\r\n        toolbarTitle\r\n      }}</ToolbarButtonDropdownHeader>\r\n      <div\r\n        class=\"p-2\"\r\n        style=\"width: 200px\"\r\n      >\r\n        <FormSlider\r\n          id=\"LyricsFontSizeInput\"\r\n          v-model=\"value\"\r\n          name=\"FontSize\"\r\n          class=\"my-0\"\r\n          :class=\"{\r\n            'ga-scale-lyrics-font-size' : lyrics,\r\n            'ga-scale-chordsheet-font-size' : chordSheet\r\n          }\"\r\n          data-content-action=\"scaleFontSize\"\r\n          :data-content-type=\"lyrics ? 'Lyrics' : 'ChordSheet'\"\r\n          :label=\"toolbarTitle\"\r\n          :increase-label=\"$t('SV.LIT_IncreaseFontSize')\"\r\n          :decrease-label=\"$t('SV.LIT_DecreaseFontSize')\"\r\n          min=\"10\"\r\n          max=\"32\"\r\n          hide-label\r\n        />\r\n      </div>\r\n    </ToolbarButtonDropdown>\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"postcss\">\r\n.desktop-slider {\r\n  :deep() {\r\n    .range-group {\r\n      height: 44px;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["emits","__emit","modals","useModalStore","emitter","value","_useModel","__props","dark","useDarkModeStore","props","emit","data","computed","newValue","increase","decrease","watch","v","AvailableFontFamilies","AvailableTextColors","AvailableHighlightColors","t","useI18n","applyToPart","ref","showingMenu","btnFamily","btnSize","btnColor","btnHighlight","applyOptions","selectedOption","_a","o","settings","clearTitle","onMounted","resetSettings","onBeforeUnmount","confirm","useToastStore","applyFamily","fontFamilyType","activeFontColor","color","c","activeHighlightColor","dropdown","contentEl","_c","_b","loadFonts","f","loadFont","options","toolbarTitle"],"mappings":"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"}