{"version":3,"file":"FormSlider-Cef0EH-k.js","sources":["../../Vue/src/config/FontSettings.ts","../../Vue/src/components/Common/FormSlider.vue"],"sourcesContent":["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 { 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"],"names":["AvailableFontFamilies","AvailableTextColors","AvailableHighlightColors","props","__props","emit","__emit","data","computed","newValue","increase","decrease","watch","v"],"mappings":"yKAEO,MAAMA,EAAwB,CACnC,CACE,KAAM,aACN,eAAgB,qCAChB,IAAK,mGACP,EACA,CACE,KAAM,QACN,eAAgB,gCAChB,IAAK,uIACP,EACA,CACE,KAAM,YACN,eAAgB,0CAChB,IAAK,qGACP,EACA,CACE,KAAM,cACN,eAAgB,2CAChB,IAAK,oGACP,CACF,EAEaC,EAAqC,CAChD,CAAE,KAAM,UAAW,MAAO,UAAW,KAAM,MAAO,EAClD,CACE,KAAM,OACN,MAAO,UACP,KAAM,SACR,EACA,CACE,KAAM,QACN,MAAO,UACP,KAAM,SACR,EAEA,CACE,KAAM,OACN,MAAO,UACP,KAAM,SACR,EAEA,CACE,KAAM,QACN,MAAO,UACP,KAAM,SACR,EACA,CACE,KAAM,UACN,MAAO,UACP,KAAM,SACR,EAEA,CACE,KAAM,SACN,MAAO,UACP,KAAM,SACR,EAEA,CACE,KAAM,SACN,MAAO,UACP,KAAM,SACR,EAEA,CACE,KAAM,MACN,MAAO,UACP,KAAM,SACR,EACA,CACE,KAAM,SACN,MAAO,UACP,KAAM,SACR,CACF,EAEaC,EAA0C,CACrD,CACE,KAAM,cACN,MAAO,gBACP,KAAM,eACR,EACA,CACE,KAAM,SACN,MAAO,UACP,KAAM,SACR,EACA,CACE,KAAM,QACN,MAAO,UACP,KAAM,SACR,EACA,CACE,KAAM,OACN,MAAO,UACP,KAAM,SACR,EACA,CACE,KAAM,UACN,MAAO,UACP,KAAM,SACR,EAEA,CACE,KAAM,OACN,MAAO,UACP,KAAM,SACR,EACA,CACE,KAAM,MACN,MAAO,UACP,KAAM,SACR,EACA,CACE,KAAM,WACN,MAAO,UACP,KAAM,SACR,EACA,CACE,KAAM,WACN,MAAO,UACP,KAAM,SACR,CACF,gdC3HA,MAAMC,EAAQC,EA0BRC,EAAOC,EAIPC,EAAOC,EAAS,CACpB,KAAM,CACJ,OAAOL,EAAM,UACf,EACA,IAAIM,EAAU,CACZJ,EAAK,oBAAqBI,CAAQ,CACpC,CAAA,CACD,EAED,SAASC,GAAW,CAClBH,EAAK,MAAQ,KAAK,IAChB,WAAWJ,EAAM,GAAG,EACpB,WAAWI,EAAK,KAAK,EAAI,WAAWJ,EAAM,IAAI,GAC9C,SAAS,CACb,CACA,SAASQ,GAAW,CAClBJ,EAAK,MAAQ,KAAK,IAChB,WAAWJ,EAAM,GAAG,EACpB,WAAWI,EAAK,KAAK,EAAI,WAAWJ,EAAM,IAAI,GAC9C,SAAS,CACb,CAEA,OAAAS,EACE,IAAML,EAAK,MACVM,GAAM,CACJ,OAAe,UAAU,KAAK,CAC7B,UAAWA,CAAA,CACZ,CACH,CAAA"}