krl-alfred 2.17.19 → 2.17.20
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/Icon/iconList/ArrowDown.js +1 -1
- package/dist/components/ProductCardHorizontal/ProductCardHorizontal.js +1 -1
- package/dist/components/SearchBox/SearchBox.styled.js +1 -1
- package/dist/components/StepSlider/StepSlider.js +9 -1
- package/dist/components/StepSlider/StepSlider.styled.js +1 -1
- package/package.json +1 -1
|
@@ -36,5 +36,5 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
36
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
37
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
38
38
|
var React = __importStar(require("react"));
|
|
39
|
-
var SvgArrowDown = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12.
|
|
39
|
+
var SvgArrowDown = function (props) { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M12.0001 19.5V4.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.0245 13.4512L12.0005 19.5012L5.9755 13.4512", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })] }))); };
|
|
40
40
|
exports.default = SvgArrowDown;
|
|
@@ -24,6 +24,6 @@ var ProductCardHorizontal = function (_a) {
|
|
|
24
24
|
var item = _a.item, children = _a.children;
|
|
25
25
|
return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
|
|
26
26
|
};
|
|
27
|
-
return (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$size": size, "$hasLoading": hasLoading }, { children: (0, jsx_runtime_1.jsx)("a", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: size === "small" ? "71px" : "142px", height: size === "small" ? "50px" : "77px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "title" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "400px", height: size === "small" ? "15px" : "19px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "description" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "300px", height: "17px", hasInset: true })] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "priceContent" }, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "150px", height: size === "small" ? "
|
|
27
|
+
return (hasLoading ? ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$size": size, "$hasLoading": hasLoading }, { children: (0, jsx_runtime_1.jsx)("a", { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "img" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: size === "small" ? "71px" : "142px", height: size === "small" ? "50px" : "77px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsxs)("strong", __assign({ className: "title" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "400px", height: size === "small" ? "15px" : "19px", hasInset: true })] })), (0, jsx_runtime_1.jsxs)("p", __assign({ className: "description" }, { children: ["x", (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "300px", height: "17px", hasInset: true })] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "priceContent", style: { marginTop: 4 } }, { children: (0, jsx_runtime_1.jsx)(SkeletonLoader_1.default, { width: "150px", height: size === "small" ? "13px" : "17px" }) }))] }))] })) }) }))) : ((0, jsx_runtime_1.jsx)(ProductCardHorizontal_styled_1.ProductCardHorizontalStyled, __assign({ "$size": size, onClick: onClick }, { children: (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "horizontalWrapper" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "img" }, { children: image })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "text" }, { children: [(0, jsx_runtime_1.jsx)("strong", __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)("p", __assign({ className: "description" }, { children: description })), price && period && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "priceContent" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "price" }, { children: price })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "period" }, { children: "/".concat(period) }))] })))] }))] })) })) }))));
|
|
28
28
|
};
|
|
29
29
|
exports.default = ProductCardHorizontal;
|
|
@@ -31,6 +31,6 @@ exports.LoadingStyled = exports.SearchBoxStyled = void 0;
|
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var devices_1 = require("../../constants/devices");
|
|
33
33
|
var disabledStyles = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0.6;\n pointer-events: none;\n cursor: not-allowed;\n"], ["\n opacity: 0.6;\n pointer-events: none;\n cursor: not-allowed;\n"])));
|
|
34
|
-
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n .shadowBox {\n height: 48px;\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 0.5rem;\n box-shadow: ", ";\n display: ", ";\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 0.5rem;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 54px 8px 24px;\n color: var(--dark);\n font: var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n transition: all 0.2s ease;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:disabled {\n ", ";\n background-color: var(--dark-opacity-5);\n }\n }\n\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n padding: 0;\n border-radius: 0.5rem;\n background: white;\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n &:before{\n content: \"\";\n height: calc(100% + 48px);\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n border-radius: inherit;\n box-shadow: ", ";\n user-select: none;\n pointer-events: none;\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n\n .resultListInner {\n position: relative;\n overflow: hidden;\n border-radius: inherit;\n border: 1px solid var(--dark-opacity-10);\n\n [data-simplebar] {\n height: auto !important;\n max-height: 408px !important;\n padding: 1.5rem !important;\n position: relative;\n z-index: 1;\n background-color: white;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .productCard {\n border-radius: 0.5rem;\n transition: all 0.2s ease;\n outline: none;\n\n &:is(.selected) {\n background: var(--dark-opacity-3);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-opacity-20);\n }\n }\n\n ", "\n\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height:
|
|
34
|
+
exports.SearchBoxStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n .shadowBox {\n height: 48px;\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 0.5rem;\n box-shadow: ", ";\n display: ", ";\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 0.5rem;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 54px 8px 24px;\n color: var(--dark);\n font: var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n transition: all 0.2s ease;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:disabled {\n ", ";\n background-color: var(--dark-opacity-5);\n }\n }\n\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n padding: 0;\n border-radius: 0.5rem;\n background: white;\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n &:before{\n content: \"\";\n height: calc(100% + 48px);\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n border-radius: inherit;\n box-shadow: ", ";\n user-select: none;\n pointer-events: none;\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n\n .resultListInner {\n position: relative;\n overflow: hidden;\n border-radius: inherit;\n border: 1px solid var(--dark-opacity-10);\n\n [data-simplebar] {\n height: auto !important;\n max-height: 408px !important;\n padding: 1.5rem !important;\n position: relative;\n z-index: 1;\n background-color: white;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .productCard {\n border-radius: 0.5rem;\n transition: all 0.2s ease;\n outline: none;\n\n &:is(.selected) {\n background: var(--dark-opacity-3);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-opacity-20);\n }\n }\n\n ", "\n\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 256px;\n [data-simplebar] {\n max-height: 256px !important;\n }\n }\n }\n }\n\n ", "\n"], ["\n position: relative;\n width: 100%;\n\n .shadowBox {\n height: 48px;\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n transform: translateX(-50%);\n border-radius: 0.5rem;\n box-shadow: ", ";\n display: ", ";\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n\n .inputWrapper {\n position: relative;\n z-index: 5;\n border-radius: 0.5rem;\n input {\n box-sizing: border-box;\n width: 100%;\n height: 48px;\n background: white;\n border-radius: 0.5rem;\n border: 1px solid var(--dark-opacity-10);\n padding: 8px 54px 8px 24px;\n color: var(--dark);\n font: var(--body-medium-14-17);\n line-height: normal;\n outline: none;\n transition: all 0.2s ease;\n\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n\n &:disabled {\n ", ";\n background-color: var(--dark-opacity-5);\n }\n }\n\n .icon {\n position: absolute;\n right: 1rem;\n top: 50%;\n transform: translateY(-50%);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 0;\n outline: none;\n cursor: pointer;\n padding: 0;\n color: var(--primary);\n &:hover{\n color: var(--primary-hover);\n }\n }\n }\n\n .resultList {\n padding: 0;\n border-radius: 0.5rem;\n background: white;\n box-sizing: border-box;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 4;\n display: grid;\n row-gap: 1.5rem;\n &:before{\n content: \"\";\n height: calc(100% + 48px);\n position: absolute;\n width: calc(100% - 10px);\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n border-radius: inherit;\n box-shadow: ", ";\n user-select: none;\n pointer-events: none;\n @media only screen and ", " {\n box-shadow: 0 0 16px 0 var(--icon-shadow-color);\n }\n }\n\n .resultListInner {\n position: relative;\n overflow: hidden;\n border-radius: inherit;\n border: 1px solid var(--dark-opacity-10);\n\n [data-simplebar] {\n height: auto !important;\n max-height: 408px !important;\n padding: 1.5rem !important;\n position: relative;\n z-index: 1;\n background-color: white;\n\n .simplebar-track.simplebar-vertical {\n width: 9px !important;\n }\n }\n\n .productCard {\n border-radius: 0.5rem;\n transition: all 0.2s ease;\n outline: none;\n\n &:is(.selected) {\n background: var(--dark-opacity-3);\n }\n\n &:focus-visible {\n box-shadow: 0 0 0 2px var(--primary-opacity-20);\n }\n }\n\n ", "\n\n @media only screen and ", " {\n row-gap: 0.5rem;\n max-height: 256px;\n [data-simplebar] {\n max-height: 256px !important;\n }\n }\n }\n }\n\n ", "\n"])), function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, function (props) { return props.$showResultList ? "none" : "block"; }, devices_1.devices.xl, disabledStyles, function (props) { return props.$size === "small" ? "0 0 16px 0 var(--icon-shadow-color)" : "0 6px 30px 0 var(--icon-shadow-color)"; }, devices_1.devices.xl, function (props) { return props.$size === "small" && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n row-gap: 0.5rem;\n max-height: 256px;\n [data-simplebar] {\n max-height: 256px !important;\n }\n "], ["\n row-gap: 0.5rem;\n max-height: 256px;\n [data-simplebar] {\n max-height: 256px !important;\n }\n "]))); }, devices_1.devices.xl, function (props) { return props.$disabled && disabledStyles; });
|
|
35
35
|
exports.LoadingStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"], ["\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n"])));
|
|
36
36
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -19,7 +19,7 @@ var StepSlider = function (_a) {
|
|
|
19
19
|
var _b = (0, react_1.useState)(selectedValue), internalValue = _b[0], setInternalValue = _b[1];
|
|
20
20
|
var _c = (0, react_1.useState)({}), indicatorStyle = _c[0], setIndicatorStyle = _c[1];
|
|
21
21
|
var sliderRef = (0, react_1.useRef)(null);
|
|
22
|
-
|
|
22
|
+
var handleSetPosition = function () {
|
|
23
23
|
if (sliderRef.current) {
|
|
24
24
|
var selectedIndex = options.findIndex(function (option) { return option.value === internalValue; });
|
|
25
25
|
var selectedOptionElement = sliderRef.current.children[selectedIndex + 1];
|
|
@@ -29,7 +29,15 @@ var StepSlider = function (_a) {
|
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
+
};
|
|
33
|
+
(0, react_1.useEffect)(function () {
|
|
34
|
+
handleSetPosition();
|
|
32
35
|
}, [internalValue, options]);
|
|
36
|
+
(0, react_1.useEffect)(function () {
|
|
37
|
+
setTimeout(function () {
|
|
38
|
+
handleSetPosition();
|
|
39
|
+
}, 50);
|
|
40
|
+
}, []);
|
|
33
41
|
var handleClick = function (value) {
|
|
34
42
|
setInternalValue(value);
|
|
35
43
|
if (onChange) {
|
|
@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n"], ["\n .top {\n display: flex;\n margin-bottom: 1rem;\n font: var(--caption-bold-12-15);\n\n &.justify-between {\n justify-content: space-between;\n }\n\n label {\n margin: 0;\n color: var(--dark-opacity-50);\n display: block;\n }\n }\n"])));
|
|
13
13
|
exports.StepSliderStyled = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n background-color: white;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n height: 48px;\n padding: 0 1.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n margin-bottom: 0.5rem;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n position: relative;\n background-color: white;\n border-radius: 0.5rem;\n border: 1px solid var(--grey-10);\n height: 48px;\n padding: 0 1.5rem;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n margin-bottom: 0.5rem;\n"])));
|
|
14
14
|
exports.IndicatorStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(-16px);\n background-color: white;\n border-radius: 6px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 0;\n width: 64px !important;\n height: 64px;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"], ["\n position: absolute;\n top: 50%;\n transform: translateY(-50%) translateX(-16px);\n background-color: white;\n border-radius: 6px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n z-index: 0;\n width: 64px !important;\n height: 64px;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n"])));
|
|
15
|
-
exports.StepOptionStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-align: center;\n padding: 8px 0;\n border-radius: 6px;\n cursor: pointer;\n color: var(--grey-50);\n background-color: transparent;\n transition: color 0.3s ease;\n z-index: 1;\n font: var(--
|
|
15
|
+
exports.StepOptionStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-align: center;\n padding: 8px 0;\n border-radius: 6px;\n cursor: pointer;\n color: var(--grey-50);\n background-color: transparent;\n transition: color 0.3s ease;\n z-index: 1;\n font: var(--body-semi-bold-14-17);\n min-width: 34px;\n span {\n display: block;\n text-align: center;\n font: var(--body-semi-bold-14-17);\n color: var(--grey-50);\n b {\n display: block;\n font: var(--headline-extra-bold-18-22);\n color: var(--dark);\n }\n }\n"], ["\n text-align: center;\n padding: 8px 0;\n border-radius: 6px;\n cursor: pointer;\n color: var(--grey-50);\n background-color: transparent;\n transition: color 0.3s ease;\n z-index: 1;\n font: var(--body-semi-bold-14-17);\n min-width: 34px;\n span {\n display: block;\n text-align: center;\n font: var(--body-semi-bold-14-17);\n color: var(--grey-50);\n b {\n display: block;\n font: var(--headline-extra-bold-18-22);\n color: var(--dark);\n }\n }\n"])));
|
|
16
16
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|