krl-alfred 1.69.1 → 1.70.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/Banner/layouts/layout1/layout1.styled.js +1 -1
- package/dist/components/Banner/stories/Banner.stories.js +2 -2
- package/dist/components/Breadcrumbs/Breadcrumbs.styled.js +4 -4
- package/dist/components/Button/Button.styled.js +5 -4
- package/dist/components/ListGroup/ListGroup.js +1 -1
- package/dist/components/ListGroup/ListGroup.styled.js +1 -1
- package/dist/components/OtpInput/Otp.js +127 -13
- package/dist/components/OtpInput/OtpInput.styled.js +10 -3
- package/dist/components/OtpInput/stories/OtpInput.stories.js +14 -3
- package/dist/components/ProductCard/ProductCard.styled.js +1 -1
- package/dist/components/Toast/Toast.styled.js +1 -1
- package/dist/components/ValueProposition/layouts/popover/Popover.styled.js +1 -1
- package/dist/enums/keyEnums.js +24 -0
- package/dist/jsons/Banners.js +14 -14
- package/package.json +1 -1
|
@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BannerStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../../../constants/devices");
|
|
13
|
-
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\n } \n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n
|
|
13
|
+
exports.BannerStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\n } \n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n span {\n height: 174px !important;\n }\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"], ["\n max-width: 1050px;\n margin: 0 auto;\n\n .swiper-wrapper {\n align-items: center;\n }\n\n .slick-list {\n border-radius: 0.5rem;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n position: relative;\n overflow: hidden;\n\n @media only screen and ", " {\n background: #f1f1f1;\n }\n }\n .slick-arrow{\n display: none !important;\n }\n\n @media only screen and ", " {\n .slick-active{\n box-shadow: 0 0.375rem 1.875rem 0 #EAE9F0;\n position: relative;\n z-index: 5;\n }\n } \n\n .item {\n padding: 0 5rem;\n display: grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n height: 420px;\n @media only screen and ", " {\n padding: 0;\n display: block;\n height: auto;\n }\n\n .text {\n @media only screen and ", " {\n display: none;\n }\n\n .title {\n margin-bottom: 1.5rem;\n display: block;\n }\n\n .description {\n margin-top: 0;\n margin-bottom: 1.5rem;\n display: block;\n }\n }\n\n .textMobile {\n display: none;\n background-color: var(--primary-shades-dark);\n padding: 0 1rem;\n color: white;\n align-items: center;\n justify-content: space-between;\n border-radius: 0 0 8px 8px;\n height: 70px;\n svg {\n path {\n stroke: white;\n }\n }\n\n b {\n display: block;\n }\n\n @media only screen and ", " {\n display: flex;\n }\n }\n\n .img {\n text-align: end;\n img {\n display: inline-block !important;\n max-height: 100%;\n max-width: 100%;\n @media only screen and ", " {\n height: auto;\n }\n }\n\n @media only screen and ", " {\n padding: 0;\n text-align: center;\n height: 228px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: white;\n span {\n height: 174px !important;\n }\n }\n }\n }\n\n .thumbnailSlider {\n margin-top: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n @media only screen and ", " {\n display: none;\n }\n\n .thumbnailInner {\n justify-content: center;\n display: flex;\n align-items: center;\n margin: 0 2.5rem;\n\n .thumbnailItem {\n border: 1px solid var(--dark-opacity-10);\n height: 50px;\n border-radius: 0.5rem;\n position: relative;\n overflow: hidden;\n margin: 0 4px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n width: 70px;\n padding: 8px;\n box-sizing: border-box;\n cursor: pointer;\n transition: all .1s ease;\n\n &:is(.active) {\n border-color: var(--primary);\n }\n\n > * {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n }\n }\n }\n\n .navigation {\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: 48px;\n height: 48px;\n box-shadow: 0 0 16px 0 white;\n border: 0;\n background-color: white;\n\n svg {\n path {\n stroke: var(--primary);\n }\n }\n\n &:hover {\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n }\n }\n }\n"])), devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg, devices_1.devices.lg);
|
|
14
14
|
var templateObject_1;
|
|
@@ -26,7 +26,7 @@ exports.Default = {
|
|
|
26
26
|
exports.Layout2 = {
|
|
27
27
|
args: {
|
|
28
28
|
data: {
|
|
29
|
-
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/extendOrderBanner.svg", height: "308px" }),
|
|
29
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/extendOrderBanner.svg", height: "308px" }),
|
|
30
30
|
title: "Kiralama s\u00FCreni uzat veya cihaz\u0131 sat\u0131n al",
|
|
31
31
|
description: "Cihaz\u0131 daha uzun s\u00FCreli kullanmaya karar verirsen kolayca i\u015Flem yapabilirsin! Kiralaman\u0131n son g\u00FCn\u00FCne kadar dilersen kira s\u00FCreni sipari\u015Flerim panelinden kolayca uzatabilir veya \u2018kiralad\u0131\u011F\u0131m\u0131 sat\u0131n al\u2019 \u00F6zelli\u011Fiyle 2. el de\u011Ferinden sat\u0131n alabilirsin.",
|
|
32
32
|
},
|
|
@@ -37,7 +37,7 @@ exports.Layout2 = {
|
|
|
37
37
|
exports.Layout3 = {
|
|
38
38
|
args: {
|
|
39
39
|
data: {
|
|
40
|
-
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/kiralama-uzat-main.
|
|
40
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/kiralama-uzat-main.svg", height: "422px" }),
|
|
41
41
|
title: "\u0130ster kira s\u00FCreni uzat, ister sat\u0131n al!",
|
|
42
42
|
description: "Sipari\u015F s\u00FCrecin tamamland\u0131ktan sonra sipari\u015Flerim sayfandan kira s\u00FCreni kolayca uzatabilir veya denedikten sonra cihaz\u0131 sat\u0131n alabilirsin! \u00DCstelik dilersen kiralad\u0131\u011F\u0131n cihaz\u0131 2. el olarak sat\u0131n alabilir, dilersen de s\u0131f\u0131r cihaz sipari\u015Fi olu\u015Fturabilirsin. \u00D6nce Kiralars\u0131n, denedikten sonra istersen sat\u0131n al\u0131rs\u0131n!",
|
|
43
43
|
},
|
|
@@ -12,10 +12,10 @@ 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
|
-
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.
|
|
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
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
|
-
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 path{\n stroke:var(--dark-opacity-50);\n }\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 path{\n stroke:var(--dark-opacity-50);\n }\n }\n"])), devices_1.devices.
|
|
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.
|
|
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 path{\n stroke:var(--dark-opacity-50);\n }\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 path{\n stroke:var(--dark-opacity-50);\n }\n }\n"])), devices_1.devices.xl);
|
|
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.xl);
|
|
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
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"; });
|
|
@@ -23,6 +23,6 @@ exports.SubCategoryItem = styled_components_1.default.li(templateObject_10 || (t
|
|
|
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 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.
|
|
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 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);
|
|
27
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;
|
|
@@ -29,10 +29,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
29
29
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
30
|
exports.IconStyled = exports.ButtonStyled = void 0;
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
32
|
+
var devices_1 = require("../../constants/devices");
|
|
33
|
+
var primary = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path, rect{\n stroke : white;\n }\n circle{\n fill : white; \n ~ path{\n stroke : var(--primary);\n }\n } \n }\n\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\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 svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n } \n }\n }\n"], ["\n background-color: var(--primary);\n color: white;\n border: none;\n svg{\n path, rect{\n stroke : white;\n }\n circle{\n fill : white; \n ~ path{\n stroke : var(--primary);\n }\n } \n }\n\n @media only screen and ", " {\n &:hover {\n background-color: var(--primary-hover);\n }\n }\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 svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n } \n }\n }\n"])), devices_1.devices.mdUp);
|
|
34
|
+
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 svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: var(--primary-opacity-5);\n color: var(--primary);\n border: none;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n\n \n\n &:active {\n color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n background-color: var(--dark-opacity-5);\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
35
|
+
var inverted = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 1px solid;\n border-color: var(--primary);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary-hover);\n border-color: var(--primary-hover);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n }\n \n \n\n &:active {\n color: var(--primary-press);\n border-color: var(--primary-press);\n svg{\n path, rect{\n stroke : var(--primary-press);\n }\n circle{\n fill : var(--primary-press);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n border-color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
36
|
+
var ghost = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n }\n\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"], ["\n background-color: transparent;\n color: var(--primary);\n border: 0;\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n\n @media only screen and ", " {\n &:hover {\n color: var(--primary);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary);\n }\n circle{\n fill : var(--primary);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n }\n\n\n \n &:active {\n color: var(--primary-hover);\n background-color: var(--primary-opacity-5);\n svg{\n path, rect{\n stroke : var(--primary-hover);\n }\n circle{\n fill : var(--primary-hover);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n\n &:disabled:not(.loading) {\n color: var(--dark-opacity-25);\n svg{\n path, rect{\n stroke : var(--dark-opacity-25);\n }\n circle{\n fill : var(--dark-opacity-25);\n ~ path{\n stroke : white;\n }\n }\n }\n }\n"])), devices_1.devices.mdUp);
|
|
36
37
|
exports.ButtonStyled = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ", ";\n padding: ", ";\n font-family: var(--font-family-sans-serif);\n cursor: pointer;\n transition: all .2s;\n width: ", ";\n ", "\n height: ", ";\n &:disabled {\n cursor: not-allowed;\n }\n .children{\n margin-right: ", ";\n &:empty{\n margin-right: 0;\n }\n }\n"])), function (props) { return props.size === 'xsmall' ? '4px' : '8px'; }, function (props) { return props.width ? '0' : '0 24px'; }, function (props) { return props.width; }, function (props) {
|
|
37
38
|
switch (props.variant) {
|
|
38
39
|
case 'primary':
|
|
@@ -5,7 +5,7 @@ var ListGroup_styled_1 = require("./ListGroup.styled");
|
|
|
5
5
|
var ListGroup = function (props) {
|
|
6
6
|
var data = props.data;
|
|
7
7
|
return ((0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupStyled, { children: data === null || data === void 0 ? void 0 : data.map(function (item, key) {
|
|
8
|
-
return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, { isActive: item.isActive, onClick: item.onClick, className: "
|
|
8
|
+
return (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItem, { children: (0, jsx_runtime_1.jsx)(ListGroup_styled_1.ListGroupItemButton, { isActive: item.isActive, onClick: item.onClick, className: "title-bold-16-19", children: item.title }) }, key);
|
|
9
9
|
}) }));
|
|
10
10
|
};
|
|
11
11
|
ListGroup.defaultProps = {};
|
|
@@ -11,5 +11,5 @@ exports.ListGroupItemButton = exports.ListGroupItem = exports.ListGroupStyled =
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.ListGroupStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n padding: 0;\n margin: 0;\n"], ["\n display: block;\n padding: 0;\n margin: 0;\n"])));
|
|
13
13
|
exports.ListGroupItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 0;\n margin: 0; \n display: block;\n + li {\n margin-top: 1rem;\n }\n"], ["\n padding: 0;\n margin: 0; \n display: block;\n + li {\n margin-top: 1rem;\n }\n"])));
|
|
14
|
-
exports.ListGroupItemButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 1.5rem;\n margin: 0;\n height:
|
|
14
|
+
exports.ListGroupItemButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0 1.5rem;\n margin: 0;\n height: 67px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: 0.5rem;\n background-color: ", ";\n cursor: pointer;\n color: ", ";\n border: 0;\n width: 100%;\n font-family: inherit;\n position: relative;\n outline: none;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n border: ", " ;\n }\n"], ["\n padding: 0 1.5rem;\n margin: 0;\n height: 67px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: 0.5rem;\n background-color: ", ";\n cursor: pointer;\n color: ", ";\n border: 0;\n width: 100%;\n font-family: inherit;\n position: relative;\n outline: none;\n &:before{\n content: \"\";\n position: absolute;\n inset: 0;\n user-select: none;\n pointer-events: none;\n border-radius: inherit;\n border: ", " ;\n }\n"])), function (props) { return props.isActive ? "#fff" : "var(--dark-opacity-3)"; }, function (props) { return props.isActive ? "var(--primary)" : "var(--dark)"; }, function (props) { return props.isActive ? "2px solid var(--primary)" : "none"; });
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,25 +1,139 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
16
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
6
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
|
+
var react_1 = require("react");
|
|
18
8
|
var OtpInput_styled_1 = require("./OtpInput.styled");
|
|
19
|
-
var react_otp_input_1 = __importDefault(require("react-otp-input"));
|
|
20
9
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
10
|
+
var keyEnums_1 = require("../../enums/keyEnums");
|
|
11
|
+
var keyDownEventName = 'keydown';
|
|
21
12
|
var Otp = function (props) {
|
|
22
|
-
|
|
13
|
+
var value = props.value, onInputChange = props.onInputChange, inputSize = props.inputSize, hasError = props.hasError, errorMessage = props.errorMessage, autoFocus = props.autoFocus;
|
|
14
|
+
var _a = (0, react_1.useState)(value), otpValue = _a[0], setOtpValue = _a[1];
|
|
15
|
+
var inputRef = (0, react_1.useRef)(null);
|
|
16
|
+
(0, react_1.useEffect)(function () {
|
|
17
|
+
setUserFocus();
|
|
18
|
+
}, [hasError]);
|
|
19
|
+
(0, react_1.useEffect)(function () {
|
|
20
|
+
if (value === undefined || value === null || value === '') {
|
|
21
|
+
setOtpValue('');
|
|
22
|
+
}
|
|
23
|
+
else if (!isNaN(Number(value))) {
|
|
24
|
+
setOtpValue(value.toString());
|
|
25
|
+
}
|
|
26
|
+
}, [value]);
|
|
27
|
+
var addKeydownEventListener = function () {
|
|
28
|
+
window.addEventListener(keyDownEventName, handleOnKeyDown);
|
|
29
|
+
};
|
|
30
|
+
var removeKeyDownEventListener = function () {
|
|
31
|
+
window.removeEventListener(keyDownEventName, handleOnKeyDown);
|
|
32
|
+
};
|
|
33
|
+
var isShortcutKey = function (keyCode) {
|
|
34
|
+
return keyCode === keyEnums_1.KeyConditions.CTRL_V;
|
|
35
|
+
};
|
|
36
|
+
var isKeyboardNumber = function (keyCode) {
|
|
37
|
+
return (keyCode > keyEnums_1.KeyConditions.KEYBOARD_MIN &&
|
|
38
|
+
keyCode < keyEnums_1.KeyConditions.KEYBOARD_MAX);
|
|
39
|
+
};
|
|
40
|
+
var isNumberPad = function (keyCode) {
|
|
41
|
+
return (keyCode > keyEnums_1.KeyConditions.NUMBERPAD_MIN &&
|
|
42
|
+
keyCode < keyEnums_1.KeyConditions.NUMBERPAD_MAX);
|
|
43
|
+
};
|
|
44
|
+
var handleOnKeyDown = (0, react_1.useCallback)(function (event) {
|
|
45
|
+
var key = event.key, keyCode = event.keyCode;
|
|
46
|
+
if (keyCode === keyEnums_1.KeyCodesEnums.BACKSPACE ||
|
|
47
|
+
key === keyEnums_1.KeyEnums.BACKSPACE ||
|
|
48
|
+
keyCode === keyEnums_1.KeyCodesEnums.DELETE ||
|
|
49
|
+
key === keyEnums_1.KeyEnums.DELETE) {
|
|
50
|
+
event.preventDefault();
|
|
51
|
+
removeLastCharacter();
|
|
52
|
+
}
|
|
53
|
+
else if (isShortcutKey(event.keyCode)) {
|
|
54
|
+
event.preventDefault();
|
|
55
|
+
onShortcutPaste();
|
|
56
|
+
}
|
|
57
|
+
else if ((isKeyboardNumber(event.keyCode) || isNumberPad(event.keyCode)) &&
|
|
58
|
+
!isNaN(Number(event.key))) {
|
|
59
|
+
event.preventDefault();
|
|
60
|
+
addNewCharacter(event.key);
|
|
61
|
+
}
|
|
62
|
+
}, []);
|
|
63
|
+
(0, react_1.useEffect)(function () {
|
|
64
|
+
addKeydownEventListener();
|
|
65
|
+
setUserFocus();
|
|
66
|
+
return function () {
|
|
67
|
+
removeKeyDownEventListener();
|
|
68
|
+
};
|
|
69
|
+
}, [handleOnKeyDown]);
|
|
70
|
+
var removeLastCharacter = function () {
|
|
71
|
+
var newValue = '';
|
|
72
|
+
setOtpValue(function (prevValue) {
|
|
73
|
+
newValue = prevValue ? prevValue.slice(0, -1) : '';
|
|
74
|
+
return newValue;
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
var addNewCharacter = function (character) {
|
|
78
|
+
var newValue = '';
|
|
79
|
+
setOtpValue(function (prevValue) {
|
|
80
|
+
newValue = prevValue || '';
|
|
81
|
+
if (!prevValue || (prevValue && prevValue.length < inputSize)) {
|
|
82
|
+
newValue += character;
|
|
83
|
+
}
|
|
84
|
+
return newValue;
|
|
85
|
+
});
|
|
86
|
+
};
|
|
87
|
+
(0, react_1.useEffect)(function () {
|
|
88
|
+
if (otpValue)
|
|
89
|
+
onInputChange(otpValue);
|
|
90
|
+
}, [otpValue]);
|
|
91
|
+
var onShortcutPaste = function () {
|
|
92
|
+
var _a;
|
|
93
|
+
var result = false;
|
|
94
|
+
if ((_a = window === null || window === void 0 ? void 0 : window.navigator) === null || _a === void 0 ? void 0 : _a.clipboard) {
|
|
95
|
+
try {
|
|
96
|
+
window.navigator.clipboard.readText().then(function (text) {
|
|
97
|
+
insertFromClipboard(text);
|
|
98
|
+
});
|
|
99
|
+
result = true;
|
|
100
|
+
}
|
|
101
|
+
catch (_) {
|
|
102
|
+
result = false;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
var insertFromClipboard = function (stringData) {
|
|
107
|
+
var intData = Number(stringData);
|
|
108
|
+
if (!isNaN(intData)) {
|
|
109
|
+
var formattedData = intData.toString();
|
|
110
|
+
setOtpValue(formattedData);
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
var setUserFocus = function () {
|
|
114
|
+
if (inputRef.current) {
|
|
115
|
+
inputRef.current.focus();
|
|
116
|
+
inputRef.current.select();
|
|
117
|
+
inputRef.current.click();
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
var isMobileDevice = function () { return /Mobi/.test(window.navigator.userAgent); };
|
|
121
|
+
var onInputBlur = function () {
|
|
122
|
+
if (!isMobileDevice()) {
|
|
123
|
+
setUserFocus();
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
var onChange = function (event) {
|
|
127
|
+
var _a;
|
|
128
|
+
event.preventDefault();
|
|
129
|
+
if (!isNaN(Number((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value))) {
|
|
130
|
+
setOtpValue(event.target.value);
|
|
131
|
+
}
|
|
132
|
+
};
|
|
133
|
+
return (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpInputWrapper, { children: [(0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpanWrapper, { onClick: setUserFocus, children: Array.from({ length: inputSize }, function (_, index) { return index; }).map(function (index) { return ((0, jsx_runtime_1.jsx)(OtpInput_styled_1.OtpSpan, { active: (otpValue ? index === otpValue.length : index === 0) ||
|
|
134
|
+
(otpValue &&
|
|
135
|
+
otpValue.length === inputSize &&
|
|
136
|
+
index === inputSize - 1), hasError: hasError, children: otpValue && otpValue[index] }, index)); }) }), hasError && (0, jsx_runtime_1.jsxs)(OtpInput_styled_1.OtpError, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { className: "caption-semi-bold-11-13", children: errorMessage })] }), (0, jsx_runtime_1.jsx)("input", { type: 'tel', autoComplete: 'one-time-code', autoFocus: autoFocus, value: otpValue, maxLength: inputSize, ref: inputRef, onBlur: onInputBlur, onChange: onChange })] });
|
|
23
137
|
};
|
|
24
138
|
Otp.defaultProps = {
|
|
25
139
|
inputSize: 4,
|
|
@@ -7,7 +7,14 @@ 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.
|
|
10
|
+
exports.OtpError = exports.OtpSpan = exports.OtpSpanWrapper = exports.OtpInputWrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.
|
|
13
|
-
|
|
12
|
+
exports.OtpInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n \n input {\n background-color: transparent;\n border: none;\n caret-color: transparent;\n cursor: default;\n height: 0;\n opacity: 0;\n outline: none;\n width: 0;\n z-index: 0;\n }\n"], ["\n display: flex;\n flex-direction: column;\n \n input {\n background-color: transparent;\n border: none;\n caret-color: transparent;\n cursor: default;\n height: 0;\n opacity: 0;\n outline: none;\n width: 0;\n z-index: 0;\n }\n"])));
|
|
13
|
+
exports.OtpSpanWrapper = styled_components_1.default.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-flex;\n gap: 18.33px;\n \n"], ["\n display: inline-flex;\n gap: 18.33px;\n \n"])));
|
|
14
|
+
exports.OtpSpan = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n font-family: var(--font-family-sans-serif);\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font-weight: 600;\n font-size: 40px;\n line-height: 19px;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n\n @keyframes blink-caret {\n from,\n to {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n\n ", "\n"], ["\n font-family: var(--font-family-sans-serif);\n border: none;\n width: 48px !important;\n height: 48px;\n border-bottom: 2px solid ", ";\n text-align: center;\n color: ", ";\n font-weight: 600;\n font-size: 40px;\n line-height: 19px;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n\n @keyframes blink-caret {\n from,\n to {\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n }\n\n ", "\n"])), function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-10)'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (_a) {
|
|
15
|
+
var active = _a.active, hasError = _a.hasError;
|
|
16
|
+
return active &&
|
|
17
|
+
"\n border-color: ".concat(hasError ? 'var(--red)' : 'var(--dark)', ";\n\n &:empty:before {\n animation: blink-caret 0.9s step-end infinite;\n content: \"|\";\n color:var(--dark);\n display: inline-flex;\n font-weight: 100;\n font-size: 32px;\n margin-top: -4px;\n\n }\n ");
|
|
18
|
+
});
|
|
19
|
+
exports.OtpError = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n \n"], ["\n display: flex;\n align-items: center;\n margin-top: 8px;\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n color: var(--red);\n }\n \n"])));
|
|
20
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -4,10 +4,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.Default = void 0;
|
|
7
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
var react_1 = require("react");
|
|
7
9
|
var Otp_1 = __importDefault(require("../Otp"));
|
|
10
|
+
var OtpStory = function (props) {
|
|
11
|
+
var _a = (0, react_1.useState)(null), value = _a[0], setValue = _a[1];
|
|
12
|
+
var onChange = function (val) {
|
|
13
|
+
setValue(val);
|
|
14
|
+
};
|
|
15
|
+
return (0, jsx_runtime_1.jsx)(Otp_1.default, { value: value, onInputChange: onChange, autoFocus: props.autoFocus, errorMessage: props.errorMessage, hasError: props.hasError, inputSize: props.inputSize });
|
|
16
|
+
};
|
|
8
17
|
exports.default = {
|
|
9
18
|
title: 'Components/OtpInput',
|
|
10
|
-
component:
|
|
19
|
+
component: OtpStory,
|
|
11
20
|
tags: ['autodocs'],
|
|
12
21
|
argTypes: {
|
|
13
22
|
onInputChange: { action: 'changed' },
|
|
@@ -15,7 +24,9 @@ exports.default = {
|
|
|
15
24
|
};
|
|
16
25
|
exports.Default = {
|
|
17
26
|
args: {
|
|
18
|
-
|
|
19
|
-
|
|
27
|
+
autoFocus: true,
|
|
28
|
+
errorMessage: "Hata Mesajı",
|
|
29
|
+
hasError: false,
|
|
30
|
+
inputSize: 4
|
|
20
31
|
},
|
|
21
32
|
};
|
|
@@ -11,7 +11,7 @@ exports.HorizontalSmStyled = exports.HorizontalStyled = exports.StandartStyled =
|
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
13
|
exports.ChecklistStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .productCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"], ["\n display: block;\n max-width: 634px;\n ", "\n .productCardInner {\n border: 1px solid var(--dark-opacity-10);\n border-radius: 8px;\n padding: 24px;\n background-color: white;\n grid-template-columns: auto auto 1fr;\n display: grid;\n justify-content: flex-start;\n @media only screen and ", " {\n padding: 24px 16px;\n }\n .productCardCheckboxContent{\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n .indicator{ \n margin-right: 24px;\n @media only screen and ", " {\n margin-right: 8px;\n }\n }\n }\n .productCardImg {\n width: 64px;\n height: 64px;\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n margin-right: 16px;\n overflow: hidden;\n @media only screen and ", " {\n margin-right: 16px;\n }\n\n > * {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n }\n }\n .productCardTitle{\n min-height: 66px;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n text-align: start;\n }\n .productCardContent{ \n margin: 24px auto 0 0;\n grid-column-start: 1;\n grid-column-end: 4;\n width: 100%;\n }\n }\n"])), function (props) { return props.disabled ? "\n user-select:none;\n pointer-events:none;\n " : ""; }, devices_1.devices.sm, devices_1.devices.sm, devices_1.devices.sm);
|
|
14
|
-
exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: ", ";\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: ", ";\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n\n > * {\n width: 100%;\n
|
|
14
|
+
exports.StandartStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: ", ";\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: ", ";\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n .productCardContent{ \n padding: ", ";\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: ", ";\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: ", ";\n height: ", ";\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n"], ["\n box-shadow: 0 6px 30px 0 #EAE9F0;\n border-radius: 0.5rem;\n min-width: 240px;\n padding: ", ";\n transition: all .2s ease;\n position: relative;\n box-sizing: border-box;\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n &:hover {\n box-shadow: 0 6px 30px 0 #B8B8CD;\n }\n\n .img {\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-5);\n background: #FFF;\n position: relative;\n overflow: hidden;\n height: ", ";\n box-sizing: border-box;\n z-index: 1;\n text-align: center;\n\n > * {\n width: 100%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n .productCardContent{ \n padding: ", ";\n .productCardTitle{\n display: block;\n color: var(--dark);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n .productCardDescription{\n display: block;\n margin-top: 0.5rem;\n color: var(--grey-40);\n margin-bottom: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n height: ", ";\n word-break: break-word;\n }\n\n .productCardPriceContent {\n display: grid;\n align-items: ", ";\n justify-content: flex-start;\n height: ", ";\n grid-template-columns: ", ";\n\n .discountRate {\n margin-right: 0.5rem;\n width: ", ";\n height: ", ";\n border-radius: 8px;\n background-color: var(--primary-opacity-10);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oldPrice, .newPrice {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n }\n\n .oldPrice {\n color: var(--dark-opacity-25);\n margin-bottom: 2px;\n\n .price, .period {\n text-decoration: line-through;\n }\n }\n\n .newPrice {\n\n }\n }\n }\n"])), function (props) { return props.isMobile ? '1.5rem' : '1rem'; }, function (props) { return props.isMobile ? '215px' : '150px'; }, function (props) { return props.isMobile ? '1.5rem 0 0.5rem 0' : '1rem 0 0.5rem 0'; }, function (props) { return props.isMobile ? '44px' : '38px'; }, function (props) { return props.isMobile ? '1.5rem' : '1.5rem'; }, function (props) { return props.isMobile ? '37px' : '34px'; }, function (props) { return props.discountRate ? 'center' : 'end'; }, function (props) { return props.isMobile ? '48px' : '36px'; }, function (props) { return props.discountRate ? 'auto 1fr' : '1fr'; }, function (props) { return props.isMobile ? '65px' : '48px'; }, function (props) { return props.isMobile ? '48px' : '36px'; });
|
|
15
15
|
exports.HorizontalStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n\n .period {\n\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n\n &:hover {\n background: var(--dark-opacity-3);\n }\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: center;\n\n .img {\n border: 1px solid var(--dark-opacity-5);\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: 142px;\n height: 88px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n @media only screen and ", " {\n margin-right: 0.5rem;\n width: 71px;\n height: 50px;\n box-shadow: 0 6px 30px 0 var(--dark-opacity-5);\n border: 0;\n }\n\n > * {\n width: 100%;\n height: 100%;\n object-fit: contain;\n object-position: center center;\n display: block;\n }\n }\n .title{\n display: block;\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n\n .description {\n color: var(--grey-50);\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n\n .priceContent {\n display: flex;\n align-items: end;\n justify-content: flex-start;\n\n .price {\n margin-right: 2px;\n }\n\n .period {\n\n }\n }\n }\n"])), devices_1.devices.sm);
|
|
16
16
|
exports.HorizontalSmStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n border: 1px solid var(--grey-10);\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalSmWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n\n .img {\n border: ", ";\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n\n > * {\n vertical-align: middle !important;\n }\n }\n\n .text {\n padding-right: 0.5rem;\n .title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n }\n\n .priceContent {\n text-align: end;\n\n .period {\n display: block;\n margin-bottom: 4px;\n }\n\n .price {\n display: block;\n }\n }\n }\n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 8px;\n border: 1px solid var(--grey-10);\n\n a {\n text-decoration: none;\n color: inherit;\n }\n\n .horizontalSmWrapper {\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 1rem;\n\n .img {\n border: ", ";\n border-radius: 8px;\n position: relative;\n overflow: hidden;\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 1rem;\n background: white;\n\n > * {\n vertical-align: middle !important;\n }\n }\n\n .text {\n padding-right: 0.5rem;\n .title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n }\n }\n\n .priceContent {\n text-align: end;\n\n .period {\n display: block;\n margin-bottom: 4px;\n }\n\n .price {\n display: block;\n }\n }\n }\n"])), function (props) { return props.hasImageBorder ? '1px solid var(--dark-opacity-5)' : 'none'; }, function (props) { return props.imageWidth ? props.imageWidth : '71px'; }, function (props) { return props.imageHeight ? props.imageHeight : '50px'; });
|
|
17
17
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.OverlayStyled = exports.ToastStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.ToastStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-width: calc(100vw - 2rem);\n padding: 2rem;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n min-height: ", ";\n > div{\n width: 100%;\n }\n\n\n .icon{\n\n width: ", ";\n\n height: ", ";\n border-radius: 50%;\n background-color: var(--primary);\n text-align: center;\n align-items: center;\n justify-content: center;\n display: flex;\n margin: 0 auto;\n svg{\n\n width: ", ";\n\n height: ", ";\n path{\n fill: #fff;\n }\n }\n }\n\n .title {\n margin: 2rem 0 0 0;\n padding: 0;\n }\n \n .content {\n margin:
|
|
12
|
+
exports.ToastStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-width: calc(100vw - 2rem);\n padding: 2rem;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n min-height: ", ";\n > div{\n width: 100%;\n }\n\n\n .icon{\n\n width: ", ";\n\n height: ", ";\n border-radius: 50%;\n background-color: var(--primary);\n text-align: center;\n align-items: center;\n justify-content: center;\n display: flex;\n margin: 0 auto 2rem auto;\n svg{\n\n width: ", ";\n\n height: ", ";\n path{\n fill: #fff;\n }\n }\n }\n\n .title {\n margin: 2rem 0 0 0;\n padding: 0;\n }\n \n .content {\n margin: 0 0 0 0;\n &:is(:empty){\n display: none;\n }\n }\n .bottom{\n margin: 2rem 0 0 0;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-width: calc(100vw - 2rem);\n padding: 2rem;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n min-height: ", ";\n > div{\n width: 100%;\n }\n\n\n .icon{\n\n width: ", ";\n\n height: ", ";\n border-radius: 50%;\n background-color: var(--primary);\n text-align: center;\n align-items: center;\n justify-content: center;\n display: flex;\n margin: 0 auto 2rem auto;\n svg{\n\n width: ", ";\n\n height: ", ";\n path{\n fill: #fff;\n }\n }\n }\n\n .title {\n margin: 2rem 0 0 0;\n padding: 0;\n }\n \n .content {\n margin: 0 0 0 0;\n &:is(:empty){\n display: none;\n }\n }\n .bottom{\n margin: 2rem 0 0 0;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), function (props) {
|
|
13
13
|
switch (props.size) {
|
|
14
14
|
case 'small':
|
|
15
15
|
return "249px";
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.ImageWrapper = exports.Description = exports.Title = exports.Close = exports.TextWrapper = exports.PopoverStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.PopoverStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 456px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n aspect-ratio: 1/1;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n ", "\n"], ["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n max-width: 456px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n aspect-ratio: 1/1;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n ", "\n"])), function (props) { return props.show && "\n opacity: 1;\n user-select: initial;\n pointer-events: initial;\n transform: scale(1);\n "; });
|
|
12
|
+
exports.PopoverStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n //max-width: 456px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n aspect-ratio: 1/1;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n ", "\n"], ["\n padding: 1.5rem;\n border-radius: 8px;\n background: #FFF;\n box-shadow: 0 6px 30px 0 #EAE9F0;\n display: grid;\n grid-template-columns: 1fr;\n align-items: center;\n //max-width: 456px;\n color: var(--dark);\n text-align: start;\n align-content: center;\n position: relative;\n box-sizing: border-box;\n aspect-ratio: 1/1;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n transition: all .2s cubic-bezier(0,0,.2,1) 0s;\n transform: scale(.9);\n ", "\n"])), function (props) { return props.show && "\n opacity: 1;\n user-select: initial;\n pointer-events: initial;\n transform: scale(1);\n "; });
|
|
13
13
|
exports.TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin-top: 1rem;\n"], ["\n margin-top: 1rem;\n"])));
|
|
14
14
|
exports.Close = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n right: 1.5rem;\n top: 1.5rem;\n cursor: pointer;\n width: 32px;\n height: 32px;\n border-radius: 8px;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n"], ["\n position: absolute;\n right: 1.5rem;\n top: 1.5rem;\n cursor: pointer;\n width: 32px;\n height: 32px;\n border-radius: 8px;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n"])));
|
|
15
15
|
exports.Title = styled_components_1.default.strong(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: block;\n"], ["\n display: block;\n"])));
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.KeyConditions = exports.KeyEnums = exports.KeyCodesEnums = void 0;
|
|
4
|
+
exports.KeyCodesEnums = {
|
|
5
|
+
BACKSPACE: '8',
|
|
6
|
+
LEFT_ARROW: '37',
|
|
7
|
+
RIGHT_ARROW: '37',
|
|
8
|
+
DELETE: '46',
|
|
9
|
+
SPACE: '32'
|
|
10
|
+
};
|
|
11
|
+
exports.KeyEnums = {
|
|
12
|
+
BACKSPACE: 'Backspace',
|
|
13
|
+
LEFT_ARROW: 'Delete',
|
|
14
|
+
RIGHT_ARROW: 'ArrowLeft',
|
|
15
|
+
DELETE: 'ArrowRight',
|
|
16
|
+
SPACE: 'Spacebar'
|
|
17
|
+
};
|
|
18
|
+
exports.KeyConditions = {
|
|
19
|
+
KEYBOARD_MIN: 47,
|
|
20
|
+
KEYBOARD_MAX: 58,
|
|
21
|
+
NUMBERPAD_MIN: 95,
|
|
22
|
+
NUMBERPAD_MAX: 106,
|
|
23
|
+
CTRL_V: 86,
|
|
24
|
+
};
|
package/dist/jsons/Banners.js
CHANGED
|
@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
exports.default = [
|
|
5
5
|
{
|
|
6
|
-
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/nasil-calisir.svg" }),
|
|
7
|
-
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/nasil-calisir.svg", height: "260px" }),
|
|
6
|
+
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/nasil-calisir.svg" }),
|
|
7
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/nasil-calisir.svg", height: "260px" }),
|
|
8
8
|
title: "K\u0130RALARSIN NED\u0130R?",
|
|
9
9
|
description: 'Kiralarsın, bir süreliğine ihtiyaç duyduğun veya denemek istediğin elektronik cihazları güvenle ve kolayca kiralayabileceğin bir platformdur.',
|
|
10
10
|
shortDesc: 'Kiralarsın nasıl çalışır?<b>Görmek için tıkla!</b>',
|
|
@@ -13,8 +13,8 @@ exports.default = [
|
|
|
13
13
|
hasRightArrow: true,
|
|
14
14
|
},
|
|
15
15
|
{
|
|
16
|
-
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/sehir.svg" }),
|
|
17
|
-
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/sehir.svg", height: "260px" }),
|
|
16
|
+
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/sehir.svg" }),
|
|
17
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/sehir.svg", height: "260px" }),
|
|
18
18
|
title: "K\u0130RALARSIN \u015E\u0130MD\u0130 81 \u0130LDE!",
|
|
19
19
|
description: 'Tüm Türkiye’deki şehirlerden kolayca kiralama yapabilirsin.',
|
|
20
20
|
shortDesc: 'Kiralarsın şimdi 81 ilde! <b>Detaylı bilgi için tıkla.</b>',
|
|
@@ -23,8 +23,8 @@ exports.default = [
|
|
|
23
23
|
hasRightArrow: true,
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
|
-
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/kiralama-uzatma.png" }),
|
|
27
|
-
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/kiralama-uzatma.png", height: "260px" }),
|
|
26
|
+
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/kiralama-uzatma.png" }),
|
|
27
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/kiralama-uzatma.png", height: "260px" }),
|
|
28
28
|
title: 'İSTER KİRALAMA SÜRENİ UZAT, İSTER SATIN AL!',
|
|
29
29
|
description: 'Kiralama süreni siparişlerim panelinden kolayca uzatabilir, veya cihaza gerçekten ihtiyacın olduğuna karar verdiysen satın alabilirsin.',
|
|
30
30
|
shortDesc: 'Kiraladıktan sonra ister süre uzat, ister satın al!',
|
|
@@ -33,8 +33,8 @@ exports.default = [
|
|
|
33
33
|
hasRightArrow: false,
|
|
34
34
|
},
|
|
35
35
|
{
|
|
36
|
-
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/phones.png" }),
|
|
37
|
-
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/phones.png", height: "260px" }),
|
|
36
|
+
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/phones.png" }),
|
|
37
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/phones.png", height: "260px" }),
|
|
38
38
|
title: 'KİRALARSIN, SENİNMİŞ GİBİ KULLANIRSIN!',
|
|
39
39
|
description: 'Alıp almamaya bir türlü karar veremediğin teknolojik cihazı kiralayarak kullanmaya ne dersin?',
|
|
40
40
|
shortDesc: 'Elektronik cihazını kiralayarak kullanmaya ne dersin?',
|
|
@@ -43,8 +43,8 @@ exports.default = [
|
|
|
43
43
|
hasRightArrow: false,
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
|
-
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/drone.png" }),
|
|
47
|
-
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/drone.png", height: "260px" }),
|
|
46
|
+
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/drone.png" }),
|
|
47
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/drone.png", height: "260px" }),
|
|
48
48
|
title: 'ELEKTRONİKTE KİRALAMA DÖNEMİ BAŞLASIN',
|
|
49
49
|
description: 'İhtiyacın olan elektronik cihazı kirala, belirlediğin süre içinde kullan!',
|
|
50
50
|
shortDesc: 'İstediğin cihazı kirala, belirlediğin süre içinde kullan!',
|
|
@@ -53,8 +53,8 @@ exports.default = [
|
|
|
53
53
|
hasRightArrow: false,
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
|
-
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/variousItems.png" }),
|
|
57
|
-
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/variousItems.png", height: "260px" }),
|
|
56
|
+
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/variousItems.png" }),
|
|
57
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/variousItems.png", height: "260px" }),
|
|
58
58
|
title: 'ARTAN DİJİTALLEŞME GEZEGENİMİZİ ETKİLİYOR',
|
|
59
59
|
description: 'Birkaç kez kullanacağın cihazları kiralayarak döngüsel ekonomiye katkı sağlayabilir, e-atıklara birlikte çözüm olabiliriz.',
|
|
60
60
|
shortDesc: 'Cihazlarını kiralayarak döngüsel ekonomiye katkı sağla!',
|
|
@@ -63,8 +63,8 @@ exports.default = [
|
|
|
63
63
|
hasRightArrow: false,
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
|
-
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/
|
|
67
|
-
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/
|
|
66
|
+
thumbnail: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/carbon-notr.svg" }),
|
|
67
|
+
img: (0, jsx_runtime_1.jsx)("img", { src: "https://www.kiralarsin.com/Banners/carbon-notr.svg", height: "260px" }),
|
|
68
68
|
title: "TÜRKİYE'NİN İLK KARBON NÖTR TESLİMAT YAPAN E-TİCARET SİTESİ",
|
|
69
69
|
description: "Ürün taşıması sırasında oluşan karbon ayak izini hesaplıyoruz ve doğrulanmış karbon azalım projeleriyle nötr'lüyoruz.",
|
|
70
70
|
shortDesc: 'Türkiye’nin ilk Karbon Nötr teslimat yapan E-ticaret sitesi Kiralarsın!',
|