@cwellt_software/cwellt-reactjs-lib 1.1.6 → 1.1.7

package/dist/src/components/custom/scheduler-temporal/components/EventRender.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CblDragAndDrop } from "../state/CblDragAndDrop";
+const BIRTHDATE = 15;
+const NOT_WORKING = 16;
+const REST_TIME = 10;
+const MAX_FLIGHT_DUTY_PERIOD = 11;
+const DUTY_REGULATION = 20;
+const unHandleableEvents = [REST_TIME, MAX_FLIGHT_DUTY_PERIOD, NOT_WORKING, DUTY_REGULATION];
+const getEventStyle = (event, reslTime) => {
+    const baseStyle = {
+        left: event.leftPx,
+        width: event.width,
+        top: event.top,
+        overflow: "hidden",
+        zIndex: event.isFullHeight ? 4 : 5,
+    };
+    if (event.data.eventType === BIRTHDATE) {
+        return {
+            ...baseStyle,
+            height: event.isFullHeight ? "100%" : "auto",
+            marginTop: event.isFullHeight ? -1 * event.top : 0,
+            pointerEvents: "none",
+            borderBottom: "solid 1px rgba(0, 0, 0, 0.4)",
+            backgroundColor: event.data.category.color || "orange",
+            display: "flex",
+            opacity: 0.3,
+            alignItems: "flex-end",
+        };
+    }
+    if ([REST_TIME, MAX_FLIGHT_DUTY_PERIOD, DUTY_REGULATION].includes(event.data.eventType)) {
+        return {
+            ...baseStyle,
+            zIndex: event.isFullHeight ? 4 : 6,
+            marginTop: event.isFullHeight ? -1 * event.top : 0,
+            borderRadius: "0px",
+            backgroundColor: event.data.category.color || "grey",
+            opacity: 0.3,
+            borderBottom: event.data.eventType === DUTY_REGULATION ? "solid 1px rgba(0, 0, 0, 0.4)" : "",
+        };
+    }
+    return {
+        ...baseStyle,
+        height: event.isFullHeight ? "100%" : "auto",
+        marginTop: event.isFullHeight ? -1 * event.top : 0,
+        borderRadius: reslTime <= 0.99 ? "3px" : "5px",
+        minWidth: reslTime <= 1.5 ? "5px" : "",
+        maxWidth: reslTime <= 1.5 ? "25px" : "",
+    };
+};
+export const EventRender = ({ event, schedulerProps }) => {
+    const dateStart = new Date(event.data.start);
+    const dateEnd = new Date(event.data.end);
+    const reslTime = (dateEnd.getTime() - dateStart.getTime()) / 3600000;
+    const eventStyle = getEventStyle(event, reslTime);
+    const onClickEvent = (e) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            e.stopPropagation();
+            const props = schedulerProps;
+            props.scheduler_handleCblEventClick.call(props.parent, event, schedulerProps.id);
+        }
+    };
+    const onRightClickEvent = (e) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            e.stopPropagation();
+            const props = schedulerProps;
+            if (props.scheduler_handleCblEventClickRight) {
+                props.scheduler_handleCblEventClickRight.call(props.parent, event, schedulerProps.id);
+            }
+        }
+    };
+    const safeHandleDragStart = (e, isLeft, isRight) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            handleDragStart(e, isLeft, isRight);
+        }
+    };
+    const handleDragStart = (e, isResizeFromStart, isResizeFromEnd) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            [].forEach.call(document.querySelectorAll(".ant-tooltip"), function (el) {
+                el.style.visibility = "hidden";
+            });
+            // We don't know in which case is necessary
+            if (e.target !== e.currentTarget) {
+                // e.preventDefault();
+                return;
+            }
+            const isResize = isResizeFromStart || isResizeFromEnd;
+            const isAllowed = !event.isReadOnly && (isResize ? event.isResizable : event.isDraggable);
+            if (!isAllowed) {
+                e.preventDefault();
+                return;
+            }
+            const cblDragNDrop = new CblDragAndDrop(schedulerProps.id, null, [event], null, isResizeFromStart, isResizeFromEnd);
+            if (!isResize) {
+                e.dataTransfer.dropEffect = e.ctrlKey ? "copy" : "link";
+            }
+            e.dataTransfer.setData("data", JSON.stringify(cblDragNDrop));
+        }
+    };
+    const handleDoubleClick = (e) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            e.preventDefault();
+            e.stopPropagation();
+            const props = schedulerProps;
+            props.scheduler_handleCblEventDoubleClick.call(props.parent, event, schedulerProps.id);
+        }
+    };
+    const onClickContextMenu = (e) => {
+        if (!unHandleableEvents.includes(event.data.eventType)) {
+            const props = schedulerProps;
+            if (props.scheduler_handleOnClickEventContextMenu) {
+                props.scheduler_handleOnClickEventContextMenu(e, event);
+            }
+        }
+    };
+    const renderBirthdayEvent = () => (_jsxs("div", { className: `fc-timeline-event cwellt_timeline_event cwellt_event_bday ${event.selected ? "cblEventSelected" : ""}`, style: eventStyle, children: [_jsx("span", { className: "cwi-icons cwi-birthday", style: { visibility: "visible" } }), event.data.subject && _jsx("span", { style: { lineHeight: "1em" }, children: event.data.subject })] }, event.id));
+    const renderRegularEvent = () => (_jsxs("div", { draggable: ![10, 11, 16, 20, 21].includes(event.data.eventType), className: "fc-timeline-event cwellt_timeline_event cwellt_timeline_event_opstool " +
+            (event.selected === true ? "cblEventSelected " : "") +
+            (event.data.eventType === REST_TIME ||
+                event.data.eventType === MAX_FLIGHT_DUTY_PERIOD ||
+                event.data.eventType === DUTY_REGULATION
+                ? " cwellt_event_bhnd_appt "
+                : " "), style: eventStyle, onClick: onClickEvent, onContextMenu: onRightClickEvent, onDragStart: (e) => safeHandleDragStart(e, false, false), onDoubleClick: handleDoubleClick, children: [schedulerProps.scheduler_handleCblEventResize &&
+                !event.isReadOnly &&
+                !unHandleableEvents.includes(event.data.eventType) && (_jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, true, false), style: {
+                    position: "absolute",
+                    cursor: "e-resize",
+                    zIndex: 10,
+                    left: "0",
+                    border: "solid 1px rgba(46,49,49,0.5)",
+                }, children: "\u200B" })), _jsx(schedulerProps.cblEventComp, { cblEvent: event, handleOnClickEventContextMenu: onClickContextMenu }, event.id), schedulerProps.scheduler_handleCblEventResize &&
+                !event.isReadOnly &&
+                !unHandleableEvents.includes(event.data.eventType) && (_jsx("span", { draggable: true, onDragStart: (e) => handleDragStart(e, false, true), style: {
+                    position: "absolute",
+                    right: "0",
+                    cursor: "e-resize",
+                    zIndex: 10,
+                    border: "solid 1px rgba(46,49,49,0.5)",
+                    marginTop: "-25px",
+                }, children: "\u200B" }))] }, event.id));
+    const render = event.data.eventType === BIRTHDATE ? renderBirthdayEvent() : renderRegularEvent();
+    return render;
+};

package/dist/src/components/custom/scheduler-temporal/components/ResourceListRender.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dropdown, Menu } from "antd";
+import { Fragment } from "react";
+import { doubleClickOnResource } from "../logic/state_handle/doubleClickOnResource";
+import { ResourceRender } from "./ResourceRender";
+export const ResourceListRender = ({ resources, schedulerProps, state, contentArea, onClickContextMenu, crewAssignmentSchedulerContextMenu, }) => {
+    return (_jsx(Fragment, { children: resources.map((r, _i) => (_jsx(Dropdown, { placement: "topLeft", dropdownRender: () => {
+                return (_jsx(Menu, { style: { pointerEvents: "auto" }, onClick: (e) => {
+                        onClickContextMenu(e, r);
+                    }, children: crewAssignmentSchedulerContextMenu?.map((m) => (_jsxs(Menu.Item, { children: [_jsx("span", { className: m.icon, style: { color: m.color } }), _jsx("span", { className: "cwellt_contextMenu", children: m.text })] }, m.key))) }));
+            }, trigger: ["contextMenu"], children: _jsx("span", { onDoubleClick: () => doubleClickOnResource(schedulerProps, r), id: schedulerProps.id + "_" + r.id, children: _jsx(ResourceRender, { res: r, schedulerProps: schedulerProps, contentArea: contentArea, state: state, isInViewport: r.isInViewport }, r.id) }) }, r.id))) }));
+};

package/dist/src/components/custom/scheduler-temporal/components/ResourceRender.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { EventRender } from "./EventRender";
+import { OnDrop } from "../logic/onDrop/OnDrop";
+import { onDragOver } from "../logic/state_handle/onDragOver";
+const arePropsEqual = (prevProps, nextProps) => {
+    return prevProps.res.events === nextProps.res.events && prevProps.isInViewport === nextProps.isInViewport;
+};
+export const ResourceRender = memo(({ res, schedulerProps, contentArea, state }) => {
+    return (_jsx("div", { style: {
+            backgroundColor: "#F9F8F8",
+            height: res.maxTop,
+            width: "100%",
+            position: "relative",
+            borderBottom: "1px solid rgb(255,255,255)",
+        }, onDragOver: (e) => onDragOver(e), onDrop: (e) => {
+            OnDrop({
+                e,
+                resource: res,
+                id: schedulerProps.id,
+                contentArea,
+                state,
+                schedulerProps,
+            });
+        }, className: "cwellt_divRow_schContent", children: res.events.map((evnt) => (_jsx(EventRender, { event: evnt, schedulerProps: schedulerProps }, evnt.id))) }, res.id));
+}, arePropsEqual);

package/dist/src/components/custom/scheduler-temporal/components/day_headers/DayHeader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DayHeader = ({ index, text, width, headerType }) => {
+    const isFirstDay = index == 0;
+    return (_jsx("td", { style: {
+            display: "inline-block",
+            fontSize: "10px",
+            width: width,
+            maxWidth: width,
+        }, id: headerType + index, children: _jsx("span", { className: isFirstDay ? "cwelltFirstDate_desc" : "", children: text }) }));
+};
+export const _preview = () => {
+    return (_jsx("table", { children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx(DayHeader, { index: 0, text: new Date().toLocaleDateString(), width: 50, headerType: "test" }), _jsx(DayHeader, { index: 1, text: new Date().toLocaleDateString(), width: 50, headerType: "test" })] }) }) }));
+};

package/dist/src/components/custom/scheduler-temporal/components/day_headers/MonthHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MonthHeader = ({ index, text, width, headerType }) => {
+    return (_jsx("td", { style: {
+            display: "inline-block",
+            fontSize: "10px",
+            width: width,
+            maxWidth: width,
+        }, id: headerType + index, children: _jsx("span", { children: text }) }));
+};
+export const _preview = () => {
+    return (_jsx("table", { children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx(MonthHeader, { index: 0, text: new Date().getMonth() + "." + new Date().getFullYear(), width: 50, headerType: "test" }, 1), _jsx(MonthHeader, { index: 1, text: new Date().getMonth() + 1 + "." + new Date().getFullYear(), width: 50, headerType: "test" }, 2)] }) }) }));
+};

package/dist/src/components/custom/scheduler-temporal/components/day_headers/MyDaysHeader.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import moment from "moment";
+import { getMonthHeaderData } from "../../logic/dates/getMonthHeaderData";
+import { getWeekHeaderDataFromWeekRange } from "../../logic/dates/getWeekHeaderDataFromWeekRange";
+import { listOfDatesToWeekRangeList } from "../../logic/dates/listOfDatesToWeeks";
+import { DayHeader } from "./DayHeader";
+import { MonthHeader } from "./MonthHeader";
+import { WeekHeader } from "./WeekHeader";
+export const DaysHeader = ({ days, divisionType, maxWidth, headerType }) => {
+    let headerToDraw = [];
+    const filteredDays = days.filter((date) => {
+        return date.getHours() === 0;
+    });
+    const dateFormatter = (date) => {
+        return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
+    };
+    switch (divisionType) {
+        case "d":
+            {
+                headerToDraw = filteredDays.map((date, index) => {
+                    return (_jsx(DayHeader, { text: dateFormatter(date), index: index, width: maxWidth / filteredDays.length, headerType: headerType }, index));
+                });
+            }
+            break;
+        case "w":
+            {
+                const weekRanges = listOfDatesToWeekRangeList(filteredDays);
+                headerToDraw = getWeekHeaderDataFromWeekRange(weekRanges, maxWidth, dateFormatter).map((week, index) => {
+                    return (_jsx(WeekHeader, { index: index, text: week.formattedString, width: week.width, headerType: headerType }, index));
+                });
+            }
+            break;
+        case "m":
+            {
+                const monthData = getMonthHeaderData(filteredDays, maxWidth);
+                headerToDraw = monthData.map(({ monthFormatted, width }, index) => (_jsx(MonthHeader, { index: index, text: monthFormatted, width: width, headerType: headerType }, index)));
+            }
+            break;
+    }
+    return _jsx("tr", { className: "cwelltSchRowDate", children: headerToDraw });
+};
+export const _DaysPreview = () => {
+    const days = [];
+    for (let i = 0; i <= 7; i++) {
+        days.push(moment("20240722").add(i, "hours").toDate());
+    }
+    return (_jsx("table", { children: _jsx("tbody", { children: _jsx(DaysHeader, { days: days, divisionType: "d", maxWidth: window.screen.width * 0.9, headerType: "aircraft" }) }) }));
+};
+export const _WeeksPreview = () => {
+    const days = [];
+    for (let i = 0; i <= 18; i++) {
+        days.push(moment("20240722").add(i, "hours").toDate());
+    }
+    return (_jsx("table", { children: _jsx("tbody", { children: _jsx(DaysHeader, { days: days, divisionType: "w", maxWidth: window.screen.width * 0.9, headerType: "aircraft" }) }) }));
+};
+export const _MonthsPreview = () => {
+    const days = [];
+    for (let i = 0; i <= 2; i++) {
+        days.push(moment("20240822").add(i, "hours").toDate());
+    }
+    return (_jsx("table", { children: _jsx("tbody", { children: _jsx(DaysHeader, { days: days, divisionType: "m", maxWidth: window.screen.width * 0.9, headerType: "aircraft" }) }) }));
+};

package/dist/src/components/custom/scheduler-temporal/components/day_headers/WeekHeader.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const WeekHeader = ({ index, text, width, headerType }) => {
+    const isFirstDay = index == 0;
+    return (_jsx("td", { style: {
+            display: "inline-block",
+            fontSize: "10px",
+            width: width,
+            maxWidth: width,
+        }, id: headerType + index, children: _jsx("span", { className: isFirstDay ? "cwelltFirstDate_desc" : "", style: { whiteSpace: "nowrap" }, children: text }) }));
+};
+export const _preview = () => {
+    return (_jsx("table", { children: _jsx("tbody", { children: _jsxs("tr", { children: [_jsx(WeekHeader, { index: 0, text: new Date().toLocaleDateString(), width: 50, headerType: "test" }, 1), _jsx(WeekHeader, { index: 1, text: new Date().toLocaleDateString(), width: 50, headerType: "test" }, 2)] }) }) }));
+};

package/dist/src/components/custom/scheduler-temporal/components/resources_title_list/ResourcesTitleList.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ResourcesTitleList = ({ resources, canBePinned, includesPinned, onCrewPinning, onClickResourceContextMenu, ResourceTitleComponent }) => {
+    return (_jsx("td", { className: "resourceArea", style: { width: "100px" }, children: resources.map((r, _i) => (_jsxs("div", { className: "resource CwelltFunctionDescription", style: { height: r.maxTop }, children: [(canBePinned || includesPinned) && (_jsx(PinButton, { canBePinned: canBePinned, resource: r, onCrewPinning: onCrewPinning })), _jsx(ResourceTitleComponent, { resource: r, handleOnClickResourceContextMenu: (e) => {
+                        if (onClickResourceContextMenu) {
+                            onClickResourceContextMenu(e, r);
+                        }
+                    } })] }, r.id.toString()))) }));
+};
+const PinButton = ({ canBePinned, resource, onCrewPinning }) => {
+    const buttonProps = canBePinned
+        ? {
+            id: "cbl_pinL",
+            onClick: () => onCrewPinning(resource, ""),
+            children: _jsx("span", { className: "cbl_pin", style: { visibility: "visible" } })
+        }
+        : {
+            id: "cbl_pinLess45deg",
+            onClick: () => onCrewPinning(resource, "remove"),
+            children: _jsx("span", { className: "cbl_pinLess45deg cbl_pin", style: { color: "black", visibility: "visible" } })
+        };
+    return _jsx("button", { className: "cw-button-icon cw-icon-pin", ...buttonProps });
+};

package/dist/src/components/custom/scheduler-temporal/components/scheduler_content_area/SchedulerContentArea.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import moment from "moment";
+import { ResourceListRender } from "../ResourceListRender";
+import { TimeLine } from "../time_line/TimeLine";
+export const SchedulerContentArea = ({ now, showTimeline, timeLineLeftPx, timeSeparatorLeftPx, resources, scheduler, contextMenuContents, onEmptyClick, setContentArea, onClickContextMenu, }) => {
+    return (_jsxs("td", { className: "contentArea", style: { width: "100%", overflow: "hidden", position: "relative" }, ref: (reference) => {
+            if (reference) {
+                setContentArea(reference);
+            }
+        }, children: [showTimeline && (_jsx(TimeLine, { id: scheduler.props.id + "_timeline", marginLeft: timeLineLeftPx, zIndex: 8, toolTipTitle: moment(now).format("HH:mm") })), timeSeparatorLeftPx.map((pixels) => {
+                return _jsx(TimeLine, { marginLeft: pixels, color: "rgba(255,255,255,0.7)" });
+            }), _jsx("span", { onClick: () => {
+                    if (onEmptyClick) {
+                        onEmptyClick(scheduler.props.id);
+                    }
+                }, children: _jsx(ResourceListRender, { resources: resources, state: scheduler.state, schedulerProps: scheduler.props, contentArea: scheduler.contentArea, onClickContextMenu: onClickContextMenu, crewAssignmentSchedulerContextMenu: contextMenuContents }) })] }));
+};

package/dist/src/components/custom/scheduler-temporal/components/scheduler_header/SchedulerHeader.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SchedulerTimeLine } from "../scheduler_timeline/SchedulerTimeLine";
+export const SchedulerHeader = ({ timelineProps, descriptionColumn }) => {
+    const { maxPx, hoursList, startDate, endDate, pxPerHour, headerName } = timelineProps;
+    return (_jsx("thead", { className: "cwellt_fc_header_scheduler", style: { position: "sticky", zIndex: 9 }, children: _jsxs("tr", { className: "cwellt_fc_header_row", children: [_jsxs("td", { className: "border", style: {
+                        position: "sticky",
+                        top: 0,
+                        backgroundColor: "white",
+                        width: "100px",
+                    }, children: [_jsx("div", { style: {
+                                display: "flex",
+                                height: "30px",
+                                alignItems: "center",
+                                width: "150px",
+                            }, children: _jsx("label", { children: headerName }) }), _jsx("div", { style: {
+                                display: "flex",
+                                height: "30px",
+                                alignItems: "center",
+                                background: "rgba(0, 0, 0, 0.04)",
+                            }, children: _jsx("span", { children: descriptionColumn }) })] }), _jsx("td", { style: {
+                        position: "sticky",
+                        top: 0,
+                        zIndex: 6,
+                        backgroundColor: "white",
+                    }, children: _jsx(SchedulerTimeLine, { maxPx: maxPx, hoursList: hoursList, pxPerHour: pxPerHour, startDate: startDate, endDate: endDate, headerName: headerName }) })] }) }));
+};

package/dist/src/components/custom/scheduler-temporal/components/scheduler_timeline/SchedulerTimeLine.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { calculateDivisionType } from "../../logic/divisions/calculateDivisionType";
+import { DaysHeader } from "../day_headers/MyDaysHeader";
+import { TimeHeaderRow } from "../time_headers/TimeHeaderRow";
+export const SchedulerTimeLine = ({ maxPx, hoursList, startDate, endDate, pxPerHour, headerName, }) => {
+    return (_jsx("table", { className: "content-area cwelltSchTable", style: { width: maxPx }, children: _jsxs("tbody", { style: { width: "100%", borderSpacing: 0 }, className: "content-area cwelltSchTbody", children: [_jsx(DaysHeader, { days: hoursList, divisionType: calculateDivisionType(startDate, endDate), maxWidth: pxPerHour * hoursList.length, headerType: headerName ?? "schedulerDateHeader" }), _jsx(TimeHeaderRow, { timeHeaders: hoursList, startDate: startDate, endDate: endDate, maxWidth: pxPerHour * hoursList.length, header: headerName ?? "schedulerTimeHeader" })] }) }));
+};
+export const _preview = () => {
+    const startDate = new Date("2024-03-20T00:00:00");
+    const endDate = new Date("2024-04-20T00:00:00");
+    const hoursList = generateHourlyDates(startDate, endDate);
+    return (_jsx(SchedulerTimeLine, { headerName: "test", pxPerHour: window.innerWidth / hoursList.length, maxPx: window.innerWidth, hoursList: hoursList, startDate: startDate, endDate: endDate }));
+};
+const generateHourlyDates = (start, end) => {
+    const dates = new Array();
+    const current = new Date(start);
+    while (current <= end) {
+        dates.push(new Date(current));
+        current.setHours(current.getHours(), 0, 0, 0); // Ensure the time is exactly on the hour
+        current.setHours(current.getHours() + 1);
+    }
+    return dates;
+};

package/dist/src/components/custom/scheduler-temporal/components/time_headers/TimeHeader.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFormattedTimeForHeader } from "../../logic/dates/getFormatedTimeForHeader";
+import { calculateDivisions } from "../../logic/divisions/calculateDivisions";
+import { calculateDivisionType } from "../../logic/divisions/calculateDivisionType";
+export const TimeHeader = ({ isWeekend, index, text, width, header }) => {
+    if (text === "") {
+        return;
+    }
+    const commonStyles = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "left",
+        fontSize: "10px",
+        width: width,
+        maxWidth: width,
+        height: "2rem",
+        borderLeft: "1px solid white",
+        background: isWeekend ? "#cbc9c9" : "",
+        color: "#000000d9",
+        fontWeight: 700,
+    };
+    return (_jsx("td", { style: commonStyles, id: `${header}Time${index}`, children: _jsx("span", { style: { paddingLeft: "8px" }, children: text }) }, `t${index}`));
+};
+export const _preview = () => {
+    const startDate = new Date();
+    const endDate = new Date();
+    const calculatedDivision = calculateDivisions(startDate, endDate);
+    const calculatedDivType = calculateDivisionType(startDate, endDate);
+    const data = getFormattedTimeForHeader(calculatedDivType, calculatedDivision, startDate);
+    return _jsx(TimeHeader, { isWeekend: false, index: 1, text: data.text, width: 30, header: "test" });
+};

package/dist/src/components/custom/scheduler-temporal/components/time_headers/TimeHeaderRow.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFormattedTimeForHeader } from "../../logic/dates/getFormatedTimeForHeader";
+import { calculateDivisions } from "../../logic/divisions/calculateDivisions";
+import { calculateDivisionType } from "../../logic/divisions/calculateDivisionType";
+import { TimeHeader } from "./TimeHeader";
+export const TimeHeaderRow = ({ timeHeaders, startDate, endDate, maxWidth, header }) => {
+    const calculatedDivision = calculateDivisions(startDate, endDate);
+    const calculatedDivType = calculateDivisionType(startDate, endDate);
+    const formattedHeaders = timeHeaders.map((th) => {
+        return getFormattedTimeForHeader(calculatedDivType, calculatedDivision, th);
+    });
+    const filteredHeaders = formattedHeaders.filter((element) => element.text !== "");
+    return (_jsx("tr", { className: "cwelltSchRowTime", style: { height: "30px" }, children: filteredHeaders.map(({ text, isWeekend }, index) => {
+            return (_jsx(TimeHeader, { isWeekend: isWeekend, index: index, text: text, width: maxWidth / filteredHeaders.length, header: header }, index));
+        }) }));
+};

package/dist/src/components/custom/scheduler-temporal/components/time_line/TimeLine.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from "antd";
+export const TimeLine = ({ id, toolTipTitle, marginLeft, color = "rgba(255,0,0,.6)", pixels = 2, height = "100%", zIndex = 1, }) => {
+    return (_jsx(Tooltip, { title: toolTipTitle, children: _jsx("div", { id: id, style: {
+                borderLeft: `${pixels}px solid ${color}`,
+                marginLeft: marginLeft,
+                width: "0px",
+                height: height,
+                position: "absolute",
+                zIndex: zIndex,
+            } }) }));
+};

package/dist/src/components/custom/scheduler-temporal/logic/dates/addMinutesToDateFromPx.js

@@ -0,0 +1,5 @@
+export const addMinutesToDateFromPx = (originalDate, leftPx, minutesPerPx) => {
+    const minutes = leftPx / minutesPerPx;
+    const datePlusMinutes = new Date(originalDate.getTime() + minutes * 60000);
+    return datePlusMinutes;
+};

package/dist/src/components/custom/scheduler-temporal/logic/dates/daysBetweenTwoDates.js

@@ -0,0 +1,15 @@
+export const daysBetweenTwoDates = (date1, date2) => {
+    const diff = Math.abs(date1.getTime() - date2.getTime());
+    let diffDays = 0;
+    const startOffset = Math.abs(date1.getTimezoneOffset());
+    const endOffset = Math.abs(date2.getTimezoneOffset());
+    // Summer: +1 -> +2, true
+    // Winter: +2 -> -1, false
+    if (startOffset > endOffset) {
+        diffDays = Math.floor(diff / (1000 * 3600 * 24));
+    }
+    else {
+        diffDays = Math.ceil(diff / (1000 * 3600 * 24));
+    }
+    return diffDays;
+};

package/dist/src/components/custom/scheduler-temporal/logic/dates/daysBetweenTwoDatesWithoutCeil.js

@@ -0,0 +1,5 @@
+export const daysBetweenTwoDatesIncludingBoth = (date1, date2) => {
+    const diff = Math.abs(date1.getTime() - date2.getTime());
+    const diffDays = diff / (1000 * 3600 * 24);
+    return diffDays;
+};

package/dist/src/components/custom/scheduler-temporal/logic/dates/getFormatedTimeForHeader.js

@@ -0,0 +1,43 @@
+import moment from "moment";
+export const getFormattedTimeForHeader = (calculatedDivType, calculatedDivision, timeHeader) => {
+    let showDate = "";
+    switch (calculatedDivType) {
+        case "d":
+            switch (calculatedDivision) {
+                case 8:
+                    showDate =
+                        timeHeader.getHours() === 0 ||
+                            timeHeader.getHours() === 3 ||
+                            timeHeader.getHours() === 6 ||
+                            timeHeader.getHours() === 9 ||
+                            timeHeader.getHours() === 12 ||
+                            timeHeader.getHours() === 15 ||
+                            timeHeader.getHours() === 18 ||
+                            timeHeader.getHours() === 21
+                            ? moment(timeHeader).format("HH:mm")
+                            : "";
+                    break;
+                case 3:
+                    showDate =
+                        timeHeader.getHours() === 0 || timeHeader.getHours() === 8 || timeHeader.getHours() === 16
+                            ? moment(timeHeader).format("HH:mm")
+                            : "";
+                    break;
+                case 2:
+                    showDate =
+                        timeHeader.getHours() === 0 || timeHeader.getHours() === 12 ? moment(timeHeader).format("HH:mm") : "";
+                    break;
+            }
+            break;
+        case "m":
+            showDate = timeHeader.getHours() === 0 ? timeHeader.getDate().toString() : "";
+            break;
+        case "w":
+            showDate = timeHeader.getHours() === 0 ? timeHeader.getDate().toString() : "";
+            break;
+    }
+    return {
+        text: showDate,
+        isWeekend: timeHeader.getDay() === 6 || timeHeader.getDay() === 0,
+    };
+};

package/dist/src/components/custom/scheduler-temporal/logic/dates/getMonthHeaderData.js

@@ -0,0 +1,35 @@
+export const getMonthHeaderData = (dates, maxWidth) => {
+    if (dates.length === 0)
+        return [];
+    const dayWidth = maxWidth / dates.length;
+    const ranges = getMonthRanges(dates);
+    return ranges.map((range) => {
+        return {
+            monthFormatted: range.start.getMonth() + 1 + "." + range.start.getFullYear(),
+            width: dayWidth * range.daysLong,
+        };
+    });
+};
+const getMonthRanges = (dates) => {
+    const firstDay = dates[0];
+    const lastDay = dates[dates.length - 1];
+    let currentDate = new Date(firstDay);
+    const ranges = [];
+    while (currentDate <= lastDay) {
+        const rangeStart = new Date(currentDate);
+        let rangeEnd = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+        if (rangeEnd >= lastDay) {
+            rangeEnd = lastDay;
+        }
+        ranges.push({
+            start: rangeStart,
+            daysLong: getDaysBetweenDates(rangeStart, rangeEnd),
+        });
+        currentDate = new Date(rangeEnd.getFullYear(), rangeEnd.getMonth() + 1, 1);
+    }
+    return ranges;
+};
+const getDaysBetweenDates = (startDate, endDate) => {
+    const timeDifference = endDate.getTime() - startDate.getTime();
+    return Math.floor(timeDifference / (1000 * 60 * 60 * 24)) + 1;
+};

package/dist/src/components/custom/scheduler-temporal/logic/dates/getUtcToday.js

@@ -0,0 +1,6 @@
+export const getUtcToday = () => {
+    const now = new Date();
+    const userTimezoneOffset = now.getTimezoneOffset() * 60000;
+    const nowUtc = new Date(now.getTime() + userTimezoneOffset);
+    return nowUtc;
+};

package/dist/src/components/custom/scheduler-temporal/logic/dates/getWeekHeaderDataFromWeekRange.js

@@ -0,0 +1,20 @@
+export const getWeekHeaderDataFromWeekRange = (weekRange, maxWidth, dateFormatter) => weekRange.map(week => {
+    const numberOfDaysInScheduler = weekRange
+        .flatMap(element => {
+        return element.days;
+    })
+        .reduce((el1, el2) => {
+        return el1 + el2;
+    });
+    return {
+        formattedString: getStringForWeekRange(week, dateFormatter),
+        width: getWidthForWeekRange(maxWidth, week.days, numberOfDaysInScheduler)
+    };
+});
+const getStringForWeekRange = (weekRange, dateFormatter) => weekRange.days == 1
+    ? dateFormatter(weekRange.start)
+    : `${dateFormatter(weekRange.start)} - ${dateFormatter(weekRange.end)}`;
+const getWidthForWeekRange = (maxWidth, weekDays, monthDays) => {
+    const dayWidth = maxWidth / monthDays;
+    return dayWidth * weekDays;
+};

package/dist/src/components/custom/scheduler-temporal/logic/dates/listOfDatesToWeeks.js

@@ -0,0 +1,55 @@
+// stringRange: `${formatter(date)} - ${formatter(end)}`,
+export const listOfDatesToWeekRangeList = (dates) => {
+    if (dates.length === 0) {
+        return [];
+    }
+    const datesToReturn = [];
+    dates.forEach((date, index) => {
+        const dayOfWeek = date.getDay();
+        const isFirstDay = index === 0;
+        const isLastDay = index === dates.length - 1;
+        const isSunday = dayOfWeek === 0;
+        const isMonday = dayOfWeek === 1;
+        if (isFirstDay && !isSunday) {
+            datesToReturn.push(createWeekRange(date, 8 - dayOfWeek));
+            return;
+        }
+        if (isLastDay && !isSunday) {
+            if (!isMonday) {
+                datesToReturn.pop();
+            }
+            const firstOfWeek = getFirstDayOfWeek(date);
+            datesToReturn.push(createWeekRange(firstOfWeek, dayOfWeek));
+            return;
+        }
+        if (isMonday) {
+            datesToReturn.push(createWeekRange(date, 7));
+            return;
+        }
+        // this is because sunday is 0
+        if (isFirstDay && isSunday) {
+            datesToReturn.push(createWeekRange(date, 1));
+            return;
+        }
+    });
+    return datesToReturn;
+};
+const createWeekRange = (start, days) => {
+    const end = new Date(start);
+    end.setDate(end.getDate() + days - 1);
+    return {
+        days,
+        start,
+        end,
+        isShortWeek: days < 7
+    };
+};
+const getFirstDayOfWeek = (date) => {
+    const currentDate = new Date(date);
+    const dayOfWeek = currentDate.getDay();
+    // dayOfWeek 0 == (Sunday)
+    const diffToMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+    // Set the date to the first day of the week
+    currentDate.setDate(currentDate.getDate() - diffToMonday);
+    return currentDate;
+};