krl-alfred 1.77.6 → 1.77.8
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 +4 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.styled.js +16 -14
- package/dist/components/Breadcrumbs/stories/Breadcrumbs.stories.js +1 -0
- package/dist/components/Checkbox/Checkbox.styled.js +1 -1
- package/dist/components/InsuranceBox/InsuranceBox.js +1 -1
- package/dist/components/InsuranceBox/InsuranceBox.styled.js +6 -6
- package/dist/components/RadioButton/layouts/basic/Basic.styled.js +1 -1
- package/package.json +1 -1
|
@@ -62,7 +62,10 @@ var Breadcrumbs = function (props) {
|
|
|
62
62
|
};
|
|
63
63
|
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) {
|
|
64
64
|
var _a;
|
|
65
|
-
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "3px", name: "ArrowLeftBig", width: "16px", height: "16px" }) })), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children.filter(function (item) { return !item.isHideDesktop; }) })] })) : ((0, jsx_runtime_1.jsxs)(
|
|
65
|
+
return ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListItem, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemBackIconWrapper, __assign({ onClick: onClickBackIcon }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { strokeWidth: "3px", name: "ArrowLeftBig", width: "16px", height: "16px" }) })), ((_a = breadCrumbItem === null || breadCrumbItem === void 0 ? void 0 : breadCrumbItem.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ((0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownWrapper, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsxs)(Breadcrumbs_styled_1.BreadcrumbsListDropdownOpener, { children: [breadCrumbItem.name, (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallDown" })] }), (0, jsx_runtime_1.jsx)(SubMenu, { item: breadCrumbItem, data: breadCrumbItem.children.filter(function (item) { return !item.isHideDesktop; }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.ButtonLinkComponentSm, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: __assign(__assign({}, breadCrumbItem), { component: function (_a) {
|
|
66
|
+
var children = _a.children;
|
|
67
|
+
return (0, jsx_runtime_1.jsx)("a", __assign({ onClick: onClickBackIcon }, { children: children }));
|
|
68
|
+
} }) }, { children: (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { children: breadCrumbItem.name }) })) }), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.ButtonLinkComponentLg, { children: (0, jsx_runtime_1.jsxs)(ButtonLinkComponent, __assign({ item: breadCrumbItem }, { children: [key >= 1 && ((0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemIconWrapper, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRightStroke" }) })), (0, jsx_runtime_1.jsx)(Breadcrumbs_styled_1.BreadcrumbsListItemInner, { children: breadCrumbItem.name })] })) })] }))] }, key));
|
|
66
69
|
}) }), (0, jsx_runtime_1.jsx)(SubMenuMobile, {})] }));
|
|
67
70
|
};
|
|
68
71
|
exports.default = Breadcrumbs;
|
|
@@ -7,22 +7,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.SubMenuMobileItem = exports.SubMenuMobileWrapper = exports.BreadcrumbsListDropdownListItem = exports.SubCategoryItemListItem = exports.SubCategoryItemList = exports.SubCategoryItem = exports.DropdownList = exports.BreadcrumbsListDropdownOpener = exports.BreadcrumbsListDropdownWrapper = exports.BreadcrumbsListItemBackIconWrapper = exports.BreadcrumbsListItemIconWrapper = exports.BreadcrumbsListItemInner = exports.BreadcrumbsListItem = exports.BreadcrumbsList = exports.BreadcrumbsWrapper = void 0;
|
|
10
|
+
exports.SubMenuMobileItem = exports.SubMenuMobileWrapper = exports.BreadcrumbsListDropdownListItem = exports.SubCategoryItemListItem = exports.SubCategoryItemList = exports.SubCategoryItem = exports.DropdownList = exports.BreadcrumbsListDropdownOpener = exports.BreadcrumbsListDropdownWrapper = exports.BreadcrumbsListItemBackIconWrapper = exports.BreadcrumbsListItemIconWrapper = exports.ButtonLinkComponentLg = exports.ButtonLinkComponentSm = exports.BreadcrumbsListItemInner = exports.BreadcrumbsListItem = exports.BreadcrumbsList = exports.BreadcrumbsWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.BreadcrumbsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display:block;\n a {\n text-decoration: none;\n color: inherit;\n }\n"], ["\n display:block;\n a {\n text-decoration: none;\n color: inherit;\n }\n"])));
|
|
14
14
|
exports.BreadcrumbsList = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n padding: 0;\n margin:0;\n"], ["\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n padding: 0;\n margin:0;\n"])));
|
|
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.xl);
|
|
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 font:var(--caption-bold-12-15);\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 font:var(--caption-bold-12-15);\n"])));
|
|
17
|
-
exports.
|
|
18
|
-
exports.
|
|
19
|
-
exports.
|
|
20
|
-
exports.
|
|
21
|
-
exports.
|
|
22
|
-
exports.
|
|
23
|
-
exports.
|
|
24
|
-
exports.
|
|
25
|
-
exports.
|
|
26
|
-
exports.
|
|
27
|
-
exports.
|
|
28
|
-
|
|
16
|
+
exports.BreadcrumbsListItemInner = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n margin: 0;\n display: inline-block;\n color: var(--dark-opacity-50);\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font:var(--caption-bold-12-15);\n vertical-align: middle;\n"], ["\n position: relative;\n margin: 0;\n display: inline-block;\n color: var(--dark-opacity-50);\n max-width: 150px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font:var(--caption-bold-12-15);\n vertical-align: middle;\n"])));
|
|
17
|
+
exports.ButtonLinkComponentSm = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: none;\n @media only screen and ", " {\n display: inline-block;\n }\n"], ["\n display: none;\n @media only screen and ", " {\n display: inline-block;\n }\n"])), devices_1.devices.xl);
|
|
18
|
+
exports.ButtonLinkComponentLg = styled_components_1.default.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: inline-block;\n @media only screen and ", " {\n display: none;\n }\n"], ["\n display: inline-block;\n @media only screen and ", " {\n display: none;\n }\n"])), devices_1.devices.xl);
|
|
19
|
+
exports.BreadcrumbsListItemIconWrapper = styled_components_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: inline-block;\n margin-left: 16px;\n margin-right: 16px;\n color:var(--dark-opacity-50);\n\n @media only screen and ", " {\n display: none;\n }\n svg {\n display: block;\n }\n"], ["\n display: inline-block;\n margin-left: 16px;\n margin-right: 16px;\n color:var(--dark-opacity-50);\n\n @media only screen and ", " {\n display: none;\n }\n svg {\n display: block;\n }\n"])), devices_1.devices.xl);
|
|
20
|
+
exports.BreadcrumbsListItemBackIconWrapper = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n margin-left: 0;\n padding-right: 16px;\n display: none;\n @media only screen and ", " {\n display: block;\n }\n div {\n display: block;\n }\n"], ["\n margin-left: 0;\n padding-right: 16px;\n display: none;\n @media only screen and ", " {\n display: block;\n }\n div {\n display: block;\n }\n"])), devices_1.devices.xl);
|
|
21
|
+
exports.BreadcrumbsListDropdownWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __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"])));
|
|
22
|
+
exports.BreadcrumbsListDropdownOpener = styled_components_1.default.button(templateObject_10 || (templateObject_10 = __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 font:var(--caption-bold-12-15);\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 font:var(--caption-bold-12-15);\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"])));
|
|
23
|
+
exports.DropdownList = styled_components_1.default.ul(templateObject_11 || (templateObject_11 = __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: 55px;\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: 55px;\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"; });
|
|
24
|
+
exports.SubCategoryItem = styled_components_1.default.li(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
25
|
+
exports.SubCategoryItemList = styled_components_1.default.ul(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"], ["\n display: grid;\n padding: 0;\n gap: 4px 0;\n"])));
|
|
26
|
+
exports.SubCategoryItemListItem = styled_components_1.default.li(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: block;\n padding: 0;\n font:var(--caption-medium-12-15);\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 font:var(--caption-medium-12-15);\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;" : ""); });
|
|
27
|
+
exports.BreadcrumbsListDropdownListItem = styled_components_1.default.li(templateObject_15 || (templateObject_15 = __makeTemplateObject([""], [""])));
|
|
28
|
+
exports.SubMenuMobileWrapper = styled_components_1.default.ul(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n position: relative;\n overflow: auto;\n white-space: nowrap;\n gap: 8px;\n scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem 15px 2rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 2rem 15px 0.5rem 15px;\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 scroll-snap-type: x proximity;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n overflow-x: scroll;\n padding: 2rem 15px 2rem 15px;\n margin: 0 -15px 0 -15px;\n display: none;\n width: calc(100% + 30px);\n &::-webkit-scrollbar {\n display: none;\n }\n &:empty {\n padding: 2rem 15px 0.5rem 15px;\n }\n @media only screen and ", " {\n display: flex;\n }\n"])), devices_1.devices.xl);
|
|
29
|
+
exports.SubMenuMobileItem = styled_components_1.default.li(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n display: block;\n font:var(--caption-bold-12-15);\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 var(--box-shadow-color);\n border-radius: 8px;\n text-align: center;\n box-sizing:border-box;\n color: ", ";\n }\n"], ["\n display: block;\n font:var(--caption-bold-12-15);\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 var(--box-shadow-color);\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)"); });
|
|
30
|
+
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, templateObject_16, templateObject_17;
|
|
@@ -12,7 +12,7 @@ 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
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 align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\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 margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n * {\n ", ";\n }\n label.label{\n display:block;\n margin:0;\n font: ", ";\n }\n label.description{\n display:block;\n margin:0;\n font:var(--body-regular-13-16);\n }\n }\n"], ["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\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 margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n * {\n ", ";\n }\n label.label{\n display:block;\n margin:0;\n font: ", ";\n }\n label.description{\n display:block;\n margin:0;\n font:var(--body-regular-13-16);\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
|
|
15
|
+
exports.CheckboxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\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 margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n * {\n ", ";\n }\n label.label{\n display:block;\n margin:0;\n cursor: inherit;\n font: ", ";\n }\n label.description{\n display:block;\n margin:0;\n cursor: inherit;\n font:var(--body-regular-13-16);\n }\n }\n"], ["\n flex:1;\n position:relative;\n align-items:center;\n justify-content:flex-start;\n display: grid;\n grid-template-columns: auto 1fr;\n input[type=\"checkbox\"]{\n height: 0;\n width: 0;\n opacity: 0; \n z-index: -1;\n position: absolute;\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 margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n }\n div.labelsWrapper{\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color:", ";\n * {\n ", ";\n }\n label.label{\n display:block;\n margin:0;\n cursor: inherit;\n font: ", ";\n }\n label.description{\n display:block;\n margin:0;\n cursor: inherit;\n font:var(--body-regular-13-16);\n }\n }\n"])), (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementChecked" })), function (props) { return props.disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "CheckboxElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "CheckboxElementUncheck" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "CheckboxElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
|
|
16
16
|
switch (props.$size) {
|
|
17
17
|
case 'small':
|
|
18
18
|
return "16px";
|
|
@@ -22,7 +22,7 @@ var Tooltip_1 = __importDefault(require("../Tooltip"));
|
|
|
22
22
|
var Loader_1 = __importDefault(require("../Loader"));
|
|
23
23
|
var InsuranceBox = function (props) {
|
|
24
24
|
var hasClickAction = props.hasClickAction, popupSize = props.popupSize, size = props.size, popupRight = props.popupRight, popupWidth = props.popupWidth, disabled = props.disabled, hasBorder = props.hasBorder, hasBgColor = props.hasBgColor, priceText = props.priceText, onChange = props.onChange, width = props.width, checked = props.checked, height = props.height, tooltipTitle = props.tooltipTitle, tooltipDescription = props.tooltipDescription, tooltipPosition = props.tooltipPosition, isTitleWrap = props.isTitleWrap, hasCloseOnOutsideClick = props.hasCloseOnOutsideClick, isLoading = props.isLoading;
|
|
25
|
-
return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, __assign({ "$hasBorder": hasBorder, "$hasBgColor": hasBgColor, "$width": width, "$height": height, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.CheckboxWrapper, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { disabled: disabled, onChange: onChange, checked: checked, size: "large" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Description, __assign({ "$size": size }, { children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave" }) : (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: "Hasar g\u00FCvenceni %100\u2019e ".concat(isTitleWrap ? "<br/>" : '', "tamamlars\u0131n! <b>").concat(priceText, "</b>") } }) })), (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: popupSize, title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: hasClickAction, popupWidth: popupWidth, popupRight: popupRight, iconWidth: "24px", iconHeight: "24px" }, { children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: props.insuranceText })) }))] }))] }))] })));
|
|
25
|
+
return ((0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InsuranceBoxStyled, __assign({ htmlFor: "insuranceCheckbox", "$hasBorder": hasBorder, "$hasBgColor": hasBgColor, "$width": width, "$height": height, "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.CheckboxWrapper, __assign({ "$size": size }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { id: "insuranceCheckbox", disabled: disabled, onChange: onChange, checked: checked, size: "large" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.InnerWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Logo, __assign({ htmlFor: "insuranceCheckbox", "$size": size }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { color: "var(--primary)", name: "Tamamlarsin" }) })), (0, jsx_runtime_1.jsxs)(InsuranceBox_styled_1.DescriptionWrapper, __assign({ "$size": size }, { children: [(0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.Description, __assign({ "$size": size }, { children: isLoading ? (0, jsx_runtime_1.jsx)(Loader_1.default, { type: "wave" }) : (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: "Hasar g\u00FCvenceni %100\u2019e ".concat(isTitleWrap ? "<br/>" : '', "tamamlars\u0131n! <b>").concat(priceText, "</b>") } }) })), (0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: "nothing" }, { children: (0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ iconStrokeWidth: "2px", popupSize: popupSize, title: tooltipTitle, position: tooltipPosition, hasCloseOnOutsideClick: hasCloseOnOutsideClick, hasClickAction: hasClickAction, popupWidth: popupWidth, popupRight: popupRight, iconWidth: "24px", iconHeight: "24px" }, { children: tooltipDescription || ((0, jsx_runtime_1.jsx)(InsuranceBox_styled_1.TooltipDescription, { children: props.insuranceText })) })) }))] }))] }))] })));
|
|
26
26
|
};
|
|
27
27
|
InsuranceBox.defaultProps = {
|
|
28
28
|
height: "90px",
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.TooltipDescription = exports.Description = exports.Logo = exports.DescriptionWrapper = exports.CheckboxWrapper = exports.InnerWrapper = exports.InsuranceBoxStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.InsuranceBoxStyled = styled_components_1.default.
|
|
13
|
+
exports.InsuranceBoxStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 0 1.5rem;\n height: ", ";\n background: ", ";\n border: ", ";\n border-radius: 8px;\n width: ", ";\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n ", ";\n @media only screen and ", " {\n padding: 1rem;\n height: auto;\n align-items: flex-start;\n }\n"], ["\n padding: 0 1.5rem;\n height: ", ";\n background: ", ";\n border: ", ";\n border-radius: 8px;\n width: ", ";\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n ", ";\n @media only screen and ", " {\n padding: 1rem;\n height: auto;\n align-items: flex-start;\n }\n"])), function (props) { return props.$height; }, function (props) { return props.$hasBgColor ? 'var(--primary-opacity-5)' : '#fff'; }, function (props) { return props.$hasBorder ? '1px solid var(--dark-opacity-10)' : 'none'; }, function (props) { return props.$width ? props.$width : "466px"; }, function (props) {
|
|
14
14
|
switch (props.$size) {
|
|
15
15
|
case 'small':
|
|
16
16
|
return "\n padding: 1rem;\n height: auto;\n align-items: flex-start;";
|
|
@@ -18,7 +18,7 @@ exports.InsuranceBoxStyled = styled_components_1.default.div(templateObject_1 ||
|
|
|
18
18
|
return null;
|
|
19
19
|
}
|
|
20
20
|
}, devices_1.devices.md);
|
|
21
|
-
exports.InnerWrapper = styled_components_1.default.
|
|
21
|
+
exports.InnerWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n cursor: inherit;\n ", ";\n @media only screen and ", " {\n grid-template-columns: 1fr;\n }\n"], ["\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n cursor: inherit;\n ", ";\n @media only screen and ", " {\n grid-template-columns: 1fr;\n }\n"])), function (props) {
|
|
22
22
|
switch (props.$size) {
|
|
23
23
|
case 'small':
|
|
24
24
|
return "\n grid-template-columns: 1fr;";
|
|
@@ -26,7 +26,7 @@ exports.InnerWrapper = styled_components_1.default.div(templateObject_2 || (temp
|
|
|
26
26
|
return null;
|
|
27
27
|
}
|
|
28
28
|
}, devices_1.devices.md);
|
|
29
|
-
exports.CheckboxWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n @media only screen and ", " {\n width: 40px;\n }\n ", ";\n"], ["\n @media only screen and ", " {\n width: 40px;\n }\n ", ";\n"])), devices_1.devices.md, function (props) {
|
|
29
|
+
exports.CheckboxWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: inherit;\n @media only screen and ", " {\n width: 40px;\n }\n ", ";\n"], ["\n cursor: inherit;\n @media only screen and ", " {\n width: 40px;\n }\n ", ";\n"])), devices_1.devices.md, function (props) {
|
|
30
30
|
switch (props.$size) {
|
|
31
31
|
case 'small':
|
|
32
32
|
return " width: 40px;";
|
|
@@ -34,7 +34,7 @@ exports.CheckboxWrapper = styled_components_1.default.div(templateObject_3 || (t
|
|
|
34
34
|
return null;
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
-
exports.DescriptionWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n ", ";\n @media only screen and ", " {\n margin-top: 18px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n ", ";\n @media only screen and ", " {\n margin-top: 18px;\n }\n"])), function (props) {
|
|
37
|
+
exports.DescriptionWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n ", ";\n @media only screen and ", " {\n margin-top: 18px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: inherit;\n ", ";\n @media only screen and ", " {\n margin-top: 18px;\n }\n"])), function (props) {
|
|
38
38
|
switch (props.$size) {
|
|
39
39
|
case 'small':
|
|
40
40
|
return "margin-top: 18px;";
|
|
@@ -42,7 +42,7 @@ exports.DescriptionWrapper = styled_components_1.default.div(templateObject_4 ||
|
|
|
42
42
|
return null;
|
|
43
43
|
}
|
|
44
44
|
}, devices_1.devices.md);
|
|
45
|
-
exports.Logo = styled_components_1.default.
|
|
45
|
+
exports.Logo = styled_components_1.default.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background-color: white;\n width: 96px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n box-sizing: border-box;\n cursor: inherit;\n\n svg {\n display: block;\n width: 80px;\n ", ";\n @media only screen and ", " {\n width: 116px;\n }\n }\n ", ";\n\n @media only screen and ", " {\n background-color: transparent;\n width: auto;\n height: auto;\n border: 0;\n border-radius: 0;\n margin-top: 6px;\n justify-content: flex-start;\n }\n"], ["\n background-color: white;\n width: 96px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n box-sizing: border-box;\n cursor: inherit;\n\n svg {\n display: block;\n width: 80px;\n ", ";\n @media only screen and ", " {\n width: 116px;\n }\n }\n ", ";\n\n @media only screen and ", " {\n background-color: transparent;\n width: auto;\n height: auto;\n border: 0;\n border-radius: 0;\n margin-top: 6px;\n justify-content: flex-start;\n }\n"])), function (props) {
|
|
46
46
|
switch (props.$size) {
|
|
47
47
|
case 'small':
|
|
48
48
|
return "width: 116px;";
|
|
@@ -57,7 +57,7 @@ exports.Logo = styled_components_1.default.div(templateObject_5 || (templateObje
|
|
|
57
57
|
return null;
|
|
58
58
|
}
|
|
59
59
|
}, devices_1.devices.md);
|
|
60
|
-
exports.Description = styled_components_1.default.
|
|
60
|
+
exports.Description = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin-left: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: var(--caption-semi-bold-12-15);\n height: 31px;\n cursor: inherit;\n @media only screen and ", " {\n margin-left: 0;\n }\n ", ";\n\n b {\n font: var(--body-extra-bold-13-16);\n }\n"], ["\n margin-left: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n font: var(--caption-semi-bold-12-15);\n height: 31px;\n cursor: inherit;\n @media only screen and ", " {\n margin-left: 0;\n }\n ", ";\n\n b {\n font: var(--body-extra-bold-13-16);\n }\n"])), devices_1.devices.md, function (props) {
|
|
61
61
|
switch (props.$size) {
|
|
62
62
|
case 'small':
|
|
63
63
|
return "\n margin-left: 0;\n ";
|
|
@@ -12,7 +12,7 @@ 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
14
|
var svgToBase64_1 = __importDefault(require("./../../../../utils/svgToBase64"));
|
|
15
|
-
exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n ", "\n label.label {\n display: block;\n cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\n }\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n ", "\n label.label {\n display: block;\n cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n font: var(--body-regular-13-16);\n }\n }\n"])), function (props) { return props.$hasNoneClick && "\n user-select:none;\n pointer-events:none;\n "; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementChecked" })), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
|
|
15
|
+
exports.BasicStyled = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n ", "\n label.label {\n display: block;\n cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n cursor: inherit;\n font: var(--body-regular-13-16);\n }\n }\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n cursor: pointer;\n ", "\n input[type=\"radio\"] {\n height: 0;\n width: 0;\n opacity: 0;\n z-index: -1;\n position: absolute;\n\n &:checked ~ .indicator {\n background-image: url('", "');\n }\n }\n\n div.indicator {\n flex: 0 0 auto;\n background-image: url('", "');\n background-size: 100% 100%;\n display: block;\n position: relative;\n margin: 0 ", " 0 0;\n width: ", ";\n height: ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n div.labelsWrapper {\n position: relative;\n display: grid;\n row-gap: 8px;\n cursor: ", ";\n margin: 0;\n color: ", ";\n ", "\n label.label {\n display: block;\n cursor: inherit;\n font: ", ";\n }\n\n label.description {\n display: block;\n margin: 0;\n cursor: inherit;\n font: var(--body-regular-13-16);\n }\n }\n"])), function (props) { return props.$hasNoneClick && "\n user-select:none;\n pointer-events:none;\n "; }, (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementChecked" })), function (props) { return props.$disabled ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#C2C3CE", name: "RadioButtonElementDisabled" })) : (props.$valid ? (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#9763F6", name: "RadioButtonElementUnchecked" })) : (0, svgToBase64_1.default)((0, jsx_runtime_1.jsx)(Icon_1.default, { hasWrapper: false, color: "#FF1F1F", name: "RadioButtonElementInvalid" }))); }, function (props) { return props.$labelOffset; }, function (props) {
|
|
16
16
|
switch (props.$size) {
|
|
17
17
|
case 'xsmall':
|
|
18
18
|
return "16px";
|