@mailstep/design-system 0.6.82-beta.0 → 0.6.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.6.82-beta.0",
+  "version": "0.6.82",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/ImageList/ImageList.js

@@ -27,8 +27,8 @@ export var ImageList = function (_a) {
     var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
     var _c = useOnElementClick({ onImageClick: onImageClick, onOpenLightBox: onOpenLightBox, selectable: selectable }), handleOnClick = _c.handleOnClick, selected = _c.selected;
     var _d = useControls({ max: max, total: images === null || images === void 0 ? void 0 : images.length }), hasControls = _d.hasControls, position = _d.position, moveList = _d.moveList;
-    return (_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), hasControls && (_jsx(Control, { onClick: moveList(-1), isLeft: true, isDisabled: position === 0, children: _jsx(Icon, { icon: "lessThen", size: "24px" }) })), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
+    return (_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled, hasRemove: !!onImageRemove }), hasControls && (_jsx(Control, { onClick: moveList(-1), isLeft: true, isDisabled: position === 0, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "lessThen", size: "24px" }) })), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
                     var _a, _b;
                     return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onClick: handleOnClick(item, index), isDisabled: isDisabled, label: item === null || item === void 0 ? void 0 : item.label, selected: index === selected, visible: !max || (index >= position && index < position + max) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
-                }) }))), hasControls && (_jsx(Control, { onClick: moveList(1), isDisabled: !!images && !!max && position >= (images === null || images === void 0 ? void 0 : images.length) - max, children: _jsx(Icon, { icon: "greaterThan", size: "24px" }) })), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
+                }) }))), hasControls && (_jsx(Control, { onClick: moveList(1), isDisabled: !!images && !!max && position >= (images === null || images === void 0 ? void 0 : images.length) - max, hasRemove: !!onImageRemove, children: _jsx(Icon, { icon: "greaterThan", size: "24px" }) })), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
 };

package/ui/Blocks/ImageList/components/AddPhoto/index.d.ts

@@ -3,6 +3,7 @@ import { type ImageUploadProps } from '../../types';
 interface AddPhotoProps {
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
     isDisabled?: boolean;
+    hasRemove?: boolean;
 }
 export declare const AddPhoto: FC<AddPhotoProps>;
 export {};

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -36,10 +36,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { Container, HiddenInput } from './styles';
 import { AddPhoto as AddPhotoIcon } from '../../../../Elements/Icon/icons/AddPhoto';
+import { Container, HiddenInput } from './styles';
 export var AddPhoto = function (_a) {
-    var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled;
+    var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled, hasRemove = _a.hasRemove;
     var handleImageUpload = useCallback(function (event) {
         var _a, _b;
         if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]))
@@ -53,7 +53,7 @@ export var AddPhoto = function (_a) {
                     case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({
                             base64image: (_a = reader.result) === null || _a === void 0 ? void 0 : _a.split(',').pop(),
                             base64WithDataDeclaration: reader.result,
-                            file: (_b = event.target.files) === null || _b === void 0 ? void 0 : _b[0],
+                            file: (_b = event.target.files) === null || _b === void 0 ? void 0 : _b[0]
                         }))];
                     case 1:
                         _c.sent();
@@ -64,5 +64,5 @@ export var AddPhoto = function (_a) {
     }, [onImageUpload]);
     if (!onImageUpload)
         return null;
-    return (_jsxs(Container, { isDisabled: isDisabled, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*;capture=camera", capture: "environment" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
+    return (_jsxs(Container, { isDisabled: isDisabled, hasRemove: hasRemove, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*;capture=camera", capture: "environment" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
 };

package/ui/Blocks/ImageList/components/AddPhoto/styles.d.ts

@@ -1,4 +1,5 @@
 export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isDisabled?: boolean | undefined;
+    hasRemove?: boolean | undefined;
 }, never>;
 export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/ImageList/components/AddPhoto/styles.js

@@ -3,9 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n"], ["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'), function (_a) {
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n  margin-top: ", ";\n"], ["\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ", ";\n  border: ", ";\n  border-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ", ";\n  margin-top: ", ";\n"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'), function (_a) {
     var isDisabled = _a.isDisabled;
     return (isDisabled ? 0.6 : 1);
+}, function (_a) {
+    var hasRemove = _a.hasRemove;
+    return (hasRemove ? '15px' : '');
 });
 export var HiddenInput = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"], ["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"])));
 var templateObject_1, templateObject_2;

package/ui/Blocks/ImageList/hooks/useOnElementClick.js

@@ -4,11 +4,9 @@ export var useOnElementClick = function (_a) {
     var _b = useState(-1), selected = _b[0], setSelected = _b[1];
     var handleOnClick = useCallback(function (item, index) { return function () {
         if (onImageClick) {
-            console.log('test 2');
             onImageClick(item);
         }
         else {
-            console.log('test 3');
             onOpenLightBox(index)();
         }
         if (selectable) {

package/ui/Blocks/ImageList/styles.d.ts

@@ -2,4 +2,5 @@ export declare const ImageListContainer: import("styled-components").StyledCompo
 export declare const Control: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isLeft?: boolean | undefined;
     isDisabled: boolean;
+    hasRemove?: boolean | undefined;
 }, never>;

package/ui/Blocks/ImageList/styles.js

@@ -4,9 +4,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled from '@xstyled/styled-components';
 export var ImageListContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-export var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  margin-right: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  width: 24px;\n  margin-right: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
+export var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
     var isLeft = _a.isLeft;
     return (isLeft ? '15px' : 0);
+}, function (_a) {
+    var hasRemove = _a.hasRemove;
+    return (hasRemove ? '15px' : 0);
 }, function (_a) {
     var isDisabled = _a.isDisabled;
     return (isDisabled ? 'gray' : 'black');