datepicker-pashuk 1.0.0

package/dist/index.cjs.js

@@ -0,0 +1,1163 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactDom = require('react-dom');
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$9 = "@import url(\"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap\");a,article,aside,audio,body,div,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,img,label,legend,li,mark,menu,nav,ol,output,p,ruby,section,span,summary,time,ul,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Open Sans,sans-serif}";
+styleInject(css_248z$9);
+
+const NextIcon = () => {
+    return (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M4.27337 4L3.33337 4.94L6.38671 8L3.33337 11.06L4.27337 12L8.27337 8L4.27337 4Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M8.66668 4L7.72668 4.94L10.78 8L7.72668 11.06L8.66668 12L12.6667 8L8.66668 4Z", fill: "currentColor" })] }));
+};
+
+const PreviousIcon = () => {
+    return (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M11.7266 12L12.6666 11.06L9.61329 8L12.6666 4.94L11.7266 4L7.72663 8L11.7266 12Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M7.33332 12L8.27332 11.06L5.21998 8L8.27331 4.94L7.33331 4L3.33332 8L7.33332 12Z", fill: "currentColor" })] }));
+};
+
+var css_248z$8 = ".CalendarCell-module_cell__-bATh{align-items:center;color:#333;display:flex;justify-content:center}[data-theme=dark] .CalendarCell-module_cell__-bATh{color:#f1f1f1}.CalendarCell-module_cell__-bATh{background-color:transparent;border-radius:8px;cursor:pointer;height:32px;width:32px}.CalendarCell-module_cell__-bATh:hover{background-color:#aaa}.CalendarCell-module_cell__day-number__OwQ5i{font-size:13px;font-weight:600}.CalendarCell-module_cell__todo-indicator__RR2HA{color:#2f80ed;font-size:24px;margin-left:16px;position:absolute}.CalendarCell-module_cell--other-month__K4F-o,[data-theme=dark] .CalendarCell-module_cell--other-month__K4F-o{color:#aaa}.CalendarCell-module_cell--other-month__K4F-o:hover{background-color:#f1f1f1;color:#333}.CalendarCell-module_cell--weekend__J6sbX{background-color:transparent;color:#d32f2f}[data-theme=dark] .CalendarCell-module_cell--weekend__J6sbX{color:#d32f2f}.CalendarCell-module_cell--holiday__WuOUr{background-color:#d32f2f;color:#fff}.CalendarCell-module_cell--in-range__FUcKY{background-color:rgba(47,128,237,.102);border-radius:0;color:#2f80ed}.CalendarCell-module_cell--in-range__FUcKY:hover{background-color:#fff;color:#2f80ed}[data-theme=dark] .CalendarCell-module_cell--in-range__FUcKY:hover{background-color:#333}.CalendarCell-module_cell--selected__FK-7m{background-color:#2f80ed;border-radius:8px;color:#fff}.CalendarCell-module_cell--selected__FK-7m:hover{background-color:rgba(47,128,237,.102);color:#2f80ed}";
+var styles$8 = {"cell":"CalendarCell-module_cell__-bATh","cell__day-number":"CalendarCell-module_cell__day-number__OwQ5i","cell__todo-indicator":"CalendarCell-module_cell__todo-indicator__RR2HA","cell--other-month":"CalendarCell-module_cell--other-month__K4F-o","cell--weekend":"CalendarCell-module_cell--weekend__J6sbX","cell--holiday":"CalendarCell-module_cell--holiday__WuOUr","cell--in-range":"CalendarCell-module_cell--in-range__FUcKY","cell--selected":"CalendarCell-module_cell--selected__FK-7m"};
+styleInject(css_248z$8);
+
+const CalendarCell = (props) => {
+    const { date, dayNumber, isCurrentMonth, onClick, isHoliday, isSelected, isInRange, textColor, backgroundColor, isWeekend, id, isDisabled, haveToDo, onDayClickDouble, } = props;
+    const cellClasses = [
+        styles$8.cell,
+        !isCurrentMonth && styles$8['cell--other-month'],
+        isHoliday && isCurrentMonth && styles$8['cell--holiday'],
+        isSelected && styles$8['cell--selected'],
+        isInRange && styles$8['cell--in-range'],
+        isWeekend && isCurrentMonth && styles$8['cell--weekend'],
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const extrasStyles = {};
+    if (isHoliday || isWeekend) {
+        if (textColor)
+            extrasStyles.color = textColor;
+        if (backgroundColor)
+            extrasStyles.backgroundColor = backgroundColor;
+    }
+    const handleOnClick = (event) => {
+        if (!isDisabled)
+            onClick?.(date, event);
+    };
+    const handleOnClickDoble = (event) => {
+        if (!isDisabled)
+            onDayClickDouble?.(date, event);
+    };
+    return (jsxRuntime.jsxs("div", { className: cellClasses, style: extrasStyles, onClick: handleOnClick, onDoubleClick: handleOnClickDoble, "aria-label": `Day ${dayNumber}`, role: "cell", children: [jsxRuntime.jsx("span", { className: styles$8['cell__day-number'], children: dayNumber }), haveToDo && jsxRuntime.jsx("span", { className: styles$8['cell__todo-indicator'], children: "\u02D9" })] }, id));
+};
+
+var css_248z$7 = ".CalendarGrid-module_grid__4Gpyr{display:grid;flex:1;grid-template-columns:repeat(7,1fr);height:32px;margin:0;padding:0;width:230px}";
+var styles$7 = {"grid":"CalendarGrid-module_grid__4Gpyr"};
+styleInject(css_248z$7);
+
+const CalendarGrid = (props) => {
+    const { dateArray, onDayClick, onDayClickDouble } = props;
+    return (jsxRuntime.jsx("div", { className: styles$7.grid, role: "grid", children: dateArray.map((el) => (jsxRuntime.jsx(CalendarCell, { onClick: onDayClick, onDayClickDouble: onDayClickDouble, ...el }, el.id))) }));
+};
+
+const WEEKDAY = [
+    {
+        id: '1',
+        weekday: 'Su',
+    },
+    {
+        id: '2',
+        weekday: 'Mo',
+    },
+    {
+        id: '3',
+        weekday: 'Tu',
+    },
+    {
+        id: '4',
+        weekday: 'We',
+    },
+    {
+        id: '5',
+        weekday: 'Th',
+    },
+    {
+        id: '6',
+        weekday: 'Fr',
+    },
+    {
+        id: '7',
+        weekday: 'Sa',
+    },
+];
+const MONDAY_INDEX = 1;
+const SUNDAY_INDEX = 0;
+const SATURDAY_INDEX = 6;
+const WEEK_LENGHT = 7;
+
+var css_248z$6 = ".CalendarHeader-module_week__cell__Tc-71,.CalendarHeader-module_week__neYla{align-items:center;display:flex;justify-content:center}.CalendarHeader-module_week__neYla{height:32px;margin:0;padding:0;width:230px}.CalendarHeader-module_week__cell__Tc-71{border-radius:8px;color:#333;height:32px;width:32px}[data-theme=dark] .CalendarHeader-module_week__cell__Tc-71{color:#f1f1f1}.CalendarHeader-module_week__weekday__2h6R-{font-size:13px;font-weight:600}";
+var styles$6 = {"week":"CalendarHeader-module_week__neYla","week__cell":"CalendarHeader-module_week__cell__Tc-71","week__weekday":"CalendarHeader-module_week__weekday__2h6R-"};
+styleInject(css_248z$6);
+
+const CalendarHeader = (props) => {
+    const { fromMonday } = props;
+    const WEEKDAY_SORT = fromMonday
+        ? [...WEEKDAY.slice(MONDAY_INDEX), WEEKDAY[SUNDAY_INDEX]]
+        : WEEKDAY;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { className: styles$6.week, children: WEEKDAY_SORT.map(({ weekday, id }) => (jsxRuntime.jsx("div", { className: styles$6.week__cell, children: jsxRuntime.jsx("span", { className: styles$6.week__weekday, children: weekday }) }, id))) }) }));
+};
+
+var css_248z$5 = ".BaseCalendar-module_calendar__header__Fa7wb{align-items:center;display:flex;justify-content:space-between}.BaseCalendar-module_calendar__4X1R9{align-items:center;background-color:#fff;display:flex;flex-direction:column;justify-content:flex-start}[data-theme=dark] .BaseCalendar-module_calendar__4X1R9{background-color:#333}.BaseCalendar-module_calendar__4X1R9{border:1px solid #f1f1f1;border-radius:8px;min-height:110px;padding-bottom:8px;width:250px}.BaseCalendar-module_calendar__header__Fa7wb{background-color:#fff}[data-theme=dark] .BaseCalendar-module_calendar__header__Fa7wb{background-color:#333}.BaseCalendar-module_calendar__header__Fa7wb{margin:8px;width:250px}.BaseCalendar-module_calendar__button__ffhqu{color:#333}[data-theme=dark] .BaseCalendar-module_calendar__button__ffhqu{color:#f1f1f1}.BaseCalendar-module_calendar__button__ffhqu{background-color:transparent;border:none;margin:0 16px;padding:0;transition:color .1s ease}.BaseCalendar-module_calendar__button__ffhqu:hover{color:#aaa}[data-theme=dark] .BaseCalendar-module_calendar__button__ffhqu:hover{color:#f1f1f1}.BaseCalendar-module_calendar__button__ffhqu:disabled{cursor:not-allowed;opacity:.3}.BaseCalendar-module_calendar__month__zGLfH,.BaseCalendar-module_calendar__year__OwYFc{color:#333}[data-theme=dark] .BaseCalendar-module_calendar__month__zGLfH,[data-theme=dark] .BaseCalendar-module_calendar__year__OwYFc{color:#f1f1f1}.BaseCalendar-module_calendar__month__zGLfH,.BaseCalendar-module_calendar__year__OwYFc{font-size:14px;font-weight:700}.BaseCalendar-module_calendar__notes__RD7P8{color:#aaa;font-size:10px}.BaseCalendar-module_calendar__year__OwYFc{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;cursor:pointer;margin-left:none;padding:none;transition:all .2s ease}.BaseCalendar-module_calendar__year__OwYFc:hover{transform:scale(1.05)}";
+var styles$5 = {"calendar__header":"BaseCalendar-module_calendar__header__Fa7wb","calendar":"BaseCalendar-module_calendar__4X1R9","calendar__button":"BaseCalendar-module_calendar__button__ffhqu","calendar__month":"BaseCalendar-module_calendar__month__zGLfH","calendar__year":"BaseCalendar-module_calendar__year__OwYFc","calendar__notes":"BaseCalendar-module_calendar__notes__RD7P8"};
+styleInject(css_248z$5);
+
+const BaseCalendar = (props) => {
+    const { fromMonday, dateArray, month, year, onClickNext, onClickPrevious, onDayClick, canNext, canPrev, onDayClickDouble, yearsArray, onClickNextYear, } = props;
+    const handleYearChange = (e) => {
+        const newYear = parseInt(e.target.value);
+        onClickNextYear(newYear);
+    };
+    return (jsxRuntime.jsxs("article", { className: styles$5.calendar, children: [jsxRuntime.jsxs("header", { className: styles$5.calendar__header, children: [jsxRuntime.jsx("button", { className: styles$5.calendar__button, type: "button", onClick: onClickPrevious, disabled: !canPrev, children: jsxRuntime.jsx(PreviousIcon, {}) }), jsxRuntime.jsxs("div", { className: styles$5.calendar__month, children: [month, ' ', jsxRuntime.jsx("select", { className: styles$5.calendar__year, value: year, onChange: handleYearChange, children: yearsArray.map((el) => (jsxRuntime.jsx("option", { value: el, children: el }, `option-yaer-${el}`))) })] }), jsxRuntime.jsx("button", { className: styles$5.calendar__button, type: "button", onClick: onClickNext, disabled: !canNext, children: jsxRuntime.jsx(NextIcon, {}) })] }), jsxRuntime.jsx(CalendarHeader, { fromMonday: fromMonday }), jsxRuntime.jsx(CalendarGrid, { dateArray: dateArray, onDayClick: onDayClick, onDayClickDouble: onDayClickDouble }), onDayClickDouble && (jsxRuntime.jsx("span", { className: styles$5.calendar__notes, children: "Click twice on the day to add a task." }))] }));
+};
+
+var THEMED;
+(function (THEMED) {
+    THEMED["LIGHT"] = "light";
+    THEMED["DARK"] = "dark";
+})(THEMED || (THEMED = {}));
+
+const getTheme = (darkThemed) => {
+    return darkThemed ? THEMED.DARK : THEMED.LIGHT;
+};
+
+const DATE_PARTS_LENGTH = 3;
+const MAX_INPUT_LENGTH = 10;
+const FIRST_INDEX = 1;
+
+const START_DATE_INDEX_ = 0;
+const START_MONTH_INDEX = 2;
+const START_YEAR_INDEX = 4;
+const MAX_DATE_LENGTH = 10;
+
+const CELLS_LENGTH = 42;
+const MIN_CELLS_LENGTH = 28;
+const generateMonthArray = (currentDate, params) => {
+    const days = [];
+    const { selectedDate, rangeStart, rangeEnd, fromMonday } = params;
+    const startWeekDay = fromMonday ? FIRST_INDEX : START_DATE_INDEX_;
+    const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), FIRST_INDEX - startWeekDay);
+    const startWeekday = firstDayOfMonth.getDay();
+    const startDate = new Date(firstDayOfMonth);
+    startDate.setDate(firstDayOfMonth.getDate() - startWeekday + startWeekDay);
+    const selectedTime = selectedDate?.getTime();
+    const startTime = rangeStart?.getTime();
+    const endTime = rangeEnd?.getTime();
+    for (let i = 0; i < CELLS_LENGTH; i++) {
+        const date = new Date(startDate);
+        date.setDate(startDate.getDate() + i);
+        const isCurrentMonth = date.getMonth() === currentDate.getMonth();
+        if (!isCurrentMonth &&
+            date.getDay() == START_DATE_INDEX_ + startWeekDay &&
+            i >= MIN_CELLS_LENGTH) {
+            return days;
+        }
+        const newId = date.toISOString();
+        const isSelected = selectedTime === date.getTime() && isCurrentMonth;
+        const isInRange = !!(startTime &&
+            endTime &&
+            date.getTime() >= startTime &&
+            date.getTime() <= endTime);
+        const resultDay = {
+            id: newId,
+            date,
+            dayNumber: date.getDate(),
+            isCurrentMonth,
+            isSelected,
+            isInRange,
+        };
+        days.push(resultDay);
+    }
+    return days;
+};
+
+class CalenderDecorator {
+    getNextDate(date) {
+        const newDate = new Date(date.getFullYear(), date.getMonth() + FIRST_INDEX, FIRST_INDEX);
+        return newDate;
+    }
+    getPreviousDate(date) {
+        const newDate = new Date(date.getFullYear(), date.getMonth() - FIRST_INDEX, FIRST_INDEX);
+        return newDate;
+    }
+    getNextYear(date, newYear) {
+        const newDate = new Date(newYear, date.getMonth(), FIRST_INDEX);
+        return newDate;
+    }
+    getDays(currentDate, params) {
+        return generateMonthArray(currentDate, params);
+    }
+}
+
+class BaseCalendarEngine {
+    engine;
+    constructor(engine) {
+        this.engine = engine;
+    }
+    getNextDate(date) {
+        return this.engine.getNextDate(date);
+    }
+    getPreviousDate(date) {
+        return this.engine.getPreviousDate(date);
+    }
+    getNextYear(date, newYear) {
+        return this.engine.getNextYear(date, newYear);
+    }
+}
+
+class FromMondayDecorator extends BaseCalendarEngine {
+    fromMonday;
+    constructor(engine, fromMonday) {
+        super(engine);
+        this.fromMonday = fromMonday || false;
+    }
+    getDays(currentDate, params) {
+        const days = this.engine.getDays(currentDate, { ...params, fromMonday: this.fromMonday });
+        return days;
+    }
+}
+
+class HolidayDecorator extends BaseCalendarEngine {
+    holidays;
+    constructor(engine, holidays) {
+        (super(engine), (this.holidays = new Set(holidays.map((el) => el.getTime()))));
+    }
+    getDays(currentDate, params) {
+        const days = this.engine.getDays(currentDate, params);
+        return days.map((day) => {
+            const dayTime = day.date.getTime();
+            if (this.holidays.has(dayTime)) {
+                return { ...day, isHoliday: true };
+            }
+            return day;
+        });
+    }
+}
+
+const isMinMaxValue = (date, minDate, maxDate) => {
+    if (minDate) {
+        const currentDate = new Date(date.getFullYear(), date.getMonth() + FIRST_INDEX, START_DATE_INDEX_);
+        if (currentDate <= minDate)
+            return false;
+    }
+    if (maxDate) {
+        const currentDate = new Date(date.getFullYear(), date.getMonth(), START_DATE_INDEX_);
+        if (currentDate >= maxDate)
+            return false;
+    }
+    return true;
+};
+
+class MinMaxDecorator extends BaseCalendarEngine {
+    minDate;
+    maxDate;
+    constructor(engine, minDate, maxDate) {
+        super(engine);
+        this.minDate = minDate || null;
+        this.maxDate = maxDate || null;
+    }
+    isDateInRange(date) {
+        return isMinMaxValue(date, this.minDate, this.maxDate);
+    }
+    getDays(currentDate, params) {
+        const days = this.engine.getDays(currentDate, params) || [];
+        return days.map((day) => {
+            if (day.date.getTime() < (this.minDate?.getTime() || 0) ||
+                day.date.getTime() > (this.maxDate?.getTime() || 0)) {
+                return { ...day, isDisabled: true, isCurrentMonth: false };
+            }
+            return day;
+        });
+    }
+    getNextDate(date) {
+        const nextDate = this.engine.getNextDate(date);
+        return this.isDateInRange(nextDate) ? nextDate : date;
+    }
+    getPreviousDate(date) {
+        const prevDate = this.engine.getPreviousDate(date);
+        return this.isDateInRange(prevDate) ? prevDate : date;
+    }
+    getNextYear(date, newYear) {
+        const nextYear = this.engine.getNextYear(date, newYear);
+        return this.isDateInRange(nextYear) ? nextYear : date;
+    }
+}
+
+const INPUT_TYPE = {
+    START: 'START',
+    END: 'END',
+};
+
+const isSameDates = (firstDate, secondDate) => {
+    if (firstDate.getFullYear() === secondDate.getFullYear() &&
+        firstDate.getMonth() === secondDate.getMonth() &&
+        firstDate.getDate() === secondDate.getDate())
+        return true;
+    return false;
+};
+
+class RangeDecorator extends BaseCalendarEngine {
+    listeners = new Set();
+    rangeStart;
+    rangeEnd;
+    constructor(_config) {
+        super(_config);
+        this.rangeStart = null;
+        this.rangeEnd = null;
+    }
+    getDays(currentDate, params) {
+        const days = this.engine.getDays(currentDate, params);
+        const { rangeStart, rangeEnd } = params;
+        if (!rangeStart && !rangeEnd)
+            return days;
+        return days.map((day) => {
+            const isStart = rangeStart ? isSameDates(day.date, rangeStart) : false;
+            const isEnd = rangeEnd ? isSameDates(day.date, rangeEnd) : false;
+            const inBetween = rangeStart && rangeEnd && day.date > rangeStart && day.date < rangeEnd ? true : false;
+            return { ...day, isSelected: isStart || isEnd, isInRange: isStart || isEnd || inBetween };
+        });
+    }
+    getRangeStart() {
+        return this.rangeStart;
+    }
+    getRangeEnd() {
+        return this.rangeEnd;
+    }
+    setRangeStart(date) {
+        this.rangeStart = date;
+        if (date && this.rangeEnd && date > this.rangeEnd) {
+            this.rangeEnd = null;
+        }
+        this.notify();
+    }
+    setRangeEnd(date) {
+        if (date && this.rangeStart && date < this.rangeStart) {
+            return;
+        }
+        this.rangeEnd = date;
+        this.notify();
+    }
+    clearRange(inputType) {
+        if (inputType === INPUT_TYPE.END) {
+            this.rangeEnd = null;
+        }
+        else {
+            this.rangeEnd = null;
+            this.rangeStart = null;
+        }
+        this.notify();
+    }
+    handleRangeClick(date) {
+        if (!this.rangeStart) {
+            this.rangeStart = date;
+        }
+        else if (!this.rangeEnd) {
+            if (date < this.rangeStart) {
+                this.rangeStart = date;
+                this.rangeEnd = null;
+            }
+            else {
+                this.rangeEnd = date;
+            }
+        }
+        else {
+            this.rangeStart = date;
+            this.rangeEnd = null;
+        }
+        this.notify();
+        return {
+            rangeStart: this.rangeStart,
+            rangeEnd: this.rangeEnd,
+        };
+    }
+    notify() {
+        this.listeners.forEach((listener) => listener());
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+}
+
+class StorageService {
+    key;
+    defaultValue;
+    constructor(key, defaultValue) {
+        this.key = key;
+        this.defaultValue = defaultValue;
+    }
+    get() {
+        const data = localStorage.getItem(this.key);
+        return data ? JSON.parse(data) : this.defaultValue;
+    }
+    set(value) {
+        localStorage.setItem(this.key, JSON.stringify(value));
+    }
+}
+
+class TodoDecorator extends BaseCalendarEngine {
+    STORAGE_KEY = 'calendar_todos';
+    storage = new StorageService(this.STORAGE_KEY, {});
+    constructor(engine) {
+        super(engine);
+    }
+    getDateKey(date) {
+        return date.toISOString().split('T')[START_DATE_INDEX_];
+    }
+    getAllTodos() {
+        return this.storage.get();
+    }
+    getTodosByDate(date) {
+        const key = this.getDateKey(date);
+        return this.getAllTodos()[key] || [];
+    }
+    addTodo(date, todo) {
+        const key = this.getDateKey(date);
+        const allTodos = this.getAllTodos();
+        allTodos[key] = allTodos[key] || [];
+        allTodos[key].push(todo);
+        this.storage.set(allTodos);
+    }
+    deleteTodo(date, todo) {
+        const key = this.getDateKey(date);
+        const allTodos = this.getAllTodos();
+        allTodos[key] = allTodos[key] || [];
+        allTodos[key] = allTodos[key].filter((item) => item !== todo);
+        this.storage.set(allTodos);
+    }
+    getDays(currentDate, params) {
+        const todos = this.getAllTodos();
+        const days = this.engine.getDays(currentDate, params);
+        return days.map((day) => {
+            const key = this.getDateKey(day.date);
+            const haveToDo = todos[key] && todos[key].length > 0;
+            return {
+                ...day,
+                todo: todos[key] || [],
+                haveToDo,
+            };
+        });
+    }
+}
+
+class ViewByWeekDecorator extends BaseCalendarEngine {
+    constructor(engine) {
+        super(engine);
+    }
+    getDays(currentDate, params) {
+        const daysArray = this.engine.getDays(currentDate, params);
+        const currentDateIndex = daysArray.findIndex((day) => isSameDates(day.date, currentDate));
+        if (currentDateIndex === -FIRST_INDEX)
+            return daysArray.slice(START_DATE_INDEX_, WEEK_LENGHT);
+        const weekCount = Math.floor(currentDateIndex / WEEK_LENGHT);
+        return daysArray.slice(weekCount * WEEK_LENGHT, weekCount * WEEK_LENGHT + WEEK_LENGHT);
+    }
+    getNextDate(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + WEEK_LENGHT);
+    }
+    getPreviousDate(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate() - WEEK_LENGHT);
+    }
+}
+
+class WeekdayDecorator extends BaseCalendarEngine {
+    constructor(engine) {
+        super(engine);
+    }
+    getDays(currentDate, params) {
+        const days = this.engine.getDays(currentDate, params);
+        return days.map((day) => {
+            const dayDay = day.date.getDay();
+            if (dayDay == SUNDAY_INDEX || dayDay == SATURDAY_INDEX)
+                return { ...day, isWeekend: true };
+            return day;
+        });
+    }
+}
+
+const MAX_DAY = 31;
+const MAX_MONTH = 12;
+const MAX_YEAR = 2050;
+const MIN_YEAR = 1970;
+const validateDateInput = (value) => {
+    const validationResult = {
+        isValid: false,
+        error: '',
+        date: null,
+    };
+    const trimmed = value.trim();
+    const parts = trimmed.split('.');
+    if (parts.length !== DATE_PARTS_LENGTH) {
+        return { ...validationResult, error: 'Invalid format. Expected DD.MM.YYYY' };
+    }
+    if (trimmed.length > MAX_INPUT_LENGTH) {
+        return { ...validationResult, error: 'Input too long' };
+    }
+    const [dayRaw, monthRaw, yearRaw] = parts;
+    const day = Number(dayRaw);
+    const month = Number(monthRaw);
+    const year = Number(yearRaw);
+    if (Number.isNaN(day) || Number.isNaN(month) || Number.isNaN(year)) {
+        return { ...validationResult, error: 'Invalid numeric values' };
+    }
+    if (day > MAX_DAY || day < FIRST_INDEX) {
+        return { ...validationResult, error: 'The day should be from 1 to 31' };
+    }
+    if (month > MAX_MONTH || month < FIRST_INDEX) {
+        return { ...validationResult, error: 'The month should be from 1 to 12' };
+    }
+    if (year > MAX_YEAR) {
+        return { ...validationResult, error: `The year should be less than ${MAX_YEAR}` };
+    }
+    if (year < MIN_YEAR) {
+        return { ...validationResult, error: `The year should be greater than ${MIN_YEAR}` };
+    }
+    const newDate = new Date(year, month - FIRST_INDEX, day);
+    if (newDate.getFullYear() !== year ||
+        newDate.getMonth() !== month - FIRST_INDEX ||
+        newDate.getDate() !== day) {
+        return { ...validationResult, error: 'Invalid date for the given month/year' };
+    }
+    return { ...validationResult, isValid: true, date: newDate };
+};
+
+const generateYearArray = (minYear, maxYear) => {
+    minYear ??= MIN_YEAR;
+    maxYear ??= MAX_YEAR;
+    const yearArray = [];
+    while (minYear <= maxYear) {
+        yearArray.push(minYear);
+        minYear += FIRST_INDEX;
+    }
+    return yearArray;
+};
+
+class DatepickerService {
+    engine;
+    viewDate;
+    selectedDate;
+    listeners = new Set();
+    yearsArray = [];
+    constructor(_config) {
+        this.engine = this.composeEngine(_config);
+        this.viewDate = this.selectFirstDay(_config);
+        this.selectedDate = _config?.defaultDate || null;
+        this.yearsArray = generateYearArray(_config?.minDate?.getFullYear(), _config?.maxDate?.getFullYear());
+    }
+    composeEngine(_config) {
+        let engine = new CalenderDecorator();
+        if (_config?.maxDate || _config?.minDate || _config?.defaultDate)
+            engine = new MinMaxDecorator(engine, _config.minDate, _config.maxDate);
+        if (_config?.withHoliday && _config.holidays)
+            engine = new HolidayDecorator(engine, _config.holidays);
+        if (_config?.withWeekend)
+            engine = new WeekdayDecorator(engine);
+        if (_config?.fromMonday)
+            engine = new FromMondayDecorator(engine, _config.fromMonday);
+        if (_config?.viewByWeek)
+            engine = new ViewByWeekDecorator(engine);
+        if (_config?.withTodo)
+            engine = new TodoDecorator(engine);
+        if (_config?.withRange)
+            engine = new RangeDecorator(engine);
+        return engine;
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+    notify() {
+        this.listeners.forEach((listener) => listener());
+    }
+    next() {
+        this.viewDate = this.engine.getNextDate(this.viewDate);
+        this.notify();
+    }
+    prev() {
+        this.viewDate = this.engine.getPreviousDate(this.viewDate);
+        this.notify();
+    }
+    handleInputChange(value) {
+        const result = validateDateInput(value);
+        if (result.isValid && result.date) {
+            this.selectedDate = result.date;
+            this.viewDate = result.date;
+            this.notify();
+        }
+        return result;
+    }
+    getInputValue() {
+        if (!this.selectedDate) {
+            return '';
+        }
+        return this.selectedDate.toLocaleDateString();
+    }
+    setSelectedDate(date) {
+        this.selectedDate = date;
+        if (date)
+            this.viewDate = date;
+        this.notify();
+    }
+    getSelectedDate() {
+        return this.selectedDate;
+    }
+    getNextYear(newYear) {
+        const newDate = this.engine.getNextYear(this.viewDate, newYear);
+        this.viewDate = newDate;
+        this.notify();
+        return newDate;
+    }
+    getViewModel() {
+        const nextDate = this.engine.getNextDate(this.viewDate);
+        const prevDate = this.engine.getPreviousDate(this.viewDate);
+        let rangeStart = null;
+        let rangeEnd = null;
+        if (this.engine instanceof RangeDecorator) {
+            rangeStart = this.engine.getRangeStart();
+            rangeEnd = this.engine.getRangeEnd();
+        }
+        return {
+            dateArray: this.engine.getDays(this.viewDate, {
+                selectedDate: this.selectedDate,
+                rangeStart: rangeStart,
+                rangeEnd: rangeEnd,
+            }),
+            fromMonday: false,
+            month: this.viewDate.toLocaleString('en-US', { month: 'long' }),
+            year: this.viewDate.getFullYear(),
+            onClickNext: () => this.next(),
+            onClickPrevious: () => this.prev(),
+            onDayClick: (date, _event) => this.setSelectedDate(date),
+            onDayRangeClick: (date) => this.handleRangeClick(date.toLocaleDateString()),
+            onClickNextYear: (newYear) => this.getNextYear(newYear),
+            canNext: nextDate.getTime() !== this.viewDate.getTime(),
+            canPrev: prevDate.getTime() !== this.viewDate.getTime(),
+            yearsArray: this.yearsArray,
+        };
+    }
+    selectFirstDay(_config) {
+        const min = _config?.minDate;
+        const max = _config?.maxDate;
+        const defaultDate = _config?.defaultDate || new Date();
+        const isTooEarly = min && defaultDate.getTime() < min.getTime();
+        const isTooLate = max && defaultDate.getTime() > max.getTime();
+        if (isTooEarly || isTooLate) {
+            return min || max || defaultDate;
+        }
+        return defaultDate;
+    }
+    handleRangeClick(value) {
+        const date = validateDateInput(value);
+        if (date.isValid && date.date && this.engine instanceof RangeDecorator) {
+            const { rangeStart, rangeEnd } = this.engine.handleRangeClick(date.date);
+            this.selectedDate = rangeEnd || rangeStart;
+            this.viewDate = date.date;
+            this.notify();
+        }
+        return date;
+    }
+    clearRange(inputType) {
+        if (this.engine instanceof RangeDecorator) {
+            this.engine.clearRange(inputType);
+            const start = this.engine.getRangeStart();
+            const end = this.engine.getRangeEnd();
+            this.selectedDate = end || start;
+            this.notify();
+        }
+    }
+    getRange() {
+        if (this.engine instanceof RangeDecorator) {
+            return {
+                start: this.engine.getRangeStart(),
+                end: this.engine.getRangeEnd(),
+            };
+        }
+        return { start: null, end: null };
+    }
+    setRangeStart(date) {
+        if (this.engine instanceof RangeDecorator) {
+            this.engine.setRangeStart(date);
+            this.selectedDate = date;
+            if (date)
+                this.viewDate = date;
+            this.notify();
+        }
+    }
+    setRangeEnd(date) {
+        if (this.engine instanceof RangeDecorator) {
+            this.engine.setRangeEnd(date);
+            this.selectedDate = date;
+            if (date)
+                this.viewDate = date;
+            this.notify();
+        }
+    }
+    getRangeStart() {
+        if (this.engine instanceof RangeDecorator) {
+            return this.engine.getRangeStart();
+        }
+        return null;
+    }
+    getRangeEnd() {
+        if (this.engine instanceof RangeDecorator) {
+            return this.engine.getRangeEnd();
+        }
+        return null;
+    }
+    addTodo(date, text) {
+        if (this.engine instanceof TodoDecorator) {
+            this.engine.addTodo(date, text);
+            this.notify();
+        }
+    }
+    getTodosByDate(date) {
+        if (this.engine instanceof TodoDecorator) {
+            return this.engine.getTodosByDate(date);
+        }
+        return [];
+    }
+    deleteTodo(date, todo) {
+        if (this.engine instanceof TodoDecorator) {
+            this.engine.deleteTodo(date, todo);
+            this.notify();
+        }
+    }
+}
+
+const useCalendarService = (config, withTodo) => {
+    const service = react.useMemo(() => new DatepickerService({ ...config, withTodo: withTodo }), [config, withTodo]);
+    const [viewModel, setViewModel] = react.useState(service.getViewModel());
+    react.useEffect(() => {
+        const unsubscribe = service.subscribe(() => {
+            setViewModel(service.getViewModel());
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [service]);
+    return {
+        service,
+        viewModel,
+    };
+};
+
+var css_248z$4 = ".ErrorBoundary-module_errorContainer__y4h-A{align-items:center;background-color:rgba(47,128,237,.6);border:1px solid #fff;border-radius:8px;color:#fff;display:flex;height:32px;justify-content:center;padding:0 10px;position:relative;width:100%}.ErrorBoundary-module_errorContainer__y4h-A .ErrorBoundary-module_reload__Afvg-{background-color:transparent;border:0;color:#fff;cursor:pointer;font-size:24px}";
+var styles$4 = {"errorContainer":"ErrorBoundary-module_errorContainer__y4h-A","reload":"ErrorBoundary-module_reload__Afvg-"};
+styleInject(css_248z$4);
+
+class ErrorBoundary extends react.Component {
+    state = {
+        hasError: false,
+    };
+    static getDerivedStateFromError(_) {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Uncaught error:', error, errorInfo);
+    }
+    handleReload = () => {
+        const updateState = { hasError: false };
+        this.setState(updateState);
+        window.location.reload();
+    };
+    render() {
+        if (this.state.hasError) {
+            return (jsxRuntime.jsxs("article", { className: styles$4.errorContainer, children: [jsxRuntime.jsx("p", { children: "Something went wrong." }), jsxRuntime.jsx("button", { onClick: this.handleReload, className: styles$4.reload, children: "\u21BB" })] }));
+        }
+        return this.props.children;
+    }
+}
+
+const Calendar = (config) => {
+    const { viewModel } = useCalendarService(config);
+    const fromMonday = config?.fromMonday || false;
+    const themed = getTheme(config?.darkThemed);
+    return (jsxRuntime.jsx(ErrorBoundary, { children: jsxRuntime.jsx("div", { "data-theme": themed, children: jsxRuntime.jsx(BaseCalendar, { ...viewModel, fromMonday: fromMonday }) }) }));
+};
+
+const maskDate = (value) => {
+    const digits = value.replace(/\D/g, '');
+    if (digits.length <= START_MONTH_INDEX) {
+        return `${digits}`;
+    }
+    if (digits.length <= START_YEAR_INDEX) {
+        return `${digits.substring(START_DATE_INDEX_, START_MONTH_INDEX)}.${digits.substring(START_MONTH_INDEX)}`;
+    }
+    return `${digits.substring(START_DATE_INDEX_, START_MONTH_INDEX)}.${digits.substring(START_MONTH_INDEX, START_YEAR_INDEX)}.${digits.substring(START_YEAR_INDEX)}`;
+};
+
+const CalendarIcon = () => {
+    return (jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("g", { clipPath: "url(#clip0_1_539)", children: jsxRuntime.jsx("path", { d: "M8.2 9.59999C7.97333 9.59999 7.78347 9.52319 7.6304 9.36959C7.4768 9.21653 7.4 9.02666 7.4 8.79999C7.4 8.57333 7.4768 8.38319 7.6304 8.22959C7.78347 8.07653 7.97333 7.99999 8.2 7.99999C8.42667 7.99999 8.6168 8.07653 8.7704 8.22959C8.92347 8.38319 9 8.57333 9 8.79999C9 9.02666 8.92347 9.21653 8.7704 9.36959C8.6168 9.52319 8.42667 9.59999 8.2 9.59999ZM5 9.59999C4.77333 9.59999 4.5832 9.52319 4.4296 9.36959C4.27653 9.21653 4.2 9.02666 4.2 8.79999C4.2 8.57333 4.27653 8.38319 4.4296 8.22959C4.5832 8.07653 4.77333 7.99999 5 7.99999C5.22667 7.99999 5.4168 8.07653 5.5704 8.22959C5.72347 8.38319 5.8 8.57333 5.8 8.79999C5.8 9.02666 5.72347 9.21653 5.5704 9.36959C5.4168 9.52319 5.22667 9.59999 5 9.59999ZM11.4 9.59999C11.1733 9.59999 10.9835 9.52319 10.8304 9.36959C10.6768 9.21653 10.6 9.02666 10.6 8.79999C10.6 8.57333 10.6768 8.38319 10.8304 8.22959C10.9835 8.07653 11.1733 7.99999 11.4 7.99999C11.6267 7.99999 11.8165 8.07653 11.9696 8.22959C12.1232 8.38319 12.2 8.57333 12.2 8.79999C12.2 9.02666 12.1232 9.21653 11.9696 9.36959C11.8165 9.52319 11.6267 9.59999 11.4 9.59999ZM8.2 12.8C7.97333 12.8 7.78347 12.7232 7.6304 12.5696C7.4768 12.4165 7.4 12.2267 7.4 12C7.4 11.7733 7.4768 11.5835 7.6304 11.4304C7.78347 11.2768 7.97333 11.2 8.2 11.2C8.42667 11.2 8.6168 11.2768 8.7704 11.4304C8.92347 11.5835 9 11.7733 9 12C9 12.2267 8.92347 12.4165 8.7704 12.5696C8.6168 12.7232 8.42667 12.8 8.2 12.8ZM5 12.8C4.77333 12.8 4.5832 12.7232 4.4296 12.5696C4.27653 12.4165 4.2 12.2267 4.2 12C4.2 11.7733 4.27653 11.5835 4.4296 11.4304C4.5832 11.2768 4.77333 11.2 5 11.2C5.22667 11.2 5.4168 11.2768 5.5704 11.4304C5.72347 11.5835 5.8 11.7733 5.8 12C5.8 12.2267 5.72347 12.4165 5.5704 12.5696C5.4168 12.7232 5.22667 12.8 5 12.8ZM11.4 12.8C11.1733 12.8 10.9835 12.7232 10.8304 12.5696C10.6768 12.4165 10.6 12.2267 10.6 12C10.6 11.7733 10.6768 11.5835 10.8304 11.4304C10.9835 11.2768 11.1733 11.2 11.4 11.2C11.6267 11.2 11.8165 11.2768 11.9696 11.4304C12.1232 11.5835 12.2 11.7733 12.2 12C12.2 12.2267 12.1232 12.4165 11.9696 12.5696C11.8165 12.7232 11.6267 12.8 11.4 12.8ZM2.6 16C2.16 16 1.7832 15.8435 1.4696 15.5304C1.15653 15.2168 1 14.84 1 14.4V3.19999C1 2.75999 1.15653 2.38346 1.4696 2.07039C1.7832 1.75679 2.16 1.59999 2.6 1.59999H3.4V-7.62939e-06H5V1.59999H11.4V-7.62939e-06H13V1.59999H13.8C14.24 1.59999 14.6168 1.75679 14.9304 2.07039C15.2435 2.38346 15.4 2.75999 15.4 3.19999V14.4C15.4 14.84 15.2435 15.2168 14.9304 15.5304C14.6168 15.8435 14.24 16 13.8 16H2.6ZM2.6 14.4H13.8V6.39999H2.6V14.4Z", fill: "currentColor" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_1_539", children: jsxRuntime.jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }));
+};
+
+const CloseIcon = () => {
+    return (jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12.9872 3.04239C10.2573 0.319202 5.77739 0.319202 3.04745 3.04239C0.317516 5.76559 0.317516 10.2344 3.04745 12.9576C5.77739 15.6808 10.1873 15.6808 12.9172 12.9576C15.6471 10.2344 15.7171 5.76559 12.9872 3.04239ZM9.97728 10.9327L8.01733 8.97756L6.05738 10.9327L5.0774 9.95511L7.03735 8L5.0774 6.04489L6.05738 5.06733L8.01733 7.02244L9.97728 5.06733L10.9573 6.04489L8.99731 8L10.9573 9.95511L9.97728 10.9327Z", fill: "currentColor" }) }));
+};
+
+var css_248z$3 = ".Input-module_wrapper__input-wrapper__F5nqJ{align-items:center;display:flex;justify-content:center}.Input-module_wrapper__Y1Vag{padding-bottom:10px;position:relative}.Input-module_wrapper__label__RJBKu{color:#333}[data-theme=dark] .Input-module_wrapper__label__RJBKu{color:#f1f1f1}.Input-module_wrapper__label__RJBKu{font-size:14px;font-weight:600;height:20px;padding:0 4px}.Input-module_wrapper__input-wrapper__F5nqJ{background-color:#fff}[data-theme=dark] .Input-module_wrapper__input-wrapper__F5nqJ{background-color:#333}.Input-module_wrapper__input-wrapper__F5nqJ{border:1px solid #f1f1f1;border-radius:8px;margin:4px 0;width:250px}.Input-module_wrapper__input-wrapper__F5nqJ:focus-within{border-color:#aaa}.Input-module_wrapper__field__wgrXi{background-color:#fff}[data-theme=dark] .Input-module_wrapper__field__wgrXi{background-color:#333}.Input-module_wrapper__field__wgrXi{color:#333}[data-theme=dark] .Input-module_wrapper__field__wgrXi{color:#f1f1f1}.Input-module_wrapper__field__wgrXi{border:0;height:42px;margin:0;outline:none;padding:0 8px;width:183px}.Input-module_wrapper__icon__TCCvH{color:#aaa}[data-theme=dark] .Input-module_wrapper__icon__TCCvH{color:#f1f1f1}.Input-module_wrapper__icon__TCCvH{background:transparent;border:0;cursor:pointer;padding:0;transition:opacity .2s}.Input-module_wrapper__icon__TCCvH:hover{color:#2f80ed}.Input-module_wrapper__icon--hidden__3k-Sb{opacity:0;pointer-events:none;visibility:hidden}.Input-module_wrapper__error__CG4kl{bottom:0;color:#d32f2f;font-size:10px;font-weight:600;left:0;margin-left:4px;position:absolute}[data-theme=dark] .Input-module_wrapper__error__CG4kl{color:#d32f2f}";
+var styles$3 = {"wrapper__input-wrapper":"Input-module_wrapper__input-wrapper__F5nqJ","wrapper":"Input-module_wrapper__Y1Vag","wrapper__label":"Input-module_wrapper__label__RJBKu","wrapper__field":"Input-module_wrapper__field__wgrXi","wrapper__icon":"Input-module_wrapper__icon__TCCvH","wrapper__icon--hidden":"Input-module_wrapper__icon--hidden__3k-Sb","wrapper__error":"Input-module_wrapper__error__CG4kl"};
+styleInject(css_248z$3);
+
+const Input = (props) => {
+    const { value, placeholder, error, label, handleIsOpen, onClear, onChange } = props;
+    const inputId = react.useId();
+    const handleChange = (e) => {
+        const maskedValue = maskDate(e.target.value);
+        onChange?.(maskedValue);
+    };
+    const clearButtonStyles = [styles$3['wrapper__icon'], !value && styles$3['wrapper__icon--hidden']]
+        .filter(Boolean)
+        .join(' ');
+    return (jsxRuntime.jsxs("div", { className: styles$3.wrapper, children: [label && (jsxRuntime.jsx("label", { htmlFor: inputId, className: styles$3.wrapper__label, children: label })), jsxRuntime.jsxs("div", { className: styles$3['wrapper__input-wrapper'], children: [jsxRuntime.jsx("button", { type: "button", onClick: handleIsOpen, className: styles$3.wrapper__icon, "aria-label": "Open calendar", children: jsxRuntime.jsx(CalendarIcon, {}) }), jsxRuntime.jsx("input", { id: inputId, type: "text", placeholder: placeholder ?? 'Choose Date', value: value, className: styles$3.wrapper__field, onChange: handleChange, maxLength: MAX_DATE_LENGTH }), jsxRuntime.jsx("button", { type: "button", onClick: onClear, className: clearButtonStyles, "aria-label": "Clear input", children: jsxRuntime.jsx(CloseIcon, {}) })] }), error && jsxRuntime.jsx("p", { className: styles$3.wrapper__error, children: error })] }));
+};
+
+var css_248z$2 = ".CalendarWithInput-module_wrapper__vT2HK{align-items:flex-start;display:flex;flex-direction:column;position:relative}.CalendarWithInput-module_wrapper__calendar__6gnjs{margin-top:12px;position:absolute;top:100%;z-index:1}";
+var styles$2 = {"wrapper":"CalendarWithInput-module_wrapper__vT2HK","wrapper__calendar":"CalendarWithInput-module_wrapper__calendar__6gnjs"};
+styleInject(css_248z$2);
+
+const service = new DatepickerService();
+const CalendarWithInput = (props) => {
+    const [error, setError] = react.useState('');
+    const [inputValue, setInputValue] = react.useState(service.getInputValue());
+    const [viewModel, setViewModel] = react.useState(service.getViewModel());
+    const [isOpenCalendar, setIsOpenCalendar] = react.useState(false);
+    const handleInputChange = (value) => {
+        setInputValue(value);
+        const { error } = service.handleInputChange(value);
+        setError(error);
+    };
+    const handleClear = () => {
+        service.setSelectedDate(null);
+        setIsOpenCalendar(false);
+    };
+    const handleIsOpen = () => {
+        setIsOpenCalendar((pr) => !pr);
+    };
+    react.useEffect(() => {
+        const unsubscribe = service.subscribe(() => {
+            setViewModel(service.getViewModel());
+            setInputValue(service.getInputValue());
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, []);
+    const themed = getTheme(props?.darkThemed);
+    return (jsxRuntime.jsx(ErrorBoundary, { children: jsxRuntime.jsxs("div", { "data-theme": themed, className: styles$2.wrapper, children: [jsxRuntime.jsx(Input, { value: inputValue, onChange: handleInputChange, onClear: handleClear, handleIsOpen: handleIsOpen, error: error, ...props }), isOpenCalendar && (jsxRuntime.jsx("div", { className: styles$2.wrapper__calendar, children: jsxRuntime.jsx(BaseCalendar, { ...viewModel }) }))] }) }));
+};
+
+var css_248z$1 = ".Portal-module_input-wrapper__IpAvQ,.Portal-module_input-wrapper__input__o75-6{align-items:center;display:flex;justify-content:center}.Portal-module_header__Bnty3,.Portal-module_todo-list__item__zX8SK{align-items:center;display:flex;justify-content:space-between}.Portal-module_portal__ArsYf,.Portal-module_todo-list__a-prJ{align-items:center;display:flex;flex-direction:column;justify-content:flex-start}.Portal-module_portal__ArsYf{background-color:#fff;position:absolute}[data-theme=dark] .Portal-module_portal__ArsYf{background-color:#333}.Portal-module_portal__ArsYf{color:#333}[data-theme=dark] .Portal-module_portal__ArsYf{color:#f1f1f1}.Portal-module_portal__ArsYf{border:1px solid #f1f1f1;border-radius:8px;max-height:230px;overflow-y:auto;padding:8px;z-index:10}.Portal-module_portal__ArsYf::-webkit-scrollbar{background-color:#f1f1f1;display:block;height:8px;width:8px}.Portal-module_portal__ArsYf::-webkit-scrollbar-thumb{background-color:rgba(47,128,237,.102);border-radius:8px}.Portal-module_portal__ArsYf::-webkit-scrollbar-thumb:hover{background-color:rgba(47,128,237,.6)}.Portal-module_header__Bnty3{width:100%}.Portal-module_header__title__yBt3Z{color:#333;font-size:14px;font-weight:600;margin:0 0 10px}[data-theme=dark] .Portal-module_header__title__yBt3Z{color:#f1f1f1}.Portal-module_header__close__2AgM6{background:none;border:none;color:#d32f2f;cursor:pointer;font-size:20px;opacity:.6;padding:0 8px;transition:opacity .2s}.Portal-module_header__close__2AgM6:hover{opacity:1}.Portal-module_input-wrapper__input__o75-6{background-color:#fff}[data-theme=dark] .Portal-module_input-wrapper__input__o75-6{background-color:#333}.Portal-module_input-wrapper__input__o75-6{color:#333}[data-theme=dark] .Portal-module_input-wrapper__input__o75-6{color:#f1f1f1}.Portal-module_input-wrapper__input__o75-6{border:1px solid #f1f1f1;border-radius:8px 0 0 8px;height:24px;margin:4px 0;outline:none;width:180px}.Portal-module_input-wrapper__button__PggCE{background-color:#2f80ed;border:1px solid #2f80ed;border-radius:0 8px 8px 0;color:#fff;cursor:pointer;height:28px;padding:0 8px;transition:background-color .2s}.Portal-module_todo-list__a-prJ{margin-top:10px;max-height:300px;max-width:200px}.Portal-module_todo-list__empty__nHBxJ{color:#aaa;font-size:14px;text-align:center}.Portal-module_todo-list__item__zX8SK{background-color:#fff;min-width:180px;width:100%}[data-theme=dark] .Portal-module_todo-list__item__zX8SK{background-color:#333}.Portal-module_todo-list__item__zX8SK{border-radius:8px;cursor:pointer;margin-bottom:8px;padding:8px 10px;transition:all .2s}.Portal-module_todo-list__item__zX8SK:hover{background-color:rgba(47,128,237,.6);color:#fff;transform:translateX(2px)}.Portal-module_todo-list__text__Z-AHf{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;color:#333;display:-webkit-box;flex:1;font-size:14px;height:100%;line-height:1.5;margin-right:10px;overflow:hidden;text-overflow:ellipsis;word-break:break-word}[data-theme=dark] .Portal-module_todo-list__text__Z-AHf{color:#f1f1f1}.Portal-module_todo-list__delete__2fMUG{background:none;border:none;color:#333;cursor:pointer;font-size:16px;opacity:.6;padding:0;transition:opacity .2s}[data-theme=dark] .Portal-module_todo-list__delete__2fMUG{color:#f1f1f1}.Portal-module_todo-list__delete__2fMUG:hover{opacity:1}.Portal-module_todo-list__confirm-no__PBqOA,.Portal-module_todo-list__confirm-yes__zfzbp{border:none;border-radius:4px;cursor:pointer;font-size:11px;margin-left:4px;padding:4px 8px;transition:opacity .2s}.Portal-module_todo-list__confirm-no__PBqOA:hover,.Portal-module_todo-list__confirm-yes__zfzbp:hover{background-color:#fff;transform:scale(1.05)}";
+var styles$1 = {"input-wrapper":"Portal-module_input-wrapper__IpAvQ","input-wrapper__input":"Portal-module_input-wrapper__input__o75-6","header":"Portal-module_header__Bnty3","todo-list__item":"Portal-module_todo-list__item__zX8SK","portal":"Portal-module_portal__ArsYf","todo-list":"Portal-module_todo-list__a-prJ","header__title":"Portal-module_header__title__yBt3Z","header__close":"Portal-module_header__close__2AgM6","input-wrapper__button":"Portal-module_input-wrapper__button__PggCE","todo-list__empty":"Portal-module_todo-list__empty__nHBxJ","todo-list__text":"Portal-module_todo-list__text__Z-AHf","todo-list__delete":"Portal-module_todo-list__delete__2fMUG","todo-list__confirm-yes":"Portal-module_todo-list__confirm-yes__zfzbp","todo-list__confirm-no":"Portal-module_todo-list__confirm-no__PBqOA"};
+styleInject(css_248z$1);
+
+const containerCreate = (themed) => {
+    if (typeof document === 'undefined')
+        return null;
+    const div = document.createElement('div');
+    div.id = `portal-root-${Math.random()}`;
+    div.setAttribute('data-theme', themed);
+    div.ariaLabel = 'todo-portal';
+    return div;
+};
+const Portal = (props) => {
+    const [inputValue, setInputValue] = react.useState('');
+    const [todoToDelete, setTodoToDelete] = react.useState(null);
+    const { anchorEl, portalRef, isOpenPortal, onAddTodo, onClose, selectedDate, getTodos, onDeleteTodo, themed, } = props;
+    const container = react.useMemo(() => containerCreate(themed), [themed]);
+    const todos = selectedDate ? getTodos(selectedDate) : [];
+    react.useEffect(() => {
+        if (!container)
+            return;
+        document.body.appendChild(container);
+        return () => {
+            document.body.removeChild(container);
+        };
+    }, [container]);
+    const handleClickInside = (event) => {
+        event.stopPropagation();
+    };
+    const getPosition = () => {
+        if (!anchorEl)
+            return { top: '', left: '' };
+        const { bottom, left } = anchorEl.getBoundingClientRect();
+        const buttonWidth = anchorEl.offsetWidth || 0;
+        const topPosition = `${bottom + window.scrollY}px`;
+        let leftPosition = left + window.scrollX + buttonWidth;
+        return {
+            top: topPosition,
+            left: `${leftPosition}px`,
+        };
+    };
+    const handleAdd = () => {
+        if (!inputValue.trim() || !selectedDate)
+            return;
+        onAddTodo(selectedDate, inputValue);
+        setInputValue('');
+    };
+    const askDeleteConfirmation = (todo) => () => {
+        setTodoToDelete(todo);
+    };
+    const cancelDelete = () => {
+        setTodoToDelete(null);
+    };
+    const confirmDelete = () => {
+        if (selectedDate && todoToDelete) {
+            onDeleteTodo(selectedDate, todoToDelete);
+            setTodoToDelete(null);
+        }
+    };
+    const handleInputChange = (e) => {
+        setInputValue(e.target.value);
+    };
+    const portalPosition = getPosition();
+    if (!isOpenPortal || !container)
+        return null;
+    return reactDom.createPortal(jsxRuntime.jsxs("article", { ref: portalRef, onClick: handleClickInside, className: styles$1.portal, style: {
+            position: 'absolute',
+            top: portalPosition.top,
+            left: portalPosition.left,
+        }, children: [jsxRuntime.jsxs("div", { className: styles$1['header'], children: [jsxRuntime.jsx("p", { className: styles$1['header__title'], children: "TO DO" }), jsxRuntime.jsx("button", { className: styles$1['header__close'], onClick: onClose, "aria-label": "Close portal", children: "\u00D7" })] }), jsxRuntime.jsxs("div", { className: styles$1['input-wrapper'], children: [jsxRuntime.jsx("input", { className: styles$1['input-wrapper__input'], type: "text", value: inputValue, onChange: handleInputChange }), jsxRuntime.jsx("button", { className: styles$1['input-wrapper__button'], type: "button", onClick: handleAdd, children: "Add" })] }), jsxRuntime.jsx("div", { className: styles$1['todo-list'], children: todos?.length === 0 ? (jsxRuntime.jsx("div", { className: styles$1['todo-list__empty'], children: "No tasks yet. Add one!" })) : (todos?.map((todo) => (jsxRuntime.jsx("div", { className: styles$1['todo-list__item'], children: todoToDelete === todo ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: styles$1['todo-list__text'], children: "Are you sure?" }), jsxRuntime.jsx("button", { onClick: confirmDelete, className: styles$1['todo-list__confirm-yes'], children: "Yes" }), jsxRuntime.jsx("button", { onClick: cancelDelete, className: styles$1['todo-list__confirm-no'], children: "No" })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [' ', jsxRuntime.jsx("span", { className: styles$1['todo-list__text'], children: todo }), jsxRuntime.jsx("button", { className: styles$1['todo-list__delete'], onClick: askDeleteConfirmation(todo), "aria-label": "Delete task", children: "\u00D7" })] })) }, `todo-item-${todo}`)))) })] }), container);
+};
+
+const useCalendarPortal = () => {
+    const [isOpenPortal, setIsOpenPortal] = react.useState(false);
+    const [selectedDate, setSelectedDate] = react.useState(null);
+    const portalRef = react.useRef(null);
+    const [anchorEl, setAnchorEl] = react.useState(null);
+    const openPortal = react.useCallback((date, element) => {
+        setSelectedDate(date);
+        setAnchorEl(element);
+        setIsOpenPortal(true);
+    }, []);
+    const closePortal = react.useCallback(() => {
+        setIsOpenPortal(false);
+    }, []);
+    react.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (!isOpenPortal)
+                return;
+            const target = event.target;
+            if (!portalRef.current?.contains(target) && !anchorEl?.contains(target)) {
+                closePortal();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpenPortal, anchorEl, closePortal]);
+    return { isOpenPortal, selectedDate, anchorEl, portalRef, openPortal, closePortal };
+};
+
+const CalendarWithTodo = (config) => {
+    const { service, viewModel } = useCalendarService(config, true);
+    const portal = useCalendarPortal();
+    const onDayClickDouble = (date, event) => {
+        if (!event)
+            return;
+        service.setSelectedDate(date);
+        portal.openPortal(date, event.currentTarget);
+    };
+    const onDayClick = (date, event) => {
+        if (!event)
+            return;
+        service.setSelectedDate(date);
+    };
+    const handleAddTodo = (date, text) => service.addTodo(date, text);
+    const handleDeleteTodo = (date, todo) => service.deleteTodo(date, todo);
+    const handleGetTodo = (date) => service.getTodosByDate(date);
+    const themed = getTheme(config?.darkThemed);
+    return (jsxRuntime.jsx(ErrorBoundary, { children: jsxRuntime.jsxs("article", { "data-theme": themed, children: [jsxRuntime.jsx(BaseCalendar, { ...viewModel, onDayClick: onDayClick, onDayClickDouble: onDayClickDouble }), jsxRuntime.jsx(Portal, { id: `portal-${portal.selectedDate?.getTime()}`, isOpenPortal: portal.isOpenPortal, selectedDate: portal.selectedDate, anchorEl: portal.anchorEl, portalRef: portal.portalRef, onClose: portal.closePortal, onAddTodo: handleAddTodo, onDeleteTodo: handleDeleteTodo, getTodos: handleGetTodo, themed: themed })] }) }));
+};
+
+const useDateRangePicker = (config) => {
+    const [_activeInput, setActiveInput] = react.useState(INPUT_TYPE.START);
+    const [localStartDate, setLocalStartDate] = react.useState('');
+    const [localEndDate, setLocalEndDate] = react.useState('');
+    const [error, setError] = react.useState('');
+    const [isOpenCalendar, setIsOpenCalendar] = react.useState(false);
+    const service = react.useMemo(() => new DatepickerService(config), [config]);
+    const [viewModel, setViewModel] = react.useState(service.getViewModel());
+    react.useEffect(() => {
+        const unsubscribe = service.subscribe(() => {
+            setViewModel(service.getViewModel());
+            const range = service.getRange();
+            if (range.start) {
+                setLocalStartDate(maskDate(range.start.toLocaleDateString()));
+            }
+            else {
+                setLocalStartDate('');
+            }
+            if (range.end) {
+                setLocalEndDate(maskDate(range.end.toLocaleDateString()));
+            }
+            else {
+                setLocalEndDate('');
+            }
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [service]);
+    const range = service.getRange();
+    const setStartDateDirect = (date) => {
+        service.setRangeStart?.(date);
+        const currentEnd = service.getRangeEnd?.();
+        if (currentEnd && date > currentEnd) {
+            service.setRangeEnd?.(null);
+            setLocalEndDate('');
+        }
+        service.notify?.();
+    };
+    const setEndDateDirect = (date) => {
+        const currentStart = service.getRangeStart?.();
+        if (currentStart && date < currentStart) {
+            setError('End date cannot be earlier than start date');
+            return false;
+        }
+        service.setRangeEnd?.(date);
+        service.notify?.();
+        return true;
+    };
+    const handleManualInput = (value, inputType) => {
+        const maskedValue = maskDate(value);
+        if (inputType === INPUT_TYPE.START) {
+            setLocalStartDate(maskedValue);
+        }
+        else {
+            setLocalEndDate(maskedValue);
+        }
+        if (maskedValue.length === START_DATE_INDEX_) {
+            setError('');
+            if (inputType === INPUT_TYPE.START) {
+                service.setRangeStart?.(null);
+            }
+            else {
+                service.setRangeEnd?.(null);
+            }
+            service.notify?.();
+            return;
+        }
+        const validationResult = validateDateInput(maskedValue);
+        if (maskedValue.length < MAX_INPUT_LENGTH) {
+            setError(validationResult.error);
+        }
+        else {
+            if (validationResult.isValid && validationResult.date) {
+                if (inputType === INPUT_TYPE.START) {
+                    setStartDateDirect(validationResult.date);
+                    setError('');
+                    if (!range.end) {
+                        setActiveInput(INPUT_TYPE.END);
+                    }
+                }
+                else {
+                    const success = setEndDateDirect(validationResult.date);
+                    if (success) {
+                        setError('');
+                    }
+                }
+            }
+            else {
+                setError(validationResult.error || 'Invalid date');
+            }
+        }
+    };
+    const handleInputFocus = (input) => {
+        setActiveInput(input);
+        setIsOpenCalendar(true);
+    };
+    const handleClear = (inputType) => {
+        if (inputType === INPUT_TYPE.START) {
+            service.setRangeStart?.(null);
+            setLocalStartDate('');
+        }
+        else if (inputType === INPUT_TYPE.END) {
+            service.setRangeEnd?.(null);
+            setLocalEndDate('');
+        }
+        else if (!inputType) {
+            service.clearRange?.();
+            setLocalStartDate('');
+            setLocalEndDate('');
+            setIsOpenCalendar(false);
+        }
+        setError('');
+        service.notify?.();
+    };
+    const toggleCalendar = () => {
+        setIsOpenCalendar((prev) => !prev);
+    };
+    const createInputConfig = (type, localValue, placeholder) => ({
+        value: localValue,
+        onChange: (val) => handleManualInput(val, type),
+        onFocus: () => handleInputFocus(type),
+        placeholder,
+        onClear: () => handleClear(type),
+    });
+    return {
+        viewModel,
+        isOpenCalendar,
+        start: createInputConfig(INPUT_TYPE.START, localStartDate, 'Start Date'),
+        end: createInputConfig(INPUT_TYPE.END, localEndDate, 'End Date'),
+        error,
+        onClear: handleClear,
+        toggleCalendar,
+    };
+};
+
+var css_248z = ".RangeCalender-module_container__VOLUe,.RangeCalender-module_container__inputs__36FES{align-items:flex-start;display:flex;flex-direction:column}.RangeCalender-module_container__VOLUe{height:100%;width:auto}.RangeCalender-module_container__clear__vlhtG{background-color:#fff;color:#333}[data-theme=dark] .RangeCalender-module_container__clear__vlhtG{background-color:#333;color:#f1f1f1}.RangeCalender-module_container__clear__vlhtG{border:1px solid #f1f1f1;border-radius:8px;font-size:12px;font-weight:600;min-height:36px;width:250px}";
+var styles = {"container":"RangeCalender-module_container__VOLUe","container__inputs":"RangeCalender-module_container__inputs__36FES","container__clear":"RangeCalender-module_container__clear__vlhtG"};
+styleInject(css_248z);
+
+const RangeCalender = (_config) => {
+    const { start, end, viewModel, error, onClear, isOpenCalendar, toggleCalendar } = useDateRangePicker(_config);
+    const handleClearAll = () => {
+        onClear();
+    };
+    const handleDayClick = (date, _event) => {
+        viewModel.onDayRangeClick(date);
+    };
+    const themed = getTheme(_config?.darkThemed);
+    return (jsxRuntime.jsx(ErrorBoundary, { children: jsxRuntime.jsx("article", { "data-theme": themed, children: jsxRuntime.jsxs("div", { className: styles.container, children: [jsxRuntime.jsxs("div", { className: styles['container__inputs'], children: [jsxRuntime.jsx(Input, { handleIsOpen: toggleCalendar, ...start, error: error }), jsxRuntime.jsx(Input, { handleIsOpen: toggleCalendar, ...end, error: error })] }), isOpenCalendar && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BaseCalendar, { ...viewModel, onDayClick: handleDayClick }), jsxRuntime.jsx("button", { className: styles['container__clear'], type: "button", onClick: handleClearAll, children: "Clear All" })] }))] }) }) }));
+};
+
+exports.Calendar = Calendar;
+exports.CalendarWithInput = CalendarWithInput;
+exports.CalendarWithTodo = CalendarWithTodo;
+exports.RangeCalender = RangeCalender;
+//# sourceMappingURL=index.cjs.js.map