@chayns-components/core 5.0.0-beta.829 → 5.0.0-beta.830

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -69,7 +69,7 @@ const getThumbMaxWidth = ({
69
69
  const element = document.createElement('span');
70
70
  element.style.height = '20px';
71
71
  element.style.display = 'flex';
72
- element.style.padding = '0 8px';
72
+ element.style.padding = '16px';
73
73
  element.style.whiteSpace = 'nowrap';
74
74
  element.style.minWidth = '20px';
75
75
  element.style.opacity = '0';
@@ -1 +1 @@
1
- {"version":3,"file":"slider.js","names":["fillSlider","fromSlider","toSlider","theme","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","exports","calculateGradientOffset","thumbWidth","containerWidth","percentage","adjustedWidth","calculatePopupPosition","sliderValue","popupWidth","leftAtMin","leftAtMax","getThumbMaxWidth","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n fromSlider: HTMLInputElement;\n toSlider: HTMLInputElement;\n theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme }: FillSlider) => {\n const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n const fromPosition = Number(fromSlider.value) - Number(toSlider.min);\n const toPosition = Number(toSlider.value) - Number(toSlider.min);\n\n const backgroundColor = theme['403'];\n const trackColor = theme['409'];\n\n if (!backgroundColor || !trackColor) {\n return;\n }\n\n const gradient = `linear-gradient(\n to right,\n ${backgroundColor} 0%,\n ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n ${backgroundColor} 100%)`;\n\n // Apply the gradient to the appropriate slider\n // eslint-disable-next-line no-param-reassign\n toSlider.style.background = gradient;\n // eslint-disable-next-line no-param-reassign\n fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n value: number;\n min: number;\n max: number;\n thumbWidth: number;\n containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n value,\n min,\n max,\n thumbWidth,\n containerWidth,\n}: CalculateGradientOffset): number => {\n const percentage = (value - min) / (max - min);\n\n const adjustedWidth = containerWidth - thumbWidth / 2;\n\n return percentage * adjustedWidth + thumbWidth / 2;\n};\n\ninterface GetThumbMaxWidthOptions {\n maxNumber: number;\n thumbLabelFormatter?: (value: number) => string;\n}\n\ninterface CalculatePopupPositionOptions {\n sliderValue: number;\n min: number;\n max: number;\n popupWidth: number;\n}\n\nexport const calculatePopupPosition = ({\n sliderValue,\n min,\n max,\n popupWidth,\n}: CalculatePopupPositionOptions) => {\n // Berechnung des Prozentwerts des Sliders zwischen min und max\n const percentage = (sliderValue - min) / (max - min);\n\n // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)\n const leftAtMin = -10;\n const leftAtMax = -popupWidth + 25;\n\n // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert\n return leftAtMin + percentage * (leftAtMax - leftAtMin);\n};\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n const element = document.createElement('span');\n\n element.style.height = '20px';\n element.style.display = 'flex';\n element.style.padding = '0 8px';\n element.style.whiteSpace = 'nowrap';\n element.style.minWidth = '20px';\n element.style.opacity = '0';\n element.style.position = 'absolute';\n\n element.textContent =\n typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(maxNumber)\n : String(maxNumber);\n\n document.body.appendChild(element);\n\n const width = element.offsetWidth;\n\n document.body.removeChild(element);\n\n return width;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"slider.js","names":["fillSlider","fromSlider","toSlider","theme","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","exports","calculateGradientOffset","thumbWidth","containerWidth","percentage","adjustedWidth","calculatePopupPosition","sliderValue","popupWidth","leftAtMin","leftAtMax","getThumbMaxWidth","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n fromSlider: HTMLInputElement;\n toSlider: HTMLInputElement;\n theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme }: FillSlider) => {\n const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n const fromPosition = Number(fromSlider.value) - Number(toSlider.min);\n const toPosition = Number(toSlider.value) - Number(toSlider.min);\n\n const backgroundColor = theme['403'];\n const trackColor = theme['409'];\n\n if (!backgroundColor || !trackColor) {\n return;\n }\n\n const gradient = `linear-gradient(\n to right,\n ${backgroundColor} 0%,\n ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n ${backgroundColor} 100%)`;\n\n // Apply the gradient to the appropriate slider\n // eslint-disable-next-line no-param-reassign\n toSlider.style.background = gradient;\n // eslint-disable-next-line no-param-reassign\n fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n value: number;\n min: number;\n max: number;\n thumbWidth: number;\n containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n value,\n min,\n max,\n thumbWidth,\n containerWidth,\n}: CalculateGradientOffset): number => {\n const percentage = (value - min) / (max - min);\n\n const adjustedWidth = containerWidth - thumbWidth / 2;\n\n return percentage * adjustedWidth + thumbWidth / 2;\n};\n\ninterface GetThumbMaxWidthOptions {\n maxNumber: number;\n thumbLabelFormatter?: (value: number) => string;\n}\n\ninterface CalculatePopupPositionOptions {\n sliderValue: number;\n min: number;\n max: number;\n popupWidth: number;\n}\n\nexport const calculatePopupPosition = ({\n sliderValue,\n min,\n max,\n popupWidth,\n}: CalculatePopupPositionOptions) => {\n // Berechnung des Prozentwerts des Sliders zwischen min und max\n const percentage = (sliderValue - min) / (max - min);\n\n // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)\n const leftAtMin = -10;\n const leftAtMax = -popupWidth + 25;\n\n // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert\n return leftAtMin + percentage * (leftAtMax - leftAtMin);\n};\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n const element = document.createElement('span');\n\n element.style.height = '20px';\n element.style.display = 'flex';\n element.style.padding = '16px';\n element.style.whiteSpace = 'nowrap';\n element.style.minWidth = '20px';\n element.style.opacity = '0';\n element.style.position = 'absolute';\n\n element.textContent =\n typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(maxNumber)\n : String(maxNumber);\n\n document.body.appendChild(element);\n\n const width = element.offsetWidth;\n\n document.body.removeChild(element);\n\n return width;\n};\n"],"mappings":"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","ignoreList":[]}
@@ -64,7 +64,7 @@ export const getThumbMaxWidth = _ref4 => {
64
64
  const element = document.createElement('span');
65
65
  element.style.height = '20px';
66
66
  element.style.display = 'flex';
67
- element.style.padding = '0 8px';
67
+ element.style.padding = '16px';
68
68
  element.style.whiteSpace = 'nowrap';
69
69
  element.style.minWidth = '20px';
70
70
  element.style.opacity = '0';
@@ -1 +1 @@
1
- {"version":3,"file":"slider.js","names":["fillSlider","_ref","fromSlider","toSlider","theme","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","calculateGradientOffset","_ref2","thumbWidth","containerWidth","percentage","adjustedWidth","calculatePopupPosition","_ref3","sliderValue","popupWidth","leftAtMin","leftAtMax","getThumbMaxWidth","_ref4","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n fromSlider: HTMLInputElement;\n toSlider: HTMLInputElement;\n theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme }: FillSlider) => {\n const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n const fromPosition = Number(fromSlider.value) - Number(toSlider.min);\n const toPosition = Number(toSlider.value) - Number(toSlider.min);\n\n const backgroundColor = theme['403'];\n const trackColor = theme['409'];\n\n if (!backgroundColor || !trackColor) {\n return;\n }\n\n const gradient = `linear-gradient(\n to right,\n ${backgroundColor} 0%,\n ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n ${backgroundColor} 100%)`;\n\n // Apply the gradient to the appropriate slider\n // eslint-disable-next-line no-param-reassign\n toSlider.style.background = gradient;\n // eslint-disable-next-line no-param-reassign\n fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n value: number;\n min: number;\n max: number;\n thumbWidth: number;\n containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n value,\n min,\n max,\n thumbWidth,\n containerWidth,\n}: CalculateGradientOffset): number => {\n const percentage = (value - min) / (max - min);\n\n const adjustedWidth = containerWidth - thumbWidth / 2;\n\n return percentage * adjustedWidth + thumbWidth / 2;\n};\n\ninterface GetThumbMaxWidthOptions {\n maxNumber: number;\n thumbLabelFormatter?: (value: number) => string;\n}\n\ninterface CalculatePopupPositionOptions {\n sliderValue: number;\n min: number;\n max: number;\n popupWidth: number;\n}\n\nexport const calculatePopupPosition = ({\n sliderValue,\n min,\n max,\n popupWidth,\n}: CalculatePopupPositionOptions) => {\n // Berechnung des Prozentwerts des Sliders zwischen min und max\n const percentage = (sliderValue - min) / (max - min);\n\n // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)\n const leftAtMin = -10;\n const leftAtMax = -popupWidth + 25;\n\n // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert\n return leftAtMin + percentage * (leftAtMax - leftAtMin);\n};\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n const element = document.createElement('span');\n\n element.style.height = '20px';\n element.style.display = 'flex';\n element.style.padding = '0 8px';\n element.style.whiteSpace = 'nowrap';\n element.style.minWidth = '20px';\n element.style.opacity = '0';\n element.style.position = 'absolute';\n\n element.textContent =\n typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(maxNumber)\n : String(maxNumber);\n\n document.body.appendChild(element);\n\n const width = element.offsetWidth;\n\n document.body.removeChild(element);\n\n return width;\n};\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"slider.js","names":["fillSlider","_ref","fromSlider","toSlider","theme","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","calculateGradientOffset","_ref2","thumbWidth","containerWidth","percentage","adjustedWidth","calculatePopupPosition","_ref3","sliderValue","popupWidth","leftAtMin","leftAtMax","getThumbMaxWidth","_ref4","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n fromSlider: HTMLInputElement;\n toSlider: HTMLInputElement;\n theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme }: FillSlider) => {\n const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n const fromPosition = Number(fromSlider.value) - Number(toSlider.min);\n const toPosition = Number(toSlider.value) - Number(toSlider.min);\n\n const backgroundColor = theme['403'];\n const trackColor = theme['409'];\n\n if (!backgroundColor || !trackColor) {\n return;\n }\n\n const gradient = `linear-gradient(\n to right,\n ${backgroundColor} 0%,\n ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n ${backgroundColor} 100%)`;\n\n // Apply the gradient to the appropriate slider\n // eslint-disable-next-line no-param-reassign\n toSlider.style.background = gradient;\n // eslint-disable-next-line no-param-reassign\n fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n value: number;\n min: number;\n max: number;\n thumbWidth: number;\n containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n value,\n min,\n max,\n thumbWidth,\n containerWidth,\n}: CalculateGradientOffset): number => {\n const percentage = (value - min) / (max - min);\n\n const adjustedWidth = containerWidth - thumbWidth / 2;\n\n return percentage * adjustedWidth + thumbWidth / 2;\n};\n\ninterface GetThumbMaxWidthOptions {\n maxNumber: number;\n thumbLabelFormatter?: (value: number) => string;\n}\n\ninterface CalculatePopupPositionOptions {\n sliderValue: number;\n min: number;\n max: number;\n popupWidth: number;\n}\n\nexport const calculatePopupPosition = ({\n sliderValue,\n min,\n max,\n popupWidth,\n}: CalculatePopupPositionOptions) => {\n // Berechnung des Prozentwerts des Sliders zwischen min und max\n const percentage = (sliderValue - min) / (max - min);\n\n // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)\n const leftAtMin = -10;\n const leftAtMax = -popupWidth + 25;\n\n // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert\n return leftAtMin + percentage * (leftAtMax - leftAtMin);\n};\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n const element = document.createElement('span');\n\n element.style.height = '20px';\n element.style.display = 'flex';\n element.style.padding = '16px';\n element.style.whiteSpace = 'nowrap';\n element.style.minWidth = '20px';\n element.style.opacity = '0';\n element.style.position = 'absolute';\n\n element.textContent =\n typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(maxNumber)\n : String(maxNumber);\n\n document.body.appendChild(element);\n\n const width = element.offsetWidth;\n\n document.body.removeChild(element);\n\n return width;\n};\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/core",
3
- "version": "5.0.0-beta.829",
3
+ "version": "5.0.0-beta.830",
4
4
  "description": "A set of beautiful React components for developing your own applications with chayns.",
5
5
  "sideEffects": false,
6
6
  "browserslist": [
@@ -85,5 +85,5 @@
85
85
  "publishConfig": {
86
86
  "access": "public"
87
87
  },
88
- "gitHead": "2a2936d5cc98ace0907ea07d2007d86d62eafc29"
88
+ "gitHead": "bb0c2f6007930ffa7babd28d390a73e23fe33891"
89
89
  }