@chayns-components/color-picker 5.0.0-beta.601 → 5.0.0-beta.603

package/lib/cjs/components/hue-slider/HueSlider.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _colors = require("@chayns/colors");
+var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../utils/color");
 var _HueSlider = require("./HueSlider.styles");
@@ -71,6 +72,7 @@ const HueSlider = ({
     return 0;
   }, [editedValue]);
   const handleStart = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.setRefreshScrollEnabled)(false);
     if (typeof onStart === 'function' && hslColor) {
       const hsl = (0, _color.extractHsl)(hslColor);
       if (!hsl) {
@@ -89,6 +91,7 @@ const HueSlider = ({
     }
   }, [hslColor, internalOpacity, onStart, opacity]);
   const handleEnd = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.setRefreshScrollEnabled)(true);
     if (typeof onEnd === 'function' && hslColor) {
       const hsl = (0, _color.extractHsl)(hslColor);
       if (!hsl) {

package/lib/cjs/components/hue-slider/HueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","names":["_colors","require","_react","_interopRequireWildcard","_color","_HueSlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HueSlider","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","useState","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","useRef","sliderRef","useEffect","rgb","splitRgb","g","b","hsl","convertColorToHsl","match","toString","parseInt","handleInputChange","useCallback","event","Number","target","value","percentage","hue","saturation","lightness","hslToRgb255","h","s","l","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","extractHsl","handleEnd","createElement","StyledHueSlider","StyledHueSliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledHueSliderThumb","$position","displayName","_default","exports"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        if (typeof onStart === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HueSlider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_color","_HueSlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HueSlider","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","useState","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","useRef","sliderRef","useEffect","rgb","splitRgb","g","b","hsl","convertColorToHsl","match","toString","parseInt","handleInputChange","useCallback","event","Number","target","value","percentage","hue","saturation","lightness","hslToRgb255","h","s","l","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","extractHsl","handleEnd","createElement","StyledHueSlider","StyledHueSliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledHueSliderThumb","$position","displayName","_default","exports"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/hue-slider/HueSlider.styles.js

@@ -14,6 +14,7 @@ const StyledHueSlider = exports.StyledHueSlider = _styledComponents.default.div`
     display: flex;
     align-items: center;
     justify-content: center;
+    touch-action: none;
 `;
 const StyledHueSliderInput = exports.StyledHueSliderInput = _styledComponents.default.input`
     width: calc(100% - 10px);

package/lib/cjs/components/hue-slider/HueSlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledHueSlider","exports","styled","div","StyledHueSliderInput","input","StyledHueSliderThumb","attrs","$position","$color","style","left","backgroundColor"],"sources":["../../../../src/components/hue-slider/HueSlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledHueSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(30, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(90, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(150, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(210, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(270, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(330, 100%, 50%),\n        hsl(360, 100%, 50%)\n    );\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        opacity: 0;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledHueSliderThumbProps = WithTheme<{ $position: number; $color: CSSProperties['color'] }>;\n\nexport const StyledHueSliderThumb = styled.div.attrs<StyledHueSliderThumbProps>(\n    ({ $position, $color }) => ({\n        style: {\n            left: `${$position}px`,\n            backgroundColor: $color,\n        },\n    }),\n)`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAI;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,oBAAoB,GAAAH,OAAA,CAAAG,oBAAA,GAAGF,yBAAM,CAACG,KAAiC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,oBAAoB,GAAAL,OAAA,CAAAK,oBAAA,GAAGJ,yBAAM,CAACC,GAAG,CAACI,KAAK,CAChD,CAAC;EAAEC,SAAS;EAAEC;AAAO,CAAC,MAAM;EACxBC,KAAK,EAAE;IACHC,IAAI,EAAG,GAAEH,SAAU,IAAG;IACtBI,eAAe,EAAEH;EACrB;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"HueSlider.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledHueSlider","exports","styled","div","StyledHueSliderInput","input","StyledHueSliderThumb","attrs","$position","$color","style","left","backgroundColor"],"sources":["../../../../src/components/hue-slider/HueSlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledHueSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(30, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(90, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(150, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(210, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(270, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(330, 100%, 50%),\n        hsl(360, 100%, 50%)\n    );\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        opacity: 0;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledHueSliderThumbProps = WithTheme<{ $position: number; $color: CSSProperties['color'] }>;\n\nexport const StyledHueSliderThumb = styled.div.attrs<StyledHueSliderThumbProps>(\n    ({ $position, $color }) => ({\n        style: {\n            left: `${$position}px`,\n            backgroundColor: $color,\n        },\n    }),\n)`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAI;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,oBAAoB,GAAAH,OAAA,CAAAG,oBAAA,GAAGF,yBAAM,CAACG,KAAiC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMC,oBAAoB,GAAAL,OAAA,CAAAK,oBAAA,GAAGJ,yBAAM,CAACC,GAAG,CAACI,KAAK,CAChD,CAAC;EAAEC,SAAS;EAAEC;AAAO,CAAC,MAAM;EACxBC,KAAK,EAAE;IACHC,IAAI,EAAG,GAAEH,SAAU,IAAG;IACtBI,eAAe,EAAEH;EACrB;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/transparency-slider/TransparencySlider.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _color = require("../../utils/color");
 var _TransparencySlider = require("./TransparencySlider.styles");
@@ -63,6 +64,7 @@ const TransparencySlider = ({
     return 0;
   }, [editedValue]);
   const handleStart = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.setRefreshScrollEnabled)(false);
     if (typeof onStart === 'function') {
       const rgb = (0, _color.splitRgb)(pureColor);
       if (!rgb) {
@@ -78,6 +80,7 @@ const TransparencySlider = ({
     }
   }, [editedValue, onStart, pureColor]);
   const handleEnd = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.setRefreshScrollEnabled)(true);
     if (typeof onEnd === 'function') {
       const rgb = (0, _color.splitRgb)(pureColor);
       if (!rgb) {

package/lib/cjs/components/transparency-slider/TransparencySlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransparencySlider.js","names":["_react","_interopRequireWildcard","require","_color","_TransparencySlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TransparencySlider","onChange","onStart","onEnd","color","editedValue","setEditedValue","useState","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","useRef","sliderRef","useEffect","rgb","splitRgb","g","b","newColor","handleInputChange","useCallback","event","Number","target","value","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","handleEnd","createElement","StyledTransparencySlider","StyledTransparencySliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledTransparencySliderBackground","StyledTransparencySliderThumbWrapper","$position","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","displayName","_default","exports"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TransparencySlider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_color","_TransparencySlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TransparencySlider","onChange","onStart","onEnd","color","editedValue","setEditedValue","useState","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","useRef","sliderRef","useEffect","rgb","splitRgb","g","b","newColor","handleInputChange","useCallback","event","Number","target","value","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","handleEnd","createElement","StyledTransparencySlider","StyledTransparencySliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledTransparencySliderBackground","StyledTransparencySliderThumbWrapper","$position","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","displayName","_default","exports"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/transparency-slider/TransparencySlider.styles.js

@@ -14,6 +14,7 @@ const StyledTransparencySlider = exports.StyledTransparencySlider = _styledCompo
     display: flex;
     align-items: center;
     justify-content: center;
+    touch-action: none;
 `;
 const StyledTransparencySliderBackground = exports.StyledTransparencySliderBackground = _styledComponents.default.div`
     height: 10px;

package/lib/cjs/components/transparency-slider/TransparencySlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransparencySlider.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledTransparencySlider","exports","styled","div","StyledTransparencySliderBackground","StyledTransparencySliderInput","input","attrs","$color","style","background","StyledTransparencySliderThumbWrapper","$position","left","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","backgroundColor"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledTransparencySlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const StyledTransparencySliderBackground = styled.div`\n    height: 10px;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    border-radius: 100px;\n    background-size: 8px 8px;\n    content: '';\n    position: absolute;\n    width: calc(100% - 10px);\n`;\n\ntype StyledTransparencySliderInputProps = WithTheme<{ $color?: string }>;\n\nexport const StyledTransparencySliderInput = styled.input.attrs<StyledTransparencySliderInputProps>(\n    ({ $color }) => ({\n        style: {\n            background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`,\n        },\n    }),\n)`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n    z-index: 4;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        opacity: 0;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledTransparencySliderThumbWrapperProps = WithTheme<{\n    $position: number;\n}>;\n\nexport const StyledTransparencySliderThumbWrapper = styled.div.attrs<StyledTransparencySliderThumbWrapperProps>(\n    ({ $position }) => ({\n        style: {\n            left: $position,\n        },\n    }),\n)`\n    position: absolute;\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledTransparencySliderThumbBackground = styled.div`\n    position: absolute;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    background-size: 8px 8px;\n    height: 100%;\n    width: 100%;\n`;\n\ntype StyledTransparencySliderThumbProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledTransparencySliderThumb = styled.div.attrs<StyledTransparencySliderThumbProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAGE,yBAAM,CAACC,GAAI;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,kCAAkC,GAAAH,OAAA,CAAAG,kCAAA,GAAGF,yBAAM,CAACC,GAAI;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACI,KAAK,CAACC,KAAK,CAC3D,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHC,UAAU,EAAG,0BAAyBF,MAAM,IAAI,EAAG;EACvD;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMG,oCAAoC,GAAAV,OAAA,CAAAU,oCAAA,GAAGT,yBAAM,CAACC,GAAG,CAACI,KAAK,CAChE,CAAC;EAAEK;AAAU,CAAC,MAAM;EAChBH,KAAK,EAAE;IACHI,IAAI,EAAED;EACV;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,uCAAuC,GAAAb,OAAA,CAAAa,uCAAA,GAAGZ,yBAAM,CAACC,GAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMY,6BAA6B,GAAAd,OAAA,CAAAc,6BAAA,GAAGb,yBAAM,CAACC,GAAG,CAACI,KAAK,CACzD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHO,eAAe,EAAER;EACrB;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"TransparencySlider.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledTransparencySlider","exports","styled","div","StyledTransparencySliderBackground","StyledTransparencySliderInput","input","attrs","$color","style","background","StyledTransparencySliderThumbWrapper","$position","left","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","backgroundColor"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledTransparencySlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n`;\n\nexport const StyledTransparencySliderBackground = styled.div`\n    height: 10px;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    border-radius: 100px;\n    background-size: 8px 8px;\n    content: '';\n    position: absolute;\n    width: calc(100% - 10px);\n`;\n\ntype StyledTransparencySliderInputProps = WithTheme<{ $color?: string }>;\n\nexport const StyledTransparencySliderInput = styled.input.attrs<StyledTransparencySliderInputProps>(\n    ({ $color }) => ({\n        style: {\n            background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`,\n        },\n    }),\n)`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n    z-index: 4;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        opacity: 0;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledTransparencySliderThumbWrapperProps = WithTheme<{\n    $position: number;\n}>;\n\nexport const StyledTransparencySliderThumbWrapper = styled.div.attrs<StyledTransparencySliderThumbWrapperProps>(\n    ({ $position }) => ({\n        style: {\n            left: $position,\n        },\n    }),\n)`\n    position: absolute;\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledTransparencySliderThumbBackground = styled.div`\n    position: absolute;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    background-size: 8px 8px;\n    height: 100%;\n    width: 100%;\n`;\n\ntype StyledTransparencySliderThumbProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledTransparencySliderThumb = styled.div.attrs<StyledTransparencySliderThumbProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAGE,yBAAM,CAACC,GAAI;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,kCAAkC,GAAAH,OAAA,CAAAG,kCAAA,GAAGF,yBAAM,CAACC,GAAI;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACI,KAAK,CAACC,KAAK,CAC3D,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHC,UAAU,EAAG,0BAAyBF,MAAM,IAAI,EAAG;EACvD;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMG,oCAAoC,GAAAV,OAAA,CAAAU,oCAAA,GAAGT,yBAAM,CAACC,GAAG,CAACI,KAAK,CAChE,CAAC;EAAEK;AAAU,CAAC,MAAM;EAChBH,KAAK,EAAE;IACHI,IAAI,EAAED;EACV;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,uCAAuC,GAAAb,OAAA,CAAAa,uCAAA,GAAGZ,yBAAM,CAACC,GAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMY,6BAA6B,GAAAd,OAAA,CAAAc,6BAAA,GAAGb,yBAAM,CAACC,GAAG,CAACI,KAAK,CACzD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHO,eAAe,EAAER;EACrB;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/hue-slider/HueSlider.js

@@ -1,4 +1,5 @@
 import { hslToRgb255 } from '@chayns/colors';
+import { setRefreshScrollEnabled } from 'chayns-api';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { convertColorToHsl, extractHsl, splitRgb } from '../../utils/color';
 import { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';
@@ -64,6 +65,7 @@ const HueSlider = _ref => {
     return 0;
   }, [editedValue]);
   const handleStart = useCallback(() => {
+    void setRefreshScrollEnabled(false);
     if (typeof onStart === 'function' && hslColor) {
       const hsl = extractHsl(hslColor);
       if (!hsl) {
@@ -82,6 +84,7 @@ const HueSlider = _ref => {
     }
   }, [hslColor, internalOpacity, onStart, opacity]);
   const handleEnd = useCallback(() => {
+    void setRefreshScrollEnabled(true);
     if (typeof onEnd === 'function' && hslColor) {
       const hsl = extractHsl(hslColor);
       if (!hsl) {

package/lib/esm/components/hue-slider/HueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","names":["hslToRgb255","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","extractHsl","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","_ref","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","sliderRef","rgb","r","g","b","a","hsl","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        if (typeof onStart === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HueSlider.js","names":["hslToRgb255","setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","extractHsl","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","_ref","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","sliderRef","rgb","r","g","b","a","hsl","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAC5C,SAASC,uBAAuB,QAAQ,YAAY;AACpD,OAAOC,KAAK,IAIRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,iBAAiB,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,mBAAmB;AAC3E,SAASC,eAAe,EAAEC,oBAAoB,EAAEC,oBAAoB,QAAQ,oBAAoB;AAyBhG,MAAMC,SAA6B,GAAGC,IAAA,IAMhC;EAAA,IANiC;IACnCC,QAAQ;IACRC,OAAO;IACPC,KAAK;IACLC,OAAO;IACPC,KAAK,GAAG;EACZ,CAAC,GAAAL,IAAA;EACG,MAAM,CAACM,WAAW,EAAEC,cAAc,CAAC,GAAGf,QAAQ,CAAC,CAAC,CAAC;EACjD,MAAM,CAACgB,QAAQ,EAAEC,WAAW,CAAC,GAAGjB,QAAQ,CAAyB,gBAAgB,CAAC;EAClF,MAAM,CAACkB,eAAe,EAAEC,kBAAkB,CAAC,GAAGnB,QAAQ,CAAC,CAAC,CAAC;EAEzD,MAAMoB,cAAc,GAAGrB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMsB,SAAS,GAAGtB,MAAM,CAAmB,IAAI,CAAC;EAEhDF,SAAS,CAAC,MAAM;IACZ,IAAIgB,KAAK,EAAE;MACP,MAAMS,GAAG,GAAGnB,QAAQ,CAACU,KAAK,CAAC;MAE3B,IAAI,CAACS,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGJ,GAAG;MAE1BH,kBAAkB,CAACO,CAAC,CAAC;MAErB,MAAMC,GAAG,GAAG1B,iBAAiB,CAAE,QAAOsB,CAAE,KAAIC,CAAE,KAAIC,CAAE,MAAK,CAAC;MAC1D,MAAMG,KAAK,GAAGD,GAAG,EAAEE,QAAQ,CAAC,CAAC,CAACD,KAAK,CAAC,wCAAwC,CAAC;MAE7E,IAAI,CAACA,KAAK,IAAI,CAACA,KAAK,CAAC,CAAC,CAAC,EAAE;QACrB;MACJ;MAEAX,WAAW,CAAE,OAAMW,KAAK,CAAC,CAAC,CAAE,cAAa,CAAC;MAC1Cb,cAAc,CAACe,QAAQ,CAACF,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC1C;EACJ,CAAC,EAAE,CAACf,KAAK,CAAC,CAAC;EAEX,MAAMkB,iBAAiB,GAAGnC,WAAW,CAChCoC,KAAoC,IAAK;IACtCjB,cAAc,CAACkB,MAAM,CAACD,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC,CAAC;IAE1C,MAAMC,UAAU,GAAIH,MAAM,CAACD,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC,GAAG,GAAG,GAAI,GAAG;IAC3D,MAAME,GAAG,GAAID,UAAU,GAAG,GAAG,GAAI,GAAG;IACpC,MAAME,UAAU,GAAG,GAAG;IACtB,MAAMC,SAAS,GAAG,EAAE;IAEpB,MAAMZ,GAAG,GAAI,OAAMU,GAAI,KAAIC,UAAW,MAAKC,SAAU,IAAG;IACxDtB,WAAW,CAACU,GAAG,CAAC;IAEhB,IAAI,OAAOlB,QAAQ,KAAK,UAAU,EAAE;MAChC,MAAMa,GAAG,GAAG7B,WAAW,CAAC;QAAE+C,CAAC,EAAEH,GAAG;QAAEI,CAAC,EAAE,CAAC;QAAEC,CAAC,EAAE;MAAI,CAAC,CAAC;MAEjD,IAAI,CAACpB,GAAG,EAAE;QACN;MACJ;MAEAb,QAAQ,CAAE,QAAOa,GAAG,CAACC,CAAE,KAAID,GAAG,CAACE,CAAE,KAAIF,GAAG,CAACG,CAAE,KAAIb,OAAO,IAAIM,eAAgB,GAAE,EAAES,GAAG,CAAC;IACtF;EACJ,CAAC,EACD,CAACT,eAAe,EAAET,QAAQ,EAAEG,OAAO,CACvC,CAAC;EAED,MAAM+B,mBAAmB,GAAG7C,OAAO,CAAC,MAAM;IACtC,IAAIuB,SAAS,CAACuB,OAAO,IAAIxB,cAAc,CAACwB,OAAO,EAAE;MAC7C,OACK9B,WAAW,GAAG,GAAG,IACjBO,SAAS,CAACuB,OAAO,CAACC,WAAW,GAAGzB,cAAc,CAACwB,OAAO,CAACC,WAAW,GAAG,CAAC,CAAC;IAEhF;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAAC/B,WAAW,CAAC,CAAC;EAEjB,MAAMgC,WAAW,GAAGlD,WAAW,CAAC,MAAM;IAClC,KAAKF,uBAAuB,CAAC,KAAK,CAAC;IAEnC,IAAI,OAAOgB,OAAO,KAAK,UAAU,IAAIM,QAAQ,EAAE;MAC3C,MAAMW,GAAG,GAAGzB,UAAU,CAACc,QAAQ,CAAC;MAEhC,IAAI,CAACW,GAAG,EAAE;QACN;MACJ;MAEA,MAAML,GAAG,GAAG7B,WAAW,CAACkC,GAAG,CAAC;MAE5B,IAAI,CAACL,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGH,GAAG;MAEvBZ,OAAO,CAAE,QAAOa,CAAE,KAAIC,CAAE,KAAIC,CAAE,KAAIb,OAAO,IAAIM,eAAgB,GAAE,EAAEF,QAAQ,CAAC;IAC9E;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEE,eAAe,EAAER,OAAO,EAAEE,OAAO,CAAC,CAAC;EAEjD,MAAMmC,SAAS,GAAGnD,WAAW,CAAC,MAAM;IAChC,KAAKF,uBAAuB,CAAC,IAAI,CAAC;IAElC,IAAI,OAAOiB,KAAK,KAAK,UAAU,IAAIK,QAAQ,EAAE;MACzC,MAAMW,GAAG,GAAGzB,UAAU,CAACc,QAAQ,CAAC;MAEhC,IAAI,CAACW,GAAG,EAAE;QACN;MACJ;MAEA,MAAML,GAAG,GAAG7B,WAAW,CAACkC,GAAG,CAAC;MAE5B,IAAI,CAACL,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGH,GAAG;MAEvBX,KAAK,CAAE,QAAOY,CAAE,KAAIC,CAAE,KAAIC,CAAE,KAAIb,OAAO,IAAIM,eAAgB,GAAE,EAAEF,QAAQ,CAAC;IAC5E;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEE,eAAe,EAAEP,KAAK,EAAEC,OAAO,CAAC,CAAC;EAE/C,OAAOd,OAAO,CACV,mBACIH,KAAA,CAAAqD,aAAA,CAAC5C,eAAe,qBACZT,KAAA,CAAAqD,aAAA,CAAC3C,oBAAoB;IACjB4C,GAAG,EAAE5B,SAAU;IACf6B,MAAM,EAAElC,QAAS;IACjBmC,IAAI,EAAC,OAAO;IACZC,GAAG,EAAE,CAAE;IACPC,GAAG,EAAE,GAAI;IACTlB,KAAK,EAAErB,WAAY;IACnBL,QAAQ,EAAEsB,iBAAkB;IAC5BuB,aAAa,EAAER,WAAY;IAC3BS,WAAW,EAAER;EAAU,CAC1B,CAAC,eACFpD,KAAA,CAAAqD,aAAA,CAAC1C,oBAAoB;IACjB2C,GAAG,EAAE7B,cAAe;IACpBoC,SAAS,EAAEb,mBAAoB;IAC/BO,MAAM,EAAElC;EAAS,CACpB,CACY,CACpB,EACD,CAACF,WAAW,EAAEiC,SAAS,EAAEhB,iBAAiB,EAAEe,WAAW,EAAE9B,QAAQ,EAAE2B,mBAAmB,CAC1F,CAAC;AACL,CAAC;AAEDpC,SAAS,CAACkD,WAAW,GAAG,WAAW;AAEnC,eAAelD,SAAS","ignoreList":[]}

package/lib/esm/components/hue-slider/HueSlider.styles.js

@@ -7,6 +7,7 @@ export const StyledHueSlider = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
+    touch-action: none;
 `;
 export const StyledHueSliderInput = styled.input`
     width: calc(100% - 10px);

package/lib/esm/components/hue-slider/HueSlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.styles.js","names":["styled","StyledHueSlider","div","StyledHueSliderInput","input","StyledHueSliderThumb","attrs","_ref","$position","$color","style","left","backgroundColor"],"sources":["../../../../src/components/hue-slider/HueSlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledHueSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(30, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(90, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(150, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(210, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(270, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(330, 100%, 50%),\n        hsl(360, 100%, 50%)\n    );\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        opacity: 0;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledHueSliderThumbProps = WithTheme<{ $position: number; $color: CSSProperties['color'] }>;\n\nexport const StyledHueSliderThumb = styled.div.attrs<StyledHueSliderThumbProps>(\n    ({ $position, $color }) => ({\n        style: {\n            left: `${$position}px`,\n            backgroundColor: $color,\n        },\n    }),\n)`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAI;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,oBAAoB,GAAGH,MAAM,CAACI,KAAiC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,oBAAoB,GAAGL,MAAM,CAACE,GAAG,CAACI,KAAK,CAChDC,IAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OAAM;IACxBG,KAAK,EAAE;MACHC,IAAI,EAAG,GAAEH,SAAU,IAAG;MACtBI,eAAe,EAAEH;IACrB;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"HueSlider.styles.js","names":["styled","StyledHueSlider","div","StyledHueSliderInput","input","StyledHueSliderThumb","attrs","_ref","$position","$color","style","left","backgroundColor"],"sources":["../../../../src/components/hue-slider/HueSlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledHueSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(30, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(90, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(150, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(210, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(270, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(330, 100%, 50%),\n        hsl(360, 100%, 50%)\n    );\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        opacity: 0;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledHueSliderThumbProps = WithTheme<{ $position: number; $color: CSSProperties['color'] }>;\n\nexport const StyledHueSliderThumb = styled.div.attrs<StyledHueSliderThumbProps>(\n    ({ $position, $color }) => ({\n        style: {\n            left: `${$position}px`,\n            backgroundColor: $color,\n        },\n    }),\n)`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAI;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,oBAAoB,GAAGH,MAAM,CAACI,KAAiC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,oBAAoB,GAAGL,MAAM,CAACE,GAAG,CAACI,KAAK,CAChDC,IAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OAAM;IACxBG,KAAK,EAAE;MACHC,IAAI,EAAG,GAAEH,SAAU,IAAG;MACtBI,eAAe,EAAEH;IACrB;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/transparency-slider/TransparencySlider.js

@@ -1,3 +1,4 @@
+import { setRefreshScrollEnabled } from 'chayns-api';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { splitRgb } from '../../utils/color';
 import { StyledTransparencySlider, StyledTransparencySliderBackground, StyledTransparencySliderInput, StyledTransparencySliderThumb, StyledTransparencySliderThumbBackground, StyledTransparencySliderThumbWrapper } from './TransparencySlider.styles';
@@ -56,6 +57,7 @@ const TransparencySlider = _ref => {
     return 0;
   }, [editedValue]);
   const handleStart = useCallback(() => {
+    void setRefreshScrollEnabled(false);
     if (typeof onStart === 'function') {
       const rgb = splitRgb(pureColor);
       if (!rgb) {
@@ -71,6 +73,7 @@ const TransparencySlider = _ref => {
     }
   }, [editedValue, onStart, pureColor]);
   const handleEnd = useCallback(() => {
+    void setRefreshScrollEnabled(true);
     if (typeof onEnd === 'function') {
       const rgb = splitRgb(pureColor);
       if (!rgb) {

package/lib/esm/components/transparency-slider/TransparencySlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransparencySlider.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","splitRgb","StyledTransparencySlider","StyledTransparencySliderBackground","StyledTransparencySliderInput","StyledTransparencySliderThumb","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumbWrapper","TransparencySlider","_ref","onChange","onStart","onEnd","color","editedValue","setEditedValue","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","sliderRef","rgb","r","g","b","a","newColor","handleInputChange","event","Number","target","value","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TransparencySlider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","splitRgb","StyledTransparencySlider","StyledTransparencySliderBackground","StyledTransparencySliderInput","StyledTransparencySliderThumb","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumbWrapper","TransparencySlider","_ref","onChange","onStart","onEnd","color","editedValue","setEditedValue","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","sliderRef","rgb","r","g","b","a","newColor","handleInputChange","event","Number","target","value","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/transparency-slider/TransparencySlider.styles.js

@@ -7,6 +7,7 @@ export const StyledTransparencySlider = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
+    touch-action: none;
 `;
 export const StyledTransparencySliderBackground = styled.div`
     height: 10px;

package/lib/esm/components/transparency-slider/TransparencySlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransparencySlider.styles.js","names":["styled","StyledTransparencySlider","div","StyledTransparencySliderBackground","StyledTransparencySliderInput","input","attrs","_ref","$color","style","background","StyledTransparencySliderThumbWrapper","_ref2","$position","left","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","_ref3","backgroundColor"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledTransparencySlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n`;\n\nexport const StyledTransparencySliderBackground = styled.div`\n    height: 10px;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    border-radius: 100px;\n    background-size: 8px 8px;\n    content: '';\n    position: absolute;\n    width: calc(100% - 10px);\n`;\n\ntype StyledTransparencySliderInputProps = WithTheme<{ $color?: string }>;\n\nexport const StyledTransparencySliderInput = styled.input.attrs<StyledTransparencySliderInputProps>(\n    ({ $color }) => ({\n        style: {\n            background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`,\n        },\n    }),\n)`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n    z-index: 4;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        opacity: 0;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledTransparencySliderThumbWrapperProps = WithTheme<{\n    $position: number;\n}>;\n\nexport const StyledTransparencySliderThumbWrapper = styled.div.attrs<StyledTransparencySliderThumbWrapperProps>(\n    ({ $position }) => ({\n        style: {\n            left: $position,\n        },\n    }),\n)`\n    position: absolute;\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledTransparencySliderThumbBackground = styled.div`\n    position: absolute;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    background-size: 8px 8px;\n    height: 100%;\n    width: 100%;\n`;\n\ntype StyledTransparencySliderThumbProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledTransparencySliderThumb = styled.div.attrs<StyledTransparencySliderThumbProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,wBAAwB,GAAGD,MAAM,CAACE,GAAI;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGH,MAAM,CAACE,GAAI;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,6BAA6B,GAAGJ,MAAM,CAACK,KAAK,CAACC,KAAK,CAC3DC,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAM;IACbE,KAAK,EAAE;MACHC,UAAU,EAAG,0BAAyBF,MAAM,IAAI,EAAG;IACvD;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMG,oCAAoC,GAAGX,MAAM,CAACE,GAAG,CAACI,KAAK,CAChEM,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAM;IAChBH,KAAK,EAAE;MACHK,IAAI,EAAED;IACV;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,uCAAuC,GAAGf,MAAM,CAACE,GAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMc,6BAA6B,GAAGhB,MAAM,CAACE,GAAG,CAACI,KAAK,CACzDW,KAAA;EAAA,IAAC;IAAET;EAAO,CAAC,GAAAS,KAAA;EAAA,OAAM;IACbR,KAAK,EAAE;MACHS,eAAe,EAAEV;IACrB;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"TransparencySlider.styles.js","names":["styled","StyledTransparencySlider","div","StyledTransparencySliderBackground","StyledTransparencySliderInput","input","attrs","_ref","$color","style","background","StyledTransparencySliderThumbWrapper","_ref2","$position","left","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","_ref3","backgroundColor"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledTransparencySlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n`;\n\nexport const StyledTransparencySliderBackground = styled.div`\n    height: 10px;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    border-radius: 100px;\n    background-size: 8px 8px;\n    content: '';\n    position: absolute;\n    width: calc(100% - 10px);\n`;\n\ntype StyledTransparencySliderInputProps = WithTheme<{ $color?: string }>;\n\nexport const StyledTransparencySliderInput = styled.input.attrs<StyledTransparencySliderInputProps>(\n    ({ $color }) => ({\n        style: {\n            background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`,\n        },\n    }),\n)`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n    z-index: 4;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        opacity: 0;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledTransparencySliderThumbWrapperProps = WithTheme<{\n    $position: number;\n}>;\n\nexport const StyledTransparencySliderThumbWrapper = styled.div.attrs<StyledTransparencySliderThumbWrapperProps>(\n    ({ $position }) => ({\n        style: {\n            left: $position,\n        },\n    }),\n)`\n    position: absolute;\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledTransparencySliderThumbBackground = styled.div`\n    position: absolute;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    background-size: 8px 8px;\n    height: 100%;\n    width: 100%;\n`;\n\ntype StyledTransparencySliderThumbProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledTransparencySliderThumb = styled.div.attrs<StyledTransparencySliderThumbProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,wBAAwB,GAAGD,MAAM,CAACE,GAAI;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kCAAkC,GAAGH,MAAM,CAACE,GAAI;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,6BAA6B,GAAGJ,MAAM,CAACK,KAAK,CAACC,KAAK,CAC3DC,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAM;IACbE,KAAK,EAAE;MACHC,UAAU,EAAG,0BAAyBF,MAAM,IAAI,EAAG;IACvD;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMG,oCAAoC,GAAGX,MAAM,CAACE,GAAG,CAACI,KAAK,CAChEM,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAM;IAChBH,KAAK,EAAE;MACHK,IAAI,EAAED;IACV;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAME,uCAAuC,GAAGf,MAAM,CAACE,GAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMc,6BAA6B,GAAGhB,MAAM,CAACE,GAAG,CAACI,KAAK,CACzDW,KAAA;EAAA,IAAC;IAAET;EAAO,CAAC,GAAAS,KAAA;EAAA,OAAM;IACbR,KAAK,EAAE;MACHS,eAAe,EAAEV;IACrB;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/color-picker",
-    "version": "5.0.0-beta.601",
+    "version": "5.0.0-beta.603",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -67,7 +67,7 @@
         "typescript": "^5.4.5"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.601",
+        "@chayns-components/core": "^5.0.0-beta.603",
         "@chayns/colors": "^2.0.0"
     },
     "peerDependencies": {
@@ -80,5 +80,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d0ddb1eca07e17250d093a2f68de4fe8c89f2d62"
+    "gitHead": "d47f7a6bd3af8eb1373255054e7753066de296c4"
 }