@chayns-components/devalue-slider 5.0.0-beta.1000

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","Container","exports","styled","motion","div","Track","$height","$backgroundColor","TrackBackground","Thumb","$size","$trackHeight","TrackText","$baseFontSize","$color","ThumbIconContainer","ThumbIcon","i","attrs","icon","className","createThumbVariants","thumbSize","trackWidth","scaleFactor","base","x","backgroundColor","transition","duration","completed","boxShadow","leaving","scale","THUMB_ICON_VARIANTS","ease","repeat","Infinity","repeatDelay","dragging","opacity"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion, Variant, Variants } from 'framer-motion';\nimport styled from 'styled-components';\n\ninterface IBaseVariant extends Variants {\n    base: Variant;\n}\n\ninterface IDraggingVariant extends Variants {\n    dragging: Variant;\n}\n\ninterface ICompletedVariant extends Variants {\n    completed: Variant;\n}\n\ninterface ILeavingVariant extends Variants {\n    leaving: Variant;\n}\n\nexport const Container = styled(motion.div)``;\n\nexport type TrackProps = {\n    $height: number;\n    $borderSize: number;\n    $backgroundColor: string;\n};\n\nexport const Track = styled(motion.div)<TrackProps>`\n    user-select: none;\n    position: relative;\n    z-index: 3;\n    height: ${({ $height }) => $height}px;\n    border-radius: ${({ $height }) => $height / 2}px;\n    background-color: ${({ $backgroundColor }) => $backgroundColor};\n`;\n\nexport const TrackBackground = styled(motion.div)<{ $height: number }>`\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ${({ $height }) => $height / 2}px;\n    z-index: 2;\n`;\n\nexport const Thumb = styled(motion.div)<{\n    $size: number;\n    $trackHeight: number;\n}>`\n    height: ${({ $size }) => $size}px;\n    width: ${({ $size }) => $size}px;\n    border-radius: 50%;\n    background-color: white;\n    left: ${({ $size, $trackHeight }) => ($trackHeight - $size - 2) / 2}px;\n    bottom: ${({ $size, $trackHeight }) => ($trackHeight - $size - 2) / 2 + 1}px;\n    position: absolute;\n    z-index: 3;\n    box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px 0;\n`;\n\nexport const TrackText = styled(motion.div)<{ $color: string; $baseFontSize: number }>`\n    position: absolute;\n    line-height: 1.15;\n    font-size: ${({ $baseFontSize }) => $baseFontSize}px;\n    font-weight: 700;\n    color: ${({ $color }) => $color};\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    z-index: 1;\n    font-family:\n        Roboto Regular,\n        sans-serif;\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: normal;\n        font-weight: normal;\n        src:\n            local('Roboto Regular'),\n            local('Roboto Regular'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Regular.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: italic;\n        font-weight: normal;\n        src:\n            local('Roboto Regular Italic'),\n            local('Roboto Regular-Italic'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Italic.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: normal;\n        font-weight: bold;\n        src:\n            local('Roboto Regular Bold'),\n            local('Roboto Regular-Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/Bold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Regular';\n        font-style: italic;\n        font-weight: bold;\n        src:\n            local('Roboto Regular Bold Italic'),\n            local('Roboto Regular-BoldItalic'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff2)\n                format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.woff)\n                format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Regular/ItalicBold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: normal;\n        font-weight: normal;\n        src:\n            local('Roboto Bold'),\n            local('Roboto Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Regular.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: italic;\n        font-weight: normal;\n        src:\n            local('Roboto Bold Italic'),\n            local('Roboto Bold-Italic'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Italic.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: normal;\n        font-weight: bold;\n        src:\n            local('Roboto Bold Bold'),\n            local('Roboto Bold-Bold'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.ttf) format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/Bold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n\n    @font-face {\n        font-family: 'Roboto Bold';\n        font-style: italic;\n        font-weight: bold;\n        src:\n            local('Roboto Bold Bold Italic'),\n            local('Roboto Bold-BoldItalic'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff2) format('woff2'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.woff) format('woff'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.ttf)\n                format('truetype'),\n            url(https://api.chayns-static.space/font/Roboto%20Bold/ItalicBold.svg) format('svg');\n        unicode-range: U+0020-00FF, U+20A0-20CF, U+2122, U+2000-206F;\n    }\n`;\n\nexport const ThumbIconContainer = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n`;\n\nexport const ThumbIcon = styled(motion.i).attrs<{ icon: string }>(({ icon }) => ({\n    className: `react-chayns-icon ${icon}`,\n}))`\n    font-size: 22px;\n    z-index: 1;\n    color: black;\n    padding: 5px;\n`;\n\nexport type CreateThumbVariantsArgs = {\n    trackWidth: number;\n    thumbSize: number;\n    scaleFactor: number;\n};\n\nexport const createThumbVariants = ({\n    thumbSize,\n    trackWidth,\n    scaleFactor,\n}: CreateThumbVariantsArgs): IBaseVariant & ICompletedVariant & ILeavingVariant => ({\n    base: {\n        x: 0,\n        backgroundColor: 'white',\n        transition: { duration: 0.2 },\n    },\n    completed: {\n        x: (trackWidth - thumbSize * scaleFactor) / 2,\n        backgroundColor: 'transparent',\n        boxShadow: 'none',\n        transition: { duration: 0.3 },\n    },\n    leaving: {\n        scale: [1, 2.4, 1],\n        boxShadow: 'none',\n    },\n});\n\nexport const THUMB_ICON_VARIANTS: IBaseVariant &\n    IDraggingVariant &\n    ICompletedVariant &\n    ILeavingVariant = {\n    base: {\n        x: [0, 8, 0, 8, 0],\n        transition: {\n            duration: 1,\n            ease: 'easeInOut',\n            repeat: Infinity,\n            repeatDelay: 5,\n        },\n    },\n    dragging: {\n        x: 0,\n    },\n    completed: {\n        opacity: 1,\n        transition: { duration: 0 },\n    },\n    leaving: {\n        opacity: 1,\n        scale: [1, 2.4, 1],\n        transition: { duration: 0.4, ease: 'easeInOut' },\n    },\n};\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAkBhC,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAC,EAAE;AAQtC,MAAMC,KAAK,GAAAJ,OAAA,CAAAI,KAAA,GAAG,IAAAH,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAa;AACnD;AACA;AACA;AACA,cAAc,CAAC;EAAEE;AAAQ,CAAC,KAAKA,OAAO;AACtC,qBAAqB,CAAC;EAAEA;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD,wBAAwB,CAAC;EAAEC;AAAiB,CAAC,KAAKA,gBAAgB;AAClE,CAAC;AAEM,MAAMC,eAAe,GAAAP,OAAA,CAAAO,eAAA,GAAG,IAAAN,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AACtE;AACA;AACA;AACA,qBAAqB,CAAC;EAAEE;AAAQ,CAAC,KAAKA,OAAO,GAAG,CAAC;AACjD;AACA,CAAC;AAEM,MAAMG,KAAK,GAAAR,OAAA,CAAAQ,KAAA,GAAG,IAAAP,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAGpC;AACF,cAAc,CAAC;EAAEM;AAAM,CAAC,KAAKA,KAAK;AAClC,aAAa,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK;AACjC;AACA;AACA,YAAY,CAAC;EAAEA,KAAK;EAAEC;AAAa,CAAC,KAAK,CAACA,YAAY,GAAGD,KAAK,GAAG,CAAC,IAAI,CAAC;AACvE,cAAc,CAAC;EAAEA,KAAK;EAAEC;AAAa,CAAC,KAAK,CAACA,YAAY,GAAGD,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;AAC7E;AACA;AACA;AACA,CAAC;AAEM,MAAME,SAAS,GAAAX,OAAA,CAAAW,SAAA,GAAG,IAAAV,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAA4C;AACtF;AACA;AACA,iBAAiB,CAAC;EAAES;AAAc,CAAC,KAAKA,aAAa;AACrD;AACA,aAAa,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,kBAAkB,GAAAd,OAAA,CAAAc,kBAAA,GAAGb,yBAAM,CAACE,GAAG;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMY,SAAS,GAAAf,OAAA,CAAAe,SAAA,GAAG,IAAAd,yBAAM,EAACC,oBAAM,CAACc,CAAC,CAAC,CAACC,KAAK,CAAmB,CAAC;EAAEC;AAAK,CAAC,MAAM;EAC7EC,SAAS,EAAE,qBAAqBD,IAAI;AACxC,CAAC,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAME,mBAAmB,GAAGA,CAAC;EAChCC,SAAS;EACTC,UAAU;EACVC;AACqB,CAAC,MAA0D;EAChFC,IAAI,EAAE;IACFC,CAAC,EAAE,CAAC;IACJC,eAAe,EAAE,OAAO;IACxBC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAChC,CAAC;EACDC,SAAS,EAAE;IACPJ,CAAC,EAAE,CAACH,UAAU,GAAGD,SAAS,GAAGE,WAAW,IAAI,CAAC;IAC7CG,eAAe,EAAE,aAAa;IAC9BI,SAAS,EAAE,MAAM;IACjBH,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAChC,CAAC;EACDG,OAAO,EAAE;IACLC,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAClBF,SAAS,EAAE;EACf;AACJ,CAAC,CAAC;AAAC9B,OAAA,CAAAoB,mBAAA,GAAAA,mBAAA;AAEI,MAAMa,mBAGM,GAAAjC,OAAA,CAAAiC,mBAAA,GAAG;EAClBT,IAAI,EAAE;IACFC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;IAClBE,UAAU,EAAE;MACRC,QAAQ,EAAE,CAAC;MACXM,IAAI,EAAE,WAAW;MACjBC,MAAM,EAAEC,QAAQ;MAChBC,WAAW,EAAE;IACjB;EACJ,CAAC;EACDC,QAAQ,EAAE;IACNb,CAAC,EAAE;EACP,CAAC;EACDI,SAAS,EAAE;IACPU,OAAO,EAAE,CAAC;IACVZ,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAE;EAC9B,CAAC;EACDG,OAAO,EAAE;IACLQ,OAAO,EAAE,CAAC;IACVP,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAClBL,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEM,IAAI,EAAE;IAAY;EACnD;AACJ,CAAC","ignoreList":[]}

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _chaynsApi = require("chayns-api");
+var _Timer = require("./Timer.styles");
+var _date = require("../../utils/date");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Timer = ({
+  devalueTime,
+  color,
+  textColor = 'white'
+}) => {
+  const {
+    active: language
+  } = (0, _chaynsApi.getLanguage)();
+  const refDate = (0, _react.useRef)(new Date());
+  const [distance, setDistance] = (0, _react.useState)((0, _date.intervalToDuration)({
+    start: devalueTime,
+    end: new Date()
+  }));
+  const minutesShowValue = (0, _react.useMemo)(() => Math.max(distance.minutes ?? 0, 0).toString(), [distance.minutes]);
+  const secondsShowValue = (0, _react.useMemo)(() => Math.max(distance.seconds ?? 0, 0).toString(), [distance.seconds]);
+  (0, _react.useEffect)(() => {
+    refDate.current = new Date();
+    const interval = setInterval(() => {
+      refDate.current = new Date();
+      setDistance((0, _date.intervalToDuration)({
+        start: devalueTime,
+        end: refDate.current
+      }));
+    }, 500);
+    return () => clearInterval(interval);
+  }, [devalueTime]);
+  const handlePointerDownCapture = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.vibrate)({
+      pattern: [50],
+      iOSFeedbackVibration: 7
+    });
+  }, []);
+  const label = (0, _react.useMemo)(() => {
+    let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';
+    if ((0, _date.differenceInHours)(refDate.current, devalueTime) > 0) {
+      const distanceLabel = (0, _date.getTimeTillNow)({
+        date: new Date(),
+        currentDate: devalueTime,
+        language
+      });
+      text = `${distanceLabel} (##TIME## Uhr)`;
+    } else if ((0, _date.differenceInMinutes)(refDate.current, devalueTime) > 0) {
+      text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';
+    }
+    const formatTime = (date, formatString) => {
+      const hours = date.getHours().toString().padStart(2, '0');
+      const minutes = date.getMinutes().toString().padStart(2, '0');
+      if (formatString === 'HH:mm') {
+        return `${hours}:${minutes}`;
+      }
+      return '';
+    };
+    return text.replace('##MINUTES##', minutesShowValue).replace('##SECONDS##', secondsShowValue).replace('##TIME##', formatTime(devalueTime, 'HH:mm'));
+  }, [devalueTime, minutesShowValue, secondsShowValue, language]);
+  return /*#__PURE__*/_react.default.createElement(_Timer.Container, {
+    $baseFontSize: 17,
+    $borderSize: 2,
+    $height: 50,
+    $color: color,
+    $textColor: textColor,
+    $backgroundColor: color,
+    onPointerDownCapture: handlePointerDownCapture
+  }, /*#__PURE__*/_react.default.createElement(_Timer.Time, null, label));
+};
+var _default = exports.default = Timer;
+//# sourceMappingURL=Timer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.js","names":["_react","_interopRequireWildcard","require","_chaynsApi","_Timer","_date","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","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":["\nimport 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 =\n                getTimeTillNow({date: new Date(), currentDate: devalueTime, language});\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":";;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAK0B,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQ1B,MAAMW,KAAoC,GAAGA,CAAC;EAAEC,WAAW;EAAEC,KAAK;EAAEC,SAAS,GAAG;AAAQ,CAAC,KAAK;EAC1F,MAAM;IAACC,MAAM,EAACC;EAAS,CAAC,GAAG,IAAAC,sBAAW,EAAC,CAAC;EAExC,MAAMC,OAAO,GAAG,IAAAC,aAAM,EAAC,IAAIC,IAAI,CAAC,CAAC,CAAC;EAClC,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EACpC,IAAAC,wBAAkB,EAAC;IACfC,KAAK,EAAEb,WAAW;IAClBc,GAAG,EAAE,IAAIN,IAAI,CAAC;EAClB,CAAC,CACL,CAAC;EACD,MAAMO,gBAAgB,GAAG,IAAAC,cAAO,EAC5B,MAAMC,IAAI,CAACC,GAAG,CAACT,QAAQ,CAACU,OAAO,IAAI,CAAC,EAAE,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC,EACnD,CAACX,QAAQ,CAACU,OAAO,CACrB,CAAC;EACD,MAAME,gBAAgB,GAAG,IAAAL,cAAO,EAC5B,MAAMC,IAAI,CAACC,GAAG,CAACT,QAAQ,CAACa,OAAO,IAAI,CAAC,EAAE,CAAC,CAAC,CAACF,QAAQ,CAAC,CAAC,EACnD,CAACX,QAAQ,CAACa,OAAO,CACrB,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACZjB,OAAO,CAACkB,OAAO,GAAG,IAAIhB,IAAI,CAAC,CAAC;IAC5B,MAAMiB,QAAQ,GAAGC,WAAW,CAAC,MAAM;MAC/BpB,OAAO,CAACkB,OAAO,GAAG,IAAIhB,IAAI,CAAC,CAAC;MAC5BE,WAAW,CACP,IAAAE,wBAAkB,EAAC;QACfC,KAAK,EAAEb,WAAW;QAClBc,GAAG,EAAER,OAAO,CAACkB;MACjB,CAAC,CACL,CAAC;IACL,CAAC,EAAE,GAAG,CAAC;IACP,OAAO,MAAMG,aAAa,CAACF,QAAQ,CAAC;EACxC,CAAC,EAAE,CAACzB,WAAW,CAAC,CAAC;EAEjB,MAAM4B,wBAAwB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC/C,KAAK,IAAAC,kBAAO,EAAC;MAAEC,OAAO,EAAE,CAAC,EAAE,CAAC;MAAEC,oBAAoB,EAAE;IAAE,CAAC,CAAC;EAC5D,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,KAAK,GAAG,IAAAjB,cAAO,EAAC,MAAM;IACxB,IAAIkB,IAAI,GAAG,qCAAqC;IAChD,IAAI,IAAAC,uBAAiB,EAAC7B,OAAO,CAACkB,OAAO,EAAExB,WAAW,CAAC,GAAG,CAAC,EAAE;MACrD,MAAMoC,aAAa,GACf,IAAAC,oBAAc,EAAC;QAACC,IAAI,EAAE,IAAI9B,IAAI,CAAC,CAAC;QAAE+B,WAAW,EAAEvC,WAAW;QAAEI;MAAQ,CAAC,CAAC;MAC1E8B,IAAI,GAAG,GAAGE,aAAa,iBAAiB;IAC5C,CAAC,MAAM,IAAI,IAAAI,yBAAmB,EAAClC,OAAO,CAACkB,OAAO,EAAExB,WAAW,CAAC,GAAG,CAAC,EAAE;MAC9DkC,IAAI,GAAG,sDAAsD;IACjE;IAEA,MAAMO,UAAU,GAAGA,CAACH,IAAU,EAAEI,YAAoB,KAAa;MAC7D,MAAMC,KAAK,GAAGL,IAAI,CAACM,QAAQ,CAAC,CAAC,CAACxB,QAAQ,CAAC,CAAC,CAACyB,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;MACzD,MAAM1B,OAAO,GAAGmB,IAAI,CAACQ,UAAU,CAAC,CAAC,CAAC1B,QAAQ,CAAC,CAAC,CAACyB,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;MAE7D,IAAIH,YAAY,KAAK,OAAO,EAAE;QAC1B,OAAO,GAAGC,KAAK,IAAIxB,OAAO,EAAE;MAChC;MACA,OAAO,EAAE;IACb,CAAC;IAED,OAAOe,IAAI,CACNa,OAAO,CAAC,aAAa,EAAEhC,gBAAgB,CAAC,CACxCgC,OAAO,CAAC,aAAa,EAAE1B,gBAAgB,CAAC,CACxC0B,OAAO,CAAC,UAAU,EAAEN,UAAU,CAACzC,WAAW,EAAE,OAAO,CAAC,CAAC;EAC9D,CAAC,EAAE,CAACA,WAAW,EAAEe,gBAAgB,EAAEM,gBAAgB,EAAEjB,QAAQ,CAAC,CAAC;EAE/D,oBACI/B,MAAA,CAAAY,OAAA,CAAA+D,aAAA,CAACvE,MAAA,CAAAwE,SAAS;IACNC,aAAa,EAAE,EAAG;IAClBC,WAAW,EAAE,CAAE;IACfC,OAAO,EAAE,EAAG;IACZC,MAAM,EAAEpD,KAAM;IACdqD,UAAU,EAAEpD,SAAU;IACtBqD,gBAAgB,EAAEtD,KAAM;IACxBuD,oBAAoB,EAAE5B;EAAyB,gBAE/CvD,MAAA,CAAAY,OAAA,CAAA+D,aAAA,CAACvE,MAAA,CAAAgF,IAAI,QAAExB,KAAY,CACZ,CAAC;AAEpB,CAAC;AAAC,IAAAyB,QAAA,GAAAC,OAAA,CAAA1E,OAAA,GAEac,KAAK","ignoreList":[]}

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Time = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Slider = require("../slider/Slider.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Container = exports.Container = (0, _styledComponents.default)(_Slider.Track)`
+    height: ${({
+  $height
+}) => $height}px !important;
+    background-color: ${({
+  $color
+}) => $color};
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: white;
+    container-type: inline-size;
+`;
+const Time = exports.Time = _styledComponents.default.div`
+    font-size: 6cqw;
+    font-weight: 700;
+    color: white;
+`;
+//# sourceMappingURL=Timer.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.styles.js","names":["_styledComponents","_interopRequireDefault","require","_Slider","e","__esModule","default","Container","exports","styled","Track","$height","$color","Time","div"],"sources":["../../../../src/components/timer/Timer.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Track } from '../slider/Slider.styles';\n\nexport const Container = styled(Track)<{\n    $color: string;\n    $textColor: string;\n    $baseFontSize: number;\n}>`\n    height: ${({ $height }) => $height}px !important;\n    background-color: ${({ $color }) => $color};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: white;\n    container-type: inline-size;\n`;\n\nexport const Time = styled.div`\n    font-size: 6cqw;\n    font-weight: 700;\n    color: white;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAAgD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEzC,MAAMG,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAAE,yBAAM,EAACC,aAAK,CAInC;AACF,cAAc,CAAC;EAAEC;AAAQ,CAAC,KAAKA,OAAO;AACtC,wBAAwB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,IAAI,GAAAL,OAAA,CAAAK,IAAA,GAAGJ,yBAAM,CAACK,GAAG;AAC9B;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/hooks/design.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThumbIcon = void 0;
+var _framerMotion = require("framer-motion");
+var _react = require("react");
+const useThumbIcon = (x, iconColor) => {
+  const [icon, setIcon] = (0, _react.useState)('fas fa-arrow-right');
+  const opacity = (0, _framerMotion.useTransform)(x, [0, 5, 6, 200], [1, 0, 0, 1]);
+  const styles = (0, _react.useMemo)(() => ({
+    opacity,
+    color: iconColor
+  }), [iconColor, opacity]);
+  (0, _react.useEffect)(() => x.on('change', value => {
+    if (value > 5) {
+      setIcon('fas fa-check');
+    } else {
+      setIcon('fas fa-arrow-right');
+    }
+  }), [x]);
+  return (0, _react.useMemo)(() => ({
+    icon,
+    styles
+  }), [icon, styles]);
+};
+exports.useThumbIcon = useThumbIcon;
+//# sourceMappingURL=design.js.map

package/lib/cjs/hooks/design.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design.js","names":["_framerMotion","require","_react","useThumbIcon","x","iconColor","icon","setIcon","useState","opacity","useTransform","styles","useMemo","color","useEffect","on","value","exports"],"sources":["../../../src/hooks/design.ts"],"sourcesContent":["import { MotionStyle, MotionValue, useTransform } from 'framer-motion';\nimport { useEffect, useMemo, useState } from 'react';\n\nexport type UseThumbIconRes = {\n    icon: string;\n    styles: MotionStyle;\n};\nexport const useThumbIcon = (x: MotionValue<number>, iconColor: string): UseThumbIconRes => {\n    const [icon, setIcon] = useState('fas fa-arrow-right');\n    const opacity = useTransform(x, [0, 5, 6, 200], [1, 0, 0, 1]);\n    const styles = useMemo<MotionStyle>(\n        () => ({\n            opacity,\n            color: iconColor,\n        }),\n        [iconColor, opacity],\n    );\n\n    useEffect(\n        () =>\n            x.on('change', (value) => {\n                if (value > 5) {\n                    setIcon('fas fa-check');\n                } else {\n                    setIcon('fas fa-arrow-right');\n                }\n            }),\n        [x],\n    );\n\n    return useMemo(() => ({ icon, styles }), [icon, styles]);\n};\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAMO,MAAME,YAAY,GAAGA,CAACC,CAAsB,EAAEC,SAAiB,KAAsB;EACxF,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAC,oBAAoB,CAAC;EACtD,MAAMC,OAAO,GAAG,IAAAC,0BAAY,EAACN,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;EAC7D,MAAMO,MAAM,GAAG,IAAAC,cAAO,EAClB,OAAO;IACHH,OAAO;IACPI,KAAK,EAAER;EACX,CAAC,CAAC,EACF,CAACA,SAAS,EAAEI,OAAO,CACvB,CAAC;EAED,IAAAK,gBAAS,EACL,MACIV,CAAC,CAACW,EAAE,CAAC,QAAQ,EAAGC,KAAK,IAAK;IACtB,IAAIA,KAAK,GAAG,CAAC,EAAE;MACXT,OAAO,CAAC,cAAc,CAAC;IAC3B,CAAC,MAAM;MACHA,OAAO,CAAC,oBAAoB,CAAC;IACjC;EACJ,CAAC,CAAC,EACN,CAACH,CAAC,CACN,CAAC;EAED,OAAO,IAAAQ,cAAO,EAAC,OAAO;IAAEN,IAAI;IAAEK;EAAO,CAAC,CAAC,EAAE,CAACL,IAAI,EAAEK,MAAM,CAAC,CAAC;AAC5D,CAAC;AAACM,OAAA,CAAAd,YAAA,GAAAA,YAAA","ignoreList":[]}

package/lib/cjs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DevalueSlider", {
+  enumerable: true,
+  get: function () {
+    return _DevalueSlider.default;
+  }
+});
+var _DevalueSlider = _interopRequireDefault(require("./components/DevalueSlider"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_DevalueSlider","_interopRequireDefault","require","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["export {\n    default as DevalueSlider,\n    type DevalueSliderOnChangeHandler,\n    type DevalueSliderOnCompleteHandler,\n    type DevalueSliderOnDevalueHandler,\n    type DevalueSliderOnDevalueHandlerResult,\n    type DevalueSliderProps,\n} from './components/DevalueSlider';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA;AAOoC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/cjs/utils/common.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sleep = void 0;
+const sleep = ms => new Promise(resolve => {
+  setTimeout(resolve, ms);
+});
+exports.sleep = sleep;
+//# sourceMappingURL=common.js.map

package/lib/cjs/utils/common.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.js","names":["sleep","ms","Promise","resolve","setTimeout","exports"],"sources":["../../../src/utils/common.ts"],"sourcesContent":["export const sleep = (ms: number) =>\n    new Promise((resolve) => {\n        setTimeout(resolve, ms);\n    });\n"],"mappings":";;;;;;AAAO,MAAMA,KAAK,GAAIC,EAAU,IAC5B,IAAIC,OAAO,CAAEC,OAAO,IAAK;EACrBC,UAAU,CAACD,OAAO,EAAEF,EAAE,CAAC;AAC3B,CAAC,CAAC;AAACI,OAAA,CAAAL,KAAA,GAAAA,KAAA","ignoreList":[]}

package/lib/cjs/utils/date.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subHours = exports.intervalToDuration = exports.getTimeTillNow = exports.differenceInMinutes = exports.differenceInHours = exports.addSeconds = void 0;
+var _chaynsApi = require("chayns-api");
+const addSeconds = (date, seconds) => {
+  const result = new Date(date);
+  result.setSeconds(date.getSeconds() + seconds);
+  return result;
+};
+exports.addSeconds = addSeconds;
+const subHours = (date, hours) => {
+  const result = new Date(date);
+  result.setHours(date.getHours() - hours);
+  return result;
+};
+exports.subHours = subHours;
+const differenceInHours = (date1, date2) => {
+  const diffInMilliseconds = date1.getTime() - date2.getTime();
+  return Math.floor(diffInMilliseconds / (1000 * 60 * 60)); // Millisekunden in Stunden umrechnen
+};
+exports.differenceInHours = differenceInHours;
+const getTimeTillNow = ({
+  date,
+  currentDate,
+  language = _chaynsApi.Language.English
+}) => {
+  const diffInSeconds = Math.floor((currentDate.getTime() - date.getTime()) / 1000);
+  const isPast = diffInSeconds > 0;
+  const units = [{
+    label: 'year',
+    seconds: 31536000
+  }, {
+    label: 'month',
+    seconds: 2592000
+  }, {
+    label: 'day',
+    seconds: 86400
+  }, {
+    label: 'hour',
+    seconds: 3600
+  }, {
+    label: 'minute',
+    seconds: 60
+  }, {
+    label: 'second',
+    seconds: 1
+  }];
+  const absDiff = Math.abs(diffInSeconds);
+  const {
+    label,
+    seconds
+  } = units.find(u => absDiff >= u.seconds) || {
+    label: 'second',
+    seconds: 1
+  };
+  const count = Math.floor(absDiff / seconds);
+  const formatter = new Intl.RelativeTimeFormat(language, {
+    numeric: 'auto'
+  });
+  return formatter.format(isPast ? -count : count, label);
+};
+exports.getTimeTillNow = getTimeTillNow;
+const intervalToDuration = interval => {
+  const startTime = interval.start.getTime();
+  const endTime = interval.end.getTime();
+  const diffInMilliseconds = endTime - startTime;
+  const years = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));
+  const months = Math.floor(diffInMilliseconds % (1000 * 60 * 60 * 24 * 365.25) / (1000 * 60 * 60 * 24 * 30));
+  const days = Math.floor(diffInMilliseconds % (1000 * 60 * 60 * 24 * 30) / (1000 * 60 * 60 * 24));
+  const hours = Math.floor(diffInMilliseconds % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
+  const minutes = Math.floor(diffInMilliseconds % (1000 * 60 * 60) / (1000 * 60));
+  const seconds = Math.floor(diffInMilliseconds % (1000 * 60) / 1000);
+  return {
+    years,
+    months,
+    days,
+    hours,
+    minutes,
+    seconds
+  };
+};
+exports.intervalToDuration = intervalToDuration;
+const differenceInMinutes = (date1, date2) => {
+  const diffInMilliseconds = date1.getTime() - date2.getTime();
+  return Math.floor(diffInMilliseconds / (1000 * 60)); // Millisekunden in Minuten umrechnen
+};
+exports.differenceInMinutes = differenceInMinutes;
+//# sourceMappingURL=date.js.map

package/lib/cjs/utils/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","names":["_chaynsApi","require","addSeconds","date","seconds","result","Date","setSeconds","getSeconds","exports","subHours","hours","setHours","getHours","differenceInHours","date1","date2","diffInMilliseconds","getTime","Math","floor","getTimeTillNow","currentDate","language","Language","English","diffInSeconds","isPast","units","label","absDiff","abs","find","u","count","formatter","Intl","RelativeTimeFormat","numeric","format","intervalToDuration","interval","startTime","start","endTime","end","years","months","days","minutes","differenceInMinutes"],"sources":["../../../src/utils/date.ts"],"sourcesContent":["import {Language} from \"chayns-api\";\n\nexport const addSeconds = (date: Date, seconds: number): Date => {\n    const result = new Date(date);\n    result.setSeconds(date.getSeconds() + seconds);\n    return result;\n};\n\nexport const subHours = (date: Date, hours: number): Date => {\n    const result = new Date(date);\n    result.setHours(date.getHours() - hours);\n    return result;\n};\n\nexport const differenceInHours = (date1: Date, date2: Date): number => {\n    const diffInMilliseconds = date1.getTime() - date2.getTime();\n    return Math.floor(diffInMilliseconds / (1000 * 60 * 60)); // Millisekunden in Stunden umrechnen\n};\n\ninterface GetTimeTillNow {\n    date: Date;\n    currentDate: Date;\n    language: Language;\n}\n\ntype RelativeTimeUnit = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';\n\nexport const getTimeTillNow = ({\n                                   date,\n                                   currentDate,\n                                   language = Language.English,\n                               }: GetTimeTillNow): string => {\n    const diffInSeconds = Math.floor((currentDate.getTime() - date.getTime()) / 1000);\n    const isPast = diffInSeconds > 0;\n\n    const units: { label: RelativeTimeUnit; seconds: number }[] = [\n        {label: 'year', seconds: 31536000},\n        {label: 'month', seconds: 2592000},\n        {label: 'day', seconds: 86400},\n        {label: 'hour', seconds: 3600},\n        {label: 'minute', seconds: 60},\n        {label: 'second', seconds: 1},\n    ];\n\n    const absDiff = Math.abs(diffInSeconds);\n    const {label, seconds} = units.find((u) => absDiff >= u.seconds) || {\n        label: 'second',\n        seconds: 1,\n    };\n    const count = Math.floor(absDiff / seconds);\n\n    const formatter = new Intl.RelativeTimeFormat(language, {numeric: 'auto'});\n\n    return formatter.format(isPast ? -count : count, label);\n};\n\nexport const intervalToDuration = (interval: { start: Date, end: Date }): { years: number, months: number, days: number, hours: number, minutes: number, seconds: number } => {\n    const startTime = interval.start.getTime();\n    const endTime = interval.end.getTime();\n    const diffInMilliseconds = endTime - startTime;\n\n    const years = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24 * 365.25));\n    const months = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24 * 365.25)) / (1000 * 60 * 60 * 24 * 30));\n    const days = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24 * 30)) / (1000 * 60 * 60 * 24));\n    const hours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\n    const minutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));\n    const seconds = Math.floor((diffInMilliseconds % (1000 * 60)) / 1000);\n\n    return { years, months, days, hours, minutes, seconds };\n};\n\nexport const differenceInMinutes = (date1: Date, date2: Date): number => {\n    const diffInMilliseconds = date1.getTime() - date2.getTime();\n    return Math.floor(diffInMilliseconds / (1000 * 60)); // Millisekunden in Minuten umrechnen\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/DevalueSlider.js

@@ -0,0 +1,48 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Slider from './slider/Slider';
+import Timer from './timer/Timer';
+const DevalueSlider = _ref => {
+  let {
+    backgroundColor = 'red',
+    devalueBackgroundColor = 'green',
+    devalueTime,
+    isDisabled,
+    label = 'EINLÖSEN',
+    onDevalue,
+    onChange,
+    onComplete
+  } = _ref;
+  const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);
+  const sliderRef = useRef(null);
+  useEffect(() => {
+    setTimerDevalueTime(devalueTime);
+  }, [devalueTime]);
+  const handleCompleted = useCallback(() => {
+    setTimerDevalueTime(new Date());
+    onComplete?.();
+  }, [onComplete]);
+  useEffect(() => {
+    if (isDisabled) {
+      sliderRef.current?.disable();
+      return;
+    }
+    sliderRef.current?.enable();
+  }, [isDisabled]);
+  if (timerDevalueTime) {
+    return /*#__PURE__*/React.createElement(Timer, {
+      color: devalueBackgroundColor,
+      devalueTime: timerDevalueTime
+    });
+  }
+  return /*#__PURE__*/React.createElement(Slider, {
+    ref: sliderRef,
+    onDevalue: onDevalue,
+    color: backgroundColor,
+    devalueColor: devalueBackgroundColor,
+    onComplete: handleCompleted,
+    onChange: onChange,
+    trackText: label
+  });
+};
+export default DevalueSlider;
+//# sourceMappingURL=DevalueSlider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevalueSlider.js","names":["React","useCallback","useEffect","useRef","useState","Slider","Timer","DevalueSlider","_ref","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,GAAGC,IAAA,IAS9C;EAAA,IAT+C;IACjDC,eAAe,GAAG,KAAK;IACvBC,sBAAsB,GAAG,OAAO;IAChCC,WAAW;IACXC,UAAU;IACVC,KAAK,GAAG,UAAU;IAClBC,SAAS;IACTC,QAAQ;IACRC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,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,oBAAOjB,KAAA,CAAAyB,aAAA,CAACnB,KAAK;MAACoB,KAAK,EAAEhB,sBAAuB;MAACC,WAAW,EAAEM;IAAiB,CAAE,CAAC;EAClF;EAEA,oBACIjB,KAAA,CAAAyB,aAAA,CAACpB,MAAM;IACHsB,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,eAAeN,aAAa","ignoreList":[]}

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

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