@wavemaker/react-runtime 11.14.1-rc.236

package/components/input/epoch/date/index.js

@@ -0,0 +1,520 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _material = require("@mui/material");
+var _BaseDateTime = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/BaseDateTime"));
+var _utils = require("./utils");
+var _DatePickerPopover = _interopRequireDefault(require("./components/DatePickerPopover"));
+var _store = require("@wavemaker/react-runtime/store");
+var _withFormController = _interopRequireDefault(require("@wavemaker/react-runtime/components/data/form/form-controller/withFormController"));
+var _excluded = ["name", "hint", "shortcutkey", "datavalue", "width", "arialabel", "invokeOnChange", "handleKeyDown", "getDateObj", "updatePrevDatavalue", "updateBoundVariable", "onChange", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onBeforeload", "placeholder", "tabindex", "datepattern", "outputformat", "required", "excludedays", "excludedates", "showweeks", "showbuttonbar", "autofocus", "readonly", "disabled", "showdropdownon", "adaptiveposition", "selectfromothermonth", "todaybutton", "clearbutton", "todaybuttonlabel", "clearbuttonlabel", "showcustompicker", "showdateformatasplaceholder", "viewmode", "dataentrymode", "listener", "className", "styles"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Types
+
+// Custom Hooks
+var useDateValidation = function useDateValidation(excludedDays, excludedDates, mindate, maxdate, getDateObj) {
+  return (0, _react.useCallback)(function (date) {
+    if (!(date !== null && date !== void 0 && date.isValid())) return true;
+
+    // Check excluded days
+    if (excludedDays.includes(date.day())) return true;
+
+    // Check excluded dates
+    var dateFormatted = date.format("YYYY-MM-DD");
+    var isExcluded = excludedDates.some(function (excludedDate) {
+      return excludedDate && (0, _momentTimezone["default"])(excludedDate).format("YYYY-MM-DD") === dateFormatted;
+    });
+    if (isExcluded) return true;
+
+    // Check date range
+    var minDateObj = mindate ? (0, _momentTimezone["default"])(getDateObj === null || getDateObj === void 0 ? void 0 : getDateObj(mindate)) : null;
+    var maxDateObj = maxdate ? (0, _momentTimezone["default"])(getDateObj === null || getDateObj === void 0 ? void 0 : getDateObj(maxdate)) : null;
+    if (minDateObj !== null && minDateObj !== void 0 && minDateObj.isValid() && date.isBefore(minDateObj, "day")) return true;
+    if (maxDateObj !== null && maxDateObj !== void 0 && maxDateObj.isValid() && date.isAfter(maxDateObj, "day")) return true;
+    return false;
+  }, [excludedDays, excludedDates, mindate, maxdate, getDateObj]);
+};
+
+// Main Component
+var WmDate = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  // Merge props with defaults
+  var _props = _objectSpread({}, props),
+    name = _props.name,
+    hint = _props.hint,
+    shortcutkey = _props.shortcutkey,
+    datavalue = _props.datavalue,
+    width = _props.width,
+    arialabel = _props.arialabel,
+    invokeOnChange = _props.invokeOnChange,
+    handleKeyDown = _props.handleKeyDown,
+    _props$getDateObj = _props.getDateObj,
+    getDateObj = _props$getDateObj === void 0 ? _utils.defaultGetDateObj : _props$getDateObj,
+    updatePrevDatavalue = _props.updatePrevDatavalue,
+    updateBoundVariable = _props.updateBoundVariable,
+    onChange = _props.onChange,
+    onClick = _props.onClick,
+    _onFocus = _props.onFocus,
+    _onBlur = _props.onBlur,
+    _onMouseEnter = _props.onMouseEnter,
+    _onMouseLeave = _props.onMouseLeave,
+    onBeforeload = _props.onBeforeload,
+    _props$placeholder = _props.placeholder,
+    placeholder = _props$placeholder === void 0 ? "Select Date" : _props$placeholder,
+    _props$tabindex = _props.tabindex,
+    tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
+    _props$datepattern = _props.datepattern,
+    datepattern = _props$datepattern === void 0 ? (0, _store.useAppSelector)(function (state) {
+      return state.i18n.dateFormat || "MMM d, y";
+    }) : _props$datepattern,
+    _props$outputformat = _props.outputformat,
+    outputformat = _props$outputformat === void 0 ? "yyyy-MM-dd" : _props$outputformat,
+    _props$required = _props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$excludedays = _props.excludedays,
+    excludedays = _props$excludedays === void 0 ? "" : _props$excludedays,
+    _props$excludedates = _props.excludedates,
+    excludedates = _props$excludedates === void 0 ? "" : _props$excludedates,
+    _props$showweeks = _props.showweeks,
+    showweeks = _props$showweeks === void 0 ? false : _props$showweeks,
+    _props$showbuttonbar = _props.showbuttonbar,
+    showbuttonbar = _props$showbuttonbar === void 0 ? true : _props$showbuttonbar,
+    _props$autofocus = _props.autofocus,
+    autofocus = _props$autofocus === void 0 ? false : _props$autofocus,
+    _props$readonly = _props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly,
+    _props$disabled = _props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$showdropdownon = _props.showdropdownon,
+    showdropdownon = _props$showdropdownon === void 0 ? "default" : _props$showdropdownon,
+    _props$adaptivepositi = _props.adaptiveposition,
+    adaptiveposition = _props$adaptivepositi === void 0 ? true : _props$adaptivepositi,
+    _props$selectfromothe = _props.selectfromothermonth,
+    selectfromothermonth = _props$selectfromothe === void 0 ? true : _props$selectfromothe,
+    _props$todaybutton = _props.todaybutton,
+    todaybutton = _props$todaybutton === void 0 ? true : _props$todaybutton,
+    _props$clearbutton = _props.clearbutton,
+    clearbutton = _props$clearbutton === void 0 ? true : _props$clearbutton,
+    _props$todaybuttonlab = _props.todaybuttonlabel,
+    todaybuttonlabel = _props$todaybuttonlab === void 0 ? "Today" : _props$todaybuttonlab,
+    _props$clearbuttonlab = _props.clearbuttonlabel,
+    clearbuttonlabel = _props$clearbuttonlab === void 0 ? "Clear" : _props$clearbuttonlab,
+    _props$showcustompick = _props.showcustompicker,
+    showcustompicker = _props$showcustompick === void 0 ? false : _props$showcustompick,
+    _props$showdateformat = _props.showdateformatasplaceholder,
+    showdateformatasplaceholder = _props$showdateformat === void 0 ? false : _props$showdateformat,
+    _props$viewmode = _props.viewmode,
+    viewmode = _props$viewmode === void 0 ? "day" : _props$viewmode,
+    _props$dataentrymode = _props.dataentrymode,
+    dataentrymode = _props$dataentrymode === void 0 ? "default" : _props$dataentrymode,
+    listener = _props.listener,
+    className = _props.className,
+    styles = _props.styles,
+    restProps = (0, _objectWithoutProperties2["default"])(_props, _excluded);
+  var currentLocale = (0, _store.useAppSelector)(function (state) {
+    return state.i18n.selectedLocale;
+  });
+  // State
+  var _useState = (0, _react.useState)(false),
+    showPicker = _useState[0],
+    setShowPicker = _useState[1];
+  var _useState2 = (0, _react.useState)(""),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    anchorEl = _useState3[0],
+    setAnchorEl = _useState3[1];
+  var _useState4 = (0, _react.useState)(false),
+    invalidDateTimeFormat = _useState4[0],
+    setInvalidDateTimeFormat = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    dateNotInRange = _useState5[0],
+    setDateNotInRange = _useState5[1];
+  var _useState6 = (0, _react.useState)(viewmode),
+    calendarViewMode = _useState6[0],
+    setCalendarViewMode = _useState6[1];
+  var _useState7 = (0, _react.useState)((0, _momentTimezone["default"])()),
+    calendarDate = _useState7[0],
+    setCalendarDate = _useState7[1];
+  var _useState8 = (0, _react.useState)(null),
+    selectedDate = _useState8[0],
+    setSelectedDate = _useState8[1];
+
+  // Refs
+  var datepickerRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var onBeforeloadExecutedRef = (0, _react.useRef)(false);
+
+  // Memoized values
+  var excludedDaysToDisable = (0, _react.useMemo)(function () {
+    return (0, _utils.parseExcludedDays)(excludedays);
+  }, [excludedays]);
+  var excludedDatesToDisable = (0, _react.useMemo)(function () {
+    return (0, _utils.parseExcludedDates)(excludedates, getDateObj);
+  }, [excludedates, getDateObj]);
+  var dateValue = (0, _react.useMemo)(function () {
+    return getDateObj(datavalue);
+  }, [datavalue, getDateObj]);
+  var isDateDisabled = useDateValidation(excludedDaysToDisable, excludedDatesToDisable, restProps.mindate, restProps.maxdate, getDateObj);
+  var isNavigationDisabled = (0, _react.useMemo)(function () {
+    if (!restProps.mindate || !restProps.maxdate) return false;
+    var minMoment = (0, _momentTimezone["default"])(getDateObj(restProps.mindate));
+    var maxMoment = (0, _momentTimezone["default"])(getDateObj(restProps.maxdate));
+    return minMoment.isValid() && maxMoment.isValid() && minMoment.isSame(maxMoment, "day");
+  }, [restProps.mindate, restProps.maxdate, getDateObj]);
+  var shouldOpenOnInput = showdropdownon === "default" || dataentrymode === "picker" && showdropdownon !== "button";
+
+  // Computed values
+  var getDisplayValue = (0, _react.useCallback)(function () {
+    if (!dateValue) return "";
+    try {
+      // Use moment with current locale for proper localization
+      var momentDate = (0, _momentTimezone["default"])(dateValue).locale(currentLocale);
+      var momentPattern = (0, _utils.convertToMomentFormat)(datepattern);
+      return momentDate.format(momentPattern);
+    } catch (_unused) {
+      return "";
+    }
+  }, [dateValue, datepattern, currentLocale]);
+  var getPlaceholderText = (0, _react.useCallback)(function () {
+    return showdateformatasplaceholder ? datepattern.toUpperCase() : placeholder;
+  }, [showdateformatasplaceholder, datepattern, placeholder]);
+
+  // Effects
+  (0, _react.useEffect)(function () {
+    var displayValue = getDisplayValue();
+    setInputValue(displayValue);
+    if (dateValue) {
+      var momentDateValue = (0, _momentTimezone["default"])(dateValue);
+      setSelectedDate(momentDateValue);
+      setCalendarDate(momentDateValue);
+      if (listener !== null && listener !== void 0 && listener.onChange) {
+        listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
+          displayValue: displayValue,
+          datavalue: (0, _utils.formatDate)(momentDateValue.toDate(), outputformat),
+          timestamp: (0, _utils.formatDate)(momentDateValue.toDate(), "timestamp")
+        }));
+      }
+    } else {
+      setSelectedDate(null);
+      setCalendarDate((0, _momentTimezone["default"])());
+    }
+  }, [dateValue, getDisplayValue, datavalue]);
+  (0, _react.useEffect)(function () {
+    if (autofocus && inputRef.current) {
+      var timer = setTimeout(function () {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      }, 0);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [autofocus]);
+  (0, _react.useEffect)(function () {
+    setCalendarViewMode(viewmode);
+  }, [viewmode]);
+
+  // Update input value when locale changes
+  (0, _react.useEffect)(function () {
+    if (dateValue) {
+      var newDisplayValue = getDisplayValue();
+      setInputValue(newDisplayValue);
+
+      // Update listener widget display value if it exists
+      if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
+        listener.Widgets[name].displayValue = newDisplayValue;
+      }
+    }
+  }, [currentLocale, getDisplayValue, dateValue, name, listener]);
+
+  // Call onBeforeload callback on component mount
+  (0, _react.useEffect)(function () {
+    var _props$listener;
+    if (onBeforeload && name && (_props$listener = props.listener) !== null && _props$listener !== void 0 && (_props$listener = _props$listener.Widgets) !== null && _props$listener !== void 0 && _props$listener[name] && !onBeforeloadExecutedRef.current) {
+      var _props$listener2;
+      var syntheticEvent = {};
+      onBeforeload(syntheticEvent, (_props$listener2 = props.listener) === null || _props$listener2 === void 0 || (_props$listener2 = _props$listener2.Widgets) === null || _props$listener2 === void 0 ? void 0 : _props$listener2[name]);
+      onBeforeloadExecutedRef.current = true;
+    }
+  }, [onBeforeload, name, props.listener]);
+
+  // Event Handlers
+  var handleOpen = (0, _react.useCallback)(function (event) {
+    if (disabled || readonly) return;
+    setAnchorEl(event.currentTarget);
+    setShowPicker(true);
+    var targetDate = selectedDate !== null && selectedDate !== void 0 && selectedDate.isValid() ? selectedDate : dateValue ? (0, _momentTimezone["default"])(dateValue) : (0, _momentTimezone["default"])();
+    setCalendarDate(targetDate);
+    if (dateValue && !selectedDate) {
+      setSelectedDate((0, _momentTimezone["default"])(dateValue));
+    }
+    setCalendarViewMode(viewmode === "month" ? "month" : viewmode);
+  }, [disabled, readonly, selectedDate, dateValue, viewmode]);
+  var clearDateValue = function clearDateValue(invokeOnChange, updatePrevDatavalue, updateBoundVariable, setInputValue, setSelectedDate, setInvalidDateTimeFormat, setDateNotInRange) {
+    invokeOnChange === null || invokeOnChange === void 0 || invokeOnChange("");
+    updatePrevDatavalue === null || updatePrevDatavalue === void 0 || updatePrevDatavalue("");
+    updateBoundVariable === null || updateBoundVariable === void 0 || updateBoundVariable("");
+    setInputValue === null || setInputValue === void 0 || setInputValue("");
+    setSelectedDate === null || setSelectedDate === void 0 || setSelectedDate(null);
+    setInvalidDateTimeFormat === null || setInvalidDateTimeFormat === void 0 || setInvalidDateTimeFormat(false);
+    setDateNotInRange === null || setDateNotInRange === void 0 || setDateNotInRange(false);
+  };
+  var handleDateSelection = function handleDateSelection(date) {
+    var shouldClose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setDateNotInRange(false);
+    setInvalidDateTimeFormat(false);
+    setSelectedDate(date.clone());
+    updateDateValue(date);
+    setCalendarDate(date);
+    if (shouldClose) {
+      handleClose();
+    }
+  };
+  var handleValidationError = function handleValidationError(errorType) {
+    var isRequired = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (errorType === "dateNotInRange") {
+      setDateNotInRange(true);
+    } else if (errorType === "invalidFormat" && isRequired) {
+      setInvalidDateTimeFormat(true);
+    }
+  };
+  var handleClose = (0, _react.useCallback)(function () {
+    setAnchorEl(null);
+    setShowPicker(false);
+    setTimeout(function () {
+      if (inputRef.current && !disabled && !readonly) {
+        inputRef.current.focus();
+      }
+    }, 0);
+  }, [disabled, readonly]);
+  var updateDateValue = (0, _react.useCallback)(function (date) {
+    var outputValue = (0, _utils.formatDate)(date.toDate(), outputformat);
+    // Use locale-aware formatting for display value
+    var displayValue = (0, _momentTimezone["default"])(date.toDate()).locale(currentLocale).format((0, _utils.convertToMomentFormat)(datepattern));
+    invokeOnChange === null || invokeOnChange === void 0 || invokeOnChange(outputValue);
+    updatePrevDatavalue === null || updatePrevDatavalue === void 0 || updatePrevDatavalue(outputValue);
+    updateBoundVariable === null || updateBoundVariable === void 0 || updateBoundVariable(outputValue);
+    setInputValue(displayValue);
+    var oldValue = inputValue;
+    if (name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
+      listener.Widgets[name].displayValue = displayValue;
+    }
+    if (listener !== null && listener !== void 0 && listener.onChange) {
+      listener.onChange(name, _objectSpread(_objectSpread({}, props), {}, {
+        datavalue: outputValue,
+        timestamp: (0, _utils.formatDate)(date.toDate(), "timestamp")
+      }));
+    }
+    if (onChange && name && listener !== null && listener !== void 0 && listener.Widgets[name]) {
+      onChange({}, name && (listener === null || listener === void 0 ? void 0 : listener.Widgets[name]), outputValue, oldValue);
+    }
+  }, [outputformat, datepattern, currentLocale, invokeOnChange, updatePrevDatavalue, updateBoundVariable, inputValue]);
+  var handleCalendarChange = (0, _react.useCallback)(function (date) {
+    if (!(date !== null && date !== void 0 && date.isValid())) return;
+    setCalendarDate(date);
+    var isMonthOrYearView = viewmode === "month" || viewmode === "year";
+    if (!isMonthOrYearView && isDateDisabled(date)) {
+      handleValidationError("dateNotInRange");
+      return;
+    }
+    handleDateSelection(date, true);
+  }, [viewmode, isDateDisabled, handleDateSelection]);
+  var handleMonthChange = (0, _react.useCallback)(function (value) {
+    if (!(value !== null && value !== void 0 && value.isValid())) return;
+    if (viewmode === "month") {
+      handleCalendarChange(value);
+    } else {
+      var newDate = calendarDate.clone().month(value.month()).year(value.year());
+      setCalendarDate(newDate);
+      setCalendarViewMode("day");
+    }
+  }, [viewmode, calendarDate, handleCalendarChange]);
+  var handleYearChange = (0, _react.useCallback)(function (value) {
+    if (!(value !== null && value !== void 0 && value.isValid())) return;
+    if (viewmode === "year") {
+      handleCalendarChange(value);
+    } else if (viewmode === "month") {
+      var newDate = calendarDate.clone().year(value.year());
+      setCalendarDate(newDate);
+      setCalendarViewMode("month");
+    } else {
+      var _newDate = calendarDate.clone().year(value.year());
+      setCalendarDate(_newDate);
+      setCalendarViewMode("month");
+    }
+  }, [viewmode, calendarDate, handleCalendarChange]);
+  var handleInputChange = (0, _react.useCallback)(function (event) {
+    if (dataentrymode === "picker") return;
+    var value = event.target.value;
+    setInputValue(value);
+    if (!value) {
+      clearDateValue(invokeOnChange, updatePrevDatavalue, updateBoundVariable, undefined, setSelectedDate, setInvalidDateTimeFormat, setDateNotInRange);
+      return;
+    }
+    var parsedDate = datepattern === "timestamp" ? (0, _momentTimezone["default"])(parseInt(value, 10)) : (0, _momentTimezone["default"])(value, (0, _utils.convertToMomentFormat)(datepattern), true);
+    if (!parsedDate.isValid()) {
+      handleValidationError("invalidFormat", props.required);
+      return;
+    }
+    if (isDateDisabled(parsedDate)) {
+      handleValidationError("dateNotInRange");
+      return;
+    }
+    handleDateSelection(parsedDate, false);
+  }, [dataentrymode, datepattern, isDateDisabled, invokeOnChange, updatePrevDatavalue, updateBoundVariable, inputValue]);
+  var handleInputKeyDown = (0, _react.useCallback)(function (event) {
+    var allowedKeys = ["Tab", "Escape", "Enter", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+    if (dataentrymode === "picker" && !allowedKeys.includes(event.key)) {
+      event.preventDefault();
+      return;
+    }
+    handleKeyDown === null || handleKeyDown === void 0 || handleKeyDown(event);
+    switch (event.key) {
+      case "Enter":
+        event.preventDefault();
+        if (!inputValue) {
+          clearDateValue(invokeOnChange, updatePrevDatavalue, updateBoundVariable, undefined, setSelectedDate, undefined, undefined);
+          return;
+        }
+        var parsedDate = (0, _momentTimezone["default"])(inputValue, datepattern, true);
+        if (parsedDate.isValid()) {
+          handleCalendarChange(parsedDate);
+        } else {
+          handleValidationError("invalidFormat", props.required);
+        }
+        break;
+      case "Escape":
+        handleClose();
+        break;
+      case "Tab":
+        if (showPicker) handleClose();
+        break;
+    }
+  }, [dataentrymode, datepattern, inputValue, showPicker, handleKeyDown, handleCalendarChange, handleClose, invokeOnChange, updatePrevDatavalue, updateBoundVariable]);
+  var handleTodayClick = (0, _react.useCallback)(function () {
+    handleCalendarChange((0, _momentTimezone["default"])());
+  }, [handleCalendarChange]);
+  var handleClearClick = (0, _react.useCallback)(function () {
+    clearDateValue(invokeOnChange, updatePrevDatavalue, updateBoundVariable, setInputValue, setSelectedDate, undefined, undefined);
+    handleClose();
+  }, [invokeOnChange, updatePrevDatavalue, updateBoundVariable, handleClose]);
+  var handleIconButtonClick = (0, _react.useCallback)(function (event) {
+    if (!disabled && !readonly) {
+      handleOpen(event);
+    }
+  }, [disabled, readonly, handleOpen]);
+  var handleInputClick = (0, _react.useCallback)(function (event) {
+    if (onClick && name) {
+      onClick(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    }
+    if (shouldOpenOnInput && !readonly && !disabled) {
+      handleIconButtonClick(event);
+    }
+  }, [shouldOpenOnInput, readonly, disabled, handleIconButtonClick]);
+
+  // Render
+  return __jsx(_material.Box, {
+    className: "ng-pristine ng-valid app-date input-group ng-touched",
+    ref: datepickerRef,
+    style: (0, _utils.getWidthStyle)(width),
+    title: hint
+  }, __jsx(_material.TextField, {
+    inputRef: inputRef,
+    fullWidth: true,
+    placeholder: getPlaceholderText(),
+    disabled: disabled || readonly,
+    "aria-readonly": readonly,
+    error: invalidDateTimeFormat || dateNotInRange,
+    helperText: invalidDateTimeFormat ? "Invalid date format" : dateNotInRange ? "Date not in valid range" : "",
+    slotProps: {
+      htmlInput: {
+        "aria-label": arialabel || "Date input ".concat(getPlaceholderText()),
+        tabIndex: tabindex,
+        accessKey: shortcutkey,
+        "aria-invalid": invalidDateTimeFormat || dateNotInRange,
+        readOnly: readonly || dataentrymode === "picker",
+        required: required,
+        autoFocus: autofocus,
+        name: name,
+        className: "form-control app-textbox app-dateinput display-input ".concat(className),
+        style: _objectSpread(_objectSpread({
+          cursor: dataentrymode === "picker" ? "pointer" : "text"
+        }, (0, _utils.getWidthStyle)(width)), styles),
+        onMouseEnter: function onMouseEnter(event) {
+          return _onMouseEnter && name && _onMouseEnter(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+        },
+        onMouseLeave: function onMouseLeave(event) {
+          return _onMouseLeave && name && _onMouseLeave(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+        }
+      }
+    },
+    value: inputValue,
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown,
+    onClick: handleInputClick,
+    onFocus: function onFocus(event) {
+      return _onFocus && name && _onFocus(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    },
+    onBlur: function onBlur(event) {
+      return _onBlur && name && _onBlur(event, listener === null || listener === void 0 ? void 0 : listener.Widgets[name]);
+    },
+    style: (0, _utils.getWidthStyle)(width)
+  }), __jsx(_material.Box, {
+    component: "span",
+    className: "input-group-btn"
+  }, __jsx(_material.Button, {
+    type: "button",
+    className: "btn btn-default btn-time ".concat(className),
+    tabIndex: tabindex,
+    disabled: disabled || readonly,
+    "aria-label": inputValue ? "Change Date ".concat(inputValue) : "Choose date by pressing enter",
+    "aria-haspopup": "true",
+    "aria-expanded": showPicker,
+    onClick: handleIconButtonClick
+  }, __jsx(_material.Box, {
+    component: "i",
+    "aria-hidden": "true",
+    className: "app-icon wm-sl-l sl-calendar"
+  }))), showPicker && __jsx(_DatePickerPopover["default"], {
+    open: showPicker,
+    anchorEl: anchorEl,
+    onClose: handleClose,
+    adaptiveposition: adaptiveposition,
+    showbuttonbar: showbuttonbar,
+    todaybutton: todaybutton,
+    clearbutton: clearbutton,
+    todaybuttonlabel: todaybuttonlabel,
+    clearbuttonlabel: clearbuttonlabel,
+    isNavigationDisabled: isNavigationDisabled,
+    restProps: restProps,
+    getDateObj: getDateObj,
+    viewmode: viewmode,
+    calendarViewMode: calendarViewMode,
+    calendarDate: calendarDate,
+    selectedDate: selectedDate,
+    selectfromothermonth: selectfromothermonth,
+    showweeks: showweeks,
+    isDateDisabled: isDateDisabled,
+    handleYearChange: handleYearChange,
+    handleMonthChange: handleMonthChange,
+    handleCalendarChange: handleCalendarChange,
+    setCalendarViewMode: setCalendarViewMode,
+    setCalendarDate: setCalendarDate,
+    handleTodayClick: handleTodayClick,
+    handleClearClick: handleClearClick
+  }));
+});
+WmDate.displayName = "WmDate";
+var _default = exports["default"] = (0, _BaseDateTime["default"])((0, _withFormController["default"])(WmDate));

package/components/input/epoch/date/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/input/epoch/date/styled.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledYearCalendar = exports.StyledDateCalendar = void 0;
+var _styles = require("@mui/material/styles");
+var _xDatePickers = require("@mui/x-date-pickers");
+// Styled Components
+var StyledDateCalendar = exports.StyledDateCalendar = (0, _styles.styled)(_xDatePickers.DateCalendar)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    "& .MuiDayCalendar-slideTransition": {
+      minHeight: "290px"
+    },
+    "& .MuiPickersDay-root.Mui-selected": {
+      backgroundColor: "var(--wm-btn-secondary-background) !important",
+      color: "var(--wm-btn-secondary-color)",
+      fontWeight: "bold"
+    },
+    "& .MuiMonthCalendar-button.Mui-selected": {
+      backgroundColor: "var(--wm-btn-secondary-background) !important",
+      color: "var(--wm-btn-secondary-color)",
+      fontWeight: "bold"
+    },
+    "& .MuiPickersDay-root.Mui-selected:hover": {
+      backgroundColor: "var(--wm-btn-secondary-background)",
+      color: "var(--wm-btn-secondary-color)"
+    },
+    "& .MuiPickersDay-root": {
+      fontSize: "0.875rem",
+      margin: 0
+    },
+    "& .MuiDayCalendar-weekDayLabel": {
+      fontSize: "0.875rem",
+      width: "36px",
+      height: "36px",
+      margin: "0"
+    },
+    "& .MuiDayCalendar-weekNumber": {
+      marginTop: "10px",
+      textAlign: "center",
+      width: "auto",
+      padding: "0 24px"
+    },
+    "& .MuiDayCalendar-weekNumberLabel": {
+      width: "32px",
+      padding: "0"
+    },
+    "& .MuiTypography-caption": {
+      padding: "0px 24px"
+    },
+    "& .MuiDayCalendar-header": {
+      width: "100%"
+    }
+  };
+});
+var StyledYearCalendar = exports.StyledYearCalendar = (0, _styles.styled)(_xDatePickers.YearCalendar)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    "& .MuiYearCalendar-button.Mui-selected": {
+      backgroundColor: "var(--wm-btn-secondary-background) !important",
+      color: "var(--wm-btn-secondary-color)",
+      fontWeight: "bold"
+    },
+    "& .MuiPickersYear-yearButton.Mui-selected:hover": {
+      backgroundColor: theme.palette.primary.dark
+    }
+  };
+});