oolib 2.68.5 → 2.69.0

package/dist/components/DateTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export function DateTimePicker(props: any): React.JSX.Element;
+import React from "react";

package/dist/components/DateTimePicker/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimePicker = void 0;
+var react_1 = __importStar(require("react"));
+var BlockLabel_1 = require("../BlockLabel");
+var TimePicker_1 = require("../TimePicker");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var DatePicker_1 = __importDefault(require("../DatePicker"));
+var convertTo12Hour_1 = require("../TimePicker/utils/convertTo12Hour");
+var DateTimePicker = function (props) {
+    var parentOnChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, passChangeHandlerOps = props.passChangeHandlerOps, invert = props.invert, disabled = props.disabled;
+    var _a = (0, react_1.useState)({ date: value === null || value === void 0 ? void 0 : value.date, time: (value === null || value === void 0 ? void 0 : value.time) && (0, convertTo12Hour_1.convertTo12Hour)(value === null || value === void 0 ? void 0 : value.time) }), _value = _a[0], _setValue = _a[1];
+    var handleOnChange = function (k, v) {
+        var _a;
+        var newVal = __assign(__assign({}, _value), (_a = {}, _a[k] = v, _a));
+        if (newVal.date && newVal.time) {
+            // date returned by datepicker is ISO (meaning GMT time)
+            // we need to get IST. Date class will convert it to IST.
+            var date = new Date(newVal.date);
+            var timeSplit = newVal.time.split(':');
+            //set the time within the date string using the timeValue numbers
+            date.setHours(timeSplit[0]);
+            date.setMinutes(timeSplit[1]);
+            date.setSeconds(timeSplit[2] || '00');
+            newVal = __assign(__assign({}, newVal), { date: date.toISOString() });
+        }
+        _setValue(newVal);
+        newVal.date &&
+            parentOnChange &&
+            parentOnChange(id, { date: newVal === null || newVal === void 0 ? void 0 : newVal.date, time: newVal === null || newVal === void 0 ? void 0 : newVal.time }, passChangeHandlerOps && props);
+    };
+    (0, react_1.useEffect)(function () {
+        if (value && (value.date !== _value.date || value.time !== _value.time)) {
+            // if there is a change basically
+            _setValue({ date: value === null || value === void 0 ? void 0 : value.date, time: (value === null || value === void 0 ? void 0 : value.time) && (0, convertTo12Hour_1.convertTo12Hour)(value === null || value === void 0 ? void 0 : value.time) });
+        }
+    }, [value]);
+    return (react_1.default.createElement("div", { id: id },
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '2rem' } },
+            react_1.default.createElement(DatePicker_1.default, { value: _value.date, onChange: function (k, v) { return handleOnChange('date', v); }, readOnly: readOnly, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, invert: invert, disabled: disabled }),
+            react_1.default.createElement(TimePicker_1.TimePicker, { value: _value.time, onChange: function (k, v) { return handleOnChange('time', v); }, readOnly: readOnly, invert: invert, disabled: disabled }))));
+};
+exports.DateTimePicker = DateTimePicker;
+// export default React.memo(DateTimePickerV2);

package/dist/components/DateTimeRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export function DateTimeRangePicker(props: any): React.JSX.Element;
+import React from "react";

package/dist/components/DateTimeRangePicker/index.js

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimeRangePicker = void 0;
+var react_1 = __importStar(require("react"));
+var InlineAlert_1 = require("../InlineAlert");
+var DatePicker_1 = __importDefault(require("../DatePicker"));
+var TimeRangePicker_1 = require("../TimeRangePicker");
+var BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var DateTimeRangePicker = function (props) {
+    var onChange = props.onChange, value = props.value, id = props.id, readOnly = props.readOnly, futureDateOnly = props.futureDateOnly, previousDateOnly = props.previousDateOnly, passChangeHandlerOps = props.passChangeHandlerOps, invert = props.invert, isPassedText = props.isPassedText, disabled = props.disabled;
+    var _a = (0, react_1.useState)(value), _value = _a[0], _setValue = _a[1];
+    var checkIfDatePassed = function (date) {
+        if (!date)
+            return false;
+        var givenDate = new Date(date);
+        var today = new Date();
+        return givenDate > today ? false : true;
+    };
+    var _b = (0, react_1.useState)(checkIfDatePassed(value === null || value === void 0 ? void 0 : value.date)), isPassed = _b[0], setIsPassed = _b[1];
+    var handleOnChange = function (k, v) {
+        var _a;
+        var newVal = __assign(__assign({}, _value), (_a = {}, _a[k] = v, _a));
+        if (newVal.date && newVal.timeRange && newVal.timeRange[0]) {
+            // date returned by datepicker is ISO (meaning GMT time) 
+            // we need to get IST. Date class will convert it to IST.
+            var date = new Date(newVal.date);
+            var timeSplit = newVal.timeRange[0].split(':');
+            //set the time within the date string using the timeValue numbers
+            date.setHours(timeSplit[0]);
+            date.setMinutes(timeSplit[1]);
+            date.setSeconds(timeSplit[2] || "00");
+            newVal = (__assign(__assign({}, newVal), { date: date.toISOString() }));
+        }
+        _setValue(newVal);
+        setIsPassed(checkIfDatePassed(newVal.date));
+        if (newVal.date && newVal.timeRange && newVal.timeRange[0] && newVal.timeRange[1]) {
+            onChange && onChange(id, newVal, passChangeHandlerOps && props);
+        }
+    };
+    (0, react_1.useEffect)(function () {
+        if (value && (value.date !== _value.date ||
+            (value.timeRange && _value.timeRange && value.timeRange.some(function (v, i) { return v !== _value.timeRange[i]; })))) { // if there is a change basically
+            _setValue(value);
+        }
+    }, [value]);
+    return (react_1.default.createElement("div", { id: id },
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement("div", { style: { display: 'flex', flexWrap: 'wrap', columnGap: '4rem', rowGap: '2rem' } },
+            react_1.default.createElement(DatePicker_1.default, { value: _value === null || _value === void 0 ? void 0 : _value.date, onChange: function (k, v) { return handleOnChange('date', v); }, readOnly: readOnly, futureDateOnly: futureDateOnly, previousDateOnly: previousDateOnly, invert: invert, disabled: disabled }),
+            react_1.default.createElement(TimeRangePicker_1.TimeRangePicker, { value: _value === null || _value === void 0 ? void 0 : _value.timeRange, onChange: function (k, v) { return handleOnChange('timeRange', v); }, readOnly: readOnly, invert: invert, disabled: disabled })),
+        isPassed && react_1.default.createElement(InlineAlert_1.InlineAlert, { type: 'danger', text: isPassedText || 'This Date Is Passed' })));
+};
+exports.DateTimeRangePicker = DateTimeRangePicker;

package/dist/components/TimePicker/handlers/handleTimeValidation.d.ts

@@ -0,0 +1 @@
+export function handleTimeValidation(newValue: any, setErrorMessage: any, setInputValue: any): void;

package/dist/components/TimePicker/handlers/handleTimeValidation.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleTimeValidation = void 0;
+function handleTimeValidation(newValue, setErrorMessage, setInputValue) {
+    // Check if the input has at least 2 characters
+    if (newValue.length >= 2) {
+        // Parse the first 2 characters as hours
+        var hours = parseInt(newValue.substring(0, 2));
+        // Validate the hours: should be between 1 and 12
+        if (isNaN(hours) || hours < 1 || hours > 12) {
+            setErrorMessage('Invalid hour');
+            return;
+        }
+    }
+    // Check if the input has at least 4 characters
+    if (newValue.length >= 4) {
+        // Validate the format of the input: should have a colon (:) at the right position
+        if ((newValue[2] !== ':' && newValue[1] !== ':') || (newValue[2] === ':' && newValue[1] === ':')) {
+            setErrorMessage('Invalid format');
+            return;
+        }
+    }
+    // Check if the input has at least 5 characters
+    if (newValue.length >= 5) {
+        // Parse the last 2 characters as minutes
+        var minutes = parseInt(newValue.substring(3, 5));
+        // Validate the minutes: should be between 0 and 59
+        if (isNaN(minutes) || minutes < 0 || minutes > 59) {
+            setErrorMessage('Invalid minutes');
+            return;
+        }
+    }
+    // Check if the input has at least 7 characters
+    if (newValue.length >= 7) {
+        // Validate the AM/PM part and ensure there's a space after the time
+        if (newValue[2] === ':' && (newValue[6] !== 'A' && newValue[6] !== 'P' && newValue[7] !== 'M')) {
+            setErrorMessage('Invalid AM/PM, Add space after time');
+            return;
+        }
+        if (newValue[3] === ':' && (newValue[7] !== 'A' && newValue[7] !== 'P' && newValue[8] !== 'M')) {
+            setErrorMessage('Invalid AM/PM, Add space after time');
+            return;
+        }
+        // Convert AM/PM to uppercase and truncate the input to 8 characters
+        newValue = newValue.substring(0, 8).toUpperCase();
+    }
+    // Set the cleaned and validated value, and clear any previous error message
+    setInputValue(newValue);
+    setErrorMessage(null);
+}
+exports.handleTimeValidation = handleTimeValidation;
+// The current behaviour of this component works well with format of 00:00 AM/PM values, not validating correctly when 0:00 AM/PM is entered 
+// This will be important to solve. It should let you input 230 and then take you to 2:30PM. -> 
+// This happens because we are not allowing user to enter hours before ":" >= than 12 (12 hours format), so if user enters 13 it is invalid hour
+// may be regex can be applied to autoformat
+// The keyboard function is not working - but this can be layer 2 - 
+// [need to figure out functionality, right now if Enter is pressed it selects nearest time if to current time If incorrect time is entered, 
+// and if right time is entered blur gets called]

package/dist/components/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export function TimePicker(props: any): React.JSX.Element;
+import React from "react";

package/dist/components/TimePicker/index.js

@@ -0,0 +1,136 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimePicker = void 0;
+var react_1 = __importStar(require("react"));
+var BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var styled_1 = require("./styled");
+var Typo_1 = require("../Typo");
+var convertToMiltaryTime_1 = require("./utils/convertToMiltaryTime");
+var getNearestTimeToCurrentTime_1 = require("./utils/getNearestTimeToCurrentTime");
+var highLightTime_1 = require("./utils/highLightTime");
+var handleTimeValidation_1 = require("./handlers/handleTimeValidation");
+var convertTo12Hour_1 = require("./utils/convertTo12Hour");
+var TimePicker = function (props) {
+    var readOnly = props.readOnly, invert = props.invert, disabled = props.disabled, onParentChange = props.onChange, id = props.id, value = props.value;
+    var _a = (0, react_1.useState)(value ? (0, convertTo12Hour_1.convertTo12Hour)(value) : null), inputValue = _a[0], setInputValue = _a[1];
+    var _b = (0, react_1.useState)(""), errorMessage = _b[0], setErrorMessage = _b[1];
+    var inputRef = (0, react_1.useRef)();
+    var timeStripRef = (0, react_1.useRef)();
+    var timeStripArray = [];
+    // generate Time array for dropdown
+    for (var hour = 0; hour <= 23; hour++) {
+        for (var minute = 0; minute <= 45; minute += 15) {
+            var formattedHour = hour % 12 || 12; // Convert to 12-hour format
+            var formattedMinute = minute === 0 ? "00" : "".concat(minute);
+            var period = hour < 12 ? "AM" : "PM";
+            var timeString = "".concat(formattedHour, ":").concat(formattedMinute, " ").concat(period);
+            timeStripArray.push(timeString);
+        }
+    }
+    (0, react_1.useEffect)(function () {
+        // Function to scroll the element (specific Time) to the top
+        var scrollTimeElementToTop = function () {
+            var list = timeStripRef.current;
+            if (!list)
+                return;
+            // Find all elements with data-value attribute
+            var allListElements = list.querySelectorAll('[data-value]');
+            // Initialize variables to keep track of the closest match
+            var closestMatch = null;
+            var closestMatchValue = Number.MAX_SAFE_INTEGER;
+            // Loop through all elements and find the closest match
+            allListElements.forEach(function (element) {
+                var elementValue = element.getAttribute('data-value');
+                if (elementValue.startsWith(inputValue)) {
+                    var diff = elementValue.length - inputValue.length;
+                    if (diff < closestMatchValue) {
+                        closestMatch = element;
+                        closestMatchValue = diff;
+                    }
+                }
+            });
+            if (!closestMatch) {
+                // When there is no exact match, highlight the closest time to the current time
+                closestMatch = list.querySelector("[data-value=\"".concat((0, getNearestTimeToCurrentTime_1.getNearestTimeToCurrentTime)(timeStripArray), "\"]"));
+            }
+            if (closestMatch) {
+                (0, highLightTime_1.highLightTime)(closestMatch, invert);
+            }
+        };
+        scrollTimeElementToTop();
+    }, [inputValue, timeStripRef]);
+    // useEffect(() => {
+    //   if(value){
+    //     setInputValue(convertTo12Hour(value))
+    //   }
+    // }, [])
+    var handleTimeClick = function (e, item) {
+        setInputValue(item);
+    };
+    var handleOnFocus = function () {
+        setInputValue(undefined);
+    };
+    var handleOnBlur = function () {
+        if ((0, convertToMiltaryTime_1.convertToMiltaryTime)(inputValue) === "Invalid time input") {
+            setInputValue((0, getNearestTimeToCurrentTime_1.getNearestTimeToCurrentTime)(timeStripArray));
+            setErrorMessage(null);
+        }
+        onParentChange && onParentChange(id, (0, convertToMiltaryTime_1.convertToMiltaryTime)(inputValue));
+    };
+    var handleInputChange = function (e) {
+        var newValue = e.target.value;
+        (0, handleTimeValidation_1.handleTimeValidation)(newValue, setErrorMessage, setInputValue);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement("div", { style: { display: "flex", position: 'relative' } },
+            readOnly ? (react_1.default.createElement(Typo_1.SANS_3, null, inputValue)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(styled_1.StyledTimeInputWrapper, { invert: invert },
+                    react_1.default.createElement(styled_1.StyledTimeInput, { type: "test", className: "SANS_3", placeholder: "HH:MM AA", maxLength: "8", invert: invert, value: inputValue, ref: inputRef, autoCapitalize: "characters", onChange: function (e) { return handleInputChange(e); }, onBlur: function () { return handleOnBlur(); }, onFocus: function () { return handleOnFocus(); }, onKeyDown: function (e) {
+                            if (e.key === 'Enter') {
+                                e.target.blur();
+                            }
+                        }, disabled: disabled }),
+                    react_1.default.createElement(styled_1.StyledDropDown, { className: "drop-down", invert: invert },
+                        react_1.default.createElement(styled_1.StyledDropDownList, { className: "drop-list", ref: timeStripRef },
+                            " ",
+                            timeStripArray.map(function (item) { return (react_1.default.createElement(styled_1.StyledListItem, { "data-value": item, key: item, onMouseDown: function (e) { return handleTimeClick(e, item); }, invert: invert, className: "listElement" },
+                                react_1.default.createElement(Typo_1.SANS_3, { invert: invert }, item))); })))))),
+            errorMessage && react_1.default.createElement(Typo_1.SANS_0, { color: "red", style: { position: 'absolute', top: '-1.5rem' } }, errorMessage))));
+};
+exports.TimePicker = TimePicker;

package/dist/components/TimePicker/styled.d.ts

@@ -0,0 +1,6 @@
+export const StyledTimeInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTimeInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export const StyledDropDown: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMotionDiv: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export const StyledDropDownList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export const StyledListItem: import("styled-components").StyledComponent<"li", any, {}, never>;

package/dist/components/TimePicker/styled.js

@@ -0,0 +1,60 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledListItem = exports.StyledDropDownList = exports.StyledMotionDiv = exports.StyledDropDown = exports.StyledTimeInput = exports.StyledTimeInputWrapper = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var themes_1 = require("../../themes");
+var globalVariables_1 = require("../../globalStyles/globalVariables");
+var mixins_1 = require("../../themes/mixins");
+var framer_motion_1 = require("framer-motion");
+var greyColor80 = themes_1.colors.greyColor80, greyColor10 = themes_1.colors.greyColor10, greyColor5 = themes_1.colors.greyColor5, greyColor15 = themes_1.colors.greyColor15, greyColor70 = themes_1.colors.greyColor70, greyColor40 = themes_1.colors.greyColor40;
+exports.StyledTimeInputWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  ", "\n  &:focus-within {\n    background-color: ", ";\n\n    &::after {\n      width: 100%;\n    }\n\n    &:focus-within .drop-down {\n      display: block;\n    }\n  }\n\n  \n"], ["\n  position: relative;\n  ", "\n  &:focus-within {\n    background-color: ", ";\n\n    &::after {\n      width: 100%;\n    }\n\n    &:focus-within .drop-down {\n      display: block;\n    }\n  }\n\n  \n"])), globalVariables_1.globalInputElemFocused, greyColor10);
+exports.StyledTimeInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    /* padding: 0rem 3rem; */\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 10rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    ", "\n\n    &:placeholder-shown {\n        width: 11.5rem;\n    }\n"], ["\n    ", "\n    /* padding: 0rem 3rem; */\n    background: ", ";\n    outline: none;\n    border: none;\n    width: 10rem;\n    height: 4rem;\n    color: ", ";\n\n    ", "\n    &:focus {\n        background-color: ", ";\n    }\n\n    ", "\n\n    &::placeholder {\n        color: ", ";\n    }\n\n    ", "\n\n    &:placeholder-shown {\n        width: 11.5rem;\n    }\n"])), globalVariables_1.globalInputElemPadding, function (_a) {
+    var invert = _a.invert;
+    return (invert ? greyColor80 : greyColor5);
+}, function (_a) {
+    var invert = _a.invert, disabled = _a.disabled;
+    return invert
+        ? (disabled ? themes_1.colors.greyColor40 : themes_1.colors.white)
+        : disabled ? themes_1.colors.greyColor40 : themes_1.colors.greyColor100;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? '' : globalVariables_1.globalInputElemHover);
+}, function (_a) {
+    var invert = _a.invert, disabled = _a.disabled;
+    return disabled ? greyColor15 : invert ? greyColor70 : greyColor10;
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "], ["\n            color: ", "\n            background-color: ", ";\n            cursor: not-allowed;\n            &:hover{\n                background-color: none !important;\n            }\n    "])), greyColor40, greyColor15);
+}, greyColor40, (0, mixins_1.transition)('background-color', 'width'));
+exports.StyledDropDown = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    ", "\n    position: absolute;\n    display: none;\n    left: 0;\n    overflow-y: scroll;\n    /* scroll-behavior: smooth; */\n    height: 20rem;\n    width: 15rem;\n    z-index: 1;\n"], ["\n    ", "\n    position: absolute;\n    display: none;\n    left: 0;\n    overflow-y: scroll;\n    /* scroll-behavior: smooth; */\n    height: 20rem;\n    width: 15rem;\n    z-index: 1;\n"])), globalVariables_1.globalLightboxStyle);
+exports.StyledMotionDiv = (0, styled_components_1.default)(framer_motion_1.motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\n"], ["\n\n"])));
+exports.StyledDropDownList = styled_components_1.default.ul(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    list-style: none;\n    padding-left: 0;\n\n    &:hover{\n        .drop-list{\n            background-color: inherit;\n        }\n    }\n"], ["\n    list-style: none;\n    padding-left: 0;\n\n    &:hover{\n        .drop-list{\n            background-color: inherit;\n        }\n    }\n"])));
+exports.StyledListItem = styled_components_1.default.li(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    padding: 9px 20px;\n    cursor: pointer;\n    ", "\n\n    .highlight{\n        background-color: red;\n    }\n"], ["\n    padding: 9px 20px;\n    cursor: pointer;\n    ", "\n\n    .highlight{\n        background-color: red;\n    }\n"])), globalVariables_1.globalHoverOnWhiteBG);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/TimePicker/utils/convertTo12Hour.d.ts

@@ -0,0 +1 @@
+export function convertTo12Hour(time24: any): any;

package/dist/components/TimePicker/utils/convertTo12Hour.js

@@ -0,0 +1,27 @@
+"use strict";
+// This function converts a 24-hour time format to a 12-hour time format with AM or PM. 
+// Also if passed valued is already in 12 Hour format with AM PM then it just returns it as is 
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertTo12Hour = void 0;
+function convertTo12Hour(time24) {
+    // Check if the input is already in the expected format
+    if (/^\d{1,2}:\d{2} [APM]{2}$/i.test(time24)) {
+        return time24.toUpperCase();
+    }
+    var _a = time24.split(':').map(Number), hours = _a[0], minutes = _a[1];
+    if (hours >= 0 && hours <= 11) {
+        // Convert to 12-hour format with "AM"
+        var amTime = "".concat(hours === 0 ? 12 : hours, ":").concat(minutes.toString().padStart(2, '0'), " AM");
+        return amTime.toUpperCase();
+    }
+    else if (hours >= 12 && hours <= 23) {
+        // Convert to 12-hour format with "PM"
+        var pmTime = "".concat(hours === 12 ? 12 : hours - 12, ":").concat(minutes.toString().padStart(2, '0'), " PM");
+        return pmTime.toUpperCase();
+    }
+    else {
+        // Handle invalid input
+        return 'Invalid Time';
+    }
+}
+exports.convertTo12Hour = convertTo12Hour;

package/dist/components/TimePicker/utils/convertToMiltaryTime.d.ts

@@ -0,0 +1 @@
+export function convertToMiltaryTime(time: any): string;

package/dist/components/TimePicker/utils/convertToMiltaryTime.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToMiltaryTime = void 0;
+function convertToMiltaryTime(time) {
+    var _a = time === null || time === void 0 ? void 0 : time.split(/[:\s]/), hh = _a[0], mm = _a[1], period = _a[2];
+    var hour = parseInt(hh);
+    var minute = mm;
+    if (isNaN(hour) || isNaN(minute) || hour < 1 || hour > 12 || minute < 0 || minute > 59) {
+        // Invalid input, return an error message or handle as needed.
+        return "Invalid time input";
+    }
+    if (period === "PM" && hour !== 12) {
+        hour += 12;
+    }
+    else if (period === "AM" && hour === 12) {
+        // Handle "12:00 AM" as midnight (00:00)
+        hour = 0;
+    }
+    // Format hour and minute as two-digit strings
+    var formattedHour = hour.toString().padStart(2, "0");
+    var formattedMinute = minute.padStart(2, "0");
+    // Construct and return the military time string
+    var militaryTime = "".concat(formattedHour, ":").concat(formattedMinute);
+    return militaryTime;
+}
+exports.convertToMiltaryTime = convertToMiltaryTime;

package/dist/components/TimePicker/utils/getNearestTimeToCurrentTime.d.ts

@@ -0,0 +1 @@
+export function getNearestTimeToCurrentTime(timeArray: any): any;

package/dist/components/TimePicker/utils/getNearestTimeToCurrentTime.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNearestTimeToCurrentTime = void 0;
+var convertTo12Hour_1 = require("./convertTo12Hour");
+var timeToMinutes_1 = require("./timeToMinutes");
+function getNearestTimeToCurrentTime(timeArray) {
+    var currentTime = new Date();
+    var hours = currentTime.getHours().toString().padStart(2, "0");
+    var minutes = currentTime.getMinutes().toString().padStart(2, "0");
+    // let's format time to match timeArray so it can be compared, example 00:00 = 12:00 AM
+    var formattedTime = (0, convertTo12Hour_1.convertTo12Hour)("".concat(hours, ":").concat(minutes));
+    //format time to minutes, example, formatedTime === 12:45 AM, it will converted to "765", with help of timeToMinutes()
+    var formattedTimeMinutes = (0, timeToMinutes_1.timeToMinutes)(formattedTime);
+    var nearestTime = timeArray[0];
+    // now find minimum difference between current form formattedTimeMinutes and timeArray[0]
+    var minDifference = Math.abs(formattedTimeMinutes - (0, timeToMinutes_1.timeToMinutes)(timeArray[0]));
+    for (var i = 1; i < timeArray.length; i++) {
+        var currentDifference = Math.abs(formattedTimeMinutes - (0, timeToMinutes_1.timeToMinutes)(timeArray[i]));
+        if (currentDifference < minDifference) {
+            nearestTime = timeArray[i];
+            minDifference = currentDifference;
+        }
+    }
+    return nearestTime;
+}
+exports.getNearestTimeToCurrentTime = getNearestTimeToCurrentTime;

package/dist/components/TimePicker/utils/highLightTime.d.ts

@@ -0,0 +1 @@
+export function highLightTime(elementToScroll: any, invert: any): void;

package/dist/components/TimePicker/utils/highLightTime.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.highLightTime = void 0;
+var themes_1 = require("../../../themes");
+function highLightTime(elementToScroll, invert) {
+    elementToScroll.scrollIntoView({ behavior: "auto" });
+    // elementToScroll.style.backgroundColor = invert ? colors.greyColor70 : colors.greyColor10;
+}
+exports.highLightTime = highLightTime;

package/dist/components/TimePicker/utils/timeToMinutes.d.ts

@@ -0,0 +1 @@
+export function timeToMinutes(time: any): number;

package/dist/components/TimePicker/utils/timeToMinutes.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.timeToMinutes = void 0;
+function timeToMinutes(time) {
+    // Split the input time string into three parts: hours (hh), minutes (mm), and period (AM/PM).
+    var _a = time.split(/[:\s]/), hh = _a[0], mm = _a[1], period = _a[2];
+    // Convert the hours and minutes to minutes since midnight.
+    var minutes = parseInt(hh) * 60 + parseInt(mm);
+    // Check if the period is "PM" and if the hour is not already 12 (noon).
+    if (period === "PM" && hh !== "12") {
+        // If it's "PM" and not noon, add 12 hours' worth of minutes to the total.
+        minutes += 12 * 60;
+    }
+    else if (period === "AM" && hh === "12") {
+        // Handle "12:00 AM" as midnight (00:00)
+        minutes = 0;
+    }
+    return minutes;
+}
+exports.timeToMinutes = timeToMinutes;

package/dist/components/TimeRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export function TimeRangePicker(props: any): React.JSX.Element;
+import React from "react";

package/dist/components/TimeRangePicker/index.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangePicker = void 0;
+var react_1 = __importStar(require("react"));
+var BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var TimePicker_1 = require("../TimePicker");
+var TimeRangePicker = function (props) {
+    var value = props.value, onChange = props.onChange, id = props.id, readOnly = props.readOnly, invert = props.invert, disabled = props.disabled;
+    var _a = (0, react_1.useState)(value || [null, null]), _value = _a[0], _setValue = _a[1];
+    var handleOnchange = function (i, v) {
+        var newValue = value ? __spreadArray([], value, true) : [];
+        newValue[i] = v;
+        onChange && onChange(id, newValue);
+    };
+    (0, react_1.useEffect)(function () {
+        if (value) {
+            _setValue(value);
+        }
+    }, [value]);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        react_1.default.createElement("div", { style: { display: "flex", columnGap: '2rem', flexWrap: 'wrap', rowGap: '1rem' } },
+            react_1.default.createElement(TimePicker_1.TimePicker, { value: _value && _value[0], id: 0, onChange: handleOnchange, readOnly: readOnly, invert: invert, disabled: disabled }),
+            react_1.default.createElement(TimePicker_1.TimePicker, { value: _value && _value[1], id: 1, onChange: handleOnchange, readOnly: readOnly, invert: invert, disabled: disabled }))));
+};
+exports.TimeRangePicker = TimeRangePicker;

package/dist/index.d.ts

@@ -32,10 +32,14 @@ export { ModalSmall } from "./components/Modals/ModalSmall";
 export { EmptyStates } from "./components/EmptyStates";
 export { HomeCover } from "./components/HomeCover";
 export { PageScrollIndicator } from "./components/PageScrollIndicator";
-export { default as DatePicker } from "./components/DatePicker";
-export { default as DateRangePicker } from "./components/DateRangePicker";
 export { BarChart } from "./components/dataViz/comps/BarChart";
 export { TextLoader } from "./components/LoadersAndProgress/TextLoader";
+export { default as DatePicker } from "./components/DatePicker";
+export { default as DateRangePicker } from "./components/DateRangePicker";
+export { TimePicker } from "./components/TimePicker";
+export { TimeRangePicker } from "./components/TimeRangePicker";
+export { DateTimePicker } from "./components/DateTimePicker";
+export { DateTimeRangePicker } from "./components/DateTimeRangePicker";
 export { CardContent } from "./components/cards/CardContent";
 export { ListContent } from "./components/cards/ListContent";
 export { CardEmbed } from "./components/cards/CardEmbed";

package/dist/index.js

@@ -17,7 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SimpleTable = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.TextLoader = exports.BarChart = exports.DateRangePicker = exports.DatePicker = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.SimpleTable = exports.BannerProvider = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -78,14 +79,23 @@ var HomeCover_1 = require("./components/HomeCover");
 Object.defineProperty(exports, "HomeCover", { enumerable: true, get: function () { return HomeCover_1.HomeCover; } });
 var PageScrollIndicator_1 = require("./components/PageScrollIndicator");
 Object.defineProperty(exports, "PageScrollIndicator", { enumerable: true, get: function () { return PageScrollIndicator_1.PageScrollIndicator; } });
-var DatePicker_1 = require("./components/DatePicker");
-Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
-var DateRangePicker_1 = require("./components/DateRangePicker");
-Object.defineProperty(exports, "DateRangePicker", { enumerable: true, get: function () { return __importDefault(DateRangePicker_1).default; } });
 var BarChart_1 = require("./components/dataViz/comps/BarChart");
 Object.defineProperty(exports, "BarChart", { enumerable: true, get: function () { return BarChart_1.BarChart; } });
 var TextLoader_1 = require("./components/LoadersAndProgress/TextLoader");
 Object.defineProperty(exports, "TextLoader", { enumerable: true, get: function () { return TextLoader_1.TextLoader; } });
+// tpl blocks
+var DatePicker_1 = require("./components/DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return __importDefault(DatePicker_1).default; } });
+var DateRangePicker_1 = require("./components/DateRangePicker");
+Object.defineProperty(exports, "DateRangePicker", { enumerable: true, get: function () { return __importDefault(DateRangePicker_1).default; } });
+var TimePicker_1 = require("./components/TimePicker");
+Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return TimePicker_1.TimePicker; } });
+var TimeRangePicker_1 = require("./components/TimeRangePicker");
+Object.defineProperty(exports, "TimeRangePicker", { enumerable: true, get: function () { return TimeRangePicker_1.TimeRangePicker; } });
+var DateTimePicker_1 = require("./components/DateTimePicker");
+Object.defineProperty(exports, "DateTimePicker", { enumerable: true, get: function () { return DateTimePicker_1.DateTimePicker; } });
+var DateTimeRangePicker_1 = require("./components/DateTimeRangePicker");
+Object.defineProperty(exports, "DateTimeRangePicker", { enumerable: true, get: function () { return DateTimeRangePicker_1.DateTimeRangePicker; } });
 //cards
 var CardContent_1 = require("./components/cards/CardContent");
 Object.defineProperty(exports, "CardContent", { enumerable: true, get: function () { return CardContent_1.CardContent; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.68.5",
+  "version": "2.69.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",