@expressms/smartapp-ui 1.1.0 → 1.1.2

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

@@ -1,4 +1,4 @@
 import { IActionModalProps } from './types';
 import '../../styles/stories.module.scss';
-declare const ActionModal: ({ isModalOpen, title, buttonName, confirmButtonFunction, cancelButtonFunction, placeholder, defaultValue, iconColor, }: IActionModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ActionModal: ({ isModalOpen, title, buttonName, confirmButtonFunction, cancelButtonFunction, placeholder, defaultValue, iconColor, buttonWidth, }: IActionModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionModal;

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

@@ -16,12 +16,12 @@ import { ReactComponent as CancelIcon } from '../../assets/icons/cancel-cross.sv
 import Button from '../Button';
 import Input from '../Input';
 import { TButtonColor, TButtonType } from '../Button/types';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var ActionModal = function (_a) {
-    var isModalOpen = _a.isModalOpen, title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, cancelButtonFunction = _a.cancelButtonFunction, placeholder = _a.placeholder, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, iconColor = _a.iconColor;
-    var _c = useState(defaultValue), value = _c[0], setValue = _c[1];
+    var isModalOpen = _a.isModalOpen, title = _a.title, buttonName = _a.buttonName, confirmButtonFunction = _a.confirmButtonFunction, cancelButtonFunction = _a.cancelButtonFunction, placeholder = _a.placeholder, _b = _a.defaultValue, defaultValue = _b === void 0 ? '' : _b, iconColor = _a.iconColor, _c = _a.buttonWidth, buttonWidth = _c === void 0 ? 100 : _c;
+    var _d = useState(defaultValue), value = _d[0], setValue = _d[1];
     var ref = useRef();
     useEffect(function () {
         var checkIfClickedOutside = function (e) {
@@ -37,6 +37,6 @@ var ActionModal = function (_a) {
     var onChange = function (value) {
         setValue(value);
     };
-    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-action-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-action-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-action-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: cancelButtonFunction, className: "smartapp-action-modal__content__cancel-cross" }, { children: _jsx(CancelIcon, { style: { color: getIconColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { defaultValue: value, placeholder: placeholder, onChange: onChange }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { title: buttonName, typeButton: TButtonType.low, color: TButtonColor.blue, onClickFunction: function () { return confirmButtonFunction(value); } }) }))] })) })) })));
+    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-action-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-action-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-action-modal__content--title" }, { children: title })), _jsx("div", __assign({ onClick: cancelButtonFunction, className: "smartapp-action-modal__content__cancel-cross" }, { children: _jsx(CancelIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--input" }, { children: _jsx(Input, { defaultValue: value, placeholder: placeholder, onChange: onChange }) })), _jsx("div", __assign({ className: "smartapp-action-modal__content--buttons" }, { children: _jsx(Button, { width: buttonWidth, title: buttonName, typeButton: TButtonType.standard, color: TButtonColor.blue, onClickFunction: function () { return confirmButtonFunction(value); } }) }))] })) })) })));
 };
 export default ActionModal;

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

@@ -1,3 +1,4 @@
+import { IntRange } from '../types';
 export interface IActionModalProps {
     isModalOpen: boolean;
     title: string;
@@ -7,4 +8,5 @@ export interface IActionModalProps {
     placeholder?: string;
     defaultValue?: string;
     iconColor?: string;
+    buttonWidth?: IntRange<1, 101>;
 }

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

@@ -14,14 +14,14 @@ import classNames from 'classnames';
 import { ReactComponent as FileIcon } from '../../assets/icons/file.svg';
 import { ReactComponent as RemoveIcon } from '../../assets/icons/close.svg';
 import { ReactComponent as DownloadIcon } from '../../assets/icons/download.svg';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var AttachedFile = function (_a) {
     var fileName = _a.fileName, weight = _a.weight, weightType = _a.weightType, _b = _a.isSpaceBetween, isSpaceBetween = _b === void 0 ? false : _b, _c = _a.onClickDownloadFile, onClickDownloadFile = _c === void 0 ? undefined : _c, _d = _a.onClickRemoveFile, onClickRemoveFile = _d === void 0 ? undefined : _d, _e = _a.isRemoveFile, isRemoveFile = _e === void 0 ? false : _e, _f = _a.isDownloadFile, isDownloadFile = _f === void 0 ? false : _f, _g = _a.width, width = _g === void 0 ? 100 : _g, fileColor = _a.fileColor, downloadColor = _a.downloadColor, removeColor = _a.removeColor;
-    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-attached-file" }, { children: [_jsx("div", __assign({ className: "smartapp-attached-file--icon" }, { children: _jsx(FileIcon, { style: { color: getIconColor(fileColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsxs("div", __assign({ className: classNames({
+    return (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-attached-file" }, { children: [_jsx("div", __assign({ className: "smartapp-attached-file--icon" }, { children: _jsx(FileIcon, { style: { color: getColor(fileColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsxs("div", __assign({ className: classNames({
                     'smartapp-attached-file__value': true,
                     'justify-space-between': isSpaceBetween,
-                }) }, { children: [_jsxs("div", __assign({ className: "smartapp-attached-file__value--info" }, { children: [_jsx("p", __assign({ className: "smartapp-attached-file__value--info__name" }, { children: fileName })), _jsx("p", __assign({ className: "smartapp-attached-file__value--info__weight" }, { children: "".concat(weight, " ").concat(weightType) }))] })), _jsxs("div", __assign({ className: "smartapp-attached-file__value--icons" }, { children: [onClickRemoveFile && isRemoveFile && (_jsx("div", __assign({ onClick: function () { return onClickRemoveFile(fileName); }, className: "smartapp-attached-file__value--icons__close" }, { children: _jsx(RemoveIcon, { style: { color: getIconColor(removeColor, DEFAULT_BLUE_ICON_COLOR) } }) }))), onClickDownloadFile && isDownloadFile && (_jsx("div", __assign({ onClick: function () { return onClickDownloadFile(fileName); }, className: "smartapp-attached-file__value--icons__download" }, { children: _jsx(DownloadIcon, { style: { color: getIconColor(downloadColor, DEFAULT_BLUE_ICON_COLOR) } }) })))] }))] }))] }), weight));
+                }) }, { children: [_jsxs("div", __assign({ className: "smartapp-attached-file__value--info" }, { children: [_jsx("p", __assign({ className: "smartapp-attached-file__value--info__name" }, { children: fileName })), _jsx("p", __assign({ className: "smartapp-attached-file__value--info__weight" }, { children: "".concat(weight, " ").concat(weightType) }))] })), _jsxs("div", __assign({ className: "smartapp-attached-file__value--icons" }, { children: [onClickRemoveFile && isRemoveFile && (_jsx("div", __assign({ onClick: function () { return onClickRemoveFile(fileName); }, className: "smartapp-attached-file__value--icons__close" }, { children: _jsx(RemoveIcon, { style: { color: getColor(removeColor, DEFAULT_BLUE_ICON_COLOR) } }) }))), onClickDownloadFile && isDownloadFile && (_jsx("div", __assign({ onClick: function () { return onClickDownloadFile(fileName); }, className: "smartapp-attached-file__value--icons__download" }, { children: _jsx(DownloadIcon, { style: { color: getColor(downloadColor, DEFAULT_BLUE_ICON_COLOR) } }) })))] }))] }))] }), weight));
 };
 export default AttachedFile;

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

@@ -11,11 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ReactComponent as CheckIcon } from '../../assets/icons/check-mark.svg';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_BLUE_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var CheckBox = function (_a) {
     var id = _a.id, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, iconColor = _a.iconColor, _d = _a.onChange, onChange = _d === void 0 ? function () { return undefined; } : _d;
-    return (_jsx("div", __assign({ className: "smartapp-check-box" }, { children: _jsxs("label", __assign({ htmlFor: "cb-".concat(id) }, { children: [_jsx("input", { id: "cb-".concat(id), type: "checkbox", className: "smartapp-check-box__custom-check-box", disabled: disabled, checked: checked, onChange: onChange }), checked ? _jsx(CheckIcon, { style: { color: getIconColor(iconColor, DEFAULT_BLUE_ICON_COLOR) } }) : _jsx("span", { className: "checkmark" })] })) })));
+    return (_jsx("div", __assign({ className: "smartapp-check-box" }, { children: _jsxs("label", __assign({ htmlFor: "cb-".concat(id) }, { children: [_jsx("input", { id: "cb-".concat(id), type: "checkbox", className: "smartapp-check-box__custom-check-box", disabled: disabled, checked: checked, onChange: onChange }), checked ? _jsx(CheckIcon, { style: { color: getColor(iconColor, DEFAULT_BLUE_ICON_COLOR) } }) : _jsx("span", { className: "checkmark" })] })) })));
 };
 export default CheckBox;

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

@@ -12,11 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ReactComponent as CancelIcon } from '../../assets/icons/cancel-cross.svg';
 import Avatar from '../Avatar';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var Chips = function (_a) {
     var name = _a.name, iconColor = _a.iconColor, _b = _a.onCancelFunction, onCancelFunction = _b === void 0 ? function () { return undefined; } : _b;
-    return (_jsxs("div", __assign({ className: "smartapp-chips" }, { children: [_jsxs("div", __assign({ className: "smartapp-chips__info" }, { children: [_jsx(Avatar, { username: name, size: 24 }), _jsx("p", __assign({ className: "smartapp-chips__info--name" }, { children: name }))] })), _jsx("div", __assign({ onClick: function () { return onCancelFunction(name); }, className: "smartapp-chips__cancel-icon" }, { children: _jsx(CancelIcon, { style: { color: getIconColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) }))] })));
+    return (_jsxs("div", __assign({ className: "smartapp-chips" }, { children: [_jsxs("div", __assign({ className: "smartapp-chips__info" }, { children: [_jsx(Avatar, { username: name, size: 24 }), _jsx("p", __assign({ className: "smartapp-chips__info--name" }, { children: name }))] })), _jsx("div", __assign({ onClick: function () { return onCancelFunction(name); }, className: "smartapp-chips__cancel-icon" }, { children: _jsx(CancelIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) }))] })));
 };
 export default Chips;

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

@@ -29,6 +29,6 @@ var ConfirmationModal = function (_a) {
             document === null || document === void 0 ? void 0 : document.removeEventListener('click', checkIfClickedOutside, true);
         };
     }, [isModalOpen, cancelButtonFunction]);
-    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-confirmation-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-confirmation-modal__content--title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--text" }, { children: text })), _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content--buttons" }, { children: [_jsx(Button, { width: 50, title: cancelButtonName, typeButton: TButtonType.low, onClickFunction: cancelButtonFunction, color: TButtonColor.white }), _jsx(Button, { width: 50, title: confirmButtonName, typeButton: TButtonType.low, onClickFunction: confirmButtonFunction, color: TButtonColor.red })] }))] })) })) })));
+    return (_jsx(Popup, __assign({ closeOnDocumentClick: true, modal: true, open: isModalOpen }, { children: _jsx("div", __assign({ ref: ref, className: "smartapp-confirmation-modal" }, { children: _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content" }, { children: [_jsx("p", __assign({ className: "smartapp-confirmation-modal__content--title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-confirmation-modal__content--text" }, { children: text })), _jsxs("div", __assign({ className: "smartapp-confirmation-modal__content--buttons" }, { children: [_jsx(Button, { width: 50, title: cancelButtonName, typeButton: TButtonType.standard, onClickFunction: cancelButtonFunction, color: TButtonColor.white }), _jsx(Button, { width: 50, title: confirmButtonName, typeButton: TButtonType.standard, onClickFunction: confirmButtonFunction, color: TButtonColor.blue })] }))] })) })) })));
 };
 export default ConfirmationModal;

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

@@ -15,7 +15,7 @@ import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { ReactComponent as OrderIcon } from '../../assets/icons/order.svg';
 import { ReactComponent as DeleteIcon } from '../../assets/icons/close.svg';
 import CheckBox from '../Checkbox';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var DragAndDrop = function (_a) {
@@ -50,6 +50,6 @@ var DragAndDrop = function (_a) {
         var newOptions = reorderOptions(options, result.source.index, result.destination.index);
         onDragEndFunction(newOptions);
     };
-    return (_jsx("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-drag-drop" }, { children: _jsx(DragDropContext, __assign({ onDragStart: onDragStart, onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable" }, { children: function (provided) { return (_jsx("div", __assign({}, provided.droppableProps, { ref: provided.innerRef, className: "smartapp-drag-drop__container" }, { children: options === null || options === void 0 ? void 0 : options.map(function (instanceOption, index) { return (_jsx(Draggable, __assign({ draggableId: instanceOption.id, index: index }, { children: function (provided) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { className: "smartapp-drag-drop__container--instance" }, { children: [_jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__info" }, { children: [isCheckbox(instanceOption) && onChangeIsCompletedOption && (_jsx(CheckBox, { id: instanceOption.id, checked: instanceOption.isCompleted, iconColor: checkboxColor, onChange: function () { return onChangeIsCompletedOption(instanceOption); } })), onChangeOption ? (_jsx("input", { onChange: function (e) { return onChangeOption && onChangeOption(e, instanceOption); }, defaultValue: instanceOption.defaultValue, className: "smartapp-drag-drop__container--instance__info--name", type: "text", enterKeyHint: "enter", placeholder: placeholder }, instanceOption === null || instanceOption === void 0 ? void 0 : instanceOption.id)) : (_jsx("p", __assign({ className: "smartapp-drag-drop__container--instance__info--name" }, { children: instanceOption.defaultValue })))] })), _jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__icons" }, { children: [_jsx(OrderIcon, { style: { color: getIconColor(orderColor, DEFAULT_GRAY_ICON_COLOR) } }), onClickDeleteOption && _jsx(DeleteIcon, { className: "cp", style: { color: getIconColor(deleteColor, DEFAULT_BLUE_ICON_COLOR) }, onClick: function () { return onClickDeleteOption(instanceOption); } })] }))] }))); } }), instanceOption.id)); }) }))); } })) })) })));
+    return (_jsx("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-drag-drop" }, { children: _jsx(DragDropContext, __assign({ onDragStart: onDragStart, onDragEnd: onDragEnd }, { children: _jsx(Droppable, __assign({ droppableId: "droppable" }, { children: function (provided) { return (_jsx("div", __assign({}, provided.droppableProps, { ref: provided.innerRef, className: "smartapp-drag-drop__container" }, { children: options === null || options === void 0 ? void 0 : options.map(function (instanceOption, index) { return (_jsx(Draggable, __assign({ draggableId: instanceOption.id, index: index }, { children: function (provided) { return (_jsxs("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { className: "smartapp-drag-drop__container--instance" }, { children: [_jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__info" }, { children: [isCheckbox(instanceOption) && onChangeIsCompletedOption && (_jsx(CheckBox, { id: instanceOption.id, checked: instanceOption.isCompleted, iconColor: checkboxColor, onChange: function () { return onChangeIsCompletedOption(instanceOption); } })), onChangeOption ? (_jsx("input", { onChange: function (e) { return onChangeOption && onChangeOption(e, instanceOption); }, defaultValue: instanceOption.defaultValue, className: "smartapp-drag-drop__container--instance__info--name", type: "text", enterKeyHint: "enter", placeholder: placeholder }, instanceOption === null || instanceOption === void 0 ? void 0 : instanceOption.id)) : (_jsx("p", __assign({ className: "smartapp-drag-drop__container--instance__info--name" }, { children: instanceOption.defaultValue })))] })), _jsxs("div", __assign({ className: "smartapp-drag-drop__container--instance__icons" }, { children: [_jsx(OrderIcon, { style: { color: getColor(orderColor, DEFAULT_GRAY_ICON_COLOR) } }), onClickDeleteOption && _jsx(DeleteIcon, { className: "cp", style: { color: getColor(deleteColor, DEFAULT_BLUE_ICON_COLOR) }, onClick: function () { return onClickDeleteOption(instanceOption); } })] }))] }))); } }), instanceOption.id)); }) }))); } })) })) })));
 };
 export default DragAndDrop;

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

@@ -11,11 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ReactComponent as ErrorIcon } from '../../assets/icons/error.svg';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_GRAY_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var Error = function (_a) {
     var _b = _a.title, title = _b === void 0 ? 'Ошибка' : _b, _c = _a.text, text = _c === void 0 ? 'Попробуйте еще раз' : _c, _d = _a.width, width = _d === void 0 ? 100 : _d, iconColor = _a.iconColor;
-    return (_jsxs("div", __assign({ className: "smartapp-error", style: { width: "".concat(width, "%") } }, { children: [_jsx("div", __assign({ className: "smartapp-error__icon" }, { children: _jsx(ErrorIcon, { style: { color: getIconColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("p", __assign({ className: "smartapp-error__title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-error__text" }, { children: text }))] })));
+    return (_jsxs("div", __assign({ className: "smartapp-error", style: { width: "".concat(width, "%") } }, { children: [_jsx("div", __assign({ className: "smartapp-error__icon" }, { children: _jsx(ErrorIcon, { style: { color: getColor(iconColor, DEFAULT_GRAY_ICON_COLOR) } }) })), _jsx("p", __assign({ className: "smartapp-error__title" }, { children: title })), _jsx("p", __assign({ className: "smartapp-error__text" }, { children: text }))] })));
 };
 export default Error;

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

@@ -14,7 +14,7 @@ import classNames from 'classnames';
 import { ReactComponent as ArrowBackIcon } from '../../assets/icons/arrow-back.svg';
 import { ReactComponent as TrashIcon } from '../../assets/icons/trash.svg';
 import { ReactComponent as RefreshIcon } from '../../assets/icons/refresh.svg';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_BLACK_ICON_COLOR, DEFAULT_HEADER_BACKGROUND_COLOR, DEFAULT_HEADER_TEXT_COLOR, DEFAULT_RED_ICON_COLOR, FONT_SIZE, LINE_HEIGHT, PLATFORM, } from '../../constants';
 import '../../styles/stories.module.scss';
 var Header = function (_a) {
@@ -24,13 +24,13 @@ var Header = function (_a) {
         height: headerHeight && "".concat(headerHeight - 29, "px"),
         fontSize: FONT_SIZE[textSize],
         lineHeight: LINE_HEIGHT[textSize],
-        color: getIconColor(textColor, DEFAULT_HEADER_TEXT_COLOR),
-        background: getIconColor(backgroundColor, DEFAULT_HEADER_BACKGROUND_COLOR),
+        color: getColor(textColor, DEFAULT_HEADER_TEXT_COLOR),
+        background: getColor(backgroundColor, DEFAULT_HEADER_BACKGROUND_COLOR),
     }); };
     var renderRefreshIcon = function (_a) {
         var isEnabled = _a.isEnabled, onClick = _a.onClick;
         return (_jsx(RefreshIcon, { className: classNames({ 'smartapp-header__icons--refresh': isEnabled }), onClick: !isEnabled ? onClick : function () { } }));
     };
-    return (_jsxs("div", __assign({ className: classNames((_b = { 'smartapp-header': true }, _b["smartapp-header__".concat(platform)] = true, _b)), style: getHeaderStyles() }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBackIcon, { style: { color: getIconColor(arrowColor, DEFAULT_BLACK_ICON_COLOR) }, onClick: onClickBack, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), _jsxs("div", __assign({ className: "smartapp-header__icons" }, { children: [isRemove && (_jsx("div", __assign({ onClick: onClickRemove, className: "smartapp-header__icons--trash" }, { children: _jsx(TrashIcon, { style: { color: getIconColor(trashColor, DEFAULT_RED_ICON_COLOR) } }) }))), refreshIcon && renderRefreshIcon(refreshIcon)] }))] })));
+    return (_jsxs("div", __assign({ className: classNames((_b = { 'smartapp-header': true }, _b["smartapp-header__".concat(platform)] = true, _b)), style: getHeaderStyles() }, { children: [_jsxs("div", __assign({ className: "smartapp-header__info" }, { children: [isBack && (_jsx(ArrowBackIcon, { style: { color: getColor(arrowColor, DEFAULT_BLACK_ICON_COLOR) }, onClick: onClickBack, className: "smartapp-header__info--arrow-back" })), title && _jsx("p", __assign({ className: "smartapp-header__info--title" }, { children: title }))] })), _jsxs("div", __assign({ className: "smartapp-header__icons" }, { children: [isRemove && (_jsx("div", __assign({ onClick: onClickRemove, className: "smartapp-header__icons--trash" }, { children: _jsx(TrashIcon, { style: { color: getColor(trashColor, DEFAULT_RED_ICON_COLOR) } }) }))), refreshIcon && renderRefreshIcon(refreshIcon)] }))] })));
 };
 export default Header;

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

@@ -1,4 +1,3 @@
-import { PLATFORM } from '../../constants';
 export type TRefreshIcon = {
     isEnabled: boolean;
     onClick: () => void;
@@ -12,7 +11,7 @@ export interface IHeaderProps {
     onClickRemove?: () => void;
     arrowColor?: string;
     trashColor?: string;
-    platform?: PLATFORM;
+    platform?: 'web' | 'ios' | 'android';
     headerHeight?: number;
     textSize?: 'small' | 'default' | 'large';
     textColor?: string;

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

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ColorRing } from 'react-loader-spinner';
 import classNames from 'classnames';
 import { DEFAULT_GRAY_LOADER_BACKGROUND_COLOR, DEFAULT_WHITE_LOADER_BACKGROUND_COLOR, FONT_SIZE, LINE_HEIGHT, } from '../../constants';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import '../../styles/stories.module.scss';
 var Loader = function (_a) {
     var _b = _a.isLoader, isLoader = _b === void 0 ? false : _b, _c = _a.isFullScreen, isFullScreen = _c === void 0 ? true : _c, _d = _a.isTextItalic, isTextItalic = _d === void 0 ? false : _d, title = _a.title, _e = _a.textSize, textSize = _e === void 0 ? 'small' : _e, _f = _a.width, width = _f === void 0 ? 150 : _f, _g = _a.iconSize, iconSize = _g === void 0 ? 32 : _g, backgroundColor = _a.backgroundColor;
@@ -24,7 +24,7 @@ var Loader = function (_a) {
     }); };
     var getBackgroundColor = function () {
         var defaultColor = isFullScreen ? DEFAULT_GRAY_LOADER_BACKGROUND_COLOR : DEFAULT_WHITE_LOADER_BACKGROUND_COLOR;
-        return getIconColor(backgroundColor, defaultColor);
+        return getColor(backgroundColor, defaultColor);
     };
     return (_jsx("div", __assign({ className: classNames({
             'smartapp-loader-wrapper': true,

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

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { ReactComponent as LogoutIcon } from '../../assets/icons/logout.svg';
 import { ReactComponent as AddProfileIcon } from '../../assets/icons/plus.svg';
-import { getIconColor } from '../../helpers';
+import { getColor } from '../../helpers';
 import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_BLUE_LIGHT_ICON_COLOR } from '../../constants';
 import '../../styles/stories.module.scss';
 var Profile = function (_a) {
@@ -33,9 +33,9 @@ var Profile = function (_a) {
             document.removeEventListener('mousedown', checkIfClickedOutside);
         };
     }, [isShowProfile, onChange]);
-    return (_jsxs("div", __assign({ ref: ref, className: "smartapp-profile__container" }, { children: [_jsx("div", __assign({ onClick: function () { return onChange(!isShowProfile); }, className: "smartapp-profile__avatar" }, { children: initials })), isShowProfile && (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile--info" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__avatar" }, { children: initials })), _jsxs("div", __assign({ className: "smartapp-profile__current-profile--info__data" }, { children: [_jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--username" }, { children: username })), email && _jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--email" }, { children: email }))] }))] })), _jsx("div", __assign({ onClick: onClickLogout, className: "smartapp-profile__current-profile--logout" }, { children: _jsx(LogoutIcon, { style: { color: getIconColor(logoutColor, DEFAULT_BLUE_ICON_COLOR) } }) }))] })), isMultipleProfile && (_jsxs("div", __assign({ onClick: onClickAddProfile, className: "smartapp-profile__add-profile" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__add-profile--icon" }, { children: _jsx(AddProfileIcon, { style: {
-                                        stroke: getIconColor(addProfileColor, DEFAULT_BLUE_ICON_COLOR),
-                                        color: getIconColor(addProfileBackgroundColor, DEFAULT_BLUE_LIGHT_ICON_COLOR)
+    return (_jsxs("div", __assign({ ref: ref, className: "smartapp-profile__container" }, { children: [_jsx("div", __assign({ onClick: function () { return onChange(!isShowProfile); }, className: "smartapp-profile__avatar" }, { children: initials })), isShowProfile && (_jsxs("div", __assign({ style: { width: "".concat(width, "%") }, className: "smartapp-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile" }, { children: [_jsxs("div", __assign({ className: "smartapp-profile__current-profile--info" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__avatar" }, { children: initials })), _jsxs("div", __assign({ className: "smartapp-profile__current-profile--info__data" }, { children: [_jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--username" }, { children: username })), email && _jsx("p", __assign({ className: "smartapp-profile__current-profile--info__data--email" }, { children: email }))] }))] })), _jsx("div", __assign({ onClick: onClickLogout, className: "smartapp-profile__current-profile--logout" }, { children: _jsx(LogoutIcon, { style: { color: getColor(logoutColor, DEFAULT_BLUE_ICON_COLOR) } }) }))] })), isMultipleProfile && (_jsxs("div", __assign({ onClick: onClickAddProfile, className: "smartapp-profile__add-profile" }, { children: [_jsx("div", __assign({ className: "smartapp-profile__add-profile--icon" }, { children: _jsx(AddProfileIcon, { style: {
+                                        stroke: getColor(addProfileColor, DEFAULT_BLUE_ICON_COLOR),
+                                        color: getColor(addProfileBackgroundColor, DEFAULT_BLUE_LIGHT_ICON_COLOR)
                                     } }) })), _jsx("p", __assign({ className: "smartapp-profile__add-profile--title" }, { children: "\u0414\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0430\u043A\u043A\u0430\u0443\u043D\u0442" }))] })))] })))] })));
 };
 export default Profile;

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

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 import classNames from 'classnames';
 import { isNull, sortBy } from 'lodash';
 import Stories from 'react-insta-stories';
@@ -20,7 +20,7 @@ import { isEmpty } from 'lodash';
 import { ReactComponent as CloseStoriesIcon } from '../../assets/icons/close-stories.svg';
 import { STORY_BACKGROUND_TYPES, STORY_TYPE, } from './types';
 import { BUTTON_PADDING, DEFAULT_BACKGROUND_BUTTON_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_BUTTON_COLOR, MAX_PADDING_FOR_IMAGE, PLATFORM, } from '../../constants';
-import { getIconColor, isAndroidPlatform, isIosPlatform, isWebPlatform } from '../../helpers';
+import { getColor, isAndroidPlatform, isIosPlatform, isWebPlatform } from '../../helpers';
 import '../../styles/stories.module.scss';
 var storyItemBaseStyles = {
     height: '100%',
@@ -98,7 +98,6 @@ var StoriesComponent = function (_a) {
             handleCloseGroupStories();
         }
     };
-    var onPrevious = function () { return activeStoryId === stories[0].id && handlePrevious(); };
     var onStoryStart = function (storyIndex) {
         var isVideoStory = stories[storyIndex].type === STORY_TYPE.video;
         isVideoStory && setActiveStoryId(stories[storyIndex].id);
@@ -114,12 +113,23 @@ var StoriesComponent = function (_a) {
             changeGroupStoriesToViewed(activeGroupStories);
         }
     };
+    var getCurrentStoryIndex = function () { return stories.findIndex(function (_a) {
+        var id = _a.id;
+        return id === activeStoryId;
+    }); };
+    var onPrevious = function () {
+        activeStoryId === stories[0].id ? handlePrevious() : onStoryStart(getCurrentStoryIndex() - 1);
+    };
+    var onNext = function () {
+        var currentStoryIndex = getCurrentStoryIndex();
+        currentStoryIndex !== stories.length - 1 && onStoryStart(currentStoryIndex + 1);
+    };
     var getImageContent = function (_a) {
         var id = _a.id, title = _a.title, body = _a.body, backgroundSource = _a.backgroundSource, button = _a.button, image = _a.image;
         return ({
             content: function () {
                 // eslint-disable-next-line react-hooks/rules-of-hooks
-                useEffect(function () {
+                useLayoutEffect(function () {
                     setActiveStoryId(id);
                     var storyWrapper = document.querySelector('.smartapp-stories');
                     var storyWrapperHeight = (storyWrapper === null || storyWrapper === void 0 ? void 0 : storyWrapper.getBoundingClientRect().height) || 0;
@@ -132,8 +142,8 @@ var StoriesComponent = function (_a) {
                     storyContent === null || storyContent === void 0 ? void 0 : storyContent.style.setProperty('--padding', paddingTop);
                 }, []);
                 return (_jsx("div", __assign({ style: getStoryStyles(backgroundSource) }, { children: _jsxs("div", __assign({ style: { fontFamily: "".concat(fontFamily, ", sans-serif") }, className: "smartapp-stories__story" }, { children: [image && _jsx("div", __assign({ className: "smartapp-stories__story--image" }, { children: _jsx("img", { src: image, alt: "" }) })), title && _jsx("div", __assign({ className: "smartapp-stories__story--title" }, { children: title })), body && _jsx("div", __assign({ className: "smartapp-stories__story--body" }, { children: body })), button && (_jsx("div", __assign({ style: {
-                                    color: getIconColor(button.textColor, DEFAULT_TEXT_BUTTON_COLOR),
-                                    background: getIconColor(button.backgroundColor, DEFAULT_BACKGROUND_BUTTON_COLOR),
+                                    color: getColor(button.textColor, DEFAULT_TEXT_BUTTON_COLOR),
+                                    background: getColor(button.backgroundColor, DEFAULT_BACKGROUND_BUTTON_COLOR),
                                 }, className: classNames('smartapp-stories__story--button', "smartapp-stories__story--button__".concat(platform)), onClick: button.action }, { children: button.text })))] })) }), id));
             },
         });
@@ -151,6 +161,16 @@ var StoriesComponent = function (_a) {
         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);
@@ -185,20 +205,14 @@ var StoriesComponent = function (_a) {
                 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(); });
-                var video = document.createElement('video');
-                video.id = "background_video_".concat(activeStory.id);
-                video.src = activeStory.url;
-                video.playsInline = true;
-                video.autoplay = true;
-                video.muted = true;
-                video.classList.add('smartapp-stories-content__background-video');
                 if (isWebPlatform(platform)) {
                     popupElement === null || popupElement === void 0 ? void 0 : popupElement.style.removeProperty('--background');
-                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.appendChild(video);
+                    popupElement === null || popupElement === void 0 ? void 0 : popupElement.appendChild(createBackgroundVideo(id, url));
                 }
-                videoWrapper === null || videoWrapper === void 0 ? void 0 : videoWrapper.appendChild(video.cloneNode(true));
+                videoWrapper === null || videoWrapper === void 0 ? void 0 : videoWrapper.appendChild(createBackgroundVideo(id, url));
             }
         }
     }, [platform, activeStory]);
@@ -212,7 +226,7 @@ var StoriesComponent = function (_a) {
                     _b['smartapp-stories__video'] = (activeStory === null || activeStory === void 0 ? void 0 : activeStory.type) === STORY_TYPE.video,
                     _b['smartapp-stories__animate-right'] = isAnimateToRight,
                     _b['smartapp-stories__animate-left'] = isAnimateToLeft,
-                    _b)) }, swipeableHandlers, { children: _jsx(Stories, { defaultInterval: 6000, width: "100%", height: "100%", stories: getStories(), onStoryStart: onStoryStart, onPrevious: onPrevious, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id) })), _jsx(CloseStoriesIcon, { className: classNames((_c = {
+                    _b)) }, swipeableHandlers, { children: _jsx(Stories, { defaultInterval: 6000, width: "100%", height: "100%", stories: getStories(), onStoryStart: onStoryStart, onPrevious: onPrevious, onNext: onNext, onAllStoriesEnd: handleNext, progressContainerStyles: progressContainerStyles(platform), progressWrapperStyles: progressWrapperStyles, progressStyles: progressStyles }, activeGroupStories.id) })), _jsx(CloseStoriesIcon, { className: classNames((_c = {
                         'smartapp-stories__icon': true
                     },
                     _c["smartapp-stories__icon--".concat(platform)] = true,

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

@@ -1,4 +1,3 @@
-import { PLATFORM } from '../../constants';
 export declare enum STORY_BACKGROUND_TYPES {
     color = "color",
     image = "image"
@@ -40,7 +39,7 @@ export type TGroupStories = {
     stories: TStoryItem[];
 };
 export interface IStoriesProps {
-    platform?: PLATFORM;
+    platform?: 'web' | 'ios' | 'android';
     fontFamily?: string;
     groupStories: TGroupStories | null;
     allGroupsStories: TGroupStories[];

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

@@ -0,0 +1,4 @@
+import { ISyncLoaderProps } from './types';
+import '../../styles/stories.module.scss';
+declare const SyncLoader: ({ isLoading, theme, color, fontFamily, }: ISyncLoaderProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SyncLoader;

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

@@ -0,0 +1,66 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import classNames from 'classnames';
+import Color from 'color';
+import { normal } from 'color-blend';
+import { ReactComponent as LoaderIcon } from '../../assets/icons/loader.svg';
+import { DEFAULT_BLUE_ICON_COLOR, DEFAULT_FONT_FAMILY, THEME } from '../../constants';
+import { getColor } from '../../helpers';
+import '../../styles/stories.module.scss';
+var SyncLoader = function (_a) {
+    var isLoading = _a.isLoading, _b = _a.theme, theme = _b === void 0 ? THEME.default : _b, color = _a.color, _c = _a.fontFamily, fontFamily = _c === void 0 ? DEFAULT_FONT_FAMILY : _c;
+    var isDarkTheme = theme === THEME.dark;
+    var loaderColor = getColor(color, DEFAULT_BLUE_ICON_COLOR);
+    var getBackgroundStyles = function () {
+        var _a = Color(loaderColor).rgb().object(), red = _a.r, green = _a.g, blue = _a.b;
+        var backgroundColorRGBA = { r: red, g: green, b: blue, a: 0.2 };
+        var WHITE_COLOR = { r: 255, g: 255, b: 255, a: 1 };
+        var BLACK_COLOR = { r: 61, g: 61, b: 61, a: 1 };
+        var _b = isDarkTheme
+            ? normal(BLACK_COLOR, backgroundColorRGBA)
+            : normal(WHITE_COLOR, backgroundColorRGBA), r = _b.r, g = _b.g, b = _b.b, a = _b.a;
+        return { background: "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")") };
+    };
+    useEffect(function () {
+        var timerId;
+        var dots = document.querySelectorAll('.smartapp-sync-loader__text--dots__dot');
+        var animationEndFunction = function () {
+            dots.forEach(function (dot) { return dot.style.display = 'none'; });
+            timerId = setTimeout(function () {
+                dots.forEach(function (dot) { return dot.style.display = 'unset'; });
+            }, 150);
+        };
+        if (isLoading) {
+            dots[0].addEventListener('animationend', animationEndFunction);
+        }
+        return function () {
+            clearTimeout(timerId);
+            isLoading && dots[0].removeEventListener('animationend', animationEndFunction);
+        };
+    }, [isLoading]);
+    if (!isLoading) {
+        return null;
+    }
+    return (_jsxs("div", __assign({ className: "smartapp-sync-loader", style: getBackgroundStyles() }, { children: [_jsx(LoaderIcon, { className: "smartapp-sync-loader__icon", style: { color: loaderColor } }), _jsxs("div", __assign({ style: { fontFamily: "".concat(fontFamily, ", sans-serif") }, className: classNames({ 'smartapp-sync-loader__text': true, 'smartapp-sync-loader__text--dark': isDarkTheme }) }, { children: ["\u041E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0435", _jsx("div", __assign({ className: "smartapp-sync-loader__text--dots" }, { children: __spreadArray([], Array(3), true).map(function (_, index) { return _jsx("div", __assign({ className: "smartapp-sync-loader__text--dots__dot" }, { children: "." }), index); }) }))] }))] })));
+};
+export default SyncLoader;

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

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

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

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

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

@@ -0,0 +1,6 @@
+export interface ISyncLoaderProps {
+    isLoading: boolean;
+    theme?: 'default' | 'dark';
+    color?: string;
+    fontFamily?: string;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -18,3 +18,4 @@ export { default as Profile } from './Profile';
 export { default as Switcher } from './Switcher';
 export { default as Toggle } from './Toggle';
 export { default as Stories } from './Stories';
+export { default as SyncLoader } from './SyncLoader';

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

@@ -18,3 +18,4 @@ export { default as Profile } from './Profile';
 export { default as Switcher } from './Switcher';
 export { default as Toggle } from './Toggle';
 export { default as Stories } from './Stories';
+export { default as SyncLoader } from './SyncLoader';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressms/smartapp-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "SmartApp UI library",
   "license": "MIT",
   "main": "build/main/index.js",
@@ -22,6 +22,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/color": "^3.0.6",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.27",
@@ -41,6 +42,8 @@
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "classnames": "^2.3.2",
+    "color": "^4.2.3",
+    "color-blend": "^4.0.0",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.2.0",