@chayns-components/core 5.0.0-beta.407 → 5.0.0-beta.408

package/lib/components/filter-buttons/filter-button/FilterButton.styles.js

@@ -36,6 +36,8 @@ const StyledFilterButtonItemLabel = exports.StyledFilterButtonItemLabel = _style
     display: flex;
     gap: 5px;
     align-items: center;
+    position: relative;
+    z-index: 1;
 `;
 const StyledFilterButtonItemLabelText = exports.StyledFilterButtonItemLabelText = _styledComponents.default.p`
     color: ${_ref3 => {

package/lib/components/filter-buttons/filter-button/FilterButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledFilterButtonItem","exports","styled","div","_ref","size","FilterButtonSize","Normal","_ref2","isSelected","css","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref3","theme","text","StyledFilterButtonItemBorder","_ref4","shape","FilterButtonItemShape","Round","_ref5","color","headline","StyledMotionFilterButtonItemBackground","motion","_ref6","_ref7","_ref8"],"sources":["../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { FilterButtonItemShape, FilterButtonSize } from '../types';\n\ntype StyledFilterButtonItemProps = WithTheme<{ size: FilterButtonSize; isSelected: boolean }>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    font-size: ${({ size }) => (size === FilterButtonSize.Normal ? 15 : 12)}px;\n    cursor: pointer;\n    user-select: none;\n    padding: 3px 14px;\n\n    &:hover > div:last-child {\n        ${({ isSelected }) =>\n            !isSelected &&\n            css`\n                opacity: 0.2;\n            `}\n    }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n    display: flex;\n    gap: 5px;\n    align-items: center;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin-top: 2px;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n    shape: FilterButtonItemShape;\n    color: CSSProperties['color'];\n    isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: 0.4;\n    z-index: 0;\n    border-radius: ${({ shape }) => (shape === FilterButtonItemShape.Round ? 100 : 0)}px;\n    ${({ color, theme, isSelected }: StyledFilterButtonItemBorderProps) =>\n        !isSelected &&\n        css`\n            border-width: 1px;\n            border-style: solid;\n            border-color: ${color ?? theme.headline};\n        `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n    shape: FilterButtonItemShape;\n    color: CSSProperties['color'];\n    isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n    motion.div\n)<StyledFilterButtonItemBackgroundProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 0;\n    opacity: ${({ isSelected }) => (isSelected ? 0.4 : 0)};\n    transition: opacity 0.5s ease;\n    border-radius: ${({ shape }) => (shape === FilterButtonItemShape.Round ? 100 : 0)}px;\n    background-color: ${({ color, theme }: StyledFilterButtonItemBackgroundProps) =>\n        color ?? theme.headline};\n`;\n"],"mappings":"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"}
+{"version":3,"file":"FilterButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledFilterButtonItem","exports","styled","div","_ref","size","FilterButtonSize","Normal","_ref2","isSelected","css","StyledFilterButtonItemLabel","StyledFilterButtonItemLabelText","p","_ref3","theme","text","StyledFilterButtonItemBorder","_ref4","shape","FilterButtonItemShape","Round","_ref5","color","headline","StyledMotionFilterButtonItemBackground","motion","_ref6","_ref7","_ref8"],"sources":["../../../../src/components/filter-buttons/filter-button/FilterButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { FilterButtonItemShape, FilterButtonSize } from '../types';\n\ntype StyledFilterButtonItemProps = WithTheme<{ size: FilterButtonSize; isSelected: boolean }>;\n\nexport const StyledFilterButtonItem = styled.div<StyledFilterButtonItemProps>`\n    position: relative;\n    font-size: ${({ size }) => (size === FilterButtonSize.Normal ? 15 : 12)}px;\n    cursor: pointer;\n    user-select: none;\n    padding: 3px 14px;\n\n    &:hover > div:last-child {\n        ${({ isSelected }) =>\n            !isSelected &&\n            css`\n                opacity: 0.2;\n            `}\n    }\n`;\n\nexport const StyledFilterButtonItemLabel = styled.div`\n    display: flex;\n    gap: 5px;\n    align-items: center;\n    position: relative;\n    z-index: 1;\n`;\n\ntype StyledFilterButtonItemLabelTextProps = WithTheme<unknown>;\n\nexport const StyledFilterButtonItemLabelText = styled.p<StyledFilterButtonItemLabelTextProps>`\n    color: ${({ theme }: StyledFilterButtonItemLabelTextProps) => theme.text};\n    margin-top: 2px;\n`;\n\ntype StyledFilterButtonItemBorderProps = WithTheme<{\n    shape: FilterButtonItemShape;\n    color: CSSProperties['color'];\n    isSelected: boolean;\n}>;\n\nexport const StyledFilterButtonItemBorder = styled.div<StyledFilterButtonItemBorderProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    opacity: 0.4;\n    z-index: 0;\n    border-radius: ${({ shape }) => (shape === FilterButtonItemShape.Round ? 100 : 0)}px;\n    ${({ color, theme, isSelected }: StyledFilterButtonItemBorderProps) =>\n        !isSelected &&\n        css`\n            border-width: 1px;\n            border-style: solid;\n            border-color: ${color ?? theme.headline};\n        `};\n`;\n\ntype StyledFilterButtonItemBackgroundProps = WithTheme<{\n    shape: FilterButtonItemShape;\n    color: CSSProperties['color'];\n    isSelected: boolean;\n}>;\n\nexport const StyledMotionFilterButtonItemBackground = styled(\n    motion.div\n)<StyledFilterButtonItemBackgroundProps>`\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    z-index: 0;\n    opacity: ${({ isSelected }) => (isSelected ? 0.4 : 0)};\n    transition: opacity 0.5s ease;\n    border-radius: ${({ shape }) => (shape === FilterButtonItemShape.Round ? 100 : 0)}px;\n    background-color: ${({ color, theme }: StyledFilterButtonItemBackgroundProps) =>\n        color ?? theme.headline};\n`;\n"],"mappings":"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"}

package/lib/components/signature/Signature.js

@@ -28,7 +28,6 @@ const Signature = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   (0, _react.useEffect)(() => {
     const loadUserSignature = async () => {
       await (0, _get.getUserSignature)().then(signature => {
-        console.debug('getUserSignature', signature);
         setSignatureUrl(signature);
       });
     };
@@ -45,13 +44,12 @@ const Signature = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         buttonType: 0
       }]
     }).then(async result => {
-      console.debug('Dialog result', result);
       if (result.buttonType === 1 && result.value) {
         await (0, _put.putUserSignature)(result.value).then(success => {
-          console.debug('putUserSignature', success);
           if (success) {
             setSignatureUrl(result.value);
             if (shouldSubscribe) {
+              setHasSubscribed(true);
               if (typeof onSubscribe === 'function') {
                 onSubscribe();
               }
@@ -68,7 +66,6 @@ const Signature = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, [handleCallDialog]);
   const handleDelete = (0, _react.useCallback)(async () => {
     await (0, _delete.deleteUserSignature)().then(success => {
-      console.debug('deleteUserSignature', success);
       if (success) {
         setSignatureUrl(undefined);
         if (typeof onRemove === 'function') {

package/lib/components/signature/Signature.js.map

@@ -1 +1 @@
-{"version":3,"file":"Signature.js","names":["_react","_interopRequireWildcard","require","_Button","_interopRequireDefault","_Signature","_put","_delete","_get","_Icon","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Signature","forwardRef","_ref","ref","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","signatureUrl","setSignatureUrl","useState","undefined","hasSubscribed","setHasSubscribed","useEffect","loadUserSignature","getUserSignature","then","signature","console","debug","handleCallDialog","useCallback","shouldSubscribe","chayns","dialog","buttons","text","buttonType","result","value","putUserSignature","success","handleEdit","handleDelete","deleteUserSignature","handleClick","handleUnSubscribe","useImperativeHandle","edit","delete","createElement","StyledSignature","onClick","StyledSignatureImageWrapper","StyledSignatureImage","src","StyledSignatureDeleteIconWrapper","icons","size","displayName","_default","exports"],"sources":["../../../src/components/signature/Signature.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport Button from '../button/Button';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\nimport { putUserSignature } from '../../api/signature/put';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport Icon from '../icon/Icon';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signature: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: () => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    console.debug('getUserSignature', signature);\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                // ToDo replace with new dialog if ready\n                await chayns.dialog\n                    .signature({\n                        buttons: [\n                            {\n                                text: 'Speichern',\n                                buttonType: 1,\n                            },\n                            {\n                                text: 'Abbrechen',\n                                buttonType: 0,\n                            },\n                        ],\n                    })\n                    .then(async (result) => {\n                        console.debug('Dialog result', result);\n                        if (result.buttonType === 1 && result.value) {\n                            await putUserSignature(result.value).then((success) => {\n                                console.debug('putUserSignature', success);\n                                if (success) {\n                                    setSignatureUrl(result.value);\n\n                                    if (shouldSubscribe) {\n                                        if (typeof onSubscribe === 'function') {\n                                            onSubscribe();\n                                        }\n                                    } else if (typeof onEdit === 'function') {\n                                        onEdit(result.value);\n                                    }\n                                }\n                            });\n                        }\n                    });\n            },\n            [onEdit, onSubscribe]\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                console.debug('deleteUserSignature', success);\n                if (success) {\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe();\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n            setSignatureUrl(undefined);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit]\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    }\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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"}
+{"version":3,"file":"Signature.js","names":["_react","_interopRequireWildcard","require","_Button","_interopRequireDefault","_Signature","_put","_delete","_get","_Icon","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Signature","forwardRef","_ref","ref","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","signatureUrl","setSignatureUrl","useState","undefined","hasSubscribed","setHasSubscribed","useEffect","loadUserSignature","getUserSignature","then","signature","handleCallDialog","useCallback","shouldSubscribe","chayns","dialog","buttons","text","buttonType","result","value","putUserSignature","success","handleEdit","handleDelete","deleteUserSignature","handleClick","handleUnSubscribe","useImperativeHandle","edit","delete","createElement","StyledSignature","onClick","StyledSignatureImageWrapper","StyledSignatureImage","src","StyledSignatureDeleteIconWrapper","icons","size","displayName","_default","exports"],"sources":["../../../src/components/signature/Signature.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport Button from '../button/Button';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\nimport { putUserSignature } from '../../api/signature/put';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport Icon from '../icon/Icon';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signature: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: () => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                // ToDo replace with new dialog if ready\n                await chayns.dialog\n                    .signature({\n                        buttons: [\n                            {\n                                text: 'Speichern',\n                                buttonType: 1,\n                            },\n                            {\n                                text: 'Abbrechen',\n                                buttonType: 0,\n                            },\n                        ],\n                    })\n                    .then(async (result) => {\n                        if (result.buttonType === 1 && result.value) {\n                            await putUserSignature(result.value).then((success) => {\n                                if (success) {\n                                    setSignatureUrl(result.value);\n\n                                    if (shouldSubscribe) {\n                                        setHasSubscribed(true);\n\n                                        if (typeof onSubscribe === 'function') {\n                                            onSubscribe();\n                                        }\n                                    } else if (typeof onEdit === 'function') {\n                                        onEdit(result.value);\n                                    }\n                                }\n                            });\n                        }\n                    });\n            },\n            [onEdit, onSubscribe]\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe();\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n            setSignatureUrl(undefined);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit]\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    }\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAMA,IAAAI,IAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,IAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAL,sBAAA,CAAAF,OAAA;AAAgC,SAAAE,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,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,SAAAb,wBAAAa,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAkChC,MAAMY,SAAS,gBAAG,IAAAC,iBAAU,EACxB,CAAAC,IAAA,EAA2EC,GAAG,KAAK;EAAA,IAAlF;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,aAAa;IAAEC,WAAW;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAAP,IAAA;EACrE,MAAM,CAACQ,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAAqBC,SAAS,CAAC;EAC/E,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAH,eAAQ,EAAC,KAAK,CAAC;EAEzD,IAAAI,gBAAS,EAAC,MAAM;IACZ,MAAMC,iBAAiB,GAAG,MAAAA,CAAA,KAAY;MAClC,MAAM,IAAAC,qBAAgB,EAAC,CAAC,CAACC,IAAI,CAAEC,SAAS,IAAK;QACzCT,eAAe,CAACS,SAAS,CAAC;MAC9B,CAAC,CAAC;IACN,CAAC;IAED,KAAKH,iBAAiB,CAAC,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMI,gBAAgB,GAAG,IAAAC,kBAAW,EAChC,MAAOC,eAAwB,IAAK;IAChC;IACA,MAAMC,MAAM,CAACC,MAAM,CACdL,SAAS,CAAC;MACPM,OAAO,EAAE,CACL;QACIC,IAAI,EAAE,WAAW;QACjBC,UAAU,EAAE;MAChB,CAAC,EACD;QACID,IAAI,EAAE,WAAW;QACjBC,UAAU,EAAE;MAChB,CAAC;IAET,CAAC,CAAC,CACDT,IAAI,CAAC,MAAOU,MAAM,IAAK;MACpB,IAAIA,MAAM,CAACD,UAAU,KAAK,CAAC,IAAIC,MAAM,CAACC,KAAK,EAAE;QACzC,MAAM,IAAAC,qBAAgB,EAACF,MAAM,CAACC,KAAK,CAAC,CAACX,IAAI,CAAEa,OAAO,IAAK;UACnD,IAAIA,OAAO,EAAE;YACTrB,eAAe,CAACkB,MAAM,CAACC,KAAK,CAAC;YAE7B,IAAIP,eAAe,EAAE;cACjBR,gBAAgB,CAAC,IAAI,CAAC;cAEtB,IAAI,OAAOR,WAAW,KAAK,UAAU,EAAE;gBACnCA,WAAW,CAAC,CAAC;cACjB;YACJ,CAAC,MAAM,IAAI,OAAOH,MAAM,KAAK,UAAU,EAAE;cACrCA,MAAM,CAACyB,MAAM,CAACC,KAAK,CAAC;YACxB;UACJ;QACJ,CAAC,CAAC;MACN;IACJ,CAAC,CAAC;EACV,CAAC,EACD,CAAC1B,MAAM,EAAEG,WAAW,CACxB,CAAC;EAED,MAAM0B,UAAU,GAAG,IAAAX,kBAAW,EAAC,MAAM;IACjC,KAAKD,gBAAgB,CAAC,KAAK,CAAC;EAChC,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EAEtB,MAAMa,YAAY,GAAG,IAAAZ,kBAAW,EAAC,YAAY;IACzC,MAAM,IAAAa,2BAAmB,EAAC,CAAC,CAAChB,IAAI,CAAEa,OAAO,IAAK;MAC1C,IAAIA,OAAO,EAAE;QACTrB,eAAe,CAACE,SAAS,CAAC;QAE1B,IAAI,OAAOR,QAAQ,KAAK,UAAU,EAAE;UAChCA,QAAQ,CAAC,CAAC;QACd;MACJ;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAM+B,WAAW,GAAG,IAAAd,kBAAW,EAAC,MAAM;IAClC,IAAIZ,YAAY,EAAE;MACdK,gBAAgB,CAAC,IAAI,CAAC;MAEtB,IAAI,OAAOR,WAAW,KAAK,UAAU,EAAE;QACnCA,WAAW,CAAC,CAAC;MACjB;IACJ,CAAC,MAAM;MACH,KAAKc,gBAAgB,CAAC,IAAI,CAAC;IAC/B;EACJ,CAAC,EAAE,CAACA,gBAAgB,EAAEd,WAAW,EAAEG,YAAY,CAAC,CAAC;EAEjD,MAAM2B,iBAAiB,GAAGA,CAAA,KAAM;IAC5BtB,gBAAgB,CAAC,KAAK,CAAC;IACvBJ,eAAe,CAACE,SAAS,CAAC;IAE1B,IAAI,OAAOP,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAAC,CAAC;IACnB;EACJ,CAAC;EAED,IAAAgC,0BAAmB,EACfnC,GAAG,EACH,OAAO;IACHoC,IAAI,EAAEN,UAAU;IAChBO,MAAM,EAAEN;EACZ,CAAC,CAAC,EACF,CAACA,YAAY,EAAED,UAAU,CAC7B,CAAC;EAED,oBACIjE,MAAA,CAAAY,OAAA,CAAA6D,aAAA,CAACpE,UAAA,CAAAqE,eAAe,QACX,CAAC5B,aAAa,gBACX9C,MAAA,CAAAY,OAAA,CAAA6D,aAAA,CAACtE,OAAA,CAAAS,OAAM;IAAC6B,UAAU,EAAEA,UAAW;IAACkC,OAAO,EAAEP;EAAY,GAChD5B,UACG,CAAC,gBAETxC,MAAA,CAAAY,OAAA,CAAA6D,aAAA,CAACpE,UAAA,CAAAuE,2BAA2B,qBACxB5E,MAAA,CAAAY,OAAA,CAAA6D,aAAA,CAACpE,UAAA,CAAAwE,oBAAoB;IAACC,GAAG,EAAEpC;EAAa,CAAE,CAAC,eAC3C1C,MAAA,CAAAY,OAAA,CAAA6D,aAAA,CAACpE,UAAA,CAAA0E,gCAAgC,qBAC7B/E,MAAA,CAAAY,OAAA,CAAA6D,aAAA,CAAChE,KAAA,CAAAG,OAAI;IAACoE,KAAK,EAAE,CAAC,UAAU,CAAE;IAACC,IAAI,EAAE,EAAG;IAACN,OAAO,EAAEN;EAAkB,CAAE,CACpC,CACT,CAEpB,CAAC;AAE1B,CACJ,CAAC;AAEDrC,SAAS,CAACkD,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxE,OAAA,GAErBoB,SAAS"}

package/lib/components/slider/Slider.d.ts

@@ -1,5 +1,13 @@
 import { FC } from 'react';
+export interface SliderInterval {
+    maxValue: number;
+    minValue: number;
+}
 export type SliderProps = {
+    /**
+     * The range that can be selected with two thumbs..
+     */
+    interval?: SliderInterval;
     /**
      * The maximum value of the slider.
      */
@@ -11,7 +19,19 @@ export type SliderProps = {
     /**
      * Function that will be executed when the value is changed.
      */
-    onChange?: (value: number) => void;
+    onChange?: (value?: number, interval?: SliderInterval) => void;
+    /**
+     * Whether the current value should be displayed inside the slider thumb.
+     */
+    shouldShowThumbLable?: boolean;
+    /**
+     * The steps of the slider.
+     */
+    steps?: number;
+    /**
+     * A function to format the thumb lable.
+     */
+    thumbLableFormatter?: (value: number) => string;
     /**
      * the Value that the slider should have.
      */

package/lib/components/slider/Slider.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Slider = require("./Slider.styles");
+var _slider = require("../../utils/slider");
+var _styledComponents = require("styled-components");
 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 && Object.prototype.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 Slider = _ref => {
@@ -13,9 +15,17 @@ const Slider = _ref => {
     maxValue,
     minValue,
     value,
-    onChange
+    onChange,
+    interval,
+    thumbLableFormatter,
+    shouldShowThumbLable = false,
+    steps = 1
   } = _ref;
-  const [editedValue, setEditedValue] = (0, _react.useState)(0);
+  const [fromValue, setFromValue] = (0, _react.useState)(0);
+  const [toValue, setToValue] = (0, _react.useState)(maxValue);
+  const fromSliderRef = (0, _react.useRef)(null);
+  const toSliderRef = (0, _react.useRef)(null);
+  const theme = (0, _styledComponents.useTheme)();
 
   /**
    * This function sets the value
@@ -25,26 +35,131 @@ const Slider = _ref => {
       return;
     }
     if (value >= minValue && value <= maxValue) {
-      setEditedValue(value);
+      setFromValue(value);
     }
   }, [maxValue, minValue, value]);
+  (0, _react.useEffect)(() => {
+    if (fromValue > toValue) {
+      setFromValue(toValue);
+    }
+    if (toValue < fromValue) {
+      setToValue(fromValue);
+    }
+  }, [fromValue, toValue]);
+  const handleControlFromSlider = (0, _react.useCallback)(event => {
+    if (!fromSliderRef.current || !toSliderRef.current) {
+      return;
+    }
+    setFromValue(Number(event.target.value));
+    const from = Number(fromSliderRef.current.value);
+    const to = Number(toSliderRef.current.value);
+    if (typeof onChange === 'function') {
+      onChange(undefined, {
+        maxValue: to,
+        minValue: from
+      });
+    }
+    (0, _slider.fillSlider)({
+      toSlider: toSliderRef.current,
+      fromSlider: fromSliderRef.current,
+      theme
+    });
+    if (from > to) {
+      fromSliderRef.current.value = String(to);
+    } else {
+      fromSliderRef.current.value = String(from);
+    }
+  }, [onChange, theme]);
+  const handleControlToSlider = (0, _react.useCallback)(event => {
+    if (!fromSliderRef.current || !toSliderRef.current) {
+      return;
+    }
+    setToValue(Number(event.target.value));
+    const from = Number(fromSliderRef.current.value);
+    const to = Number(toSliderRef.current.value);
+    if (typeof onChange === 'function') {
+      onChange(undefined, {
+        maxValue: to,
+        minValue: from
+      });
+    }
+    (0, _slider.fillSlider)({
+      toSlider: toSliderRef.current,
+      fromSlider: fromSliderRef.current,
+      theme
+    });
+    if (from <= to) {
+      toSliderRef.current.value = String(to);
+    } else {
+      toSliderRef.current.value = String(from);
+    }
+  }, [onChange, theme]);
+  (0, _react.useEffect)(() => {
+    if (!fromSliderRef.current || !toSliderRef.current || !interval) {
+      return;
+    }
+    setFromValue(interval.minValue);
+    setToValue(interval.maxValue);
+    fromSliderRef.current.value = String(interval.minValue);
+    toSliderRef.current.value = String(interval.maxValue);
+    (0, _slider.fillSlider)({
+      fromSlider: fromSliderRef.current,
+      toSlider: toSliderRef.current,
+      theme
+    });
+    // Note: interval can´t be in the deps because of rerender
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [theme]);
 
   /**
    * This function updates the value
    */
   const handleInputChange = (0, _react.useCallback)(event => {
-    setEditedValue(Number(event.target.value));
+    const newValue = Number(event.target.value);
+    if (interval) {
+      handleControlFromSlider(event);
+      return;
+    }
+    setFromValue(newValue);
     if (onChange) {
-      onChange(Number(event.target.value));
+      onChange(newValue);
     }
-  }, [onChange]);
+  }, [handleControlFromSlider, interval, onChange]);
+  const fromSliderThumbPosition = (0, _react.useMemo)(() => {
+    if (fromSliderRef.current) {
+      return (fromValue - minValue) / (maxValue - minValue) * (fromSliderRef.current.offsetWidth - 20);
+    }
+    return 0;
+  }, [fromValue, maxValue, minValue]);
+  const toSliderThumbPosition = (0, _react.useMemo)(() => {
+    if (toSliderRef.current) {
+      return (toValue - minValue) / (maxValue - minValue) * (toSliderRef.current.offsetWidth - 20);
+    }
+    return 0;
+  }, [toValue, maxValue, minValue]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Slider.StyledSlider, null, /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
+    ref: fromSliderRef,
+    isInterval: !!interval,
     type: "range",
-    value: editedValue,
+    value: fromValue,
+    step: steps,
     max: maxValue,
     min: minValue,
     onChange: handleInputChange
-  })), [editedValue, handleInputChange, maxValue, minValue]);
+  }), /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
+    position: fromSliderThumbPosition
+  }, shouldShowThumbLable && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLable, null, typeof thumbLableFormatter === 'function' ? thumbLableFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumb, {
+    position: toSliderThumbPosition
+  }, shouldShowThumbLable && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderThumbLable, null, typeof thumbLableFormatter === 'function' ? thumbLableFormatter(toValue) : toValue)), interval && /*#__PURE__*/_react.default.createElement(_Slider.StyledSliderInput, {
+    ref: toSliderRef,
+    isInterval: !!interval,
+    type: "range",
+    value: toValue,
+    step: steps,
+    max: maxValue,
+    min: minValue,
+    onChange: handleControlToSlider
+  })), [steps, fromSliderThumbPosition, fromValue, handleControlToSlider, handleInputChange, interval, maxValue, minValue, shouldShowThumbLable, thumbLableFormatter, toSliderThumbPosition, toValue]);
 };
 Slider.displayName = 'Slider';
 var _default = exports.default = Slider;

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["_react","_interopRequireWildcard","require","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Slider","_ref","maxValue","minValue","value","onChange","editedValue","setEditedValue","useState","useEffect","handleInputChange","useCallback","event","Number","target","useMemo","createElement","StyledSlider","StyledSliderInput","type","max","min","displayName","_default","exports"],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { StyledSlider, StyledSliderInput } from './Slider.styles';\n\nexport type SliderProps = {\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value: number) => void;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({ maxValue, minValue, value, onChange }) => {\n    const [editedValue, setEditedValue] = useState(0);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setEditedValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            if (onChange) {\n                onChange(Number(event.target.value));\n            }\n        },\n        [onChange]\n    );\n\n    return useMemo(\n        () => (\n            <StyledSlider>\n                <StyledSliderInput\n                    type=\"range\"\n                    value={editedValue}\n                    max={maxValue}\n                    min={minValue}\n                    onChange={handleInputChange}\n                />\n            </StyledSlider>\n        ),\n        [editedValue, handleInputChange, maxValue, minValue]\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":["_react","_interopRequireWildcard","require","_Slider","_slider","_styledComponents","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Slider","_ref","maxValue","minValue","value","onChange","interval","thumbLableFormatter","shouldShowThumbLable","steps","fromValue","setFromValue","useState","toValue","setToValue","fromSliderRef","useRef","toSliderRef","theme","useTheme","useEffect","handleControlFromSlider","useCallback","event","current","Number","target","from","to","undefined","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","offsetWidth","toSliderThumbPosition","createElement","StyledSlider","StyledSliderInput","ref","isInterval","type","step","max","min","StyledSliderThumb","position","StyledSliderThumbLable","displayName","_default","exports"],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLable,\n} from './Slider.styles';\nimport { fillSlider } from '../../utils/slider';\nimport { useTheme } from 'styled-components';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLable?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb lable.\n     */\n    thumbLableFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onChange,\n    interval,\n    thumbLableFormatter,\n    shouldShowThumbLable = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n\n    const theme = useTheme();\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme]\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme]\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange]\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current) {\n            return (\n                ((fromValue - minValue) / (maxValue - minValue)) *\n                (fromSliderRef.current.offsetWidth - 20)\n            );\n        }\n        return 0;\n    }, [fromValue, maxValue, minValue]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current) {\n            return (\n                ((toValue - minValue) / (maxValue - minValue)) *\n                (toSliderRef.current.offsetWidth - 20)\n            );\n        }\n        return 0;\n    }, [toValue, maxValue, minValue]);\n\n    return useMemo(\n        () => (\n            <StyledSlider>\n                <StyledSliderInput\n                    ref={fromSliderRef}\n                    isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onChange={handleInputChange}\n                />\n                <StyledSliderThumb position={fromSliderThumbPosition}>\n                    {shouldShowThumbLable && (\n                        <StyledSliderThumbLable>\n                            {typeof thumbLableFormatter === 'function'\n                                ? thumbLableFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLable>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb position={toSliderThumbPosition}>\n                        {shouldShowThumbLable && (\n                            <StyledSliderThumbLable>\n                                {typeof thumbLableFormatter === 'function'\n                                    ? thumbLableFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLable>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        ref={toSliderRef}\n                        isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onChange={handleControlToSlider}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            steps,\n            fromSliderThumbPosition,\n            fromValue,\n            handleControlToSlider,\n            handleInputChange,\n            interval,\n            maxValue,\n            minValue,\n            shouldShowThumbLable,\n            thumbLableFormatter,\n            toSliderThumbPosition,\n            toValue,\n        ]\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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"}

package/lib/components/slider/Slider.styles.d.ts

@@ -5,6 +5,12 @@ type StyledSliderInputProps = WithTheme<{
     min: number;
     max: number;
     value: number;
+    isInterval: boolean;
 }>;
 export declare const StyledSliderInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledSliderInputProps>>;
+type StyledSliderThumbProps = WithTheme<{
+    position: number;
+}>;
+export declare const StyledSliderThumb: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderThumbProps>>;
+export declare const StyledSliderThumbLable: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
 export {};

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

@@ -3,26 +3,48 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSliderInput = exports.StyledSlider = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+exports.StyledSliderThumbLable = exports.StyledSliderThumb = exports.StyledSliderInput = exports.StyledSlider = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 && Object.prototype.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 StyledSlider = exports.StyledSlider = _styledComponents.default.div`
     width: 100%;
+    height: 30px;
     cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
 `;
 const StyledSliderInput = exports.StyledSliderInput = _styledComponents.default.input`
+    position: absolute;
     width: 100%;
     border-radius: 100px;
     -webkit-appearance: none;
     height: 10px;
-    background: ${_ref => {
+    outline: none;
+    //opacity: 0.7;
+    //-webkit-transition: 0.2s;
+    //transition: opacity 0.2s;
+    cursor: pointer !important;
+    z-index: 2;
+    appearance: none;
+    pointer-events: ${_ref => {
   let {
+    isInterval
+  } = _ref;
+  return isInterval ? 'none' : 'all';
+}};
+
+    ${_ref2 => {
+  let {
+    isInterval,
     theme,
     min,
     max,
     value
-  } = _ref;
-  return `linear-gradient(
+  } = _ref2;
+  return !isInterval && (0, _styledComponents.css)`
+            background: ${`linear-gradient(
             to right,
             ${theme['409'] ?? ''} 0%,
             ${theme['409'] ?? ''}
@@ -30,14 +52,9 @@ const StyledSliderInput = exports.StyledSliderInput = _styledComponents.default.
             ${theme['403'] ?? ''}
             ${(value - min) / (max - min) * 100}%,
             ${theme['403'] ?? ''}
-        )`;
-}};
-
-    outline: none;
-    opacity: 0.7;
-    -webkit-transition: 0.2s;
-    transition: opacity 0.2s;
-    cursor: pointer !important;
+        )`};
+        `;
+}}
 
     // Slider thumb for chrome
     &::-webkit-slider-thumb {
@@ -45,30 +62,48 @@ const StyledSliderInput = exports.StyledSliderInput = _styledComponents.default.
         appearance: none;
         width: 20px;
         height: 20px;
-        background-color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme['100'];
-}};
         cursor: pointer;
-        border-radius: 50%;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+        pointer-events: all;
+        position: relative;
     }
 
     // slider thumb for firefox
     &::-moz-range-thumb {
         width: 20px;
         height: 20px;
-        background-color: ${_ref3 => {
+        cursor: pointer;
+        pointer-events: all;
+        position: relative;
+    }
+`;
+const StyledSliderThumb = exports.StyledSliderThumb = _styledComponents.default.div`
+    min-width: 20px;
+    width: fit-content;
+    height: 20px;
+    background-color: ${_ref3 => {
   let {
     theme
   } = _ref3;
   return theme['100'];
 }};
-        cursor: pointer;
-        border-radius: 50%;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
-    }
+    cursor: pointer;
+    border-radius: 100px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    z-index: 3;
+    left: ${_ref4 => {
+  let {
+    position
+  } = _ref4;
+  return position;
+}}px;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+`;
+const StyledSliderThumbLable = exports.StyledSliderThumbLable = _styledComponents.default.span`
+    pointer-events: none;
 `;
 //# sourceMappingURL=Slider.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","input","_ref","theme","min","max","value","_ref2","_ref3"],"sources":["../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    cursor: pointer;\n`;\n\ntype StyledSliderInputProps = WithTheme<{ min: number; max: number; value: number }>;\n\nexport const StyledSliderInput = styled.input<StyledSliderInputProps>`\n    width: 100%;\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    background: ${({ theme, min, max, value }: StyledSliderInputProps) =>\n        `linear-gradient(\n            to right,\n            ${theme['409'] ?? ''} 0%,\n            ${theme['409'] ?? ''}\n            ${((value - min) / (max - min)) * 100}%,\n            ${theme['403'] ?? ''}\n            ${((value - min) / (max - min)) * 100}%,\n            ${theme['403'] ?? ''}\n        )`};\n\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n    cursor: pointer !important;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        background-color: ${({ theme }: StyledSliderInputProps) => theme['100']};\n        cursor: pointer;\n        border-radius: 50%;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        background-color: ${({ theme }: StyledSliderInputProps) => theme['100']};\n        cursor: pointer;\n        border-radius: 50%;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAGhC,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAI;AACvC;AACA;AACA,CAAC;AAIM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAGF,yBAAM,CAACG,KAA8B;AACtE;AACA;AACA;AACA;AACA,kBAAkBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC,GAAG;IAAEC,GAAG;IAAEC;EAA8B,CAAC,GAAAJ,IAAA;EAAA,OAC5D;AACT;AACA,cAAcC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAcA,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,KAAK,GAAGF,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAI;AAClD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,KAAK,GAAGF,GAAG,KAAKC,GAAG,GAAGD,GAAG,CAAC,GAAI,GAAI;AAClD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,UAAU;AAAA,CAAC;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BI,KAAA;EAAA,IAAC;IAAEJ;EAA8B,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BK,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAChF;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"Slider.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSlider","exports","styled","div","StyledSliderInput","input","_ref","isInterval","_ref2","theme","min","max","value","css","StyledSliderThumb","_ref3","_ref4","position","StyledSliderThumbLable","span"],"sources":["../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    min: number;\n    max: number;\n    value: number;\n    isInterval: boolean;\n}>;\n\nexport const StyledSliderInput = styled.input<StyledSliderInputProps>`\n    position: absolute;\n    width: 100%;\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    //opacity: 0.7;\n    //-webkit-transition: 0.2s;\n    //transition: opacity 0.2s;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n    pointer-events: ${({ isInterval }) => (isInterval ? 'none' : 'all')};\n\n    ${({ isInterval, theme, min, max, value }: StyledSliderInputProps) =>\n        !isInterval &&\n        css`\n            background: ${`linear-gradient(\n            to right,\n            ${theme['409'] ?? ''} 0%,\n            ${theme['409'] ?? ''}\n            ${((value - min) / (max - min)) * 100}%,\n            ${theme['403'] ?? ''}\n            ${((value - min) / (max - min)) * 100}%,\n            ${theme['403'] ?? ''}\n        )`};\n        `}\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ position: number }>;\n\nexport const StyledSliderThumb = styled.div<StyledSliderThumbProps>`\n    min-width: 20px;\n    width: fit-content;\n    height: 20px;\n    background-color: ${({ theme }: StyledSliderThumbProps) => theme['100']};\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    left: ${({ position }) => position}px;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n`;\n\nexport const StyledSliderThumbLable = styled.span`\n    pointer-events: none;\n`;\n"],"mappings":"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"}

package/lib/utils/slider.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';
+export interface FillSlider {
+    fromSlider: HTMLInputElement;
+    toSlider: HTMLInputElement;
+    theme: Theme;
+}
+export declare const fillSlider: ({ fromSlider, toSlider, theme }: FillSlider) => void;

package/lib/utils/slider.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fillSlider = void 0;
+const fillSlider = _ref => {
+  let {
+    fromSlider,
+    toSlider,
+    theme
+  } = _ref;
+  const rangeDistance = Number(toSlider.max) - Number(toSlider.min);
+  const fromPosition = Number(fromSlider.value) - Number(toSlider.min);
+  const toPosition = Number(toSlider.value) - Number(toSlider.min);
+  const backgroundColor = theme['403'];
+  const trackColor = theme['409'];
+  if (!backgroundColor || !trackColor) {
+    return;
+  }
+  const gradient = `linear-gradient(
+      to right,
+      ${backgroundColor} 0%,
+      ${backgroundColor} ${fromPosition / rangeDistance * 100}%,
+      ${trackColor} ${fromPosition / rangeDistance * 100}%,
+      ${trackColor} ${toPosition / rangeDistance * 100}%,
+      ${backgroundColor} ${toPosition / rangeDistance * 100}%,
+      ${backgroundColor} 100%)`;
+
+  // Apply the gradient to the appropriate slider
+  toSlider.style.background = gradient;
+  fromSlider.style.background = gradient;
+};
+exports.fillSlider = fillSlider;
+//# sourceMappingURL=slider.js.map

package/lib/utils/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":["fillSlider","_ref","fromSlider","toSlider","theme","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","exports"],"sources":["../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n    fromSlider: HTMLInputElement;\n    toSlider: HTMLInputElement;\n    theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme }: FillSlider) => {\n    const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n    const fromPosition = Number(fromSlider.value) - Number(toSlider.min);\n    const toPosition = Number(toSlider.value) - Number(toSlider.min);\n\n    const backgroundColor = theme['403'];\n    const trackColor = theme['409'];\n\n    if (!backgroundColor || !trackColor) {\n        return;\n    }\n\n    const gradient = `linear-gradient(\n      to right,\n      ${backgroundColor} 0%,\n      ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} 100%)`;\n\n    // Apply the gradient to the appropriate slider\n    toSlider.style.background = gradient;\n    fromSlider.style.background = gradient;\n};\n"],"mappings":";;;;;;AAQO,MAAMA,UAAU,GAAGC,IAAA,IAAiD;EAAA,IAAhD;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;EAAkB,CAAC,GAAAH,IAAA;EAClE,MAAMI,aAAa,GAAGC,MAAM,CAACH,QAAQ,CAACI,GAAG,CAAC,GAAGD,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACjE,MAAMC,YAAY,GAAGH,MAAM,CAACJ,UAAU,CAACQ,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EACpE,MAAMG,UAAU,GAAGL,MAAM,CAACH,QAAQ,CAACO,KAAK,CAAC,GAAGJ,MAAM,CAACH,QAAQ,CAACK,GAAG,CAAC;EAEhE,MAAMI,eAAe,GAAGR,KAAK,CAAC,KAAK,CAAC;EACpC,MAAMS,UAAU,GAAGT,KAAK,CAAC,KAAK,CAAC;EAE/B,IAAI,CAACQ,eAAe,IAAI,CAACC,UAAU,EAAE;IACjC;EACJ;EAEA,MAAMC,QAAQ,GAAI;AACtB;AACA,QAAQF,eAAgB;AACxB,QAAQA,eAAgB,IAAIH,YAAY,GAAGJ,aAAa,GAAI,GAAI;AAChE,QAAQQ,UAAW,IAAIJ,YAAY,GAAGJ,aAAa,GAAI,GAAI;AAC3D,QAAQQ,UAAW,IAAIF,UAAU,GAAGN,aAAa,GAAI,GAAI;AACzD,QAAQO,eAAgB,IAAID,UAAU,GAAGN,aAAa,GAAI,GAAI;AAC9D,QAAQO,eAAgB,QAAO;;EAE3B;EACAT,QAAQ,CAACY,KAAK,CAACC,UAAU,GAAGF,QAAQ;EACpCZ,UAAU,CAACa,KAAK,CAACC,UAAU,GAAGF,QAAQ;AAC1C,CAAC;AAACG,OAAA,CAAAjB,UAAA,GAAAA,UAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.407",
+    "version": "5.0.0-beta.408",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "437356de51e9ddeca34f2d451938dda1150977b9"
+    "gitHead": "a3947cd337d1bd98fafe1d810bfaa1693c7ade57"
 }