@daryasidorovich/modsen-datepicker 1.0.13 → 1.0.15
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/index.cjs +59 -45
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +59 -45
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -340,7 +340,8 @@ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
|
340
340
|
|
|
341
341
|
var e=[],t$2=[];function n$1(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t$2[u]={}),a=t$2[u]&&t$2[u][s]?t$2[u][s]:t$2[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
|
|
342
342
|
|
|
343
|
-
var css$d = ".
|
|
343
|
+
var css$d = ".styles_module_day__0d250405 {\n width: 32px;\n height: 32px;\n}\n.theme-light .styles_module_day__0d250405 {\n background-color: #ffffff;\n color: #333333;\n}\n.theme-dark .styles_module_day__0d250405 {\n background-color: #333333;\n color: #ffffff;\n}\n.styles_module_day__0d250405 {\n font-size: 13px;\n padding: 10px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n border: none;\n position: relative;\n}\n\n.theme-light .styles_module_holiday__0d250405 {\n color: #ff383c;\n}\n.theme-dark .styles_module_holiday__0d250405 {\n color: #ff383c;\n}\n\n.theme-light .styles_module_today__0d250405 {\n color: #2f80ed;\n}\n.theme-dark .styles_module_today__0d250405 {\n color: #2f80ed;\n}\n\n.theme-light .styles_module_selected__0d250405 {\n background-color: #2f80ed;\n color: #ffffff;\n}\n.theme-dark .styles_module_selected__0d250405 {\n background-color: #2f80ed;\n color: #e1e1e1;\n}\n\n.theme-light .styles_module_disabled__0d250405 {\n color: #aaaaaa;\n}\n.theme-dark .styles_module_disabled__0d250405 {\n color: #aaaaaa;\n}\n.styles_module_disabled__0d250405 {\n cursor: not-allowed;\n}\n\n.theme-light .styles_module_otherMonth__0d250405 {\n color: #aaaaaa;\n}\n.theme-dark .styles_module_otherMonth__0d250405 {\n color: #aaaaaa;\n}\n\n.theme-light .styles_module_rangeStart__0d250405 {\n color: #ffffff;\n background-color: rgba(47, 129, 237, 0.5764705882);\n}\n.theme-dark .styles_module_rangeStart__0d250405 {\n color: #e1e1e1;\n background-color: rgba(47, 129, 237, 0.5764705882);\n}\n.styles_module_rangeStart__0d250405 {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.theme-light .styles_module_rangeMiddle__0d250405 {\n background-color: rgba(47, 129, 237, 0.1647058824);\n}\n.theme-dark .styles_module_rangeMiddle__0d250405 {\n background-color: rgba(47, 129, 237, 0.1647058824);\n}\n.styles_module_rangeMiddle__0d250405 {\n border-radius: 0;\n}\n\n.theme-light .styles_module_rangeEnd__0d250405 {\n color: #ffffff;\n background-color: #2f80ed;\n}\n.theme-dark .styles_module_rangeEnd__0d250405 {\n color: #e1e1e1;\n background-color: #2f80ed;\n}\n.styles_module_rangeEnd__0d250405 {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n\n.styles_module_hasTasks__0d250405 {\n position: relative;\n}\n.styles_module_hasTasks__0d250405::after {\n width: 4px;\n height: 4px;\n}\n.theme-light .styles_module_hasTasks__0d250405::after {\n background-color: #62d0a2;\n}\n.theme-dark .styles_module_hasTasks__0d250405::after {\n background-color: #62d0a2;\n}\n.styles_module_hasTasks__0d250405::after {\n content: \"\";\n position: absolute;\n top: 12%;\n right: 12%;\n border-radius: 100%;\n}";
|
|
344
|
+
var modules_efc4e723$d = {"day":"styles_module_day__0d250405","holiday":"styles_module_holiday__0d250405","today":"styles_module_today__0d250405","selected":"styles_module_selected__0d250405","disabled":"styles_module_disabled__0d250405","otherMonth":"styles_module_otherMonth__0d250405","rangeStart":"styles_module_rangeStart__0d250405","rangeMiddle":"styles_module_rangeMiddle__0d250405","rangeEnd":"styles_module_rangeEnd__0d250405","hasTasks":"styles_module_hasTasks__0d250405"};
|
|
344
345
|
n$1(css$d,{});
|
|
345
346
|
|
|
346
347
|
const Day = ({ date, isSelected = false, isCurrentMonth, isDisabled = false, isHoliday = false, hasTasks = false, isRangeStart = false, isRangeEnd = false, isRangeMiddle = false, onClick, onDoubleClick, onMouseEnter, onMouseLeave, }) => {
|
|
@@ -375,24 +376,25 @@ const Day = ({ date, isSelected = false, isCurrentMonth, isDisabled = false, isH
|
|
|
375
376
|
onMouseLeave();
|
|
376
377
|
}
|
|
377
378
|
};
|
|
378
|
-
return (jsxRuntime.jsx("button", { className: classNames(
|
|
379
|
-
[
|
|
380
|
-
[
|
|
381
|
-
[
|
|
382
|
-
[
|
|
383
|
-
[
|
|
384
|
-
[
|
|
385
|
-
[
|
|
386
|
-
[
|
|
387
|
-
[
|
|
388
|
-
}), onClick: handleClick, onDoubleClick: handleDoubleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, disabled: isDisabled, children: jsxRuntime.jsx("span", { className:
|
|
379
|
+
return (jsxRuntime.jsx("button", { className: classNames(modules_efc4e723$d.day, {
|
|
380
|
+
[modules_efc4e723$d.today]: isToday(date),
|
|
381
|
+
[modules_efc4e723$d.selected]: isSelected,
|
|
382
|
+
[modules_efc4e723$d.disabled]: isDisabled,
|
|
383
|
+
[modules_efc4e723$d.holiday]: isHoliday,
|
|
384
|
+
[modules_efc4e723$d.hasTasks]: hasTasks,
|
|
385
|
+
[modules_efc4e723$d.rangeStart]: isRangeStart,
|
|
386
|
+
[modules_efc4e723$d.rangeEnd]: isRangeEnd,
|
|
387
|
+
[modules_efc4e723$d.rangeMiddle]: isRangeMiddle,
|
|
388
|
+
[modules_efc4e723$d.otherMonth]: !isCurrentMonth,
|
|
389
|
+
}), onClick: handleClick, onDoubleClick: handleDoubleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, disabled: isDisabled, children: jsxRuntime.jsx("span", { className: modules_efc4e723$d.number, children: dayNumber }) }));
|
|
389
390
|
};
|
|
390
391
|
|
|
391
|
-
var css$c = ".
|
|
392
|
+
var css$c = ".styles_module_week__5d817eab {\n display: flex;\n}\n.theme-light .styles_module_week__5d817eab {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_week__5d817eab {\n background-color: #333333;\n}";
|
|
393
|
+
var modules_efc4e723$c = {"week":"styles_module_week__5d817eab"};
|
|
392
394
|
n$1(css$c,{});
|
|
393
395
|
|
|
394
396
|
const Week = ({ weekDays, selectedDate, getIsHoliday, getIsDisabled, getIsCurrentMonth, rangeStart, rangeEnd, hasTasks, onDateClick, onDateDoubleClick, onMouseEnter, onMouseLeave, }) => {
|
|
395
|
-
return (jsxRuntime.jsx("div", { className:
|
|
397
|
+
return (jsxRuntime.jsx("div", { className: modules_efc4e723$c.week, children: weekDays.map((date) => {
|
|
396
398
|
return (jsxRuntime.jsx(Day, { date: date, isSelected: isSelected(date, selectedDate), isDisabled: getIsDisabled?.(date) || false, isCurrentMonth: getIsCurrentMonth(date), isHoliday: getIsHoliday?.(date) || false, hasTasks: hasTasks?.(date) || false, isRangeStart: isRangeStart(date, rangeStart), isRangeEnd: isRangeEnd(date, rangeEnd), isRangeMiddle: isInRange(date, rangeStart, rangeEnd), onClick: getIsDisabled?.(date) ? undefined : onDateClick, onDoubleClick: getIsDisabled?.(date) ? undefined : onDateDoubleClick, onMouseEnter: getIsDisabled?.(date) ? undefined : onMouseEnter, onMouseLeave: getIsDisabled?.(date) ? undefined : onMouseLeave }, date.toISOString()));
|
|
397
399
|
}) }));
|
|
398
400
|
};
|
|
@@ -639,13 +641,14 @@ function useCalendar(props) {
|
|
|
639
641
|
return { calendar, loading, error };
|
|
640
642
|
}
|
|
641
643
|
|
|
642
|
-
var css$b = ".
|
|
644
|
+
var css$b = ".styles_module_calendar__131b64c5 {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.theme-light .styles_module_errorMessage__131b64c5 {\n color: #ff383c;\n}\n.theme-dark .styles_module_errorMessage__131b64c5 {\n color: #ff383c;\n}";
|
|
645
|
+
var modules_efc4e723$b = {"calendar":"styles_module_calendar__131b64c5","errorMessage":"styles_module_errorMessage__131b64c5"};
|
|
643
646
|
n$1(css$b,{});
|
|
644
647
|
|
|
645
648
|
const CalendarGridWithoutTasks = ({ children, ...props }) => {
|
|
646
649
|
const { calendar, loading, error } = useCalendar(props);
|
|
647
650
|
const weeks = calendar.getWeeks();
|
|
648
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
651
|
+
return (jsxRuntime.jsxs("div", { className: modules_efc4e723$b.calendar, children: [weeks.map((weekDays) => (jsxRuntime.jsx(Week, { weekDays: weekDays, selectedDate: calendar.selectedDate, getIsDisabled: calendar.getIsDisabled, getIsCurrentMonth: calendar.getIsCurrentMonth, getIsHoliday: calendar.getIsHoliday, rangeStart: calendar.rangeStart, rangeEnd: calendar.rangeEnd, ...props }, weekDays[0].toISOString()))), error && jsxRuntime.jsx("p", { className: modules_efc4e723$b.errorMessage, children: error }), loading && jsxRuntime.jsx("div", { children: "Loading..." }), children] }));
|
|
649
652
|
};
|
|
650
653
|
|
|
651
654
|
const useModal = (options = {}) => {
|
|
@@ -732,7 +735,8 @@ const useLockBodyScroll = (isLocked) => {
|
|
|
732
735
|
}, [isLocked]);
|
|
733
736
|
};
|
|
734
737
|
|
|
735
|
-
var css$a = ".
|
|
738
|
+
var css$a = ".styles_module_overlay__337f9387 {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 10;\n}\n\n.theme-light .styles_module_overlayColor__337f9387 {\n background-color: rgba(44, 49, 68, 0.4);\n}\n.theme-dark .styles_module_overlayColor__337f9387 {\n background-color: rgba(44, 49, 68, 0.4);\n}\n\n.styles_module_modal__337f9387 {\n position: relative;\n}\n.theme-light .styles_module_modal__337f9387 {\n background-color: #ffffff;\n border-color: #e1e1e1;\n}\n.theme-dark .styles_module_modal__337f9387 {\n background-color: #333333;\n border-color: #aaaaaa;\n}\n.styles_module_modal__337f9387 {\n border-style: solid;\n border-width: 1px;\n border-radius: 8px;\n padding: 24px;\n}\n\n.styles_module_closeButton__337f9387 {\n border: none;\n background-color: transparent;\n position: absolute;\n right: 8px;\n top: 0;\n font-size: 24px;\n line-height: normal;\n}\n.theme-light .styles_module_closeButton__337f9387 {\n color: #333333;\n}\n.theme-dark .styles_module_closeButton__337f9387 {\n color: #ffffff;\n}";
|
|
739
|
+
var modules_efc4e723$a = {"overlay":"styles_module_overlay__337f9387","overlayColor":"styles_module_overlayColor__337f9387","modal":"styles_module_modal__337f9387","closeButton":"styles_module_closeButton__337f9387"};
|
|
736
740
|
n$1(css$a,{});
|
|
737
741
|
|
|
738
742
|
const Modal = ({ isOpen, onClose, children, showOverlay = true, showCloseButton = true, className = '', classNameOverlay = '', style = {}, }) => {
|
|
@@ -747,9 +751,9 @@ const Modal = ({ isOpen, onClose, children, showOverlay = true, showCloseButton
|
|
|
747
751
|
};
|
|
748
752
|
if (!isOpen)
|
|
749
753
|
return null;
|
|
750
|
-
const modalContent = (jsxRuntime.jsx("div", { className: classNames(
|
|
751
|
-
[
|
|
752
|
-
}), onClick: handleClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: classNames(
|
|
754
|
+
const modalContent = (jsxRuntime.jsx("div", { className: classNames(modules_efc4e723$a.overlay, classNameOverlay, {
|
|
755
|
+
[modules_efc4e723$a.overlayColor]: showOverlay,
|
|
756
|
+
}), onClick: handleClick, children: jsxRuntime.jsxs("div", { ref: modalRef, className: classNames(modules_efc4e723$a.modal, className), style: style, children: [showCloseButton && (jsxRuntime.jsx("button", { className: modules_efc4e723$a.closeButton, onClick: onClose, children: jsxRuntime.jsx("span", { children: "\u00D7" }) })), children] }) }));
|
|
753
757
|
return reactDom.createPortal(modalContent, targetElement);
|
|
754
758
|
};
|
|
755
759
|
|
|
@@ -785,22 +789,24 @@ var SvgClear = function SvgClear(props) {
|
|
|
785
789
|
})));
|
|
786
790
|
};
|
|
787
791
|
|
|
788
|
-
var css$9 = "
|
|
792
|
+
var css$9 = ".theme-light .styles_module_wrapper__d43831f0 {\n color: #333333;\n background-color: #ffffff;\n}\n.theme-dark .styles_module_wrapper__d43831f0 {\n color: #ffffff;\n background-color: #333333;\n}\n.styles_module_wrapper__d43831f0 {\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 2px;\n width: 100%;\n}\n\n.styles_module_label__d43831f0 {\n font-size: 15px;\n font-weight: 600;\n margin-bottom: 8px;\n}\n\n.theme-light .styles_module_inputWrapper__d43831f0 {\n color: #333333;\n background-color: #ffffff;\n border-color: #e1e1e1;\n}\n.theme-dark .styles_module_inputWrapper__d43831f0 {\n color: #ffffff;\n background-color: #333333;\n border-color: #aaaaaa;\n}\n.styles_module_inputWrapper__d43831f0 {\n border-style: solid;\n border-width: 1px;\n padding: 8px 15px;\n border-radius: 8px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n}\n\n.theme-light .styles_module_errorWrapper__d43831f0 {\n border-color: #ff383c;\n}\n.theme-dark .styles_module_errorWrapper__d43831f0 {\n border-color: #ff383c;\n}\n\n.styles_module_input__d43831f0 {\n border: none;\n outline: none;\n background-color: transparent;\n width: 100%;\n}\n.theme-light .styles_module_input__d43831f0 {\n color: #333333;\n}\n.theme-dark .styles_module_input__d43831f0 {\n color: #ffffff;\n}\n.theme-light .styles_module_input__d43831f0::placeholder {\n color: #e1e1e1;\n}\n.theme-dark .styles_module_input__d43831f0::placeholder {\n color: #aaaaaa;\n}\n\n.styles_module_clear__d43831f0 {\n border: none;\n background-color: transparent;\n width: max-content;\n padding: 0;\n}\n\n.theme-light .styles_module_icon__d43831f0 {\n color: #aaaaaa;\n}\n.theme-dark .styles_module_icon__d43831f0 {\n color: #aaaaaa;\n}\n\n.theme-light .styles_module_error__d43831f0 {\n color: #ff383c;\n}\n.theme-dark .styles_module_error__d43831f0 {\n color: #ff383c;\n}\n.styles_module_error__d43831f0 {\n height: 15px;\n}";
|
|
793
|
+
var modules_efc4e723$9 = {"wrapper":"styles_module_wrapper__d43831f0","label":"styles_module_label__d43831f0","inputWrapper":"styles_module_inputWrapper__d43831f0","errorWrapper":"styles_module_errorWrapper__d43831f0","input":"styles_module_input__d43831f0","clear":"styles_module_clear__d43831f0","icon":"styles_module_icon__d43831f0","error":"styles_module_error__d43831f0"};
|
|
789
794
|
n$1(css$9,{});
|
|
790
795
|
|
|
791
796
|
const Input = ({ label, error, className = '', id, onReset, placeholder, type = 'text', isDateInput = false, ref = null, ...restProps }) => {
|
|
792
797
|
const generatedId = React.useId();
|
|
793
798
|
const inputId = id || `input-${generatedId}`;
|
|
794
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
795
|
-
[
|
|
796
|
-
}), children: [isDateInput && jsxRuntime.jsx(SvgCalendar, { className:
|
|
799
|
+
return (jsxRuntime.jsxs("div", { className: modules_efc4e723$9.wrapper, children: [label && (jsxRuntime.jsx("label", { htmlFor: inputId, className: modules_efc4e723$9.label, children: label })), jsxRuntime.jsxs("div", { className: classNames(modules_efc4e723$9.inputWrapper, {
|
|
800
|
+
[modules_efc4e723$9.errorWrapper]: error,
|
|
801
|
+
}), children: [isDateInput && jsxRuntime.jsx(SvgCalendar, { className: modules_efc4e723$9.icon }), jsxRuntime.jsx("input", { id: inputId, type: type, ref: ref, placeholder: placeholder, className: classNames(modules_efc4e723$9.input, className), ...restProps }), isDateInput && onReset && (jsxRuntime.jsx("button", { className: modules_efc4e723$9.clear, onClick: onReset, type: "button", children: jsxRuntime.jsx(SvgClear, { className: modules_efc4e723$9.icon }) }))] }), jsxRuntime.jsx("span", { className: modules_efc4e723$9.error, children: error ?? '' })] }));
|
|
797
802
|
};
|
|
798
803
|
|
|
799
|
-
var css$8 = ".
|
|
804
|
+
var css$8 = ".styles_module_header__2145d314 {\n margin-bottom: 24px;\n margin-top: 8px;\n}\n\n.styles_module_title__2145d314 {\n font-size: 18px;\n}\n\n.styles_module_footer__2145d314 {\n display: flex;\n width: 100%;\n gap: 10px;\n justify-content: end;\n}\n\n.styles_module_children__2145d314 {\n display: flex;\n gap: 8px;\n flex-direction: column;\n min-width: 300px;\n width: fit-content;\n margin-bottom: 24px;\n}\n\n.theme-light .styles_module_modalButtons__2145d314 {\n background-color: rgba(47, 129, 237, 0.1647058824);\n border-color: #e1e1e1;\n color: #333333;\n}\n.theme-dark .styles_module_modalButtons__2145d314 {\n background-color: rgba(47, 129, 237, 0.1647058824);\n border-color: #aaaaaa;\n color: #ffffff;\n}\n.styles_module_modalButtons__2145d314 {\n border-style: solid;\n border-width: 1px;\n padding: 5px 10px;\n border-radius: 8px;\n}\n\n.theme-light .styles_module_confirm__2145d314 {\n background-color: rgba(47, 129, 237, 0.5764705882);\n border-color: #e1e1e1;\n color: #ffffff;\n}\n.theme-dark .styles_module_confirm__2145d314 {\n background-color: rgba(47, 129, 237, 0.5764705882);\n border-color: #aaaaaa;\n color: #e1e1e1;\n}";
|
|
805
|
+
var modules_efc4e723$8 = {"header":"styles_module_header__2145d314","title":"styles_module_title__2145d314","footer":"styles_module_footer__2145d314","children":"styles_module_children__2145d314","modalButtons":"styles_module_modalButtons__2145d314","confirm":"styles_module_confirm__2145d314"};
|
|
800
806
|
n$1(css$8,{});
|
|
801
807
|
|
|
802
808
|
const CrudModal = ({ isOpen, onClose, onConfirm, title, cancelText = 'No', confirmText = 'Yes', isLoading = false, children, showCloseButton = false, }) => {
|
|
803
|
-
return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: onClose, showCloseButton: showCloseButton, children: [jsxRuntime.jsx("div", { className:
|
|
809
|
+
return (jsxRuntime.jsxs(Modal, { isOpen: isOpen, onClose: onClose, showCloseButton: showCloseButton, children: [jsxRuntime.jsx("div", { className: modules_efc4e723$8.header, children: jsxRuntime.jsx("h1", { className: modules_efc4e723$8.title, children: title }) }), children && jsxRuntime.jsx("div", { className: modules_efc4e723$8.children, children: children }), jsxRuntime.jsxs("div", { className: modules_efc4e723$8.footer, children: [jsxRuntime.jsx("button", { className: modules_efc4e723$8.modalButtons, onClick: onClose, disabled: isLoading, children: cancelText }), jsxRuntime.jsx("button", { className: classNames(modules_efc4e723$8.confirm, modules_efc4e723$8.modalButtons), onClick: onConfirm, children: confirmText })] })] }));
|
|
804
810
|
};
|
|
805
811
|
|
|
806
812
|
function getEnumValues(entries) {
|
|
@@ -6264,7 +6270,8 @@ const EditModal = ({ isOpen, onClose, id, date }) => {
|
|
|
6264
6270
|
return (jsxRuntime.jsxs(CrudModal, { isOpen: isOpen, onClose: handleClose, onConfirm: handleSubmit(onSubmit), showCloseButton: true, confirmText: "Edit", cancelText: "Cancel", title: "Edit task", children: [jsxRuntime.jsx(Input, { ...register('title'), label: "Title", placeholder: "Training name", error: errors.title?.message }), jsxRuntime.jsx(Input, { ...register('date'), label: "Date", type: "date", placeholder: "Training date", error: errors.date?.message })] }));
|
|
6265
6271
|
};
|
|
6266
6272
|
|
|
6267
|
-
var css$7 = ".
|
|
6273
|
+
var css$7 = ".styles_module_tasksManager__2b8e4ddb {\n min-width: 300px;\n width: fit-content;\n display: flex;\n flex-direction: column;\n gap: 24px;\n max-height: 70%;\n}\n\n.styles_module_tasks__2b8e4ddb {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.styles_module_task__2b8e4ddb {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n align-items: center;\n}\n\n.theme-light .styles_module_checked__2b8e4ddb {\n color: #aaaaaa;\n}\n.theme-dark .styles_module_checked__2b8e4ddb {\n color: #aaaaaa;\n}\n\n.styles_module_title__2b8e4ddb {\n margin-right: auto;\n}\n\n.styles_module_action__2b8e4ddb {\n border: none;\n background-color: transparent;\n}\n.theme-light .styles_module_action__2b8e4ddb {\n color: #333333;\n}\n.theme-dark .styles_module_action__2b8e4ddb {\n color: #ffffff;\n}\n\n.theme-light .styles_module_delete__2b8e4ddb {\n color: #ff383c;\n}\n.theme-dark .styles_module_delete__2b8e4ddb {\n color: #ff383c;\n}\n\n.theme-light .styles_module_add__2b8e4ddb {\n background-color: rgba(47, 129, 237, 0.5764705882);\n border-color: #e1e1e1;\n color: #ffffff;\n}\n.theme-dark .styles_module_add__2b8e4ddb {\n background-color: rgba(47, 129, 237, 0.5764705882);\n border-color: #aaaaaa;\n color: #e1e1e1;\n}\n.styles_module_add__2b8e4ddb {\n border-style: solid;\n border-width: 1px;\n border-radius: 8px;\n}\n\n.styles_module_header__2b8e4ddb {\n font-size: 18px;\n}";
|
|
6274
|
+
var modules_efc4e723$7 = {"tasksManager":"styles_module_tasksManager__2b8e4ddb","tasks":"styles_module_tasks__2b8e4ddb","task":"styles_module_task__2b8e4ddb","checked":"styles_module_checked__2b8e4ddb","title":"styles_module_title__2b8e4ddb","action":"styles_module_action__2b8e4ddb","delete":"styles_module_delete__2b8e4ddb","add":"styles_module_add__2b8e4ddb","header":"styles_module_header__2b8e4ddb"};
|
|
6268
6275
|
n$1(css$7,{});
|
|
6269
6276
|
|
|
6270
6277
|
const TasksManager = ({ onClose, isOpen, tasks, selectedDate, }) => {
|
|
@@ -6287,9 +6294,9 @@ const TasksManager = ({ onClose, isOpen, tasks, selectedDate, }) => {
|
|
|
6287
6294
|
const handleToggle = (id) => () => {
|
|
6288
6295
|
toggleTask(id);
|
|
6289
6296
|
};
|
|
6290
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Modal, { isOpen: isOpen, onClose: onClose, children: jsxRuntime.jsxs("div", { className:
|
|
6291
|
-
[
|
|
6292
|
-
}), children: [jsxRuntime.jsx("input", { type: "checkbox", checked: completed, onChange: handleToggle(id) }), jsxRuntime.jsx("p", { className:
|
|
6297
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Modal, { isOpen: isOpen, onClose: onClose, children: jsxRuntime.jsxs("div", { className: modules_efc4e723$7.tasksManager, children: [jsxRuntime.jsx("h1", { className: modules_efc4e723$7.header, children: "Tasks for the day:" }), jsxRuntime.jsx("button", { className: modules_efc4e723$7.add, onClick: handleAddTask, children: "Add task" }), jsxRuntime.jsxs("ul", { className: modules_efc4e723$7.tasks, children: [tasks.length < 1 && (jsxRuntime.jsx("li", { children: jsxRuntime.jsx("p", { children: "No tasks added" }) })), tasks.map(({ id, title, completed }) => (jsxRuntime.jsxs("li", { className: classNames(modules_efc4e723$7.task, {
|
|
6298
|
+
[modules_efc4e723$7.checked]: completed,
|
|
6299
|
+
}), children: [jsxRuntime.jsx("input", { type: "checkbox", checked: completed, onChange: handleToggle(id) }), jsxRuntime.jsx("p", { className: modules_efc4e723$7.title, children: title }), jsxRuntime.jsx("button", { onClick: handleEditTask(id), className: modules_efc4e723$7.action, children: jsxRuntime.jsx(SvgEdit, {}) }), jsxRuntime.jsx("button", { onClick: handleDeleteTask(id), className: classNames(modules_efc4e723$7.action, modules_efc4e723$7.delete), children: jsxRuntime.jsx(SvgDelete, {}) })] }, id)))] })] }) }), jsxRuntime.jsx(AddModal, { isOpen: addModal.isOpen, onClose: addModal.close, date: selectedDate }), jsxRuntime.jsx(EditModal, { isOpen: editModal.isOpen, onClose: editModal.close, id: currentTaskId, date: selectedDate }), jsxRuntime.jsx(DeleteModal, { isOpen: deleteModal.isOpen, onClose: deleteModal.close, id: currentTaskId })] }));
|
|
6293
6300
|
};
|
|
6294
6301
|
|
|
6295
6302
|
const useTooltip = () => {
|
|
@@ -6325,13 +6332,14 @@ const useTooltip = () => {
|
|
|
6325
6332
|
return { tooltip, handleDayMouseEnter, handleDayMouseLeave };
|
|
6326
6333
|
};
|
|
6327
6334
|
|
|
6328
|
-
var css$6 = "
|
|
6335
|
+
var css$6 = ".theme-light .styles_module_tooltip__ac28d9b8 {\n background-color: #e1e1e1;\n}\n.theme-dark .styles_module_tooltip__ac28d9b8 {\n background-color: #aaaaaa;\n}\n.styles_module_tooltip__ac28d9b8 {\n border-radius: 8px;\n padding: 2px 8px;\n position: absolute;\n}";
|
|
6336
|
+
var modules_efc4e723$6 = {"tooltip":"styles_module_tooltip__ac28d9b8"};
|
|
6329
6337
|
n$1(css$6,{});
|
|
6330
6338
|
|
|
6331
6339
|
const Tooltip = ({ isVisible, text, x, y }) => {
|
|
6332
6340
|
if (!isVisible)
|
|
6333
6341
|
return;
|
|
6334
|
-
const Tooltip = (jsxRuntime.jsx("div", { className:
|
|
6342
|
+
const Tooltip = (jsxRuntime.jsx("div", { className: modules_efc4e723$6.tooltip, style: {
|
|
6335
6343
|
top: y,
|
|
6336
6344
|
left: x,
|
|
6337
6345
|
}, children: jsxRuntime.jsx("p", { children: text }) }));
|
|
@@ -6408,13 +6416,14 @@ var SvgPrev = function SvgPrev(props) {
|
|
|
6408
6416
|
})));
|
|
6409
6417
|
};
|
|
6410
6418
|
|
|
6411
|
-
var css$5 = "
|
|
6419
|
+
var css$5 = ".theme-light .styles_module_month__0a69a8ca {\n color: #333333;\n background-color: #ffffff;\n}\n.theme-dark .styles_module_month__0a69a8ca {\n color: #ffffff;\n background-color: #333333;\n}\n.styles_module_month__0a69a8ca {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n padding-block: 5px;\n gap: 2px;\n font-weight: 700;\n}\n\n.theme-light .styles_module_arrow__0a69a8ca {\n color: #333333;\n}\n.theme-dark .styles_module_arrow__0a69a8ca {\n color: #ffffff;\n}\n.styles_module_arrow__0a69a8ca {\n width: max-content;\n border: none;\n background-color: transparent;\n}\n.theme-light .styles_module_arrow__0a69a8ca:hover {\n color: rgba(47, 129, 237, 0.5764705882);\n}\n.theme-dark .styles_module_arrow__0a69a8ca:hover {\n color: rgba(47, 129, 237, 0.5764705882);\n}";
|
|
6420
|
+
var modules_efc4e723$5 = {"month":"styles_module_month__0a69a8ca","arrow":"styles_module_arrow__0a69a8ca"};
|
|
6412
6421
|
n$1(css$5,{});
|
|
6413
6422
|
|
|
6414
6423
|
const Month = ({ date, onPrev, onNext }) => {
|
|
6415
6424
|
const year = date.getFullYear();
|
|
6416
6425
|
const month = MONTHS_NAMES[date.getMonth()];
|
|
6417
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
6426
|
+
return (jsxRuntime.jsxs("div", { className: modules_efc4e723$5.month, children: [jsxRuntime.jsx("button", { className: modules_efc4e723$5.arrow, onClick: onPrev, type: "button", children: jsxRuntime.jsx(SvgPrev, {}) }), jsxRuntime.jsxs("p", { children: [month, " ", year] }), jsxRuntime.jsx("button", { className: modules_efc4e723$5.arrow, onClick: onNext, type: "button", children: jsxRuntime.jsx(SvgNext, {}) })] }));
|
|
6418
6427
|
};
|
|
6419
6428
|
|
|
6420
6429
|
const WEEKDAYS_NAMES = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
|
|
@@ -6428,7 +6437,8 @@ const getOrderedDays = (firstDayOfWeek) => {
|
|
|
6428
6437
|
}
|
|
6429
6438
|
};
|
|
6430
6439
|
|
|
6431
|
-
var css$4 = ".
|
|
6440
|
+
var css$4 = ".styles_module_weekDay__a9cd2130 {\n display: flex;\n}\n\n.styles_module_dayName__a9cd2130 {\n width: 32px;\n height: 32px;\n}\n.theme-light .styles_module_dayName__a9cd2130 {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_dayName__a9cd2130 {\n background-color: #333333;\n}\n.styles_module_dayName__a9cd2130 {\n font-size: 13px;\n padding: 10px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n}";
|
|
6441
|
+
var modules_efc4e723$4 = {"weekDay":"styles_module_weekDay__a9cd2130","dayName":"styles_module_dayName__a9cd2130"};
|
|
6432
6442
|
n$1(css$4,{});
|
|
6433
6443
|
|
|
6434
6444
|
const WeekDay = ({ firstDayOfWeek = 1, className = '', hideWeekends = false, }) => {
|
|
@@ -6436,12 +6446,13 @@ const WeekDay = ({ firstDayOfWeek = 1, className = '', hideWeekends = false, })
|
|
|
6436
6446
|
if (hideWeekends) {
|
|
6437
6447
|
days = days.filter((dayIndex) => dayIndex !== 0 && dayIndex !== 6);
|
|
6438
6448
|
}
|
|
6439
|
-
return (jsxRuntime.jsx("div", { className: classNames(
|
|
6440
|
-
return (jsxRuntime.jsx("span", { className:
|
|
6449
|
+
return (jsxRuntime.jsx("div", { className: classNames(modules_efc4e723$4.weekDay, className), children: days.map((index) => {
|
|
6450
|
+
return (jsxRuntime.jsx("span", { className: modules_efc4e723$4.dayName, children: WEEKDAYS_NAMES[index] }, WEEKDAYS_NAMES[index]));
|
|
6441
6451
|
}) }));
|
|
6442
6452
|
};
|
|
6443
6453
|
|
|
6444
|
-
var css$3 = ".
|
|
6454
|
+
var css$3 = ".styles_module_calendarGrid__eeb1dea8 {\n border-style: solid;\n border-width: 1px;\n}\n.theme-light .styles_module_calendarGrid__eeb1dea8 {\n border-color: #e1e1e1;\n background-color: #ffffff;\n}\n.theme-dark .styles_module_calendarGrid__eeb1dea8 {\n border-color: #aaaaaa;\n background-color: #333333;\n}\n.styles_module_calendarGrid__eeb1dea8 {\n padding: 10px;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n}";
|
|
6455
|
+
var modules_efc4e723$3 = {"calendarGrid":"styles_module_calendarGrid__eeb1dea8"};
|
|
6445
6456
|
n$1(css$3,{});
|
|
6446
6457
|
|
|
6447
6458
|
const BaseCalendar = ({ mode = MODES.MONTH, monthDate, firstDayOfWeek = 1, hideWeekends = false, ...props }) => {
|
|
@@ -6471,7 +6482,7 @@ const BaseCalendar = ({ mode = MODES.MONTH, monthDate, firstDayOfWeek = 1, hideW
|
|
|
6471
6482
|
}
|
|
6472
6483
|
setBaseDate(newDate);
|
|
6473
6484
|
};
|
|
6474
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
6485
|
+
return (jsxRuntime.jsxs("div", { className: modules_efc4e723$3.calendarGrid, children: [jsxRuntime.jsx(Month, { date: baseDate, onPrev: onPrev, onNext: onNext }), jsxRuntime.jsx(WeekDay, { firstDayOfWeek: firstDayOfWeek, hideWeekends: hideWeekends }), jsxRuntime.jsx(CalendarGrid, { mode: mode, monthDate: baseDate, firstDayOfWeek: firstDayOfWeek, hideWeekends: hideWeekends, ...props })] }));
|
|
6475
6486
|
};
|
|
6476
6487
|
|
|
6477
6488
|
const DATE_MASK = {
|
|
@@ -6560,7 +6571,8 @@ function useValidate(selectedDate) {
|
|
|
6560
6571
|
};
|
|
6561
6572
|
}
|
|
6562
6573
|
|
|
6563
|
-
var css$2 = ".
|
|
6574
|
+
var css$2 = ".styles_module_datepicker__c32ee18d {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 8px;\n}\n.theme-light .styles_module_datepicker__c32ee18d {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_datepicker__c32ee18d {\n background-color: #333333;\n}";
|
|
6575
|
+
var modules_efc4e723$2 = {"datepicker":"styles_module_datepicker__c32ee18d"};
|
|
6564
6576
|
n$1(css$2,{});
|
|
6565
6577
|
|
|
6566
6578
|
const DatePicker = ({ selectedDate, monthDate = new Date(), onChange, ...props }) => {
|
|
@@ -6579,17 +6591,19 @@ const DatePicker = ({ selectedDate, monthDate = new Date(), onChange, ...props }
|
|
|
6579
6591
|
handleDateValidation(e.currentTarget.value);
|
|
6580
6592
|
}
|
|
6581
6593
|
};
|
|
6582
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
6594
|
+
return (jsxRuntime.jsxs("div", { className: modules_efc4e723$2.datepicker, children: [jsxRuntime.jsx(Input, { isDateInput: true, label: "Date", value: value, ref: ref, placeholder: "dd/mm/yyyy", onBlur: handleDateChange, onReset: handleClearInput, onKeyDown: handleKeyDown, error: error }), jsxRuntime.jsx(BaseCalendar, { selectedDate: currentDate, onDateClick: handleDateSelectAndExternalUpdate, monthDate: currentDate ?? monthDate, ...props })] }));
|
|
6583
6595
|
};
|
|
6584
6596
|
|
|
6585
|
-
var css$1 = ".
|
|
6597
|
+
var css$1 = ".styles_module_clear__8e986404 {\n border-style: solid;\n border-width: 1px;\n}\n.theme-light .styles_module_clear__8e986404 {\n border-color: #e1e1e1;\n background-color: #ffffff;\n color: #333333;\n}\n.theme-dark .styles_module_clear__8e986404 {\n border-color: #aaaaaa;\n background-color: #333333;\n color: #ffffff;\n}\n.styles_module_clear__8e986404 {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n width: 100%;\n font-weight: 600;\n border-bottom-right-radius: 8px;\n border-bottom-left-radius: 8px;\n}\n.theme-light .styles_module_clear__8e986404:hover {\n background-color: rgba(47, 129, 237, 0.5764705882);\n color: #ffffff;\n}\n.theme-dark .styles_module_clear__8e986404:hover {\n background-color: #aaaaaa;\n color: #e1e1e1;\n}\n.styles_module_clear__8e986404:active {\n transform: scale(0.98);\n}\n.theme-light .styles_module_clear__8e986404:active {\n background-color: #2f80ed;\n color: #ffffff;\n}\n.theme-dark .styles_module_clear__8e986404:active {\n background-color: #2f80ed;\n color: #e1e1e1;\n}";
|
|
6598
|
+
var modules_efc4e723$1 = {"clear":"styles_module_clear__8e986404"};
|
|
6586
6599
|
n$1(css$1,{});
|
|
6587
6600
|
|
|
6588
6601
|
const Clear = ({ onClick }) => {
|
|
6589
|
-
return (jsxRuntime.jsx("button", { className:
|
|
6602
|
+
return (jsxRuntime.jsx("button", { className: modules_efc4e723$1.clear, type: "button", onClick: onClick, children: "Clear" }));
|
|
6590
6603
|
};
|
|
6591
6604
|
|
|
6592
|
-
var css = ".
|
|
6605
|
+
var css = ".styles_module_rangePicker__42a840f2 {\n display: flex;\n flex-direction: column;\n padding: 8px;\n}\n.theme-light .styles_module_rangePicker__42a840f2 {\n background-color: #ffffff;\n}\n.theme-dark .styles_module_rangePicker__42a840f2 {\n background-color: #333333;\n}\n\n.styles_module_calendar__42a840f2 {\n margin-top: 15px;\n}\n\n.styles_module_inputs__42a840f2 {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}";
|
|
6606
|
+
var modules_efc4e723 = {"rangePicker":"styles_module_rangePicker__42a840f2","calendar":"styles_module_calendar__42a840f2","inputs":"styles_module_inputs__42a840f2"};
|
|
6593
6607
|
n$1(css,{});
|
|
6594
6608
|
|
|
6595
6609
|
const RangePicker = ({ rangeStart, rangeEnd, monthDate = new Date(), onChangeStart, onChangeEnd, ...props }) => {
|
|
@@ -6653,7 +6667,7 @@ const RangePicker = ({ rangeStart, rangeEnd, monthDate = new Date(), onChangeSta
|
|
|
6653
6667
|
handleStartClearInput();
|
|
6654
6668
|
handleEndClearInput();
|
|
6655
6669
|
};
|
|
6656
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
6670
|
+
return (jsxRuntime.jsxs("div", { className: modules_efc4e723.rangePicker, children: [jsxRuntime.jsxs("div", { className: modules_efc4e723.inputs, children: [jsxRuntime.jsx(Input, { isDateInput: true, label: "From", value: startValue, ref: startRef, placeholder: "dd/mm/yyyy", onBlur: handleStartChange, onReset: handleStartClearInput, onKeyDown: handleStartKeyDown, error: startError }), jsxRuntime.jsx(Input, { isDateInput: true, label: "To", value: endValue, ref: endRef, placeholder: "dd/mm/yyyy", onBlur: handleEndChange, onReset: handleEndClearInput, onKeyDown: handleEndKeyDown, error: endError })] }), jsxRuntime.jsxs("div", { className: modules_efc4e723.calendar, children: [jsxRuntime.jsx(BaseCalendar, { monthDate: monthDate, rangeStart: startDate, rangeEnd: endDate, onDateClick: handleDateSelectAndExternalUpdate, ...props }), jsxRuntime.jsx(Clear, { onClick: handleClearRange })] })] }));
|
|
6657
6671
|
};
|
|
6658
6672
|
|
|
6659
6673
|
exports.BaseCalendar = BaseCalendar;
|