krl-alfred 2.17.42 → 2.17.44

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.
Files changed (15) hide show
  1. package/dist/components/Input/Input.d.ts +1 -1
  2. package/dist/components/Input/Input.js +76 -15
  3. package/dist/components/Input/Input.styled.js +16 -1
  4. package/dist/components/Input/props.d.ts +2 -0
  5. package/dist/components/Input/props.js +1 -0
  6. package/dist/components/OptionMenu/OptionMenu.js +1 -1
  7. package/dist/components/OptionMenu/OptionMenu.styled.js +1 -1
  8. package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.d.ts +1 -1
  9. package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js +2 -2
  10. package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js +1 -1
  11. package/dist/components/ProductCardHorizontalSm/props.d.ts +2 -0
  12. package/dist/components/ProductCardHorizontalSm/props.js +1 -0
  13. package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.d.ts +1 -0
  14. package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js +1 -0
  15. package/package.json +3 -3
package/dist/components/Input/Input.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { InputProps } from "./props";
2
- declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, ...other }: InputProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const Input: ({ hasError, disabled, label, customLinkText, customLinkHref, onCustomLinkClick, onChange, errorMessage, type, name, width, mask, placeholder, hasCopyButton, readOnly, autoFocus, value, format, visible, infoText, id, isClearable, onClear, hasNumericFormat, inline, minDate, maxDate, filterDate, onCalendarOpen, ...other }: InputProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default Input;
package/dist/components/Input/Input.js CHANGED
@@ -41,11 +41,25 @@ var locale_1 = require("date-fns/locale");
41
41
  var date_fns_1 = require("date-fns");
42
42
  var Input = function (_a) {
43
43
  var _b;
44
- var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, _4 = _a.filterDate, filterDate = _4 === void 0 ? props_1.InputDefault.filterDate : _4, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate"]);
45
- var _5 = (0, react_1.useState)(type), inputType = _5[0], setInputType = _5[1];
46
- var _6 = (0, react_1.useState)(false), alert = _6[0], setAlert = _6[1];
47
- var _7 = (0, react_1.useState)(value), inputValue = _7[0], setInputValue = _7[1];
48
- var _8 = (0, react_1.useState)(value ? new Date(value) : null), startDate = _8[0], setStartDate = _8[1];
44
+ var _c = _a.hasError, hasError = _c === void 0 ? props_1.InputDefault.hasError : _c, _d = _a.disabled, disabled = _d === void 0 ? props_1.InputDefault.disabled : _d, _e = _a.label, label = _e === void 0 ? props_1.InputDefault.label : _e, _f = _a.customLinkText, customLinkText = _f === void 0 ? props_1.InputDefault.customLinkText : _f, _g = _a.customLinkHref, customLinkHref = _g === void 0 ? props_1.InputDefault.customLinkHref : _g, _h = _a.onCustomLinkClick, onCustomLinkClick = _h === void 0 ? props_1.InputDefault.onCustomLinkClick : _h, _j = _a.onChange, onChange = _j === void 0 ? props_1.InputDefault.onChange : _j, _k = _a.errorMessage, errorMessage = _k === void 0 ? props_1.InputDefault.errorMessage : _k, _l = _a.type, type = _l === void 0 ? props_1.InputDefault.type : _l, _m = _a.name, name = _m === void 0 ? props_1.InputDefault.name : _m, _o = _a.width, width = _o === void 0 ? props_1.InputDefault.width : _o, _p = _a.mask, mask = _p === void 0 ? props_1.InputDefault.mask : _p, _q = _a.placeholder, placeholder = _q === void 0 ? props_1.InputDefault.placeholder : _q, _r = _a.hasCopyButton, hasCopyButton = _r === void 0 ? props_1.InputDefault.hasCopyButton : _r, _s = _a.readOnly, readOnly = _s === void 0 ? props_1.InputDefault.readOnly : _s, _t = _a.autoFocus, autoFocus = _t === void 0 ? props_1.InputDefault.autoFocus : _t, value = _a.value, _u = _a.format, format = _u === void 0 ? props_1.InputDefault.format : _u, _v = _a.visible, visible = _v === void 0 ? props_1.InputDefault.visible : _v, _w = _a.infoText, infoText = _w === void 0 ? props_1.InputDefault.infoText : _w, _x = _a.id, id = _x === void 0 ? props_1.InputDefault.id : _x, _y = _a.isClearable, isClearable = _y === void 0 ? props_1.InputDefault.isClearable : _y, _z = _a.onClear, onClear = _z === void 0 ? props_1.InputDefault.onClear : _z, _0 = _a.hasNumericFormat, hasNumericFormat = _0 === void 0 ? props_1.InputDefault.hasNumericFormat : _0, _1 = _a.inline, inline = _1 === void 0 ? props_1.InputDefault.inline : _1, _2 = _a.minDate, minDate = _2 === void 0 ? props_1.InputDefault.minDate : _2, _3 = _a.maxDate, maxDate = _3 === void 0 ? props_1.InputDefault.maxDate : _3, _4 = _a.filterDate, filterDate = _4 === void 0 ? props_1.InputDefault.filterDate : _4, _5 = _a.onCalendarOpen, onCalendarOpen = _5 === void 0 ? props_1.InputDefault.onCalendarOpen : _5, other = __rest(_a, ["hasError", "disabled", "label", "customLinkText", "customLinkHref", "onCustomLinkClick", "onChange", "errorMessage", "type", "name", "width", "mask", "placeholder", "hasCopyButton", "readOnly", "autoFocus", "value", "format", "visible", "infoText", "id", "isClearable", "onClear", "hasNumericFormat", "inline", "minDate", "maxDate", "filterDate", "onCalendarOpen"]);
45
+ var _6 = (0, react_1.useState)(type), inputType = _6[0], setInputType = _6[1];
46
+ var _7 = (0, react_1.useState)(false), alert = _7[0], setAlert = _7[1];
47
+ var _8 = (0, react_1.useState)(value), inputValue = _8[0], setInputValue = _8[1];
48
+ var _9 = (0, react_1.useState)(false), isCalendarOpen = _9[0], setIsCalendarOpen = _9[1];
49
+ var _10 = (0, react_1.useState)(function () {
50
+ if (!value)
51
+ return null;
52
+ // Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
53
+ if (format && format.includes('dd') && format.includes('MM') && format.includes('yyyy')) {
54
+ try {
55
+ return (0, date_fns_1.parse)(value, format, new Date());
56
+ }
57
+ catch (_a) {
58
+ return new Date(value);
59
+ }
60
+ }
61
+ return new Date(value);
62
+ }), startDate = _10[0], setStartDate = _10[1];
49
63
  var inputRef = (0, react_1.useRef)(null);
50
64
  var t = (0, react_i18next_1.useTranslation)().t;
51
65
  var language = i18n_1.default.language;
@@ -54,8 +68,24 @@ var Input = function (_a) {
54
68
  }, [type]);
55
69
  (0, react_1.useEffect)(function () {
56
70
  setInputValue(value);
57
- setStartDate(value ? new Date(value) : null);
58
- }, [value]);
71
+ if (!value) {
72
+ setStartDate(null);
73
+ }
74
+ else {
75
+ // Eğer format "dd.MM.yyyy" gibi bir format ise, parse et
76
+ if (format && format.includes('dd') && format.includes('MM') && format.includes('yyyy')) {
77
+ try {
78
+ setStartDate((0, date_fns_1.parse)(value, format, new Date()));
79
+ }
80
+ catch (_a) {
81
+ setStartDate(new Date(value));
82
+ }
83
+ }
84
+ else {
85
+ setStartDate(new Date(value));
86
+ }
87
+ }
88
+ }, [value, format]);
59
89
  (0, react_1.useEffect)(function () {
60
90
  if (alert) {
61
91
  setTimeout(function () {
@@ -74,7 +104,24 @@ var Input = function (_a) {
74
104
  inputRef.current.blur();
75
105
  };
76
106
  var CustomDateInput = (0, react_1.forwardRef)(function (props, ref) {
77
- return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: ref, "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText }, props)));
107
+ // DatePicker ISO formatında ("yyyy-MM-dd") value gönderir
108
+ // Biz bunu format'a göre formatlayıp gösteririz
109
+ var displayValue = '';
110
+ if (props.value && format) {
111
+ try {
112
+ // ISO formatındaki değeri parse et ve format'a göre göster
113
+ var date = (0, date_fns_1.parse)(props.value, "yyyy-MM-dd", new Date());
114
+ displayValue = (0, date_fns_1.format)(date, format);
115
+ }
116
+ catch (_a) {
117
+ // Parse edilemezse inputValue'yu kullan
118
+ displayValue = inputValue || '';
119
+ }
120
+ }
121
+ else {
122
+ displayValue = inputValue || '';
123
+ }
124
+ return ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: ref, "$hasError": hasError, "$hasIcon": (isClearable && inputValue) || ["password", "date"].includes(type) || hasCopyButton || infoText, "$isCalendarOpen": isCalendarOpen }, props, { value: displayValue })));
78
125
  });
79
126
  var handleClearValue = function () {
80
127
  setInputValue(null);
@@ -85,17 +132,31 @@ var Input = function (_a) {
85
132
  onClear();
86
133
  };
87
134
  return (0, jsx_runtime_1.jsxs)(Input_styled_1.Container, __assign({ "$width": width }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_b = {}, _b["justify-between"] = customLinkText, _b)) }, { children: [(0, jsx_runtime_1.jsx)("label", __assign({ htmlFor: id }, { children: label })), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [hasNumericFormat ? ((0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue }, other, { customInput: Input_styled_1.InputStyled, id: id }))) : ((mask && format) ? ((0, jsx_runtime_1.jsx)(react_number_format_1.PatternFormat, __assign({ "$hasError": hasError, disabled: disabled, onChange: onChange, name: name, placeholder: placeholder, readOnly: readOnly, autoFocus: autoFocus, value: inputValue }, other, { format: format, mask: mask, customInput: Input_styled_1.InputStyled, id: id })))
88
- : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, value: value, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date, event) {
89
- setStartDate(date);
90
- setInputValue((0, date_fns_1.format)(date, format));
91
- onChange((0, date_fns_1.format)(date, format));
135
+ : type === 'date' ? ((0, jsx_runtime_1.jsx)(Input_styled_1.DatePickerWrapperStyled, __assign({ "$inline": inline }, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { placeholderText: placeholder, disabled: disabled, name: name, readOnly: readOnly, autoFocus: autoFocus, onChange: function (date, event) {
136
+ if (date) {
137
+ setStartDate(date);
138
+ // DatePicker'dan gelen Date objesini format'a göre formatla
139
+ var formattedValue = (0, date_fns_1.format)(date, format);
140
+ setInputValue(formattedValue);
141
+ onChange(formattedValue);
142
+ }
143
+ else {
144
+ setStartDate(null);
145
+ setInputValue(null);
146
+ onChange(null);
147
+ }
92
148
  setTimeout(function () {
93
149
  var _a, _b;
94
150
  (_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.blur();
95
- }, 1);
96
- }, selected: startDate, ref: inputRef, dateFormat: format, locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}),
151
+ }, 10);
152
+ }, selected: startDate, ref: inputRef, dateFormat: "yyyy-MM-dd", locale: language === "tr" ? locale_1.tr : locale_1.enGB, customInput: (0, jsx_runtime_1.jsx)(CustomDateInput, {}),
97
153
  //customInput={<InputStyled $hasError={hasError} id={id}/>}
98
- inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, renderCustomHeader: function (_a) {
154
+ inline: inline, minDate: minDate, maxDate: maxDate, filterDate: filterDate, open: isCalendarOpen, onCalendarOpen: function () {
155
+ setIsCalendarOpen(true);
156
+ if (onCalendarOpen) {
157
+ onCalendarOpen();
158
+ }
159
+ }, onCalendarClose: function () { return setIsCalendarOpen(false); }, onBlur: function () { return setIsCalendarOpen(false); }, renderCustomHeader: function (_a) {
99
160
  var monthDate = _a.monthDate, customHeaderCount = _a.customHeaderCount, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, nextYearButtonDisabled = _a.nextYearButtonDisabled;
100
161
  return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "headerTopContent" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "leftButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Year", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseYear, type: "button", disabled: prevYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "CalenderArrowleftsmall" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Previous Month", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: decreaseMonth, type: "button", disabled: prevMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallLeft" }) }))] })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "react-datepicker__current-month" }, { children: [monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { month: "long" }), ", ", monthDate.toLocaleString(language === "tr" ? "tr-TR" : "en-GB", { year: "numeric" })] })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "rightButtons" }, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Month", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseMonth, type: "button", disabled: nextMonthButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ArrowSmallRight" }) })), (0, jsx_runtime_1.jsx)("button", __assign({ "aria-label": "Next Year", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: increaseYear, type: "button", disabled: nextYearButtonDisabled }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Calenderarrowrightsmall" }) }))] }))] })));
101
162
  } }) }))) : ((0, jsx_runtime_1.jsx)(Input_styled_1.InputStyled, __assign({ ref: inputRef, type: inputType, "$hasError": hasError, disabled: disabled, onChange: function (e) {
package/dist/components/Input/Input.styled.js CHANGED
@@ -11,6 +11,21 @@ exports.DatePickerWrapperStyled = exports.InputStyled = exports.Container = expo
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.AlertStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"], ["\n position: absolute;\n right: 8px;\n top: -20px;\n height: 28px;\n border-radius: 0.5rem;\n background-color: white;\n box-shadow: 0 6px 30px 0 var(--box-shadow-color);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 1rem;\n user-select: none;\n pointer-events: none;\n transition: opacity .4s ease;\n opacity: ", ";\n font: var(--caption-medium-10-12);\n"])), function (props) { return props.$visible ? '1' : '0'; });
13
13
  exports.Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\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 /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\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 /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n\n .inputIcon {\n position: absolute;\n width: 24px;\n height: 24px;\n top: 16px;\n right: 16px;\n cursor: pointer;\n\n &:not(.hasNoBg) {\n &:hover {\n background-color: var(--primary-opacity-5);\n }\n }\n }\n\n .removeIcon {\n position: absolute;\n top: 16px;\n right: 1rem;\n cursor: pointer;\n *{\n display: block;\n }\n }\n\n .popupText {\n font: var(--caption-semi-bold-11-13);\n text-align: center;\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font: var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.$width || '370px'; });
14
- exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.$hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.$hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.$hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
14
+ exports.InputStyled = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: 0.5rem;\n border: ", ";\n padding: ", ";\n color: ", ";\n ", "\n font: var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n -webkit-appearance: none;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px;\n border: 2px solid ", ";\n color: ", ";\n background: white;\n }\n\n &:is([disabled]) {\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) {
15
+ if (props.disabled)
16
+ return 'var(--dark-opacity-5)';
17
+ if (props.$isCalendarOpen || props.$hasError)
18
+ return 'white';
19
+ return 'var(--dark-opacity-3)';
20
+ }, function (props) {
21
+ if (props.$isCalendarOpen || props.$hasError) {
22
+ return props.$hasError ? '2px solid var(--red)' : '2px solid var(--primary)';
23
+ }
24
+ return '1px solid var(--dark-opacity-10)';
25
+ }, function (props) {
26
+ if (props.$isCalendarOpen || props.$hasError)
27
+ return '18.5px 23px';
28
+ return '19.5px 24px';
29
+ }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.$hasIcon ? 'padding-right: 45px !important;' : ''; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.readOnly ? 'none' : 'initial'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--primary)'; }, function (props) { return props.$hasError ? 'var(--red)' : 'var(--dark)'; });
15
30
  exports.DatePickerWrapperStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"], [";\n .react-datepicker-wrapper {\n display: block;\n }\n\n .react-datepicker-popper {\n transform: none !important;\n top: 100% !important;\n width: 100%;\n z-index: 5;\n\n .react-datepicker__triangle {\n display: none !important;\n }\n\n }\n .react-datepicker {\n font-family: inherit !important;\n width: 100%;\n border: none !important;\n border-radius: 0 0 0.5rem 0.5rem !important;\n box-shadow: ", ";\n\n .react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name {\n margin: 0 !important;\n width: 1.5rem !important;\n height: 1.5rem !important;\n line-height: 1.5rem !important;\n }\n\n .react-datepicker__navigation {\n position: static;\n border-radius: 0.5rem;\n transition: all .2s ease;\n &:is([disabled]){\n cursor: not-allowed;\n }\n &:not([disabled]):hover {\n background-color: white;\n box-shadow: 0 0 16px 0 var(--dark-opacity-10);\n z-index: 2;\n cursor: pointer;\n }\n }\n\n .react-datepicker__month-container {\n float: none !important;\n\n .react-datepicker__header {\n background-color: white !important;\n border: none !important;\n padding: 0 0 0 0 !important;\n\n .headerTopContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n\n .react-datepicker__navigation {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n .leftButtons, .rightButtons {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--dark-opacity-50);\n\n svg {\n color: var(--dark-opacity-50);\n }\n }\n }\n\n .react-datepicker__current-month {\n display: block !important;\n font: var(--body-semi-bold-14-17);\n }\n }\n\n .react-datepicker__month {\n margin: ", ";\n }\n\n .react-datepicker__day-names {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: ", ";\n\n .react-datepicker__day-name {\n color: var(--grey-50);\n font: var(--body-medium-13-16);\n }\n }\n\n .react-datepicker__week {\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n + .react-datepicker__week {\n margin-top: 0.5rem;\n }\n\n\n .react-datepicker__day {\n font: var(--caption-bold-12-15);\n color: var(--dark);\n outline: none !important;\n \n &:is(.react-datepicker__day--selected), &:not(.react-datepicker__day--disabled):hover {\n border-radius: 0.25rem;\n background-color: var(--primary-opacity-10) !important;\n color: var(--primary) !important;\n cursor: pointer;\n }\n\n &:is(.react-datepicker__day--today):not(.react-datepicker__day--disabled) {\n color: var(--primary) !important;\n }\n\n &:is(.react-datepicker__day--outside-month) {\n color: var(--grey-50);\n }\n }\n .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled, .react-datepicker__year-text--disabled{\n color: var(--grey-50) !important;\n background-color: transparent !important;\n text-decoration: line-through;\n cursor: no-drop;\n }\n .react-datepicker__day--outside-month{\n visibility: hidden;\n }\n }\n }\n }\n\n input {\n &:is(.react-datepicker-ignore-onclickoutside) {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n\n"])), function (props) { return props.$inline ? "none" : "0 6px 30px 0 var(--box-shadow-color)"; }, function (props) { return props.$inline ? "0 0 1rem 0" : "1rem 1.5rem"; }, function (props) { return props.$inline ? "0 !important" : "0 1.5rem 1rem 1.5rem !important"; }, function (props) { return props.$inline ? "0.5rem 0 !important" : "0.5rem 1.5rem !important"; });
16
31
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/Input/props.d.ts CHANGED
@@ -28,6 +28,7 @@ export interface Input {
28
28
  minDate?: Date;
29
29
  maxDate?: Date;
30
30
  filterDate?: any;
31
+ onCalendarOpen?(): void;
31
32
  }
32
33
  export interface InputStyledProps {
33
34
  disabled?: boolean;
@@ -37,6 +38,7 @@ export interface InputStyledProps {
37
38
  $isClearable?: boolean;
38
39
  $inline?: boolean;
39
40
  $hasIcon?: any;
41
+ $isCalendarOpen?: boolean;
40
42
  }
41
43
  export interface ContainerProps {
42
44
  $width?: string;
package/dist/components/Input/props.js CHANGED
@@ -29,4 +29,5 @@ exports.InputDefault = {
29
29
  minDate: null,
30
30
  maxDate: null,
31
31
  filterDate: null,
32
+ onCalendarOpen: null,
32
33
  };
package/dist/components/OptionMenu/OptionMenu.js CHANGED
@@ -25,7 +25,7 @@ var OptionMenu = function (_a) {
25
25
  var dataWithColumn = (0, refactorColumn_1.default)(data, rowLength || 0);
26
26
  var ButtonLinkComponent = function (_a) {
27
27
  var item = _a.item, children = _a.children, hasBadge = _a.hasBadge, badgeText = _a.badgeText;
28
- return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "componentWrapper" }, { children: [children, hasBadge ? (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "primary", title: badgeText }) })) : ""] })) })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "componentWrapper" }, { children: [children, hasBadge ? (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "primary", title: badgeText }) })) : ""] })) })));
28
+ return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "componentWrapper" }, { children: [children, hasBadge ? (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) })) : ""] })) })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: (0, jsx_runtime_1.jsxs)("div", __assign({ className: "componentWrapper" }, { children: [children, hasBadge ? (0, jsx_runtime_1.jsx)("div", __assign({ className: "badgesWrapper" }, { children: (0, jsx_runtime_1.jsx)(Badges_1.default, { layout: "text", variant: "secondary", title: badgeText }) })) : ""] })) })));
29
29
  };
30
30
  return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.OptionMenuStyled, __assign({ "$gridTemplateColumns": grid, "$gridItemWidth": gridItemWidth }, { children: dataWithColumn.map(function (item, key) { return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryItem, { children: (0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInner, { children: item.map(function (subItem, subKey) { return ((0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInnerItem, __assign({ "$isSeeAll": subItem.isSeeAll }, { children: (0, jsx_runtime_1.jsx)(ButtonLinkComponent, __assign({ item: subItem, hasBadge: subItem.hasBadge, badgeText: subItem.badgeText }, { children: (0, jsx_runtime_1.jsx)(OptionMenu_styled_1.SubCategoryInnerItemButtonInner, __assign({ "$hasBadge": subItem.hasBadge, "$isActive": hasActiveItem && subItem.isActive }, { children: subItem.name })) })) }), subItem.id)); }) }) }, key)); }) })));
31
31
  };
package/dist/components/OptionMenu/OptionMenu.styled.js CHANGED
@@ -12,6 +12,6 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  exports.OptionMenuStyled = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: 0;\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n border-radius: 0.5rem;\n transition: all 0.2s ease-in-out;\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", ", ");\n transition-delay: 0s;\n"], ["\n margin: 0;\n padding: 8px;\n border: 1px solid var(--grey-10);\n background-color: white;\n border-radius: 0.5rem;\n transition: all 0.2s ease-in-out;\n display: grid;\n gap: 0 16px;\n grid-template-columns: repeat(", ", ", ");\n transition-delay: 0s;\n"])), function (props) { return props.$gridTemplateColumns || '3'; }, function (props) { return props.$gridItemWidth && props.$gridItemWidth; });
13
13
  exports.SubCategoryItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n padding: 0;\n margin: 0;\n"], ["\n display: block;\n padding: 0;\n margin: 0;\n"])));
14
14
  exports.SubCategoryInner = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 0;\n display: grid;\n gap:4px 0;\n margin: 0;\n"], ["\n padding: 0;\n display: grid;\n gap:4px 0;\n margin: 0;\n"])));
15
- exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n"], ["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n"])), function (props) { return props.$isSeeAll ? '700' : '500'; });
15
+ exports.SubCategoryInnerItem = styled_components_1.default.li(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n user-select: none;\n pointer-events: none;\n }\n }\n"], ["\n padding: 0;\n display: block;\n a {\n color: var(--dark);\n text-decoration: none;\n position: relative;\n span {\n font-weight: ", ";\n }\n .badgesWrapper{\n position: absolute;\n right: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n user-select: none;\n pointer-events: none;\n }\n }\n"])), function (props) { return props.$isSeeAll ? '700' : '500'; });
16
16
  exports.SubCategoryInnerItemButtonInner = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: ", ";\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n cursor:pointer;\n box-sizing: border-box;\n font:var(--caption-medium-12-15);\n ", "\n background-color: var(--primary-opacity-10);\n color: var(--primary) !important;\n font-weight: 700 !important;\n ", "\n"], ["\n display:block;\n text-decoration: none;\n color: var(--dark);\n padding: ", ";\n border-radius: 5px;\n background: transparent;\n outline:0;\n border:0;\n width:100%;\n text-align:start;\n cursor:pointer;\n box-sizing: border-box;\n font:var(--caption-medium-12-15);\n ", "\n background-color: var(--primary-opacity-10);\n color: var(--primary) !important;\n font-weight: 700 !important;\n ", "\n"])), function (props) { return props.$hasBadge ? '0.5rem 50px 0.5rem 0.5rem' : '0.5rem'; }, function (props) { return (props.$isActive ? "" : "&:hover{"); }, function (props) { return (props.$isActive ? "" : "}"); });
17
17
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { ProductCardHorizontalSmProps } from "./props";
2
- declare const ProductCardHorizontalSm: ({ title, price, priceSm, slug, period, image, component, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, hasBordeHover, hasTooltip, tooltipSelectorTitle, tooltipDescription, }: ProductCardHorizontalSmProps) => import("react/jsx-runtime").JSX.Element;
2
+ declare const ProductCardHorizontalSm: ({ title, price, priceSm, slug, period, image, component, hasImageBorder, imageWidth, imageHeight, infoPosition, hasButton, buttonVariant, buttonText, hasBorder, isSelected, hasTitleWrap, hasButtonRemoveMdDown, hasBordeHover, hasTooltip, tooltipSelectorTitle, tooltipDescription, isDisabled, }: ProductCardHorizontalSmProps) => import("react/jsx-runtime").JSX.Element;
3
3
  export default ProductCardHorizontalSm;
package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.js CHANGED
@@ -21,11 +21,11 @@ var ProductCardHorizontalSm_styled_1 = require("./ProductCardHorizontalSm.styled
21
21
  var Button_1 = __importDefault(require("../Button"));
22
22
  var Tooltip_1 = __importDefault(require("../Tooltip"));
23
23
  var ProductCardHorizontalSm = function (_a) {
24
- var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.price, price = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _c, _d = _a.priceSm, priceSm = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _h, _j = _a.hasImageBorder, hasImageBorder = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _j, _k = _a.imageWidth, imageWidth = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _k, _l = _a.imageHeight, imageHeight = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _l, _m = _a.infoPosition, infoPosition = _m === void 0 ? props_1.ProductCardHorizontalSmDefault.infoPosition : _m, _o = _a.hasButton, hasButton = _o === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButton : _o, _p = _a.buttonVariant, buttonVariant = _p === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonVariant : _p, _q = _a.buttonText, buttonText = _q === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonText : _q, _r = _a.hasBorder, hasBorder = _r === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBorder : _r, _s = _a.isSelected, isSelected = _s === void 0 ? props_1.ProductCardHorizontalSmDefault.isSelected : _s, _t = _a.hasTitleWrap, hasTitleWrap = _t === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTitleWrap : _t, _u = _a.hasButtonRemoveMdDown, hasButtonRemoveMdDown = _u === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButtonRemoveMdDown : _u, _v = _a.hasBordeHover, hasBordeHover = _v === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBordeHover : _v, _w = _a.hasTooltip, hasTooltip = _w === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTooltip : _w, _x = _a.tooltipSelectorTitle, tooltipSelectorTitle = _x === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipSelectorTitle : _x, _y = _a.tooltipDescription, tooltipDescription = _y === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipDescription : _y;
24
+ var _b = _a.title, title = _b === void 0 ? props_1.ProductCardHorizontalSmDefault.title : _b, _c = _a.price, price = _c === void 0 ? props_1.ProductCardHorizontalSmDefault.price : _c, _d = _a.priceSm, priceSm = _d === void 0 ? props_1.ProductCardHorizontalSmDefault.priceSm : _d, _e = _a.slug, slug = _e === void 0 ? props_1.ProductCardHorizontalSmDefault.slug : _e, _f = _a.period, period = _f === void 0 ? props_1.ProductCardHorizontalSmDefault.period : _f, _g = _a.image, image = _g === void 0 ? props_1.ProductCardHorizontalSmDefault.image : _g, _h = _a.component, component = _h === void 0 ? props_1.ProductCardHorizontalSmDefault.component : _h, _j = _a.hasImageBorder, hasImageBorder = _j === void 0 ? props_1.ProductCardHorizontalSmDefault.hasImageBorder : _j, _k = _a.imageWidth, imageWidth = _k === void 0 ? props_1.ProductCardHorizontalSmDefault.imageWidth : _k, _l = _a.imageHeight, imageHeight = _l === void 0 ? props_1.ProductCardHorizontalSmDefault.imageHeight : _l, _m = _a.infoPosition, infoPosition = _m === void 0 ? props_1.ProductCardHorizontalSmDefault.infoPosition : _m, _o = _a.hasButton, hasButton = _o === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButton : _o, _p = _a.buttonVariant, buttonVariant = _p === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonVariant : _p, _q = _a.buttonText, buttonText = _q === void 0 ? props_1.ProductCardHorizontalSmDefault.buttonText : _q, _r = _a.hasBorder, hasBorder = _r === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBorder : _r, _s = _a.isSelected, isSelected = _s === void 0 ? props_1.ProductCardHorizontalSmDefault.isSelected : _s, _t = _a.hasTitleWrap, hasTitleWrap = _t === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTitleWrap : _t, _u = _a.hasButtonRemoveMdDown, hasButtonRemoveMdDown = _u === void 0 ? props_1.ProductCardHorizontalSmDefault.hasButtonRemoveMdDown : _u, _v = _a.hasBordeHover, hasBordeHover = _v === void 0 ? props_1.ProductCardHorizontalSmDefault.hasBordeHover : _v, _w = _a.hasTooltip, hasTooltip = _w === void 0 ? props_1.ProductCardHorizontalSmDefault.hasTooltip : _w, _x = _a.tooltipSelectorTitle, tooltipSelectorTitle = _x === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipSelectorTitle : _x, _y = _a.tooltipDescription, tooltipDescription = _y === void 0 ? props_1.ProductCardHorizontalSmDefault.tooltipDescription : _y, _z = _a.isDisabled, isDisabled = _z === void 0 ? props_1.ProductCardHorizontalSmDefault.isDisabled : _z;
25
25
  var LinkComponent = function (_a) {
26
26
  var item = _a.item, children = _a.children;
27
27
  return item.component ? ((0, jsx_runtime_1.jsx)(item.component, { children: children })) : ((0, jsx_runtime_1.jsx)("a", __assign({ href: item.slug }, { children: children })));
28
28
  };
29
- return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": period, "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected, "$hasBordeHover": hasBordeHover }, { children: [hasBorder && (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected, "$hasBordeHover": hasBordeHover }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.ImgWrapper, __assign({ "$imageHeight": imageHeight, "$imageWidth": imageWidth }, { children: image })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.TextWrapper, __assign({ "$period": period }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Title, __assign({ "$hasTitleWrap": hasTitleWrap }, { children: title })), infoPosition === "left" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }), (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period }))] })))] })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.RightContentWrapper, __assign({ "$hasButtonRemoveMdDown": hasButtonRemoveMdDown }, { children: [infoPosition === "right" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })] }))), hasButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ variant: buttonVariant, size: "xsmall" }, { children: buttonText }))), hasTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ selectorTitle: tooltipSelectorTitle, popupWidth: "238px", position: "topRight", popupSize: "medium" }, { children: tooltipDescription })))] }))] }) }))] })));
29
+ return ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.ProductCardHorizontalSmStyled, __assign({ "$period": period, "$hasImageBorder": hasImageBorder, "$imageWidth": imageWidth, "$imageHeight": imageHeight, "$isSelected": isSelected, "$hasBordeHover": hasBordeHover, "$isDisabled": isDisabled }, { children: [hasBorder && (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Border, { "$isSelected": isSelected, "$hasBordeHover": hasBordeHover }), (0, jsx_runtime_1.jsx)(LinkComponent, __assign({ item: { component: component, slug: slug } }, { children: (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.HorizontalSmWrapper, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.ImgWrapper, __assign({ "$imageHeight": imageHeight, "$imageWidth": imageWidth }, { children: image })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.TextWrapper, __assign({ "$period": period }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Title, __assign({ "$hasTitleWrap": hasTitleWrap }, { children: title })), infoPosition === "left" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] }), (0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period }))] })))] })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.RightContentWrapper, __assign({ "$hasButtonRemoveMdDown": hasButtonRemoveMdDown }, { children: [infoPosition === "right" && ((0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.PriceContent, __assign({ "$infoPosition": infoPosition }, { children: [(0, jsx_runtime_1.jsx)(ProductCardHorizontalSm_styled_1.Period, __assign({ "$infoPosition": infoPosition }, { children: period })), (0, jsx_runtime_1.jsxs)(ProductCardHorizontalSm_styled_1.Price, { children: [price, priceSm && (0, jsx_runtime_1.jsx)("small", { children: priceSm })] })] }))), hasButton && ((0, jsx_runtime_1.jsx)(Button_1.default, __assign({ disabled: isDisabled, variant: buttonVariant, size: "xsmall" }, { children: buttonText }))), hasTooltip && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, __assign({ selectorTitle: tooltipSelectorTitle, popupWidth: "238px", position: "topRight", popupSize: "medium" }, { children: tooltipDescription })))] }))] }) }))] })));
30
30
  };
31
31
  exports.default = ProductCardHorizontalSm;
package/dist/components/ProductCardHorizontalSm/ProductCardHorizontalSm.styled.js CHANGED
@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
12
12
  var devices_1 = require("../../constants/devices");
13
13
  exports.Title = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n transition: all .2s ease;\n"], ["\n display: -webkit-box;\n -webkit-line-clamp: ", ";\n -webkit-box-orient: vertical;\n overflow: hidden;\n word-break: break-word;\n font:var(--body-semi-bold-14-17);\n transition: all .2s ease;\n"])), function (props) { return props.$hasTitleWrap ? '2' : '1'; });
14
14
  exports.Border = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: ", ";\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n"], ["\n border: ", ";\n user-select: none;\n pointer-events: none;\n position: absolute;\n inset: 0;\n border-radius: inherit;\n"])), function (props) { return props.$isSelected ? '2px solid var(--primary) !important' : '1px solid var(--grey-10)'; });
15
- exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n ", "\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n ", "\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"])), function (props) { return props.$hasBordeHover && "\n cursor: pointer;\n &:hover {\n ".concat(exports.Border, " {\n border: 1px solid var(--primary);\n }\n }\n "); }, devices_1.devices.mdUp, exports.Title, exports.Title);
15
+ exports.ProductCardHorizontalSmStyled = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n ", "\n ", "\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"], ["\n color: var(--dark);\n padding: 0 0.5rem;\n transition: all .2s ease;\n border-radius: 0.5rem;\n position: relative;\n ", "\n ", "\n a {\n text-decoration: none;\n color: inherit;\n @media only screen and ", " {\n &:hover{\n ", " {\n color: var(--primary-hover);\n }\n }\n }\n &:active {\n ", "{\n color: var(--primary-hover);\n }\n }\n }\n \n"])), function (props) { return props.$isDisabled && "\n user-select: none;\n pointer-events: none;\n cursor: not-allowed;\n "; }, function (props) { return props.$hasBordeHover && "\n cursor: pointer;\n &:hover {\n ".concat(exports.Border, " {\n border: 1px solid var(--primary);\n }\n }\n "); }, devices_1.devices.mdUp, exports.Title, exports.Title);
16
16
  exports.HorizontalSmWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 0.5rem;\n"], ["\n text-decoration: none;\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n height: 66px;\n padding-right: 0.5rem;\n"])));
17
17
  exports.ImgWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: ", ";\n border-radius: 0.5rem;\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 img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: 4px !important;\n }\n"], ["\n border: ", ";\n border-radius: 0.5rem;\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 img {\n vertical-align: middle !important;\n display: block !important;\n object-fit: cover !important;\n border-radius: 4px !important;\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'; });
18
18
  exports.TextWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-right: ", ";\n"], ["\n padding-right: ", ";\n"])), function (props) { return props.$period ? "1rem" : "0"; });
package/dist/components/ProductCardHorizontalSm/props.d.ts CHANGED
@@ -24,6 +24,7 @@ export interface ProductCardHorizontalSm {
24
24
  hasTooltip?: boolean;
25
25
  tooltipSelectorTitle?: string;
26
26
  tooltipDescription?: React.ReactNode;
27
+ isDisabled?: boolean;
27
28
  }
28
29
  export interface ProductCardHorizontalSmStyledProps {
29
30
  $period?: string;
@@ -36,6 +37,7 @@ export interface ProductCardHorizontalSmStyledProps {
36
37
  $hasTitleWrap?: boolean;
37
38
  $hasButtonRemoveMdDown?: boolean;
38
39
  $hasBordeHover?: boolean;
40
+ $isDisabled?: boolean;
39
41
  }
40
42
  export declare const ProductCardHorizontalSmDefault: ProductCardHorizontalSm;
41
43
  export type ProductCardHorizontalSmProps = typeof ProductCardHorizontalSmDefault;
package/dist/components/ProductCardHorizontalSm/props.js CHANGED
@@ -24,4 +24,5 @@ exports.ProductCardHorizontalSmDefault = {
24
24
  hasTooltip: false,
25
25
  tooltipSelectorTitle: null,
26
26
  tooltipDescription: null,
27
+ isDisabled: false,
27
28
  };
package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.d.ts CHANGED
@@ -46,5 +46,6 @@ export declare const Default: {
46
46
  hasTooltip: boolean;
47
47
  tooltipSelectorTitle: string;
48
48
  tooltipDescription: string;
49
+ isDisabled: boolean;
49
50
  };
50
51
  };
package/dist/components/ProductCardHorizontalSm/stories/ProductCardHorizontalSm.stories.js CHANGED
@@ -66,5 +66,6 @@ exports.Default = {
66
66
  hasTooltip: true,
67
67
  tooltipSelectorTitle: "Tooltip Title",
68
68
  tooltipDescription: "Tooltip Description",
69
+ isDisabled: false,
69
70
  },
70
71
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "krl-alfred",
3
- "version": "2.17.42",
3
+ "version": "2.17.44",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -25,7 +25,7 @@
25
25
  "@types/styled-components": "^5.1.34",
26
26
  "classnames": "^2.3.2",
27
27
  "css-loader": "^6.7.3",
28
- "date-fns": "^2.30.0",
28
+ "date-fns": "^4.1.0",
29
29
  "i18next": "^23.7.6",
30
30
  "plop": "^3.1.2",
31
31
  "rc-pagination": "^4.3.0",
@@ -33,7 +33,7 @@
33
33
  "rc-table": "^7.48.0",
34
34
  "react": "^18.2.0",
35
35
  "react-circular-progressbar": "^2.1.0",
36
- "react-datepicker": "^7.4.0",
36
+ "react-datepicker": "^9.0.0",
37
37
  "react-device-detect": "^2.2.3",
38
38
  "react-dom": "^18.2.0",
39
39
  "react-i18next": "^13.5.0",