@expressms/smartapp-ui 2.9.4-alpha.1 → 2.9.4

package/build/main//321/201omponents/ScrollBar/ScrollBar.js

@@ -0,0 +1,138 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import classNames from 'classnames';
+import Scrollbar from 'react-scrollbars-custom';
+import { generateId, isWebPlatform } from '../../helpers';
+import { DEFAULT_SCROLL_BAR_HIDE_DURATION, EVENT_LISTENER_TYPES, PLATFORM } from '../../constants';
+import '../../styles/styles.scss';
+var X_VALUE = 'x';
+var Y_VALUE = 'y';
+export var DEFAULT_SCROLL_BAR_SIZE = '100%';
+var generateAxisValue = function (isXAxis) { return (isXAxis ? X_VALUE : Y_VALUE); };
+var generateDefaultThumbClassname = function (isXAxis) { return "smartapp-scroll__thumb-".concat(generateAxisValue(isXAxis)); };
+var generateShowThumbClassname = function (isXAxis, isScrolling) {
+    var thumbClassname = generateDefaultThumbClassname(isXAxis);
+    return isScrolling ? "".concat(thumbClassname, "--show ").concat(thumbClassname) : "".concat(thumbClassname);
+};
+var generateScrollHeightWithMargin = function (trackHeight) { return "calc(".concat(trackHeight, " - 8px)"); };
+var ScrollBar = function (_a) {
+    var _b = _a.platform, platform = _b === void 0 ? PLATFORM.web : _b, contentId = _a.contentId, content = _a.content, handleScroll = _a.handleScroll, _c = _a.hideDuration, hideDuration = _c === void 0 ? DEFAULT_SCROLL_BAR_HIDE_DURATION : _c, _d = _a.containerHeight, containerHeight = _d === void 0 ? DEFAULT_SCROLL_BAR_SIZE : _d, _e = _a.containerWidth, containerWidth = _e === void 0 ? DEFAULT_SCROLL_BAR_SIZE : _e, _f = _a.trackXHeight, trackXHeight = _f === void 0 ? DEFAULT_SCROLL_BAR_SIZE : _f, _g = _a.trackYHeight, trackYHeight = _g === void 0 ? DEFAULT_SCROLL_BAR_SIZE : _g, containerClassName = _a.containerClassName, containerStyles = _a.containerStyles, scrollbarRef = _a.scrollbarRef, containerScrollRef = _a.containerScrollRef, _h = _a.isShowHorizontalScroll, isShowHorizontalScroll = _h === void 0 ? false : _h, restProps = __rest(_a, ["platform", "contentId", "content", "handleScroll", "hideDuration", "containerHeight", "containerWidth", "trackXHeight", "trackYHeight", "containerClassName", "containerStyles", "scrollbarRef", "containerScrollRef", "isShowHorizontalScroll"]);
+    var _j = useState(generateId()), scrollbarKey = _j[0], setScrollbarKey = _j[1];
+    var _k = useState(false), scrollingX = _k[0], setScrollingX = _k[1];
+    var _l = useState(false), scrollingY = _l[0], setScrollingY = _l[1];
+    var _m = useState(0), scrollXValue = _m[0], setScrollXValue = _m[1];
+    var _o = useState(0), scrollYValue = _o[0], setScrollYValue = _o[1];
+    var _p = useState(false), draggingX = _p[0], setDraggingX = _p[1];
+    var _q = useState(false), draggingY = _q[0], setDraggingY = _q[1];
+    var _r = useState(false), trackXHovered = _r[0], setTrackXHovered = _r[1];
+    var _s = useState(false), trackYHovered = _s[0], setTrackYHovered = _s[1];
+    var pointerup = EVENT_LISTENER_TYPES.pointerup, mouseup = EVENT_LISTENER_TYPES.mouseup, touchcancel = EVENT_LISTENER_TYPES.touchcancel, touchend = EVENT_LISTENER_TYPES.touchend;
+    useEffect(function () {
+        var debounceTimeout = setTimeout(function () { return setScrollingX(false); }, hideDuration);
+        return function () { return clearTimeout(debounceTimeout); };
+        /* eslint-disable-next-line */
+    }, [scrollingX]);
+    useEffect(function () {
+        var debounceTimeout = setTimeout(function () { return setScrollingY(false); }, hideDuration);
+        return function () { return clearTimeout(debounceTimeout); };
+        /* eslint-disable-next-line */
+    }, [scrollingY]);
+    useLayoutEffect(function () {
+        if (contentId) {
+            setTrackXHovered(false);
+            setTrackYHovered(false);
+            setScrollingX(false);
+            setScrollingY(false);
+            setDraggingX(false);
+            setDraggingY(false);
+            setScrollbarKey(contentId);
+        }
+    }, [contentId]);
+    useEffect(function () {
+        var stopDraggingAll = function () {
+            setDraggingX(false);
+            setDraggingY(false);
+        };
+        window.addEventListener(pointerup, stopDraggingAll);
+        window.addEventListener(mouseup, stopDraggingAll);
+        window.addEventListener(touchend, stopDraggingAll, { passive: true });
+        window.addEventListener(touchcancel, stopDraggingAll, { passive: true });
+        return function () {
+            window.removeEventListener(pointerup, stopDraggingAll);
+            window.removeEventListener(mouseup, stopDraggingAll);
+            window.removeEventListener(touchend, stopDraggingAll);
+            window.removeEventListener(touchcancel, stopDraggingAll);
+        };
+    }, [mouseup, pointerup, touchcancel, touchend]);
+    var startDragX = function () { return startDrag(true); };
+    var startDragY = function () { return startDrag(false); };
+    var startDrag = useCallback(function (isXAxis) {
+        var setDragging = isXAxis ? setDraggingX : setDraggingY;
+        var setScrolling = isXAxis ? setScrollingX : setScrollingY;
+        setDragging(true);
+        setScrolling(true);
+    }, []);
+    var onScroll = function (scrollValues) {
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(scrollValues);
+        if ('scrollLeft' in scrollValues) {
+            var scrollTop = scrollValues.scrollTop, scrollLeft = scrollValues.scrollLeft;
+            setScrollXValue(scrollLeft);
+            setScrollYValue(scrollTop);
+            var isXAxisWasScrolled = scrollLeft !== scrollXValue;
+            var isYAxisWasScrolled = scrollTop !== scrollYValue;
+            isXAxisWasScrolled && setScrollingX(true);
+            isYAxisWasScrolled && setScrollingY(true);
+        }
+    };
+    var generateThumbXClassName = useCallback(function () { return generateShowThumbClassname(true, scrollingX); }, [scrollingX]);
+    var generateThumbYClassName = useCallback(function () { return generateShowThumbClassname(false, scrollingY); }, [scrollingY]);
+    var generateScrollerStyles = function (trackHeight, isXTrack) {
+        return ({
+            '--scroller-height': isShowHorizontalScroll ? generateScrollHeightWithMargin(trackHeight) : trackHeight,
+            left: isXTrack ? 0 : undefined,
+        });
+    };
+    var generateTrackProps = function (isXTrack, trackHeight) {
+        var _a;
+        var axis = generateAxisValue(isXTrack);
+        var isDragging = isXTrack ? draggingX : draggingY;
+        var isScrolling = isXTrack ? scrollingX : scrollingY;
+        var isHovered = isXTrack ? trackXHovered : trackYHovered;
+        var isHoverClassName = isScrolling && isHovered && isWebPlatform(platform);
+        var setTrackHovered = isXTrack ? setTrackXHovered : setTrackYHovered;
+        return {
+            className: classNames("smartapp-scroll__scroller-".concat(axis), (_a = {},
+                _a["smartapp-scroll__scroller-".concat(axis, "--hover")] = isHoverClassName,
+                _a["smartapp-scroll__scroller-".concat(axis, "--dragging")] = isDragging,
+                _a)),
+            style: generateScrollerStyles(trackHeight, isXTrack),
+            onMouseEnter: function () { return setTrackHovered(true); },
+            onMouseLeave: function () { return setTrackHovered(false); },
+        };
+    };
+    return (_jsx("div", __assign({ ref: containerScrollRef, style: __assign({ height: containerHeight, width: containerWidth }, containerStyles), className: classNames('smartapp-scroll', containerClassName) }, { children: _jsx(Scrollbar, __assign({ ref: scrollbarRef, native: false, mobileNative: false, removeTracksWhenNotUsed: true, onScroll: onScroll, wrapperProps: { className: 'smartapp-scroll__wrapper' }, thumbYProps: { className: generateThumbYClassName(), onPointerDown: startDragY, onMouseDown: startDragY, onTouchStart: startDragY }, thumbXProps: { className: generateThumbXClassName(), onPointerDown: startDragX, onMouseDown: startDragX, onTouchStart: startDragX }, trackYProps: generateTrackProps(false, trackYHeight), trackXProps: generateTrackProps(true, trackXHeight), noScrollX: !isShowHorizontalScroll }, restProps, { children: content }), scrollbarKey) })));
+};
+export default ScrollBar;
+//# sourceMappingURL=ScrollBar.js.map

package/build/main//321/201omponents/ScrollBar/ScrollBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollBar.js","sourceRoot":"","sources":["../../../../src/сomponents/ScrollBar/ScrollBar.tsx"],"names":[],"mappings":"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"}

package/build/main//321/201omponents/ScrollBar/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ScrollBar';

package/build/main//321/201omponents/ScrollBar/index.js

@@ -0,0 +1,2 @@
+export { default } from './ScrollBar';
+//# sourceMappingURL=index.js.map

package/build/main//321/201omponents/ScrollBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/сomponents/ScrollBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/build/main//321/201omponents/ScrollBar/types.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode, RefObject } from 'react';
+import { Scrollbar, ScrollbarProps } from 'react-scrollbars-custom';
+import { ScrollState } from 'react-scrollbars-custom/dist/types/types';
+import { IPlatformProps, TStyles } from '../../constants';
+type TScrollbarInstance = (instance: Scrollbar | null) => void;
+type TDivInstance = (instance: HTMLDivElement | null) => void;
+type TScrollbarRef = ((TScrollbarInstance | RefObject<Scrollbar>) & (TDivInstance | RefObject<HTMLDivElement>)) | null | undefined;
+export interface IScrollBarProps extends Omit<ScrollbarProps, 'content' | 'ref'>, IPlatformProps {
+    trackXHeight?: string;
+    trackYHeight?: string;
+    containerHeight?: string;
+    containerWidth?: string;
+    containerClassName?: string;
+    containerStyles?: TStyles;
+    hideDuration?: number;
+    handleScroll?: (e: ScrollState | React.UIEvent<HTMLDivElement, UIEvent>) => void;
+    content: ReactNode;
+    contentId?: string;
+    scrollbarRef?: TScrollbarRef;
+    containerScrollRef?: React.Ref<HTMLDivElement>;
+    isShowHorizontalScroll?: boolean;
+}
+export {};

package/build/main//321/201omponents/ScrollBar/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/main//321/201omponents/ScrollBar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/сomponents/ScrollBar/types.ts"],"names":[],"mappings":""}

package/build/main//321/201omponents/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+import { ISkeletonProps } from './types';
+import '../../styles/styles.scss';
+declare const Skeleton: ({ className, styles, baseColor, width, height, borderRadius, circle, containerRef, animationDuration, initialOffset, }: ISkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default Skeleton;

package/build/main//321/201omponents/Skeleton/Skeleton.js

@@ -0,0 +1,59 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import styled, { css, keyframes } from 'styled-components';
+import { generateColor } from '../../helpers';
+import '../../styles/styles.scss';
+var Skeleton = function (_a) {
+    var className = _a.className, styles = _a.styles, baseColor = _a.baseColor, width = _a.width, height = _a.height, _b = _a.borderRadius, borderRadius = _b === void 0 ? 8 : _b, circle = _a.circle, 
+    // needed to determine the offset, the left border must coincide with the left border of the skeletons (without padding in container)
+    containerRef = _a.containerRef, 
+    // if not default, then it must be specified for all skeletons
+    _c = _a.animationDuration, 
+    // if not default, then it must be specified for all skeletons
+    animationDuration = _c === void 0 ? 2 : _c, 
+    // equal to gradient width
+    _d = _a.initialOffset, 
+    // equal to gradient width
+    initialOffset = _d === void 0 ? -230 : _d;
+    var skeletonRef = useRef(null);
+    var _e = useState({ container: { left: 0, width: 0 }, item: { left: 0, width: 0 } }), position = _e[0], setPosition = _e[1];
+    //after mount set offset sizes
+    useEffect(function () {
+        var containerRefCurrent = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+        var skeletonRefContainerCurrent = skeletonRef === null || skeletonRef === void 0 ? void 0 : skeletonRef.current;
+        if (containerRefCurrent && skeletonRefContainerCurrent) {
+            var containerLeft = containerRefCurrent.getBoundingClientRect().left || 0;
+            var containerWidth = containerRefCurrent.clientWidth || 0;
+            var itemLeft = skeletonRefContainerCurrent.getBoundingClientRect().left || 0;
+            var itemWidth = skeletonRefContainerCurrent.getBoundingClientRect().width || 0;
+            setPosition({ container: { left: containerLeft, width: containerWidth }, item: { left: itemLeft, width: itemWidth } });
+        }
+    }, [containerRef]);
+    var calculateOffset = function () {
+        var diff = position.item.left - position.container.left;
+        var startOffset = initialOffset - diff;
+        var finalOffset = position.container.width - diff;
+        return { startOffset: startOffset, finalOffset: finalOffset };
+    };
+    var skeletonBackgroundColor = generateColor(baseColor, 'var(--color-input-primary)');
+    var skeletonCSS = {
+        width: width,
+        height: circle ? width : height,
+        minWidth: circle ? width : 0,
+        borderRadius: circle ? '50%' : borderRadius,
+        backgroundColor: skeletonBackgroundColor,
+    };
+    return (_jsx(StyledSkeleton, { "$animationDuration": animationDuration, "$initialOffset": calculateOffset().startOffset, "$finalOffset": calculateOffset().finalOffset, "$CSS": skeletonCSS, ref: skeletonRef, className: className, style: styles }));
+};
+export default Skeleton;
+var StyledSkeleton = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  overflow: hidden;\n  background-size: 230px;\n  background-repeat: no-repeat;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-skeleton-gradient-edge) var(--skeleton-start-edge-gradient-size),\n    var(--color-skeleton-gradient-center) var(--skeleton-center-gradient-size),\n    var(--color-skeleton-gradient-edge) var(--skeleton-end-edge-gradient-size)\n  );\n  ", ";\n"], ["\n  position: relative;\n  overflow: hidden;\n  background-size: 230px;\n  background-repeat: no-repeat;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-skeleton-gradient-edge) var(--skeleton-start-edge-gradient-size),\n    var(--color-skeleton-gradient-center) var(--skeleton-center-gradient-size),\n    var(--color-skeleton-gradient-edge) var(--skeleton-end-edge-gradient-size)\n  );\n  ", ";\n"])), function (_a) {
+    var $CSS = _a.$CSS, $animationDuration = _a.$animationDuration, $initialOffset = _a.$initialOffset, $finalOffset = _a.$finalOffset;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    animation: ", " ", "s infinite linear;\n    ", ";\n  "], ["\n    animation: ", " ", "s infinite linear;\n    ", ";\n  "])), flash($initialOffset, $finalOffset), $animationDuration, $CSS);
+});
+var flash = function (initialOffset, finalOffset) { return keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n   0% {\n      background-position: ", "px;\n    }\n\n    60%,\n    100% {\n      background-position: ", "px;\n    }\n  \n"], ["\n   0% {\n      background-position: ", "px;\n    }\n\n    60%,\n    100% {\n      background-position: ", "px;\n    }\n  \n"])), initialOffset, finalOffset); };
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=Skeleton.js.map

package/build/main//321/201omponents/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/сomponents/Skeleton/Skeleton.tsx"],"names":[],"mappings":"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"}

package/build/main//321/201omponents/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton';

package/build/main//321/201omponents/Skeleton/index.js

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton';
+//# sourceMappingURL=index.js.map

package/build/main//321/201omponents/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/сomponents/Skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/build/main//321/201omponents/Skeleton/types.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { IThemeProps, TStyles } from '../../constants';
+type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N ? Acc[number] : Enumerate<N, [...Acc, Acc['length']]>;
+type IntRange<F extends number, T extends number> = Exclude<Enumerate<T>, Enumerate<F>>;
+export interface ISkeletonProps extends IThemeProps {
+    className?: string;
+    styles?: TStyles;
+    baseColor?: string;
+    width?: number;
+    height?: number;
+    borderRadius?: number;
+    circle?: boolean;
+    containerRef: RefObject<HTMLDivElement | null>;
+    animationDuration?: IntRange<1, 7>;
+    initialOffset?: number;
+}
+export {};

package/build/main//321/201omponents/Skeleton/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/main//321/201omponents/Skeleton/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/сomponents/Skeleton/types.ts"],"names":[],"mappings":""}

package/build/main//321/201omponents/Stories/Stories.d.ts

@@ -0,0 +1,4 @@
+import { IStoriesProps } from './types';
+import '../../styles/styles.scss';
+declare const StoriesComponent: ({ isCloseIconHidden, platform, fontFamily, imageClassName, titleClassName, bodyClassName, buttonClassName, contentClassName, bottomContentClassName, contentStyles, closeIconPosition, closeIcon, bottomContent, groupStories, allGroupsStories, changeStoryToViewed, changeGroupStoriesToViewed, handleCloseGroupStories, }: IStoriesProps) => import("react/jsx-runtime").JSX.Element | null;
+export default StoriesComponent;

package/build/main//321/201omponents/Stories/Stories.js

@@ -0,0 +1,300 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var _a, _b;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-lines */
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+import classNames from 'classnames';
+import { isNull, sortBy, isEmpty } from 'lodash';
+import Stories from 'react-insta-stories';
+import Popup from 'reactjs-popup';
+import { useSwipeable } from 'react-swipeable';
+import { ReactComponent as CloseStoriesIcon } from '../../assets/icons/close-stories.svg';
+import { ReactComponent as LoaderIcon } from '../../assets/icons/story-loader.svg';
+import { ReactComponent as ExternalLinkIcon } from '../../assets/icons/external-link.svg';
+import { STORY_BACKGROUND_TYPES, STORY_TYPE, } from './types';
+import { COLORS, FONT_FAMILY, NUMBER_OF_STORIES_FOR_ROUND_INDICATORS, PLATFORM } from '../../constants';
+import { generateColor, isIosPlatform, isWebPlatform } from '../../helpers';
+import '../../styles/styles.scss';
+var storyItemBaseStyles = {
+    height: '100%',
+    width: '100%',
+};
+var progressContainerStyles = function (platform, storiesCount) { return ({
+    gap: storiesCount >= NUMBER_OF_STORIES_FOR_ROUND_INDICATORS ? '8px' : '12px',
+    width: '100%',
+    filter: 'none',
+    paddingTop: isWebPlatform(platform) ? '22px' : isIosPlatform(platform) ? '21px' : '26px',
+    paddingLeft: '0',
+    paddingRight: '0',
+    paddingBottom: '0',
+}); };
+var progressWrapperStyles = {
+    height: '4px',
+    borderRadius: '51px',
+    background: 'rgba(255, 255, 255, 0.4)',
+    margin: 0,
+    overflow: 'hidden',
+};
+var progressStyles = {
+    height: '4px',
+    borderRadius: '51px',
+    background: 'rgba(255, 255, 255, 1)',
+};
+var DEFAULT_STORY_DURATION = 5000;
+var STORY_SIZE;
+(function (STORY_SIZE) {
+    STORY_SIZE["xs"] = "xs";
+    STORY_SIZE["sm"] = "sm";
+    STORY_SIZE["l"] = "l";
+})(STORY_SIZE || (STORY_SIZE = {}));
+var STORY_SIZE_HEIGHT = (_a = {},
+    _a[STORY_SIZE.xs] = 620,
+    _a[STORY_SIZE.sm] = 768,
+    _a[STORY_SIZE.l] = 812,
+    _a);
+var STORY_WIDTH_BREAKPOINT = (_b = {},
+    _b[STORY_SIZE.xs] = 377,
+    _b[STORY_SIZE.sm] = 399,
+    _b);
+var generateSize = function (width, height) {
+    var isSizeXS = width < STORY_WIDTH_BREAKPOINT[STORY_SIZE.xs] || height < STORY_SIZE_HEIGHT[STORY_SIZE.sm];
+    var isSizeSM = width < STORY_WIDTH_BREAKPOINT[STORY_SIZE.sm] || height < STORY_SIZE_HEIGHT[STORY_SIZE.l];
+    if (isSizeXS)
+        return STORY_SIZE.xs;
+    if (isSizeSM)
+        return STORY_SIZE.sm;
+    return STORY_SIZE.l;
+};
+var PERCENTAGE_OF_IMAGE_WIDTH = 0.827;
+var StoriesComponent = function (_a) {
+    var _b;
+    var _c = _a.isCloseIconHidden, isCloseIconHidden = _c === void 0 ? false : _c, _d = _a.platform, platform = _d === void 0 ? PLATFORM.web : _d, _e = _a.fontFamily, fontFamily = _e === void 0 ? FONT_FAMILY.openSans : _e, imageClassName = _a.imageClassName, titleClassName = _a.titleClassName, bodyClassName = _a.bodyClassName, buttonClassName = _a.buttonClassName, contentClassName = _a.contentClassName, bottomContentClassName = _a.bottomContentClassName, contentStyles = _a.contentStyles, closeIconPosition = _a.closeIconPosition, closeIcon = _a.closeIcon, bottomContent = _a.bottomContent, groupStories = _a.groupStories, allGroupsStories = _a.allGroupsStories, changeStoryToViewed = _a.changeStoryToViewed, changeGroupStoriesToViewed = _a.changeGroupStoriesToViewed, handleCloseGroupStories = _a.handleCloseGroupStories;
+    var sortStoriesByOrder = function (stories) { return sortBy(stories, ['order']); };
+    var generateActiveGroupStoriesIndex = function () { return allGroupsStories.findIndex(function (_a) {
+        var id = _a.id;
+        return id === (activeGroupStories === null || activeGroupStories === void 0 ? void 0 : activeGroupStories.id);
+    }); };
+    var _f = useState(groupStories), activeGroupStories = _f[0], setActiveGroupStories = _f[1];
+    var _g = useState(sortStoriesByOrder((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) || [])), stories = _g[0], setStories = _g[1];
+    var _h = useState((_b = stories[0]) === null || _b === void 0 ? void 0 : _b.id), activeStoryId = _h[0], setActiveStoryId = _h[1];
+    var _j = useState(false), isAnimateToRight = _j[0], setIsAnimateToRight = _j[1];
+    var _k = useState(false), isAnimateToLeft = _k[0], setIsAnimateToLeft = _k[1];
+    var activeStory = stories.find(function (_a) {
+        var id = _a.id;
+        return id === activeStoryId;
+    });
+    var popupElement = document.querySelector('.smartapp-stories-content');
+    var containerHeight = (popupElement === null || popupElement === void 0 ? void 0 : popupElement.offsetHeight) || 0;
+    var containerWidth = (popupElement === null || popupElement === void 0 ? void 0 : popupElement.offsetWidth) || 0;
+    var size = generateSize(containerWidth, containerHeight);
+    var isShowCloseIconInsideStory = STORY_SIZE_HEIGHT[size] < containerHeight;
+    var isColorOnBackground = function (type) { return type === STORY_BACKGROUND_TYPES.color; };
+    var isImageOnBackground = function (_a) {
+        var type = _a.type;
+        return type === STORY_BACKGROUND_TYPES.image;
+    };
+    var generateStoryStyles = function (_a) {
+        var type = _a.type, value = _a.value;
+        return isColorOnBackground(type)
+            ? __assign(__assign({}, storyItemBaseStyles), { background: value }) : __assign(__assign({}, storyItemBaseStyles), { backgroundImage: "url(".concat(value, ")"), backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' });
+    };
+    var changeActiveGroupStories = function (groupStoriesItem) {
+        setActiveGroupStories(groupStoriesItem);
+        setStories(sortStoriesByOrder(groupStoriesItem.stories));
+        setTimeout(function () {
+            setIsAnimateToLeft(false);
+            setIsAnimateToRight(false);
+        }, 500);
+    };
+    var handlePrevious = function () {
+        var prevGroupStories = allGroupsStories[generateActiveGroupStoriesIndex() - 1];
+        if (prevGroupStories) {
+            setIsAnimateToLeft(true);
+            changeActiveGroupStories(prevGroupStories);
+        }
+        else {
+            handleCloseGroupStories();
+        }
+    };
+    var handleNext = function () {
+        var nextGroupStories = allGroupsStories[generateActiveGroupStoriesIndex() + 1];
+        if (nextGroupStories) {
+            setIsAnimateToRight(true);
+            changeActiveGroupStories(nextGroupStories);
+        }
+        else {
+            handleCloseGroupStories();
+        }
+    };
+    var onStoryStart = function (storyIndex) {
+        var isVideoStory = stories[storyIndex].type === STORY_TYPE.video;
+        isVideoStory && setActiveStoryId(stories[storyIndex].id);
+        var story = stories.find(function (_a) {
+            var id = _a.id;
+            return id === stories[storyIndex].id;
+        });
+        var isLastStory = stories.at(-1).id === story.id;
+        if (!story.viewed && changeStoryToViewed) {
+            changeStoryToViewed(story, activeGroupStories);
+        }
+        if (isLastStory && !activeGroupStories.viewed && changeGroupStoriesToViewed) {
+            changeGroupStoriesToViewed(activeGroupStories);
+        }
+    };
+    var generateCurrentStoryIndex = useCallback(function () { return stories.findIndex(function (_a) {
+        var id = _a.id;
+        return id === activeStoryId;
+    }); }, [stories, activeStoryId]);
+    var onPrevious = function () {
+        activeStoryId === stories[0].id ? handlePrevious() : onStoryStart(generateCurrentStoryIndex() - 1);
+    };
+    var onNext = function () {
+        var currentStoryIndex = generateCurrentStoryIndex();
+        currentStoryIndex !== stories.length - 1 && onStoryStart(currentStoryIndex + 1);
+    };
+    var renderButton = function (_a) {
+        var text = _a.text, textColor = _a.textColor, backgroundColor = _a.backgroundColor, isTransitionToExternalSource = _a.isTransitionToExternalSource, action = _a.action;
+        return (_jsxs("div", __assign({ style: {
+                color: generateColor(textColor, COLORS.darkBlack),
+                background: generateColor(backgroundColor, COLORS.white),
+            }, className: classNames('smartapp-stories__story--bottom-content__button', buttonClassName, {
+                'smartapp-stories__story--bottom-content__button--with-icon': isTransitionToExternalSource,
+            }), onClick: action }, { children: [text, isTransitionToExternalSource && _jsx(ExternalLinkIcon, {})] })));
+    };
+    var createImageContent = function (_a) {
+        var id = _a.id, durationInMs = _a.durationInMs, title = _a.title, body = _a.body, backgroundSource = _a.backgroundSource, button = _a.button, image = _a.image;
+        return ({
+            duration: durationInMs || DEFAULT_STORY_DURATION,
+            content: function (_a) {
+                var action = _a.action;
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                var _b = useState(false), isImageLoaded = _b[0], setIsImageLoaded = _b[1];
+                var isLoaderVisible = image && (!isImageLoaded || isAnimateToLeft || isAnimateToRight);
+                var storyContainer = document.querySelector('.smartapp-stories');
+                var containerWidth = (storyContainer === null || storyContainer === void 0 ? void 0 : storyContainer.offsetWidth) || 0;
+                var imageContainerHeight = containerWidth * PERCENTAGE_OF_IMAGE_WIDTH;
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                useLayoutEffect(function () {
+                    setActiveStoryId(id);
+                }, []);
+                // eslint-disable-next-line react-hooks/rules-of-hooks
+                useLayoutEffect(function () {
+                    var timeoutId;
+                    timeoutId = setTimeout(function () { return action(isLoaderVisible ? 'pause' : 'play'); }, 0);
+                    return function () { return clearTimeout(timeoutId); };
+                    // eslint-disable-next-line
+                }, [isLoaderVisible]);
+                var handleImageLoad = function () {
+                    setTimeout(function () {
+                        action('play');
+                        setIsImageLoaded(true);
+                    }, 0);
+                };
+                return (_jsx("div", __assign({ style: generateStoryStyles(backgroundSource) }, { children: _jsxs("div", __assign({ style: __assign({ fontFamily: "".concat(fontFamily, ", sans-serif") }, contentStyles), className: classNames('smartapp-stories__story', { 'smartapp-stories__story--image-bg': isImageOnBackground(backgroundSource) }, contentClassName) }, { children: [_jsxs("div", __assign({ style: { opacity: isLoaderVisible ? '0' : '1' } }, { children: [image && (_jsx("div", __assign({ className: classNames('smartapp-stories__story--image', imageClassName), style: { maxHeight: "".concat(imageContainerHeight, "px") } }, { children: _jsx("img", { src: image, alt: "", onLoad: handleImageLoad, onError: handleImageLoad }) }))), title && _jsx("div", __assign({ className: classNames('smartapp-stories__story--title', titleClassName) }, { children: title })), body && _jsx("div", __assign({ className: classNames('smartapp-stories__story--body', bodyClassName) }, { children: body })), (button || bottomContent) && (_jsxs("div", __assign({ className: classNames('smartapp-stories__story--bottom-content', "smartapp-stories__story--bottom-content__".concat(platform), bottomContentClassName) }, { children: [button && renderButton(button), bottomContent] })))] })), isLoaderVisible && (_jsx("div", __assign({ className: "smartapp-stories__story--loader" }, { children: _jsx(LoaderIcon, {}) })))] })) }), id));
+            },
+        });
+    };
+    var createVideoContent = function (_a) {
+        var url = _a.url;
+        return ({
+            type: STORY_TYPE.video,
+            url: url,
+        });
+    };
+    var generateStories = function () { return stories.map(function (story) { return (story.type === STORY_TYPE.image ? createImageContent(story) : createVideoContent(story)); }); };
+    var swipeableHandlers = useSwipeable({
+        trackMouse: true,
+        onSwipedLeft: function () { return handleNext(); },
+        onSwipedRight: function () { return handlePrevious(); },
+    });
+    var createBackgroundVideo = function (id, url) {
+        var video = document.createElement('video');
+        video.id = "background_video_".concat(id);
+        video.src = url;
+        video.muted = true;
+        video.playsInline = true;
+        video.autoplay = true;
+        video.classList.add('smartapp-stories-content__background-video');
+        return video;
+    };
+    useEffect(function () {
+        var sortedStories = sortStoriesByOrder((groupStories === null || groupStories === void 0 ? void 0 : groupStories.stories) || []);
+        setActiveGroupStories(groupStories);
+        setStories(sortedStories);
+    }, [groupStories]);
+    useEffect(function () {
+        var video = document.querySelector('video');
+        var pauseVideosOnBackground = function () {
+            var backgroundVideos = document.querySelectorAll("#background_video_".concat(activeStoryId));
+            backgroundVideos.forEach(function (video) { return video.pause(); });
+        };
+        var playVideosOnBackground = function () {
+            var backgroundVideos = document.querySelectorAll("#background_video_".concat(activeStoryId));
+            backgroundVideos.forEach(function (video) { return video.play().catch(function () { }); });
+        };
+        video === null || video === void 0 ? void 0 : video.addEventListener('play', playVideosOnBackground);
+        video === null || video === void 0 ? void 0 : video.addEventListener('pause', pauseVideosOnBackground);
+        return function () {
+            video === null || video === void 0 ? void 0 : video.removeEventListener('play', playVideosOnBackground);
+            video === null || video === void 0 ? void 0 : video.removeEventListener('pause', pauseVideosOnBackground);
+        };
+    }, [activeStoryId]);
+    useEffect(function () {
+        var currentStoryIndex = generateCurrentStoryIndex();
+        var indicatorsContainer = document.querySelector('.smartapp-stories > div:first-of-type > div:first-of-type');
+        var indicators = Array.from((indicatorsContainer === null || indicatorsContainer === void 0 ? void 0 : indicatorsContainer.children) || []);
+        indicators.forEach(function (indicator, index) {
+            if (indicators.length >= NUMBER_OF_STORIES_FOR_ROUND_INDICATORS) {
+                indicator.style.width = index !== currentStoryIndex ? '4px' : '48px';
+            }
+            else {
+                indicator.style.width = '38px';
+            }
+        });
+    }, [generateCurrentStoryIndex]);
+    useEffect(function () {
+        var popupElement = document.querySelector('.smartapp-stories-content');
+        var videoWrapper = document.querySelector('.smartapp-stories-content > div > div > div:nth-child(2) > div');
+        if (activeStory) {
+            if (activeStory.type === STORY_TYPE.image) {
+                var _a = activeStory.backgroundSource, type = _a.type, value = _a.value;
+                var prevBackgroundVideos = document.querySelectorAll('.smartapp-stories-content__background-video');
+                var background = isColorOnBackground(type) ? value : "url(".concat(value, ")");
+                !isEmpty(prevBackgroundVideos) && prevBackgroundVideos.forEach(function (video) { return video.remove(); });
+                isWebPlatform(platform) && (popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.setProperty('--background', background));
+            }
+            else {
+                var id = activeStory.id, url = activeStory.url;
+                var prevBackgroundVideos = document.querySelectorAll('.smartapp-stories-content__background-video');
+                !isEmpty(prevBackgroundVideos) && prevBackgroundVideos.forEach(function (video) { return video.remove(); });
+                // eslint-disable-next-line max-depth
+                if (isWebPlatform(platform)) {
+                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.removeProperty('--background');
+                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.appendChild(createBackgroundVideo(id, url));
+                }
+                videoWrapper === null || videoWrapper === void 0 ? void 0 : videoWrapper.appendChild(createBackgroundVideo(id, url));
+            }
+        }
+    }, [platform, activeStory]);
+    if (isNull(activeGroupStories)) {
+        return null;
+    }
+    var closeStoriesIcon = !isCloseIconHidden && (_jsx("div", __assign({ className: classNames('smartapp-stories__icon', "smartapp-stories__icon--".concat(platform), "smartapp-stories__icon--".concat(closeIconPosition)), onClick: handleCloseGroupStories }, { children: closeIcon || _jsx(CloseStoriesIcon, {}) })));
+    return (_jsxs(Popup, __assign({ className: "smartapp-stories", open: true }, { children: [_jsxs("div", __assign({ className: classNames('smartapp-stories', "smartapp-stories__".concat(size), "smartapp-stories__".concat(platform), {
+                    'smartapp-stories__video': (activeStory === null || activeStory === void 0 ? void 0 : activeStory.type) === STORY_TYPE.video,
+                    'smartapp-stories__animate-right': isAnimateToRight,
+                    'smartapp-stories__animate-left': isAnimateToLeft,
+                }) }, swipeableHandlers, { children: [_jsx(Stories, { defaultInterval: 6000, width: "100%", height: "100%", stories: generateStories(), onStoryStart: onStoryStart, onPrevious: onPrevious, onNext: onNext, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform, stories.length), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id), isShowCloseIconInsideStory && closeStoriesIcon] })), !isShowCloseIconInsideStory && closeStoriesIcon] })));
+};
+export default StoriesComponent;
+//# sourceMappingURL=Stories.js.map