krl-alfred 1.10.0 → 1.12.0
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/dist/components/Breadcrumbs/Breadcrumbs.js +9 -6
- package/dist/components/Breadcrumbs/Breadcrumbs.styled.js +4 -4
- package/dist/components/Button/Button.js +1 -1
- package/dist/components/Button/Button.styled.js +1 -1
- package/dist/components/CategoryMenu/CategoryMenu.styled.js +2 -2
- package/dist/components/Checkbox/Checkbox.styled.js +2 -2
- package/dist/components/Modal/Modal.js +10 -11
- package/dist/components/Modal/Modal.styled.js +3 -3
- package/package.json +1 -1
- /package/dist/utils/{svgToBase65.js → svgToBase64.js} +0 -0
|
@@ -31,12 +31,15 @@ var Breadcrumbs = function (props) {
|
|
|
31
31
|
}, 100);
|
|
32
32
|
var SubMenu = function (_a) {
|
|
33
33
|
var data = _a.data, item = _a.item;
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
var rowLength = subMenuRowLength;
|
|
35
|
+
if (item.subMenuRowLength)
|
|
36
|
+
rowLength = item.subMenuRowLength;
|
|
37
|
+
var grid = rowLength && Math.ceil(data.length / rowLength);
|
|
38
|
+
var dataWithColumn = (0, refactorColumn_1.default)(data, rowLength || 0);
|
|
39
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.DropdownList, { gridTemplateColumns: grid, children: dataWithColumn === null || dataWithColumn === void 0 ? void 0 : dataWithColumn.map(function (childColumn, key) {
|
|
37
40
|
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemList, { children: childColumn === null || childColumn === void 0 ? void 0 : childColumn.map(function (child) {
|
|
38
|
-
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem, { isActive: child.isActive, isSeeAll: child.isSeeAll, className: "caption-medium-12-15", children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: child, children: child.name }) }));
|
|
39
|
-
}) }) }));
|
|
41
|
+
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubCategoryItemListItem, { isActive: child.isActive, isSeeAll: child.isSeeAll, className: "caption-medium-12-15", children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: child, children: child.name }) }, child.id));
|
|
42
|
+
}) }) }, key));
|
|
40
43
|
}) }) }));
|
|
41
44
|
};
|
|
42
45
|
var SubMenuMobile = function () {
|
|
@@ -45,7 +48,7 @@ var Breadcrumbs = function (props) {
|
|
|
45
48
|
var _a;
|
|
46
49
|
return ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.SubMenuMobileItem, { isActive: item.isActive, className: (0, classnames_1.default)("caption-bold-12-15", (_a = {},
|
|
47
50
|
_a["active"] = item.isActive,
|
|
48
|
-
_a)), children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: item.name }) }));
|
|
51
|
+
_a)), children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, { item: item, children: item.name }) }, item.id));
|
|
49
52
|
}) }));
|
|
50
53
|
};
|
|
51
54
|
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsWrapper, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsList, { children: data === null || data === void 0 ? void 0 : data.map(function (breadCrumbItem, key) {
|
|
@@ -15,14 +15,14 @@ exports.BreadcrumbsList = styled_components_1.default.ul(templateObject_2 || (te
|
|
|
15
15
|
exports.BreadcrumbsListItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n margin: 0 0;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n &:not(:nth-child(2)) {\n display: none;\n }\n }\n > a {\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: inherit;\n }\n &:hover{\n ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n button {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n"], ["\n position: relative;\n margin: 0 0;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n &:not(:nth-child(2)) {\n display: none;\n }\n }\n > a {\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: inherit;\n }\n &:hover{\n ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n }\n button {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n"])), devices_1.devices.md);
|
|
16
16
|
exports.BreadcrumbsListItemInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n margin: 0;\n display: block;\n color: var(--dark-opacity-50);\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"], ["\n position: relative;\n margin: 0;\n display: block;\n color: var(--dark-opacity-50);\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
|
|
17
17
|
exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: block;\n margin-left: 16px;\n margin-right: 16px;\n\n @media only screen and ", " {\n display: none;\n }\n svg {\n display: block;\n }\n"], ["\n display: block;\n margin-left: 16px;\n margin-right: 16px;\n\n @media only screen and ", " {\n display: none;\n }\n svg {\n display: block;\n }\n"])), devices_1.devices.md);
|
|
18
|
-
exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n
|
|
18
|
+
exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: 0;\n margin-right: 16px;\n display: none;\n @media only screen and ", " {\n display: block;\n }\n svg {\n display: block;\n }\n"], ["\n margin-left: 0;\n margin-right: 16px;\n display: none;\n @media only screen and ", " {\n display: block;\n }\n svg {\n display: block;\n }\n"])), devices_1.devices.md);
|
|
19
19
|
exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n\n"])));
|
|
20
20
|
exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 4px;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n transition: all 0.2s ease-in-out;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--primary);\n border-radius: 4px;\n color: var(--primary);\n padding: 0 8px;\n background-color: white;\n height: 24px;\n cursor: pointer;\n outline: none !important;\n svg {\n display: inline-block;\n vertical-align: middle;\n width: 16px;\n height: 16px;\n margin-left: 8px;\n transition: all 0.2s ease-in-out;\n }\n"])));
|
|
21
|
-
exports.DropdownList = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow:
|
|
21
|
+
exports.DropdownList = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 48px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"], ["\n border: 1px solid var(--grey-10);\n background: white;\n z-index:5;\n border-radius: 8px;\n box-shadow: 0 6px 30px var(--grey-10);\n display: grid;\n padding: 8px;\n grid-template-columns: repeat(\n ", ",\n 154px\n );\n text-align: start;\n gap: 0 16px;\n position: absolute;\n left: 48px;\n top: calc(100% + 8px);\n opacity: 0;\n visibility: hidden;\n transform: translateY(10px);\n transition: all 0.2s ease-in-out;\n"])), function (props) { return props.gridTemplateColumns || "3"; });
|
|
22
22
|
exports.SubCategoryItem = styled_components_1.default.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
23
23
|
exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"], ["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"])));
|
|
24
24
|
exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n padding: 0;\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"], ["\n display: block;\n padding: 0;\n > a {\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n display: block;\n ", "\n background-color : var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 700;\n ", "\n ", "\n }\n"])), function (props) { return (props.isActive ? "" : "&:hover{"); }, function (props) { return (props.isActive ? "" : "}"); }, function (props) { return (props.isSeeAll ? "font-weight: 700;" : ""); });
|
|
25
25
|
exports.BreadcrumbsListDropdownListItem = styled_components_1.default.li(templateObject_13 || (templateObject_13 = __makeTemplateObject([""], [""])));
|
|
26
|
-
exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n
|
|
27
|
-
exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow:
|
|
26
|
+
exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n width: 100%;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 24px 0 30px 0;\n margin-bottom: 0;\n display: none;\n margin-top:0;\n &::-webkit-scrollbar {\n display: none;\n }\n @media only screen and ", " {\n display: flex;\n }\n"], ["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n width: 100%;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 24px 0 30px 0;\n margin-bottom: 0;\n display: none;\n margin-top:0;\n &::-webkit-scrollbar {\n display: none;\n }\n @media only screen and ", " {\n display: flex;\n }\n"])), devices_1.devices.md);
|
|
27
|
+
exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: block;\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px #eae9f0;\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"], ["\n display: block;\n a {\n display: block;\n padding: 0 24px;\n height:40px;\n line-height:38px;\n background: #ffffff;\n border: 1px solid ", ";\n box-shadow: 0 6px 30px #eae9f0;\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"])), function (props) { return (props.isActive ? "var(--primary)" : "var(--grey-10)"); }, function (props) { return (props.isActive ? "var(--primary)" : "var(--dark-opacity-75)"); });
|
|
28
28
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
|
|
@@ -15,7 +15,7 @@ var Children = function (props) {
|
|
|
15
15
|
var Button = function (props) {
|
|
16
16
|
var _a;
|
|
17
17
|
var isLoading = props.isLoading, onClick = props.onClick, disabled = props.disabled, size = props.size, variant = props.variant, width = props.width, icon = props.icon, children = props.children;
|
|
18
|
-
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)("body-bold-14-17", (_a = {}, _a["loading"] = isLoading, _a)), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, children: isLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { width: "16px", height: "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
|
|
18
|
+
return ((0, jsx_runtime_1.jsx)(Button_styled_1.ButtonStyled, { className: (0, classnames_1.default)("body-bold-14-17", (_a = {}, _a["loading"] = isLoading, _a)), onClick: onClick, disabled: disabled || isLoading, size: size, variant: variant, width: width, children: isLoading ? (0, jsx_runtime_1.jsx)(Spinner_1.default, { width: size === "big" ? "24px" : "16px", height: size === "big" ? "24px" : "16px", variant: variant === 'primary' ? 'secondary' : 'primary' }) :
|
|
19
19
|
(0, jsx_runtime_1.jsx)(Children, { icon: icon, children: children }) }));
|
|
20
20
|
};
|
|
21
21
|
exports.default = Button;
|
|
@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
|
|
|
32
32
|
var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--primary);\n color: white;\n border: none;\n\n &:hover {\n background-color: var(--primary-hover);\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: var(--primary);\n color: white;\n border: none;\n\n &:hover {\n background-color: var(--primary-hover);\n }\n\n &:active {\n background-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"])));
|
|
33
33
|
var secondary = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n\n &:hover {\n color: var(--primary-hover);\n }\n\n &:active {\n color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n\n &:hover {\n color: var(--primary-hover);\n }\n\n &:active {\n color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n }\n"])));
|
|
34
34
|
var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: white;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n }\n"], ["\n background-color: white;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n }\n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n }\n"])));
|
|
35
|
-
exports.ButtonStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: 0 24px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: 0 24px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n"])), function (props) { return props.size
|
|
35
|
+
exports.ButtonStyled = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: 0 24px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: 0 24px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width; }, function (props) {
|
|
36
36
|
switch (props.variant) {
|
|
37
37
|
case 'primary':
|
|
38
38
|
return primary;
|
|
@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
30
30
|
exports.SubCategoryInnerItemButtonInner = exports.SubCategoryInnerItem = exports.SubCategoryInner = exports.SubCategoryItem = exports.SubMenu = exports.CategoryItemButtonTitle = exports.CategoryItemButtonIcon = exports.CategoryItemButtonInner = exports.CategoryItem = exports.CategoryMenuWrapper = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
exports.CategoryMenuWrapper = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding:0;\n margin: 11px 0;\n a {\n text-decoration:none\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n padding:0;\n margin: 11px 0;\n a {\n text-decoration:none\n }\n"])));
|
|
33
|
-
var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow:
|
|
33
|
+
var hoverAndActive = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n"], ["\n color: var(--dark);\n &:before{\n border-color: var(--grey-10);\n box-shadow: 0 6px 30px 0 #EAE9F0;\n }\n"])));
|
|
34
34
|
exports.CategoryItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n position: relative;\n margin: 0 8.5px;\n padding-bottom: 8px;\n padding-top: 8px;\n path, circle {\n stroke : var(--dark-opacity-75)\n }\n &:hover{\n path , circle {\n stroke : var(--dark);\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n ", "\n"], ["\n display: block;\n position: relative;\n margin: 0 8.5px;\n padding-bottom: 8px;\n padding-top: 8px;\n path, circle {\n stroke : var(--dark-opacity-75)\n }\n &:hover{\n path , circle {\n stroke : var(--dark);\n }\n > ul{\n opacity: 1;\n visibility: visible;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n > a {\n > span{\n ", "\n }\n }\n }\n ", "\n"])), hoverAndActive, function (props) { return props.isActiveCategory ? "\n > a > span{\n ".concat(hoverAndActive, "\n }\n ") : ""; });
|
|
35
35
|
exports.CategoryItemButtonInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid white;\n color: var(--dark-opacity-75);\n background-color: white;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"], ["\n text-decoration: none;\n padding: 12px 16px;\n color: var(--dark-opacity-75);\n margin: 0;\n transition: all 0.2s ease-in-out;\n text-align: center;\n outline: none;\n display: block;\n position: relative;\n border: 0;\n background: transparent;\n outline: 0;\n width: 100%;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:before{\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border: 1px solid white;\n color: var(--dark-opacity-75);\n background-color: white;\n border-radius: 8px;\n z-index: -1;\n transition: all 0.2s ease-in-out;\n }\n"])));
|
|
36
36
|
exports.CategoryItemButtonIcon = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 24px;\n display:block;\n"], ["\n height: 24px;\n display:block;\n"])));
|
|
@@ -39,5 +39,5 @@ exports.SubMenu = styled_components_1.default.ul(templateObject_7 || (templateOb
|
|
|
39
39
|
exports.SubCategoryItem = styled_components_1.default.li(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n padding: 0;\n"], ["\n display: block;\n padding: 0;\n"])));
|
|
40
40
|
exports.SubCategoryInner = styled_components_1.default.ul(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding: 0;\n display: grid;\n gap:4px 0;\n"], ["\n padding: 0;\n display: grid;\n gap:4px 0;\n"])));
|
|
41
41
|
exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a > span {\n font-weight: ", ";\n }\n"], ["\n padding: 0;\n display: block;\n a > span {\n font-weight: ", ";\n }\n"])), function (props) { return props.isSeeAll ? '600' : '500'; });
|
|
42
|
-
exports.SubCategoryInnerItemButtonInner = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display:block;\n
|
|
42
|
+
exports.SubCategoryInnerItemButtonInner = styled_components_1.default.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:hover {\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 600;\n }\n"], ["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: 8px;\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n font-family:inherit;\n cursor:pointer;\n box-sizing: border-box;\n &:hover {\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n font-weight: 600;\n }\n"])));
|
|
43
43
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -11,8 +11,8 @@ exports.CheckboxStyled = void 0;
|
|
|
11
11
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
12
12
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
13
13
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
14
|
-
var
|
|
15
|
-
exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n display:flex;\n align-items:flex-start;\n justify-content:flex-start;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n width: ", ";\n height: ", ";\n
|
|
14
|
+
var svgToBase64_1 = __importDefault(require("./../../utils/svgToBase64"));
|
|
15
|
+
exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n display:flex;\n align-items:flex-start;\n justify-content:flex-start;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: inline-block;\n cursor: ", ";\n margin: ", ";\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"], ["\n flex:1;\n position:relative;\n display:flex;\n align-items:flex-start;\n justify-content:flex-start;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n &:checked ~ .indicator{\n background-image:url('", "');\n }\n }\n div.indicator{\n background-image:url('", "');\n background-size:100% 100%;\n display:block;\n position:relative;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: inline-block;\n cursor: ", ";\n margin: ", ";\n color:", ";\n label.label{\n display:block;\n margin:0;\n }\n label.description{\n display:block;\n margin:0;\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementDisabled" })) : (props.valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CheckboxElementInvalid" }))); }, function (props) {
|
|
16
16
|
switch (props.size) {
|
|
17
17
|
case 'small':
|
|
18
18
|
return "16px";
|
|
@@ -44,25 +44,24 @@ var Modal = function (props) {
|
|
|
44
44
|
(props === null || props === void 0 ? void 0 : props.onClose) && props.onClose();
|
|
45
45
|
};
|
|
46
46
|
var onPrimaryAction = props.onPrimaryAction, onSecondaryAction = props.onSecondaryAction, onBack = props.onBack, other = __rest(props, ["onPrimaryAction", "onSecondaryAction", "onBack"]);
|
|
47
|
-
return showModal &&
|
|
47
|
+
return (showModal &&
|
|
48
|
+
react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(Modal_styled_1.OverlayStyled, { children: (0, jsx_runtime_1.jsxs)(Modal_styled_1.ModalStyled, __assign({}, other, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "header", children: [props.showBackIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onBack, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowMedium" }) })) : (props.titleAlignment === "center" && (0, jsx_runtime_1.jsx)("div", { className: "empty" })), (0, jsx_runtime_1.jsxs)("div", { className: "title", children: [props.title && ((0, jsx_runtime_1.jsx)("h5", { className: "headline-semi-bold-20-24", children: props.title })), props.titleDescription && ((0, jsx_runtime_1.jsx)("p", { className: "body-regular-14-17", children: props.titleDescription }))] }), props.showCloseIcon ? ((0, jsx_runtime_1.jsx)("div", { onClick: onClose, className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close" }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "empty" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "content", children: [props.contentTitle && ((0, jsx_runtime_1.jsx)("strong", { className: "contentTitle headline-semi-bold-20-24", children: props.contentTitle })), (0, jsx_runtime_1.jsx)("div", { className: "contentInner", children: props.children })] }), (0, jsx_runtime_1.jsxs)("div", { className: "buttons", children: [props.showPrimaryButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onPrimaryAction, size: "big", variant: "primary", isLoading: props.isPrimaryButtonLoading, disabled: props.isPrimaryButtonDisabled, width: props.primaryButtonWidth, children: props.primaryButtonText })), props.showSecondaryButton && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.buttonsAlignment === "vertical" && ((0, jsx_runtime_1.jsx)("div", { className: "divider caption-medium-12-15", children: "veya" })), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSecondaryAction, size: "big", variant: "inverted", isLoading: props.isSecondaryButtonLoading, disabled: props.isSecondaryButtonDisabled, width: props.secondaryButtonWidth, children: props.secondaryButtonText })] }))] })] })) }), document.body));
|
|
48
49
|
};
|
|
49
50
|
exports.default = Modal;
|
|
50
51
|
Modal.defaultProps = {
|
|
51
|
-
size:
|
|
52
|
+
size: "small",
|
|
52
53
|
showBackIcon: true,
|
|
53
54
|
showCloseIcon: true,
|
|
54
55
|
show: true,
|
|
55
|
-
buttonsAlignment:
|
|
56
|
-
primaryButtonText:
|
|
57
|
-
secondaryButtonText:
|
|
58
|
-
onPrimaryAction: function () {
|
|
59
|
-
},
|
|
60
|
-
onSecondaryAction: function () {
|
|
61
|
-
},
|
|
56
|
+
buttonsAlignment: "vertical",
|
|
57
|
+
primaryButtonText: "Primary",
|
|
58
|
+
secondaryButtonText: "Secondary",
|
|
59
|
+
onPrimaryAction: function () { },
|
|
60
|
+
onSecondaryAction: function () { },
|
|
62
61
|
showHeaderBorder: false,
|
|
63
62
|
showFooterBorder: false,
|
|
64
63
|
showContentBorder: false,
|
|
65
64
|
hasFixedHeight: false,
|
|
66
|
-
titleAlignment:
|
|
67
|
-
contentTitle:
|
|
65
|
+
titleAlignment: "center",
|
|
66
|
+
contentTitle: "",
|
|
68
67
|
};
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.OverlayStyled = exports.ModalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n width: ", ";\n \n @media only screen and ", " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n }\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n margin-bottom: ", "; \n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding: 0 24px;\n .contentTitle{\n margin-bottom:32px;\n display:block;\n }\n .contentInner{\n @media only screen and ", " {\n height : calc(100dvh - 251px);\n position:relative;\n overflow: auto;\n }\n box-sizing:border-box;\n height: ", ";\n position: relative;\n overflow: auto;\n ", "\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n margin-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n
|
|
13
|
+
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n width: ", ";\n \n @media only screen and ", " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n }\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n margin-bottom: ", "; \n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding: 0 24px;\n .contentTitle{\n margin-bottom:32px;\n display:block;\n }\n .contentInner{\n @media only screen and ", " {\n height : calc(100dvh - 251px);\n position:relative;\n overflow: auto;\n }\n box-sizing:border-box;\n height: ", ";\n position: relative;\n overflow: auto;\n ", "\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n margin-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n }\n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n width: ", ";\n \n @media only screen and ", " {\n display: grid;\n height: 100dvh;\n align-content: space-between;\n border-radius: 0;\n }\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n margin-bottom: ", "; \n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding: 0 24px;\n .contentTitle{\n margin-bottom:32px;\n display:block;\n }\n .contentInner{\n @media only screen and ", " {\n height : calc(100dvh - 251px);\n position:relative;\n overflow: auto;\n }\n box-sizing:border-box;\n height: ", ";\n position: relative;\n overflow: auto;\n ", "\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n margin-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n }\n }\n"])), function (props) {
|
|
14
14
|
switch (props.size) {
|
|
15
15
|
case 'small':
|
|
16
16
|
return "375px";
|
|
@@ -21,7 +21,7 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
21
21
|
default:
|
|
22
22
|
return "462px";
|
|
23
23
|
}
|
|
24
|
-
}, devices_1.devices.md, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.showHeaderBorder ? '24px' : '0'; }, devices_1.devices.md, function (props) { return props.hasFixedHeight ? '507px' : 'auto'; }, function (props) { return props.showContentBorder ? ("\n border:1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n ") : (""); }, function (props) { return props.buttonsAlignment
|
|
24
|
+
}, devices_1.devices.md, function (props) { return props.showHeaderBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.showHeaderBorder ? '24px' : '0'; }, devices_1.devices.md, function (props) { return props.hasFixedHeight ? '507px' : 'auto'; }, function (props) { return props.showContentBorder ? ("\n border:1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n ") : (""); }, function (props) { return props.buttonsAlignment === 'horizontal' ? 'flex-start' : 'space-between'; }, function (props) { return props.showFooterBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.showFooterBorder ? '24px' : '0'; }, function (props) {
|
|
25
25
|
switch (props.buttonsAlignment) {
|
|
26
26
|
case 'vertical':
|
|
27
27
|
return 'column';
|
|
@@ -30,6 +30,6 @@ exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templ
|
|
|
30
30
|
default:
|
|
31
31
|
return 'column';
|
|
32
32
|
}
|
|
33
|
-
}, function (props) { return props.buttonsAlignment
|
|
33
|
+
}, function (props) { return props.buttonsAlignment === 'horizontal' ? '24px' : '0'; });
|
|
34
34
|
exports.OverlayStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-40);\n overflow: hidden;\n left: 0;\n top: 0;\n z-index: 999999;\n"], ["\n position: fixed;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-40);\n overflow: hidden;\n left: 0;\n top: 0;\n z-index: 999999;\n"])));
|
|
35
35
|
var templateObject_1, templateObject_2;
|
package/package.json
CHANGED
|
File without changes
|