@mailstep/design-system 0.1.11 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/ui/Blocks/CornerDialog/CornerDialog.js +14 -12
- package/ui/Blocks/CornerDialog/CornerDialog.js.map +1 -1
- package/ui/Blocks/CornerDialog/index.js +6 -2
- package/ui/Blocks/CornerDialog/index.js.map +1 -1
- package/ui/Blocks/CornerDialog/styles.js +22 -11
- package/ui/Blocks/CornerDialog/styles.js.map +1 -1
- package/ui/Blocks/CornerDialog/utils.js +4 -1
- package/ui/Blocks/CornerDialog/utils.js.map +1 -1
- package/ui/Blocks/ImageList/ImageList.js +19 -17
- package/ui/Blocks/ImageList/ImageList.js.map +1 -1
- package/ui/Blocks/ImageList/components/AddPhoto/index.js +11 -9
- package/ui/Blocks/ImageList/components/AddPhoto/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/AddPhoto/styles.js +12 -5
- package/ui/Blocks/ImageList/components/AddPhoto/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/CloseButton/index.js +8 -6
- package/ui/Blocks/ImageList/components/CloseButton/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/CloseButton/styles.js +10 -4
- package/ui/Blocks/ImageList/components/CloseButton/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageElement/index.js +9 -7
- package/ui/Blocks/ImageList/components/ImageElement/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageElement/styles.js +11 -5
- package/ui/Blocks/ImageList/components/ImageElement/styles.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageTag/index.js +7 -5
- package/ui/Blocks/ImageList/components/ImageTag/index.js.map +1 -1
- package/ui/Blocks/ImageList/components/ImageTag/styles.js +10 -4
- package/ui/Blocks/ImageList/components/ImageTag/styles.js.map +1 -1
- package/ui/Blocks/ImageList/index.js +6 -2
- package/ui/Blocks/ImageList/index.js.map +1 -1
- package/ui/Blocks/ImageList/styles.js +10 -4
- package/ui/Blocks/ImageList/styles.js.map +1 -1
- package/ui/Blocks/LightBox/LightBox.js +12 -10
- package/ui/Blocks/LightBox/LightBox.js.map +1 -1
- package/ui/Blocks/LightBox/hooks/useLightBox.js +8 -6
- package/ui/Blocks/LightBox/hooks/useLightBox.js.map +1 -1
- package/ui/Blocks/LightBox/index.js +8 -4
- package/ui/Blocks/LightBox/index.js.map +1 -1
- package/ui/Blocks/LightBox/styles.js +14 -6
- package/ui/Blocks/LightBox/styles.js.map +1 -1
- package/ui/Blocks/Modal/Modal.js +20 -18
- package/ui/Blocks/Modal/Modal.js.map +1 -1
- package/ui/Blocks/Modal/hooks/useClickOutside.js +8 -6
- package/ui/Blocks/Modal/hooks/useClickOutside.js.map +1 -1
- package/ui/Blocks/Modal/hooks/useModal.js +8 -6
- package/ui/Blocks/Modal/hooks/useModal.js.map +1 -1
- package/ui/Blocks/Modal/index.js +7 -3
- package/ui/Blocks/Modal/index.js.map +1 -1
- package/ui/Blocks/Modal/styles.js +29 -16
- package/ui/Blocks/Modal/styles.js.map +1 -1
- package/ui/Blocks/Modal/utils.js +4 -1
- package/ui/Blocks/Modal/utils.js.map +1 -1
- package/ui/Blocks/Tabs/Tabs.js +13 -11
- package/ui/Blocks/Tabs/Tabs.js.map +1 -1
- package/ui/Blocks/Tabs/hooks/useTabs.js +6 -4
- package/ui/Blocks/Tabs/hooks/useTabs.js.map +1 -1
- package/ui/Blocks/Tabs/index.js +8 -3
- package/ui/Blocks/Tabs/index.js.map +1 -1
- package/ui/Blocks/Tabs/styles.js +19 -9
- package/ui/Blocks/Tabs/styles.js.map +1 -1
- package/ui/Elements/Alert/Alert.js +14 -10
- package/ui/Elements/Alert/Alert.js.map +1 -1
- package/ui/Elements/Alert/index.js +7 -2
- package/ui/Elements/Alert/index.js.map +1 -1
- package/ui/Elements/Alert/styles.js +29 -15
- package/ui/Elements/Alert/styles.js.map +1 -1
- package/ui/Elements/Avatar/Avatar.js +15 -8
- package/ui/Elements/Avatar/Avatar.js.map +1 -1
- package/ui/Elements/Avatar/index.js +7 -2
- package/ui/Elements/Avatar/index.js.map +1 -1
- package/ui/Elements/Badge/Badge.js +21 -13
- package/ui/Elements/Badge/Badge.js.map +1 -1
- package/ui/Elements/Badge/index.js +7 -2
- package/ui/Elements/Badge/index.js.map +1 -1
- package/ui/Elements/BorderedBox/BorderedBox.js +15 -7
- package/ui/Elements/BorderedBox/BorderedBox.js.map +1 -1
- package/ui/Elements/BorderedBox/index.js +7 -2
- package/ui/Elements/BorderedBox/index.js.map +1 -1
- package/ui/Elements/Button/Button.js +11 -7
- package/ui/Elements/Button/Button.js.map +1 -1
- package/ui/Elements/Button/index.js +7 -2
- package/ui/Elements/Button/index.js.map +1 -1
- package/ui/Elements/Button/styles.js +23 -14
- package/ui/Elements/Button/styles.js.map +1 -1
- package/ui/Elements/Card/Card.js +21 -14
- package/ui/Elements/Card/Card.js.map +1 -1
- package/ui/Elements/Card/index.js +9 -3
- package/ui/Elements/Card/index.js.map +1 -1
- package/ui/Elements/Card/styles.js +23 -13
- package/ui/Elements/Card/styles.js.map +1 -1
- package/ui/Elements/Dropdown/Dropdown.js +18 -10
- package/ui/Elements/Dropdown/Dropdown.js.map +1 -1
- package/ui/Elements/Dropdown/index.js +7 -2
- package/ui/Elements/Dropdown/index.js.map +1 -1
- package/ui/Elements/ErrorMessage/ErrorMessage.js +17 -9
- package/ui/Elements/ErrorMessage/ErrorMessage.js.map +1 -1
- package/ui/Elements/ErrorMessage/index.js +7 -2
- package/ui/Elements/ErrorMessage/index.js.map +1 -1
- package/ui/Elements/Icon/Icon.js +224 -214
- package/ui/Elements/Icon/Icon.js.map +1 -1
- package/ui/Elements/Icon/icons/Complaint.js +9 -0
- package/ui/Elements/Icon/icons/Complaint.js.map +1 -0
- package/ui/Elements/Icon/icons/Expeditions.js +9 -0
- package/ui/Elements/Icon/icons/Expeditions.js.map +1 -0
- package/ui/Elements/Icon/icons/FlagCZ.js +6 -4
- package/ui/Elements/Icon/icons/FlagCZ.js.map +1 -1
- package/ui/Elements/Icon/icons/FlagUSA.js +6 -4
- package/ui/Elements/Icon/icons/FlagUSA.js.map +1 -1
- package/ui/Elements/Icon/icons/HamburgerMenu.js +9 -0
- package/ui/Elements/Icon/icons/HamburgerMenu.js.map +1 -0
- package/ui/Elements/Icon/icons/HelpCircle1.js +9 -0
- package/ui/Elements/Icon/icons/HelpCircle1.js.map +1 -0
- package/ui/Elements/Icon/icons/Income.js +9 -0
- package/ui/Elements/Icon/icons/Income.js.map +1 -0
- package/ui/Elements/Icon/icons/Inventory.js +9 -0
- package/ui/Elements/Icon/icons/Inventory.js.map +1 -0
- package/ui/Elements/Icon/icons/MenuItems.js +9 -0
- package/ui/Elements/Icon/icons/MenuItems.js.map +1 -0
- package/ui/Elements/Icon/icons/MobileCancel.js +9 -0
- package/ui/Elements/Icon/icons/MobileCancel.js.map +1 -0
- package/ui/Elements/Icon/icons/Notification2.js +9 -0
- package/ui/Elements/Icon/icons/Notification2.js.map +1 -0
- package/ui/Elements/Icon/icons/Plus1.js +9 -0
- package/ui/Elements/Icon/icons/Plus1.js.map +1 -0
- package/ui/Elements/Icon/icons/Products.js +9 -0
- package/ui/Elements/Icon/icons/Products.js.map +1 -0
- package/ui/Elements/Icon/icons/Profile.js +9 -0
- package/ui/Elements/Icon/icons/Profile.js.map +1 -0
- package/ui/Elements/Icon/icons/Return.js +9 -0
- package/ui/Elements/Icon/icons/Return.js.map +1 -0
- package/ui/Elements/Icon/icons/Settings2.js +9 -0
- package/ui/Elements/Icon/icons/Settings2.js.map +1 -0
- package/ui/Elements/Icon/icons/Transfer.js +9 -0
- package/ui/Elements/Icon/icons/Transfer.js.map +1 -0
- package/ui/Elements/Icon/index.d.ts +16 -1
- package/ui/Elements/Icon/index.js +10 -5
- package/ui/Elements/Icon/index.js.map +1 -1
- package/ui/Elements/Image/Image.js +9 -5
- package/ui/Elements/Image/Image.js.map +1 -1
- package/ui/Elements/Image/index.js +7 -2
- package/ui/Elements/Image/index.js.map +1 -1
- package/ui/Elements/Label/Label.js +17 -10
- package/ui/Elements/Label/Label.js.map +1 -1
- package/ui/Elements/Label/index.js +8 -3
- package/ui/Elements/Label/index.js.map +1 -1
- package/ui/Elements/Line/Line.js +14 -6
- package/ui/Elements/Line/Line.js.map +1 -1
- package/ui/Elements/Line/index.js +7 -2
- package/ui/Elements/Line/index.js.map +1 -1
- package/ui/Elements/Link/Link.js +23 -15
- package/ui/Elements/Link/Link.js.map +1 -1
- package/ui/Elements/Link/index.js +7 -2
- package/ui/Elements/Link/index.js.map +1 -1
- package/ui/Elements/Logo/Logo.js +36 -28
- package/ui/Elements/Logo/Logo.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_black.png.js +5 -1
- package/ui/Elements/Logo/assets/mailship/logo_black.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_m.png.js +5 -1
- package/ui/Elements/Logo/assets/mailship/logo_m.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/logo_white.png.js +5 -1
- package/ui/Elements/Logo/assets/mailship/logo_white.png.js.map +1 -1
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailship/mailship-logo.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailstep/mailstep_black.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailstep/mailstep_white.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailstock/mailstock.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogo.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailwise/mailwiseLogoSmall.svg.js.map +1 -1
- package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg.js +6 -2
- package/ui/Elements/Logo/assets/mailwrap/mailwrapLogo.svg.js.map +1 -1
- package/ui/Elements/Logo/index.js +7 -2
- package/ui/Elements/Logo/index.js.map +1 -1
- package/ui/Elements/Pagination/Pagination.js +11 -7
- package/ui/Elements/Pagination/Pagination.js.map +1 -1
- package/ui/Elements/Pagination/index.js +7 -2
- package/ui/Elements/Pagination/index.js.map +1 -1
- package/ui/Elements/Pagination/styled.js +25 -14
- package/ui/Elements/Pagination/styled.js.map +1 -1
- package/ui/Elements/Paragraph/Paragraph.js +7 -3
- package/ui/Elements/Paragraph/Paragraph.js.map +1 -1
- package/ui/Elements/Paragraph/index.js +7 -2
- package/ui/Elements/Paragraph/index.js.map +1 -1
- package/ui/Elements/Portal/index.js +15 -6
- package/ui/Elements/Portal/index.js.map +1 -1
- package/ui/Elements/ProgressBar/ProgressBar.js +8 -4
- package/ui/Elements/ProgressBar/ProgressBar.js.map +1 -1
- package/ui/Elements/ProgressBar/index.js +7 -2
- package/ui/Elements/ProgressBar/index.js.map +1 -1
- package/ui/Elements/ProgressBar/styles.js +22 -14
- package/ui/Elements/ProgressBar/styles.js.map +1 -1
- package/ui/Elements/SimpleLink/SimpleLink.js +15 -7
- package/ui/Elements/SimpleLink/SimpleLink.js.map +1 -1
- package/ui/Elements/SimpleLink/index.js +7 -2
- package/ui/Elements/SimpleLink/index.js.map +1 -1
- package/ui/Elements/SpaceAround/SpaceAround.js +20 -12
- package/ui/Elements/SpaceAround/SpaceAround.js.map +1 -1
- package/ui/Elements/SpaceAround/index.js +7 -2
- package/ui/Elements/SpaceAround/index.js.map +1 -1
- package/ui/Elements/Spinner/Spinner.js +10 -4
- package/ui/Elements/Spinner/Spinner.js.map +1 -1
- package/ui/Elements/Spinner/index.js +7 -2
- package/ui/Elements/Spinner/index.js.map +1 -1
- package/ui/Elements/Spinner/styles.js +16 -9
- package/ui/Elements/Spinner/styles.js.map +1 -1
- package/ui/Elements/Tag/Tag.js +16 -7
- package/ui/Elements/Tag/Tag.js.map +1 -1
- package/ui/Elements/Tag/index.js +7 -2
- package/ui/Elements/Tag/index.js.map +1 -1
- package/ui/Elements/Tag/palletes.js +3 -1
- package/ui/Elements/Tag/palletes.js.map +1 -1
- package/ui/Elements/Text/Text.js +9 -5
- package/ui/Elements/Text/Text.js.map +1 -1
- package/ui/Elements/Toast/Toast.js +18 -10
- package/ui/Elements/Toast/Toast.js.map +1 -1
- package/ui/Elements/Toast/index.js +7 -2
- package/ui/Elements/Toast/index.js.map +1 -1
- package/ui/Elements/Toggle/Toggle.js +23 -15
- package/ui/Elements/Toggle/Toggle.js.map +1 -1
- package/ui/Elements/Toggle/index.js +7 -2
- package/ui/Elements/Toggle/index.js.map +1 -1
- package/ui/Elements/Typography/Typography.js +31 -17
- package/ui/Elements/Typography/Typography.js.map +1 -1
- package/ui/Elements/Typography/index.js +19 -3
- package/ui/Elements/Typography/index.js.map +1 -1
- package/ui/Forms/Checkbox/Checkbox.js +13 -9
- package/ui/Forms/Checkbox/Checkbox.js.map +1 -1
- package/ui/Forms/Checkbox/index.js +7 -2
- package/ui/Forms/Checkbox/index.js.map +1 -1
- package/ui/Forms/Checkbox/styles.js +18 -9
- package/ui/Forms/Checkbox/styles.js.map +1 -1
- package/ui/Forms/Input/Input.js +20 -18
- package/ui/Forms/Input/Input.js.map +1 -1
- package/ui/Forms/Input/index.js +7 -2
- package/ui/Forms/Input/index.js.map +1 -1
- package/ui/Forms/Input/styles.js +32 -19
- package/ui/Forms/Input/styles.js.map +1 -1
- package/ui/Forms/RadioButton/RadioButton.js +10 -6
- package/ui/Forms/RadioButton/RadioButton.js.map +1 -1
- package/ui/Forms/RadioButton/index.js +7 -2
- package/ui/Forms/RadioButton/index.js.map +1 -1
- package/ui/Forms/RadioButton/styles.js +20 -9
- package/ui/Forms/RadioButton/styles.js.map +1 -1
- package/ui/ThemeProvider/ThemeProvider.js +9 -5
- package/ui/ThemeProvider/ThemeProvider.js.map +1 -1
- package/ui/ThemeProvider/index.js +6 -2
- package/ui/ThemeProvider/index.js.map +1 -1
- package/ui/ThemeProvider/themes/default.js +6 -1
- package/ui/ThemeProvider/themes/default.js.map +1 -1
- package/ui/ThemeProvider/themes/index.js +11 -7
- package/ui/ThemeProvider/themes/index.js.map +1 -1
- package/ui/ThemeProvider/themes/light.js +5 -1
- package/ui/ThemeProvider/themes/light.js.map +1 -1
- package/ui/ThemeProvider/themes/mailwise.js +5 -1
- package/ui/ThemeProvider/themes/mailwise.js.map +1 -1
- package/ui/dts/Elements/Card/stories/Card.stories.d.ts +0 -1
- package/ui/dts/Elements/Icon/icons/Complaint.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Expeditions.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/HamburgerMenu.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/HelpCircle1.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Income.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Inventory.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/MenuItems.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/MobileCancel.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Notification2.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Plus1.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Products.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Profile.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Return.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Settings2.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/Transfer.d.ts +3 -0
- package/ui/dts/Elements/Icon/icons/index.d.ts +15 -0
- package/ui/dts/Elements/Icon/index.d.ts +1 -1
- package/ui/dts/ThemeProvider/themes/default.d.ts +1 -0
- package/ui/dts/ThemeProvider/themes/index.d.ts +1 -0
- package/ui/index.d.ts +1 -1
- package/ui/index.js +143 -45
- package/ui/index.js.map +1 -1
- package/ui/utils/CreateRgba/createRgba.js +15 -6
- package/ui/utils/CreateRgba/createRgba.js.map +1 -1
- package/ui/utils/KeyPress/KeyPress.js +8 -4
- package/ui/utils/KeyPress/KeyPress.js.map +1 -1
- package/ui/utils/KeyPress/index.js +6 -2
- package/ui/utils/KeyPress/index.js.map +1 -1
- package/ui/utils/index.js +11 -5
- package/ui/utils/index.js.map +1 -1
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
4
|
|
|
5
|
+
var ImageList = require('./ImageList.js');
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.default = ImageList.ImageList;
|
|
6
10
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -1,8 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
import styled from '@xstyled/styled-components';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
4
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
var ImageListContainer = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__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"])));
|
|
5
11
|
var templateObject_1;
|
|
6
12
|
|
|
7
|
-
|
|
13
|
+
exports.ImageListContainer = ImageListContainer;
|
|
8
14
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/ImageList/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled from '@xstyled/styled-components';\nexport 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\"])));\nvar templateObject_1;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/ImageList/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled from '@xstyled/styled-components';\nexport 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\"])));\nvar templateObject_1;\n//# sourceMappingURL=styles.js.map"],"names":["styled","__makeTemplateObject"],"mappings":";;;;;;;;;AAEU,IAAC,kBAAkB,GAAGA,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,gLAAgL,CAAC,EAAE,CAAC,gLAAgL,CAAC,CAAC,CAAC,EAAE;AACld,IAAI,gBAAgB;;;;"}
|
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var Button = require('../../Elements/Button/Button.js');
|
|
5
|
+
var Modal = require('../Modal/Modal.js');
|
|
6
|
+
require('react');
|
|
7
|
+
require('swiper/css');
|
|
8
|
+
var react = require('swiper/react');
|
|
9
|
+
var styles = require('./styles.js');
|
|
8
10
|
|
|
9
11
|
var LightBox = function (_a) {
|
|
10
12
|
var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
|
|
11
13
|
if (!(images === null || images === void 0 ? void 0 : images.length))
|
|
12
14
|
return null;
|
|
13
|
-
return (jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, mobileFullscreen: true, miniCloseBtn: true, withCloseIcon: true, children: jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
|
|
15
|
+
return (jsxRuntime.jsx(Modal.Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, mobileFullscreen: true, miniCloseBtn: true, withCloseIcon: true, children: jsxRuntime.jsx(react.Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
|
|
14
16
|
var _a;
|
|
15
|
-
return (jsx(SwiperSlide, { children: jsxs(Container, { children: [jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (jsx(ButtonContainer, { children: jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
|
|
17
|
+
return (jsxRuntime.jsx(react.SwiperSlide, { children: jsxRuntime.jsxs(styles.Container, { children: [jsxRuntime.jsx(styles.Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (jsxRuntime.jsx(styles.ButtonContainer, { children: jsxRuntime.jsx(Button.default, { onClick: lightBoxAction(item.id), appearance: "primaryLight", children: lightBoxActionTitle }) }))] }) }, item.id));
|
|
16
18
|
}) }) }));
|
|
17
19
|
};
|
|
18
20
|
|
|
19
|
-
|
|
21
|
+
exports.LightBox = LightBox;
|
|
20
22
|
//# sourceMappingURL=LightBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LightBox.js","sources":["../../../../packages/ui/Blocks/LightBox/LightBox.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Button } from '../../Elements/Button';\nimport Modal from '../Modal';\nimport 'swiper/css';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport { Container, Image, ButtonContainer } from './styles';\nexport var LightBox = function (_a) {\n var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;\n if (!(images === null || images === void 0 ? void 0 : images.length))\n return null;\n return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, mobileFullscreen: true, miniCloseBtn: true, withCloseIcon: true, children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {\n var _a;\n return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: \"lazy\", alt: \"\" }), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: \"primaryLight\", children: lightBoxActionTitle }) }))] }) }, item.id));\n }) }) }));\n};\n//# sourceMappingURL=LightBox.js.map"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"LightBox.js","sources":["../../../../packages/ui/Blocks/LightBox/LightBox.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Button } from '../../Elements/Button';\nimport Modal from '../Modal';\nimport 'swiper/css';\nimport { Swiper, SwiperSlide } from 'swiper/react';\nimport { Container, Image, ButtonContainer } from './styles';\nexport var LightBox = function (_a) {\n var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;\n if (!(images === null || images === void 0 ? void 0 : images.length))\n return null;\n return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, mobileFullscreen: true, miniCloseBtn: true, withCloseIcon: true, children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {\n var _a;\n return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: \"lazy\", alt: \"\" }), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: \"primaryLight\", children: lightBoxActionTitle }) }))] }) }, item.id));\n }) }) }));\n};\n//# sourceMappingURL=LightBox.js.map"],"names":["_jsx","Modal","Swiper","SwiperSlide","_jsxs","Container","Image","ButtonContainer","Button"],"mappings":";;;;;;;;;;AAMU,IAAC,QAAQ,GAAG,UAAU,EAAE,EAAE;AACpC,IAAI,IAAI,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,eAAe,GAAG,EAAE,CAAC,eAAe,EAAE,cAAc,GAAG,EAAE,CAAC,cAAc,EAAE,mBAAmB,GAAG,EAAE,CAAC,mBAAmB,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,YAAY,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AACpP,IAAI,IAAI,EAAE,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC;AACxE,QAAQ,OAAO,IAAI,CAAC;AACpB,IAAI,QAAQA,cAAI,CAACC,WAAK,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAED,cAAI,CAACE,YAAM,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,UAAU,IAAI,EAAE;AAC5Q,gBAAgB,IAAI,EAAE,CAAC;AACvB,gBAAgB,QAAQF,cAAI,CAACG,iBAAW,EAAE,EAAE,QAAQ,EAAEC,eAAK,CAACC,gBAAS,EAAE,EAAE,QAAQ,EAAE,CAACL,cAAI,CAACM,YAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,IAAI,cAAc,IAAI,mBAAmB,KAAKN,cAAI,CAACO,sBAAe,EAAE,EAAE,QAAQ,EAAEP,cAAI,CAACQ,cAAM,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,cAAc,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,EAAE;AACnb,aAAa,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACtB;;;;"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
require('../../Modal/Modal.js');
|
|
5
|
+
var useModal = require('../../Modal/hooks/useModal.js');
|
|
4
6
|
|
|
5
7
|
var useLightBox = function () {
|
|
6
|
-
var _a = useModal(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;
|
|
7
|
-
var onOpenLightBox = useCallback(function (index) {
|
|
8
|
+
var _a = useModal.useModal(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;
|
|
9
|
+
var onOpenLightBox = React.useCallback(function (index) {
|
|
8
10
|
if (index === void 0) { index = 0; }
|
|
9
11
|
return function () {
|
|
10
12
|
onOpen({ initialSlide: index });
|
|
@@ -18,5 +20,5 @@ var useLightBox = function () {
|
|
|
18
20
|
};
|
|
19
21
|
};
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
exports.useLightBox = useLightBox;
|
|
22
24
|
//# sourceMappingURL=useLightBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLightBox.js","sources":["../../../../../packages/ui/Blocks/LightBox/hooks/useLightBox.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useModal } from '../../Modal';\nexport var useLightBox = function () {\n var _a = useModal(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;\n var onOpenLightBox = useCallback(function (index) {\n if (index === void 0) { index = 0; }\n return function () {\n onOpen({ initialSlide: index });\n };\n }, [onOpen]);\n return {\n onOpenLightBox: onOpenLightBox,\n onCloseLightBox: onClose,\n isLightBoxOpen: isOpen,\n lightBoxData: data\n };\n};\n//# sourceMappingURL=useLightBox.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useLightBox.js","sources":["../../../../../packages/ui/Blocks/LightBox/hooks/useLightBox.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useModal } from '../../Modal';\nexport var useLightBox = function () {\n var _a = useModal(), isOpen = _a.isOpen, onOpen = _a.onOpen, onClose = _a.onClose, data = _a.data;\n var onOpenLightBox = useCallback(function (index) {\n if (index === void 0) { index = 0; }\n return function () {\n onOpen({ initialSlide: index });\n };\n }, [onOpen]);\n return {\n onOpenLightBox: onOpenLightBox,\n onCloseLightBox: onClose,\n isLightBoxOpen: isOpen,\n lightBoxData: data\n };\n};\n//# sourceMappingURL=useLightBox.js.map"],"names":["useModal","useCallback"],"mappings":";;;;;;AAEU,IAAC,WAAW,GAAG,YAAY;AACrC,IAAI,IAAI,EAAE,GAAGA,iBAAQ,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,EAAE,CAAC,MAAM,EAAE,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,IAAI,GAAG,EAAE,CAAC,IAAI,CAAC;AACtG,IAAI,IAAI,cAAc,GAAGC,iBAAW,CAAC,UAAU,KAAK,EAAE;AACtD,QAAQ,IAAI,KAAK,KAAK,KAAK,CAAC,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE;AAC5C,QAAQ,OAAO,YAAY;AAC3B,YAAY,MAAM,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;AAC5C,SAAS,CAAC;AACV,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACjB,IAAI,OAAO;AACX,QAAQ,cAAc,EAAE,cAAc;AACtC,QAAQ,eAAe,EAAE,OAAO;AAChC,QAAQ,cAAc,EAAE,MAAM;AAC9B,QAAQ,YAAY,EAAE,IAAI;AAC1B,KAAK,CAAC;AACN;;;;"}
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
import 'react';
|
|
3
|
-
import '../Modal/Modal.js';
|
|
1
|
+
'use strict';
|
|
4
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
4
|
|
|
5
|
+
var LightBox = require('./LightBox.js');
|
|
6
|
+
require('react');
|
|
7
|
+
require('../Modal/Modal.js');
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
exports.default = LightBox.LightBox;
|
|
8
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
import styled from '@xstyled/styled-components';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
var Container = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n width: 100%;\n height: 100%;\n position: relative;\n"], ["\n width: 100%;\n height: 100%;\n position: relative;\n"])));
|
|
11
|
+
var Image = styled__default.default.img(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n width: 100%;\n height: 100%;\n"], ["\n width: 100%;\n height: 100%;\n"])));
|
|
12
|
+
var ButtonContainer = styled__default.default.div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: -60px;\n"], ["\n width: 100%;\n display: flex;\n justify-content: center;\n position: absolute;\n bottom: -60px;\n"])));
|
|
7
13
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
8
14
|
|
|
9
|
-
|
|
15
|
+
exports.ButtonContainer = ButtonContainer;
|
|
16
|
+
exports.Container = Container;
|
|
17
|
+
exports.Image = Image;
|
|
10
18
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/LightBox/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n width: 100%;\\n height: 100%;\\n position: relative;\\n\"], [\"\\n width: 100%;\\n height: 100%;\\n position: relative;\\n\"])));\nexport var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n width: 100%;\\n height: 100%;\\n\"], [\"\\n width: 100%;\\n height: 100%;\\n\"])));\nexport var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n position: absolute;\\n bottom: -60px;\\n\"], [\"\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n position: absolute;\\n bottom: -60px;\\n\"])));\nvar templateObject_1, templateObject_2, templateObject_3;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/LightBox/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled from '@xstyled/styled-components';\nexport var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n width: 100%;\\n height: 100%;\\n position: relative;\\n\"], [\"\\n width: 100%;\\n height: 100%;\\n position: relative;\\n\"])));\nexport var Image = styled.img(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n width: 100%;\\n height: 100%;\\n\"], [\"\\n width: 100%;\\n height: 100%;\\n\"])));\nexport var ButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n position: absolute;\\n bottom: -60px;\\n\"], [\"\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n position: absolute;\\n bottom: -60px;\\n\"])));\nvar templateObject_1, templateObject_2, templateObject_3;\n//# sourceMappingURL=styles.js.map"],"names":["styled","__makeTemplateObject"],"mappings":";;;;;;;;;AAEU,IAAC,SAAS,GAAGA,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,4DAA4D,CAAC,EAAE,CAAC,4DAA4D,CAAC,CAAC,CAAC,EAAE;AACvN,IAAC,KAAK,GAAGD,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,qCAAqC,CAAC,EAAE,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE;AACrK,IAAC,eAAe,GAAGD,uBAAM,CAAC,GAAG,CAAC,gBAAgB,KAAK,gBAAgB,GAAGC,0BAAoB,CAAC,CAAC,2GAA2G,CAAC,EAAE,CAAC,2GAA2G,CAAC,CAAC,CAAC,EAAE;AACrU,IAAI,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB;;;;;;"}
|
package/ui/Blocks/Modal/Modal.js
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
import { memo, useCallback, useMemo, useEffect } from 'react';
|
|
3
|
-
import Icon from '../../Elements/Icon/Icon.js';
|
|
4
|
-
import 'tslib';
|
|
5
|
-
import { DialogOverlay, DialogWindow, HeaderContainer, TitleContainer, H4, ContentContainer, ButtonsContainer, CloseButton } from './styles.js';
|
|
6
|
-
import { x } from '@xstyled/styled-components';
|
|
7
|
-
import Button from '../../Elements/Button/Button.js';
|
|
8
|
-
import { Portal } from '../../Elements/Portal/index.js';
|
|
9
|
-
import { useClickOutside } from './hooks/useClickOutside.js';
|
|
10
|
-
import { widthMap, topSpaceMap } from './utils.js';
|
|
1
|
+
'use strict';
|
|
11
2
|
|
|
12
|
-
var
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var Icon = require('../../Elements/Icon/Icon.js');
|
|
6
|
+
require('tslib');
|
|
7
|
+
var styles = require('./styles.js');
|
|
8
|
+
var styled = require('@xstyled/styled-components');
|
|
9
|
+
var Button = require('../../Elements/Button/Button.js');
|
|
10
|
+
var index = require('../../Elements/Portal/index.js');
|
|
11
|
+
var useClickOutside = require('./hooks/useClickOutside.js');
|
|
12
|
+
var utils = require('./utils.js');
|
|
13
|
+
|
|
14
|
+
var Modal = React.memo(function (_a) {
|
|
13
15
|
var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, _d = _a.topSpace, topSpace = _d === void 0 ? 'default' : _d, onClose = _a.onClose, _e = _a.hasFooter, hasFooter = _e === void 0 ? true : _e, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, _g = _a.whiteBg, whiteBg = _g === void 0 ? false : _g, _h = _a.miniCloseBtn, miniCloseBtn = _h === void 0 ? false : _h, _j = _a.ignoreClickOutside, ignoreClickOutside = _j === void 0 ? false : _j, _k = _a.closeEverywhere, closeEverywhere = _k === void 0 ? false : _k, _l = _a.withCloseIcon, withCloseIcon = _l === void 0 ? true : _l, _m = _a.mobileFullscreen, mobileFullscreen = _m === void 0 ? false : _m, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;
|
|
14
|
-
var closeDialog = useCallback(function () {
|
|
16
|
+
var closeDialog = React.useCallback(function () {
|
|
15
17
|
if (onClose) {
|
|
16
18
|
onClose();
|
|
17
19
|
}
|
|
@@ -19,12 +21,12 @@ var Modal = memo(function (_a) {
|
|
|
19
21
|
onCancel();
|
|
20
22
|
}
|
|
21
23
|
}, [onClose, onCancel]);
|
|
22
|
-
var dialogStyle = useMemo(function () { return ({ width: widthMap[width] }); }, [width]);
|
|
23
|
-
var dialogRef = useClickOutside({ onClose: closeDialog, ignoreClickOutside: ignoreClickOutside, closeCurrent: true, allowScrollbarClick: true });
|
|
24
|
-
var onDialogConfirmClick = useCallback(function () {
|
|
24
|
+
var dialogStyle = React.useMemo(function () { return ({ width: utils.widthMap[width] }); }, [width]);
|
|
25
|
+
var dialogRef = useClickOutside.useClickOutside({ onClose: closeDialog, ignoreClickOutside: ignoreClickOutside, closeCurrent: true, allowScrollbarClick: true });
|
|
26
|
+
var onDialogConfirmClick = React.useCallback(function () {
|
|
25
27
|
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(closeDialog);
|
|
26
28
|
}, [onConfirm, closeDialog]);
|
|
27
|
-
useEffect(function () {
|
|
29
|
+
React.useEffect(function () {
|
|
28
30
|
window.addEventListener('popstate', closeDialog);
|
|
29
31
|
return function () {
|
|
30
32
|
window.removeEventListener('popstate', closeDialog);
|
|
@@ -33,8 +35,8 @@ var Modal = memo(function (_a) {
|
|
|
33
35
|
if (!isShown) {
|
|
34
36
|
return null;
|
|
35
37
|
}
|
|
36
|
-
return (jsx(Portal, { children: jsx(DialogOverlay, { backgroundColor: overlayColor, children: jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, "$whiteBg": whiteBg, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$mobileFullscreen": mobileFullscreen, children: [title && hasHeader && (jsx(HeaderContainer, { topSpace: topSpaceMap[topSpace], children: jsxs(TitleContainer, { children: [titleIcon && (jsx(x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? jsx(Icon, { icon: titleIcon, fill: "blue2" }) : titleIcon })), jsx(H4, { children: title })] }) })), jsx(ContentContainer, { topSpace: topSpaceMap[topSpace], "$mobileFullscreen": mobileFullscreen, children: children }), hasFooter && (onCancel || onConfirm) && (jsxs(ButtonsContainer, { children: [onCancel && (jsx(Button, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (jsx(Button, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })), hasHeader && !closeEverywhere && withCloseIcon && (jsx(CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: jsx(Icon, { icon: "close", size: miniCloseBtn ? '20px' : '26px' }) }))] }) }) }));
|
|
38
|
+
return (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsx(styles.DialogOverlay, { backgroundColor: overlayColor, children: jsxRuntime.jsxs(styles.DialogWindow, { ref: dialogRef, style: dialogStyle, "$whiteBg": whiteBg, "data-cy": "dialogWindow", onClick: closeEverywhere ? closeDialog : undefined, "$minWidth": minWidth, "$minHeight": minHeight, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$mobileFullscreen": mobileFullscreen, children: [title && hasHeader && (jsxRuntime.jsx(styles.HeaderContainer, { topSpace: utils.topSpaceMap[topSpace], children: jsxRuntime.jsxs(styles.TitleContainer, { children: [titleIcon && (jsxRuntime.jsx(styled.x.div, { as: "span", className: "icon", children: typeof titleIcon === 'string' ? jsxRuntime.jsx(Icon.default, { icon: titleIcon, fill: "blue2" }) : titleIcon })), jsxRuntime.jsx(styles.H4, { children: title })] }) })), jsxRuntime.jsx(styles.ContentContainer, { topSpace: utils.topSpaceMap[topSpace], "$mobileFullscreen": mobileFullscreen, children: children }), hasFooter && (onCancel || onConfirm) && (jsxRuntime.jsxs(styles.ButtonsContainer, { children: [onCancel && (jsxRuntime.jsx(Button.default, { type: "button", onClick: onCancel, isLoading: isLoading, "data-cy": "cancelBtn", appearance: "primaryLight", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (jsxRuntime.jsx(Button.default, { type: "button", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, "data-cy": "submitBtn", children: confirmLabel ? confirmLabel : 'Submit' }))] })), hasHeader && !closeEverywhere && withCloseIcon && (jsxRuntime.jsx(styles.CloseButton, { onClick: closeDialog, "data-cy": "dialogCloseBtn", children: jsxRuntime.jsx(Icon.default, { icon: "close", size: miniCloseBtn ? '20px' : '26px' }) }))] }) }) }));
|
|
37
39
|
});
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
exports.Modal = Modal;
|
|
40
42
|
//# sourceMappingURL=Modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sources":["../../../../packages/ui/Blocks/Modal/Modal.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { memo, useCallback, useMemo, useEffect } from 'react';\nimport { Icon } from '../../Elements/Icon';\nimport { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, H4, } from './styles';\nimport { x } from '@xstyled/styled-components';\nimport { Button } from '../../Elements/Button';\nimport { Portal } from '../../Elements/Portal';\nimport { useClickOutside } from './hooks/useClickOutside';\nimport { topSpaceMap, widthMap } from './utils';\nexport var Modal = memo(function (_a) {\n var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, _d = _a.topSpace, topSpace = _d === void 0 ? 'default' : _d, onClose = _a.onClose, _e = _a.hasFooter, hasFooter = _e === void 0 ? true : _e, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, _g = _a.whiteBg, whiteBg = _g === void 0 ? false : _g, _h = _a.miniCloseBtn, miniCloseBtn = _h === void 0 ? false : _h, _j = _a.ignoreClickOutside, ignoreClickOutside = _j === void 0 ? false : _j, _k = _a.closeEverywhere, closeEverywhere = _k === void 0 ? false : _k, _l = _a.withCloseIcon, withCloseIcon = _l === void 0 ? true : _l, _m = _a.mobileFullscreen, mobileFullscreen = _m === void 0 ? false : _m, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;\n var closeDialog = useCallback(function () {\n if (onClose) {\n onClose();\n }\n else if (onCancel) {\n onCancel();\n }\n }, [onClose, onCancel]);\n var dialogStyle = useMemo(function () { return ({ width: widthMap[width] }); }, [width]);\n var dialogRef = useClickOutside({ onClose: closeDialog, ignoreClickOutside: ignoreClickOutside, closeCurrent: true, allowScrollbarClick: true });\n var onDialogConfirmClick = useCallback(function () {\n onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(closeDialog);\n }, [onConfirm, closeDialog]);\n useEffect(function () {\n window.addEventListener('popstate', closeDialog);\n return function () {\n window.removeEventListener('popstate', closeDialog);\n };\n }, []);\n if (!isShown) {\n return null;\n }\n return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, \"$whiteBg\": whiteBg, \"data-cy\": \"dialogWindow\", onClick: closeEverywhere ? closeDialog : undefined, \"$minWidth\": minWidth, \"$minHeight\": minHeight, \"$maxWidth\": maxWidth, \"$maxHeight\": maxHeight, \"$mobileFullscreen\": mobileFullscreen, children: [title && hasHeader && (_jsx(HeaderContainer, { topSpace: topSpaceMap[topSpace], children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: \"span\", className: \"icon\", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: \"blue2\" }) : titleIcon })), _jsx(H4, { children: title })] }) })), _jsx(ContentContainer, { topSpace: topSpaceMap[topSpace], \"$mobileFullscreen\": mobileFullscreen, children: children }), hasFooter && (onCancel || onConfirm) && (_jsxs(ButtonsContainer, { children: [onCancel && (_jsx(Button, { type: \"button\", onClick: onCancel, isLoading: isLoading, \"data-cy\": \"cancelBtn\", appearance: \"primaryLight\", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: \"button\", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, \"data-cy\": \"submitBtn\", children: confirmLabel ? confirmLabel : 'Submit' }))] })), hasHeader && !closeEverywhere && withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, \"data-cy\": \"dialogCloseBtn\", children: _jsx(Icon, { icon: \"close\", size: miniCloseBtn ? '20px' : '26px' }) }))] }) }) }));\n});\n//# sourceMappingURL=Modal.js.map"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Modal.js","sources":["../../../../packages/ui/Blocks/Modal/Modal.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { memo, useCallback, useMemo, useEffect } from 'react';\nimport { Icon } from '../../Elements/Icon';\nimport { DialogOverlay, DialogWindow, HeaderContainer, ButtonsContainer, ContentContainer, TitleContainer, CloseButton, H4, } from './styles';\nimport { x } from '@xstyled/styled-components';\nimport { Button } from '../../Elements/Button';\nimport { Portal } from '../../Elements/Portal';\nimport { useClickOutside } from './hooks/useClickOutside';\nimport { topSpaceMap, widthMap } from './utils';\nexport var Modal = memo(function (_a) {\n var children = _a.children, _b = _a.isShown, isShown = _b === void 0 ? true : _b, onCancel = _a.onCancel, title = _a.title, titleIcon = _a.titleIcon, onConfirm = _a.onConfirm, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, isLoading = _a.isLoading, isConfirmDisabled = _a.isConfirmDisabled, _c = _a.width, width = _c === void 0 ? 'narrow' : _c, _d = _a.topSpace, topSpace = _d === void 0 ? 'default' : _d, onClose = _a.onClose, _e = _a.hasFooter, hasFooter = _e === void 0 ? true : _e, _f = _a.hasHeader, hasHeader = _f === void 0 ? true : _f, _g = _a.whiteBg, whiteBg = _g === void 0 ? false : _g, _h = _a.miniCloseBtn, miniCloseBtn = _h === void 0 ? false : _h, _j = _a.ignoreClickOutside, ignoreClickOutside = _j === void 0 ? false : _j, _k = _a.closeEverywhere, closeEverywhere = _k === void 0 ? false : _k, _l = _a.withCloseIcon, withCloseIcon = _l === void 0 ? true : _l, _m = _a.mobileFullscreen, mobileFullscreen = _m === void 0 ? false : _m, overlayColor = _a.overlayColor, minWidth = _a.minWidth, minHeight = _a.minHeight, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight;\n var closeDialog = useCallback(function () {\n if (onClose) {\n onClose();\n }\n else if (onCancel) {\n onCancel();\n }\n }, [onClose, onCancel]);\n var dialogStyle = useMemo(function () { return ({ width: widthMap[width] }); }, [width]);\n var dialogRef = useClickOutside({ onClose: closeDialog, ignoreClickOutside: ignoreClickOutside, closeCurrent: true, allowScrollbarClick: true });\n var onDialogConfirmClick = useCallback(function () {\n onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(closeDialog);\n }, [onConfirm, closeDialog]);\n useEffect(function () {\n window.addEventListener('popstate', closeDialog);\n return function () {\n window.removeEventListener('popstate', closeDialog);\n };\n }, []);\n if (!isShown) {\n return null;\n }\n return (_jsx(Portal, { children: _jsx(DialogOverlay, { backgroundColor: overlayColor, children: _jsxs(DialogWindow, { ref: dialogRef, style: dialogStyle, \"$whiteBg\": whiteBg, \"data-cy\": \"dialogWindow\", onClick: closeEverywhere ? closeDialog : undefined, \"$minWidth\": minWidth, \"$minHeight\": minHeight, \"$maxWidth\": maxWidth, \"$maxHeight\": maxHeight, \"$mobileFullscreen\": mobileFullscreen, children: [title && hasHeader && (_jsx(HeaderContainer, { topSpace: topSpaceMap[topSpace], children: _jsxs(TitleContainer, { children: [titleIcon && (_jsx(x.div, { as: \"span\", className: \"icon\", children: typeof titleIcon === 'string' ? _jsx(Icon, { icon: titleIcon, fill: \"blue2\" }) : titleIcon })), _jsx(H4, { children: title })] }) })), _jsx(ContentContainer, { topSpace: topSpaceMap[topSpace], \"$mobileFullscreen\": mobileFullscreen, children: children }), hasFooter && (onCancel || onConfirm) && (_jsxs(ButtonsContainer, { children: [onCancel && (_jsx(Button, { type: \"button\", onClick: onCancel, isLoading: isLoading, \"data-cy\": \"cancelBtn\", appearance: \"primaryLight\", children: cancelLabel ? cancelLabel : 'Cancel' })), onConfirm && (_jsx(Button, { type: \"button\", onClick: onDialogConfirmClick, isLoading: isLoading, disabled: isConfirmDisabled, \"data-cy\": \"submitBtn\", children: confirmLabel ? confirmLabel : 'Submit' }))] })), hasHeader && !closeEverywhere && withCloseIcon && (_jsx(CloseButton, { onClick: closeDialog, \"data-cy\": \"dialogCloseBtn\", children: _jsx(Icon, { icon: \"close\", size: miniCloseBtn ? '20px' : '26px' }) }))] }) }) }));\n});\n//# sourceMappingURL=Modal.js.map"],"names":["memo","useCallback","useMemo","widthMap","useClickOutside","useEffect","_jsx","Portal","DialogOverlay","_jsxs","DialogWindow","HeaderContainer","topSpaceMap","TitleContainer","x","Icon","H4","ContentContainer","ButtonsContainer","Button","CloseButton"],"mappings":"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"}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
2
4
|
|
|
3
5
|
var useClickOutside = function (_a) {
|
|
4
6
|
var onClose = _a.onClose, parentRef = _a.parentRef, _b = _a.ignoreClickOutside, ignoreClickOutside = _b === void 0 ? false : _b, _c = _a.closeCurrent, closeCurrent = _c === void 0 ? false : _c, _d = _a.allowScrollbarClick, allowScrollbarClick = _d === void 0 ? false : _d;
|
|
5
|
-
var elementRef = useRef(null);
|
|
7
|
+
var elementRef = React.useRef(null);
|
|
6
8
|
var onCloseModal = !ignoreClickOutside ? onClose : undefined;
|
|
7
|
-
var handleClickOutside = useCallback(function (e) {
|
|
9
|
+
var handleClickOutside = React.useCallback(function (e) {
|
|
8
10
|
var _a;
|
|
9
11
|
var ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;
|
|
10
12
|
if (!ignoreEvent &&
|
|
@@ -14,12 +16,12 @@ var useClickOutside = function (_a) {
|
|
|
14
16
|
closeCurrent ? e.target.contains(elementRef.current) && (onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal()) : onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
|
|
15
17
|
}
|
|
16
18
|
}, [allowScrollbarClick, parentRef, closeCurrent, onCloseModal]);
|
|
17
|
-
var keyPress = useCallback(function (e) {
|
|
19
|
+
var keyPress = React.useCallback(function (e) {
|
|
18
20
|
if (e.key === 'Escape') {
|
|
19
21
|
onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();
|
|
20
22
|
}
|
|
21
23
|
}, [onCloseModal]);
|
|
22
|
-
useEffect(function () {
|
|
24
|
+
React.useEffect(function () {
|
|
23
25
|
document.addEventListener('mousedown', handleClickOutside);
|
|
24
26
|
document.addEventListener('keydown', keyPress);
|
|
25
27
|
return function () {
|
|
@@ -30,5 +32,5 @@ var useClickOutside = function (_a) {
|
|
|
30
32
|
return elementRef;
|
|
31
33
|
};
|
|
32
34
|
|
|
33
|
-
|
|
35
|
+
exports.useClickOutside = useClickOutside;
|
|
34
36
|
//# sourceMappingURL=useClickOutside.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useClickOutside.js","sources":["../../../../../packages/ui/Blocks/Modal/hooks/useClickOutside.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nexport var useClickOutside = function (_a) {\n var onClose = _a.onClose, parentRef = _a.parentRef, _b = _a.ignoreClickOutside, ignoreClickOutside = _b === void 0 ? false : _b, _c = _a.closeCurrent, closeCurrent = _c === void 0 ? false : _c, _d = _a.allowScrollbarClick, allowScrollbarClick = _d === void 0 ? false : _d;\n var elementRef = useRef(null);\n var onCloseModal = !ignoreClickOutside ? onClose : undefined;\n var handleClickOutside = useCallback(function (e) {\n var _a;\n var ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;\n if (!ignoreEvent &&\n elementRef.current &&\n !elementRef.current.contains(e.target) &&\n !((_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {\n closeCurrent ? e.target.contains(elementRef.current) && (onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal()) : onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();\n }\n }, [allowScrollbarClick, parentRef, closeCurrent, onCloseModal]);\n var keyPress = useCallback(function (e) {\n if (e.key === 'Escape') {\n onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();\n }\n }, [onCloseModal]);\n useEffect(function () {\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('keydown', keyPress);\n return function () {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('keydown', keyPress);\n };\n }, [handleClickOutside, keyPress]);\n return elementRef;\n};\n//# sourceMappingURL=useClickOutside.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useClickOutside.js","sources":["../../../../../packages/ui/Blocks/Modal/hooks/useClickOutside.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nexport var useClickOutside = function (_a) {\n var onClose = _a.onClose, parentRef = _a.parentRef, _b = _a.ignoreClickOutside, ignoreClickOutside = _b === void 0 ? false : _b, _c = _a.closeCurrent, closeCurrent = _c === void 0 ? false : _c, _d = _a.allowScrollbarClick, allowScrollbarClick = _d === void 0 ? false : _d;\n var elementRef = useRef(null);\n var onCloseModal = !ignoreClickOutside ? onClose : undefined;\n var handleClickOutside = useCallback(function (e) {\n var _a;\n var ignoreEvent = allowScrollbarClick && e.offsetX > e.target.clientWidth;\n if (!ignoreEvent &&\n elementRef.current &&\n !elementRef.current.contains(e.target) &&\n !((_a = parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {\n closeCurrent ? e.target.contains(elementRef.current) && (onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal()) : onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();\n }\n }, [allowScrollbarClick, parentRef, closeCurrent, onCloseModal]);\n var keyPress = useCallback(function (e) {\n if (e.key === 'Escape') {\n onCloseModal === null || onCloseModal === void 0 ? void 0 : onCloseModal();\n }\n }, [onCloseModal]);\n useEffect(function () {\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('keydown', keyPress);\n return function () {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('keydown', keyPress);\n };\n }, [handleClickOutside, keyPress]);\n return elementRef;\n};\n//# sourceMappingURL=useClickOutside.js.map"],"names":["useRef","useCallback","useEffect"],"mappings":";;;;AACU,IAAC,eAAe,GAAG,UAAU,EAAE,EAAE;AAC3C,IAAI,IAAI,OAAO,GAAG,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,EAAE,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,kBAAkB,EAAE,kBAAkB,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,YAAY,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;AACpR,IAAI,IAAI,UAAU,GAAGA,YAAM,CAAC,IAAI,CAAC,CAAC;AAClC,IAAI,IAAI,YAAY,GAAG,CAAC,kBAAkB,GAAG,OAAO,GAAG,SAAS,CAAC;AACjE,IAAI,IAAI,kBAAkB,GAAGC,iBAAW,CAAC,UAAU,CAAC,EAAE;AACtD,QAAQ,IAAI,EAAE,CAAC;AACf,QAAQ,IAAI,WAAW,GAAG,mBAAmB,IAAI,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC;AAClF,QAAQ,IAAI,CAAC,WAAW;AACxB,YAAY,UAAU,CAAC,OAAO;AAC9B,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;AAClD,YAAY,EAAE,CAAC,EAAE,GAAG,SAAS,KAAK,IAAI,IAAI,SAAS,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,SAAS,CAAC,OAAO,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE;AAC1J,YAAY,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,YAAY,EAAE,CAAC,GAAG,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,YAAY,EAAE,CAAC;AAC9N,SAAS;AACT,KAAK,EAAE,CAAC,mBAAmB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;AACrE,IAAI,IAAI,QAAQ,GAAGA,iBAAW,CAAC,UAAU,CAAC,EAAE;AAC5C,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;AAChC,YAAY,YAAY,KAAK,IAAI,IAAI,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,YAAY,EAAE,CAAC;AACvF,SAAS;AACT,KAAK,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;AACvB,IAAIC,eAAS,CAAC,YAAY;AAC1B,QAAQ,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;AACnE,QAAQ,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AACvD,QAAQ,OAAO,YAAY;AAC3B,YAAY,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;AAC1E,YAAY,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAC9D,SAAS,CAAC;AACV,KAAK,EAAE,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC,CAAC;AACvC,IAAI,OAAO,UAAU,CAAC;AACtB;;;;"}
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
2
4
|
|
|
3
5
|
var useModal = function (initialState) {
|
|
4
6
|
if (initialState === void 0) { initialState = false; }
|
|
5
|
-
var _a = useState(initialState), isOpen = _a[0], setIsOpen = _a[1];
|
|
6
|
-
var _b = useState(), data = _b[0], setData = _b[1];
|
|
7
|
-
var onClose = useCallback(function () {
|
|
7
|
+
var _a = React.useState(initialState), isOpen = _a[0], setIsOpen = _a[1];
|
|
8
|
+
var _b = React.useState(), data = _b[0], setData = _b[1];
|
|
9
|
+
var onClose = React.useCallback(function () {
|
|
8
10
|
setIsOpen(false);
|
|
9
11
|
setData(undefined);
|
|
10
12
|
}, []);
|
|
11
|
-
var onOpen = useCallback(function (data) {
|
|
13
|
+
var onOpen = React.useCallback(function (data) {
|
|
12
14
|
data && setData(data);
|
|
13
15
|
setIsOpen(true);
|
|
14
16
|
}, []);
|
|
15
17
|
return { isOpen: isOpen, onClose: onClose, onOpen: onOpen, data: data };
|
|
16
18
|
};
|
|
17
19
|
|
|
18
|
-
|
|
20
|
+
exports.useModal = useModal;
|
|
19
21
|
//# sourceMappingURL=useModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useModal.js","sources":["../../../../../packages/ui/Blocks/Modal/hooks/useModal.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nexport var useModal = function (initialState) {\n if (initialState === void 0) { initialState = false; }\n var _a = useState(initialState), isOpen = _a[0], setIsOpen = _a[1];\n var _b = useState(), data = _b[0], setData = _b[1];\n var onClose = useCallback(function () {\n setIsOpen(false);\n setData(undefined);\n }, []);\n var onOpen = useCallback(function (data) {\n data && setData(data);\n setIsOpen(true);\n }, []);\n return { isOpen: isOpen, onClose: onClose, onOpen: onOpen, data: data };\n};\n//# sourceMappingURL=useModal.js.map"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useModal.js","sources":["../../../../../packages/ui/Blocks/Modal/hooks/useModal.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\nexport var useModal = function (initialState) {\n if (initialState === void 0) { initialState = false; }\n var _a = useState(initialState), isOpen = _a[0], setIsOpen = _a[1];\n var _b = useState(), data = _b[0], setData = _b[1];\n var onClose = useCallback(function () {\n setIsOpen(false);\n setData(undefined);\n }, []);\n var onOpen = useCallback(function (data) {\n data && setData(data);\n setIsOpen(true);\n }, []);\n return { isOpen: isOpen, onClose: onClose, onOpen: onOpen, data: data };\n};\n//# sourceMappingURL=useModal.js.map"],"names":["useState","useCallback"],"mappings":";;;;AACU,IAAC,QAAQ,GAAG,UAAU,YAAY,EAAE;AAC9C,IAAI,IAAI,YAAY,KAAK,KAAK,CAAC,EAAE,EAAE,YAAY,GAAG,KAAK,CAAC,EAAE;AAC1D,IAAI,IAAI,EAAE,GAAGA,cAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;AACvE,IAAI,IAAI,EAAE,GAAGA,cAAQ,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;AACvD,IAAI,IAAI,OAAO,GAAGC,iBAAW,CAAC,YAAY;AAC1C,QAAQ,SAAS,CAAC,KAAK,CAAC,CAAC;AACzB,QAAQ,OAAO,CAAC,SAAS,CAAC,CAAC;AAC3B,KAAK,EAAE,EAAE,CAAC,CAAC;AACX,IAAI,IAAI,MAAM,GAAGA,iBAAW,CAAC,UAAU,IAAI,EAAE;AAC7C,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;AAC9B,QAAQ,SAAS,CAAC,IAAI,CAAC,CAAC;AACxB,KAAK,EAAE,EAAE,CAAC,CAAC;AACX,IAAI,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAC5E;;;;"}
|
package/ui/Blocks/Modal/index.js
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
import 'react';
|
|
1
|
+
'use strict';
|
|
3
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var Modal = require('./Modal.js');
|
|
6
|
+
require('react');
|
|
5
7
|
|
|
6
|
-
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.default = Modal.Modal;
|
|
7
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
|
@@ -1,15 +1,21 @@
|
|
|
1
|
-
|
|
2
|
-
import styled, { th } from '@xstyled/styled-components';
|
|
3
|
-
import { createRgba } from '../../utils/CreateRgba/createRgba.js';
|
|
4
|
-
import 'react';
|
|
1
|
+
'use strict';
|
|
5
2
|
|
|
6
|
-
var
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var styled = require('@xstyled/styled-components');
|
|
5
|
+
var createRgba = require('../../utils/CreateRgba/createRgba.js');
|
|
6
|
+
require('react');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
9
|
+
|
|
10
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
11
|
+
|
|
12
|
+
var DialogOverlay = styled__default.default.div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n position: fixed; /* Stay in place */\n z-index: 5;\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: ", ";\n text-align: center;\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n"], ["\n position: fixed; /* Stay in place */\n z-index: 5;\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: ", ";\n text-align: center;\n @media print {\n position: absolute !important;\n left: 0 !important;\n top: 0 !important;\n height: auto !important;\n visibility: hidden;\n }\n"])), function (_a) {
|
|
7
13
|
var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
|
|
8
|
-
return createRgba(backgroundColor, 0.6);
|
|
14
|
+
return createRgba.createRgba(backgroundColor, 0.6);
|
|
9
15
|
});
|
|
10
|
-
var DialogWindow =
|
|
16
|
+
var DialogWindow = styled__default.default.div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n background-color: ", ";\n margin: 100px auto 0 auto; /* Location of the box */\n padding: 0;\n border: 0;\n border-radius: 1rem;\n box-shadow: dialogShadow;\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (max-width: 576px) {\n margin: 20% auto 50px auto;\n ", "\n }\n"], ["\n background-color: ", ";\n margin: 100px auto 0 auto; /* Location of the box */\n padding: 0;\n border: 0;\n border-radius: 1rem;\n box-shadow: dialogShadow;\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n display: inline-block;\n position: relative;\n text-align: left;\n @media print {\n background-color: #fff;\n margin: 0;\n visibility: visible;\n overflow: visible;\n box-shadow: none;\n max-width: 100%;\n }\n\n @media (max-width: 576px) {\n margin: 20% auto 50px auto;\n ", "\n }\n"])), function (_a) {
|
|
11
17
|
var $whiteBg = _a.$whiteBg;
|
|
12
|
-
return ($whiteBg ? th.color('white') : '#fefefe');
|
|
18
|
+
return ($whiteBg ? styled.th.color('white') : '#fefefe');
|
|
13
19
|
}, function (_a) {
|
|
14
20
|
var $minWidth = _a.$minWidth;
|
|
15
21
|
return $minWidth || '10%';
|
|
@@ -26,22 +32,29 @@ var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemp
|
|
|
26
32
|
var $mobileFullscreen = _a.$mobileFullscreen;
|
|
27
33
|
return $mobileFullscreen && "border-radius: 0; max-width: 100% !important;";
|
|
28
34
|
});
|
|
29
|
-
var HeaderContainer =
|
|
35
|
+
var HeaderContainer = styled__default.default.div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 30px;\n padding-bottom: ", ";\n\n @media (max-width: 576px) {\n padding: 18px;\n border-bottom: 1px solid ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 30px;\n padding-bottom: ", ";\n\n @media (max-width: 576px) {\n padding: 18px;\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
30
36
|
var topSpace = _a.topSpace;
|
|
31
37
|
return topSpace;
|
|
32
|
-
}, th.color('lightGray6'));
|
|
33
|
-
var ContentContainer =
|
|
38
|
+
}, styled.th.color('lightGray6'));
|
|
39
|
+
var ContentContainer = styled__default.default.div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n padding: 30px;\n padding-top: ", ";\n\n @media (max-width: 576px) {\n padding: ", ";\n font-size: 16px;\n line-height: 1.4;\n }\n \n \n"], ["\n padding: 30px;\n padding-top: ", ";\n\n @media (max-width: 576px) {\n padding: ", ";\n font-size: 16px;\n line-height: 1.4;\n }\n \n \n"])), function (_a) {
|
|
34
40
|
var topSpace = _a.topSpace;
|
|
35
41
|
return topSpace;
|
|
36
42
|
}, function (_a) {
|
|
37
43
|
var $mobileFullscreen = _a.$mobileFullscreen;
|
|
38
44
|
return $mobileFullscreen ? '0' : '18px';
|
|
39
45
|
});
|
|
40
|
-
var TitleContainer =
|
|
41
|
-
var H4 =
|
|
42
|
-
var ButtonsContainer =
|
|
43
|
-
var CloseButton =
|
|
46
|
+
var TitleContainer = styled__default.default.div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n display: flex;\n flex-flow: row;\n align-items: center;\n > div:first-of-type {\n margin-right: 0.5em;\n display: block;\n }\n\n .icon {\n font-size: 24px;\n margin-right: 15px;\n display: flex;\n\n @media (max-width: 576px) {\n font-size: 18px;\n margin-right: 12px;\n }\n }\n"], ["\n display: flex;\n flex-flow: row;\n align-items: center;\n > div:first-of-type {\n margin-right: 0.5em;\n display: block;\n }\n\n .icon {\n font-size: 24px;\n margin-right: 15px;\n display: flex;\n\n @media (max-width: 576px) {\n font-size: 18px;\n margin-right: 12px;\n }\n }\n"])));
|
|
47
|
+
var H4 = styled__default.default.h4(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n color: typoPrimary;\n margin: 0;\n font-size: 24px;\n line-height: 28px;\n font-weight: 700;\n\n @media (max-width: 576px) {\n font-size: 18px;\n line-height: 18px;\n }\n"], ["\n color: typoPrimary;\n margin: 0;\n font-size: 24px;\n line-height: 28px;\n font-weight: 700;\n\n @media (max-width: 576px) {\n font-size: 18px;\n line-height: 18px;\n }\n"])));
|
|
48
|
+
var ButtonsContainer = styled__default.default.div(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n padding: 1.5rem;\n text-align: right;\n > * {\n margin: 0 0.5em;\n }\n\n @media (max-width: 576px) {\n display: flex;\n justify-content: space-around;\n padding: 32px 18px 18px;\n\n > * {\n margin: 0;\n }\n }\n"], ["\n padding: 1.5rem;\n text-align: right;\n > * {\n margin: 0 0.5em;\n }\n\n @media (max-width: 576px) {\n display: flex;\n justify-content: space-around;\n padding: 32px 18px 18px;\n\n > * {\n margin: 0;\n }\n }\n"])));
|
|
49
|
+
var CloseButton = styled__default.default.div(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n z-index: 1;\n top: 32px;\n right: 24px;\n\n @media (max-width: 576px) {\n padding: 0;\n width: 32px;\n height: 32px;\n background-color: bgLightGray1;\n border-radius: 50%;\n top: 12px;\n right: 12px;\n }\n"], ["\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n z-index: 1;\n top: 32px;\n right: 24px;\n\n @media (max-width: 576px) {\n padding: 0;\n width: 32px;\n height: 32px;\n background-color: bgLightGray1;\n border-radius: 50%;\n top: 12px;\n right: 12px;\n }\n"])));
|
|
44
50
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
45
51
|
|
|
46
|
-
|
|
52
|
+
exports.ButtonsContainer = ButtonsContainer;
|
|
53
|
+
exports.CloseButton = CloseButton;
|
|
54
|
+
exports.ContentContainer = ContentContainer;
|
|
55
|
+
exports.DialogOverlay = DialogOverlay;
|
|
56
|
+
exports.DialogWindow = DialogWindow;
|
|
57
|
+
exports.H4 = H4;
|
|
58
|
+
exports.HeaderContainer = HeaderContainer;
|
|
59
|
+
exports.TitleContainer = TitleContainer;
|
|
47
60
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/Modal/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nimport { createRgba } from '../../utils';\nexport var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: fixed; /* Stay in place */\\n z-index: 5;\\n left: 0;\\n top: 0;\\n width: 100%; /* Full width */\\n height: 100%; /* Full height */\\n overflow: auto; /* Enable scroll if needed */\\n background-color: \", \";\\n text-align: center;\\n @media print {\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n height: auto !important;\\n visibility: hidden;\\n }\\n\"], [\"\\n position: fixed; /* Stay in place */\\n z-index: 5;\\n left: 0;\\n top: 0;\\n width: 100%; /* Full width */\\n height: 100%; /* Full height */\\n overflow: auto; /* Enable scroll if needed */\\n background-color: \", \";\\n text-align: center;\\n @media print {\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n height: auto !important;\\n visibility: hidden;\\n }\\n\"])), function (_a) {\n var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;\n return createRgba(backgroundColor, 0.6);\n});\nexport var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n background-color: \", \";\\n margin: 100px auto 0 auto; /* Location of the box */\\n padding: 0;\\n border: 0;\\n border-radius: 1rem;\\n box-shadow: dialogShadow;\\n min-width: \", \";\\n max-width: \", \";\\n min-height: \", \";\\n max-height: \", \";\\n display: inline-block;\\n position: relative;\\n text-align: left;\\n @media print {\\n background-color: #fff;\\n margin: 0;\\n visibility: visible;\\n overflow: visible;\\n box-shadow: none;\\n max-width: 100%;\\n }\\n\\n @media (max-width: 576px) {\\n margin: 20% auto 50px auto;\\n \", \"\\n }\\n\"], [\"\\n background-color: \", \";\\n margin: 100px auto 0 auto; /* Location of the box */\\n padding: 0;\\n border: 0;\\n border-radius: 1rem;\\n box-shadow: dialogShadow;\\n min-width: \", \";\\n max-width: \", \";\\n min-height: \", \";\\n max-height: \", \";\\n display: inline-block;\\n position: relative;\\n text-align: left;\\n @media print {\\n background-color: #fff;\\n margin: 0;\\n visibility: visible;\\n overflow: visible;\\n box-shadow: none;\\n max-width: 100%;\\n }\\n\\n @media (max-width: 576px) {\\n margin: 20% auto 50px auto;\\n \", \"\\n }\\n\"])), function (_a) {\n var $whiteBg = _a.$whiteBg;\n return ($whiteBg ? th.color('white') : '#fefefe');\n}, function (_a) {\n var $minWidth = _a.$minWidth;\n return $minWidth || '10%';\n}, function (_a) {\n var $maxWidth = _a.$maxWidth;\n return $maxWidth || 'calc(100% - 32px)';\n}, function (_a) {\n var $minHeight = _a.$minHeight;\n return $minHeight || 'auto';\n}, function (_a) {\n var $maxHeight = _a.$maxHeight;\n return $maxHeight || 'auto';\n}, function (_a) {\n var $mobileFullscreen = _a.$mobileFullscreen;\n return $mobileFullscreen && \"border-radius: 0; max-width: 100% !important;\";\n});\nexport var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n display: flex;\\n justify-content: space-between;\\n padding: 30px;\\n padding-bottom: \", \";\\n\\n @media (max-width: 576px) {\\n padding: 18px;\\n border-bottom: 1px solid \", \";\\n }\\n\"], [\"\\n display: flex;\\n justify-content: space-between;\\n padding: 30px;\\n padding-bottom: \", \";\\n\\n @media (max-width: 576px) {\\n padding: 18px;\\n border-bottom: 1px solid \", \";\\n }\\n\"])), function (_a) {\n var topSpace = _a.topSpace;\n return topSpace;\n}, th.color('lightGray6'));\nexport var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n padding: 30px;\\n padding-top: \", \";\\n\\n @media (max-width: 576px) {\\n padding: \", \";\\n font-size: 16px;\\n line-height: 1.4;\\n }\\n \\n \\n\"], [\"\\n padding: 30px;\\n padding-top: \", \";\\n\\n @media (max-width: 576px) {\\n padding: \", \";\\n font-size: 16px;\\n line-height: 1.4;\\n }\\n \\n \\n\"])), function (_a) {\n var topSpace = _a.topSpace;\n return topSpace;\n}, function (_a) {\n var $mobileFullscreen = _a.$mobileFullscreen;\n return $mobileFullscreen ? '0' : '18px';\n});\nexport var TitleContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n display: flex;\\n flex-flow: row;\\n align-items: center;\\n > div:first-of-type {\\n margin-right: 0.5em;\\n display: block;\\n }\\n\\n .icon {\\n font-size: 24px;\\n margin-right: 15px;\\n display: flex;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n margin-right: 12px;\\n }\\n }\\n\"], [\"\\n display: flex;\\n flex-flow: row;\\n align-items: center;\\n > div:first-of-type {\\n margin-right: 0.5em;\\n display: block;\\n }\\n\\n .icon {\\n font-size: 24px;\\n margin-right: 15px;\\n display: flex;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n margin-right: 12px;\\n }\\n }\\n\"])));\nexport var H4 = styled.h4(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n color: typoPrimary;\\n margin: 0;\\n font-size: 24px;\\n line-height: 28px;\\n font-weight: 700;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n line-height: 18px;\\n }\\n\"], [\"\\n color: typoPrimary;\\n margin: 0;\\n font-size: 24px;\\n line-height: 28px;\\n font-weight: 700;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n line-height: 18px;\\n }\\n\"])));\nexport var ButtonsContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n padding: 1.5rem;\\n text-align: right;\\n > * {\\n margin: 0 0.5em;\\n }\\n\\n @media (max-width: 576px) {\\n display: flex;\\n justify-content: space-around;\\n padding: 32px 18px 18px;\\n\\n > * {\\n margin: 0;\\n }\\n }\\n\"], [\"\\n padding: 1.5rem;\\n text-align: right;\\n > * {\\n margin: 0 0.5em;\\n }\\n\\n @media (max-width: 576px) {\\n display: flex;\\n justify-content: space-around;\\n padding: 32px 18px 18px;\\n\\n > * {\\n margin: 0;\\n }\\n }\\n\"])));\nexport var CloseButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject([\"\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: absolute;\\n z-index: 1;\\n top: 32px;\\n right: 24px;\\n\\n @media (max-width: 576px) {\\n padding: 0;\\n width: 32px;\\n height: 32px;\\n background-color: bgLightGray1;\\n border-radius: 50%;\\n top: 12px;\\n right: 12px;\\n }\\n\"], [\"\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: absolute;\\n z-index: 1;\\n top: 32px;\\n right: 24px;\\n\\n @media (max-width: 576px) {\\n padding: 0;\\n width: 32px;\\n height: 32px;\\n background-color: bgLightGray1;\\n border-radius: 50%;\\n top: 12px;\\n right: 12px;\\n }\\n\"])));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Blocks/Modal/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport styled, { th } from '@xstyled/styled-components';\nimport { createRgba } from '../../utils';\nexport var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n position: fixed; /* Stay in place */\\n z-index: 5;\\n left: 0;\\n top: 0;\\n width: 100%; /* Full width */\\n height: 100%; /* Full height */\\n overflow: auto; /* Enable scroll if needed */\\n background-color: \", \";\\n text-align: center;\\n @media print {\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n height: auto !important;\\n visibility: hidden;\\n }\\n\"], [\"\\n position: fixed; /* Stay in place */\\n z-index: 5;\\n left: 0;\\n top: 0;\\n width: 100%; /* Full width */\\n height: 100%; /* Full height */\\n overflow: auto; /* Enable scroll if needed */\\n background-color: \", \";\\n text-align: center;\\n @media print {\\n position: absolute !important;\\n left: 0 !important;\\n top: 0 !important;\\n height: auto !important;\\n visibility: hidden;\\n }\\n\"])), function (_a) {\n var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;\n return createRgba(backgroundColor, 0.6);\n});\nexport var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n background-color: \", \";\\n margin: 100px auto 0 auto; /* Location of the box */\\n padding: 0;\\n border: 0;\\n border-radius: 1rem;\\n box-shadow: dialogShadow;\\n min-width: \", \";\\n max-width: \", \";\\n min-height: \", \";\\n max-height: \", \";\\n display: inline-block;\\n position: relative;\\n text-align: left;\\n @media print {\\n background-color: #fff;\\n margin: 0;\\n visibility: visible;\\n overflow: visible;\\n box-shadow: none;\\n max-width: 100%;\\n }\\n\\n @media (max-width: 576px) {\\n margin: 20% auto 50px auto;\\n \", \"\\n }\\n\"], [\"\\n background-color: \", \";\\n margin: 100px auto 0 auto; /* Location of the box */\\n padding: 0;\\n border: 0;\\n border-radius: 1rem;\\n box-shadow: dialogShadow;\\n min-width: \", \";\\n max-width: \", \";\\n min-height: \", \";\\n max-height: \", \";\\n display: inline-block;\\n position: relative;\\n text-align: left;\\n @media print {\\n background-color: #fff;\\n margin: 0;\\n visibility: visible;\\n overflow: visible;\\n box-shadow: none;\\n max-width: 100%;\\n }\\n\\n @media (max-width: 576px) {\\n margin: 20% auto 50px auto;\\n \", \"\\n }\\n\"])), function (_a) {\n var $whiteBg = _a.$whiteBg;\n return ($whiteBg ? th.color('white') : '#fefefe');\n}, function (_a) {\n var $minWidth = _a.$minWidth;\n return $minWidth || '10%';\n}, function (_a) {\n var $maxWidth = _a.$maxWidth;\n return $maxWidth || 'calc(100% - 32px)';\n}, function (_a) {\n var $minHeight = _a.$minHeight;\n return $minHeight || 'auto';\n}, function (_a) {\n var $maxHeight = _a.$maxHeight;\n return $maxHeight || 'auto';\n}, function (_a) {\n var $mobileFullscreen = _a.$mobileFullscreen;\n return $mobileFullscreen && \"border-radius: 0; max-width: 100% !important;\";\n});\nexport var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n display: flex;\\n justify-content: space-between;\\n padding: 30px;\\n padding-bottom: \", \";\\n\\n @media (max-width: 576px) {\\n padding: 18px;\\n border-bottom: 1px solid \", \";\\n }\\n\"], [\"\\n display: flex;\\n justify-content: space-between;\\n padding: 30px;\\n padding-bottom: \", \";\\n\\n @media (max-width: 576px) {\\n padding: 18px;\\n border-bottom: 1px solid \", \";\\n }\\n\"])), function (_a) {\n var topSpace = _a.topSpace;\n return topSpace;\n}, th.color('lightGray6'));\nexport var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n padding: 30px;\\n padding-top: \", \";\\n\\n @media (max-width: 576px) {\\n padding: \", \";\\n font-size: 16px;\\n line-height: 1.4;\\n }\\n \\n \\n\"], [\"\\n padding: 30px;\\n padding-top: \", \";\\n\\n @media (max-width: 576px) {\\n padding: \", \";\\n font-size: 16px;\\n line-height: 1.4;\\n }\\n \\n \\n\"])), function (_a) {\n var topSpace = _a.topSpace;\n return topSpace;\n}, function (_a) {\n var $mobileFullscreen = _a.$mobileFullscreen;\n return $mobileFullscreen ? '0' : '18px';\n});\nexport var TitleContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([\"\\n display: flex;\\n flex-flow: row;\\n align-items: center;\\n > div:first-of-type {\\n margin-right: 0.5em;\\n display: block;\\n }\\n\\n .icon {\\n font-size: 24px;\\n margin-right: 15px;\\n display: flex;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n margin-right: 12px;\\n }\\n }\\n\"], [\"\\n display: flex;\\n flex-flow: row;\\n align-items: center;\\n > div:first-of-type {\\n margin-right: 0.5em;\\n display: block;\\n }\\n\\n .icon {\\n font-size: 24px;\\n margin-right: 15px;\\n display: flex;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n margin-right: 12px;\\n }\\n }\\n\"])));\nexport var H4 = styled.h4(templateObject_6 || (templateObject_6 = __makeTemplateObject([\"\\n color: typoPrimary;\\n margin: 0;\\n font-size: 24px;\\n line-height: 28px;\\n font-weight: 700;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n line-height: 18px;\\n }\\n\"], [\"\\n color: typoPrimary;\\n margin: 0;\\n font-size: 24px;\\n line-height: 28px;\\n font-weight: 700;\\n\\n @media (max-width: 576px) {\\n font-size: 18px;\\n line-height: 18px;\\n }\\n\"])));\nexport var ButtonsContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject([\"\\n padding: 1.5rem;\\n text-align: right;\\n > * {\\n margin: 0 0.5em;\\n }\\n\\n @media (max-width: 576px) {\\n display: flex;\\n justify-content: space-around;\\n padding: 32px 18px 18px;\\n\\n > * {\\n margin: 0;\\n }\\n }\\n\"], [\"\\n padding: 1.5rem;\\n text-align: right;\\n > * {\\n margin: 0 0.5em;\\n }\\n\\n @media (max-width: 576px) {\\n display: flex;\\n justify-content: space-around;\\n padding: 32px 18px 18px;\\n\\n > * {\\n margin: 0;\\n }\\n }\\n\"])));\nexport var CloseButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject([\"\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: absolute;\\n z-index: 1;\\n top: 32px;\\n right: 24px;\\n\\n @media (max-width: 576px) {\\n padding: 0;\\n width: 32px;\\n height: 32px;\\n background-color: bgLightGray1;\\n border-radius: 50%;\\n top: 12px;\\n right: 12px;\\n }\\n\"], [\"\\n cursor: pointer;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n position: absolute;\\n z-index: 1;\\n top: 32px;\\n right: 24px;\\n\\n @media (max-width: 576px) {\\n padding: 0;\\n width: 32px;\\n height: 32px;\\n background-color: bgLightGray1;\\n border-radius: 50%;\\n top: 12px;\\n right: 12px;\\n }\\n\"])));\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;\n//# sourceMappingURL=styles.js.map"],"names":["styled","__makeTemplateObject","createRgba","th"],"mappings":"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"}
|
package/ui/Blocks/Modal/utils.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
1
3
|
var widthMap = {
|
|
2
4
|
wide: '1450px',
|
|
3
5
|
mediumLarge: '1200px',
|
|
@@ -10,5 +12,6 @@ var topSpaceMap = {
|
|
|
10
12
|
medium: '15px',
|
|
11
13
|
};
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
exports.topSpaceMap = topSpaceMap;
|
|
16
|
+
exports.widthMap = widthMap;
|
|
14
17
|
//# sourceMappingURL=utils.js.map
|