@chayns-components/core 5.0.0-beta.8 → 5.0.0-beta.800

package/lib/esm/components/slider-button/SliderButton.js

@@ -0,0 +1,276 @@
+import { setRefreshScrollEnabled } from 'chayns-api';
+import { AnimatePresence, useAnimate } from 'framer-motion';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTheme } from 'styled-components';
+import { useElementSize } from '../../hooks/useElementSize';
+import { calculateBiggestWidth } from '../../utils/calculate';
+import { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';
+import { StyledMotionSliderButtonThumb, StyledSliderButton, StyledSliderButtonButtonsWrapper, StyledSliderButtonItem, StyledSliderButtonWrapper } from './SliderButton.styles';
+const SliderButton = _ref => {
+  let {
+    selectedButtonId,
+    isDisabled,
+    items,
+    onChange
+  } = _ref;
+  const [selectedButton, setSelectedButton] = useState(undefined);
+  const [dragRange, setDragRange] = useState({
+    left: 0,
+    right: 0
+  });
+  const sliderButtonRef = useRef(null);
+  const sliderButtonWrapperRef = useRef(null);
+  const timeout = useRef();
+  const preventHandleScroll = useRef(false);
+  const [scope, animate] = useAnimate();
+  const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);
+  const sliderSize = useElementSize(sliderButtonRef);
+  const theme = useTheme();
+  const isSliderBigger = useMemo(() => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length, [itemWidth, items.length, sliderSize]);
+  useEffect(() => {
+    if (sliderSize) {
+      const sliderWidth = itemWidth * (items.length - 1);
+      const count = Math.floor(sliderSize.width / itemWidth);
+      setDragRange({
+        left: 0,
+        right: isSliderBigger ? itemWidth * count : sliderWidth
+      });
+    }
+  }, [isSliderBigger, itemWidth, items.length, sliderSize]);
+  const animation = useCallback(async x => {
+    await animate(scope.current, {
+      x
+    }, {
+      type: 'tween',
+      duration: 0.2
+    });
+  }, [animate, scope]);
+  const setItemPosition = useCallback(index => {
+    if (!isSliderBigger) {
+      void animation(itemWidth * index);
+      return;
+    }
+    const count = dragRange.right / itemWidth;
+    if (items.length - count >= index) {
+      void animation(0);
+    } else {
+      void animation(itemWidth * (count - (items.length - index)));
+    }
+    if (sliderButtonWrapperRef.current) {
+      sliderButtonWrapperRef.current.scrollLeft = itemWidth * index;
+    }
+  }, [animation, dragRange.right, isSliderBigger, itemWidth, items.length]);
+  useEffect(() => {
+    if (selectedButtonId) {
+      setSelectedButton(selectedButtonId);
+      const index = items.findIndex(_ref2 => {
+        let {
+          id
+        } = _ref2;
+        return id === selectedButtonId;
+      });
+      if (index >= 0) {
+        setItemPosition(index);
+      }
+    } else {
+      setSelectedButton(items[0]?.id);
+    }
+  }, [animation, dragRange.right, isSliderBigger, itemWidth, items, selectedButtonId, setItemPosition]);
+  const handleClick = useCallback((id, index) => {
+    if (isDisabled) {
+      return;
+    }
+    setSelectedButton(id);
+    if (typeof onChange === 'function') {
+      onChange(id);
+    }
+    setItemPosition(index);
+  }, [isDisabled, onChange, setItemPosition]);
+  const buttons = useMemo(() => items.map((_ref3, index) => {
+    let {
+      id,
+      text
+    } = _ref3;
+    return /*#__PURE__*/React.createElement(StyledSliderButtonItem, {
+      $width: itemWidth,
+      key: `slider-button-${id}`,
+      onClick: () => handleClick(id, index),
+      $isSelected: id === selectedButton
+    }, text);
+  }), [handleClick, itemWidth, items, selectedButton]);
+  const thumbText = useMemo(() => {
+    const selectedItem = items.find(_ref4 => {
+      let {
+        id
+      } = _ref4;
+      return id === selectedButton;
+    });
+    return selectedItem ? selectedItem.text : items[0]?.text;
+  }, [items, selectedButton]);
+
+  /**
+   * Creates an array with the snap points relative to the width of the items
+   */
+  const snapPoints = useMemo(() => {
+    const points = [0];
+    for (let i = 1; i < items.length; i++) {
+      points.push(itemWidth * i);
+    }
+    return points;
+  }, [itemWidth, items.length]);
+  const handleDragEnd = useCallback(() => {
+    void setRefreshScrollEnabled(true);
+    const position = getThumbPosition({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
+    }
+    const {
+      middle,
+      left
+    } = position;
+    let scrollLeft = 0;
+    if (sliderButtonWrapperRef.current) {
+      scrollLeft = sliderButtonWrapperRef.current.scrollLeft;
+      sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({
+        snapPoints,
+        position: middle,
+        scrollLeft: scrollLeft - left
+      }).nearestPoint;
+    }
+    const {
+      nearestIndex
+    } = getNearestPoint({
+      snapPoints,
+      position: middle,
+      scrollLeft
+    });
+    const {
+      nearestPoint
+    } = getNearestPoint({
+      snapPoints,
+      position: middle,
+      scrollLeft: 0
+    });
+    if (nearestPoint >= 0 && nearestIndex >= 0) {
+      void animation(nearestPoint);
+      const id = items[nearestIndex]?.id;
+      setSelectedButton(id);
+      if (typeof onChange === 'function' && id) {
+        onChange(id);
+      }
+    }
+    preventHandleScroll.current = false;
+  }, [animation, itemWidth, items, onChange, scope, snapPoints]);
+  const handleWhileDrag = useCallback(() => {
+    preventHandleScroll.current = true;
+    void setRefreshScrollEnabled(false);
+    const position = getThumbPosition({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
+    }
+    const {
+      right,
+      left,
+      middle
+    } = position;
+    let scrollLeft = 0;
+    const scrollSpeed = 3;
+    if (sliderButtonWrapperRef.current) {
+      if (right >= dragRange.right) {
+        sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;
+      }
+      if (left <= dragRange.left) {
+        sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;
+      }
+      scrollLeft = sliderButtonWrapperRef.current.scrollLeft;
+    }
+    const {
+      nearestIndex
+    } = getNearestPoint({
+      snapPoints,
+      position: middle,
+      scrollLeft
+    });
+    if (nearestIndex >= 0) {
+      setSelectedButton(items[nearestIndex]?.id);
+    }
+  }, [dragRange, itemWidth, items, scope, snapPoints]);
+
+  // With this, the handleScroll works before the thumb is moved the first time.
+  useEffect(() => {
+    void animation(1);
+    void animation(0);
+  }, [animation]);
+  const handleScroll = useCallback(event => {
+    if (preventHandleScroll.current) {
+      return;
+    }
+    void setRefreshScrollEnabled(false);
+    const position = getThumbPosition({
+      scope,
+      itemWidth
+    });
+    if (!position) {
+      return;
+    }
+    const {
+      middle
+    } = position;
+    const {
+      scrollLeft
+    } = event.target;
+    const {
+      nearestIndex
+    } = getNearestPoint({
+      snapPoints,
+      position: middle,
+      scrollLeft
+    });
+    if (nearestIndex >= 0) {
+      setSelectedButton(items[nearestIndex]?.id);
+    }
+    if (timeout.current) {
+      clearTimeout(timeout.current);
+    }
+    timeout.current = window.setTimeout(() => {
+      handleDragEnd();
+    }, 200);
+  }, [handleDragEnd, itemWidth, items, scope, snapPoints]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledSliderButton, {
+    $isDisabled: isDisabled,
+    ref: sliderButtonRef
+  }, /*#__PURE__*/React.createElement(StyledMotionSliderButtonThumb, {
+    ref: scope,
+    drag: isDisabled ? false : 'x',
+    dragElastic: 0,
+    dragConstraints: isSliderBigger ? {
+      ...dragRange,
+      right: dragRange.right - itemWidth
+    } : {
+      ...dragRange
+    },
+    $width: itemWidth,
+    onDrag: handleWhileDrag,
+    onDragEnd: handleDragEnd,
+    whileTap: isDisabled ? {} : {
+      backgroundColor: theme['407']
+    },
+    whileHover: isDisabled ? {} : {
+      backgroundColor: theme['409']
+    }
+  }, thumbText), /*#__PURE__*/React.createElement(StyledSliderButtonWrapper, {
+    $isDisabled: isDisabled,
+    $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
+    ref: sliderButtonWrapperRef,
+    onScroll: handleScroll
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, /*#__PURE__*/React.createElement(StyledSliderButtonButtonsWrapper, null, buttons)))), [buttons, dragRange, handleDragEnd, handleScroll, handleWhileDrag, isDisabled, isSliderBigger, itemWidth, scope, thumbText]);
+};
+SliderButton.displayName = 'SliderButton';
+export default SliderButton;
+//# sourceMappingURL=SliderButton.js.map

package/lib/esm/components/slider-button/SliderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderButton.js","names":["setRefreshScrollEnabled","AnimatePresence","useAnimate","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","calculateBiggestWidth","getNearestPoint","getThumbPosition","StyledMotionSliderButtonThumb","StyledSliderButton","StyledSliderButtonButtonsWrapper","StyledSliderButtonItem","StyledSliderButtonWrapper","SliderButton","_ref","selectedButtonId","isDisabled","items","onChange","selectedButton","setSelectedButton","undefined","dragRange","setDragRange","left","right","sliderButtonRef","sliderButtonWrapperRef","timeout","preventHandleScroll","scope","animate","itemWidth","sliderSize","theme","isSliderBigger","Math","floor","width","length","sliderWidth","count","animation","x","current","type","duration","setItemPosition","index","scrollLeft","findIndex","_ref2","id","handleClick","buttons","map","_ref3","text","createElement","$width","key","onClick","$isSelected","thumbText","selectedItem","find","_ref4","snapPoints","points","i","push","handleDragEnd","position","middle","nearestPoint","nearestIndex","handleWhileDrag","scrollSpeed","handleScroll","event","target","clearTimeout","window","setTimeout","$isDisabled","ref","drag","dragElastic","dragConstraints","onDrag","onDragEnd","whileTap","backgroundColor","whileHover","onScroll","displayName"],"sources":["../../../../src/components/slider-button/SliderButton.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { AnimatePresence, useAnimate } from 'framer-motion';\nimport React, { FC, UIEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport type { SliderButtonItem } from '../../types/slider-button';\nimport { calculateBiggestWidth } from '../../utils/calculate';\nimport { getNearestPoint, getThumbPosition } from '../../utils/sliderButton';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n    StyledMotionSliderButtonThumb,\n    StyledSliderButton,\n    StyledSliderButtonButtonsWrapper,\n    StyledSliderButtonItem,\n    StyledSliderButtonWrapper,\n} from './SliderButton.styles';\n\nexport type SliderButtonProps = {\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when a button is selected.\n     * @param id\n     */\n    onChange?: (id: string) => void;\n    /**\n     * The buttons that are slidable.\n     */\n    items: SliderButtonItem[];\n    /**\n     * The id of a button that should be selected.\n     */\n    selectedButtonId?: string;\n};\n\nconst SliderButton: FC<SliderButtonProps> = ({ selectedButtonId, isDisabled, items, onChange }) => {\n    const [selectedButton, setSelectedButton] = useState<string | undefined>(undefined);\n    const [dragRange, setDragRange] = useState({ left: 0, right: 0 });\n\n    const sliderButtonRef = useRef<HTMLDivElement>(null);\n    const sliderButtonWrapperRef = useRef<HTMLDivElement>(null);\n    const timeout = useRef<number>();\n    const preventHandleScroll = useRef(false);\n\n    const [scope, animate] = useAnimate();\n\n    const itemWidth = useMemo(() => calculateBiggestWidth(items), [items]);\n\n    const sliderSize = useElementSize(sliderButtonRef);\n\n    const theme: Theme = useTheme();\n\n    const isSliderBigger = useMemo(\n        () => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length,\n        [itemWidth, items.length, sliderSize],\n    );\n\n    useEffect(() => {\n        if (sliderSize) {\n            const sliderWidth = itemWidth * (items.length - 1);\n\n            const count = Math.floor(sliderSize.width / itemWidth);\n\n            setDragRange({ left: 0, right: isSliderBigger ? itemWidth * count : sliderWidth });\n        }\n    }, [isSliderBigger, itemWidth, items.length, sliderSize]);\n\n    const animation = useCallback(\n        async (x: number) => {\n            await animate(\n                scope.current,\n                { x },\n                {\n                    type: 'tween',\n                    duration: 0.2,\n                },\n            );\n        },\n        [animate, scope],\n    );\n\n    const setItemPosition = useCallback(\n        (index: number) => {\n            if (!isSliderBigger) {\n                void animation(itemWidth * index);\n\n                return;\n            }\n\n            const count = dragRange.right / itemWidth;\n\n            if (items.length - count >= index) {\n                void animation(0);\n            } else {\n                void animation(itemWidth * (count - (items.length - index)));\n            }\n\n            if (sliderButtonWrapperRef.current) {\n                sliderButtonWrapperRef.current.scrollLeft = itemWidth * index;\n            }\n        },\n        [animation, dragRange.right, isSliderBigger, itemWidth, items.length],\n    );\n\n    useEffect(() => {\n        if (selectedButtonId) {\n            setSelectedButton(selectedButtonId);\n\n            const index = items.findIndex(({ id }) => id === selectedButtonId);\n\n            if (index >= 0) {\n                setItemPosition(index);\n            }\n        } else {\n            setSelectedButton(items[0]?.id);\n        }\n    }, [\n        animation,\n        dragRange.right,\n        isSliderBigger,\n        itemWidth,\n        items,\n        selectedButtonId,\n        setItemPosition,\n    ]);\n\n    const handleClick = useCallback(\n        (id: string, index: number) => {\n            if (isDisabled) {\n                return;\n            }\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function') {\n                onChange(id);\n            }\n\n            setItemPosition(index);\n        },\n        [isDisabled, onChange, setItemPosition],\n    );\n\n    const buttons = useMemo(\n        () =>\n            items.map(({ id, text }, index) => (\n                <StyledSliderButtonItem\n                    $width={itemWidth}\n                    key={`slider-button-${id}`}\n                    onClick={() => handleClick(id, index)}\n                    $isSelected={id === selectedButton}\n                >\n                    {text}\n                </StyledSliderButtonItem>\n            )),\n        [handleClick, itemWidth, items, selectedButton],\n    );\n\n    const thumbText = useMemo(() => {\n        const selectedItem = items.find(({ id }) => id === selectedButton);\n\n        return selectedItem ? selectedItem.text : items[0]?.text;\n    }, [items, selectedButton]);\n\n    /**\n     * Creates an array with the snap points relative to the width of the items\n     */\n    const snapPoints = useMemo(() => {\n        const points = [0];\n\n        for (let i = 1; i < items.length; i++) {\n            points.push(itemWidth * i);\n        }\n\n        return points;\n    }, [itemWidth, items.length]);\n\n    const handleDragEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { middle, left } = position;\n\n        let scrollLeft = 0;\n\n        if (sliderButtonWrapperRef.current) {\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n\n            sliderButtonWrapperRef.current.scrollLeft = getNearestPoint({\n                snapPoints,\n                position: middle,\n                scrollLeft: scrollLeft - left,\n            }).nearestPoint;\n        }\n\n        const { nearestIndex } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft,\n        });\n\n        const { nearestPoint } = getNearestPoint({\n            snapPoints,\n            position: middle,\n            scrollLeft: 0,\n        });\n\n        if (nearestPoint >= 0 && nearestIndex >= 0) {\n            void animation(nearestPoint);\n\n            const id = items[nearestIndex]?.id;\n\n            setSelectedButton(id);\n\n            if (typeof onChange === 'function' && id) {\n                onChange(id);\n            }\n        }\n\n        preventHandleScroll.current = false;\n    }, [animation, itemWidth, items, onChange, scope, snapPoints]);\n\n    const handleWhileDrag = useCallback(() => {\n        preventHandleScroll.current = true;\n        void setRefreshScrollEnabled(false);\n\n        const position = getThumbPosition({ scope, itemWidth });\n\n        if (!position) {\n            return;\n        }\n\n        const { right, left, middle } = position;\n\n        let scrollLeft = 0;\n\n        const scrollSpeed = 3;\n\n        if (sliderButtonWrapperRef.current) {\n            if (right >= dragRange.right) {\n                sliderButtonWrapperRef.current.scrollLeft += scrollSpeed;\n            }\n\n            if (left <= dragRange.left) {\n                sliderButtonWrapperRef.current.scrollLeft -= scrollSpeed;\n            }\n\n            scrollLeft = sliderButtonWrapperRef.current.scrollLeft;\n        }\n\n        const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n        if (nearestIndex >= 0) {\n            setSelectedButton(items[nearestIndex]?.id);\n        }\n    }, [dragRange, itemWidth, items, scope, snapPoints]);\n\n    // With this, the handleScroll works before the thumb is moved the first time.\n    useEffect(() => {\n        void animation(1);\n        void animation(0);\n    }, [animation]);\n\n    const handleScroll = useCallback(\n        (event: UIEvent<HTMLElement>) => {\n            if (preventHandleScroll.current) {\n                return;\n            }\n\n            void setRefreshScrollEnabled(false);\n\n            const position = getThumbPosition({ scope, itemWidth });\n\n            if (!position) {\n                return;\n            }\n\n            const { middle } = position;\n\n            const { scrollLeft } = event.target as HTMLDivElement;\n\n            const { nearestIndex } = getNearestPoint({ snapPoints, position: middle, scrollLeft });\n\n            if (nearestIndex >= 0) {\n                setSelectedButton(items[nearestIndex]?.id);\n            }\n\n            if (timeout.current) {\n                clearTimeout(timeout.current);\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleDragEnd();\n            }, 200);\n        },\n        [handleDragEnd, itemWidth, items, scope, snapPoints],\n    );\n\n    return useMemo(\n        () => (\n            <StyledSliderButton $isDisabled={isDisabled} ref={sliderButtonRef}>\n                <StyledMotionSliderButtonThumb\n                    ref={scope}\n                    drag={isDisabled ? false : 'x'}\n                    dragElastic={0}\n                    dragConstraints={\n                        isSliderBigger\n                            ? { ...dragRange, right: dragRange.right - itemWidth }\n                            : { ...dragRange }\n                    }\n                    $width={itemWidth}\n                    onDrag={handleWhileDrag}\n                    onDragEnd={handleDragEnd}\n                    whileTap={isDisabled ? {} : { backgroundColor: theme['407'] }}\n                    whileHover={isDisabled ? {} : { backgroundColor: theme['409'] }}\n                >\n                    {thumbText}\n                </StyledMotionSliderButtonThumb>\n                <StyledSliderButtonWrapper\n                    $isDisabled={isDisabled}\n                    $width={!isSliderBigger ? dragRange.right + itemWidth : dragRange.right}\n                    ref={sliderButtonWrapperRef}\n                    onScroll={handleScroll}\n                >\n                    <AnimatePresence>\n                        <StyledSliderButtonButtonsWrapper>\n                            {buttons}\n                        </StyledSliderButtonButtonsWrapper>\n                    </AnimatePresence>\n                </StyledSliderButtonWrapper>\n            </StyledSliderButton>\n        ),\n        [\n            buttons,\n            dragRange,\n            handleDragEnd,\n            handleScroll,\n            handleWhileDrag,\n            isDisabled,\n            isSliderBigger,\n            itemWidth,\n            scope,\n            thumbText,\n        ],\n    );\n};\n\nSliderButton.displayName = 'SliderButton';\n\nexport default SliderButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/slider-button/SliderButton.styles.js

@@ -0,0 +1,111 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledSliderButton = styled.div`
+    opacity: ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return $isDisabled ? 0.5 : 1;
+}};
+    width: 100%;
+    touch-action: none;
+`;
+export const StyledSliderButtonWrapper = styled.div`
+    align-items: center;
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['404'];
+}};
+    border-radius: 3px;
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: inline-flex;
+    line-height: 1.15;
+    height: 32px;
+    position: relative;
+    user-select: none;
+    transition: opacity 0.3s ease;
+    z-index: 1;
+
+    width: ${_ref3 => {
+  let {
+    $width
+  } = _ref3;
+  return $width;
+}}px;
+
+    max-width: 100%;
+    overflow-x: ${_ref4 => {
+  let {
+    $isDisabled
+  } = _ref4;
+  return $isDisabled ? 'hidden' : 'scroll';
+}};
+
+    // Chrome
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    // IE and Edge
+    -ms-overflow-style: none;
+
+    // Firefox
+    scrollbar-width: none;
+`;
+export const StyledSliderButtonItem = styled.div`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    padding: 7px 12px;
+    min-width: ${_ref5 => {
+  let {
+    $width
+  } = _ref5;
+  return $width;
+}}px;
+    max-width: ${_ref6 => {
+  let {
+    $width
+  } = _ref6;
+  return $width;
+}}px;
+    display: flex;
+    justify-content: center;
+    color: white;
+`;
+export const StyledSliderButtonButtonsWrapper = styled.div`
+    position: absolute;
+    display: flex;
+    align-items: center;
+`;
+export const StyledMotionSliderButtonThumb = styled(motion.div)`
+    font-size: 110%;
+    font-family: 'Roboto Medium', serif;
+    background-color: ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme['408'];
+}};
+    width: ${_ref8 => {
+  let {
+    $width
+  } = _ref8;
+  return $width;
+}}px;
+    position: absolute;
+    border-radius: 3px;
+    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
+    z-index: 3;
+    height: 32px;
+    padding: 7px 12px;
+    display: flex;
+    color: white;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+`;
+//# sourceMappingURL=SliderButton.styles.js.map

package/lib/esm/components/slider-button/SliderButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderButton.styles.js","names":["motion","styled","StyledSliderButton","div","_ref","$isDisabled","StyledSliderButtonWrapper","_ref2","theme","_ref3","$width","_ref4","StyledSliderButtonItem","_ref5","_ref6","StyledSliderButtonButtonsWrapper","StyledMotionSliderButtonThumb","_ref7","_ref8"],"sources":["../../../../src/components/slider-button/SliderButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledSliderButtonProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledSliderButton = styled.div<StyledSliderButtonProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    width: 100%;\n    touch-action: none;\n`;\n\ntype StyledSliderButtonWrapperProps = WithTheme<{ $width: number; $isDisabled?: boolean }>;\n\nexport const StyledSliderButtonWrapper = styled.div<StyledSliderButtonWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledSliderButtonProps) => theme['404']};\n    border-radius: 3px;\n    border: none;\n    color: white;\n    cursor: pointer;\n    display: inline-flex;\n    line-height: 1.15;\n    height: 32px;\n    position: relative;\n    user-select: none;\n    transition: opacity 0.3s ease;\n    z-index: 1;\n\n    width: ${({ $width }) => $width}px;\n\n    max-width: 100%;\n    overflow-x: ${({ $isDisabled }) => ($isDisabled ? 'hidden' : 'scroll')};\n\n    // Chrome\n    &::-webkit-scrollbar {\n        display: none;\n    }\n\n    // IE and Edge\n    -ms-overflow-style: none;\n\n    // Firefox\n    scrollbar-width: none;\n`;\n\ntype StyledSliderButtonItemProps = WithTheme<{ $isSelected: boolean; $width: number }>;\n\nexport const StyledSliderButtonItem = styled.div<StyledSliderButtonItemProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    padding: 7px 12px;\n    min-width: ${({ $width }) => $width}px;\n    max-width: ${({ $width }) => $width}px;\n    display: flex;\n    justify-content: center;\n    color: white;\n`;\n\nexport const StyledSliderButtonButtonsWrapper = styled.div`\n    position: absolute;\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledMotionSliderButtonThumbProps = WithTheme<{ $width: number }>;\n\nexport const StyledMotionSliderButtonThumb = styled(motion.div)<StyledMotionSliderButtonThumbProps>`\n    font-size: 110%;\n    font-family: 'Roboto Medium', serif;\n    background-color: ${({ theme }: StyledMotionSliderButtonThumbProps) => theme['408']};\n    width: ${({ $width }) => $width}px;\n    position: absolute;\n    border-radius: 3px;\n    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n    z-index: 3;\n    height: 32px;\n    padding: 7px 12px;\n    display: flex;\n    color: white;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAA4B;AACrE,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGL,MAAM,CAACE,GAAmC;AACnF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AACnC;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEN;EAAY,CAAC,GAAAM,KAAA;EAAA,OAAMN,WAAW,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMO,sBAAsB,GAAGX,MAAM,CAACE,GAAgC;AAC7E;AACA;AACA;AACA,iBAAiBU,KAAA;EAAA,IAAC;IAAEH;EAAO,CAAC,GAAAG,KAAA;EAAA,OAAKH,MAAM;AAAA;AACvC,iBAAiBI,KAAA;EAAA,IAAC;IAAEJ;EAAO,CAAC,GAAAI,KAAA;EAAA,OAAKJ,MAAM;AAAA;AACvC;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMK,gCAAgC,GAAGd,MAAM,CAACE,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMa,6BAA6B,GAAGf,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqC;AACnG;AACA;AACA,wBAAwBc,KAAA;EAAA,IAAC;IAAET;EAA0C,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,KAAK,CAAC;AAAA;AACvF,aAAaU,KAAA;EAAA,IAAC;IAAER;EAAO,CAAC,GAAAQ,KAAA;EAAA,OAAKR,MAAM;AAAA;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/small-wait-cursor/SmallWaitCursor.js

@@ -0,0 +1,36 @@
+// noinspection JSUnusedGlobalSymbols
+
+import React from 'react';
+import { StyledSmallWaitCursor, StyledSmallWaitCursorBackground, StyledSmallWaitCursorWaitCursor } from './SmallWaitCursor.styles';
+export let SmallWaitCursorSize = /*#__PURE__*/function (SmallWaitCursorSize) {
+  SmallWaitCursorSize[SmallWaitCursorSize["Small"] = 16] = "Small";
+  SmallWaitCursorSize[SmallWaitCursorSize["Medium"] = 30] = "Medium";
+  return SmallWaitCursorSize;
+}({});
+export let SmallWaitCursorSpeed = /*#__PURE__*/function (SmallWaitCursorSpeed) {
+  SmallWaitCursorSpeed[SmallWaitCursorSpeed["Slow"] = 1.5] = "Slow";
+  SmallWaitCursorSpeed[SmallWaitCursorSpeed["Medium"] = 1] = "Medium";
+  SmallWaitCursorSpeed[SmallWaitCursorSpeed["Fast"] = 0.5] = "Fast";
+  return SmallWaitCursorSpeed;
+}({});
+const SmallWaitCursor = _ref => {
+  let {
+    shouldHideBackground = false,
+    shouldHideWaitCursor = false,
+    size = SmallWaitCursorSize.Medium,
+    speed = SmallWaitCursorSpeed.Medium,
+    color
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledSmallWaitCursor, {
+    $shouldShowWaitCursor: !shouldHideWaitCursor,
+    $size: size
+  }, /*#__PURE__*/React.createElement(StyledSmallWaitCursorWaitCursor, {
+    $shouldHideBackground: shouldHideBackground,
+    $size: size,
+    $speed: speed,
+    $color: color
+  }), !shouldHideBackground && /*#__PURE__*/React.createElement(StyledSmallWaitCursorBackground, null));
+};
+SmallWaitCursor.displayName = 'SmallWaitCursor';
+export default SmallWaitCursor;
+//# sourceMappingURL=SmallWaitCursor.js.map

package/lib/esm/components/small-wait-cursor/SmallWaitCursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallWaitCursor.js","names":["React","StyledSmallWaitCursor","StyledSmallWaitCursorBackground","StyledSmallWaitCursorWaitCursor","SmallWaitCursorSize","SmallWaitCursorSpeed","SmallWaitCursor","_ref","shouldHideBackground","shouldHideWaitCursor","size","Medium","speed","color","createElement","$shouldShowWaitCursor","$size","$shouldHideBackground","$speed","$color","displayName"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.tsx"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nimport React, { FC } from 'react';\nimport {\n    StyledSmallWaitCursor,\n    StyledSmallWaitCursorBackground,\n    StyledSmallWaitCursorWaitCursor,\n} from './SmallWaitCursor.styles';\n\nexport enum SmallWaitCursorSize {\n    Small = 16,\n    Medium = 30,\n}\n\nexport enum SmallWaitCursorSpeed {\n    Slow = 1.5,\n    Medium = 1,\n    Fast = 0.5,\n}\n\nexport type SmallWaitCursorProps = {\n    /**\n     * Specifies whether the wait cursor should be displayed with a background.\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Specifies whether the wait cursor should be displayed.\n     */\n    shouldHideWaitCursor?: boolean;\n    /**\n     * The size of the wait cursor in pixels. Use the SmallWaitCursorSize enum for this prop.\n     */\n    size?: SmallWaitCursorSize | number;\n    /**\n     * The speed of the animation in seconds. Use the SmallWaitCursorSpeed enum for this prop.\n     */\n    speed?: SmallWaitCursorSpeed;\n    /**\n     * The color of the inner circle of the wait cursor.\n     */\n    color?: string;\n};\n\nconst SmallWaitCursor: FC<SmallWaitCursorProps> = ({\n    shouldHideBackground = false,\n    shouldHideWaitCursor = false,\n    size = SmallWaitCursorSize.Medium,\n    speed = SmallWaitCursorSpeed.Medium,\n    color,\n}) => (\n    <StyledSmallWaitCursor $shouldShowWaitCursor={!shouldHideWaitCursor} $size={size}>\n        <StyledSmallWaitCursorWaitCursor\n            $shouldHideBackground={shouldHideBackground}\n            $size={size}\n            $speed={speed}\n            $color={color}\n        />\n        {!shouldHideBackground && <StyledSmallWaitCursorBackground />}\n    </StyledSmallWaitCursor>\n);\n\nSmallWaitCursor.displayName = 'SmallWaitCursor';\n\nexport default SmallWaitCursor;\n"],"mappings":"AAAA;;AAEA,OAAOA,KAAK,MAAc,OAAO;AACjC,SACIC,qBAAqB,EACrBC,+BAA+B,EAC/BC,+BAA+B,QAC5B,0BAA0B;AAEjC,WAAYC,mBAAmB,0BAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAnBA,mBAAmB,CAAnBA,mBAAmB;EAAA,OAAnBA,mBAAmB;AAAA;AAK/B,WAAYC,oBAAoB,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;AA6BhC,MAAMC,eAAyC,GAAGC,IAAA;EAAA,IAAC;IAC/CC,oBAAoB,GAAG,KAAK;IAC5BC,oBAAoB,GAAG,KAAK;IAC5BC,IAAI,GAAGN,mBAAmB,CAACO,MAAM;IACjCC,KAAK,GAAGP,oBAAoB,CAACM,MAAM;IACnCE;EACJ,CAAC,GAAAN,IAAA;EAAA,oBACGP,KAAA,CAAAc,aAAA,CAACb,qBAAqB;IAACc,qBAAqB,EAAE,CAACN,oBAAqB;IAACO,KAAK,EAAEN;EAAK,gBAC7EV,KAAA,CAAAc,aAAA,CAACX,+BAA+B;IAC5Bc,qBAAqB,EAAET,oBAAqB;IAC5CQ,KAAK,EAAEN,IAAK;IACZQ,MAAM,EAAEN,KAAM;IACdO,MAAM,EAAEN;EAAM,CACjB,CAAC,EACD,CAACL,oBAAoB,iBAAIR,KAAA,CAAAc,aAAA,CAACZ,+BAA+B,MAAE,CACzC,CAAC;AAAA,CAC3B;AAEDI,eAAe,CAACc,WAAW,GAAG,iBAAiB;AAE/C,eAAed,eAAe","ignoreList":[]}

package/lib/esm/components/small-wait-cursor/SmallWaitCursor.styles.js

@@ -0,0 +1,83 @@
+import styled, { keyframes } from 'styled-components';
+export const StyledSmallWaitCursor = styled.div`
+    position: relative;
+    height: ${_ref => {
+  let {
+    $size
+  } = _ref;
+  return $size;
+}}px;
+    width: ${_ref2 => {
+  let {
+    $size
+  } = _ref2;
+  return $size;
+}}px;
+    opacity: ${_ref3 => {
+  let {
+    $shouldShowWaitCursor
+  } = _ref3;
+  return $shouldShowWaitCursor ? 1 : 0;
+}};
+`;
+export const StyledSmallWaitCursorBackground = styled.div`
+    background-color: white;
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    box-shadow:
+        0 4px 12px 0 rgba(0, 0, 0, 0.2),
+        0 1px 1px rgba(0, 0, 0, 0.2);
+`;
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+export const StyledSmallWaitCursorWaitCursor = styled.div`
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    z-index: 2;
+    border-style: solid;
+    border-width: 3px;
+    border-color: ${_ref4 => {
+  let {
+    theme,
+    $shouldHideBackground,
+    $color
+  } = _ref4;
+  if ($color) {
+    return $color;
+  }
+  return theme.colorMode === 'dark' && $shouldHideBackground ? theme.headline : theme.primary;
+}};
+    height: ${_ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return `${$size - 10}px`;
+}};
+    width: ${_ref6 => {
+  let {
+    $size
+  } = _ref6;
+  return `${$size - 10}px`;
+}};
+    border-radius: 50%;
+    display: inline-block;
+    border-top: 3px solid transparent;
+
+    animation: ${spin} ${_ref7 => {
+  let {
+    $speed
+  } = _ref7;
+  return $speed;
+}}s linear infinite;
+`;
+//# sourceMappingURL=SmallWaitCursor.styles.js.map

package/lib/esm/components/small-wait-cursor/SmallWaitCursor.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmallWaitCursor.styles.js","names":["styled","keyframes","StyledSmallWaitCursor","div","_ref","$size","_ref2","_ref3","$shouldShowWaitCursor","StyledSmallWaitCursorBackground","spin","StyledSmallWaitCursorWaitCursor","_ref4","theme","$shouldHideBackground","$color","colorMode","headline","primary","_ref5","_ref6","_ref7","$speed"],"sources":["../../../../src/components/small-wait-cursor/SmallWaitCursor.styles.ts"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { SmallWaitCursorSize, SmallWaitCursorSpeed } from './SmallWaitCursor';\n\ntype StyledSmallWaitCursorProps = WithTheme<{\n    $shouldShowWaitCursor: boolean;\n    $size: SmallWaitCursorSize | number;\n}>;\n\nexport const StyledSmallWaitCursor = styled.div<StyledSmallWaitCursorProps>`\n    position: relative;\n    height: ${({ $size }) => $size}px;\n    width: ${({ $size }) => $size}px;\n    opacity: ${({ $shouldShowWaitCursor }) => ($shouldShowWaitCursor ? 1 : 0)};\n`;\n\ntype StyledSmallWaitCursorBackgroundProps = WithTheme<unknown>;\n\nexport const StyledSmallWaitCursorBackground = styled.div<StyledSmallWaitCursorBackgroundProps>`\n    background-color: white;\n    border-radius: 50%;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    z-index: 1;\n    box-shadow:\n        0 4px 12px 0 rgba(0, 0, 0, 0.2),\n        0 1px 1px rgba(0, 0, 0, 0.2);\n`;\n\ntype StyledSmallWaitCursorWaitCursorProps = WithTheme<{\n    $size: SmallWaitCursorSize | number;\n    $speed: SmallWaitCursorSpeed;\n    $shouldHideBackground: boolean;\n    $color?: string;\n}>;\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const StyledSmallWaitCursorWaitCursor = styled.div<StyledSmallWaitCursorWaitCursorProps>`\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    z-index: 2;\n    border-style: solid;\n    border-width: 3px;\n    border-color: ${({\n        theme,\n        $shouldHideBackground,\n        $color,\n    }: StyledSmallWaitCursorWaitCursorProps) => {\n        if ($color) {\n            return $color;\n        }\n\n        return theme.colorMode === 'dark' && $shouldHideBackground ? theme.headline : theme.primary;\n    }};\n    height: ${({ $size }) => `${$size - 10}px`};\n    width: ${({ $size }) => `${$size - 10}px`};\n    border-radius: 50%;\n    display: inline-block;\n    border-top: 3px solid transparent;\n\n    animation: ${spin} ${({ $speed }) => $speed}s linear infinite;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,SAAS,QAAQ,mBAAmB;AASrD,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA;AAClC,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA;AACjC,eAAeE,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OAAMC,qBAAqB,GAAG,CAAC,GAAG,CAAC;AAAA,CAAC;AAC7E,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGT,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,MAAMO,IAAI,GAAGT,SAAS;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMU,+BAA+B,GAAGX,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBS,KAAA,IAI4B;EAAA,IAJ3B;IACbC,KAAK;IACLC,qBAAqB;IACrBC;EACkC,CAAC,GAAAH,KAAA;EACnC,IAAIG,MAAM,EAAE;IACR,OAAOA,MAAM;EACjB;EAEA,OAAOF,KAAK,CAACG,SAAS,KAAK,MAAM,IAAIF,qBAAqB,GAAGD,KAAK,CAACI,QAAQ,GAAGJ,KAAK,CAACK,OAAO;AAC/F,CAAC;AACL,cAAcC,KAAA;EAAA,IAAC;IAAEd;EAAM,CAAC,GAAAc,KAAA;EAAA,OAAK,GAAGd,KAAK,GAAG,EAAE,IAAI;AAAA;AAC9C,aAAae,KAAA;EAAA,IAAC;IAAEf;EAAM,CAAC,GAAAe,KAAA;EAAA,OAAK,GAAGf,KAAK,GAAG,EAAE,IAAI;AAAA;AAC7C;AACA;AACA;AACA;AACA,iBAAiBK,IAAI,IAAIW,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM;AAAA;AAC/C,CAAC","ignoreList":[]}