@chayns-components/devalue-slider 5.0.59 → 5.0.61

package/lib/cjs/components/DevalueSlider.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Slider = _interopRequireDefault(require("./slider/Slider"));
 var _Timer = _interopRequireDefault(require("./timer/Timer"));
+var _textstring = require("@chayns-components/textstring");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const DevalueSlider = ({
@@ -14,7 +15,7 @@ const DevalueSlider = ({
   devalueBackgroundColor = 'green',
   devalueTime,
   isDisabled,
-  label = 'EINLÖSEN',
+  label,
   onDevalue,
   onChange,
   onComplete
@@ -38,12 +39,16 @@ const DevalueSlider = ({
     (_sliderRef$current2 = sliderRef.current) === null || _sliderRef$current2 === void 0 || _sliderRef$current2.enable();
   }, [isDisabled]);
   if (timerDevalueTime) {
-    return /*#__PURE__*/_react.default.createElement(_Timer.default, {
+    return /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
+      libraryName: "@chayns-component-devalue-slider"
+    }, /*#__PURE__*/_react.default.createElement(_Timer.default, {
       color: devalueBackgroundColor,
       devalueTime: timerDevalueTime
-    });
+    }));
   }
-  return /*#__PURE__*/_react.default.createElement(_Slider.default, {
+  return /*#__PURE__*/_react.default.createElement(_textstring.TextstringProvider, {
+    libraryName: "@chayns-component-devalue-slider"
+  }, /*#__PURE__*/_react.default.createElement(_Slider.default, {
     ref: sliderRef,
     onDevalue: onDevalue,
     color: backgroundColor,
@@ -51,7 +56,7 @@ const DevalueSlider = ({
     onComplete: handleCompleted,
     onChange: onChange,
     trackText: label
-  });
+  }));
 };
 var _default = exports.default = DevalueSlider;
 //# sourceMappingURL=DevalueSlider.js.map

package/lib/cjs/components/DevalueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevalueSlider.js","names":["_react","_interopRequireWildcard","require","_Slider","_interopRequireDefault","_Timer","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DevalueSlider","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","label","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","useState","sliderRef","useRef","useEffect","handleCompleted","useCallback","Date","_sliderRef$current2","_sliderRef$current","current","disable","enable","createElement","color","ref","devalueColor","trackText","_default","exports"],"sources":["../../../src/components/DevalueSlider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';\nimport Slider, { type SliderRef } from './slider/Slider';\nimport Timer from './timer/Timer';\n\nexport type DevalueSliderOnDevalueHandlerResult = { success: boolean };\nexport type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;\n\nexport type DevalueSliderOnChangeHandler = (relativeValue: number) => void;\nexport type DevalueSliderOnCompleteHandler = () => void;\n\nexport type DevalueSliderProps = {\n    /**\n     * The basic color of the slider.\n     * This color is the background of the track before the slider is devalued.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The devalue color of the slider.\n     * This color fills the track from the left on user movement.\n     * This color is the background of the timer after the slider is devalued.\n     */\n    devalueBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * If this slider was devalued, provide the time when it was devalued.\n     * This will show a timer.\n     */\n    devalueTime?: Date;\n    /**\n     * Disables the slider and cancels any active drags.\n     */\n    isDisabled?: boolean;\n    /**\n     * The label of the slider. The default value is \"EINLÖSEN\"\n     */\n    label?: string;\n    /**\n     * This function is called when the slider is devalued.\n     */\n    onDevalue?: DevalueSliderOnDevalueHandler;\n    /**\n     * This function is called when the slider value changes.\n     * With this function you can keep track of the movement of the slider.\n     */\n    onChange?: DevalueSliderOnChangeHandler;\n    /**\n     * This function is called when the slider is completed.\n     * The slider is completed when the user devalues the slider\n     * and the animation is completed.\n     */\n    onComplete?: DevalueSliderOnCompleteHandler;\n};\n\nconst DevalueSlider: React.FC<DevalueSliderProps> = ({\n    backgroundColor = 'red',\n    devalueBackgroundColor = 'green',\n    devalueTime,\n    isDisabled,\n    label = 'EINLÖSEN',\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\n        setTimerDevalueTime(devalueTime);\n    }, [devalueTime]);\n\n    const handleCompleted = useCallback(() => {\n        setTimerDevalueTime(new Date());\n\n        onComplete?.();\n    }, [onComplete]);\n\n    useEffect(() => {\n        if (isDisabled) {\n            sliderRef.current?.disable();\n\n            return;\n        }\n\n        sliderRef.current?.enable();\n    }, [isDisabled]);\n\n    if (timerDevalueTime) {\n        return <Timer color={devalueBackgroundColor} devalueTime={timerDevalueTime} />;\n    }\n\n    return (\n        <Slider\n            ref={sliderRef}\n            onDevalue={onDevalue}\n            color={backgroundColor}\n            devalueColor={devalueBackgroundColor}\n            onComplete={handleCompleted}\n            onChange={onChange}\n            trackText={label}\n        />\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DevalueSlider.js","names":["_react","_interopRequireWildcard","require","_Slider","_interopRequireDefault","_Timer","_textstring","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DevalueSlider","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","label","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","useState","sliderRef","useRef","useEffect","handleCompleted","useCallback","Date","_sliderRef$current2","_sliderRef$current","current","disable","enable","createElement","TextstringProvider","libraryName","color","ref","devalueColor","trackText","_default","exports"],"sources":["../../../src/components/DevalueSlider.tsx"],"sourcesContent":["import React, { type CSSProperties, useCallback, useEffect, useRef, useState } from 'react';\nimport Slider, { type SliderRef } from './slider/Slider';\nimport Timer from './timer/Timer';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport type DevalueSliderOnDevalueHandlerResult = { success: boolean };\nexport type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;\n\nexport type DevalueSliderOnChangeHandler = (relativeValue: number) => void;\nexport type DevalueSliderOnCompleteHandler = () => void;\n\nexport type DevalueSliderProps = {\n    /**\n     * The basic color of the slider.\n     * This color is the background of the track before the slider is devalued.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The devalue color of the slider.\n     * This color fills the track from the left on user movement.\n     * This color is the background of the timer after the slider is devalued.\n     */\n    devalueBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * If this slider was devalued, provide the time when it was devalued.\n     * This will show a timer.\n     */\n    devalueTime?: Date;\n    /**\n     * Disables the slider and cancels any active drags.\n     */\n    isDisabled?: boolean;\n    /**\n     * The label of the slider. The default value is \"EINLÖSEN\"\n     */\n    label?: string;\n    /**\n     * This function is called when the slider is devalued.\n     */\n    onDevalue?: DevalueSliderOnDevalueHandler;\n    /**\n     * This function is called when the slider value changes.\n     * With this function you can keep track of the movement of the slider.\n     */\n    onChange?: DevalueSliderOnChangeHandler;\n    /**\n     * This function is called when the slider is completed.\n     * The slider is completed when the user devalues the slider\n     * and the animation is completed.\n     */\n    onComplete?: DevalueSliderOnCompleteHandler;\n};\n\nconst DevalueSlider: React.FC<DevalueSliderProps> = ({\n    backgroundColor = 'red',\n    devalueBackgroundColor = 'green',\n    devalueTime,\n    isDisabled,\n    label,\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\n        setTimerDevalueTime(devalueTime);\n    }, [devalueTime]);\n\n    const handleCompleted = useCallback(() => {\n        setTimerDevalueTime(new Date());\n\n        onComplete?.();\n    }, [onComplete]);\n\n    useEffect(() => {\n        if (isDisabled) {\n            sliderRef.current?.disable();\n\n            return;\n        }\n\n        sliderRef.current?.enable();\n    }, [isDisabled]);\n\n    if (timerDevalueTime) {\n        return (\n            <TextstringProvider libraryName=\"@chayns-component-devalue-slider\">\n                <Timer color={devalueBackgroundColor} devalueTime={timerDevalueTime} />\n            </TextstringProvider>\n        );\n    }\n\n    return (\n        <TextstringProvider libraryName=\"@chayns-component-devalue-slider\">\n            <Slider\n                ref={sliderRef}\n                onDevalue={onDevalue}\n                color={backgroundColor}\n                devalueColor={devalueBackgroundColor}\n                onComplete={handleCompleted}\n                onChange={onChange}\n                trackText={label}\n            />\n        </TextstringProvider>\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider/Slider.js

@@ -12,6 +12,8 @@ var _react2 = _interopRequireWildcard(require("react"));
 var _design = require("../../hooks/design");
 var _common = require("../../utils/common");
 var _Slider = require("./Slider.styles");
+var _textstring = require("@chayns-components/textstring");
+var _textStrings = _interopRequireDefault(require("../../constants/textStrings"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Slider = /*#__PURE__*/(0, _react2.forwardRef)(({
@@ -20,7 +22,7 @@ const Slider = /*#__PURE__*/(0, _react2.forwardRef)(({
   trackHeight = 50,
   thumbSize = 40,
   borderSize = 2,
-  trackText = 'EINLÖSEN',
+  trackText,
   onChange = () => {},
   onDevalue = () => Promise.resolve({
     success: true
@@ -205,7 +207,9 @@ const Slider = /*#__PURE__*/(0, _react2.forwardRef)(({
     },
     $color: "white",
     $baseFontSize: baseFontSize
-  }, trackText)));
+  }, trackText ?? /*#__PURE__*/_react2.default.createElement(_textstring.Textstring, {
+    textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.slider.tracktext)
+  }))));
 });
 var _default = exports.default = Slider;
 //# sourceMappingURL=Slider.js.map

package/lib/cjs/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["_core","require","_size","_interopRequireDefault","_chaynsApi","_react","_react2","_interopRequireWildcard","_design","_common","_Slider","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Slider","forwardRef","color","devalueColor","trackHeight","thumbSize","borderSize","trackText","onChange","onDevalue","Promise","resolve","success","onComplete","ref","trackRef","setTrackRef","useState","trackWidth","useSize","initialWidth","initialHeight","iconColor","setIconColor","isCompleted","setIsCompleted","isDisabled","setIsDisabled","isCompletedRef","useRef","showWaitCursor","setShowWaitCursor","scaleFactor","useMemo","x","useMotionValue","icon","styles","iconStyles","useThumbIcon","dragControls","useDragControls","vibrationTrigger","useTransform","value","Math","round","lastVibrationValue","useEffect","on","current","vibrate","pattern","containerAnimation","useAnimation","thumbVariants","createThumbVariants","textOpacity","relativeValue","thumbRadius","parseFloat","toPrecision","relativeBackgroundValue","trackBackground","handlePointerDownCapture","useCallback","event","currentValue","preventDefault","stopPropagation","invokeCall","action","iOSFeedbackVibration","handleRedeem","devaluePromise","sleepPromise","sleep","devalued","all","start","handleTrackRef","node","handleDragStart","handleDragEnd","useImperativeHandle","disable","enable","baseFontSize","createElement","Container","animate","Track","$height","$borderSize","$backgroundColor","TrackBackground","style","background","Thumb","variants","$size","$trackHeight","drag","dragElastic","onPointerDownCapture","whileTap","scale","cursor","onDragStart","onDragEnd","dragConstraints","right","left","ThumbIconContainer","ThumbIcon","key","THUMB_ICON_VARIANTS","SmallWaitCursor","shouldHideBackground","TrackText","opacity","$color","$baseFontSize","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport useSize from '@react-hook/size';\nimport { invokeCall, vibrate } from 'chayns-api';\nimport {\n    useAnimation,\n    useDragControls,\n    useMotionValue,\n    useTransform,\n    type DragHandler,\n} from 'motion/react';\nimport React, {\n    forwardRef,\n    PointerEvent,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useThumbIcon } from '../../hooks/design';\nimport { sleep } from '../../utils/common';\nimport type { DevalueSliderProps } from '../DevalueSlider';\nimport {\n    Container,\n    createThumbVariants,\n    Thumb,\n    ThumbIcon,\n    ThumbIconContainer,\n    THUMB_ICON_VARIANTS,\n    Track,\n    TrackBackground,\n    TrackText,\n} from './Slider.styles';\n\nexport type SliderProps = {\n    color: NonNullable<DevalueSliderProps['backgroundColor']>;\n    devalueColor: NonNullable<DevalueSliderProps['devalueBackgroundColor']>;\n    thumbSize?: number;\n    trackHeight?: number;\n    trackText?: string;\n    borderSize?: number;\n    onChange: DevalueSliderProps['onChange'];\n    onDevalue: DevalueSliderProps['onDevalue'];\n    onComplete: DevalueSliderProps['onComplete'];\n};\n\nexport type SliderRef = {\n    disable: () => void;\n    enable: () => void;\n};\n\nconst Slider = forwardRef<SliderRef, SliderProps>(\n    (\n        {\n            color,\n            devalueColor,\n            trackHeight = 50,\n            thumbSize = 40,\n            borderSize = 2,\n            trackText = 'EINLÖSEN',\n            onChange = () => {},\n            onDevalue = () => Promise.resolve({ success: true }),\n            onComplete,\n        },\n        ref,\n    ) => {\n        const [trackRef, setTrackRef] = useState<HTMLDivElement | null>(null);\n        const [trackWidth] = useSize(trackRef, { initialWidth: 300, initialHeight: 50 });\n        const [iconColor, setIconColor] = useState('black');\n        const [isCompleted, setIsCompleted] = useState(false);\n        const [isDisabled, setIsDisabled] = useState(false);\n        const isCompletedRef = useRef(isCompleted);\n        const [showWaitCursor, setShowWaitCursor] = useState(false);\n        const scaleFactor = useMemo(() => trackHeight / thumbSize, [thumbSize, trackHeight]);\n\n        const x = useMotionValue(0);\n        const { icon, styles: iconStyles } = useThumbIcon(x, iconColor);\n        const dragControls = useDragControls();\n\n        const vibrationTrigger = useTransform(\n            x,\n            // round to 10 to avoid unnecessary vibrate calls\n            (value) => Math.round(value / 10) * 10,\n        );\n        const lastVibrationValue = useRef(0);\n        useEffect(() => {\n            vibrationTrigger.on('change', (value) => {\n                if (!isCompletedRef.current && value !== lastVibrationValue.current) {\n                    lastVibrationValue.current = value;\n                    void vibrate({ pattern: [10] });\n                }\n            });\n        }, [vibrationTrigger]);\n\n        const containerAnimation = useAnimation();\n        const thumbVariants = useMemo(\n            () =>\n                createThumbVariants({\n                    thumbSize,\n                    trackWidth,\n                    scaleFactor,\n                }),\n            [scaleFactor, thumbSize, trackWidth],\n        );\n\n        const textOpacity = useTransform(x, [0, 120], [1, 0]);\n\n        // this is the relative value of the right edge of the thumb\n        const relativeValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = thumbSize * scaleFactor;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        // this is the relative value of the center of the thumb, it is used for the background gradient\n        const relativeBackgroundValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = (thumbSize * scaleFactor) / 2;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        const trackBackground = useTransform(relativeBackgroundValue, (value) => {\n            if (isCompleted) return devalueColor;\n            if (!value) return 'transparent';\n            return `linear-gradient(to right, ${devalueColor} ${value}%, transparent ${value}%)`;\n        });\n\n        const handlePointerDownCapture = useCallback(\n            (event: PointerEvent) => {\n                const currentValue = relativeValue.get();\n\n                if (currentValue > 5) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                void invokeCall({\n                    action: 19,\n                    value: {\n                        pattern: [50],\n                        iOSFeedbackVibration: 7,\n                    },\n                });\n            },\n            [relativeValue],\n        );\n\n        const handleRedeem = useCallback(async () => {\n            setShowWaitCursor(true);\n            setIsCompleted(true);\n            isCompletedRef.current = true;\n\n            const devaluePromise = onDevalue();\n            const sleepPromise = sleep(1000);\n            const [devalued] = await Promise.all([devaluePromise, sleepPromise]);\n\n            if (!devalued.success) {\n                setShowWaitCursor(false);\n                setIsCompleted(false);\n                isCompletedRef.current = false;\n                await containerAnimation.start('base');\n                return;\n            }\n\n            setShowWaitCursor(false);\n            setIconColor('white');\n            void invokeCall({\n                action: 19,\n                value: {\n                    iOSFeedbackVibration: 3,\n                    pattern: [100, 200, 100],\n                },\n            });\n\n            await containerAnimation.start('completed');\n            await containerAnimation.start('leaving');\n            onComplete?.();\n        }, [containerAnimation, onComplete, onDevalue]);\n\n        const handleTrackRef = useCallback((node: HTMLDivElement | null) => {\n            setTrackRef(node);\n        }, []);\n\n        const handleDragStart = useCallback<NonNullable<DragHandler>>(() => {\n            void containerAnimation.start('dragging');\n        }, [containerAnimation]);\n\n        const handleDragEnd = useCallback<NonNullable<DragHandler>>(() => {\n            if (relativeValue.get() > 98) {\n                void handleRedeem();\n                return;\n            }\n\n            void containerAnimation.start('base');\n        }, [relativeValue, containerAnimation, handleRedeem]);\n\n        useEffect(() => {\n            void containerAnimation.start('base');\n        }, [containerAnimation]);\n\n        useEffect(() => {\n            if (isCompleted) return () => {};\n            return relativeValue.on('change', onChange);\n        }, [isCompleted, onChange, relativeValue]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                disable: () => {\n                    setIsDisabled(true);\n                    setShowWaitCursor(false);\n                    setIsCompleted(false);\n                    isCompletedRef.current = false;\n                    void containerAnimation.start('base');\n                },\n                enable: () => {\n                    setIsDisabled(false);\n                },\n            }),\n            [containerAnimation],\n        );\n\n        const baseFontSize = useMemo(() => 22, []);\n\n        return (\n            <Container animate={containerAnimation}>\n                <Track\n                    $height={trackHeight}\n                    $borderSize={borderSize}\n                    $backgroundColor={color}\n                    ref={handleTrackRef}\n                >\n                    <TrackBackground\n                        $height={trackHeight}\n                        style={{ background: trackBackground }}\n                    />\n                    <Thumb\n                        variants={thumbVariants}\n                        $size={thumbSize}\n                        $trackHeight={trackHeight}\n                        style={{ x }}\n                        drag={isCompleted || isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        onPointerDownCapture={handlePointerDownCapture}\n                        whileTap={{ scale: 1.4, cursor: 'grabbing' }}\n                        onDragStart={handleDragStart}\n                        onDragEnd={handleDragEnd}\n                        dragControls={dragControls}\n                        dragConstraints={{\n                            right: trackWidth - thumbSize * scaleFactor,\n                            left: 0,\n                        }}\n                    >\n                        <ThumbIconContainer>\n                            {!showWaitCursor && (\n                                <ThumbIcon\n                                    key=\"thumb-icon\"\n                                    icon={icon}\n                                    variants={THUMB_ICON_VARIANTS}\n                                    style={iconStyles}\n                                />\n                            )}\n                            {showWaitCursor && (\n                                <SmallWaitCursor shouldHideBackground color=\"black\" />\n                            )}\n                        </ThumbIconContainer>\n                    </Thumb>\n                    <TrackText\n                        style={{ opacity: textOpacity }}\n                        $color=\"white\"\n                        $baseFontSize={baseFontSize}\n                    >\n                        {trackText}\n                    </TrackText>\n                </Track>\n            </Container>\n        );\n    },\n);\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider.js","names":["_core","require","_size","_interopRequireDefault","_chaynsApi","_react","_react2","_interopRequireWildcard","_design","_common","_Slider","_textstring","_textStrings","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Slider","forwardRef","color","devalueColor","trackHeight","thumbSize","borderSize","trackText","onChange","onDevalue","Promise","resolve","success","onComplete","ref","trackRef","setTrackRef","useState","trackWidth","useSize","initialWidth","initialHeight","iconColor","setIconColor","isCompleted","setIsCompleted","isDisabled","setIsDisabled","isCompletedRef","useRef","showWaitCursor","setShowWaitCursor","scaleFactor","useMemo","x","useMotionValue","icon","styles","iconStyles","useThumbIcon","dragControls","useDragControls","vibrationTrigger","useTransform","value","Math","round","lastVibrationValue","useEffect","on","current","vibrate","pattern","containerAnimation","useAnimation","thumbVariants","createThumbVariants","textOpacity","relativeValue","thumbRadius","parseFloat","toPrecision","relativeBackgroundValue","trackBackground","handlePointerDownCapture","useCallback","event","currentValue","preventDefault","stopPropagation","invokeCall","action","iOSFeedbackVibration","handleRedeem","devaluePromise","sleepPromise","sleep","devalued","all","start","handleTrackRef","node","handleDragStart","handleDragEnd","useImperativeHandle","disable","enable","baseFontSize","createElement","Container","animate","Track","$height","$borderSize","$backgroundColor","TrackBackground","style","background","Thumb","variants","$size","$trackHeight","drag","dragElastic","onPointerDownCapture","whileTap","scale","cursor","onDragStart","onDragEnd","dragConstraints","right","left","ThumbIconContainer","ThumbIcon","key","THUMB_ICON_VARIANTS","SmallWaitCursor","shouldHideBackground","TrackText","opacity","$color","$baseFontSize","Textstring","textstring","ttsToITextString","textStrings","components","slider","tracktext","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport useSize from '@react-hook/size';\nimport { invokeCall, vibrate } from 'chayns-api';\nimport {\n    type DragHandler,\n    useAnimation,\n    useDragControls,\n    useMotionValue,\n    useTransform,\n} from 'motion/react';\nimport React, {\n    forwardRef,\n    PointerEvent,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useThumbIcon } from '../../hooks/design';\nimport { sleep } from '../../utils/common';\nimport type { DevalueSliderProps } from '../DevalueSlider';\nimport {\n    Container,\n    createThumbVariants,\n    Thumb,\n    THUMB_ICON_VARIANTS,\n    ThumbIcon,\n    ThumbIconContainer,\n    Track,\n    TrackBackground,\n    TrackText,\n} from './Slider.styles';\nimport { Textstring, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../constants/textStrings';\n\nexport type SliderProps = {\n    color: NonNullable<DevalueSliderProps['backgroundColor']>;\n    devalueColor: NonNullable<DevalueSliderProps['devalueBackgroundColor']>;\n    thumbSize?: number;\n    trackHeight?: number;\n    trackText?: string;\n    borderSize?: number;\n    onChange: DevalueSliderProps['onChange'];\n    onDevalue: DevalueSliderProps['onDevalue'];\n    onComplete: DevalueSliderProps['onComplete'];\n};\n\nexport type SliderRef = {\n    disable: () => void;\n    enable: () => void;\n};\n\nconst Slider = forwardRef<SliderRef, SliderProps>(\n    (\n        {\n            color,\n            devalueColor,\n            trackHeight = 50,\n            thumbSize = 40,\n            borderSize = 2,\n            trackText,\n            onChange = () => {},\n            onDevalue = () => Promise.resolve({ success: true }),\n            onComplete,\n        },\n        ref,\n    ) => {\n        const [trackRef, setTrackRef] = useState<HTMLDivElement | null>(null);\n        const [trackWidth] = useSize(trackRef, { initialWidth: 300, initialHeight: 50 });\n        const [iconColor, setIconColor] = useState('black');\n        const [isCompleted, setIsCompleted] = useState(false);\n        const [isDisabled, setIsDisabled] = useState(false);\n        const isCompletedRef = useRef(isCompleted);\n        const [showWaitCursor, setShowWaitCursor] = useState(false);\n        const scaleFactor = useMemo(() => trackHeight / thumbSize, [thumbSize, trackHeight]);\n\n        const x = useMotionValue(0);\n        const { icon, styles: iconStyles } = useThumbIcon(x, iconColor);\n        const dragControls = useDragControls();\n\n        const vibrationTrigger = useTransform(\n            x,\n            // round to 10 to avoid unnecessary vibrate calls\n            (value) => Math.round(value / 10) * 10,\n        );\n        const lastVibrationValue = useRef(0);\n        useEffect(() => {\n            vibrationTrigger.on('change', (value) => {\n                if (!isCompletedRef.current && value !== lastVibrationValue.current) {\n                    lastVibrationValue.current = value;\n                    void vibrate({ pattern: [10] });\n                }\n            });\n        }, [vibrationTrigger]);\n\n        const containerAnimation = useAnimation();\n        const thumbVariants = useMemo(\n            () =>\n                createThumbVariants({\n                    thumbSize,\n                    trackWidth,\n                    scaleFactor,\n                }),\n            [scaleFactor, thumbSize, trackWidth],\n        );\n\n        const textOpacity = useTransform(x, [0, 120], [1, 0]);\n\n        // this is the relative value of the right edge of the thumb\n        const relativeValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = thumbSize * scaleFactor;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        // this is the relative value of the center of the thumb, it is used for the background gradient\n        const relativeBackgroundValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = (thumbSize * scaleFactor) / 2;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        const trackBackground = useTransform(relativeBackgroundValue, (value) => {\n            if (isCompleted) return devalueColor;\n            if (!value) return 'transparent';\n            return `linear-gradient(to right, ${devalueColor} ${value}%, transparent ${value}%)`;\n        });\n\n        const handlePointerDownCapture = useCallback(\n            (event: PointerEvent) => {\n                const currentValue = relativeValue.get();\n\n                if (currentValue > 5) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                void invokeCall({\n                    action: 19,\n                    value: {\n                        pattern: [50],\n                        iOSFeedbackVibration: 7,\n                    },\n                });\n            },\n            [relativeValue],\n        );\n\n        const handleRedeem = useCallback(async () => {\n            setShowWaitCursor(true);\n            setIsCompleted(true);\n            isCompletedRef.current = true;\n\n            const devaluePromise = onDevalue();\n            const sleepPromise = sleep(1000);\n            const [devalued] = await Promise.all([devaluePromise, sleepPromise]);\n\n            if (!devalued.success) {\n                setShowWaitCursor(false);\n                setIsCompleted(false);\n                isCompletedRef.current = false;\n                await containerAnimation.start('base');\n                return;\n            }\n\n            setShowWaitCursor(false);\n            setIconColor('white');\n            void invokeCall({\n                action: 19,\n                value: {\n                    iOSFeedbackVibration: 3,\n                    pattern: [100, 200, 100],\n                },\n            });\n\n            await containerAnimation.start('completed');\n            await containerAnimation.start('leaving');\n            onComplete?.();\n        }, [containerAnimation, onComplete, onDevalue]);\n\n        const handleTrackRef = useCallback((node: HTMLDivElement | null) => {\n            setTrackRef(node);\n        }, []);\n\n        const handleDragStart = useCallback<NonNullable<DragHandler>>(() => {\n            void containerAnimation.start('dragging');\n        }, [containerAnimation]);\n\n        const handleDragEnd = useCallback<NonNullable<DragHandler>>(() => {\n            if (relativeValue.get() > 98) {\n                void handleRedeem();\n                return;\n            }\n\n            void containerAnimation.start('base');\n        }, [relativeValue, containerAnimation, handleRedeem]);\n\n        useEffect(() => {\n            void containerAnimation.start('base');\n        }, [containerAnimation]);\n\n        useEffect(() => {\n            if (isCompleted) return () => {};\n            return relativeValue.on('change', onChange);\n        }, [isCompleted, onChange, relativeValue]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                disable: () => {\n                    setIsDisabled(true);\n                    setShowWaitCursor(false);\n                    setIsCompleted(false);\n                    isCompletedRef.current = false;\n                    void containerAnimation.start('base');\n                },\n                enable: () => {\n                    setIsDisabled(false);\n                },\n            }),\n            [containerAnimation],\n        );\n\n        const baseFontSize = useMemo(() => 22, []);\n\n        return (\n            <Container animate={containerAnimation}>\n                <Track\n                    $height={trackHeight}\n                    $borderSize={borderSize}\n                    $backgroundColor={color}\n                    ref={handleTrackRef}\n                >\n                    <TrackBackground\n                        $height={trackHeight}\n                        style={{ background: trackBackground }}\n                    />\n                    <Thumb\n                        variants={thumbVariants}\n                        $size={thumbSize}\n                        $trackHeight={trackHeight}\n                        style={{ x }}\n                        drag={isCompleted || isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        onPointerDownCapture={handlePointerDownCapture}\n                        whileTap={{ scale: 1.4, cursor: 'grabbing' }}\n                        onDragStart={handleDragStart}\n                        onDragEnd={handleDragEnd}\n                        dragControls={dragControls}\n                        dragConstraints={{\n                            right: trackWidth - thumbSize * scaleFactor,\n                            left: 0,\n                        }}\n                    >\n                        <ThumbIconContainer>\n                            {!showWaitCursor && (\n                                <ThumbIcon\n                                    key=\"thumb-icon\"\n                                    icon={icon}\n                                    variants={THUMB_ICON_VARIANTS}\n                                    style={iconStyles}\n                                />\n                            )}\n                            {showWaitCursor && (\n                                <SmallWaitCursor shouldHideBackground color=\"black\" />\n                            )}\n                        </ThumbIconContainer>\n                    </Thumb>\n                    <TrackText\n                        style={{ opacity: textOpacity }}\n                        $color=\"white\"\n                        $baseFontSize={baseFontSize}\n                    >\n                        {trackText ?? (\n                            <Textstring\n                                textstring={ttsToITextString(\n                                    textStrings.components.slider.tracktext,\n                                )}\n                            />\n                        )}\n                    </TrackText>\n                </Track>\n            </Container>\n        );\n    },\n);\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/timer/Timer.js

@@ -8,6 +8,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _chaynsApi = require("chayns-api");
 var _Timer = require("./Timer.styles");
 var _date = require("../../utils/date");
+var _textStrings = _interopRequireDefault(require("../../constants/textStrings"));
+var _textstring = require("@chayns-components/textstring");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const Timer = ({
   devalueTime,
@@ -42,16 +45,11 @@ const Timer = ({
     });
   }, []);
   const label = (0, _react.useMemo)(() => {
-    let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';
+    let text = _textStrings.default.components.timer.devalued;
     if ((0, _date.differenceInHours)(refDate.current, devalueTime) > 0) {
-      const distanceLabel = (0, _date.getTimeTillNow)({
-        date: new Date(),
-        currentDate: devalueTime,
-        language
-      });
-      text = `${distanceLabel} (##TIME## Uhr)`;
+      text = _textStrings.default.components.timer.future;
     } else if ((0, _date.differenceInMinutes)(refDate.current, devalueTime) > 0) {
-      text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';
+      text = _textStrings.default.components.timer.devaluedWithMinutes;
     }
     const formatTime = (date, formatString) => {
       const hours = date.getHours().toString().padStart(2, '0');
@@ -61,7 +59,20 @@ const Timer = ({
       }
       return '';
     };
-    return text.replace('##MINUTES##', minutesShowValue).replace('##SECONDS##', secondsShowValue).replace('##TIME##', formatTime(devalueTime, 'HH:mm'));
+    const distanceLabel = (0, _date.getTimeTillNow)({
+      date: new Date(),
+      currentDate: devalueTime,
+      language
+    });
+    return /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
+      textstring: (0, _textstring.ttsToITextString)(text),
+      replacements: {
+        '##MINUTES##': minutesShowValue,
+        '##SECONDS##': secondsShowValue,
+        '##TIME##': formatTime(devalueTime, 'HH:mm'),
+        '##DISTANCE##': distanceLabel
+      }
+    });
   }, [devalueTime, minutesShowValue, secondsShowValue, language]);
   return /*#__PURE__*/_react.default.createElement(_Timer.Container, {
     $baseFontSize: 17,

package/lib/cjs/components/timer/Timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timer.js","names":["_react","_interopRequireWildcard","require","_chaynsApi","_Timer","_date","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Timer","devalueTime","color","textColor","active","language","getLanguage","refDate","useRef","Date","distance","setDistance","useState","intervalToDuration","start","end","minutesShowValue","useMemo","Math","max","minutes","toString","secondsShowValue","seconds","useEffect","current","interval","setInterval","clearInterval","handlePointerDownCapture","useCallback","vibrate","pattern","iOSFeedbackVibration","label","text","differenceInHours","distanceLabel","getTimeTillNow","date","currentDate","differenceInMinutes","formatTime","formatString","hours","getHours","padStart","getMinutes","replace","createElement","Container","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture","Time","_default","exports"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getLanguage, vibrate } from 'chayns-api';\n\nimport { Container, Time } from './Timer.styles';\nimport {\n    differenceInHours,\n    differenceInMinutes,\n    getTimeTillNow,\n    intervalToDuration,\n} from '../../utils/date';\n\nexport type TimerProps = {\n    color: string;\n    devalueTime: Date;\n    textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n    const { active: language } = getLanguage();\n\n    const refDate = useRef(new Date());\n    const [distance, setDistance] = useState(\n        intervalToDuration({\n            start: devalueTime,\n            end: new Date(),\n        }),\n    );\n    const minutesShowValue = useMemo(\n        () => Math.max(distance.minutes ?? 0, 0).toString(),\n        [distance.minutes],\n    );\n    const secondsShowValue = useMemo(\n        () => Math.max(distance.seconds ?? 0, 0).toString(),\n        [distance.seconds],\n    );\n\n    useEffect(() => {\n        refDate.current = new Date();\n        const interval = setInterval(() => {\n            refDate.current = new Date();\n            setDistance(\n                intervalToDuration({\n                    start: devalueTime,\n                    end: refDate.current,\n                }),\n            );\n        }, 500);\n        return () => clearInterval(interval);\n    }, [devalueTime]);\n\n    const handlePointerDownCapture = useCallback(() => {\n        void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n    }, []);\n\n    const label = useMemo(() => {\n        let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n        if (differenceInHours(refDate.current, devalueTime) > 0) {\n            const distanceLabel = getTimeTillNow({\n                date: new Date(),\n                currentDate: devalueTime,\n                language,\n            });\n            text = `${distanceLabel} (##TIME## Uhr)`;\n        } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n            text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n        }\n\n        const formatTime = (date: Date, formatString: string): string => {\n            const hours = date.getHours().toString().padStart(2, '0');\n            const minutes = date.getMinutes().toString().padStart(2, '0');\n\n            if (formatString === 'HH:mm') {\n                return `${hours}:${minutes}`;\n            }\n            return '';\n        };\n\n        return text\n            .replace('##MINUTES##', minutesShowValue)\n            .replace('##SECONDS##', secondsShowValue)\n            .replace('##TIME##', formatTime(devalueTime, 'HH:mm'));\n    }, [devalueTime, minutesShowValue, secondsShowValue, language]);\n\n    return (\n        <Container\n            $baseFontSize={17}\n            $borderSize={2}\n            $height={50}\n            $color={color}\n            $textColor={textColor}\n            $backgroundColor={color}\n            onPointerDownCapture={handlePointerDownCapture}\n        >\n            <Time>{label}</Time>\n        </Container>\n    );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Timer.js","names":["_react","_interopRequireWildcard","require","_chaynsApi","_Timer","_date","_textStrings","_interopRequireDefault","_textstring","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Timer","devalueTime","color","textColor","active","language","getLanguage","refDate","useRef","Date","distance","setDistance","useState","intervalToDuration","start","end","minutesShowValue","useMemo","Math","max","minutes","toString","secondsShowValue","seconds","useEffect","current","interval","setInterval","clearInterval","handlePointerDownCapture","useCallback","vibrate","pattern","iOSFeedbackVibration","label","text","textStrings","components","timer","devalued","differenceInHours","future","differenceInMinutes","devaluedWithMinutes","formatTime","date","formatString","hours","getHours","padStart","getMinutes","distanceLabel","getTimeTillNow","currentDate","createElement","Textstring","textstring","ttsToITextString","replacements","Container","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture","Time","_default","exports"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getLanguage, vibrate } from 'chayns-api';\n\nimport { Container, Time } from './Timer.styles';\nimport {\n    differenceInHours,\n    differenceInMinutes,\n    getTimeTillNow,\n    intervalToDuration,\n} from '../../utils/date';\nimport textStrings from '../../constants/textStrings';\nimport { Textstring, ttsToITextString } from '@chayns-components/textstring';\n\nexport type TimerProps = {\n    color: string;\n    devalueTime: Date;\n    textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n    const { active: language } = getLanguage();\n\n    const refDate = useRef(new Date());\n    const [distance, setDistance] = useState(\n        intervalToDuration({\n            start: devalueTime,\n            end: new Date(),\n        }),\n    );\n    const minutesShowValue = useMemo(\n        () => Math.max(distance.minutes ?? 0, 0).toString(),\n        [distance.minutes],\n    );\n    const secondsShowValue = useMemo(\n        () => Math.max(distance.seconds ?? 0, 0).toString(),\n        [distance.seconds],\n    );\n\n    useEffect(() => {\n        refDate.current = new Date();\n        const interval = setInterval(() => {\n            refDate.current = new Date();\n            setDistance(\n                intervalToDuration({\n                    start: devalueTime,\n                    end: refDate.current,\n                }),\n            );\n        }, 500);\n        return () => clearInterval(interval);\n    }, [devalueTime]);\n\n    const handlePointerDownCapture = useCallback(() => {\n        void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n    }, []);\n\n    const label = useMemo(() => {\n        let text: { stringName: string; fallback: string } = textStrings.components.timer.devalued;\n        if (differenceInHours(refDate.current, devalueTime) > 0) {\n            text = textStrings.components.timer.future;\n        } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n            text = textStrings.components.timer.devaluedWithMinutes;\n        }\n\n        const formatTime = (date: Date, formatString: string): string => {\n            const hours = date.getHours().toString().padStart(2, '0');\n            const minutes = date.getMinutes().toString().padStart(2, '0');\n\n            if (formatString === 'HH:mm') {\n                return `${hours}:${minutes}`;\n            }\n            return '';\n        };\n\n        const distanceLabel = getTimeTillNow({\n            date: new Date(),\n            currentDate: devalueTime,\n            language,\n        });\n\n        return (\n            <Textstring\n                textstring={ttsToITextString(text)}\n                replacements={{\n                    '##MINUTES##': minutesShowValue,\n                    '##SECONDS##': secondsShowValue,\n                    '##TIME##': formatTime(devalueTime, 'HH:mm'),\n                    '##DISTANCE##': distanceLabel,\n                }}\n            />\n        );\n    }, [devalueTime, minutesShowValue, secondsShowValue, language]);\n\n    return (\n        <Container\n            $baseFontSize={17}\n            $borderSize={2}\n            $height={50}\n            $color={color}\n            $textColor={textColor}\n            $backgroundColor={color}\n            onPointerDownCapture={handlePointerDownCapture}\n        >\n            <Time>{label}</Time>\n        </Container>\n    );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/constants/textStrings.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  components: {
+    slider: {
+      tracktext: {
+        stringName: 'txt_chayns_components_devalue_slider_components_slider_tracktext',
+        fallback: 'EINLÖSEN'
+      }
+    },
+    timer: {
+      devalued: {
+        stringName: 'txt_chayns_components_devalue_slider_components_timer_devalued',
+        fallback: 'Vor ##SECONDS## Sek. (##TIME## Uhr)'
+      },
+      devaluedWithMinutes: {
+        stringName: 'txt_chayns_components_devalue_slider_components_timer_devaluedWithMinutes',
+        fallback: 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)'
+      },
+      future: {
+        stringName: 'txt_chayns_components_devalue_slider_components_timer_future',
+        fallback: '##DISTANCE## (##TIME## Uhr)'
+      }
+    }
+  }
+};
+//# sourceMappingURL=textStrings.js.map

package/lib/cjs/constants/textStrings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textStrings.js","names":["components","slider","tracktext","stringName","fallback","timer","devalued","devaluedWithMinutes","future"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        slider: {\n            tracktext: {\n                stringName: 'txt_chayns_components_devalue_slider_components_slider_tracktext',\n                fallback: 'EINLÖSEN',\n            },\n        },\n        timer: {\n            devalued: {\n                stringName: 'txt_chayns_components_devalue_slider_components_timer_devalued',\n                fallback: 'Vor ##SECONDS## Sek. (##TIME## Uhr)',\n            },\n            devaluedWithMinutes: {\n                stringName:\n                    'txt_chayns_components_devalue_slider_components_timer_devaluedWithMinutes',\n                fallback: 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)',\n            },\n            future: {\n                stringName: 'txt_chayns_components_devalue_slider_components_timer_future',\n                fallback: '##DISTANCE## (##TIME## Uhr)',\n            },\n        },\n    },\n} as const;\n"],"mappings":";;;;;;iCAAe;EACXA,UAAU,EAAE;IACRC,MAAM,EAAE;MACJC,SAAS,EAAE;QACPC,UAAU,EAAE,kEAAkE;QAC9EC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDC,KAAK,EAAE;MACHC,QAAQ,EAAE;QACNH,UAAU,EAAE,gEAAgE;QAC5EC,QAAQ,EAAE;MACd,CAAC;MACDG,mBAAmB,EAAE;QACjBJ,UAAU,EACN,2EAA2E;QAC/EC,QAAQ,EAAE;MACd,CAAC;MACDI,MAAM,EAAE;QACJL,UAAU,EAAE,8DAA8D;QAC1EC,QAAQ,EAAE;MACd;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}

package/lib/esm/components/DevalueSlider.js

@@ -1,12 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Slider from './slider/Slider';
 import Timer from './timer/Timer';
+import { TextstringProvider } from '@chayns-components/textstring';
 const DevalueSlider = ({
   backgroundColor = 'red',
   devalueBackgroundColor = 'green',
   devalueTime,
   isDisabled,
-  label = 'EINLÖSEN',
+  label,
   onDevalue,
   onChange,
   onComplete
@@ -28,12 +29,16 @@ const DevalueSlider = ({
     sliderRef.current?.enable();
   }, [isDisabled]);
   if (timerDevalueTime) {
-    return /*#__PURE__*/React.createElement(Timer, {
+    return /*#__PURE__*/React.createElement(TextstringProvider, {
+      libraryName: "@chayns-component-devalue-slider"
+    }, /*#__PURE__*/React.createElement(Timer, {
       color: devalueBackgroundColor,
       devalueTime: timerDevalueTime
-    });
+    }));
   }
-  return /*#__PURE__*/React.createElement(Slider, {
+  return /*#__PURE__*/React.createElement(TextstringProvider, {
+    libraryName: "@chayns-component-devalue-slider"
+  }, /*#__PURE__*/React.createElement(Slider, {
     ref: sliderRef,
     onDevalue: onDevalue,
     color: backgroundColor,
@@ -41,7 +46,7 @@ const DevalueSlider = ({
     onComplete: handleCompleted,
     onChange: onChange,
     trackText: label
-  });
+  }));
 };
 export default DevalueSlider;
 //# sourceMappingURL=DevalueSlider.js.map

package/lib/esm/components/DevalueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevalueSlider.js","names":["React","useCallback","useEffect","useRef","useState","Slider","Timer","DevalueSlider","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","label","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","sliderRef","handleCompleted","Date","current","disable","enable","createElement","color","ref","devalueColor","trackText"],"sources":["../../../src/components/DevalueSlider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';\nimport Slider, { type SliderRef } from './slider/Slider';\nimport Timer from './timer/Timer';\n\nexport type DevalueSliderOnDevalueHandlerResult = { success: boolean };\nexport type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;\n\nexport type DevalueSliderOnChangeHandler = (relativeValue: number) => void;\nexport type DevalueSliderOnCompleteHandler = () => void;\n\nexport type DevalueSliderProps = {\n    /**\n     * The basic color of the slider.\n     * This color is the background of the track before the slider is devalued.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The devalue color of the slider.\n     * This color fills the track from the left on user movement.\n     * This color is the background of the timer after the slider is devalued.\n     */\n    devalueBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * If this slider was devalued, provide the time when it was devalued.\n     * This will show a timer.\n     */\n    devalueTime?: Date;\n    /**\n     * Disables the slider and cancels any active drags.\n     */\n    isDisabled?: boolean;\n    /**\n     * The label of the slider. The default value is \"EINLÖSEN\"\n     */\n    label?: string;\n    /**\n     * This function is called when the slider is devalued.\n     */\n    onDevalue?: DevalueSliderOnDevalueHandler;\n    /**\n     * This function is called when the slider value changes.\n     * With this function you can keep track of the movement of the slider.\n     */\n    onChange?: DevalueSliderOnChangeHandler;\n    /**\n     * This function is called when the slider is completed.\n     * The slider is completed when the user devalues the slider\n     * and the animation is completed.\n     */\n    onComplete?: DevalueSliderOnCompleteHandler;\n};\n\nconst DevalueSlider: React.FC<DevalueSliderProps> = ({\n    backgroundColor = 'red',\n    devalueBackgroundColor = 'green',\n    devalueTime,\n    isDisabled,\n    label = 'EINLÖSEN',\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\n        setTimerDevalueTime(devalueTime);\n    }, [devalueTime]);\n\n    const handleCompleted = useCallback(() => {\n        setTimerDevalueTime(new Date());\n\n        onComplete?.();\n    }, [onComplete]);\n\n    useEffect(() => {\n        if (isDisabled) {\n            sliderRef.current?.disable();\n\n            return;\n        }\n\n        sliderRef.current?.enable();\n    }, [isDisabled]);\n\n    if (timerDevalueTime) {\n        return <Timer color={devalueBackgroundColor} devalueTime={timerDevalueTime} />;\n    }\n\n    return (\n        <Slider\n            ref={sliderRef}\n            onDevalue={onDevalue}\n            color={backgroundColor}\n            devalueColor={devalueBackgroundColor}\n            onComplete={handleCompleted}\n            onChange={onChange}\n            trackText={label}\n        />\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAA4B,OAAO;AAC3F,OAAOC,MAAM,MAA0B,iBAAiB;AACxD,OAAOC,KAAK,MAAM,eAAe;AAkDjC,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,eAAe,GAAG,KAAK;EACvBC,sBAAsB,GAAG,OAAO;EAChCC,WAAW;EACXC,UAAU;EACVC,KAAK,GAAG,UAAU;EAClBC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGb,QAAQ,CAACM,WAAW,CAAC;EAErE,MAAMQ,SAAS,GAAGf,MAAM,CAAY,IAAI,CAAC;EAEzCD,SAAS,CAAC,MAAM;IACZe,mBAAmB,CAACP,WAAW,CAAC;EACpC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMS,eAAe,GAAGlB,WAAW,CAAC,MAAM;IACtCgB,mBAAmB,CAAC,IAAIG,IAAI,CAAC,CAAC,CAAC;IAE/BL,UAAU,GAAG,CAAC;EAClB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhBb,SAAS,CAAC,MAAM;IACZ,IAAIS,UAAU,EAAE;MACZO,SAAS,CAACG,OAAO,EAAEC,OAAO,CAAC,CAAC;MAE5B;IACJ;IAEAJ,SAAS,CAACG,OAAO,EAAEE,MAAM,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACZ,UAAU,CAAC,CAAC;EAEhB,IAAIK,gBAAgB,EAAE;IAClB,oBAAOhB,KAAA,CAAAwB,aAAA,CAAClB,KAAK;MAACmB,KAAK,EAAEhB,sBAAuB;MAACC,WAAW,EAAEM;IAAiB,CAAE,CAAC;EAClF;EAEA,oBACIhB,KAAA,CAAAwB,aAAA,CAACnB,MAAM;IACHqB,GAAG,EAAER,SAAU;IACfL,SAAS,EAAEA,SAAU;IACrBY,KAAK,EAAEjB,eAAgB;IACvBmB,YAAY,EAAElB,sBAAuB;IACrCM,UAAU,EAAEI,eAAgB;IAC5BL,QAAQ,EAAEA,QAAS;IACnBc,SAAS,EAAEhB;EAAM,CACpB,CAAC;AAEV,CAAC;AAED,eAAeL,aAAa","ignoreList":[]}
+{"version":3,"file":"DevalueSlider.js","names":["React","useCallback","useEffect","useRef","useState","Slider","Timer","TextstringProvider","DevalueSlider","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","label","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","sliderRef","handleCompleted","Date","current","disable","enable","createElement","libraryName","color","ref","devalueColor","trackText"],"sources":["../../../src/components/DevalueSlider.tsx"],"sourcesContent":["import React, { type CSSProperties, useCallback, useEffect, useRef, useState } from 'react';\nimport Slider, { type SliderRef } from './slider/Slider';\nimport Timer from './timer/Timer';\nimport { TextstringProvider } from '@chayns-components/textstring';\n\nexport type DevalueSliderOnDevalueHandlerResult = { success: boolean };\nexport type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;\n\nexport type DevalueSliderOnChangeHandler = (relativeValue: number) => void;\nexport type DevalueSliderOnCompleteHandler = () => void;\n\nexport type DevalueSliderProps = {\n    /**\n     * The basic color of the slider.\n     * This color is the background of the track before the slider is devalued.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The devalue color of the slider.\n     * This color fills the track from the left on user movement.\n     * This color is the background of the timer after the slider is devalued.\n     */\n    devalueBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * If this slider was devalued, provide the time when it was devalued.\n     * This will show a timer.\n     */\n    devalueTime?: Date;\n    /**\n     * Disables the slider and cancels any active drags.\n     */\n    isDisabled?: boolean;\n    /**\n     * The label of the slider. The default value is \"EINLÖSEN\"\n     */\n    label?: string;\n    /**\n     * This function is called when the slider is devalued.\n     */\n    onDevalue?: DevalueSliderOnDevalueHandler;\n    /**\n     * This function is called when the slider value changes.\n     * With this function you can keep track of the movement of the slider.\n     */\n    onChange?: DevalueSliderOnChangeHandler;\n    /**\n     * This function is called when the slider is completed.\n     * The slider is completed when the user devalues the slider\n     * and the animation is completed.\n     */\n    onComplete?: DevalueSliderOnCompleteHandler;\n};\n\nconst DevalueSlider: React.FC<DevalueSliderProps> = ({\n    backgroundColor = 'red',\n    devalueBackgroundColor = 'green',\n    devalueTime,\n    isDisabled,\n    label,\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\n        setTimerDevalueTime(devalueTime);\n    }, [devalueTime]);\n\n    const handleCompleted = useCallback(() => {\n        setTimerDevalueTime(new Date());\n\n        onComplete?.();\n    }, [onComplete]);\n\n    useEffect(() => {\n        if (isDisabled) {\n            sliderRef.current?.disable();\n\n            return;\n        }\n\n        sliderRef.current?.enable();\n    }, [isDisabled]);\n\n    if (timerDevalueTime) {\n        return (\n            <TextstringProvider libraryName=\"@chayns-component-devalue-slider\">\n                <Timer color={devalueBackgroundColor} devalueTime={timerDevalueTime} />\n            </TextstringProvider>\n        );\n    }\n\n    return (\n        <TextstringProvider libraryName=\"@chayns-component-devalue-slider\">\n            <Slider\n                ref={sliderRef}\n                onDevalue={onDevalue}\n                color={backgroundColor}\n                devalueColor={devalueBackgroundColor}\n                onComplete={handleCompleted}\n                onChange={onChange}\n                trackText={label}\n            />\n        </TextstringProvider>\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAwBC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC3F,OAAOC,MAAM,MAA0B,iBAAiB;AACxD,OAAOC,KAAK,MAAM,eAAe;AACjC,SAASC,kBAAkB,QAAQ,+BAA+B;AAkDlE,MAAMC,aAA2C,GAAGA,CAAC;EACjDC,eAAe,GAAG,KAAK;EACvBC,sBAAsB,GAAG,OAAO;EAChCC,WAAW;EACXC,UAAU;EACVC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGd,QAAQ,CAACO,WAAW,CAAC;EAErE,MAAMQ,SAAS,GAAGhB,MAAM,CAAY,IAAI,CAAC;EAEzCD,SAAS,CAAC,MAAM;IACZgB,mBAAmB,CAACP,WAAW,CAAC;EACpC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMS,eAAe,GAAGnB,WAAW,CAAC,MAAM;IACtCiB,mBAAmB,CAAC,IAAIG,IAAI,CAAC,CAAC,CAAC;IAE/BL,UAAU,GAAG,CAAC;EAClB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhBd,SAAS,CAAC,MAAM;IACZ,IAAIU,UAAU,EAAE;MACZO,SAAS,CAACG,OAAO,EAAEC,OAAO,CAAC,CAAC;MAE5B;IACJ;IAEAJ,SAAS,CAACG,OAAO,EAAEE,MAAM,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACZ,UAAU,CAAC,CAAC;EAEhB,IAAIK,gBAAgB,EAAE;IAClB,oBACIjB,KAAA,CAAAyB,aAAA,CAAClB,kBAAkB;MAACmB,WAAW,EAAC;IAAkC,gBAC9D1B,KAAA,CAAAyB,aAAA,CAACnB,KAAK;MAACqB,KAAK,EAAEjB,sBAAuB;MAACC,WAAW,EAAEM;IAAiB,CAAE,CACtD,CAAC;EAE7B;EAEA,oBACIjB,KAAA,CAAAyB,aAAA,CAAClB,kBAAkB;IAACmB,WAAW,EAAC;EAAkC,gBAC9D1B,KAAA,CAAAyB,aAAA,CAACpB,MAAM;IACHuB,GAAG,EAAET,SAAU;IACfL,SAAS,EAAEA,SAAU;IACrBa,KAAK,EAAElB,eAAgB;IACvBoB,YAAY,EAAEnB,sBAAuB;IACrCM,UAAU,EAAEI,eAAgB;IAC5BL,QAAQ,EAAEA,QAAS;IACnBe,SAAS,EAAEjB;EAAM,CACpB,CACe,CAAC;AAE7B,CAAC;AAED,eAAeL,aAAa","ignoreList":[]}

package/lib/esm/components/slider/Slider.js

@@ -5,14 +5,16 @@ import { useAnimation, useDragControls, useMotionValue, useTransform } from 'mot
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useThumbIcon } from '../../hooks/design';
 import { sleep } from '../../utils/common';
-import { Container, createThumbVariants, Thumb, ThumbIcon, ThumbIconContainer, THUMB_ICON_VARIANTS, Track, TrackBackground, TrackText } from './Slider.styles';
+import { Container, createThumbVariants, Thumb, THUMB_ICON_VARIANTS, ThumbIcon, ThumbIconContainer, Track, TrackBackground, TrackText } from './Slider.styles';
+import { Textstring, ttsToITextString } from '@chayns-components/textstring';
+import textStrings from '../../constants/textStrings';
 const Slider = /*#__PURE__*/forwardRef(({
   color,
   devalueColor,
   trackHeight = 50,
   thumbSize = 40,
   borderSize = 2,
-  trackText = 'EINLÖSEN',
+  trackText,
   onChange = () => {},
   onDevalue = () => Promise.resolve({
     success: true
@@ -197,7 +199,9 @@ const Slider = /*#__PURE__*/forwardRef(({
     },
     $color: "white",
     $baseFontSize: baseFontSize
-  }, trackText)));
+  }, trackText ?? /*#__PURE__*/React.createElement(Textstring, {
+    textstring: ttsToITextString(textStrings.components.slider.tracktext)
+  }))));
 });
 export default Slider;
 //# sourceMappingURL=Slider.js.map

package/lib/esm/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["SmallWaitCursor","useSize","invokeCall","vibrate","useAnimation","useDragControls","useMotionValue","useTransform","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useThumbIcon","sleep","Container","createThumbVariants","Thumb","ThumbIcon","ThumbIconContainer","THUMB_ICON_VARIANTS","Track","TrackBackground","TrackText","Slider","color","devalueColor","trackHeight","thumbSize","borderSize","trackText","onChange","onDevalue","Promise","resolve","success","onComplete","ref","trackRef","setTrackRef","trackWidth","initialWidth","initialHeight","iconColor","setIconColor","isCompleted","setIsCompleted","isDisabled","setIsDisabled","isCompletedRef","showWaitCursor","setShowWaitCursor","scaleFactor","x","icon","styles","iconStyles","dragControls","vibrationTrigger","value","Math","round","lastVibrationValue","on","current","pattern","containerAnimation","thumbVariants","textOpacity","relativeValue","thumbRadius","parseFloat","toPrecision","relativeBackgroundValue","trackBackground","handlePointerDownCapture","event","currentValue","get","preventDefault","stopPropagation","action","iOSFeedbackVibration","handleRedeem","devaluePromise","sleepPromise","devalued","all","start","handleTrackRef","node","handleDragStart","handleDragEnd","disable","enable","baseFontSize","createElement","animate","$height","$borderSize","$backgroundColor","style","background","variants","$size","$trackHeight","drag","dragElastic","onPointerDownCapture","whileTap","scale","cursor","onDragStart","onDragEnd","dragConstraints","right","left","key","shouldHideBackground","opacity","$color","$baseFontSize"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport useSize from '@react-hook/size';\nimport { invokeCall, vibrate } from 'chayns-api';\nimport {\n    useAnimation,\n    useDragControls,\n    useMotionValue,\n    useTransform,\n    type DragHandler,\n} from 'motion/react';\nimport React, {\n    forwardRef,\n    PointerEvent,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useThumbIcon } from '../../hooks/design';\nimport { sleep } from '../../utils/common';\nimport type { DevalueSliderProps } from '../DevalueSlider';\nimport {\n    Container,\n    createThumbVariants,\n    Thumb,\n    ThumbIcon,\n    ThumbIconContainer,\n    THUMB_ICON_VARIANTS,\n    Track,\n    TrackBackground,\n    TrackText,\n} from './Slider.styles';\n\nexport type SliderProps = {\n    color: NonNullable<DevalueSliderProps['backgroundColor']>;\n    devalueColor: NonNullable<DevalueSliderProps['devalueBackgroundColor']>;\n    thumbSize?: number;\n    trackHeight?: number;\n    trackText?: string;\n    borderSize?: number;\n    onChange: DevalueSliderProps['onChange'];\n    onDevalue: DevalueSliderProps['onDevalue'];\n    onComplete: DevalueSliderProps['onComplete'];\n};\n\nexport type SliderRef = {\n    disable: () => void;\n    enable: () => void;\n};\n\nconst Slider = forwardRef<SliderRef, SliderProps>(\n    (\n        {\n            color,\n            devalueColor,\n            trackHeight = 50,\n            thumbSize = 40,\n            borderSize = 2,\n            trackText = 'EINLÖSEN',\n            onChange = () => {},\n            onDevalue = () => Promise.resolve({ success: true }),\n            onComplete,\n        },\n        ref,\n    ) => {\n        const [trackRef, setTrackRef] = useState<HTMLDivElement | null>(null);\n        const [trackWidth] = useSize(trackRef, { initialWidth: 300, initialHeight: 50 });\n        const [iconColor, setIconColor] = useState('black');\n        const [isCompleted, setIsCompleted] = useState(false);\n        const [isDisabled, setIsDisabled] = useState(false);\n        const isCompletedRef = useRef(isCompleted);\n        const [showWaitCursor, setShowWaitCursor] = useState(false);\n        const scaleFactor = useMemo(() => trackHeight / thumbSize, [thumbSize, trackHeight]);\n\n        const x = useMotionValue(0);\n        const { icon, styles: iconStyles } = useThumbIcon(x, iconColor);\n        const dragControls = useDragControls();\n\n        const vibrationTrigger = useTransform(\n            x,\n            // round to 10 to avoid unnecessary vibrate calls\n            (value) => Math.round(value / 10) * 10,\n        );\n        const lastVibrationValue = useRef(0);\n        useEffect(() => {\n            vibrationTrigger.on('change', (value) => {\n                if (!isCompletedRef.current && value !== lastVibrationValue.current) {\n                    lastVibrationValue.current = value;\n                    void vibrate({ pattern: [10] });\n                }\n            });\n        }, [vibrationTrigger]);\n\n        const containerAnimation = useAnimation();\n        const thumbVariants = useMemo(\n            () =>\n                createThumbVariants({\n                    thumbSize,\n                    trackWidth,\n                    scaleFactor,\n                }),\n            [scaleFactor, thumbSize, trackWidth],\n        );\n\n        const textOpacity = useTransform(x, [0, 120], [1, 0]);\n\n        // this is the relative value of the right edge of the thumb\n        const relativeValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = thumbSize * scaleFactor;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        // this is the relative value of the center of the thumb, it is used for the background gradient\n        const relativeBackgroundValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = (thumbSize * scaleFactor) / 2;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        const trackBackground = useTransform(relativeBackgroundValue, (value) => {\n            if (isCompleted) return devalueColor;\n            if (!value) return 'transparent';\n            return `linear-gradient(to right, ${devalueColor} ${value}%, transparent ${value}%)`;\n        });\n\n        const handlePointerDownCapture = useCallback(\n            (event: PointerEvent) => {\n                const currentValue = relativeValue.get();\n\n                if (currentValue > 5) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                void invokeCall({\n                    action: 19,\n                    value: {\n                        pattern: [50],\n                        iOSFeedbackVibration: 7,\n                    },\n                });\n            },\n            [relativeValue],\n        );\n\n        const handleRedeem = useCallback(async () => {\n            setShowWaitCursor(true);\n            setIsCompleted(true);\n            isCompletedRef.current = true;\n\n            const devaluePromise = onDevalue();\n            const sleepPromise = sleep(1000);\n            const [devalued] = await Promise.all([devaluePromise, sleepPromise]);\n\n            if (!devalued.success) {\n                setShowWaitCursor(false);\n                setIsCompleted(false);\n                isCompletedRef.current = false;\n                await containerAnimation.start('base');\n                return;\n            }\n\n            setShowWaitCursor(false);\n            setIconColor('white');\n            void invokeCall({\n                action: 19,\n                value: {\n                    iOSFeedbackVibration: 3,\n                    pattern: [100, 200, 100],\n                },\n            });\n\n            await containerAnimation.start('completed');\n            await containerAnimation.start('leaving');\n            onComplete?.();\n        }, [containerAnimation, onComplete, onDevalue]);\n\n        const handleTrackRef = useCallback((node: HTMLDivElement | null) => {\n            setTrackRef(node);\n        }, []);\n\n        const handleDragStart = useCallback<NonNullable<DragHandler>>(() => {\n            void containerAnimation.start('dragging');\n        }, [containerAnimation]);\n\n        const handleDragEnd = useCallback<NonNullable<DragHandler>>(() => {\n            if (relativeValue.get() > 98) {\n                void handleRedeem();\n                return;\n            }\n\n            void containerAnimation.start('base');\n        }, [relativeValue, containerAnimation, handleRedeem]);\n\n        useEffect(() => {\n            void containerAnimation.start('base');\n        }, [containerAnimation]);\n\n        useEffect(() => {\n            if (isCompleted) return () => {};\n            return relativeValue.on('change', onChange);\n        }, [isCompleted, onChange, relativeValue]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                disable: () => {\n                    setIsDisabled(true);\n                    setShowWaitCursor(false);\n                    setIsCompleted(false);\n                    isCompletedRef.current = false;\n                    void containerAnimation.start('base');\n                },\n                enable: () => {\n                    setIsDisabled(false);\n                },\n            }),\n            [containerAnimation],\n        );\n\n        const baseFontSize = useMemo(() => 22, []);\n\n        return (\n            <Container animate={containerAnimation}>\n                <Track\n                    $height={trackHeight}\n                    $borderSize={borderSize}\n                    $backgroundColor={color}\n                    ref={handleTrackRef}\n                >\n                    <TrackBackground\n                        $height={trackHeight}\n                        style={{ background: trackBackground }}\n                    />\n                    <Thumb\n                        variants={thumbVariants}\n                        $size={thumbSize}\n                        $trackHeight={trackHeight}\n                        style={{ x }}\n                        drag={isCompleted || isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        onPointerDownCapture={handlePointerDownCapture}\n                        whileTap={{ scale: 1.4, cursor: 'grabbing' }}\n                        onDragStart={handleDragStart}\n                        onDragEnd={handleDragEnd}\n                        dragControls={dragControls}\n                        dragConstraints={{\n                            right: trackWidth - thumbSize * scaleFactor,\n                            left: 0,\n                        }}\n                    >\n                        <ThumbIconContainer>\n                            {!showWaitCursor && (\n                                <ThumbIcon\n                                    key=\"thumb-icon\"\n                                    icon={icon}\n                                    variants={THUMB_ICON_VARIANTS}\n                                    style={iconStyles}\n                                />\n                            )}\n                            {showWaitCursor && (\n                                <SmallWaitCursor shouldHideBackground color=\"black\" />\n                            )}\n                        </ThumbIconContainer>\n                    </Thumb>\n                    <TrackText\n                        style={{ opacity: textOpacity }}\n                        $color=\"white\"\n                        $baseFontSize={baseFontSize}\n                    >\n                        {trackText}\n                    </TrackText>\n                </Track>\n            </Container>\n        );\n    },\n);\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider.js","names":["SmallWaitCursor","useSize","invokeCall","vibrate","useAnimation","useDragControls","useMotionValue","useTransform","React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useThumbIcon","sleep","Container","createThumbVariants","Thumb","THUMB_ICON_VARIANTS","ThumbIcon","ThumbIconContainer","Track","TrackBackground","TrackText","Textstring","ttsToITextString","textStrings","Slider","color","devalueColor","trackHeight","thumbSize","borderSize","trackText","onChange","onDevalue","Promise","resolve","success","onComplete","ref","trackRef","setTrackRef","trackWidth","initialWidth","initialHeight","iconColor","setIconColor","isCompleted","setIsCompleted","isDisabled","setIsDisabled","isCompletedRef","showWaitCursor","setShowWaitCursor","scaleFactor","x","icon","styles","iconStyles","dragControls","vibrationTrigger","value","Math","round","lastVibrationValue","on","current","pattern","containerAnimation","thumbVariants","textOpacity","relativeValue","thumbRadius","parseFloat","toPrecision","relativeBackgroundValue","trackBackground","handlePointerDownCapture","event","currentValue","get","preventDefault","stopPropagation","action","iOSFeedbackVibration","handleRedeem","devaluePromise","sleepPromise","devalued","all","start","handleTrackRef","node","handleDragStart","handleDragEnd","disable","enable","baseFontSize","createElement","animate","$height","$borderSize","$backgroundColor","style","background","variants","$size","$trackHeight","drag","dragElastic","onPointerDownCapture","whileTap","scale","cursor","onDragStart","onDragEnd","dragConstraints","right","left","key","shouldHideBackground","opacity","$color","$baseFontSize","textstring","components","slider","tracktext"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { SmallWaitCursor } from '@chayns-components/core';\nimport useSize from '@react-hook/size';\nimport { invokeCall, vibrate } from 'chayns-api';\nimport {\n    type DragHandler,\n    useAnimation,\n    useDragControls,\n    useMotionValue,\n    useTransform,\n} from 'motion/react';\nimport React, {\n    forwardRef,\n    PointerEvent,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useThumbIcon } from '../../hooks/design';\nimport { sleep } from '../../utils/common';\nimport type { DevalueSliderProps } from '../DevalueSlider';\nimport {\n    Container,\n    createThumbVariants,\n    Thumb,\n    THUMB_ICON_VARIANTS,\n    ThumbIcon,\n    ThumbIconContainer,\n    Track,\n    TrackBackground,\n    TrackText,\n} from './Slider.styles';\nimport { Textstring, ttsToITextString } from '@chayns-components/textstring';\nimport textStrings from '../../constants/textStrings';\n\nexport type SliderProps = {\n    color: NonNullable<DevalueSliderProps['backgroundColor']>;\n    devalueColor: NonNullable<DevalueSliderProps['devalueBackgroundColor']>;\n    thumbSize?: number;\n    trackHeight?: number;\n    trackText?: string;\n    borderSize?: number;\n    onChange: DevalueSliderProps['onChange'];\n    onDevalue: DevalueSliderProps['onDevalue'];\n    onComplete: DevalueSliderProps['onComplete'];\n};\n\nexport type SliderRef = {\n    disable: () => void;\n    enable: () => void;\n};\n\nconst Slider = forwardRef<SliderRef, SliderProps>(\n    (\n        {\n            color,\n            devalueColor,\n            trackHeight = 50,\n            thumbSize = 40,\n            borderSize = 2,\n            trackText,\n            onChange = () => {},\n            onDevalue = () => Promise.resolve({ success: true }),\n            onComplete,\n        },\n        ref,\n    ) => {\n        const [trackRef, setTrackRef] = useState<HTMLDivElement | null>(null);\n        const [trackWidth] = useSize(trackRef, { initialWidth: 300, initialHeight: 50 });\n        const [iconColor, setIconColor] = useState('black');\n        const [isCompleted, setIsCompleted] = useState(false);\n        const [isDisabled, setIsDisabled] = useState(false);\n        const isCompletedRef = useRef(isCompleted);\n        const [showWaitCursor, setShowWaitCursor] = useState(false);\n        const scaleFactor = useMemo(() => trackHeight / thumbSize, [thumbSize, trackHeight]);\n\n        const x = useMotionValue(0);\n        const { icon, styles: iconStyles } = useThumbIcon(x, iconColor);\n        const dragControls = useDragControls();\n\n        const vibrationTrigger = useTransform(\n            x,\n            // round to 10 to avoid unnecessary vibrate calls\n            (value) => Math.round(value / 10) * 10,\n        );\n        const lastVibrationValue = useRef(0);\n        useEffect(() => {\n            vibrationTrigger.on('change', (value) => {\n                if (!isCompletedRef.current && value !== lastVibrationValue.current) {\n                    lastVibrationValue.current = value;\n                    void vibrate({ pattern: [10] });\n                }\n            });\n        }, [vibrationTrigger]);\n\n        const containerAnimation = useAnimation();\n        const thumbVariants = useMemo(\n            () =>\n                createThumbVariants({\n                    thumbSize,\n                    trackWidth,\n                    scaleFactor,\n                }),\n            [scaleFactor, thumbSize, trackWidth],\n        );\n\n        const textOpacity = useTransform(x, [0, 120], [1, 0]);\n\n        // this is the relative value of the right edge of the thumb\n        const relativeValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = thumbSize * scaleFactor;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        // this is the relative value of the center of the thumb, it is used for the background gradient\n        const relativeBackgroundValue = useTransform(x, (value) => {\n            if (!value) return 0;\n            const thumbRadius = (thumbSize * scaleFactor) / 2;\n            return parseFloat((((value + thumbRadius) / trackWidth) * 100).toPrecision(2));\n        });\n\n        const trackBackground = useTransform(relativeBackgroundValue, (value) => {\n            if (isCompleted) return devalueColor;\n            if (!value) return 'transparent';\n            return `linear-gradient(to right, ${devalueColor} ${value}%, transparent ${value}%)`;\n        });\n\n        const handlePointerDownCapture = useCallback(\n            (event: PointerEvent) => {\n                const currentValue = relativeValue.get();\n\n                if (currentValue > 5) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                void invokeCall({\n                    action: 19,\n                    value: {\n                        pattern: [50],\n                        iOSFeedbackVibration: 7,\n                    },\n                });\n            },\n            [relativeValue],\n        );\n\n        const handleRedeem = useCallback(async () => {\n            setShowWaitCursor(true);\n            setIsCompleted(true);\n            isCompletedRef.current = true;\n\n            const devaluePromise = onDevalue();\n            const sleepPromise = sleep(1000);\n            const [devalued] = await Promise.all([devaluePromise, sleepPromise]);\n\n            if (!devalued.success) {\n                setShowWaitCursor(false);\n                setIsCompleted(false);\n                isCompletedRef.current = false;\n                await containerAnimation.start('base');\n                return;\n            }\n\n            setShowWaitCursor(false);\n            setIconColor('white');\n            void invokeCall({\n                action: 19,\n                value: {\n                    iOSFeedbackVibration: 3,\n                    pattern: [100, 200, 100],\n                },\n            });\n\n            await containerAnimation.start('completed');\n            await containerAnimation.start('leaving');\n            onComplete?.();\n        }, [containerAnimation, onComplete, onDevalue]);\n\n        const handleTrackRef = useCallback((node: HTMLDivElement | null) => {\n            setTrackRef(node);\n        }, []);\n\n        const handleDragStart = useCallback<NonNullable<DragHandler>>(() => {\n            void containerAnimation.start('dragging');\n        }, [containerAnimation]);\n\n        const handleDragEnd = useCallback<NonNullable<DragHandler>>(() => {\n            if (relativeValue.get() > 98) {\n                void handleRedeem();\n                return;\n            }\n\n            void containerAnimation.start('base');\n        }, [relativeValue, containerAnimation, handleRedeem]);\n\n        useEffect(() => {\n            void containerAnimation.start('base');\n        }, [containerAnimation]);\n\n        useEffect(() => {\n            if (isCompleted) return () => {};\n            return relativeValue.on('change', onChange);\n        }, [isCompleted, onChange, relativeValue]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                disable: () => {\n                    setIsDisabled(true);\n                    setShowWaitCursor(false);\n                    setIsCompleted(false);\n                    isCompletedRef.current = false;\n                    void containerAnimation.start('base');\n                },\n                enable: () => {\n                    setIsDisabled(false);\n                },\n            }),\n            [containerAnimation],\n        );\n\n        const baseFontSize = useMemo(() => 22, []);\n\n        return (\n            <Container animate={containerAnimation}>\n                <Track\n                    $height={trackHeight}\n                    $borderSize={borderSize}\n                    $backgroundColor={color}\n                    ref={handleTrackRef}\n                >\n                    <TrackBackground\n                        $height={trackHeight}\n                        style={{ background: trackBackground }}\n                    />\n                    <Thumb\n                        variants={thumbVariants}\n                        $size={thumbSize}\n                        $trackHeight={trackHeight}\n                        style={{ x }}\n                        drag={isCompleted || isDisabled ? false : 'x'}\n                        dragElastic={0}\n                        onPointerDownCapture={handlePointerDownCapture}\n                        whileTap={{ scale: 1.4, cursor: 'grabbing' }}\n                        onDragStart={handleDragStart}\n                        onDragEnd={handleDragEnd}\n                        dragControls={dragControls}\n                        dragConstraints={{\n                            right: trackWidth - thumbSize * scaleFactor,\n                            left: 0,\n                        }}\n                    >\n                        <ThumbIconContainer>\n                            {!showWaitCursor && (\n                                <ThumbIcon\n                                    key=\"thumb-icon\"\n                                    icon={icon}\n                                    variants={THUMB_ICON_VARIANTS}\n                                    style={iconStyles}\n                                />\n                            )}\n                            {showWaitCursor && (\n                                <SmallWaitCursor shouldHideBackground color=\"black\" />\n                            )}\n                        </ThumbIconContainer>\n                    </Thumb>\n                    <TrackText\n                        style={{ opacity: textOpacity }}\n                        $color=\"white\"\n                        $baseFontSize={baseFontSize}\n                    >\n                        {trackText ?? (\n                            <Textstring\n                                textstring={ttsToITextString(\n                                    textStrings.components.slider.tracktext,\n                                )}\n                            />\n                        )}\n                    </TrackText>\n                </Track>\n            </Container>\n        );\n    },\n);\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/timer/Timer.js

@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { getLanguage, vibrate } from 'chayns-api';
 import { Container, Time } from './Timer.styles';
 import { differenceInHours, differenceInMinutes, getTimeTillNow, intervalToDuration } from '../../utils/date';
+import textStrings from '../../constants/textStrings';
+import { Textstring, ttsToITextString } from '@chayns-components/textstring';
 const Timer = ({
   devalueTime,
   color,
@@ -35,16 +37,11 @@ const Timer = ({
     });
   }, []);
   const label = useMemo(() => {
-    let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';
+    let text = textStrings.components.timer.devalued;
     if (differenceInHours(refDate.current, devalueTime) > 0) {
-      const distanceLabel = getTimeTillNow({
-        date: new Date(),
-        currentDate: devalueTime,
-        language
-      });
-      text = `${distanceLabel} (##TIME## Uhr)`;
+      text = textStrings.components.timer.future;
     } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {
-      text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';
+      text = textStrings.components.timer.devaluedWithMinutes;
     }
     const formatTime = (date, formatString) => {
       const hours = date.getHours().toString().padStart(2, '0');
@@ -54,7 +51,20 @@ const Timer = ({
       }
       return '';
     };
-    return text.replace('##MINUTES##', minutesShowValue).replace('##SECONDS##', secondsShowValue).replace('##TIME##', formatTime(devalueTime, 'HH:mm'));
+    const distanceLabel = getTimeTillNow({
+      date: new Date(),
+      currentDate: devalueTime,
+      language
+    });
+    return /*#__PURE__*/React.createElement(Textstring, {
+      textstring: ttsToITextString(text),
+      replacements: {
+        '##MINUTES##': minutesShowValue,
+        '##SECONDS##': secondsShowValue,
+        '##TIME##': formatTime(devalueTime, 'HH:mm'),
+        '##DISTANCE##': distanceLabel
+      }
+    });
   }, [devalueTime, minutesShowValue, secondsShowValue, language]);
   return /*#__PURE__*/React.createElement(Container, {
     $baseFontSize: 17,

package/lib/esm/components/timer/Timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Timer.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","getLanguage","vibrate","Container","Time","differenceInHours","differenceInMinutes","getTimeTillNow","intervalToDuration","Timer","devalueTime","color","textColor","active","language","refDate","Date","distance","setDistance","start","end","minutesShowValue","Math","max","minutes","toString","secondsShowValue","seconds","current","interval","setInterval","clearInterval","handlePointerDownCapture","pattern","iOSFeedbackVibration","label","text","distanceLabel","date","currentDate","formatTime","formatString","hours","getHours","padStart","getMinutes","replace","createElement","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getLanguage, vibrate } from 'chayns-api';\n\nimport { Container, Time } from './Timer.styles';\nimport {\n    differenceInHours,\n    differenceInMinutes,\n    getTimeTillNow,\n    intervalToDuration,\n} from '../../utils/date';\n\nexport type TimerProps = {\n    color: string;\n    devalueTime: Date;\n    textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n    const { active: language } = getLanguage();\n\n    const refDate = useRef(new Date());\n    const [distance, setDistance] = useState(\n        intervalToDuration({\n            start: devalueTime,\n            end: new Date(),\n        }),\n    );\n    const minutesShowValue = useMemo(\n        () => Math.max(distance.minutes ?? 0, 0).toString(),\n        [distance.minutes],\n    );\n    const secondsShowValue = useMemo(\n        () => Math.max(distance.seconds ?? 0, 0).toString(),\n        [distance.seconds],\n    );\n\n    useEffect(() => {\n        refDate.current = new Date();\n        const interval = setInterval(() => {\n            refDate.current = new Date();\n            setDistance(\n                intervalToDuration({\n                    start: devalueTime,\n                    end: refDate.current,\n                }),\n            );\n        }, 500);\n        return () => clearInterval(interval);\n    }, [devalueTime]);\n\n    const handlePointerDownCapture = useCallback(() => {\n        void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n    }, []);\n\n    const label = useMemo(() => {\n        let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n        if (differenceInHours(refDate.current, devalueTime) > 0) {\n            const distanceLabel = getTimeTillNow({\n                date: new Date(),\n                currentDate: devalueTime,\n                language,\n            });\n            text = `${distanceLabel} (##TIME## Uhr)`;\n        } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n            text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n        }\n\n        const formatTime = (date: Date, formatString: string): string => {\n            const hours = date.getHours().toString().padStart(2, '0');\n            const minutes = date.getMinutes().toString().padStart(2, '0');\n\n            if (formatString === 'HH:mm') {\n                return `${hours}:${minutes}`;\n            }\n            return '';\n        };\n\n        return text\n            .replace('##MINUTES##', minutesShowValue)\n            .replace('##SECONDS##', secondsShowValue)\n            .replace('##TIME##', formatTime(devalueTime, 'HH:mm'));\n    }, [devalueTime, minutesShowValue, secondsShowValue, language]);\n\n    return (\n        <Container\n            $baseFontSize={17}\n            $borderSize={2}\n            $height={50}\n            $color={color}\n            $textColor={textColor}\n            $backgroundColor={color}\n            onPointerDownCapture={handlePointerDownCapture}\n        >\n            <Time>{label}</Time>\n        </Container>\n    );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Timer.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","getLanguage","vibrate","Container","Time","differenceInHours","differenceInMinutes","getTimeTillNow","intervalToDuration","textStrings","Textstring","ttsToITextString","Timer","devalueTime","color","textColor","active","language","refDate","Date","distance","setDistance","start","end","minutesShowValue","Math","max","minutes","toString","secondsShowValue","seconds","current","interval","setInterval","clearInterval","handlePointerDownCapture","pattern","iOSFeedbackVibration","label","text","components","timer","devalued","future","devaluedWithMinutes","formatTime","date","formatString","hours","getHours","padStart","getMinutes","distanceLabel","currentDate","createElement","textstring","replacements","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getLanguage, vibrate } from 'chayns-api';\n\nimport { Container, Time } from './Timer.styles';\nimport {\n    differenceInHours,\n    differenceInMinutes,\n    getTimeTillNow,\n    intervalToDuration,\n} from '../../utils/date';\nimport textStrings from '../../constants/textStrings';\nimport { Textstring, ttsToITextString } from '@chayns-components/textstring';\n\nexport type TimerProps = {\n    color: string;\n    devalueTime: Date;\n    textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n    const { active: language } = getLanguage();\n\n    const refDate = useRef(new Date());\n    const [distance, setDistance] = useState(\n        intervalToDuration({\n            start: devalueTime,\n            end: new Date(),\n        }),\n    );\n    const minutesShowValue = useMemo(\n        () => Math.max(distance.minutes ?? 0, 0).toString(),\n        [distance.minutes],\n    );\n    const secondsShowValue = useMemo(\n        () => Math.max(distance.seconds ?? 0, 0).toString(),\n        [distance.seconds],\n    );\n\n    useEffect(() => {\n        refDate.current = new Date();\n        const interval = setInterval(() => {\n            refDate.current = new Date();\n            setDistance(\n                intervalToDuration({\n                    start: devalueTime,\n                    end: refDate.current,\n                }),\n            );\n        }, 500);\n        return () => clearInterval(interval);\n    }, [devalueTime]);\n\n    const handlePointerDownCapture = useCallback(() => {\n        void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n    }, []);\n\n    const label = useMemo(() => {\n        let text: { stringName: string; fallback: string } = textStrings.components.timer.devalued;\n        if (differenceInHours(refDate.current, devalueTime) > 0) {\n            text = textStrings.components.timer.future;\n        } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n            text = textStrings.components.timer.devaluedWithMinutes;\n        }\n\n        const formatTime = (date: Date, formatString: string): string => {\n            const hours = date.getHours().toString().padStart(2, '0');\n            const minutes = date.getMinutes().toString().padStart(2, '0');\n\n            if (formatString === 'HH:mm') {\n                return `${hours}:${minutes}`;\n            }\n            return '';\n        };\n\n        const distanceLabel = getTimeTillNow({\n            date: new Date(),\n            currentDate: devalueTime,\n            language,\n        });\n\n        return (\n            <Textstring\n                textstring={ttsToITextString(text)}\n                replacements={{\n                    '##MINUTES##': minutesShowValue,\n                    '##SECONDS##': secondsShowValue,\n                    '##TIME##': formatTime(devalueTime, 'HH:mm'),\n                    '##DISTANCE##': distanceLabel,\n                }}\n            />\n        );\n    }, [devalueTime, minutesShowValue, secondsShowValue, language]);\n\n    return (\n        <Container\n            $baseFontSize={17}\n            $borderSize={2}\n            $height={50}\n            $color={color}\n            $textColor={textColor}\n            $backgroundColor={color}\n            onPointerDownCapture={handlePointerDownCapture}\n        >\n            <Time>{label}</Time>\n        </Container>\n    );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/constants/textStrings.js

@@ -0,0 +1,25 @@
+export default {
+  components: {
+    slider: {
+      tracktext: {
+        stringName: 'txt_chayns_components_devalue_slider_components_slider_tracktext',
+        fallback: 'EINLÖSEN'
+      }
+    },
+    timer: {
+      devalued: {
+        stringName: 'txt_chayns_components_devalue_slider_components_timer_devalued',
+        fallback: 'Vor ##SECONDS## Sek. (##TIME## Uhr)'
+      },
+      devaluedWithMinutes: {
+        stringName: 'txt_chayns_components_devalue_slider_components_timer_devaluedWithMinutes',
+        fallback: 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)'
+      },
+      future: {
+        stringName: 'txt_chayns_components_devalue_slider_components_timer_future',
+        fallback: '##DISTANCE## (##TIME## Uhr)'
+      }
+    }
+  }
+};
+//# sourceMappingURL=textStrings.js.map

package/lib/esm/constants/textStrings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textStrings.js","names":["components","slider","tracktext","stringName","fallback","timer","devalued","devaluedWithMinutes","future"],"sources":["../../../src/constants/textStrings.ts"],"sourcesContent":["export default {\n    components: {\n        slider: {\n            tracktext: {\n                stringName: 'txt_chayns_components_devalue_slider_components_slider_tracktext',\n                fallback: 'EINLÖSEN',\n            },\n        },\n        timer: {\n            devalued: {\n                stringName: 'txt_chayns_components_devalue_slider_components_timer_devalued',\n                fallback: 'Vor ##SECONDS## Sek. (##TIME## Uhr)',\n            },\n            devaluedWithMinutes: {\n                stringName:\n                    'txt_chayns_components_devalue_slider_components_timer_devaluedWithMinutes',\n                fallback: 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)',\n            },\n            future: {\n                stringName: 'txt_chayns_components_devalue_slider_components_timer_future',\n                fallback: '##DISTANCE## (##TIME## Uhr)',\n            },\n        },\n    },\n} as const;\n"],"mappings":"AAAA,eAAe;EACXA,UAAU,EAAE;IACRC,MAAM,EAAE;MACJC,SAAS,EAAE;QACPC,UAAU,EAAE,kEAAkE;QAC9EC,QAAQ,EAAE;MACd;IACJ,CAAC;IACDC,KAAK,EAAE;MACHC,QAAQ,EAAE;QACNH,UAAU,EAAE,gEAAgE;QAC5EC,QAAQ,EAAE;MACd,CAAC;MACDG,mBAAmB,EAAE;QACjBJ,UAAU,EACN,2EAA2E;QAC/EC,QAAQ,EAAE;MACd,CAAC;MACDI,MAAM,EAAE;QACJL,UAAU,EAAE,8DAA8D;QAC1EC,QAAQ,EAAE;MACd;IACJ;EACJ;AACJ,CAAC","ignoreList":[]}

package/lib/types/constants/textStrings.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    readonly components: {
+        readonly slider: {
+            readonly tracktext: {
+                readonly stringName: "txt_chayns_components_devalue_slider_components_slider_tracktext";
+                readonly fallback: "EINLÖSEN";
+            };
+        };
+        readonly timer: {
+            readonly devalued: {
+                readonly stringName: "txt_chayns_components_devalue_slider_components_timer_devalued";
+                readonly fallback: "Vor ##SECONDS## Sek. (##TIME## Uhr)";
+            };
+            readonly devaluedWithMinutes: {
+                readonly stringName: "txt_chayns_components_devalue_slider_components_timer_devaluedWithMinutes";
+                readonly fallback: "Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)";
+            };
+            readonly future: {
+                readonly stringName: "txt_chayns_components_devalue_slider_components_timer_future";
+                readonly fallback: "##DISTANCE## (##TIME## Uhr)";
+            };
+        };
+    };
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/devalue-slider",
-    "version": "5.0.59",
+    "version": "5.0.61",
     "description": "A slider to devalue something.",
     "siteEffects": false,
     "browserslist": [
@@ -52,7 +52,8 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.59",
+        "@chayns-components/core": "^5.0.61",
+        "@chayns-components/textstring": "^5.0.61",
         "@react-hook/size": "^2.1.2",
         "react-compiler-runtime": "^1.0.0"
     },
@@ -83,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "f7cf00d037b2431608164c98634c29951a738735"
+    "gitHead": "1c31468fbb8681539a13524f059d7109189b990d"
 }