{"version":3,"file":"FormSlider-wLdovCYM.js","sources":["../../../resources/js/components/FormSlider.vue"],"sourcesContent":["<template>\n  <div>\n    <FormLabel v-if=\"label\" :label=\"label\" :required=\"required\"/>\n    <div class=\"w-full text-slate-900 range-slider grad parent\"\n         :style=\"sliderVariables\">\n      <input type=\"range\"\n             :min=\"min\"\n             :max=\"max\"\n             :step=\"step\"\n             :value=\"rawModelValue\"\n             tabindex=\"0\"\n             @input=\"updateModelValue\"\n             @change=\"updateModelValue\"/>\n      <output v-if=\"showOutput\" class=\"whitespace-nowrap child-hover\">\n        {{ outputPrefix }} {{ formattedModelValue(modelValue) }} {{ outputSuffix }}\n      </output>\n      <div class='range-slider__progress'></div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport FormLabel from \"./FormLabel.vue\";\nimport {computed} from \"vue\";\nimport {gradientAtPositionSelector} from \"../helpers/GradientAtPositionSelector.js\";\n\nconst emits = defineEmits([\"update:modelValue\"]);\nconst props = defineProps({\n  modelValue: {\n    type: Number,\n    default: 0,\n  },\n  label: {\n    type: String,\n    default: \"\",\n  },\n  required: {\n    type: Boolean,\n  },\n  min: {\n    type: Number,\n    default: 0,\n  },\n  max: {\n    type: Number,\n    default: 10,\n  },\n  step: {\n    type: Number,\n    default: 1,\n  },\n  format: {\n    type: String,\n    default: \"number\",\n  },\n  exponential: {\n    type: Boolean,\n    default: false,\n  },\n  showOutput: {\n    type: Boolean,\n    default: false,\n  },\n  outputPrefix: {\n    type: String,\n    default: \"\",\n  },\n  outputSuffix: {\n    type: String,\n    default: \"\",\n  },\n  progressBackground: {\n    type: String,\n    default: \"#e2e8f0\"\n  },\n  ticksColor: {\n    type: String,\n    default: \"#e2e8f0\",\n  },\n  pseudoMinMaxColor: {\n    type: String,\n    default: \"#000\",\n  },\n  hideMinMax: {\n    type: Boolean,\n    default: false,\n  },\n});\n\nconst formattedModelValue = (modelValue) => {\n  if (props.format === \"usd\") {\n    return modelValue.toLocaleString(\"en-US\", {\n      style: \"currency\",\n      currency: \"USD\",\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    });\n  } else if (props.format === \"percentage\") {\n    return `${Math.round(modelValue * 100)}%`;\n  } else {\n    return \"\" + modelValue;\n  }\n};\n\nconst rawModelValue = computed(() => {\n  if (props.exponential) return Math.round(Math.cbrt(props.modelValue / props.max) * props.max);\n  return props.modelValue;\n});\n\nconst updateModelValue = (e) => {\n  const rawValue = props.step === 1 ? parseInt(e.target.value) : parseFloat(e.target.value);\n\n  if (props.exponential) {\n    const exponentialValue = Math.round(Math.pow(rawValue / props.max, 3) * props.max);\n    emits(\"update:modelValue\", exponentialValue);\n  } else {\n    emits(\"update:modelValue\", rawValue);\n  }\n};\n\nlet colorObject;\nconst primaryColor = computed(() => {\n  colorObject = gradientAtPositionSelector(props.modelValue || 1, props.max || 1);\n  return `rgb(${colorObject.red - 60}, ${colorObject.green - 60}, ${colorObject.blue - 60})`;\n});\n\nconst sliderVariables = computed(() => {\n  return `--min:${props.min};--max:${props.max};--step:${props.step};--value:${rawModelValue.value};--text-value:${formattedModelValue(props.modelValue)};--prefix: ${props.outputPrefix};--suffix: ${props.outputSuffix};--primary-color:${primaryColor.value};--progress-background:${props.progressBackground};--ticks-color:${props.ticksColor};--sudo-min-max-color:${props.pseudoMinMaxColor};--show-min-max:${props.hideMinMax ? \"none\" : \"block\"};'`;\n});\n</script>\n\n<style>\n.parent .child-hover {\n  opacity: 0;\n}\n\n.parent:hover .child-hover {\n  opacity: 1;\n}\n\n.range-slider.grad {\n  --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) inset;\n  --progress-flll-shadow: var(--progress-shadow);\n  --fill-color: linear-gradient(to right, #5FB0DB, #8d4691, #dd605c, #e8ae57);\n  --thumb-shadow: 0 0 4px rgba(0, 0, 0, 0.3),\n  -3px 9px 9px rgba(255, 255, 255, 0.33) inset,\n  -1px 3px 2px rgba(255, 255, 255, 0.33) inset,\n  0 0 0 99px var(--primary-color) inset;\n}\n\n.range-slider.grad input:hover {\n  --thumb-transform: scale(1.2);\n}\n\n.range-slider.grad input:active {\n  --thumb-shadow: inherit;\n  --thumb-transform: scale(1);\n}\n\n.range-slider.overlay input:hover {\n  --thumb-shadow: calc(25px - (50px * var(--is-left-most))) 0 0 -15px #e8ae57 inset;\n}\n\n.range-slider.overlay input:active {\n  --thumb-color: inherit;\n}\n\n.range-slider {\n  --value-offset-y: var(--ticks-gap);\n  --value-active-color: white;\n  --value-background: transparent;\n  --value-background-hover: var(--primary-color);\n  --value-font: 700 12px/1 Arial;\n  --fill-color: var(--primary-color);\n  --progress-radius: 20px;\n  --track-height: calc(var(--thumb-size) / 2);\n  --min-max-font: 12px Arial;\n  --min-max-opacity: 0.5;\n  --min-max-x-offset: 10%;\n  --thumb-size: 22px;\n  --thumb-color: white;\n  --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) inset,\n  0 0 0 99px var(--thumb-color) inset;\n  --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color),\n  0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0, 0, 0, 0.4);\n  --thumb-shadow-hover: var(--thumb-shadow);\n  --ticks-thickness: 1px;\n  --ticks-height: 5px;\n  --ticks-gap: var(\n    --ticks-height,\n    0\n  );\n  --step: 1;\n  --ticks-count: Calc(var(--max) - var(--min)) / var(--step);\n  --maxTicksAllowed: 30;\n  --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));\n  --x-step: Max(\n    var(--step),\n    var(--too-many-ticks) * (var(--max) - var(--min))\n  );\n  --tickInterval: 100 / ((var(--max) -var(--min)) / var(--step)) * var(--tickEvery, 1);\n  --tickIntervalPerc: calc(\n    (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) *\n    var(--tickEvery, 1)\n  );\n  --value-a: Clamp(\n    var(--min),\n    var(--value, 0),\n    var(--max)\n  );\n  --value-b: var(--value, 0);\n  --text-value-a: var(--text-value, \"\");\n  --completed-a: calc(\n    (var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100\n  );\n  --completed-b: calc(\n    (var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100\n  );\n  --ca: Min(var(--completed-a), var(--completed-b));\n  --cb: Max(var(--completed-a), var(--completed-b));\n  --thumbs-too-close: Clamp(\n    -1,\n    1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001),\n    1\n  );\n  --thumb-close-to-min: Min(1, Max(var(--ca) - 2, 0));\n  --thumb-close-to-max: Min(1, Max(98 - var(--cb), 0));\n  display: inline-block;\n  height: max(var(--track-height), var(--thumb-size));\n  background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;\n  background-size: var(--tickIntervalPerc) var(--ticks-height);\n  background-position-x: calc(var(--thumb-size) / 2 - var(--ticks-thickness) / 2);\n  background-position-y: var(--flip-y, bottom);\n  padding-bottom: var(--flip-y, var(--ticks-gap));\n  padding-top: calc(var(--flip-y) * var(--ticks-gap));\n  position: relative;\n  z-index: 1;\n}\n\n.range-slider[data-ticks-position=top] {\n  --flip-y: 1;\n}\n\n.range-slider::before, .range-slider::after {\n  --offset: calc(var(--thumb-size) / 2);\n  content: counter(x);\n  display: var(--show-min-max, block);\n  font: var(--min-max-font);\n  position: absolute;\n  bottom: var(--flip-y, -2.5ch);\n  top: calc(-2.5ch * var(--flip-y));\n  opacity: clamp(0, var(--at-edge), var(--min-max-opacity));\n  transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));\n  pointer-events: none;\n  color: var(--sudo-min-max-color);\n}\n\n.range-slider::before {\n  --before: 1;\n  --at-edge: var(--thumb-close-to-min);\n  counter-reset: x var(--min);\n  left: var(--offset);\n}\n\n.range-slider::after {\n  --at-edge: var(--thumb-close-to-max);\n  counter-reset: x var(--max);\n  right: var(--offset);\n}\n\n.range-slider__progress {\n  --start-end: calc(var(--thumb-size) / 2);\n  --clip-end: calc(100% - (var(--cb)) * 1%);\n  --clip-start: calc(var(--ca) * 1%);\n  --clip: inset(-20px var(--clip-end) -20px var(--clip-start));\n  position: absolute;\n  left: var(--start-end);\n  right: var(--start-end);\n  top: calc(var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2);\n  height: calc(var(--track-height));\n  background: var(--progress-background, #eee);\n  pointer-events: none;\n  z-index: -1;\n  border-radius: var(--progress-radius);\n}\n\n.range-slider__progress::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  -webkit-clip-path: var(--clip);\n  clip-path: var(--clip);\n  top: 0;\n  bottom: 0;\n  background: var(--fill-color, black);\n  box-shadow: var(--progress-flll-shadow);\n  z-index: 1;\n  border-radius: inherit;\n}\n\n.range-slider__progress::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  box-shadow: var(--progress-shadow);\n  pointer-events: none;\n  border-radius: inherit;\n}\n\n.range-slider > input {\n  -webkit-appearance: none;\n  width: 100%;\n  height: var(--thumb-size);\n  margin: 0;\n  position: absolute;\n  left: 0;\n  top: calc(50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y, -1)));\n  cursor: -webkit-grab;\n  cursor: grab;\n  outline: none;\n  background: none;\n}\n\n.range-slider > input:not(:only-of-type) {\n  pointer-events: none;\n}\n\n.range-slider > input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  transform: var(--thumb-transform);\n  border-radius: var(--thumb-radius, 50%);\n  background: var(--thumb-color);\n  box-shadow: var(--thumb-shadow);\n  border: none;\n  pointer-events: auto;\n  -webkit-transition: 0.1s;\n  transition: 0.1s;\n}\n\n.range-slider > input::-moz-range-thumb {\n  -moz-appearance: none;\n  appearance: none;\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  transform: var(--thumb-transform);\n  border-radius: var(--thumb-radius, 50%);\n  background: var(--thumb-color);\n  box-shadow: var(--thumb-shadow);\n  border: none;\n  pointer-events: auto;\n  -moz-transition: 0.1s;\n  transition: 0.1s;\n}\n\n.range-slider > input::-ms-thumb {\n  appearance: none;\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  transform: var(--thumb-transform);\n  border-radius: var(--thumb-radius, 50%);\n  background: var(--thumb-color);\n  box-shadow: var(--thumb-shadow);\n  border: none;\n  pointer-events: auto;\n  -ms-transition: 0.1s;\n  transition: 0.1s;\n}\n\n.range-slider > input:hover {\n  --thumb-shadow: var(--thumb-shadow-hover);\n}\n\n.range-slider > input:hover + output {\n  --value-background: var(--value-background-hover);\n  --y-offset: -5px;\n  color: var(--value-active-color);\n  box-shadow: 0 0 0 3px var(--value-background);\n}\n\n.range-slider > input:active {\n  --thumb-shadow: var(--thumb-shadow-active);\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n  z-index: 2;\n}\n\n.range-slider > input:active + output {\n  transition: 0s;\n}\n\n.range-slider > input:nth-of-type(1) {\n  --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1);\n}\n\n.range-slider > input:nth-of-type(1) + output {\n  --value: var(--value-a);\n  --x-offset: calc(var(--completed-a) * -1%);\n}\n\n.range-slider > input:nth-of-type(1) + output:not(:only-of-type) {\n  --flip: calc(var(--thumbs-too-close) * -1);\n}\n\n.range-slider > input:nth-of-type(1) + output::after {\n  content: var(--prefix, \"\") var(--text-value-a) var(--suffix, \"\");\n}\n\n.range-slider > input:nth-of-type(2) {\n  --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1);\n}\n\n.range-slider > input:nth-of-type(2) + output {\n  --value: var(--value-b);\n}\n\n.range-slider > input:only-of-type ~ .range-slider__progress {\n  --clip-start: 0;\n}\n\n.range-slider > input + output {\n  --flip: -1;\n  --x-offset: calc(var(--completed-b) * -1%);\n  --pos: calc(\n    ((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%\n  );\n  pointer-events: none;\n  position: absolute;\n  z-index: 5;\n  background: var(--value-background);\n  border-radius: 10px;\n  padding: 2px 4px;\n  left: var(--pos);\n  transform: translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)));\n  transition: all 0.12s ease-out, left 0s;\n}\n\n.range-slider > input + output::after {\n  content: var(--prefix, \"\") var(--text-value-b) var(--suffix, \"\");\n  font: var(--value-font);\n}\n</style>\n"],"names":["emits","__emit","props","__props","formattedModelValue","modelValue","rawModelValue","computed","updateModelValue","e","rawValue","exponentialValue","colorObject","primaryColor","gradientAtPositionSelector","sliderVariables"],"mappings":"6rCA0BA,MAAMA,EAAQC,EACRC,EAAQC,EA8DRC,EAAuBC,GACvBH,EAAM,SAAW,MACZG,EAAW,eAAe,QAAS,CACxC,MAAO,WACP,SAAU,MACV,sBAAuB,EACvB,sBAAuB,CAC7B,CAAK,EACQH,EAAM,SAAW,aACnB,GAAG,KAAK,MAAMG,EAAa,GAAG,CAAC,IAE/B,GAAKA,EAIVC,EAAgBC,EAAS,IACzBL,EAAM,YAAoB,KAAK,MAAM,KAAK,KAAKA,EAAM,WAAaA,EAAM,GAAG,EAAIA,EAAM,GAAG,EACrFA,EAAM,UACd,EAEKM,EAAoBC,GAAM,CAC9B,MAAMC,EAAWR,EAAM,OAAS,EAAI,SAASO,EAAE,OAAO,KAAK,EAAI,WAAWA,EAAE,OAAO,KAAK,EAExF,GAAIP,EAAM,YAAa,CACrB,MAAMS,EAAmB,KAAK,MAAM,KAAK,IAAID,EAAWR,EAAM,IAAK,CAAC,EAAIA,EAAM,GAAG,EACjFF,EAAM,oBAAqBW,CAAgB,CAC/C,MACIX,EAAM,oBAAqBU,CAAQ,CAEvC,EAEA,IAAIE,EACJ,MAAMC,EAAeN,EAAS,KAC5BK,EAAcE,EAA2BZ,EAAM,YAAc,EAAGA,EAAM,KAAO,CAAC,EACvE,OAAOU,EAAY,IAAM,EAAE,KAAKA,EAAY,MAAQ,EAAE,KAAKA,EAAY,KAAO,EAAE,IACxF,EAEKG,EAAkBR,EAAS,IACxB,SAASL,EAAM,GAAG,UAAUA,EAAM,GAAG,WAAWA,EAAM,IAAI,YAAYI,EAAc,KAAK,iBAAiBF,EAAoBF,EAAM,UAAU,CAAC,cAAcA,EAAM,YAAY,cAAcA,EAAM,YAAY,oBAAoBW,EAAa,KAAK,0BAA0BX,EAAM,kBAAkB,kBAAkBA,EAAM,UAAU,yBAAyBA,EAAM,iBAAiB,mBAAmBA,EAAM,WAAa,OAAS,OAAO,IACvb"}